1-1 在html中插入JavaScript

Posted 2020-08-14

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1-1 在html中插入JavaScript相关的知识，希望对你有一定的参考价值。

　　1.在html文件当中,使用<script>标签在HTML网页中插入javascript代码。<script>标签要成对出现，并把JavaScript代码写在<script></script>之间

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>插入js代码</title>
 7     <script type="text/javascript">
 8     document.write("hello，javascript!")
 9     </script>
10 </head>
11 
12 <body>
13 </body>
14 
15 </html>

　　　　而包含在<script>元素内部的javascript代码将被从上到下的依次解释。顺便值得注意的是不要在<script>嵌入javascript代码出现"</script>"的字符串，应该在浏览器遇字符串”</script>的时候，

会自动认为是结束，可以使用转义字符来解决。

1 <script type="text/javascript">
2     function sayScript(){
3     alert("<\ / script">);//输出字符串script
4     }
5  </script>

　还可以通过src属性在html中使用javascript脚本,这个脚本是指向外部文件的连接

1 <script type="text/javascript" src="xxx.js"></javascript>

　在带有src属性的<script>元素不应该在其中添加额外的javascript代码，额外添加的会被自动省略掉。

　通过<script>元素的src属性还可以跟<img>元素一样类似，可以指向当前的html页面所在域之外的某个域中的完整URL

<script type="text/javascript" src="http://www.xxx.com/xxx.js></sctipt>//不存在defer喝async属性，浏览器会按照<script>元素在页面中出现的先后顺序依次解析

　尽量把全部的javascript引用放在<body>元素中页面内容的后面，这有利先将内容呈现在浏览器中，避免浏览器在打开页面的出现明显的延迟。　

　2.在<script>元素在定义了6个属性:async、charset、defer、language、scr、type.其中language已废弃。

　defer属性用途是表明在脚步在执行时不会影响页面的构造,立即下载脚本，但脚本会被延迟到整个页面都解析完毕后再运行.defer属性只适合在外部脚本文件中,在html5实现会忽略掉嵌入脚本设置的defer属性,再次强调在延迟脚本放在页面底部是比较好的选择.

　在XHTML文档中，要把defer属性设置为

defer="defer"

　异步脚本——asyns属性，也同样使用外部脚本文件，指立即下载，指定async属性的目的是不应妨碍页面中的其他操作.不过一定会在页面load事件之前执行，尽量异步脚步不要在夹在其间修改DOM。

在XHTML文档中，要把async属性设置为

async="async"

在遇到不支持javaScript的浏览器可以将javascript代码包含在一个html注释中

<script><!--
    function sayGood(){
   alert("Good!"); 
    }
//--></script>

在浏览器禁用掉javascript时或不支持的时候，可以使用noscritp元素让页面平稳地退化

<html>
    <head>
        <title>noscript<title>
        <script type="text/javascript" defer="defer" src="xxx.js"</script>
        <script type="text/javascript" defer="defer" src="xxx2.js"</script>
        </head>
        <body>
            <noscript>
                <p>本页面需要浏览器支持或启用JavaScript<p>
            </noscript>//本脚本在无效的情况下会向用户显示一条信息，而在启用了javascript或支持javascript的时候用户不会看到这条信息
        </body>
<html>