Giáo trình HTLM Và javascript: Phần 1 - Việt Tiến

Nôi dung Giáo trình HTLM Và javascript gồm 12 chương, phần 1 giáo trình trình bày 6 chương đầu: Giới thiệu chung (các ngôn ngữ đánh dấu dùng cho thiết bị điện tử, ngôn ngữ đánh dấu văn bản ứng dụng web, ngôn ngữ đánh dấu siêu văn bản); các thẻ cơ bản trong HTLM; làm việc với bảng - biểu mẫu - khung và đa phương tiện; style sheet; tổng quan về javascript, toán tử và biểu thức trong javascript.

VIETHANIT MỤC LỤC CHƯƠNG GIỚI THIỆU CHUNG Các ngôn ngữ đánh dấu dùng cho thiết bị điện tử Ngôn ngữ đánh dấu thiết bị cầm tay Ngôn ngữ đánh dấu vô tuyến Ngôn ngữ đánh dấu siêu văn thu nhỏ Các ngôn ngữ đánh dấu văn ứng dụng Web Ngôn ngữ đánh dấu siêu văn Ngôn ngữ đánh dấu mở rộng .2 Ngôn ngữ XHTML Ngôn ngữ DHTML Ngôn ngữ đánh dấu siêu văn (HTML) Giới thiệu HTML Đặc điểm HTML Cấu trúc tài liệu HTML .5 Qui trình tạo tài liệu HTML .6 CHƯƠNG CÁC THẺ CƠ BẢN TRONG HTML Thẻ thuộc tính thẻ Các thẻ HTML Thẻ xác định văn HTML Thẻ xác định phần đầu cho trang web .9 Thẻ xác định tiêu đề cho văn HTML Thẻ xác định 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 trang web 19 Thẻ tạo đường thẳng .19 Thẻ xác định dịng thích 21 Các thẻ vận dụng với vă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 gạch 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 .25 2.3.2.2 Đổi cỡ chữ vă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 27 HTML JavaScript Trang i VIETHANIT Lựa chọn hình ảnh làm .28 Chỉnh lề cho trang Web 29 Tạo đoạn vă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 URL 31 Sử dụng siêu liên kết 32 Thẻ Meta 38 Các thẻ DIV 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 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 bảng 50 Thuộc tính thẻ 50 Thuộc tính thẻ 50 Thuộc tính 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 đường kẻ lưới 53 Trang trí văn chung quanh bảng 54 Kết hợp cột dòng .55 Canh lề nội dung ô .57 Sử dụng hình ảnh làm 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 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 JavaScript Trang ii VIETHANIT Phần tử vơ hiệu hố .74 Làm việc với khung 74 dụng 75 Tại 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 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 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 vào tài liệu HTML 87 Chèn video vào tài liệu HTML .88 CHƯƠNG 89 STYLE SHEET .89 DHTML 89 Giới thiệu DHTML 89 Các đặc điểm DHTML .90 Style sheet 91 4.2.1 Khái niệm, chức lợi ích style sheet 91 4.2.2 Quy tắc stylesheet 94 4.2.3 Các Selector style sheet 96 4.2.4 Kết hợp chèn style sheet vào tài liệu HTML 103 4.2.5 Thiết lập thuộc tính style sheet 105 CHƯƠNG 106 TỔNG QUAN VỀ JAVASCRIPT 106 5.1 Giới thiệu Javascript .106 Javascript .106 Tìm hiểu lịch sử JavaScript 106 Nguồn gốc JavaScript 107 JavaScript đến với Internet Explorer 107 JavaScript trở thành chuẩn thức 107 JavaScript phát triển đến đâu? .108 Nhúng Javascript vào file HTML 108 Dùng thẻ 109 Dùng file bên 110 Dùng JavaScript trình xử lý kiện 111 Thẻ 112 Biến, kiểu liệu JavaScript .113 5.2.1 Biến phân loại biến 113 5.2.2 Hằng .114 5.2.3 Các kiểu liệu JavaScript 115 5.2.3.1 Kiểu số nguyên 116 5.2.3.2 Kiểu số thực (kiểu số dấu chấm động) 116 5.2.3.3 Kiểu Logical (hay Boolean) 116 5.2.3.5 Kiểu null 117 Câu hỏi tập 118 CHƯƠNG 119 TOÁN TỬ VÀ BIỂU THỨC TRONG JAVASCRIPT 119 HTML JavaScript Trang iii VIETHANIT 6.1 Các toán tử JavaScript .119 6.1.1 Các toán tử thông dụng 119 6.1.1.1 Toán tử gán 119 6.1.1.2 Toán tử số học .120 6.1.1.3 Toán tử so sánh .121 6.1.1.4 Toán tử logic 122 6.1.1.5 Toán tử thao tác bit .123 6.1.1.6 Toán tử chuỗi 125 6.1.2 Một số toán tử khác 126 6.1.2.1 Toán tử điều kiện 126 6.1.2.2 Toán tử dấu phẩy 126 6.1.2.3 Toán tử new 126 6.1.2.4 Toán tử typeof .126 6.1.2.5 Toán tử this 128 6.1.3 Thứ tự ưu tiên toán tử 129 6.2 Các biểu thức JavaScript 129 6.2.1 Biểu thức regular 130 6.2.2 Tạo biểu thức regular 132 6.2.2.1 Khởi tạo đối tượng (Object initializer) 133 6.2.2.2 Gọi hàm khởi tạo đối tượng RegExp 133 6.2.3 Sử dụng biểu thức regular 134 6.3 Câu hỏi tập 136 CHƯƠNG 139 CÂU LỆNH ĐIỀU KIỆN .139 7.1 Lệnh khối lệnh 139 7.1.1 Lệnh quy ước lệnh JavaScript 139 7.1.2 Khối lệnh 139 7.2 Các câu lệnh điều kiện 139 7.2.1 Câu lệnh if…else 139 7.2.2 Câu lệnh switch 143 7.3 Câu hỏi tập 146 CHƯƠNG 149 CÂU LỆNH VÒNG LẶP .149 8.1 Các lệnh vòng lặp JavaScript .149 8.1.1 Câu lệnh for 149 8.1.2 Câu lệnh while .151 8.1.3 Câu lệnh while .152 8.2 Các lệnh chuyển điều khiển vòng lặp 153 8.2.1 Câu lệnh label .153 8.2.2 Câu lệnh break .153 8.2.3 Câu lệnh continue 154 8.3 Các lệnh thao tác đối tượng 156 8.3.1 Câu lệnh for…in 156 8.3.2 Câu lệnh with .157 8.4 Câu hỏi tập 158 CHƯƠNG 160 HÀM .160 9.1 Khái niệm thao tác hàm 160 9.1.1 Khái niệm hàm 160 9.1.2 Tạo hàm 160 9.1.3 Gọi hàm 162 HTML JavaScript Trang iv VIETHANIT 9.1.4 Câu lệnh return .162 9.2 Một số hàm thông dụng hỗ trợ JavaScript 164 9.2.1 Hàm eval 164 9.2.2 Hàm isFinite 164 9.2.3 Hàm isNaN 165 9.2.4 Các hàm parseInt parseFloat 165 9.2.5 Các hàm Number String 166 9.3 Câu hỏi tập 166 CHƯƠNG 10 169 MẢNG 169 10.1 Khái niệm mảng thao tác mảng JavaScript 169 10.1.1 Khái niệm mảng 169 10.1.2 Tạo mảng 169 10.1.3 Gán giá trị cho phần tử mảng .169 10.1.4 Truy cập đến phần tử mảng 171 10.2 Các phương thức mảng .171 10.2.1 Phương thức concat 172 10.2.2 Phương thức join 172 10.2.3 Phương thức pop 174 10.2.4 Phương thức push .174 10.2.5 Phương thức reverse 174 10.2.6 Phương thức sort 175 10.3 Mảng hai chiều 176 10.4 Câu hỏi tập 178 CHƯƠNG 11 180 CÁC ĐỐI TƯỢNG CƠ BẢN CỦA JAVASCRIPT .180 11.1 Đối tượng Math 181 11.1.1 Mô tả 181 11.1.2 Các thuộc tính đối tượng Math 182 11.1.3 Các phương thức đối tượng Math 183 11.2 Đối tượng String .185 11.2.1 Mô tả 185 11.2.2 Các thuộc tính đối tượng String 186 11.2.3 Các phương thức đối tượng String 186 11.2.4 Tìm kiếm chuỗi 188 11.2.5 Định vị ký tự chuỗi .190 11.3 Đối tượng Date 192 11.3.1 Mô tả 192 11.3.2 Các nhóm phương thức đối tượng Date 193 11.3.3 Các phương thức đối tượng Date 193 11.3.3.1 Nhóm phương thức get .193 11.3.3.2 Nhóm phương thức set 194 11.3.3.3 Nhóm phương thức to 194 11.3.3.4 Nhóm phương thức parse UTC 194 11.4 Câu hỏi tập 195 CHƯƠNG 12 199 XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO CÁC PHẦN TỬ TRÊN FORM 199 12.1 Giới thiệu đối tượng form 199 12.1.1 Mô tả đối tượng 199 12.1.2 Các thuộc tính phương thức đối tượng form 199 12.2 Xử lý kiện JavaScript 201 HTML JavaScript Trang v VIETHANIT 12.2.1 Khái niệm kiện trình xử lý kiện 201 12.2.2 Các kiện JavaScript phổ biến 202 12.2.3 Làm việc với trình xử lý kiện 212 12.2.3.1 Trình xử lý kiện cho thẻ HTML .212 12.2.3.2 Trình xử lý kiện thuộc tính .213 12.3 Sử dụng kiện cho thành phần form 214 12.3.1 Đối tượng Textfield (Trường văn bản) 214 12.3.2 Đối tượng Command Button 216 12.3.3 Đối tượng Checkbox 217 12.3.4 Đối tượng radio 219 12.3.5 Đối tượng ComboBox (lựa chọn) 222 12.3.6 Kiểm tra tính hợp lệ nội dung trường form 222 12.4 Câu hỏi tập 227 HTML JavaScript Trang vi VIETHANIT Chương Giới thiệu chung CHƯƠNG GIỚI THIỆU CHUNG Trong ngành in ấn trước đây, để thị cho thợ in chữ văn bản, tác giả hay chủ bút thường vẽ vòng tròn thảo thích ngơn ngữ, tương tự tốc kí Ngơn ngữ gọi ngơn ngữ đánh dấu (Markup Language) Do nhu cầu phát triển khoa học công nghệ mà người ta xây dựng ngơn ngữ có tên: Ngơn ngữ đánh dấu tổng quát (SGML - Standard Generalized Markup Language) SGML phát triển Ed Mosher, Ray Lorie Charles F Goldfarb nhóm IBM research vào năm 1969 Ban đầu có tên Generalized Markup Language (GML), thiết kế để diễn tả ngôn ngữ khác bao gồm văn phạm, từ vựng chúng Năm 1986, SGML tổ chức ISO (International Standard Organisation) thu nhận làm tiêu chuẩn để lưu trữ trao đổi liệu Và sau ngôn ngữ đánh dấu thiết bị điện tử, thiết kế Web phát triển dựa vào sở 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 sử dụng để cung cấp dịch vụ nội dung đến thiết bị điện tử 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 ngôn ngữ đánh dấu siêu vă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) thiết kế cho máy nhắn tin vô tuyến, điện thoại, tế bào điện tử thiết bị cầm tay để lấy thông tin từ trang Web HDML tập hợp WAP, Openwave Systems xây dựng trước chuẩn WAP đời Công ty AT&T Wireless mở dịch vụ dựa HDML vào năm 1996 HDML trước tiên tạo để xây dựng nội dung dựa Web cho máy điện thoại di động thiết bị cầm tay Vào năm 1997, HDML 2.0 tung cho phép người sử dụng nhận thơng số chứng khốn, đầu đề tin tức, cảnh báo thư điện tử 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) ngôn ngữ dựa thẻ sử dụng giao thức ứng dụng vô tuyến WML loại văn XML cho phép công cụ XML HTML sử dụng để phát triển ứng dụng WML WML phát triển từ HDML Openwave khơng phải siêu tập hợp HDML, đặc trưng HDML không xuất WML Tiêu chuẩn WML thống phát triển diễn đàn WAP trì WML có bốn lĩnh vực chức quan trọng: mẫu hiển thị ký tự; tổ chức, định vị thẻ tập; kết nối định vị liên thẻ; thể thơng số chuỗi quản lý trình trạng thái 1.1.3 Ngôn ngữ đánh dấu siêu văn thu nhỏ HTML JavaScript Trang VIETHANIT Chương Giới thiệu chung Ngôn ngữ đánh dấu siêu văn thu nhỏ (cHTML - Compact HTML) tập hợp HTML cho điện thoại tế bào PDA, công ty NTT Docomo phát triển cho hệ thống vô tuyến i-Mode Nhật Bản cHTML thiết kế cho việc hiển thị hình hỗ trợ số chức thiết bị cầm tay Ví dụ, cHTML hỗ trợ nút bấm di chuyển chuột không sử dụng 1.2 Các ngôn ngữ đánh dấu văn ứng dụng Web 1.1 Ngôn ngữ đánh dấu siêu văn Ngôn ngữ đánh dấu siêu văn (HTML - Hyper Text Markup Language) ngôn ngữ đánh dấu thiết kế để tạo trang Web, thơng tin trình bày World Wide Web HTML ứng dụng đơn giản SGML, sử dụng tổ chức công nghệ truyền thông HTML trở thành chuẩn Internet tổ chức World Wide Web Consortium (W3C) trì Phiên HTML 4.01 Tuy nhiên, HTML khơng cịn phát triển tiếp, người ta thay XHTML HTML tồn tập tin văn chứa máy tính nối vào mạng Internet Các file chứa thẻ đánh dấu, thị cho chương trình cách hiển thị, xử lý văn dạng túy Các file thường truyền mạng internet thông qua giao thức mạng HTTP, sau phần HTML hiển thị thơng qua trình duyệt web, trình duyệt đảm nhiệm công việc đọc văn trang cho người sử dụng, phần mềm đọc email, hay thiết bị không dây điện thoại di động 1.2 Ngôn ngữ đánh dấu mở rộng Ngôn ngữ đánh dấu mở rộng (XML – eXtend Markup Language) giống với HTML, hai ngôn ngữ có luật cú pháp Tuy nhiên, tính linh hoạt XML cho phép bạn tạo sử dụng tập thẻ tập thuộc tính riêng để nhận biết phần tử cấu trúc nội dung tài liệu XML khơng ngơn ngữ đánh dấu, cịn có phương pháp định nội dung tài liệu, tương tự HTML định hình thức tài liệu Web Với HTML, người thiết kế đánh dấu văn bản, hình ảnh thành phần khác trang Web tập thẻ mà không liên quan tới ý nghĩa tài liệu, XML khơng chỉ định hình thức mà nội dung tài liệu XML xem cơng cụ mạnh HTML mang lại thơng tin đầy đủ liệu Một số tổ chức chuyên môn xây dựng ngôn ngữ XML riêng, bao gồm thẻ nhận diện đặc tả cơng nghiệp Ví dụ: Ngành cơng nghiệp hóa học phát triển Chemical Markup Language (CML) XML giúp bạn tạo tài liệu độc lập với server Tài liệu nằm máy tài liệu tải tiếp tục sử dụng khơng phụ thuộc vào Server Mặt khác XML mang tính chặt chẽ theo tiêu chuẩn ngôn ngữ đánh dấu văn 1.3 Ngôn ngữ XHTML XHTML kết hợp HTML 4.0 XML 1.0 thành định dạng riêng cho Web XHTML cho phép HTML mở rộng thẻ sở hữu XHTML mã hóa chặt chẽ HTML phải tuân thủ nhiều quy tắc cấu trúc HTML JavaScript Trang VIETHANIT Chương Giới thiệu chung XHTML 1.0 thiết kế nhằm mục đích tạo thói quen tốt cho người xây dựng trang Web Bởi có nhiều người trình bày trang Web theo cách thức trình duyệt thể mà không quan tâm tới sử dụng HTML chuẩn, điều gây hai tác hại: Thứ kết hiển thị phụ thuộc vào trình duyệt người sử dụng, thứ hai tạo thói quen khơng tốt thiết kế, quan tâm tới trình duyệt thể mục đích mà khơng quan tâm chuẩn Sử dụng XHTML chuẩn bước để sẵn sàng xây dựng triển khai XML việc xây dựng XML đòi hỏi phải chặt chẽ HTML XML không chấp nhận lỗi cú pháp tài liệu Có hai lí để sử dụng XHTML cho Website: - Xây dựng trang web động cách tin cậy, dựa vào cú pháp chặt chẽ Dữ liệu cho trang Web động thường khai thác từ sở liệu, file nguồn khác hiển thị theo template phụ thuộc vào yêu cầu người sử dụng Việc xây dựng cách cẩu thả không gây lỗi việc chèn liệu vào vị trí trang Web mà gây lỗi trả phía người dùng - Việc xây dựng trang Web XHTML nhanh trình duyệt khơng nhiều thời gian để dịch, sửa lỗi 1.4 Ngôn ngữ DHTML Khi Microsoft Netscape đưa Version trình duyệt, nhà phát triển Web có lựa chọn mới: Dynamic HTML (DHTML) Trong thực tế tập hợp gồm HTML, Cascading Style Sheets (CSS), JavaScript Tập hợp công nghệ cho phép nhà phát triển sửa đổi nội dung cấu trúc trang Web cách nhanh chóng DHTML yêu cầu hỗ trợ từ trình duyệt Mặc dù Internet Explorer Netscape hỗ trợ DHTML, cách thể chúng khác nhau, nhà phát triển cần phải biết loại trình duyệt mà phía client dùng DHTML thật bước tiến Hiện DHTML đường phát triển mạnh DHTML giúp tăng cường tính tương tác đối tượng điều khiển trang HTML tĩnh cách cho phép người dùng VBscript Javascript điều khiển chúng Ví dụ thẻ image để nhúng ảnh vào trang web nhận biết người dùng di chuyển chuột cách cài đặt hàm xử lý kiện OnMouseOver, thơng qua xử lý thích hợp làm đối tượng hình ảnh trở nên sống động Nhìn chung, bên cạnh mở rộng tạo hiệu ứng MouseOver, chuỗi chữ di chuyển động, thay đổi màu sắc, Các khía cạnh bảo mật DHTML tương tự HTML dựa tảng HTML 1.3 Ngôn ngữ đánh dấu siêu văn (HTML) 1.1 Giới thiệu HTML Ngôn ngữ đánh dấu siêu văn rõ trang Web hiển thị trình duyệt Sử dụng thẻ phần tử HTML, bạn có thể: • Điều khiển hình thức nội dung trang HTML JavaScript Trang VIETHANIT • Chương Giới thiệu chung Xuất tài liệu trực tuyến truy xuất thông tin trực tuyến cách sử dụng liên kết chèn vào tài liệu HTML • Tạo biểu mẫu trực tuyến để thu thập thông tin người dùng, quản lý giao dịch… • Chèn đối tượng audio clip, video clip, thành phần ActiveX Java Applet vào tài liệu HTML Tài liệu HTML tạo thành mã nguồn trang Web Khi xem trình soạn thảo, tài liệu chuỗi thẻ phần tử, mà chúng xác định trang Web hiển thị Trình duyệt đọc file có htm hay html hiển thị trang Web theo lệnh có Ví dụ, theo cú pháp HTML đây, trình duyệt hiển thị thơng điệp “My first HTML document” Ví dụ 1.1: Welcome to HTML My first HTML document Kết quả: Hình 1.1: Kết ví dụ 1.1 1.2 Đặc điểm HTML HTML JavaScript Trang VIETHANIT Chương Toán tử biểu thức Javascript Bảng 6.6: Các toán tử thao tác bit Toán tử Sử dụng Mô tả a&b Trả giá trị vị trí bit, bit tương ứng hai tốn hạng có giá trị OR a|b Trả giá trị vị trí bit, bit tương ứng hai tốn hạng có giá trị XOR a^b Trả giá trị vị trí bit, bit tương ứng hai toán hạng không NOT ~a Đảo bit toán hạng Dịch trái a > b Dịch chuỗi bit mô tả giá trị a sang phải b bit, loại bỏ bit bị đẩy a >>> b Dịch chuỗi bit mô tả giá trị a sang phải b bit, loại bỏ bit bị đẩy ngoài, điền số vào bên trái AND Dịch phải nhân dấu Dịch phải điền giá trị Ta chia toán tử thao tác bit làm hai loại: Các toán tử logic thao tác bit (&, |, ^, ~) toán tử dịch thao tác bit ( >>>) Các toán tử logic thao tác bit Các toán tử logic thao tác bit làm việc sau: • Các tốn hạng đổi thành số nguyên 32 bit biểu diễn chuỗi bit (0 1) • Mỗi bit toán hạng thứ ghép với bit tương ứng toán hạng thứ hai: bit đầu với bit đầu, bit thứ hai với bit thứ hai… • Tốn tử áp dụng cho cặp bit giá trị trả xây dựng từ kết việc áp dụng toán tử cho cặp bit Ví dụ, số mơ tả dãy bit 1001, số 15 mô tả dãy bit 1111, toán tử thao tác bit áp dụng cho giá trị kết trả sau: • 15 & = (1111 & 1001 = 1001) • 15 | = 15 (1111 | 1001 = 1111) • 15 ^ = (1111 ^ 1001 = 0110) Các toán tử dịch thao tác bit HTML JavaScript Trang 124 VIETHANIT Chương Toán tử biểu thức Javascript Các toán tử dịch bit cần hai toán hạng, toán hạng thứ số dịch, tốn hạng thứ hai số vị trí mà toán hạng thứ dịch chuyển Hướng toán tử dịch chuyển bit toán tử sử dụng Các toán tử dịch chuyển đổi toán hạng thứ thành số nguyên 32 bit, dịch theo hướng toán tử yêu cầu sang số bước dịch toán hạng thứ hai, sau trả kết kiểu với tốn hạng thứ Các toán tử dịch chuyển ý nghĩa chúng liệt kê phân tích bảng sau: Bảng 2.7: Các toán tử dịch chuyển bit Tốn tử > (Dịch phải trì dấu) >>> (Dịch phải điền 0) Mơ tả Ví dụ Toán tử dịch chuyển toán hạng sang trái số bit xác định toán hạng thứ hai Các bit đẩy sang trái bị loại bỏ, điền bit vào bên phải > = Tốn tử dịch toán hạng thứ sang phải số bit xác định Các bit đẩy bị loại bỏ Các bit điền vào bên trái 19 >>> = (vì viết thành 1001, dịch sang trái hai bit thành 100100, tức 36 ) (vì 1001 dịch sang phải hai bit thành 10, tức 2) • -9 >>2 = -3 (bởi dấu trì) (vì 19 chuyển thành 10011, dịch phải bit thành 100, tức Đối với số không âm, dịch 4) phải điền giá trị dịch phải trì dấu có kết 6.1.1.6 Toán tử chuỗi Các toán tử so sánh sử dụng cho giá trị chuỗi, toán tử nối (+) nối hai giá trị chuỗi với nhau, trả chuỗi hợp hai chuỗi tốn hạng Ví dụ: “my” + “string” trả chuỗi “mystring” Toán tử gán viết gọn += sử dụng để nối chuỗi Ví dụ, biến mystring có giá trị “alpha”, biểu thức mystring += “bet” có giá trị “alphabet” gán giá trị cho biến mystring HTML JavaScript Trang 125 VIETHANIT Chương Toán tử biểu thức Javascript 6.1.2 Một số toán tử khác Một số tốn tử sử dụng JavaScript không xếp vào loại cụ thể Những toán tử liệt kê đây: 6.1.2.1 Toán tử điều kiện Toán tử điều kiện toán tử JavaScript cần ba toán hạng Toán tử có hai giá trị tùy thuộc vào điều kiện Cú pháp: condition ? val1 : val2 Nếu điều kiện true, tốn tử có giá trị val1 Nếu khơng có giá trị val2 Ví dụ: status = (age >= 18) ? “adult” : “minor” Câu lệnh gán giá trị “adult” cho biến status age >= 18 Ngược lại, gán cho biến giá trị “minor” 6.1.2.2 Toán tử dấu phẩy Toán tử dấu phẩy (,) định giá trị cho hai tốn hạng trả giá trị toán hạng thứ hai Toán tử sử dụng chủ yếu vòng lặp for, phép nhiều biến gán giá trị ban đầu nhiều biến cập nhật lại giá trị thông qua bước lặp Ví dụ: Xét tốn tính tổng số từ đến 10 dùng vòng lặp for Ta khởi tạo giá trị ban đầu cho hai biến, biến dem=1 biến tong=0, lúc ta sử dụng toán tử dấu phẩy for (var dem=1,tong=0;dem>>= &= ^= |= Đ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 == != === !== Quan hệ < >= Toán tử dịch chuyển bit > >>> Cộng/Trừ +- Nhân/Chia */% Phủ định/Tăng ! ~ - ++ 6.2 Các biểu thức JavaScript Để sử dụng biến hiệu quả, ta phải thao tác tính tốn chúng cần thiết Chúng ta thực điều nhờ sử dụng biểu thức (expression) Một biểu thức tập hợp hợp lệ gồm hằng, biến tốn tử để tính tốn trả giá trị đơn Giá trị số, chuỗi hay giá trị logic Có hai kiểu biểu thức: gán giá trị cho biến, đơn giản có giá trị Ví dụ, biểu thức x = biểu thức mà biến x gán giá trị Biểu thức tự định giá trị Các biểu thức sử dụng toán tử gán Một ví dụ khác, ta có biểu thức + định giá trị 7, khơng thực phép gán.Các toán tử sử dụng biểu thức đơn giản tham khảo tới operator (tốn tử) JavaScript có biểu thức sau đây: HTML JavaScript Trang 129 VIETHANIT Chương Tốn tử biểu thức Javascript • Số học: định giá trị số, ví dụ 3.14159 • Chuỗi: định giá trị chuỗi ký tự, ví dụ “Fred” “1234” • Logic: định giá trị true false • Đối tượng: định giá trị đối tượng 6.2.1 Biểu thức regular Biểu thức regular mẫu sử dụng để so khớp liên kết ký tự chuỗi Với biểu thức regular, ta tìm kiếm theo mẫu chuỗi ký tự người dùng nhập vào Ví dụ, ta tạo mẫu tìm kiếm gồm từ “cat” tìm kiếm tất xuất từ xâu Trong JavaScript, biểu thức regular đối tượng Mẫu tìm kiếm biểu thức regular bao gồm: Sử dụng mẫu đơn giản Các mẫu đơn giản xây dựng từ ký tự mà bạn muốn so khớp trực tiếp Ví dụ, mẫu /abc/ so khớp liên kết ký tự chuỗi ký tự ‘abc’ liền theo thứ tự cách xác Như việc so khớp thành công chuỗi “Hi, you know your abc’s?”, khơng có so khớp chuỗi “Grab crab” khơng chứa chuỗi ‘abc’ Sử dụng ký tự dặc biệt Khi tìm kiếm trùng khớp yêu cầu nhiều điều việc so khớp trực tiếp, việc tìm nhiều ký tự b chẳng hạn, tìm khoảng trắng, mẫu có chứa ký tự đặc biệt Ví dụ, mẫu /ab*c/ so khớp với liên kết ký tự nào, ký tự ‘a’ theo sau khơng nhiều ký tự ‘b’ (* có nghĩa khơng nhiều ký tự có sẵn) theo sau ký tự ‘c’ Trong chuỗi “cbbabbbbcdebc” mẫu so khớp chuỗi ‘abbbbc’ Bảng sau liệt kê mô tả số ký tự đặc biệt sử dụng biểu thức regular: Bảng 6.9: Các ký tự đặc biệt biểu thức regular Ký tự \ Ý nghĩa Ví dụ • Có ý nghĩa sau: - Ví dụ, /b/ so khớp với ký tự • - Với ký tự xem ‘b’ Bằng cách đặt dấu xét theo chữ, ký tự gạch chéo ngược trước b ký tự đặc biệt /\b/, ký tự trở nên đặc khơng thơng dịch theo biệt có ý nghĩa so khớp với từ phân định chữ - Ví dụ, * ký tự đặc biệt có nghĩa không nhiều - Với ký tự xem xét ký tự chuỗi có sẵn cách đặc biệt, ký tự tiếp so khớp; ví dụ, /a*/ có nghĩa theo khơng phải ký tự đặc biệt so khớp với không nhiều HTML JavaScript Trang 130 VIETHANIT Chương Toán tử biểu thức Javascript thông dịch theo ký tự ‘a’ Để so khớp với ký tự ‘*’ theo chữ, đặt trước chữ 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 chuỗi nhập Nếu cờ đa dòng thiết lập true, so khớp sau có ký tự xuống dịng /^A/ không so khớp với ký tự ‘A’ chuỗi “an A”, so khớp với ký tự ‘A’ chuỗi “An A” $ So khớp với phần cuối chuỗi /t$/ không so khớp với ‘t’ nhập Nếu cờ đa dòng thiết chuỗi “eater”, so khớp lập true, so khớp chuỗi “eat” trước có ký tự xuống dòng * So khớp với ký tự trước không /bo*/ so khớp với chuỗi ‘boooo’ nhiều lần chuỗi “A ghost booooed” ký tự ‘b’ chuỗi “A bird warbled”, chuỗi “A goat grunted” + So khớp với ký tự trước /a+/ so khớp với ‘a’ chuỗi nhiều lần Tương đương với “candy” tất ký tự ‘a’ {1,} chuỗi “caaaandy” So khớp với ký tự trước không /e?le?/ so khớp với ‘el’ lần “angel” ‘le’ “angle” ? (x) Nếu sử dụng sau ký tự *, +, ? {}, tạo thành ký tự non-greedy (so khớp với số lần nhỏ nhất), trái lại greedy (so khớp số lần lớn nhất) (Dấu chấm thập phân) so khớp /.n/ so khớp với ‘an’ ‘on’ với ký tự ngoại chuỗi “nay, an apple is on trừ ký tự dịng the tree” khơng chuỗi ‘nay’ So khớp với chuỗi ‘x’ nhớ so khớp Các dấu ngoặc đơn gọi dấu ngoặc đơn nhóm /(foo)/ so khớp với ‘foo’ chuỗi “foo bar”và ghi nhớ ‘foo’ Chuỗi so khớp gọi lại từ phần tử [1], …, [n] mảng kết So khớp với ‘x’ ‘y’ /green|red/ so khớp với ‘green’ “green apple” ‘red’ “red apple” x|y HTML JavaScript Trang 131 VIETHANIT Chương Toán tử biểu thức Javascript {n,m} Với n, m số nguyên dương /a{1,3}/ khơng so khớp với So khớp với n nhiều chuỗi “cndy” cả, m kiện ký tự trước so khớp với ký tự ‘a’ “candy”, hai ký tự ‘a’ “caandy” ba ký tự ‘a’ “caaaaaaandy” Nhớ so khớp “caaaaaaandy”, chuỗi so khớp “aaa”, chí chuỗi nguyên thủy có nhiều ‘a’ [xyz] Một tập ký tự So khớp với ký tự bao hàm tập ký tự Chúng ta xác định miền ký tự cách sử dụng dấu nối (-) [abcd] tương đương với [a-d] Chúng so khớp với ‘b’ chuỗi “brisket” ‘c’ chuỗi “ache” [^xyz] Một tập ký tự bù [^xyz] Đó là, so khớp với ký tự mà khơng nằm dấu ngoặt vng Chúng ta xác định miền ký tự cách sử dụng dấu nối (-) [^abc] tương tự [^a-c] Ngay chúng so khớp với ký tự ‘r’ “brisket” ‘h’ “chop” \d So khớp với ký tự số Tương /\d/ /[0-9]/ so khớp với ‘2’ đương với [0-9] “B2 is the suit number” \s So khớp với ký tự khoảng /\s\w*/ so khớp với ‘bar’ trắng nhất, bao gồm ký tự “foo bar” 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] \t So khớp với phím tab \w So khớp với ký tự /\w/ so khớp với ‘a’ trong bảng chữ cái, kể ký tự “apple”, ‘5’ “$5.28” gạch (_) Tương đương với ‘3’ “3D” [A-Za-z0-9_] \n Với n số nguyên dương /apple(,)\sorange\1/ so khớp với Một tham khảo ngược đến chuỗi ‘apple, orange,’ “apple, cuối so khớp n dấu orange, cherry, peach” ngoặc đơn mở biểu thức regular (tổng số dấu ngoặc đơn trái) 6.2.2 Tạo biểu thức regular Một biểu thức regular mẫu tìm kiếm để tìm kiếm liệu dạng JavaScript xem biểu thức regular đối tượng Vì vậy, phải tạo HTML JavaScript Trang 132 VIETHANIT Chương Toán tử biểu thức Javascript biểu thức regular trước sử dụng chúng Có thể tạo biểu thức regular hai cách sau: 6.2.2.1 Khởi tạo đối tượng (Object initializer) Cách trước gọi tạo đối tượng cách sử dụng ký hiệu nguyên dạng, sau chuyển thành khởi tạo đối tượng để giống với thuật ngữ C++ Nếu ta muốn tạo thể đối tượng, ta phải dùng Object initializer Cú pháp việc khởi tạo đối tượng sau: objectname = {expression} Trong objectname tên đối tượng mới, expression khuôn mẫu để tạo đối tượng Chẳng hạn: re = /xy+z/ Trong định nghĩa trên, biểu thức regular “xy+z” tạo gán cho đối tượng re Bây dùng đối tượng re để tìm kiếm mẫu theo yêu cầu Khi khởi tạo đối tượng, biểu thức regular dịch script đánh giá Nếu biểu thức regular khơng thay đổi, sử dụng khởi tạo đối tượng hiệu 6.2.2.2 Gọi hàm khởi tạo đối tượng RegExp JavaScript cung cấp đối tượng biểu thức định nghĩa trước, RegExp Một hàm khởi tạo dùng để tạo kiểu đối tượng định nghĩa thuộc tính đối tượng Ví dụ, tạo đối tượng gọi “employee” Các thuộc tính đối tượng empID, join_dt, salary function employee (empID, join_dt, salary) { this.empID = empID this.join_dt = join_dt this.salary = salary } Sau hàm tạo, phải dùng hàm để tạo thể đối tượng tốn tử new Ví dụ: employee1=new employee(“123”, “17/11/07”, 2500) Khi dùng hàm khởi tạo, biểu thức dịch thời gian thực thi Nếu biểu thức regular thay đổi phụ thuộc vào liệu nhập vào từ người dùng, sử dụng hàm khởi tạo hợp lý Ví dụ, hàm getdetails() tìm kiếm mẫu liệu nhập từ người dùng Dữ liệu nhập người dùng đa dạng Chọn mẫu tìm kiếm (\w+)\s(\d+) Có nghĩa là, nhiều ký tự xuất theo sau ký tự trắng xuất HTML JavaScript Trang 133 VIETHANIT Chương Toán tử biểu thức Javascript ký tự số Dấu cộng (+) nhiều ký tự xuất Dấu (*) nhiều ký tự xuất 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 sử dụng với phương thức test exec đối tượng RegExp phương thức match, replace, search, spilit đối tượng String Các phương thức mô tả bảng sau: Bảng 6.10: Các phương thức sử dụng biểu thức regular Phương thức Mơ tả Exec Tìm kiếm mẫu tương xứng chuỗi Nó trả mảng thông tin Test Kiểm tra tương xứng chuỗi Trả giá trị sai Match Tìm kiếm tương xứng chuỗi Trả mảng thông tin giá trị null sai Search Kiểm tra tương xứng chuỗi Trả giá trị số tương xứng tồn tại, -1 bị sai Replace Tìm kiếm tương xứng chuỗi, thay chuỗi tìm kiếm tương xứng chuỗi thay khác Spilit Dùng để tách chuỗi thành mảng chuỗi Để dùng phương thức, phải xác định đối tượng sử dụng Cú pháp là: objectname.method = funtion_name Sau có gọi phương thức ngữ cảnh đối tượng Cú pháp là: Objectname.methodname(parameters) Chúng ta dùng cờ với biểu thức regular Hai cờ “g” “i” chọn tùy ý, dùng riêng dùng hai cờ Cờ “g” dùng để dẫn tìm kiếm tồn cục Cờ “i” dùng để dẫn tìm kiếm có phân biệt chữ hoa chữ thường Chẳng hạn: re = /\w+\s/g ; //use a global search HTML JavaScript Trang 134 VIETHANIT Chương Tốn tử biểu thức Javascript Ví dụ 6.3: Đoạn mã dùng để kiểm tra phương thức tìm kiếm mẫu chuỗi Nếu mẫu tìm thấy, giá trị trả “true” ngược lại trả “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 tìm kiếm xuất ký tự x, y, 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 JavaScript Trang 135 VIETHANIT Chương Toán tử biểu thức Javascript 6.3 Câu hỏi tập Câu hỏi: JavaScript dùng toán tử ngơi tốn tử hai ngơi? _ (Đúng/Sai) Các tốn tử ngơi bao gồm Kết trả hai biểu thức y = ++x y = x++ có giống khơng? _ (Có/Khơng) Trong JavaScript, tốn tử logic sử dụng với toán hạng mang giá trị boolean _(Đúng/Sai) Đối với tốn tử logic &&, tốn hạng có giá trị false kết trả Đối với số không âm, dịch phải điền giá trị dịch phải trì dấu có kết khác _(Đúng/Sai) Toán tử điều kiện toán tử JavaScript cần tốn hạng Khi có nhiều tốn tử biểu thức, _của toán tử xác định thứ tự thực tốn tử Một _ tập hợp hợp lệ gồm hằng, biến tốn tử để tính tốn trả giá trị đơn 10 Giá trị trả (hay kết trả về) biểu thức số _(Đúng/Sai) 11 Hãy đánh giá biểu thức sau: a + b "7" + "5" c == d >= e = 5) && (5 > 5) h (7 >= 5) || (5 > 5) 12 Đoạn mã sau in kết quả? var i = 1; document.write(i++); document.write(++i); HTML JavaScript Trang 136 VIETHANIT a 12 b 22 c 13 d 23 Chương Toán tử biểu thức Javascript 13 Đoạn mã sau in kết quả? var x = 11; var y = document.write(x|y); HTML JavaScript Trang 137 VIETHANIT Chương Toán tử biểu thức Javascript Bài tập thực hành chương 6: Dùng JavaScript hiển thị thông báo “Chao ban!” 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 … tên vừa nhập 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ự đốn kết chương trình hai số nhập vào Gõ lại đoạn mã vào trình soạn thảo để kiểm tra kết Cho người dùng nhập vào chuỗi, chuyển tất ký tự ‘a’ 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()) Gõ lại câu hỏi 12 13 để kiểm tra kết Gõ lại ví dụ chương HTML JavaScript Trang 138 ... 17 6 10 .4 Câu hỏi tập 17 8 CHƯƠNG 11 18 0 CÁC ĐỐI TƯỢNG CƠ BẢN CỦA JAVASCRIPT .18 0 11 .1 Đối tượng Math 18 1 11 .1. 1 Mô tả 18 1 11 .1. 2... JavaScript .11 9 6 .1. 1 Các tốn tử thơng dụng 11 9 6 .1. 1 .1 Toán tử gán 11 9 6 .1. 1.2 Toán tử số học .12 0 6 .1. 1.3 Toán tử so sánh .12 1 6 .1. 1.4 Toán tử logic... 18 2 11 .1. 3 Các phương thức đối tượng Math 18 3 11 .2 Đối tượng String .18 5 11 .2 .1 Mô tả 18 5 11 .2.2 Các thuộc tính đối tượng String 18 6 11 .2.3 Các