Javascript系列之在HTML中使用JavaScript

时间 2019-11-26 标签 javascript 系列之在 html 中使用 javascript

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

1)使用<script>元素html

2)嵌入脚本和外部脚本java

3)文档模式对JavaScript的影响web

4)考虑禁用JavaScript的场景浏览器

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

一、使用<script>元素异步

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

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

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

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

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

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

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

<script type="text/javascript">
       function sayScript(){
              alert("<\/scritp>");
       }
</script>

View Code

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

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

二、标签的位置

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

<!DOCTYPE html>
<html>
    <head>
       <title>Example HTML Page</title>
       <script type="text/javascript" src="example.js"></script>
    </head>
</html。

View Code

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

三、延迟脚本（defer属性）

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

四、异步脚本

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

<!DOCTYPE html>
<html>
   <head>
       <title>Example HTML Page</title>
       <script type="text/javascript" async src="example.js">               </script>
    </head>
</html>

View Code

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

五、在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>

View Code

六、<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>

View Code