web technology
DESCRIPTION
introduction to web technologyTRANSCRIPT
Introduction To Technology Web Page
322431 Web
Technology Computer
Science KKU
Agenda
Review Of • CSS • Json • Ajax • DOM • jQuery
Cascading Style Sheets:CSS
• Separate format from content • Enforce consistency • Greatly simplify control &
maintenance
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>
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
Selector
Example 1. Class Selector 2. Id Selector 3. Tag Selector
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 หามเปนภาษาไทย (ไมมีใครเขาตั้งชื่อแบบนี้กัน)
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>
Java Script Object Notation : JSON
เปนวิธีการที่ทำให JavaScript แลกเปลี่ยนขอมูลกับ Server
ปจจุบัน JSON นิยมใชในเว็บแอปพลิเคชัน โดยเฉพาะ AJAX โดย JSON เปนฟอรแมตทางเลือกในการสงขอมูล นอกเหนือไปจาก XML ซึ่งนิยมใชกันอยูแตเดิม สาเหตุที่ JSON เริ่มไดรับความนิยมเปนเพราะกระชับและ
เขาใจงายกวา XML
สำหรับ Format ของรูปแบบคา JSON นั้นจะครอบดวยเครื่องหมาย { } ตัวอยางเชน
{ "name":Yaowaluck", "email":"[email protected]" }
สำหรับใน php สามารถแปลง JSON ดวย function ที่ชื่อวา json_encode() และแปลงกลับดวย json_decode()
Java Script Object Notation : JSON
JSON Code [{ "CustomerID":"C001", "Name":”Yaowaluck Promdee", "Email":”[email protected]", "CountryCode":"TH", "Budget":"1000000", "Used":”123456" }]
<?php $arr[0][“customerID”]=“C001”; $arr[0][“Name”]=“Yaowaluck Promdee”; $arr[0][“Email”][email protected]; $arr[0][“CountryCode”]=“TH”;”1000000”; $arr[0][“Used”]=“123456”; echo json_encode($arr); ?>
Ajax Asynchronous JavaScript and XML
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
คือ การจัดเอกสาร 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
เขียนผังโครงสรางแบบ tree เพื่อใชในการอธิบาย DOM
DOM
jQuery jQuery นั้นเปน JavaScript Library ที่บรรจุเอา Function และ คำสั่งตางๆ
• ความสามารถในการทำงานแบบ ajax • การสราง animation ไดแบบงายๆเลย ไมวาจะทำรูปใหเคลื่อนที่ หรือ DIV เชน
เอา mouse จับ DIV ลากไปมา • ความสามารถในการ binds หรือการผูก หรือจับ function ที่เขาเขียนขึ้นให
ทำงานรวมกับ function อื่นๆ
• สามารถจัดการกับ css (style sheet) ลอง element นั้นๆได • คนหา element ที่เราตองการและจัดการ เพิ่มหรือลบ Attributes ที่เรา
ตองการได • ทำ Effect ตางๆกับ Element ที่เราตองการ เชนการ hide DIV ที่เราตองการ
• การดักเหตุการณตางๆ
<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(){ });