Web前端基础---JavaScript函数&事件及其绑定&DOM模型&BOM模型

Day03 JavaScript

JavaScript是一种属于网络的高级脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用
户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JavaScript作用

可以通过事件操作HTML的元素、读写元素内容、验证提交数据、检验浏览器信息。也可以在HTML中添加动画效果。

JavaScript组成

ECMAScript（ECMA标准）：核心部分，包含基本语法，语句，事件，对象等
DOM（Document Object Model）：文档对象模型，操作元素及其内容
BOM（Broser Object Model）：浏览器对象模型，操作浏览器对象

JavaScript使用方式

1、行内式  ：直接在HTML标签中书写JS脚本代码
2、内嵌式 ：需要将JS脚本代码写到<script>标签中。该标签可以写在页面任意位置。
3、外链式 ：需要单独定义一个JS文件，将JS脚本代码放到该文件中，再将该JS文件引入到HTML           中。使用<script type=”” src=””>标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JavaScript使用方式</title>
		<!--外链式-->
		<script type="text/javascript" src="js/first.js"></script>
        <!--内嵌式-->
        <script type="text/javascript" src="js/first.js">
        	alert("这是内嵌式表现结果");
        </script>
	</head>
	<body>
		<!--行内式-->
		<input type="button" value="行内" onclick="javascript:alert('这是行内式表现结果！')" />
	</body>
</html>


first.js文件内容：
alert("这是外链式表现结果");

JavaScript基础语法

1、变量（不需要指定数据类型）
	语法格式：var 变量名;	var 变量名=变量值;	var 变量a,变量b;
注意点：变量名由字母，数字，下划线，$组成，数字不能开头。关键字不能作为变量名。

2、数据类型
	基本数据类型：
        1）Undefind：声明的变量没有初始化，默认值就是undefind。
        2）Null：只有一个值null，表示空，一个占位符。Undefind其实是从null派生                   的。所以，ECMAScript将这两者列为等值。
        3）Boolean：表示真假，只有两个值true和false。
        4）Number：表示任意数值。
        5）String：字符串，可以使用单引号或者双引号进行赋值。
	引用数据类型：
    	通常叫做类（class），JS会将引用数据类型转换成对象来处理。

JS基于对象但不是面向对象，对象的默认值null。
查看变量的数据类型：typeof(变量名);

3、运算符
    算数运算符：+  -  *  /  %  ++  --
    赋值运算符：=  +=  -=  *=  /=  %=
    比较运算符：==  >  <  >=  <=  !=
    逻辑运算符：&&  ||  !
    条件运算符：?:

4、分支结构
    1）if分支：（多用于区间判断）
        单分支：if(){}
        双分支：if(){}else{}
        多分支：if(){}else if(){}else{}
    2）switch分支：（多用于等值判断）
        switch(表达式){
        case 常量1:语句1;break;
        case 常量2:语句2;break;
        ......
        default:语句n;
        }

5、数组
    1）空数组    
    	var array1 = new Array();--->输出结果：[]
    2）有初始长度的数组   
    	var array2 = new Array(5);--->输出结果：[empty*5]
    3）有初始值的数组  
    	var array3 = [1,2,3];--->输出结果：[1,2,3]
    	var array4 = ["apple","orange"];--->输出结果：["apple","orange"]
    	
6、循环结构
JS中的循环和Java中循环基本一致，while循环，do while循环，for循环，增强型for循环。
其中增强型for循环略有差异。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>循环</title>
		<script type="text/javascript">
			var array = [1,2,3,4,5,6];
			for (var i = 0;i<array.length;i++) {
				console.log(array[i]);
			}
			console.log("-----------------------");
			for (var i in array) {
				console.log(array[i]);
			}
		</script>
	</head>
	<body>
	</body>
</html>

JavaScript函数

JS定义函数，直接使用function关键字即可。
基本语法：
function 函数名(参数){
函数体;
}
1、无参函数
2、有参函数
3、有返回值的函数

JavaScript事件及其绑定

1、JS中常用的事件
1）鼠标事件：单击(onclick)、双击(ondblclick)、确认按钮被点击（onsubmit）
           移入(onmouseover)、移出(onmouseout)、移动(onmousemove) 
2）键盘事件：按下(onkeydown)、抬起(onkeyup)、长按(onkeypress) 
3）表单事件：聚焦(onfocus)、失焦(onblur)、值改变(onchange)

2、事件的绑定
常用方式有两种，一是直接在标签中绑定，另一种是在JS中先获取要绑定的元素，再通过脚本进行绑定。
1）标签中直接绑定
2）获取元素再绑定
注意：使用方式二时，一定要注意代码执行的顺序。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS事件</title>
		<script type="text/javascript">
			function show(){
				alert("点击1展示结果!");
			}
		</script>
	</head>
	<body>
		<!--标签中直接绑定-->
		<input type="button" value="点击展示方式1" onclick="show()"/>
		<!--获取元素再绑定-->
		<input type="button" value="点击展示方式2" id="btn"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function() {
				alert("点击2展示结果!");
			}
		</script>
	</body>
</html>

3、常用事件讲解
1）焦点事件（只有可输入框才有）
    onblur：失焦
    onfocus：聚焦
2）键盘事件
    onkeydown：按键按下时
    onkeyup：按键释放时
3）鼠标事件
    onmouseover：鼠标移上去
    onmouseout：鼠标移开
4）内容改变事件
onchange：内容改变时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS事件</title>
		<script type="text/javascript">
			function show(){
				alert("点击展示结果!");
			}
			function getFocus(obj){
				obj.style.backgroundColor="yellow";
			}
			function loseFocus(obj){
				obj.style.backgroundColor="blue";
			}
			function keyboard1(obj){
				obj.style.backgroundColor="red";
			}
			function keyboard2(obj){
				obj.style.width="200px";
			}
			function change(id){
				var va = document.getElementById(id).value;
				document.getElementById(id).value = va.toUpperCase()
			}
		</script>
	</head>
	<body>
		<!--点击-->
		<input type="button" value="点击" onclick="show()" /><br />
		<!--聚焦与失焦-->
		<!--键盘事件-->
		请输入姓名：<input type="text" id="event1"  
			onfocus="getFocus(this)" onblur="loseFocus(this)" 
			onkeydown="keyboard1(this)" onkeyup="keyboard2(this)"/>
		<!--鼠标事件-->
		<div id="event2" style="width: 200px; height: 200px; color: darkmagenta; background-color: aliceblue; text-align: center;" 
			onkeydown="keyboard(this)"/>
			鼠标移过来
		</div>
		<script type="text/javascript">
			var mouse = document.getElementById("event2");
			mouse.onmouseover = function(){
				this.style.backgroundColor="yellow";
				this.innerHTML="请把鼠标移开"
			}
			mouse.onmouseout = function(){
				this.style.borderRadius="50%";
				this.style.lineHeight="200px";
				this.innerHTML="鼠标移过来"
			}		
		</script>
		<!--内容改变事件-->
		请输入姓名：<input type="text" id="event3"  
			onchange="change(this.id)" />
	</body>
</html>

DOM模型

文档对象模型（Document Object Model，简称DOM），是W3C制定的标准接口规范，是一种处理HTML和XML文件的标准API。DOM提供了对整个文档的访问模型，将文档作为一个树形结构，树的每个结点表示了一个HTML标签或标签内的文本项。将HTML或XML文档转化为DOM树的过程称为解析(parse)。HTML文档被解析后，转化为DOM树，因此对HTML文档的处理可以通过对DOM树的操作实现。DOM模型不仅描述了文档的结构，还定义了结点对象的行为，利用对象的方法和属性，可以方便地访问、修改、添加和删除DOM树的结点和内容。

使用DOM查找元素

常用的查找元素的方法：
1）document.getElementById(id)：通过ID值来查找元素
2）document.getElementsByTagName(name)：通过标签名获取元素
3）document.getElementsByClassName(class)：通过类名获取元素
4）document.getElementsByName(name)：通过name属性值获取元素
由于ID属性值唯一，所以通过ID获取的元素只有一个，而其他3中可以一次性获取多个元素。

案例1.表单数据验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function check() {
//				获取输入的用户名和密码
				var un = document.getElementById("un").value;
				var pw = document.getElementById("pw").value;
//				判断
				if(un==null || un=="") {
					alert("用户名不能为空");
//					如果为空则返回false,不能提交
					return false;
				}
				if(pw==null || pw=="") {
					alert("密码不能为空");
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form action="" method="" onsubmit="return check()">
		用户名：<input type="text" id="un" name="username" /><br />
		密码：<input type="text"  id="pw" name="password"/><br />
		<input type="submit"  name="submit" />
		</form>

	</body>
</html>

案例2.实现全选及反选效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function checkAll(){
//				获取全选框对象
				var all = document.getElementById("all");
//				获取其他选择框的对象(得到的是一个数组)
				var fruits = document.getElementsByName("selection");
//				获取全选框的checked属性的值（true or false）
				var allchecked  = all.checked;
//				遍历非全选框对象,获取每个对象的checked属性的值,并将全选框的该属性的值赋值给他们,
//				这样其他框这个值就一直保持与全选框一样了
				for (var i = 0; i<fruits.length; i++) {
					fruits[i].checked=allchecked;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" id="all"  onclick="checkAll()"/>全选<br />
		<input type="checkbox" name="selection" value="0"/>苹果<br />
		<input type="checkbox" name="selection" value="1"/>桃子<br />
		<input type="checkbox" name="selection" value="2"/>荔枝<br />
		<input type="checkbox" name="selection" value="3" />香蕉
	</body>
</html>

使用DOM修改元素

1、改变元素的文本内容
2、改变元素的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>使用DOM修改元素</title>
		<style type="text/css">
			div {
				width: 400px;
				height: 400px;
				background-color: cornflowerblue;
			}
		</style>
		<script type="text/javascript">
			function changeStyle(){
				var  divStyle = document.getElementById("style");
				divStyle.style.width="200px";
				divStyle.style.height="200px";
				divStyle.style.backgroundColor="blue"
				divStyle.style.color="#FF0000";
				divStyle.style.textAlign="center";
				divStyle.style.lineHeight="200px";
				divStyle.innerHTML="这是改变后的内容"
			}
		</script>
	</head>
	<body>
		<div id="style" >这是原本的内容</div>
		<input type="button" value="点我改变" onclick="changeStyle()"/>
	</body>
</html>

3、优化表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>优化表单验证</title>
		<script type="text/javascript">
			function check() {
//				获取输入的用户名和密码
				var un = document.getElementById("un").value;
				var pw = document.getElementById("pw").value;
//				判断
				if(un==null || un=="") {
					document.getElementById("us").innerText="用户名不能为空";
					document.getElementById("us").style.color="red";
//					如果为空则返回false,不能提交
					return false;
				}
				if(pw==null || pw=="") {
					document.getElementById("ps").innerText="密码不能为空";
					document.getElementById("ps").style.color="red";
					return false;
				}
				return true;
			}
		</script>
	</head>
	<body>
		<form action="" method="" onsubmit="return check()">
		用户名：<input type="text" id="un" name="username" />
		<span id="us"></span><br />
		密码：<input type="text"  id="pw" name="password"/>
		<span id="ps"></span><br />
		<input type="submit"  name="submit" />
		</form>
	</body>
</html>

BOM模型

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
document：文档对象
frames：HTML框架
location：页面的地址
history：页面的历史记录
navigator：浏览器相关信息
screen：屏幕相关信息

window定时器

1、周期定时器，每隔多少时间就调用某指定函数
	var timeid = window.setInterval(function,time);注意：时间单位是毫秒
	window.clearInterval(timeid);

案例：轮播效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
	</head>
	<body>
		<img src="img/1.jpg" width="400" onmouseover="stopImg()" onmouseout="startImg()"/>
		<script type="text/javascript">
			var i = 1;
			function changeImg(){
				//获取图片标签
				var img = document.getElementsByTagName("img")[0];
				img.src = "img/"+i+".jpg";
				if(i<8){
					i++;
				}else{
					i=1;
				}
			}
			//第一参数写法：changeImg或者"changeImg()"
			var timeid = window.setInterval(changeImg,100);
			//鼠标移到图片上，定时器失效
			function stopImg(){
				window.clearInterval(timeid);
			}
			//鼠标移开，定时器生效
			function startImg(){
				timeid = window.setInterval(changeImg,100);
			}
		</script>
	</body>
</html>

2、超时定时器，隔多少时间调用某指定函数，只执行一次
	var timeid = window.setTimeout(function,time);注意：时间单位是毫秒
	window.clearTimeout(timeid)

案例：小广告（图片延迟加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片延迟加载</title>
		<style type="text/css">
			img{
				display: none;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" width="400" />
		<script type="text/javascript">
			function showImg(){
				var img = document.getElementsByTagName("img")[0];
				img.style.display = "inline-block";
			}
			var timeid = window.setTimeout(showImg,1000);
			//window.clearTimeout(timeid);
		</script>
	</body>
</html>

案例：实现电子时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电子时钟</title>
	</head>
	<body>
		<div id="time"></div>
		<script type="text/javascript">
			function getTime(){
				var date = new Date();
				var year = date.getFullYear();
				//month的值是0-11
				var month = date.getMonth()+1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				var time = year+"年"+month+"月"+day+"日&nbsp;&nbsp;"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML = time;
			}
			getTime();
			setInterval(getTime,1000);
		</script>
	</body>
</html>

window弹框

1、警告框：window.alert(“text”);
2、确认框：window.confirm(“text”);点击确定返回true，点击取消返回false
3、提示框：window.prompt(“text”,”defaulttext”);点击确定返回输入内容，点击取消返回

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片延迟加载</title>
		<style type="text/css">
			img{
				display: none;
			}
		</style>
	</head>
	<body>
		<img src="img/1.jpg" width="400" />
		<script type="text/javascript">
			function showImg(){
				var img = document.getElementsByTagName("img")[0];
				img.style.display = "inline-block";
			}
			var timeid = window.setTimeout(showImg,1000);
			//window.clearTimeout(timeid);
		</script>
	</body>
</html>

window其他对象

1、location：当前页面的地址
	location.href：返回当前页面路径
	location.hostname：返回web主机域名
    location.pathname：返回当前页面的资源路径
    location.protocol：返回web协议
    location.port：返回web主机端口号
2、history：浏览器历史
常用方法：	
    forward()：等同于浏览器前进功能
    back()：等同于浏览器后退功能
    go()：参数是整数，1代表前进一步，-1代表后退一步
3、screen：用户屏幕信息
    screen.width：屏幕宽度
    screen.height：屏幕高度
    document.body.offsetWidth：网页可见区域宽度
	document.body.offsetHeight：网页可见区域高度

Web前端基础---JavaScript函数&事件及其绑定&DOM模型&BOM模型

Day03 JavaScript

JavaScript作用

JavaScript组成

JavaScript使用方式

JavaScript基础语法

JavaScript函数

JavaScript事件及其绑定

DOM模型

使用DOM查找元素

案例1.表单数据验证

案例2.实现全选及反选效果

使用DOM修改元素

BOM模型

window定时器

案例：轮播效果

案例：小广告（图片延迟加载

案例：实现电子时钟

window弹框

window其他对象

猜你喜欢