Link

ส่วนประกอบของ URLs

          Universal resource locator หรือ URLs เนี่ย เป็นมาตรฐานของ Address ต่างๆใน Internet เวลาคุณต้องการจะไปที่ไหน คุณก็ต้องพิมพ์ URLs ลงไปในช่อง Address ของ Browser ทีนี้ ก่อนที่เราจะศึกษา JavaScript เรามาศึกษารายละเอียดของการใช้ URLs กันก่อนดีไหมครับ

URLs ส่วนใหญ่จะอยู่ในรูปแบบนี้ครับ :
protocol//hostname[:port] path search hash 
protocol เป็นวิธีการในการขอการบริการใน Internet เช่น http:,ftp:,mailto: และ file: และคุณจะได้ศึกษา Protocol ของ JavaScript เพิ่มเติมในบทนี้ครับ hostname ก็คือชื่อเต็มของ host ที่มีเราติดต่อไปเช่น realdev.truehits.net portเป็นการกำหนดหมายเลข TCP port ที่จะใช้กับ Protocol ตัวอย่าง port ที่เรารู้จักดีก็เช่น port 80 ของ http: path คือ ไดเรกทอรีของข้อมูล วิธีเขียน slash จะใช้ตามแบบ UNIX เช่น /javascript/charpter11.php search เป็นส่วนที่ CGI ของ search engine ต่างๆเพิ่มให้เรา เพื่อใช้ส่งค่าตัวแปรของ CGI hash เป็นชื่อ URLs ที่ถูกกำหนดใน file ทำให้สามารถ links ไปยังจุดต่างๆในหน้าเดียวกันได้ (มักใช้กับ Webpage ยาวๆ) เครื่องหมายของ hash ก็คือ # เช่น #p2

โพรโตคอล javascript:

นอกจาก Protocols ทั่วไปแล้ว เบราเซอร์ที่สนับสนุน JavaScript ยังมีโพรโตคอล javascript: อีกตัวหนึ่ง ใช้สำหรับ run คำสั่ง javascript โดยไม่ต้องอาศัยเท็ก <script> แต่สามารถเรียกคำสั่งมาทำงานได้ทันที โดยการพิมพ์ลงไปในช่อง address หรือจะทำเป็น links ก็ได้ เช่น

ถ้าคุณพิมพ์ javascript:Date() ลงในช่อง address เบราเซอร์จะแสดงวันที่ และเวลาปัจจุบัน
ถ้าคุณพิมพ์ javascript:(4+4)*5 เบราเซอร์จะแสดงผลลัพธ์การคำนวณคือ 40
ถ้าคุณพิมพ์ javascript:"<H1>"+"What's up?"+"</H1>" บราเซอร์จะแสดงคำว่า "What's up?" ในขนาด H1

ถ้าคุณต้องการทำตัวลิงก์ แต่ไม่ต้องการลิงก์ไปไหน ก็อาจใช้คำสั่งนี้ครับ

<a href="javascript:void(0)">no taget links</a>

และนี่คือผลที่ได้ครับ เป็นตัวลิงก์ที่คลิกไปก็ไม่เกิดอะไรขึ้น

no taget links

Location Object

location จะให้ค่าต่างๆของ document ปัจจุบันที่สดงบน window และ location ไม่อนุญาติ ให้คุณ set ค่าต่างๆ ใน Properties (เป็น read-only)
การอ้างถึง location ให้มอง locatiion เป็น Property ของ document แบบนี้ครับ

document.location

Properties ของ location มีดังนี้ครับ 

	เป็นจุด links ของ URL (ถ้ามีนะ)
	แสดง hostname:port ของ URL
	hostname ของ URL
	URL เต็ม
	ส่วน pathname ของ URL
	ส่วน port ของ URL
	ส่วน protocol ของ URL
	ส่วน search ของ URL

location มี methods อยู่ 2 ตัวคือ reload() และ replace() ครับ
reload() ใช้ reload ข้อมูลจาก Webpage
replace() ใช้ load ข้อมูลจาก URL ที่กำหนด ตัวอย่างการใช้ครับ
ตัวอย่างการใช้ครับ

Link Object

Link ก็คือ ภาพหรือ ข้อความที่ click แล้วจะพาคุณไปโผล่อีกที่หนึ่ง Propertiesต่างๆของ link ก็จะเป็นข้อมูลของเป้าหมายที่คุณจะไป Properties ต่างๆจึงเหมือนกับ location เปี๊ยบเลยครับ ต่างกันแค่ location เป็นข้อมูลของ หน้าปัจจุบัน แต่ link เป็นข้อมูลของเป้าหมายเท่านั้นเองครับ

ในการใช้ link คุณควรกำหนดชื่อ link เอาไว้ด้วยเพื่อให้อ่างถึงได้ง่ายเช่น document.LinkToSanook

links มี Event 3 ตัวครับ : onclick onmouseover onmouseout คุณคงรู้จักใน บท Event แล้วนะครับ นอกจากนี้ยังใช้ method click() ในการทำให้เกิด event onclick ของ links ได้อีกด้วย

The Link() Method

link เนี่ย อาจจะสร้างจากเมทธอด link() ได้ด้วย ถ้าผมเขียน code นี้

<script language="JavaScript"> jslink="realdev".link("http://realdev.truehits.net") document.write(jslinks) </script>

จะแสดงผลเหมือนกับ

<A herf="http://realdev.truehits.net">realdev</A>

History Object

History ใช้เก็บเส้นทางที่ผู้ใช้ visit มา History เป็น Property ของ window ครับ History ไม่มี Event แต่มี Properties อยู่ 1 ตัว คือ history.length มันจะบอกคุณว่า History list ของคุณมีกี่รายการ

History มี Method อยู่ 3 ตัวครับ น่าสนใจด้วย

back() ใช้กลับไปหน้าที่เพิ่งผ่านมา (เหมือนกดปุ่ม back ใน toolbar)
next() ใช้กลับไปหน้าที่เพิ่ง Back มา (เหมือนกดปุ่ม next ใน toolbar)
go(n) ใช้กระโดดไปหน้าต่างๆใน history
ถ้า n<0 คือ back ไป n หน้า ถ้า n> 0 คือ next

ตอนนี้คุณรู้จัก URLs,Location,links และ History แล้วนะครับ สำหรับสคริปต์ตัวอย่างลองหาดูในหน้า Free Script นะครับ