JavaScript高级程序设计学习笔记二（在HTML中使用JavaScript）

在 HTML 中使用 JavaScript

在html中使用JavaScript脚本有两种方式一种是嵌入在HTML中的脚本，另外一种是引入外部的脚本。两种方式都离不开<script>元素。

1. <script>元素介绍
<script>有下面6个元素
1.async；html页面的渲染是阻塞型的，即从上而下遇到JavaScript脚本会进行解析和执行，脚本所有解析执行完成再接着往下渲染其余内容，有了async属性，就能够解析并执行js脚本的同时渲染其余内容。两者并行执行，不会形成阻塞。
2.charset；字符编码，较少使用。
3.defer；与async相似，区别在于，有defer属性的js脚本的执行会在文档彻底渲染以后。即async是js脚本解析执行与文档渲染是并行的。defer是解析于文档渲染并行，执行在文档渲染以后。两者都只对外部javascipt脚本有效。
4.language(已废弃)；
5.type；常见的有type='text/javascript' 目的表示脚本的内容类型，不写默认为text/javascript ，JavaScript太火，默认脚本类型已成为JavaScript。
6.src：用来引入外部javascript脚本。须要注意的是，带有 src 属性的<script>元素不该该在其<script>和</script>标签之间再 包含额外的 JavaScript代码。若是包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码 会被忽略。
在使用<script>嵌入 JavaScript代码时，记住不要在代码中的任何地方出现"</script>"字符串。 例如，浏览器在加载下面所示的代码时就会产生一个错误：

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

由于按照解析嵌入式代码的规则，当浏览器遇到字符串"</script>"时，就会认为那是结束的 </script>标签。而经过转义字符“”能够解决这个问题，例如：<script type="text/javascript">

function sayScript(){         
        alert("<\/script>");     
    } 
</script>

这样写代码浏览器能够接受，于是也就不会致使错误了。

2. javascript放置的位置
将JavaScript脚本放在</body>标签前是最佳的。缘由JavaScript的加载老是阻塞内容的渲染，若是放在头部等位置会因为javascript脚本的阻塞页面迟迟渲染不出来，致使用户体验差，其次当js对dom节点进行操做时，会由于节点没有渲染而致使操做失败。

3. <noscript>
用以在不支持 JavaScript 的浏览器中显示替代 的内容。在<noscript>元素中的内容只有在下列状况下才会显示出来： （1） 浏览器不支持脚本； （2）浏览器支持脚本，但脚本被禁用。

4. 小结
把 JavaScript 插入到 HTML 页面中要使用<script>元素。使用这个元素能够把 JavaScript 嵌入到 HTML页面中，让脚本与标记混合在一块儿；也能够包含外部的 JavaScript文件。而咱们须要注意的地方有：
1.在包含外部 JavaScript文件时，必须将 src 属性设置为指向相应文件的 URL。而这个文件既可 以是与包含它的页面位于同一个服务器上的文件，也能够是其余任何域中的文件。
2.全部<script>元素都会按照它们在页面中出现的前后顺序依次被解析。在不使用 defer 和 async 属性的状况下，只有在解析完前面<script>元素中的代码以后，才会开始解析后面 <script>元素中的代码。
3.因为浏览器会先解析完不使用 defer 属性的<script>元素中的代码，而后再解析后面的内容， 因此通常应该把<script>元素放在页面后，即主要内容后面，</body>标签前面。
4.使用defer 属性可让脚本在文档彻底呈现以后再执行。延迟脚本老是按照指定它们的顺序执行。
5.使用 async 属性能够表示当前脚本没必要等待其余脚本，也没必要阻塞文档呈现。不能保证异步脚 本按照它们在页面中出现的顺序执行。
6.另外，使用<noscript>元素能够指定在不支持脚本的浏览器中显示的替代内容。但在启用了脚本 的状况下，浏览器不会显示<noscript>元素中的任何内容。

--------------------因为水平有限，若是文章有误还请指出，以避免误人。谢谢！?------------------