Javascripts.

งานนำเสนอเรื่อง: "Javascripts."— ใบสำเนางานนำเสนอ:

1 Javascripts

2 Javascript is Client-Side Scripting.
Javascript is not Java. Javascript is programming code that can be inserted into HTML pages. Javascript is Dynamic-typing Language. Javascript is OO(Object-Oriented).

3 สามารถแทรกข้อความลงไปในเว็บเพจได้
สามารถตอบโต้กับเหตุการณ์ต่างๆได้ สามารถเปลี่ยนแปลงส่วนต่างๆของเว็บเพจได้ ใช้ตรวจสอบความถูกต้องของการกรอกข้อมูลในแบบฟอร์มได้ ใช้ตรวจสอบชนิดของเว็บบราวเซอร์ได้ ฯลฯ

4 การเปิด – ปิด การใช้งาน
<script></script> <script language=“Javascript”></script> <script type=“text/Javascript”></script> <script src=“myscript.js”></script>

5 Variables การประกาศตัวแปร var var_name = value;

6 กฎการตั้งชื่อตัวแปร และ ฟังก์ชัน
เริ่มต้นด้วยตัวอักษร หรือเครื่องหมาย Underscore “_” หรือ Dollar sign “$” ห้ามขึ้นต้นด้วยตัวเลข ห้ามมีช่องว่าง Case-sensitive ห้ามใช้คำสงวน ตัวแปร Javascript เป็นประเภท Dynamic Typing

7 คำสงวน break, case, catch, continue default, delete, do, else
false, finally, for, function if, in, instanceof new, null, return, switch, this, throw, true, Try, typeof, var, void, while, with

8 Data Type Number 10 25.25 -5 031 (เลขฐานแปด ขึ้นต้นด้วย 0)
0x3A (เลขฐานสิบหก ขึ้นต้นด้วย 0x หรือ 0X) Boolean true , false String “Welcome” , ‘Hello’ , \” , \’ , \\ , “Hello” + “World”

9 Operator + , - , * , / , % , ++ , -- > , >= , < , <= , == , != && , || “Hello” + “World” = “HelloWorld”

10 การแสดงข้อความ document.write(“String”); var custmername = “Sam”;
document.write(“Hello ”+customername);

11 Comment // /*…….*/ สิ้นสุดคำสั่ง ;

12 Alert & Confirm alert(“ข้อความแจ้งเตือน”);

13 Function การสร้างฟังก์ชันไว้ใช้งาน การเรียกใช้งานฟังก์ชัน
…. คำสั่งที่ต้องการทำงาน …. . คืนค่าของฟังก์ชัน (มีหรือไม่มีก็ได้) } การเรียกใช้งานฟังก์ชัน ชื่อฟังก์ชัน(อาร์กิวเมนต์1, อาร์กิวเมนต์2,…);

14 Array var array = [value1,value2,valueN]
var array = new Array(value1,value2,valueN) Method Array join(seperator:string) รวมค่าทั้งหมดใน Array คืนค่าเป็น String reverse() เปลี่ยนลำดับย้อนกลับ sort() จัดเรียงลำดับ concat(value) เพิ่มค่าต่อท้ายไปยัง Array splice(start:int,num:int,value) ลบค่าออกจาก Array หรือเพิ่มค่าเข้าไปใน Array

15 Object

16 var txt = "Hello";

17 Object Property Method Object แบ่งได้เป็น 2 กลุ่มหลัก Built-in Objects คือ ออบเจกต์สำเร็จรูปที่มากับ Javascript เช่น Date , Math , Document , Window เป็นต้น Custom Objects คือ ออบเจกต์ที่สร้างขึ้นเอง

18 ประกอบด้วย Properties และ Method ที่จำเป็น เช่น
Wrapper Objects Wrapper Objects เป็นออบเจกต์สำเร็จรูป (Built-in) ได้แก่ Number, String และ Boolean (ส่วนใหญ่ใช้ String) ประกอบด้วย Properties และ Method ที่จำเป็น เช่น Properties length เก็บจำนวนตัวอักษรทั้งหมด Method substring(from:int,to:int) : String ตัด String จากตำแหน่งเริ่ม from ถึงสิ้นสุด to

19 Method indexOf(str:string) : int
คืนค่าตำแหน่งแรกของคำที่ค้นหา หากไม่พบ จะคืนค่า -1 Method lastIndexOf(str:string) : int คืนค่าตำแหน่งแรกของคำที่ค้นหา โดยค้นหาจากท้ายมา หากไม่พบ จะคืนค่า -1

20 การสร้าง Object Var Objectname = {propertiesname1:value,propertiesname2:value,…}

21 ตัวควบคุมโปรแกรม if…else… if…else…if switch….case while…. do….while….

22 If….Else if(condition){ statement; } if(condition){ statement 1; }

23 If(condition){ statement 1; } else if(condition){ statement 2; else{ statement 3;

24 switch switch(expression) { case Label1: statement 1; break;
default: statement 3; }

25 while Initialization; while(condition){ statement 1; statement 2;
increment/decrement; } statement 3;

26 for for(initialization;condition;increment/decrement){ statement 1;
} statement 3;

27 do…while do{ statement 1; statement 2; }while(condition); statement 3;

28 Function function function_name (argument, argument) { } statement 1;
. return x; }

29 HTML Event Mouse Events Onclick เมื่อคลิ๊กเมาส์
Ondblclick เมื่อดับเบิ้ลคลิ๊กเมาส์ Onmouseover เมื่อเมาส์อยู่บน Element Onmousedown เมื่อกดเมาส์ Onmouseup เมื่อปล่อยกดเมาส์ Onmousemove เมื่อ Pointer เคลื่อนบน Element Onmouseout เมื่อ Pointer เคลื่อนออกจาก Element

30 Keyboard Events Onkeypress เมื่อกดปุ่มคีย์บอร์ด Onkeydown เมื่อกดปุ่มคีย์บอร์ดลง Onkeyup เมื่อปล่อยปุ่มคีย์บอร์ด

31 Form Events Onsubmit เมื่อกดปุ่ม Submit Onreset เมื่อรีเซตฟอร์ม Onselect เมื่อเลือก Form Onfocus เมื่อโฟกัส Onblur เมื่อออกจากโฟกัส Onchange เมื่อมีการเปลี่ยนแปลง

32 Body Events Onload เมื่อกำลังโหลด Onunload เมื่อโหลดเสร็จ

33 document.write(“……”);
window.alert(“……”); / alert(“…..”); <form name=“form1” method=“post” onsubmit=“Showtxt();”> <input type=“text” name=“cust_name”> <input type=“submit” name=“SM” value=“OK”> </form> <script> function Showtxt(){ alert(document.form1.cust_name.value); } </script>