JavaScript

此笔记为本人学习遇见狂神说的JS讲解视频的个人学习笔记，侵删。

梗概

简单，应用量大，但支持不了高并发
原生JS开发，按照ECMAScript标准（ES），浏览器支持的版本与现实开发的版本不一致，可能需要webpack进行支持
微软的TypeScript是js的超集
JS框架
1. jQuery（这个是库）
2. Angular（模块化）
3. React（虚拟DOM）
4. Vue（模块化+虚拟DOM）
5. Axios（前端通信框架）
UI框架
1. Ant-Design
2. ElementUI, iview, ice
3. Bootstrap
4. AmazeUI
JS构建工具
1. Bable
2. WebPack
前端做后端
- Node.js

快速入门

引入js

直接写在HTML中

<!--html中，在script标签内写JS代码，放在末尾前即可（但好像也可以？）-->
    <script>
        alert('hello, world');
        // ...
    </script>

外部引入

<!--
script要成对出现，不用显示定义type，默认是js, type="text/javascript"
但好像版本老的开发软件要。
-->
<script src="js/script.js"></script>

基本语法入门

let是局部变量（在他所在的代码块可用），const是常量，var是全局变量（前两个是ES6的，因为前面两个更加严谨，var被抛弃（貌似））

不加声明似乎是全局变量(?)

变量命名

不能数字开头

$1 OK _oo 中文

判断语句

eslink检查，使它更严谨，如// + &nbsp

let a = 10, b = 10;
if(){
    
}
else if()
{
    
}
//
/*
*/

调试

在console中：

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 未定义

数组

// 可以是不同类型的（Java要相同）
// 为了可读性，尽量用[]
let arr = [1,2,3,'hello',null,true];
new Array(1,2,3,'hello');

console.msg(arr[0]);
// 越界是未定义

对象

// 对象大括号，数组中括号
// 每个属性用,隔开，最后一个不需要
// Person person = new Person(1,2,3);
let person = {
    name: "hhh",
    age: 3,
    tags: ['sd', 'xx'],
}
console.msg(person.name);

严格检查模式

'use strict';
// 放在最上面, 防止js的随意性导致问题.  貌似是逐行解释

数据类型

字符串

字符串, '' 或者 "" 包

转义字符\

\n \t \u#### (Unicode)  \x##(Ascii) (在字符串包裹内)

多行字符串编写
```
let msg = `
hello
world
jz
`
```

模板字符串

let msg = `hello, ${name}`
// 有点像python .format(?)

字符串长度
```
str = "1231248"
str.lenght
str[0]
```
字符串不可变

大小写转换

str.toUpperCase()
str.toLowerCase()
.indexOf('t') // 首次出现的下标
.substring(1,3) // 从上面下标开始[l,r)

数组

可以同时包含任意数据类型，可以修改内容

长度

arr.length = 10
// 可变（直接赋值），后面会补上undefined
// 赋值小了，会丢失元素

.indexOf(x) - 找到第一个x的下标索引
'1'和1不同
slice() - 截取数组的一部分，返回一个新数组
push(... , ...) - 压入尾部, pop() - 弹出尾部
unshift() - 压入, shift() - 弹出头部
sort() - 排序
reverse() - 元素反转
arr.concat([1,2,3]) - 数组连接, 没有改变原宿主, 返回连接后的数组.
arr.join('-') - 连接符, 打印数组(用特殊字符连接)
多维数组
arr = [[],[],[]];
其他
```
arr.fill(1);
...
```

对象

js的所有的键(Key)都是字符串, 值(Value)是任意对象 !

let 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值  // 有些浏览器在最后一个属性加逗号报错!
}

对象可以赋值
使用不存在的属性, 不报错, undefined

动态的增减属性

person.ununun = "sdfijiosafj"
delete person.name

判断某个属性值是否在对象中

'age' in person
true
// 继承
'toString' in person
true

.hasOwnProperty('')一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

Map和Set

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

arr.forEach(function (value) {
  console.log(value) 
})
// i为索引下标(但给它添加别的属性名后,会输出属性名)
// 怀疑数组是key为下标的map(?)
for(let i in age)
{
    
}
for(let x of age) // x为具体的值(未定义的值?)
{
    
}

函数

没有执行return，执行完return NaN

// 函数声明
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()

// 神奇的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之前, 全部用大写, 建议不改.

方法

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, []); // 类名, 参数

内部对象

标准对象

number
string
boolean
NaN - number
{}, [] - object
Math.abs - function
undefined - undefined

Data

基本使用

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())

转换

now.toLocaleString();
now.toGMTString();

JSON

数据交换格式
有层次结构
提升网络传输效率
JS的子集

在JS中, 一切皆为对象

格式:

对象{}
数组[]
键值对 key: value

JSON与JS对象的转化

var user = {
    xxx: 'hhh'
};
var jsonUser = JSON.stringify(user); // 对象
var obj = JSON.parse('{"xxx":"hhh"}'); // string
// 因为, 单引号与双引号, 在里外层交替使用.

Ajax

原生的js写法 - xhr 异步请求
jQuery封装的方法, $("#name").ajax("") // 选择器
axios 请求

面向对象编程

类：模板
对象：具体的实例

原型指向

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

window.innerWidth // 里面显示的高度
window.innerWidth
window.outerHeight
window.outerWidth

Navigator (不建议)

封装了浏览器信息

Navigator.appName
Navigator.appVersion
Navigator.userAgent
Navigator.platfrom

因为它可以人为修改，所以不建议用其判断和编写代码

screen

屏幕尺寸

screen.width
screen.height

location (重要)

location代表当前网页的URL信息

host: "www.baidu.com"
href: "https://www.baidu.com"
protocal: "https:"
reload:f reload() // 刷新
// 设置新地址, 重定向
location.assign('https;//livinfly.top');

document

document代表当前页面, HTML DOM文档树

document.title

获取具体的文档树节点

document.getElementById('app');
document.getElementByTagName('h1');
document.getElementByClassName('p2');

获取cookie

document.cookie

劫持cookie

网页获得cookie让同一站点登录可能也有关.

服务器端可以设置cookie: httpOnly 安全.

history (不建议)

历史记录

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节点

// 驼峰命名, 属性值时字符串,用''包裹
id1.innerText='123' // 修改文本的值
id1.innerHTML='<strong>123</strong>'; // 可以解析HTML
id1.style.color = 'red';
id1.style.fontsize = '';
id1.style.padding = '';

删除节点

先获得父节点和它, 再删除它

// father和p1都事先获取
father.removeChild(p1);
// 删除是动态的过程, 所以删除节点的时候, 注意, child在变化

插入节点

创建标签, 设置标内容, 设置标签内内容, 标签插入

追加

// list和id1都是实现获取的节点, 若id1原本在, 貌似是会移动过去
list.appendChild(id1);

创建一个新标签

var newP = document.creatElement('p');
newP.id = 'newP';
newP.innerText = 'xxx';
newP.setAttribute('type', 'text/javascript');

insert

// .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代码一样

公式:

$(selector).action(); // 选择器, 事件, (function)

选择器

$('p').click(); // 标签
$('#id1').click(); // id
$('.class1').click(); // class

工具站

事件

$(document).ready(function()); 与 $(function); 等价

<!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

$('#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}可以表示引用变量

JavaScript

梗概

快速入门

引入js

基本语法入门

变量命名

判断语句

调试

数据类型

严格检查模式

数据类型

字符串

数组

对象

Map和Set

流程控制

函数

作用域

规范

减少冲突.

常量 const

方法

apply

内部对象

Data

JSON

Ajax

面向对象编程

原型指向

Class继承

原型链

操作BOM对象

window

Navigator (不建议)

screen

location (重要)

document

获取具体的文档树节点

获取cookie

劫持cookie

history (不建议)

DOM节点

核心

获得Dom节点

更新Dom节点

删除节点

插入节点

追加

创建一个新标签

insert

操作表单

jQuery

入门

选择器

事件

操作Dom

小技巧

【算法竞赛】水CF构造题

【学习笔记】CSS3

Tarn

Comments | NOTHING

你想搜索什么...