Download miễn phí Bài giảng Thiết kế web Html + JavaScript + Css



Các button để nhận thông tin và khởi tạo lại thông tin trên form.
Nút Submit là nút để sever có thể lấy thông tin từ người dùng sử dụng. Sau
khi nhập liệu xong, người dùng ấn vào nút này thì mọi thông tin sẽ gửi đến
server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với
thông tin báo lỗi. Nút reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng
các giá trị mặc định

Ví dụ 2:
Thiết kế Web 48
22/04/2011
9
Thiết kế Web 49
Table – Bảng biểu
Ví dụ 3:
Thiết kế Web 50
Thiết kế Web 51
Form – Biểu mẫu
1. Giới Thiệu:
- Form – Biểu mẫu là một kỹ thuật cho phép chủ trang web giao
tiếp với người truy cập. Trên trang web người dùng có thể được
yêu cầu trả lời một câu hỏi, cho 1 ý kiến, chọn một mục trong
danh sách định trước . . . chủ trang web sẽ tiếp nhận và xử lý
thông tin ấy.
- Cấu trúc tổng quát:
Thiết kế Web 52
Nội dung biểu mẫu
Nút gửi dữ liệu
Form – Biểu mẫu
2. Định Nghĩa Form:
-Dạng 1: Chỉ trình bày không gửi dữ liệu
Các đối tượng trong Form
-Dạng 2: Thông tin từ Form chuyển cho địa chỉ Mail
Các đối tượng trong Form
-Dạng 3: Thông tin từ Form chuyển lên Webserver
Các đối tượng trong Form
Thiết kế Web 53
Form – Biểu mẫu
3. Các thành phần trong form:
a. Textarea: tạo ra vùng văn bản, có thể nhập nhiều dòng
Trong đó:
- Cols: là chiều rộng của vùng văn bản tính theo ký tự
- Rols: chiều cao vùng văn bản tính theo hàng
- Name: là thuộc tính để nhận dạng, sử dụng trong srcipt
Thiết kế Web 54
nội dung
22/04/2011
10
Form – Biểu mẫu
b. Textbox: Để nhập vào một dòng đơn.
Trong đó:
- Size: chỉ chiều dài của textbox
- Maxlenght: chỉ số ký tự tối đa hay tối thiểu có thể nhập vào.
- Value: là giá trị kiểu xâu được hiển thị
Thiết kế Web 55
<INPUT type=”text” name=”…” maxlenght=…
size=… value=” “>
Form – Biểu mẫu
c. PasswordBox: giống textbox nhưng không hiển thị các ký tự
d. Radiobutton: Các nút lựa chọn một trong nhiều.
Trong đó:
-Value: chứa dữ liệu sẽ gửi đến server khi radiobutton đã checked
Thiết kế Web 56
<INPUT type=”radio” name=”...“ checked
value=”…“ > văn bản đại diện
Form – Biểu mẫu
e. Checkbox: Hộp chọn checkbox
Trong đó: - Value: chứa dữ liệu sẽ gửi đến server khi checkbox đã
checked
f. Menu (combobox, listbox): Tạo ra hộp menu thả xuống
Trong đó: - Multipe: thuộc tính này cho phép bạn chọn nhiều mục
Thiết kế Web 57
<INPUT type=”checkbox” name=” “ value=” “
checked> văn bản đại diện
nội dung
… …
… …
Form – Biểu mẫu
g. Submit and reset buttons:
Các button để nhận thông tin và khởi tạo lại thông tin trên form.
Nút Submit là nút để sever có thể lấy thông tin từ người dùng sử dụng. Sau
khi nhập liệu xong, người dùng ấn vào nút này thì mọi thông tin sẽ gửi đến
server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với
thông tin báo lỗi. Nút reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng
các giá trị mặc định.
Trong đó:
- Value: chứa phần text hiển thị trên nút bấm. Nút reset chỉ khởi động lại
các giá trị trong cùng một form mà thôi.
Thiết kế Web 58
Hoặc
Hoặc
Form – Biểu mẫu
Ví dụ 1:
Thiết kế Web 59 Thiết kế Web 60
22/04/2011
11
Form – Biểu mẫu
Ví dụ 2:
Thiết kế Web 61 Thiết kế Web 62
FAQ
?
?
?
Thiết kế Web 63
THIẾT KẾ WEB
JavaScript
Dzoãn Xuân Thanh
Lời nói đầu
Mục tiêu:
• Hiểu được cấu trúc của một website.
• Xây dựng được một web site bằng HTML
Thời lượng: 30LT + 30TH
Đối tượng: Những ai cần
Hình thức thi: Lý thuyết (thi hết môn) + Thực hành (đề tài)
Công cụ hổ trợ: Dreamweaver
Thiết kế Web 65
NGÔN NGỮ KỊCH BẢN JAVASCRIPT
JavaScript Exemple
var name=window.prompt(“Hello! What’s your name ?”,””);
document.write(“Hello ” + name + “ ! Do you like JavaScript ”);
Thiết kế Web 66
Ví dụ:
22/04/2011
12
NGÔN NGỮ KỊCH BẢN JAVASCRIPT
Thiết kế Web 67
Biến trong Javascript
• Cũng như các ngôn ngữ lập trình khác javascript dùng biến
để lưu trữ các giá trị nhập vào, các giá trị tính toán . . .Nói
cách khác biến là vùng nhớ sử dụng để lưu trữ các giá trị
khác nhau trong quá trình chương trình hoạt động.
• Mỗi biến có một tên, Tên biến trong JavaScript phải bắt đầu
bằng ký tự . Phạm vi của biến có thể là một trong hai kiểu
sau:
• Biến toàn cục: Có thể được truy cập từ bất kỳ đâu trong ứng
dụng. Được khai báo: x = 0;
• Biến cục bộ: Chỉ được truy cập trong phạm vi chương trình
mà nó khai báo. Biến cục bộ được khai báo trong một hàm
với từ khoá var: var x = 0;
Thiết kế Web 68
Kiểu dữ liệu
1. Kiểu nguyên (Interger)
Số nguyên có thể được biểu diễn theo ba cách: Hệ cơ số
10 (hệ thập phân), Hệ cơ số 8 (hệ bát phân) và Hệ cơ số
16 (hệ thập lục phân) -Với hai chữ số đầu tiên là 0x. (VD:
0x5F)
2. Kiểu dấu phẩy động (Floating Point)
Một biến có kiểu dấu phẩy động có 4 thành phần sau: Phần
nguyên thập phân. Dấu chấm thập phân (.). Phần dư. Phần
mũ.
Để phân biệt kiểu dấu phẩy động với kiểu số nguyên, phải
có ít nhất một chữ số theo sau dấu chấm hay E
VD: 9.87 hay 9.87E14
Thiết kế Web 69
Kiểu dữ liệu
3. Kiểu logic (Boolean)
Kiểu logic được sử dụng để chỉ hai điều kiện : đúng hay sai.
Miền giá trị của kiểu này chỉ có hai giá trị : true , false
4. Kiểu chuỗi (String)
Một biến kiểu chuỗi biểu diễn bởi không hay nhiều ký tự đặt
trong cặp dấu " ... " hay '... '
VD: “The dog ran up the tree” hay “100”
Ghi chú: Để biểu diễn dấu nháy kép ( " ), trong chuỗi sử dụng
( \" ),
VD: document.write(“ \”This text inside quotes.\” ”);
Thiết kế Web 70
Toán tử & Biểu thức trong JavaScript
1. Định nghĩa và phân loại biểu thức:
Tập hợp các biến và các toán tử nhằm đánh giá một giá trị nào đó được
gọi là một biểu thức (expression). Về cơ bản có ba kiểu biểu thức:
• Số học: Nhằm để lượng giá giá trị số. VD: (3+4)+(84.5/3) bằng
197.1666666667.
• Chuỗi: Nhằm để đánh giá chuỗi. VD: "The dog”+”barked!" là “The
dog barked!”
• Logic: Nhằm đánh giá giá trị logic. VD: 23>32 là False.
• Ngoài ra JavaScript cũng hỗ trợ biểu thức điều kiện, cú pháp như
sau:
(biểu thức) ? giá trị đúng: giá trị sai
.VD: xeploai= (diemtb>=8) ? “Gioi" : “Kha"
Thiết kế Web 71
Toán tử & Biểu thức trong JavaScript
2. Các toán tử (Operator):
a) Gán:
b) So sánh
Thiết kế Web 72
22/04/2011
13
Toán tử & Biểu thức trong JavaScript
c) Số học:
d) Chuỗi: Khi được sử dụng với chuỗi, toán tử + được coi là kết
hợp hai chuỗi,
ví dụ: "abc" + "xyz" được "abcxyz“
Chú ý: Nếu bạn gán giá trị của toán tử ++ hay -- vào một biến,
như y= x++, có thể có các kết quả khác nhau phụ thuộc vào vị trí
xuất hiện trước hay sau của ++ hay -- với tên biến (là x trong
trường hợp này). Nếu ++ đứng trước x, x sẽ được tăng hay giảm
trước khi giá trị x được gán cho y. Nếu ++ hay -- đứng sau x, giá trị
của x được gán cho y trước khi nó được tăng hay giảm.
Thiết kế Web 73
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
1. Cấu trúc lệnh rẽ nhánh (Điều Kiện):
Cú pháp:
Ví dụ:
if (x==10){
document.write(“x bằng 10, đặt lại x bằng 0.”);
x = 0;
} else
document.write(“x không bằng 10.”);
Thiết kế Web 74
if ( ) {
//Các câu lệnh với điều kiện đúng
} else{
//Các câu lệnh với điều kiện sai
}
Cấu trúc và lệnh: rẽ nhánh, lặp, thao tác trên đối tượng
2. Cấu trúc lệnh lặp:
a) For:
Ví dụ:
For loop Example
for (x=1; x<=10 ; x++) {
y=x*25;
document.write("x ="+ x +";y= "+ y + "");
}
Thiết kế Web 75
for (initExpr; ; incrExpr){
//Các lệnh được thực hiện trong khi lặp
}
b) While: Vòng lặp while lặp khối lệnh chừng nào


e2zSG5egvmKh2w8

---