HTML Java Script

HTML + CSS + JAVASCRIPT
CÁC KHÁI NIỆM CƠ BẢN

css
HTML
js Nội dung
1 KHÁI NIỆM DOM
2 QUÁ TRÌNH RENDER CỦA TDW
3 GIỚI THIỆU VỀ JAVASCRIPT
2
css
HTML
js
khái niệm DOM
 DOM là viết tắt của Document Object Model. Là mô hình quản lý đối tượng thẻ HTML trong một tài liệu
HTML theo cấu trúc cây dựa trên mối quan hệ cha- con giữa các thẻ HTML và nội dung của thẻ HTML.
 DOM sẽ cụ thể hóa chi tiết từng đối tượng HTML cùng nội dung và thuộc tính của nó thành những OBJECT
giúp cho Javascript có thể dễ dàng thực hiện các thao tác nhầm tác động đến nội dung, thành phần cũng
như thuộc tính của từng OBJECT cụ thể trong DOM.
3
css
HTML
js MÔ HÌNH DOM
4
css
HTML
js 3 bước để xây dựng trang
Các bước cơ bản mà trình duyệt thực hiện để

xây dựng trang (vẽ một trang lên màn hình).
•Xây dựng DOM
•Xây dựng CSSOM
•Xây dựng Cây Hiển Thị (Render Tree)
•Tính toán và bố trí vị trí các nút trên cây
•Vẽ các nút lên màn hình
5
css
HTML
js
<html>
<head> <meta charset="UTF-8">
<link rel="stylesheet" type="text/css"
href="theme.css">
</head>
<body>
<p> Hello, <span> friend! </span> </p>
<div> <img src="smiley.gif" alt="Smiley face"
height="42" width="42"> </div>
</body>
</html> 6
css
HTML
js
DOM tree của đoạn HTML trên sẽ giống như sau:
7
css
HTML
js
XÂY DỰNG CSSOM TREE
CSSOM viết tắt của CSS Object Model. Trong khi trình duyệt đang xây dựng DOM,
nó bắt gặp một thẻ link trong phần head và dẫn tới một file CSS tên là theme.css ở
bên ngoài. Dự đoán rằng nó có thể cần đến tài nguyên này để render trang, ngay lập
tức nó điều phối 1 request đến. Giả sử file theme.css có nội dung như sau:
body { font-size: 16px; } p { font-weight: bold; } span { color: red; } p span { display:
none; } img { float: right; }
Tương tự HTML, engine cần chuyển tất cả CSS sang một thứ gì đó mà trình duyệt
có thể xử lý, chính là CSSOM. Dưới đây là mô phỏng của CSSOM tree:
8
css
HTML
js CSSOM
9
css
HTML
js
Tại sao CSSOM lại có cấu trúc dạng cây (tree)? Khi tính toán bộ style cuối cùng
cho mỗi object trên trang, trình duyệt sẽ bắt đầu với rule áp dụng toàn cục nhất
cho node đó (ví dụ: nếu nó là con của phần tử body thì áp dụng tất cả style của
body) và tinh chỉnh một cách đệ quy những style đã được tính toán bằng cách
áp dụng các rule cụ thể hơn.
Với ví dụ ở trên, bất kỳ text nào nằm bên trong thẻ span mà span nằm trong
phần tử body thì đều có font-size 16 và màu đỏ. Những style này được kế thừa
từ phần tử body. Nếu như span là con của phần tử p thì nội dung của nó sẽ bị
ẩn bởi vì có style khác cụ thể hơn đã được áp dụng cho nó (ở đây là display:
none).
Thêm nữa, lưu ý rằng tree ở trên chưa phải là CSSOM tree hoàn chỉnh và chỉ
thể hiện những style mà ta đã ghi đè trong style sheet. Mỗi trình duyệt cung cấp
1 bộ style mặc định, còn được biết tới là user agent styles - đây chính những
gì ta thấy nếu như không cung cấp style cụ thể. Style của chúng ta thêm vào chỉ
đơn giản là ghi đè lại những phần mặc định này.
10
css
HTML
js
Dưới đây là cách mà render tree của DOM & CSSOM ở trên thể hiện:
11
css
HTML
js
Để xây dựng render tree, trình duyệt về cơ bản sẽ làm

những bước sau đây:
Bắt đầu từ root của DOM tree, nó sẽ đi qua mỗi node thấy
được. Vài node có thể bị ẩn đi (ví dụ như tag script, meta,
vân vân) hoặc bỏ qua bởi vì chúng không phản chiếu trong
kết quả render đầu ra. Vài node bị ẩn bởi CSS và cũng bị
bỏ qua khỏi render tree. Ví dụ như node span trong ví dụ
trên thì nó sẽ không có mặt trong render tree vì đã được set
style display: none rồi.
Với mỗi node thấy được, trình duyệt sẽ tìm các rule
CSSOM phù hợp và khớp với nó rồi áp dụng vào.
Trình duyệt sẽ xuất ra các node thấy được với nội dung và
style tương ứng.
12
css
HTML
js
Cây hiển thị về cơ bản đưa DOM và CSSOM kết hợp lại với nhau để tạo ra bản
đồ đầy đủ về cách trang sẽ thực sự được bố cục và định dạng.
13
css
HTML
js Quá trình render nội dụng của TDW
Trình tự engine render thể hiện nội dung được thể hiện
trong biểu đồ dưới đây
Phân tích HTML và tạo cây DOM - HTML là cấu trúc

phân cấp được bắt đầi bởi thẻ <html>, thường sẽ bao
gồm thẻ <head>, <body> và các thành phần khác lồng
bên trong. Những thẻ này được phân tích và tổng hợp
thành cây DOM.
14
css
HTML
js
Render cấu trúc cây – Thuộc tính CSS (thuộc tính style)
cũng được phân tích và tích hợp với cây DOM để tạo ra
"cây render". Đây là cây của các yếu tố trực quan như chiều
cao, chiều dài và màu sắc được sắp xếp phân cấp theo
cách chúng sẽ được trình bày trên TDW.
15
css
HTML
js
Render/Hiển thị
Sau khi tất cả các bước trên được thực hiện, cuối cùng trình duyệt web hiển thị lên
màn hình.
Có hai điều chính xảy ra ở đây…
•Bố cục/Layout
•Định dạng hoàn chỉnh/Paint
16
css
HTML
js
JS là gì? Tại sao cần JS trong HTML?

 Javascript là một ngôn ngữ lập trình kịch bản thực thi ở phía client được bổ sung
vào HTML nhầm làm cho một trang web có khả năng được lập trình để tương tác và
xử lý thông tin.
 Javascript còn được gọi là một loại client script. Vì việc chạy và thực thi các hạng
mục được lập trình nằm hoàn toàn ở trên thiết bị của người sử dụng (client).
 Vì là một ngôn ngữ lập trình, nên ta có thể thao túng nội dung của HTML như thêm,
xóa , sửa các phần tử HTML. Xử lý, tính toán thông tin và tương tác với người dùng
thông qua các sự kiện và thao tác chuột, bàn phím, ….
17
css
HTML
js
 DANH SÁCH CHIA NHÓM DOM:

 DOM document: có nhiệm vụ lưu trữ toàn bộ các thành phần trong tài liệu
của website
 DOM element: có nhiệm vụ truy xuất tới thẻ HTML nào đó thông qua các
thuộc tính như tên class, id, name của thẻ HTML
 DOM HTML: có nhiệm vụ thay đổi giá trị nội dung và giá trị thuộc tính của
các thẻ HTML
 DOM CSS: có nhiệm vụ thay đổi các định dạng CSS của thẻ HTML
 DOM Event: có nhiệm vụ gán các sự kiện như onclick(), onload() vào các
thẻ HTML
 DOM Listener: có nhiệm vụ lắng nghe các sự kiện tác động lên thẻ HTML
đó
 DOM Navigation dùng để quản lý, thao tác với các thẻ HTML, thể hiện mối
quan hệ cha - con của các thẻ HTML
 DOM Node, Nodelist: có nhiệm vụ thao tác với HTML thông qua đối tượng
(Object)
18
css
HTML
js
 CÁCH SỬ DỤNG
 DOM element:
 DOM HTML:
 DOM CSS:
 DOM Event:
19
css
HTML
js
Thêm JS vào trang HTML như thế nào?

 Có 3 cách để viết code javascript bên trong một tài liệu HTML, tương ứng như sau:
 Viết code JS trong thẻ <script type=“text/javascript”> … </script>

 Viết code JS trong một file riêng lẻ với tên file có phần mở rộng là *.js rồi chèn
vào HTML thông qua thẻ
<script type=”text/javascript” src=”đường dẫn tới file .js” ></script>
 Viết code JS ngắn bên trong một thuộc tính sự kiện (sẽ nói lại sau)
20
css
HTML
js
Một số hàm đầu ra (OUTPUT) để dùng

 Dưới đây là danh sách một số hàm đầu ra, rất tiện lợi để kiểm tra và test thử trong
quá trình học ngôn ngữ lập trình này:
 console.log(“nội dung”);  In nội dung ra màn hình console

 alert(“nội dung”);  Hiển thị nội dung ra trong một hộp thoại thông báo
 document.write(“nội dung”);  Thêm nội dung vào đúng chỗ câu lệnh được
gọi
21
css
HTML
js
Khái niệm câu lệnh (statements), khối lệnh

 Javascript là một ngôn ngữ lập trình kịch bản, do đó, toàn bộ công việc xử lý được
thực thi theo từng bước. Một bước là một câu lệnh. Một nhóm nhiều câu lệnh đi liền
với nhau tạo thành một khối lệnh. Lúc này khối lệnh cũng đóng vai trò là một bước
(bao gồm nhiều bước nhỏ).
 Câu lệnh được nhận biết khi nó kết thúc bằng dấu ; ví dụ như alert(“Hello World”);
 Nhóm nhiều câu lệnh lại thành một khối bằng cách đặt các câu lệnh ở giữa cặp dấu
{}
22
css
HTML
js
Biến (variables) và cách khai báo sử dụng biến
 Biến là những thành phần dùng để lưu trữ những giá trị dữ liệu mà chúng ta có thể
thay đổi giá trị trong quá trình dùng đến.
 Ta gọi tên biến khi cần dùng. Để khai báo biến, ta dùng từ khóa var theo cú pháp
như sau:
var ten_bien; var biencuatoi = “Xin Chào”;
var ten_bien = giá trị; alert(biencuatoi);
 Tên biến phải là duy nhất trong vùng hoạt động của nó
 Tên biến được phân biệt khác nhau khi viết hoa viết thường (tức abc sẽ khác Abc)
 Tên biến phải được bắt đầu bằng chữ cái hoặc dấu gạch chân _ hoặc ký tự $
23
css
HTML
js
Ghi chú trong quá trình viết code

 Đây là nhu cầu phát sinh trong quá trình viết những đoạn code dài khi bạn cần ghi
chú lại ý nghĩa một số câu lệnh hoặc nhóm lại mà không làm ảnh hưởng tới nội dung
của code. Đó là khi ta cần dùng tới ghi chú, ghi chú sẽ được bỏ qua khi code được
thực thi.
 Có 2 cách ghi chú
 Ghi chú theo dòng sẽ có tác dụng làm ghi chú
// nội dung ghi chú theo dòng
cho tất cả văn bản theo sau ký tự // trên cùng 1
/* dòng.
nội dung ghi chú đoạn  Ghi chú theo đoạn sẽ áp dụng cho toàn bộ văn
*/ bản nằm giữa cặp ký tự /* và */
24
css
HTML
js
Kiểu dữ liệu của biến?

 Biến trong JS có thể nhận vào 3 kiểu dữ liệu cơ bản: số, chuỗi và object
 Ví dụ:
var bien1 = 5; // Đây là ví dụ khai báo biến nhận vào giá trị là số
var bien2 = “Xin chào”;// Đây là ví dụ khai báo biến nhận vào giá trị là chuỗi
var bien3 = ‘Xin chào 2’;
// Đây cũng là ví dụ khai báo biến nhận vào giá trị là
chuỗi
 Việc xác định kiểu dữ liệu của biến là tự động và dựa vào giá trị của biến, chúng ta
không cần khai báo kiểu dữ liệu khi khai báo biến. Kiểu dữ liệu trong JS mang nặng
tính chất tự hiểu.
25
css
HTML
js
Các phép tính cơ bản

 Dưới đây là danh sách 5 phép tính cơ bản nhất của JS
= Phép gán, dùng để gán dữ liệu vào một biến, một đối tượng. Ví dụ: var b; b=10;
+ Phép cộng toán học, dùng để cộng 2 số lại với nhau. Ví dụ: var a=5; var b=3; var
c=a+b;
- Phép trừ toán học, dùng để trừ 2 số cho nhau. Ví dụ: var a=5; var b=3; var c=a-b;
* Phép nhân toán học, dùng để nhân 2 số lại với nhau. Ví dụ: var a=5; var b=3; var
c=a*b;
/ Phép chia toán học, dùng để chia 1 số cho 1 số khác. Ví dụ: var a=5; var b=3;
var c=a/b;
% Phép chia lấy dư, dùng để lấy phần dư của phép chia 2 số cho nhau. var a=5;
var b=a%2;
++ Phép cộng thêm 1 đơn vị viết tắt. Ví dụ: var a=5; a++;
-- Phép trừ đi 1 đơn vị viết tắt. Ví dụ: b=6; b--; 26
css
HTML
js
Các phép tính kết hợp với phép gán

 Dưới đây là một số phép tính kết hợp với phép gán mà ta hay sử dụng
+= ví dụ a += 5; sẽ tương đương với a = a + 5

-= ví dụ a -= 5; sẽ tương đương với a = a - 5
*= ví dụ a *= 5; sẽ tương đương với a = a * 5
/= ví dụ a /= 5; sẽ tương đương với a = a / 5
%= ví dụ a %= 5; sẽ tương đương với a = a % 5
27
css
HTML
js
Các phép tính với dữ liệu chuỗi

 Dưới đây là các phép tính cơ bản để làm việc với chuỗi
+ Phép cộng chuỗi với nhau. Ví dụ:

var a = ‘Xin chào’; var b = ‘ bạn’; var c = a + b;
// lúc này c sẽ chứa giá trị ‘Xin chào bạn’
+= Phép cộng dồn chuỗi. Ví dụ:
var a = ‘Xin chào’; a += ‘ bạn nhé!’; // tương đương với a = a + ‘ bạn nhé!’;
// lúc này a sẽ chứa giá trị ‘Xin chào bạn nhé!’
28
css
HTML
js
Phép tính xen kẽ giữa số và chuỗi

 Mình liệt kê dưới đây một số trường hợp khi trong phép tính có mặt cả số và chuỗi
var a=5; var b=‘6’; var c = a + b; // c sẽ có giá trị là chuỗi ‘56’ khi số cộng chuỗi thì tất cả
thành chuỗi
var a=5; var b=‘6’; var c = a + 3 + b; // c sẽ có giá trị là chuỗi ‘86’. Do a+3=8 và 8+’6’ thì ra
chuỗi ‘86’
var a=5; var b=‘6’; var c = b+(a+5); // c sẽ có giá trị là chuỗi ‘610’. Do a+5 được tính trước ra
 Nguyên
10 tắc chung, các phép tính vẫn tuân thủ nguyên tắc toán học, thứ tự ưu tiên:
1. Trong ngoặc ()
2. Nhân, chia
3. Cộng, trừ
4. Thứ tự từ trái sang phải
29
css
HTML
js
Giới thiệu kiểu dữ liệu Boolean

 Là một kiểu dữ liệu đặc biệt, chỉ chứa 1 trong 2 giá trị là true (đúng) hoặc false (sai). Khi một
biến mang kiểu dữ liệu này thì nó sẽ có giá trị hoặc là true hoặc là false.
 Chúng ta có thể khai báo biến kiểu boolean và chỉ định trực tiếp giá trị ban đầu của nó như sau:
var biencuatoi = true;
var biencuathienha = false;
 Kiểu dữ liệu này được phục vụ cho các cấu trúc có điều kiện trong javascript
30
css
HTML
js
Những phép so sánh cơ bản

 Dưới đây là một số phép so sánh cơ bản và dùng thường xuyên trong javascript:
< Nhỏ hơn
> Lớn hơn
<= Nhỏ hơn hoặc bằng
>= Lớn hơn hoặc bằng
== Bằng (giống nhau về giá trị)
! Phép phủ định, đảo ngược giá trị của boolean.
=== Bằng tuyệt đối (giống nhau về giá trị và kiểu dữ liệu)
!= Khác (khác nhau về giá trị)
!=== Khác tuyệt đối (khác nhau cả giá trị và kiểu dữ liệu)
 Các phép so sánh trên đều trả về 1 trong 2 giá trị là true hoặc false
31
css
HTML
js
Phép kết hợp nhiều so sánh

 Để kết hợp nhiều điều kiện so sánh lại với nhau ta dùng các phép kết hợp dưới đây:
&& phép VÀ (kết hợp điều kiện)
|| phép HOẶC (lựa chọn một điều kiện đúng)
 Nguyên lý hoạt động của việc kết hợp nhiều điều kiện
true && true  true
true && false  false Đối với phép && chỉ khi tất cả true thì mới true
false && false  false
-------------------------------------------
true || false  true
true || true  true Đối với phép || chỉ cần có 1 true là true
false || flase  false
32
css
HTML
js
Từ khóa if và cách so sánh điều kiện

 Từ khóa if dùng để bắt đầu một cấu trúc lệnh có điều kiện thực thi trong javascript, có cú pháp
sau:
if (điều kiện) câu lệnh;
if (điều kiện) câu lệnh; else câu lệnh;
 Ví dụ 1:  Ví dụ 2:
var a = 5, b = 6, c = (a * b) / 2; var a = 5, b = 6, c = (a * b) / 2;
if ( a > c ) if ( b >= c ) {
alert (“A lớn hơn C”); b--;
else alert(“B lớn hơn hoặc bằng C nên B đã trừ
alert(“C lớn hơn A”); 1”);
33
css
HTML
js
Từ khóa if và cách so sánh điều kiện

 kết hợp nhiều điều kiện
 Ví dụ 1:  Ví dụ 2:
var a = 5, b = 6, c = (a * b) / 2; var a = 5, b = 6, c = (a * b) / 2;
if ( a > c && b > 6 ) if ( b >= c || a>=c ) {
alert (“A lớn hơn C và B cũng lớn hơn a--;
C”); b--;
alert(“B hoặc A đã lớn hơn hoặc bằng C”);
}
34
css
HTML
js
Nhiều if lồng vào nhau

 Đây là lời giải của ví dụ  Ví dụ:
về bài toán cơ bản: tìm var a = 5, b = 6, c = 7;
số lớn nhất trong ba số var max = a;
if (max < b) {
cho trước và chỉ được
max = b;
phép sử dụng if else để if ( max < c )
làm. max = c;
} else {
if ( max < c )
max = c;
}
alert(max);
35
css
HTML
js
Đặt vấn đề …!
 Vòng lặp là gì?
 Vòng lặp là một công việc hoặc một nhóm công việc lặp đi lặp lại hữu hạn số lần
nhầm giải quyết một bài toán, một vấn đề nào đó.
 Trong JS, vòng lặp được thể hiện là một câu lệnh hoặc một nhóm câu lệnh cứ lặp
lại lặp lại công việc của nó một số lần hữu hạn nhất định để giải quyết một vấn đề.
 Trong JS có 2 loại vòng lặp chính, vòng lặp for và vòng lặp while
 Sau này chúng ta sẽ được làm quen thêm một kiểu lặp khác là each (không học trong bài này)
36
css
HTML
js
Cách sử dụng vòng lặp for

 Cú pháp:
for (câu lệnh 1 ; điều kiện lặp ; câu lệnh 2) {

// các lệnh bị lặp
}
Giải thích
câu lệnh 1 : được thực thi khi vòng lặp bắt đầu (chạy 1 lần)
điều kiện lặp : miễn là điều kiện này còn trả về true thì vòng lặp
còn chạy
câu lệnh 2 : được thực thi mỗi khi các lệnh bị lặp đã chạy hết
37
css
HTML
js
Cách sử dụng vòng lặp while

 Cú pháp 1:  Cú pháp 2:
while (điều kiện lặp) { do {

// các lệnh bị lặp // các lệnh bị lặp
} } while (điều kiện lặp) ;
Miễn là điều kiện lặp còn đúng thì các lệnh Tượng tự như cú pháp 1. Nhưng cú pháp
bị lặp sẽ còn thực thi mãi. Cú pháp này sẽ này sẽ chạy các câu lệnh bị lặp trước khi
kiểm tra điều kiện trước. Nên khả năng sẽ kiểm tra điều kiện, nên tối thiểu vòng lặp
không có lặp xãy ra nếu ngay từ đầu điều phải chạy 1 lần.
kiện đã trả về false.
38
css
HTML
js
Can thiệp vào quá trình lặp ?

 Ngắt ngang vòng lặp?  Bỏ qua các lệnh còn lại và lặp lại tiếp
vòng kế
while (điều kiện lặp) { while (điều kiện lặp) {
break; continue;
} }
Câu lệnh break; sẽ kết thúc vòng lặp ngay Câu lệnh continue; có tác dụng làm vòng
khi nó xuất hiện. Vòng lặp sẽ bị dừng và lặp bỏ qua những câu lệnh còn lại chưa
xem như đã chạy xong. chạy trong vòng lặp và chuyển tiếp sang
bước lặp tiếp theo.
 Lệnh break; và lệnh continue; có tác dụng giống nhau ở mọi loại vòng lặp
39
css
HTML
js
Đặt vấn đề …!
 Như tiêu đề bài học, chúng ta sẽ học cách tiến hành những xử lý khác nhau cho những giá trị
khác nhau. Về cơ bản thì việc này hoàn toàn có thể sử dụng cấu trúc if để thực hiện, tuy nhiên
với danh sách các giá trị biết trước và với một số lượng câu if else quá nhiều sẽ làm code của
bạn trông không tường minh và dễ mắc lỗi logic hơn.
 Do đó, câu lệnh lựa chọn giá trị switch … case ra đời nhầm giải quyết vấn đề trên
40
css
HTML
js
Cú pháp switch .. case dạng 1

switch (bien) {
case values_1 : { câu lệnh 1; break; }
default : { câu lệnh 3; break;}
}
 Giải thích:
 bien là biến được đem ra để so sánh với các value
 value có thể là số hoặc chuỗi
 Mỗi case tương ứng với một sự so sánh bien==value. Nếu true thì các câu lệnh bên trong {} sau case sẽ
thực thi.
 Nếu tất cả case đều false thì lúc đó default sẽ là true
41
css
HTML
js

switch (bien) {
case values_1 :
default : { câu lệnh; break;}
}
 Giải thích: dạng cú pháp này cũng tương tự dạng cơ bản. Tuy nhiên, dạng này cho phép bạn có thể so sánh
với nhiều giá trị dưới dạng HOẶC.
 Như cú pháp ví dụ trên thì khi bien bằng value_1 hoặc value_2 thì sẽ chạy câu lệnh 1
42
css
HTML
js

switch (bien) {
case values_1 : { câu lệnh 1;}
default : { câu lệnh; break;}
}
 Giải thích: với dạng cú pháp này, thì khi bien bằng value 1 thì cả câu lệnh 1 và câu lệnh 2 đều được thực hiện.
Còn nếu bien bằng value 2 thì chỉ câu lệnh 2 được thực hiện.
43
css
HTML
js
Khái niệm hàm và tham số !!!

 Hàm (function) là cách chúng ta nhóm nhiều câu lệnh lại thành một khối lệnh và có đặt tên.
Nhầm mục đích khi cần đến chúng ta có thể cho thực thi khối lệnh bằng cách gọi tên đã đặt.
 Hàm rất hữu ích để chia nhỏ các công việc ra nhiều nhóm khác nhau, mỗi hàm sẽ phụ trách một
vấn đề riêng biệt, lúc này code javascript sẽ tường minh, dễ hiểu và dễ kiểm soát lỗi hơn.
 Đôi lúc hàm cần dữ liệu đầu vào để có thể làm việc, dữ liệu đầu vào này gọi là các tham số. Một
hàm có thể có nhiều tham số hoặc không có tham số nào.
 Và đôi lúc hàm cũng cho ra dữ liệu đầu ra sau khi thực thi, ta gọi đó là kết quả trả về của hàm.
Một hàm có thể có hoặc không có kết quả trả về.
44
css
HTML
js
Cú pháp hàm không tham số

/* KHAI BÁO HÀM */ /* SỬ DỤNG HÀM */
function ten_ham() { ten_ham();
// các câu lệnh của hàm
}
 Nguyên tắc đặt tên hàm (tương tự nguyên tắc đặt tên biến)
 Tên phải bắt đầu bằng chữ cái hoặc ký tự _ hoặc ký tự $
 Tên là duy nhất
 Viết hoa và viết thường sẽ là 2 tên khác nhau
45
css
HTML
js
Cú pháp hàm có tham số

function tong_a_b (tham_so_1, tong_a_b(5, 10);
tham_so2) {
var tong = tham_so_1 +
tham_so_2;
alert(tong);
}
 Nguyên tắc đặt tên tham số tương tự nguyên tắc đặt tên biến và tên hàm.
 Tham số sẽ được sử dụng bằng cách gọi tên trong hàm như biến nội bộ của hàm đó.
 Khi gọi sử dụng hàm, ta phải truyền tham số vào bằng giá trị thực hoặc biến, tương ứng thứ tự
của tham số trong phần định nghĩa của hàm.
46
css
HTML
js
Cú pháp hàm có trả về giá trị

function tong_a_b (tham_so_1, var tong = tong_a_b(5, 10);
tham_so2) { alert(tong);
return tham_so_1 + tham_so_2;
}
 Khi hàm có sử dụng return để trả về giá trị gì đó, ta có thể hứng giá trị này và gán nó vào 1 biến.
 Giá trị trả về có kiểu gì thì biến số nhận giá trị sẽ có kiểu đó.
47
css
HTML
js
Đặt vấn đề !!! Lỗi là gì và hậu quả của nó?

 Javascript là một chương trình chạy tuần tự. Và nếu trong quá trình thực thi chương trình gặp
phải một lỗi thì chương trình sẽ bị NGỪNG ngay tại chỗ phát sinh lỗi. Toàn bộ phần xử lý còn lại
sẽ không bao giờ được chạy nữa.
 Ví dụ: trong quá trình tính toán, một có sử dụng phép chia nhưng lại không kiểm soát tốt các
biến dẫn tới tình trạng chia cho 0. Và dĩ nhiên phép chia cho 0 sẽ báo lỗi và chương trình bị
ngưng. Hoặc bạn sử dụng một biến mà chưa hề có khai báo, chương trình cũng sẽ ngưng, …
rất nhiều lỗi có thể phát sinh và làm ngưng chương trình.
48
css
HTML
js
Điều khiển lỗi là gì?

 Javascript Engine (là bộ thực thi code javascript) sẽ ngưng chương trình lại và báo lỗi trong màn
hình console nếu gặp lỗi. Điều khiển lỗi là một giải pháp để ngăn không cho Javascript Engine
tự ứng xử khi gặp lỗi.
 Thông qua cấu trúc điều khiển lỗi, bạn có thể chỉ định cho Javascript Engine cách xử lý ra sao
đối với lỗi đó và chương trình sẽ được chạy tiếp tục mà không bị dừng lại.
49
css
HTML
js
Cách tổ chức điều khiển lỗi?

 Dưới đây là cú pháp của một điều khiển lỗi:
try {
/* đây là chỗ code bình thường mà ta đoán là có khả năng gây lỗi */
/* phần code ở đây sẽ bị dừng ngay chỗ lỗi và chương trình đi xuống phần catch */
} catch (e) {
/* đây là chỗ chúng ta xử lý lỗi. Code ở đây chỉ chạy khi có lỗi */
alert(e.messsage); // báo lên thông điệp của lỗi
} finally {
/* code ở đây sẽ luôn được chạy cho dù có lỗi hay không có lỗi */
}
50
css
HTML
js
Tạo ra lỗi mới?

 Thật vậy, đôi lúc chúng ta lại muốn tạo ra lỗi mới do chúng ta định nghĩa. Ví dụ, bạn tạo một
hàm tính tổng 2 số nguyên dương, nếu người dùng cung cấp vào là chuỗi hoặc không phải số
nguyên dương, bạn có thể cho phát sinh lỗi và làm dừng chương trình nếu lỗi này không được
điều khiển. Và cách để làm điều đó là dùng từ khóa throw như sau:
// báo lỗi với thông tin lỗi là chuỗi

throw “Bạn đã cho vào tham số không đúng” ;
// báo lỗi với thông tin lỗi là số
throw 500 ;
51
css
HTML
js
Định nghĩa kiểu dữ liệu mảng (Array)

 Array được sử dụng khi bạn có nhu cầu lưu trữ nhiều giá trị khác nhau vào cùng một biến
 Khi đó, biến kiểu Array được xem là một danh sách có nhiều giá trị được lưu trữ. Chúng ta sẽ
truy xuất các giá trị này thông qua thứ tự lưu trữ hoặc từ khóa lưu trữ.
52
css
HTML
js
Cú pháp khai báo & sử dụng Array dạng 1

var xe_may = [“Wave” , “Yamaha” , “Suzuki”] ;
var bien_a = [“thư viện lập trình” , 15 , 100 , “lập trình web”] ;
 Biến xe_may được khai báo là một mảng có 3 giá trị là 3 chuỗi. Biến bien_a được khai báo là
một mảng có 4 giá trị, 2 giá trị chuỗi và 2 giá trị số.  Giá trị lưu trong mảng có thể không
cần giống kiểu nhau.
var giatri = xe_may[2] ; // Sẽ lấy: Yamaha

var giatri_2 = bien_a[0] ; // Sẽ lấy: thư viện lập trình
 Theo mặc định, thứ tự của các giá trị sẽ được tính từ 0 và tăng dần theo hướng từ trái sang
phải.
53
css
HTML
js

var xe_may = new Array();
xe_may[0] = “Yamaha”;
xe_may[1] = “Wave”;
 Với cách khai báo này, chúng ta có thể chủ động thêm giá trị vào mảng một cách chủ động và
điều khiển được thứ tự của từng giá trị rõ ràng và tường minh hơn.
 Cách đọc giá trị ra cũng tương tự, chỉ cần cung cấp thứ tự giá trị cần lấy khi gọi tên mảng. Ví dụ
xe_may[2] sẽ có “Wave”
54
css
HTML
js

var xe_may = new Array();
xe_may[“key1”] = “Yamaha”;
xe_may[“key2”] = “Wave”;
 Cách khai báo này cho phép chúng ta dùng chuỗi làm khóa nhận dạng để lưu trữ giá trị tương
ứng. Khi cần gọi ra, chúng ta cung cấp lại khóa nhận dạng thay vì thứ tự.
 Ví dụ: xe_may[“key1”] sẽ là “Yamaha”
55
css
HTML
js
Biến local (cục bộ) là gì?

 Biến cục bộ (local) là biến được khai báo và sử dụng bên trong một hàm (function) hoặc một
phương thức (method - sẽ được học sau). Loại biến này chỉ có thể được sử dụng và chỉ tồn tại
bên trong phạm vi của hàm hoặc phương thức chứa nó.
 Có 2 loại biến cục bộ chủ yếu:

 Biến tự khai báo: ta tự khai báo một biến để lưu trữ những giá trị tạm trong quá trình tính
toán và xử lý của hàm hoặc phương thức như cách khai báo biến thông thường.
 Biến tham số: là những biến được khai báo tên thành tham số dữ liệu đầu vào của hàm
hoặc phương thức (xem bài 06)
56
css
HTML
js
Biến Global (toàn cục) là gì?
 Biến toàn cục (global) là biến được khai báo bên ngoài tất cả hàm và phương thức. Loại biến
này có thể được gọi và sử dụng ở mọi nơi miễn là thỏa mãn điều kiện câu lệnh sử dụng phải
được thực thi sau câu lệnh khai báo.
 Biến toàn cục sẽ tồn tại xuyên suốt quá trình tồn tại của chương trình cho dù bạn có sử dụng
hay không sử dụng. Do đó, nên xem xét kỹ lưỡng khi nào cần và không cần một biến toàn cục
để tránh lãng phí bộ nhớ trên thiết bị người dùng trong quá trình lưu trữ nó.
57
css
HTML
js
Nhận dạng chuỗi

 Một dữ liệu chuỗi trong javascript được nhận biết bởi dữ liệu bị bao trong cặp dấu “ ” hoặc ‘ ’
 Cùng 1 lúc chỉ có thể sử dụng “ ” hoặc ‘ ’ cho nên nếu bạn dùng “ ” thì nếu nội dung có dấu ‘ ‘ thì
nó cũng được xem là nội dung của chuỗi. Xem ví dụ:
var bien = “Đây là câu nói ‘phổ biến’ nhất thể giới” ;
 Lúc này bien sẽ có giá trị là: Đây là câu nói ‘phổ biến’ nhất thể giới
 Ví dụ khác:
var bien = ‘Đây là câu nói “phổ biến” nhất thể giới’ ;
 Lúc này bien sẽ có giá trị là: Đây là câu nói “phổ biến” nhất thể giới
58
css
HTML
js
Ký tự đặc biệt
 Nếu bạn dùng nháy kép để nhận dạng chuỗi nhưng cũng muốn có nội dung có dấu nháy kép thì
sao? Khi đó, ta dùng cú pháp escape character để cung cấp giá trị chúng ta muốn vào nội dung
chuỗi mà không làm sai câu lệnh. Dưới đây là danh sách các ký tự đặc biệt và cách khai báo:
 \’ tương ứng với ‘

 \” tương ứng với “
 \\ tương ứng với \
 \t tương ứng Tab
 \r\n tương ứng với một hàng mới (break line)
59
css
HTML
js
Các phương thức hỗ trợ (1)

Ví dụ Str là một biến kiểu chuỗi, khi đó ta có thể sử dụng những phương thức có sẵn sau:
Str.length  (cái này là thuộc tính) chứa số ký tự có trong chuỗi Str

Str.indexOf(Str2)  thứ tự của chuỗi Str2 đầu tiên tìm thấy trong chuỗi gốc Str
Str.lastIndexOf(Str2)  thứ tự của chuỗi Str2 cuối cùng tìm thấy trong chuỗi gốc Str
Str.search(Str2)  hoạt động giống hàm indexOf nhưng có thể dùng (regular expresssion)
Str.slide(start, end)  cắt chuỗi con trong chuỗi Str từ vị trí start tới vị trí trước end
Str.substring(start, end)  cắt chuỗi con trong chuỗi Str từ vị trí start tới vị trí trước end
Str.substr(start, length)  cắt chuỗi con trong chuỗi Str từ vị trí start lấy length ký tự
60
css
HTML
js

Str.replace(Str2, Str3)  thay thế Str2 đầu tiên tìm thấy đầu tiên trong Str thành Str3
Str.toUpperCase()  Return chuỗi VIẾT HOA TOÀN BỘ của chuỗi Str
Str.toLowerCase()  Return chuỗi viết thường toàn bộ của chuỗi Str
Str.concat(str2, str3)  Return kết quả cộng của Str + str2 + str3 (có thể có str4, 5, 6 ….)
Str.charAt(index)  Return ký tự tại vị trí index trong chuỗi Str
Str.charCodeAt(index)  Return mã unicode của ký tự tại vị trí index trong chuỗi Str
Str[index]  (xem chuỗi là mảng) Return ký tự tại vị trí index trong chuỗi Str (readonly)
61
css
HTML
js

Str.split(Str2)  Cắt chuỗi Str thành mảng các chuỗi nhỏ phân biệt bởi Str2
Ví dụ:
var str = “tôi không phải là không muốn” ;
var str_array = str.split(“không”) ;
// Lúc này biến str_array sẽ có các giá trị “tôi ” , “ phải là ” và “ muốn”
alert (str_array[1]) ; // sẽ hiển thị kết quả: phải là
62
css
HTML
js
Nhận dạng cơ bản dữ liệu số

 Số được khai báo với ký tự số, bao gồm có hoặc không có dấu cách thập phân (dấu chấm)
 Số không có dấu cách thập phân được xem là số nguyên (int) và số có dấu cách thập phân
được xem là số thực (float)
 Ví dụ:
var so_a = 1505 ; // số nguyên (int)
var so_b = 15.8 ; // số thực (float)
 Số lượng số đi sau dấu thập phân lớn nhất là 17 số.
63
css
HTML
js

Ví dụ No là một biến kiểu số, khi đó ta có thể sử dụng những phương thức có sẵn sau:
No.toString()  Đổi kiểu dữ liệu số thành kiểu chuỗi

No.toFixed(N)  Làm tròn kết quả, lấy N số sau dấu thập phân. N có thể bằng 0
var x = 125.66 ;
var y = x.toFixed(1) ; // Kết qua y sẽ là 125.7
No.toPrecision(N)  Đổi thành kiểu chuỗi, lấy N số (có làm tròn). Nếu không có N thì lấy hết
var x = 125.66 ;
var y = x.toPrecision() ; // y sẽ là “125.66”
var z = x.toPrecision(4) ; // z sẽ là “125.7”
64
css
HTML
js
Hàm Number(data);
Đây là hàm toàn cục được định nghĩa có sẵn và dùng để chuyển dữ liệu thành kiểu số.
Number (true);  Sẽ trả về 1

Number (false);  Sẽ trả về 0
Number (“10”);  Sẽ trả về 10
Number (“10.5”);  Sẽ trả về 10.5
Number (“15 25”);  Sẽ trả về NaN
65
css
HTML
js
Hàm parseInt(Str);
Đây là hàm toàn cục được định nghĩa có sẵn và dùng để chuyển dữ liệu chuỗi thành kiểu số
nguyên (int).
parseInt (“10”);  Sẽ trả về 10

parseInt(“10.66”);  Sẽ trả về 10
parseInt(“10 20 30”);  Sẽ trả về 10
parseInt(“5 năm”);  Sẽ trả về 5
parseInt(“Năm 5”);  Sẽ trả về NaN
66
css
HTML
js
Hàm parseFloat(Str);
Đây là hàm toàn cục được định nghĩa có sẵn và dùng để chuyển dữ liệu chuỗi thành kiểu số thực
(float).
parseFloat (“10”);  Sẽ trả về 10

parseFloat(“10.66”);  Sẽ trả về 10.66
parseFloat(“10.5 20 30”);  Sẽ trả về 10.5
parseFloat(“5.5 năm”);  Sẽ trả về 5.5
parseFloat(“Năm 5.5”);  Sẽ trả về NaN
67
css
HTML
js
Những thuộc tính (properties) của Math

 Dưới đây là danh sách các properties (read only) của đối tượng Math
 Math.E  Hằng số E trong toán học

 Math.PI  Hằng số PI trong toán học
 Math.SQRT2  Căn bậc 2 của 2
 Math.SQRT1_2  Căn bậc 2 của ½
 Math.LN2  Logagit tự nhiên của 2
 Math.LN10  Logarit tự nhiên của 10
 Math.LOG2E  Logarit cơ số 2 của E
 Math.LOG10E  Logarit cơ số 10 của E
68
css
HTML
js
Những phương thức (method) của Math - 1

 Dưới đây là danh sách các hàm làm việc định nghĩa sẵn của Math
 Math.sin(x)  Tính sin của x (x là radian)

 Math.cos(x)  Tính cos của x (x là radian)
 Math.tan(x)  Tính tan của x
 Math.log(x)  Tính logarit cơ số E của x
 Math.abs(x)  Tính giá trị tuyệt đối của x
 Math.acos(x)  Trả về cosin nghịch đảo của x theo đơn vị radian (x
là cosin của gốc)
 Math.asin(x)  Trả về sin nghịch đảo của x theo đơn vị radian (x là
sin của gốc)
 Math.atan2(x,y)  Trả về tan nghịch đảo của tọa độ x và y
 Math.atan(x) 
69
css
HTML
js

 Math.ceil(x)  Làm tròn (lên) số x thành số nguyên (15.5 = 16)

 Math.floor(x)  Làm tròn (xuống) số x thành số nguyên (15.6 = 15)
 Math.exp(x)  Tính giá trị của Ex
 Math.pow(x,y)  Tính x mũ y
 Math.random()  Tạo ra một số thực ngẫu nhiên từ 0 đến 1
 Math.round(x)  Làm tròn x thành số nguyên (dư 0.5 tính là 1)
 Math.sqrt(x)  Tính căn bậc 2 của x
70
css
HTML
js

 Math.max(x1,x2,…,xn)  Lấy giá trị x lớn nhất trong danh sách

 Math.min(x1,x2,…,cn)  Lấy giá trị x nhỏ nhất trong danh sách
71
css
HTML
js
Giới thiệu & khai báo Date

 Dữ liệu kiểu Date sẽ cho phép bạn làm việc với các dữ liệu thời gian như NGÀY, THÁNG, NĂM,
GIỜ, PHÚT, GIÂY, MILI GIÂY.
 Có những dạng khai báo dữ liệu kiểu Date như sau:

var date_1 = new Date(); // lấy dữ liệu hiện tại
var date_2 = new Date(miliseconds); // số mili giây trôi qua kể từ 1/1/1970
var date_3 = new Date(DateString); // Ví dụ: October 13, 2014 11:13:00
var date_4 = new Date(year, month, day, hour, minute, second, millisecond);
72
css
HTML
js
Chuẩn định dạng chuỗi của Date

 Dưới đây là một số định dạng chuẩn về chuỗi Date mà Javascript sẽ hiểu được khi dùng để khai
báo một biến kiểu Date dạng new Date(DateString). Ví dụ ta đang nói về ngày 25 tháng 12 năm
2017
 Chuẩn ISO (quốc tế)  “2017-12-25”

 Chuẩn ShortDate  “12/25/2017”
 Chuẩn LongDate  “Dec 25 2017” hoặc “25 Dec 2017”
 Chuẩn FullDate  “Monday December 25 2017”
73
css
HTML
js
Phương thức hỗ trợ - 1

 Với biến kiểu Date, bạn có thể gọi và sử dụng một số phương thức sau đâu:
 .getDate()  Lấy ngày của tháng (1-31)

 .getDay()  Lấy ngày của tuần (0 – 6) tương ứng Chủ nhật – Thứ bảy
 .getFullYear()  Lấy năm
 .getMonth()  Lấy tháng (0-11) tương ứng tháng 1 – tháng 12
 .getHours()  Lấy giờ (0-23)
 .getMinutes()  Lấy phút (0-59)
 .getSeconds()  Lấy số giây (0-59)
 .getMiliseconds()  Lấy số mili giây (0-999)
74
css
HTML
js

 .getTime()  Tính toàn bộ số mili giây từ ngày 1/1/1970
 .getTimezoneOffset()  Tính số phút chênh lệch giữa giờ quốc tế và giờ địa phương
 .getUTCDate()  Lấy ngày trong tháng (theo thời gian quốc tế (1-31)
 .getUTCDay()  Lấy ngày trong tuần(theo thời gian quốc tế) (0-6)
 .getUTCFullYear()  Lấy năm (theo thời gian quốc tế)
 .getUTCMonth()  Lấy tháng (theo thời gian quốc tế) (0-11)
 .getUTCHours()  Lấy giờ (theo thời gian quốc tế) (0-23)
 .getUTCMinutes()  Lấy phút (theo thời gian quốc tế) (0-59)
 .getUTCSeconds()  Lấy giây (theo thời gian quốc tế) (0-59)
 .getUTCMiliseconds()  Lấy mili giây (theo thời gian quốc tế) (0-999)
75
css
HTML
js

 .setUTCDate(n)  Đổi lại ngày trong tháng của thời gian quốc tế(n = 0-31)
 .setUTCMonth(n)  Đổi lại tháng của thời gian quốc tế (n = 0-11)
 .setUTCFullYear(n)  Đổi lại năm của thời gian quốc tế
 .setUTCHours(n)  Đổi lại giờ của thời gian quốc tế (n=0-23)
 .setUTCMinutes(n)  Đổi lại phút của thời gian quốc tế (n=0-59)
 .setUTCSeconds(n)  Đổi lại giây của thời gian quốc tế (n=0-59)
 .setUTCMiliseconds(n)  Đổi lại mili giây của thời gian quốc tế (n=0-999)
76
css
HTML
js
Phương thức hỗ trợ - 5 (static)

 Dưới đây là một số phương thức static mà bạn có thể sử dụng với từ khóa Date mà không cần
khởi tạo biến kiểu Date:
 Date.now()  Trả về số mili giây kể từ ngày 1 tháng 1 năm 1970
 Date.parse(DateString)  Tương tự với new Date(DateString)
77
css
HTML
js
Nhắc lại khái niệm DOM
 DOM là viết tắt của Document Object Model. Là mô hình quản lý đối tượng thẻ HTML trong một tài liệu
HTML theo cấu trúc cây dựa trên mối quan hệ cha- con giữa các thẻ HTML và nội dung của thẻ HTML.
 DOM sẽ cụ thể hóa chi tiết từng đối tượng HTML cùng nội dung và thuộc tính của nó thành những OBJECT
giúp cho Javascript có thể dễ dàng thực hiện các thao tác nhầm tác động đến nội dung, thành phần cũng
như thuộc tính của từng OBJECT cụ thể trong DOM.
78
css
HTML
js
Hình ảnh: W3SCHOOL
79
css
HTML
js
Nội dung cơ bản về DOM trong bài này:
1. JS DOM SELECTOR : Học cách để xác định một hoặc nhiều object trong DOM
2. JS DOM CONTENT : Cách thao tác với nội dung của object trong DOM
3. JS DOM ATTRIBUTES : Cách thao tác với thuộc tính của object trong DOM
4. JS DOM CSS : Cách thao tác với Style của object trong DOM
5. JS DOM FORM VALUE : Cách thao tác với dữ liệu của object trong DOM về FORM
80
css
HTML
js
No1. JS DOM SELECTOR

 Cũng giống như CSS, trước khi bạn muốn làm gì với đối tượng HTML cụ thể thì bạn cần xác định đươc đối
tượng đó. Và dưới đây là một vài phương pháp cơ bản để làm điều đó.
 var obj = document.getElementById(“id-cua-the-html”); // lấy được 1 object

 var objS = document.getElementsByTagName(“p”); // lấy được 1 mảng
objects
 var objS = document.getElementsByClassName(“class-value”); // lấy được 1 mảng
objects
 var obj = document.querySelector(“CSS-Selector”); // lấy được 1 object
 var objS = document.querySelectorAll(“CSS-Selector”); // lấy được 1 mảng objects
81
css
HTML
js
 <html>
 <body>
 <h1 id="main-content"></h1>
 <script language="javascript">
 document.getElementById("main-content").innerHTML = "Chào
mừng các bạn đến với website học lập trình online freetuts.net"
 </script>
 </body>
 </html>
82
css
HTML
js
No2.1 JS DOM CONTENT  Reading

 Khi bạn đã có được đối tượng cần thao tác, giờ bạn có thể tiến hành thay đổi hoặc đọc nội dung HTML
của đối tượng đó. Giả sử obj là đối tượng cần thao tác, khi đó:
 var html_content_1 = obj.innerHTML;

// innerHTML sẽ trả về nội dung HTML bên trong cặp thẻ của đối tượng
// Ví dụ đối tượng là <b>học tập</b> thì ta sẽ lấy được “học tập”
 var html_content_2 = obj.outerHTML;
// outerHTML sẽ trả về nội dung HTML bên trong và bao gồm luôn thẻ HTML của
đối tượng
// Ví dụ đối tượng là <b>học tập</b> thì ta sẽ lấy được “<b>học tập</b>”
83
css
HTML
js
No2.2 JS DOM CONTENT  Writing

 Bạn đã biết cách đọc nội dung HTML của đối tượng, giờ bạn sẽ học cách thay đổi nội dung HTML đang có
của đối tượng. Giả sử obj vẫn là đối tượng cần thao tác, khi đó:
 obj.innerHTML = “nội dung HTML mới”;

// Lúc này nội dung HTML bên trong cặp thẻ của đối tượng sẽ bị đổi thành “nội
dung HTML mới”
 obj.outerHTML = “<p>nội dung html mới bao gồm thẻ mới</p>”;

// Lúc này thẻ HTML đối tượng sẽ bị đổi thành nội dung và thẻ HTML hoàn toàn
mới
84
css
HTML
js
No3.1 JS DOM ATTRIBUTES  Reading

 Bạn đã có thể đọc và thay đổi nội dung HTML của đối tượng, vậy giờ bạn sẽ học cách tiếp cận và lấy thông
tin của các thuộc tính của đối tượng. Ta vẫn ví dụ obj là đối tượng cần thao tác, khi đó:
 var gia_tr_1 = obj.getAttribute(“ten-thuoc-tinh”);

// Bạn sẽ nhận được giá trị của thuộc tính “ten-thuoc-tinh” của đối tượng obj
/* Nếu obj là <p class=“value-of-class”>Nội dung</p> và bạn gọi
obj.getAttribute(“class”) thì bạn nhận được “value-of-class” */
85
css
HTML
js
No3.2 JS DOM ATTRIBUTES  Writing

 Bạn đã được học cách tiếp cận và lấy thông tin của các thuộc tính của đối tượng. Giờ là cách tiếp cận và
đổi giá trị thuộc tính. Ta vẫn ví dụ obj là đối tượng cần thao tác, khi đó:
 obj.setAttribute(“ten-thuoc-tinh”, “giá trị mới”);

// Khi đó thuộc tính “ten-thuoc-tinh” sẽ nhận giá trị mới là “giá trị mới”
/* Nếu obj là <p class=“value-of-class”>Nội dung</p> và bạn gọi
obj.setAttribute(“class”,”my-class-value”) thì bạn obj sẽ thành <p class=“my-
class-value”>Nội dung</p> */
86
css
HTML
js
No4.1 JS DOM CSS Understanding

 Như các bạn đã được học trong phần CSS, có nhiều cách khai báo CSS, và một trong
số các cách đó là viết CSS thành nội dung của thuộc tính style ngay trong thẻ HTML.
 Trong DOM, từng CSS riêng lẻ đã được quy chuẩn thành từng thuộc tính của style.
Điều này giúp truy cập từng CSS riêng lẻ trở nên dễ hơn. Nhưng lại phát sinh vấn đề
là bạn cần học thuộc tên từng thuộc tính để truy cập, bởi vì nó không hoàn toàn
giống CSS bình thường.
 Ví dụ như obj là đối tượng chúng ta có được, khi đó, chúng ta có thể sử dụng JS
DOM CSS để truy cập giá trị của CSS background-color như sau:
obj.style.backgroundColor
 Danh sách tên của các JS Style CSS sẽ được liệt kê ở cuối SLIDE bài này, các
bạn có thể dùng để tham chiếu và sử dụng khi cần
87
css
HTML
js
No4.2 JS DOM CSS Reading

 Bạn đã được giới thiệu về JS DOM CSS, giờ bạn sẽ học cách đọc một giá trị CSS thông qua cấu trúc này.
Giả sử obj là đối tượng của chúng ta, khi đó chúng ta có thể đọc 1 giá trị css như sau:
 var css_value = obj.style.TEN_JS_DOM_CSS;

// style là thuộc tính chứa tất cả các thuộc tính của JS DOM CSS
// TEN_JS_DOM_CSS phải viết chính xác có phân biệt chữ HOA chữ thường
// Kết quả trả về dưới dạng dữ liệu chuỗi
88
css
HTML
js
No4.3 JS DOM CSS Writing

 Bạn đã được giới thiệu về JS DOM CSS, cũng đã học cách đọc một giá trị CSS. Giờ bạn sẽ học cách đặt giá
trị CSS mới cho một JS DOM CSS. Giả sử obj là đối tượng của chúng ta, khi đó chúng ta có thể đặt 1 giá trị
css mới cho JS DOM CSS như sau:
 obj.style.TEN_JS_DOM_CSS = “giá trị mới”;

// style là thuộc tính chứa tất cả các thuộc tính của JS DOM CSS
// TEN_JS_DOM_CSS phải viết chính xác có phân biệt chữ HOA chữ thường
// Giá trị mới đưa vào phải chính xác như khi bạn viết CSS
89
css
HTML
js
No5.1 JS DOM FORM VALUE Reading

 Phần này để hướng dẫn các bạn cách thao tác với các dữ liệu của các thẻ HTML về FORM. Chúng ta dùng
phương pháp này để đọc và ghi giá trị cho các thẻ trong FORM. Đây là phần đọc giá trị:
 var my_value = obj.value;

// obj phải là một thẻ input, select, hoặc bất cứ thẻ nào có thuộc tính value đi kèm
// Đối với thẻ select thì nó sẽ trả về value của option đang được chọn
// Kết quả trả về dưới dạng dữ liệu chuỗi
90
css
HTML
js
No5.2 JS DOM FORM VALUE Writing

 Phần này để hướng dẫn các bạn cách thao tác với các dữ liệu của các thẻ HTML về FORM. Chúng ta dùng
phương pháp này để đọc và ghi giá trị cho các thẻ trong FORM. Đây là phần ghi giá trị:
 obj.value = “giá trị mới”;

// Điều này chỉ nên áp dụng với các thẻ input type text
91
css
HTML
js
TRA CỨU JS DOM CSS

 Các bạn vui lòng xem ONLINE bằng tiếng Anh tại đây:
 https://www.w3schools.com/jsref/dom_obj_style.asp
92
css
HTML
js
Giới thiệu dữ liệu object và OOP trong JS

 OOP là viết tắt của Object-oriented programming, chúng ta gọi là “Lập trình hướng đối tượng”, là một mô
hình về lập trình mà trong đó, chúng ta tạo ra những đối tượng (object), các đối tượng như một “nhân
viên” của một công ty, mỗi đối tượng có những đặc điểm và khả năng khác nhau, các đối tượng cấp cao
sẽ được quyền quản lý và ra lệnh cho những đối tượng thuộc quyền quản lý của nó, tất cả tập hợp lại,
phối hợp hoạt động để vận hành công ty. Công ty là chương trình, nhân viên là các đối tượng, đặc điểm
của đối tượng gọi là thuộc tính, khả năng của đối tượng gọi là phương thức.
 Trong JS, các biến mà có kèm theo thuộc tính (property) hoặc phương thức (method) gọi chung là biến
kiểu object.
93
css
HTML
js
Định nghĩa object và object

 Nếu object là một nhân viên của một công ty, thì phần yêu cầu về đặc điểm và khả năng của object chính
là định nghĩa của object.
 Định nghĩa object có thể tạo ra nhiều object. Giống như công ty có thể có nhiều lập trình viên, nhưng yêu
cầu về lập trình viên thì chỉ có một.
 KẾT LUẬN:
 Định nghĩa object là mô tả về object, các property và method mà object cần phải có.
 Object là những thực thể được tạo ra từ định nghĩa của nó.
94
css
HTML
js
Định nghĩa object và tạo object

function TenDinhNghia(para_1, para_2){ var object_1 = new TenDinhNghia(“giá trị 1” , 15);
this.Property_1 = para_1 ; var pro_1 = object_1.Property_1; // “giá trị 1”
this.Property_2 = para_2 ; var pro_2 = object_1.Property_2; // 15
this.Method_1 = function(){ object_1.Method_1();
// code của method 1 var abc = object_1.Method_2(); // 100
}
this.Method_2 = function(){
return 100;
}
}
95
css
HTML
js
Ví dụ thực tiễn
function PhepTinh(No1, No2){ var ob = new PhepTinh(15, 10);
this.A = No1 ; var ketquacong = ob.CongAB();
this.B = No2 ; alert(ketquacong);
this.CongAB = function(){ return this.A + this.B; }
this.TruAB = function(){ return this.A - this.B; }
this.TruBA = function(){ return this.B - this.A; }
this.NhanAB = function(){ return this.A * this.B; }
this.ChiaAB = function(){ return this.A / this.B; }
this.ChiaBA = function(){ return this.B / this.A; }
}
96
css
HTML
js
Giới thiệu về sự kiện

 Sự kiện (event) là những thứ sẽ xãy ra trên tài liệu HTML của chúng ta như khi tài liệu được tải xong, khi
người dung click chuột, khi đóng trình duyệt, khi di chuyển chuột, khi gõ bàn phím, …. Rất nhiều thứ xãy
ra gọi chung là HTML events. Chữ “khi” tôi nhắc tới có nghĩa là “thời điểm” mà event cụ thể xãy ra.
 Khi Javascript được tích hợp vào HTML thì Javascript có thể “bắt được” những events đó và điều khiển
chúng theo ý muốn của người lập trình. Khi đó, ta có thể làm cho trang HTML có khả năng tương tác với
người dùng, giúp cho trang HTML sinh động hơn, vượt qua được giới hạn của một “tài liệu” và trở thành
như một giao diện ứng dụng (application interface)
97
css
HTML
js
Cách hoạt động của events

Event hoạt động dựa theo kịch bản như sau:
1.Đầu tiên là Event Listener, phần này sẽ làm nhiệm vụ quan sát và bắt lấy sự kiện khi nó xãy ra.
2.Và khi sự kiện xãy ra, ta gọi là yếu tố thứ 2. Event Fire. Lúc này Event Listener nhìn thấy Event.
3.Khi Event Fire thì Event Handler sẽ được kích hoạt, Event Handler là function sẽ chạy mỗi khi event xãy ra
Event Event
Listene Handle
r r
98
css
HTML
js
Các bước sử dụng EVENT

1. Khai báo Event Handler, là function sẽ khởi chạy khi EVENT FIRE.
2. Khai báo Event Listener để lắng nghe sự kiện và liên kết Event Listener tới EventHandler tương ứng. Có
những cách cơ bản để khai báo Event Handler như ví dụ bên dưới:
<element TenEvent=“HandlerFunction()” />  trong “” là lời gọi function bình thường
obj.TenEvent = HandlerFunction;  sau dấu = là tên function, không có () ở cuối
obj.TenEvent = function(){}  viết function mới tại chỗ gán cho event listener
99
css
HTML
js
Một số EVENT đơn giản hay dùng

• onClick  Nhận dạng người dùng click chuột lên đối tượng
• ondblclick  Nhận dạng người dung double click lên đối tượng
• onmousedown  Nhận dạng thao tác click xuống (mới đè xuống)
• onmouseup  Nhận dạng thao tác hoàn thành của click (buông click)
• onmouseover  Nhận dạng con trỏ chuột đang rê lên đối tượng
• onmouseout  Nhận dạng con trỏ chuột vừa rời khỏi đối tượng
• onkeypress  Nhận dạng 1 thao tác gõ bàn phím
• onkeydown  Nhận dạng khi đè 1 phím xuống (chưa buông)
• onkeyup  Nhận dạng đã hoàn thành 1 thao tác phím (buông phím)
• onchange  Nhận dạng giá trị của đối tượng vừa bị đổi. Chỉ fire khi không còn focus
• onload  Thường dùng cho thẻ body, để nhận dạng trang HTML đã tải xong
100
css
HTML
js
Giới thiệu về JSON

 Nhu cầu trao đổi dữ liệu giữa các nền tảng và công nghệ khác nhau ngày càng lớn. Lúc này, XML trở nên
cồng kềnh và làm nặng dữ liệu bởi cấu trúc thẻ của nó. Điều đó dẫn tới nhu cầu tạo ra một loại dữ liệu
mới có tên gọi là JSON nhầm giải quyết vấn đề trao đổi dữ liệu giữa các nền tảng và làm nhẹ dung lượng
lưu trữ của dữ liệu trao đổi.
 JSON là viết tắt của Javascript Object Notation, là một bộ qui tắc về cách trình bày và mô tả dữ liệu trong
một chuỗi lớn thống nhất được gọi chung là chuỗi JSON.
101
css
HTML
js
Chuỗi JSON đơn giản

 Chuỗi JSON được bắt đầu bằng ký tự { và kết thúc bởi ký tự }
 Từng cặp thuộc tính - giá trị được xem là 1 dữ liệu và được trình bày theo nguyên tắc:
“tên thuộc tính” : ”giá trị thuộc tính” hoặc “tên thuộc tính” : giá trị số của thuộc tính
 Nhiều dữ liệu có thể có bên trong JSON và cách nhau bởi dấu phẩy “,”
{ { “Name” : ”Đặng Văn Lel”, “Age” : 30 }

“Name” : ”Đặng Văn Lel”,
“Age” : 30
}
102
css
HTML
js
Những giá trị mà JSON có thể có

 Tại một dữ liệu, giá trị của thuộc tính có thể nhận vào 1 trong các loại dữ liệu sau đây: Một giá trị chuỗi,
Một giá trị số, Một mảng (giá trị một phần tử của mảng cũng có nguyên tắc tương tự), Một JSON khác.
{
“data” :
[
125,
{ “name” : “Đặng Văn Lel” , “age” : 30 } ,
{ “name” : “Thư Viện Lập Trình” , “age” : 3 } ,
“Chuỗi gì đó”
],
“count” : 3000,
“more_infor” : { “status” : 200 , “message” : “Mọi thứ ổn” }
}
103
css
HTML
js
Làm việc với JSON

 Bạn cần phân biệt sự khác nhau giữa chuỗi JSON và JSON. Chuỗi JSON là nói về chuỗi dữ liệu theo đúng
nguyên tắc JSON. Còn JSON là nói về object được tạo ra từ chuỗi JSON.
 Chuỗi JSON là dữ liệu dùng để trao đổi giữa các nền tảng, bản thân nó chỉ là chuỗi như những chuỗi khác.
Sự khác nhau là chuỗi này có nguyên tắc định dạng rõ ràng. Các nền tảng khác nhau khi nhận được chuỗi
này nó sẽ tạo ra object tương ứng với nền tảng đó để làm việc.
 Biến JSON trong Javascript chính là object tương ứng để làm việc với chuỗi JSON.
var JSON_str = ‘{ “name” : “Đặng Văn Lel” , “age” : 30 }’ ; // đây là chuỗi JSON
var JSON_obj = JSON.parse(JSON_str) ; // đây là biến JSON được tạo từ chuỗi JSON
alert(JSON_obj.name) ; // truy cập vào thuộc tính JSON bằng tên thuộc tính
104
css
HTML
js
Tạo chuỗi JSON từ JSON object

 Khi nhận được chuỗi JSON ta có thể dùng JSON.parse() để tạo ra object để làm việc. Vậy còn ngược lại?
Khi ta cần tạo chuỗi JSON từ JSON object thì làm sao?
var JSON_str = ‘{ “name” : “Đặng Văn Lel” , “age” : 30 }’ ; // đây là chuỗi JSON
var JSON_obj = JSON.parse(JSON_str) ; // đây là biến JSON được tạo từ chuỗi JSON
JSON_obj.name = “Họ và Tên mới” ; // truy cập vào thuộc tính JSON bằng tên thuộc tính và đổi giá trị
var JSON_str_2 = JSON.stringify(JSON_obj); // tạo chuỗi JSON từ JSON object
105
css
HTML
js
AJAX là gì? Tại sao lại quan trọng thế?

 AJAX viết tắt của Asynchronous JavaScript And XML. Đừng cố gắng dịch nghĩa nó, chỉ làm bạn thêm hiểu
lầm mà thôi. Cũng không cần nhớ nó viết tắt của từ gì. Vì đơn giản AJAX đã trở thành danh từ riêng và chỉ
cần gọi là AJAX là đủ.
 AJAX không phải một ngôn ngữ lập trình, nó chỉ đơn giản là tên gọi của công nghệ sử dụng kết hợp những
yếu tố sau đâu:
 Một hệ thống có tên XMLHttpRequest được tích hợp sẵn trong trình duyệt nhằm mục
đích gửi yêu cầu (request) và nhận dữ liệu (response) từ server một cách im lặng.
 Javascript và HTML DOM (dùng để hiển thị dữ liệu hoặc xử lý dữ liệu nhận được từ
server thông qua AJAX)
106
css
HTML
js
AJAX làm việc như thế nào?

 Với một REQUEST bình thường, bạn sẽ mở trình duyệt lên, nhập vào một URL rồi ENTER. Đó là lúc bạn gửi
một REQUEST lên server. Khi trình duyệt nhận được kết quả, đó là RESPONSE của server, trình duyệt sẽ
xử lý kết quả nhận được rồi hiển thị cho bạn xem giao diện.
 AJAX REQUEST cũng gửi REQUEST lên server bằng một URL, nhưng quá trình này diễn ra ngầm, không ảnh
hưởng gì tới nội dung đang xem, khi nhận được RESPONSE từ server (dạng TEXT), AJAX sẽ cho phép chúng
ta sử dụng JAVASCRIPT để xử lý kết quả này và tác động lên HTML DOM làm thay đổi ngay lập tức một số
bộ phận thông tin trên giao diện.
107
css
HTML
js
AJAX làm việc như thế nào?
XMLHttpRequest SERVER
Tạo
EventListener
chờ sự kiện
nhận Response
Handler
Response
108
css
HTML
js
Ví dụ cơ bản về Ajax Request

// khởi tạo object
var xhr = new XMLHttpRequest();
// Cài đặt thông tin Request
xhr.open(“GET” , ”http://tenmien.com” , true);
// Cài đặt event listener
xhr.onreadystatechange = function () {
// Kiểm tra các trạng thái đúng
if (xhr.readyState == 4 && xhr.status == 200) {
// Nhận kết quả response từ server và xử lý tiếp tại đây
var data = xhr.responseText;
}
}
// Bắt đầu gửi Request
xhr.send();
109
css
HTML
js
#1. Cú pháp cơ bản của Ajax Request

// Đây là khởi tạo object của XMLHttpRequest và đặt tên là xhr
var xhr = new XMLHttpRequest();
// Tạo form dữ liệu (nếu cần) và đặt tên biến là form_data để gửi kèm theo Request
var form_data = new FormData();
// Dùng lệnh .append(key, value) để đưa giá trị và tên của nó vào form đã tạo
form_data.append(“username” , ”dangvanlel”);
form_data.append(“password” , ”123456”);
110
css
HTML
js
#2. Xử lý quá thời gian chờ kết quả!
// Cài đặt thời gian tối đa chờ Response sau khi đã gửi Request (nếu cần) (millisecond)
xhr.timeout = 30000;
// Bạn sẽ muốn xử lý gì khi timeout xãy ra? Cài event listener cho sự kiện timeout (nếu cần)
xhr.ontimeout = function(){
// code chạy khi hết thời gian chờ
}
111
css
HTML
js
#3. Can thiệp vào Request Header
// Khi cần thêm (hoặc đổi) dữ liệu Request Header, có thể dùng lệnh sau để thêm vào
xhr. setRequestHeader(“Key” , “Value”);
// Ví dụ
xhr. setRequestHeader(“Content-Type” , “application/x-www-form-urlencoded”);
xhr. setRequestHeader(“Key-Cua-Toi” , “Giá trị gì đó”);
112
css
HTML
js
#4. Chỉ định URL sẽ gửi Request
xhr. open(“TYPE” , “URL” , Asyn);
Trong đó, các giá trị tương ứng bao gồm:

 TYPE : GET hoặc POST
 URL : địa chỉ URL sẽ gửi request
 Asyn : true (bất đồng bộ) hoặc false (đồng bộ)
 Asyn đồng bộ nghĩa là JS sẽ chờ Response rồi mới chạy tiếp. Còn Asyn bất đồng bộ nghĩa là sau khi đã
gửi Request thì JS sẽ chạy tiếp các câu lệnh khác mà không chờ Response.
113
css
HTML
js
#5.1 Xử lý Response (kết quả)

 Khi Ajax Request nhận được Repsonse từ Server, sẽ phát sinh ra một sự kiện tên là
onreadystatechange. Chúng ta có thể tạo event handle để xử lý sự kiện này như sau:
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
// phần code ở đây sẽ chạy khi nhận được kết quả và không có lỗi
var ketqua = xhr.responseText; // Biến ketqua sẽ chứa nội dung trả về của server
}
}
114
css
HTML
js

 Tìm hiểu chi tiết các giá trị của readyState
0 : chưa tạo kết nối tới server

1 : bắt đầu thiết lập kết nối tới server
2 : server đã nhận được yêu cầu
3 : server đang xử lý yêu cầu
4 : server đã hồi đáp yêu cầu
115
css
HTML
js

 Tìm hiểu chi tiết các giá trị của status (HTTP Status Message)
HTTP Status Message chia làm 5 nhóm giá trị tương ứng với 5 loại phản hồi kết quả khác nhau. Cụ thể:
Nhóm thông tin - Information Nhóm thành công - Successful Nhóm chuyển hướng - Redirection
100, 101, 103 200  206 300  308
Nhóm lỗi client - Client Error Nhóm lỗi server - Server Error
400  403, 404  417 500  505, 511
----- -----
403 : server từ chối trả lời Các mã lỗi từ 500 trở lên có nghĩa là code
404 : không tìm thấy nội dung gây ra lỗi hoặc xung đột do web server
116
css
HTML
js
#6 Bắt đầu gửi Request

 Sau khi đã cài đặt đủ các thành phần (dữ liệu và các handler). Ta có thể bắt đầu gửi Request thông qua
câu lệnh send() như sau:
// Gửi request không bao gồm dữ liệu gì

xhr.send();
// Gửi request bao gồm dữ liệu form. Với form_data là biến chứa form dữ liệu (xem #1 ở slide6)
xhr.send(form_data);
// Gửi request bao gồm dữ liệu được cung cấp dưới dạng chuỗi theo nguyên tắc key=value và kết nối bởi ký tự &
xhr.send(“key_1=value_1&key_2=value_2&key_3=value_3”);
117

HTML Java Script

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Java Script

Uploaded by

Copyright:

Available Formats

HTML + CSS + JAVASCRIPT

CÁC KHÁI NIỆM CƠ BẢN

1 KHÁI NIỆM DOM

2 QUÁ TRÌNH RENDER CỦA TDW

3 GIỚI THIỆU VỀ JAVASCRIPT

khái niệm DOM

Các bước cơ bản mà trình duyệt thực hiện để

DOM tree của đoạn HTML trên sẽ giống như sau:

XÂY DỰNG CSSOM TREE

Để xây dựng render tree, trình duyệt về cơ bản sẽ làm

Phân tích HTML và tạo cây DOM - HTML là cấu trúc

JS là gì? Tại sao cần JS trong HTML?

 DANH SÁCH CHIA NHÓM DOM:

Thêm JS vào trang HTML như thế nào?

 Viết code JS trong thẻ <script type=“text/javascript”> … </script>

Một số hàm đầu ra (OUTPUT) để dùng

 console.log(“nội dung”);  In nội dung ra màn hình console

Khái niệm câu lệnh (statements), khối lệnh

Biến (variables) và cách khai báo sử dụng biến

Ghi chú trong quá trình viết code

Kiểu dữ liệu của biến?

Các phép tính cơ bản

Các phép tính kết hợp với phép gán

+= ví dụ a += 5; sẽ tương đương với a = a + 5

Các phép tính với dữ liệu chuỗi

+ Phép cộng chuỗi với nhau. Ví dụ:

Phép tính xen kẽ giữa số và chuỗi

Giới thiệu kiểu dữ liệu Boolean

Những phép so sánh cơ bản

Phép kết hợp nhiều so sánh

Từ khóa if và cách so sánh điều kiện

Từ khóa if và cách so sánh điều kiện

Nhiều if lồng vào nhau

Cách sử dụng vòng lặp for

for (câu lệnh 1 ; điều kiện lặp ; câu lệnh 2) {

Cách sử dụng vòng lặp while

while (điều kiện lặp) { do {

Can thiệp vào quá trình lặp ?

Cú pháp switch .. case dạng 1

Cú pháp switch .. case dạng 2

Cú pháp switch .. case dạng 3

Khái niệm hàm và tham số !!!

Cú pháp hàm không tham số

Cú pháp hàm có tham số

Cú pháp hàm có trả về giá trị

Đặt vấn đề !!! Lỗi là gì và hậu quả của nó?

Điều khiển lỗi là gì?

Cách tổ chức điều khiển lỗi?

Tạo ra lỗi mới?

// báo lỗi với thông tin lỗi là chuỗi

Định nghĩa kiểu dữ liệu mảng (Array)

Cú pháp khai báo & sử dụng Array dạng 1

var giatri = xe_may[2] ; // Sẽ lấy: Yamaha

Cú pháp khai báo & sử dụng Array dạng 2

Cú pháp khai báo & sử dụng Array dạng 3

Biến local (cục bộ) là gì?

 Có 2 loại biến cục bộ chủ yếu:

Biến Global (toàn cục) là gì?

Nhận dạng chuỗi

 \’ tương ứng với ‘

Các phương thức hỗ trợ (1)

Str.length  (cái này là thuộc tính) chứa số ký tự có trong chuỗi Str

Các phương thức hỗ trợ (2)