JavaScript Ep.4 — Statements

พบกันอีกครั้งครับกับซีรีย์ JavaScript Ep.4 หลังจากห่างหายไปพักหนึ่งต้องขออภัยท่านที่ติดตามกันอย่างเหนียวแน่นทุกท่านครับ ท่านใดที่ยังไม่ได้อ่าน Ep.3 กลับไปอ่านก่อนได้เลยครับ ใน Ep.3 JavaScript Output และใน Ep นี้ ไม่รอช้า ไปดูจุดประสงค์ของ Ep นี้กันเลยครับ

จุดประสงค์(Objectives)

  1. รู้และเข้าใจความหมายของ JavaScript Statement
  2. รู้และเข้าใจ Statements ประกอบไปด้วยอะไรบ้าง
  3. รู้และเข้าใจ White Space และสามารถใช้ได้อย่างถูกต้องตามมาตรฐาน
  4. สามารถใช้ Line Break และขึ้นบรรทัดใหม่ ได้อย่างถูกต้องตามมาตรฐาน
  5. รู้และเข้าใจ Code Blocks
  6. รู้และอธิบาย คำสงวน (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

สร้างโฟลเดอร์ ep4 ขึ้นมาใหม่

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 ?

  1. เขียน JS โดยใช้ชื่อ id ว่า “demo” โดยมีตัวข้อความที่ถูกเก็บใน id นี้ โดยข้อความมีชื่อว่า “Hello Sonny”
  2. นำ id มาใส่ใน <p> tag ของ HTML เพื่อแสดงผลข้อความ Hello Sonny
Output

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 นั่นเอง

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 keywords.

เหล่านี้ก็คือคำสงวนบางส่วนของ 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

JavaScript Statements (w3chools)

Using the debugger statement

Full Stack Python Developers