objective - wordpress.com · document.writeln(" this is a text written from javascript...
TRANSCRIPT
เรื่อง Introduction to JavaScript objective
- สามารถเขียน scriptเบื้องต้นด้วยภาษา JavaScript ได้ - เข้าใจหลักการทํางานของ script ในการสร้างเว็บไซต ์- สามารถแทรก script ลงในเอกสาร HTML - สามารถประกาศตัวแปรและนําไปใช้ในการเขียน JavaScript
ทําความรู้จัก JavaScript
- JavaScript เป็นภาษาที่ใช้ประมวนผล (programing language) ต่างจาก HTML และ CSS ที่เป็นภาษาใช้ในการแสดงผล (Markup language) ภาษาประมวลผลจะสามารถทําการคํานวณ มีตัวแปร หาค่าบวกลบ คูณหาร ซึ่ง HTML ไม่สามารถทําได้
- เว็บไซต์มีกลไกอยู่ 2 แบบ คือ Client-side และ Server-side เป็นรูปแบบการประมวลผลของภาษาที่ใช้เขียน JavaScript เป็น Client-side คือสามารถประมวลผลบนฝั่งของ Client หรือที่ Browser. PHP เป็นตัวอย่างของรูปแบบ Server-side คือมีการประมวลที่ฝั่ง Server ก่อนแล้วค่อยมาแสดงผลที่ฝั่งUSuser
- JavaScript ไม่ใช่ Java หลายคนเข้าใจว่า JavaScript มีความสัมพันธ์กันเพราะชื่อใกล้เคียง ซึ่งเป็นความเข้าใจที่ผิด ทั้งสองต่างมีความสามารถที่ต่างกัน Javaเป็นโปรแกรมที่สามารถสร้างโปรแกรมทํางานได้เอง แตJ่avaScript ไม่สามารถสร้างได้ต้องอาคัยเอกสาร HTML
วิธีการเขียน JavaScript
1. เขียนภายใน tag <script></scrip>ในส่วน head ของเอกสาร HTML เพราะสามารถเรียกใช้ ได้ทั้งเอกสาร
2. เขียนภายใน<body></body>ก็สามารถทําได้เช่นกันแต่จะสามารถเรียกใช้ได้เฉพาะส่วนของโค้ดที่เรียกใช้เท่านั้น
3. เขียนแยกเป็นอีกไฟล์เพื่อการบริหารจัดการ หรือแก้ไขโค้ดได้ง่ายขึน้ แบบฝึกหัดที่ 1 1.1 จงสร้าง เอกสาร week10no1.html และเพิ่มcode JavaScript ดังต่อไปนี ้<script language="javascript"> alert(“this is so easy”);
document.writeln("<p> this is a text written from JavaScript </p>"); </script> 1.2 จากเอกสาร week10no1.html จงเขียนจาวาสคริปแสดงประโยคข้างล่างเป็นสีน้ําเงินต่อจากข้อ 1.1 This text is blue. ประเภทของข้อมูลที่ใช้ใน JavaScript
- numbers;ข้อมูลที่เป็นตัวเลข ทั้งที่เป็นจํานวนเต็มและตัวเลขทศนิยม - strings;กลุ่มคําของตัวอักษรที่วางต่อกันเป็นคําเป็นประโยค - Boolean values; จริงหรือเท็จ - A special value known as null. No value
การประกาศ Variable ตัวแปร (Variable) ใช้สําหรับเก็บข้อมูล ตัวแปรมีไว้สําาหรับเก็บข้อมูลหรือเก็บค่า (Value) แต่ก่อนเราจะใช้ตัวแปรได้เราต้อง ประกาศมันขึนมาเสียก่อนการประกาศตัวแปรและการกําาหนดค่าตั้งต้นมี Syntax ดังนี ้ varvar_name = value; ตัวอย่างเช่น var price = 500; var message = “Welcome”; คีย์เวิร์ดvarใช้สําาหรับการประกาศตัวแปรและการประกาศตัวแปรจะทําาเพียงครั้งเดียว (สําหรับชื่อเดิม) แต่จะเรียกใช้กี่ครั้งก็ได้เช่น var price = 500; price = price * 1.05; และเราสามารถประกาศตัวแปรมากกว่าหนึ่งตัวด้วยคีย์เวิร์ดvarตัวเดียวกันก็ได้ตัวอย่างเช่น
var x, y; var num1=10, num2=15; ตัวแปรใน JavaScript เป็นประเภทUntypedกล่าวคือตัวแปรใน JavaScript สามารถ เก็บข้อมูลชนิดใดก็ได้เพราะไม่มีการระบุชนิดอีกทั้งยังสามารถเปลี่ยนแปลงชนิดของข้อมูล ที่จัดเก็บได้อีกด้วยตัวอย่างเช่น var price = 500; price = “five hundred”; จะเห็นได้วาตัวแปร price ถูกประกาศขึ้นมาและเก็บค่าชนิดตัวเลข (number) แต่ใน ่ บรรทัดถัดไปเราได้กําาหนดค่าชนิดใหม่ชนิดตัวอักษร (string) ให้กับตัวแปร price ซึ่งก ็ 1.3 จงสร้างเอกสาร week10no1_3.html โดยเขียนจาวาสคริปข้างล่างนี้ <script language="javascript"> alert("คํานวณราคาสินค้า"); var price = 250; var total = price*10/100; document.writeln("ราคาสินค้า ", price ," บาทภาษีที่ต้องชําระเพิ่ม 10% รวมเป็นเงิน ", total ," บาท"); </script> 1.4จงสร้างเอกสาร week10no1_4 เขียนจาวาสคริปข้างล่างนี ้<script language="javascript"> var age; age=18; alert("the legal drinking age in Thailand is " ,age); </script> Input and Output เราสามารถให้ผู้ใช้เว็บไซต์กําหนดค่าของตัวแปรได้ โดยการใส่ค่าให้กับ inputfield เช่นการตอบคําถามในเว็บไซต ์
รูปแบบ variable = prompt ( message, default); จะมีหน้าต่างให้ผู้ใช้ใส่ข้อมูลและถ้าคลิกที่ปุ่มตกลงจะทําให้ข้อความที่เขียนไปถูกกําหนดให้เป็นค่าของตัวแปรที่สร้างไว ้ตัวอย่าง nationality = prompt (“what is your nationality ? ”, “Thailand”); จะเห็นว่าเมื่อหน้าต่างแสดงขึ้นมา Thailand จะอยู่ในช่องที่ให้พิมพ์ข้อความ ซึ่งจาก code คําว่า Thailand ได้กําหนดเป็นค่า default ไว้ หากกดปุ่ม ตกลง ตัวแปร nationality ก็จะเก็บค่า Thailand แต่ถ้าเปลี่ยนจาก Thailand เป็น Japan แล้วกด ok ค่าของตัวแปรก็จะเก็บ Japan แทน 1.5 สร้างเอกสาร week10no1_5.html <script language="javascript"> var name; var age; vartel; var email; name = prompt("what is your name ?", ""); age = prompt("enter your age", ""); tel = prompt("what is your phone number?", ""); email = prompt("enter your email address ", ""); document.write("Hello ", name, "<br>","Your details are <br>"); document.write("Name :", name,"<br>"); document.write("Age :", age,"<br>"); document.write("Telephone :", tel,"<br>"); document.write("Email :", email,"<br>"); document.write("thank you"); </script> 1.6 week10no1_6.html จงเขียนสคริปให้ตั้งชื่อ username โดยให้ผู้ใช้ป้อนชื่อชองสัตว์เลี้ยงของตัวเอง หรือชื่อสัตว์ที่ตนชอบ และให้มีการป้อนชื่อถนนของบ้านที่ตนอยู่ จากนั้นให้มี popup โชว์ชื่อ username ที่ได้จากการเอาชื่อของสัตว์ และ ชื่อถนนรวมกัน เช่น
สัตว์เลี้ยงชื่อ Puffy บ้านอยู่ที่ถนน Kingtonชื่อ username คือ Puffy Kingston operater and expressions การกําหนดค่าให้ตัวแปร จะใช้เครื่องหมาย = เช่น length = 4.5; width = 2.5; area = length * width; a = “total is “ Arithmetic operaterเครื่องหมายทางคณิตศาสตร์ (+) addition บวก (-) subtractionลบ (*) multiplication คูณ (/) divisionหาร (%) Modulus หารเอาเศษ (++) incrementบวกหนึ่ง (--) decrementลบหนึ่ง String Operators เครื่องหมายสําหรับ string ใน จาวาสคริปจะมีเครื่องหมายสําหรับสติงแค่ตัวเดียว คือ เครื่องหมายบวก (+) txt1 =”what a very” txt2 =”nice day” txt3= txt1+txt2 จะได้ค่า txt3 แสดงผลเป็น “what a very nice day” ในการคํานวณในจาวาสคริป +บวกสตริง, +บวก, -ลบ, *คูณ, /หาร, %หารเอาเศษ, ++บวกหนึ่ง,--ลบหนึ่ง ทําหลัง....................................................................................................ทําก่อน result = 4+5*3; จะได้ผลลัพธคือ 19 ถ้าปกติเราจะเริ่มคํานวนจากซ้ายไปขวาแต่จาวาสคริปคูนจะถูกทําก่อนเราสามารถใส่วงเล็บเพ่อควบคุมการคํานวณของเครื่องหมายได้เช่น
result =(4+5)*3 จะได้ผลลัพธคือ 27
1.7 จงหาค่าต่อไปนี้ โดยใช้จาวาสคริปและให้แสดงผลทาง browser ทั้งโจทย์และผลลัพธ์ที่ได ้a. 8 – 4 – 2 b. 2 * 3 + 3 * 4 c. 2 * (3 + 3) * 4 d. ‘y’ + ‘2K’ e. 9.0 / 2 / 5 f. 12 / 2 * 3 g. “ball” + “room” h. (2 + 3) / 2 i. (2 + 3) % 2 J 7 % 5 % 3
เรื่อง JavaScript statement, function and arrays 1 Condition Statements เป็นการเขียน control statement ประเภทหนึ่งช่วยใหc้ode มีการรันไปตามเงื่อนไข ประกอบด้วย if-else-if statement และ switch statement การทําเงื่อนไขด้วย ifเป็นคําสั่งที่ใช้ควบคุมการรันโค้ดให้เป็นแบบมีเงื่อนไข ม ีsyntax ดังนี ้
if ( Boolean_expression) { …. }
หากboolean_expresstion ได้ผลออกมาจริง จึงจะรันโค้ดในบอดี้ ของบล็อก if แต่หากให้ผลลัพธ์ เป็นเท็จ ก็จะข้ามบล็อกไปเลย if (email == “”) { alert (“Please enter an email address”); } การทําเงื่อนไขด้วย if-else statementกําหนดเงือนไข ถ้าเป็นจริง ให้ทําตามเงือนไข แต่ถ้าเป็นเท็จ ให้ทําตามเงือนไขอีกอัน รูปแบบดังนี ้
if ( Boolean_expression) { …. } else { … }
ตัวอย่างเช่น var name = prompt(“what is your name?”, “ ”) if (name != “”) { document.write(“hello, “ “ +name); }else { docyment.write (“hello, my friend “); } การกําหนดเงื่อนไขด้วย if-else-if เงื่อนไขแบบ if-else เป็นการตรวจสอบเงื่อนไขว่าเป็นจริงหรือไม่เท่านั้น แต่ถ้าหากเงื่อนไขมีมากกว่าหนึ่ง เราจะใช้ if-else-if มีรูปแบบดังนี ้
if ( Boolean_expression1) { …. } elseif ( Boolean_expression2) { … } else { … }
ตัวอย่าง แสดงการทําเงื่อนไขด้วย if-else-if โดยให้แสดงว่าวันนี้เป็นวันอะไรในสัปดาห ์<script> var today = new Date(); var day = today.getDay(); if(day == 0){ day = "Sunday"; }else if(day == 1){ day = "Monday"; }else if(day == 2){ day = "Tuesday"; }else if(day == 3){ day = "Wednesday"; }else if(day == 4){ day = "Thursday"; }else if(day == 5){ day = "Friday"; }else{ day = "Saturday"; } document.write("Today is: " + day); </script>
การทําเงื่อนไขด้วย switchนอกจาก if-else-if แล้ว เรายังสามารถรันโค้ดแบบมีเงื่อนไขด้วย switch ได้ มีรูปแบบดังนี้ switch ( expression ) { case value 1: …….. break; case value 2: …….. break; …….. default: ……… }
การทําเงื่อนไข switch จะเปรียบเทียบค่าใน expression ว่าตรงกับค่าใน case ใดถ้าตรงกับ case ไหน ก็จะเริ่มรันโค้ดที่จุดนั้น ตัวอย่าง
2 Iteration Statement (การวนลูป)
นอกจาก condition statements แล้ว iteration statement ก็เป็นอีก controlstatement ที่สําคัญที่ทําให้เราสามารถรันโค้ดเดิมซ้ําๆกันหลายๆรอบได้ หรือที่เราเรียกกันว่าการวนลูป (loop) มีอยู่ 3 แบบ
- while statement - for statement - do-while statement
การวนลูปด้วย while รูปแบบ while (Boolean_expression) { ……. } การวนลูปจะวนไปเรื่อยตราบใดที่ Boolean_expression ยังให้ผลลัพธ์เป้นจริงอยู ่ตัวอย่างเช่น var i = 0; while (i<10) { document.write ( i + “ ”); i++; } การวนลูปด้วย For รูปแบบ for (initialize; Boolean_expression; increment) { ……. } ลูป for นั้นเรียกได้ว่าเหมือนกับการใช้ loop while เลย จะต่างกันแค่รูปแบบการเขียน ตัวอย่างเช่น for (var i=0; i<10; i++) { document.write ( i+ “ ”); } การวนลูปด้วย do-while เป็นลูปที่แตกต่างไปจากลูปทั้งสองที่ผ่านมาเล็กน้อย กล่าวคือเป็นลูปที่รันบอดี้ทันทีก่อนหนึ่งครั้งเสมอ แล้วค่อยตรวจสอบเงื่อนไขว่ายังเป็นจริงอยู่หรือไม่ ถ้าเป็นอยู่ก็จะวนซ้ําต่อไป รูปแบบ do { …….
} while (Boolean_expression); ตัวอย่างเช่น var I =0; do { document.write ( I + “”); i++; } while ( i<10); 3. Arrays arrays คือ คอลเล็กชั่นของ elementแต่ละ element มีไว้สําหรับเก็บข้อมูล และสามารถเข้าถึงแต่ละ element ได้ด้วยตําแหน่ง จึงใช้ Arrayเพื่อเก็บข้อมูลที่มีมากกว่าหนึ่งค่า รูปแบบ สร้างแบบ literal array - การกําหนดค่า arrays ให้กับตัวแปร var array1 = [ value0, value1, value2,….valueN]; สร้างแบบ construct - การสร้าง array โดยการโหลดออบเจกต ์var array1 = new Array (value0, value1, value2,….valueN) การเรียกใช้ arrays var animals = [“lion”, “tiger”, “cat”, “dog”, “bird”] animals[1]= tigrer 4 Funtion คือการรวมกลุ่มโค้ดที่เขียนซ้ําๆกันในหลายๆจุดของโปรแกรม เมื่อมีการเรียกใช้อีก เราสามารถใช้ชื่อของฟังก์ชั่นที่เดียวเท่านั้น function สําเร็จรูปที่มากับ JavaScript ที่เราใช้กันแล้ว เช่น document.write( ) และ prompt( ) สร้างและเรียกใช้งาน Funtion รูปแบบ function functionName ( [arg1, arg2,…]) { //statement [return expression;] }
- สร้าง function ต้องมี keyword คําว่า function เสมอ และตามด้วยชื่อของฟังก์ชั่น
- ตัวแปรที่รับค่า parameter ที่ส่งมายังฟังก์ชั่น จะมีหรือไม่มีและจะมีกี่ตัวก็ได ้- ตัวแปรที่รับค่า ถ้ามีมากกว่า 1 ตัวให้ใช้เครื่องหมาย comma “,” คั่น - ฟังก์ชั่นสามารถรีเทิร์นค่ากลับออกไปยังที่เรียกใช้ฟังก์ชั่นได้ โดยใส่คําว่า
return ไว้เป็นคําสั่งสุดท้าย ตัวอย่าง function writeLine (message) { document.write (message + “<br/>”); } function add (num1, num2) {
return( num1 + num2); } การเรียกใช้ฟังกชั่น writeLine ( “welcome to my world”); writeLine (“today is ” + new Date() ); var result = add (25,30) writeLine (result); แบบตัวอย่างการสร้าง function <head> <script language= “ javascript”> function netPay(hours, rate) { var grossPay; var tax; grossPay = hours * rate; tax = grossPay *0.3; return ( grossPay – tax); } function writeLine (message) { document.write (message + “<br/>”); } </script>
</head> <body> <script language = “javascript”> var wage; var hoursWorked; var hourlyRate; hoursWorked = prompt(“enter the number of hour worked.” “”); hoursWorked = parseFloat(hoursWorked); hourlyRate = prompt(“Enter the hourly rate of pay”, “”); hourlyRate = parseFloat( hourlyRate); wages = netPay(hoursWorked, hourlyRate); writeLine (“<p> hours worked : ”, hoursWorked); writeLine (“hourly rate: $” , hourlyRate); writeLine (“total wages, $” , wages, “</p>”); </script> </body> Excercise 1. เขียนโค้ดที่รับค่าชื่อของนักศึกษาทาง keyboard จํานวน 5 คน ดังนี้
Jason Mathew Anna Marry Jonathan
และให้ browser แสดงชื่อของนักศึกษาโดยเรียงจากชื่อที่พิมพ์ล่าสุดก่อนตามลําดับดังนี ้Jonathan Marry Anna Mathew Jason
