›
›

Ngôn ngữ Javascript - Ths. Mai Xuân Hùng

ppt 88 trang phuongnguyen 6000
Download
Bạn đang xem 20 trang mẫu của tài liệu "Ngôn ngữ Javascript - Ths. Mai Xuân Hùng", để 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:

  • pptchuong_4_ngon_ngu_javascript.ppt

Nội dung text: Ngôn ngữ Javascript - Ths. Mai Xuân Hùng

  1. CHƯƠNG 4 Ngôn ngữ Javascript 1
  2. Nội dung ◼ Giới thiệu về Javascript ◼ Nhúng Javascript vào trang web ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 2
  3. Giới thiệu JavaScript ◼ JavaScript là ngôn ngữ kịch bản được hãng Sun Microsystems và Netscape phát triển. ◼ JavaScript được phát triển từ Livescript. Của Netscape ◼ Là ngôn ngữ Client-side script hoạt động trên trình duyệt của người dùng ( client ) ◼ Các ứng dụng client chạy trên trình duyệt như Netscape Navigator hoặc Internet Explorer, firefox Ths. Mai Xuân Hùng 3
  4. Giới thiệu JavaScript ◼ Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần thiết trên server. ◼ Giúp tạo các hiệu ứng, tương tác cho trang web ◼ JavaScript làm cho việc tạo các trang Web động và tương tác dễ dàng hơn ◼ Cung cấp sự tương tác người dùng ◼ Thay đổi nội dung động ◼ Xác nhận tính hợp lệ của dữ liệu Ths. Mai Xuân Hùng 4
  5. Giới thiệu về Javascript ◼ Client-Side Script: ◼ Script được thực thi tại Client-Side ( trình duyệt ): Thực hiện các tương tác với người dùng ( tạo menu chuyển động, ) , kiểm tra dữ liệu nhập, ◼ Server-Side Script: ◼ Script được xử lý tại Server-Side, nhằm tạo các trang web có khả năng phát sinh nội dung động. Một số xử lý chính: kết nối CSDL, truy cập hệ thống file trên server, phát sinh nội dung html trả về người dùng Ths. Mai Xuân Hùng 5
  6. Giới thiệu về Javascript ◼ Khi trình duyệt (Client browser) truy cập trang web có chứa các đoạn mã xử lý tại server-side. Server ( run-time engine) sẽ thực hiện các lệnh Server-side Scipts và trả về nội dung HTML cho trình duyệt ➢ Nội dung html trả về chủ yếu bao gồm: mã html, client-script. Ths. Mai Xuân Hùng 6
  7. Chèn Javascript vào HTML ◼ Sử dụng thẻ SCRIPT: ◼ Sử dụng một file JavaScript ở ngoài Ths. Mai Xuân Hùng 7
  8. Nội dung ◼ Giới thiệu về Javascript ◼ Nhúng Javascript vào trang web ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 8
  9. Nhúng Javascript vào trang web some javascript statements some statements some statements method() // gọi thực hiện các phương thức được định nghĩa // trong “Tên_file_script.js” Ths. Mai Xuân Hùng 9
  10. Nhúng Javascript vào trang web ◼ Đặt giữa tag và : script sẽ thực thi ngay khi trang web được mở. ◼ Đặt giữa tag và : script trong phần body được thực thi khi sau khi thực thi các đoạn script có trong phần . ◼ Số lượng đoạn client-script chèn vào trang không hạn chế. Ths. Mai Xuân Hùng 10
  11. Ví dụ Hello JavaScript ") document.write("Hello World"); > Ths. Mai Xuân Hùng 11
  12. Nội dung ◼ Giới thiệu về Javascript ◼ Nhúng Javascript vào trang web ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 12
  13. Biến số trong Javascript ◼ Cách đặt tên biến ◼ Tuân thủ theo nguyên tắc đặt tên như lập trình c ◼ A Z,a z,0 9,_ : phân biệt HOA, Thường ◼ Khai báo biến ◼ Sử dụng từ khóa var Ví dụ: var count=10,amount; ◼ Không cần khai báo biến trước khi sử dụng, biến thật sự tồn tại khi bắt đầu sử dụng lần đầu tiên Ths. Mai Xuân Hùng 13
  14. Kiểu dữ liệu trong Javascript Kiểu dữ liệu Ví dụ Mô tả Object var listBooks = new Array(10) ; Trước khi sử dụng, phải cấp phát bằng từ khóa new String “The cow jumped over the moon.” Chứa được chuổi unicode “40” Chuỗi rỗng “” Number 0.066218 Theo chuẩn IEEE 754 12 boolean true / false undefined var myVariable ; myVariable = undefined null connection.Close(); connection = null 1 Biến trong javascript có thể lưu bất kỳ kiểu dữ liệu nào Ths. Mai Xuân Hùng 14
  15. Đổi kiểu dữ liệu ◼ Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu trữ thay đổi Ví dụ: var x = 10; // x kiểu Number x = “hello world !”; // x kiểu String ◼ Có thể cộng 2 biến khác kiểu dữ liệu Ví dụ: var x; x = “12” + 34.5; // KQ: x = “1234.5” ◼ Hàm parseInt( ), parseFloat( ) : Đổi KDL từ chuỗi sang số. Ths. Mai Xuân Hùng 15
  16. Kiểu dữ liệu ◼ Trong JavaScript, hai biến khác kiểu có thể kết hợp với nhau. ví dụ: A = “ This apple costs Rs.” + 5 sẽ có kết quả là một chuỗi với giá trị là "This apple costs Rs. 5". Ths. Mai Xuân Hùng 16
  17. Ví dụ var A = "12" + 7.5; document.write(A); Ths. Mai Xuân Hùng 17
  18. Kiểu dữ liệu số ◼ Kiểu số có hai loại thông dụng là kiểu số nguyên và kiểu số thực. ◼ Ví dụ: var a =10, b =100, ten = “Nguyen Van Ba”; ◼ Các phép toán trên kiểu số ◼ +, +=, -, - =, *, *=, /, /=, % (chia lấy phần dư), ++ (phép tăng một đơn vị), (phép giảm một đơn vị). ◼ Các phép so sánh: (lớn), >= , = = (bằng), != (khác). Ths. Mai Xuân Hùng 18
  19. Kiểu ký tự ◼ Các ký tự được nằm giữa 2 nháy đơn. Ngoài ra còn có các ký tự đặc biệt sau đây: Ký tự Ý nghĩa \n Xuống dòng mới \t Ký tự Tab \r Về đầu dòng \b Ký tự khoảng trắng Ví dụ : var ch= ‘A’, c = ‘B’; Các phép toán trên ký tự +, += (cộng 2 ký tự) Phép toán so sánh : >, >=, < , <=, = =, != Ths. Mai Xuân Hùng 19
  20. Ví dụ var x = 10; var y = 5; alert ("The value of x is " + x + "The value of y is " + y); alert("x AND y = " + (x && y)); alert("x OR y = " + (x || y)); alert("NOT x = " + (!x)); Ths. Mai Xuân Hùng 20
  21. Kiểu chuỗi ◼ Một hằng chuỗi được nằm giữa hai dấu nháy đôi “. ◼ Ví dụ: var hoten = “Le Van Tam”; ◼ Các phép toán trên chuỗi ◼ Phép nối chuỗi: +, += ◼ Phép so sánh: , >=, ==, != Ths. Mai Xuân Hùng 21
  22. Kiểu luận lý ◼ Một biến có kiểu luận lý tồn tại 1 trong 2 trạng thái : true, false. ◼ Ví dụ: var t = true, f = false; ◼ Các phép toán trên kiểu luận lý ◼ Phép so sánh : , >=, ==, != ◼ Phép logic : && (và), || (hoặc), ! (phủ định). Ths. Mai Xuân Hùng 22
  23. Mảng ◼ Mảng một chiều ◼ var A = new Array(10) ◼ Mảng A nói trên có 10 phần tử, và chỉ số phần tử đầu tiên của mảng bắt đầu 0, muốn truy xuất đến phần tử có chỉ số i, ta dùng A[i]. ◼ Mảng 2 chiều ◼ Khai báo A là mảng 2 chiều có 10 dòng, 20 cột. var A = new Array(10),i = 0; for (i = 0; i<10; i++) A[i] = new Array(20); Để truy xuất đến phần tử có chỉ số dòng i, chỉ số cột i ta dùng A[i][j]. Ths. Mai Xuân Hùng 23
  24. Các quy tắc chung ◼ Khối lệnh được bao trong dấu {} ◼ Mỗi lệnh nên kết thúc bằng dấu ; ◼ Cách ghi chú thích: ◼ // Chú thích 1 dòng ◼ /* Chú thích nhiều dòng */ Ths. Mai Xuân Hùng 24
  25. Lệnh rẽ nhánh ◼ Câu lệnh điều kiện được dùng để kiểm tra điều kiện. Kết quả xác định câu lệnh hoặc khối lệnh được thực thi. ◼ Các câu lệnh điều kiện bao gồm: ◼ if ◼ if else ◼ switch Ths. Mai Xuân Hùng 25
  26. Cấu trúc if ◼ Dùng để xử lý lệnh khi biểu thức của if trả về giá trị true if (biểu thức điều kiện) Khối lệnh; Ths. Mai Xuân Hùng 26
  27. Cấu trúc if else if (biểu thức điều kiện) Khối lệnh 1; else khối lệnh 2 Ví dụ: a=5; if(a%2==0) document.write(a, “là số chẵn”); else document.write(a, “là số lẻ”); Ths. Mai Xuân Hùng 27
  28. Cấu trúc switch case switch(biến hoac bieu thuc) { case giá trị 1: Khối lệnh 1; break; case giá trị 2: Khối lệnh 2; break; default: Khối lệnh n; break; } Ths. Mai Xuân Hùng 28
  29. Ví dụ Ví dụ : var diem = “G”; switch (diem) { case “Y”: document.write(“Yếu"); break; case “TB”: document.write(“Trung bình"); break; case “K”: document.write(“Khá"); break; case “G” : document.write(“Giỏi"); break; default: document.write(“Xuất sắc") } Ths. Mai Xuân Hùng 29
  30. Cấu trúc lệnh lặp ◼ Cấu trúc điều khiển lặp trong chương trình là các lệnh lặp. ◼ Các kiểu lệnh lặp bao gồm: ◼ for ◼ do . While ◼ while Ths. Mai Xuân Hùng 30
  31. Cấu trúc for for(biểu thức1; biếu thức 2; biểu thức3) Khối lệnh; Khối lệnh được thực hiện khi biểu thức 2 còn đúng. Ví dụ: for (i = 0, i<10; i++) s+=2*i; Ths. Mai Xuân Hùng 31
  32. Cấu trúc while while (biểu thức điều kiện) Khối lệnh; Khối lệnh được thực hiện khi biểu thức trong while còn đúng. Ví dụ: i=0; while(i<20) { s+=i; i++; } Ths. Mai Xuân Hùng 32
  33. Cấu trúc do while do { Khối lệnh; } while(biểu thức điều kiện); ◼ Ví dụ: i=0; do { s+=i; i++; }while(i<20); Ths. Mai Xuân Hùng 33
  34. Hàm ◼ Dùng từ khóa function để khai báo hàm. Muốn trả về giả trị của hàm ta dùng từ khoá return. Dạng thức khai báo chung: function Tên_hàm(thamso1, thamso2, ) { } ◼ Hàm có giá trị trả về: function Tên_hàm(thamso1, thamso2, ) { return (value); } Ths. Mai Xuân Hùng 34
  35. Ví dụ function Add(x,y) { return(x+y); } var t; t = Add(4,8); document.write(t); Ths. Mai Xuân Hùng 35
  36. Các đối tượng cơ bản trong Javascript ◼ Thuộc tính (biến) dùng để định nghĩa đối tượng và các phương thức (hàm) tác động tới dữ liệu đều nằm trong đối tượng. Ths. Mai Xuân Hùng 36
  37. Thuộc tính và phương thức ◼ Để truy cập thuộc tính của đối tượng, chúng ta phải chỉ ra tên đối tượng và thuộc tính của nó: objectName.propertyName ◼ Để truy cập phương thức của đối tượng, chúng ta phải chỉ ra tên đối tượng và thuộc tính của nó: objectName.method() Ths. Mai Xuân Hùng 37
  38. Sử dụng đối tượng ◼ Khi tạo trang web, chúng ta cần sử dụng: ◼ Các đối tượng trình duyệt ◼ Các đối tượng có sẵn (thay đổi phụ thuộc vào ngôn ngữ kịch bản được sử dụng) ◼ HTML elements ◼ Chúng ta cũng có thể tạo ra các đối tượng để sử dụng theo yêu cầu của mình. Ths. Mai Xuân Hùng 38
  39. Từ khóa this ◼ Giá trị của nó chỉ ra đối tượng hiện hành và có thể có các thuộc tính chuẩn chẳng hạn như tên, độ dài, và giá trị được áp dụng phù hợp. Ths. Mai Xuân Hùng 39
  40. Lệnh for in ◼ Câu lệnh for in được dùng để lặp mỗi thuộc tính của đối tượng hoặc mỗi phần tử của một mảng. ◼ Cú pháp: for (variable in object) { statements; } Ths. Mai Xuân Hùng 40
  41. with ◼ Câu lệnh with được dùng để thực thi tập hợp các lệnh mà các lệnh này dùng các phương thức của cùng một loại đối tượng. ◼ thuộc tính được gán cho đối tượng đã được xác định trong câu lệnh with. ◼ Cú pháp: with (object){ statements; } Ths. Mai Xuân Hùng 41
  42. Toán tử new ◼ Toán tử new được dùng để tạo ra một thực thể mới của một loại đối tượng ◼ Đối tượng có thể có sẵn hoặc do người dùng định nghĩa ◼ objectName = new objectType (param1 [,param2] [,paramN]) ◼ Trong đó: ◼ objectName là tên của thực thể đối tượng mới. ◼ ObjectType là một hàm quyết định loại của đối tượng. Ví dụ Array. ◼ Param[1, 2, . . ] là các giá trị thuộc tính của đối tượng. Ths. Mai Xuân Hùng 42
  43. Hàm eval ◼ Hàm eval được dùng để đánh giá một chuỗi mã lệnh mà không cần tham chiếu đến bất cứ đối tượng cụ thể nào. ◼ Chuỗi có thể là một biểu thức JavaScript, một câu lệnh hoặc một nhóm câu lệnh ◼ Biểu thức có thể bao gồm nhiều biến và nhiều thuộc tính của một đối tượng. var x = 5; var z = 10; document.write(eval(“x + z + 5”)); Ths. Mai Xuân Hùng 43
  44. Đối tượng string ◼ Đối tượng String được dùng để thao tác và làm việc với chuỗi văn bản. ◼ Chúng ta có thể tách chuỗi ra thành các chuỗi con và biến đổi chuỗi đó thành các chuỗi hoa hoặc thường trong một chương trình. ◼ Cú pháp tổng quát: stringName.propertyName hay stringName.methodName Ths. Mai Xuân Hùng 44
  45. Tạo đối tượng string ◼ Có 3 phương thức khác nhau để tạo ra chuỗi. ◼ Dùng lệnh var và gán cho nó một giá trị. ◼ Dùng một toán tử (=) có gán với một tên biến. ◼ Dùng hàm khởi tạo String (string). Ths. Mai Xuân Hùng 45
  46. Đối tượng Math ◼ Đối tượng Math có các thuộc tính và phương thức biểu thị các phép tính toán học nâng cao. function doCalc(x) { var a; a = Math.PI * x * x; alert ("The area of a circle with a radius of " + x + “ is " + a); } Ths. Mai Xuân Hùng 46
  47. Đối tượng ngày ◼ Mô tả thông tin về: Ngày, Tháng, Năm, giờ, phút, giây của hệ thống. ◼ Ví dụ: var now = new Date(); Ths. Mai Xuân Hùng 47
  48. Các hàm lấy ngày giờ trong đối tượng Date Tên hàm Mô tả getDate() Ngày: 1 31 getDay() Ngày trong tuần: 0 (chủ nhật), 1(thứ 2) GetHours Giờ: 0 23 GetMinutes Phút: 0 59 GetMonth Tháng: 0 (tháng 1) 11(tháng 12) GetSeconds Giây: 0 59 GetTime Giờ theo mili giây GetYear Năm Ths. Mai Xuân Hùng 48
  49. Ví dụ Mã HTML Outputting Text Ths. Mai Xuân Hùng 49
  50. Nội dung ◼ Giới thiệu về Javascript ◼ Nhúng Javascript vào trang web ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 50
  51. Các sự kiện thông dụng ◼ Các sự kiện được hỗ trợ bởi hầu hết các đối tượng ➢ onClick ➢ onLoad ➢ onFocus ➢ onSubmit ➢ onChange ➢ onResize ➢ onBlur ➢ ➢ onMouseOver ➢ onMouseOut ➢ onMouseDown ➢ onMouseUp Ths. Mai Xuân Hùng 51
  52. Xử lý sự kiện cho các thẻ HTML ◼ Cú pháp 1: ◼ Ví dụ: ◼ Lưu ý: Dấu “ ” và ‘ ’ Ths. Mai Xuân Hùng 52
  53. Xử lý sự kiện bằng function function GreetingMessage() { window.alert(“Welcome to my world”); } Ths. Mai Xuân Hùng 53
  54. Xử lý sự kiện bằng thuộc tính ◼ Gań tên ham̀ xử lý cho 1 object event object.eventhandler = function_name; ◼ Ví dụ: function GreetingMessage() { window.alert(“Welcome to my world”); } window.onload = GreetingMessage () Ths. Mai Xuân Hùng 54
  55. Ví dụ: onclick Event function compute(frm) { var x = frm.expr.value; result.innerHTML = x*x; } X = X * X = Ths. Mai Xuân Hùng 55
  56. Ví dụ: onFocus - onBlur ◼ Xảy ra khi một thành phần HTML bị focus (onFocus) và mất focus (onBlur) ◼ Ví dụ: Ths. Mai Xuân Hùng 56
  57. Danh sách sự kiện đầy đủ Event Occurs when onabort a user aborts page loading onblur a user leaves an object onchange a user changes the value of an object onclick a user clicks on an object ondblclick a user double-clicks on an object onfocus a user makes an object active onkeydown a keyboard key is on its way down Onkeypress a keyboard key is pressed onkeyup a keyboard key is released Ths. Mai Xuân Hùng 57
  58. Danh sách sự kiện đầy đủ (tt) a page is finished loading. Note: In Netscape this onload event occurs during the loading of a page! onmousedown a user presses a mouse-button onmousemove a cursor moves on an object onmouseover a cursor moves over an object onmouseout a cursor moves off an object onmouseup a user releases a mouse-button onreset a user resets a form onselect a user selects content on a page onsubmit a user submits a form onunload a user closes a page Ths. Mai Xuân Hùng 58
  59. Ví dụ Ok And Cancel Ths. Mai Xuân Hùng 59
  60. Nội dung ◼ Giới thiệu về Javascript ◼ Nhúng Javascript vào trang web ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Sử dụng các đối tượng trong Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 60
  61. Đối tượng HTML DOM ◼ DOM = Document Object Model ◼ Là tập hợp các đối tượng HTML chuẩn được dùng để truy xuất và thay đổi thành phần HTML trong trang web ( thay đổi nội dung tài liệu của trang ) ◼ Một số đối tượng của DOM: window, document, history, link, form, frame, location, event, Ths. Mai Xuân Hùng 61
  62. Đối tượng Window - DOM ◼ Là thể hiện của đối tượng cửa sổ trình duyệt ◼ Tôǹ taị khi mở 1 taì liêụ HTML ◼ Sử dung̣ để truy câp̣ thông tin của các đối tượng trên cửa sổ trình duyệt ( tên trình duyệt, phiên bản trình duyệt, thanh tiêu đề, thanh trạng thái ) Ths. Mai Xuân Hùng 62
  63. Đối tượng Window - DOM ◼ Properties ⚫ Methods ◼ document ➢ alert ◼ event ➢ confirm ◼ history ➢ prompt ◼ location ➢ blur ◼ name ◼ navigator ➢ close ◼ screen ➢ focus ◼ status ➢ open Ths. Mai Xuân Hùng 63
  64. Đối tượng Window - DOM ◼ Ví dụ: var curURL = window.location; window.alert(curURL); Ths. Mai Xuân Hùng 64
  65. Đối tượng Document - DOM ◼ Biêủ diêñ cho nội dung trang HTML đang được hiển thị trên trình duyệt ◼ Dung̀ để lâý thông tin về taì liêụ , cać thanh̀ phâǹ HTML và xử lý sự kiêṇ Ths. Mai Xuân Hùng 65
  66. Đối tượng Document - DOM ⚫ Properties ⚫ Methods ➢ aLinkColor ➢ documentElement ➢ close ➢ bgColor ➢ cookie ➢ open ➢ body ➢ ➢ createTextNode(“ text ") ➢ fgColor ➢ createElement(“HTMLtag") ➢ linkColor ➢ getElementById(“id”) ➢ title ➢ getElementByName(ten) ➢ URL ➢ getElementByTagName(Te n_The) ➢ vlinkColor ➢ Document.tenform.tecontrol ➢ forms[] .thuoctinh ➢ images[] ➢ childNodes[] Ths. Mai Xuân Hùng 66
  67. Đối tượng Document - DOM ◼ Truy xuất đến các form: ◼ window.document.tên_form ◼ Truy xuất các đối tượng trong form: ◼ objForm.Tên_ĐT ◼ Thuộc tính đối tượng: ◼ value Ths. Mai Xuân Hùng 67
  68. Đối tượng Document - DOM ◼ getElementById ( id1 ) Trả về node có giá trị thuộc tính id = id1 Ví dụ: // // some text Text Node // var node = document.getElementById(“id1”); var nodeName = node.nodeName; // p var nodeType = node.nodeType; // 1 var nodeValue = node.nodeValue; // null var text = node.innerText ; // some text Ths. Mai Xuân Hùng 68
  69. Đối tượng Document - DOM ◼ createElement ( nodeName ) Cho phép tạo ra 1 node HTML mới tùy theo đối số nodeName đầu vào Ví dụ: var imgNode = document.createElement(“img”); imgNode.src = “images/test.gif”; // Ths. Mai Xuân Hùng 69
  70. Đối tượng Document - DOM ◼ createTextNode ( content ) Ví dụ: var textNode = document.createTextNode(“New text”); var pNode = document.createElement(“p”); pNode.appendChild(textNode); // New text Ths. Mai Xuân Hùng 70
  71. Đối tượng Document - DOM ◼ appendChild ( newNode ) Chèn node mới newNode vào cuối danh sách các node con của một node. Ví dụ: // // some text // var pNode = document.getElementById(“id1”); var imgNode = document.createElement(“img”); imgNode.src = “images/test.gif”; pNode.appendChild(imgNode); // // some text // Ths. Mai Xuân Hùng 71
  72. Đối tượng Document - DOM ◼ innerHTML Chỉ định nội dung HTML bên trong một node. Ví dụ: // // some text // var theElement = document.getElementById("para1"); theElement.innerHTML = “Some new text”; // Kết quả : // // Some new text // Ths. Mai Xuân Hùng 72
  73. Đối tượng Document - DOM ◼ innerText Tương tự innerHTML, tuy nhiên bất kỳ nội dung nào đưa vào cũng được xem như là text hơn là các thẻ HTML. Ví dụ: var theElement = document.getElementById("para1"); theElement.innerText = “Some new text”; // Kết quả hiển thị trên trình duyệt // bên trong thẻ p: “Some new text” Ths. Mai Xuân Hùng 73
  74. Nội dung ◼ Giới thiệu về Javascript ◼ Kiểu dữ liệu & Các cú pháp Javascript ◼ Nhúng Javascript vào trang web ◼ Sử dụng các đối tượng trong Javascript ◼ Xử lý sự kiện ◼ DOM HTML với Javascript ◼ Ví dụ Ths. Mai Xuân Hùng 74
  75. Ví dụ: Dynamic Table ◼ Viết trang web cho phép tạo table có số dòng, số cột do người dùng nhập vào. Ths. Mai Xuân Hùng 75
  76. Ví dụ: Dynamic Table body Table 12 Tr 13 Td 21 Td 22 Tr Td Ths. Mai Xuân Hùng Td76
  77. Ví dụ: body Table TBody 12 Tr 13 Td 21 Td 22 Tr Td Ths. Mai Xuân Hùng Td77
  78. Ví dụ: Dynamic Table ◼ Document.createElement( ) :Tạo một đối tượng thẻ DOM HTML ◼ Object.appendChild( ): Thêm một đối tượng thẻ DOM HTML như là nút con. Ths. Mai Xuân Hùng 78
  79. Ví dụ: Dynamic Table function CreateTable(divTable) { var tagTable = document.createElement("table"); tagTable.border = 1; var tagTBody = document.createElement("tbody"); tagTable.appendChild(tagTBody); var nDong = txtSoDong.value; var nCot = txtSoCot.value; for (i=0; i<nDong; i++) { var tagTR = document.createElement("tr"); for (j=0; j<nCot; j++) { var tagTD = document.createElement("td"); var textNode = document.createTextNode(i+""+j); tagTD.appendChild(textNode); tagTR.appendChild(tagTD); } tagTBody.appendChild(tagTR); } divTable.appendChild(tagTable); } Ths. Mai Xuân Hùng 79
  80. Ví dụ (tt) ◼ Hiệu ứng chữ chạy trên trình thanh trạng thái của trình duyệt Ths. Mai Xuân Hùng 80
  81. Lý thuyết ◼ window là đối tượng quản lý cửa sổ trình duyệt. ◼ Đối tượng window có thuộc tính status để xác định thông báo tạm thời xuất hiện trên thanh trạng thái. ◼ VD: Để thể hiện dòng chữ Hello World trên thanh trạng thái ta sử dụng lệnh: window.status = 'Hello World' Ths. Mai Xuân Hùng 81
  82. Lý thuyết (tt) ◼ Lệnh setTimeout(f, n)quy định sau khoảng thời gian n mili giây hàm f sẽ được gọi. (f là chuỗi lưu lệnh cần thực hiện) ◼ Giả sử str là một chuỗi ta có ◼ str.length: Thuộc tính cho biết độ dài chuỗi ◼ str.substr(i, n): lấy ra n ký tự kể từ vị trí thứ i (Ký tự đầu tiên được đánh số là 0) Ths. Mai Xuân Hùng 82
  83. Lý thuyết (tt) ◼ Vài lệnh khác cùng nhóm setTimeout ◼ timeID = setTimeout(f, n) ◼ clearTimeout(timeID): Hủy setTimeout ◼ intervalID = setInterval(f, n): Sau mỗi khoảng thời gian n ms lệnh f được gọi. ◼ clearInterval(intervalID): Hủy interval. Ths. Mai Xuân Hùng 83
  84. Giải thuật ◼ Ý tưởng giải thuật ◼ Để có được cảm giác chữ chạy trên thanh trạng thái ta cần thay đổi thuộc tính status của cửa sổ bằng cách copy ký tự đầu của thanh dòng trạng thái hiện tại đưa xuống cuối cùng và lặp lại như vậy sau mỗi khoảng thời gian. ◼ Giải thuật: Giả sử ta có biến str đang lưu chuỗi cần chạy. Công việc thực hiện như sau: ◼ B1: Thể hiện chuỗi str lên thanh trạng thái. Chuyển sang bước 2 ◼ B2: Chuyển ký tự đầu của str về cuối (bằng cách gán str = xâu con kể từ vị trí thứ 2 của str đến cuối + ký tự đầu tiên của str). Chuyển sang bước 3 ◼ B3: Trễ một khoảng thời gian rồi quay lại bước 1 Ths. Mai Xuân Hùng 84
  85. Mã lệnh var str= 'Dai Hoc Cong Nghe Thong Tin'; for (i=str.length; i Ths. Mai Xuân Hùng 85
  86. Phát triển ◼ Thay bằng nhiều dòng chữ chạy khác nhau (sử dụng mảng để lưu trữ) ◼ Chữ chạy theo nhiều cách khác nhau ◼ Cho chữ chạy trên thanh tiêu đề ◼ Cho chữ chạy trên một đối tượng khác Ths. Mai Xuân Hùng 86
  87. Ví dụ ◼ Tạo form gồm các thông tin: ◼ Tên truy cập ◼ Mật khẩu ◼ Nhập lại mật khẩu ◼ Kiểm tra dữ liệu vào có hợp lệ không? ◼ Hợp lệ: ◼ tên truy cập không rỗng ◼ 2 mật khẩu giống nhau, khác rỗng, >4 ký tự Nếu hợp lệ được submit, ngược lại thông báo lỗi. Ths. Mai Xuân Hùng 87
  88. Ví dụ 2 ◼ Web link dạng combo box: Trong combo box có tên các đơn vị liên kết. Người dùng chọn đơn vị nào thì hiện web site của đơn vị đó trong 1 cửa sổ. ◼ Làm đồng hồ điện tử (hiện số) trên trang web. ◼ Hiển thị thời gian hiện tại ◼ Hiển thị khoảng thời gian đến 1 đích nào đó Ths. Mai Xuân Hùng 88