JavaScript引入方式

来源:https://www.cnblogs.com/yxchao/archive/2022/05/09/16245932.html
-Advertisement-
Play Games

前端周刊:2022-6 期 前端開發 videojs-plugin-marker--videojs 進度條打點插件 基於 videojs-marker-plugin 項目二次開發,支持 marker 點更新和 marker 點擊事件;更換構建工具為 Vite。 @cutting-mat/direct ...


快速入門

在HTML中,可以使用內聯式、外鏈式、行內式 三種方式 引入JavaScript。

行內式

行內式是將JavaScript代碼作為HTML標簽的屬性值來使用,示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
	</head>
	<body>
		<!-- 行內式引入JS代碼  -->
		<input type="button" value="點我" onclick="alert('頂')">
	</body>
</html>

內聯式

內聯式是將JavaScript代碼包裹在<script>標簽中直接編寫在HTML文件中,示例如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
		
		<script type="text/javascript">
			alert("頂");
		</script>
	</head>
	<body>
		網頁內容
	</body>
</html>

其中 type="text/javascript",是告知瀏覽器裡面是js代碼的類型,在HTML5中其屬於預設值,可以省略不些。

外鏈式

外鏈式是指將JavaScript代碼保存到一個單獨的擴展名為.js的文件中,然後使用script 標簽的src屬性引入這個js文件,示例如下:

  1. 創建一個test.js的文件(一般放在目錄下麵),完成代碼編寫
alert("頂");
  1. 在HTML代碼中引入test.js文件
<script type="text/javascript" src="js/test.js">
	
</script>

相比嵌入式和行內式,推薦使用鏈入式來編寫和引入JavaScript代碼。

程式提倡模塊化、結構化,在網頁開發中,提倡結構、樣式、代碼分離,即HTML、CSS、JavaScript三部分代碼,儘量避免都直接在HTML中編寫,儘量分離為XX.html、XX.css、XX.js文件編寫,以便於後期維護。

擴展:常見錯誤

如下代碼運行後是有報錯信息的,頁面上的文本內容並不會改為"大家好"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
		
		<script type="text/javascript">
			// 獲取id為text1的標簽對象
			var spanTag = document.getElementById('text1');
			// 將此標簽內部文本 修改為:大家好
			spanTag.innerText = "大家好!";
		</script>
	</head>
	<body>
		<span id="text1">你我他</span>
	</body>
</html>

在瀏覽器中 按F12 可進入開發者模式,可用來檢查、調試代碼

錯誤分析

image

預設情況下,HTML的載入是從上而下的,如上代碼中,它將先載入head標簽,後載入body標簽。也就是說當第3-13行代碼在執行時,第14-16行的代碼還沒載入到。在這種情況下,第9行拿到的spanTag是不存在的、是NULL。所以錯誤信息也提示第11行出錯了。錯誤信息是: TypeError: Cannot set properties of null (setting ‘innerHTML‘),大致意思為無法設置為null的屬性。

兩種解決方案

  1. 更改script標簽位置,讓頁面內容先載入,之後再載入執行script代碼
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript引入方式</title>
	</head>
	
	<body>
		<span id="text1">你我他</span>
	</body>
	
	<script type="text/javascript">
		// 獲取id為text1的標簽對象
		var spanTag = document.getElementById('text1');
		// 將此標簽內部文本 修改為:大家好
		spanTag.innerText = "大家好!";
	</script>
</html>

以上代碼中,將script標簽放到了head和body的後面,頁面元素都載入完了,最後再載入執行代碼。同時,將12-17行script標簽內容放在第9-10行之間也是可以的。再次運行後,將不同有錯誤,內容也將顯示為大家好!
image

  1. 使用外鏈式引入js文件,非同步載入

擴展:非同步載入

為了降低JavaScript阻塞問題對頁面造成的影響,可以使用HTML5為script標簽新增的兩個可選屬性 asyncdefer

async
async用於非同步載入,即先下載文件,不阻塞其他代碼執行,下載完成後再執行。

<script  type="text/javascript" src="js/test.js" async></script>

defer
defer用於延後執行,即先下載文件,直到網頁載入完成後,再執行。

<script  type="text/javascript" src="js/test.js" defer></script>

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

-Advertisement-
Play Games
更多相關文章
  • 一、使用PIVOT實現行轉列 1、首先創建一個學生表 CREATE TABLE [dbo].[Students]( [stu_id] [int] IDENTITY(1,1) NOT NULL, [stu_name] [varchar](100) NULL, [stu_hobby] [varchar] ...
  • 在進行視頻通話過程中,用戶有時候會出現網路不好的情況,比如在進行多人視頻通話或者多人唱歌時,我們需要實時顯示用戶的網路質量。 ...
  • 本次上新,共計新增94個開源組件。組件涉及工具、網路、UI、圖形、音視頻等多種功能。 ...
  • 5月11日晚19:00,Hello HarmonyOS進階系列應用篇第二課《電腦視覺》直播如約而至。 ...
  • 隨著新技術的不斷演進,人工智慧已經廣泛地應用到教育、金融、物流、零售、交通、醫療等各個領域。而在AI高速發展的當下,高效開發變得更為重要,如何將創意想法與AI技術深度融合,迅速轉化為可落地的AI應用,是開發者在激烈競爭中制勝的關鍵。 為了助力開發者快速上線AI業務,為消費者提供創新AI體驗,HMS ...
  • 只有在ajax才能找回一點點主場了,vue中的ajax一天整完,內容還行,主要是對axios的運用。 明天按理說要開始vuex了,這個從來都是只耳聞沒有眼見過,明天來看看看看是個什麼神奇的東西。 一. 解決開發環境ajax跨域問題 1.配置代理(方法一) 首先我們能發起ajax請求的,xhr原生不推 ...
  • 大家好,我是半夏👴,一個剛剛開始寫文的沙雕程式員.如果喜歡我的文章,可以關註➕ 點贊 👍 加我微信:frontendpicker,一起學習交流前端,成為更優秀的工程師~關註公眾號:搞前端的半夏,瞭解更多前端知識! 點我探索新世界! 原文鏈接 ==>http://sylblog.xin/archi ...
  • 詳解JavaScript中的事件迴圈機制!!! 一、簡單講解 這個大家應該或多或少都知道的 for (var i = 0; i < 10; i++) { setTimeout(() => { console.log(i); // 輸出10個10 }); } 解析:先執行for迴圈,迴圈疊加i,然後再 ...
一周排行
    -Advertisement-
    Play Games
  • 前言 當別人做大數據用Java、Python的時候,我使用.NET做大數據、數據挖掘,這確實是值得一說的事。 寫的並不全面,但都是實際工作中的內容。 .NET在大數據項目中,可以做什麼? 寫腳本(使用控制台程式+頂級語句) 寫工具(使用Winform) 寫介面、寫服務 使用C#寫代碼的優點是什麼? ...
  • 前言 本文寫給想學C#的朋友,目的是以儘快的速度入門 C#好學嗎? 對於這個問題,我以前的回答是:好學!但仔細想想,不是這麼回事,對於新手來說,C#沒有那麼好學。 反而學Java還要容易一些,學Java Web就行了,就是SpringBoot那一套。 但是C#方向比較多,你是學控制台程式、WebAP ...
  • 某一日晚上上線,測試同學在回歸項目黃金流程時,有一個工單項目介面報JSF序列化錯誤,馬上升級對應的client包版本,編譯部署後錯誤消失。 線上問題是解決了,但是作為程式員要瞭解問題發生的原因和本質。但這都是為什麼呢? ...
  • 本文介紹基於Python語言中TensorFlow的Keras介面,實現深度神經網路回歸的方法。 1 寫在前面 前期一篇文章Python TensorFlow深度學習回歸代碼:DNNRegressor詳細介紹了基於TensorFlow tf.estimator介面的深度學習網路;而在TensorFl ...
  • 前段時間因業務需要完成了一個工作流組件的編碼工作。藉著這個機會跟大家分享一下整個創作過程,希望大家喜歡,組件暫且命名為"easyFlowable"。 接下來的文章我將從什麼是工作流、為什麼要自研這個工作流組件、架構設計三個維度跟大家來做個整體介紹。 ...
  • 1 簡介 我們之前使用了dapr的本地托管模式,但在生產中我們一般使用Kubernetes托管,本文介紹如何在GKE(GCP Kubernetes)安裝dapr。 相關文章: dapr本地托管的服務調用體驗與Java SDK的Spring Boot整合 dapr入門與本地托管模式嘗試 2 安裝GKE ...
  • 摘要:在jvm中有很多的參數可以進行設置,這樣可以讓jvm在各種環境中都能夠高效的運行。絕大部分的參數保持預設即可。 本文分享自華為雲社區《為什麼需要對jvm進行優化,jvm運行參數之標準參數》,作者:共飲一杯無。 我們為什麼要對jvm做優化? 在本地開發環境中我們很少會遇到需要對jvm進行優化的需 ...
  • 背景 我們的業務共使用11台(阿裡雲)伺服器,使用SpringcloudAlibaba構建微服務集群,共計60個微服務,全部註冊在同一個Nacos集群 流量轉發路徑: nginx->spring-gateway->業務微服務 使用的版本如下: spring-boot.version:2.2.5.RE ...
  • 基於php+webuploader的大文件分片上傳,帶進度條,支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況)。文件上傳前先檢測該文件是否已上傳,如果已上傳提示“文件已存在”,如果未上傳則直接上傳。視頻上傳時會根據設定的參數(分片大小、分片數量)進行上傳,上傳過程中會在目標文件夾中生成一個臨 ...
  • 基於php大文件分片上傳至七牛雲,使用的是七牛雲js-sdk V2版本,引入js文件,配置簡單,可以暫停,暫停後支持斷點續傳(刷新、關閉頁面、重新上傳、網路中斷等情況),可以配置分片大小和分片數量,官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...