初識 JavaScript

目錄

  • 1. 什么是 JavaScript
  • 2. JS 引入方式
    • 2.1 內部引入方式
    • 2.2 外部引入方式
  • 3. JS 中的注釋
  • 4. JS 中的結束符
  • 5. 輸入和輸出
    • 5.1 輸出
    • 5.2 輸入
  • 6. 變量與常量
    • 6.1 變量的聲明
    • 6.2 變量的賦值
    • 6.3 常量
  • 7. JS 中的數據類型
  • 8. JS 中的類型轉換
    • 8.1 隱式轉換
    • 8.2 顯式轉換

正文開始

1. 什么是 JavaScript

JavaScript 簡稱 JS，由 ECMAScript 規定標準，作為前端三板斧(html、CSS、JS)之一，是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言。JS 是運行在客服端（瀏覽器）的編程語言，實現人機交互效果。

JS 可以用來：

  • 網頁特效：監聽用戶的一些行為讓網頁做出對應的反饋。
  • 表單驗證：針對表單數據的合法性進行判斷。
  • 數據交互：獲取后臺的數據，渲染到前端
  • 服務端編程(node.js)

JS 的組成：

  • ECMAScript：規定了 js 的基礎語法。例如：變量、分支語句、循環語句、對象等等
  • Web APIs：
    • DOM：操作文檔。比如對頁面元素進行移動、大小、添加刪除等操作。
    • BOM：操作瀏覽器，比如頁面彈窗，檢測窗口寬度、存儲數據到瀏覽器等等。

2. JS 引入方式

JS 程序不能獨立運行，他需要被嵌入 HTML 中，然后瀏覽器才能執行 JS 代碼，通過script標簽將 JS 代碼引入到 HTML 中，有兩種方式：

  • 內部引入方式
  • 外部引入方式

引入的 JS 代碼通常寫在/body標簽上面

2.1 內部引入方式

通過script標簽包裹 JS 代碼

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 內部引入，通常寫在</body>上面 --><script>// JS 代碼</script>
</body>
</html>

2.2 外部引入方式

將 JS 代碼寫在獨立的、后綴名為.js的文件中，然后通過script標簽的src屬性引入

例如：

test.js 文件

// test.js
// JS 代碼

test.html 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 外部引入，通常寫在</body>上面 --><script src="./test.js"></script>
</body>
</html>

需要注意的是，外部引入的script標簽內部通常不會書寫任何東西，因為該標簽的內容會被瀏覽器忽略掉。

3. JS 中的注釋

注釋的內容不會執行，通常用于對代碼進行解釋說明，增加代碼的可讀性，JS 中有兩種注釋方式：

  • 單行注釋：使用//注釋單行內容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 這是單行注釋// 一次只能注釋一行</script>
</body>
</html>
  • 多行注釋：使用/* */注釋多行內容
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 這是多行注釋 *//*這是多行注釋一次可以注釋若干行*/</script>
</body>
</html>

在 VScode 中，可通過快捷鍵ctrl + /來快速注釋。

4. JS 中的結束符

在 JS 中;作為一段代碼的結束，多數情況下可以省略而使用回車代替，例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>alert(1);alert(2);alert(3)alert(4)</script>
</body>
</html>

5. 輸入和輸出

輸入和輸出是人機交互的重要手段，用戶通過鍵盤、鼠標等向計算機輸入信息，計算機處理后再展示結果給用戶，這就是一次輸入輸出的過程。

5.1 輸出

JS 可以接收用戶的輸入，然后再將輸入的結果輸出，輸出語法有：

document.write('要輸出的內容')
  • 向body標簽內輸出內容
  • 若輸出的內容為標簽，那么也會被解析為網頁元素
alert('要輸出的內容')
  • 使頁面彈出警告對話框
console.log('要輸出的內容')
  • 向控制臺輸出內容，開發人員調試使用

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>document.write('<h1>向body輸出的內容<h1>')alert('使頁面彈出警告框')console.log('向控制臺輸出的內容')</script>
</body>
</html>

頁面效果：
請添加圖片描述
請添加圖片描述

5.2 輸入

向prompt()輸入任意內容會以彈窗形式出現在瀏覽器中，一般提示用戶輸入一些信息。

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>prompt('請輸入您的年齡：')</script>
</body>
</html>

頁面效果：
在這里插入圖片描述
prompt()的值就是用戶輸入的內容，用戶輸入的內容會以字符串的形式存儲。

6. 變量與常量

6.1 變量的聲明

筆者寫到此處，發現是第6.1小節，而現在正好是六一兒童節。祝各位小朋友、大朋友們兒童節快樂，愿我們依舊保持童心，奔赴山海仍不忘兒時的夢想，加油加油加油！！

在 JS 中，變量的聲明格式為：

let 變量名
//或者
var 變量名

let 與 var 的異同：

  • let：
    • 允許聲明和賦值同時進行
    • 不允許重復聲明
    • 允許同時聲明多個變量并賦值
  • var：
    • 允許聲明和賦值同時進行
    • 允許先使用 再聲明（不合理）
    • 允許重復聲明（不合理）
    • 允許同時聲明多個變量并賦值

let 和 var 大體上是類似的，但是 let 更為嚴謹，所以更推薦使用 let 來聲明變量

變量命名時遵循以下命名規則：

  • 只能是字母、數字、下劃線、$，且不能能數字開頭
  • 字母區分大小寫，如 Name 和 name 是不同的變量
  • JS 中的關鍵字和保留字不允許做變量名

6.2 變量的賦值

變量的賦值：

let age
// 在 age 這個變量中存儲10這個數
age = 10//聲明變量的同時初始化變量
let name = 'wwangxu'//將用戶輸入的信息使用變量存儲起來
let addr = prompt('請輸入你的地址')

6.3 常量

概念：使用const聲明的變量稱為常量。

使用場景：當某個變量永遠不會改變的時候，就可以使用常量的方式來聲明。

例如：

const PI = 3.14

注：常量不允許重新賦值，聲明時必須初始化

7. JS 中的數據類型

JS 中有以下數據類型：

  • number：數值類型
    • 整數，如4、3、2
    • 小數，如3.3、1.5
    • 正數，如34、21.4
    • 負數，如-31、-4
  • string：字符串類型
    • 通過‘’或“”包裹的數據
    • 單引號和雙引號沒有本質區別，但引號必須成對出現
    • 單引號或雙引號可以互相嵌套，但不能自己嵌套自己
    • 可以在引號前使用轉義符\使得該引號變為字符串內容
  • boolean：布爾類型
    • 只有兩個固定的值true和false
    • true 表示真，false 表示假
  • undefined：未定義類型
    • 在只聲明變量，而不賦值的情況下，變量的類型為 undefined
  • null：空類型
    • null 僅僅是一個代表”無“、”空“或者”值未知“的特殊值
    • 官方解釋為：把 null 作為尚未創建的對象
    • 表示賦值了，但內容為空

可以通過 typeof 關鍵字來判斷數據類型

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let x = 1let y = 3.2let z = -3let str1 = 'hello'let str2 = "123"let str3 = ' 'let bool1 = truelet bool2 = falselet Unlet NullX = nullconsole.log(typeof(x))console.log(typeof(y))console.log(typeof(z))console.log(typeof(str1))console.log(typeof(str2))console.log(typeof(str3))console.log(typeof(bool1))console.log(typeof(bool2))console.log(typeof(Un))console.log(typeof(NullX))</script>
</body>
</html>

頁面效果：
請添加圖片描述

8. JS 中的類型轉換

首先我們要了解到：JS 為弱類型編程語言，只有賦值之后才能知道變量的類型。

字符串的拼接：

console.log('100' + '200')
// + 兩邊都是字符串
//那么就是將兩個字符串拼接
//所以結果為'100200'

JS 中的數據被分為不同的類型，在實際開發中，不同數據類型之間存在著轉換關系，轉換類型的方式有兩種：

  • 隱式轉換：某些運算符被執行時，系統內部自動將數據類型進行轉換，這種轉換稱為隱式轉換。
  • 顯式轉換：由開發者自行進行明確的數據類型轉換

8.1 隱式轉換

隱式轉換規則：

  • +兩邊只要有一個字符串，那么都會把另外一個轉成字符串
  • 除了加號以外的算數運算符，比如 * / - 等都會把數據轉成數字類型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>隱式轉換</title>
</head>
<body><script> let num = 13 // 數值let num2 = '2' // 字符串// 結果為 132// 原因是將數值 num 轉換成了字符串，相當于 '13'// 然后 + 將兩個字符串拼接到了一起console.log(num + num2)// 結果為15// +num2 中的"+"將字符串轉換為數字// 然后兩個數字相加let num3 = +num2console.log(num + num3)// 結果為 11// 原因是將字符串 num2 轉換成了數值，相當于 2// 然后數值 13 減去 數值 2console.log(num - num2)// 這里示例輸入 23 和 67// 結果為 '2367'// 因為prompt接受的是字符串類型// 所以 a + b 就是字符串的拼接let a = prompt('請輸入一個數字')let b = prompt('請再輸入一個數字')console.log(a + b);</script>
</body>
</html>

運行效果：
在這里插入圖片描述

8.2 顯式轉換

通過Number()顯式轉換成數值類型，當轉換失敗時結果為 NaN（Not a Number）

例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>顯示轉換</title>
</head>
<body><script>let t = '12' // 字符串let f = 8 // 數值類型// 顯式將字符串 '12' 轉換成數值 12t = Number(t)// 檢測轉換后的類型console.log(typeof t);console.log(t + f) // 結果為 20// 并不是所有的值都可以被轉成數值類型let str = 'hello'// 將 hello 轉成數值是不現實的，當無法轉換成// 數值時，得到的結果為 NaN （Not a Number）console.log(Number(str))</script>
</body>
</html>

運行結果：
在這里插入圖片描述

完

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/20296.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/20296.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/20296.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Java 多線程相關面試題

Java 多線程相關面試題

1. ConcurrentHashMap的讀是否要加鎖&#xff0c;為什么? 讀操作沒有加鎖&#xff0c;目的是為了進一步降低鎖沖突的概率&#xff0c;為了保證讀到剛修改的數據&#xff0c;搭配了volatile 關鍵字&#xff1b; 2. 介紹下 ConcurrentHashMap 的鎖分段技術? 這個是 Java1.7 …
閱讀更多...
TP8 定時任務yzh52521/http-crontab 教程

TP8 定時任務yzh52521/http-crontab 教程

官方文檔&#xff1a; https://www.thinkphp.cn/ext/36 源碼倉&#xff1a; http-crontab: 接口化秒級定時任務管理 GitHub - yuanzhihai/http-crontab: 接口化秒級定時任務管理 參考案例&#xff1a; http-crontab:Workerman ThinkPHP6 實現后臺可視化定時任務管理 htt…
閱讀更多...
深入解析Java注解機制：元注解、自定義處理器及其在框架中的妙用

深入解析Java注解機制：元注解、自定義處理器及其在框架中的妙用

1.注解簡介與作用 1.1 什么是注解&#xff08;Annotation&#xff09; 在Java中&#xff0c;注解是一種應用于類、方法、變量、參數和Java包等元素的標記。這些標記可以在編譯時、加載時甚至運行時被讀取&#xff0c;并執行相應的處理。通過使用注解&#xff0c;開發人員可以…
閱讀更多...
C++中的List

C++中的List

摘要 C 標準庫中的 std::list 是一種雙向鏈表容器&#xff0c;它允許在常數時間內進行插入和刪除操作&#xff0c;每個元素包含一個指向前一個和后一個元素的指針。這給我們開發提供了高效的插入和刪除操作。 引入頭文件 要使用 std::list&#xff0c;需要包含頭文件 <li…
閱讀更多...
鈑金件設計規范

鈑金件設計規范

(一&#xff09; 鈑金 1、鈑金的概念 鈑金&#xff08;sheet metal&#xff09;是針對金屬薄板&#xff08;厚度通常在6mm以下&#xff09;的 一種綜合冷加工工藝&#xff0c;包括沖裁、折彎、拉深、成形、鍛壓、鉚合等&#xff0c; 其顯著的特征是同一零件厚度一致。 2、鈑…
閱讀更多...
C語言屬于什么是編程語言：探索C語言的本質與特性

C語言屬于什么是編程語言：探索C語言的本質與特性

C語言屬于什么是編程語言&#xff1a;探索C語言的本質與特性 在編程領域&#xff0c;C語言無疑是一種重要的、廣泛應用的編程語言。但是&#xff0c;C語言究竟屬于哪一類編程語言&#xff1f;它又有哪些獨特的特性和價值&#xff1f;本文將從四個方面、五個方面、六個方面和七…
閱讀更多...
精通推薦算法8：Embedding表征學習 -- 總體架構

精通推薦算法8：Embedding表征學習 -- 總體架構

1 Embedding表征學習的總體架構 目前&#xff0c;推薦算法精排模型大多基于Embedding MLP范式&#xff0c;模型底層是Embedding層&#xff0c;作用是將高維稀疏的輸入特征轉換為低維稠密的特征向量&#xff0c;并實現一定的模糊查找能力。模型上層是MLP層&#xff0c;作用是對…
閱讀更多...
在鯤鵬服務器上安裝nginx

在鯤鵬服務器上安裝nginx

華為鯤鵬服務器采用華為自研cpu ARMv8架構,提供 Windows 和多個Linux 系統 常使用 CentOS 7.6 64bit with ARM Nginx 和 Apache 一樣都是一種 Web 服務器。是基于 REST 架構風格&#xff0c;以統一資源描述符URI 或者統一資源定位符URL 作為溝通依據&#xff0c;通過 HTTP 協議…
閱讀更多...
【C++進階】深入STL之string：掌握高效字符串處理的關鍵

【C++進階】深入STL之string：掌握高效字符串處理的關鍵

&#x1f4dd;個人主頁&#x1f339;&#xff1a;Eternity._ ?收錄專欄?&#xff1a;C “ 登神長階 ” &#x1f921;往期回顧&#x1f921;&#xff1a;C模板入門 &#x1f339;&#x1f339;期待您的關注 &#x1f339;&#x1f339; ?STL之string &#x1f4d2;1. STL基本…
閱讀更多...
前端（JS）對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼

前端（JS）對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼

工作記錄-前端——前端&#xff08;JS&#xff09;對URL的編碼和解碼方式以及重要性——IE瀏覽器必須對中文URL進行編碼 創作場景前端JS對URL的三種編碼和解碼方式1. escape 和 unescape2. encodeURI 和 decodeURI3. encodeURIComponent 和 decodeURIComponent 本文重點 創作場…
閱讀更多...
net語言編程：深入探索其奧秘與挑戰

net語言編程：深入探索其奧秘與挑戰

net語言編程&#xff1a;深入探索其奧秘與挑戰 在當今信息化社會&#xff0c;編程語言如同構建數字世界的磚瓦&#xff0c;而net語言編程便是其中的一顆璀璨明珠。它以其獨特的魅力吸引著無數開發者&#xff0c;但同時也伴隨著一系列令人困惑和充滿挑戰的問題。本文將從四個方…
閱讀更多...
大模型學習資料整理：如何從0到1學習大模型，搭建個人或企業RAG系統，如何評估與優化（更新中...）

大模型學習資料整理：如何從0到1學習大模型，搭建個人或企業RAG系統，如何評估與優化（更新中...）

通過本文您可以了解到&#xff1a; 學習&#xff1a;從小白如何入手&#xff0c;從0到1開始學習大模型。RAG系統&#xff1a;我想搭建屬于自己或者企業的RAG系統&#xff0c;我該怎么去做&#xff1f;評估&#xff1a;微調后的模型或者RAG系統&#xff0c;如何評估自己的模型和…
閱讀更多...
windows配置dns訪問git , 加快訪問速度保姆級教程

windows配置dns訪問git , 加快訪問速度保姆級教程

設置 DNS 訪問 Git 需要修改電腦的 DNS 配置。下面是具體的操作流程&#xff1a; 第一步&#xff1a;打開命令提示符或終端窗口 在 Windows 系統中&#xff0c;可以按下 Win R 組合鍵&#xff0c;然后輸入 “cmd”&#xff0c;按下 Enter 鍵打開命令提示符窗口。在 macOS 或 …
閱讀更多...
【活動】GPT-4O：AI語言生成技術的新里程碑

【活動】GPT-4O：AI語言生成技術的新里程碑

&#x1f308;個人主頁: 鑫寶Code &#x1f525;熱門專欄: 閑話雜談&#xff5c; 炫酷HTML | JavaScript基礎 ?&#x1f4ab;個人格言: "如無必要&#xff0c;勿增實體" 文章目錄 GPT-4O&#xff1a;AI語言生成技術的新里程碑引言GPT系列簡史回顧GPT-1: 初露鋒…
閱讀更多...
國際薦酒師(香港)協會亮相香港國際葡萄酒和烈酒展覽會

國際薦酒師(香港)協會亮相香港國際葡萄酒和烈酒展覽會

2024年5月28日至30日&#xff0c;備受矚目的香港國際葡萄酒和烈酒展覽會VINEXPO Hong Kong在香港盛大舉辦。作為亞太區最盛大的葡萄酒展會&#xff0c;本屆展會不僅吸引了全球葡萄酒和烈酒行業的目光&#xff0c;更見證了國際薦酒師&#xff08;香港&#xff09;協會&#xff0…
閱讀更多...
(2) qml誕生的原因 和Qt Creator開發環境的介紹

(2) qml誕生的原因 和Qt Creator開發環境的介紹

文章目錄 qml誕生原因Qt Quick應?程序Qt Creator環境1、MSVC2、MinGWMSVC的優缺點MinGW的優缺點 最后的選擇延伸閱讀 一些常用的快捷鍵統一格式化代碼統一qml 語言的格式Locator 定位器幫助 qml誕生原因 可以在Qt5中開發的不同類型的經典應?程序。桌?應?程 序正在發?著改…
閱讀更多...
物聯網斷點續傳

物聯網斷點續傳

斷點續傳是一種在網絡傳輸中斷后&#xff0c;能夠從中斷的位置繼續傳輸的技術。它可以有效地避免因為網絡不穩定、服務器故障、用戶操作等原因導致的傳輸失敗&#xff0c;節省了用戶的時間和流量&#xff0c;提高了傳輸的效率和可靠性。斷點續傳在很多場景中都有廣泛的應用&…
閱讀更多...
GIS結合物聯網：塑造智慧地球的新篇章

GIS結合物聯網：塑造智慧地球的新篇章

在信息技術飛速發展的今天&#xff0c;地理信息系統&#xff08;GIS&#xff09;與物聯網&#xff08;IoT&#xff09;的深度融合&#xff0c;正以前所未有的方式重塑著我們對世界的認知。本文將深入探討GIS與物聯網結合的原理、應用實踐以及面臨的挑戰與未來展望&#xff0c;共…
閱讀更多...
鄉村振興與鄉村旅游品牌化：打造具有地方特色的鄉村旅游品牌，提升鄉村旅游吸引力，促進美麗鄉村建設

鄉村振興與鄉村旅游品牌化：打造具有地方特色的鄉村旅游品牌，提升鄉村旅游吸引力，促進美麗鄉村建設

目錄 一、引言 二、鄉村旅游品牌化的重要性 &#xff08;一&#xff09;增強鄉村旅游的辨識度 &#xff08;二&#xff09;提升鄉村旅游的附加值 &#xff08;三&#xff09;促進鄉村文化的傳承與創新 三、打造具有地方特色的鄉村旅游品牌 &#xff08;一&#xff09;明…
閱讀更多...
Python知識點6---列表和元組

Python知識點6---列表和元組

提前說一點&#xff1a;如果你是專注于Python開發&#xff0c;那么本系列知識點只是帶你入個門再詳細的開發點就要去看其他資料了&#xff0c;而如果你和作者一樣只是操作其他技術的Python API那就足夠了。 Python的列表和和元組定義方式如下&#xff0c;且注意列表和元組擁有…
閱讀更多...
最新文章

Copyright @ 2022~2023