Tổng quan về Javascript
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.29 MB, 107 trang )
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
xử lý trên server, làm cho chương trình chạy nhanh hơn so với một số ngôn ngữ lập trình khác.
- JS còn được dùng
để tạo cookies , nghĩa là lưu trữ và truy lục được các thông tin trên máy tính
của người dùng.
b) Hạn chế:
- Nếu so sánh với những ngôn ngữ lập trình khác thì phương thức, các hàm có sẵn của JS không
nhiều.
- Môi trường phát triển và debug ít, khó sử dụng.
Bài 1: JS đầu tiên
Giới thiệu:
Trong chương này, chúng ta sẽ tìm hiểu 1 đoạn JS đơn giản, thông qua các nội dung sau:
- Nhúng JS vào 1 trang HTML
- Lệnh và khối lệnh
- Các hàm xuất văn bản
- Thứ tự phiên dịch 1 trang HTML có chứa JS
I) Phương pháp nhúng JS vào một trang HTML
Để nhúng 1 đoạn JS vào trang HTML, ta sử dụng thẻ <script>
1) Thẻ <script>
Đoạn chương trình JS được đặt giữa hai thẻ <script> và </script>
<script language="javascript">
Viết chương trình ở đây
</script>
Ví dụ 1:
<script language="javascript">
document.write("Chào các bạn! ");
</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
a) Đặt bên trong:
Như đã biết cấu trúc trang HTML như sau:
<html>
<head>
…phần đầu
</head>
<body>
… phần thân
</body>
</html>
- JS có thể đặt trong phần đầu chương trình (giữa <head> và </head>) hoặc phần thân
chương trình (giữa <body> và </body>) với sự khác biệt về thứ tự phiên dịch và cách sử
dụng.
- JS đặt trong phần đầu sẽ được phiên dịch trước phần thân, và chỉ thực thi khi được gọi hoặc
khi event tương ứng phát sinh trong trang HTML. Đây là cách phổ biến nhất vì nó giúp đảm
bảo JS đã được phiên dịch trước khi được gọi
- JS đặ
t trong body được phiên dịch và thực thi khi trang đã nạp vào trình duyệt.
b) Đặt bên ngoài:
- Thường dùng cho các đoạn JS dài, phức tạp hoặc cho các đoạn JS dùng lại nhiều lần trong
nhiều trang HTML khác nhau. Chỉ cần lưu JS thành một file với phần mở rộng là js và khai
báo trong thuộc tính src của những trang HTML cần sử dụng
<script language = "javascript" src="xxx.js">
src: khai báo tên file chứa JS với phần tên mở rộng là js.
Cách phổ biến nhất là đặt file này cùng thư mục với file HTML. Nếu đặt khác thư mục, trong
src phải khai báo cả đường dẫn.
- 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>
-Các khối lệnh có thể lồng vào nhau không giới hạn:
{
<khối lệnh bên ngoài>
{
<khối lệnh bên trong>
}
}
III) Xuất văn bản
Trong hầu hết các ngôn ngữ lập trình, một trong những kỹ năng cơ bản nhưng rất cần thiết
là xuất văn bản.
1) Xuất văn bản dạng text.
- document.write xuất văn bản ra cửa sổ trình duyệt. Lệnh này được đặt trong trang HTML
ngay tại vị trí cần xuất văn bản.
Ví dụ:
document.write(“Chào bạn !”);
Lưu ý: Có những ký tự đặc biệt sẽ không xuất ra như văn bản thông thường, mà thực hiện
một công việc nào đó như \n \t \r \f \b …
Khi đó, nếu muốn xuất ra trình duyệt đúng các ký tự đó, ta phải thêm dấu \ vào trước.
Ví dụ:
document.write(“Chào bạn! \\n”);
Khi sử dụng khối lệnh lồng nhau, nên
canh lề cho dấu { và } thẳng hàng.
Đ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ử
lý.
Cú pháp:
prompt(“chuoi1”, “chuoi2”);
Ví dụ:
prompt(“Bạn thường làm gì vào cuối tuần?”, “xem phim”);
Muốn lưu lại giá trị từ phương thức prompt, chúng ta phải dùng một biến (sẽ học ở chương
sau)
bienx= prompt(“Bạn thường làm gì vào cuối tuần?”, “ngủ”);
Khi đó nếu người dùng nhập vào “đi dã ngoại” thì bienx=”đi dã ngoại”.
• Nếu chọn OK, bienx được lưu vào chương trình
• Nếu chọn Cancel, không làm gì
c) Phương thức confirm
-Phương thức confirm là 1 dialog box dùng để xuất ra thông báo cho người dùng.
-Ph
ương thức confirm nhận tham số truyền vào là chuỗi.
-Trả về true nếu người dùng chọn OK
-Trả về false nếu người dùng chọn Cancel.
Cú pháp:
confirm(“……….”);
Ví dụ:
confirm(“Mình đi shopping nhé!”);
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.
Bài 2: Dữ liệu và thông tin
Giới thiệu:
Trong bất cứ ngôn ngữ lập trình nào, dữ liệu và thông tin luôn là vấn đề được quan tâm hàng
đầu. Một chương trình trình được viết ra dù đơn giản đến phức tạp cũng không ngoài mục đích
cung cấp thông tin cho người dùng hoặc lấy thông tin từ người dùng nhập vào để xử lý, tính
toán.
JS cung cấp 4 loại dữ liệu cơ bản dành cho số và chuỗi. Cách hiệu quả nhất khi làm việc với các
loại dữ liệu là sử
dụng biến.
Trong chương này, sẽ xem xét các vấn đề sau:
-Kiểu dữ liệu trong JS
-Khai báo và sử dụng biến.
-Biểu thức gán giá trị
-Toán tử
-Phép toán so sánh if…else
-Mở rộng tương tác với người dùng bằng phương thức prompt
I) Kiểu dữ liệu trong JS
-Có 4 kiểu cơ bản:
Số number
Chuỗi string
Đúng/sai boolean
Không xác định null
Lưu ý
: null khác với 0 của number và khác chuỗi rỗng “ ” của string
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
4) Giá trị null
- Là kiểu dữ liệu đặc biệt trong JS. null nghĩa là không xác định
Giả sử tham chiếu một biến chưa định nghĩa, kết quả trả về là null.
Hoặc khi sử dụng phương thức prompt, nếu người dùng chọn cancel, giá trị trả về là null
5) Tính linh động của JS
-JS được xem là 1 ngôn ngữ lập trình linh động. Trong loại ngôn ngữ này, kiểu dữ liệu không cần
định nghĩa trước và tự thay đổi theo từng ngữ cảnh cụ thể.
Ví dụ:
Chuyển số sang chuỗi
“Count to” +10 Æ “Count to 10”
Chuyển chuỗi sang số: (*)
3.5+”10” Æ 3.5+10 = 13.5
(*) Các phiên bản hiện nay của JS có xu hướng quản lý chặt chẽ hơn việc chuyển từ chuỗi sang
số bằng cách dùng hàm
-chuyển chuỗi sang số nguyên:
parseInt(“13”) Æ 13
-chuyển chuỗi sang số thực:
parseFloat(“45.2”) Æ 45.2
II) Biến
Là nơi chứa thông tin bạn muốn lưu trữ. Biến có tên và giá trị. Giá trị của biến có thể thay đổi
suốt chương trình và giá trị sau cùng là giá trị thực của biến khi được gọi
1) Cách đặt tên biến:
-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>
Giả sử bạn gõ tên Tý vào
Phân tích:
- Chương trình dùng đoạn JS gồm 2 dòng lệnh. Lệnh thứ 1 khai báo biến ten dùng để lưu
thông tin người dùng nhập vào. Lệnh thứ 2 sử dụng biến ten và xuất ra lời chào.
- Phương thức prompt xuất ra hộp thoại “Hãy nhập tên của bạn vào đây”. Khi hộp thoại
hiện ra, nếu người dùng nhập tên mới vào thì tên mới được xuất ra kèm theo lời chào,
ngược lại tên khởi t
ạo (Tèo) sẽ được xuất ra.
III) Biến và biểu thức:
Để thao tác trên biến, người ta dùng biểu thức. Biểu thức là tập hợp gồm các biến và toán tử.
Các biểu thức có thể lồng vào nhau không giới hạn.
Các loại biểu thức:
-Biểu thức gán: gán giá trị vào biến
-Biểu thức đại số: kết quả trả về là một số
-Biểu thức chuỗi: kết quả trả về là một chuỗi
-Biểu thức logic: kết quả
trả về là giá trị boolean
1) Biểu thức gán:
Bao gồm biến và các toán tử gán
Cú pháp:
var biến toán tư gán biểu thức;
Ví dụ:
Gán giá trị “hello !” vào biến strname bằng toán tử =
[var] strname = "Hello !";
toán tử gán là =
Hoặc
x += 5;
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*y =20
/ chia 15/5
5/2
3
2.5
% phần dư 5%2
10%8
1
2
++ tăng 1 x = 5
++x
x=6
giảm 1 x = 5
x
x=4
Đối với phép tốn ++ và thì có sự khác biệt lớn khi đặt trước / sau biến
Ví dụ
y = 5
x = y++ -> x = 5 y = 6
Phân tích
Trong biểu thức x = y++ phép tốn = được thực hiện trước , nghĩa là x= y=5. Sau đó, đến phép
tốn ++ được thực hiện, nghĩa là y++.
Do đó y = 6
3) Biểu thức logic:
Bao gồm biến và các tốn tử logic. Biến có giá trị boolean. Kết quả của biểu thức logic là một giá
trị boolean
Tốn tử logic Diễn giải Ví dụ và kết quả
&& và
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"
x= =y Æ true
x= = =y Æ false
!=
Không bằng 5!=8 true
>
Lớn hơn 5>8 false
<
Nhỏ hơn 5<8 true
>=
Lớn hơn hoặc bằng 5>=8 false
<=
Nhỏ hơn hoặc bằng 5<=8 true
5) Toán tử điều kiện:
(<dieukien>) ? <gt_dung> : <gt_sai> ;
Xét biểu thức điều kiện, nếu đúng trả về giá trị gt_dung, ngược lại trả về gt_sai
Ví dụ:
(day= =”thu 7”)? “Chúc cuối tuần vui vẻ” : “Chào ngày mới”;
Ví dụ 2
Sử dụng toán tử điều kiện để đố người dùng
<script language="javascript">
var cauhoi = "Đố bạn 10 + 10 = ?";
var dapan = 20;
var dung = "<img src = 'smiley.jpg'>";
var sai = "<img src = 'sad.jpg'>";
// 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!”;
Để thêm một khoảng trắng vào giữa 2 chuỗi, có 2 cách
// thêm khoảng trắng vào giữa hai chuỗi
chuoi1 = "Chúc một ngày";
chuoi2 = "đẹp trời!";
chuoi3 = chuoi1 + " " + chuoi2;
hoặc
// thêm khoảng trắng vào cuối chuỗi 1 hoặc đầu chuỗi 2
chuoi1 = "Chúc một ngày ";
chuoi2 = "đẹp trời!";
chuoi3 = chuoi1 + chuoi2;
7) Thứ tự ưu tiên của các toán tử:
Thứ tự ưu tiên là tập hợp các quy luật quy định toán tử nào được thực hiện trước, toán tử nào
được thực hiện sau trong một biểu thức có nhiều toán tử
Bảng thứ tự ưu tiên từ cao đến thấp
()
* /
+ -
< <= > >=
== !=
&&
||
?=
= += -= *= /= %=
Khi muốn thay đổi thứ tự ưu tiên, ta dùng dấu ngoặc đơn ( )
Ví dụ:
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
switch
Vòng lặp For
Vòng lặp While
Break – continue
I) Dạng if
Cú pháp.
if (<điều kiện>)
{<khối lệnh>}
Nếu <điều kiện> đúng thì <khối lệnh> được thực hiện. Ngược lại, thì chương trình sẽ không
thực hiện và phiên dịch đến dòng tiếp theo.
Ví dụ 3.
<script language="javascript" >
//Xuất chữ “Chào buổi sáng ” nếu giờ của hệ thống <10
var d=new Date();
var time=d.getHours();
if (time<11)
{
document.write("Chào buổi sáng");
}
</script>
II) Dạng if…else
Cú pháp.
if (<điều kiện >)
{<khối lệnh đúng>}
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 cuối> được thực hiện khi tất cả các <điều kiện > đều sai.
Ví dụ :
if (time<10)
{
document.write("buổi sáng");
}
else if (time <14)
{
document.write("buổi trưa !");
}
else if (time < 18)
{
document.write("buổi chiều !");
}
else
{
document.write("buổi tối !");
}
IV) Dạng switch
-Được dùng thay thế cho if-else if-else khi có quá nhiều điều kiện để so sánh. Switch dựa vào
một tiêu chuẩn nào đó để lựa chọn khối lệnh sẽ được thực hiện.
Cú pháp
switch(<biến>)
{
case <giá trị 1> :
<khối lệnh 1>
break;
case <giá trị 2> :
<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");
break;
case 2:
document.write("Bạn vừa nhập số 2");
break;
case 3:
document.write("Bạn vừa nhập số 3");
break;
default:
document.write("Bạn nhập số không thỏa yêu cầu.")
}
</script>
V) Vòng lặp
Vòng lặp hiểu nôm na là một đoạn chương trình hay một khối lệnh mà người lập trình muốn lặp
lại theo 1 hay nhiều tiêu chí.
1) Vòng lặp for
Vòng lặp for là vòng lặp cơ bản nhất. Cách sử dụng vòng
lặp for trong JS cũng tương tư như trong các ngôn ngữ lập
trình khác như: Perl, C và BASIC.
Ứng dụng phổ biến nhất của for là phép đếm
Cú pháp:
for ( <giá trị đầu của biến đếm> ; <điều kiện lặp> ; <cập nhật biến đếm>)
{
<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> và <cập nhật biến đếm>. Quay lại bước 1.
Chú ý:
Nếu điều kiện lặp luôn luôn đúng thì chương trình sẽ lặp lại vô tận và không bao giờ dừng.
Ví dụ 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>
Phân tích:
• Ví dụ này dùng vòng lặp for với biến đếm là i =1.
• Điều kiện lặp là i<=10 nghĩa là sẽ lặp lại 10 lần
• i++ cho biết sau mỗi bước lặp, i tự tăng lên 1.
• Mỗi bước lặp cho phép người dùng nhập vào món ăn yêu thích và xuất ra màn hình.
2) Vòng lặp for…in
Ben cạnh các ứng dụng chung của vòng lặp for, JS còn cung cấp vòng lặp for…in cho phép duyệt
qua các thuộc tính của một đối tượng
2
để thực hiện một khối lệnh JS tương ứng.
Cú pháp
for ( i in <đối tượng>)
{
<khối lệnh>
}
3) Vòng lặp while
Có chức năng lặp giống for và for…in .
2
Chi tiết về đối tượng sẽ khảo sát ở chương sau.
Cú pháp:
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 cauhoi = "10*10 bằng bao nhiêu?";
for (k =1; k<=3; k++)
{
traloi=prompt(cauhoi,"0");
if (traloi = = dapan)
{
alert (“Đúng rồi ! Bạn giỏi lắm”);
break;
}
}
</script>
Phân tích:
Đoạn script trên đặt câu hỏi cho user. Nếu trả lời đúng, xuất ra “Đúng rồi! Bạn giỏi lắm.” Nếu
sai, được phép trả lời lại, tối đa 3 lần (k<=3).
Lệnh break dùng thoát khỏi vòng lặp ngay khi user trả lời đúng ở lần đầu tiên hoặc lần thứ 2.
2) Continue
Phát biểu continue cho phép trình biên dịch bỏ qua khối lệnh còn lại trong vòng lặp và chuyển
đến bước lặp tiếp theo trong vòng lặp đó.
Cú pháp:
Continue;
Ví dụ 5:
Nhập vào 3 số <=10 và tính tổng của chúng.
<script language="javascript">
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ụ
var A = Array(6);
Khi đó, để truy xuất ô thứ 4 của mảng A, ta dùng cú pháp sau A[3]
III) Nhập –xuất mảng
1) Nhập
Sau khi khai báo mảng, ta thực hiện công việc tiếp theo là nhập giá trị vào mảng. Có 2 cách là
nhập thông thường hoặc nhập bằng vòng lặp (thường dùng for).
Giả sử cần nhập giá trị vào mảng A có n phần tử, ta thực hiện như sau:
a) Nhập thông thường
A[0] = <giá trị 0>;
A[1] = <giá trị 1>;
A[2] = <giá trị 2>;
A[n-1] = <giá trị n-1>;
Thường dùng khi các giá trị đó là số tường minh như A[1] = 15.
b) Nhập bằng vòng lặp for
for (i=0; i< n ; i++)
{
A[i] = prompt(“Nhập A[i]: ”,“”);
}
Thường dùng để yêu cầu user nhập giá trị.
c) Nhập ngẫu nhiên
Ví dụ nhập ngẫu nhiên các số từ 0 đến 9 vào mảng A
for (i=1; i< n ; i++)
{
A[i] = Math.round(Math.random()*10,0);
}
Diễn giải.
Hàm Math.round và Math.random là hàm toán học.
-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:
Xét phần tử thứ 1, nếu có phần tử bên phải nhỏ hơn thì đổi chổ cho phần tử thứ 1. Kết thúc
vòng lặp for bên trong phần tử thứ 1 là nhỏ nhất
Sau đó, xét phần tử thứ 2, ….
Kết thúc vòng lặp for bên ngoài, ta có mảng A được sắp tăng dần.
V) Tìm kiếm trong mảng
Để kiểm tra xem một phần tử x có nằm trong mảng A hay không, ta có thể dùng cách đơn giản
là duyệt qua tất cả các phần tử của mảng
kq = false;
for (i=1; i< n ; i++)
{
if(A[i]= =x)
{
kq=true;
break;
}
}
if (kq = =true)
document.write(“Tìm thấy”);
else
document.write(“Tìm không thấy”);
Tuy nhiên, cách này không khả thi khi n quá lớn. Ta có thể sắp xếp mảng tăng dần sau đó mới
bắt đầu tìm kiếm.
Đối với mảng tăng dần ta sẽ không duyệt qua tất cả các phần tử của mảng. Ta xác định phần tử
giữa của mảng A. Nếu phần tử cần tìm lớn hơn phần tử giữa thì ta chỉ cần tìm mảng phải, ngược
lại ta tìm mảng trái. Nếu phần tử cần tìm bằng với phần tử giữa thì dừng.
Bài 5: Hàm
Giới thiệu:
Khi viết những chương trình phức tạp, bạn sẽ nhận thấy có những khối lệnh thực hiện một công
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>,…])
{
<khối lệnh>
}
Trong đó:
<tên hàm> tuân theo quy luật tên biến: phân biệt chữ hoa và thường, bắt đầu bằng 1 ký
tự, có thể chứa dấu gạch nối ( _ ).
Hàm có thể tham số hoặc không.
Danh sách các tham số và biến truyền vào hàm được đặt trong dấu ngoặc đơn và ngăn
cách nhau bởi dấu phẩy. Hàm chấp nhận kiểu tham số là biến hoặc ký tự.
Ví dụ:
function InTen(ten)
Khi truyền tham số cho hàm,
có 2 thuộc tính rất hữu ích khi
lập trình
<tên hàm>.arguments: là
m
ột mảng chứa các tham số
{
document.write("<HR>Tên của bạn là <B><I>");
document.write(ten);
document.write("</B></I><HR>");
}
2) Kết quả trả về:
Hàm trả về kêt quả bằng câu lệnh return
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
var hienthicauhoi = question + "là ?";
var dung = "Đúng rồi";
var sai = "Sai rồi";
//Dung ham eval cua JS tinh ket qua cua mot bieu thuc
var dapan = eval(cauhoi);
// Dat cau hoi cho nguoi dung
var traloi = prompt(hienthicauhoi,0);
//Kiem tra cau tra loi
alert((traloi = = dapan) ? dung : sai);
}
//thuc thi ham
cauhoi_1 = “10*5+9”;
kiemtra(cauhoi_1);
Phân tích:
- Hàm nhận tham số truyền vào là cauhoi
- Nêu câu hỏi cho người dùng bằng prompt
- Kiểm tra câu trả lời của người dùng (traloi = = dapan)
- Thông báo kết quả dựa vào mức độ chính xác của câu trả lời.
II) Phạm vi biến
Phạm vi biến là nơi biến đó tồn tại và có hiệu lực. Thường thì biến có hiệu lực kể từ lúc khai báo
đến cuối đoạn script chứa nó. Loại biến đó gọi là biến toàn cục - –global variable. Tuy nhiên,
nếu dòng lệnh khai báo biến được đặt bên trong một hàm thì biến chỉ có hiệu lực bên trong hàm
đó. Biến này gọi là biến cục bộ – local variable
Ví dụ 1:
<script language="javascript">
var x=1; // x la bien toan cuc
function tang()
{
var y = 2; // y la bien cuc bo
x+=1;
document.write("Gia tri ben trong ham<br>");
document.write("x=" + x);
document.write("y=" + y);
}
/
/goi ham
tang();
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.
