Web从小白到大神Day10 2020.10.15

最新推荐文章于 2020-10-20 11:33:02 发布

独饮敌敌畏丶

最新推荐文章于 2020-10-20 11:33:02 发布

阅读量112

点赞数

分类专栏： Web前端学习文章标签： js

本文链接：https://blog.csdn.net/afdafvdaa/article/details/109090415

版权

Web前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一.JS数据类型之Object类型

<!DOCTYPE html>
<html>
 	
	<head>
		<title>Object类型</title>
	</head>
	<body>
		<!--1.Object类型是所有类型的超类，自定义的任何类型，默认继承Object
			2.Object类只需要掌握prototype属性即可
			3.自己定义的类默认继承Object，所以自己定义的类中也有prototype属性
			4.在JS当中怎么定义类？怎么new对象？
				定义类的语法
					第一种方式 
						function 类名(形参){}
					第二种方式
						类名 = function(形参){}
				创建对象的语法
					new 构造方法名(实参)//构造方法和类名一致
					//在JS中，类的定义和构造函数的定义是一起的
		-->
			<script type="text/javascript">
				function sayHello(a,b){
					this.age = a;
					this.gender = b;

					this.getAge = function(){
						return this.age;//一定要加上this.
					}
				}

				//把sayHello当作一个普通的函数来调用
				sayHello();

				//把sayHello当作一个类来创建对象
				var obj = new sayHello();//obj是一个引用，保存内存地址指向堆中的对象

				var obj1 = new sayHello(10,"man");//别忘了写new
				alert(obj1.age);//两种做法等效
				alert(obj1["age"]);
				alert(obj1.getAge());

				//可以通过prototype这个属性给类动态扩展属性以及函数
				sayHello.prototype.getGender = function(){
					return this.gender;
				}
				alert(obj1.getGender());
			</script>
			
	</body>
</html>

二.JS数据类型之null NaN undefined这三个值的区别

<!DOCTYPE html>
<html>
 	
	<head>
		<title>null NaN undefined这三个值的区别</title>
	</head>
	<body>
			<script type="text/javascript">
				//null NaN undefined的数据类型不一致
				alert(typeof null);//object
				alert(typeof NaN);//number
				alert(typeof undefined);//undefined	

				//null和undefined可以等同
				alert(null == NaN);//false
				alert(null == undefined);//true
				alert(NaN == undefined);//false

				//== 是等同运算符
				//=== 是全等运算符，不仅判断值是否相等，还判断数据类型是否相同。
				//所以null === undefined 是false
				alert(1 == true);//是true
				alert(1 === true);//是false
			</script>
			
	</body>
</html>

三.JS的事件

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

<!DOCTYPE html>
<html>
 
	<head>
		<title>JS的常用事件</title>
	</head>
	<body>
			<input type="button" value="hello2" id="mybtn"/>
			<script type="text/javascript">
				//对于当前程序来说，sayHello函数被称为回调函数（callback函数）
				//回调函数的特点，自己把这个函数代码写出来了，但是这个函数不是自己负责调用，而是由其他程序负责调用该函数
				function sayHello(){
					alert("hello");
				}

				//第二种注册事件的方式，是使用纯JS代码完成事件的注册
					//第一步：先获取这个按钮对象（document是全部小写，内置对象，可以直接用，document就代表整个HTML页面）
					var myBtn = document.getElementById("mybtn");
					//第二步，给按钮对象的onclick属性赋值
					myBtn.onclick = sayHello;//这里没有括号，只是把函数名写上
					//这行代码的含义是，将回调函数doSome注册到click事件上。

					//也可以直接一次性
					document.getElementById("myBtn").onclick = function(){
							alert("test");//这个函数在页面打开的时候只是注册上，不会被调用，在click事件发生之后才会调用
						}

			</script>
			<!--注册事件的第一种方式：直接在标签中使用事件句柄-->
			<!--以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用，我们称这个函数为回调函数-->
			<input type="button" value="hello" onclick="sayHello()"/>

			<!--第二种注册事件的方式，是使用纯JS代码完成事件的注册-->
			
	</body>
</html>

四.JS执行的顺序

<!DOCTYPE html>
<html>
 
	<head>
		<title>关于JS代码的执行顺序</title>
	</head>
	<body onload="ready()">
		<!--load事件什么时候发生？等页面全部元素加载完毕之后才会发生-->

			<script type="text/javascript">
				function ready(){
					var btn = document.getElementById("mybutton");
					btn.onclick = function(){
						alert("hello");
					}
				}
			</script>
			<input type="button" value="hello" id="mybutton"/>
	</body>
</html>

版本2

<!DOCTYPE html>
<html>
 
	<head>
		<title>关于JS代码的执行顺序</title>
	</head>
	<body>
			<script type="text/javascript">
				
				/*window.οnlοad=ready;
				function ready(){//函数a
					var btn = document.getElementById("mybutton");
					btn.onclick = function(){//函数b
						alert("hello");
					}
				}*/
				//页面加载的过程中，将a函数注册给了load事件
				//页面加载完毕之后，load事件发生了，此时执行回调函数
				//回调函数a执行的过程中，把b函数注册给了id=“mybutton”的click事件
				//当id=“mybutton”的节点发生click事件之后，b函数被调用执行
				window.onload = function(){
					//函数a
					document.getElementById("mybutton").onclick = function(){//函数b
							alert("hello");
						}
				}
			</script>
			<input type="button" value="hello" id="mybutton"/>
	</body>
</html>

五.JS更改节点的属性

<!DOCTYPE html>
<html>
 
	<head>
		<title>JS更改节点的属性</title>
	</head>
	<body>
			<script type="text/javascript">
				window.onload = function(){
						document.getElementById("btn").onclick = function(){
							var mytext = document.getElementById("mytext").type = "checkbox";
						}
				}
			</script>
			<input type="text" id="mytext"/>
			<input type="button" value="将文本框修改为复选框" id="btn"/>
			
	</body>
</html>