JavaScript

特性

 ① 解释型语言。JavaScript是一种解释型的脚本语言，JavaScript是在程序的运行过程中逐行进行解释，不需要被编译为机器码再执行。

 ② 面向对象。JavaScript是一种面向对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

 ③ 类C和Java的语法。JavaScript的语法结构与C和Java很像，像for、if、while等语句和Java的基本上是一模一样的。

 ④ 简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言。

 ⑤ 动态性。所谓的动态性，可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一刻是个整数，下一刻可能会变成字符串了。

 ⑥ 跨平台性。JavaScript脚本语言不依赖于操作系统（Java依赖于JVM），仅需要浏览器的支持。

 ⑦ 安全性。JavaScript是不允许直接访问本地硬盘的。

 构成

• ECMAScript：ECMAScript是一个标准，而这需要由各厂商去实现。

• DOM：JS 中通过 DOM来对 HTML 文档进行操作。只要理解了DOM就可以随心所欲的操作 WEB 页面。

• BOM：要想在浏览器中使用 JavaScript，必须使用BOM(浏览器对象模型)。BOM提供了很多对象，通过修改这些对象的属性，调用他们的方法，用于控制浏览器的各种行为。

基本语法

编写位置

JavaScript需要包括在<script>标签中，这个标签可以出现在页面的任何位置。

方式一：编写到HTML中<script>标签中，声明在head标签或者body标签中。一般声明在head标签

<script type="text/javascript">
alert("如果还能重来？");
</script>

方式二：写在外部的.js文件中。然后通过script标签的src属性引入。

<script type="text/javascript" src="script.js"></script>

说明：type属性 ：默认值 text/javascript可以不写，不写也是这个值。

src属性：使用该属性指向文件的地址，可以是相对路径，也可以是绝对路径。

特别注意：方式一和方式二不要同时使用。一旦同时使用，会默认执行方式二中js文件中的js代码。

标识符的命名规则

• 由26个英文字母大小写，0-9，_或 $ 组成。

• 数字不可以开头。

• 不可以使用关键字和保留字，但能包含关键字和保留字。

• JavaScript中严格区分大小写。

• 标识符不能包含空格。

关键字

保留字

数据类型

• 基本数据类型（5种）

  数值类型：number

• 字符串类型：string

• 布尔类型：boolean

• null型：null

• undefined型（Undefined）

常量值

• undefined：表示未定义，Undefined类型只有一个值，即特殊的 undefined 。所有的js中的变量在未初始化的时候默认值都是undefined。

  typeof(undefined)结果是undefined。

变量的声明

• 使用var定义即可。比如：var num = 65; var name = "马大云"；

• 变量声明时不需要指定类型，可以接受所有的数据类型。

变量的赋值

• 变量在赋值过程中可以接受不同类型的值。比如：var x = 123; x = "atguigu.com";

• 没有赋值的变量，默认为undefined

• 使用typeof(变量名)，判断变量的类型

• JS中每一条语句以分号(;)结尾。如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。

注释

• //表示单行注释

• /* */表示多行注释

算术运算符

赋值运算符

• 符号：=

• 扩展赋值运算符： +=, -=, *=, /=, %=

关系运算符

• <, >, <=, >=, !=, ==, ===（全等）, !==（不全等）

逻辑运算符

• 逻辑运算符，结果返回一个布尔值。

• 如果进行逻辑运算时，操作数不是布尔类型，则会将其转换为布尔类型再进行计算。

• && ：与运算

  [ul]

  情况一：当表达式全为真的时候，返回最后一个表达式的值

• 情况二：当表达式中有一个为假的时候，返回第一个为假的表达式的值

function 函数名(形参列表){
函数体
}

var 变量名 = function(形参列表){
函数体;
}

var 变量名 = new Object();//创建一个空的对象实例
变量名.属性名 = 值;//给创建的对象添加一个属性
变量名.函数名 = function(){}; //给创建的对象添加一个函数

var 变量名 = {          //定义一个空对象
属性名1：值1，    //声明属性1
属性名2：值2，    //声明属性2
函数名:function(){} //声明函数
};

变量名.属性;
变量名.函数名();

window.onload = function(){        //页面加载完成之后
//1、查找标签对象
var btn= document.getElementById("btn");
//2、通过标签对象.事件名 = function(){}
btn.onclick = function(){}
}

JavaScript嵌入方式

浏览器加载顺序

• 按从上到下的顺序加载

• 遇到script标签先执行脚本程序，执行完成后再继续加载

window.onload = function(){}

• window对象：代表当前浏览器窗口

• onload事件：当整个文档加载完成后触发

即在script内先声明此函数，等页面文档全部加载完毕之后在触发此函数内的响应事件

DOM

Document Object Model：（文档对象模型）定义了访问和处理 HTML 文档的标准方法。目的其实就是为了能让js操作html元素而制定的一个规范。

HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。

HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性

DOM可以做什么

找对象（元素节点）

设置元素的属性值

设置元素的样式

动态创建和删除元素

事件的触发响应：事件源、事件、事件的驱动程序

document对象

• document对象是window对象的一个属性，代表当前HTML文档，将这个文档抽象成了document对象。

• document对象管理了所有的HTML文档内容。

• 它是包含了整个文档的树形结构，有层级关系。

• 它让我们把所有的标签都对象化。

• 我们可以通过document访问所有的标签对象。

• 获取document对象的本质方法是：window.document，而“window.”可以省略。

在HTML当中，一切都是节点，所有的节点都是Object。

• 文档节点(Document)：DOM标准将整个HTML文档的相关信息封装后得到的对象。

• 元素节点(Element)：DOM标准将HTML标签的相关信息封装后得到的对象。

• 属性节点(Attribute)：DOM标准将HTML标签属性的相关信息封装后得到的对象。

• 文本节点(Text)：DOM标准将HTML文本的相关信息封装后得到的对象。

节点的属性

• nodeName: 代表当前节点的名字，只读属性。如果给定节点是一个文本节点，nodeName 属性将返回内容为 #text 的字符串。

• nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。 1 -- 元素节点 2 -- 属性节点 3 -- 文本节点

• nodeValue：返回给定节点的当前值(字符串)，可读写的属性。

• 元素节点：返回值是 null

• 属性节点： 返回值是这个属性的值

• 文本节点： 返回值是这个文本节点的内容

节点之间的关系指元素节点、和文本节点再加换行节点之间的父子或兄弟关系（标签内的属性可通过元素节点操作）

标签内的属性直接通过元素节点对象来get、set方法获取、设置值就可以了，其标签内的文本值可通过再次获取其元素节点对象的子节点对象来取值或赋值=

文本节点的父节点是包含它的标签就是他的父节点

当然W3C考虑换行也是一个节点，多个换行为一个节点

元素节点

获取DOM节点

通过节点关系获取都是.属性

children：非标准属性。返回的是指定元素的子元素节点的集合。（用的最多）

• 它只返回HTML节点，甚至不返回文本节点。
• 在IE6/7/8中包含注释节点（在IE678中，注释节点不要写在里面）。

虽然不是标准的DOM属性，但它和innerHTML方法一样，得到了几乎所有浏览器的支持。

子节点数组 = 父节点.children;   //获取所有节点。用的最多。

节点操作

上一段的内容：节点的访问关系都是属性。

节点的操作都是函数（方法）

属性节点篇

• 读取属性值：元素对象.属性名

• 修改属性值：元素对象.属性名=新的属性值

  元素节点.getAttribute("属性名称");
  元素节点.setAttribute(属性名, 新的属性值);
  

  元素节点.removeAttribute(属性名);【删除节点】

文本节点篇

• 获取文本值三步曲：

  获取文本节点的父节点

• 获取父节点的第一个子节点： parentEle.firstChild

• 获取文本节点的节点值：parentEle.firstChild.nodeValue