moon javaScript简介　第１章和　在ＨＴＭＬ中使用ｊａｖａＳｃｒｉｐｔ第２章

Posted 2020-06-09

  javascript基础知识

　　　　　ｊavaScript 是脚本语言

　　　　　　　　　　　是一种轻量级的编程语言。

　　　　　　　　　　　是可插入 html 页面的编程代码。

　　　　　　　　　　　插入 HTML 页面后，可由所有的现代浏览器执行。

             javaScript由3个不同的不封组成：核心（ECMAScript）

                                                      文档对象模型（DOM）

                                                      浏览器对象模型（BOM）

            １．１  ECMAScript：定义了JavaScript基础。web浏览器只是ECMAScript实现的宿主环境之一（宿主环境）

                              组成部分：a 语法  b 类型  c 语句 d 关键字 e 保留字 f 操作符 g 对象

                               ECMA:    European Computer Manufacturers Association 欧洲计算机制造商协会

                               ECMAScript协议标准由39号技术委员会制定（TC39，Technical Committee#39）

             １．２ DOM  :     Document Object Model 是针对XML但经过拓展用于HTML的应用程序接口（API，Application Programming Interface）

                            DOM把整个页面映射为一个多层次节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点，这些节点都包含某种

                            不同类型的数据。

                            W3C（World Wide Web Consortium，万维网联盟：负责制定通信 标准）着手规划DOM

                             DOM的级别: DOM1由两模块组成 a,DOM核心（ＤＯＭ　Ｃｏｒｅ）　和　ＤＯＭ HTML

                                              　　　　　　　　　　　　　　　DOM核心：映射基于XML的文档结构，以便简化对文档的任意部分访问和操作
                                             　　　　　　　　　　　　　　　DOM HTML模块则在ＤＯＭ核心基础上加以拓展，添加正对ＨＴＭＬ的对象和想法

　　　　　　　　　　　　　　　　　ＤＯＭ２：　在ＤＯＭ１基础上引入　ＤＯＭ试图（DOM Views):定义了跟踪不同文档试图的接口。

                                                                                         DOM 事件（DOM Events）：定义了事件和事件处理的接口。

                                                                                         DOM样式（ＤＯＭ　Ｔｒａｖｅｒｓａｌ　ａｎｄ　Ｒａｎｇｅ）：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　定义了遍历和操作树的接口。

　　　　　　　　　　　　　　　　　ＤＯＭ３：在DOM2的基础之上        DOM加载和保存（DOM Load and Save）:引入以统一方式加载和保存文档的方式接口

                                                                                         ＤＯＭ验证（ＤＯＭ　Ｖａｌｉｄａｔｉｏｎ）：定义了验证文档方法的接口

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　对ＤＯＭ核心的拓展

　　　　　１．３ＢＯＭ：　Ｂｒｏｗｓｅｒ　Ｏｂｊｅｃｔ　Ｍｏｄｅｌ。支持可以访问和操作浏览器窗口浏览器对象模型（其中ｗｉｎｄｏｗ对象和ｎａｖｉｇａｔｏｒ对象）

　　　　　　　　　　　　　　　　　从根本上讲，ＢＯＭ只处理浏览器与窗口和框架，惯常也讲所有针对浏览器的ＪａｖａＳｃｒｉｐｔ拓展算作ＢＯＭ的一部分（如下）　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　弹出浏览器窗口的功能

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　移动、缩放、和关闭浏览器窗口的功能

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　提供浏览器详细信息的Ｎａｖｉｇａｔｏｒ对象

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　提供浏览器所加载页面的详细信息的ｌｏｃａｔｉｏｎ对象

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　提供用户显示器分辨率详细信息的ｓｃｒｅｅｎ对象

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　对ｃｏｏｋｉｅｓ的支持

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　像ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ和ＩＥ的ＡｃｔｉｖｅＸＯｂｊｅｃｔ这样的自定义对象的支持

 

 

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　在ＨＴＭＬ中使用ＪａｖａＳｃｒｉｐｔ

　　　　　本章主要内容：＜ｓｃｒｉｐｔ＞元素（重点）

　　　　　　　　　　　　嵌入代码与外部文件

　　　　　　　　　　　　文档模式

　　　　　　　　　　２．１＜ｓｃｒｉｐｔ＞元素

　　　　　　　　　　　　　　　属性：

　　　　　　　　　　　　　　　　　　　ａｓｙｎｃ：可选属性，表示应该立即下载脚本，但不妨碍页面中的其它操作，比如下载其他资源或等待加载其他脚本

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　注意，只对外部脚本文件有用

　　　　　　　　　　　　　　　　　　　ｃｈａｒｓｅｔ：可选属性，表示通过ｓｒｃ属性指定的代码字符集。大多数浏览器会忽略这个属性值。故这一属性基本不用

　　　　　　　　　　　　　　　　　　　ｄｅｆｅｒ：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　注意，只对外部脚本文件有效

　　　　　　　　　　　　　　　　　　　ｓｒｃ：　可选。表示包含要执行代码的外部文件

　　　　　　　　　　　　　　　　　　　　　　　　　　外部的 JavaScript

　　　　　　　　　　　　　　　　　　　　　　　　　　　　也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　外部 JavaScript 文件的文件扩展名是 .js。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　外部脚本不能包含 <script> 标签。【见于Ｗ３Ｃ学习网站】

　　　　　　　　　　　　　　　　　　　　ｔｙｐｅ：可选，表示编写代码使用脚本语言的内容类型（也称为ＭＩＭＥ类型）。实际上服务器在传送ｊａｖａＳｃｒｉｐｔ

　　　　　　　　　　　　　　　　　　　　　　　　　　　　文件是使用的ＭＩＭＥ类型通常是ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｊａｖａｓｃｒｉｐｔ，在ｔｙｐｅ设置这一值

　　　　　　　　　　　　　　　　　　　　　　　　　　　　ａｐｐｌｉｃａｔｉｏｎ／ｘ－ｊａｖａｓｃｒｉｐｔ脚本会忽略，ｔｙｐｅ的值用的最多的是

　　　　　　　　　　　　　　　　　　　　　　　　　　　　ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ，这一值不是必须的许多浏览器默认值就是ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ

　　　　　　　　使用＜ｓｃｒｉｐｔ＞元素的方式有两种：直接在页面中嵌入ＪａｖａＳｃｒｉｐｔ代码

　　　　　　　　　　　　　　　　　　　　　　　　　　　包含外部ＪａｖａＳｃｒｉｐｔ文件

　　　　　　　　２１.１.１＜ｓｃｒｉｐｔ＞标签的位置：

　　　　　　　　　　　　　传统做法，所有＜ｓｃｒｉｐｔ＞元素放在＜ｈｅａｄ＞元素中，　

　　　　　　　　　　　　　目的：把所有外部文件（包括ＣＳＳ和ＪａｖａＳｃｒｉｐｔ文件）的引用都放在相同的地方

　　　　　　　　　　　　　在文档＜ｈｅａｄ＞元素中包含的ｊａｖａｓｃｒｉｐｔ文件意味着：必须等到全部ＪａｖａＳｃｒｉｐｔ代码被下载、

　　　　　　　　　　　　　解析　　、和执行完成之后，才能呈现页面内容（浏览器遇到＜ｂｏｄｙ＞标签时才开始呈现内容）对于那些需要很多ＪａｖａＳｃｒｉｐｔ

　　　　　　　　　　　　　代码的页面导致呈现页面出现明显延迟（延迟期间浏览器窗口是一片空白）

　　　　　　　　　　　　　故　现代Ｗｅｂ应用程序讲全部ＪａｖａＳｃｒｉｐｔ引用放在＜ｂｏｄｙ＞元素中页面内容的后面【在解析ＪＳ代码

　　　　　　　　　　　　　之前，页面内容将呈现在浏览器中。用户会因浏览器窗口的空白页面缩短而感到打开页面的速度加快】

　　　　　　　　　　　　　注意　在＜ｓｃｒｉｐｔ＞元素内部不要出现＜／ｓｃｒｉｐｔ＞这表示结束标签　会报错。如需用到需要使用转义字符“＼”

　　　　　　　　　　　　　例子　：ａｌｅｒｔ｛“＜＼／ｓｃｒｉｐｔ＞”｝　

　　　　　　　　　　　　　如＜ｓｃｒｉｐｔ＞元素中包含外部文件　ｓｒｃ属性是必须的　外部文件会加载到当前页面当中

　　　　　　　　　　　　　注意：＜ｓｃｒｉｐｔ　ｔｙｐｅ＝＂ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ＂　ｓｒｃ＝＂ｅｘａｍｐｌｅ．ｊｓ＂／＞　不符合ＨＴＭＬ

　　　　　　　　　　　　　规范　　不能正确解析

　　　　　　　　　　　　　外部的ＪａｖａＳｃｒｉｐｔ文件带有．ｊｓ拓展名。但不是必须的、

　　　　　　　　　　　　　带有ｓｒｃ属性的＜ｓｃｒｉｐｔ＞元素不应该在＜ｓｃｒｉｐｔ＞＜／ｓｃｒｉｐｔ＞之间再包含ＪａｖａＳｃｒｉｐｔ代码，若包含

　　　　　　　　　　　　　嵌入的代码会忽略，只会执行外部脚本文件

　　　　　　　　　　　　　ｓｒｃ属性可以是指向ＨＴＭＬ页面所在域外的某个域中完整的ＵＲＬ，

　　　　　　　　　　　　　　＜ｓｃｒｉｐｔ　ｔｙｐｅ＝“ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”　

　　　　　　　　　　　　　　　ｓｒｃ＝＂ｈｔｔｐ：／／ｗｗｗ／ｓｏｍｅｗｈｅｒｅ．ｃｏｍ／ａｆｉｌｅ／ｊｓ＂＞＜ｓｃｒｉｐｔ＞

　　　　　　　　　　　　　　位于外部域中的代码会被加载和解析，像这些代码位于加载它们的页面中一样、利用这一点可以在必要时通过不同域来提供ＪａｖａＳｃｒｉｐｔ

　　　　　　　　　　　　　　文件，不过可要小心，要么你是域的所有者，要么那个域的所有者值的信赖

　　　　　　　　　　　　浏览器会按照＜ｓｃｒｉｐｔ＞元素在页面中的出现的先后顺序对他们进行依次解析｛只要不存在　ｄｅｆｅｒ　和ａｓｙｎｃ｝即第一个

　　　　　　　　　　　　＜ｓｃｒｉｐｔ＞解析完成后，第二个＜ｓｃｒｉｐｔ＞才会被解析，然后第３个，第４个

　　　　　　　　２１.２延迟脚本

　　　　　　　　　　　　＜ｓｃｒｉｐｔ＞标签的ｄｅｆｅｒ属性：表明脚本在执行时，不会影响页面的构造即脚本会被延迟到整个页面都解析完毕

　　　　　　　　　　　　后再运行　　　　ｄｅｆｅｒ属性相当告诉浏览器立即下载，但延迟执行

　　　　　　　　　　　　理想状态：　多个延迟脚本时　按照他们出现的先后顺序执行，即第一个延迟脚本优先于第二个延迟脚本执行，而这两个

　　　　　　　　　　　　　　　　　　延迟脚本会优先于ＤＯＭＣｏｎｔｅｎｔＬｏａｄｅｄ事件，

　　　　　　　　　　　　现实情况：　多个延迟脚本的执行不是顺序执行也不一定会在ＤＯＭＣｏｎｔｅｎｔＬｏａｄｅｄ事件触发钱执行

　　　　　　　　　　　　　　　　　　故最好只包含一个延迟脚本

　　　　　　　　　　　　　注意　ｄｅｆｅｒ属性只适用于外部脚本文件，　ＨＴＭＬ５明确规定

　　　　　　　　２１.３异步脚本

　　　　　　　　　　　　ａｓｙｎｃ属性与延迟脚本类似　并告诉浏览器立即下载文件，

　　　　　　　　　　　　不同点：　ａｓｙｎｃ的脚本并不保证按照指定它们的先后顺序执行、故脚本之间要互不依赖非常重要

　　　　　　　　　　　　使用ａｓｙｎｃ目的：不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。故建议几步脚本不要在加载期间修改ＤＯＭ

　　　　　　　　　　　　异步脚本一定会在页面的ｌｏａｄ事件之前执行，当可能会在ＤＯＭＣｏｎｔｅｎｔＬｏａｄ事件触发之前或之后执行

　　　　　　　　　　　　注意也只用于　外部文件

　　　　　　　　２１.４　在XＨＴＭＬ中的用法（作者建议不用读，因为现前端开发人员采用HTML5标准）

 2.2嵌入代码和外部文件

                      在HTML页面中最好的做法是使用外部文件来包含JavaScript代码、  有以下优点

                             可维护性  将所有JavaScript文件放在一个文件夹可以便于维护，也有利于开发人员在不触发HTML标记情况下，

                                        集中精力编辑JavaScript代码

                             可缓存   浏览器根据具体的设置缓存链接的所有外部JavaScript文件即如果两个页面同时使用同一个文件，那么

                                        该文件只需下载一次，故加快页面的加载速度

                            适应未来　通过外部文件夹包含JavaScript无需使用前面提到的XHTML和注解hack、

2.3文档模式     

                     通过文档类型（doctype）切换实现的  最初有  混杂模式（quirks mode）和标准模式（standard mode） 模式的不同主要影响
　　　　　　　　ＣＳＳ内容的呈现，有时也会影响ＪａｖａＳｃｒｉｐｔ的解释执行

　　　　　　　　无申明的情况下，默认的是混杂模式

２.４＜ｎｏｎｓｃｒｉｐｔ＞　　　

　　　　　　　　　用于在不支持ＪａｖａＳｃｒｉｐｔ的浏览器中显示替代内容，　１.浏览器不支持脚本　　２.浏览器支持，但禁用　　　在启用了

　　　　　　　　　脚本的情况下浏览器不会解析　＜ｎｏｎｓｃｒｉｐｔ＞中的任何内容