ข้อมูลองค์ความรู้โดย
กฤษณี โภโต
ตำแหน่ง ผู้จัดการ

บทที่ 11 Links

ประเภททางด้าน IT หลัก :   Development & Integration
ประเภททางด้าน IT ย่อย :   Java
  ลงข้อมูลเมื่อ 17:25:24 21/05/2013
  Page View (2157) แบ่งปัน

บทที่ 11 Links

ความสามารถในการกระโดด จาก Webpage หน้านึงไปสู่อีกหน้านึง เป็นเอกลักษณ์ของ Web ในการ click เพียงครั้งเดียวที่ตัว links เราก็สามารเดินทางไปเที่ยวรอบโลกได้แล้วครับ

          ในบทนี้คุณจะได้เรียนรู้ว่าจะใช้ JavaScript เพิ่มความสามารถให้กับ links ได้อย่างไร จะใช้ location load ข้อมูลจาก URLs ที่กำหนดได้อย่างไร จะใส่ JavaScript ลงใน links ของเอกสารได้อย่างไร จะใช้ history เก็บข้อมูลของ URLs ที่ผู้ใช้ผ่านมาได้อย่างไร

ส่วนประกอบของ 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>
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 นะครับ


ที่มาจาก : http://realdev.truehits.net



องค์ความรู้ที่มีผู้อ่านมากสุด
บทที่ 3 Operator in JavaScript
บทที่ 3 Operator in JavaScript

โดย... กฤษณี โภโต

สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )
สร้าง BarCode จาก Java โดยใช้ lib ของ ZXing ( Open Source )

โดย... กฤษณี โภโต

บทที่ 13 Math Function
ในการเขียนโปรแกรม มีบางครั้งที่เราต้องอาศัยการคำนวณทางคณิตศาสตร์ JavaScript ก็มีคุณสมบัติในการคำนวณทางคณิตศาสตร์กะเค้าเหมือนกันครับ

โดย... กฤษณี โภโต

บทที่ 2 เรื่องของตัวแปร JavaScript
JavaScript ก็เหมือนภาษาที่ใช้เขียนโปรแกรมทั่วไป ตรงที่มีตัวแปรสำหรับเก็บค่า จากส่วนหนึ่งของ Program แล้วก็เอาไปใช้ในส่วนอื่นๆได้ ตัวแปรก็คือ ชื่อที่เรากำหนดขึ้นมาสำหรับเก็บค่า อย่างเช่น เราอาจกำหนดตัวแปรชื่อว่า imageName เพื่อไปเก็บชื่อไฟล์ภาพๆหนึ่ง หรือ อาจกำหนดให้ amount ไปเก็บจำนวนเต็ม เป็นต้น

โดย... กฤษณี โภโต

บทที่ 9 Document Object
Document object คืออะไร Document Object หมายถึงเอกสาร HTML ที่เป็นเวบเพจที่กำลังแสดงอยู่ในหน้าต่างหลัก เป็น Propertiy ของ window (window.document) Document Object เปรียบเสมือนหน้าหนังสือ หากคุณลองเปิดหนังสือดูจะเห็น หมายเลขหน้า และ หมายเลขบท ในทาง OOP หมายเลขหน้าและหมายเลขบทเหล่านั้นก็เป็น Properties สำหรับบอกคุณสมบัติ ของหน้านั้น ว่าอยู่ในหน้าที่เท่าไหร่ บทใด นอกจากนี้ ในหน้าหนังสือยังมีเนื้อหาสาระที่ประกอบอยู่ภายใน ไม่ว่าจะเป็นเนื้อหา หัวข้อ ย่อหน้า รูปภาพ ตาราง ฯลฯ สิ่งเหล่านี้ก็นับเป็น Properties ของหน้าหนังสือเช่นกันครับ

โดย... กฤษณี โภโต

บทที่ 10 Form Java
คุณคงเคยพบกับ Banner ข้างบนนี้มาก่อนนะครับ เจ้านี่แหละ มันเกิดจากการนำ object form ไปประยุกต์ ใช้ กับ setTimeout ในบทที่ผ่านมา และ นอกจากนี้แล้ว Form ยังมีคุณสมบัติน่าสนใจอีกมาก ทั้ง Button Checkbox radio ฯลฯ รวมทั้ง text ที่อยู่ข้างบนนี้ด้วยครับ

โดย... กฤษณี โภโต

บทที่ 14 String
ไม่ว่าจะเขียนโปรแกรมด้วยภาษาใด การจัดการกับ String ก็เป็นความสามารถที่ขาดไม่ได้ ใน JavaScript ก็เช่นกัน

โดย... กฤษณี โภโต

บทที่ 6 Event Java
Event คืออะไร

โดย... กฤษณี โภโต

บทที่ 12 Images
บทที่ 12 Images

โดย... กฤษณี โภโต

บทที่ 7 OOP for JavaScript
Object เป็นความสามารถที่สำคัญอย่างหนึ่งของ JavaScript เรียกได้ว่าเป็นพระเอกของเรื่องเลยเชียวนะ หน้านี้ผมจะแนะนำให้รู้จักกับ Object ก่อนว่าเป็นอย่างไรนะครับ

โดย... กฤษณี โภโต