หน่อยที่ 5

หน่อยท่ี 5พน้ื ฐานการใช้ HTML5 CSS JAVASCRIPGT

สาระบญั หนา้เรือ่ ง 3 15 พ้ืนฐานการใช้ HTML5 21 พ้ืนฐานการใช้ CSS พ้ืนการใช้ JAVA SCRIPT

ความร้เู บ้อื งต้นสาหรบั ภาษา HTML5

อะไรคือ HTML5ผู้อ่าน Blognone คงได้ยนิ ช่ือ HTML5 กนั มาเยอะ แต่ว่าแท้จริงแล้วมันคอื อะไรกนั แน่?ความหมายท่วั ไปของคาว่า HTML5 มสี องนัยยะท่เี หล่ือมซ้อนกนั อยู่ครับความหมายในมมุ แคบ มนั คือ สเปกของภาษา HTML ร่นุ ที่ 5 ซ่งึ ต่อจาก HTML4 ท่เี ราใช้กนั ทุกวนั น้ี โดยปัจจุบนั สเปกยงั ร่างไม่เสรจ็ (ดไู ด้จากเอกสารของ W3C) เน้ือหาจะครอบคลุมลกั ษณะ ฟี เจอร์ และsyntax ของ HTML เทา่ น้ันความหมายในมุมท่กี ว้างข้ึน มนั คอื ชดุ ของเทคโนโลยเี ว็บสมยั ใหม่ อนัประกอบไปด้วยภาษา HTML5 ตามข้อแรกCSS3API อกี ชุดหน่ึงท่อี ยู่นอกสเปก HTML5 แต่ออกแบบมาให้ใช้งานร่วมกนั เช่น Geolocation, IndexedDB, File API ท่กี าลังเป็นร่างมาตรฐานของ W3C แยกมาอกี ชุดหน่ึงเทคโนโลยีประกอบอ่นื ๆ ท่เี ป็นมาตรฐานของ W3C อยู่แล้ว และนามาใช้ร่วมกบั HTML (ซ่ึงจะเป็น HTML4 หรือ HTML5 กไ็ ด้) เช่นSVG หรือ MathMLHTML5 ในท่นี ้ีเราจะหมายถงึ ความหมายอย่างท่สี อง กค็ ือเทคโนโลยเี วบ็ร่นุ ใหม่แบบรวมๆ นะครับ

ทาไมต้องมี HTML5 จะว่าไปแล้ว เทคโนโลยใี น HTML5 แทบไม่มีอะไรใหม่ในโลกไอทเี ลย เพราะ เกอื บทุกอย่างท่ี HTML5 ทาได้ อยู่ในกระบวนการพัฒนาโปรแกรมแบบ native มาช้านานแล้ว เช่น การทางานแบบออฟไลน์ หรือ การวาดกราฟิ ก เพียงแต่ HTML5 นาเทคโนโลยที ่เี คยอยู่ในโลก native ย้ายเข้ามาส่โู ลกของเวบ็ ทาให้มนั มขี ้อดีของท้งั สองโลก คอื ฟี เจอร์อนั ร่มุ รวยและประสทิ ธภิ าพในการทางาน จากโลก native มาผสานกบั ความคล่องตัว เข้าถึงได้จากทุกท่ขี องเวบ็ เดมิ ที ภาษาตระกูล HTML/SGML เป็นภาษาท่อี อกแบบมาเพ่ือ \"อธบิ าย\" หรือ \"นิยาม\" การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอยี ง หัวเร่ือง ลิงก์ ซ่ึงการใช้งานกค็ อื เอาไว้ทาเอกสารท่เี ช่ือมโยงกนั (ตวั อย่างคอื Help ของวินโดวส)์ พอมีอนิ เทอร์เนต็ HTML กท็ าหน้าท่สี ร้าง \"โบรชัวร์อเิ ลก็ ทรอนิกส์\" ท่สี ามารถดูได้ จากระยะไกล ถงึ แม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยเี วบ็ ก็ พัฒนามากข้นึ สามารถใส่ภาพ เสยี ง วิดโี อ (ผ่านปล๊ักอนิ ) มแี นวคิดเชิงโปรแกรม อย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังส้ไู ม่ได้) ในยุคของ HTML3 พอเป็นยุคของ HTML4 เราเร่ิมเหน็ เวบ็ แบบท่ตี อบโต้ได้ มคี วามเป็นอนิ เตอร์ แอคทฟี มากข้นึ ซ่ึงเกดิ จากเทคโนโลยอี ย่าง AJAX, XMLHttpRequest ทา ให้เวบ็ มีความใกล้เคยี งกบั \"แอพ\" แบบด้งั เดมิ มากข้นึ อย่างไรกต็ าม มันยังส้แู อ พแบบ native ไม่ได้ เพราะยังขาดฟี เจอร์สาคญั ๆ อกี หลายอย่าง เช่น การทางาน ออฟไลน์ กราฟิ กสามมิติ ฯลฯ น่นั เอง สดุ ท้ายแล้ว HTML5 จะช่วยให้เรานาเทคโนโลยจี ากโลกของเวบ็ มาสร้างแอพท่มี ี ลักษณะใกล้เคียงกบั แอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถอื ได้) ตวั อย่างท่ี ชัดเจนท่สี ดุ ในตอนน้คี ือ PhoneGap ซ่ึงเป็นเคร่ืองมอื พัฒนาแอพมือถอื ด้วย HTML5

HTML5 มคี วามสามารถอะไรบา้ ง เกร่ินกนั มานานกเ็ ร่ิมเข้าเร่ืองกนั สกั ทนี ะครับ ส่วนประกอบ ของ HTML5 มหี ลายอย่างมาก เราอาจไม่จาเป็นต้องใช้ ทกุ ฟี เจอร์ ส่วนการอธบิ ายส่วนประกอบของ HTML5 กข็ ้นึ กบั ว่าเรา จะจดั หมวดหม่มู นั อย่างไร มหี ลายตาราให้เลือก ในบทความ น้ผี มขอเลอื กตาม W3C ท่อี ตุ ส่าห์ออกแบบโลโก้-ไอคอน ของ HTML5 เพ่ือแสดงสญั ลักษณข์ องเทคโนโลยเี วบ็ แขนงต่างๆ เพ่ือให้เข้าใจง่ายและแยกหมวดหม่ตู ามกนั W3C แบ่งเทคโนโลยใี นชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ช่ือตามน้ัน และ เรียงลาดบั กนั ไปเช่นเดยี วกบั เวบ็ W3C HTML5 Logo

1. Semantics เทคโนโลยกี ล่มุ Semantics คอื ตวั syntax ของภาษา HTML5 ท่แี น่นอนว่าเปล่ียนไปจาก HTML4 ซ่งึ มแี ทก็ ใหม่ๆ และคณุ สมบตั ิ (atrribute) ใหม่ๆ เพ่ิมข้นึ อกี พอสมควร โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมอื นกบั HTML ท่เี ราคุ้นเคย แต่เพ่ิมแทก็ ใหม่ ตดั แทก็ เก่า และ เปล่ียนวธิ ใี ช้แทก็ เก่าบางตวั ออกไป รายละเอยี ดอ่านได้ จาก HTML5 differences from HTML4 ของ W3C ยกมาเป็นตวั อย่างพอให้เหน็ ภาพ แท็กใหม่ แทก็ กลุ่มน้จี ะช่วยบ่งบอกความหมายของวตั ถุในเวบ็ เพจได้ดี ข้นึ เช่น จากเดมิ เราใช้ <div id=\"header\"> กเ็ ปล่ียน มาเป็น <header> ทาให้เบราวเ์ ซอร์สามารถรับทราบ ความหมายของวัตถแุ ต่ละช้นิ ได้ดขี ้นึ

2. Offline & Storage เทคโนโลยใี นหมวดน้ีกต็ รงตามช่ือหมวด น่ันคือช่วยให้เวบ็ สามารถ ทางานแบบออฟไลน์ได้ และเกบ็ ข้อมลู ไว้ใช้งานบนเคร่ืองของผู้ชม เวบ็ ได้ ผมเคยเขยี นเน้ือหาในหมวดน้ีไปแล้วคร้ังหน่ึงในบทความ ร้จู กั กบั วธิ กี ารเกบ็ ข้อมูล Local Storage ของ HTML5 กข็ อเอามารียูส เพราะเน้ือหาเหมอื นกนั ทุกประการ Web Storage เทคโนโลยีแรกคอื Web Storage ซ่งึ เป็นการเกบ็ ข้อมูลแบบง่ายๆ ในรปู key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซ่งึ แยกย่อยได้อกี 2 อย่าง คอื Session storage เกบ็ ข้อมลู เฉพาะเซสชันการทอ่ งเวบ็ น้ันๆ ปิ ดแทบ็ เม่อื ไรข้อมลู กห็ ายไป ใช้ออบเจคตช์ นิด sessionStorage อนั น้ีไม่ซับซ้อน Local storage เกบ็ ข้อมูลระยะยาว (persistence) โดยใช้ ออบเจคตช์ ่ือ localStorage ซ่งึ จะซับซ้อนข้นึ เพราะเราสามารถ เปิ ดเวบ็ เพจเดยี วกนั ใน 2 แทบ็ หรือมากกว่า ซ่ึงมันจะแชร์ข้อมลู ก้อน เดยี วกนั ฟี เจอร์ Web Storage จะคล้ายกบั Google Gears เม่อื 3-4 ปี ก่อนหน้าน้ี เพียงแต่ Web Storage รวมมากบั HTML5 เลย ไม่ต้องลงปล๊กั อนิ เพ่ิมเองแบบ Gears

3. Device Access เทคโนโลยหี มวดท่สี ามจะเน้นความเช่ือมโยงกบั ฟี เจอร์ของ ฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น Geolocation API เพ่ือขอข้อมูลเชงิ พิกดั ของอปุ กรณ์ เข้าถงึ ไมโครโฟนและกล้องถ่ายภาพของอปุ กรณ์ เข้าถงึ ข้อมลู ภายในตวั อปุ กรณ์ เช่น สมุดท่อี ยู่ หรือข้อมลู การเอยี งเคร่ือง (tilt orientation) ฟี เจอร์ในกลุ่มน้จี ะไม่ได้อยู่ในรปู ของแทก็ HTML โดยตรง แต่จะเป็น API ท่ฝี ่งั เบราวเ์ ซอร์ต้องเตรียมไว้ให้ แล้วเวบ็ เพจค่อยเรียกใช้ผ่านจาวาสคริปตอ์ กี ทหี น่งึ ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวริ ์คจาวาสคริปตท์ ่ี เตรียมเร่ืองพวกน้ไี ว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็น ต้น

4. Connectivity เทคโนโลยีกลุ่มท่สี ่เี น้นการเช่ือมต่อกบั เครือข่ายท่ดี ขี ้ึน มี 2 อย่างท่ี สาคญั WebSockets WebSockets เป็น API ท่อี อกมาเพ่ือต่อยอดแนวทางของ AJAX ในอดตี อธบิ ายง่ายๆ มนั คือการ push ข้อมูลจาก เซริ ์ฟเวอร์มายงั ไคลเอนต์ (แบบเดยี วกบั push mail ท่เี ราร้จู กั กนั ) ในแง่เทคนิค การส่งข้อมลู แบบ HTTP แบบด้งั เดิมจะเปิ ดการ เช่ือมต่อกบั เซริ ์ฟเวอร์เพ่ือส่งข้อมลู แล้วตดั การเช่ือมต่อเม่อื ใช้เสรจ็ ดังน้ันการขอข้อมูลจากเซริ ์ฟเวอร์เป็นระยะจึงทาได้ยาก เพราะต้องดงึ ข้อมลู จากเซริ ์ฟเวอร์ (polling) เป็นระยะ ซ่งึ เปลอื งโหลดของ เซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณที ่ตี ้องเปิ ดการเช่ือมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET) WebSockets เกดิ มาเพ่ือแก้ปัญหาน้ี โดยสร้างการเช่ือมต่อแบบ (เกอื บ) ถาวรระหว่างเซริ ์ฟเวอร์กบั ไคลเอนต์ เพ่ือให้สองฝัง่ ส่งข้อมลู กนั ได้ตลอด ท้งั หมดรันอยู่บนโพรโตคอล TCP อกี ช้ันหน่ึง และ ไม่ได้ว่งิ บนโพรโตคอล HTTP เพ่ือประหยัดโหลดของ HTTP ครับ ในการใช้งานเราจะเรียก WebSockets ด้วย

5. Multimedia เร่ืองน้เี ราพูดกนั มาเยอะมาก และเร่ิมใช้งานจริงกนั แล้ว คงไม่ ต้ องลงลึกในบทความตอนน้ ี อธบิ ายแบบส้นั ๆ คือเดมิ ท่ี HTML4 ข้ึนไปไม่สามารถ แสดงผลเสยี ง-วิดโี อได้โดยตรง ต้องใช้วิธฝี งั <object> แล้ว ติดต้ังปล๊ักอนิ เพ่ือช่วยเล่นมัลติมเี ดยี ซ่ึงทางานได้ตามน้ันแต่ก็ มีปัญหายิบย่อยมากมายตามมาเช่นกนั แต่พอเป็น HTML5 ได้กาหนดให้ HTML ต้องเล่นไฟล์ เสยี งและวดิ โี อได้ในตวั จึงเป็นท่มี าของแทก็ ใหม่ <audio> และ <video> ท่หี ลายคนคงลองใช้กนั แล้ว ดังน้นั ต่อไปเสยี ง และวดิ ีโอจะกลืนเป็นเน้อื เดยี วกบั เวบ็ เพจโดยตรง เราสามารถ ปรับเปล่ียนการแสดงผลของมันได้เฉกเช่นเดียวกบั ส่วนอ่นื ๆ ของเวบ็ เพจ เช่น ย้ายตาแหน่ง ซ้อนฉากหลัง หาอย่างอ่นื มาบัง ฯลฯ อย่างไรกต็ าม เร่ืองมลั ตมิ ีเดียของ HTML5 กลับมปี ัญหา ประการใหม่เพ่ิมเข้ามา น่นั คือ \"สงคราม codec\" ระหว่าง เบราว์เซอร์สองค่ายใหญ่ ดังท่เี ราเหน็ จากข่าว WebM+Ogg (สนบั สนุนโดย Chrome/Firefox/Opera) vs H.264 (สนบั สนุน โดย IE/Safari) น่นั เอง

6. 3D, Graphics & Effects หมวดทีห่ กเกีย่ วกบั เรือ่ งกราฟิ ก แบ่งเป็ น 4 ประการ ย่อยๆ SVG (Scalable Vector Graphics) Canvas WebGL CSS3 3D

7. Performance &Integration หมวดท่เี จด็ เป็นการปรับปรงุ ประสทิ ธภิ าพการทางานของเวบ็ แอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ Web Worker อธบิ ายง่ายๆ WebWorker คอื จาวาสคริปตท์ ่ที างานแบบมลั ตเิ ธรด็ เพ่ือให้สคริปต์สามารถทางานเบ้อื งหลงั ได้หลายๆ งานพร้อมกนั XMLHttpRequest Level 2 ผมถอื ว่าผ้อู ่าน Blognone คงร้จู ักXMLHttpRequest (XHR) ท่เี ป็นเทคโนโลยพี ้ืนฐานของAJAX กนั พอสมควรแล้ว อธบิ ายส้นั ๆ สาหรับคนไม่รู้ XHRเป็นวธิ กี ารโหลดข้อมลู เฉพาะบางส่วนของเวบ็ เพจ (ไม่ใช่ท้งัหน้า) ช่วยให้เราสามารถปรับปรงุ ข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทง้ั หน้า ผลคอื เวบ็ เพจท่อี นิ เตอร์แอคทฟี มากข้นึ น่ันเอง

8. CSS3 CSS3 มคี วามสามารถเพ่ิมข้นึ จาก CSS2 ในปัจจุบนั มาก เพ่ิมฟี เจอร์ของแวดวงส่งิ พิมพ์ท่เี ก่ยี วข้องกบั การจดั หน้า การ ควบคุมการไหลของข้อความ และฟอนตเ์ ข้ามาอกี มาก แต่ก็ ยงั มเี ร่ืองอ่นื ๆ เช่น 3D, เสยี งพดู , แอนิเมชัน ฯลฯ (ดขู ่าว เก่าเร่ือง CSS3 Regions ประกอบ)

พน้ื ฐาน CSS

CSS คืออะไร Cascading Style Sheets (CSS) คอื ภาษาท่ใี ช้กาหนด รปู แบบการแสดงผล HTML CSS ถูกสร้างข้นึ เพ่ือใช้ ร่วมกบั HTML กล่าวคอื HTML ใช้สาหรับกาหนด โครงสร้างข้อมลู และ CSS ใช้สาหรับกาหนดรปู แบบการ แสดงผล

เวอรช์ ันของ CSS เวอร์ชนั ของ CSS มดี งั ต่อไปน้ี CSS 1CSS 1 หรือ CSS Level 1 คือเวอร์ชันแรกท่อี อกสู่ สาธารณะและเป็น W3C Recommendation ซ่ึงออกใน เดือนธนั วาคมปี ค.ศ. 1996 CSS 1 น้นั มีฟี เจอร์เพียงไม่มาก CSS 2CSS 2 ออกในเดอื นพฤษภาคมปี ค.ศ. 1998 โดย เพ่ิมเติมฟี เจอร์ให้กบั CSS 1 อย่างไรกต็ าม CSS 2 ไม่ ประสบความสาเรจ็ มากนักในแง่ของการยอมรับและการรองรับ จากเวบ็ เบราวเ์ ซอร์ต่างๆ ทาให้ CSS 2.1 ต้องออกมาเพ่ือ แก้ไขปัญหาต่างๆในเวอร์ชัน 2 CSS 2.1 ได้เป็น Recommendation ในเดอื นกรกฎาคมปี ค.ศ. 2007 CSS 3CSS 3 ยงั อยู่ระหว่างการพัฒนา และการกาหนด สเปคใน CSS 3 น้นั จะถูกแบ่งออกเป็นส่วน (Module) ต่างๆ ซ่ึงบางส่วนกเ็ สรจ็ สมบรู ณแ์ ล้ว บางส่วนกก็ าลงั พัฒนาอยู่ แต่บางเวบ็ เบราว์เซอร์กเ็ ร่ิมรองรับสเปคในบางส่วนบ้างแล้ว

การเขียนโค้ด CSS แบบ Inline แบบ Inline คือการเขียนโค้ด CSS ลงไปในแทก็ HTML ท่ตี ้องการให้เกดิ การแสดงผลเลย และจะมผี ลต่อแทก็ น้นั ๆ เท่าน้นั โดยมี Syntax ดังน้ี <tag style=\"property:value;property:value; . . .\"> แอททริบิวท์ style ใช้ในการกาหนดค่าสไตล์พรอ็ พเพอร์ต้ี ต่างๆ ซ่ึงจะอยู่ในรปู ของ \"property:value\" หากมี มากกว่าหน่งึ ชุดให้ใช้เคร่ืองหมาย Semicolon \";\" ค่นั ตวั อย่างเช่น <h1style=\"color:#0000FF\">Where to PutCSS?</h1>? ในตวั อย่างข้างต้นเรากาหนดสไตล์ให้กบั แทก็ <h1> โดยให้ ข้อความเป็นสฟี ้ าด้วยสไตล์พรอ็ พเพอร์ต้ี color การเขียนแบบ Inline ไม่เป็นท่นี ิยมนัก เน่อื งจากต้องเขยี น โค้ด CSS ลงไปในแทก็ HTML ดังน้นั จงึ ไม่สามารถนาสไตล์ ไปประยุกต์ใช้กบั แทก็ อ่นื ๆได้ ลองนึกดูว่าถ้าต้องระบุค่าสี ให้กบั ทุกๆแทก็ <h1> ในทุกๆเวบ็ เพจ คงจะลาบากน่าดูหาก ว่าต้องการเปล่ียนสใี นภายหลัง

การเขียนโค้ด CSS แบบEmbedded แบบ Embedded เป็นการเขยี นโค้ด CSS ลงไปใน ไฟล์ HTML เช่นกนั แต่จะรวมโค้ด CSS ท้งั หมดไว้ ภายใต้แทก็ <head> โดยมี Syntax ดงั น้ี <head> <title></title> <style type=\"text/css\"> selector { property:value; property:value; ...} </style> </head>

การเขียนโค้ด CSS แบบEแxบtบeสดุ rทn้ายแaบlบ External เป็นการเขยี นแบบแยกโค้ด CSS ออกมายังไฟล์แยกต่างหาก ซ่งึ ช่ือกบ็ อกอยู่แล้วนะ ครับว่า External โดยมี Syntax ดงั น้ี HTML: <head> <title></title> <link rel=\"stylesheet\" type=\"text/css\" href=\"fileName.css\" /> </head> CSS: selector { property:value; property:value; ...}

พน้ื ฐาน JavaScript

JavaScript เป็ น ScriptLanguage ส่งิ แรกท่เี ราต้องทราบเก่ยี วกบั JavaScript คอื เป็น ภาษาคอมพิวเตอร์ท่เี ขยี นลงบนเวบ็ เพจ โดย Web Browser จะเป็นผ้อู ่านโคต๊ และตคี วามหมาย แล้วจึง แสดงผลออกบนหน้าจอ จะเหน็ ได้ว่า JavaScript จะต้อง อาศยั Web Browser จึงไม่สามารถเขยี นโปรแกรมแยก เป็นอสิ ระได้ เช่น ไม่สามารถเข้าถงึ ฐานข้อมลู ได้โดยตรง หรือไม่สามารถเข้าใช้งานฮาร์ดแวร์ต่างๆ เช่น USB, CD- Rom เป็นต้น JavaScript เป็น Client Side Script ซ่งึ หมายความว่า มกี ารแปลโคต๊ ในฝ่งั ของ Client ซ่งึ หมายความว่า หากเรา เขียนโคต๊ JavaScript เรากส็ ามารถใช้เคร่ืองคอมพิวเตอร์ ของเราแสดงผลลัพธไ์ ด้น้นั เอง แต่กม็ ขี ้อยกเว้น คอื Node.js และ Google Apps Script จะทางานในฝ่งั Server-side ท่ตี ้องใช้เคร่ือง Server ทาการประมวลผล แล้วจงึ ส่งผลลัพธม์ าให้เราอกี คร้ังหน่งึ

JavaScript บน Browser ในเวบ็ บราวเซอร์สามารถ disabled JavaScript ได้ ซ่ึง หมายความว่าไม่ต้องการให้มกี ารรนั คาส่งั JavaScript แต่ใน ความเป็นจริงในปัจจุบนั ค่า Default ของทุกๆ บราวเซอร์จะ รองรับ JavaScript แต่การเขียนสคริป เราจะต้องเผ่อื ไว้ว่า หาก Browser ไม่รองรับ JavaScript เวบ็ ไซตข์ องเรา จะต้องใช้งานได้ตามปกติ เน่อื งจาก Web Browser ท่ตี ่างกนั จะมีการแสดงผลของ CSS และ JavaScript ท่แี ตกต่างกนั ออกไป โดยข้ึนอยู่กบั ว่า อ้างองิ กบั JavaScript ตวั ใด จุดเร่ิมต้น Nescape พัฒนา LiveScript ในปี 1995 จากน้นั ในปี 1996 กเ็ ปล่ียนเป็น JavaScript ซ่ึงในขณะน้นั Internet Explorer กพ็ ัฒนา JScript ออกมา ในปี 1997 ทาง Nescape ได้ดันให้ JavaScript เป็นมาตรฐาน โดยใช้ช่ือว่า ECMAScript ต่อมาในปี 1999 กไ็ ด้เสนอ ECMAScript 3 ซ่ึง Browser ส่วนใหญ่ให้การรับรอง (IE, FireFox, Chrome, Opera, Safari) และในปี 2009 กไ็ ด้ใช้ ECMAScript 5 และใช้งานต่อเน่อื งมาถงึ ปัจจุบนั ด้วยการท่ี JavaScript ท่ใี ช้อ้างองิ กบั ECMAScript 5 ซ่ึง เป็นมาตรฐาน เราจึงสามารถใช้ JavaScript ได้อย่าง กว้างขวาง สามารถใช้งานกบั Mac, PC, Linux, Unix สามารถใช้ JavaScript ร่วมกบั ภาษายอดนยิ มไม่ว่าจะเป็น ASP.NET, ColdFusion, PHP, Ruby on Rails

เริ่มเขียน JavaScript ต่อไปน้ เี ป็ นตวั อย่างการเขียน JavaScript อย่างง่ายๆ โดยผลลพั ธจ์ ะเป็ นการแสดงหนา้ ต่างโตต้ อบบนเว็บ บราวเซอร์ 1. เปิดโปรแกรมประเภท Text Editor เช่น Notepad++ จากน้ันให้กรอกโคต๊ น้ลี งไป <script> alert(\"Hello World!\"); </script> 2. เซฟไฟล์แล้วต้งั ช่ือว่า Hello.html แล้วดับเบ้ลิ คลิกเพ่ือเปิ ดไฟล์ หรือคลิกขวาแล้วเลอื กเปิ ดด้วยบราวเซอร์ท่ตี ้องการ 4. ผลลัพธจ์ ะปรากฏหน้าต่าง แสดงคาว่า HelloWorld!บนหน้าจอ ซ่งึ รปู ร่างหน้าต่าง หรือสสี นั ของหน้าต่างอาจแตกต่างกนั ออกไปข้นึ อยู่กบั ว่าเปิ ดด้วย Web Browser ตวั ใด