Javascri P

UỶ BAN NHÂN DÂN TỈNH ĐẮK LẮK
TRƯỜNG CAO ĐẲNG CÔNG NGHỆ TÂY NGUYÊN
GIÁO TRÌNH
MÔ ĐUN: JAVASCRIPT
NGHỀ: CÔNG NGHỆ THÔNG TIN (ƯDPM)
TRÌNH ĐỘ: CAO ĐẲNG
(Ban hành kèm theo Quyết định số....../QĐ-CNTN ngày tháng năm của
Hiệu trưởng Trường Cao đẳng Công nghệ Tây Nguyên)
Đắk Lắk, năm 2019

TUYÊN BỐ BẢN QUYỀN
Giáo trình này được biên soạn cho mục đích giáo dục và hoàn toàn phi lợi nhuận.
Nội dung và hình ảnh trong giáo trình được tổng hợp từ nhiều nguồn tham khảo khác
nhau, kết hợp với một số bổ sung của chính tác giả.
Để bảo vệ quyền sở hữu trí tuệ, bảo vệ quyền lợi của các tác giả, các nội dung và
hình ảnh từ các nguồn tham khảo của giáo trình này được trích từ các nguồn có bản
quyền. Đối với các nội dung đã sử dụng nhưng chưa kịp xác nhận tác giả, người được
hưởng quyền lợi có thể cung cấp tài liệu chứng minh liên quan cho tác giả của giáo trình
này theo địa chỉ email: tuandaklak@gmail.com. Chúng tôi sẽ xem xét và có hành động
phù hợp dựa trên nguyên tắc tôn trọng quyền và lợi ích chính đáng của người sở hữu trí
tuệ và các quy định trong Luật Bản quyền..
Tài liệu này thuộc loại sách giáo trình, nên các nguồn thông tin có thể được phép
dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo.
Mọi mục đích khác mang tính lệch lạc hoặc sử dụng vào mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.
LỜI GIỚI THIỆU
Với HTML and Microsoft FrontPage bạn đã biết cách tạo ra trang Web - tuy
nhiên chỉ mới ở mức biểu diễn thông tin chứ chưa phải là các trang Web động có khả
năng đáp ứng các sự kiện từ phía người dùng. Hãng Netscape đã đưa ra ngôn ngữ
script có tên là LiveScript để thực hiện chức năng này. Sau đó ngôn ngữ này được
đổi tên thành JavaScript để tận dụng tính đại chúng của ngôn ngữ lập trình Java. Mặc
dù có những điểm tương đồng giữa Java và JavaScript, nhưng chúng vẫn là hai ngôn
ngữ riêng biệt.
JavaScript là ngôn ngữ dưới dạng script có thể gắn với các file HTML. Nó
không được biên dịch mà được trình duyệt diễn dịch. Không giống Java phải chuyển
thành các mã dễ biên dịch, trình duyệt đọc JavaScript dưới dạng mã nguồn. Chính vì
vậy bạn có thể dễ dàng học JavaScript qua ví dụ bởi vì bạn có thể thấy cách sử dụng
JavaScript trên các trang Web.
Giống với HTML và Java, JavaScript được thiết kế độc lập với hệ điều hành.
Nó có thể chạy trên bất kỳ hệ điều hành nào có trình duyệt hỗ trợ JavaScript. Ngoài
ra JavaScript giống Java ở khía cạnh an ninh: JavaScript không thể đọc và viết vào
file của người dùng.
Các câu lệnh JavaScript được nhúng trong một trang HTML có thể trả lời cho
các sự kiện của người sử dụng như kích chuột, nhập vào một form và điều hướng
trang. Ví dụ bạn có thể kiểm tra các giá trị thông tin mà người sử dụng đưa vào mà
không cần đến bất cứ một quá trình truyền trên mạng nào. Trang HTML với
JavaScript được nhúng sẽ kiểm tra các giá trị được đưa vào và sẽ thông báo với
người sử dụng khi giá trị đưa vào là không hợp lệ.
Mục đích của giáo trình này là giới thiệu về ngôn ngữ lập trình JavaScript để
bạn có thể viết các script vào file HTML của mình.
Đắk Lắk, ngày 02 tháng 11 năm 2019

Tham gia biên soạn
Chủ biên: ThS. Trần Anh Tuấn
s
MỤC LỤC
Bài 1: Cơ bản về ngôn ngữ JavaScript....................................................................1
1. Giới thiệu về JavaScript ..............................................................................1
2. Lập trình với JavaScript ..............................................................................4
3. Cú pháp và câu lệnh trong JavaScript .........................................................6
BÀI 2: Cấu trúc điều khiển, hàm và xử lý sự kiện ...............................................18
1. Làm việc với biến và kiểu dữ liệu .............................................................18
2. Sử dụng toán tử và biểu thức ....................................................................35
3. Cấu trúc điều khiển ...................................................................................51
4. Hàm ...........................................................................................................60
5. Xử lý sự kiện .............................................................................................65
BÀI 3: Mô hình BOM, DOM và CSS ..................................................................71
1. Mô hình đối tượng trình duyệt (BOM) .....................................................71
2. Mô hình đối tượng tài liệu (DOM)............................................................73
3. JavaScript và CSS .....................................................................................77
BÀI 4: Tạo hiệu ứng và validate Form .................................................................82
1. Làm việc với hình ảnh trong JavaScript ...................................................82
2. Sử dụng JavaScript với form trên trên web...............................................95
BÀI 5: Thư viện jQuery và jQuery UI ................................................................101
1. Giới thiệu về các thư viện và các framework JavaScript ........................101
2. Giới thiệu về jQuery ................................................................................106
3. Các hiệu ứng và plugin cho jQuery ......................................................109
Tài liệu tham khảo ..............................................................................................117
GIÁO TRÌNH MÔ ĐUN
Tên mô đun: JAVASCRIPT

Mã mô đun: MĐ 25
Thời gian thực hiện mô đun: 45 giờ; (Lý thuyết: 15 giờ; Thực hành, thí nghiệm, thảo
luận, bài tập: 27 giờ; Kiểm tra: 3 giờ)
Vị trí, tính chất, ý nghĩa và vai trò của mô đun:
- Vị trí:
+ Mô đun này được bố trí sau các mô đun: “Thiết kế website với HTML, CSS” và
“Lập trình Windows 2 (ADO.Net)”.
- Tính chất: Mô dun JavaScript là mô đun chuyên ngành áp dụng cho trình độ Cao đẳng
Công nghệ thông tin (ứng dụng phần mềm).
- Ý nghĩa và vai trò của mô đun: Là mô đun giúp người học có thể ứng dụng ngôn ngữ
Javascript vào xây dựng ứng dụng website.
Mục tiêu của mô đun:
- Kiến thức:
+ Người học phải phát biểu được cái khái niệm cơ bản về ngôn ngữ JavaScript: Mục
đích, vị trí mã java script, IDE của JavaScript.
+ Người học phải trình bày được khái niệm mô hình DOM, BOM.
- Kỹ năng:
+ Lập trình được các chương trình javasript đơn giản.
+ Lập trình được các chương trình javascrip có khả năng tương tác với DOM, BOM,
CSS.
+ Lập trình được slider, slideshow và các hiệu ứng khác bằng các sử dụng và không
sử dụng thư viện JqueryUI.
- Năng lực tự chủ và trách nhiệm:
+ Nghiêm túc và tích cực trong việc học lý thuyết và làm bài tập, chủ động tìm kiếm
các bài tập ứng dụng liên quan. Có sáng tạo trong việc ứng dụng kiến thức đã học
vào trang web.
Nội dung của mô đun:
Bài 1: Cơ bản về ngôn ngữ JavaScript
Thời gian: 05 giờ; (Lý thuyết: 03 giờ; Thực hành, thí nghiệm, thảo luận, bài tập: 02 giờ;
Kiểm tra: 0 giờ)
Giới thiệu:
- Bài này giúp người học làm quen với các khái niệm trong ngôn ngữ Javascript, và
có thể viết một ứng dụng Javascript đầu tiên.
Mục tiêu:
- Phát biểu được cái khái niệm cơ bản về ngôn ngữ JavaScript: Mục đích, vị trí mã
java script, IDE của JavaScript.
- Viết và thực thi được đoạn mã JavaScript đơn giản.
Nội dung chính:
1. Giới thiệu về JavaScript
Thời gian: 01 giờ; (Lý thuyết: 01 giờ; Thực hành: 0 giờ)

1.1. JavaScript là gì
- JavaScript là ngôn ngữ lập trình, được hỗ trợ bởi hầu hết các trình duyệt web:
Chrome, Firefox, Safari, Internet Explorer, Edge, Opera,... Hầu hết các trình duyệt
di động cho điện thoại thông minh đều hỗ trợ JavaScript.
- JavaScript chủ yếu được sử dụng cho các website nhằm cung cấp cho người dùng
trải nghiệm thân thiện hơn, bao gồm các chức năng: tự động cập nhật các trang web,
cải tiến giao diện người dùng như menu và hộp thoại, animations, đồ họa 2D và 3D,
bản đồ tương tác, trình phát video... Chế độ sử dụng JavaScript này trong trình duyệt
web cũng được gọi là javascript phía máy khách.
1.2. Bộ ba trang web
- Các thành phần tạo nên một trang web bao gồm bộ ba JavaScript, HTML và CSS.
HTML mô tả trang, bao gồm văn bản, đồ họa. CSS được sử dụng để kiểm soát và
tùy chỉnh giao diện của trang web, bao gồm màu sắc, phông chữ... JavaScript được
sử dụng để thêm thành phần động vào trang web và tạo nên các yếu tố có thể lập
trình được.
1.3. Lịch sử JavaScript
- JavaScript được bắt đầu vào năm 1995 tại Netscape Communications. Vào thời gian
này, các nhà sản xuất Netscape browser nhận ra rằng, việc thêm một "glue language"
để nâng cao trải nghiệm người dùng sẽ làm tăng sự tiêu thụ nội dung của người
dùng. Vì vậy, họ đã đưa Brendan Eich nhúng vào Scheme Programming language.
Tuy nhiên, tại thời điểm đó, Java hiện là một ngôn ngữ mới, nóng hổi của website,
nên họ đã quyết định làm cho ngôn ngữ này gần gũi với cú pháp của Java. Kết quả
1
đem lại chính là JavaScript, với các tính năng của Scheme, định hướng đối tượng
của SmallTalk và cú pháp của Java. Phiên bản đầu tiên của ngôn ngữ này được đặt
tên là Mocha vào tháng 5 năm 1995, đổi tên thành LiveScript vào tháng 9 năm 1995,
và được đổi tên thành JavaScript vào tháng 12 năm 1995.
- Năm 1996, JavaScript đã được gửi đến ECMA International để hoàn thiện trở thành,
một đặc tính kỹ thuật tiêu chuẩn. Vào tháng 6 năm 1997, đặc tính kỹ thuật chính
thức đầu tiên cho ngôn ngữ được phát hành là ECMA-262. Phiên bản mới nhất của
ngôn ngữ là ECMAScript 2017 được phát hành vào tháng 6 năm 2017.
1.4. Bạn có thể làm gì với JavaScript?
- JavaScript là một trình thông dịch ngôn ngữ lập trình chính thức được nhúng bên
trong trình duyệt web. Bạn có thể thực hiện bất cứ điều gì trong JavaScript mà một
ngôn ngữ thông thường như Java cho phép. Bao gồm:
- Khai báo biến
- Lưu trữ và truy vấn giá trị
- Xác định và gọi hàm
- Xác định các classes của riêng bạn
- Tải và sử dụng các mô-đun bên ngoài
- Viết trình xử lý sự kiện trả lời người dùng và các sự kiện khác
- Web browser tải một web page, phân tích cú pháp HTML và tạo ra Document Object
Model (DOM) từ content. DOM hiển thị chế độ xem trực tiếp của trang web với mã
JavaScript. Sau đó, code có thể thực hiện các cập nhật cho DOM và hiển thị ngay
lập tức cho người dùng. Browser cho phép bạn đăng ký code để được thông báo về
các user interface events như di chuyển chuột, nhấp nút... Sử dụng tất cả các tiện ích
này, bạn có thể xây dựng các ứng dụng để phục vụ bất kỳ mục đích nào theo nhu
cầu.
- Lưu ý: JavaScript là một ngôn ngữ rất mạnh mẽ, nên bạn cũng có thể dùng nó để
viết malware, viruses, browser hijackers và các lỗi khác gây ảnh hưởng tới người
dùng từ ăn cắp cookie trình duyệt, mật khẩu, thẻ tín dụng, tải virus vào máy tính…
1.5. JavaScript hoạt động như thế nào?
- Khi web browser tải một web page, HTML parser bắt đầu phân tích cú pháp HTML
code và tạo DOM. Bất cứ khi nào trình phân tích cú pháp gặp một chỉ thị CSS hoặc
JavaScript (inline hoặc externally loaded), nó sẽ được chuyển giao cho CSS parser
hoặc JavaScript engine theo yêu cầu. JavaScript engine tải các tệp JavaScript bên
ngoài và inline code, nhưng không chạy mã ngay lập tức, mà đợi HTML và CSS
phân tích hoàn tất. Khi điều này được thực hiện, JavaScript được thực thi theo thứ
tự chúng được tìm thấy trên trang web: các biến và hàm được xác định, các lời gọi
2
hàm được thực thi, trình xử lý sự kiện được kích hoạt,... Các hoạt động này dẫn đến
việc DOM được cập nhật bởi JavaScript và được hiển thị ngay lập tức bởi trình
duyệt.
1.6. Tải JavaScript trong trang web

- Cách phổ biến nhất để tải JavaScript trong web page là sử dụng script HTML tag.
Tùy thuộc vào nhu cầu, bạn có thể sử dụng một trong các phương pháp sau.
- Tải một tệp javascript bên ngoài vào một trang web như sau:
<script type="text/javascript" src="/path/to/javascript">
</script>
- Bạn có thể chỉ định URL đầy đủ nếu javascript từ một tên miền khác từ trang web
như sau:
<script type="text/javascript" src="https://code.jquery.com/jquery -3.2.1.min.js">
</script>
- JavaScript có thể được nhúng trực tiếp vào HTML. Điều sau đây làm cho trang web
popup một alert box khi nó được tải.
<script type="text/javascript">
alert("Page is loaded");
</script>
- Ngoài các phương thức này, có nhiều cách để tải mã JavaScript theo yêu cầu. Trên
thực tế, có toàn bộ frameworks dành riêng cho việc tải và chạy các mô-đun
JavaScript với các phụ thuộc thích hợp được giải quyết trong thời gian chạy.
1.7. Một số đoạn mã JavaScript mẫu
- Dưới đây là một số mẫu mã JavaScript đơn giản để minh họa mức độ dễ sử dụng
trên trang web của bạn.
- Chọn tất cả các phần tử in đậm trong tài liệu và đặt màu của phần tử đầu tiên thành
màu đỏ.
var elems = document.getElementsByTagName('b');
elems[0].style.color = 'red';
- Bạn muốn thay đổi hình ảnh trong img tag? Hãy liên kết event handler cho click
event của một nút.
<img id="myImg" src="prev-image.png">
<button onclick="document.getElementById('myImg').src='new -image.png'">Change

Image</button>
3
- Cập nhật text content của paragraph (p) element? Đặt thuộc tính innerHTML của
phần tử như sau:
<p id="first-para">Hello World</p>
<button onclick="document.getElementById('first -para').innerHTML = "Welcome to

JavaScript!"'>Click me</button>
- Các mẫu code này chỉ cung cấp một cái nhìn tổng quan về những gì bạn có thể làm
bằng cách sử dụng JavaScript trên trang web.
2. Lập trình với JavaScript
Thời gian: 02 giờ; (Lý thuyết: 01 giờ; Thực hành: 0 1giờ)

2.1. Tạo dự án web có chứa mã JavaScript bằng Visual Studio
1. Trong Visual Studio sử dụng Web Development Settings, chọn New Web
Site từ menu File. Hộp thoại New Web Site mở ra.
2. Chọn ASP.NET Web Site (việc chọn ngôn ngữ Visual Basic hay Visual C#
không quan trọng) như hình dưới. Đổi tên thành Chapter2, với đường dẫn
phù hợp với cấu hình đã thiết lập. Khi các thông tin được điền đúng và đủ,
chọn “OK”. Visual Studio sẽ tạo một dự án web mới.
3. Visual Studio 2010 tự động tạo và mở một file Default.aspx trong chế độ soạn
thảo. Hãy đóng file này và tạo file mới bằng cách nhấn chuột phải trong vùng
Solution Explorer (Solution Explorer là một khung nằm ở phía trên bên phải
của Visual Studio) và chọn Add New Item. (Hoặc bạn cũng có thể chọn New
File từ menu File). Hộp thoại Add New Item mở ra như hình dưới đây. Chọn
HTML Page, đổi tên thành myfirstpage.htm, sau đó nhấn Add. Visual studio
tự động mở file này và chèn DOCTYPE cũng như các đoạn mã mặc định vào
trang HTML.
4. Trong trang myfirstpage.htm, đặt con trỏ chuột giữa cặp thẻ <title>
</title> và đổi tựa đề thành Trang đầu tiên của tôi. Màn hình của bạn
sẽ giống như hình dưới:
5. Giữa thẻ <head>, sau thẻ đóng </title>, thêm vào đoạn mã sau:
function yetAnotherAlert(textToAlert) { alert(textToAlert);
yetAnotherAlert("Đây là Chương 2");
</script>
6. Chọn Save All từ menu File. Đoạn mã hoàn chỉnh và trang hiển thị giống
4
như sau:
Để xem trang web vừa tạo, chọn Start Without Debugging từ menu Debug. Thao
tác này khởi động ASP.NET Development Server - server phát triển ASP.NET
(nếu chưa chạy) (nếu chương trình chưa chạy) và mở trang web trên trình duyệt
mặc định. Trang web được mở ra với một hộp thoại thông báo như Hình 2-6.
Nhấn OK và đóng trình duyệt.
Đoạn mã được thực thi như sau. Đầu tiên, thẻ script được gọi đến và khai báo
rằng ngôn ngữ sử dụng là JavaScript:
Hình 2-6 Chạy JavaScript trên ASP.NET Development Server.
Tiếp đó, đoạn mã khai báo hàm yetAnotherAlert nhận vào đối số
textToAlert như sau:
function yetAnotherAlert(textToAlert) {
Hàm này có nhiệm vụ mở hộp thoại thông báo trên cửa sổ trình duyệt với bất kỳ
đoạn văn bản nào được cung cấp làm đối số của hàm:
alert(textToAlert);
Hàm kết thúc bởi dấu ngoặc nhọn (}). Dòng tiếp theo của đoạn mã gọi đến hàm vừa
khai báo với đối số là một chuỗi đặt trong cặp ngoặc kép như sau:
yetAnotherAlert("Đây là Chương 2");
Với đoạn mã trên, bạn đã sẵn sàng lập trình với JavaScript bằng Visual Studio
2010. Nhưng trước khi ăn mừng, bạn cần học cách sử dụng các file JavaScript
bên ngoài - external file (là những file nằm ngoài file HTML chứa mã
JavaScript).
5
2.2. Gỡ lỗi trong JavaScript
Việc gỡ lỗi trong JavaScript có thể gặp nhiều khó khăn, đặc biệt khi chúng ta
gỡ lỗi cho các chương trình phức tạp. Một số công cụ, như là Venkman có thể
giúp chúng ta gỡ lỗi JavaScript, tuy nhiên công cụ chính để gỡ lỗi JavaScript lại
là trình duyệt. Các trình duyệt phổ biến hiện nay đều cho phép gỡ lỗi JavaScript.
Trong các chương trình gỡ lỗi, bạn hãy chú ý đến Firebug, một plug-in nổi tiếng
của trình duyệt Firefox. Bạn có thể tải về Firebug tại địa chỉ
http://www.getfirebug.com/
Có thể nói Firebug gần như không thể thiếu trong việc lập trình web, đặc biệt
là với JavaScript và AJAX. Phần mềm này cho phép bạn kiểm tra mọi thành phần
của một trang web, lấy được kết quả của các lời gọi AJAX, xem được CSS, tất cả
đều trong thời gian thực khiến cho việc gỡ lỗi trở nên dễ dàng hơn. Hình 2-8 là một
ví dụ về dùng Firebug trong gỡ lỗi.
Hình 2-8 Firebug - công cụ không thể thiếu của các lập trình viên web.
Lời khuyên của tác giả là hãy sử dụng Firebug cho việc lập trình và gỡ lỗi
JavaScript. Khi gỡ lỗi JavaScript, hàm alert() là một hàm rất hữu ích. Chỉ cần
một vài lời gọi alert() hợp lý, bạn tìm ra giá trị trong các biến và hiểu đoạn mã
hiện đang làm gì. Hàm alert() sẽ làm xuất hiện hộp thoại thông báo trên trình
duyệt, nên nếu bạn để hàm alert() trong một vòng lặp và sơ suất để vòng lặp đó
chạy vô hạn, bạn sẽ phải thoát khỏi trình duyệt bằng cách bất thường, chẳng hạn sử
dụng Task Manager.
3. Cú pháp và câu lệnh trong JavaScript
6
3.1. Phân biệt chữ hoa chữ thường
JavaScript phân biệt chữ hoa và chữ thường. Cần chú ý điều này khi đặt tên
cho biến và sử dụng từ khóa của ngôn ngữ. Một biến được đặt tên là remote sẽ
khác biến có tên là Remote hay REMOTE. Tương tự, từ khóa cho vòng lặp là
while, nhưng nếu viết thành WHILE hoặc While thì sẽ gây ra lỗi.
Các từ khóa được viết bằng chữ thường, còn biến có thể kết hợp tùy ý cả chữ
hoa và chữ thường miễn là bạn có thể tự kiểm soát được. Ví dụ: Các tên biến được
liệt kê dưới đây đều là tên biến hợp lệ trong JavaScript.
buttonOne
txt1
Chương 4 sẽ cung cấp thêm kiến thức về biến và quy ước đặt tên, còn bây giờ,
bạn hãy chú ý đến chữ hoa, chữ thường khi viết tên biến trong JavaScript.
3.2. Ký tự trắng
Trong hầu hết trường hợp, JavaScript bỏ qua ký tự trắng nằm giữa các câu lệnh.
Bạn có thể thêm ký tự trắng, lùi đầu dòng hoặc viết mã theo bất cứ quy ước mã nào
để đoạn mã JavaScript rõ ràng và dễ đọc hơn. Tuy nhiên, có một vài ngoại lệ trong
quy tắc này. Một số từ khóa, như return có thể bị thông dịch sai bởi trình thông dịch
JavaScript khi được đặt cùng dòng với từ khóa return khác. Phần sau của chương sẽ
trình bày ví dụ về vấn đề này.
Làm cho chương trình dễ đọc là một lý do để sử dụng ký tự trắng. Ví dụ như
đoạn mã dưới đây dùng rất ít ký tự trắng và khoảng lùi đầu dòng:
function cubeme(incomingNum) { // Hàm tính l ập phương if (incomingNum == 1) {
return **”**Bạn đang làm gì đấy?**”**;
} else {
return Math.pow(incomingNum,3);
}
var theNum = 2;
var finalNum = cubeme(theNum); if (isNaN(finalNum)) {
alert("Bạn nên nhớ rằng 1 lũy thừa bao nhiêu vẫn là 1.");
} else {
7
alert("Lập phương của " + theNum + " là " + finalNum);
Bây giờ chúng ta xem xét lại đoạn mã trên có sử dụng thêm những khoảng lùi
đầu dòng. (Bạn có thể tìm thấy đoạn mã này trong file example1.txt, thư mục mã
nguồn mẫu Chương 3 của phần Tài nguyên đi kèm.)
function cubeme(incomingNum) { // Hàm tính l ập phương if (incomingNum == 1) {
return **”**Bạn đang làm gì đấy?**”**;
} else {
var theNum = 2;
var finalNum = cubeme(theNum);
if (isNaN(finalNum)) {
alert("Bạn nên nhớ rằng 1 lũy thừa bao nhiêu vẫn là
} else {
alert("Lập phương của " + theNum + " là " + finalNum

}
Đoạn mã thứ hai thực thi chức năng giống như đoạn mã đầu nhưng dễ đọc và
dễ theo dõi hơn! Thực tế là có thể bạn chỉ mất một chút thời gian để viết mã, nhưng
bạn sẽ phải làm việc với nó trong nhiều năm liền. Như trường hợp của tôi khi đọc lại
đoạn mã sau một năm viết, tôi đã rất vui mừng vì trước đó mình đã viết mã một cách
dễ đọc và dễ theo dõi.
3.3. Chú thích
Với việc viết mã và duy trì chúng trong một thời gian dài, chú thích là người
bạn đồng hành tốt. Những đoạn mã trông hết sức rõ ràng nhưng lần tới đọc lại chúng
sẽ không được như thế nữa, đặc biệt khi bạn viết từ quá lâu. Chú thích có thể được
đặt trong đoạn mã JavaScript theo hai cách: chú thích nhiều dòng và chú thích một
dòng.
Bạn sẽ quen với chú thích nhiều dòng trong JavaScript nếu như bạn từng sử
dụng ngôn ngữ lập trình C. Chú thích nhiều dòng bắt đầu bằng ký tự / và kết thúc
bằng ký tự / như dưới đây:
8
/* Đây là chú thích nhiều dòng trong JavaScript*/
Giống như chú thích trong ngôn ngữ C, đoạn chú thích này có
Chú thích một dòng bắt đầu với hai dấu gạch chéo (//) và không cần ký tự kết
thúc vì nó chỉ ở trong một dòng. Dưới đây là ví dụ:
// Đây là chú thích một dòng.
Bạn có thể sử dụng nhiều chú thích một dòng. Với những khối chú thích ngắn,
bạn có thể sử dụng nhiều chú thích một dòng thay vì dạng chú thích nhiều dòng như
đã trình bày ở trên. Ví dụ như, bạn hãy xem khối chú thích dưới đây:
// Đây là một khối chú thích khác.
// Khối chú thích này có nhiều dòng.
// Trước mỗi dòng có hai dấu gạch chéo.
3.4. Dấu chấm phẩy

Trong JavaScript, dấu chấm phẩy được sử dụng để phân tách các biểu thức. Về
mặt kỹ thuật, dấu chấm phẩy là không bắt buộc trong hầu hết các câu lệnh và biểu
thức. Tuy nhiên, những vấn đề khó lường bạn gặp phải khi không sử dụng dấu chấm
phẩy có thể gây ra những lỗi không đúng do đó làm tốn thời gian tìm và gỡ lỗi. Trong
một số trường hợp, trình thông dịch JavaScript có thể tự động chèn thêm dấu chấm
phẩy khi bạn không muốn. Ví dụ như câu lệnh dưới đây:
return
(varName);
Thông thường, bạn nên viết là:

return(varName);
Nhưng JavaScript tự ý thêm một dấu chấm phẩy vào câu lệnh return, làm cho
đoạn mã trở thành như dưới đây trong trình thông dịch JavaScript:
return;
(varName);
Đoạn mã này không hoạt động, trình thông dịch đã hiểu nhầm ý của bạn. Nếu
bạn dùng đoạn mã này trong một hàm, nó sẽ trả về giá trị undefined (không xác định)
cho hàm gọi, và đó không phải là điều bạn mong muốn. Đây là một ví dụ cho thấy
chúng ta không nên tùy tiện sử dụng ký tự trắng - bạn cũng không thể sử dụng dấu
9
ngắt dòng (nội dung này sẽ được trình bày cụ thể ở phần kế tiếp) để tách biệt từ khóa
return và giá trị trả về.
Việc lập trình JavaScrip sẽ trở nên dễ dàng hơn nếu bạn sử dụng dấu chấm phẩy
như là một quy tắc thay vì phải nhớ xem không cần dùng nó ở đâu.
Tuy nhiên, bạn nhất thiết không được dùng dấu chấm phẩy trong trường hợp
sau: sử dụng vòng lặp và các điều kiện:
if (a == 4)
// đoạn mã được đặt ở đây
Trong trường hợp này, bạn sẽ không sử dụng dấu chấm phẩy ở cuối câu lệnh if
vì câu lệnh hoặc các khối câu lệnh bên trong cặp dấu ngoặc đi sau điều kiện là một
phần của câu lệnh điều kiện, trong trường hợp này là câu lệnh if. Giả sử bạn đặt dấu
chấm phẩy cuối câu lệnh if, phần đầu của câu lệnh if sẽ bị tách khỏi toàn bộ phần còn
lại. Ví dụ, đoạn mã ở dưới đây là sai. (Đoạn mã trong cặp dấu ngoặc nhọn được thực
thi bất kể giá trị a có bằng 4 hay không).
if (a == 4);
{
// đoạn mã được đặt ở đây
}
3.5. Dấu ngắt dòng

Liên quan chặt chẽ tới ký tự trắng và thậm chí dấu chấm phẩy trong JavaScript
là dấu ngắt dòng, đôi khi còn được gọi là ký tự trở về đầu dòng. Trong chuẩn ECMA-
262, dấu ngắt dòng hay còn được gọi là “dấu kết thúc dòng” được dùng để phân biệt
một dòng mã với dòng mã tiếp theo. Cũng như dấu chấm phẩy, vị trí đặt dấu ngắt
dòng cũng cần phải được lưu ý. Có thể thấy từ ví dụ của phần trước, đặt sai vị trí dấu
ngắt dòng có thể dẫn đến các lỗi khó lường.
Không có gì ngạc nhiên khi lợi ích thường gặp nhất của dấu ngắt dòng là để
phân biệt các dòng mã khác nhau cho dễ đọc. Bạn cũng có thể làm cho các dòng mã
dài dễ hiểu hơn bằng cách xuống dòng. Tuy nhiên, khi làm như vậy, bạn phải cẩn
thận với những lỗi như kết quả trả về từ câu lệnh return đã nêu ở trên, trong đó dấu
ngắt dòng thêm vào có thể gây ra những hiệu ứng không mong muốn, làm thay đổi ý
nghĩa của đoạn mã.
3.6. Đặt đoạn mã JavaScript đúng vị trí
Bạn có thể đặt mã JavaScript ở nhiều vị trí trong trang HTML: trong phần
10
<head> </head>, hoặc giữa cặp thẻ <body> </body>. Vị trí phổ biến của đoạn
mã JavaScript là ở giữa cặp thẻ <head> </head> ở gần đầu trang. Tuy nhiên, cách đặt
đoạn mã <script> trong phần <body> đang trở nên phổ biến hơn. Bạn phải khai báo
trước loại script (mã kịch bản) mà bạn sử dụng. Vì đây là cuốn sách về JavaScript
nên chúng ta sẽ khai báo như sau trong thẻ <script>:
Một vấn đề quan trọng cần lưu ý khi bạn sử dụng JavaScript với các trang được
khai báo dạng XHTML là trong các trang này, thẻ <script> cần phải được khai báo
trong phần CDATA. Nếu không, XHTML sẽ phân tích thẻ <script> như một thẻ XML
và đoạn mã trong đó có thể không chạy như bạn mong đợi. Do đó, để sử dụng
JavaScript trong XHTML cần khai báo như sau:
<![CDATA[
// Đoạn mã JavaScript được đặt ở đây

]]>
</script>
Các phiên bản trình duyệt cũ có thể không phân tích chính xác CDATA. Vấn
đề này có thể được giải quyết bằng cách đặt dòng mở đầu và kết thúc của CDATA
bên trong dấu chú thích của JavaScript như ví dụ dưới đây:
//<![CDATA[
// Đoạn mã JavaScript được đặt ở đây

//]]>
</script>
Khi đặt đoạn mã JavaScript trong một file ngoài (như bạn đã đọc ở Chương 2
“Lập trình với JavaScript”), bạn không cần dùng phần CDATA nữa. Bạn sẽ thấy rằng
ngoại trừ những đoạn JavaScript ngắn nhất, sẽ tốt hơn nếu bạn định nghĩa JavaScript
trong các file ngoài - thường là với đuôi mở rộng .js - và sau đó liên kết các file trong
trang. Chương 2 đã mô tả cụ thể vấn đề này, nhưng phần này sẽ nói đến cách thức
liên kết đến một file sử dụng thuộc tính src trong thẻ
<script>:
<script type="text/javascript" data-src="myscript.js">
Đặt đoạn JavaScript vào file ngoài có nhiều lợi ích, ví dụ như:
• Phân tách đoạn mã ra khỏi các thẻ đánh dấu: Lưu mã JavaScript vào file
ngoài khiến việc bảo trì đoạn mã HTML dễ hơn và giúp giữ cấu trúc của
HTML mà không phải sử dụng phần CDATA cho XHTML.
11
• Dễ bảo trì: Với việc đặt mã JavaScript vào một file ngoài, bạn có thể thay
đổi file đó mà không làm ảnh hưởng đến các file khác của website.
• Lưu trữ tạm thời (Caching): Nếu sử dụng file JavaScript ngoài, trình
duyệt web có thể lưu trữ tạm thời file đó và nhờ thế làm tăng tốc độ tải
trang web cho người dùng.
3.7. Câu lệnh trong JavaScript

Cũng như các chương trình được viết bằng ngôn ngữ khác, chương trình được
viết bằng JavaScript cũng bao gồm các câu lệnh được sắp xếp để trình thông dịch
JavaScript có thể thực hiện một hay nhiều tác vụ. Và cũng như các ngôn ngữ khác,
câu lệnh trong JavaScript có thể đơn giản hoặc phức tạp. Phần này sẽ mô tả ngắn gọn
mẫu câu lệnh JavaScript, với giả định rằng bạn đã xem qua một số ví dụ ở các chương
trước cũng như ở các chương sau của cuốn sách.
3.7.1. Câu lệnh JavaScript có những phần tử gì?
Như đã trình bày trong Chương 1 “Hiểu hơn về JavaScript”, câu lệnh JavaScript,
hay biểu thức, là một tập hợp các từ khóa, toán tử hoặc chuỗi định danh được đặt với
nhau để tạo thành một chương trình mà trình thông dịch JavaScript có thể hiểu được.
Câu lệnh thường kết thúc với dấu chấm phẩy, ngoại trừ trong một vài trường hợp đặc
biệt như lệnh khai báo cấu trúc rẽ nhánh và vòng lặp như if, while, và for được trình
bày cụ thể hơn trong Chương 5 “Sử dụng toán tử và biểu thức”.
Dưới đây là một vài ví dụ về câu lệnh cơ bản trong JavaScript:
var x = 4;
var y = x * 4;
alert("Xin chào");
3.7.2. Hai loại câu lệnh JavaScript

Câu lệnh JavaScript có hai loại cơ bản: đơn và phức hợp. Bạn không cần mất
nhiều thời gian với khái niệm câu lệnh. Tuy vậy, bạn nên hiểu sự khác nhau giữa câu
lệnh đơn và câu lệnh phức hợp.
Câu lệnh đơn là một câu lệnh như dưới đây:
var x = 4;
Câu lệnh phức hợp kết hợp nhiều cấp độ logic với nhau. Một câu lệnh điều kiện
if/then/else như dưới đây là ví dụ điển hình cho câu lệnh phức hợp:
if (something == 1) {
// đoạn mã đặt ở đây

} else {
12
// đoạn mã khác được đặt ở đây
3.8. Từ khóa trong JavaScript

Một số từ trong JavaScript là từ khóa, nghĩa là bạn không thể sử dụng nó làm
biến, chuỗi định danh hoặc hằng số trong chương trình của bạn. Nếu bạn làm vậy,
đoạn mã sẽ gặp những kết quả không mong đợi như bị lỗi. Ví dụ, bạn đã thấy từ khóa
var trong một vài ví dụ trước đây. Sử dụng từ khóa var ngoài mục đích để khai báo
biến có thể gây ra lỗi hoặc các hiệu ứng không mong muốn khác tùy vào trình duyệt.
Ví dụ như câu lệnh dưới đây:
// Không được viết như thế này!
var var = 4;
Đoạn mã ví dụ này không dẫn đến lỗi trực tiếp trên trình duyệt, nhưng nó sẽ
không hoạt động như bạn mong muốn.
Danh sách dưới đây bao gồm những từ được dùng làm từ khóa theo chuẩn
ECMA-262:
break delete if this while
case do in throw with
catch else instanceof try
continue finally new typeof
debugger for return var
default function switch void
Một số từ khóa khác (được liệt kê ở danh sách dưới đây) được dành cho các
mục đích sử dụng trong tương lai và do đó bạn không nên sử dụng chúng trong
chương trình của mình.
Danh sách các từ khóa dưới đây được dành để sử dụng trong chế độ strict:
13
3.9. Sơ lược về hàm
Bạn đã được xem nhiều ví dụ về hàm ở các chương trước. JavaScript có nhiều
hàm có sẵn hoặc hàm do bản thân ngôn ngữ này định nghĩa. Chúng ta đã đề cập đến
hàm alert() ngoài ra còn nhiều hàm khác nữa. Tùy theo phiên bản ngôn ngữ mà bạn
đang sử dụng, sẽ có các hàm có sẵn khác nhau. Nhiều hàm chỉ có ở các phiên bản gần
đây của JavaScript – những phiên bản chỉ được hỗ trợ bởi một số trình duyệt. Tìm ra
các hàm (và các đối tượng) có sẵn trên trình duyệt là một công việc quan trọng để xác
định xem trình duyệt của người dùng có thể chạy mã JavaScript mà bạn tạo trên trang
web của mình không. Nội dung này sẽ được đề cập ở Chương 11 “Các sự kiện trong
JavaScript và làm việc với trình duyệt”.
Tương tự các ngôn ngữ lập trình khác, JavaScript cũng chấp nhận các hàm người
dùng định nghĩa. Ví dụ trước đấy trong chương này đã định nghĩa một hàm có tên
cubeme() để tính lập phương của một số. Đoạn mã đó cũng cho thấy cách dùng
JavaScript ở cả thẻ <head> và <body> của trang web.
1. Dùng Visual Studio, Eclipse, hoặc một trình soạn thảo khác, thay đổi file
example1.htm trong thư mục mã nguồn mẫu của Chương 3.
2. Trong trang web, thay thế dòng chú thích TODO bằng đoạn mã in đậm
dưới đây:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript"> function cubeme(incomingNum) { if (incomi ngNum ==

1) {
return "Bạn đang làm gì đấy?";

} else {
</script>
<title>Ví dụ Chương 3</title>
14
</head>
<body>
<script type="text/javascript"> var theNum = 2;

var finalNum = cubeme(theNum); if (isNaN(finalNum)) {
alert("Bạn nên nhớ rằng 1 lũy thừa bao nhiêu vẫn là 1.";
} else {
alert("Lập phương của " + theNum + " là " + finalNum);
</script>
</body>
</html>
3. Lưu file này lại, sau đó chạy đoạn mã hoặc sử dụng trình duyệt để mở
trang web. Bạn sẽ thấy một thông báo như sau:
Đoạn mã trong ví dụ này kết hợp đoạn mã từ ví dụ trước đó để tạo thành một
trang HTML hoàn chỉnh, bao gồm cả khai báo DOCTYPE. Đoạn mã này khai báo
một hàm là cubeme() trong thẻ <head> của tài liệu, như sau:
function cubeme(incomingNum) { if (incomingNum == 1) {
return "Bạn đang làm gì đấy?";

} else {
}
Hàm này chấp nhận một đối số là incomingNum. Câu lệnh điều kiện if/then là
trọng tâm của hàm. Khi incomingNum bằng 1, hàm sẽ trả về chuỗi ký tự “Bạn đang
làm gì đấy?”. Và ngược lại, khi incomingNum khác 1, phương thức Math.pow được
gọi với incomingNum và số nguyên 3 là đối số. Việc gọi hàm Math.pow đã tăng giá
trị của incomingNum lên lũy thừa bậc 3 và giá trị này được trả về hàm gọi. Cách thức
gọi hàm sẽ được đề cập tiếp ở Chương 4.
15
Toàn bộ đoạn mã trước đều được đặt trong thẻ <head> của tài liệu, do đó nó có
thể được các đoạn mã khác gọi đến; đây chính là việc mà chúng ta sắp thực hiện.
Trình duyệt khi đó sẽ hiển thị phần <body> của tài liệu, bao gồm một vài đoạn mã
JavaScript khác. Và đoạn mã tiếp theo này sẽ gán cho biến theNum giá trị bằng 2.
var theNum = 2;
Sau đó, đoạn mã sẽ gọi hàm được định nghĩa trước đó là cubeme(), sử dụng biến
theNum làm đối số. Cần chú ý rằng biến finalNum sẽ nhận giá trị trả về từ hàm
cubeme(), như dưới đây:
var finalNum = cubeme(theNum);
Đoạn mã JavaScript cuối cùng trong trang là tập hợp các điều kiện if/then. Đoạn
mã này kiểm tra để xác định xem giá trị trả về được lưu trong biến finalNum có là số
hay không, bằng cách sử dụng hàm isNaN(). Nếu giá trị trả về không phải là số, hộp
thoại thông báo sẽ được hiển thị với nội dung cho thấy 1 đã được dùng làm đối số
(Tất nhiên có nhiều lý do khiến giá trị trả về không phải là số, tuy nhiên chúng ta hãy
tạm thời chấp nhận ví dụ đã nêu). Nếu như giá trị trả về là số, số đó được hiển thị, và
bạn có thể thấy ở hộp thoại của hàm alert() hiển thị giá trị như ở bước 3 bên trên.
16
CÂU HỎI BÀI 1
1. Javascript có phải là ngôn ngữ mở rộng của java không?
2. Javascript khác các ngôn ngữ biên dịch như thế nào?
3. Javascript có vai trò như thế nào trong bộ ba HTML, CSS, Javascript
17
BÀI 2: Cấu trúc điều khiển, hàm và xử lý sự kiện
Giới thiệu:
- Bài này giúp người học làm quen với các khái niệm về cấu trúc điều khiển, vòng lặp,
hàm, xử lý sự kiện trong ngôn ngữ Javascript.
Mục tiêu:
- Phát biểu được các kiểu dữ liệu, cấu trúc điều khiển, hàm và xử lý sự kiện của
JavaScript.
- Viết được một chương trình javascrip đơn giản, có thể xử lý sự kiện.
- Có thể tự nghĩ ra một ứng dụng từ những kiến thức đã học và xây dựng được ứng
dụng đó.
Nội dung chính:
1. Làm việc với biến và kiểu dữ liệu

1.1. Kiểu dữ liệu trong JavaScript
Kiểu dữ liệu của một ngôn ngữ xác định những thành phần cơ bản có thể
được sử dụng trong ngôn ngữ đó. Bạn có thể đã quen thuộc với các kiểu
dữ liệu như kiểu chuỗi hoặc số nguyên trong các ngôn ngữ khác. JavaScript
có từ ba tới sáu kiểu dữ liệu tùy thuộc vào định nghĩa về kiểu dữ liệu. Bạn
sẽ thường xuyên làm việc với tất cả các kiểu dữ liệu này tuy nhiên một số
kiểu có thể được dùng nhiều hơn các kiểu khác.
Sáu kiểu dữ liệu trong JavaScript được thảo luận trong chương này bao
gồm:
▪ Kiểu số
▪ Kiểu chuỗi
▪ Kiểu logic
▪ Kiểu null
▪ Kiểu undefined (Không xác định)
▪ Kiểu đối tượng
Ba kiểu dữ liệu đầu tiên – kiểu số, chuỗi và logic – có lẽ đã trở nên quen
thuộc với tất cả các lập trình viên. Ba kiểu dữ liệu sau – kiểu null,
18
undefined và đối tượng – cần được giải thích thêm. Ngay sau đây, chúng ta
sẽ xem xét từng kiểu dữ liệu và sẽ tìm hiểu kỹ hơn về kiểu đối tượng trong
Chương 8 “Các đối tượng trong JavaScript”.
Bên cạnh đó, JavaScript còn có một vài kiểu dữ liệu tham chiếu khác như
kiểu Array, Date và RegExp. Kiểu Date (ngày tháng) và RegExp (biểu thức
chính quy) được thảo luận trong chương này, còn kiểu Array (mảng) sẽ được
bàn tới trong Chương 8.
1.1.1. Làm việc với kiểu dữ liệu số
Kiểu dữ liệu số trong JavaScript đơn giản là những con số. Tuy nhiên, những
lập trình viên đã quen với kiểu dữ liệu trong các ngôn ngữ như C sẽ thấy ngạc nhiên
vì số nguyên và số thực dấu chấm động trong JavaScript không được tách riêng.
Cả hai đều là kiểu số hợp lệ trong JavaScript. Ví dụ:
4
51.50
-14
0xd
Ví dụ cuối cùng, 0xd là một số nguyên hệ thập lục phân (hệ cơ số 16). Cả số
hệ thập lục phân và hệ bát phân (hệ cơ số 8) đều hợp lệ trong JavaScript và bạn sẽ
không ngạc nhiên khi biết rằng JavaScript chấp nhận việc thực hiện phép toán
trên các số thuộc những định dạng này. Hãy thử làm bài tập sau.
Sử dụng Microsoft Visual Studio, Eclipse hoặc một trình soạn thảo khác,
chỉnh sửa file example.htm trong thư mục mã nguồn mẫu của Chương 4 trong phần
Tài nguyên đi kèm.
Trong trang này, thay thế chú thích TODO bằng đoạn mã in đậm sau (bạn có
thể tìm thấy đoạn mã này trong file example1.txt của phần Tài nguyên đi kèm):
"http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<title> Số dạng thập lục phân </title>
var h = 0xe;
19
var i = 0x2;
var j = h * i;
alert(j);
</script>
</head>
<body>
</body>
</html>
1. Dùng trình duyệt mở trang web. Bạn sẽ thấy một hộp thoại như sau:
Đoạn mã trên khai báo hai biến (bạn sẽ tìm hiểu về khai báo biến trong phần
sau của chương này) và thiết lập cho chúng giá trị thập lục phân tương ứng là 0xe
(14 trong hệ thập phân) và 0x2 (2 trong hệ thập phân).
var h = 0xe;
var i = 0x2;
Sau đó, khai báo một biến mới và gán cho nó giá trị bằng tích của hai biến
trước như sau:
var j = h * i;
Biến kết quả sau đó được truyền vào hàm alert() và hiển thị ra hộp thoại ở
bước
Thật thú vị khi thực hiện nhân hai giá trị thập lục phân mà kết quả nhận được
trên hộp thoại lại là một giá trị thập phân.
1.1.2. Các hàm số học
JavaScript tích hợp sẵn các hàm (và đối tượng) để làm việc với các giá trị
số. Tiêu chuẩn (ECMA) của Hiệp hội Sản xuất Máy tính châu Âu đã định nghĩa rất
nhiều hàm. Một trong số những hàm phổ biến là isNaN().
NaN là viết tắt của cụm từ Not a Number, có nghĩa là “không phải số hợp
lệ”. Bạn sử dụng hàm isNaN() để xác định một số có hợp lệ theo đặc tả ECMA-
262 hay không. Ví dụ, kết quả của một phép chia cho 0 không phải là số hợp lệ
20
trong JavaScript. Chuỗi giá trị “Đây không phải là một số” đương nhiên không phải
là số. Mặc dù mỗi người lại có cách hiểu khác nhau để phân biệt đâu là số và
ngược lại. Theo hàm isNaN(), chuỗi ký tự “bốn” không phải là số, tuy nhiên
chuỗi “4” thì lại là số. Hàm isNaN() luôn cố gắng chứng minh giá trị của một
biến không phải là số. Dưới đây là một số ví dụ bạn có thể thử để xem một giá trị
như thế nào là số không hợp lệ
Thực hành với hàm isNaN()
Mở trình duyệt IE.

1. Trên thanh địa chỉ, nhập dòng lệnh sau (có trong file isnan.txt của phần
Tài nguyên đi kèm):
javascript:alert(isNaN("4"));
Bạn nhận được một hộp thoại với thông báo False như hình sau:
Hàm isNaN() trả về false cho biểu thức trên vì giá trị nguyên 4 là một số.
Nhớ rằng đoạn mã trên trả lời cho câu hỏi “Có đúng 4 không phải là số?”. Vì
4 đúng là số, do đó kết quả trả về là false (sai). Bây giờ, hãy xem xét ví dụ
sau:
1. Mở trình IE.
2. Trên thanh địa chỉ, nhập:
javascript:alert(isNaN("bốn"));
Bạn nhận được một hộp thoại với thông báo true (đúng) như sau:
21
Trong trường hợp này, vì chuỗi ký tự bốn không phải là số, nên hàm trả về
true: chuỗi bốn không phải là số. Việc cố ý sử dụng dấu nháy kép trong mỗi ví
dụ ("4" và “bốn”) nhằm chỉ ra rằng với hàm này, dấu nháy kép không gây ra
lỗi. Vì JavaScript đủ thông minh để nhận ra “4” là số, nó sẽ tự chuyển đổi kiểu
cho bạn. Mặc dù vậy, sự chuyển đổi này đôi khi gây bất tiện, chẳng hạn như khi
bạn làm việc với biến hoặc giá trị thuộc một kiểu nhất định.
Hàm isNaN() thường được dùng để kiểm tra xem dữ liệu đầu vào - có thể
là từ form - thuộc dạng số hay ký tự.
Đối tượng Math

Math là đối tượng đặc biệt có sẵn để làm việc với các số trong JavaScript.
Một số thuộc tính hữu ích của Math khi lập trình JavaScript bao gồm thuộc tính
trả về giá trị của số pi, căn bậc 2 của một số, số giả ngẫu nhiên (pseudo-random) và
giá trị tuyệt đối. Một số là thuộc tính giá trị, nghĩa là nó trả về giá trị, số khác hoạt
động như các hàm và trả về giá trị thông qua đối số truyền vào. Hãy xem một ví
dụ về thuộc tính giá trị Math.PI:
javascript:alert(Math.PI);
Kết quả được thể hiện như Hình 4-1.
22
Hình 4-1 Xem giá trị của _thuộc tính Math.PI
Đối tượng Math còn rất nhiều thuộc tính khác có thể hữu ích cho
chương trình của bạn. Một vài trong số đó hoạt động như hàm hoặc phương
thức trên đối tượng và được liệt kê trong Bảng 4-2. Bạn có thể xem đầy đủ
các thuộc tính của đối tượng Math trong đặc tả ECMA-262 tại
http://www.ecma- international.org/publications/files/ECMA-ST/Ecma-
262.pdf.
BẢNG 4-2 Các thuộc tính của đối tượng Math.
1.1.3. Làm việc với chuỗi
Chuỗi là một kiểu dữ liệu cơ bản khác trong JavaScript. Chuỗi bao gồm một
hoặc nhiều ký tự nằm trong dấu nháy. Các ví dụ sau là chuỗi:
"Hello world"
"B"
"Đây là 'một chuỗi khác'"
Cần giải thích thêm về ví dụ cuối trong danh sách trên. Chuỗi được bao quanh
bởi dấu nháy đơn hoặc kép. Chuỗi nằm trong dấu nháy đơn có thể chứa các dấu
nháy kép. Tương tự, một chuỗi nằm trong dấu nháy kép, như bạn thấy trong ví dụ
trên, có thể chứa các dấu nháy đơn. Vì vậy, nếu chuỗi được bao quanh bởi một
loại dấu nháy, bạn có thể sử dụng dấu nháy khác bên trong nó. Sau đây là một số
ví dụ:
′Bò kêu "moo".′
23
′Đồng hồ thông báo "12h trưa".′
"′Ai cũng có khoảng thời gian tuyệt vời′ là khẩu hiệu chính thức."
a) Thoát ký tự nháy
Nếu bạn sử dụng cùng một loại dấu nháy (nằm ở trong chuỗi, và bao quanh
chuỗi) và muốn dấu nháy nằm ở trong chuỗi hiển thị như một ký tự bình thường
chứ không phải là một phần của cú pháp thông báo cho JavaScript biết là hết
chuỗi bạn có thể dùng ký tự sổ chéo ngược (backslash ) đặt ngay trước dấu nháy.
Ví dụ:
▪ ′Tôi đang sử dụng 'dấu nháy đơn′ cả trong và ngoài ví dụ này.′
▪ "Đây là ví dụ "tuyệt vời" về việc sử dụng "dấu nháy kép" trong một chuỗi"
b) Các ký tự thoát khác
JavaScript cho phép kết hợp ký tự sổ chéo ngược với một số ký tự thông
thường tạo thành chuỗi ký tự thoát để biểu diễn một số ký tự đặc biệt. Bảng 4-3
trình bày những chuỗi ký tự thoát này.
BẢNG 4-3 Chuỗi ký tự thoát trong JavaScript.
Sau đây là ví dụ về cách dùng một số chuỗi ký tự thoát (Xin thứ lỗi trước vì
tôi tiếp tục sử dụng hàm alert(). Tôi sẽ sớm dùng thêm các cách phức tạp
hơn để hiển thị kết quả trả về).
1. Mở trình duyệt IE.

2. Trên thanh địa chỉ, gõ dòng lệnh sau (bạn cũng có thể thấy dòng lệnh
này trong file escapesequences.txt của phần Tài nguyên đi kèm):
javascript:alert("xin chàottxin chàontạm biệt");
24
Hộp thoại sau xuất hiện (nếu hộp thoại không xuất hiện, hãy đóng và mở lại
trình duyệt). Chú ý rằng trên một số trình duyệt, chẳng hạn Chrome, cách sử dụng
ký tự tab như trong ví dụ trên là không chính quy.
Đây là cách dùng chuỗi ký tự thoát trong thực tế. Trong đoạn mã, hộp thoại
hiển thị hai từ “xin chào” bao quanh là hai dấu tab, biểu diễn bởi chuỗi ký tự thoát
t, sau đó là một ký tự xuống dòng biểu diễn bởi n, cuối cùng là từ “tạm biệt”.
c) Các phương thức và thuộc tính của chuỗi
JavaScript định nghĩa một số thuộc tính và phương thức để làm việc với
chuỗi. Các thuộc tính và phương thức này được truy cập bằng dấu chấm (“.”) đã
được trình bày ở phần trước của chương này và cũng đã quen thuộc với nhiều lập
trình viên.
Thuộc tính length trong đối tượng string đại diện cho chiều dài của
chuỗi, không tính dấu nháy kép kèm theo. Thuộc tính này có thể được gọi trực tiếp
trên chuỗi như trong ví dụ sau:
alert("Đây là một chuỗi.".length);
Tuy nhiên, cách dùng phổ biến hơn là gọi thuộc tính length trên một biến
như sau:
var x = "Đây là một chuỗi.";
alert(x.length);
Cả hai ví dụ đều cho ra cùng một kết quả, bạn có thể xem ở ví dụ tiếp theo
dưới đây.
d) Lấy chiều dài của một chuỗi
1. Mở trình duyệt IE.
25
2. Trên thanh địa chỉ, gõ dòng lệnh sau (bạn có thể thấy dòng lệnh này
trong file stringlength.txt của phần Tài nguyên đi kèm):
javascript:alert("Đây là m ột chuỗi.".length); Kết quả là một hộp thoại hiển thị 17

như sau:
1. Bây giờ, thử nhập đoạn mã sau trên thanh địa chỉ:
javascript:var x = "Đây là một chuỗi."; alert(x.length);
Kết quả là hộp thoại hiển thị kết quả 17 như hình trên.
Phương thức substring trả về chuỗi con bao gồm các ký tự từ đối số đầu
tiên tới ký tự kề trước đối số thứ hai như trong ví dụ sau:
alert(x.substring(0,3));
Ví dụ tiếp theo trả về các ký tự từ vị trí đầu tiên đến vị trí thứ 5 của chuỗi x.
Ví dụ:
var x = "Steve Suehring";
Kết quả là hộp thoại hiển thị chuỗi "Steve".3.

javascript:var x = "Đây là một chuỗi.";
alert(x.length);
Kết quả là hộp thoại hiển thị kết quả 17 như hình trên.
Phương thức substring trả về chuỗi con bao gồm các ký tự từ đối số đầu
tiên tới ký tự kề trước đối số thứ hai như trong ví dụ sau:
Ví dụ tiếp theo trả về các ký tự từ vị trí đầu tiên đến vị trí thứ 5 của chuỗi x.
Ví dụ:
var x = "Steve Suehring";
Kết quả là hộp thoại hiển thị chuỗi "Steve".
26
Cách xác định chỉ số
Cách xác định chỉ số trong phương thức substring tương đối khác,
hoặc ít nhất theo tôi là như vậy. Ký tự đầu tiên đại diện bởi số nguyên 0.
Điều này hoàn toàn bình thường, vì 0 được sử dụng là chỉ số đầu tiên trong
nhiều ngôn ngữ lập trình. Tuy nhiên, chỉ số cuối trong phương thức
substring lại lớn hơn chỉ số của ký tự cuối cùng trong chuỗi con 1 đơn
vị.
Thông thường, bạn sẽ nghĩ với giá trị chỉ số là 0 và 5 ( như trong ví dụ
trên), kết quả nhận được sẽ là 6 ký tự đầu tiên, từ 0 tới 5, đó là chuỗi ″Steve
", kết thúc bằng một ký tự trắng. Tuy nhiên, rất tiếc không phải vậring` lớn
hơn chuỗi con mà bạn mong muốn 1 đơn vị và chuỗi con này không bao gồm
ký tự đó.
Ngoài substring, một số phương thức của chuỗi được sử dụng phổ biến
là slice, substr, concat, toUpperCase, toLowerCase và các phương
thức so khớp như match, search và replace. Sau đây, tôi sẽ giới thiệu cụ
thể từng loại.
Các phương thức thay đổi chuỗi bao gồm slice, substring, substr và
concat. Phương thức slice và substring trả về chuỗi giá trị dựa trên
một chuỗi khác. Chúng chấp nhận hai đối số: vị trí đầu và vị trí cuối tùy
chọn. Dưới đây là một số ví dụ:
var myString = "Biến là một chuỗi.";
alert(myString.substring(3)); //Tr ả về "n là một chuỗi."
alert(myString.substring(3,9)); //Tr ả về "n là m"
alert(myString.slice(3)); //Trả về "n là một chuỗi."
alert(myString.slice(3,9)); //Tr ả về "n là m"
Phương thức substr cũng chấp nhận hai đối số: đối số đầu là vị trí đầu để
trả về, đối số thứ hai là số ký tự trả về chứ không phải vị trí kết thúc
(khác với substring/slice). Xem xét ví dụ với substr:
var myString = "Biến là một chuỗi.";
alert(myString.substr(3)); //Tr ả về "n là một chuỗi."
alert(myString.substr(3,9)); //Tr ả về "n là một "
Phương thức concat nối hai chuỗi với nhau:

var firstString = "Hello ";
27
var finalString = firstString.concat("World");
alert(finalString); //Trả về "Hello World"
Phương thức toUpperCase và toLowerCase cùng với hai phương

thức cùng loại là toLocaleUpperCase và toLocaleLowerCase chuyển
tất cả các ký tự trong chuỗi thành chữ hoa hoặc chữ thường:
var myString = "biến là một Chuỗi";
alert(myString.toUpperCase()); // "BI ẾN LÀ MỘT CHUỖI"

alert(myString.toLowerCase()); // "bi ến là một chuỗi"
Như tôi đã nói ở phần trước, có rất nhiều phương thức và thuộc tính
của chuỗi. Bạn có thể tìm hiểu danh sách phương thức và thuộc tính đầy
đủ tại địa chỉ http://www.ecma-international.org/publications/files/ECMA-
ST/Ecma-262.pdf.
1.1.4. Kiểu logic
Trong JavaScript, kiểu logic (Boolean) là một kiểu dữ liệu bị động. Bị động
nghĩa là kiểu logic không được dùng như kiểu số và chuỗi; bạn vẫn có thể khai báo
và sử dụng biến logic nhưng thông thường nó chỉ được sử dụng để xác định giá trị
cho các biểu thức logic. Kiểu logic chỉ có hai giá trị true hoặc false, được dùng
để đánh giá biểu thức logic trong các câu lệnh điều kiện ví dụ như
if/then/else.
Xem xét đoạn mã sau:
If (myNumber > 18) {
// Viết mã ở đây
Biểu thức logic được sử dụng làm điều kiện trong câu lệnh if để xác định khi
nào đoạn mã trong dấu ngoặc nhọn {} sẽ được thực thi. Nếu biến myNumber có
giá trị lớn hơn 18, biểu thức logic sẽ có giá trị true (đúng), ngược lại có giá trị
false (sai).
1.1.5. Kiểu Null
Null là một kiểu dữ liệu đặc biệt trong JavaScript (cũng như trong hầu hết
các ngôn ngữ lập trình). Khi một biến là null, nó không là gì và cũng không chứa
28
gì cả. Tuy vậy, null khác với giá trị rỗng. Ví dụ, khai báo và thiết lập một biến là
chuỗi rỗng sẽ có dạng như sau:
var myVariable = '';
Biến myVariable là rỗng, nhưng không phải là null.

1.1.6. Undefined
Undefined (không xác định) là trạng thái, đôi khi được dùng như là giá trị,
biểu thị biến chưa chứa giá trị nào. Trạng thái này khác so với null, mặc dù cả
null và undefined có thể được đánh giá như nhau. Bạn sẽ học cách phân biệt
giữa giá trị null và undefined trong Chương 5 “Sử dụng toán tử và biểu thức”.
1.1.7. Kiểu đối tượng
Tương tự như hàm, nội dung chi tiết về đối tượng được trình bày trong một
chương riêng (Chương 8). Tuy nhiên, chương này, sẽ giới thiệu ngắn gọn về đối
tượng. JavaScript là ngôn ngữ dựa trên đối tượng, chứ không phải là ngôn ngữ
hướng đối tượng. Tuy nhiên, JavaScript cũng có các chức năng tương tự như một
ngôn ngữ hướng đối tượng và trong hầu hết các cách sử dụng JavaScript cơ bản,
bạn sẽ không nhận thấy có sự khác biệt.
Đối tượng trong JavaScript là tập hợp các thuộc tính, mỗi thuộc tính chứa một
giá trị cơ bản. Các thuộc tính - được hiểu như là chìa khóa - cho phép truy xuất tới
các giá trị. Mỗi thuộc tính có thể chứa một giá trị, một đối tượng hoặc thậm chí một
phương thức. Bạn có thể khai báo các đối tượng bằng JavaScript, hoặc sử dụng
những đối tượng có sẵn.
Đối tượng được tạo bằng cặp dấu ngoặc nhọn, đoạn mã dưới đây tạo một đối
tượng rỗng có tên là myObject:
var myObject = {};
Còn đây là ví dụ về một đối tượng có nhiều thuộc tính:

var dvdCatalog = {
"identifier": "1",
"name": "Coho Vineyard "

};
Ví dụ trên tạo đối tượng dvdCatalog có hai thuộc tính: identifier

và name. Giá trị của mỗi thuộc tính tương ứng là 1 và "Coho Vineyard".
Bạn có thể truy xuất thuộc tính name của đối tượng dvdCatalog như sau:
alert(dvdCatalog.name);
29
Sau đây là ví dụ hoàn chỉnh về đối tượng (bạn có thể tìm thấy đoạn mã này
trong file object.txt).
// Tạo một đối tượng mới sử dụng dấu ngoặc nhọn var star = {}
// Tạo bốn đối tượng được đặt tên theo tên của bốn ngôi sao
star["Polaris"] = new Object

star["Deneb"] = new Object;
star["Vega"] = new Object; s
tar["Altair"] = new Object;
Các phần tiếp theo của cuốn sách này sẽ trình bày thêm về thuộc tính của
đối tượng cũng như cách truy cập các thuộc tính này. Các vấn đề cụ thể về đối tượng
sẽ được trình bày kỹ trong Chương 8.
1.1.8. Kiểu mảng
Trong ví dụ trước, bạn đã được giới thiệu cách tạo ra một đối tượng với tên
riêng. Bạn cũng có thể sử dụng những đối tượng không có tên được truy xuất
thông qua chỉ số. Đó là các mảng theo kiểu cũ, vốn quen thuộc trong rất nhiều
ngôn ngữ lập trình. Bạn cũng vừa thấy nhiều đối tượng có thể được khai báo cùng
lúc và đặt tên theo các ngôi sao. Đoạn mã sau tạo một mảng với phần tử là các đối
tượng trên. Ví dụ này có trong file stararray.txt của phần Tài nguyên đính kèm.
var star = new Array();
star[0] = "Polaris";
star[1] = "Deneb";
star[2] = "Vega";
star[3] = "Altair";
Bạn cũng có thể sử dụng cách khởi tạo mảng tường minh như dưới đây:
var star = ["Polaris", "Deneb", "Vega", "Altair"];
Mảng có thể chứa giá trị lồng nhau, như trong ví dụ sau của các ngôi sao được
gộp theo chòm sao mà nó xuất hiện:
var star = [["Polaris", "Ursa Minor"],["Deneb","Cygnus"],
["Vega","Lyra"], ["Altair","Aquila"]];
Cuối cùng, mặc dù không phổ biến, bạn có thể gọi hàm khởi tạo Array()
với đối số là các phần tử mảng như sau:
var star = new Array("Polaris", "Deneb", "Vega", "Altair");
30
Đặc tả ECMA-262 mới phiên bản 5 có thêm một vài phương thức mới cho
việc duyệt và làm việc với mảng. Kiến thức về mảng bao gồm các phương thức
duyệt và làm việc với các phần tử sẽ được trình bày kĩ hơn trong Chương 8.
1.2. Khai báo và sử dụng biến
Dù sử dụng ngôn ngữ nào lập trình viên cũng cần làm quen với biến. Biến
chứa những dữ liệu có thể thay đổi trong suốt vòng đời của chương trình. Bạn đã
thấy những ví dụ về khai báo biến trong các chương trước. Ở phần này, bạn sẽ chính
thức tìm hiểu cách sử dụng biến trong JavaScript.
1.2.1. Khai báo biến
Trong JavaScript, biến được khai báo với từ khóa var. Bạn có thể tìm thấy các
ví dụ về khai báo biến trong file variablenaming.txt của phần Tài nguyên đi kèm.
Các cách khai báo biến như sau đều hợp lệ:
var x;
var myVar;
var counter1;
Tên của biến có thể chứa ký tự in hoa, in thường cũng như số, tuy nhiên chúng
không được bắt đầu bằng một chữ số. Tên biến không được chứa ký tự trắng hoặc
các ký tự đặc biệt, ngoại trừ dấu gạch dưới (). (Mặc dù trên thực tế, tôi ít thấy ký tự
trong biến JavaScript).Các tên biến sau là không hợp lệ:
var 1stCounter;
var new variable;
var new.variable;
var var;
Trong các ví dụ trên, ba tên biến đầu không hợp lệ vì chúng sử dụng các ký
tự không hợp lệ (hoặc là sử dụng ký tự hợp lệ ở sai vị trí, như trong ví dụ đầu tiên),
còn tên biến cuối cùng, var, là không hợp lệ vì nó trùng với từ khóa. Để biết thêm
thông tin về từ khóa trong JavaScript, đọc lại Chương 2, “Lập trình với
JavaScript”. Bạn có thể khai báo nhiều biến trên một dòng lệnh như sau:
31
var x, y, zeta;
Biến cũng có thể được khai báo và khởi tạo giá trị trên cùng một dòng:
var x = 1, y = "hello", zeta = 14;
1.2.2. Kiểu biến
Các biến trong JavaScript không có kiểu rõ ràng. Bạn không cần khai báo
trước một biến là số nguyên, số thực hay là chuỗi. Bạn có thể thay đổi kiểu dữ liệu
của biến đơn giản bằng cách gán một giá trị khác kiểu cho nó. Hãy xem ví dụ sau,
biến x ban đầu chứa giá trị nguyên, nhưng sau đó được gán lại, nó thay đổi để
chứa giá trị kiểu chuỗi:
var x = 4;
var x = "Bây giờ nó là một chuỗi.";
1.2.3. Phạm vi của biến
Phạm vi của biến đề cập tới các vị trí mà trong đó giá trị của biến có thể
được truy xuất. Biến có phạm vi toàn cục có thể được truy xuất ở bất kỳ đâu trong
một chương trình. Trong ngữ cảnh một trang web – hoặc một tài liệu, bạn có thể
truy xuất và sử dụng biến toàn cục ở bất cứ đâu.
Biến được khai báo trong một hàm thì chỉ được sử dụng bên trong hàm đó.
Điều này có nghĩa là giá trị của những biến này không thể được truy xuất bên
ngoài hàm. Tham số của hàm có phạm vi ở bên trong hàm đó.
Sau đây là một vài ví dụ thực tế về phạm vi của biến, bạn có thể tìm thấy
chúng trong file scope1.txt của phần Tài nguyên đi kèm:
var aNewVariable = "Biến toàn cục";
function doSomething(incomingBits) {
alert(aNewVariable);
alert(incomingBits);
}
doSomething("Biến cục bộ");
</script>
Đoạn mã trên định nghĩa hai biến: biến toàn cục aNewVariable và biến cục
bộ incommingBits chỉ có phạm vi bên trong hàm doSomething(). Cả hai
biến đều được truyền vào hàm alert(). Khi hàm doSomething() được gọi,
nội dung của cả hai biến được gửi thành công và hiển thị lên màn hình như trong
Hình 4-2 và 4-3.
32
Hình 4-2 Biến _aNewVariable_ là biến toàn cục.
Hình 4-3 Biến incommingBits có phạm vi bên trong hàm doSomething.
Sau đây là một ví dụ phức tạp hơn.
1. Sử dụng Visual Studio, Eclipse hoặc một trình soạn thảo khác
sửa file scoping.htm trong thư mục mã nguồn mẫu Chương 4.
2. Trong trang này, thay thế chú thích TODO bằng đoạn mã in đậm sau
(đoạn mã này có thể được tìm thấy trong file scoping.txt của phần Tài
nguyên đi kèm):
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ví dụ về phạm vi</title>
var aNewVariable = "có phạm vi toàn cục.";
function doSomething(incomingBits) {
alert("Biến toàn cục bên trong hàm: " + aNewVariable);
alert("Biến cục bộ bên trong hàm: " + incomingBits);
}
</script>
33
</head>
<body>
<script type="text/javascript"> doSomething(" có phạm vi cục bộ trong
hàm.");
alert("Biến toàn cục bên ngoài hàm: " + aNewVariable); alert("Biến cục
bộ bên ngoài hàm: " + incomingBits);
</script>
</body>
</html>
Kết quả là ba hộp thoại trên màn hình. Hộp thoại thứ nhất:
Hộp thoại thứ hai:
Hộp thoại thứ ba:
Bây giờ, bạn hãy đọc kỹ lại đoạn mã. Bạn thấy có bao nhiêu lời gọi hàm
alert()? Gợi ý: Hai lời gọi trong phần <head> và hai lời gọi khác trong
phần <body>. Tổng cộng có bốn lần gọi hàm alert(). Vậy tại sao chỉ có ba
hộp thoại hiện lên màn hình?
Bởi vì đây là phần nói về phạm vi của biến (và tôi đã vừa gợi ý), bạn có thể
tự suy luận ra câu trả lời. Ví dụ này cũng minh họa cho cách xử lý các vấn đề trong
JavaScript khi kết quả không như những gì chúng ta muốn.
34
2. Sử dụng toán tử và biểu thức

2.1. Toán tử
JavaScript có các loại toán tử như sau. Phần này mô tả về các toán tử và có
bao gồm thông tin về thứ tự ưu tiên của chúng.
• Toán tử gán
• Toán tử so sánh
• Toán tử số học
• Toán tử thao tác bit
• Toán tử logic
• Toán tử chuỗi
• Toán tử điều kiện (ba ngôi)
• Toán tử phẩy
• Toán tử một ngôi
• Toán tử quan hệ
JavaScript có cả toán tử hai ngôi vàmột ngôi, và một toán tử đặc biệt ba ngôi,
toán tử quan hệ. Toán tử hai ngôi yêu cầu hai toán hạng, một toán hạng ở trước và
một toán hạng ở sau toán tử:
toán_hạng_1 toán_tử toán_hạng_2
Chẳng hạn, 3+4 hoặc x*y.

Toán tử một ngôi yêu cầu một toán tử, ở trước hoặc ở sau toán tử:
toán_tử toán_hạng
hoặc
toán_hạng toán_tử
Chẳng hạn, x++ hoặc ++x.
2.1.1. Toán tử gán

Toán tử gán gán giá trị cho toán hạng bên trái nó dựa theo giá trị của toán hạng
bên phải nó. Toná tử gán đơn giản là toán tử bằng (=), gán giá trị cho toán hạng bên
trái nó bằng giá trị của toán hạng bên phải nó. Vậy, x = y tức là gán giá trị của y cho x.
35
Ngoài ra còn có các toán tử gán kết hợp được liệt kê trong bảng dưới:
Toán tử gán kết hợp
Tên Viết tắt Ý nghĩa
Toán tử gán x = y x = y
Cộng xong rồi gán x += y x = x + y
Trừ xong rồi gán x -= y x = x - y
Nhân xong rồi gán x *= y x = x * y
Chia xong rồi gán x /= y x = x / y
Chia lấy dư xong rồi gán x %= y x = x % y
Exponentiation assignment x **= y x = x ** y
Dịch bit trái rồi gán x <<= y x = x << y
Dịch bit phải rồi gán x >>= y x = x >> y
Unsigned right shift assignment x >>>= y x = x >>> y
AND bit rồi gán x &= y x = x & y
XOR bit rồi gán x ^= y x = x ^ y
OR bit rồi gán x |= y x = x | y
2.1.2. Phân rã
Với phép gán phức tạp hơn, cú pháp phân rã rồi gán là một biểu thức JavaScript
cho phép phân tách dữ liệu từ mảng hoặc object sử dụng cú pháp sao chép cấu trúc
của mảng hoặc object literal.
36
var foo = ['one', 'two', 'three'];
// không dùng phân rã

var one = foo[0];
var two = foo[1];
var three = foo[2];
// dùng phân rã
var [one, two, three] = foo;
2.1.3. Toán tử so sánh

Toán tử so sánh so sánh toán hạng của nó và trả về giá trị logic dựa theo tính
đúng sai của phép so sánh. Toán hạng có thể thuộc là số, chuỗi, logic, hoặc object.
Chuỗi được so sánh theo thứ tự từ điển, qua giá trị mã Unicode. Trong nhiều trường
hợp, nếu hai toán hạng không cùng kiểu, JavaScript sẽ tự động ép kiểu sao cho phù
hợp. Hành vi này thường xảy ra khi so sánh dữ liệu kiểu số. Duy có hai toán tử so
sánh, bao gồm === và !==, không tự động ép kiểu mà sẽ so sánh bằng chính xác. Bảng
sau mô tả các toán tử so sánh bao gồm cả code mẫu:
var var1 = 3;
var var2 = 4;
Toán tử so sánh
Ví dụ trả
Toán tử Mô tả
về true
3 == var1
Bằng (==) Trả về true nếu các toán hạng bằng nhau. "3" == var1
3 == '3'
var1 != 4
Không bằng (!=) Trả về true nếu các toán hạng không bằng nhau.
var2 != "3"
Trả về true nếu các toán hạng bằng nhau và

Bằng chính
cùng kiểu. Xem thêm tại Object.is và sameness 3 === var1
xác (===)
in JS.
Không bằng chính Trả về true nếu các toán hạng không bằng nhau, var1 !== "3"
xác(!==) hoặc khác kiểu. 3 !== '3'
37
Trả về true nếu toán hạng bên trái lớn hơn toán var2 > var1
Lớn hơn (>)
hạng bên phải. "12" > 2
Lớn hơn hoặc Trả về true nếu toán hạng bên trái lớn hơn hoặc var2 >= var1
bằng (>=) bằng toán hạng bên phải. var1 >= 3
Trả về true nếu toán hạng bên trái nhỏ hơn toán var1 < var2
Nhỏ hơn (<)
hạng bên phải. "2" < 12
Nhỏ hơn hoặc Trả về true nếu toán hạng bên trái ?nhỏ hơn var1 <= var2
bằng (<=) hoặc bằng toán hạng bên phải. var2 <= 5
Lưu ý: (=>) không phải là toán tử, mà là cú pháp của Hàm mũi tên.
2.1.4. Toán tử số học

Toán tử số học nhận giá trị kiểu số (cả literal lẫn biến) là toán hạng của nó và
trả về một giá trị kiểu số. Các toán tử số học thông thường là toán tử cộng (+), trừ (-
), nhân (*), và chia (/). Những toán tử này hoạt động tương tự như trong các ngôn
ngữ lập trình khác khi xử lý với số thực dấu phẩy động (nói chung, ?phép chia cho 0
sẽ trả về Infinity). Ví dụ:
1 / 2; // 0.5
1 / 2 == 1.0 / 2.0; // this is true
Ngoài những toán tử số học thông thường (+, -, * /), JavaScript cung cấp thêm
các toán tử số học được liệt kê trong bảng sau:
Toán tử số học
Toán tử Mô tả Ví dụ
Chia lấy Toán tử hai ngôi. Trả về phần nguyên trong phép 12 % 5 trả về 2.
dư (%) chia của hai toán hạng.
Tăng(++) Toán tử một ngôi. Cộng thêm một đơn vị cho toán Nếu x bằng 3, rồi ++x sẽ
hạng. Nếu dùng như tiền tố (++x), trả về giá trị sau thiết lập giá trị của x lên 4
khi cộng thêm một; nếu dùng như hậu tố (x++), trả và trả về 4, trong
về giá trị trước khi cộng thêm một. khi x++ trả về 3 và sau đó
38
Toán tử số học
Toán tử Mô tả Ví dụ
mới thiết lập giá trị

của x lên 4.
Giảm (--) Toán tử một ngôi. Trừ đi một đơn vị cho toán hạng. Nếu x bằng 3, rồi --x sẽ
Giá trị trả về tương tự như toán tử tăng. thiết lập giá trị của x về 2
và trả về 2, trong khi x-
- trả về 3 và sau đó mới
thiết lập giá trị của x về 2.
Phủ định một Toán tử một ngôi. Trả về giá trị phủ định của toán Nếu x bằng 3, thì -x trả về
ngôi(-) hạng. -3.
Cộng một Toán tử một ngôi. Ép kiểu toán hạng về dạng số học, +"3" trả về 3.
ngôi(+) nếu kiểu của toán hạng đó không phải là số. +true trả về 1.
Toán tử luỹ Tính toán giá trị cơ số theo luỹ thừa số mũ, tức 2 ** 3 trả về 8.
số mũ
thừa(**) là, cơ số 10 ** -1 trả về 0.1.
2.1.5. Toán tử thao tác bit

Toán tử thao tác bit coi toán hạng của nó là một tập 32 bit (gồm 0 và 1), thay vì
là kiểu thập phân, thập lục phân, hay bát phân. Chẳng hạn, số thập phân 9 được biểu
diễn trong hệ nhị phân là 1001. Toán tử thao tác bit xử lý phép toán dựa theo dạng
biểu diễn nhị phân ấy, nhưng trả về giá trị kiểu số thông thường trong JavaScript.
Bảng tóm tắt các toán tử thao tác bit của JavaScript.
39
2.1.6. Toán tử logic
Toán tử logic thường được dùng với giá trị Boolean (kiểu logic); khi đó, chúng
trả về giá trị Boolean. Tuy nhiên, toán tử && và || thực tế trả về giá trị của một trong
những toán hạng xác định, nên nếu hai toán tử này được dùng với giá trị không phải
kiểu Boolean, chúng có thể trả về một giá trị không phải Boolean. Toán tử logic được
mô tả trong bảng dưới.
Ví dụ về các biểu thức có thể biến đổi thành false là những biểu thức khi thực
thi trả về null, 0, NaN, chuỗi rỗng (""), hoặc undefined.
Sau đây là các ví dụ cho toán tử && (logical AND).
40
Sau đây là các ví dụ cho toán tử || (logical OR).
var o1 = true || true; // t || t trả về true

var o2 = false || true; // f || t trả về true
var o3 = true || false; // t || f trả về true
var o4 = false || (3 == 4); // f || f trả về false
var o5 = 'Cat' || 'Dog'; // t || t trả về Cat
var o6 = false || 'Cat'; // f || t trả về Cat
var o7 = 'Cat' || false; // t || f trả về Cat
Sau đây là các ví dụ cho toán tử ! (logical NOT).
var n1 = !true; // !t trả về false

var n2 = !false; // !f trả về true
var n3 = !'Cat'; // !t trả về false
2.1.7. Thực thi đoản-mạch

Vì các biểu thức logic được thực thi từ trái sang phải, ta có thể dùng chúng để
thử tính "đoán-mạch" qua các quy định sau:
• false && bất cứ gì là thực thi đoản-mạch ra false.
• true || bất cứ gì là thực thi đoản-mạch ra true.
Quy định logic đảm bảo rằng các thực thi trên luôn đúng. Chú ý phần bất cứ
gì trong các biểu thức trên không được thực thi, bởi vậy sẽ không xảy ra bất cứ tác
dụng phụ nào.
2.1.8. Toán tử chuỗi

Ngoài toán tử so sánh, có thể dùng để so sánh chuỗi, toán tử ghép (+) ghép
hai giá trị chuỗi lại với nhau, trả về một chuỗi mới là hợp của hai chuỗi cũ.
Chẳng hạn,
console.log('my ' + 'string'); // console logs the string "my string".
Toán tử gán rút gọn += cũng có thể dùng để ghép chuỗi.

Chẳng hạn,
var mystring = 'alpha';

mystring += 'bet'; // "alphabet" sẽ ghép với giá trị này trước khi gán
vào mystring.
2.1.9. Toán tử điều kiện (ba ngôi)

Toán tử điều kiện là toán tử duy nhất của JavaScript cần tới ba toán hạng. Kết
quả có thể là một trong hai giá trị tuỳ theo điều kiện. Cú pháp:
41
điều_kiện ? giá_trị_1 : giá_trị_2
Nếu điều_kiện trả về true, toán tử có giá trị giá_trị_1. Ngược lại toán tử có giá
trị giá_trị_2. Bạn có thể dùng toán tử điều kiện ở bất cứ đâu như một toán tử bình
thường.
Chẳng hạn,
var status = (age >= 18) ? 'adult' : 'minor';
Đoạn code này gán giá trị "adult" cho biến status nếu age lớn hơn hoặc bằng
18. Ngược lại, nó gán giá trị "minor" cho status.
2.1.10. Toán tử dấu phẩy
Toán tử dấu phẩy (,) đơn thuần tính toán cả hai giá trị toán hạng của nó và trả
về giá trị của toán hạng cuối. Toán tử này được dùng chủ yếu trong vòng lặp for, để
cho phép cập nhật nhiều biến cùng lúc sau mỗi lần thực hiện vòng lặp.
Chẳng hạn, nếu a là một mảng 2-chiều với 10 phần tử mỗi chiều, đoạn code sau
dùng toán tử dấu phẩy để cập nhật hai biến cùng một lúc. Console in ra giá trị của các
phần tử nằm trong đường chéo:
2.1.11. Toán tử một ngôi
Toán tử một ngôi là phép toán chỉ có duy nhất một toán hạng.
var x = [0,1,2,3,4,5,6,7,8,9]
var a = [x, x, x, x, x];
for (var i = 0, j = 9; i <= j; i++, j--)

console.log('a[' + i + '][' + j + ']= ' + a[i][j]);
2.1.12. delete
Toán tử delete xoá một object, một thuộc tính của object, hoặc một phần tử ở
chỉ mục xác định trong mảng. Cú pháp là:
delete objectName;
delete objectName.property;
delete objectName[index];
delete property; // chỉ được khi cài trong lệnh with
Với objectName là tên của object, property là thuộc tính đang tồn tại, và index là
giá trị nguyên của chỉ mục tương ứng với vị trí của thuộc tính trong mảng.
Dạng thứ tư chỉ hoạt động khi được cài trong lệnh with, để xoá một thuộc tính
khỏi object.
42
Bạn có thể dùng toán tử delete để xoá biến được khởi tạo ngầm nhưng không
thể xoá được các biến được khởi tạo bằng lệnh var.
Nếu toán tử delete thành công, nó đặt thuộc tính hoặc phần tử đó
thành undefined. Toán tử delete trả về true nếu phép toán khả thi; nó trả về false nếu
phép toán bất khả thi.
x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4; // tạo thuộc tính h
delete x; // trả về true (có thể xoá nếu khởi tạo ngầm)
delete y; // trả về false (không thể xoá nếu khởi tạo bằng var)
delete Math.PI; // trả về false (không thể xoá thuộc tính tiền định
nghĩa)
delete myobj.h; // trả về true (có thể xoá thuộc tính người dùng định
nghĩa)
delete myobj; // trả về true (có thể xoá nếu khợi tạo ngầm)
a) Xoá phần tử mảng

Khi bạn xoá một phần tử của mảng, chiều dài mảng không bị ảnh hưởng. Chẳng
hạn, nếu bạn xoá a[3], a[4] vẫn là a[4] và a[3] là undefined.
Khi toán tử delete loại bỏ một phần tử khỏi mảng, phần tử đó không còn tồn tại
trong mảng. Trong ví dụ sau, trees[3] đã được loại bỏ bởi delete. Tuy
nhiên, trees[3] vẫn có thể được trỏ tới và trả về undefined.
var trees = ['redwood', 'bay', 'cedar', 'oak', 'maple'];

delete trees[3];
if (3 in trees) {
// sẽ không chạy vào đây
}
Nếu bạn muốn kiểm tra sự tồn tại của một phần tử trong mảng nhưng có giá
trị là undefined, hãy dùng từ khoá undefined thay cho toán tử delete. Trong ví dụ tiếp
sau đây, trees[3]được gán giá trị undefined, nhưng phần tử của mảng vẫn tồn tại:

trees[3] = undefined;
if (3 in trees) {
// sẽ chạy vào đây
}
2.1.13. typeof
Toán tử typeof có thể dùng theo cả hai cách dưới đây:
43
typeof operand
typeof (operand)
Toán tử typeof trả về một chuỗi ký tự thể hiện kiểu của toán hạng. operand có
thể là chuỗi ký tự, biến, từ khoá, hoặc object cần xác định kiểu. Không bắt buộc phải
thêm dấu ngoặc tròn.
Giả sử bạn có các biến sau:
var myFun = new Function('5 + 2');

var shape = 'round';
var size = 1;
var foo = ['Apple', 'Mango', 'Orange'];
var today = new Date();
Toán tử typeof trả về kết quả lần lượt cho từng biến:
typeof myFun; // trả về "function"

typeof shape; // trả về "string"
typeof size; // trả về "number"
typeof foo; // trả về "object"
typeof today; // trả về "object"
typeof doesntExist; // trả về "undefined"
Với từ khoá true và null, toán tử typeof trả về kết quả sau:
typeof true; // trả về "boolean"

typeof null; // trả về "object"
Với số hoặc chuỗi ký tự, toán tử typeof trả về kết quả sau:
typeof 62; // trả về "number"

typeof 'Hello world'; // trả về "string"
Với giá trị thuộc tính, toán tử typeof trả về kiểu dữ liệu mà thuộc tính đó bao
hàm:
44
typeof document.lastModified; // trả về "string"
typeof window.length; // trả về "number"
typeof Math.LN2; // trả về "number"
Với phương thức hoặc hàm, toán tử typeof trả về kết quả như sau:
typeof blur; // trả về "function"

typeof eval; // trả về "function"
typeof parseInt; // trả về "function"
typeof shape.split; // trả về "function"
Với các object tiền định nghĩa, toán tử typeof trả về kết quả như sau:
typeof Date; // trả về "function"

typeof Function; // trả về "function"
typeof Math; // trả về "object"
typeof Option; // trả về "function"
typeof String; // trả về "function"
2.1.14. void
Toán tử void operator có thể dùng theo cả hai cách dưới đây:
void (expression)
void expression
Toán tử void xác định biểu thực cần thực hiện mà không trả về giá trị
nào. expression là một biểu thức JavaScript cần thực hiện. Dấu ngoặc tròn bao quanh
expression là không bắt buộc, nhưng sẽ rất phong cách nếu dùng chúng.
Bạn có thể dùng toán tử void để xác định biểu thức cần thực thi trong một siêu
liên kết. Biểu thức sẽ được thực hiện nhưng không văn bản hiện tại sẽ không tải lại
tại chỗ.
Đoạn code sau tạo ra một siêu liên kết không thực hiện bất cứ điều gì khi có
người dùng nhấn vào. Khi người dùng nhấn vào, void(0) thực hiện thành undefined,
vốn không có hiệu ứng gì trong JavaScript.
45
<a href="javascript:void(0)">Click here to do nothing</a>
Đoạn code sẽ tiến hành hoàn tất mẫu đơn khi người dùng bấm vào siêu liên kết.
<a href="javascript:void(document.form.submit())">
Click here to submit</a>
2.1.15. Toán tử quan hệ

Toán tử quan hệ so sánh các toán hạng của nó và trả về giá trị Boolean tuỳ thuộc
phép so sánh có true hay không.
a) in
Toán tử in trả về true nếu thuộc tính nhất định có trong object nhất định. Cú pháp
là:
propNameOrNumber in objectName
với propNameOrNumber là chuỗi ký tự hoặc số đại diện cho tên của thuộc tính hoặc chỉ
mục mảng, và objectName là tên của object.
Các ví dụ dưới đây chỉ ra vài cách dùng toán tử in.
// Arrays
0 in trees; // trả về true
3 in trees; // trả về true
6 in trees; // trả về false
'bay' in trees; // trả về false (bạn phải xác định được chỉ mục của
mảng,
// không phải giá trị tại vị trí chỉ mục đó)
'length' in trees; // trả về true (length là một thuộc tính của Array)
// object dựng sẵn

'PI' in Math; // trả về true
var myString = new String('coral');
'length' in myString; // trả về true
// object tự tạo
var mycar = { make: 'Honda', model: 'Accord', year: 1998 };
'make' in mycar; // trả về true
'model' in mycar; // trả về true
b) instanceof
Toán tử instanceof trả về true nếu một object nhất định có kiểu của object nhất định.
Cú pháp là:
objectName instanceof objectType
46
với objectName là tên của object để so sánh với objectType, và objectType là kiểu của
object, như là Date hay Array.
Dùng instanceof khi bạn cần xác nhận kiểu của một object trong runtime (thời gian
chạy). Chẳng hạn, khi bắt ngoại lệ, bạn có thể tìm tới từng ngoại lệ riêng biện tuỳ
thuộc vào kiểu ngoại lệ được quăng (throw) ra.
Chẳng hạn, đoạn code dưới đây dùng instanceof để xác định xem liệu theDay có phải
là một Date object hay không. Bởi vì theDay là một Date object, các lệnh trong sau điều
kiện if được thực thi.
var theDay = new Date(1995, 12, 17);

if (theDay instanceof Date) {
// lệnh sẽ được thực thi
}
2.1.16. Thứ tự thực hiện toán tử

Thứ tự thực hiện của toán tử xác định thứ tự thực hiện trong một biểu thức.
Bạn có thể vượt quyền ưu tiên bằng cách dùng dấu ngoặc tròn.
Bảng sau chỉ ra thứ tự thực hiện toán tử, từ cao nhất tới thấp nhất.
47
Bảng thứ tự thực hiện chi tiết hơn có thể tìm được trong JavaScript Reference.
2.2. Biểu thức

Biểu thức là đơn vị code hợp lệ mà giải được ra một giá trị.
Mọi biểu thức đúng cú pháp đều trả về vài giá trị nào đó nhưng về mặt lý thuyết,
có hai kiểu biểu thức: kèm tác dụng phụ (chẳng hạn: những biểu thức gán giá trị cho
biến nào đó) và những biểu thức thực hiện gì đấy rồi trả về giá trị.
Biểu thức x = 7 là ví dụ cho kiểu thứ nhất. Biểu thức này dùng toán tử = để gán
giá trị cho biến x. Tự biểu thức trả về 7.
Đoạn code 3 + 4 là ví dụ cho kiểu biểu thức thứ hai. Biểu thức này dùng toán tử
+ để thêm bốn vào ba mà không gán kết quả, bảy, cho một biến nào.
JavaScript có các loại biểu thức sau đây:
48
Số học: tính toán thành một số, chẳng hạn 3.14159. (Thường dùng với toán tử số
học.)
Chuỗi ký tự: tính toán thành một chuỗi ký tự, chẳng hạn, "Fred" hoặc "234".
(Thường dùng với toán tử chuỗi.)
Logic: tính toán thành true hoặc false. (Thường đi cùng với toán tử logic.)
Biểu thức nguyên thuỷ: Từ khoá căn bản và biểu thức chung trong JavaScript.
Biểu thức vế-trái: Giá trị bên trái là đích của phép gán.
2.2.1. Biểu thức nguyên thuỷ
Từ khoá căn bản và biểu thức chung trong JavaScript.
2.2.2. this
Dùng từ khoá this để trỏ đến object hiện tại. Tổng quát, this trỏ tới object đang
gọi trong một phương thức. Có thể dùng this cùng với dấu chấm hoặc dấu ngoặc
vuông:
this['propertyName']
this.propertyName
Giả sử hàm validate xác thực thuộc tính value của object, truyền vào cận trên
và cận dưới của nó:
function validate(obj, lowval, hival) {

if ((obj.value < lowval) || (obj.value > hival))
console.log('Invalid Value!');
}
Bạn có thể gọi validate trong mỗi bộ xử lý sự kiện onChange trong form,
dùng this để truyền vào phần tử của form, như trong ví dụ sau:
<p>Enter a number between 18 and 99:</p>

<input type="text" name="age" size=3 onChange="validate(this,
18, 99);">
2.2.3. Toán tử nhóm

Toán tử nhóm ( ) kiểm soát thứ tự thực hiện trong biểu thức. Chẳng hạn, bạn
có thể cho phép nhân và chia thực hiện sau khi cộng và trừ.
49
var a = 1;
var b = 2;
var c = 3;
// thứ tự mặc định

a + b * c // 7
// mặc định sẽ thực hiện như thế này
a + (b * c) // 7
// giờ vượt thứ tự nào

// cộng trước rồi mới nhân
(a + b) * c // 9
// tương tự như
a * c + b * c // 9
2.2.4. Toán tử vế-trái

Giá trị bên trái là đích của phép gán.
2.2.5. new
Bạn có thể dùng toán tử new để tạo ra một instance thuộc kiểu object mà người-
dùng-định-nghĩa hoặc một trong những kiểu object dựng-sẵn. Dùng new như sau:
var objectName = new objectType([param1, param2, ..., paramN]);
2.2.6. super
Từ khoá super được dùng để gọi hàm thuộc cha của object. Thường
dùng bởi classes để gọi phương thức khởi tạo của lớp cha, chẳng hạn.
super([arguments]); // gọi phương thức khởi tạo của lớp cha.
super.functionOnParent([arguments]);
2.2.7. Toán tử Spread
Toán tử spread cho phép biểu thức mở rộng tại chỗ khi có nhiều tham số (khi
gọi hàm) hoặc nhiều phần tử (với array literal).
Ví dụ: Nếu bạn có một mảng và muốn tạo một mảng mới với mảng cũ là một
thành phần trong nó, cú pháp của array literal không bao giờ là đủ và bạn bắt buộc
phải code chay, dùng tổ hợp push, splice, concat, vân vân. Với cú pháp spread, việc
này súc tích hơn hẳn:
var parts = ['shoulders', 'knees'];

var lyrics = ['head', ...parts, 'and', 'toes'];
50
Tương tự, toán tử spread cũng hoạt động với lời gọi hàm:
function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);
3. Cấu trúc điều khiển

3.1. If
Cú Pháp:
Trong đó: condition là một hoặc nhiều mệnh đề điều kiện có giá trị trả về
TRUE/FALSE.
VD:
3.1.1. Câu lệnh else.
-Như ở phía trên mình có nói câu lệnh if thực hiện khi mệnh đề đi kèm nó đúng,
và mệnh đề else sẽ thực hiện khi điều kiện của mệnh đề if không thỏa mãn.
Cú Pháp:
VD:
51
3.1.2. Kết hợp else if.
-Có đôi khi bạn muốn xử lý đa nhánh như làm bài toán phân loại học lực thì lúc
này bạn lên dùng else if để xử lý các điều kiện khác với if.
VD:
var diem = 5;
if (diem < 4) {
document.write('Học Lại');
} else if (diem >= 4 && diem < 5.5) {
document.write(' Loại D');
} else if (diem >= 5.5 && diem < 7) {
document.write('Loai C');
} else if (diem >= 7 && diem < 8.5) {
document.write('Loại B');
} else if (diem >= 8.5 && diem <= 10) {
document.write('Loai A');
} else {
document.write('Điểm không hợp lệ');
}
3.1.3. if-else lồng nhau.
-Cũng giống như bài toán ở phần 3 thì chúng ta có thể sử dụng if-else lồng nhau
được.
VD:
var diem = 5;
52
if (diem < 4) {
document.write('Học Lại');
} else {
if (diem >= 4 && diem < 5.5) {
document.write(' Loại D');
} else {
if (diem >= 5.5 && diem < 7) {
document.write('Loai C');
} else {
if (diem >= 7 && diem < 8.5) {
document.write('Loại B');
} else {
if (diem >= 8.5 && diem <= 10) {
document.write('Loai A');
} else {
document.write('Điểm không hợp lệ');
}
}
}
}
}
3.1.4. if-else rút gọn.
-Chúng ta cũng có thể rút gọn câu lệnh if-else với cú pháp như sau:
(dieukien) ? (đúng) : (sai)
Trong đó: Điều kiện là các biểu thức, mệnh đề trả về giá trị true false.
VD:
var diem = 5;
diem == 5 ? document.write('Điểm Bằng 5') : document.write('Diểm
khác 5');
53
3.2. Switch case.
-Đây là một loại câu lệnh rẽ nhánh( hay còn gọi là câu lệnh điều kiện) có đặc
điểm là để giải quyết các bài toán mà có các nhánh là các điều kiện cố định.
Cú Pháp:
switch (condition) {
case value1:
//code
break;
case value2:
//code
break;
default:
//code
break;
}
Trong đó:
• condition là biến muốn kiểm tra để dẽ nhánh.

• value1,value2,.. là các giá trị tương ứng của condition mà các bạn muốn rẽ
nhánh.
• default là giá trị khác đối với tất cả các value trên(giống với else).
• break.
• VD: Đọc số trong phạm vi từ 0 đến 5.
var so = 5;
switch (so) {
case 0:
document.write('không');
break;
case 1:
document.write('Một');
break;
case 2:
document.write('Hai');
break;
case 3:
54
document.write('Ba');
break;
case 4:
document.write('Bốn');
break;
case 5:
document.write('Năm');
break;
default:
document.write('Không thỏa mãn');
break;
}
3.3. Vòng lặp

Vòng lặp, hay còn gọi là looping là kĩ thuật rất quan trọng trong lập trình
Javascript. Khi lập trình Javascript, bạn sẽ không thể tránh khỏi làm việc với mảng
các phần tử hay thậm chí mảng của mảng.
Do đó, nếu nắm vững kiến thức về vòng lặp Javascript, bạn sẽ làm việc hiệu
quả và có nhiều lựa chọn hơn khi cần sử dụng đến vòng lặp. Ở bài viết này, mình sẽ
đi qua các cách tạo vòng lặp Javascript thường được sử dụng.
3.3.1. For và While cơ bản
Đối với Javascript cơ bản, có 2 cách để tạo vòng lặp: vòng lặp for và vòng lặp
while. Cả 2 đều bao gồm 2 thành phần: điều kiện để duy trì vòng lặp, và thân vòng
lặp chứa các thao tác sẽ được lặp. Khi điều kiện để duy trì không còn đúng đắn
nữa, vòng lặp sẽ kết thúc.
1. // Khởi tạo 1 mảng gồm 3 phần tử ban đầu
55
2. var arr = [1, 2, 3];
3.
4. // Khởi tạo 1 biến để lưu giữ chiều dài mảng
5. var arrLen = arr.length;
6.
7. var i;
8. // Vòng lặp For thuận - lặp từ đầu mảng xuống cuối mảng
9. for (i=0; i < arrLen; ++i) {
10. // Thân vòng lặp
11. alert(arr[i]);
12. }
13.
14. // Vòng lặp For thuận - lặp từ cuối mảng lên đầu mảng
15. for (i=arrLen; i >= 0; --i) {
17. alert(arr[i]);
18. }
19.
20. // Vòng lặp While thuận - lặp từ đầu mảng xuống cuối mảng
21. i = 0;
22. while (i < arrLen) {
24. alert(arr[i]);
25. ++i;
26. }
27.
28. // Vòng lặp While ngược - lặp từ cuối mảng lên đầu mảng
29. i = arrLen;
30. while (i >= 0) {
32. alert(arr[i]);
33. --i;
34. }
3.3.2. Vòng lặp For..in

Vòng lặp For..in tương tự như vòng lặp For cơ bản, nhưng có 1 điểm quan trọng
là For..in có thể được dùng cho 1 biến kiểu đối tượng.
56
1. // Vòng lặp for..in cho 1 Mảng
2. var arr = ['JS', 'loop', 'for..in'];
3. for (var i in arr) {
5. console.log(arr[i]);
6. }
7.
8. // Vòng lặp for..in cho 1 Object
9. var obj = {
10. 'name': 'test object',
11. 'type': 'test',
12. 'id': 12888
13. };
14. for (var i in obj) {
16. console.log(obj[i]);
17. }
3.3.3. Vòng lặp Do … while

Ở vòng lặp While, biểu thức so sánh sẽ được đánh giá trước. Nếu như biểu thức
đúng thì khối lệnh bên trong mới được thực hiện. Do..while hoạt động khác với While
ở 1 điểm: khối lệnh sẽ được chạy trước biểu thức so sánh.
57
1. var arr = ['JS', 'Loop', 'Do..while'];
2. var arrLen = arr.length;
3. var i = 0;
4. do {
5. console.log(arr[i]);
6. ++i;
7. }
8. while (i < arrLen);
9.
10. // Ví dụ thêm khi i = 3 (do đó i < arrLen sẽ trả về false)
11. // Với Do..while: bạn sẽ thấy "Lúc này i = 3"
12. do {
13. console.log('Lúc này i = ' + i);
14. }
15. while (i < arrLen);
16.
17. // Với While: sẽ không có gì hiện lên
18. while (i < arrLen) {
19. console.log('Lúc này i = ' + i);
20. }
3.3.4. Vòng lặp forEach

forEach mới xuất hiện trong những phiên bản Javascript gần đây cho các trình
duyệt hiện đại, giúp tạo vòng lặp với mảng nhanh hơn.
58
1. ar arr = ['JS', 'Loop', 'forEach'];
2.
3. arr.forEach(function(value) {
4. console.log(value);
5. });
3.3.5. Vòng lặp với jQuery

Đây có lẽ là thao tác quen thuộc đối với những bạn hay dùng jQuery.
jQuery.each() khá tiện về cú pháp, và có thể thao tác cả với mảng và đối tượng.
1. var arr = ['JS', 'Loop', 'forEach'];
2.
3. $.each(arr, function(key, value) {
4. console.log(key + ' - ' + value);
5. });
59
3.3.6. Lưu ý khi sử dụng vòng lặp Javascript
1. Khi sử dụng vòng lặp, nếu sơ ý sẽ dễ gây tốn tài nguyên không cần thiết, làm
cho cả ứng dụng hay website cũng ì ạch theo, thậm chí tệ nhất là lặp đến vô
hạn vì điều kiện dừng không đảm bảo.
2. Mỗi loại vòng lặp sẽ có ưu và nhược điểm riêng, do đó hãy xem xét lại tổ chức
code và nhu cầu của bạn để quyết định kĩ.
3. Tốc độ xử lý của các loại vòng lặp Javascript là khác nhau, trong đó nhanh
nhất là vòng lặp While và chậm nhất là For..in. Bạn có thể xem thêm đồ thị
thống kê ở bên dưới hoặc chạy trực tiếp ở đây:
4. Hàm

4.1. Định nghĩa hàm
Từ bài 1 tới giờ ta đang code từng đoạn code riêng lẻ và khi cần thì code lại,
như vậy giả sử ta cần xử lý vấn đề đó trong 1000 trường hợp thì ta phải code lại 1000
lần nên rất tốn thời gian, chính vì vậy người ta nghĩ ngay đến hàm, hàm sẽ gom một
số đoạn code vào một khối xử lý và khi cần thì gọi ra dùng.
Giả sử mình viết chương trình kiểm tra số chẵn hay lẻ như sau:
60
Giả sử mình cần kiểm tra cho 100 số, như vậy mình cứ viết if else cho 100 lần
quá nản phải không nào :D. Để giải quyết nó ta tìm hiểu hàm đã nhé.
Cú pháp:
Trong đó:
o function: là từ khóa của javascript nên bắt buộc phải như vậy
o name_of_function: là tên của function, thông thường chúng ta tạo những
tên có ý nghĩa như find_max, find_min, ...
o var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm
tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra.
Ví dụ: Viết hàm kiểm tra một số chẵn hay lẻ.
1. // Tạo hàm
2. function check_number(number)
3. {
4. if (number % 2 == 0){
5. alert(number + ' là số chẵn');
6. }
7. else {
8. alert(number + 'Số lẻ');
9. }
10. }
11.
12. // Sử dụng hàm kiểm tra cho 5 số
13. check_number(1);
61
Các bạn thấy mình đã tạo một hàm với tham số truyền vào có tên là number.
Như vậy khi sử dụng nếu ta truyền số 1 vào thì lúc này biến number trong hàm sẽ có
giá trị là 1, tương tự cho 2, 3,4,5.
4.2. Hàm có return và hàm không có return
Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích
trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài. Ví dụ ta cần viết một
hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b.
Xem ví dụ sau:
1. // Khai báo hàm
2. function tinh_tong(a, b)
3. {
4. // trả về kết quả là a + b
5. return a + b;
6. }
7.
8. // Sử dụng
9. var so1 = 1;
10. var so2 = 2;
11.
12. // truyền so1 và so2 vào hàm
13. var ketqua = tinh_tong(so1, so2);
14.
15. alert(ketqua);
Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví
dụ viết chương trình in ra tổng của hai số a và b.
1. // Khai báo hàm
2. function tinh_tong(a, b)
3. {
4. document.write('Tổng là ' + (a + b));
5. }
6.
7. // Sử dụng
8. var so1 = 1;
9. var so2 = 2;
10.
11. // truyền so1 và so2 vào hàm
62
12. tinh_tong(so1, so2);
Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng
thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp,
như ở ví dụ trên đó là mình lấy kết quả để in thông báo.
4.3. Giá trị mặc định của tham số
Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc
không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số
mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó
chúng ta sử dụng toán tử ||.
Ví dụ: Hàm hiển thị một thông báo.
1. function showMessage(message)
2. {
3. // Nếu message không được truyền vào hoặc giá trị nó là rỗng
4. // thì sẽ được thay thế bằng giá trị 'Không có tin nhắn'
5. message = message || 'Không có tin nhắn <br/>';
6. document.write(message);
7. }
8.
9. // Cách 1: không truyền tham số
10. showMessage();
11.
12. // Cách 2: Truyền tham số
13. showMessage('Chào mừng bạn đến với freetuts.net');
Toán tử || gồm hai vế, trong đó nếu vế phải có giá trị rỗng (undefined, null, false,
...) kết quả sẽ trả về vế trái, ngược lại nó sẽ trả về vế phải.
4.4. Một số ví dụ tạo hàm trong javascript
Ví dụ 1: Viết chương trình kiểm tra một năm có phải là năm nhuận hay không
Năm nhuận là năm chia hết cho 4, nếu chia hết cho 100 thì nó phải chia hết cho
400. Đây là định nghĩa năm nhuận còn chính xác hay không thì mình không biết nhé
:D vì có trường hợp nó sai.
1. // khai báo hàm
2. function kiem_tra_nam_nhuan(nam)
3. {
4. // nếu năm chia hết cho 100
5. // thì kiểm tra nó có chia hết cho 400 hay không
6. if (nam % 100 == 0)
7. {
63
8. // nêu chia hết cho 400 thì là năm nhuận
9. if (nam % 400 == 0){
10. alert(nam + ' là năm nhuận');
11. }
12. else { // ngược lại không phải năm nhuận
13. alert(nam + ' không phải năm nhuận');
14. }
15. }
16. else if (nam % 4 == 0){ // trường hợp chia hết cho 4 thì là năm nhuận
17. alert(nam + ' là năm nhuận');
18. }
19. else { // cuối cùng trường hợp không phải năm nhuận
20. alert(nam + 'không phải là năm nhuận');
21. }
22. }
23. // sử dụng
24. kiem_tra_nam_nhuan(4);
Ví dụ 2: thực hiện lại ví dụ trên nhưng sử dụng return để trả kết quả về, nếu true
thì là năm nhuận, false thì không phải năm nhuận.
1. // khai báo hàm
2. function kiem_tra_nam_nhuan(nam)
3. {
4. // nếu năm chia hết cho 100
5. // thì kiểm tra nó có chia hết cho 400 hay không
6. if (nam % 100 == 0)
7. {
8. // nêu chia hết cho 400 thì là năm nhuận
9. if (nam % 400 == 0){
10. return true;
11. }
12. else { // ngược lại không phải năm nhuận
13. return false;
14. }
15. }
16. else if (nam % 4 == 0){ // trường hợp chia hết cho 4 thì là năm nhuận
17. return true;
18. }
19. else { // cuối cùng trường hợp không phải năm nhuận
20. return false;
64
21. }
22. }
23. // sử dụng
24. var flag = kiem_tra_nam_nhuan(4);
25.
26. if (flag){
27. alert('là năm nhuận');
28. }
29. else {
30. alert('không phải là năm nhuận');
31. }
5. Xử lý sự kiện

Về định nghĩa dưới dạng nghe hiểu thì sự kiện là một hành động nào đó tác
động lên đối tượng HTML mà ta có thể bắt được sự kiện này và thực hiện những hành
động nào đó.
Mỗi sự kiện chúng ta có thể có nhiều hành động. Ví dụ bạn có một sự kiện là tết
âm lịchthì bạn sẽ có những hành động trong sự kiện đó là mua đồ mới, dọn dẹp nhà
cửa, mua bao lì xì, ..
Xét về mặt thực tế thì ta có dụ thế này: Giả sử bạn xây dựng một form đăng ký
tài khoản và bạn muốn bắt sự kiện khi người dùng CLICK vào button đăng ký thì
hiện những hành động như validate dữ liệu, thông báo nếu người dùng nhập nội dung
không đúng, .. Như vậy bạn cần nhớ rằng mỗi sự kiện chúng ta có thể thực hiện nhiều
hành động khác nhau và bao nhiêu hành động thì phụ thuộc vào từng chức năng cụ
thể.
5.1. Các sự kiện (Events) trong javascrpt
Sau khái niệm sự kiện là gì thì chắc hẳn bạn đang nôn nóng muốn biết sự kiện
trong javascript là gì rồi nhỉ? Ok ta bắt đầu ngay luôn.
Có rất nhiều sự kiện và mỗi đối tượng HTML thì lại có những sự kiện khác nhau
nên mình chỉ liệt kê được những sự kiện thông dụng hay sử dụng khi các bạn làm
việc với javascript để lập trình phía client.
Bảng các sự kiện thông dụng trong javascript.
65
Event
STT Description
Name
1 onclick Xảy ra khi click vào thẻ HTML
2 ondbclick Xảy ra khi double click vào thẻ HTML
Xảy ra khi giá trị (value) của thẻ HTML đổi. Thường
3 onchange
dùng trong các đối thẻ form input
4 onmouseover Xảy ra khi con trỏ chuột bắt đầu đi vào thẻ HTML
5 onmouseout Xảy ra khi con trỏ chuột bắt đầu rời khỏi thẻ HTML
6 onmouseenter Tương tự như onmouseover
7 onmouseleave Tương tự như onmouseout
8 onmousemove Xảy ra khi con chuột di chuyển bên trong thẻ HTML
9 onkeydown Xảy ra khi gõ một phím bất kì vào ô input
Sảy ra khi thẻ HTML bắt đầu chạy, nó giống như hàm
10 onload
khởi tạotrong lập trình hướng đối tượng vậy đó.
Xảy ra khi bạn gõ phím nhưng lúc bạn nhã phím ra sẽ

11 onkeyup
được kích hoạt
12 onkeypress Xảy ra khi bạn nhấn môt phím vào ô input
14 onblur Xảy ra khi con trỏ chuột rời khỏi ô input
66
Event
STT Description
Name
15 oncopy Xảy ra khi bạn copy nội dung của thẻ
16 oncut Xảy ra khi bạn cắt nội dung của thẻ
17 onpaste Xảy ra khi bạn dán nội dung vào thẻ
Ok bây giờ ta sẽ làm một số ví dụ để các bạn thực hành nhé.

5.2. Các ví dụ về xử lý sự kiện trong javascript
Ví dụ 1: Viết chương trình gồm một ô input và một thẻ div dùng để hiển thị
nội dung (giá trị của ô input) khi người dùng gõ vào ô input
Vì đề bài yêu cầu khi nhập dữ liệu vào ô input thì hiển thị nội dung bên trong
thẻ DIV nên ta có thể sử dụng sự kiện onkeyup. Thứ hai nữa là chúng ta sẽ sử dụng
các hàm DOM Element để truy xuất các đối tượng HTML.
Bài giải:
1. <html>
2. <body>
3. <script language="javascript">
4. // Hàm show kết quả
5. function show_result()
6. {
7. // Lấy hai thẻ HTML
8. var input = document.getElementById("message");
9. var div = document.getElementById("result");
10.
11. // Gán nội dung ô input vào thẻ div
12. div.innerHTML = input.value;
13. }
14. </script>
15. <input type="text" id="message" value="" onkeyup="show_result()"/>
16. <div id="result"></div>
17. </body>
18. </html>
67
Nếu như bài này bạn sử dụng sự kiện onkeypress hoặc onkeydown thì sẽ có kết
quả sai, lý do là những sự kiện này xảy ra khi bạn nhấn phím xuống nên nó sẽ lấy giá
trị chưa được cập nhật. Còn sự kiện onkeyup xảy ra khi bạn nhả phím ra nên nó sẽ
lấy được giá trị mới.
Ví dụ 2: Viết chương trình khi người dùng copy nội dung của website thì thông
báo là bạn đã copy thành công
Bài này quá dễ phải không nào. Trong danh sách các sự kiện trên thì có sự kiện
oncopy nên ta sẽ sử dụng nó để giải bài này.
Bài giải:
1. <html>
2. <body>
4. // Hàm show kết quả
5. function show_message()
6. {
7. alert("Bạn đã copy thành công");
8. }
9. </script>
10. <h3>Hãy copy dòng chữ dưới đây:</h3>
11. <div oncopy="show_message()">Chào mừng các bạn đến với website freetuts.net</div
>
12. </body>
13. </html>
Ví dụ 3: Viết chương trình tính tổng của hai số nhập vào (tính tự động)
Bài này ta phải tạo 3 ô input và gán sự kiện onkeyup cho 2 ô input đầu tiên,
trong sự kiện này sẽ thực hiện tính tổng của hai ô và in kết quả vào ô input thứ 3.
Bài giải:
1. <html>
2. <body>
4. // Hàm tính kết quả
5. function tinh()
6. {
7. // Lấy 3 ô input
8. var a = document.getElementById("a");
9. var b = document.getElementById("b");
10. var result = document.getElementById("result");
11.
68
12. // Tính tổng hai ô đầu tiên
13. var tong = parseInt(a.value) + parseInt(b.value);
14.
15. // Gán giá trị vào ô thứ ba
16. // Phải kiểm tra tổng hai số này có bị lỗi hay không
17. if (!isNaN(tong)){
18. result.value = tong;
19. }
20. }
21. </script>
22. a: <input type="text" id="a" value="" onkeyup="tinh()"/>
23. b: <input type="text" id="b" value="" onkeyup="tinh()"/>
24. Kết quả: <input type="text" id="result" value=""/>
25. </body>
26. </html>
Lời kết
Làm việc với Javascript thì không thể quên khái niệm event được nên hãy học
chắc bài này nhé các bạn. Mình không thể đưa ra hết ví dụ cho các events được nên
bạn hãy tự ra bài tập cho mình và tự giải nhé. Riêng nội dung trong bài này mình có
sử dụng kiến thúc bài học cũ nên bạn rất dễ theo dõi, nếu quên thì hãy quay lại bài cũ
và đọc sư qua rồi thực hành ví dụ. Chúc bạn học javascript vui vẻ nhé!
69
BÀI TẬP BÀI 2
1. Viết chương trình giải phương trình bậc 2.
2. Viết chương trình cho hiện hộp thoại yêu cầu nhập vào một số. Nếu người dùng
nhập vào không phải là số thì xuất hiện hộp thoại yêu cầu người dùng nhập lại,
nếu đúng là số thì báo thành công.
3. Viết chương trình nhập vào ngày tháng năm. Kiểm tra ngày đó là ngày thứ bao
nhiêu trong năm. Ví dụ ngày 03/02/2019 là ngày thứ 34 trong năm. Chú ý phải
kiểm tra, nếu là năm nhuận thì tháng 2 có 29 ngày. Chức năng kiểm tra năm nhuận
nằm riêng trong một hàm.
70
BÀI 3: Mô hình BOM, DOM và CSS
Giới thiệu:
- Bài này giúp người học làm quen với các khái niệm về các mô hình BOM, DOM và
cách Javascript tương tác với CSS.
Mục tiêu:
- Phát biểu được cái khái niệm về BOM, DOM và CSS
- Viết và thực thi được chương trình truy cập vào các thành phần của BOM, DOM và
CSS.
- Có thể tự truy xuất vào được các thành phần BOM, DOM, CSS mà trong bài tập
chưa được hướng dẫn cụ thể.
Nội dung chính:
1. Mô hình đối tượng trình duyệt (BOM)

BOM là chữ viết tắt của Browser Object Model, hay còn gọi là các đối tượng
liên quan đến trình duyệt browser. Mỗi browser sẽ có những đối tượng khác nhau nên
nó không có một chuẩn chung nào cả, tuy nhiên để có tính thống nhất giữa các trình
duyệt thì người ta quy ước ra các loại BOM sau:
window
screen
location
history
navigator
popup
timing
cookies
Trong các đối tượng DOM trên có phân cấp lẫn nhau và trong đó window là cấp
cao nhất vì nó đại diện cho browser. Ví dụ khi bạn muốn truy cập tới document thì
bạn sẽ viêt là window.document, tuy nhiên vẫn có cách ghi tắt là document, muốn
truy cập tới cookie thì ta viết window.document.cookie (viết tắt document.cookie), ...
Đối tượng Window có rất nhiều thuộc tính và phương thức riêng. Ví dụ đối
tượng document là một thuộc tính của window (window.document), vì vậy nên ta có
71
thể ví Window là một đối tượng toàn cục và ở đâu trong website cũng có thể sử dụng
được. Bây giờ chúng ta sẽ tìm hiểu các thuộc tính và phương thức của đối tượng BOM
Window nhé.
VD: Để lấy kích thước chiều cao và chiều rộng của trình duyệt thì chúng ta sử
dụng đối tượng window, tuy nhiên với mỗi trình duyệt thì có những cách lấy khác
nhau.
Đối với Internet Explorer, Chrome, Firefox, Opera, và Safari thì cú pháp
như sau:
1. // lấy chiều cao
2. var heightBrowser = window.innerHeight;
3.
4. // lấy chiều rộng
5. var widthBrowser = window.innerWidth;
6.
7. document.write(widthBrowser+'x'+heightBrowser)
Đối với Internet Explorer các version 5,6,7,8 thì cú pháp như sau:
1. // Lấy chiều cao
2. var heightBrowser = document.documentElement.clientHeight;
3. // hoặc
4. var heightBrowser = document.body.clientHeight;
5.
6. // Lấy chiều rộng
7. var widthBrowser = document.documentElement.clientWidth;
8. // hoặc
9. var widthBrowser = document.body.clientWidth;
Việc tương thích với các trình duyệt quá rắc rối phải không nào? Vậy có cách
nào giải quyết vấn đề này không? Câu trả lời là có bằng cách sử dụng một mẹo nhỏ
như sau:
1. // Lấy chiều cao
2. var heightBrowser = window.innerHeight
72
3. || document.documentElement.clientHeight
4. || document.body.clientHeight;
5. // Lấy chiều rộng
6. var widthBrowser = window.innerWidth
7. || document.documentElement.clientWidth
8. || document.body.clientWidth;
9.
10. document.write(widthBrowser+'x'+heightBrowser)
BOM - Window Navigator trong Javascript

Đối tượng Window Navigator trong Javascript được dùng để kiểm tra các thông
tin về người dùng như trình duyệt đang sư dụng là gì? hệ điều hành đang sử dụng là
gì? Trình duyệt có bật Cookie hay không? hay thậm chí có thể kiểm tra được tên và
version của Browser.
1. document.write("Trình duyệt: <i>" + window.navigator.appCodeName + "</i><br>");
2. document.write("Phiên bản: <i>" + window.navigator.appVersion + "</i><br>");
3. document.write("Cookie: <i>" + window.navigator.cookieEnabled + "</i><br>");
4. document.write("Engine: <i>" + window.navigator.product + "</i><br>");
5. document.write("Hệ thống: <i>" + window.navigator.platform + "</i><br>");
6. document.write("Tác giả: <i>" + window.navigator.vendor + "</i><br>");
7. document.write("Ngôn ngữ: <i>" + window.navigator.language + "</i><br>");
2. Mô hình đối tượng tài liệu (DOM)

2.1. DOM là gì?
Javascript là một ngôn ngữ được sử dụng trong các trình duyệt Browser nên nó
đóng một vai trò khá quan trọng trong các ứng dụng website. Và nhiệm vụ của
Javascript là thao tác với các tài liệu HTML kết hợp với các cú pháp riêng của nó để
tạo nên sự ảo diệu của trang web.
Để thao tác được với các thẻ HTML thì nó phải thông qua một cơ chế ta gọi là
DOM và ta hay gọi là Document Object Model. Vậy thì DOM là gì thì chúng ta cùng
tì hiểu nó nhé.
DOM là viết tắt của chữ Document Object Model, dịch tạm ra là mô hình các
đối tượng trong tài liệu HTML. Như các bạn biết trong mỗi thẻ HTML sẽ có những
thuộc tính (Properties) và có phân cấp cha - con với các thẻ HTML khác. Sự phân
cấp và các thuộc tính của thẻ HTML này ta gọi là selector và trong DOM sẽ có nhiệm
vụ xử lý các vấn đề như đổi thuộc tính của thẻ, đổi cấu trúc HTML của thẻ, ...
73
1. document.getElementById('result').innerHTML = "Tạm biệt";
Và đoạn code này có ý nghĩa rằng tìm thẻ có id="result" và gán nội dung
HTML bên trong của thẻ này là dòng chữ "Tạm biệt".
2.2. Các thể loại DOM trong Javascript
Việc xử lý và làm việc với đối tượng HTML rất phức tạp và đa dạng, chính vì
vậy javascript có cung cấp cho chúng ta nhiều phương thức, đối tượng và mỗi thành
phần như vậy sẽ có những nhiệm vụ riêng biệt. Sau đây mình sẽ liệt kê danh sách
chia nhóm và trong những bài học tiếp theo chúng ta sẽ cùng tìm hiểu nó nhé.
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)
74
Như vậy ta có tổng cộng 8 loại thường được sử dụng như trên, và trong bài này
mình không đề cập chi tiết hết được.
Để truy xuất tới một thẻ HTML theo ID ta sử dụng cú pháp sau:
1. // Lấy thẻ input
2. var element = document.getElementById('tongcong');
3.
4. // Lấy giá trị của thẻ input
5. document.write(element.value);
Để truy xuất tới một thẻ HTML theo class ta sử dụng cú pháp sau:
1. document.getElementsByClassName("example");
Chú ý là lệnh này sẽ trả về một mảng các giá trị element
Ví dụ
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <ul class="example">
6. <li class="child">Coffee</li>
7. <li class="child">Tea</li>
8. </ul>
9.
10. <p>Click the button to change the text of the first list item (index 0).</p>
11.
12. <button onclick="myFunction()">Try it</button>
13.
14. <p><strong>Note:</strong> The getElementsByClassName() method is not supported in In

ternet Explorer 8 and earlier versions.</p>
15.
16. <script>
17. function myFunction() {
18. var list = document.getElementsByClassName("example")[0];
19. list.getElementsByClassName("child")[0].innerHTML = "Milk";
20. }
21. </script>
22.
23. </body>
24. </html>
Để truy xuất tới một thẻ HTML theo thuộc tính name cũng tương tự:
75
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. Cats: <input name="animal" type="checkbox" value="Cats">
6. Dogs: <input name="animal" type="checkbox" value="Dogs">
7.
8. <p>Click the button to check all checkboxes that have a name attribute with the valu
e "animal".</p>
9.
11.
12. <script>
14. var x = document.getElementsByName("animal");
15. var i;
16. for (i = 0; i < x.length; i++) {
17. if (x[i].type == "checkbox") {
18. x[i].checked = true;
19. }
20. }
21. }
22. </script>
23.
24. </body>
25. </html>
Ngoài ra ta có thể truy xuất tới thẻ HTML thông qua tên thẻ (tag name)
Ví dụ:
1. <!DOCTYPE html>
2. <html>
3. <body>
4.
5. <p>Click the button to change the text of this paragraph.</p>
6.
7. <p>This is also a paragraph.</p>
8.
10.
11. <script>
76
13. document.getElementsByTagName("P")[0].innerHTML = "Hello World!";
14. }
15. </script>
16.
17. </body>
18. </html>
3. JavaScript và CSS

3.1. Thay đổi CSS bằng Javascript
Style bản chất nó cũng là một thuộc tính của các thẻ HTML nhưng bạn không
thể sử dụng DOM HTML để thiết lập hay xóa bỏ CSS được mà phải thông qua một đối
tượng biệt khác đó là style.
Đối tượng style này sẽ chứa tất cả các thuộc tính của CSS và chúng ta sẽ dễ dàng
thao tác với chúng bằng cú pháp riêng, và như thường lệ chúng ta có hai thao tác
chính đó là thiết lập CSS và lấy giá trị CSS hiện tại.
Cú pháp thiết lập CSS bằng Javascript:
Cú pháp lấy giá trị CSS bằng Javascript:
Trường hợp thuộc tính có dấu gạch ngang như: font-size, line-height, margin-
bottomthì thuộc tính đó trong style sẽ có tên
là fontSize, lineHeight, marginBottom ,nghĩa là sẽ bỏ đi dấu gạch ngang và viết hoa ký
tự đầu tiên của chữ thứ hai.
Lưu ý rằng có những thuộc tính nếu bạn chưa thiết lập CSS cho nó thì khi bạn
lấy giá trị sẽ là một giá trị rỗng.
77
3.2. Ví dụ thay đổi CSS bằng Javascript
Để rõ ràng và dễ hiểu thì chúng ta làm một ví dụ:
Ví dụ 1: Viết một chương trình gồm 4 buttons và 1 thẻ div, khi click vào từng
button thì sẽ thiết lập màu sắc, background, chiều cao, font size của thẻ div.
Để làm bài này thì chúng ta phải sử dụng sự kiện trong javascript đó là onclick,
mỗi khi click vào mỗi button sẽ giải quyết một vấn đề của bài toán.
Các bước thực hiện:
Tạo 4 functions thực hiện 4 nhiệm vụ như đề bài yêu cầu
Gán mỗi function vào sự kiện onclick của mỗi button
Bài giải:
1. <html>
2. <body>
4. function change_background()
5. {
6. document.getElementById("message").style.background = 'red';
7. }
8.
9. function change_color()
10. {
11. document.getElementById("message").style.color = 'blue';
12. }
13.
14. function change_height()
15. {
16. document.getElementById("message").style.height = '500px';
17. }
18.
19. function change_font_size()
20. {
21. document.getElementById("message").style.fontSize = '500px';
22. }
23. </script>
24. <div id="message">
25. Chào mừng các bạn đến với freetuts.net
26. </div>
78
27. <input type="button" value="Change backgroud" onclick="change_background()"/
>
28. <input type="button" value="Change color" onclick="change_color()"/>
29. <input type="button" value="Change height" onclick="change_height()"/>
30. <input type="button" value="Change fontsize" onclick="change_font_size()"/>
31. </body>
32. </html>
Ví dụ 2: Viết chương trình đăng nhập và validate thông tin username, password.
Nếu người dùng không nhập username hoặc mật khẩu thì hiển thị thông báo
message trong một thẻ div và chữ màu đỏ, ngược lại thì thông báo validate thành
công và chữ màu xanh
Với bài này bạn cần phải sử dụng thêm DOM Element để lấy giá trị của các ô
input, đồng thời sử dụng DOM HTML để thay đổi nội dung của message và sử
dụng DOM CSS để thay đổi màu sắc.
1. <html>
2. <body>
4. function validate()
5. {
6. // Lấy giá trị input
7. var username = document.getElementById("username").value;
8. var password = document.getElementById("password").value;
9.
10. // Lấy đối tượng message
11. var message = document.getElementById("message");
12.
13. // Validate
14. if (username == "" || password == ""){
15. message.innerHTML = "Bạn chưa nhập đầy đủ thông tin!";
16. message.style.color = "red";
17. }
18.
19. else{
20. message.innerHTML = "Chúc mừng ban, validate thành công!";
21. message.style.color = "blue";
22. }
23.
24. }
79
25. </script>
26. Username: <input type="text" value="" id="username" /> <br/>
27. Username: <input type="password" value="" id="password" /> <br/>
28. <div id="message"></div>
29. <input type="button" value="Login" onclick="validate()"/>
30. </body>
31. </html>
80
BÀI TẬP BÀI 3
1. Viết chương trình tạo một button mà không thể click vào nó, nghĩa là khi đưa
chuột lên button thì button sẽ di chuyển sang vị trí khác.
2. Viết chương trình sử dụng thuộc tính innearHTML để thêm 1 dòng vào 1 table khi
nhấn một button
3. Viết chương trình cho phép thay đổi hình ảnh của thẻ img khi click vào một butotn
81
BÀI 4: Tạo hiệu ứng và validate Form
Giới thiệu:
- Bài này giúp người học có thể tạo các hiệu ứng cho các Element HTML bằng
Javascript, cũng như xử lý hành đồng validate của Form.
Mục tiêu:
- Phát biểu được cách tạo hiệu ứng cho hình ảnh trong JavaScript.
- Trình bày được sự kiện Validate của Form.
- Viết được ứng dụng slide show và ứng dụng xử lý sự kiện validate form đơn giản.
Nội dung chính:
1. Làm việc với hình ảnh trong JavaScript

1.1. Timer trong Javascript
Bước 1: Tạo file HTML sau, chạy thử:
Kết quả:
Giải thích:
Lệnh: var myVar = setInterval(myTimer, 1000);
setInterval(myTimer, 1000); Gọi Hàm myTimer() sau mỗi 1000 mili giây.
Biến myVar được dùng để lưu lại interval đã set. myVar sẽ được sử dụng khi
muốn dừng Interval này.
82
Lệnh : d.toLocaleTimeString(). Lệnh này sẽ lấy thời gian (giờ phút giây) của
hệ thống và xuất ra một chuỗi. chuỗi này được in ra màn hình như đã thấy ở trên.
Bước 2 : Thêm lệnh điều khiển cho đồng hồ.
Bước 3 : Thêm hàm điều khiển trong js.
Bước 4 : Thêm lời gọi hàm trong sự kiện onclick của button.
Chạy thử.
Giải thích : Hàm clearTimeout(myVar) sẽ dừng Interval được lưu vào myVar.
Nghĩa là dừng việc lặp đi lặp lại các hành động.
1.2. Thay đổi hình ảnh
Bài 1: Bật tắt bóng đèn.
83
Chuẩn bị: 2 file hình: và
Chuột phải, chọn save as picture và lưu vào thư mục sẽ làm việc trong bài tập
này.
Đặt tên là “off.gif” và “on.gif”
Bước 1: Tạo file html và lưu cùng thư mục với 2 hình ở trên.
Bước 2: Thêm đối tượng img và 2 button
Kết quả chạy thử:
Bước 3: Thêm sự kiện, chạy thử.
84
Chạy thử:
Bước 4: Tách JavaScript nằm độc lập
Chạy thử.
Bước 5: Chỉnh sửa thẻ img, thêm sự kiện onmouseover và onmouseout
- Sự kiện onmouseover xẩy ra khi con chuột di chuyển từ ngoài vào trong đối
tượng.
- Sự kiện onmouseout xẩy ra khi con chuột di chuyển ra khỏi đối tượng.
Chạy thử bằng cách di chuyển con trỏ chuột lên bóng đèn. Nếu bóng đèn bật tắt
là đúng.
Bước 6: Thay đổi kích thước khi đưa con trỏ chuột đưa lên tấm hình.
85
Trong thực tế, khi ta đưa chuột lên một tấm hình, ví dụ các mặt hàng, thì các
tấm hình đó sẽ tự động được phóng lớn. Ta sẽ áp dụng bằng cách tăng giảm kích
thước bóng đèn.
Đầu tiên, thềm hai hàm tăng và khôi phục kích thước.
Ở cả 2 hàm thì x là đối tượng (thẻ html) cần thay đổi kích thước. height = “auto”
nghĩa là chiều cao thay đổi tự động phụ thuộc vào chiều rộng. đảm bảo hình không
bị méo.
Tiếp theo, chỉnh sửa trong thẻ image.
Ở đây, this là tham số được truyền vào, tương đương với x ở trên. this nghĩa là
đối tượng hiện tại đang họi hàm, cụ thể trong trường hợp này, this là img
86
Chạy thử. Kiểm tra bóng đèn phóng to thu nhỏ.
1.3. Làm Slideshow đơn giản
Bước 1: Chuẩn bị
- Ít nhất 4 tấm ảnh cùng chủ đề.
- Resize về cùng kích cỡ.
- Định dạng lại về cùng một định dạng. Ví dụ: jpg, png, gif…
- Đặt tên theo số thứ tự, bắt đầu từ 0. ví dụ: pic0.jpg, pic1.jpg, pic2.jpg, pic3.jpg
Bước 2: Tạo file html như sau:
Chạy thử:
Bước 3: Load các ảnh lên bộ nhớ.
Ở đây có một số điểm mới cần giải thích.
87
Biến vitrihientai cho biết số thứ tự tấm ảnh đang được load. Sẽ cho phép chúng
ta dựa vào đây để giám sát. Giá trị ban đầu của biến là tấm ảnh đang load trên thẻ
img. Khi thay đổi các tấm ảnh, ta phải thay đổi giá trị của biến này.
Biến soanh cho biết số ảnh trong slideshow. Chính là số ảnh mà ta đã chuẩn bị.
Hàm loadAnh() sẽ được gọi khi trang html được mở. Lời gọi được đặt tại sự
kiện onload của thẻ body. Như vậy, sự kiện onload của thẻ body xẩy ra khi trang html
được mở hoặc reload.
Các ảnh được lưu vảo một mảng với các phần tử là kiểu image (được chỉ định
bằng lệnh mang_anh[i] = new Image();)
Ta load các tấm ảnh lên bằng cách chỉ định thuộc tính src của các phần tử.
Lệnh mang_anh[i].src = "pic"+i+".jpg"; tương đương với ta chỉ định thuộc

tính src trên một thẻ img.
Nhớ đừng quên onload trên body
Bước 4: Thêm các hàm Next và Back
Ở đây, ta kiểm tra điều kiện giới hạn trên và giới hạn dưới để cho ảnh không
vượt qua soanh-1 và nhỏ hơn 0. Nếu không sẽ chạy ra ngoài mảng và báo lỗi.
Gọi hàm ở các button.
Chạy thử.
88
Bài tập
Bài 1: Sửa code sao cho khi chạy tới vị trí cuối cùng (soanh-1), nếu tiếp tục
nhấn next thì quay lại ảnh thứ 0.
Gợi ý: Tại hàm Next, thêm các dòng kiểm tra:
Nếu vitrihientai = soanh-1 thì
{
Vitrihientai = 0; //Quay về vị trí 0
Load ảnh của vị trí hiện tại lên mySlideshow.
}
Bài 2: Sửa code sao cho khi chạy tới ảnh 0. Nếu tiếp tục nhất back thì ảnh chạy
tới ảnh cuối cùng (soanh-1). Gợi ý: Sửa trong hàm Back, và gần giống cách sửa như
bài 1.
Bài 3: Sử dụng kiến thức về timer để cho ảnh tự động chuyển tới ảnh tiếp theo
sau mỗi 3 giây. Gợi ý: setInterval gọi hàm Next sau mỗi 3000 mili giây.
1.4. Tạo Picture Menu
Một của hàng đồ cho trẻ em muốn tạo một menu đặc biệt để thu hút trẻ
em.
Lý thuyết:
• HTML cung cấp thẻ map để tạo bản đồ ảnh

• Thẻ map đi liền sau thẻ img, thuộc tính usemap của thẻ img có giá trị bằng giá
trị thuộc tính name của thẻ map tương ứng
• Thẻ area trong thẻ map để chỉ ra các vùng trên bản đồ. Vùng trên bản đồ được
chỉ ra bằng thuộc tính shape và coords
• Nếu shape = “rect” thì coords = “left,top,right,bottom”;
• Nếu shape = “cirle” thì coords = “tâm_x, tâm_y, bán kính.”
• Nếu shape = “poly” thì coords = “x1,y1,x2,y2,x3,y3…xn,yn”. Nghĩa là
tập hợp các điểm nối tiếp nhau để bao quanh vùng cần xác định.
Tạo các file html và thư mục Menu như dưới đây.
89
Thư mục menu chứa các tấm ảnh: (Có file kèm theo, các file này lấy từ tài liệu
của cao đẳng FPT)
Chuẩn bị 5 file HTML. Mỗi file chỉ đơn giản cho biết mặt hàng đang bán. Ví dụ
nội dung file ao.html:
Các file khác thay chữ “áo” bằng các mặt hàng tương ứng.
Tạo file homepage.html nằm chung thư mục với các file html ở trên.
Chạy thử:
90
Thêm thuộc tính usemap và thẻ map:
Chú ý: usemap trong img phải thêm dấu thăng (#) vào đằng trước.
Thêm thẻ map ngay sau thẻ img và phải có name giống với usemap.
Ở đây ta chỉ xác định một area đầu tiên. Area này là cái áo của em bé. Vì khu
vực này có hình dạng phức tạp nên ta chọn kiểu là “poly”.
Xác định các điểm biên của chiếc áo. Để làm việc này ta cần một trình
chỉnh sửa ảnh. Đơn giản nhất ta dùng paint.
- Dùng paint mở ảnh “birdthday.jpg” lên.
- Xác định điểm đầu tiên.
91
- Nhập điểm đầu tiên vào area:
- Xác định điểm tiếp theo:
- Nhập điểm tiếp theo vào area:
… Cứ tiếp tục như vậy.

Các điểm cần lấy:
92
Như vậy có 9 điểm cần lấy. Điểm 9 sẽ tự động nối với điểm 1 để thành 1 vùng
khép kín. Sau khi lấy xong ta sẽ có thuộc tính coords của thẻ area như sau:
Lưu ý là phép đo của mỗi người sẽ hơi lệch nhau.

Sau khi khép kín, vùng của chúng ta sẽ có hình dạng gần giống như:
Kiểm tra bằng cách chạy thử. Đưa con trỏ chuột lên phần áo, nếu con trỏ chuột
đổi thành bàn tay là thành công.
93
Thêm mã JavaScript để thay đổi hình.
Bây giờ ta muốn khi ta đưa chuột lên áo thì sẽ load hình áo được làm nổi bật
lên. Khi đưa ra khỏi thì sẽ trả về bình thường.
Thêm mã JavaScript:
Trong trường hợp trên, chuỗi có 2 dấu xuyệt ngược (\\)là vì dấu xuyệt ngược là
một ký tự đặc biệt, nên ta sử dụng 2 dấu xuyệt ngược thì trình biên dịch sẽ hiểu là chỉ
có một.
Thêm lời gọi cho sự kiện onmouseover và onmouseout trên area áo:
Chạy thử:
94
Thêm link để khi click vào area thì load file “ao.html”
Chạy thử.
Tổng kết: Như các bạn thấy, khi ta thao tác trên bản đồ ảnh, thực sự ta không
thao tác trên ảnh mà thao tác trên các vùng area của thẻ map.
Bài tập:
Thêm các vùng cho mũ, quần, giày, bóng, đồ chơi (bóng). Thêm các hiệu ứng
và link tương tự như đã làm với áo.
2. Sử dụng JavaScript với form trên trên web
Thời gian: 03 giờ; (Lý thuyết: 01 giờ; Thực hành: 02 giờ).

Form là một phần quan trọng của web, cho phép nhập thông tin và gửi thông tin
lên server. Thông thường, form gửi thông tin lên server qua sự kiện submit.
Sự kiện submit xẩy ra khi người dụng click vào một input kiểu submit.
Server sẽ kiểm tra tính hợp lệ của dữ liệu, nếu dữ liệu không hợp lệ, server sẽ
báo về và yêu cầu nhập lại. quá trình sẽ lặp lại cho tới khi nào dữ liệu hợp lệ. Dữ liệu
phải di chuyển qua lại nhiều lần.
➔ Kiểm tra dữ liệu ngay tại trình duyệt web bằng ngôn ngữ JavaScript để tiết kiệm
thời gian và băng thông. Việc kiểm tra tính hợp lệ của dữ liệu được gọi là validate
form.
Bước 1:
95
Tạo 2 file html: “dang nhap.html”, “dang nhap thanh cong.html” ở cùng thư
mục.
Bước 2:
Tạo nội dung file ”, “dang nhap thanh cong.html”.
Bước 3: Tạo nội dung file “dang nhap.html”.
96
Chạy thử
→ sẽ thấy không submit được.
Đổi return false thành return true :
Chạy thử → Submit được và báo đăng nhập.

➔ Kết luận:
- Với khai báo: onsubmit="return validateForm()" ở form, thì form có submit
được hay không phụ thuộc vào kết quả trả về của hàm validateForm() là true
hay false.
- Ta dựa vào kết luận trên để thêm các điều kiện kiểm tra dữ liệu vào hàm.
Bước 4: Lấy dữ liệu của form.
Chạy thử.
97
Các lệnh xuất thử cho biết chương trình đang chạy đúng.
Bước 5:
Kiểm tra tên đăng nhập, nếu tên đăng nhập rỗng thì báo lỗi.
Chạy thử:
Bước 6:
Thêm các lệnh để kiểm tra mật khẩu:
98
Chạy thử.
Bài tập:
Thêm các lệnh để kiểm tra độ dài mật khẩu phải lớn hơn hoặc bằng 8 ký tự.
Cách lấy độ dài của một chuỗi: Google.
99
BÀI TẬP BÀI 4
1. Viết chương trình có chức năng kiểm tra sự kiện onsubmit của form đăng ký với
các yêu cầu:
- User name phải: không rỗng; không chứa ký tự trắng, không chứa ký tự đặc
biệt; có độ dài từ 3 đến 12 ký tự.
- Mật khẩu phải: Không rỗng; Độ dài tối thiếu 6 ký tự.
- Email: Phải có ký tự @ và có ít nhất một ký tự . sau @
- Số điện thoại: Phải có 10 chữ số
- Địa chỉ: Không rỗng
100
BÀI 5: Thư viện jQuery và jQuery UI
Giới thiệu:
- Bài này giúp người học có thể khai thác thư viện jQuery và jQueryUI để tăng tốc độ
và hiệu quả sử dụng Javascript.
Mục tiêu:
- Phân biệt được khái niệm thư viện và framework của JavaScript.
- Nêu được tên ít nhất 1 thư viện và 1 framework của JavaScript.
- Lập trình được ứng dụng sử dụng thư viện JQuery và JQueryUI để tạo hiệu ứng cho
hình ảnh.
- Có thể tự tìm hiểu và ứng dụng nhiều hiệu ứng khác.
Nội dung chính:
1. Giới thiệu về các thư viện và các framework JavaScript
Thời gian: 0,5 giờ; (Lý thuyết: 0,5 giờ; Thực hành: 0 giờ).
Môi trường JavaScript đã trở nên khổng lồ. Nó có hệ sinh thái của riêng nó với
thư viện, frameworks, công cụ, các quản lý package và các ngôn ngữ mới để biên
dịch ra JavaScript. Thật thú vị, npm, là một trình quản lý package thực thụ cho
JavaScript, cũng là một software registry lớn nhất của thế giới. Đây là một đoạn trích
từ một bài viết xuất bản trên Linux.com vào tháng 1 2017.
Với hơn 350,000 packages, npm registry chứa gần như hơn gấp đôi package
registry phổ biến tiếp theo (Apache Maven). Thực tế, hiện thời nó là package registry
lớn nhất thế giới.
8 tháng nhanh chóng trôi qua, và hiện giờ có 500,000 packages trong npm
registry. Là một sự tăng trưởng khủng khiếp so với những package repo khác.
101
Nguồn: ModuleCounts.com
Là một nhà phát triển front-end JavaScript, bắt kịp với những công cụ và thư
viện JavaScript thực sự rất quan trọng. Khi một công nghệ trở nên phổ biến, nhu cầu
sẽ tăng cao, lần lượt nó sẽ làm xuất hiện nhiều công việc lập trình hơn với mức lương
cao hơn trong ngành công nghiệp. Vì vậy tôi tập hợp một danh sách những kỹ thuật
JavaScript tôi nghĩ rằng bạn nên lưu tâm.
1.1. Thư viện
Một thư viện là các code có thể sử dụng lại để thực hiện những chắc năng cụ
thể. Nó là một tập hợp những hàm, đối tượng, và class bạn có thể dùng trong ứng
dụng của bạn. Một thư viện tách ra những layer khác nhau vì thế bạn không phải quan
tâm đến các chi tiết khi triển khai.
Và bạn có thể gọi một hàm từ thư viện và đưa các tham số, và thư viện xử lý nó
và trả về quyền điều khiển cho bạn. Tuy nhiên, nó không đặt để bất kỳ quy tắc nào
giới hạn cách bạn sử dụng thư viện đó. Thư viện JavaScript phổ biến gồm có:
1.1.1. React
React là một thư viện được xây dựng cho các nhà phát triển của Facebook và
Instagram. React được bầu chọn là một công nghệ được yêu thích nhất của các nhà
phát triển, dựa theo khảo sát của Stack Overflow 2017. React cũng có uy tín trở thành
một dự án JavaScript phổ biến nhất dựa trên số sao đếm được từ GitHub.
Vậy tại sao React được toàn thể chú ý như vậy? Với React, hoàn toàn có thể tạo
ra một ứng dụng tương tác sử dụng phương pháp declarative, ở đó bạn có thể kiểm
soát trạng thái của ứng dụng bằng cách nói "view nên trông giống như vậy nè" Nó sử
dụng model component-based, các component là những thành phần UI được tái sử
dụng và mỗi component có trạng thái riêng.
102
React sử dụng Virtual DOM do đó bạn không cần phải quan tâm đến việc trực
tiếp thao tác DOM. Tính năng đáng chú ý khác của React bao gồm các luồng dữ liệu
một chiều (one-way data flow), tùy chọn cú pháp JSX và công cụ command-line cho
việc tạo ra một dự án React mà không cần cấu hình ban đầu.
Nếu bạn tin rằng React là điều tốt nhất tiếp theo và muốn học React, hãy xem
qua loạt bài React Crash Course for Beginners.
1.1.2. jQuery
jQuery là một thư viện làm cho JavaScript dễ tiếp cận hơn và thao tác với DOM
trở nên dễ dàng hơn bao giờ. Quá trịnh học nhẹ nhàng và cú pháp dễ dàng của jQuery
đã hình thành một thế hệ nhà phát triển client-side mới. Một vài năm trước đây,
jQuery đã được xem là một giải pháp vững chãi để xây dựng các website mạnh mẽ,
với hỗ trợ đa trình duyệt. Các tính năng cốt yếu của jQuery như xử lý DOM dựa trên
CSS selectors, event handling và gọi AJAX đã thúc đẩy sự phổ biến của nó.
Tuy nhiên, sự việc đã thay đổi, và môi trường JavaScript đã phát triển nhanh
chóng. Vài điểm nổi bật của jQuery đã được tích hợp vào chuẩn ECMAScript mới
đây. Hơn nữa, những framework và thư viện mới được dùng ngày nay có cách riêng
để gắn kết DOM, và vì thế các kỹ thuật thao tác DOM truyền thống không còn được
yêu cầu nữa. Đột phổ biến của jQuery đang giảm dần, nhưng tôi thấy nó sẽ không
biến mất sớm đâu.
103
1.1.3. D3: Data-Driven Documents
D3 hoặc D3.js là một thư viện JavaScript mạnh mẽ để tạo ra những hình ảnh có
tính tương tác sử dụng chuẩn mực web như SVG, HTML và CSS. Không giống với
những thư viện hình ảnh trực quan khác, D3 cung cấp sự điểu khiển tốt hơn cho các
kết quả hình ảnh được tạo ra.
D3 hoạt động bằng cách gắn kết data với DOM và sau đó thực hiện công tác
chuyển đổi cho phần document. Nó cũng sở hữu một hệ sinh thái, gồm có các plugin
và thư viện để thêm các chức năng mở rộng. Thư viện này đã xuất từ năm 2011, và
có cả tấn tài liệu và bài hướng dẫn có thể giúp bạn bắt đầu ngay.
Nếu bạn đang kiếm tìm cách tạo các hình ảnh đơn giản mà không tốn quá nhiều
thời gian, bạn nên xem qua Chart.js. Chúng tôi có một loạt bài viết về Chart.js đề
cập gần như tất cả các hình ảnh bạn có thể tạo ra bằng Chart.js
1.2. Frameworks
Một framework là một kiến trúc kiểm soát luồng đi của data trong ứng dụng của
bạn. Framework hình thành cấu trúc cơ bản và cho bạn biết mọi thứ nên được tổ chức
ra sao. Chức năng cơ bản để giúp ứng dụng lập tức vận hành cũng được cung cấp.
Hơn thế nữa, bạn bị ràng buộc phải tuân theo các pattern và quy luật mà framwork
thiết kế. Sự khác biệt giữa framework và thư viên là bạn gọi một thư viện thì
framework sẽ gọi bạn.
Một framework chứa đựng nhiều thư viện và có hình thái cấp độ cao hơn. Chức
năng như event binding, gọi AJAX, template và data binding, và testing được xây
dựng bên trọng framework.
1.2.1. Angular
AngularJS là một trong những công nghệ JavaScript phổ biến nhất trong giới
phát triển Front-End. Nó được hậu thuẫn bởi Google và một cộng đồng gồm nhiều cá
nhân và tổ chức khác. Mặc cho sự phổ biến, AngularJS cũng từng có những sai sót
104
của nó. Nhóm Angular đã bỏ ra 2 năm làm ra một phiên bản mới, cuối cùng đã ra mắt
và tháng 9 2016.
Angular 2 xuất xưởng là một phiên bản viết lại từ đầu của AngularJS. Một vài
tính năng của Angular 2 gồm có:
• TypeScript thay cho JavaScript làm ngôn ngữ mặc định
• kiến trúc component-based
• cái thiện hiệu năng trên nền tảng web và mobile
• chọn lựa tốt hơn cho tooling và scaffolding
Tuy nhiên, nâng cấp từ Angular 1.x sang Angular 2.x khá là xa xỉ vì Angular 2
là một con thú hoàn toàn khác biệt. Đó là lý do cho việc tại sao Angular 2 chưa có tỉ
lệ thực nghiệm cao như người tiền nhiệm của nó. Nhưng Angular và AngularJS vẫn
tiếp tục là một công nghệ phổ dụng nhất dựa theo Stack Overflow 2017. Dự án
Angular nhận được 28,000 sao trên GitHub.
1.2.2. Vue.js
Vue.js là một framework JavaScript nhỏ gọn đã xuất hiện theo xu thế năm nay.
Nó là một framework JavaScript phổ biến trên GitHub tính theo lượng sao trên
GitHub. Vue tuyên bố là một framework không quá cứng nhắc và do đó giúp nhà
phát triển dễ dàng nắm bắt. Các mẫu cú pháp HTML của Vue gắn kết phần DOM đã
render với giá trị của dữ liệu.
105
Framework này cung cấp trải nghiệm như React với những Virtual DOM của
nó và các component có thể tái sử dụng giúp bạn tạo ra cả widgets và toàn bộ ứng
dụng web. Hơn nữa, bạn cũng có thể dùng cú pháp JSX để viết phần chức năng render
trực tiếp. Khi trang thái thay đổi, Vue,js sẽ một hệ thống phản ứng để xác định rằng
điều gì đã thay đổi và render só lượng nhỏ nhất các component. Vue.js cũng hỗ trợ
tích hợp những thư viện khác vào framework mà không cần tốn công sức nhiều.
1.2.3. Ember.js
Ember.jsj là một framework front-end vân hành trên mô hình Model-View-
ViewModel - cấu trúc MVVM. Nó tuân theo nguyên tắc hơn là phương pháp cấu
hình, nó lạ sự phở biến giữa những franework sever-si server side khác như Ruby on
Rail hoặc Laravel. Ember.js tổng hợp với những câu thành ngữ và thực tiễn nhất vào
trong framework vì thế bạn có thể khởi động một ứng dụng chẳng mất nhiều công
sức.
Ember thông thường gồm có:

Ember CLI: cung cấp chọn lựa tạo khuôn mẫu cơ bản (scaffolding) và hỗ trợ
hàng trăm add-ons.
Ember Data: một thư viện data vững chắc có thể được cấu hình để làm việc với
bất kỳ server back-end nào.
Ember Inspector: Một extension (phần mở rộng) cho Chrome và Firefox.
Liquid Fire: Một add-on cho việc chuyển đổi và hoạt hình.
2. Giới thiệu về jQuery
Thời gian: 1,5 giờ; (Lý thuyết: 0,5 giờ; Thực hành: 01 giờ).
jQuery chắc các bạn cũng đã nghe nhiều về nó, nhất là trong việc làm các hiệu
ứng đẹp trên website. Vậy chính xác nó là cái gì? Hy vọng đọc xong bài này bạn sẽ
hiểu ra được phần nào. Trước hết, để hiểu rõ tốt bài này bạn cần có kiến thức
Javascript căn bản.
106
Trước hết, Jquery là một thư viện của javascript nên nó cũng là một file js thông
thường, do đó trước khi làm việc với mọi thứ, hãy nhúng thư viện jquery lên website
của mình. Có 2 cách để làm việc này:
Cách 1 – Chèn file jQuery trực tiếp từ host

Cách này là bạn tự host bằng cách vào trang http://jquery.com tải file mới nhất
về và load file này mỗi lần sử dụng jquery.
<script type=”text/javascript” src=”path/…./jquery -latest.js”></script>
Cách 2 – Chèn file jQuery từ CDN của Google

Cách này thay vì bạn upload plugin jQuery lên host thì bạn chỉ cần việc nhúng
thẻ chèn jQuery từ file jQuery có sẵn trên máy chủ CDN của Google. Ưu điểm cách
này là tiết kiệm băng thông.
<script type=”text/javascript” src=” http://code.jquery.com/jquery -
2.0.3.min.js ”></script>
Tuy nhiên nếu bạn đang thực hành code trên localhost thì nên sử dụng cách 1
để tránh trường hợp máy chúng ta không có kết nối mạng mà web vẫn có thể hoạt
động được.
Tài liệu học jQuery

Trong bài này mình không thể nào dạy hết cho các bạn jQuery từ A tới Z được
nên cách tốt nhất là bạn nên tự học, bài này chỉ mang tính chất giới thiệu và giúp bạn
làm quen với jQuery mà thôi. Dưới đây là những nguồn học jQuery miễn phí tốt nhất,
dĩ nhiên là yêu cầu bạn có kiến thức Javascript căn bản.
jQuery Documentation
Học jQuery tại W3Schools
jQuery căn bản của izWebz
Serie video học jQuery của Hoctudau
Mình nghĩ với những nguồn đó bạn có thể thành “master” jQuery rồi đó. Hãy
nhớ rằng jQuery rất dễ học nên bạn không cần quá lo lắng về nó.
Cách viết đoạn jQuery đầu tiên

Để bắt đầu minh sẽ chuẩn bị một ví dụ minh họa dưới đây.
Chuẩn bị 1 tài liệu HTML mẫu như sau:
1. <html>
2. <head>
3. <title>Jquery cho newbie</title>
4. <script type="text/javascript" src="path/…/jquery-latest.js"></script>
107
5. </head>
6. <body>
7. <button id="button" href="#">click me</button>
8. <p class="para">Chào các bạn, Jquery học thật dễ đúng không?</p>
9. </body>
10. </html>
Kế tiếp mình sẽ chèn thêm đoạn jQuery này vào tài liệu HTML trên, chèn trong
cặp thẻ <head> nhé.
1. <script type="text/javascript">
2. $(document).ready(function(handler ) {
3. $(“#button").click(function(handler) {
4. $(“p").fadeOut();
5. });
6. });
7. </script>
Kết quả của đoạn mã trên là khi bạn click vào button “click me” thì đoạn văn
bản ở sau nó sẽ bị mờ dần và ẩn đi. Các bạn có thể xem kết quả
ở http://jsfiddle.net/Michael_Nguyen/LcPuF/14
Các sự kiện như click, blur, focus…. Cũng như những hiệu ứng fadeOut, hide,
fadeIn,… các bạn sẽ được tiếp xúc nhiều khi làm việc với Jquery và không nên bận
tâm nhiều về nó bây giờ.
Đầu tiên, thao tác cơ bản nhất của Jquery là chọn một một phần tử trong cấu
trúc DOM (Document Object Model) của tài liệu html. Bạn làm điều đó bằng cách
sử dụng hàm $( ) (hoặc hàm Jquery( ) ). Hàm $( ) là một Jquery Object, trong
cặp ( ) là một chuỗi tham số, có thể là CSS Selector.
Ở ví dụ trên chính là $(document), $(“#button”), $(“p”). Rõ ràng bạn có thể
hướng tới các thành phần trong tài liệu html một cách thật dễ dàng bằng cách tận
dụng kiến thức về CSS vì các Jquery Selector có cùng cấu trúc và cú pháp như CSS
108
Selector. Và bằng cách đó bạn hoàn toàn có thể định dạng và thay đổi giao diện của
một trang web giống như cách mà CSS đã làm và yên tâm rằng nó hiển thị tôt trên tất
cả các trình duyệt. Đây cũng là một ưu điểm của jquery so với CSS.
Hàm fadeOut() trong ví dụ trên tạo hiệu ứng ẩn mờ dần cho thành phần được
chọn. Chi tiết về những hàm tạo hiệu ứng cũng như những hàm khác các bạn có thể
xem đầy đủ tại trang chủ của nó http://api.jquery.com/và tra cứu khi cần.
Một điều chú ý nữa đó là hàm $(document ).ready() ở trên. Hàm này đảm bảo
cho tất cả mã Jquery đặt trong nó được thực thi sau khi toàn bộ tài liệu html được
load xong. Và thường thì chúng ta vẫn làm như vậy.
3. Các hiệu ứng và plugin cho jQuery
Thời gian: 06 giờ; (Lý thuyết: 01 giờ; Thực hành: 05 giờ).

3.1. Hiển thị và ẩn các phần tử trong jQuery
• Các lệnh để hiển thị và ẩn các phần tử là khá gọn như những gì chúng ta mong
muốn: show() để hiển thị các phần tử trong một tập hợp được wrap và hide() để
ẩn chúng.
a) Cú pháp
• Sau đây là cú pháp đơn giản cho phương thức show() trong jQuery:
[selector].show( speed, [callback] );
Miêu tả chi tiết về các tham số:

• speed − Một chuỗi biểu diễn một trong 3 tốc độ đã định trước ("slow",
"normal", hoặc "fast") hoặc số mili giây để chạy hiệu ứng (ví dụ: 1000).
• callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ
khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.
Còn đây là cú pháp đơn giản cho phương thức hide() trong jQuery:
[selector].hide( speed, [callback] );
Miêu tả chi tiết về các tham số:

• callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ
khi nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.
b) Ví dụ
Bạn xem xét HTML file sau với một jQuery code nhỏ:
109
1. <html>
2. <head>
3. <title>The jQuery Example</title>
4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer

y/2.1.3/jquery.min.js"></script>
5. <script type="text/javascript" language="javascript">
6. $(document).ready(function() {
7. $("#show").click(function () {
8. $(".mydiv").show( 1000 );
9. });
10. $("#hide").click(function () {
11. $(".mydiv").hide( 1000 );
12. });
13. });
14. </script>
15. <style>
16. .mydiv{ margin:10px;padding:12px; border:2px solid #666; width:100px; heigh

t:100px;}
17. </style>
18. </head>
19. <body>
20. <div class="mydiv">
21. This is a SQUARE
22. </div>
23. <input id="hide" type="button" value="Hide" />
24. <input id="show" type="button" value="Show" />
25. </body>
26. </html>
Nó sẽ cho kết quả sau:
110
3.2. Toggle các phần tử trong jQuery
jQuery cung cấp các phương thức để toggle trạng thái hiển thị của các phần tử
giữa hiển thị và ẩn. Nếu phần tử khi khởi tạo là hiển thị, nó sẽ được ẩn; nếu là ẩn, nó
sẽ được hiển thị.
a) Cú pháp
Cú pháp đơn giản cho một phương thức toggle() trong jQuery:
[selector]..toggle([speed][, callback]);
Dưới đây là miêu tả về các tham số:

• callback − tham số tùy ý này biểu diễn một hàm để được thực thi bất cứ khi
nào hiệu ứng hoàn thành; thực thi một lần cho mỗi hiệu ứng.
Ví dụ
Chúng ta có thể tạo hiệu ứng cho bất kỳ phần tử nào, ví dụ như một phần tử div
chứa một hình ảnh:
1. <html>
2. <head>
3. <title>The jQuery Example</title>
4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquer

y/2.1.3/jquery.min.js"></script>
5. <script type="text/javascript" language="javascript">
6. $(document).ready(function() {
7. $(".clickme").click(function(event){
8. $(".target").toggle('slow', function(){
9. $(".log").text('Transition Complete');
10. });
11. });
12. });
13. </script>
14. <style>
15. .clickme{ margin:10px;padding:12px; border:2px solid #666; width:100px; hei

ght:50px;}
16. </style>
17. </head>
18. <body>
19. <div class="content">
20. <div class="clickme">Click Me</div>
111
21. <div class="target">
22. <img src="./images/jquery.jpg" alt="jQuery" />
23. </div>
24. <div class="log"></div>
25. </div>
26. </body>
27. </html>
Nó sẽ cho kết quả sau:
Các phương thức jQuery Effect

Ở phần trên, bạn đã theo dõi các khái niệm cơ bản về jQuery Effect. Bảng dưới
liệt kê tất cả phương thức cơ bản để tạo các kiểu hiệu ứng khác nhau:
STT Phương thức & Miêu tả
1 animate( params, [duration, easing, callback] )

• Một hàm để tạo các hiệu ứng custom
2 fadeIn( speed, [callback] )

• Fade in tất cả các phần tử đã so khớp bởi việc điều chỉnh opacity (độ
chắn sáng) và kích hoạt một callback tùy ý sau khi hoàn thành.
3 fadeOut( speed, [callback] )

• Fade out tất cả phần tử đã so khớp bởi điều chỉnh opacity về 0, sau đó
thiết lập hiển thị về "none" và kích hoạt một callback tùy ý sau khi hoàn
thành
4 fadeTo( speed, opacity, callback )

• Fade độ chắn sáng của tất cả phần tử đã so khớp tới một opacity đã cho
và kích hoạt một callback tùy ý sau khi hoàn thành.
5 hide( )
• Ẩn mỗi phần tử trong tập hợp đã so khớp nếu chúng đã hiển thị
6 hide( speed, [callback] )
112
• Ẩn tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và kích hoạt
một callback tùy ý sau khi hoàn thành
7 show( )
• Hiển thị mỗi phần tử trong tập hợp đã so khớp nếu chúng bị ẩn
8 show( speed, [callback] )

• Hiển thị tất cả phần tử đã so khớp bởi sử dụng một hiệu ứng đẹp và
kích hoạt một callback tùy ý sau khi hoàn thành
10 slideDown( speed, [callback] )

• Bộc lộ tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và
kích hoạt một callback tùy ý sau khi hoàn thành
11 slideToggle( speed, [callback] )

• Toggle sự nhìn thấy của tất cả phần tử đã so khớp bởi điều chỉnh chiều
cao và kích hoạt một callback tùy ý sau khi hoàn thành
12 slideUp( speed, [callback] )

• Ẩn tất cả phần tử đã so khớp bởi điều chỉnh chiều cao của chúng và
kích hoạt một callback tùy ý sau khi hoàn thành.
13 stop( [clearQueue, gotoEnd ])

• Dừng tất cả các hiệu ứng đang chạy hiện tại trên tất cả phần tử đã xác
định
14 toggle( )
• Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp
15 toggle( speed, [callback] )

• Toggle sự hiển thị mỗi phần tử trong tập hợp các phần tử đã so khớp
bởi sử dụng một hiệu ứng đẹp và kích hoạt một callback tùy ý sau khi
hoàn thành
16 toggle( switch )
• Toggle sự hiển thị mỗi phần tử trong tập hợp đã so khớp dựa trên việc
chuyển mạch giữa: true là hiển thị tất cả phần tử, false là ẩn tất cả phần
tử
17 jQuery.fx.off
• Vô hiệu hóa toàn bộ tất cả hiệu ứng
Các hiệu ứng trên cơ sở UI Library trong jQuery
113
Để sử dụng các hiệu ứng này, bạn có thể hoặc tải về jQuery UI Library mới nhất
là jquery-ui-1.11.4.custom.zip từ trang jQuery UI Library hoặc sử dụng Google
CDN để sử dụng nó theo cách tương tự như chúng tôi đã thực hiện cho jQuery.
Chúng tôi đã sử dụng Google CDN cho jQuery UI bởi sử dụng đoạn trích code
sau trong trang HTML:
STT Phương thức & Miêu tả
1 Blind
• Blind away phần tử hoặc hiển thị nó bằng blind in
2 Bounce
• Bounce phần tử theo chiều dọc hoặc chiều ngang n lần
3 Clip
• Clip on hoặc clip off phần tử, theo chiều dọc hoặc chiều ngang
4 Drop
• Drop away phần tử hoặc hiển thị nó bởi drop in
5 Explode
• Explode phần tử thành nhiều phần
6 Fold
• Fold phần tử như một phần của tờ giấy
7 Highlight
• Highlight nền với màu đã cho
8 Puff
• Scale và fade out các hiệu ứng tạo ra hiệu ứng puff
9 Pulsate
• Pulsate độ chắn sáng của phần tử nhiều lần
10 Scale
• Shrink hoặc grow một phần tử bởi tỷ lệ phần trăm nào đó
11 Shake
• Shake phần tử theo chiều dọc hoặc chiều ngang n lần.
12 Size
• Đưa phần tử về chiều cao và rộng đã xác định
13 Slide
114
• Slide out phần tử ra khỏi cửa nhìn
14 Transfer
• Chuyển hình dáng của một phần tử cho phần tử khác
115
BÀI TẬP BÀI 5
1. Viết chương trình tạo một menu dropdown sử dụng các hiệu ứng của thư viện
jQuery
2. Viết chương trình tạo một slide show đơn giản sử dụng jQuery và jQueryUI để tạo
các hiệu ứng chuyển cảnh.
116
Tài liệu tham khảo
Tiếng anh:
[1] W3Schools - JavaScript Tutorial [website]
<https://www.w3schools.com/js/default.asp> [xem 20/11/2019]
Tiếng việt:
[2] Freetuts - học javascript [website]
<https://freetuts.net/hoc-javascript> [xem 20/11/2019]
[3] Viet Jack - Học Javascript cơ bản và nâng cao [website]
<http://vietjack.com/javascript/> [xem 20/11/2019]
[4] Thạch Phạm - học javascript [website]
<https://thachpham.com/category/web-development/javascript>
[xem 20/11/2019]
Bản quyền hình ảnh sử dụng trong giáo trình: Được trích xuất từ các nguồn
tham khảo, kết hợp với các hình ảnh do tác giả xây dựng và chụp lại.
117

Javascri P

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

Javascri P

Uploaded by

Copyright:

Available Formats

UỶ BAN NHÂN DÂN TỈNH ĐẮK LẮK

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ TÂY NGUYÊN

Đắk Lắk, năm 2019

Đắk Lắk, ngày 02 tháng 11 năm 2019

Tên mô đun: JAVASCRIPT

Thời gian: 01 giờ; (Lý thuyết: 01 giờ; Thực hành: 0 giờ)

1.6. Tải JavaScript trong trang web

<button onclick="document.getElementById('myImg').src='new -image.png'">Change

<button onclick="document.getElementById('first -para').innerHTML = "Welcome to

Thời gian: 02 giờ; (Lý thuyết: 01 giờ; Thực hành: 0 1giờ)

function yetAnotherAlert(textToAlert) { alert(textToAlert);

yetAnotherAlert("Đây là Chương 2");

Hình 2-6 Chạy JavaScript trên ASP.NET Development Server.

Thời gian: 02 giờ; (Lý thuyết: 01 giờ; Thực hành: 01 giờ)

var finalNum = cubeme(theNum); if (isNaN(finalNum)) {

return **”**Bạn đang làm gì đấy?**”**;

var finalNum = cubeme(theNum);

alert("Lập phương của " + theNum + " là " + finalNum

// Khối chú thích này có nhiều dòng.

// Trước mỗi dòng có hai dấu gạch chéo.

3.4. Dấu chấm phẩy

Thông thường, bạn nên viết là:

// đoạn mã được đặt ở đây

3.5. Dấu ngắt dòng

// Đoạn mã JavaScript được đặt ở đây

// Đoạn mã JavaScript được đặt ở đây

<script type="text/javascript" data-src="myscript.js">

3.7. Câu lệnh trong JavaScript

3.7.2. Hai loại câu lệnh JavaScript

// đoạn mã đặt ở đây

3.8. Từ khóa trong JavaScript

break delete if this while

case do in throw with

catch else instanceof try

continue finally new typeof

debugger for return var

default function switch void

<script type="text/javascript"> function cubeme(incomingNum) { if (incomi ngNum ==

return "Bạn đang làm gì đấy?";

<title>Ví dụ Chương 3</title>

<script type="text/javascript"> var theNum = 2;

return "Bạn đang làm gì đấy?";

1. Làm việc với biến và kiểu dữ liệu

Thời gian: 02 giờ; (Lý thuyết: 01 giờ; Thực hành: 01 giờ)

<title> Số dạng thập lục phân </title>

Thực hành với hàm isNaN()

Mở trình duyệt IE.

Đối tượng Math

Kết quả được thể hiện như Hình 4-1.

1.1.3. Làm việc với chuỗi

"Đây là 'một chuỗi khác'"

1. Mở trình duyệt IE.

javascript:alert("Đây là m ột chuỗi.".length); Kết quả là một hộp thoại hiển thị 17

Kết quả là hộp thoại hiển thị chuỗi "Steve".3.

Kết quả là hộp thoại hiển thị chuỗi "Steve".

alert(myString.substring(3,9)); //Tr ả về "n là m"

alert(myString.slice(3)); //Trả về "n là một chuỗi."

alert(myString.slice(3,9)); //Tr ả về "n là m"

alert(myString.substr(3)); //Tr ả về "n là một chuỗi."

alert(myString.substr(3,9)); //Tr ả về "n là một "

Phương thức concat nối hai chuỗi với nhau:

alert(finalString); //Trả về "Hello World"

Phương thức toUpperCase và toLowerCase cùng với hai phương

return ”Bạn đang làm gì đấy?”;

Nhân xong rồi gán x = y x = x y

Exponentiation assignment x = y x = x y