第四篇 web前端 vue - 第3章 JavaScript - 《村刀学院java全栈从入门到入职》

1.1 JavaScript简介
1.2 JavaScript组成部分
1.3 JavaScript发展史
1.4 JavaScript环境搭建
二、JavaScript基本语法
三、JavaScript的DOM【重点】
四、浏览器BOM
五、案例1：表格全选
六、案例2：表单验证
七、面向对象
- JavaScript 面向对象的概念
- 对象的创建

1.1 JavaScript简介

JavaScript一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。
它的解释器被称为JavaScript引擎，作为浏览器的一部分，广泛用于客户端的脚本语言，用来给HTML网页增加动态功能。
脚本语言：不需要编译，直接就可以被浏览器解析执行了
可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

1.2 JavaScript组成部分

ECMAScript语法
文档对象模型（DOM Document Object Model）
浏览器对象模型(BOM Browser Object Model)

1.3 JavaScript发展史

它是由Netscape公司的Brendan Eich用10天设计出来一门脚本语言，JavaScript是甲骨文公司的注册商标。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势，微软推出了JScript来迎战JavaScript的脚本语言。两者都属于ECMAScript的实现，为了互用性，ECAM（欧洲计算机制造商协会）创建了ECMA-262标准（ECMAScript）。ECMAScript最新版本是2015发布的 ECMAScript 6（ES6）。

1.4 JavaScript环境搭建

创建一个< script >< /script >标签

<html>
    <body>
        <script>
    document.write("hello,world!!")
    </script>
    </body>
</html>

还可以使用外部引用的形式：把原本的JavaScript代码写到一个文件里，之后再引用过来

<html>
    <body>
        <script src="js/my.js"></script>
    </body>
</html>

二、JavaScript基本语法

2.1 变量声明

在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
var是声明关键字，a是变量名，语句以分号结尾。
这里值得注意的是，JavaScript中的关键字，不可以作为变量名。就像在Java中你不可以写”int int=1;”一样。
Java语言是强类型语言，而JavaScript是弱类型语言。
强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

var a;

JavaScript的部分关键字：

abstract、else、instanceof、super、boolean、enum、int、switch、break、export、interface、synchronized、
byte、extends、let、this、case、false、long、throw、catch、final、native、throws、char、finally、new、
transient、class、float、null、true、const、for、package、try、continue、function、private、typeof、\
debugger、goto、protected、var、default、if、public、void、delete、implements、return、volatile、do、
import、short、while、double、in、static、with。

2.2 基本类型
●变量的基本类型又有Number、String、Boolean、Undefined、Null五种。
●Number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
●String：字符串。字符串 “abc” “a” ‘abc’
●Boolean: true和false
●Null：一个对象为空的占位符
●Undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

●来声明一个数字Number类型，如下：

var a=1;

来声明一个字符串String类型。
你可以使用:

var a="1";

来声明一个布尔Boolean类型。
你可以使用：

var a=false;

在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。
在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。
下面是演示undefined的情况：(当一个引用不存在时，它为Null。这个现象我们在之后的引用类型时再详细探讨)

var a;
document.write(a);

2.2.1 Number

2.2.2 String

常用方法：
indexof
substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
substring(start,stop) 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
replace(regexp/substr,replacement) 方法用于在字符串中用一些字符替换另一些字符

 var str  = "hello  world";
document.write(str.indexOf("world")+"<br/>");
document.write(str.substr(1,3)+"<br/>");
document.write(str.substring(1,3)+"<br/>");
document.write(str.replace("o",' ')+"<br/>");

2.2.3 Boolean

var flag = new Boolean("null");//object
document.write(flag+":"+typeof(flag)+"<br/>");
var num = new Number(3);//object
document.write(num+":"+typeof(flag)+"<br/>");

2.2.4 Null

2.2.5 Undefined

2.3 引用类型

在Java中需要类定义，然后再实例对象：

public class Student{
  public int id;
  public String name;
  public int age;
}
public class Test{
    public static void main(String [] args){
        Student student=new Student();
          student.id=1;
          student.name="张三";
          student.age=18;
    }
}

在JavaScript中对象可以直接写出来：

var student={id:1,name:"张三",age:18};
document.write(student.id);
document.write(student.name);
document.write(student.age);

事实上，student被赋值为了一个JSON，JSON就是我们在Java基础阶段学过的，全称是JavaScript Object Notation，叫做JavaScript对象标记，也就是说，在JavaScript中，JSON是用于标记一个对象的。

2.4 数组类型
●数组就是和我们之前理解的数组概念一致，而在JavaScript中成为Array类型。
1创建：
avar arr = new Array(元素列表);
bvar arr = new Array(默认长度);
cvar arr = [元素列表];
2方法 join(参数):将数组中的元素按照指定的分隔符拼接为字符串 push():向数组的末尾添加一个或更多元素，并返回新的长度。
3属性 length:数组的长度
4特点：
aJS中，数组元素的类型可变的。
bJS中，数组长度可变的。

 var arr = new Array(1,3,5,4)
        //
        var arr2 = new Array(5);
        arr2[0]=1;
        var arr3 = [1,3,4,6,7,'true',true]
        document.write(arr+"<br/>");
        document.write(arr2+"<br/>");
        document.write(arr3+"<br/>");
        document.write(arr3.join("-")+"<br/>");
        arr3.push('str');
        document.write("----------------<br/>");
        document.write(arr3+"<br/>");
          var arr4 = [1,2,5,6,7];
        var length = arr.push('true',3,6);
        alert(length);
        var ele = arr.pop();
        alert(ele);
        //数组的遍历
        for(var i=0;i<arr.length;i++){
            document.write(arr[i]+"<br\>");
        }

var a=[1,2,3,4];

上述代码，我们说a是一个数组，在a中角标为0的元素是1。可以说这很简单。
接下来我们来尝试把之前的JSON放入数组中：

//我是注释
/*我也是注释*/
var students = [
    {id: 1,name: "张三",age: 18},
    {id: 2,name: "李四",age: 18},
    {id: 3,name: "王五",age: 19}
];
document.write(students[0].id);
document.write(students[0].name);
document.write(students[0].age);
document.write("<br>");//这个是html的换行的意思
document.write(students[1].id);
document.write(students[1].name);
document.write(students[1].age);
document.write("<br>");
document.write(students[2].id);
document.write(students[2].name);
document.write(students[2].age);

我们看到，访问students这个数组，第0个，第1个，第2个元素，都可以。

2.5 Date：日期对象
1创建： var date = new Date();
2方法： toLocaleString()：返回当前date对象对应的时间本地字符串格式 getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

  var date= new Date();


        var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();

        document.write(dateStr+"<br/>");

        document.write(date.toLocaleString()+"<br/>");
        document.write(date.getTime()+"<br/>");

        document.write(date+"<br/>");

2.6 Math：数学对象

创建：
- 特点：Math对象不用创建，直接使用。 Math.方法名();
方法：
random():返回 0 ~ 1 之间的随机数。含0不含1
ceil(x)：对数进行上舍入。
floor(x)：对数进行下舍入。
round(x)：把数四舍五入为最接近的整数。

属性：
PI

var radom = Math.random();

     document.write(radom+"<br/>");

     document.write(Math.floor(3.45)+"<br/>");
     document.write(Math.ceil(3.45)+"<br/>");
     document.write(Math.round(3.45)+"<br/>");
     document.write(Math.PI+"<br/>");

2.5 运算符

typeof运算符：获取变量的类型。

注：null运算后得到的是object

//number数字；
        var num = 1;
        var num2 = 1.1
        var num3 = NaN;

        document.write(num+":"+typeof(num)+"<br/>");
        document.write(num2+":"+typeof(num2)+"<br/>");
        document.write(num3+":"+typeof(num3)+"<br/>");

        document.write("<hr>");
        var str = 'acc';

        document.write(str+":"+typeof(str)+"<br/>");

        document.write("<hr>");

        var flag =true;
        document.write(flag+":"+typeof(flag)+"<br/>");
        document.write("<hr>");
        var obj = null;

        document.write(obj+":"+typeof(obj)+"<br/>");

        document.write("<hr>");
        var obj2 ;
        document.write(obj2+":"+typeof(obj2)+"<br/>");

逻辑运算

名称	运算符	描述
与	&&	要求表达式左右两边的表达式同为true，整体结果才为true
或	\|\|	要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非	！	将布尔值取反操作

其他类型转boolean：

number：0或NaN为假，其他为真
string：除了空字符串(“”)为false，其他都是true
null&undefined:都是false
对象：所有对象都为true

var a=false;
var b=true;
//非的逻辑
//!a->true;
//!b->false;
//与的逻辑
//a&&a->false;
//a&&b->false;
//b&&a->false;
//b&&b->true;
//或的逻辑
//a||a->false;
//a||b->true;
//b||a->true;
//b||b->true;



//    
        var num = 0;
        var num2 = NaN;
        var num3 = 3;

        document.write(!!num+"<br/>");
        document.write(!!num2+"<br/>");
        document.write(!!num3+"<br/>");

        document.write("<hr>");

        var a = null;
        var b = undefined;
        document.write(!!a+"<br/>");
        document.write(!!b+"<br/>");

        document.write("<hr>");

        var str = '';
        var str2 = 'abc';

        document.write(!!str+"<br/>");
        document.write(!!str2+"<br/>");

        document.write("<hr>");
        var date = new Date();
        document.write(!!date+"<br/>");



        document.write("<hr>");



        var aa = "null";
        document.write(!!aa+"<br/>");
        //短路的效果，返回一个操作数
        var flag = "null"&& "wowo";
        document.write(flag+"<br/>");

        var flag2 = NaN && "wowo";
        document.write(flag2+"<br/>");


        //
        //
        var flag3 = NaN || "";
        document.write(flag3+"<br/>");
        //
        //
        var flag4 = null || true;
        document.write(flag4+"<br/>");

关系运算

名称	运算符
等于	==
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

var a=1;
var b=2;
//a==a->true
//a==b->false
//a<b->false
//a<=b->false
//a>b->true
//a>=b->true
//a!=b->true
//a===b->false
//这里三个等于“===”和两个等于“==”区别：
//前者相当于比较两个引用，后者相当于比较两个值。
//当比较两个值得时候，不考虑数据类型。
//也就是说1=="1"是true的。

单目运算：自增自减

名称	运算符	描述
自增	++	变量的值每次加1，再赋给变量
自减	—	变量的值每次减1，再赋给变量

var a=1;
a++;//自增
a--;//自减
++a;//自增
--a;//自减
//上述规则和Java一样。

双目运算符

名称	运算符
加	+
减	-
乘	*
除	/
求余	%
赋值	=
加等	+=
减等	-=
除等	/=
乘等	*=
求余等	%=

var a=1;
var b=2;
a+b;//相加
a-b;//相减
a*b;//相乘
a/b;//相除
a%b;//求余
a=b;//赋值
a+=b;//相加后赋值
a-=b;//相减后赋值
a/=b;//相除后赋值
a*=b;//相乘后赋值
a%=b;//求余后赋值
//上述规则和Java一样。

三目运算符： ?:

var kk=100;    
document.write(kk>100?true:false);

2.6 条件分支结构

if-else分支

var a=1;
var b=1;
if(a==b){
    document.write("相等");
}else{
    document.write("不相等");
}
//很明显，运行结果是相等
//这就是if-else的结构，和Java语言是一样的。

switch分支

var a=2;
switch(a){
  case 1:
    document.write("值为1");
    break;
  case 2:
    document.write("值为2");
    break;
  case 3:
    document.write("值为3");
    break;
  default:
     document.write("值不是3也不是2也不是1");
}

2.7 循环结构

for循环

var a=0;
for(var i=1;i<=100;i++){
    a+=i;
}
document.write(a);
//上述代码是对1~100求和。

while循环

var a=0;
var i=1;
while(i<=100){
   a+=i;
   i++;
}
document.write(a);
//上述代码是对1~100求和。

do-while循环

var a=0;
var i=1;
do{
    a+=i;
      i++;
}while(i<=100);
document.write(a);
//上述代码是对1~100求和。

break与continue关键字

break用于结束循环
continue用于结束本次循环

2.8 函数【重点】
函数定义：用function关键字来声明，后面是方法名字，参数列表里不写var。整个方法不写返回值类型。
1方法定义是，形参的类型不用写,返回值类型也不写。
2在JS中，方法的调用只与方法的名称有关，和参数列表无关
3在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数 length:代表形参的个数

function functionName(parameters){
    //执行的代码
}

var 方法名 = function(形式参数列表){
    方法体
}

方法的定义与调用举例：

//创建函数的方式1：
// function  fun1(a,b){
//
//     alert(a+b);
//
// }
//
// fun1(3,4);

//创建函数方式2：
// var fun2 = function(a,b){
//     alert(a-b);
// }
// fun2(3,4);
//alert(fun2.length);//参数列表的长度

function add(a,b){
    return a+b;
}
var c=1;
var d=2;
var e=add(1,2);
document.write(e);
//上述代码运行结果是3
//这里定义了一个add方法，参数是两个，与Java不同，参数的数据类型并没有。
//因为就算是写，全都是var，为了保证语法的简洁性，全写var索性就设计成全都不用写了。
//返回值也是同样的道理，区别是，如果你写了返回值，那么有返回值，如果没写return，就没有返回值。

//在JS中，方法的调用只与方法的名称有关，和参数列表无关
function fun5(a,b,c){
            alert(a);
            alert(b);
            alert(c);

        }

        fun5(1);


//3,求任意个数参数的和
        var fun =function(){
            //alert(arguments.length);
            // alert(arguments[0]);
            // alert(arguments[1]);
            // alert(arguments[2]);
            var sum = 0;
            for(var i=0;i<arguments.length;i++){
                sum +=arguments[i];
            }

            document.write("sum:"+sum);


        }

        fun(1,2,3,4,5);

2.9 常见弹窗函数

alert弹框：这是一个只能点击确定按钮的弹窗
alert方法没有返回值，也就是说如果用一个变量去接受返回值，将会得到undefined。无论你点击“确定”还是右上角的那个“X“关闭。

alert("你好");

confirm弹框：这是一个你可以点击确定或者取消的弹窗
●confirm方法与alert不同，他的返回值是boolean，当你点击“确定”时，返回true，无论你点击“取消”还是右上角的那个“X“关闭，都返回false。

confirm("你好");

prompt弹框：这是一个你可以输入文本内容的弹窗
○第一个参数是提示信息，第二个参数是用户输入的默认值。
●当你点击确定的时候，返回用户输入的内容。当你点击取消或者关闭的时候，返回null。

prompt("你爱学习吗？","爱");

2.10 事件

事件名称	描述
onchange	HTML 元素内容改变
onclick	用户点击 HTML 元素
onmouseover	用户将鼠标移入一个HTML元素中
onmousemove	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeyup	键盘
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载
onsubmit	表单提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见事件</title>
    <script>

        //第一种方式：直接在元素里面定义onclick;
        // function clickFun(){
        //
        //     alert("我被点击了");
        // }

        //第二种方式：绑定一个事件

        //1. onload：一张页面或一幅图像完成加载。
        window.onload=function(){
            //单击事件：onclick
            // document.getElementById("username").onclick=function(){
            //     alert("我被点击了");
            // }

            //获取焦点
            // document.getElementById("username").onfocus=function(){
            //     alert("获取到了焦点");
            // }
            //
            // //失去焦点
            // document.getElementById("username").onblur=function(){
            //     alert("失去焦点");
            // }
            //鼠标移到某元素之上
            // document.getElementById("username").onmouseover=function(){
            //     alert("鼠标移动到文本框的时候");
            // }

            // document.getElementById("username").onmouseout=function(){
            //     alert("鼠标离开文本框的时候");
            // }

            //onchange    域的内容被改变。
            document.getElementById("sel").onchange=function(){
                alert("已下拉");
            }


            document.getElementById("form").onsubmit=function(){

                return false;

            }

        }


        //
        // function fun3(){
        //
        //     //document.write("获取一个焦点"+"<br/>");
        //     alert("获取到一个焦点");
        // }

    </script>
</head>
<body>

    <form id="form" action="#" method="get">
        <!--<input  id="username" name="username" onclick="clickFun();"/>-->
        <input  id="username" name="username" type="text"/>


        <select id="sel">
            <option>请选择</option>
            <option>北京</option>
            <option>广州</option>
            <option>上海</option>
        </select>

        <input type="submit" value="提交"/>
    </form>
</body>
</html>

2.11 正则表达式

正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：

var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;

var re = new RegExp("\\w+");
var re = /\w+/;

修饰符：用于执行区分大小写和全局匹配:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

方括号：用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red\|blue\|green)	查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，”caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，”A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，”angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，”caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}	前面的模式 n 连续出现X 次时匹配
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

单个字符:[]
如： [a] [ab] [a-zA-Z0-9_]
- 特殊符号代表特殊含义的单个字符:
  \d:单个数字字符 [0-9]
  \w:单个单词字符[a-zA-Z0-9_]
量词符号：
?：表示出现0次或1次
*：表示出现0次或多次
+：出现1次或多次
{m,n}:表示 m<= 数量 <= n
- m如果缺省： {,n}:最多n次
- n如果缺省：{m,} 最少m次
开始结束符号
- ^:开始
- $:结束

RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

支持正则表达式的 String 对象的方法

方法	描述
search	检索与正则表达式相匹配的值。
match	找到一个或多个正则表达式的匹配。
replace	替换与正则表达式匹配的子串。
split	把字符串分割为字符串数组。

正则表达式的使用
●test方法：搜索字符串指定的值，根据结果并返回真或假
●exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

var reg = new RegExp("\\d");
var reg2 = /^\d\w{6,12}/;
var str = "1zhangsan";
if(reg2.test(str)){
    document.write("匹配到了")
}else{
    document.write("未能匹配到");
}

2.12 Global：全局对象

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
parseInt():将字符串转为数字

逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number

isNaN():判断一个值是否是NaN
eval():将 JavaScript 字符串，并把它作为脚本代码来执行

 // var str = "1234abc";
            // var num = parseInt(str);
            // document.write(num+"<br/>");

        var jscode = "alert(132)";
        //alert(jscode);
        eval(jscode);

三、JavaScript的DOM【`重点`】

3.1 概述

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素。
JavaScript 能够改变页面中的所有 HTML 属性。
JavaScript 能够改变页面中的所有 CSS 样式。
JavaScript 能够对页面中的所有事件做出反应。

3.2 查找HTML元素

通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
方法：document.getElementById(“id属性值”);
如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。
如果未找到该元素，则 x 将包含 null。

通过标签名找到 HTML 元素

方法：getElementsByTagName(“合法的元素名”);

通过类名找到HTML 元素

方法：getElementsByClassName(“class属性的值”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4">div4</div>
<div id="div5">div5</div>

<div class="cls">div6</div>
<div class="cls">div7</div>

<input name="username"/>
<script>

    // var div1 = document.getElementById("div1");
    //
    // div1.innerHTML="这是我的document对象";

    // var divArr =  document.getElementsByTagName("div");
    // alert(divArr.length);

    // var divArr2 = document.getElementsByClassName("cls");
    // alert(divArr2.length);

    var divArr3 = document.getElementsByName("username");
    alert(divArr3.length);

</script>

</body>
</html>

3.3 改变HTML
改变HTML输出流：document.write() 可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello world,I'm JavaScript");
</script>
</body>
</html>

改变HTML内容：使用 innerHTML，innerText 属性

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="abcd";
</script>

<div>
    <p id="p1">这是P标签1</p>
    <p id="p2">这是P标签2</p>
    <p id="p3">
        <span id="span1">这是span1标签的内容</span>
        <span id="span2">这是span2标签的内容</span>
    </p>
    <button onclick="func();">删除同级节点</button>
    <button onclick="func2();">改变p2标签的innerHTML</button>
    <button onclick="func3();">改变p2标签的innerText</button>
</div>

<script>
    function func(){
        var spanEle = document.getElementById("span1");
        //parentNode 返回节点的父节点。
        var parentNode = spanEle.parentNode;
        var span2 = document.getElementById("span2");
        parentNode.removeChild(span2);//删除span2节点
    }

    function func2(){
        var p2 = document.getElementById("p2");
        p2.innerHTML="<span>这是span标签的内容</span>";

    }

    function func3(){
        var p1 = document.getElementById("p1");
        p1.innerText="<span>这是span标签的内容</span>";

    }
</script>    


</body>
</html>

改变HTML属性：document.getElementById(id).attribute=新属性值
将attribute替换成真实的属性名

改变HTML属性：document.getElementById(id).attribute=新属性值
将attribute替换成真实的属性名

3.4 CSS变化

对象.style.property=新样式
将property替换成真实的css属性名

示例1：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>

</body>
</html>

示例2：

 <div>学习</div><div >改变命运</div><br/>
    <input type="button" value="隐藏" onclick="myHidden()"/>
    <input type="button" value="显示" onclick="myVisible()"/>
    <script type="text/javascript">
        var div = document.getElementsByTagName("div")[1];
        function myHidden() 
        {
            div.style.visibility = "hidden";
        }
        function myVisible()
        {
            div.style.visibility = "visible";
            div.style.color="red";
        }
    </script>

3.5 DOM事件

HTML DOM 允许我们通过触发事件来执行代码。·
比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。

本例改变了 id=”id1” 的 HTML 元素的样式，当用户点击按钮时

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">myH1</h1>
<button type="button" 
onclick="document.getElementById('id1').style.color='red'">
button</button>

</body>
</html>

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

在本例中，当用户在 h1 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>

如需向 HTML 元素分配事件，您可以使用事件属性。

<button onclick="displayDate()">点这里</button>

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

3.6 操作元素

如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

创建元素：document.createElement()
创建文本节点：document.createTextNode()
追加元素：appendChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素
使用方法：removeChild()

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

3.7 操作属性

Element：元素对象

获取/创建：通过document来获取和创建
方法：
removeAttribute()：删除属性
setAttribute()：设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性操作</title>
</head>
<body>
<div>
<a>点我试一下</a>
<p align="center">这是我的P标签的内容</p>
</div>

<button onclick="setAttr();">设置属性</button>
<button onclick="removeAttr();">删除属性</button>

<script>
    function setAttr(){
        var aEle = document.getElementsByTagName("a")[0];
        //aEle.setAttribute("href","https://wwww.baidu.com");
        aEle.href="https://www.baidu.com";

        var pEle = document.getElementsByTagName("p")[0];
        pEle.setAttribute("align","left");

    }

    function removeAttr(){
        var aEle = document.getElementsByTagName("a")[0];
        aEle.removeAttribute("href");
    }
</script>
</body>
</html>

四、浏览器BOM

浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器”对话”。
由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。
将浏览器的各个组成部分封装成对象。
Window：窗口对象
Navigator：浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

4.1 window
●所有浏览器都支持 window 对象。它表示浏览器窗口。
●所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
●全局变量是 window 对象的属性。
●全局函数是 window 对象的方法。
●甚至 HTML DOM 的 document 也是 window 对象的属性之一：
●与打开关闭有关的方法： close() 关闭浏览器窗口。 谁调用我，我关谁 open()打开一个新的浏览器窗口 返回新的Window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象</title>


    <script>
        //window.alert("zheshiwowo");

        // var flag = window.confirm("确定退出吗？");
        // if(flag){
        //     alert("退出");
        // }else{
        //     alert("继续");
        // }



        // var  winOpen;
        // function openWin(){
        //
        //     winOpen=window.open("https://wwww.baidu.com");
        // }
        //
        // function closeWin(){
        //
        //     winOpen.close();
        // }

        function func(){
            alert('爆炸');
        }


        var id = window.setInterval(func,3000);
        function fun2(){
            window.clearInterval(id);
        }


        //window.setTimeout(func,3000);

    </script>
</head>
<body>
<button onclick="openWin()">打开窗口</button>
<button onclick="closeWin()">关闭窗口</button>

<button onclick="fun2()">取消定时器</button>
</body>
</html>

window的尺寸

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth

var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

Window Screen

可用宽度：screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。
可用高度：screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

document.write("可用宽度: " + screen.availWidth);
document.write("可用高度: " + screen.availHeight);

Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档
reload() 重新加载当前文档。刷新

示例1：

<html>
<head>
<script>
function newDoc()
  {
  window.location.assign("http://www.baidu.com/")
  }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

示例2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function refresh(){
            window.location.reload();
        }

        function goBaidu(){
            window.location.href = "https://wwww.baidu.com";
        }


        function back(){
            //window.history.back();
            window.history.go(-1);
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="点击" onclick="refresh();"/>
<input type="button" id="btn2" value="去百度" onclick="goBaidu();"/>

<input type="button" onclick="back();" value="后退">
</body>
</html>

Window History

window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。

history.back()
history.forward()

一些方法示例如下：

history.back() - 与在浏览器点击后退按钮相同

<html>
<head>
<script>
function goBack()
  {
  window.history.back();
       //window.history.go(-1);
  }
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

history.forward() - 与在浏览器中点击按钮向前相同

<html>
<head>
<script>
function goForward()
  {
  window.history.forward();
      //window.history.go(1);
  }
</script>
</head>
<body>

<a href="Location对象.html">打开一个页面</a>    
<input type="button" value="Forward" onclick="goForward()">

</body>
</html>

Window Navigator

window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

4.2 JavaScript定时器

定义定时器：

setInterval(‘调用函数’,毫秒时间)：每间隔固定毫秒值就执行一次函数
setTimeout(‘调用函数’,毫秒时间)：在固定时间之后执行一次调用函数

关闭定时器：

clearInterval(定时器名称)
clearTimeout(定时器名称)

五、案例1：表格全选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }


    </style>

  <script>
      /*
        分析：
            1.全选：
                * 获取所有的checkbox
                * 遍历cb，设置每一个cb的状态为选中  checked

       */


      //1.在页面加载完后绑定事件
      window.onload = function(){

          //全选按钮
          document.getElementById("selectAll").onclick=function(){
              var cbArr = document.getElementsByName("cb");
              for(var i=0;i<cbArr.length;i++){
                  cbArr[i].checked=true;
              }

          }

          //全不选
          document.getElementById("unSelectAll").onclick=function(){
              var cbArr = document.getElementsByName("cb");
              for(var i=0;i<cbArr.length;i++){
                  cbArr[i].checked=false;
              }
          }

          //反选
          document.getElementById("selectRev").onclick=function(){
              var cbArr = document.getElementsByName("cb");
              for(var i=0;i<cbArr.length;i++){


                  //第一种
                  cbArr[i].checked=!cbArr[i].checked;
                  //第二种
                  // if(cbArr[i].checked){
                  //     cbArr[i].checked=false;
                  // }else{
                  //     cbArr[i].checked=true;
                  // }


              }
          }


      }



  </script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox"  name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

六、案例2：表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }

        body{
            background-image: url("img/register_bg.png");
            padding:15px;
        }

        #rg_layout{
            width:900px;
            height:600px;
            background-color: white;
            border:6px solid #A6A6A6;
            margin:auto;
            padding:15px;

        }

        #rg_left{
            /*border:1px solid red;*/
            float:left;
        }

        #rg_left p:first-child{
            font-size: 20px;
            color:#FFD026;
        }

        #rg_left p:last-child{
            font-size: 20px;
            color:#A6A6A6;
        }

        #rg_center{
            /*border:1px solid red;*/
            float:left;
            margin-left:50px;
        }

        .td_left{
            width:100px;
            height:45px;
        }

        #username,#password,#email,#name,#tel,#birthday,#checkcode{
            width:250px;
            height:30px;
            border:1px solid #A6A6A6;
            border-radius: 8px;

        }

        #checkcode{
            width:110px;
        }

        #img_check{
            vertical-align: middle;
        }

        #btn_submit{
            width:120px;
            height:40px;
            background-color: #FFD026;
            border:1px solid #FFD026;
        }


        #rg_right{
            /*border:1px solid red;*/
            float:right;
        }

        #rg_right p a{
            color:pink;
        }

        .error{
            color:red;
        }
    </style>

    <script>
        window.onload=function(){
            //表单验证
            document.getElementById("registerForm").onsubmit=function(){
                var username_flag = checkUsername();
                var password_flag = checkPassword();

                return username_flag&&password_flag;

            }
        }

        //验证用户名是否符合规则
        function checkUsername(){
            var reg = /^\w{6,12}/;//6-12位数字、字母或_组成
            var username = document.getElementById("username").value;
            var username_span = document.getElementById("username_span");
            if(reg.test(username)){
                username_span.innerHTML="<img src='img/gou.png' width='50' height='35'/>";
                return true;
            }else{
                username_span.innerHTML="用户名格式错误";
                return false;
            }
        }

        //验证密码是否符合规则
        function checkPassword(){
            var reg = /^\w{6,12}/;//6-12位数字、字母或_组成
            var password = document.getElementById("password").value;
            var password_span = document.getElementById("password_span");
            if(reg.test(password)){
                password_span.innerHTML="<img src='img/gou.png' width='50' height='51'/>";
                return true;
            }else{
                password_span.innerHTML="密码格式错误";
                return false;
            }
        }

    </script>
</head>
<body>
<div id="rg_layout">
    <!--左边的部分-->
    <div id="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>
    <!--中间的部分-->
    <div id="rg_center">
        <form id="registerForm">
        <table>
            <tr>
                <td class="td_left"><label for="username">用户名</label></td>
                <td class="td_right">
                    <input type="text" name="username" id="username" placeholder="请输入用户名" onblur="checkUsername();">
                    <span id="username_span" class="error"></span>
                </td>
            </tr>

            <tr>
                <td class="td_left"><label for="password">密码</label></td>
                <td class="td_right">
                    <input type="password" name="password" id="password" placeholder="请输入密码" onblur="checkPassword();">
                    <span id="password_span" class="error"></span>
                </td>
            </tr>

            <tr>
                <td class="td_left"><label for="email">Email</label></td>
                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="name">姓名</label></td>
                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="tel">手机号</label></td>
                <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
            </tr>

            <tr>
                <td class="td_left"><label>性别</label></td>
                <td class="td_right">
                    <input type="radio" name="gender" value="male"> 男
                    <input type="radio" name="gender" value="female"> 女
                </td>
            </tr>

            <tr>
                <td class="td_left"><label for="birthday">出生日期</label></td>
                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
            </tr>

            <tr>
                <td class="td_left"><label for="checkcode" >验证码</label></td>
                <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                    <img src="img/verify_code.jpg" id="img_check">
                </td>
            </tr>


            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" id="btn_submit"></td>
            </tr>
        </table>
        </form>

    </div>
    <!--右边的部分-->
    <div id="rg_right">
        <p>已有账号？<a href="#">立即登录</a>
        </p>
    </div>
</div>
</body>
</html>

七、面向对象

JavaScript 面向对象的概念

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…
此外，JavaScript 允许自定义对象。

对象的创建

使用 json 格式创建对象

    var tea = {
        name:'jiangdaran',
        age:18,
        test:function () {
            alert("json格式创建对象");
        }
    }

使用 new Object（）方式创建对象，然后再给对象赋属性与方法

  var obj = new Object();
  obj.name = 'jiangdaran';
  obj.age = 18;
  obj.test = function () 
  {
      alert("new Object()方法创建对象");
  }

使用构造方法的方式创建对象

  function teacher(name,age) 
  {
      this.name = name;
      this.age = age;
      this.test = function () 
      {
          alert("构造方法的方式创建对象");
      }
  }
  var tea = new teacher('jiangdaran',18);

第3章 JavaScript