Bài giảng Javascript - Lương Trần Hy Hiến

61 trang huongle 3230

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Javascript - Lương Trần Hy Hiến", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

bai_giang_javascript_luong_tran_hy_hien.pdf

Nội dung text: Bài giảng Javascript - Lương Trần Hy Hiến

Javascript Luong Tran Hy Hien 1
Nội dung 1. Tổng quan 2. Một ví dụ 3. Ngôn ngữ JavaScript 4. Một số hàm khác 2
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: Nhúng sử dụng script cài đặt từ 1 file .js khác:
Nhúng Javascript vào trang web type="text/javascript"> some javascriptstatements 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”
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
2. Một ví dụ Sử dụng JavaScript document.write(“Hello world!”); document.write(“Hello world!”); 7
3. 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 8
3.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 9
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: /* */ 10
3.2. Cú pháp và quy ước TỪ KHÓA break do if switch typeof case else in this var catch false instanceof throw void continue finally new true while 11
3.2. Cú pháp và quy ước TỪ KHÓA 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 12
3.2. Cú pháp và quy ước TỪ KHÓA 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 13
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 14
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” 15
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 16
Đổ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ố.
3.5. Toán tử 18
3.6. Một số đối tượng dữ liệu • String Object • Number Object • Date Object • Math Object • Array Object • ActiveX Object 19
3.6. Một số đối tượng dữ liệu - String • length: chiều dài của chuổi Thuộc tính • 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ử + 20
3.6. Một số đối tượng dữ liệu - String Thuộc tính 21
3.6. Một số đối tượng dữ liệu - String Phương thức 22
3.6. Một số đối tượng dữ liệu - String Phương thức23
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 - 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 = ? 26 – 0xFF = ? 0x3.12 = ?
3.6. Một số đối tượng dữ liệu - Number Thuộc tính • 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) 27
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ố) 28
3.6. Một số đối tượng dữ liệu - Number Phương thức 29
3.6. Một số đối tượng dữ liệu - Number Phương thức • 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, 30 NEGATIVE_INFINITY, POSITIVE
3.6. Một số đối tượng dữ liệu - Math 31
3.6. Một số đối tượng dữ liệu - Date Argument Description Example Creates object with the current date and var rightNow = new Date(); None time. Creates object with the date represented "month,dd, yyyy by the specified month, day (dd ), var birthDay = new Date("March year ( yyyy ), hour (hh), minute (mm), hh:mm:ss" and second (ss). Any omitted values 24, 1970"); are set to zero. Creates object with date represented as var someDate = new Milliseconds the integer number of milliseconds after the epoch. Date(795600003020); Creates object with the date specified by var birthDay = new Date(1970, 2, yyyy, mm, dd the integer values year (yyyy), month (mm), and day (dd). 24); yyyy, mm, dd, Creates object with the date specified by var birthDay = new Date(1970, 2, the integer values for the year, month, hh, mm, ss day, hours, minutes, and seconds. 24, 15, 0, 0); yyyy, mm, dd, Creates object with the date specified by var birthDay = new Date(1970, 2, the integer values for the year, month, hh, mm, ss, ms day, hours, seconds, and milliseconds. 24, 15, 0, 250); 32
3.6. Một số đối tượng dữ liệu - Date 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 - 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 35
3.6. Một số đối tượng dữ liệu - Array Thuộc tính và Phương thức 36
3.6. Một số đối tượng dữ liệu - Array 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 Mảng nhiều chiều 39
3.6. Một số đối tượng dữ liệu - ActiveX 40
3.6. Một số đối tượng dữ liệu - ActiveX Một ví dụ 41
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 42
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++ 43
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 Ví dụ : switch (expression) var diem = “G”; { switch (diem) { case “Y”: case label : document.write(“Yếu"); statementlist break; case “TB”: case label : document.write(“Trung bình"); break; statementlist case “K”: document.write(“Khá"); break; default : case “G” : statement list 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);
3.9. Lớp - Đối tượng 51
3.9. Lớp - Đối tượng 52
4. Một số hàm khác 53
4. Một số hàm khác 54
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); }
THE END