19 สิงหาคม 2551

ตอนที่ 8 Hello World ของฉัน!!!

ตอนที่ 8 Hello World ของฉัน!!!

เอาหละครับ ลืม HelloWorld ต้นฉบับไปได้เลย เพราะมันมีคอมเม้นต์เต็มไปหมด
เราจะแก้ไขไฟล์ HelloWorld.html ขึ้นใหม่ทั้งหมดครับ จุดประสงค์คือ แก้ไขไฟล์ HelloWorld.html เพิ่มแสดงข้อความของเราเอง
และเตรียมการสำหรับการใช้งาน Ajax เบื้องต้น

1. เปิดไฟล์ HelloWorld.html เข้ามาแก้ไข ลบข้อมูลเดิมออกให้หมดแล้วใส่โค้ดนี้ลงไปครับ

<html>
<head>
<title>สวัสดีชาวโลก</title>
<link href="sample.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="AIRAliases.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

<body style="font-family: Tahoma">
<div id="testMooTools" >Hello MooTools</div>
<div id ="AjaxResult"></div>
</body>
</html>


2. Run project HelloWorld ว่าแสดงข้อความว่า Hello MooTools หรือไม่? ถ้าไม่แสดงก็ดูจาก console ว่าผิดพลาดตรงไหน
อธิบาย เพิ่มเติมในส่วนของ <body>ผมได้เพิ่ม tag <div> เข้ามาสองอัน โดยอันแรกกำหนด ให้มี id="testMooTools" ตรงนี้สำคัญนะครับ เราจะเอาไปกำหนดในไฟล์ css อีกที
แต่ตอนนี้เราคงจะยังไม่จัดการอะไร รู้เพียงว่ามันจะถูกเอาไปใช้ทำอะไรก็พอ ส่วน อีกตัวกำหนด id="AjaxResult" เอาไว้แสดงผลจากการเรียกใช้ Ajax ซึ่งเราจะกำหนดรูปแบบของมันผ่านทาง css เช่นเดียวกัน <div> ตัวที่สองอยากให้คุณได้จับตาดูมันไว้ครับ คิดว่าตอนนี้คงจะ Run โปรแกรมผ่านไปได้ด้วยดีนะครับ เราจะเพิ่มส่วนของ javascript เข้ามาอีก 2 ตัว

3. ให้เพิ่มคำสั่ง 2 คำสั่งไว้ระหว่างส่วนของ <head>และ</head>

<script src="lib/mootools/mootools.js" type="text/javascript"></script>
<script type=text/javascript>
function doAjax(url)
{
var url;
new Ajax(url,
{
method: 'post',
update: 'AjaxResult'
}
).request();
}
</script>


ส่วน ที่เพิ่มเข้ามา สองคำสั่งใน tag <script> ส่วนแรก เป็นคำสั่งให้ เพิ่มสคริป mootools.js เข้ามา และส่วนที่สองเป็นส่วนที่เรียกใช้ Ajax ของ mootools ทั้งนี้เพื่อความสะดวกผมสร้างฟังก็ชัน doAjax สำหรับการเรียกใช้งานอีกที โค้ดที่เสร็จเรียบร้อยแล้ว คือ

<html>
<head>
<title>สวัสดีชาวโลก</title>
<link href="sample.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="AIRAliases.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="lib/mootools/mootools.js" type="text/javascript"></script>
<script type=text/javascript>
function doAjax(url)
{
var url;
new Ajax(url,
{
method: 'post',
update: 'AjaxResult'
}
).request();
}
</script> </head>

<body style="font-family: Tahoma">
<div id="testMooTools" >Hello MooTools</div>
<div id ="AjaxResult"></div>
</body>
</html>


เพื่อ ความปลอดภัยว่าโปรแกรมของเราไม่มีอะไรผิดพลาด ให้ run project ดูความเรียบร้อยครับ ตอนนี้จะยังไม่เห็นผลการทำงานในส่วนที่เพิ่มเติมเข้ามา
ติดตามตอนต่อไปจะว่าด้วยเรื่องของ Ajax แบบพื้น ๆ
แสดงความคิดเห็น