JavaScript部分内容2

目录

null NaN undefined区别

== 和 ===

null NaN nudefined

JS常用事件

注册事件的第一种方式,直接在标签中使用事件句柄

第二种注册事件的方式,是使用纯JS代码完成事件的注册。

第一步:先获取这个按钮对象

第二步:给按钮对象的onclick属性赋值

JS代码的执行顺序

第一种:

标签中进行onload

第二种:js脚本内onload加载

JS代码捕捉回车键 

JS-void运算符

JS的控制语句

for in 

with()


null NaN undefined区别

== 和 ===

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


			alert(1 == true); // true
			alert(1 === true); // false

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

			alert(null === NaN); // false
			alert(null === undefined); // false
			alert(undefined === NaN); // false

null NaN nudefined

			// 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(undefined == NaN); // false

JS常用事件

                    blur失去焦点    
                    focus获得焦点
                    
                    click鼠标单击
                    dblclick鼠标双击
                    
                    keydown键盘按下
                    keyup键盘弹起
                    
                    mousedown鼠标按下
                    mouseover鼠标经过
                    mousemove鼠标移动
                    mouseout鼠标离开
                    mouseup鼠标弹起
                    
                    reset表单重置
                    submit表单提交
                    
                    change下拉列表选中项改变,或文本框内容改变
                    select文本被选定
                    load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)

                任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
                onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)

注册事件的第一种方式,直接在标签中使用事件句柄

以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。

        </script>
		   function sayHello(){
			   alert("hello js!");
		   }
		</script>
		
		<input type="button" value="hello" onclick="sayHello()"/>

第二种注册事件的方式,是使用纯JS代码完成事件的注册。

 

		<input type="button" value="hello2" id="mybtn" />
		<input type="button" value="hello3" id="mybtn1" />

		<script type="text/javascript">
			function doSome(){
				alert("do some!");
			}

第一步:先获取这个按钮对象

var btnObj = document.getElementById("mybtn");

document是全部小写,内置对象,可以直接用,document就代表整个HTML页面 

第二步:给按钮对象的onclick属性赋值

btnObj.onclick = doSome; 

 注意:千万别加小括号. btnObj.onclick = doSome();这是错误的写法.
 这行代码的含义是,将回调函数doSome注册到click事件上.

		   var mybtn1 = document.getElementById("mybtn1");
		   mybtn1.onclick = function(){ 
			   alert("test.........."); 
		   }

 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.

 这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会调用.


JS代码的执行顺序

第一种:<body>标签中进行onload

load事件什么时候发生?页面全部元素加载完毕之后才会发生

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

第二种:js脚本内onload加载

	<body>
		
		<script type="text/javascript">

			window.onload = function(){ // 这个回调函数叫做a
				document.getElementById("btn").onclick = function(){ // 这个回调函数叫做b
					alert("hello js..........");
				}
			}
			
		</script>
		
		<input type="button" value="hello" id="btn" />
		
	</body>

页面加载的过程中,将a函数注册给了load事件
页面加载完毕之后,load事件发生了,此时执行回调函数a
回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
当id="btn"的节点发生click事件之后,b函数被调用并执行.


JS代码设置节点属性

		<script type="text/javascript">
			window.onload = function(){
				document.getElementById("btn").onclick = function(){
					var mytext = document.getElementById("mytext");
					// 一个节点对象中只要有的属性都可以"."
					mytext.type = "checkbox";
				}
			}
		</script>
		
		<input type="text" id="mytext"/>
		
		<input type="button" value="将文本框修改为复选框" id="btn"/>

点击前:

点击后:

 


JS代码捕捉回车键 

回车键的键值是13
ESC键的键值是27

				usernameElt.onkeydown = function(a, b, c){
					// 获取键值
					// alert(a); // [object KeyboardEvent]
					// alert(b);   //undefined
					// alert(c);   //undefined
				}

这说明,function()括号里面只能传一个参数,这个参数是“事件”

			window.onload = function(){
				var usernameElt = document.getElementById("username");

			   usernameElt.onkeydown = function(event){
			   	// 获取键值
			   	// 对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
				alert(event.keyCode);
			   }
			  usernameElt.onkeydown = function(event){
				  if(event.keyCode === 13){
					  alert("正在进行验证....");
				  }
			  }

JS-void运算符

JavaScript种其他运算符与Java一样,特殊的为void()运算符

            void运算符的语法:void(表达式)
            运算原理:执行表达式,但不返回任何结果。
                javascript:void(0)
                void() 小括号里面必须要有表达式内容,不写视为错误

                其中javascript:作用是告诉浏览器后面是一段JS代码。
                以下程序的javascript:是不能省略的。

		<a href="javascript:void(0)" onclick="window.alert('test code')">
			既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
		</a>


JS的控制语句

        1、if
        2、switch
        
        3、while
        4、do .. while..
        5、for循环
        
        6、break
        7、continue
        
        8、for..in语句(了解)
        9、with语句(了解)

for in 

一般for循环遍历数组

		   // 创建JS数组
		   var arr = [false,true,1,2,"abc",3.14];
		   // 遍历数组
		   for(var i = 0; i < arr.length; i++){
			   alert(arr[i]);
		   }

JS中数组中元素的类型随意.元素的个数随意.

for...in...遍历数组

		   // for..in
		   for(var i in arr){
			   //alert(i);
			   alert(arr[i]);
		   }

此时var i 表示数组的下标

for..in语句可以遍历对象的属性 


		   User = function(username,password){
			   this.username = username;
			   this.password = password;
		   }

		   var u = new User("张三", "444");
		   alert(u.username + "," + u.password);
		   alert(u["username"] + "," + u["password"]);
		   
		   for(var shuXingMing in u){
			   //alert(shuXingMing)
			   //alert(typeof shuXingMing) // shuXingMing是一个字符串
			   alert(u[shuXingMing]);
		   }

此时var shuXingMing表示属性名

with()

wtih()可读性差,不推荐使用

		   alert(u.username);
		   alert(u.password);
		   
		   with(u){
			   alert(username + "," + password);
		   }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值