zoukankan      html  css  js  c++  java
  • JavaScript学习笔记(3)——JavaScript与HTML的组合方式

    一、JavaScript可以写在HTML页面内部,

    可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

    通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

    通过<script>标签,如下面代码中的粗体部分:其中,type属性是一种古老的写法,现在可以省略,因为所有现代浏览器默认脚本语言。

    <!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还没有加载完成。造成异常。

  • 相关阅读:
    构建高性能可扩展asp.net网站--20130628
    全文索引构建的语句
    一些常用的数据性能查看命令
    【Mongodb教程 第一课 】 MongoDB下载安装
    【Mongodb教程 第一课 补加课】 Failed to connect to 127.0.0.1:27017, reason: errno:10061 由于目标计算机积极拒绝,无法连接
    一个关于MYSQL IFNULL的用法
    如何查看网站的在全国各地的打开速度
    JS 省市区三级联动
    JS地区四级级联
    简单JS全选、反选代码
  • 原文地址:https://www.cnblogs.com/yoran-yang/p/5218209.html
Copyright © 2011-2022 走看看