码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript学习笔记(3)——JavaScript与HTML的组合方式

时间:2016-02-25 22:46:57      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

一、JavaScript可以写在HTML页面内部,通过<script>标签,如下面代码中的粗体部分:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            console.log("hello World!");
        </script>
    </head>
    <body>
    </body>
</html>

 二、JavaScript还可以写在单独的文件中,以“.js”为后缀,HTML语言通过<script>标签的src属性引入,如下面代码中的粗体部分:

js文件夹下新建javascript0.js文件:

console.log("hello world!");

HTML代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            console.log("hello World!");
        </script>
        <script src="js/javascript0.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
    </body>

</html>

粗体部分为引入js/javascript0.js文件的写法,效果与写入HTML文件效果一样,这样做有两个好处:

1.代码复用

2.结构清晰

此处应该注意两点:

1.在js文件中不需要再写<script>标签, 该标签是告诉浏览器引擎,标签内为javascript代码,而js文件已经表明这是javascript代码。

2.在引入外部javascript文件的<script>标签内不可以再编写javascript代码,即使编写也不会起作用。

三、javascript代码是按照在html中的顺序执行。那么一般就会把javascript写在文件最后,或者写在javascript的一个方法中,该方法是在页面加载后才知性。这样做有两个好处:

1.提高页面加载速度,因为javascript代码执行时,后面的html代码将不会被渲染;另外,js文件下载也需要时间。提高用户体验。

2.防止javascript代码操作的DOM还没有加载完成。造成异常。

JavaScript学习笔记(3)——JavaScript与HTML的组合方式

标签:

原文地址:http://www.cnblogs.com/yoran-yang/p/5218209.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!