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文档对象来获取元素对象

• 根据当前元素对象获取父元素对象
  子元素对象.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="文本内容";
  注意：这里的文本内容会被解析标签

事件

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

• 绑定事件的方式

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

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

b. 通过DOM元素进行绑定

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

面向对象

1.定义类的方式

• 方式1
  语法：

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

用法：

• 方式2
  语法：

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

用法：