JavaScript学习笔记

JavaScript 学习笔记

1 JavaScript 概述

• JavaScript 是一门世界上最流行的脚本语言，由 Netscape（网景公司）的 Brendan Eich 开发，仅仅用了十天时间就基本成型

• 一个合格的后端人员，必须精通 JS

• ECMAScript 可以理解为一个 JS 的一个标准

• JS 的最新版本已经到 ES6，但是大多数浏览器仍然只支持 ES5 版本

2 基本语法入门

2.1 变量定义

var num = 30;
var name = "Jack";

2.2 流程控制

// if - else
if (...){
    ...
}else if (){
    ...
}else{
    ...
}
    
// 控制台输出
alert("Hello World");
console.log("Hello World");

2.3 数据类型

• JS 不区分小数、整数，统一为 number

123				// 整数
123.12			// 小数
1.325e9			// 科学技术法
-88				// 负数
NaN				// 不是 number
Infinity		// 无限大，超出了 JS 范围

• 字符串类型

var name1 = "Jack";
var name2 = 'Rose';
var name3 = '\n';

• 布尔值

true
false

• 逻辑运算

&&			// 与
||			// 或
!			// 非

• 比较运算符

// 其他的运算符均和 Java 一样，唯一区别如下
=			// 赋值运算符
==			// 等于（类型不一致，值一样，会被判定为 true，如 1 == "1"）
===			// 绝对等于（类型一样，值一样才会判定为 true）
    
NaN 		// 与所有的数值都不相等，与自己也不相等，只等能通过 isNaN() 方法判断这个数是否为 NaN

• null 和 undefined

null		// 表示值为空
undefined	// 表示未定义

• 数组

// JS 中不要求数组的数据类型相同，与 python 一样
var arr = [1, 2, 3, "4", '5', null, true]
// 数组下表越界不会报错，会返回 undefined

• 对象

var = student{
    name: "Jack",
    age: 18,
    tags: ["js", "Java", "python"]
}

2.4 严格检查模式

'use strict';			// 启用严格检查模式，必须写在 JS 的第一行
let name = "Jack";		// 局部变量建议使用 let 定义

3 基本数据类型

3.1 字符串

• 正常字符串定义使用单引号或者双引号包裹
• 注意转义字符

\'
\n
\t
\u4e2d			// Unicode 编码
\x41			// ASCII

• 模板字符串

// ES6 支持
let name = "Jack";
let age = 18;
let msg = `${name} 现在 ${age} 岁`;
console.log(msg);

• 字符串不可变性

let name = "Jack";
name[0] = '5';
console.log(name);		// Jack

3.2 数组

• 数组具有可变性

let arr = [1, 2, 3];
arr.length = 5;
console.log(arr[1], arr[4]);		// 2	undefined

• 数组截取

let arr = [1,2,3,4];
// slice() 方法截取数组的一部分，返回一个新的数组
console.log(arr.slice(1,3));		// [2,3]
console.log(arr.slice(2));			// [3,4]

• 数组尾部添加、删除元素

let arr = [1,2,3,4];
// push : 向数组尾部压入元素
arr.push(5, 6);						
console.log(arr);					// [1,2,3,4,5,6]
// pop : 从数组尾部弹出元素
arr.pop();							
console.log(arr);					// [1,2,3,4,5]

• 数组头部添加、删除元素

let arr = [1,2,3,4];
// unshift : 向数组头部压入元素
arr.unshift(5, 6);					
console.log(arr);					// [5,6,1,2,3,4]
// shift : 从数组头部弹出元素
arr.shift();
console.log(arr);					// [6,1,2,3,4]

• 数组排序

let arr = [5,7,1,3,4];
arr.sort();
console.log(arr);					// [1,3,4,5,7]

• 反转数组

let arr = [1,3,4,5,7];
arr.reverse();
console.log(arr);					// [7,5,4,3,1]

• 数组拼接

// concat() 方法只是返回一个拼接后的新数组，不会改变原数组
let arr = [5,6];
let msg = arr.concat([7,8]);
console.log(msg);					// [5,6,7,8]
console.log(arr);					// [5,6]

• 连接符

let arr = ["A", "B", "C"];
let s = arr.join("-");
console.log(s);						// A-B-C

• 多维数组

let arr = [[1,2], [3,4]];
console.log(arr[1][0]);				// 3

3.3 对象

JS 对象中所有的键值对，key 均为字符串属性，value 为任意属性

• 定义对象

let student = {
    name: "Jack",
    age: 18,
    city: "ShangHai",
    number: 1330152
}

• 对象赋值

student.age = 20;
// 使用一个不存在的属性，不会报错
student.email						// undefined

• 动态删减属性

delete student.age;

• 动态添加属性

student.email = "166@ll.com";

• 判断属性是否在对象中（包括其 “父类” 属性）

console.log('name' in student);			// true
console.log('toString' in student);		// true

• 判断一个属性是否是该对象自身所拥有的

console.log(student.hasOwnProperty('name'));			// true	
console.log(student.hasOwnProperty('toString'));		// false

3.4 流程控制

• 判断

let age = 8;

if (age < 5){
    age++;
}else if (age >= 5 && age < 10){
    age += 2;
}else {
    age--;
}

• while 循环

let i = 0;

while (i < 5){
    i++;
}

• do - while 循环

let i = 0;

do {
    i++;
}while (i < 5);

• for 循环

for (let i = 0; i < 10; i++) {
    console.log("Hello World");
}

• forEach 循环

let arr = [7,8,9];
arr.forEach(function (value) {
    value += 2;				// 9 10 11
    console.log(value);
})

• for - in 循环

// 打印的是数组的下标
let arr = [7,8,9];
for (const arrKey in arr) {
    console.log(arrKey);	// 0 1 2
}

• for - of 循环

// 打印的是数组元素
let arr = [7,8,9];
for (const num of arr) {
    console.log(num);		// 7 8 9
}

3.5 Map 和 Set

• Map

// 定义 Map，类似于 python 的字典
let map = new Map([["Tom", 100], ["Jerry", 99]]);

// 取值
console.log(map.get("Jerry"));

// 修改值
map.set("Tom", 80);
console.log(map);						// Map(2) { 'Tom' => 80, 'Jerry' => 99 }

// 添加键值对
map.set("Marry", 101);
console.log(map);						// Map(3) { 'Tom' => 80, 'Jerry' => 99, 'Marry' => 101 }

// 删除键值对
map.delete("Marry");
console.log(map);						// Map(2) { 'Tom' => 80, 'Jerry' => 99 }

// 判断是否包含某值
console.log(map.has("Jack"));      // false

// 迭代器
let iter = map.entries();
for (let i = 0; i < map.size; i++) {
    console.log(iter.next());            
}
// { value: [ 'Tom', 80 ], done: false }
// { value: [ 'Jerry', 99 ], done: false }

• Set

// 定义 Set
let set = new Set([1,1,2,2,3,3,4]);
console.log(set);						// Set(4) { 1, 2, 3, 4 }

// 添加元素
set.add(5);
console.log(set);						// Set(5) { 1, 2, 3, 4, 5 }

// 删除元素
set.delete(3);
console.log(set);						// Set(4) { 1, 2, 4, 5 }

// 判断是否包含值
console.log(set.has(4));				// true

// 迭代器
let iter = set.entries();
for (let i = 0; i < set.size; i++) {
    console.log(iter.next());
}
// { value: [ 1, 1 ], done: false }
// { value: [ 2, 2 ], done: false }
// { value: [ 4, 4 ], done: false }
// { value: [ 5, 5 ], done: false }

4 函数及面向对象

4.1 函数定义

4.1.1 函数定义

// 定义方式一
function abs01(num) {
    return num >= 0 ? num : -num;
}

// 定义方式二，类似 Java 匿名函数
const abs02 = function (num) {
    return num >= 0 ? num : -num;
}

//调用函数
abs01(-20);
abs02(10);

4.1.2 抛出异常

如果我们不特别处理，JS 几乎很少抛出异常，这不是我们所以希望的，因此需要手动抛出异常

function abs(num) {
    if (typeof num != 'number'){
        throw 'Not a Number';
    }else{
        return num >= 0 ? num : -num;
    }
}

4.1.3 可变长参数

// argumnets : 包含传进来的所有参数，是一个数组
function abs(num) {
    for (let i = 0; i <arguments.length; i++) {
        console.log(arguments[i]);
    }
}

abs(1,2,3,4,5)		// 1 2 3 4 5

// ...rest : 包含除过固定参数之外的所有参数	ES6之后
function abs(num, ...rest) {
    console.log("num: " + num);
    console.log("rest: " + rest);
}

abs(1,2,3,4,5)
// num: 1
// rest: 2,3,4,5

4.2 变量作用域

// 函数体内声明的变量，函数体外无法调用
function f() {
    let num = 0;
    num++;
}

console.log(num);			// ReferenceError: num is not defined

// 两个函数之中的同名参数，并不冲突
function f1() {
    let num = 0;
    console.log(num);			// 0
}

function f2() {
    let num = "A";
    console.log(num);			// A
}

// 内部函数可以访问外部函数的成员，外部函数无法访问内部函数成员	--> 尽量避免函数嵌套
function f1() {
    let num = 0;
    console.log("f1() -> num = " + num);			// f1() -> num = 0
    function f2() {
        let str = "A";
        console.log("f2() -> num = " + num);		// f2() -> num = 0
    }
    console.log("f2() -> str = " + str);			// ReferenceError: str is not defined
}

// 假设内部函数和外部函数的变量重名，则函数会从自身开始寻由内向外寻找
// 假设外部存在该同名变量，则内部的会屏蔽外部的该同名变量
function f1() {
    let num = 10;
    function f2() {
        let num = "A";
        console.log("inner = " + num);				// inner = A
    }
    f2();
    console.log("outer = " + num);					// outer = 10
}

// 全局变量，作用域为整个文件，默认会绑定在 window (全局对象，即浏览器) 对象下
let num = 10;

function f() {
    console.log(window.num);						// 10
}

由于所用的全局变量都会默认绑定到 window 上，如果使用不同的 js 文件，全局变量命名相同的话，就会产生冲突，那应该怎么解决？

我们可以自定义一个唯一的全局变量，将其他的变量绑定到它上边

const SkgApp = {};									// 唯一全局变量

SkgApp.name = "SKG";								// 定义全局变量，减少冲突的可能
SkgApp.add = function (x, y) {
    return x + y;
}

使用 let 去定义局部作用域的变量，使用 const 去定义常量（不可修改）

4.3 方法

方法就是把函数放在对象里面，对象只包含属性与方法两种内容

方式一：方法直接写在对象中

let test = {
    name: '荒天帝',
    birthday: 1985,
    age: function () {	//方法
        return new Date().getFullYear() - this.birthday;
    }
};
//属性带括号，方法必须带括号
console.log(test.name, test.age());		//荒天帝 37

方式二：方法写在外面，直接调用

function getAge() {
    return new Date().getFullYear() - this.birthday;
};

let test = {
    name: '荒天帝',
    birthday: 1985,
    age: getAge		//这里方法不带括号
};

console.log(test.name, test.age());

5 内部对象

5.1 标准对象

console.log('typeof 123 is ' + typeof 123);
console.log('typeof \'123\' is ' + typeof '123');
console.log('typeof [] is ' + typeof []);
console.log('typeof {} is ' + typeof {});
console.log('typeof true is' + typeof true);
console.log('typeof NaN is ' + typeof NaN);
console.log('type of Math.abs is ' + typeof Math.abs);
console.log('type undefined is ' + typeof undefined);

/*
 * typeof 123 is number
 * typeof '123' is string
 * typeof [] is object
 * typeof {} is object
 * typeof true isboolean
 * typeof NaN is number
 * type of Math.abs is function
 * type undefined is undefined
*/

5.2 Date

let day = new Date();
console.log('time：' + day);
console.log('年份：' + day.getFullYear());
console.log('月份：' + day.getMonth());	//0 ~ 11
console.log('日期：' + day.getDate());
console.log('星期：' + day.getDay());
console.log('小时：' + day.getHours());
console.log('分钟：' + day.getMinutes());
console.log('秒钟：' + day.getSeconds());
console.log('时间戳：' + day.getTime());
console.log('时间戳转时间：' + new Date(1651759273193));
console.log('本地时间：' + day.toLocaleString());

5.3 JSON

• JSON 是一种轻量级的数据交换格式

• 它具有十分简洁和清晰地层次结构

• 易于阅读和编写，易于机器解析和生成，有效的提高了网络传输效率

• 任何 js 支持的类型都可以用 JSON 表示

对象转JSON

let user = {
    name: '荒天帝',
    age: 18,
    sex: '男'
};

let jsonUser = JSON.stringify(user);
console.log(jsonUser, typeof jsonUser);		//{"name":"荒天帝","age":18,"sex":"男"} string

JSON转对象

let user = {
    name: '荒天帝',
    age: 18,
    sex: '男'
};

let jsonUser = JSON.stringify(user);
console.log(JSON.parse(jsonUser));		//{ name: '荒天帝', age: 18, sex: '男' }
console.log(typeof JSON.parse(jsonUser));	//object

6 面向对象

6.1 原型对象

let student = {
    name: '荒天帝',
    age: 14,
    run: function () {
        console.log(this.name + ' run...')
    }
};

let jack = {
    name: 'Jack'
};

//这里的原型 __proto__ ，类似于 Java 的父类
jack.__proto__ = student;
console.log(jack.run())

6.2 class 对象

6.2.1 定义类

使用calss关键字，该写法在 ES6 之后才支持

class student {
    constructor(name) { //构造器
        this.name = name;
    }

    run(){
        console.log('run...');
    }
}

let jack = new student('jack');

6.2.2 继承

class Student {
    constructor(name) {
        this.name = name;
    }
}

class postGraduate extends Student{
    constructor(name, age, sex) {
        super(name);
        this.age =age;
        this.sex = sex;
    }
}

7 BOM 对象

BOM(Browser Object Model)，浏览器对象模型

7.1 window 对象

//代表的是浏览器窗口
let window = {
    innerHeight: 188,
    innerWidth: 100,
    outerHeightL: 800,
    outerWidth: 500
    ......
};

7.2 navigetor 对象

//封装了浏览器信息
window.navigator.appName
navigator.appVersion
navigator.userAgentData
navigator.appVersion
......

7.3 screen 对象

//屏幕相关信息
screen.width
screen.height

7.4 location(重要)

代表当前页面的 URL 信息

assign: ƒ assign()		//设置新地址
host: "m.baidu.com"	
hostname: "m.baidu.com"
href: "https://m.baidu.com/"
origin: "https://m.baidu.com"
protocol: "https:"
reload: ƒ reload()		//刷新网页

7.5 history 对象

代表浏览器的历史记录

history.back();			//后退
history.forward();		//前进

8 操作 DOM 对象（重点）

DOM：文档对象模型（Document Object Model），整个浏览器网页就是一个树形结构，常用操作为：增、删、改、查

8.1 定位 DOM 结点

//根据 id 定位
let father = document.getElementById('father');		
//根据 class 定位
let children = document.getElementsByClassName('children');	
//根据 name 定位
let user = document.getElementsByName('user');	
//根据标签名定位
let tag = document.getElementsByTagName('div');		
//获取父结点的所有孩子结点
let childList = father.children;		

8.2 更新 DOM 结点

let user = document.getElementById('user');
//修改文本的值
user.innerText = '123';
//解析HTML
user.innerHTML = '<strong>123</strong>';        
//修改结点属性
user.style.fontSize = '20px';       
user.style.color = '#ed12df';
user.style.padding = '5px';

8.3 删除 DOM 结点

删除结点，需要先获得待删除结点的父节点，然后通过父节点删除自己（删除过程是动态的）

let selfNode = document.getElementById('p1');
let father = selfNode.parentElement;
father.removeChild(father.children[0]);

8.4 插入 DOM 结点

需求：将 JavaScript 标签加入到 list 中

<p id='js'>JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

document.getElementById('list').append(document.getElementById('js'));

需求：新建一个新的 p 标签，追加到 list 中（也是一种插入）

let newNode = document.createElement('p');
newNode.id = 'new';
newNode.innerText = 'new node';
document.getElementById('list').append(newNode);

9 操作表单（重点）

9.1 操作输入框

<form action="" method="post">
    <span>用户名:
        <input type="text" id="username">
    </span>
</form>

let user_text = document.getElementById('username');
undefined
user_text.value		//取值
user_text.value = 'js';		//赋值

9.2 操作多选框

<form action="#" method="post">
    <span>性别:
        <input type="radio" name="sex" value="boy" id="boy">男
        <input type="radio" name="sex" value="girl" id="girl">女
    </span>
</form>

let boy = document.getElementById('boy');
let girl = document.getElementById('girl');
boy.checked		//是否被选中

9.3 提交验证及密码加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<form action="#" method="post">
    <p><span>用户名：</span> <input type="text" id="username" name="username"></p>
    <p><span>密码：</span> <input type="password" id="password" name="password"></p>
    <button type="submit" onclick="checkInfo()">提交</button>
</form>
<script>
    function checkInfo() {
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        //md5算法加密
        password.value = md5(password);
        console.log('username : ' + username.value);
        console.log('password : ' + password.value);
    }
</script>
</body>
</html>

10 初识 jQuery

jQuery 官网：jQuery

jQuery 语法：$(selector).action()

10.1 选择器

//css中包含的选择器他都可以使用
$('div').click();			//标签选择器
$('#id-01').click();			//id 选择器
$('.class-01').click();		//class 选择器

10.2 事件

//鼠标事件
$('a').mousedown()
$('a').mouseenter()
$('a').mouseleave()
$('a').mousemove()
$('a').mouseout()
$('a').mouseover()
$('a').mouseup()

//键盘事件
$('a').keydown()
$('a').keypress()
$('a').keyup()

//点击事件
$('a').click()
$('a').doubleclick()

10.3 操作 DOM

$('#test-ul li[name=t1]').text();			//获取值
$('#test-ul li[name=t1]').text('text');		//设置值
$('#test-ul li[name=t1]').html();			//获取值
$('#test-ul li[name=t1]').html('<h1>TEXT</h1>');		//设置值

10.4 操作 CSS

$('#test-ul li[name=t1]').css({"color":"red"});	

10.5 元素显示和隐藏

$('#test-ul li[name=t1]').show();
$('#test-ul li[name=t1]').hide();