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 โดยใช้แท็ก ` - ``` +```html no-beautify + +``` + +วิธีนี้ไม่ได้ใช้ใน JavaScript ปัจจุบันแล้ว คอมเม้นดังกล่าวปกปิดโค้ด JavaScript จากเบราว์เซอร์เก่าๆ ที่ไม่มีความสามารถในการประมวลผลแท็ก ` ``` -สามารถใช้ 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 ``` -แนบสคริปต์แบบหลายไฟล์ดังตัวอย่างด้านล่าง +เพื่อแนบสคริปต์หลายๆ ตัว ให้ใช้แท็กหลายๆ ตัว: ```html @@ -87,19 +88,19 @@ attribute `language`: <script language=...> ``` ```smart -เรามักจะใส่สคริปต์ที่ทำงานง่ายๆลงในไฟล์ HTML ส่วนสคริปต์ที่ซับซ้อนกว่านั้น จะแยกเป็นอีกไฟล์หนึ่งตะหาก +โดยปกติ สคริปต์ท่ีเอาไว้ทำงานง่ายๆ ถึงจะถูกนำไปใส่ใน HTML ส่วนสคริปต์ที่ทำงานซับซ้อนขึ้นมาจะอยู่ในไฟล์แยกออกไปต่างหาก -ประโยชน์อย่างหนึ่งของการแยกไฟล์ก็คือ เบราเซอร์จะดาวน์โหลดและเก็บไฟล์นั้นเอาไว้ หรือที่เรียกว่า[แคช](https://en.wikipedia.org/wiki/Web_cache) +ข้อดีของไฟล์แยกคือเบราว์เซอร์จะดาวน์โหลดมันและจัดเก็บใน[แคช](https://en.wikipedia.org/wiki/Web_cache)ของตัวเอง -ในหน้าอื่นๆหากมีการอ้างถึงไฟล์ที่มีที่อยู่เดียวกัน เบราเซอร์จะเอาสคริปต์นั้นมาจากแคชแทน ดังนั้นไฟล์สคริปต์เหล่านี้จะดาวน์โหลดเพียงครั้งเดียว +หน้าเว็บอื่นๆ ที่อ้างอิงสคริปต์เดียวกันจะเรียกใช้จากแคช แทนที่จะดาวน์โหลดใหม่ ดังนั้นไฟล์จริงๆแล้ว ถูกดาวน์โหลดเพียงครั้งเดียว -มันช่วยลดระยะการเดินทางของข้อมูล ซึ่งทำให้หน้าเว็บโหลดเร็วยิ่งขึ้น +การลดการใช้แบนด์วิดธ์และทำให้หน้าเว็บโหลดเร็วขึ้น ``` -มีสิ่งที่ต้องเตือนกันเล็กน้อย ถ้าในแท็ก `script` มีการระบุค่าไว้แล้วของ `src` ไว้แล้ว สคริปต์ที่อยู่ภายใต้แท็ก `script` จะไม่ทำงาน -ฉะนั้นแท็ก ` ``` -เราต้องตัดสินใจเองว่าจะเลือกแบบสคริปต์ภายนอก ` @@ -117,11 +118,13 @@ attribute `language`: <script language=...> alert(1); ``` +```` ## สรุป -- เราสามารถใช้แท็ก `` +- เราสามารถใช้แท็ก``. + -ยังมีเรื่องที่ต้องเรียนรู้อีกมากเกี่ยวกับจาวาสคริปต์มีปฎิสัมพันธ์ต่อหน้าเว็บอย่างไร แต่อย่าลืมว่าจาวาสคริปต์นั้นสามารถทำงานได้หลากหลาย ไม่ใช่เฉพาะบนเบราเซอร์อย่างเดียว แต่เราจะใช้เบราเซอร์ในทางที่ช่วยให้สคริปต์ทำงานได้สะดวกยิ่งขึ้น +ยังมีอีกหลายสิ่งที่ควรเรียนรู้เกี่ยวกับสคริปต์ของเบราว์เซอร์และวิธีการโต้ตอบกับหน้าเว็บ แต่เราควรจำไว้ว่าส่วนนี้ของบทเรียนมุ่งเน้นไปที่ภาษา JavaScript โดยเฉพาะ ไม่ใช่เรื่องของเบราว์เซอร์ เราจะใช้เบราว์เซอร์เป็นวิธีในการรัน JavaScript ซึ่งเป็นวิธีที่สะดวกมากสำหรับการอ่านออนไลน์ แต่ก็เป็นเพียงวิธีหนึ่งในหลายๆ วิธีที่เราสามารถรัน JavaScript ได้