目標：2021年2月起，每周一篇文章翻譯，從跟程式相關的短文/新聞開始，過程中也會接觸到程式專有名詞，能試著自己詮釋加強概念。4月起主題，從SOLOLEARN平台做JavaScript篇章的翻譯。

■□■ Aug, Week 4 ■□■ Title: JavaScript Author、Platform: SOLOLEARN Source: https://www.sololearn.com/learning/1024

Form Validation

表單驗證

HTML5 adds some attributes that allow form validation. For example, the required attribute can be added to an input field to make it mandatory to fill in.
More complex form validation can be done using JavaScript.
The form element has an onsubmit event that can be handled to perform validation.
For example, let's create a form with two inputs and one button. The text in both fields should be the same and not blank to pass the validation.

HTML5增加了一些屬性做表單驗證，例如，"required"屬性可以被加到input區域，讓欄位強制(mandatory)填寫。
更複雜的表單驗證，可以使用JavaScript處理。
form元素有onsubmit事件，可以被用於處理表單驗證。
舉例，我們新增一個表單，有兩個輸入欄和一個按鈕，兩個區域的文字需要相同且不空白，才能通過驗證。 

<form onsubmit="return validate()" method="post">
Number: <input type="text" name="num1" id="num1" />
<br />
Repeat: <input type="text" name="num2" id="num2" />
<br />
<input type="submit" value="Submit" />
</form>

Now we need to define the validate() function:

現在我們需要定義validate()函式： 

function validate() {
var n1 = document.getElementById("num1");
var n2 = document.getElementById("num2");
if(n1.value != "" && n2.value != "") {
if(n1.value == n2.value) {
return true;
}
}
alert("The values should be equal and not blank");
return false;
}

We return true only when the values are not blank and are equal.

我們只有當二個數值不是空白，並且相等時回傳true。 

TIP:The form will not get submitted if its onsubmit event returns false.

提示：若onsubmit事件回傳false表單將不會被提交。

-----

Module 7 Quiz

單元7小考

Fill in the blanks to change the content of all paragraph tags of the page to "SoloLearn".

填入空格將網頁的段落p標籤的內容改為"SoloLearn"。 

var arr = document.getElementsByTagName("p") for(var x=0; x<arr.length; x++) { arr[x].innerHTML="SoloLearn"; }
解題筆記：這裡要會用document取出TagName標籤"p"的所有內容，放到arr陣列中，再透過for迴圈，將該陣列的內容逐一替換為"SoloLearn"。其中for迴圈的起始值變數使用x，所以在arr[]裡面，要加入x去指定innerHTML的值。

-----

What is the output of this code?

這個程式碼的輸出是什麼？ 

<div id="test">      <p>some text</p>  </div>    <script>      var el=document.getElementById("test");      alert(el.hasChildNodes());  </script>
解題筆記：HTML中定義了id是test的div標籤，裡面包含一個子節點p。在JS中取得test節點給el變數，並在警告視窗中使用.hasChildNodes()函式判斷el變數是否有子節點，所以答案是true(有子節點)。

-----

Drag and drop from the options below to change the color of the paragraph with id="p2" to red.

拖放以下的選項，將id是p2的段落文字顏色改為紅色。 

var d = document.getElementById("p2") d.style.color = "red"
解題筆記：這裡要會用.getElementById()的函式，取出id是p2的節點，注意Id的d是小寫，再用.style.color改變顏色屬性，注意取出屬性後用=等於賦值。

-----

Can you handle multiple events on the same HTML element?

你可以在相同的HTML元素上處理多個事件嗎？ 

解題筆記：YES! 一個元素可以加很多事件來操作。

-----

Fill in the blanks to alert a message when the button is clicked.

填寫以下空格，當按鈕被點即時，跳出訊息視窗。 

<button onclick="msg()">Click me</button>  <script>   function msg() {     alert("Hi!");   } </script>
解題筆記：在HTML的標籤中使用onclick屬性，讓元素被點擊時呼叫msg()函式，再到JS撰寫該函式內容。
翻譯小心得｜ 完成了DOM & Events這一章！整套JS課程也完成了85%，後面剩下最後一章ECMAScript 6，繼續在翻譯中學習！ Finally, the article above is from SOLOLEARN .  I translated it just for practice, personal use only. If that is inappropriate, please contact me.
 This free site is ad-supported. Learn more
​