เก่งภาษาจาวาสคริปต์: บทเรียนที่ 7 ส่วนประกอบ

บทเรียนที่ 7 ส่วนประกอบ(หรือคุณสมบัติ)

มาถึงตอนนี้ผมจะเริ่มให้คุณเข้าใจถึงลำดับชั้นของตัวถูกกระทำในจาวาสคริป ซึ่งเป็นส่วนสำคัญสำหรับภาษานี้ เราจึงได้ทำเรื่องนี้รวม 2 บท คือเกริ่นนำในบทนี้ และเต็มรูปแบบในบทถัดไปครับ

ตอนนี้เรารู้แล้วว่า มีตัวถูกกระทำ อย่าง document และวิธีกระทำ อย่าง write ซึ่งกระทำต่อตัวถูกกระทำ(ชื่อก็บอกอยู่แล้วครับ) ในบทเรียนที่ 6 เราเรียนรู้การสร้าง ตัวแทนของตัวถูกกระทำ หรือตัวแปร ตอนนี้ผมจะพาคุณเข้าสู่เนื้อหาของส่วนประกอบ ซึ่งเราพูดไปบ้างแล้วในบทที่ 3 ซึ่งใช้ส่วนประกอบคือ สีพื้นหลัง หรือ bgColor ซึ่งเป็นส่วนประกอบหนึ่งของตัวถูกกระทำที่ชื่อว่า document มันคงจะยากที่จะนำเอาส่วนประกอบทั้งหมดในจาวาสคริปมาอธิบายกันตรงนี้ ผมจึงนำส่วนประกอบบางตัวซึ่งนิยมใช้กันมากมาอธิบายครับ

สคริป...

จริงๆแล้วเนื้อหาข้างล่างมีไม่มากหรอกครับ เพียงแต่มันอยู่ในรูปแบบที่ซ้ำกันซะเป็นส่วนใหญ่ ชื่อตัวแปรถูกกำหนดขึ้นมาเพื่อเป็นตัวแทนของ... ตัวถูกกระทำ.ส่วนประกอบ (หรือในภาษาอังกฤษว่า object.property) แล้วจึงนำตัวแปรมาเข้าคำสั่ง document.write( ) เพื่อแสดงออกมาบนหน้าจอ ...โปรดทำความเข้าใจครับว่า หัวข้อต่อไปนี้ที่เป็นตัวหนาจะบอกถึงสคริปแต่ละอัน และผมจะไม่แสดงผลของสคริปในนี้นะครับ ให้ลอง copy ลง notepad แล้ว save เป็น HTML และเปิดออกมาดู

ส่วนประกอบของตัวถูกกระทำที่มีชื่อว่า...navigator

<SCRIPT type="text/javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("โปรแกรมที่คุณกำลังใช้อยู่นี้คือ <B>" +an+
"</B>, เวอร์ชั่น " +av+ ".<BR>ซึ่งมีชื่อโค้ด(code name)ว่า "
+acn+ ", และชื่อที่ใช้สื่อสารกับเซิร์ฟเวอร์คือ " +ua+ "." );
</SCRIPT>

(ลอง copy ไปใส่ใน notepad แล้ว save และเปิดออกมาดูนะครับ)

(อย่าเพิ่งตกใจ)..มาแยกโครงสร้างของจาวาสคริปนี้กันครับ

ผู้ทำเว็บหลายคนชอบใช้ส่วนประกอบนี้ครับ ซึ่งจะช่วยบอกลักษณะต่างๆของ Browser ที่ใช้อยู่ ตัวถูกกระทำนี้คือ navigator และส่วนประกอบ(เวลาเอาไปใช้ให้ระวังตัวพิมพ์ใหญ่เล็กด้วยครับ)ต่างๆจำแนกได้ดังนี้ครับ

· ส่วนประกอบแรก ของสคริปนี้คือ appName คือชื่อของ Browser ที่ใช้อยู่

· appVersion คือตัวเลขเวอร์ชั่นของ Browser ที่ใช้อยู่พร้อมทั้งระบุ platform ที่ใช้ (เช่น Windows XP , Window 98 หรืออะไรประมาณนี้ครับ)

· appCodeName คือชื่อโค้ด(code name)ของ Browser

· userAgent คือชื่อที่ใช้ติดต่อสื่อสารกับเซิร์ฟเวอร์(คือคอมฯที่เก็บเว็บไซท์เอาไว้ครับ ทำหน้าที่เหมือนเด็กเสิร์ฟ แต่อันนี้เด็กเสิร์ฟอยู่คนละที่กับเราครับ เสิร์ฟ(ส่ง)เว็บมาให้เราอ่าน ถ้าเป็นเว็บฝรั่ง เด็กเสิร์ฟ(เซิร์ฟเวอร์)นี้ก็อยู่ในเมืองฝรั่ง อะไรประมาณนั้นครับ)

· สังเกต <B> และ </B> ในสคริปมั้ยครับ นั่นคือโค้ด HTML ที่ทำให้ตัวอักษรภายในโค้ดนี้กลายเป็นตัวหนาเวลาแสดงผล และเนื่องจากตัวอักษรที่เราจะทำให้เป็นตัวหนา อยู่ในรูปของตัวแปร ซึ่งเราไม่อาจวาง <B> และ </B> ไปไว้ข้างๆตัวแปรได้ จึงต้องวางไว้ในเครื่องหมายคำพูดทั้ง 2 ฟากไงครับ นี่ก็เป็นอีกเทคนิคหนึ่งที่คุณควรจำไว้ใช้ครับ

การทราบเวอร์ชั่นของ Browser เป็นสิ่งที่สำคัญ บทต่อๆไปเมื่อเราเรียนเรื่องการสร้างประโยค IF (if แปลว่า...ถ้า) เลขเวอร์ชั่น Browser ของแต่เครื่องอาจแตกต่างกันไป เราสามารถกำหนดได้ว่า ถ้าเวอร์ชั่นเป็นเลขนี้ เราก็จะทำแบบนี้ ถ้าเวอร์ชั่นเป็นเลขนั้น เราจะทำแบบนั้น ...(ยังไม่จำเป็นที่ต้องเข้าใจตอนนี้ครับ)

ส่วนประกอบของตัวถูกกระทำที่มีชื่อว่า...document

<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("พื้นหลังของหน้านี้มีสี <B>" +bgc+ "</B>")
document.write("<BR> ตัวหนังสือของหน้านี้มีสี <B>" +fgc+ "</B>")
document.write("<BR> link ของหน้านี้มีสี <B>" +lc+ "</B>")
document.write("<BR> link ที่ยังไม่ผ่านการคลิ๊กของหน้านี้มีสี <B>" +al+ "</B>")
document.write("<BR> link ที่ผ่านการคลิ๊กแล้วของหน้านี้มีสี <B>" +vlc+ "</B>")
document.write("<BR> URL(ที่อยู่) ของหน้านี้คือ <B>" +url+ "</B>")
document.write("<BR>หน้าที่คุณอยู่ก่อนที่จะมาถึงหน้านี้คือ <B>" +ref+ "</B>")
document.write("<BR>หัวข้อของหน้านี้คือ <B>" +t+ "</B>")
document.write("<BR> เนื้อหา(document)นี้ถูกปรับปรุงล่าสุดเมื่อ : <B>" +lm+ "</B>")
</SCRIPT>

(เหมือนเดิมครับ...ลอง copy(หรือฝึกพิมพ์เอง) save แล้วเปิดดู)

มาแยกโครงสร้างของจาวาสคริปยาวๆนี้กันครับ

ส่วนประกอบของ document เป็นที่นิยมใช้กันมาก ในที่นี้ผมยกตัวอย่างทั้งหมด 9 ตัว จริงๆแล้วมีอยู่ทั้งหมด 13 ตัว แต่อีก 4 ตัวที่ไม่ได้ยกมาด้วยนั้น เพราะว่าตอนนี้มันยังเกินความสามารถของคุณอยู่ ผมจะอธิบาย 9 ส่วนประกอบ ดังต่อไปนี้ครับ

· bgColor คือสีพื้นหลัง ซึ่งอยู่ในโค้ด 6 หลัก

· fgColor คือสีตัวอักษร ซึ่งอยู่ในโค้ด 6 หลัก

· linkColor คือสีของ link ซึ่งอยู่ในโค้ด 6 หลัก

· alinkColor คือสีของ active link ซึ่งอยู่ในโค้ด 6 หลัก

· location คือที่อยู่(URL)ของหน้านั้น

· referrer คือที่อยู่ของหน้าที่ผู้ใช้เคยเปิดก่อนจะมาสู่หน้านี้...หากไม่มี จะให้ช่องว่างกลับมา

· title คือหัวข้อของหน้านี้(ข้อความที่ปรากฎอยู่บนแถบสีน้ำเงิน ที่อยู่บนสุดของหน้าต่าง...หากไม่มี จะให้ช่องว่างกลับมา

· lastModified คือวันที่หน้านี้ถูกปรับปรุงครั้งล่าสุด(จริงๆแล้วคือวันที่เว็บถูกส่งเข้าเซิร์ฟเวอร์หรือถูก save ลงฮาร์ดดิสครั้งล่าสุด)

· cookie (ไม่ได้แสดงตัวอย่างไว้) คือข้อมูล cookie(ไม่ใช่ขนมปังกรอบนะครับ) ของผู้ใช้ในรูปแบบของไฟล์ตัวอักษร

· anchors (ไม่ได้แสดงตัวอย่างไว้) คือจำนวน link HREF ทั้งหน้านั้น

· links (ไม่ได้แสดงตัวอย่างไว้) คือค่าตัวเลขสำหรับแต่ละ link

โค้ดสี 6 หลักที่ผมว่านั้นจะอยู่ในรูป #คคคคคค (ตัว ค แทนเลขหรือตัวอักษรภาษาอังกฤษ ของโค้ดแต่ละหลัก) ด้านล่างเป็นตัวอย่างของโค้ดสี ซึ่งเวลาที่คุณนำไปใช้ ไม่จำเป็นต้องใส่เครื่องหมาย # ไว้หน้าโค้ดนะครับ...(ใส่ก็ได้ จะให้ผลเหมือนกันครับ) แต่จะใช้ชื่อของสีที่อยู่เหนือโค้ด ก็ได้เช่นกันครับ ยกตัวอย่างเช่นสีแรกสุดนั้น การใช้ document.bgColor="F0F8FF" จะให้ผลเช่นเดียวกันกับ document.bgColor="Aliceblue" คุณสามารถนำโค้ดสีไปใช้กับ HTML ได้เช่นกันครับ...(ชื่อสีข้างล่างบางตัวอาจมองไม่เห็น แต่ไม่มีปัญหาหรอกครับ ใช้การลากเมาส์คลุม แล้ว copy ไปใช้ได้เลย)

Aliceblue F0F8FF	Antiquewhite FAEBD7	Aqua 00FFFF
Aquamarine 7FFFD4	Azure F0FFFF	Beige F5F5DC
Bisque FFE4C4	Black 000000	Blanchedalmond FFEBCD
Blue 0000FF	Blueviolet 8A2BE2	Brown A52A2A
Burlywood DEB887	Cadetblue 5F9EA0	Chartreuse 7FFF00
Chocolate D2691E	Coral FF7F50	Cornflowerblue 6495ED
Cornsilk FFF8DC	Crimson DC143C	Cyan 00FFFF
Darkblue 00008B	Darkcyan 008B8B	Darkgoldenrod B8860B
Darkgray A9A9A9	Darkgreen 006400	Darkkhaki BDB76B
Darkmagenta 8B008B	Darkolivegreen 556B2F	Darkorange FF8C00
Darkorchid 9932CC	Darkred 8B0000	Darksalmon E9967A
Darkseagreen 8FBC8F	Darkslateblue 483D8B	Darkslategray 2F4F4F
Darkturquoise 00CED1	Darkviolet 9400D3	deeppink FF1493
Deepskyblue 00BFFF	Dimgray 696969	Dodgerblue 1E90FF
Firebrick B22222	Floralwhite FFFAF0	Forestgreen 228B22
Fuchsia FF00FF	Gainsboro DCDCDC	Ghostwhite F8F8FF
Gold FFD700	Goldenrod DAA520	Gray 808080
Green 008000	Greenyellow ADFF2F	Honeydew F0FFF0
Hotpink FF69B4	Indianred CD5C5C	Indigo 4B0082
Ivory FFFFF0	Khaki F0E68C	Lavender E6E6FA
Lavenderblush FFF0F5	Lawngreen 7CFC00	Lemonchiffon FFFACD
Lightblue ADD8E6	Lightcoral F08080	Lightcyan E0FFFF
Lightgoldenrodyellow FAFAD2	Lightgreen 90EE90	Lightgrey D3D3D3
Lightpink FFB6C1	Lightsalmon FFA07A	Lightseagreen 20B2AA
Lightskyblue 87CEFA	Lightslategray 778899	Lightsteelblue B0C4DE
Lightyellow FFFFE0	Lime 00FF00	Limegreen 32CD32
Linen FAF0E6	Magenta FF00FF	Maroon 800000
Mediumauqamarine 66CDAA	Mediumblue 0000CD	Mediumorchid BA55D3
Mediumpurple 9370D8	Mediumseagreen 3CB371	Mediumslateblue 7B68EE
Mediumspringgreen 00FA9A	Mediumturquoise 48D1CC	Mediumvioletred C71585
Midnightblue 191970	Mintcream F5FFFA	Mistyrose FFE4E1
Moccasin FFE4B5	Navajowhite FFDEAD	Navy 000080
Oldlace FDF5E6	Olive 808000	Olivedrab 688E23
Orange FFA500	Orangered FF4500	Orchid DA70D6
Palegoldenrod EEE8AA	Palegreen 98FB98	Paleturquoise AFEEEE
Palevioletred D87093	Papayawhip FFEFD5	Peachpuff FFDAB9
Peru CD853F	Pink FFC0CB	Plum DDA0DD
Powderblue B0E0E6	Purple 800080	Red FF0000
Rosybrown BC8F8F	Royalblue 4169E1	Saddlebrown 8B4513
Salmon FA8072	Sandybrown F4A460	Seagreen 2E8B57
Seashell FFF5EE	Sienna A0522D	Silver C0C0C0
Skyblue 87CEEB	Slateblue 6A5ACD	Slategray 708090
Snow FFFAFA	Springgreen 00FF7F	Steelblue 4682B4
Tan D2B48C	Teal 008080	Thistle D8BFD8
Tomato FF6347	Turquoise 40E0D0	Violet EE82EE
Wheat F5DEB3	White FFFFFF	Whitesmoke F5F5F5
Yellow FFFF00	YellowGreen 9ACD32

และอีกครั้งครับ ถ้าคุณนำคำสั่ง IF มาใช้ เราอาจจะกำหนดได้ว่า หากเป็นตอนกลางคืน เราจะให้พื้นหลังมีสีดำและมีข้อความเป็นสีขาว หากเป็นตอนกลางวัน เราจะให้พื้นหลังมีสีฟ้าและตัวหนังสือสีเขียว เพื่อแสดงถึงกลางวัน ซึ่งนี่ก็เป็นตัวอย่างนึง ของการนำส่วนประกอบของ document มาใช้ครับ

ส่วนประกอบของตัวถูกกระทำที่มีชื่อว่า...history

<SCRIPT LANGUAGE="javascript">
var h = history.length
document.write("คุณผ่านหน้าเว็บมาทั้งหมด " +h+ " หน้า ก่อนที่จะมาถึงหน้านี้")
</script>

ผลของสคริปนี้...

คุณผ่านหน้าเว็บมาทั้งหมด 2 หน้า ก่อนที่จะมาถึงหน้านี้คุณผ่านหน้าเว็บมาทั้งหมด 8 หน้า ก่อนที่จะมาถึงหน้านี้

มาแยกโครงสร้างของจาวาสคริปนี้กันครับ

สคริปนี้ก็เป็นอีกอันที่นิยมใช้กันมาก หลายคนคงรู้จักคำว่า History ที่มีอยู่ในอินเตอร์เน็ท...หากใครที่ยังไม่รู้จัก ผมจะอธิบายให้ครับ.. History(แปลว่า ประวัติศาสตร์) ในความหมายที่ใช้กับ Browser คือรายชื่อเว็บไซท์ที่แล้วๆมา ที่ผู้ใช้ได้ผ่านเข้าไปเยี่ยมชม...History ทำให้คุณสามารถ กดปุ่ม Back แล้วย้อนกลับสู่หน้าที่คุณเคยชม

ในสคริปนี้ history เป็นตัวถูกระทำครับ คำว่า lenght(แปลว่า ความยาว) เป็นส่วนประกอบของ history ผลของสคริปนี้จึงเรียกจำนวน(หรือความยาว) ของหน้า(เว็บไซท์) ที่คุณเคยผ่านมาทั้งหมด นับตั้งแต่เปิด Browser ขึ้นมา หรือพูดอีกอย่างหนึ่งว่า คุณกำลังให้สคริปเรียกจำนวนหน้าทั้งหมดที่อยู่ใน history folder (ของผมอยู่ใน C:/WINDOWS/History )

ส่วนประกอบของตัวถูกกระทำที่มีชื่อว่า...location

! เดี๋ยวครับ ลองสังเกต \"port\" ที่อยู่ในสคริป...ผมเคยบอกใช่มั้ยครับว่า ห้ามใส่เครื่องหมายคำพูด( " )ซ้ำเข้าไปภายในเครื่องหมายคำพูดอีก ให้ใช้เครื่องหมายขีดเดียว( ' )แทน แต่จริงๆแล้ว มีวิธีที่ใส่ได้โดยไม่ Error ครับ.. โดยใช้ เครื่องหมายทับกลับด้าน ( \ ) วางไว้หน้าเครื่องหมายคำพูดแบบนี้... \" ...เท่านี้คุณก็สามารถแสดงผล " ในหน้าจอ ด้วยจาวาสคริปได้ครับ

ผลของสคริปนี้...

ชื่อที่อยู่ของหน้านี้และ "port" ที่คุณใช้อยู่คือ www.freewebs.com
ชื่อที่อยู่ของหน้านี้(อย่างเดียว) คือ www.freewebs.com

มาแยกโครงสร้างของจาวาสคริปนี้กันครับ

ตัวถูกกระทำในสคริปนี้คือ location(แปลเป็นไทยว่า...ที่อยู่) ส่วนประกอบมี 2 ตัว คือ host กับ hostname ซึ่งทั้งสองทำหน้าที่เหมือนกันคือ ให้ค่า URL ทั้งในรูปของ เลข IP และข้อความ ซึ่งขึ้นอยู่กับว่าเซิร์ฟเวอร์ใช้แบบไหน แต่ว่ามีข้อแตกต่างอยู่ที่...

· location.host จะให้ค่า URL และค่า port(ผมไม่เข้าใจตัวนี้ครับ ขออภัยท่านผู้อ่าน ผู้รู้ช่วยบอกที) ที่ผู้ใช้กำลังใช้อยู่

· location.hostname จะให้เพียงค่า URL

หากผลลัพท์ของทั้งสองคำสั่งออกมาเหมือนกัน แสดงว่า เซิร์ฟเวอร์ที่คุณกำลังใช้อยู่ ไม่ได้กำหนดให้คุณใช้ port เฉพาะจุด ในทางเทคนิคจะเรียก คุณสมบัติของ port ตอนนี้ว่า null (ใครไม่เข้าใจจุดนี้ ไม่เป็นไรนะครับ เพราะผมแปลมา ก็ไม่เข้าใจง่ะ) แต่สองคำสั่งนี้จะไม่ให้ค่าอะไรเลย หากเปิดจากฮาร์ดดิส เพราะว่าข้อมูลที่เอามานั้น มาจากเซิร์ฟเวอร์ครับ

แบบฝึกหัด

เอาล่ะ คนเก่ง ...จงทำสิ่งนี้ : เลือกคำสั่งที่อยู่ในรูปของ ตัวถูกกระทำ.ส่วนประกอบ มาหนึ่งตัว ที่สามารถนำมาเขียนจาวาสคริป(เท่านั้น ห้ามใช้ HTML แม้แต่นิดเดียว)ที่สร้าง link ไปยังเว็บไซท์ http://www.google.co.th และไม่ว่าคุณจะใช้ ตัวถูกกระทำ.ส่วนประกอบ ตัวใด โปรดแทนค่ามันด้วยตัวแปรด้วย

ข้อแนะนำ : การสร้าง link แบบง่ายๆด้วย HTML ทำได้ด้วยโค้ดต่อไปนี้...
<A HREF="http://www.google.co.th">เว็บไซท์กูเกิ้ล</a>

และผลที่ได้จากโค้ด HTML นี้คือ....... เว็บไซท์กูเกิ้ล

เก่งภาษาจาวาสคริปต์

บทเรียนที่ 7 ส่วนประกอบ

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

ทำอินโทรเอฟเฟค ในมือถือ

ฟรีวีดีโอแบ็คกราว สำหรับทำคลิป

ค้นหาบล็อกนี้

เนื้อหาบล็อก

คลังบทความ

สถิติ