Lv.5 JavaScript Syntax

JavaScript Syntax คือ กฏ

// การประกาษตัวแปร
var x;
let y;

// การกำหนดค่าตัวแปร
x = 5;
y = 6;
let z = x + y;

JavaScript Syntax ตัวแปร

ในภาษาการเขียนโปรแกรม ตัวแปรถูกใช้เพื่อเก็บค่าของข้อมูล

JavaScript ใช้ Keyword var, let และ const ในการประกาศตัวแปร

ใช้เครื่องหมาย = เพื่อกำหนดค่าให้กับตัวแปร

ตัวอย่าง

let a;
let b;

a = 6;
b = "สวัสดีชาวโลก";

กฏการตั้งชื่อในภาษา JavaScript

  • ให้เริ่มด้วยตัวอักษรหรือเครื่องหมาย _ (Underscore) หรือเครื่องหมาย $ (Dollar Sign)
  • ตัวถัดไปสามารถเป็นตัวเลขได้(สรุปคือตัวเลขห้ามใช้ขึ้นต้น)
  • ห้ามมีช่องว่างเด็ดขาด
  • เป็น Case-sensitive คือตัวพิมพ์เล็กกับพิมพ์ใหญ่ ถือว่าคนละชื่อ เช่น Name กับ name
  • ห้ามใช้คำสงวนมาตั้งชื่อ สามารถดูคำสงวนได้ ที่นี่

กฏการตั้งชื่อนี้ยังใช้ได้กับตัวแปร Functions และอื่นๆ

การตั้งชื่อที่เหมาะสม

ให้ขึ้นต้นด้วยตัวอักษรพิมพ์เล็กก่อนคำถัดไป ตัวอักษรตัวแรกสุดให้ใช้ตัวอักษรพิมพ์ใหญ่

ตัวอย่าง

var firstName;
let lastName;

Lv.4 JavaScript Stataments

JavaScript Stataments คือการอ่านโค้ดทีละบรรทัด โดยเริ่มจากบนลงล่างทีละคำสั่ง และจบ Statement ด้วย เครื่องหมาย ; (เซมิโคล่อน)

ตัวอย่าง

let a, b, c;    // Statement 1
a = 9;          // Statement 2
b = 7;          // Statement 3
c = x + y;      // Statement 4

JavaScript statements ประกอบด้วย Values, Operators, Expressions, Keywords, and Comments.

ตัวอย่าง

document.getElementById("demo").innerHTML = "สวัสดีชาวโลก";

JavaScript Stataments เว้นระยะห่างบ้าง

การเว้นระยะห่าง ทำให้การเขียนโค้ดดูดี อ่านง่าย สะดวก

ตัวอย่าง

// แบบนี้อ่านง่ายกว่า
let name = "nkaub";
let lastName= "Chetjeerasioon";

// แบบนี้อ่านยาก		
let a=1;
let b=2;
let c=a+b;

Lv.3 JavaScript Output

JavaScript Output การแสดงผลภาษาจาวาสคริปต์สามารถทำได้ดังนี้

  • เขียนในอิลิเมนต์ HTML โดยใช้ innerHTML
  • เขียนใน HTML Output โดยใช้ document.write()
  • เขียนใน Alert box โดยใช้ alert()
  • เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()

เขียนใน HTML โดยใช้ innerHTML

ในการเข้าถึงอิลิเมนต์ของ HTML นั้น JavaScript สามารถใช้เมธอด document.getElementById(id) ในการเข้าถึงอิลิเมนต์ของ HTML ได้เลย

หลังจากที่เราเข้าถึง id ของ HTML ได้แล้ว ทีนี้ก็ใช้ Property innerHTML แทรกเนื้อหาเข้าไปได้เลย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน HTML โดยใช้ innerHTML</h1>
		
		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = "สวัสดีชาวโลก";
		</script>

	</body>
</html>

เขียนใน HTML Output โดยใช้ document.write()

ดูตัวอย่างน่าจะเข้าใจง่ายกว่า

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน HTML Output โดยใช้ document.write()</h1>
		
		<script>
			document.write(777 * 999);
		</script>


	</body>
</html>

เขียนใน Alert box โดยใช้ window.alert()

ใช้ Alert box เพื่อแสดงข้อมูล

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนใน Alert box โดยใช้ window.alert()</h1>
		
		<script>
			alert(333 + 777);
		</script>


	</body>
</html>

เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()

การใช้ console.log จะไม่แสดงผลผ่านทางหน้าจอนะครับ ต้องเข้าไปดูในส่วนของ Developer tools เอาเอง

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript Output</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		
		<h1>เขียนในเว็บเบราว์เซอร์ Console โดยใช้ console.log()</h1>
		
		<script>
			console.log(777 - 123);
		</script>


	</body>
</html>
Console log
Console log

Lv.2 JavaScript การเรียกใช้งาน JavaScript

การเรียกใช้งาน JavaScript นั้น สามารถทำได้ 2 วิธี

  1. เขียนร่วมกับไฟล์ HTML เลย
  2. เขียนไฟล์ JavaScript แยกไว้ต่างหาก แล้วค่อยเรียกมาใช้ในหน้าที่ต้องการ

JavaScript เขียนร่วมกับ HTML

ให้เขียนโค้ด JavaScript ภายในแท็ก <script> และ </script> แล้วเอาไปแทรกลงในอิลิเมนต์ <head> และ <body> ได้เลย

ตัวอย่างการเขียนใน <head>

<head>
	<script>
		document.getElementById("p1").innerHTML = "ฟาร์ม JavaScript";
	</script>
</head>

ตัวอย่างการเขียนใน <body>

<body>
	<script>
		document.getElementById("p2").innerHTML = "ฟาร์ม JavaScript";
	</script>
</body>

JavaScript ไฟล์แยก

ใช้แอตทริบิวต์ src ในแท็ก <script> เพื่อดึงไฟล์ JavaScript มาใช้งาน การอ้างอิงตำแหน่งไฟล์

<body>

	<script src="myScript.js"></script>

</body>

Lv.1 JavaScript แนะนำภาษา JavaScript

JavaScript เป็นภาษาโปรแกรมที่ได้รับความนิยมมากที่สุดในโลก

JavaScript เป็นภาษาการเขียนโปรแกรมของเว็บ

JavaScript ง่ายต่อการเรียนรู้

JavaScript ทำไมต้องเรียน

JavaScript เป็นหนึ่งใน 3 ภาษาที่นักพัฒนาเว็บทุกคนต้องเรียนรู้

  1. HTML กำหนดเนื้อหาของหน้าเว็บ

2. CSS กำหนดเลย์เอาต์ของหน้าเว็บ

3. JavaScript กำหนดพฤติกรรมของหน้าเว็บ

JavaScript ทำอะไรได้บ้าง

ใช้ JavaScript สร้างเมนู, เปลี่ยนเนื้อหาของ HTML, เปลี่ยน Attribute ของ CSS, ตรวจแบบฟอร์ม, สร้างอนิเมชั่น, เพิ่มลูกเล่น, ซ่อนและแสดงม, สร้างเกมและอื่นๆอีกมากมาย

ตัวอย่าง

<!DOCTYPE html>
<html lang="th-TH">
	<head>
		<title>nkaub | JavaScript</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta charset="UTF-8">
		<meta name="description" content="ทำเว็บไซต์เอง HTML CSS JavaScript jQuery PHP MySql">
		<meta name="keywords" content="ทำเว็บไซต์เอง, HTML, CSS, JavaScript, jQuery, PHP, MySql">
		<meta name="author" content="Theethawat Chetjeerasioon">
		

	</head>
	<body>
		<h2>JavaScript</h2>

	<button type="button" onclick="document.getElementById('p1').innerHTML = Date()">คลิกดูเวลา</button>

	<p id="p1"></p>
	
	</body>
</html>
Top