C4 Javascript

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH
TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN
LẬP TRÌNH SỰ KIỆN VỚI JAVASCRIPT

LẬP TRÌNH ỨNG DỤNG WEB
ThS. Đỗ Thị Hương Lan
1
NỘI DUNG
1. Giới thiệu về Javascript

2. Nhúng Javascript vào trang web
3. Kiểu dữ liệu & Các cú pháp Javascript
4. Xử lý sự kiện
5. Ví dụ
2 2
Giới thiệu về Javascript
o JavaScript là ngôn ngữ kịch bản được hãng Sun Microsystems và Netscape
phát triển.
o JavaScript thường được viết tắt là JS.
o JavaScript không chỉ dùng cho phía Frontend.
o Ở phía Server, Node.js là một ví dụ nổi tiếng nhất.
o Một số cơ sở dữ liệu, như MongoDB và CouchDB, cũng sử dụng JavaScript
làm ngôn ngữ lập trình của họ.
o Lưu ý: Javascript và Java là 2 ngôn ngữ khác nhau
3
Tại sao cần học Js
o JavaScript là một trong 3 ngôn ngữ cơ bản mà tất cả các trang Web đều dùng
1. HTML – quyết nghĩa nội dung của các trang Web
2. CSS – xử lý về mặt giao diện
3. JavaScript – cho phép lập trình hành vi, sự kiện
4
Cú pháp js cơ bản
o JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát
triển từ C.
5
Nhúng Javascript vào trang web
o Các ví dụ JavaScript cũ cần sử dụng thuộc tính type: <script type = "text /
javascript">.
o Hiện tại, thuộc tính type không bắt buộc.
o Có thể nhúng JS ở bất kỳ đâu trong trang web, ở thẻ <head> hoặc <body>
o Ngoài ra, có thể tạo file js và thêm vào website (tương tự css)
<script type="text/javascript">
Nhập code tại đây
</script>
6
o Đặt giữa tag <head> và </head>: script sẽ thực thi ngay khi trang web được
mở.
o Đặt giữa tag <body> và </body>: script trong phần body được thực thi khi
trang web đang mở (sau khi thực thi các đoạn script có trong phần <head>).
o Số lượng đoạn client-script chèn vào trang không hạn chế.
7
<html>
<head>
some statements
</script>
</head>
<body>
some statements
</script>
<script src=“Tên_file_script.js"></script>
</body>
</html>
8
Đầu ra (output) của JS
o JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau:
▪ Viết thành một phần tử HTML, sử dụng innerHTML.
▪ Viết vào đầu ra HTML bằng document.write().
▪ Viết vào một dialog cảnh báo, sử dụng window.alert().
▪ Viết vào giao diện console, sử dụng console.log().
▪ …
9
Biến (Variable) của js
o Cách đặt tên biến
▪ Tuân thủ theo nguyên tắc đặt tên như lập trình c
▪ A..Z,a..z,0..9,_ : phân biệt HOA, Thường
o Khai báo biến
▪ Sử dụng từ khóa var (let, const …)
▪ Ví dụ: var count=10, amount;
▪ Không cần khai báo biến trước khi sử dụng, biến thật sự tồn tại khi bắt đầu sử
dụng lần đầu tiên
10
Kiểu dữ liệu Ví dụ Mô tả
Object var listBooks = new Array(10) ; Trước khi sử dụng, phải cấp
phát bằng từ khóa new
String “The cow jumped over the moon.” Chứa được chuổi unicode
“40” Chuỗi rỗng “”
Number 0.066218 Theo chuẩn IEEE 754
12
boolean true / false
undefined var myVariable ; myVariable = undefined
null connection.Close(); connection = null
11
o Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu trữ thay đổi
▪ Ví dụ:
▪ var x = 10; // x kiểu Number
▪ x = “hello world !”; // x kiểu String
o Có thể cộng 2 biến khác kiểu dữ liệu
o Ví dụ:
var x;
x = “12” + 34.5; // KQ: x = “1234.5”
o Hàm parseInt(…), parseFloat(…) : Đổi KDL từ chuỗi sang số.
12
Ví dụ
<html>
<head>
<script>
var a = "12" + 7.5;
document.write(a);
</script>
</head>
</html>
13
Kiểu dữ liệu và các phép toán
o Kiểu số có hai loại thông dụng là kiểu số nguyên và kiểu số thực.
o Ví dụ: var a =10, b =100, ten = “Nguyen Van Ba”;
o Các phép toán trên kiểu số
o +, +=, -, - =, *, *=, /, /=, % (chia lấy phần dư), ++ (phép tăng một đơn vị), --
(phép giảm một đơn vị).
o Các phép so sánh: < (nhỏ), <= (nhỏ hơn hay bằng), >(lớn), >= , = = (bằng), !=
(khác).
14
VÍ DỤ
15
CÁC QUY TẮC CHUNG
o Khối lệnh được bao trong dấu { }
o Mỗi lệnh nên kết thúc bằng dấu ;
o Cách ghi chú thích:
o // Chú thích 1 dòng
o /* Chú thích
nhiều dòng */
16
KHAI BÁO HÀM
o Dùng từ khóa function để khai báo hàm. Muốn trả về giả trị của hàm ta dùng
từ khoá return.
o Dạng thức khai báo chung:
function Tên_hàm(thamso1, thamso2,..)
{
………
}
o Hàm có giá trị trả về:
function Tên_hàm(thamso1, thamso2,..)
{
………
return (value);
}
17
KHAI BÁO HÀM
18
Các sự kiện thông dụng
o Các sự kiện được hỗ trợ bởi hầu hết các đối tượng
• onClick • onLoad
• onFocus • onSubmit
• onChange • onResize
• onBlur • ………
• onMouseOver
• onMouseOut
• onMouseDown
• onMouseUp
19
Ví dụ hàm onload()
<head>
<script language=“Javascript”>
function GreetingMessage()
{
window.alert(“Welcome to my
world”);
}
</script>
</head>
<body onload=“GreetingMessage()”>
</body>
20
Danh sách sự kiện đầy đủ
Event Occurs when...

onabort a user aborts page loading
onblur a user leaves an object
onchange a user changes the value of an object
onclick a user clicks on an object
ondblclick a user double-clicks on an object
onfocus a user makes an object active
onkeydown a keyboard key is on its way down
Onkeypress a keyboard key is pressed
onkeyup a keyboard key is released
21
Danh sách sự kiện đầy đủ (tt)
a page is finished loading. Note: In Netscape this

onload
event occurs during the loading of a page!
onmousedown a user presses a mouse-button
onmousemove a cursor moves on an object
onmouseover a cursor moves over an object
onmouseout a cursor moves off an object
onmouseup a user releases a mouse-button
onreset a user resets a form
onselect a user selects content on a page
onsubmit a user submits a form
onunload a user closes a page
22

C4 Javascript

Uploaded by

Copyright:

Available Formats

You might also like

C4 Javascript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C4 Javascript

Uploaded by

Copyright:

Available Formats

ĐẠI HỌC QUỐC GIA THÀNH PHỐ HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

LẬP TRÌNH SỰ KIỆN VỚI JAVASCRIPT

ThS. Đỗ Thị Hương Lan

1. Giới thiệu về Javascript

null connection.Close(); connection = null

Event Occurs when...

a page is finished loading. Note: In Netscape this

You might also like