JS概述

1、JS作用

1、验证表单
2、页面特效(pc端的网页效果)
3、移动端(移动web和app)
4、异步和服务器 交互(AJAX)
5、服务端开发(noddejs)

1.1、浏览器工作原理

2、弱类型脚本语言(解释型语言,解析执行与编译执行)

2.1、解析执行与编译执行

编译执行:把代码编译成CPU认识的语言(文件),然后整体的执行。
解析执行:一行一行解析,解析一行执行一行。

2.2、弱类型脚本语言

脚本语言是:弥补编译语言的不足而存在的,作为补充语言,不用编译。
弱类型语言:简单理解定义一个变量,可以有多种数据类型。( var temp)

3、组成(前端标准和JS组成)

3.1、前段标准(HTML/css/js)

javascript、html、css各自的作用
HTML 提供网页上显示的内容(结构)
CSS 美化网页(样式)
javascript 控制网页行为(行为)
设计原则:
结构、样式、行为--分离!

3.2、JS组成

JS= ECMAScript + DOM +BOM +高级

ECMAScript(前身为欧洲计算机制造商协会)
JavaScript的语言规范
DOM(Document Object Model的简称)
javascript操作网页上元素的API
BOM(Browser Obeject Model的简称)
JavaScript 操作浏览器部分功能的API

3.3、输出语句

一、console.log("内容")在控制打印输出内容
二、alert("内容")弹出显示内容
三、document.write("内容")在页面书写内容

4、变量

4.1、命名规则

驼峰命名规则:getElementById/matherAndFather/aaaOrBbbAndCcc
遵从规则:
1、变量命名必须以字母或是下标号"_"或者"$"为开头
2、变量名长度不能超过255个字符。
3、变量名中不允许使用空格,首个字不能为数字。
4、不用使用脚本语言中保留的关键字及保留符号作为变量名。
5、变量名区分大小写。(javascript是区分大小写的语言)
6、汉语可以作为变量名。但是不建议使用!!!(low)

4.2、变量使用

定义赋值和定义后在赋值
var age = 19;
var age ; age = 19
不建议使用:var age = “张三”; age = 19; 跨类型。
案例:变换变量
非数值型和数值型。

5、数据类型

5.1、数据类型划分

数据类型划分
使用关键字typeof:查看方法: typeof name或者 typeof(name)

5.2、简单数据类型(值类型)

四种:字符串 、数字 、布尔 、未定义 、空
String Number Boolean undefined null

5.3、复杂数据类型(引用类型)

Object、function、Array、Date、RegExp、Error.......

5.4、字面量

固定的值,让你从“字面上”理解其含义。
数值字面量
var age=18;//数值字面量,18为字面值

5.5、简单数据类型介绍

Number
1、进制
进制包括2进制、8进制(011)、10进制、16进制(0xA)等。。
2、浮点数
因为精度丢失问题,所以不断计算后的两个浮点数是否相等。
3、数值范围
由于内存的限制,ECMAScript并不能保存世界所有的数值
最小值:Number.MIN_VALUE,这个值为:5e-324
最大值:Number.MAX_VALUE,这个值为:1.7976931348623157e+308
无穷大:Infinity
无穷小:-Infinity

NaN

a)NaN非数值(Not a Number的简写)
console.log(“abc”/18); //结果是NaN
Undefined和任何数值计算为NaN;
NaN 与任何值都不相等,包括 NaN 本身
b) isNaN() :任何不能被转换为数值的值都会导致这个函数返回 true
(isNaN译为是否符合一个标准,什么标准呢?不是一个数字的标 准,如果符合了那么就不是一个数字,不符合就是一个数字)
isNaN(NaN);// true
isNaN(“blue”); // true
isNaN(123); // false

String

1、字面量定义方式
用引号时,可单可双,唯独不可一单一双。可用.length看有几个字符。

var name="zhangsan";
var name='zhangsan';
var name='zhangsan";//错误,单引号和双引号要成对出现

2、转译
总结:无法输出的字符,先输出/,在输出字符。(“、\、换行等....)
3、字符串不可变
在内存中不会立刻消失,只能二次赋值,原有的字符在一定时间内被垃圾回收器回收。
4、字符串拼接
如果两个变量都是字符串,无论是否包含数字,只要是拼接,那么在前一个后面添加后一个字符串。(+与-情况不同,详情参考数据转换)

Booblean

1、Booblean类型有两个字面量:true和false,区分大小写。(大写不对)
虽然Booblean类型的字面值只有两个,但ECMAScript中所有类型的值都有与这两个Booblean值等价的值
2、true
true、除0数字、"something"、Object(任何对象)为true
3、false
false、0、""、undefined、null为false
4、if判断时会把()内的值强行转换成boolean类型进行判断

undefined和null

null和undefined有最大的相似性、看看null==undefined的结果(true)也就更加说明这点。但是null==undefined的结果(false).不过相似归相似,还是有区别的,就是和数字运算时,10+null结果为:10;10+undefined结果 为:NaN.
任何数据类型和undefined运算都是NaN;
任何值和null运算,null可看做0运算。

6.数据类型转换

任何简单类型转换成String(三种方法)
变量+“” 或者 变量+“abc”
String(变量)
变量.tostring() 注意:undefined和null不可以
Null和undefined无toString方法。
任何简单类型转换成Number
此转换容易产生NaN,一旦被转换的变量中含有非数字字符,都容易出现NaN
变量-/一个数字(有非数字字符会出现NaN)
例:var num1 = “11”- 0; var num2 =“11”
1;var num =“11”/1;
JS底层做了一个强制类型转换,把字符串转换成了Number进行运算。
Number(变量)(有非数字字符会出现NaN)
var num1 = Number(“18”); 把字符变成了数字。
var num2 = Number(“18.99”); 结果为18.99数字型。(有小数也转换)
parseInt()和parseFloat()(译为取整和取浮点数)
空字符串parseInt()和parseFloat()返回NaN,Number("")返回0
parseInt(变量):如果变量中收割字符为字母则结果为NaN。
否则取出现首个非数字前的整数。

123=parselnt("123.123aaa");

parseFloat(变量):如果变量中收割字符为字母则结果为NaN。
否则取出现首个非数字前的浮点数。(没有小数取整)

123.123=parseFloat("123.123aaa");

特别提示

Boolean类型中:true数值为1;false为0;
null的数值类型为0;
undefined无数值类型或者为NaN;
任何简单类型转换成Boolean
任何数据类型都可以转换成boolean类型,所以和以往两个转换不同;
Boolean(变量)

var bool=Boolean("1111");  bool为true

!!变量
第一个逻辑非操作会甚至于无论什么操作数返回一个与之相反的布尔值
第二个逻辑 非操作则对于该布尔值求反
于是就得到了这个值真正对应的布尔值

7、操作符

7.1、操作符种类

一、算数运算符(+—/...)
a)一元运算符:正号、负号、++、--、平方等一个变量就能运算
b)二元运算符:+-
/%等两个变量才能运算
c)三元运算符: 值1?值2:值3;
二、逻辑运算符( ||&& ! )(或且非)
三、比较运算符(<、>、==、>=...)
四、赋值运算符(=、+=、-=、*=、/=、%=)

7.2、优先级

7.3、&&和||运算

&&链接两个boolean类型,有一个是false结果就是false
链接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)
例子: 1 = 2&&1; 0 = 0 && 1; 都是true取后面,都是false取前面。

7.4、||链接两个boolean类型,有一个是true结果就是true

连接值不是布尔类型时,按照成布尔类型计算,结果本身不变。(非布尔)
例子: 2= 2||1; 1 = 0 || 1; 都是true取前面,都是false取后面。

var obj = document.body.scrollTop || document.documentElement.scrollTop;

8、流程控制

一、顺序结构(程序正常执行流程从上往下,从左往右)(不用研究)
赋值运算时为从右往左执行,且左侧为属性或变量,不取值!!!
二、选择结构
a)If语句
b)Switch语句
三、循环结构
a)for循环
b)while循环
do...while循环

8.1、循序结构

程序正常执行顺序不必过多研究,特殊需求,

8.2、选择结构

共有两种,if语句和switch语句。If常用,switch为特殊情况使用,判断条件出现的情况特别多的时候用switch,其他时候if语句比较方便。

8.3、If语句

一、If语句用法有三种
1.if(条件1){程序1}
2.if(条件1){程序1}else{程序2}
3.if(条件1){程序1}else if(条件2){程序2}...else{程序n}
二、三目运算(也叫三元运算)(目或者元代表几个表达式)
三目运算可以替代部分if...else...功能,运算简单,使用方便,代码清晰。

表达式1?值1:值2

8.4、Switch语句

switch (值1) {
case value1:
程序1;
break; // break 关键字会导致代码执行流跳出 switch 语句
case value2:
程序2;
break;
default:
程序3;
}
注意:
break可以省略,如果省略,代码会继续执行下一个case
switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换
(例如,字符串 "10" 不等于数值 10)。

8.5、循环结构

共3种,for/while/do...while;可根据需求选择使用;
1.遍历数组首选for循环,简单循环使用for。
2.而while循环强调,不记循环次数(不知道循环多少次),首选while。
3.最后do...while循环强调,无论怎样,至少执行一次是,使用do...while。

8.6、for循环

1)执行流程
for (变量;条件1;条件2){ 执行程序 }
执行过程:变量->条件1->执行程序->条件2->条件1->执行程序.....
直到条件1不成立,跳出循环。
2)三个表达式均为可选,但是必须写分号!!!
for(;;){程序} 死循环;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容