Kiến thức cơ bản về những ngôn ngữ giao diện phía máy khách

Giữa năm 1993, Tim Berners-Lee - ngôn ngữ HTML 24/11/1995 HTML 2.0 IETF 14/01/1997 HTML 3.2 W3C 18/12/1997 HTML 4.0 W3C 28/10/2014 HTML 5.0 W3C 26/01/2000 XHTML 1.0 W3C 17/12/1996 Hakon Wium Lie - ngôn ngữ CSS 12/05/1998 CSS 2 W3C 06/1999 CSS 3 W3C 09/1995 Brendan Eich - ngôn ngữ LiveScript, sau chuyển thành Javascript Netscape 08/1996 Jscript Microsoft 17/06/2015 ECMAScript 6.0 ECMA 11/1996 ECMAScript ECMA 20/10/2010 AngulaJS Google 27/05/2009 NodeJS Ryan Dahl 05/2005 Prototype Sam Stephénon 19/08/2011 Bootstrap Mark Otto & Jacob Thornton 26/08/2006 jQuery John Resig Internet Explorer Thomas Reardon 16/08/1995 Microsoft C++ Opera Opera Inc. 04/1995 Opera C++ Internet Explorer Mozilla 23/09/2002 Mozilla C++, Js, CSS, Rust, XUL, XBL Safari Apple Inc. 07/01/2003 Apple C++, Objective C UC Browser UC Inside, World in Hand 08/2004 UCWeb (Mobile) Google Chrome Google Inc. 02/09/2008 Google C++ Cốc cốc Cốc cốc 14/05/2013 Cốc cốc C++, Hợp ngữ, Python, JS Máy chủ (Server) Nhận yêu cầu từ máy khách. Xử lý kịch bản phía máy chủ, xuất tài liệu HTML, CSS, JS trả về phía máy khách. Máy khách (Client) Màn hình (Desktop) Hiển thị giao diện tương tác người dùng Trình duyệt (Browser) Gửi yêu cầu và nhận phản hổi. Biên dịch và thực thi các tài liệu HTML, CSS, JS để tạo giao diện tương tác người dùng Người xem (Person) Truy cập Yêu cầu (Request) Phản hồi (Response) SƠ LƯỢC LỊCH SỬ HÌNH THÀNH VÀ PHÁT TRIỂN CỦA CÁC NGÔN NGỮ LẬP TRÌNH GIAO DIỆN WEBSITE VÀ SỰ RA ĐỜI CỦA CÁC TRÌNH DUYỆT WEB KIẾN THỨC CƠ BẢN VỀ NHỮNG NGÔN NGỮ GIAO DIỆN PHÍA MÁY KHÁCH “Lập trình không khó, quan trọng là có ý tưởng, ý tưởng bất thành nếu thiếu kiến thức và kỹ năng.” -- Mai0214cs – (Nguồn tài liệu: Nội dung siêu dữ liệu: nội dung thiết lập những đặc điểm và hành động về những nội dung còn lại của tài liệu, hoặc nó mô tả mối quan hệ tài liệu với những tài liệu khác khác, hoặc những truyền tải ngoài dải thông tin Nội dung phân đoạn: nội dung của tài liệu, nằm trong một đoạn của tài liệu. Nội dung nhúng: nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung từ một ngôn ngữ khác được chèn vào tài liệu Nội dung tương tác: nội dung nhập từ một nguồn khác vào tài liệu hoặc nội dung từ một ngôn ngữ khác được chèn vào tài liệu Nội dung tiêu đề: nội dung định nghĩa phần tiêu đề của một mục. Nội dung mục: nội dung dùng tập hợp một nhóm phần tử khác lại. nội dung dùng để định nghĩa thường được đặt ở đầu hoặc cuối base link meta template title canvas svg math img audio video embed frame object a button keygent label select textarea script noscript style abbr area b bdi bdo br cite code data date datelist del dfn em i input ins kbd map mark meter output progress q ruby s samp small span strong sub sup time u var wbr h3 h2 h4 h6 h1 h5 article aside nav section form table ul ol dl header footer div p fieldset figure pre address blockquote ĐẠI CƯƠNG VỀ HTML HTML (HyperText Markup Language): là ngôn ngữ đánh dấu siêu văn bản, nó dùng các thẻ hoặc các đoạn mã lệnh để chỉ cho trình duyệt biết cách thức hiển thị các thành phần của trang web lên trên trình duyệt. Cấu trúc căn bản của một trang HTML đơn giản Tiêu đề trang Nội dung trang HTML Nội dung văn bản Cấu trúc một phần tử div Thẻ mở Thẻ đóng Tên thẻ Thuộc tính Nội dung thẻ Bố cục Website cơ bản NỘI DUNG SIÊU DỮ LIỆU Những thẻ nội dung siêu dữ liệu là những thẻ được sử dụng chủ yếu trong phần tử head của tài liệu HTML. Những nội dung này không được hiển thị trực tiếp trên giao diện đồ họa người dùng, mà nó được sử dụng để thiết lập những mô tả hay hành động về những nội dung còn lại của tài liệu HTML, hoặc là mô tả quan hệ giữa tài liệu với các tài liệu khác, hoặc những truyền tải ngoài dải thông tin. - Phần tử link dùng để liên kết một tài nguyên khác vào trong trang, thông thường là các trang bộ định kiểu CSS hay được sử dụng để đưa vào trong trang. Các thuộc tính: href, crossorigin, rel, media, hreflang, type, size, title. - Phần tử base dùng để chỉ đường dẫn cơ bản của tài liệu. Khi sử dụng phần tử này bắt buộc sử dụng thuộc tính href hoặc target để chỉ ra đường dẫn cơ bản của website. Các thuộc tính: href, target. - Phần tử title dùng để đặt tiêu đề hoặc tên của tài liệu. Thông thường đoạn text mô tả tiêu đề của trang được hiển thị trên thanh trạng thái của trình duyệt Web. Thiết kế Website - Phần tử meta được sử dụng thông thường cùng với các cặp kiểu, giá trị để mô tả thông tin trang hay cài đặt cấu hình hiển thị trang. - Phần tử script thường được sử dụng để viết những kịch bản động, hay những khối dữ liệu vào trong tài liệu HTML, mà thông dụng nhất là để gọi các tập tin hay viết các đoạn mã javascript. alert(“Thông báo”); Các thuộc tính: src, type, charset, async, defer, crossorigin. Trong đó thông thường thuộc tính async hay được sử dụng để tải các tập tin js không đồng bộ vào trang. - Phần tử noscript được sử dụng và chỉ hoạt động khi trình duyệt của bạn không cho phép thực hiện các đoạn mã được đưa ra trong phần tử script. Trình duyệt của bạn hiện không hỗ trợ chạy Javascript. - Phần tử template thường được sử dụng để khai báo việc lồng ghép HTML có thể được nhân bản bằng cách chèn dữ liệu từ kịch bản script. var data = [ { hovaten: 'Mai Đức Thạch', gioitinh: 'Nam', tuoi: 28 }, { hovaten: 'Trần Kim Duyên', gioitinh: 'Nữ', tuoi: 28 }, ]; var template = document.querySelector('#row'); for (var i = 0; i < data.length; i += 1) { var cat = data[i]; var clone = template.content.cloneNode(true); var cells = clone.querySelectorAll('span'); cells[0].textContent = cat.hovaten; cells[1].textContent = cat.gioitinh; cells[2].textContent = cat.tuoi; template.parentNode.appendChild(clone); } PHẦN TỬ TIÊU ĐỀ Là phần định nghĩa tiêu đề của một mục, thông thường mỗi một tài liệu HTML chỉ được có 1 phần tử h1 và các phần tử h2, h3, h4, h5, h6 khác không giới hạn số lượng. h1 A h2 A h3 A h4 A h5 A h6 A TRÌNH BÀY VĂN BẢN XÂY DỰNG BỐ CỤC TRANG PHẦN TỪ NAV (trình bày danh sách trình đơn) Phần tử nav dùng để xây dựng các danh sách trong HTML thường được sử dụng trong việc xây dựng các trình đơn lựa chọn hay việc xây dựng các trình diễn ảnh. Khi sử dụng phần tử này, ta thường sử dụng kết hợp với các phần tử danh sách. Các phần tử danh sách này có thể kết hợp lồng nhau hay kết hợp các loại danh sách với nhau. Danh sách không thứ tự Danh sách có thứ tự Danh sách định nghĩa - Là danh sách liệt kê các mục bằng ký hiệu chấm tròn trước mỗi mục. - Phần tử đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng dấu chấm tròn. Ta có thể thay đổi dấu chấm tròn bằng các ký hiệu khác bằng cách sử dụng thuộc tính type: square ■ disc ● circle ○ - là danh sách các mục theo thứ tự số thay đổi qua các mục. - Phần tử đánh dấu việc bắt đầu và kết thúc danh sách. - Phần tử có tác dụng thể hiện việc bắt đầu và kết thúc mỗi mục bằng số thứ tự. Thay ký tự thứ tự bằng ký hiệu khác bằng cách sử dụng thuộc tính type: A ABC a abc I I,II,III i i,ii,iii Để bắt đầu từ số n trở lên ta dùng ... - là một danh sách giống như một bảng từ vựng và bảng giải thích thuật ngữ lùi vào trong. - Phần tử đánh dấu bắt đầu và kết thúc danh sách. - Phần tử chỉ ra thuật ngữ cần định nghĩa. - Phần tử chỉ thuật ngữ dùng để định nghĩa. Trang chủ Giới thiệu Tin tức Liên hệ Trang chủ Tin tức Thời trang Xu hướng hiện đại Thời trang Phong cách hiện đại Gia dụng Tiện nghi hàng đầu PHẦN TỬ ARTICLE (trình bày nội dung chính của trang) Phần tử article được sử dụng để trình bày một khối hoàn chỉnh trong một tài liệu, trang, ứng dụng hay site và về nguyên tắc nó có tính độc lập hoặc tái sử dụng. Trong một trang web ta thường dùng trong việc trình bày nội dung chi tiết trang trên diễn đàn, tạp chí, bài báo, một bình luận từ người dùng, một tiện ích tương tác hoặc một mục bất kỳ độc lập với nội dung. Phần tử này được xác định là thành phần chính của trang (ngoại trừ phần đầu, phần cuối, trình đơn hay các sidebar), nó cần sử dụng cùng với một số phần tử đánh dấu trang. Ví dụ sau đây trình bày cách trình bày trang bài viết cùng với các bình luận về bài viết đó: Xu hướng thiết kế web hiện nay 3 ngày trước Tại đây viết nội dung chính của bài viết Bình luận Đăng bởi: Trần Thái Hà 15 phút trước Rất tốt, bài viết này giúp tôi biết thêm nhiều điều! Đăng bởi: Phạm Thanh Hoa 15 phút trước Cảm ơn bạn rất nhiều về những chia sẻ này! PHẦN TỬ SECTION (trình bày danh sách thuộc mục) Phần tử section được sử dụng để trình bày các mục được nhóm chung trong một tài liệu hay ứng dụng. Trên thực tế, ta thường sử dụng chúng để trình bày tin tức liên quan hay sản phẩm liên quan. Khi trình bày phần này, ta thấy chủ đề của từng mục được xác định, nên ta có thể sử dụng các thẻ h1-h6 để đánh dấu tiêu đề từng mục trong phần tử section này. Ví dụ sau đây trình bày cách trình bày bài viết liên quan: Thời trang Cập nhật đầy đủ xu hướng thời trang hiện đại, tốt nhất Việt Nam hiện nay Nội dung chi tiết nói về thời trang Thời trang giới trẻ Giới trẻ thời nay theo đuổi những phong cách thời trang trẻ trung, sôi động. Chi tiết Thời trang mùa hè Mùa hè là mùa nóng bức nhất trong năm, quần áo sáng màu được lựa chọn. Chi tiết PHẦN TỬ ASIDE (trình bày nội dung sidebar của trang) Phần tử aside được sử dụng để trình bày một phần của trang mà nội dung của nó có ít liên quan đến nội dung của trang (hay nói cách khác là nó nằm tách biệt với nội dung của trang). Trong nhiều trang web, nó trình bày phần sidebar của trang bao gồm như trình đơn, quảng cáo, tin tức hay sản phẩm liên quan. Ví dụ sau đây trình bày cách trình bày sidebar gồm modul danh mục sản phẩm và tin tức mới: Danh mục sản phẩm Thời trang Nội thất Xu hướng thời trang 2016 Cập nhật Xu hướng thời trang năm 2016. Thời trang mùa xuân Xu hướng thời trang mùa xuân 2016. Chi tiết Thời trang mùa xuân Xu hướng thời trang mùa xuân 2016. Chi tiết PHẦN TỬ TABLE (trình bày bảng) Phần tử table được sử dụng để trình bày bảng dữ liệu trong một tài liệu hay ứng dụng. Trên thực tế, bảng được sử dụng nhiều trong việc trình bày nội dung dữ liệu trong các trang danh sách quản trị và phần nội dung các trang chi tiết sản phẩm hay chi tiết tin tức. Ví dụ sau đây trình bày cách trình bày một bảng dữ liệu: QUẢN LÝ SINH VIÊN IDHọ và tên ĐiểmXếp loại Khóa A 1Trần Tiến Tài 7Khá 2Phạm Mạnh Khoa 8 Khóa B 3Trần Văn Hưng 5Trung bình 4Đỗ Đức Thành 10Giỏi TỔNG CỘNG7.5Khá Một số phần tử được sử dụng để tạo bảng: - Phần tử table dùng để tạo một bảng. Thuộc tính border để xác định đường viền, thuộc tính cellpadding để xác định độ dày padding từng ô, thuộc tính cellspacing để xác định độ dày margin từng ô. - Phần tử caption để tạo tiêu đề của bảng. - Phần tử tr dùng để tạo ra một dòng. Thuộc tính colspan để gộp các ô cạnh nhau của một dòng, thuộc tính rowspan để gộp các ô cạnh nhau của một cột. - Phần tử thead để bao quanh các dòng tiêu đề của bảng, phần tử tfoot để bao quanh các dòng tổng kết của bảng. Phần tử tbody để bao quanh các dòng thân nội dung của bảng. - Phần tử th để tạo ra một ô tiêu đề cột, phần tử td để tạo ra một ô nội dung trong dòng. PHẦN TỬ FORM (trình bày biểu mấu nhập liệu) Phần tử form được sử dụng để trình bày biểu mẫu trong một tài liệu hay ứng dụng. Trên thực tế, biểu được sử dụng nhiều trong việc trình bày nội dung dữ liệu trong các trang quản trị và phần nội dung các trang liên hệ... - Phần tử form dùng để định nghĩa được biểu mẫu. Nó bao gồm các thuộc tính: action xác định nơi giữ dữ liệu khi biểu mẫu được gửi đi. method phương thức HTTP khi gửi dữ liệu lên là GET hay POST. name đặt tên của biểu mẫu. Ngoài ra còn một số thuộc tính khác như: target, enctype, accept, accept-charset. - Phần tử input dùng để cho phép người dùng nhập dữ liệu vào. Nó thường nằm trong phần tử form. Nó bao gồm một số thuộc tính thường dùng như: type Chọn kiểu nhập của phần tử. - Danh sách các nút bấm: button submit reset image - Nhập vào tập tin: file - Nhập văn bản, số, ngày tháng : text hidden search tel url email password date time number range color - Hộp kiểm lựa chọn từ danh sách: checkbox radio checked chỉ định một phần tử được chọn nếu là kiểu checkbox hoặc radio. disabled không cho phép người dùng lựa chọn. name tên của phần tử input value giá trị của phần tử. Một số thuộc tính khác của phần tử input: maxlength, minlength, size, readonly, required, multiple, pattern, min, max, step, list, placeholder - Phần tử select, datalist cho phép tạo một hộp chọn sổ xuống. Nó có các thuộc tính: disabled Vô hiệu hóa việc lựa chọn. multiple Cho phép có nhiều lựa chọn cùng lúc. name Tên của phần tử size Kích cỡ số tùy chọn của phần tử. Trong phần tử này có các phần tử con là: + Phần tử optgroup cho phép nhóm các lựa chọn vào cùng kiểu. + Phần tử option dùng để định nghĩa một tùy chọn. - Ngoài ra, để tạo biểu mẫu, ta có thể sử dụng một số phần tử khác như: định nghĩa một biểu mẫu cho phép nhập nhiều dòng. Nó có các thuộc tinhs: cols Chiều rộng của phần tử. rows Số dòng hiển thị khi nhập. disabled Vô hiệu hóa việc nhập phần tử. name tên của phần tử readonly chỉ cho phép đọc. tạo một nhãn cho phần tử . tạo một khung bao quanh biểu mẫu. Tạo một tiêu đề cho phần tử . tạo một nút button. Lưu ý: trong trang Web, không nên sử dụng bảng để tạo khung bố cục trang web, để tạo bố cục trang Web người ta thường dùng phần tử div, phần tử này không có chức năng hiển thị, mà được sử dụng gắn kèm các class, id để tạo CSS xây dựng bố cục khung hiển thị trang web. SỬ DỤNG LIÊN KẾT VÀ HÌNH ẢNH TRONG HTML Phần tử Siêu liên kết a là những phần tử bên trong tài liệu được liên kết đến một vị trí xác định trong cùng tài liệu hoặc liên kết đến một trang hoàn toàn khác. Khi ta click chuột vào siêu liên kết, nó sẽ nhảy đến vị trí mà nó liên kết đến. Siêu liên kết có 2 loại: - Liên kết trong: là liên kết đến phần trong cùng tài liệu hoặc cùng website. - Liên kết ngoài: là liên kết đến các trang trên các site khác nhau. Để tạo siêu liên kết, cần xác định hai thành phần: - Địa chỉ đầy đủ hoặc URL của file được kết nối. - Điểm nóng cung cấp cho liên kết. Sử dụng siêu liên kết: Phần tử a được sử dụng để xác định văn bản hay hình ảnh sẽ dùng làm siêu liên kết trong tài liệu HTML. Thuộc tính href (tham chiếu siêu văn bản) được dùng để chỉ ra địa chỉ, URL của tài liệu hay file được liên kết. Hypertext Trong đó: - Protocol: giao thức sử dụng. Ta có một số loại giao thức như http (truyền siêu văn bản); telnet (mở một phiên telnet); gopher (tìm kiếm file); ftp (giao thức truyền file); mailto (gửi thư điện tử). - Host.domain: Địa chỉ Internet của máy chủ. - Port: Cổng phục vụ của máy chủ đích. - path/filename: Đường dẫn tới file. - Hypertext: Văn bản hay hình ảnh mà người dùng cần click vào để kích hoạt liên kết. Ngoài ra phần tử a còn một số thuộc tính khác như: coords xác định tọa độ của một liên kết. title tiêu đề liên kết. hreflang chỉ định ngôn ngữ của các tài liệu liên quan. name chỉ định tên của neo trong liên kết đến một điểm xác định của trang. rel xác định mối quan hệ giữa tài liệu hiện hành và tài liệu liên kết. rev xác định mối quan hệ giữa các tài liệu liên kết và tài liệu hiện tại. shape chỉ định hình dạng của một liên kết. Nó có thể nhận giá trị default (mặc định), rect (hình chữ nhật), circle (hình tròn), poly (hình đa giác). target chỉ định nơi để mở các tài liệu liên kết. Nó có thể nhận giá trị: _blank _parent _self _top framename Để hiển thị hình ảnh trên trang, ta dùng phần tử img, kèm theo các thuộc tính src để chỉ ra đường dẫn hình ảnh và alt để mô tả hình ảnh. 1. Liên kết văn bản Liên kết đến một tài liệu khác - Giả sử ta có hai tài liệu trên đĩa cứng cục bộ doc1.html và doc2.html. Ta tạo liên kết từ doc1 sang doc2 như sau: Tới doc2 - Khi tới tài liệu khác ta nên cung cấp một đường dẫn để quay lại. - Lưu ý: khi các file ở cùng thư mục ta dùng đường dẫn tương đối, khi ở khác thư mục, ta dùng đường dẫn tuyệt đối. Sử dụng email và điện thoại - Liên kết đến ứng dụng gửi email: mai0214cs@gmail.com - Liên kết đến ứng dụng gọi điện như skype: 0987.288.940 Liên kết đến một điễm xác định trong cùng tài liệu - Khi click vào một đề tài nào đó (Topic name) thì các chi tiết (marker) ở môt phần khác của tài liệu được hiển thị. Cú pháp: Chủ đề Tại điểm cần liên kết đến ta đặt: Nội dung Liên kết đến một điểm xác định ở tài liệu khác - Khi click vào một đề tài nào đó (Topic name) thì các chi tiết (marker) ở môt phần khác của tài liệu khác được hiển thị. Cú pháp: Chủ đề Tại điểm cần liên kết đến ta đặt ở trang doc2: Nội dung 2. Bản đồ hình ảnh: là hình ảnh trong đó các vùng khác nhau hoạt động như các liên kết. HTML cung cấp 3 phần tử để tạo một bản đồ hình ảnh. - Phần tử xác định bản đồ hình ảnh. Nó cung cấp thuộc tính name để chỉ rõ tên của bản đồ hình ảnh. - Phần tử chỉ rõ tọa độ ở khu vực bên trong hình ảnh sẽ hoạt động như một siêu liên kết và hình dạng của bản đồ hình ảnh. Nó có các thuộc tính: alt chỉ rõ văn bản được thay thế nếu bản đồ hình ảnh không xuất hiện. href chỉ rõ url của trang cần liên kết đến trong bản đồ ảnh. shape chỉ ra hình dạng có thể chọn. Nó có thể nhận giá trị: default mặc định circle hình tròn rect hình chữ nhật poly hình đa giác coords chỉ ra tọa độ của khu vực có thể bấm, nó phụ thuộc vào hình dạng được chỉ ra cho bản đồ hình ảnh. center_x, center_y, radius Hình tròn left_x, top_y, right_x, bottom_y Hình chữ nhật tùy chọn Đa giác target chỉ ra nơi liên kết được mở. - Phần tử : chọn ảnh làm bản đồ ảnh. Nó gồm các thuộc tính: src chỉ ra đường dẫn đến hình ảnh. alt văn bản thay thế hình ảnh khi không xuất hiện. usermap nói đến tên bản đồ hình ảnh. align canh lề cho hình ảnh. border chiều rộng đường viền bao quanh hình ảnh. width xác định chiều rộng hình ảnh. height xác định chiều cao hình ảnh. hspace xác định khoảng trắng bên phải và bên trái của hình ảnh. vspace xác định khoảng trắng bên trên và bên dưới của hình ảnh. ismap chỉ định kết nối đến một hình ảnh như một bản đồ hình ảnh phía máy chủ. Nó nhận giá trị ismap. longdesc chỉ định url của một hình ành chứa mô tả về hình ảnh. ỨNG DỤNG CACHE Ứng dụng Cache lưu trữ web phía máy khách, điều đó có nghĩa là ứng dụng web được tự động lưu trữ và truy cập mà không cần kết nối với internet. Điều này rất tiện lợi khi người dùng muốn truy cập lại web khi họ offline, nguồn tài liệu lưu trữ này sẽ tải nhanh hơn so với khi lấy từ máy chủ về, và nó góp phần giảm tải xử lý cho máy chủ. Nội dung tập tin dữ liệu Mỗi khi bạn cập nhật tập tin trên máy chủ, bạn cần sửa đổi tên tập tin .appcache để máy khách cập nhật lại phiên bản mới nhất của trang của bạn. Lưu ý: kích thước lưu trữ dữ liệu cache của mỗi trình duyệt là khác nhau (thông thường giới hạn khoảng 5MB mỗi trang). NỘI DUNG NHÚNG CHÈN VIDEO VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử video. Chơi/ Dừng Lớn Nhỏ Bình thường var myVideo = document.getElementById("video1"); function playPause() { if (myVideo.paused){ myVideo.play();} else{ myVideo.pause();} } function makeBig() { myVideo.width = 560; } function makeSmall() { myVideo.width = 320; } function makeNormal() { myVideo.width = 420; } CHÈN ÂM THANH VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử audio. Kiểu định dạng âm thanh hỗ trợ trong HTML5 mp3 audio/mpeg ogg audio/ogg wav audio/wav Thuộc tính: autoplay, autobuffer, controls, loop, preload, src Kiểu định dạng video hỗ trợ trong HTML5 mp4 video/mp4 ogg video/ogg webm video/webm Thuộc tính: autoload, autobuffer, controls, height, width, loop, preload, poster, src CHÈN ĐỐI TƯỢNG HTML, FLASH VÀO TÀI LIỆU HTML Để chèn video vào tài liệu HTML, ta sử dụng phần tử object hoặc embed, iframe. Cả 2 phần tử audio và video có thể kích hoạt các sự kiện sau: about,canplay, ended, error, loadeddata, loadstart, pause, play, progress, retachange, seeking, seepend, volumechange, waiting. CHÈN ĐỒ HỌA AVG VÀO TÀI LIỆU HTML Phần tử svg dùng để chèn một hình ảnh đồ họa vào trong tài liệu HTML. Để tạo ra một hình vẽ bằng phần tử svg, ta chỉ sử dụng thuộc tính và định dạng CSS của chúng mà không cần sử dụng javascript. Hình chữ nhật <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> Hình tròn <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> Hình elip <ellipse cx="100" cy="50" rx="100" ry="30" style="fill:red" /> <ellipse cx="110" cy="50" rx="80" ry="20" style="fill:yellow" /> Đường thẳng <line x1="0" y1="0" x2="200" y2="400" style="stroke:rgb(255,0,0);stroke-width:2" /> Đường gấp khúc <polyline points="20,20 40,25 60,40 80,120,120, 140 200,180" style="fill:none;stroke:black;stroke-width:3" /> Đa giác <polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/> Đoạn Văn bản <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG Nét vẽ CHÈN ĐỒ CÔNG THỨC TOÁN MATH VÀO TÀI LIỆU HTML Phần tử math dùng để chèn một công thức toán vào trong tài liệu HTML. A= x y z w CHÈN ĐỒ HỌA CANVAS Phần tử canvas dùng để chèn một hình ảnh đồ họa vào tài liệu HTML, những hình vẽ này được vẽ bằng Javascript, và nó thường được sử dụng để thiết kế game HTML. THUỘC TÍNH CỦA PHẦN TỬ CÁC THUỘC TÍNH CƠ BẢN CỦA HTML Các thuộc tính cơ bản của HTML được áp dụng cho hầu hết tất cả các phần tử HTML: - Thuộc tính cốt lõi: Áp dụng cho hầu hết các phần tử class Chỉ định một hoặc nhiều classname cho phần tử, nó được sử dụng nhiều trong CSS hay jQuery. id Chỉ định một id duy nhất cho phần tử. style Chỉ định thuộc tính CSS áp dụng cho phần tử. title Chỉ định thông tin thêm về phần tử. data-*, item-* Các thuộc tính xây dựng metadata dữ liệu - Thuộc tính ngôn ngữ: Áp dụng cho hầu hết các phần tử: dir Chỉ định hướng hiển thị văn bản cho phần tử. Có các giá trị: ltr: phải qua trái; rtl: trái qua phải. lang Chỉ định ngôn ngữ hiển thị nội dung phần tử. xml:lang Chỉ định ngôn ngữ hiển thị nội dung phần tử (đối với tài liệu XHTML). - Thuộc tính bàn phím: accesskey Chỉ định một phím tắt để kích hoạt, tiêu điểm vào phần tử. tabindex Chỉ định thứ tự tab vào một phần tử. THUỘC TÍNH SỰ KIỆN Khi một người dùng truy cập vào trang web của bạn, họ có thể làm một số việc như nhấp chuột vào văn bản, hình ảnh, liên kết hay di chuyển qua đối tượng... Đây là những ví dụ mà JavaScript gọi là sự kiện. Chúng ta có thể viết trình sử lý sự kiện bằng ngôn ngữ JavaScript và chúng ta chỉ định xử lý sự kiện này như những thuộc tính. Sự kiện Window: sự kiện kích hoạt cho đối tượng window (áp dụng cho thẻ body). onafterprint Kịch bản được chạy sau khi tài liệu được in onbeforeprint Kịch bản được chạy trước khi tài liệu được in onbeforeonload Kịch bản được chạy trước khi tải tài liệu onblur Kịch bản được chạy khi cửa sổ mất tiêu điểm. onerror Kịch bản được chạy khi có lỗi xảy ra. onfocus Kịch bản được chạy khi cửa sổ nhận tiêu điểm. onhaschange Kịch bản được chạy khi thay đổi tài liệu. onload Kịch bản được chạy khi tài liệu được tải. onmessage Kịch bản được kích hoạt khi tin nhắn được kích hoạt. onoffline Kịch bản được chạy khi tài liệu offline. ononline Kịch bản được chạy khi tài liệu trở thành online. onpagehide Kịch bản được chạy khi cửa sổ ẩn. onpageshow Kịch bản được chạy khi cửa sổ được viếng thăm. onpopstate Kịch bản được chạy khi lịch sử cửa sổ thay đổi. onredo Kịch bản được chạy khi quay lại một tài liệu. onresize Kịch bản được chạy khi thay đổi kích cỡ cửa sổ. onstorage Kịch bản được chạy khi khu lưu trữ web được cập nhật. onundo Kịch bản được chạy khi quay lại một tài liệu. onunload Kịch bản được chạy khi người dùng rời khỏi tài liệu. Sự kiện form: Sự kiện được kích hoạt khi ta tác động vào một form HTML onblur Kịch bản được chạy khi phần tử mất tiêu điểm. onchange Kịch bản được chạy khi thay đổi phần tử. oncontextmenu Kịch bản được chạy khi kích hoạt một trình đơn. onfocus Kịch bản được thực hiện khi phần tử nhận được tiêu điểm onformchange Kịch bản được thực hiện khi thay đổi trong form onforminput Kịch bản được thực hiện khi truyền dữ liệu vào form. oninput Kịch bản được chạy khi truyền dữ liệu vào phần tử. oninvalid Kịch bản được chạy khi một phần từ không hợp lệ. onselect Kịch bản được chạy khi một phần tử được chọn. onsubmit Kịch bản được chạy khi biểu mẫu được gửi. Sự kiện bàn phím: là sực kiện được kích hoạt khi ta sử dụng bàn phím. onkeydown Kịch bản được chạy khi một phím được nhấn xuống. onkeypress Kịch bản được thực hiện khi một phím được nhấn xuống và thả ra. onkeyup Kịch bản được thực hiện khi một phím được thả ra. Sự kiện chuột: là sự kiện được thực hiện được gây ra bởi chuột. onclick Kịch bản được chạy khi click chuột. ondblclick Kịch bản được chạy khi click đúp chuột. ondrag Kịch bản được chạy khi một phần tử được kéo. ondragend Kịch bản được chạy ở cuối hành động kéo. ondragenter Kịch bản được chạy khi một phần tử đã được kéo đến một mục tiêu thả hợp lệ. ondragleave Kịch bản được chạy khi một phần tử được di chuyển đến một mục tiêu hợp lệ. ondragover Kịch bản được chạy khi một phần tử kéo ra bênn ngoài mục tiêu hợp lệ. ondragstart Kịch bản được chạy khi bắt đầu kéo. ondrop Kịch bản được chạy khi một phần tử được thôi kéo. onmousedown Kịch bản được chạy khi một nút chuột được nhấn. onmousemove Kịch bản được chạy khi con trỏ chuột di chuyển. onmouseout Kịch bản được chạy khi con trỏ chuột di chuyển ra khỏi một phần tử onmouseover Kịch bản được chạy khi con trỏ chuột di chuyển trên phần tử. onmouseup Kich bản được thực hiện khi ta nhả chuột. onmousewheel Kịch bản được chayj khi chuột đang di chuyển. onscroll Kịch bản được chạy khi thao tác với thanh cuộn. Sự kiện media: được xảy ra khi ta kích hoạt các loại đa phương tiện như video, hình ảnh, âm thanh, đối tượng... onabort Kịch bản được chạy khi hủy bỏ. oncanplay Kịch bản được chạy khi một tập tin đã sẵn sàng để bắt đầu chơi. oncanplaythrough Kịch bản được chạy khi một tập tin cáo thể chơi hết đến cuối dừng mà không cần bấm dừng. ondurationchange Kịch bản được chạy khi thay đổi chiều dài của media. onemptied Kịch bản được chạy khi có một trường hợp xấu xảy ra và tập tin bất ngờ biến mất (như mmất kết nối). onended Kịch bản được chạy khi media chạy đến chỗ kết thúc (như xuất mẩu tin thông báo cảm ơn vì đã lắng nghe.) onerror Kịch bản được chạy khi có một lỗi xảy ra khi tập tin được tải. onloadeddata Kịch bản xảy ra khi media đã được tải. onloadedmetadata Kịch bản được chạy khi dữ liệu meta (như kích thước, thời gian) được tải. onloadstart Kịch bản được chạy như là tập tin bắt đầu load trước khi hoàn thành. onpause Kịch bản được chạy khi media tạm dừng do người sử dụng hay do lập trình. onplay Kịch bản được chạy khi media đã sẵn sàng để bắt đầu chơi. onplaying Kịch bannr được chạy khi media đã thực sự bắt đầu chơi. onprogress Kịch bản được chạy khi trình duyệt nhận dữ liệu media. onratechange Kịch bản được chạy mỗi lần thay đổi tỷ lệ phát (chạy nhanh hay chậm hơn). onreadystatechange Kịch bản được chạy mỗi lần thay đổi trạng thái sẵn sàng. onseeked Kịch bản được chạy khi các thuộc tính tìm kiếm được thiết lập là sai để chỉ ra rằng tìm kiếm đã kết thúc. onseeking Kịch bản chạy khi thuộc tính tìm kiếm là hoạt động là truevà khi việc tìm kiếm hoạt động. onstalled Kịch bản được chạy khi trình duyệt không thể nhận dữ liệu từ media vì một lý do nào đó. onsuspend Kịch bản được chạy khi lấy dữ liệu mediađược dừng lại trước khi nó được nạp hoàn toàn vì lý do nào đó. ontimeupdate Kịch bản được chạy khi vị trí chơi thay đổi (khi người dùng muốn chơi ở đoạn sau hay chạy lại đoạn trước). onvolumechange Kịch bản được chạy khi âm thanh thay đổi (bao gồm cả việc tắt tiếng). onwaiting Kịch bản được chạy khi media tạm dừng nhưng sẽ tiếp tục săp tới (như tạm dừng để tải thêm dữ liệu). CSS (Cascading Style Sheets): là ngôn ngữ định kiểu xếp tầng, qui định qui tắc định dạng, hiển thị nội dung của các phần tử trong tài liệu HTML. Nội dung tập tin index.html Ví dụ CSS p{ font-size: 14px; font-weight:bold; font-family: Arial; } Nội dung văn bản Bộ định kiểu bên trong: CSS được viết tách ra trong nội dung thẻ của tập tin HTML, nhằm áp dụng cho nhiều phần tử khác cùng loại, và đảm bảo nội dung HTML gọn nhẹ hơn. ĐẠI CƯƠNG VỀ CSS div { color: red; border:1px solid #ccc; } Bộ chọn: tên phần tử áp dụng bộ định kiểu, nếu có nhiều phần tử áp dụng chung một bộ định kiểu thì giữa chúng phân cách nhau bởi dấu phẩy (,) Bộ định kiểu: là danh sách cách thuộc tính, định kiểu hiển thị cho danh sách bộ chọn Định kiểu 1 Định kiểu 2 Thuộc tính 1 Thuộc tính 2 Giá trị 1 Giá trị 2 Nội dung tập tin style.css p{ float: left; padding:5px; border: 1px solid #ccc; } Định dạng mặc định của trình duyệt p { display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } Bộ định kiểu bên ngoài: CSS được viết tách ra thành tập tin riêng (đuôi css) và được gọi vào trong tập tin HTML. Bộ định kiểu nội tuyền: CSS được viết trong thuộc tính style của phần tử HTML, nhằm chỉ áp dụng bộ định kiểu cho phần tử này. 3 4 2 1 Quy tắc @media được sử dụng để xác định cách thức hiển thị khác nhau trên các kiểu phương tiện hoặc thiết bị khác nhau. @media not|only and () { Nội dung CSS } Danh sách mediatype (kiểu phương tiện) - all : tất cả thiết bị. - print : hiển thị trên máy in - screen: hiển thị trên máy tính, máy tính bảng hay điện thoại thông minh. - speech: hiển thị trên các màn hình đọc. Danh sách mediafeature (tính năng phương tiện) - Tỷ lệ giữa chiều rộng và chiều cao của chế độ xem aspect-ratio max-aspect-ratio min-aspect-ratio - Tỷ lệ giữa chiều rộng và chiều cao của thiết bị device-aspect-ratio max-device-aspect-ratio min-device-aspect-ratio - Số bit cho mỗi thành phần màu ở hiển thị thiết bị đầu ra color max-color min-color - Lượng màu mà thiết bị có thể hiển thị color-index max-color-index min-color-index - Chiều rộng hoặc chiều cao của thiết bị device-width max-device-width min-device-width device-height max-device-height min-device-height - Chiều rộng hoặc chiều cao của chế độ xem width max-width min-width height max-height min-height du Ví dụ 1: thẻ h1 dưới đây hiển thị màu đỏ trên tất cả các thiết bị. @media all{ h1{color:red;} } Nội dung văn bản Ví dụ 2: thẻ h1 dưới đây hiển thị màu đỏ nếu chiều rộng khung nhìn lớn hơn hoặc bằng 1200px @media (min-width:1200px){ h1{color:red;} } Nội dung văn bản Lưu ý quan trọng: việc chia khung bố cục giao diện trong thư viện css của boostrap để xây dựng giao diện responsive được xây dựng dựa trên cơ chế này. Hiện tại, trong phiên bản CSS3, một số thuộc tính của CSS được áp dụng kèm theo tiền tố phân biệt trình duyệt: -ms- : trình duyệt IE. -moz- : trình duyệt Firefox. -webkit-: hiển trình duyệt Chrome, Opera, Safari... Lưu ý: nếu bạn đặt !important sau mỗi định kiểu, trình duyệt sẽ ưu tiên hiển thị theo định kiểu này trước tiên chứ không theo trình tự như trên. Giả lớp và giả phần tử được sử dụng để xác định cách thức hiển thị khác nhau cho một phần tử hoặc một phần của phần tử HTML : { Bộ định kiểu CSS } Bộ chọn kết hợp Giả phần tử - after : chèn thêm nội dung vào cuối phần tử được chọn. - before : chèn thêm nội dung vào cuối phần tử được chọn. Hai giả lớp trên thường được sử dụng với thuộc tính content của CSS. Ứng dụng này thường được sử dụng để thêm các icon vào đầu nội dung phần tử như sử dụng biểu tượng Glyphicons hay font-awesome trong thư viện boostrap. - first-letter : chọn ký tự đầu tiên của một chữ trong phần tử. - first-line : chọn dòng văn bản đầu tiên của phần tử khi hiển thị ra màn hình. - selection : chọn những ký tự trong phần tử được ta lựa chọn (như bôi đen đoạn văn bản) Bộ chọn kết hợp Giả lớp - Thường gặp với thẻ a:active : chọn một liên kết hoạt động a:hover : chọn phần tử khi di chuột qua. a:link : chọn tất cả liên kết khi chưa hoạt động a:visited : chọn tất cả các liên kết đã viếng thăm. a:target : chọn phần tử đang hoạt động - Thường gặp với thẻ input:checked input:forcus input:disabled input:enabled input:in-range input:out-of-range input:invalid input:valid input:optional input:required input:read-only input:read-write - Theo vị trí phần tử trong phần tử cha mẹ của chúng first-child first-of-type last-child last-of-type only-child only-of-type nth-child(n) nth-of-type(n) nth-last-child(n) nth-last-of-type(n) Bộ chọn - * áp dụng cho tất cả các phần tử HTML trong tài liệu. - .class áp dụng cho các phần tử HTML có thuộc tính class=“class”. - #id áp dụng cho các phần tử HTML có thuộc tính id=“id”. - div áp dụng cho các thẻ div. - div p áp dụng cho các phần tử p ở trong phần tử div. - div>p áp dụng cho các phần tử p là phần tử con trực tiếp của phần tử div. - div+p áp dụng cho các phần tử p ở ngay sau phần tử div - div~p áp dụng cho các phần tử p nằm sau phần tử div - [attr=value] áp dụng cho các phần tử có thuộc tính attr=“value” Ví dụ minh họa bộ chọn class (thuộc tính class của một phần tử HTML dùng để phân loại một nhóm phần tử có chung đặc điểm CSS) .red{ font-size: 14px; font-weight:bold; font-family: Arial; } Nội dung văn bản Ví dụ minh họa bộ chọn id (thuộc tính id của một phần tử HTML dùng để định danh một phần tử HTML riêng biệt) #red{ font-size: 14px; font-weight:bold; font-family: Arial; } Nội dung văn bản Ví dụ minh họa bộ chọn phần tử p{ font-size: 14px; font-weight:bold; font-family: Arial; } Nội dung văn bản Ví dụ minh họa bộ chọn phần tử con ở trong phần tử cha div p{ font-size: 14px; font-weight:bold; font-family: Arial; } Nội dung văn bản Giá trị của các thuộc tính CSS Đơn vị đo chiều dài - Đơn vị đo chiều dài tuyệt đối: cm – 1 cm trong đơn vị đo thước kẻ 1mm = 1/1000 cm 1in = 2,54 cm 1px = 1/96 in 1pt = 1/72 in 1pc = 12 pt - Đơn vị đo chiều dài tương đối: em (rem) so với font của phần tử (phần tử gốc). vw (vh) tương ứng 1% chiều rộng (chiều cao) khung nhìn. ex so với chiều cao font hiện tại. ch so với 0. vmin (vmax) tương ứng 1% nhỏ hơn (lớn hơn) màn hình. % so với kích thước phần tử cha của chúng. Màu sắc - Giá trị màu theo tên tiếng Anh (ví dụ: blue). - Giá trị thập lục phân (dạng #RRGGBB), với mỗi giá trị trong khoảng 00 đền FF hệ thập lục phân. - Giá trị RGB (dạng rgb(đỏ, lục, lam)), với mỗi giá trị trong khoảng 0 đến 255 hệ thập phân. Giá trị RGBA (dạng rgba(đỏ, lục, lam, độ mờ)), với các giá trị màu trong khoảng 0 đến 255 hệ thập phân, độ mờ nhận giá trị từ 0 đến 1. - Giá trị HSL (dạng hsl(độ sắc, độ rộng, độ nhạt)) với độ sắc từ 0 – 360, động bao phủ và độ nhạt nhận giá trị từ 0 đến 1. Giá trị HSLA (dạng hsla(độ sắc, độ rộng, độ nhạt, độ mờ)) Đường nét Vị trí left right center justify top bottom middle both none Hình ảnh url(“URL Hình ảnh”) Font chữ, kiểu chữ Công thức hàm - Hàm attr(“tên thuộc tính”): trả về giá trị của thuộc tính với tên thuộc tính được chỉ định. - Hàm calc(biểu thức): hàm này sử dụng các công thức +, -, *, / để trả về giá trị thường để tính chiều rộng, chiều cao phần tử, từ giá trị tương đối với giá trị tuyệt đối. - Các hàm tính toán dải màu trong CSS: linear-gradient() repeating-linear-gradient() radial-gradient() repeating-radial-gradient() Khu vực viết nội dung margin: khoảng cách từ viền phần tử này đến các phần tử bên cạnh outline: đường bao quanh phía ngoài đường viền. Như vậy đường outline ở vị trí chồng lấn lên vùng margin. Đường outline sẽ hiển thị đè lên phía trên các phần tử khác nếu chúng chồng lấn lên nhau. border: đường viền bao quanh phần tử. padding: khoảng cách từ đường viền đến vùng nội dung bên trong phần tử. Thanh cuộn: trong trường hợp sử dụng thuộc tính overflow: scroll; thì vị trí thanh cuộn nằm sát vị trí đường viền phía dưới, và bên phải chồng lấn lên vùng padding. Vùng nội dung bên trong phần tử nhỏ đi một chút. margin-top (không áp dụng cho phần tử nội tuyến) margin-bottom (không áp dụng cho phần tử nội tuyến) padding-top padding-bottom margin-left margin -right padding -left padding -right border-top-left-radius border-top-right-radius border-bottom-left-radius width: chiều rộng phần tử. Đối với phần tử nội tuyến, chiều rộng luôn là auto. Mặc định thuộc tính box-sizing nhận giá trị content-box, chiều rộng phần tử bằng chiều rộng khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border- box thì chiều rộng phần tử bao gồm thêm cả phần border, padding. min-width: chiều rộng tối thiểu max-width: chiều rộng tối đa height: chiều cao phần tử. Đối với phần tử nội tuyến, chiều cao luôn là auto. Mặc định thuộc tính box-sizing nhận giá trị content- box, chiều cao phần tử bằng chiều cao khu vực viết nội dung; khi giá trị thuộc tính box-sizing nhận giá trị border-box thì chiều cao phần tử bao gồm thêm cả phần border, padding. min-height: chiều cao tối thiểu max-height: chiều cao tối đa border-bottom-right-radius border-radius: tạo đường viền cong bo ở 4 góc. top: khoảng cách phía trên top: khoảng cách phía trên bottom: khoảng cách phía dưới bottom: khoảng cách phía dưới left: khoảng cách phía trái left: khoảng cách phía trái right: khoảng cách phía phải right: khoảng cách phía phải position: xác định vị trí. Với các giá trị: - relative: vị trí tương đối so với góc trên, bên trái của phần tử cụ thể. - absolute: vị trí tuyệt đối so với 4 góc của phần tử cha ở vị trí tương đối. - fixed: vị trí cố định so với 4 góc của trình duyệt. Tùy vào giá trị của các cặp thuộc tính left, right, top, bottom để xác định góc vị trí phần tử cha. Riêng đối với vị trí tương đối thì tham chiếu đến góc trên, bên trái. Đối với phần tử áp dụng tuyệt đối, cố định; phần tử luôn được chuyển sang phần tử khối. Trong trường hợp nhiều phần tử được đặt chồng lên nhau, thuộc tính z-index được sử dụng để sắp xếp thứ tự hiển thị. border-top border-bottom border -left border -right Đối với thuộc tính margin, padding ta có thể đặt kích thước độ dày theo 4 cách: margin: {top-right-bottom-left}; hoặc margin: {top-bottom} {left-right}; hoặc margin: {top} {right} {bottom} {left}; hoặc tách riêng thành 4 thuộc tính. Đối với các thuộc tính border, outline bắt buộc phải khai báo width, style, color theo cú pháp: border: {width} {style} {color}; outline: {width} {style} {color}; hoặc tách riêng ra thành 3 thuộc tính riêng. Giá trị của style có thể là: none : bình thường hidden : ẩn đường viền dotter : đường viền chấm dashed : viền nét đứt solid : viền nét liền double : viền nét đôi groove : bóng 3D đậm dần ridge : bóng 3D nhạt dần inset : bóng 3D nhạt chìm outset : bóng 3D đậm nổi Đặt ảnh nền cho đường viền: tùy thuộc vào bộ chọn trình duyệt và tên thuộc tính có cú pháp: border-image: {source} {slice} {width} {repeat}; hoặc có thể tách riêng thành từng thuộc tính. ĐỊNH DẠNG KHỐI PHẦN TỬ float: left|right|none; cho phép phần tử khác tiếp nối bên trái hay bên phải nó. clear: left|right|both; không cho phép phần tử khác tiếp nối bên trái, bên phải, hay cả 2 bên nó. display đặt chế độ hiển thị của phần tử thuộc dạng khối, bảng, dòng hay không hiển thị. visibility đặt chế độ ẩn, hiện nội dung phần tử. Lưu ý, khi bạn đặt ở chế độ ẩn, chỉ phần nội dung phần tử bị ẩn còn phần tử vẫn hiển thị. line-height: chiều cao của dòng văn bản letter-spacing: khoảng cách các ký tự trong từ word-spacing: khoảng cách các từ trong văn bản text-indent: khoảng cách dòng đầu tiên của khối văn bản với lề trái font-size: chiều cao của ký tự trong văn bản text-align: left; canh lề trái text-align: center; canh lề giữa text-align: right; canh lề phải text-align: justify; canh lề đều 2 bên color: black; Màu sắc chữ -webkit-text-fill-color: red; Màu sắc than chữ -webkit-text-stroke-color: blue; Màu sắc viền chữ -webkit-text-stroke-width: 5px; Độ dày đường viền chữ text-shadow: 5px 5px 5px #ccc; Tạo vùng bóng đổ của chữ font-family: Times New Roman; Phông chữ font-weight:bold; Độ đậm của chữ font-variant: small-caps; Định dạng ký tự đầu tiên của đoạn @font-face{ font-family: “LeagueGothic”; src:url(LeagueGothic.otf); } Đặt thêm font vào cho trang web. vertical-align: canh vị trí ký tự theo chiều dọc baseline bottom top sub super middle text-top text-bottom font-style: định dạng kiểu hiển thị văn bản normal italic oblique text-decoration: đường ngang qua văn bản overline line-throught underline text-transform: chuyển đổi chữ hoa và chữ thường lowercase uppercase lowercase Văn bản Văn bản direction: ltr; Hướng từ trái qua direction: rtl; Hướng từ phải qua ĐỊNH DẠNG VĂN BẢN ĐỊNH DẠNG DANH SÁCH – BẢNG – CHIA CỘT BÁO Định dạng mục trong danh sách: list-style: {type} {position} {image}; Trong đó có thể tách riêng thành từng thuộc tính: - list-style-type: xác định kiểu ký tự đánh dấu ở đầu mỗi mục danh sách. - list-style-position: xác định vị trí của ký tự đánh dấu trong mỗi mục với các giá trị: + inside: nằm trong dòng tiêu đề mục. + outside: ngoài dòng tiêu đề mục - list-style-image: lấy một hình ảnh thay cho ký tự đánh dấu ở đầu mỗi mục.  Mục 1  Mục 2  Mục 3 Định dạng bảng: table-layout Xác định cách hiển thị dòng, cột, ô trong bảng • auto : tự động. • fixed : cố định. border- collapse Xác định đường biên của bảng là viền đơn hay viền tách biệt như lúc mặc định ban đầu. • collapse : viền đơn. • separate : viền tách biệt. Chia cột báo column-width Độ rộng cột nội dung column-gap Khoảng cách giữa các cột nội dung column-rule: {width} {style} {color}; Đường phân cách giữa các cột nội dung column-count Số cột mà một phần tử chia ra ĐỊNH DẠNG NỀN background Định dạng nền: background: color position size repeat origin clip attachment image; background- color Đặt màu nền cho khối. Ví dụ: background-color:#FFOOFF; background- image Đặt ảnh nền cho khối. Ví dụ: background-image:url(“banner.jpg”); background- repeat Đặt chế độ có hay không việc lặp lại ảnh nền. • no-repeat : không cho phép lặp lại ảnh nền. • repeat : lặp lại ảnh nền theo chiều dọc và chiều ngang. • repeat-x : lặp ảnh nền theo chiều ngang. • repeat-y : lặp ảnh nền theo chiều dọc. background- attachment Đặt chế độ cố định hay di chuyển ảnh nền. • fixed : cố định ảnh nền. • scroll : ảnh nền di chuyển theo thanh cuộn. background- position Đặt vị trí ảnh nền so với góc trái phần tử. Ví dụ: background-position: 10px 10px; background- clip Xác định cụ thể khu vực đặt ảnh nền. Nó có thể nhận các giá trị: • border-box : nền được gài vào hộp biên. • padding-box : nền được gài vào hộp đệm. • content-box : nền được gài vào nội dung. background- origin Xác định nguồn gốc nền khi vị trí tương đối. Nó có thể nhận giá trị: • border-box : nền được gài vào hộp biên. • padding-box : nền được gài vào hộp đệm. • content-box : nền được vào hộp nội dung. background- size Xác định kích cỡ của hình nền ngang và dọc. Ví dụ: background-size:80px 60px; ĐỊNH DẠNG HOẠT HỌA animation: Hiệu ứng hoạt họa được trình diễn tùy thuộc vào mỗi trình duyệt. Ta có các tùy chọn hỗ trợ trong từng trình duyệt: - Tộc độ hiệu ứng: gồm các thuộc tính. Cú pháp: tùy chọn trình duyệt và thuộc tính tốc độ hiệu ứng không có dấu cách. • animation-name: tên hiệu ứng. Nếu không đặt sẽ không xảy ra hiệu ứng. • animation-duration: thời gian xảy ra hiệu ứng tính theo miligiây hoặc giây. Mặc định là 0. • animation-timing-duration: tốc độ diễn ra hiệu ứng. Gồm một số giá trị: linear (chạy từ từ), ease (khởi đầu chậm rồi nhanh dần và kết thúc từ từ. Đây là giá trị mặc định), ease-in (khởi đầu chậm), ease-out (kết thúc chậm), ease-in-out (khở đầu và kết thúc chậm), cubic-bezier (xác định hiệu ứng trong khoảng từ 0 đến 1). • animation-delay: thời điểm hình ảnh bắt đầu một hiệu ứng mới tính theo đơn vị giây và mili giây.(mặc định là 0). • animation-interation-count: số lần xảy ra hiệu ứng nhận giá trị là số lần hoặc infinite (vô hạn), giá trị mặc định là 1 lần. • animation-direction: có đảo chiều chuyển động không, mặc định là 0, đặt giá trị bằng alternate để quay ngược lại. • animation: là một tập hợp các hiệu ứng trên. • animation-play-state: để chọn paused (dừng hiệu ứng), running (chạy hiệu ứng). - Cách thức thay đổi hiệu ứng có cú pháp: @ tùy_chọn_trình_duyệt keyframes tên_hiệu_ứng { tỉ_lệ_%_của_hiệu_ứng {kiểu_mã_css_cần_thay_đổi;} } Lưu ý: @ tùy_chọn_trình_duyệt keyframes tên_hiệu_ứng không có dấu cách. ĐỊNH DẠNG THAY ĐỔI transition Dùng để thay đổi thuộc tính đã được khai báo từ trước để tạo ra các hiệu ứng động. - Hiệu ứng này tùy thuộc vào từng trình duyệt với các tùy chọn đã nêu ở trên. - Các thuộc tính: có cú pháp: tùy_chọn_trình_duyệt tên_thuộc_tính: giá trị; Lưu ý: không có dấu cách giữa tùy chọn trình duyệt và tên thuộc tính. ta còn có một số thuộc tính nhỏ khác như: • transition-property: tên thuộc tính cần thay đổi giá trị. Nó có thể nhận các giá trị như: none (không có thay đổi), all (tất cả các thuộc tính. Mặc định), hoặc danh sách các phần tử (từ hai trở nên được cách nhau bởi dấu phẩy). • transition-duration: xác định số mili giây để hoàn thành việc thay đổi thuộc tính. • transition-timing-function: tốc độ thay đổi của hiệu ứng. • transition-delay: khoảng cách giữa hai lần thay đổi thuộc tính. • transition: tập hợp của 4 thuộc tính trên. transform Dùng để thay đổi hiệu ứng 2D/3D ĐẠI CƯƠNG VỀ JAVASCRIPT Javascript là một ngôn ngữ kịch bản phía máy khách, nhằm tăng cường tính tương tác cho trang web; thường được sử dụng để thay đổi nội dung từng phần trên trang, hay bắt các sự kiện như trong quá trình tải trang, kích hoạt các nút, hay kiểm tra biểu mẫu trước khi nó được gửi về phía máy chủ. Nội dung tập tin index.html Xin chào Javascript> // In nội dung Xin chào các bạn document.write("Xin chào các bạn."); Ví trí đặt đoạn mã Javascript vào tài liệu HTML Đoạn mã Js có thể được đặt trong nội dung phần tử script của tài liệu HTML, hoặc có thể được đặt trong tập tin .js rồi được gọi vào trong tài liệu HTML thông qua thuộc tính src của phần tử script.  Bạn nên viết nội dung js ra tập tin js bên ngoài, và được gọi vào tập tin HTML bằng thẻ script được tải không đồng bộ cùng tài liệu HTML (nếu có thể) bằng cách sử dụng thuộc tính async để đảm bảo trang HTML được tải nhanh hơn.  Phần tử script nên đặt ở trước thẻ body đóng của tài liệu HTML (nếu có thể). Câu lệnh Dấu chấm phẩy (;) được sử dụng sau mỗi câu lệnh, trong trường hợp các câu lệnh được viết trên nhiều dòng thì không nhất thiết ta phải dùng dấu châm phẩy sau mỗi câu lệnh.  Bạn nên đặt tất cả các câu lệnh js trên một dòng để tiết kiệm dung lượng khi tải trang web. Khối mã lệnh Trong một số trường hợp, một số câu lệnh được tách ra thành từng khối (điều kiện, vòng lặp, hàm) thì chúng được đặt trong cặp dấu đóng mở ngoặc xoắn ({ và }), nếu trong khối lệnh chỉ có một câu lệnh thì không nhất thiết phải sử dụng cặp dấu này bao quanh. Định danh Tên biến, hàm, phương thức, thuộc tính, đối tượng trong Javascript được bắt đầu bằng một chữ cái hoặc dâu gạch dưới (_); có phân biệt chữ hoa, chữ thường và không được trùng với từ khóa. Danh sách các từ khóa trong Javascript: abstract, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with. Chú thích - Chú thích ở cuối một dòng hay cả dòng, ta dùng dấu // phía trước nội dung chú thích. - Chú thích trên nhiều dòng liên tiếp, hay chỉ một đoạn ở giữa dòng, ta dùng cặt dấu /* và */ trước và sau nội dung chú thích tương ứng. Hiển thị các ký tự đặc biệt \’ dấu nháy đơn \” dấu nháy kép \\ dấu gạch chéo ngược \n xuống dòng mới \r dấu trở lại \t dấu tab \b dấu cách \f dấu feed Nội dung tập tin scripts.js alert(“Mai Đức Thạch pro”); BIẾN TRONG JAVASCRIPT Biến trong Javascript là những cái tên được ta dùng để đặt tên cho những giá trị hay giá trị của biểu thức, để tiện dùng trong các thao tác tính toán. Căn cứ vào phạm vi hoạt động của một biến, ta có thể phân chia biến thành 2 loại: Kiểu dữ liệu của biến: tất cả các biến trong Javascript đều là những đối tượng. Do đó, mỗi khi ta tạo ra một biến, mặc định, ta đã tạo ra một đối tượng. var string = “Mai Đức Thạch”; var age = 28; var male = true; var work = {name: “Lập trình”, year: 2}; var lang = [ “PHP”, “.Net”, “Java”]; Biến cục bộ - Biến cục bộ là biến được khai báo trong phạm vi của một hàm và chỉ hoạt động trong phạm vi hàm đó. - Bạn có thể dùng các biến cục bộ cùng tên trong các hàm khác nhau bởi vì các biến cục bộ chỉ có tác dụng trong phạm vi của hàm đó và nó sẽ không tồn tại khi ra khỏi hàm. - Biến trong javascript được khai báo bắt đầu bằng từ khóa var: var string = “Webnadi Việt Nam”; var role; Biến toàn cục - Biến toàn cục là biến được khai báo bên ngoài một hàm, và tất cả các kịch bản và hàm trên trang web đều có thể truy cập nó. - Biến toàn cục được mất đi sau khi ta đóng trang. - Tất cả các biến trong Javascript, không được khai báo bằng từ khóa var, mà được gán giá trị đều là những biến toàn cục. Kiểu chuỗi Kiểu số Kiểu logic Kiểu đối tượng Kiểu mảng TOÁN TỬ TRONG JAVASCRIPT Toán tử số học: thao tác với hai số hay biểu thức số, trả về giá trị kiểu số. Cộng (+), trừ (-), nhân (*), chia (/), lấy số dư (%), thêm 1 giá trị (++), bớt một giá trị (--) Đối với chuỗi, toán tử (+) dùng để ghép 2 chuỗi vào cạnh nhau. Toán tử so sánh: so sánh giá trị của 2 số hay biểu thức số, trả về giá trị kiểu logic. Bằng (=), khác (!=), lớn hơn (>), nhỏ hơn (<), lớn hơn hoắc bằng (>=), nhỏ hơn hoặc bằng (<=). Toán tử logic: thao tác với hai toán hạng logic, hoặc biểu thức logic, trả về giá trị logic. cùng đúng (&&), một hoặc cả hai cùng đúng (||), phủ định toán hạng (! true). Toán tử nhị phân: thao tác với hai toán hạng nhị phân, hoặc biểu thức nhị phân, trả về giá trị nhị phân. và (&), hoặc (|), hoặc loại trừ (^) đảo bit (~), dịch bit (>) Toán tử gán: lấy toán hạng bên trái thao tác với toán hạng bên phải rồi gán lại giá trị cho toán hạng bên trái. +=, -=, *=, /=, %= Toán tử so sánh: var a = true ? “Giá trị true” : “Giá trị false”; kết quả a nhận giá trị là “Giá trị true” Toán tử typeof: trả về kiểu của toán hạng. typeof string; // trả về “string” typeof age; // trả về “number” typeof male; // trả về “boolean” ĐIỀU KIỆN RẼ NHÁNH 1. Khối lệnh if(điều kiện){true}else{false} cho phép kiểm tra điều kiện để thực thi các khối lệnh tương ứng với nó. Ví dụ: đoạn mã kiểm tra số chẵn hay số lẻ. var a = 100; if(a%2==0){ alert(“Đây là số chẵn”); }else{ alert(“Đây là số lẻ”); } 2. Khối lệnh switch(biểu thức){} cho phép so sánh giá trị biểu thức với từng trường hợp cụ thể để xác định khối mã lệnh thực hiện. Ví dụ: đoạn mã kiểm tra số dư của phép chia một số cho 4. var a = 100, b; switch(a%4){ case 0: b = 0; break; case 1: b = 1; break; case 2: b = 2; break; default: b = 3; } alert(“Số dư của phép chia là: ”+b); VÒNG LẶP Ví dụ: tính tổng 1+2+3+5+6++10. Các từ khóa điều khiển vòng lặp: - Từ khóa break; cho phép dừng việc thực hiện vòng lặp để tiếp tục xuống thực hiện tiếp các câu lệnh phía sau của vòng lặp. - Từ khóa continue; cho phép dừng thực hiện vòng lặp hiện tại để quay lại kiểm tra điều kiện chuyển sang thực hiện vòng lặp kế tiếp. Vòng lặp while(điều kiện){} cho phép thực hiện lặp đi lặp lại một khối mã lệnh đến khi điều nhận giá trị false. var a = 1, b = 0; white(a<=10){ b += a; a++; } alert(“Kết quả: ”+b); Vòng lặp do{}while(điều kiện); cho phép thực hiện trước lặp đi lặp lại một khối mã lệnh đến khi điều nhận giá trị false thì dừng. var a = 1, b = 0; do{ b += a; a++; } white(a<=10); alert(“Kết quả: ”+b); Vòng lặp for(;;){} cho phép thiết lập giá trị qua mỗi lần thực hiện lặp đi lặp lại một khối mã lệnh, và nó chỉ dừng lại khi điều kiện nhận giá trị false. var b = 0; for(var a=1; a<=10; a++){ b += a; } alert(“Kết quả: ”+b); Vòng lặp forin cho phép duyệt từng phần tử trong một đối tượng hay mảng. var a = [1,2,3,4,5,6,7,8,9,10], i, b; for(i in a){ b += i; } alert(“Kết quả: ”+b); HÀM Ví dụ sau đây tính tổng một số từ 0 đến num, minh họa cho việc tạo ra một hàm đơn giản và sử dụng chúng. function Tinhtong(num){ var sum = 0; for(var x = 0; x <=num; x++){ sum += x; } return sum; } alert(Tinhtong(100)); Hàm cấu trúc: Ví dụ sau đây tính tích của hai số, minh họa cho việc sử dụng hàm cấu trúc. var func = new Function("x", "y", "return x*y;"); function secondFunction(x, y){ return func(x,y); } alert(secondFunction(10, 20)); Hàm nặc danh: Ví dụ sau đây tính tích của hai số, minh họa cho việc sử dụng hàm nặc danh. var func = function(x, y)(return x*y;); function secondFunction(x, y){ return func(x,y); } alert(secondFunction(10, 20)); ĐỐI TƯỢNG Một đối tượng trong JavaScript là một tập các thuộc tính và phương thức. + Các thuộc tính là các đặc tính của một đối tượng. + Phương thức là các hành động mà đối tượng có thể thực hiện. JavaScript, ngoài cung cấp những đối tượng dựng sẵn còn cho phép bạn tạo ra các đối tượng (user- defined object). Các đối tượng dựng sẵn là các đối tượng đã được nghĩa từ trước, do vậy bạn chỉ cần sử dụng các thuộc tính và phương thức của chúng để hoàn thành bài toán. Một số đối tượng dựng sẵn trong JavaScript: Array, Date, Math, String Đối tượng người dùng định nghĩa là do nhà phát triển (developer) sử dụng script để tạo và định nghĩa ra các phương thức, thuộc tính cho chúng. Có hai phương pháp sau để tạo đối tượng người dùng: + Sử dụng đối tượng Object (đối tượng có sẵn) để tạo đối tượng người dùng. + Định nghĩa nghĩa một template và cài đặt nó bằng từ khóa new. Thuộc tính property của đối tượng: + Cho phép bạn có thể thêm các thuộc tính mới, phương thức mới cho các đối tượng đã được tạo. + Có thể dùng thuộc tính prototype để thêm thuộc tính và phương thức cho đối tượng dựng sẵn. • Cú pháp thêm một thuộc tính tên_hàm_khởi_tạo.prototype.tên_thuộc_tính=Giá_trị; • Cú pháp thêm phương thức tên_hàm_khởi_tạo.prototype.tên_phương_thức=function(){//thân hàm } Hoặc: tên_hàm_khởi_tạo.prototype.tên_phương_thức=tên_hàm ; Đối tượng người dùng dựng sẵn Đối tượng người dùng tự tạo // Tạo đối tượng: var student =new Object(); // Tạo thuộc tính: student.name = ‘Thạch; student.age = 28; // Tạo phương thức: student.work=function(){ return “Lập trình Web”; }; // Tạo đối tượng: function student(name,age){ this.name = name; this.age = age; this.work = work; } function work(){ return “Lập trình Web”; } sv1=new student(“Thạch”, 28); // Goi thuộc tính và phương thức: student.name = ‘Thạch; student.age = 28; alert(student.work()); // Goi thuộc tính và phương thức: alert(sv1.name); alert(sv1.age); alert(sv1.work()); ĐỐI TƯỢNG String Mặc định, khi ta khai báo hay khởi tạo một biến chuỗi, ta đã tạo ra một đối tượng String. Trong Javascript, cung cấp một số thuộc tính và phương thức thao tác với chuỗi. length charAt() charCodeAt() concat() fromCharCode() indexOf() lastIndexOf() match() replace() search() slice() split() substr() substring() toLowerCase() toUpperCase() ĐỐI TƯỢNG Number Mặc định, khi ta khai báo hay khởi tạo một biến số, ta đã tạo ra một đối tượng Number. Trong Javascript, cung cấp một số thuộc tính và phương thức thao tác với đối tượng Number. MAX_VALUE MIN_VALUE NEGATIVE_INFINITY NaN POSITIVE_INFINITY toExponential() toFixed() toPrecision() toString() ĐỐI TƯỢNG Math Đối tượng Math là một đối tượng mặc định trong Javascript, cho phép thực hiện những thao tác tính toán. Cú pháp để gọi phương thức và thuộc tính của đối tượng Math. Math.; Bạn không thể khởi tạo một đối tượng Math bằng từ khóa new. Trong Javascript, cung cấp một số thuộc tính và phương thức thao tác với đối tượng Math. E LN2 LN10 LOG2E LOG10E PI SQRT1_2 SQRT2 abs() acos() asin() atan() atan2() ceil() cos() exp() floor() log() max() min() pow() random() round() sin() sqrt() tan() toSource() ĐỐI TƯỢNG Boolean Mặc định, khi ta khai báo hay khởi tạo một biến logic, ta đã tạo ra một đối tượng Boolean. Trong Javascript, cung cấp một số phương thức thao tác với đối tượng Boolean. toString() valueOf() ĐỐI TƯỢNG Array Mặc định, khi ta khai báo hay khởi tạo một biến mảng, ta đã tạo ra một đối tượng Array. Trong Javascript, cung cấp một số thuộc tính và phương thức thao tác với đối tượng Array. length index input concat() every() filter() forEach() indexOf() join() lastIndexOf() map() pop() push() recude() recudeRight() reverse() shirt() slice() some() toSource() sort() splice() toString() unshift() ĐỐI TƯỢNG Date Thông qua việc khởi tạo một đối tượng Date, bạn có thể tiến hành thao tác với các phương thức của nó. Date() getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() getYear() getTimezoneOffset() getUTCDate() getUTCDay() getUTCFullYear() getUTCHours() getUTCMilliseconds() getUTCMinutes() getUTCMonth() getUTCSeconds() setDate() setFullYear() setHours() setMilliseconds() setMinutes() setMonth() setSeconds() setTime() setYear() setUTCDate() setUTCFullYear() setUTCHours() setUTCMilliseconds() setUTCMinutes() setUTCMonth() setUTCSeconds() toDateString() toGMTString() toLocaleFormat() toLocaleString() toLocaleTimeString() toSource() toString() toTimeString() toUTCString() valueOf() BIỂU THỨC QUY TẮC Tạo một đối tượng biểu thức qui tắc: var tên_biến = /thân_biểu_thức/bổ_từ; Trong đó: - Bổ từ: i Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường. g Thực hiện tìm kiếm toàn bộ (tìm kiếm toàn bộ chứ không dừng lại ở lần đầu tiên) m Thực hiện kết hợp trên nhiều dòng. - Thân biểu thức: + Tìm chữ cái và chữ số: [0-9] Tìm một ký tự số từ 0 đến 9. [A-Z] Tìm một ký tự chữ hoa từ A đến Z. [a-z] Tìm một ký tự chữ thường từ a đến z. [A-z] Tìm một ký tự chữ hoa hoặc chữ thường. [abc] Tìm chuỗi có chứa các ký tự abc. [^abc] Tìm chuỗi không chứa các ký tự abc. [a|b|c] Tìm có lựa chọn a hoặc b hoăc c. + Tìm ký tự theo định dạng đặc biệt . Tìm một ký tự đơn, ngoại trừ ký tự bắt đầu một dòng mới. \n Tìm một ký tự bắt đầu dòng mới. \w Tìm một ký tự văn bản. \W Tìm một ký tự không phải văn bản. \d Tìm một ký tự chữ số. \D Tìm một ký tự không phải sô. \s Tìm một ký tự trắng. \S Tìm một ký tự không phải ký tự trắng. \b Tìm nơi bắt đầu hoặc kết thúc một văn bản \B Tìm một ký tự không phải ở nơi bắt đầu hoặc kết thúc một văn bản. \f Tìm một nhóm ký tự định dạng. \r Tìm một ký tự xuống dòng. \t Tìm một ký tự tab. \v Tìm một ký tự tab dọc. \0 Tìm một ký tự NULL \uxxx Tìm ký tự theo quy định Unicode. \xxx Tìm một ký tự theo định nghĩa bát phân. \xdd Tìm một ký tự theo định nghĩa thập lục phân. + Lượng hóa phạm vi ký tự cần tìm: n+ Đánh giá bất kỳ chuỗi nào chứa ít nhất một ký tự n. n{X} Đánh giá bất kỳ chuỗi nào mà ký tự n xuất hiện X lần. n* Đánh giá bất kỳ chuỗi nào không có hoặc có nhiều hơn sự xuất hiện của n. n{X,Y} Đánh giá bất kỳ chuỗi nào mà ký tự n xuất hiện từ X đến Y lần. n? Đánh giá bất kỳ chuỗi nào không chứa hoặc một lần xuất hiện n. n{Y,} Đánh giá bất kỳ chuỗi nào mà ký tự n xuất hiện ít nhất Y lần. n$ Đánh giá bất kỳ chuỗi nào với n là ký tự kết thúc của nó. ?=n Đánh giá bất kỳ chuỗi nào được theo sau bởi chuỗi n. ^n Đánh giá bất kỳ chuỗi nào với n là ký tự bắt đầu của nó. ?!n Đánh giá bất kỳ chuỗi nào được theo sau không phải chuỗi n. Danh sách thuộc tính và phương thức: exec() test() Một số thuộc tính, phương thức tổng quát Ininity NaN underfined decodeURI() decodeURIComponent() escape() encodeURI() encodeURIComponent() evel() isFinite() isNaN() Number() parseFloat() parseInt() String() unescape() ĐỐI TƯỢNG JAVASCRIPT ĐỐI TƯỢNG window Đối tượng window được sử dụng khi bạn muốn lấy thông tin cửa sổ màn hình trình duyệt, hay kích hoạt mở một số popup hay cửa sổ màn hình khác. Những thuộc tính và phương thức của đối tượng này, bạn có thể gọi thẳng luôn mà không cần nhất thiết phải gọi: window. document navigator screen history location opener closed parent frames name length defaultStatus status self top innerHeight innerWidth outerHeight outerWidth pageXOffset pageYOffset screenLeft screenTop screenX screenY alert() confirm() prompt() focus() blur() open() close() print() createPopup() setInterval() setTimeout() clearInterval() clearTimeout() moveBy() moveTo() resizeBy() resizeTo() scrollBy() scrollTo() ĐỐI TƯỢNG navigator Đối tượng navigator được sử dụng giúp bạn lấy thông tin trình duyệt của khách viếng thăm web của bạn appCodeName appName appVersion cookieEnabled onLine platform userAgent javaEnabled() taintEnabled() ĐỐI TƯỢNG screen Đối tượng screen được sử dụng giúp bạn lấy thông tin màn hình thiết bị khách viếng thăm web của bạn availHeight availWidth colorDepth height width pixelDepth ĐỐI TƯỢNG history Đối tượng history được sử dụng giúp bạn lấy thông tin URL mà người dùng đã truy cập vào trang của bạn. back() forward() go() ĐỐI TƯỢNG location Đối tượng location chứa các thông tin về URL hiện tại. hash host hostname href pathname port protocol search assign() reload() replace() ĐỐI TƯỢNG document Mỗi một đối tượng document được nạp vào một cửa sổ trình duyệt trở thành một đối tượng document. doctype documentElement documentURI domConfig implementation inputEncoding strictErrorChecking xmlEncoding xmlStandalone xmlVersion adoptNode() createAttribute() createAttributeNS() createCDATASection() createElement() createElementNS() createEntityReference() createProcessingInstruction() createTextNode() getElementById() getElementsByTagName() importNode() normalizeDocument() renameNode() BẮT LỖI TRY CATCH Trong Javascript, đôi khi trong quá trình code phát sinh ra một số lỗi. Để bắt được những lỗi này, Javascript, sử dụng khối lệnh try catch fillany: Ví dụ dưới đây thực hiện phép chia toán học: function Phepchia(){ var a = 100; var b = 0; try{ if ( b == 0 ){ throw( alert("Không thể chia một số cho 0." ); } else{ var c = a / b; alert(“Kết quả: ”+c); } } catch ( e ) { alert("Đã xảy ra lỗi: " + e ); } finally{ alert(“Kết thúc”);} } THAO TÁC VỚI COOKIE Ví dụ dưới đây là một ví dụ đơn giản khi thao tác với cookie. function setCookie(cname,cvalue,exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires=" + d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } function checkCookie() { var user=getCookie("username"); if (user != "") { alert("Welcome again " + user); } else { user = prompt("Please enter your name:",""); if (user != "" && user != null) { setCookie("username", user, 30); } } } checkCookie(); LƯU TRỮ CỤC BỘ Với lưu trữ cục bộ, ứng dụng web có thể lưu dữ liệu cục bộ trên trình duyệt của người dùng. So với sử dụng cookie, lưu trữ cục bộ là bảo mật hươn và lượng lưu trữ lớn hơn. Lưu trữ cục bộ cung cấp 2 đối tượng để lưu trữ dữ liệu trên máy khách. - Đối tượng localStorage lưu trữ dữ liệu lâu dài trên máy khách, và không bị mất từ ngày này quan ngày khác. function CountSession () { if(typeof(Storage) !== "undefined") { if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount)+1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Bạn đã truy cập vào trang này: " + localStorage.clickcount + " lần."; } else { document.getElementById("result").innerHTML = "Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ."; } } CountSession (); - Đối tượng sessionStorage lưu trữ dữ liệu như một phiên làm việc. Dữ liệu sẽ mất khi người dùng đóng tab trình duyệt chỉ định. function CountOneSession() { if(typeof(Storage) !== "undefined") { if (sessionStorage.clickcount) { sessionStorage.clickcount = Number(sessionStorage.clickcount)+1; } else { sessionStorage.clickcount = 1; } document.getElementById("result").innerHTML = "Số lần truy cập gần đây: " + sessionStorage.clickcount + " lần."; } else { document.getElementById("result").innerHTML = "Trình duyệt của bạn không hỗ trợ lưu trữ cục bộ."; } } CountOneSession(); ĐỊNH VỊ GEOLOCATION HTML5 Geolocation API cho phép bạn chia sẻ vị trí của mình với các trang web bạn yêu thích. Javascript sẽ trả về vĩ độ và kinh độ của bạn. a. Tạo một đối tượng định vị: var geolocation = navigator.geolocation; b. Các phương thức của đối tượng định vị geolocation: getCurrentPosition() Lấy vị trí hiện tại của người sử dụng. Cú pháp: var retval = geolocation.getCurrentPosition (successCallback, errorCallback, options); watchPosition() Lấy thông tin cập nhật định kỳ về vị trí địa lý hiện tại của thiết bị. var watchId = geolocation.watchPosition(successCallback, errorCallback, options); clearWatch() Hủy bỏ việc thực hiện phương thức watchPosition đã gọi. Ví dụ: function LayVitri() { var geolocation = navigator.geolocation; geolocation.getCurrentPosition(HienthiVitri, LoiXuly, {maximumAge:75000}); } c. Các tham số của các phương thức getCurrentPosition() và watchPosition(): - successCallback: hàm xử lý khi gọi vị trí địa lý thành công. Hàm này nhận vào một tham số vị trí position. Trong hàm này ta sử dụng một đối tượng vị trí (position) để hiển thị đầy đủ thông tin vị trí địa lý. Nó bao gồm các thuộc tính: coords Lấy vị trí địa lý của thiết bị. Vị trí được thể hiện như một tập hợp tọa độ địa lý cùng với tên và tốc độ. latitude Lấy vĩ độ thập phân. Nó nhận giá trị từ -90 đến 90. longitude Lấy kinh độ thập phân. Nhận giá trị từ -180 đến 180. altitude Xác định độ cao của thiết bị tính bằng đơn vị mét. accuracy Lấy độ chính xác của kinh độ và vĩ độ tính bằng mét. altitudeAccuracy Xác định độ chính xác trong độ cao, tính bằng mét. heading Chỉ định hướng di chuyển của thiết bị so với cực Bắc theo chiều kim đồng hồ, tính theo độ. speed Tốc độ của Trái Đất tại vị trí thiết bị, đơn vị m/s. timestamp Xác định thời gan lấy thông tin vị trí. Ví dụ: function HienthiVitri (position) { var vido = position.coords.latitude; var kinhdo = position.coords.longitude; } - errorCallback: hàm xử lý khi gọi vị trí địa lý không thành công. Hàm này nhận vào một tham số lỗi vị trí positionError. Giá trị mặc định là null. Trong hàm này ta sử dụng một đối tượng vị trí (positionError) để hiển thị đầy đủ thông tin vị trí địa lý. Nó bao gồm các thuộc tính: code() Trả về mã lỗi UNKNOWN_ERROR - Không lấy được vị trí của thiết bị do một lỗi không rõ (tương ứng code=0). PERMISSION_DENIED - Không lấy được vị trí của thiết bị do ứng dụng không được phép sử dụng (tương ứng code=1). POSITION_UNAVAILABLE - Vị trí của thiết bị không được xác định (tương ứng code=2). TIMEOUT - Không được lấy vị trí của thiết bị trong một khoảng thời gian tối đa quy định (tương ứng code=3). message Trả về nguyên nhân không lấy được vị trí. Ví dụ: function LoiXuly (error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="Thiết bị do ứng dụng không được phép sử dụng."; break; case error.POSITION_UNAVAILABLE: x.innerHTML=" Vị trí của thiết bị không được xác định."; break; case error.TIMEOUT: x.innerHTML="Bạn không thể lấy được tọa độ trong thời gian này."; break; case error.UNKNOWN_ERROR: x.innerHTML=" Không lấy được vị trí của thiết bị do một lỗi không rõ."; break; } } - options: sử dụng một đối tượng có sử dụng mã JSON để xác định một hoặc nhiều thuộc tính để trả về giá trị mong muốn. Nó có thể nhận thuộc tính và giá trị như sau: enableHighAccuracy Xác định nhận giá trị vị trí chính xác nhất có thể. Nó có thể nhận giá trị true hoặc false. timeout Xác định số mili giây để chờ trả về thông tin vị trí. maximumAge Xác định số mili giây tối đa để trả về thông tin. Ví dụ: function LayVitri(){ var dinhvi = navigator.geolocation; dinhvi.getCurrentPositio(HienthiVitri, LoiXuly, {maximumAge:75000}); } Sau đây là tất cả đoạn code ta đã làm để lấy và hiển thị thông tin định vị trên bản đồ: Định vị Click nút để lấy vị trí của bạn: Định vị <script src=""> var x = document.getElementById("demo"); function LayVitri() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(HienthiVitri, HienthiLoi); }else { x.innerHTML = "Trình duyệt này không hỗ trợ định vị."; } } function HienthiVitri(position) { lat = position.coords.latitude; lon = position.coords.longitude; latlon = new google.maps.LatLng(lat, lon) mapholder = document.getElementById('mapholder') mapholder.style.height = '250px'; mapholder.style.width = '500px'; var myOptions = { center: latlon, zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL } }; var map = new google.maps.Map(document.getElementById("mapholder"), myOptions); var marker = new google.maps.Marker({ position: latlon, map: map, title: "Bạn đang ở đây!" }); } function HienthiLoi(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = "Người dùng cấm sử dụng định vị."; break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Thông tin vị trí không được xác định."; break; case error.TIMEOUT: x.innerHTML = "Yêu cầu đã quá hạn."; break; case error.UNKNOWN_ERROR: x.innerHTML = "Lỗi không xác định."; break; } } KỸ THUẬT AJAX 1. Giới thiệu và phương thức hoạt động của AJAX: a. Khái niệm AJAX: AJAX là từ viết tắt của Asynchronous Javascript And XML. AJAX là một kỹ thuật cho phép tạo ra các trang Web tạo ra các trang Web nhanh chóng và năng động. AJAX cho phép các trang Web được cập nhật không đồng đều bằng cách trao đổi một lượng nhỏ dữ liệu với máy chủ qua hoạt cảnh. Điều đó có nghĩa là nó cho phép cập nhật từng phần của trang Web mà không cần tải lại toàn bộ trang. Điều mà trong các Website trước đây phải tải lại toàn bộ trang web nếu nội dung của nó cần sự thay đổi. Hiện nay AJAX được sử dụng với Google Maps, Gmail, Youtube, Facebook b. Hoạt động của AJAX c. AJAX dựa trên các chuẩn cơ bản của Internet với sự kết hợp của: - Đối tượng XMLHttpRequest (trao đổi dữ liệu không đồng bộ với một máy chủ). - JavaScript/DOM (để hiển thị/ tương tác với thông tin). - Css (kiểu trình bày trang). - XML (thường được sử dụng như là định dạng để chuyển đổi dữ liệu). d. Ứng dụng: AJAX được sử dụng phổ biến từ năm 2005 trong các trang của Google, Google Suggest. Họ đã sử dụng AJAX để tạo ra một giao diện trang Web rất năng động. Khi bạn bắt đầu gõ vào ô tìm kiếm của Google, một đoạn Javascript được gửi về máy chủ và máy chủ trả về một danh sách các gợi ý. 2. Thao tác AJAX với JavaScript: Giả sử chúng ta cho một nút và một phần tử div sẽ được sử dụng để hiển thị thông tin tải về từ máy chủ khi nút được nhấp: Tải trang Nội dung trang được tải khi bấn Button Bây giờ, ta tạo thêm một thẻ trong phần để tạo một hàm kịch bản taitrang() function taitrang() { //Đoạn mã AJAX được trình bày dưới đây. } a. Tạo đối tượng XMLHttpRequest: Hầu hết các trình duyệt hiện nay đều hỗ trợ đối tượng XMLHttpRequest (riêng đối với IE5 và IE6 sử dụng đối tượng ActiveXObject). Đối tượng XMLHttpRequest được sử dụng để trao đổi dữ liệu với máy chủ sau hoạt cảnh. Điều này có nghĩa là nó có thể cập nhật các phần của trang Web mà không cần phải tải lại toàn bộ trang. - Cú pháp tạo đối tượng XMLHttpRequest: tên_biến = new XMLHttpRequest(); - Riêng đối với các trình duyệt IE5 hoặc IE6 ta tạo một đối tượng ActiveXObject: tên_biến = new ActiveXObject(“Microsoft.XMLHTTP”); Và để tổng quát cho tất cả các trình duyệt ta dùng đoạn lệnh sau: var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } b. Gửi yêu cầu về máy chủ: Để gửi yêu cầu về máy chủ chúng ta sử dụng các phương thức open() và close() của đối tượng XMLHttpRequest: Phương thức open(): dùng để xác định loại yêu cầu, Đường dẫn đến nơi yêu cầu, và yêu cầu cần xử lý thông tin đồng bộ hay không. Cú pháp xmlhttp.open(method,url,async); Trong đó: - method: xác định loại yêu cầu: là GET hay POST. GET POST GET là đơn giản và nhanh hơn POST, và được sử dụng trong hầu hết các trường hợp. Tuy nhiên có một số trường hợp ta luôn luôn sử dụng POST: - Tập tin lưu trữ không phải chỉ có một lựa chọn (như trong trường hợp cập nhật một tập tin hay cơ sở dữ liệu trên máy chủ). - Gửi một lượng lớn dữ liệu lên máy chủ (POST không giới hạn kích thước). - Gửi dữ liệu từ người dùng nhập vào (đòi hỏi mã hóa để giữ bí mật), POST mạnh mẽ và an toàn hơn GET. GET thường gắn thêm ID Ví dụ: xmlhttp.open("GET","demo_get2.asp ?fname=Henry&lname=Ford",true); xmlhttp.send(); POST đơn giản chỉ cần đường dẫn. Đồng thời chúng ta có thể thêm một tiêu đề HTTP với setRequestHeader(tiêu_đề ,giá_trị). Đồng thời chỉ định dữ liệu muốn gửi trong phương thức send(). Ví dụ: xmlhttp.open("POST","ajax_test.asp" ,true); xmlhttp.setRequestHeader("Content- type","application/x-www-form- urlencoded"); xmlhttp.send("fname=Henry&lname =Ford"); - url: xác định vị trí của tập tin cần cập nhật trên máy chủ. Các tập tin có thể có định dạng .txt, .xml hoặc các tập tin kịch bản như .asp, .php (có thể thực hiện hành động trên máy chủ trước khi gửi phản hồi lại). - async: để xác nhận xem có cần cập nhật thông tin đồng bộ hay không. Nó nhận giá trị true hoặc false. Gửi yêu cầu không đồng bộ là một cải tiến lớn cho các nhà phát triển web. Một trong những công dụng rất lớn của nó là tiết kiệm thời gian thực hiện trên máy chủ. Trước khi có AJAX, hoạt động này có thể gây ra việc treo và dừng lại của ứng dụng. Với AJAX, JavaScript không chờ đợi phản ứng máy chủ, mà nó có thể: + Thực hiện các kịch bản khác trong khi chờ đợi phản hồi từ máy chủ. + Đối phó với những tình huống có thể xảy ra. true false Khi sử dụng true, bạn có thể đưa ra các hàm chức năng trong khi chờ đợi máy chủ phản hồi lại. Khi đó các hàm sẽ được viết trước khi sử dụng phương thức open() và nhìn chung đều nhằm sử lý trong trường hợp xảy ra sự cố khi máy chủ nhận và phản hồi thông tin.Ví dụ: xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv") .innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); Khi bạn sử dụng false, các đoạn Javascript sẽ không được thực hiện cho đến khi máy chủ trả về phản hồi. Cho nên các hàm bạn phải viết sau phương thức send(). Khi đó, nếu máy chủ đang bận hoặc chậm, ứng dụng sẽ bị treo hay dừng lại. Ví dụ: xmlhttp.open("GET","ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv") .innerHTML=xmlhttp.responseText; Phương thức send(): dùng để gửi yêu cầu về máy chủ. Cú pháp: xmlhttp.send(string); Trong đó: string chỉ được sử dụng nếu loại yêu cầu là POST. c. Phản hồi từ máy chủ: Để nhận được phản hồi từ máy chủ, ta có thể sử dụng các thuộc tính responseText hoặc responseXML của đối tượng XMLHttpRequest. Ví dụ: Chỉ nhận phản hồi dữ liệu như một chuỗi. Ví dụ: function loadXMLDoc(){ var xmlhttp; if (window.XMLHttpRequest){xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } Đặt nội dung AJAX vào đây. Thay đổi nội dung d. Sự kiện readyState: Khi một yêu cầu tới máy chủ được gửi đi, chúng ta muốn thực hiện một số hành động cơ bản để dựa trên kết quả phản hồi. Sự kiện onreadystatechange được kích hoạt mỗi khi readyState thay đổi. Các thuộc tính readyState xác định trạng thái của XMLHttpRequest. Ba thuộc tính quan trọng của đối tượng XMLHttpRequest: onreadystatechange tập hợp các hàm (hoặc tên của một hàm) được gọi tự động mỗi lần thay đổi thuộc tính readyState. readyState Xác định trạng thái của XMLHttpRequest. Nó có thể nhận giá trị từ 0 đến 4. 0 Không yêu cầu khởi tạo 1 Đã kết nối được với máy chủ 2 Yêu cầu đã nhận được 3 Đang xử lý yêu cầu 4 Đã xử lý xong và sẵn sàng phản hồi lại yêu cầu. status 200: “OK”. 404: không tìm thấy trang. Ví dụ: function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); } Đặt nội dung AJAX vào đây Thay đổi e. Sử dụng một hàm gọi lại: Một hàm gọi lại được xác đinh như là một tham số được truyền vào một hàm khác. Nếu bạn có nhiều hơn một nhiệm vụ AJAX trên trang web của bạn, bạn nên sử dụng một hàm tiêu chuẩn để tạo ra đối tượng XMLHttpRequest. và gọi cho mỗi nhiệm vụ AJAX. Những lần gọi hàm chức năng nên có các URL và những gì cần làm trên onreadystatechange (mà có lẽ là khác nhau cho mỗi lần gọi). Ví dụ: var xmlhttp; function loadXMLDoc(url,cfunc){ if (window.XMLHttpRequest){ xmlhttp=new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction(){ loadXMLDoc("ajax_info.txt",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } Đặt nội dung JS vào đây Thay đổi HIỆU SUẤT WEB Khi bạn thực hiện các kịch bản Javascript trong một trang HTML, trang bị ngừng phản hồi cho đến khi kịch bản đó được hoàn thành. Web worker là một đoạn mã Javascript được chạy ở chế độ nền, độc lập với các kịch bản khác trong trang, mà không ảnh hưởng đến hiệu suất chạy trang. Điều đó có nghĩa là bạn có thể tiếp tục làm điều gì mà bạn muốn: nhấp chuột, chọn phần tử trong khi web worker vẫn đang chạy ở chế độ nền. Bạn cũng lưu ý là web worker chạy trong chế độ nền nên bạn không thể thao tác với các đối tượng window, document, element trong tập tin ngoài của web worker. Trước khi làm việc với Web worker, bạn phải kiểm tra trình duyệt có hỗ trợ hay không. if(typeof(Worker) !== "undefined") { // Trình duyệt có hỗ trợ web worker } else { // Trình duyệt không hỗ trợ web worker } Trong trường hợp trình duyệt có hỗ trợ web worker, bạn có thể: - Tạo ra một đối tượng Web Worker w = new Worker("demo_workers.js"); trong đó tập tin Js demo_worker là tập tin thực thi Web Worker. - Chấm dứt một Web Worker: w.terminate(); - Tái sử dụng lại Web Worker sau khi bạn đã chấm dứt sử dụng chúng: w = undefined; Sau đây là một ví dụ cụ thể thao tác với Web Worker: Số đếm: Bắt đầu Kết thúc var w; function startWorker() { if(typeof(Worker) !== "undefined") { if(typeof(w) == "undefined") { w = new Worker("demoworkers.js"); } w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { alert(“Trình duyệt không hỗ trợ Web Worker”); } } function stopWorker() { w.terminate(); w = undefined; } Trong đó nội dung tập tin demoworkers.js là: var i = 0; function timedCount() { i = i + 1; postMessage(i); setTimeout("timedCount()",500); } timedCount(); SỰ KIỆN GỬI MÁY CHỦ (SSE) Sự kiện gửi máy chủ (SSE – Server Send Events) là một bản cập nhật từ máy chủ và hiển thị kết quả trên trình duyệt Web. Trước khi lấy dữ liệu từ máy chủ, trình duyệt sẽ đưa ra yêu cầu và sẽ đưa ra bản cập nhật nếu nó có sẵn trên máy chủ. Ví dụ: Update máy chủ if(typeof(EventSource) !== "undefined") { var source = new EventSource("demosse.php"); source.onmessage = function(event) { document.getElementById("result").innerHTML += event.data + ""; }; } else { document.getElementById("result").innerHTML = "Trình duyệt không hỗ trợ SSE "; } Trong đó nội dung tập tin demosse.php là: <?php header('Content-Type: text/event-stream'); header('Cache-Control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush(); ?> ĐẠI CƯƠNG VỀ JQUERY Javascript là một ngôn ngữ kịch bản phía máy khách, nhằm tăng cường tính tương tác cho trang web; thường được sử dụng để thay đổi nội dung từng phần trên trang, hay bắt các sự kiện như trong quá trình tải trang, kích hoạt các nút, hay kiểm tra biểu mẫu trước khi nó được gửi về phía máy chủ. Cài đặt thư viện jQuery vào trong trang HTML: Vận dụng jQuery: $()..; Trong trường hợp sử dụng nhiều thư viện JavaScript. Do các thư viện này có thể sử dụng $ nên ta cần tránh xung đột khi sử dụng. Khi đó jQuery cung cấp một phương thức .noConflict() để trả ký hiệu nhận dạng $ về cho các thư viện khác. Khi đó để sử dụng jQuery ta phải sử dụng từ jQuery thay vì dấu nhận dạng $. jQuery.noConflict(); BỘ CHỌN JQUERY BỘ CHỌN CƠ BẢN * Chọn tất cả các phần tử $(“*”) #id Chọn tất cả các phần tử có thuộc tính id=”id” $(“#lastname”) .class Chọn tất cả các phần tử có thuộc tính class=”class” $(“.intro”) element Chọn tất cả các phần tử element $(“p”) sel1, sel2, sel3 Đa bộ chọn $(“.intro .demo”) BỘ CHỌN PHÂN CẤP ances descen Chọn tất cả các phần tử descen là con cháu của ances $(“ul li”) parent > child Chọn tất cả phần tử child là con trực tiếp của parent $(“div > div”) prev + next Chọn tất cả các phần tử next là phần tử kế tiếp ngay sau prev $(“p + div”) prev ~ siblings Chọn tất cả những phần tử siblings là anh em cùng cấp với prev nhưng nằm phía sau prev $(“.pt1 ~ pt2 ”) BỘ CHỌN MỞ RỘNG a. Chọn theo thuộc tính (Attribute Selectors) [attribute] Lọc các phần tử có khai báo attribute $(“[href]”) [attribute = value] Lọc các phần tử có attribute với giá trị là value $(“[href=’index.html’]”) [attribute != value] Lọc các phần tử có attribute với giá trị là khác value $(“[href!=’index.html’]”) [attribute ^= value] Lọc các phần tử có attribute với giá trị bắt đầu là value $(“[href^=’index’]”) [attribute $= value] Lọc các phần tử có attribute với giá trị kết thúc là value $(“[href$=’.jpg’]”) [attribute *= value] Lọc các phần tử có attribute với giá trị có chứa value $(“[href*=’hoa’]”) [attr1][attr2][attr3] Lọc các phần tử thỏa mãn tất cả các $(“[href*=’hoa’] thuộc tính [href=’mai.html’]”) b. Chọn theo form (Form Selectors) :input Chọn tất cả các phần tử input $(“:input”) :text Chọn tất cả các phần tử input với type=”text” $(“:text”) :password Chọn tất cả các phần tử input với type=” password” $(“:password”) :radio Chọn tất cả các phần tử input với type=”radio” $(“:radio”) :checkbox Chọn tất cả các phần tử input với type=”checkbox” $(“:checkbox”) :submit Chọn tất cả các phần tử input với type=”submit” $(“:submit”) :reset Chọn tất cả các phần tử input với type=”reset” $(“:reset”) :button Chọn tất cả các phần tử input với type=”button” $(“:button”) :image Chọn tất cả các phần tử input với type=”image” $(“:image”) :file Chọn tất cả các phần tử input với type=”file” $(“:file”) :enabled Chọn các phần tử ở trạng thái enabled $(“:enabled”) :disabled Chọn các phần tử ở trạng thái disabled $(“:disabled”) :checked Chọn các phần tử checked hoặc radio ở trạng thái checked $(“:checked”) :selected Chỉ chọn các phần tử option ở trạng thái selected $(“:selected”) c. Lọc theo vị trí (Position Filters) :first Lấy phần tử đầu tiên trong tập kết quả khớp với selector $("p:first") :last Lấy phần tử cuối cùng trong tập kết quả khớp với selector $("p:last") :even Lấy các phần tử ở vị trí chẵn trong tập các phần tử được chọn khớp với selector $("tr:even") :odd Lấy các phần tử ở vị trí lẻ trong tập các phần tử được chọn khớp với selector $("tr:odd") :eq(index) Lấy các phần tử ở vị trí index trong tập các phần tử được chọn khớp với selector $("ul li:eq(3)") :gt(index) Lấy các phần tử ở vị trí lớn hơn index trong tập các phần tử được chọn khớp với selector $("ul li:gt(3)") :lt(index) Lấy các phần tử ở vị trí nhỏ hơn index trong tập các phần tử được chọn khớp với selector $("ul li:lt(3)") :not(selector) Không chọn những phần tử trống $("input:not(:empty)") :only-child Trả về tất cả các phần tử con mà không phải là phần tử anh em :nth-child(index) Lấy phần tử ở vị trí index trong tập phần tử được chọn khớp với selector :first-child Lấy phần tử con đầu tiên trong tập kết quả khớp với selector :last-child Lấy phần tử con cuối cùng trong tập kết quả khớp với selector d. Lọc theo nội dung (Content Filters) :contains(text) Lọc các phần tử có chứa chuỗi text $(":contains('W3C')") :empty Lọc các phần tử rỗng $(":empty") :has(selector) Lọc các phần tử có chứa ít nhất một phần tử thỏa selector $(“:has(‘div’)”) :parent Lọc các phần tử cha (có chứa ít nhất một phần tử khác hoặc text) $(“:parent”) e. Một số cách lọc khác (Visual Filters) :hidden Lọc các phần tử có trạng thái đang ẩn $(“p:hidden”) :visible Lọc các phần tử ở trạng thái đang hiển thị $(“table:visible”) :header Chọn các phần tử tiêu đề (từ h1 đến h6) $(“:header”) :animated Chọn các phần tử động $(“ animated”) PHƯƠNG THỨC DUYỆT DOM .children(selector) Được sử dụng để chọn các phần tử con trực tiếp (phần tử con mức 1) của các phần tử được chọn. $("div") .children(".selected") .addClass("blue"); .siblings(selector) Được sử dụng để lấy tất cả các phần tử cùng cấp với mỗi phần tử được chọn $('p').siblings('div'); .contents() .find(selector) Được sử dụng để chọn phần tử hậu duệ của các phần tử được chọn $('.article').find('p'); .next(selector) Được sử dụng để lấy phần tử ở ngay sau mỗi phần tử được chọn $('h2').next(); .nextAll(selector) Được sử dụng để lấy tất cả các phần tử cùng cấp ở phía sau của mỗi phần tử được chọn $('h2').nextAll('p'); .parent(selector) Dùng để lấy phần tử cha (là phần tử có chứa) của mỗi phần tử được chọn $('p').parent(); .parents(e) .prev(selector) Được sử dụng để lấy phần tử ở ngay phía trước của mỗi phần tử được chọn $('h2').prev(); .prevAll(selector) Được sử dụng để lấy tất cả các phần tử cùng cấp ở phía trước của mỗi phần tử được chọn $('h2').prevAll(); PHƯƠNG THỨC SỰ KIỆN JQUERY SỰ KIỆN CHUỘT click() Kích hoạt hoặc gọi một hàm khi sự kiện nhấp chuột nơi phần tử được chọn. dbclick() Kích hoạt hoặc gọi một hàm khi sự kiện nhấp đúp chuột nơi phần tử được chọn. mousedown() Kích hoạt hoặc gọi một hàm khi sự kiện nhấn chuột xuống nơi phần tử được chọn. mousemove() Kích hoạt hoặc gọi một hàm khi sự kiện di chuyển chuột lên nơi phần tử được chọn. mouseover() Kích hoạt hoặc gọi một hàm khi sự kiện con trỏ chuột ở trên phần tử được chọn. mouseout() Kích hoạt hoặc gọi một hàm khi sự kiện di chuyển chuột ra ngoài phần tử được chọn. mouseup() Kích hoạt hoặc gọi một hàm khi sự kiện nhả chuột ra nơi phần tử được chọn. hover() Gọi một hay hai hàm khi sự kiện di chuyển chuột vào phần tử được chọn. mouseenter() Gọi một hay hai hàm khi sự kiện chuột vào phần tử được chọn. mouseleave() Gọi một hay hai hàm khi sự kiện chuột ra phần tử được chọn. SỰ KIỆN BÀN PHÍM keydown() Kích hoạt hoặc gọi một hàm khi sự kiện nhấp một phím xuống nơi phần tử được chọn. keypress() Kích hoạt hoặc gọi một hàm khi sự kiện nhấp và nhả một phím nơi phần tử được chọn. keyup() Kích hoạt hoặc gọi một hàm khi sự kiện nhả một phím ra nơi phần tử được chọn. SỰ KIỆN ĐỐI TƯỢNG HOẶC KHUNG ready() Gọi một hàm cho sự kiện tài liệu đã sẵn sàng. error() Kích hoạt hoặc gọi một hàm khi sự kiện có lỗi tại phần tử được chọn. load() Kích hoạt hoặc gọi một hàm khi sự kiện tải phần tử được chọn đã hoàn thành. resize() Kích hoạt hoặc gọi một hàm khi sự kiện kích thước của phần tử được chọn thay đổi. scroll() Kích hoạt hoặc gọi một hàm khi sự kiện cuốn tài liệu để xem phần tử được chọn. unload() Kích hoạt hoặc gọi một hàm khi sự kiện tạm dừng việc tải phần tử được chọn. SỰ KIỆN BIỂU MẪU blur() Kích hoạt hoặc gọi một hàm khi sự kiện phần tử được chọn mất tiêu điểm. change() Kích hoạt hoặc gọi một hàm khi sự kiện phần tử được chọn thay đổi nội dung. focus() Kích hoạt hoặc gọi một hàm khi sự kiện phần tử được chọn nhận tiêu điểm. focusin() Gọi một hàm cho sự kiện nhận tiêu điểm của phần tử được chọn. focusout() Gọi một hàm cho sự kiện mất tiêu điểm của phần tử được chọn. select() Kích hoạt hoặc gọi một hàm khi sự kiện phần tử được chọn là input hoặc textarea. submit() Kích hoạt hoặc gọi một hàm khi sự kiện nút phần tử được chọn gửi biểu mẫu. THIẾT LẬP SỰ KIỆN bind() Thêm một hoặc nhiều sự kiện xử lý cho phần tử phù hợp. unbind() Hủy bỏ một sự kiện xử lý được thêm từ phần tử được chọn. live() Thêm một hoặc nhiều sự kiện xử lý tại thời điểm hiện tại hoặc tương lai của phần tử được chọn. die() Xóa tất cả các sự kiện xử lý được thêm vào từ hàm live(). one() Thêm một hoặc nhiều sự kiện xử lý cho phần tử phù hợp. Những xử lý này được sử dụng duy nhất một lần cho mỗi phần tử. delegate() Thêm một hoặc nhiều sự kiện xử lý được gọi tại thời điểm hiện tại hoặc tương lai của phần tử con của phần tử được chọn. undelegate() Xóa bỏ một sự kiện xử lý cho phần tử được chọn trong hiện tại hoặc tương lai. toggle() Gọi hai hoặc nhiều hàm thay đổi khi sự kiện nhấp chuột thực hiện trên phần tử được chọn. trigger() Kích hoạt tất cả các sự kiện liên quan cho phần tử được chọn. triggerHandler() Kích hoạt tất cả các hàm của một sự kiện được kích hoạt cho phần tử được chọn. sự_kiện.preventDefault() Ngăn chặn việc thực hiện các hành động mặc định của sự kiện. sự_kiện. isDefaultPrevented () Trả về kết quả có hay không việc áp dụng hàm preventDefault() cho phần tử được chọn. CÁC THUỘC TÍNH sự_kiện.pageX Trả về vị trí của chuột so với cạnh trái của tài liệu. sự_kiện.pageY Trả về vị trí của chuột so với cạnh trên của tài liệu. sự_kiện.result Trả về giá trị cuối cùng trả về bởi một hàm sự kiện được kích hoạt, trừ khi giá trị đó là rỗng. sự_kiện.timeStamp Trả về số mili giây kể từ ngày 1/1/1970 khi sự kiện được kích hoạt. sự_kiện.target Trả về tên phần tử DOM thực hiện sự kiện. sự_kiện.type Trả về tên của sự kiện. sự_kiện.which Trả về mã hóa một phím hoặc một sự kiện kích hoạt. PHƯƠNG THỨC HIỆU ỨNG TRONG JQUERY Các hiệu ứng động của jQuery sẽ làm cho trang web của bạn thêm phần sinh động. Jquery cho phép bạn ẩn hiện, trượt lên trượt xuống các thành phần của trang web. Bạn cũng có thể cho nó xảy ra cùng một lúc hoặc theo thứ tự định trước. Trong phần này chúng ta sẽ tìm hiểu các hiệu ứng jQuery và kết hợp chúng để tạo ra những hiệu ứng hay. Một số yếu tố trong hiệu ứng: - Khi không đặt giá trị tham sô của phương thức, phần tử được chọn sẽ thực hiện hiệu ứng ngay lập tức. - Tốc độ hiệu ứng [speed] : chỉ ra khoảng thời gian diễn ra của hiệu ứng. + Tốc độ chậm ‘slow’ – làm cho hiệu ứng diễn ra trong vòng 0,6 giây. + Tốc độ trung bình ‘normal’ – làm cho hiệu ứng diễn ra trong vòng 0,4 giây. + Tốc độ nhanh ‘fast’- làm cho hiệu ứng diễn ra trong vòng 0,2 giây. + Tốc độ num – làm cho hiệu ứng diễn ra trong vòng num mili giây. - Độ trong suốt của hình ảnh [opacity]: là một số số từ 0.00 (tương ứng 0%- ẩn hoàn toàn) đến 1.00 (tương ứng 100% - hiện hoàn toàn). - Hàm [calback]: là hàm được gọi sau khi hiệu ứng hoàn thành. * Lưu ý: Hiệu ứng hiển thị chỉ làm việc trên các phần tử bị ẩn bởi jQuery (fadeOut(),hide(), toggle(),..) và display:none trong CSS (nhưng không phải visibility:hidden). HIỆU ỨNG CƠ BẢN hide() Hiển thị ra tất cả các phần tử được chọn đang trong trạng thái ẩn. $(bộ_chọn).hide([speed], [calback]); show() Ẩn đi tất cả các phần tử được chọn đang trong trạng thái hiển thị. $(bộ_chọn).show([speed], [calback]); toggle() cho phép thực hiện đảo trạng thái hiển thị (ẩn => hiện, hiện => ẩn) của các phần tử được chọn. $(bộ_chọn).toggle([speed], [calback]); HIỆU ỨNG MỜ DẦN fadeIn() làm cho các phần tử được chọn từ trạng thái ẩn dần dần chuyển sang trạng thái nhìn thấy được $(bộ_chọn).fadeIn([speed], [calback]); fadeOut() làm cho các phần tử được chọn từ trạng thái nhìn thấy được dần dần chuyển sang trạng thái ẩn. $(bộ_chọn).fadeOut([speed], [calback]); fadeTo() làm cho trạng thái các đối tượng được chọn trở lên trong suốt đến mức trong suốt được chỉ ra. $(bộ_chọn).fadeTo ([speed], [opacity], [calback]); fadeToggle() dùng để đảo trạng thái từ fadeIn sang fadeOut hoặc ngược lại. $(bộ_chọn).fadeToggle([speed], [calback]); HIỆU ỨNG SLIDE slideDown() Thay đổi từ từ chiều cao của các đối tượng từ trên xuống dưới từ trạng thái ẩn cho đến khi nhìn thấy được. $(bộ_chọn).slideDown([speed], [calback]); slideToggle() được dùng để đảo trạng thái từ slideUp sang slideDown hoặc ngược lại. $(bộ_chọn).slideToggle([speed], [calback]); slideUp() Thay đổi từ từ chiều cao của các đối tượng từ dưới lên trên từ nhìn thấy được sang trạng thái ẩn. $(bộ_chọn).slideUp([speed], [calback]); HIỆU ỨNG ĐỘNG animate() Cho phép tự tạo hiệu ứng động theo ý muốn thông qua thay đổi giá trị của các thuộc tính CSS. $(bộ_chọn).animate(style,speed,easing,callback); $(bộ_chọn).animate(style,option); Trong đó: - style: chỉ ra một hoặc nhiều thuộc tính CSS để animate - easing: Kiểu di chuyển của hiệu ứng. Gồm hai hàm có sẵn là ‘swing’, ‘linear’. Ngoài ra có thể dùng các plugin mở rộng. Lưu ý: Chỉ có thể thực hiện thay đổi trên các thuộc tính CSS có giá trị kiểu số (margin:30px), không thể thay đổi trên thuộc tính kiểu chuỗi (background- color:red). PHƯƠNG THỨC BỔ TRỢ HIỆU ỨNG stop() Phương thức dừng ngay lập tức các hiệu ứng hoạt họa đang thực thi trên các phần tử được chọn $(bộ_chọn).stop(stopAll,gotoEnd); Trong đó: - stopAll: là tham số tùy chọn kiểu boolean. Giá trị mặc định là false, nếu thiết lập là true sẽ xóa toàn bộ hoạt họa nối tiếp (dừng ngay lập tức). - gotoEnd: là tham số tùy chọn kiểu boolean. Giá trị mặc định là false, nếu thiết lập là true hiệu ứng sẽ được hoàn thành ngay lập tức . delay() Đợi một khoảng thời gian tính bằng mili giây trước khi thực hiện hiệu ứng tiếp theo. Ví dụ: $('h1').show(300).delay(1000).hide(300); queue() Dùng để xen giữa các hiệu ứng khi đang chạy được áp dụng cho phần tử chọn như trong các hiệu ứng animate() đẻ thay đổi thuộc tính css có giá trị kiểu chuỗi. clearQueue() Dùng để dừng trước khi thực hiện hiệu ứng queue(). Nó khác với phương thức stop() ở chỗ sau khi cho hiệu ứng chạy tiếp nó sẽ thực hiện các phương thức tiếp theo là queue(). dequeue() Đặt một khoảng thời gian để chờ trước khi thực hiện hiệu ứng tiếp theo. PHƯƠNG THỨC HTML TRONG JQUERY Những phương thức này phần lớn được sử dụng để chèn một đối tượng nào đó vào trong tài liệu. Lưu ý: - content: là một chuỗi nội dung muốn chèn vào trang. Chuỗi nội dung có thể là một bộ chọn, hoặc các thẻ HTML. - target: là một selector để chọn phần tử mà nội dung content sẽ được chèn vào. THAY ĐỔI THUỘC TÍNH addClass() removeClass() toggleClass() hasClass() - Phương thức addClass(): dùng để thêm class xác định cho tập phần tử được chọn. Nếu muốn thêm nhiều class thì các class được liệt kê cách nhau bởi khoảng trắng. Kiểu trả về là jQuery. Ví dụ: $("p").addClass("maudo"); - Phương thức removeClass(): dùng để gỡ bỏ toàn bộ class hoặc chỉ một số class xác định khỏi tập phần tử được chọn. Kiểu trả về là jQuery. Ví dụ: $("p").removeClass("maudo"); - Phương thức toggleClass(): sẽ thêm class nếu class chưa tồn tại hoặc loại bỏ nếu class đã tồn tại. Kiểu trả về là jQuery Ví dụ: $("p").toggleClass("maudo"); - Phương thức hasClass(): kiểm tra xem phần tử được chọn của class được chọn. attr() Dùng để lấy/ gán giá trị cho thuộc tính của phần tử được chọn. - Để lấy giá trị của thuộc tính CSS, ta dùng: $(bộ_chọn).attr(thuộc_tính); Ví dụ: $(‘table’).attr(‘height’); - Để thêm một thuộc tính và giá trị của CSS, ta dùng: $(bộ_chọn).attr(thuộc_tính, giá_trị); Ví dụ: $(‘table’).attr(‘width’,’1000px’); - Để thêm nhiều thuộc tính và giá trị CSS, ta dùng: $(bộ_chọn).attr(attr1:value1,attr2:value2...); Ví dụ: $(‘table’).attr(‘width’:’1000px’,’height’:’500’); removeAttr() Gỡ bỏ thuộc tính của phần tử được chọn. $(bộ_chọn).removeAttr(thuộc_tính); Ví dụ: $(‘p’).removeAttr(‘style’); val() Đặt hoặc trả về giá trị của phần