2.1 <script>元素

  向html页面中插入javascript的主要方法,就是使用<script>元素。这个元素被加入到正式的html规范中。html4.01为<script>定义了下列6个属性:

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

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

       3:defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚步文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

      4:language:已废弃。原来用于表示编写代码使用的脚本语言。大多数浏览器会忽略这个属性,因此也没有必要再用了。

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

      6: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。

    PS:(1)包含在<script>元素内部的javascript代码将被从上至下依次解释。

       (2)在使用<script>嵌入javascript代码时,记住不要在代码中的任何地方出现"</script>"字符串。e.g,浏览器在加载下面所示的代码时就会产生一个错误:

    <script>

      function sayScript(){

          alert("</script>");

          }

    </script>

因为按照解析嵌入式代码的规则,当遇到浏览器遇到字符串"</script>"时,就会认为那是结束的</script>标签。而通过转义字符"\"解决这个问题,e.g:

    

    <script>

      function sayScript(){

          alert("<\/script>");

          }

    </script>

    (3)外部文件与解析嵌入式javascript代码一样,在解析外部javascript文件(包括下载该文件)时,页面的处理也会暂时停止。如果是在XHTML文档中,也可以省略结束标签</script>,但是不能在HTML文档使用这种语法。原因是这种语法不符合HTML规范,而且也得不到一些浏览器(尤其是IE)的正确解析。(不要在带有src属性的"<script>"标签里写javascript代码,会被忽略)

     (4)按照惯例,外部javascript文件带有.js扩展名。但是这个扩展名不是必须的,因为浏览器不会检查包含javascript的文件的扩展名。这样一来,使用JSP、PHP或其他服务端语言动态生成javascript代码也就成为了可能。但是服务器通常还是需要看扩展名决定为响应应用哪种MIME类型。如果不使用js扩展名,请确保服务器能返回正确的MIME类型

    (5)什么是MIME类型-在把输出结果传送到浏览器上的时候,浏览器必须启动是党的应用程序来处理这个输出文档。这可以通过多种类型MIME(多功能网际邮件扩充协议)来完成。在HTTP中,MIME类型被定义在Content-Type header中。

<百度百科解释>MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义文件名,以及一些媒体文件打开方式。
它是一个互联网标准,扩展了电子邮件标准,使其能够支持:
非ASCII字符文本;非文本格式附件(二进制、声音、图像等);由多部分(multiple parts)组成的消息体;包含非ASCII字符的头信息(Header information)。
这个标准被定义在RFC 2045、RFC 2046、RFC 2047、RFC 2048、RFC 2049等RFC中。 MIME改善了由RFC 822转变而来的RFC 2822,这些旧标准规定电子邮件标准并不允许在邮件消息中使用7位ASCII字符集以外的字符。正因如此,一些非英语字符消息和二进制文件,图像,声音等非文字消息原本都不能在电子邮件中传输(MIME可以)。MIME规定了用于表示各种各样的数据类型的符号化方法。 此外,在万维网中使用的HTTP协议中也使用了MIME的框架,标准被扩展为互联网媒体类型。
  (6)无论如何包含代码,只要不存在defer和async属性,浏览器多会按照<script>在页面中出现的先后顺序对他们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完后,第二个<script>包含的代码才会被解析,然后才是第三个、第四个......

  2.1.1 标签的位置

    按照传统的做法,所有<script>元素多应该放在页面的<head>元素中,这种做法的目的就是把所有外部文件(包括CSS文件和javascript文件)的引用多放在相同的地方。可是,在文档的<head>元素中包含所有javascript文件,意味着必须等到全部javascript代码多被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多javascript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代web应用程序一般多把全部javascript引用放在<body>元素中页面内容的后面。这样,在解析包含的javascriptjavascript代码之前,页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感觉到打开页面的速度加快了。

  2.1.2 延迟脚本

    defer属性用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。

  2.1.3 异步脚本

    async属性:类似于defer,只适用于外部脚本文件,并告诉浏览器立即下载文件,但与defer不同的是,标记为async的脚本并不保证按照指定他们的先后顺序执行。异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。(过去,当一个页面完成加载时,初始化脚本的方法是使用load事件,但这个类函数的缺点是仅在所有资源都完全加载后才被触发,这有时会导致比较严重的延迟,开发人员随后创建了一种自定义事件,domready,它在DOM加载之后及资源加载之前被触发.
  domready事件迅速被众多JavaScript库所采用,它开始在本地浏览器中以DOMContentLoaded的形式被使用;此外,它目前已在HTML5中被标准化,下面的代码显示了DOMContentLoaded是如何在document对象中被触发的;
  document.addeventListener('DOMContentLoaded',function(){...},false);
  值得注意的是,这个网站的行为层可以被更快速地启动,这意味着用户可以更快开始浏览网站,这对于连接速度慢的网络或者包含大量图片并需要一些时间加载图片的网页来说特别重要,如果只想在所有资源都完成加载之后运行脚本, 那么仍然可以使用load.)

   2.1.4 在XHTML中的用法

    可扩展超文本标记语言,即XHTML;

   2.2 外部文件的好处

    (1)、可维护性;

    (2)、可缓存;(2个页面使用同一个文件,那摩这个文件只需下载一次)

    (3)、适应未来

javascript高级编程3第二章:在html中使用javascript的更多相关文章

  1. 《JavaScript高级程序设计》——第二章在HTML使用JavaScript

    这章讲的是JavaScript在HTML中的使用,也就是<script>元素的属性.书中详细讲了async.defer.src和type四个<script>的属性. 下面是对第 ...

  2. [书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

    本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解J ...

  3. JavaScript高级程序设计:第二章

    在HTML中使用JavaScript 1.<script>元素:向HTML页面中插入JavaScript的主要方法就是使用<scritp>元素.HTML4.01为<scr ...

  4. 《JAVASCRIPT高级程序设计》第二章

    把javascript应用在网页中,需要涉及web的核心语言-html:如何让javascript既能与html共存,又不影响页面的显示效果,经过长时间的讨论.试错,最终的决定是为web增加统一的脚本 ...

  5. 《JavaScript 高级程序设计》第二章:在HTML中使用JavaScript

    script 标记是 netspace 公司最早为在 html中引入 javascript代码而创造的HTML元素,并最终被 HTML规范采纳. script 标记有四个比较重要的属性: src ty ...

  6. 第二章 在Html中使用JavaScript

    https://www.jianshu.com/p/8247a9401725 2.1 Script元素 https://developer.mozilla.org/en-US/docs/Web/HTM ...

  7. 《asp.net mvc3 高级编程》第二章 控制器

    一.控制器的角色 MVC模式中的控制器(Controller)主要负责响应用户的输入,并且在响应时通常会修改模型(Model).通过这种方式,MVC模式中的控制器主要关注的是应用程序流,输入数据的处理 ...

  8. 《avascript 高级程序设计(第三版)》 ---第二章 在HTML中使用Javascript

    本章主要讲解了,怎么在HTML中使用: 1.<script src=""></script> 属性:defer="defer" 表示脚本 ...

  9. JavaScript高级程序设计(第三版)第二章 在HTML中使用JavaScript

    2.1 <script>元素 <script>定义了下列6个属性: async:可选.表示应该立即下载脚本,但不应妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本.只对外 ...

随机推荐

  1. app推送中的通知和消息区别

    最近在做mqtt及其他消息推送的功能,推送服务挺多的,小米推,极光推,华为推,个推等,当然还有苹果的apns.感觉都差不多,尝试了apns,小米推和个推,各个厂家都提供的有sdk,demo. 关于通知 ...

  2. android 图片压缩

    引用:http://104zz.iteye.com/blog/1694762 第一:我们先看下质量压缩方法: private Bitmap compressImage(Bitmap image) { ...

  3. 渗透日记-利用SQLMAP伪静态注入

    今日找到一个网站,做下安全检测,url是这样的: 不是传统的.php结尾,所以很多人认为这个不能注入,其实伪静态也能注入的,这个url虽然做了伪静态,但是还是需要传递参数到数据库去查询的,试试能否注入 ...

  4. Angular初学

    简介: angularjs是基本js开发的一个前端类库,主要致力于减轻开发人员在开发Ajax应用过程中的痛苦,适合来做单应用. 客户端模板: Angualr中,模板和数据都会被发送到浏览器中,然后在客 ...

  5. XMLPuLL解析

    1 package com.bawei.day14_xmlpull; 2 3 import java.io.IOException; 4 import java.io.InputStream; 5 i ...

  6. Andy - 又一款速度流畅的免费安卓 Android 模拟器 (支持手机无线控制电脑模拟器)

    随着 Genymotion.BlueStacks 等电脑上的 Android 模拟器流行起来之后,似乎很多人都发现在电脑上运行使用安卓APP软件.畅玩手机游戏确实很有乐趣. 今天我们又发现了一款全新免 ...

  7. python opencv 利用Lab空间把春天的场景改为秋天

    前一段时间实现了Reinhard颜色迁移算法,感觉挺有意思的,然后在代码上随意做了一些更改,有了一些发现,把Lab通道的a通道值改为127左右,可以将绿色改为黄色,而对其他颜色的改动非常小,因此可以将 ...

  8. CSS零基础学习笔记.

    酸菜记 之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...

  9. 【转】缺少servlet-api.jar包

    转载地址:http://blog.sina.com.cn/s/blog_6cfb18070100n7pu.html 在Eclipse中缺省servlet-api.jar包,由于servlet-apbi ...

  10. 初识NodeJS,一个基于GoogleV8引擎的Javascript运行环境

    思考 首先我们来思考一个问题:我们都知道几乎所有现代主流浏览器都全面支持了ECMAScript 5.1版标准,而JavaScript的标准是ECMAScript.那么我们就容易认为JavaScript ...