IX. Một số thẻ đặc biệt
8. Mô hình hộp
Trong
CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web.
a. Thuộc tính margin:
Thuộc tính margin được dùng để canh lề cho một thành phần web hay cả trang web so với các đối tượng bên ngoài. Các thuộc tính về margin gồm:
– margin-top – margin-right – margin-bottom – margin-left
Các đơn vị được dùng với thuộc tính margin:
– Auto: trình duyệt tự động thiết lập margin. Kết quả được thể hiện tùy thuộc vào trình duyệt
– Pixel, pt, em,…: thiết lập khoảng cách lề theo độ dài – %: thiết lập khoảng cách lề theo phần trăm
Ví dụ 27 Body { margin-top:80px; Margin Border Padding Content Top Bottom Left Right
margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 } Hoặc:
body { margin:80px 30px 40px 50px; border:1px dotted #FF0000 }
b. Thuộc tính padding
Thuộc tính padding dùng để tạo khoảng cách giữa các nội dung bên trong với đường biên của khối. Các thuộc tính về padding gồm:
– padding-top – padding-right – padding-bottom – padding-left.
Các đơn vị được dùng với thuộc tính padding: %, px, pt, em,…
Ví dụ 28 <html> <head> <style type="text/css"> .padding { border:1px solid #000000; padding: 10px 20px 20px 10px; color:#FF1F00; height:50px; width:350px; } #margin { border:1px solid #000000; margin-top: 20px; margin-right:30px; margin-left:30px; margin-bottom:20px; color:#FF1F00; height:150px; width:350px; }
</head> <body>
<div id="margin">
<p>The margin clears an area around the content (outside the border) of an element.</p>
</div>
<div class="padding">
<p>The padding clears an area around the content (inside the border) of an element.</p>
</div> </body> </html>
c. Border
Trong ví dụ trên ta thấy thuộc tính border được dùng để đóng khung, trang trí cho một đối tượng, phân cách các đối tượng giúp trang web trông dễ nhìn hơn. Border có các thuộc tính sau:
– border-width: độ rộng cho viền, có các giá trị thin (mảnh), medium (vừa), thick (dày), hay là một giá trị đo cụ thể như pixels
– border-color: màu viền
– border-style: kiểu viền, có 8 giá trị dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none hay hidden dùng để ẩn đường viền
Chúng ta cũng có thể dùng riêng các thuộc tính border-top, border-right, border-bottom hay border-left để chỉ định viền riêng cho các đối tượng.
#border { border-top-width:thin; border-top-color:#FF0000; border-top-style:solid; border-right-width:thick; border-right-color:#AFAFAF; border-right-style:dotted; }
d. Thuộc tính Width và HeightThuộc tính Width Thuộc tính Width
Width quy định độ rộng cho một thành phần web, ngoài ra ta còn có một số thuộc tính đi kèm
– max-width: quy định chiều rộng tối đa cho một thành phần web. – min-width: quy định chiều rộng tối thiểu cho một thành phần web.
Thuộc tính height:
Height: quy định chiều cao cho một thành phần web, ngoài ra ta còn có một số thuộc tính đi kèm
– max-height: quy định chiều cao tối đa cho một thành phần web. – min-height: quy định chiều cao tối thiểu cho một thành phần web.
e. Thuộc tính float và clearThuộc tính Float: Thuộc tính Float:
Thuộc tính float dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. Đây là một thuộc tính rất cần thiết khi dàn trang, hiển thị văn bản thành cột, định vị trí ảnh và text
Trong hình minh họa dưới đây ta thấy 2 khối BOX A và BOX B được đặt trong khối WRAPPER. Khi ta sử dụng thuộc tính float cho BOX A cố định về phía trái thì BOX B sẽ tràn lên để lấp khoảng trống phía trên
Thuộc tính float có 3 giá trị:
– Left: Cố định phần tử về bên trái. – Right: Cố định phần tử về bên phải. – None: Bình thường. Ví dụ 30 <html> <head> <style type="text/css"> #wrapper { border:1px solid #ff0000; width:700px; } #box_a { border: 1px solid #000000; width: 300px; float:left; color:#d40000; } #box_b { border: 1px solid #0000ff; color:#551f00; } </style> </head> <body> <div id="wrapper"> <div id="box_a"> BOX A BOX B WRAPPE R
<p>This is BOX A</p> </div> <div id="box_b"> <p>This is BOX B</p> </div> </div> </body> </html> Kết quả hiển thị Thuộc tính clear
Thuộc tính clear thường đi kèm với float, được dùng xử lý các phần tử liên quan tới phần tử đã được float để quyết định hướng xử sự của phần tử này. Ở ví dụ trên, khi BOX A được float qua trái thì mặc nhiên BOX B sẽ được tràn lên để lắp vào chỗ trống. Nhưng khi chúng ta sử dụng thuộc tính clear cho BOX B thì chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không.
Thuộc tính clear có 4 giá trị: left, right, both và none.
Thuộc tính position
Bên cạnh thuộc tính float, clear, CSS cung cấp cho ta thuộc tính position để xác định tọa độ của một đối tượng nào đó trên cửa sổ trình duyệt. Ta có 2 cách để xác định tọa độ:
– Định vị tuyệt đối: position sẽ nhận giá trị absolute – Định vị tương đối: position nhận giá trị relative
Ví dụ 31
#img1{position:absolute; top:50px; left:70px } #img2 { position:relative; bottom:70px; right:50px }
Chương 4: Giới thiệu ngôn ngữ kịch bản Javascript
I. Giới thiệu về Javascript
- Javascript là ngôn ngữ kịch bản được sử dụng nhiều trên các website, và được hỗ trợ trên một số trình duyệt như: Internet Explorer, FireFox, Chrome, Opera, và Safari.
- Để học ngôn ngữ này bạn cần hiểu cơ bản về HTML hoặc XHTML. Vậy javascript là gì?
- javascript là ngôn ngữ kịch bản được nhúng vào trong tài liệu html.
II. Ngôn ngữ javascript
1. Chèn mã lệnh javascript vào trong tài liệu HTML
a. Chèn mã lệnh trên vùng <body>
Cách chèn mã lệnh nay chỉ áp dụng khi mã lệnh javacript được chèn thực hiện một mục đích nào đó trên tài liệu html tại vị trí cần chèn vào.
Ví dụ 4.1: Chèn mã lệnh javascript vào trong tài liệu html <body>
<script language="javascript" type="text/javascript"> // code here.
</script> </body>
b. Chèn mã lệnh trên vùng <head>
Cách chèn mã lệnh nay thường khi mã lệnh javacript được chèn thực hiện một mục đích nào tại nhiều vị trí khác nhau trên tài liệu html.
Ví dụ 4.2: Chèn mã lệnh javascript vào trong vùng thẻ head <head>
<script language="javascript" type="text/javascript"> // code here.
</script> </head>
c. Chèn mã lệnh trực tiếp vào trong các thẻ HTML
Cách chèn mã lệnh nay chỉ áp dụng khi mã lệnh javacript được chèn thực hiện một mục đích nào đó trên thẻ html được chèn vào.
<p onclick="alert('Xin chao cac ban');"> Click here!!!</p>
d. Chèn mã lệnh bằng một tập tin riêng trên vùng <head>
Cách chèn mã lệnh nay thường khi mã lệnh javacript được chèn thực hiện một mục đích nào tại nhiều vị trí khác nhau trên tài liệu html, bên cạnh đó mã lệnh trong tập tin này không chỉ áp dụng cho một trang bất kỳ mà có thể áp dụng cho toàn bộ website.
Ví dụ 4.4: Chèn mã lệnh bằng một tập tin riêng có tên my_javascript.js <head>
<script language="javascript" src="my_javascript.js" type="text/javascript"> // code here.
</script> </head>
2. Lời chú thích
Chúng ta có thể thêm những khối ghi chú để biết phần mã lệnh tương ứng thực hiện điều gì. Các ghi chú được trình duyệt bỏ qua và chỉ thấy trong mã nguồn.
Cú pháp câu ghi chú:
- Dòng ghi chú nằm trên một dòng văn bản. // dòng ghi chú trên 1 dòng.
- Dòng ghi chú nằm trên nhiều dòng văn bản. /* dòng ghi chú thứ nhất
dòng ghi chú khác…. */
3. Biến và cách xuất thông tin lên trình duyệt
a. Biến và cách khai báo biến
Biến trong javascript được sử dụng từ khóa var để khai báo, khi khai báo nhiều biến chúng ta phân cách chúng bởi dấu (,).
Tên biến không có khoảng cách trống, không được trùng tên với từ khóa, bắt đầu bằng ký tự, đặc điểm tên biến phân biệt chữ hoa và chữ thường.
Ví dụ 4.5:
var so_a, so_b; var chuoi;
Sau khi khai báo biến chúng ta có thể khởi gán giá trị cho tên biến bằng cách dùng toán tử gán(=), khi đó kiểu dữ liệu của biến là kiểu của giá trị được khởi gán.
Ví dụ 4.6:
so_a = 9; //kiểu của so_a là kiểu số nguyên.
chuoi = “Hello” // kiểu của chuoi là kiểu chuỗi ký tự.
Để kiểm tra xem kiểu dữ liệu của tên biến ta sử dụng hàm typeof(<tên_biến>). Chuyển đổi chuỗi số thành kiểu số ta sử dụng hàm parseInt() hoặc parseFloat().
Ví dụ 4.7:
chuoi = “123.45”;
so_a = parseInt(chuoi); //khi đó so_a = 123; so_b = parseFloat(chuoi); //khi đó so_b =123.45; Chuyển đổi số thành chuỗi ta sử dụng hàm toString()
Ví dụ 4.8:
chuoi = toString(so_a); // khi đó chuoi = “123”;
b. Xuất thông tin lên trình duyệt web
Để xuất thông tin lên trình duyệt web ta sử dụng Cú pháp sau: document.write(<nội dung>);
hoăc document.writeln(<nội dung>);
Ví dụ 4.9:
document.write(“Chào các bạn”); // xuất ra chuỗi. document.write(chuoi); // xuất ra biến chuỗi.
4. Các phép toán
Trong ngôn ngữ lập trình javascript các phép toán tương tự như các phép toán trong C. Các phép tính toán học: + Phép cộng - Phép trừ * Phép nhân / Phép chia % Phép lấy phần dư
++ Tăng giá trị lên 1 đơn vị -- Giảm giá trị xuống 1 đơn vị Các phép gán:
Phép toán Ví dụ Tương tự Kết quả = x=y x=5 += x+=y x=x+y x=15 -= x-=y x=x-y x=5 *= x*=y x=x*y x=50 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0
Phép toán + : được sử dụng để cộng chuổi(nối chuổi)
Ví dụ 4.10: Cộng hai chuỗi st1="Hôm nay là";
st2="đẹp trời";
st=st1+ “ ”+st2; // Kết quả st = “Hôm nay là một ngày đẹp trời”;
Phép cộng giữa chuổi và số: khi cộng một chuỗi với một số kết quả sẽ là chuỗi.
Ví dụ 4.11: Cộng chuỗi và số //Cộng số với số
x=5+5;
document.write(x); // Cộng chuổi với chuỗi x="5"+"5"; document.write(x); // Cộng số với chuỗi x=5+"5"; document.write(x); // Cộng chuỗi với số x="5"+5; document.write(x); Phép so sánh: == Bằng === Bằng chính xác (giá trị và kiểu) != Không bằng > Lớn hơn < Nhỏ hơn
>= Lớn hơn hoặc bằng <= Nhỏ hơn hoặc bằng Phép toán logic: && Và || Hoặc ! Phủ định
Phép toán điều kiện:
ten_bien =(<điều kiện>)?gia_tri_true:gia_tri_sai
5. Câu lệnh rẽ nhánh If...Else
Câu lệnh rẽ nhánh có 3 dạng:
Dạng 1: Câu lệnh if dạng khuyết.
Câu lệnh if dạng này được sử dụng để kiểm tra điều kiện, nếu điều kiện thõa mãn thì thực hiện một nhiệm vụ nào đó.
Cú pháp:
if (<Điều kiện>)
{ // mã lệnh nếu biểu thức điều kiện đúng
}
Ví dụ 4.12: Lấy ra giờ hệ thống, nếu giờ nhỏ hơn 10 giờ thì in ra trình duyệt “Chào buổi
sáng”
<script type="text/javascript">
var d=new Date(); // Lớp d là kiểu dữ liệu giờ var time=d.getHours(); // lấy ra giờ
if (time<10) { document.write("<b>Chào buổi sáng</b>"); } </script> Dạng 2: Câu lệnh if dạng đầy đủ
Câu lệnh if dạng này được sử dụng để kiểm tra điều kiện, nếu điều kiện thõa màn thì thực hiện một công việc này còn nếu sai thì thực hiện nhiệm vụ khác.
Cú pháp:
if (<Điều kiện>) {
// Mã lệnh nếu điều kiện đúng; }
else {
//Mã lệnh nếu điều kiện sai }
Ví dụ 4.13: Lấy ra giờ hệ thống, nếu giờ hiện tại nhỏ hơn 10 thì xuất ra màn hình là “Good morning!”, ngược lại “Good day!”
<script type="text/javascript"> var d = new Date();
var time = d.getHours(); if (time < 10) { document.write("Good morning!"); } else { document.write("Good day!"); } </script> Dạng 3: Câu lệnh if lồng nhau:
Câu lệnh if dạng lồng được sử dụng khi điều kiện đưa ra có thể xẩy ra hơn hai trường hợp. Cú pháp:
if (<Điều kiện1>) {
// Mã lệnh nếu biểu thức <Điều kiện 1> đúng; } else if (<Điều kiện2>)
{
// Mã lệnh nếu biểu thức <Điều kiện 2> đúng; } else
{
// Mã lệnh nếu biểu thức <điều kiện 1> và <điều kiện 2> sai. }
<script type="text/javascript"> var d = new Date()
var time = d.getHours() if (time<10)
{
document.write("<b>Good morning</b>"); }
else if (time>10 && time<16) { document.write("<b>Good day</b>"); } else { document.write("<b>Hello World!</b>"); } </script>
6. Câu lệnh lựa chọn Switch
Câu lệnh switch được sử dụng khi biểu thức có thể trả về nhiều giá trị khác nhau, mỗi giá trị như vậy thì thực hiện một công việc khác nhau.
Cú pháp:
switch(<biểu_thức>) {
case gt1:
//Thực hiện lệnh nếu biểu_thức = gt1 break;
case gt2:
//Thực hiện lệnh nếu biểu_thức = gt2 break;
default:
//Thực hiện lệnh nếu biểu_thức không bằng gt1 hoặc gt2 }
Ví dụ 4.15:
<script type="text/javascript"> var d=new Date();
theDay=d.getDay(); switch (theDay) {
case 1: document.write("Thứ hai");
break; case 2: document.write("Thứ ba");
break;
case 3: document.write("Thứ tư");
break; case 4: document.write("Thứ năm");
break;
case 5: document.write("Thứ sáu");
break; case 6: document.write("Thứ bảy");
break; default: document.write("Chủ nhật"); } </script> 7. Định nghĩa hàm
Ngoài những hàm javascript đã định nghĩa sẵn, chúng ta có thể định nghĩa để thực hiện một nhiệm vụ nào đó.
Cấu trúc của hàm:
function <tên hàm>(<tham số nếu có>) {
// mã lệnh. }
8. Hộp thông báo
Khi người dùng nhập thông tin hoặc tác động đến trang web thì một thông báo hiện ra cảnh báo hay nhắc nhở người.
Kiểu thông báo: Hộp thông báo alert() chỉ có nút lệnh OK. Cú pháp:
<html> <head>
<script type="text/javascript"> function show_alert()
{
alert("I am an alert box!"); }
</script> </head> <body>
<input type="button" onclick="show_alert()" value="Show alert box" /> </body>
</html>
Kiểu thông báo confirm() có hai nút lệnh nút lệnh OK và Cancel.
Nếu Click vào Ok thì kết quả trả về là true, nếu click vào Cancel thì kết quả trả về là false. Cú pháp:
confirm("Dòng thông báo");
Ví dụ 4.17: <html> <head> <script type="text/javascript"> function show_confirm() {
var r=confirm("Press a button"); if (r==true)
{ document.write("You pressed OK!");
} else {
document.write("You pressed Cancel!"); }
}
</script> </head> <body>
</body> </html>
Kiểu thông báo prompt() cho phép người dùng nhập vào giá trị và chỉ có hai nút lệnh OK và Cancel.
Nếu click vào Ok thì kết quả trả về là giá trị được nhập từ hộp prompt(), nếu click vào Cancel thì giá trị trả về là null.
Cú pháp:
prompt("Dòng thông báo","Giá trị nhập vào mặc định");
Ví dụ 4.18: <html> <head> <script type="text/javascript"> function show_prompt() {
var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="")
{
document.write("Hello " + name + "! How are you today?");
} }
</script> </head> <body>
<input type="button" onclick="show_prompt()" value="Show prompt box" /> </body>
</html>
9. Câu lệnh lặp For
Câu lệnh for dùng để lặp lại công việc với số lần lặp được xác định trước. Cú pháp:
for (var=startvalue;var<=endvalue;var=var+increment) {
// Mã lệnh thực hiện; }
Ví dụ 4.19: <html> <body> <script type="text/javascript"> var i=0; for (i=0;i<=5;i++) {
document.write("The number is " + i); document.write("<br />"); } </script> </body> </html> 10. Câu lệnh lặp While Câu lệnh lặp While:
Câu lệnh while dùng để lặp lại công việc với số lần lặp chưa xác định trước, số lần lặp phục thuộc vào điều kiện.
Cú pháp:
while (<biểu thức điều kiện>)
{ // Thực hiện mã lệnh;
}
Kiểm tra điều kiện, nếu biểu thức điều kiện còn đúng thì thực hiện mã lệnh, điều kiện sai thì thoát khỏi vòng lặp. Ví dụ 4.20: <html> <body> <script type="text/javascript"> var i=0; while (i<=5) {
document.write("The number is " + i); document.write("<br />");
} </script>
</body> </html>
Câu lệnh do … while
Thực hiện mã lệnh, sau đó kiểm tra điều kiện nếu điều kiện còn chưa đúng thì thực hiện thì thực hiện mã lệnh, điều kiện đúng thì thoát khỏi vòng lặp.
Cú pháp: do { // Thực hiện mã lệnh; } while (var<=endvalue); Ví dụ 4.21: <html> <body> <script type="text/javascript"> var i=0; do {
document.write("The number is " + i); document.write("<br />"); i++; } while (i<=5); </script> </body> </html> 11. Câu lệnh lặp For...In
Câu lệnh for …in là một câu lệnh đặc biệt không có trong C chỉ có trong javascript, nó được dùng để duyệt các phần tử trong một đối tượng trong javascript. Ví dụ như trong đối tượng mảng.
Cú pháp:
{ // Mã lệnh thực hiện; } Ví dụ 4.22: <html> <body> <script type="text/javascript"> 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> </body> </html>
12. Sự kiện trong Javascript
a. Sự kiện onLoad và onUnload
Sự kiện Chức năng onFocus