JavaScript（杜）_编写javascript程序实现单击列表框任一选项时,通过告警消息框显示教材名称及定价-CSDN博客

本文是JavaScript的基础教程，涵盖了JS在HTML中的嵌入、变量、函数、数据类型、常用事件、DOM和BOM编程等内容。讲解了JS作为浏览器中的脚本语言的特性，如变量的弱类型、函数定义及数据类型的区分，还介绍了事件处理和对象模型操作，包括正则表达式、表单验证和JSON的使用。

JavaScript（杜）

什么是javascipt，有什么用？

javascript是运行在浏览器上的脚本语言，简称JS

Java运行在JVM当中，JavaScript运行在浏览器的内存当中

JavaScript程序不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。

JavaScript的”目标程序“以普通文本形式保存，这种语言都叫做”脚本语言“

java的目标程序以.class形式存在，不能使用文本编辑器打开，不是脚本语言

JSP：JavaServer Pages(隶属于java语言，运行在JVM当中)

JS：JavaScript(运行在浏览器上)

JS代码的注释和java是一样的

html中嵌入JS代码

共有三种方式

第一种

<!doctory html>
<html>
    <head>
        <title>js</title>     
    </head>
	
    <body>
	<!--
		1.要实现的功能：用户点击以下按钮，弹出消息框
		
		2.JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序
		在JS中有很多的事件，其中有一个事件叫做：鼠标单击，单词：click。
		并且任何事件都会对应一个事件句柄叫做：onclick。而事件句柄是以HTML
		标签的属性存在的
		
		3.οnclick="js代码"，执行原理是什么？
		页面打开的时候，js代码并不会执行，只是把这段js代码注册到了按钮的click事件上
		等这个按钮发生click事件之后，注册在onclick后的js代码会被浏览器自动调用
		
		4.怎么使用JS代码弹出消息框？
			在JS中有一个内置的对象叫做window（可以看成一个界面），全部小写，可以直接拿来使用，window代表的是浏览器对象
			window对象有一个函数叫做：alert，用法是：window.alert("消息");这样就可以弹窗了
			
		5.JS当中的字符串可以使用双引号，也可以使用单引号
		
		6.JS当中的一个语句结束之后可以使用（分号：;），也可以不写但是需要换行
		7. window.  可以省略不写
	-->
        <input type="button" value="一按钮" onclick="window.alert('hello world');
		window.alert('hello lis');"/>
		
		<input type="button" value="二按钮" onclick="alert('hello world');alert('hello lis');"/>
		
    </body>
</html>

第二种：

<!doctype html>
<html>
    <head>
        <title>js</title>
    </head>
    <body>
        <!--第二种方式：脚本块的方式-->
        <!--javascript的脚本块在一个页面当中可以出现多次，没有要求，Javascript的脚本块出现位置也没有要求，随意在那里都能执行-->
        <script type="text/javascript">
             /*
             	暴露在脚本块当中的程序，在页面打开的时候执行，并且遵循自上而下的顺序依次逐行执行（这个代码执行不需要事件）
                 */
                 //alert有阻塞当前页面加载的作用，一直到用户点击确定按钮，页面的剩余部分才会显示
             window.alert("hello world");
        </script>
        <input type="button" value="按钮"/>
    </body>
</html>

第三种

在外部创建一个.js文件，在需要使用的地方引用即可，引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行

window.alert("hello");

一个html中可以同时存在这三种方式

<!doctype html>
<html>
    <head>
        <title>js</title>
    </head>
    <body>
        <!--在需要的位置引入js脚本文件-->
       <script type="text/javascript src="js/1.js"></script>
        <!--
			需要注意，下面的这种方式的格式是有问题的，不能省略
                                                  			<script type="text/javascript" src="js/1.js" />
            如果是引入外部文件，然后在js代码块中写的代码是不会执行的
            <script type="text/javascript" src="js/1.js">
            //这里的不会执行
			window.alert("hell");
			</script 
			-->                                      
    </body>
</html>

js中的变量

回顾Java中的变量

java中怎么定义/声明变量？

数据类型变量名;

java中的变量怎么赋值？

使用（=）运算符进行赋值运算，等号右边先执行，然后将结果赋值给左边的变量

javascript怎么声明变量

var 变量名；

怎么给变量赋值

变量名 = 值；

javascript是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，什么类型的都可以

重点：javascript是以一种弱类型编程语言，java是一种强类型编程语言

在JS当中，当一个变量没有手动赋值的时候，系统默认赋值 undifined

undifined 是一个值

如果一个变量没有声明，直接使用，就会报错

JS的局部变量和全局变量

<!doctype html>
<html>
    <head>
        <title>haha</title>
    </head>
    <body>
        <!--
全局变量：在函数体之外声明的变量属于全局变量，全局变量的生命周期是：浏览器打开时声明，浏览器关闭时销毁，尽量少用，因为全局变量会一直在浏览器的内存当中，耗费内存
局部变量：在函数体当中声明的变量，包括要给的形参都属于局部变量，局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放，局部变量的声明周期较短
-->
        <script type="text/javascript">
            //全局变量
            var i = 1oo;
            function acc(){
                alert(i);
            }
            acc();
            
            //全局变量
            var name ="java";
            function haha(){
                var name = "php";
                //就近原则
                alert(name);
            }
            haha();
            alert(name);//这里是全局变量
            
            function myfun(){
                //如果一个变量没有使用var声明，那么不管这个这个变量是在那里声明的，这个变量就是全局变量
                myname = "dujubin";
            }
            //访问函数
            alert(myname);
        </script>
      	
    </body>
</html>

js的函数

JS当中的函数等同于Java语言当中的方法，函数也是一段可以被重复利用的代码片段，函数一般都是可以完成某个特定功能的

回顾Java当中的方法

[修饰符列表] 返回值类型方法名(形式参数列表){

方法体；

}

JS的函数怎么定义呢？

语法格式：

第一种方式：

function 函数名(形式参数列表){

函数体；

}

第二种方式：

函数名 = function(形式参数列表){

函数体；

}

JS中的函数不需要指定返回值类型，返回什么类型都行

函数必须手动调用才能执行

<!doctype html>
<html>
    <head>
        <title>haha</title>
    </head>
    <body>
        <script type="text/javascript">
            //函数必须手动调用才能执行
            function sum(a,b){
        //a和b都是局部变量，他们都是形参，并且不用写类型
        	window.alert(a+b);
        }
          	//sum(10,20);
            function sayHello(name){
                alert("hello "+name);
            }
            //sayHello("zhangsan");
        </script>
      	<input type="button" value="hello" onclick="sayHello('jack');" />
        <input type="button" value="计算和" onclick="sum(10,20);" />
    </body>
</html>

<!doctype html>
<html>
    <head>
        <title>haha</title>
    </head>
    <body>
        <script type="text/javascript">
            //函数必须手动调用才能执行
            function sum(a,b){
        //a和b都是局部变量，他们都是形参，并且不用写类型
        	window.alert(a+b);
        }
            //jack赋值给a变量，b变量m有赋值系统默认赋值undefined
          	sum("jack");//jackundefined
            //都不赋值
            sum();//NaN(NaN是一个具体的值，表示该值不是数字)
            sum(1,2,3)//1+2=3,只会取前面两个，后面的没有用
            
            function test1(name){
                alert("test1");
            }
            function test1(){
                alert("tset1test1tset1");
            }
            //这个调用的是第二个函数，在js当中，同名函数，会被后面的覆盖，在内存当中，前面的同名函数会被除去
            //所以注意，JS当中，函数的名字不能重名
            test1("zhangsan");
            
        </script>
      	
    </body>
</html>

JS的数据类型

虽然JS中的变量在声明的时候不需要指定数据类型，但是在赋值，每一个数据还是有类型的，所以需要学习JS包括哪些类型

JS中数据类型有：原始类型，引用类型

ES6版本之前的数据类型有6种：Undefined,Number,String,Null,Boolean,Object

原始类型：Undefined,Number,String,Boolean,Null

引用类型：

Object 以及Object的子类

ES6版本及之后包括的数据类型有七种，相比上面六种，还多一种： Symbol

JS当中有一个运算符叫做 typeof，这个运算符可以在程序的运行阶段动态的获取变量的数据类型

typeof 运算符的语法格式： typeof 变量名;

typeof运算符的运算结果是以下6个字符串之一：注意字符串都是全部小写：“undefined”,“number”,“string”,“boolean”,“object”,“function”

只能使用 == 比较

需要特别说明：Null 数据类型，匹配的类型是Object

<!doctype html>
<html>
    <head>
        <title>haha</title>
    </head>
    <body>
        <script type="text/javascript">
             function sum(a,b){
                 if(typeof a == "number" && typeof b == "number"){
                     return a + b;
                 }
                 alert(a+","+b+"必须都是数字")
             }
            var retValue = sum(false,"abc");
            alert(retValue);//因为不符合规范，没有返回值，所以默认 undefined
            var retValue = sum(1,2);
            alert(retValue);
        </script>
      	
    </body>
</html>

undefined类型只有一个值，这个值就是undefined，当一个变量没有手动赋值，系统默认赋值undefined或者也可以给一个变量手动赋值undefined

number类型

<!doctype html>
<html>
    <head>
        <title>Number类型</title>
    </head>
    <body>
        <script type="text/javascript">
            //Number类型包括那些值？
            //整数，小数，正数，负数，不是数字(NaN)，无穷大(Infinity)都属于Number类型
            //关于NaN表示不是一个数字，但属于Number类型，什么情况下结果是一个NaN?运算结果本来应该是一个数字，最后算完不是一个数字的时候，结果就是NaN
            var a = 100;
            var b = "string";
            alert(a/b);//NaN
            
            var e = "abc";
            var f = 10;
            alert(e + f);//如果加号两边有字符串，优先按字符串拼接处理，abc10
            //Infinity(当除数为0的时候，结果是无穷大)
            alert(10/3);//3.3333333...
            //关于isNaN()函数
            //用法：isNaN(数据)，结果是true表示不是一个数字，结果是false表示是一个数字
            //is not a number
            function sum(a,b){
                if(isNaN(a) || isNaN(b)){
                    return;
                }
                return a+b;
            }
            alert(sum(1,"hsk"));//undefined
            
 
            //parseInt():可以将字符串自动转换为数字，并且只取整数部分
            alert(parseInt("3.999"));//3
            //parseFloat():可以将字符串自动转换为数字
            alert(parseFloat("3.2"));//3.2
            //Math.ceil():向上取整
            Math.ceil(3.2);//4
        </script>
    </body>
</html>

boolean类型：JS中的布尔类型，只有两个值：true,false

<!doctype html>
<html>
    <head>
        <title>Number类型</title>
    </head>
    <body>
        <script type="text/javascript">
            //在boolean类型中有一个函数叫做：Boolean()，语法格式：Boolean(数据)，作用是将非布尔类型转换为布尔类型
            var username= "";
            /*if(Boolean(username)){
                alert("欢迎你"+username);
            }else{
                alert("用户名不能为空");
            }*/
            if(username){//这里需要用到布尔类型但是不是，这里就会自动转换
                alert("欢迎你"+username);
            }else{
                alert("用户名不能为空");
            }
            //转换规则：有  就转换为  true  没有(0,"",null,nan,undefined...)  就转换为  false
        </script>
    </body>
</html>

string类型：

在JS当中字符串可以使用单引号，也可以使用双引号

在JS当中，怎么创建字符串对象呢？

两种方式：

第一种：var s = “abc”;

第二种（使用JS内置的支持类String）：var s1 = new String(“abc”);

需要注意的是：String 是一个内置的类，可以直接用，String的父类是Object

string类型的常用属性

length：获取字符串长度

string类型的常用函数(功能都和java中一样)

indexOf
lastIndexOf
replace
substr：截取子字符串
substring：截取子字符串
toLowerCase
toUpperCase
split

<!doctype html>
<html>
    <head>
        <title>Number类型</title>
    </head>
    <body>
        <script type="text/javascript">
            var a = "sljfl";
            alert(typeof a);//string
            var b = new String("kjk");
            alert(typeof b);//object
            //上面两种方式创建的string类，他们的属性和函数都是通用的
            alert(a.length);
            alert(b.length);
            //判断要给字符串是否包含某个子字符串？
            alert("httpL//www.baidu.com".indexOf("https")? "包含":"不包含");
           //注意replace只会替换第一个，想要全部替换需要使用到正则表达式
            alert("name%jkl%hjdh".replace("%","&"));
            //经常问：substr和substring有什么区别
            alert("adkjfkl".substr(2,4));//[2,4+1]
            alert("adkjfkl".substring(2,4));//[2,4)左闭右开
        </script>
    </body>
</html>

object类型

object类型是所有类型的超类，自定义的任何类型，默认继承object

object包括以下属性

prototype属性（常用）：作用就是给类动态的扩展属性和函数
constructor属性

object类包括以下函数

toString()
valueOf()
toLocaleString()

在JS当中定义的类默认继承object，会继承object类中所有的属性以及函数

在JS当中怎么定义类，怎么new对象

定义类的语法有两种

第一种：

function 类名(形参){

}

第二种：

类名 = function(形参){

}

构建对象的语法

new 构造方法名(实参);//构造方法名和类名一致

在JS当中类的定义和构造函数的定义是放在一起来完成的

<!doctype html>
<html>
    <head>
        <title>Number类型</title>
    </head>
    <body>
        <script type="text/javascript">
            
            function SayHello(){
               
            }
            SayHello();//把sayHello当作一个普通的函数来调用
            var obj = new SayHello();//把sayHello当作一个类调用来创建对象，obj是一个引用，保存内存地址指向堆中对象
            
            //声明属性（this表示当前对象）
            //student类中有三个属性：sno/sname/sage
            function Student(a,b,c){//a,b,c是形参，属于局部变量
                this.sno = a;
                this.sname = b;
                this.sage = c;
            }
            //创建对象
            var u1 = new Student(11,"ZHANSAN",30);
            //访问属性,方式一
            alert(u1.sno);
            alert(u1.sname);
            alert(u1.sage);
            //访问属性,方式二
            alert(u1["sno"]);
            alert(u1["sname"]);
            alert(u1["sage"]);
            
        </script>
    </body>
</html>

<!doctype html>
<html>
    <head>
        <title>Number类型</title>
    </head>
    <body>
        <script type="text/javascript">
            Product = function(pno,pname,price){
                //属性
                this.pno = pno;
                this.pname = pname;
                this.price = price;
                //函数
                this.getPrice = function(){
                    return this.price;
                }
            }
            var pro = new Product(111,"西瓜",4);
            var pri = pro.getPrice();
            alert(pri);
            //可以通过prototype属性来给类动态扩展属性以及函数
            Product.prototype.getPanme = function(){
                return this.pname;
            }
            //调用后期扩展的getPname()函数
            var pname = pro.getPname();
            alert(pname);//可以正常使用
            
            //引出，给类扩展函数
            String.prototype.suiyi = function(){
                alert("这是给String扩展的一个函数，叫做suiyi");
            }
            
            "abc".suiyi();
        </script>
    </body>
</html>

null NaN undefined这三个值有什么区别

<!doctype html>
<html>
    <head>
        <title>Numbernull NaN undefined这三个值有什么区别</title>
    </head>
    <body>
        <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
            
            //在JS当中有两个比较特殊的运算符
            // ==(等同运算符，只判断值是否相等)
            // ===(全等运算符，既判断值是否相等，又判断数据类型是否相等)
            alert(null === NaN);//false
            alert(null === undefined);//false
            alert(undefined === NaN);//false
        </script>
    </body>
</html>

js当中的常用事件

blur失去焦点
focus获得焦点
change下拉列表中项改变，或文本框内容改变
click鼠标单击
dblclick鼠标双击
keydown键盘按下
keyup键盘弹起
load页面加载完毕
mousedown鼠标按下
mouseover鼠标经过
mousemove鼠标移动
mouseout鼠标离开
mouseup鼠标弹起
reset表单重置
select文本被选定
submit表单提交

任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on ，onXXX这个事件出现在一个标签的属性位置上（事件句柄以属性的形式存在）

<!doctype html>
<html>
    <head>
        <title>事件</title>
    </head>
    <body>
        <!--注册事件的第一种方式，直接在标签中使用onclick-->
        <input type="button" value="按钮" onclick="say()"/>
        <script type="text/javascript">
            
            function say(){
                alert("hello");
            }
        </script>
        <!--注册事件的第一种方式，直接在标签中使用onclick-->
        <input type="button" value="按钮" onclick="say()"/>
        
        <!--第二种注册事件的方式，是使用纯JS代码完成事件的注册-->
		<input type="button" value="nihao" id="button1" />
		<input type="button" value="world" id="button2" />
		<input type="button" value="java" id="button3" />
        <!--js代码需要写在id后面-->
		<script type="text/javascript">
            function doSome(){
                alert("nihao");
            }
            //第二种注册事件的方式，是使用纯JS代码完成事件的注册
            //第一步：先获取这个按钮对象
            //document:代表整个HTML页面
            var btnObj= document.getElementById("button1");
            //第二步：给按钮对象的onclick属性赋值
            btnObj.onclick= doSome;//注意不要加小括号，dosome()是错误的
			
			var mybtn1 = document.getElementById("button2");
            mybtn1.onclick = function(){//使用匿名内部类的方式
				alert("world");
			}
			
			document.getElementById("button3").onclick=function(){
				alert("直接一句话输出");//推荐这种方式
			}
        </script>
    </body>
</html>

需要注意的是：使用第二种方式来注册事件，js需要写在该id标签的后面，因为script的代码是加载时，自动执行的，如果id在后面，在加载时会找不到该id。但是可以使用load（页面全部加载完毕）事件来解决这个问题，

<!doctype html>
<html>
    <head>
        <title>事件</title>
    </head>
    <body onload="ready()">
        <script type="text/javascript">
            function ready(){
                document.getElementById("btn1").onclick=function(){
                    alert("你好，世界");
                }
            }
            
        </script>
        <input type="button" value="你好" id="btn1" />
    </body>
</html>

也可以下面这样写

<!doctype html>
<html>
    <head>
        <title>事件</title>
    </head>
    <body>
        <script type="text/javascript">
            /*window.onload = ready;//window表示出现的那个界面
            function ready(){
                document.getElementById("btn1").οnclick=function(){
                    alert("你好，世界");
                }
            }*/
            //页面加载的过程中，将a函数注册给了load事件
            //页面加载完毕之后，load事件发生了，此时执行回调函数a
            //回调函数a执行的过程中，把b函数注册给了id = "btn"的click事件
            //当id = "btn1"的节点发生click事件之后，b函数被调用并执行
            //后面推荐使用这种方式
            window.onload = function(){//函数a
                document.getElementById("btn1").onclick=function(){//函数b
                    alert("你好，世界");
            	}
            }
        </script>
        <input type="button" value="你好" id="btn1" />
    </body>
</html>

JS代码设置节点的属性

<!doctype html>
<html>
    <head>
        <title>事件</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                document.getElementById("btn").onclick=function(){
                    var mytext = document.getElementById("txt");
                    //一个节点对象中只要有的属性都可以(.)
                    mytext.type = "checkbox";
                }
            }
        </script>
        <input type="text" id="txt"/>
        <input type="button" value="将文本框修改为复选框" id="btn"/>
    </body>
</html>

JS代码捕捉回车键

<!doctype html>
<html>
    <head>
        <title>事件</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                var mytext = document.getElementById("txt").onkeydown=function(event){
                    //获取键值，回车键是13，ESC的键值是27
                    //对于键盘事件对象来说，都有keyCode属性用来获取键值
                    //alert(event);//[object KeyboardEvent]
                    //alert(event.keyCode);//每个按键对应的值
                    if(event.keyCode == 13){
                        alert("正在进行验证");
                    }
                    
                
            	}
            }
            
            
        </script>
        <input type="text" id="txt" />
        
    </body>
</html>

JS的 void 运算符

<!doctype html>
<html>
    <head>
        <title>JS的void运算符</title>
    </head>
    <body>
       页面顶部
        <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><br><br><br><br><br><br><br><br><br><br><br><br>
		<!--如果 href 后面不写路径，只有"" ,表示跳转到本页面-->
        <!--<a href="" οnclick="window.alert('执行代码')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转</a>-->
        <!--
		void运算符的语法：void(表达式)
		运算原理：执行表达式，但不返回任何结果
		javascript:   的作用是告诉浏览器后面是一段JS代码，是不能省略的-->
<a href="javascript:void(0)" onclick="window.alert('执行代码')">既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转</a>
    </body>
</html>

JS的控制语句

<!doctype html>
<html>
    <head>
        <title>JS的控制语句</title>
    </head>
    <body>
       <script type="text/javascript">
           /*
           1.if
           2.switch
           3.while
           4.do...while
           5.for循环
           6.break
           7.continue
           8.for...in语句（了解）
           9.with语句（了解）
           */
           //创建js的数组
           //js当中数组中的元素的类型随意，个数随意
           var arr = [false,1,"abc"];
           for(var i = 0;i<arr.length;i++){
               alert(arr[i]);
           }
           //for...in语句
           //这里的 i 是数组当中的元素索引
           for(var i in arr){
               alert(arr[i]);
           }
           //for...in语句可以遍历对象的属性
           function User(userName,userPwd){
               this.userName = userName;
               this.userPwd = userPwd;
           }
           var user = new User("张三","123");
           alert(user.userName+user.userPwd);
           alert(user[userName]+user[userPwd]);
           for(var shuxingming in user){
               //alert(shuxingming);
               //alert(typeof shuxingming)//"string"
               //这里不用加冒号，是因为 shuxingming 本来就是"string"类型
               alert(user[shuxingming]);
               
               alert(user.userName);
               //with语句中，可以先将引用写在（）中，后面会自动加上
               with(user){
                   alert(userName + "," + userPwd);
               }
           }
        </script>
    </body>
</html>

JS当中的三大块

ECMAScript：JS的核心语法
BOM：Browser Objet Model(浏览器对象模型)（一个页面中，工具栏及以上的位置）（关闭浏览器，打开一个新的浏览器窗口，后退，前进，浏览器地址栏上的地址等…）
Dom：Document Object Model(文档对象模型)（一个页面中，显示内容的位置，即BOM的下面）（对网页当中的节点进行增删改的过程）HTML文档被当作一颗DOM树来看待

DOM和BOM的区别

BOM的顶级对象是：window
DOM的顶级对象是：document
实际上BOM是包括DOM的

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>BOM和DOM</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
                //这里的window是可以省略的
                var btn = window.document.getElementById("btn").onclick=function(){
                    alert("hahah");
                }
            }
        </script>
        <input type="button" value="anniu" id="btn"/>
    </body>
</html>

DOM编程案例

获取文本框内容

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>DOM编程-获取文本框内容</title>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
               
                //这里的window是可以省略的
                var btn = window.document.getElementById("btn").onclick=function(){
                    //获取txt节点
                    /*var text1 = document.getElementById("txt");
                    var text2 = text1.value;
                    alert(text2);*/
					//alert(document.getElementById("txt").value);
					document.getElementById("txt1").value = document.getElementById("txt").value               
            }
        </script>
        <input type="text" id="txt"/>
        <input type="button" value="anniu" id="btn"/>
    </body>
</html>

innerHTML和innerText操作div和span

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>innerHTML和innerText操作div和span</title>
        <style>
            #div1{
                background-color:red;
                width:300px;
                height:300px;
                border:1px black solid;
                position:absolute;
                top:100px;
                left:100px;
            }
			#div2{
                background-color:red;
                width:300px;
                height:300px;
                border:1px black solid;
                position:absolute;
                top:500px;
                left:100px;
            }
        </style>
        
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
				document.getElementById("btn").onclick=function(){
					//alert(1111);
					//innerHTML和innerText属性有什么区别？
					//相同点：都是设置元素内部的内容
					//不同点：1.innerHTML 会把后面的字符串当作一段html代码解释并执行
					//		 2.innerText 即使后面是一段html代码，也是当作普通的字符串来看待
					//第一步：获取div对象
					var div1 = document.getElementById("div1");
					var div2 = document.getElementById("div2");
					//第二步：使用innerHTML属性来设置元素内部的内容
					div1.innerHTML = "<font color='yellow' >用户名不能为空</font>";
					//还有一种方式
					div2.innerText = "<font color='yellow' >用户名不能为空</font>";
				}
			}
        </script>
        
        <input type="button" value="设置div中的内容" id="btn"/>
        <div id="div1"></div>
		<div id="div2"></div>
    </body>
</html>

JS使用正则表达式

JS当中怎么创建正则表达式对象，怎么调用正则表达式对象的方法？

第一种创建方式

var regExp = /正则表达式/[flags];

第二种创建方式：使用内置支持类

var regExp = new RegExp(“正则表达式”,[“flags”]);

注意：[flags]，是可选的，表示匹配的范围

g：全局匹配
i：忽略大小写
m：多行搜索（当前面是正则表达式的时候，m 不能使用，只有前面是普通字符串的时候，m 才可以使用）

正则表达式对象的 test() 方法？

true/false = 正则表达式对象.test(用户填写的字符串);

true：表示匹配成功

false：表示匹配失败

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>JS当中的正则表达式</title>
        
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){
				//给文件框内容进行验证
                document.getElementById("btn").onclick=function(){                  
                    var regExp = new RegExp("^\\d{5,9}@com$");
                    var flag = regExp.test(document.getElementById("txt").value);
					if(flag){
						document.getElementById("span").innerText="邮箱合法";
					}else{
						document.getElementById("span").innerText="邮箱不合法";
					}
                }
				//给文本框绑定focus获取焦点事件
				document.getElementById("txt").onfocus=function(){
					document.getElementById("span").innerText="";
				}
            }
        </script>
        <input type="text" id="txt"/>
		<span id="span" style="color:red;font-size:12px;"></span>
		<br>
        <input type="button" value="验证邮箱" id="btn"/>
        
    </body>
</html>

JS当中表单验证

用户名不能为空
用户名必须在6-14位之间
用户名只能由数字和字母组成，不能含有其它符号（正则表达式）
密码和确认密码一致
统一失去焦点验证
错误提示信息统一在span标签中提示，并且要求字体12号，红色
文本框再次获取焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
最终表单中所有项合法方可提交

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>表单验证</title>
        <style type="text/css">
			span{
				color:red;
				font-size:12px;
			}
		</style>
    </head>
    <body>
		<script type="text/javascript">
			window.onload=function(){
				//对用户名的验证
				var t1 = document.getElementById("t1");
				var s1 = document.getElementById("s1");
				var flag = true;
				t1.onblur=function(){
					var regExp = /^[0-9a-zA-Z]{6,14}$/;
					var flag = regExp.test(t1.value);
					if(!flag){
						s1.innerText="验证失败";
						
						}
				}
				//用户名获得焦点
				t1.onfocus=function(){
					//对用户名的验证如果不合法，应该让其内容，清空
					if(s1.innerText != ""){
						t1.value = "";
					}
					//重新获得焦点都会清空span内容
					s1.innerText="";
				}
				//对密码进行验证
				var t3 = document.getElementById("t3");
				var s2 = document.getElementById("s2");
				t3.onblur=function(){
					if(document.getElementById("t2").value != t3.value){
						s2.innerText="验证失败";
						
					}
				}
				//确认密码获得焦点
				t3.onfocus=function(){
					//对密码的验证如果不正确，应该让确认密码内容，清空
					if(s2.innerText != ""){
						t3.value = "";
					}
					//重新获得焦点都会清空span内容
					s2.innerText="";
				}
				
				//给提交按钮绑定鼠标单继事件
				document.getElementById("btn").onclick=function(){
                    //主动触发所有焦点事件，防止在没有触发 控件 的情况下，提交
					t1.focus();
					t1.blur();
					
					t3.focus();
					t3.blur();
					
					if(s1.innerText == "" && s2.innerText == ""){
						document.getElementById("form1").submit();
					}
				}
			}
			
		</script>
        <form action="http://localhost:8080/sa/save" method="post" id="form1">
			用户名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="t1" name="name" /><span id="s1" ></span><br>
			密&nbsp;&nbsp;&nbsp;码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="t2" name="pwd" /><br>
			确认密码&nbsp;&nbsp;<input type="text" id="t3"/><span id="s2" ></span><br>
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="提交" id="btn">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" />
		</form>
        
    </body>
</html>

说明一下提交表单的一种方法

先把 submit 换成是 button
给表单设置 id 属性
在 onload 事件中，添加按钮点击事件
在按钮点击事件中，判断所有条件是否符合，如果符合就提交表单
表单有一个 submit 的方法，是用来提交表单的

复选框的全选和取消

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>复选框全选和取消</title>
        
    </head>
    <body>
		<script type="text/javascript">
			window.onload=function(){
				var c1 = document.getElementById("c1")
				var hobbys = document.getElementsByName("hobby");
				c1.onclick=function(){
					//根据name获取所有元素
					for(var i = 0;i<hobbys.length;i++){
							hobbys[i].checked = c1.checked;
						}
					/*if(c1.checked){
						//全选
						for(var i = 0;i<hobbys.length;i++){
							hobbys[i].checked = true;
						}
					}else{
						//全选
						for(var i = 0;i<hobbys.length;i++){
							hobbys[i].checked = false;
						}
					}*/
					
					
				}
				//对以上数组进行遍历
				var all = hobbys.length;
				//var checkedCount = 0;
				for(var i = 0;i<hobbys.length;i++){
					hobbys[i].onclick = function(){
						var checkedCount = 0;
						//alert(111);
						//总数量和选中的数量相等的时候，第一个复选框选中
						for(var i = 0;i<hobbys.length;i++){
							if(hobbys[i].checked){
								checkedCount++;
							}							
						}
						c1.checked = (all == checkedCount);
						/*if(all == checkedCount){
							c1.checked = true;
						}else{
							c1.checked = false;
						}*/
					}
				}
			}
		</script>
	
        <input type="checkbox" id="c1" /><br>
        <input type="checkbox" id="c2" name="hobby" value="smoke"/>抽烟<br>
		<input type="checkbox" id="c3" name="hobby" value="drink"/>喝酒<br>
		<input type="checkbox" id="c4" name="hobby" value="tt"/>抽烟<br>
        
        
    </body>
</html>

获取下拉列表选中项的value

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>获取下拉列表选中项的value</title>
        
    </head>
    <body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("select1").onchange=function(){
                    if(document.getElementById("select1").value){
                        alert(document.getElementById("select1").value);
                    }
					
				}
			}
		</script>
		<select id="select1">
            <option value="">--请选择省份--</option>
            <option value="hb">河北省</option>
            <option value="hn">河南省</option>
            <option value="sd">山东省</option>
            <option value="sx">山西省</option>
        </select>
		<!--这是一种方式,上面是一种方式
		<select οnchange="alert(this.value)">
            <option value="">--请选择省份--</option>
            <option value="hb">河北省</option>
            <option value="hn">河南省</option>
            <option value="sdb">山东省</option>
            <option value="sx">山西省</option>
        </select>
		-->
    </body>
</html>

JS显示网页时钟

<!doctype html>
<html>
    <head>
        <meta charset="utf8">
        <title>JS显示网页时钟</title>
        
    </head>
    <body>
		<script type="text/javascript">
		//Date，可以用来获取时间，日期
		var nowTime = new Date();
		//输出,document.write()相当于System.out.println()
		document.write(nowTime);//Thu Sep 09 2021 19:51:51 GMT+0800 (中国标准时间) 
		document.write("<br>");//换行
		//转换为具有本地语言环境的日期格式
		nowTime = nowTime.toLocaleString();
		document.write(nowTime);//2021/9/9 下午7:54:45 
		document.write("<br>");//换行
		//当以上格式不是自己下那个要的，可以通过日期获取年月日等信息，自定制日期格式
		var t = new Date();
		var year = t.getFullYear();//返回年信息，以全格式返回
		var month = t.getMonth() + 1;//月份是0-11
		var dayOfWeek = t.getDay();//获取一周当中的第几天（0-6）
		var day = t.getDate();//返回一个月当中的第几天
		document.write(year+"年"+month+"月"+day+"日");
		document.write("<br>");//换行
		//重点：怎么获取当前的毫秒数（1970-1-1到现在的）
		var times = t.getTime();
		document.write(times);
		document.write("<br>");//换行
		</script>
		<script type="text/javascript">
			/*var time = new Date().getFullYear()+"年"+ (new Date().getMonth()+1) +"月"
						+new Date().getDate()+"日";*/
			
			function displayTime(){
				var time1 = new Date();
				var haha = time1.toLocaleString();
				document.getElementById("timeDiv").innerHTML=haha;
			}
			function start(){
				//每隔一秒调用displayTime()函数
				v = setInterval(function(){displayTime()},1000);//v全局变量
			}
			function stop(){
				window.clearInterval(v);
			}
			//setInterval(function(){alert(111)},1000);这个有效
			
		</script>
		<input type="button" value="显示系统当前时间" onclick="start();" />
		<input type="button" value="系统时间停止" onclick="stop();" />
		<div id="timeDiv"></div>
    </body>
</html>

JS中内置支持类Array

<!doctype html>
<html>
    <head>
        <title>JS当中的内置支持类Array</title>
    </head>
    <body>
        <script type="text/javascript">
            //创建长度为0的数组
            var arr = [];
            alert(arr.length);
            var arr2 = [1,2,3,false,"abc",1.23];
            alert(arr2.length);
			//下标会越界吗
            arr2[9] = 8;//自动扩容，没有赋值的默认 undefined
            for(var i = 0;i<arr2.length;i++){
                document.write(arr2[i]);
            }
			arr.push(10);//在数组的末尾添加一个元素（数组长度+1）
			var str = arr2.join("-");//可以将数组元素全部取出，并在中间加上“-”符号
			alert(str);
			var endElt = a.pop();//将数组末尾的元素弹出（数组长度-1，删除元素）
			alert(endElt);
			arr.reverse();//数组的反转
			//另一种创建数组的对象的方式
			var a = new Array();
			alert(a.length);//0
			var a2 = new Array(3);//如果只填入一个数字，则数字，3表示长度
			alert(a2.length);
			var a3 = new Array(3,2);
			alert(a3.length);//如果填入不止一个数字，则表示具体的元素，此时length=2
        </script>
    </body>
</html>

BOM编程

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>BOM编程</title>
    </head>
    <body>
        <script type="text/javascript">
           //1.BOM编程中，window对象是顶级对象，代表浏览器窗口
            //2.window有open和close方法，可以开启窗口和关闭窗口
        </script>
        <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();" />
        <!--脚本不得关闭非脚本打开的窗口。-->
    </body>
</html>

弹出消息框和确认框


<html>
    <head>
		<meta charset="utf8">
        <title>弹出消息框和确认框</title>
    </head>
    <body>
        <script type="text/javascript">
           function del(){
				/*var ok = window.confirm("亲，确认删除数据吗？");
				//alert(ok);//true表示确定，false表示取消
				if(ok){
					alert("data delete...");
				}*/
				if(window.confirm("亲，确认删除数据吗？")){
					alert("data delete...");
				}
		   }
        </script>
		<input type="button" value="弹出消息框" onclick="window.alert('你好')" />
		<!--删除操作的时候都要提前得到用户的确认-->
		<input type="button" value="弹出确认框（删除）" onclick="del()" />
       
    </body>
</html>
       
    </body>
</html>

JS前进和后退记录

首先打开的页面

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>前进和后退</title>
    </head>
    <body>
        <a href="007.html">007页面</a>
        <input type="button" value="前进" onclick="window.history.go(1)" />
    </body>
</html>

点击超链接之后，打开页面

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>前进和后退</title>
    </head>
    <body>
        007 page!
		<input type="button" value="后退" onclick="window.history.back();" />
        <input type="button" value="后退" onclick="window.history.go(-1);" />
    </body>
</html>

设置顶级窗口

如果当前窗口不是顶级窗口，将当前窗口设置为顶级窗口

主页面，当中嵌套了一个页面（005页面）

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>主页面中嵌套页面</title>
    </head>
    <body>
		<iframe src="资源地址" width="300px" height="300px">
            
        </iframe>
    </body>
</html>

005页面

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>嵌套页面</title>
    </head>
    <body>
		005页面
        <script type="text/javascript">
           function setTop(){
				if(window.top != window._self){	
					window.top.location != window._self.location
				}
		   }
        </script>
		<input type="button" value="将当前窗口设置为顶级窗口" onclick="setTop();" />
       
    </body>
</html>

设置浏览器地址栏上的URL

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>设置浏览器地址栏上的URL</title>
    </head>
    <body>
		<script type="text/javascript">
            function goBaidu(){
				//下面的四种方式都可以
				//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>
</html>

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

表单form的提交
超链接
document.location
window.location
window.open(“url”)
直接在浏览器地址栏上输入URL，然后回车

以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的

JSON的使用

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>JSON</title>
    </head>
    <body>
		<script type="text/javascript">
            /*
				1.什么是JSON，有什么用，javascript object nonation 简称JSON（数据交换格式）
				JSON最重要的作用：一种标准的数据交换格式，（目前非常流行，90%以上的系统，系统a与系统b交换数据，都是采用JSON）
				2.JSON是一种标准的轻量级的数据交换格式，特点是：体积小，易解析
				3.在实际开发中有两种数据交换格式，使用最多，其一是JSON，另一个是XML
				XML体积较大，解析麻烦，但是有其优点，语法严谨（通常银行相关系统之间数据交换的话会使用XML）
			*/
			//创建json对象
			var json = {"sno":"110","sname":"张三","sex":"男"};
			//解析json对象的属性
			alert(json.sno+","+json.sname+","+json.sex);
			//json数组
			var json1 = [
					{"sno":"110","sname":"张三","sex":"男"},
					{"sno":"120","sname":"李四","sex":"女"},
					{"sno":"130","sname":"王五","sex":"男"}
					];
			for(var i = 0;i<json1.length;i++){
				var stuobj = json1[i];
				alert(stuobj.sno+","+stuobj.sname+","+stuobj.sex);
			}
        </script>
		<input type="button" value="百度" οnclick="goBaidu();" />
    </body>
</html>

<!doctype html>

复杂一点的JSON（json嵌套json）

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>复杂一点的JSON（json嵌套json）</title>
    </head>
    <body>
		<script type="text/javascript">
           
			//创建json对象
			var user = {
				"usercode":110,
				"username":"张三",
				"sex":true,
				"address":{"city":"江西",
							"street":"梅州路",
							"zipcode":"512"},
				"hobby":["smoke","drink","tt"]
			};
			//解析json对象的属性，获取人名以及居住的城市
			alert(user.username+","+user.address.city);
			
			//自行设计json格式的数据，这个json格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息
			var jsonData = {
				"total":3,
				"student":[
					{"sno":"110","sname":"张三","sex":"男"},
					{"sno":"120","sname":"李四","sex":"女"},
					{"sno":"130","sname":"王五","sex":"男"}
				]
			};
        </script>
		<input type="button" value="百度" onclick="goBaidu();" />
    </body>
</html>

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>eval函数的使用</title>
    </head>
    <body>
		<script type="text/javascript">
           /*
			eval函数的作用：将字符串当作一段JS代码解释并执行
		   
		   */
			window.eval("var i = 100");//相当于var i = 100;
			alert("i="+i)
			
			//java链接数据库，查询数据之后，将数据在java程序中拼接成JSON格式的“字符串”，将JSON格式的字符串响应到浏览器
			//也就是说Java响应到浏览器上的仅仅是一个“JSON格式的字符串”，还不是一个json对象
			//可以使用eval函数，将json格式的字符串转换成json对象
			//json在javascript当中以对象形式存在
			var fromJava = "{\"sno\":\"130\",\"sname\":\"王五\",\"sex\":\"男\"}";//这是java发过来的json格式的“字符串”
			//将以上的json格式的字符串转换成json对象
			window.eval("var jsonObj = " + fromJava);
			alert(jsonObj.sno+jsonObj.sname+jsonObj.sex);
			
			//面试题：在js中当中 [] 和 {} 有什么区别
			//[] 是数组
			//{} 是json
        </script>
		<input type="button" value="百度" onclick="goBaidu();" />
    </body>
</html>

<!doctype html>
<html>
    <head>
		<meta charset="utf8">
        <title>设置table的tbody</title>
    </head>
    <body >
		<script type="text/javascript">
			var data = {
				"total":4,
				"emps":[
					{"empno":7369,"ename":"smith","sal":800},
					{"empno":7369,"ename":"smith","sal":800},
					{"empno":7369,"ename":"smith","sal":800},
					{"empno":7369,"ename":"smith","sal":800}
				]
			};
			window.onload=function(){
				var btn = document.getElementById("btn");
				btn.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+"</tc>";
						html += "<td>"+emp.ename+"</tc>";
						html += "<td>"+emp.sal+"</tc>";
						html += "</tr>";
					}
					document.getElementById("et").innerHTML = html;
					document.getElementById("span1").innerHTML = data.total;
				}
			}
          //希望把数据展示到table当中
        </script>
		<input type="button" value="显示员工列表" id="btn" />
		<h2 align="center">员工列表</h2>
		<hr>
		<table border="1px" width="50%" align="center">
			<tr>
				<th>员工编号</th>
				<th>员工姓名</th>
				<th>员工薪资</th>
			</tr>
			<tbody id="et">
				<!--<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr>
					<td>11</td>
					<td>22</td>
					<td>33</td>
				</tr>
				<tr>
					<td>111</td>
					<td>222</td>
					<td>333</td>
				</tr>
				<tr>
					<td>1111</td>
					<td>2222</td>
					<td>3333</td>-->
			</tbody>
			
		</table>
		共有<span id="span1"></span>条记录
    </body>
</html>