<script>元素

向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性:

  1. async:可选。表示应该立即下载脚本,但不妨碍页面的其他操作,比如下载其他资源或等待加载其他脚本,只针对外部脚本有效。
  2. defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只针对外部脚本有效。
  3. src:可选。表示包含要执行代码的外部文件。
  4. type:可选。表示编写代码使用的脚本语言内容类型。默认为text/javascript
  5. language:已废弃。原来表示脚本语言类型
  6. charset:可选。表示通过src属性指定的代码的字符集。大多数浏览器会忽略。

   使用<script>元素的方式有两种,直接在页面嵌入Javascript代码和包含外部javascript。

   如下只需为元素指定 type="text/javascript"属性即可

<script type="text/javascript">
function sayHay(){
alert("hello,world");
}
</script>

 注意:

1、在使用<script>嵌入代码是不要在代码中出现</script>字符串,浏览器会认为是结束标签而产生错误。

     2、在解析外部的Javascript文件时,页面的处理也会暂停

         3、带有src属性的<script>元素不应该在其<script>和</script>元素之间如果嵌入代码会被忽略,只会加载外部脚本文件。

4、按照传统的做法<script>元素应该都放在页面的<head>元素中,这样必须等待所以的脚本加载完成才开始加载页面内容,所以一般把全部的                    javascript引用放在<body>元素的后面。

    

延迟脚本:只使用与外部脚本文件

<!DOCTYPE hrml>
<html>
<head>
<script type="text/javascript" defer="defer" src="src1.js"></script>
     <script type="text/javascript" defer="defer" src="src2.js"></script>
</head>
<body> </body>
</html>

  这个例子中添加了defer属性,其中包含的脚本要到浏览器遇到</html>标签之后再执行。HTML5规范要求脚本按照他们的出现的顺序执行,所以第一个脚本会先于第二行脚本执行。但现实当中,延迟脚本并不一定按照顺序执行,因此最后只包含一个延迟脚本。

  不同浏览器对defer的支持也不同,所以最后把延迟脚本放到页面底部。

异步脚本:只使用与外部脚本文件
<!DOCTYPE hrml>
<html>
<head>
<script type="text/javascript" async src="src1.js"></script>
     <script type="text/javascript" async src="src2.js"></script>
</head>
<body> </body>
</html>

  异步脚本告诉浏览器立即下载文件,指定async属性的目的是不让页面等待脚本下载和执行,从而异步加载,浏览器不保证脚本按先后顺序执行,不要再加载时修改DOM。

XHTML 中的用法

可扩展标记语言是将html作为XML的应用而重新定义的,当在XHTML中嵌入代码时,"<"会发生错误,被当成一个新标签来解析,一般用CData片段来包含Javascript代码,

某些文本,比如 JavaScript 代码,包含大量 "<" 或 "&" 字符。为了避免错误,可以将脚本代码定义为 CDATA。CDATA 部分中的所有内容都会被解析器忽略。CDATA 部分由 "<![CDATA[" 开始,由 "]]>" 结束:由于部分浏览器不兼容xhtml,再使用javascript注释将CData标记注释掉。

<script>
//<![CDATA[
function matchwo(a,b)
{
if (a < b && a < 0) then
{
return 1;
}
else
{
return 0;
}
}
//]]>
</script>

ps:在支持xml文档中虽然用'//'注释掉代码但xml文档中仍可识别出属于xml的代码<![CDATA[  和 ]]>,而不支持xml文档中,由于<![CDATA[  和 ]]>是xml代码所直接被注释掉。

嵌入式代码和外部文件

    1. 可维护性:把所有javascript代码放入一个文件夹内,维护起来方便。
    2. 可缓存:相同文件只需下载一次。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=”src.js“></script>
</head>
<body>
<noscript><p> no support javascript</p></noscript>
</body>
</html>

小结:

  1. 在包含外部js文件时需指定src.
  2. 所以<script>会按照在页面中的顺序被解析,不使用defer和async的情况下,只有解析完<script>中代码才解析之后的元素,一般把<script>元素放到页面最后,<body>之前。
  3. defer文档呈现之后加载,async文档异步加载,不阻塞文档呈现。
  4. 当javascript不支持或禁止时<noscript>可以显示替代内容。

Javascript高级程序设计——在HTML中使用Javascript的更多相关文章

  1. JavaScript高级程序设计-(1)html中使用JavaScript

    html中使用JavaScript 1.延迟脚本 script标签定义了defer属性,脚本会被延迟到整个页面都解析完毕后运行 详细内容如下: 2.异步脚本 script标签定义了async属性,as ...

  2. 2. javacript高级程序设计-在HTML中使用JavaScript

    1.1 <script>元素 向HTML页面中插入JavaScript的主要方法,就是使用<script>元素,<script>元素定义了一下6个元素: (1). ...

  3. 读javascript高级程序设计00-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  4. JavaScript 高级程序设计 目录

    为什么会写这个学习教程呢??因为一直以来,学习JavaScript都没有系统的学过,用什么学什么,所以今天开始,重新把JavaScript系统的学一遍!(本人也是菜鸟一枚,语文水平也还是小学程度,看得 ...

  5. 读javascript高级程序设计-目录

    javascript高级编程读书笔记系列,也是本砖头书.感觉js是一种很好上手的语言,不过本书细细读来发现了很多之前不了解的细节,受益良多.<br/>本笔记是为了方便日后查阅,仅作学习交流 ...

  6. 《JavaScript高级程序设计(第3版)》笔记-序

    很少看书,不喜欢看书,主要是上学时总坐不住,没有多大定性,一本书可以两天看完,随便翻翻,也可以丢在角落里几个月不去动一下. 上次碰到了<JavaScript高级程序设计(第3版)>感觉真的 ...

  7. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  8. 【javascript学习——《javascript高级程序设计》笔记】DOM操作

    DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘了一个层次节点树,允许开发人员添加.移除和修改. 1.节点层次 <html> <head& ...

  9. 《JavaScript高级程序设计》读书笔记--前言

    起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的 ...

随机推荐

  1. zabbix监控系列(2)之zabbix-agent安装

    zabbix-agent的安装不用LAMP的支持,所以直接源码安装,make两下,改下配置文件即可,改完后可以把源码包直接压缩打包就可以给其他agent用了,可谓,一次编译,多台使用. NO1.解包压 ...

  2. 如何在maven中添加jar包

    Maven 中央仓库地址: 1. http://www.sonatype.org/nexus/ 2. http://mvnrepository.com/ (本人推荐仓库) 3. http://repo ...

  3. Python目录操作

    Python目录操作 os和os.path模块os.listdir(dirname):列出dirname下的目录和文件os.getcwd():获得当前工作目录os.curdir:返回但前目录('.') ...

  4. 编译安装chkrootkit出现的问题

    tar xf chkrootkit.tar.gz cd chkrootkit-* make sense的时候出现make: *** [strings-static] Error 1,解决办法:yum ...

  5. [Unity] 2D开发学习教程

    豆子先生,据说是官方的一个Demo, 在蛮牛网上有大部分代码的视频讲解. 这个是我学习过程中边看教程边写出来的,功能和原版基本一样,增加了手游的操控. Blog: http://www.cnblogs ...

  6. centos 7.0最小化安装 查看yum 所有安装的软件包~

    使用命令 yum list installed [root@localhost ~]# yum list installed 已加载插件:fastestmirror base | 3.6 kB 00: ...

  7. Effective Objective-C 2.0 — 第12条:理解消息转发机制

    11 条讲解了对象的消息传递机制 12条讲解对象在收到无法解读的消息之后会发生什么,就会启动“消息转发”(message forwarding)机制, 若对象无法响应某个选择子,则进入消息转发流程. ...

  8. C# 正则分组捕获

    分组语法 捕获 (exp) 匹配exp,并捕获文本到自动命名的组里 (?<name>exp) 匹配exp,并捕获文本到名称为name的组里,也可以写成(?'name'exp) (?:exp ...

  9. Serializer序列化/反序列化DateTime少了8小时问题解决

    1.举例子 JavascriptSerializer serializer = new JavascriptSerializer(); DateTime now = DateTime.Parse(&q ...

  10. AndroidStudio-使用Translations Editor

    前言 如果你的App支持多语言,你需要正确的管理你的翻译字符串资源.Android Studio提供了翻译编辑器使更容易的查看和管理翻译资源. 关于翻译编辑器 翻译资源存储工程的多个目录下的多个XML ...