Bài giảng Lập trình Web: Chương 4 - Nguyễn Hoàng Tùng

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.

Nội dung chính của slide này

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,

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ẻ

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

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

undefined Lúc khai báo nhưng chưa sử dụng

Kiểu dữ liệu & cú pháp

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

(Dấu + lúc này đóng vai trò nối chuỗi)

Hàm parseInt(…), parseFloat(…) : Đổi chuỗi sang số

Kiểu dữ liệu & cú pháp

Hàm trong JavaScript:

Khai báo chung:

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

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

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 */

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

Xử lý sự kiện bằng hàm JavaScript

Ví dụ:

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)

Đố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

Đối tượng Array [1/3]

Hoặc: var myCars = new Array("Saab", "Volvo", "BMW");

Hoặc: var myCars = ["Saab", "Volvo", "BMW"];

Đối tượng Array [2/3]

.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

Đối tượng Array [3/3]

Ví dụ:

Đối tượng Date [1/3]

Khai báo:

new Date();

var d = new Date();

var d = new Date(1986, 04, 18);

var d = new Date("April 18, 1986");

var d = new Date(1986, 04, 18, 12, 30, 45);

var d = new Date("April 18, 1986 12:30:45");

Đố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)

Đối tượng Date [3/3]

Ví dụ:

Đố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

Đối tượng Math [2/2]

Đố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ỷ:

Khai báo kiểu đối tượng:

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ự

Đối tượng Number [2/2]

Ví dụ:

Đố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\"";

Đố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

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:

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)

Một số đối tượng BOM, DOM thường dùng

readyState referrer

title URL

querySelector() querySelectorAll() write()

writeln()

…

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 )

Giải đáp thắc mắc