JavaScript设计初衷就是能在Web浏览器中直接运行的脚本语言,当然迫切想知道它是怎么使用的?
Web浏览器上运行的内容就是上篇提到过HTML文件,由XML衍生出来的超文本标记语言,由标签和内容组成,为了能够让JavaScript更好的与HTML融合使用,厂商和协会调整了HTML的规则,JavaScript语句能够直接添加HTML中并能够被解析。

JavaScript标签

JavaScript在HTML中的使用标签为开始标签<script>和结束</script>,虽然在DHTML文件调用外部JS文件可以不用</script>,但考虑编程的一致性,建议使用一对标签。

JavaScript的用法

知道了在HTML中使用<script>来标识JavaScript代码,但具体代码内容写在哪里及怎么写呢?
首先说一下用法,主要有两种方式:
第一种:直接在HTML直接内嵌JavaScript代码。

<script type="text/javascript">
    Javascript语法 
</script>

如上示例在<script>开始和结束标签之间添加JavaScript的相关代码,其中type是标签属性,表示该文件内容类型,以便访问的服务器返回正确类型的文件,也可以不添加该属性,浏览器会默认该值。
第二种方式:引用外部JavaScript文件。
JavaScript语言编写的代码也可以单独存放在扩展名为.js的文件中,如HTML文件需要引用,则需要通过<javascript> 标签的第二个属性src,它指向外部JS文件的URL,可以是本地文件也可以外部域 中的文件,使用方法如下:
<script scr="abc.js"></script>
或者
<script scr="http://www.google/abc.js"></script>

虽然两种方式都可以支持JS代码在Web浏览器中运行,但第二种方式存在以下优点:
1. HTML代码和JS代码分离,有助于后期的便捷维护。
2. HTML代码和JS代码分离,对于不支持JS代码解析的浏览器,不需要写特殊的代码注释从而保证浏览器兼容性。
3. 对于不同页面使用同一个JS的情况,可以减少代码量,并且前一个页面调用后在浏览器中缓存该文件,后一个页面可以快速调取该JS文件,提高响应速度。

JavaScript在HTML的中位置

原来JavaScript代码都是放在HTML的head标签里面,如下所示:

<html>
    <head>
        <script type="text/javascript"> JS代码 </script>
    </head>
    <body> 
        浏览器页面显示内容
    </body>
</html>

由于HTML页面常规情况下都是从上到下加载并解释内容,而显示内容只有进入<body>标签才加载,之前必须先加载和解释JS内容,如果内容过多需要长时间等待,给用户造成系统运行缓慢的错觉,所以现在都在</body> 结束前添加JS内容,如下所示:

</head>
    <body> 
        浏览器页面显示内容
        <script type="text/javascript"> JS代码 </script>
    </body>
</html>

这样优先显示页面内容,再加载和解释JS代码,提高用户体检。

执行顺序

上面提到了HTML页面是顺序执行,有什么办法改变JS在HTML的执行顺序呢?<javascript> 还有两个属性async和defer,用法<script defer="defer" src="abc.js"></script><script sync src="abc.js"></script>,如上所示它们只能用在引用外部JS的情况下,
defer表示延迟执行,即页面加载完成后再执行,可以提供页面显示速度;sync表示异步,也就是与加载页面内容同时进行,但要注意由于执行先后的随机性,不建议在JS中修改页面内容以便造成页面的显示不稳定性。

文档模式

什么是文档模式,为什么要介绍文档模式,学习该知识点有什么用?
文档模式简单来说就是Web页面不同模式下浏览器的解析规则不同,如果在HTML文件开头不指定文档模式,则默认为混杂模式,该模式下不同浏览器的解析规则不一致,所有为了页面兼容性,一般需要指定标准模式,有三种方式:
HTML 4.01 严格型

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 严格型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML 5

<!DOCTYPE html>

禁用JavaScirpt的情况

如果浏览器中不识别或者禁用了JavaScript有什么解决方式?
对,提示用户开启支持JavaScript的设置或者提示浏览器不支持JavaScipt。
但是如果浏览器已经支持了,则不需要该提示,用<noscript></noscipt> 标签则可以解决该问题,浏览器不支持JS的情况下会解析该标签中的内容,反之则忽略,如<noscript><p>该浏览器不支持JavaScript</p></noscript>