4
Sep

Javascript จิ๊บจ๊อย #เบิกฤกษ์

Category: Blog , code / 1,200 views

อะแฮ่มๆ ขอสวัสดีท่านผู้มีเกียรติทุกๆท่านครับ ที่แวะมาเยี่ยมชมเพจแห่งนี้ ไม่ว่าจะตั้งใจมาหรือหลงลืมเข้ามาก็แล้วแต่ บักสนเองก็ขอต้อนรับทุกด้วยความยินดียิ่งครับ ผมเองมีความตั้งใจอยากจะเขียนแบ่งปันเรื่องราวเกี่ยวกับการเขียนโปรแกรม  โดยเฉพาะเว็บโปรแกรมมิ่ง มาเป็นวิทยาทานครับ ซึ่งจริงๆแล้วเรื่องที่ผมจะเขียนนี้ ก็อาจจะมีให้อ่านอยู่มากมายในโลกของอินเตอร์เน็ตเนอะ เพียงแต่ว่าในภาษาไทยอาจจะมีบ้างแต่ยังไม่เยอะ ผมก็จะขอเป็นหนึ่งในฉบับภาษาไทย ที่จะเอาใจคนกลัวภาษาปะกิดครับ

เริ่มเรื่อง…

เอาละผมเองก็จะเกริ่นๆพอเป็นพิธีให้หายคันหูนะครับว่า ภาษาจาวาสคริปต์มันมาจากไหน  อีจาว่าสคริปต์เนี่ย มันถูกพัฒนาโดยผู้ชายคนนึง ชื่อว่า คุณ Brendan Eich ครับ สมัยนั้นยังไม่มีใครคิดหรอกว่า “เห้ย” ภาษานี้จะได้รับความนิยมขนาดนี้เลยเหรอ  ตอนนี้ภาษาจาว่าสคริปต์เป็นภาษาที่พบเห็นได้ทั่วไปครับ ไม่ได้มีให้เห็นแค่ในเว็บบราวเซอร์เท่านั้นนะหนูๆ แต่มันยังถูกนำมาพัฒนาในแอพบน desktop ด้วย บนมือถือด้วย แม้แต่เดี๋ยวนี้ ก็มีการพัฒนาลงบนเครื่องเซิฟเวอร์กันเลยทีเดียว ดังนั้นไม่ต้องห่วงว่าการศึกษาภาษานี้ทำให้คุณเสียเวลาโดยเปล่าประโยชน์  เชื่อผมดิ๊!!

ผมอยากจะบอกไว้นะครับว่า Javascripts ไม่ใช่ภาษา JAVA!  แม้ว่ามันจะชื่อคล้ายกันแต่มันก็คือคนละตัวนะครับ หลายๆคนชอบเข้าใจผิดกันเสียเหลือเกิน สองภาษานี้มีสิ่งที่เหมือนกันสองอย่างเท่านั้น นั้นก็คือ มีคำว่า “จาว่า” และ สองมีซินแท้ก (syntax) การเขียนเหมือนกัน เพราะว่าต่างก็ใช้วิธีเขียนแบบภาษา C  อืม…มีแค่นั้นแหล่ะที่เหมือนกัน  ใครที่ยังคิดว่าจาว่าสคริปต์คือภาษาจาว่า ก็เปลี่ยนความคิดใหม่เสียนะจ๊ะ ^^
แล้วจะเริ่มยังไงดีฟร่ะ?!

ตอนนี้หลายคนคงคันไม้คันมืออยากจะลองหัดเขียนภาษา javascript กันแล้วกระมัง แล้วเราจะเริ่มต้นเขียนยังไงดีละ? โอเคครับ เดี๋ยวผมจะพาท่านผู้อ่านค่อยๆทำไปทีละขั้นตอน อย่าใจร้อน เพราะการจะเป็นโปรแกรมเมอร์มันไม่ได้เป็นได้ในสองสามวินาที มันต้องอาศัยการฝึกฝน ความอดทนครับ  เอาละ สำหรับการเขียนภาษา javascript เราจะเขียนร่วมกับภาษา HTML นะครับ ซึ่งวิธีการแทรกภาษา javascript ลงใน HTML นั้นมีอยู่ สองวิธีคร้าบ

 

1

เราสามารถ ฝังโค้ดภาษา javascript ของเราลงไปในหน้า HTML ได้เลยครับ โดยอยู่ภายในแท็ก script ดูตัวอย่างละกันครับ

 

[codesyntax lang=”php”]

<script>

alert("I am Buksohn. I am teaching you Javascript");

</script>

[/codesyntax]

เอาละครับ ตอนนี้ไม่จำเป็นต้องเข้าใจนะครับว่าตัวข้างบนมันหมายความว่าอย่างไร สำหรับบทนี้ผมจะพาให้รู้จักวิธีเขียนกันก่อน ซึ่งวิธีแรกนี้ก็คือเราจะเขียนอยู่ภายใน แท้ก <script> ตามด้วยภาษาจาวาสคริปต์ตรงนี้ครับ </script>  แค่นี้เอง  ต่อมามาดูวิธีที่สองครับ

 

2

วิธีที่สอง เป็นวิธีที่เราเขียนไฟล์ javascript แยกไปต่างหากเลยครับ พอจะแทรกใน HTML เราก็แค่เรียกลิงค์ไฟล์นั้นเข้ามา ง่ายโคตร  วิธีกวักมือเรียกมันนั้นก็ง่ายๆครับ เขียนคำสั่งดังนี้

 

[codesyntax lang=”php”]

<script src=”myJavascriptfile.js”></script>

[/codesyntax]

 

ครับ แค่นี้แหล่ะครับ! ง่ายมาก ใช่ป่ะ   สำหรับวิธีนี้อย่าลืมปิดแท้ก </script> ด้วยนะครับ หลายคนลืมตรงจุดนี้ทำให้รันกันจนขี้แตก ก็รันไม่ออกครับ  ทีนี้มาดูว่าแต่ละตัวคืออะไร สำหรับโค้ด src ก็ย่อมาจาก source ซึ่งก็คือตำแหน่งเก็บไฟล์ javascript ที่เราเขียนแยกนั่นแหล่ะครับ

 

ข้อควรทราบสำหรับวิธีการแทรก javascript ลงในไฟล์ HTML ของเรา

  • เราจะแทรกไปส่วนไหนของไฟล์ก็ได้ครับ  แต่ต้องแทรกก่อนคำสั่ง ปิดแท็ก </body> นะครับ   แม้ว่าเราจะสามารถแทรกตรงไหนก็ได้ แต่ถ้าจะให้มีประสิทธิภาพดีที่สุดเราจะเอาภาษาจาวาสคริปไปไว้ท้ายสุดครับ คือเอาไว้ก่อนปิด </body> นั่นแหล่ะ เพื่อที่เว็บจะได้โหลดเร็วยิ่งขึ้นครับ
  • สำหรับภาษา HTML4 (ที่เราๆเขียนๆกันอยู่นี่) ถ้าจะกวักมือเรียกไฟล์ javascript มา ต้องมีเขียนด้วยว่า type=”text/javascript” เพื่อสั่งให้บราวเซอร์รู้ว่าที่ตรูเรียกมันคือไฟล์จาว่าสคริปต์นะว้อย  แต่เดชะบุญ HTML5 ไม่จำเป็นต้องประกาศแบบนี้แล้วครับ แต่ถ้าใครยังเขียน HTML5 ไม่เป็นละก็ ก็อย่าลืมใส่คำสั่งด้านบนไปด้วยเด้อ

 

ต่อไปมาหัดเขียน 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

เอาละ สำหรับบทเรียนตอนเบิกฤกษ์ก็เอาพอหอมปากหอมคอก่อนครับ เพราะว่าบักสนเมื่อยนิ้วแล้ว ฮ่าๆ แล้วพบกันใหม่กับตอนใหม่ ตื่นตาตื่นใจกว่าเดิม!

คลิกดูตัวอย่างบทเรียนนี้ได้  

 

บอกต่อเพื่อนให้กด Like บอกบักสนนั้นไซร้ให้ comment  ^^

 

 

Tags:


Phraisohn Siripool is a Graphic Designer and Website Developer. Contact Buksohn for Your Business Endeavours