Bài giảng Thiết kế và lập trình Web - Bài 4: JS – JavaScript
Thiết kế và lập trình Web
Bꢀi 4
JS – JavaScript
Viện CNTT & TT
Thiết kế và lập trình Web
Nội dung
. Giới thiệu về Javascript
. Nhúng Javascript vào trang web
. Kiểu dữ liệu & Các cú pháp Javascript
. Xử lý sự kiện
. DOM HTML với Javascript
. Ví dụ
Thiết kế và lập trình Web
Giới thiệu về Javascript
. Script?
– Ngôn ngữ kịch bản
– Là một ngôn ngữ lập trình cho phép tạo ra sự điều khiển trong
một ứng dụng khác.
– Các ngôn ngữ kịch bản thường được thông dịch
. JS là ngôn ngữ Client-side script hoạt động trên trình duyệt
của người dùng ( client )
. Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần
thiết trên server.
. Giúp tạo các hiệu ứng, tương tác cho trang web.
Thiết kế và lập trình Web
Giới thiệu về Javascript
. Client-Side Script:
– Script được thực thi tại Client-Side ( trình duyệt ): Thực hiện
các tương tác với người dùng ( tạo menu chuyển động, … ) ,
kiểm tra dữ liệu nhập, …
. Server-Side Script:
– Script được xử lý tại Server-Side, nhằm tạo các trang web có
khả năng phát sinh nội dung động. Một số xử lý chính: kết nối
CSDL, truy cập hệ thống file trên server, phát sinh nội dung
html trả về người dùng…
Thiết kế và lập trình Web
Giới thiệu về Javascript
. Cung cấp sự tương tác với người dùng
– Sự kiện do người dùng tạo ra: di chuột, click chuột…
– Sự kiện do hệ thống tạo ra: thay đổi kích thước trang, tải
trang…
. Thay đổi động nội dung
– Thay đổi nội dung và vị trí các thành phần trên trang Web theo
sự tương tác của người dùng
. Hợp lệ hóa dữ liệu
– Kiểm tra xem dữ liệu có hợp lệ không trước khi nó được gửi
(submit) đến Web Server để xử lý
Thiết kế và lập trình Web
Nội dung
. Giới thiệu về Javascript
. Nhúng Javascript vào trang web
. Kiểu dữ liệu & Các cú pháp Javascript
. Xử lý sự kiện
. DOM HTML với Javascript
. Ví dụ
Thiết kế và lập trình Web
Nhúng Javascript vào trang web
Định nghĩa script trực tiếp trong trang html:
<script type=“text/javascript”>
<!--
// Lệnh Javascript
-->
</script>
Nhúng sử dụng script cài đặt từ 1 file .js khác:
<script src=“xxx.js”></script>
Thiết kế và lập trình Web
Nhúng Javascript vào trang web
. Đặt giữa tag <head> và </head>: script sẽ thực thi ngay khi
trang web được mở.
. Đặ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>).
. Số lượng đoạn client-script chèn vào trang không hạn chế.
. File JavaScript bên ngoài cho phép sử dụng lại nhiều lần và chỉnh
sửa dễ dàng
Thiết kế và lập trình Web
Nhúng Javascript vào trang web
<html>
<head>
<script language="javascript">
document.write("Welcome to JavaScript");
</script>
</head>
<body>
</body>
</html>
Thiết kế và lập trình Web
Nội dung
. Giới thiệu về Javascript
. Nhúng Javascript vào trang web
. Kiểu dữ liệu & Các cú pháp Javascript
. Xử lý sự kiện
. DOM HTML với Javascript
. Ví dụ
Thiết kế và lập trình Web
Các quy tắc chung
. Khối lệnh được bao trong dấu {}
. Mỗi lệnh nên kết thúc bằng dấu ;
. Cách ghi chú thích:
– // Chú thích 1 dòng
– /* Chú thích
nhiều dòng */
Thiết kế và lập trình Web
Biến số trong Javascript
. Cách đặt tên biến
– Bắt đầu bằng một chữ cái hoặc dấu _
– A..Z,a..z,0..9,_ : phân biệt HOA, Thường
. Khai báo biến
– Sử dụng từ khóa var
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
Thiết kế và lập trình Web
Script
Global variable
Biến số trong Javascript
Function 1
Local variable
Function 2
Local varibale
. Phạm vi của biến
– Được xác định bởi nơi biến được khai báo
. Biến toàn cục
– Khai báo bên ngoài hàm
– Được truy cập từ mọi nơi trong kịch bản
– Khai báo không cần từ khóa var
. Biến cục bộ
– Khai báo bên trong hàm
– Phạm vi trong hàm khai báo
– Bắt buộc phải có từ khóa var
Thiết kế và lập trình Web
Kiểu dữ liệu trong Javascript
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 “”
0.066218
12
Number
Theo chuẩn IEEE 754
true / false
boolean
var myVariable ;
myVariable = undefined
connection = null
undefined
null
connection.Close();
Thiết kế và lập trình Web
Đổi kiểu dữ liệu
. 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
. Có thể cộng 2 biến khác kiểu dữ liệu
Ví dụ:
var x;
x = “12” + 34.5; // KQ: x = “1234.5”
. Hàm parseInt(…), parseFloat(…) : Đổi KDL từ chuỗi sang
số.
. Chuyển không thành công: “NaN”
Thiết kế và lập trình Web
Đổi kiểu dữ liệu
<script language="javascript">
var x = 10;
document.write(x);
x=true;
x = "Hello World";
document.write(x);
x = "12"+4.3;
document.write(x);
x = parseInt("-32");
document.write(x);
</script>
Thiết kế và lập trình Web
Phép toán số học
Phép toán
Mô tả
Ví dụ
+
Cộng A = 5 + 8
Trừ A = 8 – 5
Chia A = 20 / 5
Số dư 10 % 3 = 1
Tăng 1 ++ x và x ++
Giảm 1 -- x và x --
-
/
%
++
--
-
Đảo dấu
nếu A = 5
thì –A = -5
Thiết kế và lập trình Web
Phép toán so sánh
Phép Mô tả so sánh
toán
Ví dụ (x=5) Kết quả
= = Bằng giá trị
x = = 5
true
= = = Bằng giá trị và
x = = = “5” false
kiểu
! = Không bằng
x ! = 4
x > 5
true
false
true
false
true
>
Lớn hơn
>=
<
Lớn hơn hoặc bằng x >= 5
Nhỏ hơn x < 4
Nhỏ hơn hoặc bằng x <=5
<=
Thiết kế và lập trình Web
Phép toán logic
Phép Mô tả Ví dụ Kết quả
toán
(x=6, y=3)
&& And (x<10)&& (y>1) true
|| Or (x<1)|| (y>5) false
! Not !(x==y) true
Thiết kế và lập trình Web
Phép toán định lượng
. Phép toán điều kiện
Cú pháp
tênbiến = điềukiện ? giátrị1:giátrị2;
Ví dụ:
status = (diem >= 5) ? “đạt”: “thi lại”;
20
Tải về để xem bản đầy đủ
136 trang
20760
Free
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế và lập trình Web - Bài 4: JS – JavaScript", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- bai_giang_thiet_ke_va_lap_trinh_web_bai_4_js_javascript.pdf
