517322-Lecture: Dynamic HTML

12/01/2013 12:56 AM Study 717 views

 

Dynamic HTML

DHTML หรือ Dynamic HTML ไม่ใช่ภาษาโปรแกรมแต่เป็นการนำ JavaScript, VBScript, CSS หรือ DOM มาใช่เพิ่มลูกเล่นให้กับเว็บไซต์ โดยรวมเทคโนโลยีที่ใช้ในการสร้างและแสดงผลเว็บไซต์ไว้ด้วยกันเช่น Markup Language(HTML), Client-Side Script Language(JavaScript), Presentation Language(CSS) และ DOM

  • เว็บไซต์สามารถทำงานบนเครื่อง Client โดยไม่ต้องติดต่อกับ Server
  • Code ที่แสดงเป็นภาษา HTML
  • จะทำงานไม่ได้ถ้าหาก browser ไม่สนับสนุน

Dynamic HTML vs. Dynamic Web Page

   Dynamic HTML และ Dynamic Web Page นั้นมีความแตกต่างกันซึ่ง Dynamic Web Page เป็นเว็บไซต์ที่มีการเปลี่ยนแปลงข้อมูลและการแสดงผลตลอดเวลา ผู้ใช้แต่ละคนที่เข้ามาชมอาจจะเห็นการแสดงผลที่แตกต่างกัน ข้อมูลหรือเหตุการณ์ต่างๆ หน้าเว็บแตกต่างกันขึ้นกับสิทธิหรือหน้าที่ของผู้ใช้ การทำงานของเว็บไซต์มีการติดต่อกับฐานข้อมูลหรือเครื่อง serverสามารถเพิ่มลูกเล่นการใช้งานโดยแทรก Javascript, VBScript ซึ่งถูกสร้างขึ้นโดยภาษา PHP, Perl, ASP, JSP และมีการประมวลผลต่างๆ อยู่บนเครื่อง server ก่อนส่งผลลัพธ์ที่ได้ยังเครื่อง client

Scripting Language

  • ใช้ในการสร้างเว็บไซต์แบบ Dynamic
  • Client-Side Scripts เป็นการทำงานบน browser ของเครื่องผู้ใช้ เช่น JavaScript, VBScript
  • Dynamic HTML เป็นการทำงานแบบ Client-Side
  • Server-Side Script เป็นการทำงานบเครื่อง server ผู้ให้บริการ เช่น PHP, Perl, Python, JSP

DOM

DOM หรือ Document Object Model คือการที่เรามองวัตถุต่างๆ ในหน้าเว็บออกเป็นวัตถุ เพื่อให้เราสามารถเรียกวัตถุเหล่านั้นมาใช้งานได้

HTML DOM

  • พื้นฐานที่ควรรู้ก่อนศึกษา HTML DOM
    • HTML
    • JavaScript
    • CSS
  • What’s the HTML DOM
    • เป็นภาษามาตรฐานของ HTML
    • ไม่ขึ้นต่อภาษาและแฟลตฟอร์ม (platform)
    • ถูกกำหนดโดย W3C
  • HTML DOM จะประกาศวัตถุ (object) หรือคุณสมบัติ (properties) ที่เป็นส่วนประกอบทั้งหมดของ HTML และ วิธีการ (Method) ในการเข้าถึง
  • HTML DOM เป็นมาตรฐานวิธีการที่จะรับค่า เปลี่ยนแปลง เพิ่มหรือลบ ส่วนประกอบใน HTML

DOM Node

htmltree

http://www.w3schools.com/htmldom/dom_nodes.asp

 

  • HTML DOM สามารถมองในรูปแบบเอกสารของ HTML ซึ่งเรียกว่าโครงสร้างต้นไม้หรือ Node Tree
  • จากโครงสร้างจะเห็นลำดับของ object ในที่อยู่ใน document เมื่อเราแยก object ออกเป็นชั้นๆ แล้วจะทำให้เราเข้าถึงแต่ละ object  นั้นง่ายขึ้น
  • เราสามารถดูการประกาศ HTML DOM เมื่อเว็บไซต์โหลดเสร็จแล้วจากโค๊ดภาษา HTML ในเว็บไซต์
  • เราจะเรียกใช้ HTML DOM เมื่อไหร่?
    • เมื่อต้องการแทรกคำสั่ง เช่น css หรือ javascript ให้กับ object
    • เนื่องจากในเว็บไซต์นั้นมีจำนวน object จำนวนมากหากเราไม่ว่า object ไหนอยู่เหนือกว่ากันหรือไม่ทราบว่า object นั้นใช้กำหนด element ไหน ก็ไม่สามารถที่จะใช้ css มากำหนดค่า object ให้แสดงผลได้ถูกต้อง

Node Parents, Children, Siblings

navigate

http://www.w3schools.com/htmldom/dom_nodes.asp

 

    • ในส่วนนี้อธิบายเกี่ยวกับความสัมพันธ์ของโครงสร้างรูปภาพข้างต้นระหว่าง Node Parents, Children และ Siblings
    • การประกาศ object ออกเป็นชั้นๆ จะเรียกชื่อทีต่างกันอย่างไป เช่น
      • ทุกโหนดต้องมี parent แค่หนึ่งเดียว ยกเว้น root
      • หนึ่งโหนดสามารถมีหลาย children
      • children ที่มี parent เดี่ยวกันเรียกว่า siblings (เรียกตาม ตปท. ว่าลูกพี่ลูกน้อง แต่ของไทยอาจเรียกว่า พี่น้องพ่อแม่เดียวกันครับ)
    • จากรูปภาพด้านบนได้ว่า
      • <html> เรียกว่า root ซึ่งเป็น Top Node
      • <head> เป็น parent ของ <title>, <body> เป็น parent ของ <a> และ <h1>
      • กลับกัน <title> เป็น child ของ <head>, <a> และ <h1> เป็น child ของ <body>
      • <a> เป็น silbings กับ <h1>

DOM Method

  • DOM HTML สามารถแทรกข้อมูลโดยใช้ JavaScript หรือภาษาอื่นเช่น VBScript
  • Method เป็นการบอกถึงสิ่งที่สามารถทำได้ของ object นั้นๆ เช่นเพิ่มหรือเปลี่ยนแปลงข้อมูล
  • Property เป็นค่าที่สามารถ get หรือ set เช่น ชื่อหรือเนื้อหา

HTML DOM & JavaScript

  • JavaScript และ DOM เป็นของคู่กันหรือสามารถเรียกใช้งานร่วมกัน
  • ไม่จำเป็นว่าต้องใช้ JavaScript กับ DOM สามารถใช้ตัวอื่นได้เช่น VB Script
  • JavaScript นั้นไม่ปลอดภัย เพราะจะประกาศให้ผู้ใช้ทราบว่ามีคำสั่งการทำงานอะไรบ้าง
  • การใช้ JavaScript จะเป็นคำสั่งง่ายๆ ในเว็บไซต์มีลูกเล่นมากขึ้นเช่น pop-up เปลี่ยนสีพื้นอัติโนมัติ ตัวหนังสือวิ่งตามเม้าส์ ฯลฯ

DOM Event

  • HTML DOM ใช้ JavaScript ในการตอบสนองเหตุการณ์ที่เกิดขึ้นเช่น
    • ผู้ใช้คลิ๊กเม้าส์
    • เว็บเพจมีการโหลด
    • เมื่อวางเม้าส์เหนือรูป
    • เมื่อกรอกค่าในช่อง
    • เมื่อกดคีร์บอร์ด
    • อื่นๆ

อ่านเพิ่มเติม คลิ๊ก

, , , , , , , , , , , , , , , ,