web前端——JavaScript_前端未定义-优快云博客

本文链接：https://blog.youkuaiyun.com/Atlantis_Qi/article/details/120849668

杂项知识点

注释：//单行注释//；/*多行注释*/。
js声明变量不需要指定变量的数据类型。var i; i=100。
两种声明方式：function mysum(a,b){} 和 mysum=function(a,b){}
函数声明的优先级高，打开网页时，函数先进行声明。
函数声明提升优先级高于变量声明提升
函数不能重载，如果出现同名函数，前者函数会消失（被覆盖）。因此函数命名避免重名。
输出console.log()。
代码运行顺序：可以用onload改变函数发生时间。
键值：回车键键值13 ESC键值27。keyCode键盘事件。
保留超链接的样式，把href的链接地址废弃掉。 href="javascript:void(0)"
js代码中触发事件：name.focus(触发此元素的获取焦点事件) name.blur(触发元素的失去焦点事件) name.click()。
谁调用了this this就指向谁没人调用 this就指向window。
浏览器解释html时是按先后顺序的，前面的script就先被执行。
关于for循环：for（var k in obj）{ } 。 k得到的是属性名，obj[k]得到的是属性值。
var、let、const区别
return false：阻止此行为发生，阻止默认行为
运算中，+号，数字隐式转换成字符串。其余的运算符号是字符串隐式转换成数字。
JS会优先调用函数里的变量，当未定义时会输出undefined
javascript 中所有的数值类型都是双精度存储的，使用 64bit，64bit 等于 8byte
setMonth(n)，这里是0-11分别对应1-12月.
只有 0，-0，NaN，""，null，undefined 这六个值转布尔值时，结果为 false
立即执行函数：（可以含参数）
函数封装引用切记要在html文件中引用声明。
窗口回到顶部：window.scroll(0,0)
一元加操作符，+"2"会变成数值2。加减法操作中，如果有一个是NaN，则结果是NaN。
||：条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。&&相反。
对象分为三类：内置对象宿主对象自定义对象。
函数加了（）相当于函数表达式，会立即执行，执行的结果作为返回值传递。
只有实例对象上不存在的属性和方法才会去原型上查找。
标题标签一般是h1到h6依次变小，没有h7标签。
在JavaScript 中,任何非零数除以零会返回infinite，0/0会返回出 NaN ,不会报错，也不会终止程序执行。
cookie的有效时间默认为-1，如果不进行设置的话，就会默认在浏览器会话关闭时结束。
函数会优先找自己的内部变量，var变量提升。

JavaScript实现继承共6种方式：原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。

先立即执行匿名函数。函数执行后无返回值，则输出未定义。

逻辑与（&&）优先级高于逻辑或（||）

&与运算（遇到0则为0） |或运算（遇到1则为1） ^异或运算（两个相等则为0）
visibilitychange :页面可见性改变事件，页面显示与否时触发的事件
document.addEventListener("visibilitychange", function(){
    document.title = document.hidden ? "用户离开了" : "用户回来了";
});

概述

JavaScript是脚本语言，事件驱动型编程语言，以普通文本的形式保存，用记事本直接打开。（java是编译型语言，python是脚本型语言）
JavaScript用来操作HTML中的节点，产生动态效果。
JavaScript有变量、数据类型，几乎是一种全新的编程语言。
三大块：ECMAscript（规则知识）、BOM（外部）、DOM（内部）

运行原理

JavaScript一大特点是单线程，同一时间只能做一件事。

同步：前一个任务结束后再执行后一个任务，程序执行顺序与任务的排列顺序是一致的、同步的。

异步：在做一个任务的同时，可以处理其他任务。

执行机制

主线程不断地重复获得任务、执行任务，再获取任务、再执行，这种机制被称为事件循环

底层原理

栈内存（ECStack，执行环境栈）：浏览器会在计算机内存中分配一块内存，专门用来供代码执行的。

堆内存：浏览器把内置的一些属性方法放在一个单独的内存中。AAAFFF000，任何开辟的内存都有一个16进制的内存地址，方便后期找到这个内存。

执行上下文（EC）：代码自己执行所在的环境。

全局的执行上下文，EC(G)

函数中的代码都会在一个单独的私有的执行上下文中处理。

块级的执行上下文。

全局对象GO：浏览器全局。

变量对象VO：在当前的上下文中，用来存放创建的变量和值的地方（每一个执行上下文中都会有一个自己的变量对象，函数私有上下文叫做AO活动对象，但也是变量对象VO）

进栈：形成的全局执行上下文，进入到栈内存中执行的过程。

出栈：执行完代码。可能会把形成的上下文出栈释放。

变量命名过程：1、创建一个值，2、创建一个变量，3、让变量和值关联在一起。

基本数据类型都是直接存储在栈内存中，
引用数据类型是先开辟一个堆内存，把东西存储进去，最后把地址放在栈中供变量关联使用的。

嵌入方式

行内引用
脚本块（标签）方式
引入外部独立js文件

基础知识

全局变量：在函数体之外声明的变量，全局变量在浏览器打开的时候分配空间，直到浏览器关闭的时候才会销毁。

局部变量：函数体当中的变量，局部变量在函数被调用的时候分配空间，函数执行结束之后，内存释放。

声明变量不赋值，系统默认undefined。
如果一个变量声明的时候没有使用var关键字，此变量统一为全局变量。（这种全局变量声明的时候必须手动赋值）

八大数据类型：

undefined、number、string、boolean、object、function、symbol、Bigint

undefined：只有一个undefined值，声明变量未赋值。（null原始类型，属于object）

number：

        number()函数：将不是数字的数据转换成数字。

parseInt():转换出整数，（即使有汉字）。（处理的是字符串，从字符串的左侧开始查找有效数字字符，遇到非有效数字字符则停止查找），如果处理的不是字符串，先强制转换成字符串然后再开始查找。

Math.ceil():向上取整。20.01=21

        Math.floor():向下取整。20.01=20

true：1，false：0，null：0，undefined：NaN，

字符串必须保证都是有效数字才会转换成数字，否则都是NaN。

3. Boolean:true和false

Boolean()函数的结果

4.String方法

charAt() ：以单字符字符串的形式返回给定的那个字符。

charCodeAt()：以单字符字符串的形式返回给定位置的字符编码。

cancat() ：用于将一个或多个字符串拼接起来，返回拼接得到的新字符串。

indexOf(字符，start) ：返回子字符串的位置，从前向后数。

lastIndexOf()：同上，从后向前数

slice(a，b)、substr(a,c，c为返回数量)和 substring()：a为子字符串开始位置，b为结束位置。左开右闭（同编程语言的索引取值）

trim()：删除前置及后缀的所有空格，然后返回结果。

toLowerCase()和 toUpperCase()：转换为小写和大写。

以下方法均可结合正则表达式：

match(): 找到相应匹配项

search(): 返回字符串第一个匹配项的索引。

replace(): 替代

split(a,b): a为分割标志，b为返回字符串数量。

localCompare(): 字母表位置判断。

fromCharCode(): 接受字符编码，连成字符串

5.object（超类）——构造函数，创建对象

属性

prototype（原型）：给对象扩展属性和方法。

6.function（类）：

定义类



null、NaN、undefined的区别：

==：等同运算符，只比较值是否相等。

===：全等运算符，既比较值，又比较数据类型。1和true不行。

三者类型不一样。null和undefined是等同关系。

数据类型检测：

typeof：检测数据类型的逻辑运算符。
instanceof：检测是否为某个类的实例。
constructor：检测构造函数。
Object.prototype.toString.call：检测数据类型的方法。

typeof【value】返回当前值的数据类型

        返回结果都是字符串。

        局限性：

typeof null 结果是 "object"

typeof 不能细分对象类型（检测普通对象或者数组对象等都是“object”）

（Array与null返回的都是object。function(){}与class{}返回的都是function）



把其他数据类型转换成数字的方法

强转换（基于底层机制转换） Number（【value】）

一些隐式转换都是基于Number完成的。

isNaN（“12px”）先把其它类型值转换为数字再检测

数学运算“12px”-14

字符串==数字，两个等于号比较很多时候要把其它值转换成数字。

弱转换（基于一些额外方法转换）parseInt（【value】）/parseFloat（【value】）

事件（属性）

失去焦点（操作结束）：οnblur="console.log(失去焦点了)"。

获得焦点（开始操作）：οnfοcus="请求"

鼠标事件

鼠标单击：onclick
鼠标双击：ondblclick
鼠标经过：onmouseover
鼠标按下：onmousedown
鼠标离开：onmouseout
鼠标弹起：onmouseup
鼠标移动：onmousemove

mouseover和mouseenter区别：前者经过盒子会触发，经过子盒子也会触发。后者反之

（因为mousenter不会冒泡，mouseleave也不会冒泡。）

键盘按下：onkeydown 不区分字母大小写

键盘弹起：onkeyup

键盘按下：onkeypress 不识别功能键，比如删除、ctrl、shift。区分字母大小写

表单提交：onsubmit

表单重置：onreset

文本被选中：οnselect="松手后事件"

选项改变（表单选择框）：onchange

刷新页面加载完毕：onload，只能写一次。可以用addEventListener（load，function{}）声明函数来没有限制。

DOM加载完毕事件触发：DOMContentLoaded。

滚轮事件：onmousewheel。

在滚轮事件中，“Chrome”有一个event.wheelDelta属性，而“Firefox”中有一个event.detail属性。
二者区别：
event.wheelDelta:值是120的倍数，向上滚动为正值。
event.detail：值是3的倍数，向下滚动为正值。

注册事件的方式

1、在标签中使用事件句柄，在事件句柄中编写js代码（函数叫回调函数），当这个事件句柄事件发生后，js代码会运行。

2、通过id联系绑定

innerHTML和innerText

改变表单值：函数.value=' '

防止链接跳转添加javascript;;或javascript:void(0)

获取文本框value值

新窗口的开启和关闭

window.open（网址或者html文件）

window.close（网址或者html文件）

alert("弹出消息框")

window.confirm("确认操作吗")

设置窗口为顶级窗口（将登录页面设置为顶级窗口）

页面跳转方式

高级事件注册：

注册：变量名.addEventListener("click",function){} 事件类型是字符串。

删除：

HTML的id与js联系

数组array

创建数组：

1、

2、

数组方法：

array.push(元素)：向数组后添加一个元素。
array.pop()：将数组末尾元素弹出。
array.reverse()：倒序排列。
array.join("，")：将每个元素用，连接，变成字符串
array.forEach()：遍历数组。在forEach中使用 return false 或者 break无法跳出整个循环，并且使用break会直接报错
array.filter()：筛选并返回新的数组。
array.some()：查找数组中满足条件的元素。（找到第一个就中止）

内置对象Date

var time= new Date()

正则表达式

汉字：^[\u4e00-\u9fa5]{0,}$

正则表达式在线测试 | 菜鸟工具

json ：数据交换（js和java）

window.eval("字符串")：将后面的字符串当做js代码解释并执行。

浏览器向服务器发送请求的几种方式

json：

window和document的常见属性和方法

1.window对象常用属性：

window.closed 返回窗口是否已被关闭。
window.status=sometext 设置窗口状态栏的文本。
window.location.href="url" 在当前页面跳转至新页面
window.location 获取当前页面的url地址

window.print 用于打印当前窗口的内容。

2.window对象常用方法：

alert("") 显示带有一段消息和一个确认按钮的警告框。
confirm("") 显示带有一段消息以及确认按钮和取消按钮的对话框。
window.blur() 把键盘焦点从顶层窗口移开。
window.moveTo(x,y) 把窗口的左上角移动到一个指定的坐标。
window.resizeTo(width,height) 把窗口大小调整为指定的宽度和高度。
window.scrollTo(xpos,ypos) 把内容滚动到指定的坐标。
window.open(URL,[name,features,replace]) 打开一个新的浏览器窗口或查找一个已命名的窗口

setInterval(fn(),time); 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout(fn(),time); 在指定的毫秒数后调用函数或计算表达式。
clearTimeout(timer) 取消由 setTimeout() 方法设置的 timeout，需为定时器命名。

1.document常见的属性

title ：设置文档标题，也就是html的标签
bgColor：设置页面的背景色
fgColor：设置文本颜色（前景色）
linkColor：未点击过的链接颜色
alinkColor：焦点在此链接上的颜色
vlinkColor：已点击过的链接颜色
URL：设置url属性，从而在同一个窗口打开另一网页
fileCreateDate：文件建立日期，只读属性
fileModifiedDate：文件修改日期，只读属性
fileSize：文件大小，只读属性
cookie：设置和读取cookie
charset：设置字符集

2.document常见的方法

write()：动态向页面写入内容
createElement(Tag)：创建一个HTML标签对象
getElementById(ID)：获得指定id的对象
getElementsByName(Name)：获得之前Name的对象
body.appendChild(oTag)：向HTML中插入元素对象

API

API是一些预先定义的函数，目的是提供应用程序开发人员基于某软件或硬件得以访问一组过程的能力，无需访问源码。API是给程序猿提供方便的一种工具，以便实现相应功能

Web API

主要针对浏览器提供的接口，针对浏览器做交互效果。多是方法和函数。

DOM

（选取指定父元素中的子元素。）

document.querySelector()和document.querySelectorAll()

获取body元素：document.body。获取html元素：document.documentElement。

JS修改css样式

display：none 隐藏样式。（用来关闭东西）

多样式修改：在css命名标签样式，用this.className="新标签名"修改。

保留原类名：this.className="原标签名新标签名" 多类名选择器。

（换肤）

classlist：

添加类：（不用加点.）

删除类：

切换类：（有则删除，无则添加）

自定义属性

规定：自定义属性名data-开头的，并且赋值

设置自定义属性：elemengt.setAttribute（“data-名”，2）。

获得自定义属性：getAttribute(“属性名”)。

关于节点

基本属性：nodeType（节点类型），nodeName（节点名称），nodeValue（节点值）

nodeType：元素节点为1。属性节点为2。文本节点为3（包含文字、空格、换行）

子节点：

变量名.childNodes 所有的子节点，包含元素节点、文本节点等。

变量名.children 获取所有的子元素节点。

1、第一个子节点：变量名.firstChild。第一子节点，不管是文本节点还是元素节点。

2、第一个元素子节点：变量名.firstElementChild

3、实际用：

父节点：

变量名.parentNode

兄弟节点：

下一个兄弟节点：属性名.nextSibling

下一个兄弟元素节点：属性名.nextElementSibling

上一个兄弟节点：属性名.previousElementSibling

节点的各种操作

创建元素节点：document.createElement("li")

appendChild（）—— 向childNodes列表末尾添加一个节点

insertBefore（）——第一个参数：要插入的节点，第二个参数：作为参照的节点

replaceChild（）——第一个参数：要插入的节点，第二个参数：要替换的节点

removeChild（）——一个参数，即要删除的节点

复制节点：

浅拷贝：node.cloneNode()。只复制标签

深拷贝：node.cloneNode(true)。复制标签和内容

document.write,innerHTML和createElement。前者效率高

DOM事件流

三个阶段：捕获阶段、当前目标阶段、冒泡阶段（由底层到顶层）。

捕获执行顺序：参数为true

冒泡执行顺序：参数为false，由底层到顶层执行。

不会冒泡执行的事件：onblur、onfocus、onmouseenter、onmouseleave

event

可简写成e，一系列相关数据的集合

e.target:返回触发事件的对象，比如ul事件里的li，会返回li。

事件委托：给父节点添加侦听器，来影响子节点。

e的时间对象属性方法

阻止冒泡进行：在事件里加e.stopSelector()，但是不影响父级。

禁止鼠标右键和选中

鼠标位置

e.clientX：鼠标在可视区的X坐标

e.pageX：鼠标在页面的X坐标

e.screenX：鼠标在电脑屏幕的X坐标

窗口大小改变事件：

（window.innerWidth：当前屏幕宽度）

动画过渡完成执行事件：transitioned（有继承性，可终止冒泡防止）

BOM

URL

URL：统一资源定位符（Uniform Resource Locator），是互联网标准资源的地址。

一般格式：

组成：

Location

location对象属性

location对象方法

navigator

navigator对象包含有关浏览器的信息，它有很多属性，最常用的是userAgent，用来返回由客户机发送服务器的user-agent头部的值。

判断用户在pc端打开还是移动端打开：

history

与浏览器历史记录进行交互，该对象包含用户访问过的浏览器URL。

history对象方法

offset

offset系列常用属性

offset与style区别

获取元素大小位置，用offset。给元素设置属性值，用style。

client（客户端）

通过它的相关属性可以动态获得该元素的边框大小，元素大小等。

scroll（滚动）

通过它的相关属性可以动态获得该元素的大小，滚动距离。

scroll滚动事件：当我们使用滚动条时触发的事件。

js与动画

动画原理：

举例：（含参数）

JS与多媒体（音频、视频）

1、audio和video元素方法

paly（）：开始播放
pause（）：暂停当前播放
load（）：重新加载。
canPlayType（）：检测浏览器是否能播放。
addTextTrack（）：向音频/视频添加新的文本轨道。

2、 audio和video元素的属性

autoplay：设置或返回在加载完成后随即播放。
controls：设置或返回音视频是否显示控件。
currentTime：设置或返回音视频中的当前播放位置。
duration：返回当前音视频的长度。
src：设置或返回音视频的当前来源。
volumn：设置或返回音视频的音量。
buffered：返回表示音视频已缓冲部分的TimeRanges对象。
playbackRate：设置或返回音视频播放的速度。
error：返回表示音视频错误的MeidaError对象。
readyState：返回音视频当前的就绪状态。

3、audio和video元素事件

loadedmetadata：当浏览器已加载音视频的元数据时触发。
canplay：当浏览器可以开始播放音视频时触发。
play：当音视频已开始或不是暂停状态时触发。
playing：当音视频在因缓冲而暂停或停止后已就绪时触发。
pause：当音视频暂停时触发。
timeupdate：当目前的播放位置已更改时触发。
seeking：当用户开始移动/跳跃/到音视频中的新位置时触发。
seeked：当用户已移动/跳跃到新位置时触发。
waiting：当视频由于需要缓冲下一帧而停止时触发。
ended：当目前的播放列表已结束时触发。

JS插件和框架

JS插件是js文件，遵循一定的规范编写，方便程序展示效果，拥有特定功能且方便调用。它一般是为了解决某个大众问题而专门存在，其功能单一，而且比较小。

轮播图：swiper插件。

视频插件：zy.media.js

其他插件：

本地存储：

数据存储在用户浏览器中
设置、读取方便、甚至页面刷新不会丢失数据
容量较大，sessionStorage约5M，localStorage约20M
只能存储字符串，可以将对象JSON。stringify（）编码后存储

window.sessionStorage

window.localStorage

框架

框架就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

插件一般是为了解决某个问题而专门存在，其功能单一，而且比较小。

前端常用的框架有boostrap、Vue、Angular、React。能开发PC端和移动端

框架：大而全、一整套解决方案。

插件：小而专一，某个功能的解决方案。