Công cụ web - Cách hoạt động của world wide web

Công cụ web 1 1 Công Cụ Web Cách hoạt động của World Wide Web 2 Công cụ Web Tổng quan Hello <IMG SRC=‘file.gif’></ P> Hello Page to Browser Display User Client Body { font-family: ; font-weight: ; } Servers CSS Style Sheet ASPX: Template/Layout Imports System.Data Public Class MyStart End Class ASPX.vb: Code Database Pa ge re qu est Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 2 3 Công cụ Web Tổng quan  Cách hoạt động của các trang web  Cách hoạt động của các trình duyệt web  Cách hoạt động của các ngôn ngữ Markup  Cách hoạt động của HyperText  Cách hoạt động của URL  Cách hoạt động của các imagemap (bản đồ ảnh) và các Form tương tác  Cách hoạt động của Web Host Server  Cách hoạt động của Website với các cơ sở dữ liệu 4 Công cụ Web Cách hoạt động của các trang web  World Wide Web (WWW) là phần phát triển và cải tiến nhất của Internet.  WWW cho phép chúng ta thể hiện các văn bản dưới dạng đa phương tiện gồm có các văn bản (text), hình ảnh đồ họa (image), âm thanh (audio), phim ảnh (video) và các liên kết đến các trang web hay tài nguyên web khác.  Ngôn ngữ dùng để tạo web được gọi là HyperText Markup Language (HTML) Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 3 5 Công cụ Web Cách hoạt động của các trang web HTML Codes Program / Scripts Client Web Server Request Response 6 Công cụ Web Cách hoạt động của các trang web (tiếp theo)  WWW hoạt động dựa trên mô hình client/server trong đó:  phần mềm client là các trình duyệt web (Internet Explorer, Nestcape Communicator, Firefox, Opera) chạy trên các máy đơn.  phần mềm server (IIS, Apache) chạy trên máy chủ web.  Để sử dụng web trước tiên máy bạn phải có kết nối Internet và sau đó khởi động trình duyệt web (web browser) Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 4 7 Công cụ Web i. Để mở một trang web, user phải gõ nhập địa chỉ URL tương ứng của trang web hay tài nguyên web vào ô địa chỉ của trình duyệt. ii. Trình duyệt web gửi yêu cầu URL bằng cách sử dụng giao thức HTTP, giao thức này ấn định cách mà trình duyệt web và web server giao tiếp với nhau. iii. Địa chỉ URL sẽ cho biết chính xác trang web hay tài nguyên web nào được yêu cầu protocol://host.domain:port/path/filename Cách hoạt động của các trang web (tiếp theo) 8 Công cụ Web Cách hoạt động của các trang web (tiếp theo) iv. Yêu cầu được gửi đến Internet. Các Internet Router kiểm tra yêu cầu để xác định web server nào phù hợp dựa trên địa chỉ URL (host.domain:port/path/filename) và gửi đi. v. Web server nhận yêu cầu bằng cách sử dụng giao thức HTTP để biết được trang web hay tài nguyên web nào được yêu cầu vi. Khi web server tìm thấy trang web hay tài nguyên web được yêu cầu nó gửi trang web hay tài nguyên web đó trở về trình duyệt web trên máy con để hiển thị cho user thấy. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 5 9 Công cụ Web Trình duyệt web (Web browser) 10 Công cụ Web Cách hoạt động của trình duyệt web  Các trình duyệt web là các phần mềm client (Internet Explorer, Nestcape Communicator, Firefox, Opera) chạy trên các máy đơn.  Trình duyệt web hiển thị thông tin bằng cách thông dịch ngôn ngữ HTML. Việc tạo mã bằng ngôn ngữ HTML cho trình duyệt web biết cách hiển thị các văn bản dưới dạng đa phương tiện gồm có các văn bản (text), hình ảnh đồ họa (image), âm thanh (audio), phim ảnh (video) và các liên kết đến các trang web hay tài nguyên web khác. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 6 11 Công cụ Web Các thông báo lỗi thông thường của trình duyệt web i. Server Does Not Have a DNS Entry ii. 503 Service Unavailable iii. 4039 Access Forbidden, Too Many User Are Connected iv. 404 Not Found v. 401 Unauthorized vi. 403 Forbidden 12 Công cụ Web Các ngôn ngữ Markup Descriptive MarkupProcedural Markup Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 7 13 Công cụ Web Cách hoạt động của các ngôn ngữ Markup  Ngôn ngữ Markup là tập hợp các thẻ lệnh (tag) để thể hiện các các văn bản.  HTML là ngôn ngữ markup của web. HTML dùng để định dạng các loại văn bản trên web và các liên kết đến các trang web hay tài nguyên web khác.  Chúng ta có thể sử dụng bất kỳ chương trình soạn thảo văn bản nào để tạo trang web bằng ngôn ngữ HTML.  Web được phát triển từng ngày và HTML cũng mở rộng và thay đổi thành Dynamic HTML (DHTML). 14 Công cụ Web Cách hoạt động của HyperText Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 8 15 Công cụ Web Cách hoạt động của HyperText  HyperText gồm có một siêu liên kết (Hyperlink) xuất hiện trên màn hình dưới dạng một dòng văn bản được bật sáng, một biểu tượng hay một hình ảnh.  Khi kích vào các hyperlink, trang web sẽ chuyển đến trang web hay tài nguyên web tương ứng được khai báo trong liên kết. 16 Công cụ Web Cách hoạt động của URL i. Trình duyệt web trên máy con gửi địa chỉ URL của tài nguyên web đến máy chủ thông qua kết nối bằng giao thức TCP/IP ii. Sau khi nhận địa chỉ URL, máy chủ sẽ thực hiện việc tìm kiếm tài nguyên web tương ứng. Nếu tìm thấy, máy chủ sẽ kiểm tra kiểu file của tài nguyên đó và gửi thông tin này đến máy con. Ngược lại, máy chủ sẽ thông báo không tìm thấy iii. Trình duyệt web trên máy con sẽ đọc kiểu file và hiển thị thông tin nếu kiểu file đó trình duyệt đọc được. Ngược lại trình duyệt sẽ hiển thị hộp thoại cho phép lưu file để có thể mở bằng phần mềm thích hợp Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 9 17 Công cụ Web Cách hoạt động của các imagemap và các Form  Imagemap là các hình ảnh đồ họa trên trang web. Các Imagemap có thể chứa các hyperlink để liên kết đến các tài nguyên web khác bằng địa chỉ URL  Các chức năng trên web thường được gọi là các Form tương tác. Các Form tương tác là nơi để bạn cung cấp thông tin cho trang web như: họ tên, địa chỉ, email 18 Công cụ Web Cách hoạt động của các imagemap Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 10 19 Công cụ Web Cách hoạt động của các imagemap i. Khi user nhấn chuột kích hoạt vào vùng liên kết được chỉ định trên Imagemap, trình duyệt sẽ gửi tọa độ (x,y) tại vị trí đó đến mày chủ ii. Máy chủ sẽ dò tìm và gửi tài nguyên web tương ứng về cho máy con iii. Trình duyệt trên máy con sẽ hiển thị tài nguyên web được trả về cho user thấy 20 Công cụ Web Form tương tác Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 11 21 Công cụ Web Cách hoạt động của các Form tương tác  Khi làm việc với một form tương tác, sau khi nhập đầy đủ các thông tin cần thiết user nhấn vào một nút đặc biệt (submit) để gửi thông tin đến máy chủ.  Tại máy chủ các thông tin trên sẽ được xử lý và gửi đến chương trình khác chẳng hạn như một cơ sở dữ liệu hoặc một trang web khác tùy theo yêu cầu nghiệp vụ 22 Công cụ Web Cách hoạt động của Web Host Server  Trình duyệt web trên máy con gửi yêu cầu về dữ liệu đến Web server  Nếu yêu cầu là một tài nguyên web, web server sẽ tìm file tương ứng, đính kèm theo một header và gởi nó đến trình duyệt  Nếu yêu cầu là một thông tin lưu trữ tại một cơ sở dữ liệu cụ thể, web server sẽ chuyển yêu cầu đến một chương trình thích hợp xử lý, trả kết quả về cho web server, web server sẽ đính kèm theo một header vào kết quả và gởi nó đến trình duyệt Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 12 23 Công cụ Web Cách hoạt động của Website với các cơ sở dữ liệu Database Client Web Server Request Reply Web Page Server Component Web Page 24 Công cụ Web Cách hoạt động của Website với các cơ sở dữ liệu  Trình duyệt web trên máy con gửi yêu cầu về dữ liệu đến Web server trong một chuỗi vấn tin (query) gửi kèm theo địa chỉ URL  Web server nhận yêu cầu. Sau đó chuyển yêu cầu đến một chương trình thích hợp kết nối đến cơ sở dữ liệu tương ứng  Cơ sở dữ liệu tìm kiếm các bản ghi (record) phù hợp với query rồi trả kết quả về cho web server dưới dạng một trang web mới  Trang web này sẽ được web server gửi về cho trình duyệt để hiển thị kết quả cho user Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 13 25 Công Cụ Web Ngôn ngữ HTML 26 Công cụ Web Nội dung chính 1. Giới thiệu về WWW 2. Giới thiệu ngôn ngữ HTML 3. Cấu trúc của một tài liệu HTML đơn giản 4. Các phần tử (element) HTML cơ bản 5. Siêu liên kết (Hyperlink) 6. Hình ảnh (Image) 7. Làm việc với các ứng dụng Multimedia trên nền HTML 8. Cách trình bày website Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 14 27 Công cụ Web 1. Giới thiệu về WWW (World Wide Web)  Internet là mạng máy tính lớn nhất trên thế giới hay còn gọi là mạng của các mạng máy tính (network of networks).  World Wide Web (WWW) là một tập con của Internet. WWW bao gồm các web server (máy chủ web) trên thế giới.  Web server chứa thông tin để người sử dụng ở bất kỳ nơi nào trên thế giới truy cập qua mạng Internet. 28 Công cụ Web 1. Giới thiệu về WWW (tiếp theo)  WWW được bắt đầu từ một dự án nghiên cứu của chính phủ Thụy Sĩ, Tim Berners- Lee là người đầu tiên thiết lập ra các tiêu chuẩn cho WWW  WWW được dựa trên trên 03 thành phần:  Protocols: HTTP (HyperText Transfer Protocol)  Addresses: URLs (Uniform Resource Locators):  HTML (HyperText Markup Language) Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 15 29 Công cụ Web 2. Giới thiệu ngôn ngữ HTML  Ngôn ngữ HTML chỉ ra cách một trang web được hiển thị trên trình duyệt web (browser). Tài liệu HTML tạo thành mã nguồn trang web.  Sử dụng các thẻ (tag) và các phần tử (element) của HTML để:  Điều khiển hình thức và nội dung của trang web  Công bố và truy xuất thông tin trực tuyến bằng các liên kết  Thu thập thông tin trực tuyến bằng các biểu mẫu  Đưa vào trang web các audio clip, video clip, Activex, Java Applet 30 Công cụ Web 3. Cấu trúc đơn giản của HTML Tiêu đề Nội dung Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 16 31 Công cụ Web Các phần tử (element) HTML cơ bản  Block-level  Headers (h1 đến h6)  Paragraph (p)  List Items (li)  Horizontal Rules (hr)  Text-level  em, I , b, font  a  Applet  Img  Breaks  Font  Alignment  Formating 32 Công cụ Web 4. Thẻ lệnh HTML (HTML Tags)  Mỗi thẻ HTML (HTML tag) được xác định bởi tên thẻ (tag name), đôi khi được theo sau bởi một danh sách tùy chọn của các thuộc tính, tất cả được đặt nằm giữa ký hiệu . Các thành phần bên trong ký hiệu này sẽ không hiển thị trên trình duyệt.  Tên thẻ thông thường là tên viết tắt chức năng của thẻ để dễ hiểu.  Thuộc tính là các đặc tính dùng để mở rộng chức năng của thẻ. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 17 33 Công cụ Web HTML Tags (tiếp theo)  HTML tags được sử dụng để đánh dấu phần tử HTML (HTML elements)  HTML tags được bao bởi 2 ký hiệu  HTML tags thường đi theo cặp như:  và  Tag đầu tiên của cặp là thẻ bắt đầu, tag thứ hai là thẻ kết thúc  Phần văn bản nằm giữa thẻ bắt đầu và thẻ kết thúc là nội dung của phần tử đó.  HTML tags không phân biệt chữ hoa hay chữ thường, giống như 34 Công cụ Web Thuộc tính của thẻ (Tag Attributes)  Thẻ có thể có thuộc tính.    Thuộc tính thường thể hiện dưới dạng:  name="value".  Thuộc tính luôn được thêm vào phần thẻ bắt đầu của phần tử HTML.  Các giá trị của thuộc tính phải được để trong dấu “”, đôi khi là ‘’.  name='John "ShotGun" Nelson' Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 18 35 Công cụ Web Thẻ  Thẻ được khai báo bên trong phần tiêu đề. Phần tử này cung cấp thông tin về trang web của bạn bao gồm: tên tác giả, tên phần mềm dùng để thiết kế, thông tin liên lạc Ví dụ:  Thuộc tính http-equipv có thể được dùng để thay thế thuộc tính name.  Máy chủ HTTP sử dụng thuộc tính này để tạo ra một đầu đáp ứng HTTP (HTTP response header) 36 Công cụ Web Thẻ (tiếp theo)  Đầu đáp ứng được truyền tới trình duyệt để nhận dạng dữ liệu. Nếu tài liệu đã được lưu lại, HTTP sẽ biết khi nào truy xuất một bản sao của tài liệu tương ứng Ví dụ: <META http-equipv =“Expires” content=“Mon, 11 Sep 2006 19:15:30 GMT”> Sẽ sinh ra một đầu đáp ứng HTTP như sau: Expires: Mon, 11 Sep 2006 19:15:30 GMT Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 19 37 Công cụ Web Ký tự đặc biệt trong tài liệu HTML $ampKý tự “&” "Trích dẫn (“”) <Nhỏ hơn (<) >Lớn hơn (>) Mã HTMLKý tự đặc biệt 38 Công cụ Web Thẻ và  Thẻ dùng để trình bày một đoạn văn bản trong tài liệu HTML. Thẻ được sử dụng để đánh dấu sự bắt đầu của một đoạn mới.  Thẻ được sử dụng để ngắt dòng tài liệu HTML. Thẻ bổ sung một ký tự xuống dòng tại vị trí của thẻ. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 20 39 Công cụ Web Canh lề trong HTML  Thuộc tính align được sử dụng để canh lề cho các phần tử HTML trong trang web. Chúng ta có thể canh lề văn bản, các đối tượng, hình ảnh, các đoạn  Thuộc tính align có các giá trị sau: Canh đềujustify Canh phảiright Canh giữacenter Canh tráileft Mô tảGiá trị 40 Công cụ Web 5. Siêu liên kết (Hyperlink)  Siêu liên kết là một phần tử bên trong tài liệu liên kết đến một vị trí khác trong cùng tài liệu đó hoặc đến một tài liệu hoàn toàn khác.  Khi kích vào siêu liên kết, người dùng được đưa đến địa chỉ URL mà chúng ta ghi rõ trong liên kết  Các liên kết có thể là liên kết trong hoặc liên kết ngoài  Liên kết trong là liên kết kết nối đến các phần trong cùng tài liệu hoặc cùng một website  Liên kết ngoài là liên kết kết nối đến các trang trên các website khác hoặc máy chủ khác Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 21 41 Công cụ Web Sử dụng siêu liên kết  Để tạo siêu liên kết, chúng ta cần phải xác định hai thành phần:  Địa chỉ đầy đủ hoặc URL của file được kết nối đến  Thành phần cung cấp cho liên kết. Thành phần này có thể là một dòng văn bản, một hình ảnh  Khi người dùng kích vào thành phần được liên kết, trình duyệt đọc địa chỉ được chỉ ra trong URL và chuyển đến địa chỉ mới. 42 Công cụ Web Thẻ ... Định nghĩa một anchor trong văn bản. Anchor được dùng để liên kết với các trang khác. Nó có thể được dùng để gán nhãn cho 1 phần trong văn bản (còn được gọi là named anchor). Attributes href=url xác định địa chỉ URL của nơi cần liên kết. name=text định danh cho một phần văn bản trên trang web. (Dùng trong liên kết nội trong trangweb) Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 22 43 Công cụ Web Thẻ (tiếp theo) charset=charset xác định bộ character encoding cho phần văn bản được liên kết title=text Đưa ra tiêu đề cho phần văn bản được liên kết. target=text xác định tên của window hoặc frame hiển thị phần văn bản được liên kết. 44 Công cụ Web Thẻ (tiếp theo) Tạo một anchor ... Liên kết đến một file nằm cùng thư mục: ... Liên kết đến một file bên ngoài: ... Liên kết đến một named anchor: ... Liên kết đến một named anchor trong cùng file: ... Gửi một email: ... Tải về một file trên một FTP server: ... Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 23 45 Công cụ Web Thiết lập màu sắc cho liên kết Links Xác lập màu cho liên kết. Màu mặc định là blue. Visited Visited links Xác lập màu cho đã được chọn. Màu mặc định là purple. Active links Xác lập màu cho liên kết hoạt động. Màu mặc định là blue. 46 Công cụ Web 7. Hình ảnh .. Dùng để chèn hình ảnh vào trang web Attributes align=top|middle|bottom|left|right canh lề cho hình ảnh và văn bản xung quanh. alt=text Chuỗi văn bản hiển thị để thay thế khi hình ảnh không hiển thị. border=number Chỉ ra độ dày (theo pixel) của đường viền. Giá trị mặc định là 0. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 24 47 Công cụ Web Hình ảnh (tiếp theo) height=number xác định chiều cao của hình (theo pixel) hoặc theo tỉ lệ phần trăm width=number Xác định chiều rộng của hình (theo pixel) hoặc theo tỉ lệ phần trăm src=url Xác định địa chỉ URL của tập tin hình ành. <IMG SRC="star.gif" WIDTH=50 HEIGHT=50> Picture 48 Công cụ Web Các định dạng hình ảnh  GIF Format (8 bits)  JPG Format (24 bits)  PNG Format (48 bits)  Animated GIF Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 25 49 Công cụ Web Số lượng màu theo Bit-Depth Bit-Depth = Color-Depth  Số lượng màu = 2^(Bit-depth)  Bit-depth là số bit màu. Hay còn được gọi là độ phân giải màu “Color resolution”. 2^24 = 16.7 million 16,777,215 colors24-bits 2^16 = 6553665,536 colors16-bits 2^8 = 256256 colors8-bits 2^4 = 1616 colors4-bit 2^3 = 88 colors3-bit 2^2 = 44 colors2-bit 2^1 = 22 colors1-bit CalcuationColor resolutionBit depth 50 Công cụ Web Bitmaps, Pixels & Colors  Các điểm màu tạo thành một hình bitmap được gọi là "pixels".  Web pages được tính theo đơn vị Pixels.  Màu sắc (Color) thể hiện trên máy tính là tập hợp từ ba màu chính: red, green, blue (RGB).  Các màu khác để thể hiện dựa vào ba màu kể trên Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 26 51 Công cụ Web So sánh chất lượng ảnh 8-bit và 24-bit 52 Công cụ Web Which Color Palette? Blue (0,0,255)Black (0,0,0) Red (255,0,0) White (FF,FF,FF) (255,255,255) Green (0,255,0) Why 00,33,66, 99,CC,FF? Which one is (99,FF,CC), (153,255,204)? Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 27 53 Công cụ Web 6x6x6 Color Palette 54 Công cụ Web True Color (RGB) “Palette” Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 28 55 Công cụ Web Standard Web Palette 56 Công cụ Web Xác định giá trị của RGB  Hệ cơ số 10 (Decimal)  Tầm giá trị từ 0 đến 255.  51-51-255 có nghĩa là: giá trị của màu red là 51, giá trị của màu green là 51, giá trị của màu blue là 255.  Hệ cơ số 16 (Hexadecimal)  Dựa trên hệ cơ số 16: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F  Giá trị của RGB được mô tả bằng 6 chữ số 51-51-255 là 3333FF. Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 29 57 Công cụ Web Các định dạng hình ảnh GIF Format  GIF – Graphics Interchange Format  GIF format là một trong những định dạng tập tin hình ảnh phổ biến trên Internet vì dung lượng nhỏ và thể hiện một số tính chất đặc biệt. Có hai dạng GIF đặc biệt là:  animated GIF.  transparent GIF. 58 Công cụ Web Transparency GIF Not a transparent GIF a transparent GIF Generated by Foxit PDF Creator © Foxit Software For evaluation only. Công cụ web 30 59 Công cụ Web Animated GIF 60 Công cụ Web  ?  ?  ? Câu hỏi Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 Công Cụ Web Ngôn ngữ HTML 2 Công cụ Web Nội dung chính 1. Các thẻ HTML cơ bản 2. Danh sách (List) 3. Sử dụng Font 4. Sử dụng màu sắc 5. Sử dụng Table 6. Sử dụng Frame Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 Công cụ Web Các thẻ HTML cơ bản  Thẻ tiêu đề (Heading):  từ đến  Thẻ đoạn:     Thẻ khối: ,  Thẻ định dạng ký tự 4 Công cụ Web Thẻ tiêu đề (Heading)  Thẻ tiêu đề (Heading) là phần tử được dùng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang web.  Có 6 mức tiêu đề H1 đến H6. Tất cả những phần tử tiêu đề phải có thẻ kết thúc.  Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần tử còn lại của văn bản. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 35 Công cụ Web Thẻ đoạn:  Phần tử ADDRESS được dùng để hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML.  Phần tử ADDRESS thường được sử dụng ở cuối trang và có thể chứa một hoặc một số phần sau:  Liên kết đến trang chủ  Đặc tính chuỗi tìm kiếm  Thông tin bản quyền Ví dụ 6 Công cụ Web Thẻ đoạn:  Phần tử BLOCKQUOTE dùng để chỉ định một trích dẫn văn bản bên trong một tài liệu.  Văn bản được mô tả bên trong phần tử BLOCKQUOTE được hiển thị như một đoạn văn bản thụt vào đầu dòng. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 47 Công cụ Web Thẻ đoạn:  Phần tử PRE dùng để định dạng văn bản  Phần tử PRE được sử dụng để hiển thị văn bản trên trình duyệt với tất cả các định dạng đã được xác định từ trước bởi mã nguồn HTML. Ví dụ 8 Công cụ Web Thẻ khối: ,  Phần tử DIV và SPAN được sử dụng để chia và nhóm nội dung lại với nhau.  Phần tử DIV dùng để chia tài liệu thành các thành phần có liên quan với nhau.  Phần tử SPAN dùng để chỉ một khoảng các ký tự.  Phần tử SPAN dùng để định nghĩa nội dung trong dòng (in-line) còn phần tử DIV dùng để định nghĩa nội dung mức khối (block-level) Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 59 Công cụ Web Thẻ định dạng ký tự mức vật lý  Thẻ định dạng ký tự mức vật lý là những thẻ định rõ hoặc thay đổi đặc điểm của văn bản mà ta áp dụng thẻ Chỉ số dưới Chỉ số trên Cố định độ rộng văn bản In đậm Mô tảTên thẻ 10 Công cụ Web Thẻ định dạng ký tự mức logic  Thẻ định dạng ký tự mức logic hiển thị định dạng của tài liệu HTML tùy theo trình duyệt. Sử dụng cho các trích dẫn và tham chiếu Sử dụng cho các biến trong chương trình Sử dụng trong phần trích của mã chương trình Nhấn mạnh văn bản Mô tảTên thẻ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 611 Công cụ Web Danh sách  Danh sách dùng để nhóm các thông tin có liên quan với nhau trên tài liệu HTML Hoa hồng Táo Cam Hoa hướng dương Xoài Hoa lan Hoa Hoa hồng Hoa hướng dương Hoa lan Quả Táo Cam Xoài 12 Công cụ Web Danh sách không có thứ tự  Danh sách không có thứ tự (unorder list) là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn “bullet”.  Để khai báo một danh sách không có thứ tự ta dùng cặp thẻ . Mỗi mục con trong danh sách được bắt đầu bằng thẻ (list item) không bắt buộc phải có thẻ kết thúc . Danh sách có thể lồng nhau. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 713 Công cụ Web Danh sách có thứ tự  Để khai báo một danh sách có thứ tự ta dùng cặp thẻ . Mỗi mục con trong danh sách được bắt đầu bằng thẻ (list item) không bắt buộc phải có thẻ kết thúc . Danh sách có thể lồng nhau. Ví dụ <OL START = n> Bắt đầu từ số n > 1 <LI TYPE = a> Lowercase <LI TYPE = A> Uppercase <LI TYPE = i> Lower Roman <LI TYPE = I> Upper Roman ThẻThuộc tính 14 Công cụ Web Danh sách định nghĩa  Danh sách định nghĩa (defined list) được dùng để tạo ra một danh sách các điều khoản và định nghĩa của chúng.  Để khai báo một danh sách định nghĩa ta dùng cặp thẻ . Thẻ được dùng để chỉ ra điều khoản còn thẻ được dùng để chỉ ra định nghĩa cho điều khoản đó. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 815 Công cụ Web Thẻ kẻ đường ngang  Thẻ (horizontal rule) được dùng để kẻ một đường ngang trên trang. Nó chỉ có thẻ bắt đầu, không có thẻ kết thúc và không có nội dung. hiển thị là màu đặc không có bóngnoshade tính bằng pixelsize (độ dày) tính bằng pixel hay %, mặc định 100%. width (độ dài) canh giữa (center)| phải (right)| trái (left) align (canh lề) Mô tảThuộc tính 16 Công cụ Web Sử dụng font  Thẻ dùng để xác định kiểu chữ, kích thước, màu sắc  Nếu sử dụng FONT là một thuộc tính trong thẻ thì sẽ có tác dụng trên toàn trang văn bản HTML. Ngoài ra có thể sử dụng thẻ riêng cho từng phần. kiểu fontface kích thước của fontsize màu của font, dùng tên màu hoặc số hexcolor Mô tảThuộc tính Generated by Foxit PDF Creator © Foxit Software For evaluation only. 917 Công cụ Web Sử dụng màu sắc  Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang bằng cách thêm thuộc tính color vào thẻ ,  Có 3 kiểu màu chính là đỏ (Red), xanh (Green) và xanh da trời (Blue). Mỗi màu chính được xem như một bộ hai số của hệ thập lục phân (16 = số hex): #RRGGBB.  Số thập lục phân 00 chỉ 0% của màu trong khi đó FF chỉ 100% của màu. 18 Công cụ Web Bảng biểu (Table) ... Định nghĩa bắt đầu và kết thúc của bảng. Phải có kết thúc thẻ. Attribute align=left|right|center Canh lề văn bản bên trong table background=url Chỉ ra hình nền của table. bgcolor=“#rrggbb” hoặc tên màu Chỉ ra màu nền của table. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 10 19 Công cụ Web Bảng biểu (tiếp theo) border=number Chỉ ra độ dày (theo pixel) của đường viền. Giá trị mặc định là 1. border=0: không hiển thị đường viền. cellpadding=number Xác lập khoảng cách (theo pixel) giữa đường viền và nội dung trong ô. Giá trị mặc định là 1. cellspacing=number Xác lập khoảng cách (theo pixel) giữa hai ô. Giá trị mặc định là 2. height=number, percentage Xác định chiều cao của toàn bộ table. hspace=number khoảng cách canh lề từ trái sang phải (theo pixel) của table. 20 Công cụ Web Bảng biểu (tiếp theo) frame=void|above|below|hsides|lhs|rhs|vsides| box|border Cho trình duyệt biết vị trí vẽ đường viền  void: khung sẽ không hiển thị (mặc định)  above: chỉ vẽ khung ở bên trên  below: chỉ vẽ khung ở bên dưới  hsides: chỉ vẽ khung ở bên trên và bên dưới  vsides : chỉ vẽ khung ở bên trái và bên phải  lhs: chỉ vẽ khung ở bên trái  rhs: chỉ vẽ khung ở bên phải  box: vẽ khung toàn bộ  border: vẽ khung toàn bộ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 21 Công cụ Web Bảng biểu (tiếp theo) Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 22 Công cụ Web Sử dụng Table  Cặp thẻ được dùng để tạo bảng trong tài liệu HTML.  Đơn vị cơ bản của bảng là một ô và được định nghĩa bằng cặp thẻ . Các ô tạo thành một hàng. Một hàng của bảng được định nghĩa bằng cặp thẻ . Các hàng tạo thành bảng. Mỗi cột trong bảng có thể có ô tiêu đề được định nghĩa bằng cặp thẻ .  Cặp thẻ dùng để thêm chú thích cho bảng Generated by Foxit PDF Creator © Foxit Software For evaluation only. 12 23 Công cụ Web Định dạng Table  Thuộc tính COLSPAN và ROWSPAN được sử dụng để tạo ra những ô mà chúng có thể kéo rộng ra cho hơn một dòng hay cột.  Thuộc tính COLSPAN được sử dụng trong thẻ .  Thuộc tính ROWSPAN được được sử dụng trong thẻ .  Để canh lề cho các ô trong bảng ta sử dụng thuộc tính canh lề ngang (ALIGN) và canh lề dọc (VALIGN). Ví dụ 24 Công cụ Web Frame Định nghĩa một frame đơn bên trong một tập các frame (frameset). Attributes bordercolor=”#rrggbb” hoặc tên màu Xác lập màu cho đường viền của frame. frameborder=1|0 Bật/Tắt đường viền của frame.  frameborder=1: có hiển thị đường viền.  frameborder=0: không hiển thị đường viền. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 13 25 Công cụ Web Frame (tiếp theo) longdesc=url Xác định một liên kết đến văn bản chứa một mô tả dài về frame và nội dung. marginwidth=number Xác định khoảng cách (theo pixel) giữa cạnh bên trái và cạnh bên phải của frame và nội dung bên trong. Giá trị tối thiểu là 1 pixel. marginheight=number Xác định khoảng cách (theo pixel) giữa cạnh bên trên và cạnh bên dưới của frame và nội dung bên trong. Giá trị tối thiểu là 1 pixel. 26 Công cụ Web Frame (tiếp theo) name=text Đặt tên cho frame. Tên này được tham chiếu bởi thuộc tính target bên trong liên kết muốn tải nội dung một văn bản vào frame này. noresize Ngăn chặn không cho người dùng thay đổi kích thước frame. scrolling=yes|no|auto Xác định có hiển thị các thanh trượt scrollbars trên frame hay không. src=url Xác định file HTML ban đầu hiển thị trên frame. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 14 27 Công cụ Web Frame (tiếp theo) ... Định nghĩa một tập các frame hoặc tập frame con. Attributes border=number Xác định độ dày đường viền (theo pixel) giữa tất cả các frame bên trong một frameset. bordercolor=#rrggbb” or color name Xác lập màu cho tất cả đường viền bên trong frameset. frameborder=1|0 Xác định đường viền giữa các frame bên trong frameset. 28 Công cụ Web Frame (tiếp theo) cols=list (number, percentage, or *) Đưa ra số lượng và kích thước của các cột (column) trong một frameset. rows=list (number, percentage, or *) Đưa ra số lượng và kích thước của các hàng (row) trong một frameset. framespacing=number Khoảng cách thêm vào (theo pixel) giữa các frame nằm liền kề nhau. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 15 29 Công cụ Web Frame (tiếp theo) ... Định nghĩa một frame động bên trong một văn bản với việc sắp đặt giống thẻ . Attributes align=top|middle|bottom|left|right canh lề cho hình ảnh và văn bản xung quanh. frameborder=1|0 Bật/Tắt đường viền của frame.  frameborder=1: có hiển thị đường viền.  frameborder=0: không hiển thị đường viền. 30 Công cụ Web Frame (tiếp theo) marginheight=number Xác định khoảng cách (theo pixel) giữa cạnh bên trên và cạnh bên dưới của frame và nội dung bên trong. Giá trị tối thiểu là1 pixel. marginwidth=number Xác định khoảng cách (theo pixel) giữa cạnh bên trái và cạnh bên phải của frame và nội dung bên trong. Giá trị tối thiểu là1 pixel. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 16 31 Công cụ Web Frame (tiếp theo) name=text Đặt tên cho frame. Tên này được tham chiếu bởi thuộc tính target bên trong liên kết muốn tải nội dung một văn bản vào frame này. noresize Ngăn chặn không cho người dùng thay đổi kích thước frame. scrolling=yes|no|auto Xác định có hiển thị các thanh trượt scrollbars trên frame hay không. src=url Xác định file HTML ban đầu hiển thị trên frame. 32 Công cụ Web Frame (tiếp theo) height=number Xác định chiều cao của frame (theo pixel) hoặc theo tỉ lệ phần trăm của kích thước cửa sổ màn hình. width=number Xác định chiều rộng của frame (theo pixel) hoặc theo tỉ lệ phần trăm của kích thước cửa sổ màn hình. ... Đưa ra nội dung cần hiển thị khi trình duyệt không hiển thị được frame. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 17 33 Công cụ Web Frame (tiếp theo) 34 Công cụ Web Frame (tiếp theo) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 18 35 Công Cụ Web FORM & CONTROLS 36 Công cụ Web Nội dung chính  Giới thiệu và sử dụng biểu mẫu (FORM)  Giới thiệu và sử dụng các phần tử điều khiển (CONTROLS)  Phần tử Input (nhập)  Phần tử Button (nút nhấn)  Phần tử Select (lựa chọn)  Phần tử Label (nhãn) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 19 37 Công cụ Web Giới thiệu FORM  FORM là một phần của tài liệu HTML chứa các phần tử đặc biệt gọi là các phần tử điều khiển (CONTROLS).  Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương tác.  Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các kịch bản từ phía máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý thêm. 38 Công cụ Web Sử dụng FORM Việc sử dụng FORM trên WWW là rất nhiều và đa dạng như:  Thu thập tên, địa chỉ, số điện thoại, địa chỉ email và các thông tin khác do người dùng đăng ký sử dụng một dịch vụ nào đó.  Thu thập thông tin dùng để đăng ký mua bán hàng hoá.  Thu thập thông tin phản hồi về một website.  Cung cấp công cụ tìm kiếm cho website Generated by Foxit PDF Creator © Foxit Software For evaluation only. 20 39 Công cụ Web Phần tử FORM Thẻ được dùng để khai báo một FORM trên trang web. Xác định phương thức dữ liệu được gửi đến máy chủ. METHOD = (GET|POST) Xác định vị trí của script sẽ xử lý biểu mẫu hoàn chỉnh và đã được gửi đi. ACTION = “URL” Xác định danh sách các kiểu MINE được máy chủ nhận ra. ACCEPT Mô tảThuộc tính 40 Công cụ Web Phương thức GET|POST Xác định giao thức sử dụng khi máy khách gửi dữ liệu lên cho máy chủ:  Nếu giá trị là GET thì trình duyệt sẽ tạo ra một câu hỏi có chứa địa chỉ URL của trang, một dấu chấm hỏi và giá trị do Form tạo ra. Trình duyệt sẽ trả lại câu hỏi cho script được xác định trong URL để xử lý.  Nếu giá trị là POST, thì dữ liệu trên biểu mẫu được gửi đến script xử lý như một khối dữ liệu. Người ta không sử dụng chuỗi câu hỏi. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 21 41 Công cụ Web Ví dụ về FORM 42 Công cụ Web Các phần tử nhập của HTML  Khi tạo FORM, chúng ta có thể sử dụng các phần tử điều khiển bên trong FORM để nhận nhận dữ liệu nhập từ người dùng.  Tuy nhiên, chúng ta cũng có thể sử dụng chúng bên ngoài FORM để tạo các giao diện người dùng. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 22 43 Công cụ Web Phần tử INPUT Thẻ xác định loại và sự xuất hiện của điều khiển. Đây là thẻ không có thẻ đóng. Xác định vị trí ảnh khi sử dụng ảnh trong INPUT SRC=“URL” thuộc tính logic sử dụng cho RADIO|CHECKBOX để xác định có chọn hay không CHECKED số ký tự nhiều nhất có thể nhập vào TEXT|PASSWORD. Mặc định là không giới hạn. MAXLENGTH độ rộng ban đầu (tính bằng số ký tự hoặc pixel)SIZE giá trị khởi tạo tùy chọn trừ RADIO phải xác định.VALUE tên của điều khiển, phạm vi nằm trong FORM.NAME xác định phần tử: Mặc định là TEXT. Có các loại: TEXT|PASSWORD|CHECKBOX|RADIO|FILE|HIDDEN|BUTTON| SUBMIT|RESET. TYPE Mô tảThuộc tính 44 Công cụ Web Phần tử Loại này tạo một điều khiển nhập văn bản chỉ có 1 dòng.  Thuộc tính SIZE xác định số ký tự có thể hiển thị trong phần tử  Thuộc tính MAXLENGTH xác định số ký tự tối đa có thể nhập vào phần tử này  Giá trị VALUE hiển thị nội dung ban đầu của văn bản Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 45 Công cụ Web Phần tử Loại này tạo một điều khiển nhập Password.  Thuộc tính SIZE xác định số ký tự có thể hiển thị trong phần tử  Thuộc tính MAXLENGTH xác định số ký tự tối đa có thể nhập vào phần tử này  Giá trị VALUE hiển thị nội dung ban đầu của văn bản 46 Công cụ Web Phần tử Loại này tạo một điều khiển ẩn có chứa một VALUE để phục vụ cho các mục đích khác trên trang web mà không muốn hiển thị ra. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 24 47 Công cụ Web Phần tử  Loại này tạo một điều khiển cho phép người dùng có thể chọn một hay nhiều giá trị CHECKBOX.  Khi một phần tử CHECKBOX được chọn, thì cặp NAME|VALUE được nhận cùng với FORM 48 Công cụ Web Phần tử  Phần tử RADIO được sử dụng đối với nhóm các tập giá trị loại trừ lẫn nhau.  Các phần tử RADIO trong cùng một nhóm phải có cùng tên.  Tại một thời điểm chỉ có thể chọn 1 Phần tử RADIO trong 1 nhóm.  Chỉ có phần tử RADIO nào được chọn mới tạo nên cặp NAME|VALUE trong dữ liệu được nhận. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 25 49 Công cụ Web Phần tử |  Khi phần tử SUBMIT của phần tử FORM được nhấn, FORM được chuyển đến vị trí được xác định trong thuộc tính ACTION, cặp NAME|VALUE của SUBMIT được nhận cùng với biểu mẫu.  Khi phần tử RESET của phần tử FORM được nhấn, các giá trị của tất cả các phần tử trên FORM được tái thiết lập trở về giá trị ban đầu, được xác định trong các giá trị thuộc tính của chúng. 50 Công cụ Web Phần tử  Phần tử được dùng để tạo một nút nhấn trên trang web. Ví dụ: This does something really exciting. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 26 51 Công cụ Web Phần tử  Phần tử được dùng để tạo một nút SUBMIT dạng hình ảnh trên trang web.  Giá trị thuộc tính SRC là địa chỉ URL của hình ảnh đó.  Khi được nhấn, toạ độ của vị trí nhấn chuột được chuyển đến máy chủ với định dạng:  name.x = valueofx  name.y = valueofy Trong đó: name là tên của nút ảnh Ví dụ: 52 Công cụ Web Phần tử Thẻ Dùng để mở một hộp thoại giúp người dùng mở một file trên hệ thống thư mục của máy tính Generated by Foxit PDF Creator © Foxit Software For evaluation only. 27 53 Công cụ Web Phần tử TEXTAREA  Thẻ tạo một điều khiển nhập văn bản trên nhiều dòng.  Thuộc tính COLS quy định độ rộng  Thuộc tính ROWS quy định số hàng 54 Công cụ Web Phần tử SELECT Phần tử SELECT được sử dụng để hiển thị một hộp danh sách các lựa chọn cho người dùng.  Mỗi lựa chọn được hiển thị bởi phần tử OPTION. Mỗi phần tử SELECT phải chứa ít nhất một phần tử OPTION.  Thành phần được chọn lựa sẽ hiển thị với màu khác so với các thành phần còn lại.  Mỗi lựa chọn trong hộp chọn được lấy giá trị thông qua mô tả văn bản của nó, xem nó có được chọn hay không. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 28 55 Công cụ Web Phần tử SELECT (tiếp theo)  Mãng OPTION được tạo ra theo danh sách lựa chọn trong phần tử SELECT. Mỗi lựa chọn có thuộc tính text và selected cho phép kiểm tra tùy chọn đó có được chọn hay không và truy xuất văn bản của lựa chọn theo thứ tự. Cho phép người dùng chọn một hay nhiều chọn lựa. MULTIPLE Xác định số dòng được hiển thị.SIZE Tên của phần tử SELECT. Khi FORM được gửi đi, thuộc tính tên được gán với giá trị chọn lựa. NAME Mô tảThuộc tính 56 Công cụ Web Phần tử OPTGROUP Phần tử OPTGROUP được sử dụng để nhóm các lựa chọn vào một cây phân cấp. Xác định văn bản hiển thị cho một tuỳ chọn.LABEL Xác định gía trị được nhận vào cho tùy chọn được chọn. Giá trị được gán với tên của phần tử SELECT. Nội dung của phần tử OPTION là giá trị mặc địnhVALUE Thuộc tính logic sử dụng để chọn trước một tuỳ chọn.SELECTED Mô tảThuộc tính Generated by Foxit PDF Creator © Foxit Software For evaluation only. 29 57 Công cụ Web Pull-down menus What is your favorite ice cream flavor? Rocky Road Mint Chocolate Chip Pistachio Vanilla Chocolate Fudge Ripple Praline Pecan Bubblegum 58 Công cụ Web PULL-DOWN MENUS (tiếp theo) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 30 59 Công cụ Web SCROLLING MENUS 60 Công cụ Web Tạo nút nhấn bằng thẻ Thẻ dùng để tạo ra một nút nhấn trên trang web. xác định loại nút, giá trị có thể là: - submit: tạo nút nhận FORM khi được nhấn vào - button: tạo nút kích hoạt một kịch bản (script) khi được nhấn vào - reset: tạo nút thiết lập lại FORM và giá trị của các điều kiển trong FORM TYPE gán giá trị cho nútVALUE gán tên cho nútNAME Mô tảThuộc tính Generated by Foxit PDF Creator © Foxit Software For evaluation only. 31 61 Công cụ Web |  Một nút giống như một nút <INPUT type =“submit”>. Sự khác nhau là ở chỗ khi phần tử BUTTON được nhấn vào thì cặp NAME|VALUE được nhận cùng biểu mẫu.  Một nút giống như một nút . Sự khác nhau là ở chỗ phần tử INPUT có dạng một ảnh “phẳng” trong khi phần tử BUTTON hiển thị như một nút có hiệu ứng lên/ xuống khi nhấn vào. 62 Công cụ Web Phần tử LABEL  Phần tử LABEL được sử dụng để gắn thông tin vào các phần tử điều khiển, hoặc giải thích ý nghĩa của phần tử điều khiển.  Ta phải xác định thuộc tính ID của phần tử điều khiển mà nó được gán vào. Ví dụ: Username: Password : Generated by Foxit PDF Creator © Foxit Software For evaluation only. 32 63 Công cụ Web Cách thao tác với các phần tử trên FORM Khi có nhiều phần tử trong một FORM, chúng ta cần điều khiển chúng. Sau đây là các cách để điều khiển các phần tử  Thiết lập tiêu điểm (Focus)  Thứ tự Tab  Phím truy cập (Access Keys)  Phần tử vô hiệu hoá (Disabling Elements) 64 Công cụ Web Thiết lập tiêu điểm (Focus)  Một phần tử trở thành hoạt động (active) khi nó nhận tiêu điểm. Ví dụ, để nhập văn bản vào phần tử TEXT, tiêu điểm phải nằm trên phần tử đó.  Khi phần tử mất tiêu điểm, nó sẽ không hoạt động nữa. Cách đơn giản nhất để đặt tiêu điểm cho phần tử là là ta kích vào nó bằng cách sử dụng chuột, joystick hoặc dùng bàn phím để đặt Generated by Foxit PDF Creator © Foxit Software For evaluation only. 33 65 Công cụ Web Thứ tự Tab  Thuộc tính tabindex của một phần tử xác định trình tự phần tử nhận tiêu điểm thông qua bàn phím. Ở đây bao gồm các phần tử được lồng vào các phần tử khác. Giá trị có thể là bất kỳ số nào giữa 0 và 32767.  Tiêu điểm bắt đầu từ phần tử có giá trị tabindex thấp nhất. Nếu ta gán cùng một giá trị tabindex cho hơn một phần tử, thì các phần tử nhận tiêu điểm theo thứ tự nó xuất hiện trong tài liệu. 66 Công cụ Web Thứ tự Tab (tiếp theo)  Nếu phần tử nào không hỗ trợ thuộc tính tabindex, nó sẽ là phần tử nhận tiêu điểm cuối cùng. Nếu ta vô hiệu hóa một phần tử, nó sẽ không được liệt kê vào thứ tự tab – và nó sẽ không nhận được tiêu điểm. Ví dụ: Generated by Foxit PDF Creator © Foxit Software For evaluation only. 34 67 Công cụ Web Phím truy cập (Access Keys)  Thuộc tính này được sử dụng để gán phím truy cập cho phần tử.  Phím truy cập là một ký tự và thường được sử dụng cùng với phím ALT.  Khi người dùng nhấn phím truy cập, phần tử được xác định sẽ nhận tiêu điểm và bắt đầu hoạt động. Ví dụ: <INPUT accesskey=“U” tabindex=2 type=“text” id=“username”> 68 Công cụ Web Phần tử vô hiệu hóa  Trên trang web, ta có thể vô hiệu hóa các phần tử hoặc để ở trạng thái chỉ đọc (readonly) nếu không muốn người dùng truy cập chúng. Ví dụ, khi hiển thị một FORM, ta có thể vô hiệu hoá nút SUBMIT cho đến khi người dùng nhập đầy đủ các dữ liệu cần thiết. <INPUT type=“submit” value=“OK” disabled=True> Generated by Foxit PDF Creator © Foxit Software For evaluation only. 35 69 Công cụ Web Phần tử vô hiệu hoá (tiếp theo)  Thuộc tính vô hiệu hóa được sử dụng để điều khiển truy cập một phần tử.  Khi một phần tử bị vô hiệu hóa, nó không được liệt kê trong thứ tự tab. Do vậy , nó không nhận được tiêu điểm (Focus) và cuối cùng là các giá trị của phần tử bị vô hiệu hóa không được chuyển đi cùng với FORM khi được SUBMIT.  Một điều khiển bị vô hiệu hóa có thể được kích hoạt nhờ các script lúc thực hiện. 70 Công cụ Web  ?  ?  ? Câu hỏi Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 Công Cụ Web Ngôn ngữ JavaScript 2 Công cụ Web Nội dung chính  Giới thiệu ngôn ngữ kịch bản JavaScript  Cách sử dụng JavaScript  Tìm hiểu các đối tượng cơ bản của JavaScript.  Các từ khóa trong JavaScript  Xử lý sự kiện bằng JavaScript Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 Công cụ Web Giới thiệu JavaScript  JavaScript được phát triển bởi hãng Netscape và là ngôn ngữ kịch bản phổ biến nhất trên internet.  JavaScript mang lại cho các nhà thiết kế HTML – không chuyên về lập trình - một công cụ lập trình với cú pháp đơn giản, dễ hiểu, dễ áp dụng.  JavaScript được hỗ trợ bởi tất cả các trình duyệt web lớn như Netscape, Firefox và Internet Explorer. 4 Công cụ Web Giới thiệu JavaScript (tiếp theo)  JavaScript được thiết kế để thêm các tính năng tương tác trên trang HTML  JavaScript là một ngôn ngữ kịch bản - là loại ngôn ngữ lập trình gọn nhẹ, thích hợp trên trang HTML.  JavaScript là đoạn mã máy tính thực thi được.  JavaScript thường được nhúng trực tiếp vào các trang HTML.  JavaScript là một ngôn ngữ thông dịch.  Mọi người đều dùng được JavaScript mà không cần trả tiền bản quyền. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 35 Công cụ Web Giới thiệu JavaScript (tiếp theo)  JavaScript có thể đặt nội dung văn bản một cách linh động vào một trang HTML: document.write("" + name + "")  JavaScript có thể được thiết lập để thực thi khi một điều gì đó xảy ra như khi một trang web được mở ra hay người sử dụng tương tác với một phần tử trên trang web.  JavaScript có thể đọc và thay đổi nội dung của các phần tử HTML.  JavaScript được dùng để kiểm tra dữ liệu từ máy con trước khi gửi lên máy chủ nhằm làm giảm những quá trình xử lý trên máy chủ 6 Công cụ Web Phân biệt Server-side | client-side  JavaScript là một ngôn ngữ kịch bản (scripting language) có thể được dùng để tạo ra các ứng dụng cho máy khách và máy chủ.  Các ứng dụng trên máy khách chạy trong một trình duyệt, chẳng hạn như Netscape Navigator hay Internet Explorer, và các ứng dụng chạy trên máy chủ chạy trên các Web server như Internet Information Server của Microsoft hay Netscape Enterprise Server. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 47 Công cụ Web Phân biệt Server-side | client-side (tiếp theo)  Ngược lại với các script của JavaScript dựa vào trình duyệt, các chương trình JavaScript của máy chủ được biên dịch thành các tệp tin thực thi dưới dạng bytecode (mã byte) như Java. Quá trình tạo ra các ứng dụng bằng JavaScript do đó là một quá trình gồm hai giai đoạn.  Các trang HTML chứa các câu lệnh JavaScript của cả máy khách và máy chủ được tạo ra cùng với các tệp tin JavaScript. Tất cả các tệp tin này được biên dịch thành tệp tin thực thi dưới dạng mã byte.  Khi trình duyệt của máy khách yêu cầu tệp tin thực thi, máy chạy thực thi các câu lệnh JavaScript của máy chủ và trả về cho trình duyệt trang HTML 8 Công cụ Web Lượt đồ hoạt động của JavaScript Generated by Foxit PDF Creator © Foxit Software For evaluation only. 59 Công cụ Web JavaScript trong trình duyệt  Khi máy khách yêu cầu một trang HTML chứa một script, máy chủ sẽ chuyển tới toàn bộ nội dung của tài liệu HTML – các câu lệnh JavaScript và nội dung HTML.  Khi trình duyệt nhận tài liệu, nó thực hiện các câu lệnh HTML và JavaScript mà không cần tương tác với máy chủ.  Bạn có thể viết các script cho máy khách để nhận và kiểm tra tính hợp lệ dữ liệu nhập vào của người dùng, và phản hồi lại các sự kiện do người dùng tạo ra như kích chuột. 10 Công cụ Web JavaScript trên máy chủ Web  Chúng ta có thể nhúng các câu lệnh JavaScript trong một tài liệu HTML, để được thực hiện trên máy chủ. Khi các script này được gọi ra từ máy chủ, máy chủ Web khởi động JavaScript runtime engine. Engine thực hiện các mã lệnh và gửi HTML kết quả để hiển thị trên máy khách (trình duyệt).  Các câu lệnh dành cho máy chủ có thể được sử dụng để:  kết nối các cơ sở dữ liệu  chia sẻ thông tin giữa những người sử dụng trong cùng một ứng dụng  lấy tập tin hệ thống trên máy chủ  giao tiếp với các ứng dụng khác thông qua các chương trình. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 611 Công cụ Web Cách sử dụng JavaScript Bạn có thể chèn các câu lệnh JavaScript vào một tài liệu HTML theo các cách sau:  Nhúng các câu lệnh trực tiếp vào tài liệu bằng thẻ  Liên kết một tệp tin nguồn JavaScript vào một tài liệu HTML  Sử dụng JavaScript trong các giá trị thuộc tính thẻ HTML  Sử dụng JavaScript như là một trình điểu khiển sự kiện trong một số loại thẻ HTML 12 Công cụ Web Sử dụng thẻ document.write("Hello World!") Kết quả hiển thị: Hello World! Generated by Foxit PDF Creator © Foxit Software For evaluation only. 713 Công cụ Web Liên kết một tập tin nguồn JavaScript Ta có thể viết mã JavaScript và lưu ở tập tin dạng .js Nếu đoạn mã: document.write("This script is external") được lưu ở tập tin xxx.js nắm cùng thư mục với trang html thì: Kết quả hiển thị: This script is external 14 Công cụ Web Sử dụng JavaScript trong các giá trị thuộc tính thẻ HTML  Các biểu thức JavaScript có thể được đánh giá trong các giá trị thuộc tính HTML.  Biểu thức JavaScript được dùng thay thế cho một thuộc tính HTML. Các giá trị được đánh giá tại thời điểm khi mà tài liệu được trình duyệt đọc thay vì được mã hoá cố định. & {biểu thức}; tại nơi mà biểu thức là biểu thức JavaScript được đánh giá.  Ví dụ, bạn có thể xác định một biến tabwith. Bạn có thể dùng biến này để chỉ ra độ rộng của một bảng trên một trang web. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 815 Công cụ Web Sử dụng JavaScript như là một trình điểu khiển sự kiện trong một số loại thẻ HTML  JavaScript thường được sử dụng để xử lý sự kiện trên FORM như kiểm tra thông tin, tương tác với người dùng  Nếu bạn muốn đánh dấu một chuỗi được trích dẫn như là một hằng chuỗi, bạn nên sử dụng các dấu nháy đơn (‘) như là một dấu phân tách cho hằng chuỗi đó. Như vậy một script có thể phân biệt hằng bên trong chuỗi. onclick= “myfunc(‘astring’)”> 16 Công cụ Web Vị trí đặt JavaScript  JavaScripts trong phần body sẽ được thực thi khi trang web được tải trên trình duyệt.  JavaScripts trong phần head sẽ được thực thi khi nó được gọi  Có ba trường hợp đặt JavaScripts:  Đặt JavaScripts trong phần head  Đặt JavaScripts trong phần body  Đặt JavaScripts trong cả hai phần body và head Generated by Foxit PDF Creator © Foxit Software For evaluation only. 917 Công cụ Web Vị trí đặt JavaScript (tiếp theo) Đặt JavaScripts trong phần head some statements 18 Công cụ Web Vị trí đặt JavaScript (tiếp theo) Đặt JavaScripts trong phần body some statements Generated by Foxit PDF Creator © Foxit Software For evaluation only. 10 19 Công cụ Web Vị trí đặt JavaScript (tiếp theo) Đặt JavaScripts trong cả hai phần body và head some statements some statements 20 Công cụ Web Sử dụng Nếu trình duyệt không hỗ trợ JavaScript, ta có thể sử dụng thẻ . Trình duyệt sẽ hiển thị HTML nằm trong thẻ dưới dạng văn bản thuần tuý. Các trình duyệt hỗ trợ JavaScript lờ đi các mã trong thẻ này. document.write (“NOSCRIPT”); Trình duyệt không hỗ trợ JavaScript Nhấn vào đây Nếu trình duyệt của bạn không hỗ trợ JavaScript, hãy kiểm tra lại cấu hình của trình duyệt. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 21 Công cụ Web Sử dụng WRITE và WRITELN  Phương thức write được dùng để hiển thị văn bản trên một trang web. Phương thức write tiếp nhận các hằng và biến. Thậm chí bạn có thể nối nhiều chuỗi với nhau thành một chuỗi bằng cách dùng toán tử nối. Cú pháp: object.write (string)  Phương thức writeln tương tự như phương thức write ở chổ nó được dùng để hiển thị văn bản trong cửa sổ tài liệu. Sự khác nhau là writeln xuất ra một ký tự xuống dòng sau khi văn bản được xuất ra. Trong HTML, ký tự xuống dòng được lờ đi trừ khi nó được dùng trong văn bản được định dạng sẵn. Cú pháp: object.writeln (string) 22 Công cụ Web Ví dụ về WRITE và WRITELN document.write (“Sử dụng write ”) document.writeln (“Sử dụng writeln ” +”Hãy xem sự khác biệt giữa WRITE và WRITELN ”) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 12 23 Công cụ Web Sử dụng hộp thoại cảnh báo (ALERT)  Phương thức alert được dùng để hiển thị một cảnh báo và một nút OK. Không thể thay đổi thanh tiêu đề của hộp hội thoại Alert. Cú pháp: object.alert ([thông báo])  Ví dụ <SCRIPT type="text/javascript”> alert (“Nhấn nút OK để đi tiếp”); 24 Công cụ Web Sử dụng hộp thoại xác nhận(CONFIRM)  Phương thức confirm được dùng để hiển thị một thông báo cùng với một nút OK và một nút Cancel. Tuy nhiên bạn không thể thay đổi tiêu đề của hộp hội thoại. Phương thức này trả về giá trị đúng nếu người dùng nhấp chuột vào nút OK và trả về giá trị sai nếu người dùng nhấp chuột vào nút Cancel. Cú pháp: object.confirm ([thông báo])  Ví dụ: <SCRIPT type="text/javascript”> confirm (“Bạn có muốn tiếp tục không?”) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 13 25 Công cụ Web Sử dụng hộp thoại nhập liệu (PROMPTS)  Phương thức prompt được dùng để hiển thị một hộp thông báo để tiếp nhận dữ kiện nhập của người dùng. Tuy nhiên, bạn không thể thay đổi tiêu đề của hộp prompt. object.prompt ([message[, inputdefault]]) Ở đây  Message - - là chuỗi cần thể hiện. Chuỗi này là tuỳ ý.  Inputdefault - - là chuỗi hay số nguyên biểu thị giá trị mặc định của trường được nhập. Nếu bạn không chỉ ra tham số inputDefault, hộp hội thoại hiển tị giá trị .  Ví dụ: prompt (“Nhập vào tên của bạn”, “”); 26 Công cụ Web Biến và hằng  Có hai cách để chứa dữ liệu, hoặc là trong biến để sau này dùng lại, hoặc là gõ trực tiếp vào như một hằng gọi là hằng.  Biến là một vật chứa tham chiếu đến vị trí của bộ nhớ. Nó được dùng để giữ các giá trị có thể thay đổi trong khi thực hiện một script. Để thay đổi giá trị của biến, bạn chỉ phải dùng tên biến.  Biến tuân theo một số quy luật sau:  tên biến phải bắt đầu bằng một chữ cái hoặc một dấu gạch dưới (“_”) hay dấu đô la ($).  tên biến có thể chứa các số nguyên.  biến phân biệt chữ hoa và chữ thường. Tên biến bao gồm các ký tự từ “A” tới “Z” (chữ hoa) và các ký tự từ “a” đến “z” (chữ thường). Generated by Foxit PDF Creator © Foxit Software For evaluation only. 14 27 Công cụ Web Cách khai báo biến Cách khai báo var strname = giá trị hoặc strname = giá trị Gán một giá trị var strname = "Hege" hoặc strname = "Hege" Vòng đời của biến Khi khai báo một biến trong một hàm. Biến đó được khởi tạo khi hàm đó được gọi và sẽ bị hủy khi kết thúc việc gọi hàm đó. 28 Công cụ Web Phạm vi của biến  Biến có một phạm vi được xác định bởi nơi mà chúng được khai báo trong script.  Nếu bạn khai báo một biến bên ngoài một hàm thì nó được xem như là một biến toàn cục (global variable) và có thể được lấy từ bất cứ nơi đâu trong script.  Nếu bạn khai báo biến trong một hàm thì nó được xem như là một biến cục bộ (local variable) và nó chỉ có sẵn trong hàm đó mà không phải trong toàn script.  Biến toàn cục không nhất thiết phải được khai báo bằng cách dùng từ khoá var. Tuy nhiên biến cục bộ thì luôn luôn phải được khai báo bằng cách dùng từ khoá var. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 15 29 Công cụ Web Cách khai báo Hằng  Hằng là các giá trị cố định mà bạn có thể dùng trong script. Giá trị của một hằng hoàn toàn không thay đổi trong khi thực hiện script đó.  Hằng có thể là một trong những kiểu sau đây:  Số nguyên (Interger) Ví dụ: 35, -63, 0377, 0568, OXABC, OX1234  Số thực (Floating point) Ví dụ: 10.24, 1.20e+22, 4E-8, .1815  Chuỗi (String) Ví dụ: ‘Unexpected error’, “Hi! How are you”, ‘4531’  Boolean: Chỉ lấy hai giá trị: Đúng hoặc Sai.  Null: chỉ có một giá trị: giá trị trống. 30 Công cụ Web Các ký tự đặc biệt khi sử dụng STRING  Khi sử dụng các STRING, bạn có thể chèn các ký tự đặc biệt (special character) vào chuỗi để thực hiện một nhiệm vụ cụ thể nào đó. Bảng sau đây liệt kê các ký tự đặc biệt và ý nghĩa của nó. Ký tự Nghĩa \ b xoá lui (backspace) \ f Form feed \ n Dòng mới \ r xuống dòng \ t Tab \ \ Ký tự vạch chéo ngược Generated by Foxit PDF Creator © Foxit Software For evaluation only. 16 31 Công cụ Web Sử dụng ký tự \  Ngoài các ký tự đặc biệt trên đây, bạn có thể chèn các ký tự khác vào một chuỗi bằng cách thêm vào trước nó một dấu vạch chéo ngược. Nó được xem như là giải thoát ký tự đó. Ví dụ, nếu bạn muốn đóng bao một chuỗi bằng dấu nháy: var quote = “ \“To be or not to be?\” that is the question”; document.write (quote); Kết quả sẽ là như sau: “To be or not to be?” that is the question 32 Công cụ Web Sử dụng ký tự \ (tiếp theo)  Để thêm một đường vạch chéo vào trong một chuỗi, bạn phải giải thoát dấu vạch chéo. Ví dụ, để gán đường dẫn tệp tin c:\temp cho một chuỗi, hãy sử dụng đoạn script dưới đây: var home = “c:\\temp” document.write(home) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 17 33 Công cụ Web Kiểu dữ liệu  Một giá trị có thể thuộc một trong nhiều kiểu dữ liệu. JavaScript, là một ngôn ngữ tuy rất nhỏ nhưng mạnh, có một tập hợp các kiểu dữ kiệu tương đối nhỏ. từ khoá đặc biệt biểu thị một giá trị trốngnull ví dụ: “Xin chào”chuỗi ký tự Đúng hoặc saiboolean Số nguyên hay số thựcsố Mô tảKiểu dữ liệu 34 Công cụ Web Ép kiểu dữ liệu  Dữ liệu luôn thuộc một kiểu nào đó, vì vậy hằng cũng có một kiểu. Các biến nhận kiểu dữ liệu mà chúng chứa và thay đổi kiểu khi dữ liệu trong chúng thay đổi. Khi bạn khai báo một biến, kiểu dữ liệu của biến đó không được chỉ ra. Kiểu dữ liệu được tự động chuyển đổi khi cần thiết trong suốt qúa trình thực hiện script. Ví dụ: var x = 10 Sau đó trong script bạn có thể gán cho x một giá trị chuỗi: x = “Bạn có vui không?” var x = 10; document.writeln(x); var x = “Bạn có vui không?”; document.writeln(x); Generated by Foxit PDF Creator © Foxit Software For evaluation only. 18 35 Công cụ Web Chuyển đổi kiểu dữ liệu  Trong JavaScript bạn có thể kết hợp hai hằng khác kiểu dữ liệu với nhau. Nếu bạn kết hợp một giá trị kiểu chuỗi và một giá trị kiểu số, JavaScript sẽ chuyển đổi các số thành các chuỗi. Ví dụ: a = “Giá một lon Coca là: ” + 5 sẽ đem đến kết quả là một chuỗi với giá trị: “Giá một lon Coca là: 5”.  Tuy nhiên bạn không biến một chuỗi thành một số. Nếu bạn cộng một chuỗi “12” và một hằng số thực (floating-point) 7.5 với nhau, kết quả sẽ là 127.5 var A = “12” + 7.5; document.write(A); 36 Công cụ Web Chuyển đổi kiểu dữ liệu (tt)  Trong JavaScript có hai hàm parseInt() và parseFloat(), dùng để chuyển đổi các chuỗi thành các số nguyên hay số dấu chấm động.  Ví dụ, parseInt(“15”) trả về số nguyên 15 và parseFloat(“35.45”) trả về giá trị thực 35.45. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 19 37 Công cụ Web Các toán tử  Các toán tử số học  Các toán tử gán  Các toán tử so sánh  Các toán tử luận lý  Các toán tử trên chuỗi  Toán tử điều kiện  Các toán tử theo bit (Bitwise)  Các toán tử đặc biệt 38 Công cụ Web Các toán tử số học Generated by Foxit PDF Creator © Foxit Software For evaluation only. 20 39 Công cụ Web Các toán tử gán 40 Công cụ Web Các toán tử so sánh Generated by Foxit PDF Creator © Foxit Software For evaluation only. 21 41 Công cụ Web Các toán tử luận lý 42 Công cụ Web Các toán tử trên chuỗi Generated by Foxit PDF Creator © Foxit Software For evaluation only. 22 43 Công cụ Web Toán tử điều kiện  Gán một giá trị cụ thể vào một biến nếu một điều kiện là đúng, còn không gán một giá trị thay thế nếu điều kiện là sai. Cú pháp: (điều kiện) ? trueVal: falseVal.  Ví dụ: Tình trạng = (tuổi >= 18) ? “người lớn” : “trẻ em” var today_date = new Date( ); var seconds = today_date.getSecond (); var b_color = (seconds >= 3 && seconds <= 50) ? “Red” :“Green”; document.write (“<body text = White bgcolor =” +b_color + “>”); Welcome to Asset International. 44 Công cụ Web Các toán tử theo bit (Bitwise) biểu thị nhị phân của toán hạng x đượcdịch y bit chuyển qua phải. Các giá trị bit 0 sẽ được dịch chuyển từ bên trái Unsigned Right Shift (x >>> y) biểu thị nhị phân của toán hạng x được dịch chuyển y bit qua phải. Các bit nằm ở đầu cùng bên trái sẽ bị loại. Dịch chuyển phải (x >> y) biểu thị nhị phân của toán hạng x được dịch chuyển y bit qua bên trái. Các giá trị 0 sẽ được dịch chuyển từ bên phải. Dịch chuyển trái ( x << y) mỗi vị trí bit trả về giá trị 1 nếu bit của một trong hai toán hạng x,y là 1 nhưng không phải cả hai XOR: ( x ^ y) mỗi giá trị bit trả về là giá trị đảo của bit của xNOT: (~x) mỗi giá trị bit trả về là 1 nếu bit của x hoặc y là 1OR: (x | y) mỗi giá trị bit trả về là 1 nếu bit của cả x,y đều là 1AND: (x & y) Mô tảToán tử Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 45 Công cụ Web Các toán tử bitwise lô gích  Các toán tử lô gích xử lý các kiểu số như những giá trị 32 bit, chúng sẽ thay đổi bit tuỳ theo các toán tử và sau đó chuyển chúng lại thành số khi thực hiện xong.  Ví dụ:  Biểu thức 10 & 15 hàm ý (1010 & 1111) trả về một giá trị 1010, tức bằng 10.  Biểu thức 10 | 15 hàm ý (1010 | 1111) trả về một giá trị 1111, tức bằng 15.  Biểu thức 10 ^ 15 hàm ý (1010 ^ 1111) trả về giá trị 0101, tức bằng 5. 46 Công cụ Web Các toán tử bitwise dịch chuyển  Các toán tử này lấy hai toán hạng. Toán hạng đầu tiên là giá trị thực và toán hạng thứ hai quyết định số bit dịch chuyển được yêu cầu. Hướng dịch chuyển được điều khiển bởi toán tử được sử dụng.  Biểu thức 15 << 3 hàm ý 1111 phải được dịch chuyển 3 bit qua trái, đó chính là 1111000, bằng 120.  Biểu thức 15 >> 3 hàm ý 1111 phải được dịch chuyển 3 bit qua phải, đó là 1, bằng 1.  Biểu thức 25 >>> 2 hàm ý 11001 phải được chuyển 2 bit qua phải, đó là 110, bằng 6. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 24 47 Công cụ Web Các toán tử đặc biệt  Một số toán tử của JavaScript hiếm khi được dùng không thuộc vào loại nào cả.  Các toán tử này được tóm tắt dưới đây:  typeof: toán tử typeof trả về một chuỗi biểu thị kiểu của toán hạng.  Toán tử dấu phẩy: (,) đánh giá cả hai toán hạng và trả về giá trị của toán hạng thứ hai.  new: Toán tử new được dùng để tạo ra một đối tượng. Kiểu đối tượng có thể do người dùng định nghĩa hay đã có sẵn, ví dụ như đối tượng mảng. Cú pháp: objectName = new objectType (para1 [,para2] [,paraN]) Trong đó  objectName - - là tên của mẫu đối tượng mới  ObjecType – là hàm định nghĩa kiểu đối tượng. Ví dụ, Array (mảng)  Para [1,2, .. ] - - là các giá trị thuộc tính của đối tượng. 48 Công cụ Web Ví dụ về toán tử typeof và dấu phẩy  Toán tử typeof var x = 7;document. Write (typeof (x));  Toán tử dấu phẩy a = 2; b = 3; c = 4; d = 5; x = (a++, c) * (b++, d); document. write(x); Generated by Foxit PDF Creator © Foxit Software For evaluation only. 25 49 Công cụ Web Toán tử NEW  Toán tử new được dùng để tạo ra một đối tượng. Kiểu đối tượng có thể do người dùng định nghĩa hay đã có sẵn, ví dụ như đối tượng mảng.  Cú pháp: objectName = new objectType (para1 [,para2] [,paraN])  Trong đó  objectName - - là tên của mẫu đối tượng mới  ObjecType – là hàm định nghĩa kiểu đối tượng. Ví dụ, Array (mảng)  Para [1,2, .. ] - - là các giá trị thuộc tính của đối tượng. 50 Công cụ Web Ví dụ về toán tử NEW  Ta có thể tạo ra một đối tượng gọi là employee với các thuộc tính là name, code, designation. function employee(name, code, designation) { this.name = name this.code = code this.designation = designation } newemp = new employee(“John Dias”, “A001”, “Officer”); document.write (“Employee name : “ + newemp.name + “); document.write (“Employee code : “ + newemp.code + “”); document.write (“Designation : “ + newemp.designation); Generated by Foxit PDF Creator © Foxit Software For evaluation only. 26 51 Công cụ Web Đối tượng (Object)  Đối tượng dùng để chỉ các thành phần trên trang HTML.  Đối tượng có các thuộc tính (properties) và phương thức (methods)  thuộc tính: mô tả thông tin về đối tượng  phương thức: các hàm để xử lý thông tin  Cách truy xuất:  đến thuộc tính: tên_đối_tượng.tên_thuộc_tính  đến phương thức: tên_đối_tượng.tên_phươngthức () 52 Công cụ Web Các loại đối tượng HTML Anchor Applet Area Base Basefont Body Button Checkbox Document Form FileUpload Frame Frameset Hidden History Iframe Image Link Location Meta Navigator Option Password Radio Reset Screen Select Style Submit Table TableData TableHeader TableRow Text Textarea Window Generated by Foxit PDF Creator © Foxit Software For evaluation only. 27 53 Công cụ Web Các biểu thức có quy tắc  Một biểu thức có quy tắc là một kiểu được định nghĩa mà bạn có thể dùng để làm tương hợp việc kết hợp các ký tự của một chuỗi. Dùng biểu thức có quy tắc ta có thể tìm kiếm các kiểu ký tự trong một chuỗi do người dùng nhập vào.  Một kiểu biểu thức có quy tắc có thể bao gồm:  Các kiểu đơn giản. Ví dụ: kiểu /cat/  Kết hợp các ký tự đặc biệt và đơn. Ví dụ: biểu thức /xy*z/ Các ký tự đặc biệt bao gồm: \, ^, $, *, +, ?, ., (x), x | y, {n,m}, [xyz], [^xyz], \s, \t, \w. 54 Công cụ Web Tạo một biểu thức có quy tắc Ta có thể tạo một biểu thức có quy tắc theo một trong hai cách sau:  Dùng một bộ khởi tạo đối tượng  Re = /xy+z/  Re = new RegExp(“xyz+z”)  Dùng các biểu thức có quy tắc  Các phương thức biểu thức có quy tắc - - - test và exec.  Các phương thức chuỗi - - - match, replace, search, và split Generated by Foxit PDF Creator © Foxit Software For evaluation only. 28 55 Công cụ Web Đối tượng Dãy (Array)  Dùng để lưu trữ một tập hợp các giá trị rời rạc hoặc liên tục trong một biến. Mỗi gía trị là một phần tử của mãng và được chỉ số.  Khởi tạo dãy var family_names=new Array(3) var family_names=new Array("Tove","Jani","Stale")  Gán giá trị family_names[0]="Tove" family_names[1]="Jani" family_names[2]="Stale" StaleJaniTove 1 20 56 Công cụ Web Các phương thức truy cập phần tử của Dãy (Array) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 29 57 Công cụ Web Dãy đa chiều 58 Công cụ Web Đối tượng Boolean var b1 = new Boolean() var b2 = new Boolean(0) var b3 = new Boolean(null) var b4 = new Boolean("") var b5 = new Boolean(false) var b6 = new Boolean(NaN) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 30 59 Công cụ Web Đối tượng Date Date được dùng để làm việc với ngày và giờ. cách khởi tạo một thực thể của đối tượng Date: var d=new Date() Sau khi khởi tạo thực thể của đối tượng Date ta có thể truy xuất đến các phương thức của đối tượng Date trên thực thể này. d.getDate(): đây là phương thức trả về ngày trong tháng (tầm giá trị trong khoảng 1 đến 31) 60 Công cụ Web Đối tượng Date (tt) Các dạng khởi tạo của Date :  new Date(milliseconds)  new Date(dateString)  new Date(yr_num, mo_num, day_num [, hr_num, min_num, sec_num, ms_num]) Một số ví dụ khởi tạo Date:  var d=new Date("October 12, 1988 13:14:00")  var d=new Date("October 12, 1988")  var d=new Date(88,09,12,13,14,00)  var d=new Date(88,09,12)  var d=new Date(500) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 31 61 Công cụ Web Hàm (Functions) Khai báo hàm function myfunction(đối số 1, đối số 2,) { các câu lệnh } Trường hợp không có đối số: function myfunction() { các câu lệnh } 62 Công cụ Web Hàm (tiếp theo) Cách gọi hàm myfunction(đối số 1, đối số 2, ) Trường hợp không có đối số: myfunction() Hàm không được thực thi nếu nó không được gọi. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 32 63 Công cụ Web Hàm (tiếp theo) Câu lệnh return Trong trường hợp hàm cần trả về giá trị, ta dùng câu lệnh return: function total(a,b) { result=a+b return result } 64 Công cụ Web Hàm (tiếp theo) Câu lệnh this Giá trị this của chỉ ra đối tượng hiện hành. Câu lệnh this chỉ được dùng trong phạm vi một hàm hay tham chiếu khi gọi hàm: this.[property] Trong đó: property là thuộc tính của đối tượng Generated by Foxit PDF Creator © Foxit Software For evaluation only. 33 65 Công cụ Web Một số hàm thông dụng  Hàm eval được dùng để đánh giá một chuỗi mã lệnh mà không cần tham chiếu đến bất kì đối tượng cụ thể nào.  eval(string)  Hàm isNaN được dùng để xác nhận xem một đối số là một NaN (không phải là một số)  isNaN(Giá trị kiểm tra) 66 Công cụ Web Câu lệnh điều kiện (tt) If và If...Else if (điều kiện) { đoạn mã thực thi nếu điều kiện đúng } if (điều kiện) { đoạn mã thực thi nếu điều kiện đúng } else { đoạn mã thực thi nếu điều kiện sai } Generated by Foxit PDF Creator © Foxit Software For evaluation only. 34 67 Công cụ Web Câu lệnh điều kiện (tt) Câu lệnh Switch switch (biểu thức) { case giá trị 1: đoạn mã thực thi nếu biểu thức = giá trị 1 break case giá trị 2: đoạn mã thực thi nếu biểu thức = giá trị 2 break . default: đoạn mã thực thi nếu biểu thức không nhận các giá trị đã nêu trên. } 68 Công cụ Web Câu lệnh điều kiện (tt) Toán tử điều kiện Cú pháp tên biến =(điều kiện)? giá trị 1: giá trị 2 Ví dụ greeting=(visitor=="PRES")?"Dear President ":"Dear " Generated by Foxit PDF Creator © Foxit Software For evaluation only. 35 69 Công cụ Web Vòng lặp (Looping) while while (điều kiện) { đoạn mã thực thi } do...while do { đoạn mã thực thi } while (điều kiện) for for (khởi tạo biến đếm; điều kiện; chỉ số tăng) { đoạn mã thực thi } 70 Công cụ Web for in và with  Câu lệnh for in được dùng để đi vòng quanh mỗi thuộc tính của một đối tượng hay mỗi phần tử của một dãy. Ví dụ, bạn có thể muốn thực hiện một khối lệnh cho mỗi phần tử trong mỗi dãy. for (biến trong đối tượng) {các câu lệnh;}  Câu lệnh with được dùng để thực hiện một tập hợp các lệnh. Các lệnh đó giả định một đối tượng như là một tham chiếu. Có nghia là, thuộc tính được gán cho đối tượng cụ thể trong câu lệnh with. with (object) {các câu lệnh;} Generated by Foxit PDF Creator © Foxit Software For evaluation only. 36 71 Công cụ Web Một số chỉ dẫn  JavaScript phân biệt chữ hoa và chữ thường  Các ký hiệu mở phải trùng với các ký hiệu đóng theo cặp ( { [ " ', phải trùng với ' " ] } ).  JavaScript bỏ qua các khoảng trắng thừa. Chúng ta có thể thêm các khoảng trắng để trang trí làm đẹp và làm cho các đoạn mã dễ đọc. 72 Công cụ Web Một số chỉ dẫn (tiếp theo)  Ngắt dòng một đoạn mã bằng ký hiệu \  Chèn các ký hiệu đặc biệt document.write ("You \& I sing \"Happy Birthday\".")  Chú thích cho đoạn mã bằng:  //: đối với từng dòng lệnh  bắt đầu bằng /* và kết thúc bằng */ đối với một đoạn mã Generated by Foxit PDF Creator © Foxit Software For evaluation only. 37 73 JavaScript Xử lý sự kiện 74 Công cụ Web Nội dung chính  Tìm hiểu về trình duyệt và các đối tượng  Xử lý các sự kiện cơ bản như: onChange, onLoad, onMouseOver, onMouseOut, onSubmit  Phát triển trang web với khả năng xử lý sự kiện.  Kiểm tra tính hợp lệ của dữ liệu trên form bằng JavaScript. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 38 75 Công cụ Web Tìm hiểu về trình duyệt  Trình duyệt (browser) là chương trình dùng để hiển thị nội dung của một văn bản HTML.  Đối tượng (object) browser đại diện cho cửa sổ trình duyệt (browser’s window).  Tất cả các đối tượng khác trong mô hình thừa kế được truy xuất thông qua đối tượng window. Browser Objects Script Objects HTML elements 76 Công cụ Web Mô hình trình duyệt Internet Explorer Window Objects Document Objects Events Frames History Location Navigator Screen Generated by Foxit PDF Creator © Foxit Software For evaluation only. 39 77 Công cụ Web Mô hình trình duyệt Netscape Window Objects Document Frames Location History Navigator Plugin Mime type 78 Công cụ Web Đối tượng Window Các thuộc tính (Properties) Đề cập đến window có chứa window khác.parent Nhận dạng window hiện hành được đề cập.self, window Đề cập đến topmost parent window.top Tên của window được nhận dạng.name Vị trí nguồn của văn bản trong window. location Mãng chứa tất cả các frame trong window.frames Thông điệp tạm thời trên thanh trạng thái.status Thông điệp mặc định trên thanh trạng thái.default status Nhận dạng khi window bị đóng.closed Generated by Foxit PDF Creator © Foxit Software For evaluation only. 40 79 Công cụ Web Đối tượng Window (tiếp theo) Các phương thức (Methods) Mở một window mới và tải văn bản được xác định bởi địa chỉ URL hoặc một văn bản trống (blank) nếu địa chỉ URL không được cung cấp. open Làm cho đối tượng nhận focus, và thực thi đoạn mã được xác định bởi sự kiện onFocus focus Đóng cửa sổ trình duyệt hiện hành hoặc ứng dụng HTML (HTML Application - HTA) close Làm cho đối tượng bị mất focus, và kích hoạt sự kiện onBlur blur Hiển thị một hộp thoại (DialogBox) chứa thông điệp.alert 80 Công cụ Web Đối tượng document Các thuộc tính (Properties) Màu của các liên kết mà người sử dụng đã đến.vlinkColor Địa chỉ URL của văn bản hiện hành.URL Tiêu đề của văn bản.title Chứa thông tin về địa chỉ URL hiện hành.location Màu của văn bản liên kết.linkColor Màu chữ của văn bản.fgColor Chỉ ra bắt đầu và kết thúc của phần thân văn bản.body Màu nền của văn bản.bgColor Màu của tất cả các liên kết hoạt động trong văn bản.alinkColor Generated by Foxit PDF Creator © Foxit Software For evaluation only. 41 81 Công cụ Web Đối tượng document (tiếp theo) Các phương thức (Methods) Viết ra một hay nhiều biểu thức HTML (HTML expression), theo sau bởi một phím xuống dòng (carriage return) vào văn bản trong một window đã xác định trước. writeln Viết ra một hay nhiều biểu thức HTML (HTML expression) vào văn bản trong một window đã xác định trước. write Mở một văn bản để chọn output của phương thức write hay writeln. open Đóng một output stream, và bắt buộc hiển thị dữ liệu đã gửi. close Xóa văn bản hiện hành.clear 82 Công cụ Web Đối tượng history Lưu danh sách các địa chỉ URL được sử dụng gần nhất trong suốt phiên làm việc (session) hiện hành của trình duyệt. Đối tượng history không cho phép nhìn thấy các URL này. Việc truy xuất sẽ được thực hiện thông qua các phương thức. Các phương thức (Methods) Chuyển đến địa chỉ URL được chỉ định trong danh sách history. go Tải địa chỉ URL kế tiếp trong danh sách history.forward Tải địa chỉ URL trước đó trong danh sách history.back Generated by Foxit PDF Creator © Foxit Software For evaluation only. 42 83 Công cụ Web Đối tượng location Các thuộc tính (Properties) Các phương thức (Methods) Chuỗi chứa toàn bộ địa chỉ URL.href Phần hostname của location hoặc địa chỉ URL.hostname Phần hostname: port của địa chỉ URL.host Phần anchor của địa chỉ URL (nếu có thể).hash Thay thế văn bản hiện hành bằng cách tải văn bản ở địa chỉ URL được chỉ định. replace Tải lại trang hiện hành.reload Tải một văn bản HTML mới.assign 84 Công cụ Web Đối tượng navigator Chuỗi ký tự tương đương với HTTP user-agent request header. userAgent Tập hợp tất cả các plugin hiện hành đã được cài đặt vào trình duyệt. plugins Tên của hệ điều hành của máy khách.platform Truy lục khi hệ thống ở chế độ offline.onLine Cung cấp thông tin về trình duyệt giúp xác định có hỗ trợ JavaScript hay không?  Phiên bản (version)  Các thông tin đặc biệt khác Generated by Foxit PDF Creator © Foxit Software For evaluation only. 43 85 Công cụ Web Ví dụ về các đối tượng  Đối tượng windows Ví dụ  Đối tượng document  Đối tượng history  Đối tượng location 86 Công cụ Web Các đối tượng JavaScript Đối tượng String Dùng để thao tác và làm việc với với chuỗi văn bản. Cách khai báo  var newstr = “This is my name”  newstr = “This is my name”  var newstr = String(“This is my name”) Các thuộc tính (Properties) Ví dụ: “HTML”.length = 4 Chiều dài của chuỗilength Generated by Foxit PDF Creator © Foxit Software For evaluation only. 44 87 Công cụ Web Đối tượng String Các phương thức (Methods) Chuyển chuỗi về dạng chữ viết hoa.ToUpperCase Chuyển chuỗi về dạng chữ thường.ToLowerCase Tạo kiểu chữ superscriptSup Tạo kiểu chữ subscript.Sub Gạch ngang thân chữ của chuỗi văn bản.Strike Giảm co chữ của chuỗi văn bản.Small Tạo chữ in nghiêng cho chuỗi văn bản.Italics Xác định màu của font chữ.Fontcolor Tô đậm chuỗi văn bản.Bold Tạo hiệu ứng nhấp nháy chuỗi văn bản (IE không có).Blink Tăng co chữ của chuỗi văn bản.Big 88 Công cụ Web Đối tượng Date Các phương thức (Methods) Được dùng để phân tích ra string.parse and UTC Trả về giá trị string của đối tượng Date.to Lấy giá trị ngày giờ.get Thiết lập giá trị ngày giờ.set Từ năm 1900Year Từ 0 đến 11 (January đến December)Months Từ 1 đến 31 (ngày trong tháng)Date Từ 0 đến 6 (ngày trong tuần)Day Từ 0 đến 23Hours Từ 0 đến 59Seconds and minutes IntegerValues Generated by Foxit PDF Creator © Foxit Software For evaluation only. 45 89 Công cụ Web Đối tượng sự kiện (Event Object)  JavaScript là ngôn ngữ lập trình hướng sự kiện (event-driven).  Event là hành động sinh ra trên trang web.  Event object cung cấp thông tin về sự kiện. Khi phát sinh sự kiện, sự kiện được gửi như là một đối số (argument) đến trình xử lý sự kiện (event handler).  Vòng đời của sự kiện bắt đầu từ lúc có hành động hay điều kiện phát sinh ra sự kiện và kết thúc bằng đáp ứng cuối cùng của event handler. 90 Công cụ Web Trình xử lý sự kiện (event handler) Khi phát sinh một sự kiện, ta có thể chỉ định đoạn mã JavaScript sẽ thực thi để đáp ứng sự kiện đó. Phần đoạn mã nàyđược gọi là trình xử lý sự kiện (event handler) <input type=“button” name=“docode” onClick=“DoOnClick();”> khi nhấn chuột vào button, sự kiện onClick sẽ phát sinh. Sự kiện onClick gọi hàm DoOnClick() và các câu lệnh bên trong hàm này sẽ được thực thi. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 46 91 Công cụ Web Các loại Event handler  Event handler cho thẻ HTML Để tạo một trình xử lý sự kiện cho một thẻ lệnh HTML, ta phải xác định thẻ và thuộc tính event handler. <input type=“button” name=“button1” value=“Open Sesame” onClick=“window.open(‘mydoc.htm’, ‘newWin’)”>  Event handler như là thuộc tính object.eventhandler = function; Ví dụ: window.onLoad = greeting; 92 Công cụ Web Các sự kiện của JavaScript  onClick: phát sinh khi người dùng nhấn chuột vào form element (button, checkbox...) hay trên các liên kết.  onChange: phát sinh khi form element có sự thay đổi.  onFocus: phát sinh khi một form element trở thành form element hiện hành  onBlur: phát sinh khi người dùng rời khỏi form element. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 47 93 Công cụ Web Các sự kiện của JavaScript (tiếp theo)  onMouseOver phát sinh khi mouse cursor được di chuyển trên một element.  onMouseOut phát sinh khi mouse cursor được rời một element.  onMouseDown phát sinh khi nhấn phím chuột trên button, document và link.  onMouseUp phát sinh khi nhả phím chuột trên button, document và link. 94 Công cụ Web Các sự kiện của JavaScript (tiếp theo)  onLoad được gửi đến đối tượng document body khi văn bản được tải lên thành công, hoặc gửi đến đối tượng image khi image đó được tải lên thành công.  onSubmit phát sinh khi người dùng submit form.  onResize phát sinh khi thay đổi kích thước của window hay kích thước của frame. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 48 95 Công cụ Web Event Handling Document Object HTML Page BODY object Heading (click) 96 Công cụ Web  ?  ?  ? Câu hỏi Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 Công Cụ Web Giới thiệu DHTML 2 Công cụ Web Nội dung chính 1. Giới thiệu Style Sheets (CSS) 2. Giới thiệu DHTML 3. Sử dụng Layer 4. Sử dụng Dynamic Content 5. Sử dụng Dynamic Positioning 6. Sử dụng Special Effects 7. Sử dụng Data Binding Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 Công cụ Web 1. Giới thiệu CSS Cascading Style Sheets  Giới thiệu CSS  Thứ tự xếp tầng CSS  Cú pháp CSS  External Style Sheets  Internal Style Sheets  Inline Style 4 Công cụ Web Cascading Style Sheets Giới thiệu  CSS là từ viết tắt của Cascading Style Sheets.  Styles định nghĩa cách hiển thị HTML elements.  Styles thường được lưu trong Style Sheets.  Styles được thêm vào HTML 4.0 để giải quyết một vấn đề nào đó.  External Style Sheets có thể tiết kiệm công sức làm việc của bạn.  External Style Sheets được lưu trong tập tin CSS.  Các định nghĩa đa (Multiple) style sẽ xếp tầng vào trong một style. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 35 Công cụ Web Cascading Style Sheets Thứ tự xếp tầng Thứ tự xếp tầng của CSS theo độ ưu tiên từ thấp đến cao như sau:  Browser default  External Style Sheet  Internal Style Sheet (bên trong thẻ )  Inline Style (bên trong HTML element) Do đó, inline style có độ ưu tiên cao nhất, nghĩa là nó sẽ thay thế cho tất cả các style được khai báo trong thẻ , external style sheet, và trong giá trị mặc định của trình duyệt. 6 Công cụ Web Cascading Style Sheets Cú pháp (Syntax) Cú pháp CSS được tạo bởi 3 thành phần: đối tượng lựa chọn (selector), thuộc tính (property) và giá trị (value): selector {property: value}  đối tượng lựa chọn thường là các HTML element/tag.  thuộc tính là tính chất của các HTML element/tag.  mỗi thuộc tính có thể mang một giá trị body {color: black} Generated by Foxit PDF Creator © Foxit Software For evaluation only. 47 Công cụ Web Cascading Style Sheets Cú pháp CSS (tiếp theo) Nếu giá trị gồm nhiều từ, phải đặt trong dấu “”: p {font-family: "sans serif"} Chú ý: Nếu có nhiều thuộc tính, phải được ngăn cách bởi dấu chấm phẩy. p {text-align: center; color: red} Để dễ đọc có thể đặt mỗi thuốc tính ở một dòng: p { text-align: center; color: black; font-family: arial} 8 Công cụ Web Cascading Style Sheets Nhóm (Grouping) Ta có thể nhóm các selector lại. Mỗi selector được ngăn cách bởi dấu phẩy. h1, h2, h3, h4, h5, h6 { color: green } Generated by Foxit PDF Creator © Foxit Software For evaluation only. 59 Công cụ Web Cascading Style Sheets Class Selector  Với class selector ta có thể định nghĩa các styles khác nhau cho cùng một loại HTML element. p.right {text-align: right} p.center {text-align: center} Ta có thể sử dụng class attribute trong HTML document như sau: Đoạn văn bản sẽ được canh phải. Đoạn văn bản sẽ được canh giữa. 10 Công cụ Web Cascading Style Sheets Class Selector (tiếp theo) Chú ý: Chỉ có một class attribute được xác định cho một HTML element. Ví dụ dưới đây sai: xxxxx  Ta có thể bỏ qua tên thẻ (tag name) trong class selector để định nghĩa một style để dùng cho tất cả các HTML element có cùng class .center {text-align: center} Ta có thể khai báo trong HTML document như sau: xxxxx xxxxx Generated by Foxit PDF Creator © Foxit Software For evaluation only. 611 Công cụ Web Cascading Style Sheets id Selector  id selector khác với class selector! Trong khi một class selector có thể áp dụng cho nhiều HTML element trong một trang web thì một id selector chỉ luôn được áp dụng cho một HTML element.  Thuộc tính ID phải được xác định duy nhất bên trong một văn bản web. p#para1{ text-align: center; color: red } 12 Công cụ Web Cascading Style Sheets id Selector (tiếp theo)  style dưới đây được định nghĩa cho HTML element đầu tiên có id là "wer345": *#wer345 {color: green}  style dưới đây được định nghĩa cho phần tử h1 có id là "wer345": xxxxx  style dưới đây được định nghĩa cho phần tử p có id là "wer345": p#wer345 {color: green} style đó không được định nghĩa cho phần tử h2 có id là "wer345": xxxxx Generated by Foxit PDF Creator © Foxit Software For evaluation only. 713 Công cụ Web Cascading Style Sheets Chú thích (Comment) Ta có thể chèn các chú thích vào trong các đoạn CSS để giải nghĩa cho code. Chú thích sẽ được trình duyệt bỏ qua. Một chú thích trong CSS bắt đầu bằng "/*", và kết thúc bằng "*/“: p { text-align: center; /* Chú thích đặt ở đây */ color: black; font-family: arial } 14 Công cụ Web Cascading Style Sheets External Style Sheet  External style sheet được sử dụng thích hợp khi một style được áp dụng cho nhiều trang web. Khi cần thay đổi ta chỉ việc thay đổi trong external style sheet.  Mỗi trang phải liên kết đến external style sheet bằng cách sử dụng thẻ . Thẻ được đặt bên trong thẻ : <link rel="stylesheet" type="text/css" href="mystyle.css"/> Trình duyệt sẽ đọc style được định nghĩa trong tập tin mystyle.css, và định dạng văn bản web theo. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 815 Công cụ Web Cascading Style Sheets External Style Sheet (tiếp theo)  Một external style sheet có thể được viết bởi bât kỳ trình soạn thảo văn bản (text editor).  Tập tin đó phải không chứa bất kỳ html tags.  external style sheet phải được lưu dưới dạng tập tin có phần mở rộng là .css hr {color: sienna} p {margin-left: 20px} body { background-image:url("images/back40.gif") } 16 Công cụ Web Cascading Style Sheets Internal Style Sheet  Internal style sheet được sử dụng khi một trang web đơn có một style duy nhất.  internal style sheet được khai báo bằng thẻ đặt bên trong thẻ : hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} Trình duyệt sẽ định dạng trang web theo style được định nghĩa. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 917 Công cụ Web Cascading Style Sheets Inline Styles  Inline style mất nhiều lợi điểm của CSS do pha trộn nội dung với hình thức thể hiện. Inline style được áp dụng cho từng HTML element riêng lẻ.  Để sử dụng inline styles ta sử dung thuộc tính style của thẻ. Thuộc tính style có thể chứa bất kỳ tính chất CSS. abcdef 18 Công cụ Web Cascading Style Sheets Multiple Style Sheets  Nếu một vài thuộc tính được thiết lập cho cùng selector trong nhiều style sheet khác nhau, giá trị sẽ được thừa kế từ nhiều style sheet. Ví dụ, một external style sheet định nghĩa tính chất của h3 selector như sau: h3 { color: red; text-align: left; font-size: 8pt } Generated by Foxit PDF Creator © Foxit Software For evaluation only. 10 19 Công cụ Web Cascading Style Sheets Multiple Style Sheets (tiếp theo) và một internal style sheet cũng định nghĩa tính chất của h3 selector như sau: h3 { text-align: right; font-size: 20pt } nếu trang web có internal style sheet này đồng thời liên kết đến external style sheet trên thì tính chất của h3 selector sẽ là: color: red; text-align: right; font-size: 20pt 20 Công cụ Web Cascading Style Sheets CSS Text h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} header 1 header 2 paragraph Generated by Foxit PDF Creator © Foxit Software For evaluation only. 11 21 Công cụ Web Cascading Style Sheets CSS Backcolor body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} This is header 1 This is header 2 This is a paragraph 22 Công cụ Web Cascading Style Sheets CSS Font h3 {font-family: times} p {font-family: courier} p.sansserif { font-family: sans-serif} This is header 3 This is a paragraph This is a paragraph Generated by Foxit PDF Creator © Foxit Software For evaluation only. 12 23 Công cụ Web Cascading Style Sheets CSS List ul.disc {list-style-type: disc } ul.circle {list-style-type: circle} ul.square{list-style-type: square} ul.none {list-style-type: none} Coffee Tea Coca Cola Coffee Tea Coca Cola 24 Công cụ Web Cascading Style Sheets CSS Border p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} The "border-style" property is not recognized by Netscape 4. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 13 25 Công cụ Web Cascading Style Sheets CSS Border (tt) Netscape 6 supports all border styles. Internet Explorer 5.5 supports all border styles. Internet Explorer 4.0 - 5.0 do not support the "dotted" and "dashed" values A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border 26 Công cụ Web Cascading Style Sheets CSS Border (tt) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 14 27 Công cụ Web Cascading Style Sheets CSS Margin p.margin {margin-left: 2cm} This is a paragraph This is a paragraph This is a paragraph This is a paragraph This is a paragraph with a left margin This is a paragraph with a left margin 28 Công cụ Web Cascading Style Sheets CSS Margin (tt) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 15 29 Công cụ Web Cascading Style Sheets CSS Padding td {padding-left: 2cm} This is a tablecell with a left padding 30 Công cụ Web Cascading Style Sheets CSS Padding (tt) td {padding-left: 2cm} This is a tablecell with a left padding Generated by Foxit PDF Creator © Foxit Software For evaluation only. 16 31 Công cụ Web Giới thiệu DHTML  DHTML (Dynamic HTML) có thể được định nghĩa như là một phần mềm kết hợp giữa HTML, style sheets và scripts để cho văn bản trên trang web sống động.  Để hiện thực DHTML, Microsoft sử dụng CSS (Cascading Style Sheets) trong khi Netscape sử dụng Layer 32 Công cụ Web Các đặc trưng của DHTML  Kiểu dáng định dạng động (Dynamic Styles)  Nội dung động (Dynamic Content)  Định vị nội dung động (Dynamic Positioning)  Liên kết dữ liệu (Data Binding)  Tải font (Downloadable Fonts)  Kịch bản (Scripting)  Cấu trúc đối tượng (Object Structure) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 17 33 Công cụ Web Giới thiệu Layer  Layer là một phần tử được thêm vào trang web. Chúng ta có thể xác định chính xác vị trí của một layer trên trang web.  Đề xác định vị trí của một phần tử trên trang web chúng ta sử dụng tọa độ x,y.  Để định vị một phần tử nằm trên hay nằm dưới một phần tử một phần tử khác trong layer chúng ta sử dụng tọa độ z. 34 Công cụ Web Sử dụng Layer Sử dụng styles  Chúng ta có thể dùng cú pháp CSS để định nghĩa style cho layer. Thuộc tính position sẽ xác định vị trí của layer. Giá trị của thuộc tính position có thể là:  Absolute: chỉ ra vị trí tuyệt đối của layer.  Relative: chỉ ra vị trí tương đối của layer.  Dùng phần tử DIV hoặc SPAN Generated by Foxit PDF Creator © Foxit Software For evaluation only. 18 35 Công cụ Web Sử dụng Layer (tiếp theo) Sử dụng thẻ Layer  Thẻ Layer được sử dụng để xác định nội dung và vị trí của HTML content. Ta có thể sử dụng JavaScript để điều khiển layer.  Layer là một đối tượng, nó cũng có các thuộc tính (properties), phương thức (methods) và sự kiện (events) để chúng ta thao tác và xử lý. 36 Công cụ Web Các thuộc tính của đối tượng Layer chiều caopixels | tỉ lệ %height chiều rộngpixels | tỉ lệ %width màu nềnRGB | tên màubgcolor pixelsleft pixelstop định danhstringid vị tríabsolute | relativeposition Mô tảGiá trịThuộc tính Generated by Foxit PDF Creator © Foxit Software For evaluation only. 19 37 Công cụ Web Các thuộc tính của đối tượng Layer (tiếp theo) top, bottom,left, right, width, height clip tênstringname document URLsrc số dươngz-index show | hide | inheritvisibility Mô tảGiá trịThuộc tính 38 Công cụ Web Các phương thức của đối tượng Layer tải thông tin từ sourcestring với độ rộng width load(sourcestring,width) di chuyển xuống phía dưới layer khácmoveBelow(layer) di chuyển lên phía trên layer khácmoveAbove(layer) thay đổi kích thước theo width,heightresizeTo(width,height) thay đổi kích thước một đoạn dwidth,dheight resizeBy(dwidth,dheight) di chuyển đến vị trí x,y (tuyệt đối)moveToAbsolute(x,y) di chuyển đến vị trí x,ymoveTo(x,y) di chuyển một đoạn dx,dymoveBy(dx,dy) Mô tảPhương thức Generated by Foxit PDF Creator © Foxit Software For evaluation only. 20 39 Công cụ Web Các sự kiện của đối tượng Layer (tiếp theo) khi tải nội dung thông tinOnLoad khi đối tượng mất focusOnBlur khi đối tượng nhận focusOnFocus di chuyển chuột khỏi đối tượngOnMouseOut di chuyển chuột trên đối tượngOnMouseOver Mô tảSự kiện 40 Công cụ Web Sử dụng JavaScript Chúng ta có thể viết script để:  Thay đổi màu sắc, kích thước, nội dung và vị trí của layer.  Tạo automation trên trang web như làm di chuyển các layer, thay đổi z-order để tạo các hiệu ứng đặc biệt.  Làm ẩn hoặc hiện các layer. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 21 41 Công cụ Web Sử dụng JavaScript (tiếp theo) Sử dụng thuộc tính và phương thức:  Mỗi đối tượng document có một thuộc tính layers chứa một mãng các top-level layers trong document.  Mỗi layer lại có một thuộc tính document.  Thuộc tính document có:  Một mãng layer chứa tất cả các top- level layer  Một mãng image chứa tất cả các image  Các mãng chứa các applet, embed, link và name anchor. 42 Công cụ Web Sử dụng JavaScript (tiếp theo) Truy xuất layer bằng JavaScript:  Dùng name hoặc id của layer: document.layername hoặc: document.layers[layername]  Dùng index của layer: document.layers[index] (index được đánh chỉ số từ 0,1,2)  Thuộc tính length chứa chứa số lượng layer trong một document hoặc một mãng layer document.layers.length document.layers[layer1].document.layers.length Generated by Foxit PDF Creator © Foxit Software For evaluation only. 22 43 Công cụ Web Sử dụng JavaScript (tiếp theo) Truy xuất thuộc tính của đối tượng layer: layerObject.propertyName Ví dụ: document.layers[layer1].visibility = hidden Sử dụng phương thức của đối tượng layer: layerObject.methodName(args) Ví dụ: document.layer1.moveBy(10,10) 44 Công cụ Web Sử dụng JavaScript (tiếp theo) Viết script bên trong layer: Move the mouse over the layer and see what happens <layer id=“layer1” bgcolor=“lavender” onMouseOver=‘changeColor(“limegreen”);’ onMouseOut=‘changeColor(“red”);’> Layer content function changeColor(newcol){ bgColor=newcol; return false; } Generated by Foxit PDF Creator © Foxit Software For evaluation only. 23 45 Công cụ Web Sử dụng Dynamic Content Dynamic Content trong Internet Explorer Chúng ta có thể thay đổi nội dung của một trang web một cách linh động bằng cách dùng inline style hoặc script, hoặc cả hai. Inline style mang lại khả năng thay đổi kiểu dáng của nội dung một các uyển chuyển. Tuy nhiên để thay thế, chèn hoặc xóa text chúng ta phải dùng script. Để truy xuất các phần tử HTML, chúng ta sử dụng thuộc tính ID 46 Công cụ Web Dynamic Content trong Internet Explorer Thay thế Text (replacing text) Các thuộc tính innerText và outerText của một phần tử được dùng để thay đổi text của phần tử đó. Object.innerText = “Text string” Object.outerText = “Text string” Trong đó: Object: phần tử HTML cần thay đổi text Text string: Text mới dùng để đặt trong phần tử đó Ví dụ: thay đổi text, xóa text, thay đổi heading Generated by Foxit PDF Creator © Foxit Software For evaluation only. 24 47 Công cụ Web Dynamic Content trong Internet Explorer (tiếp theo) Chèn Text (inserting text) Cú pháp: Object.InsertAdjacentText(where, text) Trong đó: where: vị trí chèn vào text: chuỗi cần chèn Ví dụ: ex1, ex2 chèn vào sau phần tử HTMLAfterEnd chèn vào cuối phần tử HTMLBeforeEnd chèn vào đầu phần tử HTMLAfterBegin chèn vào trước phần tử HTMLBeforeBegin 48 Công cụ Web Dynamic Content trong Internet Explorer (tiếp theo) Thay thế HTML (replacing HTML) Các thuộc tính innerHTML và outerHTML được dùng để thay thế phần tử HTML của trang web. Object.innerHTML[ = innerHTML] Object.outerHTML[ = outerHTML] Trong đó: innerHTML: thay thế bên trong thẻ đóng và thể mở outerHTML: thay thế tất cả Ví dụ: ex1, ex2, ex3 Generated by Foxit PDF Creator © Foxit Software For evaluation only. 25 49 Công cụ Web Dynamic Content trong Internet Explorer (tiếp theo) Chèn các phần tử (inserting elements) Cú pháp: Object.InsertAdjacentHTML(where, text) Trong đó: where: vị trí chèn vào text: chuỗi cần chèn Ví dụ chèn vào sau phần tử HTMLAfterEnd chèn vào cuối phần tử HTMLBeforeEnd chèn vào đầu phần tử HTMLAfterBegin chèn vào trước phần tử HTMLBeforeBegin 50 Công cụ Web Dynamic Content trong Netscape Có nhiều cách để chúng ta thay đổi thông tin linh động trong Netscape:  Thay đổi source file của nội dung hiển thị trên layer.  Sử dụng phương thức write() document.write() Generated by Foxit PDF Creator © Foxit Software For evaluation only. 26 51 Công cụ Web Sử dụng Time Chúng ta có thể sử dụng script để thay đổi nội dung nhằm đáp ứng sự tương tác của người sử dụng hoặc trong một khoảng thời gian định trước được xác định bởi hệ thống.  Phương thức setTimeout() của đối tượng window được dùng để thực thi các câu lệnh đặc biệt ở một khoảng thời gian định trước. Phương thức clearTimeout() dùng để hủy. var timerID = setTimeout(expression, msecs) clearTimeout(timerID)  Phương thức setInterval() cũng được dùng để thực thi các câu lệnh đặc biệt ở một khoảng thời gian định trước. Phương thức clearInterval() dùng để hủy. var timerID = setInterval(expression, msecs) clearInterval(timerID) Ví dụ 52 Công cụ Web Sử dụng Dynamic Positioning Vị trí (positioning) là nơi đặt một phần tử HTML tại vùng đã được xác định trên trang web. Thông thường trình duyệt sẽ xác định kích thước và vị trí của các phần tử dựa trên nội dung của nó và ngữ cảnh. DHTML cho phép chúng ta dễ dàng xác định vị trí các phần tử bằng pixel.  Vị trí (positioning) được xác định theo tọa độ x,y  Vị trí tương đối (absolute positioning)  Vị trí tuyệt đối (relative positioning)  Sự xếp chồng (overlapping): được xác định theo tọa độ z. Generated by Foxit PDF Creator © Foxit Software For evaluation only. 27 53 Công cụ Web Các thuộc tính của Style Vị trí của phần tử theo z-orderz-index chiều rộng của phần tử (pixel | %)width visible | hidden | inheritvisibility absolute | relativeposition none | clip | scrolloverflow vị trí cách góc trái trên cùng của trang webtop and left chiều cao của phần tử (pixel | %)height dùng để đánh dấu khu vực của phần tửclip Mô tảThuộc tính 54 Công cụ Web Cách dùng Dynamic Positioning  Di chuyển phần tử tại một khoảng thời gian xác định bằng phương thức setInterval() của đối tượng window. Ví dụ  Đáp ứng sự kiện do người sử dụng tạo ra. Ví dụ Generated by Foxit PDF Creator © Foxit Software For evaluation only. 28 55 Công cụ Web Sử dụng Special Effects  Có nhiều cách để đưa các hiệu ứng đặc biệt (Special Effects).  Internet Explorer hỗ trợ việc sử dụng các bộ lọc (filters), các chuyển dịch (transitions) và các kiểu dáng (styles).  Netscape hỗ trợ việc sử dung các layer linh động (layers dynamically). 56 Công cụ Web Sử dụng các bộ lọc (Filters)  Mỗi filter là một điều khiển (control) được áp dụng trên một phần tử HTML. Thuộc tính filter được dùng trong việc liên kết với thuộc tính style để lưu trữ hiệu ứng mong muốn. Object Style = “filter:filtername (parameter of the filter)”  Filter chỉ được áp dung cho các phần tử có dạng khối chử nhật như: , , , , , , , , , , , , , . Các phần tử , phải có chiều rộng và chiều cao xác định hoặc có vị trí tuyệt đối (absolute position) Generated by Foxit PDF Creator © Foxit Software For evaluation only. 29 57 Công cụ Web Sử dụng các bộ lọc (tiếp theo) lật dọc đối tượngFlipV lật ngang đối tượngFlipH color, offx, offy, positive tạo hình chiếu lập thể của đối tượng DropShadow colorlàm 1 màu trong suốtChroma add, direction, strength làm cho đối tượng xuất hiện với tốc độ cao Blur opacity, finishopacity, style, startx, starty, finishx, finishy thiết lập mức trong suốt (transparency) của đối