›
›

Bài giảng Lập trình Web - Chương 4: Ngôn ngữ JavaScript trong trang Web - Trần Phước Tuấn

pdf 56 trang cucquyet12 2981
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình Web - Chương 4: Ngôn ngữ JavaScript trong trang Web - Trần Phước Tuấn", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_web_chuong_4_ngon_ngu_javascript_trong_t.pdf

Nội dung text: Bài giảng Lập trình Web - Chương 4: Ngôn ngữ JavaScript trong trang Web - Trần Phước Tuấn

  1. NgônNgôn ngngữữ JavaScriptJavaScript trongtrong trangtrang WebWeb Trần Phước Tuấn tranphuoctuan.khoatoan.dhsp@gmail.com
  2. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Tổng quan 2. Một ví dụ 3. Ngôn ngữ JavaScript 4. Một số hàm khác 7/24/2009 Lập trình Web - Trần Phước Tuấn 2
  3. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan GiGiớớii thithiệệuu DHTMLDHTML § DHTML= Dynamic HyperTextMarkup Language § DHTML = HTML + CSS + ClientScript+ HTML DOM § Tích hợp các tính năng của các trình duyệt thế hệ thứ 4 (IEv5, Netscape4, Firefox2.0+, Opera 7.0, ) 7/24/2009 Lập trình Web - Trần Phước Tuấn 3
  4. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan NgônNgôn ngngữữ ScriptScript § Là ngôn ngữ dạng thông dịch § Giúp trang web có tính tương tác tốt § Các ngôn ngữ script thông dụng –Javascript (Netscape) –Jscript (Microsoft) –VBScript (Microsoft) 7/24/2009 Lập trình Web - Trần Phước Tuấn 4
  5. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan § Ứng dụng ClientClient SideSide: – Thực hiện tại Browser (Nescape Navigator, IE, Firefox, Safari, ) – Script tại Client-Side: 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, § Ứng dụng ServerServer SideSide: – Thực hiện tại WebServer (IIS, Apache, Netscape Enterprise Server, .) – Script tại Server-Side: 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, ) 7/24/2009 Lập trình Web - Trần Phước Tuấn 5
  6. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan QQúúaa trtrììnhnh ththựựcc hihiệệnn ứứngng ddụụngng ServerServer SideSide § Tạo trang Web có chứa cả Srcipt Client-Side và Script Server-Side § Khi Client browser yêu cầu thực hiện, server (run-time engine) sẽ thực hiện các lệnh Server-side Scipts và trả trangtrang WebWeb HTMLHTML về browser 7/24/2009 Lập trình Web - Trần Phước Tuấn 6
  7. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 1. Tổng quan VVịị trtríí ccủủaa ccáácc đđooạạnn ScriptScript § Đặ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 là không hạn chế. 7/24/2009 Lập trình Web - Trần Phước Tuấn 7
  8. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 2. Một ví dụ Sử dụng JavaScript document.write(“Hello world!”); document.write(“Hello world!”); 7/24/2009 Lập trình Web - Trần Phước Tuấn 8
  9. 3.3. NGÔNNGÔN NGNGỮỮ JAVASCRIPTJAVASCRIPT
  10. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC Nội dung 1. Giới thiệu 2. Cú pháp và quy ước 3. Kiểu dữ liệu 4. Khai báo biến, phạm vi biến 5. Toán tử 6. Một số đối tượng dữ liệu 7. Cấu trúc điều khiển 8. Hàm 9. Lớp - Đối tượng 7/24/2009 Lập trình Web - Trần Phước Tuấn 10
  11. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.1. Giới thiệu §§ JavaScriptJavaScript và JavaJava là hai ngôn ngữ hoàn toàn khác nhau Java là một ngôn ngữ lập trình “đầy đủ”, trong đó các ứng dụng cần được biên dịch trước khi thực thi. Java là ngôn ngữ mạnh mẽ và phứ tạp hơn rất nhiều. Java được sáng tạo bởi công ty Sun Micro System JavaScript không cần phải được biên dịch trước, cấu trúc lệnh đơn giản và là một ngôn ngữ kịch bản. JavaScript là sản phẩm của Netscape Communications Corporation 7/24/2009 Lập trình Web - Trần Phước Tuấn 11
  12. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.1. Giới thiệu JavaScriptJavaScript là một ngôn ngữ lập trình hướng đối tượng dạng kịch bản: Không cần được biên dịch trước khi chạy, toàn bộ quá trình thông dịch sẽ diễn ra ngay trong quá trình đoạn kịch bản (script) được gọi Thuận lợi dễ dàng triển khai một cách nhanh chóng hoạt động ở máy trạm, giảm tải cho máy chủ Hạn chế khó kiểm tra & xử lý lỗi phụ thuộc vào trình duyệt web ở phía client tốc độ không cao 7/24/2009 Lập trình Web - Trần Phước Tuấn 12
  13. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.1. Giới thiệu JavaScript thường dùng tạo hiệu ứng cho các ảnh trong trang web trò chơi (game) trả lời các sự kiện: nhấn chuột, di chuyển chuột, đọc và ghi các thẻ HTML kiểm tra tính xác thực của dữ liệu phát hiện trình duyệt được sử dụng để duyệt web tạo cookie 7/24/2009 Lập trình Web - Trần Phước Tuấn 13
  14. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước § Javascript phân biệt chữ hoa – chữ thường § Các câu lệnh javascript 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 và dấu nháy – Chuổi trong javascript được đặt trong cặp nháy đơn (‘’) hoặc nháy kép (“”) – Ví dụ: 7/24/2009 Lập trình Web - Trần Phước Tuấn 14
  15. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước § Ghi chú: theo cú pháp của C++ – Ghi chú dòng: // – Ghi chú đoạn: /* */ 7/24/2009 Lập trình Web - Trần Phước Tuấn 15
  16. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước TTỪỪ KHKHÓÓAA break do if switch typeof case else in this var catch false instanceof throw void continue finally new true while 7/24/2009 Lập trình Web - Trần Phước Tuấn 16
  17. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước TTỪỪ KHKHÓÓAA abstract double goto native static boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile debugger 7/24/2009 Lập trình Web - Trần Phước Tuấn 17
  18. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước TTỪỪ KHKHÓÓAA arguments encodeURI Infinity Object String Array Error isFinite parseFloat SyntaxError Boolean escape isNaN parseInt TypeError Date eval Math RangeError undefined decodeURI EvalError NaN ReferenceError unescape decodeURIComponent Function Number RegExp URIError 7/24/2009 Lập trình Web - Trần Phước Tuấn 18
  19. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.2. Cú pháp và quy ước ĐĐặặtt têntên Bắt đầu bởi chữ cái hay dấu gạch dưới (_) hay dấu dollar ($) Dấu dollar là không hợp lệ trong các phiên bản trước JavaScript 1.1, được tích hợp vào để hỗ trợ các phần mềm sinh mã tự động. Tránh sử dụng dấu này Tiếp theo bởi chữ cái, số hay dấu gạch dưới, dấu dollar Không đặt tên trùng với từ khóa 7/24/2009 Lập trình Web - Trần Phước Tuấn 19
  20. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.3. Kiểu dữ liệu Biến trong JavaScript lưu bất kỳ giá trị của kiểu dữ liệu nào 7/24/2009 Lập trình Web - Trần Phước Tuấn 20
  21. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.4. Khai báo biến, phạm vi biến § Sử dụng từ khóa varvar để khai báo biến § Ví dụ: varvar i; § Gán giá trị cho biến: – i=10; – i=“Mười”; § Một biến chưa được gán giá trị thì sẽ có giá trị là “undefined” 7/24/2009 Lập trình Web - Trần Phước Tuấn 21
  22. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.4. Khai báo biến, phạm vi biến § Phạm vi của biến gắn liền với vùng chương trình nó được khai báo § Biến toàn cục có phạm vi hoạt động trên toàn bộ tài liệu (khai báo ngoài hàm) § Biến khai báo trong hàm chỉ có tác dụng bên trong hàm § Một biến toàn cục được tồn tại từ khi nó được khai báo cho đến trang web đã đóng § JavaScript không có khái niệm phạm vi theo khối 7/24/2009 Lập trình Web - Trần Phước Tuấn 22
  23. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.5. Toán tử 7/24/2009 Lập trình Web - Trần Phước Tuấn 23
  24. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu § String Object § Number Object § Date Object § Math Object § Array Object § ActiveX Object 7/24/2009 Lập trình Web - Trần Phước Tuấn 24
  25. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String ThuThuộộcc ttíínhnh § 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ử + 7/24/2009 Lập trình Web - Trần Phước Tuấn 25
  26. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String ThuThuộộcc ttíínhnh 7/24/2009 Lập trình Web - Trần Phước Tuấn 26
  27. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String PhPhươươngng ththứứcc 7/24/2009 Lập trình Web - Trần Phước Tuấn 27
  28. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String PhPhươươngng ththứứcc 7/24/2009 Lập trình Web - Trần Phước Tuấn 28
  29. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String Phương thức 7/24/2009 Lập trình Web - Trần Phước Tuấn 29
  30. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - String Phương thức 7/24/2009 Lập trình Web - Trần Phước Tuấn 30
  31. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Number § Kiểu dữ liệu số nguyên, số thực § Bắt đầu bằng ký số “0”: Số nguyên hệ bát phân § Bắt đầu bằng “0x”: Số nguyên hệ thập lục phân § VD: Cho biết giá trị thập phân tương ứng của các number sau: – 125 = ? – 010 = ? 014 = ? 028 = ? – 0xFF = ? 0x3.12 = ? 7/24/2009 Lập trình Web - Trần Phước Tuấn 31
  32. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Number ThuThuộộcc ttíínhnh § constructor § prototype § MAX_VALUE (khoảng = 1.79E+308) § MIN_VALUE (khoảng = 5.00E-324) § NaN § NEGATIVE_INFINITY (= -MAX_VALUE) § POSITIVE_INFINITY (= -MIN_VALUE) 7/24/2009 Lập trình Web - Trần Phước Tuấn 32
  33. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Number PhPhươươngng ththứứcc § toExponential numObj.toExponential([fractionDigits]) § toFixed numObj.toFixed([fractionDigits]) § toPrecision numObj.toPrecision([precision]) § toString objectname.toString([radix]) radix : [2; 8; 10; 16] (các hệ cơ số) 7/24/2009 Lập trình Web - Trần Phước Tuấn 33
  34. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Number PhPhươươngng ththứứcc 7/24/2009 Lập trình Web - Trần Phước Tuấn 34
  35. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Number § Chuyển chuổi thành số PhPhươươngng ththứứcc parseInt(); parseFloat(); parseInt(“42”) // result = 42 parseInt(“42.33”) // result = 42 parseFloat(“42.33”) // result = 42.33 3 + 3 + parseInt(“3”) // result = 9 § Chuyển số thành chuỗi (auto) 3 + “3” // result = “33” 3 + 3 + “3” // result = “63” (“”+ 2500) // result = “2500” (“”+ 2500).length // result = 4 § isNaN(number) à true nếu number khác NaN § isFinite(number) à true nếu number khác NaN, NEGATIVE_INFINITY, POSITIVE 7/24/2009 Lập trình Web - Trần Phước Tuấn 35
  36. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Math 7/24/2009 Lập trình Web - Trần Phước Tuấn 36
  37. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Date Argument Description Example Creates object with the current date and None time. var rightNow = new Date(); Creates object with the date represented by the specified month, day (dd ), "month,dd, yyyy var birthDay = new Date("March year ( yyyy ), hour (hh), minute (mm), hh:mm:ss" and second (ss). Any omitted values 24, 1970"); are set to zero. Creates object with date represented as var someDate = new Milliseconds the integer number of milliseconds after the epoch. Date(795600003020); Creates object with the date specified by var birthDay = new Date(1970, 2, yyyy, mm, dd the integer values year (yyyy), month (mm), and day (dd). 24); Creates object with the date specified by yyyy, mm, dd, var birthDay = new Date(1970, 2, the integer values for the year, month, hh, mm, ss day, hours, minutes, and seconds. 24, 15, 0, 0); Creates object with the date specified by yyyy, mm, dd, var birthDay = new Date(1970, 2, the integer values for the year, month, hh, mm, ss, ms day, hours, seconds, and milliseconds. 24, 15, 0, 250); 7/24/2009 Lập trình Web - Trần Phước Tuấn 37
  38. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Date 7/24/2009 Lập trình Web - Trần Phước Tuấn 38
  39. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Date 7/24/2009 Lập trình Web - Trần Phước Tuấn 39
  40. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Array § var arrayObj = new Array(); § var arrayObj = new Array([size]); § var arrayObj = new Array([element0[, element1[, [, elementN]]]]); § var arrayObj = new Array(Array); § Chỉ số của mảng bắt đầu từ 0 7/24/2009 Lập trình Web - Trần Phước Tuấn 40
  41. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Array ThuThuộộcc ttíínhnh vvàà PhPhươươngng ththứứcc 7/24/2009 Lập trình Web - Trần Phước Tuấn 41
  42. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Array 7/24/2009 Lập trình Web - Trần Phước Tuấn 42
  43. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Array 7/24/2009 Lập trình Web - Trần Phước Tuấn 43
  44. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - Array MMảảngng nhinhiềềuu chichiềềuu 7/24/2009 Lập trình Web - Trần Phước Tuấn 44
  45. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - ActiveX 7/24/2009 Lập trình Web - Trần Phước Tuấn 45
  46. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.6. Một số đối tượng dữ liệu - ActiveX MMộộtt vvíí ddụụ 7/24/2009 Lập trình Web - Trần Phước Tuấn 46
  47. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.7. Cấu trúc điều khiển § Điều kiện if § Điều khiển switch § Vòng lặp for § Vòng lặp while § Vòng lặp do while § Vòng lặp for in § Từ khóa break, continue 7/24/2009 Lập trình Web - Trần Phước Tuấn 47
  48. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.7. Cấu trúc điều khiển § Hầu hết cấu trúc điều khiển trong JavaScript giống với C++ § Trong phần này ta chỉ đề cập cấu trúc điều khiển của JavaScript không có trong C++ 7/24/2009 Lập trình Web - Trần Phước Tuấn 48
  49. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.8. Hàm 7/24/2009 Lập trình Web - Trần Phước Tuấn 49
  50. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.8. Hàm 7/24/2009 Lập trình Web - Trần Phước Tuấn 50
  51. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.9. Lớp - Đối tượng 7/24/2009 Lập trình Web - Trần Phước Tuấn 51
  52. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 3.9. Lớp - Đối tượng 7/24/2009 Lập trình Web - Trần Phước Tuấn 52
  53. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Một số hàm khác 7/24/2009 Lập trình Web - Trần Phước Tuấn 53
  54. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Một số hàm khác 7/24/2009 Lập trình Web - Trần Phước Tuấn 54
  55. ĐẠI HỌC SP. TPHCM, KHOA TOÁN – TIN HỌC 4. Một số hàm khác alert(string); b_answer = confirm("Do you want to do this?"); str_result = window.prompt(prompt string, default value string); 7/24/2009 Lập trình Web - Trần Phước Tuấn 55