二阶段（课3）

最新推荐文章于 2022-05-05 15:13:40 发布

倔迪

最新推荐文章于 2022-05-05 15:13:40 发布

阅读量125

点赞数

本文链接：https://blog.csdn.net/Girl_Cool/article/details/100011471

版权

8.21（周三）：JavaScript基础+JavaScript的DOM和BOM

一.JavaScript基础

1.1概述

JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。用来给HTML网页增加动态功能。
完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object Model），浏览器对象模型(BOM Browser Object Model)。
在JavaScript中，任何变量都用var关键字来声明，var是variable的缩写。
JavaScript的三种使用方式：
a.在< scripe type="…" >< /script >标签中，script可以放在网页中任何位置。
b.使用外部JavaScript文件，把js代码放入单独的文件中，这个文件的扩展名.js
c.放在标签中的事件属性中,常见事件 ,onclick。
注意：放在标签中时，内部双引号，要变成单引号
运算符同java，但是“ == ” 比较的是两个数据的值，不包括类型，“ === ”全相等，比较两个数据的值，也比较数据的类型是否相等

1.2基本语法

注意给变量起名不能是关键字和name，否则可能会出现异常。
注意赋值时，如果是数字，加不加双引号都行，不加双引号是number类型，加双引号是string类型，如果是字符，一定要加双引号。
判断的特殊用法：

条件是一个字符变量：该变量已赋值 true，不是或赋的是null/undefined，false
条件是一个数字变量：变量的值是0 假的，非0真的
如果有一个对象：判断是否有一个属性（eg：if(obj.aa)）

1.2.1数据类型

基本类型：number、string、boolean、undefined（未被初始化）、 null（Object类型）五种。 u n n s b

判断数据类型：typeof()
document.write("age"+age+"类型"+typeof(age));

引用（对象）类型：
（1）创建“对象定义”类似“类”；
（2）JavaScript对象的json表示法；
（3）JavaScript创建数组：Array()—不用给长度，可以任意添加

//引用（对象）类型
			//创建“对象定义”类似“类”
			function Person(){
				//属性
				this.name;
				this.age;
				this.gender;
				//函数
				this.show=function(){
					document.write("姓名:"+this.name+" 年龄："+this.age+" 性别："+this.gender);
				}
			}
			//创建对象
			document.write("<br />")
			var shaobo=new Person();
			shaobo.name="少泊";
			shaobo.age=20;
			shaobo.gender="男";
			shaobo.show();
			//使用Object创建对象
			var fahai=new Object();
			fahai.name="法海";
			fahai.age=22;
			fahai.gender="男";
			fahai.address="北京";
			fahai.show=function(){
				document.write(this.name+"..."+this.age+"..."+this.gender+"..."+this.address);
			}
			document.write("<br />")
			fahai.show();
			
			document.write("<br />")
			//JavaScript对象的json表示法
			var zhenzhen={"name":"真真","age":20,"gender":"男" ,"address":"上海"};
			document.write(zhenzhen.name+" "+zhenzhen.age+" "+zhenzhen.gender+" "+zhenzhen.address);
			
			document.write("<br />")
			//JavaScript创建数组
			//不用给长度，给了也没意义,还是可以超
			var nums=new Array(3);
			document.write("nums长度"+nums.length);//长度=3
			nums[0]=10;
			nums[1]=20;
			nums[2]=30;
			nums[3]=40;
			nums[4]=50;
			document.write("<br />")
			document.write("nums长度"+nums.length);//长度=5
			document.write("<br />")
			//遍历
			for (var i=0;i<nums.length;i++) {
				document.write(nums[i]+" ")
			}
			document.write("<br />")
			//增强for,i是角标
			for (var i in nums) {
				document.write(nums[i]+" ");
			}
			
			//创建数组的json表示法
			var names=["zhangsan","lisi","wangwu",10,20];
			document.write(names.length);
			document.write("<br />")
			for (var i in names) {
				document.write(names[i]+" ");
			}
			
			//Array的map使用，无长度，无角标
			var map=new Array();
			map["cn"]="中国";//相当于给map加了个属性，并不是给map赋值
			map["usa"]="美国";
			map["uk"]="英国";
			document.write("<br />")
			document.write("map:"+map.length);//长度还是0
			document.write("<br />")
			for (var i in map) {//i是key
				document.write(i+"=="+map[i]+" ");
			}
			document.write("<br />")
			document.write(map.cn);
			document.write(map["cn"]);

1.3JavaScript函数和事件

1.3.1函数

用function关键字来声明，后面是函数名字，参数列表里不写var。整个方法不写返回值类型。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
	<body>
		<h1>函数的使用：function</h1>
		<script type="text/javascript">
			//定义一个普通函数,不能写this 命名首字母小写
			function calcSum(){
				var sum=0;
				for (var i=0;i<100;i++) {
					sum+=i;
				}
				document.write("1-100的和为："+sum);
				return sum;
			}
			//调用函数
			calcSum();
			document.write("<br />")
			var n=calcSum();
			document.write(n);		
			//定义一个带参数的函数
			function add(a,b){
				var c=a+b;
				document.write("c:"+c);
				document.write("<br />")
				//当只传一个参数时，可以，b值为undefined
				//NaN not a number 不是一个数字
			}
			add(100,200,300,400);
			//300,400放在arg里了
		</script>
	</body>
</html>

闭包：定义在一个函数内部的函数
注意：会对全局变量进行保护
闭包好处：1 使局部变量常驻内存，2 避免污染全局变量 3 .提高封装性保护局部变量

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
	<body>
		<script type="text/javascript">
			function f1(){
				var n=10;//没有释放，保护了n---重点
				function f2(){
					//n=n++;n永远=10
					n++;
					//n=n+1;同n++，调用一次加1
					document.write("n:"+n)
				}
				return f2;
			}
			var n=100;//与函数内部的n不是同一个，不会产生影响
			var f3=f1();
			f3();
			f3();//因为n没有释放，所以每次调用都加一
		</script>
	</body>
</html>

系统函数：alert弹出窗口　confirm确认窗口　prompt输入窗口
　　　　　parseInt(); 字符串转换整数
　　　　　parseFloat(); 字符串转成小数
　　　　　isNaN(); 判断数字.是不是.不是.一个数字。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
	<body>
		<script type="text/javascript">
			alert("弹出窗口");
			if(confirm("确认要删除吗")){
				console.log("删除了");
			}
			var name=prompt("请输入明星").valueOf(this);
			console.log(name);
			var width="100aa";//放到后面，字母忽略；放到前面结果是NaN---不是一个数字
			var n=parseInt(width,"2");
			document.write(n);
			document.write("<br />")
		</script>
	</body>
</html>

1.3.2事件

事件	描述
onchange	HTML 元素内容改变(离开光标触发)
onclick	用户点击 HTML 元素
onmouseover	光标移动到HTML元素
onmouseout	光标离开HTML元素
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

1.3.3字符串、正则表达式

字符串：

基本类型：number string boolean undefined null
引用类型：Number String Boolean Array Object
注意1：typeof(String)=Object,String instanceof String/Object=true
注意2：赋值时只有new才是引用类型，如果不new（eg：var s=String(“abc”)），也不是引用类型（是基本类型string类型）
注意3：(s=string,s2=String)s===s2.valueOf()—true；s.toString() ===s2—false
string ==String.valueOf()=String.toString()

字符串：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>JavaScript的String对象</title></head>
	<body>
		<script type="text/javascript">
			var s="abc";//s 基本类型  string
			var s2=new String("abc"); //s2引用类型 --Object
			document.write(typeof(s));document.write("<br/>");
			document.write(typeof(s2));document.write("<br/>");
			//instancof 判断对象是否是某种类型
			document.write(s2 instanceof String);document.write("<br/>");
			document.write(s instanceof String);document.write("<br/>");
			document.write(s==s2);document.write("<br/>");
			document.write(s===s2);document.write("<br/>");
			document.write("字符串的长度:"+s.length);document.write("<br/>");
			document.write("charAt():"+s2.charAt(2));document.write("<br/>");
			var say="java是世界上最好的语言";
			var sub=say.substr(0,4);
			document.write(sub);
			var sub2=say.substring(5,7);document.write("<br/>");
			document.write(sub2);document.write("<br/>");
			document.write(s2.toString());document.write("<br/>");
			document.write("s2:"+s2.valueOf());document.write("<br/>");
			document.write(s2.toString()===s2.valueOf());document.write("<br/>");
			document.write(s===s2.valueOf());
			var n=100;
			var n2=new Number(n);document.write("<br/>");
			document.write(n==n2);document.write("<br/>");
			document.write(n===n2);document.write("<br/>");
			var b=true;
			var b2=new Boolean(b);
			document.write(b===b2);
		</script>
	</body>
</html>
结果：
string
object
true
false
true
false
字符串的长度:3
charAt():c
java
世界
abc
s2:abc
true
true
true
false
false

正则表达式：与java语法几乎一致

语法：var reg=new RegExp("^1[3589]\\d{9}$ ");或var reg2=/1[3589] \d{9}$/;
第二种方式就不用写两个“\\”了
修饰符：用于执行区分大小写和全局匹配:

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

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>javascript正则表达式</title></head>
	<body>
		<script type="text/javascript">
			var reg=new RegExp("^1[3589]\\d{9}$");
			var reg2=/1[3589]\d{9}$/;
			var b=reg2.test("13167371397");
			document.write(b+"<br/>");
			var reg3=/^abc$/i;
			var b2=reg3.test("ABC");
			document.write(b2+"<br/>");
			var content="java真好，java真棒，Java第一,JAVA";
			var reg4=/java/ig;
			var v=null;
			while(v=reg4.exec(content)){
				document.write(v+"<br/>");
			}
			var str="hello java,java是最好的语言，我爱Java";
			var reg5=/java/ig;
			var arr=str.match(reg5);
			document.write(arr.length);
		</script>
	</body>
</html>

二.DOM和BOM

2.1 DOM

2.1.1获取元素

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到HTML 元素.

var x=document.getElementById("intro");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro");

2.1.2修改HTML

改变 HTML 元素的内容：

document.getElementById(id).innerHTML="abcd";
document.getElementById(id).innerText="xxxx";

改变 HTML 元素的属性：

document.getElementById(id).attribute=新属性值

改变 HTML 元素的样式：

document.getElementById(id).style.property=新样式

2.1.3创建和删除元素

记住例子！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>创建和删除DOM元素</title></head>
	<body>
		<div id="box">
			<span id="span1" style="color: red;">hello</span>
			创建和删除DOM元素
		</div>
		<input type="button" value="创建元素" onclick="click1()" />
		<input type="button" value="删除元素" onclick="click2()" />
		<script type="text/javascript">
			function click1(){
				//1创建元素img
				var img1=document.createElement("img");
				//2给元素属性赋值
				img1.src="img/05.jpg";
				img1.alt="图片";
				img1.style.width="100px";
				//3把元素加入dom中
				//appendChild()
				//document.getElementById("box").appendChild(img1);
				//insertBefore()
				var span1=document.getElementById("span1");
				document.getElementById("box").insertBefore(img1,span1);	
			}
			function click2(){
				var span1=document.getElementById("span1");
				//1获取父节点，再调用removeChild(子元素);
				//span1.parentNode.removeChild(span1);
				//2直接删除
				span1.remove();
			}
		</script>	
	</body>
</html>

2.1.4 DOM事件

addEventListener() 方法，在用户点击按钮时触发监听事件
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄，可以向一个元素添加多个事件句柄，多个同类型的事件句柄，如：两个 “click” 事件。
removeEventListener() 方法，移除事件的监听。
语法：

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 “click” 或 “mousedown”). 把on去掉
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
	<body>
		<input id="btn1" type="button" value="普通按钮" />	
		<div id="div1" style="width: 200px; height: 200px; background-color: skyblue;">
			<p id="p1" style="width: 100px; height: 100px; background-color: bisque;"></p>
		</div>
		<script type="text/javascript">
		//会被覆盖：
//			document.getElementById("btn1").οnclick=function(){
//				alert("点我干嘛?");
//			}
//			document.getElementById("btn1").οnclick=function(){
//				alert("你再点我?");
//			}
//			document.getElementById("btn1").οnclick=function(){
//				alert("你又点我?");
//			}

			function f1(){
				alert("你点我干嘛");
			}
			//使用事件监听的方式添加
			document.getElementById("btn1").addEventListener("click",f1);
			document.getElementById("btn1").addEventListener("click",function(){
				alert("你再点我?");
			});
			document.getElementById("btn1").addEventListener("click",function(){
				alert("你又点我?");
			});
			//删除事件监听
			document.getElementById("btn1").removeEventListener("click",f1);
			//添加onclick事件
			document.getElementById("div1").addEventListener("click",function(){
				alert("你点击了div1");
			},false);	
			document.getElementById("p1").addEventListener("click",function(){
				alert("你点击了p1");
				//阻止冒泡
				event.stopPropagation();
			},false);	
		</script>
	</body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>DOM操作事件</title></head>
	<body>
		<div id="div1" style="width: 100px; height: 100px; background-color: red;"></div>
		<input type="button" value="添加事件" onclick="click1()" />
		<script type="text/javascript">
			function click1(){
				var div1=document.getElementById("div1")
				//调用事件属性赋值
				div1.onmouseover=function(){
					this.style.backgroundColor="skyblue";
				}
				div1.onmouseout=function(){
					this.style.backgroundColor="red";
				}
			}
		</script>
	</body>
</html>

2.2 JavaScript的BOM

浏览器对象模型 (BOM):(Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一。

2.2.1 window尺寸和方法

有三种方法能够确定浏览器窗口的尺寸：

- window.innerHeight - 浏览器窗口的内部高度(不包括滚动条、菜单栏、工具栏)
- window.innerWidth - 浏览器窗口的内部宽度(不包括滚动条、菜单栏、工具栏)

- document.documentElement.clientHeight
- document.documentElement.clientWidth

- document.body.clientHeight
- document.body.clientWidth

window方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>window对象</title></head>
	<body>
		<div id="div1">xxxxxx</div>
		<input type="button" value="获取window窗口宽度和高度" onclick="click1()" />
		<input type="button" value="打开窗口" onclick="click2()" />
		<input type="button" value="关闭窗口" onclick="click3()" />
		<script type="text/javascript">
			var age=20;
			document.write(window.age);
			function show(){
				document.write(window.age);
			}	
			window.show();	
			var div1=window.document.getElementById("div1");
			console.log(div1.innerHTML);		
//			window.alert();
//			window.confirm()
		/*获取浏览器窗口的尺寸*/				
//		var x;
//		var y;
//		var z=10;	
//		var result=x||y||z;
//		document.write(result);
		function click1(){
				var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
				var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
				alert("宽度:"+w+" 高度:"+h);	
		}
		var mywindow;
		function click2(){
			mywindow=window.open("http://www.baidu.com");
		}
		function click3(){
			//window.close();//关闭当前窗口
			mywindow.close();
		}
		</script>
	</body>
</html>

2.2.2 Screen

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

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

2.2.3 Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.href 属性返回当前页面的 URL。
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

2.2.4 History

window.history 对象包含浏览器的历史。
历史：指的不是通常的历史记录，而是你前进和后退的历史记录，所以初始时是没有历史记录的

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

<html><head><meta charset="UTF-8"><title>history对象</title></head>
	<body>
		<input type="button" value="显示历史记录个数" onclick="click1()" />
		<input type="button" value="前进1个" onclick="click2()" />
		<input type="button" value="前进2个" onclick="click3()" />
		<a href="aaa.html">去aaa.html</a>
		<script type="text/javascript">
			function click1(){
				var len=window.history.length;
				alert(len);
				for(var i=0;i<len;i++){	
				}
			}
			function click2(){
				window.history.forward();
			}
			function click3(){
				window.history.go(2);
			}
		</script>
	</body>
</html>

<html><head><meta charset="UTF-8"><title>aaa</title></head>
	<body>
		<h2>aaa页面</h2>
		<a href="bbb.html">去bbb.html</a>
		<input type="button" value="后退" onclick="click1()" />
		<script type="text/javascript">
			function click1(){
				window.history.back();
			}
		</script>
	</body>
</html>

2.2.5 Navigator（了解即可）

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

2.2.6 JavaScript计时函数

setInterval() 周期执行函数
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
setTimeout() 延迟执行函数,延迟执行指定的函数，只能执行一次。
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

<html><head><meta charset="UTF-8"><title>setInterval函数的使用</title></head>
	<body>
		<script type="text/javascript">
			var i=0;
			function show(){
				//console.log("输出:"+i);
				document.write("<h2>输出"+i+"</h2>");
				i++;
				if(i==10){
					clearInterval(tid);
				}
			}
			var tid=setInterval("show()",1000); //相当于开启一个新的线程
			//浏览器解析页面有一个线程:渲染线程(主线程)
			//不会输出任何数据
//			for(;;){
//				show();
//			}	
		</script>
	</body>
</html>

<html><head><meta charset="UTF-8"><title>setTimeOut的使用</title></head>
	<body>
		<div id="div1"></div>
		<script type="text/javascript">
			var num=1;
			function show(){
				var div1=document.getElementById("div1");
				div1.innerHTML="javascript的setTimeout函数"+num;
				num++;
				setTimeout("show()",1000);
			}
			setTimeout("show()",5000);//开启线程
		</script>
	</body>
</html>

2.2.7案例:动态显示时间

<html><head><meta charset="UTF-8"><title>动态显示时间</title></head>
	<body>
		<div id="clock"></div>
		<input id="btn1" type="button" value="暂停" onclick="stoptime()" />
		<input id="btn2" type="button" value="开始" onclick="starttime()" disabled="disabled" />
		<script type="text/javascript">
			var clock=document.getElementById("clock");
			var btn1=document.getElementById("btn1");	
			var btn2=document.getElementById("btn2");
			function showtime(){
				var d=new Date();
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				var day=d.getDate();
				var h=d.getHours();
				var m=d.getMinutes();
				var s=d.getSeconds();
				clock.innerHTML="<h2>"+year+"-"+month+"-"+day+" "+h+":"+m+":"+s+"</h2>";
			}
			var tid=setInterval("showtime()",1000);
			function stoptime(){
				clearInterval(tid);
				btn2.disabled=false;
				btn1.disabled=true;
			}
			function starttime(){
				tid=setInterval("showtime()",1000);
				console.log(tid);
				btn1.disabled=false;
				btn2.disabled=true;
			}
		</script>
	</body>
</html>

倔迪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二阶段（课3）

8.21（周三）：JavaScript基础+JavaScript的DOM和BOM一.JavaScript基础1.1概述JavaScript(LiveScript)一种解释性脚本语言，是一种动态类型、弱类型、基于原型继承的语言，内置支持类型。用来给HTML网页增加动态功能。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型（DOM Document Object...
复制链接

扫一扫