JavaScript学习笔记

JavaScript

JavaScript语句、标识符

语句

一行（一段代码）就是一个语句

语句以分号结尾

标识符

标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母、美元符号、下划线和数字组成，其中数字不能开头

注意：中文也是合法的变量名，但是不推荐

注意：javascript中的保留关键字也不能作为标识符

变量

相当于停车位，可以重新赋值

变量提升

javascript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行。这造成的结果，就是所有变量的声明语句，都会被提升到代码头部。

先使用，后声明不会报错！！！但是会显示undefine

javascript引入到文件

嵌入到html文件中

引入本地独立js文件**（手搓的时候最常用）**

引入网络来源文件**（做项目的时候最常用）**

javascript注释及常见输出方式

js的注释完全和java一样

js的输出方式

1. alert(“想要输出的内容”);
2. document.write(“想要输出的内容”);
3. console.log(“想要输出的内容”);

数据类型

数值、字符串、布尔值、undefined、null、对象

数据类型分类

原始（基本）数据类型：数值、布尔值、字符串

引用数据类型：对象

注意：undefined和null一般作为特殊值

示例

// 数值类型
var age = 20;

// 字符串类型
var name = "iwen";
var name2 = "学堂";

// 布尔类型
var flags = true;
var flags2 = false;

// 对象
var user = {
    name : "志伟",
    age : 20,
    learn : true
}

// null和undefined
var one = undefined;
var two = null;

typeof运算符

判断数据类型（基本数据类型）

null一般代表对象为“没有”

undefined一般代表数值为“没有”

算数运算符

加减乘除、取余、自加自减

示例

var num1 = 100;
var num1 = 10;

console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);

console.log(num1 / num2);

var x = 20;

console.log(++x);
console.log(--x);

赋值运算符号

赋值、加等、减等、除等、乘等、取余等

示例

var num1 = 100;
var num2 = num1;
console.log(num2);

var x = 10;
var y = 10;
console.log(x += y);
console.log(x -= y);
console.log(x *= y);
console.log(x /= y);
console.log(x %= y);

比较运算符

双等（==）代表简单比较值的大小是否相等

三等（===）代表严格比价：同时比较了值和数据类型

不等（!=）代表简单比较值的大小是否相等

三不等（!==）代表严格比价：同时比较了值和数据类型

布尔运算符

逻辑非（！）

// 下面六个取反为true，其他的取反都是false
console.log(!null);
console.log(!undefined);
console.log(!0);
console.log(!"");
console.log(!NaN);
console.log(!false);

逻辑与（&&）

逻辑或（||）

条件运算符

if语句语法

if(布尔值){
    语句;
}

if…else语句语法

if(布尔值){
	
}else if{
    
}else{
    
}……

switch语句语法

switch(变量值){
        case "值";
        	break;
        case "值"
        	break;
    	default:
}

注意：有选中成员之后一定要break掉!

三元运算符

(表达式)?(表达式):(表达式)

表达式1如果为真，执行表达式2，否则执行表达式3

循环语句

for语句

for(初始表达式；条件；迭代因子){
    语句;
}

while语句

while(条件){
    语句;
}

break语句和continue语句

break->终止循环

continue->跳出当前循环，立即开始下一次循环

字符串

var str1 = "i love";
var str2 = "志伟";
var str3 = "我喜欢'吃饭'";
var str4 = "我喜欢\"吃饭\"";

document.write(str3);
document.write(str4);
console.log(str1.length);

字符串方法

charAt()

返回指定位置的字符，参数从0开始编号

var str = "chenzhiwei";

console.log(str.length);
console.log(str.charAt(9));
console.log(str.charAt(str.length - 1));

如果参数超出了字符串的总长度，则返回空字符

concat()

用于连接两个字符串，返回一个新的字符串，不改变原字符串

注意

1. 不改变原来的字符串
2. 可连接多个字符串
3. 如果参数不是字符串，先强转为字符串，再连接

substring()

从原字符串中取出子字符串并返回，不改变原来的字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置。

注意

1. 如果第二个参数不写，默认读取到末位
2. 如果第一个参数大于第二个参数，他会自动交换参数的位置
3. 如果参数为负数，它会自动转为0

substr()

与前一个方法的效果相同，但是第二个参数由结束位置变成了子字符串的长度

indexOf()

用于确定一个字符串在另外一个字符串中出现的位置。返回字符串对应下标，如果返回-1表示不匹配。

如果传入第二个参数则表示从第n个下标开始匹配。

var str1 = "HelloWorld";

console.log(str1.indexOf("e"));

trim()

用于字符串去掉两端的空格、制表符、回车符

一般用于密码和用户名

split()

按照指定规则分割字符串，返回一个由分割出来的子字符串组成的数组

var name = "我|叫|陈|志|伟";
console.log(name.split("|"));

注意

1. 如果在split中传入空参数，则返回原字符串的每一个字符
2. 如果省略参数，则返回原来的完整字符串
3. 接受第二个参数，限定最大长度

数组

声明、定义

var arr = ["chen","zhi","wei"];

var names = [];
names = arr[0];
console.log(names);

length属性

console.log(names.length);

数组的遍历

// var a = ["我","叫","陈","志","伟"];
// for(var i = 0;i < a.length;i ++){
//     console.log(a[i]);
// }

var a = ["我","叫","陈","志","伟"];
for(var i in a){
    console.log(a[i]);
}

数组的静态方法

返回值为布尔类型

var a = ["我","叫","陈","志","伟"];

console.log(Array.isArray(a));

数组的方法

push()和pop()

用于在数组的末端添加（或删除）一个或多个元素，并返回添加（删除）元素后数组的新长度，要改变原字符串

push()方法是在数组的尾部添加数据

pop()方法是在数组的尾部删除数据

var hello = ["hello "];
arrLength = hello.push("大家好");
console.log(hello);
console.log(arrLength);

hello.pop();
console.log(hello);

注意：添加可以添加多条数据，但是删除只能删除一个

shift()和unshift()

用于在数组的头部删除（添加）一个元素，并返回删除（添加）元素后数字的新长度，要改变原字符串

var names = ["aim","jack","john"];
names.shift();
console.log(names);

var arr = [];
console.log(arr.shift());

var arr1 = ["100","200","300"];
var item;
while(item = arr1.shift()){
    console.log(item);
}
console.log(arr1);

var arr2 = [100];
arr2.unshift(100,120,140);
console.log(arr2);

join()

以指定参数作为分隔符将所有数组成员连接为一个字符串返回。如果不提供参数，则默认用逗号隔开。

var arr = [10,20,30,40,null,undefined];
console.log(arr.join());
console.log(arr.join("|"));
console.log(arr.join(""));
console.log(arr.join(" "));
// 字符串和数组的相互转换
var arr1 = ["Hello","world"];
result = arr1.join(" ");
console.log(result);
console.log(result.split(" "));

concat()

将多个数组合并为数组，将原数组合并为一个数组添加在原数组后面，并作为新数组返回。原数组不变。

var arr1 = ["chen","zhi","wei"];
var arr2 = ["zhen","suai"];
var arr3 = ["java","web"];

console.log(arr1.concat(arr2,arr3));
console.log(arr3.concat(20,30,40));

应用场景

上拉加载，合并数据（微信朋友圈）

reverse()

方法用于颠倒排列数组元素，返回改变之后的数组，该方法会改变原数组

示例

var arr = [1,2,3,4];
console.log(arr);
arr.reverse();
console.log(arr);

indexOf()

返回给定元素在数组中第一次出现的位置，不存在则返回-1

示例

var arr = [10,20,30,30,40,50,60];
console.log(arr.indexOf(30));
console.log(arr.indexOf(60));

if(arr.indexOf(30) > -1){
    console.log("存在");
}else{
    console.log("不存在");
}

函数

一段可以反复调用的代码段

函数的声明

function命令声明了代码区块

示例

function printWord(){
    console.log("结果");
}

函数名提升

可以先调用，再创建

函数参数

传入的外部数据

函数返回值

返回值作为出口，将结果返回外界

对象

对象是一组“键值对”的集合，是一种无序的复合数据集合

示例

// 创建一个user对象
var user = {
    name:"chenzhiwei",
    age:"18",
    jobs:["kuaidiyuan","kuaile"],
    flag:true,
    getName:function () {
        console.log("chen");
    },
    container:{
        frontEnd:["web前端","ios"],
        backEnd:["Java","Python"]
    }
}

// 对象的读取方式
console.log(user.name);
user.getName();

console.log(user.container.backEnd);
console.log(user.container.frontEnd);

Math对象

Math是JS的原生对象，提供了各种数学功能

Math.abs()

示例

var num = -100;
console.log(num);
console.log(Math.abs(num));

Math.max(),Math.min()

示例

console.log(Math.max(10,30,34,44));
console.log(Math.min(10,30,34,44));

Math.floor(),Math.ceil()

示例

var num1 = 10.3;
console.log(Math.floor(num1));// 向下取整
console.log(Math.ceil(num1)); // 向上取整

Math.random()

取得的值大于等于0，而小于1

示例

// 取得最小值和最大值之间的随机数
function getRandomArbitrary(min,max){
    var result = Math.random() * (max - min) + min;
    console.log(result);
}
getRandomArbitrary(10,20);

Date对象

Date对象也是JS的原生对象。它以1970年1月1日00:00:00作为时间的零点，可以表示的范围是前后各一亿天（单位：毫秒）

Date.now()

获取当前时间的时间戳

示例

console.log(Date.now());
console.log(new Date(1696461736375)); // 具体时间戳
console.log(new Date());              // 当前时间
console.log(new Date(1696461736375).getDate());              
console.log(new Date(1696461736375).getDay());               
console.log(new Date(1696461736375).getFullYear());          
console.log(new Date(1696461736375).getMonth() + 1);

DOM概述

DOM将网页转化为了一个js对象，从而可以对其进行脚本操作。DOM将html对象解析成一个一个的结点，结点形成了一个树状结构。

结点的类型

Document:整个文档的顶层结点
DocumentType:doctype标签
Element:网页的各种html标签
Attribute:网页元素属性
Text:标签之间或标签包含的文本
Comment:注释
DocumentFragment:文档的片段

document对象

获取页面中元素组件

示例

<body>
    <div>hello1</div>
    <div>hello2</div>
    <p class="text">Hello</p>
    <form name="login"></form>
    <div id="root">哈哈哈</div>
    <div class="nav">nav1</div>
    <div class="nav">nav2</div>
    <script src="index.js"></script>
</body>

var div1 = document.getElementsByTagName("div")[0];
div1.innerHTML = "Hello world";
var text = document.getElementsByClassName("text")[0];
text.innerHTML = "Hello!"
var name1 = document.getElementsByName("login");
console.log(name1);
var root = document.getElementById("root");
console.log(root);
var nav = document.querySelector(".nav");
console.log(nav);
var navs = document.querySelectorAll(".nav")[1];
console.log(navs);

通过js动态创建元素

示例

<div class="nav">导航</div>
<div class="container"></div>
<script src="index.js"></script>

var text = document.createElement("p");
var content = document.createTextNode("我是文本");
var id = document.createAttribute("id");
id.value = "root";
console.log(text);
text.appendChild(content);
text.setAttributeNode(id);

var container = document.getElementById("container");
container.appendChild(text);

document对象属性

示例

</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height:200px;
        }
        .box1{
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="box" id="root">Hello</div>
    <script src="index.js"></script>
</body>
</html>

var root = document.getElementById("root");
// root.id = roots;
// 可以为原本的容器增加属性
// root.className = boxs;

root.classList.add("mybox");
// 报错！！！！！！
// root.classList.remove("box");

if(root.classList.contains("box1")){
    console.log("有");
}else{
    console.log("没有");
}

console.log(root.innerHTML = "大家好");
console.log(root.innerText = "哇哈哈哈");

innerHTML和innerText的区别

innerHTML可以识别标签（自动连接超链接），innerText会把标签识别成为一个字符串（不会自动连接超链接）

获取元素位置

</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width:200px;
            height: 200px;
            border: 5px solid red;
            padding: 10px;
            margin: 20px;
            background: green;
        }
        
        h3{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <h3>标题1</h3>
    <h3>标题2</h3>
    <h3>标题3</h3>
    <h3>标题4</h3>
    <h3>标题5</h3>
    <script src="index.js"></script>
</body>
</html>

var box = document.getElementById("box");
// 获取元素大小
console.log(box.clientWidth);
console.log(box.clientHeight);
// 获取视口高度
console.log(document.documentElement.clientHeight);
// 获取页面高度
console.log(document.body.clientHeight);

// 包括不可见部分
// 获取元素大小
console.log(box.scrollHeight);
console.log(box.scrollWidth);
// 获取视口高度
console.log(document.documentElement.scrollHeight);
// 获取页面高度
console.log(document.body.scrollHeight);

// 获取滚动高度
console.log(document.documentElement.scrollTop);

// 获取元素css的垂直高度和水平高度
console.log(box.offsetHeight);
console.log(box.offsetWidth);

CSS操作

操作1

使用网页元素节点的setAttribute方法直接操作网页元素的style属性

示例

var box = document.getElementById("box");
box.setAttribute("style","width: 200px;height: 200px;background:red;")

操作2

元素节点的style属性

示例

box.style.width = "300px";
box.style.height = "300px";
box.style.backgroundColor = "red";

操作3

cssText属性

示例

box.style.cssText = "width: 200px;height: 200px;background:red;"

事件处理程序

HTML事件

示例

<button onclick="clickHandle()">按钮</button>

function clickHandle(){
    console.log("点击了按钮。");
}

缺点：HTML与js没有分离（不选）

D0M0级事件

<button id="btn">按钮</button>

var  btn =  document.getElementById("btn");
btn.onclick = function () {
    console.log("点击了");
}

缺点：无法重复添加多个事件

D0M2级事件

<button id="btn">按钮</button>

var  btn =  document.getElementById("btn");
btn.addEventListener("click",function(){
    console.log("点击了。");
})

鼠标事件

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 100px;
            height: 100px; 
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px; 
            background-color: green;
        }
        .box3{
            width: 100px;
            height: 100px; 
            background-color: yellow;
        }
        .box4{
            width: 100px;
            height: 100px; 
            background-color: pink;
        }
        .box5{
            width: 100px;
            height: 100px; 
            background-color: purple;
        }
    </style>
</head>
<body>
    <button id="btn1">单击</button>
    <button id="btn2">双击</button>
    <button id="btn3">鼠标按下</button>
    <button id="btn4">鼠标抬起</button>
    <div class="box1" id="btn5"></div>
    <div class="box2" id="btn6"></div>
    <div class="box3" id="btn7"></div>
    <div class="box4" id="btn8"></div>
    <div class="box5" id="btn9"></div>
    <script src="index.js"></script>
</body>
</html>

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
var btn5 = document.getElementById("btn5");
var btn6 = document.getElementById("btn6");
var btn7 = document.getElementById("btn7");
var btn8 = document.getElementById("btn8");
var btn9 = document.getElementById("btn9");
btn1.onclick = function () {
    console.log("单击事件");
}
btn2.ondblclick = function () {
    console.log("双击事件");
}
btn3.onmousedown = function(){
    console.log("鼠标按下");
}
btn4.onmouseup = function(){
    console.log("鼠标抬起");
}
btn5.onmousemove = function(){
    console.log("鼠标移动了");
}
btn6.onmouseenter = function(){
    console.log("鼠标进入了");
}
btn7.onmouseleave = function(){
    console.log("鼠标离开了");
}
btn8.onmouseover = function(){
    console.log("鼠标进入了");
}
btn9.onmouseout = function(){
    console.log("鼠标离开了");
}

注意

onmouseenter\onmouseleave和onmouseover\onmouseout的区别：

前一组在进入子节点或者离开父节点的时候都不会触发，后一组在进入子节点或者离开父节点的时候都会触发

Event事件对象

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .root{
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com" id="BD">baidu</a>
    <button id="btn">按钮</button>

    <div class="root" id="root">
        <div class="box" id="box"></div>
    </div>
    <script src="index.js"></script>
</body>
</html>

var btn = document.getElementById("btn");
var BD = document.getElementById("BD");
var root = document.getElementById("root");
var box = document.getElementById("box");

btn.onclick = function(event) {
    console.log(event.type);
    event.target.innerHTML = "点击之后";
}

BD.onclick = function(event){
    event.preventDefault();
    console.log("点击了");
}

root.onclick = function(){
    console.log("root");
}

box.onclick = function(e){
    e.stopPropagation();
    console.log("box");
}

键盘事件

示例

<!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="text" id="username">
    <input type="text" id="password">
    <script src="index.js"></script>
</body>
</html>

var password = document.getElementById("password");
var username = document.getElementById("username");
username.onkeydown = function(e){
    console.log("按下了");
}

username.onkeyup = function(e){
    console.log(e.target.value);
}

username.onkeypress = function(e){
    console.log("keypress");
}

password.onkeyup = function(e){
    console.log(e.keyCode);// 唯一标识表示的就是ascll码值，回车表示13
}

表单事件

input事件

select事件

Change事件

reset事件和submit事件

示例

<!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="text" id="username">
    <input type="text" id="password">
    <!-- <form action="服务器地址" id="myForm" οnsubmit="submitHandle"> -->
    <form id="myForm" onsubmit="submitHandle">
        <input type="text">
        <button id="resetBtn">重置</button>
    </form>

    <script src="index.js"></script>
</body>
</html>

var username = document.getElementById("username");
username.oninput = function(e){
    // 事实读取数据
    console.log(e.target.value);
}

username.onselect = function(e){
    console.log("选中了");
}

var password = document.getElementById("password");
password.onchange = function(e){
    // 回车、失去焦点后触发
    console.log(e.target.value);
}

var resetBtn = document.getElementById("resetBtn");
var myForm = document.getElementById("myForm");
resetBtn.onclick = function(){
    myForm.reset();
}

function submitHandle(){
    console.log("想做的事儿");
}

事件代理

利用点击子元素可以触发父元素时间的特性，从而通过父元素来监听每一个子元素的行为。

示例

<!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>
    <ul id="list">
        <li>列表1</li>
        <li>列表2</li>
        <p>哈哈哈</p>
    </ul>

    <script src="index.js"></script>
</body>
</html>

var list = document.getElementById("list");
list.onclick = function(){
    console.log("点击了");
}

list.addEventListener("click",function(event){
    if(event.target.tagName == "LI"){
        console.log("点击了LI标签");
        console.log(event.target.innerHTML);
    }
})

定时器

可以向任务队列中添加定时任务

setTimeout()

用于指定一个代码段延时多少秒来执行

两个参数，第一个参数指的是需要定时的函数，第二个参数是定时的毫秒数

var timer = setTimeout(function(){
    console.log("大家好，我是三秒执行之后的结果");
},3000)
// 取消定时器
clearTimeout(timer);

names: "zhiwei";
var user = {
    names: "chenzhiwei",
    getNames: function(){
        setTimeout(function(){
            console.log(this.names);
        },1000)
    }
}

user.getNames();

setInterval()

无限次执行任务，但是每次执行有一定的间隔时间

var i = 0;
setInterval(function(){
    i ++;
    console.log(i);
},1000);

防抖

每次点击都会向服务器发送一次请求，过多的请求会造成页面的卡顿。

解决思路：在第一次触发的时，不立即执行这个函数，而是给出一个期限的值（eg：200ms），到达200ms之后再执行一次

示例

// 防抖处理
// 200ms内如果没有再次触发，则执行定时器
// 200ms内再次触发了定时器就将其清除
function debounce(fn,delay){
    var timer = null;
    return function(){
        if(timer){
            clearTimeout(timer);
        }
        timer = setTimeout(fn,delay)
    }
}


// 滚动事件
window.onscroll = debounce(scrollHandle,200);

function scrollHandle(){
    console.log("页面滚动了");
    var scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
}

节流

在按住不动的时候不会一直触发，而是经过了一段时间间隔之后连续触发。

示例

function throttle(fn,delay){
    var valid = true;
    return function(){
        if(!valid){
            return false;
        }
        valid = false;
        setTimeout(function(){
            fn();
            valid = true;
        },delay)
    }
}

// 滚动事件
window.onscroll = throttle(scrollHandle,2000);

function scrollHandle(){
    console.log("页面滚动了");
    var scrollTop = document.documentElement.scrollTop;
    console.log(scrollTop);
}

使用场景

1. 使用搜索框input事件，因为需要实时进行搜索，所以可以使用节流方案。
2. 页面resize时间，因为需要做页面配置，需要对最终呈现页面进行dom渲染，一般使用防抖。