JavaScript笔记2

• 简介
• 项目7.改进链接 ★
• 项目8.使用多级条件 ★★
• 项目9.处理错误 ★★★

简介

上一份笔记,我们初步掌握了js的部分内容,在本份笔记中,你会知道更多js的基础知识

主要内容:

连接对象 this | 使用swith/case语句进行判断 | 使用try/throw/catch处理错误

为了之后的学习,本份笔记适时穿插了以下内容:

不同的值类型 | 对两个变量的值进行比较 | 点号语法 | 在js中添加注释

与上一份笔记相比,本份笔记格式更规范,语言更简明,内容更详细

改进链接

实现效果:在跳转到另一页面时,提示用户即将去往的页面

<h2>
  hello,<a href="https://www.baidu.com" id="ab">baidu</a>
</h2>

<script>
  window.onload = init

  function init() {
    document.getElementById("ab").onclick = ainit
  }

  function ainit() {
    alert("你即将去baidu")
    window.location = this.href
    return false
  }
</script>

1. <h2>hello,<a href="https://www.baidu.com" id="ab">baidu</a></h2> 这是一个html文档中的超链接,点击后去往百度页面

2. window.onload = init 含义是 在窗口加载完成时,将 init 函数赋值给加载完成的窗口

window是一个对象,代表浏览器窗口;onload是一个事件处理程序,表示对象完成了加载.它们用点号(.)连接,像这样将对象与方法用点号(.)连接的就叫点号语法

= init执行init函数

3. function init() { 含义是 定义名为init的函数（仅完成定义，未执行），函数执行需通过调用语句（如ainit()）触发

我们常用function 函数名() {}语法来定义函数，函数定义后不会自动执行，需通过函数名()的形式调用才能执行

4. document.getElementById("ab").onclick = ainit } 这是 init 函数内的具体内容,含义是 获取html文档中id为 ab 的元素,当它被点击时,执行 ainit 函数

document它代表js文件所对应的html文档;getElementById("ab")我们用它获取html文档中id为 ab 的元素,相信你已经看出来了,("")中所填的就是需要获取的id;onclick是一个事件处理程序,表示对象被点击;= ainit执行 ainit 函数.

5. function ainit() {} 含义是 定义名为ainit的函数（仅完成定义，未执行），函数执行需通过调用语句（如ainit()）触发

6. alert("你即将去baidu"); window.location = this.href; return false} 这是 ainit 函数内的具体内容,含义是 弹出提示框:你即将去baidu;设置当前浏览器窗口为baidu页面;阻止a标签的默认跳转行为

alert("你即将去baidu"); 我们用alert来弹出提示框,("")中填写显示的内容

window.location 是一个对象，我们用于获取或设置当前页面的URL地址

this 是一个对象,它可以获取HTML文档中的元素,this.href即可以获取a标签的href属性

return false 阻止a标签的默认跳转行为

点号语法与它的作用

点号语法的基本语法是这样的对象.属性名或对象.方法名()

我们用对象.属性名来访问属性;用对象.方法名()来调用方法(函数)

点号的本质是建立 “所属关联”：左边是一个对象（可以是自定义对象、内置对象等），右边是这个对象 “拥有” 的属性或方法。通过点号，我们可以精准地定位并操作对象的成员，是js中操作对象的最基础方式。

使用多级条件

<form action="">
  <input type="button" value="百度" id="baidu">
  <input type="button" value="hao123" id="hao123">
  <input type="button" value="edge" id="edge">
</form>

<script>
  window.onload = init
  function init() {
    document.getElementById("baidu").onclick = say
    document.getElementById("hao123").onclick = say
    document.getElementById("edge").onclick = say
  }

  function say() {
    switch (this.id) {
      case "baidu":
        alert("你点击了 百度")
        break
      case "hao123":
        alert("你点击了 hao123")
        break
      case "edge":
        alert("你点击了 edge")
        break
    }
  }
</script>

1. <form action=""> </form> 用来封装表单元素,在本例中可以去除,不影响js代码的运行效果,不过考虑到语义化及日常的开发,建议添加

2. <input type="button" value="百度" id="baidu"> ··· html文档中的按钮元素,本处不过多解释

3. document.getElementById("baidu").onclick = say 含义是 当id为baidu的元素被点击时,执行say函数

4. switch (this.id) { 这是swith语句,基本语法如下

switch () {case "": break;case "": break}

我们一般用swith语句处理多级条件,本例中的含义是 获取this对象的id作为参数

5. case "baidu": alert("你点击了 百度");break; case "hao123": alert("你点击了 hao123");break; 含义是 当idbaidu被点击时,弹出提示框:你点击了 百度;退出;当idhao123被点击时,弹出提示框:你点击了 hao123;退出

如果不加上break 会执行swith语句中所有的代码.在本例中,我们需根据条件执行相应代码,应加上break

处理错误

<script>
  //初始化
  window.onload = init

  function init() {
    let ans = prompt("输入一个数字")
    //错误处理
    try {
      if (!ans || isNaN(ans) || ans < 0) {
        throw new Error("你输入的不是有效数字")
      }
      alert("输入的数字是 " + ans + " 平方根是 " + Math.sqrt(ans))
    }
    catch (errMsg) {
      alert(errMsg.message)
    }
  }
</script>

1. let ans = prompt("输入一个数字") 含义是定义变量ans为从prompt("输入一个数字")中获取的值

我们用let来定义一个变量,基本语法如下 let 变量名 = 值,需要注意的是,这里的值可以是任何内容如本例中的值就是用户输入的内容

2. try { 我们用此代码检查错误

3. if (!ans || isNaN(ans) || ans < 0) { 这是个判断语句,含义是如果用户没有输入或ans的值为NaN或ans的值小于0时,执行以下代码

!ans用来检测用户有无输入内容,若未输入(直接点击了取消/确认)返回true符合条件,执行if语句,若输入则返回false不执行if语句

相信你也看出来了,检测用户有无输入内容的语法是!变量名

||我们用2个管道符来分隔条件

isNaN(ans)用来检测用户输入的是不是数字,如果不是数字,运算时会提示NaN,返回true,符合条件,执行if语句.isNaN()这是js中内置的方法,用来检测返回的参数是不是数字,()中填写需要检测的变量名

ans < 0用来检测用户输入的值是否小于0(在本例中,输入的数不能小于0),若小于0,返回true执行if语句

比较一个变量的值和我们的数学一样: 变量名 比较符(=/</>) 值/变量名

4. throw new Error("你输入的不是有效数字")这行语句抛出一个错误,含义是 **抛出一个错误:“你输入的不是有效数字”**同时会抛出一个错误信息(errMsg)

("")中是message部分

5. alert("输入的数字是 " + ans + " 平方根是 " + Math.sqrt(ans)) 含义是弹出提示框:输入的数字是 ans 平方根是 ans的平方根

alert("")有一个特性,""中的内容会被直接显示,本例中的变量以及进行的运算不在""之中,这样会直接获取ans的值以及计算后的值显示,如果直接包含在""中会直接显示ans和Math.sqrt(ans)

Math.sqrt(ans)目前只要知道它是数学计算方式,计算的是()中的平方根即可

6. catch (errMsg) { 当错误被抛出,会被此代码捕获,会执行{}中的代码

7. alert(errMsg.message) 这行代码会弹出一个提示框,显示抛出的错误的message部分

我们用//在js中添加注释

完稿:2025.10.07

审查:2025.10.08

本文难免有疏漏，如需反馈或有任何建议，可联系邮箱：uu20002025@163.com