Bài giảng Lập trình web - 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 
16/08/2014 Lập trình Web 4 
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ẻ 
h
tt
p
:/
/w
w
w
.w
3
s
c
h
o
o
ls
.c
o
m
/j
s
/ 
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: 
16/08/2014 Lập trình Web 10 
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: 
16/08/2014 Lập trình Web 11 
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 */ 
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"]; 
16/08/2014 Lập trình Web 19 
Từ khóa Array được giản lược. 
Đối tượng Array [2/3] 
16/08/2014 Lập trình Web 20 
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. 
Đố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: 
 var x = Math.PI; 
 var y = Math.sqrt(16); 
16/08/2014 Lập trình Web 25 
Đối tượng Math Phương thức 
Thuộc tính 
Đố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] 
16/08/2014 Lập trình Web 30 
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. 
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: 
closed 
innerHeight 
innerWidth 
name 
opener 
outerHeight 
outerWidth 
status 
... 
Phương thức: 
alert() 
confirm() 
prompt() 
open() 
close() 
print() 
setInterval() 
setTimeout() 
16/08/2014 Lập trình Web 34 
document 
Thuộc tính: 
anchors 
body 
doctype 
documentElement 
domain 
forms 
head 
Images 
inputEncoding 
lastModified 
links 
readyState 
referrer 
title 
URL 
... 
16/08/2014 Lập trình Web 35 
document 
Phương thức: 
close() 
createAttribute() 
createComment() 
createElement() 
createTextNode() 
getElementById() 
getElementsByClassName() 
getElementsByName() 
getElementsByTagName() 
importNode() 
open() 
querySelector() 
querySelectorAll() 
write() 
writeln() 
16/08/2014 Lập trình Web 36 
history 
Thuộc tính: 
length 
Phương thức: 
back() 
forward() 
go() 
16/08/2014 Lập trình Web 37 
location 
Thuộc tính: 
hash 
host 
hostname 
href 
origin 
pathname 
port 
protocol 
search 
Phương thức: 
assign() 
reload() 
replace() 
16/08/2014 Lập trình Web 38 
navigator 
Thuộc tính: 
appCodeName 
appName 
appVersion 
cookieEnabled 
language 
onLine 
platform 
product 
userAgent 
Phương thức: 
javaEnabled() 
16/08/2014 Lập trình Web 39 
screen 
Thuộc tính: 
availHeight 
availWidth 
colorDepth 
height 
pixelDepth 
width 
Phương thức: 
Không có. 
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