อะแฮ่มๆ ขอสวัสดีท่านผู้มีเกียรติทุกๆท่านครับ ที่แวะมาเยี่ยมชมเพจแห่งนี้ ไม่ว่าจะตั้งใจมาหรือหลงลืมเข้ามาก็แล้วแต่ บักสนเองก็ขอต้อนรับทุกด้วยความยินดียิ่งครับ ผมเองมีความตั้งใจอยากจะเขียนแบ่งปันเรื่องราวเกี่ยวกับการเขียนโปรแกรม โดยเฉพาะเว็บโปรแกรมมิ่ง มาเป็นวิทยาทานครับ ซึ่งจริงๆแล้วเรื่องที่ผมจะเขียนนี้ ก็อาจจะมีให้อ่านอยู่มากมายในโลกของอินเตอร์เน็ตเนอะ เพียงแต่ว่าในภาษาไทยอาจจะมีบ้างแต่ยังไม่เยอะ ผมก็จะขอเป็นหนึ่งในฉบับภาษาไทย ที่จะเอาใจคนกลัวภาษาปะกิดครับ
[thetext]เริ่มเรื่อง…[/thetext]
เอาละผมเองก็จะเกริ่นๆพอเป็นพิธีให้หายคันหูนะครับว่า ภาษาจาวาสคริปต์มันมาจากไหน อีจาว่าสคริปต์เนี่ย มันถูกพัฒนาโดยผู้ชายคนนึง ชื่อว่า คุณ Brendan Eich ครับ สมัยนั้นยังไม่มีใครคิดหรอกว่า “เห้ย” ภาษานี้จะได้รับความนิยมขนาดนี้เลยเหรอ ตอนนี้ภาษาจาว่าสคริปต์เป็นภาษาที่พบเห็นได้ทั่วไปครับ ไม่ได้มีให้เห็นแค่ในเว็บบราวเซอร์เท่านั้นนะหนูๆ แต่มันยังถูกนำมาพัฒนาในแอพบน desktop ด้วย บนมือถือด้วย แม้แต่เดี๋ยวนี้ ก็มีการพัฒนาลงบนเครื่องเซิฟเวอร์กันเลยทีเดียว ดังนั้นไม่ต้องห่วงว่าการศึกษาภาษานี้ทำให้คุณเสียเวลาโดยเปล่าประโยชน์ เชื่อผมดิ๊!!
[skill]ผมอยากจะบอกไว้นะครับว่า Javascripts ไม่ใช่ภาษา JAVA! แม้ว่ามันจะชื่อคล้ายกันแต่มันก็คือคนละตัวนะครับ หลายๆคนชอบเข้าใจผิดกันเสียเหลือเกิน สองภาษานี้มีสิ่งที่เหมือนกันสองอย่างเท่านั้น นั้นก็คือ มีคำว่า “จาว่า” และ สองมีซินแท้ก (syntax) การเขียนเหมือนกัน เพราะว่าต่างก็ใช้วิธีเขียนแบบภาษา C อืม…มีแค่นั้นแหล่ะที่เหมือนกัน ใครที่ยังคิดว่าจาว่าสคริปต์คือภาษาจาว่า ก็เปลี่ยนความคิดใหม่เสียนะจ๊ะ ^^[/skill]
[thetext]แล้วจะเริ่มยังไงดีฟร่ะ?![/thetext]
ตอนนี้หลายคนคงคันไม้คันมืออยากจะลองหัดเขียนภาษา javascript กันแล้วกระมัง แล้วเราจะเริ่มต้นเขียนยังไงดีละ? โอเคครับ เดี๋ยวผมจะพาท่านผู้อ่านค่อยๆทำไปทีละขั้นตอน อย่าใจร้อน เพราะการจะเป็นโปรแกรมเมอร์มันไม่ได้เป็นได้ในสองสามวินาที มันต้องอาศัยการฝึกฝน ความอดทนครับ เอาละ สำหรับการเขียนภาษา javascript เราจะเขียนร่วมกับภาษา HTML นะครับ ซึ่งวิธีการแทรกภาษา javascript ลงใน HTML นั้นมีอยู่ สองวิธีคร้าบ
[circle]1[/circle]
เราสามารถ ฝังโค้ดภาษา javascript ของเราลงไปในหน้า HTML ได้เลยครับ โดยอยู่ภายในแท็ก script ดูตัวอย่างละกันครับ
[codesyntax lang=”php”]
<script>
alert("I am Buksohn. I am teaching you Javascript");
</script>
[/codesyntax]
เอาละครับ ตอนนี้ไม่จำเป็นต้องเข้าใจนะครับว่าตัวข้างบนมันหมายความว่าอย่างไร สำหรับบทนี้ผมจะพาให้รู้จักวิธีเขียนกันก่อน ซึ่งวิธีแรกนี้ก็คือเราจะเขียนอยู่ภายใน แท้ก <script> ตามด้วยภาษาจาวาสคริปต์ตรงนี้ครับ </script> แค่นี้เอง ต่อมามาดูวิธีที่สองครับ
[circle]2[/circle]
วิธีที่สอง เป็นวิธีที่เราเขียนไฟล์ javascript แยกไปต่างหากเลยครับ พอจะแทรกใน HTML เราก็แค่เรียกลิงค์ไฟล์นั้นเข้ามา ง่ายโคตร วิธีกวักมือเรียกมันนั้นก็ง่ายๆครับ เขียนคำสั่งดังนี้
[codesyntax lang=”php”]
<script src=”myJavascriptfile.js”></script>
[/codesyntax]
ครับ แค่นี้แหล่ะครับ! ง่ายมาก ใช่ป่ะ สำหรับวิธีนี้อย่าลืมปิดแท้ก </script> ด้วยนะครับ หลายคนลืมตรงจุดนี้ทำให้รันกันจนขี้แตก ก็รันไม่ออกครับ ทีนี้มาดูว่าแต่ละตัวคืออะไร สำหรับโค้ด src ก็ย่อมาจาก source ซึ่งก็คือตำแหน่งเก็บไฟล์ javascript ที่เราเขียนแยกนั่นแหล่ะครับ
[skill]
ข้อควรทราบสำหรับวิธีการแทรก javascript ลงในไฟล์ HTML ของเรา
- เราจะแทรกไปส่วนไหนของไฟล์ก็ได้ครับ แต่ต้องแทรกก่อนคำสั่ง ปิดแท็ก </body> นะครับ แม้ว่าเราจะสามารถแทรกตรงไหนก็ได้ แต่ถ้าจะให้มีประสิทธิภาพดีที่สุดเราจะเอาภาษาจาวาสคริปไปไว้ท้ายสุดครับ คือเอาไว้ก่อนปิด </body> นั่นแหล่ะ เพื่อที่เว็บจะได้โหลดเร็วยิ่งขึ้นครับ
- สำหรับภาษา HTML4 (ที่เราๆเขียนๆกันอยู่นี่) ถ้าจะกวักมือเรียกไฟล์ javascript มา ต้องมีเขียนด้วยว่า type=”text/javascript” เพื่อสั่งให้บราวเซอร์รู้ว่าที่ตรูเรียกมันคือไฟล์จาว่าสคริปต์นะว้อย แต่เดชะบุญ HTML5 ไม่จำเป็นต้องประกาศแบบนี้แล้วครับ แต่ถ้าใครยังเขียน HTML5 ไม่เป็นละก็ ก็อย่าลืมใส่คำสั่งด้านบนไปด้วยเด้อ
[/skill]
ต่อไปมาหัดเขียน javascript กันเถอะครับ ผมจะสอนทั้งสองวิธีเลยเนอะ
เอาวิธีแรกก่อนละกัน วิธีฝังไว้ใน HTML ครับ ให้เราสร้างไฟล์ HTML ขึ้นมา ตั้งชื่อว่า demo1.html ละกันครับ
ซึ่งการเขียน javascript แบบฝังก็จะมีโค้ดแบบนี้ครับ
[codesyntax lang=”php”]
<script src="myJavascriptfile.js"></script>
[/codesyntax]
เห็นไหมครับว่า เราจะเอาไว้ก่อนคำสั่งปิด body ซึ่งก็คือก่อน </body> นั่นเอง เขียนโค้ดตามนี้เสร็จแล้ว ก็ลอง save แล้วรันดูนะครับ ว่าผลลัพธ์ออกมาเป็นอย่างไร หรือจะคลิกที่ demo1 นี้ก็ได้ครับ
ต่อมาวิธีเรียกไฟล์เข้ามาใน HTML ก็ให้เราสร้างไฟล์มาสองไฟล์ ไฟล์แรกเป็นภาษา HTML ไฟล์ที่สองเป็นภาษา javascript (ชื่อว่า myfile.js ละกันครับ)
ดูภาษา HTML ก่อนละกัน
[codesyntax lang=”php”]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01// EN" "http://www.w3.org/TR/html4/strict.dtd" > <html lang="en"> <head> <title>javascript Example1</title> </head> <body> <script type=’text/javascript’ src=’myfile.js’></script> </body> </html>
[/codesyntax]
ส่วนไฟล์ myfile.js ก็เขียนเพียงแค่นี้คับ
[codesyntax lang=”php”]
alert(“Hello! I am Buksohn”);
[/codesyntax]
ซึ่งถ้าหากเขียนถูกต้อง พอรันแล้ว จะมีป๊อบอัพโผล่มาจ๊ะเอ๋เราครับ พร้อมกับข้อความว่า Hello! I’m Buksohn
เอาละ สำหรับบทเรียนตอนเบิกฤกษ์ก็เอาพอหอมปากหอมคอก่อนครับ เพราะว่าบักสนเมื่อยนิ้วแล้ว ฮ่าๆ แล้วพบกันใหม่กับตอนใหม่ ตื่นตาตื่นใจกว่าเดิม!
คลิกดูตัวอย่างบทเรียนนี้ได้ [demo]https://buksohn.com/tutor/code/demo1.html[/demo]
[bigtitle]บอกต่อเพื่อนให้กด Like บอกบักสนนั้นไซร้ให้ comment ^^[/bigtitle]
