@@ -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>`ตัวอย่างเช่น: Expand All @@ -34,51 +34,52 @@ ``` ```online เราสามารถสั่งสคริปต์นี้ทำงานได้โดยคลิกปุ่ม "play" ที่มุมขวาบน คุณสามารถทดสอบตัวอย่างโดยคลิกที่ปุ่ม "เล่น" ที่มุมบนขวาของกล่องด้านบน ``` เมื่อถึงคิวที่เบราเซอร์ประมวลผลในแท็กนี้ สคริปต์เหล่านี้ก็จะทำงานอัตโนมัติ แท็ก `<script>` ประกอบด้วยรหัส JavaScript ที่จะถูกดำเนินการโดยอัตโนมัติเมื่อเบราว์เซอร์ประมวลผลแท็ก ##ภาษามาร์กอัพสมัยปัจจุบัน ##มาตราฐานภาษามาร์กอัพปัจจุบัน แท็ก `<script>`ในปัจจุบันหาพบได้ยากแล้ว โดยมากจะพบในโค้ดที่เขียนมานานมากแล้ว แท็ก `<script>`ประกอบด้วยแอตทริบิวต์บางอย่างที่นิยมน้อยลงในยุคปัจจุบัน แต่ยังสามารถพบในโค้ดเก่าๆ: attribute `type`: <code><script <u>type</u>=...></code>: มาตรฐาน HTMLเก่าตั้งแต่เวอร์ชั่น 4 ลงมา จำเป็นต้องมีการระบุ `type`ภายในแท็ก `script` ด้วยเช่น ` type="text/javascript"`แต่ไม่จำเป็นแล้วในปัจจุบัน ทั้งตามมาตรฐานปัจจุบันยังเปลี่ยนความหมาย attribute `type` ไปโดยสิ้นเชิง โดยใช้เพื่อระบุโมดูลจาวาสคริปต์แทน แต่เรื่องโมดูลเป็นเรื่อง advanced เราจะมาพูดถึงโมดูลนี้อีกทีในภายหลัง แอตทริบิวต์ `type`: <code><script <u>type</u>=...></code>: มาตรฐาน HTMLยุคก่อน, คือ HTML4, กำหนดให้สคริปต์ต้องระบุ `type`โดยปกติจะเป็น ` type="text/javascript"`อยู่แล้ว ทว่าในปัจจุบันไม่จำเป็นต้องใช้แล้ว นอกจากนี้ มาตรฐาน HTML ใหม่ๆ ยังเปลี่ยนความหมายของแอตทริบิวต์นี้ไป ซึ่งจะเอาไปใช้กับโมดูล JavaScript แทนแต่เนื่องจากเป็นเรื่องซับซ้อน เราจะมาพูดถึงโมดูลในบทหน้าของคู่มือนี้ attribute `language`: <code><script <u>language</u>=...></code>:คุณลักษณะดังกล่าวมีไว้เพื่อแสดงให้เบราเซอร์ดูว่าภาษาสคริปต์ที่เขียนคือภาษาอะไร แต่ในปัจจุบันไม่จำเป็นต้องระบุแล้ว เพราะจาวาสคริปต์เป็นภาษาเริ่มต้นเสมอ แอตทริบิวต์ `language`: <code><script <u>language</u>=...></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> Expand All @@ -87,41 +88,43 @@ attribute `language`: <code><script <u>language</u>=...></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"> alert(1); // the content is ignored, because src is set </script> ``` เราต้องตัดสินใจเองว่าจะเลือกแบบสคริปต์ภายนอก `<script src="…">`หรือแบบปกติ `<script>`เราต้องเลือกใช้หนึ่งในสองวิธีเท่านั้น แท็ก `<script src="…">`แบบภายนอกหรือแท็ก `<script>` แบบปกติที่มีโค้ดอยู่ภายใน ดังตัวอย่างข้างล่างที่ใช้แท็ก `script` สองตัว ตัวแรกเพื่อเรียกไฟล์จากภายนอก และอีกตัวเป็นแบบปกติ ตัวอย่างข้างต้นสามารถแบ่งเป็นสคริปต์สองส่วนเพื่อให้สามารถใช้งานได้: ```html <script src="file.js"></script> <script> 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 ได้