Chương VI: JavaScript

Chia sẻ: Baby Love | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

153
lượt xem 57
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

là ngôn ngữ dạng thông dịch, cho phép web tương tác với người dùng, các ngôn ngữ scipt thông dụng.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Chương VI: JavaScript

Chương VI: JavaScript Gi i thi u ngôn ng Script Gi Nh p môn JavaScript Nh Cú pháp và quy ư c Cú Bi n, d li u và các l nh Bi Hàm, l p ñ i tư ng, s ki n Hàm, Các ñ i tư ng thông d ng Các Thi t k web Khoa CNTT-LHU 1 Gi i thi u ngôn ng Script Là ngôn ng d ng thông d ch Cho phép Web tương tác v i ngư i dùng Các ngôn ng script thông d ng – Javascript (Netscape) – Jscript (Microsoft) – VBScript (Microsoft) – PHP, CGI,… Thi t k web Khoa CNTT-LHU 2 1
ng d ng Script ng Client-Side – Th c hi n t i Browser (IE, Firefox, Nescape Navigator, Safari, ...) – Th c hi n các tương tác v i ngư i dùng, thay ñ i c u trúc trang web, ki m tra d li u ñư c nh p vào c a ngư i dùng, …) Server-Side – Th c hi n t i WebServer (IIS, Apache, Netscape Enterprise Server, ….) – Script t i Server-Side cho phép k t n i CSDL, chia s thông tin gi a các ngư i duy t web, truy c p h th ng file trên server, … Thi t k web Khoa CNTT-LHU 3 JavaScript Web ñ ng -> Netscape -> Script Language: LiveScript => JavaScript JavaScript là ngôn ng dư i d ng script có th g n v i các file HTML và dùng thông d ch (interpreter) JavaScript là ngôn ng d a trên ñ i tư ng: math, document, windows,… JavaScript không ph i là ngôn ng hư ng ñ i tư ng như C++, Java,… Thi t k ñ c l p v i h ñi u hành Thi t k web Khoa CNTT-LHU 4 2
Nh p môn JavaScript (1) Nhúng JavaScript vào file HTML : – S d ng các câu l nh và các hàm trong c p th ... – S d ng các file ngu n JavaScript – S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTML – S d ng th s ki n (event handlers) trong m t th HTML nào ñó? ð t gi a tag và : ño n script s th c thi ngay khi trang web ñư c m . ð t gi a tag và : ðo n script trong ph n body ñư c th c thi khi trang web ñang m (sau khi th c thi các ño n script có trong ph n ). S lư ng ño n script không h n ch . Thi t k web Khoa CNTT-LHU 5 Nh p môn JavaScript (2) Sö dông thÎ ... // INSERT ALL JavaScript HERE Èn c¸c Script ®èi víi c¸c webbrowser kh«ng support script Ghi chó trong JavaScript gièng trong C++ Thi t k web Khoa CNTT-LHU 6 3
Nh p môn JavaScript (3) VÝ dô trang web ®Çu tiªn víi JavaScript New Page 1 document.write("Xin chao ban"); Thi t k web Khoa CNTT-LHU 7 Nh p môn JavaScript (4) Sö dông c¸c file nguån JavaScript Có ph¸p: .... Trong file “6_1.htm” Trong file “general.js”
Nh p môn JavaScript (5) ThÎ … Trang nµy kh«ng sö dông JavaScript. Do ®ã b¹n cÇn sö dông browser Netscape Navigator tõ version 2.0 trë ®i! H·y kÝch chuét vµo ®©y ®Ó load vÒ Netscape míi h¬n NÕu b¹n ®· sö dông Netscape tõ 2.0 trë ®i mµ vÉn ®äc ®−îc dßng nµy h·y bËt Preferences/Advanced/JavaScript lªn Thi t k web Khoa CNTT-LHU 9 Nh p môn JavaScript (6) C¸ch dïng ®èi t−îng: – Gäi mét ph−¬ng thøc: ObjectName.MethodName() HiÓn thÞ mét dßng text dïng ®èi t−îng document – write() vµ writeln() Ouputting Text This text is plain. Thi t k web Khoa CNTT-LHU 10 5
Nh p môn JavaScript (7) Giao tiÕp víi ng−êi sö dông var name=window.prompt("Hello! What’s your name ?","Lung"); document.write("Hello " + name + " ! I hope you like JavaScript "); Thi t k web Khoa CNTT-LHU 11 Nh p môn JavaScript (8) Giao tiÕp víi ng−êi sö dông ði n tên c a b n vào ñây ñ ki m tra: function kiemtra(form) { alert("ban da bam nut kiem tra"); document.write("Tên b n là " + form.UserName.value + ""); } Thi t k web Khoa CNTT-LHU 12 6
Cú pháp và quy ư c Javascript phân bi t ch hoa – ch thư ng – Ví d : Hai bi n Java, java là khác nhau T t c các câu l nh javascript ñ u cách nhau b i d u “;” Không phân bi t kho ng tr ng, Tab, xu ng dòng trong câu l nh. Chu i trong javascript ñư c ñ t trong c p nháy ñơn (‘ ’) ho c nháy kép (“ ”) – Ví d : Thi t k web Khoa CNTT-LHU 13 Cú pháp và quy ư c - Special Characters Special Characters “\” – \n New line - \r Carriage return – \t Tab - \b : Backspace VD: "one line \n another line" Escaping Characters – \’ : D u nháy ñơn - \” : D u nháy kép VD: – var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service." document.write(quote) – var home = "c:\\temp" Thi t k web Khoa CNTT-LHU 14 7
Cú pháp và quy ư c Các lo i d u ngo c: – { } : ðánh d u kh i l nh – [ ] : S d ng trong c u trúc M ng – ( ) : S d ng trong hàm, thu c tính ñ i tư ng Tên bi n và hàm: – B t ñ u b ng Ký t (A..Z, a..z), _, $ – Không ñư c b t d u b ng ký s (0..9) – Không có kho ng tr ng gi a tên (bi n ho c hàm) – Không ñư c ñ t tên trùng t khóa VD: – X1, _bien10, $sotien – 0_bien1, bien 2, do, …: sai Thi t k web Khoa CNTT-LHU 15 Danh sách t khóa Thi t k web Khoa CNTT-LHU 16 8
BiÕn trong JavaScript (1) BiÕn vµ ph©n lo¹i biÕn – BiÕn toµn côc – BiÕn côc bé KiÓu d÷ liÖu: ng«n ng÷ cã tÝnh ®Þnh kiÓu thÊp var ten; var fruit='apples'; // gán giá tr cho bi n ten = “tôi là 04ct”; numfruit=12; // không ñ nh nghĩa var // vi t giá tr c a bi n ra IE numfruit = numfruit + 20 + " " + fruit; document.write(ten); var temp ="There are " + numfruit ; // gán giá tr cho bi n document.write(temp); ten = 1000; // vi t giá tr c a bi n ra IE document.write(ten); Thi t k web Khoa CNTT-LHU 17 BiÕn trong JavaScript (2) KiÓu d÷ liÖu: – kiÓu sè nguyªn: • HÖ c¬ sè 10: b¾t ®Çu b»ng sè # 0: 5356 • HÖ c¬ sè 8: b¾t ®Çu b»ng sè 0: 0453 • HÖ c¬ sè 16: b¾t ®Çu b»ng 0x: 0xF12 – kiÓu dÊu phÈy ®éng: • 9.87 • -0.85E4 • 9.87E14 • .98E-3 – kiÓu logic: true hoÆc false – kiÓu chuçi: “day la mot chuoi” hoac ‘day cung la mot string’ Thi t k web Khoa CNTT-LHU 18 9
Các ki u d li u Thi t k web Khoa CNTT-LHU 19 Bi u th c trong JavaScript C¸c biÓu thøc trong JavaScript gÇn gièng víi C++ VÝ dô c¸c biÓu thøc trong JavaScript: a. 7 + 5 f. (7 < 5) ? 7 : 5 b. "7" + "5" g. (7 >= 5) && (5 > 5) c. 7 == 7 h. (7 >= 5) || (5 > 5) d. 7 >= 5 e. 7
Data Type Conversion var answer = 42 Sau ñó có th gán: answer = "Thanks for all the fish...“ x = "The answer is " + 42 // returns "The answer is 42" y = 42 + " is the answer" // returns "42 is the answer" "37" - 7 // returns 30 "37" + 7 // returns 377 unassigned variables function f2() { function f1() { return var y - 2; return y - 2; } } f2() //returns NaN f1() //Causes runtime error Thi t k web Khoa CNTT-LHU 21 Các l nh trong JavaScript (1) Bitwise Operators Operator Usage Bitwise AND a&b Bitwise OR a|b 15 & 9 (1111 & 1001 = 1001) Bitwise XOR a^b 15 | 9 (1111 | 1001 = 1111) 15 ^ 9 (1111 ^ 1001 = 0110) Bitwise NOT ~a Left shift a > b Zero-fill right shift a >>> b Thi t k web Khoa CNTT-LHU 22 11
C¸c lÖnh trong JavaScript (2) Logical Operators Operator Usage && expr1 && expr2 || expr1 || expr2 ! !expr conditional operator – condition ? val1 : val2 status = (age >= 18) ? "adult" : "minor“ typeof 1. typeof operand 2. typeof (operand) Thi t k web Khoa CNTT-LHU 23 C¸c lÖnh trong JavaScript (3) C¸c lÖnh ®iÒu kiÖn, vßng lÆp switch (expression){ – if ... Else case label : statement; – for loop break; – while loop default : statement;} Break, continue – C¸c c©u lÖnh thao t¸c trªn ®èi t−îng – for ( in ) document.write("The properties of the Window object are: "); for (var x in window) document.write(" "+ x + ", "); Thi t k web Khoa CNTT-LHU 24 12
C¸c lÖnh trong JavaScript (4) new Có ph¸p objectvar = new object_type ( param1 [,param2]... [,paramN]) With with (object) { // statement } with (document){ write(“This is an example of the things that can be done ”); write(“With the with statment. ”); write(“This can really save some typing”); } Thi t k web Khoa CNTT-LHU 25 C¸c lÖnh trong JavaScript (5) VÝ dô phÐp to¸n new: function Nguoi(first_name, last_name, age, gt) { this.first_name=first_name; this.last_name=last_name; this.age=age; this.gt=gt; } Nguoi1= new Nguoi("Thuy", "Dau Bich", "20", "Female"); Nguoi2= new Nguoi("Nang", "Nguyen Duc", "22", "Male"); document.write ("1. "+Nguoi1.last_name+" " + Nguoi1.first_name + "" ); document.write("2. "+Nguoi2.last_name +" "+ Nguoi2.first_name + ""); Thi t k web Khoa CNTT-LHU 26 13
C¸c lÖnh trong JavaScript (6) C¸c hµm cã s½n – eval: retvar=eval (bÊt kú biÓu thøc hîp lÖ trong Java) var string=”10+ Math.sqrt(64)”; document.write(string+ “=”+ eval(string)); – parseInt(string, c¬ sè) – parseFloat(string) var x1="12"; var x3; x3=parseInt(x1,4); //x3=? x3=parseInt(x1,6); // x3=? Thi t k web Khoa CNTT-LHU 27 C¸c lÖnh trong JavaScript (7) M¶ng (Array) – myArray = new InitArray (10) • myArray[1] = "NghÖ An" • myArray[2] = "Lµo" function InitArray(numElements) { this.length = numElements; for (var x=1; x
Javascript - Hàm Cú pháp khai báo: function Tên_hàm(thamso1, thamso2,..) { // N i dung hàm } Hàm tr v giá tr : function Tên_hàm(thamso1, thamso2,..) { // N i dung hàm return (value); } Thi t k web Khoa CNTT-LHU 29 Ví d hàm ð nh nghĩa hàm: function Sum(x, y) { tong = x + y; return tong; } G i hàm: var x = Sum(30, 40); Thi t k web Khoa CNTT-LHU 30 15
L p ñ i tư ng Khai Khai báo l p: function Tên_l p() { //Khai Khai báo bi n thành viên this.bien1 = value1; this.bien2 = value2; } ð nh nghĩa hàm thành viên c a l p: Tên_L p.prototype.Tên_phươngth c = function(…) { …… //return value; } Thi t k web Khoa CNTT-LHU 31 Ví d l p Thi t k web Khoa CNTT-LHU 32 16
K th a l p ñ i tư ng Thi t k web Khoa CNTT-LHU 33 K th a l p ñ i tư ng Thi t k web Khoa CNTT-LHU 34 17
Sù kiÖn - Event (1) Event handler : – – function kiemtra() { alert("ban da bam nut kiem tra"); } Ði n tên c a b n vào ñây: Thi t k web Khoa CNTT-LHU 35 Sù kiÖn - Event (2) C¸c sù kiÖn th−êng x¶y ra: input focus bÞ xo¸ tõ thµnh phÇn form onBlur khi ng−êi dïng kÝch vµo c¸c thµnh phÇn hay liªn kÕt cña onClick form. onChange khi gi¸ trÞ cña thµnh phÇn ®−îc chän thay ®æi onFocus khi thµnh phÇn cña form ®−îc focus(lµm næi lªn). onLoad trang Web ®−îc load. onMouseOver khi di chuyÓn chuét qua kÕt nèi hay anchor. onSelect khi ng−êi sö dông lùa chän mét tr−êng nhËp d liÖu trªn form. onSubmit khi ng−êi dïng ®−a ra mét form. onUnLoad khi ng−êi dïng ®ãng mét trang Thi t k web Khoa CNTT-LHU 36 18
C¸c ®èi t−îng trong JavaScript String Number Array Date Math navigator window Document. location History Thi t k web Khoa CNTT-LHU 37 ð i tư ng String Thu c tính: – length : chi u dài c a chu i – constructor : Dùng ñ ki m tra ki u c a bi n – prototype : B sung prototype hàm cho m t ñ i tư ng – N i k t các chu i b ng toán t “+” var sTenBien = new String(); sTenBien = 256; if(sTenBien.constructor == String) { document.writeln("sTenBien la mot chuoi co chieu dai la:" + sTenBien.length); } else { document.writeln("sTenBien la mot so co gia tri la: " + sTenBien); } Thi t k web Khoa CNTT-LHU 38 19
ð i tư ng String s1 = "foo" //creates a string literal value s2 = new String("foo") //creates a String object S khác bi t: s1 = "2 + 2" //creates a string literal value s2 = new String("2 + 2")//creates a String object eval(s1) //returns the number 4 eval(s2) //returns the string "2 + 2" Phương th c – stringObj.anchor(anchorString) – t o Bookmark – strVariable.link(URL) – string1.concat([string2[, string3[,... [, stringn]]]]) – toLowerCase, toUpperCase var txt="Hello world!“ document.write(txt.length) document.write(txt.toUpperCase()) Thi t k web Khoa CNTT-LHU 39 ð i tư ng String – Các phương th c tư Thi t k web Khoa CNTT-LHU 40 20