這是個 w3schools 提供的免費的 JS 練習題目剛好可以熟悉一些 JS 的方法，這邊我就剛好利用這個練習來整理這些用法並記錄在這篇文章中，以便未來忘記語法可以來查看

完成證明

JS Variables

第五題，他使用逗點的方式一次指派多個變數

On one single line, declare three variables with the following names and values:

firstName = “John”
lastName = “Doe”
age = 35

1
var firstName = "John", lastName = "Doe", age = 35;

JS Events

使用到 onmouseover

The<div>element should turn red when someone moves the mouse over it.

1
<div onmouseover="this.style.backgroundColor='red'">myDIV.</div>

JS Strings

跳脫字元 利用反斜線來跳脫引號

Use escape characters to alert We are “Vikings”.

1
2
var txt = "We are \"Vikings\"";
alert(txt);

JS String Methods

indexOf()

使用 indexOf() 找出字串內指定的字母的位置

Find the position of the character h in the string txt.

1
2
3
4
var txt = "abcdefghijklm";
var pos = txt.indexOf("h");

console.log(pos) // 7

slice()

使用 slice() 從字串中切出指定的字母，(第一位字母, 最後一字母下一位)

Use the slice method to return the word “bananas”.

1
2
3
4
var txt = "I can eat bananas all day";
var x = txt.slice(10, 17);

console.log(x) // bananas

replace()

使用 replace() 取代字母 (原本的字母, 取代的字母)

Use the correct String method to replace the word “Hello” with the word “Welcome”.

1
2
3
4
var txt = "Hello World";
txt = txt.replace("Hello", "Welcome");

console.log(txt) //  Welcome World

JS Array Methods

pop()

使用 pop() 移除最後一個內容

Use the correct Array method to remove the last item of the fruits array.

1
2
3
4
var fruits = ["Banana", "Orange", "Apple"];
fruits.pop();

console.log(fruits) // ["Bananas","Oranges"]

push()

使用 push() 加入內容到陣列最後

Use the correct Array method to add “Kiwi” to the fruits array.

1
2
3
4
var fruits = ["Banana", "Orange", "Apple"];
fruits.push("Kiwi");

console.log(fruits) // ["Banana", "Orange", "Apple", "Kiwi"]

splice()

使用 splice() 刪除指定 index 的內容

Use the splice() method to remove “Orange” and “Apple” from fruits.

1
2
3
4
var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
fruits.splice(1, 2);

console.log(fruits)  //  ["Banana", "Kiwi"]

sort()

使用 sort() 讓陣列內容開頭按照 abcd… 字母順序排列

Use the correct Array method to sort the fruits array alphabetically.

1
2
3
4
var fruits = ["Banana", "Orange", "Apple", "Kiwi"];
fruits.sort();

console.log(fruits) // ["Apple", "Banana", "Kiwi", "Orange"]

JS Dates

setFullYear()

使用setFullYear() 可以指定年分

Use the correct Date method to set the year of a date object to 2020.

1
2
3
4
var d = new Date();
d.setFullYear(2020);

console.log(d) // Mon May 04 2020 01:54:51 GMT+0800 (Taipei Standard Time)

JS Math

Math.round()

使用 Math.round() 可以取得最接近的正整數

Use the correct Math method to round a number to the nearest integer.

1
2
3
var x = Math.round(5.3);

console.log(x) //5

Math.sqrt()

使用 Math.sqrt() 可以取得開根號的結果

Use the correct Math method to get the square root of 9.

1
2
3
var x = Math.sqrt(9);

console.log(x)// 3

JS Switch

比較少用複習一下

如果 fruits 是 Bananas 則跳出 Hello 如果是 Apple 則跳出 Welcome

Create a switch statement that will alert “Hello” if fruits is “banana”, and “Welcome” if fruits is “apple”.

1
2
3
4
5
6
7
8
9
10
switch(fruits) {
  
    case"Banana":
        alert("Hello")
        break;

    case"Apple":
        alert("Welcome")
        break;    
}

default

如果都不是則返回 Neither

Add a section that will alert(“Neither”) if fruits is neither “banana” nor “apple”.

1
2
3
4
5
6
7
8
9
10
11
switch(fruits) {
  case "Banana":
    alert("Hello")
    break;
  case "Apple":
    alert("Welcome")
    break;
  
    default:
    alert("Neither");
}

JS For Loop

For…of

使用 For...of 印出陣列所有的內容

Create a loop that runs through each item in the fruits array.

1
2
3
4
5
6
7
var fruits = ["Apple", "Banana", "Orange"];
for (x of fruits) {
  console.log(x);
}
// Apple
// Banana
// Orange

JS While Loops

印出小於 10 的數字並且每次數字都會加二

Create a loop that runs as long as i is less than 10, but increase i with 2 each time.

1
2
3
4
5
6
7
var i = 0;
while (i < 10) {
  console.log(i);
  i = i + 2;
  }
  
  // 0 2 4 6 8 10

JS Break Loops

break

讓迴圈跑到 5 就停下 使用 break

Make the loop stop when i is 5.

1
2
3
4
5
6
7
for (i = 0; i < 10; i++) {
  console.log(i);
  if (i == 5) {
    break;
}
}
// 0 1 2 3 4 5

continue

使迴圈跳過條件內容且進入下一個迭代使用 continue

從下方的例子來理解就是跳過 5 繼續印出其他的數字

Make the loop jump to the next iteration when i is 5.

1
2
3
4
5
6
7
8
9
for (i = 0; i < 10; i++) {
  if (i == 5) {
    continue;
}
  console.log(i);
  
}

// 0 1 2 3 4 6 7 8 9

JS HTML DOM

getElementsByTagName()

取得 HTML 內的 tag 使用getElementsByTagName() 操作方式使用[index]選取想要操作的 tag

Use the getElementsByTagName method to find the first <p> element, and change its text to “Hello”.

1
2
3
4
5
<p id="demo"></p>

<script>
document.getElementsByTagName("p")[0].innerHTML= "Hello";
</script>

getElementsByClassName()

取得指定 class 的 HTML tag 使用 getElementsByClassName() 操作方式使用[index]選取想要操作的 tag

Change the text of the first element that has the class name “test”.

1
2
3
4
5
6
<p class="test"></p>
<p class="test"></p>

<script>
document.getElementsByClassName("test")[0].innerHTML = "Hello";
</script>

操作圖片的 src

操作圖片的 src

Use HTML DOM to change the value of the image’s src attribute.

1
2
3
4
5
<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src = "pic_mountain.jpg";
</script>

操作 input 的 value

操作 input 的 value

Use HTML DOM to change the value of the input field.

1
2
3
4
5
<input type="text" id="myText" value="Hello">

<script>
document.getElementById("myText").value = "Have a nice day!";
</script>

操作文字顏色改變

操作文字顏色改變

Change the text color of the <p> element to “red”.

1
2
3
4
5
<p id="demo"></p>

<script>
document.getElementById("demo").style.color = "red";
</script>

操作文字大小修改

操作文字大小修改

Change the font size of the p element to 40 pixels.

1
2
3
4
5
<p id="demo"></p>

<script>
document.getElementById("demo").style.fontSize = "40px";
</script>

操作CSS position

操作CSS position

Use the CSS display property to hide the p element.

1
2
3
4
5
<p id="demo"></p>

<script>
document.getElementById("demo").style.display = "none";
</script>

事件監聽

Use the eventListener to assign an onclick event to the <button> element.

1
2
3
4
5
<button id="demo">Click me1</button>

<script>
document.getElementById("demo").addEventListener("click", myFunction);
</script>