JavaScript

JavaScript的输出

页面输出

<script>
    document.write("Hello,World!");
</script>

控制台输出

<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>

弹出窗口输出

<script>
    alert("Hello,World!");
</script>

函数

function fun(){
    console.log("这是我的第二个函数");
}

var fun  = function() {
    console.log("这是我的第三个函数");
}

DOM

查找 HTML 元素

document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.querySelector(CSS选择器)
document.querySelectorAll(CSS选择器)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    console.log(btn);
</script>
</body>
</html>

获取 HTML 的值

元素节点.innerText
元素节点.innerHTML
元素节点.属性
元素节点.getAttribute(attribute)
元素节点.style.样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">我是按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");
    console.log(btn.innerText);
</script>
</body>
</html>

事件

窗口事件

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

表单事件

属性	描述
onblur	当元素失去焦点时运行脚本。
onfocus	当元素获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素获得用户输入时运行脚本。
oninvalid	当元素无效时运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本。

鼠标事件

属性	描述
onclick	当单击鼠标时运行脚本。
onscroll	当滚动元素的滚动条时运行脚本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box" style="width: 100px;height: 100px;background: black;"></div>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var box = document.getElementById("box");

    /* 当鼠标移入div，背景颜色变为红色 */
    box.onmouseenter = function () {
        this.style.background = "red";
    };

    /* 当鼠标移出div，背景颜色变为绿色 */
    box.onmouseleave = function () {
        this.style.background = "green";
    };
</script>
</body>
</html>

BOM

BOM对象

Window：代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator：代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location：代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
History：代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
Screen：代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

Window对象

警告框

alert("我是一个警告框！");

确认框

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

提示框

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    console.log(person);
}

延时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("Hello");
        }, 3000);
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

定时器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("Hello");
        }, 1000);

        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

Location对象

console.log(location);          //输出location对象
console.log(location.href);     //输出当前地址的全路径地址
console.log(location.origin);   //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host);     //输出当前地址的主机
console.log(location.port);     //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search);   //输出当前地址的?后边的参数部分

修改地址

location.href = "https://www.baidu.com";

JSON

JSON：JavaScript Object Notation（JavaScript 对象标记法），它是一种存储和交换数据的语法。

在json中，每一个数据项，都是由一个键值对（或者说是名值对）组成的，但是键必须是字符串，且由双引号包围，而值必须是以下数据类型之一：

字符串（在 JSON 中，字符串值必须由双引号编写）
数字
对象（JSON 对象）
数组
布尔
null

var person = {"name": "zhangsan", "age": 62, "city": "BeiJing"};
console.log(person);

JS对象转JSON字符串

var obj = {name: "猪八戒", age: 28, gender: "男"};
var jsonStr = JSON.stringify(obj);
console.log(jsonStr);

let和const

ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。

const 声明一个只读的常量，一旦声明，常量的值就不能改变。

模板字符串

JavaScript 中的模板字符串是一种方便的字符串语法，允许你在字符串中嵌入表达式和变量。
模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。
模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tagFunction`string text ${expression} string text`

const multiLineText = `
  This is
  a multi-line
  text.
`;

this

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。

如果单独使用，this 表示全局对象。

在函数中，this 表示全局对象。

在函数中，在严格模式下，this 是未定义的(undefined)。

在事件中，this 表示接收事件的元素。

类似 call() 和 apply() 方法可以将 this 引用到任何对象。

解构表达式

//数组的解构赋值
const arr = ["张学友", "刘德华", "黎明", "郭富城"];
let [zhang, liu, li, guo] = arr;
console.log(zhang);
console.log(liu);
console.log(li);
console.log(guo);

//对象的解构赋值
const lin = {
    name: "林志颖",
    tags: ["车手", "歌手", "小旋风", "演员"]
};
let {name, tags} = lin;
console.log(name);
console.log(tags);

//复杂对象的解构赋值
let wangfei = {
    name: "王菲",
    age: 18,
    songs: ["红豆", "流年", "暧昧"],
    history: [
        {name: "窦唯"},
        {name: "李亚鹏"},
        {name: "谢霆锋"}
    ]
};
let {name, age, songs: [one, two, three], history: [first, second, third]} = wangfei;
console.log(name);
console.log(age);
console.log(one);
console.log(two);
console.log(three);
console.log(first);
console.log(second);
console.log(third);

箭头函数

如果形参只有一个，则小括号可以省略
函数体如果只有一条语句，则花括号可以省略，函数的返回值为该条语句的执行结果
箭头函数 this 指向声明时所在作用域下 this 的值，箭头函数不会更改 this 指向，用来指定回调函数会非常合适
箭头函数不能作为构造函数实例化
不能使用 arguments 实参

// this 指向声明时所在作用域中 this 的值
let fn = () => {
    console.log(this);
}
fn();

let school = {
    name: "张三",
    getName() {
        let subFun = () => {
            console.log(this);
        }
        subFun();
    }
};
school.getName();

rest

// 作用与 arguments 类似
function add(...args) {
    console.log(args);
}
add(1, 2, 3, 4, 5);

// rest 参数必须是最后一个形参
function minus(a, b, ...args) {
    console.log(a, b, args);
}
minus(100, 1, 2, 3, 4, 5, 19);

spread

// 展开数组
let tfboys = ["德玛西亚之力", "德玛西亚之翼", "德玛西亚皇子"];
function fn() {
    console.log(arguments);
}
fn(...tfboys);

// 展开对象
let skillOne = {
    q: "致命打击"
};
let skillTwo = {
    w: "勇气"
};
let skillThree = {
    e: "审判"
};
let skillFour = {
    r: "德玛西亚正义"
};
let gailun = {...skillOne, ...skillTwo, ...skillThree, ...skillFour};
console.log(gailun);

浅拷贝和深拷贝

如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝，深拷贝与浅拷贝的概念只存在于引用数据类型。

浅拷贝

var obj1 = {
    name: "张三",
    age: 20,
    speak: function () {
        console.log("我是" + this.name);
    }
};

var obj2 = obj1;

// 当修改obj2的属性和方法的时候，obj1相应的属性和方法也会改变
obj2.name = "李四";
console.log(obj1);
console.log(obj2);

深拷贝

var obj1 = {
    name: "张三",
    age: 20,
    birthday: {
        year: 1997,
        month: 12,
        day: 5
    },
    speak: function () {
        console.log("我是" + this.name);
    }
};

var obj2 = deepClone(obj1);

// 当修改obj2的属性和方法的时候，obj1相应的属性和方法不会改变
obj2.name = "李四";
console.log(obj1);
console.log(obj2);

/**
 * 深拷贝通用方法
 * @param obj   需要拷贝的对象
 * @param has
 * @returns {any|RegExp|Date}
 */
function deepClone(obj, has = new WeakMap()) {
    // 类型检查
    if (obj == null) return obj;
    if (obj instanceof Date) return obj;
    if (obj instanceof RegExp) return obj;
    if (!(typeof obj == "object")) return obj;

    // 构造对象
    const newObj = new obj.constructor;

    // 防止自引用导致的死循环
    if (has.get(obj)) return has.get(obj);
    has.set(obj, newObj);

    // 循环遍历属性及方法
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = deepClone(obj[key]);
        }
    }

    // 返回对象
    return newObj;
}

模块化

模块化的暴露

//方式一：分别暴露
export let school = "西安邮电大学";

export function study() {
    console.log("我们要学习！");
}

//方式二：统一暴露
let school = "西安邮电大学";

function findJob() {
    console.log("我们要找工作！");
}

export {school, findJob};

//方式三：默认暴露
export default {
    school: "西安邮电大学",
    change: function () {
        console.log("我们要改变自己！");
    }
}

模块化的导入

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 -->
<script type="module">
    // 引入 m1.js 模块内容
    import * as m1 from "./m1.js";
    // 引入 m2.js 模块内容
    import * as m2 from "./m2.js";
    // 引入 m3.js 模块内容
    import * as m3 from "./m3.js";
     
    m1.study();
    m2.findJob();
    m3.default.change();
</script>
</body>
</html>

AJAX

ajax 全名 async javascript and XML(异步JavaScript和XML)
是前后台交互的能⼒也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
是⼀个默认异步执⾏机制的功能,AJAX分为同步（async = false）和异步（async = true）

同步请求

同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

异步请求

默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

使用

Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。
XMLHttpRequest 对象方法描述

// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

//所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
// 第⼀个参数是本次请求的请求⽅式 get / post / put / ...
// 第⼆个参数是本次请求的 url 
// 第三个参数是本次请求是否异步，默认 true 表示异步，false 表示同步
// xhr.open('请求⽅式', '请求地址', 是否异步)
xhr.open('get', './data.php')

发送请求

//如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
// 使⽤ xhr 对象中的 send ⽅法来发送请求
xhr.send()

一个最基本的 ajax 请求就是上面三步但是光有上面的三个步骤，我们确实能把请求发送到服务端
如果服务端正常的话，响应也能回到客户端但是我们拿不到响应
如果想要拿到响应，我们需要有两个前提条件

本次 HTTP 请求是成功的，也就是我们下面要说的 http 状态码为 200 ~ 299

ajax 对象也有自己的状态码，用来表示本次 ajax 请求中各个阶段

AJAX状态码

readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行
readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后
readyState === 2 : 表示 send 方法已经执行完成
readyState === 3 : 表示正在解析响应内容
readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

案例

 readyState === 0 : 表示未初始化完成，也就是 open 方法还没有执行 
 readyState === 1 : 表示配置信息已经完成，也就是执行完 open 之后 
 readyState === 2 : 表示 send 方法已经执行完成
 readyState === 3 : 表示正在解析响应内容
 readyState === 4 : 表示响应内容已经解析完毕，可以在客户端使用了

Promise

Promise 是 ES6 引入的异步编程的新解决方案，语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

//实例化 Promise 对象
const p = new Promise(function (resolve, reject) {
    setTimeout(function () {

        // 成功调用resolve()处理
        let data = "数据读取成功";
        resolve(data);

        // 失败调用reject()处理
        let err = "数据读取失败";
        reject(err);

    }, 1000);
});

//调用 promise 对象的 then 方法
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
});

// 接口地址: https://api.apiopen.top/getJoke
const p = new Promise((resolve, reject) => {
    //1. 创建对象
    const xhr = new XMLHttpRequest();
    //2. 初始化
    xhr.open("GET", "https://api.apiopen.top/getJoke");
    //3. 发送
    xhr.send();
    //4. 绑定事件, 处理响应结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            //判断响应状态码 200-299
            if (xhr.status >= 200 && xhr.status < 300) {
                //表示成功
                resolve(xhr.response);
            } else {
                //如果失败
                reject(xhr.status);
            }
        }
    }
});

//指定回调
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
});

Promise-then方法

调用 then 方法，then 方法的返回结果是 Promise 对象，对象状态由回调函数的执行结果决定，如果回调函数中返回的结果是非 promise 类型的属性，状态为成功，返回值为对象的成功的值

//创建 promise 对象
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("用户数据");
    }, 1000)
});

//链式调用+箭头函数
p.then(value => {
    console.log(value);
    return value;
}).then(value => {
    console.log(value);
});

Promise-catch方法

如果只想处理错误状态，我们可以使用 catch 方法

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        //设置 p 对象的状态为失败, 并设置失败的值
        reject("出错啦!");
    }, 1000);
});

p.catch(function (reason) {
    console.error(reason);
});

posted @ 2025-03-19 22:24 LuoboWang 阅读(26) 评论(0) 收藏举报

刷新页面返回顶部

wanglunbo