Back
JS090401 - มาเรียน jQuery กันตอนที่ 1

Modified on 2009/04/30 11:28 by ninefyi Categorized as JavaScript
วันนี้เรามาลองทำความรู้จักกับ JavaScript Framework กันซักเจ้าหนึ่งที่เขานิยมนำมาใช้ในการจัดการ JavaScript แทนการเขียน JavaScript กันแบบตรงๆนะครับ ทำไมเราต้องใช้ JS Framework ทำไมเราไม่เขียนเอง ก็อันเนื่องมาจากหลายสาเหตุ เช่น ความเข้ากันกับ Web Browser ชนิดต่างๆ ซึ่งเราต้องมีการเช็คอยู่เสมอว่า JS ที่เราเขียนนั้น สามารถแสดงผลได้ดีใน FF (FireFox), (IE) Internet Explore, (SR) Safari หรือเปล่า แค่ ตย. นี้เราก็เห็นว่ามันอาจจะยุ่งอยากในการเขียน จึงเป็นสิ่งที่เรา่น่าจะหา Framework มาแทนดีกว่า ซึ่งในที่้นี้ผมก็เลือกที่จะใช้ jQuery เรามาลองดูกันนะครับ ว่า jQuery ทำไรได้บ้างนะครับ {BR}

ก่อนอื่น เรา้ต้องไปดาวโหลดไฟล์ jQuery จากเว็บไซด์ [http://www.jquery.com|jQuery หรือว่า ถ้าเราคิดว่าเราจะมีการใช้เว็บที่เราเขียนมีการเชื่อมต่ออินเตอร์เน็ตตลอดเวลาเราก็สามารถใช้วิธีการลิงค์ผ่าน Google API ได้เลยโดยไม่ต้องมาทำการดาวโหลด jQuery นะครับ {BR}

jQuery นั้นมีวิธีการเข้าถึงตัว Object ของ html ซึ่งอาจจะเรียกว่า DOM (Document Object Model) ได้โดยใช้สัญลักษณ์ $ แบ่งเป็นคร่าวๆ ได้ดังนี้{BR}

1. $('#ชื่อ id') เช่น $('textName'){BR}
2. $('.ชื่อ css class') เช่น $('.MyCss'){BR}
3. $('ชื่อ tag') เช่น $('body'){BR}

เริ่มแรกเราต้องทำการสร้างการเชื่อมต่อกับ Google API เพื่อจะดึง jQuery มาใช้งาน ในกรณีเป็นกรณีที่เว็บที่เราจะเขียนมีการเชื่อมต่ออินเตอร์เน็ตตลอดเวลานะครับ

{{{{&lt;script src="http://www.google.com/jsapi">&lt;/script&gt;
&lt;SCRIPT LANGUAGE="JavaScript"&gt;google.load("jquery", "1.3.2");&lt;/SCRIPT&gt;}}}}

หลังจากนั้นก็ทำการสร้าง ฟอร์มเพื่อมาทดสอบการใ้ช้งาน jQuery

{{{{	&lt;form id="pageForm" runat="server"&gt;
		&lt;div id="dvText" class="MyCSS"&gt;&lt;/div&gt;&lt;hr/&gt;
		Name:&nbsp;&gt;input type="type" id="tbText" name="tbText" /&gt;&lt;br/&gt;&lt;br/&gt;
		&lt;input type="button" id="bnClick" value="Show Me" /&gt;
	&lt;/form&gt;}}}}

หลังจากนั้นก็ลองใช้คำสั่งในการทดสอบ

{{{{&lt;SCRIPT LANGUAGE="JavaScript"&gt;
	$(document).ready(
		function(){
			$('#tbText').val('Hello');
			$('.MyCSS').css('display', 'none');
			// Controls with event handle
			$('#bnClick').click(
				function(){
					$('div').css('display', 'block');
					var text = $('#tbText').val();
					$('div').html('<b>Your text is ' + text +'....</b>');
				}
			);
		}
	);

	&lt;/SCRIPT&gt;}}}}

ฟังก์ชั่น ready ที่เห็นข้างบนเป็นฟังก์ชั่นที่ใช้คู่กับ document พอเขียนแล้วคือ $(document).ready() เป็นการตรวจสอบการทำงานว่า ได้มีการ load html object ต่างๆ ขึ้นมาบนหน้าเว็บเรียบร้อยแล้ว ก่อนที่จะมีการเรียก function() การทำงานภายในค่ำสั่ง function นั้นๆ เพื่อที่จะเป็นการตรวจสอบว่า บางที เรามีการเขียน JS เรียกไว้ แต่ว่าหน้าเว็บยังโหลดไม่เสร็จ มันก็จะฟ้องข้อผิดพลาดมาดังนั้น function มีประโยชน์มาก {BR}

ลองเอา code เต็มๆ มาดูกันนะครับ {BR}

{{{{

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
&lt;HTML>
 &lt;HEAD>
  &lt;TITLE>JQuery - Tutorial 1</TITLE>
  &lt;script src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
	&lt;SCRIPT LANGUAGE="JavaScript"&gt;google.load("jquery", "1.3.2");&lt;/SCRIPT&gt;
	&lt;SCRIPT LANGUAGE="JavaScript"&gt;
		$(document).ready(
			function(){
				$('#tbText').val('Hello');
				$('.MyCSS').css('display', 'none');
				// Controls with event handle
				$('#bnClick').click(
					function(){
						$('div').css('display', 'block');
						var text = $('#tbText').val();
						$('div').html('<b>Your text is ' + text +'....</b>');
					}
				);
			}
		);
	&lt;/SCRIPT&lt;
	&lt;style&gt;
		.MyCSS{
			text-decoration:underline;
		}
	&lt;/style&gt;
 &lt;/HEAD&gt;
&lt;BODY&gt;
	&lt;form id="pageForm" runat="server"&gt;
		&lt;div id="dvText" class="MyCSS"&gt;&lt;/div&gt;&lt;hr/&gt;
		Name:&nbsp;&gt;input type="type" id="tbText" name="tbText" /&gt;&lt;br/&gt;&lt;br/&gt;
		&lt;input type="button" id="bnClick" value="Show Me" /&gt;
	&lt;/form&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

}}}}
Meta Keywords:
Meta Description:
Change Comment:
ThaiSQL.COM Wiki and Forum

JS090401 - มาเรียน jQuery กันตอนที่ 1
