美文网首页
JavaScript基础知识之_day01 在HTML中使用Ja

JavaScript基础知识之_day01 在HTML中使用Ja

作者: Melody_YM | 来源:发表于2017-06-19 22:27 被阅读9次

    在HTML页面中使用JavaScript有两种方式:

    嵌入的JavaScript代码

    这种方式是直接将JavaScript代码写在HTML中,相应的用法是:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>在HTML中使用Javascript - Javascript测试页面</title>
        <script type="text/javascript">
            alert("欢迎使用Javascript");
        </script>
    </head>
    <body>
    </body>
    </html>
    

    除了可以在head中,JavaScript代码还可以放在body中:

    <body>
        <h1>在HTML中使用Javascript</h1>
        <script type="text/javascript">
            //嵌入在body中的Javascrip代码
            alert("这是Javascript");
        </script>
    </body>
    

    我们在body中加入script标签,并让他弹出以对话框,当浏览器加载到这段代码后会将其解释执行!

    两种方法都可以被执行,既没有推荐与不推荐写法之分,更没有正确与错误之别,主要看你的具体用法:如果你希望页面在加载之初就开始执行javascript代码,就应该将它放在head中;如果你希望在页面加载到某个标签之后执行Javascript代码,就将其放在相应标签的后面。

    引用独立的js文件

    将Javascript代码内嵌在HTML标签中固然方便,但也容易造成页面代码混乱,通常情况下,我们会将Javascript代码存放在一个js文件中,然后在HTML中引用js文件,写法如下:
    HTML文件:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>在HTML中使用Javascript - Javascript测试页面</title>
        <script type="text/javascript" src="js/new_file.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    new_file.js 文件:

    alert("欢迎使用Javascript");
    

    需要注意的是,加载外部JS文件是线程阻塞的,在没有加载完成的时候,页面不会继续加载其后面的标签,所以通常我们将引用的JS放在body的后面。

    相关文章

      网友评论

          本文标题:JavaScript基础知识之_day01 在HTML中使用Ja

          本文链接:https://www.haomeiwen.com/subject/cctnqxtx.html