2. 程式人生 > >如何在HTML中使用JavaScript

如何在HTML中使用JavaScript

阿新 • • 發佈：2019-01-21

1.使用script元素

<script>
    //JavaScript程式碼
</script>

HTML 4.01為<script>定義了6個屬性

  • async（可選）
    表示應該立即下載指令碼，但不妨礙頁面中的其他操作，比如下載其他資源或待載入其他指令碼。只對外部指令碼檔案有效
//非同步指令碼
<script type="text/javascript" defer="defer" src="first.js"></script>
<script type="text/javascript" defer="defer" src
 
="second.js"></script>
//指定async屬性的目的是不讓頁面等待這兩個指令碼下載和執行，從而非同步載入頁面其他內容。
//但是不保證它們的先後順序，也就是第二個指令碼可能在第一個指令碼之前執行。

  • charset（可選，很少用）
    指定程式碼的字元值，大多數瀏覽器會將其忽略，很少用

  • defer（可選）
    表示指令碼可以延遲到文件完全被解析和顯示之後再執行。只對外部檔案有效。

//延遲指令碼
<script type="text/javascript" defer="defer" src="first.js"></script>
<script
 
 type="text/javascript" defer="defer" src="second.js"></script>
//新增defer屬性之後，直到遇到</html>才會執行，也就是最後最後執行就是它了

  • language（已廢棄）
    用於表示編寫程式碼使用的程式語言，已廢棄

  • src（可選）
    表示包含要執行程式碼的外部檔案

<script type="text/javascript" src="first.js"></script>
//外部檔案first.js將被載入到當前頁面中
//注意注意呀，此時在<script>和</script
 
>之間不再包含額外的JavaScript程式碼，因為這些額外的程式碼將會被忽略，不執行!!!
<script type="javascript" src="www.somewhere.com/file.ja"></script>
//也就是說src還可以包含來自外部域的.js檔案，而不僅僅是自己編寫的。功能更加強大。
//注意注意呀，外部域的.js檔案可能不可控，所以要麼你是它的所有者、要麼他的所有者值得信賴、要麼就不要使用！！！

  • type（可選）
    可以看成是language的替代品，常用的是type=text/javascript，不必需

    包含在<script></script>將從上至下依次解釋。在解釋<script>元素內部的所有程式碼求值完畢之前，頁面中其他內容不會被載入和顯示。

2.標籤的位置

  • 傳統做法
    所有的<script>都放在<head>中，目的是把所有外部檔案.css和.js都放在相同的地方。
    但是這就會造成在所有JavaScript程式碼被下載解釋完成之前，在<body>裡的頁面內容將不會呈現。媽呀，萬一JavaScript程式碼很多，那會怎樣！！！那會一眼看上去瀏覽器視窗一片空白，這是什麼啊

  • 最佳做法
    把全部的JavaScript引用放在<body>元素內容的後面

<!DOCTYPE html>
<html>
    <head>
        <title> 位置很重要</title>
    </head>
    <body>
        <!--放置頁面內容-->
        <script type="text/javascript" src="first.js"></script>
        <script type="text/javascript" src="second.js"></script>
    </body>
</html>

3.嵌入程式碼或外部檔案的選擇

在html中嵌入JavaScript當然沒有問題。但是最好的做法是儘可能使用外部檔案來包含JavaScript程式碼。具有一下優點：

  • 可維護性
    將.js檔案放在一個資料夾裡面維護起來方便多了，無需觸及HTML標記

  • 可快取
    如果有兩個頁面都是用同一個.js檔案，那麼只下載一次，加快頁面載入速度

相關推薦

HTML中javascript的<script>標簽使用方法詳解

mime類型 jsp source 方式 clas 處理 網頁 鏈接 屬性。 原文地址：HTML中javascript的<script>標簽使用方法詳解 只要一提到把JavaScript放到網頁中，就不得不涉及Web的核心語言——HTML。在當初開發javasc

JavaScript高級程序設計（2）在HTML中使用JavaScript

有效 頁面 itl 延遲腳本 文件包含 其他 amp 體驗 url 本章內容：使用<script>元素、嵌入腳本與外部腳本、文檔模式對JavaScript的影響、考慮禁用JavaScript的場景。 1.<script>元素 向HTML頁面中

在HTML中使用JavaScript

設置 存在 java mime script 服務器 func 方法 瀏覽器 1、<script>元素 　　向HTML頁面中插入JavaScript的主要方法，就是使用<script>元素。這個元素由Netscape創造並在Netscape Navi

HTML頁面中JavaScript能獲取到的各種屏幕大小信息

windows 部分 菜單 div markdown doc rip oct 寬度 在HTML頁面中，通過JavaScript代碼訪問 window 對象，能夠獲取到很多表征屏幕大小的信息，下面列舉並加以區分。 window 對象中的屏幕信息 window.innerhei

（原）JavaScript高級程序設計(第3版)--學習筆記--02: 在HTML中使用JavaScritp--0006--<noscript>元素

span 不支持 scrip src 高級 2.4 高級程序設計 example 否則 2.4 <noscript>元素 在<noscript>元素中的內容只有在下列情況下才會顯示出來： * 瀏覽器不支持腳本； * 瀏覽器致辭腳本，但腳本被禁用

（原）JavaScript高級程序設計(第3版)--學習筆記--02: 在HTML中使用JavaScritp--0007--總結

標簽 高級程序設計 情況下 嵌入 順序執行 設置 學習筆記 混合 執行順序 小結 在 JavaScript 插入到 HTML 頁面中要使用<script>元素。使用這個元素可以把 JavaScript 嵌入到 HTML 頁面中，讓腳本與標記混合在一起；也可以包含

在HTML中引用JavaScript中的變數

和上次的程式碼幾乎一樣，但這次是引用已經寫好的變數。主要功能和用法如下： document物件的getElementId方法得到HTML元素。 HTML元素的value屬性可以用來設定變數的值。 02.html <!DOCTYPE html> <html> &l

第二章 在HTML中使用JavaScript

通過 代碼 2.3 span doctype 可選 嚴格 style ava 2.1 <script> 元素 向HTML中插入JavaScript的主要方法就是使用 <script> 標簽 <script> // 嵌入式 &

HTML中呼叫JavaScript的幾種情況和規範寫法

JavaScript執行在html中，引用有幾種方式？ 我知道的方法有3種： 第一種：外部引用遠端JavaScript檔案。如<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>（相對

20181212——第二章在HTML中使用javascript

在html插入Javascript的主要方法，就是使用script元素 另外，通過<script>元素的 src 屬性還可以包含來自外部域的 JavaScript 檔案。這一點既讓 <script>元素倍顯強大，又讓它備受爭議。在這一點上，<script&g

Eclipse中的文字自動補全功能（Java、html、javascript）

文字很枯燥，希望正在閱讀的您靜下心來細細的閱讀，跟著我的12345一步一步往下走，you will get success! 1.開啟eclipse→Windows→Preferences→Java→Editor→Content Assist 修改Auto Activat

JavaScript在HTML中的應用

JavaScript在HTML中的應用 製作人：全心全意 在頁面中直接嵌入JavaScript  在HTML文件中可以使用<script>...</script>標記將JavaScript指令碼嵌入到其中，在HTML文件中可以使用多個<script>標記，每

HTML中巢狀的JavaScript語言 document.getElementById（“”）函式的使用

1.語法：var 變數 = document .getElementById (“某一個標籤的ID名稱”) 引數：某一個標籤的ID名稱――必選項，為字串 (String) 。 如： 返回值：oElemen――物件 (Element) 。 <ol id="ol"> &

HTML 中各瀏覽器對A標籤中javascript的支援研究

最近做一個專案要求javascript對多瀏覽器支援,但是頁面中有較多的使用A標籤，於是就出現了下面的問題 如寫出下面的程式碼 <a href="javascript:;" onclick="testFunction()">測試</a> 對

javascript介紹及如何在html中使用js與jQuery

js是世界上最流行的程式語言，這一點毋庸置疑；它是一種弱型別，動態指令碼程式語言，被廣泛用於HTML，web技術中。囉嗦：一直在學後端技術，現在發現js基本上不會用，因為現在不使用jsp做前端頁面，所以到處都是js對靜態頁面的封裝，然後實現前後端互動。現在發現js功能真強大啊，可以對頁面各種修改，真是前端一個

重看Javascript高階程式設計，第2章:在HTML中使用Javascript

本章知識點： 怎樣使用<script>元素 嵌入指令碼和外部指令碼 文件模式對Javascript的影響 考慮禁用Javascript的場景 2.1 <script>元素 HTML中插入Javascript的主要方式就是script標籤

新手學習日記-Javascript和Html 1：如何在html中呼叫Js函式

HTML組成網頁，CSS組織網頁，Javascript可以給網頁新增複雜操作。首先要明白，HTML是靜態的，要想實現複雜的可變的操作（比如函式，計算結果等）必須使用Javascript進行操作。Q.如何在Html中獲取Javascript函式的值HTML是靜態的，即使將Jav

如何在HTML中使用JavaScript

1.使用script元素 <script> //JavaScript程式碼 </script> HTML 4.01為<script>定義了6個屬性 a

用Javascript在HTML中顯示實時時間

方法如下： 1. 在script中建立方法time； 2. 建立新的Date物件date，並通過使用Date的內建方法給year、month等賦值； 3. 通過連線符號將各個時間連線起來； 4. 使用document.getElementById

JavaScript在HTML中的嵌入方式

JavaScript作為客戶端的指令碼語言，主要的用途就是幫助HTML處理部分互動邏輯。JavaScript語言同其他指令碼語言一樣，通過控制語句、函式、物件方法屬性等來實現程式設計。先來介紹JavaScript是如何同HTML互動的，也就是嵌入的方式。根據JavaScri