Download
1 / 36
370 likes | 607 Views
Javascript. Javascript คืออะไร. Javascript เป็นภาษาที่ประมวลผลและทำงานอยู่ที่ฝั่งผู้ใช้ โดยรันแล้วแสดงผลต่างๆทางเบราเซอร์ ใช้เพื่อเพิ่มความสามารถของภาษา HTML เช่นการเช็คความถูกต้องของแบบฟอร์มก่อนจะส่งไปที่ server หรือการทำงานที่กำหนดเวลามีเงื่อนไขเกิดขึ้น. วิธีการเริ่มเขียน Javascript.
E N D
Javascript คืออะไร • Javascript เป็นภาษาที่ประมวลผลและทำงานอยู่ที่ฝั่งผู้ใช้ โดยรันแล้วแสดงผลต่างๆทางเบราเซอร์ • ใช้เพื่อเพิ่มความสามารถของภาษา HTML เช่นการเช็คความถูกต้องของแบบฟอร์มก่อนจะส่งไปที่ server หรือการทำงานที่กำหนดเวลามีเงื่อนไขเกิดขึ้น
วิธีการเริ่มเขียน Javascript <script type="text/javascript"> // โค๊ดที่ต้องการ </script> • โดยจะนำไปใส่ในส่วนของภาษา HTML คือ • ใน tag <head> และ<body>
วิธีการเริ่มเขียน Javascript • javascript ใน <head> จะเน้นโค๊ดที่เอาไว้ใช้งานภายหลัง หรือสร้างขึ้นเพื่อไว้รอให้ถูกเรียกใช้ ( พวก function เป็นต้น ) • javascript ใน <body> หมายถึงการทำงานไปพร้อมๆกัน หรือในขณะที่กำลังโหลด HTML
javascriptใน tag <head> <head><script type="text/javascript"> function message() // function definition { alert("This alert box was called with the onload event"); } </script> </head> • method alert( ) เป็น popup boxes
javascriptไว้ใน tag <body> <body><script type="text/javascript"> document.write("This message is written in javascript"); </script> </body> • document.write() นั้นเป็นคำสั่งที่เอาไว้แสดงผลออกมาทางหน้าจอจะใส่ Stringหรือตัวแปรก็ได้ ( String คือ ตัวอักษรมากกว่าหนึ่งตัวที่ครอบด้วย " ")
ไฟล์ javascript ที่มีอยู่แล้ว ( *.js ) <script type="text/javascript" src="*.js"> // เรียกใช้โค๊ด หรือ function จาก source file </script>
code กับ block • วิธีการเขียนโปรแกรมนั้น จะมี 2 แบบ • แบบ code นั้นจะทำทีละบรรทัดจนครบคำสั่ง • แบบ block นั้นเราจะมั่นใจได้ว่าทุกบรรทัดที่อยู่ใน block เดียวกันจะทำงานด้วยกันหมด
ตัวอย่าง javascript แบบ code <script type="text/javascript"> //codes, ทำทีละบรรทัดไปเรื่อยๆ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p>");</script>
ตัวอย่าง javascript แบบ block <script type="text/javascript"> //blocks, แน่ใจว่ายังไงก็ต้องถูกทำพร้อมกัน { document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph</p1>"); } </script> • การเขียนแบบ block นั้นจะถูกเอามาใช้กับการเขียนโปรแกรมแบบมีเงื่อนไข(conditional)หรือการทำซ้ำ(iteration)
ตัวแปร • ตัวแปรก็คือตัวที่เก็บค่าต่างๆไว้เพื่อให้เราเรียกใช้ในภายหลัง • ข้อดีของ javascript ก็คือไม่จำเป็นต้องไปวุ่นวายว่าตัวแปรตัวไหนมีชนิดอะไร • เก็บค่าได้ทั้งตัวเลขและตัวอักษร
ตัวอย่างการสร้างตัวแปรตัวอย่างการสร้างตัวแปร <script type="text/javascript"> // สร้างตัวแปรพร้อมกำหนดค่า var x = 5;var webname = "vcharkarn"; //ใช้ " ครอบตัวอักษรที่ต้องการสร้างเป็นคำ// สร้างตัวแปรก่อนแล้วใส่ค่าทีหลัง var y; y = 10; // ประกาศซ้ำได้โดยไม่ทำให้ค่าเดิมหายไป ( y ยังเป็น 10 อยู่ ) var y;</script>
เครื่องหมายคำนวณ + บวก - ลบ * คูณ / หาร % หารเอาเศษ ++ ( unary ) เพิ่มค่าขึ้น1 -- ( unary ) ลดค่าลง1
เครื่องหมายแบบ Unary • // binary กับ unary var y = 2; var x = 5+y; // x เท่ากับ 7 x++; // เพิ่มค่าของ x ขึ้นอีกหนึ่ง ทำให้ x เท่ากับ 8
เครื่องหมาย + var x = 5;var txt1 = “vchakarn"; var txt2 = " is a good website"; var txt3 = txt1+txt2; // txt3 ได้ค่า “vcharkarn is a good website"// ใช้เครื่องหมาย + กับชุดตัวอักษรและตัวเลขvar txt4 = txt3+x; //txt4 มีค่า "vcharkarn is a good website5"var txt5 = 5+"5"; //txt5 มีค่าเป็น 55 • ถ้าเรานำมาใช้กับชุดตัวอักษรหรือ string แล้ว จะมีความหมายถึงการเชื่อมชุดตัวอักษรสองชุดเข้าด้วยกัน หรือถ้าใช้เครื่องหมาย + ระหว่าง string กับตัวเลขแล้ว ตัวเลขก็จะถูกแปลงเป็นตัวชุดตัวอักษรก่อน แล้วจึงนำมาเชื่อมกับชุดตัวอักษร
เครื่องหมายใส่ค่า (assignment operators) = ใส่ค่าทางขวาให้ทางซ้าย += ค่าผลบวกใส่ให้ทางซ้าย -= ค่าผลลบใส่ให้ทางซ้าย *= ค่าผลคูณใส่ให้ทางซ้าย /= ค่าผลหารใส่ให้ทางซ้าย %= หารเอาเศษแล้วใส่ค่าให้ทางซ้าย
ตัวอย่างการใช้งานเครื่องหมายใส่ค่าตัวอย่างการใช้งานเครื่องหมายใส่ค่า var x=5,y=2; x+=y; // x มีค่าเป็น 7 x*=y; // x มีค่าเป็น 14 x/=y; // x มีค่าเป็น 7 x-=y; // x มีค่าเป็น 5
เครื่องหมายเปรียบเทียบ(ให้ var x = 5; )
เครื่องหมายเชิงตรรกกะ( logical operator ) • เป็นการวัดตรรกกะจากการประมวลค่าความจริงที่ได้จากเครื่องหมายเชิง เปรียบเทียบ
เงื่อนไข • โปรแกรมแบบมีเงื่อนไขนั้นจะมีสองรูปแบบ คือ • if( ) • switch( ) if( ) นั้นถ้าจะอธิบายให้เข้าใจ ก็เหมือนกับถ้า ( จริง ) { /// code }
เงื่อนไข if • สามารถขยายขีดความสามารถของ if( ) ออกไปอีกโดยใช้ else หรือ else if( ) เช่น if( ) { // code }else if { // code } else { // code }
ตัวอย่าง if var d = new Date(); //เอาวันที่ปัจจุบันขึ้นมาvar time = d.getHours(); //เอาแต่เลขชั่วโมงมาใช้if(time < 10) // ถ้าเลขชั่วโมงที่ได้น้อยกว่า10 จริง { document.write("Good morning"); //แสดงผลคำนี้ } else if (time > 10 && time < 16) //ไม่งั้นถ้าเลขชั่วโมงมากกว่า10 และน้อยกว่า16 จริง { document.write("Good day"); } else // ไม่งั้น ( ไม่ตรงกับเงื่อนไขด้านบนเลย ) { document.write("Hello World!"); }
เงื่อนไข switch • switch()จะเป็นการเลือกทำหนึ่งในหลายๆชุดคำสั่งเพื่อที่จะทำงานตามที่เราต้องการ โดยค่าที่จะใช้กับ switch ได้นั้นต้องเป็นเลขจำนวนเต็ม (int) อย่างเดียวเท่านั้น (ตัวแปรที่เก็บค่าจำนวนเต็มก็ได้เช่นกัน)
รูปแบบ switch n เป็นตัวแปรที่เก็บค่าเลขจำนวนเต็ม switch(n) { case 1: // ถ้าค่าของ n เป็นหนึ่ง // code ชุดที่ 1 break; //จบการทำงาน case 2: // ถ้าค่าของ n เป็นสอง // code ชุดที่ 2 break; //จบการทำงาน default: // ถ้าค่าของ n ไม่ตรงกับที่กำหนดไว้ // code อีกชุดหนึ่ง }
ตัวอย่าง switch var d=new Date(); //เรียกวันที่ปัจจุบัน theDay=d.getDay(); //เอาเลขวันออกมา (วันอาทิตย์เป็น 0 จันทร์เป็น 1 ไล่ไปเรื่อยๆ ถึง 6 )switch (theDay) // เลือกชุดคำสั่งโดยใช้ค่าของ theDay { case 5: // ถ้าเป็น 5 ( วันศุกร์ ) document.write("Finally Friday"); break; case 6: // ถ้าเป็น 6 (วันเสาร์ ) document.write("Super Saturday"); break; case 0: // ถ้าเป็น 0 (วันอาทิตย์) document.write("Sleepy Sunday"); break; default: // ถ้าไม่ใช่ศุกร์ เสาร์ อาทิตย์ document.write("I'm looking forward to this weekend!");}
Popup box • alert box • เน้นข้อความที่สำคัญที่ต้องการที่จะให้ผู้ที่เข้ามายังเว็บไซต์ได้เห็น • confirm box • แตกต่างกับ alert box ตรงที่ว่ามันจะแสดงปุ่ม OK กับCancel และเก็บค่าเอาไว้ • prompt box • เป็น panel ที่จะให้ user กรอกข้อความลงไปแล้วทำการบันทึกไว้แล้วเก็บค่านั้นไว้
ตัวอย่าง alert box <body> <script type="text/javascript> alert("Welcome to vcharkarn.com"); </script> </body>
ตัวอย่าง confirm box //จะเห็นว่ามีการใส่ค่าให้ตัวแปร r เพราะคำสั่ง confirm จะสร้างค่าขึ้นมาครับ ( true กะ false ) var r = confirm("Press a button"); if ( r == true ) // ถ้ากด OK r ก็จะมีค่าเป็นจริง { document.write("You pressed OK!"); } else // ถ้ากด Cancel ก็จะมีค่าเป็นเท็จ { document.write("You pressed Cancel!"); }
ตัวอย่าง prompt box var name =""; name = prompt(“Please enter your name ” , “name only “); //ถ้ากด Cancel หรือไม่มีตัวอักษรอยู่ในตัวแปร name เลย if( name != null & name !="" ) { document.write("Hello " + name + " , How are you today?"); }
Function • ฟังก์ชั่นคือการรวมชุดคำสั่งชุดหนึ่งไว้ แล้วตั้งชื่อให้ฟังก์ชั่น เพื่อที่เราจะได้เรียกใช้ภายหลังได้โดยง่าย เพียงใส่ชื่อของฟังก์ชั่นเท่านั้น <head> <script type="text/javascript"> function displayMessage() { alert("Hello World!"); } </script> </head> <body> <form> <input type="button" value="Click Me!" onclick="displayMessage()"/> </form>
การ return ค่า หรือ return statement • ฟังก์ชั่นนั้นไม่ได้มีไว้เพื่อรวบชุดคำสั่งอย่างเดียว แต่สามารถส่งค่าที่เกิดจากการคำนวณภายในนั้นออกมาได้ซึ่งการส่งค่าออกมาจาก ฟังก์ชั่นนั้นเราเรียกว่าการ return ค่า หรือ return statement
ตัวอย่าง return statement //สร้างฟังก์ชั่น product ที่รับค่าตัวแปรสองตัวมาใช้ ซึ่งก็คือ a กับ b ในทีนี้function product(a,b) { return a*b; //ส่งผลคูณออกมาในรูปค่าของฟังก์ชั่นที่เรียก } // ดังนั้นถ้าเรา function นี้ใส่ไว้ใน head แล้วใน body เราเรียก script document.write(product(4,3)); // ขึ้นมา โปรแกรมก็จะทำการคำนวณ โดยเอาค่า 4 ไปใส่ไว้ในตัวแปร a และ 3 ไปใส่ไว้ในตัวแปร b แล้วก็คำนวนผลคูณออกมา เป็นค่าคำตอบของการเรียกฟังก์ชั่นนั้น ซึ่งในทีนี้จะแสดงเลข 12 ออกมา
การวนซ้ำ ( Looping ) • ต้องการจะทำอะไรแบบเดิมๆหลายครั้ง อย่างเช่นพิมพ์ประโยคเดิมซ้ำไปซ้ำมา หรือเพิ่มค่าทีละหนึ่ง 10 ครั้งแทนที่เราจะต้องเขียนโค๊ด 10 บรรทัด เราสามารถใช้การวนซ้ำเข้ามาช่วยได้ครับ ซึ่งการวนซ้ำจะมีหลายแบบ • For • While
For // ให้ i มีค่าเป็นหนึ่ง ; ถ้า i ยังน้อยกว่าหรือเท่ากับ 6 อยู่ ; ให้เพิ่มค่าอีกหนึ่งfor (i = 1; i <= 6; i++) // ( ค่าเริ่มต้น ; เงื่อนไขในการทำต่อ ; การเพิ่มค่าปัจจุบัน ) { document.write("This is heading " + i); document.write(""); }
while var i = 0; // กำหนดตัวแปร i ให้มีค่าเป็น 0 // ตราบใดที่ i ยังน้อยกว่าหรือเท่ากับ 5 while( i <= 5) { document.write("The number is "+i); document.write(" "); i++; //เพิ่มค่า i ขึ้นอีกหนึ่ง } • ตราบใดที่เงื่อนไขยังเป็นจริงอยู่ ก็ให้ทำต่อไปเรื่อยๆ
Do…while var i = 0; do // ทำก่อนหนึ่งครั้ง { document.write("The number is "+i); document.write(" "); i++; // เพิ่มค่าขึ้น 1 } while(i <= 5) • ตรงที่มีคำสั่ง do ขึ้นมา ทำให้เรามั่นใจว่าอย่างน้อยชุดคำสั่งของเราจะถูกทำหนึ่งครั้งก่อน แล้วต่อไปค่อยปล่อยให้เป็นไปตามเงื่อนไขที่เราตั้งไว้
