Bài giảng về JavaScript

Chia sẻ: Nguyễn Thị Hiền Phúc | Ngày: | Loại File: PPT | Số trang:21

Thêm vào BST

Báo xấu

74
lượt xem 9
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Bài giảng về JavaScript

JavaScript  Đặng Thành Trung
Ngôn ngữ kịch bản Script • 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ới thiệ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ới thiệu JavaScript • 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ới thiệu Javascript • 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ểu dữ 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án tử • Xâu + • Số học +, -, *, /, %, ++, -- • So sánh và Logic ==, ===, !=, !==, >, >=, > (unsigned shift right), &, |, ^, ~ (and, or, xor, not)
Đối tượ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());
Đối tượ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()…;
Đối tượng (tt) – Các đối tượng khá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ác cấu trúc điều khiể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
Đối tượng HTML • Để 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.
Đối tượng HTML (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};
Đối tượng HTML (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 nhau.
GIÁ TRỊ THẺ HTML • Text : document...value • Hidden : document...value • Password : document...value • TextArea : document...value • Select : document...value • Select : document..[].value • Checkbox : document...value • Checkbox : document..[].value • Radio : document...value • Radio : document..[].value
CHIỀU DÀI THẺ • Text : document...length • Hidden : document...value • Password : document...value • TextArea : document...value • Select : document...value • Checkbox : document...value • Radio : document...value
BIẾN TRẠNG THÁI • Select: document...selectedIndex • Select: document...selected • Checkbox : document...checked • Radio : document...checked
SỰ KIỆN • OnClick : Nhấn chuột lên thẻ • OnSubmit : Submit dữ liệu • OnReset : Reset form dữ liệu • OnMouseMove : Di chuột vào thẻ • OnMouseOut : Di chuột qua thẻ • OnMouseOver : Di chuột qua thẻ • OnBlur : Đưa con trỏ ra khỏi thẻ • OnKeyPress : Nhấn phím trên thẻ