Bài giảng Bài 1: Làm quen với JavaScript - ĐH FPT

Bài 1:
Làm quen vớ i JavaScript


Mụ c tiêu bài họ c
Giớ i thiệ u về JavaScript
Lị ch sử JavaScript
Mụ c đích củ a JavaScript
JavaScript và Brow ser
Chư ơ ng trình JavaScript
Vị trí mã JavaScript
Sơ lư ợ c về mã JavaScript
I DE cho JavaScript

Làm quen vớ i JavaScript

2


JavaScript cái gì???
HTML: Chứ a nộ i dụ ng
CSS: Cách trình bày
JavaScript: Hành độ ng củ a
củ a trang web

JavaScript hồ i đáp lạ i các
tư ơ ng tác củ a ngư ờ i dùng
Khi ngư ờ i dùng nhấ n chuộ t
Khi ngư ờ i dùng nhấ n vào
menu

Làm quen vớ i JavaScript

3


Lị ch sử

JavaScript

JavaScript đư ợ c phát triể n bở i Brendan Eich thuộ c Netscape vào
khoả ng thờ i gian 1995-1996
Đầ u tiên ngôn ngữ này có tên gọ i là LiveScript, như ng sau đó đổ i
tên thành JavaScript do ngôn ngữ Java trong thờ i điể m hiệ n tạ i
rấ t nổ i tiế ng
Cùng vớ i lợ i ích mà danh tiế ng củ a ngôn ngữ Java đư a lạ i,
JavaScript cũng gặ p phả i nhữ ng bấ t lợ i do có liên q uan đế n Java bở i
Java không hỗ trợ tố t cho Web
Chỉ nhữ ng năm gầ n đây, JavaScript mớ i tránh đư ợ c nhữ ng bấ t lợ i
đó

Làm quen vớ i JavaScript

4


Lị ch sử

JavaScript

JavaScript đư ợ c tạ o ra vớ i mụ c đích xử lý phía client để tư ơ ng tác

vớ i ngư ờ i dùng như
Xác đị nh tính hợ p lệ củ a Form (Validate form)
Xác đị nh tính hợ p lệ cho Form trên Client thay vì trên Server sẽ làm
giả m tả i cho Server và trả về kế t quả lậ p tứ c cho ngư ờ i dùng

Làm việ c vớ i ả nh để hồ i đáp lạ i ngư ờ i dùng…

Validate form

Slide Show
Làm quen vớ i JavaScript

5


ECMAScript
Năm 1997, Microsoft, Netscape và European Computer
Manufactures đư a ra tài liệ u đặ c tả đầ u tiên cho JavaScript có tên
gọ i là ECMAScript (hay ECMA-262)
Năm 1999, phiên bả n 3 củ a ECMA-262 ra đờ i
Năm 2009, phiên bả n 5 củ a ECMA-262 ra đờ i và là phiên bả n mớ i
nhấ t
Tấ t cả các phiên bả n củ a ECMA ra đờ i đề u đư ợ c các trình duyệ t phổ
biế n như FireFox, Safari và Opera hỗ trợ , như ng mỗ i trình duyệ t hỗ
trợ khác nhau
Lậ p trình viên phả i viế t nhiề u phiên bả n cho
mộ t tác vụ

Làm quen vớ i JavaScript

6


Xu hư ớ ng củ a JavaScript
Đặ c tả ECMA-262 ngày càng đư ợ c phát triể n làm cho JavaScript
ngày càng hoàn thiệ n hơ n
Cùng vớ i HTML5, CSS3 JavaScript ngày càng trở nên mạ nh mẽ , có
thể viế t đư ợ c các ứ ng dụ ng như trên desktop
Các trình duyệ t đang cố gắ ng hỗ trợ JavaScript tố t hơ n để mã
JavaScript có thể chạ y ổ n đị nh trên tấ t cả các trình duyệ t
Lậ p trình viên đư ợ c hỗ trợ bở i các thư việ n có sẵ n như JQuery,
JSON, YUI… làm cho việ c lậ p trình JavaScript trở nên dễ dàng hơ n
JavaScript kế t hợ p vớ i các công nghệ khác như Java, Flash,
ActivateX để hỗ trợ các tính năng như đa phư ơ ng tiệ n hay đồ họ a…
JavaScript đang phát triể n và ngày càng hoàn thiệ n hơ n, hư ớ ng
đế n có thể viế t các ứ ng dụ ng như trên desktop
Tham khả o
Overview: JavaScript, Flash, Java, Silverlight and ActiveX (Liya Kantor) (1)
Làm quen vớ i JavaScript

7


JavaScript có thể làm
Thự c hiệ n các tác vụ phía Client
Tạ o menu đổ xuố ng
Thay đổ i nộ i dung trên trang web
Thêm các thành phầ n độ ng vào trang web

Mộ t số trang web sử dụ ng JavaScript tạ o ra các hiệ u ứ ng

http:/ / dibusoft.com/
http:/ / www.hotel-oxford.ro/
http:/ / www.dibusoft.com/

JavaScript có thể viế t GAME
http:/ / www.themaninblue.com/ experiment/ BunnyHunt/
http:/ / www.e-forum.ro/ bomberman/ dynagame.html# top

Làm quen vớ i JavaScript

8


Viế t mã JavaScript đầ u tiên
Viế t mã JavaScript đầ u tiên
Mở Browser (IE hoặ c FireFox)
Gõ vào thanh đị a chỉ : javascript: alert(“Hello World”)
Kế t quả :

Chư ơ ng trình JavaScript bao gồ m các câu lệ nh đư ợ c thông dị ch
bở i trình thông dị ch tích hợ p sẵ n trên Brow ser
JavaScript phụ thuộ c nhiề u vào Browser

Làm quen vớ i JavaScript

9


Mộ t chư ơ ng trình
JavaScript gồ m nhữ ng gì?

Mộ t chư ơ ng trình JavaScript cũng giố ng như chư ơ ng tr ình viế t bằ ng
các ngôn ngữ khác
Mộ t chư ơ ng trình javaScript bao gồ m nhiề u câu lệ nh
Mộ t câu lệ nh đư ợ c tạ o nên từ các toán tử , từ đị nh danh, biế n…

var x = 4
Câu lệ nh này khai báo biế n x có giá trị bằ ng 4

Làm quen vớ i JavaScript

10


Mã JavaScript trên trang Web
Mã JavaScript đư ợ c đặ t trong thẻ < script> trong thẻ
< head> < / head> hoặ c (và) < body> < / body>
<head>
<title>A Web Page Title</title>
<script type="text/javascript">
Viế t mã javscript ở ây
// Vi
</script>
</head>

<body>
<script type="text/javascript">
document.write("hello");
document.write(" world");
</script>
</body>

Nên đặ t mã Javascript trong thẻ < script> đặ t ở cuố i phầ n body để
đả m bả o tấ t cả các thành phầ n đã đư ợ c load
Làm quen vớ i JavaScript

11


Công cụ để lậ p trình JavaScript
JavaScript là ngôn ngữ thông dị ch, bộ thông dị ch đư ợ c tích hợ p
sẵ n trên trình duyệ t nên không cầ n bấ t cứ công cụ đặ c biệ t nào
để lậ p trình
Có thể viế t mã JavaScript trên chư ơ ng trình soạ n thả o văn bả n như
notepad

Làm quen vớ i JavaScript

12


Quy tắ c cơ bả n củ a JavaScript
JavaScript phân biệ t chữ hoa chữ thư ờ ng
JavasScript bỏ qua ký tự cách
Chú thích
Chú thích nhiề u dòng

/* Dây là chú thích nhiề u dòng
Bạ n có thể viế t chú thích trên nhiề u dòng */
Chú thích trên mộ t dòng

// ây là ký hiệ u chú thích mộ t dòng

// Chú thích này chỉ chú thích ư ợ c cho mộ t dòng
Ký tự dấ u chấ m phẩ y (;) để kế t thúc mộ t dòng lệ nh. Ký tự này là
bắ t buộ c

Làm quen vớ i JavaScript

13


Câu lệ nh JavaScript
Câu lệ nh JavaScript chia làm hai loạ i
Câu lệ nh đơ n

var x = 4
Câu lệ nh kép

If( x ==1){
//Vi
//Viế t câu llệ nh ở
} else {
//Vi
//Viế t câu llệ nh ở
}

Làm quen vớ i JavaScript

ây
ây

14

Từ

khóa

JavaScript có tậ p các từ khóa
break

delete

if

this

while

case

do

in

throw

with

catch

else

instanceof

try

continue

finally

new

typeof

debugger

for

return

var

default

function

switch

void

Tham khả o thêm về các từ khóa trong tài liệ u ECMA-262

Làm quen vớ i JavaScript

15


Hàm
JavaScript cung cấ p nhiề u hàm dự ng sẵ n (built-in function)
alert()

Mộ t số hàm không đư ợ c hỗ trợ trên tấ t cả các trình duyệ t.
Kiể m
tra xem Browser có hỗ trợ hàm đó không là điề u rấ t quan trọ ng (Sẽ
đư ợ c đề cậ p kỹ hơ n trong các chư ơ ng sau này)
JavaScript cũng cho phép ngư ờ i dùng tự đị nh nghĩa hàm

Làm quen vớ i JavaScript

16


Demo hàm
<html><head>
<script type="text/javascript">
function ham(x) {
if (x > 0) {
alert("Hi");
} else {
alert("hello");
}

}
</script>
</head>
<body>

Hien thi loi chao

<script type="text/javascript">
var x = 1;
ham(x);
</script>
</body></html>
Làm quen vớ i JavaScript

Xem Demo/Function
17


Lư u mã JavaScript vào file bên ngoài
Vớ i nhữ ng website có nhiề u trang web. Các trang web cùng sử
dụ ng mộ t fuction thì việ c lư u mã JavaScript ra mộ t file riêng là rấ t
cầ n thiế t
Viế t mã JavaScript thành file riêng sẽ tách phầ n nộ i dung (HTML)
và hành độ ng (JavaScript)
Trang web dễ bả o trì hơ n
Các bư ớ c lư u mã JavaScript ra file bên ngoài
B1. Tạ o file txt mớ i
B2. Viế t mã JavaScript vào
B3. Đổ i tên file thành js
B4. Gán đị a chỉ củ a file cho thuộ c tính
Chú ý: Nên để file js và html cùng mộ t thư mụ c

Làm quen vớ i JavaScript

18


Lư u mã JavaScript vào file bên ngoài
Nộ i dung file myscript.js

function ham(x) {
if (x > 0) {
alert("Hi");
} else {
alert("hello");
}
}

Làm quen vớ i JavaScript

19


Lư u mã JavaScript vào file bên ngoài
Nộ i dung file HTML

<html>
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>

Hien thi loi chao

<script type="text/javascript">
var x = 1;
ham(x);
</script>
</body>
</html>
Làm quen vớ i JavaScript

20


Lư u mã JavaScript vào file bên ngoài
<html>
<head>
<script type="text/javascript" src="myscript.js">
</script>
</head>
<body>

Hien thi loi chao

<script type="text/javascript">
var x = 1;
ham(x);
</script>
</body>
</html>
function ham(x) {
if (x > 0) {
alert("Hi");
} else {
alert("hello");

}
}
Làm quen vớ i JavaScript

<html><head>
<script type="text/javascript">
function ham(x) {
if (x > 0) {
alert("Hi");
} else {
alert("hello");
}
}
</script>
</head>
<body>

Hien thi loi chao

<script type="text/javascript">
var x = 1;
ham(x);
</script>
</body></html>

21


I DE cho Javascript
Có rấ t nhiề u I DE hỗ trợ cho việ c viế t code nhanh hơ n
Apache
Visual Studio

Visual Studio là công cụ mạ nh mẽ và dễ sử dụ ng
Vào trang http:/ / www.microsoft.com/ express/ web để cài đặ t

Làm quen vớ i JavaScript

22


Tạ o file HTML để viế t mã
B1. Vào File

Làm quen vớ i JavaScript

New File… để tạ o file

23


Tạ o file HTML để viế t mã
B2. Chọ n Web trong cử a sổ Categories
B3. Chọ n HTML page trong Templete

Làm quen vớ i JavaScript

24


Tạ o file HTML để viế t mã
B4. Chọ n File

Save HTML Page1.html as để lư u file này vào
thư mụ c cầ n lư u

Làm quen vớ i JavaScript

25