You are on page 1of 79

BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI

TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ


-----š›&š›-----

GIÁO TRÌNH
MÔ ĐUN:DCCT-JAVASCRIP
NGHỀ: CÔNG NGHỆ THÔNG TIN
TRÌNH ĐỘ: CAO ĐẲNG

Ban hành kèm theo Quyết định số: 245/QĐ-CĐNKTCN ngày 23 tháng 10 năm 2020
của Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ

Hà Nội, năm 2021


(Lưu hành nội bộ)
TUYÊN BỐ 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ới mục đích kinh doanh
thiếu lành mạnh sẽ bị nghiêm cấm.

MÃ TÀI LIỆU:MĐCNTT 24

2
LỜI GIỚI THIỆU

Trong những năm qua, dạy nghề đã có những bước tiến vượt bậc cả về số lượng
và chất lượng, nhằm thực hiện nhiệm vụ đào tạo nguồn nhân lực kỹ thuật trực tiếp đáp
ứng nhu cầu xã hội. Cùng với sự phát triển của khoa học công nghệ trên thế giới, lĩnh
vực Công nghệ thông tin nói chung đã có những bước phát triển đáng kể.

Chương trình dạynghề Công nghệ thông tin đã được xây dựng trên cơ sở phân tích
nghề, phần kỹ năng nghề được kết cấu theo các môđun. Để tạo điều kiện thuận lợi cho
các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình theo các
môđun đào tạo nghề là cấp thiết hiện nay.

Mô đun 24: DCCT-JAVASCRIPlà mô đun đào tạo chuyên môn nghề được biên
soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm
biên soạn đã tham khảo nhiều tài liệu trong và ngoài nước, kết hợp với kinh nghiệm
trong thực tế.

Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất
mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn.

Xin chân thành cảm!

Hà Nội, ngày 23 tháng 04 năm 2021


Tham gia biên soạn
1. Chủ biên Cù Ngọc Quỳnh giảng viên khoa CNTT
2. Tập thể Giảng viên Khoa CNTT

Mọi thông tin đóng góp chia sẻ xin gửi về hòm thư tienphungktcn@gmail.com, hoặc
liên hệ số điện thoại 0913393834-0983393834
3
MỤC LỤC

LỜI GIỚI THIỆU3


Bài 1: TỔNG QUAN VỀ JAVASCRIPT .............................................................................. 10
1. Giới thiệu bài học ......................................................................................................... 10
2. JavaScript và hỗ trợ của trình duyệt .............................................................................. 10
2.1. Chuẩn hoá ngôn ngữ lập trình JavaScript ............................................................... 10
2.2. Đặc điểm chung của JavaScript ............................................................................. 10
2.3. Ứng dụng của JavaScript ....................................................................................... 11
3. Sơ lược về ngôn ngữ JavaScript ................................................................................... 12
4. Thời điểm thực hiện một đoạn Script ............................................................................ 14
4.1.Cấu trúc của đoạn Javascript ................................................................................... 14
4.2.Javascript trong một trang HTML ........................................................................... 14
4.3. Môi trường viết Javascript ..................................................................................... 16
5. Các biến ....................................................................................................................... 16
5.1. Khai báo biến ........................................................................................................ 17
5.2. Quy tắc đặt tên biến ............................................................................................... 17
5.3. Một số phong cách đặt tên biến.............................................................................. 18
6. Các kiểu dữ liệu ........................................................................................................... 18
6.1. Dữ liệu kiểu string ................................................................................................. 18
6.2. Dữ liệu kiểu number .............................................................................................. 19
6.3. Dữ liệu kiểu boolean.............................................................................................. 19
6.4. Dữ liệu kiểu object ................................................................................................ 20
6.5. Dữ liệu kiểu undefined .......................................................................................... 20
6.6. Dữ liệu kiểu array .................................................................................................. 21
6.7. Cách xác định kiểu của dữ liệu .............................................................................. 21
7. Các toán tử ................................................................................................................... 22
7.1. Các toán tử số học ................................................................................................. 22
7.2. Toán tử so sánh ..................................................................................................... 23
7.3. Toán tử logic ......................................................................................................... 24
7.4. Toán tử điều kiện ................................................................................................... 24
7.5. Toán tử với chuỗi .................................................................................................. 24
7.6. Toán tử typeof ....................................................................................................... 25
8. Các biểu thức ............................................................................................................... 25
8.1. Toán hạng.............................................................................................................. 25
8.2. Toán tử .................................................................................................................. 26
8.3. Độ ưu tiên của các toán tử ..................................................................................... 26
8.4. Khoảng trắng giữa các toán hạng và toán tử........................................................... 27

4
9. Mảng ............................................................................................................................ 27
10. Các câu lệnh điều khiển .............................................................................................. 31
11. Các lệnh vòng lặp ....................................................................................................... 34
12. Hàm(function) ............................................................................................................ 38
12.1. Hàm là gì? ........................................................................................................... 38
12.2. Phân loại hàm ...................................................................................................... 39
12.3. Cách khai báo & gọi hàm "không có tham số" ..................................................... 40
12.4. Cách khai báo & gọi hàm "có tham số" ................................................................ 41
12.5. Gọi hàm thông qua một sự kiện ........................................................................... 42
12.6. Lệnh return .......................................................................................................... 43
Bài 2: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT .............................................. 45
1. Các đối tượng Javascript .............................................................................................. 45
1.1. Đối tượng .............................................................................................................. 45
1.2. Thuộc tính và phương thức .................................................................................... 45
1.3. Cách dùng đối tượng ............................................................................................. 45
2.Cây phân cấp của đối tượng .......................................................................................... 45
3. Câu lệnh eval ............................................................................................................... 46
4. Đối tượng String .......................................................................................................... 46
5. Đối tượng Math ............................................................................................................ 46
6. Đối tượng Date............................................................................................................. 47
BÀI TẬP:......................................................................................................................... 47
Bài 3: CÁC ĐỐI TƯỢNG CỦA TRÌNH DUYỆT TRONG JAVASCRIPT .......................... 52
1.Đối tượng event – Khái niệm......................................................................................... 52
2. Các sự kiện Javascript .................................................................................................. 52
3. Trình xử lý sự kiện ....................................................................................................... 57
4. Các đối tượng trình duyệt thông thường ....................................................................... 57
4.1. Mô hình đối tượng(DOM) ..................................................................................... 57
4.2.Đối tượng window .................................................................................................. 58
4.3. Đối tượng Document ............................................................................................. 58
4.4. Đối tượng History.................................................................................................. 58
5. Đối tượng Location ...................................................................................................... 58
BÀI TẬP .......................................................................................................................... 59
Bài 4: XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO PHẦN TỬ CỦA FORM ........................... 63
1. Đối tượng Form............................................................................................................ 63
2. Đối tượng Textfield(trường văn bản) ............................................................................ 63
3. Đối tượng Command Button ........................................................................................ 64
4. Đối tượng Checkbox .................................................................................................... 64
5. Đối tượng Radio Button ............................................................................................... 65
5
6. Đối tượng ComboBox/Select ........................................................................................ 65
7.Kiểm tra tính hợp lệ của nội dung và các trường trên form ............................................ 66
BÀI TẬP:......................................................................................................................... 70
BÀI TẬP JAVASCRIPT TỰ GIẢI .................................................................................. 76
TÀI LIỆU THAM KHẢO .................................................................................................... 79

6
GIÁO TRÌNH MÔ ĐUN
Tên mô đun: DCCT-JAVASCRIP
Mã mô đun: MĐCNTT 24
Vị trí, tính chất, ý nghĩa và vai trò của mô đun:
- Vị trí: Mô đun JAVASCRIPT
- Tính chất: Mô đun JAVASCRIPT áp dụng trong việc xây dựng các đọan
client-side script. Truyền đạt cho sinh viên những khái niệm quan trọng về thời
điểm thực hiện của một đoạn JavaScritp, biến và phạm vi sử dụng cũng như việc sử
dụng các đối tượng cơ bản của JavaScript như String, Date, Math,… để xử lý các
dữ liệu nhập, xuất.
- Ý nghĩa và vai trò của mô đun: Đây là mô đun đào tạo chuyên môn nghề,
cung cấp cho sinh viên các kỹ năng cơ bản nhất của nghề Công nghệ thông tin.

Mục tiêu của mô đun:

- Về kiến thức:
+ Nắm vững cú pháp của ngôn ngữ JavaScript.
+ Xác định thời điểm một đoạn Script được thực hiện.
- Về kỹ năng:
+ Sử dụng được các đối tượng cơ sở của JavaScript
+ Đọc hiểu sơ đồ các đối tượng.
+ Sử dụng các đối tượng window và document để quản lý trang web
+ Sử dụng các đối tượng của form, truy cập và kiểm tra các dữ liệu nhập trên
form.
- Về năng lực tự chủ và trách nhiệm:
+ Tích cực ứng dụng kỹ thuật lập trình cho các ứng dụng trong thực tế.
+ Khả năng tìm tài liệu, đọc hiểu tài liệu
+ Khả năng làm việc nhóm
Nội dung mô đun

1. Nội dung tổng quát và phân bổ thời gian:

Thời gian
Số
Tên các bài trong mô đun Tổng Lý Thực Kiểm
TT
số thuyết hành tra*
1 Bài 1: Tổng quan về Javascript 10 4 6
1. Giới thiệu bài học
2. JavaScript và hỗ trợ của trình duyệt

7
3. Sơ lược về ngôn ngữ JavaScript
4. Thời điểm thực hiện một đoạn
Script
5. Các biến
6. Các kiểu dữ liệu
7. Các toán tử
8. Các biểu thức
9. Mảng
10. Các câu lệnh điều khiển
11. Các lệnh vòng lặp
12. Hàm(function)
2 Bài 2: Các đối tượng cơ bản trong 20 3 17
Javascript
1. Các đối tượng Javascript
2. Cây phân cấp của đối tượng
3. Câu lệnh eval
4. Đối tượng String
5. Đối tượng Math
6. Đối tượng Date
3 Bài 3: Các đối tượng của trình duyệt 25 4 20 1
trong Javascript
1. Đối tượng event – Khái niệm
2. Các sự kiện Javascript
3. Trình xử lý sự kiện
4. Đối tượng trình duyệt thông
thường.
5. Đối tượng location
4 Bài 4: Xử lý Form và các sự kiện cho 34 4 29 1
phần tử của Form
1. Đối tượng Form
2. Đối tượng Textfield(trường văn
bản)
3. Đối tượng Command Button
4. Đối tượng Checkbox
5. Đối tượng radio
6. Đối tượng ComboBox/lựa chọn

8
7. Kiểm tra tính hợp lệ của nội dung
và các trường trên form

Thi kết thúc mô đun 1 1


Cộng 90 15 72 3

9
Bài 1: TỔNG QUAN VỀ JAVASCRIPT
Mã bài: MĐCNTT 24.01
Giới thiệu:
Giới thiệu về ngôn ngữ lập trình Javascript, những khái niệm cơ bản.
Mục tiêu:
- Trình bày được những khái niệm quan trọng về thời điểm thực hiện của một
đoạn JavaScritp, biến và phạm vi sử dụng cũng như việc sử dụng các đối
tượng cơ bản của JavaScritp như String, Date, Math,… để xử lý các dữ liệu
nhập, xuất.
- Nắm vững cú pháp của ngôn ngữ JavaScript
- Xác định thời điểm một đọan Script được thực hiện
- Sử dụng được các đối tượng cơ sở của JavaScript
Nội dung chính:
1. Giới thiệu bài học
- Ngôn ngữ lập trình Javascript được giới thiệu đầu tiên vào năm 1995. Mục đích là
để đưa những chương trình vào trang web ở trình duyệt Netscape Navigator - một
trình duyệt web phổ biến những năm 1990.
- JavaScript được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với
cái tên đầu tiên là Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành
JavaScript. Có lẽ việc đổi tên như vậy là để giúp JavaScript được chú ý nhiều hơn.
Bởi tại thời điểm này, Java đang được coi là một hiện tượng và trở nên phổ biến.
2.JavaScript và hỗ trợ của trình duyệt
2.1. Chuẩn hoá ngôn ngữ lập trình JavaScript
Sau khi ngôn ngữ lập trình JavaScript được chấp nhận sử dụng bên ngoài
Netscape, nó được chuẩn hoá bởi một tài liệu tên là ECMAScript bởi Ecma
International. Do đó, bạn có thể gọi nó là JavaScript hay ECMAScript. Riêng với
bản thân thì mình thích gọi nó là JavaScript hơn. Đơn giản vì mình thấy JavaScript
phát âm dễ hơn và nhanh hơn.
Tại thời điểm bài viết này được xuất bản (04/2017), phiên bản ECMAScript
mới nhất là ECMAScript 2016 hay ECMA-262. Do đó, đã có rất nhiều sự khác biệt
giữa JavaScript hiện tại so với phiên bản đầu tiên của nó.
Trong các bài viết sau, mình sẽ chủ yếu giới thiệu với bạn những kiến thức
nguyên thuỷ về JavaScript. Qua đó, bạn có thể tự tìm hiểu những chuẩn mới của
JavaScript một cách dễ dàng.
2.2. Đặc điểm chung của JavaScript
· Là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python,
Ruby,... Nó rất gần với ngôn ngữ tự nhiên của con người. Trong khi ngôn
ngữ lập trình bậc thấp (low-level) như: Assembly... sẽ gần với máy tính hơn.
· Là ngôn ngữ lập trình động (dynamic programming language): như Python,
Ruby, Perl,... Chúng được tối ưu hoá nhằm nâng cao hiệu suất cho lập trình
10
viên. Trong khi ngôn ngữ lập trình tĩnh (static programming language): như
C/C++,... lại được tối ưu hoá để nâng cao hiệu suất cho phần cứng máy tính.
· Là ngôn ngữ lập trình kịch bản (scripting language): nghĩa là không cần biên
dịch (compile) hay liên kết (linked) giống như ngôn ngữ lập trình biên dịch
(C/C++, Java,...) mà nó sẽ được dịch tại thời điểm chạy.
· Là ngôn ngữ dựa trên đối tượng (object-based): tức nó gần giống như ngôn
ngữ lập trình hướng đối tượng, ngoại trừ JavaScript không hỗ trợ tính kế
thừa và đa hình.
· Là ngôn ngữ dựa trên nguyên mẫu (prototype-based): là một kiểu của lập
trình hướng đối tượng, trong đó các hành vi của đối tượng được sử dụng lại.
2.3. Ứng dụng của JavaScript

JavaScript có rất nhiều ứng dụng trên nhiều môi trường và nền tảng khác khau:
· JavaScript cùng với HTML, CSS trở thành ngôn ngữ không thể thiếu đối với
website
· Ngoài ra, có rất nhiều framework JavaScript khác nhau phía front-end:
Angular.js, Angular2, ReactJS, Vue.js, Ember.js, Meteor.js, backbone, ...
· JavaScript có thể sử dụng phía server với framework : Node.js
· Một số database sử dụng JavaScript như là kịch bản và là ngôn ngữ query:
MongoDB, CouchDB
· JavaScript có thể dùng để xây dựng ứng dụng Desktop với framework:
Electron. Những ứng dụng nổi tiếng có thể kể đến là: Atom, Visual Studio
Code, GitKraken, Wordpress.com,...
· Để xây dựng ứng dụng điện thoại đa nền tảng (Android, IOS) có thể dùng:
React-native

11
3.Sơ lược về ngôn ngữ JavaScript
JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua.
Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:
1. HTML: Giúp bạn thêm nội dung cho trang web.
2. CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
3. JavaScript: Cải thiện cách hoạt động của trang web.
JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ
việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web.
Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự
cống hiến của cộng đồng, đặc biệt là Github.
JavaScript ngày đó và bây giờ
JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của
Netscape, vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được
đổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như
bây giờ. Phiên bản đầu tiên của ngôn ngữ này bị giới hạn độc quyền bởi Netscape
và chỉ có các tính năng hạn chế, nhưng nó tiếp tục phát triển theo thời gian, nhờ một
phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó.
Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript. ECMAScript
2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999. Nó liên tục
phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và
trên khắp các thiết bị từ di động đến máy tính bàn.
JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng
JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở
thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web.
Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng sử dụng JavaScript rồi.
Điều gì khiến JavaScript trở nên vĩ đại?
JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt
trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript:
1. Bạn không cần một compiler vì web browser có thể biên dịch nó bằng
HTML;
2. Nó dễ học hơn các ngôn ngữ lập trình khác;
3. Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;
4. Nó có thể được gắn trên một số element của trang web hoặc event của trang
web như là thông qua click chuột hoặc di chuột tới;
5. JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng;
6. Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra
thủ công khi truy xuất qua database;
7. Nó giúp website tương tác tốt hơn với khách truy cập;
8. Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.
Khuyết điểm của JavaScript là gì?

12
Mọi ngôn ngữ lập trình đều có các khuyết điểm. Một phần là vì ngôn ngữ đó khi
phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker,
scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo
mật để lợi dụng nó. Một số khuyết điểm có thể kể đến là:
1. Dễ bị khai thác;
2. Có thể được dùng để thực thi mã độc trên máy tính của người dùng;
3. Nhiều khi không được hỗ trợ trên mọi trình duyệt;
4. JS code snippets lớn;
5. Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng
nhất.
Cách hoạt động của JavaScript trên trang web là gì?
JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu
qua file .js riêng. Nó là ngôn ngữ phía client, tức là script được tải về máy của
khách truy cập và được xử lý tại đó thay vì phía server là xử lý trên server rồi mới
đưa kết quả tới khách truy cập.
Hãy lưu ý là các trình duyệt web phổ biến cũng hỗ trợ việc người dùng có muốn tắt
JavaScript hay không. Đó là lý do bạn nên biết trang web sẽ hoạt động như thế nào
torng trường hợp không có JavaScript.
Điểm khác biệt giữa các ngôn ngữ lập trình khác và JavaScript là gì?
Lý do vì sao JavaScript là một trong các ngôn ngữ lập trình phổ biến nhất là nó rất
linh hoạt. Trên thực tế, có nhiều lập trình viên chọn nó làm ngôn ngữ chính và chỉ
sử dụng các ngôn ngữ khác trong danh sách bên dưới nếu nóhọ cần dùng điều gì đó
đặc biệt.
Hãy xem qua các ngôn ngữ lập trình phổ biến nhất bên dưới:
JavaScript hoặc JS sẽ giúp tăng tính tương tác trên website. Script này
chạy trên các trình duyệt của người dùng thay vì trên server và thường
JavaScript
sử dụng thư vuiên của bên thứ 3 nên có thể tăng thêm chức năng cho
website mà không phải code từ đầu.
Viết tắt của “Hypertext Markup Language”, HTML là một trong số các
ngôn ngữ lập trình phổ biến nhất trên web và xây dựng nên các khối
HTML
chính của một trang web. Ví dụ về HTML tags là <p> cho đoạn văn và
<img> cho hình ảnh.
PHP là ngôn ngữ phía server, khác với JavaScript chạy trên máy client.
Nó thường được sử dụng trong các hệ quản trị nội dung nền PHP như
PHP
WordPress, nhưng cũng thường được dùng với lập trình back-end và có
thể tạo ra kênh truyền thông tin hiệu quả nhất tới và từ database.
CSS viết tắt của “Cascading Style Sheets” , nó giúp webmaster xác định
styles và định nghĩa nhiều loại nội dung. Bạn có thể làm vậy thủ công
CSS
với mọi yếu tố trong HTML, nhưng nếu vậy bạn sẽ cứ lặp đi lặp lại
thành phần đó mà bạn dùng ở nhiều nơi khác nhau.

13
Nếu xem ngôn ngữ lập trình như là việc xây ngôi nhà, HTML sẽ định dạng kiến
trúc của căn nhà, CSS sẽ là thảm và tường để trang trí ngôi nhà đẹp hơn. JavaScript
thêm yếu tố tương tác trong ngôi nhà, như là việc mở cánh cửa và làm đèn sáng.
Bạn vẫn có thể làm web mà không có JavaScript nhưng rủi ro là website của bạn
trông như là những web thời những năm 1995.
Làm thế nào để thêm JavaScript trên website của bạn?
Để thêm chuỗi code JavaScript code vào trang web, bạn sẽ cần gắn tag <script>. Ví
dụ như sau:
<script type="text/javascript">
Your JavaScript code
</script>
Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag <header> cho website của bạn
trừ khi bạn muốn nó thực thi tại một thời điểm nhất định hoặc một yếu tố nhất định
của trang web. Bạn cũng có thể lưu code JavaScript dưới file riêng và gọi nó lên
mỗi khi cần trên website.
Vậy, JavaScript là gì?
JavaScript là ngôn ngữ lập trình mang đến sự sinh động của website. Nó khác với
HTML (thường chuyên cho nội dung) và CSS (thường chuyên dùng cho phong
cách), và khác hẵn với PHP (chạy trên server chứ không chạy dưới máy client).
Bạn cần biết gì:
1. JavaScript là ngôn ngữ dễ học;
2. Nó được phát triển bởi Netscape, và đang được dùng trên 92% webstie;
3. JS có thể được gắn vào một element của trang web hoặc sự kiện của trang
web như cú click chuột;
4. Hoạt động trên đa trình duyệt và đa thiết bị;
5. Nhanh và nhẹ hơn các ngôn ngữ lập trình khác;
6. Có thể ít an toàn hơn vì độ phổ biến của nó;
7. Bạn có thể thêm JavaScript trực tiếp vào HTML hoặc bạn có thể lưu nó trên
files riêng biệt và gọi lên khi cần.
4. Thời điểm thực hiện một đoạn Script
4.1.Cấu trúc của đoạn Javascript

4.2.Javascript trong một trang HTML


- Đặt các dòng mã lệnh của Javascript giữa cặp thẻ <script></script>
- Có thể viết nhiều đoạn mã lệnh Javascript trong cùng một tập tin HTML. Các khối
mã lệnh Javascript có thể đặt bất kỳ nơi nào của trang HTML. Có thể đặt trong cặp

14
thẻ <head></head> hoặc trong cặp <body></body> tuy nhiên ta nên đặt trong cặp
thẻ <head> để dễ kiểm soát mã lệnh và cùng dễ sửa đổi chương trình.
- Có thể viết một tệp tin Javascript riêng và sau đó kết nối với một hoặc nhiều tệp
tin trang web khác nhau.

15
4.3. Môi trường viết Javascript
Có thể dùng chương trình soạn thảo: Frontpage, Notepate, Visual InterDev,
Dreamweaver, chọn chế độ code, Dreamweaver hỗ trợ phân biệt từ khóa bằng màu
chữ, hỗ trợ các hàm, thuộc tính của các tag, giúp người sử dụng thuận tiện trong
việc thiết kế và viết chương trình.
5. Các biến
Biến trong JavaScript là một định danh dùng để lưu trữ dữ liệu, trạng thái (số,
chuỗi, đối tượng, ...), thông qua định danh này chương trình sẽ làm việc với vùng
nhớ bằng cách gọi định danh này.
Mỗi biến có một kiểu dữ liệu riêng, dựa vào kiểu dữ liệu của biến có các thao tác
khác nhau với biến. Ví dụ với biến kiểu số nguyên, số thực thì có phép cộng, trừ,
nhân, chia. Biến kiểu chuỗi thì có độ dài của chuỗi, phép nối 2 chuỗi, ...
16
5.1. Khai báo biến

5.2. Quy tắc đặt tên biến


—Dùng các ký tự a..z, A..Z, 1..9, dấu gạch dưới ‘_’, dấu ‘$’
—Tên biến không trùng với từ khóa JS
—Tên biến không bắt đầu bởi con số
—Tên biến không có ký tự khoảng trắng
—Tên biến là case sensitive.
Lưu ý: trong JavaScript có phân biệt chữ hoa và chữ thường. Ví
dụ STDIO và Stdio được hiểu là hai tên khác nhau.
Ví dụ:
name_of_cat // Hợp lệ
_Address // Hợp lệ
3school // Không hợp lệ vì bắt đầu bằng số
position%Enemy // Không hợp lệ vì có chứa kí tự đặc biệt %
Một số ví dụ về khai báo biến trong JavaScript:
let a;
a = 5;
let b = 6;
let c = a + b;

console.log(a);
console.log(c);

let name = "Lập trình JavaScript";

console.log(name);
Dòng 1: Khai báo một biến có tên là a.
Dòng 2: Lưu giá trị 5 vào biến a.
Dòng 3: Khai báo một biến có tên là b và lưu giá trị 6.
Dòng 4: Khai báo một biến c và lưu giá trị bằng tổng của biến a vào biến b.
Dòng 9: Khai báo biến name và lưu trữ chuỗi Lập trình JavaScript vào name.
Nếu không gán giá trị cho biến thì biến đó sẽ có kiểu là undefined.

17
Một số ví dụ khác:
var d = 7 + 1 + 4;
var e = 8.23;
var f;
f = d + 3;
var name = "Nguyễn Nghĩa";
var address = "Hồ Chí Minh";
var info = name + address;
5.3. Một số phong cách đặt tên biến
Phong cách đặt tên biến cũng rất quan trọng, để dễ dàng hiểu ý nghĩa của biến:
· Tên biến phải là một danh từ.
· Tên biến phải mang ý nghĩa rõ ràng.
Underscore
Mô tả: Mỗi từ cách nhau bởi mỗi dấu gạch dưới.
Ví dụ: name_of_cat, title_website, windows_height, ...
Camel case
Mô tả: Những chữ cái đầu của mỗi từ đều viết hoa, những chữ cái còn lại đều viết
thường.
Ví dụ: NameOfCat, TitleWebsite, WindowsHeight, ...
Một phong cách được biến tấu từ Camel Case là những chữ cái đầu tiên viết thường
và những chữ sau đó tuân theo Camel Case
Ví dụ: nameOfCat, titileWebsite, windowsHeight, ...
6. Các kiểu dữ liệu
- Trong JavaScript, các kiểu dữ liệu được chia thành những loại cơ bản như sau:
o string
o number
o boolean
o object
o undefined
o array (đây là một trường hợp đặc biệt của kiểu dữ liệu object)
6.1. Dữ liệu kiểu string
- Trong JavaScript, các dữ liệu thuộc kiểu string (hay còn được gọi là "chuỗi") là
một tập hợp gồm các ký tự, chúng được viết bên trong cặp dấu nháy kép hoặc cặp
dấu nháy đơn.
Ví dụ:
o Giá trị của biến a là một chuỗi được viết bên trong cặp dấu nháy kép.

18
o Giá trị của biến b là một chuỗi được viết bên trong cặp dấu nháy đơn.

<script>
var a = "Tài liệu học HTML";
var b = 'Lập Trình Web';
</script>
6.2. Dữ liệu kiểu number
- Trong JavaScript, các dữ liệu thuộc kiểu number (hay còn được gọi là "số") là một
tập hợp của các con số (0 - 9) không chứa dấu khoảng trắng và có thể chứa dấu trừ
(-) nằm ở đầu để đại diện cho số âm.
Ví dụ:
o Giá trị của biến a là số 22.
o Giá trị của biến b là số -1993.

<script>
var a = 22;
var b = -1993;
</script>
- Nếu một số được đặt bên trong gặp dấu nháy kép hoặc cặp dấu nháy đơn thì nó sẽ
bị chuyển sang kiểu dữ liệu string.
Ví dụ:
o Giá trị của biến a là chuỗi 22.
o Giá trị của biến b là chuỗi -1993.

<script>
var a = "22";
var b = '-1993';
</script>
6.3. Dữ liệu kiểu boolean
- Trong JavaScript, các dữ liệu thuộc kiểu boolean chỉ có thể nhận một trong hai giá
trị, đó là:
§ true (đúng)
§ false (sai)
- Có hai cách để nhận giá trị kiểu boolean, đó là:
§ Gán giá trị trực tiếp.
§ Nhận được từ một điều kiện.
19
Ví dụ:
o Giá trị của biến a là true.
o Giá trị của biến b là false.
o Giá trị của biến c là true, vì điều kiện (6 > 2) là đúng.
o Giá trị của biến d là false, vì điều kiện (6 > 10) là sai.

<script>
var a = true;
var b = false;
var c = 6 > 2;
var d = 6 > 10;
</script>
6.4. Dữ liệu kiểu object
- Trong JavaScript, các dữ liệu thuộc kiểu object (hay còn được gọi là "đối
tượng") là một tập hợp gồm những cái tên và mỗi cái tên sẽ chứa đựng một giá trị
dữ liệu.
- Lưu ý: Những cái tên còn được gọi là "thuộc tính" của đối tượng, giá trị của
những cái tên còn được gọi là "giá trị thuộc tính của đối tượng".
Ví dụ:
Đoạn mã bên dưới dùng để tạo một đối tượng có tên là SinhVien, nó có ba thuộc
tính:
o Thuộc tính name với giá trị là chuỗi Nhân.
o Thuộc tính gender với giá trị là chuỗi Nam.
o Thuộc tính year với giá trị là số 1993.

<script>
var SinhVien = {
name:"Nhân",
gender:"Nam",
year:1993
}
</script>
6.5. Dữ liệu kiểu undefined
- Trong JavaScript, khi một biến được khai báo mà không gán giá trị thì biến đó sẽ
có giá trị là undefined và kiểu dữ liệu cũng là undefined.
Ví dụ:

20
<script>
var myName; //biến myName sẽ có giá trị là undefined và kiểu dữ liệu là
undefined
</script>
- Ngoài ra, giá trị undefined còn có thể nhận được bằng cách gán trực tiếp.
Ví dụ:

<script>
var myName = "Nguyễn Thành Nhân"; //biến myName có kiểu dữ liệu là string
myName = undefined; //biến myName có kiểu dữ liệu là undefined
</script>
6.6. Dữ liệu kiểu array
- Trong JavaScript, array còn được gọi là mảng, nó là một trường hợp đặc biệt của
đối tượng.
(Thật ra, mảng có kiểu dữ liệu là object)
- Mảng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị đồng thời, mỗi giá trị
được gọi là một phần tử mảng.
Ví dụ:
Đoạn mã bên dưới dùng để tạo một mảng có tên là mobile và nó có ba phần tử:
o Phần tử thứ nhất có giá trị là HTC.
o Phần tử thứ nhất có giá trị là Nokia.
o Phần tử thứ nhất có giá trị là SamSung.

<script>
var mobile = ["HTC","Nokia","SamSung"];
</script>
6.7. Cách xác định kiểu của dữ liệu
- Để xác định kiểu của một dữ liệu nào đó thì ta sử dụng toán tử typeof
Ví dụ:

<script>
var a = typeof ""; //string
var b = typeof "Lập Trình Web"; //string
var c = typeof 1993; //number

21
var d = typeof true; //boolean
var e = typeof false; //boolean
var f = typeof {name:"Nhân", gender:"Nam", year:1993}; //object
var g = typeof undefined; //undefined
var h = typeof ["HTC","Nokia","SamSung"]; //object
</script>
- Ta cũng có thể kiểm tra kiểu dữ liệu của một biến.
Ví dụ:

<script>
var year = 1993;
var a = typeof year; //number
</script>
7. Các toán tử
Toán tử JavaScript gồm có các toán tử số học, các toán tử so sánh, toán tử logic và
các toán tử với chuỗi ký tự
Cơ bản về các biểu thức và toán tử trong Javascript, các toán tử cần nắm vững ở
đây là các toán tử số học toán tử gán toán tử so sánh toán tử logic các toán tử
với chuỗi ...
Các toán tử gán trong Javascript
Toán tử gán được dùng để gán giá trị ở bên phải toán tử vào biến ở bên trái toán tử.
Có các toán tử gán sau:
Toán tử Ví dụ Ý nghĩa
= x=y gán y vào x
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
7.1.Các toán tử số học
Các toán tử số học này thực hiện trên các số - dữ liệu dạng số (cụ thể hoặc biến).
Toán tử Mô tả Ví dụ
+ phép cộng 25 + 5 = 30
- phép trừ 10 - 5 = 5

22
* phép nhân 2*3 = 6
/ phép chia 20 / 2 = 10
% lấy phần dư của phép chia 56 / 3 = 2
++ Tăng thêm 1 var a = 10; a ++; //giá trị a là 11
-- giảm đi 1 var a = 10; a --; //giá trị a là 9
var x =10+5;
document.write(x);
// In ra: 15
Có thể sử dụng nhiều số hạng:
var x =10;
var y = x +5+22+45+6548;
document.write(y);

//In ra : 6630
Ví dụ về phép chia lấy phần dư modulus
var myVariable =26%6;
//myVariable bằng 2
Chú ý về phép toán tăng thêm 1 ++ và giảm 1 --: Khi viết biểu thức thì toán tử có
thể ở bên trước hoặc sau biến cần tăng giảm, kết quả trả về của biểu thức có sự khác
nhau tùy cách viết
Viết sau biến như: a = var++, b = var-- thì giá trị trả về của biểu thức (giá trị gán
vào a, b) là giá trị gốc của var, còn bản thân var vẫn được tăng, giảm
var a =0; b =10;
var a = b++;
//a sẽ là 10; b là 11
Nếu toán tử ++-- viết bên trái biến, thì giá trị biểu thức trả về chính là biến sau khi
tăng giảm
var a =0; b =10;
var a =++b;
//a sẽ là 11; b là 11
7.2. Toán tử so sánh
Toán tử so sánh sử dụng trong các biểu thức về logic để so sánh bằng nhau, khác
nhau. Nó trả về giá trị true false
JavaScript có một số toán tử so sánh, ví dụ so sánh bằng: ==

23
var num =10;
// num == 8 will return false
Bảng toán tử so sánh
Toán tử Diễn tả Ví dụ
== so sánh bằng 5 == 10 false
=== giống nhau (cùng giá trị và kiểu dữ liệu) 5 === 10 false
!= khác giá trị 5 != 10 true
!== Khác giá trị và kiểu 10 !== 10 false
> lớn hơn 10 > 5 true
>= lớn hơn hoặc bằng 10 >= 5 true
< nhỏ hơn 10 < 5 false
<= nhỏ hơn 10 <= 5 false
Khi sử dụng các toán tử này, hãy chắc chắn các số hạng có cùng kiểu; số so sánh
với số; chuỗi so sánh với chuỗi ...
7.3. Toán tử logic
Bảng toán tử logic gồm các phép toán : và - hoặc - phủ định
Toán tử Diễn tả
&& phép và trả về true nếu 2 số hạng là true: a && b
|| phép hoặc trả về true nếu 1 trong 2 số hạng là true : a || b
! phủ định; trả về giá trị ngược với biểu thức !a
var a =(4>2)&&(10<15);
//a nhận giá trị false: vì 4 > 2 là true, 10 < 15 là false;
//a = true && false;
7.4. Toán tử điều kiện
variable = (condition) ? value1: value2;
Nhận giá trị value1 nếu điều kiện là true, nhận value2 nếu điều kiện false
var isAdult = (age < 18) ? "Too young": "Old enough";
//isAdult là Too young nếu age nhỏ hơn 18
//isAdult là Old enough nếu age lớn hơn hoặc bằng 18
7.5. Toán tử với chuỗi
Toán tử với chuỗi sử dụng nhiều là nối hai chuỗi lại với nhau, sử dụng toán tử + để
nối. Lưu ý toán tử này có thể nối số vào chuỗi.
var mystring1 = "Học viết mã ";
24
var mystring2 = "JavaScript.";
document.write(mystring1 + mystring2);

//sẽ viết ra: Học viết mã JavaScript.


Xuất biến ra chuỗi với kỹ thuật Template Literal
Bạn có thể đưa vào chuỗi nằm giữa dấu `` (không phải '' hay ""), trong chuỗi đó có
thể chèn biểu thức với ký hiệu ${biểu-thức}
let tb =`Hai nhân hai là ${2*2}`;
let name ="XuanThuLab";
let msg =`Xin chao ${name}`;
console.log(tb);
console.log(msg);
7.6. Toán tử typeof
Toán tử typeof trả về kiểu dữ liệu cần kiểm tra của một biến, một giá trị.
var a = 1;
var b = "Hi";
var c = true;
var d = null;
var e;
console.log(typeof(a)); // trả về number
console.log(typeof(b)); // trả về string
console.log(typeof(c)); // trả về boolean
console.log(typeof(d)); // trả về object
console.log(typeof(e)); // trả về undefined
console.log(typeof(f)); // trả về undefined
8. Các biểu thức
- Tương tự như trong toán học, biểu thức trong JavaScript cũng là một tập hợp gồm
các toán hạng và các toán tử.
8.1. Toán hạng
- Điểm khác nhau giữa toán hạng trong JavaScript và toán hạng trong toán học
chính là toán hạng trong JavaScript thì không nhất thiết phải là một chữ số, nó có
thể là một giá trị hoặc một biến.
- Ví dụ, ở kịch bản bên dưới, giá trị của biến b là một biểu thức (trong đó biến a là
một toán hạng).

<script>

25
var a = 50;
var b = a + 20; //Biến b sẽ có giá trị là 70
</script>

8.2. Toán tử
- Các toán tử trong JavaScript có chức năng giống với toán tử trong toán học.
- Tuy nhiên, một vài toán tử trong JavaScript có cách viết khác so với cách viết toán
tử trong toán học.
- Bên dưới là danh sách những toán tử cơ bản nhất trong JavaScript:

Toán tử Tên gọi Ví dụ Kết quả

+ Phép cộng 10 + 4 14
- Phép trừ 10 - 4 6
* Phép nhân 10 * 4 40
/ Phép chia 10 / 4 2.5
% Phép chia lấy phần số dư 10 % 4 2
- Phép cộng trong JavaScript tương đối khác so với phép cộng trong toán học.
Trong JavaScript:
o Số có thể cộng số => cho ra số.
o Số có thể cộng chuỗi (hoặc chuỗi có thể cộng số) => cho ra chuỗi.
o Chuỗi có thể cộng chuỗi => cho ra chuỗi.
Ví dụ:

<script>
var a = 5 + 7; //Biến a sẽ có giá trị là 12
var b = 1993 + "Thành Nhân"; //Biến b sẽ có giá trị là 1993Thành Nhân
var c = "Thành Nhân" + 1993; //Biến c sẽ có giá trị là Thành Nhân1993
var d = "Nguyễn" + " Thành Nhân"; //Biến d sẽ có giá trị là Nguyễn Thành Nhân
</script>
8.3. Độ ưu tiên của các toán tử
- Một biểu thức đơn giản sẽ bao gồm hai toán hạng và một toán tử, ví dụ: 5 + 9
- Một biểu thức phức tạp sẽ có nhiều toán hạng và nhiều toán tử (điều đó đồng
nghĩa với việc trong một biểu thức phức tạp sẽ bao gồm nhiều biểu thức đơn giản),
ví dụ: 7 + 8 * (10 - 2) + 3 * 4

26
- Thông thường, trong một biểu thức phức tạp, các biểu thức đơn giản sẽ thực thi
lần lượt theo thứ tự từ trái sang phải. Tuy nhiên, tùy vào độ ưu tiên của toán tử sẽ
quyết đinh biểu thức nào được thực thi trước.
- Ví dụ, thứ tự thực thi của biểu thức 7 + 8 * (10 - 2) + 3 * 4 như sau:
o 7 + 8 * (10 - 2) + 3 * 4 => 7 + 8 * 8 + 3 * 4
o 7 + 8 * 8 + 3 * 4 => 7 + 64 + 3 * 4
o 7 + 64 + 3 * 4 => 7 + 64 + 12
o 7 + 64 + 12 => 71 + 12
o 71 + 12 => 83
- Dưới đây là bảng tổng hợp mức độ ưu tiên của một số toán tử cơ bản nhất trong
JavaScript

Mức độ ưu tiên Toán tử

1 ()
2 * / %
3 + -
8.4. Khoảng trắng giữa các toán hạng và toán tử
- Trong JavaScript, dấu khoảng trắng giữa các toán hạng và toán tử là không quan
trọng (có cũng được, không có cũng không sao)
- Ví dụ, ba biểu thức bên dưới có cùng một kết quả:
o 7+8-3*4
o 7+8-3*4
o 7+ 8- 3 *4
9. Mảng
Mảng Array là một đối tượng định nghĩa sẵn trong JS, nó là đối tượng chứa danh
sách các dữ liệu. Có hai cách tạo ra đối tượng mảng, sử dụng toán tử new và khởi
tạo bằng ký hiệu
Cách 1:Tạo mảng với new Array(), ví dụ:
var courses =newArray("HTML","CSS","JS");
Cách 2:Tạo mảng với khai báo dữ liệu trong []
var courses =["HTML","CSS","JS"];
Mỗi phần từ có một chỉ số trong mảng, phần tử thứ nhất chỉ số là 0. Để truy cập tới
phần tử mảng dùng ký hiệu tên-mảng[chỉ-số-phần-tử]
var cacmonhoc =newArray("HTML","CSS","JS");
var monhoc = courses[0];// HTML

27
cacmonhoc[1]="C++";//đổi phần tử thứ 2 thành C++
Khi cố gắng truy cập phần tử mảng, mà phần tử đó không tồn tại thì nó trả về giá trị
bằng undefined
var courses =newArray("HTML","CSS","JS");
document.write(courses[10]);
//Xuất ra "undefined" vì phần tử thứ 10 không có
Tạo mảng bằng cách chỉ định số lượng phần tử
Ở cách tạo thứ 2 này, các phần tử không được gán giá trị ngay, mảng sẽ tạo ra số
lượng phần tử yêu cầu sau đó giá trị từng phần tử được gán sau.
var courses =newArray(3);
courses[0]="HTML";
courses[1]="CSS";
courses[2]="JS";
Một số thuộc tính và phương thức
Một số thuộc tính và phương thức định nghĩa sẵn cho các đối tượng mảng
Số lượng phần tử trong mảng
Thuộc tính length cho biết số lượng phần tử trong mảng
var courses =["HTML","CSS","JS"];
document.write(courses.length);
//Outputs 3
Kết hợp 2 mảng
Để kết hợp 2 mảng thành một mảng, dùng phương thức concat
var c1 =["HTML","CSS"];
var c2 =["JS","C++"];
var courses = c1.concat(c2);
Ví dụ trên có được mảng courses bằng cách nối c2 vào c1. Vậy courses có bốn phần
tử: HTML, CSS, JS, C++. Nhớ là concat không tác động gì trên mảng gốc, mà nó
chỉ sử dụng các mảng gốc để tạo ra mảng kết hợp mới. Vậy mảng c1, c2 vẫn không
có sự thay đổi nào
Duyệt qua các phần tử mảng bằng forEach
courses.forEach(function(item, index, array){
console.log(item, index);
});

28
//HTML 0
//CSS 1
//JS 2
Thêm một phần tử vào cuối bằng push
courses.push("GO");
Thêm một phần tử vào đầu bằng unshift
courses.unshift("C++");
Xóa phần tử cuối của mảng bằng pop
courses.pop();
Xóa phần tử đầu của mảng bằng shift
courses.shift();
Xóa các phần tử theo chỉ số splice
//Xóa 2 phần từ bắt đầu phần tử ở vị trí index
courses.splice(index,2);
Nhân bản một mảng với slice
var courses2 = courses.slice();
Mảng kết hợp
Nhiều ngôn ngữ lập trình có hỗ trợ đánh chỉ số không chỉ là bằng số mà có thể bằng
text, đây là các mảng kết hợp. Rất tiếc là JavaScript không hỗ trợ loại mảng này.
Tuy nhiên, bạn nhớ lại về đối tượng, truy cập thuộc tính đối tượng hoạt động khá
giống với mảng kết hợp.
var person =[];//mảng rỗng
person["name"]="John";
person["age"]=46;

document.write(person["age"]);
//Outputs "46"
Bạn thấy person hoạt động giống như một đối tượng. Các chỉ số name, age không
phải là chỉ số mảng mà là thuộc tính của đối tượng person. Do đó nếu bạn lấy số
phần tử mảng person.length sẽ trả về 0
Cách đơn giản để duyệt qua các phần tử mảng
var index;
var a =["a","b","c"];

29
for(index =0; index < a.length;++index){
console.log(a[index]);
}

30
10. Các câu lệnh điều khiển
Câu lệnh điều kiện if, else if và các vòng lặp như vòng lặp for, vòng lặp while, vòng
lặp do while, lệnh rẽ nhánh switch, break, continue
Khối lệnh trong Javascript
Nhiều câu lệnh Javascript có thể nhóm với nhau tạo ra khối lệnh, các khối lệnh
được nhóm bằng cặp dấu ngoặc nhọn {}, các khối thường sử dụng trong các câu
lệnh điều khiển rẽ nhánh, vòng lặp ...
{
//Các dòng lệnh trong khối
}
Khối lệnh cũng có thể dán nhãn cho nó, để sau này từ vị trí khác, bạn có thể nhảy
đến thi hành các lệnh trong khối (với lệnh continue, break)
labelexamp :{
//Các dòng lệnh trong khối có nhãn labelexamp
}
Chú ý khai báo biến với var thì nó không bị giới hạn trong khối, khai báo biến
với let thì phạm vị hiệu lực chỉ trong khối khai báo
var a =5;
{
var a =2;
}
console.log(a);
//Xuất ra là 2 => biến a trong và ngoài khối là 1

let b =10;
{
let b =20;
}
//Xuất ra là 10 => biến b trong và ngoài khối là khác nhau
alert(b);
Lệnh if, if ... else
Lệnh if : nếu điều kiện là đúng (true) thì thi hành các lệnh trong khối - nếu điều
khiện sai false thì khối lệnh sau nó bị bỏ qua, cú pháp là:
if(điều_kiện){
//Các dòng lệnh trong khối

31
}
Ví dụ:
var myNum1 =7;
var myNum2 =10;
if(myNum1 < myNum2){
alert("JavaScript rất dễ học.");
}
Thi hành đoạn mã trên sẽ hiện thị hộp thoại thông báo: JavaScript rất dễ học. vì
điều kiện là true nên lệnh alert thi hành
if ... else ...
Nếu biểu thức logic là true thi hành các lệnh trong khối if, nếu false thì thi hành
khối lệnh else
if(expression){
// thi hành các lênh ở đây (khối if) nếu true
}
else{
// thi hành các lệnh (khối else) nếu điều kiện false
}
Ví dụ
var myNum1 =7;
var myNum2 =10;
if(myNum1 > myNum2){
alert("Đây là khối lệnh 1");
}
else{
alert("Đây là khối lệnh 2");
}
Chạy code trên hiện thị thông báo: Đây là khối lệnh 2 vì myNum1 >
myNum2 là false
Khối lệnh else if
else if sẽ tạo ra câu lệnh điều kiện if mới nếu điều kiện trước đó false
var course =1;
if(course ==1){
document.write("HTML Tutorial");

32
}elseif(course ==2){
document.write("CSS Tutorial");
}else{
document.write("JavaScript Tutorial");
}
Chạy code trên, trình duyệt sẽ hiện thị HTML Tutorial, nếu bạn gán biến course thì
hiện thị CSS Tutorial, nếu gán course khác với 1 và 2 thì sẽ hiện thị JavaScript
Tutorial
Lệnh switch
Trong trường hợp bạn có rẽ nhánh (nhiều điều kiện) khác nhau thay vì sử dụng
nhiều else if hãy dùng switch với cú pháp
switch(expression){
case n1:
//.. thi hành nếu expression bằng n1
break;
case n2:
//.. thi hành nếu expression bằng n2
break;
default:
//.. mặc định thi hành nếu expression không bằng giá trị nào ở trên
}
Ví dụ:
var day =2;
switch(day){
case1:
document.write("Monday");
break;
case2:
document.write("Tuesday");
break;
case3:
document.write("Wednesday");
break;
default:
document.write("Another day");

33
}
// Outputs "Tuesday"
Lưu ý từ khóa break; để điều hướng ra khỏi khối. Thường bạn cần có break; ở cuối
mỗi khối của lệnh switch, nếu thiếu break thì sẽ không thoát lệnh mà sẽ thi hành
khối tiếp theo. Ở ví dụ trên, nếu bỏ đi break, thì script sẽ chạy từ điểm rẽ
nhánh case 2: cho đến cuối (xuất ra: Tuesday, Wednesday, Another day)
Từ khóa default: định nghĩa khối mặc định, khối này thi hành nếu tất cả các điều
kiện rẽ nhánh không thỏa mãn.
11. Các lệnh vòng lặp
Vòng lặp for
Cú pháp:
for(statement1; statement2; statement3){
Khối lệnh thi hành
}
· statement1 : lệnh thi hành trước khi vòng lặp for bắt đầu
· statement2 : điều kiện kiểm tra trước mỗi lần thi hành khối lệnh for (true thì
khối lệnh sẽ thi hành, false sẽ khối for sẽ không thi hành - thoát lặp)
· statement3 : thi hành sau mỗi lần một vòng hoàn thành
Ví dụ:
for(i=1; i<=5; i++){
document.write(i +"<br >");
}
//In ra
1
2
3
4
5
Có thể bỏ qua statement1 (vẫn giữ lại dấu ;)
var i =1;
for(; i<=5; i++){
document.write(i +"<br >");
}
//In ra
1

34
2
3
4
5
Tương tự bạn có thể bỏ qua statement3 và statement2 (vẫn giữ ;), lưu ý bạn cũng có
thể sử dụng lệnh break; để thoát vòng lặp.
var i =0;
for(;;i+=2){
if(i>10)break;//Thoát vòng lặp
document.write(i +"<br >");
}
for ... in
for ... in duyệt qua các key của đối tượng đếm được (không dùng cho mảng)
//Cú pháp
for(let yourvar in object){
}
//Ví dụ
let ob ={key1:1, key2:2};
for(let k in ob){
console.log(k);
}
//In ra: key1, key2
for ... of
Lệnh for ... of duyệt qua các đối tượng.
//Cú pháp
for(let yourvar in objects){
}
//Ví dụ
let a =["A","B","C"];
for(let e in a){
console.log(e);
}
//In ra A,B,C
Vòng lặp while

35
Thi hành khối lệnh khi mà điều kiện kiểm tra vẫn là true
while(điều-kiện){
//Khối lệnh
}
Đầu tiên nó kiểm tra điều kiện, nếu true sẽ thi hành khối lệnh. Đến cuỗi khối lại
kiểm tra điều kiện, nếu điều kiện vẫn là true thì lại tiếp tục thì hành vòng mới của
khối lệnh.
Ví dụ
var i=0;
while(i<=5){
document.write(i +"<br >");
i++;
}
//In ra
0
1
2
3
4
5
Lưu ý về việc sau một số vòng thì điều kiện phải là false nếu không vòng lặp sẽ lặp
lại vô tận.
Vòng lặp do while
Giống với vòng lặp while nhưng khối lệnh thi hành luôn mà không kiểm tra điều
kiện trước, khi khối lệnh thi hành xong mới kiểm tra điều kiện để xem có lặp lại
hay không
Cú pháp
do{
//Khối lệnh
}
while(condition);
Ví dụ
var i=20;
do{
document.write(i +"<br >");

36
i++;
}
while(i<=25);
//In ra
20
21
22
23
24
25
Vòng lặp do ... while khối lệnh luôn được thi hành ít nhất một lần
Lệnh continue và break
Trong vòng lặp khi gặp continue; nó sẽ bỏ qua các lệnh còn lại và khởi tạo vòng lặp
mới luôn. Còn nếu gặp break; thì bỏ qua các lệnh còn lại đồng thời thoát khỏi vòng
lặp.
for(i =0; i <=70000; i++){
if(i ==5){
continue;//Khởi tạo vòng lặp mới luôn
}
document.write(i +"<br >");
if(i >=7){
break;//Thoát lặp nếu i >=7
}
}
//In ra các số: (bỏ qua 5)
0
1
2
3
4
6
7
Lệnh continue còn dùng để nhảy đến một khối lệnh có nhãn bằng cú pháp
continue nhãn_khối_lệnh;

37
Lệnh break còn dùng để hủy thi hành khối lệnh bên ngoài có nhãn, với cú pháp:
break nhãn_khối_lệnh_ngoài;
Phần nói về các đối tượng có kiểu liệt kê được (ví dụ như mảng, danh sách ...), còn
có các lệnh duyệt qua từng phần tử liệt kê được đó với các lệnh for ... in, for ... of.
12. Hàm(function)
12.1. Hàm là gì?
- Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo một
thứ tự xác định để xây dựng thành một chức năng cụ thể
- Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên.
Ví dụ:
o Trong kịch bản bên dưới, chúng ta có một hàm tên là GioiThieuBanThan.
o Hàm này gồm ba câu lệnh với chức năng là hiển thị một câu giới thiệu về
bản thân.

<script>
function GioiThieuBanThan(){
var name = "Nhân";
var year = 1993;
document.write("Tôi là " + name + " sinh năm " + year);
}
</script>
- Một hàm có thể được gọi nhiều lần (hay nói cách khác là không giới hạn số lần
gọi hàm).
Ví dụ:
o Trong kịch bản bên dưới, hàm GioiThieuBanThan được gọi đến ba lần

<script>

function GioiThieuBanThan(){
var name = "Nhân";
var year = 1993;
document.write("Tôi là " + name + " sinh năm " + year);
}
GioiThieuBanThan(); //Gọi lần thứ nhất
document.write("<hr>");

38
GioiThieuBanThan(); //Gọi lần thứ hai
document.write("<br>");
document.write("<br>");
GioiThieuBanThan(); //Gọi lần thứ ba
</script>
12.2. Phân loại hàm
- Hàm được chia làm hai loại cơ bản: hàm không có tham số & hàm có tham số
- Hàm không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay
đổi.
Ví dụ:
o Hàm GioiThieuBanThan bên dưới là một hàm không có tham số
o Kết quả thực thi của nó luôn là hiển thị dòng chữ "Tôi là Nhân sinh năm
1993"

<script>
function GioiThieuBanThan(){
var name = "Nhân";
var year = 1993;
document.write("Tôi là " + name + " sinh năm " + year);
}
GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993
GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993
GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993
</script>
- Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy
vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau.
Ví dụ:
- Hàm GioiThieuBanThan bên dưới có hai tham số là x & y
- Về nội dung của hàm:
o Biến name được gán giá trị bằng với giá trị của tham số x
o Biến year được gán giá trị bằng với giá trị của tham số y
- (1) Trong lần gọi hàm đầu tiên:
o Tham số x được truyền giá trị là Trình Giảo Kim ==> biến name có giá trị
Trình Giảo Kim

39
o Tham số y được truyền giá trị là 1993 ==> biến year có giá trị 1993
==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Trình Giảo Kim
sinh năm 1993
- (2) Trong lần gọi hàm thứ hai:
o Tham số x được truyền giá trị là La Thành ==> biến name có giá trị La
Thành
o Tham số y được truyền giá trị là 1989 ==> biến year có giá trị 1989
==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là La Thành sinh
năm 1989
- (3) Trong lần gọi hàm thứ ba:
o Tham số x được truyền giá trị là Tần Thúc Bảo ==> biến name có giá trị
Tần Thúc Bảo
o Tham số y được truyền giá trị là 1985 ==> biến year có giá trị 1985
==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Tần Thúc Bảo
sinh năm 1985

<script>
function GioiThieuBanThan(x,y){
var name = x;
var year = y;
document.write("Tôi là " + name + " sinh năm " + year);
}
GioiThieuBanThan("Trình Giảo Kim", 1993); //Tôi là Trình Giảo Kim sinh năm
1993
GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989
GioiThieuBanThan("Tần Thúc Bảo", 1985); //Tôi là Tần Thúc Bảo sinh năm
1985
</script>
12.3. Cách khai báo & gọi hàm "không có tham số"
- Để khai báo (khởi tạo) một hàm thuộc thoại không có tham số, ta sử dụng cú pháp
như sau:

functiontên hàm() {
//Danh sách các câu lệnh của hàm
}

- Để gọi một hàm thuộc loại không có tham số, ta sử dụng cú pháp:

40
tên hàm()

Ví dụ:
Tạo một hàm có tên GioiThieuBanThan với chức năng hiển thị câu "Tôi là Nhân
sinh năm 1993"

<script>
function GioiThieuBanThan(){
document.write("Tôi là Nhân sinh năm 1993");
}
GioiThieuBanThan(); //Gọi hàm
</script>
12.4. Cách khai báo & gọi hàm "có tham số"
- Để khai báo một hàm thuộc thoại có tham số, ta sử dụng cú pháp như sau:

functiontên hàm(tham số thứ nhất, tham số thứ hai, tham số thứ ba, ....) {
//Danh sách các câu lệnh của hàm
}

- Tham số có tính năng gần giống như biến, tuy nhiên tham số thì chỉ có thể sử
dụng bên trong hàm.
- Khi khai báo hàm, ta khai báo danh sách các tham số thì điều này cũng gần giống
như việc khai báo danh sách các biến.
- Đối với hàm có tham số, khi gọi hàm ta phải truyền giá trị cho các tham số theo cú
pháp như sau:

tên hàm(giá trị tham số thứ nhất, giá trị tham số thứ hai, giá trị tham số thứ ba, ....)

- Việc truyền giá trị cho tham số cũng tương tự như việc gán giá trị cho biến, nếu ta
gọi hàm mà không truyền giá trị cho các tham số thì mặc định các tham số sẽ có giá
trị là undefined
Ví dụ:
o Tạo một hàm có tên là GioiThieuBanThan
o Hàm GioiThieuBanThan có hai tham số là name & year

<script>

function GioiThieuBanThan(name, year){

41
document.write("Tôi là " + name + " sinh năm " + year);
}
GioiThieuBanThan(); //Tôi là undefined sinh năm undefined
GioiThieuBanThan("Trình Giảo Kim"); //Tôi là Trình Giảo Kim sinh năm
undefined
GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989
GioiThieuBanThan("Tần Thúc Bảo", 1985); //Tôi là Tần Thúc Bảo sinh năm
1985
</script>
- Để tránh tình trạng tham số bị nhận giá trị undefined thì trong lúc khai báo hàm ta
có thể gán giá trị mặc định cho các tham số, khi đó nếu lúc gọi hàm ta không truyền
giá trị cho tham số thì tham số sẽ sử dụng giá trị mặc định được gán lúc khai báo.
Ví dụ:
o Hàm GioiThieuBanThan bên dưới có hai tham số là name & year
o Tham số là name được gán giá trị mặc định là Nhân
o Tham số là year được gán giá trị mặc định là 1993

<script>
function GioiThieuBanThan(name = "Nhân", year = 1993){
document.write("Tôi là " + name + " sinh năm " + year);
}
GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993
GioiThieuBanThan("Trình Giảo Kim"); //Tôi là Trình Giảo Kim sinh năm 1993
GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989
</script>
12.5. Gọi hàm thông qua một sự kiện
- Ta có thể thiết lập việc một hàm nào đó sẽ được thực thi khi một sự kiện nào đó
xảy ra (Ví dụ như: khi người dùng click chuột vào một phần tử, dí chuột vào một
phần tử, ....) bằng cách đặt câu lệnh gọi hàm vào bên trong thuộc tính sự kiện của
phần tử.
Ví dụ:

<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="GioiThieu()">Bấm vào đây</button>

42
<script>
function GioiThieu(){
alert("Tôi là Nguyễn Thành Nhân sinh năm 1993");
}
</script>
</body>
</html>
12.6. Lệnh return
- Lệnh return dùng để trả về cho hàm một giá trị.
(Sau khi thực thi xong, hàm sẽ có một giá trị, lúc đó nó có thể được sử dụng giống
như một biến)
Ví dụ 1:

<script>

function number(){
return (10*10 - 50);
}
var result_01 = number();
var result_02 = 7 + number() - 30;
var result_03 = "Hello: " + number();
</script>

Ví dụ 2:

<script>
function number(a,b){
return (a+b)*2;
}
var result_01 = number(5,10);
var result_02 = number(2,8) - 5;
var result_03 = 5*number(1,4) - 49;
</script>
Ví dụ 3:

43
<script>
function ThongTin(name, year){
var hoten = "Họ tên: " + name;
var namsinh = "Năm sinh: " + year;
var thongtin = hoten + "<br>" + namsinh;
return thongtin;
}
var SinhVien = "SINH VIÊN<hr>" + ThongTin("Nguyễn Thành Nhân", 1993);
document.write(SinhVien);
</script>

44
Bài 2: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT
Mã bài: MĐCNTT17.02
Giới thiệu:
Giới thiệu về các đối tượng cơ bảntrong Javascirpt.
Mục tiêu:
- Làm việc trên các đối tượng cơ bản
- Sử dụng các thuộc tính và phương thức của đối tượng
Nội dung chính:
1. Các đối tượng Javascript
1.1. Đối tượng
- Thuộc tính (biến) dùng để định nghĩa đối tượng và các phương thức (hàm)
tác động tới dữ liệu đều nằm trong đối tượng.
- Ví dụ: một chiếc xe hơi là một đối tượng. Các thuộc tính của nó là cấu tạo,
kiểu dáng và màu sắc. Hầu hết các chiếc xe hơi đều có một vài phương thức
chung như go(), brake(), reverse().
1.2. Thuộc tính và phương thức
- Để truy cập thuộc tính của đối tượng, chúng ta phải chỉ ra tên đối tượng và
thuộc tính của nó:
objectName.propertyName
- Để truy cập phương thức của đối tượng, chúng ta phải chỉ ra tên đối tượng và
thuộc tính của nó:
objectName.method()
1.3. Cách dùng đối tượng
- Khi tạo trang web, chúng ta cần chèn:
- Các đối tượng trình duyệt
- Các đối tượng có sẵn (thay đổi phụ thuộc vào ngôn ngữ kịch bản được sử
dụng)
- HTML elements
- Chúng ta cũng có thể tạo ra các đối tượng để sử dụng theo yêu cầu của mình.
2.Cây phân cấp của đối tượng

Đối tượng của trình duyệt

Đối tượng kịch bản


45
3. Câu lệnh eval
- Hàm eval được dùng để đánh giá một chuỗi mã lệnh mà không cần tham
chiếu đến bất cứ đối tượng cụ thể nào.
- Chuỗi có thể là một biểu thức JavaScript, một câu lệnh hoặc một nhóm câu
lệnh
- Biểu thức có thể bao gồm nhiều biến và nhiều thuộc tính của một đối tượng.
var x = 5;
var z = 10;
document.write(eval(“x + z + 5”));
4. Đối tượng String
- Đối tượng string được dùng để thao tác và làm việc với chuỗi văn bản.
- Chúng ta có thể tách chuỗi ra thành các chuỗi con và biến đổi chuỗi đó thành
các chuỗi hoa hoặc thường trong một chương trình.
- Cú pháp tổng quát:
stringName.propertyName
hay
stringName.methodName
- Cách tạo đối tượng String
Có 3 phương thức khác nhau để tạo ra chuỗi.
+ Dùng lệnh var và gán cho nó một giá trị.
+ Dùng một toán tử (=) có gán với một tên biến.
+ Dùng hàm khởi tạo String (string).
5. Đối tượng Math
- Đối tượng Math có các thuộc tính và phương thức biểu thị các phép tính toán
học nâng cao.
function doCalc(x) {
var a;
a = Math.PI * x * x;
alert ("The area of a circle with a radius of " + x + “ is " + a);
}

46
6. Đối tượng Date
- Date là một đối tượng có sẵn chứa thông tin về ngày và giờ.
- Đối tượng Date không có thuộc tính nào.
- Nó có nhiều phương thức dùng để thiết lập, lấy và xử lý các thông tin về thời
gian.
- Đối tượng Date lưu trữ thời gian theo số mili giây tính từ 1/1/1970 00:00:00
DateObject = new Date(parameters)
BÀI TẬP:
Bài tập JavaScript 1: Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên
và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có
màu đậm, tuổi được gạch chân.
<HTML>
<HEAD></HEAD>
<BODY>
<script language = "JavaScript">
var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi
Ten = prompt("Bạn hãy nhập vào tên ", "");
Tuoi = prompt("Bạn hãy nhập vào Tuổi : ", 20);
document.write("Chào bạn : <B> " + Ten + "</B>");
document.write("<BR>"); // Xuống dòng
document.write("Tuổi của bạn là : <U> " + Tuoi + "</U>");
</script>
</BODY>
</HTML>

Bài tập JavaScript 2: Tạo một nút nhấn (button) có name là welcome, value là ”
Welcome “. Một textbox có tên là msg, value = “Welcome to”.
Hướng dẫn: Sử dụng phương thức (hàm) write của đối tượng document để tạo.
Giải mẫu:
<HTML>
<HEAD></HEAD>
<BODY>
<script language = "JavaScript">
document.write("Tao Button va Text bang Script<BR>");
document.write("<BR>");
document.write("<input type=button name=welcome value = 'Welcome' ");

47
document.write("onclick = 'alert ('Welcome to JavaScript');' > ");
document.write("<input type = text name = msg value = 'Welcome to'>");
</script>
</BODY>
</HTML>
Bài tập JavaScript 3: Tạo một nút như trong ví dụ 2 và thêm chức năng sau: Khi
người dùng click vào nút welcome thì hiển thị thông báo “Welcome to JavaScript”
Hướng dẫn: Dùng thẻ để tạo nút nhấn và thêm thuộc tính onClick = “<Câu lệnh
JavaScript>;” (Trong đó <Câu lệnh JavaScript> có thể là một lệnh JavaScript bất
kỳ, ví dụ lệnh document.write, alert, prompt hoặc lệnh gọi hàm v.v…)
Giải mẫu:
<HTML>
<HEAD></HEAD>
<BODY>
<input type=button name= welcome value="Welcome" onclick="alert('Welcome to
JavaScript');">
</BODY>
</HTML>
Lưu ý quan trọng: Trong JavaScript, một hằng xâu được bao bởi cặp nháy đơn
hoặc nháy kép, ví dụ các xâu: ‘nháy đơn’, “nháy kép” là những xâu hợp lệ, tuy
nhiên bạn viết: ‘abc” hay “xyz’ là những xâu không hợp lệ. Trong trường hợp bạn
muốn in chính bản thân dấu nháy đơn hoặc nháy kép ra màn hình thì bạn đặt trước
nó một ký tự \, ví dụ bạn có thể in ra màn hình dòng chữ: Women’s day ra màn hình
bằng hai hàm alert và document theo các cách sau đây: alert(“Women’s
day”), document.write(‘Women\’s day’); alert(“Women\”s day”); alert(‘Women”s
day’); v.v…
Bài tập JavaScript 4: Lấy (đọc) giá trị của một phần tử HTML
Tạo 2 phần tử như trong ví dụ 2 bằng thẻ HTML, khi người dùng click chuột vào
nút Welcome thì hiển thị nội dung chứa trong text có tên là msg.
Hướng dẫn: Để lấy giá trị của một phần tử HTML, bạn viết <Tên phần tử>.value
Ví dụ: msg.value cho ta giá trị của text tên là msg.
Giải mẫu:
<HTML>
<HEAD></HEAD>
<BODY>

<input type = button name = welcome value = "Welcome" onclick =


"alert(msg.value)">

48
<input type = text name = msg value = "Welcome to JavaScript" size = 30>
</BODY>
</HTML>
Bài tập JavaScript 5: Khai báo hàm trong JavaScript và cách liên kết nút nhấn với
một hàm
Tạo 2 phần tử như ví dụ 2, khi người dùng nhấn nút thì gọi một hàm có tên là
HienThi, hàm hiển thị có chức năng hiển thị nội dung trong text có tên là msg ở
trên.
Hướng dẫn: Trong thẻ tạo button, bạn đặt thuộc tính onClick = “<Tên hàm>”, trong
trường hợp này bạn đặt OnClick = “HienThi()”. Điều này có nghĩa là khi người sử
dụng Click chuột (OnClick = Click chuột) thì trình duyệt hãy gọi hàm HienThi().
Cũng giống như trong ngôn ngữ C, Một hàm bắt buộc phải có cặp ngoặc đơn, cho
dù có tham số hay không. Ví dụ khi gọi hàm HienThi thì bạn phải viết là HienThi().
Giải mẫu:
<HTML>
<HEAD>
<Script Language = "JavaScript">
function HienThi() // Khai báo một hàm tên là HienThi
{
alert(msg.value); // Lấy nội dung trong text box và hiển thị
alert("Bạn hãy nhập vào ô text và thử lại !");
}
</Script>
</HEAD>
<BODY>
<input type = button name = welcome value = "Welcome" onclick = "HienThi()">
<input type = text name = msg value = "Welcome to JavaScript" size = 30>
</BODY>
</HTML>

Lưu ý: Trong C, để khai báo một hàm thường bạn viết, ví dụ: int HienThi() v…v..
Tuy nhiên, với JavaScript có hơi khác tí chút, thay vào đó bạn viết function
HienThi().
Bài tập JavaScript 6: Minh hoạ cách khai báo và sử dụng đối tượng Date trong
JavaScript để hiển thị ngày giờ của hệ thống.
Yêu cầu: Hãy hiển thị ngày và giờ của hệ thống máy tính khi trang Web được nạp.
Thông tin hiển thị ra có dạng như sau:

49
Hướng dẫn: Sử dụng đối tượng Date và sử dụng các hàm lấy thứ, ngày, tháng, năm
để in thông tin ra màn hình. Chú ý đến các hàm tính tháng, ngày trong tuần bị hụt
một đơn vị.
Bài tập JavaScript 7: Minh hoạ sử khai báo và dùng đối tượng Date để lấy giờ,
phút, giây của hệ thống.
Yêu cầu: Hiển thị Giờ và phút trong thanh tiêu đề của cửa sổ khi trang Web được
nạp.
Hướng dẫn: Giá trị hiển thị trong thanh tiêu đề của trang web được lưu trong thuộc
tính title của đối tượng document, do vậy để hiển thị thông tin trên thanh tiêu đề,
bạn cần viết: document.title = <Giá trị>. Ví dụ, để hiển thị dòng chữ “Hello Every
body !”, bạn viết: document.title “Hello Every body !”
Minh hoạ:
<HTML>
<BODY>
<script language="JavaScript">
var D = new Date();
document.title = "Bây giờ là: " + D.getHours()+" giờ "+ D.getMinutes()+ " phút.";
</script>
</BODY>
</HTML>
Bài tập JavaScript 8: Vận dụng biến đối tượng Date để tính tuổi của một người.
Yêu cầu : Cho người dùng nhập vào năm sinh của họ, sau đó hiển thị tuổi tương
ứng.
Hướng dẫn: Sử dụng đối tượng Date để lấy năm hiện tại. Tuổi sẽ bằng năm hiện tại
trừ đi năm sinh vừa nhập vào.
Minh hoạ mẫu:
<HTML>
<TITLE>Tính tuổi</TITLE>
<BODY>
<script language="JavaScript">
var D = new Date();
var NamSinh, NamHienTai;

50
NamHienTai = D.getYear(); // Lưu năm hiện tại vào biến
NamSinh = prompt("Bạn sinh năm bao nhiêu ? : ","");
alert("Tuổi của bạn bây giờ là : " + (NamHienTai-NamSinh));
</script>
</BODY>
</HTML>
Bài tập JavaScript 9: Tương tự như bài 3 nhưng năm sinh nhập vào không được
lớn hơn năm hiện tại.
Hướng dẫn: Sử dụng vòng lặp do…while để yêu cầu nhập lại nếu năm sinh > năm
hiện tại.
Minh hoạ mẫu:
<HTML>
<TITLE>Tinh tuoi</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var D = new Date();
var NamSinh, NamHienTai;
NamHienTai = D.getYear(); //Lưu năm hiện tại vào biến
do {
NamSinh = prompt("Bạn sinh năm bao nhiêu : ","");
} while (parseInt(NamSinh)>NamHienTai); //Nhập lại nếu Năm sinh>năm hiện tại
alert("Tuổi của bạn bây giờ là : " + (NamHienTai-NamSinh));
</script>
</BODY>
</HTML>

51
Bài 3: CÁC ĐỐI TƯỢNG CỦA TRÌNH DUYỆT TRONG JAVASCRIPT
Mã bài: MĐCNTT17.03
Giới thiệu:
Giới thiệu về các đối tượng của trình duyệttrong Javascirpt.
Mục tiêu:
- Nêu được cú pháp, cách áp dụng, các hàm cơ bản trong javascript
- Tạo được tài liệu HTML sử dụng mã javascript trong lập trình
- Tích cực chủ động làm các bài tập thực thành theo đúng nội dung
Nội dung chính:
1.Đối tượng event – Khái niệm
- Sự kiện là kết quả của các hành động được thực hiện bởi người sử dụng
- Một sự kiện có thể được khởi tạo bởi người sử dụng hoặc hệ thống
- Mỗi sự kiện được kết hợp với một đối tượng Event. Đối tượng Event cung
cấp thông tin về:
- Kiểu sự kiện
- Vị trí của con trỏ tại thời điểm xảy ra sự kiện
- Đối tượng Event được xem như một phần của trình xử lý sự kiện
*Chu trình sống của sự kiện:
- Chu trình sống của sự kiện thông thường bao gồm các bước:
+ Hành động của người sử dụng hoặc một điều kiện tương ứng khi sự kiện
xảy ra
+ Đối tượng Event được cập nhật ngay lập tức để phản ánh sự kiện
+ Phát sinh sự kiện
+ Trình xử lý sự kiện tương ứng được gọi
+ Trình xử lý sự kiện thực hiện các hành động và trả về kết quả
2. Các sự kiện Javascript
- Các sự kiện thông thường mà JavaScipt hỗ trợ:

• onClick • onMouseOut
• onChange • onLoad
• onFocus • onSubmit
• onBlur
* onClick • onMouseDown
• onClick
- Sự kiện onMouseOver
được khởi tạo khi người sử dụng• click chuột
onMouseUp
vào button hoặc các
phần tử form hoặc các liên kết.
<HTML>

52
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function compute(form)
{
if (confirm("Are you sure?"))
form.result.value = eval(form.expr.value)
else
alert("Please come back again.")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<INPUT TYPE="text" NAME="expr"
SIZE=15 ><BR><BR>
<INPUT TYPE="button"
VALUE="Calculate"
ONCLICK="compute(this.form)">
<BR><BR><BR>
Result:
<INPUT TYPE="text" NAME="result"
SIZE=15 >
<BR>
</FORM>
</BODY>
</HTML>
* onChange
- Sự kiện onChange xảy ra khi một phần tử form thay đổi. Điều này có thể xảy ra
khi nội dung của phần tử text thay đổi, hoặc khi một lựa chọn trong danh sách lựa
chọn thay đổi.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- hide script from old
browsersfunction checkNum(num)

53
{
if (num == "")
{
alert("Please enter a number");
return false;
}
if (isNaN (num))
{
alert("Please enter a numeric value");
return false;
}
else alert ("Thank you");
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY bgColor = white>
<FORM>
Please enter a number:
<INPUT type = text size = 5 onChange="checkNum(this.value)">
</FORM>
</BODY>
</HTML>
* onFocus/onBlur/onMouseOver/onMouseOut
- onFocus
+ Sự kiện onFocus được gởi đi bất cứ khi nào phần tử form trở thành phần tử
form hiện thời. Chỉ khi phần tử nhận được focus nó mới chấp nhận dữ liệu nhập từ
người dùng.
- onBlur
+ Blur ngược với focus. Khi người dùng rời khỏi phần tử form, sự kiện onBlur
được kích hoạt.
- onMouseOver
+ Sự kiện onMouseOver được khởi tạo khi con trỏ chuột di chuyển lên trên một
phần tử.
- onMouseOut
+ Sự kiện onMouseOut được khởi tạo khi con trỏ chuột rời khỏi phần tử đó.

54
n Ví dụ:
<html><head>
<script language = "javascript">
var num =0
function showLink(num)
{ if (num==1)
{
document.forms[0].elements[0].value= "You have selected Aptech";
}
if (num==2)
{ document.forms[0].elements[0].value = "You have selected Asset";
}
if (num==3)
{
document.forms[0].elements[0].value = "You have selected Arena";
} } </script>
</head><body>
<form>
<input type=text size=60 >
</form>
<a href="#" onMouseOver="showLink(1)"document.bgcolor= “
green">Aptech</a><br>
<a href="#" onMouseOver="showLink(2)">Asset</a><br>
<a href="#" onMouseOver="showLink(3)">Arena</a><br>
</body>
</html>
n Di chuyển con trỏ chuột lên trên từ Aptech, xem kết quả xuất hiện.

55
* onLoad/onSubmit/onMouseDown/onMouseUp
- OnLoad
+ Sự kiện onLoad được gửi đến đối tượng document khi đã tải xong tài liệu
- onSubmit
+ Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi (sử dụng
nút Submit). Sự kiện xảy ra trước khi form thật sự được gửi đi.
- onMouseDown
+ Sự kiện này được kích hoạt khi hành động nhấp chuột xảy ra.
- onMouseUp
+ Sự kiện này được kích hoạt khi hành động nhả chuột xảy ra.
* onResize – Example
- onResize
+ Sự kiện này được kích hoạt khi sự kiện resize xảy ra, nghĩa là khi người dùng
hoặc script chỉnh kích thước cửa sổ hay frame.
<html>
<head> Kết quả:
<script language="JavaScript">
window.onresize= notify;
function notify()
{
alert("Window resized!");
}
</script>
</head>
<body> Please resize the
window.
</body></html>

56
3. Trình xử lý sự kiện
- Phân đoạn này của mã JavaScript chạy để đáp ứng với sự kiện được gọi là trình
điều khiển sự kiện.
<INPUT TYPE="button"
NAME="docode"
onClick="DoOnClick();">
- Trình điều khiển sự kiện được xếp loại theo:
+ Trình điều khiển sự kiện như là thuộc tính của thẻ HTML:
<TAG eventHandler="JavaScript Code">
+ Trình điều khiển sự kiện như là thuộc tính của đối tượng:
object.eventhandler = function;
4. Các đối tượng trình duyệt thông thường
- Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của tài liệu
HTML.
- Các trình duyệt cũng đưa ra một số đối tượng có thể được truy cập và sử dụng
trong script.

IE Browser Objects Netscape Browser Objects


4.1. Mô hình đối tượng(DOM)
- Một tính năng quan trọng của JavaScript là ngôn ngữ dựa trên đối tượng.
- Giúp người dùng phát triển chương trình theo môđun và có thể sử dụng lại.
- Đối tượng được định nghĩa là một thực thể đơn nhất bao gồm các thuộc tính và
phương thức.
- Thuộc tính là giá trị của một đối tượng.

57
Vd: Document.bgcolor
4.2.Đối tượng window
- Đối tượng này tương ứng với cửa sổ của trình duyệt và có thể được sử dụng để
truy xuất thông tin về trạng thái của cửa sổ.

Các thuộc tính: Các phương thức:


• document • alert
• event • blur
• history • close
• location • focus
• name • navigate
• navigator • open
• screen
4.3. Đối tượng Document
- Đối tượng này thể hiện tại liệu HTML trong cửa sổ trình duyệt và cho phép truy
xuất thông tin trong cửa số đó.

Các thuộc tính: Các phương thức:


• alinkColor • clear
• bgColor • close
• Body • open
• fgColor • write
• linkColor • writeln
• location
• Title
• tượng
4.4. Đối URL History
• vlinkColor
- Đối tượng này cung cấp danh sách URL được thăm gần đây nhất của client
- Chẳng hạn, phương thức "back()" của history hiển thị tài liệu ngay trước đó trong
cửa số trình duyệt: history.back();

Phương thức:
• back
• forward
• go
5. Đối tượng Location
- Đối tượng này chứa thông tin về URL hiện thời. Nó cung cấp phương thức cho
phép trình duyệt có thể tải lại URL đó.

Các thuộc tính: Các phương thức:


• hash • assign
• host • reload
• hostname • replace
• href
58
BÀI TẬP
Bài tập JavaScript 10: Minh hoạ cách đặt các câu lệnh JavaScript vào trong các
phần tử HTML để thực thi khi người dùng click chuột và sử dụng hàm open của đối
tượng window để mở trang web.
Yêu cầu: Viết đoạn Script cho người dùng nhập vào một số nguyên. Nếu người
dùng nhập số 1 thì mở trang Web https://quantrimang.com, nếu nhập số 2 thì mở
trang https://download.com.vn, nếu nhập số 3 thì mở trang https://vndoc.com, còn
nếu nhập một số khác với 1, 2 hay 3 thì mở trang https://meta.vn.
Hướng dẫn: Để mở một trang Web bất kỳ trong cửa sổ hiện hành bạn viết như sau:
window.open(“Địa chỉ của trang cần mở”).
Ví dụ: window.open(https://quantrimang.com) để mở trang chủ của VNN trong cửa
sổ hiện tại.
Như vậy, để giải quyết yêu cầu của bài toán trên, bạn cần cho người dùng nhập vào
một số và sử dụng cấu trúc switch để kiểm tra và mở trang web tương ứng.
Minh hoạ mẫu:
<HTML>
<TITLE>Mở trang web bằng hàm open của đối tượng window.</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var LuaChon;
LuaChon = prompt("Bạn hãy nhập vào một số để mở trang web: ", 1);
switch (LuaChon)
{
case "1" : window.open("https://quantrimang.com"); break;
case "2" : window.open("https://download.com.vn"); break;
case "3" : window.open("https://vndoc.com"); break;
default : window.open("https://meta.vn");
}
</script>
</BODY>
</HTML>

Bài tập JavaScript 11: Minh hoạ việc khai báo và sử dụng biến đối tượng Array để
lưu trữ danh sách và cách sử dụng các hàm của đối tượng Array như
hàm sort và vòng lặp for…in

59
Yêu cầu: Cho người dùng nhập vào danh sách tên của một lớp, sau đó sắp xếp theo
vần Alphabet rồi hiển thị danh sách đã sắp xếp đó ra màn hình, mỗi người trên một
dòng.
Hướng dẫn: Sử dụng vòng lặp for để cho phép nhập danh sách họ tên và Lưu danh
sách vào một mảng, sau đó sử dụng phương thức sort của đối tượng mảng để sắp
xếp, tiếp theo dùng vòng lặp for…in để in các phần tử trong danh sách.
Minh hoạ mẫu:
<HTML>
<TITLE>Sắp xếp mảng</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<BODY>
<script language="JavaScript">
var SoLuong, x;
var DS = new Array(100); //Khai báo mảng DS, có thể lưu tối đa là 100 phẩn tử
SoLuong = prompt("Bạn cần nhập bao nhiêu người: ", 5);
for (i=0; i < SoLuong; i++)
{
DS[i] = prompt("Nhập vào họ tên: ","");
}
//Gọi hàm sort của đối tượng mảng DS để sắp xếp
DS.sort();
//Hiển thị kết quả sau khi sắp (sort)
document.write("<h1>Danh sách đã sắp xếp là </h1>");
for (x in DS) /* Nên sử dụng cấu trúc for … in này để duyệt mảng */
{
document.write( DS[x] );
document.write("<BR>"); // Xuống dòng
}
</script>
</BODY>
</HTML>
Nhận xét: Nếu muốn sắp theo chiều giảm dần thì sau khi sort bạn gọi hàm reverse.
Bài tập JavaScript 12: Minh hoạ việc đưa các câu lệnh JS vào trong một thẻ khi
người dùng click chuột.
Yêu cầu: Tạo một nút nhấn (Button) có name = “DangKy”, value = “Đăng ký”. Khi
người dùng Click vào nút này thì thông báo là “Đăng ký dịch vụ E-Mail”.

60
Hướng dẫn: Đối với các phần tử HTML, như textbox, button, checkbox, Select
v.v… Các trình duyệt đều cho phép ta thực thi một hoặc nhiều câu lệnh JavaScript
khi người sử dụng click chuột lên các phần tử đó. Vấn đề ở chỗ, viết các câu lệnh
đó như thế nào ?
Để viết các câu lệnh JavaScript khi người dùng click chuột lên một phần tử nào đó,
trong thẻ của phần tử này, ta viết như sau: OnClick = “Các câu lệnh JavaScript”.
“Các câu lệnh JavaScript” ở đây là bất kỳ câu lệnh JavaScript nào và chúng phải
được cách nhau bởi dấu chấm phảy. Ngoài ra, các câu lệnh phải đặt trong cặp dấu
nháy kép (Hoặc nháy đơn).
Ví dụ một số cách đưa câu lệnh JavaScript cần thực thi khi người dùng click
chuột
1. Onclick = “alert(‘Hello world’;”
2. OnClick = ‘write(“Welcome to JavaScript”);’
3. OnClick = “var x,y; x = 10; y = 20; alert(‘Tổng là : ‘ + (x + y)); “
4. OnClick = “var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);”
5. OnClick = “KiemTra();”
Theo ví dụ trên, khi người sử dụng Click:
1: Thực hiện câu lệnh alert(‘Hello world’)
2: Thực hiện câu lệnh document.write(‘Welcome to JavaScript’);
3: Thực hiện NHIỀU câu lệnh JavaScript
4: Thực hiện nhiều câu lệnh JavaScript và có lời gọi đến hàm KiemTra(Tuoi)
5: Thực hiện câu lệnh gọi hàm KiemTra().
Minh hoạ mẫu:
<HTML>
<HEAD>
<TITLE>Minh hoạ đưa câu lệnh JavaScript vào các phần tử</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<INPUT type="button" name="DangKy" value="Đăng ký" onClick="alert('Dang
ky E-Mail'); ">
</BODY>
</HTML>

Bài tập JavaScript 13: Minh hoạ cách thay đổi thuộc tính của một đối tượng thông
qua việc viết các câu lệnh JavaScript.

61
Tạo một nút có name = ThayMauNen, value = “Thay đổi màu nền”. Khi người
dùng click chuột vào nút này thì thay đổi màu nền của trang Web thành màu
“xanh”.
Hướng dẫn: Để thay đổi màu nền của trang Web thành màu, ta cần thay đổi thuộc
tính document.bgColor = “blue”. (Màu đỏ là red, tìm: magenta, đen: black, trắng:
white, vàng: Yellow, tím nhạt: lavender). Như vậy, câu lệnh này sẽ được đặt trong
phần onClick như sau:
<HTML>
<HEAD>
<TITLE>Thay mau nen bang click chuot</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<h2>Thay đổi màu nền sử dụng đối tượng document</h2>
<INPUT type="button" name="ThayMauNen" value="Thay đổi màu nền"
onClick="document.bgColor = 'blue' ">
</BODY>
</HTML>

62
Bài 4: XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO PHẦN TỬ CỦA FORM
Mã bài: MĐCNTT17.04
Giới thiệu:
Làm việc với đối tượng form và các thành phần trên Form
Mục tiêu của bài:
- Trình bày được các kiểu dữ liệu trên form
- Xử lý các kiểu dữ liệu kiểu số, kiểu chuỗi, vận dụng vào xử lý trên 1 form
nhập liệu cụ thể
- Rèn luyện tính cẩn thận, khả năng làm việc nhóm
Nội dung chính:
1. Đối tượng Form
- Đối tượng Form chứa 3 thuộc tính:
n Accept
n Action
n Method
- Ví dụ:
<Form ACTION="Simple.htm“ Accept=“TEXT/HTML” Method=“POST”>
2. Đối tượng Textfield(trường văn bản)
- Textfield nhận biết các sự kiện onBlur, onFocus và onChange
n onFocus xuất hiện khi nhấp chuột vào bên trong trường văn bản.
n onBlur xảy ra khi người dùng di chuyển ra khỏi trường văn bản
n onChange xảy ra khi người dùng có sự thay đổi trong trường văn
bản và sau đó di chuyển ra khỏi trường văn bản
- Ví dụ:
<input type="text" name="first_text" onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">

63
3. Đối tượng Command Button
- Command button nhận biết sự kiện onClick
- onClick xuất hiện khi người sử dụng nhấp chuột vào command button
<INPUT TYPE="button" value="Copy"
onClick="writeIt(myfm.first_text.value);">

4. Đối tượng Checkbox


- Checkbox là một đối tượng form HTML, hoạt động theo cơ chế bật tắt
- Checkbox có thể được Check hoặc không
- Giống như nút lệnh checkbox cũng hiểu được sự kiện onClick

64
5. Đối tượng Radio Button
- Radio buttons gần giống như checkboxes
- Sự khác biệt ở đây là chỉ có một Radio được chọn. Khi một Radio được chọn, nó
sẽ giữ nguyên sự lựa chọn đó cho đến khi nút khác được chọn.
- Radio button hiểu được sự kiện onClick.

6. Đối tượng ComboBox/Select


- Đối tượng ComboBox trong form HTML xuất hiện giống như một danh mục
sổ xuống hoặc danh mục cuộn của các tuỳ chọn
- Có thể sử dụng thanh cuộn để thay đổi sự hiển thị danh sách các lựa chọn
- ComboBox hỗ trợ các sự kiện onBlur, onFocus, and onChange

65
7.Kiểm tra tính hợp lệ của nội dung và các trường trên form
- Việc kiểm tra rất quan trọng, vì có thể có trường không chứa dữ liệu.
- Cũng có thể có trường chứa dữ liệu không hợp lệ.
- Xem ví dụ sau:
<HTML>
<HEAD>
<TITLE> Form Events </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validateFirstName()
{
var str= form1.fname.value;
if(str.length==0)
{
alert(" The first name cannot be empty");
return false;
}
return true
}
function validateLastName()
{

66
var str= form1.lname.value;
if(str.length==0)
{
alert(" The last name cannot be empty");
return false;
}
return true;
}
function validateEmail()
{
var str= form1.email.value;
if(str.length==0)
{
alert(" The Email field cannot be empty");
return false;
}
}
function processForm()
{
disp=open("", "result")
disp.document.write("<TITLE> Result Page </TITLE>"+"<PRE>")
disp.document.write("<H2 ALIGN='CENTER'>"+
"Thanks for signing
in"+"</H2>"+"<HR>"+"<BR><BR>")
disp.document.write("First name \t\t: "+form1.fname.value+"<BR>")
disp.document.write("Last name \t\t: "+form1.lname.value+"<BR>")
disp.document.write("Email \t\t\t: "+form1.email.value+"<BR>")
disp.document.write("Your Comments \t\t:
"+form1.comment.value+"<BR>")
disp.document.write("<PRE>")
if(disp.confirm("Is this information correct"))
disp.close()
}
//-->
</SCRIPT>

67
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H2 ALIGN="CENTER"> Handling Form Events</H2><HR>
<FORM name="form1"><P> First Name : <INPUT TYPE="text"
NAME="fname" size=10 onBlur="validateFirstName()">
Last Name : <INPUT TYPE="text" NAME="lname" size=15
onBlur="validateLastName()"></p>
<P> Email : <INPUT TYPE="text" NAME="email" size=10
onBlur="validateEmail()">
Comments : <TEXTAREA NAME="comment" rows=4 cols=30 > Enter
your comments
</TEXTAREA></p>
<P ALIGN="CENTER"><INPUT TYPE="button" value="Submit this form"
onClick="processForm()">
<INPUT TYPE="reset"></P>
</FORM>
</BODY>
</HTML>

68
69
BÀI TẬP:
Bài tập JavaScript 14: Minh hoạ việc đọc giá trị trong phần tử text và hiển thị ra
màn hình
Yêu cầu: Tạo một hộp text có tên là HoTen. Một nút có tên là HienThi, value =
“Hiển thị”. Khi người dùng click vào nút HienThi thì hiển thị nội dung trong hộp
text đó bằng hàm alert.
Hướng dẫn: Để lấy giá trị của một phần tử HTML nào đó, chúng ta viết
<Tên phần tử>.value
Trong đó: <Tên phần tử> chính là giá trị của thuộc tính name khi bạn tạo thẻ.
Ví dụ: – Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v…
Minh hoạ:
<HTML>
<HEAD>
<TITLE>Đọc giá trị trong hộp text</TITLE>
</HEAD>

<BODY>
<h2>Hãy gõ văn bản vào trong hộp text và click vào nút Hiển thị</h2>
<INPUT type="text" name="HoTen">
<INPUT type="button" name="HienThi" value="Hiển thị"
onClick="alert(HoTen.value); ">
</BODY>
</HTML>

Lưu ý: Khi muốn lấy giá trị của phần tử nào đó bằng JavaScript thì bạn phải đặt
cho nó một cái tên, như ví dụ ở trên, để lấy giá trị trong hộp text ta đã đặt cho hộp
text này tên (name) là HoTen.
Bài tập JavaScript 15: Minh hoạ việc thay đổi giá trị của hộp textbox
Yêu cầu: Tạo ra ba hộp text lần lượt tên là SoHang1, SoHang2, KetQua và một nút
có tên là TinhTong, để thực hiện phép tính tổng. Khi người dùng nhập hai số hạng
vào hộp SoHang1 và SoHang2, sau đó click vào nút TinhTong thì kết quả tổng sẽ
được lưu vào trong hộp text KetQua.
Hướng dẫn: Để thay đổi giá trị một thuộc tính nào đó của phần tử HTML, bạn viết
theo cách sau:
<Tên của phần tử>.<Tên thuộc tính> = <Giá trị mới>
Trong đó: Tên phần tử chính là giá trị của thuộc tính name khi bạn tạo thẻ.

70
Ví dụ: HoTen.value = “Đây là văn bản mới”, DangKy.value = “Sign Up now”,
v.v…
<HTML>

<HEAD>
<TITLE>Thayđổi giá trị của thuộc tính</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>
<BODY>
<h2>Hãy nhập hai số và click vào nút Tính tổng</h2>
<INPUT type="text" name="SoHang1">+
<INPUT type="text" name="SoHang2">=
<INPUT type="text" name="KetQua">
<INPUT type="button" value="Tính tổng"
onClick="KetQua.value = parseFloat(SoHang1.value) +
parseFloat(SoHang2.value)">
</BODY>
</HTML>
Lưu ý: – Giá trị lưu trong hộp text luôn là một xâu, do vậy để thực hiện phép cộng
được đúng, bạn cần phải chuyển giá trị sang dạng số bằng hàm parseFloat (Hoặc
parseInt) như ở trên.
– Việc thay đổi này có thể áp dụng cho các phần tử khác như button, checkbox,
v.v…
Bài tập JavaScript 16: Minh hoạ việc gọi hàm khi người dùng click vào một nút
Yêu cầu: Tạo ra 4 text có tên lần lượt là: MauNen, MauChu, TieuDe, TrangThai và
một nút có tên là ThayDoi, value là “Thay đổi”. Khi người dùng click vào nút
ThayDoi thì màu nền, màu chữ, tiêu đề của tài liệu và thanh trạng thái của cửa sổ
trình duyệt sẽ được thay đổi bằng các giá trị trong text tương ứng
Hướng dẫn: Bạn hoàn toàn có thể viết nhiều câu lệnh trong thuộc tính OnClick như
các ví dụ trước, tuy nhiên nếu có nhiều lệnh thì chương trình trông không được
sáng sủa cho lắm. Khi đó bạn có thể nhóm các câu lệnh vào trong một hàm và trong
thuộc tính OnClick bạn chỉ việc gọi hàm này ra.
Minh hoạ mẫu:
<HTML>
<HEAD><TITLE>Thayđổi thuộc tính của trang Web</TITLE></HEAD>
<SCRIPT language="JavaScript">
functionCapNhat()

71
{
document.title =TieuDe.value;/* Thay đổi tiêu đề của trang Web */
document.bgColor =MauNen.value;/* Thay đổi màu nền của trang */
document.fgColor =MauChu.value;/* Thay đổi màu chữ của trang */
window.defaultStatus =TrangThai.value;/* Thay đổi dòng trạng thái của cửa sổ */
}
</SCRIPT>
<BODY>
<h2>Nhập vào các giá trị và nhấn nút Thayđổi</h2>
<INPUT type="text" name="TieuDe" value="Tiêu đề mới">
<INPUT type="text" name="MauNen" value="Nhập màu vào đây (ví dụ
blue)"><BR>
<INPUT type="text" name="MauChu" value="Nhập màu chữ vào đây (ví dụ
white)">
<INPUT type="text" name="TrangThai" value="Nhập dòng trạng thái vào đây
"><BR>
<INPUT type="button" name ="ThayDoi" value="Thay đổi" onClick="Ham( );">
</BODY>
</HTML>

Nhận xét: Ở ví dụ trên, khi người dùng click chuột lên nút ThayDoi thì
hàm CapNhat( ) sẽ được gọi.
Bài tập JavaScript 17: Hãy tạo một nút nhấn (button) có value = “Thu”. Khi người
dùng click vào nút này thì tiêu đề của cửa sổ sẽ là “Bạn đã click chuột”
Hướng dẫn: Trước hết ta cần xác định xem các lệnh nào cho phép ta thay đổi tiêu
đề của cửa sổ thành “Bạn đã click chuột”, tiếp theo là đặt các lệnh đó vào đâu để
khi người dùng click chuột thì nó được thực thi theo như yêu cầu bài toán
· Lệnh để thay đổi tiêu đề như sau: title = “Bạn đã click chuột”
· Như ta đã biết khi người dùng click thì sự kiện onClick xuất hiện, do vậy
câu lệnh trên sẽ được đặt tương ứng vào sự kiện onClick, như sau:
<HTML>
<HEAD>
<TITLE>Hãy click vào nút ở dưới và quan sát tiêu đề</TITLE>
</HEAD>
<BODY>
<input type=button value="Thu" onClick="document.title='Bạn đã click chuột' ">

72
</BODY>
</HTML>
Bài tập JavaScript 18: Tạo một trang Web, có 2 phần tử: Phần tử button có value =
“Gửi”, và một phần tử textbox.Yêu cầu: khi người dùng click vào nút Gửi thì thông
báo trên màn hình là: “Bạn đã click vào nút gửi” còn khi người dùng click vào
textbox thì thông báo là “Bạn đã click vào textbox”.
Hướng dẫn: Theo yêu cầu của bài thì dòng thông báo “Bạn đã click chuột vào nút
gửi” xuất hiện chỉ khi người dùng click chuột vào nút gửi, do vậy các lệnh thực
hiện hiển thị thông báo sẽ được đặt trong sự kiện onclick của nút nhấn. Còn dòng
thông báo “Bạn đã click chuột vào text box” khi người dùng click chuột vào
textbox, do vậy các lệnh thực hiện hiển thị dòng thông báo sẽ được đặt trong sự
kiện onclick của textbox:
Minh hoạ:
<HTML>
<HEAD>
<TITLE>Hay click vao nut va textbox o duoi va quan sat tieu de</TITLE>
</HEAD>
<BODY>
<input type=button value="Gui" onClick="alert( 'Ban da click chuot vao nut') ">
<input type=text onclick ="alert('Ban da click chuot vao textbox') ">
</BODY>
</HTML>

Bài tập JavaScript 19: Tạo 2 nút, nút thứ nhất có value = “Xanh”, nút thứ hai có
value = “Đỏ”.
Yêu cầu: Khi người dùng click vào nút xanh thì màu nền của tài liệu là xanh (blue),
còn khi người dùng click vào nút đỏ thì màu nền của tài liệu là: Đỏ (red).
Hướng dẫn: Thuộc tính màu nền của tài liệu được lưu trong thuộc tính bgColor của
đối tượng document. Thuộc tính này có thể thay đổi được.
Minh hoạ:
<HTML>
<HEAD></HEAD>
<BODY>
<input type=button value=Xanh onclick="window.document.bgColor = 'blue'; ">
<input type = button value =Do onclick="window.document.bgColor = 'red'; ">
</BODY>
</HTML>

73
Bài tập JavaScript 20:
Tạo một danh sách lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi
người dùng chọn một màu thì màu nền của tài liệu sẽ thay đổi tương ứng.
Minh hoạ:
<HTML>
<HEAD></HEAD>
<BODY>
<script language =JavaScript>
functionDoiMau()
{
document.bgColor =Mau.value;
// Hoặc viết: window.document.bgColor = Mau.value;
}
</script>
Bạn hãy chọn màu nền:
<Select name =Mau onchange ="DoiMau();">
<option value = red> Màu đỏ</option>
<option value = blue> Màu xanh </option>
<option value = brown> Màu nâu </option>
<option value = lavender> Màu xanh nhạt</option>
</select>
</BODY>
</HTML>
Bài tập JavaScript 21: Tạo một textarea có tên là NoiDung, một Textbox có tên là:
SoKyTu. Với yêu cầu như sau: Khi người sử dụng gõ các phím vào trong textarea
thì số lượng ký tự (Độ dài xâu) chứa trong textarea đó sẽ được hiển thị trong
textbox. Nếu số lượng ký tự trong textarea gõ vào vượt quá 200 ký tự thì thông báo:
“Bạn đã gõ quá số ký tự cho phép!”.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<script language="JavaScript">
functionKiemTra()
{
if(NoiDung.value.length >200) alert("Bạn đã gõ quá số ký tự cho phép!");
74
SoKyTu.value =NoiDung.value.length;// Hiển thị số ký tự trong textbox SoKyTu
}
</script>
<body style="font-family:arial">
Số ký tựđã gõ:<input type="text" name="SoKyTu"><BR>
<textarea name="NoiDung" cols=50 rows="10"
onKeyUp="KiemTra();"></textarea>
</body>
</html>

Ở ví dụ trên, hàm kiểm tra sẽ được gọi mỗi khi sự kiện nhấn phím (onKeyUp) xuất
hiện hay nói cách khác là khi người dùng gõ thêm một ký tự vào trong textarea.
Bài tập JavaScript 22: Tạo một nút có value = “Gửi”, textbox có name = “HoTen”,
2 nút radio có tên là GioiTinh và nhãn tương ứng là Nam, nữ.
Yêu cầu: Khi người dùng di chuyển chuột vào phần tử nào thì hiển thị thông báo
tương ứng dưới thanh trạng thái. Ví dụ nếu người sử dụng di chuyển chuột qua nút
nhấn “Gửi” thì thanh trạng thái sẽ là “Bạn đang di chuyển chuột vào nút”…
Hướng dẫn: Khi người dùng di chuyển chuột thì sự kiện di chuyển chuột sẽ xuất
hiện, sự kiện này có tên là : onMoseMove. Vậy ta sẽ viết lệnh trong sự kiện này.
Minh hoạ:
<html>
<head>
<title>Xu ly su kien</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body style="font-family:arial">
<input type="button" value="Gửi" onmousemove="window.status = 'Chuột trong
nút'; ">
<input onMouseMove ="window.status='Chuột trong textbox';"><BR>
<input type="radio" name="GioiTinh" onMouseMove="window.status='Trong
nam';">Nam</option>
<input type="radio" name="GioiTinh" onMouseMove="window.status='Trong
nữ';"> Nữ</option>
</body>
</html>

75
BÀI TẬP JAVASCRIPT TỰ GIẢI
Bài số 1:
Tạo một tầng có chứa dòng chữ “Hello”, kích thước H1. và một nút nhấn có nhãn là
“Thay đổi”. Khi người dùng click vào nút này thì yêu cầu người dùng nhập vào một
xâu, sau đó thay nội dung trong thẻ H1 bằng xâu nhập vào này (Theo 4 cách: thay
thuộc tính innerText, innerHTML, outerText, outerHTML).
Bài số 2:
Tạo một thẻ H1, màu chữ xanh dùng để hiển thị thời gian của hệ thống (gồm
giờ:phút:giây).
Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây trong máy tính sau đó gán cho
thuộc tính innerText của thẻ H1. Sử dụng hàm setInterval(“CapNhat();”, 1000) để
liên tục cập nhật thời gian theo từng giây.
Bài số 3: Tạo 2 tầng trong IE, mỗi tầng chứa một bức ảnh. Tầng thứ nhất chạy từ
trái sang phải màn hình, tầng thứ hai chạy từ trên xuống dưới màn hình.
Gợi ý: Sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng.
Bài số 4: Tạo một tầng chứa 3 liên kết. Chuột click tại vị trí nào thì tầng sẽ được
đặt tại vị trí đó. Gợi ý: Viết lệnh trong sự kiện onClick của thẻ BODY.
Bài số 5: Tạo một form đăng ký E-Mail tương tự như của Yahoo (Bạn chỉ cần tạo
một số phần tử, không cần tạo hết). Mỗi khi người dùng di chuyển chuột đến một
phần tử nào đó thì hiển thị một lời chú thích bằng Tiếng việt. (Xem Bài số 5)
Bài số 6: Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng như sau:
https://vndoc.com, https://quantrimang.com và https://meta.vn.
Bài số 7: Tạo một tầng chứa một bức ảnh, một nút có nhãn là “Di chuyển”. Khi
người dùng click vào nút này thì bức ảnh sẽ di chuyển chéo từ góc trên bên phải
xuống góc dưới bên trái của màn hình. Gợi ý: Tăng dần pixelTop, giảm pixelLeft.
Bài số 8: Hãy tạo ra trang Web có giao diện như sau:
Yêu cầu:
· Khi người dùng di chuyển chuột đến phần tử nào thì hiển thị dòng nhắc
dưới thanh trạng thái để hướng dẫn người dùng. Ví dụ: Khi người dùng
đưa chuột vào trong ô textbox User Name thì thì hiển thị dưới thanh trạng
thái là: “Nhập mã người dùng”, hay khi người đưa chuột đến nút “Đăng
ký” thì hiển thị dòng nhắc: “Gửi thông tin đi để đăng ký” v.v…
Hướng dẫn: Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:
<input type = button value = “Đăng ký”>
Bài số 9: Có giao diện như bài 1, nhưng yêu cầu như sau:
· Khi gửi thông tin đi, cần kiểm tra xem nội dung người dùng gõ trong ô
Password với textbox trong ô “Gõ lại password” có giống nhau hay
không? Nếu bằng nhau thì mới gửi (Submit) đi, còn nếu không bằng thì
thông báo là “Password phải giống nhau”

76
· Khi gửi thông tin, cần kiểm tra ngày sinh, tháng sinh phải hợp lệ. (Tức
ngày phải nhỏ hơn 32, tháng phải nhỏ hơn 13)
Hướng dẫn:
Nút đăng ký nên là nút thường, tức là tạo bằng thẻ:
<input type = button value = “Đăng ký” onClick = “DangKy();”>
Trong đó Hàm DangKy() sẽ kiểm tra dữ liệu hợp lệ và khi dữ liệu nhập vào đúng
đắn thì gửi đi bằng cách gọi phương thức submit của đối tượng document, như
sau: document.submit();
Bài số 10:
Làm tương tự bài tập 7 và 8, nhưng thêm yêu cầu: Khi người dùng nhập hoặc số
lượng, hoặc đơn giá thì hãy tính luôn ô textbox thành tiền.
Hướng dẫn: Viết lệnh tính thành tiền trong cả 2 sự kiện onKeyUp của cả hai
textbox số lượng và textbox đơn giá.
*** Lưu ý: Trước khi tính tích thì cần phải kiểm tra xem dữ liệu trong hai textbox
đã có hay chưa, nếu một ô chưa nhập gì thì chưa tính.
Bài số 11: Hãy tạo một menu đặt theo chiều dọc gồm 4 mục như sau:
Giới thiệu
Tin tức
Sản phẩm
Trợ giúp
Yêu cầu: 4 mục này có màu nền là xanh, màu chữ là vàng (yellow). Khi người
dùng di chuyển đến mục nào thì mục đó có màu nền là màu đỏ. Khi di chuyển
chuột ra khỏi thì màu nền trở lại màu xanh.
Khi người dùng click vào thì mở ra trang tương ứng là https://download.com.vn,
https://vndoc.com, https://meta.vn và https://quantrimang.com.
Gợi ý: Làm tương tự như bài tập mẫu, nhưng tạo ra 4 thẻ H2.
Bài số 11: Hãy tạo một menu gồm 4 mục như ở trên nhưng theo chiều ngang,
Hướng dẫn: Nếu bạn dùng thẻ H2, thì mỗi mục sẽ tự động được đặt riêng trên một
dòng. Để có thể đặt nhiều mục trên cùng một dòng, bạn có thể tạo một bảng có một
hàng và nhiều cột. Mỗi mục bây giờ sẽ được đặt trong một thẻ <TD>. Để thay đổi
kích thước, màu nền, màu chữ v.v.. bạn cũng sử dụng STYLE: <TD style = “color:
white” ……
Hoặc cách thứ hai là bạn sử dụng thẻ <Span>. Ví dụ:
<Spanstyle=“color:white;background-color:blue; cursor:hand; font-size:16pt”
onClick=“window.open(‘https://quantrimang.com/’);”>
Trang QTM
</Span>

77
78
TÀI LIỆU THAM KHẢO
[1]An Introduction to Network Programming with Java, Jan Graba, Springer,
2007
[2] Đỗ Thanh Nghị, Trần Công Án, Hà Duy An, Lâm Chí Nguyện. Giáo trình
lập trình Web. NXB ĐHCT, 2014.
[3] http://www.w3schools.com

79

You might also like