งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

อ. วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง.

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "อ. วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง."— ใบสำเนางานนำเสนอ:

1 อ. วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง

2  ย่อมาจาก Asynchronous JavaScript and XML  คือ การพัฒนาโปรแกรมโดยใช้ JavaScript, XML และ PHP มาประยุกต์เข้าด้วยกัน  1 หน้าเว็บที่ใช้ Ajax จะมี HTML, PHP และ JavaScript ( ใช้นามสกุลเป็น.html เป็นส่วน ใหญ่ )  ทำให้หน้าเว็บเพ็จสามารถทำงานได้รวดเร็วขึ้น

3  เติมข้อความต่อท้ายคำอัตโนมัติ  ระบบแชทบนหน้าเว็บไซต์  ตอบรับการกรอกข้อมูลโดยไม่ต้องเปิดหน้าเว็บ ใหม่  ป็อปอัพขยายรายละเอียดให้เห็นชัดเจนขึ้น  แผนที่ออนไลน์  แสดงภาพขณะโหลดข้อมูล

4 1. ผู้ใช้ร้องขอข้อมูล 2. Ajax ประมวลผล และส่งข้อมูล 3. เว็บเซิร์ฟเวอร์ประมวลผล PHP และเรียกใช้ Database Server 4. Database Server ดึงข้อมูล 5. Web Server ส่งผลลัพธ์ 6. Ajax รับค่าไป แสดงผล

5  OOP ย่อจาก Object Oriented Programming  เป็นรูปแบบการเขียนโปรแกรมคอมพิวเตอร์ ที่ให้ ความสำคัญกับ “ วัตถุ ” ซึ่งสามารถนำมาประกอบกันและ นำมาทำงานรวมกันได้ Object

6  รูปแบบ คำสั่ง JavaScript ตามต้องการ  Example document.write(‘Hello world’);

7  การประกาศตัวแปร ◦ รูปแบบ var ชื่อตัวแปร = “ ค่าของตัวแปร ”; ◦ Example var a = “Hello World”;  การแสดงข้อความบนจอภาพ ◦ รูปแบบ document.write(‘ ข้อความ ’); ◦ Example document.write(‘ ทดสอบ ’+a);

8  คำสั่งหน้าต่างแจ้งเตือน ◦ รุปแบบ alert(“ ข้อความแจ้งเตือน ”); ◦ Example alert(“ เกิดข้อผิดพลาด ”);  การประกาศตัวแปรแบบ Object ◦ รูปแบบ var ชื่อตัวแปร = new ชื่อออบเจ็กซ์ (“ ค่าตัวแปร 1, ค่าตัวแปร 2,…”); ◦ Example var a = new date();

9  ประโยคเงื่อนไข ◦ รูปแบบ if( เงื่อนไข ) { ชุดคำสั่ง } else if( เงื่อนไข ) { ชุดคำสั่ง } else { ชุดคำสั่ง }  ประโยคเงื่อนไข ◦ ตัวอย่าง if(document.getElementById(‘user’).v alue.length==0) { alert(“ กรุณากรอก Username”); } else if(document.getElementById(‘pass’).v alue.length==0) { alert(“ กรุณากรอก Password”); } else { alert(“ ระบบจะนำข้อมูลที่กรอกไป ตรวจสอบ ”); }

10  วนซ้ำ ◦ รูปแบบ for( ประกาศตัวแปร ; จุดสิ้นสุกการวนซ้ำ ; การเปลี่ยนแปลค่าตัวแปร ) ◦ Example for(y=1; y<=dimention; y++) { for(x=1;x<=dimention; x++) { var strRow=document.write(‘(’+x+‘,’+y+‘)’); strOut=strRow; } strOut=document.write(‘ ’); }

11  การสร้างฟังก์ชั่นไว้ใช้งาน ◦ รูปแบบ function ชื่อฟังก์ชั่น ( พารามิเตอร์ 1, พารามิเตอร์ 2,…) { คำสั่ง ; การคืนค่าของฟังก์ชั่น ( มีหรือไม่ก็ได้ ); } ◦ Example function ShowCode() { document.write(user); } การเรียกใช้ฟังก์ชั่น ชื่อฟังก์ชั่น ( อาร์กิวเมนต์ 1, อาร์กิวเมนต์ 2,...); ShowCode();

12  เนื่องจากคำสั่ง Ajax ยาวเกินไป  Ajax Framework ช่วยให้คำสั่งง่ายขึ้น  โดยมีไฟล์รวบรวมฟังก์ชั่นสำเร็จรูปไว้แล้ว  ตัวที่นำมาใช้มากที่สุดคือ Prototype โดยรวบรวมคำสั่ง เกี่ยวกับฟอร์มและไฟล์เว็บเซิร์ฟเวอร์ไว้  สามารถ download ได้จาก  เมื่อดาวน์โหลดมาแล้ว จะได้ file ชื่อ prototype.js แล้ว นำไปไว้ในเว็บของเรา  การเรียกใช้งาน

13  เป็นฟังก์ชั่นย่อของ document.getElementById ให้สั้นลง  รูปแบบ var ตัวแปร = $(“ ค่าของ ID”);  ตัวอย่าง var a = $(“name”);

14  การรับค่าจากฟอร์มต่างๆ โดยสามารถรับแบบ Array ได้  รูปแบบ var ชื่อตัวแปรอาร์เรย์ = Form.getInputs(“ ค่า id ฟอร์ม ”); var ชื่อตัวแปร = Form.getInputs(“ ค่า id ฟอร์ม ”,“ ค่า id ของ ฟอร์มรับข้อมูล ”);  ตัวอย่าง var arrays = Form.getInputs(“form1”); var a = Form.getInputs(“form1”,“name”);

15  การรับค่าจากฟอร์มต่างๆ โดยสามารถรับ แบบตัวแปรเดียว โดยค่าที่ได้จะเป็น id1= ค่าที่ 1 & id2= ค่าที่ 2 & idn= ค่าที่ n  รูปแบบ var ชื่อตัวแปร = Form.serialize(“ ค่า id ฟอร์ม ”);  ตัวอย่าง var a = Form.serialize(“form1”);

16  เป็นการนำไฟล์อื่นมาแสดงในส่วนที่กำหนดให้ต้องการแสดง  มีรูปแบบคือ function ชื่อฟังก์ชั่น ( ตัวแปรส่งค่าไปไฟล์อื่น, ตัวแปรส่งตำแหน่งที่ต้องการ แสดงข้อมูล ) { var ตัวแปรที่ส่งไปไฟล์อื่น = “ ชื่อตัวแปร =”+ ค่าของตัวแปร ; var ตัวแปรชื่อไฟล์ = “ ชื่อไฟล์ ”; var ชื่อออบเจ็กต์ = new Ajax.Updater( ตัวแปรส่งตำแหน่งที่ ต้องการแสดงข้อมูล, ตัวแปรชื่อไฟล์, {method:“ วิธีส่ง ข้อมูล ”,parameters: ตัวแปรที่ส่งไปไฟล์อื่น }); }  เช่น function Result(Div) { var params = Form.serialize("form1"); var url = "checkuser.php"; var Addnew = new Ajax.Updater(Div, url, {method:"post", parameters:params}); }

17   function Result(Div){  var params = Form.serialize("form1");  var url = "checkuser.php";  var Addnew = new Ajax.Updater(Div,url, {method:"post", parameters:params});  }   Untitled Document   Username   Password   Login ตลอดไป 

18

19

20 ตัวอย่าง JQuery

21


ดาวน์โหลด ppt อ. วชิระ หล่อประดิษฐ์ ระบบสารสนเทศทางคอมพิวเตอร์ มหาวิทยาลัยเทคโนโลยีราชมงคลล้านนา ลำปาง.

งานนำเสนอที่คล้ายกัน


Ads by Google