JavaScript简介--学习笔记

时间  2019-11-19 标签 javascript 简介 学习 笔记
1、JavaScript概述：
javascript是一种具备面向对象能力的、解释型的程序设计预言。更具体一点：它是基于对象和事件驱动并具备相对安全性的客户端脚本语言。由于它不须要在一个语言环境下运行，而只须要支持它的浏览器便可。它的主要目标是，验证发往服务器端的数据、增长web互动性、增强用户体验度等。
基于对象和事件驱动的且相对安全的客户端使用的脚步预言。使用javascript的时候
  • 肯定对象
  • 肯定事件
  • 肯定属性
  • 用JS实现功能
 
2、JavaScript的特色:
  • 松散性
  • 对象属性
  • 继承机制     //基于原型的
 
3、 javascript的核心: //知识点
名称解释：
ECMA: European Computer Manufacturers Association 欧洲计算机制造商协会(制定信息传输与通信的国际化标准组织)
ISO/IEC: International Organization for Standardization and International Electrotechnical
Commission(国标标准化组织和国际电工委员会)
ECMAScript: ECMA制定的标准化脚本语言
ECMA-262: ECMA指定了JavaScript的标准ECMA-262(定义一种名为 ECMAScript 的新脚本语言的标准)
 
  1. 核心(ECMAScript)
ECMAScript 就是对实现该标准规定的各个方面内容的语言的描述。
ECMA-262 定义的 ECMAScript 与 Web 浏览器没有依赖关系。实际上，这门语言自己并不包含输入和输出定义。 ECMA-262 定义的只是这门语言的基础，而在此基础之上能够构建更完善的脚本语言。
咱们常见的 Web 浏览器只是 ECMAScript 实现可能的宿主环境之一。宿主环境不只提供基本的ECMAScript 实现，同时也会提供该语言的扩展，以便语言与环境之间对接交互。而这些扩展——如DOM，则利用 ECMAScript 的核心类型和语法提供更多更具体的功能，以便实现针对环境的操做。其余宿主环境包括 Node（一种服务端 JavaScript 平台）和 Adobe Flash。
既然 ECMA-262 标准没有参照 Web 浏览器，那它都规定了些什么内容呢？大体说来，它规定了这门语言的下列组成部分：
  1. 语法
  2. 类型
  3. 语句
  4. 关键字
  5. 保留字
  6. 操做符
  7. 对象
版本与兼容：
应该基本都支持ECMAScript 5.0
 
  1. 文档对象模型DOM
文档对象模型（DOM， Document Object Model）：是针对 XML 但通过扩展用于 HTML 的 应用程序编程接口（API， Application Programming Interface）。 DOM 把整个页面映射为一个多层节点结构。 HTML或 XML 页面中的每一个组成部分都是某种类型的节点，这些节点又包含着不一样类型的数据。 
DOM级别：W3C标准：DOM一、DOM二、DOM3/其余 DOM 标准
DOM1 级由两个模块组成： DOM核心（DOM Core）和 DOM HTML。其中， DOM 核心规定的是如何映射基于 XML 的文档结构，以便简化对文档中任意部分的访问和操做。 DOM HTML 模块则在 DOM 核心的基础上加以扩展，添加了针对 HTML 的对象和方法。
DOM2 级在原来 DOM 的基础上又扩充了（DHTML 一直都支持的）鼠标和用户界面事件、范围、遍历（迭代 DOM文档的方法）等细分模块，并且经过对象接口增长了对 CSS（Cascading Style Sheets，层叠样式表）的支持。 DOM1 级中的 DOM 核心模块也通过扩展开始支持 XML 命名空间。
DOM3 级则进一步扩展了 DOM，引入了以统一方式加载和保存文档的方法——在 DOM 加载和保存（DOM Load and Save）模块中定义；新增了验证文档的方法——在 DOM 验证（DOM Validation）模块中定义。 DOM3 级也对 DOM 核心进行了扩展，开始支持 XML 1.0 规范，涉及 XML Infoset、 XPath和 XML Base。
替他标准：
    1. SVG（Scalable Vector Graphic，可伸缩矢量图） 1.0；
    2. MathML（Mathematical Markup Language，数学标记语言） 1.0；
    3. SMIL（Synchronized Multimedia Integration Language，同步多媒体集成语言）。
还有一些语言也开发了本身的 DOM 实现，例如 Mozilla 的 XUL （XML User Interface Language，XML用户界面语言）。可是，只有上面列出的几种语言是 W3C 的推荐标准。
备注：DOM 并不仅是针对 JavaScript 的，不少别的语言也都实现了 DOM。不过，在 Web 浏览器中，基于 ECMAScript 实现的 DOM 的确已经成为 JavaScript 这门语言的一个重要组成部分。
Web 浏览器对 DOM 的支持
 
  1. 浏览器对象模型BOM
从根本上讲， BOM 只处理浏览器窗口和框架；但人们习惯上也把全部针对浏览器的 JavaScript 扩展算做 BOM 的一部分。
因为没有 BOM 标准能够遵循，所以每一个浏览器都有本身的实现。虽然也存在一些事实标准，例如要有 window 对象和 navigator 对象等，但每一个浏览器都会为这两个对象乃至其余对象定义本身的属性和方法。如今有了 HTML5， BOM 实现的细节有望朝着兼容性愈来愈高的方向发展。
下面就是一些这样的扩展(经常使用功能)：
  • 弹出新浏览器窗口的功能；
  • 移动、缩放和关闭浏览器窗口的功能；
  • 提供浏览器详细信息的 navigator 对象；
  • 提供浏览器所加载页面的详细信息的 location 对象；
  • 提供用户显示器分辨率详细信息的 screen 对象；
  • 对 cookies 的支持；
  • 像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象。
 
4、 javascript的历史与版本：
...
 
5、 javascript的使用方法：
 
  1. <script>元素
    1. <script>属性：
async：可选。表示应该当即下载脚本，但不该妨碍页面中的其余操做，好比下载其余资源或等待加载其余脚本。只对外部脚本文件有效。
charset：可选。表示经过 src 属性指定的代码的字符集。因为大多数浏览器会忽略它的值，所以这个属性不多有用。
defer：可选。表示脚本能够延迟到文档彻底被解析和显示以后再执行。只对外部脚本文件有效。 IE7 及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原来用于表示编写代码使用的脚本语言（如 JavaScript、JavaScript1.2或 VBScript）。大多数浏览器会忽略这个属性，所以也没有必要再用了。
src：可选。表示包含要执行代码的外部文件。
type：可选。能够当作是 language 的替代属性；表示编写代码使用的脚本语言的内容类（也称为 MIME 类型）。虽然 text/javascript 和 text/ecmascript 都已经不被推荐使用，但人们一直以来使用的都仍是 text/javascript。实际上，服务器在传送 JavaScript 文件时使用的MIME 类型一般是 application/x–javascript，但在 type 中设置这个值却可能致使脚本被忽略。另外，在非 IE浏览器中还可使用如下值：application/javascript 和 application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前 type 属性的值依旧仍是text/javascript。不过，这个属性并非必需的，若是没有指定这个属性，则其默认值仍为text/javascript。
 
    1. <script>使用方法：
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
<script type="text/javascript" src="example.js"></script>
 
    1. <script>放置位置：
<!DOCTYPE html> //传统的放置方法
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在文档的<head>元素中包含全部 JavaScript 文件，意味着必须等到所有 JavaScript 代码都被下载、解析和执行完成之后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些须要不少 JavaScript 代码的页面来讲，这无疑会致使浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了不这个问题，现代 Web 应用程序通常都把所有 JavaScript 引用放在<body>元素中页面内容的后面，以下例所示：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
</head>
<body>
<!-- 这里放内容 -->
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</body>
</html>
这样，在解析包含的 JavaScript 代码以前，页面的内容将彻底呈如今浏览器中。而用户也会由于浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了
 
    1. 延迟脚本
HTML 4.01 为<script>标签订义了 defer 属性。这个属性的用途是代表脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。所以，在<script>元素中设置defer 属性，至关于告诉浏览器当即下载，但延迟执行。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在这个例子中，虽然咱们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。 HTML5 规范要求脚本按照它们出现的前后顺序执行，所以第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于 DOMContentLoaded 事件 （详见第 13 章）执行。在现实当中，延迟脚本并不必定会按照顺序执行，也不必定会在DOMContentLoaded 事件触发前执行，所以最好只包含一个延迟脚本。
defer 属性只适用于外部脚本文件。这一点在 HTML5 中已经明确规定，所以支持HTML5 的实现会忽略给嵌入脚本设置的 defer 属性。
 
    1. 异步脚本
HTML5 为<script>元素定义了 async 属性。这个属性与 defer 属性相似，都用于改变处理脚本的行为。一样与 defer 相似， async 只适用于外部脚本文件，并告诉浏览器当即下载文件。但与 defer不一样的是，标记为 async 的脚本并不保证按照指定它们的前后顺序执行。例如：
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
在以上代码中，第二个脚本文件可能会在第一个脚本文件以前执行。所以，确保二者之间互不依赖很是重要。指定 async 属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其余内容。为此，建议异步脚本不要在加载期间修改 DOM。异步脚本必定会在页面的 load 事件前执行，但可能会在 DOMContentLoaded 事件触发以前或以后执行。支持异步脚本的浏览器有 Firefox 3.六、 Safari 5 和 Chrome。
 
    1. 在XHTML中的用法
 
    1. 不推荐的使用方法
 
 
  1. 嵌入代码和外部代码
在 HTML 中嵌入 JavaScript 代码虽然没有问题，但通常认为最好的作法仍是尽量使用外部文件来包含 JavaScript 代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调以下优势。
可维护性：遍布不一样 HTML 页面的 JavaScript 会形成维护问题。但把全部 JavaScript 文件都放在一个文件夹中，维护起来就轻松多了。并且开发人员所以也可以在不触及 HTML 标记的状况下，集中精力编辑 JavaScript 代码。
可缓存：浏览器可以根据具体的设置缓存连接的全部外部 JavaScript 文件。也就是说，若是有两个页面都使用同一个文件，那么这个文件只需下载一次。所以，最终结果就是可以加快页面加载的速度。
适应将来：经过外部文件来包含 JavaScript 无须使用前面提到 XHTML 或注释 hack。 HTML 和XHTML 包含外部文件的语法是相同的。
 
  1. 文档模式
IE5.5 引入了文档模式的概念，而这个概念是经过使用文档类型（doctype）切换实现的。
若是在文档开始处没有发现文档类型声明，则全部浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的作法，由于不一样浏览器在这种模式下的行为差别很是大，若是不使用某些 hack 技术，跨浏览器的行为根本就没有一致性可言。
 
对于标准模式，能够经过使用下面任何一种文档类型来开启：
<!-- HTML 4.01 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<!-- XHTML 1.0 严格型 -->
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!-- HTML 5 -->
<!DOCTYPE html>
 
而对于准标准模式，则能够经过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，以下所示：
<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
 
<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
 
 
  1. <noscript>元素
　　在不支持 JavaScript 的浏览器中显示替代的内容。这个元素能够包含可以出如今文档<body>中的任何 HTML 元素——<script>元素除外。包含在<noscript>元素中的内容只有在下列状况下才会显示出来：
  • 浏览器不支持脚本；
  • 浏览器支持脚本，但脚本被禁用。
 1 <html>
 2 　　<head>
 3　　　　 <title>Example HTML Page</title>
 4　　　　 <script type="text/javascript" defer="defer" src="example1.js"></script>
 5　　　　 <script type="text/javascript" defer="defer" src="example2.js"></script>
 6　　 </head>
 7 　　<body>
 8    　　 <noscript>
 9         　　<p>本页面须要浏览器支持（启用） JavaScript。</p>
10     　　</noscript>
11 　　</body>
12 </html>

这个页面会在脚本无效的状况下向用户显示一条消息。而在启用了脚本的浏览器中，用户永远也不会看到它——尽管它是页面的一部分。javascript

联系我们 沪ICP备13005482号-10