Giáo trình Ngôn ngữ html

NGÔN NGỮ HTML Giới Thiệu HTML (Hypertext Markup Language) là một sự định dạng dựa trên ngôn ngữ đánh dấu chuẩn (GML - General Markup Language). Ngôn ngữ GML được tạo ra từ năm 1969, từ ý tưởng đơn giản là tách biệt nội dung và hình dạng của tài liệu. Định dạng của HTML cho phép trình duyệt Web hiển thị các tài liệu, các tài liệu này bao gồm cả Media. Bản thân một tài liệu HTML chỉ là những tập tin văn bản đơn giản (ASCII) với những thẻ (tag) hoặc những dòng mã đặc biệt mà một trình duyệt web biết cách thông dịch và hiển thị trên màn hình. Phần lớn các chuẩn về trình duyệt và các công nghệ liên quan đến Web đều được phát triển bởi World Wide Web Consortium (W3C) - một tổ chức chuẩn độc lập được thành lập vào năm 1994. Ta có thể tìm kiếm các thông tin của W3C và công việc của tổ chức này tại Website: www.w3c.org. Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet Các Thành Phần Của Trang HTML Thẻ HTML. Khi một trình duyệt web hiển thị một trang HTML, trình duyệt sẽ đọc file HTML này và tìm kiếm những đoạn mã đặc trưng trong file gọi là thẻ (tag). Các thẻ HTML được đánh dấu bởi ký hiệu "". Dạng chung của một thẻ HTML là: Chuỗi văn bản, Media Ví dụ: HTML Thẻ này () báo cho trình duyệt hiển thị đoạn văn bản HTML là chữ in đậm. Các thẻ HTML báo cho trình duyệt biết khi nào thì cần in đậm, in nghiêng văn bản, làm văn bản trở thành HEADER, liên kết đến một trang khác, - Trong thẻ HTML thì giữa "<" và tag_name phải được viết liền (giữa chúng không có khoảng trắng). - Thông thường một thẻ HTML đều có một thẻ đóng . Trong thẻ đóng có chứa ký tự "/", ký tự này báo cho trình duyệt biết hiệu lực của thẻ này kết thúc tại đây. Hầu hết các thẻ HTML đều có thẻ kết thúc. - Mỗi thẻ HTML có thể có một, nhiều hoặc không có thuộc tính. Mỗi thuộc tính có thể có các giá trị hoặc không có các giá trị. Nếu có giá trị thì các giá trị này thường được đặt trong cặp dấu ngoặc kép. - Các thẻ HTML có thể được viết bằng chữ thường hay chữ hoa. Trình duyệt web không phân biệt định dạng này. - Không giống như lập trình trong các ngôn ngữ khác, với trang HTML, nếu có một lỗi, trang Web vẫn được hiển thị mặc dù có thể không đúng ý đồ của nhà thiết kế. - Trình duyệt web có các bộ từ vựng các tag mở, do vậy đôi khi một tag được nhận biết bởi trình duyệt này nhưng lại không được nhận ra bởi trình duyệt khác. Khi trình duyệt không hiểu một tag nào đó, nó sẽ tự động bỏ qua tag đó và chỉ thông dịch phần còn lại. Cấu Trúc Của Một Trang Tài Liệu HTML Một tài liệu HTML tổng quát được trình bày như sau: Nội dung header nội dung BODY - Một tài liệu HTML gồm 2 phần riêng biệt. Phần đầu (HEAD) và phần thân (BODY). Phần đầu chứa những thông tin về tài liệu và không được hiển thị trên màn hình. Phần thân chứa tất cả các thành phần là những thứ được hiển thị như là một phần của trang web. - Toàn bộ công việc để tạo một trang HTML nằm trong cặp thẻ và . Bên trong cặp thẻ này là cặp thẻ và . Trang web của chúng ta có thể vẫn hiển thị tốt mà không cần các thẻ này, tuy nhiên bằng cách sử dụng chúng, trang web của ta sẽ đảm bảo hoàn toàn tương thích với chuẩn quốc tế của HTML và chắc chắn sẽ tương thích với các trình duyệt web khác ở hiện tại cũng như ở tương lai. Đây cũng là một thói quen tốt. - Các chú thích HTML được bao bởi . Dòng văn bản giữa cặp thẻ này không được hiển thị trong trang web. Khi dịch, trình duyệt sẽ bỏ qua các thành phần nằm trong cặp dấu chú thích . Việc đặt những chú thích là rất hữu ích đối với các trang web phức tạp. - Trình duyệt web bỏ qua các khoảng trắng đầu dòng, những dòng trống. Do vậy khi viết thẻ HTML, ta có thể canh chỉnh các thẻ, tạo các dòng trống ngăn cách các chú thích, sao cho dễ quản lý mà không sợ ảnh hưởng đến nội dung, hình thức hiển thị của trang Web. Các chuẩn HTML qui định, mỗi ký tự xuống hàng sẽ được xem như một khoảng trắng. Một chuỗi các ký tự khoảng trắng được xem như một khoảng trắng. - Một trang HTML cơ bản được đặt tên với phần mở rộng là HTM hoặc HTML. Trình duyệt sẽ nhận biết các tài liệu HTML qua các phần mở rộng của file. Các Thẻ Cơ Bản. Các Định Dạng Văn Bản. Những Tiêu Đề Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tsg tiêu đề (heading tag). Dạng các tag tiêu đề của HTML là: Text Appear in Heading x là một số có giá trị từ 1 đến 6 chỉ định kích cỡ của tiêu đề. Các tiêu đề được sắp xếp từ (quan trọng nhất) đến 6 (ít quan trọng nhất). Các dòng hiển thị các giá trị cho các heading từ 1 đến 6 như sau. a) Mã HTML cho hiển thị trên là: Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Thẻ này có một thuộc tính là align có các giá trị: Left, Right, Center dùng để cách chỉnh văn bản về bên trái, phải, giữa của trình duyệt. Ví dụ Heading 2 - Center Chia Đoạn Văn Bản Và Xuống Dòng Một trình duyệt web sẽ bỏ qua tất cả các ký tự xuống dòng (carriage returns) được đánh trong trình soạn thảo. Tuy nhiên khi trình duyệt gặp 2 thẻ và nó sẽ xuống dòng để bắt đầu một dòng mới. Sự khác biệt giữa 2 thẻ này là sẽ xuống dòng, sẽ chèn một dòng trống và xuống dòng, hơn nữa thẻ không có thẻ kết thúc trong khi có thể có và thẻ còn có thuộc tính giống như thẻ Heading là align để cho phép canh chỉnh văn bản trong đoạn. Nếu không có thẻ thì đoạn văn bản trong thẻ cũng bị chấm dứt khi gặp thẻ mới. Thẻ còn có một thuộc tính khác là align có các giá trị left (mặc định), center và right cho phép canh chỉnh văn bản trong đoạn trong cửa sổ trình duyệt. Tạo đường kẻ Thẻ sẽ tạo một đường kẻ ngang qua trang Web. Có hai thuộc tính thường dùng là size và width. Thuộc tính size sẽ xác định kích thước của đường thẳng (tính bằng pixel) với giá trị mặc định là 2 và width kiểm soát chiều rộng đường kẻ. Ta có thể thiết lập giá trị cho WIDTH theo pixel hay theo tỷ lệ % của cửa sổ trình duyệt. Thẻ này không có thẻ kết thúc. Làm việc với các kiểu mẫu (Style) HTML cung cấp một số thẻ cho việc định dạng văn bản như in đậm, nghiêng, Có thể liệt kê một số thẻ cơ bản như sau: HTML tag Kết quả This is Bold (vi) This is Bold This is Italic (vii) This is Italic This is Typewriter This is Typewriter This is Underline a. This is Underline Ta cũng có thể kết hợp các tag này để định dạng, miễn chúng được lồng vào nhau một cách chính xác. Ta cũng có thể áp dụng các kiểu mẫu vào trong các tiêu đề. Một Số Thẻ Fortmatting Khác - : Chèn một khối văn bản được trình bày thụt vào trong so với phần thân văn bản. Theo cách viết truyền thống, một đoạn trích dẫn của ba hay nhiều câu được làm nổi bật hơn so với đoạn văn bản chính bằng cách trình bày như một khối văn bản thụt vào trong (indented block of text). Với trang HTML, đưa văn bản vào cặp thẻ text để tạo chức năng này. - : Thông thường trong các trang Web, tại phần cuối (footer) thường có vùng cung cấp thông tin về tác giả và tài liệu. Đoạn văn bản này thường được đặt trong các dòng trong thẻ , khi đó nó sẽ được hiển thị với kiểu chữ in nghiêng. Các thông tin hữu ích cần mô tả ngắn gọn trong footer thường là: Tiêu đề hay chủ đề trang hiện tại. Ngày tạo và ngày cập nhật. Chủ quyền. Tên email, tác giả trang web. Tên và liên kết tới văn bản nguồn gốc tổ chức. - Thẻ : Ta sử dụng tag này để thiết lập font chữ mặc định cho toàn bộ trang web và không có thẻ kết thúc. Thẻ này có các thuộc tính là face="font chữ", size="kích thước" của chữ. Kích thước văn bản có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất). Tất cả các đoạn văn bản không nằm trong thẻ font nào sẽ sử dụng font chữ của thẻ fontbase. Thẻ này cũng chỉ hết hiệu lực khi gặp thẻ fontbase khác.Thẻ này còn có tác dụng tốt trong thiết lập lại kích thước của font chữ theo tính tương đối của thẻ font. - Thẻ : dùng để thiết lập các thuộc tính về font chữ được hiển thị trên trang web. Các thuộc tính của thẻ này bao gồm: size: Kích cỡ của chữ. Giá trị thuộc tính này có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất). Ví dụ: . Ngoài cách thiết lập giá trị dạng tuyệt đối cho font chữ như trên, ta còn có thể thiết lập giá trị tương đối bằng cách dựa vào giá trị kích cỡ đã có sẵn trước đó bằng cách thêm dấu "+" (tăng) hoặc "-" (giảm) vào trước giá trị của thuộc tính size. Ví dụ: sẽ tăng kích thước của font chữ lên 2 giá trị so với font chữ hiện tại. Thiết lập thuộc tính dạng tương đối này sẽ rất hữu ích khi ta thay đổi kích thước font chữ so với giá trị trong thẻ basefont. Ví dụ nếu ta muốn tăng kích cỡ font chữ của trang lên 1 đơn vị, ta chỉ cần thay đổi lại giá trị trong thẻ basefont (thường được sử dụng một lần trong một trang) mà không cần thay đổi lại trong tất cả các thẻ font của trang. Face: Tên của font chữ được xác định để hiển thị văn bản trên trình duyệt. Color: Màu sắc của font chữ. Ta sử dụng thuộc tính này khi cần thiết lập màu riêng biệt cho đoạn văn bản trong thẻ font. Thông thường màu văn bản được xác định trong thẻ hoặc sử dụng màu mặc định của trình duyệt. Giá trị của thuộc tính này cũng giống như tất cả các thuộc tính xác định màu sắc khác của trang web, đó là ta có thể sử dụng các màu hằng hoặc các giá trị của hệ màu RGB theo dạng số hexa để thiết lập một màu sắc nhất định. Các ví dụ về thẻ font. ------------------Ví dụ 1--------------------- Font size:4 - color:red - face:vni-times Font size:6 - color: ff0000 - face:arial Font size:2 - color:red - face:vni-times Font size:4 - color:red - face:vni-times ------------------Ví dụ 2--------------------- Font size=1 Font size=2 Font size=3 Font size=4 Font size=5 Font size=6 Font size=7 chữ Ngoài thẻ font Ngoài thẻ font size=6 ngoài thẻ font size=7 font size=2 - : Hiển thị dạng chữ đánh máy và giữ nguyên các khoảng trắng và dấu xuống dòng. - : Văn bản trong thẻ này sẽ được viết dưới dạng Subscript. Đây là văn bản được in hơi thấp hơn dòng chữ thường. - : Văn bản trong thẻ này sẽ được viết dưới dạng Supperscript. Đây là văn bản được in hơi cao hơn dòng chữ thường. - và : Đoạn văn bản nằm trong thẻ sẽ có font-size dạng chữ lớn hoặc nhỏ tương ứng. - : Văn bản nằm giữa hai thẻ này sẽ chạy qua chạy lại tuỳ theo các giá trị thuộc tính được thiết lập. Một số thuộc tính của Marquee là: Direction: Có giá trị bằng Left hoặc Right là hướng chuyển động của văn bản. ScrollDelay: Giá trị nguyên dương này là số mili giây văn bản ngừng trước khi chuyển động tiếp. Giá trị càng nhỏ, chuyển động càng nhanh. Behavior: Loại chuyển động của text. Scroll, Slide, Alternate Align With text: Đoạn văn bản được canh chỉnh trong vùng diện tích của marquee. Có 3 giá trị: Top, Middle, Bottom. Loop: Giá trị nguyên thiết lập số chu kỳ chuyển động của đoạn văn bản. Ví dụ Chào mừng bạn đã đến website của chúng tôi Chèn Hình Ảnh Vào Trang HTML Có nhiều hình ảnh được hỗ trợ trên Internet như: *.PICT, *.GIF, *.TIFF, *.BMP, *.JPG, *.JPEG và các hình ảnh này độc lập với flatform. Tuy nhiên dạng chuẩn hiển thị trong một trang web là GIF (Graphics Interchange Format). GIF nén các thông tin của hình ảnh (làm giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để chuyển qua mạng Internet. Kỹ thuật nén dạng GIF có hiệu quả cao nhất khi hình ảnh có những vùng liên tục cùng màu và việc nén càng lớn khi có sự lặp lại màu theo chiều đứng. Một dạng hình ảnh khác thường hay được sử dụng trong web là JPG hoặc JPEG (được đặt tên sau khi nhóm Joint Photographic Engineering Group thiết kế ra dạng này). Kỹ thuật nén JPEG rất có hiệu quả với các ảnh chụp có màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh. Tuỳ thuộc vào chất lượng ảnh, JPEG cung cấp các hệ số nén về kích thước rất ấn tượng. - Có nhiều chương trình đồ hoạ có sẵn chức năng lưu trữ tập tin theo dạng tuỳ chọn. Ta nên lưu theo hai loại và so sánh kích thước và chất lượng ảnh để quyết định sử dụng hình này loại nào. Một vài tiện ích cho đồ hoạ cho phép các chuyển đổi này như: GIFConverter, WinGif - Khi thiết kế trang web có hình, nên lưu ý để trang thiết kế có dung lượng không lớn quá. Dung lượng của trang được tính gộp tất cả các hình chèn vào trang chứ không phải chỉ tính phần văn bản HTML. - Thường khi thiết kế web, ta tạo một thư mục riêng để lưu trữ các hình ảnh cho phép quản lý dễ dàng toàn bộ Web Site. - Để chèn một hình ảnh vào trang web, sử dụng thẻ . Thẻ này không có thẻ kết thúc. Trong thẻ này có nhiều thuộc tính như sau: SRC: có giá trị là đường dẫn của file hình ảnh. Đường dẫn này thường được xác định là các đường dẫn tương đối hoặc đường dẫn đầy đủ từ một website khác. Với đường dẫn tương đối, để truy cập đến thư mục cấp cha ta sử dụng hai dấu chấm và dấu xổ :"../". Ví dụ: Chèn hình h1.gif trong thư mục con Images. Chèn h1.gif từ thư mục ngang hàng với thư mục hiện hành tên là Images. Chèn hình h1.gif trong thư mục images của website có domain là microsoft.com . Các thuộc tính khác: Align: có các giá trị top, middle, bottom (mặc định), left, center, right sẽ điều khiển vị trí của văn bản so với hình ảnh trong hàng. Alt="text": là đoạn văn bản hiển thị tại vị trí hình trong các trường hợp: khi người sử dụng trình duyệt không hỗ trợ hình, tắt việc trình bày hình ảnh trong trình duyệt, khi hình chưa được tải xong, Khi đưa con trỏ vào vùng hình ảnh. Width, Height: Có giá trị là các số nguyên, là giá trị xác định chiều rộng và chiều cao của hình theo pixels. Ta có thể đưa các giá trị kích thước này khác với kích thước thật của hình ảnh, tuy nhiên có thể hình ảnh sẽ bị biến dạng hoặc xuất hiện những khối màu ngoài vùng kích thước thật. Thông thường, khi không xác định chiều rộng và chiều cao, trình duyệt sẽ hiển thị một hình ảnh đồ hoạ thay thế mặc định với một kích thước cố định cho đến khi nó tải xuống xong hình ảnh cần hiển thị. Sau đó hình ảnh sẽ được thay đổi đến kích thước của hình chính. Điều này sẽ làm cho nội dung trong cửa sổ được định vị lại. Khi xác định hai thuộc tính này thì trình duyệt dành một chỗ trên màn hình trước khi ảnh được tải xuống. Điều này có thể làm trang web được thể hiện một cách chính xác và nhanh chóng hơn. Hspace: Khoảng cách tính bằng pixel của văn bản xuất hiện xung quanh tới hai biên dọc của hình ảnh. Vspace: Giống như thuộc tính trên nhưng tính theo chiều đứng. Border: thiết lập đường biên cho ảnh tính theo pixel. Nếu không muốn thấy biên, ta cho giá trị bằng 0. Màu Sắc Và Cấu Trúc Cho Nền - Trong một trình duyệt web, ta được sử dụng các màu của hệ thống để tạo màu cho văn bản và cho nền của trang web. Mỗi màu được xác định dựa trên các giá trị Red-Green-Blue (RGB) của nó. Ba số này có gía trị (viết theo hệ thập phân) từ 0 tới 255, mỗi số thể hiện cường độ của thành phần màu theo thứ tự Red-Green-Blue. Giá trị lớm nhất của cả 3 (255-255-255) sẽ cho ra màu trắng và giá trị nhỏ nhất (0-0-0) sẽ cho ra màu đen. Tất cả các màu được biểu diễn bởi bộ ba RGB khác nhau. - Các màu được thiết lập trong tài liệu HTML bằng các số hexa có dạng #xxyyzz. Trong đó x, y, z là các giá trị từ 0 đến F. xx là giá trị của màu red, yy là của màu Green và zz là màu Blue. - Ta cũng có thể sử dụng các màu hằng số cơ bản được định nghĩa sẵn mà trình duyệt có thể hiểu được như: Blue, Green, Yellow, - Thẻ BODY cho phép ta thêm vào các thuộc tính về màu sắc của trang web. Trong đó mỗi giá trị x có giá trị từ 0 đến F. Bgcolor = màu nền. Text: Màu của văn bản trong phần thân trang web. Link: Màu sắc của các liên kết siêu văn bản. Màu mặc định là Blue. Vlink (Visitted Link): Màu sắc của một mục siêu liên kết đã được xem. Màu mặc định là Purple (tím). Ví dụ: Mau sau trong trang web link 1 link 2 Với thẻ BODY, ta còn có thể thay đổi nền trang web bằng một hình ảnh qua thuộc tính background. Ta cũng có thể chèn vào một ảnh nhỏ và trình duyệt sẽ "lợp" các bản sao liên tục các hình này vào trang web. . Một số điều cần chú ý: Kích thước hình cần chèn: Nên sử dụng các hình có kích thước càng nhỏ càng tốt. Hãy lựa chọn hình và màu văn bản sao cho có độ tương phản cao. Nếu trong thẻ Body có cả 2 thuộc tính bgcolor và background, khi hình nền trang chưa load xong, trang sẽ có màu bgcolor và màu sẽ chuyển thành hình nền khi trang nạp xong hình. Sử Dụng Hyperlink - Sức mạnh thật sự của Web là khả năng tạo ra những siêu liên kết (hyperlink) đến các thông tin liên quan. Những thông tin này có thể là những trang Web khác, những hình ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của gopher server, một trình log-in vào máy tính ở xa (remote computer), một tập hợp các phần mềm, FTP site. - WWW sử dụng một cách đánh địa chỉ gọi là URL (Uniform Resorce Locator) để chỉ ra những vị trí của những mục như vậy. Những liên kết này thường được biểu diễn bởi những chữ màu xanh có gạch dưới và được gọi là anchor. - Thẻ sẽ dùng để tạo các liên kết và có dạng như sau: Text link, media Ta có thể xem a là anchor, href là hypertext Reference. - Thuộc tính target: Target có giá trị được thiết lập như trong bảng dưới. Giá trị Ý nghĩa Name Nạp trang Web vào trong cửa sổ hay frame có tên là name. _blank Nạp trang Web vào cửa sổ mới không có tên. _parent Nạp trang web vào cửa sổ cha của trang hiện hành. _self Giá trị mặc định. Nạp trang web vào cửa sổ hiện hành. _top Nạp trang web vào cửa sổ cao nhất. Nếu thiết lập một tên trong target mà chưa được mở (trình duyệt không biết), khi đó trình duyệt sẽ tạo một cửa sổ mới (giống như _blank) để nạp trang liên kết, cửa sổ này được đặt tên là giá trị name mới tạo. Giá trị của của sổ này có ích trong trường hợp sử dụng các mã kích bản như javascript. Các giá trị hằng trong cột giá trị bảng trên phải viết bằng chữ thường. - Thuộc tính href: Đường dẫn của đối tượng được liên kết tới. Các giá trị của URL trong thuộc tính href. Ta có thể phân chia ra làm 2 loại liên kết. Liên kết đến các file trong cùng một website và liên kết đến các file trong website khác. Liên kết trong cùng website: Mọi giá trị URL đều là đường dẫn tương đối (ralative link - đường dẫn tính từ thư mục hiện hành, thư mục chứa liên kết đang soạn thảo) hoặc đường dẫn tính từ Domain. Tuy nhiên thường ít khi sử dụng đường dẫn từ domain name do không thuận tiện vì khi thiết kế ta thường chưa biết được địa chỉ Website chính thức. Khi sử dụng đường dẫn tương đối, với các liên kết tới thư mục cấp cao hơn, ta sử dụng cặp giá trị "../". Liên kết đến một file trong Website khác: Ta sử dụng đường dẫn URL tính từ domain name. Liên kết đến một bookmark trong cùng trang hay tơí một bookmark của trang khác: Bookmark là một vị trí được đánh dấu trong trang web. Từ một vị trí, ta có thể liên kết đến vị trí đã được đánh dấu này. Bình thường, khi liên kết tới trang, vị trí đầu tiên của trang sẽ được hiển thị ngay tại phần đầu cửa sổ trình duyệt mặc dù trang cần hiển thị dài hơn vùng cửa sổ. Tuy nhiên, khi ta liên kết đến bookmark, vị trí của bookmark sẽ được hiển thị trong vùng bắt đầu của cửa sổ mặc dù trang có nội dung hiển thị vượt quá vùng cửa sổ trình duyệt. Để liên kết đến bookmark, ta thêm dấu # và tên bookmark ngay sau giá trị của URL. Để tạo một bookmark, ta sử dụng thẻ tại vị trí cần tạo theo qui tắc sau: text. Để dễ hình dung, giả sử ta có cây thư mục như hình sau. Cây thư mục này là một Web site có domain là: www.abc.com. Trang f12.htm có nội dung như sau: -----------F12.htm-------------- something here. something ------ ------ chapter2 ------- Bảng ví dụ sau sẽ sử dụng thẻ để liên kết đến các thành phần khác. Code HTML Mã trong file Ý nghĩa Chöông 1 F12.htm - Liên kết nội đến vị trí có bookmark tên là chapter1 trong cùng trang. F11.htm - Liên kết là hình h1.gif đến trang f121.htm tại vị trí bookmark có tên chapter1 trong cùng thư mục. click Index.htm Liên kết đến trang f11.htm link F11.htm Liên kết đến trang f211.htm trang f21 F211.htm Liên kết đến trang f21.htm và sẽ nạp f21.htm vào cửa sổ mới nếu click vào liên kết này. download F211.htm Hiển thị cửa sổ để download tập tin a.zip Microsoft Liên kết đến trang chủ của máy chủ Microsoft. Trang web được nạp vào cửa sổ mới download - Hiển thị cửa sổ tải tập tin theo giao thức fpt My Email - Hiển thị trình soạn thảo thư để gửi tới địa chỉ xác định trong href. Frame Bằng cách dùng frame (khung), ta có thể ngắt trang web thành các vùng riêng biệt (cửa sổ) và thể hiện các tập tin HTML khác nhau trong mỗi vùng. Với cách này, mỗi vùng có thể chuyển sang trang web khác trong khi các vùng khác vẫn không thay đổi. Ta có thể tạo khung bằng cách dùng một hồ sơ định nghĩa tập khung - một tập tin HTML chỉ chứa các thông tin về cách thức phân chia trang web và các tập tin sẽ được hiển thị trong mỗi vùng tương ứng. Ví dụ. Frame Tập khung trong đoạn mã trên trỏ tới 3 hồ sơ trong html là:1.htm, 2.htm và 3.htm. Phía trong thẻ có thuộc tính COLS, ám chỉ rằng trang sẽ được chia thành nhiều cột, 3 giá trị của thuộc tính này sẽ xác định 3 cột: cột đầu tiên sẽ có chiều rộng bằng với 50% cửa sổ trình duyệt, cột thứ hai có chiều rộng là 70 pixel và cột thứ ba sẽ có chiều rộng bằng với phần còn lại của cửa sổ trình duyệt (được thể hiện bởi biểu tượng * ). Nếu ta thiết lập kích thước của khung bằng cách dùng tỉ lệ phần trăm, chúng sẽ co giãn tùy theo cửa sổ trình duyệt. Trong hình ta thấy các thanh phân cách giữa các cột, người dùng có thể kéo các thanh này để thay đổi kích thước của cột. Quay trở lại với đoạn mã, chú ý rằng phía trong tập khung, có các thẻ . Các thẻ này xác định các tập tin HTML mà trình duyệt sẽ hiển thị trong mỗi trình duyệt của khung. Các Thẻ tạo frame và thuộc tính: Thẻ: Frameset: Tạo một frame. Thuộc tính: - cols="gtrị 1, giá trị 2, ": Phân chia một frame thành các vùng con có số cột (cols) là số các giá trị trong cols. - rows="gtrị 1, giá trị 2, " : Phân chia một frame thành các vùng con có số dòng (rows) là số các giá trị trong rows. - FRAMEBORDER, FRAMESPACING: Thẻ Frame: Lồng trong frameset, xác định dữ liệu cho vùng cửa sổ hiện tại. Thuộc tính: - SRC: Xác định đường dẫn đến trang cần nạp - Name: Tên của frame. Sử dụng cho thuộc tính target của các liên kết. - Scrooling: (yes, no, auto): Xác định việc hiển thị thanh cuộn. Embedding Frame Gửi nội dung giữa các khung Việc có thể gửi nội dung của một khung từ bất kỳ khung nào đã mở ra một loạt các khả năng. Giả sử rằng ta muốn tạo một thanh di chuyển. Để thực hiện điều này, các liên kết trong tập tin chứa thanh di chuyển phải có khả năng gửi nội dung đến các khung khác trong tập khung đó. Đoạn mã sau tạo ra một tập khung với một thanh di chuyển đơn giản. Tập khung trong đoạn mã giới thiệu một tập tin HTML mới có tên là nav.htm với một loạt các liên kết trong đó. Tập tin nav.htm có nội dung như sau: Go to Frame 1 Go to Frame 2 Go to Frame 3 Những vấn đề cần quan tâm khi sử dụng frame - Vì nhiều trình duyệt cũ không hỗ trợ khung, ta có thể cần phải quan tâm tới thẻ trong các trang web của mình. Các trình duyệt không hỗ trợ khung sẽ chỉ hiển thị phần văn bản nằm giữa cặp thẻ và . Văn bản này có thể bao gồm bất kỳ những gì từ một con trỏ chỉ đến một phiên bản không dùng khung trong site của ta cho đến một lời đề nghị nhã nhặn người dùng nâng cấp trình duyệt của họ. - Tất cả liên kết dẫn đến vị trí ngoài site của ta cần phải thiết lập thuộc tính TARGET với giá trị _top. Nếu khác đi, người dùng sẽ có cảm giác như họ bị rơi vào một cái bẫy trong một tập khung của ta. Làm việc với khung có thể là một thách thức. Khi được sử dụng cẩn thận, khung có thể cải tiến đáng kể về khả năng di chuyển và phong cách website của ta. Tables Một trang web được tổ chức tốt sẽ dễ dàng thu hút người đọc và giúp họ dễ dàng tìm kiếm thông tin mà họ muốn. Các bảng và khung là những công cụ có giá trị cho việc tổ chức thông tin. Với bảng, ta có thể chia các phần khác nhau của trang web thành các vùng và đặt các thông tin khác nhau vào các vùng đó. Ta sẽ cảm thấy rằng các bảng sẽ rất hữu dụng cho nhiều công việc khác nhau, từ trình bày dữ liệu theo dạng cột và hàng cho đến việc định vị chính xác các mục trên một trang web. Căn bản về bảng Bảng được đánh dấu bằng các thẻ và . Trong các thẻ này, ta sử dụng các thẻ định nghĩa hàng của bảng, và . Trong mỗi hàng, ta lại định nghĩa các ô của bảng bằng các thẻ và . Đoạn mã sau giới thiệu một trang web chứa một bảng cơ bản. Ta có thể thấy bảng được tạo ra bởi đoạn mã này trong hình dưới. R1, D1 Row 1, Data 2 Row 2, Data 1 This is Row 2, Data Column 2 Việc thiết lập thuộc tính BORDER với giá trị 1 sẽ tạo ra đường biên dày 1 pixel xung quanh mỗi ô của bảng cũng như xung quanh bảng. Nếu ta tăng giá trị này, chiều dày của đường biên sẽ tăng lên, tuy nhiên đường kẻ giữa các ô được giữ nguyên chiều dày 1 pixel. Khi tạo bảng, ta có thể thụt đầu dòng như trong đoạn mã trên để phân tách một cách trực quan các mức khác nhau của bảng. Các thẻ được thụt vào sâu hơn so với các thẻ và các thẻ được thụt sâu hơn so với các thẻ . Không nhất thiết phải sử dụng việc trình bày thụt đầu dòng, tuy nhiên nên dùng kỹ thuật này phục vụ như một công cụ dò lỗi hữu dụng, đặc biệt là trong các bảng phức tạp. Các thuộc tính khác của bảng - bgcolor: Xác định màu màu nền của toàn bộ bảng (hoặc các ô). Mặc định, nền của bảng là trong suốt. Nếu ta thiết lập màu nền khác với màu nền của ô trong bảng thì màu nền của ô đó sẽ được ưu tiên cao hơn. Giá trị của Bgcolor cũng có thể là một màu hằng hoặc các cặp số Hexa theo hệ màu RGB. - BACKGROUND cho phép ta hiển thị một hình ảnh phía sau một ô hay toàn bộ bảng; ta chỉ việc thiết lập thuộc tính này trỏ đến một hình ảnh mong muốn. - Border: Xác định độ dày của biên. Giá trị của nó là một số nguyên. - Width, height: Xác định kích thước bảng. Giá trị của các thuộc tính này có thể là tương đối (%), ví dụ 50%, hay tuyệt đối (tính bằng một số nguyên là pixel). - Align: Canh chỉnh bảng: ó các giá trị: right, left, center. - Tạo các ô với các kích thước khác nhau - ROWSPAN: Ghép nhiều ô trong dòng thành một ô. - COLSPAN: Ghép nhiều ô trong cột thành một ô. Row 1, Data 1 Row 2, Data 1 Row 2, Data 2 Thuộc tính COLSPAN xác định chiều rộng của một ô tính theo cột. Một ô thông thường điền đầy trong một cột. Việc thiết lập giá trị của COLSPAN là 2 làm cho ô trải rộng thêm hai cột; thiết lập giá trị 4 sẽ làm cho ô trải rộng trên 4 cột. Trong ví dụ, việc thiết lập giá trị COLSPAN thành 2 làm cho ô tương ứng sẽ có chiều rộng bằng 2 ô trong các hàng kế cận. Cũng cần chú ý rằng thuộc tính ALIGN đã được thiết lập để canh giữa nội dung của ô. Thuộc tính có 3 giá trị:Left (mặc định), Center và Right. Kỹ thuật thiết lập chiều rộng, canh giữa nội dung của ô như thế này thường rất hữu dụng khi ta tạo các tiêu đề cột của bảng. ví dụ sử dụng cả hai thuộc tính ROWSPAN và COLSPAN trên một bảng. Fruit Sales nbsp; nbsp; Store 1 Store 2 Apples Day14025 Day23030 Oranges Day14025 Day23030 DANH SÁCH VÀ FORM Danh Sách (List) HTML có một tập các thẻ cho phép tạo ra các danh sách dạng phân cấp. Có hai dạng danh sách: không có thứ tự và có thứ tự. Các danh sách không có thứ tự là danh sách dạng nút, trong khi đó danh sách có thứ tự thường là danh sách có đánh số. Ta cũng có thể kết hợp hai loại này để tạo ra danh sách phức tạp hơn. Danh sách không có thứ tự (unordered list). Đầu tiên hãy xem xét hai danh sách không có thứ tự. Đoạn mã cho các danh sách này xuất hiện trong đoạn mã 2-1. Hình 2-1 thể hiện các danh sách được phân cách bởi một đường kẻ ngang. ----------- đoạn mã 2.1------- This is at the first level. This is at the second level. This is at the second level. This is at the third level. This is at the second level. This is the first level header. This is the first level-1 item in the list. This is the second level-1 item in the list. This is the first level-2 item in the list. And this is the second level-2 item in the list. This is the third level-1 item in the list. Danh sách đầu tiên trong đoạn mã trên được cấu tạo chỉ dùng các thẻ danh sách không có thứ tự, và . Bằng cách đặt một tập các thẻ danh sách không có thứ tự trong một thẻ danh sách khác, chúng ta có thể nhúng các danh sách trong một danh sách khác để tạo ra một loạt các văn bản được đặt thụt đầu dòng. Chú ý rằng mỗi thẻ mở có một thẻ đóng tương ứng. Danh sách kế tiếp trong đoạn mã cũng bắt đầu với một thẻ danh sách không có thứ tự, . Một thẻ đóng, , là cần thiết và nó xuất hiện ở cuối của danh sách, nằm gần ở cuối tập tin. Bất kì những gì giữa hai thẻ này được xem là thành phần của danh sách. Danh sách này chứa đựng các mục dạng nút, được bắt đầu bởi thẻ mục danh sách, . Thẻ kết thúc không đòi hỏi những gì bắt gặp trước khi một mục khác bắt đầu hay trước khi kết thúc danh sách được xem là thành phần của một mục trong danh sách. Một danh sách khác được nhúng vào trong danh sách này. Chú ý rằng danh sách được nhúng vào này được thụt đầu dòng và các nút của nó có một dạng khác. Chỉ có 3 mức nhúng đầu tiên có các dạng nút khác nhau. Bắt đầu với mức thứ ba, tất cả các danh sách sử dụng chung một kiểu nút. Chú ý rằng mức thứ hai không có bất kỳ văn bản nào sau thẻ . Các văn bản tiêu đề như vậy là tuỳ chọn. Trong thẻ có một thuộc tính TYPE. Thuộc tính này qui định rõ loại nút được hiển thị. Type có các giá trị Disc (hình tròn đặc - mặc định cho cấp cao nhất), Circle (hình tròn) và Square (hình vuông). Danh sách có thứ tự Các mục của một danh sách có thứ tự được hiển thị với các con số thay vì các nút. Sử dụng thẻ (Order List) để thiết lập một danh sách có thứ tự, như được thể hiện trong đoạn mã sau. Hình ảnh thể hiện cách mà trình duyệt hiển thị đoạn mã này. Danh sách có thứ tự This is the first level-1 item in the list. This is the second level-1 item in the list. This is the first level-2 item in the list. And this is the second level-2 item in the list. This is the third level-1 item in the list. Danh sách trong đoạn mã này bắt đầu với một thẻ danh sách có thứ tự . Như trong trường hợp với danh sách không có thứ tự, một thẻ đóng là cần thiết. Mỗi mục trong danh sách bây giờ được bắt đầu bằng một con số thay vì một nút. Chú ý rằng một danh sách thứ hai được nhúng trong danh sách thứ nhất và việc đánh số được bắt đầu từ 1 trong danh sách thứ hai. Các danh sách phức hợp Thẻ hỗ trợ một thuộc tính có tên là TYPE. Thuộc tính này kiểm soát xem các mục trong danh sách được bắt đầu với một số, một chữ cái hay một con số La Mã. Một thuộc tính khác là Start (mặc định là 1) được gán các giá trị nguyên sẽ xác định giá trị xuất phát của con số hay chữ cái. Đoạn mã kế sau minh hoạ thuộc tính TYPE cũng như việc trộn lẫn các thẻ và . Kết quả thể hiện của đoạn mã này trong hình . Bằng cách kết hợp các danh sách có thứ tự và danh sách không có thứ tự và bằng cách sử dụng thuộc tính TYPE, ta có thể trình bày các thông tin phân cấp phức tạp. This uses numbers. This uses uppercase letters. This uses lowercase letters. This uses uppercase roman numerals. This uses lowercase roman numerals. This also uses lowercase roman numerals. Here is a bullet. Bảng giá trị của thuộc tính TYPE thẻ TYPE Loại ký tự hiển thị 1 1, 2, 3, a a, b, c, A A, B, C, i i, ii, iii, I I, II, III, Nếu thay dòng đầu tiên sau thẻ ví dụ trên bằng dòng: ta sẽ được kết quả hiển thị như hình dưới. Biểu Mẫu Giới Thiệu Biểu mẫu cho phép thực hiện tương tác giữa người dùng và máy chủ. Khái niệm chung này là máy chủ thể hiện một biểu mẫu cho người dùng thông qua một trang web để yêu cầu bất kì thông tin nào, chẳng hạn như tên, địa chỉ, số điện thoại, tuổi.Người dùng sẽ điền vào biểu mẫu và sau đó gửi nó lên máy chủ. Một biểu mẫu có thể chứa một loạt các phần tử, bao gồm các trường văn bản cho đến các hộp kiểm, danh sách thả xuống. Cách Thức Sử Dụng Các Kiểu Trường Nhập Dữ Liệu Thẻ Form Phần tử FORM định nghĩa một biểu mẫu. Tất cả các phần tử tương tác của một biểu mẫu (trường văn bản, hộp chọn lựa) phải được đặt giữa thẻ và . Thẻ cũng hỗ trợ một số thuộc tính. Thuộc tính NAME của thẻ xác định tên cho biểu mẫu. Thuộc tính này giúp cho việc truy cập dữ liệu trên biểu mẫu được dễ dàng hơn và đặc biệt hữu dụng khi ta có nhiều biểu mẫu trên trang web và sử dụng các ngôn ngữ lập trình phía client (javascript, Vbscript). Ta nên tạo các gía trị Name cho Form (và các thành phần khác trong form) là những tập các ký tự không có khoảng trắng và dấu tiếng việt. Các thuộc tính thẻ form: - ACTION: xác định URL (một script phía server) mà theo đó biểu mẫu sẽ gửi thông tin của nhóm (các thành phần trong form) khi người dùng nhấp chuột vào nút Submit. - METHOD xác định cách thức biểu mẫu sẽ được gửi lên máy chủ. Có hai tuỳ chọn chuẩn: GET và POST. Phương thức Get chỉ cho phép gửi dữ liệu hạn chế (512 byte). - Enctype: Xác định cơ chế sử dụng để mã hóa dữ liệu nội dung của Form. Ta chỉ cần xác lập ở chế độ mặc định trừ khi khi ta tạo một form cho phép gửi một file lên Server. Lúc đó giá trị của thuộc tính Enctype là "Multipart/form-data" và Method của Form phải là POST. Thẻ Input Tạo một thành phần của form. Có nhiều thành phần, được xác định khác nhau bởi thuộc tính type trong thẻ INPUT. Thành phần textbox: Nhập dữ liệu trên một dòng: Input type="text". Thành phần này có các thuộc tính: type, name, value, SIZE, , MAXLENGTH. Thành phần Password: Giống text, nhưng dữ liệu nhập vào hiển thị dấu *. Input type="password". Các thuộc tính: type, name, value Các nút chọn Radio: Input type="radio". Thành phần để người sử dụng có thể chọn hay bỏ lựa chọn. Có các thuộc tính: type, name, value, checked (xác định nút có chọn mặc định không. Thuộc tính này không cần gán giá trị). Các nút radio thường nhóm thành một nhóm, các nút trong một nhóm chỉ được phép chọn một nút. Để tạo thành một nhóm, các nút phải có cùng giá trị name. Các nút checkbox: Input type="checkbox". Về chức năng giống radio tuy nhiên có thể chọn nhiều hay không chọn nút nào trong nhóm. Upload file. input type=file. Các thành phần khác giống textbox, sử sụng khi cần upload 1 file lên server thông qua from. Thành phần hidden: input type=hidden. Giống textbox, nhưng không hiển thị trên màn hình. Thường đóng vai trò như một biến truyền dữ liệu. Nút submit: input type=submit. Sử dụng gửi form tới script đã xác định trong thuộc tính action của form. Nút reset: Type = Reset. Sử dụng xóa form về trạng thái ban đầu.. Các thuộc tính khác giống submit. Nút button: Một nút hình dạng giống submit nhưng không có hành động nào khi click vào. Nó thường được sử dụng trong kết hợp với javascript để bắt các sự kiện và thực thi một số hành động nào đó. Các thuộc tính khác giống submit. Textarea Giống text box, dùng để nhập liệu nhưng nhập được trên nhiều hàng. Thẻ này có thẻ đóng và có cú pháp như sau: Thuộc tính: cols, rows: Kích thước textarea. Listbox Chọn dữ liệu từ danh sách đã có. Thẻ: Kết hợp 2 thẻ và . Mỗi thẻ option là một lựa chọn. Thành phần dữ liệu trong thuộc tính value của thẻ option sẽ được gửi theo form, cón thành phần giữa hai thẻ mở và đóng của option là thành phần được thấy bởi người sử dụng. Giá trị 1 Giá trị 2 Một Số Thẻ HTML Quan Trọng Khác Thẻ META (trong phần head). Việc cung cấp ngữ cảnh là một trong những vai trò của thẻ META. Thẻ này cũng có thể dùng để cung cấp một số dịch vụ không trực tiếp liên quan đến nội dung của trang web. Dưới đây là danh sách về công việc mà ta có thể thực hiện với các thẻ META cùng với đoạn mã tương ứng: - Buộc trang web tự cập nhật sau một thời gian xác định (tính theo giây): - Tải toàn bộ kí tự không phải tiếng Anh cho hồ sơ (ví dụ tiếng Nhật như trong ví dụ). Bộ ký tự này sẽ chỉ hiển thị nếu nó được hỗ trợ và được cài đặt trên máy tính của người dùng: <META HTTP-EQUIV="REFRESH" CONTENT="text/html; CHARSET= window-51932"> - Buộc trang web này không chứa trong bộ đệm của máy khách hàng. Một số trình duyệt có thể không hỗ trợ đặc điểm này: - Báo hiệu rằng nội dung của hồ sơ đã không còn hiệu lực tại một thời điểm trong quá khứ và điều này ngăn không cho đọc lại trang từ trên bộ đệm của máy khách hàng: <META HTTP-EQUIV="Expires" CONTENT="Thurday, 18-jan 96 16:26:30 GMT"> - Chuyển người dùng đến một trang web khác sau một khoảng thời gian: <META HTTP-EQUIV="REFERSH" CONTENT="5; URL=http:/www.microsoft.com"> - Đưa vào các từ khoá, lời mô tả, loại hồ sơ và thời gian cần ghé thăm lại - các thông tin cần cho nhiều động cơ tìm kiếm trên web: Các thẻ META luôn được đặt ở đầu phần tử HEAD trong một tập tin. Ta cần biết rằng nhiều động cơ tìm kiếm sẽ bỏ qua thẻ META của ta nếu lặp đi lặp lại quá nhiều lần. Bằng cách dùng các từ đồng nghĩahay mô tả nhiều đề mục trong thẻ META loại keywords là một chính sách nói chung là đúng. Nhiều người dùng thẻ META với thuộc tính NAME để ghi thông tin về trang web. Ví dụ, thẻ META với thuộc tính NAME với các giá trị ISBN, Author và Title có thể được dùng để ghi thông tin về một cuốn sách. Một số động cơ tìm kiếm có khả năng tìm kiếm các thẻ META tuỳ biến này. Các Thẻ SPAN và DIV Các thẻ và được xem như là các thẻ chứa (thẻ mang). Chúng rất hữu dụng trong việc phân chia các khối văn bản với phần xung quanh nó mà không làm ảnh hưởng đến định dạng của riêng nó. Các thẻ này thường được dùng với các định dạng style sheet CSS và đang được ưa chuộng trong thiết kế layout của những trang web phức tạp. SPAN là một phần tử dòng, có nghĩa là nó có thể tham gia vào đoạn văn bản và không tạo ra một ngắt dòng. Một số phần tử nhúng trong dòng khác là B (in đậm), U (gạch dưới), và I ( in nghiêng). Mỗi phần tử này sẽ tham gia vào đoạn văn mà không tạo ra một ngắt dòng. Ngược lại, DIV là phần tử khối. Thẻ DIV sẽ không tham gia vào đoạn văn. Thay vì vậy, phần tử DIV được xem như một khối văn bản riêng biệt và trở thành một đoạn văn của riêng nó. Một số phần tử khối thông dụng khác là P (đoạn văn), HR (đường kẻ ngang), TABLE và các phần tử danh sách chẳng hạng như UL (danh sách không có thứ tự), OL (danh sách có thứ tự) và LI (mục của danh sách). Đoạn mã sau minh họa một số cách dùng cơ bản về kiểu với các thẻ SPAN và DIV. Chú ý rằng hai dòng mã tương tự nhau nhưng tạo ra kết quả hoàn toàn khác nhau trong trình duyệt. Here is some text in a SPAN. Here is some text in a DIV. Các Thực Thể Ký Tự Một thực thể ký tự chỉ là một mã biểu thị một ký tự. Mỗi ký tự có thể được hiển thị trên màn hình có một thực thể ký tự tương ứng. Các thực thể ký tự sẽ hữu dụng khi ta muốn hiển thị một ký tự mà ta khó nhập được từ bàn phím hoặc khó hiển thị theo cách thông thường. Ví dụ, giả sử ta muốn hiển thị ký tự "<" trong trình duyệt. Ký tự này thường được dùng để đánh dấu phần bắt đầu của một thẻ HTML và nếu được nhập như một ký tự trong phần văn bản, nó có thể gây nhầm lẫn cho trình duyệt. Trình duyệt thường xem nó và văn bản đứng sau là một thẻ HTML và sẽ bỏ qua "thẻ" này nếu nó không nhận biết được. Vì vậy, ta có thể dùng một thực thể ký tự để biểu thị cho ký tự này và tránh được các vấn đề có thể xảy ra. Khái niệm này được minh hoạ trong đoạn mã ví dụ và kết quả thể hiện của nó trong hình dưới. Display in bold that X is less than Y: X<Y . This paragraph uses a character entity. Display in bold that X is less than Y: X. This paragraph does not use a character entity. Đoạn thứ nhất sử dụng thực thể ký tự cho ký tự " được xem như nằm phía trong của một thẻ HTML và như vậy nó không được hiển thị. Ngoài ra, thẻ đóng cũng không được xử lý đúng. Như vậy, phần còn lại của văn bản sẽ được hiển thị ở dạng in đậm. Một thực thể ký tự bao gồm 3 phần. Phần đầu tiên là ký tự "&". Ký tự này báo cho trình duyệt biết rằng một thực thể ký tự bắt đầu từ đây. Phần kế tiếp có thể là một con số, được đặt trước bởi ký tự "#", hoặc một tên gọi xác định cho một thực thể ký tự đặc biệt. Tất cả các thực thể ký tự đều có một con số định danh, trong khi đó thì một số thực thể ký tự thường dùng có một tên cho trước và thường được gọi là thực thể được đặt tên. Thực thể ký tự "<" trong ví dụ nêu trên là một ví dụ điển hình. Nó có thể được xác định hoặc với #60 hoặc với lt. Phần cuối cùng của thực thể ký tự là dấu ";". Ký tự này đánh dấu phần kết thúc của một thực thể ký tự. Trong bảng sau liệt kê một vài trong số các thực thể ký tự thường dùng nhất. Các giá trị số cho các thực thể ký tự được lấy từ tập ký tự Unicode phiên bản 2.0 (chính xác hơn là theo chuẩn ISO 10646), một bảng có hàng chục ngàn ký tự của toàn thế giới Dạng hiển thị Định danh số Thực thể Ghi chú & & “ " " Dấu nháy kép © © © Bản quyền > > > < < <     Ký tự khoảng trắng ® ® ® Nhãn hiệu đăng ký ™ ™ ™ ± ± ± Dấu cộng/trừ CASCADING STYLE SHEET (CSS) Giới Thiệu Định nghĩa về bảng kiểu xếp chồng (css) sử dụng để tách biệt format trang và nội dung của trang web. Với CSS, ta có thể biến đổi mọi thứ từ kích cỡ, kiểu, màu sắc của văn bản cho đến khoảng cách giữa các chữ cái và các dòng, đường biên và phần đệm xung quanh phần tử, vị trí chính xác của đối tượng trên trang Kiểu Tại Chỗ Kiểu tại chỗ là kiểu được áp dụng cho một thẻ riêng biệt trên trang web. Ta có thể áp dụng một kiểu tại chỗ cho bất kỳ thẻ nào trên trang bằng cách dùng thuộc tính STYLE. Như những thuộc tính khác, STYLE chỉ ảnh hưởng đến thẻ chứa nó. This text is in a SPAN. This text is not in a SPAN. Bảng Kiểu Một bảng kiểu bao gồm một hoặc nhiều định nghĩa kiểu (hay còn gọi là qui tắc kiểu). Bảng kiểu có thể chứa trong phạm vi một hồ sơ web hoặc được giữ trong một tập tin bên ngoài hồ sơ đó. Một định nghĩa cho một kiểu bao gồm một selector, tiếp theo sau bởi khối khai báo như trong ví dụ sau: SPAN {font-weight: bold; font-size: italic} Trong phần lớn các trường hợp, một selector chính là một thẻ HTML. Trong ví dụ trên, Span chính là một selector, vì vậy tất cả những thẻ Span có trong hồ sơ sẽ tuân theo những qui tắc đã định trong định nghĩa kiểu này. Khối khai báo theo sau selector và nằm trong cặp dấu ngoặc móc {}. Khối này là một danh sách những khai báo kiểu, được phân cách bằng những dấu chấm phẩy. Bảng Kiểu Toàn Cục Bảng kiểu toàn cục (hoặc bảng kiểu được nhúng vào) được kèm theo như là một phần của hồ sơ HTML. Loại bảng kiểu này xác định biên giới của nó bằng thẻ mở và thẻ đóng , nó thường được đặt trong phần head của trang HTML. Ví dụ: H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic} This text is in a SPAN. This text is in an H1. This text is in an H2. Hiển thị trong trình duyệt: Nếu muốn một phiên bản cụ thể của một phần tử được định nghĩa khác đi so với những gì đã được định nghĩa trong bảng kiểu toàn cục, có thể ghi đè bảng kiểu bằng cách sử dụng kiểu tại chỗ cho phần tử đặc biệt này. H1 {font-size: 16pt; font-weight: bold; color: red} H2 {font-style: italic; font-size: 24pt; color: green} SPAN {font-weight: bold; font-style: italic} This text is in a SPAN. This text is in an H1. This text is in an H2. This is modified H2 text. Bảng Kiểu Liên Kết Khả năng định dạng được đề cập trong những phần trước không chỉ dừng lại ở mức độ của một trang web đơn mà còn có thể kiểm soát kiểu trên nhiều trang web hay có thể trên toàn bộ website bằng cách sử dụng bảng kiểu liên kết. Một bảng kiểu liên kết (hay bảng kiểu bên ngoài) chỉ đơn giản là một tập tin văn bản, bao gồm những định nghĩa kiểu. Tập tin này được lưu với phần mở rộng là CSS. Tập này (nằm ngoài tập tin HTML) có thể được tham chiếu hoặc liên kết bởi văn bản HTML bằng cách sử dụng thẻ của trang HTML. Ví dụ: Đầu tiên, sử dụng notepad để soạn thảo tập tin có nội dung như sau: H1 {font-size: 16pt; font-weight: bold; color:red} H2 {font-style: italic; font-size:24pt ; color:green} SPAN {font-weight: bold; font-style: italic} Lưu tập tin với tên bất kỳ có phần mở rộng là CSS (ví dụ: style.css). Cũng cần chú ý rằng, bảng kiểu liên kết này không kèm theo các thành phần và (tức trong file CSS không có các thẻ này). Bây giờ tập tin tạo một file HTML chứa một liên kết đến bảng kiểu bên ngoài đã định nghĩa. Ví dụ: This text is in a SPAN. This text is in an H1. This text is in an H2. This is modified H2 text. Trong ví dụ này tập tin sử dụng thẻ trong phần đầu của hồ sơ HTML. Thẻ này chứa thuộc tính HREF xác định vị trí của tập tin đích. Thuộc tính REL sẽ định rõ rằng liên kết này là một tham chiếu đến một bảng kiểu và thuộc tính TYPE định rõ loại bảng kiểu. Thời điểm hiện tại thì text/css là loại bảng kiểu được hỗ trợ phổ biến và duy nhất. Bảng kiểu liên kết có ảnh hưởng tới hồ sơ HTML giống như bảng kiểu toàn cục (bảng kiểu nhúng). Mọi phần tử trong hồ sơ HTML mà thẻ của chúng được định nghĩa trong tập tin style.css sẽ được thể hiện bằng cách sử dụng kiểu đã được xác định. Vì không nằm trong bất kỳ tập tin HTML đặc biệt nào, nên bảng kiểu liên kết ngoài có thể được liên kết với số lượng hồ sơ không giới hạn. Ví dụ, tập tin có thể tạo bảng kiểu cho toàn bộ Website và liên kết từng trang với bảng kiểu đó. Khả năng này rất hữu ích khi tập tin muốn duy trì cách thể hiện, cũng như cách cảm nhận nhất quán trên toàn bộ website. Nó cũng rất tiện lợi khi muốn thay đổi cách thể hiện tổng thể của Website. Tính Thừa Hưởng Trong phần lớn các trang web, các phần tử HTML thường chứa đựng những phần tử khác. Các kiểu động hỗ trợ cơ chế gọi là thừa hưởng. Trong đó việc định dạng phần tử bên ngoài được sử dụng làm cơ sở cho việc định dạng đối tượng con bên trong nhằm bổ sung cho các định dạng được thừa hưởng. Trong ví dụ sau, đoạn text trong thẻ sẽ được thừa hưởng các đặc tính của thẻ ngoài SPAN {font-size: 16pt; font-style: italic; color: red} B {font-size: 24pt} This is some bolded text in a SPAN. Hình kết quả trên trình duyệt: Việc thừa hưởng cho phép thiết lập những định nghĩa kiểu mặc định được áp dụng cho tất cả các phần tử trong hồ sơ. Để thực hiện điều này, ta chỉ cần thiết lập bảng kiểu và các định nghĩa kiểu cho phần tử BODY của hồ sơ đó. Lớp Là một biến định nghĩa format của các thuộc tính trong các thẻ nhưng mọi thẻ đều có thể dùng được. - Công thức chung: .tênlớp {các thuộc tính}. - Sử dụng: .. Ví dụ: .large {font-size: 24pt} .small {font-size: 8pt} Standard text. The small class on an H2 element. The large class on a SPAN element. The small class on a P element. The large class on a B element. Định Dạng CSS Cho Một Thẻ Khi Xác Định ID Giống như class, tuy nhiên, định dạng này chỉ cho một thẻ có thuộc tính id duy nhất xác định trước. Lưu ý khi ta dùng ID, có nghĩa là duy nhất cái div đấy tồn tại và có định dạng CSS cho ID thì phải bắt đầu bằng dấu "#". Ví dụ: #page-container { background: red; width: 760px; margin: 0; } Noi dung GIỚI THIỆU JAVASCRIPT Giới Thiệu Ngôn ngữ đánh dấu siêu văn bản HTML có thể chứa đựng một định dạng chi tiết về nội dung văn bản dưới dạng một trang Web tĩnh. Nội dung trang này có thể bao gồm văn bản đã định dạng, ảnh, bảng biểu và các siêu liên kết để tạo ra một phương tiện trình bày thông tin một cách ấn tượng. Tuy nhiên, ngoài sự tương tác mức độ thấp của các siêu liên kết bằng cách đưa người sử dụng đi từ trang Web này đến trang Web khác. Nói chung HTML không cho phép đáp ứng các thông tin nhập vào từ phía người dùng ngoài việc đưa họ tới một trang mới. Hãng Netscape Communications thuộc tập đoàn Sun Microsystems đưa ra một giải pháp bằng cách tạo ra một tập các lệnh đính kèm theo trang HTML gọi là JavaScript. Sử dụng JavaScript, ta có thể xây dựng các biểu mẫu, công cụ tính toán và những giải pháp để tạo ra trang Web động. Trước khi có JavaScript, mọi hoạt động giữa người sử dụng với sự tương tác phía máy chủ phải thông qua những ứng dụng web hết sức tinh vi và máy chủ web cao cấp. JavaScript ra đời đã làm cho máy tính của người sử dụng trở nên cân bằng hơn và đem lại một số sức mạnh cho máy khách mà trước kia chỉ thực hiện được ở máy chủ. Sau khi JavaScript ra đời, hãng Microsoft cũng đưa ra ngôn ngữ lập trình riêng của họ là Visual Basic Scripting Edition hay VBScript. Ngoài hai ngôn ngữ trên, còn có nhiều ngôn ngữ cho phép lập trình phía máy khách như PerlScript, Pythos. Tại thời điểm này, JavaScript đã được hai hãng Microsoft và Netscape xây dựng lại thành ngôn ngữ mới và đặt tên là ECMAScript (tuy nhiên thực tế người ta vẫn gọi nó là JavaScript). Phiên bản hiện tại của javascript là 2.0, bao gồm các chức năng tương tác tốt hơn và người sử dụng quản lý mã tốt hơn: kiểu, lớp. VBScript và JavaScript là các ngôn ngữ lập trình kiểu thông dịch dùng cho Web. Các đoạn chương trình viết bằng ngôn ngữ này nhúng trong các trang HTML và sẽ được các trình duyệt thông dịch để thực hiện. Các ngôn ngữ Script cho phép phát triển nhanh và dễ dàng các chương trình đơn giản hơn là các ngôn ngữ dạng biên dịch như là C, C++. Cú pháp của VBScript gần giống với Visual Basic còn cú pháp của JavaScript lại giống với ngôn ngữ C, C++. VbScript và JavaScript là hai ngôn ngữ Script dùng để viết các đoạn chương trình ở phía client rất thông dụng hiện nay. Tuy nhiên JavaScript được hỗ trợ trên hầu hết các trình duyệt, trong khi đóVBScript chỉ được hỗ trợ tốt nhất trên trình duyệt Internet Explorer của Microsoft. Hiện tại, hai ngôn ngữ này cũng được sử dụng để dịch các chương trình phía server. Cách Thức Viết Một Đoạn Mã Javascript Trong cặp thẻ:: JavaScript được thêm vào trang HTML bằng cách sử dụng cặp thẻ là : và . Về nguyên tắc các đoạn mã JavaScript có thể đặt tại bất kỳ vị trí nào trong trang HTML và trước thẻ . Tuy nhiên để dễ quản lý, người ta thường đặt chúng trong cặp thẻ . Đối với những trình duyệt cũ có thể sẽ không hiểu JavaScript, do vậy nếu gặp những đoạn Script này, chúng sẽ xem như những text bình thường và hiển thị trên màn hình. Vì lý do này, chúng ta nên đặt mã của nó trong chú thích trang HTML (trong cặp dấu <!-- Sử dụng để dấu mã JavaScript đối với những trình duyệt không hiểu JavaScript (mã JavaScript đặt tại đây) --> (mã html) <!- - (mã JavaScript ) - -> (mã html) Trong các sự kiện (event): Mã JavaScript còn được đặt trong các sự kiện (event) của thẻ HTML theo cú pháp: . Ta thấy trong các sự kiện (onEvent) mã JavaScript được đặt trong cặp dấu “..”. Các đoạn mã này thường là các hàm do người sử dụng viết hoặc do ngôn ngữ cung cấp nhằm mục đích thực hiện một tác vụ nào đó. Các chú thích của JavaScript giống như ngôn ngữ C, C++ là được đặt trong cặp /* và */ nếu chú thích trên nhiều dòng và sau dấu // nếu ở trên một dòng. Mỗi câu lệnh của JavaScript kết thúc bởi dấu chấm phẩy(;). Ví dụ: <!-- //Ẩn đối với các trình duyệt không hỗ trợ JavaScript function show_hello() // Viết một hàm tên là show_hello { var fullname=”Nguyen Van An”; //khai báo một biến alert(“chào bạn “ + fullname); /*sử dụng hàm của JavaScript xuất ra hộp hội thoại thông báo. */ } //chấm dứt mã JavaScript - -> Chương trình JavaScript đầu tiên <!- - show_hello();//gọi hàm JavaScript - -> Click here Trong ví dụ trên ta đã viết một hàm JavaScript và đặt trong thẻ . Đây là một hàm được định nghĩa bởi người lập trình. Hàm này được gọi trong phần thân trang HTML giữa cặp thẻ và và trong sự kiện onClick của thẻ liên kết . Các biến JavaScript và kiểu dữ liệu Biến là tên được gán cho một vùng nhớ sử dụng để lưu trữ dữ liệu. Trước khi sử dụng ta phải khai báo biến sử dụng từ khoá var theo cú pháp: var ten_bien; Trong đó tên biến là danh hiệu được đặt theo qui tắc trên. Chú ý: JavaScript phân biệt ký tự hoa và thường, do vậy biến ten sẽ khác với Ten, và từ khoá var phải là chữ thường. Ta cũng có thể khai báo nhiều biến một lượt và vừa khai báo vừa gán giá trị. Ví dụ: var a, b=10, c=”Tuan”; Biến - Kiểu Dữ Liệu – Biểu Thức Biến JavaScript có cú pháp gần giống với C và Java. Có một sự khác biệt lớn giữa JavaScript và các ngôn ngữ trên là: JavaScript là ngôn ngữ không ràng buộc kiểu (untype). Do vậy một biến có thể chứa bất cứ một loại dữ liệu nào tại một thời điểm nào đó. Ví dụ: var x=10; // khai báo biến x và gán giá trị nguyên bằng 10 x = “ Nguyen Van Tuan”; // x nhận giá trị là một chuỗi. Tại dòng đầu tiên, ta khai báo và gán giá trị cho biến x là một số nguyên. Tại dòng thứ hai, x lại mang một giá trị kiểu chuỗi. Mỗi câu lệnh của JavaScript được kết thúc bởi dấu chấm phẩy (;). Các kiểu dữ liệu cơ bản trong JavaScript : Number: Lưu trữ số nguyên và số thực. String: Lưu trữ chuỗi ký tự. Một chuỗi ký tự được bao bởi cặp dấu nháy đơn hoặc cặp dấu nháy kép. Bool: gồm hai giá trị: true và false. Ví dụ: x=10; y=”10”; z=’JavaScript ‘; Giá trị một biến là: null: dùng để ám chỉ biến không chứa giá trị thuộc kiểu nào (giống kiểu void trong c). Một biến được tạo ra nhưng chưa được gán giá trị nào sẽ có giá trị là undefined. Biểu Thức Và Phép Toán Biểu thức: Là một tổ hợp các giá trị, hằng, danh hiệu, biến và các lời gọi hàm, các cặp dấu ngoặc và các toán tử hợp lệ. Ví dụ: (a+3) * 2 – b/c; Phép gán (=): Sử dụng để gán một giá trị, biểu thức vào một biến. Cú pháp: ten_bien = bieu_thuc ; Các toán tử khác: các toán tử có thể tạm phân loại theo từng loại như: toán tử số học, toán tử logic. . . Bảng dưới liệt kê các toán tử và loại dữ liệu có thể sử dụng cùng vối toán tử đó. Trong bảng có sử dụng các ví dụ minh hoạ cho các biến có các giá trị như sau: x=10; y=4; z=”ab”, t=”ab”, r = true, s = false; Loại toán tử Toán tử Ý nghĩa Ví dụ Kết quả Số học + Cộng 2 số kiểu number hoặc nối 2 chuỗi kiểu string A=x+y; B=y + z; A=14 B = ”4ab” - Trừ 2 số A= x – y; A = 6 * Nhân 2 số A= x*y A = 40 / Chia 2 số, kết quả trả về một số thực A = x/y A = 2.5 % Lấy phần dư của hai số. A = x%y A = 2; (dư 2) ++ Tăng một số lên 1 đơn vị x++ x = 11 -- Giảm một số xuống 1 đơn vị x-- x= 9 Logic ! Toán tử not, đảo ngược giá trị của biến logic A = !r A = false < Toán tử so sánh nhỏ hơn. Trả về giá trị true nếu biểu thức đúng, ngược lại trả về false (sử dụng cho kiểu number, string và các kiểu dữ liệu khác) A = (x < y) A=false > Toán tử so sánh lớn hơn. Ý nghĩa giống toán tử trên A = (x > y) A=true <= So sánh nhỏ hơn hoặc bằng A= (x<=y) A = false >= So sánh lớn hơn hoặc bằng A= (x>= y) A=true == So sánh bằng A= (x==y) A = false != Khác A= (x!=y) A=true Kết hợp += a+=b ó a = a+b -= a-=b ó a = a-b *= a*=b ó a = a*b /= a/=b ó a = a/b %= a%=b ó a = a%b Chú ý: Phép toán +: Trong phép cộng 2 số hoặc chuỗi. Nếu một toán hạng là kiểu chuỗi và toán hạng kia là một kiểu khác thì JavaScript sẽ đổi toán hạng kia về kiểu chuỗi và thực hiện phép toán cộng nối hai chuỗi. Nếu cộng một số với một biến logic thì true có giá trị là 1 và false có giá trị 0. A = true + “cb”; A có giá trị là “truecb”. A = false + 10; A có giá trị là 10. A = true + 10; A có giá trị là 11. A = “ab “ + 1; A có giá trị “ab1” Các phép toán so sánh: Được sử dụng trong những khẳng định điều kiện như: if, switch, while. Nếu so sánh 2 chuỗi, JavaScript sẽ so sánh từng ký tự theo mã ASCII. Ví dụ: “tuan” > “Tuan”, “tuan.” > “tuan“. Các Cấu Trúc Điều Khiển Cấu trúc If Else Câu Lệnh Switch Câu Lệnh For Loop Cấu Trúc While Loop Cú pháp: while (biểu_thức_đk) { S; } Chương trình sẽ kiểm tra biểu_thức_đk. Nếu biểu_thức_đk dúng sẽ thi hành lệnh S cho đến khi nào biểu_thức_đk là một giá trị sai. Cấu trúc do while Cú pháp do { S } while (biểu_thức_đk); Câu lệnh S được thi hành cho đến khi biểu_thức_đk bị sai. Vòng lặp này khác với vòng lặp trên là thực hiện lệnh S trước và kiểm tra điều kiện sau. Ví dụ : Chương trình sau sẽ tính giá trị: 1 + ½ + 1/3 ++1/n cho đến khi điều kiện 1/(n+1) <a xảy ra (a là một số thực cho trước). vòng lặp while var anpha=0.01; var tong = 0, i=1, x=1/i; while (x>= anpha) { tong +=(1/i); i++; x= 1/i; } alert("Tổng 1 + ½ + là" + tong); Câu Lệnh Break, continueLoop Lệnh break: được thực thi trong vòng lặp và cho phép thoát ra khỏi vòng lặp trong cùng (gần với nó nhất). for (i=0; i<10; i++) if (i==4) break; alert(“Giá trị của I là: “ + i); Câu lệnh continue: Lệnh continue cho phép bỏ qua các lệnh sau nó trong vòng lặp để thực thi vòng lặp kế tiếp. Ví dụ: Tính tổng các số lẻ sử dụng continue. var tong=0; for (i=1; i<=10; i++) { if (i%2 ==0) continue; tong = tong + i; } alert("Tong cac so le <=10 la : " + tong); Kết quả: Câu Lệnh For .. In Sử dụng để duyệt qua từng thuộc tính của đối tượng hay từng phần tử trong đối tượng mảng, nhất là các mảng dạng tập hợp (mảng mà các chỉ số không phải là số nguyên). Cú pháp: for(bien in [collection|Array]) { S; } Trong đó collection và Array là các biến. Ví dụ cho vòng lặp for dạng này được thể hiện trong phần đối tượng Array. Câu Lệnh try catch Khi duyệt một trang web, ta thường thấy hộp thoại hiển thị thông báo lỗi và yêu cầu ta có debug lỗi hay không ("Do you wish to debug?"). Thông báo lỗi này thường có ích cho người phát triển nhưng gây khó chịu cho người sử dụng. Phần này sẽ hướng dẫn cách bẫy và xử lý lỗi một cách thân thiện hơn. Có hai cách để bắt một lỗi trên trang web: Sử dụng lệnh try catch Sử dụng sự kiện onerror. Đây là giải pháp cũ hay sử dụng Cấu trúc try catch cho phép ta kiểm tra lỗi của một khối code. Khối try chứa code cần chạy để kiểm tra, khối catch chứa code được thực thi khi lỗi xảy ra. Cú pháp: try { //Run some code here } catch(err) { //Handle errors here } Ví dụ: Ví dụ này chứa một lỗi và không sử dụng try catch để bắt lỗi. function message() { adddlert("Welcome guest!"); /Hàm viết sai } Ví dụ sau sử dụng try catch để xử lý lỗi của ví dụ trên var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Error description: " + err.description + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) } } Câu lệnh throw Câu lệnh này cho phép ta tạo ra một ngoại lệ và được sử dụng cùng cấu trúc try catch để tạo có thể điều khiển chương trình phát sinh ra các thông báo lỗi chính xác hơn. Cú pháp: thow(exception) exception có thể là chuỗi, số nguyên, giá trị boolean hay một đối tượng. Ví dụ này cho ta nhập vào một số nguyên từ 0 đến10. Nếu nhập ngoài các số này, chương trình phát sinh ra lỗi. Thông tin lỗi được truyền vào khối catch (qua lệnh throw) và được hiển thị. var x=prompt("Enter a number between 0 and 10:","") try { if(x>10) throw "Err1" ; else if(x<0) throw "Err2"; } catch(er) { if(er=="Err1") alert("Error! The value is too high"); if(er == "Err2") alert("Error! The value is too low") ; } Hàm Trong Javascript Hàm là thành phần quan trọng trong việc lập trình cho phép thi hành những tác vụ đặc biệt. Trong JavaScript chúng ta có thể sử dụng những hàm thư viện của ngôn ngữ hoặc viết các hàm của riêng mình. Hàm Được Định Nghĩa Bởi Người Lập Trình. Cú pháp để tạo một hàm: function ten_ham(thamso_1, thamso_2, ..,thamso_n) { (code trong thân hàm) } Trong đó: ten_ham tuân theo qui tắc định danh của JavaScript, function là từ khoá. Thamso_1, thamso2 là các tham số hình thức truyền vào hàm. Chú ý: hàm trong JavaScript khác với trong C là nó không xác định kiểu trả về và các tham số hình thức cũng không được xác định kiểu. Hàm có thể có hay không có giá trị trả về (qua phép toán return). Ví dụ: Viết một hàm tính giai thừa của một số n. function giai_thua(n) //hàm tính n! { var i=1, S=1; if (n<0) return –1; //kiểm tra giá trị n. Trả về –1 nếu n<0 if ((n ==0) ||(n==1)) return 1; //Nếu n==0 hoặc n==1 thì n!=1 else { while (i<=n) { S*=i; i++; } return S; } } alert (“ Giai thừa của 6 là “ + giai_thua(6)); Các hàm cũng có thể gọi lẫn nhau hoặc gọi đệ qui. Ví dụ: Hàm đệ qui tính giai thừa của n: function gtdequi(n) { if (n<=1) return 1; return n * gtdequi(n-1); } Ví dụ sau cho xây dựng một hàm cho người lập trình nhập số cần tính giai thừa n từ bàn phím. Hàm này có kiểm tra giá trị n cho đến khi người sử dụng nhập đúng (n là một số và không âm). Khi đó hàm này sẽ gọi hàm hàm giai_thua() để tính và xuất ra giá trị. function giai_thua(n) // Hàm tính giai thừa của n { var i=1, gt=1; while (i<=n) { gt*= i; i++; } return gt; } function thuc_hien() { var n; do { n = prompt(“Nhập vào giá trị n”); // Nhập giá trị vào n từ bàn phím. } while (isNaN(n) || (n< 0)); // Nếu n không là một số hoặc n<0 thì nhập tiếp. n = parseInt(n); // lấy giá trị nguyên của n nếu n là số thực alert(n + “ ! = “ + giai_thua(n)); } Click vào đây để thực hiện Trong Ví dụ này chúng ta đã sử dụng thêm hàm prompt(). Đây là hàm được định nghĩa sẵn trong ngôn ngữ. Hàm này cho phép người sử dụng nhập vào một số và trả về số đã nhập. Câu lệnh n = prompt(“Nhập vào giá trị n”) trong ví dụ trên nếu người sử dụng nhập vào số 4 và click OK thì số này sẽ được gán cho n. Cũng trong chương trình này ta đặt hàm trong sự kiện onClick của liên kết để gọi hàm khi liên kết được click. Hãy viết thêm phần kiểm tra nếu người sử dụng không nhập hoặc click nút cancel. Tầm Vực Của Biến Tầm vực của biến là nơi mà ta có thể truy cập đến biến. Biến được khai báo trong một hàm gọi là biến cục bộ và chỉ có thể tham khảo được tại trong hàm đó hoặc các hàm mà nó gọi thi hành. Biến khai báo ngoài tất cả các hàm gọi là biến toàn cục và nó có thể được tham khảo bởi tất cả các hàm trong trang script ngoại trừ trong hàm này cũng có một biến như vậy được khai báo. Ví dụ: var i=0, k =1; //biến toàn cục. function bien() { var i=12, j = 3; //biến cục bộ chỉ ảnh hưởng trong hàm alert(" Trong hàm: i: " + i + “ j: “ + j); k = 10; //Biến k được khởi gán lại. } bien(); alert(" Ngoài hàm: i:" + i + “ k:” + j); Do trong JavaScript, khai báo một biến ta có thể không cần sử dụng từ khoá var, tuy nhiên cách viết này không hẳn hay và có thể dẫn đến một số lỗi không lường trước. Ví dụ ta sử dụng một biến toàn cục. Trong một hàm, ta muốn sử dụng một biến cục bộ có tên giống biến bên ngoài, nhưng không sử dụng từ khoá var. Điều này làm JavaScript lầm tưởng 2 biến đó là một và có thể dẫn dến lỗi. Ví dụ sau sẽ dẫn đến vòng lặp vô hạn do không sử dụng từ khoá var . var i; //biến toàn cục function ham1() { var t=0; for (i=1; i<5; i++) //sử dụng biến toàn cục { t+= tong(); } return t; } function tong() { S = 0; i=1; /* người sử dụng muốn sử dụng i như một biến cục bộ nhưng JavaScript lại sử dụng chung biến toàn cục.*/ S = S + i; return S; } alert(" Tong: " + ham1()); Trong ví dụ trên, ta đặt từ khoá var trước biến i trong hàm tong thì chương trình sẽ đạt yêu cầu của người sử dụng. Các Sự Kiện Javascript JavaScript là ngôn ngữ định hướng sự kiện, nghĩa là sẽ phản ứng trước các sự kiện xác định trước như kích chuột hay tải một văn bản. Một sự kiện có thể gây ra việc thực hiện một đoạn mã lệnh (gọi là các chương triình xử lý sự kiện) giúp cho chương trình có thể phản ứng một cách thích hợp. Chương trình xử lý sự kiện (Event handler): Một đoạn mã hay một hàm được thực hiện để phản ứng trước một sự kiện gọi là chương trình xử lý sự kiện. Chương trình xử lý sự kiện được xác định là một thuộc tính của một thẻ HTML: Ví dụ sau gọi hàm CheckAge() mỗi khi giá trị của trường văn bản thay đổi: Đoạn mã của chương trình xử lý sự kiện không là một hàm; nó là các lệnh của JavaScript cách nhau bằng dấu chấm phẩy. Tuy nhiên cho mục đích viết thành các module nên viết dưới dạng các hàm. Một số chương trình xử lý sự kiện trong JavaScript: Sự kiện Xảy ra khi onChange Người sử dụng sửa đổi giá trị trong đối tượng (textbox, checkbox, select) onClick Người sử dụng nhấn nút chuột lên đối tượng onMouseOver Người sử dụng đưa con trỏ lướt ngang qua đối tượng onMouseOut Người sử dụng đua con trỏ ra khỏi đối tượng onSubmit Kích hoat biểu mẫu gửi đi onBlur Di chuyển con trỏ ra khỏi đối tượng onFocus Đối tượng nhận con trỏ. onLoad Một trang đã được tải xuống hoàn chỉnh. onUnload Người sử dụng rời khỏi trang hoặc tải lại trang. Bảng sau liệt kê một số đối tượng và các sự kiện quan trọng mà đối tượng này cung cấp. Eventsà Blur Click Change Focus Load MouseOver MouseOut Submit Unload HTML element Text x x x x x x Listbox x x x x x x Button x x x x x checkbox x x x x x x Form x Link x x x Radio x Reset x Submit Textarea x x x body x x Ví dụ: Event Onload and Unload <!-- HIDE FROM OTHER BROWSERS var name = ""; function welcome() { name = prompt("Welcome to my page! What's Your Name?","name"); } function farewell() { alert("Goodbye " + name + ". Thanks for visiting my page."); } // STOP HIDING FROM OTHER BROWSERS --> This is my page! CÁC ĐỐI TƯỢNG JAVASCRIPT Giới Thiệu Các Đối Tượng Trong Javascript Đối tượng là một tập hợp bao gồm các biến (còn gọi là các thuộc tính của đối tượng) và các hàm (phương thức – method). Ví dụ trong JavaScript thì một chuỗi là một đối tượng. Trong đối tượng này có thuộc tính length chỉ chiều dài một chuỗi. Phương thức toUpperCase() chuyển đổi tất cả các ký tự alpha thành chữ hoa. Để tạo một đối tượng ta sử dụng cú pháp chung như sau : var biendt = new Object(). Sử dụng toán tử new để tạo một thực thể cho đối tượng Object và gán cho biến biendt. Chúng ta sử dụng toán tử dấu chấm để truy cập đến các phương thức và thuộc tính của đối tượng. Ví dụ : S = new String(“JavaScript”); // S=”JavaScript”; Để truy cập đến thuộc tính length và phương thức toUpperCase ta sử dụng hai câu lệnh sau: S.length; S.toUpperCase(); Đối Tượng String Được sử dụng để lưu trữ và thực hiện các thao tác trên dữ liệu kiểu chuỗi ký tự. Ta có thể khởi tạo đối tượng này bằng cách sử dụng toán tử new hoặc gán trực tiếp một chuỗi cho một biến. var bien_string = new String(chuoi_khoi_tao); Hoặc: var bien_string = chuoi_khoi_tao; Ví dụ : var str1 = new String(“Hoc JavaScript”); var str2 = “Hoc JavaScript”; hai câu lệnh trên tương đương. Để nối 2 chuỗi ta sử dụng toán tử +. Đối tượng này có các thuộc tính và phương thức sau: Thuộc tính: length. Đây là thuộc tính chỉ đọc dùng lưu trữ chiều dài của chuỗi. Ví dụ : var S1 = “KHOA”, S2=”TINHOC”; var str = S1 + S2; // str =”KHOATINHOC”; var len = str.length; Giá trị của len là 10. Các phương thức xử lý chuỗi. Tên phương thức Mô tả Ví dụ CharAt(n) Trả về ký tự thứ n. Vị trí đầu tiên của chuỗi được tính là 0. Nếu không có ký tự nào sẽ trả về null. S=”JavaScript”; T =S.charAt(2); //t=’v’ T = S.chatAt(12); //t=null indexOf(substr[,startindex]) substr là một chuỗi con, startindex là một số nguyên tuỳ chọn (mặc định bằng 0). Hàm trả về chỉ số của substr trong chuỗi bắt đầu tính từ startindex. Nếu không có trả về giá trị -1 var str1 = “BDBEBEEBIBOBU"; var str2 = “BE” var s = str1.indexOf(str2); // s = 2 lastIndexOf(substr[,startindex]) Hoạt động giống indexOf() nhưng tìm kiếm theo chiều ngược lại. var str1 = “BDBEBEEBIBOBU"; var str2 = “BE” var s = str1.lastIndexOf(str2); // s = 4 substr(start[, length]) Trích chuỗi con bắt đầu từ vị trí start và chiều dài length. Nếu không có tham số length, sẽ trả về chuỗi con từ vị trí start đến hết chuỗi. var s, ss; var s = "wrghhhjdog."; ss = s.substr(4,3); // ss = “hhj” substring(start, end) Trích chuỗi con từ vị trí start đến vị trí end. var s, ss; var s = "wrghhhjdog."; ss = s.substring(3,7); // ss = “hhhjd” replace(rgExp, replaceText) Trả về chuỗi mới trong đó đã thực hiện thay một phần các xuât hiện của chuỗi rgExp thành chuỗi replaceText toLowerCase() Trả về chuỗi đã chuyển sang chữ thường Var S, SS = “aSDD da”; S = SS.toLowerCase(); //S = “asddda” toUpperCase() Trả về chuỗi đã chuyển sang chữ hoa. Var S, SS = “aSDD da”; S = SS.toUpperCase(); //S = “ASDDDA” split([chuoi_phan_cach]) Chia chuỗi thành một mảng với một chuỗi con đóng vai trò là chuỗi phân cách. Var S = “today is Sunday”; var Ar = S.split(“ “); //dấu phân cách là khoảng trắng //Mảng Ar có giá trị: Ar[0] = “today”, Ar[1] = “is”, Ar[2]= “Sunday”. Ví dụ: Tìm số ký tự của chuỗi S là ký tự alpha. var S=”addff dG 34”, countch =0; for(i=0; i<S.length; i++) { ch = S.charAt(i); if ( ((ch >= ’A’) &&( ch = ’a’) &&( ch <= ‘z’)) ) countch++; } alert(“Chuỗi “ + S +” có “ + countch + “ ký tự alpha”); Đối Tượng Date Đối tượng này lưu trữ các thông tin về thời gian và thực hiện thao tác với kiểu dữ liệu DateTime. Cú pháp 1: Tạo một thực thể cho đối tượng Date lấy giá trị hiện hành. var biendate = new Date(); Đối tượng biendate tạo ra sẽ chứa giá trị ngày, tháng, năm, giờ, phút, giây của đồng hồ hệ thống trong máy người sử dụng. Cú pháp 2 : var biendate = new Date(“chuoi_date_time”): sẽ tạo biến có giá trị ngày, thángđược xác định trong chuoi_date_time. Ví dụ: var d = new Date("12/10/2002 3:4:5") sẽ tạo biến d lưu giá trị ngày 10 tháng 12 năm 2002 và 3 giờ 4 phút 5 giây. Cú pháp: var biendate = new Date(songuyen): sẽ tạo biến lưu thời gian có giá trị tính ra mili giây đến thời điểm đó tính từ 1/1/1970 lúc 0 giờ 0 phút 0 giây là songuyen mili giây. Ví dụ : var d = new Date(1030899600000); sẽ tương đương d = new Date(“9/2/2002”) vì số mili giây tính từ 1/1/1970 đến ngày 2 tháng 9 năm 2002 là 1030899600000. Dạng khai báo thứ 2 thường được sử dụng để chuyển dữ liệu kiểu chuỗi sang kiểu DateTime. Một số phương thức của đối tượng Date() hay được sử dụng. Tên phương thức Mô tả getDate() Trả về ngày hiện hành dưới dạng số nguyên từ 1 đến 31 getDay() Trả về ngày trong tuần dưới dạng số nguyên: 0, 1,2..6 tương ứng chủ nhật, thứ 2, thứ 3, ,thứ 7 getHours() Trả về giờ dưới dạng số nguyên từ 0 đến 23 getMinutes() Trả về phút dưới dạng số nguyên từ 0 đến 59 getSeconds Trả về giây dưới dạng số nguyên từ 0 đến 59 getTime() Trả về số mili giây tính từ ngày 01/01/1970 00:00:00 getYear() Trả lại số năm tính từ 1900 getFullYear() Trả lại số năm dưới dạng 4 chữ số setDate() Thiết lập ngày dưới dạng số nguyên trong khoảng từ 1 đến 31 setMonth() Thiết lập tháng dưới dạng số nguyên trong khoảng từ 0 đến 11 setFullYear() Thiết lập năm dưới dạng 4 số nguyên setHours() Thiết lập giờ dưới dạng số nguyên trong khoảng từ 0 đến 23 setMinutes() Thiết lập phút dưới dạng số nguyên trong khoảng từ 0 đến 59 setSeconds Thiết lập giây dưới dạng số nguyên trong khoảng từ 0 đến 59 setTime() Thiết lập thời gian có số mili giây tính từ 1/1/1970 là số nguyên tham số. Các ví dụ ứng dụng đối tượng Date. Ví dụ 1: In ngày tháng năm hiện hành ra trang web theo định dạng sau:”Hôm nay là thứ hai ngày 2 tháng 9 năm 2002 Bây giờ là 08:30:24 (PM) <!-- // Hàm trả về chuỗi thứ theo giá trị tham số n. n= 0 -> Chủ nhật, n=1->Thứ hai // n là số nguyên có giá trị 0 -> 6. function fmthu(n) { switch (n) { case 0: return "Chủ nhật"; case 1: return "Thứ hai"; case 2: return "Thứ ba"; case 3: return " Thứ tư"; case 4: return " Thứ năm"; case 5: return " Thứ sáu"; case 6: return " Thứ bảy"; } } //Hàm trả về chuỗi số viết bằng 2 chữ số //Tham số n là một số có giá trị từ 0->31 function fmTime(n) { if (n<10) return "0" + n; else return n; } // Hàm in các chuỗi cần thiết ra màn hinh( function viet_ngay() { var d = new Date(); thu = fmthu(d.getDay()); ngay = fmTime(d.getDate()); thang = fmTime(d.getMonth() + 1); // Cộng thêm 1 do getMonth() trả về giá trị từ 0 đến 11. nam = d.getFullYear(); S1 = ""; S1 += "Hôm nay là " + thu + " ngày " + ngay + " tháng " + thang + " năm " + nam; gio = fmTime(d.getHours()); var ampm; if (gio > 12) { gio = fmTime(gio - 12); ampm = "PM"; } else ampm = "AM"; phut = fmTime(d.getMinutes()); giay = fmTime(d.getSeconds()); S2 =" Bây giờ là " + gio + " : " + phut + " : " + giay + "(" + ampm + ")"; // Viết chuỗi S1 ra trang Web và xuống dòng document.write (S1 + ""); // Viết chuỗi S1 ra trang Web document.write(S2); } - -> Ví dụ về kiểu Date viet_ngay() Đối Tượng Array Được sử dụng tạo, lưu trữ các cấu trúc dữ liệu dạng mảng. Để tạo một mảng ta sử dụng các cú pháp sau: var ten_mang = new Array(); Dùng để tạo một mảng rỗng. var ten_mang = new Array(n); Tạo mảng có số phần tử là n. var ten_mang = new Array(gt1, gt2, ..,gtn); Tạo mảng có n phần tử và gán giá trị cho các phần thử này. Mỗi phần tử trong mảng được tham chiếu như sau: ten_mang[n], n là một số nguyên chỉ phần tử cần truy cập. Thuộc tính và phương thức. Thuộc tính: length thể hiện số phần thử của mảng. Các phương thức: join ([chuoi_phan_cach]): Trả về một chuỗi bằng cách liệt kê thứ tự các thành phần trong chuỗi và các thành phần được phân cách với nhau bởi chuỗi phân cách (mặc định là một khoảng trắng). Ví dụ: var Ar = new Array(“Mon”, “Tue”, “Wed”); var s1 = Ar.split (“-“); // s1 = “Mon-Tue-Wed”. var s2 = Ar.split (); // s2 = “Mon Tue Wed”. concat (ArrObj); Trả về một mảng đã được nối thêm mảng ArrObj. var Arr1 = new Array(“Mon”, “Tue”, “Wed”); var Arr2 = new Array(“Thu”); var Arr = Arr1.cocat(Arr2); // Arr[0] = “Mon”, Arr[1] = “Tue”, Arr[2] = “Wed”, Arr[3]= “Thu” toString(). Biến một mảng thành một chuỗi được phân cách bằng dấu phẩy. reserver(): Tạo lại bản sao của mảng cùng với những phần tử đảo ngược. Lưu ý: Thuộc tính length của mảng tự động tăng khi ta thêm các phần tử vào mảng. Ví dụ sau cho phép ta nhập vào các phần tử mảng mà không biết trước số phần tử sẽ nhập. var A = new Array(); /*tạo một biến đối tượng mảng chưa có phần tử nào và là biến toàn cục*/ function Input() { do { var i = A.length; A[i] = prompt(“Nhập phần tử thứ “ + i); } while (confirm(“ Click OK để nhập tiếp”)); } function OutPut() { alert(“ mảng A có chiều dài “ + A.length + “ và giá tri(: “ + A); } Click đây để nhập liệu Click đây để xuât liệu Chú ý: Phương thức alert() có đối số là một chuỗi. Khi đối số là mảng, nó tự động đổi kiểu mảng thành kiểu chuỗi bằng cách thêm vào các ký tự dấu phẩy vào giữa các phần tử mảng trong chuỗi (JavaScript đã sử dụng phương thức toString()). Mảng chúng ta vừa học cho phép lưu các giá trị theo vị trí bằng số. Mảng dùng chuỗi để lưu các giá trị gọi là mảng liên kết. Ví dụ: tạo bảng lưu các danh mục điện thoại. var phone = new Array(); phone[“binh”] = “8763892”; phone [“tuan”] = “8465782”; Hai dòng lệnh trên đã đặt các liên kết vào trong mảng phone. Để lấy số điện thoại của “tuan” trong mảng, ta sử dụng lệnh: phone[“tuan”]. Mảng dạng này rất thích hợp trong việc lưu trữ những cặp giá trị song song. Ví dụ ta muốn lưu một danh sách các mặt hàng mà khách hàng đã chọn mua hàng cùng số lượng mỗi mặt hàng. Để truy cập toàn bộ mảng này, ta sử dụng vòng lặp for (bien in mang) theo cú pháp như đã giới thiệu ở phần trước. Ví dụ: var ArrIndex = new Array(“1, abc”, 123), ArrMSSV = new Array(); ArrMSSV[“Vu”] = 123456; ArrMSSV[“Lan”] = 481456; ArrMSSV[“Hoang”] = 123786; ArrMSSV[“Lan”] = 123861; for (i in ArrIndex) alert(ArrIndex[i]); for(i in ArrMSSV) alert(ArrMSSV[i]); Ví dụ 2: Viết 2 hàm cho phép nhập, xuất một mảng liên kết. <!- - A = new Array(); // Nhập 2 phần tử vào mảng. function inPut() { i=0; do { tp = prompt("Nhap vao phan tu"); { value = prompt("value "); A[tp] = value; i++; } }while(i<2); } function outPut() { for (i in A) alert("A[" + i + "]: " + A[i]); } - -> Nhập Xuất Đối Tượng Boolean Đối tượng Boolean là một đối tượng bao ngòai (wrapper) cho một giá trị boolean. Đối tượng này được dùng để chuyển một giá trị không phải boolean (non-boolean) thành giá trị boolean. cú pháp tạo một đối tượng boolean: var variablename = new Boolean(boolvalue) Nếu một đối tượng boolean không có giá trị khởi tạo (giá trị ban đầu) hoặc nó bằng 0, null, "", NaN(Not A Number) thì giá trị khởi tạo của nó sẽ được gán là false. Đối tượng boolean chỉ nhận giá trị true khi giá trị khởi tạo là chuỗi, kể cả chuỗi "false" - Ví dụ về đối tượng boolean với giá trị khởi tạo là false: var var1=new Boolean() var var2=new Boolean(0) var var3=new Boolean(null) var var4=new Boolean("") var var5=new Boolean(false) var var6=new Boolean(NaN) Ví dụ về đối tượng boolean với giá trị khởi tạo là true: var var1=new Boolean(true) var var2=new Boolean("true") var var3=new Boolean("false") var var4=new Boolean("Richard") Đối Tượng Toán Học Đối tượng Math bao gồm tất cả các hàm và các hằng số toán học có sẵn. Ta không cần phải tạo đối tượng Math trước khi dùng. Để sử dụng một hàm (phương thức) hay hằng số (thuộc tính) của đối tượng này, ta sử dụng cú pháp: Math[.{property | method}] Các ví dụ: Lấy một số random nằm trong khoảng 0 và 1 trong biến "r_number" ta có hàm random(): r_number=Math.random(); Để làm tròn số 8,6 ta có hàm round(): r_number=Math.round(8.6); Để truy cập hằng số PI: r_number = Math.PI ; DOM (Document Object Model) Trên trang web có nhiều đối tượng. Để có thể quản lý tốt các đối tượng này, chúng ta phải biết cách trình duyệt quản lý chúng như thế nào và cách truy cập đến từng đối tượng trong mô hình. Sau đây là tổ chức phân cấp của mô hình DOM (Hình sau). Ở đầu của DOM là đối tượng windows là cửa sổ chứa trang web đang xem. Đối tượng này lại chứa các đối tượng con: navigator, location, document...Mỗi đối tượng này lại chứa nhiều thông tin trong nó như các thuộc tính, các phương thức và các đối tượng con khác. Để truy cập đến đối tượng hoặc các thành phần của đối tượng nào, ta bắt đầu từ đối tượng windows đi xuống. Các đối tượng hoặc đối tượng với các phương thức, thuộc tính của nó được phân cách nhau bởi dấu chấm (.). Ví dụ : Đối tượng navigator chứa các thông tin về trình duyệt. Hai thuộc tính appName lưu tên của trình duyệt và appVersion lưu thông tin về phiên bản của trình duyệt. Câu lệnh window.navigator.appName và window.navigator.appVersion trả về chuỗi chứa tên và phiên bản của trình duyệt máy đang sử dụng. Đối tượng History lưu thông tin các trang Web mà người sử dụng đã duyệt qua trong của sổ hiện hành. Đối tượng này có phương thức go(n), trong đó n là một số nguyên. Nếu n>0 sẽ tương đương với việc click vào nút forward n lần, nếu n<0 thì ngược lại. Do vậy muốn quay lại 2 trang trước ta chỉ cần gọi câu lệnh: window.history.go(-2). Tuy nhiên nếu đoạn mã JavaScript truy cập đến ngay cửa sổ chứa nó, có thể bỏ từ window (window mặc định là cửa sổ hiện hành với trang chứa JavaScript). Trong mô hình trên thì đối tượng document là đối tượng quan trọng và hay sử dụng nhất. Nó chứa toàn bộ tài liệu của trang web như: hình ảnh, liên kết, biểu mẫu . . . Ta cũng thấy tất cả các thành phần của đối tượng này được tổ chức theo dạng mảng. Để truy cập đến được các thành phần của đối tượng này, ta có thể truy cập theo chỉ số mảng hoặc theo tên của đối tượng. Lưu ý là chỉ số mảng được tính từ 0. Ví dụ : Cho một form như sau: Chú ý: Trang ở trên có 2 form. Trong form thứ nhất lại có 2 textbox có cùng tên “diachi”. Lấy giá trị của trong textbox có tên là ten trong form thứ nhất ta sử dụng một trong những câu lệnh sau. window.document.forms[0].ten.value; document.forms[0].ten.value; document.form1.ten.value; Lấy giá trị phần tử địa chỉ thứ 2 trong form1 document.form1.diachi[1].value hoặc document.forms[0].elements[2].value; Đếm số form trong trang: document.forms.length; Chúng ta thường sử dụng mô hình này để kiểm tra tính hợp lệ của một biểu mẫu trước khi thông tin trong biểu mẫu được gửi lên server hoặc kiểm tra trình duyệt của người sử dụng để hướng dẫn người sử dụng đến những trang thích hợp. Ví dụ Tạo form như hình vẽ. Nhập giá trị X, Y và chọn phép toán +, - , *, /. Click nút calcul sẽ kiểm tra các giá trị trong X, và Y có hợp lệ chưa. Nếu hợp lệ, kết quả sẽ được ghi vào textbox result. Click delete sẽ xoá các giá trị trong form trở về giá trị mặc định ban đầu. X, Y hợp lệ khi: là một số. Đối với phép toán chia thì Y phải khác 0. <!-- // Kiểm tra giá trị X và Y có hợp lệ hay không. Nếu giá trị nào không hợp lệ, // chuyển con trỏ về lại ô đó và trả về giá trị false, ngược lại trả về true. function checkXY() { var X = document.calculation.gtx.value; var Y= document.calculation.gty.value; if (isNaN(X) || (X.length==0)) {//Đưa con trỏ về textbox X khi X không hợp lệ. document.calculation.gtx.focus(); return false; } if (isNaN(Y) || (Y.length==0)) { document.calculation.gty.focus(); return false; } return true; // Trả về true nếu X và Y đều là số. } /* Hàm kiểm tra xem người sử dụng đã chọn phép toán nào và trả về phép toán đã chọn. Nếu chưa chọn hàm sẽ trả về giá trị "chuachon".*/ function getOpe() { var i, l = document.calculation.ope.length; // l=4 for (i=0; i<l; i++) if (document.calculation.ope[i].checked ) { alert(document.calculation.ope[i].value); return document.calculation.ope[i].value; } return "chuachon"; } function cal() { if (!checkXY()) alert("Giá trị phải nhập là một số "); else { var pt = getOpe(); var X = document.calculation.gtx.value; var Y = document.calculation.gty.value; switch (pt) { case "cong": document.calculation.result.value = parseFloat(X) + parseFloat(Y); break; case "tru": document.calculation.result.value = X - Y; break; case "nhan": document.calculation.result.value = X * Y; break; case "chia": document.calculation.result.value = X / Y; break; case "chuachon": alert("hay chon mot phep toan"); } } } --> X= Y= Operation + - * / Result ĐỐI TƯỢNG SỰ KIỆN Giới Thiệu Các sự kiện là thuộc tính rất quan trọng hỗ trợ sự tương tác đối với trang Web. Ta có thể tạo ra những trình xử lý các sự kiện được thực hiện nhằm phản ứng lại những sự kiện phát sinh do người sử dụng hoặc do hệ thống. Trong chương này, ta sẽ tìm hiểu về những sự kiện hỗ trợ là HTML Động. ta sẽ còn tìm hiểu cách thay đổi nội dung và vị trí của các phần tử trên trang web theo tính động. Đối Tượng Sự Kiện Mô hình Sự kiện (Event Model) là một phần quan trọng thuộc mô hình đối tượng tài liệu (Document Object Model). Đó là thành phần chính tạo nên một trang động và tương tác. Mô hình Sự kiện xác định được những sự kiện nào phát sinh cho một phần tử, cách thức sự kiện được giao cho một trình xử lý sự kiện và dữ liệu có thể cung cấp cho trình xử lý sự kiện (event handler). Một sự kiện (event) là một thông báo xảy ra để đáp ứng lại một hành động. Sự kiện đó có thể là phát sinh từ hệ thống như là một sự thay đổi về trạng thái hoặc phát sinh do người sử dụng- kích chuột hoặc ấn phím trong lúc xem tài liệu. Một bộ xử lý các sự kiện là một khối các mã (code) liên kết với nhau để nhận điều khiển khi một sự kiện tượng ứng xảy ra. Mỗi event handler có một đốt tượng sự kiện liên kết. Đối tượng sự kiện cung cấp thông tin về sự kiện đó - loại sự kiện và vị trí của con trỏ tại thời gian của sự kiện. Khi một sự kiện phát sinh, thì sự kiện đó được gởi đi như là một đối số đối với bộ xử lý sự kiện. Dĩ nhiên, cần phải có một trình xử lý trong trường hợp thứ nhất. Ví dụ khi người sử dụng ấn nút con chuột, một sự kiện tác động lên chuột được phát sinh. Đối tượng sự kiện có chứa những thông tin sau: Loại sự kiện – trong trường hợp này là sự tác động lên chuột. Các vị trí x và y của con trỏ khi ta ấn nút con chuột. Con số chỉ ra nút con chuột được sử dụng. Một trường có chứa những phím đặc biệt (Control, Alt, Meta, hoặc Shift) đã được nhấn vào thời điểm của sự kiện. Một số những sự kiện được sử dụng thông thường trong DHTML là: Những sự kiện con chuột Sự kiện Mô tả onclick Nó được phát sinh khi người sử dụng kích vào một phần tử, hoặc ấn vào một phím Enter lên phần tử đó. ondblclick Nó được phát sinh khi người sử dụng kích đúp chuột lên một phần tử. onmouseout, onmousedown, onmouseup, onmousemove, onmouseover Những sự kiện đều được phát sinh nhằm đáp ứng lại sự chuyển động của con chuột Các sự kiện bàn phím Sự kiện Mô tả onkeydown Sự kiện này xuất hiện khi một phím được nhấn onkeyup Sự kiện này xuất hiện khi người sử dụng buông thả phím Các sự kiện focus và chọn lựa: Sự kiện Mô tả onfocus Xuất hiện khi một phần tử nhận được focus. onblur Xuất hiện khi một điều khiển không còn focus. Các sự kiện khác: Sự kiện Mô tả onload Xuất hiện sau khi được nạp và các phần tử trên trang được nạp. onunload Xuất hiện ngay trước khi tài liệu không được nạp và người dùng chuyển qua trang khác onreset Xuất hiện khi người sử dụng chọn nút Reset trên một form onsubmit Xuất hiện khi người sử dụng chọn nút Submit trên một form Sau đây là một ví dụ trong đó các sự kiện con chuột khác nhau của con chuột được bắt giữ lại và trang đó được thay đổi theo tính động để đáp lại những sự kiện đó. Hãy xem lại đoạn mã này trong Internet Explore. capturing Mouse Event <P onmouseover="style.color = 'blue';" onmouseout="style.color = 'black';" onclick="style.fontSize='25'">Move the mouse over this line and see what happen Xử Lý Sự Kiện Trong Internet Explore Một trình xử lý sự kiện là một tập hợp những câu lệnh được thực hiện để đáp ứng lại một sự kiện. Ví dụ, ta có thể gán một hàm vào sự kiện onclick của một phần tử nút lệnh. Định nghĩa xử lý sự kiện Có nhiều cách để định nghĩa một hàm xử lý sự kiện: <input type="button" name="button" value="Click Here" onClick="clickfunc();"> Ta còn có thể định nghĩa một trình xử lý sự kiện khi sử dụng thẻ . Nghĩa là, ta có thể tạo ra một script áp dụng được vào một sự kiện riêng đối với một phần tử đã được xác định. Các thuộc tính FOR và EVENT của thẻ SCRIPT được dùng trong định nghĩa: ... the JavaScript code to handle the event Sự thuận lợi của việc sử dụng thẻ nhằm định nghĩa các hàm xử lý sự kiện là nó có vị trí đứng trước so với chức năng xử lý sự kịên được xác định trong thẻ (có sẵn) inline. Bảng sau đây lịêt kê một số thuộc tính của đối tựơng sự kiện: Thuộc tính Mô tả type Đây là một giá trị chuỗi xác định được tên của sự kiện. Ví dụ: "Click" srcElement Nó chỉ ra đối tượng mà kích hoạt sự kiện. altKey Trạng thái của phím Alt khi sự kiện xuất hiện ctrlkey Trạng thái của phím Ctrl khi sự kiện xuất hiện shiftKey Trạng thái của phím Shift khi sự kiện xuất hiện keyCode Đây là giá trị của số nguyên để nhận dạng được phím kích hoạt sự kiện button Nhận dạng được nút con chuột được nhấn x,y Đây là những giá trị số nguyên xác định được đối tượng pointer khi chiếu đến đối tượng vật chứa (container object) screerX, screenY Đây là những giá trị số nguyên xác định vị trí đối tượng pointer trên desktop returnValue Xác định giá trị trả về (return value) của sự kiện hay của cửa sổ hội thoại. cancelBubble Chế độ cài đặt nhằm ngăn ngừa sự kiện hiện thời không nổi bọt sự kiện. Nổi Bọt Sự Kiện Trước đây, nếu muốn xác định được hành vi mặc định cho một sự kiện, ví dụ như button click thì ta phải mô tả đoạn mã cho mỗi đối tượng. HTML Động cung cấp hệ thống phân cấp vật chứa đối với các tài liệu HTML. Nghĩa là, ta có thể viết bộ xử lý sự kiện chung cùng nhiều đối tượng . Khi một sự kiện phát sinh trong một đối tượng con thì nó có thể dời lên phân cấp các phần tử trên trang tới khi nó tìm thấy bộ xử lý sự kiện. Quá trình này được gọi là "event bubbling" (Quá trình nổi bọt sự kiện). Hình minh họa: Quá trình nổi bọt sự kiện. Trong sơ đồ trên đây, khi sự kiện siêu liên kết phát sinh (fire), thì sự kiện đó tạo ngược lại quá trình phân cấp cho đến khi nó tìm ra một trình đìêu khiển . Chính sự phân cấp này được xác định bởi luồng HTML và không phải theo thứ tự các hạng mục (item) được hiển thị lên màn hình. Ví dụ như, ta có thể định vị heading ở đầu trang cho dù sự kiện đó sẽ nổi bọt ngược lên phần tử BODY. Welcome to Asset <P style = "color:limegreen" onclick="AlsoClicked()">This is good fun. This is another heading function clickhere() { alert("This element was clicked " + window.event.srcElement.tagName); } function AlsoClicked() { alert("You clicked me" + window.event.srcElement.tagName); } Chúng ta hãy hiểu mã trên đóng chức năng như thế nào. Khi người sử dụng kích vào tiêu đề "Welcome to Asset" thì sự kiện onclick được phát sinh và H1 trở thành phần tử nguồn. Tuy nhiên, không có bộ xử lý sự kiện nào được được gán cho H1 vì vậy sự kiện onclick sẽ tạo ngược lại sự phân cấp đối với phần tử BODY. Phần tử BODY có một bộ xử lý sự kiện gọi là clickhere ( ) đối với sự kiện onclick dùng để làm hiển thị "This element was clicked H1". Khi người dùng kích vào từ "good", thì sự kiện onclick đối phần tử FONT được phát sinh. Và, không có trình xử lý sự kiện đối với phần tử FONT, nên sự kiện onclick tạo ngược lại sự phân cấp đối với phần tử P. Phần tử P có một bộ xử lý sự kiện AlsoClicked( ) dùng để hiển thị thông báo "You clicked me FONT", trình sự kiện lúc đó vẫn tiếp tục đường dẫn của nó ngược lên sự phân cấp để chạm vào phần tử BODY. Trình xử lý sự kiện clickhere ( ) đã gắn cho phần tử BODY sẽ được kích hoạt và thông báo "This element was clicked FONT" được hiển thị. Nếu không muốn các sự kiện gây ngược lại sự phân cấp, thì ta đặt thuộc tính cancelBubble của đối tượng sự kiện là True cho bất kỳ bộ xử lý sự kiện nào. Sau khi trình xử lý trả về, thì sự kiện đó ngừng tạo ra chuỗi sự kiện và đi đến kết thúc ngay lập tức. Welcome to Asset This is good fun. This is a H2 heading This is another H1 heading function setBodyStyle() { var head1 = document.all.tags("H1"); for(i=0; i<head1.length;i++) head1.item(i).style.color="hotpink"; } function setParaStyle() { var pstyle = window.event.srcElement; while ((pstyle !=null) && (pstyle.tagName != "P")) { pstyle = pstyle.parentElement; } if (pstyle != null) pstyle.style.textDecoration ="underline"; window.event.cancelBubble = true; } Điểm thuận lợi trong việc sử dụng quá trình tạo thành chuỗi sự kiện là ta không còn phải viết đoạn mã cho mỗi phần tử. Chẳng hạn, khi người dùng kích vào hộp kiểm tra (check box). Điển hình là ta sẽ phải viết mã code đối với sự kiện click của mỗi hộp kiểm tra (check box).Thay vì thế ta có thể viết thủ tục trên chính form đó. Khi một trong những hộp kiểm tra (check box) được chọn, thì sự kiện đó sẽ tự động tạo ra chuỗi sự kiện cho một form mẹ và xử lý ở đây. Không phải tất cả các phần tử đều hỗ trợ cho tất cả các sự kiện. Bảng sau đây liệt kê ra một số các phần tử của mô hình đối tượng tài liệu và các sự kiện liên quan của chúng. Sự kiện Phần tử Mô tả onabort Image Được kích hoạt khi người sử dụng huỷ bỏ việc tải một hình ảnh bằng cách kích vào một kết nối hoặc nút Stop onblur Window, frame, all form element Khi người sử dụng bỏ đi một focus ra khỏi một cửa sổ, khung hay một phần tử form onclick Button, radio button, check box, submit button, reset button, link được kích hoạt khi người sử dụng kích trái vào nút con chuột . onchange Text field, textarea, select list Nó được kích hoạt khi người sử dụng thay đổi giá trị của phần tử. onfocus Window, frame, all form element Nó được kích hoạt khi người sử dụng đặt focus vào một cửa sổ, khung, hay phần tử form onload Document, applet, frameset, img, link, object, script, style, window Nó được kích hoạt khi trang được nạp trình duyệt. onmousedown Button, document, link Nó được kích hoạt khi người sử dụng ấn nút con chuột onmouseout Area, layer, link Nó được kích hoạt khi người sử dụng di chuyển con trỏ đi từ một phần tử. onmouseover Area, layer, link Nó được kích hoạt khi người sử dụng di chuyển con trỏ khắp một phần tử. onmouseup Button, document, link Nó được kích hoạt khi người sử dụng nhả nút con chuột đã được ấn. onreset Form Người sử dụng đặt lại form onresize Window, frame Nó được phát sinh khi người sử dụng đặt lại kích thước một cửa sổ hoặc một khung. onsubmit Form Nó được kích hoạt khi người sử dụng đệ trình một form. onunload Document, frameset, image, window Nó được kích hoạt khi người sử dụng chuyển sang một trang khác. Các phần tử và các sự kiện có liên quan trong IE (Internet Explorer) Các Ví Dụ Các ví dụ sau sẽ mô phỏng các thao tác hay được sử dụng. Không cho chọn văn bản trong trang web và không cho sử dụng chuột phải (sử dụng trình duyệt IE) function click() { if (event.button==2) { alert('Trang nay khong cho su dung chuot phai!') } } document.onmousedown=click; document.onselectstart=new Function ("return false"); Nội dung này sẽ không thể dùng chuột để chọn. Không thể click chuột phải. Kiểm tra nút chuột nào được Click? function TestMouse() { document.frm.left.checked =( window.event.button==1); document.frm.mid.checked =(( window.event.button==3)|| ( window.event.button==4)); document.frm.right.checked =( window.event.button==2); } Left Midle Right Lấy tọa độ của cursor. function document_onMouseOver() { textbox.value= "mouse over" ; } function document_onMouseOut() { textbox.value = "mouse out" ; } function document_onMouseDown() { textbox.value = "mouse down at:" + window.event.x + "," + window.event.y; } function document_onMouseMOve() { textbox.value = "mouse moved: " + window.event.x + "," + window.event.y ; } Lấy mã Unicode của phím được nhấn, Kiểm tra người sử dụng có nhấn phím Shift hay không. function TestKey() { window.code_pressed.innerHTML= "Key pressed:" +window.event.keyCode; window.shiftkey.innerHTML = "Pressed Shift Key =" +(window.event.shiftKey == true); } Reset, submit, thay đổi thuộc tính action của một Form function FSubmit() { if(document.frm.submit_YN.checked) return true; else { alert("Click chon trong checkbox de submit!"); return false; } } function ToScript(path) { document.frm.action=path; document.frm.submit(); } <form name=frm action=getform.php onsubmit="return FSubmit()" onreset=" alert('Vua bam reset');";> Submit? Lấy văn bản đã chọn trong trang web function document_onclick() { var textrange = document.selection.createRange(); textbox.value = textrange.text; } Example 1: Select some text with the mouse... ...or move the mouse over a hyperlink: Pop-up Windows JavaScript cho ta khả năng mở nhiều cửa sổ trong trình duyệt và kiểm soát những gì có trong chúng. Phần này chúng ta học cách mở một cửa sổ mới trong JavaScript, tạo cho cửa sổ thể hiện theo ý muốn, định vị cửa sổ trên màn hình và đóng cửa sổ. Cửa sổ là một đối tượng Window. Đối tượng này có phương thức Open() cho phép mở ra một cửa sổ mới theo cú pháp sau: window.open(URL, Name, Features) trong đó: URL: URL của trang cần hiển thị ra trong cửa sổ mới. Name: Tên của cửa sổ. Tham số này chỉ hữu ích khi sử dụng phần tử target của các liên kết trong HTML Features: Các đặc điểm cho phép kiểm soát cử sổ mới. Các đặc tính này phân cách nhau bởi các dấu phẩy. Ngoại trừ với các đặc điểm liên quan đến các pixel như chiều rộng, cao. . . nếu cần tham số nào, ta chỉ việc liệt kê nó trong dấu ngoặc của tham số thứ 3. Bảng sau liệt kê các đặc điểm của các cửa sổ. Đặc điểm Hiệu ứng height=X Điều chỉnh chiều cao cửa sổ thành X pixel width = X Điều chỉnh chiều rộng cửa sổ là X pixel. Left = X Đặt cạnh trái của cửa sổ cách cạnh trái màn hình là X pixel. (trong IE 4.0) top = X Đặt cạnh trên của cửa sổ cách cạnh trên màn hình là X pixel. (trong IE 4.0) Location Thêm thanh địa chỉ để có thể nhập URL. Menubar Thêm thanh menu Resizable Kiểm soát việc thay đổi kích thước cửa sổ Scroolbars Thêm thanh cuộn nếu nội dung của trang lớn hơn kích thước cử sổ screen X= X Đặt cạnh trái của cửa sổ cách cạnh trái màn hình là X pixel.(trong NS 4.0) screenY = X Đặt cạnh trên của cửa sổ cách cạnh trên màn hình là X pixel. (trong NS 4.0) Status Thêm thanh trạng thái Toolbar Thêm thanh công cụ Width = X Điều chỉnh chiều rộng cửa sổ là X pixel. window.Close(): sử dụng để đóng cửa sổ hiện tại. Ví dụ: Tạo một cửa sổ mới tên là W chứa trang chitet.htm. Cửa sổ này rộng 400, cao 350 pixel, có thanh địa chỉ và thanh công cụ. <A href="#" onClick="window.open('thu.htm','W', 'height=350,width=400, location, toolbars');"> Open Ví dụ: Tạo một hàm để mở hoặc đóng một cửa sổ. function newwindow() { var NW = window.open("content.htm"); } Click vào đây để tạo cửa sổ mới Đóng cửa sổ Ví dụ 2: Tạo và điều khiển các cửa sổ Open temp.html trong cua so W1 Close Me! Write Hello to Cua so W1 Open temp2.html trong cua so moi Open temp2.html trong W1 Close window W1 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER Giới Thiệu PHP (Hypertext Preprocessor) là ngôn ngữ script trên server được thiết kế để dễ dàng xây dựng các trang Web động. Mã PHP có thể thực thi trên Webserver để tạo ra mã HTML và xuất ra trình duyệt web theo yêu cầu của người sử dụng. Ngôn ngữ PHP ra đời năm 1994 Rasmus Lerdorf sau đó được phát triển bởi nhiều người trải qua nhiều phiên bản. Phiên bản hiện tại là PHP 5 đã được công bố 7/2004. Đặc Điểm Lập Trình Php PHP là ngôn ngữ được xây dựng ban đầu với mục tiêu tạo các trang web cá nhân dễ dàng và nhanh chóng và giờ đây đã phát triển thành một công nghệ được dùng rộng rãi để xây dựng các ứng dụng web. PHP có các đặc điểm sau: Được xây dựng với mục tiêu phát triển ứng dụng Web. Có nhiều hàm, thủ tục sẵn chuyên dụng trong lập trình Web. Dễ học, dễ sử dụng với cú pháp kết hợp giữa C và Perl. Là ngôn ngữ Script. Là ngôn ngữ lập trình hướng đối tượng gần với C++. Là ngôn ngữ mã nguồn mở. PHP có bản chạy trên hầu hết các hệ điều hành: MS Windows, Linux, SunOS, Quá trình cài đặt đơn giản, dễ dàng. Trợ giúp mạnh cho CSDL qua các hàm, thủ tục sãn có do vậy dễ sử dụng và có tốc độ cao. Hiện tại PHP hỗ trợ các CSDL của Oracle, MS SQL, PostgreSQL, Interbase...Với các CSDL không hỗ trợ, PHP có thể kết nối qua ODBC. Chi phí thấp vì bản thân nó là mã nguồn mở nên không tốn tiền mua bản quyền. PHP còn chạy rất tốt trên các hệ quản trị CSDL miễn phí không đòi hỏi bản quyền như: MySQL, PostgreSQL, Các ứng dụng viết bằng PHP có tốc độ thực thi cao và gây tải ít cho máy chủ. Lập Trình Php Trong Windows Sơ đồ về lập trình server side của PHP. 1: Trình duyệt gửi yêu cầu tới trang PHP. 2: Web server gửi các yêu cầu đó tới trình thông dịch PHP. 3-4: Trình thông dịch PHP thực thi các đọan mã PHP. Quá trình này có thể liên quan đến nhiều tài nguyên như filesystem, database... 5: Kết quả của quá trình thông dịch là các mã HTML được trả về cho Server.. 6: Server gửi mã kết quả HTML về lại trình duyệt. Đặc Điểm Của Một Trang Php Ví dụ: cho trang php đầu tiên. Trang test.php <?php //In ra câu A: classical example: Hello, world! (chú thích) printf("A classical example: Hello, world!"); ?> Kết quả trình duyệt nhận được mã HTML trả về từ server là. (Có thể kiểm tra bằng cách sau khi trình duyệt hiển thị kết quả, từ trình duyệt chọn View /source). A classical example: Hello, world! Ở ví dụ trên, có một câu lệnh PHP đặt xen kẽ với mã HTML. Lệnh printf("A classical example: Hello, world!"); đơn giản chỉ in ra chuỗi: "A classical example: Hello, world!" vào đúng vị trí này. Do vậy, kết quả mà webserver nhận được sau khi thi hành xong mã php và gửi về cho trình duyệt như trên. Đặc điểm một trang php Phần mở rộng của tên trang kết thúc bằng php (có thể thay đổi khi cấu hình webserver). Các đoạn mã script php được đặt trong cặp dấu (hoặc cặp dấu ). Nếu muốn sử dụng ở dạng thứ 2 , ta phải đảm bảo file php.ini trong thư mục WinNT phải có dòng mã short_open_tag = On. Nếu cấm dùng loại short này, ta thay dòng trên bằng short_open_tag = Off. Các chú thích của mã php giống ngôn ngữ C: Sau 2 dấu // cho chú thích 1 dòng và nằm trong cặp dấu /* và */ trong chú thích nhiều dòng. Ngoài ra, trong php còn dấu chú thích cho một dòng giống Perl: # Mã php nằm xen kẽ với mã HTML và có thể ở bất cứ vị trí nào trong tài liệu php. Giống như ngôn ngữ C. Mỗi câu lệnh trong php kết thúc bằng dấu chấm phẩy (;). Một dòng có thể có nhiều câu lệnh. Có thể đặt nhiều khoảng trắng trước các câu lệnh mà không ảnh hưởng tới việc hiển thị của kết quả trên