JavaScript简介

前端三元素

HTML：通过各种元素搭建页面结构
CSS：负责页面样式：形状、大小、颜色、动画等
JavaScript：控制页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript的概念

JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。

虽然JavaScript与Java这门语言不管是在名字上，或是在语法上都有很多相似性，但这两门编程语言从设计之初就有很大的不同，JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响。在语法结构上它又与C语言有很多相似（例如if条件语句、switch语句、while循环、do-while循环等）。

在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行。随着最新的HTML5和CSS3语言标准的推行它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行，如Node.js。

JavaScript的运行原理

此小节内容转自文章：https://www.cnblogs.com/amy2011/archive/2013/06/11/3131565.html

宿主环境

JS的运行环境一般由宿主环境和执行期环境共同构成，宿主环境是由外壳程序(如web浏览器就是一个外壳程序)生成，执行期环境是由嵌入到外壳程序中的JS引擎(/JS解释器)生成的，在执行期环境JS可以生成内置静态对象、初始化执行环境等。

宿主环境一般由外壳程序创建和维护，在一个宿主环境中可以运行多种脚本语言(如JavaScript)，以虚拟机的方式提供一个跨语言跨平台的宿主环境。
宿主环境一般会创建一套公共对象系统，该系统对所有脚本都开放，允许它们自由访问，还提供了公共接口，用来装载不同的脚本语言引擎。
脚本语言本身并不提供IO，也没有与系统和外界通信的能力，更不存在管理内存，修改注册表等行为，这些行为全部由宿主环境完成
外壳程序不仅是web浏览器，任何可以提供JS引擎执行环境的都可以称之为外壳程序，外壳程序还可以利用符合标准的扩展接口接纳更多的插件、组件或ActiveX控件等DLL应用
执行期环境是由宿主环境通过脚本引擎创建的一个代码解析初始化环境。

Js的解析过程

1.编译：
预处理，在这一过程中，JS解释器完成对JS代码的预处理，即将JS脚本代码转换成字节码。

2.运行：
在这一阶段，将编译结束时生成的字节码转换成机械码，按顺序执行。
JS是一种解释型语言，所谓解释型是指代码在执行时被解释器一行一行动态编译和执行，而不是执行前完成编译，即边编译边执行，一般的编译性语言的编译过程是由编译器完成，进行词法分析、语法分析、语义检查、代码优化、最后生成字节码，JS的是词法分析、语法分析，建立语法树，开始解释执行。

3.执行期：
JS引擎按着作用域机制来执行，JS的变量和函数作用域是在定义时决定的，而不是执行时才决定的，所以JS解释器只需要通过静态分析就能确定每个变量和函数的作用域，这种作用域称为静态作用域，当JS解释器执行函数时，先创建一个执行环境，在这个执行环境中创建一个调用对象，在这个对象内存储当前域中所有的局部变量、参数、嵌套函数、外部引用和父级引用列表等，通过声明语句定义的变量和函数在预编译阶段就已经存储到符号表中了，然后把它们与调用对象中的同名属性进行映射即可。调用对象的生命周期和函数的生命周期一致，JS解释器通过作用域链将多个嵌套的作用域连在一起，并利用该链条来检索变量的值。

参考Js运行原理介绍、Js运行视频详解

ES6开启JavaScript的新时代

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。
ECMAScript 和 JavaScript 的关系是，前者是后者的标准，后者是前者的一种实现（另外的ECMAScript 方言还有 Jscript 和 ActionScript）。
ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了ES2015、ES2016、ES2017 等等.

DOM的学习

DOM介绍

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model），它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。
浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree），所有的节点和最终的树状结构，都有规范的对外接口。
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

学习DOM

本文会介绍常用的DOM类型，想了解更多的朋友可以参考链接：https://wangdoc.com/javascript/dom/index.html

Docunent节点

document.links //返回当前文档所有设置href的<a>和<area>节点
document.location //返回当前网页位置,协议以及主机名
document.URL //返回当前网页位置
document.tittle //返回当前文档的标题,默认情况下，返回<title>节点的值,但是该属性是可写的，一旦被修改，就返回修改后的值
document.cookie //显示当前角色的cookie信息
document.querySelector() //接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点;如果没有发现匹配的节点，则返回null
document.getElementsByTagName() //搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集
document.getElementsByClassName() //返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素，元素的变化实时反映在返回结果中。

Node接口

var div = document.getElementById('d1');
div.nodeName //找到'd1'节点，并且返回d1的节点名称
div.textContent //返回当前节点和它的所有后代节点的文本内容
div.nextSibling //返回紧跟在当前节点后面的第一个同级节点;如果当前节点后面没有同级节点，则返回null
div.parentNode //返回当前节点的父节点
div.childNodes //返回一个类似数组的对象（NodeList集合），成员包括当前节点的所有子节点

Element节点

Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点;
Element.className属性返回一个类似数组的对象，当前元素节点的每个class就是这个对象的一个成员。
Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括和元素。

属性的操作

HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性”（attribute）.

Element.getAttribute方法返回当前元素节点的指定属性。如果指定属性不存在，则返回null。
Element.setAttribute方法用于为当前元素节点新增属性。如果同名属性已存在，则相当于编辑已存在的属性。

CSS操作

CSS 与 JavaScript 是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);

上面的Js代码等同于下面的HTML代码：

<div style="background-color:red; border:1px solid black;" />

window.getComputedStyle方法，用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。

var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
styleObj.backgroundColor

上面代码中，得到的背景色就是div元素真正的背景色；
关于DOM的学习就到这里，想了解更多的朋友可以访问上面的网页：https://wangdoc.com/javascript/dom/index.html

【Web开发前端知识】- JavaScript(5)