Chuong3

Chương 3: Lập trình phía
máy khách
1
Nội dung
 Giới thiệu và sử dụng HTML
 Giới thiệu và sử dụng CSS
 Giới thiệu và sử dụng JavaScript
 HTML nâng cao
 CSS nâng cao
 Web Media
 Lập trình Responsive Web Design
 Sử dụng TWITTER BOOTSTRAP
 Sử dụng Jquery
2
Giới thiệu và sử dụng HTML
 Ngôn ngữ đánh dấu siêu văn bản.
 Được sử dụng để tạo và cấu trúc các phần trong trang web.
 Các thẻ đánh dấu cung cấp thông tin về cấu trúc nội dung trang.
 Một tài liệu HTML bao gồm nhiều thẻ.
 Tài liệu HTML phải có phần mở rộng tệp .htm hoặc .html
 Trình soạn thảo (Notepad, Notepad++, Sublime Text,...)
 Trình soạn thảo WYSIWYG (Microsoft Visual Studio, Adobe
Dreamweaver,...)
3
 HTML5
 Chạy trên mọi trình duyệt.
 Tích hợp các chức năng hỗ trợ video, âm thanh.
 Sử dụng Javascript Geolocation API với mục đích theo dõi vị trí của tất cả người
truy cập website.
 Có sự hỗ trợ Web Socket, do đó có thể giao tiếp song song giữa Server và Client.
 HTML5 là phiên bản mới, do đó có nhiều thẻ mới và một số thẻ cũng đã bỏ đi.
4
 Cú pháp
 Thẻ: mở và đóng
 Phần nhỏ nhất trong một trang HTML
 Thuộc tính của thẻ (kích thước, màu sắc,...)
5
 Cấu trúc tài liệu HTML
6
 Màu sắc: hiển thị được tạo từ 3 màu chính
 Đỏ (Red)
 Xanh lá cây (Green)
 Xanh biển (Blue)
 Mỗi màu có 256 giá trị, được biểu diễn từ 0 – FF (0 - 255)
 Giá trị RGB: #RRGGBB, tên tiếng Anh của màu.
 Ví dụ
 Đỏ #FF0000 RED
 Xanh lá cây #00FF00 GREEN
 Xanh nước biển #0000FF BLUE
7
 Một số thẻ HTML cơ bản
 Thẻ định dạng mức khối (H1 đến H6, P, LI,..).
 Thẻ định dạng mức văn bản (EM, I, B, U,..).
 Thẻ phân đoạn vă bản (BR, P,...)
8
 Tạo đề mục
<h1 align="giá-trị"> tiêu đề cấp 1 </h1>
9
 Định dạng kiểu chữ
<b> in đậm </b> <strong> in đậm </strong>
<i> in nghiêng </i> <em> in nghiêng </em>
<u> nội dung được gạch dưới </u>
<s> bị gạch ngang </s> <strike> bị gạch ngang </strike>
<sup> định dạng chỉ số trên </sup>
<sub> định dạng chỉ số dưới </sub>
10
 Định dạng font chữ
<font face="tên-font" size="kích-thước" color="màu-chữ"> nội dung </font>
<font face="arial"> Đây là font arial </font>

<font face="verdana", "arial">
<font size=4> Kích thước là 4 </font>
<font size=+2> Tăng kích thước thêm 2 đơn vị </font>
<font color="#FF0000"> Khối VB màu đỏ </font>
<font color="green"> Khối VB màu xanh lá </font>
11
 Đường kẻ ngang – Thẻ <hr>
 align: canh chỉnh vị trí đường kẻ (left, right, center)
 width: xác định chiều rộng của đường kẻ (VD: 200px, 30
 size: chỉ định bề dày của đường kẻ (số điểm px).
 noshade: không có bóng mờ.
 Ví dụ:
<hr>
<hr size="15" align="left" width="100" >
<hr noshade size="5" align="center" width="50%" >
12
 Trích dẫn: dùng thẻ <blockquote> và thẻ <cite>
 <blockquote> nội dung trích dẫn </blockquote>
 <cite> nội dung trích dẫn </cite>
Ví dụ:
<blockquote> ASP.NET is a new technology of MS </blockquote>
<cite>
Công cha như núi Thái Sơn <br>
Nghĩa mẹ như nước trong nguồn chảy ra <br>
Một lòng thờ mẹ kính cha <br>
Cho tròn chữ hiếu mới là đạo con <br> </cite>
13
 Văn bản đã định dạng trước: sử dụng thẻ <pre>
 Ví dụ:
<pre>
Quê hương là gì hở mẹ
Mà cô giáo dạy phải yêu
Quê hương là gì hở mẹ
Ai đi xa cũng nhớ nhiều
Quê hương là chùm khế ngọt
Cho con trèo hái mỗi ngày
</pre>
14
 Thẻ <div> và <span>
 Không mang một ý nghĩa cụ thể nào cả, mà mục đích chính của chúng là phân chia
nội dung trang Web thành những khối thông tin logic và kết hợp với định dạng
CSS
 Ví dụ:
<div align="left/right/center" style="giá-trị" class="giá-trị" id="giá-trị" > nội dung trong khối div
</div>
<span style="giá-trị" class="giá-trị" id="giá-trị" > nội dung trong khối span </ span >
15
 Hình ảnh: thẻ <img>
 <img src="đường-dẫn-đến-file-ảnh" alt="văn-bản" width="trị-số" height="trị-số"
border="trị-số" align="left/right/center" />
 Ví dụ:
<img src="../images/logo.gif" alt="logo trường DHKT" width="107" height="104" />
16
 Âm thanh: thẻ <bgsound>
<bgsound src="file-âm-thanh" loop=value(-1,n) />
 Ví dụ: src Xác định đường dẫn đến tập tin âm thanh mà bạn muốn phát
<bgsound src="../sound/song1.mp3" loop=-1 /> controls Xác định việc "trình phát nhạc sẽ được hiển thị trên màn hình"
 Thẻ <audio> autopla Thiết lập hành động: "sau khi trang web được tải xong, trình
y phát nhạc sẽ tự động chơi bản nhạc"
<audio controls>
Thiết lập hành động "bản nhạc sẽ tự động được phát lặp lại sau
<source src="../file/sound.mp3"> loop
mỗi lần kết thúc"
</audio> Xác định việc trình phát nhạc sẽ mặc định được thiết lập ở chế
muted
độ "tắt tiếng"
Xác định việc tập tin âm thanh có được tải cùng với lúc tải trang
preload
hay không
17
 Đối tượng di chuyển: thẻ <marquee>
<marquee> chuỗi kí tự hay đối tượng </marquee>
 direction=up/down/left/right: điều khiển hướng chạy.
 behavior=scroll/slide/alternate: kiểu chạy
 bgcolor=giá-trị-màu: màu nền cho chữ/đối tượng
 Ví dụ:
<marquee direction="right" behavior="slide" ><img
src=../images/flower.gifwidth="107" height="104"> </marquee>
18
 Chú thích: Trình duyệt sẽ bỏ qua, không hiển thị phần nội dung chú thích.

19
Ký tự Mã Ví dụ
If A > B <br/> Then <br/> A = A + 1
Lớn hơn (>) > <p> The above statement used special chararacters </p>
If A < B <br/> Then <br/> A = A + 1

Nhỏ hơn (<) <
<p> The above statement used special chararacters </p>
Trích dẫn(") " <body> " To be or not to be? " That is the question </body>
Ký tự & & <p> William & Graham went to the fair </p>
20
 Siêu liên kết.
 Kết nối của tài liệu hiện tại với một tài liệu HTML, hoặc file khác (đồ hoạ, âm
thanh, …), hoặc đến một vị trí khác trong cùng tài liệu.
 Khi người dùng nhấp chuột vào siêu liên kết, người đó được dẫn đến một tài liệu
khác, thông qua URL đã chỉ định trong liên kết.
 Liên kết cục bộ: là liên kết đến một vùng trong cùng tài liệu hoặc liên kết các trang
trong cùng một website.
 Liên kết ngoài: là liên kết đến các trang hay vùng thuộc một website khác.
21
 URL tuyệt đối – là địa chỉ Internet đầy đủ của một tài liệu.
Ví dụ : http://www.ueh.edu.vn/main.html
 URL tương đối - chỉ cung cấp một số thông tin về địa chỉ tài liệu. Trình duyệt lấy
các thông tin còn lại dựa vào sự khác biệt tương đối của trang hiện tại với trang
được liên kết.
dhkt\main.html
dhkt\tuyensinh\VB2.htm
22
<a href="url" name="name" title=title target=_blank/_self > văn bản liên kết </a>
 href: địa chỉ URL của tài liệu được liên kết.
 name: đặt tên cho vị trí trong trang Web (bookmark).
 title: văn bản hiển thị khi rà chuột vào siêu liên kết.
 target: trang Web liên kết được hiển thị trong cửa sổ mới (_blank), hay trong cửa sổ
hiện tại (_self), hoặc trong một frame (tên frame).
 Ví dụ
<a href="main.htm" target="_blank" title="chuyển đến trang chủ"> Trang chủ </a>
23
 Liên kết đến một vị trí trong cùng trang.
<a href="#tên_bookmark"> nội dung </a>
 Dấu # trước tên bookmark là kí hiệu thông báo cho trình duyệt rằng đây là liên kết
đến một vị trí trong tài liệu. Nếu phía trước dấu # không có địa chỉ URL đến tài liệu
nào cả, thì trình duyệt hiểu rằng liên kết này nằm trong cùng tài liệu.
 Ví dụ:
<html><head></head>
<body><a name="top"> Bắt đầu trang web </a>
<p>Đây là trang web có liên kết đến một vị trí trong tài liệu. Thông qua thuộc tính name của thẻ a, vị trí này
đã được đặt tên là top. Sau đây là phần khai liên kết đến vị trí top. Khi ta click vào liên kết này, trang web
trở lại hiển thị phần đầu trang. </p>
<a href="#top">Trở về đầu trang</a> </body></html>
24
 Liên kết đến một vị trí trong trang web khác.
<a href="URL-của-trang-web-liênkết#tên_bookmark"> nội dung </a>
 Lưu ý là trong trường hợp này, phía trước dấu # phải có địa chỉ URL của trang tài
liệu được liên kết.
25
 Liên kết đến một địa chỉ mail.
<a href="mailto:địa_chỉ_mail"> … </a>
 Khi người dùng click chuột vào liên kết, trình soạn thảo thư trên máy sẽ được kích
hoạt.
 Ví dụ
<html>
<head> <title> using htm links</title> </head>
<body>
<p> Đây là trang web trường DHKT TP.HCM</p>
<a href="mailto:uehadmin@hcm.edu.vn"> Liên hệ với người quản trị trang web ĐHKT </a>
</body></html>
26
 Bản đồ ảnh.
 Một ảnh được phân thành nhiều vùng riêng biệt, mỗi vùng liên kết đến một trang
tài liệu xác định.
 Khai báo bản đồ ảnh bằng thẻ <map>.
 Các vùng trên bản đồ được định nghĩa bằng thẻ <area>
<map name="tên-bản-đồ-ảnh">
<area href="url-liên-kết" alt="văn-bản" shape="hình-dạng-vùng" coords="các-
tọa-độ- vùng">
..... </map>
* Shape: rect (x-trái, y-trên, x-phải, y-dưới), circle (x, y, bán kính), poly(x 1,y1,x2,y2,...)
27
 Bản đồ ảnh.
 Chèn ảnh vào trang web và khai báo sử dụng bản đồ ảnh đã định nghĩa sẵn ở bước trên bằng thuộc tính
usemap.
<img src="url-file-ảnh" usemap="#tên-bản-đồ-ảnh" />
 Ví dụ
<html> <head> <title>image map</title></head>

<body>
<map name="ghmap">
<area href="contacts.html" alt="contacts" title="contacts" shape=rect coords="6,116,97,184">
<area href="products.html" alt="products" title="products" shape=circle coords="251,143,47">
<area href="new.html" alt="new!" title="new!" shape=poly coords="150,217,190,257,150,297,110,257"></map>
<img src="testmap.gif" alt="Map of GH site" border=0 width=300 height=300 usemap="#ghmap"> <br>
</body> </html>
28
 Danh sách không có thứ tự (unorder list) <html> <body>
 Bắt đầu bởi một kí hiệu đánh dấu (bullet) <h1>An Unordered List:</h1>
<ul type="square">
<ul type="kiểu"> <li>Coffee</li>
<li> Mục 1 </li> <li>Tea</li>
<li> Mục 2 </li> <li>Milk</li>
</ul>
……
</body>
</ul> </html>
 <ul> : thẻ tạo danh sách không thứ tự.
 <li> : tạo một phần tử của danh sách, có thể không dùng thẻ đóng </li>.
 Type: disc (mặc định), circle, square
29
 Danh sách có thứ tự (order list) <html> <body>
 Bắt đầu bởi một trị số cụ thể. <h1>An Ordered List:</h1>
<ol type=i>
<ol type="kiểu"> <li>Coffee</li>
<li> Mục 1 </li> <li>Tea</li>
<li> Mục 2 </li> <li>Milk</li>
</ol>
……
</body>
</ol> </html>
 <ol> : thẻ tạo danh sách có thứ tự.
 <li> : tạo một phần tử của danh sách.
 Type: 1,a,A,i,I
30
 Danh sách lồng nhau
 Ta có thể tạo danh sách lồng nhau, bằng cách chèn thẻ tạo danh sách <ul> hoặc <ol> vào
trong một phần tử (vào giữa thẻ mở và đóng của thẻ <li>).
31
 Danh sách định nghĩa
 Dùng để khai báo các thuật ngữ và phần diễn giải tương ứng. Cấu trúc của danh sách định
nghĩa như sau:
<dl> <html>
<dt> Tiêu đề định nghĩa 1 </dt> <body>
<dd> Định nghĩa 1 </dd> <h1>DANH SACH DINH NGHIA</h1>
…… <dl>
</dl> <dt>HTML</dt>
<dd>Hypertext Markup Languages </dd>
 <dl> dùng để tạo danh sách thuật ngữ cần định nghĩa.
<dt>HTTP</dt>
 <dt> : thể hiện tiêu đề của thuật ngữ cần định nghĩa. <dd>HyperText Transfer Protocol</dd>
 <dd> : thể hiện phần diễn giải cho thuật ngữ. </dl> </body>
</html>
32
 Bảng
 Phần tử được cấu tạo bởi các dòng và cột.
 Bảng còn có chức năng phân trang, thiết kế trang web.
 Câu trúc
<table>
<tr> 
<td> ô thứ nhất </td>
<table>: định nghĩa một bảng.
<td> ô thứ hai </td>
<tr>: định nghĩa một dòng trong bảng.
<td>: định nghĩa một ô thuộc dòng.
</tr>
<tr> 
<td> ô thứ nhất </td>
<td> ô thứ hai </td>
</tr>
</table>
33
 Bảng
 Các thuộc tính
 height=x|x%: Chiều cao
 width=x|x%: Chiều rộng
 align=left|right|center: canh lề
 cellpadding=n: khoảng cách giữa nội dung trong ô với đường biên của ô.
 cellspacing=m: khoảng cách giữa các ô liền kề.
 border=n: kích cỡ đường viền
 bordercolor="màu": kích cỡ đường viền
 background="file-ảnh-nền" bgcolor="màu": thiết lập ảnh nền và màu nền.
34
 Bảng
<html> <body>
<h4>A background color:</h4>
<table border="1" bgcolor="yellow" bordercolor="red" cellpadding="3" cellspacing="3"
align="center">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table> </body> </html>
35
 Bảng
 Canh lề cho nội dung trong ô
 align=left/right/center: canh lề theo chiều ngang.
 valign=top/bottom/middle: canh lề theo chiều dọc.
 height=x|x% width=y|y%: thiết lập chiều cao và độ rộng.
 bordercolor="mau" bgcolor="mau" background="file-hinh-nền": thiết lập màu ô và nền ô.
36
 Bảng
<html><body><h4>Cell backgrounds:</h4>
<table border="1">
<tr>
<td bgcolor="red">First</td>
<td>Row</td>
</tr>
<tr>
<td background="bgdesert.jpg">Second</td>
<td>Row </td>
</tr>
</table>
</body></html>
37
 Bảng
 Mở rộng hàng/cột trong bảng
 <td colspan=n> …</td>: gom n ô trong các cột thành một (cùng dòng)
 <td rowspan=n> … </td>: gom n ô trong các dòng (cùng cột)
<table border="1"> <tr>
<td>Name</td>
<td colspan="2">Telephone</td>
</tr>
<tr>
<td>Bill Gates</td> <td>555 77 854</td>
<td>555 77 855</td> </tr> </table>
38
 Bảng
 Tiêu đề cho bảng và cột
 <caption> tiêu đề </caption>: tạo tiêu đề cho bảng
 <th>: tương tự như thẻ <td>, nội dung áp dụng thẻ <th> được định dạng in đậm.
<table border=3 cellspacing="0" cellpadding="3">

<caption align="top">DANH SACH SINH VIEN</caption>
<tr> <th>Ho ten</th> <th>Nam sinh </th></tr>
<tr><td>Nguyen van A</td> <td>1981</td></tr> <tr>
<td>Nguyen van B</td> <td>1983</td>
</tr> </table>
39
 Bảng
 Bảng lồng nhau
40
41
42
43
 Frame
 Công cụ chia cửa sổ trình duyệt thành các vùng riêng biệt và độc lập.
 Mỗi vùng hiển thị một tài liệu riêng và có thể có thanh cuộn đi kèm.
 Trang web thường được phân thành ba vùng frame:
 Header: frame thể hiện trang tiêu đề gồm tên công ty, logo, khẩu ngữ công ty, …
 Liên kết: frame bên trái thể hiện trang gồm các liên kết chính trong website.
 Nội dung: thể hiện nội dung của trang đang được liên kết.
 Lợi điểm của việc dùng frame là các phần tách bạch rõ ràng, khi cần hiệu chỉnh trang, ta
chỉ cần tập trung vào phần nội dung cần chỉnh sửa, mà không làm ảnh hưởng đến các vùng
khác.
44
 Frame
 Cấu trúc frame:
<frameset cols="trịsố" | rows="trịsố" >
<frame src="url" name="tên-frame" >
<frame src="url" name="tên-frame" >
………
</frameset>
 <frameset> khai báo sử dụng frame.
 Số lượng frame thuộc frameset được thiết lập thông qua thuộc tính rows hoặc cols.
 Với mỗi frameset, ta chỉ được dùng một trong hai thuộc tính rows hoặc cols, không được áp dụng cả hai
thuộc tính cùng lúc.
45
 Frame
 Tạo frame:
 cols: xác định số lượng frame phân theo chiều ngang, và độ rộng tương ứng của từng frame.
 rows: xác định số lượng frame phân theo chiều cao, và chiều cao tương ứng của từng frame.
 Giá trị của cols và rows
 n: trị tuyệt đối (tính bằng pixel).
 %: tỷ lệ phần trăm so với khung cha.
 *tỷ lệ tương đối.
 Thẻ <frame> <frame src="url" name="tên-frame" >
46
 Frame
 Thuộc tính của thẻ frame:
 src: vị trí của tài liệu hiển thị bên trong frame.
 name: tên frame.
 noresize: qui định cửa sổ frame không được thay đổi kích thước.
 scrolling=auto/yes/no: kiểu cuộn cửa sổ frame.
 frameborder: xác định đường viền frame, nhận giá trị 0 hoặc giá trị 1 (mặc định).
 marginwidth: khoảng cách giữa nội dung trong khung và lề trái, phải.
 marginheight: khoảng cách giữa nội dung trong khung và lề trên, dưới.
47
 Frame
Ví dụ : phân frame theo cột Ví dụ : phân frame theo dòng

<html> <html>
<frameset cols="*,100,2*"> <frameset rows="25%,50%,25%">
<frame src="frame_a.htm" noresize> <frame src="frame_a.htm">
<frame src="frame_b.htm" noresize> <frame src="frame_b.htm">
<frame src="frame_c.htm"> <frame src="frame_c.htm">
</frameset> </html> </frameset> </html>
48
 Frame
 Frame lồng nhau
<html> <head>
<title>nested frame</title>
</head>
<frameset rows="120,*" >
<frame src="heading.htm" >
<frameset cols="30%,*">
<frame src="link.htm">
<frame src="content.htm">
</frameset>
</framset> </html>
49
 Frame
 Liên kết trong frame:
 Để đạt được yêu cầu khi ta nhấn vào một liên kết trong frame trái (link.htm) thì phần frame bên
phải sẽ hiển thị nội dung của liên kết được chọn, còn frame trái không thay đổi.
 Ta cần thiết lập thuộc tính target="tên-frame-nội-dung".
<a href="url" target="tên-frame"> … </a>
 Nếu tất cả liên kết trong trang link.htm khi được người dùng chọn, đều hiển thị trong phần frame
nội dung bên phải, thì thay vì thêm thuộc tính target="tên-frame" cho mọi liên kết, ta chỉ cần
thêm thẻ <base> kèm theo thuộc tính target như sau:
<base target="tên-frame">
50
 Frame
frameLink.htm
<html>
<frameset cols="120,*">
<frame src="link.htm">
<frame src="frame_a.htm" name="content">
</frameset>
</html>
link.htm
<html><body>
<a href="frame_a.htm" target="content">Frame a</a><br>
<a href="frame_b.htm" target="content">Frame b</a><br>
<a href="frame_c.htm" target="content">Frame c</a>
</body></html>
51
 Frame
 Do các liên kết trong trang link.htm đều được hiển thị trong frame có tên là
content, nên ta có thể bỏ thuộc tính target="content" trên mọi liên kết, và thêm vào
thẻ <base target="content"> như sau:
link.htm
<html>
<body>
<base target="content">
<a href="frame_a.htm"> Frame a </a><br>
<a href="frame_b.htm"> Frame b </a><br>
<a href="frame_c.htm"> Frame c </a>
</body>
</html>
52
 Frame
 Phần tử noframe: được sử dụng nhằm đề phòng trường hợp trình duyệt không hỗ
trợ frame.
 Khi đó phần nội dung nằm giữa thẻ đóng và thẻ mở của <noframes> sẽ được hiển
thị, thông báo cho người dùng biết do trình duyệt của họ không hỗ trợ frame nên
trang web không hiển thị đúng.
 Thẻ <noframes> được đặt bên trong thẻ <frameset>.
<frameset cols="30%,*">
<frame src="frame_a.htm" >
<frame src="frame_b.htm" >
<noframes>Trinh duyet cua ban khong ho tro
frame</noframes>
</frameset>
53
 Frame
 Thẻ <iframe> được sử dụng để tạo frame trong dòng văn bản:
<iframe src="url" width="value" height="value" scrolling="value" name="value"> Nội
dung hiển thị khi trình duyệt không hỗ trợ frame </iframe>
<html>
<body>
<iframe src="vb2.htm">
Trang khong hien thi duoc noi dung nay, do trinh duyet cua ban khong ho tro
frame
</iframe>
</body>
</html>
54
 Form
 Dùng để thu thập dữ liệu từ người dùng.
 Form tìm kiếm: cho phép người dùng nhập tiêu chuẩn tìm kiếm.
 Form thu thập dữ liệu: cho phép người dùng nhập các thông tin cá nhân khi đăng
kí thành viên của website.
 Form đăng nhập: yêu cầu người dùng nhập username và password.
 Form phản hồi thông tin, đóng góp ý kiến cho website.
55
 Form
 Tạo form
<form action="url" method="get|post" name="tên-form" target= "_blank | _self | tênframe">

</form>
 action: url thể hiện địa chỉ của chương trình quản lý form.
 method=get|post: phương thức gửi dữ liệu của form đến trình quản lý form.
 get: dữ liệu được gắn vào cuối url của thuộc tính action để chuyển đi.
 post: dữ liệu của form được đưa vào Hypertext Transfer Protocol (HTTP) header để chuyển đi.
56
 Form
 Điều khiển nhập liệu
 Hộp văn bản (textfield): <input> với thuộc tính type="text"
<input type="text" name="tên" value="giá trị" size=n maxlength=n disabled readonly>
 name: tên của phần tử.
 value: giá trị khởi tạo ban đầu cho textfield.
 size: chiều dài của hộp văn bản, tính bằng số kí tự.
 maxlength: kích thước tối đa của dữ liệu nhập.
 readonly: người dùng chỉ được xem, không được chỉnh sửa nội dung textfield.
 disabled: người dùng không thể chọn văn bản bên trong textfield để copy
57
 Form
Ví dụ :
<form action="guestbook.htm" method="post">
<p>First Name:
<input type="text" name="firstname" value="Minh" size="30" maxlength="25"> </p>
<p>Last Name:
<input type="text" name="lastname" value="Lê" size="30" maxlength="25"> </p>
</form>
58
 Form
 Hộp mật khẩu: <input> với thuộc tính type="password "
<input type="password" name="tên" value="giá trị" size=n maxlength=n>
 name: tên của phần tử.
 value: giá trị khởi tạo ban đầu cho.
 size: chiều dài của hộp mật khẩu.
 maxlength: kích thước tối đa của dữ liệu nhập.
59
 Form
Ví dụ :
<form action="login.jsp" action="post">
<p>User Name:
<input type=text name="user" size="35" value="admin" maxlength=30> </p>
<p>Password:
<input type=password name="pass" size="30" maxlength=20> </p> </form>
</form>
60
 Form
 Vùng văn bản (textarea)"
<textarea cols=m rows=n name="tên" wrap="soft/hard/off"> văn bản </textarea>
 cols: độ rộng của textarea, chính là số ký tự hiển thị.
 rows: số dòng.
 name: tên của textarea.
 wrap=off: không xuống dòng, hiển thị đúng nội dung.
 wrap=hard: hiển thị xuống dòng, và nội dung văn bản khi submit gửi đi, có cả dấu xuống dòng.
 wrap=soft: hiển thị xuống dòng, nhưng nội dung khi submit gửi đi là những gì người dùng nhập vào,
không bị thêm dấu xuống dòng.
61
 Form
Ví dụ :
<form method="post" action="">
tell us about your computer experience:<br>
<textarea name="choice" rows=5 cols=25 wrap="soft"> </textarea> <br>
<input type="reset">
<input type="submit" name="submit" value="submit">
</form>
62
 Form
 Điều khiển chọn lựa
 Checkbox: được tạo từ thẻ <input> với type="checkbox":
<input type="checkbox" name="tên" value="giá-trị" checked>
 name: tên điều khiển.

 checked: checkbox được chọn.
 value: giá trị trả về khi người dùng chọn checkbox
63
 Form
Ví dụ :
<form>
<input type="checkbox" name="bike" value="bike">
I have a bike <br>
<input type="checkbox" name="car" value="car">
I have a car
<input type="checkbox" name=“bcl" value=“bcl">
I have a bicycle
</form>
64
 Form
 Radio Button: được tạo từ thẻ <input> với type="radio":
<input type="radio" name="tên" value="giá-trị" checked>
<form>
Giới tính của bạn: <br>
<input type="radio" name="gioitinh" value="nam"> Nam
<br>
<input type="radio" name="gioitinh" value="nu"> Nu
</form>
65
 Form
Ví dụ:
 Danh sách các tùy chọn: thẻ <select>:
<p>What are some of your favorite foods?</p>
<select name="tên" sise=n multiple> <select name="food" size="2" multiple>
<option selected value="gt1"> chọnlựa1 </option> <option value="pizza">Pizza</option>
<option value="gt2"> chọnlựa2 </option> <option value="ice cream">Ice Cream</option>
……… </select> <option value="eggsham" selected>Green Eggs
and Ham</option>
</select>
 <select>: thẻ tạo danh sách chọn.
 <option>: thể hiện một chọn lựa trong danh sách.
 multiple: cho phép chọn nhiều giá trị.
 size: số chọn lựa hiển thị.
66
 Form
 Nút nhấn
 Để gửi những thông tin trong form đến máy chủ hoặc đặt lại trạng thái mặc định ban đầu cho form.
<input type="loại-phần-tử" name="tên" value ="giá trị">
 name: tên nút.

 value: dòng chữ hiển thị trên nút nhấn.
 type: loại nút nhấn, gồm các giá trị:
 button: nút nhấn thông thường, thường được dùng để kích hoạt các hàm Javascript.
 submit: nút submit form.
 reset: nút reset form về các giá trị khởi tạo ban đầu.
 image: nút nhấn dạng ảnh. Với nút nhấn dạng ảnh, ta cần chỉ định thêm url của file ảnh thông qua thuộc
tính src: <input type="image" src="url-file-ảnh" name="name">
67
 Form
 Gán nhãn cho điều khiển
 Phần tử <label> được dùng để gắn nhãn cho điều khiển. Điểm khác biệt giữa nhãn của phần tử điều
khiển và văn bản đi kèm điều khiển là khi ta click chuột vào nhãn thì phần tử điều khiển tương ứng
sẽ nhận focus.
<label for="id-của-điều-khiển">nhãn</label>
 Ví dụ
<form action="http://somesite.com" method="post">
<label for="firstname">First name: </label>
<input type="text" id="firstname"><br><br>
…
</form>
68
 Form
 Gom nhóm điều khiển
 Ta có thể gom nhóm các phần tử điều khiển, đặt tên cho nhóm và bao quanh chúng một đường viền
bằng thẻ <fieldset>.
<fieldset> Ví dụ:
<legend align="left|center|right"> <fieldset >
tiêu đề của nhóm điều khiển</legend> <legend>Health information:</legend>
<form action="mailto:abc@gmail.com">
<!– các điều khiển cùng nhóm --> Height <input type="text" size="3" />
</fieldset> Weight <input type="text" size="3" />
</form>
</fieldset>
 Thẻ <fieldset> gom nhóm các điều khiển.
 Thẻ <legend> đặt tiêu đề cho nhóm.
69
70
71
72
73
Giới thiệu và sử dụng CSS
 CSS là gì
• CSS là từ viết tắt của cụm từ Cascading Style Sheets.
• Định nghĩa cách hiển thị của các tài liệu viết bằng ngôn ngữ đánh dấu như HTML.
• Tách biệt phần nội dung (viết bằng ngôn ngữ HTML) với phần trình bày (viết bằng
ngôn ngữ CSS) của tài liệu nhằm làm đơn giản, cũng như giảm bớt sự lặp lại các thẻ
định dạng trong tài liệu.
• Đặc tả của CSS hiện đang được quản lý bởi tổ chức World Wide Web Consortium
(W3C).
74
 Cú pháp
• Bộ chọn (selector): xác định loại phần tử bị ảnh hưởng bởi các định dạng chỉ định.
Bộ chọn có thể là tên các phần tử HTML (ví dụ: body, p, h1, h2, …), các lớp kiểu do
ta xây dựng, …
• Thuộc tính (property): thể hiện tính chất định dạng.
• Giá trị (value): Các cặp thuộc tính và giá trị được phân cách bởi dấu chấm phẩy.
• Chú thích (comment): /* nội dung chú thích */
bộ_chọn {
thuộc_tính_1: giá_trị;
thuộc_tính_2: giá_trị;
...
}
75
 Khai báo và sử dụng trong HTML
• Inline CSS : bên trong một thẻ HTML
• Internal CSS: Trong phần đầu tài liệu HTML (head), nằm trong khối <style>.
• External CSS: Trong tập tin riêng, có thể dùng chung cho nhiều trang HTML.
76
 Inline CSS
• <tênthẻ style="thuộc-tính:giá-trị;… ">: Kiểu định dạng này chỉ được áp dụng tại vị
trí khai báo định dạng.
Ví dụ :
<h1 style="color:red; text-align:right;">

Khoa THQL
</h1>
<h1> Bộ môn CNPM </h1>
77
 Internal CSS
• Sử dụng thẻ <style> để khai báo css
<html> <head><style>
h1 {color: red;text-align: center;}
h2 {color: blue;}
</style></head>
<body>
<h1> Đề cương môn học CSDL</h1>
<h2> Quan hệ </h2>
<h2> Dạng chuẩn </h2>
<h2> Phụ thuộc hàm </h2>
</body></html>
78
 External CSS
• Khai báo CSS trong một tập tin riêng.
• Các trang trong website sẽ liên kết đến tập tin CSS này.
• Liên kết đến các file CSS băng thẻ <link>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
79
 External CSS
• Ví dụ
csdl.html: thql.css:
<html> <head> h1
<link rel=stylesheet {
type="text/css" href="thql.css"/> color: red;
</head> text-align: center;
<body> }
<h1> Đề cương môn học CSDL</h1> h2
<h2> Quan hệ </h2> {
<h2> Dạng chuẩn </h2> color: blue;
<h2> Phụ thuộc hàm </h2> }
</body></html>
80
 Bộ chọn CSS
• Xác định loại phần tử áp dụng định dạng.
• Bộ chọn CSS có thể là:
• Phần tử HTML
• Lớp kiểu CSS
• ID kiểu CSS
• Bộ chọn ngữ cảnh
• Lớp giả CSS
81
 Bộ chọn CSS là phần tử HTML
• Sử dụng tên các phần tử HTML.
• Ví dụ : h1 { color: green; text-align: center }
• Có thể gom nhóm nhiều phần tử giống nhau có cùng định dạng CSS.
• Ví dụ: h1, h2, h3 { color: green }
82
 Bộ chọn CSS là lớp
• Có thể xây dựng nhiều lớp kiểu định dạng cho một loại phần tử HTML.
• Các định lớp kiểu áp dụng thông qua thuộc tính class.
• Nhiều lớp kiểu CSS áp dụng cho một loại phần tử HTML
• Cú pháp:
tên_thẻ_HTML.tên_lớp_kiểu_CSS {
thuộc_tính: giá_trị;
... } <html><head> <style type="text/css">
p.right { text-align: right}
p.center { text-align: center}
</style> </head> <body>
<p class="right"> Đây là đoạn văn bản được canh lề phải. </p>
<p class="center"> Đây là đoạn văn bản được canh giữa. </p>
</body></html> 83
 Bộ chọn CSS là lớp
• Lớp áp dụng cho nhiều loại phần tử HTML
• Cú pháp
.tên_lớp_kiểu_CSS {
thuộc_tính: giá_trị;
...
}
• Áp dụng lớp kiểu CSS thông qua thuộc tính class của thẻ HTML
<tên-thẻ-HTML class="tên_lớp_kiểu_CSS" >………… </tên-thẻ-HTML>
84
 Bộ chọn CSS là ID
• Hoạt động giống như trường hợp bộ chọn là lớp.
• Tuy nhiên, trong cú pháp khai báo, phía trước tên ID phải thêm dấu #.
• Đăt ID cho phần từ HTML muốn áp dụng CSS
Ví dụ :
<html><head> <style type="text/css">

#emphasize {
color: red;
font-weight: bold; }
</style> </head> <body>
<p> Lịch thi môn LTM1:
<span id="emphasize"> 7g ngày 01/01/2008 </span>
</p> </body> </html>
85
 Bộ chọn CSS là ngữ cảnh
• Các phần tử con kế thừa các định dạng đã có của phần tử cha.
• Giả sử ta có CSS p {color: blue; }
• Với đoạn HTML <p> Đây là đoạn văn bản có một phần <i>in nghiêng</i></p>
• Khối văn bản nằm giữa cặp thẻ <i> sẽ thừa kế định dạng style màu xanh từ
phần tử thẻ <p> bao bọc bên ngoài.
• Nếu bổ sung thêm định dạng style cho phần tử thẻ <i> i { color: red; }
• Nội dung áp dụng thẻ <i> mặc nhiên sẽ có màu đỏ
86
 Bộ chọn CSS là ngữ cảnh
• Áp dụng CSS cho các thẻ theo ngữ cảnh xuất hiện.
• Ví dụ: định dạng màu xanh cho khối văn bản nằm giữa thẻ <i> và đồng thời được
bao bọc thêm bên ngoài bởi thẻ <p>
p i { color: blue ; }
• Thứ tự xuất hiện của p và i trong ngữ cảnh này là quan trọng.
87
 Bộ chọn CSS là lớp giả
• Định dạng kiểu cho một trạng thái cụ thể của thẻ.
• Tên lớp giả là các từ khóa đã được quy định trước.
a:link Định dạng kiểu cho những liên kết chưa được chọn.
a:visited Định dạng kiểu cho những liên kết đã được chọn.
Định dạng kiểu cho những liên kết đang được con trỏ chuột "di
a:hover
chuyển" bên trên (trạng thái mouse over).
Định dạng kiểu cho những liên kết ở trạng thái hoạt động (đang được
a:active
nhấn chọn).
88
 Bộ chọn CSS là lớp giả
• Định dạng kiểu cho một trạng thái cụ thể của thẻ.
• Tên lớp giả là các từ khóa đã được quy định trước.
Ví dụ :
<html><head><style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style> </head><body>
<p><b> <a href="http://www.ueh.edu.vn" target="_blank">
Liên kết đến trường ĐH Kinh Tế </a>
</b></p></body></html>
89
 In đậm
• font-weight (lighter /normal/ bold/ bolder/ trị số từ 100 – 900)
Ví dụ :
<style type=text/css>
.tieude{ font-weight: bold; font-size: 20; }
</style> <body> <p class=tieude> Phan doan van ban ban
</p> <p> De phan doan van ban ta su dung the P hoac
BR</p> <p class=tieude> Table</p>
<p> Table la cong cu giup ban tao bang bieu va phan vung
trong thiet ke trang web </p></body>
90
 In nghiêng
• font-style (normal/ italics/ oblique)
Ví dụ :
<div style="font-style: italic"> Day la doan van ban

ma moi tu deu duoc in nghieng. Neu chung ta muon
co mot tu nao do <span style="font-style: normal">
khong in nghieng </span> thi sao ??? </div>
91
 Loại font
• font-family: danh sách các tên font, phân cách nhau bởi dấu phẩy (,), nhằm đề phòng
trường hợp máy tính của người dùng không cài đầy đủ font chữ.
Ví dụ :
body {font-family:Garamond,Times,"Times New Roman",serif}
92
 Kích thước font
• font-size: (xx-small/ x-small/ small/ medium (mặc định)/ large/ x-large/ xx-large/
smaller/ larger/ giá trị pt (12px)/ giá trị % so với phần tử cha)
93
 Chữ hoa nhỏ
• font-variant (small-caps/ normal): chuyển đổi mọi kí tự sang dạng chữ viết hoa
Ví dụ :
<h1 style="font-variant:small-caps">
Tieu de ap dung kieu dinh dang small-caps
</h1>
94
 Màu sắc
• color (tên tiếng anh/ giá trị #rrggbb/ #rgb): chuyển đổi mọi kí tự sang dạng
chữ viết hoa
Ví dụ :
p { color: #ff0044 }
h1{ color: red }
h2{ color: rgb(123,50,255) }
95
 Thuộc tính font
• Cho phép xác định cùng lúc tất cả thuộc tính font chữ đã được mô tả phía
trước.
[<font-style> || <font-variant> || <font-weight>]
<font-size>[/<line-height>] <font-family>
• Thuộc tính font bắt buộc phải luôn xác định kích thước font chữ và họ font
chữ.
Ví dụ :
p {font: 12pt/14pt Times, serif}

p {font: italic bold x-large/150% palatino, serif}
96
 Chiều cao dòng
• line-height (số/ độ dài (1cm, 0.5in, 14mm)/ phần trăm)
Ví dụ :
.double {line-height: 2;color: blue; }
</style> </head><body>
<div class="double">
Day la doan van ban su dung thuoc tinh line-height la 2 de co duoc chieu cao gap doi
so voi nhung doan van ban khac trong tai lieu web nay. </div>
<p> Con day la doan van voi chieu cao binh thuong, khong ap dung gia tri nao cho
thuoc tinh lineheight. </p>
</body></html>
97
 Khoảng cách kí tự
• letter-spacing (normal/ độ dài (5px , +4px, 0.1em))
Ví dụ :
P { letter-spacing: 0.04in}
<h1 style="letter-spacing: -3px;">Day la tieu de cap
1 voi khoang cach ki tu nho hon</h1>
<h1 style="letter-spacing: +5px;">Con day la tieu de
cap 1 voi khoang cach ki tu rong hon</h1>
98
 Khoảng cách từ
• word-spacing (normal/ độ dài (5px , -2px, 15mm))
Ví dụ :
h1 { word-spacing: 15mm }
p { word-spacing: -0.5px }
99
 Canh chỉnh theo chiều ngang
• text-align (left/ right/ center/ justify)
Ví dụ :
<p style="text-align:center;" > QUE HUONG </p>

<p style="text-align:left;">
Que huong la gi ho me <br>
Ma co giao day phai yeu <br>
Que huong la gi ho me <br>
Di xa ai cung nho nhieu </p>
100
 Canh chỉnh theo chiều dọc
• vertical-align: giúp canh chỉnh văn bản theo chiều đứng với các trị sau:
• text-top: canh đỉnh (top) của phần tử với đỉnh của phần tử cha.
• text-bottom: canh phần đáy (bottom) của phần tử với phần đáy của phần tử cha
• top: canh đỉnh của phần tử với đỉnh của phần tử cao nhất trong dòng.
• middle: canh vị trí giữa của phần tử với vị trí giữa của phần tử chứa nó.
• bottom: canh cạnh dưới của phần tử với cạnh dưới của phần tử thấp nhất trong dòng.
• supper: xác định chỉ số trên.
• sub: xác định chỉ số dưới.
101
 Canh chỉnh theo chiều dọc
Ví dụ :
.tm {vertical-align: top;
font-size: 50%;
font-weight: bold; }
</style></head><body>
<p> Xerox <span class="tm">tm</span> la nhan hieu
thuong mai cua tap doan Xerox.</p>
</body></html>
102
 Trang trí văn bản
• text-decoration (none/ underline/ overline/ line-through/ blink)
Ví dụ :
<a href="http://www.google.com"
style="text-decoration:none"> Tim kiem voi Google
</a>
<a href="http://www.google.com">
Tim kiem voi Yahoo!</a>
103
 Định dạng hộp
104
• Thuộc tính canh lề: margin-left, margin-right, margin-top và margin-bottom
(1cm/ -5pt/ 10%)
Ví dụ :
h1 {margin-left:10%, margin-right:1cm}
p {margin-top:10pt, margin-bottom:10pt}
• Thuộc tính margin:
• 1 giá trị: thì giá trị đó sẽ được áp dụng cho tất cả bốn cạnh.
• 2 giá trị: giá trị 1 (trên, dưới), giá trị 2 (trái, phải).
• 3 giá trị: giá trị 1 (trên), giá trị 2 (trái, phải), giá trị 3 (dưới).
• 4 giá trị: trình tự là (trên, phải, dưới, trái)
105
• Đường biên (border-left, border-right, border-top, border-bottom, border)
• Màu đường biên (border-left-color, border-right-color, border-topcolor, border-
bottom-color, border-color)
Ví dụ :
/* Tất cả đường biên có màu đỏ */

body { border-color: red;}
/* Đường biên trên và dưới màu đỏ, đường biên dưới và trên màu đen */
body { border-color: red black;}
/* Đường biên trên màu đỏ, trái và phải màuxanh, dưới màu đen */
body { border-color: red blue black;}
/* Tất cả lề được thiết lập theo thứ tự trên – phải – dưới - trái */
body { border-color: red blue yellow green;}
106
• Kiểu đường biên (border-left-style, border-right-style, border-top-style,
border-bottom-style, border-style)
• none: không có đường biên. • double: đường đội, nét liền.

• hidden: giấu đường biên. • groove: đường rãnh 3D.
• dotted: đường nét chấm. • ridge: đường gân 3D.
• dashed: đường nét gạch. • inset: đường chìm 3D.
• solid: nét liền, không đổ bóng • outset: đường nổi 3D.
107
• Độ dày đường biên (border-left-width, border-right-width, border-top-width,
border-bottom-width, border-width)
• Các giá trị: thin, thick, medium
Ví dụ :
body { border-left-width: thin;

border-bottom-width: thick;}
body { border-width: 0.1mm }
body { border-width: 0.1mm 1pt }
108
• Vùng đệm (padding-top/ padding-bottom/ padding-left/ padding-right/
padding)
• Các giá trị: độ dài (VD: 5pt, 2mm), phần trăm
Ví dụ :
body { padding: 5pt }

body {
padding-top: 15pt;
padding-left: 5pt;
padding-right: 5pt;
}
109
• Kích thước: chiều rộng
• width (độ dài/ phần trăm/ auto (mặc định))
Ví dụ :
<p style="width:50%; margin-left:25%;"> Luon co mot

nguoi dung sau tung canh cua moi bo phim thanh cong
- nguoi dieu hanh su hop tac qua lai giua dien vien,
nha quay phim, nha bien kich va nhieu thanh vien
khac.</p>
110
• Kích thước: chiều cao
• height (độ dài/ auto (mặc định))
Ví dụ :
<img src="logo.jpg" style="width:100 height:70" />
111
• Thuộc tính float: canh chỉnh phần tử chứa tương đối với phần còn lại của nội
dung trang.
• Giá trị:
• none
<html> hiển thịtype="text/css">
<head><style tại nơi nó xuất hiện
• {float:right
img left  phần } tử di chuyển sang bên trái phần tử cha.
</style>
• right</head>
 phần tử di chuyển sang bên phải phần tử cha.
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that
the image will float to the right in the paragraph.</p>
<p> <img src="logocss.gif" width="95" height="84" />This is some text. This is some text. This is
some text. This is some text. This is some text. … </p>
</body></html>
112
• Bố trí phần tử chứa
• position (static: giá trị mặc định, relative: bố trí tương đối, absolute: bố trí
tuyệt đối, fixed: bố trí cố định)
• Mặc định, các phần tử sẽ xuất hiện tuần tự theo thứ tự của chúng trong trang
web.
• Các giá trị (relative, absolute và fixed), cần được dùng kèm với các thuộc tính
bố trí là top, right, bottom và left.
113
• Bố trí phần tử chứa – Tuyệt đối
• position:absolute
• Giá trị này cho phép ta chỉ định chính xác vị trí đặt phần tử thông qua các
thuộc tính top, right, left, bottom
Ví dụ:
<head><style type="text/css">
.copyright {
position: absolute;
right: 10px;
bottom: 10px; }
</style></head><body>
<div class="copyright">© DHKT 2008</div></body>
114
• Bố trí phần tử chứa – Tương đối
• position: relative
• Phần tử được bố trí tương đối so với vị trí mà lẽ ra phần tử đã được đặt tại đó.
• top chỉ định khoảng cách phần tử di chuyển xuống tính từ cạnh trên của nó.
• left chỉ định khoảng cách phần tử di chuyển sang phải tính từ cạnh trái của nó.
Ví dụ:
<p>Bo tri <span style="position:relative;top:-10px; color:blue">phan tu </span> trong CSS </p> Kết
quả là khối văn bản 'phan tu' được di chuyển lên 10px so với các nội dung khác.
115
• Bố trí phần tử chứa – Cố định
• position: fixed
• Giữ cho một phần tử luôn hiển thị trên màn hình tại một vị trí xác định
Ví dụ:
<div style="position:fixed; right:10px;top:10px; background-color:yellow;">CSS</div>

<p> The top property defines how far from the top of its usual position we want the top of our container to appear. If we use a
positive value, then our container is moved down from the usual position, whereas a negative value would move our container
up from the usual position…
</p> Kết quả là khi ta cuộn tài liệu, khối văn bản CSS màu vàng luôn xuất hiện tại góc phải trên cửa sổ trình duyệt.
116
• Tính hiển thị của phần từ
• visibility (visible/ hidden): kiểm soát tính ẩn hay hiện phần tử (phân bố không
gian cho các phần tử ẩn).
Ví dụ:
<p> Luon co mot nguoi dung sau tung canh cua moi bo
phim thanh cong ... </p>
<p style="visibility:hidden"> Vang, Javascript la mot
dao dien phia sau moi trang web cua nhieu website …
</p>
<p><b>Anh sang! May quay phim! Trinh duyet! Hanh dong!
</b></p>
117
• Tính hiển thị của phần từ
• display (visible/ hidden): kiểm soát tính ẩn hay hiện phần tử (không phân bố
không gian cho các phần tử ẩn).
Ví dụ:
<p> Luon co mot nguoi dung sau tung canh cua moi bo
phim thanh cong ...
</p>
<p style="display:none"> Vang, Javascript la mot dao
dien phia sau moi trang web cua nhieu website … </p>
<p><b>Anh sang! May quay phim! Trinh duyet! Hanh dong!</b>
</p>
118
• Xếp lớp với thuộc tính z-index
• Quy tắc thông thường là các phần tử xuất hiện sau sẽ nằm trên những phần tử
xuất hiện trước.
• Trong CSS, tính chất này được quyết định bởi thuộc tính z-index.
• Giá trị: auto/ số nguyên
• z-index cao hơn sẽ được bố trí phía trên phần tử có trị z-index thấp.
• Nếu z-index nhận trị âm nghĩa là phần tử sẽ nằm phía sau khối chứa của nó.
119
• Xếp lớp với thuộc tính z-index
Ví dụ:
<div style="position:absolute; z-index:0; backgroundcolor: blue; width:250; height:100;

top:105px;left:14px;"> </div>
<div style="position:absolute;z-index:1; background-color: red; width:200; height:150;top:80px;
left:40px;"> </div>
<div style="position:absolute; z-index:2; background-color: green; width:100; height:325;
top:10px; left:90px;"> </div>
120
• Màu nền background-color
• Giá trị: tên màu, giá trị RGB, transparent (mặc định)
Ví dụ:
h1 {background-color: yellow ;}
121
• Hình nền background-image
• Tính lặp của ảnh background-attachment: xác định xem hình nền là cố định
hay có thể cuộn cùng với các thành phần khác trong trang.
• scroll: hình ảnh sẽ cuộn cùng với nội dung (mặc định).
• fixed: hình ảnh là cố định so với khung vẽ.
122
• Hình nền background-image
• Giá trị: url('đường-dẫn-đến-file-ảnh'), none
• Tính lặp của ảnh background-repeat:
• repeat: hình được lặp theo cả phương ngang và phương đứng.
• repeat-x: hình được lặp theo phương ngang.
• repeat-y: hình được lặp theo phương đứng.
• norepeat: hình chỉ được xuất hiện một lần.
Ví dụ:
body { background-attachment: fixed;
background-image: url("../bgImages/bulbon.gif");
background-repeat: no-repeat;
background-position: center center; }
123
Giới thiệu và sử dụng Javascript
 Javascript là ngôn ngữ kịch bản ở phía client.
 Được dùng để bổ sung tính tương tác cho Website, chẳng hạn như
kiểm tra dữ liệu nhập, xử lý các biến cố xảy ra trên trang,…
 Javascript không có liên quan gì với ngôn ngữ Java.
 Viết mã Javascript bằng phần mềm soạn thảo văn (Notepad, Editplus,
Wordpad, …).
124
 Sử dụng JS trong HTML
 Chèn trực tiếp đoạn code Javascript vào giữa cặp thẻ <script> … </script>
trong tập tin HTML.
 Dùng thẻ <script> để kết nối với trang HTML.
 Có thể chèn đoạn mã Javascript vào bất kỳ vị trí nào trong trang web.
125
<html><head> <html> <head> </head>
<script type="text/javascript" <body> doan code js duoc dat trong phan body
language="javaScript"> <script type="text/javascript"
 //-->
</script> </script>
</head> </body>
<body> Day la phan than HTML – Doan code JS </html>
duoc dat trong phan head</body> </html>
126
 Dùng thẻ <script> để kết nối với trang HTML.
<script type="text/javascript" src="tenfile.js" language="JavaScript"></script>
Ví dụ : Tạo file hello.js với dòng lệnh sau: Liên kết đến tập tin hello.js:
document.write("Hello World !!!"); <html><body><script

type="text/javascript"
language="javascript" src="hello.js">
</script>
Trong tập tin hello.js, lệnh javascript
</body> </html>
document.write("Hello World !!!") làm nhiệm
vụ in ra dòng chữ 'Hello World !!!'.
127
 Câu lệnh
 Các câu lệnh phân cách bằng dấu chấm phẩy (;)
 Nên đặt mỗi câu lệnh trên một dòng.
 Khối lệnh
 Một nhóm lệnh thực hiện một thao tác nào đó.
 Khối lệnh được bao bọc bởi cặp móc { … }
Ví dụ :
{
document.writeln("Dòng lệnh 1 thuộc khối lệnh");
document.writeln("Dòng lệnh 2 thuộc khối lệnh");
}
128
 Chú thích
 Ghi chú trên một dòng //đây là chú thích.
 Chú thích là một khối
/* Đây là nội dung chú thích.
Và chú thích này nằm trên nhiều dòng */
129
 Biến
 Vùng nhớ dùng đề lưu thông tin, được truy xuất thông qua tên gọi.
 Khai báo biến : var tên_biến; (VD: var age;) var age, name;
 Không cần xác định kiểu dữ liệu cho biến.
 Cùng một biến có thể có nhiều kiểu dữ liệu khác nhau, tùy thuộc vào ngữ
cảnh.
 Một biến sẽ được tự động khai báo khi ta gán trị cho nó.
 Khai báo biến trước là không bắt buộc trong Javascript, nhưng đó lại là một
thói quen lập trình tốt.
130
 Tầm vực của biến
 Biến toàn cục: khai báo bên ngoài các hàm, tầm ảnh hưởng của biến là toàn
bộ chương trình, tồn tại từ lúcbắt đầu khai báo biến cho đến khi đóng trang.
 Biến cục bộ: khai báo bên trong một hàm, tầm ảnh hưởng trong phạm vi của
hàm.
131
Ví dụ (biến toàn cục)
<html><head> <title>variable example</title>

<script language="javascript" type="text/javascript">

</script> </head> <body>

</script> </body></html>
132
Ví dụ (biến cục bộ)
<html><head><title>variable example</title></head>
<body> <script language="javascript">

</script> </body></html>
133
 Hằng số
 Giống như biến, nhưng một khi đã được gán giá trị, thì không thể thay đổi.
 Cú pháp: const TÊN_HẰNG;
 Ví dụ: const PI = 3.14;
134
 Kiểu dữ liệu
 JavaScript là ngôn ngữ có tính định kiểu thấp, không cần chỉ định kiểu dữ
liệu khi khai báo.
 Kiểu dữ liệu của biến sẽ được tự động chuyển thành kiểu phù hợp khi ta thay
đổi giá trị.
 Các kiểu dữ liệu nguyên thủy trong JavaScript:
• Kiểu số
• Kiểu chuỗi
• Kiểu luận lý boolean
• null
• undefined
135
 Kiểu dữ liệu – Số và luận lý
 Kiểu số: là các trị số nguyên hay số thập phân dấu chấm động.
 Ví dụ:
var age=20;
var temperature = -10.7;
 Kiểu luận lý thể hiện sự đúng – sai, chỉ có hai giá trị là true và false.
 Ví dụ:
var isStudent = true;
136
 Kiểu dữ liệu – Chuỗi
 Biểu diễn một chuỗi kí tự gồm chữ cái, số, dấu chấm câu và khoảng trống.
 Giá trị kiểu chuỗi phải được đặt giữa cặp dấu nháy kép ("…") hay cặp dấu
nháy đơn ('…').
 Nếu bản thân chuỗi chứa dấu nháy đơn thì ta dùng dấu nháy kép để bao bọc
chuỗi hoặc ngược lại.
 Ví dụ:
var name = "Minh";
var mood = 'vui';
var status = "He's a teacher";
137
 Kiểu dữ liệu – Chuỗi
 Kí tự mã hóa escape – dấu chéo ngược (\): dùng để chèn các kí tự đặc biệt
như dấu &, dấu tab, …
\' nháy đơn
\" nháy kép
\& dấu &
\n xuống dòng
\t tab
\r về đầu dòng
Ví dụ :
document.writeln("It work!\n");
document.writeln("You \& I sing \"Happy Birthday\".");
138
 Kiểu dữ liệu – Giá trị null
 Không chứa giá trị nào cả.
 Mục đích của trị null là nhằm khởi tạo cho biến một giá trị tạm thời, tránh
trường hợp lỗi khi sử dụng biến chưa khởi tạo.
 Khi chuyển sang kiểu số: trị null  0.
 Khi chuyển sang kiểu chuỗi: null  chuỗi rỗng "".
 Khi chuyển sang kiểu boolean: null  false.
 Ví dụ:
var name = null; var x=null; var y;
y= x + 2
139
 Kiểu dữ liệu – Giá trị undefined
 Là trị mặc định được gán cho các biến chưa khởi tạo giá trị.
 Ví dụ:
var a;
alert(a);
140
 Toán tử số học
Toán Tử Chức Năng Ví dụ Kết quả

+ cộng x=2; x+2; 4
- trừ x=2; 5-x; 3
* nhân x=4; x*5; 20
3
/ chia 15/5 5/2
2.5
% lấy phần dư 5%2 10%8 10%2 120
++ tăng giá trị lên 1 x=5; x++; x=6
-- giảm giá trị xuống 1 x=5; x--; x=4
141
 Toán tử gán
Toán Tử Ví dụ Tương đương

= x=y x=y
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
142
 Toán tử so sánh
Toán Tử Chức Năng Ví dụ
== bằng 5==8  false
!= không bằng 5!=8  true
> lớn hơn 5>8  false
< nhỏ hơn 5<8  true
>= lớn hơn hoặc bằng 5>=8  false
<= nhỏ hơn hoặc bằng 5<=8  true
143
 Toán tử logic
Toán Tử Chức Năng Ví dụ
x=6
&& và y=3
(x < 10 && y > 1)  true
x=6
|| hoặc y=3
(x==5 || y==5)  false
x=6
! not y=3
!(x==y)  true
144
 Toán tử chuỗi
 Toán tử cộng (+) cho phép nối các chuỗi với nhau.
 Ví dụ
txt1 = "What a very ";

txt2 = "nice day!";
txt3 = txt1 + txt2 ;
145
 Toán tử điều kiện
 Cú pháp : (điều-kiện) ? giá-trị-1 : giá-trị-2
 Nếu điều-kiện đúng thì trả về giá-trị-1, ngược lại nếu điều-kiện sai thì trả về
giá-trị-2
 Ví dụ
(day == "Saturday") ? "Weekend" : "Not Saturday"
146
 Hàm
 Một nhóm lệnh, thực hiện một công việc cụ thể.
 Truyền dữ liệu cho hàm bằng cách dùng tham số (đối số).
 Xây dựng hàm
function functionName([thamsố1] [,thamsố2] [,….])
{
/* đoạn mã lệnh trong hàm */
[ return trịTrảVề; ]
}
 Trong cùng một hàm, tên tham số không được trùng lặp.
 Lệnh return được dùng để trả về giá trịcủa hàm và thoát khỏi hàm.
147
 Hàm
 Gọi hàm: functionName([thamsố1] [,thamsố2] [,….]);
 Đối với hàm không có đối số  chỉ cần tên hàm, ví dụ myfunction();
 Đối với hàm có giá trị trả về, có thể gán giá trị của hàm cho một biến.
 Ví dụ:
function sum(a,b)
{
result=a+b;
return result;
}
sumValue = sum(2,3);
148
 Hàm
<html><head>
function sum(a,b) {
result = a+b;
return result;}
</script></head>
<body>
<script language="Javascript" type="text/javascript">
var sumValue = sum(2,3);
document.write("Tổng a va b = ", sumValue );
</script>
</body></html>
149
 Hàm
 Phạm vi biến
 Một biến có thể là biến toàn cục hay cục bộ.
 Ta có thể dùng cả biến toàn cục và cục bộ trong các hàm.
 Lưu ý nếu ta dùng biến cục bộ và biến toàn cục có cùng tên  dùng từ khóa var để khai
báo biến cục bộ
150
 Hàm
 Phạm vi biến
 Ví dụ:
function square(num){
total = num * num;
return total;
}
var total = 50;
var number = square(20);
document.write("total = " + total);
 Kết quả in ra màn hình: total = 400. Biến total thay đổi trị từ 50 thành 400 vì
hàm square() không khai báo biến total mới mà dùng biến total toàn cục bên
ngoài.
151
 Hàm
 Hiển thị thông báo
alert ("Nội dung thông báo");
152
 Hàm
 Nhập dữ liệu
 prompt("Chuỗi thông báo", "Giá trị khởi tạo");
 Ví dụ:
<script type="text/javascript">
var name = prompt("Please enter your name","");
document.write("Hello " + name);
</script>
153
 Hàm
 Xác nhận
 confirm ("chuỗi thông báo");
 Ví dụ:
var traloi = confirm ("có tiếp tục không?");
var value = confirm("Press a button, OK or Cancel");
154
 Hàm
 Đổi chuổi số sang giá trị số
 eval(strNum);
 Number(strNum);
 Nếu strNum không là chuỗi số thì:
 eval() không trả về trị nào cả.
 Number() trả về trị NaN
var str1 = prompt("Nhap so thu nhat" , "0");
var str2 = prompt("Nhap so thu hai" , "0");
var kq1, kq2 ;
kq1 = str1 + str2;
kq2 = eval(str1) + eval(str2);
document.write("kq1 = " + kq1);
document.write("kq2 = " + kq2);
155
 Hàm
 parseInt(strNum): trả về một số nguyên từ chuỗi strNum.
 Nếu cuối chuỗi strNum là các ký tự thì các ký tự này sẽ bị bỏ qua.
 Nếu strNum bắt đầu bằng ký tự chữ thì hàm trả về giá trị NaN
parseInt ("3.4") + parseInt ("4a")// 7
var kq, strNum;
strNum = "123.8";
kq = parseInt(strNum) //kq=123
strNum = "a123.8"
kq = parseInt(strNum) //kq=NaN
strNum = "123.8abc"
kq = parseInt(strNum) //kq=123
156
 Hàm
 parseFloat(strNum): trả về một số thực từ chuỗi strNum.
 Nếu cuối chuỗi strNum là các ký tự thì các ký tự này sẽ bị bỏ qua.
 Nếu strNum bắt đầu bằng ký tự chữ thì hàm trả về giá trị NaN
var strNum, kq;
strNum= "123.8";
kq = parseFloat(strNum) //kq=123.8
strNum = "a123.8"
kq = parseFloat(strNum) //kq=NaN
strNum = "123.8abc"
kq = parseFloat(strNum) //kq=123.8
157
 Hàm
 isNaN(str): kiểm tra tham số str có phải chuỗi ký tự hay không.
 Nếu str là các ký tự thì các ký tự  true
 Ngược lại  false
var s, kq;
s = "abc";
kq = isNaN(str) // kq nhận trị true
s = "24";
kq = isNaN(str) // kq nhận trị false
158
 Hàm: thiết lập thời gian thực thi
 setTimeout(): yêu cầu Javascript thực hiện tác vụ nào đó sau một khoảng thời
gian xác định. Hàm trả về trị id, xác định các timeout đã thiết lập.
 clearTimeout(): xóa timeout đã thiết lập.
 Ngược lại  false
idTimeout = setTimeout("command Javascript",milisecond);

clearTimeout(idTimeout) ;
159
 VD 1: Khi ta click chuột vào nút "Display timed alertbox!", hàm timedMsg()
được gọi thực thi. Hàm này gọi hàm setTimeout(), yêu cầu xuất hiện hộp
thoại thông báo '5 seconds!‘ sau khoảng thời gian 5s.
<html><head><script type="text/javascript">
function timedMsg() {var t = setTimeout("alert('5 seconds!')",5000);}
</script></head>
<body><form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body></html>
160
 VD 2: khi ta nhấn nút "Start count!", thì hàm timedCount() được gọi thực thi.
Hàm này làm xuất hiện hộp thoại thể hiện số đếm tăng dần từ 0, sau mỗi
khoảng thời gian 5 giây. Còn khi ta nhấn nút "Stop count!", thì hàm
stopCount() được gọi thực thi và làm dừng timeout đã thiết lập - ngừng xuất
hiện hộp thoại thể hiện số đếm.
var c=0 ; var t;
function timedCount() { alert(c); c=c+1;t=setTimeout("timedCount()",5000); }
function stopCount() { clearTimeout(t); }
</script></head><body> <form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="button" value="Stop count!" onClick="stopCount()">
</form> </body></html>
161
 Hàm: yêu cầu thực thi theo khoảng thời gian
 setInterval(): yêu cầu Javascript thực hiện tác vụ nào đó sau một khoảng thời
gian xác định. Hàm trả về trị id, xác định các interval đã thiết lập.
 clearInterval(): xóa interval đã thiết lập.
idInterval = setInterval("command Javascript", milisecond);

clearInterval(idInterval);
162
 Hàm: yêu cầu thực thi theo khoảng thời gian
 Ví dụ
<body> <script language=javascript>
var id = setInterval("alert('Chaoban')",10000);
function stopAlert(){clearInterval(id); }
</script>
<input type="button" onclick="stopAlert();"
value="Stop interval" />
</body>
163
 Cấu trúc điều khiển: IF
 Cho phép chương trình chọn một trong hai lựa chọn dựa trên một điều kiện
xác định.
 Dạng 1: Nếu điều kiện có kết quả true thì thực hiện khối lệnh Javascript,
ngược lại nếu điều kiện sai thì không làm gì cả.
if (điềukiện) { var toantu = "+";

//Khối lệnh JavaScript var x = 5; var y = 3; var kq;
} if (toantu == "+") {
kq = x + y;
document.write("Ket qua phep toan la
<b> " + kq + "</b>");
}
164
 Dạng 2: Nếu điều kiện có kết quả true thì thực hiện khối lệnh 1 ngược lại
thưc hiện khối lệnh 2.
if (điều kiện ) { var febDays = 0

// khối lệnh 1 var theYear = 1993
} if (theYear % 4 == 0) {
else { febDays = 29
// khối lệnh 2 }
} else {
febDays = 28
}
165
 Dạng 3: if lồng nhau.
if (điều kiện 1) { <script type="text/javascript"
Khối lệnh 1 language="/javascript">
} var ch = "a";
else if (điều kiện 2) { if (ch >= "A" && ch <= "Z")
Khối lệnh 2 document.write ("An upper case letter");
} else
else if (ch >="a" && ch <= "z")
{ document.write ("A lower case letter");
Khối lệnh 3 else document.write ("Not a letter");
} </script>
166
 Cấu trúc điều khiển: switch....case
 Có nhiều giá trị cần kiểm tra.
 Trong trường hợp không tìm thấy giá trị phù hợp, chương trình sẽ thực hiện
khối lệnh mặc định (default).
167
switch (biểu thức)
{
case giá-trị-1:
khối lệnh;
break;
case giá-trị-2:
khối lệnh;
break;
...
case giá-trị-n:
khối lệnh;
break;
default:
Khối lệnh;
}
168
var a = prompt("Nhap so a: ", "0");
var b = prompt("Nhap so b: ", "0");
var op = prompt("Nhap phep toan: ", "+");
Ví dụ: Viết đoạn JS var result = 0;
nhập 2 số a, b và phép switch (op){
toán (+ ,-,*,/). Sau đó case "+": result = eval(a) + eval(b); break;
in ra kết quả. case "-": result = a - b; break;
case "*": result = a * b; break;
case "/":
if (b == 0) alert (“Không thể chia cho 0");
else result = a / b;
break;
default: alert(“Không có phép toán này”); result = error;
}document.writeln("Kết quả:“+a+"“+op+“ "+b+"="+ result );
169
 Cấu trúc vòng lặp: for
 Sử dụng cấu trúc vòng lặp for khi cần lặp một đoạn mã lệnh một số lần đã
biết.
 Cú pháp :
for(khởi-tạo-biến-điềukhiển;điều-kiện;cập-nhật-biến-ĐK)
{ //Khối lệnh }
 Sau khi gán giá trị khởi đầu cho biến điều khiển, điều kiện của vòng lặp sẽ
được kiểm tra xem còn đúng không.
 Nếu điều kiện trả về kết quả đúng, thì sẽ thực hiện khối lệnh và cập nhật giá
trị của biến điều khiển.
 Nếu điều kiện sai, chương trình thoát khỏi vòng lặp.
170
 Cấu trúc vòng lặp: for
<script language="javascript" Ví dụ : viết đoạn mã tạo một

type="text/javascript" > table với 5 dòng, 5 cột.
var i,j;
document.write("<table width=100% border=1>")
for(j=1;j<=5;j++) {
document.write("<tr>");
for(i=1;i<=5;i++)
document.write("<td>" +j+"'"+i+"</td>")
document.write("</tr>") }
document.write("</table>")
</script>
171
 Cấu trúc vòng lặp: do...while
 Cú pháp :
do
{
// khối lệnh;
}
while (điều kiện)
 Khối lệnh trong phần do được thực thi ít nhất một lần, và nó sẽ tiếp tục được
thực thi nếu điều kiện đúng.
172
 Cấu trúc vòng lặp: do...while
Ví dụ: kiểm tra dữ liệu nhập có phải là một số hay không, nếu không phải là số thì yêu cầu nhập lại:
<script language="javascript"
type="text/javascript">
var userinput;
do {
userinput = prompt("Nhap vao mot so");
}
while (isNaN(userinput));
document.writeln("Ban da nhap vao so " +userinput);
</script>
173
 Cấu trúc vòng lặp: while
 Cú pháp :
while (điều kiện)
{
// Khối lệnh;
}
 Kiểm tra điều kiện trước, nếu điều kiện đúng thì khối lệnh sẽ được thực hiện.
174
 Cấu trúc vòng lặp: while
<script language="javascript"
var userinput;
while (isNaN(userinput)) {
userinput = prompt("Nhap vao mot so");
}
document.writeln("Ban da nhap vao so " + userinput);
</script>
175
 Cấu trúc vòng lặp: for...in
 Cú pháp :
for (biến in đối-tượng)
{
//khối lệnh;
}
 Lặp thông qua một mảng phần tử hay một tập thuộc tính của đối tượng.
 Ứng với mỗi phần tử hay thuộc tính, sẽ là một lần thực thi khối lệnh trong
vòng lặp for … in.
176
 Cấu trúc vòng lặp: for...in
var x;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW" ;
for (x in mycars) {
document.write(mycars[x] + "<br />") ;
}
</script>
177
 Lệnh break
 Ngừng thực hiện các mã lệnh của cấu trúc (ví dụ: switch) và chuyển sang
thực hiện câu lệnh ngay sau cấu trúc này.
 Lệnh break trong vòng lặp cũng làm việc tương tự.
178
 Lệnh break
<script language="javascript”
var userinput;
do
{ userinput = prompt("Nhập vào số bất kỳ, nhập 99 để thoát.")
if(isNaN(userinput) {
document.write("Dữ liệu không hợp lệ,
xin nhập vào một số ");
break; }
}
while ((userinput != 99 )
</script>
179
 Lệnh continue
 Câu lệnh continue thoát khỏi vòng lặp hiện thời và tiếp tục vòng lặp kế tiếp.
 Rất hữu ích khi ta muốn lặp qua một dãy giá trị, nhưng bỏ qua một số trị
không phù hợp.
Ví dụ:
<script language="javascript“ type="text/javascript">

var iNumber;
for (iNumber=1; iNumber <= 100; iNumber++){
if (iNumber % 11 >0){
continue; //không chia hết cho 11
}
document.write("<b>" + iNumber + "</b>");
document.write("chia hết cho 11! <br>");
}
</script> 180
 Đối tượng
 Javascript là một ngôn ngữ lập trình hướng đối tượng (Object
Oriented Programming – OOP).
 Đối tượng là một loại dữ liệu đặc biệt, có thuộc tính và phương thức.
 Thuộc tính (property): là các giá trị kết hợp với một đối tượng cụ thể.
 Phương thức (method): là các hành vi mà đối tượng có thể thực hiện.
 Truy xuất thuộc tính, phương thức
đốitượng.tênthuộctính; //window.document
đốitượng.tênphươngthức(); //document.write("Hello!!!");
181
 Đối tượng
 Tạo đối tượng: sử dụng từ khóa new.
 Ví dụ: var today = new Date();
 Các đối tượng thông dụng trong Javascript:
 String
 Date
 Math
 Array
 Mô hình đối tượng HTML Dom (Document Object Model for HTML)
182
 Đối tượng String
 Lưu trữ chuỗi kí tự, đồng thời cung cấp các thuộc tính và chức năng
để làm việc với chuỗi.
 Ví dụ: var myName = "Minh";
var myName = new String("Minh");
 length: trả về độ dài chuỗi.
183
 Các phương thức
184
185
186
187
 Ví dụ:
<script type="text/javascript"> <script type="text/javascript">
var str="Khoa THQL!" var str="Truong DH Kinh Te "
document.write("<p>" + str + "</p>") var pos=str.indexOf("DH");
document.write(str.length) if (pos>=0){
</script> document.write("Tim thay DH tai vi tri: ")
document.write(pos + "<br />") }
else
document.write("Khong tim thay tu DH!")
</script>
188
 Ví dụ:
var str="Hello world!";
var str=("khoa thql!");
document.write(str.match("world")+"<br/>");
document.write(str.toLowerCase()) ;
//world
document.write("<br>") ;
document.write(str.match("World")+"<br/>");
document.write(str.toUpperCase());
//null
</script>
document.write(str.match("worlld")+"<br/>");
//null
document.write(str.match("world!"));//world!
</script>
var str="Visit Microsoft!";
document.write(str.replace("Microsoft", "W3Schools"));
</script> 189
 Đối tượng Date
 Dùng để làm việc với ngày tháng.
 Khai báo: var my_date=new Date()
new Date("Month dd, yyyy hh:mm:ss")
new Date("Month dd, yyyy")
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)
190
 Ví dụ:
var my_date=new Date("October 12, 198813:14:00")
var my_date=new Date("October 12, 1988")
var my_date=new Date(88,09,12,13,14,00)
var my_date=new Date(88,09,12)
var my_date=new Date(500)
191
 Phương thức
192
 Phương thức
193
 Đối tượng Date <script type="text/javascript" language="javascript">
var myDate=new Date();
 Ví dụ: myDate.setFullYear(2007,1,14);
var today = new Date()
<script type="text/javascript" if (myDate > today)
language="javascript"> alert("Today is before 15th January 2007")
function getCurrentDate(){ else
var today = new Date(); alert("Today is after 15th January 2007")
return ("ngay "+ today.getDate() + </script>
" thang " + today.getMonth() +
" nam " + today.getFullYear());
}
document.write("Hom nay la: <br>" +
var d = new Date();
getCurrentDate());
document.write(d.getUTCDate()); </script>
</script>
194
 Đối tượng Math
 Cung cấp các chức năng toán học.
 Không cần khởi tạo một thực thể đối tượng Math, mà chỉ cần truy
xuất thuộc tính và phương thức trực tiếp từ đối tượng Math:
 Math.tên_thuộc_tính
 Math.tên_phương_thức()
195
 Thuộc tính
Thuộc tính Giá trị
E Hằng số Euler, khoảng 2,718.
LN2 logarit tự nhiên của 2, khoảng 0,693.
LN10 logarit tự nhiên của 10, khoảng 2,302.
LOG2E logarit cơ số 2 của e, khoảng 1,442.
PI Giá trị của , khoảng 3,14159.
SQRT1_2 Căn bậc 2 của 0,5, khoảng 0,707
SQRT2 Căn bậc 2 của 2, khoảng 1,414.
196
 Phương thức
abs(x) Trả về giá trị tuyệt đối của biến x
acos(x) Trả về giá trị arccosine của x
asin(x) Trả về giá trị asine của x
atan(x) Trả về giá trị arctangent của x
ceil(x) Trả về số nguyên lớn hơn hoặc bằng x
floor(x) Trả về số nguyên nhỏ hơn hoặc bằng x
round(x) Làm tròn số x
cos(x) Trả về giá trị cosine của x
197
 Phương thức
log(x) Trả về giá trị log của x
max(x,y) Trả về giá trị lớn nhất trong hai số x và y
min(x,y) Trả về giá trị nhỏ nhất trong hai số x và y
pow(x,y) Trả về giá trị x lũy thừa y
random() Trả về giá trị một số ngẫu nhiên từ 0 đến 1
sin(x) Trả về giá trị sine của x
sqrt(x) Trả về giá trị căn bậc 2 của x
198
 Ví dụ: tạo 10 số ngẫu nhiên trongkhoảng từ 5 – 30
function makeRandomNum()
{
var randomNum;
document.write("<h1>10 so ngau nhien
trong khoang tu 5 - 30: <br></h1>");
for (i=1; i<=10; i++)
{
randomNum = 5 +
Math.round(Math.random()*25);
document.write(I +". "+randomNum+"<br>");
}
}
199
 Đối tượng Array
 Cho phép lưu trữ nhiều giá trị với cùng một tên gọi.
 Mỗi phần tử mảng được phân biệt nhau qua chỉ số.
 Mảng được đánh chỉ số từ 0 đến n-1
 Khởi tạo mảng
var tên_mảng = new Array()
var tên_mảng = new Array(số_phần_tử_mảng)
var tên_mảng = new Array(phần_tử_1, phần_tử_2,… )
200
 Truy xuất phần tử mảng: tên_mảng[i]
 Ví dụ:
<script language="Javascript">
var imageArr = new Array(4);
imageArr[0] = "hinh1.gif";
var randomImageIndex=Math.round(Math.random()*3);
document.write("<img src='" + imageArr[randomImageIndex] + "'>");
</script>
201
 Thuộc tính length: thể hiện số phần tử của mảng.
 Phương thức:
202
 Phương thức:
203
 Ví dụ:
<html><body><script type="text/javascript">
var day = new Date();
var weekday = new Array(7);
weekday[0] = "Sunday“; weekday[1] = "Monday";
weekday[2] = "Tuesday“; weekday[3] = "Wednesday";
weekday[4] = "Thursday“; weekday[5] = "Friday";
weekday[6] = "Saturday“;
w=day.getDay(); d=day.getDate();
m=day.getMonth()+1; y=day.getFullYear();
document.write("Today is: " + weekday[w]+", " + d + " / " + m + " / " +y);
</script></body></html>
204
 Ví dụ:
var arr = new Array(3); var arr = new Array(3);
arr[0] = "Jani"; arr[1] = "Tove"; arr[0] = "Jani";
arr[2] = "Hege"; arr[1] = "Hege";
var arr2 = new Array(3); arr[2] = "Stale";
arr2[0] = "John"; arr2[1] = "Andy"; document.write(arr.join() + "<br />");
arr2[2] = "Wendy"; document.write(arr.join("."));
document.write(arr.concat(arr2)); </script>
</script>
205
 Ví dụ:
arr[0] = "Jani"; arr[0] = "Jani";
arr[2] = "Stale"; arr[2] = "Stale";
document.write(arr + "<br />"); document.write(arr + "<br />");
document.write(arr.pop() + "<br />"); document.write(arr.push("Kai Jim") + "<br
document.write(arr); />");
</script> document.write(arr);
</script>
206
 Ví dụ:
arr[0] = "Jani"; arr[0] = "Jani";
arr[2] = "Stale"; arr[2] = "Stale";
document.write(arr.reverse()); document.write(arr.shift() + "<br />");
</script> document.write(arr);
</script>
207
 Ví dụ:
arr[0] = "Jani“; arr[0] = "Jani";
arr[2] = "Stale“; arr[2] = "Stale";
arr[3] = "Kai Jim"; arr[3] = "Kai Jim";
arr[4] = "Borge“; arr[5] = "Tove"; arr[4] = "Borge";
document.write(arr.slice(2,4) + "<br />"); arr.splice(2,1,"Tove");
document.write(arr); document.write(arr);
</script> </script>
208
 Ví dụ: <script type="text/javascript">
<script type="text/javascript"> function sortNumber(a,b){
var arr = new Array(6); return a - b;
arr[0] = "Jani"; // nếu return b – a; thì sort cho thứ tự giảm dần.
arr[1] = "Hege"; }
arr[2] = "Stale"; var arr = new Array(6);
arr[3] = "Kai Jim"; arr[0] = "10“; arr[1] = "5“; arr[2] = "40";
arr[4] = "Borge"; arr[3] = "25“; arr[4] = "1000“;arr[5] = "1";
arr[5] = "Tove"; document.write(arr + "<br />");
document.write(arr + "<br />"); document.write(arr.sort(sortNumber));
document.write(arr.sort()); </script>
</script>
209
 Đối tượng Xây dựng đối tượng mới
 Sử dụng câu lệnh new Object()
var đối_tượng = new Object() ;
đối_tượng.thuộc_tính_1 = giá_trị;
…
đối_tượng.thuộc_tính_n = giá_trị;
đối_tượng.phương_thức_1 = function() {
//khối lệnh của phương thức
}
…
đối_tượng.phương_thức_n = function() {
}
210
 Khai báo trực tiếp giá trị của thuộc tính và phương thức:
var tên-đối-tượng = {
thuộc-tính-1 : giá-trị,
thuộc-tính-2: giá-trị, ……
thuộc-tính-n: giá-trị,
phương-thức-1 : function(){
}, …
phương-thức-n : function(){
}
};
211
 Từ khóa this: truy xuất đến giá trị của thuộc tính hoặc gọi một
phương thức của đối tượng
this.thuộc_tính
this.phương_thức <script language="JavaScript">
father = { firstname: "John",
lastname: "Doe“, age: 50,
info: function(){
alert("name: " + this.firstname + " " +
this.lastname + ", age: " + this.age); }
}; father.info();
</script>
212
 Ví dụ:
<script language="JavaScript">
person = new Object();
person.name = "Tim Scarfe";
person.height = "6Ft";
person.run = function() {
this.state = "running"
this.speed = "10km/h"
alert("state " + this.state + ", "+ this.speed);
}
person.run();
</script>
213
 Hàm khởi tạo: để tạo một thực thể của đối tượng
function đối_tượng(tham_số1, tham_số_2, …){
/* trị của thuộc tính có thể là tham số của hàm khởi
tạo hay một giá trị cụ thể nào đó */
this.thuộc_tính_1 = giá_trị;
this.thuộc_tính_2 = giá_trị; …………
this.phương_thức_1 = function() {
//khối lệnh của phương thức………… };
}
214
 Ví dụ:
<script language="JavaScript">
function cat(name) {
this.name = name;
this.talk = function() {
alert( this.name + " say meeow!" )
}
}
cat1 = new cat("felix");
cat1.talk(); //alerts "felix says meeow!"
cat2 = new cat("ginger");
cat2.talk(); //alerts "ginger says meeow!"
</script>
215
 HTML DOM (Document Object Model for HTML)
 Là mô hình đối tượng tài liệu (document) được hỗ trợ trong trình
duyệt.
 DOM định nghĩa tập chuẩn về cách truy xuất, thao tác các đối tượng
trong tài liệu HTML.
 DOM thể hiện tài liệu HTML ở dạng cấu trúc cây, với mỗi nút (node)
trên cây đại diện cho một phần tử HTML.
 Các nút nằm bên trong một nút được gọi là nút con, còn các nút thuộc
cùng mức được xem là nút anh em.
216
217
 window là đối tượng cao nhất trong mô hình DOM
 Các thuộc tính của đối tượng window:
 frames: trả về một mảng chứa các đối tượng frame thuộc cửa sổ.
 closed: cho biết cửa sổ đã được đóng hay chưa.
 defaultstatus: thiết lập hay lấy giá trị của dòng chữ mặc định hiển thị trên
thanh trạng thái. Thuộc tính này không hoạt động trong trình duyệt Firefox.
 document: đối tượng document.
 history: đối tượng history.
218
 Các thuộc tính của đối tượng window:
 length: số frame trong cửa sổ.
 location: đối tượng location, thể hiện địa chỉ của trang web đang hiển thị.
 name: tên cửa sổ.
 opener: tham chiếu đến cửa sổ tạo ra cửa sổ hiện tại.
 parent: cửa sổ cha (sử dùng khi truy xuất cửa sổ cha trong một frame con).
 self: tham chiếu đến cửa sổ hiện tại.
 status: dòng chữ hiển thị trên thanh trạng thái. Lưu ý, trình duyệt Firefox
không hỗ trợ thuộc tính này.
 top: cửa sổ cha cao nhất.
219
 Các phương thức của đối tượng window:
 alert("msg"): hiển thị hộp thoại thông báo.
 confirm("msg"): hiển thị hộp thoại xác nhận với hai nút Cancel và OK.
 prompt("msg","default-value"): hiển thị hộp thoại nhập liệu.
 setTimeout(func,millisec): thiết lập thời gian mili giây để gọi một hàm.
 clearTimeout(id): hủy timeout đã thiết lập.
 setInterval(func, millisec): thiết lập hàm thực hiện sau mỗi khoảng thời gian
 clearInterval(id): hủy interval đã thiết lập.
 print(): in trang web.
 moveBy(x,y): di chuyển cửa sổ đến một vị trí tương đối so với vị trí hiện tại dựa vào
khoảng cách x và y
220
 Các phương thức của đối tượng window:
 moveTo(x,y): di chuyển cửa sổ đến vị trí tuyệt đối trên màn hình
 resizeTo(x,y): thay đổi kích thước cửa số đến chiều rộng và cao xác định
 resizeBy(x,y): thay đổi kích thước cửa sổ một giá trị tương đối so với kích
thước hiện tại, trị x và y cho biết phải thay đổi chiều rộng và cao bao nhiêu.
 blur(): chỉ định cửa sổ hiện tại không còn giữ focus, không còn active.
 focus(): thiết lập focus cho cửa sổ.
 close(): đóng cửa sổ.
 open("url","tên-window","thuộc-tính"): mở cửa sổ mới.
221
 Phương thức window.open:
tên biến = window.open("url","tên-window",["thuộctính1=gt1,thuộctính2=gt2,… "]);
 url: đường dẫn đến tài liệu muốn mở trong cửa sổ mới.
 tên-window là giá trị cho thuộc tính name của cửa sổ mới. Tham số này có thể là:
 _blank : URL được nạp trong một cửa sổ mới (mặc định).
 _parent: URL được nạp vào frame cha.
 _self: URL thay thế trang đang hiển thị trong cửa sổ.
 _top: URL thay thế framset đã được nạp.
222
<html><head>Open New Window</head><body>
<form>
<input type="button" value="open second window"
onclick="msgwindow = window.open('','window2',
'resizable=no,width=200,height=200');"><br>
<a href="currentdate.html" target="window2">
load file currentdate into window2 </a> <br>
<input type="button" value="close second window"
onclick="msgwindow.close()">
</form>
</body></html>
223
Ví dụ : di chuyển cửa <html><head><script type="text/javascript">
sổ window vào giữa function centerWindow(){
màn hình var windowHeight = 400; var windowWidth = 400;
window.resizeTo(windowHeight, windowWidth);
var height = window.screen.availHeight;
var width = window.screen.availWidth;
var leftPosition =parseInt(width/2)-parseInt(windowWidth/2);
var topPosition= parseInt(height/2)-parseInt(windowHeight/2);
window.moveTo(leftPosition, topPosition); }
</script></head><body>
<h1> <font color="blue"> Nhan nut de di chuyen cua so vao
giua</font></h1>
<input type="button" value="center the window"
onclick="centerWindow()"/>
</body></html> 224
 Đối tượng navigator
 Thể hiện các thông tin về trình duyệt của người dùng thông qua các thuộc tính và
phương thức.
appCodeName: mã tên của trình duyệt.
appName: tên trình duyệt.
appVersion: phiên bản của trình duyệt.
browserLanguage: ngôn ngữ hiện tại của trình duyệt.
platform: nền của hệ điều hành.
javaEnabled(): cho biết trình duyệt có hỗ trợ Javascript hay không.
225
 Đối tượng navigator
<html> <body><script type="text/javascript">
var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("Version=" + x.appVersion);
document.write("Platform=" + x.platform);
document.write("BrowserLanguage=“ + x.browserLanguage);
</script></body> </html>
226
 Đối tượng location
 Thực chất không phải là đối tượng HTML DOM, mà là một đối tượng Javascript.
 Thuộc tính và phương thức của đối tượng location:
href: thể hiện url của trang web.
reload(): nạp lại trang web hiện tại.
replace(): thay thế nội dung hiện tại bằng mộttrang web mới.
Ví dụ: Tải lại nội dung trang
function reloadPage(){ window.location.reload();}
<input type="button" value="Reload page"onclick="reloadPage()" />
</body></html> 227
 Đối tượng history
 Thực chất không phải là đối tượng HTML DOM, mà là một đối tượng Javascript.
 Thuộc tính và phương thức của đối tượng history:
length: số lượng URL mà người dùng đã truy cập.
backward(): nạp URL trước đó trong danh sách URLhistory.
forward():nạp URL kế tiếp trong danh sách URLhistory.
go(number|URL): nạp một URL cụ thể trong danh sáchURL history.
Ví dụ: sử dụng hàm go()
function goBack() {window.history.go(-1);}
<input type="button" value="Back"onclick="goBack()" /> </body></html> 228
 Đối tượng document
 Dùng để truy xuất mọi thành phần trong trang.
 anchors: trả về mảng chứa tất cả các tên bookmark trong tài liệu.
 forms: trả về mảng chứa tất cả đối tượng form trong tài liệu.
 images: trả về mảng chứa tất cả đối tượng ảnh trong tài liệu.
 links: trả về mảng chứa tất cả đối tượng liên kết trong tài liệu.
 body: phần tử body của trang.
229
 title: tựa đề của tài liệu.
 alinkcolor: màu của liên kết đang được kích hoạt.
 vlinkcolor: màu của liên kết đã được chọn.
 linkcolor: màu của liên kết trong tài liệu.
 bgcolor: màu nền của tài liệu.
 fgcolor: màu của văn bản trong tài liệu.
 location: thể hiện địa chỉ của document.
230
 getElementById(id): trả về phần tử HTML thuộc tài liệu, và có id tương ứng.
 getElementsByName(name): trả về một mảng gồm các phần tử HTML có tên tương ứng.
 getElementsByTagName(tagname): trả về một mảng các phần tử HTML có tên thẻ tagname đã
chỉ định.
231
 document.write("str"): ghi một dòng văn bản vào tài liệu.
 document.writeln("str"): ghi một dòng văn bản vào tài liệu, có kèm thêm dấu xuống dòng.
 open("text/html", replace): tạo nội dung mới cho tài liệu, dùng kết hợp với hàm
document.write().
 close(): đóng tài liệu sau khi đã dùng hàm open() bên trên.
232
Ví dụ: Khi người dùng nhấn vào nút "Open and write to a new document", nội dung trong trang hiện tại được thay
thế bằng nội dung mới.
function createNewDoc() {
var newDoc=document.open("text/html","replace");
var txt="<html><body>Learning about the DOM is FUN!" +"</body></html>";
newDoc.write(txt);
newDoc.close(); }
<input type="button" onclick="createNewDoc()"
value="Open and write to a new document">
</body></html>
233
 Đối tượng frame
 Đại diện cho một phần tử HTML frame.
 Lấy mảng tất cả các frame: var allframes = window.frames;
 Để truy xuất đến một frame xác định trong trang tài liệu.
var myframe = window.frames[i];
var myframe = window.frames['ten_frame'];
var myframe = window.tenframe;
var myframe = window.document.getElementById(frame_id);
234
 Truy xuất đối tượng cửa sổ cha cấp trên từ một trang tài liệu thuộc frame con, ta
dùng thuộc tính parent
 frameBorder=1|0: cho biết có hiển thị đường biên của frame hay không.
 name: tên frame.
 scrolling=yes|no: cho biết hiển thị thanh cuộn hay không.
 src=URL: địa chỉ của tài liệu hiển thị bên trong frame.
 noResize=true|false: cho biết có thể thay đổi kích thước frame hay không.
235
 Tạo trang web gồm 2 frame trái và phải với nội dung hiển thị như bên dưới. Khi
nhấn các nút trong frame trái, thì frame phải sẽ thay đổi nội dung hiển thị.
236
 Đối tượng form
 Lấy mảng chứa tất cả fomr: var allforms = document.forms
 Truy xuất một form nào đó:
var aform = document.forms[i];
var aform = document.forms['ten_form'];
var aform = document.tên_form;
 Truy xuất form thông qua hàm getElementById()
var aform = document.getElementById('form-id')
237
 Thuộc tính
 elements: mảng chứa tất cả phần tử trên form.
 action: giá trị của thuộc tính action của thẻ <form>.
 id: id của form.
 length: số phần tử thuộc form.
 target: giá trị của thuộc tính target của thẻ <form>.
 Phương thức
 reset(): thiết lập giá trị của các điều khiển trên form vềtrị mặc định ban đầu.
 submit(): submit form.
238
 Truy xuất phần tử của form
document.tên_form.elements[0]
document.tên_form.elements['tên-phần-tử']
document.tên_form.tên-phần-tử
 Truy xuất nội dung văn bản
phần-tử.innerText
phần-tử.textContent
 Truy xuất nội dung gồm cả văn bản và HTML
phần-tử.innerHTML
239
 Truy xuất phần tử của form: nội dung thẻ
<html> <p id="test">example text</p>
<form>
<input id="click" type="button” value="click“onclick="changeText();"> </form>
<script language="javascript">
function changeText() {
document.getElementById("test").innerText ="Dynamically built text";
window.alert("See the new text");
document.getElementById("test").innerHTML = "Dynamically built <b>html</b>";
window.alert("See the new html"); } </script></html>
240
 Truy xuất phần tử của form: giá trị
<html><head> <script type="text/javascript">

function alertValue(){
alert(document.getElementById("text1").value) }
</script></head> <body> <form>
<input type="text" id="text1" value="Hello world!" />
<input type="button" id="button1" onclick="alertValue()"
value="Show default value" />
</form></body></html>
241
 Ví dụ: Thiết kế form login, kiểm tra người dùng có nhập đầy đủ các thông tin cần
thiết trước khi submit hay không.
242
 Tính chất được chọn của phần tử checkbox, radio button: checked
phần-tử.checked
<html><head> <script type="text/javascript">
function check() {document.getElementById("check1").checked=true }
function uncheck() {document.getElementById("check1").checked=false }
</script></head>
<body> <form>
<input type="checkbox" id="check1" />
<input type="button" onclick="check()"value="Check Checkbox" />
<input type="button" onclick="uncheck()“ value="Uncheck Checkbox" />
243
 Truy xuất phần tử hộp chọn dropdown box.
 options: trả về một mảng chứa các chọn lựa của hộp chọn select:
đối-tượng-select.options
 selectedIndex: trả về chỉ số của option được chọn.
đối-tượng-select.selectedIndex
 length: số chọn lựa option trong hộp chọn select.
 selected=true/false: cho biết option có được người dùng chọn hay không.
đối-tượng-option.selected
244
 HTML DOM (Document Object
Model for HTML)
 Truy xuất phần tử hộp chọn dropdown box.
 BT1: Hiển thị giá trị của các thành phần
đang được chọn trong hộp select box.
 BT2: Tạo trang web có hộp chọn lựa như
hình dưới. Khi người dùng có thể chọn
nhiều quốc gia và nhấn nút 'chọn' thì in ra
tên các quốc gia này trong textarea phía
dưới.
245
 Thuộc tính readonly và disabled
 readonly: người dùng chỉ được xem, không thể chỉnh sửa nội dung của phần tử. Thuộc tính này
chỉ được hỗ trợ trong phần tử textfield và textarea.
 disabled: cũng có tính chất gần giống như readonly nhưng mạnh hơn. Người dùng không thể
chọn văn bản bên trong textfield để copy, và thậm chí dữ liệu của phần tử disabled không được
gửi đi khi submit,...
246
 Thuộc tính readonly và disabled
function disableField(){
document.getElementById("text1").disabled=true; }
</script></head>
<body>
<form>
<input type="text" id="text1" value="Hello world!" />
<input type="button" id="button1“ onclick="disableField()“ value="DisableText
field"/>
247
 Đối tượng style
 Đại diện cho mẫu định dạng CSS.
 Cú pháp: phần-tử.style.thuộc-tính-CSS
Ví dụ: Định dạng màu và nền cho trang
function changeStyle(){
document.body.style.backgroundColor="#FFCC80";
document.body.style.backgroundImage="url(bgdesert.jpg)“; }
</script></head>
<body> <input type="button" onclick="changeStyle()“ value="Set background-image" />
</body></html>
248
 Sự kiện (event)
 Các hành động xảy ra trên trang web, được nhận biết bởi Javascript.
 Các sự kiện này sẽ kích hoạt các đoạn code xử lý sự kiện tương ứng.
 Phân nhóm sự kiện
 Giao diện người dùng: xảy ra khi các điều khiển hoặc đối tượng trên trang web nhận hoặc mất
tiêu điểm (focus).
 Chuột: xảy ra khi người dùng di chuyển hoặc nhấp chuột.
 Bàn phím: xảy ra khi người dùng nhấn hoặc nhả một phím trên bàn phím.
 HTML: gắn liền với một số phần tử HTML nhất định (ví dụ như sự kiện onsubmit)
249
 Quản lý sự kiện
 Chỉ định sự kiện và đoạn code xử lý trong thẻ HTML.
 Ví dụ: <input type="button" value="Hello“ onClick="alert("Chào ta !!!");" >
 Chỉ định sự kiện và đoạn code xử lý bằng lệnh Javascript.

đốitượng.biếncố = hàm-xử-lý-biến-cố;
đốitượng.biếncố = function(){hàm-xử-lý-biến-cố(); };
250
 Quản lý sự kiện
<body>
<input type="button" value="Kiểm tra tuổi“ id="btnCheck">
<script type="text/javascript" language="javascript">
var btn = document.getElementById("btnCheck");
btn.onClick = CheckAge;
function CheckAge(){alert("Kiểm tra tuổi … ");
</script>
</body>
251
 Quản lý sự kiện: giao diện
 onactivate: xảy ra khi thành phần form ở trạng thái hoạt động active.
 onblur: xảy ra khi 1 thành phần thuộc form mất focus.
 onfocus: xảy ra khi 1 thành phần của form nhận focus.
 Trình tự chuyển focus từ đối tượng 1 sang đối tượng 2
 Đầu tiên, biến cố activate xảy ra trên đối tượng 2.
 Kế tiếp, biến cố blur xảy ra trên đối tượng 1.
 Cuối cùng là biến cố focus trên đối tượng 2.
252
 Quản lý sự kiện: giao diện
<html><head> <script type="text/javascript"language="javascript">
function upd(str){document.forms[0].statusbox.value += str +";“; }
</script> </head>
<body> <form
txt1: <input type=text name=txt1 onblur="upd('blur textbox 1')" /> <br>
txt2: <input type=text name=txt2 onfocus="upd('focus textbox 2')"
onactivate="upd('active textbox 2')" /> <br>
Thu tu xay ra su kien: <br>
<textarea rows="7" cols="70" name="statusbox"> </textarea>
</form> </body> </html>
253
 Quản lý sự kiện: chuột
 onmousedown: biến cố xảy ra khi nhấn nút chuột.
 onmouseup: xảy ra khi nhả nút chuột.
 onmouseover: xảy ra khi chuột nằm trên một thành phần HTML.
 onmouseout: xảy ra khi chuột di chuyển ra khỏi thành phần HTML
 onmousemove: biến cố xảy ra khi di chuyển chuột.
 onclick: biến cố xảy ra khi click chuột (gồm cả hai thao tác nhấn và nhả chuột).
 ondblclick: xảy ra khi nhấp đúp chuột (doubleclick).
254
 Quản lý sự kiện: bàn phím
 onkeydown: biến cố xảy ra khi nhấn phím.
 onkeypress: biến cố xảy ra khi nhấn và nhả phím.
 onkeyup: biến cố xảy ra khi nhả phím.
 Khi người dùng gõ một phím trên bàn phím, thì thứ tự xảy ra các biến cố này như sau:
onkeydown, onkeypress và cuối cùng là onkeyup.
255
 Quản lý sự kiện: bàn phím
<html><head><script type="text/javascript"language="javascript">
function print(str){
document.forms[0].status.value += str + "\n";
} </script>
<body><form>
<input type="text" name="txt"onkeypress="print('keypress')”
onkeydown="print('keydown')”
onkeyup="print('keyup')"> <br> Thu tu cac su kien:
<br> <textarea rows="7" cols="70" name="status“>
</textarea> </form> </body> </html>
256
 Quản lý sự kiện: HTML
 onload: xảy ra khi trang Web được tải hoàn toàn trong cửa sổ trình duyệt.
 onunload: xảy ra khi trình duyệt chuẩn bị loại bỏ trang Web hiện tại (đóng trình duyệt, thay đổi
địa chỉ trang web.
 onsubmit: xảy ra khi người dùng nhấn nút submit trên form, sự kiện submit sẽ xảy ra ngay trước
khi form được gửi đi.
 onreset: xảy ra khi người dùng nhấn nút reset trên form.
 onselect: xảy ra khi người dùng chọn văn bản phía trong một hộp văn bản (textfield) hay vùng
văn bản (textarea).
257
 onchange: xảy ra khi một điều khiển mất tiêu điểm (focus) và giá trị của nó bị thay đổi.
 onscroll: trên các đối tượng có thể cuộn, sự kiện scroll xảy ra khi thanh cuộn của đối tượng bị
thay đổi.
 onabort: xảy ra khi trình duyệt ngừng tải một hình ảnh trên trang web. (có thể xảy ra do người
dùng nhấn nút Stop trên trình duyệt, hay nhấp vào một liên kết để chuyển đến trang web khác)
 onresize: xảy ra khi một đối tượng sắp bị thay đổi kích thước, ví dụ cửa sổ trình duyệt bị thay
đổi bởi người dùng.
 onerror: xảy ra khi có lỗi trong lúc trang web đang được tải xuống.
258
<html><head> <script type="text/javascript"

language="javascript">
function checkage(){
var age = document.getElementById("age").value;
var name = document.getElementById("name").value;
if (age<18) alert("Chào "+ name + ", bạn chưa đủ tuổi để làm việc !");
else alert("Chào "+ name + " xin bạn vui lòng nộp đơn và chờ phỏng vấn!"); }
</script> </head><body>
Name: <input type="text" id="name" /><br><br>
Age: <input type="text" id="age“ onchange="checkage()"/></body></html>
259
 Kích hoạt sự kiện
 Gọi chức năng gắn liền với sự kiện.
 Gọi chức năng fireEvent để kích hoạt sự kiện.
260
 Kích hoạt sự kiện: Gọi chức năng gắn liền với sự kiện.
function clickme(){
alert("Submit form ...");
document.forms[0].submit(); }
<form action="#" method="get">
Xin vui long nhap ho ten cua ban:
<input type="text" name="fullname"><br><a href="Javascript:clickme()">
Nhan vao day de gui form di</a> </form></ body></html>
261
 Kích hoạt sự kiện: Gọi chức năng fireEvent
<html><head><script type="text/javascript" language="javascript">

function click(){
var bt = document.getElementById("btn");
bt.fireEvent("onclick"); }
<input type="button" id="btn" value="Welcome"onclick="alert('Welcome to website!');">
<a href="Javascript:click();"> Click here to fire clickevent on Welcome button … </a> </body></html>
262
Web Media
 Biểu diễn kỹ thuật số của ảnh
 Các văn bản và hình ảnh xuất hiện trên màn hình bao gồm những điểm ảnh nhỏ có
màu trên một lưới 2 chiều.
 Việc biểu diễn kỹ thuật số của ảnh đề cập đế việc biểu diễn thông tin dưới dạng số.
 Các ký tự biểu diễn dưới dạng số 8-bit (ASCII) hoặc 16-bit (UNICODE)
 Các ký tự là hữu hạn, hình ảnh là vô hạn
 Hai loại ảnh cơ bản
 Raster: hình ảnh được chia thành một lưới hai chiều gồm các ô vuông màu.
 Vector: bao gồm các đối tượng như đường thẳng, đường tròn, đường cong Bezier và đa giác.
263
Web Media
 Biểu diễn kỹ thuật số của ảnh
Vector
Raster
264
Web Media
 Các mô hình màu
 Named Colours
 RGB (Red Green and Blue)
 CMYK (Cyan-Magenta- Yellow-Key (or blacK))
 HSL/HSB (Hue, Saturation, Lightness/Brightness)
265
Web Media
 Các mô hình màu: RGB
 6 số thập lục phân
 #RRGGBB
266
Web Media
 Các mô hình màu: CMYK
 C = Cyan (xanh)
 M = Magenta (hồng)
 Y = Yellow (vàng)
 K = Black (Đen)
 3 màu Cyan, Magenta và Yellow
khi kết hợp sẽ tạo ra một màu đen.
267
Web Media
 Các mô hình màu: HSL/HSB
 Hue: Màu sắc
 Saturation: Độ bảo hòa
 Brightness(HSB): Độ tối
 Lightness(HSL): Độ sang
 Trong CSS: hsl(hhh, ss%, bb%)

 hhh=0360
268
Web Media
 Độ mờ (Opacity)
 Mức độ trong suốt của màu
sắc
 Giá trị từ 0%100% (0
(trong suốt)  1(hoàn toàn
mờ đục))
269
Web Media
 Các khái niệm về hình ảnh
 Độ sâu màu: đề cập đến số lượng màu tối đa mà một hình ảnh có thể chứa.
 Đối với hình ảnh raster, giá trị này được xác định bởi số lượng bit được sử
dụng để thể hiện thông tin màu sắc hoặc tông màu cho từng pixel trong hình
ảnh.
270
Web Media
 Kích thước ảnh: Số lượng pixel của ảnh (pixel rộng x pixel cao).
 Thay đổi kích thước hình ảnh: yêu cầu nội suy (nghĩa là thêm hoặc xóa
pixel).
 Độ phân giải màn hình: số lượng pixel thiết bị có thể hiển thị.
271
Web Media
272
Web Media
 Định dạng file: JPEG, GIF, PNG, SVG
 JPEG (Joint Photographic Experts Group): định dạng tệp 24-bit, màu sắc
trung thực, lý tưởng cho ảnh chụp.
 GIF (Graphic Interchange Format): định dạng hình ảnh đầu tiên được hỗ trợ
bởi các trình duyệt web, định dạng 8 bit trở xuống, chứa không quá 256 màu!
 PNG (Portable Network Graphics): nén không mất dữ liệu.
 SVG (Scalable Vector Graphics): ảnh SVG không giảm chất lượng khi phóng
to hoặc thu nhỏ các tệp thực sự là các tệp XML.
273
Web Media
 Âm thanh và video
 Với HTML5, có thể thêm các tính năng phương tiện này vào HTML mà
không cần plug-in
 Mã hóa
 web-based video: H.264, Theora, VP8
 web-based audio: mp3, aac, vorbis
 Định dang Container
 Chỉ định cách thông tin đó được lưu trữ trong một tệp và cách các thông tin khác nhau
trong đó được đồng bộ hóa.
274
Web Media
 Trình duyệt hỗ trợ video
 MP4 container với H.264 Video và AAC Audio: .mp4, .m4v
 WebM container với VP8 video và Vorbis audio: .webm
 Ogg container với Theora video và Vorbis audio: .ogv
275
Web Media
 Trình duyệt hỗ trợ audio
 mp3
 WAV
 Ogg
 Webm
 m4a
276
Web Media
 HTML 5 Canvas
 Phần tử <canvas> có thể được sử dụng để tạo hoạt ảnh, trò chơi và các hình
thức tương tác khác.
 Có nhiều thư viện JavaScript chuyên dụng như KineticJS, EaselJS và
Fabric.js để hỗ trợ quá trình tạo <canvas> và các trang web dựa trên
JavaScript
277
Lập trình Responsive Web Design
 Là kỹ thuật thiết kế web đáp ứng với nhiều kích cỡ giao diện trên
nhiều thiết bị khác nhau
 Đáp ứng nhiều kích cỡ ở đây có nghĩa là trên mọi thiết bị đều phải
chạy toàn màn hình (full screen), không bị vỡ giao diện và ẩn mất đi
một số vị trí nào và không phải sử dụng chức năng zoom để xem
278
 Responsive menu
279
 Responsive column
280
 Responsive font size
281
 Sử dụng gì để tạo Responsive cho Website
CSS CSS3
// Trình duyệt nhỏ // Trình duyệt nhỏ có width là bé hơn hoặc bằng 768px
#sidebar @media only screen and (max-width: 768px)
{ {
width: 100% #sidebar{width: 100%}
} }
// Trình duyệt lớn // Trình duyệt nhỏ có width là lớn hơn 768px
#sidebar @media only screen and (min-width: 769px)
{ {
width: 300px #sidebar{width: 300px}
} }
282
 Sử dụng gì để tạo Responsive cho Website
Javascript
$(window).resize(function(){
var width = $(window).width();
if (width <= 768)
{
$('body').append('<link href="mobile.css"/>');
}
else
{
$('body').append('<link href="desktop.css"/>');
}
283
 @media CSS
 một tính năng mới của CSS3, cho phép tùy chỉnh CSS cho nhiều thiết bị khác
nhau từ máy tính cho đến điện thoại smart phone và các thiết bị in ấn.
 Cú pháp
@media not|only mediatype and (media feature)
{
CSS-Code;
}
 Mediatype
 all: Dùng cho mọi thiết bị
 print: Dùng cho máy in
 screen: Dùng cho máy tính và các thiết bị smart phone
284
 @media CSS
 media featured
aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport device-width: Chiều rộng của device
min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao height: Chiều cao của viewpor
của viewport width: Chiều rộng của viewport
max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao max-width: Chiều rộng tối đa của viewport
của viewport min-width: Chiều rộng tối thiểu của viewport
color: Số bits cho mỗi màu sắc của device max-height: Chiều cao tối đa của viewport
color-index: Số lượng màu sắc device có thể hiển thị min-height: Chiều cao tối thiểu của viewport
device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của min-device-width: Chiều rộng tối thiểu của device
device max-device-width: Chiều rộng tối đa của device
max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều min-device-height: Chiều cao tối thiểu của device
cao của device max-device-height: Chiều cao tối đa của device
min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và orientation: Định hướng của khung nhìn
chiều cao của device resolution: Độ phân giải của thiết bị đầu ra
device-height: Chiều cao của device
285
 @media CSS
 Sử dụng @media để tạo Responsive Website
VD: Tạo responsive cho layout: Nếu kích thước trình duyệt nhỏ hơn 769px thì hiển thị
1hàng dọc ngược lại thì hiển thị hai hàng dọc
@media only screen and (max-width: 768px){

.left, .right{
float: none;
width: 100%;
}
}
286
 @media CSS
 Sử dụng @media để tạo Responsive Website
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait */
/* Portrait and Landscape */ @media only screen
@media only screen and (min-device-width: 320px)
and (min-device-width: 320px) and (max-device-width: 480px)
and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)
and (-webkit-min-device-pixel-ratio: 2) { and (orientation: portrait) {
} }
287
Sử dụng TWITTER BOOTSTRAP
 bootstrap 3
 Phát triển giao diện website nhanh chóng
 Dễ học & dễ sử dụng
 Tính năng Responsive
 Tương thích với trình duyệt
 Dễ dàng tùy biến
288
 bootstrap 3
 Phát triển giao diện website nhanh chóng
 Dễ học & dễ sử dụng
 Tính năng Responsive
 Tương thích với trình duyệt
 Dễ dàng tùy biến
289
 Ứng dụng cơ bản
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example of Twitter Bootstrap 3 Grid System</title>
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
290
<body> <div class="col-md-3">
<div class="container"> <aside>Right (3 cột)</aside>
<div class="row grid-demo"> </div>
<div class="col-md-12"> <div class="col-md-6">
<header>Header (12 Cột)</header> <footer>Footer (6 cột)</footer>
</div> </div>
<div class="col-md-3"> <div class="col-md-6">
<section>Left Menu (3 cột)</section> <footer>Footer (6 cột)</footer>
</div> </div>
<div class="col-md-6"> </div>
<article>Content (6 cột)</article> </div>
</div> </body>
291
<style type="text/css">
*{padding: 0; margin: 0;}
header{ background: blue; margin-top: 15px; height: 150px; line-height: 150px; color: white; font-weight: bold;
font-size: 32px; text-align: center;}
section{ background: blue; margin-top: 5px; height: 250px; color: white; line-height: 250px; font-size: 32px;
text-align: center;}
article{ background: blue; margin-top: 5px; height: 250px; line-height: 250px; color: white; font-size: 32px;
text-align: center;}
aside{ background: blue; margin-top: 5px; height: 250px; line-height: 250px; color: white; font-size: 32px; text-
align: center;}
footer {background: blue; margin-top: 5px; height: 30px; line-height: 30px; color: white; font-weight: bold;
font-size: 32px; text-align: center;}
</style>
292
293
 Lưu ý khi dùng bootstrap
 Phải nạp các file của bootstrap vào file html.
 Mọi thành phần html đều nằm trong class .row và nó được bao bọc bên trong
bởi class .container. Dây là 2 class bắt buộc phải có khi làm việc với
bootstrap
294
 Tạo bảng trong bootstrap 3
<table class="table"> <table class="table table-striped">
<thead> <table class="table table-bordered">
<tr> <table class="table table-hover">
<th>STT</th><th>Họ Tên</th><th>Giới
tính</th><th>Email</th><th>Địa ch ỉ</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td><td>Mạnh
Tuấn</td><td>Nam</td><td>tuannm@ueh.edu.vn</td>
<td>179 Nguyễn Đình Chiểu</td>
</tr>
</tbody>
</table>
295
 Breadcrumbs trong bootstrap 3
<body>
<div class="example">
<div class="container">
<div class="row">
<ul class="breadcrumb">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Bootstrap</a></li>
<li class="active">Breadcrumb</li>
</ul>
</div>
</div>
</div>
</body>
</html>
296
 Ảnh trong bootstrap 3
 Class img-rounded (Bo góc)
 Class img-circle (Tròn)
 Class img-thumbnail (Thu nhỏ)
297
 Label trong bootstrap 3
<div class="row">
<p>Đây là <span class="label label-default">Default</span> label.</p>
<p>Đây là <span class="label label-primary">Primary</span> label.</p>
<p>Đây là <span class="label label-success">Success</span> label.</p>
<p>Đây là <span class="label label-info">Info</span> label.</p>
<p>Đây là <span class="label label-warning">Warning</span> label.</p>
<p>Đây là <span class="label label-danger">Danger</span> label.</p>
</div></div></div>
298
 Panel trong bootstrap 3
 panel-default (Class này bắt buộc phải khai báo chung với class panel)
 panel-heading (Hiển thị phần bao bọc đoạn tiêu đề)
 panel-body (Phần nội dung bên trong khung)
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Học bootstrap 3</div>
<div class="panel-body">Đây là nội dung khóa học</div>
</div>
</div>
</div>
299
 Panel trong bootstrap 3
 panel-primary ( Hiển thị màu xanh dương đậm)
 panel-success (Hiển thị màu xanh lá)
 panel-warning (Hiển thị màu cam)
 panel-info (Hiển thị màu xanh dương nhạt)
 panel-danger (Hiển thị màu đỏ)
<div class="panel panel-primary">

<div class="panel-heading">
<h3 class="panel-title">Học bootstrap 3</h3></div>
<div class="panel-body">Nội dung khóa học ^^</div>
</div>
300
 Form trong bootstrap 3
 Vertical Form (Form dọc)
 Horizontal Form (Form Ngang)
 Inline Form (Form Thường).
 Lưu ý
 Mọi thành phần bên trong form đều được bao quanh bởi cặp thẻ form
 Bên trong nó là class form-group
 Bên trong thành phần input được định nghĩa bằng class form-control
301
 Form trong bootstrap 3
<body><div class="example"><div class="container"><div class="row">
<h2>Horizontal Form</h2>
<form class="form-horizontal"><div class="form-group">
<label class="control-label col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" placeholder="Email">
</div></div><div class="form-group">
<label class="control-label col-xs-2">Mật Khẩu</label>
<div class="col-xs-10">
<input type="password" class="form-control" placeholder="Password">
</div></div>
<div class="form-group"><div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-primary">Đăng Nhập</button>
</div></div>
</form>
</div></div></div></body>
302
 Button trong bootstrap 3
<body>
<div class="row">
<h2>Định nghĩa các class buttons</h2>
<button type="button" class="btn btn-default">Default Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
<button type="button" class="btn btn-info">Info Button</button>
<button type="button" class="btn btn-warning">Warning Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-link">Link Button</button>
</div></div></div></body>
303
 Dropdown menu trong bootstrap 3
<div class="dropdown">
<a data-toggle="dropdown" href="">Dropdown<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Codeigniter</a></li>
<li><a href="#">Zend Framework</a></li>
<li><a href="#">Laravel</a></li>
<div class="divider"></div>
<li><a href="#">Symfony</a></li>
<li><a href="#">Phalcon</a></li>
<li><a href="#">Yii</a></li>
</ul>
</div>
304
 Tabs trong bootstrap 3
<ul class="nav nav-tabs">
<li><a href="#home" data-toggle="tab">HOME</a></li>
<li><a href="#info" data-toggle="tab">PROFILE</a></li>
<li><a href="#contact" data-toggle="tab">CONTACT</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">Trang Chủ</div>
<div class="tab-pane" id="info">Thông Tin</div>
<div class="tab-pane" id="contact">Liên Hệ</div>
</div>
305
 Jumbotron trong bootstrap 3
 class dùng để tạo ra một bạckground màu xám, bọc các nội dung ở bên trong,
thường được dùng để mô tả thông tin quan trọng như là khuyến mãi, giới
thiệu sản phẩm mới.
<div class="jumbotron">
<h1>Khóa học bootstrap 3</h1>
<p>Bootstrap là một thư viện CSS và JS được sử dụng.</p>
<p><a href=“bis.ueh.edu.vn" target="_blank" class="btn btn-primary btn-lg">Học Ngay</a></p>
</div>
306
 Progress bar trong bootstrap 3
 progress-striped ( Thanh tiến trình có lằn sọc ngang xung quanh)
 progress-bar-success (Màu xanh lá cây)
 progress-bar-info ( Màu xanh dương nhạt)
 progress-bar-warning (Màu cam)
 progress-bar-danger (Màu đỏ)
<div class="col-md-12">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
</div>
307
JQery
 Giới thiệu
 Đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên web.
 Giúp tiết kiệm thời gian và công sức so với cách viết javascript thông thường.
 Jquery chỉ là 1 trong những thư viện phổ biến nhất
 Được sử dụng bở các công ty lớn (Google, Microsoft, IBM, Netflix)
 Được xây dựng bởi cả cộng đồng.
 Chạy tốt trên mọi trình duyệt.
308
JQery
 Đặc điểm chính
 Tương tác HTML DOM.
 Tương tác CSS
 Tùy biến các sự kiện trong HTML
 Xử lý các hiệu ứng trên trang
 Hỗ trợ AJAX (Asynchronous JavaScript and XML)
309
JQery
 Sử dụng Jquery trong HTML
 Download thư viện jquery từ jquery.com sau đó copy vào thư mục website
của bạn.
<head><script src=“jquery-1.11.1.min.js"></script></head>
 Jquery CDN (Content Delivery Network)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
310
JQery
 Cú pháp
 Jquery được sử dụng để chọn các phần tử HTML và biểu diễn một vài hành
động trên những phần tử đó.
 Cú pháp cơ bản: $(selector).action()
 $: định nghĩa jQuery.
 (selector): tìm phần tử HTML.
 action(): sự kiện thể hiện trên các thành phần.
311
JQery
 Cú pháp
<!DOCTYPE html> $("#btnOuch") chọn phần tử có ID là btnOuch
<html><head> click() ánh xạ tới sự kiện click trên phần tử được chọn
<title>Fun with jQuery</title>
<script src="jquery.js"></script>
</head>
<body>
<h2>Hello, jQuery!</h2>
<button id='btnOuch'>Say Ouch</button>
<script>
$("#btnOuch").click(function(){
alert("Ouch! That hurt.");
});
</script>
</body></html>
312
JQery
 jQuery Selectors
Syntax Description
$(this) Phần tử HTML hiện tại
$("p") Tất cả thẻ <p>
$("p.intro") Tất cả thẻ <p> với tên lớp class="intro"
$(".intro") Tất cả thành phần tử có tên lớp class="intro"
$("#intro") Phần tử đầu tiên có id="intro"
$("ul li:first") Phần tử <li> đầu tiên của mỗi thẻ <ul>
$("[href$='.jpg']") Tất cả phẩn tử có thuộc tính href kết thúc với".jpg"
$("div#intro .head") Tất cả phần tử có tên lớp class="head" bên trong thẻ <div> với id="intro"
313
JQery
 So sánh
$("a").click(function(){ <a href="#" onclick="alert(‘You clicked a link!')">Link</a>
alert("You clicked a link!");
});
314
JQery
 Các sự kiện
Event Method Description
$(selector).click(function) Gọi tới 1 hàm khi sự kiện click được thực hiện
$(selector).dblclick(function) Gọi tới 1 hàm khi sự kiện dblclick được thực hiện
$(selector).focus(function) Gọi tới một hàm khi thực hiện Focus trên phần tử
$(selector).mouseover(function) Gọi tới một hàm khi con trỏ chuột di chuyển qua phần tử
Gọi tới một hàm khi một ký tự được nhập vào trong phần tử
$(selector).keypress(function)
(VD Text box)
<script>
$("#lemon").mouseover(function(){ $(this).append(" Cookie! ");});
</script>
315
JQery
 Hiệu ứng
Function Description
$(selector).hide() Ẩn phần tử
$(selector).show() Hiển thị phần tử
$(selector).toggle() Chuyển đổi (giữa ẩn và hiển thị) các phần tử đã chọn
$(selector).slideDown() Trượt xuống (hiển thị) các phần tử đã chọn
$(selector).slideUp() Trượt lên (hiển thị) các phần tử đã chọn
$(selector).slideToggle() Chuyển đổi trượt lên và trượt xuống của các thành phần đã chọn
$(selector).fadeIn() Làm mờ dần các phần tử đã chọn
$(selector).fadeOut() Làm mờ các phần tử đã chọn
$(selector).fadeTo() Làm mờ dần các phần tử đã chọn thành một độ mờ nhất định
$(selector).fadeToggle() Chuyển đổi giữa fade in và fade out
$(selector).animate() Tạo hoạt ảnh tùy chỉnh
316
JQery
 Hiệu ứng
Ví dụ Toggle
<html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script></head>
<body><button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body></html>
317
JQery
 Hiệu ứng
Ví dụ fadeToggle
<script>
$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});
});
</script></head><body><p>Demonstrate fadeToggle() with different speed parameters.</p>
<button>Click to fade in/out boxes</button><br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body></html>
318
JQery
 Hiệu ứng
Ví dụ animate
<script>
var div = $("div");div.animate({left: '100px'}, "slow");div.animate({fontSize: '3em'}, "slow");
});
});
</script></head><body><button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position,
remember to first set the CSS position property of the element torelative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body></html>
319
JQery
 Thiết lập CSS cho các phần tử
CSS Properties Description

$(selector).css(propertyName) Lấy giá trị style property của phần tử đầu tiên được chọn.
$(selector).css(propertyName,value) Gán giá trị cho thuộc tính của các phần tử được chọn
$(selector).css({properties}) Gán nhiều thuộc tính cùng một lúc cho các phần tử được chọn
$(selector).addClass(class) Gán đượcgiá chọtrn
<script>
$("#btnColor").click(function(){
$("#lemon").addClass("blue");
});
</script>
320
JQery
 Thao tác HTML
Function Description
$(selector).html(content) Thay đổi HTML (bên trong) của các phần tử đã chọn
$(selector).append(content) Nối nội dung vào HTML (bên trong) của các phần tử đã chọn
$(selector).after(content) Thêm HTML vào sau các phần tử đã chọn
<script>
$("#btnReplace").click(function(){
$("#lemon").html("Lollipop soufflé ice
cream tootsie roll donut...");
});
</script>
321
JQery
 Sự kiện document.ready
 Các phương thức trong jquery thường được đặt trong sự kiện document ready
để tránh việc gọi sự kiện jquery trước khi trang web đã tải xong.
// jQuery methods go here...
});
322
JQery
 .addClass(): thêm vào thuộc tính class cho tag html.
 .removeClass(): loại trừ thuộc tính class cho tag html.
 .attr(): nhận giá trị phẩn tử đầu tiên trong tập hợp các thuộc tính của tag html.
 .removeAttr(): loại trừ giá trị phần tử thuộc tính của tag html.
 .html(): trả về nội dung dạng html.
 .text(): trả về nội dung dạng text.
 .val(): nhận lấy giá trị hiện tại của tag html
323
JQery
 Ajax (Asynchronous JavaScript and XML)
 .ajax(): thực hiện một yêu cầu ajax.
 .ajaxComplete(): thực hiện một yêu cầu ajax complete.
 .get(): load dữ liệu từ server sử dụng phương thức GET.
 .getJSON(): load dữ liệu từ server dưới dạng Json sử dụng phương thức GET.
 .post(): load dữ liệu từ server sử dụng phương thức POST.
324

Chuong3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chuong3

Uploaded by

Copyright:

Available Formats

Chương 3: Lập trình phía

<font face="arial"> Đây là font arial </font>

If A &lt; B <br/> Then <br/> A = A + 1

<html> <head> <title>image map</title></head>

<table border=3 cellspacing="0" cellpadding="3">

Ví dụ : phân frame theo cột Ví dụ : phân frame theo dòng

 name: tên điều khiển.

 name: tên nút.

<h1 style="color:red; text-align:right;">

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<html><head> <style type="text/css">

<div style="font-style: italic"> Day la doan van ban

body {font-family:Garamond,Times,"Times New Roman",serif}

p {font: 12pt/14pt Times, serif}

<p style="text-align:center;" > QUE HUONG </p>

/* Tất cả đường biên có màu đỏ */

• none: không có đường biên. • double: đường đội, nét liền.

body { border-left-width: thin;

body { padding: 5pt }

<p style="width:50%; margin-left:25%;"> Luon co mot

<img src="logo.jpg" style="width:100 height:70" />

<div style="position:fixed; right:10px;top:10px; background-color:yellow;">CSS</div>

<div style="position:absolute; z-index:0; backgroundcolor: blue; width:250; height:100;

document.write("Hello World !!!"); <html><body><script

<html><head> <title>variable example</title>

Toán Tử Chức Năng Ví dụ Kết quả

Toán Tử Ví dụ Tương đương

txt1 = "What a very ";

(day == "Saturday") ? "Weekend" : "Not Saturday"

idTimeout = setTimeout("command Javascript",milisecond);

idInterval = setInterval("command Javascript", milisecond);

if (điềukiện) { var toantu = "+";

if (điều kiện ) { var febDays = 0

<script language="javascript" Ví dụ : viết đoạn mã tạo một

<script language="javascript“ type="text/javascript">

<html><head> <script type="text/javascript">

 Chỉ định sự kiện và đoạn code xử lý bằng lệnh Javascript.

<html><head> <script type="text/javascript"

<html><head><script type="text/javascript" language="javascript">

 Trong CSS: hsl(hhh, ss%, bb%)

@media only screen and (max-width: 768px){

<div class="panel panel-primary">

 Jquery CDN (Content Delivery Network)

CSS Properties Description

You might also like

If A < B <br/> Then <br/> A = A + 1