JavaScript简介

一、什么是JavaScript

•JavaScript最早是由Netscape Communication （网景）公司开发出来的一种客户端脚本语言。它是一种通用的、跨平台的、基于对象和事件驱动的解释型脚本语言。它的代码可以直接嵌入在HTML页面中，把静态页面变成支持用户交互并响应相应事件的动态页面。（即时编译）

•livescript  借助 java气场  javascript ->js  最初这种脚本语言只能在网景公司的浏览器—Navigator中使用。为了抢占浏览器市场，微软在其IE浏览器里也加入了对JavaScript的支持，从此JavaScript得到了广泛的支持。目前几乎所有的主流浏览器都支持JavaScript。 microsoft  ->jscript

二、JavaScript可以做什么？

        对表单数据进行验证；(java后台)

操作HTML文档（如读取文档内容，动态写入文本）；

对客户端事件进行响应；

控制浏览器窗口（如打开新窗口，调整窗口大小等）；

创建和读取Cookies；

实现网页特效，提供更好的用户体验。

三、JavaScript不可以做什么？

•JavaScript不允许写服务器上的文件；

•前端 js（基于面向对象）   json/xml(nodeJs服务器端的JS) 前后端进行分离 用NodeJs做数据转换（JSON）        java （对象）

•全栈：js 移动端   前端  服务器端（nodeJs）

•JavaScript不可以关闭不是由它自己打开的窗口；

•JavaScript不能读取已经打开的其他窗口中的信息；

四、JavaScript的基本特点

•解释性—JavaScript不同于一些编译性的语言，如C、C++等，它是一种解释性的语言，它的源代码不需要经过编译，而是在浏览器中运行时被解释。（现在有一种新的说法叫即时编译）

•基于对象—JavaScript是一种基与对象的语言，它内置了多种对象并允许用户自己创建对象。

•事件驱动—JavaScript可以直接对用户的输入做出响应，无需经过Web服务程序，它对用户的响应，是以事件（如鼠标事件、键盘事件）驱动的方式进行的。

•跨平台—JavaScript是一种跨平台的语言，它依赖于浏览器本身，与操作系统无关。只要计算机能运行浏览器，并且浏览器支持JavaScript就可执行。

五、JavaScript的发展历史

•微软推出Jscript，这意味着有了两个不同版本的JavaScript：Navigator中的JavaScript和IE中的Jscript。由于没有标准规定JavaScript的语法和特性，两个不同版本并存的局面暴露出各种问题，JavaScript的标准化被提上了议事日程。

•1997年，以JavaScript1.1为蓝本的建议被提交给了欧洲及技术制造商协会（ECMA)，该协会指定39号技术委员会负责JavaScript的标准化工作。经过数月的努力，一种名为ECMAScript的脚本语言标准被定义完成，它被称为ECMA-262。 ES5(对javaScript进行规范)

•ES6  es2015  es2016 es2017 es2018 可以在js 中写类

•全是JAVA的思想  nodejs用的全是ES6的语法 ES6支持ES5的严格模式.

•1998年，ISO/IEC（国际标准化组织和国际电工委员会）也采用了ECMAScript做为标准。自此以后，浏览器开发商就开始致力于将ECMAScript做为各自JavaScript实现的基础。

六、JavaScript的构成

一个完整的JavaScript实现由三个不同的部分组成：

•核心（ECMAScript）

•文档对象模型（DOM）为了读写文件提供了一个接口 xml

•html  js

•浏览器对象模型（BOM）window->document/history/screen

六、JavaScript的构成

•ECMAScript

 它规定了JavaScript这门语言的一些组成部分：语法、类型、语句、关键字、保留字、操作符、对象。它与WEB浏览器之间没有依赖关系。实际上，这门语言本身并不包含输入和输出定义。ECMA-262只定义这门语言的基础，而在此基础之上可以构件更完善的脚本语言。常见的web浏览器只是ECMAScript实现可能的宿主环境之一。宿主环境不仅提供基本的ECMAScript实现，同时也会提供该语言的扩展，以便语言与环境之间的对接交互。而这些扩展——如DOM，则利用EMAScript的核心类型和语法提供更多更具体的功能，以便实现针对环境的操作，其他的宿主环境包括Node（一种服务器端javascript平台）和Adobe Flash

ECMA-262标准没有参照web浏览器，它规定了这门语言的下列如下组成部分：

   语法

   类型

   关键字

   保留字

   操作符

   对象

ECMAScript就是对实现标准规定的各个方面内容的语言的描述。JavaScript实现了ECMAScript,Adobe ActionScript同样也实现了ECMAScript. flex开发 vbscript

ECMAScript的版本

   ECMAScript的不同版本又称为版次，以第X版表示（意即描述特定实现的ECMA-262规范的第X个版本）ECMA-262的2009版称为ES5  2015版称为 ES6又称为 ES2015

ECMAScript兼容

 支持ECMA-262描述的所有“类型、值、对象、函数以及程序句法及语法”

支持Unicode字符标准

•DOM-文档对象模型（DOM Document Object Model）

  是针对XML但经过扩展用于HTML的应用程序编程接口（API Application Programming Interface）。DOM把整个页面映射为一个多层节点结构。HTML 或XML页面中的每个组成部分都是某种类型的节点，这些节点有包含着不同类型数据 。

1.为什么要使用DOM

   在IE4和 Netscape Navigator 4分别支持不同类型的DHTML（Dynamic HTML）基础上，开发人员无需重新加载网页，就可以修改其外观和内容了。然而，DHTML在web技术发展带来巨大进步的同时，也带来了巨大的问题。由于Netscape和微软在开发DHTML方面各抒己见，过去那个只编写一个HTML页面就能够在任何浏览器中运行的时代结束了。

   对开发人员而言，如果想继续保持web跨平台的天性，就必须额外多做一些工作，而人们真正担心的是，如果不对NetScape和微软加以控制，Web开发领域就会出现技术上两强割据，浏览器互不兼容的局面。

此时，负责制定web标准的W3C（World Wide Web Consortium 万维网联盟）开始着手规划DOM.

2.DOM级别

 DOM1级（DOM Level 1）于1998年10成为W3C推荐标准。DOM1级由两个模块组成：DOM核心（DOM core）和DOM HTML .其中，DOM核心规定的是如何映射基于XML的文档结构，以便简化对文档中任意部分的访问和操作。DOM HTML 模块则在DOM核心的基础上加以扩展，添加了针对HTML的对象和方法。

DOM并不是针对Javascript的，很多别的语言也都实现了DOM。不过，在web浏览器中，基于ECMAScript实现的DOM的确已经成为了JavaScript这门语言的一个重要组成部分。

DOM2级在原来DOM的基础上又扩充了鼠标和用户界面事件、范围、遍历（迭代DOM文档的方法）等细分模块，而且通过对象接口增加了对CSS（Cascading style sheets ）的支持。

DOM2级引入了下列新模块，也给出了众多新类型和新接口的定义：

 DOM视图（DOM views）定义跟踪不同文档视图的接口

 DOM事件（DOM Event）定义了事件和事件处理的接口

 DOM样式（DOM Style）定义了基于CSS为元素应用样式的接口

DOM遍历和范围（DOM Traversal and range）定义了遍历和操作文档数的接口。

DOM3级则进一步扩展了DOM，引入了以统一方式加载和保存文档的方法—在DOM加载和保存（DOMLoad and Save）模块中定义，新增了验证文档的方法——在DOM验证（DOM Validate）模块中定义。

3.其他DOM标准

  除了DOM核心和DOM HTML 接口之外，另外几种语言还发布了只针对自己的DOM标准。下面列出的语言都是基于XML的，

每种语言的DOM标准都添加了与特定语言相关的新方法和新接口

SVG（Scalable Vector Graphic 可伸缩矢量图）

MathML（Mathematical Markup Language 数学标记语言）

SMIL（Synchronized Multimedia Integration Language）

同步多媒体集成语言。

六、JavaScript的构成

•BOM（Browser Object Model）-浏览器对象模型

  可以对浏览器窗口进行访问和操作，由于没有相关的BOM标准，每种浏览器都有自己的BOM实现。这个问题在HTML5中得到了解决，HTML5致力于把很多BOM功能写入正式规范。

BOM只处理浏览器窗口和框架，习惯上把所有针对浏览器的Javascript扩展算作BOM的一部分。  

主要实现：

      1、弹出新窗口（window.open()）

      2、移动、缩放和关闭浏览器窗口

      3、提供浏览器详细信息(navigator)

      4、对Cookie的支持

•JavaScript中可以使用的开发工具主要有两大类，一类是基本的文本编辑工具，一类是专业可视化开发工具。

1.文本编辑工具：UltraEdit、EditPlus、Notepad++、记事本…

2.可视化的集成开发工具：Dreamweaver、NetBeans…

•调试JavaScript脚本

  Firefox中Firebug一款功能强大的JavaScript脚本调试器，它不仅可以调试JavaScript脚本，还具备了DOM查看、CSS可视化查看、HTTP监控等多种功能。

script元素

  HTML4.01 为<script>定义了下列6个属性：

 async:可选 表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本，只对外部脚本文件有效。

charset:可选，表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

defer:可选，表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。html5

language:已废弃 原来用于表示编写代码使用的脚本语言（如：Javascript,JavaScript2.1 或VBScript）大多数浏览器会忽略这个属性，因此也没有必要使用了。

src:可选 表示包含要执行代码的外部文件。

type：可选 可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也被称为MIME类型）虽然text/javascrpt 和 text/ecmscript都已经不被推荐使用了，但人们一直以来使用的都还是 text/javascript.实际上，服务器在传送Javascript文件时使用的MIME类型通常是application/x-javascript.如果没有指定这个属性，则其默认值仍为text/javascript.

使用script元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部Javascript文件。

script的位置

传统的做法，所有script标签都应该放在页面的head元素中。

这种做法的目的就是把所有外部文件(包括CSS文件和JavaScript文件)的引用都放在相同的地方。可是在文档的head元素中包含所有JavaScript文件，意味着必须等到全部JavaScript代码都被下载解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到body标签时才开始呈现内容）。对于那些需要很多javascript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。为了避免这一问题，现代Web应用程序一般都把全部javascript引入引用放在body元素中页面内容的后面。

延迟脚本

HTML4.01的属性这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。延迟脚本也最好放在页面的底部。

  <script src="index.js" defer="defer"></script>

异步脚本

HTML5为script元素定义了async属性。async只适用于外部脚本，并告诉浏览器立即下载文件。

 <script src="index.js" async></script>

嵌入代码与外部文件

  在HTML中嵌入javascript代码虽然没有问题，但一般认为最好的办法还是尽可能使用外部文件来包含外部javascript代码。使用外部文件有如下优点：

  可维护性：遍及不同HTML页面的javascript会造成维护问题，但把所有javascript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员也能够在不触及HTML标记的情况下，集中精力编辑javascript代码。

可缓存：浏览器能够根据具体的设置缓存链接的所有外部Javascript文件。如果有两个页面都使用同一个文件，那个这个文件只需下载一次。

面向未来：可以是适用于HTML的各个版本。（HTML4.01，XHTML、HTML5）

八、在HTML中使用JavaScript

•使用<script>元素的方式

   1、直接在HTML页面中嵌入JavaScript代码

   2、包含外部JavaScript文件

•外部脚本的位置

  将JavaScript脚本放在文档的<head>元素中，意味着必须等到全部JavaScript代码被下载、解析、和执行完成以后，才能开始呈现页面的内容。对于那些需要很多JavaScript代码的页面来说，这无疑会导致浏览器呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。为了避免这个问题，Web应用程序可以把全部JavaScript脚本放在<body>元素页面内容的后面。

  

HTML5为script元素定义了async属性。async只适用于外部脚本，并告诉浏览器立即下载文件。

 <script src="index.js" async></script>