Tổng quan về JS
Giới thiệu:
-JS được sử dụng trong hàng triệu trang web và được yêu thích trên thế giới với nhiều lý do khác
nhau: thiết kế giao diện, hiệu lực form, tìm kiếm trình duyệt, tạo ra cookies v.v….
-JS là một ngôn ngữ kịch bản phổ biến nhất trên Internet, tương thích với đa số trình duyệt như:
Internet Explorer, Mozilla, Firefox, Netscape, Opera.
1) JS là gì?
- JS (JS) là một ngôn ngữ kịch bản, được thiết kế để tăng thêm tính tương tác cho các trang
HTML. Đặc trưng của loại ngôn ngữ này là “nhẹ” hơn ngôn ngữ lập trình thông thường, nghĩa là
không cần trình biên dịch. Do đó người ta còn gọi JS là ngôn ngữ phiên dịch (script được thực thi
không cần biên dịch trước)
- JS là ngôn ngữ Browser, nghĩa là được thực thi trực tiếp trên máy Client
- JS được nhúng trực tiếp vào các trang HTML
- Mọi người có thể sử dụng JS mà không c
ần mua bản quyền
2) Java và JS hoàn toàn giống nhau?
Không!
Java và JS là 2 ngôn khác nhau hoàn toàn cả về hình thức lẫn nội dung. Java là một ngôn ngữ
mạnh và phức tạp hơn JS
3) Thế mạnh và hạn chế của JS
a) Thế mạnh
- JS cung cấp một công cụ lập trình với cú pháp rất đơn giản, dễ sử dụng. Do đó, dù không phải
là một lập trình viên chuyên nghiệp, bạn cũng dễ dàng nhúng các đoạn JS vào các trang HTML
của mình.
- JS làm cho trang HTML sinh động hơn với hiệu ứng chuột hay hiệu ứng text,…
- JS có thể phản ứng với các sự kiện: nghĩa là một đoạn JS sẽ được thực thi khi có một sự
kiện
nào đó xảy ra.Ví dụ: khi nạp trang vào trình duyệt, khi người dùng click chuột vào trang HTML,…
- JS có thể đọc và tương tác với nội dung của trang HTML.
- JS thường dùng để hiệu lực dữ liệu trong form, nghĩa là kiểm tra dữ liệu có thỏa những tiêu
chuẩn định trước hay không trước khi gửi từ form lên server. Điều này giúp giảm bớt công việc

</script>

Chạy đoạn script này sẽ hiện kết quả ra màn hình như sau:
2) Các thuộc tính của thẻ script:
a) Thuộc tính src
- Chỉ định đường dẫn của file chứa mã nguồn JS. File này phải có phần tên mở rộng là .js
b) Thuộc tính language
- Chỉ định loại ngôn ngữ lập trình được sử dụng như: C#, JS, jscript, php, vb, vbscript.
3) Biện pháp dành cho các trình duyệt không hỗ trợ JS
a) Thực trạng
- Một số trình duyệt không hỗ trợ JS sẽ không hiểu đoạn JS nằm giữa thẻ <script> và </script >
nên sẽ xuất tất cả ra trình duyệt như dạng text của HTML
b) Biện pháp khắc phục:
Có thể khắc phục tình trạng trên bằng cách đặt đoạn JS vào giữa <!- -và > (ghi chú của
HTML)

<script language = "javascript">
< !
Chương trình JS
>
</script>
Giải thích:
- Đối với trình duyệt không hỗ trợ JS sẽ hiểu đoạn JS như là HTML, do đó nội dung bên
trong thẻ <script> được hiểu là ghi chú và không xuất ra ngoài
4) Vị trí của JS trong trang HTML
JS có thể đặt bên trong hoặc bên ngoài trang HTML. Có thể đặt nhiều JS vào cùng 1 trang HTML
với nhiều vị trí khác nhau: bên ngoài, trong phần header hoặc trong phần body

- Lợi ích của cách làm này là:
• Giúp chương trình dễ viết, dễ debug và nâng cấp.
• Giúp code của JS tự động ẩn trong những trình duyệt không hỗ trợ.
Tuy nhiên, cách này làm chậm tốc độ truy xuất của server vì server phải mất thời gian tìm và
truy xu
ất file chứa JS.
Lưu ý:
JS đặt bên ngoài không được đặt trong thẻ <script> </script>
Nên tập thói quen khai báo script có thuộc tính src ngay tại vị trí mà bạn muốn đoạn script đó
thi hành
II) Lệnh.
Cũng như các ngôn ngữ lập trình khác, 1 chương trình JS được xây dựng từ đơn vị cơ bản là
lệnh.
1) Khái niệm.
Lệnh là 1 đơn vị cơ bản trong JS. Là phát biểu được viết trên 1 dòng, mà người lập trình dùng
ra lệnh cho chương trình thực hiện một đơn vị công việc. Lệnh kết thúc bằng dấu chấm phẩy.
Ví dụ:
document.write("Chào bạn ! ");
2) Khối lệnh.
-Khối lệnh gồm nhiều lệnh được đặt giữa 2 dấu { } nhằm thực hiện nhiều đơn vị công việc
theo chủ ý của người lập trình. Các lệnh trong khối lệnh tương tác, hỗ trợ nhau.
Ví dụ 2:

<script language="javascript">
{
document.write("Đây là ví dụ về ");
document.write("khối lệnh");
}
</script>


Điều đó giúp chương trình sáng sủa,
dễ đọc.
2) Xuất văn bản bằng hộp thoại:
- Nếu dùng document.write thì văn bản sẽ xuất trực tiếp vào trang HTML và tồn tại ở đó. Nếu
chúng ta chỉ muốn hiển thị thông tin cho người dùng trong một khoảng thời gian ngắn và
biến mất khỏi trang HTML, người ta dùng hộp thoại (dialog box).
-Khi được gọi, dialog box xuất ra thông tin được chỉ định và chờ đến khi người dùng xác nhận
thì quay lại trang HTML. Dialog box hoàn toàn độc lập và không ảnh hưởng đến nội dung
trang HTML
a) Phương th
ức alert
- alert là phương thức phổ biến nhất, thường dùng để đưa ra thông báo hay chỉ dẫn
- Phương thức alert nhận 1 tham số truyền vào là chuỗi.
- alert đôi khi được các lập trình viên dùng để debug chương trình
Cú pháp:
alert("…");
Ví dụ:
alert("Chỉ chấp nhận số nguyn");
b) Phương thức prompt
- Dùng để lấy thông tin người dùng
- Nhận 2 tham số truyền vào là 2 chuỗi:
• Chuỗi thứ 1 thường là một yêu cầu.
• Chuỗi thứ 2 đưa ra ví dụ để người dùng hiểu rõ hơn về yêu cầu.
- Cung cấp 1 textfield cho phép nhập dữ liệu và lưu lại thông tin người dùng nhập vào để xử

IV) Ghi chú trong JS
- Những lập trình viên chuyên nghiệp thường có thói quen ghi chú rõ ràng trong chương
trình. Điều đó rất hữu ích khi làm việc nhóm hoặc chương trình quá dài. Nội dung ghi chú sẽ
được bỏ qua khi phiên dịch chương trình
Cú pháp:
Ghi chú một dòng lệnh

// thông tin ghi chú

Ghi chú một khối lệnh

/*
thông tin ghi chú 1
thông tin ghi chú 2
…………………
*/ Tổng kết:
Qua chương này, cần nắm vững các vấn đề sau:
- Cách nhúng JS vào trang HTML
- Sử dụng thẻ script và các thuộc tính
- Các cách khai báo JS bên trong và ngoài trang HTML
- Lệnh và khối lệnh
- Cách ghi chú trong JS
- Các phương thức xuất văn bản: document.write
- Các dialog box dùng phương thức alert, prompt và confirm.

1) Number: kiểu số
a) Số nguyên: Integer
-là kiểu dữ liệu số không có phần thập phân
Ví dụ: 1, 3, 5, 7, -9, 0….
-Kích thước tối đa của Integer phụ thuộc vào nền chạy ứng dụng JS
-Integer được thể hiện ở 3 chuẩn: chuẩn 10 (hệ thập phân phổ biến nhất), chuẩn 8 (hệ octal),
chuẩn 16 (hệ hexadecimal)
b) Số thực:Float
-là kiểu dữ liệu số có phần thập phân. Phần số và thập phân ngăn cách nhau bởi dấu chấm
Ví dụ: 5.8 , 10.9
Các số thực quá lớn hoặ
c quá nhỏ thường biểu diễn dạng En tương ứng với 10 lũy thừa n
Ví dụ: 2000000 = 2*10^6 = 2E6
-0.000002 = 2*10^(-6) = 2E-6

2) String: kiểu chuỗi
-là kiểu dữ liệu văn bản đặt trong “”
Ví dụ:
“Hello!” :chuỗi có giá trị là Hello
“9” :chuỗi có giá trị là 9
“” :chuỗi rỗng (empty string)
3) Boolean: kiểu đúng/sai
Kiểu boolean có hai giá trị
-đúng: true
-sai: false
trong một số ngôn ngữ lập trình khác,
boolean có thể chấp nhận cặp giá trị (true
=1, false=0) nhưng trong JS thì không
-Phân biệt hoa / thường
-Bắt đầu bằng 1 chữ cái hoặc dấu nối (_)
Ví dụ:
temp: biến hợp lệ
_temp: biến hợp lệ
2temp: biến không hợp lệ vì bắt đầu bằng số
2) Khai báo biến:
Trước khi sử dụng biến phải khai báo biến để JS biết rằng biến đã tồn tại.
Cú pháp:
var tenbien;

var là từ khóa của JS , cuối lệnh khai báo phải có dấu chấm phẩy (;)
Ví dụ:

var bien1; khai báo nhưng chưa gán giá trị
var bien2 = 123; gán giá trị ngay lúc khai báo
bien3 = ”hello”; không cần dùng từ khóa var.

Tuy nhiên, không khuyến khích dùng cách thứ 3, vì làm cho chương trình không rõ ràng và khó
xác định phạm vi biến

3) Ví dụ đoạn JS có sử dụng biến:
Ví dụ 1

<script language="javascript">
var ten = prompt("Hãy nhập tên của bạn vào đây","Tèo");
document.write("<h3>Chào mừng " + ten + " đến với JS! </h3>");
</script>
toán tử gán là +=
Bảng các tốn tử gán trong JS

Tốn tử gán Diễn giải Ví dụ Diễn giải ví dụ
= bằng x = y x = y
+= cộng x += y x = x+y
-= trừ x -= y x = x-y
*= nhân x *= y x = x*y
/= phia x /= y x = x/y
%= phần dư x %= y x = x%y
Ví dụ:
x= 10, y=5
x += y x = 15;
x %= y x = 0; (vì 10 chia 5 dư 0)
2) Biểu thức đại số
Bao gồm biến và các tốn tử đại số. Biến có giá trị number. Kết quả của biểu thức đại số là
number Toán tử đại
số
Diễn giải Ví dụ Kết quả
+ cộng x = 2
y = 2
x+y = 4
- trừ x = 5
y = 2
x-y =3
* nhân x = 5
y = 4

x = 6
y = 3
(x < 10 && y > 1) trả về true
|| hay
x=6
y=3
(x= =5 || y= =5) trả về false
! phủ định
x=6
y=3
!(x= =y) trả về true

Cách lượng giá nhanh 1 biểu thức (Short-circuit evaluation)
Trong trường hợp đặc biệt, có thể dựa vào biến đầu tiên và phép toán logic để lượng giá biểu
thức. Biến thứ 2 không cần xem xét

false && … Æ false
true || … Æ true

4) Biểu thức so sánh:

Bao gồm biến và các toán tử so sánh. Biến có giá trị number hoặc string. Kết quả của biểu
thức so sánh là một giá trị boolean

Toán tử Diễn giải Ví dụ Kết quả
==
Bằng nhau 5= =8 false
===
Bằng nhau và cùng kiểu x = 5
y = "5"

// dat cau hoi cho nguoi dung
var traloi = prompt(cauhoi,"");
// kiem tra cau tra loi
var kiemtra = (traloi == dapan) ? dung : sai;
document.write(kiemtra);
</script>

Phân tích:
Chương trình đặt câu hỏi cho người dùng. Sau đó kiểm tra câu trả lời bằng toán tử điều kiện. Nếu đúng với đáp án thì biến kiemtra =
dung, ngược lại kiemtra = sai.
Trong ví dụ này, dung là hình vui smiley.jpg
sai là hình con khỉ Monkey.jpg. Bạn có thể thay đổi bằng những hình khác bằng thuộc tính src hay chỉ đơn giản là xuất ra thông
báo đúng sai.

Lưu ý: nên dùng hình loại jpeg hoặc gif. Loại bitmap đôi khi bị từ chối trong JS
6) Các phép toán về chuỗi:
Toán tử + để nối hai hay nhiều chuỗi lại với nhau
Ví dụ:
chuoi1 = "Chúc một ngày";
chuoi2 = "đẹp trời!";
chuoi3 = chuoi1 + chuoi2 Æ “Chúc một ngàyđẹp trời!”;

Theo qui tắc, phép * thực hiện trước +

5 + 3*2 = 5+ 6 = 11

Nếu muốn thực hiện + trước * , thêm ( )

(5+3)*2 = 8*2 = 16

Tổng kết:
Qua chương này cần nắm vững các vấn đề sau:
-Các kiểu dữ liệu cơ bản: number, string, boolean, null
-Biến dùng để lưu trữ thông tin và dữ liệu. Khai báo bằng lệnh var và không cần định nghĩa kiểu
dữ liệu. Kiểu dữ liệu của biến thay đổi theo ngữ cảnh
-Các loại biểu thức và cách sử dụng
-Quy luật thứ tự ưu tiên củ
a các toán tử
-Các cấu trúc điều khiển: if , if…else…., if…else if…else…, switch

Bài 3: CÁC CẤU TRÚC ĐIỀU KHIỂN
Giới thiệu:
Như trong các ngôn ngữ lập trình khác, JS cũng phiên dịch chương trình theo thứ tự từ trên
xuống dưới. Tuy nhiên, trong thực tế người lập trình lại có nhu cầu thay đổi thứ tự phiên dịch,
nghĩa là có một số dòng lệnh được thực thi nhiều lần và một số dòng lệnh không được thực thi
lần nào. Ví dụ đang phiên dịch xong dòng 15 phải quay lại vòng 7 sau đó đến vòng 19,…. Để áp
ứng nhu cầu có, JS cung cấp các cấu trúc điề
u khiển cho phép người lập trình thay đổi thứ tự
phiên dịch theo những tiêu chuẩn định trước.
Trong bài này, chúng ta sẽ khảo sát các loại sau:
If
If –else if – else

{<khối lệnh sai>}

Nếu <điều kiện > đúng thì <khối lệnh đúng> được thực hiện, ngược lại thực hiện lệnh < khối
lệnh sai >
Ví dụ :

if (time<11)
{
document.write("Chào buổi sáng");
}
else
{
document.write("Chào bạn !");;
}

III) Dạng if…else if…else
Cú pháp.

if (<điều kiện 1>)
{<khối lệnh 1>}
else if (<điều kiện 2>)
{<khối lệnh 2>}
…
else
{<khối lệnh cuối>}

Diễn giải
Nếu <điều kiện 1> đúng, thực hiện <khối lệnh 1>. Nếu <điều kiện 1> sai, xét <điều kiện 2>
Nếu <điều kiện 2> đúng, thực hiện <khối lệnh 2>. Nếu <điều kiện 2> sai, xét <điều kiện 3>
…

<khối lệnh 2>
break;
…
Người ta thường dùng các ký
tự i,j,k,l…. cho các biến đếm.
Điều đó giúp chương trình
sáng sủa, dễ bảo trì và thật
hữu ích khi làm việc nhóm.
default :
<khối lệnh cuối>
}

Diễn giải
Nếu <biến> = <giá trị 1>, thực hiện <khối lệnh 1>. Nếu không, ta so sánh với giá trị tiếp theo.
Nếu <biến> = <giá trị 2>, thực hiện <khối lệnh 2>. Nếu không, ta so sánh với giá trị tiếp theo.
…
<khối lệnh cuối> được thực hiện khi <biến> không bằng giá trị nào.
Trong mỗi case, ta sử dụng lệnh break
1
để thoát khỏi switch, bởi vì một khi đã tìm được case
thích hợp của <biến> thì ta không cần xét các trường hợp tiếp theo.
Ví dụ:

<script language="javascript">
//Yêu cầu user nhập một số nguyên
var x = prompt(“Hãy nhập vào một số nguyên từ 1 đến 3”,“”);
switch (x)
{
case 1:
document.write("Bạn vừa nhập số 1");
1
Xem phần V
Xuất các số từ 1 đến 5

<script language="javascript">
for (var i=1; i<=5;i++)
{
document.write(i);
document.write(“<br>”); //xuống dòng
}
</script>
Ví dụ 2:
<script language="javascript">
var ten = prompt(“Bạn tên gì?”,”Tèo”);
document.write("<H3> 5 loại trái cây " + ten + " thích nhất là: </H3>");
for (var i=1; i<=5;i++)
{
document.write(i+ "." + prompt(‘Nhập loại’+ i,’….’) + “<br>”);
}
</script>
while (<điều kiện lặp>)
{
<khối lệnh>
}
Diễn giải.
Bước 1: Kiểm tra <điều kiện lặp>. Nếu đúng sang bước 2, ngược lại thoát khỏi vòng lặp.
Bước 2: Thực hiện <khối lệnh>. Quay lại bước 1.
Ví dụ.
Xuất ra màn hình các số từ 1 đến 5.

var x=1;
while (x < =5)
{
document.write(x);
document.write(“<br>”);
x++;
}
VI) Lệnh break và continue
Để thay đổi thứ tự phiên dịch bên trong vòng lặp, JS bổ sung thêm 2 câu lệnh break và continue
1) Break
Phát biểu break dùng để thoát khỏi vòng lặp hiện hành ngay cả khi vòng lặp chưa hoàn tất.
Cú pháp:

break;

Ví dụ 4:

<script language="javascript">
var traloi="";
var dapan= "100";

var tong =0;
for (i=1; i<=3; i++)
{
x = prompt("Hãy nhập một số <=10","");
if (x>10)
continue;
tong += x;
}
document.write("Tổng: "+ tong);
</script>

Phân tích:
- Chương trình chính cho phép người dùng nhập vào 3 số và tính tổng của chúng.
Mỗi lần user nhập dữ liệu là một lần lặp của vòng for. Nếu user nhập số thỏa yêu cầu, chương
trình sẽ cộng số đó vào tổng; ngược lại thì lệnh continue cho phép chuyển qua lần lặp tiếp theo.
Bài 4. MẢNG

I) Khái niệm
Mảng là một dãy ô nhớ liền nhau được đánh chỉ số bắt đầu từ 0. Các ô nhớ trong mảng có cùng
kiểu dữ liệu được truy xuất thông qua tên mảng và chỉ số. Các kiểu dữ liệu trong mảng có thể
là: kiểu số, kiểu chuỗi, …
Ví dụ.
mảng A chứa dãy số 1,5,0,7,8,2. và được lưu trong bộ nhớ như sau

Chỉ số ô 0 1 2 3 4 5
Giá trị ô 1 5 0 7 8 2
II) Khai bao mảng
Cú pháp
var ten_mang = Array(so_phan_tu) ;
Ví dụ

-Math.random() tạo ngẫu nhiên một số thập phân có giá trị từ 0 đến 1.
-Math.round(a, 0) làm tròn số a đến phần nguyên.
Nếu trong ví dụ trên, ta muốn nhập các số nguyên từ 10 đến 99 thì ta khai báo

A[i] = Math.round(Math.random()*100,0);
2) Xuất
Xuất các giá trị mảng A gồm n phần tử
for (i=0; i< n-1 ; i++)
{
document.write(A[i]+” ”);
}
IV) Sắp xếp mảng
Để sắp xếp mảng theo thứ tự tăng dần hay giảm dần ta dùng vòng lặp for. Tuy nhiên, cách này
chỉ áp dụng trong các trường hợp n nhỏ. Giả sử ta cần sắp mảng A tăng dần
Ví dụ A = 5 7 2 0 1 Æ A = 0 1 2 5 7

for (i=0; i< n -1 ; i++)
{
min=A[i];
for (j=i+1; j< n ; j++)
{
if(A[j]<min)
{
var tam=A[i];
A[i]=A[j];
A[j]=tam;
}
}
}
Ý tưởng thuật toán:

việc nào đó được dùng lại nhiều lần.
Do đó, người ta nhóm khối lệnh đó thành 1 hàm. Một chương trình có thể có nhiều hàm, hàm
giúp cấu trúc chương trình dễ đọc, dễ hiểu và dễ nâng cấp.
Hơn nữa, hàm rất hữu ích khi lập trình với Event và event handlers sẽ học trong chương 5.
Hàm c
ũng có thể được sử dụng như là đối tượng cơ bản cho phép người lập trình có thể tạo ra
các đối tượng phức tạp hơn.
Trong chương này, chúng ta sẽ xem xét các phần sau:
-Bản chất của hàm
-Những hàm có sẵn và những hàm người dùng tự tạo.
-Cách định nghĩa và sử dụng hàm
-Cách tạo đối tượng, thuộc tính và phương thức của đối tượng.
-Cách sử dụng mảng liên k
ết.
I) Hàm
Hàm cung cấp cho người lập trình khả năng nhóm các một khối lệnh thực hiện một công việc
nào đó thành một đơn vị độc lập và có thể được sử dụng lại trong suốt chương trình. Mỗi hàm
được định nghĩa bằng tên và được truy cập thông qua tên đó. Hàm nhận tham số truyền vào và
trả về kết quả.
JS cung cấp một số hàm thông dụng. Tuy nhiên các hàm có sẵn không nhiều và thường không
đủ
để giải quyết các vấn đề phức tạp trong thực tế. Do đó, người lập trình có thể tự thiết lập các
hàm riêng cho mình.
Để làm việc hiệu quả với hàm, người lập trình cần biết: định nghĩa hàm, truyền tham số cho
hàm, và lấy kết quả trả về từ hàm. Ngoài ra, một điều quan trọng khi sử dụng hàm là phải xác
định rõ phạm vi hoạt động của các biến trong hàm.
1) Khai báo hàm
Cú pháp:

function <tên hàm>([<tham số 1>, <tham số 2>,…])

Kết quả trả về là một giá trị cụ thể.

function tinhlapphuong(n)
{
var lapphuong = n*n*n;
return lapphuong;
}
hoặc là một biểu thức tương đương một giá trị cụ thể.

function tinhlapphuong(n)
{
return n*n*n;
}
Chúng ta nên tập thói quen khai báo hàm trong phần header để đảm bảo rằng tất cả các hàm
được phiên dịch trước khi người dùng gọi đến. Điều này đặc biệt quan trọng khi làm việc với
event handlers ở chương sau.
3) Thực thi hàm
Cú pháp
<tên hàm>([<tham số 1>, <tham số 2>,…]);
Ví dụ :
Để tính 5
3
ta gọi hàm tinhlapphuong như sau
var kq = tinhlapphuong(5); Æ kq = 125

Để minh họa việc sử dụng hàm, chúng ta sẽ thử phân tích một ví dụ về hàm
Ví dụ :
function kiemtra(cauhoi)
{
// Khai bao cac bien cuc bo trong ham

x+=1;
document.write("Gia tri ben trong ham<br>");
document.write("x=" + x);
document.write("y=" + y);
}
/
/goi hamtang();
document.write("<br>Gia tri ben ngoai ham<br>");
document.write("x=" + x);
document.write("y=" + y);
</script>
Kết quả:
Giá trị bên trong hàm x=2 y=2
Giá trị bên ngoài hàm x=2 y: undefined
Phân tích:
x là biến toàn cục. Ban đầu x=1;
Hàm tang được gọi làm giá trị của biến x tăng 1. Đồng thời biến y=2 được khởi tạo trong hàm
tang là biến cục bộ. Do đó, bên trong hàm ta có x=2, y=2.
Ra khỏi hàm giá trị biến x vẫn là 2, nhưng biến y khi đó đã không còn hiệu lực.