Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts
March 28, 2011
December 1, 2010
เริ่มต้นใช้งาน JQuery
จากที่ได้เคยเล่าไปแล้วคร่าวๆ เรื่อง JQuery ในหัวข้อมารู้จัก jQuery กันในคราวก่อน ผมจะขอมาสืบสานต่อโดยจะมาแนะนำวิธีเริ่มต้นใช้งาน Step By Step เพื่อเป็นประโยชน์กับผู้ที่สนใจนะครับ
หากจะคิดให้ดูง่ายก็คิดซะว่า JQuery ก็เป็น Javascript Library ตัวหนึ่งที่ช่วยให้เราเขียนโปรแกรมได้ง่ายโดยไม่ต้องเขียน Hard Code (เขียน code เองทุกอย่างเองส่วนตัวเรียก code เถือก) เองให้มากมาย ซึ่งผมจะสรุปการทำ Hello JQuery มาเป็นขั้นๆ ดังนี้
หากจะคิดให้ดูง่ายก็คิดซะว่า JQuery ก็เป็น Javascript Library ตัวหนึ่งที่ช่วยให้เราเขียนโปรแกรมได้ง่ายโดยไม่ต้องเขียน Hard Code (เขียน code เองทุกอย่างเองส่วนตัวเรียก code เถือก) เองให้มากมาย ซึ่งผมจะสรุปการทำ Hello JQuery มาเป็นขั้นๆ ดังนี้
- เราต้องโหลด JQuery มาจาก http://jquery.com/ โดยคลิกที่ปุ่ม Download
Production คือ code ถูกบีบอัดโดยเอาช่องว่างระหว่าง code ที่ไม่จำเป็นออก
Development หากเปิดดู code จะสามารถอ่าน code ได้ง่าย (เพราะมีการขึ้นบรรทัดใหม่ เว้นวรรค และ tabให้ดู code ได้สะดวกขึ้น) - จากนั้นเราจะเห็น Code เถือก คลิกขวาเลือก Save as... แล้วเลือกที่ Save ไฟล์ไปไว้ที่เดียวกับโปรแกรมของเรา โดยใช้ชื่อเดิมที่เค้าตั้งมาให้ (อย่าเปลี่ยนชื่อไฟล์ถ้าเป็นผู้เริ่มต้น)
- จากนั้นเราได้ Library มาแล้วเราก็มาดูวีธี Load มาใช้งานกันดัง Code
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
(src นั้นจำเป็นต้องอ้างที่ตั้งของ JQuery ให้ถูกนะครับแล้วแต่ว่าเราเอาไปวางไว้ตรงไหน) - แล้วเราก็มาสร้างไฟล์ HelloJQuery.html แล้วใส่ Code ข้างล่างลงไป
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="jquery-1.4.4.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("a").click(function(){ alert("Hello JQuery"); }); }); </script> </head> <body> <a href="http://jquery.com/">jQuery</a> </body> </html> - ทดลองรันโดยคลิกที่ link เลยครับ
November 25, 2010
การ Redirect / Refresh web page
การ redirect สามารถทำได้ด้วยการใช้ meta tag ของ html code สามารถกำหนดช่วงเวลาและ URL ที่ต้องการ Redirect ไปได้ ใน attribute CONTENT มีรูปแบบดังนี้
CONTENT="[ช่วงเวลาให้รอก่อนทำการ Redirect หน่วยเป็นวินาที];URL=[ใส่ URL ที่ต้องการ Link ไปหาที่นี่]"
หากต้องการให้ web page ของเรา Refresh หน้าทุกๆ 1 นาทีก็สามารถเซตได้ตามตัวอย่าง code ข้างล่าง code ต้องวางอยู่ระหว่าง tag <head> กับ </head> นะครับ
Code :
การ Redirect ด้วย Javascript เพียงแค่ใส่ URL ให้ถูกต้องหน้า web ของเราก็จะ Link ไปสู่ URL ที่เรากำหนดเอง
Code :
ยังมีรูปแบบ code javascript การ Redirect URL อื่นอีกซึ่งให้ผลการทำงานเหมือนกัน
Code :
CONTENT="[ช่วงเวลาให้รอก่อนทำการ Redirect หน่วยเป็นวินาที];URL=[ใส่ URL ที่ต้องการ Link ไปหาที่นี่]"
หากต้องการให้ web page ของเรา Refresh หน้าทุกๆ 1 นาทีก็สามารถเซตได้ตามตัวอย่าง code ข้างล่าง code ต้องวางอยู่ระหว่าง tag <head> กับ </head> นะครับ
Code :
| <META HTTP-EQUIV="Refresh" CONTENT="60;URL=http://www.yourname.com"> |
การ Redirect ด้วย Javascript เพียงแค่ใส่ URL ให้ถูกต้องหน้า web ของเราก็จะ Link ไปสู่ URL ที่เรากำหนดเอง
Code :
| <html> <head> <script langquage='javascript'> window.location="http://www.yourdomain.com/"; </script> </head></html> |
ยังมีรูปแบบ code javascript การ Redirect URL อื่นอีกซึ่งให้ผลการทำงานเหมือนกัน
Code :
| <html> <head> <script langquage='javascript'> window.location.href = "http://www.yourdomain.com/"; </script></head></html> |
November 23, 2010
มารู้จัก jQuery กัน
jQuery คือไลบรารีของโค้ดจาวาสคริปต์ ซึ่งเป็นส่วนหนึ่งของการสร้างเว็บไซต์ jQuery ช่วยให้เราเรียกเขียนหรือ ใช้งานจาวาสคริปต์ และ Ajax ให้ง่ายขึ้น jQuery เปิดตัวครั้งแรกในงานบาร์แคมป์นิวยอร์ก โดย จอห์น เรซิก (John Resig) เมื่อ 14 มกราคม พ.ศ. 2549 ตัวโค้ดของ jQuery มีลิขสิทธิ์และสัญญาอนุญาตแบบ open source โดยใช้สัญญาอนุญาตของ GFDL และ MIT License
ความสามารถของ Jquery
* ใช้งาน DOM element โดยการเขียนไม่จำเป็นต้องยึดติดกับ browser
* จัดการกับ Event เพิ่ม Event ลงในหน้าเว็บตามแต่ใจต้องการ
* การจัดการ CSS สามารถเพิ่ม ลบ class ,id ของ CSS
* Effects and animations ลูกเล่นบนหน้าเว็บ
* Ajax ช่วยให้เขียน Ajax ได้ง่ายขึ้นประหยัดเว็บเวลาในการเขียน Ajax และทำให้โค้ดสั้นลง
* สามารถสืบทอดคุณสมบัติของ Jquery ไปใช้งานต่อได้
* สามารถทำ UI ใหม่ บน Browser ได้
* Utilities
ใครที่นำ Jquery ไปใช้งานได้บ้าง
* Web Programmer
* Web design
* Jquery สามารถใช้งาน ร่วมกับ server-side scripting languages ได้ทุกภาษา ไม่ว่าจะเป็น PHP,JSP,Perl,ASP หรือ .net
* ใช้งานกับ html,CSS ได้เป็นอย่างดี รวมทั้ง xml ด้วย
เว็บไซต์ของ Jquery
http://www.jquery.com/
Code :
| <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $('#idDiv').toggle(1000); }); }); </script> <style type="text/css"> #idDiv{ width: 200px; height: 100px; border: solid 1px black; background-color:LightGrey; text-align:center; display:none; } </style> <div id="idDiv">JQuery Example</div> <button id="btn">Click</button> |
JQuery Example
Subscribe to:
Posts (Atom)