02.JavaScript入门_请问应该把js代码写在什么位置,以获取id为content的元素-CSDN博客

这篇博客介绍了JavaScript的基本概念，包括它的起源、特点和优势。JavaScript是一门直译式、弱类型的脚本语言，主要用于增强网页的交互性和跨平台性。文中详细阐述了JavaScript的类型系统、事件驱动特性以及它与Java的区别。还涵盖了JavaScript的使用位置、入门案例、DOM和BOM操作，以及JSON对象的介绍。此外，还讨论了JavaScript的变量、常量、运算符、语句、数组和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

javascript:

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它们根本没有关系，java是强语言几乎无所不能，而javascript是脚本语言，只局限于浏览器。
特点：

(1)JS是一门直译式的语言，直接执行的就是源代码.

是一边解释一边执行，没有编译的过程（不像Java需要提前编译为class文件再运行）.

(2)JS是一门弱类型的语言,没有严格的数据类型.

优势：

(1)良好的交互性

(2)一定的安全性(JS被强制的要求,不能访问浏览器以外的东西,只能访问浏览器和浏览器内部的资源)

(3)跨平台性(Java语言具有跨平台性,是因为有虚拟机)

只要有浏览器的地方都能执行JS
JS是一门 基于对象 和 事件驱动 的 脚本语言 ，通常用来提高网页与用户的交互性。

JS是一种基于对象和事件驱动的脚本语言

基于对象:js也可以像java一样,可以使用对象

事件驱动:所有js的代码,都是通过事件来驱动执行的,事件就是在网页中常见的动作(单击,双击…)

3.脚本语言,是指在特殊环境才能运行,就是在浏览上执行的

特点:

1.js是一门直译式的语言,不需要像java一样的编译过程

2.js是一门弱类型的语言,没有严格的数据类型.底层会自动类型转换

3.增强了用户的交互性,跨平台

4.js代码出现的位置:行内js,内部js,外部js

入门案例:行内js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js</title>
	</head>
	<body>
		<!-- 1.js可以出现的位置:行内js,内部js -->
		<!-- 事件驱动:js代码要通过一些事件(动作)来触发,常见有单击,双击 -->
		<!-- alert():弹窗方法 -->
		<!-- 单击事件:onclick -->
		<div onclick="alert('欢迎来到div')">我是div</div>
		<!-- 双击事件:ondblclick -->
		<span ondblclick="alert('学个jbjs')">我是span</span>
		<!-- 鼠标进入/移出 时弹框 -->
		<!-- 鼠标进入事件:onmouseenter,onmouseover -->
		<div onmouseenter="alert('鼠标划过')">我是div2</div>
		<div onmouseover="alert('鼠标划过1')">我是div3</div>
		<!-- 鼠标移出事件:onmouseout,onmouseleave -->
		<div onmouseout="alert('鼠标划过2')">我是div4</div>
		<div style="color: #FF0000;" onmouseleave="alert('鼠标划过3')">我是div5</div>
		
	</body>
</html>

内部js:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.js的出现位置:内部js -->
		<script type="text/javascript">
			
			// 1.1 js的数据类型:基础(number/string/boolean/null/undefined)
			alert('你好')  //string
			alert("你好")  //string
			alert(2.4+3.6) //6,number
			alert(2>4)
			alert(true)
			alert(false)
			alert(null)
			alert(undefined)
			
			//2.js的变量定义,js是弱类型的语言,通过var来定义变量
			var a=1
			alert("a="+a)
			var b=2
			alert("b="+b)
			
			//交换变量的值
			var c
			c=a
			a=b
			b=c
			alert("a="+a)
			alert("b="+b)
		</script>
	</head>
	<body>
	</body>
</html>

js运算符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//1.js运算符
			var k=1
			k=k+++k+++k+++k++;
			alert(k)
			var j=1
			
			//三元运算符
			var x = 2>3?1:2
			alert(x)
			
			//算术运算符:/ % ++ --
			var a=12
			alert(a/5)
			alert(a%5)
			// alert(a++)
			// alert(a--)
			// alert(++a)			
			
			//比较运算符:==  !=  ===  !==
			alert(1==1)//true
			alert(1!=1)//false
			alert(1=='1')//true,只比较值
			alert(1==1)//false,比较类型和值
			
			//赋值运算符: +=   -=  *=  /=
			var b=2
			b+=2 //b=b+2
			
		</script>
	</head>
	<body>
	</body>
</html>

js语句

if…else语句:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js语句</title>
		<script type="text/javascript">
			//1.分支结构  if...else
			if(!true){
				alert(100)
			}
			
			//接收键盘输入
			var a=window.prompt("请输入你的分数...")
			
			if(a>=0&a<=100){
				if(a>=80){
					alert("优秀")
				}else if(a>=60){
					alert("中等")
				}else{
					alert("不及格")
				}
			}else{
				alert("输入有误")
			}	
		</script>
	</head>
	<body>
	</body>
</html>

switch…case语句:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js语句</title>
		<script type="text/javascript">

			var b=5
			switch(b){
				case 1:alert("星期一"); break;
				case 2:alert("星期二"); break;
				case 3:alert("星期三"); break;
				case 4:alert("星期四"); break;
				case 5:alert("星期五"); break;
				case 6:alert("星期六"); break;
				case 7:alert("星期日"); break;
			}
		</script>
	</head>
	<body>
	</body>
</html>

for while 循环的使用,var定义变量,没有作用域的概念,全局可用

let可以定义局部变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/*for循环
			练习1:遍历1~10并弹出*/
			//for(var i=1;i<=10;i++){
			// for(let i=1;i<=10;i++){
			// 	console.log(i);//控制台打印,必须在浏览器f12
			// 	// alert(i)//弹出框
			// }
			// bug:for循环里定义的变量,竟然在循环外也能用!!!
			// 原因:var定义的变量没有作用域的概念,使用let定义变量
			// console.log(i+"========")
			
			 var sum=0
			 let i=0
			// for(let i=0;i<=100;i=i+2){
			// 	sum+=i;
			// }
			// console.log(sum)
			while(true){
				i++;
				if(i>10) break
				console.log(i)
			}
			//console.log(sum)
		</script>
	</head>
	<body>
	</body>
</html>

document获取节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a id="a1" href="#" onclick="changeUrl()">有问题 找度娘</a>
		<script type="text/javascript">
			//事件:点击事件,事件源:a标签,事件和事件源绑定,对应js代码:changeUrl()
			var a_tag = document.getElementById("a1");
			function changeUrl(){
				//获取a标签
				//1.获取a标签
			
				//2.通过点击事件,让a标签跳转到百度
				//2.1让标签绑定点击事件
				//2.2点击事件,调用js代码:修改href属性值="https://www.baidu.com"
				a_tag.href="https://www.baidu.com";
			}
			// //2.根据a标签,获取他的文本
			// var a_text = a_tag.innerHTML
			// //3.打印浏览器的控制台
			// console.log(a_text)
		</script>
	</body>
</html>

javascript发展过程

JavaScript组成=ECMA基本语法+DOM+BOM

ECMA基本语法:指的类型的定义,变量的定义,语句的定义等等

DOM:Doucument Object Model文档对象模型 (指的很多dom对象)

作用:操作标记性文档,目前标记性文档就是html(xml)

BOM:Browser Object Model 浏览器对象模型

作用:操作浏览器的,开发者:安装IE,CHROME,FIREFOX (检验前端代码的兼容性)

JavaScript和java的区别

java面向对象的编程语言,是一门强类型的编程语言

面向对象:指先创建对象,然后通过对象操作属性以及调用方法

强类型:指是定义变量必须先声明类型

javacript基于对象的编程语言,是一门弱类弄的编程语言

基于对象:指对象已经内置好(提前创建好了)

弱类型:指的定义变量时,不用指定类型,比如 a=10,b=9.9

			但是实际开发中通常使用var(varialbe)来表示任意类型 var a=10

JavaScript的原始类型入门案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.定义number类型
			var a =10;
			var b =9.9;
			//document文档对象(Dom),写到浏览器上
			document.write(a+","+(typeof a)+"<br/>");
			document.write(b+","+(typeof b)+"<hr/>");
			//window浏览器对象(Bom),在浏览器弹一个窗口
			window.alert(typeof a)
			
			//2.定义字符串
			var c="hello";
			//var c="world";
			document.write(c+","+(typeof c)+"<hr/>")
			
			//3.定义布尔类型
			var d=true;
			var e=false;
			document.write(d+","+(typeof d)+"<hr/>")
			document.write(e+","+(typeof e)+"<hr/>")
			
			//4.定义null类型
			var f=null;
			document.write(f+","+(typeof f)+"<hr/>")
			
			//5.undefined 类型,没有赋值
			var h;
			document.write(f+","+(typeof f)+"<hr/>")
		</script>
	</body>
</html>

js引用类型入门案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.创建一个number
			var a = new Number(5);
			document.write(a+","+(typeof a)+"<br/>");
			//2.定义一个字符串类型
			var b="10";//number,string
			document.write(b+","+(typeof b)+"<br/>");
			//3.通过new Number("字符串类型的数字"),进行类型转换
			//string-->Number类型的数字 
			var c = new Number(b)
			document.write(c+","+(typeof c)+"<br/>");
			//4. var d = "a10";
		</script>
	</body>
</html>

js变量和常量

变量

全局变量:在方法外部定义,可以在任意地方使用

比如var a=10

局部变量:在方法内部定义,只有在当前方法内部使用,其它地方不能使用

比如: let b=20;

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

和=的区别

<!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);
			var c="10";//string
			//==等号进行比较时,只比较值,不比较数据类型
			document.write("一个数字和一个字符串进行比较==:"+(a==c))
			document.write("<hr/>")
			//===三个等号比较数据类型,又比较了数据是否相等
			document.write("一个数字和一个字符串进行比较===:"+(a==c))
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*1.空串取反操作:true
			2.null取反操作:true
			3.0取反操作:true
			4.Nan取反操作:true,*/
			//1.定义一个空串
			var a="";
			var flag1=!a;
			document.write("空串取反操作:"+flag1);
			//2.定义一个null
			var b = null;
			var flag2=!b;
			document.write("null取反操作:"+flag2)
			//3.定义一个0
			var c=0;
			var flag3=!c;
			document.write("0取反操作:"+flag2)
			//4.定义一个NaN
			var d=NaN;
			var flag4=!d;
			document.write("NaN取反操作:"+flag4)
					
		</script>
	
		
	  
	   
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//场景:数据进行分页,100条数据,每页显示10条,求总页数
			//1.定义一个变量,总记录条数,select count(id) from user
			var totalCount=101;
			//2.定义一个变量:每页显示几条数据
			var pageSize=5;
			//3.计算:求总的页码数=总的记录数/每页显示的条数
			if(totalCount%pageSize==0){
				//说明能够整除:总的页码数
				pageNumbers=totalCount/pageSize;
			}else{
				//说明不能整除
				pageNumbers=((totalCount-1)/pageSize)+1;
			}
			document.write("总的页码数:"+pageNumbers)
		</script>
	</body>
</html>

分支结构:if…else

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

循环结构:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//打印1-9
			for(let i=1;i<=9;i++){
				document.write(i+",")
			}
		</script>
	</body>
</html>

普通方法 function 方法名(参数){方法体}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*普通方法
			function 方法名称(参数){方法体}
			*/
		   //1.定义普通方法
		   function test1(){
			   document.write("定义普通方法")
			   document.write("<hr/>")
		   }
		   //2.调用方法
		   test1();
		   //3.定义求和方法,注意:参数不要用var定义 
		   function addSum(a,b){
			   var sum=a+b
			   document.write("求和:"+sum);
			   document.write("<hr/>");
		   }
		   //4.调用方法
		   addSum(3,4);
			//定义普通方法有返回值   
		   function addSum2(a,b){
			   var sum = a+b;
			   return sum;
		   }
		   //调用带返回值的方法
		   var v = addSum2(1,12);
		   document.write(v);
		 
		</script>
	</body>
</html>

匿名方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*语法格式
			var 方法名=function(参数){方法体}*/
			//1.定义匿名方法
			var test1=function(a,b){
				var sum=a+b;
				return sum;
			}
			//2.调用方法
			var return_data = test1(1,11);
			document.write(return_data);
			document.write("<hr/>")
			document.write(test1(1,12));
		</script>
	</body>
</html>

动态方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.动态创建方法:console内置对象,可以直接使用
			//console.log(数据):在浏览器控制台打印数据
			//第一个参数:方法中的参数
			//第二个参数:方法体
			var test1 = new Function("a,b","console.log(a+b)");
			//调用方法
			test1(11,1);
		</script>
	</body>
</html>

数组:

静态创建数组:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*数组的特点:
			数组中的数据类型是任意的
			数组的长度是不固定的
			数组的长度=数组的最大索引值+1*/
			//1.静态初始化数组:在创建数组时,给数组赋值
			var arr1 = ["a",1,true,null,undefined];
			var arr2 = new Array("a","b","c");
			//2.获取数组的长度
			var arr1_length = arr1.length;
			document.write("arr1的长度是:"+arr1_length);
			document.write("<hr/>")
			var arr2_length = arr2.length;
			document.write("arr2的长度是:"+arr2_length);
			document.write("<hr/>")
			//3.存储和管理数据
			//3.1取数据
			var arr2_d1 = arr2[0];//索引从0开始,表示第一个数据
			document.write("arr2的索引为0的数据是:"+arr2_d1);
			document.write("<hr/>")
			//3.2存数据
			arr2[0]="aaa";
			document.write("arr2的:"+arr2+"<br/>");
			arr2[5]="eee";
			document.write("arr2的:"+arr2+"<br/>")
			document.write("arr2存储数据后的长度是:"+arr2.length)	
		</script>
	</body>
</html>

动态创建数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//1.动态创建数组,创建一个长度为3的数组
			var arr1 = new Array(3);
			document.write("存数据前的长度:"+arr1.length);
			document.write("<hr/>");
			//2.向数组添加数据
			arr1[0]="aaa";
			arr1[1]="bbb";
			arr1[2]="ccc";
			document.write("存数据后:"+arr1);
			document.write("<hr/>");
			//3.添加数据,超过索引值2
			arr1[5]="fff";
			document.write("存数据后的长度:"+arr1.length);
			document.write("<hr/>");
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			//3.定义一个数组,里面赋值,在浏览器打印数组中的人名
			/*分析思路:
			1.创建数组
			2.数组赋值
			3.遍历数组,document.write()
			*/
		   var names = new Array("小黑","大明","泡泡老师","花花");
		   for (let i = 0; i < names.length;i++) {
		   	var name = names[i];
			document.write(name+",")
		   }
		</script>
	</body>
</html>

DOM:

DOM： Document Object Model 文档对象模型,指的多个文档对象

作用：操作标记性文档（目前学过的html文档）

document,操作网页中的任意元素

标签对应:element,操作标签的属性以及文本

属性对应:attr,属性对象,操作属性

文本对应:text,操作文本(比如a标签之间的内容就是文本)

通过DOM获取标签属性示例:

<!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/>
				<div name="divf">
					<p id="p1">好的,谢谢你!!!</p>
				</div>
		<script type="text/javascript">
			/*1.根据id获取标签对象:获取的是一个标签对象
			2.根据标签名称获取标签对象:获取的是多个标签对象
			3.根据name属性获取标签对象:获取多个标签对象
			4.根据class属性获取标签对象*/
			
			//根据id获取标签对象
			var username_tag = document.getElementById("uname");
			document.write(username_tag.name+"<br/>")
			//根据标签名称获取标签对象
			var input_tags = document.getElementsByTagName("input");
			document.write(input_tags.length+"<br/>")
			//根据name属性获取标签对象
			var sex_tags = document.getElementsByName("sex")
			document.write(sex_tags.length+"<br/>")
			//根据class属性获取标签对象
			var s_tags = document.getElementsByClassName("s");
			document.write(s_tags.length+"<br/>")
			//通过子标签 获取 父标签
			var son_p = document.getElementById("p1");
			var div_tag = son_p.parentElement;
			//div标签操作它的属性,获取class属性值
			document.write("<hr/>")
			//document.write(div_tag.getClassName)	//undefined有些浏览器不支持,就换个方法
			document.write(div_tag.getAttribute("name"))
		</script>
	</body>
</html>

DOM获取文本:

标签:

第一类:围堵标签,标签有开始和结束

第二类:自闭合标签,标签有开始没有结束,没有文本的

innerText属性：解析纯文本，即使是标签，也看成纯文本,可以用在围堵标签
innerHTML属性：可以解析纯文本，也可以解析标签,可以用在围堵标签和自闭合标签

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

DOM的操作

第一块:通过document获取标签对象

根据id获取: var singleTag = getElementById(“id的值”);

根据标签名称获取: var tags = getElementByTagName(“标签名称”);

根据标签的name属性获取: var tags = getElementsByName(“name属性的值”)

第二块操作:通过标签对象操作属性

给属性赋值:

方式一标签对象.属性名称 = 赋值; //可以,但是在有的浏览器不兼容

方式二:标签对象.setAttribute(“属性名称”,“赋值”);

获取属性的值:

方式一: var value = 标签对象.属性名称;//可以,但是在有的浏览器不兼容

方式二: var value = 标签对象.getAttribute(“属性名称”);

第三块操作:操作文本

文本:指标签体的内容,只有围堵标签才有标签体.

设置文本

标签对象.innerHTML = 赋值;

获取文本

var value = 标签对象.innerHTML;

事件 : 事件指操作网页时,触发的动作.比如,鼠标单击,双击,按键盘

事件源 : 指的网页的元素,比如,标签,文本等

事件(js代码)和事件源绑定:通过触发网页的事件,去调用js代码

实际的生活场景中:报警器(js代码)和事件源绑定,触发报警器报警

常见的事件有哪些呢

点击事件

onclick:单击事件

ondbclick:双击事件

内容改变事件

onchange

页面加载事件

onload

事件和事件源绑定

方式一:直接绑定,就是标签里面写我们的事件

方式二:间接绑定,就是通过我们的标签调用事件属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 点击事件:button标签,a标签等 -->
		<!-- 方式一:直接绑定,就是标签里面写我们的事件 -->
		<input type="button" value="普通按钮" onclick="top1()" />
		<hr/>
		<script type="text/javascript">
			//1.直接绑定
			function top1(){
				console.log("input按钮单击事件!!!")
			}
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button type="button">普通按钮2</button>
		<script type="text/javascript">
			//间接绑定
			/*onclick也是标签属性:方法
			分析思路:操作属性时
			1.获取标签对象
			2.对象.οnclick=方法*/
			//1.根据标签名称获取标签对象
			//根据标签名称,获取的是数组,var tags=[button]
			var tags = document.getElementsByTagName("button");
			//需要从数组中取出单个标签,因为网页中只有一个button
			var singleButton=tags[0];
			//2.通过标签对象.属性名称=方法函数
			
			singleButton.onclick = function(){
				console.log(222222);
			}
			
		</script>
	</body>
</html>

间接绑定:双击事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="#" id="a1">双击我跳转去百度</a>
		<script type="text/javascript">
			//间接绑定
			//1.根据id获取标签对象
			//tag 表示获取整个标签
			var tag = document.getElementById("a1");
			tag.ondblclick = function(){
				tag.setAttribute("href","https://www.baidu.com/");
			}
		</script>
	</body>
</html>

内容切换事件:onchange

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 直接绑定:在下拉框里面直接绑定内容事件 -->
		<select onchange="changeContext()">
			<option value ="1">----请选择----</option>
			<option value ="2">河南省</option>
			<option value ="3">河北省</option>
			<option value ="4">广东省</option>
		
		</select>
		<script type="text/javascript">
			//1.给直接绑定:定义 方法
			//定义变量
			var num = 1;
			function changeContext(){
				console.log(num);
				num++;
			}
		</script>
	</body>
</html>

页面加载事件onload

作用就是当html网页全部加载完毕后才会执行我们的js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function t2(){
				//1.根据id获取标签对象
				/*οnlοad="t2()"
				作用:当html网页全部加载完毕以后,才会执行t2函数
				特点:网页全部加载完成后,onload事件才会自动执行*/
				var tag = document.getElementById("d1");
				//2.根据标签对象的innerHTML属性
				var div_text = tag.innerHTML;
				//3.打印,浏览器控制台打印
				console.log(div_text);
			}
		</script>
	</head>
	<!-- 在body标签,直接绑定onload事件 -->
	<body onload="t2()">
		<!-- tag是div标签的对象,表示整个div -->
		<div id="d1">
			我们互相提高,互相进步
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 1.引入图片:相对路径 -->
		<img src="img/on.gif" id="ig"/>
		<script type="text/javascript">
			/*案例:点击图片,实现开关灯效果
			分析思路:
			1.给img标签绑定点击事件:间接绑定
			2.修改src属性的值
				src=on.gif   开灯
				src=oof.gif  关灯
			条件怎么写?
			开灯和关灯一共只有两种情况
			提供两个条件,表示两种情况
			数学思维,提供两种情况,任意数%2得到的余数:两种情况*/
			
			//1.给img标签绑定点击事件:间接绑定
			//2.根据id获取标签对象
			var img = document.getElementById("ig");
			//3.间接绑定
			//3.1 当余数为0时,关灯
			//3.2 当余数为1时,开灯
			var num = 1;
			img.onclick = function(){
				if(num%2==0){
					//关灯,设置src属性的值
					img.setAttribute("src","img/off.gif");
				}else{
					//开灯,设置src属性的值
					img.setAttribute("src","img/on.gif");
				}
				num++;
			}
			
		</script>
	</body>
</html>

BOM:

Browset Object Model浏览器对象模型,包含多个bom对象

作用:操作浏览器

BOM常见对象

window:浏览器窗口对象

navigator:浏览器对象

screen:浏览器屏幕对象

history:History 对象包含用户（在浏览器窗口中）访问过的 URL。

location:浏览器地址栏对象

常用api

window对象

打开新的窗口

关闭

location对象

综合练习:省市联动案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<select id="p">
				<option  value ="1">---请选择---</option>
				<option value ="2">福建</option>
				<option value ="3">河南</option>
				<option value ="4">山东</option>
			</select>
			<select id="c">
				<option value ="">---请选择---</option>
			</select>
		</div>
		<script type="text/javascript">
			/*分析思路
			1.点击省份显示对应的市区数据,给省份绑定--onchange事件
			2.当我们点击省份时,判断点击的是那个省份
			代码中怎么判断?
			3.点击省份,在右侧的下拉选择框中通过--innerHTML 显示数据*/
			//1.间接绑定事件
			var a = document.getElementById("p");	
			a.onchange = function(){
				//解决bug:点击省份,去除上一个省份对应的市区数据
				document.getElementById("c").innerHTML="<option>--请选择--</option>";
				//2.当我们点击省份时,判断点击的是那个省份
				//this:在JavaScript语法中,点击哪个标签,this就表示那个标签
				//通过this获取省份数据
				//var v = document.getElementById("p").value;
				var province = this.value;//select下拉选择框选择的value
				//window.alert(province);
				//3.根据获取省份进行判断,在右侧显示我们的市区数据
				//根据id获取市区的标签
				var city = document.getElementById("c");
				//4.进行判断
				if(province==2){
					//显示福建的城市 
					var data = "<option>--请选择--</option>"+
					"<option>厦门</option>"+"<option>福州</option>"
					+"<option>泉州</option>"
					city.innerHTML=data;
				}else if(province==3){
					//显示河南
					var data = "<option>--请选择--</option>"+
					"<option>郑州</option>"+"<option>洛阳</option>"
					+"<option>开封</option>"
					city.innerHTML=data;
				}else if(province==4){
					//山东
					var data = "<option>--请选择--</option>"+
					"<option>郑州</option>"+"<option>洛阳</option>"
					+"<option>开封</option>"
					city.innerHTML=data;
				}
			}
		</script>
	</body>
</html>

=====================================================================================

Global全局对象

Global全局对象:只有名称,所以调用方法时,直接写方法名称即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*Global全局对象:只有名称,所以调用方法时,直接写方法名称即可
			1.eval():将普通的字符串解析为js代码执行
			2.isNaN():判断是不是数字
			3.parseInt():将字符串类型的数字转成number类型数字
			4.parseFloat():将字符串类型的浮点数转成float浮点数*/
			
			//eval():将普通的字符串解析为js代码执行
			//document.write(2222);//方法的调用
			var str1 = "document.write(11111)";
			eval(str1);//字符串内容解析为js代码,相当于把双引号去掉了~~
			
			//isNaN():判断是不是数字,如果是数字,返回false,不是数字返回true
			var numer = 10;
			var flag1 = isNaN(numer);
			document.write(flag1);
			document.write("<hr/>")
			
			//转成整数
			var number1 = "10";//string
			var number2 = 10;//number
			
			//string->number
			var number3 = parseInt(number1);
			document.write(typeof number3);
			document.write("<hr/>")
			
		</script>
	</body>
</html>

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*/
			
			//1.定义一个数字
			var n1 = 2.1;
			var n1_end = Math.floor(n1);//2,向下取整,相当于去掉小数部分
			document.write(n1_end);
			document.write("<hr/>");
			
			var n2 =3.00001;
			var n2_end = Math.ceil(n2);//4,向上取整,相当于小数部分进1
			document.write(n2_end);
			document.write("<hr/>");
			
			//2.分页场景:根据总的记录数,以及每页显示的条数,求总页数
			var t=101;//select count(*) from table_name
			var p = 5;//每页显示的条数
			var totalPage=(t%p==0)?(t/p):(Math.ceil(t/p));
			document.write(totalPage);
			document.write("<hr/>");
			
			//3.场景:获取0-5之间的随机数
			var n3 = Math.random()*6;
			var n4 = Math.floor(n3);
			document.write(n4);
		</script>
	</body>
</html>

JSON对象

JSON对象概述

JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。

JSON作用：
方式一：客户端<--------------> 服务器端，进行数据交互
方式二：服务器端<-------------->服务器端，进行数据交互
总结：
json数据量级别少，传输速度快
json表示数据，描述的很清晰
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

简洁和清晰的层次结构使得 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数组
					(注意:大括号外边不要加双引号,加双引号就变成字符串了,
					在大括号里面除了数字不加引号以外,其它值都加引号)
					
				json的解析
				第一类:单个json对象:json对象.key; //类似map的方法 map.get(key)
				第二类:json数组对象
					步骤1:从数组中拿到单个json
					步骤2:然后再  json对象.key
			
			实际开发中:还有复杂的json数据格式
			
			*/
		   
		   
		   //复杂的json数据格式
		   //json的key:first
		   //json的value:{"id":6,"name":"jck"}
		   var casjson={
			   "first":{"id":6,"name":"jck"}
		   };
		   //解析复的json格式
		   var casUser = casjson.first;//{"id":6,"name":"jck"}
		   var casUserID = casUser.id;
		   document.write(casUserID);
		   document.write("<hr/>")
		   
		   
		   //1.第一类:单个json对象
		   var user={"id":1,"name":"jack"};
		   var id = user.id;
		   var name = user.name
		   document.write(id+","+name);
		   document.write("<hr/>")

		   //2.第二类:json数组
		   //静态数组
		   var users = [{"id":1,"name":"jack"},{"id":2,"name":"Rose"},{"id":3,"name":"ship"}];
		   //遍历数组
		   for (var i = 0; i < users.length; i++) {
			   //步骤1:拿到单个json对象
		   	var u = users[i];
			//步骤2:json对象.key
			document.write(u.id+","+u.name);
			document.write("<hr/>")
		   }
		</script>
	</body>
</html>

JavaScript面向对象及类的使用:

<!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);
				}
			}
			//创建对象
			var demo = new Demo(1000);
			demo.test();
		</script>
	</body>
</html>

引入外部js文件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 
		1.my.js文件:document.write("outer js") 
		2.在html页面引入外部js文件-->
		<script type="text/javascript" src="js/my.js" >
			
		</script>
		<script type="text/javascript">
			/*在html网页里面引入JavaScript
			方式一:html网页里面,书写标签,里面定义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>