码迷,mamicode.com
首页 > 编程语言 > 详细

《javascript高级程序设计》笔记(二)

时间:2014-08-30 17:46:29      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   使用   io   java   strong   

<script>元素

   使用方法:

       1.直接在页面嵌入

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

       在解析器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。 在代码中若出现</script>,需要在前面加上转义字符"\"。

     

      2.包含外部javascript文件

 

<script  type="text/javascript" src="example.js"></script>

 

     src属性是必须的。

     如果在XHTML文档中,可以省略</script>标签,如:

  

<script type="text/javascript" src="example1.js" />

 
      但不能在HTML文档中使用,也得不到某些浏览器(尤其是IE)的正确解释。

 

      注意:带src属性的<script>元素不应在其<script>和</script>标签之间再包含额外的javascript代码,这样做就只会下载并执行外部脚本文件,嵌入的代码会被忽略。

     

 

     标签的位置

      传统做法在文档的<head>元素中包含所有javascript文件,意味着必须等到所有javascript代码都被下载、解析和执行完成后,才能开始呈现页面的内容(浏览器在遇到<body>才开始)。

<!DOCTYPE html>
<html> 
   <head>
        <title>Example HTML Page><title>
        <script type="text/javascipt" src="example1.js"></script>
        <script type="text/javascipt" src="example2.js"></script>
   </head>
   <body>
         <!-- 这里放内容-->
   </body>
</html>

     

      现代Web应用程序一般都把全部javascript引用放在<body>元素中页面内容后

<!DOCTYPE html>
<html> 
   <head>
        <title>Example HTML Page><title>
   </head>
   <body>
         <!-- 这里放内容-->
         <script type="text/javascipt" src="example1.js"></script>
         <script type="text/javascipt" src="example2.js"></script>
   </body>
</html>

 

 

       延迟脚本

       在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

     

<!DOCTYPE html>
<html> 
   <head>
        <title>Example HTML Page><title>
        <script type="text/javascipt" defer="defer" src="example1.js"></script>
        <script type="text/javascipt" defer="defer" src="example2.js"></script>
   </head>
   <body>
         <!-- 这里放内容-->
   </body>
</html>

 

      在这个例子只能搞,虽然我们把<script>元素中放在<head>中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行,第一个延迟脚本会优先于第二个延迟脚本执行,而这两个脚本会优先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMConentLoaded事件触发前执行,因此最好只包含一个延迟脚本

 

      异步脚本

      HTML5为<script>添加了async属性,它与defer属性类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照指定它们的顺序执行。

     指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM

     异步脚本一定在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。 

 


 

      嵌入代码与外部文件  

      外部文件的优点:

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

           可缓存:浏览器能过根据具体的设置缓存链接的所有外部javascript文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此最终能加快页面加载速度。

           适应未来:通过外部文件来包含javascript无需使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

       

     文档模式

       如果在文档开始处没有发现文档类型声明,浏览器会开启混在模式,不同浏览器在这模式下行为差异很大。

       准标准模式与标准模式非常接近,它们的差异几乎可以忽略不计。不标准的地方主要体现在处理图片间隙的时候(在表格中使用图片时问题最明显)。

       标准模式有以下3种

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">

 

《javascript高级程序设计》笔记(二)

标签:style   blog   http   color   os   使用   io   java   strong   

原文地址:http://www.cnblogs.com/surahe/p/3946617.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!