Tài liệu học lập trình javascript

Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript Tài liệu học lập trình javascript

JAVASCRIPT Ba ̀ i 1: TÔ ̉ NG QUAN VÊ ̀ JAVASCRIPT. 1. Đă ̣ c tı ́ nh cu ̉ a ngôn ngư Javascript: J (embedded) hoă ̣ c tı ́ ch hơp (integated) va ̀ o tâ ̣ p tin HTML chuâ ̉ n. Khi file đơc load trong Browser (co ́ support cho JavaScript), Browser se ̃ thông di ̣ ch ca ́ c Script va ̀ thưc hiê ̣ n ca ́ c công viê ̣ c xa ́ c đnh. Chưng trı ̀ nh nguô ̀ n JavaScript đơc thông di ̣ ch trong trang HTML sau khi toa ̀ n bô ̣ trang đơc load nhưng trư ́ c khi trang đơc hiê ̉ n thi ̣ . Javascript la ̀ mô ̣ t ngôn ngư co ́ đă ̣ c tı ́ nh: • Đn gia ̉ n. • Đô ̣ ng (Dynamic). • Hư ́ ng đô ́ i tư ̣ ng (Object Oriented). 2. Ngôn ngư JavaScript: Mô ̣ t trong nhưng đă ̣ c tı ́ nh quan tro ̣ ng cu ̉ a ngôn ngư JavaScript la ̀ kha ̉ năng ta ̣ o va ̀ sư du ̣ ng ca ́ c đô ́ i tư ̣ ng (Object). Ca ́ c Object na ̀ y cho phe ́ p ngư ̀ i lâ ̣ p trı ̀ nh sư du ̣ ng đê ̉ pha ́ t triê ̉ n ưng du ̣ ng. Trong JavaScript ,ca ́ c Object đơc nhı ̀ n theo 2 khı ́ a ca ̣ nh: a. Ca ́ c Object đa ̃ tô ̀ n ta ̣ i. b. Ca ́ c Object do ngư ̀ i lâ ̣ p trı ̀ nh xây dưng. Trong ca ́ c Object đa ̃ tô ̀ n ta ̣ i đơc chia tha ̀ nh 2 kiê ̉ u: a. Ca ́ c Object cu ̉ a JavaScript (JavaScript Built-in Object). b. Ca ́ c đô ́ i tư ̣ ng đơc cung câ ́ p bơi môi trư ̀ ng Netscape. 3. Built-in Object trong JavaScript: JavaScript cung câ ́ p 1 bô ̣ ca ́ c Built-in Object đê ̉ cung câ ́ p ca ́ c thông tin vê ̀ sư hiê ̣ n ha ̀ nh cu ̉ a ca ́ c đô ́ i tư ̣ ng đơc load trong trang Web va ̀ nô ̣ i dung cu ̉ a no ́ .Ca ́ c đô ́ i tư ̣ ng na ̀ y bao gô ̀ m ca ́ c phương pha ́ p (Method) la ̀ m viê ̣ c vơi ca ́ c thuô ̣ c tı ́ nh (Properties) cu ̉ a no ́ . 4. Ca ́ c đô ́ i tư ̣ ng đơc cung câ ́ p bơi môi trư ̀ ng Netscape: Netscape Navigator cung câ ́ p ca ́ c đô ́ i tư ̣ ng cho phe ́ p JavaScript tưng ta ́ c vơi file HTML, ca ́ c đô ́ i tư ̣ ng na ̀ y cho phe ́ p chu ́ ng ta điê ̀ u khiê ̉ n viê ̣ c hiê ̉ n thi ̣ thông tin va ̀ đa ́ p ưng ca ́ c sư kiê ̣ n trong môi trư ̀ ng Navigator.Vı ́ du ̣ avascript la ̀ mô ̣ t ngôn ngư thông di ̣ ch (interpreter), chưng trı ̀ nh nguô ̀ n cu ̉ a no ́ đơc nhu ́ ng Đô ́ i tư ̣ ng Window Mô ta ̉ Cung câ ́ p ca ́ c phưng pha ́ p va ̀ ca ́ c tı ́ nh châ ́ t cho cưa sô ̉ hiê ̣ n ha ̀ nh cu ̉ a trı ̀ nh duyê ̣ t,bao gô ̀ m ca ́ c đô ́ i tư ̣ ng cho mô ̃ i frame. JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 1 Location History Document Cung câ ́ p ca ́ c tı ́ nh châ ́ t va ̀ phưng pha ́ p la ̀ m viê ̣ c vơi ca ́ c đa chı ̉ URL hiê ̣ n ha ̀ nh đơc mơ. Ca ́ c đô ́ i tư ̣ ng history cung câ ́ p thông tin vê ̀ ca ́ c danh sa ́ ch cu ̃ va ̀ co ́ thê ̉ giơi ha ̣ n sư tưng ta ́ c vơi danh sa ́ ch. Đây la ̀ mô ̣ t đô ́ i tư ̣ ng đơc sư du ̣ ng nhiê ̀ u nhâ ́ t .No ́ chưa đng ca ́ c Đô ́ i tư ̣ ng,tı ́ nh châ ́ t va ̀ ca ́ c phưng pha ́ p la ̀ m viê ̣ c vơi ca ́ c tha ̀ nh phâ ̀ n cu ̉ a ta ̀ i liê ̣ u như ca ́ c :form,link,anchor,applet. 5. Ca ́ c đô ́ i tư ̣ ng do ngư ̀ i lâ ̣ p trı ̀ nh xây dưng: a. Đnh nghı ̃ a thuô ̣ c tı ́ nh cu ̉ a đô ́ i tư ̣ ng: (Object Properties) Cu ́ pha ́ p : Object-name.Property-name (tên đô ́ i tư ̣ ng.tên đă ̣ c tı ́ nh) Vı ́ du ̣ :Mô ̣ t đô ́ i tư ̣ ng airplane co ́ ca ́ c thuô ̣ c tı ́ nh như sau: Airplane.model Airplane.price Airplane.seating Airplane.maxspeed Airplane.fuel b. Thêm ca ́ c phưng pha ́ p cho đô ́ i tư ̣ ng:( Method to Object) Sau khi đa ̃ co ́ ca ́ c thông tin vê ̀ airplane ta tiê ́ p tu ̣ c xây dưng phưng pha ́ p đê ̉ sư du ̣ ng thông tin na ̀ y.Vı ́ du ̣ ba ̣ n muô ́ n in ra mô ta ̉ cu ̉ a airplane hoă ̣ c tı ́ nh toa ́ n khoa ̉ ng ca ́ ch tô ́ i đa cu ̉ a cuô ̣ c ha ̀ nh trı ̀ nh vơi nhiên liê ̣ u đa ̃ co ́ : Airplane.description() Airplane.distance() c. Ta ̣ o mô ̣ t instance cu ̉ a đô ́ i tư ̣ ng: Trư ́ c khi thao ta ́ c vơi mô ̣ t đô ́ i tư ̣ ng cu ̉ a JavaScript ta pha ̉ i ta ̣ o mô ̣ t instance cho đô ́ i tư ̣ ng đo ́ . 6 . Nhu ́ ng JavaScript va ̀ o trong tâ ̣ p tin HTML: Cu ́ pha ́ p: <SCRIPT LANGUAGE="JavaScript"> JavaScript Program </SCRIPT> Thuô ̣ c tı ́ nh cu ̉ a the ̉ SCRIPT + SRC :Đa chı ̉ URL chı ̉ đê ́ n tâ ̣ p tin chưng trı ̀ nh JavaScript (*.js) + LANGUAGE: Chı ̉ đnh ngôn ngư đơc sư du ̣ ng trong Script va ̀ ca ́ c phiên ba ̉ n sư du ̣ ng (vı ́ du ̣ như :JavaScript ,JavaScript .1.2 vv¼ ,VBScript). 7. Â ̉ n ca ́ c Scripts đô ́ i vơ ́ i ca ́ c Browser không cung câ ́ p JavaScript: <SCRIPT LANGUAGE="JavaScript"> <!- - Do ̀ ng dâ ́ u Script đô ́ i vơi ca ́ c Browser không cung câ ́ p (support) JavaScript Program //Do ̀ ng kê ́ t thu ́ c viê ̣ c dâ ́ u Script va ̀ chu ́ thı ́ ch - - > </SCRIPT> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 2 8. Sư ̉ du ̣ ng tâ ̣ p tin JavaScript bên ngoa ̀ i : <SCRIPT LANGUAGE="JavaScript" SRC="http://www.hcmuns.edu.vn/scroll.js"> <!- - Do ̀ ng dâ ́ u Script đô ́ i vơi ca ́ c Browser không cung câ ́ p (support) JavaScript Program //Do ̀ ng kê ́ t thu ́ c viê ̣ c dâ ́ u Script va ̀ chu ́ thı ́ ch - - > </SCRIPT> 9. Thêm chưng trı ̀ nh va ̀ o tâ ̣ p tin HTML: <HTML> <HEAD> <TITLE>Listing 2.1</TITLE> </HEAD> <BODY> Here is result: <SCRIPT LANGUAGE="Javascript"> <! document.writeln("It work<BR>"); > </SCRIPT> </BODY> </HTML> Ba ̀ i 2: SƯ DU ̣ NG JAVASCRIPT 1. Cu ́ pha ́ p cơ ba ̉ n cu ̉ a lê ̣ nh : JavaScript xây dưng ca ́ c ha ̀ m,ca ́ c pha ́ t biê ̉ u,ca ́ c toa ́ n tư va ̀ ca ́ c biê ̉ u thưc trên cu ̀ ng mô ̣ t do ̀ ng va ̀ kê ́ t thu ́ c bă ̀ ng ; Vı ́ du ̣ : document.writeln("It work<BR>"); 2. Ca ́ c khô ́ i lê ̣ nh: Nhiê ̀ u do ̀ ng lê ̣ nh co ́ thê ̉ đơc liên kê ́ t vơi nhau va ̀ đơc bao bơi { Vı ́ du ̣ : { document.writeln("Does It work"); document.writeln("It work!"); } 3. Xuâ ́ t dư liê ̣ u ra cưa sô ̉ trı ̀ nh duyê ̣ t: Du ̀ ng 2 phưng pha ́ p document.write() va ̀ document.writeln() Vı ́ du ̣ : document.write("Test"); document.writeln("Test"); 4. Xuâ ́ t ca ́ c the ̉ HTML tư JavaScript } JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 3 Vı ́ du ̣ 1: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> This is text plain <BR> <B> Vı ́ du ̣ 2: <HTML> <HEAD> <TITLE>Example 2.4 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- - <SCRIPT LANGUAGE="Javascript"> <!- - document.write("This is text bold </B>"); - -> </SCRIPT> </BODY> </HTML> document.write('<IMG SRC="welcome.gif">'); document.write("<BR><H1>WELCOME TO NETSCAPE 2.1</H1>"); - -> </SCRIPT> </BODY> </HTML> 5. Sư du ̣ ng phưng pha ́ p writeln() vơ ́ i the ̉ PRE: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="Javascript"> <!- - document.writeln("One,"); 6. Ca ́ c kı ́ tư đă ̣ c biê ̣ t trong chuô ̉ i: \n : New line \t : Tab \r : carriage return \f : form feed \b: backspace Vı ́ du ̣ : document.writeln("It work!\n"); 7. La ̀ m viê ̣ c vơ ́ i ca ́ c dialog boxes document.writeln("Two,"); document.write("Three"); document.write(" "); - -> </SCRIPT> </PRE> </BODY> </HTML> Sư du ̣ ng ha ̀ m alert() đê ̉ hiê ̉ n thi ̣ thông ba ́ o trong mô ̣ t hô ̣ p. Vı ́ du ̣ : <HTML> <HEAD> <TITLE>Example 2.5 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- - alert("Welcome to Netscape Navigator 21"); document.write('<IMG SRC="welcome.gif">'); - -> </SCRIPT> </BODY> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 4 8. Tưng ta ́ c vơ ́ i ngư ̀ i sư du ̣ ng: Sư du ̣ ng phưng pha ́ p promt() đê ̉ tưng ta ́ c vơi ngư ̀ i sư du ̣ ng. Vı ́ du ̣ 1: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- - document.write("Your favorite color is:"); document.writeln(prompt("enter your favorite color:","Blue")); - -> </SCRIPT> </BODY> </HTML> Vı ́ du ̣ 2: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- - document.write('<IMG SRC="welcome.gif">'); Sư du ̣ ng dâ ́ u + đê ̉ cô ̣ ng 2 chuô ̉ i đn la ̣ i: Vı ́ du ̣ 3: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!- - document.write('<IMG SRC="welcome.gif">'); 9. Ca ́ c kiê ̉ u dư liê ̣ u trong JavaScript: a. Dư liê ̣ u kiê ̉ u sô ́ : + Sô ́ nguyên: vı ́ du ̣ 720 + Sô ́ Octal: vı ́ du ̣ :056 + Sô ́ Hexa:vı ́ du ̣ :0x5F + Sô ́ thâ ̣ p phân :vı ́ du ̣ :7.24 , -34.2 ,2E3 b. Dư liê ̣ u kiê ̉ u chuô ̉ i: vı ́ du ̣ : " Hello" '245' " " c. Dư liê ̣ u kiê ̉ u Boolean: Kê ́ t qua ̉ tra ̉ vê ̀ la ̀ true hoă ̣ c false. document.write("<H1>Greeting ,"); document.writeln(prompt("enter your name:","name")); document.write("Welcome to netscape navigator 2.01 </H1>"); - -> </SCRIPT> </BODY> </HTML> document.write("<H1>Greeting ," + prompt("enter your name:","name") + " Welcome to netscape navigator 2.01 </H1>"); - -> </SCRIPT> </BODY> </HTML> JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 5 d. Dư liê ̣ u kiê ̉ u null: Tra ̉ vê ̀ gia ́ tri ̣ rô ̃ ng. e. Dư liê ̣ u kiê ̉ u văn ba ̉ n (giô ́ ng như kiê ̉ u chuô ̉ i) 10. Ta ̣ o biê ́ n trong JavaScript: Var example; Var example="Hello"; Ta co ́ thê ̉ du ̀ ng document.write(example); đê ̉ xuâ ́ t nô ̣ i dung cu ̉ a biê ́ n. Vı ́ du ̣ 1: du ̀ ng tư kho ́ a var đê ̉ khai ba ́ o biê ́ n <HTML> <HEAD> <TITLE>Example 3.1</TITLE> <SCRIPT LANGUAGE="Javascript"> <!- - var name=prompt("enter your name:","name"); - -> </SCRIPT> </HEAD> Vı ́ du 2: ta ̣ o la ̣ i mô ̣ t gia ́ tri ̣ mơi cho biê ́ n <HTML> <HEAD> <TITLE>Example 3.2</TITLE> <SCRIPT LANGUAGE="Javascript"> var name=prompt("enter your name:","name"); alert ("greeting " + name + " , "); name=prompt("enter your friend's name:","friend's </SCRIPT> name"); <BODY> <SCRIPT LANGUAGE="Javascript"> <! document.write('<IMG SRC="Welcome.gif">'); document.write("<H1>Greeting ," + name + " Welcome to netscape navigator 2.01 </H1>"); > </SCRIPT> </BODY> </HTML> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <! document.write('<IMG SRC="Welcome.gif">'); document.write("<H1>Greeting ," + name + " Welcome to netscape navigator 2.01 </H1>"); > </SCRIPT> </BODY> </HTML> 11. La ̀ m viê ̣ c vơ ́ i biê ́ n va ̀ biê ̉ u thưc: • Thiê ́ t lâ ̣ p biê ̉ u thưc: Cu ́ pha ́ p: <biê ́ n> <toa ́ n tư > <biê ̉ u thưc> * Toa ́ n tư: = Thiê ́ t lâ ̣ p gia ́ tri ̣ bên pha ̉ i cho bên tra ́ i Vı ́ du ̣ :x=5 += Cô ̣ ng tra ́ i va ̀ pha ̉ i ,sau đo ́ ga ́ n kê ́ t qua ̉ cho bên tra ́ i phe ́ p toa ́ n Vı ́ du ̣ : cho x=10,y=5 x+=y => x=15 -= Trư bên tra ́ i cho bên pha ̉ i ,ga ́ n kê ́ t qua ̉ la ̣ i cho bên tra ́ i x-=y => x=5 JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 6 *= Nhân bên tra ́ i cho bên pha ̉ i,ga ́ n kê ́ t qua ̉ cho bên tra ́ i x*=y => x=50 /= Chia bên tra ́ i cho pha ̉ i ,ga ́ n kê ́ t qua ̉ la ̣ i cho bên tra ́ i x/=y => x=2 %= Chia bên tra ́ i cho bên pha ̉ i va ̀ lâ ́ y sô ́ dư ga ́ n la ̣ i cho bên tra ́ i x%=y => x=0 * Ca ́ c toa ́ n tư kha ́ c: Vı ́ du ̣ : x+=15+3 => x=18 8+5 32.5 * 72.3 12 % 5 Dâ ́ u ++ va ̀ dâ ́ u - - va ̀ dâ ́ u - Vı ́ du ̣ : x=5; • Phe ́ p toa ́ n Logic && : va ̀ ||: hoă ̣ c ! not Vı ́ du ̣ : x=5 ,y=2 ,c=3 (x>y) && (x>c) false && anything is always false (x>y) || (c<x) => true !x • Toa ́ n tư ̉ so sa ́ nh trong JavaScript: == != > < >= <= Vı ́ du ̣ : • Toa ́ n tư điê ̀ u kiê ̣ n: Cu ́ pha ́ p: (điê ̀ u kiê ̣ n ) ? gia ́ tri ̣ 1 : gia ́ tri ̣ 2 Nê ́ u điê ̀ u kiê ̣ n đu ́ ng thı ̀ tra ̉ vê ̀ gia ́ tri ̣ 1 Nê ́ u điê ̀ u kiê ̣ n sai thı ̀ tra ̉ vê ̀ gia ́ tri ̣ 2 Vı ́ du ̣ : y=++x; (=> y=6 vı ̀ x tăng lên 6) z=x++; (=> z=6 vı ̀ sau đo ́ x ga ́ n cho z) sau đo ́ x tăng 1 => x=7 Do đo ́ ta co ́ kê ́ t qua ̉ cuô ́ i cu ̀ ng la ̀ : x=7;y=6;z=6; Vı ́ du ̣ : x=5; x=-x => x=-5 1==1 => true 3<1 =>false 5 >=4 =>true "the" != "he" => true 4=="4" =>true JAVASCRIPT [...]... trúc kế t hơp : if điề u kiê ̣n 1 { Các lê ̣nh JavaScript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 8 if điề u kiê ̣n 2 { Các lê ̣nh JavaScript } else { các lê ̣nh khác } Các lê ̣nh JavaScript } else { Các lê ̣nh khác } Vı́ du ̣ 1 : Sư du ̣ng phưng pháp confirm() vơi phát biể u if Example 3.3 var question="What is 10+10 ?"; var answer=20;... JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 9 ̀ ̀ BAI 3: HAM V ̀ ĐÔI TỰ NG A ́ Trong kỹ thuâ ̣t lâ ̣p trı̀nh các lâ ̣p trı̀nh viên thừng sư du ̣ng hàm để thưc hiê ̣n mô ̣t đoa ̣n chưng trı̀nh thể hiê ̣n cho mô ̣t module nào đó để thưc hiê ̣n mô ̣t công viê ̣c nào đó Trong Javascript có các hàm đơc... Tư khóa this: quy cho đố i tựng hiê ̣n hành.Trong Javascript Form là mô ̣ đố i tựng.Các thành phầ n của Form bao gồ m text fields, checkboxes, radio buttons, buttons, và selection lists Vı́ du ̣: Các bô ̣ quản lý sư kiê ̣n trong Javascript Đố i tựng Bô ̣ quản lý sư kiê ̣n tưng ưng JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 16 Selection list... 5.3 Enter a JavaScript mathematical... LANGUAGE= "JavaScript" > JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 19 document.write(i + " " + prompt('Enter food number ' + i, 'food' ) + ''); } - -> 2 V ̀ ng lă ̣p while : o Cú pháp: While ( điề u kiê ̣n) { lê ̣nh JavaScript. .. "plc.htm","newWindow","toolbar=yes,location=1,directories=yes,status=yes, JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 22 menubar=1,scroolbar=yes,resizable=0,copyhistory=1,width=200,height=200"); Vı́ du ̣: WINDOWS PLC,... SRC="correct.gif">'; JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 11 var incorrect=''; 4 //ASK THE QUESTION var response=prompt(output,"0"); //CHECK THE RESULT if (chances > 1) { return (response == answer) ? correct : testQuestion(question,chances-1); } else { return (response == answer) ? correct : incorrect; } } // STOP HIDING FROM OTHER BROWSERS -> ... student1.displayProfile(); Vı́ du: 4 Example 4.3 JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 13 document.writeln("Social Security Number: " + this.socsec);... this.displayInfo=displayInfo; } newEmployee=new employee(); // STOP HIDING FROM OTHER BROWSERS -> Vi du: Javascript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 15 Tên sư kiê ̣n blur click change focus load mouseover select submit unload Mô tả Xay ra khi điể m tâ ̣p trungcủa ngõ vào đơc di chuyể n ra ̃ khỏi mô . kiê ̉ u: a. Ca ́ c Object cu ̉ a JavaScript (JavaScript Built-in Object). b. Ca ́ c đô ́ i tư ̣ ng đơc cung câ ́ p bơi môi trư ̀ ng Netscape. 3. Built-in Object trong JavaScript: JavaScript cung câ ́ p. cu ̉ a JavaScript ta pha ̉ i ta ̣ o mô ̣ t instance cho đô ́ i tư ̣ ng đo ́ . 6 . Nhu ́ ng JavaScript va ̀ o trong tâ ̣ p tin HTML: Cu ́ pha ́ p: <SCRIPT LANGUAGE=" ;JavaScript& quot;> JavaScript. kiê ̣ n 1 { Ca ́ c lê ̣ nh JavaScript JAVASCRIPT MEDIASPACE CLUB (HTD) PAGE: 8 if điê ̀ u kiê ̣ n 2 { Ca ́ c lê ̣ nh JavaScript } else { ca ́ c lê ̣ nh kha ́ c } Ca ́ c lê ̣ nh JavaScript } else { Ca ́ c