Ngôn ngữ kịch bản
Dạng ngôn ngữ lập trình cấp cao
Ngôn ngữ thông dịch, mã lệnh được thông dịch trực tiếp
ngay khi thực thi.
Ngôn ngữ biên dịch sẽ dịch mã nguồn sang mã máy, hay mã
trung gian trước khi thực thi.
Các ngôn ngữ script thông dụng
JavaScript, VBScript, ASP, PHP, JSP, ActionScript
53 trang
|
Chia sẻ: thuychi16
| Lượt xem: 453
| Lượt tải: 0
Bạn đang xem trước
20 trang
tài liệu Giáo trình môn học Javascript, để xem tài liệu hoàn chỉnh bạn click vào nút DOWNLOAD ở trên
1
Ngôn ngữ kịch bản
Dạng ngôn ngữ lập trình cấp cao
Ngôn ngữ thông dịch, mã lệnh được thông dịch trực tiếp
ngay khi thực thi.
Ngôn ngữ biên dịch sẽ dịch mã nguồn sang mã máy, hay mã
trung gian trước khi thực thi.
Các ngôn ngữ script thông dụng
JavaScript, VBScript, ASP, PHP, JSP, ActionScript
Một số khái niệm cơ bản
2
Ngôn ngữ kịch bản trên server (server-side scripting)
Công nghệ thực thi trên web server dùng để xử lý các yêu
cầu của user bằng cách tạo ra các trang HTML động chứa
kết quả xử lý trả về cho user
Ngôn ngữ phía server thường cung cấp khả năng tương
tác với CSDL
Các ngôn ngữ phổ biến: CGI, Cold Fusion, ASP, ASP.NET,
PHP, JSP
Một số khái niệm cơ bản
3
Ngôn ngữ kịch bản trên client (client-side scripting)
Ngôn ngữ thực thi trên trình duyệt, phía client. Dùng để
xử lý các yêu cầu của người dùng.
Các mã lệnh được nhúng vào HTML hay file riêng. User
hoàn toàn có thể xem source code của ngôn ngữ kịch bản
phía client.
JavaScript và VbScript là hai ngôn ngữ script thông dụng
hiện nay.
Một số khái niệm cơ bản
4
JS là ngôn ngữ script ở client, dùng để xử lý và tương tác
với các thành phần HTML.
JS là dạng ngôn ngữ thông dịch
JS không liên quan đến ngôn ngữ Java
JS được phát triển bởi Netscape
Chỉ thực thi trên trình duyệt
Không có đầy đủ tính năng của ngôn ngữ lập trình
Cú pháp đơn giản, gần giống với ngôn ngữ C
JavaScript – tổng quan
5
Brendan Eich
JS có thể làm được gì?
Cung cấp cho người thiết kế HTML công cụ lập trình
Cho phép đặt đoạn văn bản động vào trang web
Có thể tác động các sự kiện trong trang HTML
Có thể đọc/ghi các thành phần của HTML
Dùng để check dữ liệu từ người dùng
Có thể check phiên bản trình duyệt
Có thể thao tác cookie của trang web.
JavaScript – tổng quan
6
Các bước thực thi của JS
1. Trình duyệt tải trang web về
2. Trình duyệt kiểm tra xem có mã JS trong web hay không
3. Nếu có, trình duyệt sẽ chuyển mã JS cho bộ thông dịch
4. Bộ thông dịch xử lý và thực thi các mã lệnh JS
5. Các mã lệnh có thể tác động đến các thành phần của
trang web.
6. Trình duyệt hiển thị toàn bộ nội dung web.
JavaScript – tổng quan
7
Cách đặt mã lệnh JS vào trang web
Internal: đặt trong head hay body
JavaScript – tổng quan
8
Cách đặt mã lệnh JS vào trang web
External: tạo tập tin bên ngoài và liên kết tập tin đó trong
phần head.
JavaScript – tổng quan
9
Các toán tử toán học
Toán tử (operator)
10
y = 5
Các toán tử gán
Toán tử (operator)
11
Các toán tử so sánh
Toán tử (operator)
12
Toán tử logic
Toán tử điều kiện
Toán tử (operator)
13
Điều kiện đúng chọn value1, ngược lại chọn value2
Cấu trúc điều khiển if
Cấu trúc điều khiển
14
Cấu trúc điều khiển switch
Cấu trúc điều khiển
15
Cấu trúc điều khiển for
Cấu trúc điều khiển
16
Cấu trúc điều khiển while
Cấu trúc điều khiển do while
Cấu trúc điều khiển
17
Khai báo biến
Cách đặt tên biến
Dùng các ký tự a..z, A..Z, 1..9, dấu gạch dưới ‘_’, dấu ‘$’
Tên biến không trùng với từ khóa JS
Tên biến không bắt đầu bởi con số
Tên biến không có ký tự khoảng trắng
Tên biến là case sensitive.
Cấu trúc dữ liệu – biến
18
Hàm là khối câu lệnh với một danh sách tham số (hoặc
không có tham số)
Trong JS cho phép hàm không tên
Hàm có thể trả về một giá trị
Hàm (function)
19
Gọi hàm trong JS
Gọi tên hàm và truyền tương ứng các tham số vào
VD: tên_hàm(đối số 1, đối số 2)
Khi gọi hàm không nhất thiết phải truyền đủ các đối số
khi định nghĩa hàm. Nếu số đối số ít hơn khi định nghĩa
hàm, khi đó những đối số không được truyền cho hàm sẽ
mang giá trị undefined
Các kiểu cơ bản sẽ được truyền vào hàm theo giá trị, đối
tượng sẽ được chuyển vào hàm theo tham chiếu.
Hàm (function)
20
Hàm (function)
21
Kiểu dữ liệu của biến
JS không quy định kiểu biến khi khai báo biến, kiểu của
biến sẽ được tự động xác định khi gán dữ liệu cho biến
Các kiểu dữ liệu của JS
Kiểu số (number): số nguyên, số thực
Kiểu chuỗi (string)
Kiểu luận lý (boolean): true/false
Kiểu đối tượng (object)
Kiểu hàm (function)
Khai báo sử dụng biến
22
Xác định kiểu của biến
Các giá trị trả về của toán tử typeof
number
string
boolean
object
function
undefined
Khai báo sử dụng biến
23
Kiểm tra xem x có phải là con số không?
Tầm vực của biến
Khai báo sử dụng biến
24
Khai báo biến toàn cục
Thay đổi giá trị biến toàn cục
Sử dụng biến toàn cục
Sử dụng biến toàn cục
Sử dụng biến toàn cục mới
Tầm vực của biến
Khai báo sử dụng biến
25
var numberCars = 3; // global
numberTrees = 15; // global
if (numberTrees > numberCars) {
var numberRoads = 4; // global
} else {
var numberLakes = 9; // global, nhưng ko định nghĩa do đoạn code ko làm.
}
function simpleFunction()
{
var colorCar = ‘blue’; // local
colorTree = ‘green’; // global, chỉ khi hàm được gọi
if (colorCar != colorTree) {
var colorRoad = ‘grey’; // local, từ dòng này
} else {
var colorLake = ‘aqua’; // local, nhưng ko định nghĩa do code ko làm.
}
}
Mảng trong JS là dạng đối tượng
Cách khai báo mảng 1 chiều
Đối tượng mảng (array object)
26
Khai báo mảng 2 chiều
Mảng 2 chiều được xem như mảng 1 chiều với mỗi phần
tử của mảng 1 chiều này là một mảng 1 chiều khác
Ví dụ khai báo mảng 2 chiều 3×3
Cách 1
Cách 2
Đối tượng mảng (array object)
27
Các thuộc tính của đối tượng mảng
Đối tượng mảng (array object)
28
3
Các phương thức của đối tượng mảng
Đối tượng mảng (array object)
29
Các phương thức của đối tượng mảng
Đối tượng mảng (array object)
30
Các phương thức của đối tượng mảng
Đối tượng mảng (array object)
31
Các phương thức của đối tượng mảng
Đối tượng mảng (array object)
32
VD1: sử dụng concat nối hai mảng
Đối tượng mảng (array object)
33
VD1: sử dụng every để kiểm tra các phần tử của mảng có
thỏa điều kiện không.
Đối tượng mảng (array object)
34
VD3: sử dụng phương thức join để kết các phần tử của
mảng thành chuỗi.
VD4: sử dụng phương thức indexOf để tìm phần tử
trong mảng
Đối tượng mảng (array object)
35
VD5: Sử dụng phương thức map để tính lại các phần tử
trong mảng
Đối tượng mảng (array object)
36
VD6: sử dụng phương thức splice để xóa và thay thế
phần tử trong mảng
Đối tượng mảng (array object)
37
VD7: sử dụng phương thức sort để sắp xếp mảng theo
thứ tự tăng/giảm dần.
Sắp xếp mảng chuỗi ký tự tăng dần
Sắp xếp giảm dần, sắp tăng sau đó đảo mảng
Đối tượng mảng (array object)
38
Sắp xếp mảng số nguyên tăng dần
Sắp giảm
Xáo trộn phần tử trong mảng
Đối tượng mảng (array object)
39
Các thuộc tính của đối tượng chuỗi
Đối tượng chuỗi (string object)
40
Các phương thức của đối tượng chuỗi
Đối tượng chuỗi (string object)
41
Các phương thức của đối tượng chuỗi
Đối tượng chuỗi (string object)
42
Đối tượng chuỗi (string object)
43
Đối tượng chuỗi (string object)
44
VD1: định dạng kiểu cho chuỗi
Đối tượng chuỗi (string object)
45
VD2: Tách chuỗi thành mảng các phần tử
VD3: tìm kiếm chuỗi con bên trong chuỗi
Đối tượng chuỗi (string object)
46
Có thể lấy giá trị chuỗi và số cộng lại với nhau
Chuyển số ra chuỗi
Chuyển chuỗi ra số
Chuỗi và số
47
Dùng để thao tác với ngày, giờ, thời gian
Có hai cách để tạo đối tượng date
VD: khai báo đối tượng Date để in ra ngày tháng hiện
hành
Đối tượng Date
48
Các phương thức của Date
Đối tượng Date
49
Đối tượng Date
50
Các thuộc tính của đối tượng Math
Đối tượng math
51
Các phương thức của Math
Đối tượng math
52
Đối tượng math
53
