前端之JavaScript
目录
-简介
--ECMAScript
---介绍
1966年11月，js的创造公司-NetScape公司决定将JavaScript交给国际化组织ECMA，希望这门语言能够成为国际标准。第二年ECMA就发布了262号标准文件(ECMA-262)的第一版，该版规定了浏览器脚本语言的标准，并将此语言称为ECMAScript，就是1.0版。
该标准一开始是针对JavaScript语言制定的，但却没有称其为JavaScript。一是因为商标，JavaScript本身已被NetScape注册为商标；二是想体现这门语言的制定者是ECMA而不是NetScape，有利于保证这门语言的开发性和中立性。
注：ES6就是指ECMAScript 6。
---历史
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则、try/catch |
| 2009 | ECMAScript 5 | 添加strict mode,json支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 |
添加指数运算符** 增加Array.prototype.includes |
--JavaScript
尽管ECMAScript是一个重要的标准，但它并不是js的唯一部分。实际上js包括3部分：
- ECMAScript
- DOM(Document Object Model)
- BOM(Browser Object Model)
简单来说，ECMAScript是JS的规格，JS是ECMAScript的实现；ECMAScript描述了JS语言本身的相关内容。
JS语言的特点：
- JavaScript是脚本语言
- js也是面向对象的轻量级的编程语言
- js是可插入HTML页面的代码
- js嵌入HTML页面后，可由所有的代理浏览李执行
- JavaScript很容易学习
PS：浏览器提供了一个快捷简单写js代码测试的平台
右键-检查-控制台
-JS基础
--注释
---单行注释
// 单行注释
---多行注释
/* 多行注释1 多行注释2 多行注释3 */
--变量与常量
---声明
在js中，首次声明一个变量需要用关键字声明：
1 var：声明的是全局变量，一变则变
var name = 'weer';
2 let:声明的是局部变量
注：如果你的js版本是5.1及以下，则无法使用let；若是6.0及以上则两者兼容
在Python中没有真正意义上的常量，一般用全大写字母表示常量。
但在js中，有真正意义上的常量，与C语言类似，用const声明。一旦声明，其值就不能改变。
const pi = 3.14;
---命名规范
1 变量名只能是字母、数字、下划线、$，不能以数字开头
2 命名推荐使用小驼峰式命名法：userName,dataIndex
3 不能用关键字命名
abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile
--数据类型
js和Python的数据类型一样，都是动态类型。
---数值类型(number)
包括整型、浮点型、NaN(Not a Number)
类型转化：parseInt()、parseFloat()
>var a = 11; var b = 8.8; typeof a; typeof b; <'number' >typeof NaN; <'number' >parseInt(11.11); <11 >parseFloat('12.12'); <12.12 >parseInt('123jaljfi');// 只取开头数字 <123 >parseInt('ajfie123jajl'); <NaN
---字符串类型(string)
用单引号或双引号命名字符串类型变量
模板字符串：
多行文本用模板字符串(``)命名
>let more = `111
222`;
<undefined
>typeof more
<'string'
模板字符串还能用于格式化字符串
>let name = 'weer';let age = 18; <undefined >let s = `my name is ${name},age is ${age}`; <undefined >s; <'my name is weer,age is 18'
字符串常用方法
js字符串常用方法 .length 返回字符串长度 .trim() 移除字符串两端空白/空格
// 不能去除指定内容
.trimLeft() 移除左侧空格 .trimRight() 移除右侧空格 .charAt(n) 返回第n个字符 .indexOf(substring) 子序列首字符串索引位置 .substring(from,to) 切片
// 不识别负数
.slice(start,end) 切片 .toLowerCase() 所有字母小写 .toUpperCase() 所有字母大写 .split(delimter,n) 按delimter分割字符串成n个元素的数组 .concat(p) 连接p序列
---布尔类型(boolean)
js中布尔值全是小写的：true，false
表示false的有：0，null，NaN，undefined，空字符串等
>null：表示值为空，一般是指定或清空一个变量时用
>undefined：指定义了一个变量但没有赋初始值，或函数没有指定返回值
--流程控制
---if判断
使用语法：
if： if(条件){处理} if-else： if(){}else{} if-else if-else： if(){}else if(){}else{}
---switch
var num = 1; switch(num){ case 0: console.log('www'); break; case 1: console.log('mmm'); break; default: console.log('qqq'); break; };
---while
使用语法：while(限制条件){处理代码};
var i = 0; while(i<10){ console.log(i); i++; }
---for
使用语法：for(循环条件){循环代码}
// 循环打印1~10 for(let i=1;i<=10;i++){ console.log(i); }
---三元运算符
var res = 3>5?0:1; // res结果为1
--运算符
---算术运算符
+ - * / ...
i++表示先用后算，++i表示先算后用
---逻辑运算符
&&(与) ||(或) !(非)
&&前面为真取决于后面的数据；||前面为假取决于后面的数据。
>1 && '1'; <'1' // 是'1'不是1 >0 && '1'; <0 >1 || '1'; <1 >0 || '1'; <'1' // 是'1'不是1
---比较运算符
> < >= <= == ===
注：js中==是弱等于，===才是强等于：
>1 == '1'; <true >1 === '1'; <false
---赋值运算符
= *= -= += ...
--函数
---定义方法
function 函数名(形参){函数逻辑};
1 调用时传少参数或传多参数都不会报错，js只取对应数据
2 js内置关键字arguments可以获取传入所有实参的值
function func(a,b){ if(arguments.length < 2){ console.log('传少了') }else if(arguments.length > 2 ){ console.log('传多了') }else{ console.log(a+b) } };
---使用
·有返回值函数：仍用return关键字，多个返回值用数组接收
·匿名函数：需用一个变量来接收 var res = function(){console.log('hhh')};
·箭头函数：左边为形参，右边为返回值
var res=a=>b; <==> var res = function(a){return b};
var res = (id1, id2)=>id1 + id2; <==> var res = function(id1,id2){return id1+id2};
--对象
---数组
类似于Python中的列表[1,2,3]，但不支持负数索引取值
| .length | 数组大小 |
| .push(ele) | 尾部追加ele |
| .pop() | 获取尾部元素并在数组中删除 |
| .unshift(ele) | 头部插入ele |
| .shift() | 获取头部元素并在数组中删除 |
| .slice(start, end) | 切片 |
| .reverse() | 逆置 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(seq) | 尾部插入数组/连接数组 |
| .sort() | 排序(从小到大) |
| .forEach() |
绑定回调函数 function(function(){}, alter) 传一个参数：元素 传两个参数：元素+索引 传三个参数：元素+索引+元素来源 顶多传三个参数 |
| .splice() |
删除元素并向数组中添加新元素 传两个参数：.splice(0,3)第一个是起始位置，第二个是删除个数 传三个参数：.splice(0,1,666)第一个是起始位置，第二个是删除个数，第三个是添加元素 |
| .map() | 返回调用数组元素的函数处理后的值的新数组 |
---自定义对象
类似Python中的字典{ }，本质上是键值对的集合（Hash结构），但是只能用字符串作为键
创建方式：
1、直接创建：var d = {'name':'weer', }
2、使用关键字new： var d = new Object() // 创建的d是空的自定义对象
获取方式：
1、d['name']
2、d.name // 更方便
3、for循环 for(let i in d){console.log(i,d[i])};
增值方式：
1、d['age'] = 18;
2、d.age = 18;
注意：
ES6中提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。
也就是说，Object结构提供了“字符串--值”的对应，Map结构提供了“值--值”的对应，是一种更完善的Hash结构实现。
var m = new Map(); var o = {p: "Hello World"} m.set(o, "content"} m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false map
扩展：
// 父类构造函数 var Car = function (loc) { this.loc = loc; }; // 父类方法 Car.prototype.move = function () { this.loc ++; }; // 子类构造函数 var Van = function (loc) { Car.call(this, loc); }; // 继承父类的方法 Van.prototype = Object.create(Car.prototype); // 修复 constructor Van.prototype.constructor = Van; // 扩展方法 Van.prototype.grab = function () { /* ... */ };
---JSON对象
把数据转换为json格式数据供传输交互
序列化 -----------------> JSON.stringfy()
反序列化 ----------------> JSON.parse()
---Date对象
>let timeObj = new Date(); <undefined >timeObj <Thu Oct 04 2022 13:13:01 GMT+0800 (中国标准时间) >timeObj.toLocaleString(); // 转换为好看时间 <'2022/10/4 12:13:01'
也可以手动输入时间：
>let t1 = new Date('2022/10/1 11:11:11'); <undefined >t1; <Sat Oct 01 2022 11:11:11 GMT+0800 (中国标准时间) >let t2 = new Date(2022,10,1,11,11,11); <undefined >t2; <Tue Nov 01 2022 11:11:11 GMT+0800 (中国标准时间)
时间对象内置方法 let t = new Date();
时间对象内置方法 t.getDate() 获取日 t.getDay() 获取星期 t.getMonth() 获取月份0~11 t.getFullYear() 获取年份 t.getHours() 获取小时 t.getMinutes() 获取分钟 t.getSeconds() 获取秒 t.getMilliseconds() 获取毫秒 t.getTime() 时间戳
更多Date对象方法：点我
---RegExp对象
在js中需要使用正则时就需要用到RegExp(正则)对象
使用方式：
1、let reg1 = new RegExp('^[0-9][a-zA-Z]{1,6}')
2、let reg2 = /'^[0-9][a-zA-Z]{1,6}'/
匹配内容：
1、reg1.test('6weer') // true
2、reg2.test('weer') // false
---math对象(了解)
| abs(x) | 绝对值 | exp(x) | e的指数 |
| floor(x) | 向下取整 | log(x) | 自然对数 |
| max(x,y) | 最大 | pow(x,y) | 幂 |
| random() | 0~1随机数 | round(x) | 四舍五入 |
| sin(x) | 正弦 | sqrt(x) | 平方根 |
| tan(x) | 正切 | cos(x) | 余弦 |
-事件
当触发某个条件时自动触发某个动作
--使用
| onclick |
点击某个对象时调用 的事件句柄 |
onfocus | 元素获得焦点 | onkeydown | 某个按键被按下 | onselect | 文本框中内容被选中 |
| ondbclick |
双击某个对象时调用的事件句柄 |
onblur | 元素失去焦点 | onkeypress | 某个按键被按下并松开 | onsubmit | form对象的提交按钮被点击 |
| onchange | 文本域的内容改变 | onkeyup | 某个按键被松开 | ||||
| onload | 一张页面或一幅图片完成加载 | ||||||
| onmousedown | 鼠标按钮被按下 | ||||||
| onmousemove | 鼠标被移动 | ||||||
| onmoseout | 鼠标从某元素上移开 | ||||||
| onmouseover | 鼠标移到某元素上 |
--使用方式
<button onclick='func1()'>点我触发事件1</button>
<button id='btn2'>点我触发事件2</button>
<script>
// 第一种方式
function func1(){
alert('事件1')
}
// 第二种方式
let btn2Ele = document.getElementById('d2');
btn2Ele.onlick = function(){
alert('事件2')
}
</script>
PS：script标签一般放在body底部
-BOM操作
前面所学js基础好像与操作浏览器和HTML页面没什么关系，因为要介入BOM和DOM
BOM(Browser Object Model)浏览器对象模型，即用js操作浏览器
--对象操作
---window对象
window对象指的是浏览器窗口
>window.innerHeight;//浏览器窗口高度px <262 >window.innerWidth; //浏览器窗口宽度px <1279 >window.open('https://www.baidu.com/','','height=400px,width=1000px,top=200px,left=200px'); // 打开小窗百度页面 <Window {window: Window, self: Window, document: document, name: '', location: Location, …} >window.close(); // 关闭当前页面
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象。
---window子对象
- 1 navigator
navigator>window.navigator.appName; <'Netscape' >window.navigator.userAgent;// !!! <'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) >Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53' <window.navigator.appVersion; >'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 <Safari/537.36 Edg/105.0.1343.53' >window.navigator.platform; <'Win32' >navigator.userAgent;//window的子对象可以不用写window <'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53'
- 2 history
historywindow.history.back();// 返回上一级 window.history.forward();// 前进到下一级
- 3 location
locationwindow.location;// 获取当前地址信息 window.location.href;// 获取当前地址 window.location.href = url; //跳转到指定url window.location.reload(); // 刷新页面
--弹出框
- 警告框alert()
alert('hhh') - 确认框confirm()
confirm('are you sure?') - 提示框prompt()
prompt('input your age')
prompt('input your age', '18') // 输入两个参数第二个为默认信息
--计时器
---一定时间后触发一次
setTimeout(function, time) 在time毫秒后触发函数function
clearTimeout(timer) 清除计时器效果，需要传入计时器对象
function func1(){alert(111)}; let t1 = setTimeout(func, 4000); //在4s后执行func1 clearTimeout(t1); //清除计时器效果t1，同步执行，所以func1在这不会执行
setInterval(function, time) 每隔time毫秒执行一次function
clearInterval(timer) 清除计时器效果，需要传入计时器对象
function func2(){alert(222)}; let t2 = setInterval(func2, 3000); //每隔3s后执行func2 clearInterval(t2); //清除计时器效果t2，同步执行，所以func2在这不会执行
---混合使用
function fnt(){alert('hhh')}; function show(){ let t = setInterval(fnt, 3000); function inner(){ clearInterval(t); } setTimeout(inner, 9000); }; show();
-DOM操作
DOM(Document Object Model)文档对象模型，即可以使用js操作HTML页面中的标签
在DOM树中，将每一个标签视为一个节点
--查找标签(必须使用关键字document)
---直接查找
- id查找：document.getElementById()
- 类查找：document.getElementsByClassName()
- 标签查找：document.getElementsByTagName()
注：类查找和标签查找的Element均为复数(因为可能不止一个)，获得的是对象数组
一般通过索引取出对象并赋值给对象变量(变量名一般为xxxEle)
---间接查找(了解)
.parentElement // 拿父标签 .children // 拿所有子标签 .firstElementChild // 拿所有子标签中的第一个 .lastElementChild // 拿所有子标签的最后一个 .nextElementSibling // 拿同级别下面的第一个标签 .previousElementSibling // 拿同级别上面的第一个标签
--节点操作
创建标签： document.createElement()
属性操作：
设置属性： .setAttribute(' ', ' ')
获取属性： .getAttribute()
移除属性： .removeAttribute()
标签位置操作：
标签内部追加(尾部追加)： .appendChild()
删除子标签： .removeChild()
替换子标签： .replaceChild()
补：innerText和innerHTML
eg: divEle.innerText 获取标签内部所有文本
divEle.innerHTML 内部文本和标签结构都获取
当用来给标签内部赋值时：
divEle.innerText = '<h1>weer</h1>' 不识别html标签
divEle.innerHTML = '<h1>weer</h1>' 识别标签，自动形成h1标签weer
--获取值操作
通过.value()获取用户输入数据(input标签、select标签...)
获取文件数据用.files[0]获取。.files返回一个列表，第一个即为文件对象
--class操作
.classList # 返回标签类属性的所有值，数组 .classList.remove('c1') # 移除类属性中的c1 .classList.add('c2') # 添加类属性c2 .classList.contains('c3') # 检查是否含有类属性c3 .classList.toggle('c4') # 类属性中有c4即删除，无则添加
--css操作
js也能对标签实现css操作，首先应带关键字style起手，且css方法中的-或_在js中统一变为大写即小驼峰式命名
let pEle = document.getElementsByTagName('p')[0];
pEle.style.color = 'red'; // 更改标签颜色
pEle.style.fontSize = '24px'; // 更改标签大小
pEle.style.backgroundColor = 'green'; // 更改标签背景色
pEle.style.border = '3px solid red'; // 设置标签边框
