Bài giảng Lập trình Web: Chương 4 trình bày về Cơ bản về JAVASCRIPT. Nội dung cụ thể của chương này gồm có: JavaScript là gì, kiểu dữ liệu và cú pháp, xử lý sự kiện, sử dụng các đối tượng trong JavaScript, một số JavaScript APIs.
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 slide JavaScript gì? Kiểu liệu & cú pháp Xử lý kiện Sử dụng đối tượng JavaScript Một số JavaScript APIs 16/08/2014 Lập trình Web JavaScript gì? Ra đời năm 1995 Brendan Eich (đồng sáng lập CEO Mozilla) Là ngôn ngữ kịch dạng thơng dịch phổ biến Web Đặc tính JavaScript: Đơn giản Động (Dynamic) Hướng đối tượng (Object oriented) Khả JavaScript: Cho phép đặc tả liệu động vào trang HTML, Tương tác với kiện HTML, Thay đổi nội dung đối tượng HTML, … 16/08/2014 Lập trình Web Câu lệnh JavasScript đặt phần head phần body Có thể định nghĩa JavasScript file js bên nhúng vào HTML thơng qua thẻ 16/08/2014 Lập trình Web http://www.w3schools.com/js/ Nhúng JavaScript vào trang web Kiểu liệu & cú pháp Cách đặt tên biến: Bắt đầu chữ dấu _ A Z, a z, 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 tồn sử dụng lần 16/08/2014 Lập trình Web Kiểu liệu & cú pháp Kiểu 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 chưa sử dụng 16/08/2014 Lập trình Web Kiểu liệu & cú pháp 16/08/2014 Lập trình Web Kiểu liệu & cú pháp Đổi kiểu liệu: Biến số tự đổi kiểu liệu giá trị thay đổi • Ví dụ: var x = 10; x = "Hello world!"; Có thể cộng biến khác kiểu liệu • Ví dụ: var x; x = "12" + 34.5; // KQ: x = "1234.5" (Dấu + lúc đóng vai trị nối chuỗi) Hàm parseInt(…), parseFloat(…) : Đổi chuỗi sang số 16/08/2014 Lập trình Web Kiểu liệu & cú pháp Hàm 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 Kiểu liệu & cú pháp Ví dụ hàm JavaScript: Chuyển chuỗi thành số Gọi hàm TinhTong 16/08/2014 Lập trình Web 10 Đố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"; 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ả chiều dài chuỗi (số ký tự) Phương thức: replace() - Tìm kiếm thay .search() - Tìm kiếm, trả vị trí tìm thấy .split() - Tách chuỗi thành mảng chuỗi .substr() - Cắt chuỗi từ vị trí bắt đầu .substring() - Cắt chuỗi 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 cuối chuỗi 16/08/2014 Lập trình Web 30 BOM, DOM JavaScript BOM - Browser Object Model (mơ hình đối tượng trình duyệt) Cho phép JavaScript "giao tiếp" với trình duyệt Chưa có chuẩn thức cho BOM Các đối tượng thường dùng: 16/08/2014 Lập trình Web 31 BOM, DOM JavaScript DOM - Document Object Model (mơ hình đối tượng tài liệu) Gồm tập hợp đối tượng HTML chuẩn phương thức truy xuất đối tượng DOM cho phép truy xuất nội dung, thuộc tính tồn thành phần HTML 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: Khơng có availHeight availWidth colorDepth height pixelDepth width 16/08/2014 Lập trình Web 40 Một số JavaScript APIs Geolocation (http://www.w3schools.com/html/html5_geolocation.asp) Drag and Drop (http://www.w3schools.com/html/html5_draganddrop.asp) 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 ... getDate() - Trả ngày tháng (từ 1-3 1) .getDay() - Trả thứ tự ngày tuần (từ 0-6 ) .getMonth() - Trả tháng (từ 0-1 1) .getFullYear() - Trả năm (4 chữ số) .getHours() - Trả (từ 0-2 3) .getMinutes() - Trả... 16/08/20 14 Lập trình Web 14 Xử lý kiện cho thẻ HTML Cú pháp: Ví dụ: Lưu ý: Dấu " " '' '' 16/08/20 14 Lập trình Web 15 Xử lý kiện hàm JavaScript Ví dụ: 16/08/20 14 Lập trình. .. 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/20 14 Lập trình Web