java开发工程师入门第二阶段(07-web前端(JS))

最新推荐文章于 2023-01-25 20:45:00 发布

@吟游诗人

最新推荐文章于 2023-01-25 20:45:00 发布

阅读量1.7k

点赞数

分类专栏： web前端文章标签： java 开发语言

本文链接：https://blog.csdn.net/javaLkx/article/details/123754337

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

三.javaScript(简称JS)

3.1.javaScript概述

JavaScript是一门客户端脚本语言，基于对象和事件驱动的一门客户端脚本语言，可以直接在浏览器端运行。

客户端:浏览器
脚本语言:无需编译,可以直接运行.
基于对象:javascript已经提供好了大部分对象,前端开发者,可以直接使用这些对象(对象无需创建,直接使用)
时间驱动:通过触发事件,驱动事件绑定的javascript代码,实现网页的动态效果.
核心功能就是增强用户和HTML页面的交互过程,让页面有一些动态效果,以此增强用户的体验.

3.2.JavaScript和Java的关系

3.2.1 javascript是一门脚本语言:无需编译,可以直接运行(在浏览器中)

java是一门编程语言,先编译,后运行(编译的过程依赖与JVM)

3.2.2 javascript是基于对象的脚本语言:对象可以直接使用,无需创建

java是面向对象的编程语言:对象必须先创建,然后再使用

3.2.3 javascript是一门弱类型的脚本语言,指的在javascript所有类型都可以使用var来表示,比如var num=10; var str=“hello”,var flag=true.

java是一门强类型的编程语言,指的在定义变量时,必须先确定类型,然后再定义变量.比如int sum=10; Sring str=

“hello”;boolean flag=true;

javascript和java的相同之处
1. javascript和java的定义基本语法很相似.
2. javascript书写方式和java的书写的diam方式很相似

3.3.JavaScript组成

ECMAScript

规范了javascript的基本语法
DOM

document object model : 文档对象模型（由一系列文档对象构成的模型）

作用：操作标记性的文档(指的xml或者html文档)
BOM

browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）

作用：操作浏览器的。

3.4.JavaScript小结

javascript是一门客户端脚本语言
javascript是一门弱类型语言(即使有时语法写的很不规范,也不报错)
javascript的三个组成部分:基本语法+DOM+BOM
常见的前端开发工具:html,css,javascript
常见的后端开发工具:idea,eclipse,myeclipse,sts

3.5.JavaScript的基本语法

1.语法规范

区分大小写
每行代码结束,建议使用分号表示
代码书写格式(建议与java代码书写格式保持一致)

2.javascript入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.定义变量 num=10;
			var num = 10; 
			//2.弹出的警告框
			alert(num);
			
		</script>
	</body>
</html>
注意： 书写js代码时，一定一定加上<script> js代码 </script>

3.javscript与html结合的两种方式

方式一:直接在html里面,嵌入js代码

优点:可以直接看到书写的js代码

缺点:js代码和html标签在一起,不便于后期的维护

<body>
		<script type="text/javascript">
			//1.定义变量 num=10;
			var num = 10; 
			//2.弹出的警告框
			alert(num);
			
		</script>
	</body>

方式二:引入外部的js文件

步骤一：先定义好一个js文件，步骤二：通过script标签的src属性引入外部定义好的js文件

优点：便于后期js的代码维护

outer.js:

//1.定义变量 num=10;
var num=10010;
//2.弹出的警告框
alert(num);

在html网页里面引入:外部的js文件

4.javscript的注释

和java的注释基本一样
单行注释: //注释内容
多行注释: /*注释内容/

5.五种原始类型

1.判断类型可以用typeof

2.原始类型

2.1:number类型:数字类型

2.2:string类型:字符串或者字符

2.3:null类型:比如:定义一个变量,赋值为null,var a=null;

2.4:undefined类型: 未定义类型,比如:定义一个变量,没有赋值,vara;

2.5:boolean类型:表示true或者false

3.代码演示

<script type="text/javascript">
			//1.定义number类型
			var num=10;
			//1.1.判断num的类型
			document.write(num+" : "+(typeof num)+"<hr/>")
			
			//2.定义string类型
			var str="hello world";
			//2.1 输出到浏览器
			document.write(str+"  :  "+(typeof str)+"<hr/>");
			
			//3.定义boolean类型
			var flag =true;
			//3.1 输出到浏览器
			document.write(flag+"  :  "+(typeof flag)+"<hr/>");
			
			//4.定义null类型
			var obj =null;
			//4.1 输出到浏览器
			document.write(obj +"  :  "+(typeof obj )+"<hr/>");
			
			//5.定义undefined类型
			var und;
			//5.1 输出到浏览器
			document.write(und+"  :  "+(typeof und)+"<hr/>");
</script>

6.常量和变量

1.javscript是一门弱类型脚本语言,在定义变量或者常量时,不用知道类型,或者可以使用var,let,const
2.定义局部变量,使用关键字:let(建议放在方法内)
3.全局变量: var 变量名称A; //变量名称A就是全局变量变量名称A=赋值
4.常量值(不能改变的值),关键词:const
5.注意:定义变量或者常量时,使用let或者const关键词:不存在类型变量的提升

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常量</title>
	</head>
	<body>
		<script type="text/javascript">
			//1.定义全局变量,可以在任意方法内使用
			var a =10;
			//定义常量
			const c=99.9;
			//c =111;常量不可以修改
			//2.定义一个方法
			function test1(){
				//定义局部变量
				let b=20;
				document.write("常量值:"+c+"<br/>")
				//向浏览器输出
				document.write("test1方法中,全局变量:"+a+"<br/>");
				document.write("test1方法中,局部变量:"+b);
				document.write("<hr/>")
			}
			//2.1定义方法
			function test2(){
				document.write("test2方法中,全局变量:"+a)
			}
			//3.调用方法
			test1();
			test2();
		</script>
	</body>
</html>

7.运算符

1.算术运算符

在这里插入图片描述

注意:如果数字与字符串类型的数字进行运算时:

如果是 + 号,进行的是字符串拼接

如果不是 + 号,进行的是算术运算

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>算术运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			//定义变量
			var d="10";
			var e=1;
			var d_e =d+e;
			document.write(d_e+"<br/>")
			//定义变量
			var a=1;
			var b=2;
			var c=3;
			//求和
			var sum=(++a)+(b++)+(++c);//2+2+4=8
			document.write(sum)//8
		</scrit>
	</body>
</html>赋值运算符

2.赋值运算符

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>赋值运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			//取余后赋值
			var a=10;
			a %=2;
			document.write("取余数等"+a)
			a %=2;
			document.write("取余数等"+a+"<hr/>")
			//相加后赋值
			var b=10;
			b+=2;
			document.write(b+"<br/>")//12
			//相减后赋值
			b -=2;
			document.write(b)//10
		</script>
	</body>
</html>

3.比较运算符

注意: == : 只比较值，不比较类型 === ：先比较类型，然后在比较值

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>比较运算符</title>
	</head>
	<body>
		<script type="text/javascript">
			//定义数字类型
			var a=10;
			var b=10;
			var f=(a==b);
			document.write(f)
			document.write("<hr/>")
			//定义字符串
			var c="10";
			document.write("比较"+(a==c)+"<br/>");//两个==只比较数值
			document.write("比较"+(a===c));//三个===数值和类型都比较
		</script>
	</body>
</html>

4.逻辑运算符

注意：

空串取反操作：true
null取反操作：true
0取反操作：true
Nan取反操作：true

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//空串取反
			var a="";
			var flag=!a;
			document.write(flag)
			//null取反
			var b=null;
			document.write("null取反结果"+(!b)+"<br/>")
			//NaN取反
			var c=NaN;
			document.write("NaN取反结果"+(!c)+"<br/>")
			//0数字取反
			var d=0;
			document.write("0取反结果"+(!d)+"<br/>")
		</script>
	</body>
</html>

5.三元运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			var totalCount =101;
			var pageSize =5;
			pageNumbers=(totalCount%pageSize==0)?(totalCount/pageSize):(((totalCount-1)/pageSize)+1)
			if(totalCount%pageSize==0){
				pageNumbers=totalCount/pageSize;
			}else{
				
				pageNumbers=((totalCount-1)/pageSize)+1;
			}
			document.write(pageNumbers)
		</script>
	</body>
</html>

8.流程控制语句

1.顺序结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=10;
			var b="全10美";
			var c =a+b;
			document.write(c)	
		</script>
	</body>
</html>

2.分支结构

if if else if else if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//判断当前月份是哪个季节
			//定义一个月份(3-5春天,6-8夏季,9-11秋季,12-2冬季)
			var month=15;
			if(month>3 && month<5){
				document.write(month+"是春季");
			}else if(month>6 && month<8){
				document.write(month+"是夏季");
			}else if(month>9 && month<11){
				document.write(month+"是秋季");
			}else if(month>12 || month<1){
				document.write(month+"月份写错了");
			}else{
				document.write(month+"是冬季");
			}
		</script>
	</body>
</html>

3.循环结构

//for循环 //while循环 //do while循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//for循环
			for (var i = 0; i < 9; i++) {
				document.write(i+",");
			}
			document.write("<br />");
			//while循环
			var j=10;
			while(j<=19){
				document.write(j+",");
				j++;
			}
			document.write("<br />");
			//do while循环
			var h=100;
			do{
				document.write(h+",");
				h+=2;
			}while(h<200);
		</script>
	</body>
</html>

4.普通函数

方式二：普通函数

function 方法名称（方法的参数）{

方法体内容

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义普通函数</title>
	</head>
	<body>
		<script type="text/javascript">
			function test1(){
				document.write("定义一个没有参数没有返回值的普通函数");
			}
			document.write("<br/>")
			//调用函数
			test1();
			//定义求和的函数,注意:参数不要var
			function addSum(a,b){
				var sum=a+b;
				document.write(sum);
			}
			addSum(1,11)
			function addSum(a,b){
				var sum=a+b;
				return sum;
			}
			var r_c=addSum(1,11);
			document.write(addSum(1,11))
		</script>
	</body>
</html>

5.匿名函数

var 方法名称 = function (方法的参数）{

方法体内容

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * var 函数名称 =function(参数){方法体}
			 * 
			 * */
			var test1 = function(a,b){
				var sum =a+b;
				return sum;
			}
			var return_data =test1(1,11);
			document.write(return_data)
			
		</script>
	</body>
</html>

6.动态函数

var fun1 = new Function(参数，方法体);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//console.log(数据):在浏览器控制台打印数据
			var test1 = new Function("a,b","console.log(a+b)");
			test1(1,11);
		</script>
	</body>
</html>

9.数组

数组的创建：
- 方式一：直接创建一个指定元素的数组
  
  var arr1 = [1,“a”,“b”,true];
  
  var arr2= new Array(1,“a”,“b”,true);
- 方式二：创建一个空的数组
  
  var arr1=[ ]; 或者 var arr2= new Array();
- 方式三：创建一个指定长度的数组
  
  var arr= new Array( size 数字)
数组的特点：
- 数组的元素类型：可以是任意类型
- 数组的长度可以变化的
  
  数组的长度 = 数组的最大索引值+1
数组的属性：
- length属性：获取数组的长度

数组的方法：

1.var str = 数组对象.join(连接符号);//字符串

2.var endEle = 数组对象.pop();// 删除最后一个元素并返回

3.var lenght = 数组对象.push(ele);//向数组末尾添加一个元素ele,返回新的长度

4.var arrNew = 数组对象.reverse();//颠倒数组元素的顺序，返回一个新的数组

普通数组:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1 =["a",1,true,null];
			var arr2 = new Array("a","b","c")
			//获取数组的长度
			var arr1_length = arr1.length;
			document.write("arr1的长度"+arr1_length+"<br/>");
			document.write("arr2的长度"+arr2.length+"<br/>");
			//存储和管理数据
			var arr2_d1 =arr2[0];
			document.write("arr2的索引为0的数据:"+arr2_d1+"<br />")
			//存数据
			arr2[0] ="aaa";
			document.write("arr2的:"+arr2+"<br />");
			arr2[5] ="eee";
			document.write("arr2的:"+arr2+"<br />");
			document.write("arr2的长度"+arr2.length+"<br/>");
		</script>
	</body>
</html>

动态数组:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr=new Array(3);
			document.write("存数据之前的长度"+arr.length);
			document.write("<hr />")
			//添加数据
			arr[0]="AAA";
			arr[1]="BBB";
			arr[2]="CCC";
			document.write("添加0,1,2的数据"+arr)
			document.write("<hr />")
			arr[5]="BBBBBB";
			document.write("添加0,1,2,5的数据"+arr)
		</script>
	</body>
</html>

3.6JavaScript的Dom操作

1.Dom概述

DOM： Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）

演示DOM操作过程：

在这里插入图片描述

2.Dom的api

2.1Dom操作标签（crud标签）

根据id获取标签对象：获取的是一个标签对象
根据标签名称获取标签对象：获取的是多个标签对象
根据name属性获取标签对象：获取的是多个标签对象
根据class属性获取标签对象：获取的是多个标签对象

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		密码：<input type="password" name="psw"  /><br/>
		用户名：<input type="text" name="username" id="uname" class="s" /><br/>
		性别：<input type="radio" name="sex" class="s"  value="man"/>男
		<input type="radio" name="sex"  class="s" value="woman"/>女<br/>
		<script type="text/javascript">
			//1.根据id获取标签对象
			var username_tag=document.getElementById("uname");
			document.write(username_tag.name+"<br />");
			//2.根据标签名称获取标签对象
			var input_tag=document.getElementsByTagName("input");
			document.write(input_tag.length+"<br />");
			//3.根据name的属性值获取标签对象
			var input_tag1=document.getElementsByName("sex");
			document.write(input_tag1.length+"<br />")
			//4.根据class的属性值获取标签对象
			var input_tag2=document.getElementsByClassName("s");
			document.write(input_tag2.length+"<br />")	
		</script>
	</body>
</html>

2.2.Dom操作属性（设置属性，获取属性，移除属性）

方法
在这里插入图片描述

<a id="a1">点击我，去跳转</a>
		
		<a id="a2" href="#">点击我，去跳转</a>
		<hr />
		<br />
		<input type="button" value="设置属性" onclick="addAttr()" />
		<input type="button" value="移除属性" onclick="removeAttr()" />
		<input type="button" value="获取属性" onclick="getAttr()" />
		<input type="button" value="设置属性的方式二" onclick="addAttr2()" />
		<script type="text/javascript">
			//4.给a设置属性
			function addAttr2(){
				//1.获取a标签对象
				var a_tag = document.getElementById("a2");
				//2.设置属性
				a_tag.style.textDecoration="none";//通常：设置css样式使用
			}
			//1.给a设置 href=index.html
			function addAttr(){
				//1.获取a标签对象
				var a_tag = document.getElementById("a1");
				//2.设置属性
				a_tag.setAttribute("href","index.html");
			}
			
			//2.移除a标签的href属性
			function removeAttr(){
				//1.获取a标签对象
				var a_tag = document.getElementById("a1");
				//2.设置属性
				a_tag.removeAttribute("href");
			}
			//3.获取a标签的href属性
			function getAttr(){
				//1.获取a标签对象
				var a_tag = document.getElementById("a1");
				//2.设置属性
				var str  = a_tag.getAttribute("href");
				alert(str);
			}
		</script>

2.3.Dom操作文本（文本：指的标签体内容）

* 第一块: 通过document获取标签对象
   ==根据id获取:     var singleTag = getElementById("id的值");
   ==根据标签名称获取: var tags =  getElementsByTagName("标签名称");
   ==根据标签的name属性获取:var tags =  getElementsByName("name属性的值");
* 第二块操作: 通过标签对象操作属性
  ==给属性赋值:
       方式一:  标签对象.属性名称= 赋值;//可以,但是在有的浏览器不兼容
       方式二:  标签对象.setAttribute("属性名称","赋值");
  ==获取属性的值
       方式一:  var value = 标签对象.属性名称;//可以,但是在有的浏览器不兼容
       方式二:  var value = 标签对象.getAttribute("属性名称");
* 第三块操作: 操作文本
       文本: 指的标签体的内容, 只有围堵标签才有标签体.比如a标签,div标签
  ==设置文本
	   标签对象.innerHTML = 赋值;
  ==获取文本
	  var value = 标签对象.innerHTML;
* 事件: 指的操作网页时,触发的动作,比如: 鼠标单击,鼠标双击,按键盘等等
            实际生活场景中: 脚踹电动车事件
    * 事件源: 指的网页的元素,比如: 标签,文本等等
            实际生活场景中:电动车
    * 事件(js代码)和事件源绑定: 通过触发网页的事件,去调用js代码.
         实际生活场景中: 报警器和电动车绑定,脚踹电动车事件,触发报警器报警
    * 常见的事件有那些
		点击事件
		*onclick： 单击事件
		*ondbclick: 双击事件
		内容改变事件
		* onchange
		* 作用范围: 通常作用于select标签
		页面加载事件
		* onload
		  1. 通常作用于body标签
		  2. 特点: 当html网页全部加载完毕以后,会自动执行对应的js代码
		* js代码位置: 建议放在body最下面,为什么? 因为代码加载从上向下的
		* js代碼放在head里面,并且代码不报错,怎么解决?.
		  onload事件: 作用就是,当html网页全部加载完毕后,才会执行js代码
	* 事件和事件源绑定
	  方式一: 直接绑定,就是在标签里面写我们的事件
	                 比如: <input type="button" onclick = "test1()" />
	  方式二: 间接绑定,就是通过我们的标签调用事件属性
	                 比如:<input type="button" id="b1" />
	             document.getElementById("b1").onclick=function(){}

获取文本:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">
		    我是一个小小鸟！！！
		</div>
		<script type="text/javascript">
			//获取文本的值:innerHTML
			var div_tag =document.getElementById("d1");
			//赋值
			div_tag.innerHTML="xxxxx";
			//获取值
			var div_text = div_tag.innerHTML;
			console.log(div_text);
		</script>
	</body>
</html>

事件的绑定方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>普通按钮</button>
		<script type="text/javascript">
			//间接绑定
			/**
			 * onclick也是标签的属性:函数
			 * 分析思路:操作属性时
			 * 1.获取标签对象
			 * 2.对象.οnclick=函数
			 * */
			//1.根据标签名称获取标签对象
			var tags=document.getElementsByTagName("button");
			//2.通过标签对象.属性名称=函数
			var singlebutton=tags[0];
			singlebutton.onclick =function(){
				console.log(2222);
			}
		</script>
	</body>
</html>

双击事件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#" id="a1">点击我到达内官网</a>
		<script type="text/javascript">
			var tag=document.getElementById("a1");
			tag.setAttribute("ondbclick","test2()")
			function test2(){
				tag.setAttribute("href","http://www.tedu.cn");
			}
		</script>
	</body>
</html>

内容切换事件1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--直接绑定:在下拉选择框里面直接绑定内容切换事件
		    内容切换事件:内容在切换的时候才会触发切换事件-->
		<select onchange="changeContext()">
			<option>选择省份</option>
			<option>海南省</option>
			<option>江苏省</option>
			<option>河北省</option>
		</select>
		<script type="text/javascript">
			//1.给直接绑定:定义函数
			//定义变量
			var num=1;
			function changeContext(){
				console.log(num);
				num++;
			}
		</script>
	</body>
</html>

内容切换事件2:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			/**
			 * οnlοad="t2"
			 * 作用:当html网页全部加载完毕以后,才会执行t2函数
			 * 特点:由于网页是自动加载的,所有加载完毕后,onload会自动执行
			 * */
			function t2(){
			//0.需求:获取标签内容
			//1.根据id获取标签对象
			var divTag = document.getElementById("d1");
			//2.根据标签对象的innerHTML属性
			var div_text =divTag.innerHTML;
			//3.打印
			console.log(div_text);
		    }
		</script>
	</head>
	<!--直接绑定:body标签,绑定onload事件-->
	<body onload="t2()">
		<div id="d1">
			我们一起学习JAVA
		</div>
	</body>
</html>

3.7 事件机制

1.事件概述

* 事件: 指的操作网页时,触发的动作,比如: 鼠标单击,鼠标双击,按键盘等等
            实际生活场景中: 脚踹电动车事件
    * 事件源: 指的网页的元素,比如: 标签,文本等等
            实际生活场景中:电动车
    * 事件(js代码)和事件源绑定: 通过触发网页的事件,去调用js代码.
         实际生活场景中: 报警器和电动车绑定,脚踹电动车事件,触发报警器报警
    * 常见的事件有那些
		点击事件
		*onclick： 单击事件
		*ondbclick: 双击事件
		内容改变事件
		* onchange
		* 作用范围: 通常作用于select标签
		页面加载事件
		* onload
		  1. 通常作用于body标签
		  2. 特点: 当html网页全部加载完毕以后,会自动执行对应的js代码
		* js代码位置: 建议放在body最下面,为什么? 因为代码加载从上向下的
		* js代碼放在head里面,并且代码不报错,怎么解决?.
		  onload事件: 作用就是,当html网页全部加载完毕后,才会执行js代码
	* 事件和事件源绑定
	  方式一: 直接绑定,就是在标签里面写我们的事件
	                 比如: <input type="button" onclick = "test1()" />
	  方式二: 间接绑定,就是通过我们的标签调用事件属性
	                 比如:<input type="button" id="b1" />
	             document.getElementById("b1").onclick=function(){}

2.事件和事件源绑定

1.直接绑定和间接绑定

    <input type="button" value="直接绑定" onclick="f1();" />
	<input type="button" value="间接绑定" id="bt2" />
	<script type="text/javascript">
		//1.直接绑定：
		function f1() {
			alert("直接绑定---");
		}
		//2.间接绑定：
		//2.1 获取标签对象
		var input2_tag = document.getElementById("bt2");
		//2.2 标签对象操作事件属性
		input2_tag.onclick = function(){
			alert("间接绑定---");
		}
   </script>

onchange:在内容改变时，触发该事件

<script type="text/javascript">
		 	//1.页面加载事件
		 	window.onload=function(){
		 		//2.内容改变事件
		 		document.getElementById("province").onchange=function(){
		 			//3.获取改变的内容: this 表示option标签对象
		 			var province_name = this.value;
		 			console.log(province_name);
		 		}
		 		//3.作业： 点击省份，在右侧显示该省份对应的市区
		 	}
		 </script>
	</head>
	<body>
		<select id="province">
				<option>--请选择--</optgroup>
				<option value="henan">河南</optgroup>
				<option value="jianghsu">江苏</optgroup>
				<option value="gaugndong">广东</optgroup>
		</select>
		<select id="city">
				<option>--请选择--</optgroup>
				
		</select>
	</body>

3.8.BOM对象

1.BOM概述

Browser Object Model 浏览器对象模型,包含多个bom对象作用: 操作浏览器

2.Bom常见对象

window : 窗口
navigator :表示浏览器对象, 获取浏览器的相关参数信息(比如:使用的是那个浏览器,版本号是多少)
screen:网页的屏幕
history:历史记录
location :获取地址栏的地址或者改变地址栏的地址

3.常用api

1.window 对象

== 打开新的窗口,显示网页

window.open(“https://www.baidu.com”);

== 关闭窗口,关闭网页

window.close();

2.location对象

属性href

3.9 常见的内置对象

1.Global全局对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**Global全局对象：javascript内置的对象（这个对象的名称是Global: 只有名称，没有”真人“）
			*1.eval();将普通的字符串解析为js代码执行
			* 2.isNaN();判断是不是数字
			* 3.parseInt();将字符串类型的数字转成number类型数字
			* 4.parseFloat();将字符串类型的浮点数转成float浮点数
			* */
			document.write(33333+"<hr />");//方法的调用
			var str1="document.write(1111)";
			eval(str1);
			var num=10;
			var flag1 = isNaN(num);
			document.write(flag1);//false
			document.write("<hr />");
			//转成整数
			var num1 = "10";
			var num2 =10;
			var num3=parseInt(num1);
			document.write(num3);
			document.write(typeof num3);
			document.write("<hr />");
			//转成浮点数
			var sum ="1.1";
			var sum1=parseFloat(sum);
			document.write(sum1);
		</script>
	</body>
</html>

2.Math对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * floor();"地板方法"向下取整,比如: 5.9-->向下取整 5
			 * ceil();"天花板方法"向上取整,比如:5.01-->向上取整6
			 * random();随机数,范围[0,1);包含0,不包含1
			 * */
			var n1 = 2.1;
			var n1_end=Math.floor(n1);
			document.write(n1_end)//2
			document.write("<hr />");
			//ceil();"天花板方法"向上取整
			var n2 = 3.111;
			var n2_end=Math.ceil(n2);
			document.write(n2_end);//4
			document.write("<hr />");
			var t =101;
			var p =5;
			var totalPage =(t%p==0) ? (t/p) : (Math.ceil(t/p));
			document.write("总页数"+totalPage);//21
			 //3.random();随机数
			 document.write("<hr />");
			 var s= Math.random()*6;//[0,5.5.9)
			 var s1 = Math.floor(s);//[,5]
			 document.write(s1);
		</script>
	</body>
</html>

3.JSON对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * json概述
			 *  它是一种轻量级的数据格式,类型与map
			 * json特点:
			 * 	1.数据量小
			 * 	2.描述数据,比较直观,清晰
			 * json作用
			 * 	前端----json----后端
			 * json定义
			 * 	第一类:单个json对象
			 * 	第二类:json数据对象
			 * 	注意:
			 * 		1.大括号外边不要加双引号
			 * 		2.在大括号里面除了数字不加引号以外,其他值都加引号	
			 * json解析
			 * 		1.第一类:单个json对象:json对象.key
			 * 		2.第二类:json数据对象  
			 * 				步骤一:从数组中拿到单个json
			 * 				步骤二:json对象 .key
			 * */
			 //json的key:first
			 //json的value:{"id":1,"name":"jack"}
			 var casjson={"first":{"id":111,"name":"jack"}};
			 var casUserID=casjson.first.id;
			 var casUserName = casjson.first.name; 
			 document.write(casUserID+","+casUserName);
			 document.write("<hr />")
			 //第一类:单个json对象
			 var user={"id":1,"name":"jack"};
			 var id =user.id;
			 var name= user.name;
			 document.write(id+","+name)
			 var users=[{"id":1,"name":"jack"},{"id":2,"name":"rose"},{"id":3,"name":"海水"}];//静态数组
			 for (var i = 0; i < users.length; i++) {
			 	var u=users[i]
				document.write(u.id+","+u.name+"<br />")
			 }
		</script>
	</body>
</html>

4.定义类创建对象的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/**
			 * 基本语法:
			 *   class 类名{
			 * 			构造函数
			 * 			constructor(参数){
			 * 			}
			 * 			普通方法
			 * 			方法名称(){方法体}
			 * }
			 * */
			class Demo{
				//成员变量
				num=0;
				constructor(num){
					this.num=num;
				}
			//方法
			test(){
				document.write(this.num)
				document.write("测试");
				}
			}
			var demo=new Demo(1000);
			demo.test();
		</script>
	</body>
</html>

5.案例(省市二级联动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="text-align:center">
			<select id="p">
				<option>请选择</option>
				<option value="js">江苏省</option>
				<option value="sd">山东省</option>
				<option value="hn">河南省</option>
			</select>
			<select id="c">
				<option>请选择</option>
			</select>
		</div>
		<script type="text/javascript">
			/**
			 * 分析思路
			 * 1.点击省份显示对应得市区数据,给省份绑定onchange
			 * 2.当我们点击省份时,判断点击的是那个省份
			 * 3.点击省份,在右侧的下拉选择框中通过innerHTML
			 * 
			 * */
			 //1:间接绑定:点击省份显示对应得市区数据,给省份绑定onchange
			 document.getElementById("p").οnchange=function(){
				 //解决bug:点击省份,去除上个省份对应得市区数据
				 document.getElementById("c").innerHTML="<option>请选择</option>";
				 //2.当我们点击省份时,判断点击的是那个省份
				 //this:在javascript语法中,点击那个标签,this就表示那个标签
				 var p = this.value;
				 //window.alert(p)
				 //3.根据获取的省份进行判断,在右侧显示我们的市区数据
				 //根据id获取市区的标签
				 var city =document.getElementById("c");
				 //4.进行判断
				 if(p=="js"){
					 //显示福建的城市
					 var data="<option>请选择</option>"+
								"<option>苏州</option>"+
								"<option>南京</option>"+
								"<option>徐州</option>"
					 city.innerHTML = data;
				 }else if(p=="sd"){
					 var data="<option>请选择</option>"+
								"<option>济南</option>"+
								"<option>青岛</option>"+
								"<option>烟台</option>"
					city.innerHTML =data;
				 }
			 }
		</script>
	</body>
</html>

4. html网页里面引入javascript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!--
          1. my.js文件：  document.write("outer js");
          2. html网页： script标签的src属性引入外部定义的js文件
        -->
		<script type="text/javascript" src="js/my.js" ></script>
		<script>
			/*
			 * 在html网页里面引入javascript
			 *  方式一:
			 *        html网页里面,书写script标签,里面定义js代码
			 *        缺点:
			 *           1.js代码不能重复使用(不能在其它网页里面使用)
			 *           2.html标签和js代码耦合了,后期不便于修改和维护
			 *        优点:
			 *            html网页和js代码写在一起,便于阅读和调试.
			 *        小结: 在开发环境下(代码处于编码阶段),使用方式一.
			 *  方式二:
			 *        1.在外部定义一个js文件
			 *        2.在html网页里面,通过script标签的src属性引入外部的js文件
			 *        缺点:
			 *            js代码是单独的一个文件,所以在html阅读起来麻烦.
			 *        优点:
			 *           1.js代码可以重复使用
			 *           2. js代码和html网页解耦合,便于修改和维护
			 *        小结: 在生产环境下(代码全部发完毕,上线),使用方式二
			 */
		</script>
	</body>
</html>