Phát triển ứng dụng Web – Web Programming - Javascript

1Javascript Luong Tran Hy Hien 2Nội dung 1. Tổng quan 2. Một ví dụ 3. Ngôn ngữ JavaScript 4. Một số hàm khác 1. Tổng quan • Là ngôn ngữ Client-side script hoạt động trên trình duyệt của người dùng (client). • Chia sẻ xử lý trong ứng dụng web. Giảm các xử lý không cần thiết trên server. • Giúp tạo các hiệu ứng, tương tác cho trang web. 3 Nhúng Javascript vào trang web Định nghĩa script trực tiếp trong trang html: <!-- // Lệnh Javascript --> Nhúng sử dụng script cài đặt từ 1 file .js khác: Nhúng Javascript vào trang web some statements some statements method() // gọi thực hiện các phương thức được định nghĩa // trong “Tên_file_script.js” some javascript statements Nhúng Javascript vào trang web • Đặt giữa tag và : đoạn script sẽ thực thi ngay khi trang web được mở. • Đặt giữa tag và : Đoạn script trong phần body được thực thi khi trang web đang mở (sau khi thực thi các đoạn script có trong phần ). • Số lượng đoạn script là không hạn chế. 6 72. Một ví dụ Sử dụng JavaScript document.write(“Hello world!”); document.write(“Hello world!”); 83. NGÔN NGỮ JAVASCRIPT 3.1 Giới thiệu 3.2 Cú pháp và quy ước 3.3 Kiểu dữ liệu 3.4 Khai báo biến, phạm vi biến 3.5 Toán tử 3.6 Một số đối tượng dữ liệu 3.7 Cấu trúc điều khiển 3.8 Hàm 3.9 Lớp - Đối tượng 93.1. Giới thiệu JavaScript thường dùng tạo hiệu ứng cho các ảnh trong trang web trò chơi (game) trả lời các sự kiện: nhấn chuột, di chuyển chuột, đọc và ghi các thẻ HTML kiểm tra tính xác thực của dữ liệu phát hiện trình duyệt được sử dụng để duyệt web tạo cookie ... 10 3.2. Cú pháp và quy ước • Ghi chú: theo cú pháp của C++ – Ghi chú dòng: // – Ghi chú đoạn: /* */ 11 3.2. Cú pháp và quy ước break do if switch typeof case else in this var catch false instanceof throw void continue finally new true while TỪ KHÓA 12 3.2. Cú pháp và quy ước abstract double goto native static boolean enum implements package super byte export import private synchronized char extends int protected throws class final interface public transient const float long short volatile debugger TỪ KHÓA 13 3.2. Cú pháp và quy ước arguments encodeURI Infinity Object String Array Error isFinite parseFloat SyntaxError Boolean escape isNaN parseInt TypeError Date eval Math RangeError undefined decodeURI EvalError NaN ReferenceError unescape decodeURIComponent Function Numbe RegExp URIError TỪ KHÓA 14 3.3. Kiểu dữ liệu Biến trong JavaScript lưu bất kỳ giá trị của kiểu dữ liệu nào 15 3.4. Khai báo biến, phạm vi biến • Cách đặt tên biến – Bắt đầu bằng một chữ cái hoặc dấu _ – A..Z,a..z,0..9,_ : phân biệt HOA, Thường • Sử dụng từ khóa var để khai báo biến • Ví dụ: var i; • Gán giá trị cho biến: – i = 10; – i = “Mười”; • Một biến chưa được gán giá trị thì sẽ có giá trị là “undefined” 16 3.4. Khai báo biến, phạm vi biến • Phạm vi của biến gắn liền với vùng chương trình nó được khai báo • Biến toàn cục có phạm vi hoạt động trên toàn bộ tài liệu (khai báo ngoài hàm) • Biến khai báo trong hàm chỉ có tác dụng bên trong hàm • Một biến toàn cục được tồn tại từ khi nó được khai báo cho đến trang web đã đóng • JavaScript không có khái niệm phạm vi theo khối Đổi kiểu dữ liệu • Biến tự đổi kiểu dữ liệu khi giá trị mà nó lưu trữ thay đổi Ví dụ: var x = 10; // x kiểu Number x = “hello world !”; // x kiểu String • Có thể cộng 2 biến khác kiểu dữ liệu Ví dụ: var x; x = “12” + 34.5; // KQ: x = “1234.5” • Hàm parseInt(), parseFloat() : Đổi KDL từ chuỗi sang số. 18 3.5. Toán tử 19 3.6. Một số đối tượng dữ liệu • String Object • Number Object • Date Object • Math Object • Array Object • ActiveX Object 20 3.6. Một số đối tượng dữ liệu - String • length: chiều dài của chuổi • constructor: Dùng để kiểm tra kiểu của biến • prototype: Bổ sung prototype hàm cho một đối tượng • Nối kết các chuỗi bằng toán tử + Thuộc tính 21 3.6. Một số đối tượng dữ liệu - String Thuộc tính 22 3.6. Một số đối tượng dữ liệu - String Phương thức 23 3.6. Một số đối tượng dữ liệu - String Phương thức 24 3.6. Một số đối tượng dữ liệu - String Phương thức 25 3.6. Một số đối tượng dữ liệu - String Phương thức 26 3.6. Một số đối tượng dữ liệu - Number • Kiểu dữ liệu số nguyên, số thực • Bắt đầu bằng ký số “0”: Số nguyên hệ bát phân • Bắt đầu bằng “0x”: Số nguyên hệ thập lục phân • VD: Cho biết giá trị thập phân tương ứng của các number sau: – 125 = ? – 010 = ? 014 = ? 028 = ? – 0xFF = ? 0x3.12 = ? 27 3.6. Một số đối tượng dữ liệu - Number • constructor • prototype • MAX_VALUE (khoảng = 1.79E+308) • MIN_VALUE (khoảng = 5.00E-324) • NaN • NEGATIVE_INFINITY (= -MAX_VALUE) • POSITIVE_INFINITY (= -MIN_VALUE) Thuộc tính 28 3.6. Một số đối tượng dữ liệu - Number Phương thức • toExponential numObj.toExponential([fractionDigits]) • toFixed numObj.toFixed([fractionDigits]) • toPrecision numObj.toPrecision([precision]) • toString objectname.toString([radix]) radix : [2; 8; 10; 16] (các hệ cơ số) 29 3.6. Một số đối tượng dữ liệu - Number Phương thức 30 • Chuyển chuổi thành số parseInt(); parseFloat(); parseInt(“42”) // result = 42 parseInt(“42.33”) // result = 42 parseFloat(“42.33”) // result = 42.33 3 + 3 + parseInt(“3”) // result = 9 • Chuyển số thành chuỗi (auto) 3 + “3” // result = “33” 3 + 3 + “3” // result = “63” (“”+ 2500) // result = “2500” (“”+ 2500).length // result = 4 • isNaN(number)  true nếu number khác NaN • isFinite(number)  true nếu number khác NaN, NEGATIVE_INFINITY, POSITIVE 3.6. Một số đối tượng dữ liệu - Number Phương thức 31 3.6. Một số đối tượng dữ liệu - Math 32 3.6. Một số đối tượng dữ liệu - Date Argument Description Example None Creates object with the current date and time. var rightNow = new Date(); "month,dd, yyyy hh:mm:ss" Creates object with the date represented by the specified month, day (dd ), year ( yyyy ), hour (hh), minute (mm), and second (ss). Any omitted values are set to zero. var birthDay = new Date("March 24, 1970"); Milliseconds Creates object with date represented as the integer number of milliseconds after the epoch. var someDate = new Date(795600003020); yyyy, mm, dd Creates object with the date specified by the integer values year (yyyy), month (mm), and day (dd). var birthDay = new Date(1970, 2, 24); yyyy, mm, dd, hh, mm, ss Creates object with the date specified by the integer values for the year, month, day, hours, minutes, and seconds. var birthDay = new Date(1970, 2, 24, 15, 0, 0); yyyy, mm, dd, hh, mm, ss, ms Creates object with the date specified by the integer values for the year, month, day, hours, seconds, and milliseconds. var birthDay = new Date(1970, 2, 24, 15, 0, 250); 33 3.6. Một số đối tượng dữ liệu - Date 34 3.6. Một số đối tượng dữ liệu - Date 35 3.6. Một số đối tượng dữ liệu - Array • var arrayObj = new Array(); • var arrayObj = new Array([size]); • var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]); • var arrayObj = new Array(Array); • Chỉ số của mảng bắt đầu từ 0 36 3.6. Một số đối tượng dữ liệu - Array Thuộc tính và Phương thức 37 3.6. Một số đối tượng dữ liệu - Array 38 3.6. Một số đối tượng dữ liệu - Array 39 3.6. Một số đối tượng dữ liệu - Array Mảng nhiều chiều 40 3.6. Một số đối tượng dữ liệu - ActiveX 41 3.6. Một số đối tượng dữ liệu - ActiveX Một ví dụ 42 3.7. Cấu trúc điều khiển • Điều kiện if • Điều khiển switch • Vòng lặp for • Vòng lặp while • Vòng lặp do while • Vòng lặp for in • Từ khóa break, continue 43 3.7. Cấu trúc điều khiển • Hầu hết cấu trúc điều khiển trong JavaScript giống với C++ • Trong phần này ta chỉ đề cập cấu trúc điều khiển của JavaScript không có trong C++ Câu lệnh if if (condition) { statement[s] if true } else { statement[s] if false } Ví dụ: var x = 5, y = 6, z; - if (x == 5) { if (y == 6) z = 17; } else z = 20; Câu lệnh switch switch (expression) { case label : statementlist case label : statementlist ... default : statement list } Ví dụ : var diem = “G”; switch (diem) { case “Y”: document.write(“Yếu"); break; case “TB”: document.write(“Trung bình"); break; case “K”: document.write(“Khá"); break; case “G” : document.write(“Giỏi"); break; default: document.write(“Xuất sắc") } Vòng lặp for for ([initial expression]; [condition]; [update expression]) { statement[s] inside loop } Ví dụ: var myarray = new Array(); for (i = 0; i < 10; i++) { myarray[i] = i; } Vòng lặp while while (expression) { statements } Ví dụ: var i = 9, total = 0; while (i < 10) { total += i * 3 + 5; i = i +5; } Vòng lặp do.. while do { statement }while (expression); Ví dụ: var i = 9, total = 0; do { total += i * 3 + 5; i = i +5; } while (i > 10); 3.8 Hàm trong Javascript • Dạng thức khai báo chung: function Tên_hàm(thamso1, thamso2,..) { } • Hàm có giá trị trả về: function Tên_hàm(thamso1, thamso2,..) { return (value); } 3.8 Hàm trong Javascript • Ví dụ: function Sum(x, y) { tong = x + y; return tong; } • Gọi hàm: var x = Sum(10, 20); 51 3.9. Lớp - Đối tượng 52 3.9. Lớp - Đối tượng 53 4. Một số hàm khác 54 4. Một số hàm khác 4. Một số hàm khác • alert • confirm • prompt 55 Alert, Confirm, Prompt (1) • Tương tác với người dung sử dụng hộp thoại • window.alert(msg); – Thông báo một nội dung đến người dùng (người dùng chỉ click OK). • var r = window.confirm(msg); – Thực hiện thông báo có ghi nhận người dung xác nhận (OK, Cancel). Trả về true nếu người dung click OK, ngược lại trả về false Alert, Confirm, Prompt (2) • var r = window.prompt(msg,default); – Trình bày thông báo cho người dùng nhập liệu. Người dùng nhập liệu và click nút OK, Clear, hoặc Cancel. – Trả về chuỗi người dùng nhập hoặc chuỗi rỗng nếu click OK. – Trả về null nếu click nút Cancel. Alert, Confirm, Prompt (3) alert( “Chương trình cộng 2 số\n" + “Bạn nhập vào giá trị 2 số\n" + “Chương trình sẽ hỏi bạn có muốn thực hiện phép cộng không?\n" ); var first, second, num1, num2, sum; firstNumber = window.prompt( “Nhập số thứ nhất", "0"); document.write("", “Bạn nhập " + first); second = window.prompt( “Nhập số thứ hai", "0"); document.write("", “Bạn nhập " + second); Alert, Confirm, Prompt (4) var ok = confirm( “Bạn có muốn cộng 2 số?"); if (ok) { num1 = parseInt(first); num2 = parseInt(second); sum = num1 + num2; document.write("", “Tổng của " + first + " và" + second + " là " + sum); } Q & A THE END