JavaScript高级程序编程(一)

第一章 JavaScript简史  20170510

   JavaScript 组成部分: 核心(ECMAScript)  文档对象模型(DOM)浏览器对象模型(BOM)

   Netscape Navigator(Mozilla) 4.06发布JavaScript 1.3 版本完全兼容ECMAScript-262 并对Unicode标准支持 实现所有平台中立化。

   98年W3C(万维网联盟)指定DOM标准并在DOM2标准中引入了 视图(view),事件(events),样式(style),遍历和范围.DOM3中增加了对DOM核心扩展开始支持XML规范。

   IE5.5-IE8支持DOM1 IE9+支持DOM 1 2 3

   BOM只是处理浏览器窗口和框架 并无标准可言 习惯上吧浏览器扩展算作BOM一部分例如cookie,navigator对象,location对象和xmlhttprequest与IE的activexobject这种自定义对象等等。

   Netscape Navigator(Mozilla)6.0+之后开始专注FireFox浏览器开发。

   BOM在HTML5标准中被纳入但是还是存在浏览器差异。

 

第二章 HTML中使用JavaScript 20170511

  <script>元素 6个属性(部分属性已经废弃)

      async :可选属性 立即下载脚本,不妨碍其他脚本加载   只对外部脚本文件有效

      charset: 可选属性 通过src指定代码字符集 大多数浏览器忽略 很少用

      defer: 可选属性 延迟加载脚本 IE7之前也支持  只对外部脚本有效

      language: 已废弃 编写脚本的语言 没必要在定义这个属性了

      src: 可选属性 需要执行代码的外部文件

      type:可选属性 替代language 定义脚本语言内容类型(MIME类型) 默认text/javascript      

 

<script type="text/javascript">
        function sayHi() {
            alert("Hi");
        }
 </script>

//正确添加外部脚本文件链接
<script type="text/javascript" src="common.func.js"></script>

//可能会出现兼容问题尤其是IE
<script type="text/javascript" src="common.func.js"/>

 

      页面最佳加载方式:   

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <!--这里放内容-->
    <script type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>

//延迟加载最好放在最后 并且每个页面最好只有一个 <script defer="defer" type="text/javascript" src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script> </body> </html>

      注意!!async 属性虽然也是立即下载脚本文件 但是程序加载顺序却是不一定的,也就是如果有 两个外部脚本本件同时使用了async 属性 程序会立即下载这两个脚本文件 但是加载的时候就不一定是按顺序加载了,而且async属性存在的意义为了快速展现页面 页面无需等待脚本加载完毕就可以异步展现出来了,所以在此期间尽量不要操作DOM 尤其实在异步加载外部脚本文件的时候.

  嵌入代码与外部文件

  嵌入在html页面中的代码虽然没有问题,但是还是尽量推荐使用外部文件 主要有以下三点:

      1.可维护性,不同页面js代码需要嵌入不同的页面 如果把这些js代码归类在一个文件夹中维护起来就轻松多了.

      2.可缓存性,浏览器会根据设置缓存所有外部文件,如果两个文件引用相同js文件那么缓存一次就够了 提高了页面加载速度

      3.适应未来,外部文件无须使用单独针对浏览器进行兼容测试(hack) 因为html文件和其他外部文件语法是相同的

  文档模式(Doctype)

  IE5.5中引入文档模式(Doctype) 最初只有混杂模式和标准模式  随后其他浏览器纷纷效仿 弱未设置文档模式 默认混杂模式 在HTML5中 没有DTD也就没有严格模式与宽松模式的区别,主要做到尽可能向后兼容实现统一

  在 XHTML 与 HTML 4.01文档中包含完整的Doctype类型 默认是标准模式

  

 <!--超文本严格类型 HTML-->
<!DOCTYPE HTML
  PUBLIC "-//W3C//DTD HTML 4.01//en"
  "http://www.w3. org/TR/html4/strict.dtd">

<!--超文本过度类型 HTML-->
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//en"
"http://www.w3. org/TR/html4/loose.dtd">

<!--超文本框架类型 HTML-->
<!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Frameset//en"
"http://www.w3. org/TR/html4/frameset.dtd">

<!--可扩展超文本严格类型 XHTML-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//en"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--可扩展超文本过度类型 XHTML-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//en"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--可扩展超文本框架集类型 XHTML-->
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//en"
"http://www.w3. org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

    其中还有一种准标准模式,它与标准模式的差异集合可以忽略不计.

  <noscript>元素

  浏览器不支持JavaScript或者是JS被浏览器禁用的时候这个标签内容会显示出来,如果没出现上述情况标签内容永远不会展示. 

 

posted @ 2017-05-10 23:12  流年过往  阅读(510)  评论(0编辑  收藏  举报