›
›

Bài giảng Thiết kế Web - Chương 4: JavaScript

pdf 94 trang Gia Huy 16/05/2022 3890
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế Web - Chương 4: JavaScript", để 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_thiet_ke_web_chuong_4_javascript.pdf

Nội dung text: Bài giảng Thiết kế Web - Chương 4: JavaScript

  1. BÀI GIẢNG Thiết kế Web Chương 4. JAVASCRIPT 2021 version
  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ụ
  3. Giới thiệu JavaScript ❑Là một ngôn ngữ kịch bản (script) để viết kịch bản cho phía client. ❑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.
  4. Khai báo JavaScript ❑Định nghĩa script trực tiếp trong trang html ❖Đoạn script này có thể đặt ở bất cứ đâu trong file HTML
  5. Khai báo JavaScript ❑Import javascript từ một file bên ngoài ❖Ví dụ:
  6. Nhúng JavaScript vào trang web ❑Viết javascript trong thẻ HTML: ❖Cú pháp: ❖Ví dụ:
  7. Nhúng JavaScript vào trang web ❑Ví dụ:
  8. Hiển thị/ Xuất dữ liệu ❑Viết đầu ra dưới dạng 1 phần tử HTML:
  9. Hiển thị/ Xuất dữ liệu ❑Hiển thị kết quả trong hộp thoại ❑Ghi ra màn hình console của trình duyệt
  10. JavaSrcipt – hằng ❑Khai báo hằng const tenHang=gia_tri; ❖Ví dụ: const myConst=4; ❖Note: • Tên hằng bắt đầu phải là chữ cái hoặc ký tự ‘_’ • Tên hằng không được bắt đầu bằng số
  11. JavaSrcipt – biến ❑Được dùng để lữu trữ giá trị ❑Khai báo biến ❖Sử dụng từ khóa var var x = 3; • Chú ý: Một biến được khai báo mà không được gán giá trị (giá trị Underfined) ❖Có thể không cần khai báo biến trước khi sử dụng.
  12. JavaSrcipt – biến ❑Quy tắc đặt tên biến ❖Chữ cái, chữ số, dấu gạch dưới _ và ký hiệu dollar $ ❖Bắt đầu bằng chữ cái, $, _. ❖Phân biệt chữ hoa và thường ❖Không được trùng với từ khóa trong JavaScript
  13. Toán tử trong JavaScript ❑Toán tử số học
  14. Toán tử trong JavaScript ❑Toán tử gán
  15. Toán tử trong JavaScript ❑Toán tử so sánh
  16. Toán tử trong JavaScript ❑Toán tử logic
  17. Cấu trúc điều khiển trong JavaScript ❑Rẽ nhánh if ❖Rẽ nhánh đơn ❖Rẽ nhánh if else
  18. Cấu trúc điều khiển trong JavaScript ❑Rẽ nhánh if ❖Rẽ nhánh if else lồng nhau
  19. Cấu trúc điều khiển trong JavaScript ❑Vòng lặp for
  20. Cấu trúc điều khiển trong JavaScript ❑Vòng lặp for ❖Ví dụ:
  21. Cấu trúc điều khiển trong JavaScript ❑Vòng lặp while
  22. Cấu trúc điều khiển trong JavaScript ❑ Quản lý lỗi
  23. Cấu trúc điều khiển trong JavaScript ❑ Quản lý lỗi ❖Ví dụ:
  24. Hàm trong JavaScript ❑Khai báo ❑Ví dụ:
  25. Hàm trong JavaScript  Chú ý: Có thể khai báo hàm không tên (thường dùng cho các sự kiện) ❖Ví dụ:
  26. Hàm trong JavaScript ❑Một số 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*/
  27. Một số hàm trong JavaScript ❑alert(“Nội dung thông báo” ); ❖Dùng hiển thị một hộp thông báo có nút OK ❖Ví dụ:
  28. Một số hàm trong JavaScript ❑confirm(“Nội dung thông báo”); ❖Hiển thị hộp thống báo có 2 nút OK và Cancel. Hàm trả về giá trị true nếu người sử dụng click OK và ngược lại thì trả về giá trị false. ❖Ví dụ:
  29. Một số hàm trong JavaScript ❑promt(“Nội dung đối thoại” , giá trị khởi tạo); ❖Tạo hộp thoại chứa 2 nút OK, Cancel và một textbox để người dùng nhập nội dung, giá trị trả về của hàm prompt ❖Ví dụ:
  30. Một số hàm trong JavaScript ❑eval(“Biểu thức”); ❖Chuyển đổi một chuỗi thành số hoặc giá trị logic (chuỗi có thể chứa biểu thức toán học). ❖Ví dụ:
  31. Một số hàm trong JavaScript ❑parselnt(strNum); ❖Trả về một số nguyên từ chuỗi strNum. ❖Nếu strNum theo sau là ký tự chữ thì các ký tự này sẽ bị bỏ qua. ❖Nếu strNum không bắt đầu bằng số thì hàm này trả về giá trị NaN (Not a Number) ❖Ví dụ:
  32. Một số hàm trong JavaScript ❑parseFloat(strNum); ❖Tương tự như parseInt nhưng trả về số thực ❖Ví dụ:
  33. Một số hàm trong JavaScript ❑isNaN(str); ❖Trả về false nếu str là chuỗi số, ngược lại là true ❖Ví dụ:
  34. Một số hàm trong JavaScript ❑setTimeout(“Lệnh hoặc hàm JavaScript”, thời gian); ❖Thực hiện một lệnh (hàm) JavaScript sau một khoảng thời gian (mini giây) nào đó. ❖Hàm trả về một ID (duy nhất đối với mỗi hàm setTimeout thực hiện một lệnh). Giá trị ID này dùng để xóa thời gian đã thiết lập bằng hàm clearTimeout. ❖Ví dụ: ❑clearTimeout(IDTime): hủy thời gian đã thiết lập bởi setTimeout
  35. Một số hàm trong JavaScript ❑setTimeout, clearTimeout
  36. Một số hàm trong JavaScript ❑setInterval(“Lệnh hoặc hàm JavaScript”, thời gian); ❖Lệnh hoặc hàm sẽ được lặp lại sau thời gian (mini giây) ❑clearInterval(IDTime): hủy thời gian đã thiết lập bởi setInterval
  37. Đối tượng trong JavaScript - String ❑Khai báo ❑Ghép chuỗi
  38. Đối tượng trong JavaScript - String ❑Một số ký tự đặc biệt ❖\n : xuống dòng ❖\t : tab ❖\b : BackSpace ❖\& : dấu & ❖\” : dấu ” ❖\\: dấu \
  39. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖length: cho biết số lượng ký tự có trong chuỗi • Ví dụ: ❖charA(pos): cho biết ký tự ở vị trí pos trong chuỗi • Ví dụ:
  40. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖concat(s1,s2, ): ghép các giá trị s1, s2, vào cuối chuỗi gốc • Ví dụ: ❖substr(start, numberOfchar): lấy ra chuỗi con gồm numberOfchar ký tự bắt đầu từ vị trí start (vị trí đầu tiên là 0) • Ví dụ:
  41. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖indexOf(subStr, start): tìm chuỗi con subStr bắt đầu từ vị trí start. (kết quả trả về vị trí của ký tự đầu tiên của chuỗi con, nếu không tìm thấy thì trả về giá trị -1) • Ví dụ:
  42. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖toLowerCase(): chuyển các ký tự trong chuỗi thành chữ thường. • Ví dụ: ❖toUpperCase(): chuyển các ký tự trong chuỗi thành chữ in hoa. • Ví dụ:
  43. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖match(st): trả về thông tin giống nhau giữa biểu thức so mẫu st và chuỗi gốc • Ví dụ: ❖replace(old, new): thay thế chuỗi con old (trong chuỗi gốc) bằng chuỗi new • Ví dụ:
  44. Đối tượng trong JavaScript - String ❑Các phương thức của đối của đối tượng String ❖split(symbol, maxItem): tách chuỗi thành 1 mảng tối đa maxItem phần tử với mỗi phần tử là các chuỗi con phân biệt bởi ký tự symbol trong chuỗi gốc. • Ví dụ: ❖regx.test(s): kiểm tra các ký tự chuỗi gốc s có phù hợp với các ký tự được liệt kê trong tập hợp regx.
  45. Đối tượng trong JavaScript - Array ❑Khai báo ❖Khai báo mảng 1 chiều • Sử dụng
  46. Đối tượng trong JavaScript - Array ❑Khai báo ❖Khai báo mảng đa chiều • Sử dụng ❖Thuộc tính length • Ví dụ: them 1 phần tử “END” vào cuối mảng
  47. Đối tượng trong JavaScript - Array ❑Các phương thức của đối tượng Array ❖toString() hoặc valueOf(): cho kết quả là chuỗi liệt kê các phần tử của mảng. • Ví dụ:
  48. Đối tượng trong JavaScript - Array ❑Các phương thức của đối tượng Array ❖concat(item1, item2, ) : thêm phần tử vào cuối mảng • Ví dụ:
  49. Đối tượng trong JavaScript - Array ❑Các phương thức của đối tượng Array ❖concat(item1, item2, ) : thêm phần tử vào cuối mảng • Ví dụ:
  50. Đối tượng trong JavaScript - Array ❑Các phương thức của đối tượng Array ❖pop(): loại bỏ và trả về phần tử cuối cùng của mảng • Ví dụ: ❖shift(): loại bỏ và trả về phần tử đầu tiên của mảng.
  51. Đối tượng trong JavaScript - Array ❖slice(start, end): tạo mảng mới bắt đầu từ phần tử start đến trước phần tử end (không thay đổi mảng gốc) • Ví dụ: ❖splice(start, numberOfItems, item1, item2, ): tách mảng bắt đầu từ phần tử start lấy numberOfItems phần tử, bổ sung them các phần tử item1, item2, thế vào vị trí các phần tử mất đi ở mảng gốc. • Ví dụ:
  52. Đối tượng trong JavaScript - Array ❖sort(): sắp xếp mảng 1 chiều theo thứ tự tăng dần (thứ tự sx kiểu phần tử: number → string → Boolean) • Ví dụ: ❖reverse(): đảo ngược thứ tự các phần tử trong mảng • Ví dụ:
  53. Đối tượng trong JavaScript - Array ❖join(symbol): ghép các phần tử của mảng vào 1 chuỗi phân biệt bởi symbol mặc định là dấu , • Ví dụ:
  54. Đối tượng trong JavaScript - Date ❖Khai báo ➢Chú ý:
  55. Đối tượng trong JavaScript - Date ❖Các phương thức của đối tượng Date Phương thức Miêu tả getDate() Trả về ngày của đối tượng Date (từ 1-31) getDay() Trả về thứ trong tuần của đối tượng Date ( từ 0-6) getMonth() Trả về giá trị tháng của đối tượng Date (0-11) getFullYear() Trả về giá trị năm của đối tượng Date (4 chữ số) Trả về giá trị năm của đối tượng Date (2 chữ số nếu getYear() năm <2000) getHours() Trả về giá trị Giờ getMinutes() Trả về giá trị Phút getSeconds() Trả về giá trị Giây
  56. Đối tượng trong JavaScript - Date ❖Các phương thức của đối tượng Date Phương thức Miêu tả setDate(value) Thiết lập giá trị ngày (từ 1-31) setMonth(value) Thiết lập giá trị tháng (0-11) setYear() Thiết lập giá trị năm setFullYear() Thiết lập giá trị năm setHours(value) Thiết lập giá trị giờ (0-23) setMinutes(value) Thiết lập giá trị phút (0-59) setSeconds(value) Thiết lập giá trị giây (0-59)
  57. Đối tượng trong JavaScript - Date ❖Các phương thức của đối tượng Date • Ví dụ:
  58. Đối tượng trong JavaScript - Math ❖Các thuộc tính • Ví dụ:
  59. Đối tượng trong JavaScript - Math ❖Các phương thức
  60. Đối tượng trong JavaScript - Math ❖Các phương thức
  61. Đối tượng trong JavaScript – Number ❑Các phương thức ❖toFixed(d): định dạng số với d chữ số sau dấu . • Ví dụ: ❖toPrecision(n): định dạng số có n chữ số sau dấu (kể cả phần lẻ) • Ví dụ: ❖toString(): chuyển số thành chuỗi
  62. Đối tượng trong JavaScript –window ❑Các thuộc tính
  63. Đối tượng trong JavaScript –window ❑Các thuộc tính
  64. Đối tượng trong JavaScript –window ❑Các phương thức
  65. Đối tượng trong JavaScript –window ❑Các phương thức
  66. Đối tượng trong JavaScript – location ❑Các thuộc tính ❖hostname: trả về hostname của URL hiện tại. ❖href: trả về đường dẫn đầy đủ đến vị trị của tài liệu hiện tại ❖pathname: trả về đường dẫn tương đối đến URL hiện tại. ❖port: trả về cổng nhận thông tin của URL hiện tại, mặc định là cổng 80.
  67. Đối tượng trong JavaScript – location ❑Các phương thức ❖assign(URL): mở trang URL. ❖reload(): mở lại trang hiện tại ❖replace(URL): thay thế trang hiện tại bằng trang mới URL ❖Ví dụ:
  68. Đối tượng trong JavaScript – history ❑Các phương thức ❖back(): quay trở lại trang vừa mới được ghé thăm ngay trước khi mở trang hiện tại. ❖forward(): quay lại trang được mở ngay sau trang hiện tại. ❖go(number): điều khiển trình duyệt mở trang thứ number ngay trước trang hiện tại ❖Ví dụ:
  69. Đối tượng trong JavaScript – document ❑Một số phương thức chính ❖getElementById(idValue): lấy ra element với thuộc tính id có giá trị là idValue. ❖getElementsByName(name): lấy danh sách các element (mảng các element) với thuộc tính name có giá trị là name. ❖getElementsByTagName(tagName): lấy danh sách các element (mảng các element) với thet có tên là tagName.
  70. Đối tượng trong JavaScript – document ❑Thay đổi nội dung của element ❖inner: là nội dung chứa bên trong của đối tượng • innerHTML: lấy nội dung text và tag HTML bên trong đối tượng (element) • inneText: chỉ lấy nội dung text bên trong đối tượng. ❖outer: là phần inner và bản thân đối tượng • outerHTML: lấy nội dung text và tag HTML bên trong và cả đối tượng • outerText: chỉ lấy nội dung text của đối tượng
  71. Đối tượng do người dùng định nghĩa
  72. Đối tượng do người dùng định nghĩa ❑Khai báo ❑Sử dụng
  73. Xử lý sự kiện ❑Xử lý sự kiện cho các thẻ HTML ❖Ví dụ:
  74. Xử lý sự kiện ❑Xử lý sự kiện dạng function
  75. Xử lý sự kiện ❑Xử lý sự kiện dạng thuộc tính
  76. Xử lý sự kiện ❑Một số sự kiện ❖Sự kiện trên chuột
  77. Xử lý sự kiện ❑Một số sự kiện ❖Sự kiện trên bàn phím
  78. Xử lý sự kiện ❑Một số sự kiện trên form
  79. jQuery – giới thiệu ❑Thư viện javascript mã nguồn mở, miễn phí dùng để hỗ trợ cho người lập trình có thể viết JavaScript nhanh hơn, dễ dàng hơn, ngắn gọn hơn. ❑jQuery đơn giản hóa việc quản lý HTML/DOM, điều khiển sự kiện, chuyển động, CSS.
  80. jQuery – các tính năng chính ❑Tương tác với HTML/DOM ❑Tương tác với CSS ❑Bắt và xử lý sự kiện HTML ❑Các hiệu ứng và chuyển động trong HTML ❑AJAX (Asynchronous JavaScript and XML) ❑JSON parsing ❑Các tiện ích xây dựng sẵn
  81. Cài đặt - tích hợp jQuery vào Website
  82. Cài đặt - tích hợp jQuery vào Website ❑Cách 1: tải file js tại (nên chọn bản đã nén có chữ min.js) ❑Cách 2: Dùng CND Google (lấy link phiên bải tại jQuery Google
  83. Cài đặt - tích hợp jQuery vào Website ❖Hoặc viết ngắn gọn Chú ý: ký tự $ được dùng để truy cập jQuery
  84. Cài đặt - tích hợp jQuery vào Website ❑Ví dụ:
  85. jQuery – selector ❑Cú pháp ❖action(): là các hành động trên phần tử đã chọn ❖Ví dụ: Syntax Description $("*") Lựa chọn tất cả element $(this) Lựa chọn element hiện tại $("p.intro") lựa chọn các thẻ có class="intro" $("p:first") lựa chọn thẻ đầu tiên $("[href]") lựa chon tất cả các element có thuộc tính href $(":button") lựa chon tất cả thẻ và thẻ có type="button"
  86. Thuộc tính HTML và jQuery ❑attr(attr_name): lấy giá trị của thuộc tính có tên attr_name ❑attr(attr_name, attr_val): gán giá trị attr_val vào thuộc tính attr_name. ❖Ví dụ:
  87. jQuery – Điều khiển nội dung ❑Lấy nội dung của đối tượng HTML ❑Thiết lập nội dung mới cho đối tượng HTML
  88. jQuery – Điều khiển nội dung ❑Lấy/ thiết lập nội dung của đối tượng HTML ❖Ví dụ:
  89. jQuery – Điều khiển nội dung ❑Lấy nội dung nhập từ bàn phím của thẻ Chú ý: Không dùng .pop() để lấy giá trị của các thuộc tính khác trong phần tử HTML ❑Thiết lập nội dung hiển thị của thẻ :
  90. jQuery – Điều khiển nội dung ❑chèn phần tử, nội dung vào HTML ❖append(): chèn nội dung vào cuối trong phần tử được chọn ❖prepend(): chèn nội dung vào đầu trong phần tử được chọn ❖after(): chèn nội dung vào phía sau phần tử được chọn ❖before(): chèn nội dung vào phía trước phần tử được chọn Chú ý: Nội dung chèn có thể là HTML Markup, Text hoặc tạo ra một phần tử DOM mới bằng jQuery
  91. jQuery – Điều khiển nội dung ❑Thêm nội dung (thêm phần tử HTML) - Ví dụ:
  92. Sử dụng Jquery (sự kiện onload) ❑Xử lý sự kiện onload khởi tạo các thành phần trong trang. ❑Cách tiếp cận JavaScript truyền thống: ❑Với jquery, hàm xử lý sự kiện onload sẽ gọi ngay sau khi DOM của document đã nạp xong.
  93. Sử dụng Jquery (sự kiện onload) ❑ có thể được gọi nhiều lần, các hàm XL sự kiện sẽ được gọi theo thứ tự nó được đăng ký.
  94. Sử dụng Jquery (sự kiện onload)