基本语法

引入方式

1
2
3
<script>
    js代码
</script>
1
<script src="js文件"></script>

输入输出语句

prompt()

1
2
prompt("请输入:");
// 该语句在页面弹出一个输入框，并且带有提示

alert()

1
alert("提示");

console.log()

1
console.log("控制台输出的内容");

document.write()

1
document.write("向页面输出内容");

变量和常量

  • JavaScript是弱类型语言，定义变量时不用区分具体数据类型

  • 定义局部变量

    语法：let 变量名 = 值;

  • 定义全局变量

    语法：变量名 = 值;

  • 定义常量

    语法：const 常量名 = 值;

原始数据类型

类型 说明
boolean 布尔类型，true或false
undefined 未定义，即定义变量时没有赋值
null 声明null为变量值
number 整数或浮点数
string 字符串
bigint 大整数，例如bigint num = 10n;需要在数字后加上n

判断原始数据类型的方法：

使用typeof()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let l1 = true;
document.write(typeof(l1)+"<br/>"); //输出boolean

let l2;
document.write(typeof(l2)+"<br/>"); //输出undefined

let l3 = null;
document.write(typeof(l3)+"<br/>"); //输出Object，null被认为是对象占位符

let l4 = 123;
document.write(typeof(l4)+"<br/>"); //输出number

let l5 = "abc";
document.write(typeof(l5)+"<br/>"); //输出string

let l6 = 10n;
document.write(typeof(l6)+"<br/>"); //输出bigint

运算符

JavaScript中运算符和Java的大致相同

不同点：

  1. ==号比较的是变量的值是否相同，如字符串的”10”跟数字的10比较返回true
  2. === 号比较类型和值，则字符串的”10”跟数字的10比较返回false
  3. 字符串类型的数字计算时会发生类型转换

数组

  • JavaScript数组长度和类型没有限制

    定义一个数组的语法是：let 数组名 = [元素];

  • 获取数组长度

    使用函数：数组名.length

  • 数组复制

    语法：数组1 = [...数组2];

    1
    2
    let a = [1,2,3];
    let b = [...a];//数组b内容也是1,2,3

  • 数组合并

    语法：数组1 = [...数组2,数组3];将数组2和3合并到1

    1
    2
    3
    let a = [1,2,3];
    let b = [4,5,6];
    let c = [...a,...b];//数组c内容是1,2,3,4,5,6

  • 字符串转数组

    语法：数组 = [...字符串];

    1
    2
    let s = "zzy";
    let a = [...s]; // a数组内容是z,z,y

函数

JavaScript中的函数类似于Java中的方法

普通函数

1
2
3
4
function 方法名(参数){
    方法体;
    return 返回值;
}

注意：如果不需要返回值则不用写return语句，参数不用写类型

可变参数

1
2
3
4
function 方法名(...参数){
    方法体;
    return 返回值;
}

匿名函数

1
2
3
4
function(参数){
    方法体;
    return 返回值;
}

DOM

概述

DOM指document object model，即文档对象模型，将HTML文档各个组成部分封装为对象，借助这些对象可以对HTML文档进行增删改查的动态操作

相关对象：

  1. Document，表示文档对象
  2. Element，元素对象
  3. Attribute，属性对象
  4. Text，文本对象

元素对象的操作

  • 根据document文档对象来获取元素对象

    | 方法 | 说明 |
    | —————————————————- | ————————————- |
    | getElementById(id属性值) | 根据id属性获取元素对象 |
    | getElementsByTagName(标签名) | 根据标签名获取元素对象 |
    | getElementsByName(name属性值) | 根据name属性获取元素对象 |
    | getElementsByClassName(class属性值) | 根据class属性获取元素对象 |

  • 根据当前元素对象获取父元素对象

    子元素对象.parentElement

  • 通过文档对象创建新元素对象

    document.createElement(标签名);

  • 将指定子元素对象添加到父元素中

    父元素对象.appendChild(子元素对象);

  • 父元素删除指定的子元素

    父元素对象.removeChild(子元素对象);

  • 父元素用新子元素替换旧子元素

    父元素对象.replace(新元素,旧元素);

元素内属性操作

  • 给元素设置属性

    setAttribute(属性名,属性值);

  • 根据属性名获取属性值

    getAttribute(属性名);

  • 根据属性名移除属性

    removeAttribute(属性名);

  • 为元素添加样式

    元素对象.style.样式=值;

    1
    2
    3
    let ele = document.getElementById("a");
    ele.style.color = "red";

    元素对象.className = "类选择器名";

元素内文本操作

  • 设置文本内容，不解析标签

    元素对象.innerText="文本内容";

    注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本

  • 设置文本内容，解析标签

    元素对象.innerHTML="文本内容";

    注意：这里的文本内容会被解析标签

事件

事件是某些组件完成某些操作时会触发的代码

常用事件

事件 说明
onload 某个页面或图像被加载完成
onsubmit 表单提交时
onclick 鼠标点击事件
ondblclick 鼠标双击
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用于改变域的内容

绑定事件的方式

  1. 通过标签中事件属性进行绑定

    1
    <button onclick="触发的操作"></button>

  2. 通过DOM元素进行绑定

    1
    2
    3
    4
    let b = document.getElementById("btn");
    b.onclick=function(){//使用匿名方法
        触发的操作;
    }

面向对象

定义类的方式

方式1

1
2
3
4
5
6
7
8
9
10
11
class 类名{
    //构造方法
    constructor(变量列表){
        变量赋值;
    }
    //普通方法
    方法名(参数列表){
        方法体;
        return 返回值;
    }
}
1
2
3
let 对象名 = new 类名(实际变量值);
对象名.变量名;
对象名.方法名();

方式2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//在定义类的时候已经创建了对象
let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    },
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    }
};
1
2
对象名.变量名;
对象名.方法名();

继承

JS中顶级父类是Object

继承需要使用extends关键字

1
2
class 子类 extend 父类{}

继承范例

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
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    show(){
        document.write(this.name+","+this.age+"<br/>");
    }
}

class Worker extends Person{
   constructor(name,age,salary){
       //使用super()调用父类构造方法
        super(name,age);
        this.salary = salary;
   }

   show(){
        document.write(this.name+","+this.age+","+this.salary);
   }
}

let worker = new Worker("张三",23,15000);
worker.show();

内置对象

Number对象

  • parseFloat(s)方法，将字符串浮点数转为浮点数
  • parseInt(s)方法，将字符串整数转为整数

Math对象

  • ceil(x)方法，向上取整
  • floor(x)方法，向下取整
  • round(x)方法，四舍五入
  • random()方法，返回0到1之间的随机数，不含1
  • pow(x,y)方法，x的y次方

Date对象

构造方法

方法 说明
Date() 根据当前事件创建对象
Date(value) 指定毫秒值创建对象
Date(year,month[,day,hour,min,sec,mill]) 指定字段创建对象，月份是0到11

常用方法

方法 说明
getFullYear() 获取年份
getMonth() 获取月份
getDate() 获取天数
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒
getTime() 返回时间原点至今毫秒数
toLocalString() 返回本地日期格式的字符串

String对象

构造方法

方法 说明
String(value) 根据指定字符串创建对象
let s = “字符串” 直接赋值

常用方法

方法 说明
length属性 获取字符串长度
charAt(index) 获取指定索引处字符
indexOf(value) 获取指定字符串出现的索引位置，不存在返回-1
substring(start,end) 根据给出范围截取字符串，含头不含尾
split(value) 根据指定规则切割字符串，返回数组
replace(old,new) 使用新字符替换旧字符

RegExp对象

构造方法

方法 说明
RegExp(规则) 根据制定规则创建对象
let reg = /^规则$/ 直接赋值

匹配方法：test(字符串)方法，用于查看字符串是否符合匹配规则

Array对象

常用方法

方法 说明
push(元素) 添加元素到数组末尾
pop() 删除数组末尾元素
shift() 删除数组最前面元素
includes(元素) 判断数组是否包含指定的元素
reverse() 反转数组中的元素
sort() 对数组元素排序

Set对象

  • 元素唯一，存取顺序一致

  • 构造方法：Set()

  • 常用方法

    | 方法 | 说明 |
    | —————— | ——————— |
    | add(元素) | 添加元素 |
    | size属性 | 获取集合长度 |
    | keys() | 获取迭代器对象 |
    | delete(元素) | 删除指定元素 |

  • Set集合遍历范例

    1
    2
    3
    4
    5
    6
    7
    8
    let set = new Set();
    set.add("a");
    set.add("b");
    let st = set.keys();
    for(let i = 0;i < set.size;i++){
        document.write(st.next().value);
    }

Map对象

  • key唯一，存取顺序一致

  • 构造方法：Map()

  • 常用方法

    | 方法 | 说明 |
    | ——————— | ————————- |
    | set(key,value) | 向集合添加元素 |
    | size属性 | 获取集合长度 |
    | get(key) | 根据key获取value |
    | entries() | 获取迭代器对象 |
    | delete(key) | 根据key删除键值对 |

  • Map集合遍历范例

    1
    2
    3
    4
    5
    6
    7
    8
    let map = new Map();
    map.set(1,"a");
    map.set(2,"b");
    let et = map.entries();
    for(let i = 0;i < map.size;i++){
        document.write(et.next().value);
    }

JSON对象

  • JSON(JavaScript Object Notation)是一种轻量级的数据交换格式

  • 它是基于ECMAScript规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言，易于人阅读和编写，同时也易于计算机解析和生成，并有效提升网络传输效率

  • 常用方法

    | 方法 | 说明 |
    | ——————— | ——————————————— |
    | stringfy(对象) | 将指定对象转换为json格式字符串 |
    | parse(字符串) | 将指定json格式字符串解析成对象 |

  • 范例

    1
    2
    3
    4
    5
    6
    7
    8
    let weather = {
        city : "北京";
        date : "2022-08-08";
        temperature : "10~20";
    };
    let str = JSON.stringfy(weather);
    let weather2 = JSON.parse(str);

BOM

  • BOM(Browser Object Model)，是指浏览器对象模型
  • 将浏览器各个组成部分封装成不同的对象，方便进行操作
  • 具体有如下的对象
    1. Navigator，表示浏览器对象
    2. Window，窗口对象
    3. Location，地址栏对象
    4. History，窗口历史对象
    5. Screen，显示屏幕对象
  • Window窗口对象常用功能
    • 定时器
      1. 唯一标识 setTimeout(功能,毫秒值);方法，用于设置一次性定时器，返回一个唯一标识
      2. clearTimeout(标识);方法，根据标识取消一次性定时器
      3. 唯一标识 setInterval(功能,毫秒值);方法，设置循环定时器，返回一个唯一标识
      4. clearInterval(标识);方法，根据标识取消循环定时器
    • 加载事件：window.onload=触发的事件，用于页面加载完毕时触发的事件
  • Location地址栏对象常用功能
    • 设置href属性，通过设置这个属性实现浏览器读取并显示新的URL的内容