Bài giảng JavaScript - Đặng Thành Trung

JavaScriptĐặng Thành TrungNgôn ngữ kịch bản ScriptGiới thiệuBiến & các kiểu dữ liệuCác phép toánCác toán tử điều khiểnHàm & thủ tụcĐối tượng form & các điều khiển trên formĐối tượng window & frameGiới thiệuSự ra đờiHTML nguyên thủy không có khả năng xử lý các tương tác của người dùngMọ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ếtCác trình duyệt có khả năng hỗ trợ thông dịch ngôn ngữ kịch bảnGiới thiệu JavaScriptKhả năng thường được dùng của JSNhận và kiểm tra tính hợp lệ của dữ liệuTính toán dữ liệu tạm thờiTạo các hiệu ứng hoạt ảnh, xử lý các sự kiệnBị quy định không được phép truy cập vào các tài nguyên mức hệ thốngGiới thiệu JavascriptPhân biệt chữ hoa, thườngViết mã javascript (mã có thể viết ở bất cứ chỗ nào trong HTML)	// mã javascriptHoặc sử dụng cú phápMỗ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ếnKhai báovar 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áoBiến có hai phạm vi hoạt động là global và local.Kiểu dữ liệuKiểu cơ sở: string, number, booleanKiểu phức hợp: object, arrayKiểu đặc biệt: null, undefinedBiế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ạiBiế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ượngTạo đối tượngvar 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ộngvar m = new Object();m.test1 = 123; m["test2 co dau cach"] = "skdc";Các phương thức chuẩnalert (m.toString()); alert (m.valueOf());Đối tượng (tt) - MảngLà 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ácGlobal- escape, eval, isFinite, isNaN, parseFloat, parseInt, unescapeMath- E, LN2, LN10, LOG2E, LOG10E, PI, SQRT1_2, SQRT2abs, acos, asin, atan, atan2, ceil, cos, exp, floor, log, max, min, pow, random, round, sin, sqrt, tanString- length- charAt, concat, fixed, fontcolor, fromCharCode, indexOf, match, replace, search, substr, sup, toUpperCaseBoolean, Date, Error, Number, RegExpHà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ệnhreturn biểu_thức;Gọi hàm:Tham gia vào biểu thứcGọi hàm như một lệnh: tên_hàm (ds tham số);Các cấu trúc điều khiểnToán tử tuần tựKết thúc lệnh bằng dấu ;Toán tử rẽ nhánhif  thenswitch  caseToán tử lặpdo  whilewhileforĐố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:alldocumentform / formswindowinnerTextinnerHTMLCần lưu ý đến các đoạn code JS trong những trình duyệt khác nhau.GIÁ TRỊ THẺ HTMLText : document...valueHidden : document...valuePassword : document...valueTextArea : document...valueSelect : document...valueSelect : document..[].valueCheckbox : document...valueCheckbox : document..[].valueRadio : document...valueRadio : document..[].valueCHIỀU DÀI THẺText : document...lengthHidden : document...valuePassword : document...valueTextArea : document...valueSelect : document...valueCheckbox : document...valueRadio : document...valueBIẾN TRẠNG THÁISelect: document...selectedIndexSelect: document...selectedCheckbox : document...checkedRadio : document...checkedSỰ KIỆNOnClick : Nhấn chuột lên thẻOnSubmit : Submit dữ liệuOnReset : Reset form dữ liệuOnMouseMove : 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ẻPHƯƠNG THỨCAlert : Tạo một thông báoConfirm : Tạo mọt thông báo với các nút Yes/NoPrompt : Tạo một hộp thoại nhập dữ liệuWindow.close() : Đóng cửa sổ hiện tạiWindow.Open() : Mở một cửa sổ mớiWindow.history.back(i) : Trở về trước i trangWindow.history.go(-i) : Trở về sau i trangWindow.print(): Mở hộp thoại in trang web