JavaScript(二)：对象、类、事件、捕捉和控制语句

JavaScript(二)：对象、类、事件、捕捉和控制语句

1. java和js定义类和创建对象的异同（如下图 ↓ ）。

image-20210504190036396

  • 可以看出，js创建对象和构造（方法）函数同时写在定义类中；而java创建类之后再创建的构造方法，相对繁琐。

2. null 、undefined、NaN的区别是什么？

  1. 可以看出，除了null和undefined值相同外，其他的都不一样；

    // =是赋值，==是判断值是否相等，===值和数据类型都相同
alert(null == undefined);//true   √
alert(null == NaN);//false
alert(NaN == undefined);//false

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

//tips；1 == true ;0 == false ;
alert(1 == true);//true
alert(0 == false);//true

3. 事件

  1. blur 失去焦点 focus 获得焦点

  2. click 鼠标单击 dbclick 鼠标双击

  3. keydown 键盘按下 keyup 键盘弹起

  4. mouthdown 鼠标按下 mouthup 鼠标弹起

    mouthover 鼠标经过 mouthout 鼠标离开

  5. reset 表单重置 submit 表单提交

  6. change 下拉选项改变/文本框内容改变

  7. load 页面加载完毕

  8. select 文本被选定

4. 注册事件的两个方式

  1. ......
<script type="text/javascript">
    function click1(){
            alert("say hello!")
    }
</script>
    <input type="button" onclick="click1();" value="adasd">
      //1.  click（） 这种注册事件方式为直接在标签中使用句柄；
......
<script type="text/javascript">
    //doctument代表整个HTML页面
    document.getElementById("aa1").onclick = function (){
        alert("do som1"); }//2. 这种注册方式为纯js代码完成事件注册。
</script>
<input type="button" value="hello" id="aa1">
......

  2. 上述代码中，onclick的函数被称为回调函数；

  3. 回调的定义：回调函数A本身作为参数，传递给函数B。函数B执行其主函数之后，再执行传进去的函数A。这个过程就叫做回调。

  4. 回调函数的特点：函数不是自己负责调用而是其他程序调用。且作为参数被调用。

5. js代码执行顺序

<body>
<script type="text/javascript">
    //当页面加载时，自向而下注册整个函数；
    //加载完毕onload调用function1
    //当onclick事件发生后（点击时），finction1调用finction2
    //也就是说，finction1使用完之后，再回头调用finction2，finction2是回调函数；同理，当onload（页面加载完成之后），再调用finction1，finction1也是回调函数；
    window.onload = function () {
        document.getElementById("aa1").onclick = function () {
            alert("do some");
        }
    }
</script>
<input type="button" value="hello" id="aa1">
</body>

6. 捕捉键

  1. 用法：例如用户登录时，不点击登录按钮而是按下Enter键。也能执行登录操作，这时就需要捕捉Enter键来进行登录操作。
<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("enter").onkeydown = function (event) {//这里的使用的函数函数为onkeydown（键盘按下事件）
            if (event.keyCode === 13) {//注意：这里的keyCode函数已过时，但能用（keyCode）为Number类型数据。
                alert("Enter键捕捉成功");
            }
        }
    }
    window.document
</script>
<input type="text" id="Enter">
</body>

7. void运算符

重要实现：用户点击该超链接的时候执行一段JS代码，页面还不能跳转。

拆解实现：1. 执行JS代码：加入onclick事件句柄即可实现；

​ 2. 页面不跳转：这里要用到void运算符；使用方式 → 在热引用后使用void运算符“javascript：void（0）”，表示该运算符不返回值。就达到了热引用无效的目的。（固定写法）

<body>
    //保留超链接样式：
<a href="javascript:void(0)" onclick="window.alert('show me')">点我</a>
</body>

8. JS的控制语句：前7个和java控制语句共用

  1. for循环
  2. while循环
  3. if
  4. switch
  5. do...... while......
  6. break
  7. continue
  8. for （数组下标/参数位置下标） in （数组/对象名） //JS独有控制语句，仅做了解
  9. with（仅做了解）
posted @ 2021-06-07 16:54  guanghen  阅读(96)  评论(0)    收藏  举报