1. 程式人生 > >如何將 JavaScript 程式碼新增到網頁中,以及 <script> 標籤的屬性

如何將 JavaScript 程式碼新增到網頁中,以及 <script> 標籤的屬性

Hello, world!

本教程的這一部分內容是關於 JavaScript 語言本身的。

但是,我們需要一個工作環境來執行我們的指令碼,由於本教程是線上的,所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令(比如 alert),所以如果你打算專注於另一個環境(比如 Node.js),你就不必多花時間來關心這些特定指令了。我們將在本教程的下一部分中專注於瀏覽器中的 JavaScript。

首先,讓我們看看如何將指令碼新增到網頁上。對於伺服器端環境(如 Node.js),你只需要使用諸如 "node my.js" 的命令列來執行它。

“script” 標籤

JavaScript 程式可以在 <script>

標籤的幫助下插入到 HTML 文件的任何地方。

比如:

```html run height=100
<!DOCTYPE HTML>

script 標籤之前...

...script 標籤之後

```

<script> 標籤中包裹了 JavaScript 程式碼,當瀏覽器遇到 <script> 標籤,程式碼會自動執行。

現代的標記

<script> 標籤有一些現在很少用到的屬性,但是我們可以在老程式碼中找到它們:

type 屬性:<script type=...>

  • 在老的 HTML4 標準中,要求 <script>
    標籤有 type 屬性。通常是 type="text/javascript"。這樣的屬性宣告現在已經不再需要。而且,現代 HTML 標準 —— HTML5 已經完全改變了此屬性的實際含義。現在,該屬性可以被用於 JavaScript 模組。但那是一個高階一點的話題,我們將會在此教程的其他章節中探討 JavaScript 模組。

language 屬性:<script language=...>

  • 這個屬性是為了顯示指令碼使用的語言。這個屬性現在已經沒有任何意義,因為語言預設就是 JavaScript。不再需要使用它了。

指令碼前後的註釋:

  • 在非常古老的書籍和指南中,你可能會在 <script>

    標籤裡面找到註釋,就像這樣:

    html no-beautify <script type="text/javascript"><!-- ... //--></script>

    現代 JavaScript 中已經不這樣使用了。這些註釋是用於不支援 <script> 標籤的古老的瀏覽器隱藏 JavaScript 程式碼的。由於最近 15 年內釋出的瀏覽器都沒有這樣的問題,因此這種註釋能幫你辨認出一些老掉牙的程式碼。

外部指令碼

如果你有大量的 JavaScript 程式碼,我們可以將它放入一個單獨的檔案。

指令碼檔案可以通過 src 屬性新增到 HTML 檔案中。

<script src="/path/to/script.js"></script>

這裡,/path/to/script.js 是指令碼檔案從站點根目錄開始的絕對路徑。當然也可以提供當前頁面的相對路徑。例如,src =“script.js” 表示當前資料夾中的 “script.js” 檔案。

我們也可以提供一個完整的 URL 地址,例如:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

要附加多個指令碼,請使用多個標籤:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

請注意:

一般來說,只有最簡單的指令碼才嵌入到 HTML 中。更復雜的指令碼存放在單獨的檔案中。

使用獨立檔案的好處是瀏覽器會下載它,然後將它儲存到瀏覽器的快取中。

之後,其他頁面想要相同的指令碼就會從快取中獲取,而不是下載它。所以檔案實際上只會下載一次。

這可以節省流量,並使得頁面(載入)更快。

提醒:如果設定了 src 屬性,script 標籤內容將會被忽略。

一個單獨的 <script> 標籤不能同時有 src 屬性和內部包裹的程式碼。

這將不會工作:

<script src="file.js">
  alert(1); // 此內容會被忽略,因為設定了 src
</script>

我們必須進行選擇,要麼使用外部的 <script src="…">,要麼使用正常包裹程式碼的 <script>

為了讓上面的例子工作,我們可以將它分成兩個 <script> 標籤。

<script src="file.js"></script>
<script>
  alert(1);
</script>

總結

  • 我們可以使用一個 <script> 標籤將 JavaScript 程式碼新增到頁面中。
  • typelanguage 屬性不是必需的。
  • 外部的指令碼可以通過 <script src="path/to/script.js"></script> 的方式插入。

有關瀏覽器指令碼以及它們和網頁的關係,還有很多可學的。但是請記住,教程的這部分主要是針對 JavaScript 語言本身的,所以我們不該被瀏覽器特定的實現分散自己的注意力。我們將使用瀏覽器作為執行 JavaScript 的一種方式,這種方式非常便於我們線上閱讀,但這只是很多種方式中的一種。

作業題

1. 顯示一個提示語

重要程度:⭐️⭐️⭐️⭐️⭐️

建立一個頁面,然後顯示一個訊息 “I'm JavaScript!”。

在沙箱中或者在你的硬碟上做這件事都無所謂,只要確保它能執行起來。

你可以先看一下 新視窗的演示結果。

在微信公眾號「技術漫談」後臺回覆 1-2-1 獲取本題答案。

2. 使用外部的指令碼顯示一個提示語

重要程度:⭐️⭐️⭐️⭐️⭐️

開啟題目 1 的答案。將答案中指令碼的內容提取到一個外部的 alert.js 檔案中,放置在相同的資料夾中。

開啟頁面,確保它能夠工作。

你可以先看一下 新視窗的演示結果。

在微信公眾號「技術漫談」後臺回覆 1-2-1 獲取本題答案。


現代 JavaScript 教程:開源的現代 JavaScript 從入門到進階的優質教程。React 官方文件推薦,與 MDN 並列的 JavaScript 學習教程。

線上免費閱讀:https://zh.javascript.info/


掃描下方二維碼,關注微信公眾號「技術漫談」,訂閱更多精彩內容。

相關推薦

如何 JavaScript 程式碼新增網頁以及 &lt;script&gt; 標籤屬性

Hello, world! 本教程的這一部分內容是關於 JavaScript 語言本身的。 但是,我們需要一個工作環境來執行我們的指令碼,由於本教程是線上的,所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令(比如 alert),所以如果你打算專注於另一個環境(比如 Node.js),你就不

網頁內容的滾動 :marquee標籤屬性詳解

<marquee direction=up behavior=scroll loop=3 scrollamount=1 scrolldelay=10 align=top bgcolor=#ffffff height=300 width=30% hspace=20 vspace=10 onmouseo

測試把javascript程式碼放在網頁的底部測試放在底部的js方法能否正常呼叫

測試把javascript程式碼放在網頁的底部,測試放在底部的js方法能否正常呼叫,看下執行效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>測試把java

mysql如何查詢結果的多個記錄的指定欄位放到一個二維陣列以及在in子句使用陣列

 $sql0="select  * from portals_channel where ch_use=1 and tid=5 and (chid<>31 and chid<>39  and chid<>44 )";  $query0=e

VS新增lib檔案以及出現LINK : fatal error LNK1104: 無法開啟檔案:×××.lib的解決辦法

新增庫檔案: 在VS中右擊專案點屬性: 新增標頭檔案目錄: 配置屬性-->C/C++-->常規-->附加包含目錄 加上標頭檔案存放的目錄。 新增lib檔案: 配置屬

java給圖片新增文字水印以及docker容器新增中文字型支援

發現雖然簡單,但是水印內容通過編碼拼接在圖片地址後面,每次訪問都要加上,如果要儲存下來還需要自己存第二遍有水印的圖。可是我們並不需要沒有水印的原圖,於是決定通過程式碼新增,更自由。 程式碼如下: /** * 新增文字水印 * @param inpu

java入門練習題(三):讀入一組整數(不超過20個)當用戶輸入0時表示輸入結束;然後程式從這組整數把第二大的整數找出來並把它打印出來。

 程式意義:讀入一組整數(不超過20個),當用戶輸入0時,表示輸入結束;然後程式將從這組整數中,把第二大的整數找出來,並把它打印出來。  說明:(1)0表示輸入結束,它本身並不計入這組整數中。            (2)在這組整數中,既有整數又有負數;          

資料匯入Hive資料庫使用python連結Hive讀取資料庫轉化成pandas的dataframe

   做網際網路應用開發過程中,時常需要面對海量的資料儲存及計算,傳統的伺服器已經很難再滿足一些運算需求,基於hadoop/spark的大資料處理平臺得到廣泛的應用。本文提供一個匯入資料到hive,用python讀取hive資料庫的例子。這實際是個比較簡單的操作,但是還是

rabbitmq 3.7.0版本新增trace外掛後新增報錯以及解決方案(可用方案)

在建立rabbitmq叢集環境後,為了跟蹤訊息消費機制,新增了trace外掛,具體指令碼請參考: # 檢視已安裝的外掛 ./rabbitmq-plugins list ./rabbitmq-plugins enable rabbitmq_tracing ./rabbitmqctl trace

TP5入口檔案放在Public能得到那些安全保障?

這個跟伺服器環境又關係。無論你用apache還是ngnix的時候,設定root虛擬根目錄的時候,如果index.php是public資料夾下面,那麼伺服器軟體只會讓外部只能訪問到public下面的所有東西,而public外層的所有東西都是不可以在外部訪問(這個是linux對apache或者nginx的許可權限

iOS學習(如何新增背景音樂以及音效)

1.在General中找到Linked Frameworks and Libraries 然後匯入兩個框架分別是 AVFoundation AudioToolBox 2.然後引入標頭檔案 #import "AVFoundation/AVFoundation.h"

用Java程式碼網頁獲取資料(示例程式碼

package com.mashensoft.net; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java

rn整合到androidrn圖片去向

將rn整合到android中,rn中圖片的去向 目錄結構: index.android.js import React, { Component, } from 'react'; import { AppRegistry,

javafx TableValue 新增按鈕列以及刪除列功能

首先需要自定義一個TableCell import javafx.beans.value.ObservableValue; import javafx.scene.control.CheckBox

java怎樣資料儲存到快取之後再儲存

package com.henry; import java.util.HashMap; import java.util.Map; import java.util.Random; import ja

在微信網頁實現微信通過選單‘在瀏覽器開啟’跳轉到指定的url

html <a id="goDownload" href="http://image.jietiaozhan.com/anroid/xiaozhoudao.apk">點選下載安卓APP</a> <div class="maskWrap" id=

Python程式碼釋出到PyPi使他人可用pip安裝

專案的大致目錄結構,其中bword/bword.py 是你的程式碼檔案,__init__.py檔案宣告此目錄為一個模組,你可以完全不在裡面寫任何內容,也可以寫一些程式碼。如果你還不明白你可以參照:https://github.com/ZhangHang-z/bword

PHP加JavaScript爬取網頁內容超實用簡易教程

php+js爬取網頁內容—–先看下效果 如何做到的呢? 我們一直以為只有Python才能爬取網頁內容,那是因為Python本身集合很多類庫用來爬取網頁很方便,但是我們使用PHP+js的方法一樣很方便,一樣可以拿到我們想要的網頁內容,而且也不用很繁瑣。

Android 呼叫系統相機拍照並且顯示在相簿以及中間可能會遇到的一些問題的解決

主要思路是在使用照相機拍照,然後為拍得的照片在SD卡新開一個儲存照片的檔案 程式碼:因為要呼叫照相機和SD卡所以需要新增以下許可權: 在manifests中新增 <uses-permission android:name="android.permission.CAM

JavaScript】深入理解call以及與apply、bind的區別

一、call call有兩個妙用      1、繼承(我前面的文章有提到用call實現call繼承,有興趣可以看下。https://www.cnblogs.com/pengshengguang/p/10547624.html)      2、修