• 脚本语言，不用编译直接运行
  • 组成
    • ECMAScript： 规定了JS基础语法核心知识，包括变量，数据类型，流程控制，函数，对象等
    • BOM： 浏览器对象模型，用于操作浏览器本身，如：页面弹窗，地址栏操作，关闭窗口等。
    • DOM： 文档对象模型，用来操作HTML文档，如更改标签内内容，更改标签内字体样式

JS 核心语法

JS引入方式

  • 内部引入

    • 必须在\\ 之间
    • 在HTML文档中可以在任何地方放任何数量script
    • 一般把脚本置于\元素底部

  • 外部引入

    写完了引入

书写规范 : 结束符，每行结尾以分号结尾，结尾分号可有可无

基础语法

变量

  • JS中用 let 关键字声明变量（弱类型语言， 变量可以存放不同类型的值）
    1
    2
    3
    4
    5
    <script>
        let a = 20;
        a = "Hello";
        alert(a);
    </script>
  • const 声明常量

输出方式

1
2
3
console.log() // 输出到控制台
window.alert(a) // 弹出警告框
document.write() // 输出到html内部

数据类型

  • Js数据类型分为： 基本数据类型和引用数据类型（对象）

  • 基本数据类型：

    • number： 数字
    • boolean
    • null ： 对象为空（注意大小写）
    • undefined： 当声明的变量没有初始化，默认是undefined
    • string
      1
      typeof + 数据 // 查看类型

  • 模板字符串：

    • ` ` (反引号)
    • 内容拼接的时候，使用${} 包裹变量
      1
      2
      3
      4
      5
      <script>
          let name = `Tom`;
          let age = 18;
          console.log(`大家好，我是${name}, 今年${age}岁了`);
      </script>

函数

具名函数

1
2
3
4
function functionName(参数一， 参数二) {
    // 要执行的代码
    (return 值)
}

注意道函数哪怕有返回值也不显示

  • JS是弱类型，参数和返回值都没有显示类型
1
2
let c = add(a, b);
alert(c);

调用时候如果传入了过多的参数，只调用前几个参数。

匿名函数

1
2
3
let add = (a, b) => {
    return a + b;
}
1
2
3
let add = function(a, b) {
    return a + b;
}

自定义对象

  • 定义格式：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    let 对象名 = {
        属性名1： 属性值1
        属性2 : 属性值2
        ...

        方法名： function() {
            
        }
    }

e.g:

1
2
3
4
5
6
7
8
let user = {
    name = 'Tom'
    age: 20
    gender: '男'
    sing: function() {
        alert(this.name + "唱着好运来")
    }
}

注意在定义方法时候一般不用 “ => “, 由于此时this指向的不是当前对象而可能是他的父级对象

json

  • JavaScript Object Notation, JavaScript对象标记文本（JS写的文本）
  • 多作为数据载体
  • 本质是一些字符串
1
2
JSON.parse() // 变JS
JSON.stringify() // 变JSON
1
2
3
4
5
6
7
8
let person = {
    name: "尼好",
    age: 18
}

alert(person); // 输出object，看不出里面内容

alert(JSON.stringify(person)) // 输出对象里面所有属性，因为变成了文本

DOM

  • 文本对象模型，将整个标记语言（html）封装成文档对象

  • 分为以下部分

    • Document： 整个文档对象
    • Element： 元素对象
    • Attribute： 属性对象
    • Text： 文本对象
    • Comment： 注释对象

  • 核心思想： 将页面中所有元素看出对象

操作 :

  • 获取DOM元素对象
    根据CSS选择器获取DOM元素，
  • 查看文档 w3school 在线教程 获得对应属性的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id = "Title1"> 1111</h1>
    <h1>22222</h1>
    <h1>33333</h1>
  
    <script>
        // 修改第一个h1标签中的文本内容
        // 1.1 获取DOM对象
        let h1 = document.querySelector('#Title1');
  
        //1.2 调用DOM对象中的属性或者方法
        h1.innerHTML = '修改后的文本'
        
        // 使用querySecectorAll返回一个数组
        let hs = document.querySelectorAll('h1');
        hs[0].innerHTML = '修改元素';
    </script>
</body>
</html>

事件监听

  • 语法： 
    1
    事件源.addEventListener('时间类型', 事件触发执行函数);

e.g

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn1" value="点我">
  
    <script>
        // 事件监听
      document.querySelector('#btn1').addEventListener('click', function() {
            console.log('试试就试试');
        });
    </script>
</body>
</html>

（和cf一开始时候Go to the task list 是一个道罢）

  • 早期写法： 
    1
    事件源.on事件 = function() { ... }

常见事件

  • 鼠标事件
    • click： 鼠标点击
    • mouseenter: 鼠标移入
    • mouseleave： 鼠标移出
      • 键盘事件
      • keydown: 键盘按下触发
      • keyup: 键盘抬起触发
      • 焦点事件
      • focus: 获得焦点触发
      • blur: 失去焦点触发
      • 表单事件
      • input: 用户输入时触发
      • submit: 用户提交时触发

事件监听优化：

如果某个方法需要多次使用可以考虑将其单独写成一个工具类（js文件内，同时在当前引入JS使得不必要太过繁琐）.

定义时候export
引入的时候import

1
2
3
4
5
export function printlog(msg) {
    console.log(msg);
}

import ( printLog ) from './XXX.js'