Thiết kế web - Chương 6

Chia sẻ: Nguyen Van Nam | Ngày: | Loại File: PDF | Số trang:0

Thêm vào BST

Báo xấu

132
lượt xem 75
download

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

Tham khảo tài liệu 'thiết kế web - chương 6', công nghệ thông tin, quản trị web phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả

Chủ đề:

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

Lưu

Nội dung Text: Thiết kế web - Chương 6

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