JavaScript基础语法
JavaScript是什么？
JavaScript是一种脚本语言，它可以在网页中实现交互效果，比如点击按钮弹出对话框、表单验证、动态加载内容等。
JavaScript的组成
JavaScript由ECMAScript、DOM和BOM三部分组成。
ECMAScript是JavaScript的核心，它定义了JavaScript的基本语法和特性，比如变量、数据类型、运算符、函数等。
DOM（Document Object Model）是文档对象模型，它定义了如何通过JavaScript操作HTML文档，比如获取元素、修改元素内容、添加事件监听器等。
BOM（Browser Object Model）是浏览器对象模型，它定义了如何通过JavaScript操作浏览器窗口，比如获取窗口大小、打开新窗口、关闭窗口等。
JavaScript的引入
JavaScript可以通过内部标签和外部引入两种方式引入到HTML中。
示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>firsttitle>
<Script>
alert("hello world!");
Script>
<script src="helloworld.js">script>
head>
<body>
body>
html>
JavaScript的语法
JavaScript的语法和Java、C++等编程语言类似，包括变量、数据类型、运算符、条件语句、循环语句、函数等。
但JavaScript相较于Java来说，更加灵活，比如它没有严格的类型检查，可以动态地改变变量的类型。
示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>firsttitle>
<Script>
var num = 10;
while(num <= 10){
num += 1;
}
// 弹出一个小窗口显示num
alert(num);
Script>
head>
<body>
body>
html>
JavaScript的调试方法
在浏览器右键之后，选择检查，打开开发者工具，选择Console，就可以看到JavaScript的输出结果，在Source中可以查看JavaScript的代码，在Elements中可以查看HTML的元素，在Network中可以查看网络请求，在Application中可以查看浏览器的缓存，在Performance中可以查看性能分析，在Memory中可以查看内存分析，在Console中可以输入JavaScript代码进行调试。
JavaScript数据类型和变量
JavaScript的数据类型包括数字、字符串、布尔值、对象、数组、函数、null、undefined等。
JavaScript的变量使用var、let、const关键字声明，var声明的变量可以在函数内外使用，let声明的变量只能在函数内使用，const声明的变量只能在函数内使用，并且不能修改。
var用于声明一个变量，let用于声明一个块级作用域的变量，const用于声明一个常量。
数值类型
JavaScript不区分整数和浮点数
var num = 10;
var num2 = 10.5;
布尔类型
布尔类型只有两个值：true和false
var bool = true;
var bool2 = false;
字符串类型
字符串可以使用单引号或双引号括起来,字符串同Java一样是不可变的，一旦创建，就不能改变它的值。
var str = "hello world";
var str2 = 'hello world';
多行字符串
可以使用tab键上面的反引号``括起来
var str = `hello
world`;
字符串的常用属性与方法
var str = "hello world";
console.log(str.length); // 字符串的长度
console.log(str[0]); // 字符串的第一个字符
console.log(str.toUpperCase()); // 字符串转换为大写
console.log(str.toLowerCase()); // 字符串转换为小写
console.log(str.indexOf("world")); // 字符串中world的索引
console.log(str.substring(0, 5)); // 字符串从0到5的子串
console.log(str.split(" ")); // 字符串按照空格分割为数组
数组类型
数组类型是JavaScript中最常用的数据类型，它可以包含多个元素，每个元素可以是任意类型。
var arr = [1, 2, 3, 4, 5];
数组的常用属性与方法
var arr = [1, 2, 3, 4, 5];
console.log(arr.length); // 数组的长度,改变arr.length可以改变数组的长度
console.log(arr[0]); // 数组的第一个元素
console.log(arr.push(6)); // 数组添加一个元素
console.log(arr.pop()); // 数组删除一个元素
console.log(arr.shift()); // 数组删除第一个元素
console.log(arr.unshift(0)); // 数组添加一个元素到第一个位置
console.log(arr.shift()); // 数组删除第一个元素
console.log(arr.indexOf(3)); // 数组中3的索引
console.log(arr.slice(0, 3)); // 数组从0到3的子数组
console.log(arr.concat([6, 7, 8])); // 数组连接,返回一个新的数组,原数组不变
console.log(arr.join("-")); // 数组按照-连接成字符串,返回连接后的字符串
对象类型
对象类型是JavaScript中最复杂的数据类型，它可以包含多个属性和方法，其中的属性定义是键值对的形式，中间以逗号隔开
其中的键使用时都视为字符串，值可以是任意类型。
var obj = {
name: "Tom", // 属性
age: 18,
sayHello: function() { // 方法
console.log("Hello, my name is " + this.name);
}
};
删除和添加属性
delete obj.name; // 删除属性
obj.gender = "male"; // 添加属性
判断属性是否存在
console.log("name" in obj); // 判断属性是否存在
console.log("toString" in obj); // 判断属性是否存在
判断属性是否为对象自身的属性
console.log(obj.hasOwnProperty("name")); // 判断属性是否为对象自身的属性
console.log(obj.hasOwnProperty("toString")); // 判断属性是否为对象自身的属性
null和undefined
null和undefined都是JavaScript中的特殊值，它们表示空值和未定义
var n = null;
var u = undefined;
严格检查模式
在JavaScript中，可以使用严格检查模式来避免一些常见的错误，例如未声明的变量、this指向错误等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
<!--内部标签-->
<Script>
// 严格检查模式
"use strict";
// 使用let 来声明局部变量
let num = 10;
while(num <= 10){
num += 1;
}
// 弹出一个小窗口显示num
alert(num);
</Script>
</head>
<body>
</body>
</html>
流程控制
if语句
if (condition) {
// do something
} else if (anotherCondition) {
// do something else
} else {
// do something else
}
switch语句
switch (expression) {
case value1:
// do something
break;
case value2:
// do something else
break;
default:
// do something else
}
for循环
for (var i = 0; i < 10; i++) {
// do something
}
for-in循环
for (var key in object) {
// do something with object[key]
}
for-of循环
for (var value of array) {
// do something with value
}
foreach循环
array.forEach(function(index, value, array) {
// do something with value, index, array
});
## while循环
```javascript
while (condition) {
// do something
}
do-while循环
do {
// do something
} while (condition);
break和continue
for (var i = 0; i < 10; i++) {
if (i === 5) {
break; // 跳出循环
}
if (i === 3) {
continue; // 跳过本次循环
}
// do something
}
# Map和Set
## Map的常用方法
```javascript
var map = new Map();
// 添加键值对
map.set('key1', 'value1');
map.set('key2', 'value2');
// 获取值
var value1 = map.get('key1');
var value2 = map.get('key2');
// 判断是否存在某个键
var hasKey1 = map.has('key1');
var hasKey3 = map.has('key3');
// 删除键值对
map.delete('key1');
// 获取键值对数量
var size = map.size;
// 清空Map
map.clear();
Set的常用方法
var set = new Set();
// 添加元素
set.add('value1');
set.add('value2');
// 判断是否存在某个元素
var hasValue1 = set.has('value1');
var hasValue3 = set.has('value3');
// 删除元素
set.delete('value1');
// 获取元素数量
var size = set.size;
// 清空Set
set.clear();
函数
函数的两种定义方式
// 函数声明
function add(a, b) {
return a + b;
}
// 函数表达式
var add = function(a, b) {
return a + b;
};
函数的调用
function add(a, b) {
return a + b;
}
// 调用函数
var result = add(1, 2); // result的值为3
函数的参数
function add(a, b) {
return a + b;
}
// 调用函数时可以传递任意数量的参数
var result1 = add(1, 2); // result1的值为3
var result2 = add(1, 2, 3, 4, 5); // result2的值为3
arguments对象
arguments对象是一个类数组对象，包含了函数调用时传递的所有参数。可以在函数内部使用arguments对象来获取传递的参数。
function add() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
…rest参数
rest参数是ES6中新增的一种参数定义方式，它可以用来获取函数调用时传递的剩余参数。rest参数必须放在函数参数的最后一个位置。
function add(...args) {
var sum = 0;
for (var i = 0; i < args.length; i++) {
sum += args[i];
}
return sum;
}
// 调用函数时可以传递任意数量的参数
var result1 = add(1, 2); // result1的值为3
var result2 = add(1, 2, 3, 4, 5); // result2的值为15
方法
方法是指定义在对象上的函数。方法可以通过点符号来调用。
var person = {
name: "John",
age: 30,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
// 调用方法
person.sayHello(); // 输出 "Hello, my name is John"
apply和call方法
apply和call方法都是用来调用函数的，它们可以用来指定函数的this值和传递参数。
function greet(greeting, punctuation) {
console.log(greeting + ", " + this.name + punctuation);
}
var person = {
name: "John"
};
// 使用apply方法调用函数
greet.apply(person, ["Hello", "!"]); // 输出 "Hello, John!"
// 使用call方法调用函数
greet.call(person, "Hi", "?"); // 输出 "Hi, John?"
变量作用域
在JavaScript中，变量的作用域分为全局作用域和局部作用域。
全局作用域
全局作用域是指在代码中任何地方都可以访问到的变量。全局变量在代码的任何地方都可以使用，包括函数内部。
var globalVariable = "I am global";
function myFunction() {
console.log(globalVariable); // 输出 "I am global"
}
myFunction();
console.log(globalVariable); // 输出 "I am global"
局部作用域
局部作用域是指在函数内部定义的变量，只能在函数内部访问。局部变量在函数外部是无法访问的。
function myFunction() {
var localVariable = "I am local";
console.log(localVariable); // 输出 "I am local"
}
myFunction();
console.log(localVariable); // 报错：localVariable is not defined
let和const
ES6中新增了let和const关键字，用于定义块级作用域的变量。
let用于定义块级作用域的变量
{
let blockScopedVariable = "I am block scoped";
console.log(blockScopedVariable); // 输出 "I am block scoped"
}
console.log(blockScopedVariable); // 报错：blockScopedVariable is not defined
const用于定义常量
const constantVariable = "I am a constant";
console.log(constantVariable); // 输出 "I am a constant"
constantVariable = "I cannot be changed"; // 报错：Assignment to constant variable.
Date对象
JavaScript中的Date对象用于表示日期和时间。它提供了许多方法来获取和操作日期和时间。
创建Date对象
可以使用new关键字创建一个Date对象，也可以使用Date对象的构造函数来创建一个Date对象。
var now = new Date(); // 创建一个表示当前日期和时间的Date对象
var specificDate = new Date(2022, 0, 1); // 创建一个表示2022年1月1日的Date对象
获取日期和时间
可以使用Date对象的方法来获取日期和时间的各个部分，例如年、月、日、小时、分钟、秒等。
var now = new Date();
console.log(now.getFullYear()); // 输出当前年份
console.log(now.getMonth()); // 输出当前月份（0-11）
console.log(now.getDate()); // 输出当前日期
console.log(now.getHours()); // 输出当前小时
console.log(now.getMinutes()); // 输出当前分钟
console.log(now.getSeconds()); // 输出当前秒数
时间戳
时间戳是指自1970年1月1日00:00:00 UTC以来经过的毫秒数。可以使用Date对象的getTime()方法来获取时间戳。
var now = new Date();
var timestamp = now.getTime();
console.log(timestamp); // 输出时间戳
格式化日期
可以使用Date对象的toDateString()、toLocaleDateString()、toTimeString()、toLocaleTimeString()等方法来格式化日期和时间。
var now = new Date();
console.log(now.toDateString()); // 输出 "Sat Jan 01 2022"
console.log(now.toLocaleDateString()); // 输出 "1/1/2022"
console.log(now.toTimeString()); // 输出 "00:00:00 GMT+0800 (中国标准时间)"
console.log(now.toLocaleTimeString()); // 输出 "上午12:00:00"
console.log(now.toLocaleString()); // 输出 "1/1/2022 上午12:00:00"
JSON对象
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON对象是JavaScript中用于处理JSON数据的一种对象。
创建JSON对象
可以使用JSON.parse()方法将JSON字符串解析为JSON对象，或者使用JSON.stringify()方法将JSON对象转换为JSON字符串。
// 将JSON字符串解析为JSON对象
var jsonStr = '{"name":"John","age":30,"city":"New York"}';
var jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // 输出 "John"
console.log(jsonObj.age); // 输出 30
console.log(jsonObj.city); // 输出 "New York"
// 将JSON对象转换为JSON字符串
var jsonObj = {name: "John", age: 30, city: "New York"};
var jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // 输出 '{"name":"John","age":30,"city":"New York"}'
面向对象编程
JavaScript是一种基于原型的面向对象编程语言，在ES6之前 ,它没有类（class）的概念。在JavaScript中，对象是属性的集合，每个属性都有自己的值。可以通过构造函数来创建对象，也可以直接创建对象。
原型继承
在JavaScript中，每个对象都有一个原型对象，可以通过原型链来继承属性和方法。可以通过Object.create()方法来创建一个新对象，并指定其原型对象。
// 创建一个新对象，并指定其原型对象
var obj = Object.create({name: "John", age: 30});
console.log(obj.name); // 输出 "John"
console.log(obj.age); // 输出 30
// 创建一个构造函数
function Person(name, age) {
this.name = name;
this.age = age;
}
// 创建一个新对象，并指定其原型对象为Person的实例
var person = Object.create(Person.prototype);
person.name = "John";
person.age = 30;
console.log(person.name); // 输出 "John"
console.log(person.age); // 输出 30
class继承
在ES6中，JavaScript引入了class关键字，可以用来定义类。类是一种特殊的函数，可以用来创建对象。类可以通过extends关键字来继承另一个类。
// 定义一个父类
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
// 定义一个子类，继承自Person类
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old. I am in grade ${this.grade}.`);
}
}
// 创建一个Student对象
var student = new Student("Alice", 15, 10);
student.sayHello(); // 输出 "Hello, my name is Alice and I am 15 years old. I am in grade 10."
在上面的代码中，我们定义了一个父类Person和一个子类Student。子类Student通过extends关键字继承了父类Person，并添加了一个新的属性grade和一个新的方法sayHello。子类Student的构造函数中调用了super关键字，以调用父类的构造函数。
使用class关键字定义类和继承，可以使代码更加清晰和易于理解。
操作BOM对象
window对象
window对象是BOM的核心对象，表示浏览器窗口。window对象提供了许多方法和属性，可以用来操作浏览器窗口。
// 获取窗口的宽度和高度
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// 打开一个新的浏览器窗口
window.open("https://www.example.com");
// 关闭当前窗口
window.close();
// 加载一个新的URL
window.location.href = "https://www.example.com";
// 获取当前URL
var url = window.location.href; // 输出 "https://www.example.com"‘
navigator对象
navigator对象包含了浏览器的信息，可以用来判断浏览器的类型和版本。
// 获取浏览器的名称和版本号
var browserName = navigator.appName;
var browserVersion = navigator.appVersion;
// 判断浏览器是否为Chrome
if (navigator.userAgent.indexOf("Chrome") != -1) {
console.log("This is Chrome.");
} else {
console.log("This is not Chrome.");
}
location对象
location对象包含了当前URL的信息，可以用来获取和设置URL。
// 获取当前URL
var url = location.href;
// 设置新的URL
location.href = "https://www.example.com";
location.reload(); // 刷新当前页面
location.assign("https://www.example.com"); // 加载新的URL
location.replace("https://www.example.com"); // 加载新的URL并替换当前URL
history对象
history对象包含了浏览器的历史记录，可以用来前进和后退。
// 后退一页
history.back();
// 前进一页
history.forward();
screen对象
screen对象包含了屏幕的信息，可以用来获取屏幕的宽度和高度。
// 获取屏幕的宽度和高度
var width = screen.width;
var height = screen.height;
document对象
document对象包含了网页的所有内容，可以用来获取和操作网页的元素。
// 获取网页的标题
var title = document.title;
// 设置网页的标题
document.title = "New Title";
// 获取网页的cookie
document.cookie
// 获取网页的HTML内容
var htmlContent = document.documentElement.innerHTML;
// 获取网页的body内容
var bodyContent = document.body.innerHTML;
操作DOM对象
什么是DOM?
DOM（Document Object Model）是JavaScript用来操作HTML和XML文档的API。通过DOM，JavaScript可以访问和修改网页的元素，例如添加、删除、修改元素的内容和属性。
如何获取DOM元素?
可以通过以下几种方式获取DOM元素：
- 通过id获取元素：
document.getElementById("elementId") - 通过class获取元素：
document.getElementsByClassName("elementClass") - 通过标签名获取元素：
document.getElementsByTagName("tagName") - 通过选择器获取元素：
document.querySelector("selector")或document.querySelectorAll("selector")
获取DOM元素
// 通过id获取元素
var element = document.getElementById("myElement");
// 通过class获取元素
var elements = document.getElementsByClassName("myClass");
// 通过标签名获取元素
var elements = document.getElementsByTagName("div");
// 通过选择器获取元素
var element = document.querySelector("#myElement");
// 通过选择器获取元素列表
var elements = document.querySelectorAll(".myClass");
// 获取子元素
var childElement = element.children[0];
// 获取父元素
var parentElement = element.parentElement;
修改DOM元素
// 修改元素的文本内容
element.textContent = "New text content";
// 修改元素的HTML内容
element.innerHTML = "New HTML content";
// 修改元素的属性
element.setAttribute("src", "newSrc.jpg");
// 修改元素的样式
element.style.color = "red";
element.style.fontSize = "20px";
删除DOM元素
// 删除子元素
parentElement.removeChild(childElement);
// 删除自身
element.remove();
插入DOM元素
// 创建新元素
var newElement = document.createElement("div");
// 设置新元素的属性
newElement.setAttribute("id", "newElement");
// 设置新元素的文本内容
newElement.textContent = "New element";
// 插入新元素到父元素中
parentElement.appendChild(newElement);
// 插入新元素到指定位置
parentElement.insertBefore(newElement, referenceElement);
获取和设置表单元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span>
<input type="password" id="password" name="password">
</p>
<p>
<button type="submit">提交</button>
</p>
</form>
<script>
// 获取表单值
var username = document.getElementById('username');
var password = document.getElementById('password');
// 设置表单值
username.value = "123";
password.value = "123456";
</script>
</body>
</html>
表单密码的md5加密
上面一种方法，密码是明文传输，不安全，所以需要加密，这里使用md5加密
我们在这里使用 CryptoJS 库来实现 MD5 加密，使用按钮绑定事件，点击按钮时获取密码并加密后提交
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first</title>
<!-- 引入 CryptoJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username">
</p>
<p>
<!--此处用于获取用户输入的密码-->
<span>密码：</span>
<input type="password" id="input-password" >
</p>
<!--此处的隐藏域才是表单真正提交的密码-->
<input type="hidden" id="password" name="password">
<p>
<button type="submit" onclick="f()">提交</button>
</p>
</form>
<script>
// 获取表单值
var username = document.getElementById('username');
var password = document.getElementById('password');
var inputPassword = document.getElementById('input-password');
function f(){
// 使用md5加密提交的密码
password.value = CryptoJS.MD5(inputPassword.value).toString();
}
</script>
</body>
</html>
JQuery
jQuery 是一个 JavaScript 库，简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。
它封装了 JavaScript 库的很多功能，使得我们能用更少的代码，实现更多的功能。
jQuery 语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：$(selector).action()
jQuery的方法可以在网站直接查询：
https://www.w3school.com.cn/jquery/index.asp
jQuery 选择器
和css选择器一样，jQuery 选择器用于选择和查找 HTML 元素, 基于元素的 id、类、类型、属性、属性值等进行查找和过滤。
jQuery 事件
jQuery 是为处理 HTML 事件而设计的。
jQuery 事件方法通常作为事件处理程序：向元素添加事件处理程序。
示例
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
script>
<script>
/*这里是为了防止文档完全加载之前运行了jQuery的代码*/
$(document).ready(function(){
$("button").click(function(){
// 选择p标签，然后隐藏
$("p").hide();
});
// 通过选择器获取p1，然后设置p1内text的内容
$(".p1").text("设置p1的内容");
// 通过选择器获取div, 然后往其中插入html格式的图片
$("#box").html("![](\"../resources/images/vertin.jpg\" "\\"维尔汀图片\\"")
")
});
script>
head>
<body>
<p class="p1">p>
<div id="box">
div>
<h2>这是一个标题h2>
<p>这是一个段落。p>
<p>这是另一个段落。p>
<button>隐藏文本button>
body>
html>
笔记总结于视频：https://www.bilibili.com/video/BV1JJ41177di?spm_id_from=333.788.videopod.episodes&vd_source=16bf0c507e4a78c3ca31a05dff1bee4e