Giáo trình HTML và JavaScript (Phần 1)

CHƯƠNG 1

GIỚI THIỆU CHUNG

Trong ngành in ấn trước đây, để chỉ thị cho thợ in sắp chữ trong văn bản, tác giả

hay chủ bút thường vẽ các vòng tròn trong bản thảo và chú thích bằng một ngôn ngữ,

tương tự tốc kí. Ngôn ngữ đó được gọi là ngôn ngữ đánh dấu (Markup Language).

Do những nhu cầu phát triển của khoa học công nghệ mà người ta đã xây dựng ra

một ngôn ngữ có tên: Ngôn ngữ đánh dấu tổng quát (SGML - Standard Generalized

Markup Language). SGML được phát triển bởi Ed Mosher, Ray Lorie và Charles F.

Goldfarb của nhóm IBM research vào năm 1969. Ban đầu nó có tên là Generalized

Markup Language (GML), và được thiết kế để diễn tả các ngôn ngữ khác bao gồm văn

phạm, từ vựng của chúng. Năm 1986, SGML được tổ chức ISO (International

Standard Organisation) thu nhận làm tiêu chuẩn để lưu trữ và trao đổi dữ liệu. Và sau

này các ngôn ngữ đánh dấu thiết bị điện tử, thiết kế Web được phát triển dựa vào cơ sở

của ngôn ngữ đánh dấu tổng quát SGML.

1.1 Các ngôn ngữ đánh dấu dùng cho thiết bị điện tử

Một số ngôn ngữ đánh dấu được sử dụng để cung cấp các dịch vụ và nội dung

đến các thiết bị điện tử như máy nhắn tin, điện thoại di động, thiết bị vô tuyến. Các

ngôn ngữ đó bao gồm: Ngôn ngữ đánh dấu thiết bị cầm tay, ngôn ngữ đánh dấu vô

tuyến và ngôn ngữ đánh dấu siêu văn bản thu nhỏ.

1.1.1 Ngôn ngữ đánh dấu thiết bị cầm tay

Ngôn ngữ đánh dấu thiết bị cầm tay (HDML - Handheld Device Markup

Language) được thiết kế cho máy nhắn tin vô tuyến, điện thoại, tế bào điện tử và các

thiết bị cầm tay để lấy các thông tin từ các trang Web. HDML là một tập hợp con của

WAP, được Openwave Systems xây dựng trước khi chuẩn WAP ra đời. Công ty

AT&T Wireless mở dịch vụ dựa trên HDML vào năm 1996.

HDML trước tiên được tạo ra để xây dựng nội dung dựa trên Web cho máy điện

thoại di động và các thiết bị cầm tay. Vào năm 1997, HDML 2.0 được tung ra cho

phép người sử dụng nhận các thông số chứng khoán, các đầu đề tin tức, các cảnh báo

thư điện tử trên máy điện thoại di động.

1.1.2 Ngôn ngữ đánh dấu vô tuyến

Ngôn ngữ đánh dấu vô tuyến (WML - Wireless Markup Language) là một ngôn

ngữ dựa trên thẻ được sử dụng trong giao thức ứng dụng vô tuyến. WML là một loại

văn bản XML cho phép các công cụ XML và HTML sử dụng để phát triển các ứng

dụng WML. WML được phát triển từ HDML của Openwave nhưng nó không phải là

một siêu tập hợp của HDML, các đặc trưng HDML không xuất hiện trong WML.

Tiêu chuẩn WML chính thống được phát triển và được diễn đàn WAP duy trì.

WML có bốn lĩnh vực chức năng quan trọng: mẫu và hiển thị ký tự; tổ chức, định vị

thẻ và tập; kết nối và định vị liên thẻ; thể hiện thông số chuỗi và quản lý trình trạng

thái.

pdf 144 trang yennguyen 4680
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình HTML và JavaScript (Phần 1)", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

Tóm tắt nội dung tài liệu: Giáo trình HTML và JavaScript (Phần 1)

Giáo trình HTML và JavaScript (Phần 1)
VIETHANIT
MỤC LỤC
CHƯƠNG 1................................................................................................................................1
GIỚI THIỆU CHUNG................................................................................................................1
Các ngôn ngữ đánh dấu dùng cho thiết bị điện tử...................................................................1
Ngôn ngữ đánh dấu thiết bị cầm tay...................................................................................1
Ngôn ngữ đánh dấu vô tuyến..............................................................................................1
Ngôn ngữ đánh dấu siêu văn bản thu nhỏ...........................................................................1
Các ngôn ngữ đánh dấu văn bản ứng dụng Web....................................................................2
Ngôn ngữ đánh dấu siêu văn bản........................................................................................2
Ngôn ngữ đánh dấu mở rộng...............................................................................................2
Ngôn ngữ XHTML.............................................................................................................2
Ngôn ngữ DHTML.............................................................................................................3
Ngôn ngữ đánh dấu siêu văn bản (HTML).............................................................................3
Giới thiệu HTML................................................................................................................3
Đặc điểm của HTML..........................................................................................................4
Cấu trúc của một tài liệu HTML.........................................................................................5
Qui trình tạo một tài liệu HTML.........................................................................................6
CHƯƠNG 2................................................................................................................................8
CÁC THẺ CƠ BẢN TRONG HTML........................................................................................8
Thẻ và các thuộc tính của thẻ..................................................................................................8
Các thẻ cơ bản trong HTML...................................................................................................9
Thẻ xác định văn bản HTML..............................................................................................9
Thẻ xác định phần đầu cho trang web.................................................................................9
Thẻ xác định tiêu đề cho văn bản HTML...........................................................................9
Thẻ xác định các danh mục trang web.............................................................................10
Thẻ tạo danh sách..............................................................................................................11
Thẻ tạo danh sách không thứ tự....................................................................................12
Thẻ tạo danh sách có thứ tự..........................................................................................14
Thẻ xác định văn bản trang web...................................................................................19
Thẻ tạo đường thẳng.........................................................................................................19
Thẻ xác định dòng chú thích.............................................................................................21
Các thẻ vận dụng với văn bản...............................................................................................21
Thẻ vận dụng cho kiểu chữ...............................................................................................21
2.3.1.1 Làm chữ đậm.....................................................................................................21
2.3.1.2 Làm chữ in nghiêng.........................................................................................22
2.3.1.3 Thay đổi kích thước chữ...................................................................................23
2.3.1.4 Tạo dòng chữ thấp.............................................................................................23
2.3.1.5 Tạo dòng chữ cao..............................................................................................24
2.3.1.6 Gạch ngang và gạch dưới chữ...........................................................................25
2.3.1.7 Tạo chữ dạng riêng............................................................................................25
2.3.1.8 Tạo dạng chữ bị xoá..........................................................................................25
2.3.1.9 Tạo dạng chữ chèn vào.....................................................................................25
Thẻ vận dụng cho hiệu ứng font chữ................................................................................25
2.3.2.1 Chọn font chữ cho văn bản...............................................................................25
2.3.2.2 Đổi cỡ chữ văn bản...........................................................................................26
2.3.2.3 Chọn cỡ chữ mặc định......................................................................................27
2.3.2.4 Đổi màu chữ......................................................................................................27
2.3.2.5 Làm chữ nhấp nháy...........................................................................................27
Thẻ vận dụng trình bày trang Web........................................................................................27
Lựa chọn màu nền.............................................................................................................27
HTML và JavaScript Trang i
VIETHANIT
Lựa chọn hình ảnh làm nền...............................................................................................28
Chỉnh lề cho trang Web....................................................................................................29
Tạo đoạn văn bản..............................................................................................................29
Ngắt đoạn..........................................................................................................................30
Một số thẻ đặc biệt khác.......................................................................................................31
Thẻ làm việc với siêu liên kết...........................................................................................31
Giới thiệu siêu liên kết và URL....................................................................................31
Sử dụng siêu liên kết.....................................................................................................32
Thẻ Meta...........................................................................................................................38
Các thẻ DIV và SPAN......................................................................................................39
Các thẻ mức đoạn..............................................................................................................40
2.5.3.1 Thẻ .............................................................................................40
2.5.3.2 Thẻ ....................................................................................41
2.5.3.3 Thẻ ........................................................................................................42
Sử dụng ký tự đặc biệt trong tài liệu HTML.........................................................................43
CHƯƠNG.................................................................................................................................48
LÀM VIỆC VỚI BẢNG - BIỂU MẪU – KHUNG VÀ ĐA PHƯƠNG TIỆN....................48
Làm việc với bảng.................................................................................................................48
Cách tạo bảng....................................................................................................................48
Các thuộc tính của bảng....................................................................................................50
Thuộc tính của thẻ ......................................................................................50
Thuộc tính của thẻ ..............................................................................................50
Thuộc tính của thẻ ..............................................................................................51
Hiệu chỉnh bảng................................................................................................................52
Tạo khung viền cho bảng..............................................................................................52
Thay đổi kích thước bảng..............................................................................................53
Bổ sung cạnh và đường kẻ lưới.....................................................................................53
Trang trí văn bản chung quanh bảng.............................................................................54
Kết hợp các cột và các dòng.........................................................................................55
Canh lề nội dung trong ô...............................................................................................57
Sử dụng hình ảnh làm nền cho bảng.............................................................................57
Làm việc với biểu mẫu..........................................................................................................59
Sử dụng biểu mẫu..............................................................................................................59
Phần tử FORM..................................................................................................................59
Các phần tử nhập của HTML............................................................................................60
Phần tử INPUT..............................................................................................................60
Button............................................................................................................................61
Textbox.........................................................................................................................61
Checkbox......................................................................................................................61
Radio.............................................................................................................................62
Submit...........................................................................................................................62
Ảnh................................................................................................................................63
Reset..............................................................................................................................63
Phần tử TextArea..........................................................................................................64
Phần tử BUTTON.........................................................................................................65
Phần tử Select................................................................................................................67
Phần tử LABEL.............................................................................................................70
Tạo biểu mẫu.....................................................................................................................71
Thiết lập tiêu điểm (Focus)...........................................................................................73
Thứ tự tab......................................................................................................................74
Phím truy cập (Access Keys)........................................................................................74
HTML và JavaScript Trang ii
VIETHANIT
Phần tử vô hiệu hoá.......................................................................................................74
Làm việc với khung..............................................................................................................74
dụng...................................................................................................................................75
Tại sao sử dụng khung?.....................................................................................................75
Làm việc với khung.........................................................................................................75
3.3.2.1 Sử dụng khung..................................................................................................75
3.3.2.2 Liên kết các khung............................................................................................80
3.3.2.3 Phần tử NOFRAMES........................................................................................81
3.3.2.4 Phần tử IFRAMES (inline frame).....................................................................82
Làm việc với đa phương tiện................................................................................................83
Sử dụng hình ảnh trong tài liệu HTML.............................................................................83
Chèn ảnh tĩnh................................................................................................................84
Chèn ảnh động (.GIF) vào tài liệu HTML....................................................................86
Chèn âm thanh vào tài liệu HTML...................................................................................87
Chèn video vào tài liệu HTML.........................................................................................88
CHƯƠNG 4..............................................................................................................................89
STYLE SHEET.........................................................................................................................89
DHTML................................................................................................................................89
Giới thiệu DHTML...........................................................................................................89
Các đặc điểm của DHTML...............................................................................................90
Style sheet.............................................................................................................................91
4.2.1 Khái niệm, chức năng và các lợi ích của style sheet............................................... ... ủa các toán tử đó. Một biểu thức được đọc từ trái sang phải và được 
thực hiện từ các toán tử có độ ưu tiên cao đến các toán tử có độ ưu tiên thấp hơn. Nếu 
muốn thay đổi trật tự thực hiện của các toán tử, chúng ta phải sử dụng các cặp dấu 
ngoặc đơn ( ).
Bảng dưới đây liết kê độ ưu tiên của các toán tử từ thấp đến cao:
Bảng 6.8: Độ ưu tiên của các toán tử 
Kiểu toán tử Các toán tử
Dấu phẩy
Phép gán = += -= *= /= %= >= >>>= &= ^= |=
Điều kiện ?:
Toán tử logic OR ||
Toán tử logic AND &&
Toán tử thao tác bit OR |
Toán tử thao tác bit XOR ^
Toán tử thao tác bit AND &
So sánh bằng == != === !==
Quan hệ >=
Toán tử dịch chuyển trên bit > >>>
Cộng/Trừ + -
Nhân/Chia * / %
Phủ định/Tăng ! ~ - ++ --
6.2 Các biểu thức trong JavaScript 
Để sử dụng các biến hiệu quả, ta phải có thể thao tác và tính toán chúng mỗi khi 
cần thiết. Chúng ta thực hiện được điều này nhờ sử dụng các biểu thức (expression).
Một biểu thức là một tập hợp hợp lệ gồm các hằng, các biến và các toán tử để 
tính toán và trả về một giá trị đơn. Giá trị này có thể là một số, một chuỗi hay bất kỳ 
một giá trị logic nào đó.
Có hai kiểu biểu thức: gán một giá trị cho một biến, và đơn giản là chỉ có một giá 
trị. Ví dụ, biểu thức x = 7 là biểu thức mà biến x được gán giá trị là 7. Biểu thức này tự 
nó định giá trị là 7. Các biểu thức như vậy sử dụng các toán tử gán. Một ví dụ khác, ta 
có biểu thức 3 + 4 định giá trị là 7, nó không thực hiện phép gán.Các toán tử được sử 
dụng trong các biểu thức như vậy đơn giản được tham khảo tới như là các operator 
(toán tử).
JavaScript có các biểu thức sau đây:
HTML và JavaScript Trang 129
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
• Số học: định giá trị là một số, ví dụ 3.14159
• Chuỗi: định giá trị là một chuỗi ký tự, ví dụ “Fred” hoặc “1234”
• Logic: định giá trị là true hoặc false
• Đối tượng: định giá trị là một đối tượng
6.2.1 Biểu thức regular 
Biểu thức regular là các mẫu được sử dụng để so khớp các liên kết ký tự trong 
các chuỗi. Với biểu thức regular, ta có thể tìm kiếm theo mẫu trong các chuỗi ký tự do 
người dùng nhập vào. Ví dụ, ta tạo một mẫu tìm kiếm gồm từ “cat” và sẽ tìm kiếm tất 
cả các xuất hiện của từ này trong một xâu nào đó. Trong JavaScript, các biểu thức 
regular cũng là các đối tượng. 
Mẫu tìm kiếm của biểu thức regular có thể bao gồm:
Sử dụng các mẫu đơn giản
Các mẫu đơn giản được xây dựng từ các ký tự mà bạn muốn so khớp trực tiếp. Ví 
dụ, mẫu /abc/ so khớp sự liên kết ký tự trong các chuỗi chỉ khi các ký tự ‘abc’ đi liền 
nhau theo thứ tự một cách chính xác. Như vậy việc so khớp sẽ thành công trong chuỗi 
“Hi, do you know your abc’s?”, và không có sự so khớp trong chuỗi “Grab crab” bởi 
vì nó không chứa chuỗi con ‘abc’.
Sử dụng các ký tự dặc biệt
Khi tìm kiếm một trùng khớp yêu cầu nhiều điều hơn việc so khớp trực tiếp, như 
việc tìm một hoặc nhiều ký tự b chẳng hạn, hoặc tìm các khoảng trắng, mẫu có chứa 
các ký tự đặc biệt. Ví dụ, mẫu /ab*c/ so khớp với bất cứ liên kết ký tự nào, trong đó ký 
tự duy nhất ‘a’ được theo sau bởi không hoặc nhiều ký tự ‘b’ (* có nghĩa là không 
hoặc nhiều ký tự có sẵn) và ngay lập tức được theo sau bởi ký tự ‘c’. Trong chuỗi 
“cbbabbbbcdebc” mẫu so khớp là chuỗi con ‘abbbbc’.
Bảng sau liệt kê và mô tả một số ký tự đặc biệt có thể được sử dụng trong các 
biểu thức regular:
Bảng 6.9: Các ký tự đặc biệt trong các biểu thức regular 
Ký tự Ý nghĩa Ví dụ
\ • Có một trong các ý nghĩa 
sau:
• - Với các ký tự được xem 
xét theo từng chữ, chỉ ra ký tự 
tiếp theo là ký tự đặc biệt và 
không được thông dịch theo 
từng chữ.
- Với các ký tự được xem xét một 
cách đặc biệt, chỉ ra ký tự tiếp 
theo không phải là ký tự đặc biệt 
- Ví dụ, /b/ so khớp với ký tự 
‘b’. Bằng cách đặt một dấu 
gạch chéo ngược trước b như 
thế này /\b/, ký tự trở nên đặc 
biệt có ý nghĩa so khớp với một 
từ phân định. 
- Ví dụ, * là một ký tự đặc biệt 
có nghĩa là không hoặc nhiều 
ký tự của chuỗi có sẵn sẽ được 
so khớp; ví dụ, /a*/ có nghĩa là 
so khớp với không hoặc nhiều 
HTML và JavaScript Trang 130
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
và sẽ được thông dịch theo từng 
chữ.
•
•
ký tự ‘a’. Để so khớp với ký tự 
‘*’ theo từng chữ, hãy đặt trước 
nó một dấu gạch chéo ngược; ví 
dụ, /a\*/ so khớp với ‘a*’. 
^
So khớp với phần đầu của chuỗi 
nhập. Nếu cờ đa dòng được thiết 
lập là true, thì sẽ so khớp ngay 
lập tức sau khi có một ký tự 
xuống dòng.
/^A/ không so khớp với ký tự 
‘A’ trong chuỗi “an A”, nhưng 
so khớp với ký tự ‘A’ đầu tiên 
trong chuỗi “An A”.
$
So khớp với phần cuối của chuỗi 
nhập. Nếu cờ đa dòng được thiết 
lập là true, thì sẽ so khớp ngay 
lập tức trước khi có một ký tự 
xuống dòng
/t$/ không so khớp với ‘t’ trong 
chuỗi “eater”, nhưng so khớp 
nó trong chuỗi “eat”
*
So khớp với ký tự đi trước không 
hoặc nhiều lần.
/bo*/ so khớp với chuỗi ‘boooo’ 
trong chuỗi “A ghost booooed” 
và ký tự ‘b’ trong chuỗi “A bird 
warbled”, nhưng không phải 
trong chuỗi “A goat grunted”.
+
So khớp với ký tự đi trước một 
hoặc nhiều lần. Tương đương với 
{1,}.
/a+/ so khớp với ‘a’ trong chuỗi 
“candy” và tất cả các ký tự ‘a’ 
trong chuỗi “caaaandy”.
?
So khớp với ký tự đi trước không 
hoặc một lần.
Nếu được sử dụng ngay sau các 
ký tự *, +, ? hoặc {}, thì tạo thành 
ký tự non-greedy (so khớp với số 
lần nhỏ nhất), trái lại là greedy 
(so khớp số lần lớn nhất).
/e?le?/ so khớp với ‘el’ trong 
“angel” và ‘le’ trong “angle”.
.
(Dấu chấm thập phân) so khớp 
với ký tự duy nhất nào đó ngoại 
trừ ký tự dòng mới.
/.n/ so khớp với ‘an’ và ‘on’ 
trong chuỗi “nay, an apple is on 
the tree” nhưng không trong 
chuỗi ‘nay’.
(x)
So khớp với chuỗi ‘x’ và nhớ sự 
so khớp này. Các dấu ngoặc đơn 
này được gọi là các dấu ngoặc 
đơn nhóm.
/(foo)/ so khớp với ‘foo’ trong 
chuỗi “foo bar”và ghi nhớ 
‘foo’. Chuỗi con được so khớp 
có thể gọi lại từ các phần tử [1],
, [n] của mảng kết quả.
x|y
So khớp với ‘x’ hoặc ‘y’. /green|red/ so khớp với ‘green’ 
trong “green apple” và ‘red’ 
trong “red apple”.
HTML và JavaScript Trang 131
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
{n,m}
Với n, m là các số nguyên dương. 
So khớp với ít nhất n và nhiều 
nhất m sự kiện của ký tự đi trước.
/a{1,3}/ không so khớp với cái 
gì trong chuỗi “cndy” cả, nhưng 
so khớp với ký tự ‘a’ trong 
“candy”, hai ký tự ‘a’ đầu tiên 
trong “caandy” và ba ký tự ‘a’ 
đầu tiên trong “caaaaaaandy”. 
Nhớ rằng khi so khớp 
“caaaaaaandy”, chuỗi so khớp 
là “aaa”, thậm chí khi chuỗi 
nguyên thủy có nhiều ‘a’ trong 
nó. 
[xyz]
Một tập ký tự. So khớp với một 
trong các ký tự bao hàm trong tập 
ký tự. Chúng ta có thể xác định 
một miền các ký tự bằng cách sử 
dụng một dấu nối (-). 
[abcd] tương đương với [a-d]. 
Chúng so khớp với ‘b’ trong 
chuỗi “brisket” và ‘c’ trong 
chuỗi “ache”.
[^xyz]
Một tập ký tự bù của [^xyz]. Đó 
là, nó so khớp với bất cứ ký tự 
nào mà không nằm trong dấu 
ngoặt vuông. Chúng ta có thể xác 
định một miền các ký tự bằng 
cách sử dụng một dấu nối (-). 
[^abc] tương tự như [^a-c]. 
Ngay đầu tiên chúng so khớp 
với ký tự ‘r’ trong “brisket” và 
‘h’ trong “chop”.
\d So khớp với một ký tự số. Tương đương với [0-9].
/\d/ hoặc /[0-9]/ so khớp với ‘2’ 
trong “B2 is the suit number”.
\s
So khớp với một ký tự khoảng 
trắng duy nhất, bao gồm các ký tự 
khoảng trắng, tab, ký tự sang 
trang, ký tự chuyển dòng. Tương 
đương với [\f\n\r\t\v].
/\s\w*/ so khớp với ‘bar’ trong 
“foo bar”.
\t So khớp với phím tab
\w
So khớp với một ký tự nào đó 
trong bảng chữ cái, kể cả ký tự 
gạch dưới (_). Tương đương với 
[A-Za-z0-9_]
/\w/ so khớp với ‘a’ trong 
“apple”, ‘5’ trong “$5.28” và 
‘3’ trong “3D”.
\n
Với n là một số nguyên dương. 
Một tham khảo ngược đến chuỗi 
con cuối cùng so khớp n dấu 
ngoặc đơn mở trong biểu thức 
regular (tổng số các dấu ngoặc 
đơn trái).
/apple(,)\sorange\1/ so khớp với 
‘apple, orange,’ trong “apple, 
orange, cherry, peach”
6.2.2 Tạo ra một biểu thức regular 
Một biểu thức regular là một mẫu tìm kiếm để tìm kiếm dữ liệu cùng dạng. 
JavaScript xem một biểu thức regular như một đối tượng. Vì vậy, chúng ta phải tạo 
HTML và JavaScript Trang 132
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
một biểu thức regular trước khi sử dụng chúng. Có thể tạo ra một biểu thức regular 
bằng một trong hai cách sau:
6.2.2.1 Khởi tạo đối tượng (Object initializer).
Cách này trước đây được gọi là tạo đối tượng bằng cách sử dụng các ký hiệu 
nguyên dạng, sau đó nó được chuyển thành khởi tạo đối tượng để giống với thuật ngữ 
của C++. Nếu ta muốn tạo ra một thể hiện của một đối tượng, ta phải dùng một Object 
initializer.
Cú pháp của việc khởi tạo đối tượng như sau:
objectname = {expression}
Trong đó objectname là tên của đối tượng mới, expression là một khuôn mẫu để 
tạo đối tượng.
Chẳng hạn:
re = /xy+z/
Trong định nghĩa trên, một biểu thức regular “xy+z” được tạo và gán cho đối 
tượng re. Bây giờ chúng ta có thể dùng đối tượng re để tìm kiếm các mẫu theo yêu 
cầu.
Khi chúng ta khởi tạo đối tượng, biểu thức regular sẽ được dịch khi script được 
đánh giá. Nếu biểu thức regular không thay đổi, thì sử dụng khởi tạo đối tượng hiệu 
quả hơn.
6.2.2.2 Gọi hàm khởi tạo của đối tượng RegExp
JavaScript cung cấp đối tượng biểu thức định nghĩa trước, đó là RegExp. Một 
hàm khởi tạo được dùng để tạo một kiểu đối tượng và định nghĩa các thuộc tính của 
đối tượng. Ví dụ, chúng ta có thể tạo một đối tượng gọi là “employee”. Các thuộc tính 
của đối tượng là empID, join_dt, salary.
function employee (empID, join_dt, salary) 
{
this.empID = empID
this.join_dt = join_dt
this.salary = salary
}
Sau khi hàm được tạo, chúng ta phải dùng hàm để tạo một thể hiện của đối tượng 
bằng toán tử new. Ví dụ:
 employee1=new employee(“123”, “17/11/07”, 2500)
Khi chúng ta dùng hàm khởi tạo, biểu thức được dịch trong thời gian thực thi. 
Nếu biểu thức regular thay đổi hoặc nếu nó phụ thuộc vào dữ liệu nhập vào từ người 
dùng, sử dụng hàm khởi tạo là hợp lý nhất.
Ví dụ, hàm getdetails() tìm kiếm một mẫu dữ liệu được nhập từ người dùng. Dữ 
liệu nhập bởi người dùng rất đa dạng. Chọn mẫu tìm kiếm là (\w+)\s(\d+). Có nghĩa là, 
một hoặc nhiều ký tự bất kỳ xuất hiện theo sau một ký tự trắng hoặc xuất hiện bất kỳ 
HTML và JavaScript Trang 133
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
một ký tự số nào. Dấu cộng (+) chỉ ra một hoặc nhiều ký tự xuất hiện. Dấu sao (*) chỉ 
ra 0 hoặc nhiều ký tự xuất hiện.
function getdetails() 
{
re = /(\w+)\s(\d+)/
re.exec() ;
window.alert(RegExp.$1+“, your age is ” + RegExp.$2) ;
}
6.2.3 Sử dụng biểu thức regular 
Các biểu thức regular được sử dụng với các phương thức test và exec của đối 
tượng RegExp và các phương thức match, replace, search, và spilit của đối tượng 
String.
Các phương thức này được mô tả trong bảng sau:
Bảng 6.10: Các phương thức sử dụng các biểu thức regular 
Phương thức Mô tả
Exec Tìm kiếm một mẫu tương xứng trong một chuỗi. Nó trả về một mảng thông tin.
Test Kiểm tra tương xứng trong một chuỗi. Trả về giá trị đúng hoặc sai.
Match Tìm kiếm tương xứng trong một chuỗi. Trả về một mảng thông tin hoặc giá trị null nếu sai.
Search Kiểm tra sự tương xứng trong một chuỗi. Trả về giá trị chỉ số của tương xứng nếu tồn tại, -1 nếu bị sai.
Replace
Tìm kiếm sự tương xứng trong một chuỗi, và thay 
thế chuỗi con tìm kiếm tương xứng bằng một chuỗi 
con thay thế khác.
Spilit Dùng để tách một chuỗi thành một mảng các chuỗi con.
Để dùng một phương thức, chúng ta phải xác định đối tượng được sử dụng.
Cú pháp là:
objectname.method = funtion_name
Sau đó chúng ta có gọi phương thức trong ngữ cảnh của đối tượng.
Cú pháp là:
Objectname.methodname(parameters)
Chúng ta có thể dùng các cờ với biểu thức regular. Hai cờ “g” và “i” được chọn 
tùy ý, có thể dùng riêng hoặc dùng cả hai cờ. Cờ “g” được dùng để chỉ dẫn tìm kiếm 
toàn cục. Cờ “i” dùng để chỉ dẫn tìm kiếm có phân biệt chữ hoa và chữ thường.
Chẳng hạn: re = /\w+\s/g ; //use a global search
HTML và JavaScript Trang 134
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
Ví dụ 6.3:
Đoạn mã dưới đây dùng để kiểm tra phương thức tìm kiếm một mẫu trong chuỗi. 
Nếu mẫu được tìm thấy, giá trị trả về là “true” và ngược lại thì trả về “false”.
re = /Time/
str = re.test ("Time and Tide wait for none");
window.alert (str);
Kết quả:
Hình 6.2: Minh họa biểu thức regular 
Ví dụ 6.4:
Đoạn mã sau đây tìm kiếm sự xuất hiện của ký tự x, y, hoặc z.
re = /[xyz]/
str = re.exec ("It is very coooooold");
window.alert (str);
Kết quả:
Hình 6.3: Minh họa biểu thức regular 
HTML và JavaScript Trang 135
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
6.3 Câu hỏi và bài tập
Câu hỏi:
1. JavaScript dùng cả toán tử một ngôi và toán tử hai ngôi? _______ (Đúng/Sai)
2. Các toán tử một ngôi bao gồm ________________
3. Kết quả trả về của hai biểu thức y = ++x và y = x++ có giống nhau không? 
_________ (Có/Không)
4. Trong JavaScript, toán tử logic chỉ được sử dụng với các toán hạng mang giá 
trị boolean _________(Đúng/Sai)
5. Đối với toán tử logic &&, nếu một toán hạng có giá trị false thì kết quả trả về 
là __________.
6. Đối với các số không âm, dịch phải điền giá trị 0 và dịch phải duy trì dấu có 
kết quả khác nhau _________(Đúng/Sai)
7. Toán tử điều kiện là một toán tử của JavaScript cần ______ toán hạng.
8. Khi có nhiều toán tử trong cùng một biểu thức, _____________của toán tử 
xác định thứ tự thực hiện của các toán tử đó. 
9. Một ___________ là một tập hợp hợp lệ gồm các hằng, các biến và các toán 
tử để tính toán và trả về một giá trị đơn.
10. Giá trị trả về (hay kết quả trả về) của một biểu thức chỉ có thể là một số 
_________(Đúng/Sai).
11. Hãy đánh giá các biểu thức sau:
 a. 7 + 5 
 b. "7" + "5" 
 c. 7 == 7 
 d. 7 >= 5 
 e. 7 <= 7 
 f. (7 < 5) ? 7 : 5 
 g. (7 >= 5) && (5 > 5) 
 h. (7 >= 5) || (5 > 5)
12. Đoạn mã sau sẽ in ra kết quả?
var i = 1;
document.write(i++);
document.write(++i);
HTML và JavaScript Trang 136
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
a. 12
b. 22
c. 13
d. 23
13. Đoạn mã sau sẽ in ra kết quả?
var x = 11;
var y = 5
document.write(x|y);
HTML và JavaScript Trang 137
VIETHANIT Chương 6. Toán tử và biểu thức trong Javascript
Bài tập thực hành chương 6: 
1. Dùng JavaScript hiển thị một thông báo “Chao ban!”
2. Sử dụng prompt cho phép người dùng nhập tên vào, sau đó hiển thị 
câu chào “Xin chao ..”. Trong đó . là tên vừa nhập. 
3. Cho đoạn mã sau:
var x=prompt ("Please enter the first number: ","");
var y=prompt ("Please enter the second number: ","");
r=x+y;
document.write("The result is: "+r);
Dự đoán kết quả của chương trình khi hai số nhập vào là 3 và 5.
Gõ lại đoạn mã trên vào trình soạn thảo để kiểm tra kết quả.
4. Cho người dùng nhập vào một chuỗi, chuyển tất cả các ký tự ‘a’ trong 
chuỗi thành ‘AB’, sau đó hiển thị lại chuỗi vừa biến đổi
(Gợi ý: sử dụng phương thức replace())
5. Gõ lại câu hỏi 12 và 13 để kiểm tra kết quả
6. Gõ lại các ví dụ trong chương 1 và 2.
HTML và JavaScript Trang 138

File đính kèm:

  • pdfgiao_trinh_html_va_javascript_phan_1.pdf