JavaScript Ep.4 — Statements
พบกันอีกครั้งครับกับซีรีย์ JavaScript Ep.4 หลังจากห่างหายไปพักหนึ่งต้องขออภัยท่านที่ติดตามกันอย่างเหนียวแน่นทุกท่านครับ ท่านใดที่ยังไม่ได้อ่าน Ep.3 กลับไปอ่านก่อนได้เลยครับ ใน Ep.3 JavaScript Output และใน Ep นี้ ไม่รอช้า ไปดูจุดประสงค์ของ Ep นี้กันเลยครับ
จุดประสงค์(Objectives)
- รู้และเข้าใจความหมายของ JavaScript Statement
- รู้และเข้าใจ Statements ประกอบไปด้วยอะไรบ้าง
- รู้และเข้าใจ White Space และสามารถใช้ได้อย่างถูกต้องตามมาตรฐาน
- สามารถใช้ Line Break และขึ้นบรรทัดใหม่ ได้อย่างถูกต้องตามมาตรฐาน
- รู้และเข้าใจ Code Blocks
- รู้และอธิบาย คำสงวน (Reserved Words) ในภาษา JavaScript ได้
JavaScript Programs
โปรแกรมคอมพิวเตอร์คือส่วนที่เป็นชุดของคำสั่ง เพื่อรอให้รันคำสั่งโดยคอมพิวเตอร์
ในทางภาษาโปรแกรมมิ่งนั้น คำสั่งโปรแกรมมิ่งเหล่านี้จะถูกเรียกว่า “statements”
และตัว JavaScript program ก็คือส่วนของ programming statements
ตัวอย่าง
var x, y, z; // Statement 1
x = 2; // Statement 2
y = 5; // Statement 3
z = x + y; // Statement 4จากบล็อกด้านบนจะเห็นว่าทุก ๆ บรรทัดของโค้ด JavaScript ล้วนเป็น Statements ทั้งสิ้น โดยลำดับจะไล่มาจากบนลงล่าง
นอกจากนี้ เรายังสามารถเขียน Statements ให้อยู่ในบรรทัดเดียวกันได้ โดยใช้ Semicolon ในการแยกแต่ละ Statement
x = 10; y = 15; z = x + y; // Multiple statements in one lineเราอาจจะเห็นการเขียนโค้ด JavaScript โดยที่ไม่ต้องใช้ Semicolon ปิดท้าย แต่ก็ยังสามารถทำงานได้ปกติไม่มีปัญหาใด ๆ แต่แนะนำให้ใช้ Semicolon ปิดท้ายครับ
JavaScript Statements
JavaScript statements นั้นประกอบไปด้วยส่วนต่าง ๆ ดังต่อไปนี้
- Values
- Operators
- Expression
- Keywords
- Comments
ตัวอย่าง
โดย Statement ในตัวอย่างด้านล่างนี้จะทำการบอกเว็บบราวเซอร์ว่า ให้เขียนคำว่า “Hello Sonny” ภายในตัว HTML element โดยใช้ตัว id ที่มีชื่อว่า “demo”
document.getElementById("demo").innerHTML = "Hello Sonny";Here we go !!
เริ่มต้นสร้างโฟลเดอร์ Ep.4 ขึ้นมาก่อนเลยพร้อมทั้งไฟล์ HTML ไฟแรกของ Ep นี้ ที่มีชื่อว่า javascript-statement-example.html
javascript-statement-example.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Statement</title>
</head>
<body>
<h1>JavaScript Statement Tutorial</h1>
<p>In HTML, JavaScript statements are executed by a web browser</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Sonny";
</script>
</body>
</html>How code works ?
- เขียน JS โดยใช้ชื่อ id ว่า “demo” โดยมีตัวข้อความที่ถูกเก็บใน id นี้ โดยข้อความมีชื่อว่า “Hello Sonny”
- นำ id มาใส่ใน <p> tag ของ HTML เพื่อแสดงผลข้อความ Hello Sonny
JavaScript White Space
JavaScript นั้นไม่สนใจว่าจะมีตัว spaces กี่ตัว เราสามารถที่จะเว้นระยะหรือกด space ได้มากตามที่เราต้องการ โดยจุดประสงค์ในการใช้ white space ก็เพื่อให้โค้ดที่เราเขียนนั้นอ่านได้ง่ายยิ่งขึ้นนั่นเอง
จากตัวอย่างด้านล่าง โค้ดทั้งสองบรรทัดนั้นได้ผลลัพธ์เหมือนกัน ไม่มีความแตกต่างใด ๆ
var person = "Sonny STACKPYTHON";
var person="Sonny STACKPYTHON";แต่ถ้าสังเกตให้ดี จะเห็นว่าโค้ดบรรทัดแรกนั้นอ่านง่ายกว่าบรรทัดที่สองอย่างชัดเจน
โดยการเขียนโค้ด JavaScript ที่ดีนั้น เราจะเคาะหรือกด space ระหว่างตัวดำเนินการ (Operators) เช่นตัว =, +, — , *, / เป็นต้น
JavaScript Line Length and Line Breaks
เพื่อให้โค้ดที่เขียนนั้นอ่านได้ง่าย JavaScript โปรแกรมเมอร์ส่วนใหญ่จะหลีกเลี่ยงการเขียนโค้ดที่มีความยาวเกินกว่า 80 ตัวอักษรภายในบรรทัดเดียวกัน
ถ้าโค้ด JavaScript ที่เขียนนั้นยาวเกินไป วิธีการที่ดีที่สุดในการเขียนแยกไปบรรทัดใหม่คือให้เขียนสิ้นสุดที่ตัวดำเนินการ เช่น
document.getElementById("demo").innerHTML =
"Hello Sonny";จากโค้ดด้านบนจะเห็นว่า สมมติว่าถ้าโค้ดนั้นดูแล้วรู้สึกว่ายาวเกินไปในบรรทัดเดียว จะทำให้อ่านยาก และวิธีการในการเขียนแยกโค้ดออกไปในบรรทัดใหม่ ก็คือให้เขียนสิ้นสุดที่ตัวดำเนินการเป็นอักษรตัวสุดท้าย
JavaScript Code Blocks
JavaScript statements สามารถถูกจัดกลุ่มรวมกันในบล็อค โดยใช้เครื่องหมายปีกกา (Curly Brackets) → { …. }
โดยวัตถุประสงค์ของตัวบล็อคก็คือใช้กำหนดให้ statements เหล่านี้ทำงานไปด้วยกัน
โดยตัวอย่างที่สังเกตเห็น statements ที่ถูกจัดกลุ่มเข้าด้วยกันได้แบบชัด ๆ เลยก็คือ ในฟังก์ชันของ JavaScript นั่นเอง
JavaScript Block Example
function myFunction() {
document.getElementById("greeting").innerHTML = "Hi, Sonny";
document.getElementById("question").innerHTML = "How are you ?";
}JavaScript Keywords (Reserved Words)
โดยปกติแล้ว JavaScript statements จะเริ่มต้นด้วยคีย์เวิร์ด เพื่อใช้ในการตรวจสอบ แอคชั่นของ JavaScript ที่จะถูกทำงาน
ดูรายละเอียดคำสงวน หรือ Keywords หรือ Reserved Words ฉบับเต็มได้ใน
เหล่านี้ก็คือคำสงวนบางส่วนของ JavaScript ที่ใช้สำหรับ
- break → หยุดการทำงานของลูป
- continue → ออกจากลูปปัจจุบันและไปเริ่มต้นใหม่ ต่างกันกับ break ตรงที่จะไม่หยุดการทำงานในลูปทั้งหมด
- debugger → หยุดการทำงานของ JavaScript และทำการเรียกใช้งาน debugging function เช่น การกำหนด Breakpoint
- do…while → ทำงานในบล็อคไปเรื่อย ๆ ตราบใดที่เงื่อนไขยังคงเป็นจริง
- for → วนซ้ำ ตราบที่เงื่อนไขยังคงเป็นจริง
- function → ประกาศฟังก์ชัน
- if…else → กำหนดเงื่อนไข
- return → ออกจากฟังก์ชัน
- switch → กำหนดให้ statement ทำงาน โดยขึ้นอยู่กับเคสที่แตกต่างกันไป
- try…catch → จัดการเกี่ยวกับ Error ใน statement
- var → ประกาศตัวแปร
ตัวอย่างการใช้งาน debugger statement
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}JavaScript keywords เป็นคำสงวน (Reserved Words) ดังนั้นคำสงวนจึงไม่สามารถนำมาใช้ในการประกาศตัวแปร
จบเรียบร้อยแล้วครับกับ Ep.4 หวังว่าทุกท่านคงเข้าใจ JavaScript Statements ไม่มากก็น้อย อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ
เมื่อจบ Ep.4 นี้ แสดงว่าคุณผ่าน JavaScript Level 2 เรียบร้อย กด Clap เพื่อซัพพอร์ตกันได้เลยนะครับ :)
ถ้ามีคำถามหรือข้อสงสัยหรือไม่เข้าใจตรงไหนก็คอมเมนต์ได้ที่ด้านล่างบทความกันได้เลยครับ หรือถ้าอยากติชมหรือมีอะไรเสนอแนะก็คอมเมนต์เข้ามาได้เช่นกันครับ
พบกับ Ep ถัดไป เพื่อเก็บ Level 2 (Ep.5) กันต่อได้เลยครับ
ท่านสามารถติดตามพวกเราได้ที่ stackpython ตามช่องทางด้านล่างนี้ได้เลยครับ
Instagram: stackpython
Facebook: stackpython
Website: stackpython.co (ปิดปรับปรุงชั่วคราว)
YouTube: stackpython
และตอนนี้เรายังมีคอร์สสอนสด Python Web Development with Django ในวันอาทิตยที่ 2 สิงหาคมนี้ ที่ออฟฟิศลุงวิศวกรสอนคำนวณ ยังมีว่างอยู่ 2 ที่สุดท้าย Inbox เข้ามาในเพจ stackpython ได้เลยครับ
Sonny STACKPYTHON
Reference
JavaScript Statements (w3chools)
Using the debugger statement
