JavaScript零基础入门--笔记动力节点最新老杜(四)全套笔记精髓

null NaN undefined这三个值有什么区别

在JS当中有两个比较特殊的运算符
 ==(等同运算符:只判断值是否相等)
===(全等运算符:既判断值是否相等,又判断数据类型是否相等) 

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

        alert(null === NaN); // false
        alert(null === undefined); // false
        alert(undefined === NaN); // false
    </script>
</body>

JS的常用事件

JS中的事件:
                
                    blur失去焦点    
                    focus获得焦点
                    
                    click鼠标单击
                    dblclick鼠标双击
                    
                    keydown键盘按下
                    keyup键盘弹起
                    
                    mousedown鼠标按下
                    mouseover鼠标经过
                    mousemove鼠标移动
                    mouseout鼠标离开
                    mouseup鼠标弹起
                    
                    reset表单重置
                    submit表单提交
                    
                    change下拉列表选中项改变,或文本框内容改变
                    select文本被选定
                    load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
                
                任何一个事件都会对应一个事件句柄,事件句柄是在事件前添加on。
                onXXX这个事件句柄出现在一个标签的属性位置上。(事件句柄以属性的形式存在。)

java中有回调函数机制: 


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

 JS中也有回调函数机制: 

<script type="text/javascript">
        // 对于当前程序来说,sayHello函数被称为回调函数(callback函数)
        // 回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,
        // 由其他程序负责调用该函数.
       function sayHello() {
            alert('hello js!')
       }
    </script>

 注册事件的第一种方式

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

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

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

    <script type="text/javascript">
        function doSome() {
            alert('dodododo')
        }
        // 第一步:先获取这个按钮对象(document是全部小写,内置对象,
        // 可以直接用,document就代表整个HTML页面)
        var btnObj = document.getElementById("mybtn")
        // 第二步:给按钮对象的onclick属性赋值
        btnObj.onclick = doSome
        //千万别加小括号.这是错误的写法.
        // 这行代码的含义是,将回调函数doSome注册到click事件上.
        //btnObj.onclick = doSome()
    </script>
</body>

 

 

 JS代码的执行顺序

 第一步:根据id获取节点对象
            var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没有加载到内存)
            
第二步:给节点对象绑定事件
            btn.onclick = function(){
                alert("hello js");
            }

<body onload="ready()">
    <script type="text/javascript">
        function ready() {
            var btn = document.getElementById("btn")
            btn.onclick = function () {
                alert('hello js')
            }
        }
    </script>
    <!--如果不在body那加东西,点击按钮没用,都不会调用函数ready-->
    <input type="button" value="按钮" id="btn">
</body>
<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>

 

JS代码设置节点的属性 

<body>
    <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"/>
</body>

 

 JS代码捕捉回车键

<body>
    <script type="text/javascript">
        window.onload = function () {
            var usernameElt = document.getElementById('username')
            //键盘按下去执行的方法
            usernameElt.onkeydown = function (a,b) {
                // 回车键的键值是13   // ESC键的键值是27
               alert(a)//object Event
               alert(b)//undefined
                //对于“键盘事件对象"来说,都有keyCode属性用来获取键值.
               alert(a.keyCode)//13 我按的是回车
            }
        }
    </script>
    <input type="text" id="username"/>
</body>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var usernameElt = document.getElementById('username')
            usernameElt.onkeydown = function (event) {
                if(event.keyCode === 13){
                    alert('正在验证....')
                }
            }
        }
    </script>

    <input type="text" id="username">
</body>

 

 JS的void运算符

void运算符的语法:void(表达式)
            运算原理:执行表达式,但不返回任何结果。
                javascript:void(0)
                其中javascript:作用是告诉浏览器后面是一段JS代码。
                以下程序的javascript:是不能省略的。

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

    <br>
    <!--void() 这个小括号当中必须有表达式-->
    <a href="javascript:void(100)" onclick="window.alert('test code')">
        既保留住超链接的样式,同时用户点击该超链接的时候执行一段JS代码,但页面还不能跳转。
    </a>
</body>

 

 JS的控制语句

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

<body>
    <script type="text/javascript">
        // JS中数组中元素的类型随意.元素的个数随意.
        var arr = [false,true,1,2,"abc",3.14];
        //遍历数组
        for (var i = 0; i < arr.length; i++) {
            alert(arr[i])
        }
        // for...in
        for (var i in arr){
            alert(arr[i])
        }

        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"])
    </script>
</body>

 

 

<body>
    <script type="text/javascript">
        //一个User类
        User  = function (username,password) {
            this.username = username
            this.password = password
        }
        var u = new User("张三", "444")
        for (var zhangshan in u){//zhangshan是一个字符串
            alert(u[zhangshan])//输出 张三  然后再李四
        }
        //alert(u.username)
        //alert(u.password)
    </script>

</body>

 

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值