Biến − Biến là tên của một phần tử trong chương trình, được sử dụng để lưu trữ thông tin do người dùng nhập vào hoặc kết quả trung gian của quá trình tính toán − Trong Javascript khi kha[r]
(1)CHƯƠNG TỔNG QUAN VỀ JAVASCRIPT (2) I GIỚI THIỆU VỀ JAVASCRIPT v Javascript đời với tên gọi LiveScript, sau đó Nescape đổi tên thành Javascript Tuy nhiên Java và Javascript có ít các điểm chung dù cú pháp chúng có thể có điểm giống v Ngôn ngữ Javascript tạo Nescape vào năm 1996 và đưa vào trình duyệt Nescape Navigator 2.0 họ thông qua trình biên dịch để đọc và thực các mã lệnh Javascript kèm theo các trang HTML v Javascript là ngôn ngữ kịch (script) để viết kịch cho phía client Client side là yêu cầu người sử dụng xử lý máy khách Thông thường yêu cầu này là tính tóan, kiểm tra tính hợp lệ liệu hay các hiệu ứng, các yêu cầu này thường không liên quan đến nguồn sở liệu trên server (3) Đặc điểm JAVASCRIPT: a) Javascript là ngôn ngữ kịch viết chung với HTML b) Javascript là trình thông dịch c) Javascript là ngôn ngữ động vì các đối tựơng có khả tương tác với thông qua người sử dụng các kiện d) Là ngôn ngữ hướng đối tượng Phân biệt chữ hoa, chữ thường e) Được hỗ trợ tất các trình duyệt Nescape và Internet Explorer f) JavaScript có khả tạo và sử dụng các đối tượng(Object) (4) Các đối tượng JavaScript gồm nhóm: a) Các object có sẳn JavaScript JavaScript cung cấp các Built–in Object để cung cấp các thông tin hành các đối tượng load trang Web và nội dung nó, các đối tượng này gồm phương thức (method) làm việc với các thuộc tính (properties) nó b) Các Object người lập trình xây dựng: Định nghĩa thuộc tính, phương thức đối tượng: Cú pháp: ObjectName.PropertiesName ObjectName.Method() (5) II CẤU TRÚC CỦA ĐOẠN JAVASCRIPT Nhúng Javascript vào tập tin HTML <Script language=”JavaScript”> Các lệnh Javascript </script> v Có thể viết nhiều đọan mã Javascript cùng tập tin HTML v Các khối mã Javascript có thể đặt vị trí nào trang HTML (6) Ví dụ 1: <HTML> <HEAD> <script language="javascript" > document.write(“What is your name? ”); </script> </HEAD> <BODY> Nội dung trang </BODY> </HTML> (7) Sử dụng tập tin JavaScript bên ngoài: Có thể viết tập tin Javascript riêng và sau đó kết nối với nhiều tập tin trang web khác Cú pháp: <HTML> <BODY> <Script SRC=”fileJavascript.js” Language="javascript" > JavaScript program </Script> </BODY> </HTML> (8) Lưu ý: thẻ JavaScript ta có thể bỏ thuộc tính SRC và Language, đó ngôn ngữ mặc định là JavaScript Môi trường viết JAVASCRIPT: − Frontpage − Notepad − Visual InterDev − Dreamweaver để viết mã Javascript, Dreamweaver hổ trợ phân biệt từ khóa màu chữ, hổ trợ các hàm, thuộc tính các tag, giúp người sử dụng thuận tiên việc thiết kế và viết chương trình (9) III CÚ PHÁP CƠ BẢN CỦA LỆNH Lệnh đơn và khối lệnh: v Lệnh đơn: là câu lệnh kết thúc dấu chấm phẩy(;) Trong JavaScript cuối câu lệnh ta có thể dùng dấu (;) không dùng dấu gì v Khối lệnh: là tập hợp nhiều câu lệnh đơn bao bọc cặp dấu {} Lời chú thích chương trình: trình duyệt bỏ qua thông dịch chương trình JavaScript hổ trợ loại chú thích: − Chú thích trên dòng: dùng cặp dấu // − Chú thích trên nhiều dòng: dùng cặp dấu /*…*/ (10) Xuất liệu trang Web: JavaScript hỗ trợ phương thức hiển thị liệu trang Web là: + document.write() + document.writeln() − Nếu liệu là chuổi phải đặt cặp nháy kép − Nếu xuất giá trị biến thị không cần đặt nháy − Có thể dùng dấu + để nối các chuổi và biến document.write(“String ” + variable ); − Nếu xuất tag HTML thì cặp tag đó phải đặt cặp dấu nháy kép (11) Ví dụ: <BODY > <Script Language=”JavaScript”> document.write (“Trường ĐHCN TP.HCM"); document.write("<H1> Trường ĐHCN TP.HCM <H1>"); a =“ĐHCN TP.HCM” document.write (“Trường “ + a); </Script> </BODY> (12) Sử dụng document.writeln() và tag <pre>: v Dùng với tag <pre> <pre> document.writeln() xuất liệu và xuống dòng </pre> v Nếu không có cặp tag <pre></pre> document.writeln() tạo khoảng trắng (13) Ví dụ: <body> <pre> <script> document.writeln("<b>Hello</b>"); document.writeln("<b>World</b>"); </script> </pre> </body> (14) IV BIẾN VÀ DỮ LIỆU TRONG JAVASCRIPT Biến − Biến là tên phần tử chương trình, sử dụng để lưu trữ thông tin người dùng nhập vào kết trung gian quá trình tính toán − Trong Javascript khai báo biến không cần xác định kiểu liệu cho biến, đó biến khai báo thì nó có thể chứa kiểu liệu nào (15) a) Cách khai báo biến: Trong JavaScript, để khai báo biến dùng từ khoá var, có thể bỏ qua từ khóa var var VariableName; Ví dụ: var a ; Hoặc a=5;//khai báo và khởi tạo − Một biến có thể khai báo và khởi tạo không khởi tạo giá trị ban đầu − Múôn khai báo nhiều biến cùng lúc thì liệt kê tên biến cách dấu (,) (16) − Một biến có thể chứa kiểu liệu nào, giá trị biến có tác dụng từ vị trí khai báo trở Ví dụ: var a=”Hello World”; a=1999 ; b) Cách xuất giá trị biến: document.write(VariableName ) Ví dụ: var a=”Hello World”; a=1999 ; document.write(a) (17) c) Quy tắc đặt tên biến: Tên biến gồm các chữ cái và số, không dùng các ký tự đặc biệt như: ( , [ , { , # , & … theo nguyên tắc sau: a) Tên biến phải bắt đầu ký tự ký tự gạch dưới( _ ) b) Không bắt đầu ký tự số c) Không chứa khoảng trắng, tên biến phải gợi nhớ d) Không trùng với từ khoá JavaScript d) Các từ khoá JavaScript (18) abstract boolean break byte case catch char class const continue default Do double else extends false final finally float for Function goto if implements import In instanceof Int interface Long native New Null package private protected public return short static super switch synchronized this throw throws transient true try var val while with (19) e) Tầm vực biến: là tầm ảnh hưởng biến chương trình Có loại biến: v Biến toàn cục : khai báo ngoài các hàm Phạm vi hoạt động biến là từ vị trí khai báo trở sau chương trình v Biến cục bộ: khai báo chương trình Phạm vi hoạt động biến là từ vị trí khai báo đến kết thúc chương trình Lưu ý: Nếu tên biến toàn cục và cục trùng thì biên sử dụng hàm là biến cục (20) Dữ liệu: Có loại liệu a) Kiểu số: biến kiểu số chứa giá trị số nào: số thập phân, số nguyên, số dạng chấm phẩy động b) Kiểu chuổi: biến kiểu chuổi có thể chứa nhóm ký tự (Chữ cái, ký tự số, khoảng trắng, các ký tự đặc biệt, …) Giá trị chuổi phải đặt cặp dấu nháy đôi (“ “) đơn (‘ ‘) Ví dụ: var s1, s2, s3 ; s1=”Hello World” ; s2=’Hello World ‘ ; (21) c) Kiểu Boolean: Là liệu có giá trị False True thường dùng trường hợp biến hàm nhận trạng thái đúng sai d) Kiểu Null: trả giá trị rỗng Tóan tử: a) Tóan tử số học (22) Tóan Tử Chức Năng Ví dụ Kết + cộng x=2; x+2 - Trừ x=2; 5-x * / Nhân Chia x=4; x*5 % Chia lấy phần dư 5/2 5%2 20 2.5 ++ Tăng x=5; x++ x=5; x x=4 Giảm (23) b)Toán tử gán Tóan Tử Ví dụ Tương đương = x=y x= y += x += y x = x+y -= x -= y x = x-y *= x *= y x = x*y /= x /= y x= x/y %= x%=y x = x%y (24) c) Toán tử so sánh Tóan Tử Chức Năng Ví dụ == 5==8 returns false != Không 5!=8 returns true > lớn 5>8 returns false < nhỏ 5<8 returns true >= lớn hợn 5>=8 returns false <= nhỏ 5<=8 returns true (25) d)Toán tử logic Tóan Tử && || ! Chức Năng Ví dụ Và x =6; y =3 ; (x < 10 && y > 1) returns true x = ; y =3 (x==5 || y==5) returns false not x=6; y =3; !(x==y) returns true (26) e) Toán tử chuỗi Ký hiệu: + : Là phép toán nối hai chuỗi Ví dụ: <html> <script> txt1=”Welcome to”; txt2=“JavaScript!"; document.write('<h2>'+txt1+txt2+'</h2>'); </script> </html> (27) f) Tóan tử Điều kiện: Cú pháp: (Điều kiện) ? value1: value2 − Nếu biểu thức điều kiện đúng thì trả giá trị value − Nếu biểu thức điều kiện sai thì trả giá trị value Ví dụ: <html> <script> document.write((day="Saturday")? "Weekend": "Not Saturday") </script> </html> (28) g Một số ký tự đặc biệt: − \n : new line − \t : tab − \b : BackSpace − \& : dấu & − \”: dấu “ Ví dụ: <html> <script> document.write ("You \& i sing \"Happy Birthday\".") </script> </html> (29) CHƯƠNG HÀM TRONG JAVASCRIPT (30) I ĐỊNH NGHĨA Hàm là đọan chương trình có thể sử dụng nhiều lần chương trình để thực tác vụ nào đó Cách xây dựng hàm: Dùng từ khoá function để định nghĩa hàm Cú pháp: function FunctionName ( List_Parameter ) { Khai báo các biến sử dụng hàm ; Các câu lệnh JavaScript thực tác vụ; [return [giá trị /biểu thức] ]; } (31) − FunctionName: là tên hàm người lập trình đặt Qui tắc đặt tên hàm giống tên biến − Sau FunctionName là cặp dấu ngoặc ( ) chứa danh sách tham số hình thức − Nếu hàm không có tham số thì sau FunctionName phải có cặp dấu ngoặc ( ) − List_Parameter: là danh sách các tham số hình thức, có nhiều tham số có thì các tham số phải cách dấu phẩy, các tham số này không kiểu liệu cụ thể và không cần từ khoá var (32) − Câu lệnh return: để kết thúc hàm hàm có giá trị trả thì return để trả giá trị − Sau Return có thể chứa không chứa giá trị cụ thể biểu thức tính toán Ví dụ: function Display(user , pwd) { document.write(“UserName cua ban la:” + user) ; document.write(“Password cua ban la:” + pwd) ; return ; } (33) Cách gọi hàm: Hàm không thực nó gọi − Đối với hàm có đối số ta gọi tên hàm và danh sách các giá trị truyền cho đối số đó FunctionName(argument1,argument2,etc) − Đối với hàm không có đối số ta cần gọi tên hàm FunctionName() − Đối với hàm không có giá trị trả : NameFunction(parameter) − Đối với hàm có giá trị trả :phải gán giá trị trả cho biến variable= NameFunction(parameter) (34) Ví dụ: <html> <head><title>Function</title></head> <body> <script> function tong(a , b) { c=a+b; document.write(c); } tong(2,3); </script> </body></html> (35) I CÁC HÀM THÔNG DỤNG TRONG JAVASCRIPT Hàm alert(): dùng hiển thị hộp thông báo có nút OK Cú pháp: alert(“nội dung thông báo”) Ví dụ: <html><head><title>Function</title></head> <body> <script> alert("Hello World") </script> </body></html> (36) Hàm prompt(): Tạo hộp thoại chứa nút OK ,Cancel và textbox để người sd nhập nội dung, giá trị trả hàm prompt là nội dung nhập textbox Cú pháp: prompt(“nội dung đối thoại”,giá trị khởi tạo); ví dụ: <script> a=prompt("Your Lastname:"); b=prompt("Your FirstName:"); document.write("Your FullName is :"+ a + ' ' + b) </script> (37) Hàm confirm(): Hiển thị hộp thông báo có nút OK và Cancel Hàm trả giá trị true người sử dụng click OK và ngược lại thì trả giá trị false Cúp pháp: variable=confirm(“Chuoi thong bao”); Ví dụ: <script> a=prompt("nhap so a :"); b=prompt("nhap so b"); c=confirm( a +' lon hon '+ b+'?') if(c= =true) document.write( a +" > "+b ) else document.write( a +" < "+b ) </script> (38) Các hàm thông dụng chuổi và số: a) Hàm eval(): Trả giá trị số chuổi số Cú pháp: eval(chuổi số) Ví dụ: <script> var str1=”123”, str2=”456”; str= str1+str2; document.write(str);à kết :123456 </script> (39) Ví dụ: <script> a = eval(prompt(“Nhập số a:”)); b = eval(prompt(“Nhập số b:”)); c = a+b ; document.write(c) </script> (40) b) Hàm ParseInt(strNum) − Trả số nguyên từ chuổi strNum − Nếu strNum theo sau là ký tự chữ thì các ký tự này bị bỏ qua − Nếu strNum không bắt đầu số thì hàm này trả giá trị NaN (Not a Number) Ví dụ : var strNum=”123.8” , kq; kq=parseInt(strNum) =>kq=123 strNum=”a123” kq=parseInt(strNum) =>kq=NaN strNum=”123.8abc” kq=parseInt(strNum)=>kq=123 (41) c) Hàm parseFloat(strNum): − Hàm trả số thực từ chuổi strNum − Nếu chuổi strNum bắt đầu là số và theo sau là các ký tự chữ thì các ký tự này bị bỏ qua − Nếu chuổi strNum ký tự chữ thì hàm trả giá trị NaN Ví dụ: var strNum=”123.8” , kq; kq=parseFloat(strNum) =>kq=123.8 strNum=”a123.8” kq=parseFloat(strNum) =>kq=NaN strNum=”123.8abc” kq=parseFloat(strNum)=>kq=123.8 (42) d) Hàm isNaN(str): Hàm trả giá trị True str là chuổi, ngược lại là False str là chuổi số Ví dụ : Var str=”123abc”, kq; kq=isNaN(str) =>kq=true; str=”123.8” kq=isNaN(str) =>kq=false ; (43) Các hàm thiết lập thời gian: a) Hàm setTimeout( ): Báo cho JavaScript thực lệnh JavaScript sau khoảng thời gian nào đó − Hàm trả ID (duy hàm setTimeout thực lệnh) − Giá trị ID này dùng để xoá khoảng thời gian đã thiết lập không cần thực hàm Timeout Cú pháp: IdTime=setTimeout(“Command JavaScript”, delayTime); − Command JavaScript : có thể là lời gọi hàm là câu lệnh đơn − delayTime :là khoảng thời gian chờ để thi hành Command JavaScript, tính mili giây (44) Ví dụ: Idq=setTimeout(“alert(‘Đã hết giờ’)”,1000) ; Cứ 1000 mili giây thì thông báo đã hết lần b) Hàm clearTimeout():Huỷ thời gian đã thiết lập setTimeout() Cú pháp: clearTimeout(IdTime ); Ví dụ: clearTimeout(Idq ); (45) c) Hàm setInterval() và clearInterval(): Ý nghĩa và tham số giống setTimeout() và clearTimeout() (46) CHƯƠNG CẤU TRÚC ĐIỀU KHIỂN (47) I CẤU TRÚC LỰA CHỌN Câu lệnh if: a) Mẫu 1: điều kiện và công việc xử lý Cú pháp: if (<Biểu thức điều kiện>) Khối lệnh 1; Khối lệnh 2; (48) b) Mẫu 2: điều kiện và lựa chọn công việc xử lý Cú pháp: if(<biểu thức điều kiện>) Khối lệnh1; else Khối lệnh ; Khối lệnh 3; (49) a) Mẫu (if …else lồng nhau): Áp dụng cho trường hợp có nhiều chọn lựa khác Cú pháp: if(<biểu thức điều kiện1>) Khối lệnh 1; else if (<biểu thức điều kiện 2>) Khối lệnh ; else … khối lệnh (50) <script language="javascript"> a=eval(prompt("Nhap canh a")); b=eval(prompt("Nhap canh b")); c=eval(prompt("Nhap canh c")); if(a+b<c||b+c<a||c+a<b) alert("Khong phai tam giac") else if(a==b&&b==c&&c==a) alert("Tam giac đều") ; else if(a==b||b==c||c==a) alert("Tam giac cân"); else alert("Tam giác thuong"); </script> (51) Cấu trúc chọn lựa Switch Case a) Mẫu 1: switch(Biểu thức) { case value1: Khối lệnh 1; break; case value2: Khối lệnh ; break; ……… case valuek: Khối lệnh k ; break; } (52) b) Mẫu 2: switch(biểu thức) { case value1: khối lệnh ; break; case value2: khối lệnh ; break; ……… case valuek: khối lệnh k ; break; default : khối lệnh k+1 ;} (53) VD: <script> t=prompt( "nhap thang: "); switch (eval(t)) { case 1: case 3: case 5: case 7: case : case 10: case 12: alert("Thang "+ t+ " co 31 ngay"); break; case 2: alert("Thang "+t + " co 28 ngay"); break; case 4: case 6: case 9: case 11: alert("Thang "+t +" co 30 ngay"); break; default: alert("Khong co thang nay"); }</script> (54) II CẤU TRÚC LĂP Vòng lặp For: Áp dụng cho số lần lặp biết trứơc Cú pháp: for(biểu thức 1; biểu thức 2; biểu thức 3) { Khối lệnh 1; } khối lệnh 2; (55) Ví dụ: Viết chương trình tạo table m dòng n cột <body><Script language="javascript"> var n, m, i, j; m=prompt("Nhap so dong"); n=prompt("Nhap so cot"); document.write("<table width=50% border=1>"); for(i=1;i<=m;i++) { document.write("<tr>"); for(j=1;j<=n;j++) document.write("<td>" + i + j +"</td>"); document.write("</tr>"); } document.write("</table>"); </Script></body> (56) Vòng lặp while: thường áp dụng cho số lần lặp không xác định a) Vòng lập While: Kiểm tra điều kiện trước thực lệnh Cú pháp: while(biểu thức điều kiện) { Khối lệnh 1; } Khối lệnh 2; (57) Ví dụ: <script language="javascript"> var input; while (input!=99 ) { input=prompt(“Nhập vào số kỳ, nhập 99 đế thóat”) if(isNaN(input) { document.write(“Dữ liệu không hợp lệ, nhập số ”); break; } }</script> (58) Vòng lặp …while: Thực lệnh trước sau đó kiểm tra biểu thức điều kiện Cú pháp: { khối lệnh 1; } While(biểu thức điều kiện); khối lệnh 2; (59) <script language="javascript"> var input; { input=prompt(“Nhập vào số kỳ, nhập 99 đế thóat”) if(isNaN(input) { document.write(“Dữ liệu không hợp lệ, nhập số ”); break; } }while (input!=99 ) </script> (60) Vòng lặp for …in: dùng để duyệt qua các thuộc tính đối tượng hay giá trị các phần tử mảng Cú pháp: for ( variable in Object) { khối lệnh ; } khối lệnh 2; (61) VD: <body> <script> obj= new Array() ; obj[0]="Hello"; obj[1]="World" ; for(i in obj) document.write(obj[i]); </script> </body> (62) Câu lệnh try …catch và throw: dùng xử lý lỗi các modul Nó dùng Internet Exploer và IIS Cú pháp: try { khối lệnh ; } catch(objErr) { Xữ lý lỗi ; } (63) CHƯƠNG MÔ HÌNH ĐỐI TƯỢNG (64) I MÔ HÌNH DOM ((Document Object Model) Đối tượng – Mô hình đối tượng: − Mỗi thành phần trên trang web xem đối tượng, Tất các đối tượng Javascript tổ chức phân cấp dạng hình cây gọi là mô hình DOM (Document Object Model), Ở mức trên cùng là đối tượng window biểu thị cho khung hay cửa sổ trình duyệt, các phần tử còn lại là đối tượng window − Để truy xuất đến đối tượng IE và thay đổi liệu cho chính phần tử đó dùng thuộc tính ID , tất các đối tượng trên trang có ID (65) window document event frame history location document form Reset submit button check box select hidden password text radio textarea anchor applet class element plug-in embed style ID tag image layer link navigator screen (66) Mục đích mô hình DOM: − Để định nghĩa tổ chức phân cấp thể các phần hồ sơ web − Cho phép thay đổi cấu trúc đó thông qua việc thêm bớt nội dung − Cung cấp cách thức quan sát, thao tác các đặc tính nội dung trên trang web − Cung cấp thông tin cách tương tác các mục trên trang web với người dùng − Nó cho phép thông báo các kiện gây chuột và bàn phím (67) − Muốn truy cập vào đối tượng thì phải truy cập vào đối tượng chứa nó trước, dùng dấu chấm (.) để phân cách các đối tượng Tuy nhiên ta có thể bỏ qua đối tượng window thao tác trên cửa sổ hành Ví dụ: window.location − Ngoài các đối tượng chương trình xây dựng sẳn, có thể tạo thêm đối tượng cần thiết cho nhu cầu sử dụng − Mỗi đối tượng có các thuộc tính, phương thức và kiện nó (68) a) Thuộc tính (Properties): là nơi chứa các mô tả thông tin đối tựơng Ví dụ: <img src=”URL” height=value1 width=value2 Id=”Idh1”> Trong tag Img có thuộc tính src, width, height, Để thay đổi kích thước hình ta dựa vào thuộc tính Id là Idh1 Idh1.width, Idh1.height Idh1.src (69) Ví dụ function ZoomIn() { Idh1.width=Idh1.width +10; Idh1.height=Idh1.height + 5; } function ChangeImg(file) { Idh1.src=file ; } (70) b) Sự kiện (event): là các hành động, việc xãy trên trang web: click chuột, di chuyển chuột,… Sự kiện xử lý các đoạn mã kịch gọi là xử lý kiện v Cách sử dụng các kiện: muốn điều khiển kiện, ta thêm kiện đó vào thẻ HTML v Cú pháp: < TagName eventhandler=”JavaScriptCommand”> − TagName: tên tag − eventhandler: tên kiện − JavaScript Command: gọi hàm xử lý kiện (71) Tên kiện Ý nghĩa Onmousedown Phát sinh người sdụng nhấn chuột Onmouseover Phát sinh người sdụng d/chuyển chuột lên đối tượng Onmouseout Phát sinh người sdụng d/chuyển chuột ngoài đtượng Onkeypress Phát sinh người sử dụng nhấn phím Onfocus Phát sinh đối tượng nhận tiêu điểm Onblur Phát sinh rời khỏi đối tượng Onclick - Người dùng click chuột vào đối tượng - Một đối tượng có tiêu điểm, người sd nhấn enter -Một checkbox nút chọn có tiêu điểm, người sd nhấn phím Spacebar Onload - Phát sinh đối tượng tải xuống OnUnload - Phát sinh đối tượng nạp trở lại chuyển trang Onresize - Phát sinh cửa sổ bị thay đổi kích thước Onselect - Phát sinh đối tựơng chọn Onchange - Phát sinh đối tượng thay đổi giá trị Onsubmit - Phát sinh Form Submit (72) c) Phương thức Method(): Là các hàm đươc xây dụng trước có tác dụng làm thay đổi thuộc tính đối tượng Cách truy xuất vào phương thức đối tượng Object_name.Method() (73) Xây dựng đối tượng mới: v Cách xây dựng đối tượng mới: Gồm bước a) Bước 1: Định nghĩa đối tượng cách xây dựng hàm cho đối tượng đó gồm các phương thức và thuộc tính cho đối tượng đó function Object(List Parameter) { this.property1= Parameter1; this.property2= Parameter2; … this.method1=functionName1; this.method2=functionName2; … } (74) Trong đó − Từ khoá this để tham chiếu đến đối tượng tạo − Câu lệnh this.property1= Parameter1: gán giá trị Parameter1 cho thuộc tính property1 − Tương tự: muốn xâydựng phương thức cho đối tượng thì gán phương thức cho hàm đã định nghĩa sẵn this.method1=FunctionName1; b) Bước 2: Tạo instance cho đối tượng, var obj=new Object(); v Truy cập thay đổi g/ trị thuộc tính: obj.property v Sử dụng phương thức : obj.method() (75) I CÁC ĐỐI TƯỢNG CÓ SẲN TRONG JAVASRIPT Đối tượng Array(): Dùng để lưu trữ nhiều giá trị với cùng tên gọi Trong Javascript đối tượng mảng có thể chứa các thành phần mang kiểu giá trị khác Một mảng có n phần tử đánh số từ đến n-1 − Mỗi phần tử mảng phân biệt qua số, dựa vào số này ta có thể truy cập thay đổi giá trị phần tử mảng a) Khởi tạo mảng: Dùng từ khóa new để khởi tạo mảng var Variable = new Array(size) (76) Ví dụ: <script> var arr= new Array() arr[0]= "thu hai"; arr[1]= "Thu ba"; arr[2]= "Thu tu"; arr[3]= "Thu nam"; arr[4]= "Thu sau"; arr[5]= "Thu bay"; for(i=0; i<=5;i++) document.write(arr[i]+ "<br>") </script> (77) b) Thuộc tính và phương thức Array() v length : để xác định số phần tử mảng Ví dụ: <script> var arr= new Array() arr[0]= "thu hai"; arr[1]= "Thu ba"; arr[2]= "Thu tu"; arr[3]= "Thu nam"; arr[4]= "Thu sau"; arr[5]= "Thu bay"; document.write("So phan tu mang la: " +arr.length) </script> (78) Phương thức concat() Ý nghĩa Dùng để nối mảng Ví dụ a=a.concat(b) để ghép các phần tử mảng lại với join(separator) cách dấu separator a=a.join(“+”) Dùng tách mảng vtrí start đến slice(start,end) vtrí end-1 str=a.slice(i,j) reverse() valueOf() Dùng để đảo ngược mảng Dùng để lấy tất các đối tượng mảng pop() Lấy phần tử cuối mảng push() Thêm nhiều phần tử vào cuối mảng Shift() lấy phần tử và trả phần tử đầu tiên mảng Sort() xếp các phần tử mảng a.reverse() a.valueOf() (79) Ví dụ 1: <script> var a=new Array() a[0]= “Thang gieng”; a[1]= “Thang hai”; a[2]= “Thang ba”; var b =new Array(); b[0]= “Thang tu”; b[1]= “Thang nam”; b[2]= “Thang sau”; a=a.concat(b); document.write(a); </script> (80) Ví dụ <script type="text/javascript"> var arrName = new Array(3) arrName [0] = "Jani" arrName [1] = "Tove" arrName [2] = "Hege" document.write(arrName.length + "<br>") document.write(arrName.join(".") + "<br>") document.write(arrName.reverse() + "<br>") document.write(arrName.sort() + "<br>") document.write(arrName.push("Ola","Jon") + "<br>") document.write(arrName.pop() + "<br>") document.write(arrName.shift() + "<br>") </script> (81) Đối tượng Date() : Cung cấp thông tin ngày, trên môi trường client Dùng thiết lập ngày tháng năm và hành trên trang web a) Cách khai báo: Có cách khai báo v Cách 1: Khai báo và khởi tạo var variableName= new Date(“month, day, year, hours : minutes : seconds”) hoặc: var variableName= new Date(year,month,day,hours,minutes,second) (82) hoặc: var variableName= new Date(year,month, day) var variableName= new Date("Month, dd, yyyy hh:mm:ss") var variableName= new Date("Month, dd, yyyy") var variableName= new Date(yy,mm,dd,hh,mm,ss) var variableName= new Date(yy,mm,dd) var variableName= new Date(milliseconds) variableName là biến dùng để lưu trữ thông tin ngày tháng năm, phút giây (83) − Trường hợp 1: giá trị khởi tạo là chuổi Trong trường hợp này month là chuổi, − Trường hợp và 3, giá trị là số Ví dụ: var objday =new Date("November,1,2003,7:30:9") // Khai báo hợp lệ var objday= new Date("10,1,2003,7:30:9") //Khai báo không hợp lệ v Cách 2: Khai báo ngày hành var variableName=new Date() Trong trường hợp này giá trị trả là ngày tháng năm phút giây hành hệ thống (84) b) Các phương thức đối tượng Date(): Để truy xuất phương thức đối tượng dùng cú pháp variableName.Method() Phương thức Mô tả Date() getDate() getDay() trả đối tượng date Trả giá trị ngày ( số nguyên từ 1-31) tháng Trả giá trị ngày tuần ( số nguyên từ 0-6 Sunday=0) getMonth() Trả tháng năm (from 0-11 0=January, 1=February) getFullYear() Trả giá trị năm (bốn số ) getYear() Trả giá trị năm (hai số ) getHours() Trả hệ thống (từ 0-23) (85) getMinutes() Trả phút hệ thống (từ 0-59) getSeconds() Trả giây hệ thống (từ 0-59) getMilliseconds() Trả giá trị millisecond from 0-999) setFullYear() Thiết lập lại năm cho ngày hệ thống ( số) setHours() Thiết lập lại cho hệ thống ( từ 0-24) setMinutes() Thiết lập lại phút cho hệ thống ( từ 0-59) setMonth() Thiết lập lại tháng cho hệ thống ( từ 0-11) setSeconds() Thiết lập lại giây cho hệ thống (from 0-59) (86) Ví dụ: <script> d.setFullYear(2008) document.write(d.getFullYear()+"<br>") </script> Ví dụ: <script language="javascript"> function Ngay() { var day=new Date(); var w,m,d,y; var arrday=new Array(); (87) arrday[0]= “chu nhat”; arrday[1]= “Thu hai ”; arrday[2]= “Thu ba ”; arrday[3]= “Thu tu”; arrday[4]= “Thu nam ”; arrday[5]= “Thu sau”; arrday[6]= “Thu Bay”; w=day.getDay(); d=day.getDate(); m=day.getMonth()+1; y=day.getFullYear(); document.write(“Hom nay:”+arrday[w]+” “+d+” thang “+m+ “ nam “ +y); } </script></head> <body> <script language=”Javascript”>Ngay()</script>//gọi hàm </body></html> (88) Đối tượng String() Mỗi chuổi JavaScript là đối tượng, gồm các thuộc tính và phương thức thực trên chuỗi, đó là các phương thức tìm kiếm chuỗi, trích chuỗi và áp dụng các thẻ HTML vào nội dung chuỗi a) Cách khai báo đối tượng String var stringVariable=new String() Ví dụ: var st=new Student() (89) b) Thuộc tính Srting(): v Length: dùng để xác định chiều dài chuổi Các ký tự chuổi đánh số từ đến Length-1 − Cách tham chiếu đến thuộc tính length đối tựơng String(): § StringLength=stringVariable.length § StringLength=”This is a string”.length c) Các phương thức String:Các phương thức String để thực các thao tác trên nội dung chuỗi: (90) Phương thức Mô tả Ví dụ str.anchor(“name”) anchor("name") Tham số name là thuộc tính NAME tag <A> big() Trả chuỗi đặt cặp thẻ <big> str.big() Bold() Trả chuỗi in đậm str.bold() charAt(index) Trả ký tự thứ index chuỗi index từ đến str.length-1 concat() Nối chuổi fontcolor() Trả chuỗi với màu đã xác lập fontsize() kích thước font str.charAt(0) str.fontcolor(“red”) str.fontsize(“5”) (91) indexOf(“str”, [fromindex]) Trả vị trí đầu tiên tìm thấy chuỗi “str” bắt đầu tìm từ vị trí fromindex Nếu không có fromindex thì tìm từ vị trí Nếu không tìm thấy thì hàm trả giá trị -1 italics() Trả chuỗi in nghiêng lastIndexOf(“str”) Trả vị trí cuối cùng tìm thấy chuỗi “str”, tìm từ trái qua phải Nếu không tìm thấy thì hàm trả giá trị -1 link() Trả chuỗi liên kết match() Tương tự hàm indexOf và lastindexOf, phương thức này trả chuỗi cụ thể không tìm thấy thì trả giá trị "null" replace() Thay chuỗi chuỗi (92) search(‘str’) Trả giá trị là vị trí chuỗi tìm thấy chuỗi cha, không tìm thấy thì trả giá trị -1 slice(index) Trả chuỗi cắt từ chuỗi mẹ vị trí index small() Trả chuỗi có kích thước nhỏ strike() Trả chuỗi gạnh ngang qua thân chuỗi sub() Trả chuỗi kiểu subscript Str.sub() (93) substr(start,length) Trả chuỗi vị trí start và có chiều dài length không có start xem start=0 Tách chuỗi từ chuỗi Bắt đầu từ số start đến end Nếu Start<end, chuỗi trả từ substring(Start,end) start đến end-1 Nếu end<start, chuỗi trả từ end đến start Nếu start=end chuỗi trả là null sup() Trả chuỗi kiểu superscript toLowerCase() Chuyển chuỗi thành chữ thường toUpperCase() Chuyển chuỗi thành chữ hoa Str.substr(0,2) =”Th” (94) Ví dụ: <script type="text/javascript"> var str=“Trường Đại Học Công Nghiệp TP.HCM" document.write("<p>" + str + "</p>") document.write(“Chieu dai cua chuoi la : “+ str.length) </script> (95) Ví dụ Phương thức indexOf Phương thức này trả vị trí chuỗi tìm thấy chuỗi <script type="text/javascript"> var str="This is my Schools " var pos=str.indexOf("School") if (pos>=0) { document.write("School found at position: ") document.write(pos + "<br />") } Else { document.write("School not found!") } </script> (96) Ví dụ: <script> var st=new String() st="KHOA CONG NGHE THONG TIN" document.write(st.lastIndexOf("N")+"<br>") document.write(st.link()+"<br>") document.write(st.match(“THONG TIN”)+"<br>") document.write(st.replace("KHOACONGNGHETHO NGTIN","KHOA CNTT")+"<br>") </script> (97) Đối tượng Math() Đối tượng Math() cung cấp các hàm và các phương thức cần thiết để thực các phép toán số học Không cần phải tạo đối tượng Math() mà chúng ta có thể sử dụng trực tiếp đối tượng này a) Các phương thức Math(): Cú pháp chung: Math.method([value]) (98) Phương thức Mô tả abs(x) Trả giá trị tuyệt đối biến x acos(x) Trả giá trị arccosine x ceil(x) Trả số nguyên lớn x floor(x) Trả số nguyên nhỏ x log(x) Trả giá trị log x max(x,y) Trả giá trị lớn hai số x và y min(x,y) Trả giá trị nhỏ hai số x và y pow(x,y) Trả giá trị x lũy thừa y random() Trả giá trị số ngẫu nhiên từ đến round(x) Làm tròn số x sqrt(x) Trả giá trị bậc x (99) Ví dụ: <script> var n= -136.8 , m=136.8 document.write("abs(-136.8) = " + Math.abs(n) +"<br>") document.write("ceil(136.8) = " + Math.ceil(m) +"<br>") document.write("floor (136.8) = " + Math.floor(m) +"<br>") document.write("pow (2,3) = "+ Math.pow(2,3)+"<br>") document.write("Mot so ngau nhien <=5 : " + Math.random()*5 +"<br>") <script> (100) Ví dụ: Viết chương trình tạo nút đổi hình (play) và nút stop để ngưng </head><script> var idq; function play() { var arrhinh= new Array(); arrhinh[0]= " /images/h1.jpg"; arrhinh[1]= " /images/h2.jpg"; arrhinh[2]= " /images/h3.jpg"; arrhinh[3]= " /images/h4.jpg"; arrhinh[4]= " /images/h5.jpg"; arrhinh[5]= " /images/h6.jpg"; var i=Math.round(Math.random()*4) idhinh.src=arrhinh[i]; idq=setTimeout(“play()”,1000); } (101) function stop() { clearTimeout(idq); } </script> </head> <body> <img src=”hinh.jpg” width=100 height=200 id=”idhinh”> <form> <input type=button value= “Play” onClick= “play()”> <input type=button value= “Stop” onClick= “stop()”> </form> </body></html> (102) Đối tượng document: Đối tượng document cung cấp các thuộc tính và phương thức để làm việc với toàn tài liệu hành gồm: form, liên kết, hình ảnh, tiêu đề, vị trí hành, màu hành… Đối tượng document định nghĩa tag body xử lý trang HTML và nó tồn trang nạp Các thuộc tính document phản ánh thuộc tính tag body Trong body có kiện OnLoad và Unload a) Các thuộc tính đối tượng document (103) Thuộc tính Mô tả alinkcolor Thiết lập trả giá trị màu liên kết xem tài liệu bgcolor Thiết lập trả giá trị màu tài liệu cookie Chứa giá trị các cookies dành cho tài liệu hành domain Trả giá trị tên miền máy chủ chứa document fgcolor Thiết lập trả giá trị màu chữ tài liệu lastmodified Trả giá trị ngày cuối cùng mà tài liệu cập nhật (104) linkcolor Thiết lập trả giá trị màu liên kết tài liệu location mở trang web referrer Returns the URL of the document that loaded the current document title Trả giá trị tựa đề tài liệu url Trả đường dẫn củ tài liệu hành vlinkcolor Thiết lập trả giá trị màu liên kết đã xem tài liệu (105) b) Phương thức đối tượng document Phương thức Mô tả clear() Xóa tài liệu close() Đóng tài liệu focus() Đưa trỏ đối tượng trang open([“mimetype”]) Mở stream để thu thập liệu các phương thức write và writeln write("str") viết chuỗi vào tài liệu writeln("str") viết chuỗi vào tài liệu và xuống dòng (106) c) Sự kiện tác động đối tượng document Cú pháp: document.event_name="someJavaScriptCode" − OnBlur − OnClick − OnDblClick − OnFocus − OnKeyDown − OnKeyPress − OnKeyUp − OnMouseDown − OnMouseMove − OnMouseOut − OnMouseOver − OnMouseUp − OnMouseUp (107) Đối tượng trình duyệt (Navigator Object) Đối tượng trình duyệt chứa đựng thông tin trình duyệt web client Có hai trình duyệt web − Nescape Navigator − Internet Explorer Mặc dù hai hỗ trợ mô hình đối tượng trên ngôn ngữ Javascript có số đối tượng và cách truy cập vào thành phần thuộc tính trên hai trình duyệt có cái khác Muốn cho ứng dụng chạy hoàn chỉnh trên trình duyệt thì người lập trình phải xác định chương trình chạy trên trình duyệt nào và version nào để xử lý đọan code tốt (108) Thuộc tính Mô tả appName Tên trình duyệt appVersion Phiên trình duyệt cookieEnabled platform Nền hệ điều hành appCodeName Xác định tên nội trình duyệt (Atlas) (109) Ví dụ: <HTML> <HEAD><TITLE> Navigator Object Exemple </TITLE> <SCRIPT LANGUAGE= "JavaScript"> document.write("appCodeName = "+navigator.appCodeName + "<BR>"); document.write("appName = "+navigator.appName + "<BR>"); document.write("appVersion = "+navigator.appVersion + "<BR>"); document.write("userAgent = "+navigator.userAgent + "<BR>"); </SCRIPT> </HEAD> <BODY> </BODY> </HTML> (110) Đối tượng Window Là đối tượng cao mô hình DOM, là nơi chứa tất các thành phần trang web a) Các thuộc tính Windows: Thuộc tính Mô tả Giá trị defaultStatus thiết lập chuổi t/báo trên trạng thái Text status thiết lập thông báo thời điểm hành Text location Xác định vị trí trang cửa sổ URL history Xác định các phần tử history (111) alwaysLowered hiển thị cửa sổ bên các sổ khác Yes/no alwaysRaised hiển thị cửa sổ trên tất các cửa sổ khác Yes/no Dependent Cửa sổ này đóng cửa sổ cha bị đóng Yes/no directories Hiển thị Button thư mục Yes/no fullscreen hiển thị chế độ đầy màn hình Yes/no height thiết lập chiều cao cửa sổ số nguyên hotkeys Cho phép dùng phím nóng Yes/no Thiết lập k/cách từ text đến cạnh cửa sổ số nguyên left (112) location hiển thị hộp location Yes/no menubar hiển thị menu bar Yes/no resizable Cho phép thay đổi kích thước cửa sổ Yes/no scrolbars xuất /không xuất cuộn Yes/no status Hiển thị trạng thái Yes/no titlebar hiển thị tiêu đề Yes/no toolbar hiển thị công cụ Yes/no width Xác định độ rộng cửa sổ số nguyên closed trả giá trị true, false True cửa sổ đóng true, false (113) Ví dụ: window.defaultStatus=”String” window.status=”String” window.location=”URL” Ta có thể mở trang web lệnh: window.location.href=”URL” (114) Phương Thức Mô tả alert("msg") Hiển Thị hộp thọai thông báo blur() Di chuyển trỏ đến cửa sổ hành clearinterval(ID) Hủy thời gian đã thiết lập setinterval() clearTimeout(ID) Hủy thời gian đã thiết lập setTimeout() close() Đóng cửa sổ hành confirm("msg") Hiển thị hộp thọai xác nhận với hai nút Cancel và OK focus() Đưa trỏ cửa sổ hiệnhành MoveBy(x,y) Di chuyển cửa sổ đến vị trí đọan pixel so với cửa sổ hành MoveTo(x,y) Di chuyển cửa sổ qua trái và lên trên đọan pixel cụ thể so với cửa sổ hành (115) URL : đc trang web nạp vào cửa sổ open(URL,"windowname", WindowName: là tên cửa sổ "FeatureList") FeatureList : danh sách các thuộc tính cửa sổ: toolbars, menu, status … print() in nội dung cửa sổ hành prompt("msg","reply") Hiển thị hộp thoại nhập liệu setTimeout(func,millisec) Thiết lập thời gian mili giây để gọi hàm stop() Hủy việc download cửa sổ Tương tự việc đóng cửa sổ trình duyệt resizeBy(dx,dy) Thay đổi kích thước cửa sổ sang phải dx, dy pixel resizeTo(x,y) Thay đổi kích thước x, y pixel scrollBy(dx,dy) cuộn nội dung sang phải dx, xuống dy pixel scrollTo(x,y) cuộn nội dung trên trang đốn vị trí x,y (116) Ví dụ: Objwindow.close() v Từ khoá self: trường hợp muốn thao tác trên cửa sổ hành ta dùng từ khoá self thay cho đối tượng window Ví dụ : đóng cửa sổ hành: Self.close() window.close() (117) Ví dụ: Đoạn Script đóng, mở cửa sổ trình duyệt <html><head></head> <body> <FORM NAME="winform"> <INPUT TYPE="button" VALUE="Open New Window" onClick="NewWin=window.open('blank1.htm','NewWin', 'toolbar=no,status=no,width=200,height=100'); "> <P><INPUT TYPE="button" VALUE="Close New Window" onClick="NewWin.close();" > <P><INPUT TYPE="button" VALUE="Close Main Window" onClick="window.close();"> </FORM> </body></html> (118) I Đối tượng form Form là thành phần dùng để thu thập liệu, thông tin từ người dùng Mỗi phần tử form là đối tượng DOM Do đó phần tử trên form có kiện và phương thức nó Các kiện các phần tử trên form (119) Phần tử Tên kiện Button onClick Checkbox onClick Form OnSubmit, onReset Textbox OnBlur,OnChange,OnFocus,Onselect Radio OnClick Reset button OnClick Dropdown menu OnBlur,onChange,onFocus,onSelect Submit button OnClick Textarea OnBlur,OnChange,OnFocus,Onselect (120) Thuộc tính form T/tính Mô tả Ví dụ Action Document.forms[i].action Trả đường dẫn (URL) đến tập tin xử lý form thứ i Length Trả số form trên Countform=document.forms.length trang web Countfield=document.forms[i].length Hoặc trả số phần tử trên form thứ i Name Trả giá trị tên form thứ i Nameform=document.forms[i].name Method Các định phương thức form thứ i Methodform=document.forms[i].method elements mảng element chứa document.forms[i].elements[j].value các phần tử trên form (121) Ví dụ: <script> function kq() { sptform=document.form1.length document.form1.spt.value=sptform tenform=document.forms[0].name document.form1.formname.value=tenform } </script> (122) T/ tính Các thuộc tính trên mảng element Mô tả Ví dụ Xác định tên document.forms[i].elements[j].name Name phần tử j trên form thứ i Type Value Xác định lọai đối tượng document.forms[i].elements[j].type Xác định giá trị phần tử thứ j form i document.forms[i].elements[j].value (123) Checked Disabled isDisable readOnly Xác định phần tử thứ j có checked không Thiết lập chế độ vô hiệu hóa đối tượng Kiểm tra phần tử có bị vô hiệu hóa hay không Cho phép/không thay đổi nội dung phần tử document.form[i] elements[j].checked àtrả giá trị true false document.form[i].elements[j] disabled document.form[i].elements[j] isDisable document.forms[i].elements[j] readOnly (124) Ví dụ: function loadform() { document.form1.ok.disabled=true; } function validateform() { a=document.form1.user.value; if(a!="") document.form1.ok.disabled=false; else document.form1.ok.disabled=true; } (125) 4) Phương thức trên mảng element • Focus (): Đưa trỏ lại text box dropdownmenu document.forms[i].elements[j].focus() Ví dụ: document.form1.user.focus(); Lưu ý: Nếu ta làm việc trên document hành, thì có thể bỏ qua document nameForm.nameField.property nameForm.nameField.method (126) II Các phần tử trên from Thao tác trên trường radio Để lấy giá trị trường radio ta phải sử dụng đến mảng element Duyệt qua tất các phần tử và kiểm tra phần tử đó có checked không ? v Cú pháp: Countfield=nameform.length for(var i=0 ; i<Countfield ; i++) r Giatri=nameform.elements[i].value (127) Ví dụ: <script> function chontrinhduyet() { count=document.form1.length; for(i=0; i<count; i++) { if(document.form1.elements[i].type=="radio"&& document.form1.elements[i].checked==true) gt=document.form1.elements[i].value } document.form1.chon.value=gt } </script> (128) Ví dụ : Checkbox <script type="text/javascript"> function check() { coffee=document.forms[0].coffee answer=document.forms[0].answer txt="" for (i = 0; i<coffee.length; ++ i) { if (coffee[i].checked) {txt=txt + coffee[i].value + " "} } answer.value="You ordered a coffee with " + txt } </script> (129) Thao tác trên dropdownmenu a) Thuộc tính và phương thức dropdownmenu − Thuôc tính Thuộc tính Mô tả Ví dụ spt=nameform.namefield.length length Trả số phần tử danh sách dropdownmenu trả số spt=nameform.namefield selectedIndex selectedIndex phần tử chọn danh sách options mảng option đánh số từ 0->spt-1 (130) Ví dụ: <script type="text/javascript"> function chonkhoa() { option=document.forms[0].khoa.options[document forms[0].khoa.selectedIndex].text txt=document.forms[0].chon.value txt=txt + option document.forms[0].chon.value=txt } </script> (131) III THAY ĐỔI NỘI DUNG ĐỘNG TRÊN TRANG Thay đổi nội dung trên trang dựa vào inner và outer Ta dùng đặc tính inner và outer để thay đổi nội dung lấy giá trị vùng nào đó trên trang web a) Phân biệt inner và outer v Inner là nội dung chứa bên đối tượng chứa ID Inner gồm có − InnerHTML lấy nội dung text và tag HTML bên đối tượng ID − innerText: lấy nội dung text bên dối tượng ID (132) v Outer là phần inner và thân đối tượng chứa ID Outer gồm có − outerHTML lấy nội dung text và tag HTML đối tượng ID − outerText : lấy nội dung text Ví dụ: <Div ID=Intro>Monitor<B> SAMSUNG</B></Div> inner outer (133) Ví dụ: Var s1,s2 s1=Intro.outerText s2=Intro.innerText thì s1 và s2 nhận giá trị Monitor SAMSUNG Ví dụ s1=Intro.outerHTML s2=Intro.innerHTML Thì s1=<Div Id=Intro>Monitor<B> SAMSUNG</B></Div> Và s2=Monitor<B> SAMSUNG</B> (134) Ví dụ:thiết kế form có dạng: (135) <script> function chonsp() { prod=document.form1.masp.value; hinhsp=document.forms[0].hinh.options[document forms[0].hinh.selectedIndex].text; price=document.form1.giasp.value; ma.innerText=prod; hinh.innerText=hinhsp; gia.innerText=price } (136) function ChangeImage(path) { h.innerHTML="<img src= /images/" + path +" width=100 height=100 >" } Gọi hàm ChangeImage(value) <select name="hinh" id="hinh" onchange="ChangeImage(value)"> <option value=" /images/h1.gif">hình 1</option> <option value=" /images/h4.gif">hình 2</option> <option value=" /images/h3.gif">hình 3</option> </select> (137)