Embed Size (px)
DESCRIPTION
รู้จัก JavaScript. รายวิชาเทคโนโลยีสารสนเทศ 5 (ง 33102) กลุ่มสาระการงานอาชีพและเทคโนโลยี. สิ่งที่นักเรียนต้องศึกษาจากเอกสารในวันนี้ ประวัติความเป็นมา (หน้า 1) ตารางเปรียบเทียบความแตกต่างระหว่าง JavaScript และ Java (หน้า 1) ทบทวนโครงสร้าง HTML (หน้า2-3) - PowerPoint PPT Presentation
Citation preview
รายวิ�ชาเทคโนโลย สารสนเทศ 5 ( ง 33102) กล��มสาระการงานอาช พและเทคโนโลย
รู้��จั�ก JavaScript
ส��งท �น�กเร ยนต้�องศ�กษาจากเอกสารในวิ�นน ! ประวิ�ต้�ควิามเป#นมา ( หน�า 1) ต้ารางเปร ยบเท ยบควิามแต้กต้�างระหวิ�าง JavaScript
และ Java ( หน�า 1) ทบทวินโครงสร�าง HTML (หน�า2-3) วิ�ธี การเขี ยนค(าส��ง JavaScript ( หน�า 3-4 ) ต้�วิแปร ( หน�า 5) และการส�งค�าเขี�าส)�ฟั+งก,ช��น ( หน�า 6) หล�งจากน�!นท(าแบบฝึ.กห�ดหน�วิยท � 1 ขี�อท � 1 และขี�อ ท � 2
รู้��จั�ก JAVASCRIPT
JavaScript คื�อ ?
สร�ป JavaScript ค0อ ภาษาประมวิลผล จ�ดเป#นภาษาสคร�ปต้,ท �ม ผ)�น�ยมใช�งานมากท �ส�ดและสามารถใช�ร�วิมก�บราวิ
เซอร, เช�น Internet Explorer Firefox GoogleChorme Netscape และ Opera โดยภาษา
ประมวิลผลสามารถท(าการค(านวิณ ประกาศต้�วิแปร ซ��ง แต้กต้�างจากภาษา HTML ท �เป#นภาษาแสดงผลท(าให�ไม�ม
ควิามสามารถด�งกล�าวิจ�งต้�องม การเพ��ม JavaScript ท �เป#นภาษาประมวิลผลเขี�ามาช�วิย
รู้��จั�ก JAVASCRIPT
JavaScript ก�บ Java คื�อตั�วเดี�ยวก�นหรู้�อไม่� ? ผ)�ใช�จะพบค(าวิ�า Java ซ��งใกล�เค ยงก�บค(าวิ�า
JavaScript ซ��งคนส�วินใหญ่�ม�กเขี�าใจผ�ดวิ�าเป#นภาษาเด ยวิก�นจ�งแยกออกเป#นต้ารางเพ0�อเปร ยบเท ยบให�เขี�าใจด�งน !
JavaScript Java
ผล�ต้โดยบร�ษ�ท Sun Microsystems ในป8 พ.ศ. 2534
ผล�ต้โดยบร�ษ�ท Netscape Communication ในป8 พ.ศ.2538
แต้�เด�มใช�ช0�อวิ�า mocha และ LiveScript ต้ามล(าด�บต้�อมาจ�บม0อก�บบร�ษ�ท Sun ร�วิมก�นสร�างบราวิเซอร, Netscape Navigator 2.0 ซ��งบราวิเซอร,น !สามารถใช�
งานร�วิมก�บ java ได� จ�งท(าให�บร�ษ�ทเปล �ยนช0�อเป#น JavaScript
ใช�การแปลภาษาแบบ interpreter ค0อการแปลท ละบรรท�ด เช�น
ภาษาเบส�ก ภาษาเพ�ร,ล ภาษาพ เอชพ
ใช�หล�กการแปลภาษาแบบ Compiler โดยจะแปลเพ ยงคร�!งเด ยวิโดยไม�ต้�อง
แปลใหม�ท�กคร�!งเหม0อน interpreter เช�น ภาษาฟัอร,แทรน ภาษาโคบอล
ควิามสามารถท(าได�เพ ยงแค�เป#นสคร�ปต้, ฝึ+งในหน�าเวิ9บเพจหน��งๆ เท�าน�!น
สามารถใช�สร�างแอพพล�เคช��นท �ท(างาน บนวิ�นโดวิส,ได�เหม0อนภาษา ซ
เรู้��ม่ตั�นการู้เขี�ยน JavaScript ลองด)ต้�วิอย�างง�ายๆ ใน การเขี ยนโปรแกรม JavaScript ม วิ�ธี การเขี ยนท��วิๆ ไปด�งน !
1 <HTML>2 <HEAD>3 <SCRIPT LANGUAGE = “JAVASCRIPT”>4 <!--5 FUNCTION HELLOWORLD()6 {7 ALERT(“HelloWorld”);8 }9 //-->10 </SCRIPT></HEAD>11 <BODY>12 < A HREF = “JAVASCRIPT:HELLOWORLD()”>HELLO</A>13 </BODY>14 </HTML>
1.การเขี ยนสามารถเขี ยนจากซ�ายไปขีวิาบนลงล�าง เร ยงล(าด�บไปเร0�อยๆหากต้�องการจบค(าส��งใดๆ จะต้�องต้ามด�วิยเคร0�องหมาย เซม�โคล�อน ( ; ) เช�นบรรท�ดท � 7
3.ต้�วิพ�มพ,ใหญ่�พ�มพ,เล9กเป#นเร0�องส(าค�ญ่เช�น เม0�อเราต้�!งช0�อฟั+งก,ช� �น(บรรท�ดท � 5)วิ�า HELLOWORLD ซ��งต้�างจาก helloworld จะถ0อวิ�าเป#นคนละต้�วิก�นท(าให�โปรแกรมไม�สามารถท(างานได�
2.กล��มค(าส��ง เม0�อเขี ยนค(าส��งหลายๆ ค(าส��งในโปรแกรมเด ยวิก�นเพ0�อให�มองด)เป#นกล��มค(าส��งเด ยวิก�นสามารถใช�เคร0�องหมายป8กกาเป<ดและป<ด ( { }) เช�นบรรท�ดท � 6-8
รู้��จั�ก JAVASCRIPT
ตั�าแหน�งการู้เขี�ยน JavaScript ในโครงสร�างภาษา HTML เราสามารถ ฝึ+ง JavaScript ไวิ�ท �ต้(าแหน�งใดก9ได�ด�งน !
1. ต้(าแหน�งส�วินห�วิขีองเอกสาร HTML ส�วินใหญ่�ม�กจะน�ยมแทรกลงไปในส�วินน !<HEAD>….</HEAD> เพราะสามารถเร ยกใช�ฟั+งก,ช� �นจากส�วินใดๆ ขีองเวิ9บเพจก9ได�
2. ต้(าแหน�งส�วินต้�วิขีองเอกสาร HTML สามารถท(าได�เช�นก�น <BODY>…</BODY> แต้�การเร ยกใช�ฟั+งก,ช� �น จะเร ยกใช�ได�เฉพาะส�วินขีองเวิ9บเพจท �อย)�
ใต้�โค>ต้ JavaScript เท�าน�!น3. เป#นค�าในอ เวินต้, (Event) ขีองแท9กค(าส��ง HTML ค0อการเขี ยนค(าส��งเฉพาะ
จ�ดค0อในแท9กค(าส��ง HTML ท �ระบ�เท�าน�!น4. เก9บไวิ�ในไฟัล,แยกต้�างหาก โดยเก9บไวิ�ในนามสก�ล .Js เช�นหากเราสร�างค(าส��ง
แล�วิเก9บไวิ�ในไฟัล,ช0�อ title1.js และเม0�อเราแก�ไขีในไฟัล, title1.js ก9จะม ผล ท(าให�ไฟัล, HTML แก�ไขีไปด�วิย
รู้��จั�ก JAVASCRIPT
พื้��นฐานการู้เขี�ยน JavaScriptตั�วแปรู้ ค0อการจองพ0!นท �ไวิ�ใช�เก9บขี�อม)ล ใช�พ�ก
ขี�อม)ลและใช�เร ยกด)ขี�อม)ล ผ)�ใช�สามารถต้�!งช0�อต้�วิแปรและก(าหนดค�าขีองต้�วิแปรได�function HelloWorld()
{myname = “joe”alert(“Hello”+myname);}
จากต้�วิอย�าง เราได�ประกาศต้�วิแปรช0�อ myname และในต้�วิแปรเก9บค�าค(าวิ�าวิ�า “joe” ไวิ�จากน�!นเร ยกค(าส��ง alert เพ0�อแสดงขี�อควิามวิ�า “Hello” ต้�อด�วิยค�าท �เก9บไวิ�ในต้�วิแปร myname เป#นอ�นจบฟั+งก,ช��นน !
รู้��จั�ก JAVASCRIPT
พื้��นฐานการู้เขี�ยน JavaScriptการู้ส่�งคื�าเขี�าส่��ฟั#งก$ชั่��น ในบางคร�!งผ)�ใช�ต้�องสร�างขี�อม)ลบาง
บางอย�างเพ0�อนน(าไปใช�ในการประมวิลผล เช�น การบวิกเลขี 2 จ(านวินซ��งก9ต้�องม การส�งค�าเลขี 2 จ(านวินเพ0�อท �จะน(าไปบวิก
เพ0�อแสดงผลล�พธี,function HelloWorld(){myname = prompt (“what is your name ”,”);alert(“Hello”+myname);}
จากต้�วิอย�างเป#นค(าส��ง prompt ท �เป#นค(าส��งแสดงกล�องขี�อควิามเพ0�อรองร�บขี�อม)ลจากผ)�ใช�มาใส�ลงในต้�วิแปร จากน�!นเม0�อผ)�ใช�ได�พ�มพ,ช0�อลงในป�?มกดแล�วิ ต้�วิแปรจะน(าช0�อไปเก9บไวิ� แล�วิจะแสดงขี�อควิามวิ�า “Hello” ต้�อด�วิยค�าท �เก9บไวิ�ในต้�วิแปร myname เป#นอ�นจบฟั+งก,ช� �นน !
รายวิ�ชาเทคโนโลย สารสนเทศ 5 กล��มสาระการงานอาช พและเทคโนโลย
ตั�วแปรู้ใน JAVASCRIPT
ในการู้เขี�ยนคื�าส่��งใน JavaScript บางคืรู้��ง เรู้าจั�าเป'นตั�องม่�การู้จัดีจั�าขี�อม่�ล เชั่�น เม่��อ
ตั�องการู้บวกตั�วเลขี 2 จั�านวน (หลายๆหล�ก) เรู้าจัะทำ�าการู้ทำดีเลขี 2 ตั�วน��นลงบน
กรู้ะดีาษก�อนแล�วจั-งน�าม่าบวกก�น ซึ่-�งกรู้ะดีาษทำดีทำ�าหน�าทำ��เหม่�อนเป'นหน�วยคืวาม่
จั�าชั่��วคืรู้าว ตั�วแปรู้ใน JavaScript ก/ม่�คืวาม่
หม่ายในทำ�านองเดี�ยวก�น คื�อม่�หน�าทำ��ไว�เก/บขี�อม่�ลชั่��วคืรู้าวในรู้ะหว�างการู้ทำ�างานขีอง
โปรู้แกรู้ม่
ตั�วแปรู้ใน JAVASCRIPT
การู้ตั��งชั่��อตั�วแปรู้ ม่�กฎการู้ตั��งชั่��อดี�งน�� ตั��งชั่��อโดียใชั่�ตั�วอ�กษรู้ภาษาอ�งกฤษตั�วพื้�ม่พื้$ใหญ่� หรู้�อเล/ก (A-
Z, a-z) ตั�วเลขี (0-9) และเคืรู้��องหม่ายขี�ดีล�าง( _) “ห�าม่ตั��งชั่��อน�าหน�าดี�วยตั�วเลขี เชั่�น 007_spy” “ห�าม่ม่�ชั่�องว�างในชั่��อ เชั่�น number of fish” หากตั�องการู้
เว�นให�ใชั่� เคืรู้��องหม่ายขี�ดีล�าง( _) เชั่�น number_of _fish ห�าม่ตั��งชั่��อก�บคื�าส่งวน การู้ตั��งชั่��อตั�วพื้�ม่พื้$ใหญ่�และพื้�ม่พื้$เล/กจั�ดีเป'นคืนละชั่��อก�น เชั่�น
TOTAL คืนละตั�วก�บ total ชั่��อขีองตั�วแปรู้ยาวไดี�ไม่�จั�าก�ดีแตั�ตั�องอย��ในบรู้รู้ทำ�ดีเดี�ยวก�น
ตั�วแปรู้ใน JAVASCRIPT
ค(าสงวินใน JavaScript ค(าสงวิน(Reserved word) หมายถ�งค(าท �ภาษาสงวินไวิ�เป#นค(าท �ใช�ในโปรแกรมและม หน�าท �เฉพาะอย)�
แล�วิ จ�งห�ามน(ามาต้�!งเป#นช0�อขีองต้�วิแปร เพราะ อาจจะท(าให�โปรแกรมเก�ดควิามผ�ดพลาดได� โดย
ค(าสงวินเหล�าน !ได�แก�
ตั�วแปรู้ใน JAVASCRIPT
abstract else instanceof super boolean enum int switch break export interface synchronized byte extends let this case false long throw catch final native throws char finally new transient class float null true const for package try continue function private typeof debugger goto protected var default if public void delete implements return volatile do import short while double in static with
ตั�วแปรู้ใน JAVASCRIPT
ชั่น�ดีขี�อม่�ลขีองตั�วแปรู้ ตั�วแปรู้ส่าม่ารู้ถเก/บขี�อม่�ล ปรู้ะเภทำตั�างๆ ไดี�ดี�งน��
ขี�อม่�ลตั�วเลขี (Number) เก/บเลขีจั�านวนเตั/ม่และจั�านวนทำศน�ยม่
ขี�อม่�ลตัรู้รู้กะ (Boolean) เก/บคื�าคืวาม่จัรู้�งและ เทำ/จั (True / False)
ขี�อม่�ลส่ตัรู้�ง (String) เก/บคื�าขี�อคืวาม่ เชั่�นHello\
ขี�อม่�ลว�าง (Object) เก/บคื�าว�างเปล�า ไม่�ม่�ขี�อม่�ล
ตั�วแปรู้ใน JAVASCRIPT
การู้ก�าหนดีคื�าให�ตั�วแปรู้ โดียเรู้าจัะใชั่� เคืรู้��องหม่ายเทำ�าก�บ (=) ในการู้ก�าหนดีคื�า เขี�าไปเก/บในตั�วแปรู้ เชั่�น
Total = 30 หม่ายถ-ง ตั�วแปรู้ ชั่��อ Total เก/บคื�า 30
ตั�วแปรู้ใน JAVASCRIPT
การใช�งานอาร,เรย, (Array) อาร,เรย,ค0อการน(าต้�วิแปรหลายๆ ต้�วิท �ม ชน�ดขีอง
ขี�อม)ลเหม0อนก�นมาจ�ดรวิมอย)�เป#นกล��ม โดย ต้�วิแปรแต้�ละต้�วิเราจะเร ยกวิ�า สมาช�ก
“Member” ในอาร,เรย,การประกาศต้�วิแปรอาร,เรย,สามารถท(าได�ด�งน !
ตั�วแปรู้ใน JavaScript
ชั่��ออารู้$เรู้ย$= new Array(จั�านวนส่ม่าชั่�ก)
scores= new Array(4)
การอ�างอ�งสมาช�กในอาร,เรย,เราจะใช� เลขีอ�นเด9กซ,(Index) โดยสมาช�กต้�วิแรกจะเร��มจากศ)นย, จนถ�ง
สมาช�กท�!งหมดต้�วิส�ดท�าย ด�งต้�วิอย�าง โดยม วิ�ธี การ อ�างอ�ง 2 แบบค0อ แบบท ละสมาช�ก และแบบคร�!ง
เด ยวิท�กสมาช�ก
ตั�วแปรู้ใน JavaScript
ชั่��ออารู้$เรู้ย$[อ�นเดี/กซึ่$] = คื�า ตั�วอย�าง scores[0] = 10;
แบบคร�!งเด ยวิท�กสมาช�ก ตั�วแปรู้ใน JavaScript
ชั่��ออารู้$เรู้ย$= [ คื�าขีองส่ม่าชั่�กตั�วแรู้ก , คื�าขีองส่ม่าชั่�กตั�วทำ��ส่อง....];
ตั�วอย�าง scores = new Array[10,40,120,55];
จากค(าส��งจะเห9นวิ�าม อาร,เรย,ท �ม สมาช�กท�!งหมด 4 ต้�วิ เก9บค�า 10 40 120 55 ในสมาช�กแต้�ละต้�วิต้าม
ล(าด�บ เราสามารถน(าสมาช�กแค�ละต้�วิมาใช�งานได�เหม0อนต้�วิแปรด�งน !
ตั�วแปรู้ใน JavaScript
total Scores= scores[0]+ scores[2]+ scores[3];Document.write(totalScores);
การใช�งานสต้ร�ง (string) การใช�งานสต้ร�ง สต้ร�ง ค0อ ขี�อควิามเราสามารถอ�างอ�งอ�กขีระแต้�ละต้�วิได�ด�วิย
CharAt เช�น test= “This is a test”
document.write(test. CharAt(0)); ผลล�พธี,แสดงอ�กขีระ T
document.write(test. CharAt(11)); ผลล�พธี,แสดงอ�กขีระ e
document.write(test. CharAt(8)); ผลล�พธี,แสดงอ�กขีระ a
ตั�วแปรู้ใน JavaScript
การท(างานสต้ร�งย�อย (Substring) บางคร�!งเรา ต้�องการเพ ยงบางส�วินออกมาใช�งาน ซ��งก9สามารถ
ท(าได�ด�งน !
ตั�วแปรู้ใน JavaScript
ช0�อต้�วิแปรสต้ร�ง.substring(อ�นเด9กซ,เร��ม,อ�นเด9กซ,จบ);
Alpha = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;alert(Alpha.charAt(0)); แสดงอ�กขีระ Aalert(Alpha.charAt(25)); แสดงอ�กขีระ Zalert(Alpha.charAt(0,4)); แสดงอ�กขีระ ABCDalert(Alpha.charAt(10,12)); แสดงอ�กขีระ KLalert(Alpha.charAt(12,10)); แสดงอ�กขีระ KL ไม�ใช� LKalert(Alpha.charAt(6,7)); แสดงอ�กขีระ Galert(Alpha.charAt(24,26)); แสดงอ�กขีระ YZalert(Alpha.charAt(0,26));
แสดงอ�กขีระ A ถ�ง Zalert(Alpha.charAt(7,7)); แสดงขี�อควิามวิ�าง
ตั�วแปรู้ใน JavaScript
จากค(าส��งก(าหนดต้�วิแปรสต้ร�งช0�อ Alpha เก9บอ�กขีระ ค�า A-Z จากน�!นเราใช� substring ด�งส�วินย�อยออก มา โดยใช�วิ�ธี การอ�นเด9กซ,ในการอ�างอ�งต้(าแหน�ง
ตั�วแปรู้ใน JavaScript
การค�นหาสต้ร�งย�อย เราสามารถค�นหาสต้ร�งย�อยใน สต้ร�งท �เราต้�องการได� โดยใช� indexOf
ชั่��อตั�วแปรู้ส่ตัรู้�ง. indexOf(“ส่ตัรู้�งทำ��”ใชั่�คื�นหา );
ในการค�นหาต้(าแหน�ง หากพบจะแสดงค�าอ�นเด9กซ, ออกมา แต้�หากหาไม�พบจะแสดงค�าลบหน��ง ด�ง
ต้�วิอย�างtest= “This is a test” ;
alert(test.indexOf(“This”)); ผลล�พธี,จะ แสดงต้(าแหน�งท � 0
alert(test.indexOf(“this”)); ผลล�พธี,จะ แสดงต้(าแหน�งท � -1
ตั�วแปรู้ใน JavaScript
