lập trình web - javascript cơ bản

2/16/2011
1
ĐẠI HỌC SÀI GÒN – KHOA CNTT
LẬP TRÌNH WEB
B
LẬP

TRÌNH

WEB
P
TRÌNH WE
JavaScript cơ bản
T
KẾ VÀ LẬ
P
GV: Trần Đình Nghĩa

THIẾ
T
1
2/16/2011
2
Nội dung thiết kế web
 HTML


F
orm

CSS

B

CSS
 Hosting
P
TRÌNH WE
 Publish website
T
KẾ VÀ LẬ
P
THIẾ
T
2
2/16/2011
3
Nội dung
 DHTML

Ngôn ngữ client
-
script
B

Ngôn

ngữ

client
-
script

P
TRÌNH WE
 JavaScript cơ bản
T
KẾ VÀ LẬ
P

Thực hành JavaScript
THIẾ
T
3

Thực

hành

JavaScript
2/16/2011
4
Đánh giá
1. Điểm chuyên cần0.1
2. Điểm thực hành 0.4
3
Điểm thi cuối kỳ
05
B
3
.
Điểm thi cuối kỳ
0

.
5
Điểm HP = [1]*0.1 + [2]*0.4 + [3]*0.5
P
TRÌNH WE
• Bài thực hành: Đồ án làm theo nhóm
T
KẾ VÀ LẬ
P
• Bài thi cuối kỳ: Bài thi viết
THIẾ
T
4
2/16/2011
5
Đồ án website
 Sinh viên tự chọn nhóm làm việc: 1 nhóm 3-
4sv
4sv
.
 Mỗi nhóm sẽ chọn 1 đăng ký đề tài cụ thể cho
B
đồ án.
 Các đề tài sẽ có một danh sách yêu cầu cụ thể.
P
TRÌNH WE
 Giảng viên sẽ đưa ra các tiêu chí chấm đề tài.

Thời i à á h thứ ộ h hấ đề tài
T

KẾ VÀ LẬ
P

Thời
g
i
an

v
à
c
á
c
h thứ
c

n
ộ
p
h
ay

c
hấ
m
đề tài
giảng viên sẽ thông báo cụ thể.
THIẾ
T
5

2/16/2011
6
Đồ án website
 Đánh giá đồ án môn học và tính điểm cho mỗi thành viên
trong nhóm sẽ theo qui tắc sau:

Điểm đồ án không phải là điểm của mỗi thành viên nhóm

Điểm đồ án không phải là điểm của mỗi thành viên nhóm
 Điểm cá nhân căn cứ trên % công việc làm trong nhóm

Vd: Điểm đồ án của nhóm 1: là 8 điểm
B

Vd: Điểm đồ án của nhóm 1: là 8 điểm
 Nhóm 1 có 3 thành viên ( A, B, C)
 Nếu mỗi thành viên đều đóng góp công sức bằng nhau
P
TRÌNH WE
(33.33%) thì điểm mỗi thành viên là 8.
 Ngược lại: (tính theo qui tắc sau)
•
A làm 40%

Điểm của A = (40%*8)/33 33% = 9 6
T
KẾ VÀ LẬ
P
•
A làm 40%


Điểm của A = (40%*8)/33
.
33% = 9
.
6
• B làm 30%  Điểm của B = (30%*8)/33.33% = 7.2
•C làm 30%  Điểm của C = (30%*8)/33.33% = 7.2
THIẾ
T
6
 Tất cả các điểm trên 10 sẽ được làm tròn thành 10
2/16/2011
7
Tài liệu tham khảo
 và
htt
p
:
//
www.w3.or
g/
p// g/
Lisa Lopuck, Web Design For Dummies (2nd
Edition)
Wiley
Publishing
2006
B
Edition)

,
Wiley
Publishing
,
2006
Craig Grannell, The Essential Guide to CSS and
P
TRÌNH WE
HTML Web Design, Friends of ED, 2007
D
a
v
e
Th
au,
T
h
e
boo
k
of
Ja
v
aSc
ri
pt
(
2n
d
T

KẾ VÀ LẬ
P
ae
au,
e
boo
o
Ja aSc pt
(
d
edition), No Starch Press, 2007
THIẾ
T
7
Google, google, google …
2/16/2011
8
Liên hệ
 Giảng viên: Trần Đình Nghĩa
 Phòng KT & KĐCLGD – ĐHSG

Email:
tdnghia1977@gmail com
B

Email:
tdnghia1977@gmail
.
com
 Groups:

P
TRÌNH WE
/>T
KẾ VÀ LẬ
P
THIẾ
T
8
2/16/2011
9
Script language & DHTML
B
P
TRÌNH WE
T
KẾ VÀ LẬ
P
THIẾ
T
9
2/16/2011
10
Script language
 Script : Ngôn ngữ lập trình thông dịch giúp
website tương tác với người dùng
 Client-side-script (JavaScript, VBScript, …)

Đ
ư
ợ

c tải về má
y
client và th
ự
c thi bằn
g

B
ợ y ự g
web browser
 Thiên về xử lý giao diện
P
TRÌNH WE
 Server-side-script (Php, jsp, asp, aspx,…)

Đ
ư
ợ
c th
ự
c thi ở web server và trả kết
q
uả
T
KẾ VÀ LẬ
P
ợ ự q
về client
 Thiên về xử lý truy cập hệ thống file trên
THIẾ

T
10
server, kết nối với CSDL trên server.
2/16/2011
11
Script language
 Khi Browser gởi yêu cầu truy cập 1 trang web
trên web server có chứa script server-side và
client-side (HTML, client-side script, css, …)
B
 Khi nhận được 1 yêu cầu, web server
(runtime-engine) sẽ thực hiện các lệnh server
à ở ế á
P
TRÌNH WE
script v
à
g
ở
i đ
ế
n browser c
á
c trang web
DHTML (chứa HTML, javascript, …)
T
KẾ VÀ LẬ
P
THIẾ
T

11
2/16/2011
12
DHTML
 DHTML = Dynamic HyperText Markup
Language
 DHTML = HTML + CSS + ClientScript +
HTML DOM
B
 Tích hợp các tính năng của các trình duyệt
P
TRÌNH WE
thế hệ thứ 4
(IEv6, Firefox 2.0, Opera 7.0, Netscape 4, …)
T
KẾ VÀ LẬ
P
THIẾ
T
12
2/16/2011
13
JavaScript
 Là ngôn ngữ dạng thông dịch
 N
gô
n n
gữ

sc

ri
p
t
p
h
ổ

b
i
ế
n tr
ê
n Int
e
rn
e
t
gô gữ sc p p ổ b ế êee
 Giúp trang web có tính tương tác

Khả năng của javascript:
B

Khả

năng

của

javascript:

 Cho phép đặt dữ liệu động vào trang HTML
 Tươn
g
tác với các sự kiện của HTML
P
TRÌNH WE
g
 Thay đổi nội dung của các đối tượng HTML
 Kết h
ợp
với HTML DOM để tươn
g
tác với n
g
ười
T
KẾ VÀ LẬ
P
ợp g g
dùng (menu động, các nút đồ hoạ, …)

Kiểmtradữ liệunhậptừ phía client (Form
THIẾ
T
13

Kiểm

tra

dữ

liệu

nhập

từ

phía

client

(Form

Validation)
2/16/2011
14
Nhúng Javascript vào trang web
<html>
<script type="text/javascript">
some statements
</ i t>
<html>

<head>
<script type="text/javascript">
some statements
</
scr
i

p
t>

B
</script>
</head>
<body>
P
TRÌNH WE
<script type="text/javascript">
some statements
</script>
ê
/
T
KẾ VÀ LẬ
P
<script
s
rc=“T
ê
n_file_script.js"> <
/
script
>
</body>
</html>
THIẾ
T
14

2/16/2011
15
Nhúng Javascript vào trang web
 Đặt giữa tag <head> và </head> :

Đoạ
n
sc
ri
p
t
sẽ
th
ực
thi n
gay
khi tr
a
n
g
w
eb


oạ sc p sẽ ực gay a g eb
được mở.
B
 Đặt giữa tag <body> và </body> :

Đoạ

n
sc
ri
pt

được

t
h
ực

t
hi khi
t
r
a
n
g
w
eb

P
TRÌNH WE

oạ sc pt đượct ựct ta g eb
đang mở (sau khi thực thi các đoạn script
trong phần <head>
T
KẾ VÀ LẬ
P

 Số lượng đoạn script không hạn chế.
THIẾ
T
15
2/16/2011
16
JavaScript
 Giới thiệu JavaScript
 Chức năng
B
 Cú pháp và quy ước
P
TRÌNH WE

Cấu trúc lập trình cơ bản
T
KẾ VÀ LẬ
P

Cấu

trúc

lập

trình

cơ

bản

C
THIẾ
T
16

C
ác ví dụ
2/16/2011
17
Giới thiệu JavaScript
 Web browser thực thi thẻ script khi load trang
web HTML theo thứ tự từ trên xuống dưới
 Source code JavaScri
p
t có thể đ
ặ
t tron
g
file
B
p ặ g
riêng (*.js) và nhúng (embed, include) vào file
HTML bằng thuộc tính scr của thẻ script
P
TRÌNH WE
 Code JavaScript được browser xử lý cùng
T
KẾ VÀ LẬ
P
thứ tự với các thẻ HTML. Trừ các hàm

(function) chỉ được thực hiện khi có lời gọi
hàm
THIẾ
T
17
hàm
2/16/2011
18
Giới thiệu JavaScript
<html>
<body>
document.write(“Hello world!”);
<script type="text/javascript">
d i (“ ll ld!”)
B
d
ocument.wr
i
te
(“
He
ll
o wor
ld!”)
;
</script>
</body>
P
TRÌNH WE
</body>

</html>
T
KẾ VÀ LẬ
P
THIẾ
T
18
2/16/2011
19
Giới thiệu JavaScript
JavaScri
p
tIntro.html
p
B
P
TRÌNH WE
T
KẾ VÀ LẬ
P
THIẾ
T
19
//JavaScript document
alert(“JavaScript in external js
file!”);
external.js
2/16/2011
20

JavaScript – Cú pháp & quy ước
 Quy ước của ngôn ngữ lập trình

Biếnvàkiểudữ liệu

Biến

và

kiểu

dữ

liệu
 Toán tử và phép so sánh
ấ ề ể
B
 C
ấ
u trúc đi
ề
u khi
ể
n
 Hàm
P
TRÌNH WE
 Một số đối tượng xây dựng sẵn (build-
in)
T

KẾ VÀ LẬ
P
in)
 Các hàm mở cửa sổ thông báo
(pop
-
up windows)
THIẾ
T
20
(pop
-
up

windows)
2/16/2011
21
JavaScript – Cú pháp & quy ước
 JavaScript có cú pháp, ký hiệu tương tự
như Java và C
++
 Phân biệt hoa thường
 M
ọ
i l
ệ
nh
p
hải kết thúc bằn
g

dấu
;
B
ọ ệ p g
;
 Không phân biệt khoảng trắng, tab, xuống
dòng trong câu lệnh.
P
TRÌNH WE
//
Ghi chú 1 dòng
/* */
Ghi chú 1 khối
{ }
Khốilệnh
[ ]
Sử dụng cho mảng
T
KẾ VÀ LẬ
P
( )
Sử dụng cho hàm
\n, \t
Xuống hàng, ký tự Tab
\’
Ký tự nháy đơn trong chuỗi
\”
Ký tự nháy kép trong chuỗi
THIẾ
T

21
 Chuỗi phân biệt khi dùng dấu nháy đơn ‘
và dấu nháy kép “
2/16/2011
22
JavaScript – Phân biệt chuỗi với ‘ và ‘’
B
P
TRÌNH WE
T
KẾ VÀ LẬ
P
THIẾ
T
22
2/16/2011
23
JavaScript – Biến và kiểu dữ liệu
 Cách đặt tên biến

ắ
ầ
ằ
ấ

B
ắ
t đ
ầ
ub

ằ
ng mộtchữ cái hoặcd
ấ
u
_

A
Z
,
a z
,
0 9
,
:
p
hân bi
ệ
tHOA
,
Thườn
g
B

,
,
,_
p
ệ
,
g

 Khai báo biến
P
TRÌNH WE
 Dùng từ khóa var

Ví
dụ
:
var
count
=
10
amount
;
T
KẾ VÀ LẬ
P

Ví
dụ
:
var
count
10
,
amount
;
 Thậtsự tồntạikhibắt đầusử dụng lần
THIẾ
T

23
đầutiên
2/16/2011
24
JavaScript – Biến và kiểu dữ liệu
 Kiểu dữ liệu
 Number : số n
g
u
y
ên, thực
gy
 Boolean - True or False
 String - “Hello World”

object
B

object
 Array
 Null
P
TRÌNH WE
 Trong JavaScript, mọi thứ là Object  từ khóa
new để cấp phát. Một số kiểu dữ liệu cơ bản,
T
KẾ VÀ LẬ
P
không cần cấp phát
 Biến có thể lưu kiểu dữ li

ệ
u bất k
ỳ
và có thể
THIẾ
T
24
ệ ỳ
thay đổi kiểu dữ liệu trong quá trình hoạt động
2/16/2011
25
JavaScript – Biến và kiểu dữ liệu
 Biến tự đổi kiểu dữ liệu khi giá trị thay đổi
 Ví dụ:
var x = 10;
x = “hello world !”;
B
 Có thể cộng 2 biến khác kiểu dữ liệu

Ví d
ụ
:
P
TRÌNH WE

ụ
var x;
x = “12” + 34.5; // KQ: x = “1234.5”
T
KẾ VÀ LẬ

P
 Hàm parseInt(…), parseFloat(…) : Đổi chuỗi
sang số
THIẾ
T
25
sang

số
.