<article>

Thời trang mùa xuân

Xu hướng thời trang mùa xuân 2016.

<footer>

<a href="/xuan-2016" rel=bookmark>Chi tiết</a></footer>
</article>
<article>

Thời trang mùa xuân

Xu hướng thời trang mùa xuân 2016.

<footer>

<a href="/xuan-2016" rel=bookmark>Chi tiết</a></footer>
</article>

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ử <ul> đánh dấu việc bắt
đầu và kết thúc danh sách.
- Phần tử <li> 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ử <ol> đánh dấu việc bắt
đầu và kết thúc danh sách.
- Phần tử <li> 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 <ol start=n>...</ol>

- 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ử <dl> đánh dấu bắt
đầu và kết thúc danh sách.
- Phần tử <dt> chỉ ra thuật ngữ
cần định nghĩa.
- Phần tử <dd> chỉ thuật ngữ
dùng để định nghĩa.

<nav id=“mainmenu”>
<ul>
<li><a href=“/”>Trang chủ</a></li>
<li><a href=“/”>Giới thiệu</a></li>
<li><a href=“/”>Tin tức</a></li>
<li><a href=“/”>Liên hệ</a></li>
</ul>
</nav>

<nav id=“breadcrumb”>
<ol>
<li><a href=“/”>Trang chủ</a></li>
<li><a href=“/”>Tin tức</a></li>
<li><a href=“/”>Thời trang</a></li>
<li>Xu hướng hiện đại</li>
</ol>
</nav>

<nav id=category>
<dl>
<dt><a href=“/”>Thời trang</a></dt>
<dd>Phong cách hiện đại</dd>
<dt><a href=“/”>Gia dụng</a></dt>

<dd>Tiện nghi hàng đầu</dd>
</dl>
</nav>

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 đó:
<article itemscope itemtype=" /><header>

Xu hướng thiết kế web hiện nay

<time itemprop="datePublished" datetime="2016-04-04">3 ngày trước</time>

<link itemprop="url" href="?comments">
</header>

… Tại đây viết nội dung chính của bài viết …

<section>

Bình luận

<article itemprop="comment" itemscope itemtype=" id="c1">
<link itemprop="url" href="#c1">
<footer>

Đăng bởi: <span itemprop="creator" itemscope itemtype=" /><span itemprop="name">Trần Thái Hà</span>
</span>

<time itemprop="commentTime" datetime="2016-04-01">15 phút trước</time>

</footer>

Rất tốt, bài viết này giúp tôi biết thêm nhiều điều!

</article>
<article itemprop="comment" itemscope itemtype=" id="c2">

<link itemprop="url" href="#c2">
<footer>

Đăng bởi: <span itemprop="creator" itemscope itemtype=" /><span itemprop="name">Phạm Thanh Hoa</span>
</span>

<time itemprop="commentTime" datetime="2016-04-01">15 phút trước</time>

</footer>

Cảm ơn bạn rất nhiều về những chia sẻ này!

</article>
</section>
</article>

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:
<article>
<header>

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

</header>

… Nội dung chi tiết nói về thời trang …

<section>

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.

<footer>

<a href="/xuan-2016" rel=bookmark>Chi tiết</a></footer>
</section>
<section>

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.

<footer>

<a href="/xuan-2016" rel=bookmark>Chi tiết</a></footer>
</section>
</article>


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
PHẦN TỬ TABLE (trình bày bảng)

PHẦN TỬ FORM (trình bày biểu mấu nhập liệu)

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:

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ệ...

<table width="400" border="1" cellpadding="5" cellspacing="0" aria-describedby="summary">
<caption>QUẢN LÝ SINH VIÊN</caption>
<thead><tr><th>ID</th><th>Họ và tên </th><th>Điểm</th><th>Xếp loại </th></tr></thead>
<tbody>
<tr><td colspan="4">Khóa A </td></tr>
<tr><td>1</td><td>Trần Tiến Tài </td><td>7</td><td rowspan="2">Khá</td></tr>
<tr><td>2</td><td>Phạm Mạnh Khoa </td><td>8</td></tr>
</tbody>
<tbody>
<tr><td colspan="4">Khóa B</td></tr>

<tr><td>3</td><td>Trần Văn Hưng </td><td>5</td><td>Trung bình </td></tr>
<tr><td>4</td><td>Đỗ Đức Thành </td><td>10</td><td>Giỏi</td></tr>
</tbody>
<tfoot><tr><th colspan="2">TỔNG CỘNG</th><th>7.5</th><th>Khá</th></tr></tfoot>
</table>

- 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.

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.

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.

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ư:
<textarea>
đị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.

<label>

tạo một nhãn cho phần tử <input>.


<fieldset>

tạo một khung bao quanh biểu mẫu.

<legend>

Tạo một tiêu đề cho phần tử <fieldset>.

<button>

tạo một nút button.


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
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.
<a href=protocol://host.domain: port/path/filename>Hypertext</a>
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.
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
shape
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.
<img src=URL alt=description />

Ứ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ủ.
<!DOCTYPE HTML>
<html manifest="demo.appcache">Nội dung tập tin dữ liệu</html>
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).

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:
<a href=”doc2.html”>Tới doc2</a>
- 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:
<a href=“mailto://”>


</a>
- Liên kết đến ứng dụng gọi điện như skype:
<a href=“tel:0987288940”>
0987.288.940
</a>

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:
<a href=”#marker”>Chủ đề</a>
Tại điểm cần liên kết đến ta đặt:
<a name=”marker”>Nội dung</a>

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:
<a href=”doc2.html#marker”>Chủ đề </a>
Tại điểm cần liên kết đến ta đặt ở trang doc2:
<a name=”marker”>Nội dung</a>

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ử <map> 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ử <area> 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
circle
mặc định
rect
poly
hình chữ nhật

coords

hình tròn
hình đa giác

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, Hình chữ nhật
bottom_y
tùy chọn
Đa giác

target
chỉ ra nơi liên kết được mở.
- Phần tử <img>: 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.


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

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.

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

<div style="text-align:center">
<button onclick="playPause()">Chơi/ Dừng</button>
<button onclick="makeBig()">Lớn</button>
<button onclick="makeSmall()">Nhỏ</button>
<button onclick="makeNormal()">Bình thường</button>



<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
</div>
<script>
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; }
</script>

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

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 ĐỐ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.

<object width="400" height="50" data="bookmark.swf"></object>


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
Hình tròn
Hình elip

<svg width="400" height="180">
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

<svg height="100" width="100">
stroke-width="3" fill="red" />
</svg>

<svg height="100" width="200">
style="fill:red" />
style="fill:yellow" />
</svg>

Đường thẳng

Đường gấp khúc

Đa giác

<svg height="210" width="500">
style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

<svg height="200" width="500">
</svg>

<svg id="svgelem" height="200">

</svg>

Đoạn

Văn bản

Nét vẽ

<svg height="210" width="400">

</svg>

<svg height="60" width="200">
I love SVG</text>
</svg>

style="fill:none;stroke:black;stroke-width:3" />

<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>

<svg height="80" width="300">
<g fill="none">



</g>
</svg>

ry="30"
ry="20"

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.

<math xmlns=" /><mrow>
<mi>A</mi><mo>=</mo>
<mfenced open="[" close="]">
<mtable>
<mtr>
<mtd><mi>x</mi></mtd>
<mtd><mi>y</mi></mtd>

</mtr>
<mtr>
<mtd><mi>z</mi></mtd>
<mtd><mi>w</mi></mtd>
</mtr>
</mtable>
</mfenced>
</mrow>
</math>

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ử.

Kịch bản được chạy khi quay lại một tài liệu.

onresize

onmouseover

Kịch bản được chạy khi con trỏ chuột di chuyển
trên phần tử.

Kịch bản được chạy khi thay đổi kích cỡ cửa sổ.

onmouseup

Kich bản được thực hiện khi ta nhả chuột.

onstorage

Kịch bản được chạy khi khu lưu trữ web được cập
nhậ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.

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 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...

Sự kiện form: Sự kiện được kích hoạt khi ta tác động vào một form
HTML
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.

Chỉ định thứ tự tab vào một phần tử.

onsubmit

Kịch bản được chạy khi biểu mẫu được gửi.

THUỘC TÍNH SỰ KIỆN

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.

Chỉ định ngôn ngữ hiển thị nội dung phần tử.

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ử.
xml:lang

tabindex

Kịch bản được chạy khi lịch sử cửa sổ thay đổi.

onredo

onblur

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

onpopstate

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).

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.

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.

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ệ.

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.

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.

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ệ.

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 đó.

onhaschange

Kịch bản được chạy khi thay đổi tài liệu.

ondragover

onsuspend

onload

Kịch bản được chạy khi tài liệu được tải.

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ệ.

onmessage

Kịch bản được kích hoạt khi tin nhắn được kích hoạt.

ondragstart

Kịch bản được chạy khi bắt đầu kéo.

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 đó.

Kịch bản được chạy khi tài liệu offline.

ondrop

Kịch bản được chạy khi một phần tử được thôi kéo.

ontimeupdate

onoffline
ononline

Kịch bản được chạy khi tài liệu trở thành online.

onmousedown

Kịch bản được chạy khi một nút chuột được nhấn.

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).

onpagehide

Kịch bản được chạy khi cửa sổ ẩn.

onmousemove

Kịch bản được chạy khi con trỏ chuột di chuyển.

onvolumechange Kịch bản được chạy khi âm thanh thay đổi (bao
gồm cả việc tắt tiếng).

onpageshow

Kịch bản được chạy khi cửa sổ được viếng thăm.

onmouseout

Kịch bản được chạy khi con trỏ chuột di chuyển ra khỏi
một phần tử

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).

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐẠI CƯƠNG VỀ CSS

p{
float: left; padding:5px;
border: 1px solid #ccc;

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.
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
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.

Nội dung tập tin style.css

}

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

Nội dung tập tin index.html

Định kiểu 1

Định kiểu 2

div { color: red; border:1px solid #ccc; }
Thuộc tính 1 Giá trị 1 Thuộc tính 2

Giá trị 2

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...

3

<html xmlns=" /><head>
<meta charset=utf-8" />
<title>Ví dụ CSS</title>
<link href="style.css" rel="stylesheet" />
<style>
p{
font-size: 14px; font-weight:bold;
font-family: Arial;
}
</style>
</head>
<body>

Nội dung văn bản

</body>
</html>

Đị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;
}

4

2
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.

1
Bộ định kiểu bên trong:
CSS được viết tách ra
trong nội dung thẻ <style>

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.

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.

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 <mediatype> and (<mediafeature>) { 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.
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.

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

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

du

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

Ví dụ minh họa bộ chọn phần tử

<style>
p{
font-size: 14px; font-weight:bold;
font-family: Arial;
}
</style>

Nội dung văn bản

Ví dụ minh họa bộ chọn id

Ví dụ minh họa bộ chọn class

(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)

(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)

<style>
#red{
font-size: 14px; font-weight:bold;
font-family: Arial;
}
</style>

Nội dung văn bản

<style>
.red{
font-size: 14px; font-weight:bold;
font-family: Arial;
}
</style>

Nội dung văn bản

Ví dụ minh họa bộ chọn phần tử
con ở trong phần tử cha
<style>
div p{
font-size: 14px; font-weight:bold;
font-family: Arial;
}
</style>
<div>

Nội dung văn bản

</div>

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ộ chọn> : <tên giả lớp> { Bộ định kiểu CSS }
Bộ chọn

Bộ chọn kết hợp Giả phần tử

- *
á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”

- 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>
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>
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)

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

Đường nét

- 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
Vị trí
trong khoảng 0 đến 255 hệ thập phân, độ mờ nhận
left
right
center justify
giá trị từ 0 đến 1.
top
bottom middle both
none
- 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 Hình ảnh
url(“URL Hình ảnh”)
giá trị từ 0 đến 1. Giá trị HSLA (dạng hsla(độ sắc, độ
Font
chữ,
kiểu
chữ
…
rộng, độ nhạt, độ mờ))

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()


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỊNH DẠNG
KHỐI 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.

top: khoảng cách
phía trên

left: khoảng cách
phía trái

margin: khoảng cách từ viền phần
tử này đến các phần tử bên cạnh

margin-top (không áp dụng cho
phần tử nội tuyến)

top: khoảng cách
phía trên

right: khoảng cách
phía phải
border-top-right-radius

border-top-left-radius
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ử.

margin-left
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-radius: tạo đường
viền cong bo ở 4 góc.

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ị contentbox, 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-top

padding-top

margin
-right

border
-left
padding
-left

Khu vực
viết nội dung

padding
-right

border
-right

padding-bottom

border-bottom

border-bottom-left-radius

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.

border-bottom-right-radius

left: khoảng cách
phía trái
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ị.

Đố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à:

bottom: khoảng
cách phía dưới

margin-bottom (không áp
dụng cho phần tử nội tuyến)

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ị borderbox 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

right: khoảng cách
phía phải
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ó.
bottom: khoảng
cách phía dưới

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ó.


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỊNH DẠNG
VĂN 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ữ

line-height: chiều cao
của dòng văn bản

font-size: chiều cao
của ký 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

letter-spacing:
khoảng cách các
ký tự trong từ

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.

word-spacing:
khoảng cách các
từ trong văn bản

text-align: left;
canh lề trái

text-decoration: đường ngang qua văn bản

vertical-align: canh vị trí ký tự theo chiều dọc

text-align: center;
canh lề giữa
text-align: right;
canh lề phải
text-align: justify;
canh lề đều 2 bên

overline

line-throught

underline

baseline

top
bottom

Văn bản

direction: ltr;
Hướng từ trái qua

Văn bản

text-transform: chuyển đổi chữ hoa và chữ thường

super
sub

text-top
middle

text-bottom

font-style: định dạng kiểu hiển thị văn bản

direction: rtl;
Hướng từ phải qua
lowercase

uppercase

lowercase

normal

italic

oblique


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỊNH DẠNG DANH SÁCH – BẢNG – CHIA CỘT BÁO
Định dạng mục
trong danh sách:




Định dạng bảng:

Mục 1
Mục 2
Mục 3
table-layout

Xác định cách hiển thị dòng, cột, ô trong
bảng
• auto : tự động.

• fixed : cố định.

bordercollapse

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.

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.

ĐỊNH DẠNG NỀN
background

backgroundcolor
backgroundimage
backgroundrepeat

backgroundattachment
backgroundposition
backgroundclip

backgroundorigin

backgroundsize

Định dạng nền:
background: color position size repeat
origin clip attachment image;
Đặt màu nền cho khối.
Ví dụ: background-color:#FFOOFF;
Đặt ảnh nền cho khối.
Ví dụ: background-image:url(“banner.jpg”);
Đặ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.
Đặ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.
Đặt vị trí ảnh nền so với góc trái phần tử.
Ví dụ: background-position: 10px 10px;
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.
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.
Xác định kích cỡ của hình nền ngang và dọc.
Ví dụ: background-size:80px 60px;

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 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


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
BIẾN TRONG JAVASCRIPT

ĐẠI CƯƠNG VỀ 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:

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ủ.
Đị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.

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ể).

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 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.
Kiểu chuỗi

Kiểu số

Kiểu logic

var string = “Mai Đức Thạch”;
var age = 28;
var work = {name: “Lập trình”, year: 2};
Nội dung tập tin index.html

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.

Kiểu đối tượng

<!DOCTYPE html>
<html>
<head><title>Xin chào Javascript></title></head>
<body>
<script>
// In nội dung Xin chào các bạn
document.write("Xin chào các bạn.");
</script>
<script type="text/javascript" src="/scripts.js"></script>
</body>
</html>

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.

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.

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;

Nội dung tập tin scripts.js
alert(“Mai Đức Thạch pro”);

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

var male = true;
var lang = [ “PHP”, “.Net”, “Java”];
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ị (--)

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
(<=).

Đối với chuỗi, toán tử (+) dùng để ghép 2
chuỗi vào cạnh nhau.
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 (<< hoặc >>)

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”


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
Đ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.
Vòng lặp while(điều kiện){…} cho phép Vòng lặp do{…}while(điều kiện); cho
thực hiện lặp đi lặp lại một khối mã lệnh phép thực hiện trước lặp đi lặp lại một
đến khi điều nhận giá trị false.
khối mã lệnh đến khi điều nhận giá trị
false thì dừng.

Vòng lặp for(;;){} cho phép thiết lập giá trị Vòng lặp for…in… cho phép duyệt từng
qua mỗi lần thực hiện lặp đi lặp lại một phần tử trong một đối tượng hay mảng.
khối mã lệnh, và nó chỉ dừng lại khi điều
kiện nhận giá trị false.

var a = 1, b = 0;
white(a<=10){
b += a; a++;
}
alert(“Kết quả: ”+b);

var b = 0;
for(var a=1; a<=10; a++){
b += a;
}
alert(“Kết quả: ”+b);

var a = 1, b = 0;
do{

b += a; a++;
}
white(a<=10);
alert(“Kết quả: ”+b);

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);

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.

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.

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.

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.

function Tinhtong(num){
var sum = 0;

for(var x = 0; x <=num; x++){ sum += x; }
return sum;
}
alert(Tinhtong(100));

var func = new Function("x", "y", "return x*y;");
function secondFunction(x, y){
return func(x,y);
}
alert(secondFunction(10, 20));

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 (userdefined 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());


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỐI TƯỢNG JAVASCRIPT
ĐỐ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.

ĐỐ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.<attribute | method>;
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.

length
charAt()
fromCharCode()
match()
slice()
substring()

charCodeAt()
indexOf()
replace()
split()
toLowerCase()

concat()
lastIndexOf()
search()
substr()
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
NaN

MIN_VALUE

NEGATIVE_INFINITY

POSITIVE_INFINITY

toExponential()
toString()

toFixed()

toPrecision()

ĐỐ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()
forEach()
lastIndexOf()

push()
reverse()
some()
splice()

every()
indexOf()
map()
recude()
shirt()
toSource()
toString()

filter()
join()
pop()
recudeRight()
slice()
sort()
unshift()

E
LOG2E
SQRT1_2

LN2
LOG10E
SQRT2

LN10

PI

abs()
atan()
cos()
log()
pow()
sin()
toSource()

acos()
atan2()
exp()
max()
random()
sqrt()

asin()
ceil()
floor()
min()
round()
tan()

ĐỐ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()

Một số thuộc tính, phương thức
tổng quát
Ininity

NaN

underfined

decodeURI()
encodeURI()
isFinite()
parseFloat()
unescape()

decodeURIComponent()
escape()
encodeURIComponent()
evel()
isNaN()
Number()
parseInt()

String()

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
\n
Tìm một ký tự bắt đầu dòng
trừ ký tự bắt đầu một dòng
mới.
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
\B
Tìm một ký tự không phải ở
thúc một văn bản
nơi bắt đầu hoặc kết thúc
một văn bản.
Tìm một nhóm ký tự định dạng.

\f
\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
\xdd
Tìm một ký tự theo định
nghĩa bát phân.
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
n{X}
Đánh giá bất kỳ chuỗi nào
chứa ít nhất một ký tự n.
mà ký tự n xuất hiện X lần.
n*
Đánh giá bất kỳ chuỗi nào
n{X,Y}
Đánh giá bất kỳ chuỗi nào
không có hoặc có nhiều
mà ký tự n xuất hiện từ X

hơn sự xuất hiện của n.
đến Y lần.
n?
Đánh giá bất kỳ chuỗi nào
n{Y,}
Đánh giá bất kỳ chuỗi nào
không chứa hoặc một lần
mà ký tự n xuất hiện ít nhất
xuất hiện n.
Y lần.
n$
Đánh giá bất kỳ chuỗi nào
?=n
Đánh giá bất kỳ chuỗi nào
với n là ký tự kết thúc của
được theo sau bởi chuỗi n.
nó.
^n
Đánh giá bất kỳ chuỗi nào
?!n
Đánh giá bất kỳ chuỗi nào
với n là ký tự bắt đầu của
được theo sau không phải
nó.
chuỗi n.
Danh sách thuộc tính và phương thức:
exec()
test()

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỐ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.<attribute | method>
document
history
closed
name
status
innerHeight
outerWidth
screenLeft
screenX

navigator
location
parent
length
self
innerWidth
pageXOffset
screenTop
screenY

screen

opener
frames
defaultStatus
top
outerHeight
pageYOffset

alert()
focus()
close()
setInterval()
clearTimeout()
resizeBy()
scrollTo()

confirm()
blur()
print()
setTimeout()
moveBy()
resizeTo()

prompt()
open()
createPopup()
clearInterval()
moveTo()
scrollBy()

Đố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
cookieEnabled
userAgent

appName
onLine

javaEnabled()

taintEnabled()

appVersion
platform

ĐỐ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
availWidth
width

colorDepth
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()

Đố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()

THAO TÁC VỚI COOKIE

ĐỐI TƯỢNG navigator

availHeight
height

ĐỐI TƯỢNG location

forward()

go()

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; ivar 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.
<div id="result"></div>
<script>
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 ();
</script>

- Đố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.
<div id="result"></div>
<script>
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();
</script>

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”);}
}


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐỊ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);
Hủy bỏ việc thực hiện phương thức
watchPosition đã gọi.

clearWatch()

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 đồ:
<!DOCTYPE html>
<html lang="en" xmlns=" /><head>
<meta charset="utf-8" />
<title>Định vị</title>
</head>

<body>

Click nút để lấy vị trí của bạn:

<button onclick="LayVitri()">Định vị</button>
<div id="mapholder"></div>
src=" /><script>

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;
}
}
</script>
</body>
</html>


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

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:
<html>
<body>
<button type=”button” onclick=”taitrang()”>Tải trang</button>
<div id=”noidung”>Nội dung trang được tải khi bấn Button</div>
</body>
</html>
Bây giờ, ta tạo thêm một thẻ <script> trong phần <head> để tạo một
hàm kịch bản taitrang()
<head>
<script type=”text/javascript”>
function taitrang()
{
//Đoạn mã AJAX được trình bày dưới đây.

}
</head>

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
POST đơn giản chỉ cần đường
Ví dụ:
dẫn. Đồng thời chúng ta có thể
xmlhttp.open("GET","demo_get2.asp thêm một tiêu đề HTTP với
?fname=Henry&lname=Ford",true);
setRequestHeader(tiêu_đề
xmlhttp.send();
,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("Contenttype","application/x-www-formurlencoded");
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ụ:

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.onreadystatechange=function(){ xmlhttp.send();
document.getElementById("myDiv")
if (xmlhttp.readyState==4 &&
.innerHTML=xmlhttp.responseText;
xmlhttp.status==200) {
document.getElementById("myDiv")
.innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

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ụ:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<div id="myDiv">

Đặt nội dung AJAX vào đây.

</div>
<button type="button" onclick="loadXMLDoc()">
Thay đổi nội dung
</button>
</body>
</html>


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
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

status

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.

200: “OK”.

404: không tìm thấy trang.

Ví dụ:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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();
}
</script>
</head>
<body>
<div id="myDiv">

Đặt nội dung AJAX vào đây

</div>
<button type="button" onclick="loadXMLDoc()">Thay đổi</button>
</body>
</html>
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ụ:
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
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;

}
});
}
</script>
</head>

<body>
<div id="myDiv">

Đặt nội dung JS vào đây

</div>
<button type="button" onclick="myFunction()">Thay đổi</button>
</body>
</html>

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ủ

<div id="result"></div>
<script>
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 ";

}
</script>
Trong đó nội dung tập tin demosse.php là:
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

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: <output id="result"></output>

<button onclick="startWorker()">Bắt đầu</button>
<button onclick="stopWorker()">Kết thúc</button>
<script>
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; }
</script>
Trong đó nội dung tập tin demoworkers.js là:
var i = 0;
function timedCount() {
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)

ĐẠ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:
<script type=”text/javascript” src=” />
Vận dụng jQuery:

$(<bộ chọn>)..…;
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 $.
<script type=”text/javascript”> jQuery.noConflict(); </script>

BỘ CHỌN JQUERY

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)

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

: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")

ances descen

Chọn tất cả các phần tử descen là con cháu của
ances

$(“ul li”)

:eq(index)

$("ul li:eq(3)")

parent > child

Chọn tất cả phần tử child là con trực tiếp của parent

$(“div > div”)

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

Chọn tất cả các phần tử next là phần tử kế
tiếp ngay sau prev

$(“p + div”)

: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)")

prev + next

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 ”)

: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)")

prev ~ siblings

: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

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’]”)

Lọc các phần tử thỏa mãn tất cả các
thuộc tính

$(“[href*=’hoa’]
[href=’mai.html’]”)

[attr1][attr2][attr3]

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’)”)


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
: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)

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.

:hidden

Lọc các phần tử có trạng thái đang ẩn

$(“p:hidden”)

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.

:visible

Lọc các phần tử ở trạng thái đang hiển thị

$(“table:visible”)

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.

:header

Chọn các phần tử tiêu đề (từ h1 đến h6)

$(“:header”)

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.

:animated

Chọn các phần tử động

$(“ animated”)
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.

$("div")
.children(".selected")
.addClass("blue");

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.

$('p').siblings('div');

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.

PHƯƠNG THỨC DUYỆT DOM
.children(selector)

.siblings(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.
Đượ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

.contents()

SỰ KIỆN BIỂU MẪU

.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');

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.

.next(selector)

Được sử dụng để lấy phần tử ở ngay sau mỗi
phần tử được chọn

$('h2').next();

bind()

Thêm một hoặc nhiều sự kiện xử lý cho phần tử phù hợp.

.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');

unbind()

Hủy bỏ một sự kiện xử lý được thêm từ phần tử được chọn.

live()

.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();

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()

.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();

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()

.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();

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.

Ngăn chặn việc thực hiện các hành động mặc định của sự kiện.

THIẾT LẬP SỰ KIỆN

.parents(e)

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.

sự_kiện.preventDefault()

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.

Trả về kết quả có hay không việc áp dụng hàm preventDefault() cho 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.

sự_kiện.
isDefaultPrevented ()

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.

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.

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.

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.

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.

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.

mouseenter()

Gọi một hay hai hàm khi sự kiện chuột vào phần tử được chọn.

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.

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.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.

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

CÁC THUỘC TÍNH

PHƯƠNG THỨC HIỆU ỨNG TRONG JQUERY


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
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]);

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]);

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 (backgroundcolor: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.

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.

Ví dụ:

$('h1').show(300).delay(1000).hide(300);

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);

HIỆU ỨNG SLIDE

HIỆU ỨNG ĐỘNG


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
Ví dụ:
val()

$(‘p’).removeAttr(‘style’);

Đặt hoặc trả về giá trị của phần tử được chọn (chủ yếu từ biểu mẫu).
- $(bộ_chọn).val(): chủ yếu được sử dụng để lấy giá trị của các phần tử
form. Trường hợp phần tử là <select multiple="multiple">, phương thức trả về
một mảng chứa các option được chọn.
Ví dụ:
$(‘:text’).val();
- $(bộ_chọn).val(giá_trị): value có thể là một chuỗi văn bản, hoặc một mảng
chuỗi tương ứng với value cho tất cả các phần tử được chọn như
selected/checked.
Ví dụ:
$(‘:text’).val(‘Xin chào các bạn’);

$(bộ_chọn).text();
Ví dụ:
$("p").text();
- Toàn bộ nội dung bên trong của tất cả phần tử khớp với bộ chọn selector bị
ghi đè bởi nội dung mới content. Chú ý các kí tự đặc biệt sẽ được mã
hóa(encode)
$(bộ_chọn).text(nội_dung);
Ví dụ:

$("p").text("Hello world!");
BAO BỌC PHẦN TỬ NÀY TRONG PHẦN TỬ KHÁC
wrap()

Bao bọc các phần tử HTML xác định quanh mỗi phần tử được chọn.
$(bộ_chọn).wrap(phần_tử_dùng_để_bao_bọc);
Ví dụ:
$("p").wrap("<div></div>");

Chèn nội dung vào sau phần tử được chọn.
$('target').after('content');
$('content').insertAfter('target');
Ví dụ:
$('p').after('<A href="#">Lên đầu trang </A>');
=
$('<A href="#">Lên đầu trang</A>').insertAfter('p');

wrapInner()

Bao bọc các phần tử HTML xác định quanh tất cả phần tử được chọn.
$(bộ_chọn).wrapInner(phần_tử_dùng_để_bao_bọc);
Ví dụ:
$("p").wrapInner("<div></div>");

wrapAll()

Bao bọc các phần tử HTML xác định quanh nội dung của mỗi phần tử được chọn.

Chèn nội dung vào trước phần tử được chọn.
$('target').before('content');

$('content').insertBefore('target');
Ví dụ:
$('p').before('<A href="#">Lên đầu trang </A>');
=
$('<A href="#">Lên đầu trang</A>').insertBefore('p');

unwrap()

Loại bỏ phần tử cha của phần tử được chọn.
Ví dụ:
$("p").unwrap();

remove()

Sử dụng khi muốn xóa vĩnh viễn các phần tử được chọn (gồm cả các phần tử
con bên trong phần tử được chọn). Phương thức trả về nhóm phần tử được
chọn bị xóa.
$(bộ_chọn).remove();

detach()

Dùng để thực hiện xóa các phần tử được chọn nhưng vẫn giữ lại bản sao
(gồm cả dữ liệu và sự kiện) của các phần tử bị xóa để sau này có thể chèn
chúng trở lại.
$(bộ_chọn).detach();

empty()

Xóa toàn bộ nội dung(gồm text và các phần tử con) bên trong các phần tử
được chọn.

$(bộ_chọn).empty();

clone()

Lấy một bản copy của phần tử được chọn.
Ví dụ:
$("p").clone().appendTo("body");

THAY ĐỔI NỘI DUNG
after()
insertAfter()

before()
insertBefore()

append()
appendTo()

prepend()
prependTo()

Chèn một nội dung vào cuối (nhưng vẫn nằm bên trong) của phần tử được
chọn.
$('target').append('content');
$('content').appendTo('target');
Ví dụ:
$('p').append('<A href="#">Lên đầu trang </A>');
=
$('<A href="#">Lên đầu trang</A>').appendTo('p');
Chèn một nội dung vào đầu (nhưng vẫn nằm bên trong) của phần tử được

chọn.
$('target').prepend('content');
$('content').prependTo('target');
Ví dụ:
$('p').prepend('<A href="#">Lên đầu trang </A>');
=
$('<A href="#">Lên đầu trang</A>').prependTo('p');

replaceAll()
replaceWith()

Thay đổi nội dung phần tử được chọn bằng nội dung mới.
$('target').replaceWith('content');
$('content').replaceAll('target');
Ví dụ:
$(‘<b>Hello world!</b>’).replaceAll(‘p’);
=
$(‘p’).replaceWith(‘<b>Hello world!</b>’);

html()

Lấy hoặc thay đổi nội dung bên trong của các phần tử được chọn.
- Trả về nội dung bên trong phần tử đầu tiên khớp với bộ chọn
$(bộ_chọn).html();
Ví dụ:
$("p").html();
- Toàn bộ nội dung bên trong của tất cả phần tử khớp với bộ chọn selector bị
ghi đè bởi nội dung mới content. Content có thể chứa các các thẻ HTML
$(bộ_chọn).html(nội_dung);
Ví dụ:

$("p").html("Hello <b>world</b>!");

text()

Lấy hoặc thay đổi nội dung bên trong của các phần tử được chọn.
- Trả về nội dung văn bản được ghép(combine) từ các nội dung của tất cả
phần tử khớp với bộ chọn selector. (các đánh dấu HTML được bỏ đi)

Ví dụ:

$(bộ_chọn).wrapAll(phần_tử_dùng_để_bao_bọc);
$("p").wrapAll("<div></div>");

THAO TÁC VỚI PHẦN TỬ ĐƯỢC CHỌN

css()

height()
width()

PHƯƠNG THỨC CSS CỦA JQUERY
Đặt hoặc trả về một hoặc nhiều style 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).css(thuộc_tính);
Ví dụ:
$(‘p’).css(‘background’);
- Để thêm một thuộc tính và giá trị của CSS, ta dùng:
$(bộ_chọn).css(thuộc_tính, giá_trị);
Ví dụ:
$(‘p’).css(‘background’,’red’);

- Để thêm nhiều thuộc tính và giá trị CSS, ta dùng:
$(bộ_chọn).css(attr1:value1,attr2:value2...);
Ví dụ:
$(‘p’).css(‘font-size’:’10px’,’color’:’red’);
Đặt hoặc lấy giá trị chiều cao hoặc chiều rộng phần tử được chọn.
Chiều cao phần tử
Chiều rộng phần tử
- Trả về chiều cao của phần tử
Ví dụ: $(‘div’).height();
- Đặt chiều cao của phần tử
Ví dụ: $(‘div’).height(‘300px’);

position()

- Trả về chiều rộng của phần tử
Ví dụ: $(‘div’).width();
- Đặt chiều rộng của phần tử
Ví dụ: $(‘div’).width(‘500px’);

Trả về một đối tượng có chứa thông tin về vị trí của phần tử H1 đầu tiên so


Mai Đức Thạch – 0165.859.7998 – Hải Nam, Hải Hậu, Nam Định - (nadipage.com - webnadi.com - vneverestweb.com)
phần tử cha của nó.
Ví dụ:

- url: là một chuỗi URL mà yêu cầu (request) sẽ gửi đến đó.
- data: là dữ liệu sẽ gửi tới server. Dữ liệu được biểu diễn theo từng cặp
key/value
- success(data, textStatus, jqXHR): là một hàm callback được thực thi khi dữ

liệu được tải thành công
- dataType: là kiểu dữ liệu được trả về (response) cho hàm callback như: xml,
html, text, script, json, hoặc jonsp

$('h1').position();

offset()

Đặt hoặc trả về vị trí (so với tài liệu) của phần tử được chọn.

offsetParent()

Đặt hoặc trả về vị trí (so với phần tử cha) của phần tử được chọn.

scrollLeft()

Đặt hoặc trả về vị trí ngang của thanh cuộn của phần tử được chọn.

scrollTop()

Đặt hoặc trả về vị trí dọc của thanh cuộn của phần tử được chọn.
$.ajax()

Tất cả các phương thức ajax shorthand giới thiệu trước đây đều có bên
trong phương thức ajax(). Sử dụng ajax(), nó cho phép kiểm soát các cuộc
gọi ajax nhiều hơn như: Cho phép sử dụng phương pháp GET hay POST; Xử
lý lỗi xảy ra khi gọi; Làm việc với nhiều dạng dữ liệu khác nhau. Phương thức
trả về một đối tượng XMLHttpRequest.
$.ajax( url, [settings] )
$.ajax( [settings] )

Trong đó:
- url: chỉ ra địa chỉ của trang nguồn cần lấy dữ liệu
- settings: là một tập các cặp key/value chứa các cấu hình Ajax Request
(phương pháp gửi, dữ liệu gửi đi, callback,…). Tất cả các setting này là tùy
chọn.
Bảng danh sách các thiết lập (Setting) cho phương thức ajax()
Thiết lập toàn cục cho Ajax
- Bạn có thể đưa ra một số thiết lập(setting) trong mỗi lần thực hiện một cuộc
gọi Ajax, tuy nhiên nó không được thuận tiện:
 Dễ bị lỗi
 Khó bảo quản
- jQuery cung cấp phương thức ajaxSetup() cho phép bạn đưa ra các thiết lập
toàn cục sử dụng chung cho tất cả các cuộc gọi ajax.
- Tuy nhiên, bạn vẫn có thể ghi đè(override) các thiết lập toàn cục khi sử dụng
phương thức ajax() để thực hiện cuộc gọi.
Quản lý lỗi
- Có thể gặp một số lỗi khi làm việc với Ajax như do mất kết nối internet, tải
một tài nguyên không có trên server…
- Phương thức ajax() có tham số error, là nơi bạn chỉ ra một hàm error
callback. Hàm này được dùng để xử lý lỗi khi có lỗi xảy ra.
- Ngoài ra, jQuery còn cung cấp phương thức ajaxError()cho chúng ta khả
năng cấu hình xử lý lỗi toàn cục thay vì cho mỗi cuộc gọi.
- Các sự kiện toàn cục được gắn với một phần tử DOM, là nơi mà bạn sẽ
hiển thị một thông báo lỗi cho người dùng.
$('#ajax_error').ajaxError(function(event,request,settings){
$(this).html("<b>Error when requesting " + settings.url + "</b>");
});

data()

Gắn hoặc nhận dữ liệu cho phần tử được chọn.

each(hàm)

Chạy từng hàm cho mỗi phần tử xuất hiện trong bộ chọn.

index()

Trả về vị trí của phần tử thỏa mãn bộ chọn trong một tập hợp các phần tử
được chọn.

removeData()

Loại bỏ phần tử trước đây lưu trữ dữ liệu

size()

Trả về số lần phần tử DOM xuất hiện trong bộ chọn được chọn.

toArray()

Lấy tất cả các phần tử DOM trong bộ chọn được chọn như là một mảng.

PHƯƠNG THỨC AJAX TRONG JQUERY
AJAX viết tắt của Asynchronous JavaScript and XML (JavaScript và XML không đồng bộ), là một kỹ
thuật lập trình gồm XML, HTML, CSS và Javascript giúp cho việc tạo các ứng dụng web có tính tương
tác nhiều hơn, tốt hơn và nhanh hơn. Sử dụng AJAX, nhà phát triển web đem đến cho người lướt web có
cảm giác giống như sử dụng một ứng dụng desktop.
* Chỉ refresh một phần của trang.
* Người dùng sử dụng ứng dụng web không phải đợi một trang web mới được tải về

jQuery cung cấp một tập các phương thức viết tắt(shorthand), thuận tiện(convenient) cho việc phát
triển ứng dụng web với AJAX mà không cần lo lắng về sự thiếu nhất quán của trình duyệt web. Với
jQuery AJAX, bạn có thể yêu cầu(request) dữ liệu TXT, HTML, XML hay JSON từ server bằng hai
phương pháp Get hoặc Post của HTTP . Và bạn có thể tải dữ liệu từ xa, trực tiếp vào phần tử HTML
được chọn trong trang web của bạn!
load()

Cho phép tải nội dung HTML trả về từ server vào phần tử được chọn
$(selector).load(url, [data], [callback])
Trong đó:
- url: là một chuỗi URL mà yêu cầu (request) được gửi đến. (Nó có thể là một
trang ASP, JSP, hoặc PHP)
- data: là một đối tượng mà các thuộc tính của nó được chia thành các cặp
key/value như là các tham số được gắn cùng với yêu cầu để gửi lên server.
- callback: là một hàm mà jQuery sẽ gọi đến khi quá trình Ajax hoàn thành.
Hàm này gồm: function(responseText, textStatus, xhr)
+ responseText: Chứa dữ liệu kết quả từ yêu cầu(request).
+ textStatus: chứa trạng thái của yêu cầu gồm: "success", "notmodified",
"error", "timeout", or "parsererror".
+ xhr: chứa đối tượng XMLHttpRequest

serialize()
serializeArray()

Là hai hàm tiện ích trợ giúp cho việc gửi (submit) dữ liệu của form tới server.
- Hàm serialize() tạo và trả về một chuỗi theo dạng query string
chứa tất cả các dữ liệu được nhập trên các phần tử của form
Tên_phần_tử_1=Giá_trị_1&Tên_phần_tử_2=Giá_trị_2& …
- Hàm serializeArray() tạo và trả về một mảng các đối tượng JavaScript (nó
tương tự như một chuỗi JSON).

$. get()

Phương thức sử dụng một GET HTTP request để tải dữ liệu từ server và trả
về một đối tượng XMLHttpRequest.
$.get( url, [data],[success(data,textStatus,jqXHR)], [dataType] );
Trong đó:
- url: là một chuỗi URL mà yêu cầu (request) sẽ gửi đến đó.
- data: là dữ liệu sẽ gửi tới server. Dữ liệu được biểu diễn theo từng cặp
key/value
- success(data, textStatus, jqXHR): là một hàm callback được thực thi khi dữ
liệu được tải thành công
- dataType: là kiểu dữ liệu được trả về (response) cho hàm callback như: xml,
html, text, script, json, hoặc jonsp.

$. post()

Phương thức sử dụng một POST HTTP request để tải dữ liệu từ server và trả
về một đối tượng XMLHttpRequest.
$.post( url, [data],[success(data,textStatus,jqXHR)], [dataType] );
Trong đó:

NHỮNG PHƯƠNG THỨC KHÁC