js学习笔记

基本语法

1.引入方式

• 第一种

  <script>
    js代码
  </script>

• 第二种

  <script src="js文件"></script>

2.注释

• 单行注释

  <script>
    //这是单行注释
  </script>

• 多行注释

  <script>
    /*
        这是多行注释
    */
  </script>

3.输入输出语句

• prompt()，范例

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

• alert()，范例

  alert("提示");

• console.log()，范例

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

• document.write()，范例

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

4.变量和常量

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

• 定义局部变量
  语法：let 变量名 = 值;
  范例：

  let name = "张三";
  let age = 23;

• 定义全局变量
  语法：变量名 = 值;
  范例：

  school = "清华大学";

• 定义常量
  语法：const 常量名 = 值;
  范例：

  const PI = 3.1415926;

5.原始数据类型

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

使用typeof()函数

范例：

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

6.运算符

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

• 不同点：

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

7.流程控制语句

• 与Java的相同，但是注意在流程控制语句中的变量定义语法不同

8.数组

• JavaScript数组长度和类型没有限制
  定义一个数组的语法是：let 数组名 = [元素];
  范例：

  let arr = [1,2,3];

• 获取数组长度
  使用函数：数组名.length
  范例：

  arr.length;

• 数组复制
  语法：数组1 = [...数组2];
  范例：

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

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

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

• 字符串转数组
  语法：数组 = [...字符串];
  范例：

  let s = "lxq";
  let a = [...s];a数组内容是l,x,q

9.函数

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

• 普通函数
  语法：

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

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

• 可变参数
  语法：

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

• 匿名函数
  语法：

  function(参数){
    方法体;
    return 返回值;
  }

DOM

1.概述

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

• 相关对象：

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

2.元素对象的操作

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

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

• 通过文档对象创建新元素对象
  document.createElement(标签名);

• 将指定子元素对象添加到父元素中
  父元素对象.appendChild(子元素对象);

• 父元素删除指定的子元素
  父元素对象.removeChild(子元素对象);

• 父元素用新子元素替换旧子元素
  父元素对象.replace(新元素,旧元素);

3.元素内属性操作

• 给元素设置属性
  setAttribute(属性名,属性值);

• 根据属性名获取属性值
  getAttribute(属性名);

• 根据属性名移除属性
  removeAttribute(属性名);

• 为元素添加样式
  方式一：
  元素对象.style.样式=值;
  如：

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

方式二：
元素对象.className = "类选择器名";

4.元素内文本操作

• 设置文本内容，不解析标签
  元素对象.innerText="文本内容";
  注意：不解析标签是指文本内容如果有HTML标签也不会解析，只会当成文本

• 设置文本内容，解析标签
  元素对象.innerHTML="文本内容";
  注意：这里的文本内容会被解析标签

事件

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

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

• 绑定事件的方式

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

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

1. 通过DOM元素进行绑定

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

面向对象

1.定义类的方式

• 方式1
  语法：

  class 类名{
    //构造方法
    constructor(变量列表){
        变量赋值;
    }
    //普通方法
    方法名(参数列表){
        方法体;
        return 返回值;
    }
  }

用法：

let 对象名 = new 类名(实际变量值);
对象名.变量名;
对象名.方法名();

• 方式2
  语法：

  //在定义类的时候已经创建了对象
  let 对象名 = {
    变量名 : 变量值,
    变量名 : 变量值,
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    },
    方法名 : function(参数列表){
        方法体;
        return 返回值;
    }
  };

用法：

对象名.变量名;
对象名.方法名();

2.继承

• JS中顶级父类是Object

• 继承需要使用extends关键字
  语法：

  class 子类 extend 父类{}

• 继承范例 ```javascript 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();

<a name="74d2ab3f"></a>
## 内置对象
<a name="cb288b16"></a>
### 1.Number对象
- `parseFloat(s)`方法，将字符串浮点数转为浮点数
- `parseInt(s)`方法，将字符串整数转为整数
<a name="1b6b3281"></a>
### 2.Math对象
- `ceil(x)`方法，向上取整
- `floor(x)`方法，向下取整
- `round(x)`方法，四舍五入
- `random()`方法，返回0到1之间的随机数，不含1
- `pow(x,y)`方法，x的y次方
<a name="c371f53a"></a>
### 3.Data对象
- 
构造方法
| 方法 | 说明 |
| --- | --- |
| Date() | 根据当前事件创建对象 |
| Date(value) | 指定毫秒值创建对象 |
| Date(year,month[,day,hour,min,sec,mill]) | 指定字段创建对象，月份是0到11 |
- 
常用方法
| 方法 | 说明 |
| --- | --- |
| getFullYear() | 获取年份 |
| getMonth() | 获取月份 |
| getDate() | 获取天数 |
| getHours() | 获取小时 |
| getMinutes() | 获取分钟 |
| getSeconds() | 获取秒 |
| getTime() | 返回时间原点至今毫秒数 |
| toLocalString() | 返回本地日期格式的字符串 |
<a name="78a23ddf"></a>
### 4.String对象
- 
构造方法
| 方法 | 说明 |
| --- | --- |
| String(value) | 根据指定字符串创建对象 |
| let s = "字符串" | 直接赋值 |
- 
常用方法
| 方法 | 说明 |
| --- | --- |
| length属性 | 获取字符串长度 |
| charAt(index) | 获取指定索引处字符 |
| indexOf(value) | 获取指定字符串出现的索引位置，不存在返回-1 |
| substring(start,end) | 根据给出范围截取字符串，含头不含尾 |
| split(value) | 根据指定规则切割字符串，返回数组 |
| replace(old,new) | 使用新字符替换旧字符 |
<a name="006c0c8f"></a>
### 5.RegExp对象
- 
构造方法
| 方法 | 说明 |
| --- | --- |
| RegExp(规则) | 根据制定规则创建对象 |
| let reg = /^规则$/ | 直接赋值 |
- 
匹配方法：`test(字符串)`方法，用于查看字符串是否符合匹配规则
<a name="e1e17614"></a>
### 6.Array对象
- 
常用方法
| 方法 | 说明 |
| --- | --- |
| push(元素) | 添加元素到数组末尾 |
| pop() | 删除数组末尾元素 |
| shift() | 删除数组最前面元素 |
| includes(元素) | 判断数组是否包含指定的元素 |
| reverse() | 反转数组中的元素 |
| sort() | 对数组元素排序 |
<a name="bb0d043f"></a>
### 7.Set对象
- 
元素唯一，存取顺序一致
- 
构造方法：`Set()`
- 
常用方法
| 方法 | 说明 |
| --- | --- |
| add(元素) | 添加元素 |
| size属性 | 获取集合长度 |
| keys() | 获取迭代器对象 |
| delete(元素) | 删除指定元素 |
- 
Set集合遍历范例
```javascript
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);
}

8.Map对象

• key唯一，存取顺序一致

• 构造方法：Map()

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

• Map集合遍历范例

  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);
  }

9.JSON对象

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

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

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

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

• 范例

  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的内容