Javascript Tổng quan – Hàm Vòng lặp – Đối tượng

Javascript Tổng quan – Hàm Vòng lặp – Đối tượng GV: ĐOÀN THIỆN NGÂN LTM1 – JAVASCRIPT – 2/28 Nội dung Chương 6: Giới thiệu Javascript • Tổng quan • Cú pháp cơ bản Chương 7: Hàm – Vòng lặp – Đối tượng •Hàm •Vòng lặp •Đối tượng LTM1 – JAVASCRIPT – 3/28 Giới thiệu Javascript • Javascript là ngôn ngữ kịch bản ở phía client • Ngôn ngữ Javascript được phát triển bởi Netscape cùng với sự cộng tác của Sun Microsystems, với tên gọi ban đầu là LiveScript. • Javascript lần đầu tiên được giới thiệu vào tháng 12 năm 1995, trong trình duyệt Nescape - phiên bản 2.0B3 • Các phần mềm chuyên dụng soạn thảo mã Javascript là Visual Interdev, Dreamwaver, Microsoft Frontpage, Microsoft Expression Web, Eclipse, Netbeans, LTM1 – JAVASCRIPT – 4/28 Sử dụng Javascript trong trang HTML 1. Chèn trực tiếp đoạn code Javascript vào giữa cặp thẻ trong tập tin HTML. a) Hàm JS thường được chèn trong phần head b) JS tạo nội dung được chèn trong phần body 2. Sử dụng tập tin Javascript riêng (*.js), và dùng thẻ trong phần head của trang HTML để chỉ vị trí tập tin Javascript. LTM1 – JAVASCRIPT – 5/28 Cú pháp cơ bản Javascript • Javascript phân biệt chữ hoa chữ thường – case sensitive • Statement – câu lệnh • Block of Statements – khối lệnh • Comment – chú thích üTrên 1 dòng: // üNhiều dòng: /* */ • Constant – hằng üvùng nhớ lưu trữ giá trị, được truy xuất thông qua tên ütrị của hằng là cố định, không thể thay đổi üKhai báo: const TÊN_HẰNG; LTM1 – JAVASCRIPT – 6/28 Variable - Biến • Khai báo biến üKhai báo: var tên_biến; tên_biến=giá_trị; üKhông cần xác định kiểu dữ liệu cho biến • Tầm vực: üBiến cục bộ üBiến toàn cục • JavaScript là ngôn ngữ có tính định kiểu thấp. • Không cần chỉ định kiểu dữ liệu cho biến khi khai báo. • Kiểu dữ liệu của biến sẽ được tự động chuyển thành kiểu phù hợp khi ta thay đổi giá trị của biến. LTM1 – JAVASCRIPT – 7/28 Kiểu dữ liệu • Kiểu số: số nguyên, số thập phân với dấu chấm động • Kiểu luận lý Boolean: true hay false • Kiểu chuỗi: giá trị chuỗi phải bọc trong cặp dấu nhày kép " hay dấu nháy đơn ' üEscape character: \ (\", \', \&) üKý tự đặc biệt: \n, \t, \r • Trị null: khởi tạo cho biến • Trị undefined: trị mặc định được gán cho các biến chưa khởi tạo giá trị. LTM1 – JAVASCRIPT – 8/28 Toán tử 1. Toán tử số học: +, -, *, /, %, ++, -- 2. Toán tử gán: =. +=, -=, *=, /=, %= 3. Toán tử so sánh: ==, !=, >, =, <= 4. Toán tử logic: &&, ||, ! 5. Toán tử chuỗi: + 6. Toán tử điều kiện: (điều-kiện) ? giátrị-1 : giátrị-2 LTM1 – JAVASCRIPT – 9/28 Hàm – Function • Hàm là một nhóm lệnh, thực hiện một công việc cụ thể, có thể được gọi thực hiện nhiều lần trong chương trình. • Ta có thể truyền dữ liệu cho hàm bằng tham số (đối số) • Hàm được định nghĩa thông qua từ khóa function, với một tên hàm xác định: • function functionName([thamsố1] [,thamsố2] [,.]) { [ return trịTrảVề; ] } • Gọi hàm: functionName(); LTM1 – JAVASCRIPT – 10/28 Các hàm thông dụng Javascript • Hàm hiển thị hộp thông báo: alert("msg"); • Hàm nhập dữ liệu: prompt("msg","init"); • Hàm xác nhận: confirm("msg"); • Hàm đổi sang trị số: 1. parseInt(strNum): trả về một số nguyên 2. parseFloat(strNum): trả về một số thực 3. Number(strNum): trả về NaN nếu không là số 4. eval(strNum): lượng giá hay thực thi biểu thức • Hàm isNaN(str) kiểm tra str là một số, chuỗi số hay chuỗi kí tự. LTM1 – JAVASCRIPT – 11/28 Hàm yêu cầu thực thi theo thời gian • Hàm setTimeout() yêu cầu Javascript thực hiện một số tác vụ sau một khoảng thời gian xác định [xem hàm clearTimeout(idTimeout)]. • Hàm setInterval() yêu cầu Javascript thực hiện một số tác vụ sau mỗi khoảng thời gian xác định [xem hàm clearInterval (idInterval)]. LTM1 – JAVASCRIPT – 12/28 Cấu trúc điều khiển if – switch • Dạng đơn giản: if (điềukiện) { //Khối lệnh JavaScript } • Dạng đầy đủ: if (điều kiện ) { // khối lệnh 1 } else { // khối lệnh 2 } switch (biểu thức) { case giá-trị-1: khối lệnh; break; ... case giá-trị-n: khối lệnh; break; default: Khối lệnh; } LTM1 – JAVASCRIPT – 13/28 Cấu trúc vòng lặp for (khởi-tạo-biếnĐK; điều-kiện; cập-nhật-biếnĐK) { //Khối lệnh } do { // khối lệnh; } while (điều kiện) ; while (điều kiện) { // Khối lệnh; } for (biến in đối-tượng) { //Khối lệnh } Chú ý: • lệnh break • lệnh continue LTM1 – JAVASCRIPT – 14/28 Đối tượng trong Javascript • Javascript là một ngôn ngữ lập trình hướng đối tượng (Object Oriented Programming – OOP). • Truy xuất giá trị của một thuộc tính trong đối tượng: đốitượng.tênthuộctính (VD: window.document) • Thực thi một phương thức của đối tượng: đốitượng.tênphươngthức(); (document.write("Hello!!!");) • Tạo một thực thể đối tượng, sử dụng từ khóa new. var today = new Date(); • Các đối tượng thông dụng trong Javascript: String, Date, Math, Array, HTML Dom (Document Object Model for HTML) LTM1 – JAVASCRIPT – 15/28 Đối tượng String • Khai báo một thực thể đối tượng String: 1. Gán trị của biến là một chuỗi kí tự : var myName = "Minh"; 2. Dùng từ khóa new đi kèm với hàm khởi tạo String() var myName = new String("Minh"); • Thuộc tính của đối tượng String: length (số kí tự trong chuỗi) document.write("Chiều dài myStr: " + myStr.length); LTM1 – JAVASCRIPT – 16/28 Phương thức của đối tượng String • anchor ("anchor-name"), • big(), bold(), • charAt(index), concat(str1, str2, ), indexOf( searchvalue,[fromindex]), lastindexOf(searchvalue), match(searchstr), replace(str1,str2), search(searchstring), slice(start, end), substr(start,length), substring(indexA,indexB), • toLowerCase(), toUpperCase(), sup(), sub(), • fontcolor(), fontsize(), LTM1 – JAVASCRIPT – 17/28 Đối tượng Date •Đối tượng Date để làm việc với ngày tháng • Khởi tạo thực thể đối tượng Date : 1. var my_date = new Date() 2. new Date("Month dd, yyyy hh:mm:ss") 3. new Date("Month dd, yyyy") 4. new Date(yy,mm,dd,hh,mm,ss) 5. new Date(yy,mm,dd) 6. new Date(milliseconds) LTM1 – JAVASCRIPT – 18/28 Các phương thức của đối tượng Date • getDate(), getDay(), getMonth(), getFullYear(), getYear(), getHours(), getMinutes(), getSeconds(), getMilliseconds(), • setFullYear(), setHours(), setMinutes(), setMonth(), setSeconds(), toGMTString(), toString(), • getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCMonth(), getUTCFullYear(), getUTCHours(), getUTCMinutes(), getUTCSeconds(), getUTCMilliseconds(), • setUTCDate(), setUTCMonth(), setUTCFullYear(), setUTCHours(), setUTCMinutes(), setUTCSeconds(), setUTCMilliseconds() LTM1 – JAVASCRIPT – 19/28 Đối tượng Math •Đối tượng Math làm nhiệm vụ cung cấp các hàm toán học • Không cần khởi tạo một thực thể Math, • Truy xuất thuộc tính và phương thức trực tiếp từ đối tượng Math • Các hằng số của đối tượng Math: E (số siêu việt e), LN2 (ln2), LN10 (ln10), LOG2E (log2e), PI, SQRT1_2 ( ), SQRT2 ( ) LTM1 – JAVASCRIPT – 20/28 Các phương thức của đối tượng Math • abs(x), • acos(x), asin(x), atan(x), cos(x), sin(x), • ceil(x), floor(x), round(x), • max(x,y, ), min(x,y, ), • pow(x,y), • random(), • exp(x), log(x), • sqrt(x) LTM1 – JAVASCRIPT – 21/28 Đối tượng Array • Mảng - Array lưu trữ nhiều giá trị với cùng một tên gọi. • Mỗi phần tử mảng được phân biệt qua chỉ số - index. • Mảng được đánh chỉ số từ 0 đến n-1 • Khởi tạo một mảng: var tên_mảng = new Array(); var tên_mảng = new Array(số_phần_tử_mảng); var tên_mảng = new Array(phần_tử_1, phần_tử_2, ); • Truy xuất phần tử mảng: tên_mảng[index] • Thuộc tinhs length: số phần tử của mảng LTM1 – JAVASCRIPT – 22/28 Các phương thức của Array • concat(arrayX,arrayY,,arrayZ), • join(separator), valueOf(), toString(), • pop(), push(newelement1,newelement2,,newelementn), • reverse(), shift(), • slice(start,end), • splice(index,howmany,element1,...,elementX), • sort(function-name), LTM1 – JAVASCRIPT – 23/28 Xây dựng đối tượng mới • Ta có thể tự tạo một đối tượng riêng: 1. Tạo trực tiếp một thực thể đối tượng mới. var đối_tượng = new Object(); Dịnh nghĩa và gán giá trị thuộc tính và phương thức 2. Xây dựng hàm khởi tạo của đối tượng. Để tạo một thực thể của đối tượng, dùng lệnh new đối_tượng function đối_tượng(tham_số1, tham_số_2, ) { this.thuộc_tính_1 = giá_trị; this.phương_thức_1 = function() { //khối lệnh}; } LTM1 – JAVASCRIPT – 24/28 Biểu thức qui tắc - Regular Expression •Đối tượng RegExp: xây dựng các mẫu so khớp (pattern) từ các kí tự đặc biệt. • Dùng các mẫu so khớp để kiểm tra một chuỗi dữ liệu có thỏa mãn biểu thức qui tắc hay không. •Ứng dụng biểu thức qui tắc kiểm tra tính hợp lệ của dữ liệu trong form, ví dụ như địa chỉ email, số điện thoại, • Khai báo biểu thức qui tắc (biểu thức chính quy): 1. Vởi từ khóa new: var re = new RegExp("ab+c"); 2. Khai báo trực tiếp: var re = /ab+c/; LTM1 – JAVASCRIPT – 25/28 Các phương thức của biểu thức qui tắc • test("str"): kiểm tra một chuỗi có thỏa mãn biểu thức qui tắc hiện tại hay không. Hàm này trả về trị true/false. • exec(str): tìm một chuỗi con trong chuỗi str, thỏa mãn biểu thức qui tắc. Nếu tìm thấy hàm trả sẽ về chuỗi con, ngược lại hàm trả về trị null. • compile(mẫu-so-khớp-mới): thay đổi mẫu so khớp của biểu thức qui tắc (Deprecated). • toString() LTM1 – JAVASCRIPT – 26/28 Các kí hiệu của biểu thức qui tắc • i (ignoreCase), g (global), m (multiline), gi, mgi • ^, $, \b, \B • \ (escape character), \d, \D, \s, \S, \w (alphanumeric), \0 (null), \t, \n, \r, \### (octal number ###), \x## (Hexadecimal number ##), \uxxxx (Unicode character xxxx) • (x|y), [xyz], [^xyz], [a-zA-Z0-9], . (any character except \n) • ?, *, +, {k}, {k, p} LTM1 – JAVASCRIPT – 27/28 Các phương thức của String hỗ trợ RegExp • search(regexp): tìm kiếm chuỗi con thỏa mãn biểu thức qui tắc, nếu tìm thấy, trả về vị trí của chuỗi con, ngược lại trả về -1. • match(regexp): tìm kiếm những chuỗi con thỏa mãn biểu thức qui tắc, nếu tìm thấy, trả về mảng chứa các chuỗi con, ngược lại trả về null. • replace(regexp, str): thay thế chuỗi con thỏa biểu thức qui tắc bằng chuỗi mới str. LTM1 – JAVASCRIPT – 28/28 ??? • JS: OOP • Cú pháp • Sử dụng hàm • Sử dụng cấu trúc điều khiển và vòng lặp • Sử dung đối tượng thông dụng • Biểu thức chính quy