在 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>元素中的任何内容。
--------------------由于水平有限,如果文章有误还请指出,以免误人。谢谢!?------------------