javaScript

一、 JavaScript 概述

1. 什么是JavaScript

1) JS 介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

2) JS 组成

核心语法 -ECMAScript 规范了JS的基本语法

浏览器对象模型 -BOM
Browser Object Model，提供了一系列操作浏览器的方法

文档对象模型 -DOM
Document Object Model ，提供了一系列操作的文档的方法

2. 使用方式

元素绑定事件

事件：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）

事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。

常用事件：onclick (单击事件)

语法：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。
html  <button onclick="console.log('Hello World');">点击</button>

文档内嵌。使用标签书写 JS 代码

语法：
html <script type="text/javascript"> alert("网页警告框"); </script>

注意：标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果

外部链接

创建外部的JS文件 XX.js，在HTML文档中使用引入
html <script src="index.js"></script>

注意：既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。

JS 输入语句

alert(""); 普通的网页弹框

prompt(""); 接收用户输入的弹框，返回用户输入的内容

console.log(); 控制台输出，多用于代码调试

document.write("Hello");实现在动态在网页中写入内容。

在使用事件方式写入时，会重写网页内容

可以识别HTML标签,脚本代码可以在文档任何地方书写，如果是普通写入（不涉及事件），区分代码的书写位置，在当前位置中插入，如果是在head中嵌入，内容会作为body的首行内容显示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        console.log("hello world");
        document.write("<h1>动态添加</h1>");
    </script>
    <!--使用src属性引入外部的JS文件-->
    <script src="index.js">
        console.log("哈哈哈");
    </script>
</head>
<body>
    <!--元素绑定事件
    网页弹框:
    alert("")网页警告框
    -->
    <h1 onclick="document.write('<h1>哈哈</h1>');">点击</h1>
    <!--通过script标签书写JS语句-->
    <script>
        //单行注释
        /* 多行注释 */
        console.log("控制台输出");
        //带有输入框的弹框
        //prompt("请输入姓名");
        document.write("<h1>动态添加</h1>");
    </script>
</body>
</html>

View Code

二、基础语法

1. 语法规范

JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略

JS严格区分大小写

注释语法
单行注释使用 //
多行注释使用 /* */

2. JS的变量与常量

1) 变量

作用 : 用于存储程序运行过程中可动态修改的数据

语法 : 使用关键var声明,自定义变量名
javascript var a; //变量声明 a = 100; //变量赋值 var b = 200; //声明并赋值 var m,n,k; //同时声明多个变量 var j = 10,c = 20; //同时声明并赋值多个变量

命名规范 :

变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头

禁止与关键字冲突(var const function if else for while do break case switch return class)

变量名严格区分大小写

变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"

使用注意 :

变量如果省略var关键字,并且未赋值,直接访问会报错

变量使用var关键字声明但未赋值,变量初始值为undefined

变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

2) 常量

作用 : 存储一经定义就无法修改的数据

语法 : 必须声明的同时赋值

javascript

const PI = 3.14;

注意 :

常量一经定义,不能修改,强制修改会报错

命名规范同变量,为了区分变量,常量名采用全大写字母

操作小数位

toFixed(n); 保留小数点后 n 位

使用：

javascript

var num = 3.1415926;

//保留当前变量小数点后两位

var res = num.toFixed(2);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.变量
        var a = 100;
        var b;
        b = 10.5;
        var c = 1,d = 2,e = "hi";
        var uname,age;
        uname = "王老板";
        age = 30;
        console.log(a,b,c);
        console.log(uname);
        var gender;
        /*变量声明未赋值时,默认为undefined*/
        console.log(gender);
        /*访问未声明,未赋值的变量,会报错*/
        //console.log(m);
        /*省略var关键字定义变量,一律是全局变量*/
        n = 1000;
        console.log(n);

        //2.常量,一经定义就不能修改
        const PI = 3.14;
        //PI = 3.14;

        //自定义半径,结合常量PI,计算圆的周长和面积
        var r = 10;
        var c1 = PI * r * 2;
        var s = PI * r * r;
        //保留n位小数 toFixed(n)
        c1 = c1.toFixed(2);
        console.log(c1);
        console.log(s);

    </script>
</head>
<body>

</body>
</html>

View Code

3. 数据类型

1) 基本数据类型（简单数据类型）

number 数值类型

整数

十进制表示
javascript var a = 100;

八进制表示
以0为前缀
javascript var b = 021; //结果为十进制的 17

十六进制
以0x为前缀
javascript var c = 0x35;//结果为十进制的 53
使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出

小数

小数点表示
javascript var m = 1.2345;

科学计数法
例 : 1.5e3
e表示10为底,e后面的数值表示10的次方数
1.5e3 等价于 1.5 * 10(3)

string 字符串类型
字符串 : 由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码

var s = "100";

var s1 = "张三";

boolean 布尔类型
只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0

javascript var isSave = true; var isChecked = false;

undefined
特殊值,变量声明未赋值时显示undefined
javascript var a; console.log(a);//undefined

null 空类型
解除对象引用时使用null,表示对象为空

2) 引用数据类型

主要指对象，函数等

3) 检测数据类型

typeof 变量或表达式
typeof (变量或表达式)

var n = "asda";

console.log(typeof n);//string

console.log(typeof(n));//string

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.number
        var a = 100;
        //八进制表示整数,以0为前缀
        var b = 063;
        console.log(b);
        //十六进制表示整数,以0x为前缀
        var c = 0x63;
        console.log(c);
        var m = 1.5;
        /*科学计数法,以10为低,3表示次方数*/
        var n = 1.5e3;//1.5*10(3)
        console.log(n,typeof n);

        //2.string
        var s1 = "阿泽";
        var s2 = "32";
        console.log(s1,s2);

        //3.Boolean
        var flag = false;
        var flag2 = "false";
        console.log(flag,typeof flag,
        flag2,typeof flag2);

        //4.特殊值 undefined
        var k;
        console.log(k,typeof k);

        //5.特殊值 null
        var obj = null;
        console.log(obj,typeof obj);

        //typeof运算符,用于检测变量的数据类型

    </script>
</head>
<body>

</body>
</html>

View Code

4. 数据类型转换

不同类型的数据参与运算时,需要转换类型

1) 强制类型转换

转换字符串类型
方法 : toString()
返回转换后的字符串
javascript var a = 100; a = a.toString(); //"100" var b = true; b = b.toString(); //"true"

转换number类型

Number(param)
参数为要进行数据类型转换的变量或值，返回转换后的结果:
如果转换成功,返回number值
如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN

parseInt(param)
参数为要解析的数据
作用 : 从数据中解析整数值
过程 :
1. 如果参数为非字符串类型,会自动转成字符串
2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果

parseFloat(param)
作用 : 提取number值，包含整数和小数部分

2) 隐式类型转换（自动转换）

当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
转换规则：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

其他情况下，一律将操作数转number进行数学运算

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.强制类型转换
        //1)转字符串
        var a = 100;
        var b = true;
        var a1 = a.toString();
        var b1 = b.toString();
        console.log(a1,typeof a1);
        console.log(b1,typeof b1);

        //2)转number
        /*整体转number,使用Number()*/
        var s1 = "101";
        var s2 = "101a";
        var s3 = true;
        var s4 = "true";
        var s5 = null;
        var s6;
        console.log(Number(s1),s1);
        console.log(Number(s2),s2);
        console.log(Number(s3),s3);
        console.log(Number(s4),s4);
        console.log(Number(s5),s5);
        console.log(Number(s6),s6);

        /*提取字符串中的number部分:
        parseInt(n)
        parseFloat(n)
        */
        console.log(parseInt(35.5));
        console.log(parseInt("35.5"));
        console.log(parseInt("35a"));
        console.log(parseInt("a35.5"));
        console.log(parseInt(true));
        console.log(parseInt("true"));
        console.log(parseFloat("35.5.6"));

        //3)转Boolean
        /*除"零"值以外,其他数据都为真,只有"零"值为假*/
        console.log(Boolean(1));
        console.log(Boolean("1"));
        console.log(Boolean(" "));
        console.log(Boolean("0"));
        /*以下为"零"值*/
        console.log(Boolean(0));
        console.log(Boolean(0.0));
        console.log(Boolean(""));
        console.log(Boolean(null));
        console.log(Boolean(undefined));
        console.log(Boolean(NaN));

        //2.自动类型转换(以数学运算为例:+ - * / %)
        var r1 = "小泽" + "Maria";
        var r2 = "小泽" + 31;//"小泽31"
        var r3 = "小泽" + true;//"小泽true"
        var r4 = "小泽" + null;
        var r5 = "小泽" + undefined;
        var r6 = "小泽" + NaN;
        console.log(r4,r5,r6)
        var r7 = "小泽" + 5 + 10;//
        var r8 = 10 + 5 + "小泽";//"15小泽"

        //其他情况
        /*
            "100" + "5"
            "100" - 5
            "100" - "5"
            "100" - true
            "100a" - 5
            "100a" - true
            "100" - "true"
            "100" + "true"
            true + 100
            true + true
            100 + null
            100 + undefined
            100 + NaN
        */

    </script>
</head>
<body>

</body>
</html>

View Code

5. 运算符

1) 赋值运算符

= 将右边的值赋给左边变量

2) 算数运算符

+ - * / %  加 减 乘 除 取余

3) 符合运算符

+= -= *= /= %=

4) 自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：
+ 自增或自减运算符在单独与变量结合时，放前和放后没有区别
+ 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/--,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / --

5) 关系运算符/比较运算符

> < 
>= <=
==(相等) !=(相等)
===(全等) !==(不全等)

1. 关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false
2. 使用
+ 字符串与字符串之间的比较
依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
+ 其他情况
一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false
3. 相等与全等
+ 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
+ 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

6) 逻辑运算符

&& 逻辑与
表达式同时成立,最终结果才为true;全1则1

|| 逻辑或
表达式中只要有一个成立,最终结果即为true; 有1则1

! 逻辑非
对已有表达式的结果取反
注意 : 除零值以外,所有值都为真

7) 三目运算符

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src=""></script>
    <script>
        var a = 100;
        var r1 = a + 10;
        a *= 5;// a = a * 5;
        //1.自增和自减 ++ --
        var b = 10;
        //单独与变量结合,前缀和后缀没有区别
        b++;
        ++b;
        console.log(b);//12
        //与其他运算符结合使用
        var r2 = b++;
        console.log(r2,b);
        var r3 = ++b;
        console.log(r3,b);
        var c = 10;
        var r4 = --c;//r4=9,c=9
        var r5 = c--;//r5=9,c=8

        //自增和自减运算的结果永远number值
        var s = true;
        s++;
        console.log(s,typeof s);

        //思考 r? n?
        var n = 5;
        var r = n++ + ++n + n++ + ++n + n;
        console.log(r,n);
        /*
            r = r1 + r2 + r3 + r4 + r5;
            r1 = n++; //5 6
            r2 = ++n; //7 7
            r3 = n++; //7 8
            r4 = ++n; //9 9
            r5 = n;   //9
        */

        //2.关系运算
        var res1 = 10 > 2;
        var res2 = "210" > "2";//'1' > (null)
        console.log(res1,res2);
        var res3 = "小泽" > "超哥哥";
        var s1 = "小";
        var s2 = "超";
        //获取字符的Unicode编码charCodeAt(index)
        console.log(s1.charCodeAt(),s2.charCodeAt(),res3);

        var res4 = "10" > 2;//10 > 2
        var res5 = "10" > true;//10 > 1
        var res6 = true > false;//1 > 0
        var res7 = "10" > undefined;//10 > NaN ->false
        var res8 = "10" > null;//10 > 0
        var res9 = "true" > false;//NaN > 0

        //相等和全等
        var r1 = 10 == "10";
        var r2 = 10 === "10";
        console.log(r1,r2);

        //3.逻辑运算符
        /*给出闰年判断的条件:
        能被4整除并且不能被100整除
        能被400整除
        */
        var year = prompt("请输入年份");
        var r = year%4==0&&year%100!=0 || year%400==0;
        console.log(year,typeof year,r);
        //逻辑非:对布尔值取反
        var r1 = !5;//false
        //逻辑非的优先级高于关系运算
        var r2 = !5 < 3;//false < 3
        console.log(r1,r2);

        //3.三目运算符
        var a = 10;
        if(a > 5){
            console.log("成立");
        }else{
            console.log("不成立");
        }
        var res = a>5 ? "OK" : "error";
        console.log(res);
        a = 3;
        var res2 = a>5? "OK" : a>=3 ? ">=3" : "小于3";
        console.log(res2);
    </script>
</head>
<body>
    <h1 onclick=""></h1>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
            接收用户输入的身高(m)和体重(kg)
            计算bmi = 体重/(身高 *身高)
            对bmi保留1位小数
            并且判断身体指数:
                bmi < 18.5 "太瘦了"
                18.5 ~ 23.9 "健康"
                bmi > 23.9 "注意身体健康"
        */
        var w = prompt("请输入体重(kg)");
        var h = prompt("请输入身高(m)");
        var bmi = w / (h * h);
        var bmi2 = bmi.toFixed(1);
        //console.log(bmi,bmi2,typeof bmi2);
        var r = bmi2>23.9? "注意": bmi2>=18.5 ? "健康" : "太瘦";
        console.log(bmi2,r)

    </script>
</head>
<body>

</body>
</html>

View Code

一、流程控制

1. 作用

控制代码的执行顺序

2. 分类

1）顺序结构

从上到下依次执行代码语句

2）分支/选择结构

1. if语句

简单if结构
text if(条件表达式){ 表达式成立时执行的代码段 }
注意 : 除零值以外,其他值都为真，以下条件为假值false
javascript if(0){} if(0.0){} if(""){} //空字符串 if(undefined){} if(NaN){} if(null){}
特殊写法 :
{ }可以省略,一旦省略，if语句只控制其后的第一行代码

if - else结构
text if(条件表达式){ //条件成立时执行 }else{ //条件不成立时选择执行 }

多重分支结构

if(条件1){

//条件1成立时执行

}else if(条件2){

//条件2成立时执行

}else if(条件3){

//条件3成立时执行

}...else{

//条件不成立时执行

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.if语句
        var a = 10;
        if(a < 5){
            console.log("成立");
        }
        if(a < 5) console.log("a>5");
        console.log("测试");
        //2.if-else语句
        if(a == 0){

        }else{

        }
        //3.if-else if语句
        var bmi = 20.5;
        if(bmi > 23.9){

        }else if(bmi >= 18.5){

        }else{

        }
        /*
            接收用户输入的年,月,日
            计算当日是该年的第几天*/

    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var year = prompt("年");
        var month = prompt("月");
        var day = Number(prompt("日"));
        var sum = 0;
        //整月天数累加,当前月天数累加
        if( month == 1){
            sum = day;
        }else if(month == 2){
            sum = 31 + day;
        }else if(month == 3){
            sum = 31 + 28 + day;
        }
        //闰年判断(year ,month > 2)
        console.log(sum);

    </script>
</head>
<body>

</body>
</html>

View Code

2. switch语句

语法 :

switch(value){

case 值1 :

//value与值1匹配全等时,执行的代码段

break; //结束匹配

case 值2 :

//value与值2匹配全等时,执行的代码段

break;

case 值3 :

//value与值3匹配全等时,执行的代码段

break;

default:

//所有case匹配失败后默认执行的语句

break;

}

使用 :

1. switch语句用于值的匹配,case用于列出所有可能的值;只有switch()表达式的值与case的值匹配全等时,才会执行case对应的代码段

2. break用于结束匹配,不再向后执行;可以省略,break一旦省略,会从当前匹配到的case开始,向后执行所有的代码语句,直至结束或碰到break跳出

3. default用来表示所有case都匹配失败的情况,一般写在末尾,做默认操作

4. 多个case共用代码段

case 值1:

case 值2:

case 值3:

//以上任意一个值匹配全等都会执行的代码段

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    /*
        var week = Number(prompt("请输入0~6之间的数字"));
        switch(week){
            case 0: //0 === 0
                //变量值与case列举的值匹配全等时执行的代码段
                console.log("星期日");
                //break;
            case 1:
                console.log("星期一");
                //break;
            default:
                console.log("请输入合法值");
        }
        */
        //多个case共用代码段
        var month = Number(prompt("请输入月"));
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12:
                console.log("31天");
                break;
            case 2:
                console.log("28天");
                break;  }
    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var year = prompt("年");
        var month = prompt("月");
        var day = Number(prompt("日"));
        var sum = 0;
        //1.整月天数的累加
        switch(month-1){//整月最多取到11月
            //省略break会从当前匹配的case开始向后执行所有代码语句
            case 11:
                sum += 30;
            case 10:
                sum += 31;
            case 9:
                sum += 30;
            case 8:
                sum += 31;
            case 7:
                sum += 31;
            case 6:
                sum += 30;
            case 5:
                sum += 31;
            case 4:
                sum += 30;
            case 3:
                sum += 31;
            case 2:
                sum += 28;
                if(year%4==0&&year%100!=0 || year%400==0){
                    sum++;
                }
            case 1:
                sum += 31;
        }
        //2.当前月天数的累加
        sum += day;
        console.log(sum);
    </script>
</head>
<body>

</body>
</html>

View Code

3. 循环结构

作用
根据条件,重复执行某段代码

分类

while循环

定义循环变量;

while(循环条件){

条件满足时执行的代码段

更新循环变量;

}

代码：

var i=1;

var sum=0;

while(i<101){

//循环体

console.log(i)

//更新循环变量

sum+=i

i++;

}

console.log(sum)

do-while循环

do{

循环体;

更新循环变量

}while(循环条件);

代码:

//循环输出100次

var i=1;

do{

console.log("do");

//更新循环变量

i++;}while(i<101)

与while循环的区别 : 对于不确定循环次数while循环使用的比较多；

+ while循环先判断循环条件,条件成立才执行循环体

+ do-while循环不管条件是否成立,先执行一次循环体

for循环

for(定义循环变量;循环条件;更新循环变量){

循环体;

}

代码：

for(var i=1;i<101;i++){

//循环体

console.log("js真棒");

if(i==5){

break;}

console.log("---------")

}

循环控制 :

1. break 强制结束循环

2. continue 结束当次循环,开始下一次循环

循环嵌套 :

在循环中嵌套添加其他循环

/*控制台输出9*9乘法表*/

for(var i=1;i<10;i++){

var show="";

for(var j=1;j<=i;j++){

show+=i+"*"+j+"="+i*j+" ";

}

//按照行输出

console.log(show);

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //循环变量
        var i = 1;
        var sum = 0;
        while(i<101){
            //循环体
            console.log(i);
            sum += i;
            //更新循环变量
            i++;
        }
        console.log(sum);

    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var year = prompt("年");
        var month = prompt("月");
        var day = Number(prompt("日"));
        var sum = 0;
        //1.整月天数的累加
        var i = 1;
        while(i < month){ //1~month-1
            switch(i){
                case 1:
                case 3:
                case 5:
                case 7:
                case 8:
                case 10:
                    sum += 31;
                    break;
                case 4:
                case 6:
                case 9:
                case 11:
                    sum += 30;
                    break;
                case 2:
                    sum += 28;
                    if(year%4==0&&year%100!=0 || year%400==0){
                        sum++;
                    }
            }
            i++;
        }
        //2.当前月天数的累加
        sum += day;
        console.log(sum);

        /*
        switch(i==1){
            case true
        }
        */
    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //循环输出一百次""
        var i = 101;
        do{
            console.log("超哥哥最帅");
            //更新循环变量
            i++;
        }while(i < 101);
        i = 101;
        while(i < 101){
            console.log("小泽老师最美");
            i++;
        }

        for(var i = 1;i < 101;i++){
            //循环体
            console.log("老祁的B-box真棒");
        }
        /*控制循环体的执行:break/continue*/
        for(var i = 1; i < 11;i++){
            console.log(i);
            if(i == 5){
            //一旦执行break,循环体中后面的代码都不执行
                continue;
            }
            console.log("-------------");
        }
        /*循环接收用户输入,并且在控制台输出;直至用户
        输入"exit"表示退出*/
        /*
        while(true){
            var input = prompt("请输入");
            if(input == "exit"){
                //结束循环
                break;
            }
            console.log(input);
        }
        */
        /*
        var input;
        do{
            input = prompt("请输入");
            if(input != "exit")
                console.log(input);
        }while(input != "exit")
        */

        /*
            控制台输出乘法表(循环嵌套)
            1 * 1
        */
        for(var i = 1; i <= 9; i++){
            var show = "";
            for(var j = 1; j <= i;j++){
            //制表符 	
                show += i + "*" + j + "=" + i*j + "	";
            }
            //按行输出
            console.log(show);
        }

    </script>
</head>
<body>

</body>
</html>

View Code

一、函数

1）作用

封装一段待执行的代码

2）语法

//函数声明

function 函数名(参数列表){

函数体

return 返回值;

}

//函数调用

函数名(参数列表);

3）使用

函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

4）匿名函数

匿名函数：省略函数名的函数。语法为：
+ 匿名函数自执行

语法：

(function (形参){

})(实参);

代码：

//匿名函数自执行：（函数声明）（实参）

(function(){

var a=100;

//构建局部作用域，运行结束即回收

console.log("匿名函数",a)

})()

定义变量接收匿名函数

var fn = function (){};

fn(); //函数调用

5）作用域

JS中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据
1. 全局变量和全局函数
+ 只要在函数外部使用var关键字定义的变量,或函数都是全局变量和全局函数,在任何地方都可以访问
+ 所有省略var关键字定义的变量,一律是全局变量
2. 局部变量/局部函数
+ 在函数内部使用var关键字定义的变量为局部变量,函数内部定义的函数也为局部函数,只能在当前作用域中使用,外界无法访问
3. 作用域链
局部作用域中访问变量或函数,首先从当前作用域中查找,当前作用域中没有的话,向上级作用域中查找,直至全局作用域

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.无参数无返回值的函数
        //函数声明
        function f1(){
            console.log("f1被调用");
        }
        //函数调用
        f1();
        //2.带有参数的函数
        //JS允许形参与实参个数不匹配
        function f2(a,b){//形参未传值,默认为undefined
            console.log(a * a,b);
            //函数内部可以使用arguments获取实际传递的参数
            console.log(arguments);
        }
        f2(5);//函数调用时将实际参数赋值给形式参数
        //3.带有返回值的函数
        function f3(a){
            //局部变量r1,只能在当前函数中使用
            var r1 = a * a;
            var r2 = a + a;
            //将函数内部的变量传递 给外界使用
            //只能返回一个值,后面的代码都不执行
            return r1,r2;
            console.log("函数使用");
        }
        //全局变量r1
        var r1 = f3(10);
        console.log(r1);

        //全局变量与局部变量
        /*
           全局变量:
            1.函数体外部声明的变量一定是全局变量
            2.一切省略var关键字创建的变量都是全局变量
           局部变量:
            在函数内部使用var关键字创建的变量为局部变量
        */
        var age = 18;
        function fn(){
            var age  = 28;
            uname = "老王";
            //就近访问当前作用域中的变量
            console.log(age);
        }
        fn();
        console.log(age,uname);
        /*
            使用函数封装日期计算:
            闰年判断封装成函数;
            主体功能封装成函数,通过按钮点击调用
            <button onclick="fn()">
        */
    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //闰年判断
        function isRun(y){
            var r = y%4==0&&y%100!=0 || y%400==0;
            return r;
        }
        //主函数
        function show(){
           var year = prompt("请输入年");
           console.log(isRun(year));
        }
    </script>
</head>
<body>
    <button onclick="show()">日期计算</button>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //匿名函数的使用,自执行: (匿名函数声明)(实参)
        (function (){
            var a = 100;
            //构建局部作用域
            console.log("匿名函数自执行",a);
        })()
        //定义变量接收匿名函数
        var fn = function (){
            console.log("fn被调用");
        };
        fn();
        console.log(fn);
        //函数作为参数
        function show (f){
            console.log("show:",f);
            f();
        }
        //直接传递函数名
        show(fn);//f = fn
        //匿名函数作为参数传递
        show(function (){
            console.log("直接传递匿名函数");
        })//f = function (){}

    </script>
</head>
<body>

</body>
</html>

View Code

二、内置对象

1）对象
对象是由属性和方法组成的,使用点语法访问
2） Array 数组
1. 创建

方式一：

//1、数组的创建

var arr1=["小马",20,true];

console.log(arr1);

方式二：

//使用new关键字创建

var arr2=new Array("则",27,false);

console.log(arr2)

2. 特点
+ 数组用于存储若干数据,自动为每位数据分配下标,从0开始
+ 数组中的元素不限数据类型,长度可以动态调整
+ 动态操作数组元素：根据元素下标读取或修改数组元素，arr[index]

3. 属性和方法

属性 : length 表示数组长度,可读可写

方法 :

push(data)
在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开
返回添加之后的数组长度

pop()
移除末尾元素
返回被移除的元素

unshift(data)
在数组的头部添加一个或多个元素
返回添加之后的数组长度

shift()
移除数组的第一个元素
返回被移除的元素

toString()

s1=arr.toString()
console.log(s1)

将数组转换成字符串类型
返回字符串结果

join(param)
将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接
返回字符串

s2=arr.join("")
console.log(s2)

reverse()
反转数组,倒序重排
返回重排的数组,注意该方法直接修改原数组的结构

sort()
对数组中元素排序,默认按照Unicode编码升序排列
返回重排后的数组,直接修改原有数组
参数 : 可选,自定义排序算法

例：

//自定义升序

function sortASC(a,b){

return a-b;

}

代码：

arr.sort(function(e1,e2){

return e1.age-e2.age;

})

console.log(arry)

作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列 ```javascript //自定义降序 function sortDESC(a,b){ return b-a; } //如果返回值>0,交换元素的值,b-a表示降序排列 ``` + forEach(param) 遍历数组元素参数为函数

例 :

arr.forEach(function (elem,index){

//forEach()方法会自动调用匿名函数,依次传入元素及下标

});

4. 二维数组

数组中的每个元素又是数组

var arr1 = [1,2,3];

var arr2 = [[1,2],[3,4],[5,6,7]];

//操作数组元素

var r1 = arr2[0] //内层数组

var num = r1[0]; //值 1

//简写

var num2 = arr2[1][0];

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.数组的创建
        var arr1 = ["超哥哥",30,true];
        console.log(arr1);
        //使用new关键字创建
        var arr2 = new Array("小泽",31,false);
        console.log(arr2);
        //特殊
        var arr3 = [5];
        //使用new关键字传递一个整数参数创建数组,代表初始化数组长度
        var arr4 = new Array(5);
        console.log(arr3,arr4);
        //2.操作数组元素(根据元素索引)
        console.log(arr3[0]);
        arr4[0] = "老祁";
        arr4[2] = "大旭";
        arr4[8] = "AI";
        console.log(arr4);
        //3.数组对象的属性:length
        console.log(arr4.length);
        //4.遍历数组元素
        //创建数组,包含若干元素,实现数组元素的正序遍历和倒序遍历
        var arr5 = [1,2,3,4,5];
        //普通for循环
        for(var i = 0;i < arr5.length;i++){
            console.log(arr5[i]);
        }
        for(var i = arr5.length-1;i >= 0;i--){
            console.log(arr5[i]);
        }
        console.log("-------------------------");
        //for-in循环
        for( var i in arr5){
            console.log(i,arr5[i]);
        }
        //数组对象提供的遍历方法,forEach(function (){})
        arr5.forEach(function (elem,index){
            console.log("-----:",elem);
        });
        /*
        1.循环接收用户输入,将数据存储在数组中,直至输入"exit"结束,
        控制台打印数组
        2.声明包含若干元素的数组,打印数组中的最大值

        */

    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        function saveData(){
            var arr = [];
            while(true){
                var input = prompt("请输入");
                if(input == "exit"){
                    break;
                }
                //添加至数组,数组长度表示数组中下一个元素的索引
                arr[arr.length] = input;
            }
            console.log(arr);
        }
        //遍历数组取最大值
        function showMax(){
            //数据源
            var arr = [10,5,66,78,9,56,3,-90,0];
            var max = arr[0];
            for(var i = 0;i < arr.length;i++){
                if(arr[i] > max){
                    max = arr[i];
                }
            }
            console.log(max);
        }
        //showMax();
        /*定义数组,接收用户输入的内容,查询数组中是否存在相应元素
        如果存在返回对应元素的下标,不存在返回-1*/
        function findIndex(){
            //数据源
            var arr = [10,5,66,10,78,9,56,3,-90,0,10];
            //var arrInd = [];
            var data = prompt("请输入要查找的数值");
            var index = -1;
            /*
            //查找元素第一次出现的下标
            for(var i = 0;i < arr.length;i++){
                if(arr[i] == data){
                    index = i;
                    break;
                }
            }
            */
            //查找元素最后一次出现的下标
            for(var i = arr.length-1;i >= 0;i--){
                if(arr[i] == data){
                    index = i;
                    break;
                }
            }
            console.log(data,index,arr);
        }
        findIndex();

    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.操作数组的头尾元素
        var arr = ["hello","world"];
        var r1 = arr.push(1,2,3);
        console.log(r1,arr);
        var r2 = arr.pop();
        console.log(r2,arr);
        var r3 = arr.unshift(10);
        r3 = arr.unshift(20,30);
        console.log(r3,arr);
        var r4 = arr.shift();
        console.log(r4,arr);
        //2.转换字符串
        var r5 = arr.toString();
        var r6 = arr.join("");
        console.log(r5);
        console.log(r6);
        console.log(arr);
        //3.数组反转(倒序重排)
        arr.reverse();//调整原有数组的结构
        console.log(arr);
        //4.数组排序(对数组原有结构的调整)
        //默认按照字符的Unicode编码升序排列
        arr.sort();
        console.log(arr);
        //对number值进行大小排列
        arr.sort(function (a,b){
            /*a,b代表数组中相邻的两个元素,如果a-b>0,则交换
            元素的位置*/
            //自定义升序
            return a-b;
        })
        console.log(arr);
        //自定义降序
        function sortDESC(a,b){
            //如果b-a>0,则交换两个元素的位置
            return b-a;
        }
        arr.sort(sortDESC);
        console.log(arr);
        /*复杂数组*/
        var obj = {
            uid:001,
            uname:"大旭",
            play:function (){
                console.log("play");
            }
        };
        console.log(obj.uid);
        obj.play();
        var array = [
        {uname:"大旭",age:35},
        {uname:"超哥哥",age:33},
        {uname:"小泽",age:31}
        ];
        console.log(array[0].age);
        //将数组元素按照年龄升序排列
        array.sort(function (e1,e2){
            return e1.age-e2.age;
        })
        console.log(array);
        /*代码实现十进制转二进制:
        除2取余,直至商为0;余数倒序排列
        6 / 2 = 3 ... 0
        3 / 2 = 1 ... 1
        1 / 2 = 0 ... 1
        */
        function decode(){
            var num = prompt("请输入数字");
            var arr = [];
            while(num != 0){
                arr.unshift(num % 2);
                num = parseInt(num / 2);
            }
            console.log(arr.join(""));
        }
        decode();

        //二维数组
        var arr = [
        [1],
        [2,3],
        [4,5,6]
        ];
        console.log(arr[2][1]);
        //二维数组的遍历
        for(var i in arr){
            for(var j in arr[i]){
                console.log(arr[i][j]);
            }
        }

    </script>
</head>
<body>

</body>
</html>

View Code

3）String 对象

1. 创建

var str = "100";

var str2 = new String("hello");

2. 特点

字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始

3. 属性

length ：获取字符串长度

4. 方法

转换字母大小写
toUpperCase() 转大写字母
toLowerCase() 转小写字母
返回转换后的字符串,不影响原始字符串

获取字符或字符编码
charAt(index) 获取指定下标的字符
charCodeAt(index) 获取指定下标的字符编码
参数为指定的下标,可以省略,默认为0

获取指定字符的下标

indexOf(str,fromIndex)
作用 : 获取指定字符的下标,从前向后查询,找到即返回，找到第一次出现的次数。
参数 :
str 表示要查找的字符串,必填
fromIndex 表示起始下标,默认为0
返回 :
返回指定字符的下标,查找失败返回-1

console.log(s2.indexOf("o"))

+ lastIndexOf(str,fromIndex)

作用 : 获取指定字符最后一次出现的下标,从后向前查找,找到即返回参数 : str 必填,表示要查找的内容 fromIndex 选填,指定起始下标

console.log(s2.lastIndexOf("o"))

截取字符串
substring(startIndex,endIndex)
作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1
参数 :
startIndex 表示起始下标
endIndex 表示结束下标,可以省略,省略表示截止末尾

console.log(s2.substring(1,4))

分割字符串
split(param)
作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果
参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组

模式匹配
作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换
正则表达式 :
var reg1 = /字符模式/修饰符;
修饰符 :
i : ignorecase 忽略大小写
g : global 全局范围
字符串方法 :

match(regExp/subStr)
作用 : 查找字符串中满足正则格式或满足指定字符串的内容
返回 : 数组,存放查找结果

replace(regExp/subStr,newStr)
作用 : 根据正则表达式或字符串查找相关内容并进行替换
返回 : 替换后的字符串,不影响原始字符串

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        //1.创建
        var s1 = "小泽";
        var s2 = new String("大旭老师");
        console.log(s1,s2);
        //2.字符串按照数组结构存储,可以使用数组方法操作字符
        console.log(s1[1],s2[0]);
        //遍历字符串
        for(var i = 0;i < s2.length;i++){
            console.log(s2[i]);
        }
        //3.字符串方法
        //3.1转换大小写字母
        var s3 = "Maria";
        var r1 = s3.toUpperCase();
        var r2 = s3.toLowerCase();
        console.log(r1,r2,s3);
        //3.2获取指定下标对应的字符或字符编码
        var r3 = s3.charAt();
        var r4 = s3.charCodeAt();
        console.log(r3,r4);
        //3.3获取指定字符的下标
        //"Maria"
        var r5 = s3.indexOf("a",2);
        var r6 = s3.lastIndexOf("b",2);
        console.log(r5,r6);
        //3.4截取字符串substring(start,end)
        //截取范围start~end-1
        var r7 = s3.substring(0,2);
        console.log(r7);
        //3.5分割字符串
        var r8 = s3.split("/");
        console.log(r8);
        //3.6模式匹配
        var str = "上知乎,搜知乎,问知乎,答知乎";
        //match(param),返回结果数组
        var res1 = str.match("知乎");
        console.log(res1);
        //定义正则,表示查找内容
        var regexp = /d{6,10}/ig;
        var reg2 = /知乎/g;
        var res2 = str.match(reg2);
        console.log(res2);
        //replace()查找并替换,返回替换后的字符串结果
        var res3 = str.replace(reg2,"新浪");
        console.log(res3,str);
    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
        1.接收用户输入的邮箱,提取用户名和服务商
            "zhangsan@163.com"
        2.从身份证号中提取年月日信息
            "100100190012120123"
        3."101_5&201_7&301_9"
            商品id为101,数量为5
        */
        //1.提取用户名和服务商
        var mail = "lvze@tedu.cn";
        //方法1:截取
        var index = mail.indexOf("@");
        var username = mail.substring(0,index);
        //省略结束下标,表示截取至末尾
        var servername = mail.substring(index+1);
        console.log(username,servername);

        //方法2:使用@符号分割字符串
        var res = mail.split("@");
        console.log(res[0],res[1]);

        //2.提取身份证号中的年月日
        var uid = "100100190012100123";
        var year = uid.substring(6,10);
        var month = uid.substring(10,12);
        var day = uid.substring(12,14);
        console.log(year,month,day);

        //3.分割商品信息
        var str = "101_5&201_7&301_9";
        var arr = str.split('&');//["101_5","",""]
        for(var i=0; i<arr.length;i++){
            var arr2 = arr[i].split('_');//["101","5"]
            console.log("商品id为:",arr2[0],"商品数量为:",arr2[1]);
        }

    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        /*
        模拟验证码:
        1.创建数据源(由大小写字母和数字组成)
        2.随机取四位字符,拼成验证码
            随机数:Math.random()返回[0,1)之间的随机小数
            调整为随机下标
        3.提示用户输入(不区分大小写)
        4.比较用户输入的内容,给出验证结果
        */
    </script>
</head>
<body>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <a href="04_history.html">页面0</a>
    <a href="01_window.html">页面二</a>
    <button onclick="console.log(history.length)">
        获取length
    </button>
    <button onclick="history.back()">返回</button>
    <button onclick="history.forward()">前进</button>


    <input type="text" id="uinput">
    <span id="code"></span>
    <button id="btn">验证</button>
    <script>
        //元素的id属性值作为变量直接操作,存储元素对象本身
        console.log(code);
        //生成四位验证码
        var str = "ABCDEFGHIabcdefghtyuiu0123456789";
        var show = "";
        for(var i = 1; i < 5; i++){
            //生成随机下标
            //Math.floor(n)
            var index = Math.floor(Math.random()*str.length);
            show += str[index];
        }
        //操作元素内容
        code.innerHTML = show;
        //动态绑定事件
        btn.onclick = function (){
            //获取输入框的值
            console.log(uinput.value);
            //验证
            if(uinput.value.toUpperCase() == show.toUpperCase()){
                alert("输入正确")
            }else{
                alert("输入有误");
            }
        };

        /*Math对象*/
        //1.向上取整:舍弃小数位,整数位+1
        console.log(Math.ceil(0.99));
        //2.向下取整:舍弃小数位,保留整数位
        console.log(Math.floor(0.99));
        //3.四舍五入取整
        console.log(Math.round(0.49));
        console.log(Math.round(0.5));
        //4.生成0~1之间的随机小数
        console.log(Math.random());
    </script>
</body>
</html>

View Code

一、BOM

1. BOM 介绍

BOM全称为“Browser Object Model”，浏览器对象模型。提供一系列操作浏览器的属性和方法。核心对象为window对象，不需要手动创建，跟随网页运行自动产生，直接使用，在使用时可以省略书写。

2. window对象常用方法

1）网页弹框

alert() //警告框

prompt() //带输入框的弹框,可以接收两个参数，（提示信息，输入框内的默认值）

prompt（"请输入"，0）

confirm() //确认框

2）窗口的打开和关闭

window.open("URL") //新建窗口访问指定的URL

window.open("http:www.baidu.com")开窗口新弹出一个窗口

window.close() //关闭当前窗口

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        console.log(window);
        //window对象的方法
        //1.网页弹框
        /*
        window.alert("操作无效");//无返回值
        var r = window.confirm("是否确认");//返回布尔值
        console.log(r);
        //prompt可以接收两个参数("提示信息",输入框的默认值)
        var r1 = window.prompt("请输入",0);
        */
        /*
        全局变量和全局函数都是window对象的属性和方法
        */
        var a = 100;
        function a1(){
            console.log("a1被调用");
        }
        console.log(window);
        console.log(a,window.a);
        a1();
        window.a1();
        //2.窗口的打开和关闭
        /*给出确认框,当点击确定时打开目标文件,点击取消时关闭当前窗口*/
        /*
        var r = confirm("");
        if(r){
           window.open("http://www.baidu.com");
        }else{
            window.close();
        }
        */

    </script>
</head>
<body>
    <a href="04_history.html">页面0</a>
    <a href="00_work.html">页面一</a>
    <button onclick="console.log(history.length)">
        获取length
    </button>
<button onclick="history.back()">返回</button>
    <button onclick="history.forward()">前进</button>
</body>
</html>

View Code

3）定时器方法

间歇调用(周期性定时器)
作用：每隔一段时间就执行一次代码
开启定时器:

var timerID = setInterval(function,interval);

/*

参数 :

function : 需要执行的代码,可以传入函数名;或匿名函数

interval : 时间间隔,默认以毫秒为单位 1s = 1000ms

返回值 : 返回定时器的ID,用于关闭定时器

*/

关闭定时器 :

//关闭指定id对应的定时器

clearInterval(timerID);

超时调用(一次性定时器)
作用：等待多久之后执行一次代码

//开启超时调用:

var timerId = setTimeout(function,timeout);

//关闭超时调用:

clearTimeout(timerId);

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="start">开启</button>
    <button id="stop1">关闭</button>
    <h1 style="text-align:center;" id="show"></h1>
    <script>
        var timer;
        start.onclick = function (){
            //开启定时器
            timer = setInterval(function (){
                //打印日期时间(Date)
                var date = new Date();
                console.log(date);
            },1000);
            console.log("---------");
        };
        stop1.onclick = function (){
            //关闭间歇调用
            clearInterval(timer);
        };
        /*页面输出5秒倒计时*/
        var i = 5;
        show.innerHTML = i;
        var timerId = setInterval(function (){
            i--;
            if(i != 0 ){
                show.innerHTML = i;
            }else{
                show.innerHTML = "倒计时结束!";
                //停止定时器
                clearInterval(timerId);
            }
        },1000);

    </script>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button id="start">开启</button>
    <button id="stop1">关闭</button>
    <script>
        start.onclick = function (){
            //开始超时调用
            timer = setTimeout(function (){
                console.log("超时调用");
            },1000);
        };
        stop1.onclick = function (){
            //关闭超时调用
            clearTimeout(timer);
        };

    </script>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>  </style>
  <script>
  </script>
</head>
<body>
<h1 id="d1">欢迎学习人工智能</h1>
<script>
    function f1(){
        var tag=document.getElementById("d1");
        var content=tag.innerText;
        var l=content.charAt(0);
        var f=content.substring(1,content.length);
        var new_content=f+l;
        tag.innerText=new_content;
    }
    setInterval("f1();",1000);
</script>
</body>
</html>

View Code

window 对象常用属性

window的大部分属性又是对象类型

1）history

作用：保存当前窗口所访问过的URL
属性 :
length 表示当前窗口访问过的URL数量
方法 :

back() 对应浏览器窗口的后退按钮,访问前一个记录

forward() 对应前进按钮,访问记录中的下一个URL

go(n) 参数为number值,翻阅几条历史记录，正值表示前进,负值表示后退

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        console.log(history);
    </script>
</head>
<body>
    <a href="00_work.html">页面一</a>
    <a href="01_window.html">页面二</a>
    <button onclick="console.log(history.length)">
        获取length
    </button>
    <button onclick="history.back()">返回</button>
    <button onclick="history.forward()">前进</button>
    <button onclick="history.go(1)">go(1)</button>
    <button onclick="history.go(-1)">go(-1)</button>
    <button onclick="history.go(1)">go(2)</button>
    <button onclick="history.go(-1)">go(-2)</button>

   <!--历史记录的长度变化:
    1.通过超链接在当前窗口访问其他URL,会造成历史记录增加
    2.前进和后退不会造成历史记录的变化,只是指针的移动
    3.历史记录的进出栈管理:
        A->B->C
        从页面C后退至页面A,在A中通过超链接跳转至页面C
        A->C
    -->
</body>
</html>

View Code

2）location

作用：保存当前窗口的地址栏信息(URL)
属性 :
href 设置或读取当前窗口的地址栏信息
方法 :
reload(param) 重载页面(刷新)
参数为布尔值，默认为false，表示从缓存中加载，设置为true,强制从服务器根目录加载

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--设置或读取窗口的地址栏信息(URL)-->
    <button onclick="console.log(location.href);">
        获取href
    </button>
    <button onclick="location.href='http://www.baidu.com';">
        设置href</button>
    <!--reload(false)默认从缓存中重载页面,设置为true,表示
    从服务器根目录重载页面-->
    <button onclick="location.reload(true)">刷新</button>
</body>
</html>

View Code

3）document

提供操作文档HTML 文档的方法，,参见DOM

二、DOM节点操作

DOM全称为“Document Object Model”，文档对象模型，提供操作HTML文档的方法。（注：每个html文件在浏览器中都视为一篇文档,操作文档实际就是操作页面元素。）

1）节点对象

JS 会对html文档中的元素，属性，文本内容甚至注释进行封装，称为节点对象，提供相关的属性和方法。

2）常用节点分类

元素节点 ( 操作标签）

属性节点（操作标签属性）

文本节点（操作标签的文本内容）

3）获取元素节点

根据标签名获取元素节点列表

var elems = document.getElementsByTagName("");

代码如下:

var list1=document.getElementsByTagName("h1");

console.log(list1)

/*

参数 : 标签名

返回值 : 节点列表,需要从节点列表中获取具体的元素节点对象

*/

根据class属性值获取元素节点列表

var elems = document.getElementsByClassName("");

/*

参数 : 类名(class属性值)

返回值 : 节点列表

*/

根据id属性值取元素节点

var elem = document.getElementById("");

/*

参数 : id属性值

返回值 : 元素节点

*/

根据name属性值取元素列表

var elems = document.getElementsByName("");

/*

参数 : name属性值

返回 : 节点列表

*/

4）操作元素内容

元素节点对象提供了以下属性来操作元素内容

innerHTML : 读取或设置元素文本内容,可识别标签语法

innerText : 设置元素文本内容,不能识别标签语法

value : 读取或设置表单控件的值

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

</head>
<body>
    <h1 class="c1" id="d1" style="">Fine,Thank U,and you</h1>
    <h1 class="c1">岁月静好,感恩有你,与你相随</h1>
    <input type="text" name="username" value="">
    <button id="btn">取值</button>
    <div id="show"></div>

    <script>
        //获取元素的操作只能等待标签解析完毕后执行
        //1.根据标签名获取元素列表
        var list1 = document.getElementsByTagName("h1");
        console.log(list1);
        console.log(list1[0],list1[0].innerHTML);
        //2.根据class属性值获取元素列表
        var list2 = document.getElementsByClassName("c1");
        console.log(list2);
        //3.根据id属性值获取元素
        var elem = document.getElementById("d1");
        console.log(elem);
        //标签属性都是元素节点对象的属性
        console.log(elem.id,elem.className);
        elem.style = "color:red;text-align:center;";
        //4.根据name属性值获取元素列表
        var list3 = document.getElementsByName("username");
        console.log(list3);

        //操作元素内容或值
        elem.innerHTML = "<a href>小泽最帅</a>";
        console.log(elem.innerHTML);
        elem.innerText = "<a href>小泽最帅</a>";
        console.log(elem.innerText);
        btn.onclick = function (){
            //获取表单控件的值
            console.log(list3[0].value);
            show.innerHTML = "<h1>"+list3[0].value+"</h1>";
        };
        /*
        创建输入框,按钮和div
        点击按钮时将输入框中的内容以一级标题的形式显示在div中
        */
    </script>
</body>
</html>

View Code

5）操作元素属性

通过元素节点对象的方法操作标签属性

elem.getAttribute("attrname");//根据指定的属性名返回对应属性值

elem.setAttribute("attrname","value");//为元素添加属性,参数为属性名和属性值

elem.removeAttribute("attrname");//移除指定属性

标签属性都是元素节点对象的属性,可以使用点语法访问，例如：

h1.id = "d1"; //set 方法

console.log(h1.id); //get 方法

h1.id = null; //remove 方法

注意 :
+ 属性值以字符串表示
+ class属性需要更名为className,避免与关键字冲突,例如：
h1.className = "c1 c2 c3";

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="index.js"></script>
    <style>
        #main{
            color:red;
        }
        .c1{
            background:green;
        }
    </style>
</head>
<body>
    <h1 id="" style="">小泽真温柔</h1>
    <script>
        //获取元素节点
        var h1 = $("h1");
        //操作标签属性
        h1.setAttribute("id","d1");
        h1.setAttribute("class","c1");
        console.log(h1.getAttribute("class"));
        h1.removeAttribute("id");
        //点语法
        h1.id = "box";
        h1.className = "c1 c2";
        console.log(h1.id,h1.className);
        h1.id = "";
        h1.className = null;

        //操作元素样式
        //1.通过操作元素的id/class属性,对应选择器的样式
        h1.id = "main";
        h1.className = "c1";

        //2.操作行内样式
        console.log(h1.style);
        //直接赋值
        h1.style = "200px;height:200px;";
        //单独调整样式,h1.style返回样式表对象,由CSS的属性组成
        //出现连接符的属性名一律更名为驼峰标识
        h1.style.width = "300px";
        h1.style.textAlign = "center";
        h1.style.lineHeight = "200px";
    </script>

</body>
</html>

View Code

6）操作元素样式

为元素添加id，class属性，对应选择器样式

操作元素的行内样式,访问元素节点的style属性，获取样式对象；样式对象中包含CSS属性，使用点语法操作。

p.style.color = "white";

p.style.width = "300px";

p.style.fontSize = "20px";

注意 :
+ 属性值以字符串形式给出,单位不能省略
+ 如果css属性名包含连接符,使用JS访问时,一律去掉连接符,改为驼峰. font-size -> fontSize

7）元素节点的层次属性

parentNode
获取父节点

childNodes
获取子节点数组,只获取直接子节点(包含文本节点和元素节点)

children
获取子节点数组,只获取直接子元素,不包含间接元素和文本节点

previousSibling
获取前一个兄弟节点(文本节点也可以是兄弟节点)
previousElementSibling 获取前一个元素兄弟节点

nextSibling
获取后一个兄弟节点
nextElementSibling 获取下一个元素兄弟节点

attributes
获取属性节点的数组

8）节点的创建，添加和删除

创建元素节点

var elem = document.createElement("标签名");//返回创建好的元素节点

节点的添加
添加和移除操作都必须由父元素执行，方法如下：

在父元素的末尾添加子节点

parendNode.appendChild(node);

指定位置添加

parendNode.insertBefore(newNode,oldNode);//在oldNode之前添加子节点

移除节点

parentNode.removeChild(node);//移除指定节点对象

三、DOM 事件处理

事件：指用户的行为或元素的状态。由指定元素监听相关的事件，并且绑定事件处理函数。
事件处理函数：元素监听事件，并在事件发生时自动执行的操作。

1）事件函数分类

鼠标事件

onclick //单击

ondblclick //双击

onmouseover //鼠标移入

onmouseout //鼠标移出

onmousemove //鼠标移动

键盘事件(了解)

onkeydown //键盘按键被按下

onkeyup //键盘按键被抬起

onkeypress //字符按键被按下

文档或元素加载完毕

onload //元素或文档加载完毕

表单控件状态监听

onfocus //文本框获取焦点

onblur //文本框失去焦点

oninput //实时监听输入

onchange //两次输入内容发生变化时触发,或元素状态改变时触发

onsubmit //form元素监听,点击提交按钮后触发,通过返回值控制数据是否可以发送给服务器

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:green;
        }
    </style>
</head>
<body>
    <div id="div"></div>
    <script>
        /*
        事件对象:保存与当前事件相关的所有信息,
        伴随事件发生自动创建,自动作为参数传递到事件处理函数中,
        我们只需要在事件处理函数中定义形参接收即可
        */

        //1.鼠标事件
        div.onclick = function (e){//event  evt e
            /*
            鼠标事件对象,主要保存鼠标的位置信息
            offsetX offsetY:获取鼠标在元素坐标系中的位置
            */
            console.log("单击",e,e.offsetX,e.offsetY);
        };
        div.ondblclick = function (){
           // console.log("双击");
        };
        div.onmouseover = function (){
            //console.log("鼠标移入");
        };
        div.onmouseout = function (){
            //console.log("鼠标移出");
        };
        div.onmousemove = function (){
           // console.log("鼠标移动");
        };
        //2.键盘事件(了解)
        onkeydown = function (e){
            /*
            键盘事件对象
            key属性返回按键对应的字符
            onkeydown:获取事件对象的which,功能键返回键盘编码;
            字符键一律返回大写字母的ASC码
            onkeypress:获取事件对象的which,返回字符键的ASC码值,
            区分大小写
            */
            console.log("onkeydown",e,e.key,e.which);
        };
        onkeypress = function (e){
            console.log("onkeypress",e,e.key,e.which);
        };
        onkeyup = function (){
            //console.log("onkeyup");
        };

    </script>
</body>
</html>

View Code

2）事件绑定方式

内联方式
将事件名称作为标签属性绑定到元素上
例 :

<button onclick="alert()">点击</button>

动态绑定
获取元素节点，动态添加事件
例 :

btn.onclick = function (){

};

3）事件函数使用

1. onload
常用于等待文档加载完毕再进行下一步操作
2. 鼠标事件
3. 表单事件
onchange：监听输入框前后内容是否发生变化;也可以监听按钮的选中状态
onsubmit ：表单元素负责监听,允许返回布尔值,表示数据是否可以发送;返回true,允许发送;返回false,不允许提交
4. 键盘事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function (){
            //窗口加载完毕后执行
            //console.log("window.onload");
            //输入框相关
            uname.onfocus = function (){
                //console.log("获取到焦点");
            };
            uname.onblur = function (){
                //this:指代事件的触发对象或函数的调用者
                //console.log("失去焦点:",this,uname.value,this.value);
            };
            //实时监听输入
            uname.oninput = function (){
                //console.log("oninput:",this.value);
            };
            //监听前后两次输入的内容是否一致
            uname.onchange = function (){
                //只有前后两次输入不一致,并且失去焦点时才触发
                console.log("onchange:",this.value);
            };
            //监听按钮状态的改变
            savePwd.onchange = function (){
                /*按钮有选中和未选中两种状态,
                对应checked属性值为true/false*/
                console.log(this.checked);
            };
            //监听表单中的数据是否可以提交
            /*
            交由form元素监听,在点击提交按钮时触发,允许返回布尔值,
            true表示允许发送,false表示阻止发送
            */
            form.onsubmit = function (){
                //用户名为空时阻止提交
                if(uname.value == ""){
                    return false;
                }else{
                    return true;
                }
            };

        };
        function fn(){
            console.log(this);
        }
        window.fn();
    </script>
</head>
<body>
    <form action="/login" method="get" enctype="" id="form">
        用户姓名:<input type="text" name="uname" id="uname"><br>
        记住密码:<input type="checkbox" id="savePwd" checked="checked"><br>
        <input type="submit">
    </form>

    <ul>
        <li>
            <span id="city">北京</span>
            <ol id="ol">
                <li>北京</li>
                <li>上海</li>
                <li>广州</li>
                <li>深圳</li>
            </ol>
        </li>
    </ul>
    <script>
        //console.log("测试");
        /*
        实现下拉菜单的点击传值(this练习)
        */
        //获取内层li元素列表
        var list = ol.children;
        for(var i = 0; i < list.length; i++){
            console.log("for:",i);
            list[i].onclick = function (){
                console.log(i);
                //传值
                //this指代事件触发对象
                city.innerHTML = this.innerHTML;
                console.log(this);
            };
        }

    </script>
</body>
</html>

View Code

键盘事件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="index.js"></script>
</head>
<body>
    <div>
        <p>参考</p>
        示例
        <h1 id="d1" class="c1">
            <span>h1->span</span>
        </h1>
        <p>参考</p>
    </div>
    <script>
        var h1 = $("h1");
        var div = $("div");
        //获取唯一的父节点
        console.log(h1.parentNode);
        //获取子节点数组(包含文本节点和元素节点)
        console.log(div.childNodes);
        //获取子元素数组(只包含直接子元素)
        console.log(div.children);
        //获取兄弟节点
        console.log(h1.previousSibling);
        console.log(h1.nextSibling);
        //获取元素兄弟节点
        console.log(h1.previousElementSibling);
        console.log(h1.nextElementSibling);
        //获取属性节点数组
        console.log(h1.attributes);

        //节点的创建,添加和移除
        //创建元素节点
        var h2 = document.createElement("h2");
        console.log(h2);
        h2.innerHTML = "动态添加";
        h2.id = "d2";
        //添加节点,由父节点操作
        document.body.appendChild(h2);//追加至父元素末尾
        /*节点与页面中元素一一对应,想在页面中出现几个元素,
        就需要创建几个节点*/
        var h3 = document.createElement("h3");
        //指定位置添加
        document.body.insertBefore(h3,h2);

        //移除节点
        //document.body.removeChild(div);

        /*
        1.实现网页轮播图
            方式一:控制图片的隐藏与显示
            方式二:切换图片路径
        2.参照效果图(添加元素练习)    */

    </script>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #banner{
            width:600px;
            height:300px;
            margin:0 auto;
        }
        #banner img{
            width:600px;
            height:300px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <img src="northStar.jpg" alt="" id="img">
    </div>
    <script>
        //1.保存图片路径
        var imgArr = ["northStar.jpg","wxy.jpeg"];
        //2.保存图片索引
        var index = 0;
        //3.开启间歇调用
        var timer = setInterval(autoPlay,1000);
        function autoPlay(){
            //更新索引
            index ++;
            //判断是否越界
            if(index == imgArr.length){
                index = 0;
            }
            //修改元素的src属性
            img.src = imgArr[index];
        }
    </script>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            width:600px;
            border:1px solid #000;
        }
        th,td{
            border:1px solid #000;
        }

    </style>

</head>
<body>
    <div>
        <input type="text" name="gname" placeholder="商品名称">
        <input type="text" name="gprice" placeholder="商品价格">
        <input type="text" name="gcount" placeholder="商品数量">
        <button onclick="add()">增加</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>
                    <button>操作</button>
                </th>
            </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>
    <script>
        function add(){
            //1.获取输入框
            var list = document.getElementsByTagName("input");
            //2.获取输入框的值
            var gname = list[0].value;
            var gprice = list[1].value;
            var gcount = list[2].value;
            //3.创建元素节点
            var tr = document.createElement("tr");
            var td1 = document.createElement("td");
            td1.innerHTML = gname;

            var td2 = document.createElement("td");
            td2.innerHTML = gprice;

            var td3 = document.createElement("td");
            td3.innerHTML = gcount;

            var td4 = document.createElement("td");
            td4.innerHTML = "<button>修改</button><button>删除</button>";

            //4.添加显示
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tbody.appendChild(tr);

            /*
            var list
            var tr
            for(var i = 0; i < 3;i++){
                var td = document.....;
                td.innerHTML = list[i].value;
                tr.appendChild(td);
            }
            var td4 = ;
            tr.appendChild(td4);
            tbody.appendChild(tr)
            */
        }
    </script>
</body>
</html>

View Code

javaScript

1) JS 介绍

2) JS 组成

2. 使用方式

1. 语法规范

2. JS的变量与常量

1) 变量

2) 常量

1) 基本数据类型（简单数据类型）

2) 引用数据类型

3) 检测数据类型

1) 强制类型转换

2) 隐式类型转换（自动转换）

1) 赋值运算符

2) 算数运算符

3) 符合运算符

4) 自增或自减运算符

5) 关系运算符/比较运算符

6) 逻辑运算符

7) 三目运算符

1. 作用

2. 分类

1） 顺序结构

2） 分支/选择结构

1. if语句

1） 作用

2）语法

3）使用

4）匿名函数

5）作用域

3. 属性和方法

4. 二维数组

1. 创建

2. 特点

3. 属性

4. 方法

1. BOM 介绍

2. window对象常用方法

1）网页弹框

2）窗口的打开和关闭

1）history

二、DOM节点操作

1）节点对象

2）常用节点分类

3）获取元素节点

4）操作元素内容

7）元素节点的层次属性

8）节点的创建，添加和删除

三、DOM 事件处理

1） 事件函数分类

3）事件函数使用

1）顺序结构

2）分支/选择结构

1）作用

1）事件函数分类