iT邦幫忙

2021 iThome 鐵人賽

DAY 28
0
Modern Web

JS進入新手村,我好害怕系列 第 28

Day28-終於要進去新手村了-HTML DOM 觀念介紹

我們上一篇文章講到了HTML DOM的階層以及樹狀圖,接下來我們就舉兩個例子來釐清一下觀念,也讓我自己做個紀錄。

我們先把樹狀圖放出來,等等的例子中可以用來做對照

例1:

alert(window.screen.width+"*"+window.screen.height);

這個例子中可以看到我們使用了alert函式,這個函式會跳出警告視窗,接下來內容的部分window.screen.width,我們可以解釋為window(全域)下的screen(解析度),width代表著寬度,那同理的height代表高度,所以這個警告視窗會跳出來我們電腦目前的解析度,可以看做是用這樣的方式去抓電腦內相對應的資料,我們對比一下樹狀圖,可以發現是由最上方往下去找,一直到找到所需要的資料為止。

例2:

<!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">
    <script>
      function change(){
        window.document.body.innerHTML="Hello World";
      }
    </script>
    <title>Document</title>
</head>
<body>
  <button onclick="change();">change</button>
</body>
</html>

我們可以看到上面是一個完整的html架構,我們首先先來看到兩個地方,第一個是

function change(){
        window.document.body.innerHTML="Hello World";
      }

這裡我們做了一個函式,這個函式內容前面的部分一樣是依照樹狀圖由上而下,但是我們看到了innerHTML,這個功能在JS之中有取得資料或是放入資料的雙向功能,我們上方的使用方式是放入資料,字串Hello World。順帶一提的是window可以省略,只是為了在學習階段讓記憶更深才加在程式碼之中。

接著我們看到body內的程式碼:

<button onclick="change();">change</button>

這裡我們使用了button按鈕標籤,onclick這個語法是用來觸發(呼叫)相對應的JS,我們在裡面放入了上方設定好的函數change(),所以一開始網頁上面會有一個上面寫著change的按鈕,使用者一旦點擊之後觸發了JS函數,將Hello World這組字串取代原本按鈕的位置顯示在網頁上。

上方的例子是用來釐清觀念用,實際上比較少這樣使用


上一篇
Day27:終於要進去新手村了-HTML DOM 基本觀念
下一篇
Day29-終於要進去新手村了-HTML DOM 範例
系列文
JS進入新手村,我好害怕30

1 則留言

0
juck30808
iT邦新手 2 級 ‧ 2021-10-14 12:07:05

恭喜即將邁入完賽啦~

h1144777 iT邦新手 5 級 ‧ 2021-10-14 22:13:10 檢舉

謝謝你~~~~~

我要留言

立即登入留言