本文主要包括以下几方面内容:

1)使用<script>元素

2)嵌入脚本和外部脚本

3)文档模式对JavaScript的影响

4)考虑禁用JavaScript的场景

只要一提到把Javascript放到网页中,就不得不涉及Web的核心语言----HTML.在开发JavaScript的时候,Netscape要解决的一个重要问题就是如何做到让JavaScript既能与HTML页面共存,又不影响那些页面在其他浏览器中的程序效果.最终决定就是为Web增加统一的脚本支持.因此web早期的很多语法都保留了下来,饼被证实纳入HTML规范中.

1、使用<script>元素

向HTML中插入JavaScript的主要方法是使用<script>元素。HTML4.01为<script>定义了下列6个属性:

  • async:可选.表示立即下载脚本,但不妨碍页面中的其他操作,只对外部脚本文件有用.
  • charset:可选.表示通过src属性指定的代码的字符集.很少用.
  • defer:可选.表示脚本可以延迟到文档完全解析和显示之后再决定执行.指定外部文件有用.
  • language:已废弃.原来用于表示编写代码是用的脚本语言(如JavaScript，JavaScript1.2或VBScript）。
  • src:可选.表示包含执行代码的外部文件.
  • type:可选.可以看出是language属性的替代属性；表示编写代码使用的脚本语言的内容类型（也成MIME类型）默认值text/javascript。

使用<script>元素有两种方式:直接在页面嵌入JavaScript代码和包含外部文件.

1)在页面中直接嵌入JavaScript代码是,只需制定<script>的type属性.如:

<script type="text/javascript">

      function sayHi(){

          alert("Hi!");

      }

</script>

包含在<script>中的代码将从上至下依次解释.在对<script>元素内部的所有代码求值完毕前,页面中的其余内容都不会被浏览器加载显示.

在使用<script>嵌入JavaScript代码时，不要在代码中的任何地方出现</script>字符串，否则会产生错误。可以通过转义字符解决这个问题。

<script type="text/javascript">

       function sayScript(){

              alert("<\/scritp>");

       }

</script>

通过<script>元素来包含外部文件时,src属性是必须的.这个属性值指向一个外部的JavaScript文件的链接.如:

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

其中外部文件example.js中只需包含通常放在开始<script>和结束</script>中的代码，与解释处理嵌入式文件一样，在解释外部文件时，页面的处理也会暂时停止。在带有src属性的<script>元素里不应该再包含额外的javascript代码，即使包含了，这些代码也会被忽略。

2、标签的位置

传统的做法是将<script>元素放在<head>元素中。如:

<!DOCTYPE html>

<html>

    <head>

       <title>Example HTML Page</title>

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

    </head>

</html。

但是所有的JavaScript文件和代码时，意味着在所有的JavaScript文件和代码下载、解释和执行完之后，才能开始呈现页面的内容，当JavaScript的代码很多时，会导致浏览页面有明显的延迟，为了避免这个问题，现代的Web应用程序一般都把全部JavaScript引用放在<body>元素中页面内容后面。

3、延迟脚本（defer属性）

HTML4.01为<script>标签定义了defer属性（只用于外部文件），这个属性用语表明脚本在执行时不会影响页面的构造，即脚本会被延迟到整个页面都解释执行完后再执行，因此<script>中设置了defer属性就是告诉浏览器立即下载但延迟执行。在XHTML文档中，要把defer属性设置为：defer=“defer”。

4、异步脚本

HTML5为<script>元素定义了async属性，用于改变处理脚本的行为。只用于外部脚本。如：

<!DOCTYPE html>

<html>

   <head>

       <title>Example HTML Page</title>

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

    </head>

</html>

指定async的目的是不让页面等待脚本下载和执行，从而异步的加载页面其他内容，因此建议在异步脚本中不要包含修改DOM的代码。异步脚本一定会在页面的load事件钱执行，单可能会在DOMContentLoaded事件触发之前或之后执行。

5、在XHTML中的语法

可扩展超文本标记语言（XHTML）是将HTML作为XML的的应用而重新定义的一个标准。编写XHTML要比编写HTML严格很多，而且直接影响能否在嵌入JavaScript代码时使用<script  />标签。

在HTML中有特殊的规则确定<script>元素中的哪些内容可以被拆解，但这些特殊的规则在XHTML中不适用，如比较：a<b中的小于号（<）在XHTML中将被当做开始一个新的标签，但作为标签来讲<后不能跟空格，因此会导致语法错误，避免在XHTML中出现类似的语法错误有两个方法：一是用相应的HTML实体（&lt；）替代代码中的所有小于号（<）；二是用一个CData片段来包含JavaScript代码。下XHTML中，CDa他片段是文档中的一个特殊区域，这个区域中可以包含不需要解释的任意格式的文本内容，如：

<script type="text/javascript><![CData[

   function compare(a,b){

        if(a<b){

           alert("A is less than b");

        }

        else if(a>b){

            alert("A is greater than b");

        }

        else{

            alert("A is equal to B");

        }

    }

]]></script>

6、<noscript>元素

早期的浏览器都面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳的退化，这就是<noscript>元素的作用，用以在不支持JavaScript的浏览器中显示替代的内容，这个元素可以包含能够出现在文档<body>中的任何HTML元素（<script>元素除外）。包含<noscript>元素中的内容只有在下列情况下才会显示出来：

  • 浏览器不支持脚本
  • 浏览器支持脚本，但脚本被禁用

代码示例：

<html>

<head>

<title>Example HTML Page</title>

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

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

</head>

<body>

<noscript>

<p>本页面需要浏览器支持（启用）JavaScript</p>

</noscript>

</body>

</html>

Javascript系列之在HTML中使用JavaScript的更多相关文章

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

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

  2. Javascript高级程序设计——在HTML中使用Javascript

    <script>元素 向HTML页面中插入Javascript的主要方法,就是使用<script>元素,<script>元素有六个属性: async:可选.表示应该 ...

  3. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  4. node(基础)_node中的javascript

    一.前言                                                                                                 ...

  5. 在SharePoint解决方案中使用JavaScript (2) – 模块化

    本文是在SharePoint中使用JavaScript的第二篇文章,前面的文章包括: 在SharePoint解决方案中使用JavaScript (0) 在SharePoint解决方案中使用JavaSc ...

  6. （一）我的Javascript系列：Javascript的面向对象旅程（上）

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

  7. 一步一步学Silverlight 2系列（21）：如何在Silverlight中调用JavaScript

    概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  8. 汤姆大叔 javascript 系列 第20课 最后的5到javascript题目

    博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4 ...

  9. 深入理解javascript系列，读书笔记

    深入理解JavaScript系列(2):揭秘命名函数表达式 1.讲了函数声明和函数表达式的区别,包括一些在函数提升上的区别 2.如果给函数表达式的函数也取名,会在调试的时候受益 3.不要在block( ...

随机推荐

  1. 快速设计一个简单的WPF串口上位机

    最近一直在学习UWP,其中有的技术参考了WPF,所以又回头再来学习WPF,感觉学的东西很杂,必须记录一下,不然时间长了还得忘掉,于是申请开始写博客,将学习的心得记录一下,以备后用.这次是因为公司内训, ...

  2. MySQL 5.6初始配置调整

    原文链接: What to tune in MySQL 5.6 after installation原文日期: 2013年09月17日翻译日期: 2014年06月01日翻译人员: 铁锚 随着 大量默认 ...

  3. Android中多线程下载列表的封装实现(含进度反馈)

    来源:http://blog.csdn.net/u011638883/article/details/17347015 实现了一下Android中的文件多线程下载模块,支持自定义线程数.断点续传.下载 ...

  4. 10.23 noip模拟试题

    尼玛蛋pdf好难粘 直接写了 T1 /*开始写wa了 我真弱2333 关于p的排序规则不只是差值 为了字典序最小 还要拍别的*/ #include<cstdio> #include< ...

  5. a标签的背景图在ie8下显示问题

    今天遇到个小问题,纠结了很久,分享下 a标签添加背景图,需要给a添加display:block样式 但是在ie8下还是不能显示背景图,开始以为是由于a标签为空造成的,试了下添加内容也没用,后来注意到一 ...

  6. dede 最近一天发布的文章标题前加hot

    {dede:list pagesize ='15'} <!-- 模板1 --> <div class="news_list tp_a setp1"> < ...

  7. 使用ListView 时，遇到了 Your content must have a ListView whose id attribute is 'android.R.id.list' 错误

    今天在开发Android小应用的时候,使用到了ListView,在使用自己创建的listview风格的时候,就出现了如标题的错误提示信息,这个就让我纳闷了,以前也不会出现这个问题啊,而且也可以运行,赶 ...

  8. jsp页面表单的遍历要怎么写

    1.传统的方式使用request.getAttribute(“list”);获取表单的值, 2.也可以用struts2提供的标签进行遍历 备注 // 传统的接受参数方法 // String sfz=t ...

  9. C#内存修改

    先通过 System.Diagnostics.Process类获取想要编辑的进程 调用API [Flags]                    public enum ProcessAccessT ...

  10. [原创] SQLite数据库使用清单（上）

    1. 介绍 1.1 安装 访问 SQLite 下载页面,从 Windows 区下载预编译的二进制文件. 您需要下载 sqlite-shell-win32-*.zip 和 sqlite-dll-win3 ...