如何將 JavaScript 程式碼新增到網頁中,以及 <script> 標籤的屬性
Hello, world!
本教程的這一部分內容是關於 JavaScript 語言本身的。
但是,我們需要一個工作環境來執行我們的指令碼,由於本教程是線上的,所以瀏覽器是一個不錯的選擇。我們會盡可能少地使用瀏覽器特定的命令(比如 alert
),所以如果你打算專注於另一個環境(比如 Node.js),你就不必多花時間來關心這些特定指令了。我們將在本教程的下一部分中專注於瀏覽器中的 JavaScript。
首先,讓我們看看如何將指令碼新增到網頁上。對於伺服器端環境(如 Node.js),你只需要使用諸如 "node my.js"
的命令列來執行它。
“script” 標籤
JavaScript 程式可以在 <script>
比如:
```html run height=100
<!DOCTYPE HTML>
script 標籤之前...
...script 標籤之後
```
<script>
標籤中包裹了 JavaScript 程式碼,當瀏覽器遇到 <script>
標籤,程式碼會自動執行。
現代的標記
<script>
標籤有一些現在很少用到的屬性,但是我們可以在老程式碼中找到它們:
type
屬性:<script type=...>
- 在老的 HTML4 標準中,要求
<script>
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 程式碼新增到頁面中。 type
和language
屬性不是必需的。- 外部的指令碼可以通過
<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 程式碼新增到網頁中,以及 <script> 標籤的屬性
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整合到android中,rn圖片去向
將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、修