More Related Content
Similar to Web Technology
Similar to Web Technology (20)
More from Yaowaluck Promdee
More from Yaowaluck Promdee (20)
Web Technology
- 1. Introduction To Technology Web Page 322431 Web Technology Computer Science KKU
- 2. Agenda Review Of • CSS • Json • Ajax • DOM • jQuery
- 3. Cascading Style Sheets:CSS • Separate format from content • Enforce consistency • Greatly simplify control & maintenance
- 4. Style Sheet 1. Inline Styles <Tag style="property:value;"> <p style="color:blue; font-family:Arial; font-weight:bold”>Message Here</p> 2. Internal Style Sheet <style type="text/css"> <!--selector {property1: value1; property2: value2}... --> </style>
- 5. External Style Sheet <link rel="stylesheet" type="text/css" href="URL ไฟล์.css"> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> Example
- 7. 1. Class Selector /* Class Attribute */ .topic {color:red; font-family:AngsanaUPC; font-weight:bold; text-align:center; } <div class="topic”>ชื่อเรื่อง</div> <p class="topic”>หัวขอ</p> 1. ชื่อ Class ตองนำหนาดวยเครื่องหมาย dot หรือ จุด ( . ) 2. ชื่อ Class หามขึ้นตนดวยตัวเลข เชน เขียน 18topic แบบนี้ไมได 3. ชื่อ Class หามมีการเวนวรรค เชน จะเขียนเปน topic 11abc แบบนี้ไมได 4. ชื่อ Class หามเปนภาษาไทย (ไมมีใครเขาตั้งชื่อแบบนี้กัน)
- 8. 2. Id Selector #chapter {color:red; font-weight:bold} <p id="chapter”>ขอความ</p> 3. TAG Selectors font{ font:16px Tahoma; color:red; } <body> <font>TAG Selectors</font> </body>
- 9. Java Script Object Notation : JSON เปนวิธีการที่ทำให JavaScript แลกเปลี่ยนขอมูลกับ Server ปจจุบัน JSON นิยมใชในเว็บแอปพลิเคชัน โดยเฉพาะ AJAX โดย JSON เปนฟอรแมตทางเลือกในการสงขอมูล นอกเหนือไปจาก XML ซึ่งนิยมใช กันอยูแตเดิม สาเหตุที่ JSON เริ่มไดรับความนิยมเปนเพราะกระชับและ เขาใจงายกวา XML สำหรับ Format ของรูปแบบคา JSON นั้นจะครอบดวยเครื่องหมาย { } ตัวอยางเชน { "name":Yaowaluck", "email":"ypromdee@gmail.com" }
- 10. สำหรับใน php สามารถแปลง JSON ดวย function ที่ชื่อวา json_encode() และแปลงกลับดวย json_decode() Java Script Object Notation : JSON JSON Code [{ "CustomerID":"C001", "Name":”Yaowaluck Promdee", "Email":”ypromdee@gmail.com", "CountryCode":"TH", "Budget":"1000000", "Used":”123456" }] <?php $arr[0][“customerID”]=“C001”; $arr[0][“Name”]=“Yaowaluck Promdee”; $arr[0][“Email”]=ypromdee@gmail.com; $arr[0][“CountryCode”]=“TH”;”1000000”; $arr[0][“Used”]=“123456”; echo json_encode($arr); ?>
- 11. Ajax Asynchronous JavaScript and XML
- 12. Ajax Asynchronous JavaScript and XML XHTML (หรือ HTML) และ CSS ใชในการแสดงผลลัพธและรูปแบบขอมูล ECMAScript เชนจาวาสคริปต ในการเขาถึง Document Object Model (DOM) เพื่อใชในการแสดงขอมูลที่มีการเปลี่ยนแปลงหรือโตตอบกับผูใช XMLHttpRequest ใชในการแลกเปลี่ยนขอมูล asynchronously กับเว็บเซิรฟเวอร XML ใชเปนรูปแบบขอมูลในการแลกเปลี่ยน ซึ่งรูปแบบอื่นก็สามารถใชไดเชนกันไมวา จะเปน HTML, JSON, EBML, หรือ เพลนเท็กซ <meta http-equiv="refresh" content="5;URL=url"> Ajax & HTML ศึกษาเพิ่มเติม http://www.scriptdd.com/webtip/ajax-lesson-1.html
- 13. คือ การจัดเอกสาร HTML ใหอยูในรูปแบบของ DOM Tree โดยนิยาม objects และ properties เพื่อใหโปรแกรมหรือสคริปต สามารถปรับเปลี่ยนโครงสราง, ขอมูล และ styles ของ HTML DOM ผาน methods ได DOM (Document Object Model) DOM แบงออกเปน 3 สวน 1. Core DOM – การจัดรูปแบบ DOM Tree สำหรับทุกๆ เอกสาร 2. XML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร XML 3. HTML DOM – การจัดรูปแบบ DOM Tree สำหรับเอกสาร HTML
- 14. เขียนผังโครงสรางแบบ tree เพื่อใชในการอธิบาย DOM DOM
- 15. jQuery jQuery นั้นเปน JavaScript Library ที่บรรจุเอา Function และ คำสั่งตางๆ • ความสามารถในการทำงานแบบ ajax • การสราง animation ไดแบบงายๆเลย ไมวาจะทำรูปใหเคลื่อนที่ หรือ DIV เชน เอา mouse จับ DIV ลากไปมา • ความสามารถในการ binds หรือการผูก หรือจับ function ที่เขาเขียนขึ้นให ทำงานรวมกับ function อื่นๆ • สามารถจัดการกับ css (style sheet) ลอง element นั้นๆได • คนหา element ที่เราตองการและจัดการ เพิ่มหรือลบ Attributes ที่เรา ตองการได • ทำ Effect ตางๆกับ Element ที่เราตองการ เชนการ hide DIV ที่เราตองการ • การดักเหตุการณตางๆ
- 16. <html> <head> <title>JavaScript and HTML Sample</title> <script> function init() { alert("Loaded!!"); } </script> </head> <body onLoad="init()"> </body> </html> jQuery Example $('#div').fadeIn(); $('body').fadeOut(); $(document).ready(function(){ });