Bài giảng về JavaScript

Bài giảng cung cấp cho người học các kiến thức: JavaScript. Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu.
Nội dung trích xuất từ tài liệu:
Bài giảng về JavaScript JavaScript Đặng Thành Trung NgônngữkịchbảnScript• Giới thiệu• Biến & các kiểu dữ liệu• Các phép toán• Các toán tử điều khiển• Hàm & thủ tục• Đối tượng form & các điều khiển trên form• Đối tượng window & frame Giớithiệu• Sự ra đời – HTML nguyên thủy không có khả năng xử lý các tương tác của người dùng – Mọi tương tác với trang web cần phải xử lý ở server -> chi phí về thời gian, thông lượng quá mức cần thiết – Các trình duyệt có khả năng hỗ trợ thông dịch ngôn ngữ kịch bản GiớithiệuJavaScript• Khả năng thường được dùng của JS – Nhận và kiểm tra tính hợp lệ của dữ liệu – Tính toán dữ liệu tạm thời – Tạo các hiệu ứng hoạt ảnh, xử lý các sự kiện• Bị quy định không được phép truy cập vào các tài nguyên mức hệ thống GiớithiệuJavascript• Phân biệt chữ hoa, thường• Viết mã javascript (mã có thể viết ở bất cứ chỗ nào trong HTML) // mã javascript • Hoặc sử dụng cú pháp • Mỗi câu lệnh được phân cách bởi ;• Mỗi khối lệnh được bao trong cặp {, }• Chú thích được viết sau // hoặc trong cặp dấu /*, */ Biến• Khai báo var tên_biến [= biểu thức];• Ví dụ: var i = 0;• Có thể khai báo không tường minh: tên_biến = biểu_thức;• Ví dụ: x = 5; x = 2 + a; // a là biến -> lỗi vì a là biến chưa khai báo• Biến có hai phạm vi hoạt động là global và local. Kiểudữliệu• Kiểu cơ sở: string, number, boolean• Kiểu phức hợp: object, array• Kiểu đặc biệt: null, undefined – Biến chứa giá trị null là biến không có giá trị – Giá trị undefined được trả về khi: • Thuộc tính của đối tượng không tồn tại • Biến được khai báo nhưng chưa được gán giá trị Toántử• Xâu +• Số học +, -, *, /, %, ++, --• So sánh và Logic ==, ===, !=, !==, >, >=, > (unsigned shift right), &, |, ^, ~ (and, or, xor, not) Đốitượng• Tạo đối tượng var tên_đối_tượng = new Kiểu_đối_tượng(ds ts);• Ví dụ var mydate = new Date(); var mydate = new Date(2006, 5, 9);• Hỗ trợ thuộc tính mở rộng var m = new Object(); m.test1 = 123; m[test2 co dau cach] = skdc;• Các phương thức chuẩn alert (m.toString()); alert (m.valueOf()); Đốitượng(tt)Mảng• Là một đối tượng mở rộng.• Khai báo mảng: var tên_mảng = new Array (n | [e0[, e1[, ...[, eN]]]]));• Truy xuất đến các phần tử bởi cặp [, ]• Ví dụ: var a = new Array(12); a[0] = “Jan”; a[1] = “Feb”; …, a[11] = “Dec”; var a = new Array(“Jan”, “Feb”, …, “Dec”)• Các thuộc tính và phương thức: length, concat(), join()…; Đốitượng(tt)–Cácđốitượngkhác• Global - escape, eval, isFinite, isNaN, parseFloat, parseInt, unescape• Math - E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2 - abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tan• String - length - charAt, concat, fixed, fontcolor, fromCharCode, indexOf, match, replace, search, substr, sup, toUpperCase…• Boolean, Date, Error, Number, RegExp… Hàm• Định nghĩa: function tên_hàm (ds tham số) { thân hàm } Nếu hàm có giá trị trả về, thân hàm cần có câu lệnh return biểu_thức;• Gọi hàm: – Tham gia vào biểu thức – Gọi hàm như một lệnh: tên_hàm (ds tham số); Cáccấutrúcđiềukhiển• Toán tử tuần tự – Kết thúc lệnh bằng dấu ;• Toán tử rẽ nhánh – if … then – switch … case• Toán tử lặp – do … while – while – for ĐốitượngHTML• Để JS có thể tương tác được với người dùng: – Mỗi thành phần (thẻ) trong văn bản HTML đều là một đối tượng. – Quản lý hợp lý các đối tượng sẽ tạo ra sự tương tác với người dùng.• Khi có một sự kiện tác động lên 1 đối tượng thì 1 hàm tương ứng được gọi.• Có thể định nghĩa lại các hàm mặc định cho các sự kiện tương ứng với từng đối tượng. ĐốitượngHTML(tt)• Các đối tượng HTML cũng có các thuộc tính và phương thức như các đối tượng của JS.• Thuộc tính của các đối tượng thường được dùng để định danh (qua ID hoặc Name) hay để thay đổi cách thức hiển thị của đối tượng. – ID là định danh của các đối tượng HTML. Có thể truy xuất đến mọi loại đối tượng HTML thông qua ID. • myObj = document.getElmentById(ID); – Name là định danh của các đối tượng HTML trong FORM. Chỉ các đối tượng để quản trị dữ liệu mới có thể có NAME. • myObj = document.{form_name}.{object_name}; ĐốitượngHTML(tt)• Các đối tượng HTML, Collection hoặc thuộc tính sau rất có ích trong việc lập trình: – all – document – form / forms – window – innerText – innerHTML• Cần lưu ý đến các đoạn code JS trong những trình duyệt khác ...