PDA

View Full Version : มาเรียน Javascript กันดีกว่า


squallcope
24-10-2007, 05:56 PM
สวัสดีครับ Padawan ทั้งหลาย ผมชื่อนัทน่ะครับ
ตอนนี้ผมเรียนวิดวะคอมอยู่ม.แม่ฟ้าหลวง ปี 3 ล่ะครับ
กำลังทำงานไปด้วย ก็รับเขียนเว็บ และ application บนว็บ ครับ ก็เลยอยากนำเสนอเรื่องราวเกี่ยวกับ web
เรามาเข้าเรื่องกันเลยดีกว่าน่ะ ก่อนอื่นหลายคน คงจะสับสนระหว่าง Java กับ Javascript
ทั้ง 2 ตัวนี้ต่างกันน่ะครับ
• ภาษาJava คือ ภาษาคอมพิวเตอร์ที่จัดทำโดยบริษัทซันไมโครซิสเต็ม ซึ่งสนับสนุนการเขียนโปรแกรมเชิงวัตถุ (OOP:Object Oriented Programming) ซึ่งจะเขียนเป็น Class ไว้น่ะครับ พูดง่ายคือ เราเขียนApplication ทั่วไปได้จาก ภาษา Java นั่นเอง
• ส่วน Java Script คือ คือ ภาษาโปรแกรมเช่นกัน มีโครงสร้างคล้ายภาษา C ภาษาเดิมมีชื่อว่า Livescript ถูกพัฒนาโดย Netscape Navigator ซึ่งภาษานี้ถูกใช้ในการเขียนเว็บไซต์โดยเฉพาะครับ แตกต่างจาก Java ด้านบนกันสิ้นเชิงน่ะครับ

• ทำไมต้อง Javascript
เดิมการเขียนเว็บยุคก่อนๆจะมีแค่ภาษา HTML(Hypertext Markup Language) ซึ่งเราจะสามารถนำเสนอข้อความและรูปภาพได้อย่างเดียว ไม่มีการติดต่อกับ user Javascript จึงเกิดขึ้นเพื่อให้เว็บนั้นได้มีการตอบสนองกับ user พอจะเห็นภาพคร่าวๆกันล่ะน่ะครับ

• ต้องมีความรู้พื้นฐานอะไรบ้าง
แน่นอนครับผู้ที่เขียนเว็บกันน่าจะต้องรู้ภาษา HTML มากันพอสมควร เพราะเราจะต้องใช้ Javascript เข้าไปแทรกตาม tag ต่างๆใน HTML แค่พอรู้พื้นฐานก็พอได้ครับ ส่วนใครที่มีความรู้ C/Pascal มาก็จะไปได้เร็วครับ

• เครื่องมือที่ใช้
เครื่องมือที่ใช้ก็เหมือนกับเครื่องมือที่เราใช้เขียนเว็บกันครับ ส่วนตัวผมเองจะเขียนในโปรแกรม Dream Weaver หรือไม่นิดๆหน่อยก็สามรถใช้ notepad ได้ครับ

• พื้นฐานHTML
นี่คือแทกพื้นฐานในภาษา HTML น่ะครับ

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
[/b]

• การแทรก Javascript เข้าไปใน HTML
เราสามารถแทรก Javascript เข้าไปได้ทุกส่วนของ HTML ครับตัวอย่างเช่น

<html>
<head>
<title>Test for Javascript</title>
</head>
<body>
<script language="JavaScript">
<!--
ภายในนี้จะเป็นคำสั่งต่างๆของ Javascript
//-->
</script>
</body>
</html>
[/b]

• ตัวอย่างโปรแกรมแรกกับ Javascript

<html>
<head><title>Using the noscript Tag</title></head>
<body>
<script language="JavaScript">
<!--
document.write("Hello World!");
//-->
</script>
<noscript>
JavaScript Here
</noscript>
</body>
</html>
[/b]

คุณก็แค่เพียง save ไฟล์นี้เป็นนามสกุล html เช่น helloworld.html แล้วทำการเรียกไฟล์นี้ผ่าน web browser ผลที่ได้ก็คือจะมีข้อความว่า Hello World! ขึ้นบนหน้าเว็บเพจ

ตอนนี้เราก็เข้าใจ Javascript มากขึ้นล่ะน่ะครับ เดี๋ยวรอติดตามเรื่องของตัวแปรใน Javacscript น่ะครับ
pradid
24-10-2007, 08:17 PM
ผมเข้าใจแล้วว่า java ใช้เขียนเพื่อแสดงเชิงวัตถุ ส่วน javascript ใช้ในการแทรกเว็บเพื่อให้เกิดความสมบูรณ์เล้าใจผู้เข้าชม ขอบคุณมากครับ
squallcope
24-10-2007, 08:32 PM
มาต่อกันเรื่องของตัวแปรใน Javascript กันน่ะครับ

• การตั้งชื่อตัวแปร
ตัวแปรในภาษา javascript จะมองเป็นแบบ case-sensitive ก็คือ ตัวอักษรเล็กและตัวอักษรใหญ่เครื่องจะมองต่างกัน เช่น Row กับ row จะถูกมองว่าเป็นตัวแปรคนละตัวกัน และกฏของการตั้งชื่อตัวแปรสามารถสรุปได้ดังนี้
-สามารถขึ้นต้นด้วยตัวอักษรใหญ่ได้ (A-Z) เช่น ROW,Row
-สามารถขึ้นต้นด้วยตัวอักษรเล็กได้(a-z) เช่น rOW,row
-สามารถขึ้นต้นด้วยอันเดอร์สกรอได้(_) เช่น _ROW,_row
-ไม่สามารถขึ้นต้นได้ด้วยตัวเลข ตัวอย่างที่ไม่สามารถตั้งได้เช่น 12Bn,1sx
-ไม่สามารถตั้งชื่อตัวแปรที่เหมือนคำสงวนได้เช่น if else while เป็นต้น

• ชนิดของตัวแปร
Integer คือ เลขจำนวนเต็ม
Floating-point numbers คือ เลขจำนวนจริง
Logic or boolean values คือ ตรรก(มีค่าแค่ถูกกับผิด)
String คือ ข้อความ

• Floating และ Integer
ในภาษา Javascript นั้นสามารถแปลงค่าจาก Interger ไปเป็น Floating หรือ Floating ไปเป็น Integer ได้โยอัติโนมัติ
ตัวแปร Integer ใน JavaScript จะอยู่ในรูปของเลขฐานได้ 3 ฐาน คือ 8 ,10 และ 16
ฐาน 10 โดยปกติแล้วตัวเลขที่ใช้ใน JavaScript จะเป็นเลขฐาน 10 อยู่แล้ว
ฐาน 8 จะมีเลขโดดอยู่แค่ 8 ตัว คือ 0-7 การเขียนเลขฐาน 8 จะใช้ 0 นำหน้า เช่น 0124,0317
ฐาน 16 จะมีเลขโดดอยู่ 16 ตัว คือ 0-9 และใช้ A-F แทน 10 - 15 การเขียนเลขฐาน 16 จะใช้ 0x นำหน้า เช่น 0x31F,0xFA2

ส่วน Floating จะใช้กับเลขทศนิยมหรือเลขที่มีค่ามากๆและน้อยมากๆจนต้องเขียนในรูปของเลขยกกำลัง เช่น
-4.2132
55.
12e2 (อ่านว่า 12 คูณ 10 ยกกำลัง 2) มีค่าเท่ากับ 1200
1e-1 (อ่านว่า 1 คูณ 10 ยกกำลัง -1) มีค่าเท่ากับ 0.1

• ตัวแปรชนิดตรรก : Logical Values
ตัวแปรชนิดตรรก คือ ตัวแปรที่บอกค่าความจริงมี 2 ตัวคือ
1.True สามารถแทนค่าได้ด้วย เลข 1
1.False สามารถแทนค่าได้ด้วย เลข 0

ตัวอย่างโปรแกรมที่แสดงให้เห็นว่าตัวแปรทั้งสองสามารถแทนด้วยเลข 0 และ 1

<html>
<head>
<title>Conversation of logical values to numeric values</title>
</head>
<body>
<script language="JavaScript">
<!--
document.write("true*23 + false *99 = ");
document.write(true*23 + false *99);
// -->
</script>
</body>
</html>
[/b]
ผลที่ได้จากการรันโปรแกรมนี้คือ true*23 + false*99 = 23
เนื่องจากสมการนี้มีค่าเท่ากับ 1*23 + 0*99 = 23 ชัวร์ครับ

• ตัวแปรชนิดข้อความ : String
การที่จะทำให้ Javascript รู้จักตัวแปร String ก็คือการใส่ " หรือ &#39; คร่อมข้อความนั้นๆเช่น "My name is Nut"
ตัวอย่างโปรแกรมเกี่ยวกับ String เช่น

<html>
<head><title>Using quote within string</title></head>
<body>
<script language="JavaScript">
<!--
nut="He said, \"My name is Jim!\"
";
document.write(nut);
//-->
</script>
</body>
</html>
[/b]
จากตัวอย่าง เป็นการกำหนดตัวแปรที่ชื่อ nut ให้แทนข้อความ He said,"My name is Jim" และ ขึ้นบรรทัดใหม่ด้วยคำสั่ง

การที่เราจะเขียนเครื่องหมาย " หรืออีกขระพิเศษตัวอื่นๆ เราจะต้องใส่ \ ไว้นำหน้าอักขระพิเศษนั้นๆด้วยน่ะครับ
บรรทัดต่อมาก็จะสั่งให้เขียนคำที่เก็ไว้ในตัวแปรที่ชื่อ nut ออกมา นั่นเอง
ผลที่ได้ก็คือการสั่งให้เว็บเพจเขียนคำว่า He said,"My name is Jim" นั่นเอง

นอกจากนนี้Javascriptยังมีสัญลักษณ์พิเศษอีก 2 ตัวคือ
1. \n แทนด้วยการขึ้นบรรทัดใหม่เช่นเดียวกับ
นั่นเอง
2. \t แทนการ tab นั่นเอง

• Function เปลี่ยนชนิดตัวแปร
JavaScript สามารถแปรงร่างให้ตัวแปรได้จริงไหมครับ ถ้าผมมีเลขสักตัว มันก็จะแปลี่ยนเป็น String ได้ ถ้าผมเอาไป + กับข้อความ แต่จากตารางที่แล้ว จะเห็นได้ว่า string "12.34" ซึ่งเป็นข้อความที่เป็นตัวเลข ไม่สามารถแปลงร่าง เป็นตัวเลขได้เลย เพราะ JavaScript เดาใจเราไม่ถูกว่าเมื่อไรที่จะให้มัน เป็น Float หรือ String ดังนั้นเราจึงต้องมี Function ในการแปลงครับ
JavaScript กำหนด Function มาให้ 3 ตัวครับคือ eval(),parseInt(), และ parseFloat()

eval() จะใช้ในการเปลี่ยน String ที่อยู่ในรูปสมการให้เป็นค่าของผลลัพธ์เช่น total=eval("432.1*10") Total ก็จะมีค่าเป็น 4321 และถ้าค่าของข้อความ เป็นค่าที่ไม่สามารถแปลงได้ เช่น testxyz eval() จะไม่ส่งใดใดค่ากลับมา ดังนั้น เราจะใช้ eval() ได้ก็ต้องแน่ใจว่าข้อมูลที่จะป้อนเข้า eval() จะไม่มีข้อมูลที่ทำให้เกิด error อยู่

parseInt() จะใช้เปลี่ยนข้อความเป็นเลขจำนวนเต็มแต่ไม่เหมือนกับ eval() ตรงที่ มันจะแปลงให้เฉพาะตัวเลขที่อยู่หน้าสุดของข้อมูลและไม่สนใจข้อมูลแปลกปลอมเลย เช่น parseInt("123xyz") ก็จะให้ค่าเป็น 123 และ parseInt("xyz") ก็จะให้ค่าเป็น 0

parseFloat() คล้ายๆ parseInt() ครับ แต่จะใช้กีบเลขที่เป็น Float

เหมือนเดิมครับ ดูจากตัวอย่างเพื่อง่ายต่อการเข้าใจครับ

<HTML>
<HEAD>
<TITLE>Using Explicit Conversion Functions</TITLE>
</HEAD>
<BODY>
<script LANGUAGE="JavaScript">
<!--
document.write(&#39;eval("12.34x10") = &#39;);
document.write(eval("12.34x10"));
document.write("
");
document.write(&#39;parseInt("0x10") = &#39;);
document.write(parseInt("0x10"));
document.write("
");
document.write(&#39;parseFloat("5.4321e6") = &#39;);
document.write(parseFloat("5.4321e6"));
// -->
</SCRIPT>
</BODY>
</HTML>
[/b]
ผลที่ได้จากการรันไฟล์นี้คือจะมีการเขียนออกทางหน้าจอว่า
12.34x10 = 123.4
0x10 = 0
5.4321e6 = 5432100

• Array
อาเรย์ คือ ตัวแปรชนิดเดียวกันที่มีหลายค่าเช่น การที่เรามีชื่อพนักงาน 3 คนก็สามารถเก็บไว้เป็น Array ได้ เช่น

<HTML>
<HEAD>
<TITLE>Using Arrays</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">Using Arrays</H1>
<script LANGUAGE="JavaScript"><!--
employee = new Array(3)
employee[0] = "Squall";
employee[1] = "Rinoa";
employee[2] = "Zell";
document.write(employee[0]+"
");
document.write(employee[1]+"
");
document.write(employee[2]);
// -->
</SCRIPT>
</BODY>
</HTML>
[/b]
จากโค้ดนี่เราจะกำหนดให้มีตัวแปรที่ชื่อ enployee โดยกำหนดเป็นตัวกแปรอาเรย์ 3 ที่โดยกำหนดที่ employee = new Array(3)
employee[0] = "Squall";
employee[1] = "Rinoa";
employee[2] = "Zell";
จาก 3 บรรทัดนี้คือการกำหนดค่าให้กับอาเรย์แต่ละตัว
และผลจากการรันโค้ดนี้ก็คือ จะมีการสั่งเขียนออกทางหน้าจอว่า
Squall
Rinoa
Zell

นอกจากนี้เรายังสามาถรกำหนดค่าให้อาเรย์ได้อีกวิธีคือ
employee = new Array(&#39;Squall&#39;,&#39;Rinoa&#39;,&#39;Zell&#39;)
xeonza999
25-10-2007, 05:06 PM
สุดยอดเลยครับ


พอดีเขียนscript มะค่อยเก่ง
akimoto11
29-10-2007, 10:33 AM
ขอบคุณคับ สุดยอดมากคับ
yutthapongm
29-10-2007, 10:54 AM
ขอบคุณคับ สุดยอดมากคับ
[/b]
อยากเก่งเขียนโปรแกรมครับ มีบทความดีๆให้อ่านอย่างนี้ดีมากเลยครับ
nichiezz
29-10-2007, 08:57 PM
-สามารถขึ้นต้นด้วยตัวอักษรใหญ่ได้ (A-Z) เช่น ROW,Row
-สามารถขึ้นต้นด้วยตัวอักษรเล็กได้(a-z) เช่น rOW,row
-สามารถขึ้นต้นด้วยอันเดอร์สกรอได้(_) เช่น _ROW,_row
[/b]

หมายความว่า ทั้ง 3 จะมีคำสั่งอย่างเดียวกันหรอค่ะ
h11rag1z4w4
30-10-2007, 07:40 PM
ขอบคุณมากครับ ไม่ต้องไปหาหนังสืออ่าน จะศึกษาให้มากๆ ขอบคุณมากจริงๆ :)
squallcope
30-10-2007, 11:52 PM
ไม่แน่ใจคำถามน่ะครับลองถามใหม่ดูน่ะ ที่สามอันที่พูดถึงคือการตั้งชื่อตัวแปรว่ามันสามารถขึ้นต้นด้วยตัวอักษรได้ และ _ ได้ น่ะครับ ขอโทษที่ไม่ได้เข้ามาอัพเดทน่ะครับ แต่ตอนนี้กะลังยุ่งเปิดเทอมใหม่อยู่ครับ ยุ่งมากเลย ยังไงอดใจรอน่ะ เดี๋ยวจะมีเทคนิคมาให้อีกน่ะครับ