HTML 中的 JavaScript

来源:https://www.cnblogs.com/littlecookie/archive/2022/09/28/16738501.html
-Advertisement-
Play Games

HTML 中的 JavaScript 前言 在上一篇文章"什麼是JavaScript?"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢?在js早期,網景公司創造出了<script>元素,用來講JavaScript插入到HTML中。 <scrip ...


HTML 中的 JavaScript

前言

在上一篇文章"什麼是JavaScript?"中我們說到js作為一門和頁面交互的語言。那如何把網頁的主導語言HTML和JavaScript關聯起來呢?在js早期,網景公司創造出了<script>元素,用來講JavaScript插入到HTML中。

<script>元素

博主在看“紅寶書”的時候,看到script標簽居然有足足8個屬性。如下:

  • async:可選。表示應該立即開始下載腳本,但不能阻止其他頁面動作,比如下載資源或等待其他腳本載入。只對外部腳本文件有效。
  • charset:可選。使用 src 屬性指定的代碼字元集。這個屬性很少使用,因為大多數瀏覽器不在乎它的值。
  • crossorigin:可選。配置相關請求的CORS(跨源資源共用)設置。預設不使用CORS。crossorigin= "anonymous"配置文件請求不必設置憑據標誌。crossorigin="use-credentials"設置憑據標誌,意味著出站請求會包含憑據。
  • defer:可選。表示腳本可以延遲到文檔完全被解析和顯示之後再執行。只對外部腳本文件有效。在 IE7 及更早的版本中,對行內腳本也可以指定這個屬性。
  • integrity:可選。允許比對接收到的資源和指定的加密簽名以驗證子資源完整性(SRI,Subresource Integrity)。如果接收到的資源的簽名與這個屬性指定的簽名不匹配,則頁面會報錯,腳本不會執行。這個屬性可以用於確保內容分髮網絡(CDN,Content Delivery Network)不會提供惡意內容。
  • language:廢棄。最初用於表示代碼塊中的腳本語言(如"JavaScript"、"JavaScript 1.2"或"VBScript")。大多數瀏覽器都會忽略這個屬性,不應該再使用它。
  • src:可選。表示包含要執行的代碼的外部文件
  • type:可選。代替 language,表示代碼塊中腳本語言的內容類型(也稱 MIME 類型)。按照慣例,這個值始終都是"text/javascript",儘管"text/javascript"和"text/ecmascript"都已經廢棄了。JavaScript 文件的 MIME 類型通常是"application/x-javascript",不過給type 屬性這個值有可能導致腳本被忽略。在非 IE 的瀏覽器中有效的其他值還有"application/javascript"和"application/ecmascript"。如果這個值是 module,則代碼會被當成 ES6 模塊,而且只有這時候代碼中才能出現 import 和 export 關鍵字。

博主今年5月入行前端,個人認為在現在這個前端框架盛行的時代,平時的業務也不會接觸到這麼多屬性,掌握 src屬性就足以。其他看過有點印象,可能以後維護前後端不分離的項目的時候能用到。並且再好的web開發實踐中部分屬性也是不推薦使用的。

使用方法

使用的兩種方法,一種就是在直接在標簽內部嵌入js代碼,另一種就是在標簽的src屬性里輸入外部文件的URL

有一點是值得註意 在使用別人伺服器上的js文件時,必須要確認來源是可靠的,穩定。不然別人把文件一換,項目就可能因此跑不起來。

在最佳實踐中通常認為,使用外部文件時更好的選擇。理由如下:

  • 可維護性。如果js分散到一個個HTML頁面中,這會導致維護困難。然而放到一個js文件中就會極大提升可維護性。
  • 緩存。瀏覽器會根據特定的設置緩存所有外部鏈接的js文件。如果兩個頁面用到同一個js文件,則該文件只會下載一次,意味著頁面載入更快了。
  • 適應未來 。使用外部鏈接的方式,就不用去考慮XHTML文件中轉義字元帶來的問題。

執行順序

在沒有async和defer關鍵字的影響下,不管包含什麼代碼,瀏覽器會按照<script>標簽在頁面中出現的順序來依次解釋它們。

標簽位置

過去,所有的<script>標簽都是寫在head裡面的,這就意味著需要把head裡面的所有的js都下載、解析和解釋完成才會開始渲染頁面,這就會導致頁面在首次載入的時候會出現長時間的白屏。為瞭解決這個問題,現代web應用通常會把js放在body里的頁面元素之後,這樣就會在處理js之前把頁面渲染完成,顯著提升了用戶體驗,感覺頁面載入變快了。

<noscript>元素

當瀏覽器不支持腳本語言或者腳本語言的支持被關閉的時候就會去渲染<noscript>標簽內的內容。現在感覺基本上不會遇到這種業務場景。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • AR技術的落地應用,推動著電商領域的不斷升級,通過增強現實為用戶帶來了虛擬與現實結合的AR購物體驗。如AR試衣、AR試鞋、AR試妝等功能的出現讓用戶在手機上就能體驗產品的佩戴效果,可以讓用戶更直觀、更真實的瞭解產品信息,提升消費者的購物愉悅感,幫助電商應用提高購物轉化率。華為AR Engine也為A ...
  • 書寫語法 輸出語句 變數 數據類型 運算符 == 與 區別: ==: 1、判斷類型是否一樣,如果不一樣,則進行類型轉換 2、再去比較其值 : 1、判斷類型是否一樣,如果不一樣,直接返回false 2、再去比較其值 類型轉換: * 其他類型轉為number:(一般使用parseInt) 1、strin ...
  • #背景 不知道webpack插件是怎麼回事,除了官方的文檔外,還有一個很直觀的方式,就是看源碼。 看源碼是一個挖寶的行動,也是一次冒險,我們可以找一些代碼量不是很大的源碼 比如webpack插件,我們就可以通過BannerPlugin源碼,來看下官方是如何實現一個插件的 希望對各位同學有所幫助,必要 ...
  • 我的Vue之旅。使用 Vue 3.1 + TypeScript + Router + Tailwind.css 構建手機底部導航欄、仿B站的登錄、註冊頁面。 ...
  • 一、使用原生js實現拖拽 點擊打開視頻講解更加詳細 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue; position ...
  • 所有對象都有隱式原型; 原型也是對象,也有隱式原型. function User() {}console.log(User.prototype); function User() {}var u = new User();console.log(u.hasOwnProperty); Object.p ...
  • 在純靜態網站里,有時候會動態更新某個區域往會選擇 Pjax(swup、barba.js)去處理,他們都是使用 ajax 和 pushState 通過真正的永久鏈接,頁面標題和後退按鈕提供快速瀏覽體驗。 但是實際使用中可能會遇到不同頁面可能會需要載入不同插件處理,有些人可能會全量選擇載入,這樣會導致加 ...
  • 1 ES Module 規範 ES Module 是目前使用較多的模塊化規範,在 Vue、React 中大量使用,大家應該非常熟悉。TypeScript 中的模塊化與 ES 類似。 1.1 導出模塊 導出模塊有兩種方式:按需導出 和 預設導出。 按需導出是使用 export 關鍵字,將需要導出的成員 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...