Tải bản đầy đủ (.pdf) (74 trang)

WebCourse-Lập trình Web Bài 6.1

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.18 MB, 74 trang )

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

×