Lập trình và Thiếtkế Web 1
© 2007 Khoa Công nghệ thông tin
Khoa
Khoa
CNTT
CNTT
–
–
ĐH
ĐH
.KHTN
.KHTN
Bài 6 – Phần1/2
Ngôn
Ngôn
ng
ng
ữ
ữ
Script
Script
–
–
Javascript
Javascript
&
&
VBscript
VBscript
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
N
N
ộ
ộ
i
i
dung
dung
DHTML
Ngôn ngữ Script
Javascript
VBscript
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
N
N
ộ
ộ
i
i
dung
dung
DHTML
Ngôn ngữ Script
Javascript
VBscript
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
DHTML
DHTML
DHTML = Dynamic HyperText Markup Language
DHTML = HTML + CSS + ClientScript + HTML DOM
Tích hợpcáctínhnăng của các trình duyệtthế hệ thứ
4 (IEv5, Netscape 4, Firefox 2.0+, Opera 7.0, …)
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
N
N
ộ
ộ
i
i
dung
dung
DHTML
Ngôn ngữ Script
Javascript
VBscript
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Ngôn
Ngôn
ng
ng
ữ
ữ
Script
Script
–
–
Gi
Gi
ớ
ớ
i
i
thi
thi
ệ
ệ
u
u
Là ngôn ngữ dạng thông dịch
Giúp trang web có tính tương tác vớingười dùng
Các ngôn ngữ script thông dụng
– Javascript (Netscape)
– Jscript (Microsoft)
– VBScript (Microsoft)
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Ngôn
Ngôn
ng
ng
ữ
ữ
Script
Script
-
-
Ứ
Ứ
ng
ng
d
d
ụ
ụ
ng
ng
ClientSide
ClientSide
v
v
à
à
ServerSide
ServerSide
Ứng dụng Client-Side:
– Thực hiện tại Browser (Nescape Navigator, IE, Firefox, Safari, )
– Script tại Client-Side (Thựchiệncáctương tác vớingười dùng, thay
đổicấu trúc trang web, kiểmtradữ liệu đượcnhậpvàocủangười
dùng, …)
Ứng dụng Server-Side:
– Thực hiện tại WebServer (IIS, Netscape Enterprise Server, ….)
– Script tại Server-Side (kếtnốiCSDL, chiasẽ thông tin giữacác
người duyệt web, truy cậphệ thống file trên server, …)
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Ngôn
Ngôn
ng
ng
ữ
ữ
Script
Script
–
–
Qu
Qu
á
á
tr
tr
ì
ì
nh
nh
th
th
ự
ự
c
c
hi
hi
ệ
ệ
n
n
script
script
t
t
ạ
ạ
i
i
server
server
Quá trình thực hiện ứng dụng Server-Side gồm 2 giai
đoạn:
– Tạo trang Web có chứa cả Srcipt Client-Side và Script
Server-Side
– Khi Client browser yêu cầu thực hiện, server (run-time
engine) sẽ thực hiện các lệnh Server-side Scipts và trả
trang Web HTML về browser
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Ngôn ngữ script – Nhúng Script vào trang web
Định nghĩa script trựctiếp
<script type=“text/javascript”>
<!
// Lệnh Javascript
>
</script>
Nhúng script từ 1 file khác
<script src=“xxx.js”></script>
Định nghĩa script trựctiếp
<script type=“text/vbscript”>
<!
‘Lệnh VBScript
>
</script>
Nhúng script từ 1 file khác
<script src=“xxx.vbs”></script>
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Ngôn
Ngôn
ng
ng
ữ
ữ
script
script
–
–
V
V
ị
ị
tr
tr
í
í
đ
đ
ặ
ặ
t
t
script
script
trong
trong
HTML
HTML
Đặtgiữatag <head> và </head>: đoạn script sẽ thực
thi ngay khi trang web đượcmở.
Đặtgiữatag <body> và </body>: Đoạn script trong
phần body đượcthực thi khi trang web đang mở (sau
khi thực thi các đoạn script có trong phần <head>).
Số lượng đoạn script không hạnchế.
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Nh
Nh
ú
ú
ng
ng
Javascript
Javascript
v
v
à
à
o
o
trang
trang
web
web
<html>
<head>
<script type="text/javascript">
some statements
</script>
</head>
<body>
<script type="text/javascript">
some statements
</script>
<script src=“Tên_file_script.js"> </script>
</body>
</html>
<script type="text/
<script type="text/
javascript
javascript
">
">
some statements
some statements
</script>
</script>
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
VD:
VD:
Nh
Nh
ú
ú
ng
ng
Javascript
Javascript
v
v
à
à
o
o
trang
trang
web
web
<html>
<body>
document.write(“Hello world!”);
<script type="text/javascript">
document.write(“Hello world!”);
</script>
</body>
</html>
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
N
N
ộ
ộ
i
i
dung
dung
DHTML
Ngôn ngữ Script
Javascript
VBScript
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
N
N
ộ
ộ
i
i
dung
dung
Cú pháp và quy ước
Mộtsố cấutrúclậptrìnhcơ bản
– Khai báo biến
– Kiểudữ liệu
– Toán tử
– Mộtsốđốitượng dữ liệu
– Cấutrúcđiềukhiển
– Hàm
– Lớp đốitượng
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
N
N
ộ
ộ
i
i
dung
dung
Cú pháp và quy ước
Mộtsố cấutrúclậptrìnhcơ bản
– Khai báo biến
– Kiểudữ liệu
– Toán tử
– Mộtsốđốitượng dữ liệu
– Cấutrúcđiềukhiển
– Hàm
– Lớp đốitượng
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
C
C
ú
ú
ph
ph
á
á
p
p
v
v
à
à
quy
quy
ư
ư
ớ
ớ
c
c
Javascript phân biệt chữ hoa – chữ thường
– Ví dụ : Hai biến Java, java là khác nhau
Tấtcả các câu lệnh javascript đều cách nhau bởidấu“;”
Không phân biệt khoảng trắng, Tab, xuống dòng trong câu lệnh.
Chuổivàdấu nháy
– Chuổi trong javascript được đặt trong cặp nháy đơn(‘’) hoặc nháy kép
(“”)
– Ví dụ :
<input value = ‘He said “Javascript is good” ’>
<input type=“button” value=“Click Me!” onclick=“alert(‘Hello’);”
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
C
C
ú
ú
ph
ph
á
á
p
p
v
v
à
à
quy
quy
ư
ư
ớ
ớ
c
c
Ký tự ‘\’ :
Ví dụ : ‘You did\’t get that done’
Các loạidấu ngoặc:
\b : Backspace \’ : Dấu nháy đơn \t : tab
\f : Form feed \” : Dấu nháy kép
\n : New line \r : carriage return
{ } Đánh dấukhốilệnh
[ ] Sử dụng trong cấutrúcMảng
( ) Sử dụng trong hàm, thuộc tính đốitượng
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
C
C
ú
ú
ph
ph
á
á
p
p
v
v
à
à
quy
quy
ư
ư
ớ
ớ
c
c
Ghi chú : Theo cú pháp ghi chú củaC++
// Đây là ghi chú
/* Đây là ghi
chú nhiều dòng*/
Tên biếnvàhàm:
– Bắt đầubằng Ký tự (A Z, a z), _, $
– Không đượcbắtdầubằng ký số (0 9)
– Không có khoảng trắng giữatên(biếnhoặc hàm)
– Không được đặt tên trùng từ khóa
– Ví dụ
:
x x13 _money $money
add_two_num(….) addTwoNum(… )
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
Danh
Danh
s
s
á
á
ch
ch
t
t
ừ
ừ
kh
kh
ó
ó
a
a
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
N
N
ộ
ộ
i
i
dung
dung
Cú pháp và quy ước
Mộtsố cấutrúclậptrìnhcơ bản
– Khai báo biến
– Kiểudữ liệu
– Toán tử
– Mộtsốđốitượng dữ liệu
– Cấutrúcđiềukhiển
– Hàm
– Lớp đốitượng
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
Khai
Khai
b
b
á
á
o
o
bi
bi
ế
ế
n
n
Khai báo biếnbằng từ khóa var
Javascript đòi hỏicácbiếnphải được khai báo trướckhi
sử dụng
Thật sự tồn tại khi bắt đầu gán giá trị cho biếnlần đầu tiên
Ví dụ :
var x ;
var y, sum ;
var x = 1, y = -10, sum = 0;
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
N
N
ộ
ộ
i
i
dung
dung
Cú pháp và quy ước
Mộtsố cấutrúclậptrìnhcơ bản
– Khai báo biến
– Kiểudữ liệu
– Toán tử
– Mộtsốđốitượng dữ liệu
– Cấutrúcđiềukhiển
– Hàm
– Lớp đốitượng
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
Ki
Ki
ể
ể
u
u
d
d
ữ
ữ
li
li
ệ
ệ
u
u
Kiểudữ liệu Ví dụ Mô tả
Object
var listBooks = new Array(10) ; Trướckhisử dụng, phảicấpphát
bằng từ khóa new
String
“The cow jumped over the moon.”
“40”
Chứa đượcchuổi unicode
Chuổirỗng “”
Number
0.066218
12
Theo chuẩn IEEE 754
boolean
true / false
undefined
var myVariable ; myVariable = undefined
null
connection.Close(); connection = null
function
var add = new function("x", "y",
"return(x+y)");
add(2, 3);
functionName = new function(
[argname1, [ argnameN,]] body
);
1 Biến trong javascript có thể lưu bấtkỳ kiểudữ liệu nào.
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
Ki
Ki
ể
ể
u
u
d
d
ữ
ữ
li
li
ệ
ệ
u
u
var a = 10;
document.write(a + “<br>”);
a = a + “10” ;
document.write(a);
Lập trình và Thiếtkế Web 1 – Bài 6 : Ngôn ngữ Script (Javascript & VBScript)
© 2007 Khoa CNTT - ĐHKHTN
Javascript
Javascript
–
–
N
N
ộ
ộ
i
i
dung
dung
Cú pháp và quy ước
Mộtsố cấutrúclậptrìnhcơ bản
– Khai báo biến
– Kiểudữ liệu
– Toán tử
– Mộtsốđốitượng dữ liệu
– Cấutrúcđiềukhiển
– Hàm
– Lớp đốitượng