Bài giảng Lập trình Web - Chương 2: Lập trình Web với JavaScript

BÀI GIẢNG Lập Trình Web Chương 1 : Giới thiệu về HTML Chương 2 : Javascript Chương 3 : DHTML Chương 4 : XML GV: Nguyễn Duy Nhất nhatnd@hcm.fpt.vn BÀI GIẢNG Lập Trình Web Chương 2 Lập Trình Web Với Javascript Lập Trình Web Với Javascript Giới thiệu Cú pháp Javascript Các lớp đối tượng của Javascript Lập trình Javascript với HTML DOM 1. Giới thiệu Javascript là ngôn ngữ lập trình web phía Client. Chức năng : xử lý các tương tác giữa trang web và người duyệt web, tương tác theo sự kiện, can thiệp vào các thành phần HTML ngay cả khi trang web đã được hiển thị. Được “biên dịch và chạy” bởi trình duyệt web. Mã Javascript được viết xen lẫn mã HTML trong trang web. 1. Giới thiệu Một trang html có mã Javascript 1. Giới thiệu Mã Javascript được đặt trong thẻ đôi . Hoặc 1. Giới thiệu Các vị trí của mã Javascript trong trang HTML Trong thẻ Head 1. Giới thiệu Chèn mã Javascript từ file vào trang web. 2. Cú pháp Javascript Khai báo biến Các phép toán Khai báo hàm / thủ tục Các phát biểu Lưu ý 2. Cú pháp Javascript Khai báo biến Biến  Thùng chứa  Kiểu biến được xác định khi biến đã được gán dữ liệu. Có thể khai báo biến bằng từ khóa var, hoặc sử dụng mà không cần khai báo. Biến cục bộ : được khai báo bên trong 1 hàm. Ngược lại  biến toàn cục. Ta thường đặt đoạn Javascript khai báo biến toàn cục trong phần Head. 2. Cú pháp Javascript Các phép toán : đại số 2. Cú pháp Javascript Các phép toán : gán 2. Cú pháp Javascript Các phép toán : so sánh 2. Cú pháp Javascript Các phép toán : logic 2. Cú pháp Javascript Các phép toán : nối chuỗi 2. Cú pháp Javascript Khai báo hàm / thủ tục Hàm không có tham số : Hàm có tham số : 2. Cú pháp Javascript Khai báo hàm / thủ tục Hàm có trả về giá trị : Các hàm phải được khai báo trong phần Head 2. Cú pháp Javascript Khai báo hàm / thủ tục 2. Cú pháp Javascript Các phát biểu – Phát biểu điều kiện Hoặc 2. Cú pháp Javascript Các phát biểu – Phát biểu điều kiện 2. Cú pháp Javascript Các phát biểu – Toán tử điều kiện Ví dụ 2. Cú pháp Javascript Các phát biểu – Phát biểu lặp 2. Cú pháp Javascript Lưu ý Mã lệnh Javascript phân biệt chữ hoa và thường. Xuống hàng cho một dòng mã quá dài 2. Cú pháp Javascript Lưu ý Các ký tự đặc biệt : “ , ‘ , & Chú thích ghi viết mã Javascript 3. Các lớp đối tượng của Javascript Array Boolean Date Math String 3. Các lớp đối tượng của Javascript Khảo sát một lớp đối tượng  Khảo sát Các thuộc tính (Properties) Các phương thức / hàm (Mothods) Phương thức tĩnh (Static) Phương thức đối tượng Các sự kiện (Events) Cách khai báo đối tượng từ lớp đối tượng Sử dụng từ khóa new 3. Các lớp đối tượng của Javascript Array Sử dụng để lưu một mảng các biến, lưu ý rằng các biến không phân biệt kiểu giá trị. 3. Các lớp đối tượng của Javascript Boolean Biến chứa giá trị boolean (true / false), được sử dụng trong các trường hợp : Nhận kết quả trả về từ một biểu thức luận lý / biểu thức điều kiện. Ép kiểu (type casting) 1 kiểu dữ liệu về kiểu boolean. 3. Các lớp đối tượng của Javascript Date Dùng để tính toán trên ngày / giờ : Tạo một chuỗi ngày / giờ. Phân tích ngày, tháng, năm, giờ, phút, giây từ các chuỗi ngày giờ. Cộng trừ ngày / giờ. Lấy ngày / giờ của hệ thống (máy tính đang duyệt web) 3. Các lớp đối tượng của Javascript Math Chứa các hằng toán học (properties) và các phương thức tĩnh về toán : tính căn bậc 2, lũy thừa, các hàm lượng giác, làm tròn… Hàm tạo số ngẫu nhiên : random() 3. Các lớp đối tượng của Javascript String Các thao tác xử lý trên chuỗi. Cắt, nối chuỗi. Trích xuất, tìm kiếm chuỗi con. … 4. Các đối tượng thuộc HTML DOM Giới thiệu DOM Objects