JavaScript

HTML DOM

講者：蔡孟軒

日期：2020/12/01

OUTLINE

  • 認識陣列 ( Array )
  • 認識函數 ( function )
  • 什麼是 JavaScript HTML DOM？
  • 基本操作
  • 簡單 ( ? ) 小實作

認識陣列 ( Array )

建立陣列

var arrayName = [item1, item2, ...];
var fruits = ["apple", "banana", "pineapple"];
console.log(fruits)

獲取陣列長度、值

arrayName.length // 取得長度
arrayName[index] // 取得指定位置的值

獲取陣列長度、值

var fruits = ["apple", "banana", "pineapple"];
console.log(fruits.length); // 3
console.log(fruits[0]); // apple
console.log(fruits[1]); // banana
console.log(fruits[2]); // pineapple

修改元素

  • 把 pineapple 換成 strawberry 
var fruits = ["apple", "banana", "pineapple"];
fruits[2] = "strawberry";
console.log(fruits);
// ["apple", "banana", "strawberry"]

新增元素

  • 加在後面
  • 加在前面
arrayName.push(Value);
arrayName.unshift(Value);
fruits.push("Orange");
console.log(fruits); // ["apple", "banana", "strawberry", "Orange"]
fruits.unshift("peach");
console.log(fruits); // ["peach", "apple", "banana", "strawberry", "Orange"]

刪除元素

  • 刪除最後一個
  • 刪除第一個
arrayName.pop();
arrayName.shift();
fruits.pop(); // "strawberry"
console.log(fruits); // ["peach", "apple", "banana", "strawberry"]
fruits.shift();
console.log(fruits); // ["apple", "banana", "strawberry"]

刪除元素

  • 刪除特定位置的元素
delete arrayName[Index];
delete fruits[0];
console.log(fruits);
// [empty, "banana", "strawberry"]

注意：只是將該位置的元素值變成 empty

認識函數 ( function )

建立函數

function functionName(parameter1, parameter2, ...) {
  // statements
  
  // return value;
}
function welcome() {
  console.log("Hello World!");
}
function countnum(num) {
  var ans = num * 100;
  return ans;
}

呼叫函數

functionName(parameter1, parameter2, ...);
welcome();
var a = number(prompt("請輸入數字"));
console.log(countnum(a));

什麼是 JavaScript HTML DOM？

DOM

  • 全稱：Document Object Model
  • 中文：文件物件模型
  • 是HTML、XML 和 SVG 文件的程式介面 ( API )
  • 提供了文件樹狀結構的表示法
  • 建立網頁與程式的溝通橋樑

HTML DOM

  • 假設現在有一個網頁html是這樣
<!DOCTYPE html>
<html>
<head>
    <title>一個簡單的網頁</title>
</head>
<body>
    <h1>這是標題</h1>
    <p>這是一個<i>簡單</i>的網頁</p>
</body>
</html>

HTML DOM

基本操作

認識document

  • DOM tree 的根節點
  • 網頁的初始文件
  • 表示整份 HTML 文件

查找元素(element)

  • getElementById(id)
  • getElementsByClassName(names)
  • getElementsByName(name)
  • getElementsByTagName(name)
  • …

先寫一個超簡單網頁

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
</head>
<body>
    <div>
        <h1 id="title">這是標題</h1>
        <p class="first">第一行</p>
        <p class="second">第二行</p>
      	<p class="second">我覺得這還是第二行</p>
        <p name="third">第三行</p>
        <p>第四行</p>
    </div>    
</body>
</html>

getElementById(id)

var item = document.getElementById("title");
console.log(item);
// <h1 id="title">這是標題</h1>

如果只要裡面的文字

使用 .innerHTML

console.log(item.innerHTML);
// 這是標題

getElementsBy-ClassName(names)

var items = document.getElementsByClassName("second");
console.log(items);
// 存成array的型態
console.log(items[0]);
// <p class="second">第二行</p>
console.log(items[0].innerHTML);
// 第二行

getElementsBy-Name(name)

var items = document.getElementsByName("third")
console.log(items);
// 存成array的型態
console.log(items[0]);
// <p name="third">第三行</p>
console.log(items[0].innerHTML);
// 第三行

getElementsBy-TagName(name)

var items = document.getElementsByName("p")
console.log(items);
// 存成array的型態
console.log(items[0])
// <p class="first">第一行</p>
console.log(items[0].innerHTML)
// 第一行

簡單 ( ? ) 小實作

LAB-1

<!DOCTYPE html>
<html>
<head>
  <title>change word</title>
</head>
<body>
  <div id="changing">Hello!</div>
</body>
</html>
  • 點擊按鈕換掉原來的字

STEP1 寫函數供按按鈕時呼叫

<script>
  function change(){
  	var item = document.getElementById("changing");
  	//把要改變的地方抓出來
  	item.innerHTML = "Nice to meet you!";
  	//把內部的文字修改掉
  }
</script>

STEP2 寫個按鈕

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

完整 HTML

<!DOCTYPE html>
<html>
<head>
  <title>change word</title>
  <script>
    function change(){
      var item = document.getElementById("changing");
      item.innerHTML = "Nice to meet you!";
    }
  </script>
</head>
<body>
  <div id="changing">Hello!</div>
  <button onclick="change()">Change</button>
</body>
</html>

LAB-2

  • 同時換掉字的顏色和粗細
<!DOCTYPE html>
<html>
<head>
  <title>change word</title>
  <script>
    function change(){
      var item = document.getElementById("changing");
      item.innerHTML = "Nice to meet you!";
    }
  </script>
</head>
<body>
  <div id="changing">Hello!</div>
  <button onclick="change()">Change</button>
</body>
</html>

修改一下函數

function change(){
  var item = document.getElementById("changing");
  item.innerHTML = "Nice to meet you!";
  item.style.color = "blue";
  // 改顏色
  item.style.fontWeight = "bold";
  // 改粗細
}

完整 HTML

<!DOCTYPE html>
<html>
<head>
  <title>change word</title>
  <script>
    function change(){
      var item = document.getElementById("changing");
      item.innerHTML = "Nice to meet you!";
      item.style.color = "blue";
      item.style.fontWeight = "bold";
    }
  </script>
</head>
<body>
  <div id="changing">Hello!</div>
  <button onclick="change()">Change</button>
</body>
</html>

Reference

Thanks for listening

Made with Slides.com