js基础

在线工具库：https://123.w3cschool.cn/webtools

一 . js简介

1.概念

• javascript是世界上最流行的脚本语言。js是属于web的语言，他适合与PC，笔记本电脑，平板电脑和移动电话。ja被设计成向HTNL页面增加交互性。
  • 脚本语言：指的是他不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”
• 通过嵌入HTML来实现各种酷炫的动态效果，为用户提供赏心悦目的浏览效果。所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。
• javaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• javascript也是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只是用来做一些数学和逻辑运算。js本身不提供任何与I/O(输入/输出）相关的API，主要靠宿主环境（host）提供，所以js只适合嵌入更大型的应用程序环境，去调用宿主环境提供的底层API。目前，已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境，也就是Node项目
• 从语法角度看，javascript语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过js控制这些功能。但是，js并不是纯粹的“面型对象语言”，还支持其他编程范式（比如函数式编程）

2.支持编译运行。

• JavaScript 语言本身，虽然是一种解释型语言，但是在现代浏览器中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接近二进制程序。而且，JavaScript 引擎正在快速发展，性能将越来越好。
• 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近原生二进制代码的运行速度。各种语言（主要是 C 和 C++）通过编译成 WebAssembly，就可以在浏览器里面运行。

3.事件驱动和非阻塞式设计

• JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式（non-blocking）设计，在服务器端适合高并发环境，普通的硬件就可以承受很大的访问量。

4.javascript与java的关系

Java	javascript
强类型	弱类型（同一变量可以存放不同类型的变量（但是始终存放同一类型是良好的编码习惯）

必须在JAVA虚拟机上运行，且事先需要进行编译 不依托编辑器，在浏览器就可以实现，边解释边执行

二 . 输出

1.直接写入HTML输出流

document.write(“输出内容”); 将内容写入HTML文档中

• 你只能在HTNL输出中使用document.write。如果在文档加载完成后使用该方法，会覆盖整个文档。

2.弹出警告框alert

window.alert（“输出内容”）；

3.在指定位置输出innerHTML

var x=document.getElementById(“id名”)；//使用id属性查找元素

x.innerHTML=”输出内容”;//改变内容，写入到HTML元素

4.在控制台上输出

console.log(‘输出内容’)；

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

可以通过在控制台输入console.clear()来实现清空控制台信息。

https://jingyan.baidu.com/article/6dad507505f714a123e36e8a.html

三 . js基本语法

1.语句

• js程序执行单位为行，也就是一行一行地执行一般，每一行就是一个语句。语句是为了完成某种任务而进行的操作（赋值语句），语句以分号结束，分号前没有任何内容，js引擎将其视为空语句
• 表达式（需要得出结果）不需要分号结尾，不然js引擎会将其视为语句，这样会产生一些没有意义的语句

2.js用法

• HTML脚本必须位于标签之间，脚本可放置在body或head标签中
• 如需在HTML页面中插入脚本，请使用script标签，他会告诉js在何处开始和结束
• 引入外部脚本

js区分大小写

3.变量

• 局部变量不声明变量，即不写var，会自动创建全局变量；如果使用var重新声明一个已经存在的变量，是无效的。但第二次声明的时候还进行了赋值，则会覆盖掉前面的值。
• 如果一个变量没有声明就直接使用，js会报错，告诉你变量未定义
• JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。
• 变量是一个名称，字面量是一个值
• JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。
• undefined：声明变量却没赋值的变量，表示“无定义”
• 单行用 / / 注释，多行注释用 /* */
• 当您向变量分配文本值时，应该用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

1 .变量类型

• 值类型
  • 占用空间固定，保存在栈中
  • 保存复制的是值本身
  • 使用typeof检测数据的类型
  • 基本类型数据是值类型
• 引用类型
  • 占用空间不固定，保存在堆中
  • 保存和复制的是指向对象的一个指针
  • 使用instanceof检测数据的类型
  • 使用new（）方法构造出来的对象是引用型的

2.作用域

• 全局变量
  • 在函数体外定义的变量或者在函数体内部定义的无var的变量
  • 在任何位置都可以调用
• 局部变量
  • 在函数体内部用var声明的变量或函数的参数变量
  • 在当前函数体内部调用
• 优先级
  • 同名全局变量 > 参数变量 > 局部变量 > 全局变量
• 特性
  • 忽略块级作用域
  • 全局变量是全局对象的属性
  • 局部变量是调用对象的属性
  • 作用域链
    • 内层函数可以访问外层函数的局部变量
    • 外层函数不能访问内层函数局部变量
  • 生命周期
    • 全局变量：除非被显示删除，否则一直存在
    • 局部变量：自声明起至函数运行完毕或者显示删除
    • 收回机制
      • 标记清除，引用计数

4.数据类型

1.数字 Number

2.字符串String

• 由0个或多个16位Unicode字符组成

• 单引号与双引号不能交叉使用

• 使用length属性访问字符串长度

  • 转义字符算一个字符
  • 无法精确返回双字节字符长度

• 字符串一旦被创建，其值将不能修改，若要改变必须销毁原有字符串

• 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

• 类型转换

  • toString（）使用类型

    ​ 1.number

    ​ 2.boolean

    ​ 3.string

    ​ 4.object

  • eval()：计算字符串表达式的值并以数值形式返回

3.布尔Boolean

• 任何值和布尔值比较时，两边都会转化为Number类型

• [0]用if判断的时候为true，和布尔值比较的时候转换为0。{x:0}用if判断的时候为true，和布尔值比较的时候转换为NaN

• 转换为true

  • 任何非空字符串
  • 任何非0的数值
  • 数组和对象（包括空数组和空对象）

• 转换为false

  • 空字符串
  • 0和NaN
  • null和undefined

4.数组Array

• 对象Object

• 空Null

  • 逻辑上null表示一个空对象的指针，使用typeof检测时会返回object

• 未定义Undefined

  • 使用var声明变量但未初始化
  • 区分空对象指针与尚未定义的变量
  • 对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined

• undefined与null的关系

  • undefined派生于null因此在使用“==”进行比较的时候会返回true
  • 没有必要将变量值声明为undefined
  • 声明空对象的时候应将其值赋值为null

5.非数值NaN(Not a Number)

• 任何涉及NaN的操作都将返回NaN

• NaN与任何数值都不相等包括自身

• 检测isNaN（）

  • 可转换成数值false
  • 不可转换成数值true

6.未定义undefined

• 变量声明了却没有赋值
• 调用函数时，应该提供的参数没有提供，该参数等于undefined
• 对象没有赋值的属性
• 函数没有返回值，默认返回undefined

5.数值转换

1.Number()

• Boolean——(true 1)(false 0)
• null——0
• undefined / { }———NaN (null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN)
• String除数字和空字符串（0）外，其余都是NaN

2.解析parseInt（“要解析的字符串”，转换时使用的基数）

• 忽略前置空格
• 直接找到第一个非空格字符
  • NaN：不是数字字符或符号
  • 如果是数字字符解析所有后续字符，或一直解析直到遇到非数字字符便结束

3.parseFloat（）

• 从第一个字符开始解析，遇到无效浮点格式后结束
• 只有第一个小数点有效，忽略前导0
• 十六进制数始终为0，没有小数点或小数点后全0

6.对象object

• 一组数据或功能的集合
• 声明 var o=new Object（）
• 属性和方法
  • Constructor：保存用于创建当前对象的函数
  • hasOwnProperty（propertyName）：检测给定属性在当前对象实例中是否存在
  • isPrototypeOf（object）检测传入的对象是否为另一个对象的原型
  • propertyisEnumerable（propertyName）检测给定属性是否能用for-in语句枚举
  • toLocalString（）返回对象的字符串表示，该字符串与执行环境的地区对应
  • toString（）返回对象的字符串表示
  • valueOf（）返回对象的字符串，数值或布尔值表示；通常和toString（）的值相同

https://blog.csdn.net/IT_10/article/details/81806665

四 . 数据类型的概述

1.六大数据类型（number,string,boolean,undefined,null,onject)

• 原始类型（primitive type）
  • 不能再细分，最基本的数据类型
  • number，string，boolean
• 合成类型（complex type）
  • 可看作一个存放多个原始类型值的容器
  • 狭义对象（object），数组（array），函数（function）
• undefined和null一般将他们看成两个特殊值
• 狭义的对象（object）和数组是两种不同的数据组合方式，而函数其实是处理数据的方法。js把函数当成一种数据类型，可以像其他类型的数据一样，进行赋值和传递，这为编程带来了很大的灵活性，体现了js作为“函数式语言”的本质
• js的所有数据都可以视为广义的对象。不仅数组和函数属于对象，就连原始值也可用对象方式调用，（不过都是隐式转换，就像输入数值都会隐式转换成字符串数值一样）

2.确定值是什么类型的几种方法

1.typeof运算符

• typeof 123 //“number”
• typeof ‘123’ //“string”
• typeof false //“boolean”
• function f（）{} typeof f //“function”
• typeof undefined //“undefined”（利用这一点，可用来检查一个没有申明的变量而不报错）
• typeof window / { } / [ ] / null //“object”（表明数组本质上只是一种特殊的对象。null的类型也是object，这是由于历史原因造成的）

2.instanceof运算符

• 解决typeof没法区分数组和对象的缺陷
• {}/[] instanceof Object/Array //true
• (function(0{})) instanceof Function //true
• 原始类型 instanceof 各种类型 //一般都是false

3.Object.prototype.toString方法

• Object.prototype.toString.call([1,2,3])
     '[object Array]

4.应用typeof方法写方法

• var toType = function(obj) {
     return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
   }

toType({a: 4}) // "object"
   toType([1, 2, 3]) // "array"
   (function() { return toType(arguments) }()) // "arguments"
   toType(new ReferenceError()) // "error"
   toType(new Date()) // "date"
   toType(/a-z/) // "regexp"
   toType(Math) // "math"
   toType(JSON) // "json"
   toType(new Number(4)) // "number"
   toType(new String("abc")) // "string"
   toType(new Boolean(true)) // "boolean"

• Axel Rauschmayer, Improving the JavaScript typeof operator
• Axel Rauschmayer, Categorizing values in JavaScript

五 . JavaScript函数

1.定义方法

• 静态方法function function nane（){执行代码}
• 动态匿名方法 var 函数名=new Function([“虚参数列表”]，“函数体”)；
• 直接量方法 函数名=function（【虚参列表】）{函数体}

2.调用方法

• 函数作为对象方法调用，会使得 this 的值成为对象本身。

• call()（传入的参数是一系列的参数值，但是从第二个参数开始） 和 apply() （传入的参数只能是由各参数值组成的数组）是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

• 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

• 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

• 在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

• 在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

• 直接调用 函数名（实参列表）

• 在连接中调用

• 在事件中调用 事件类型=“函数名（）”

• 递归调用（在函数体内部调用自身） function 函数名(){代码 函数名（）；}

• 构造函数调用

  • 构造函数中 this 关键字没有任何的值。
    this 的值在函数调用时实例化对象(new object)时创建。

  • 如果函数或者方法调用之前带有关键字new，他就构成构造函数调用。凡是没有形参的构造函数调用都可以省略圆括号 var o=new Object;

  • 立即调用函数（IIFE)

    • 一对圆括号()是一种运算符，跟在函数名之后，表示调用该函数

    • (function(){

      statement

      }())

    • 上面代码的圆括号的用法，function之前的左圆括号是必需的，因为如果不写这个左圆括号，JavaScript解释器会试图将关键字function解析为函数声明语句。而使用圆括号，JavaScript解释器才会正确地将其解析为函数定义表达式。

3.常用方法

• apply：将函数作为对象的方法来调用，将参数传递给该方法
• call：将函数作为对象的方法来调用，将参数传递给该方法
• toString：返回函数的字符串表示

4.arguments对象

• 功能：存放实参的参数列表

• 特性

  • 仅能在函数体内使用
  • 带有下标属性，但并非数组
  • 函数声明时自动初始化

• 属性

  • length：获取函数实参的长度

  • callee ：返回当前正在指向的对象

  • caller：返回调用当前正在执行函数的函数名

  • name属性：返回紧跟在function关键字后的那个函数名

  • toString方法返回函数的源码

  • eval命令的作用是将字符串当作语句执行，eval没有自己的作用域，都是在当前作用域内执行

    eval（‘var a=1’）；

    JavaScript规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。

    (function(){

    ‘use strict’;

    eval(‘var a=1’);

    console.log(a); //ReferenceError: a is not defined

    })();

5.指针标识

• this：指向当前操作对象

• callee：指向参数集合所属函数

• prototype：指向函数附带的原型对象

• constructor：指向创建该函数的构造函数

• JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

• 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

6.函数变量提升

• 全局变量用var命令声明，不管在什么位置声明，变量声明都会被提升头部
• 函数作用域内部也会产生变量提升

7.闭包

• JavaScript的函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量，这就是JavaScript的闭包。 闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
• 闭包的另一个用处，是封装对象的私有属性和私有方法。

8.数组

• 数组属于一种特殊的对象

• 数组长度length属性

  • length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。
  • 将数组清空的一个有效方法，就是将length属性设为0。
  • 如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。
  • 在ECMAScript 5中，可以用Object.defineProperty() 让数组的length属性变成只读。

• 空位

  • 当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位 var arr=【1，，2】
  • 但是，如果最后一个元素后面有逗号，并不会产生空位。数组直接量的语法允许有可选的结尾的逗号，故[,,]只有两个元素而非三个。

• 类数组对象

  • 在JavaScript中，有些对象被称为“类数组对象”。意思是，它们看上去很像数组，可以使用length属性，但是它们并不是数组，无法使用一些数组的方法。

  • 由于类数组对象没有继承自Array.prototype，那就不能在它们上面直接调用数组方法。不过我们可以间接的使用Function.call方法调用。

六 . JavaScript错误处理机制

• javascript解析或执行时，一旦发生错误，引擎就会自动抛出一个错误对象，js提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例 var err=new Error（‘出错了’）；err.message

• Erroe对象的属性

  • message：错误提示信息
  • name：错误名称（非标准属性）
  • stack：错误的堆栈（非标准属性）

• Error的六大派生对象

  • SyntaxError：是解析代码时发生的错误（变量名错误或者缺少括号）
  • ReferenceError：是引用一个不存在的变量时发生的的错误或者将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值（console.log()=1)
  • RangeError:是当一个值超过有效范围时发生的错误，主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值
    • new Array(-1)
    • (1234).toExponential(21)//toExponential() argument must be between 0 and 20
  • TypeError:是参数或变量不是预期类型时发生的错误。比如，对字符串，布尔值，数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数 new 123
  • URIError：是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI（），decodeURI（），encodeURIComponent（），decodeURIComponent（），escape（），unescape（）
  • EvalError:函数没有被正确执行时抛出EvalError错误，该错误类型已不再ES5中出现，只是为了与以前代码兼容

• 自定义错误

  function UserError(message){

  this.message=message ||”默认信息”；

  this.name=”UserError”;}

  UserError.prototype=new Error();

  UserError.prototype.constructor=UserError;

• throw语句：作用是中断程序执行，抛出一个意外或错误，他接受一个表达式作为参数，可以抛出各种值

七 . JavaScript JSON

• JSON英文全称JavaScript Object Notation

• 是一种易于理解的独立的语言，也是一种轻量级的数据交换格式

• JSON使用JavaScript语法，但是JSON格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据传递格式

• 语法规则

  • 数据以键值对形式出现
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

• 通常我们从服务器中读取JSON数据，并在网页中显示数据

• JSON字符串转换为js对象

  • 创建js字符串，字符串为JSON格式的数据

    var text = ‘{ “employees” : [‘ +
    ‘{ “firstName”:”John” , “lastName”:”Doe” },’ +
    ‘{ “firstName”:”Anna” , “lastName”:”Smith” },’ +
    ‘{ “firstName”:”Peter” , “lastName”:”Jones” } ]}’;

  • 然后使用js内置函数JSON.parse（）将字符串转化为js对象

  • var obj=JSON.parse（text）；

  • 最后在你的页面使用js对象

八 . JavaScript：void（0）的含义

• void关键字是js中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

  点我!

• href=”#”与href=”javascript:void(0)”的区别

  # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

  而javascript:void(0), 仅仅表示一个死链接。

  在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

  如果你要定义一个死链接请使用 javascript:void(0) 。

• void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

九 . 命名规范

• 变量名应该区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；

• 变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；

• 变量名的命名应该是有意义的；

• 变量名不能为JavaScript中的关键词、保留字全名；

• 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

• 空格与运算符

  通常运算符 ( = + - * / ) 前后需要添加空格:

• 代码缩进

  通常使用 4 个空格符号来缩进代码块：

  注意:不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

• 复杂语句的通用规则:

  • 一条语句通常以分号作为结束符。
  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。

• 对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号，数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行，并以分号作为结束符号。

• 命名规则

  • 变量和函数为驼峰法（ camelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

十.文档对象模型HTML DOM

• 通过可编程的对象模型，js能够改变页面中的所有HTML元素，属性，CSS样式，能对页面中的所有事件作出反应

1.找HTML元素

• 通过id document.getElementById(“id值”);
• 通过标签名 document.getElementByTagName(“标签名”);
• 通过类名 document.getElementByClassName(“类名”)；

2.节点指针

• firstChild ：获取元素的首个子节点
• lastChild ：获取元素的最后一个子节点
• 父节点.childNodes ：获取元素的子节点列表
• 兄弟节点.previousSibling：获取已知节点的前一个节点
• 兄弟节点.nextSibling ： 获取已知节点的后一个节点
• 子节点.parentNode :获取已知节点的父节点

3.创建节点

• 创建元素节点 document.createElement(元素标签)
• 创建属性节点 document.createAttribute(元素属性)
• 创建文本节点 document.createTextNode(文本内容)

4.插入节点

• 向节点的子节点列表的末尾添加新的子节点 appendChild（所添加的新节点）
• 在已知的子节点前插入一个新的子节点 insertBefore（所要添加的新节点，已知节点）

5.改变HTML元素样式

document.getElementById(id).style.property=new style;

6.添加监听事件

element.addEventListener(event,function,useCapture);

第一个参数就是事件的类型（如“click”或“mousedown”。注意不要使用“on”前缀，是“click”而非“onclick”）

第二个参数就是事件触发时调用的函数

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的

7.事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发

在线工具库：https://123.w3cschool.cn/webtools

一 . js简介

1.概念

• javascript是世界上最流行的脚本语言。js是属于web的语言，他适合与PC，笔记本电脑，平板电脑和移动电话。ja被设计成向HTNL页面增加交互性。
  • 脚本语言：指的是他不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”
• 通过嵌入HTML来实现各种酷炫的动态效果，为用户提供赏心悦目的浏览效果。所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。
• javaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• javascript也是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只是用来做一些数学和逻辑运算。js本身不提供任何与I/O(输入/输出）相关的API，主要靠宿主环境（host）提供，所以js只适合嵌入更大型的应用程序环境，去调用宿主环境提供的底层API。目前，已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境，也就是Node项目
• 从语法角度看，javascript语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过js控制这些功能。但是，js并不是纯粹的“面型对象语言”，还支持其他编程范式（比如函数式编程）

2.支持编译运行。

• JavaScript 语言本身，虽然是一种解释型语言，但是在现代浏览器中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接近二进制程序。而且，JavaScript 引擎正在快速发展，性能将越来越好。
• 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近原生二进制代码的运行速度。各种语言（主要是 C 和 C++）通过编译成 WebAssembly，就可以在浏览器里面运行。

3.事件驱动和非阻塞式设计

• JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式（non-blocking）设计，在服务器端适合高并发环境，普通的硬件就可以承受很大的访问量。

4.javascript与java的关系

Java	javascript
强类型	弱类型（同一变量可以存放不同类型的变量（但是始终存放同一类型是良好的编码习惯）

必须在JAVA虚拟机上运行，且事先需要进行编译 不依托编辑器，在浏览器就可以实现，边解释边执行

二 . 输出

1.直接写入HTML输出流

document.write(“输出内容”); 将内容写入HTML文档中

• 你只能在HTNL输出中使用document.write。如果在文档加载完成后使用该方法，会覆盖整个文档。

2.弹出警告框alert

window.alert（“输出内容”）；

3.在指定位置输出innerHTML

var x=document.getElementById(“id名”)；//使用id属性查找元素

x.innerHTML=”输出内容”;//改变内容，写入到HTML元素

4.在控制台上输出

console.log(‘输出内容’)；

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

可以通过在控制台输入console.clear()来实现清空控制台信息。

https://jingyan.baidu.com/article/6dad507505f714a123e36e8a.html

三 . js基本语法

1.语句

• js程序执行单位为行，也就是一行一行地执行一般，每一行就是一个语句。语句是为了完成某种任务而进行的操作（赋值语句），语句以分号结束，分号前没有任何内容，js引擎将其视为空语句
• 表达式（需要得出结果）不需要分号结尾，不然js引擎会将其视为语句，这样会产生一些没有意义的语句

2.js用法

• HTML脚本必须位于标签之间，脚本可放置在body或head标签中
• 如需在HTML页面中插入脚本，请使用script标签，他会告诉js在何处开始和结束
• 引入外部脚本

js区分大小写

3.变量

• 局部变量不声明变量，即不写var，会自动创建全局变量；如果使用var重新声明一个已经存在的变量，是无效的。但第二次声明的时候还进行了赋值，则会覆盖掉前面的值。
• 如果一个变量没有声明就直接使用，js会报错，告诉你变量未定义
• JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。
• 变量是一个名称，字面量是一个值
• JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。
• undefined：声明变量却没赋值的变量，表示“无定义”
• 单行用 / / 注释，多行注释用 /* */
• 当您向变量分配文本值时，应该用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

1 .变量类型

• 值类型
  • 占用空间固定，保存在栈中
  • 保存复制的是值本身
  • 使用typeof检测数据的类型
  • 基本类型数据是值类型
• 引用类型
  • 占用空间不固定，保存在堆中
  • 保存和复制的是指向对象的一个指针
  • 使用instanceof检测数据的类型
  • 使用new（）方法构造出来的对象是引用型的

2.作用域

• 全局变量
  • 在函数体外定义的变量或者在函数体内部定义的无var的变量
  • 在任何位置都可以调用
• 局部变量
  • 在函数体内部用var声明的变量或函数的参数变量
  • 在当前函数体内部调用
• 优先级
  • 同名全局变量 > 参数变量 > 局部变量 > 全局变量
• 特性
  • 忽略块级作用域
  • 全局变量是全局对象的属性
  • 局部变量是调用对象的属性
  • 作用域链
    • 内层函数可以访问外层函数的局部变量
    • 外层函数不能访问内层函数局部变量
  • 生命周期
    • 全局变量：除非被显示删除，否则一直存在
    • 局部变量：自声明起至函数运行完毕或者显示删除
    • 收回机制
      • 标记清除，引用计数

4.数据类型

1.数字 Number

2.字符串String

• 由0个或多个16位Unicode字符组成

• 单引号与双引号不能交叉使用

• 使用length属性访问字符串长度

  • 转义字符算一个字符
  • 无法精确返回双字节字符长度

• 字符串一旦被创建，其值将不能修改，若要改变必须销毁原有字符串

• 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

• 类型转换

  • toString（）使用类型

    ​ 1.number

    ​ 2.boolean

    ​ 3.string

    ​ 4.object

  • eval()：计算字符串表达式的值并以数值形式返回

3.布尔Boolean

• 任何值和布尔值比较时，两边都会转化为Number类型

• [0]用if判断的时候为true，和布尔值比较的时候转换为0。{x:0}用if判断的时候为true，和布尔值比较的时候转换为NaN

• 转换为true

  • 任何非空字符串
  • 任何非0的数值
  • 数组和对象（包括空数组和空对象）

• 转换为false

  • 空字符串
  • 0和NaN
  • null和undefined

4.数组Array

• 对象Object

• 空Null

  • 逻辑上null表示一个空对象的指针，使用typeof检测时会返回object

• 未定义Undefined

  • 使用var声明变量但未初始化
  • 区分空对象指针与尚未定义的变量
  • 对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined

• undefined与null的关系

  • undefined派生于null因此在使用“==”进行比较的时候会返回true
  • 没有必要将变量值声明为undefined
  • 声明空对象的时候应将其值赋值为null

5.非数值NaN(Not a Number)

• 任何涉及NaN的操作都将返回NaN

• NaN与任何数值都不相等包括自身

• 检测isNaN（）

  • 可转换成数值false
  • 不可转换成数值true

6.未定义undefined

• 变量声明了却没有赋值
• 调用函数时，应该提供的参数没有提供，该参数等于undefined
• 对象没有赋值的属性
• 函数没有返回值，默认返回undefined

5.数值转换

1.Number()

• Boolean——(true 1)(false 0)
• null——0
• undefined / { }———NaN (null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN)
• String除数字和空字符串（0）外，其余都是NaN

2.解析parseInt（“要解析的字符串”，转换时使用的基数）

• 忽略前置空格
• 直接找到第一个非空格字符
  • NaN：不是数字字符或符号
  • 如果是数字字符解析所有后续字符，或一直解析直到遇到非数字字符便结束

3.parseFloat（）

• 从第一个字符开始解析，遇到无效浮点格式后结束
• 只有第一个小数点有效，忽略前导0
• 十六进制数始终为0，没有小数点或小数点后全0

6.对象object

• 一组数据或功能的集合
• 声明 var o=new Object（）
• 属性和方法
  • Constructor：保存用于创建当前对象的函数
  • hasOwnProperty（propertyName）：检测给定属性在当前对象实例中是否存在
  • isPrototypeOf（object）检测传入的对象是否为另一个对象的原型
  • propertyisEnumerable（propertyName）检测给定属性是否能用for-in语句枚举
  • toLocalString（）返回对象的字符串表示，该字符串与执行环境的地区对应
  • toString（）返回对象的字符串表示
  • valueOf（）返回对象的字符串，数值或布尔值表示；通常和toString（）的值相同

https://blog.csdn.net/IT_10/article/details/81806665

四 . 数据类型的概述

1.六大数据类型（number,string,boolean,undefined,null,onject)

• 原始类型（primitive type）
  • 不能再细分，最基本的数据类型
  • number，string，boolean
• 合成类型（complex type）
  • 可看作一个存放多个原始类型值的容器
  • 狭义对象（object），数组（array），函数（function）
• undefined和null一般将他们看成两个特殊值
• 狭义的对象（object）和数组是两种不同的数据组合方式，而函数其实是处理数据的方法。js把函数当成一种数据类型，可以像其他类型的数据一样，进行赋值和传递，这为编程带来了很大的灵活性，体现了js作为“函数式语言”的本质
• js的所有数据都可以视为广义的对象。不仅数组和函数属于对象，就连原始值也可用对象方式调用，（不过都是隐式转换，就像输入数值都会隐式转换成字符串数值一样）

2.确定值是什么类型的几种方法

1.typeof运算符

• typeof 123 //“number”
• typeof ‘123’ //“string”
• typeof false //“boolean”
• function f（）{} typeof f //“function”
• typeof undefined //“undefined”（利用这一点，可用来检查一个没有申明的变量而不报错）
• typeof window / { } / [ ] / null //“object”（表明数组本质上只是一种特殊的对象。null的类型也是object，这是由于历史原因造成的）

2.instanceof运算符

• 解决typeof没法区分数组和对象的缺陷
• {}/[] instanceof Object/Array //true
• (function(0{})) instanceof Function //true
• 原始类型 instanceof 各种类型 //一般都是false

3.Object.prototype.toString方法

• Object.prototype.toString.call([1,2,3])
     '[object Array]

4.应用typeof方法写方法

• var toType = function(obj) {
     return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
   }

toType({a: 4}) // "object"
   toType([1, 2, 3]) // "array"
   (function() { return toType(arguments) }()) // "arguments"
   toType(new ReferenceError()) // "error"
   toType(new Date()) // "date"
   toType(/a-z/) // "regexp"
   toType(Math) // "math"
   toType(JSON) // "json"
   toType(new Number(4)) // "number"
   toType(new String("abc")) // "string"
   toType(new Boolean(true)) // "boolean"

• Axel Rauschmayer, Improving the JavaScript typeof operator
• Axel Rauschmayer, Categorizing values in JavaScript

五 . JavaScript函数

1.定义方法

• 静态方法function function nane（){执行代码}
• 动态匿名方法 var 函数名=new Function([“虚参数列表”]，“函数体”)；
• 直接量方法 函数名=function（【虚参列表】）{函数体}

2.调用方法

• 函数作为对象方法调用，会使得 this 的值成为对象本身。

• call()（传入的参数是一系列的参数值，但是从第二个参数开始） 和 apply() （传入的参数只能是由各参数值组成的数组）是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

• 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

• 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

• 在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

• 在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

• 直接调用 函数名（实参列表）

• 在连接中调用

• 在事件中调用 事件类型=“函数名（）”

• 递归调用（在函数体内部调用自身） function 函数名(){代码 函数名（）；}

• 构造函数调用

  • 构造函数中 this 关键字没有任何的值。
    this 的值在函数调用时实例化对象(new object)时创建。

  • 如果函数或者方法调用之前带有关键字new，他就构成构造函数调用。凡是没有形参的构造函数调用都可以省略圆括号 var o=new Object;

  • 立即调用函数（IIFE)

    • 一对圆括号()是一种运算符，跟在函数名之后，表示调用该函数

    • (function(){

      statement

      }())

    • 上面代码的圆括号的用法，function之前的左圆括号是必需的，因为如果不写这个左圆括号，JavaScript解释器会试图将关键字function解析为函数声明语句。而使用圆括号，JavaScript解释器才会正确地将其解析为函数定义表达式。

3.常用方法

• apply：将函数作为对象的方法来调用，将参数传递给该方法
• call：将函数作为对象的方法来调用，将参数传递给该方法
• toString：返回函数的字符串表示

4.arguments对象

• 功能：存放实参的参数列表

• 特性

  • 仅能在函数体内使用
  • 带有下标属性，但并非数组
  • 函数声明时自动初始化

• 属性

  • length：获取函数实参的长度

  • callee ：返回当前正在指向的对象

  • caller：返回调用当前正在执行函数的函数名

  • name属性：返回紧跟在function关键字后的那个函数名

  • toString方法返回函数的源码

  • eval命令的作用是将字符串当作语句执行，eval没有自己的作用域，都是在当前作用域内执行

    eval（‘var a=1’）；

    JavaScript规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。

    (function(){

    ‘use strict’;

    eval(‘var a=1’);

    console.log(a); //ReferenceError: a is not defined

    })();

5.指针标识

• this：指向当前操作对象

• callee：指向参数集合所属函数

• prototype：指向函数附带的原型对象

• constructor：指向创建该函数的构造函数

• JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

• 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

6.函数变量提升

• 全局变量用var命令声明，不管在什么位置声明，变量声明都会被提升头部
• 函数作用域内部也会产生变量提升

7.闭包

• JavaScript的函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量，这就是JavaScript的闭包。 闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
• 闭包的另一个用处，是封装对象的私有属性和私有方法。

8.数组

• 数组属于一种特殊的对象

• 数组长度length属性

  • length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。
  • 将数组清空的一个有效方法，就是将length属性设为0。
  • 如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。
  • 在ECMAScript 5中，可以用Object.defineProperty() 让数组的length属性变成只读。

• 空位

  • 当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位 var arr=【1，，2】
  • 但是，如果最后一个元素后面有逗号，并不会产生空位。数组直接量的语法允许有可选的结尾的逗号，故[,,]只有两个元素而非三个。

• 类数组对象

  • 在JavaScript中，有些对象被称为“类数组对象”。意思是，它们看上去很像数组，可以使用length属性，但是它们并不是数组，无法使用一些数组的方法。

  • 由于类数组对象没有继承自Array.prototype，那就不能在它们上面直接调用数组方法。不过我们可以间接的使用Function.call方法调用。

六 . JavaScript错误处理机制

• javascript解析或执行时，一旦发生错误，引擎就会自动抛出一个错误对象，js提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例 var err=new Error（‘出错了’）；err.message

• Erroe对象的属性

  • message：错误提示信息
  • name：错误名称（非标准属性）
  • stack：错误的堆栈（非标准属性）

• Error的六大派生对象

  • SyntaxError：是解析代码时发生的错误（变量名错误或者缺少括号）
  • ReferenceError：是引用一个不存在的变量时发生的的错误或者将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值（console.log()=1)
  • RangeError:是当一个值超过有效范围时发生的错误，主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值
    • new Array(-1)
    • (1234).toExponential(21)//toExponential() argument must be between 0 and 20
  • TypeError:是参数或变量不是预期类型时发生的错误。比如，对字符串，布尔值，数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数 new 123
  • URIError：是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI（），decodeURI（），encodeURIComponent（），decodeURIComponent（），escape（），unescape（）
  • EvalError:函数没有被正确执行时抛出EvalError错误，该错误类型已不再ES5中出现，只是为了与以前代码兼容

• 自定义错误

  function UserError(message){

  this.message=message ||”默认信息”；

  this.name=”UserError”;}

  UserError.prototype=new Error();

  UserError.prototype.constructor=UserError;

• throw语句：作用是中断程序执行，抛出一个意外或错误，他接受一个表达式作为参数，可以抛出各种值

七 . JavaScript JSON

• JSON英文全称JavaScript Object Notation

• 是一种易于理解的独立的语言，也是一种轻量级的数据交换格式

• JSON使用JavaScript语法，但是JSON格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据传递格式

• 语法规则

  • 数据以键值对形式出现
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

• 通常我们从服务器中读取JSON数据，并在网页中显示数据

• JSON字符串转换为js对象

  • 创建js字符串，字符串为JSON格式的数据

    var text = ‘{ “employees” : [‘ +
    ‘{ “firstName”:”John” , “lastName”:”Doe” },’ +
    ‘{ “firstName”:”Anna” , “lastName”:”Smith” },’ +
    ‘{ “firstName”:”Peter” , “lastName”:”Jones” } ]}’;

  • 然后使用js内置函数JSON.parse（）将字符串转化为js对象

  • var obj=JSON.parse（text）；

  • 最后在你的页面使用js对象

八 . JavaScript：void（0）的含义

• void关键字是js中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

  点我!

• href=”#”与href=”javascript:void(0)”的区别

  # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

  而javascript:void(0), 仅仅表示一个死链接。

  在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

  如果你要定义一个死链接请使用 javascript:void(0) 。

• void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

九 . 命名规范

• 变量名应该区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；

• 变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；

• 变量名的命名应该是有意义的；

• 变量名不能为JavaScript中的关键词、保留字全名；

• 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

• 空格与运算符

  通常运算符 ( = + - * / ) 前后需要添加空格:

• 代码缩进

  通常使用 4 个空格符号来缩进代码块：

  注意:不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

• 复杂语句的通用规则:

  • 一条语句通常以分号作为结束符。
  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。

• 对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号，数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行，并以分号作为结束符号。

• 命名规则

  • 变量和函数为驼峰法（ camelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

十.文档对象模型HTML DOM

• 通过可编程的对象模型，js能够改变页面中的所有HTML元素，属性，CSS样式，能对页面中的所有事件作出反应

1.找HTML元素

• 通过id document.getElementById(“id值”);
• 通过标签名 document.getElementByTagName(“标签名”);
• 通过类名 document.getElementByClassName(“类名”)；

2.节点指针

• firstChild ：获取元素的首个子节点
• lastChild ：获取元素的最后一个子节点
• 父节点.childNodes ：获取元素的子节点列表
• 兄弟节点.previousSibling：获取已知节点的前一个节点
• 兄弟节点.nextSibling ： 获取已知节点的后一个节点
• 子节点.parentNode :获取已知节点的父节点

3.创建节点

• 创建元素节点 document.createElement(元素标签)
• 创建属性节点 document.createAttribute(元素属性)
• 创建文本节点 document.createTextNode(文本内容)

4.插入节点

• 向节点的子节点列表的末尾添加新的子节点 appendChild（所添加的新节点）
• 在已知的子节点前插入一个新的子节点 insertBefore（所要添加的新节点，已知节点）

5.改变HTML元素样式

document.getElementById(id).style.property=new style;

6.添加监听事件

element.addEventListener(event,function,useCapture);

第一个参数就是事件的类型（如“click”或“mousedown”。注意不要使用“on”前缀，是“click”而非“onclick”）

第二个参数就是事件触发时调用的函数

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的

7.事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发

在线工具库：https://123.w3cschool.cn/webtools

一 . js简介

1.概念

• javascript是世界上最流行的脚本语言。js是属于web的语言，他适合与PC，笔记本电脑，平板电脑和移动电话。ja被设计成向HTNL页面增加交互性。
  • 脚本语言：指的是他不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序（比如浏览器）的“脚本”
• 通过嵌入HTML来实现各种酷炫的动态效果，为用户提供赏心悦目的浏览效果。所有现代的 HTML 页面都使用 JavaScript，可以用于改进设计、验证表单、检测浏览器、创建cookies等。
• javaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
• javascript也是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只是用来做一些数学和逻辑运算。js本身不提供任何与I/O(输入/输出）相关的API，主要靠宿主环境（host）提供，所以js只适合嵌入更大型的应用程序环境，去调用宿主环境提供的底层API。目前，已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器环境，也就是Node项目
• 从语法角度看，javascript语言是一种“对象模型”语言。各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过js控制这些功能。但是，js并不是纯粹的“面型对象语言”，还支持其他编程范式（比如函数式编程）

2.支持编译运行。

• JavaScript 语言本身，虽然是一种解释型语言，但是在现代浏览器中，JavaScript 都是编译后运行。程序会被高度优化，运行效率接近二进制程序。而且，JavaScript 引擎正在快速发展，性能将越来越好。
• 此外，还有一种 WebAssembly 格式，它是 JavaScript 引擎的中间码格式，全部都是二进制代码。由于跳过了编译步骤，可以达到接近原生二进制代码的运行速度。各种语言（主要是 C 和 C++）通过编译成 WebAssembly，就可以在浏览器里面运行。

3.事件驱动和非阻塞式设计

• JavaScript 程序可以采用事件驱动（event-driven）和非阻塞式（non-blocking）设计，在服务器端适合高并发环境，普通的硬件就可以承受很大的访问量。

4.javascript与java的关系

Java	javascript
强类型	弱类型（同一变量可以存放不同类型的变量（但是始终存放同一类型是良好的编码习惯）

必须在JAVA虚拟机上运行，且事先需要进行编译 不依托编辑器，在浏览器就可以实现，边解释边执行

二 . 输出

1.直接写入HTML输出流

document.write(“输出内容”); 将内容写入HTML文档中

• 你只能在HTNL输出中使用document.write。如果在文档加载完成后使用该方法，会覆盖整个文档。

2.弹出警告框alert

window.alert（“输出内容”）；

3.在指定位置输出innerHTML

var x=document.getElementById(“id名”)；//使用id属性查找元素

x.innerHTML=”输出内容”;//改变内容，写入到HTML元素

4.在控制台上输出

console.log(‘输出内容’)；

1、console.log 用于输出普通信息

2、console.info 用于输出提示性信息

3、console.error用于输出错误信息

4、console.warn用于输出警示信息

5、console.debug用于输出调试信息

可以通过在控制台输入console.clear()来实现清空控制台信息。

https://jingyan.baidu.com/article/6dad507505f714a123e36e8a.html

三 . js基本语法

1.语句

• js程序执行单位为行，也就是一行一行地执行一般，每一行就是一个语句。语句是为了完成某种任务而进行的操作（赋值语句），语句以分号结束，分号前没有任何内容，js引擎将其视为空语句
• 表达式（需要得出结果）不需要分号结尾，不然js引擎会将其视为语句，这样会产生一些没有意义的语句

2.js用法

• HTML脚本必须位于标签之间，脚本可放置在body或head标签中
• 如需在HTML页面中插入脚本，请使用script标签，他会告诉js在何处开始和结束
• 引入外部脚本

js区分大小写

3.变量

• 局部变量不声明变量，即不写var，会自动创建全局变量；如果使用var重新声明一个已经存在的变量，是无效的。但第二次声明的时候还进行了赋值，则会覆盖掉前面的值。
• 如果一个变量没有声明就直接使用，js会报错，告诉你变量未定义
• JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。
• 变量是一个名称，字面量是一个值
• JavaScript 标识符必须以字母、下划线（_）或美元符（$）开始。后续的字符可以是字母、数字、下划线或美元符（数字是不允许作为首字符出现的，以便 JavaScript 可以轻易区分开标识符和数字）。
• undefined：声明变量却没赋值的变量，表示“无定义”
• 单行用 / / 注释，多行注释用 /* */
• 当您向变量分配文本值时，应该用双引号或单引号包围这个值。当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

1 .变量类型

• 值类型
  • 占用空间固定，保存在栈中
  • 保存复制的是值本身
  • 使用typeof检测数据的类型
  • 基本类型数据是值类型
• 引用类型
  • 占用空间不固定，保存在堆中
  • 保存和复制的是指向对象的一个指针
  • 使用instanceof检测数据的类型
  • 使用new（）方法构造出来的对象是引用型的

2.作用域

• 全局变量
  • 在函数体外定义的变量或者在函数体内部定义的无var的变量
  • 在任何位置都可以调用
• 局部变量
  • 在函数体内部用var声明的变量或函数的参数变量
  • 在当前函数体内部调用
• 优先级
  • 同名全局变量 > 参数变量 > 局部变量 > 全局变量
• 特性
  • 忽略块级作用域
  • 全局变量是全局对象的属性
  • 局部变量是调用对象的属性
  • 作用域链
    • 内层函数可以访问外层函数的局部变量
    • 外层函数不能访问内层函数局部变量
  • 生命周期
    • 全局变量：除非被显示删除，否则一直存在
    • 局部变量：自声明起至函数运行完毕或者显示删除
    • 收回机制
      • 标记清除，引用计数

4.数据类型

1.数字 Number

2.字符串String

• 由0个或多个16位Unicode字符组成

• 单引号与双引号不能交叉使用

• 使用length属性访问字符串长度

  • 转义字符算一个字符
  • 无法精确返回双字节字符长度

• 字符串一旦被创建，其值将不能修改，若要改变必须销毁原有字符串

• 不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用

• 类型转换

  • toString（）使用类型

    ​ 1.number

    ​ 2.boolean

    ​ 3.string

    ​ 4.object

  • eval()：计算字符串表达式的值并以数值形式返回

3.布尔Boolean

• 任何值和布尔值比较时，两边都会转化为Number类型

• [0]用if判断的时候为true，和布尔值比较的时候转换为0。{x:0}用if判断的时候为true，和布尔值比较的时候转换为NaN

• 转换为true

  • 任何非空字符串
  • 任何非0的数值
  • 数组和对象（包括空数组和空对象）

• 转换为false

  • 空字符串
  • 0和NaN
  • null和undefined

4.数组Array

• 对象Object

• 空Null

  • 逻辑上null表示一个空对象的指针，使用typeof检测时会返回object

• 未定义Undefined

  • 使用var声明变量但未初始化
  • 区分空对象指针与尚未定义的变量
  • 对未初始化的变量及未声明的变量使用typeof运算符均会返回undefined

• undefined与null的关系

  • undefined派生于null因此在使用“==”进行比较的时候会返回true
  • 没有必要将变量值声明为undefined
  • 声明空对象的时候应将其值赋值为null

5.非数值NaN(Not a Number)

• 任何涉及NaN的操作都将返回NaN

• NaN与任何数值都不相等包括自身

• 检测isNaN（）

  • 可转换成数值false
  • 不可转换成数值true

6.未定义undefined

• 变量声明了却没有赋值
• 调用函数时，应该提供的参数没有提供，该参数等于undefined
• 对象没有赋值的属性
• 函数没有返回值，默认返回undefined

5.数值转换

1.Number()

• Boolean——(true 1)(false 0)
• null——0
• undefined / { }———NaN (null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN)
• String除数字和空字符串（0）外，其余都是NaN

2.解析parseInt（“要解析的字符串”，转换时使用的基数）

• 忽略前置空格
• 直接找到第一个非空格字符
  • NaN：不是数字字符或符号
  • 如果是数字字符解析所有后续字符，或一直解析直到遇到非数字字符便结束

3.parseFloat（）

• 从第一个字符开始解析，遇到无效浮点格式后结束
• 只有第一个小数点有效，忽略前导0
• 十六进制数始终为0，没有小数点或小数点后全0

6.对象object

• 一组数据或功能的集合
• 声明 var o=new Object（）
• 属性和方法
  • Constructor：保存用于创建当前对象的函数
  • hasOwnProperty（propertyName）：检测给定属性在当前对象实例中是否存在
  • isPrototypeOf（object）检测传入的对象是否为另一个对象的原型
  • propertyisEnumerable（propertyName）检测给定属性是否能用for-in语句枚举
  • toLocalString（）返回对象的字符串表示，该字符串与执行环境的地区对应
  • toString（）返回对象的字符串表示
  • valueOf（）返回对象的字符串，数值或布尔值表示；通常和toString（）的值相同

https://blog.csdn.net/IT_10/article/details/81806665

四 . 数据类型的概述

1.六大数据类型（number,string,boolean,undefined,null,onject)

• 原始类型（primitive type）
  • 不能再细分，最基本的数据类型
  • number，string，boolean
• 合成类型（complex type）
  • 可看作一个存放多个原始类型值的容器
  • 狭义对象（object），数组（array），函数（function）
• undefined和null一般将他们看成两个特殊值
• 狭义的对象（object）和数组是两种不同的数据组合方式，而函数其实是处理数据的方法。js把函数当成一种数据类型，可以像其他类型的数据一样，进行赋值和传递，这为编程带来了很大的灵活性，体现了js作为“函数式语言”的本质
• js的所有数据都可以视为广义的对象。不仅数组和函数属于对象，就连原始值也可用对象方式调用，（不过都是隐式转换，就像输入数值都会隐式转换成字符串数值一样）

2.确定值是什么类型的几种方法

1.typeof运算符

• typeof 123 //“number”
• typeof ‘123’ //“string”
• typeof false //“boolean”
• function f（）{} typeof f //“function”
• typeof undefined //“undefined”（利用这一点，可用来检查一个没有申明的变量而不报错）
• typeof window / { } / [ ] / null //“object”（表明数组本质上只是一种特殊的对象。null的类型也是object，这是由于历史原因造成的）

2.instanceof运算符

• 解决typeof没法区分数组和对象的缺陷
• {}/[] instanceof Object/Array //true
• (function(0{})) instanceof Function //true
• 原始类型 instanceof 各种类型 //一般都是false

3.Object.prototype.toString方法

• Object.prototype.toString.call([1,2,3])
     '[object Array]

4.应用typeof方法写方法

• var toType = function(obj) {
     return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
   }

toType({a: 4}) // "object"
   toType([1, 2, 3]) // "array"
   (function() { return toType(arguments) }()) // "arguments"
   toType(new ReferenceError()) // "error"
   toType(new Date()) // "date"
   toType(/a-z/) // "regexp"
   toType(Math) // "math"
   toType(JSON) // "json"
   toType(new Number(4)) // "number"
   toType(new String("abc")) // "string"
   toType(new Boolean(true)) // "boolean"

• Axel Rauschmayer, Improving the JavaScript typeof operator
• Axel Rauschmayer, Categorizing values in JavaScript

五 . JavaScript函数

1.定义方法

• 静态方法function function nane（){执行代码}
• 动态匿名方法 var 函数名=new Function([“虚参数列表”]，“函数体”)；
• 直接量方法 函数名=function（【虚参列表】）{函数体}

2.调用方法

• 函数作为对象方法调用，会使得 this 的值成为对象本身。

• call()（传入的参数是一系列的参数值，但是从第二个参数开始） 和 apply() （传入的参数只能是由各参数值组成的数组）是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

• 在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。

• 在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。

• 在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

• 在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

• 直接调用 函数名（实参列表）

• 在连接中调用

• 在事件中调用 事件类型=“函数名（）”

• 递归调用（在函数体内部调用自身） function 函数名(){代码 函数名（）；}

• 构造函数调用

  • 构造函数中 this 关键字没有任何的值。
    this 的值在函数调用时实例化对象(new object)时创建。

  • 如果函数或者方法调用之前带有关键字new，他就构成构造函数调用。凡是没有形参的构造函数调用都可以省略圆括号 var o=new Object;

  • 立即调用函数（IIFE)

    • 一对圆括号()是一种运算符，跟在函数名之后，表示调用该函数

    • (function(){

      statement

      }())

    • 上面代码的圆括号的用法，function之前的左圆括号是必需的，因为如果不写这个左圆括号，JavaScript解释器会试图将关键字function解析为函数声明语句。而使用圆括号，JavaScript解释器才会正确地将其解析为函数定义表达式。

3.常用方法

• apply：将函数作为对象的方法来调用，将参数传递给该方法
• call：将函数作为对象的方法来调用，将参数传递给该方法
• toString：返回函数的字符串表示

4.arguments对象

• 功能：存放实参的参数列表

• 特性

  • 仅能在函数体内使用
  • 带有下标属性，但并非数组
  • 函数声明时自动初始化

• 属性

  • length：获取函数实参的长度

  • callee ：返回当前正在指向的对象

  • caller：返回调用当前正在执行函数的函数名

  • name属性：返回紧跟在function关键字后的那个函数名

  • toString方法返回函数的源码

  • eval命令的作用是将字符串当作语句执行，eval没有自己的作用域，都是在当前作用域内执行

    eval（‘var a=1’）；

    JavaScript规定，如果使用严格模式，eval内部声明的变量，不会影响到外部作用域。

    (function(){

    ‘use strict’;

    eval(‘var a=1’);

    console.log(a); //ReferenceError: a is not defined

    })();

5.指针标识

• this：指向当前操作对象

• callee：指向参数集合所属函数

• prototype：指向函数附带的原型对象

• constructor：指向创建该函数的构造函数

• JavaScript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

• 如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

6.函数变量提升

• 全局变量用var命令声明，不管在什么位置声明，变量声明都会被提升头部
• 函数作用域内部也会产生变量提升

7.闭包

• JavaScript的函数可以嵌套在其他函数中定义，这样它们就可以访问它们被定义时所处的作用域中的任何变量，这就是JavaScript的闭包。 闭包的最大用处有两个，一个是可以读取函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。
• 闭包的另一个用处，是封装对象的私有属性和私有方法。

8.数组

• 数组属于一种特殊的对象

• 数组长度length属性

  • length属性是可写的。如果人为设置一个小于当前成员个数的值，该数组的成员会自动减少到length设置的值。
  • 将数组清空的一个有效方法，就是将length属性设为0。
  • 如果人为设置length大于当前元素个数，则数组的成员数量会增加到这个值，新增的位置都是空位。
  • 在ECMAScript 5中，可以用Object.defineProperty() 让数组的length属性变成只读。

• 空位

  • 当数组的某个位置是空元素，即两个逗号之间没有任何值，我们称该数组存在空位 var arr=【1，，2】
  • 但是，如果最后一个元素后面有逗号，并不会产生空位。数组直接量的语法允许有可选的结尾的逗号，故[,,]只有两个元素而非三个。

• 类数组对象

  • 在JavaScript中，有些对象被称为“类数组对象”。意思是，它们看上去很像数组，可以使用length属性，但是它们并不是数组，无法使用一些数组的方法。

  • 由于类数组对象没有继承自Array.prototype，那就不能在它们上面直接调用数组方法。不过我们可以间接的使用Function.call方法调用。

六 . JavaScript错误处理机制

• javascript解析或执行时，一旦发生错误，引擎就会自动抛出一个错误对象，js提供一个Error构造函数，所有抛出的错误都是这个构造函数的实例 var err=new Error（‘出错了’）；err.message

• Erroe对象的属性

  • message：错误提示信息
  • name：错误名称（非标准属性）
  • stack：错误的堆栈（非标准属性）

• Error的六大派生对象

  • SyntaxError：是解析代码时发生的错误（变量名错误或者缺少括号）
  • ReferenceError：是引用一个不存在的变量时发生的的错误或者将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值（console.log()=1)
  • RangeError:是当一个值超过有效范围时发生的错误，主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值
    • new Array(-1)
    • (1234).toExponential(21)//toExponential() argument must be between 0 and 20
  • TypeError:是参数或变量不是预期类型时发生的错误。比如，对字符串，布尔值，数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数 new 123
  • URIError：是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI（），decodeURI（），encodeURIComponent（），decodeURIComponent（），escape（），unescape（）
  • EvalError:函数没有被正确执行时抛出EvalError错误，该错误类型已不再ES5中出现，只是为了与以前代码兼容

• 自定义错误

  function UserError(message){

  this.message=message ||”默认信息”；

  this.name=”UserError”;}

  UserError.prototype=new Error();

  UserError.prototype.constructor=UserError;

• throw语句：作用是中断程序执行，抛出一个意外或错误，他接受一个表达式作为参数，可以抛出各种值

七 . JavaScript JSON

• JSON英文全称JavaScript Object Notation

• 是一种易于理解的独立的语言，也是一种轻量级的数据交换格式

• JSON使用JavaScript语法，但是JSON格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据传递格式

• 语法规则

  • 数据以键值对形式出现
  • 数据由逗号分隔
  • 大括号保存对象
  • 方括号保存数组

• 通常我们从服务器中读取JSON数据，并在网页中显示数据

• JSON字符串转换为js对象

  • 创建js字符串，字符串为JSON格式的数据

    var text = ‘{ “employees” : [‘ +
    ‘{ “firstName”:”John” , “lastName”:”Doe” },’ +
    ‘{ “firstName”:”Anna” , “lastName”:”Smith” },’ +
    ‘{ “firstName”:”Peter” , “lastName”:”Jones” } ]}’;

  • 然后使用js内置函数JSON.parse（）将字符串转化为js对象

  • var obj=JSON.parse（text）；

  • 最后在你的页面使用js对象

八 . JavaScript：void（0）的含义

• void关键字是js中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值

  点我!

• href=”#”与href=”javascript:void(0)”的区别

  # 包含了一个位置信息，默认的锚是#top 也就是网页的上端。

  而javascript:void(0), 仅仅表示一个死链接。

  在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。

  如果你要定义一个死链接请使用 javascript:void(0) 。

• void()仅仅是代表不返回任何值，但是括号内的表达式还是要运行

九 . 命名规范

• 变量名应该区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；

• 变量命名长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；

• 变量名的命名应该是有意义的；

• 变量名不能为JavaScript中的关键词、保留字全名；

• 变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法。

• 空格与运算符

  通常运算符 ( = + - * / ) 前后需要添加空格:

• 代码缩进

  通常使用 4 个空格符号来缩进代码块：

  注意:不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。

• 复杂语句的通用规则:

  • 一条语句通常以分号作为结束符。
  • 将左花括号放在第一行的结尾。
  • 左花括号前添加一空格。
  • 将右花括号独立放在一行。
  • 不要以分号结束一个复杂的声明。

• 对象定义的规则:

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号，数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行，并以分号作为结束符号。

• 命名规则

  • 变量和函数为驼峰法（ camelCase）
  • 全局变量为大写 (UPPERCASE )
  • 常量 (如 PI) 为大写 (UPPERCASE )

十.文档对象模型HTML DOM

• 通过可编程的对象模型，js能够改变页面中的所有HTML元素，属性，CSS样式，能对页面中的所有事件作出反应

1.找HTML元素

• 通过id document.getElementById(“id值”);
• 通过标签名 document.getElementByTagName(“标签名”);
• 通过类名 document.getElementByClassName(“类名”)；

2.节点指针

• firstChild ：获取元素的首个子节点
• lastChild ：获取元素的最后一个子节点
• 父节点.childNodes ：获取元素的子节点列表
• 兄弟节点.previousSibling：获取已知节点的前一个节点
• 兄弟节点.nextSibling ： 获取已知节点的后一个节点
• 子节点.parentNode :获取已知节点的父节点

3.创建节点

• 创建元素节点 document.createElement(元素标签)
• 创建属性节点 document.createAttribute(元素属性)
• 创建文本节点 document.createTextNode(文本内容)

4.插入节点

• 向节点的子节点列表的末尾添加新的子节点 appendChild（所添加的新节点）
• 在已知的子节点前插入一个新的子节点 insertBefore（所要添加的新节点，已知节点）

5.改变HTML元素样式

document.getElementById(id).style.property=new style;

6.添加监听事件

element.addEventListener(event,function,useCapture);

第一个参数就是事件的类型（如“click”或“mousedown”。注意不要使用“on”前缀，是“click”而非“onclick”）

第二个参数就是事件触发时调用的函数

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的

7.事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 “click” 事件先被触发呢？

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在捕获中，外部元素的事件会先被触发