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

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

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

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


งานนำเสนอเรื่อง: "ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้าย ภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนา เว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การ นำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง."— ใบสำเนางานนำเสนอ:

1

2 ภาษาจาวาสคริปต์ คือ ภาษาโปรแกรมคล้าย ภาษาซี ถูกใช้ร่วมกับภาษาเอชทีเอ็มแอลในการพัฒนา เว็บเพจ ประมวลผลในเครื่องของผู้ใช้ ช่วยให้การ นำเสนอเป็นแบบโต้ตอบกับผู้ใช้ได้ในระดับหนึ่ง ภาษานี้ มีชื่อเดิมว่า LiveScript ถูกพัฒนาโดย Netscape Navigator เพื่อช่วยให้เว็บเพจสามารถแสดงเนื้อหา ที่มี การเปลี่ยนแปลงได้ ตามเงื่อนไข หรือสภาพแวดล้อมที่ แตกต่างกัน หรือโต้ตอบกับผู้ใช้ได้มากขึ้น เพราะภาษา HTML ที่เป็นภาษาพื้นฐานของเว็บเพจ ทำได้เพียง แสดงข้อมูลแบบคงที่ (Static Display)

3  สร้างเมนูที่สามารถตอบสนองต่อการเอา mouse ไปชี้ได้  สร้างเครื่องคิดเลข ปฏิทิน เกม ในเวบเพจ  เปิด, ปิด, เคลื่อนย้ายตำแหน่งของ window  ทำตัวอักษรวิ่งแบบต่างๆ  ตรวจสอบความถูกต้องของแบบฟอร์มที่ผู้ใช้กรอก ก่อน ส่งข้อมูลไปยัง Server  และอื่นๆ อีกมากมายที่ไม่ต้องติดต่อกับ Server

4 ….. ….. หรือ document.write("Hello World!"); แสดงข้อความ Hello World! ที่หน้าเว็บ Hello World! document.write เป็นคำสั่งที่ใช้เขียนผลลัพธ์บนหน้าเว็บ

5 แทรกไว้ใน tag Head แทรกไว้ใน tag Body แทรกไว้ทั้งใน tag Head และ tag Body

6  บันทึกไฟล์ JavaScript ให้มีนามสกุล.js  เขียนส่วนของ tag script ให้ src อ้างอิงไปที่ไฟล์ ที่ บันทึกไว้ ดังนี้

7  การใส่หมายเหตุบรรทัดเดียว ให้ใส่เครื่องหมาย // ไว้ หน้าบรรทัดนั้น  การใส่หมายเหตุหลายบรรทัด เริ่มต้นด้วย /* และปิด ท้ายด้วย */

8 ประกาศตัวแปร x และ carname ประกาศตัวแปร x และ carname พร้อมกำหนดค่าเริ่มต้น ตัวแปรจะถูกประกาศอัตโนมัติ เมื่อมีการกำหนดค่า โดยไม่ต้องประกาศ var

9 Given that y=5

10 Given that x=10 and y=5

11 Given that x=5

12 Given that x=6 and y=3

13 var x, y, z ; x = 5 y = 2; z = x+y ; document.write(x + "+" + y +"= " + z); ผลลัพธ์

14 รูปแบบ ตัวอย่าง

15 รูปแบบ ตัวอย่าง

16 รูปแบบ

17

18 for (ประกาศตัวแปรใหม่พร้อมกำหนดค่าเริ่มต้น;เงื่อนไขการหยุด;เพิ่มค่าให้ตัวแปร) { คำสั่งต่างๆ ที่จะให้ทำซ้ำ } for (ประกาศตัวแปรใหม่พร้อมกำหนดค่าเริ่มต้น;เงื่อนไขการหยุด;เพิ่มค่าให้ตัวแปร) { คำสั่งต่างๆ ที่จะให้ทำซ้ำ }

19 while (condition) { ชุดคำสั่ง } while (condition) { ชุดคำสั่ง }

20 var num, round ; num = 2; round = 12 for(i=1;i<= round;i++){ document.write(num + " * " + i +" = " +num*i + " "); } ผลลัพธ์

21 function คือโปรแกรมย่อยที่ทำงานอย่างใดอย่าง หนึ่ง ถูกสร้างขึ้นแยกออกจากโปรแกรมหลักเพื่อให้สา มารเรียกใช้ได้อย่างสะดวก การสร้าง function ของ JavaScript มีรูปแบบดังนี้ function ชื่อฟังก์ชัน(พารามิเตอร์1,พารามิเตอร์2,..){ คำสั่งต่าง ๆ return ค่าที่ส่งออกไป }

22 function add(a,b){ result = a + b; return result; } var x, y, z ; x = 5 y = 2; z = add(x,y) ; document.write(x + "+" + y +"= " + z);

23 Alert Box Confirm Box Prompt Box alert("ข้อความ"); confirm("ข้อความ"); prompt("ข้อความ","ค่าที่ต้องการกรอกเริ่มต้น");

24 var num, round ; var ans=confirm("คุณต้องการแสดงสูตรคูณหรือไม่"); if(ans==true){ num = prompt("ใส่แม่สูตรคูณ"); round = prompt("ใส่จำนวนรอบ"); for(i=1;i<= round;i++){ document.write(num + " * " + i +" = " +num*i + " "); } alert("แสดงสูตรคูณเรียบร้อยแล้ว"); }else{ alert("คุณไม่ต้องการแสดงสูตรคูณ"); }

25 Event ก็คือ Action ต่างๆที่เกิดขึ้นกับส่วนต่างๆ ในเวบเพจ เช่น เมื่อเราเอา mouse ไปทับตัว link ก็จะ เกิด event onmouseover ที่ตัว link พอเอา mouse ออก ก็จะเกิด event onmouseout พอเรา click ก็จะเกิด event onclick เป็นต้น การทำงานของ event ก็จะมีอยู่ 2 ขั้นตอน คือ 1. ตรวจสอบการเกิด event ที่เรากำหนดไว้ 2. เมื่อเกิด event ขึ้น ก็จะไปเรียก function หรือคำสั่ง ต่างๆมาทำงาน

26

27 เราจะใส่ event ลงไปใน tag ของ html เลย เช่น เวลาจะทำตัว link เราใช้ tag ถ้าจะทำให้มันมี ข้อความ Alert ขึ้นเวลาเอา mouse ไป over เขียนโค้ด ได้ดังนี้ ทดสอบ onmouseover

28  การอ้างอิงข้อมูลที่อยู่บนฟอร์ม ทำได้โดยใช้ Object document จากนั้นตามด้วย. และชื่อ form. ชื่อของ Object ต่าง ๆ บนฟอร์ม เช่น  ถ้าต้องการเปลี่ยนข้อความที่รับมาจาก TextField ให้เป็น ตัวเลข จะใช้ function eval() เช่น document.ชื่อฟอร์ม.ชื่อTextField.value num = eval(document.form1.txtName.value)

29 function showData(){ alert(document.form1.txtName.value); } อ้างถึงเอกสาร HTML ในหน้าปัจจุบัน ชื่อ form ชื่อ textfield ค่าที่เก็บอยู่

30 เลขตัวที่ 1 เลขตัวที่ 2 function add(){ a = eval(document.form1.txtNum1.value); b = eval(document.form1.txtNum2.value); c = a+b; alert(c); }

31  เตรียมภาพ 3 ภาพ ◦ ภาพหลัก fruit.jpg ◦ ภาพส้ม orange.jpg ◦ ภาพองุ่น grape.jpg ส้ม องุ่น

32 function writeText(text){ document.getElementById("txtdata").innerHTML= text; } วางเมาส์ที่ภาพเพื่อแสดงข้อมูล เตรียมภาพ 2 ภาพ - ภาพส้ม orange.jpg - ภาพองุ่น grape.jpg เตรียมภาพ 2 ภาพ - ภาพส้ม orange.jpg - ภาพองุ่น grape.jpg ตั้งชื่อตำแหน่งที่ต้องการวางข้อความ โดยจะใช้ Property id ระบุ ชื่อของ id ที่จะเอาข้อความไปวาง

33 eval( ตัวแปร ) แปลงค่าสตริงใด ๆ ให้เป็นตัวเลข และคืนค่านั้น ให้กับตัวแปรที่กำหนด แต่ถ้ามีการป้อนข้อมูลตัวอักษรใด ๆ ของสตริงที่ไม่ สามารถแปลงเป็นตัวเลขคำนวณได้ ฟังก์ชันนี้จะ แสดงข้อความเตือน “..is not defined” parseFloat( ตัวแปร ) แปลงค่าสตริงใด ๆ ให้เป็นตัวเลขจำนวนจริง แล้ว คืนค่านั้นกับตัวแปรที่กำหนดแต่ถ้ามีการป้อนข้อมูล ตัวอักษรใด ๆ ของสตริงที่ไม่สามารถแปลงเป็น ตัวเลขได้ ฟังก์ชันจะคืนค่า “NaN” parseInt( ตัวแปร, เลข ฐาน ) แปลงค่าสตริงใด ๆ เป็นเลขจำนวนเต็ม แล้วคืนค่า นั้นให้กับตัวแปรที่กำหนด ถ้าไม่ระบุเลขฐานค่าตัว เลขที่รับจะเป็นเลขฐาน 10 แต่ถ้ามีการป้อนข้อมูล ตัวอักษรใด ๆ ของสตริงที่ไม่สามารถแปลงเป็น ตัวเลขได้ ฟังก์ชันจะคืนค่า “NaN”


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

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


Ads by Google