thiet_ke_web_chuong_4_laptrinhJavascript.pdf

CHƯƠNG 4
TỔNG QUAN VỀ NGÔN NGỮ
JAVASCRIPT
1
THIẾT KẾ WEB

NỘI DUNG
GIỚI THIỆU VỀ NGÔN NGỮ JAVASCRIPT
1
CÁC THÀNH PHẦN TRONG JAVASCRIPT
2
XỬ LÝ SỰ KIỆN VỚI JAVASCRIPT
3
2
HỘP THOẠI TRONG JAVASCRIPT
4
THƯ VIỆN JQUERY
5

3
▪ Javascript được phát triển bởi Netscape vào
khoảng thời gian 1995 - 1996.
▪ Javascript là một ngôn ngữ kịch bản (thông
dịch) có thể tích hợp vào trang web HTML giúp
xử lý các sự kiện khi người dùng tương tác.
▪ Trong thiết kế web, các đoạn mã Javascript
thường thực thi ở phía client (trình duyệt).

4
▪ Ví dụ: Sử dụng javascript để kiểm tra thông tin
Hiển thị thông báo lỗi khi nhấn nút Đăng nhập mà chưa
nhập thông tin Tài khoản và Mật khẩu

5
▪ Các đoạn mã Javascript được đưa vào HTML
bằng cách sử dụng cặp thẻ <script></script>
và đặt bên trong thẻ <head></head> hoặc
<body></body>.
▪ Nên đặt các đoạn mã Javascript ở phần cuối
trong thẻ <body></body> để đảm bảo các
thành phần được tải (loaded) đầy đủ.
CÁCH SỬ DỤNG

6
▪ Ví dụ:
CÁCH SỬ DỤNG
<!DOCTYPE html>
<html lang="vi">
<head>
<title>Javascript</title>
<script>
document.write("Hello world");
</script>
</head>
<body>
<h1>ĐHNH</h1>
<script>document.write("HUB");</sc
ript>
</body>
</html>

7
▪ Ví dụ:
CÁCH SỬ DỤNG
<!DOCTYPE html>
<html lang="vi">
<head>
<script>
alert("Hello world");
</script>
</head>
<body>
<h1>ĐHNH</h1>
</body>
</html>

8
▪ Ngoài cách sử dụng các đoạn mã javascript
đặt trực tiếp vào trang HTML, có thể tích hợp
các đoạn mã javascript lưu tại một file riêng
với phần mở rộng .js để sử dụng theo cú pháp
sau:
CÁCH SỬ DỤNG
<script type="text/javascript" src="myscript.js"></script>

9
▪ Javascript phân biệt chữ hoa và chữ thường.
▪ Chú thích:
• Chú thích một dòng: // . . .
• Chú thích nhiều dòng:
/* Chú thích trên
nhiều dòng . . . */
▪ Không cần kiểu dữ liệu khi thực hiện khai báo
biến.
▪ Mỗi dòng lệnh kết thúc bằng dấu ;
MỘT SỐ QUY TẮC CƠ BẢN

10
▪ Tên biến gồm ký tự, số, _, $.
▪ Tên biến bắt đầu bằng ký tự hoặc dấu _ hoặc
dấu $,
▪ Sử dụng var, let để khai báo biến.
BIẾN
<script>
var x = 5;
let y = 6;
</script>
▪ Có thể bỏ var, let khi khai báo biến
<script>
x = 5;
y = 6;
</script>

11
KIỂU DỮ LIỆU
▪ Mặc dù không cần kiểu dữ liệu khi khai báo biến
nhưng biến sẽ tự nhận dạng kiểu dữ liệu dựa vào
giá trị được gán.
▪ Một số kiểu dữ liệu trong Javascript:
• String
• Number
• Bigint
• Boolean
• Undefined
• Null
• Symbol
• Object

12
KIỂU DỮ LIỆU
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
// Booleans
let x = true;
let y = false;
// Object:
person = {firstName:"John", lastName:"Doe"};
// Array object:
cars = ["Saab", "Volvo", "BMW"];
// Date object:
date = new Date("2022-03-25");

13
TOÁN TỬ
▪ Được sử dụng để thực hiện các phép toán trên các
biến và các giá trị.
▪ Trong Javascript có một số nhóm toán tử sau:
• Toán tử toán học
• Toán tử gán
• Toán tử so sánh
• Toán tử luận lý

14
TOÁN TỬ TOÁN HỌC
Toán tử Mô tả Ví dụ
+ Cộng hai toán hạng x + y
- Trừ hai toán hạng x - y
* Nhân hai toán hạng x * y
/ Chia hai toán hạng x / y
%
Lấy phần dư của phép
chia nguyên
x % y
** Lũy thừa x ** y (xy)
++
Tăng giá trị biến lên một
giá trị
x = 0;
t = ++x;
--
Giảm giá trị biến xuống
một giá trị
x = 0;
t = x--;

15
TOÁN TỬ GÁN
Toán tử Ví dụ
= x = 5 (gán giá trị 5 cho biến x)
+= x += 3 tương đương x = x + 3
-= x -= 3 tương đương x = x - 3
*= x *= 3 tương đương x = x * 3
/= x /= 3 tương đương x = x / 3
%= x %= 3 tương đương x = x % 3
**= x **= 2 tương đương x = x ** 2

16
TOÁN TỬ SO SÁNH
Toán tử Mô tả
== Kiểm tra bằng nhau
===
Kiểm tra bằng nhau đồng nhất (giá trị và
kiểu dữ liệu)
!= Kiểm tra khác nhau
!==
Kiểm tra không đồng nhất (giá trị và kiểu
dữ liệu)
> Kiểm tra lớn hơn
< Kiểm tra nhỏ hơn
>= Kiểm tra lớn hơn hoặc bằng
<= Kiểm tra nhỏ hơn hoặc bằng

17
TOÁN TỬ LOGIC
Toán tử Mô tả Ví dụ
&&
Trả về kết quả là
True khi cả hai biểu
thức đều True
<script>
x = 10; y = 5;
if (x == 10 && y == 5)
alert("Hello world!");
</script>
||
Trả về kết quả là
True nếu một trong
hai biểu thức là True
<script>
x = 10; y = 8;
if (x == 10 || y == 5)
</script>
!
Đảo ngược giá trị
toán hạng, từ True
sang False và ngược
lại
<script>
x = 8;
if (!(x == 7))
</script>

18
CẤU TRÚC ĐIỀU KIỆN
Câu lệnh: if
if (hour < 18) {
greeting = "Good day";
}
if (hour < 18) {
}
else {
greeting = "Good evening";
}
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
}
else {
greeting = "Good evening";
}

19
CẤU TRÚC LẶP
Câu lệnh: for
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
for (var i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
In ra giá trị của biến text ?

20
CẤU TRÚC LẶP
Câu lệnh: while, do while
while (i < 10) {
text += "The number is " + i;
i++;
}
do {
text += "The number is " + i;
i++;
}
while (i < 10);

21
HÀM
▪ Sử dụng từ khóa function để định nghĩa theo cú
pháp sau:
function functionName([<danh sách tham số>]) {
<các câu lệnh>
[return <giá trị trả về>]
}
Ví dụ:
function writeMsg() {
document.write("Hello world!");
}
writeMsg(); // gọi hàm
let x = myFunction(4, 3);
function myFunction(a, b){
return a * b;
}

XỬ LÝ SỰ KIỆN
22
▪ Sự kiện trong HTML là các hành động diễn ra trong quá
trình người dùng tương tác với trang web hoặc khi các
trạng thái của trang web có sự thay đổi.
• Ví dụ: Nhấn một nút, nhấn một phím, đóng trình
duyệt, tải lại trang, . . .
▪ Các sự kiện thường được dùng để kích hoạt các đoạn
mã Javascript nhằm thực hiện một công việc cụ thể.
• Ví dụ: Hiển thị hộp thoại xác nhận khi nhấn vào nút
xóa sản phẩm, tải lại danh sách sinh viên khi chọn lại
thông tin lớp, . . .
SỰ KIỆN (EVENTS)

23
▪ Các sự kiện có thể được sử dụng giống như các thuộc
tính trong các thẻ HTML với cú pháp sau:
<html_tag event='JavaScript code’>
▪ Khi sự kiện xảy ra, đoạn mã Javascript sẽ được kích
hoạt và thực hiện chức năng cụ thể.
▪ Ví dụ:
<button onclick='alert("Hello")'>Click</button>
Sự kiện onlick sẽ được kích hoạt đoạn mã Javascript
khi nhấn chuột trái vào nút.
TẠO SỰ KIỆN

24
▪ Một số sự kiện khác
TẠO SỰ KIỆN
Sự kiện Mô tả
onchange Phần tử HTML có sự thay đổi
onclick Người dùng nhấn chuột trái vào phần tử HTML
onmouseover Người dùng di chuyển chuột đến phần tử HTML
onmouseout Người dùng di chuyển chuột khỏi phần tử HTML
onload Trình duyệt hoàn tất việc tải trang

25
▪ Khi trang web được tải xong, trình duyệt sẽ tạo ra một
Document Object Model (DOM) cho trang web, mỗi
phần tử (thẻ) được xem như là một đối tượng trong
DOM.
▪ HTML DOM gồm tất cả các phần tử (thẻ) trong web và
được tổ chức theo sơ đồ dạng cây:
DOM

26
▪ Javascript cung cấp các phương thức để truy
cập vào các đối tượng trong DOM và xử lý các
sự kiện thông qua đối tượng document
<!DOCTYPE html>
<html lang="vi">
<head>
</head>
<body>
<p id="demo"></p>
<b>Tài khoản</b><br>
<input type="text" id="demo-input" value="">
<script>
document.getElementById("demo").innerHTML = "Hello World!";
document.getElementById("demo-input").value = "admin";
document.getElementById("demo-input").style = "color:red";
</script>
</body>
</html>

27
▪ Một số phương thức:
Phương thức Mô tả
document.getElementById
Tìm phần tử bằng giá
trị thuộc id
document.getElementsByTagName
Tìm phần tử bằng tên
thẻ
document.getElementsByClassName
Tìm phần tử bằng giá
trị thuộc tính class

28
▪ Một số thuộc tính:
Thuộc tính Mô tả
element.innerHTML = new html content
Thay đổi nội dung bên
trong thẻ
element.attribute = new value
Thay đổi giá trị thuộc
tính của thẻ

29
THÊM SỰ KIỆN CHO ĐỐI TƯỢNG TRONG DOM
▪ Người sử dụng tương tác website thông qua
các đối tượng trong DOM bằng cách thực hiện
các thao tác như: click vào nút, nhập dữ liệu vào
ô thông tin, lựa chọn các option trong checkbox,
. . . → tạo ra sự kiện.
▪ Một số sự kiện:
• click
• change
• mouseover
• mouseout
• . . .

30
▪ Mỗi sự kiện gắn với một đối tượng. Phương
thức addEventListener để thêm sự kiện cho một
đối tượng theo cú pháp sau:
element.addEventListener("click", function(){ . . . });
Viết code xử lý
cho sự kiện click

31
▪ Ví dụ:
<img id = "light-bulb-img" src = "pic_bulboff.gif">
<button id="turn-on">Turn on</button>
<button id="turn-off">Turn off</button>
<script>
document.getElementById("turn-on").addEventListener("click", function(){
document.getElementById("light-bulb-img").src = "pic_bulbon.gif";
});
document.getElementById("turn-off").addEventListener("click", function(){
document.getElementById("light-bulb-img").src = "pic_bulboff.gif";
});
</script>

32
HỘP THOẠI
▪ Javascript hỗ trợ ba kiểu hộp thoại gồm:
• Hộp thoại Alert
• Hộp thoại Confirmation
• Hộp thoại Prompt

33
HỘP THOẠI ALERT
▪ Thường được sử dụng để hiển thị các cảnh báo
hoặc các thông báo cho người dùng.
▪ Sử dụng hàm alert.
<html>
<body>
<p>Click the following button to see the result: </p>
<button onclick = "Warn();">Click</button>
<script type = "text/javascript">
function Warn() {
alert ("This is a warning message!");
}
</script>
</body>
</html>

34
HỘP THOẠI CONFIRMATION
▪ Thường được sử dụng để xác nhận lại các tùy
chọn của người dùng.
▪ Sử dụng hàm confirm.
▪ Hộp thoại sẽ hiển thị hai nút là: OK và Cancel.
Nếu người dùng nhấn OK thì hàm confirm sẽ
trả về giá trị True, ngược lại trả về False.

35
HỘP THOẠI CONFIRMATION
▪ Ví dụ:
<html>
<body>
<button onclick = "getConfirmation();">Click</button>
function getConfirmation() {
var retVal = confirm("Do you want to continue ?");
if( retVal == true ) {
document.write ("User wants to continue!");
return true;
} else {
document.write ("User does not want to continue!");
return false;
}
}
</script>
</body>
</html>

36
HỘP THOẠI PROMPT
▪ Thường được sử dụng để hiển thị hộp thoại cho
phép người dùng nhập dữ liệu.
▪ Sử dụng hàm prompt.
▪ Hộp thoại sẽ hiển thị hai nút là: OK và Cancel.
Nếu người dùng nhấn OK thì hàm prompt sẽ trả
về giá trị mà người dùng nhập vào, ngược lại trả
về giá trị null.

37
HỘP THOẠI PROMPT
▪ Ví dụ:
<html>
<body>
<button onclick = "getValue();">Click</button>
function getValue() {
var retVal = prompt("Enter your name : ", "your name here");
document.write("You have entered : " + retVal);
}
</script>
</body>
</html>

THƯ VIỆN JQUERY
38
JQUERY
▪ JQuery là một thư viện JavaScript mã nguồn
mở được thiết kế nhằm mục đích đơn giản hóa
các thao tác trên HTML DOM, cũng như xử lý
sự kiện và nhiều tính năng khác.
▪ Tích hợp file thư viện JQuery vào trang web:
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery
/3.6.1/jquery.min.js"></script>
</head>

THƯ VIỆN JQUERY
39
JQUERY
▪ Cú pháp cơ bản:
$(selector).action()
Thay đổi selector và action tùy vào mục đích
▪ Khi sử dụng, các phương thức JQuery được đặt
trong sự kiện ready
$(document).ready(function(){
// Sử dụng các phương thức JQuery
});

THƯ VIỆN JQUERY
40
<p id="demo"></p>
<b>Tài khoản</b><br>
<input type="text" id="demo-input" value="">
<script>
document.getElementById("demo").innerHTML = "Hello World!";
document.getElementById("demo-input").value = "admin";
document.getElementById("demo-input").style = "color:red";
</script>
<script>
$("#demo").html("Hello World!");
$("#demo-input").val("admin");
$("#demo-input").attr("style","color:red");
});
</script>
Sử dụng JQuery

THƯ VIỆN JQUERY
41
<img id = "light-bulb-img" src = "pic_bulboff.gif">
<button id="turn-on">Turn on</button>
<button id="turn-off">Turn off</button>
<script>
document.getElementById("turn-on").addEventListener("click", function(){
document.getElementById("light-bulb-img").src = "pic_bulbon.gif";
});
document.getElementById("turn-off").addEventListener("click", function(){
document.getElementById("light-bulb-img").src = "pic_bulboff.gif";
});
</script>
<script>
$("#turn-on").click(function(){
$("#light-bulb-img").attr("src","pic_bulbon.gif");
});
$("#turn-off").click(function(){
$("#light-bulb-img").attr("src","pic_bulboff.gif");
});
}) Sử dụng JQuery

thiet_ke_web_chuong_4_laptrinhJavascript.pdf

More Related Content

Similar to thiet_ke_web_chuong_4_laptrinhJavascript.pdf (20)

thiet_ke_web_chuong_4_laptrinhJavascript.pdf