Javascript

介绍Javascript的语法基础、以及在Web运行环境中的特点

1.数据类型

: ①基本数据类型

布尔值（boolean）: 定性（true | false）

数字（number）: 定量

字符串（string）: 描述（用单引号或双引号括起来）

: ②复合数据类型

对象（object）: 键值对集合，键: 属性名

数组（object）: 键值对集合，键: 下标

函数（function）: 逻辑块，需要调用

未定义（undefined）: 未声明的变量

2.类型转换

: ①数字转字符串

自动转换: var 字符串 = 数字 + '' ;

限定小数位数: var 字符串 = 数字.toFixed(小数位数) ;

限定有效数字: var 字符串 = 数字.toPrecision(有效数字位数);

限定指数形式中的小数位数: var 字符串 = 数字.toExponential(指数形式中的小数位数);

: ②字符串转数字

自动转换: var 数字 = 字符串 - 0 ;

整数转换: var 数字 = parseInt(字符串) ;

小数转换: var 数字 = parseFloat(字符串) ;

: ③布尔值自动转换

布尔值在数字环境: true -> 1, false -> 0

布尔值在字符串环境: true -> 'true', false -> 'false'

数字在布尔值环境: 0或NaN -> false, 其余 -> true

字符串在布尔值环境: 空字符串 -> false, 其余 -> true

object在布尔值环境: null和undefined -> false, 其余 -> true

3.语句

: ①顺序

表达式: 数学运算，函数调用

语句块: { ... }

: ②分支

if ... else if ... else ...: 含优先级、通过布尔值来判断

switch() { case: ... }: 不含优先级、通过值匹配来判断

: ③循环

while(): 条件循环

for( ; ; ): 计数器循环

for(key in object): 集合枚举（key是集合元素的键）

: ④跳转

break: 跳出循环或switch

continue: 开始下一次循环

return: 跳出函数

: ⑤异常处理

throw(): 抛出异常

try ... catch ... finally ...: 捕获异常

4.函数

: ①定义

命名方式: function f(){ ... }

匿名方式: var f = function() { ... }

: ②调用

静态调用: 调用对象.f()

动态调用: f.call(调用对象,参数0,1, ...) / f.apply( ... )

: 函数作为属性所属的对象，被称作调用对象，在函数内部由this指代

: ③参数

实参: 调用时传递的参数

形参: 定义的参数

: 实参少于形参时，未映射的形参值是undefined

: 实参多于形参时，可用arguments[下标]访问所有的实参

: ④闭包

概念: 一个函数，它使用了外部变量

类比理解: 面向对象设计模式中的Command模式

5.对象

: ①创建

静态: var o = { "name1":"value1", "name2":"value2", ... }

动态: var o = new 构造函数()

: ②调用

静态: o.name1

动态: o["name1"]

: ③Object属性和方法

o.constructor: 引用构造函数

o.prototype: 引用原型对象

o.toString(): 转换为字符串

o.valueOf(): 转换为数字

o.hasOwnProperty('属性名'): 检查对象自己的属性（Object的除外）

A.isPrototypeOf(B): A是否为B的原型对象

6.模拟类

: ①定义类结构

实例属性: var MyClass = function( x ){ this.实例属性1 = x; }

实例方法: MyClass.prototype.实例方法1 = function(){ }

静态属性: MyClass.静态属性1 = x;

静态方法: MyClass.静态方法1 = function(){ }

构造函数: MyClass

: this 指代类的实例，在构造函数和实例方法中被引用

: ②类继承

继承实例属性: var InheritClass = function( x, y ){ MyClass.Call(this, x); this.实例属性2 = y; }

继承实例方法: InheritClass.prototype = new InheritClass();

指定构造函数: InheritClass.prototype.constructor = InheritClass;

demo

7.模块和名字空间

名字空间: 避免变量命名冲突

: 静态变量或方法所属的对象，被当作命名空间

模块: 以功能为单位，划分代码

: (function(){ ... })();

1.Array

: ①创建

静态: var a = [ "value1", "value2", ... ]

动态: var a = new Array()

: ②调用

动态: o[序号]

: ③Array属性和方法

a.length: 数组的长度

a.join('连字符'): 连接数组元素，组成一个字符串

a.reverse(): 颠倒元素的顺序，返回新数组

a.sort(function(a,b){ return 数字; }): 对数组排序（函数描述规则）

a.concat([ 数组2 ]): 将第二个数组的元素挂到第一个数组后面

a.slice(起始位置，[结束位置]): 截取一段元素

a.splice(起始位置，删除几个，[新元素, ...]): 在指定位置，用新元素替换旧元素

a.push(): 尾部入栈（返回数组长度）

a.pop(): 尾部出栈（返回出栈元素）

a.unshift(): 头部入栈（返回数组长度）

a.shift(): 头部出栈（返回出栈元素）

2.String

: ①创建

静态: var s = "字符串"

: ②String属性和方法

s.length: 字符串的长度

s.anchor('name'): 创建锚：<a name="名称">文本</a>

s.link('href'): 创建链接：<a href="http://www.baidu.com">abc</a>

s.charAt(位置): 返回指定位置的字符

s.indexOf(文本，[起始位置]): 从前向后，检索文本在字符串中的位置

s.lastIndexOf(文本，[起始位置]): 从后向前，检索文本在字符串中的位置

s.slice(起始位置，[结束位置]): 截取一段字符

s.split('separator'): 把字符串分割成数组

3.Number

: ①创建

静态: var n = 0

: ②Number静态常量

最大的数: Number.MAX_VALUE

最小的数: Number.MIN_VALUE

非数字: Number.NaN

负无穷大: Number.NEGATIVE_INFINITY

正无穷大: Number.POSITIVE_INFINITY

: ③Number方法

n.toFixed(小数位数): 四舍五入表示法

n.toExponential(小数位数): 指数计数表示法

n.toPrecision(有效数字个数): 有效数字表示法

4.Date

: ①创建

动态: var date = new Date()

: ②Date属性和方法

new Date(): 此刻的日期和时间

date.getDate(): 本月中的第几天

date.getDay(): 本周中的第几天（周日=0, ...）

date.getMonth(): 本年中的第几个月（一月=0, ...）

date.getFullYear(): 年份

date.getHours(): 小时

date.getMinutes(): 分钟

date.getSeconds(): 秒数

date.getMilliseconds(): 毫秒数

date.toLocaleString(): 根据本地时间格式，转换为字符串

date.toLocaleDateString(): 根据本地时间格式，将日期转换为字符串

date.toLocaleTimeString(): 根据本地时间格式，将时间转换为字符串

: ③日期比较

做减法: date1-date2 > 0 ? 'date1大' : 'date2大'

5.Math

: ①Math静态常量

Math.E: e（自然对数的常量）

Math.PI: π（圆周率）

Math.SQRT2: 2的平方根

: ②Math静态方法

Math.abs(x): 绝对值

Math.max(x...): 最大值

Math.min(x...): 最小值

Math.ceil(x): 向上取整数

Math.floor(x): 向下取整数

Math.round(x): 四舍五入

Math.random(): 随机数（0 - 1）

Math.exp(x): e的x次幂

Math.log(x): x的自然对数

Math.pow(x,y): x的y次幂

Math.sqrt(x): 平方根

Math.sin(x): 正弦

Math.cos(x): 余弦

Math.tan(x): 正切

6.Date

: ①创建

动态: var date = new Date()

: ②Date属性和方法

new Date(): 此刻的日期和时间

date.getDate(): 本月中的第几天

date.getDay(): 本周中的第几天（周日=0, ...）

date.getMonth(): 本年中的第几个月（一月=0, ...）

date.getFullYear(): 年份

date.getHours(): 小时

date.getMinutes(): 分钟

date.getSeconds(): 秒数

date.getMilliseconds(): 毫秒数

date.toLocaleString(): 根据本地时间格式，转换为字符串

date.toLocaleDateString(): 根据本地时间格式，将日期转换为字符串

date.toLocaleTimeString(): 根据本地时间格式，将时间转换为字符串

: ③日期比较

做减法: date1-date2 > 0 ? 'date1大' : 'date2大'

7.RegExp

: ①创建

静态: var regExp = /正则表达式/[修饰符]

动态: var regExp = new RegExp(正则表达式,[修饰符])

: ②修饰符

g: 全局匹配（找所有的）

i: 忽略大小写

m: 多行匹配

: ③RegExp属性

regExp.global: 是否全局匹配（返回true / false）

regExp.ignoreCase: 是否忽略大小写（返回true / false）

regExp.multiline: 是否多行匹配（返回true / false）

regExp.source: 正则表达式的原始文本

regExp.lastIndex: 下一次匹配的起始位置

: ④RegExp方法

regExp.compile(新的正则表达式): 修改正则表达式后，重新编译

regExp.exec(要检索的字符串): 找出匹配的元素（返回找到的数组、第一个元素的位置）

regExp.test(要检索的字符串): 是否存在匹配的元素（返回true / false）

1.js对象的文本形式

外部表现: 字符串

内部结构: js数组

基本元素: 键值对（都用双引号包裹）

2.对象与文本互相转换

序列化: JSON.stringify()

反序列化: JSON.parse()

1.browser浏览器

: ①环境：使用全局对象window，包含当前环境的所有信息

window: 当前窗口

: ②运行：单线程运行

加载过程: 按照抒写顺序，一边加载一边执行

事件驱动阶段: 事件句柄接受DOM事件，用挂接的js函数来响应

: ③安全：不能访问所在计算机上、除浏览器之外的资源

同源策略: 只有window.document.domain相同的网页，才可以共享数据

跨站脚本攻击(XSS): 将脚本伪装成输入，在网站的疏忽下运行

2.window当前窗口

: ①属性

name: 窗口名称

opener: 打开当前窗口的窗口

location: 当前窗口的地址

history: 当前窗口的浏览历史

screen: 显示器的屏幕

document: 窗口加载的Html文档（DOM）

: ②方法

open(url,窗口名,'属性设置'): 打开新窗口

close(): 关闭当前窗口

focus(): 当前窗口锁定键盘焦点

moveTo() / moveBy(): 移动当前窗口

scrollTo() / scrollBy(): 滚动当前窗口的位置

resizeTo() / resizeBy(): 调整当前窗口的尺寸

addEventListener() / removeEventListener(): 管理当前窗口的事件句柄

: ③特别说明

: window上挂接的属性，可以直接引用（省略window.）

: 所有直接创建的变量，都默认被挂在window上

3.window.location地址栏

: ①属性

href: 完整的url地址

protocal: url的协议部分

host: url的主机名和端口

hostname: url的主机名部分

port: url的端口部分

pathname: url的路径部分

search: url的查询部分

hash: url的锚部分

: ②方法

reload(true/false): 重新装载当前文档(是/否强制刷新)

replace(url): 装载新的地址(旧地址不记入history)

4.window.history浏览历史

: ①方法

back(): 后退

forward(): 前进

go(次数): 前进/后退的次数(正数前进/负数后退)

5.window.screen显示内容的屏幕

: ①属性

availHeight: 可用屏幕高度px

availWidth: 可用屏幕宽度px

colorDepth: 颜色深度

height: 屏幕高度px

width: 屏幕宽度px

6.window.document文档对象DOM

: ①属性

cookie: 设置或返回与当前文档有关的所有cookie

domain: 当前文档的域名

referrer: 前一个文档的url

title: 当前文档的标题

: ②方法

getElementById('Id'): 根据Id查找元素

getElementsByName('tag'): 根据tag查找元素

createElement('tag'): 创建标签节点

createAttribute(属性名): 创建属性节点

createTextNode(文本): 创建文本节点

7.document.cookie

: ①属性

expires: 生存期：截止日期（绝对时间）

max-age: 生存期：多少秒（相对时间）

domain: 可见范围：'域名'

path: 可见范围：'/目录'下

secure: 是否使用https传输

8.web存储

: ①两类存储

localStorage: 生存期：一直都在

sessionStorage: 生存期：会话期间

: ②使用方法（与js对象类似）

增、查、改: localStorage['键']

删: localStorage.removeItem('键')

9.事件处理

: ①传播过程

捕捉阶段: document对象 --> 叶子祖先 --> 目标节点

找到目标: 调用事件句柄 + 浏览器执行默认行为

起泡阶段: document对象 <-- 叶子祖先 <-- 目标节点

阻止事件传播: stopPropagation()

取消浏览器默认行为: preventDefault()

: ②响应过程：元素订阅事件，当事件在传播过程中经过它时，用指定的函数来响应（可订阅多次）

注册事件句柄: 元素.addEventListener('eventType',响应函数,是否捕捉事件)

触发方式: 设备触发 || 过程触发 || 代码调用触发

响应方式: 随即调用响应函数，但顺序不确定

10.计时器

: ①在指定毫秒数过去后执行

定义TimeOut计时器: var t = setTimeOut('语句',毫秒数)

删除TimeOut计时器: clearTimeOut(t)

: ②在指定毫秒数的间隔里重复调用

定义Interval计时器: var t = setInterval('语句',毫秒数)

删除Interval计时器: clearInterval(t)

11.navigator.geolocation地理位置

: ①方法

获取当前位置: .getCurrentPosition(function(position) {}, function(error) {})

跟踪实时位置: .watchPosition(function(position) {}, function(error) {})

: ②position对象的属性

经度: .coords.longitude

纬度: .coords.latitude

海拔: .coords.altitude

响应时间: .timestamp

: ③error.code的枚举

error.PERMISSION_DENIED: 用户拒绝分享位置信息

error.POSITION_UNAVAILABLE: 位置信息不可用

error.TIMEOUT: 超时

error.UNKNOWN_ERROR: 未知错误

12.拖放元素

例子

13.web worker

后台运行的js: 相当于开了一个线程

: ①工作原理

创建子线程: w = new Worker('workers_thread.js');

子线程定时发送消息: 在文件中调用postMessage(data);

主线程监听消息: w.onmessage = function(event) { event.data; }

结束子线程: w.terminate();

[可参考]: https://www.w3school.com.cn/html/html5_webworkers.asp

14.IndexedDB浏览器数据库

web sql: 为解决前端数据量大的问题,内置了一个用sql访问的小型数据库

[可参考]: https://www.ibm.com/developerworks/cn/web/1112_shiwei_html5sqlorm/index.html

15.Server-Sent Events

web sql: 服务器向浏览器发送数据

: ①工作原理

浏览器监听网站: var source=new EventSource('http://abc.com/action');

监听消息: source.onmessage = function(event) { event.data; }

[可参考]: https://www.runoob.com/html/html5-serversentevents.html

16.Web Socket全双工通信

应用场景: 实时通信

: ①工作原理

创建连接: var socket = new WebSocket(url, [protocol] );

发消息: socket.send(data);

收消息: socket.onmessage = function(event) { event.data; }

关闭连接: socket.close();

[可参考]: https://www.runoob.com/html/html5-websocket.html

1.背景

同源策略: 浏览器中的js,只能使用来自同一个源（协议://域名:端口）的数据（json等）

同源的目的: 浏览器保护每个网站的数据安全,不轻易让其它网站使用

CORS: 支持跨域的W3C标准（由网站自己决定:哪些网站能使用我的数据）

2.CORS原理

浏览器: 如果检测到ajax请求跨域,就附加请求或请求头,询问该网站是否允许跨域访问

网站: 通过响应头,告诉浏览器允许哪些网站访问、是否接收cookie

3.CORS相应头的解释

Access-Control-Allow-Origin: 允许哪些网站访问

Access-Control-Allow-Methods: 允许的请求方式

Access-Control-Allow-Credentials: 是否接收cookie

Access-Control-Expose-Headers: 允许浏览器读取的header（默认只能从响应中取到6个:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma）

Access-Control-Max-Age: 预检请求的有效期,默认1728000秒（20天）

1.js仅依赖于解释引擎（比如:nodejs）,浏览器在这个基础上增加了更多信息（BOM）、更多限制（跨域访问）
2.数组和对象都可以看成键值对集合，数组将下标编号编号作为键、对象将属性名称作为键
3.异常是一个信号，通知运行环境，程序发生了意外
4.javascript的每个函数都可以调用的数据：外部变量、实参、局部变量