null undefined NaN的区别和事件
  TEZNKK3IfmPf 2023年11月13日 17 0

在js当中有两个比较特殊的运算符

== 等同运算符,只判断值是否相同

=== 全等运算符,既判断值是否相同,又判断数据类型是否相等

代码在014 null undefined NaN的区别

<!-- null undefined NaN的区别  21 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>null undefined NaN的区别</title>
	</head>
	<body>
		<script type="text/javascript">
			// == 是等同运算符
			alert(1 == true); // true
			alert(1 === true); // false
			
			// 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
			
			//在js当中有两个比较特殊的运算符
			//== 等同运算符,只判断值是否相同
			//=== 全等运算符,既判断值是否相同,又判断数据类型是否相等
			alert(null===NaN);//false
			alert(null===undefined);//false
			alert(NaN===undefined);//false
			
			
		</script>
	</body>
</html>

2. js中的事件  22

blur失去焦点

focus获得焦点

 

click鼠标单击

dblclick鼠标双击

 

keydown键盘按下

keyup键盘弹起

 

mousedown鼠标按下

mouseover鼠标经过

mousemove鼠标移动

mouseout鼠标离开

mouseup鼠标弹起

 

reset表单重置

submit表单提交

 

change下拉列表选中项改变,或文本框内容改变

select文本被选定

load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)

 

任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。

onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)

2.1 回调函数概念  23

对于当前程序来说,sayHello函数被称为回调函数(callback函数)

回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.

   function sayHello(){

   alert("hello js!");

   }

2.1.1 java中的回调函数  23

java中也有回调函数机制: public class MyClass{

public static void main(String[] args){
			// 主动调用run()方法,站在这个角度看run()方法叫做正向调用。
			run();
		}
		
		// 站在run方法的编写者角度来看这个方法,把run方法叫做回调函数。
		public static void run(){
			System.out.println("run...");
		}
	}

2.2 注册事件的两种方式  22-24

代码在015 js中的事件  22-24

<!-- js中的事件   22-24 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js中的事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/*
				JS中的事件:   22
				
					blur失去焦点	
					focus获得焦点
					
					click鼠标单击
					dblclick鼠标双击
					
					keydown键盘按下
					keyup键盘弹起
					
					mousedown鼠标按下
					mouseover鼠标经过
					mousemove鼠标移动
					mouseout鼠标离开
					mouseup鼠标弹起
					
					reset表单重置
					submit表单提交
					
					change下拉列表选中项改变,或文本框内容改变
					select文本被选定
					load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
				
				任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
				onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)
			*/
		   
		   // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
		   // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序负责调用该函数.
		   function sayHello(){
			   alert("hello js!");
		   }
		   
		</script>
		
		<!-- 注册事件的第一种方式,直接在标签中使用事件句柄 -->
		<!--以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。-->
		<input type="button" value="hello" onclick="sayHello()"/> 
		
		<input type="button" value="hello2" id="mybtn"/>
		<input type="button" value="hello3" id="mybtn3"/>
		<input type="button" value="hello4" id="mybtn4"/>
		<script>
			function doSome(){
				alert("do some……");
			}
			/*
				第二种注册事件的方式,是使用纯JS代码完成事件的注册。   24
			*/
		   // 第一步:先获取这个按钮对象(document是全部小写,内置对象,可以直接用,document就代表整个HTML页面)
		   var btnObj = document.getElementById("mybtn");
		   //第二部:给这个按钮对象的onclik属性赋值
		   // 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
		   // 这行代码的含义是,将回调函数doSome注册到click事件上.
		   btnObj.onclick=doSome;
		   
		   
		   var mybtn3 = document.getElementById("mybtn3")
		   //这里直接将函数写在了这里,因为没有名字,称为匿名函数,也是一个回调函数
		   // 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.
		   mybtn3.onclick=function(){  
			   alert("test....");
		   }
		   
		   //将上述合成一句话
		   document.getElementById("mybtn4").onclick=function(){
			   alert("test2222222.....");
		   }
		   
		</script>
	</body>
</html>

3. js代码的执行顺序  25

3.1 普通写法

代码在016 js代码的执行顺序

<!-- js代码的执行顺序  25 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js代码的执行顺序</title>
	</head>
	<!-- load事件什么时候发生?页面全部元素加载完毕之后才会发生。-->
	<body onload="ready()">
		<script type="text/javascript">
			
			/* // 第一步:根据id获取节点对象
			var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
			// 第二步:给节点对象绑定事件
			btn.onclick=function(){
				alert("hello js");
			} */
			
			function ready(){
				var btn = document.getElementById("btn"); 
				btn.onclick=function(){
					alert("hello js");
				}
			}
			
		</script>
		
		<input type="button" value="hello" id="btn"/>
		
	</body>
</html>

3.2 升级写法常用  25

页面加载的过程中,将a函数注册给了load事件

页面加载完毕之后,load事件发生了,此时执行回调函数a

回调函数a执行的过程中,把b函数注册给了id="btn"的click事件

当id="btn"的节点发生click事件之后,b函数被调用并执行.

window.onload=function(){// 这个回调函数叫做a

document.getElementById("btn").onclick=function(){// 这个回调函数叫做b

alert("hello js......");

}

}

代码在017 js代码的执行顺序2

<!-- js代码的执行顺序2  25 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js代码的执行顺序2</title>
	</head>
	<body>
		<script type="text/javascript">
			// 页面加载的过程中,将a函数注册给了load事件
			// 页面加载完毕之后,load事件发生了,此时执行回调函数a
			// 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
			// 当id="btn"的节点发生click事件之后,b函数被调用并执行.
			window.onload=function(){// 这个回调函数叫做a
				document.getElementById("btn").onclick=function(){// 这个回调函数叫做b
					alert("hello js......");
				}
			}
			
		</script>
		
		<input type="button" value="hello" id="btn"/>
		
	</body>
</html>

4. js代码设置节点的属性  26

一个节点对象中只要有的属性都可以通过 "."来调出

代码在018 js代码设置节点的属性

<!-- js代码设置节点的属性  26 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js代码设置节点的属性</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("btn").onclick=function(){//这个函数是给按钮设置功能即  将文本框修改为复选框
					var mytext = document.getElementById("mytext");//这里根据id得到文本框
					//一个节点对象中只要有的属性都可以通过 "."来调出
					mytext.type="checkbox";//拿到文本框的type属性进行修改
				}
			}
		</script>
		<input type="text" id="mytext"/>
		<input type="button" value="将文本框修改为复选框" id="btn"/>
	</body>
</html>
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月13日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年03月29日   75   0   0 标签js
  TEZNKK3IfmPf   2024年03月29日   20   0   0 js
  TEZNKK3IfmPf   2023年11月15日   27   0   0 ajaxjs
  TEZNKK3IfmPf   2023年11月15日   30   0   0 javajavascriptjs
  TEZNKK3IfmPf   2023年11月15日   35   0   0 csshtmljs
TEZNKK3IfmPf