JavaScript Ep.4 — Statements

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

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

JavaScript Programs

ตัวอย่าง

var x, y, z; // Statement 1
x = 2; // Statement 2
y = 5; // Statement 3
z = x + y; // Statement 4

จากบล็อกด้านบนจะเห็นว่าทุก ๆ บรรทัดของโค้ด JavaScript ล้วนเป็น Statements ทั้งสิ้น โดยลำดับจะไล่มาจากบนลงล่าง

x = 10; y = 15; z = x + y; // Multiple statements in one line

JavaScript Statements

  • Values
  • Operators
  • Expression
  • Keywords
  • Comments

ตัวอย่าง

document.getElementById("demo").innerHTML = "Hello Sonny";

Here we go !!

สร้างโฟลเดอร์ ep4 ขึ้นมาใหม่
<!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

var person = "Sonny STACKPYTHON";
var person="Sonny STACKPYTHON";

JavaScript Line Length and Line Breaks

document.getElementById("demo").innerHTML =
"Hello Sonny";

JavaScript Code Blocks

JavaScript Block Example

function myFunction() {
document.getElementById("greeting").innerHTML = "Hi, Sonny";
document.getElementById("question").innerHTML = "How are you ?";
}

JavaScript Keywords (Reserved Words)

  • break → หยุดการทำงานของลูป
  • continue → ออกจากลูปปัจจุบันและไปเริ่มต้นใหม่ ต่างกันกับ break ตรงที่จะไม่หยุดการทำงานในลูปทั้งหมด
  • debugger → หยุดการทำงานของ JavaScript และทำการเรียกใช้งาน debugging function เช่น การกำหนด Breakpoint
  • do…while → ทำงานในบล็อคไปเรื่อย ๆ ตราบใดที่เงื่อนไขยังคงเป็นจริง
  • for → วนซ้ำ ตราบที่เงื่อนไขยังคงเป็นจริง
  • function → ประกาศฟังก์ชัน
  • if…else → กำหนดเงื่อนไข
  • return → ออกจากฟังก์ชัน
  • switch → กำหนดให้ statement ทำงาน โดยขึ้นอยู่กับเคสที่แตกต่างกันไป
  • try…catch → จัดการเกี่ยวกับ Error ใน statement
  • var → ประกาศตัวแปร
function potentiallyBuggyCode() {
debugger;
// do potentially buggy stuff to examine, step through, etc.
}

จบเรียบร้อยแล้วครับกับ Ep.4 หวังว่าทุกท่านคงเข้าใจ JavaScript Statements ไม่มากก็น้อย อย่าลืมหมั่นทบทวนความเข้าใจกันด้วยนะครับ

Reference

--

--

Full Stack Python Developers

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store