鬆軟科技帶你學前端:JavaScript 使用

来源:https://www.cnblogs.com/sysoft/archive/2019/09/29/11605918.html
-Advertisement-
Play Games

<script> 標簽 在 HTML 中,JavaScript 代碼必須位於 <script> 與 </script> 標簽之間。 實例 註釋:舊的 JavaScript 例子也許會使用 type 屬性:<script type="text/javascript">。 註釋:type 屬性不是必需的 ...


<script> 標簽

在 HTML 中,JavaScript 代碼必須位於 <script> 與 </script> 標簽之間。

實例

<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>

  

註釋:舊的 JavaScript 例子也許會使用 type 屬性:<script type="text/javascript">。

註釋:type 屬性不是必需的。JavaScript 是 HTML 中的預設腳本語言。

JavaScript 函數和事件

JavaScript 函數是一種 JavaScript 代碼塊,它可以在調用時被執行。

例如,當發生事件時調用函數,比如當用戶點擊按鈕時。

提示:您將在稍後的章節學到更多有關函數和事件的知識。

<head> 或 <body> 中的 JavaScript

您能夠在 HTML 文檔中放置任意數量的腳本。

腳本可被放置與 HTML 頁面的 <body> 或 <head> 部分中,或兼而有之。

<head> 中的 JavaScript

在本例中,JavaScript 函數被放置於 HTML 頁面的 <head> 部分。

該函數會在按鈕被點擊時調用:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一張網頁</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button>

</body>
</html>

<body> 中的 JavaScript

在本例中,JavaScript 函數被放置於 HTML 頁面的 <body> 部分。

該函數會在按鈕被點擊時調用:

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">試一試</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

外部腳本

腳本可放置與外部文件中:

外部文件:myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}

外部腳本很實用,如果相同的腳本被用於許多不同的網頁。

JavaScript 文件的文件擴展名是 .js。

如需使用外部腳本,請在 <script> 標簽的 src (source) 屬性中設置腳本的名稱:

<script src="myScript.js"></script>

外部 JavaScript 的優勢

在外部文件中放置腳本有如下優勢:

  • 分離了 HTML 和代碼
  • 使 HTML 和 JavaScript 更易於閱讀和維護
  • 已緩存的 JavaScript 文件可加速頁面載入

如需向一張頁面添加多個腳本文件 - 請使用多個 script 標簽:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

外部引用

可通過完整的 URL 或相對於當前網頁的路徑引用外部腳本:

本例使用完整的 URL 來鏈接至腳本:

實例

<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

 


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

-Advertisement-
Play Games
更多相關文章
  • 1、圖片和多媒體 (1) 圖片:img元素 src 屬性:圖片路徑; alt 屬性:圖片無法顯示時使用的替代文字; title:滑鼠懸停時顯示的文字 ; (2) 視頻:video元素 src 屬性:視頻路徑 ; controls 屬性:【布爾屬性】指定後,會顯示播放控制項; autoplay :【布爾 ...
  • axios是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它可以在瀏覽器和node環境下運行,在github上已經有六七萬個星了,axios使用很方便,很多人在使用他,vue官方也推薦使用axios了,技術這東西還是隨主流吧,大家都用肯定有它的特長所在。 axios現在最 ...
  • 因為bootstrap自帶的固定列效果滿足不了公司需求,所以藉助fixed-table這個插件完成了iview固定列的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>左右兩側固定列,中間內容可以橫向 ...
  • 公司最近有需求要做樹形式table。因為是前後端不分離項目,且之前已經引入了bootstrap table插件,現把實現方式分享一下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <meta http-equ ...
  • 1.html定義: html是一種超文本標記語言,“超文本”是指頁面可以包含圖片、鏈接、音樂、程式等非文字元素。 Html不是一種編程語言。 2.html5的新特性: 用於繪畫的canvas元素; 用於媒介回放的video和audio元素; 對本地離線存儲的更好支持; 新的特殊內容元素如articl ...
  • 寫在前面 權重這個概念,相信對許多進行過前端開發的小伙伴來說肯定並不陌生,有時候一個樣式添加不上,我們就會一個 !important 懟上去,一切就好像迎刃而解了。但還有的時候,!important也並不能解決我們的問題,下麵請跟隨我來詳細瞭解一下css的權重吧! 探索權重 指某一因素或指標相對於某 ...
  • 1、聲明:@keyframes name{ }; 2、涉及到的屬性 animation-name:動畫名稱 animation-duration:單次動畫總時長 animation-timing-function:時間函數 animation-delay:播放前延時的時長 animation-ite ...
  • 前言 The last time, I have learned 【THE LAST TIME】一直是我想寫的一個系列,旨在厚積薄發,重溫前端。 也是給自己的查缺補漏和技術分享。 歡迎大家多多評論指點吐槽。 系列文章均首發於公眾號【全棧前端精選】,筆者文章集合詳見 "Nealyang/persona ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...