BÀI GIẢNG TÓM TẮT LẬP TRÌNH WEB Dành cho sinh viên ngành Cao Đẳng (Lưu hành nội bộ) pptx

This is going to be real fun

ví dụ khơng? Thẻ

để trình bày đoạn Khi viết báo hay luận, bạn nhóm nội dung thành loạt đoạn Mục đích nhóm ý tưởng logic lại với áp dụng số định dạng cho nội dung Trong tài liệu HTML, nội dung nhóm thành đoạn Thẻ đoạn

sử dụng để đánh dấu bắt đầu đoạn Ví dụ Welcome to HTML

This is going to be real fun

Another paragraph element Hình 1.5: Kết ví dụ Thẻ đóng

tự động bắt đầu đoạn Các thẻ ngắt Lập trình Web Phần tử sử dụng để ngắt dòng tài liệu HTML Thẻ bổ sung ký tự xuống dịng vị trí thẻ Ví dụ 4: Welcome to HTML

This is going to be real fun

Another paragraph element Hình 1.6: Kết ví dụ Chọn canh lề Thuộc tính align sử dụng để canh lề cho phần tử HTML trang Web Chúng ta canh lề văn bản, đối tượng, hình ảnh, đoạn, phân đoạn, Sau đây, bạn học cách canh lề văn bản: Thuộc tính align gồm giá trị sau: Value Description Left Văn canh lề trái Center Văn canh Right Văn canh phải Justify Văn canh hai bên Canh lề mặc định dựa vào hướng văn Nếu hướng văn từ trái sang phải mặc định trái Lập trình Web setSeconds Thiết lập giây cho đối tượng Date ( 0-59) setTime Thiết lập giá trị thời gian (tính mili giây) cho đối tượng Date setMonth Thiết lập tháng cho đối tượng Date (1-12) setYear Thiết lập năm cho đối tượng Date, năm phải lớn 1900 (năm (–) 1900) Nhóm phương thức to: Phương thức Mô tả toGMTString Chuyển đối tượng Date từ chuỗi thời gian sang dạng GMT toLocaleString Chuyển đối tượng Date từ chuỗi sang dạng thời gian địa phương Nhóm phương thức Parse & UTC: Phương thức Date.parse(date string ) Mô tả Số mili giây date string (chuỗi thời gian) tính từ 1/1/1970 Date.UTC(year, month, Số mili giây đối tượng thời gian tính từ 1/1/1970 day, hours, min., secs ) Ví dụ 10: 12) ? hour - 12 : hour) temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second temp += (hour >= 12) ? " P.M." : " A.M." document.MyPage.digits.value = temp id = setTimeout("disptime()",1000) } // > 139 Lập trình Web

Time and Tide wait for none

The time is displayed on the page Hình 7.11: Kết ví dụ 10 Ví dụ 11: TODAY'S DATE mydate=new Date() document.write("Today's Date is: "+ mydate.getDate()); 140 Lập trình Web Hình 7.12: Kết ví dụ 11 7.3 ĐỐI TƯỢNG EVENT – KHÁI NIỆM Các chương trình JavaScript thường hướng kiện Các kiện hành động xảy trang web Một kiện người dùng tạo – click chuột vào button - hệ thống tạo – thay đổi kích thước trang Hầu hết trình duyệt hỗ trợ đối tượng Event Mỗi kiện có đối tượng Event tương ứng Đối tượng Event cung cấp thông tin kiện - loại kiện vị trí trỏ thời điểm xảy kiện Khi kiện phát sinh, gửi đối số đến trình xử lý kiện Dĩ nhiên, phải có trình xử lý kiện trường hợp Chẳng hạn, người dùng nhấp chuột, kiện onmousedown phát sinh Đối tượng Event chứa thông tin sau: Loại kiện - Trong trường hợp nhấp chuột Vị trí x y trỏ nhấp chuột Nút chuột nhấn Các phím bổ trợ (Control, Alt, Meta, Shift) nhấn vào thời điểm xảy kiện Đối tượng Event sử dụng trực tiếp với đối tượng window Nó sử dụng phần trình xử lý kiện Một kiện bắt đầu hành động điều kiện khởi tạo kiện kết thúc việc đáp lại trình xử lý kiện Vịng đời kiện thơng thường gồm bước sau: Hành động người dùng điều kiện tương ứng với kiện xảy Đối tượng Event cập nhật tức nhằm phản ánh trạng thái kiện Sự kiện kích hoạt Trình xử lý kiện tương ứng gọi Trình xử lý kiện thực hành động trả điều khiển cho chương trình 7.4 CÁC SỰ KIỆN JAVASCRIPT 141 Lập trình Web Tập hợp kiện tương ứng với phần tử khác trang phần mơ hình đối tượng tài liệu (Document Object Model), JavaScript Nghĩa là, kiện phần tử hỗ trợ khác trình duyệt Sau số kiện thường hầu hết đối tượng hỗ trợ: onClick Sự kiện onClick tạo người dùng nhấp chuột lên phần tử form (button, checkbox, radio button, phần tử select), lên hyperlink Ví dụ 1: function compute(form) { if (confirm("Are you sure?")) form.kết quả.value = eval(form.expr.value) else alert("Please come back again.") } Enter an expression: Kết quả: Kết đoạn mã ví dụ minh hoạ Hình 7.1 142 Lập trình Web Hình 7.1: Kết ví dụ onChange Sự kiện onChange xảy phần tử form thay đổi Điều xảy nội dung trường văn thay đổi, chọn lựa danh sách chọn lựa thay đổi Tuy nhiên, kiện onChange không tạo radio button checkbox nhấp Thay vào đó, kiện onClick tạo Sự kiện onChange gửi phần tử hồn tất việc thay đổi Vì vậy, textbox hiệu chỉnh, kiện onChange phát sinh sau việc hiệu chỉnh hồn tất, người dùng khỏi textbox Ví dụ 2: Please enter a number: Hình 7.2(1) 17.2(2) minh hoạ kết đoạn mã ví dụ Hình 7.2: Kết ví dụ 2(1) 144 Lập trình Web Nếu nhập vào giá trị số: Hình 7.2: Kết ví dụ 2(2) onFocus Sự kiện onFocus gửi phần tử form trở thành phần tử thời Chỉ phần tử nhận focus nhận input từ người dùng Điều xảy người dùng nhấp chuột lên phần tử, sử dụng phím Tab Shift+Tab (di chuyển tớI phần tử form) onBlur Blur ngược với focus Khi người dùng rời khỏi phần tử form, kiện onBlur kích hoạt Đối với số phần tử, nội dung bị thay đổi, kiện onChange kích hoạt Ví dụ 3: 145 Lập trình Web Khi textbox nhận focus, màu chuyển sang DIMGRAY, focus (blur), màu chuyển sang AQUA Hình 7.3: Kết ví dụ – Blur (hình trái) and focus (hình phải) onMouseOver Sự kiện onMouseOver tạo trỏ chuột di chuyển lên phần tử onMouseOut Sự kiện onMouseOut tạo trỏ chuột di chuyển khỏi phần tử Ví dụ 4: var num =0 function showLink(num) { if (num==1) { document.forms[0].elements[0].value= Aptech"; "You have selected } if (num==2) { document.forms[0].elements[0].value = "You have selected Asset"; } 146 Lập trình Web if (num==3) { document.forms[0].elements[0].value = "You have selected Arena"; } } Sesame!" Thay sử dụng nhiều câu lệnh JavaScript, hàm giúp cho việc thiết kế chương trình tốt Chúng ta gọi hàm cần thiết Hơn hàm dùng phần tử khác Câu lệnh gán hàm greeting() cho trình xử lý kiện onLoad window Thuộc tính trình xử lý kiện tham chiếu đến hàm greeting khơng phải lời gọi đến hàm greeting() Ví dụ My Home Page 150 Lập trình Web function greeting() { alert("Welcome to my world"); } Kết quả: Hình 7.8: Kết ví dụ Trình xử lý kiện thuộc tính Chúng ta gán hàm cho trình xử lý kiện đối tượng Cú pháp sau: object.eventhandler = function; Ví dụ, window.onload = greeting; Chúng ta xem lại ví dụ sử dụng trình xử lý kiện thuộc tính: Ví dụ My Home Page Kết tương tự Hình 7.8 Điểm mạnh kĩ thuật tính linh hoạt Chúng ta thay đổI nhanh chóng trình xử lý kiện u cầu 152 Lập trình Web TÀI LIỆU THAM KHẢO Giáo trình Lập trình Web, Trung tâm Aptech Tự học HTML, Trung tâm Điện toán Trường Đại học Bách Khoa Tp HCM 153 ... trang Web cho phép họ gửi e-mail từ trình duyệt Tất cần làm chèn giá trị mailto vào thẻ liên kết 1.4.3 Điều hướng quanh Web site 19 Lập trình Web Dù web. ..

để trình bày đoạn Khi viết báo hay luận, bạn nhóm nội dung thành loạt đoạn Mục đích nhóm ý tưởng logic lại với áp dụng số định dạng cho nội dung Trong tài liệu HTML, nội dung nhóm thành đoạn... 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