首页 > 编程语言> > JavaScript（狂神说学习笔记）

JavaScript（狂神说学习笔记）

2021-09-29 09:03:48 作者：互联网

JavaScript

文章目录

JavaScript

1. 概括

Ant Design
JavaScript的历史
JavaScript是最流行的的脚本语言
Java和JavaScript语言风格相差甚远，只是为了蹭热度

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

2. 快速入门

2.1 导入JavaScript

内部标签
外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部引用-->
    <!--注意：必须成对出现，不要改成自闭合标签-->
    <script src="js/action.js"></script>
    <!--不写type默认为text/javascript-->
    <script type="text/javascript"></script>
</head>
<body>
<!--html直接使用js，但不推荐
<script>
    alert("hello,world!");
</script>
-->
</body>
</html>

alert("hello,world!");

2.2 基本语法

js中只有三种变量：let（局部变量）、var（全局变量）、const（常量）
js严格区分大小写
浏览器必备调试须知

console.log()

// 1. 变量定义
var score = 60;
// 2. 条件控制
if (score >= 90 && score <= 100){
    alert("A");
}else if (score >= 80 && score < 90){
    alert("B");
}else if (score >= 70 && score < 80){
    alert("C");
}else if (score >= 60 && score < 70){
    alert("D");
} else if (score >= 0 && score < 60){
    alert("E");
}else {
    alert("输入成绩有误！")
}

2.3 数据类型

数值、文本、图形、音频、视频…

变量
var
let
命名规范与其他语言一样
局部变量建议使用let去定义

number
js不区别小数和整数

123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN // not a number
Infinity //表示无限大

字符串
"abc"
'abc'

布尔值
true
false

逻辑运算
&&
||
!

比较运算符

= 
== 等于（类型不一样，值一样，也会判断为true） 
=== 绝对等于（类型和值都一样，才会判断为true）

注意事项：1. NaN与所有的数值都不相等，包括自己；只能通过isNaN()来判断是否是NaN
2. 浮点数存在精度缺失的问题，尽量避免浮点数运算

null和undefined
null 空
undefined 未定义

数组

var arr = [1,2,3,'hello'];

对象

var person = {
	name: "JayNier",
	age: 21,
	tags:['js','ad',1,2]
}

‘use strict’; //严格检查模式
需要设置IDEA支持ES6语法，必须卸载js的第一行预防js的随意性导致的一些问题

3. 数据类型

3.1 字符串

正常字符串使用''和“”包裹
注意转义字符</kbd>的使用

\u4e2d  unicode字符
\x41  Ascll字符

多行字符串使用`编写

let msg = 
		`hello
		world
		!`;

模板字符串使用`和${}编写

let name = "Jay";
let age = 20;
let msg = `hello, ${name}`;
console.log(msg);

字符串长度

str.length

字符串不可变
大小写转换

//这是方而不是属性
str.toUpperCase();
str.toLowerCase();

获取字符串指定字符下标

str.indexOf('t');

获取子字符串（包头不包尾）

str.substring(1);
str.substring(1,3);
str.substring[1,3);//测试后发现会报错

3.2 数组

Array可以包含任意的数据类型

长度

arr.length

注意：可以通过改变arr.length的值来调整大小。
2. indexOf()通过元素获得下表索引
3. slice()截取Array的一部分，返回新数组(包头不包尾)
4. pop()，push()出入栈

shift()，unshift()
sort()排序
reverse()元素反转
concat()数组拼接，获得新数组
join()连接符
打印拼接数组，使用指定的字符链接
多维数组

3.3 对象

var 对象名 ={
	属性名：属性值,
	属性名：属性值,
	属性名：属性值
}

{…}表示一个对象，键值对描述属性，多个属性间用逗号隔开，最后一个不加逗号
JavaScript中的键都是字符串，值是任意类型

对象赋值

person.name = “Jay”；

使用一个不存在的对象属性，不会报错 undefined
动态的删减属性delete

delete person.name

判断属性是否在这个对象中in

'age' in person;
-> true
'toString' in person;
-> true //继承

判断属性是否是这个对象自己拥有hasOwnProperty

person.hasOwnProperty('age');
->true
person.hasOwnProperty('toString');
->false

3.4 Map和Set

ES6的新特性
Map

let map = new Map([['Tom',100],['Jack',95],['Lucy',80]]);
let sorce = map.get('Tom');
console.log(sorce);
map.set('admin',123);//添加元素
map.delete('admin');//删除元素

Set无序不重复集合

let set = new Set([1,2,2,2,4,3,4]);//可实现去重
set.add(5);//添加元素
set.delete(1);//删除元素
console.log(set.has(4));//是否包含某个元素

4. 流程控制

4.1 条件判断

if语句

	if (score >= 90 && score <= 100){
	    alert("A");
	}else if (score >= 80 && score < 90){
	    alert("B");
	}else if (score >= 70 && score < 80){
	    alert("C");
	}else if (score >= 60 && score < 70){
	    alert("D");
	} else if (score >= 0 && score < 60){
	    alert("E");
	}else {
	    alert("输入成绩有误！")
	}

switch 语句

var d=new Date().getDay(); 
switch (d) 
{ 
  case 0:x="今天是星期日"; 
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
}

4.2 循环判断

for 循环

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

for in 遍历

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为索引号
{
    txt=txt + person[x];
}

let arr = [123,2142,12414,12341];
for (index in arr){
	console.log(arr[index]);
}

for of遍历

let arr = [123,2142,12414,12341];
for (x of arr){
	console.log(x);
}

let map = new Map([['Tom',100],['Jack',95],['Lucy',80]]);
for (x of map){
	console.log(x);
}

let set = new Set([1,2,2,2,4,3,4]);
for (x of set){
	console.log(x);
}

while语句

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

5. 函数

5.1 定义函数

定义方式一

绝对值函数

function abs(x){
	if (x > 0)
		return x;
	else
		return -x;
}

如果没有执行return，函数执行完也会返回结果undefined

定义方式二

var abs = function(x){
	if (x > 0)
		return x;
	else
		return -x;
}

函数也可以理解为变量

方式一和方式二等价

调用函数

abs(10); // 10

参数问题：JS可以传任意多个参数，也可以不传递参数

假设不存在参数，如何规避

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

arguments

传递多个参数时arguments

var abs = function(x){
	for (x in arguments)
		console.log(arguments[x]);
}

arguments代表传递进来的所有参数，是一个数组

ES6新特性：获取除已定义参数外的所有参数rest

var abs = function(a,b,...rest){
	console.log(rest);
}

5.2 变量作用域

局部变量

变量在函数内声明，变量为局部作用域
局部变量只能在函数内部访问
因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量
局部变量在函数开始执行时创建，函数执行完毕后局部变量自动销毁
想要在函数体外使用，可使用闭包

全局变量

变量在函数外定义，即为全局变量
全局变量有全局作用域，网页中所有脚本和函数均可使用
如果变量在函数内没有声明，该变量为全局变量

函数参数

函数参数只在函数内起作用，是局部变量

内部函数和外部函数变量重名

函数由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

JS执行引擎，自动提升了变量的声明，但是不会提升变量的赋值
代码规范：所有变量声明全部放在函数头部，有助于代码维护

HTML下的全局变量

在HTML中，全局变量是window对象

let x = "hello";
alet(x);
alet(window.x);
//两者等价

JS实际上只有一个全局变量 window，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的JS文件，使用了相同的全局变量，会产生冲突

//创建唯一全局变量
let Jay = {};
//定义全局变量
Jay.a = 10;
Jay.b = 100;
console.log(Jay.a + Jay.b);
Jay.add= function(x,y){
	return x + y;
}

把自己的代码全部放入自己定义的唯一空间名字中，减少全局命名冲突问题

局部作用域let

建议使用let去定义局部作用域的变量

function f(){
	for (var i = 0; i < 100; i++)
		console.log(i);//i出了这个作用域仍能使用
	console.log(i);
}

function f(){
	for (let i = 0; i < 100; i++)
		console.log(i);//i出了这个作用域仍能使用
	console.log(i);
}

常量const

在ES6之前，只有用全部大写字母命名的变量，就是常量，建议不要修改（但是能改变）
在ES6引入了const

5.3 方法

对象：属性和方法

let Jay = {
	//属性
	name: 'JayNier',
	birth: 2001,
	//方法
	age: function(){
		let now = new Date().getFullYear();
		return now - this.birth;
	}
};
//方法调用要加()
console.log(Jay.age())

代码拆分后

function getAge(){
	let now = new Date().getFullYear();
    return now - this.birth;
}
let Jay = {
    //属性
    name: 'JayNier',
    birth: 2001,
    //方法
    age: getAge//这里将函数看做变量使用
};
//方法调用要加()
console.log(Jay.age())
//不能直接调用getAge()，否则this指向window

apply：控制this的指向

function getAge(){
	let now = new Date().getFullYear();
    return now - this.birth;
}
let Jay = {
    //属性
    name: 'JayNier',
    birth: 2001,
    //方法
    age: getAge//这里将函数看做变量使用
};
//方法调用要加()
getAge.apply(Jay,[])//this指向了Jay对象，参数为空

6. 内部对象

6.1 Date

基本使用

let now = new Date();//Sun Sep 05 2021 22:54:33 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳  全世界统一 1970.1.1 0:00:00 至今的毫秒数
console.log(new Date(now.getTime()))//将时间戳转化为时间

转换

let now = new Date();
now.toLocaleString();//"2021/9/5 下午11:00:53"
now.toGMTString();//"Sun, 05 Sep 2021 15:00:53 GMT"

6.2 JSON

JSON与XML

早期，所有数据传输习惯使用XML文件！
JSON是由道格拉斯·克罗克福特构想和设计的一种轻量级资料交换格式。
JSON最开始被广泛的应用于WEB应用的开发。不过目前JSON使用在JavaScript、Java、Node.js应用的情况比较多，PHP、C#等开发的WEB应用主要还是使用XML。
JSON与XML最大的不同在于XML是一个完整的标记语言，而JSON不是。这使得XML在程序判读上需要比较多的功夫。主要的原因在于XML的设计理念与JSON不同。XML利用标记语言的特性提供了绝佳的延展性（如XPath），在数据存储，扩展及高级检索方面具备对JSON的优势，而JSON则由于比XML更加小巧，以及浏览器的内建快速解析支持，使得其更适用于网络数据传输领域。
JSON格式取代了XML给网络传输带来了很大的便利，但是却没有了XML的一目了然，尤其是JSON数据很长的时候，会让人陷入繁琐复杂的数据节点查找中。开发者可以通过在线JSON格式化工具，来更方便的对JSON数据进行节点查找和解析。

JSON字符串与JS对象的转换

格式：

对象和Map都用{}
数组和List都用[]
键值对都用key: value

//创建对象
let user = {
	name: 'Jay',
	age: 20,
	sex: 'boy'
}
//对象转换为json字符串 {"name":"Jay","age":20,"sex":"boy"}
let jsonUser = JSON.stringify(user);
//json字符串转换为对象
let obj = JSON.parse('{"name":"Jay","age":20,"sex":"boy"}');

6.3 Ajax

AJAX = Asynchronous JavaScript and XML
AJAX 是一种用于创建快速动态网页的技术
AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

7. 面向对象编程

7.1 面向对象原型继承

let Student ={
    name: 'XXX',
    age: NaN,
    run: function (x){
        console.log(this.name + '跑了' + x +'公里');
    }
}

let Jay = {
    name: 'JayNier',
    age: 20
}

//原型指向Student对象 === 继承
Jay.__proto__ = Student;
Jay.run(20);

//构造新对象，可理解为函数
function  Student(name) {
   this.name = name;
}
//给Student新增一个方法
Student.prototype.say = function (content){
    alert(this.name + " say: " + content);
}
let JayNier = new Student('JayNier');
JayNier.say('Hello!');

7.2 面向对象class继承

class关键字，是在ES6引入的

定义class

class Student {
	//构造器
    constructor(name){
        this.name = name;
    }
    hello() {
        alert('hello');
    }
}
let JayNier = new Student('JayNier');
JayNier.hello();

继承

class Student {
    constructor(name){
        this.name = name;
    }
    hello() {
        alert('hello！' + this.name);
    }
}
class Undergraduate extends Student{
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }

    gradePrint(){
        this.hello();
        alert('你考了' + this.grade + '分');
    }
}
let JayNier = new Undergraduate('JayNier', 90);
JayNier.gradePrint();

本质：查看原型对象

原型链

略

8. 操作BOM对象

浏览器介绍

BOM：浏览器对象模型
浏览器内核

window

window：浏览器窗口

navigator

navigator：封装了浏览器的信息
浏览器信息可被人为修改，不建议使用这些属性来判断和编写代码

screen

screen：屏幕信息

location

location：当前页面的URL信息

document

DOM(Document Object Model，文档对象模型)定义了访问和操作HTML文档的标准方法。他把HTML文档表现为带有元素、属性和文本的树结构（节点数）
cookie

history(不建议使用)

浏览器的历史记录

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

9. 操作DOM对象

HTML DOM 树

浏览器网页就是一个DOM树形结构

基本操作

更新节点
遍历节点
删除节点
添加节点

要操作一个DOM节点，就必须要先获得这个DOM节点

9.1 获得DOM节点

要把JS文件导入到<body>的最下面

'use strict';
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children;

这是原生代码，之后尽量使用JQuery

9.2 更新DOM节点

获取元素除根据id获取的，区域方式拿到的都是数组

文本操作

修改文本的值：p1.innerText = "123";
可以解析HTML文本标签：p1.innerHTML = '<strong> 456</strong>';

样式操作

p1.style.color = 'blue';
p1.style.fontSize = '50px';

9.3 删除节点

删除节点步骤：先定位到父节点，再通过父节点删除自己

<div id = "father">
    <h1>标题一</h1>
    <p id = "p1"> p1</p>
    <p class = "p2"> p2 </p>
</div>

let self  = document.getElementById('p1');
let father = p1.parentElement;
father.removeChild(p1)

注意：删除多个节点的时候，children是在时刻变化。

9.4 插入节点

我们获得某个节点后，使用innerHTML就可以增加一个元素，但会覆盖原先的内容信息

<p id = 'title'> Hello, world!</p>
<div id = "father">
    <h1>标题一</h1>
    <p id = "p1"> p1</p>
    <p class = "p2"> p2 </p>
</div>

改变节点位置，实现插入

'use strict';
let father = document.getElementById("father");
let title = document.getElementById("title")
father.appendChild(title);

新建普通节点，进行插入

let father = document.getElementById("father");
let x = document.createElement('p');//创建一个p标签
x.id = "new";
x.innerText = "I'm baby!";
father.appendChild(x);

新建标签节点，进行插入

let father = document.getElementById("father");
let myScript = document.createElement("script");
myScript.setAttribute("type","text/javascript");
father.appendChild(myScript);

插入样式

let myStyle = document.createElement('style');//创建样式标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = `body{//新建样式
    background-color: ;
}`;
document.getElementsByTagName('head')[0].appendChild(myStyle);//get的是数组

在前部插入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id = 'title'> Hello, world!</p>
<div id = "father">
    <h1>标题一</h1>
    <p id = "p1"> p1</p>
    <p class = "p2"> p2 </p>
</div>
<script src="js/action.js"></script>
</body>
</html>

let parentNode = document.getElementById('father');
let newNode = document.getElementById('title');
let referenceNode = document.getElementsByClassName('p2')[0];
let insertedNode = parentNode.insertBefore(newNode, referenceNode);

10. 表单操作

BootCDN

获取表单信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id = "form">
    <form action="" method="post">
        <p>
            <label>
                <span>用户名：</span>
                <input type="text" id = "username">
            </label>
        </p>
        <p>
            <label>
                <span>性别：</span>
                <input type = "radio" name = "sex" value="man"> 男
                <input type = "radio" name = "sex" value="woman"> 女
            </label>
        </p>
        <button id = "submit" onclick="getInformation()">提交</button>

    </form>
</div>
<script src="js/action.js"></script>
</body>
</html>

'use strict';
function getInformation(){
    let sex, username;
    //获取用户名
    username = document.getElementById("username").value;
    //获取sex的选中值
    for (let i = 0; i < document.getElementsByName("sex").length; i++)
        if (document.getElementsByName("sex")[i])
            sex = document.getElementsByName("sex")[i].value;
    alert(username);
    alert(sex);
}

表单加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.min.js"></script>
</head>
<body>
<div id = "form">
    <form action="#" method="post" onsubmit="return check()">
        <p>
            <label>
                <span>用户名：</span>
                <input type="text" id = "username" name="username">
            </label>
        </p>
        <p>
            <label>
                <span>密码：</span>
                <input type = "password" id = "password">
            </label>
        </p>
        <p>
            <label>
                <input type = "hidden" id = "password_MD5" name="password" hidden>
            </label>
        </p>
        <button type = "submit">提交</button>

    </form>
</div>
<script src="js/action.js"></script>
</body>
</html>

'use strict';
function check(){
    let username, password, password_MD5;

    username = document.getElementById("username").value;
    password_MD5 = document.getElementById("password_MD5");//不能直接进行赋值，若在此处赋值，那么password_MD5始终为空，无法重置
    password = document.getElementById("password").value;

    password_MD5.value = md5(password);
    if (username.toString() === "" || password.toString() === ""){//此处不能用password_MD5判断，加密后空也是有值的d41d8cd98f00b204e9800998ecf8427e    
        alert("请输入用户名和密码");
        return false;
    }
    return true;

}

11. jQuery

BootCDN
帮助文档
jQuery库中存在大量的JavaScript函数

公式：$(selector).action(函数体)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "lib/jquery-3.6.0.js"></script>
</head>
<body>
<p id = 'test'>点我</p>
<script>
    $('#test').click(function (){
        alert("hello, world!");
    })
</script>

</body>
</html>

selector与css的选择器写法一样

选择器

建议查看帮助文档

三种基本选择器

$('#id').click();
$('p').click();
$('.class').click();

事件

鼠标事件、键盘事件、其他事件

在DOM加载完成时运行的代码，可以这样写：

$(document).ready(function(){
  // 在这里写你的代码...
});

$(document).ready()的简写

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "lib/jquery-3.6.0.js"></script>
</head>
<style>
    #test{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
<body>
<h1>请在方框内移动鼠标</h1>
<p id = 'location'></p>
<div id = 'test'>

</div>

<script>
    //在DOM加载完成时运行的代码
    $(function (){
        $('#test').mousemove(function (e){
            $('#location').text("x：" + e.pageX + "  y：" + e.pageY);
        })
    })

</script>

</body>
</html>

操作DOM元素

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "lib/jquery-3.6.0.js"></script>
</head>
<body>
<div id = "father">
    <h1>标题一</h1>
    <p id = "p1"> p1</p>
    <p class = "p2"> p2 </p>
</div>
<script>
    $('p[id = p1]').text();//获得值
    $('p[id = p1]').text("修改值");//修改值
    $('p[id = p1]').html();//获得值
    $('p[id = p1]').html("修改值");//修改值
</script>

</body>
</html>

css操作

$('p[id = p1]').css({color:'red'});//键值对

显示与隐藏

$('p[id = p1]').show();
$('p[id = p1]').hide();

小技巧

如何巩固JS（看jQuery源码，看游戏源码）
如何巩固HTML、CSS（扒网站）

Ant Design
Element-UI
Layui

标签：name,Jay,JavaScript,笔记,alert,score,let,狂神,document
来源： https://blog.csdn.net/weixin_55759494/article/details/120541471