1 Một số khái niệm cơ bản 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… 2 Một số khái niệm cơ bản 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… 3 Một số khái niệm cơ bản 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. 4 JavaScript - tổng quan 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 Brendan Eich 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 5 JavaScript - tổng quan 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. 6 JavaScript - tổng quan 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. Trình duyệt hiển thị toàn bộ nội dung web.
7 JavaScript - tổng quan Cách đặt mã lệnh JS vào trang web Internal: đặt trong head hay body 8 JavaScript - tổng quan 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. 9 Toán tử (operator) Các toán tử toán học y=5 10 Toán tử (operator) Các toán tử gán 11 Toán tử (operator) Các toán tử so sánh 12 Toán tử (operator) Toán tử logic Toán tử điều kiện Điều kiện đúng chọn value1, ngược lại chọn value2 13 Cấu trúc điều khiển Cấu trúc điều khiển if 14 Cấu trúc điều khiển Cấu trúc điều khiển switch 15 Cấu trúc điều khiển Cấu trúc điều khiển for 16 Cấu trúc điều khiển Cấu trúc điều khiển while Cấu trúc điều khiển do while 17 Cấu trúc dữ liệu - biến Khai báo biến Cách đặt tên biến Dùng các ký tự a.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. 18 Hàm (function) 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ị 19 Hàm (function) 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.
20 Hàm (function) 21 Khai báo sử dụng biến 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) 22 Khai báo sử dụng biến 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 Kiểm tra xem x có phải là con số không? 23 Khai báo sử dụng biến Tầm vực của biến 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 24 Khai báo sử dụng biến Tầm vực của biến 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. } } 25 Đối tượng mảng (array object) Mảng trong JS là dạng đối tượng Cách khai báo mảng 1 chiều 26 Đối tượng mảng (array object) 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 3x3 Cách 1 Cách 2 27 Đối tượng mảng (array object) Các thuộc tính của đối tượng mảng 3 28 Đối tượng mảng (array object) Các phương thức của đối tượng mảng 29 Đối tượng mảng (array object) Các phương thức của đối tượng mảng 30 Đối tượng mảng (array object) Các phương thức của đối tượng mảng 31 Đối tượng mảng (array object) Các phương thức của đối tượng mảng 32 Đối tượng mảng (array object) VD1: sử dụng concat nối hai mảng 33 Đối tượng mảng (array object) 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. 34 Đối tượng mảng (array object) 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 35 Đối tượng mảng (array object) VD5: Sử dụng phương thức map để tính lại các phần tử trong mảng 36 Đối tượng mảng (array object) VD6: sử dụng phương thức splice để xóa và thay thế phần tử trong mảng 37 Đối tượng mảng (array object) 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 38 Đối tượng mảng (array object) 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 39 Đối tượng chuỗi (string object) Các thuộc tính của đối tượng chuỗi 40 Đối tượng chuỗi (string object) Các phương thức của đối tượng chuỗi 41 Đối tượng chuỗi (string object) Các phương thức của đối tượng chuỗi 42 Đối tượng chuỗi (string object) 43 Đối tượng chuỗi (string object) 44 Đối tượng chuỗi (string object) VD1: định dạng kiểu cho chuỗi 45 Đối tượng chuỗi (string object) 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 46 Chuỗi và số 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ố 47 Đối tượng Date 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 48 Đối tượng Date Các phương thức của Date 49 Đối tượng Date 50