ตอนที่ 8 Hello World ของฉัน!!!
ตอนที่ 8 Hello World ของฉัน!!!
เอาหละครับ ลืม HelloWorld ต้นฉบับไปได้เลย เพราะมันมีคอมเม้นต์เต็มไปหมด
เราจะแก้ไขไฟล์ HelloWorld.html ขึ้นใหม่ทั้งหมดครับ จุดประสงค์คือ แก้ไขไฟล์ HelloWorld.html เพิ่มแสดงข้อความของเราเอง
และเตรียมการสำหรับการใช้งาน Ajax เบื้องต้น
1. เปิดไฟล์ HelloWorld.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>
ส่วน ที่เพิ่มเข้ามา สองคำสั่งใน tag <script> ส่วนแรก เป็นคำสั่งให้ เพิ่มสคริป mootools.js เข้ามา และส่วนที่สองเป็นส่วนที่เรียกใช้ Ajax ของ mootools ทั้งนี้เพื่อความสะดวกผมสร้างฟังก็ชัน doAjax สำหรับการเรียกใช้งานอีกที โค้ดที่เสร็จเรียบร้อยแล้ว คือ
เพื่อ ความปลอดภัยว่าโปรแกรมของเราไม่มีอะไรผิดพลาด ให้ run project ดูความเรียบร้อยครับ ตอนนี้จะยังไม่เห็นผลการทำงานในส่วนที่เพิ่มเติมเข้ามา
ติดตามตอนต่อไปจะว่าด้วยเรื่องของ Ajax แบบพื้น ๆ
เอาหละครับ ลืม 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 แบบพื้น ๆ
ความคิดเห็น