DX's Digital Garden

JavaScript

14 min read

引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部方式

通过 script 标签包裹 JavaScript 代码

<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>JavaScript 基础 - 引入方式</title>  
</head>  
<body>  
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->  
  <script>  
    alert('嗨，欢迎来传智播学习前端技术！')  
  </script>  
</body>  
</html>`

外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入

// demo.js
document.write(‘嗨，欢迎来传智播学习前端技术！’)

<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>JavaScript 基础 - 引入方式</title>  
</head>  
<body>  
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->  
  <script src="demo.js"></script>  
</body>  
</html>

如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：

`<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>JavaScript 基础 - 引入方式</title>  
</head>  
<body>  
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->  
  <script src="demo.js">  
    // 此处的代码会被忽略掉！！！！  
    alert(666);    
  </script>  
</body>  
</html>

结束符

在 JavaScript 中 ; 代表一段代码的结束，多数情况下可以省略 ; 使用回车（enter）替代。

输入和输出

输出

JavaScript 可以接收用户的输入，然后再将输入的结果输出： alert()(弹警示框)、 document.wirte()（页面中显示） console.log()控制台中打印

输入

向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');
    console.log('一般为程序员调试用')
 
    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

alert()，prompt()会跳过页面渲染先被执行

变量

理解变量是计算机存储数据的“容器”，掌握变量的声明方式

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

声明( let , var)

赋值

 <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    // 也可以用var取代let
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>

数组

常量 const

概念：使用 const 声明的变量称为“常量”。 使用场景：当某个变量永远不会改变的时候，就可以使用 const 来声明，而不是let。 命名规范：和变量一致

const PI = 3.14

注意： 常量不允许重新赋值,声明的时候必须赋值（初始化）

数据类型

  1. 字符类型

  2. 数字类型

  3. boolean类型

  4. 未定义类型

  • undefined
  • null

字符串类型

  • 字符串拼接’+’

  • 模板字符串(`我今年${age}岁了“)

    通过 typeof 关键字检测数据类型

类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。 规则

  • +号左右只要有一个是字符串，都会把另一个转换为字符串
  • 除+以外的算数运算符，都会吧数据转换为数字类型 缺点
  • 靠经验 小技巧
  • +快速换数字型
  • 任何数据和字符串都是字符串

显式转换

Number

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。 另外还有 parseInt parseFloat

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8
 
    // 显式将字符串 12 转换成数值 12
    t = Number(t)
 
    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20
 
    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>

语法补充

===左右两边是否类型和值都相等（重点）

==则会进行类型转换

循环案例

<script>
    let money = 100
    while (true) {
      let x = +prompt(`
    请输入您的操作：
    1.存钱
    2.取钱
    3.查看余额
    4.退出
    `)
      if (x === 4) {
        break
      }
      switch (x) {
        case 1: let inM = +prompt(`请输入您存的金额`)
          money = inM + money
          break
        case 2: let outM = +prompt(`请输入您取的金额`)
          money = money - outM
          break
        case 3: alert(`您的金额为${money}`)
          break
      }
    }
  </script>

操作数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

  1. push 动态向数组的尾部添加一个单元
  2. unshit 动态向数组头部添加一个单元
  3. pop 删除最后一个单元
  4. shift 删除第一个单元
  5. splice 动态删除任意单元

数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']
  // 数组对应着一个 length 属性，它的含义是获取数组的长度
  console.log(arr.length) // 3
</script>

函数

function关键字

function add(a,b){
	return a+b;
}

对象

方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

  1. 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
  2. 多个属性之间使用英文 , 分隔
  3. 方法是依附在对象中的函数
  4. 方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等
<script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()
 
  </script>

内置对象

回想一下我们曾经使用过的 console.log，console其实就是 JavaScript 中内置的对象，该对象中存在一个方法叫 log，然后调用 log 这个方法，即 console.log()。

除了 console 对象外，JavaScritp 还有其它的内置的对象

Array

String

自定义对象

JSON

JavaScript对象标记法

Math

Math 是 JavaScript 中内置的对象，称为数学对象，这个对象下即包含了属性，也包含了许多的方法。

属性

  • Math.PI，获取圆周率

// 圆周率
console.log(Math.PI);

方法

  • Math.random，生成 0 到 1 间的随机数

// 0 ~ 1 之间的随机数, 包含 0 不包含 1
Math.random()

  • Math.ceil，数字向上取整

// 舍弃小数部分，整数部分加1
Math.ceil(3.4)

  • Math.floor，数字向下取整

// 舍弃小数部分，整数部分不变
Math.floor(4.68)

  • Math.round，四舍五入取整

// 取整，四舍五入原则
Math.round(5.46539)
Math.round(4.849)

  • Math.max，在一组数中找出最大的

// 找出最大值
Math.max(10, 21, 7, 24, 13)

  • Math.min，在一组数中找出最小的

// 找出最小值
Math.min(24, 18, 6, 19, 21)

  • Math.pow，幂方法

// 求某个数的多少次方
Math.pow(4, 2) // 求 4 的 2 次方
Math.pow(2, 3) // 求 2 的 3 次方

  • Math.sqrt，平方根

// 求某数的平方根
Math.sqrt(16) 数学对象提供了比较多的方法，这里不要求强记，通过演示数学对象的使用，加深对对象的理解。

APIs

介绍

知道 ECMAScript 与 JavaScript 的关系，Web APIs 是浏览器扩展的功能。 。

BOM

浏览器对象模型

DOM

DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑

什么是DOM树

  • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。

DOM对象怎么创建

  • 浏览器根据html标签生成JS对象（DOM对象）
  • DOM的核心就是吧内容当对象处理

document是什么

  • 是DOM里提供的一个对象
  • 网页所有的内容都在document里

获取DOM元素

获取DOM对象

  1. 利用CSS选择器来获取DOM元素
    const p = document.querySelector('p')  // 获取第一个p元素
    const lis = document.querySelectorAll('li')  // 获取第一个p元素
    //得到的是伪数组，需要用for遍历得到每一个对象
    const nav = document.querySelector('#nav')
    console.dir(nav)

俩者小括号里

  • 写CSS选择器
  • 必须时字符串，也就是加引号
  1. 其他获取DOM元素 略

  • console.log()：这是最常用的打印信息的方法。它可以接受任何类型的参数，并将其转换为字符串形式在控制台中显示。对于对象，它通常打印出对象的字符串表示。

  • console.dir()：这个方法专门用来打印对象，并显示对象的所有属性和方法。当你需要查看一个对象的所有详细信息时，这个方法非常有用。

操作元素内容

通过修改 DOM 的文本内容，动态改变网页的内容。

  1. innerText 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析。
  2. innerHTML 将文本内容添加/更新到任意标签位置，文本中包含的标签会被解析。

操作元素属性

常用属性修改

  1. 直接能过属性名修改，最简洁的语法
<script>
  // 1. 获取 img 对应的 DOM 元素
  const pic = document.querySelector('.pic')
	// 2. 修改属性
  pic.src = './images/lion.webp'
  pic.width = 400;
  pic.alt = '图片不见了...'
</script>

事件监听

事件绑定

常见事件

案例

Graph View

Backlinks