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.
Tóm tắt nội dung tài liệu: 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:
- giao_trinh_html_va_javascript_phan_1.pdf