JS学习笔记

Talk is cheap. Show me the code.

JavaScript

JavaScript

JS 基础

JS 简介

直接写入html进行输出
对事件进行反应
改变页面内容
改变HTML图像
改变HTML样式
验证输入

JS 用法

在HTML中必须位于<script>和</script>中
可以放在<body>和<head>中
文档已加载后使用它（如函数），则覆盖整个文档
使用外部文件
```
<script src="myScript.js"></script>
```

JS 输出

显示数据
- window.alert()---->警告框
- document.write()-->写入HTML文档
- innerHTML--------->写入HTML元素
- console.log()----->写入控制台
查找元素document.getElementById(id)
写入时间document.write(data())

JS 语法

var定义字符串
语句分号分隔
注释
- 单行//
- 多行/*&*/

注：JS中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)

JS 语句

语法

    // 语句标识符
    break  
    continue
    try
    catch
    do...while
    for...in
    function
    if...else
    return
    switch //基于不同条件来执行不同动作
    throw //抛出错误
    while

    //换行用 \
    //错误换行示例
    document.write \ 
    ("你好世界!");
    //正确
    document.write("你好 \
    世界!");

执行前对所有代码进行编译
没有值的变量为undefined

JS 数据类型

动态类型，变量可用作不同的类型
Undefined变量不含有值;null清空变量。
变量均为对象
new:声明类型
6种数据类型
1. string
2. number
3. boolean
4. object
5. function
6. symbol
3种对象类型：
1. Object
2. Date
3. Array
2个不包含任何值的数据类型：
1. null
2. undefined

constructor属性

返回js变量的构造函数

类型转换

String() 转换为字符串
- .toString() 等同
- toExponential() 把对象的值转换为指数计数法。
- toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。
- toPrecision() 把数字格式化为指定的长度。
Date方法
Number() 字符串转换为数字
- 不是数字的字符串转换为NaN
一元运算符 +
- Operator + 可用于将变量转换为数字
- 不能转换，为NaN
日期转数字
- Number()
- getTime()
自动转换为字符串
- 输出对象或变量时，自动调用toString
  - {name:"Jomheo"}-->"[object:object]"
  - [1,2,3,4,5,6]---->"1,2,3,4,5,6"

Tips:
1. 只有空字符串转换为bool才是false
2. 空列表转换为bool也是true
3. NaN 与任何值都不相等，包括 NaN 本身

JS 对象

键值对
可以定义函数methodName : function{//code}
objectName.methodName:(不加括号)输出函数代码

JS 函数

关键字function
值赋给未声明的变量，将作为window的属性
非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量
全局变量是window对象

JS 事件

onchange 元素改变
onclick 点击
onmouseover 移动鼠标
onmouseout 移开鼠标
onkeydown 按下键盘
onload 已完成页面加载

JS 字符串

\ 转义字符
.length 字符串长度
\b 退格
\f 翻页
typeof x打印x的数据类型
Tips：不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用
=== 为绝对相等，即数据类型与值都必须相等
字符串属性

属性描述

constructor 常见字符串属性的函数

length 字符串的长度

prototype 允许向对象添加属性和方法
数字与字符串相加，结果为字符串

属性	描述
constructor	常见字符串属性的函数
length	字符串的长度
prototype	允许向对象添加属性和方法

JS 运算符

&& || !

和或非

voteable=(age<18)?"年龄太小":"年龄已达到";

JS 条件语句

if ..else
if .. else if .. else

//switch语句
switch(n)
{
    case 1:
        code1
    case 2:
        code2
    ...
    default:
        codex
}
//switch的判断是`===`类型的判断

JS 循环

for...in 循环会自动跳过那些没被赋值的元素，而 for 循环则不会，它会显示出 undefined
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块

语法

label:
    statements
break labelname; 
 
continue labelname;

JS typeof

typeof varname
数组是特殊的对象类型
null:
- 只有一个值的特殊类型，标识空对象引用
- typeof 检测结果为object
undefined:
没有设置值的变量

null与undefined:

typeof undefined    // undefined
typeof null         // object
null === undefined  // false
null == undefined   // true

正则表达式

修饰符
- i 忽略大小写
- g 全局匹配
- m 多行匹配

模式

括号
- [abc] : []之间的字符
- [0-9] : 0-9之间的数字
- (x|y) : 任何以|分隔的选项
元字符
- \d : 数字
- \s : 空白字符
- \b : 单词边界
- \uxxxx : 以十六进制数xxxx规定的Unicode字符
量词
- n+ : 至少一个n的字符串
- n* : 零个或多个n的字符串
- n? : 零个或一个n的字符串

方法

test()
- 检测字符串是否匹配某个模式
- return true or false
exec()
- 检索字符串中的正则的匹配

JS 异常

try
catch
finally
throw
- 创建或抛出异常
- throw exception

JS 调试

console.lod()
断点
debugger关键字

JS 变量提升

变量可以先使用再声明
变量提升：函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部
只有声明的变量会提升，初始化的不会

JS 严格模式

"use strict;"
不允许删除变量或对象
不允许删除函数
- delete func()
不允许变量重名
不允许使用八进制
不允许使用转义字符
不允许对只读属性赋值
不允许对一个使用getter方法读取的属性进行赋值
不允许删除一个不允许删除的属性
变量名不能使用"eval"|"arguements"字符串
eval()创建的变量不能被调用
禁止this关键字指向全局变量
不允许使用以下语句：
```
with (Math){x = cos(2)};
```

新增关键字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield

Tips

"use strict" 指令只允许出现在脚本或函数的开头

使用误区

数据都是以 64 位浮点型数据(float) 来存储
switch用===进行比较
允许在字符串中使用断行
- 直接使用回车换行报错
  - 加上\
不用对return语句进行断行
不支持使用名字来索引数组
用名字作为索引，当访问数组时，会把数组重新定义为标准对象,之后就不能使用数组的方法和属性
-定义数组元素/对象，最后不能添加逗号
null 和 undefined
- null 用于对象, undefined 用于变量，属性和方法。
- 对象只有被定义才有可能为 null，否则为 undefined
- 测试对象是否存在
```
if (typeof myObj !== "undefined" && myObj !== null) 
```
一般各个代码块的作用域是全局的

JS 表单

HTML 约束验证
- disabled
- max
- min
- pattern
- required
- type
约束验证CSS伪类选择器
- :disabled
- :invalid
- :optional
- :valid
.indexOf('str')检索字符位置
.lastindexOf('str')检索字符最后位置

JS 验证API

约束验证DOM方法
checkValidity() input元素数据合法返回true，否则false

setCustomValidity()

//返回是否维数字
//parseFloat()返回浮点数，isFinite检测数据是否为有限的
return !isNaN(parseFloat(n)) && isFinite(n);

约束验证DOM属性

validity 布尔属性，检测input是否合法
validationMessage 浏览器错误信息
willValidate 指定input是否需要验证

Validity(以下为设置为true之后)

customError 设置了自定义validity 的信息
patternMismatch元素的值不匹配它的模式属性
rangeOverflow 大于设置的最大值
rangeUnderflow 小于设置的最小值
stepMismatch 不按照规定的step属性设置
tooLog 超过了maxLength属性设置的长度
typeMismatch 值不是预期匹配的类型
valueMissing (required属性)没有值
valid 元素的值合法

JS this关键字

面向对象语言中this标识当前对象的引用
JS中this
- 方法中，表示方法所属的对象
- 单独使用，表示全局对象
- 函数中，表示全局对象
- 函数中，严格模式下，this是undefined
- 事件中，表示接受事件的元素
- 类似于call()和appley()方法可以将this引用到任何对象，显示函数绑定

JS let和const

const

let声明的变量只在let命令所在的代码块内有效
let关键字声明的全局作用域变量不属于window对象
相同的作用域或块级作用域
1. 不能用let重置var
2. 不能用let重置let
3. 不能用var重置let
变量提升
- var变量可以在使用后声明
- let不能先使用再声明

const

声明时必须初始化，并且初始化后不许修改
块级作用域
不能和所在作用域其他变量或者函数有相同名称
定义的数组和对象可变

JS JSON

//字符串转换为JS对象
var obj = JSON.parse()
//JS转换为JSON
JSON.stringify()

JS void

# 和 javascript:void(0)
- # 默认的锚是网页上端
- 后者表示死链接

JS Promise

```js
// 异步
setTimeout(things,time) // time毫秒
// Promise
new Promise(function (resolve, reject) {
    // The things you're going to do ....
});
```

更加优雅的书写复杂任务
.then()
- 正常执行序列
.catch()
- 异常处理序列
.finally()
- 最后一定会执行的序列

Tips

正常执行then，有任何异常跳掉catch序列
resolve放置一个参数向下一个then传递
reject传递异常给catch函数处理
- 若then返回的是Promise对象，则下一个then将相对于这个返回的Promise进行操作
resolve和reject作用域只有起始函数，不包括then以及其他序列

resolve和reject不能使起始函数停止运行，必须有return

// Promise函数
function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
// 功能实现
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

// 异步函数
async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

JS 函数

尽量避免使用new关键字
```
function ("a","b", "return a* b")
```
使用表达式定义函数时无法提升

自调用函数

(function () {
    var x = 'hello!!';
})()

函数可以作为一个值使用
函数是对象
- arguements.length返回参数个数
- functionName.toString()

箭头函数

```js
    (*params) => {funcCont}
```

部门箭头函数都没有自己的this，不适合定义对象的方法
默认绑定外层的this值
箭头函数不能提升
const比var更安全
如果函数只有一个语句，则可以省略return和{}

Tips

函数定义作为对象的属性，称之为对象方法。
函数如果用于创建新的对象，称之为对象的构造函数

JS 函数参数

参数规则

显式参数没有指定数据类型
隐式参数没有类型检测
隐式参数个数没有进行检测

过多参数，无法引用，用arguments对象调用
y = y || 0
functionName(x, y = 10){}
argumens对象包含函数调用的参数数组

JS函数调用

函数作为对象方法调用，会使得this的值成为对象本身
如果函数调用前使用了new关键字，则是调用构造函数

作为函数方法调用函数

call()和apply()是预定义的函数方法，用于调用函数
对象本身作为第一个参数，apply传入的是一个参数数组，call作为call的参数传入
strict mode，调用第一个参数会成为this的值
non-strict mode。第一个参数的值是null或undefined

JS HTML DOM

DOM 简介

DOM:Document Object Model文档对象模型
id：documentgetElementById(idname)

// id为main里边所有的p元素
var x = document.getElementById('main');
var y = getElementByTagName('p');

class：document.getElementByClassName(classname)

DOM HTML

改变html内容

document.getElementById(idname).innerHTML = 'newtext';

改变html属性

document.getELementById(idname).attribute = 'newContent'

改变HTML样式

// idName  ： id名称
// property： 属性名称
document.getElementById(idName).style.property = 新样式

DOM 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发
onchange对输入字段的验证
onmouseover 和 onmouseout 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分
- 点击鼠标，触发onmousedown，释放时，触发onmouseup，最后，完成时，触发onclick

DOM EventListener

addEventListener()方法

向指定元素添加事件句柄
- 添加的事件句柄不会覆盖已存在的事件句柄
- 用 removeEventListener() 方法来移除事件的监听

语法

element.addEventListener(event, function, useCapture);
// 第一个参数是事件的类型
// 第二个参数是事件触发后调用的函数
// 用布尔值用于描述事件是冒泡还是捕获，可选参数
    //默认值false即冒泡传递，true使用捕获传递。
    // 冒泡 中，内部元素的事件会先被触发
    // 捕获 中，外部元素的事件会先被触发

不使用on前缀，如click，mouseover，mouseup

math.random() 随机数

DOM 元素

element.insertBefore(para, child); 添加到child前的位置
element.appendChild(para); 添加新元素到尾部
parent.removeChild(child); 移除已存在的元素
- child.parentNode.removeChild(child);
parent.replaceChild(para, child); 替换html元素

DOM collection

getElementByTagName()方法返回HTMLCollection对象
- length属性
HTMLCollection不是一个数组

DOM NoedeList

是一个文档中获取的节点列表(集合)
类似于HTMLCollection
旧版本浏览器的方法返回的是NodeList，而不是HTMLCollection
所有的浏览器的childNoedes属性返回的是NodeList对象
大部分浏览器的querySelectorAll()返回NodeList对象

HTMLCollection 与 NodeList 的区别

HTMLCollection是HTML元素的集合
NodeList是一个文档节点的集合
NodeList与HTMLCollection都与数组对象类似
- 可以使用索引获取元素
- 都有length
HTMLCollection元素可以通过name，id或索引来获取
NodeList只能通过索引获取
NodeList对象包含属性节点和文本节点

JS 对象

简介

JS中所有的事物都是对象
JS允许自定义对象
对象有属性和方法

创建JS对象

Object定义并创建对象
函数定义对象，然后创建新的对象实例

使用Object

使用情况：
- null|undefined：创建返回一个空对象
- 引用类型：返回这个值，经他们复制的变量保有与源对象相同的引用地址
- 非构造函数：Object行为等同于new Object()
```
// 以构造函数形式来调用
new Object([value ])
```

对象构造器

```js
function person(first, lastname, age){
    this.firstname = firstname;
    this.lastname = lastname;
    this.age = age  ; 
}
```

this通常指向的是我们正在执行的函数本身，或者函数指向的对象(运行时)

JS 类

JS 面向对象
基于 prototype，不是基于类

JS 对象可变

通过引用来传递
修改引用，对象的属性也会变

prototype

已存在的对象构造器中不能添加新属性

可以通过prototype添加

objectName.prototype.propertyName = FuncOrValue

Number 对象

只有一种数字类型
不使用小数点或者指数计数法，数字最多表示15位
小数的最大位数是17
前缀为0，八进制
前缀0x，十六进制
进制转换
- .toString(2/8/16/10)
infinity 无穷大
NaN 非数字
- isNaN() 判断是否为NaN
- 除以0是无穷大，是一个数字

属性

属性	描述
.MAX_VALUE	最大值
.MIN_VALUE	最小值
.NaN	非数字
.NEGATIVE_INFINITY	负无穷
.POSITIVE_INFINITY	正无穷
.EPSILON	2^-52
.MIN_SAFE_INTEGER	最小安全整数
.MAX_SAFE_INTEGER	最大安全整数

方法

方法	描述
.parseFloat()	转换为浮点型
.parseInt()	转换为整型
.isFinite()	是否为有线数字
.isInteger()	是否为整数
.isNaN()	是否为isNaN()
.isSafeINteger()	是否为安全整数

数字类型原型方法

方法	描述
toExponential()	指数形式字符串
toFixed(n)	n位小数
toPrecision(n)	n精度

String 对象

索引取值
- 从0开始
\转移符
.length 字符串长度
.insedOf('strname') 索引字符[串]
- 未找到，返回-1
- lastIndexOf() 从末尾查找
- 查找从0开始
.match() 返回匹配的字符
.replace('old','new')
大小写转换
- .toUpperCase()
- .toLowerCase()
分割为数组.split(',')
特殊字符
1. \n 换行
2. \r 回车
3. \t tab
4. \b 空格
5. \f 换页

Date 对象

getFullYear()
getTime() 时间戳
setFullYear() 设置具体的日期
toUTCString() 将日期转换为字符串
getDay()

Display a colck

function startTime(){
    var today=new Date();
    var h=today.getHours();
    var m=today.getMinutes();
    var s=today.getSeconds();// 在小于10的数字前加一个‘0’
    m=checkTime(m);
    s=checkTime(s);
    document.getElementById('disTime').innerHTML=h+":"+m+":"+s;
    t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
    if (i<10){
        i="0" + i;
    }
    return i;
}

创建日期

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换

Array 对象

方法和属性
- .length()
- .indexOf('')
合并数组
- 不修改原数组
- .concat()
用数组的元素组成字符串
- 不修改原数组
- .join()
删除数组最后一个元素
- 数组被修改
- .pop()
数组末尾添加新的元素
- 数组被修改
- .push('paramName')
反转数组元素顺序
- .reverse()
删除数组第一个元素
- 不修改原数组
- .shift()
从数组中选取元素
- .slice(start,end)
排序
1. 字母顺序升序
  - .sort()
2. 数字顺序升序
  - .sort(function(a, b){return a-b})
3. 数字顺序降序
  - .sort(function(a, b){return b-a})
在数组的指定位置添加元素
- .splice(a,b,'A','B','C',..)
- 说明：在第a个元素后插入A，将'A'之后的b个元素替换成'B','C'...
转换为字符串
- .toString.()
数组开头添加新的元素
- 数组被修改
- .unshift()
- 可以加多个

数组遍历方式

in：每遍历一次数组指针向后移动一位, 并得到当前数组元素值的下标, 可以通过 arrayName[key] 来访问数组元素值
of：每遍历一次数组指针向后移动一位, 并得到当前数组元素的值, 处理二维数组时极为方便

Boolean 对象

如果布尔对象无初始值或者其值为一下的任一个，则对象的值为false
- 0
- 0
- null
- ""
- false
- undefined
- NaN

Math 对象

Math对象无需定义
方法
- Math.round(num)：取最接近num的整数
- Math.random()
- Math.max()
- Math.min()
- Math.floor() 取整
常量使用方法
- Math.E
- Math.PI
- Math.SQRT2 根号2
- Math.SQRT1_2 COS45°
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E

RegExp 对象

```js
var patt=new RegExp(pattern,modifiers);
// 以上方法需要常规的字符转义规则
    // 有转义作为正则表达式处理
    // 无转义作为字符串处理
var patt=/pattern/modifiers;
//modifiers表示是否是全局，区分大小写等
str.match(patt)
```

modifiers:
- i:不区分大小写
- g:全文搜索
test()
- pattern1.test('str')
exec()
- 检索字符串中的指定值
- 若无匹配，返回null

JS Brower BOM

Window

window.innerHeight(包括滚动条)
window.innerWidth (包括滚动条)
其他方法
- window.open()
- window.close()
- window.moveTo()
- window.resizeTo()
定义全局变量与在 window 对象上直接定义属性差别
1. 全局变量不能通过 delete 操作符删除；而 window 属性上定义的变量可以通过 delete 删除
2. 访问未声明的变量会抛出错误，但是通过查询 window 对象，可以知道某个可能未声明的变量是否存在。
3. 有些自执行函数里面的变量，想要外部也访问到的话，在 window 对象上直接定义属性。

Window Screen

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.colorDepth - 色彩深度
screen.pixelDepth - 色彩分辨率

Window Location

可以不使用window前缀

location.hostname web主机的域名
location.pathname 当前页面路径与文件名
location.port web主机端口
location.protocol 使用的协议
location.href 页面的完整URL
location.assign(url) 加载新的文档
location.replace(url) 代替当前页面

Window History

history.back() 后退
history.forward() 前进
history.go() 前进|后退|刷新
- 1 前进1个页面
- -1 后退1个页面
- 0 刷新

Window Navigator

navigator 对象的信息具有误导性，不应该被用于检测浏览器版本

弹窗

alert("Sth.")
confirm("Sth.")
prompt("Sth.","defaultvalue")

计时事件

setInterval

setInterval() 间隔指定的毫秒数不停地执行指定的代码
```
window.setInterval("js function",milliseconds);
```
clearInterval用于停止setInterval方法执行的代码
```
window.clearInterval(intervalVariable)
```

setTimeout

myVar= window.setTimeout("javascript function", milliseconds);

clearTimeout
```
clearTimeout(myVar)
```

创建cookie

// 旧的cookie被覆盖
document.cookie="username=John; expires=Thu, 18 Dec 2033 0:00:00 GMT; path=/";
// expires:超时时间
// path：cookie路径

读取cookie
- document.cookie
删除cookie
- 修改expires参数为以前的时间

posted @ 2021-12-19 22:12 TICSMC 阅读(34) 评论(0) 收藏举报

刷新页面返回顶部