ToB企服应用市场:ToB评测及商务社交产业平台

标题: JavaScript [打印本页]

作者: 慢吞云雾缓吐愁 时间: 2022-8-9 14:42
标题: JavaScript

JavaScript：
学习视频-狂神说JavaScript：视频链接

JavaScript

1、什么是JavaScript

1.1、概述

JavaScript是一门世界上最流行的脚本语言
Java，JavaScript 10天
一个合格的后端人员，必须精通JavaScript

1.2、历史

JavaScript的起源故事
ECMAScript它可以理解为JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上！
开发环境---线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

1、内部标签

复制代码

测试代码

Title

复制代码

2.2、基本语法入门

[/code]浏览器必备调试须知：
[img]https://img2022.cnblogs.com/blog/2779887/202206/2779887-20220624003840373-1970616809.png[/img]
[size=4]2.3、数据类型[/size]
数值，文本，图形，音频，视频
[b]变量[/b]
[code]var a_$w

复制代码

number
js不区分小树和整数，number

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

复制代码

字符串
‘abc’ “abc”
布尔值
true，false
逻辑运算

&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真

复制代码

比较运算符 ！！！重要！

=
1,"1"
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）

复制代码

这是一个JS的缺陷，坚持不要使用 == 比较
须知：

NaN === NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN) 来判断这个数是否是NaN

浮点数问题

console.log((1/3) === (1-2/3))

复制代码

尽量避免使用浮点数进行运算，存在精度问题！

Math.abs(1/3-(1-2/3))<0.00000001

复制代码

2.4、严格检查格式use strict

Title

复制代码

3、数据类型

3.1、字符串

1、正常字符串我们使用单引号('a')，或者双引号("a")包裹

2、注意转义字符 \

\' '\n 换行\t tab\u4e2d
\u#### Unicode字符\x41
Ascall字符

复制代码

3、多行字符串编写

'use strict';//tab 上面 esc键下面let msg =
`hello
world
你好呀
糖果`

复制代码

4、模板字符串

person.name
> "TangGuo"
person.age
> 3

复制代码

5、字符串长度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

复制代码

6、字符串不可变

7、大小写转换

\' '
\n 换行
\t tab
\u4e2d \u#### Unicode字符
\x41 Ascall字符

复制代码

8、获取字符下标

'use strict';
//tab 上面 esc键下面
let msg =
`hello
world
你好呀
糖果`

复制代码

9、substring，截取字符串从0开始

'use strict';
//tab 上面 esc键下面
let name = "糖果";
let age = 3;
let msg =`你好呀，${name},${age}`
console.log(msg);

复制代码

3.2、数组

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

'use strict';
let str = 'abc';
console.log(str.length);

复制代码

1、长度

//注意，这里是方法，不是属性了
student.toUpperCase();//大写
student.toLowerCase();//小写

复制代码

注意：假如给//注意，这里是方法，不是属性了
student.toUpperCase();//大写
student.toLowerCase();//小写赋值，数组大小就会发生变化~，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引

student.indexof('t');

复制代码

字符串的"1"和数字 1 是不同的
3、slice（）

截取Array的一部分，返回的一个新数组，类似于String中substring
4、push()，pop()尾部

//前闭后开
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)

复制代码

5、unshift(),shift() 头部

var arr = [1,2,3,4,5,6];//通过下标取值和赋值
arr[0];
arr[0] = 1;

复制代码

6、排序sort()

arr.length

复制代码

7、元素反转reverse()

arr.indexOf(2)
1

复制代码

8、concat()

push：压入到尾部
pop：弹出尾部的一个元素

复制代码

注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join

打印拼接数组，使用特定的字符串连接

unshift：压入到头部
shift：弹出头部的一个元素

复制代码

10、多维数组

arr = ["B","C","A"]
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']

复制代码

数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3、对象

若干个键值对

(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']

复制代码

Js中对象，{…}表示一个对象，键值对描述属性xxx：xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值

arr = ["C","B","A"]
(3) ['C', 'B', 'A']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']

复制代码

2、使用一个不存在的对象属性，不会报错！

(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'

复制代码

3、动态的删减属性，通过delete删除对象的属性

arr = [[1,2],[3,4],["5","6"]];
arr[1][1]
4

复制代码

4、动态的添加，直接给新的属性添加值即可

var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性
var person = {
name: "TangGuo",
age: 3,
email: "123456798@QQ.com",
score: 66
}

复制代码

5、判断属性值是否在这个对象中！xxx in xxx！

person.name = "TangGuo"
"TangGuo"
person.name
"TangGuo"

复制代码

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.haha
undefined

复制代码

3.4、流程控制

if判断

var age = 3;if (age>3){ //第一个判断
alert("haha");}else if(age=0){
return x;
}else{
return -x;
}}

复制代码

</ul>arguments

arguments是一个JS免费赠送的关键字；
代表，传递进来的所有参数，是一个数组！

var abs = function(x){
console.log("x=>"+x);
for(var i=0;i=0){
return x;
}else{
return -x;
}}

复制代码

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数~
rest

以前：

if (arguments.length>2){
for (let i = 2; i < arguments.length; i++) {
//...
}}

复制代码

ES6引入的新特性，获取除了已经定义的参数之外的所有参数~…

function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);}

复制代码

rest参数只能写在最后面，必须用…标识。
4.2、变量的作用域

变量的作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体重声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）

'use strict';function tg() {
let x = 1;
x = x + 1;}x = x + 2; //Uncaught ReferenceError: x is not defined

复制代码

如果两个函数使用了相同的变量名，只要在函数内部就不冲突

'use strict';function tg1() {
let x = 1;
x = x + 1;}function tg2() {
let x = 1;
x = x + 1;}

复制代码

内部函数可以访问外部函数的成员，反之则不行

'use strict';function tg() {
let x = 1;
//内部函数可以访问外部函数的成员，反之则不行
function tg2() {
let y = x + 1;
}
var z = y + 1; //VM184:1 Uncaught ReferenceError: y is not defined}

复制代码

假设，内部函数变量和外部函数变量，重名！

'use strict';function tg() {
let x = 1;
//内部函数可以访问外部函数的成员，反之则不行
function tg2() {
let x = 'A';
console.log('inner'+x); //innerA
}
console.log('outer'+x); //outer1
tg2()}tg()

复制代码

假设在JavaScript中，函数查找变量从自身函数开始~，由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量的作用域

如果使用let，变量的作用域不会提升。

function tg() {
var x = 'x'+y;
console.log(x);
var y = 'y';}

复制代码

结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；

function tg2() {
var y;
var x = 'x'+y;
console.log(x);
y = 'y';}

复制代码

这个是在javascript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function tg2() {
var x = 1,
y = x + 1,
z,i,a; //undefined
//之后随意用}

复制代码

全局变量

'use strict';//全局变量var x = 1;function f() {
console.log(x)}f();console.log(x);

复制代码

全局对象 window

let map = new Map([['tom',100],['jack',90],['haha',80]])
for (let x of map) {
console.log(x)
}

复制代码

alert() 这个函数本身也是一个window的变量；

var x = 'xxx';window.alert(x);var old_alert = window.alert;old_alert(111);window.alert = function () {
}//发现 alert() 失效了window.alert(222);//恢复window.alert = old_alert;window.alert(333);

复制代码

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

由于我们的所有变量都会绑定到window上。如果不同的js文件，使用了相同的全局变量，就会产生冲突→如何减少这样的冲突？
唯一全局变量

//唯一一个全局变量var tangGuo = {};//定义全局变量tangGuo.name = 'tangGuo';tangGuo.add = function (a, b) {
return a+b;}

复制代码

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突问题~
jQuery中就是使用的该方法：jQuery.name，简便写法：$()
局部作用域 let

function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //问题？i 出了这个作用域还可以使用}

复制代码

let

ES6的let关键字，解决了局部作用域冲突的问题！

function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //Uncaught ReferenceError: i is not defined}

复制代码

建议大家都用let去定义局部作用域的变量；
常量 const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。

var abs = function(x){
//手动抛出异常来判断参数是否存在
if(typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}

复制代码

const

在ES6引入了常量关键字 const

var abs = function(x){
console.log("x=>"+x);
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}

复制代码

4.3、方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

'use strict';var tangguo = {
name: '糖果',
birth: 1997,
// 方法
age: function () {
// 今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;
}}//属性tangguo.name//方法，一定要带 ()tangguo.age()

复制代码

this.代表什么？拆开上main的代码看看~

'use strict';function getAge() {
// 今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;}var tangguo = {
name: '糖果',
birth: 1997,
age: getAge}// tangguo.age() ok// getAge() NaN window

复制代码

this是无法指向的，是默认指向调用它的那个对象的；
apply

在js中可以控制this指向

'use strict';function getAge() {
// 今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;}var tangguo = {
name: '糖果',
birth: 1997,
age: getAge};// tangguo.age() okgetAge.apply(tangguo,[]); // this，指向了tangguo，参数为空

复制代码

5、内部对象

标准对象

'use strict';
function tg1() {
let x = 1;
x = x + 1;
}
function tg2() {
let x = 1;
x = x + 1;
}

复制代码

5.1、Date

基本使用

'use strict';
function tg() {
let x = 1;
//内部函数可以访问外部函数的成员，反之则不行
function tg2() {
let y = x + 1;
}
var z = y + 1; //VM184:1 Uncaught ReferenceError: y is not defined
}

复制代码

转换

'use strict';
function tg() {
let x = 1;
//内部函数可以访问外部函数的成员，反之则不行
function tg2() {
let x = 'A';
console.log('inner'+x); //innerA
}
console.log('outer'+x); //outer1
tg2()
}
tg()

复制代码

5.2、JSON

JSON是什么

早期，所有数据传输习惯使用XML文件！

JSON是一种轻量级的数据交换格式
简洁和清晰的层次结构使得JSON成为理想的数据交换语言
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javascript中，一切皆为对象，任何js支持的类型都可以用JSON来表示；number、string...
格式：

对象都用{}
数组都用[]
所有的键值对都是用key:value

JSON字符串和js对象转化

var user = {
name:"tangguo",
age:3,
sex:'女'}//对象转化为json字符串{"name":"tangguo","age":3,"sex":"男"}var jsonUser = JSON.stringify(user);//json 字符串转化为对象，参数为json字符串var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

复制代码

很多人搞不清楚，JSON和JS对象的区别

function tg2() {
var y;
var x = 'x'+y;
console.log(x);
y = 'y';
}

复制代码

5.3、Ajax

原生的js写法 xhr异步请求
jQuery封装好的方法$("#name").ajax("")
axios请求

6、面向对象编程

原型对象

javascript、java、c#。。。面向对象；但是javascript有些区别！

类：模板原型对象
对象：具体实例

在javascript中，需要大家转换一下思维方式！
原型：

var Student = {
name:"tangguo",
age:3,
sex:'女',
run: function () {
console.log(this.name + "run...");
}};var xiaoming = {
name: 'xiaoming'};//原型对象xiaoming.__proto__ = Student;var Bird = {
fly: function () {
console.log(this.name + "fly...");
}};//原型对象xiaoming.__proto__ = Bird;

复制代码

function Student(name){
this.name = name;}//给student新增一个方法Student.prototype.hello = function () {
alert('Hello')};

复制代码

class继承

class关键字，是在ES6引入的
1、定义一个类、属性、方法

//ES6 之后//定义一个学生的类class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('Hello')
}}var xiaoming = new Student('xiaoming');var xiaohong = new Student('xiaohong');xiaoming.hello()

复制代码

2、继承

//ES6 之后//定义一个学生的类class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('Hello')
}}class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生')
}}var xiaoming = new Student('xiaoming');var xiaohong = new XiaoStudent('xiaohong',1);

复制代码

本质：查看对象原型

原型链

__ proto __:

7、操作BOM对象（重点）

浏览器介绍

JavaScript和浏览器的关系？

JavaScript诞生就是为了能够在浏览器中运行！

BOM：浏览器对象模型

IE6~11
Chrome 谷歌
Safari 苹果
FireFox 火狐
Opera

三方

QQ浏览器
360浏览器

window

window代表浏览器窗口

//唯一一个全局变量
var tangGuo = {};
//定义全局变量
tangGuo.name = 'tangGuo';
tangGuo.add = function (a, b) {
return a+b;
}

复制代码

Navigator（不建议使用）

Navigator，封装了浏览器的信息

function aaa() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //问题？i 出了这个作用域还可以使用
}

复制代码

大多数时候，我们不会使用navigator对象，因为会被人为修改!
不建议使用这些属性来判断和编写代码
screen

代表屏幕尺寸

function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1); //Uncaught ReferenceError: i is not defined
}

复制代码

location（重要）

location代表当前页面的URL信息

var PI = '3.14';
console.log(PI);
PI = '213'; //可以改变这个值
console.log(PI);

复制代码

document（内容；DOM）

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

const PI = '3.14'; //只读变量
console.log(PI);
//PI = '123'; // TypeError: Assignment to constant variable.
console.log(PI);

复制代码

获取具体的文档树节点

Java
JavaSE
JavaEE

复制代码

获取cookie

'use strict';
function getAge() {
// 今年 - 出生的年
let now = new Date().getFullYear();
return now - this.birth;
}
var tangguo = {
name: '糖果',
birth: 1997,
age: getAge
}
// tangguo.age() ok
// getAge() NaN window

复制代码

劫持cookie原理

[/code]服务器端可以设置cookie为[b]httpOnly[/b]
[size=4]history（不建议使用）[/size]
history代表浏览器的历史记录
[code]typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

复制代码

8、操作DOM对象（重点）

DOM：文档对象模型
核心

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

更新：更新Dom节点
遍历Dom节点：得到Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

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

let now = new Date(); //Tue Jun 21 2022 13:43:54 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(1655790801571)) //时间戳转为时间

复制代码

这是原生代码，之后我们尽量都使用jQuery();
更新节点

[/code]操作文本
[list]
[*]id1.innerText='value'修改文本的值
[*]id1.innerHTML='[b]value[/b]'可以解析超文本标签
[/list]操作css：
[code]var user = {
name:"tangguo",
age:3,
sex:'女'
}
//对象转化为json字符串{"name":"tangguo","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}');

复制代码

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

[size=6]标题一[/size]
p1
p2

复制代码

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

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了！会产生覆盖
追加：

JavaScript
JavaSE
JavaEE
JavaME

复制代码

效果：

创建一个新的标签，实现插入

[/code][size=4]insertBefore插到前面[/size]
[code]//ES6 之后
//定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('Hello')
}
}
var xiaoming = new Student('xiaoming');
var xiaohong = new Student('xiaohong');
xiaoming.hello()

复制代码

jQuery 教程1
jQuery 教程2
jQuery API 3.5.1 速查表
9、操作表单form（验证）

表单是什么？form DOM树

文本框→text
下拉框→select
单选框→radio
多选框→checkbox
隐藏域→hidden
密码框→password
…

表单的目的提交信息
获得要提交的信息

用户名：
性别：
男
女

复制代码

提交表单

md5加密密码，表单优化

Title
用户名：
密码：
提交

复制代码

input标签要实现抓取数据，必须通过name属性来实现

10、jQuery

javaScript和jQuery的关系？
jQuery库，里面存在大量的JavaScript函数
获取jQuery

jQuery官网
jQuery API 3.5.1 速查表
jQuery 教程1
jQuery 教程2

引入jQuery的方式

引入本地下载的jQuery
在线CDN引入jQuery
- 在线CDN加速jQuery
- CDN 加速服务

[/code][size=4]公式：$(selector).action()[/size]
[list]
[*]$(选择器).事件(事件函数)
[/list][code]
Title
[url=https://www.cnblogs.com/]点我[/url]

复制代码

选择器

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
// 设置新的地址
location.assign('https://blog.kuangstudy.com/')

复制代码

文档工具站：http://jquery.cuishifeng.cn/
事件

document.title
'百度一下，你就知道'
document.title = '糖果'
'糖果'

复制代码

获取鼠标当前的坐标

Title
mouse:
在这里移动鼠标试试

复制代码

操作DOM

节点文本操作

[list]
[*]JavaScript
[*]Python
[/list]

复制代码

CSS的操作

[/code][size=1]元素的显示和隐藏[/size]
[list]
[*]本质display: none;
[/list][code]history.back() //后退
history.forward() //前进

复制代码

娱乐测试

//对于 css 选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let children = father.children; //获取父节点下的所有子节点
// father.firstChild;
// father.children[index];
// father.lastChild;

复制代码

未来ajax()；

$('#form').ajax() $.ajax({url:"test.html",context:document.body,success:function(){
$(this).addClass("done"); }})

复制代码

小技巧

源码之家游戏源码
1、如何巩固JS（看jQuery源码，看游戏源码！）
2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）a
组件

IDEA快捷键

Ctrl+Alt+L：自动对齐

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)