JavaScript学习笔记

康提扭狗兔

已于 2022-11-09 03:43:09 修改

阅读量517

点赞数

文章标签： javascript 前端 html

于 2022-11-09 02:35:17 首次发布

本文链接：https://blog.csdn.net/qq_30166465/article/details/127762137

版权

文章目录

ECMAScript（js核心语法）
DOM编程
BOM编程
JSON

建议搭配b站动力节点深入浅出JavaScript的课程，笔记和代码为本人自己所写，尚有疏漏之处，如误人子弟深感歉意

ECMAScript（js核心语法）

ECMAScript：JS的核心语法（ES规范/ECMA-262标准）

HTML中嵌入JavaScript代码的三种方式

一、绑定事件

<html>
    <head>
        <title>HTML中嵌入JS代码(一)</title>
    </head>
    <body>
        <input type="button" value="hello" onclick="window.alert('hello js1');window.alert('hello js2');window.alert('hello js3')">
    </body>
</html>

二、脚本块

不能绑定事件，自上而下逐行执行，也可以放在head（文件的任意处）

<html>
    <head>
        <title>HTML中嵌入JS代码(二)</title>
    </head>
    <body>
        <!--脚本块，自上而下逐行执行，也可以放在head中-->
        <script type="text/javascript">
            <!--alert()会阻塞代码加载-->
            window.alert("hello js1");
            window.alert("hello js2");
        </script>
        <input type="button" value="按钮" onclick="window.alert('hello')"
    </body>
</html>

三、引入外部js文件

引入的js文件里的代码也会自上而下逐行执行，且标签内写的代码并不会执行，注意标签是src而css是href

<html>
    <head>
        <title>HTML中嵌入JS文件(三)</title>
    </head>
    <body>
        <script type="text/javascript" src="js/1.js"></script>
        <!--结束的script标签必须有-->
        <script type="text/javascript" src="js/1.js" />
    </body>
</html>

js中的变量

变量声明和赋值

JavaScript是一种弱类型语言，变量可以随意赋各种类型的值

<script type="text/javascript">
        var i;
        //undefined在JS中是一个具体的值
        alert("i=" + i); //i=undefined
        alert(undefined);
        var k = undefined;
        alert("k=" + k); //k=undefined
    </script>

一个变量没有声明就用，浏览器会报错

全局变量和局部变量

全局变量:
函数体之外声明的变量，生命周期是浏览器打开时声明，浏览器关闭时销毁，很耗费内存
当一个变量声明的时候没有var关键字，无论在哪声明，都是全局变量
局部变量:
函数体内部声明的变量，生命周期较短，随函数的调用声明，函数结束时销毁

js函数初步

语法格式

很灵活，没有参数类型，且形参可以随便传多少个，故没有重载机制
如果定义两个同名的函数，后面定义的会覆盖掉前面定义的函数

第一种方式:
function 函数名(形参列表){
    函数体;
}
第二种方式:
函数名=function(形参列表){
    函数体;
}

调用才能执行，直接调用或者绑定事件

<body>
    <script type="text/javascript">
        function sum(a, b) {
            alert(a + b);
        }
        sayHello = function (username) {
            alert("hello " + username)
        }
        //sum(1, 2);
        //sayHello("张三");       
        sum();//NaN 是一个具体的值，但不是数字，Not a Number
    </script>
    <input type="button" value="hello" onclick="sayHello('Jack')" />
    <input type="button" value="计算和" onclick="sum(10,20)" />
</body>

js中的数据类型

6种数据类型

虽然变量声明的时候不需要指定数据类型，但赋值的时候，数据有类型
JS中数据类型有：原始类型、引用类型
ES6版本之前有6种类型，ES6版本及之后有7种类型

原始类型：Undefined、Number、String、Boolean、Null
引用类型：Object以及Object的子类
ES6之后多了Symbol类型

JS中函数typeof可以在运行阶段动态地获取变量的数据类型
typeof运算符的结果是以下6个字符串之一：
undefined、number、string、boolean、object、function
typeof null为"object"
js中比较字符串相等用==没有equals

Undefined类型只有一个值，就是undefined

<script type="text/javascript">
        function sum(a, b) {
            if (typeof a == "number" && typeof b == "number") {
                return a + b;
            }
            alert(a + ',' + b + "必须都为数字");
        }
        var retValue = sum(3, false);
        alert(retValue); //undefined
    </script>

Number类型包括以下值:
-1 0 1 3.14 100 NaN Infinity等
关于NaN，运算结果本应是个数字，但实际运算完不是数字，结果是NaN

<script type="text/javascript">
        var e = "abc";
        var f = 10;
        alert(e + f);//abc10
    </script>

Infinity无穷大，除数为0时，结果为Infinity

<script type="text/javascript">
        alert(10 / 0);//Infinity
        alert(10 / 3);//3.3333333333333335
    </script>

isNaN()函数，返回true或false
parseInt() 可以将字符串自动转换成数字，并且取整数位
parseFloat() 可以将字符串自动转换成数字
Math.ceil() 将数字向上取整

Boolean类型，有一个函数Boolean(),作用是将非布尔类型转换为布尔类型
if后面如果不是Boolean类型，会自动转换

        alert(Boolean(1)); //true
        alert(Boolean(0)); //false
        alert(Boolean("")); //false
        alert(Boolean("abc")); //true
        alert(Boolean(null)); //false
        alert(Boolean(NaN)); //false
        alert(Boolean(undefined)); //false
        alert(Boolean(Infinity)); //true

String类型，以下两种方式创建的字符串可以通用使用函数或者属性

常用函数：
indexOf、lastIndexOf、replace（只替换第一个，全部替换用正则表达式）、
substr(index,length)、substring(index,index))、toLowerCase、toUpperCase、split

<script type="text/javascript">
        var x = "abcdef";
        alert(typeof x); //"string"
        var y = new String("abc");
        alert(typeof y); //"object"
        alert(x.length); //6
        alert(y.length); //3
    </script>

Object类型

Object类是所有类的超类

Object类包含那些属性？
prototype属性（主要的）
constructor属性

在JS中怎么定义类？怎么new对象？

第一种方式:
function 类名(形参列表){
    
}
第二种方式:
类名=function(形参列表){
    
}

<script type="text/javascript">
        function Student() {
            alert("Student...");
        }
        //当做普通函数调用
        Student(); //Student...
        //当做类来创建对象
        var stu = new Student(); //Student...
        alert(stu); //[object Object]
    </script>

在JS中类的定义，同时又是个构造函数的定义，类的定义和构造函数的定义是放在一起完成的

<script type="text/javascript">
        function User(a, b, c) {
            this.sno = a;
            this.sname = b;
            this.sage = c;
        }
        var u1 = new User(111, "zhangsan", 30);
        //访问对象的属性有两种方式
        alert(u1.sno);//111
        alert(u1["sname"]);//zhangsan
        alert(u1["sage"]);//30        
        //调用对象的函数
        var age = u1.getAge();
        alert(age);//30
    </script>

prototype可以给任何类（甚至String类）扩展属性和函数

        //通过prototype属性给类扩展属性和函数
        User.prototype.getName = function () {
            return this.sname;
        }
        alert(u1.getName());//zhangsan

null、NaN、undefined的区别

以及和=的区别

<script type="text/javascript">
        //数据类型不同
        alert(typeof null);//object
        alert(typeof NaN);//number
        alert(typeof undefined);//undefined
        //null和undefined可以等同,==是等同运算符只比较值
        alert(null == NaN);//false
        alert(null == undefined);//true
        alert(undefined == NaN);//false
        //===是全等运算符,比较值和数据类型
        alert(null === undefined);//false
        alert(1 == true);//true
        alert(1 === true);//false
    </script>

JS的事件

常用事件

JS中的事件
任何一个事件都会有句柄，事件前添加on
onXXX这个事件句柄出现在一个标签的属性上

blur失去焦点
focus获得焦点（对不起老师一句福克斯实在忍不住笑了）

click鼠标单击
dbclick鼠标双击

keydown键盘按下
keyup键盘弹起

mousedown鼠标按下
mouseup鼠标弹起
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开

reset表单重置
submit表单提交

change下拉列表中选项改变

select文本被选定

load页面加载完毕（整个HTML页面中所有元素全部加载完毕后发生）

事件的注册方式

什么是window
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j2a4E6J-1667932172873)(en-resource://database/516:1)]
什么是document
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3104fp6U-1667932172874)(en-resource://database/518:1)]

<script type="text/javascript">
        //该函数称为回调函数，不是自己调用
        function sayHello() {
            alert("Hello");
        }
    </script>
    <!--注册事件的第一种方式，直接在标签中使用事件句柄-->
    <input type="button" value="hello" onclick="sayHello()" />
    <!--第二种方式，使用纯JS代码完成事件的注册-->
    <input type="button" value="hello2" id="mybtn" />
    <input type="button" value="test" id="mybtn1" />
    <script type="text/javascript">
        //通过id获取element注册事件
        var btnObj = document.getElementById("mybtn");
        btnObj.onclick = sayHello; //不能加小括号!!!!!!
        //匿名函数也可以作为回调函数    
        document.getElementById("mybtn1").onclick = function () {
            alert("test......");
        }
    </script>

JS代码的执行顺序

判断以下代码是否会执行？

<body>
    <script type="text/javascript">
       //事件绑定失败，因为button还未加载到内存
        document.getElementById("mybtn1").onclick = function () {
            alert("test......");
        }
    </script>
    <input type="button" value="test" id="mybtn1" />
</body>

如何修改？
给窗口绑定一个onload事件，等所有元素加载完成，再注册事件

<body>
    <script type="text/javascript">
        window.onload = ready;//等待页面加载完成后，调用ready()，也可以直接在body中绑定onload事件
        function ready() {
            document.getElementById("mybtn1").onclick = function () {
                alert("test......");
            }
        }
    </script>
    <input type="button" value="test" id="mybtn1" />
</body>

节点存在的属性都可以修改

<body>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("mybtn").onclick = function () {
                var mytext = document.getElementById("mytext");
                //节点对象存在的属性都可以更改
                mytext.type = "checkbox";
            }
        }
    </script>
    <input type="text" id="mytext" />
    <input type="button" value="将文本框修改为复选框" id="mybtn" />
</body>

回调函数的事件参数(以键盘事件为例)

回车键是13，ESC键是27
回调函数会默认有一个事件参数

1、回调函数实际上是浏览器调用函数（用户操作是某个事件发生后，浏览器调用回调函数）
2、浏览器在调用函数的时候会传入一个参数（事件对象）

对于键盘对象来说，都会有keycode属性获取键值

window.onload = function () {
            document.getElementById("username").onclick = function () {
                var usernameElt = document.getElementById("username");
                usernameElt.onkeydown = function (event) {
                    alert(event);//[object KeyboardEvent] 这里是一个键盘事件
                    alert(event.key + "," + event.keyCode);
                    if (event.ctrlKey) {
                        alert("是ctrl键");
                    } else {
                        alert("不是ctrl键");
                    }
                    if (event.keyCode == 13) {
                        alert("正在登陆...");
                    }
                }
            }
        }

零碎的知识点

void运算符

void运算符的语法：void(表达式) 小括号里必须有表达式
运算原理：执行表达式，但不返回任何结果，既不是返回的null也不是返回的""
以下案例void常用：javascript:void(0)

<body>
    <h1>顶部</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="javascript:void(0)" onclick="window.alert('test code...')">
        既保留超链接的样式,同时用户点击该超链接时执行一段JS代码,但页面不能跳转
    </a>
</body>

JS的控制语句

与java的相同

if
switch

while
do…while
for

break
continue

多出的2个（了解就行，基本不用）

for…in
with

//创建JS数组,JS数组中元素的类型随意，元素的个数随意
        var arr = [1, 2, false, true, 3.14, "abc", undefined];
        //遍历数组
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i]);
        }

for…in…语句

//for...in语句 遍历数组时i为下标不是元素
        for (var i in arr) {
            alert(arr[i]);
        }

User = function (username, password) {
            this.username = username;
            this.password = password;
        }
        var u = new User("zhangsan", "333");
        //这里i是属性名
        for (var i in u) {
            alert(i);//username password
            alert(typeof i);//string string
            alert(u[i]);//zhangsan 333
        }

with语句，没什么用，可读性差

//with语句，自动在前面加上u.
        with (u) {
            alert(username + "," + password);
        }

DOM编程

Document Object Model（文档对象模型：对网页当中的节点进行增删改查的过程）HTML文档被当做一棵DOM树来看待。
var domObj = document.getElementById(“id”)

获取和修改文本框的value

标签有什么属性就能用点符号获取该属性或者修改

<body>
    <script type="text/javascript">
        window.onload = function () {
            window.document.getElementById("btn").onclick = function () {
                var mytext = document.getElementById("username");
                //标签有什么属性就能用.符号获取该属性或者修改
                alert(mytext.value);
                mytext.value = "修改后的value";
            }
        }
    </script>
    <input type="text" id="username" />
    <input type="button" value="获取文本框的value" id="btn" />
</body>

blur事件
this表示当前的element对象

<script type="text/javascript">
        window.onload = function () {
            window.document.getElementById("username").onblur=function(){
                alert(this.value);
            }        
        }
    </script>
    <input type="text" id="username" />

this表示当前的input节点对象

    <input type="text" id="username" onblur="alert(this.value)" />

innerHTML和innerText操作div和span

innerHTML和innerText都是为了设置元素内部的内容
不同点是innerHTML可以把后面的"用户名不能为空！"当做一段代码执行
而innerText不可以

<head>
    <meta charset="utf-8">
    <title>JS</title>
    <style type="text/css">
        #div1 {
            background-color: aquamarine;
            width: 300px;
            height: 300px;
            border: 1px black solid;
            /*solid表示实线*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var divElt = document.getElementById("div1");
                //divElt.innerHTML="asdfghjasdasdask";
                divElt.innerHTML="<font color='red'>用户名不能为空！";
                divElt.innerText="<font color='red'>用户名不能为空！";
            }
        }
    </script>
    <input type="button" value="设置div中的内容" id="btn" />
    <div id="div1"></div>
</body>

关于正则表达式

字符	含义	字符	含义
.	匹配除换行符以外的任意字符	\w	匹配字母、数字、下划线、汉字
\s	匹配任意的空白符	^	匹配字符串的开始
\d	匹配数字	$	匹配字符串的结束
\b	匹配单词的开始或结束
*	重复零次或更多次	+	重复一次或更多次
？	重复零次或一次	{n}	重复n次
{n，}	重复n次或更多次	{n，m}	重复n到m次
\W		\S
\D		\B
[^]		[^abc]

常用的正则表达式

         //1.QQ号的正则表达式
        ^[1-9][0-9]{4,}$
        //2.邮箱
        ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

JS中如何创建正则表达式

第一种
var regExp = /正则表达式/flags；
第二种：使用内置类RegExp
var regExp = new RegExp（“正则表达式”,“flags”）；

关于flags

g：全局匹配
i：忽略大小写
m：多行搜索。当前面是普通字符串的时候，m才能使用
正则表达式对象的test()方法

<script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var email = document.getElementById("email").value;
                var emailRegExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (emailRegExp.test(email)) {
                    document.getElementById("emailError").innerHTML = "<font color='green' size=24px>合法";
                } else {
                    document.getElementById("emailError").innerHTML = "<font color='red' size=24px>不合法";
                }
            }
            document.getElementById("email").onfocus = function () {
                document.getElementById("emailError").innerHTML = "";
                document.getElementById("emailError").innerHTML = "<font color='blue' size=6px>合法or不合法";
            }
        }
    </script>
    <input type="text" id="email" /><br>
    <!--<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。-->
    <h6>这是一个<span id="emailError" style="color: blue">合法or不合法</span>的邮箱</h6>
    <input type="button" value="验证邮箱" id="btn" />

扩展字符串中的trim函数

作用：去除字符串的前后空格

<body>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("btn").onclick = function () {
                var username = document.getElementById("username").value;
                alert("-->" + username.trim() + "<--");
            }
        }
    </script>
    <input type="text" id="username" /><br>
    <input type="button" value="去除前后空格" id="btn" />
</body>

存在一个问题：IE8不支持字符串的trim（）函数，怎么办？
答案：使用prototype给字符串扩展函数，会覆盖掉自身的trim函数

        String.prototype.trim = function () {
            return this.replace(/^\s+/, "").replace(/\s+$/, "");
        }

表单验证案例

自己写的初始版，很难看且垃圾


<body>
    <script type="text/javascript">
        window.onload=function(){
            document.getElementById("btn").onclick=function(){
                var username=document.getElementById("username").value;
                var usernameReg=/^[0-9a-zA-Z]{6,14}$/;
                var email=document.getElementById("email").value;
                var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(username==""){
                    document.getElementById("usernameSpan").innerText="用户名不能为空";
                }else if(!usernameReg.test(username)){
                    document.getElementById("usernameSpan").innerText="用户名只能由数字和字母组成且长度在6-14位之间";
                }else if(document.getElementById("password1").value!=document.getElementById("password2").value){
                    document.getElementById("passwordSpan").innerText="确认密码和密码必须一致";
                }else if(!emailReg.test(email)){
                    document.getElementById("emailSpan").innerText="邮箱地址不合法";
                }else{
                    alert("表单提交成功!");
                }
            }
            document.getElementById("username").onfocus=function(){
                document.getElementById("username").value="";
                document.getElementById("usernameSpan").innerText="";
            }
            document.getElementById("password1").onfocus=function(){
                document.getElementById("password1").value="";
                document.getElementById("passwordSpan").innerText="";
            }
            document.getElementById("password2").onfocus=function(){
                document.getElementById("password2").value="";
                document.getElementById("passwordSpan").innerText="";
            }
            document.getElementById("email").onfocus=function(){
                document.getElementById("email").value="";
                document.getElementById("emailSpan").innerText="";
            }
        }
    </script>
    <!--form应该用post 这里用get只是便于验证-->
    <form action="http://localhost:8080/jd/save" method="get">
        用户名:  
        <input type="text" id="username" /><span id="usernameSpan" style="color: red;font: size 12px;"></span><br>
        邮箱地址:
        <input type="text" id="email" /><span id="emailSpan" style="color: red;font: size 12px;"></span><br>
        密码:  
        <input type="password" id="password1" /><br>
        确认密码:
        <input type="password" id="password2" /><span id="passwordSpan" style="color: red;font: size 12px;"></span><br>
        <input type="button" value="提交" id="btn" />
    </form>

老师的版本，有几个关键的地方，利用span的提示信息判断是否输入错误、手动调用focus和blur、如何手动调用form的submit事件

<head>
    <meta charset="utf-8">
    <title>表单验证</title>
    <style type="text/css">
        span {
            color: red;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var usernameElt = document.getElementById("username");
            var usernameErrorSpan = document.getElementById("usernameError");
            //光标移出
            usernameElt.onblur = function () {
                //获取username并去除前后空格
                var username = usernameElt.value.trim();
                if (username == "") {
                    usernameErrorSpan.innerText = "用户名不能为空";
                } else {
                    if (username.length < 6 || username.length > 14) {
                        usernameErrorSpan.innerText = "用户名的长度必须在6-14之间";
                    } else {
                        var regExp = /^[0-9a-zA-Z]+$/;
                        var ok = regExp.test(usernameElt.value);
                        if (ok) {
                        } else {
                            usernameErrorSpan.innerText = "用户名必须由数字和字母组成";
                        }
                    }
                }
            }
            //光标移回去
            usernameElt.onfocus = function () {
                //不合法，聚焦光标才清空，很妙，亮点1
                if (usernameErrorSpan.innerText != "") {
                    usernameElt.value = "";
                }
                usernameErrorSpan.innerText = "";
            }
            var userpwd2Elt = document.getElementById("userpwd2");
            var pwdErrorSpan = document.getElementById("pwdError");
            userpwd2Elt.onblur = function () {
                var userpwdElt = document.getElementById("userpwd");
                var userpwd = userpwdElt.value;
                var userpwd2 = userpwd2Elt.value;
                if (userpwd != userpwd2) {
                    pwdErrorSpan.innerText = "确认密码和密码必须一致";
                }
            }
            userpwd2Elt.onfocus = function () {
                if (pwdErrorSpan.innerText != "") {
                    userpwd2Elt.value = "";
                }
                pwdErrorSpan.innerText = "";
            }
            var emailElt = document.getElementById("email");
            var emailErrorSpan = document.getElementById("emailError");
            emailElt.onblur = function () {
                var regExp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if (!regExp.test(emailElt.value)) {
                    emailErrorSpan.innerText = "邮箱地址不合法";
                }
            }
            emailElt.onfocus = function () {
                if (emailErrorSpan.innerText != "") {
                    emailElt.value = "";
                }
                emailErrorSpan.innerText = "";
            }
            //给提交表单绑定鼠标单击事件,为什么要这样，因为防止信息输入错误还能提交
            var submitBtnElt = document.getElementById("submitBtn");
            submitBtnElt.onclick = function () {
                //手动触发所有的blur事件，否则当不触发blur事件也能提交，亮点2
                usernameElt.focus();
                usernameElt.blur();
                userpwd2Elt.focus();
                userpwd2Elt.blur();
                emailElt.focus();
                emailElt.blur();
                var formElt = document.getElementById("userForm");
                if (usernameErrorSpan.innerText == "" && pwdErrorSpan.innerText == "" && emailErrorSpan.innerText == "") {
                    formElt.submit();
                }
            }
        }
    </script>
    <!--form应该用post 这里用get只是便于验证-->
    <form id="userForm" action="http://localhost:8080/jd/save" method="get">
        用户名:
        <input type="text" name="username" id="username" /><span id="usernameError"></span><br>
        密码：
        <input type="text" name="userpwd" id="userpwd" /><br>
        确认密码：
        <input type="text" name="userpwd2" id="userpwd2" /><span id="pwdError"></span><br>
        邮箱:
        <input type="text" name="email" id="email" /><span id="emailError"></span><br>
        <!-- <input type="submit" value="注册" /> -->
        <input type="button" value="注册" id="submitBtn" />
        <input type="reset" value="重置" />
    </form>
</body>

复选框的全选和取消全选

<body>
    <script type="text/javascript">
        window.onload = function () {
            var qxkElt = document.getElementById("qxk");
            var hobbyElts = document.getElementsByName("hobby");
            qxkElt.onclick = function () {
                for (var i = 0; i < hobbyElts.length; i++) {
                    hobbyElts[i].checked = qxkElt.checked; //关键
                }
            }
            //循环注册事件
            var all = hobbyElts.length;
            for (var i = 0; i < hobbyElts.length; i++) {
                hobbyElts[i].onclick = function () {
                    //总量和选中的数量相等的时候，第一个复选框也被选中
                    var checkedCount = 0; //关键的地方
                    for (var i = 0; i < hobbyElts.length; i++) {
                        if (hobbyElts[i].checked) {
                            checkedCount++;
                        }
                    }
                    // if (checkedCount == all) {
                    //     qxkElt.checked = true;
                    // }
                    qxkElt.checked = (all == checkedCount);
                }
            }
        }
    </script>
    <input type="checkbox" id="qxk" /><br>
    <!--全选操作-->
    <input type="checkbox" name="hobby" value="play" />玩<br>
    <input type="checkbox" name="hobby" value="basketball" />篮球<br>
    <input type="checkbox" name="hobby" value="sing" />唱歌<br>
</body>

获取下拉列表选中项的value

<body>
    <script type="text/javascript">
        window.onload=function(){
            var provinceListElt=document.getElementById("provinceList");
            provinceListElt.onchange=function(){
                alert(this.value);
            }
        }
    </script>
    <select id="provinceList">
        <option value="">请选择省份</option>
        <option value="001">河北省</option>
        <option value="002">河南省</option>
        <option value="003">山东省</option>
        <option value="004">山西省</option>
    </select>
</body>

周期调用函数setInterval

如何显示网页时钟
利用JS中内置的Date类，可以获取日期，时间

        //获取系统当前时间
        var nowTime=new Date();
        //输出
        //document.write(nowTime);
        //转换为具有本地语言环境的日期格式
        nowTime=nowTime.toLocaleString();
        document.write(nowTime)
        document.write("<br>");
        document.write("<br>"); //换行
        //也可以获取年月日等信息，自己写格式
        var t=new Date();
        var year=t.getFullYear(); //返回的是年信息
        var month=t.getMonth(); //返回的是0-11
        var day=t.getDate(); //返回的是日
        document.write(year+"年"+month+"月"+day+"日");
        //获取毫秒数,一般会用作时间戳
        document.write("<br>");
        document.write("<br>"); //换行
        var times=t.getTime();
        document.write(times);

在网页里显示系统时间
以下错误示范，Error显示displayTime is not defined，尚未解决

<body>
    <script type="text/javascript">
        window.onload = function () {
            var btnElt = document.getElementById("btn");
            btnElt.onclick = start;
            function displayTime() {
                var time = new Date();
                time = time.toLocaleString();
                document.getElementById("time").innerHTML = time;
            }
            function start() {
                //每隔1秒自动调用display函数
                window.setInterval("displayTime()", 1000);
            }
        }
    </script>
    <input type="button" value="显示系统时间" id="btn" />
    <div id="time"></div>
</body>

以下为正确示例，
setInterval( )函数，返回值传递给clearInterval( )可以取消调用

<body>
    <script type="text/javascript">
        function displayTime() {
            var time = new Date();
            time = time.toLocaleString();
            document.getElementById("time").innerHTML = time;
        }
        function start() {
            //每隔1秒自动调用display函数
            v = window.setInterval("displayTime()", 1000); //全局变量不加var
        }
        function stop() {
            window.clearInterval(v);
        }
    </script>
    <input type="button" value="显示系统时间" onclick="start()" />
    <input type="button" value="停止" onclick="stop()" />
    <div id="time"></div>
</body>

BOM编程

Browser Object Model（浏览器对象模型）
关闭浏览器窗口、打开新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程

DOM和BOM的区别和联系？
BOM的顶级对象是window
DOM的顶级对象是document
BOM包含DOM

window的open和close

<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com')" />
    <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com','_self')" />
    <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com','_blank')" />
    <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com','_parent')" />
    <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com','_top')" />
    <input type="button" value="关闭当前窗口" onclick="window.close()" />

弹出确认框

window.comfirm()，有返回值

    <script type="text/javascript">
        function del(){
            var ok=window.confirm("确认删除吗?");
            alert(ok);//确定是true,取消是false
        }
    </script>
    <input type="button" value="弹出消息框" onclick="window.alert('消息框')" />
    <input type="button" value="弹出确认框（删除）" onclick="del()" />

将当前窗口设置为顶级窗口

问题：什么是顶级窗口
004.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将当前窗口设置为顶级窗口</title>
</head>
<body>
    <script type="text/javascript">
        //如果当前窗口不是顶级窗口，就设置为顶级窗口
    </script>
    <iframe src="005.html" width="500px" height="500px"></iframe>
</body>
</html>

005.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>005页面</title>
</head>
<body>
    005page
    <script type="text/javascript">
        function setTop(){
            //window代表当前浏览器窗口,代表005.html
            //控制台输出
            //console.log((window.top!=window.self));
            if(window.top!=window.self){
                //window.top就是当前窗口对应的顶级窗口，代表004.html
                //window.self是当前自己这个窗口
                window.top.location=window.self.location;
            }
        }
    </script>
    <input type="button" value="如果当前窗口不是顶级窗口，就设置为顶级窗口" onclick="setTop()" />
</body>
</html>

history对象

后退网页，前进网页

007-history.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>history对象</title>
</head>
<body>
    <a href="007.html">007页面</a>
    <input type="button" value="前进" onclick="window.history.go(1)" />
</body>
</html>

007.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>007页面</title>
</head>
<body>
    007page
    <input type="button" value="后退" onclick="window.history.back()" />
    <input type="button" value="后退" onclick="window.history.go(-1)" />
</body>
</html>

设置浏览器的URL地址

主要是学会用location

<body>
    <script type="text/javascript">
        function goBaidu(){
            var locationObj=window.location;
            locationObj.href="http://www.baidu.com";
            //以下方式都可以
            window.location.href="http://www.baidu.com";
            window.location="http://www.baidu.com";
            document.location.href="http://www.baidu.com";
            document.location="http://www.baidu.com";
        }
    </script>
    <input type="button" value="百度" onclick="goBaidu()" />
</body>

总结：有哪些方法可以通过浏览器网服务器发送请求

表单form，动态地传输数据
超链接
documen.location
window.location
window.open(‘url’)
浏览器地址栏手动后输入

JSON

什么是JSON

JavaScript Object Notation，简称JSON。（数据交换格式）
JSON主要的作用是：一种标准的数据交换格式。（两个系统之间交换数据通常都采用JSON）

两种数据交换格式

JSON：轻量级，体积小，容易解析
XML：体积大，解析麻烦，优点是语法严谨（通常银行相关的系统会用）

JSON对象的创建和访问

创建JSON对象用大括号
访问有2种方式，用 . 或 [ ]

    <script type="text/javascript">
        //创建JSON对象(JSON也可以称为无类型对象，没有类型)
        var studentObj = {
            "sno": "110",
            "sname": "张三",
            "sex": "男"
        };
        //访问JSON对象的属性
        alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
        //JSON数组
        var students=[
            {"sno":"110","sname":"张三","sex":"男"},
            {"sno":"120","sname":"李四","sex":"女"},
            {"sno":"130","sname":"王五","sex":"男"},
        ]
        //遍历JSON数据
        for(var i=0;i<students.length;i++){
            alert(students[i].sno + "," + students[i].sname + "," + students[i].sex);
        }
    </script>

更复杂一点的JSON对象
让我想起之前爬weibo的时候…How big can data be ?

<script type="text/javascript">
        //比较复杂的JSON对象
        var user = {
            "usercode": 110,
            "username": "张三",
            "sex": true,
            "address": {
                "city": "北京",
                "street": "朝阳区",
                "zipcode": "111111"
            },
            "hobby": ["唱", "跳", "rap"]
        }
        //访问人名及居住的城市
        alert(user.username + "居住在" + user.address.city);
    </script>

eval函数

eval函数的作用是：将字符串当做一段JS代码解释并执行

实际开发中的应用：
java连接数据库，查询数据后，将数据在java程序中拼接成JSON格式的字符串，将JSON格式的字符串响应到浏览器，也就是说java传给浏览器的仅仅是一个“JSON格式的字符串”，还不是一个JSON对象
可以使用eval函数，将JSON格式的字符串转换成JSON对象

<script type="text/javascript">
        //下面相当于var i = 100;
        window.eval("var i=100;");
        alert("i = " + i);
    </script>

实际应用
又回到开头介绍了，JSON是数据交换格式

<script type="text/javascript">
        //接收字符串
        var fromJava = "{\"name\":\"张三\",\"password\":\"123\"}";
        //将字符串转换为json对象
        window.eval("var jsonObj = " + fromJava);
        //访问json对象
        alert(jsonObj.name + "," + jsonObj.password);//张三,123
    </script>

设置table的tbody

主要是拼接字符串，拼成html格式，然后利用innerHTML

<body>
    <script type="text/javascript">
        //以下json数据
        var data = {
            "total": 4,
            "emps": [
                { "empno": 1000, "ename": "smith", "sal": 800.0 },
                { "empno": 1000, "ename": "smith", "sal": 800.0 },
                { "empno": 1000, "ename": "smith", "sal": 800.0 },
                { "empno": 1000, "ename": "smith", "sal": 800.0 },
            ]
        }
        //希望把json数据展示到table中
        window.onload = function () {
            var displayBtnElt = document.getElementById("displayBtn");
            displayBtnElt.onclick = function () {
                var emps = data.emps;
                //拼接字符串
                var html = "";
                for (var i = 0; i < emps.length; i++) {
                    var emp = emps[i];
                    html += "<tr>";
                    html += "<td>" + emp.empno + "</td>";
                    html += "<td>" + emp.ename + "</td>";
                    html += "<td>" + emp.sal + "</td>";
                    html += "<tr>";
                }
                //放进tbody中
                document.getElementById("empTbody").innerHTML = html;
                document.getElementById("count").innerHTML = data.total;
            }
        }
    </script>
    <input type="button" value="显示员工信息列表" id="displayBtn" /><br>
    <h2>员工信息列表</h2>
    <hr>
    <!--显示一条水平线，分割文档-->
    <table border="1px" width="50%">
        <tr>
            <th>员工编号</th>
            <th>员工名字</th>
            <th>员工薪资</th>
        </tr>
        <tbody id="empTbody">
            <!-- <tr>
                <td>员工编号</td>
                <td>员工名字</td>
                <td>员工薪资</td>
            </tr>
            <tr>
                <td>员工编号</td>
                <td>员工名字</td>
                <td>员工薪资</td>
            </tr>
            <tr>
                <td>员工编号</td>
                <td>员工名字</td>
                <td>员工薪资</td>
            </tr> -->
        </tbody>
    </table>
    总共<span id="count">0</span>条数
</body>