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

Javascript高级程序设计——在HTML中使用Javascript
<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代码所直接被注释掉。

嵌入式代码和外部文件
```
<!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>可以显示替代内容。
相关阅读:
数据增强
 变态跳台阶
 跳台阶
 数据分析--简单回测框架开发
 数据分析--羊驼交易法则（选股）
数据分析--动量策略vs反转策略（选股）
数据分析--PEG策略（选股）
数据分析--布林带策略（择时）
数据分析--均值回归策略（选股）
数据分析--单因子选股策略、多因子选股策略（选股）
原文地址：https://www.cnblogs.com/yangxunwu1992/p/4769589.html

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

<script>元素

XHTML 中的用法

嵌入式代码和外部文件

小结：