第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2025-02-08

調(diào)試方案

程序調(diào)試是將編制的程序投入實(shí)際運(yùn)行前，用手工或編譯程序等方法進(jìn)行測(cè)試，修正語法錯(cuò)誤和邏輯錯(cuò)誤的過程。

調(diào)試就是驗(yàn)證程序的正確性或自我猜想的過程，掌握一定的調(diào)試技巧，可以觀察程序執(zhí)行中的情況、快速定位 BUG 等。

前端開發(fā)者最常用、有效的調(diào)試方式就是使用瀏覽器內(nèi)置的開發(fā)者工具。

1. 開發(fā)者工具

Chrome 開發(fā)者工具是一套內(nèi)置于 Google Chrome 中 的 Web 開發(fā)和調(diào)試工具，可用來對(duì)網(wǎng)站進(jìn)行迭代、調(diào)試和分析。

開發(fā)者工具內(nèi)置在 Chrome 瀏覽器中。

如果還未安裝 Chrome 瀏覽器，可以點(diǎn)擊這里獲取。

以下方式可以打開開發(fā)者工具：

  • 在 Chrome 菜單中選擇： 更多工具 > 開發(fā)者工具
  • 在頁面中任意位置上右鍵點(diǎn)擊，在菜單中選擇 “檢查”
  • Windows 下使用快捷鍵 Ctrl+Shift+I，Mac下使用快捷鍵 Option + Command + I

圖片描述

控制臺(tái)界面

章節(jié)中主要會(huì)使用到 Console面板 (上圖中第二個(gè)高亮的選項(xiàng))來查看輸出的日志等，結(jié)合日志來進(jìn)行分析調(diào)試。

2. console 對(duì)象

console對(duì)象 連接了用戶與開發(fā)者工具中的 Console面板，使用 console對(duì)象 可以輸出內(nèi)容至 Console面板，主要用于輸出日志，便于調(diào)試。

console對(duì)象 通常要結(jié)合 Console面板 來使用，通常也會(huì)稱呼其為 控制臺(tái)，為了防止 Console對(duì)象 與 Console 面板在稱呼上的混亂，之后都會(huì)稱其為 控制臺(tái)。

例如想在控制臺(tái)中輸出 JavaScript ，輸入以下內(nèi)容到控制臺(tái)的光標(biāo)處并回車即可。

console.log('JavaScript');

圖片描述

可以嘗試著修改單引號(hào)內(nèi)的內(nèi)容，會(huì)有不同的結(jié)果。

以上就是最簡(jiǎn)單的一句 JavaScript 代碼，意思就是調(diào)用 Console 對(duì)象下的 log 方法，并傳遞字符串 JavaScript 給 log 方法。

代碼末尾還可以見到一個(gè)分號(hào)，在 JavaScript 中分號(hào)用來表示一行代碼的結(jié)束。但是也可以不加分號(hào)，大多數(shù)情況下用換行符也可以作為一行代碼結(jié)束的標(biāo)志。

這里不需要理解是什么意思，只需要知道這樣可以往控制臺(tái)輸出內(nèi)容。

3. 將 JavaScript 寫在 HTML 中

學(xué)習(xí)過 HTML 的讀者知道，瀏覽器可以直接打開 HTML 文件。

我們可以使用 <script></script> 標(biāo)簽包裹 JavaScript 代碼，然后使用瀏覽器打開，就可以讓 JavaScript 代碼通過 HTML 運(yùn)行在瀏覽器中。

同樣的，想在控制臺(tái)輸出一段內(nèi)容，就可以先新建一個(gè)，或者在已有的一個(gè) HTML 文件中加入 script 標(biāo)簽，然后在標(biāo)簽中書寫 JavaScript 代碼。

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <p>我是一個(gè)段落</p>

  <script>
    console.log('JavaScript');
  </script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

使用瀏覽器打開 HTML 文件就可以觀察到控制臺(tái)有輸出的內(nèi)容，被 script 標(biāo)簽包裹的代碼會(huì)被瀏覽器自動(dòng)執(zhí)行。

注意：章節(jié)中的內(nèi)容如果沒有使用到 HTML，默認(rèn)就是將 JavaScript 代碼書寫在 script 標(biāo)簽中，防止不必要的代碼增加篇幅

4. 通過操作 DOM 進(jìn)行調(diào)試

DOM 可以先簡(jiǎn)單地理解成瀏覽器將 HTML 解析后構(gòu)建的一顆樹，樹上的每一個(gè)節(jié)點(diǎn)就是一個(gè) DOM 節(jié)點(diǎn)。

注意：有的時(shí)候可以聽到HTML上的一個(gè)標(biāo)簽就是一個(gè)DOM節(jié)點(diǎn)這樣的概念，其實(shí)這是錯(cuò)誤的，HTML 只是一段有格式的文本，瀏覽器解析后才會(huì)變成一顆 DOM 樹。

通過操作 DOM，也可以達(dá)到調(diào)試的效果。

例如想要做個(gè)簡(jiǎn)單的抽獎(jiǎng)程序，就可以使用以下代碼：

實(shí)例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>包中抽獎(jiǎng)</title>
  <style>
    .start {
      border: 1px solid #4caf50;
      background: transparent;
      font-size: 18px;
      padding: 8px 22px;
      color: #4caf50;
      outline: none;
      border-radius: 2px;
      cursor: pointer;
    }

    .start:active {
      background: #4caf50;
      color: white;
    }

    .lottery {
      font-size: 22px;
      color: red;
    }

    .prize {
      color: red;
      font-size: 22px;
    }
  </style>
</head>
<body>
  <div>
    <button class="start">戳我抽獎(jiǎng)!</button>
  </div>
  <div class="result">
  </div>
  <script>
    var prizeList = ['5年高考3年模擬', '加班一天', '快樂水一罐'];

    var startBtn = document.querySelector('.start');
    var resultEle = document.querySelector('.result');

    startBtn.addEventListener('click', function() {
      var prize = Math.floor(Math.random() * 3 + 1);

      var text = [
      '恭喜！抽到了 ',
      '<span class="lottery">',
      prize,
      '</span>',
      ' 等獎(jiǎng)！獎(jiǎng)品是 ',
      '<span class="prize">',
      prizeList[prize - 1],
      '</span>',
      '！',
      ].join('');

      resultEle.innerHTML = text;
    });
  </script>
</body>
</html>
運(yùn)行案例 點(diǎn)擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

使用瀏覽器打開，點(diǎn)擊按鈕后就會(huì)展示對(duì)應(yīng)的結(jié)果。

圖片描述

可以先不關(guān)心上述代碼具體的細(xì)節(jié)，只需要先了解這種方式可以將內(nèi)容輸出到瀏覽器中，也可以進(jìn)行調(diào)試。

5. 小結(jié)

結(jié)合開發(fā)者工具進(jìn)行調(diào)試是必備技能，調(diào)試的技巧也非常多樣化，除了上述的幾種，常用的還有 斷點(diǎn)調(diào)試，部分特殊情況下還會(huì)利用 alert（一種會(huì)阻塞瀏覽器進(jìn)程的對(duì)話框）進(jìn)行調(diào)試。

不同的人使用的調(diào)試技巧也不同，有了一定的編碼經(jīng)驗(yàn)后就會(huì)找到適合自己的調(diào)試技巧，對(duì)語言本身有足夠的調(diào)節(jié)，才能讓自己的調(diào)試技巧更加完善。

6. 擴(kuò)展

簡(jiǎn)單的過一遍 Chrome 官方的開發(fā)者工具文檔，了解開發(fā)者工具提供了哪些功能。