01204223/js for react - ประวัติรุ่นแก้ไข

Jittat: /* ตัวแปรและขอบเขต */

2026-01-09T02:03:14Z

ตัวแปรและขอบเขต

Jittat: /* ตัวแปรและขอบเขต */

2026-01-09T02:02:33Z

ตัวแปรและขอบเขต

Jittat: /* การจัดการกับข้อมูล */

2026-01-09T01:57:54Z

การจัดการกับข้อมูล

Jittat: /* การจัดการกับข้อมูล */

2026-01-09T01:47:26Z

การจัดการกับข้อมูล

Jittat: /* Asynchronous JavaScript */

2026-01-09T01:46:16Z

Asynchronous JavaScript

Jittat: /* ฟังก์ชัน */

2026-01-09T01:45:51Z

ฟังก์ชัน

Jittat: /* ฟังก์ชัน */

2026-01-09T01:22:11Z

ฟังก์ชัน

Jittat: /* ตัวแปรและขอบเขต */

2026-01-09T01:21:05Z

ตัวแปรและขอบเขต

Jittat เมื่อ 01:26, 7 มกราคม 2569

2026-01-07T01:26:19Z

Jittat เมื่อ 01:17, 7 มกราคม 2569

2026-01-07T01:17:47Z

@@ แถว 40: / แถว 40: @@
 </syntaxhighlight>
 เรามีวิธีการประกาศตัวแปรให้มีขอบเขตสองวิธีคือใช้ <tt>var</tt> และใช้ <tt>let</tt>
@@ แถว 76: / แถว 77: @@
 console.log(total);
 </syntaxhighlight>
 นอกจากนี้ เรายังสามารถกำหนดตัวแปรที่แก้ไขไม่ได้ด้วย <tt>const</tt> ซึ่งจะมี scope แบบ block (เหมือนกับ <tt>let</tt>

@@ แถว 75: / แถว 75: @@
 console.log(x);
 console.log(total);
 </syntaxhighlight>

@@ แถว 170: / แถว 170: @@
 == การจัดการกับข้อมูล ==
 === Destructuring ===
 === Spread ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:47, 9 มกราคม 2569
แถว 169:		แถว 169:

	== การจัดการกับข้อมูล ==		== การจัดการกับข้อมูล ==
		+	=== Destructuring ===
		+	=== Spread ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:46, 9 มกราคม 2569
แถว 169:		แถว 169:

	== การจัดการกับข้อมูล ==		== การจัดการกับข้อมูล ==
−
−	~~== Asynchronous JavaScript ==~~

@@ แถว 78: / แถว 78: @@
 == ฟังก์ชัน ==
 === การประกาศฟังก์ชัน และ anonymous function ===
 === Higher-order function: map และ filter ===
 === Arrow function ===
 == การจัดการกับข้อมูล ==
 == Asynchronous JavaScript ==

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:21, 9 มกราคม 2569
แถว 22:		แถว 22:

	== ตัวแปรและขอบเขต ==		== ตัวแปรและขอบเขต ==
		+
		+	ใน JavaScript ถ้าเราใช้ตัวแปรโดยไม่ประกาศอะไร ตัวแปรนั้นจะมีขอบเขตเป็น global ทำให้อาจจะให้เกิด side effect ที่เราคาดไม่ถึง
		+
		+	ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว
		+	<syntaxhighlight lang="javascript">
		+	x = 1;
		+	console.log(x);
		+	function test() {
		+	total = 0;
		+	for(x=0; x<10; x++) {
		+	total += x;
		+	}
		+	}
		+	test();
		+	console.log(x);
		+	console.log(total);
		+	</syntaxhighlight>
		+
		+	เรามีวิธีการประกาศตัวแปรให้มีขอบเขตสองวิธีคือใช้ <tt>var</tt> และใช้ <tt>let</tt>
		+
		+	* การประกาศด้วย <tt>var</tt> ตัวแปรจะมีขอบเขตภายในฟังก์ชันที่ประกาศ
		+	* การประกาศด้วย <tt>let</tt> ตัวแปรจะมีขอบเขตเล็กกว่า คือจะอยู่แค่ใน block เท่านั้น (อาจจะเล็กกว่า function ได้)
		+
		+	ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว
		+	<syntaxhighlight lang="javascript">
		+	var x = 1;
		+	console.log(x);
		+	function test() {
		+	var total = 0;
		+	for(var x=0; x<10; x++) {
		+	total += x;
		+	}
		+	console.log(x);
		+	}
		+	test();
		+	console.log(x);
		+	console.log(total);
		+	</syntaxhighlight>
		+
		+	ให้ทดลองโปรแกรมต่อไปนี้ แล้วลองดูผลลัพธ์ที่ได้ ให้พยายามอธิบายว่าทำไมได้ผลลัพธ์ดังกล่าว
		+	<syntaxhighlight lang="javascript">
		+	var x = 1;
		+	console.log(x);
		+	function test() {
		+	let total = 0;
		+	for(let x=0; x<10; x++) {
		+	total += x;
		+	}
		+	console.log(x);
		+	}
		+	test();
		+	console.log(x);
		+	console.log(total);
		+	</syntaxhighlight>

	== ฟังก์ชัน ==		== ฟังก์ชัน ==

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 01:26, 7 มกราคม 2569
แถว 2:		แถว 2:

	ในการจะเขียน React ได้นั้น เราจำเป็นต้องเข้าใจภาษา JavaScript ระดับหนึ่ง ด้านล่างจะเป็นการแนะนำคุณสมบัติต่าง ๆ พร้อมแบบฝึกหัด		ในการจะเขียน React ได้นั้น เราจำเป็นต้องเข้าใจภาษา JavaScript ระดับหนึ่ง ด้านล่างจะเป็นการแนะนำคุณสมบัติต่าง ๆ พร้อมแบบฝึกหัด
		+
		+	: ''สำหรับคนที่อยากจะรีบ review คร่าว ๆ สามารถอ่านสรุปที่ generated จาก Gemini ได้ที่ [[01204223/gemini js for react\|JS for React จาก Gemini]]

	เราจะทดลองโค้ด JavaScript ใน [https://developer.mozilla.org/en-US/play Mozilla JavaScript Playground] เราจะเขียน JavaScript อย่างเดียว อาจจะขยายช่อง JavaScript ให้ใหญ่ขึ้น ผลลัพธ์จะอยู่ช่อง Console (มุมขวาล่าง)		เราจะทดลองโค้ด JavaScript ใน [https://developer.mozilla.org/en-US/play Mozilla JavaScript Playground] เราจะเขียน JavaScript อย่างเดียว อาจจะขยายช่อง JavaScript ให้ใหญ่ขึ้น ผลลัพธ์จะอยู่ช่อง Console (มุมขวาล่าง)

@@ แถว 3: / แถว 3: @@
 ในการจะเขียน React ได้นั้น เราจำเป็นต้องเข้าใจภาษา JavaScript ระดับหนึ่ง ด้านล่างจะเป็นการแนะนำคุณสมบัติต่าง ๆ พร้อมแบบฝึกหัด
-เราจะทดลองโค้ด JavaScript ใน [https://jsfiddle.net/ JSFiddle] เราจะเขียน JavaScript อย่างเดียว อาจจะขยายช่อง JavaScript ให้ใหญ่ขึ้น  ผลลัพธ์จะอยู่ช่อง Console (มุมขวาล่าง) ให้กดให้ส่วนนั้นแสดงขึ้นมา
+เราจะทดลองโค้ด JavaScript ใน [https://developer.mozilla.org/en-US/play Mozilla JavaScript Playground] เราจะเขียน JavaScript อย่างเดียว อาจจะขยายช่อง JavaScript ให้ใหญ่ขึ้น  ผลลัพธ์จะอยู่ช่อง Console (มุมขวาล่าง)
-เมื่อเขียนโค้ดแล้ว ต้องการสั่งให้โค้ดทำงาน ให้กด Run หรือกด Ctrl-Enter หรือ Cmd-Enter
+เมื่อเขียนโค้ดแล้ว ตัว Playground จะรันให้อัตโนมัติเลย ให้ลองพิมพ์คำสั่งต่อไปนี้
   console.log("Hello");
@@ แถว 13: / แถว 11: @@
 ถ้าเห็นข้อความ สามารถเริ่มทดลองทำได้เลย
 '''หมายเหตุ''' แม้ว่าในการเขียน JavaScript เราสามารถทิ้งเครื่องหมาย ; ได้โดยแทบไม่มีผลอะไร เราจะพยายามเคร่งครัดกับการปิด statement ด้วย ;
 == ตัวแปรและขอบเขต ==
 == ฟังก์ชัน ==