Chương VI: JavaScript docx

1 Thiết kế web Khoa CNTT-LHU 1 Ch Ch ươ ươ ng VI: JavaScript ng VI: JavaScript   Giới thiệu ngôn ngữ Script Giới thiệu ngôn ngữ Script   Nhập môn JavaScript Nhập môn JavaScript   Cú pháp và quy ước Cú pháp và quy ước   Biến, dữ liệu và các lệnh Biến, dữ liệu và các lệnh   Hàm, lớp ñối tượng, sự kiện Hàm, lớp ñối tượng, sự kiện   Các ñối tượng thông dụng Các ñối tượng thông dụng Thiết kế web Khoa CNTT-LHU 2 Giới thiệu ngôn ngữ Script 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,… 2 Thiết kế web Khoa CNTT-LHU 3 Ứ Ứ ng dụng Script ng dụng Script  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 4 JavaScript 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 3 Thiết kế web Khoa CNTT-LHU 5 Nhập môn JavaScript Nhập môn JavaScript (1) (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ẻ <SCRIPT> </SCRIPT> – 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 <head> và </head>: ñoạn script sẽ thực thi ngay khi trang web ñược mở.  ðặt giữa tag <body> và </body>: ð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 <head>).  Số lượng ñoạn script không hạn chế. Thiết kế web Khoa CNTT-LHU 6 Nhập môn JavaScript (2) Nhập môn JavaScript (2)  Sö dông thÎ <SCRIPT> </SCRIPT> Èn çc Script ®èi víi çc webbrowser kh«ng support script <SCRIPT LANGUAGE=“JavaScript”> // INSERT ALL JavaScript HERE </SCRIPT> <SCRIPT LANGUAGE=”JavaScript”> <! From here the JavaScript code hidden // INSERT ALL JavaScript HERE // This is where the hidden ends > </SCRIPT> Ghi chó trong JavaScript gièng trong C++ 4 Thiết kế web Khoa CNTT-LHU 7 Nhập môn JavaScript (3) Nhập môn JavaScript (3)  VÝ dô trang web ®Çu tiªn víi JavaScript <html> <head> <title>New Page 1</title> </head> <body> <script language="JavaScript"> document.write("Xin chao ban"); </script> </body> </html> Thiết kế web Khoa CNTT-LHU 8 Nhập môn JavaScript (4) Nhập môn JavaScript (4)  Sö dông çc file nguån JavaScript  Có ph¸p: <SCRIPT SRC="file_name.js"> </SCRIPT> Trong file “general.js” // JavaScript Document function sayhello() { alert('Hello, Chao cac ban lop 04CT1 \nChuc cac ban mot ngay vui ve!'); } Trong file “6_1.htm” <script language="javascript“ src="general.js"> </script> <center> <a href=" javascript:sayhello()"> <img src="images/TPHCM17.jpg" border="0" alt="TPHCM"> </a> </center> 5 Thit k web Khoa CNTT-LHU 9 Nhp mụn JavaScript (5) Nhp mụn JavaScript (5) Thẻ <NOSCRIPT> </NOSCRIPT> <NOSCRIPT> <B> 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! <BR> <A HREF="http://home.netscape.com/comprd/mirror/index.html"> Hãy kích chuột vào đây để load về Netscape mới hơn </A> </BR> 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 </NOSCRIPT> Thit k web Khoa CNTT-LHU 10 Nhp mụn JavaScript (6) Nhp 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() <HTML> <HEAD> <TITLE>Ouputting Text</TITLE> </HEAD> <BODY> This text is plain.<BR> <SCRIPT LANGUAGE="JavaScript"> <! HIDE FROM OTHER BROWSERS document.write(<b>This text is bold.</b>"); // STOP HIDING FROM OTHER BROWSERS > </SCRIPT> </BODY> </HTML> 6 Thiết kế web Khoa CNTT-LHU 11 Nhập môn JavaScript (7) Nhập môn JavaScript (7)  Giao tiÕp víi ng−êi sö dông <SCRIPT LANGUAGE= "JavaScript"> var name=window.prompt("Hello! What’s your name ?","Lung"); document.write("Hello " + name + " ! I hope you like JavaScript "); </SCRIPT> Thiết kế web Khoa CNTT-LHU 12 Nhập môn JavaScript (8) Nhập môn JavaScript (8)  Giao tiÕp víi ng−êi sö dông <body> <form name=" FormThu" method="post"> ðiền tên của bạn vào ñây ñể kiểm tra: <input type="text" name=" UserName" value="Tên bạn"> <input type="button" value =" kiemtra" onclick="kiemtra(FormThu);"> </form> <script language="JavaScript"> function kiemtra( form) { alert("ban da bam nut kiem tra"); document.write("Tên bạn là <b>" + form.UserName.value + "</b>"); } </script> </body> 7 Thiết kế web Khoa CNTT-LHU 13 Cú pháp và quy ước 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ụ : <form method="get"> <input value = 'He said "Javascript is good" '> <input type="button" value="Click Me!" onclick= "alert('Hello');"> </form> Thiết kế web Khoa CNTT-LHU 14 Cú pháp và quy ước 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" 8 Thiết kế web Khoa CNTT-LHU 15 Cú pháp và quy ước 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 16 Danh sách từ khóa Danh sách từ khóa 9 Thit k web Khoa CNTT-LHU 17 Biến trong JavaScript (1) 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 <body> <script language= "JavaScript"> var fruit='apples'; numfruit=12; // khụng ủnh ngha var numfruit = numfruit + 20 + " " + fruit; var temp ="There are " + numfruit ; document.write(temp); </script> </body> <SCRIPT LANGUAGE="JavaScript"> var ten; // gỏn giỏ tr cho bin ten = tụi l 04ct; // vit giỏ tr ca bin ra IE document.write(ten); // gỏn giỏ tr cho bin ten = 1000; // vit giỏ tr ca bin ra IE document.write(ten); </SCRIPT> Thit k web Khoa CNTT-LHU 18 Biến trong JavaScript (2) 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 10 Thiết kế web Khoa CNTT-LHU 19 Các kiểu dữ liệu Các kiểu dữ liệu Thiết kế web Khoa CNTT-LHU 20 Biểu thức trong JavaScript Biểu thức trong JavaScript  Çc biÓu thøc trong JavaScript gÇn gièng víi C++  VÝ dô çc biÓu thøc trong JavaScript: a. 7 + 5 b. "7" + "5" c. 7 == 7 d. 7 >= 5 e. 7 <= 7 f. (7 < 5) ? 7 : 5 g. (7 >= 5) && (5 > 5) h. (7 >= 5) || (5 > 5) [...]... 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)... 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... k web Khoa CNTT-LHU 21 Cỏc l nh trong JavaScript (1) Bitwise Operators Operator Bitwise AND Usage a&b Bitwise OR a|b Bitwise XOR a^b Bitwise NOT ~a Left shift a > b Zero-fill right shift a >>> b Thi t k web Khoa CNTT-LHU 15 & 9 (1111 & 1001 = 1001) 15 | 9 (1111 | 1001 = 1111) 15 ^ 9 (1111 ^ 1001 = 0110) 22 11 Các lệnh trong JavaScript (2) Logical Operators Operator... 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 if Else for loop while loop Break, continue switch (expression){ case label : statement; break; default : statement;} 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: ");... 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 vo ủõy: . web Khoa CNTT-LHU 1 Ch Ch ươ ươ ng VI: JavaScript ng VI: JavaScript   Giới thiệu ngôn ngữ Script Giới thiệu ngôn ngữ Script   Nhập môn JavaScript Nhập môn JavaScript   Cú pháp và quy ước Cú. trên server, … Thiết kế web Khoa CNTT-LHU 4 JavaScript JavaScript  Web ñộng -> Netscape -> Script Language: LiveScript => JavaScript  JavaScript là ngôn ngữ dưới dạng script có thể. 5 Nhập môn JavaScript Nhập môn JavaScript (1) (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ẻ <SCRIPT> </SCRIPT> – Sử dụng các file nguồn JavaScript –