|
注意：本文只是入门使用，仅作参考，读者若想进一步提升自己请借助相关网站中的具体说明来详细了解JS的内容
Javascript组成
| 分层 | 作用 |
|---|
| HTML（结构层） | 利用语义化标签搭建网页 | | CSS（样式层） | 利用样式进行美化 | | Javascript（行为层） | 可以给网页添加动态效果 |
JavaScript由ECMAScript、DOM、BOM组成
ECMAScript：欧洲计算机协会，每年六月中旬定制语法规范
DOM(Document Object Model)：文档对象模型
BOM(Browser Object Model)：浏览器对象模型
Javascript书写规范
需要使用script标签包裹，可以放在任何地方，可以有任意多
内置函数
alert函数
alert(""/’’)：警告弹窗函数；可多次使用，会依次弹出
prompt函数
prompt(""/’’)：提示弹窗函数；；可多次使用，会依次弹出
控制台使用
在JavaScript中，我们可以通过console对象的log方法在控制台中输出一定内容
console.log(参数)
字面量
Javascript数据类型一共六种，五个基本数据类型和一个引用类型
基本数据类型：String（字符串类型）, Number（数字类型）, Boolean（布尔类型）, Undefined（未定义类型）, Null（空对象类型）
Number：在控制台中以蓝色显示，包括整数、浮点数；浮点数计算保留17位，以二进制计算（IEEE浮点数算数标准）。数值范围为-253~253，超过可以用Infinity（或-Infinity）。0/0会返回一个特殊值NaN，12/0会返回Infinity.NaN勿论什么运算都返回NaN。
String：在控制台中以黑色显示
引用类型：Object（引用类型），包括函数、数据、正则、DOM、BOM
浏览器隐式转换（Number(转换内容)）
| 未定义类型 | 隐式转换为数字 |
|---|
| undefined | NaN（NaN和数字比较结果永远是False） |
| 数字类型数值 | 隐式转换为布尔值 |
|---|
| 0、NaN | False | | 其余数字 | True |
| String格式 | 隐式转换为数字 |
|---|
| “” | 0 | | “字符”或“字符+数字”或“数字+字符” | NaN | | 纯数字（包括数值运算） | 数值 |
| String类型 | 隐式转换为布尔值 |
|---|
| 空字符串 | False | | 非空字符串 | True |
所以有(NaN&&Infinity=NaN), (null&&undefined=null), (“张三”&&“李四”=“李四”)
| 未定义类型 | 隐式转换为布尔值 |
|---|
| undefined | False |
typeof
typeof +变量用于数据类型判断
+的应用
当没有字符串的时候，+为数学加法运算
当有字符串的时候，+为连字符
parseInt函数
可以将字符串中数字形式字符串转换为数字（整数部分），从左到右依次检测数字，碰到第一个非数字或者小数点为止
多段数字中间穿插非数字字符自会返回第一段数字
如果第一个段字符不是数字，则会返回NaN
parseFloat函数
可以将字符串中的数字形式字符串转换为数字（包括小数部分）
数学对象(Math)
从Math库中调特定数值和函数
变量
变量声明和赋值可以放一起也可分开。也可以多个同时声明或者声明&赋值
各大浏览器厂商都有自己的解析器，在翻译代码的时候会将变量声明部分提升到作用域最前面
比较运算
特别注意
| 符号类型 | 意义 |
|---|
| 单个等号 | 赋值运算 | | 两个等号 | 相等判断 | | 三个等号 | 全等判断（数值类型和大小都一样） |
IIFE
在表达式形式函数声明的同时立刻执行一次
写法是函数最后坠一个小括号
正确写法
var fun = function(){
console.log('表达式')
}()
错误写法
function sum(){
console.log('表达式')
}()
关键字形式的函数如果想在声明是立即执行一次，除了后面加括号以外，前面需要加+、-、！中任意一个，或者用括号整体括起来变成表达式形式函数也可
+function(){
console.log('表达式')
}()
-function() fun1{
console.log('表达式')
}()
!function() fun2{
console.log('表达式')
}()
（function() fun3{
console.log('表达式')
}）()
数组相关的函数
此处array泛指实际数组
| 函数 | 用法 |
|---|
| array.push() | 尾部移除一个元素 | | array.pop() | 尾部添加一个元素 | | array.length() | 长度计算 | | array.unshift() | 头部添加一个元素 | | array.shift() | 头部移除一个元素 | | array.join() | 用某一字符将数组中元素连起来 | | array.reverse() | 将数组元素倒置 | | array.indexOf() | 返回元素下角标（即元素位置） | | array.includes() | 检测元素是否在数组中，返回true/false | | array.slice(起始索引，结束索引) | 从数组中切除一个子数组 | | array.splice(起始位置，切割长度) | 对数组进行切割 | | array.splice(起始索引，切割长度，插入值) | 对数组插入替换（如果插入切割长度为0） |
类数组对象-arguments
概述：函数体中拥有一个引用类型数据arguments。是引用类型数据
意义：在函数没有形参的情况下，在函数体中可以获取到传递给函数的实参
规则：类数组对象不是数组类似数组，只能使用length方法
<script>
function fun(){
console.log(arguments)
}
fun(1,2,3,4,5,6,7,8,9)
</script>
正则表达式
正则表达式（regulate expression）是一种匹配字符串的模式规则
正则写在//之间，//称为定界符
正则表达式在JS中属于引用类型数据
正则的书写规则
| 字符串方法 | 用途 |
|---|
| split | 根据匹配字符串切割父字符串 | | match | 使用正则表达式与字符串作比较，返回一个包含匹配结果的数组 | | search | 使用正则表达式或指定字符串进行搜索，返回第一个出现匹配项的下角标 | | replace | 使用正则表达式和字符串比较，然后用新的子串来替换被匹配的子串 |
| 正则表达式方法 | 用途 |
|---|
| exec | 可以在目标字符串中进行一次匹配，返回索引 | | test | 可以检测正则中的数据是否在字符串中出现，返回true或者false |
| 修饰符 | 意义 |
|---|
| i | ignore，即忽略大小写 | | g | global，即全局定义 |
| 边界符 | 意义 |
|---|
| ^ | 是以后面的字符串开头的（/string/） | | $ | 是以
前
面
的
字
符
串
结
尾
的
（
/
s
t
r
i
n
g
前面的字符串结尾的（/string
前面的字符串结尾的（/string/） |
| 预定义类 | 意义 |
|---|
| \d | [0-9]，匹配任意一个数字字符 | | \D | 非[0-9]，匹配仍以一个非数字字符 | | \s | 匹配任意空白 | | \S | 匹配任意不是空白的字符 | | \w | 可以匹配任意字母、数字、下划线 | | \W | 可以匹配任意除字母、数字、下划线以外的内容 |
| 量词 | 性质 | 意义 |
|---|
| {n} | 硬性量词 | 对应零次或者n次 | | {n,m} | 软性量词 | 至少出现n次但不超过m次（中间没有空格） | | {n,} | 软性量词 | 至少出现n次 | | ? | 软性量词 | 出现零次或者一次 | | * | 软性量词 | 出现零次或者多次（任意次） | | + | 软性量词 | 出现一次或者多次（至少一次） |
字符集
简单类
就是将任意多个字符进行集合书写，匹配一个符合条件的字符（比如：[abc]）
范围类
有时匹配内容过多，且类型相同，可以在中间加个横线（比如：[0-9] [A-Z] [a-z]）
组合类
允许中括号匹配不同类型的单个字符，或者是一类及多类，或者单一符号（比如：[0-9a-z]）
分组
正则中使用（）表示分组，内部内容会作为一个整体进行操作
后期如果小括号后面有量词，表示小括号内部整体重复匹配多次
中文匹配:[\u4e00-\u9fa5]
三元运算符
语法为
A ? B:C
A=true返回B
B=false返回C
underscore库
underscore_
| 函数 | 意义 |
|---|
| _.random(x, y) | x-y之间产生随机数 | | _.max([a,b,…]) | 数组中求最大 | | _.min([a,b,…]) | 数组中求最小 | | _.uniq([a,b,…]) | 数组去重 | | _.keys(dic[name]) | 字典取键 | | _.values(dic[name]) | 字典取值 |
视频与音频
视频标签video
双闭合标签video可以展示视频
video标签支持播放视频的格式只有三个：MP4、OGG、webM
默认设置
src：视频地址
controls：显示默认控制条
poster：视频海报
autoplay：自动播放
muted：自动静音
loop：循环播放
自定义设置
自定义设置按钮（播放暂停等）
currentTime：可以通过currentTime属性操作当前视频播放到的时间
duration：可以通过duration属性操作总时间
volume：可以通过volume属性操作视频的声音
onplay：如果播放，触发后续封装事件
onpause：如果暂停，触发后续封装事件
ontimeupdate：如果视频时间发生变化，触发后续封装事件
音频标签audio
双闭合标签audio可以展示视频
audio标签支持播放视频的格式只有三个：MP3、OGG、wav
默认设置
src：音频地址
controls：显示默认控制条
autoplay：自动播放
muted：自动静音
loop：循环播放
自定义设置
自定义设置按钮（播放暂停等）
currentTime：可以通过currentTime属性操作当前音频播放到的时间
duration：可以通过duration属性操作总时间
volume：可以通过volume属性操作音频的声音
onplay：如果播放，触发后续封装事件
onpause：如果暂停，触发后续封装事件
ontimeupdate：如果音频时间发生变化，触发后续封装事件
浏览器存储功能
浏览器存储共能分为两类：localStorage&sessionStorage,只可以存储字符串
本地存储(localStorage)
存储不会随着网页关闭、电脑关机而消失
| 方法 | 意义 |
|---|
| localStorage.setItem(‘key’:‘value’) | 本地存储 | | localStorage.getItem(‘key’) | 读取存储数据 |
如果遇到其他类型的数据，需要转化成字符串再进行存储
例如json类型数据，使用方法JSON.stringify()进行字符串化处理，反过来可以使用JSON.parse()
会话存储(sessionStorage)
存储会随着网页关闭、电脑关机而消失，后缀关键字方法与本地存储相同
过度动画
样式属性transition是一个综合属性，包括：
transition-property：过渡属性
transition-duration：过渡动画总时间
transition-timing-function：过渡动画速率
transition-delay：过渡动画延迟时间
过渡动画触发条件：事件触发，属性变化
| 过渡动画速率属性值 | 意义 |
|---|
| linear | 匀速执行 | | ease-in | 规定以慢速开始动画 | | ease-out | 规定以慢速结束动画 | | ease | 规定以慢速开始，慢速结束动画 | | ease-in-out | 规定以慢速开始，慢速结束动画 | | cubic-bezier(0.97, 1.62, 0, 0.39) | 贝塞尔曲线 |
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
background: cyan;
margin: 100px auto;
transition: width 2s linear 0s,
height 2s linear 0s;
}
div:hover{
width: 400px;
height: 400px;
}
</style>
<body>
<div></div>
</body>
2D变换动画
缩放scale
属性值为数字，表示变换为原来的多少倍
一个属性值时控制宽高；两个属性值时分别控制宽高
transform: scale(1.5); /* 属性值只有一个。宽高为以前的1.5倍 */
transform: scale(1.5,2); /* 属性值两个。宽为以前的1.5倍，高为以前的2倍 */
旋转rotate
属性值为度（degree）
transform: rotate(150deg); /* 旋转150度 */
平移translate
属性值为像素，有两个，第一个是水平方向（向左为正），第二个是垂直方向（向下为正）
transform: translate(20px, 30px) /* 向左平移20像素，向下平移30像素 */
3D变换动画
旋转rotate
以x轴旋转：rotatex()
以y轴旋转：rotatey()
以z轴旋转：rotatez()
括号内属性值依然为度（degree）
要使用父盒子嵌套，父盒子必须含有perspective属性
平移translate
以x轴旋转：rotatex()
以y轴旋转：rotatey()
以z轴旋转：rotatez()
括号内属性值依然为度（degree）
动画animation
语法格式
animation: animation-name,
animation-duration,
animation-timing-function,
animation-delay,
animation-iteration-count
animation-name：务必符合标识符规范
animation-duration：单位是s/ms
animation-timing-function：动画速率
animation-delay：第一次动画的时延
animation-iteration-count：代表执行动画的次数，数字或者infinite
animation-direction：动画是否反向执行，属性值alternate
animation-fill-mode：动画执行完是否停留在终止的地方forwards
动画和函数一样需要先声明再使用
canvas
canvas属性只有两个，width和height，用于设置画布宽高
canvas的width和height不能使用css进行设置，会失真
标签对中的文职是用来提示低版本浏览器的，高版本浏览器看不到
<canvas width="500" height="400">
当前浏览器版本不支持，请升级浏览器
</canvas>
| 方法（矩形） | 意义 |
|---|
| ctx.fillStyle | 填充样式（颜色） | | ctx.fillRect | 填充大小（四个参数分别是起始宽高和宽高） | | ctx.strokeStyle | 绘制样式（颜色） | | ctx.strokeRect | 绘制大小 | | ctx.clearRect | 清屏（四个参数分别是起始宽高和宽高） |
| 方法（路径） | 意义 |
|---|
| ctx.beginPath | 开始路径 | | ctx.moveTo(x,y) | 移动绘制点 | | ctx.lineTo(x,y) | 描述绘制路径（可多次绘制） | | ctx.closePath() | 闭合路径 | | ctx.fill() | 填充 | | ctx.stroke() | 绘制 | | ctx.globalAlpha=(0-1) | 透明度 |
| 方法（圆弧）arc(x,y,startAngle,endAngle,direction) | 意义 |
|---|
| (x,y) | 圆点 | | (starAngle,endAngel) | 起始与结束的角度（弧度制） | | direction | True/False=anticlockwise/clockwise |
| 方法（线形） | 意义 |
|---|
| ctx.lineWidth= | 线的宽度，单位是px | | ctx.lineCap= | 线的末端样式，属性值有butt/round/square | | ctx.lineJoin= | 线段的连接方式，属性值有round/bevel/miter | | ctx.setLineDash([x,y]) | 设置虚线样式，x，y成组出现 | | ctx.setLineDashoffset= | 设置起始偏移量 |
| 方法（文本） | 意义 |
|---|
| ctx.font=‘30px 微软雅黑’ | 30像素，字体为微软雅黑 | | ctx.fillText() | 画出括号内的文本 | | ctx.textAlign=’’ | 起始位置，属性值为right/center/left等 |
| 方法（渐变） | 意义 |
|---|
| ctx.createLinearGradient(x,y,w,h)/addColorStop(n,‘color’) | 线性渐变，n为权重 | | var linear = ctx.createRadialGradient(x0,y0,x1,y1,w,h) | 径向渐变,0为起始坐标，1为结束坐标 |
/* 线性渐变 */
var linear = ctx.createLinearGradient(x,y,w,h)
linear.addColorStop(0,'red')
linear.addColorStop(0.5,'blue')
linear.addColorStop(1,'yellow')
ctx.fillStyle = linear
ctx.fillRect(10，10，200，100)
/* 径向渐变 */
var linear = ctx.createLinearGradient(95,25,25,102,20,40)
linear.addColorStop(0,'red')
linear.addColorStop(0.5,'blue')
linear.addColorStop(1,'yellow')
ctx.fillStyle = linear
ctx.fillRect(0，0，200，100)
| 方法（阴影） | 意义 |
|---|
| shadowBlur= | 模糊效果 | | shadowColor= | 模糊颜色 | | shadowOffsetX= | 模糊X偏移 | | shadowOffsetY= | 模糊Y偏移 |
| 方法（引入图片） | 意义 |
|---|
| ctx.drawImage(image,x1,y2,w,h,x2,y2,w,h) | 前四个数是图片的切片，后四个数是图片切片的位置 |
// 创建一个image元素
var image = new Image()
// 导入图片
image.src = ''
必须在onload之后再进行图片渲染，否则不会渲染
image.onload = function(){
ctx.drawImage(image,100,100)
}
| 方法（变形） | 意义 |
|---|
| ctx.save() | 保存当前状态，不带参数 | | ctx.restore() | 保存当前状态，不带参数 |
绘图具体参考
|