黑馬pink JavaScript學習筆記_Web APIs Day1

growingbambi發表於2024-07-23
JavaScript筆記WebAPI

複習變數宣告

變數宣告優先使用const

建議陣列和物件使用const來宣告

如果基本資料型別的值或者引用資料型別的地址發生變化的時候，就要使用let宣告變數。比如for迴圈中的i++

Web API基本認識

作用和分類

作用就是使用JS去操作html瀏覽器

DOM(文件物件模型)，BOM（瀏覽器物件模型）

image-20240719214337000

什麼是DOM

DOM(Document Object Model)：與任意HTML或者XML文件互動的API，用來操作網頁功能

DOM樹

將HTML文件以樹狀圖的結構直接表現出來，將這個稱為DOM樹。

文件樹可以直觀地體現標籤與標籤之間的關係。

image-20240719214754544

DOM物件（重點內容）

DOM物件：瀏覽器根據html標籤生成的JS物件

DOM的核心思想：把網頁內容當作物件來處理

document物件：

  • 它是DOM裡提供的一個物件
  • 網頁所有的內容都在document裡面

image-20240719214939292

獲取DOM元素

根據CSS選擇器來獲取DOM元素

選擇匹配的第一個元素

//document.querySelector("這裡填寫一個或多個有效的CSS選擇器的字串");
document.querySelector("img");//返回結果是一個HTMLElement物件

選擇匹配的多個元素

document.querySelectorAll("img");//返回結果是NodeList物件集合

透過這種方式得到的陣列是一個偽陣列

  • 有長度，有索引號
  • 沒有pop(), push()等其他陣列方法

練習

image-20240719072252115

<!DOCTYPE html>
<html lang="en">

<body>
    <ul class="nav">
        <li>我的首頁</li>
        <li>產品介紹</li>
        <li>聯絡方式</li>
    </ul>

    <script>
        const lis = document.querySelectorAll("ul li");
        console.log(lis);
        for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
        }
    </script>
</body>

</html>

image-20240719215942735

其他獲取DOM元素的方法

<div id="nav">
    我的id是nav
</div>

<div class="section">我的class是section</div>
<script>
    //根據id獲取元素
    const nav = document.getElementById("nav");
    console.log(nav);

    //根據標籤獲取元素：獲取頁面所有div標籤
    const div = document.getElementsByTagName("div");
    console.log(div);

    //根據類名獲取元素：獲取頁面所有類名為section的元素
    const section = document.getElementsByClassName("section");//返回結果是HTMLCollection
    console.log(section);
</script>

image-20240722201932343

操作元素內容

物件.innerText屬性

特點：只顯示純文字，不解析標籤

<span>hello，我是summer</span>
<script>
    const pDom = document.querySelector('span');
    console.log(pDom.innerText);
    pDom.innerText = "hello, 我是Dawn，<bold>我不能解析標籤</bold>";
</script>

image-20240719220857586

物件.innerHTML屬性

特點：會解析標籤

<span>hello，我是summer</span>
<script>
    const pDom = document.querySelector('span');
    console.log(pDom.innerText);
    pDom.innerHTML = "hello, 我是重生之後的Dawn，<b>我可以解析標籤</b>";
</script>

image-20240719221016339

案例：年會抽獎案例

image-20240719221228830

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>年會抽獎</title>
  <style>
    .wrapper {
      width: 840px;
      height: 420px;
      background: url(./images/bg01.jpg) no-repeat center / cover;
      padding: 100px 250px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <strong>傳智教育年會抽獎</strong>
    <h1>一等獎：<span id="one">???</span></h1>
    <h3>二等獎：<span id="two">???</span></h3>
    <h5>三等獎：<span id="three">???</span></h5>
  </div>
  <script>
    const personArr = ['周杰倫', '劉德華', '周星馳', 'Pink老師', '張學友'];
    const random = Math.floor(Math.random() * personArr.length);
    const one = document.querySelector("#one");//這裡如果不加#號就拿不到對應的DOM物件了
    one.innerHTML = personArr[random];

    personArr.splice(random, 1);
    console.log(personArr);

    const random2 = Math.floor(Math.random() * personArr.length);
    const two = document.querySelector("#two");
    two.innerHTML = personArr[random2];

    personArr.splice(random2, 1);
    console.log(personArr);

    const random3 = Math.floor(Math.random() * personArr.length);
    const three = document.querySelector("#three");
    three.innerHTML = personArr[random3];

    personArr.splice(random3, 1);
    console.log(personArr);
  </script>
</body>

</html>

image-20240719221510077

image-20240719221536953

操作元素屬性

操作元素常用屬性

語法：物件.屬性 = 值;

練習：頁面重新整理的時候，圖片隨機更換

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>hello from the other side</title>
    </head>

    <body>
        <img src="./images/1.webp"></img>
    <script>
        const img = document.querySelector("img");
        const random = Math.floor(Math.random() * (6 - 1 + 1)) + 1;
        img.src = `./images/${random}.webp`;

        document.querySelectorAll("img");
    </script>
    </body>

</html>

操作元素樣式屬性

透過style屬性操作CSS

語法：

物件.style.樣式屬性 = 值;//（如果屬性有-連線符，需要轉換為小駝峰命名法）

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>hello from the other side</title>
    </head>

    <body>
        <div class="box" style="background-color: aqua;">
            hello summer
        </div>
        <script>
            const box = document.querySelector("div");
            box.style.width = "300px";
            box.style.height = "300px";
            box.style.border = "2px solid blue";
            box.style.backgroundColor = "pink";
        </script>
    </body>

</html>

練習：頁面重新整理，隨機更換背景圖片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello from the other side</title>
    <style>
        body {
            background-image:
                url(./images/desktop_1.jpg)
        }
    </style>
</head>

<body>
    <script>

        function getRandom(M, N) {
            return Math.floor(Math.random() * (M - N + 1)) + N;
        }

        const random = getRandom(1, 10);

        document.body.style.backgroundImage = `url(./images/desktop_${random}.jpg)`;
    </script>
</body>

</html>

透過操作類名(className)操作CSS

語法：

元素.className = 'active'; //active是一個css類名

注意：

  • 因為class是關鍵字，所以使用className去代替
  • className是使用新值換舊值
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>hello from the other side</title>
    <style>
        .nav {
            background-color: aqua;
            width: 200px;
            height: 200px;
        }

        .active {
            background-color: pink;
            width: 500px;
            height: 500px;
            background-image: url(./images/2.webp);
        }
    </style>
</head>

<body>
    <div class="nav">
        hello world
    </div>
    <script>
        const div = document.querySelector("div");
        div.className = "active";
    </script>
</body>

</html>

透過classList操作類控制CSS

//追加一個類
元素.classList.add("類名");
//刪除一個類
元素.classList.remove("類名");
//切換一個類（如果沒有就加上，如果已經有了就刪掉）
元素.classList.toggle("類名");

練習：輪播圖隨機版

需求：當我們重新整理頁面，頁面中的輪播圖會顯示不同圖片以及樣式 模組：

①：圖片會隨機變換

②：底部盒子背景顏色和文字內容會變換

③：小圓點隨機一個高亮顯示

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>輪播圖點選切換</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>對人類來說會不會太超前了？</p>
      <ul class="slider-indicator">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始資料
    const sliderData = [
      { url: './images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider04.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider05.jpg', title: '李玉剛：讓世界透過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider06.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider07.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider03.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },
    ]

    //獲取隨機數字
    const random = Math.floor(Math.random() * sliderData.length);
    //獲取img物件(這裡用點.和用#有什麼區別？？)
    const img = document.querySelector(".slider-wrapper img");
    //修改img物件的url屬性
    img.src = sliderData[random].url;


    const p = document.querySelector(".slider-footer p");
    p.innerHTML = sliderData[random].title;

    const color = document.querySelector(".slider-footer");
    color.style.backgroundColer = sliderData[random].color;


    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`);//css結構偽類選擇器
    li.classList.add("active");
  </script>
</body>

</html>

image-20240720230054987

image-20240720230117560

操作表單元素屬性

獲取：DOM物件.屬性名

設定值：DOM物件.屬性名 = 新值

表單.value = '使用者名稱';
表單.type = 'password'

表單屬性disable, checked, selected

程式碼練習

<body>
    <!-- <input type="text" value="你好"> -->

    <!-- <input type="checkbox">看星星 -->

    <button>我是一個點選按鈕哦</button>

    <script>
        // input
        // const input = document.querySelector("input");
        // console.log(input.value);
        // input.value = "summer";

        // checkbox
        // const input = document.querySelector("input");
        // console.log(input.checked);
        // input.checked = true;
        // input.checked = 'true';//這個也會是選中的，在js中，除了0和空值之外的值，都是預設會轉為true

        // button
        const button = document.querySelector("button");
        console.log(button.disabled);

        // button.disabled = true;
        button.disabled = "disabled";//這個處理完之後，button的內容就會變為<button disabled>我是一個點選按鈕哦</button>如果屬性的值和屬性的名字完全一樣，可以省略後面的值，直接這樣寫
    </script>
</body>

自定義屬性

標準屬性：標籤自帶的屬性，比如 class id title等

自定義屬性：html5中推出的專門的data-自定義屬性

  • 標籤一律以data-開頭
  • DOM物件上一律以dataset物件方式獲取自定義屬性的內容
<div data-id="hello1" data-name="不知道">hello</div>

<script>
    const div = document.querySelector("div");
    console.log(div.dataset.id);
    console.log(div.dataset.name);
</script>

定時器-間歇函式

  1. 開啟定時器
setInterval(函式, 間隔時間)
  • 作用：每隔一段時間呼叫一下函式
  • 間隔時間的單位是毫秒
  1. 關閉定時器
let 變數名 = setInterval(函式, 間隔時間);
clearInterval(變數名);

案例：閱讀註冊協議

image-20240722200302636

<!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>
    <textarea name="" id="" cols="30" rows="10">
        使用者註冊協議
        歡迎註冊成為京東使用者！在您註冊過程中，您需要完成我們的註冊流程並透過點選同意的形式線上簽署以下協議，請您務必仔細閱讀、充分理解協議中的條款內容後再點選同意（尤其是以粗體或下劃線標識的條款，因為這些條款可能會明確您應履行的義務或對您的權利有所限制）。
        【請您注意】如果您不同意以下協議全部或任何條款約定，請您停止註冊。您停止註冊後將僅可以瀏覽我們的商品資訊但無法享受我們的產品或服務。如您按照註冊流程提示填寫資訊，閱讀並點選同意上述協議且完成全部註冊流程後，即表示您已充分閱讀、理解並接受協議的全部內容，並表明您同意我們可以依據協議內容來處理您的個人資訊，並同意我們將您的訂單資訊共享給為完成此訂單所必須的第三方合作方（詳情檢視
    </textarea>
    <br>
    <button class="btn" disabled>我已經閱讀使用者協議(10)</button>

    <script>
        let i = 10;
        let n = setInterval(function () {
            i--;

            const btn = document.querySelector(".btn");
            btn.innerHTML = `我已經閱讀使用者協議(${i})`;

            if (i === 0) {
                clearInterval(n);
                btn.disabled = false;
                btn.innerHTML = "我同意本協議";//注意：獲取button裡面的內容也要用innerHTML,不能用.value
            }

        }, 1000);
    </script>
</body>
    
</html>

image-20240722200606473

image-20240722200622097

綜合案例：輪播圖定時版

image-20240722200353103

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>輪播圖點選切換</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .slider {
      width: 560px;
      height: 400px;
      overflow: hidden;
    }

    .slider-wrapper {
      width: 100%;
      height: 320px;
    }

    .slider-wrapper img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .slider-footer {
      height: 80px;
      background-color: rgb(100, 67, 68);
      padding: 12px 12px 0 12px;
      position: relative;
    }

    .slider-footer .toggle {
      position: absolute;
      right: 0;
      top: 12px;
      display: flex;
    }

    .slider-footer .toggle button {
      margin-right: 12px;
      width: 28px;
      height: 28px;
      appearance: none;
      border: none;
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-radius: 4px;
      cursor: pointer;
    }

    .slider-footer .toggle button:hover {
      background: rgba(255, 255, 255, 0.2);
    }

    .slider-footer p {
      margin: 0;
      color: #fff;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .slider-indicator {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
    }

    .slider-indicator li {
      width: 8px;
      height: 8px;
      margin: 4px;
      border-radius: 50%;
      background: #fff;
      opacity: 0.4;
      cursor: pointer;
    }

    .slider-indicator li.active {
      width: 12px;
      height: 12px;
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="slider">
    <div class="slider-wrapper">
      <img src="./images/slider01.jpg" alt="" />
    </div>
    <div class="slider-footer">
      <p>對人類來說會不會太超前了？</p>
      <ul class="slider-indicator">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="toggle">
        <button class="prev">&lt;</button>
        <button class="next">&gt;</button>
      </div>
    </div>
  </div>
  <script>
    // 1. 初始資料
    const sliderData = [
      { url: './images/slider01.jpg', title: '對人類來說會不會太超前了？', color: 'rgb(100, 67, 68)' },
      { url: './images/slider02.jpg', title: '開啟劍與雪的黑暗傳說！', color: 'rgb(43, 35, 26)' },
      { url: './images/slider03.jpg', title: '真正的jo廚出現了！', color: 'rgb(36, 31, 33)' },
      { url: './images/slider04.jpg', title: '李玉剛：讓世界透過B站看到東方大國文化', color: 'rgb(139, 98, 66)' },
      { url: './images/slider05.jpg', title: '快來分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },
      { url: './images/slider06.jpg', title: '嗶哩嗶哩小年YEAH', color: 'rgb(166, 131, 143)' },
      { url: './images/slider07.jpg', title: '一站式解決你的電腦配置問題！！！', color: 'rgb(53, 29, 25)' },
      { url: './images/slider08.jpg', title: '誰不想和小貓咪貼貼呢！', color: 'rgb(99, 72, 114)' },
    ]

    const img = document.querySelector(".slider-wrapper img")
    const p = document.querySelector(".slider-footer p")

    let i = 0;
    setInterval(function () {
      i++;
      if (i >= sliderData.length) {
        i = 0;
      }

      img.src = sliderData[i].url;
      p.innerHTML = sliderData[i].title;

      document.querySelector(".slider-indicator .active").classList.remove("active");

      document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add("active");
    }, 1000);
  </script>


</body>

</html>

image-20240722200527097

相關文章