day11JavaScript

1.网页构成

结构（HTML）+表现（css）+行为（JavaScript）

2.JavaScript的组成：

1）ECMAScript(标准：ECMA-262)：基础、面向对象

2)DOM(标准：W3C)：节点操作

3)BOM(无标准)：浏览器操作

3.JavaScript的特点：

​ 1）松散型：JS中的变量没有一个明确的类型，也叫弱类型的语言（允许将一块内存看做多种类型）。

​ 2）对象的属性:也可映射为任意属性的数据。

​ 3）JS是基于原型继承的。

4.JavaScript的使用

1）使用Script标签（只能被当前文件使用）

defer="derfer"
defer:表示所有DOM元素加载完成后，再执行JS代码
charset:字符编码（主要解决汉字编码问题，现在一般不需要）

注意：a.Script标签可以写在网页的任意地方，因为JS是同步执行的，但为了避免JS阻塞和影响操作DOM，最好写在body后。

​ b.要输出Script标签时必须拆开，列如：alert(’</sc’+'ript>’);

2）在a标签的href中写JS代码（实际开发中不建议这种使用，因为会影响到运行）

3）用script标签引入外部JS文件（可以）

​ 说明:

​ src:引入的外部JS文件的路径和文件名（只能用于引入JS文件）

​ async:异步加载JS代码（在加载DOM元素的同时可以运行JS代码)

5.标识符

所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符定义规则:

1）第一字符必须是一个字母、下划线（_）或一个美元符号（$）。

2)其他字符可以是字母、下划线、美元符号或数字。

3）不能把关键字、保留字、true、false和null作为标识符。

关键字:

break、else、new、var、case、finally 、return 、 void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instanceof、typeof等

保留字

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public等

6.变量

1)只定义变量

​ var x;

​ var a, b,c;2）

2）定义变量且赋值

​ var x1 = true;

​ var y1 = 100, y2 = null;

说明:

​ 1）定义变量时不需要给出数据的类型（松散式语言特点）。

​ 2）变量可以重复定义，后面会覆盖前面变量。

​ 3）不用var定义变量也可以，默认是为window对象添加了属性。

​ name = ’张三’;//相当于window. name = '张三’;

​ 4）定义的变量如果没有赋值，系统将自动赋默认值为’undefined’。

​ 5）一条语句可以以分号结束，也可以不加分号;如果是多条语句写在同一行上，必须用分号隔开

​ 6）在书写代码时，除了字符串中可以使用中文标点之外，其它任何地方只能用英文标点符号。

7.数据类型

数据类型介绍

ECMAScript中有5种简单数据类型：undefined、null、boolean、number和string。还有一种复杂数据类型——object。ECMAScript不支持任何创建自定义类型的机制，所有值都成为以上6中数据类型之一。

typeof操作符:typeof操作符是用来检测变量的数据类型。对于值或变量使用typeof操作符会返回如下字符串。

字符串	描述
undefined	未定义
boolean	布尔值
string	字符串
number	数值
object	对象或null
function	函数

​ 分为：

1）基本数据类型

​ a. number：数值型
​        用来表示一个数字，通常可用作进行加减乘除等运算。
​ 分为整型和浮点型（小数位可以浮动）。
​ 100（10进制）
​ 0123（8进制）
​ 0xae12（16进制）

​ isNaN()：用来判断是不是不是一个数。
​ b.string：字符型
​        用引号（单双引号都可以，它们没区别）引起来的一串字符（可以是数字、字母、标点符号、汉字等）,通常用作描述。
​ ‘abc’
​ “abc”
​ “a’bc”
​ c.boolean：布尔（逻辑）型
​        表示真（true）或假（false）。
​ d. null：空
​        表示一个空对象的地址指定指向的为空。
​ e.undefined：未定义
​        表示定义了一个变量，但如果没有给这个变量赋值，系统将自动赋值为undefined。

2）引用数据类型

​

    object:对象型
​            用来申明或存储一个对象（对象，函数、正则、字符、数值等）

​            var a = new Number(10);
​            var obj = {
​                sno: '007',
​                sname: '张三'
​            }

8.运算符

1）算术运算符

​ / %(求余/模) ++(自增) --(自减)

2）字符串运算符

+：用于实现字符串连接。

3）关系运算符

< >= <= == === != !==
返回的结果只能是true或false。
比较方法：
​ a.数值比较，是比较其大小；
​ b.字符比较，是比较ASCII码值的大小；
​        0->48,A->65,a->97,回车->13,ESC->27
​ c.汉字比较，是比较其Unicode编码值的大小
​        可以通过charCodeAt()获取编码值。
​ d.==和!=只比较值，不比较类型；===和!==既比较值又比较类型

比较：部分符号<数字<大写字母<小写字母<汉字

4）逻辑运算符

​ 逻辑运算符有:!、&&和||三种。返回的值一般是逻辑值true或false，也可能返回其它值。
​ ！：逻辑非（取反）(单目/一元运算)
​ !true -> false !false -> true
​ &&：逻辑与(双目/二元运算)
​ 只要有一个操作数为false，结果为false。
​ 注意：
​ 如果两个中任意一个操作数非逻辑值，第一个操作数的结果为true时，返回第二个操作数的值；
​ 第一个操作数的结果为false时，返回第一个操作数的值。
​ ||：逻辑或(双目/二元运算)
​ 只要有一个操作数为true，结果为true。
​ 注意：
​ 如果两个中任意一个操作数非逻辑值，第一个操作数的结果为true时，返回第一个操作数的值；
​ 第一个操作数的结果为false时，返回第二个操作数的值。

​ 短路运算：
​ a.&&运算时，如果第一个操作数为false，不需要计算第二个操作数，结果返回false。
​ b.||运算时，如果第一个操作数为true，不需要计算第二个操作数，结果返回true。

5）位运算符

6）三目运算符（条件运算符）

​ 语法：
​ 表达式1 ? 表达式2 ：表达式3
​ 如果表达式1成立，返回表达式2的结果；如果不成立，返回表达式3的结果。

​ Tips:
​ 三目运算相当于if语句中的双分支结构。
​ 如果表达式2或表达式3较为复杂，建议用if语句或switch语句实现。

运算符优先级：

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
*/ %	乘法、除法、取模
±+	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
&&	按位或
||	逻辑与
?:	逻辑或
= += -= *= /= %=	条件（三目运算）
= -= *= %=	赋值、运算赋值
,	多重求值

9.流程控制

​ JS是一门既面向过程，也是面向对象的解释型语言。
​ 面向过程：按照代码书写的顺序依次执行（OOP）。
​ JS也是一门结构性语言。
​ JS的结构分为顺序结构、分支（条件/选择）结构和循环结构三种。
​        顺序结构：按照代码的书写顺序依次执行，一般包含初始化、赋值、输入/输出等语句。
​        条件结构：用if或switch语句实现，其中的代码是有条件选择执行的。
​        循环结构：某部分代码在指定的条件范围内反复执行，用for/for…in/forEach/while/do…while语句实现。

1）条件结构

a.单分支

​ 语法：
​

      if(条件)语句;
​            或：
​            if(条件){
​               语句组;
​            }

​        如果条件成立，将执行语句或语句组；条件不成立，执行if的下一条语句。

b.双分支

​ 语法：
​

     if(条件)语句1;else 语句2;
​            或：
​            if(条件){
​               语句组1;
​            }else{
​               语句组2;
​            }

​         如果条件成立，将执行语句1或语句组1；条件不成立，将执行语句2或语句组2。

​        注意：else表示“否则”的意思，其后不能写条件。

c.多分支（三分支及以上的）

​ 多分支实际上是单分支和双分支的嵌套。
​ 语法：
​

        if(条件1){
​                if(条件2){
​                   if(条件3){
​                     语句或语句组;
​                   }
​                }
​            }

​ 或：
​

    if(条件1){
​               语句1或语句组1;
​            }else{
​               if(条件2){
​                  语句2或语句组2;
​               }else{
​                  语句3或语句组3;
​               }
​            }

​ 或：
​

        if(条件1){
​               if(条件2){
​                 语句1或语句组1;
​               }
​            }else{
​               if(条件3){
​                  语句1或语句组2;
​               }else{
​                  语句1或语句组3;
​               }
​            }

​ 或（简洁写法，推荐）：
​

      if(条件1){
​                语句1或语句组1;
​            }else if(条件2){
​                语句2或语句组2;
​            }else if(条件3){
​                语句3或语句组3;
​            }
​            ....
​            else{
​                语句n或语句组n;
​            }

​        如果条件1成立，将执行语句1或语句组1，后面的代码将不会被执行；
​        如果条件1不成立，将判断条件2，条件2成立，执行语句2或语句组2……
​        如果前面的条件都不满足时，将执行else后面的代码。

d.情况语句switch

​ 语法：
​

       switch(表达式){
​                case 表达式1: 语句1或语句组1;[break;]
​                case 表达式2: 语句2或语句组2;[break;]
​                case 表达式3: 语句3或语句组3;[break;]
​                ...
​                case 表达式n: 语句n或语句组n;[break;]
​                default:语句n+1或语句组n+1;
​            }

​ 说明：
       执行表达式，如果表达式的结果为case后面的某个对应的值，将执行后面所对应的语句或语句组，如果语句后有break，将终止该情况语句，
​        如果没有break，将不再判断条件，继续执行后面的语句，直到遇到break为止；如果条件都不满足，将自动执行default后的语句。

​ switch与if的区别：
​        switch一般用于能获取结果的简单条件的判断，而if一般用于较为复杂的条件判断；
​        if能实现的条件判断,switch不一定能实现，switch能实现的条件判断，if也一定能；
​        如果switch和if都能用的情况下，switch一般较简洁些。

2）循环结构

I）循环

a.计数循环(for)

​ 语法：
​

       for([变量初始值];[条件];[步长]){
​                    [循环体;][continue;]
​                    [break;]
​                }

​ 说明：
​        先执行变量初始值，再判断条件，如果条件成立，再循环体，再计算步长，最后再判断条件，条件成立，继续执行循环体……，直到条件不成立，跳出循环为止。

​ 该循环的次数是可以计算出来：
​        循环次数=[（终值 - 初值） / 步长] + 1

b.当型循环(while)

​ 语法：
​

    while（条件）{
​                    [循环体;][continue;]
​                    [break;]
​                }

​ 说明：
​        当条件成立时，执行循环体，反之则跳出循环。

c.直到型循环(do…while)

​ 语法：
​

      do{
​                    [循环体;][continue;]
​                    [break;]
​                } while（条件）

​ 说明：
​        先执行循环体，再判断条件，如果条件成立，继续循环，反之则跳出循环。

​ 直到型循环与当型循环的区别：
​        当条件1次都不成立时，直到型循环至少会执行一次循环，而当型循环一次也不执行。

d.数组和对象遍历（后面再讲）

​

      for...in
​      forEach()

​ 小结：
​        for只能用于循环次数已知的情况；而while和do…while可以用在循环次数已知或未知的情况，
​        一般循环次数已知用for较多；for…in用于遍历数组和对象；forEach()用于遍历数组，for循环也可以遍历数组，但性能较差。

II）break和continue语句

​        break语句可以用在switch语句和循环语句中（forEach循环除外），表示跳出（结束）情况语句或循环。
​        continue语句只能用在循环语句（forEach循环除外）中，表示结束本次，继续下一次循环。

​ 注意：
​ a)break和continue语句必须单独存在，后面不能添加其它代码。
​ b)break和continue语句一般放在if语句中。