Bài giảng Lập trình Web - Phần 4: Cơ bản về Javascript - Nguyễn Hoàng Tùng

CƠ BẢN VỀ JAVASCRIPT  Nguyễn Hoàng Tùng  Bộ môn Kỹ thuật phần mềm  nhoangtung@agu.edu.vn  www.nhtung.com Nội dung chính của slide này JavaScript là gì? Kiểu dữ liệu & cú pháp. Xử lý sự kiện. Sử dụng các đối tượng trong JavaScript. Một số JavaScript APIs. 16/08/2014 Lập trình Web 2 JavaScript là gì? Ra đời năm 1995 bởi Brendan Eich (đồng sáng lập và hiện tại là CEO của Mozilla). Là ngôn ngữ kịch bản dạng thông dịch phổ biến trên Web. Đặc tính của JavaScript: Đơn giản. Động (Dynamic). Hướng đối tượng (Object oriented). Khả năng của JavaScript: Cho phép đặc tả dữ liệu động vào trang HTML, Tương tác với các sự kiện của HTML, Thay đổi nội dung của các đối tượng HTML, 16/08/2014 Lập trình Web 3 Nhúng JavaScript vào trang web Câu lệnh JavasScript có thể đặt ở phần head. hoặc phần body. Có thể định nghĩa JavasScript ở file .js bên ngoài rồi nhúng vào HTML thông qua thẻ schools.com/js/ 3 16/08/2014 Lập trình Web 4 Kiểu dữ liệu & cú pháp Cách đặt tên biến: Bắt đầu bằng một chữ cái hoặc dấu _ A..Z, a..z, 0..9, _: Phân biệt HOA, thường. Khai báo biến: Dùng từ khóa var Ví dụ: var count = 10, amount; Biến thật sự tồn tại khi sử dụng lần đầu tiên. 16/08/2014 Lập trình Web 5 Kiểu dữ liệu & cú pháp Kiểu dữ liệu: number Kiểu số nguyên, số thực. boolean Kiểu logic (True/False). string Kiểu chuỗi. object Kiểu đối tượng. null Dữ liệu rỗng. undefined Lúc khai báo nhưng chưa sử dụng. 16/08/2014 Lập trình Web 6 Kiểu dữ liệu & cú pháp 16/08/2014 Lập trình Web 7 Kiểu dữ liệu & cú pháp Đổi kiểu dữ liệu: Biến số tự đổi kiểu dữ liệu khi giá trị thay đổi. • Ví dụ: var x = 10; x = "Hello world!"; 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" (Dấu + lúc này đóng vai trò nối chuỗi) Hàm parseInt(), parseFloat() : Đổi chuỗi sang số. 16/08/2014 Lập trình Web 8 Kiểu dữ liệu & cú pháp Hàm trong JavaScript: 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); } 16/08/2014 Lập trình Web 9 Kiểu dữ liệu & cú pháp Ví dụ về hàm trong JavaScript: Chuyển chuỗi thành số Gọi hàm TinhTong 16/08/2014 Lập trình Web 10 Kiểu dữ liệu & cú pháp Kết quả khi chạy trên trình duyệt Chrome: Nhập giá trị vào ô và click nút “Tính tổng” Kết quả hiện thị dưới dạng hộp thoại 16/08/2014 Lập trình Web 11 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 ; (mặc dù không có cũng không sao). Các lệnh: Điều kiện: if...else..., switch...case... Lặp: while, do...while, for, for...in Thao tác đối tượng. Cách ghi chú thích: // Đây là chú thích trên 1 dòng /* Đây là chú thích trên nhiều dòng */ 16/08/2014 Lập trình Web 12 Xử lý sự kiện Các sự kiện thông dụng. Xử lý sự kiện cho các thẻ HTML. Xử lý sự kiện bằng hàm JavaScript. 16/08/2014 Lập trình Web 13 Các sự kiện thông dụng onload onclick onsubmit onfocus onblur onmouseover onmouseout onchange onkeypress 16/08/2014 Lập trình Web 14 Xử lý sự kiện cho các thẻ HTML Cú pháp: Ví dụ: Lưu ý: Dấu " " và ' '. 16/08/2014 Lập trình Web 15 Xử lý sự kiện bằng hàm JavaScript Ví dụ: 16/08/2014 Lập trình Web 16 Sử dụng các đối tượng trong JavaScript JavaScript hỗ trợ hướng đối tượng. Các đối tượng hỗ trợ trong JavaScript bao gồm: Đối tượng được xây dựng sẵn (built-in), • Array, Date, Math, Number, String, (viết hoa chữ đầu) Đối tượng liên quan đến trình duyệt (BOM), • history, location, navigator, screen, (viết thường) Đối tượng liên quan đến tài liệu HTML (DOM HTML). • document, anchors, cookie, embeds, forms, images, (viết thường) 16/08/2014 Lập trình Web 17 Đối tượng được xây dựng sẵn (built-in) Đối tượng Array Đối tượng Date Đối tượng Math Đối tượng Number Đối tượng String 16/08/2014 Lập trình Web 18 Đối tượng Array [1/3] Có chỉ số bắt đầu từ 0. Cách khai báo Mảng: new Array(); VD: var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Volvo"; myCars[2] = "BMW"; Hoặc: var myCars = new Array("Saab", "Volvo", "BMW"); Hoặc: var myCars = ["Saab", "Volvo", "BMW"]; Từ khóa Array được giản lược. 16/08/2014 Lập trình Web 19 Đối tượng Array [2/3] Thuộc tính: length - trả về số phần tử của mảng. Phương thức: .concat() - Ghép 2 hay nhiều mảng lại với nhau. .join() - Ghép các phần tử thành 1 chuỗi. .pop() - Lấy phần tử cuối ra khỏi mảng. .push() - Thêm một phần tử mới vào cuối mảng. .reverse() - Đảo ngược vị trí các phần tử trong mảng. .shift() - Bỏ phần tử đầu của mảng. .unshift() - Thêm các phần tử vào đầu mảng, trả về chiều dài mới. .sort() - Sắp xếp thứ tự các phần tử trong mảng. 16/08/2014 Lập trình Web 20 Đối tượng Array [3/3] Ví dụ: 16/08/2014 Lập trình Web 21 Đối tượng Date [1/3] Khai báo: new Date(); VD: // Lấy thời gian hiện tại var d = new Date(); // 18/04/1986 var d = new Date(1986, 04, 18); var d = new Date("April 18, 1986"); // 18/04/1986 12:30:45 var d = new Date(1986, 04, 18, 12, 30, 45); var d = new Date("April 18, 1986 12:30:45"); 16/08/2014 Lập trình Web 22 Đối tượng Date [2/3] Phương thức: .getDate() - Trả về ngày của tháng (từ 1-31). .getDay() - Trả về thứ tự ngày của tuần (từ 0-6). .getMonth() - Trả về tháng (từ 0-11). .getFullYear() - Trả về năm (4 chữ số). .getHours() - Trả về giờ (từ 0-23). .getMinutes() - Trả về phút (từ 0-59). .getSeconds() - Trả về giây (từ 0-59). .getMilliseconds() - Trả về mili giây (từ 0-999). .getTime() - Trả về số mili giây kể từ 01/01/1970 00:00:00. ... 16/08/2014 Lập trình Web 23 Đối tượng Date [3/3] Ví dụ: 16/08/2014 Lập trình Web 24 Đối tượng Math [1/2] Sử dụng đối tượng Math cho các hàm toán học. Không cần khai báo với từ khóa new. Thuộc tính: PI – trả về hằng số PI = 3.14159... E – trả về hằng số E = 2.718 VD: Thuộc tính var x = Math.PI; var y = Math.sqrt(16); Đối tượng Math Phương thức 16/08/2014 Lập trình Web 25 Đối tượng Math [2/2] Phương thức: Math.abs(x) - Lấy trị tuyệt đối của x. Math.sin(x), Math.asin(x) Math.cos(x), Math.acos(x) Math.tan(x), Math.atan(x) Math.max(x, y, z,..., n) - Trả về số lớn nhất. Math.min(x, y, z,..., n) - Trả về số nhỏ nhất. Math.random() - Trả về số ngẫu nhiên trong khoảng 0 - 1. Math.round(x) - Làm tròn x đến số nguyên gần nhất. Math.sqrt(x) - Căn bậc hai của x. ... 16/08/2014 Lập trình Web 26 Đối tượng Number [1/2] Chỉ có duy nhất 1 kiểu số (không có kiểu int, float, double, cụ thể). Khai báo nguyên thuỷ: VD: var x = 6.14; // Kiểu số thực var y = 34; // Kiểu số nguyên Khai báo kiểu đối tượng: VD: var z = new Number(34); // Viết hoa chữ N Phương thức: .toExponential(x) – Định dạng số mũ khoa học. .toFixed(x) - Cố định chiều dài phần thập phân có x ký tự. .toPrecision(x) - Cố định chiều dài số có x ký tự. .toString() - Chuyển số thành chuỗi. 16/08 /2014 Lập trình Web 27 Đối tượng Number [2/2] Ví dụ: 16/08/2014 Lập trình Web 28 Đối tượng String [1/2] Khai báo nguyên thuỷ. var biến = "chuỗi"; hoặc var biến = 'chuỗi'; Khai báo kiểu đối tượng: var biến = new String("chuỗi"); Lưu ý: var answer = "He is called 'Johnny'"; var answer = 'He is called "Johnny"'; var answer = 'It\'s alright'; var answer = "He is called \"Johnny\""; 16/08/2014 Lập trình Web 29 Đối tượng String [2/2] Thuộc tính: length – trả về chiều dài chuỗi (số ký tự). Phương thức: .replace() - Tìm kiếm và thay thế. .search() - Tìm kiếm, trả về vị trí tìm thấy. .split() - Tách chuỗi thành một mảng các chuỗi con. .substr() - Cắt chuỗi từ vị trí bắt đầu. .substring() - Cắt chuỗi giữa 2 vị trí quy định. .toLowerCase() - Chuyễn chuỗi thành chữ thường. .toUpperCase() - Chuyễn chuỗi thành chữ HOA. .trim() - Cắt bỏ khoảng trắng đầu và cuối chuỗi. 16/08/2014 Lập trình Web 30 BOM, DOM và JavaScript BOM - Browser Object Model (mô hình đối tượng của trình duyệt). Cho phép JavaScript "giao tiếp" với trình duyệt. Chưa có chuẩn chính thức cho BOM. Các đối tượng thường dùng: 16/08/2014 Lập trình Web 31 BOM, DOM và JavaScript DOM - Document Object Model (mô hình đối tượng của tài liệu). Gồm một tập hợp các đối tượng HTML chuẩn và các phương thức truy xuất các đối tượng này. DOM cho phép truy xuất nội dung, thuộc tính của toàn bộ thành phần HTML trong trang web (sửa, xóa, thêm thành phần mới). 16/08/2014 Lập trình Web 32 Một số đối tượng BOM, DOM thường dùng window document history location navigator screen 16/08/2014 Lập trình Web 33 window Thuộc tính: Phương thức: closed alert() innerHeight confirm() innerWidth prompt() name open() opener close() outerHeight print() outerWidth setInterval() status setTimeout() ... 16/08/2014 Lập trình Web 34 document Thuộc tính: anchors lastModified body links doctype readyState documentElement referrer domain title forms URL head ... Images inputEncoding 16/08/2014 Lập trình Web 35 document Phương thức: close() importNode() createAttribute() open() createComment() querySelector() createElement() querySelectorAll() createTextNode() write() getElementById() writeln() getElementsByClassName() getElementsByName() getElementsByTagName() 16/08/2014 Lập trình Web 36 history Thuộc tính: Phương thức: length back() forward() go() 16/08/2014 Lập trình Web 37 location Thuộc tính: Phương thức: hash assign() host reload() hostname replace() href origin pathname port protocol search 16/08/2014 Lập trình Web 38 navigator Thuộc tính: Phương thức: appCodeName javaEnabled() appName appVersion cookieEnabled language onLine platform product userAgent 16/08/2014 Lập trình Web 39 screen Thuộc tính: Phương thức: availHeight Không có. availWidth colorDepth height pixelDepth width 16/08/2014 Lập trình Web 40 Một số JavaScript APIs Geolocation ( Drag and Drop ( 16/08/2014 Lập trình Web 41 Giải đáp thắc mắc 16/08/2014 Lập trình Web 42