欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS的引入與輸入輸出示例詳解

 更新時(shí)間：2025年05月26日 14:24:20   作者：-代號(hào)9527  
這篇文章主要介紹了JS的引入與輸入輸出示例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1、常用工具與插件

1.1 Snipaste

一個(gè)前端截圖軟件：

常用快捷鍵（搭配Fn）：

  • 截圖：F1
  • 截圖定在屏幕上：F3 ，選中后ESC退出
  • 取顏色：截圖時(shí)，鼠標(biāo)定到想要顏色的區(qū)域，看到顏色值，按shift切換成GBG/HEX格式，按C復(fù)制

1.2 Error Lens

一個(gè)報(bào)錯(cuò)提示插件：Error Lens

效果：

1.3 One Dark Pro

一個(gè)代碼顏色插件：

安裝后，設(shè)置自己喜歡的顏色主題：

1.4 Live Server

一個(gè)左邊寫代碼，右邊預(yù)覽的分屏插件

安裝完成后，右鍵Open with Live Server，然后Win + ??，出現(xiàn)在右邊

2、JavaScript

2.1 JS介紹

JavaScript是一種運(yùn)行在客戶端(瀏覽器) 的編程語(yǔ)言，實(shí)現(xiàn)人機(jī)交互效果，相比，HTML則是一種標(biāo)記語(yǔ)言。JavaScript可以實(shí)現(xiàn)：

  • 網(wǎng)頁(yè)特效 ：監(jiān)聽用戶的一些行為讓網(wǎng)頁(yè)作出對(duì)應(yīng)的反饋，如輪播圖
  • 表單驗(yàn)證 ：針對(duì)表單數(shù)據(jù)的合法性進(jìn)行判斷

  • 數(shù)據(jù)交互 ：獲取接口返回的數(shù)據(jù), 渲染到前端頁(yè)面
  • 服務(wù)端編程 ：node.js
<!--JS參考網(wǎng)站：MDN-->
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

2.2 JS的組成

JS有兩部分：

  • ECMAScript：規(guī)定了js基礎(chǔ)語(yǔ)法，比如：變量、分支語(yǔ)句、循環(huán)語(yǔ)句、對(duì)象等
  • Web APIs ：
    • DOM ， 操作文檔，比如對(duì)頁(yè)面元素進(jìn)行移動(dòng)、大小、添加刪除等操作
    • BOM，操作瀏覽器，比如頁(yè)面彈窗，檢測(cè)窗口寬度、存儲(chǔ)數(shù)據(jù)到瀏覽器

3、JS初體驗(yàn)

以下，用三件套，做一個(gè)點(diǎn)擊哪個(gè)按鈕，哪個(gè)按鈕變黃的效果：

<!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對(duì)應(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>
    // 頁(yè)面彈出警示框
    alert('Hello World!')
  </script>
</body>
</html>

將 <script> 放在HTML文件的body底部附近的原因是讓瀏覽按照代碼在文件中的順序先加載 HTML，否則上來(lái)就是JS，像前面入門案例中的document.querySelectorAll('button')就會(huì)有問(wèn)題

4.2 外部JS

代碼寫.js結(jié)尾的文件里，通過(guò)script標(biāo)簽，引入到html頁(yè)面中

<!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)簽中間無(wú)需寫代碼，否則會(huì)被忽略，相比前面的行內(nèi)JS，JS代碼很多時(shí)，外部JS代碼結(jié)構(gòu)更清晰

4.3 內(nèi)聯(lián)JS

代碼寫在標(biāo)簽內(nèi)部

<body>
	<button onclick="alert('逗你的~~')">點(diǎn)我月入百萬(wàn)</button>
</body>

5、JS中的注釋與結(jié)束符號(hào)

注釋：

單行，//，Ctrl + /

多行，/* */，shift + alt + A

結(jié)束符號(hào)：

  • 封號(hào)；結(jié)尾
  • 封號(hào)可省略，瀏覽器可以自動(dòng)推斷語(yǔ)句的結(jié)束位置，要么都加，要么都不加（建議不加）

6、JS的輸出

6.1 語(yǔ)法1：document.write

  • document.write
  • 作用：向html的body內(nèi)輸出內(nèi)容，且如果輸出的內(nèi)容寫的是標(biāo)簽，也會(huì)被解析成網(wǎng)頁(yè)元素
<body>
  <script>
    // document.write可以輸出文字，也可以輸出標(biāo)簽
    document.write('輸出普通文字')
    document.write('<h1>輸出h1標(biāo)簽</h1>')
  </script>
</body>

6.2 語(yǔ)法2：alert(’ ')

  • alert
  • 作用:頁(yè)面彈出警告對(duì)話框
<body>
  <script>
    alert('彈出內(nèi)容')
  </script>
</body>

6.3 語(yǔ)法3：console.log

  • console.log
  • 作用：控制臺(tái)輸出語(yǔ)法，調(diào)試代碼使用
<body>
  <script>
    console.log("debug")
    console.log('debug')
  </script>
</body>

7、JS的輸入

prompt，翻譯：提示，顯示一個(gè)對(duì)話框，對(duì)話框中包含一條文字信息，用來(lái)提示用戶輸入文字

<body>
  <script>
    prompt('請(qǐng)輸入你的姓名')
  </script>
</body>

8、JS代碼執(zhí)行順序

JavaScript 代碼執(zhí)行順序：

  • 按HTML文檔流順序執(zhí)行JavaScript代碼
  • alert() 和 prompt() 它們會(huì)跳過(guò)頁(yè)面渲染先被優(yōu)先執(zhí)行

到此這篇關(guān)于JS的引入與輸入輸出的文章就介紹到這了,更多相關(guān)js引入與輸入輸出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論