JS的引入與輸入輸出示例詳解
1、常用工具與插件
1.1 Snipaste
一個前端截圖軟件：
常用快捷鍵（搭配Fn）：
- 截圖：F1
- 截圖定在屏幕上：F3 ，選中后ESC退出
- 取顏色：截圖時，鼠標(biāo)定到想要顏色的區(qū)域，看到顏色值，按shift切換成GBG/HEX格式，按C復(fù)制
1.2 Error Lens
一個報錯提示插件：Error Lens
效果：
1.3 One Dark Pro
一個代碼顏色插件：
安裝后，設(shè)置自己喜歡的顏色主題：
1.4 Live Server
一個左邊寫代碼，右邊預(yù)覽的分屏插件
安裝完成后，右鍵Open with Live Server，然后Win + ??，出現(xiàn)在右邊
2、JavaScript
2.1 JS介紹
JavaScript是一種運行在客戶端(瀏覽器) 的編程語言，實現(xiàn)人機交互效果，相比，HTML則是一種標(biāo)記語言。JavaScript可以實現(xiàn)：
- 網(wǎng)頁特效 ：監(jiān)聽用戶的一些行為讓網(wǎng)頁作出對應(yīng)的反饋，如輪播圖
- 表單驗證 ：針對表單數(shù)據(jù)的合法性進行判斷
- 數(shù)據(jù)交互 ：獲取接口返回的數(shù)據(jù), 渲染到前端頁面
- 服務(wù)端編程 ：node.js
<!--JS參考網(wǎng)站：MDN--> https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
2.2 JS的組成
JS有兩部分：
- ECMAScript：規(guī)定了js基礎(chǔ)語法，比如：變量、分支語句、循環(huán)語句、對象等
- Web APIs ：
- DOM ， 操作文檔，比如對頁面元素進行移動、大小、添加刪除等操作
- BOM，操作瀏覽器，比如頁面彈窗，檢測窗口寬度、存儲數(shù)據(jù)到瀏覽器
3、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>
<style>
.yellow {
color: #fc0;
}
</style>
</head>
<body>
<button class="yellow">按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<script>
let bts = document.querySelectorAll('button')
for (let i = 0; i < bts.length; i++) {
bts[i].addEventListener('click', function () {
document.querySelector('.yellow').className = ''
this.className = 'yellow'
})
}
</script>
</body>
</html>
4、JS的書寫位置
和CSS對應(yīng)，JS也有三種書寫位置：
4.1 內(nèi)部JS
直接寫在html文件里，用script標(biāo)簽包住，位置在</body>上面
<!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>
<!-- 行內(nèi)JS -->
<script>
// 頁面彈出警示框
alert('Hello World!')
</script>
</body>
</html>
將 <script> 放在HTML文件的body底部附近的原因是讓瀏覽按照代碼在文件中的順序先加載 HTML，否則上來就是JS，像前面入門案例中的document.querySelectorAll('button')就會有問題
4.2 外部JS
代碼寫.js結(jié)尾的文件里，通過script標(biāo)簽，引入到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> <!-- 外部JS --> <script src="./js/my.js"></script> </body> </html>
注意，使用外部JS的方式后，script標(biāo)簽中間無需寫代碼，否則會被忽略，相比前面的行內(nèi)JS，JS代碼很多時，外部JS代碼結(jié)構(gòu)更清晰
4.3 內(nèi)聯(lián)JS
代碼寫在標(biāo)簽內(nèi)部
<body>
<button onclick="alert('逗你的~~')">點我月入百萬</button>
</body>
5、JS中的注釋與結(jié)束符號
注釋：
單行，//，Ctrl + /
多行，/* */，shift + alt + A
結(jié)束符號：
- 封號；結(jié)尾
- 封號可省略，瀏覽器可以自動推斷語句的結(jié)束位置，要么都加，要么都不加（建議不加）
6、JS的輸出
6.1 語法1：document.write
- document.write
- 作用：向html的body內(nèi)輸出內(nèi)容，且如果輸出的內(nèi)容寫的是標(biāo)簽，也會被解析成網(wǎng)頁元素
<body>
<script>
// document.write可以輸出文字，也可以輸出標(biāo)簽
document.write('輸出普通文字')
document.write('<h1>輸出h1標(biāo)簽</h1>')
</script>
</body>
6.2 語法2：alert(’ ')
- alert
- 作用:頁面彈出警告對話框
<body>
<script>
alert('彈出內(nèi)容')
</script>
</body>
6.3 語法3：console.log
- console.log
- 作用：控制臺輸出語法，調(diào)試代碼使用
<body>
<script>
console.log("debug")
console.log('debug')
</script>
</body>
7、JS的輸入
prompt，翻譯：提示，顯示一個對話框，對話框中包含一條文字信息，用來提示用戶輸入文字
<body>
<script>
prompt('請輸入你的姓名')
</script>
</body>
8、JS代碼執(zhí)行順序
JavaScript 代碼執(zhí)行順序：
- 按HTML文檔流順序執(zhí)行JavaScript代碼
- alert() 和 prompt() 它們會跳過頁面渲染先被優(yōu)先執(zhí)行
到此這篇關(guān)于JS的引入與輸入輸出的文章就介紹到這了,更多相關(guān)js引入與輸入輸出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js實現(xiàn)卡片式項目管理界面UI設(shè)計效果
這篇文章主要介紹了js實現(xiàn)卡片式項目管理界面UI設(shè)計效果，該UI設(shè)計中，將各個項目以卡片的方式堆疊排列在屏幕上，當(dāng)點擊了其中的某個項目的時候，該項目圖片會全屏放大，向下滾動鼠標(biāo)可以看到該項目的介紹信息，需要的朋友可以參考下2015-12-12
下載網(wǎng)站打開頁面后間隔多少時間才顯示下載鏈接地址的代碼
有時候可能為了一些更好的廣告效果等原因，需要讓用戶等待一段時間以后，再顯示真實下載地址代碼，有利于緩解服務(wù)器壓力。2010-04-04
這篇文章主要為大家詳細(xì)介紹了javascript的正則匹配方法，幫助大家更快更高效的學(xué)習(xí)javascript正則的相關(guān)內(nèi)容，感興趣的小伙伴們可以參考一下2016-02-02
JS?Array方法詳解之如何區(qū)分slice和splice
在JavaScript中splice()和slice()是兩個用于操作數(shù)組的方法,盡管它們的名字相似,但功能和用途卻截然不同,這篇文章主要介紹了JS?Array方法詳解之如何區(qū)分slice和splice,需要的朋友可以參考下2025-06-06
怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化
這篇文章主要介紹了怎樣用Javascript實現(xiàn)函數(shù)柯里化與反柯里化，想了解函數(shù)柯里化的同學(xué)，可以參考下2021-04-04
在js中我們有時會遇到計算,通過加減乘除處理某些業(yè)務(wù),那么這時候如果不做任何處理,就會出現(xiàn)如下典型的精度丟失問題,下面這篇文章主要給大家介紹了關(guān)于JS中浮點數(shù)精度問題的分析與解決方法,需要的朋友可以參考下2022-04-04
簡單通過settimeout看javascript的運行機制
這篇文章主要給大家介紹了關(guān)于如何通過settimeout看javascript的運行機制的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了js前端日歷控件，可根據(jù)日期自定義日歷上某日的顏色，另外可以懸浮，拖拽，自由變形2017-03-03
bootstrap-table.js擴展分頁工具欄(增加跳轉(zhuǎn)到xx頁)功能
這篇文章主要介紹了bootstrap-table.js擴展分頁工具欄，增加跳轉(zhuǎn)到xx頁功能，由于小編的水平停留在dom級，此次擴展只支持頁面上的表格，如果大家有好的建議歡迎提出2017-12-12
webpack配置環(huán)境變量文件,是根據(jù)打包命令尋找對應(yīng)的環(huán)境變量文件,從而獲取接口地址,本文就來介紹一下webpack配置文件外置的兩種實現(xiàn)方式,感興趣的可以了解一下2023-12-12