Lv.3 jQuery Selectors

jQuery Selectors เป็นสิ่งที่สำคัญมากที่สุดใน jQuery ไลบรารี

jQuery Selectors

jQuery Selectors สามารถเลือก HTML element มาใช้งานได้ เราสามารถเลือกได้จาก ชื่ออิลิเมนต์, id, class, type, attributes, ค่าของแอตทริบิวต์ และอื่นๆ โดยค่า Selectors ต่างๆ ก็ใช้เหมือนกันกับ CSS seletors ได้เลย

การเลือกอิลิเมนต์ต่างๆ สามารถทำได้โดย $().

เลือกอิลิเมนต์จากชื่อ

โครตเบสิกเลย คือการเลือกอิลิเมนต์จากชื่อ

$("p")

จากบรรทัดบนคือการเลือกแท็ก p ทั้งหมดเลย

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("p").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนแท็ก p ทั้งหมด

เลือกอิลิเมนต์จาก #id

เป็นการเลือกอิลิเมนต์จาก id ของ HTML element ชื่อ id ไม่สามารถมีชื่อซ้ำได้

$("#test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$("#test").hide();
});

จากตัวอย่างเมื่อกดที่ปุ่ม จะทำการซ่อนอิลิเมนต์ที่มี id ชื่อว่า test เพียง id เดียวเท่านั้น

เลือกอิลิเมนต์จาก .class

ชื่อคลาสเหมือนกัน แต่คนละอิลิเมนต์ ทำให้เลือกเพียงชื่อคลาสก็สามารถใช้งาน 2 อิลิเมนต์ได้

$(".test")

ตัวอย่างการใช้งาน

$("button").click(function(){
	$(".test").hide();
});

จากตัวอย่างจะทำการซ่อนคลาสที่มีชื่อว่า test ทั้งหมด แท็กไหนมีคลาสเป็น test โดนซ่อนหมด

เลือกไฟล์ jQuery จากภายนอก

หากเว็บไซต์ของเรามีหน้าจำนวนมากๆ และเราต้องการให้ Function ของ jQuery ดูแลรักษาง่าย เราสามารถแยกไฟล์ jQuery ได้

ตัวอย่าง

<body>

	<script src="asset/js/jquery-v3.6.0.min.js"></script>
	<script src="asset/js/main_jquery_functions.js"></script>

</body>

Lv.2 jQuery Syntax

jQuery Syntax เราสามารถเลือก HTML element ได้แบบง่ายๆ พร้อมกับกำหนดการดำเนินการได้เลย

jQuery Syntax

Syntax

$(selector).action()

  • เครื่องหมาย $ เพื่อกำหนด/เข้าถึง jQuery
  • (selector) เพื่อค้นหา HTML elemets
  • การดำเนินการ jQuery() ที่จะกระทำการให้กับอิลิเมนต์ที่เราได้เลือกมา
$(document).ready(function(){

  // เขียน jQuery ตรงนี้

});

ตัวอย่าง

$(this).hide() – ซ่อนอิลิเมนต์นั้นๆ

$(“p”).hide() – ซ่อนแท็ก(อิลิเมนต์) p ทั้งหมด

$(“.test”).hide() – ซ่อนอิลิเมนต์ที่มี class ชื่อ test

$(“#test”).hide() – ซ่อนอิลิเมนต์ที่มี id ชื่อ test

การใช้งาน Ready Function ใน jQuery

ในการใช้ jQuery เพื่อเลือกอิลิเมนต์(HTML element) ใดๆ บนเว็บเพจ สิ่งสำคัญคือเราต้องแน่ใจเสียก่อนว่าอิลิเมนต์ที่เราต้องการเหล่านั้น ถูกโหลดมาครบทุกอิลิเมนต์หรือยัง

  • พยายามซ่อนอิลิเมนต์ ที่ยังไม่ได้สร้างหรือยังไม่มีตัวตน (โหลดยังไม่เสร็จ จะเอาอะไรไปทำอะไรล่ะ)
  • พยายามจะปรับขนาดของรูปภาพที่ยังโหลดไม่เสร็จ

Tip

เขียนแบบนี้สั้นกว่า

$(function(){

  // เขียน jQuery ตรงนี้

});

Lv.1 MySQL เริ่มต้น MySQL

MySQL เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์ (RDBMS) ที่ใช้กันอย่างแพร่หลายบนโลก
MySQL เป็นโอเพ่นซอร์สฟรี
MySQL เหมาะอย่างยิ่งสำหรับการใช้งานทั้งขนาดเล็กและขนาดใหญ่

MySQL คืออะไร

  • MySQL เป็นระบบจัดการฐานข้อมูลเชิงสัมพันธ์
  • MySQL เป็นโอเพ่นซอร์ส
  • MySQL ฟรี
  • MySQL เหมาะอย่างยิ่งสำหรับการใช้งานทั้งขนาดเล็กและขนาดใหญ่
  • MySQL นั้นเร็วมาก เชื่อถือได้ ปรับขนาดได้ และใช้งานง่าย
  • MySQL ใช้ข้ามแพลตฟอร์มได้
  • MySQL เป็นไปตามมาตรฐาน ANSI SQL
  • MySQL เปิดตัวครั้งแรกในปี 1995
  • MySQL ได้รับการพัฒนา แจกจ่าย และสนับสนุนโดย Oracle Corporation
  • MySQL ได้รับการตั้งชื่อตามลูกสาวของผู้ร่วมก่อตั้ง Monty Widenius: My

มีใครใช้ MySQL บ้าง

  • เว็บไซต์ขนาดใหญ่เช่น Facebook, Twitter, Airbnb, Booking.com, Uber, GitHub, YouTube เป็นต้น
  • ระบบจัดการเนื้อหา(CMS)เช่น WordPress, Drupal, Joomla!, Contao เป็นต้น
  • นักพัฒนาเว็บจำนวนมากทั่วโลกเลือกใช้ MySQL

การแสดงข้อมูลบนเว็บไซต์

ในการสร้างเว็บไซต์ที่แสดงข้อมูลจากฐานข้อมูล เราจะต้องมี

  • โปรแกรมฐานข้อมูล RDBMS (เช่น MySQL)
  • ภาษาสคริปต์ฝั่งเซิร์ฟเวอร์ เช่น PHP
  • ใช้ SQL เพื่อดึงข้อมูลที่เราต้องการ
  • ใช้ HTML และ CSS เพื่อจัดรูปแบบของเว็บไซต์

Lv.1 PHP เรียน PHP กันเถอะ

PHP เป็นภาษาสคริปต์ของเซิร์ฟเวอร์ และเป็นเครื่องมือที่มีประสิทธิภาพสำหรับการสร้างหน้าเว็บแบบไดนามิกและโต้ตอบกับผู้ใช้งานได้ ที่สำคัญมันฟรี และคนใช้เยอะ

ก่อนที่จะเริ่มต้นเรียนภาษา PHP ต้องมีความรู้และความเข้าใจ 3 ภาษานี้ ในระดับหนึ่งก่อนนะครับ ไม่งั้นงงแน่นอนครับ

PHP คืออะไร

  • PHP เป็นตัวย่อของ “PHP: Hypertext Preprocessor”
  • PHP เป็นภาษาสคริปต์โอเพ่นซอร์สที่ใช้กันอย่างแพร่หลายมากๆ
  • สคริปต์ PHP ทำงานบนเซิร์ฟเวอร์
  • ดาวน์โหลดและใช้งาน PHP ได้ฟรี

ไฟล์ PHP คืออะไร

  • ไฟล์ PHP สามารถมีข้อความ HTML CSS JavaScript และโค้ดของ PHP เอง
  • โค้ด PHP ถูกรันบนเซิร์ฟเวอร์และผลลัพธ์จะถูกส่งกลับไปยังเว็บเบราว์เซอร์ที่เป็น HTML ธรรมดา
  • ไฟล์ PHP มีนามสกุลเป็น “.php”

PHP สามารถทำอะไรได้บ้าง

  • PHP สามารถสร้างเนื้อหาแบบไดนามิกได้
  • PHP สามารถสร้าง เปิด อ่าน เขียน ลบ และปิดไฟล์บนเซิร์ฟเวอร์ได้
  • PHP สามารถรวบรวมข้อมูลของแบบฟอร์มได้
  • PHP สามารถส่งและรับคุกกี้ได้
  • PHP สามารถเพิ่ม ลบ แก้ไขข้อมูลในฐานข้อมูลของเราได้
  • สามารถใช้ PHP เพื่อควบคุมการเข้าถึงของผู้ใช้งานได้
  • PHP สามารถเข้ารหัสข้อมูลได้

ทำไมต้องเป็น PHP ด้วย

  • PHP ทำงานบนแพลตฟอร์มต่างๆ Windows, Linux, Unix, Mac OS X เป็นต้น
  • PHP เข้ากันได้กับเซิร์ฟเวอร์เกือบทั้งหมดที่ใช้ในปัจจุบัน Apache, IIS เป็นต้น
  • PHP รองรับฐานข้อมูลที่หลากหลาย
  • PHP เป็นบริการฟรี สามารถดาวน์โหลดข้อมูล PHP ได้ที่ www.php.net
  • PHP นั้นง่ายต่อการเรียนรู้และทำงานอย่างมีประสิทธิภาพบนฝั่งเซิร์ฟเวอร์

Lv.1 jQuery เริ่มต้น jQuery

jQuery จุดประสงค์ของ jQuery คือการทำให้เราสามารถใช้งาน JavaScript ได้ง่ายขึ้นนั่นเอง

เริ่มต้น jQuery ต้องรู้อะไรบ้าง

ก่อนที่เราจะสามารถเรียน jQuery ได้นั้น เราต้องมีความรู้และเข้าใจ 3 ภาษานี้ในระดับหนึ่งก่อน ไม่งั้นงงแน่นอนครับ

jQuery คืออะไร

jQuery เป็นไลบรารีของ JavaScript ทำให้เราสามารถใช้งาน JavaScript บนเว็บไซต์ได้ง่ายกว่าเดิม ลดความซับซ้อนในการเขียนโค้ดยาวๆ

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

ไลบรารี jQuery มีคุณสมบัติดังต่อไปนี้

  • จัดการ HTML/DOM
  • จัดการ CSS
  • เหตุการณ์ HTML
  • เอฟเฟกต์และแอนิเมชั่น
  • AJAX
  • Utilities

ทำไมต้อง jQuery

มีไลบรารี JavaScript อื่นๆมากมาย แต่ jQuery เป็นที่นิยมมากที่สุดและมีความยืดหยุ่นมากที่สุด
บริษัทใหญ่ๆหลายแห่งใช้ jQuery เช่น Google, Microsoft, IBM และ Netflix

เริ่มต้นใช้ jQuery

ก่อนที่เราจะสามารถใช้งาน jQuery ได้นั้น เราต้องไปดาวน์โหลดไฟล์ jQuery มาติดตั้งไว้ในเว็บไซต์ของเราเสียก่อน โดยสามารถเข้าไปดาวน์โหลดได้ที่เว็บของ jQuery เลย

การเรียกใช้งาน jQuery

เพื่อความสะดวกในการใช้งาน ให้คัดลอกไฟล์ jQuery ไปไว้ในโฟลเดอร์เดียวกันของเว็บไซต์

ส่วนการเรียกใช้งานให้เราเรียกใช้ผ่าน HTML <script> แท็ก

<head>
	<script src="jQuery-v3.6.0.min.js"></script>
</head>

หรือจะเรียกใช้ใน body แท็กก็ได้

<body>
	<script src="jQuery-v3.6.0.min.js"></script>
</body>

แค่นี้เราก็สามารถใช้งาน jQuery ได้แบบสบายๆแล้ว แถบฟรีอีกต่างหาก สุดยอด

Lv.11 JavaScript Operators

JavaScript Operators ตัวดำเนินการคือกลุ่มของเครื่องหมายหรือสัญลักษณ์ที่ใช้ทำงานเปรียบเทียบค่าหรือคำนวนค่า ในภาษา JavaScript นั้นสนับสนุนตัวดำเนินการประเภทต่างๆ สำหรับการเขียนโปรแกรม เช่น ตัวดำเนินการ + เป็นตัวดำเนินการทางคณิตศาสตร์ที่ใช้สำหรับการบวกตัวเลขเข้าด้วยกัน หรือตัวดำเนินการ > เป็นตัวดำเนินการเพื่อให้เปรียบเทียบค่าสองค่า เป็นต้น

let x = 2;         // กำหนดค่า 2 ให้ x
let y = 3;         // กำหนดค่า 3 ให้ y
let z = x + y;     // กำหนดค่า 5 ให้ z (5 + 2)

การกำหนดค่าให้ใช้เครื่องหมาย = (= Assignment Operators)

let x = 1;

JavaScript Arithmetic Operators

ตัวดำเนินการเลขคณิตใช้เพื่อคำนวณเลขต่างๆ

Operatorคำอธิบาย
+บวก
ลบ
*คูณ
/หาร
%หารเอาเศษ
++เพิ่มค่าขึ้น
ลบค่าลง
JavaScript Arithmetic Operators

ตัวอย่าง

let x = 5;
let y = 3;
let z = x + y;

// Result z = 8

JavaScript Assignment Operators

ตัวดำเนินการมอบหมายการกำหนดค่าให้กับตัวแปร

Operatorตัวอย่างเหมือนกับ
=x = y x = y
+=x += yx = x + y
-=x -= yx = x – y
*=x *= yx = x * y
/=x /= yx = x / y
%=x %= yx = x % y
**=x **= yx = x ** y
JavaScript Assignment Operators

ตัวอย่าง

var x = 7;
x += 3;

// Result x = 10
// เพราะ x มีค่าเท่ากับ 7 และเราได้เพิ่มค่าใหม่อีกตัวคือ 3
// 3 ยังไม่มีชื่อตัวแปร แต่สามารถเอามาบวกได้
// 7 + 3 = 10
// x เลยมีค่าเท่ากับ 10

JavaScript String Operators

ตัวดำเนินการ + สามารถใช้เพื่อเพิ่ม (ต่อกัน) ของข้อความ(สตริง)ได้

let text1 = "Theethawat";
let text2 = "Chetjeerasioon";
let text3 = text1 + " " + text2;

// Result Theethawat Chetjeerasioon

ตัวดำเนินการกำหนด += สามารถใช้เพื่อเพิ่มสตริง (ต่อกัน) ได้

let text1 = "สบายดีไหม ";
text1 += "โครตชิวเลยว่ะ";

// Result สบายดีไหม โครตชิวเลยว่ะ

เมื่อใช้ข้อความ(สตริง) กับตัวดำเนินการ + จะเป็นการต่อข้อความเสมอ

JavaScript Comparison Operators

Operatorคำอธิบาย
==เท่ากับ
===ค่าเท่ากันและเท่าเทียมกัน
!=ไม่เท่ากับ
!==ค่าไม่เท่ากัน
>มากกว่า
<น้อยกว่า
>=มากกว่าหรือเท่ากับ
<=น้อยกว่าหรือเท่ากับ
?ternary operator
JavaScript Comparison Operators

JavaScript Bitwise Operators

เป็นตัวดำเนินการที่ทำงานในระดับบิต และใช้ตัวเลข 32 บิต

ค่าที่ถูกดำเนินการที่เป็นตัวเลขใดๆ ในการดำเนินการจะถูกแปลงเป็นตัวเลข 32 บิต ผลลัพธ์จะถูกแปลงกลับเป็นหมายเลข JavaScript
Bitwise

Operatorคำอธิบายตัวอย่าง
&AND5 & 1
|OR5 | 1
~NOT ~ 5
^
XOR

5 ^ 1
<<Zero fill left shift5 << 1
>>Signed right shift
5 >> 1
>>>Zero fill right shift
5 >>> 1
JavaScript Bitwise Operators

Lv.10 JavaScript Data Types

JavaScript Data Types ตัวแปรใน JavaScript สามารถเก็บประเภทข้อมูลที่แตกต่างกันได้เช่น ตัวเลข สตริง ออบเจ็กต์ อาร์เรย์และอื่นๆ

let num = 16;                               // Number
let lastName = "Chetjeerasioon";                      // String
let x = {firstName:"Theethawat", lastName:"Chetjeerasioon"};    // Object

ในการเขียนโปรแกรม ชนิดข้อมูลเป็นสิ่งที่สำคัญมาก เพื่อให้สามารถทำงานกับตัวแปรได้ สิ่งสำคัญคือต้องรู้ว่าตัวแปรนั้นๆ เก็บค่าข้อมูลอะไรอยู่

JavaScript Data Types เป็นแบบไดนามิก

คือสามารถเปลี่ยนค่าชนิดของข้อมูลหลังจากที่เราได้ประกาศตัวแปรไปแล้ว

let x;           // x ไม่ได้กำหนดค่า
x = 5;           // x มีค่าเป็น 5 ข้อมูลชนิดตัวเลข
x = "nkaub";     // x มีค่าเป็น nkaub ข้อมูลชนิดสตริง

JavaScript สตริง

สตริง (หรือสตริงข้อความ) คือชุดอักขระ เช่น “Theethawat Chetjeerasioon”
สตริงถูกเขียนด้วยเครื่องหมายคำพูด เราสามารถใช้เครื่องหมายคำพูดเดี่ยว(Single quote)หรือคู่(Double quotes)ได้ ในการกำหนดค่าข้อมูลชนิดสตริง

let name = "nkaub";   // ใช้เครื่องหมายคำพูดเดี่ยว(Single quote)
let lastName = 'Chetjeerasioon';   // ใช้เครื่องหมายคำพูดคู่(Double quotes)

เราสามารถใช้เครื่องหมายคำพูดภายในสตริงได้

let name = "nkaub";            // Single quote ใน double quotes
let name2 = " ผมชื่อ 'nkaub'";   // Single quotes ใน double quotes
let answer3 = 'ผมชื่อ "nkaub"';  // Double quotes ใน single quotes

JavaScript ตัวเลข

ตัวเลขสามารถเป็นจุดทศนิยมหรือไม่ก็ได้

let x1 = 55.00;     // มีจุดทศนิยม
let x2 = 55;        // ไม่มีจุดทศนิยม

JavaScript ค่าจริง เท็จ

ค่าจริง หรือ ค่าเท็จ

let x = 55;
let y = 55;
let z = 66;
(x == y)       // Returns true
(x == z)       // Returns false

JavaScript Arrays

JavaScript อาร์เรย์ เขียนด้วย […]
ค่าในอาร์เรย์ถูกคั่นด้วยเครื่องหมายจุลภาค(,)

const cars = ["Toyota", "Isuzu", "Ford"];

JavaScript Objects

JavaScript Objects เขียนด้วยวงเล็บปีกกา {}

คุณสมบัติในอ็อบเจ็กต์เขียนเป็นคู่ name:value คั่นด้วยเครื่องหมายจุลภาค(,)

const person = {firstName:"Theethawat", lastName:"Chetjeerasioon", age:30, eyeColor:"red"};

The typeof Operator

ใช้ typeof ตรวจสอบชนิดของตัวแปร

typeof ""           // Returns "string"
typeof "nkaub"      // Returns "string"
typeof "Alsoon"     // Returns "string"

typeof 0            // Returns "number"
typeof 123          // Returns "number"
typeof 1.23         // Returns "number"
typeof (3)          // Returns "number"
typeof (1 + 2)      // Returns "number"

Undefined

ในจาวาสคริปตัวแปรที่ไม่มีค่า จะมีค่าเป็นไม่ได้กำหนด และประเภทก็ยังไม่ได้ถูกกำหนดด้วยเช่นกัน

car = undefined;    // ค่า คือ  undefined, type คือ undefined

Empty Values

ค่าว่างไม่มีส่วนเกี่ยวข้องกับค่าที่ไม่ได้กำหนดนะ

let name= "";    // ค่า คือ "ว่าง", typeof เป็น "string"

Lv.9 JavaScript Const

JavaScript Const เป็นการกำหนดค่าคงที่

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const ไม่สามารถประกาศซ้ำได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const ต้องประกาศก่อนใช้งานเสมอ

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด const เป็น Block Scope

JavaScript Const การใช้งาน

การใช้งานคีย์เวิร์ด const ต้องประกาศตัวแปรพร้อมกับกำหนดค่าให้เสมอ

const vat = 7;
vat = 3;      // Error
vat = vat + 5;   // Error

ตามกฎทั่วไปควรประกาศตัวแปรด้วย const เสมอ เว้นเสียแต่เราจะรู้ว่าค่าของ const จะเปลี่ยนไป หลังจากที่เราได้ประกาศตัวแปรไปแล้ว

ควรใช้ const เพื่อ

สร้าง Array ใหม่

สร้าง Object ใหม่

สร้าง Function ใหม่

สร้าง RegExp ใหม่

ค่าคงที่ของ Objects และ Arrays

คีย์เวิร์ด const ไม่ได้กำหนดค่าคงที่ แต่เป็นการกำหนดการอ้างอิงค่าคงที่

ด้วยเหตุนี้เราจึงไม่สามารถ

กำหนด Array คงที่ใหม่

กำหนด Objects คงที่ใหม่

แต่เราสามารถ

เปลี่ยนค่าคงที่ใน Array ได้

เปลี่ยนคุณสมบัติคงที่ของ Objects ได้

ค่าคงที่ใน Array

เราสามารถเปลี่ยนค่าอิลิเมนต์คงที่ใน Array ได้

// สร้าง Array คงที่
const cars = ["Toyota", "Isuzu", "NAVARA"];

// เปลี่ยนค่าอิลิเมนต์ใน Array
cars[0] = "Ford";

// เพิ่มอิลิเมนต์
cars.push("Chevrolet");

แต่เราไม่สามารถกำหนด Array ใหม่ ได้

// สร้าง Array คงที่
const cars = ["Toyota", "Isuzu", "NAVARA"];

// เพิ่มค่าของอิลิเมนต์
cars = ["Chevrolet", "Ford", "Honda"];    // ERROR

ค่าคงที่ใน Objects

เราสามารถเปลี่ยนค่าคงที่ใน Objects

// สร้าง Objects คงที่
const car = {type:"Hilux Vigo", model:"Champ", color:"white"};

// เปลี่ยนคุณสมบัติ
car.color = "black";

// เพิ่มคุณสมบัติ
car.owner = "Theethawat";

แต่เราไม่สามารถกำหนด Objects ใหม่ ได้

// สร้าง Objects คงที่
const car = {type:"Hilux Vigo", model:"Champ", color:"white"};

car = {type:"Isuzu", model:"D-Max", color:"red"};    // ERROR

Block Scope

การประกาศตัวแปรด้วยคีย์เวิร์ด const ถ้าพูดถึง Block Scope นั้นใช้เหมือนคีย์เวิร์ด let เลยครับ

const x = 55;
// x เท่ากับ 55

{
const x = 77;
// x เท่ากับ 77
}

// ถ้าเรียกใช้ x ตรงนี้ x จะมีค่าเท่ากับ 55

การประกาศซ้ำ

ใช้ var ประกาศตัวแปรกี่ครั้งที่ไหนก็ได้

var x = 1;     // ทำได้
var x = 2;     // ทำได้
x = 3;         // ทำได้

ไม่สามารถประกาศชื่อซ้ำ โดยใช้คีย์เวิร์ด let, const ใหม่

var x = 2;     // ทำได้
const x = 2;   // ทำไม่ได้

{
let x = 2;     // ทำได้
const x = 2;   // ทำไม่ได้
}

{
const x = 2;   // ทำได้
const x = 2;   // ทำไม่ได้
}

ไม่สามารถกำหนดตัวแปร const ใหม่ในขอบเขตเดียวกัน

const x = 2;     // ทำได้
x = 2;           // ทำไม่ได้
var x = 2;       // ทำไม่ได้
let x = 2;       // ทำไม่ได้
const x = 2;     // ทำไม่ได้

{
const x = 2;   // ทำได้
x = 2;         // ทำไม่ได้
var x = 2;     // ทำไม่ได้
let x = 2;     // ทำไม่ได้
const x = 2;   // ทำไม่ได้
}

สามารถประกาศตัวแปรใหม่ด้วย const ในขอบเขตอื่นหรือในบล็อกอื่นได้

const x = 2;       // ทำได้

{
  const x = 3;   // ทำได้
}

{
  const x = 4;   // ทำได้
}

Lv.8 JavaScript Let

JavaScript Let ตัวแปรที่กำหนดด้วยคีย์เวิร์ด let ไม่สามารถประกาศชื่อซ้ำได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let ไม่สามารถประกาศชื่อซ้ำในบล็อกนั้นๆได้

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let ต้องประกาศก่อนใช้งานเสมอ

ตัวแปรที่ประกาศด้วยคีย์เวิร์ด let เป็น Block Scope

let x = "Theethawat Chetjeerasioon";

let x = 0;

// Syntax Error นะ  เพราะตัวแปร x ได้ถูกประกาศไปแล้ว

แต่ถ้าต้องการกำหนดค่าให้กับตัวแปรเดิมให้ใช้คีย์เวิร์ด var ในการประกาศตัวแปร

var x = "Theethawat Chetjeerasioon";

var x = 0;

JavaScript Let ใน Block Scope

ตั้งแต่ ES6 (2015) JavaScript มีเพียง Global Scope และ Function Scope

คีย์เวิร์ด let และ const ไม่สามารถใช้นอกบล็อกได้

{
  let x = 55;
}
// x ไม่สามารถใช้นอกบล็อกได้ เพราะเราประกาศ x ด้วยคีย์เวิร์ด let

แต่ถ้าต้องการใช้ x นอกบล็อดด้วย ก็ให้ประกาศตัวแปร x ด้วยคีย์เวิร์ด var แทน

{
  var x = 55;
}

การประกาศตัวแปรใหม่

การประกาศตัวแปรใหม่โดยใช้คีย์เวิร์ด var อาจสร้างปัญหาให้กับเราได้ ต้องดูดีๆ ก่อนจะประกาศตัวแปรด้วยคีย์เวิร์ด var

var x = 55;
// x มีค่าเท่ากับ 55

{
var x = 77;
// x มีค่าเท่ากับ 77
}

// ถ้าเราเรียกใช้ตัวแปร x ตรงนี้ x จะมีค่าเท่ากับ 77 นะ เพราะเราได้กำหนดค่าใหม่ให้กับตัวแปร x แล้ว

เราสามารถแก้ปัญหานี้ด้วยการใช้คีย์เวิร์ด let

var x = 55;
// x มีค่าเท่ากับ 55

{
let x = 77;
// x มีค่าเท่ากับ 77
}

// ถ้าเราเรียกใช้ตัวแปร x ตรงนี้ x จะมีค่าเท่ากับ 55

การประกาศซ้ำ

สามารถประกาศซ้ำที่ไหนก็ได้ด้วยคีย์เวิร์ด var

var x = 55;
// x เท่ากับ 55

var x = 77;
// x เท่ากับ 77

คีย์เวิร์ด let ไม่สามารถประกาศตัวแปรชื่อซ้ำในบล็อกเดียวกันได้

var x = 55;    // ทำได้
let x = 77;    // ทำไม่ได้

{
let x = 55;    // ทำได้
let x = 77;     // ทำไม่ได้
}

{
let x = 55;    // ทำได้
var x = 77;    // ทำไม่ได้
}

การประกาศตัวแปรใหม่ด้วยคีย์เวิร์ด let ในบล็อกอื่นๆ

let x = 55;    // ทำได้

{
let x = 77;    // ทำได้
}

{
let x = 99;    // ทำได้
}

Lv.7 JavaScript Variables

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

ตัวแปรมีไว้สำหรับเก็บข้อมูลและเก็บค่า(Value) แต่ก่อนเราจะใช้ตัวแปรได้นั้น เราต้องประกาศตัวแปรขึ้นมาก่อนเสมอ

Syntax

var name = value;

ตัวอย่าง

var name = "nkaub";
let lastName = "Chetjeerasioon";

const vat = 7;

ชนิดของตัวแปร(Datatypes)

ข้อมูลที่ตัวแปรสามารถเก็บได้มี Numbers, Strings, Booleans, Objects, Arrays และ Functions

JavaScript Variables กับการใช้ตัวแปรที่ยังไม่ได้กำหนดค่า

ในกรณีที่เราเรียกใช้ตัวแปรที่ยังไม่ได้กำหนดค่า โปรแกรมจะไม่ error นะ แต่จะขึ้น undefined แทน

ตัวอย่าง

<script>
	var name;
			
	document.getElementById("demo").innerHTML = name;
</script>

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

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

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

การประกาศตัวแปรหลายตัวพร้อมกัน

เราสามารถประกาศตัวแปรหลายๆตัวได้พร้อมกัน โดยคั่นด้วยเครื่องหมาย , (คอมม่า)

ตัวอย่าง

var name = "Theethawat", lastName = "Chetjeerasioon", age = 30;
// หรือคนละบรรทัด
var name = "Theethawat",
lastName = "Chetjeerasioon",
age = 30;

Top