From 97264170c8a10b13ba8ec797ac55bda770244aa5 Mon Sep 17 00:00:00 2001
From: Prasit Tongpradit <prasit_tongpradit@windowslive.com>
Date: Sat, 18 Mar 2023 17:54:35 +0700
Subject: [PATCH] Revise hello world

---
 1-js/02-first-steps/01-hello-world/article.md | 85 ++++++++++---------
 1 file changed, 44 insertions(+), 41 deletions(-)

diff --git a/1-js/02-first-steps/01-hello-world/article.md b/1-js/02-first-steps/01-hello-world/article.md
index d873511b9..02b48751f 100644
--- a/1-js/02-first-steps/01-hello-world/article.md
+++ b/1-js/02-first-steps/01-hello-world/article.md
@@ -1,14 +1,14 @@
-# Hello, world
+# สวัสดีโลก! (Hello, world!)
 
-ส่วนนี้เป็นบทสอนเกี่ยวกับหัวใจหลักของจาวาสคริปต์
+บทนำนี้เปิดตัวความน่าสนใจของ JavaScript ภาษาที่ถูกออกแบบมาเพื่อความสร้างสรรค์
 
-แต่เราต้องเตรียมสภาพแวดล้อม (environment) ที่เหมาะสมแก่การทำงานสคริปต์ของเรากันก่อน แต่ด้วยความที่คู่มือฉบับนี้อยู่บนเว็บไซต์อยู่แล้ว ผู้เรียนจึงไม่มีความจำเป็นต้องจัดเตรียมสภาพแวดล้อมใดๆเลย เช่น Node.js ผู้เรียนสามารถสั่งสคริปต์ทำงานผ่านเบราเซอร์โดยตรง ก่อนจะนอกเรื่องกันเราจะกลับมาพูดถึงจาวาสคริปต์ที่ทำงานบนเบราเซอร์อีกทีใน[บทถัดไป]((/ui))
+ทว่า เราต้องมีสภาพแวดล้อมที่สามารถทำงานร่วมกับสคริปต์ของเรา ด้วยเหตุที่หนังสือนี้เป็นหนังสือออนไลน์ การใช้เบราว์เซอร์เป็นทางเลือกที่น่าสนใจ เราจะใช้คำสั่งเฉพาะของเบราว์เซอร์ (เช่น alert) เพื่อไม่ให้คุณสับสนในการศึกษา หากคุณตั้งใจจะเน้นสภาพแวดล้อมอื่น ๆ (เช่น Node.js) [ในบทถัดไป](/ui)เราจะเน้นไปยัง JavaScript สำหรับใช้ในเบราว์เซอร์
 
-ก่อนอื่นเลย เรามาดูวิธีการแนบสคริปต์ไปบนเว็บเพจกันก่อน โดยที่สภาพแวดล้อมฝั่งเซิฟเวอร์ (อย่าง Node.js) เราสามารถสั่งสคริปต์ทำงานได้โดยการพิมพ์ว่า `"node my.js"` ในเทอร์มินัล
+ดังนั้น ในขั้นตอนแรก มาดูวิธีการแนบสคริปต์เข้ากับหน้าเว็บกัน สำหรับสภาพแวดล้อมที่ใช้งานบนเซิร์ฟเวอร์ (เช่น Node.js) คุณสามารถสั่งให้สคริปต์ทำงานด้วยคำสั่ง `"node my.js"`
 
-## ภายใต้แท็กสคริปต์
+## แท็ก "script"
 
-เราสามารถเขียนจาวาสคริปต์ไปบนส่วนใดก็ได้ในไฟล์ HTML โดยใช้แท็ก `<script>`
+โปรแกรม JavaScript สามารถนำไปแทรกในเอกสาร HTML ตรงไหนก็ได้โดยใช้แท็ก `<script>`
 
 ตัวอย่างเช่น:
 
@@ -34,51 +34,52 @@
 ```
 
 ```online
-เราสามารถสั่งสคริปต์นี้ทำงานได้โดยคลิกปุ่ม "play" ที่มุมขวาบน
+คุณสามารถทดสอบตัวอย่างโดยคลิกที่ปุ่ม "เล่น" ที่มุมบนขวาของกล่องด้านบน
 ```
 
-เมื่อถึงคิวที่เบราเซอร์ประมวลผลในแท็กนี้ สคริปต์เหล่านี้ก็จะทำงานอัตโนมัติ
+แท็ก `<script>` ประกอบด้วยรหัส JavaScript ที่จะถูกดำเนินการโดยอัตโนมัติเมื่อเบราว์เซอร์ประมวลผลแท็ก
 
-## ภาษามาร์กอัพสมัยปัจจุบัน
+## มาตราฐานภาษามาร์กอัพปัจจุบัน
 
-แท็ก `<script>` ในปัจจุบันหาพบได้ยากแล้ว โดยมากจะพบในโค้ดที่เขียนมานานมากแล้ว
+แท็ก `<script>` ประกอบด้วยแอตทริบิวต์บางอย่างที่นิยมน้อยลงในยุคปัจจุบัน แต่ยังสามารถพบในโค้ดเก่าๆ:
 
-attribute `type`: <code>&lt;script <u>type</u>=...&gt;</code>
-: มาตรฐาน HTML เก่าตั้งแต่เวอร์ชั่น 4 ลงมา จำเป็นต้องมีการระบุ `type` ภายในแท็ก `script` ด้วยเช่น `type="text/javascript"` แต่ไม่จำเป็นแล้วในปัจจุบัน ทั้งตามมาตรฐานปัจจุบันยังเปลี่ยนความหมาย attribute `type` ไปโดยสิ้นเชิง โดยใช้เพื่อระบุโมดูลจาวาสคริปต์แทน แต่เรื่องโมดูลเป็นเรื่อง advanced เราจะมาพูดถึงโมดูลนี้อีกทีในภายหลัง
+แอตทริบิวต์ `type`: <code>&lt;script <u>type</u>=...&gt;</code>
+: มาตรฐาน HTML ยุคก่อน, คือ HTML4, กำหนดให้สคริปต์ต้องระบุ `type` โดยปกติจะเป็น `type="text/javascript"` อยู่แล้ว ทว่าในปัจจุบันไม่จำเป็นต้องใช้แล้ว นอกจากนี้ มาตรฐาน HTML ใหม่ๆ ยังเปลี่ยนความหมายของแอตทริบิวต์นี้ไป ซึ่งจะเอาไปใช้กับโมดูล JavaScript แทนแต่เนื่องจากเป็นเรื่องซับซ้อน เราจะมาพูดถึงโมดูลในบทหน้าของคู่มือนี้
 
-attribute `language`: <code>&lt;script <u>language</u>=...&gt;</code>
-: คุณลักษณะดังกล่าวมีไว้เพื่อแสดงให้เบราเซอร์ดูว่าภาษาสคริปต์ที่เขียนคือภาษาอะไร แต่ในปัจจุบันไม่จำเป็นต้องระบุแล้ว เพราะจาวาสคริปต์เป็นภาษาเริ่มต้นเสมอ
+แอตทริบิวต์ `language`: <code>&lt;script <u>language</u>=...&gt;</code>
+: แอตทริบิวต์นี้เคยมีวัตถุประสงค์เพื่อระบุภาษาของสคริปต์ อย่างไรก็ตาม ในปัจจุบันไม่จำเป็นต้องใช้แอตทริบิวต์นี้แล้ว เนื่องจาก JavaScript ถือเป็นภาษาเริ่มต้นของเบราว์เซอร์ และเป็นภาษาที่ใช้ในส่วนใหญ่ของสคริปต์ที่เขียนในเว็บ
 
-คอมเม้นก่อนหรือหลังแท็กสคริปต์
-: ในหนังสือคู่มือที่เก่าแก่เราอาาจจะเจอการคอมเม้นแบบข้างล่าง
+คอมเม้นก่อนและหลังสคริปต์
+: ในหนังสือหรือคู่มือเก่าๆอาจพบคอมเม้นภายในแท็ก `<script>` ดังนี้:
 
-  ```html no-beautify
-  <script type="text/javascript"><!--
-      ...
-  //--></script>
-  ```
+```html no-beautify
+<script type="text/javascript"><!--
+    ...
+//--></script>
+```
+
+วิธีนี้ไม่ได้ใช้ใน JavaScript ปัจจุบันแล้ว คอมเม้นดังกล่าวปกปิดโค้ด JavaScript จากเบราว์เซอร์เก่าๆ ที่ไม่มีความสามารถในการประมวลผลแท็ก `<script>` แต่ในปัจจุบันเบราว์เซอร์ทั่วไปจะสามารถประมวลผลแท็ก `<script>` ได้ดีแล้ว ดังนั้นเราไม่จำเป็นต้องใช้คอมเม้นดังกล่าวแล้ว
 
-ในโมเดิร์นจาวาสคริปต์ (ตั้งแต่ ES6 ขึ้นไป) เราเลิกใช้การคอมเม้นแบบนี้ไปแล้ว แต่จะพบได้ในโค้ดเก่าๆ เพราะเบราเซอร์ในสมัยนั้นไม่ทราบวิธีการประมวลแท็ก `script` รวมถึงสิ่งที่อยู่ภายในแท็กนี้
 
-## สคริปต์ภายนอก
+## สคริปต์แบบภายนอก
 
-เราเขียนจาวาสคริปต์ออกมาเป็นไฟล์สกุล `.js` แยกออกมาจากไฟล์ `HTML`
+หากเรามีโค้ด JavaScript จำนวนมาก จะไม่สะดวกที่จะเขียนทั้งหมดลงใน HTML ดังนั้นเราสามารถเขียนโค้ด JavaScript ไว้ในไฟล์แยก แล้วเรียกใช้ใน HTML ได้
 
-เราสามารถแนบสคริปต์ไฟล์นั้นได้ด้วยคุณลักษณะประเภท `src`
+ไฟล์สคริปต์จะถูกแนบกับ HTML ด้วยแอตทริบิวต์ `src`:
 
 ```html
 <script src="/path/to/script.js"></script>
 ```
 
-สามารถใช้ absolute path แบบนี้ `/path/to/script.js` เพ่ือระบุเส้นทางของ `script.js` จาก root หรือ relative path `src="script.js"` หรือ `src="./script.js"` จะหมายถึง `"script.js"` ในโฟลเดอร์ปัจจุบัน
+ที่นี่ `/path/to/script.js` คือเส้นทางแบบเต็ม (absolute path) ของไฟล์สคริปต์ คุณสามารถระบุเส้นทางสัมพัทธ์จากหน้าปัจจุบัน ยกตัวอย่างเช่น `src="script.js"` หรือ `src="./script.js"` ซึ่งหมายถึงไฟล์ `"script.js"` อยู่ในโฟลเดอร์ปัจจุบันเดียวกัน
 
-หรือจะใช้เป็น URL ก็ได้ดังตัวอย่างด้านล่าง
+เราสามารถใช้ URL สำหรับ `src` ได้ด้วย ยกตัวอย่างเช่น:
 
 ```html
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
 ```
 
-แนบสคริปต์แบบหลายไฟล์ดังตัวอย่างด้านล่าง
+เพื่อแนบสคริปต์หลายๆ ตัว ให้ใช้แท็กหลายๆ ตัว:
 
 ```html
 <script src="/js/script1.js"></script>
@@ -87,19 +88,19 @@ attribute `language`: <code>&lt;script <u>language</u>=...&gt;</code>
 ```
 
 ```smart
-เรามักจะใส่สคริปต์ที่ทำงานง่ายๆลงในไฟล์ HTML ส่วนสคริปต์ที่ซับซ้อนกว่านั้น จะแยกเป็นอีกไฟล์หนึ่งตะหาก
+โดยปกติ สคริปต์ท่ีเอาไว้ทำงานง่ายๆ ถึงจะถูกนำไปใส่ใน HTML ส่วนสคริปต์ที่ทำงานซับซ้อนขึ้นมาจะอยู่ในไฟล์แยกออกไปต่างหาก
 
-ประโยชน์อย่างหนึ่งของการแยกไฟล์ก็คือ เบราเซอร์จะดาวน์โหลดและเก็บไฟล์นั้นเอาไว้ หรือที่เรียกว่า[แคช](https://en.wikipedia.org/wiki/Web_cache)
+ข้อดีของไฟล์แยกคือเบราว์เซอร์จะดาวน์โหลดมันและจัดเก็บใน[แคช](https://en.wikipedia.org/wiki/Web_cache)ของตัวเอง
 
-ในหน้าอื่นๆหากมีการอ้างถึงไฟล์ที่มีที่อยู่เดียวกัน เบราเซอร์จะเอาสคริปต์นั้นมาจากแคชแทน ดังนั้นไฟล์สคริปต์เหล่านี้จะดาวน์โหลดเพียงครั้งเดียว
+หน้าเว็บอื่นๆ ที่อ้างอิงสคริปต์เดียวกันจะเรียกใช้จากแคช แทนที่จะดาวน์โหลดใหม่ ดังนั้นไฟล์จริงๆแล้ว ถูกดาวน์โหลดเพียงครั้งเดียว
 
-มันช่วยลดระยะการเดินทางของข้อมูล ซึ่งทำให้หน้าเว็บโหลดเร็วยิ่งขึ้น
+การลดการใช้แบนด์วิดธ์และทำให้หน้าเว็บโหลดเร็วขึ้น
 ```
 
-มีสิ่งที่ต้องเตือนกันเล็กน้อย ถ้าในแท็ก `script` มีการระบุค่าไว้แล้วของ `src` ไว้แล้ว สคริปต์ที่อยู่ภายใต้แท็ก `script` จะไม่ทำงาน
-ฉะนั้นแท็ก `<script>` จึงไม่ควรมี `src` และสคริปต์อยู่ด้วยกัน
+````warn header="หากกำหนดค่า `src` เนื้อหาภายในแท็ก `<script>` จะถูกละเว้น"
+แท็ก `<script>` หนึ่งตัวสามารถมีค่า `src` หรือโค้ดภายใน แต่ไม่สามารถมีทั้งคู่ได้
 
-ดังตัวอย่างข้างล่าง
+โค้ดที่อยู่ภายในแท็ก `<script>` ด้านล่างจะไม่ทำงาน:
 
 ```html
 <script *!*src*/!*="file.js">
@@ -107,9 +108,9 @@ attribute `language`: <code>&lt;script <u>language</u>=...&gt;</code>
 </script>
 ```
 
-เราต้องตัดสินใจเองว่าจะเลือกแบบสคริปต์ภายนอก `<script src="…">` หรือแบบปกติ `<script>`
+เราต้องเลือกใช้หนึ่งในสองวิธีเท่านั้น แท็ก `<script src="…">` แบบภายนอกหรือแท็ก `<script>` แบบปกติที่มีโค้ดอยู่ภายใน
 
-ดังตัวอย่างข้างล่างที่ใช้แท็ก `script` สองตัว ตัวแรกเพื่อเรียกไฟล์จากภายนอก และอีกตัวเป็นแบบปกติ
+ตัวอย่างข้างต้นสามารถแบ่งเป็นสคริปต์สองส่วนเพื่อให้สามารถใช้งานได้:
 
 ```html
 <script src="file.js"></script>
@@ -117,11 +118,13 @@ attribute `language`: <code>&lt;script <u>language</u>=...&gt;</code>
   alert(1);
 </script>
 ```
+````
 
 ## สรุป
 
-- เราสามารถใช้แท็ก `<script>` เพื่อเขียนจาวาสคริปต์ลงไปในหน้าเว็บได้
-- คุณลักษณะประเภท `type` และ `language` ปัจจุบันเลิกใช้ไปแล้ว
-- สามารถแนบจาวาสคริปต์ที่เป็นไฟล์แยกได้ด้วย `<script src="path/to/script.js"></script>`
+- เราสามารถใช้แท็ก`<script>` เพื่อเพิ่มโค้ด JavaScript ลงในหน้าเว็บ
+- แอตทริบิวต์ `type` และ `language` ไม่จำเป็นต้องใช้แล้ว
+- สคริปต์ในไฟล์ภายนอกสามารถแทรกด้วย `<script src="path/to/script.js"></script>`.
+
 
-ยังมีเรื่องที่ต้องเรียนรู้อีกมากเกี่ยวกับจาวาสคริปต์มีปฎิสัมพันธ์ต่อหน้าเว็บอย่างไร แต่อย่าลืมว่าจาวาสคริปต์นั้นสามารถทำงานได้หลากหลาย ไม่ใช่เฉพาะบนเบราเซอร์อย่างเดียว แต่เราจะใช้เบราเซอร์ในทางที่ช่วยให้สคริปต์ทำงานได้สะดวกยิ่งขึ้น
+ยังมีอีกหลายสิ่งที่ควรเรียนรู้เกี่ยวกับสคริปต์ของเบราว์เซอร์และวิธีการโต้ตอบกับหน้าเว็บ แต่เราควรจำไว้ว่าส่วนนี้ของบทเรียนมุ่งเน้นไปที่ภาษา JavaScript โดยเฉพาะ ไม่ใช่เรื่องของเบราว์เซอร์ เราจะใช้เบราว์เซอร์เป็นวิธีในการรัน JavaScript ซึ่งเป็นวิธีที่สะดวกมากสำหรับการอ่านออนไลน์ แต่ก็เป็นเพียงวิธีหนึ่งในหลายๆ วิธีที่เราสามารถรัน JavaScript ได้