JavaScript
此笔记为本人学习遇见狂神说的JS讲解视频的个人学习笔记，侵删。
梗概
- 简单，应用量大，但支持不了
高并发 - 原生JS开发，按照
ECMAScript标准（ES），浏览器支持的版本与现实开发的版本不一致，可能需要webpack进行支持 - 微软的TypeScript是js的超集
- JS框架
- jQuery（这个是库）
- Angular（模块化）
- React（虚拟DOM）
- Vue（模块化 虚拟DOM）
- Axios（前端通信框架）
- UI框架
- Ant-Design
- ElementUI, iview, ice
- Bootstrap
- AmazeUI
- JS构建工具
- Bable
- WebPack
- 前端做后端
- Node.js
快速入门
引入js
直接写在HTML中
代码语言：javascript复制<!--html中，在script标签内写JS代码，放在末尾前即可（但好像也可以？）-->
<script>
alert('hello, world');
// ...
</script>外部引入
代码语言：javascript复制<!--
script要成对出现，不用显示定义type，默认是js, type="text/javascript"
但好像版本老的开发软件要。
-->
<script src="js/script.js"></script>基本语法入门
let是局部变量（在他所在的代码块可用），const是常量，var是全局变量（前两个是ES6的，因为前面两个更加严谨，var被抛弃（貌似））
不加声明似乎是全局变量(?)
变量命名
不能数字开头
$1 OK _oo 中文
判断语句
eslink检查，使它更严谨，如//  
let a = 10, b = 10;
if(){
}
else if()
{
}
//
/*
*/调试
在console中：
代码语言：javascript复制alter(score) // 弹窗
console.log(score) // 在控制台打印变量在source中：
可以打断点，进行调试。
数据类型
数值，文本，图形，音频，视频……
number
js不区分小数和整数。整数，浮点数，科学计数法，负数，NaN，Infinity
字符串
'abc' "abc" 'n'
布尔值
true, false
逻辑运算
&&, ||, !
比较运算符
=, ==（类型不一定，值一样，1=='1'，true）, ===（绝对等于，类型一样，值一样）
一般避免用==
- 注意，NaN === NaN，它与所有值都不相等，包括自己。
- 通过isNaN(NaN)函数判断
- 浮点数问题
- 精度丢失
- 1/3 === (1-2/3) False
- 尽量避免使用浮点数运算
- 可以用Math.abs((f1-f2) < eps)来判断相等（eps是自己定义的很小的数）
- null和undefined
- null 空
- undefined 未定义
数组
代码语言：javascript复制// 可以是不同类型的（Java要相同）
// 为了可读性，尽量用[]
let arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello');
console.msg(arr[0]);
// 越界是未定义对象
代码语言：javascript复制// 对象大括号，数组中括号
// 每个属性用,隔开，最后一个不需要
// Person person = new Person(1,2,3);
let person = {
name: "hhh",
age: 3,
tags: ['sd', 'xx'],
}
console.msg(person.name);严格检查模式
代码语言：javascript复制'use strict';
// 放在最上面, 防止js的随意性导致问题. 貌似是逐行解释数据类型
字符串
字符串, '' 或者 "" 包
转义字符
n t u#### (Unicode) x##(Ascii) (在字符串包裹内)多行字符串编写
代码语言：javascript复制let msg = `
hello
world
jz
`模板字符串
代码语言：javascript复制let msg = `hello, ${name}`
// 有点像python .format(?)字符串长度
代码语言：javascript复制str = "1231248"
str.lenght
str[0]字符串不可变
大小写转换
代码语言：javascript复制str.toUpperCase()
str.toLowerCase()
.indexOf('t') // 首次出现的下标
.substring(1,3) // 从上面下标开始[l,r)数组
可以同时包含任意数据类型，可以修改内容
长度
代码语言：javascript复制arr.length = 10
// 可变（直接赋值），后面会补上undefined
// 赋值小了，会丢失元素 .indexOf(x) - 找到第一个x的下标索引
'1'和1不同
slice() - 截取数组的一部分，返回一个新数组
push(... , ...) - 压入尾部, pop() - 弹出尾部
unshift() - 压入, shift() - 弹出头部
sort() - 排序
reverse() - 元素反转
arr.concat([1,2,3]) - 数组连接, 没有改变原宿主, 返回连接后的数组.
arr.join('-') - 连接符, 打印数组(用特殊字符连接)
多维数组
arr = [[],[],[]];
其他
代码语言：javascript复制arr.fill(1);
...对象
js的所有的键(Key)都是字符串, 值(Value)是任意对象 !
let 对象名 = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值 // 有些浏览器在最后一个属性加逗号报错!
}对象可以赋值
使用不存在的属性, 不报错, undefined
动态的增减属性
代码语言：javascript复制person.ununun = "sdfijiosafj"
delete person.name判断某个属性值是否在对象中
代码语言：javascript复制'age' in person
true
// 继承
'toString' in person
true.hasOwnProperty('')一个属性是否是这个对象自身拥有的
代码语言：javascript复制person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
falseMap和Set
代码语言：javascript复制let map = new Map([['tom',100],['Bob',90],['Roger',0]]);
map.get('tom'); // key -> value
map.set('xxx',123); // 加入
map.delete('tom');
let set = new Set([1,2,3,3,3,3]); // 可以去重
set.add(5);
set.delete(1);
set.has(3); // 是否存在流程控制
if, for, while 和 c 一样
forEach
代码语言：javascript复制arr.forEach(function (value) {
console.log(value)
})
// i为索引下标(但给它添加别的属性名后,会输出属性名)
// 怀疑数组是key为下标的map(?)
for(let i in age)
{
}
for(let x of age) // x为具体的值(未定义的值?)
{
}函数
没有执行return，执行完return NaN
代码语言：javascript复制// 函数声明
function fun(x){
return x;
}
// 函数表达式 匿名函数
let fun = function(x){
return x;
}
// fun(10, 123,124,12,3,12)
// 返回10
// 参数问题, js可以传任意个参数. 有用的只有前面的
// arguments是关键字, 代表进来的所有的参数, 数组.
// 可以用, 拿到"隐藏"的参数(?)
arguments.length === 1;
// 无参数, 手动抛出异常
if(typeof x !== 'number'){
throw 'not a Number';
}
// rest - 获取已经定义的参数之外的所有参数
// 只能写在最后,前面用 ... 标志
function fun(a, b, ...rest) {
console.log(res);
}作用域
var外部不能用内部类的东西, 内部可以调用外部的.
内部再次定义, `内在内,外在外.
js会自动提前变量的声明. 建议先定义再赋值
var a,b,c;
a = 3;
b = 'a';定义在最外面, 全局变量.
默认所有的全局变量, 自动绑定在window对象下, window.x - (调用)
alert() 其实也是 window.alert()
代码语言：javascript复制// 神奇的JS
var ole_alert = window.alert;
window.alert = function(){
return;
};
// 覆盖了
window.alert(123); // 就没有弹窗了!只有一个全局作用域, 任何变量(包括函数), 假设没有在函数作用范围找到,会去向外查找, 如果在全局作用域也没有找到, 报错Reference-Error
规范
减少冲突.
自己弄一个类, 绑定在这个唯一全局变量中, 而不去绑定在window这个全局变量中, 来降低全局命名冲突 和别人不冲突
jQuery的实现类似(?) - jQuery. or $()
for(var i) // 出了作用域还可以使用
因为, var只有函数作用域, let既有函数作用域, 也有块作用域. (?)
let 就避免的这个问题.
常量 const
约定俗成, 在ES6之前, 全部用大写, 建议不改.
方法
代码语言：javascript复制var kkk = {
name: 'hhh',
birth: 2000,
age: function() {
var now = new Data().getFullYear();
return now-this.birth;
}
fun: get_ff
}
// 方法, kkk.age();
// 拆开写fun:this是调用它的类, 所以, 在外面 .fun() 可以, get_ff() NaN, window没有这个
this是无法指向的, 是默认指向调用它的对象
apply
可以控制thist指向.
任何一个函数都有, fun.apply(kkk, []); // 类名, 参数
内部对象
代码语言：javascript复制标准对象
number
string
boolean
NaN - number
{}, [] - object
Math.abs - function
undefined - undefinedData
基本使用
代码语言：javascript复制let now = new Date();
now.getFullYear(); // Year
now.getMonth(); // month 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())转换
代码语言：javascript复制now.toLocaleString();
now.toGMTString();JSON
- 数据交换格式
- 有层次结构
- 提升网络传输效率
- JS的子集
在JS中, 一切皆为对象
格式:
- 对象{}
- 数组[]
- 键值对 key: value
JSON与JS对象的转化
代码语言：javascript复制var user = {
xxx: 'hhh'
};
var jsonUser = JSON.stringify(user); // 对象
var obj = JSON.parse('{"xxx":"hhh"}'); // string
// 因为, 单引号与双引号, 在里外层交替使用.Ajax
- 原生的js写法 - xhr 异步请求
- jQuery封装的方法, $("#name").ajax("") // 选择器
- axios 请求
面向对象编程
- 类： 模板
- 对象：具体的实例
原型指向
代码语言：javascript复制let Student = {
name: "Roger",
age: 5,
run: function () {
console.log(this.name " run...");
}
};
let zzz = {
name: "zzz"
};
// .__proto__ 原型指向, 有的属性名就覆盖属性值(?), 没有的, 加入
zzz.__proto__ = Student;Class继承
ES6引入的.
本质还是原型对象
// 增加方法, 给它的原型加方法
zzz.prototype.newFunction = function(){
alert('good');
};
// ----
// 定义一个学生的类
Class Student{
constructor(name){
this.name = name;
}
hello(){
alert('hello');
}
}
let xx = new Student('xx');
// 继承
class zStudent extends Student{
constructor(name, grade)
{
super(name); // 集成要实现父类的东西, 这个相当于直接拿(?)
this.grade = grade;
}
Who(){
alert('zStudent');
}
}原型链
指到原型对象之后, 原型对象和方法互相指向, 形成原型链
操作BOM对象
BOM: 浏览器对象模型
window
代码语言：javascript复制window.innerWidth // 里面显示的高度
window.innerWidth
window.outerHeight
window.outerWidthNavigator (不建议)
封装了浏览器信息
代码语言：javascript复制Navigator.appName
Navigator.appVersion
Navigator.userAgent
Navigator.platfrom因为它可以人为修改，所以不建议用其判断和编写代码
screen
屏幕尺寸
代码语言：javascript复制screen.width
screen.heightlocation (重要)
location代表当前网页的URL信息
代码语言：javascript复制host: "www.baidu.com"
href: "https://www.baidu.com"
protocal: "https:"
reload:f reload() // 刷新
// 设置新地址, 重定向
location.assign('https;//livinfly.top');document
document代表当前页面, HTML DOM文档树
代码语言：javascript复制document.title获取具体的文档树节点
代码语言：javascript复制document.getElementById('app');
document.getElementByTagName('h1');
document.getElementByClassName('p2');获取cookie
代码语言：javascript复制document.cookie劫持cookie
网页获得cookie让同一站点登录可能也有关.
服务器端可以设置cookie: httpOnly 安全.
history (不建议)
历史记录
代码语言：javascript复制history.back()
history.forward() // 前进DOM节点
核心
浏览器网页时一个Dom树形结构
- 更新: 更新Dom节点
- 遍历: 得到Dom节点
- 删除: 删除Dom节点
- 添加: 添加一个新的节点
获得Dom节点
除了id其他获得的是list, 用下标取
document.getElementById('app');
document.getElementByTagName('h1');
document.getElementByClassName('p2');
let father = document.getElementById('father');
let childrens = father.children; // 获得父节点的所有子节点
// father.firstChild;
// father.lastChild;原生代码, 之后尽量运用jQuery
更新Dom节点
代码语言：javascript复制// 驼峰命名, 属性值时字符串,用''包裹
id1.innerText='123' // 修改文本的值
id1.innerHTML='<strong>123</strong>'; // 可以解析HTML
id1.style.color = 'red';
id1.style.fontsize = '';
id1.style.padding = '';删除节点
先获得父节点和它, 再删除它
代码语言：javascript复制// father和p1都事先获取
father.removeChild(p1);
// 删除是动态的过程, 所以删除节点的时候, 注意, child在变化插入节点
创建标签, 设置标内容, 设置标签内内容, 标签插入
追加
代码语言：javascript复制// list和id1都是实现获取的节点, 若id1原本在, 貌似是会移动过去
list.appendChild(id1);创建一个新标签
代码语言：javascript复制var newP = document.creatElement('p');
newP.id = 'newP';
newP.innerText = 'xxx';
newP.setAttribute('type', 'text/javascript');insert
代码语言：javascript复制// .insertBefore
父节点.insertBefore(新节点, 目标节点);操作表单
表单是为了提交信息
- text - 文本
- select - 下拉
- radio - 单选
- checkbox - 多选
- hidden - 隐藏域
- password - 密码框
- ...
用上面的方法得到的Dom节点, 可以对input的文本, 直接得到和修改
- input - text 可以直接获得
- radio .value 获得单个的, 预设的value 用.checked 判断选择的状态, 来判断选了哪个, 也可以赋值
- onclick, onsubmit (表单) - 标签属性
用MD5(外部引用MD5工具包文件)加密, 密码防止被抓包利用
onsubmit = 'return fun()'; // false 就不传了
jQuery
入门
CDN引入(url) - 和引入js代码一样
公式:
代码语言：javascript复制$(selector).action(); // 选择器, 事件, (function)选择器
代码语言：javascript复制$('p').click(); // 标签
$('#id1').click(); // id
$('.class1').click(); // class工具站
事件
(document).ready(function()); 与 (function); 等价
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.6.1.js"></script>
<style>
#divMove {
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse : <span id="mouseMove"></span>
<div id="divMove">
Try it
</div>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:' e.pageX ' y: ' e.pageY);
})
})
</script>
</body>
</html>操作Dom
代码语言：javascript复制$('#hhh li[name=python]').text() // 获得
$('#hhh li[name=python]').text('xx') // 修改
$('#hhh').html(); // 获得
$('#hhh').html(''); // 修改
// css
$(selector).css({"color", "red"}, {...});
// 元素显示与隐藏 本质 display = none;
.show()
.hide()
.toggle(); // 切换
// Other
$(window).width()
// ajax():
$('').ajax() // ..小技巧
- 巩固JS(看jQuery源码, 游戏源码)
- 巩固HTML CSS(扒网站, 全down下来, 对应修改看效果)
Layui - 经典开源模块化前端 UI
Element - 网站快速成型工具
用 `` 来表示字符串，${para}可以表示引用变量
