›
›

JavaScript cho người mới bắt đầu

pdf 202 trang phuongnguyen 4900
Download
Bạn đang xem 20 trang mẫu của tài liệu "JavaScript cho người mới bắt đầu", để 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:

  • pdfjavascript_cho_nguoi_moi_bat_dau.pdf

Nội dung text: JavaScript cho người mới bắt đầu

  1. JavaScript 1
  2. JavaScript 2 Lời nói đầu: Các bạn đang cầm trong tay cuốn sách “JavaScript cho người mới bắt đầu”,nếu như bạn mới làm quen với ngôn ngữ JavaScript thì cuốn sách quả thực rất có ích cho các bạn bởi lối viết đơn giản,dễ hiểu,cộng thêm vào đó là các ví dụ minh họa sát với thực tế.Đây là ấn bản đầu tiên cho nên khó có thể khẳng định rằng nó không mắc một sai sót nào,mọi ý kiến đóng góp xin các bạn vui lòng gửi về hòm thư hieupn89@gmail.com. Các bạn có thể thông qua hòm thư trên để gửi bài viết,các ví dụ hay về JavaScript cho tác giả,góp phần hoàn thiện cuốn sách hơn nữa trong lần ấn bản sau (các bạn cũng lưu ý rằng cuốn sách này là cuốn sách hoàn toàn phi lợi nhuận – cho nên P.N.H sẽ rất cảm ơn các bạn đóng góp bài viết cho cuốn sách). Sau cùng P.N.H mong chờ và cảm ơn những góp ý của các bạn,chúc các bạn luôn luôn hạnh phúc và luôn luôn lạc quan yêu đời bạn nhé.Hẹn gặp lại các bạn ở ấn bản lần thứ 2 của cuốn sách. P.N.H
  3. JavaScript 3 Mục lục Chương 1: JS BASIC Mở đầu về JavaScrip 5 Đặt code JavaScript ở đâu ? 8 Câu lệnh JavaScript ? 10 Sử dụng Comment trong JS ? 11 Biến trong JavaScript. 12 Các phép toán trong JavaScript 13 Các phép toán so sánh và Logic trong JavaScript 15 Cấu trúc IF ELSE 16 Cấu trúc lựa chọn Switch 19 Các hàm vào ra thông dụng nhất 20 Hàm(function) trong JavaScript 23 Vòng lặp trong JavaScript 25 Vai trò lệnh Break và Continue trong vòng lặp ? 29 Các lệnh thao tác trên đối tượng 30 Tạo đối tượng trong JavaScript 34 Sự kiện(event) trong JavaScript 39 Try – Catch 41 Lệnh throw 44 Các ký tự đặc biệt trong JavaScript 45 Một số chú ý khi sử dụng JavaScript 46 Objects trong JavaScript 48 String Objects 49 getElementById 55 Làm việc với thuộc tính innerHTML 55 Làm việc với ngày giờ (Date) 57 Tạo đồng hồ bấm giờ bằng JavaScrip 64 Tạo chiếc đồng hồ điện tử cho chính bạn 66 Mảng (Array) 67 Boolean Objects 74 Math Objects 76 So mẫu (RegExp) trong JavaScript 79 Bài thực hành 1: 84 Bài thực hành 2: 89 bài thực hành 3 91 Bài thực hành 4 92 Sự phân cấp đối tượng trong JS 94 JavaScript Navigator 94 javaScript window 96 Location Object 104 Frame Object 108 Bài thực hành với Frame: 112 Document Object 116 Document Object Properties 117 Document Object Methods 117 Image Object 121 Bài thực hành với image: 123
  4. JavaScript 4 Bài thực hành tạo dao diện Yahoo Hỏi đáp: 128 Kiểm tra tính hợp lệ của giá trị trong form với JavaScript 131 JavaScript Cookie 143 JavaScript Form Validation 152 Một số kỹ thuật hướng đối tượng làm nền tảng cho các Javascript framework 156 JavaScript Animation 163 JavaScript Image map 164 JavaScript SetTimeOut và CleartimeOut 165 JavaScript và lập trình hướng đối tượng- phần 1 170 JavaScript và lập trình hướng đối tượng- phần 2 177 Tóm tắt những điều đã học 184 Mở đầu về DOM HTML 185 HTML DOM nodes 186 HTML DOM node tree 187 HTML DOM Methods 189 Truy cập vào nút trong DOM 191 Sử dụng DOM để xác định thông tin node 195 Bài thực hành về DOM 196 HTML DOM – event 199 BÀI TẬP: 199 LỜI GIẢI: 200
  5. JavaScript 5 JS BASIC Mở đầu về JavaScrip JavaScript là ngôn ngữ kịch bản của web. Nó ngôn ngữ hướng đối tượng Nó được sử dụng trên hàng triệu trang web Để học nó tốt nhất là bạn phải có kiến thức căn bản về HTML JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C. Giống như C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng. Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng. Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập. Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh, Ở Việt Nam,
  6. JavaScript 6 JavaScript còn được ứng dụng để làm bộ gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dòng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA. Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành Mac OS X phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ kịch bản linh động (active scripting) của Microsoft có hỗ trợ ngôn ngữ JScript làm một ngôn ngữ kịch bản dùng cho hệ điều hành. JScript .NET là một ngôn ngữ tương thích với CLI gần giống JScript nhưng có thêm nhiều tính năng lập trình hướng đối tượng. Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần như giống nhau. Ví dụ về JavaScrip: document.write("This is my first JavaScript!"); ở ví dụ này trên trang web sẽ hiện lên dòng chữ “ this is my first JavaScript !”. web tham khảo : các sách tham khảo :
  7. JavaScript 7
  8. JavaScript 8 Đặt code JavaScript ở đâu ? Cách 1: Đặt trong một trang HTML Ví dụ: document.write("Hello World!"); Thậm chí ở code dưới đây nó còn hiện cả tag HTML document.write(" Hello World! ");
  9. JavaScript 9 Để chèn đoạn code JavaScrip vào trang HTML chúng ta sử dụng tag Bên cạnh đó chúng ta phải định nghĩa ngôn ngữ được dùng trong tag này là gì ? JavaScript ? hay Vbscript ? Bởi vậy đoạn code sau là bắt buộc : Ví dụ: Cách 2: đặt trong thẻ Head của trang HTML ( thực ra cách này cũng là cách 1) Ví dụ như sau: function show_confirm() { } Cách 3: chúng ta có thể đặt ở phần và của trang HTML cũng chả sao function message() {
  10. JavaScript 10 alert("This alert box was called with the onload event"); } document.write("This message is written by JavaScript"); Cách 4: viết code JavaScrip ở một file riêng,rồi kết nối với file HTML Chú ý rằng File này có phần mở rộng là .js ,cách kết nối như sau: Và ở bên ngoài chúng ta đã có một file xxx.js rồi. Câu lệnh JavaScript ? JavaScript là một chuỗi các lệnh được thực thi bởi trình duyệt. Mỗi lệnh JS sẽ báo cho trình duyệt biết phải làm gì ? Ví dụ câu lệnh sau sẽ báo cho trình duyệt biết phải in ra màn hình dóng chữ Hello Dolly document.write ("Hello Dolly"); cuối mỗi câu lệnh phải có dấu ; ( chấm phẩy) để trình duyệt phân biệt với các câu lệnh khác cùng dòng. Các lệnh JS sẽ được thực hiện theo trình tự như chúng đã viết,ví dụ sau sẽ cho chúng ta thấy điều đó document.write(" This is a heading "); document.write(" This is a paragraph. ");
  11. JavaScript 11 document.write(" This is another paragraph. "); Kết quả hiện thị sẽ là This is a heading This is a paragraph. This is another paragraph Sử dụng Comment trong JS ? Thực ra nếu như các bạn đã học lập trình C thì thấy rằng JS có khá nhiều nét giống với C,chẳng hạn như chúng ta có thể viết các câu bình luận theo cách sau: /* The code below will write one heading and two paragraphs */ document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. "); Sử dụng dấu /* */ Hoặc nếu như comment chỉ có 1 dòng thì chúng ta có thể dùng dấu // // Write a heading document.write(" This is a heading "); // Write two paragraphs: document.write(" This is a paragraph. "); document.write(" This is another paragraph. "); công dụng của comment là gì thì các bạn đã rõ,nó chỉ như là lời giải thích cho đoạn code của các bạn mà thôi,chứ nó không phai là câu lệnh để thực thi,chính vì vậy bạn thích viết gì cũng được,chả ảnh hưởng gì hết
  12. JavaScript 12 Biến trong JavaScript. Biến là đối tượng mang thông tin. Bạn có nhớ môn đại số bạn đã học không ? X=5 ,y=6,z=x+y Bạn có nhớ rằng một chữ cái ( ví dụ như là chữ x) có thể được dùng để chưa một giá trị ( ví dụ là 5)? Và bạn có thể sử dụng thông tin trên để tính giá trị của z là 11 ? Những chữ cái như vậy gọi là biến,và biến có thể được dùng để mang giá trị hoặc biểu thức ( x=y+z). Biến trong JS ? Cũng tương như môn đại số mà bạn đã học mà thôi,biến trong JS dùng để chứa giá trị hoặc một biểu thức nào đó. Tên của biến có thể ngắn thôi ( ví dụ x),nhưng nếu có dài thì cũng chả sao ( ví dụ carname) Những điều sau đây các bạn phải lưu ý : _ tên biến có phân biệt chữ hoa chữ thường ( y và Y là khác nhau đó nhé ) _ tên phải bắt đầu bằng một chữ cái hoặc kí tự gạch chân. Kiểu của biến ? cũng giống như C thôi,chúng ta có các kiểu sau: kiểu Boolean có hai giá trị là true và false kiểu Số là loại giá trị dùng đễ tính toán kiểu chuỗi chuỗi là các kí tự bảng chữ cái + kí tự đặc biệt + số, nói chung là bất kì cái gì mà ta viết ra trên bàng phím được, thì là chuỗi! Phân biệt kiểu chuỗi và số ta gán biến a và b với các giá trị như sau: a=1; b="1"; a sẽ mang gái trị số, còn b mang giá trị chuỗi ==> đặt bên trong dấu nháy là chuỗi! Có một điểm khác của JS so với C là như thế này: trong C khi khai báo biến chúng ta phải định kiểu trước cho nó,nhưng trong JS thì không phải như vậy: Nếu như ta khia báo : var x ; // thì x chưa có kiểu gì cả. Phải đến khi ta gán giá trị cụ thể cho biến thì nó mới có kiểu: ví dụ như là : Var x = “ anh yêu em “ // lúc này kiểu của x là string ( chuỗi) Nhưng một lúc sau hứng lên chúng ta lại gán x = 5 // lúc đó x không còn là kiểu string nữa mà bây giờ kiểu của nó là number. Biến toàn cục và biến cục bộ ? Để khai báo biến cục bộ ta dùng cú pháp sau : var name; Để khai báo biến toàn cục ta chỉ cần bỏ chữ var đi là được. Chúng ta có thể gán ngay giá trị cho biến khi khai báo:
  13. JavaScript 13 var x=5; var carname="Volvo"; tất nhiên chúng ta cũng có thể khai báo x=5; carname="Volvo"; chú ý : khác với ngôn ngữ C thì JavaScript không có kiểu hằng số CONST để biểu diễn một giá trị không đổi nào đấy. Các phép toán trong JavaScript Cũng giống như trong ngôn ngữ C,với JS chúng ta có các phép toán như sau Cho rằng y = 5, bảng dưới đây giải thích các nhà khai thác số học: phép Mô tả Ví dụ Kết quả toán + phép cộng x = y 2 x = 7 - Phép trừ x = y-2 x = 3 * Phép nhân x = y * 2 x = 10 / phép chia x = y / 2 x = 2,5 % lấy dư x = y 2% x = 1 + + tăng 1 đơn vị x = + + y x = 6 - giảm 1 dơn vị x = y x = 4 Chúng ta có thêm bảng sau đây: Cho x = 10 và y = 5, ta có tiếp bảng sau đây. phép toán Ví dụ Tương tự như Kết quả = x = y x = 5 + = x + = y x = x + y x = 15 -= x-= y x = x-y x = 5 *= x *= y x = x * y x = 50
  14. JavaScript 14 / = x / = y x = x / y x = 2 % = x% = y x = x% y x = 0 Phép toán + được sử dụng trên strings Phép toán cộng còn được dùng để thêm vào chuỗi các biến hoặc các giá trị văn bản với nhau. Để ghép nhiều chuỗi lại với nhau thành một chuỗi mới chúng ta có thể sử dụng phép toán +. txt1 = "What a very"; txt2 = "nice day"; txt3 = txt1 + txt2; sau khi thực hiện các đoạn lệnh trên,biến txt3 sẽ chứa chuỗi: “What a verynice day”. Để thêm khoảng trống cách giữa hai chuỗi trên ,chúng ta có thể làm như sau: txt1 = "What a very"; txt2 = "nice day"; txt3 = txt1 + "" + txt2; bay giờ thì biến txt3 chứa chuỗi như sau :”What a very nice day”. Thêm số vào chuỗi kết quả sẽ thế nào ? Trả lời: khi bạn thêm số vào chuỗi thì kết quả sẽ là một chuỗi. Ví dụ : x=5+5; document.write(x); document.write(" "); x="5"+"5"; document.write(x); document.write(" "); x=5+"5"; document.write(x); document.write(" "); x="5"+5; document.write(x); document.write(" ");
  15. JavaScript 15 Kết quả của đoạn code này sẽ là 10 55 55 55. Các phép toán so sánh và Logic trong JavaScript Các phép toán so sánh sẽ trả về kết quả là true hoặc false. Ví dụ cho x=5,ta có bảng dưới đây: Phép so sánh Giải thích Ví dụ == Bằng x==8 is false === Bằng và cùng kiểu x===5 is true x==="5" is false != Không bằng x!=8 is true > Lớn hơn x>8 is false = Lớn hơn hoặc bằng x>=8 is false 1) is true || or (x==5 || y==5) is false
  16. JavaScript 16 ! not !(x==y) is true JS cũng chứa một phép toán mà nó sẽ chỉ định kết quả cho một biến dựa trên một số điều kiện cho trước,cú pháp của nó như sau: variablename=(condition)?value1:value2 khi biểu thức condition đúng thì giá trị của variablename sẽ bằng value1,còn không thì nó sẽ bằng value2. Cấu trúc IF ELSE Cấu trúc có điều kiện được sử dụng để thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau. Một ví dụ vui là như thế này: “ nếu em yêu anh thì hai ta cùng cưới,nếu không thì thôi “ If (em yêu anh) { Thì hai ta cùng cưới } Else { Thì thôi } Lệnh có điều kiện Thường khi bạn viết code,bạn muốn hành động khác nhau về các quyết định khác nhau.Bạn có thể sử dụng điều kiện kê trong mã của bạn để làm điều này. Trong JS có các câu lệnh điều kiện sau: Câu lệnh if : sử dụng câu lệnh này để thực hiện một thao tác nào đó khi điều kiện là đúng Câu lệnh if else : sử dụng câu lệnh này để thực hiện một thao tác nào đó khi điều kiện là đúng,và thao tác khác khi điều kiện là sai. Câu lệnh if else if else:sử dụng câu lệnh này để chọn một trong nhiều khối mã được thực thi. Câu lệnh Switch : sử dụng câu lệnh này để chọn một trong những khối lệnh để thực thi. Câu lệnh if
  17. JavaScript 17 Cú pháp: if (điều kiện) ( code được thực thi nếu điều kiện là đúng ) chú ý rằng chữ if else phải viết bằng chữ thường,chữ hoa sẽ bị sai. ví dụ: var t=prompt(" nhap gia tri vao","nhap o day"); if(t>200) { alert(" ban da trung thuong"); } Câu lệnh if else Cú pháp: if (điều kiện) ( code được thực thi nếu điều kiện là đúng ) khác ( code được thực thi nếu điều kiện là không đúng ) ví dụ: var t=prompt(" nhap gia tri vao","nhap o day"); if(t>5)
  18. JavaScript 18 { alert(" gia tri vua nhap lon hon 5"); } else { alert(" gia tri vua nhap khong lon hon 5"); } Câu lệnh if else if else Cú pháp: if (condition1) ( code được thực thi nếu condition1 là đúng ) else if (condition2) ( code được thực thi nếu condition2 là đúng ) else ( code được thực thi nếu condition1 và condition2 là không đúng ) ví dụ: var d = new Date(); var time = d.getHours(); if (time Good morning "); } else if (time>=10 && time Good day "); } else {
  19. JavaScript 19 document.write(" Hello World! "); } This example demonstrates the if else if else statement. Cấu trúc lựa chọn Switch Cấu trúc này được sử dụng để thực hiện những hành động khác nhau dựa trên những điều kiện khác nhau. Sử dụng cấu trúc switch để lựa chọn 1 trong số những mã lệnh để thực thi Cú pháp: switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 } cấu trúc trên hoạt động như thế nào ? đầu tiên chúng ta có một biểu thức duy nhất n ( thường là một biến).Sau đó giá trị của biến được so sánh với giá trị cho mỗi một trường hợp ( các case) trong cấu trúc.nếu có một có một trường hợp nào đó của case bằng với biến n thì khối lệnh tương ứng với case đó sẽ được thực thi.câu lệnh break ngăn không cho chạy tiếp các khối lệnh của các case còn lại. Khi n không tương ứng với bất kì một case nào thì khối lệnh của default sẽ được thực thi. Ví dụ : thử cho biết kết quả khi chạy đoạn mã sau var d = new Date();
  20. JavaScript 20 theDay=d.getDay(); switch (theDay) { case 5: document.write(" Finally Friday "); break; case 6: document.write(" Super Saturday "); break; case 0: document.write(" Sleepy Sunday "); break; default: document.write(" I'm really looking forward to this weekend! "); } This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc. Các hàm vào ra thông dụng nhất Trước khi đi vào những vấn đề cụ thể hơn chúng ta nghiên cứu những phương thức vào ra cơ bản cái đã. Hàm alert(); alert(): Mở một hộp thông báo với nội dung đặt bên trong dấu ngoặc kép VD: alert(“Ví dụ đây”); Kết quả: Hàm prompt();
  21. JavaScript 21 prompt(): Mở một hộp thoại cho phép người sử dụng thông tin vào VD: var t = prompt(“Ví dụ về prompt nè”,”Điền cái gì đó vào đây nè”); Kết quả: Hàm document.write(); document.write(): in ra màn hình với nội dung đặt bên trong dấu ngoặc kép. Hàm document.writeln(); Hàm này thì cũng có chức năng giống hàm kia,nhưng chỉ có điều là nó sẽ tự xuống dòng .Ta có ví dụ sau: Kết quả hiện thị là như sau:
  22. JavaScript 22 Hàm confirm(); Hàm này sẽ hiện ra một hộp thoại với một lời nhắn và hai nút OK và Cancel Hàm này trả về giá trị là true hoặc false. Nó sẽ trả về true nếu nhấn nút OK,và trả về false nếu nhấn nút Cancel. Ví dụ : function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); } }
  23. JavaScript 23 Hãy chạy đoạn code trên để trải nghiệm hàm confirm(); Hàm(function) trong JavaScript Một hàm sẽ được gọi từ một sự kiện (event) hoặc bằng một lời gọi đến nó. Hàm JavaScript Để giữ một khi trình duyệt tải trang bạn có đặt nó vào một hàm. Hàm sẽ được kích hoạt bởi từ một sự kiện(event) hoặc từ một lời gọi đến hàm. Bạn có thể gọi hàm ở bất cứ đâu trong trang ( hoặc từ một trang khác nếu hàm đó được nhúng trong một file có phần mở rộng .js đặt ở bên ngoài). Hàm có thể được định nghĩa trong thẻ hoặc trong thẻ của trang.Tuy nhiên đặt trong thẻ có vẻ khả thi hơn là bởi vì khi đó trình duyệt sẽ đọc và load hàm trước khi hàm được gọi. Làm thế nào để xây dựng một hàm ? Cú pháp: function functionname(var1,var2, ,varX) { some code } var1,var2, varX là các đối số của hàm.Các kí tự { và } đánh dấu bắt đầu và kết thúc một hàm. Chú ý rằng một hàm mà không có đối số thì vẫn phải có dấu () phí sau tên hàm. Chú ý : hàm phải được viết bằng chữ thường,khi gọi hàm thì phải gọi đúng tên của nó Ví dụ về hàm: Chạy thử đoạn code sau: function displaymessage() { alert("Hello World!"); }
  24. JavaScript 24 By pressing the button above, a function will be called. The function will alert a message. Trong đoạn code trên nếu dòng alert("Hello World!"); không được đặt trong hàm thì dòng chữ sẽ hiện lên ngay lập tức ngay sau khi trình duyệt load đến.Thế nhưng khi nó đặt vào trong hàm thì phải chờ đến khi người dùng nhấn vào button ,hàm được kích hoạt thì dòng chữ mới bắt đầu hiện lên. Lệnh return của hàm ? Lệnh return của hàm dùng để xác định giá trị trả về từ hàm. Vì vậy hàm mà bạn muốn trả về một giá trị nào đó thì phải có lệnh return. Ví dụ dưới đây trả về kết quả của hai số (a,b): function product(a,b) { return a*b; } document.write(product(4,3)); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters. Nhắc lại khái niệm về biến toàn cục và biến cục bộ,một biến nằm trong hàm thì nó chỉ được sử dụng trong hàm đó mà thôi,còn một biến được khai báo ngoài tất cả các hàm ( biến toàn cục) thì dùng ở đâu cũng được. câu hỏi đề nghị: bạn còn nhớ môn lập trình C chứ ? trong C hàm truyền theo tham trị . Vậy trong JS thì truyền theo gì ? tham trị hay tham biến ? để kiểm chứng điều này chúng ta thử bằng đoạn code sau:
  25. JavaScript 25 b=10; d=10; function ham(a) { a= 9; } function ham2(a,b) { if(a==b) alert(" ham truyen theo tham tri"); else alert(" ham truyen theo tham bien "); } ham(b); ham2(b,d); Nhìn vào đoạn code trên chúng ta có thể thấy rằng ham() có chức năng gán giá trị 9 cho đối số.Như vậy thì sau khi ham(b) thực hiện xong giá trị của b phải bằng 9 ? và như vậy thì sau đó giá trị của b và d sẽ không bằng nhau ? Nhưng sự thật thì không phải như vậy.b và d vẫn bằng nhau và bằng 10.JavaScript cũng giống như C truyền theo tham trị. Câu hỏi đề nghị: Vậy làm cách nào để xây dựng được hàm thay đổi giá trị như trên ? cái khó của chúng ta là vấp phải nguyên tắc truyền theo tham trị của JS.Liệu có làm được không ?! Thứ nữa các bạn hãy xây dựng một hàm có chức năng hoán đổi hai giá trị của hai biến cho nhau ? Vòng lặp trong JavaScript Vòng lặp thực thi một khối lệnh theo một số lần nhất định nào đó,hoặc thực thi khi điều kiện nào đó vẫn còn đúng.
  26. JavaScript 26 Vòng lặp JavaScript ? Thông thường khi bạn viết code,đôi khi bạn muốn một khối lệnh nào đó chạy đi chạy lại nhiều lần.Thay vì viết thành nhiều lần ( rất tốn thời gian và công sức) bạn có thể sử dụng vòng lặp để thực hiện một công việc như thế. Trong JS có 2 loại vòng lặp khác nhau: For – một khối lệnh trong vòng lặp sẽ được thực thi theo số lần nhất định nào đó. While- một khối lệnh trong vòng lặp sẽ được thi khi một điều kiện nào đó vẫn còn đúng. Vòng lặp for ? Vòng lặp này được dùng khi bạn biết trước được số lần có thể chạy của vòng lặp. Cú pháp: for (var=startvalue;var for (i = 0; i "); } Và dưới đây là kết quả : The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5
  27. JavaScript 27 Vòng lặp for in ? Vòng lặp này dựa trên các yếu tố của mảng(array) hoặc các thuộc tính của đối tượng. Cú pháp : for (variable in object) { code to be executed } chú ý rằng khối lệnh nằm trong vòng lặp này được thực thi một lần cho mỗi phần tử của đối tượng. đối số của vòng lặp có thể là tên một biến,một phần tử của mảng,hoặc thuộc tính của đối tượng. ví dụ: sử dụng vòng lặp for in để tương tác với mảng(array) var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + " "); } Kết quả như sau: Saab Volvo BMW Vòng lặp while ? Khi bạn không thể biết trước được chính xác số lần có thể lặp của vòng lặp thì nên sử dụng vòng lặp này. Vòng lặp sẽ thực thi khối lệnh chừng nào điều kiện còn đúng. Cú pháp: while (var<=endvalue) {
  28. JavaScript 28 code to be executed } ví dụ: ví dụ này xác định một vòng lặp bắt đầu với i=0,vòng lặp sẽ tiếp tục thực thi khối lệnh nằm trong nó chừng nào điều kiện (i i=0; while (i "); i++; } Vòng lặp do while ? Thực ra thì vòng lặp này cũng giống như vòng lặp while mà thôi,chỉ có điều là nó sẽ thực khối lệnh trong vòng lặp tối thiểu là một lần.( trong khi ở vòng lặp while có khi khối lệnh sẽ không được thực hiện một lần nào). Cú pháp: do { code to be executed } while (var i = 0; do { document.write("The number is " + i); document.write(" "); i++; } while (i
  29. JavaScript 29 Kết quả sẽ như sau: The number is 0 The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Vai trò lệnh Break và Continue trong vòng lặp ? Hai lệnh break và continue trong vòng lặp là vô cùng quan trọng bởi vậy bạn không thể bỏ qua nó được. Lệnh break ? Lệnh này sẽ thực hiện việc thoát vòng lặp và thực hiện tiếp những câu lệnh còn lại của tài liệu. Ví dụ: var i=0; for (i=0;i "); } Explanation: The loop will break when i=3. Kết quả thu được sẽ như thế này: The number is 0 The number is 1 The number is 2 Explanation: The loop will break when i=3. Lệnh continue ?
  30. JavaScript 30 Lệnh này sẽ thực hiện việc thoát vòng lặp và bắt đầu một vòng lặp mới. Ví dụ: var i=0; for (i=0;i "); } Explanation: The loop will break the current loop and continue with the next value when i=3. Kết quả sẽ là : The number is 0 The number is 1 The number is 2 The number is 4 The number is 5 The number is 6 The number is 7 The number is 8 The number is 9 The number is 10 Explanation: The loop will break the current loop and continue with the next value when i=3. Các lệnh thao tác trên đối tượng JS là một ngôn ngữ hướng đối tượng,vì vậy cho nên nó có một số câu lệnh thao tác với đối tượng. new Biến new được thực hiện để tạo ra một thể hiện mới của một đối tượng
  31. JavaScript 31 Cú pháp objectvar = new object_type ( param1 [,param2] [,paramN]) Ví dụ sau tạo đối tượng person có các thuộc tính firstname, lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng person được tạo ra bằng lệnh new New Example function person(first_name, last_name, age, sex){ this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoàn", "Đỗ Văn", "24", "Male"); document.write ("1. "+person1.last_name+" " + person1.first_name + " " ); document.write("2. "+person2.last_name +" "+ person2.first_name + " "); document.write("3. "+ person3.last_name +" "+ person3.first_name + " "); document.write("4. "+ person4.last_name +" "+ person4.first_name+" "); Kết quả hiện thị như sau:
  32. JavaScript 32 Qua đây chúng ta có thể tìm ra được cú pháp tạo đối tượng như thế nào. this Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng được gọi thường là đối tượng hiện thời trong phương thức hoặc trong hàm. Cú pháp this [.property] Có thể xem ví dụ của lệnh new. with Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không đề cập đến đối tượng. Cú pháp with (object) { // statement } Ví dụ: Ví dụ sau chỉ ra cách sử dụng lệnh with để thiết lập đối tượng ngầm định là document và có thể sử dụng phương thức write mà không cần đề cập đến đối tượng document With Example
  33. JavaScript 33 with (document){ write(“This is an exemple of the things that can be done ”); write(“With the with statment. ”); write(“This can really save some typing”); } Kết quả hiện thị như sau: Hãy xem xét ví dụ sau : function person(first_name, last_name, age, sex) // tạo đối tượng person { this.first_name=first_name; this.last_name=last_name; this.age=age; this.sex=sex; this.printStats=printStats; } function printStats() // tạo phương thức printStats cho đối tượng person { with (document) {
  34. JavaScript 34 write (" Name :" + this.last_name + " " + this.first_name + " " ); write("Age :"+this.age+" "); write("Sex :"+this.sex+" "); } } person1= new person("Thuy", "Dau Bich", "23", "Female"); person2= new person("Chung", "Nguyen Bao", "24", "Male"); person3= new person("Binh", "Nguyen Nhat", "24", "Male"); person4= new person("Hoan", "Do Van", "23", "Male"); person1.printStats(); // sử dụng phương thức trên đối tượng person2.printStats(); person3.printStats(); person4.printStats(); Kết quả hiện thị như sau : Bình luận : bây giờ hì chúng ta đã biết cách tạo đối tượng và tạo thuộc tính cho đối tượng rồi nhé. Tạo đối tượng trong JavaScript 1 . Định nghĩa thuộc tính đối tượng function student(name,age,grade) {
  35. JavaScript 35 this.name = name; this.age = age; this.grade = grade; } Để tạo một Object ta sử dụng một phát biểu new . Ví dụ để tạo đối tượng student1 student1 = new student("Bod",10,75); 3 thuộc tính của đối tượng student1 là : student1.name student1.age student1.grade Ví dụ để tạo đối tượng student2 student2 = new student("Jane",9,82); Để thêm thuộc tính cho student1 bạn có thể làm như sau student1.mother = "Susan"; hoặc bạn có thể định nghĩa lại hàm student function student(name,age,grade,mother) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; } Đối tượng là thuộc tính của đối tượng khác Ví dụ : function grade ( math , english , science ) { this.math = math; this.english = english; this.science = science; } bobGrade = new grade(75,80,77);
  36. JavaScript 36 janeGrade = new grade(82,88,75); student1 = new student("Bob",10,"bodGrade"); student2 = new student("Jane",9,"janeGrade"); student1.grade.math : dùng để lấy điểm toán của student1 student2.grade.science : dùng lấy điểm môn khoa học của student2 2 . Thêm phương pháp cho đối tượng function displayProfile() { document.write("Name : " + this.name + " "); document.write("Math Grade : " + this.grade.math + " "); document.write("English Grade : " + this.grade.english + " "); document.write("Science Grade : " + this.grade.science + " "); } function student(name,age,grade) { this.name = name; this.age = age; this.grade = grade; this.mother = mother; this.displayProfile = displayProfile; } student1.displayProfile(); Ví dụ : <!– Begin var day=""; var month=""; var ampm=""; var ampmhour="";
  37. JavaScript 37 var myweekday=""; var year=""; mydate = new Date(); myday = mydate.getDay(); mymonth = mydate.getMonth(); myweekday = mydate.getDate(); weekday = myweekday ; myyear= mydate.getYear(); year = myyear; myhours = mydate.getHours(); ampmhour = (myhours > 12 ) ? myhours-12 : myhours; ampm = (myhours > 12 ) ? ‘Buổi chiều’ : ‘Buổi sáng’; mytime = mydate.getMinutes(); myminutes = ((mytime < 10 ) ? ‘:0′ : ‘:’ ) + mytime; if(myday == 0) day = " Chủ nhật , "; else if(myday == 1 ) day = "Thứ hai, "; else if(myday == 2 ) day = "Thứ ba, "; else if(myday == 3 ) day = "Thứ tư, "; else if(myday == 4) day = "Thứ năm, "; else if(myday == 5 ) day = "Thứ sáu, "; else if(myday == 6 ) day = "Thứ bảy, "; if(mymonth == 0 ) { month = "tháng một ";}
  38. JavaScript 38 else if(mymonth ==1 ) month = "tháng hai "; else if(mymonth ==2 ) month = "tháng ba "; else if(mymonth ==3 ) month = "tháng tư "; else if(mymonth ==4 ) month = "tháng năm "; else if(mymonth ==5) month = "tháng sáu "; else if(mymonth ==6 ) month = "tháng bảy "; else if(mymonth ==7 ) month = "tháng tám "; else if(mymonth ==8 ) month = "tháng chín "; else if(mymonth ==9 ) month = "tháng mười "; else if(mymonth ==10 ) month = "tháng mười một "; else if(mymonth ==11 ) month = "tháng mười hai "; // End –> Trong phần body bạn có thể xuất ra dạng như sau : document.write(" " + ampmhour + "" + myminutes + ampm ) document.write(" - " + day + " ngày " + myweekday + " "); document.write( month + " ,năm " + year + " ");
  39. JavaScript 39 Lỗi chưa khởi tạo đối tượng trong javascript Ví dụ: 1. // object constructor 2. function ObjectConstructor(a, b, c) { 3. this.A = a; 4. this.B = b; 5. this.C = c; 6. this.Total = a + b + c; 7. } 8. var obj = ObjectConstructor(1, 2, 3); 9. alert(obj.Total); kết quả trả về không phải bằng 6 mà là chẳng có gì cả. Bởi đối tượng obj chưa được khởi tạo. có 2 cách sửa lỗi này: cách 1: var obj = new ObjectConstructor(1, 2, 3); cách 2:quả trả về không phải bằng 6 mà là chẳng có gì cả. Bởi đối tượng obj chưa được khởi tạoh 2: 1. // object constructor 2. function ObjectConstructor(a, b, c) { 3. if (!(this instanceof arguments.callee)) { 4. return new ObjectConstructor(a, b, c); 5. } 6. this.A = a; 7. this.B = b; 8. this.C = c; 9. this.Total = a + b + c; 10. } 11. alert(obj.Total); Sự kiện(event) trong JavaScript Sự kiện là những hành động mà có thể nhận diện bằng JavaScript. Event ? Bằng cách sử dụng JS chúng ta có thể tạo ra các trang web động.Và event là các hành động mà ta có thể nhận diện bằng JavaScript.
  40. JavaScript 40 Chẳng hạn chúng ta dùng sự kiện onClick của một button để cho biết rằng một chức năng sẽ chạy khi người dùng nhấp vào button đó.Chúng ta xác định các event trong các thẻ HTML. Ví dụ về các sự kiện: Một click chuột Một trang web hoặc một hình ảnh đang tải Di chuyển trên một điểm đặc biệt của trang web Lựa chọn một trường đầu vào trong thẻ của HTML Submit một form Một tổ hợp phím Chú ý rằng : sự kiện thường đi kèm với hàm,hàm sẽ không được kích hoạt khi sự kiện (event) chưa xảy ra. onLoad và onUnload ? Hai sự kiện này sẽ được kích hoạt khi người dùng nhập vào hoặc rời khỏi trang. Các sự kiện onload thường được sử dụng để kiểm tra loại trình duyệt của người truy cập và phiên bản trình duyệt, và tải phiên bản thích hợp của trang web dựa trên thông tin. Cả hai sự kiện onload và onUnload cũng thường được sử dụng để tương tác với các tập tin cookie mà nên được thiết lập khi người dùng nhập vào một trang. Ví dụ, bạn có thể có một popup yêu cầu điền tên người dùng khi lần đầu tiên đến trang của bạn. Tên này sau đó được lưu giữ trong một cookie. Tiếp theo thời gian khách truy cập đến tại trang web của bạn, bạn có thể có một popup nói cái gì đó như: "Chào mừng John Doe!". onFocus, và onChange onBlur ? Các onFocus, onBlur và onChange thường được sử dụng kết hợp với các trường mẫu. Bên dưới là một ví dụ về cách sử dụng các sự kiện onChange. Hàm checkEmail () sẽ được gọi bất cứ khi nào người dùng thay đổi nội dung của trường: onSubmit ? đây là event hay được đặt trong các .Trong các form thường có nút Submit để thực hiện việc chấp nhận dữ liệu đầu vào để gửi lên sever.Thế nhưng đôi khi chúng ta phải kiểm tra các dữ liệu đó trước khi nó được gửi lên sever,sự kiện onSubmit sẽ cho phép ta làm điều đó. Dưới đây là một ví dụ về cách sử dụng các sự kiện onSubmit. Hàm checkForm () sẽ được gọi khi người dùng nhấn nút gửi biểu mẫu (nhấn Submit). Hàm checkForm trả về hoặc là đúng hoặc sai. Nếu nó trả về đúng thì sẽ được gửi, nếu không sẽ bị hủy bỏ:
  41. JavaScript 41 action="xxx.htm" method="post" onMouseOver và onMouseout ? onMouseOver và onmouseout là hai event liên quan đến chuột. Dưới đây là một ví dụ về một sự kiện onMouseOver. Một hộp cảnh báo xuất hiện khi một sự kiện onMouseOver được kích hoạt: href=" " Ta có tham khảo như sau: Sự kiện Ý nghĩa onMouseUp nútchuột được nhả onMouseDown ấnchuột onMouseOver chuộtdi chuyển qua vùng onMouseOut chuộtdi chuyển khỏi vùng onMouseMove chuộtđược di chuyển onclick clickchuột ondbclick click đúpchuột Try – Catch Đây là câu lệnh để kiểm lỗi của khối lệnh. JavaScript bắt lỗi ? Khi duyệt trang web trên internet chúng ta đôi khi bắt gặp một hộp thoại nói rằng có một lỗi runtime khi đang duyệt trang và có hỏi rằng "Do you wish to debug?".Những hộp thoại cảnh báo như thế này rất có ích cho nhà phát triển web,nhưng nó lại làm cho người sử dụng thoát khỏi trang web của bạn ngay lập tức,website của bạn có thể bị mất khách vì lí do này. Bài học này sẽ giúp các bạn nắm bắt và xử lý các thông báo lỗi của JavaScript,nó sẽ có tác dụng to lớn trong việc tránh mất khách truy cập bởi những lỗi chẳng đâu vào đâu. Try – Catch ?
  42. JavaScript 42 Try – Catch giúp chúng ta kiểm tra lỗi của khối lệnh,trong nó chứa phần khối lệnh chạy và phần khối lệnh thực thi trong trường hợp có lỗi xảy ra. Cú pháp: try { //Run some code here } catch(err) { //Handle errors here } chú ý rằng : try – catch phải được viết bằng chữ thường,viết bằng chữ hoa sẽ gặp lỗi cú pháp. Ví dụ sau đây sẽ thực hiện công việc hiện thị thông báo “chào mừng quý khách” khi button được click.Nhưng có điều là trong khối lệnh này có cú pháp alert(“ chào mừng quý khách”); bị đánh sai thành là adddlert(“ chào mừng quý khách”).Một lỗi JS đã xảy ra,và try catch sẽ bắt lỗi nó và thực thi ma tùy chỉnh để xử lý.Mã này sẽ hiện thị một thông báo lỗi cho người sử dụng biết chuyện gì đang xảy ra. var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Error description: " + err.description + "\n\n"; txt+="Click OK to continue.\n\n"; alert(txt); } }
  43. JavaScript 43 Kết quả sau khi bạn nhấn vào button sẽ là thông báo như sau: Trong ví dụ tiếp sau đây chúng ta sẽ sử dung hộp thoại confirm hiện thị một lời nhắn để cho người dùng tùy chọn như sau: Họ có thể click vào nút OK để tiếp tục hiện thị trang web hoặc click Cancer để tới trang chủ ( không đả động vào trang web lỗi ấy nữa).Nếu confirm trả về giá trị false ,người dùng nhấn Cancer,và mã chuyển hướng người dùng.Nếu confirm trả về giá trị true thì trang web hiện lên không có gì. var txt=""; function message() { try { adddlert("Welcome guest!"); } catch(err) { txt="There was an error on this page.\n\n"; txt+="Click OK to continue viewing this page,\n"; txt+="or Cancel to return to the home page.\n\n"; if(!confirm(txt)) { document.location.href=" "; } } }
  44. JavaScript 44 Lệnh throw Chúng ta có thể hình dung lệnh này có tác dụng như là “ bắt lỗi”. Lệnh này cho phép bạn tạo một ngoại lệ.nếu bạn sử dụng lệnh này với lệnh try catch bạn có thể kiểm soát được chương trình và đưa ra những thông báo lỗi chính xác. Cú pháp: throw(exception) exception có thể là một chuỗi,một giá trị boolean,số nguyên hoặc một đối tượng. chú ý rằng : throw phải được viết bằng chữ thường,viết chữ hoa là sai về cú pháp. Ví dụ: Ví dụ dưới đây xác định giá trị một biến x,nếu giá trị của x lớn hơn 10 ,bé hơn 0 hoặc không phải là số chúng ta sẽ throw một lỗi.Lỗi này sau đó bị bắt bởi các đối số bắt và đúng thông báo lỗi được hiện thị. var x=prompt("Enter a number between 0 and 10:",""); try { if(x>10) { throw "Err1"; } else if(x<0) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } catch(er) {
  45. JavaScript 45 if(er=="Err1") { alert("Error! The value is too high"); } if(er=="Err2") { alert("Error! The value is too low"); } if(er=="Err3") { alert("Error! The value is not a number"); } } Trong phần try lệnh throw sẽ tiến hành việc bắt lỗi,khi lỗi xảy ra nó sẽ chuyển qua phần catch để xem tương ứng với lỗ này thì hiện thông báo gì. Các ký tự đặc biệt trong JavaScript Trong JS các bạn có thể thêm các ký tự đặc biệt vào văn bản bằng cách sử dụng dấu gạch chéo ngược \ Chèn ký tự đặc biệt ? Dấu gạch chéo ngược \ được dùng để chèn dấu nháy, new lines,quote và những ký tự đặc biệt khác vào chuỗi. Hãy nhìn vào đoạn code dưới đây var txt="We are the so-called "Vikings" from the north."; document.write(txt); trong JS mỗi chuỗi đều bắt đầu và kết thúc bởi dấu nháy đơn hoặc dấu nháy kép,điều đó có nghĩa là chuỗi trên sẽ được chia nhỏ thành : We are the so-called để giải quyết vấn đề này các bạn phải thêm một dấu \ vào phía trước mỗi dấu nháy ở từ “Vikings”,ta sửa lại đoạn code như sau: var txt="We are the so-called \"Vikings\" from the north."; document.write(txt); bây giờ thì kết quả hiện lên mà hình sẽ là: We are the so-called "Vikings" from the north. Dưới đây là một ví dụ khác:
  46. JavaScript 46 document.write ("You \& I are singing!"); ví dụ trên sẽ cho ra kết quả như sau: You & I are singing! Bảng cho dưới đây bao gồm những kí tự đặc biệt khác,bạn có thể dùng để thêm vào chuỗi của mình. Code Outputs \' single quote \" double quote \& ampersand \\ backslash \n new line \r carriage return \t tab \b backspace \f form feed Một số chú ý khi sử dụng JavaScript Hãy cẩn thận khi làm việc với JS ? Khi bạn gọi tên hàm,goi tên biến trong JS thì hãy nhớ rằng chữ thường và chữ hoa sẽ khác nhau,nghĩa là một hàm có tên là “ myfunction” sẽ không giống như “myFunction” ,và một biến có tên là “myvar” sẽ không giống như “myVar”. Khoảng trắng trong JS ? JS bỏ qua khoảng trắng khi nó nhìn thấy,vì vậy bạn có thể thêm vào khoảng trắng để cho mã nguồn của các bạn trở nên dễ đọc hơn.Tất nhiên là cũng không nên lam dụng khoảng trắng quá nhiều sẽ làm cho dung lượng mã nguồn tăng lên,gây cản trở khi load trang.Các dòng sau là tương đương: name="Hege"; name = "Hege"; break up một dòng mã ? Bạn có thể dùng dấu gạch chéo ngược để làm điều đó,ví dụ dưới đây sẽ được hiện thị đúng: document.write("Hello \ World!"); nhưng như dưới đây thì lại không đúng:
  47. JavaScript 47 document.write \ ("Hello World!"); JS Objects
  48. JavaScript 48 Objects trong JavaScript Đối tượng trong JS là một khái niệm quan trọng. JS là ngôn ngữ hướng đối tượng. Ngôn ngữ hướng đối tượng cho phép bạn định nghĩa đối tượng cho riêng bạn. Lập trình hướng đối tượng ? JS là ngôn ngữ lập trình hướng đối tượng,bạn có thể định nghĩa đối tượng cho riêng bạn. Nhưng bây giờ chưa phải là lúc để nói cách tạo đối tượng như thế nào,nó sẽ được đề cập ở các bài tiếp theo.Chúng ta sẽ bắt đầu bằng cách nhìn xem đối tượng được xây dựng thế nào? Và cách sử dụng ra sao ? Lưu ý rằng đối tượng chỉ là một dạng đặc biệt của dữ liệu.Một đối tượng bao gồm thuộc tính (properties) và phương thức (method).Đây là hai vấn đề rất quan trọng của đối tượng. Thuộc tính Thuộc tính (properties) là giá trị liên kết với một thuộc tính. Trong ví dụ dưới đây chúng ta sử dụng thuộc tính về độ dài (length) của đối tượng string để trả lại số kí tự của một chuỗi. var txt = "Hello World!"; document.write (txt.length); Kết quả của đoạn code trên là 12 Phương thức Phương thức (method) là những hành động có thể thực hiện trên đối tượng. Trong ví dụ dưới đây chúng ta sử dụng phương thức toUpperCase ( ) của đối tượng String để hiện thị văn bản dưới dạng chữ hoa.
  49. JavaScript 49 var str = "Xin chào thế giới!"; document.write (str.toUpperCase ()); Kết quả là : HELLO WORLD! Cú pháp tạo đối tượng mới như sau: var x = new Objects; String Objects String là đối tượng dùng để thao tác với các văn bản. Ví dụ về string: “ anh yêu em nhiều lắm “ -> đó là một string “ nhưng em không yêu anh “ -> đó cũng là một string Để xác định một biến là kiểu string thì chúng chỉ cần khai báo : var x = “ đoạn văn bản”; ví dụ : var x = “ tôi yêu việt nam”; Vấn đề bây giờ là chúng ta phải xét đến các thuộc tính và các phương thức tác động lên đối tượng String như thế nào ? Các bạn có thể tham khảo bảng các thuộc tính và phương thức của string như sau: String Object Properties Property Description constructor Trả về tên chức năng đã tạo ra mẫu string length Trả về độ dài của chuỗi prototype Cho phép bạn thêm các thuộc tính hoặc phương thức vào đối tượng. String Object Methods Method Description charAt() Trả về kí tự của chuỗi ở ví trí xác định charCodeAt() Trả về Unicode của kí tự ở vị trí xác định. concat() Nối các chuỗi lại với nhau để tạo thành 1 chuỗi mới
  50. JavaScript 50 fromCharCode() Chuyển từ mã Unicode thành kí tự indexOf() Trả về vị trí xuất hiện đầu tiên của ký tự lastIndexOf() Trả về vị trí xuất hiện cuối cùng của kí tự trong chuỗi match() Tìm kiếm xâu trong một chuỗi và trả về các xâu đó. replace() Thay thế một xâu kí tự trong chuỗi bằng một xâu mới. search() Tìm kiếm một xâu kí tự nào đó và trả về vị trí đầu tiên tìm được slice() Tách một phần của chuỗi và trả về chuỗi mới split() Tách một chuỗi thành một mảng các chuỗi con substr() Tách các kí tự từ một chuỗi,bắt đầu ở một vị trí xác định và số ký tự phải tách ra. substring() Tách các kí tự từ một chuỗi ,giữa hai chỉ số quy định toLowerCase() Trả về một chuỗi toàn chữ thường toUpperCase() Trả về một chuỗi toàn chữ Hoa valueOf() Trả về giá trị ban đầu của một chuỗi HTML Wrapper Methods The HTML wrapper methods trả lại chuỗi bên trong các tag HTML thích hợp. Method Description anchor() Tạo một anchor big() Hiện thị chuỗi ở font lớn nhất blink() Hiện thị một chuỗi nhấp nháy bold() Hiện thị chuỗi in đậm fixed() Hiện thị một chuỗi sử dụng fixed-pitch font fontcolor() Hiện thị chuỗi với màu sắc quy định fontsize() Hiện thị chuỗi với một kích cỡ xác định italics() Hiện thị chuỗi in nghiêng
  51. JavaScript 51 link() Hiện thị chuỗi dưới dạng Hypelink small() Hiện thị chuỗi với font chữ nhỏ strike() Hiện thị một chuỗi có gạch ở giữa sub() Ghi chỉ số dưới sup() Ghi chỉ số trên Dưới đâu chúng ta chỉ tìm hiểu một số thuộc tính và method quan trọng thôi,còn lại các bạn có thể tra tại Prototype ? Cho phép bạn có thể thêm thuộc tính hoặc phương thức vào dối tượng Cú pháp : object.prototype.name=value prototype hỗ trợ trên tất cả các trình duyệt. ví dụ : sử dụng prototype để thêm một thuộc tính cho đối tượng. function employee(name,jobtitle,born) { this.name=name; this.jobtitle=jobtitle; this.born=born; } var fred=new employee("Fred Flintstone","Caveman",1970); employee.prototype.salary=null; fred.salary=20000; document.write(fred.salary); Kết quả hiện thị lên mà hình là 20000 Concat() ? Phương thức này sẽ cho phép bạn nối các chuỗi lại với nhau để tạo một chuỗi mới. Cú pháp:
  52. JavaScript 52 string.concat(string2, string3, , stringX) concat() hỗ trợ ở tất cả các trình duyệt. var txt1 = "Hello "; var txt2 = "world!"; document.write(txt1.concat(txt2)); Kết quả hiện thị là : Hello world! Ví dụ dưới đâu sẽ nối 3 chuỗi với nhau: var str1="Hello "; var str2="world!"; var str3=" Have a nice day!"; document.write(str1.concat(str2,str3)); Kết quả hiện thị là : Hello world! Have a nice day! Match() ? Phương thức này cho phép bạn tìm xâu trong một chuỗi,kết quả nó sẽ trả về một mảng các xâu tìm được,hoặc nếu như không tìm được thì nó trả về null. Match() hỗ trợ trong tất cả các trình duyệt. Ví dụ var str="The rain in SPAIN stays mainly in the plain"; var patt1=/ain/gi; document.write(str.match(patt1));
  53. JavaScript 53 Kết quả hiện thị như sau : ain,AIN,ain,ain replace() ? phương thức này có tác dụng thay thế một xâu nào đó trong chuỗi bằng một xâu khác. Giá trị trả về của nó là một xâu mới. Tham số truyền vào là 2 xâu: xâu đầu tiên là xâu của chuỗi,xâu thứ hai là xâu thay thế vào. Hỗ trợ trên tất cả các trình duyệt. Ví dụ: var str="Visit Microsoft!"; document.write(str.replace("Microsoft","W3Schools")); Kết quả hiện thị là : Visit W3Schools! Ví dụ dưới đây sẽ thực hiện việc tìm kiếm nhưng không phân biệt chữ hoa hay thường ( chúng ta dùng kí tự / để làm điều này ) var str="Visit Microsoft!"; document.write(str.replace(/microsoft/i,"W3Schools")); Kết quả hiện thị là Visit W3Schools! Split( ) ? Phương thức này sẽ tách chuỗi thành mảng các chuỗi con. Hỗ trợ trong tất cả các trình duyệt. Ví dụ :
  54. JavaScript 54 var str="How are you doing today?"; document.write(str.split() + " "); document.write(str.split(" ") + " "); document.write(str.split("") + " "); document.write(str.split(" ",3)); Kết quả hiện thị : How are you doing today? How,are,you,doing,today? H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,? How,are,you Substring() ? Phương thức này sẽ có tác dụng tách một xâu nào đó trong chuỗi. Giá trị trả về của nó là một chuỗi. Cú pháp của nó như sau : string.substring(from, to) nó có 2 tham số truyền vào trong đó thì: from : tham số này bắt buộc phải có,nó xác định xem điểm bắt đầu cho việc lấy kí tự là ở chỗ nào to : tham số này thì không bắt buộc,nó xác định vị trí kết thúc của quá trình lấy kí tự của xâu. Hỗ trợ trong tất cả các trình duyệt. var str="Hello world!"; document.write(str.substring(3)+" "); document.write(str.substring(3,7)); Kết quả hiện thị như sau : lo world! lo w
  55. JavaScript 55 getElementById getElementById đơn giản là một cách thay thế cách tham chiếu tới đối tượng một cách bình thường: VD: Để tham chiếu tới giá trị của trường text có tên name, bên trong form the_form: Code: ta dùng code: Code: document.the_form.name.value Nhưng nếu ta thêm thuộc tính id vào text name: Code: ta có thể tham chiếu tới giá trị nó như sau: Code: document.getElementById("name").value Với getElementById ta có thể dễ dàng tham chiếu tới mọi đối tượng, các thẻ div, các tag chỉ cần thêm thuộc tính id vào để xác định các thẻ ta muốn làm vệc. Lời bình: Chúng ta cũng chú ý rằng trong JavaScrip tên “ name “ có thể trùng nhau,nhưng “id” thì phải khác nhau cho mọi đối tượng,chính vì vậy dùng “id” cũng là một cách truy cập dữ liệu rất hiệu quả. Làm việc với thuộc tính innerHTML innerHTML là phương thức lấy ra cái gì được bọc bởi cặp thẻ nào đó. Đây là một phương thức rất thú vị để làm việc với HTML hoàn toàn dùng javascript(bạn chỉ dùng javascript sinh ra mả html) Ví dụ ta có : Code: Xem dòng text mẫu document.write("Lần thứ hai vẫn thế vì chỉ bỏ cặp thẻ div "+document.getElementById("1").innerHTML+" "); document.write("nhưng lần sau thì chỉ còn in nghiêng "+document.getElementById("2").innerHTML+" "); Kết quả của đoạn mã trên: Xem dòng text mẫu
  56. JavaScript 56 Lần thứ hai vẫn thế vì chỉ bỏ cặp thẻ div Xem dòng text mẫu nhưng lần sau thì chỉ còn in nghiêng Xem dòng text mẫu Thay đổi định dạng dùng innerHTML. Đơn giản là ta lấy nó ra, đặt lại nó, rồi lại chèn ngược vào. Đó là tất cả những gì trong function changeText() Code: function changeText() { var oldHTML = document.getElementById('para').innerHTML; var newHTML = " " + oldHTML + " "; document.getElementById('para').innerHTML = newHTML; } Chào mừng các bạn đến với hocvui.net Chào mừng các bạn đến với hocvui.net Một ví dụ khác như sau: ở ví dụ này khi các bạn nhấn vào button “ Change link” thì chữ Microsoft sẽ biến thành chữ W3Schools Qua ví dụ này các bạn sẽ hiểu rõ hơn về chức năng của thuộc tính innerHTML function changeLink() { document.getElementById('myAnchor').innerHTML="W3Schools"; document.getElementById('myAnchor').href=" "; document.getElementById('myAnchor').target="_blank"; } Bạn hãy thử chạy code trên sẽ rõ.
  57. JavaScript 57 Bài thực hành: Hãy tạo một trang web có các thành phần như sau: - một button khi nhấn button đó thì lần thứ nhất sẽ hiện ra dòng chữ “ phạm ngọc hiếu”,lần hai hiện ra “ phạm thị ngọc thúy”,lần 3 hiện ra “phạm lê hương” và lần 4 thì hiện ra dòng thông báo “đã in xong 3 cái tên “.Và chú ý rằng các công việc trên thực hiện trên cùng 1 trang web. Bài làm : pham ngoc hieu var i=0; var x=new Array(); x[0]=" phạm ngọc hiếu"; x[1]=" phạm thị ngọc thúy"; x[2]=" phạm lê hương "; function ham1() { document.getElementById("khung").innerHTML=x[i]; i++; if(i>3) document.write(" đã in xong 3 cái tên "); } Làm việc với ngày giờ (Date) Đối tượng Date() trong JavaScrip được sử dụng để làm việc với ngày tháng và thời gian. Chúng ta thử một vài ví dụ sau: Lấy thời điểm của ngày hôm nay( new Date())
  58. JavaScript 58 var d=new Date(); document.write(d); Xác định thứ ngày trong tuần( hàm getDay();) var d=new Date(); var weekday=new Array(7); weekday[0]="Sunday"; weekday[1]="Monday"; weekday[2]="Tuesday"; weekday[3]="Wednesday"; weekday[4]="Thursday"; weekday[5]="Friday"; weekday[6]="Saturday"; document.write("Today is " + weekday[d.getDay()]); Cụ thể như sau để lấy thông tin ngày tháng trên hệ thống,trước hết các bạn khai báo một đối tượng kiểu thời gian. Cú pháp: Var day = new Date(); Và dùng nó với một số Method theo kiểu day.Method Sau đây là một số Method của đối tượng Date
  59. JavaScript 59 Phương pháp Mô tả getDate () Trả về ngày của tháng (1-31) getDay () Trả về ngày trong tuần (0-6) getFullYear () Trả về năm (bốn chữ số) getHours () Trả về giờ (0-23) getMilliseconds () Trả về phần nghìn giây (0-999) getMinutes () Trả về phút (0-59) getMonth () Trả về tháng (0-11) getSeconds () Trả về giây (0-59) getTime () Trả về số mili giây kể từ nửa đêm ngày 1 tháng 1, 1970 getTimezoneOffset () Trả về sự khác biệt thời gian giữa GMT và giờ địa phương, trong vài phút getUTCDate () Trả về ngày tháng, theo thời gian phổ quát (1-31) getUTCDay () Trả về ngày trong tuần, theo thời gian phổ quát (0-6) getUTCFullYear () Trả về năm, theo thời gian vũ trụ (bốn chữ số) getUTCHours () Trả về giờ, theo thời gian phổ quát (0-23) getUTCMilliseconds () Trả về phần nghìn giây, theo thời gian phổ quát (0-999) getUTCMinutes () Trả về phút, theo thời gian phổ quát (0-59) getUTCMonth () Trả về tháng, theo thời gian phổ quát (0-11) getUTCSeconds () Trả về giây, theo thời gian phổ quát (0-59) setDate () Thiết lập ngày của tháng (1-31) setFullYear () Thiết lập năm (bốn chữ số) setHours () Thiết lập giờ (0-23) setMilliseconds () Thiết lập mili giây (0-999) setMinutes () Cài đặt phút (0-59) setMonth () Thiết lập tháng (0-11) setSeconds () Thiết lập giây (0-59) Settime () Lập một ngày và thời gian bằng cách thêm hoặc trừ đi một số quy định của mili giây đến / từ nửa đêm 01 Tháng Một 1970 setUTCDate () Thiết lập ngày tháng, theo thời gian phổ quát (1-31)
  60. JavaScript 60 setUTCFullYear () Bộ năm, theo thời gian vũ trụ (bốn chữ số) setUTCHours () Thiết lập giờ, theo thời gian phổ quát (0-23) setUTCMilliseconds () Thiết lập phần nghìn giây, theo thời gian phổ quát (0-999) setUTCMinutes () Thiết lập biên bản, theo thời gian phổ quát (0-59) setUTCMonth () Thiết lập tháng, theo thời gian phổ quát (0-11) setUTCSeconds () Đặt giây, theo thời gian phổ quát (0-59) toDateString () Chuyển đổi phần ngày của một đối tượng Ngày thành một chuỗi có thể đọc được toLocaleDateString () Trả về phần ngày của một đối tượng Date như một chuỗi, bằng cách sử dụng các công ước miền địa phương toLocaleTimeString () Trả về phần thời gian của một đối tượng Date như một chuỗi, bằng cách sử dụng các công ước miền địa phương toLocaleString () Chuyển đổi một đối tượng Date đến một chuỗi, bằng cách sử dụng miền địa phương ước toString () Chuyển đổi một đối tượng Date đến một chuỗi toTimeString () Chuyển đổi phần thời gian của một đối tượng Date đến một chuỗi toUTCString () Chuyển đổi một đối tượng Date đến một chuỗi, theo thời gian vũ trụ UTC () Trả về số mili giây trong một chuỗi ngày kể từ nửa đêm của ngày 1 tháng 1 năm 1970, theo thời gian vũ trụ valueOf () Trả về giá trị nguyên thủy của một đối tượng Date Cách cài đặt ngày: Chúng ta có thể dễ dàng thao tác ngày bằng cách sử dụng các phương pháp có sẵn cho các đối tượng Date. In the example below we set a Date object to a specific date (14th January 2010): Trong ví dụ dưới đây chúng tôi thiết lập một đối tượng Date đến một ngày cụ thể (14 Tháng 1 năm 2010): var MyDate = new Date (); myDate.setFullYear (2010,0,14); Và trong ví dụ sau đây chúng tôi thiết lập một đối tượng Date được 5 ngày trong tương lai:
  61. JavaScript 61 var MyDate = new Date (); myDate.setDate (myDate.getDate ()+ 5); So sánh hai ngày: Ngày đối tượng cũng được dùng để so sánh hai ngày. Ví dụ sau ngày hôm nay so với ngày 14 tháng 1 năm 2010: var MyDate = new Date (); myDate.setFullYear (2010,0,14); var ngày hôm nay = new Date (); if (MyDate> ngày hôm nay) ( alert ("Hôm nay là trước ngày 14 tháng 1 năm 2010"); ) khác ( alert ("Hôm nay là sau 14 tháng 1 năm 2010"); ) Thực ra thì chúng ta chỉ cần chú ý đến một vài hàm thôi. Hàm getTime(); Hàm này trả về thời gian tính bằng mili giây và thời điểm tính mốc của nó để tính là vào ngày 1/1/1970. Đó chính là điều mà các bạn phải lưu ý. var d=new Date(); document.write(d.getTime() + " milliseconds since 1970/01/01"); Kết quả của đoạn code trên sẽ là
  62. JavaScript 62 Hàm setFullYear(); Hàm này dùng để đặt ngày tháng. Cú pháp của nó là : Date.setFullYear(year,month,day) chú ý rằng hàm này luôn đi kèm với một đối tượng Date trong đó tham số year là bắt buộc,còn hai tham số còn lại thì không bắt buộc phải có. var d = new Date(); d.setFullYear(2020); document.write(d); Kết quả của đoạn code trên sẽ là : Còn đây là ví dụ thứ 2: var d = new Date(); d.setFullYear(1992,10,3); document.write(d); Và đây là kết quả Hàm getHours(); Hàm này trả về giờ hiện tại ( từ 0- 23 giờ). Nó luôn đi với một đối tượng Date. Cú pháp: Date.getHours();
  63. JavaScript 63 var d = new Date(); document.write(d.getHours()); Kết quả là 23 Một ví dụ khác var d = new Date("July 21, 1983 01:15:00"); document.write(d.getHours()); Kết quả là 1 Hàm getMinutes(); Hàm này trả về phút hiện tại(từ 0- 59) Nóa luôn đi với một đối tượng Date Cú pháp: Date.getMinutes(); Ví dụ: var d = new Date("July 21, 1983 01:15:00"); document.write(d.getMinutes()); Kết quả chắc các bạn cũng biết rồi 15 Hàm getSeconds();
  64. JavaScript 64 Tương tự như hai hàm trên các bạn tự nghiên cứu. Ví dụ sau tạo một đồng hồ chạy ( như đồng hồ điện tử) Code: function startTime() { var today=new Date(); var h=today.getHours(); var m=today.getMinutes(); var s=today.getSeconds(); // add a zero in front of numbers Các bạn hãy thử chạy code trên sẽ thấy chiếc đồng hồ điện tử đang chạy. Tạo đồng hồ bấm giờ bằng JavaScrip Bây giờ chúng ta sẽ dùng hai hàm setTimeOut và hàm clearTimeOut để tự tạo cho mình một cái đồng hồ bấm giờ xem sao. Giao diện của chiếc đồng hồ sẽ như thế này đây:
  65. JavaScript 65 Khi nhấn “ bắt đầu “ thì đồng hồ sẽ chạy bắt đầu từ thời điểm 0. Khi nhấn “ dừng lại” thì đồng hồ sẽ dừng lại tại thời điểm đó luôn. Khi nhấn tiếp tục thì đồnghồ sẽ chạy tiếp. Code nguồn như sau: var k=-1; var t; var l; function ham1() { k=k+1; document.fom.dongho.value=k; t=setTimeout("ham1();",1000); } function ham2() { clearTimeout(t); k=(-1); ham1(); } function ham3() { clearTimeout(t); } Đây đồng hồ bấm giờ
  66. JavaScript 66 Ok vậy là xong cái đồng hồ bấm giờ,thế nhưng cái đồng hồ đó đã thực sự hoàn hảo chưa ? Chắc là chưa.Để làm rõ nhược điểm của đoạn code này chúng ta hãy thử làm như thế này nhé: Bạn hãy nhấn “ bắt đầu “ cho đồng hồ chạy,đợi 1 lát rồi hãy nhấn nút “ tiếp tục” tiếp.Đó bây giờ hãy nhìn đồng hồ chạy mà xem nó chạy bị “ giật cục ! “,và lúc đó phải nhấn nút “ dừng lại” 2 lần thì đồng hồ mới dừng.Tại sao vậy nhỉ ? gợi ý nhé : đó là do chức năng setTimeout đã bi kích hoạt hai lần , để khắc phục điều này chúng ta phải tắt chức năng setTimeout đầu đã rồi mới cho setTimeout thứ hai chạy được ( dùng clearTimeout ). Khắc phục cụ thể như sau: Thêm hàm này nữa: function ham4() { clearTimeout(t); ham1(); } Chỉnh đoạn code thành Đó bây giờ thì nhấn thoải mái chả sợ bị „giật cục‟ nữa. Lời bình: Qua bài này chúng ta hiểu rõ hơn về cách thức hoạt động của hai hàm setTimeout và clearTimeout. Tạo chiếc đồng hồ điện tử cho chính bạn Bây giờ chúng ta sẽ thực hành tạo ra một chiếc đồng hồ điện tử,các bạn phải tạo ra một trình chạy luôn cập nhật giá trị thời gian của hệ thống: Giao diện thô sơ của chiếc đồng hồ đó như sau : Code nguồn : function ham() {
  67. JavaScript 67 var x=new Date(); document.getElementById("gio").innerHTML=x.getHours(); document.getElementById("phut").innerHTML=x.getMinutes(); document.getElementById("giay").innerHTML=x.getSeconds(); setTimeout("ham();",1000); } bây giờ là : : Qua bài tập này chúng ta hãy thử làm mộ bài tập nâng cao hơn một chút đó là tạo ra một chiếc đồng hồ điện tử có các chức năng hiện thị giờ hiện tại, hẹn giờ ( có âm phát ra đó nhé),có chế độ bấm giờ. Mảng (Array) Mảng là một biến đặc biệt,tại cùng một thời điểm nó có thể giữ nhiều hơn một giá trị. Tác dụng của mảng thì vô cùng to lớn,chẳng hạn là như thế này: Chẳng hạn bạn có một list danh sách thẻ card và bạn có thể lưu nó bằng cách như sau: cars1="Saab"; cars2="Volvo"; cars3="BMW"; đơn giản là chúng ta có thể làm như vậy,thế nhưng nếu số thẻ card là 3000 cái thì bạn định làm thế nào ? không lẽ lại viết lần lượt như trên cho đến khi hết 3000 cái thì thôi à ?! Bó tay !!. Giải pháp tốt nhất trong trường hợp này là sử dụng mảng (Array ). Mảng có thể giữ tất cả các biến của bạn chỉ với một cái tên duy nhất,và để truy cập đến từng biến ta sẽ thông qua các chỉ số của mảng. Mỗi phần tử của mảng có một ID riêng của mình để nó có thể dễ dàng truy nhập. Chú ý rằng chỉ số của mảng bắt đầu từ 0. Tạo một mảng (Array) ? Chúng ta có 3 cách để khai báo một mảng. Trong các trường hợp dưới đây chúng ta khai báo một mảng tên là myCars:
  68. JavaScript 68 var myCars = new Array (); myCars [0] = "Saab"; myCars[1]="Volvo"; myCars [2] = "BMW"; cách 2: var myCars=new Array("Saab","Volvo","BMW"); cách 3: var myCars=["Saab","Volvo","BMW"]; truy cập một mảng ? thông qua chỉ số chúng ta sẽ truy cập vào từng phần tử của mảng. ví dụ chúng ta sẽ truy cập vào mảng myCars trên: document.write(myCars[0]); kết quả hiện thị sẽ là : Saab Gán một giá trị phần tử của mảng ? Để gán thì ta cũng chỉ cần truy cập vào phần tử của mảng rồi tiến hành việc gán giá trị mà thôi. Ví dụ : myCars[0]="Opel"; mảng là đối tượng vậy cho nên nó sẽ có thuộc tính và method: Property Mô tả constructor Trả về chức năng đã tạo ra mẫu thử nghiệm của đối tượng Array length trả về số phần tử trong mảng prototype Cho phép bạn thêm các thuộc tính và phương pháp vào mảng Method Mô tả concat () nối hai mảng với nhau thành một mảng mới join() nối các phần tử của mảng thành 1 chuỗi pop () Loại bỏ các yếu tố cuối cùng của một mảng, và trả về yếu tố đó push () Thêm yếu tố mới vào cuối của một mảng, và trả về chiều dài mới reverse () Đảo ngược thứ tự trong một mảng
  69. JavaScript 69 shift () Loại bỏ các yếu tố đầu tiên của một mảng, và trả về yếu tố đó slice () Chọn một phần của một mảng, và trả về mảng mới sort () Phân loại các yếu tố của một mảng splice () Thêm / Loại bỏ các yếu tố từ một mảng toString () Chuyển đổi một mảng cho một chuỗi, và trả về kết quả unshift () Thêm yếu tố mới cho sự khởi đầu của một mảng, và trả về chiều dài mới valueOf () Trả về giá trị nguyên thủy của một mảng Concat – nối hai mảng với nhau var parents = ["Jani", "Tove"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(children); document.write(family); Kết quả : Jani,Tove,Cecilie,Lone Tương tự vậy nối 3 mạng cũng dễ thôi var parents = ["Jani", "Tove"]; var brothers = ["Stale", "Kai Jim", "Borge"]; var children = ["Cecilie", "Lone"]; var family = parents.concat(brothers, children); document.write(family); Kết quả : Jani,Tove,Stale,Kai Jim,Borge,Cecilie,Lone Join – nối các phần tử của mảng
  70. JavaScript 70 var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.join() + " "); document.write(fruits.join("+") + " "); document.write(fruits.join(" and ")); Kết quả : Banana,Orange,Apple,Mango Banana+Orange+Apple+Mango Banana and Orange and Apple and Mango Pop – xóa phần tử cuối cùn của mảng var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.pop() + " "); document.write(fruits + " "); document.write(fruits.pop() + " "); document.write(fruits); Kết quả như sau : Mango Banana,Orange,Apple Apple Banana,Orange Push – thêm phần tử mới vào cuối mảng var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.push("Kiwi") + " "); document.write(fruits.push("Lemon","Pineapple") + " "); document.write(fruits);
  71. JavaScript 71 Kết quả là : Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple Reverse – đảo ngược thứ tự phần tử trong mảng var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.reverse()); Kết quả như sau : Mango,Apple,Orange,Banana Shift – loại bỏ phần tử đầu tiên của mảng var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.shift() + " "); document.write(fruits + " "); document.write(fruits.shift() + " "); document.write(fruits); Kết quả như sau : Banana Orange,Apple,Mango Orange Apple,Mango Slice var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.slice(0,1) + " "); document.write(fruits.slice(1) + " ");
  72. JavaScript 72 document.write(fruits.slice(-2) + " "); document.write(fruits); Sort – sắp xếp các phẩn tử của mảng var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.sort()); Kết quả hiện thị là : Apple,Banana,Mango,Orange Sort numbers function sortNumber(a, b) { return a - b; } var n = ["10", "5", "40", "25", "100", "1"]; document.write(n.sort(sortNumber)); Kết quả là : 1,5,10,25,40,100 Hoặc kết quả sắp xếp sẽ ngược lại: function sortNumber(a, b) { return b - a; } var n = ["10", "5", "40", "25", "100", "1"];
  73. JavaScript 73 document.write(n.sort(sortNumber)); Kết quả là : 100,40,25,10,5,1 Splice var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write("Removed: " + fruits.splice(2,0,"Lemon") + " "); document.write(fruits); Kết quả là : Removed: Banana,Orange,Lemon,Apple,Mango toString var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.toString()); Kết quả hiện thị là : Banana,Orange,Apple,Mango unShift var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.write(fruits.unshift("Kiwi") + " "); document.write(fruits.unshift("Lemon","Pineapple") + " "); document.write(fruits);
  74. JavaScript 74 Note: The unshift() method does not work properly in Internet Explorer, it only returns undefined! Kết quả hiện thị là : undefined undefined Lemon,Pineapple,Kiwi,Banana,Orange,Apple,Mango Note: The unshift() method does not work properly in Internet Explorer, it only returns undefined! Boolean Objects Đối tượng boolean là đối tượng có 2 giá trị hoặc đúng (true) hoặc sai (false). Đối tượng boolean được sử dụng để chuyển đổi một giá trị không mang kiểu boolean thành kiểu boolean ( đúng hoặc sai). Ví dụ dưới đây tạo một đối tượng Boolean có tên là myBoolean: var myBoolean=new Boolean(); chú ý rằng nếu đối tượng Boolean không được thiết lập giá trị ban đầu hoặc nếu nó là 0,null,” ”,false,undefined, hoặc NaN thì đối tượng được thiết lập giá trị là false.Còn lại nó được thiết lập là true. Tất cả các dòng mã dưới đây đều thiết lập giá trị cho đối tượng là false: var myBoolean = new Boolean (); var myBoolean = new Boolean (0); var myBoolean = new Boolean (null); var myBoolean = new Boolean (""); var myBoolean = new Boolean (false); var myBoolean = new Boolean (Nan); và tất cả dòng mã dưới đây đều thiết lập giá trị cho đối tượng là đúng: var myBoolean = new Boolean (true); var myBoolean = new Boolean ("true"); var myBoolean = new Boolean ("false"); var myBoolean = new Boolean ("Richard"); các phương thức và thuộc tính của đối tượng Boolean: Boolean Object Properties Bất động sản Mô tả
  75. JavaScript 75 constructor Trả về chức năng đã tạo ra mẫu của đối tượng Boolean prototype Cho phép bạn thêm các thuộc tính và phương pháp vào đối tượng Boolean Object Method Phương pháp Mô tả toString () Chuyển đổi một giá trị Boolean thành một chuỗi, và trả về kết quả valueOf () Trả về giá trị ban đầu của một đối tượng Boolean Constructor Cú pháp: boolean.constructor ví dụ sau đây trả lại chức năng đã tạo ra mẫu của đối tượng Booblean var bool=new Boolean(); document.write(bool.constructor); Kết quả hiện thị là : function Boolean() { [native code] } toString () cú pháp: boolean.toString() ví dụ dưới đây thực hiện việc chuyển đổi giá trị trị Boolean thành String var bool = new Boolean(1); document.write(bool.toString()); Kết quả : True
  76. JavaScript 76 Math Objects Math Objects là đối tượng thực hiện các thao tác toán học. Math không phải là một constructor.Tất cả các thuộc tính hay phương thức của nó có thể được gọi bằng cách sử dụng Math như một đối tượng mà không cần tạo nó. Cú pháp cho việc sử dụng thuộc tính và phương thức của Math: var pi_value=Math.PI; var sqrt_value=Math.sqrt(16); hằng số toán học JS cung cấp tám hắng số toán học mà có thể được truy cập từ đối tượng Math.Đó là : E , PI, square root of 2, square root of 1/2, natural log of 2, natural log of 10, base-2 log of E, và base-10 log of E. Bạn có thể tham khảo ở bảng sau: Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Những method có sẵn Round() – làm tròn document.write(Math.round(0.60) + " "); document.write(Math.round(0.50) + " "); document.write(Math.round(0.49) + " "); document.write(Math.round(-4.40) + " "); document.write(Math.round(-4.60)); Kết quả: 1 1 0
  77. JavaScript 77 -4 -5 Random() – tạo số ngẫu nhiên //return a random number between 0 and 1 document.write(Math.random() + " "); //return a random integer between 0 and 10 document.write(Math.floor(Math.random()*11)); Kết quả : 0.950635502524875 3 Max() – tìm ra số lớn nhất document.write(Math.max(5,10) + " "); document.write(Math.max(0,150,30,20,38) + " "); document.write(Math.max(-5,10) + " "); document.write(Math.max(-5,-10) + " "); document.write(Math.max(1.5,2.5)); Kết quả : 10 150 10 -5 2.5 Min() – tìm ra số bé nhất
  78. JavaScript 78 document.write(Math.min(5,10) + " "); document.write(Math.min(0,150,30,20,38) + " "); document.write(Math.min(-5,10) + " "); document.write(Math.min(-5,-10) + " "); document.write(Math.min(1.5,2.5)); Kết quả : 5 0 -5 -10 1.5 Sau đây là bảng các method của Math các bạn có thể tham khảo Phương pháp Mô tả abs (x) Trả về giá trị tuyệt đối của x acos (x) Trả về arccosine của x, trong radian asin (x) Trả về arcsine của x, trong radian atan (x) Trả về arctangent của x là một giá trị số giữa-PI / 2 và PI / 2 radian atan2 (y, x) Trả về arctangent của thương của đối số của nó ceil(x) Trả về x, được làm tròn lên đến số nguyên gần nhất cos (x) Trả về cosin của x (x là radian) exp (x) Trả về giá trị của E x floor (x) Trả về x, được làm tròn xuống đến số nguyên gần nhất log (x) Trả về logarit tự nhiên (cơ số E) của x max (x, y, z Trả về giá trị lớn nhất , , n) min (x, y, z , , Trả về giá trị bé nhất n) pow (x, y) Trả về giá trị của x mũ y
  79. JavaScript 79 random () Trả về một số ngẫu nhiên giữa 0 và 1 round (x) làm tròn x đến số nguyên gần nhất sin (x) Trả về sin của x (x là radian) sqrt (x) Trả về căn bậc hai của x tan (x) Trả về tang của một góc So mẫu (RegExp) trong JavaScript Như thé nào là so mẫu (RegExp)? Nó là một đối tượng mô tả mô hình của kí tự. Khi bạn tìm kiếm trong văn bản,bạn có thể sử dụng một mô hình để mô tả những gì bạn đang tìm kiếm. Một mô hình đơn giản có thể là một kí tự duy nhất. Một mô hình phức tạp hơn có thể có nhiều kí tự hơn,và có thể được dùng để phân tích,định dạng kiểm tra,thay thế hoặc nhiều việc khác nữa. Regexp thường được sử dụng để thực hiện chức năng tìm kiếm và thay thế trên văn bản. Cú pháp: var txt=new RegExp(pattern,modifiers); hoặc đơn giản hơn var txt=/pattern/modifiers; như chúng ta đã thấy trong cú pháp trên có hai trường là pattern và modifiers,chúng ta sẽ lần lượt tìm hiểu chúng. RegExp modifiers ? Cờ modifiers được sử dụng để báo cho trình duyệt biết rằng là tìm kiếm không phân biệt chữ hoa hay chữ thường ? hay tìm kiếm trên toàn bộ văn bản? hay tìm kiếm trên toàn bộ văn bản và không phân biệt chữ hoa hay thường ? Modifiers i được sử dụng để : tìm kiếm không phân biệt chữ hoa hay chữ thường. Modifiers g được sử dụng để : tìm kiếm trên toàn bộ văn bản. Modifiers ig được sử dụng để : tìm kiếm trên toàn bộ văn bản và không phân biệt chữ hoa và chữ thường. Ví dụ sau sẽ thực hiện việc tìm kiếm từ “w3schools” trong một chuỗi :
  80. JavaScript 80 var str = "Visit W3Schools"; var patt1 = /w3schools/i; document.write(str.match(patt1)); Kết quả : W3Schools Ví dụ sau sẽ thực hiện việc tìm kiếm từ “is” trên toàn bộ văn bản (theo mặc định thì trình duyệt sẽ tìm thấy từ đầu tiên trong văn bản sẽ dừng lại ): var str="Is this all there is?"; var patt1=/is/g; document.write(str.match(patt1)); Kết quả hiện thị là : is,is ví dụ dưới đây sẽ thực hiện việc tìm kiếm trên toàn bộ văn bản và không phân biệt chữ hoa chữ thường: var str="Is this all there is?"; var patt1=/is/gi; document.write(str.match(patt1)); Kết quả hiện thị là : Is,is,is Hai phương thức (method) quan trọng của đối tượng RegExp Test() ? Phương thức này sẽ cho biết xem một chuỗi có nằm trong một chuỗi khác hay không ?
  81. JavaScript 81 Nếu có thì trả về true. Nếu sai thì trả về false. Ví dụ dưới đây kiểm tra xem kí tự e có nằm trong chuỗi hay không ? var patt1=new RegExp("e"); document.write(patt1.test("The best things in life are free")); Kết quả hiện thị : True Exec() ? Phương thức này cũng giống phương thức trên chỉ có điều nó sẽ trả về giá trị nội dung được tìm thấy. Ví dụ sau tìm kiếm chuỗi kí tự “e” var patt1=new RegExp("e"); document.write(patt1.exec("The best things in life are free")); Kết quả hiện thị sẽ là : e chúng ta có thể tham khảo bảng sau ( đầy đủ hết,tuy nhiên một số cái ít khi dùng lắm) Modifiers Modifiers are used to perform case-insensitive and global searches: Modifier Description i Perform case-insensitive matching g Perform a global match (find all matches rather than stopping after the first match)
  82. JavaScript 82 m Perform multiline matching Brackets Brackets are used to find a range of characters: Expression Description [abc] Find any character between the brackets [^abc] Find any character not between the brackets [0-9] Find any digit from 0 to 9 [A-Z] Find any character from uppercase A to uppercase Z [a-z] Find any character from lowercase a to lowercase z [A-z] Find any character from uppercase A to lowercase z [adgk] Find any character in the given set [^adgk] Find any character outside the given set (red|blue|green) Find any of the alternatives specified Metacharacters Metacharacters are characters with a special meaning: Metacharacter Description . Find a single character, except newline or line terminator \w Find a word character \W Find a non-word character \d Find a digit \D Find a non-digit character \s Find a whitespace character \S Find a non-whitespace character \b Find a match at the beginning/end of a word \B Find a match not at the beginning/end of a word
  83. JavaScript 83 \0 Find a NUL character \n Find a new line character \f Find a form feed character \r Find a carriage return character \t Find a tab character \v Find a vertical tab character \xxx Find the character specified by an octal number xxx \xdd Find the character specified by a hexadecimal number dd \uxxxx Find the Unicode character specified by a hexadecimal number xxxx Quantifiers Quantifier Description n+ Matches any string that contains at least one n n* Matches any string that contains zero or more occurrences of n n? Matches any string that contains zero or one occurrences of n n{X} Matches any string that contains a sequence of X n's n{X,Y} Matches any string that contains a sequence of X or Y n's n{X,} Matches any string that contains a sequence of at least X n's n$ Matches any string with n at the end of it ^n Matches any string with n at the beginning of it ?=n Matches any string that is followed by a specific string n ?!n Matches any string that is not followed by a specific string n RegExp Object Properties Property Description global Specifies if the "g" modifier is set ignoreCase Specifies if the "i" modifier is set lastIndex The index at which to start the next match
  84. JavaScript 84 multiline Specifies if the "m" modifier is set source The text of the RegExp pattern RegExp Object Methods Method Description compile() Compiles a regular expression exec() Tests for a match in a string. Returns the first match test() Tests for a match in a string. Returns true or false Bài thực hành 1: 1. Viết một đoạn lệnh JavaScript sử dụng cách thức confirm() và câu lệnh if then để thực hiện: Hỏi người sử dụng có muốn nhận được một lời chào không Nếu có thì hiện ảnh wellcome.jpg và một lời chào. Nếu không thì viết ra một lời thông báo 2. Viết một đoạn lệnh JavaScript để thực hiện: · Hỏi người sử dụng: "10+10 bằng bao nhiêu?" · Nếu đúng thì hỏi tiếp: Có muốn trả lời câu thứ hai không?" · Nếu muốn thì hỏi: "10*10 bằng bao nhiêu?" · Đánh giá kết quả bằng biểu thức logic sau đó viết ra màn hình: Đúng: "CORRECT"; Sai: "INCORRECT" 3. Câu lệnh nào trong các câu sau đây sử dụng sai thẻ sự kiện a. b. c. d. e. f. 4. Điều gì xảy ra khi thực hiện script sau:
  85. JavaScript 85 Exercise 5.4 This is my page! 5. Sử dụng vòng lặp while để mô phỏng các vòng lặp for sau: a. for (j = 4; j > 0; j ) { document.writeln(j + " "); } b. for (k = 1; k <= 99; k = k*2) { k = k/1.5; } c. for (num = 0; num <= 10; num ++) { if (num == 8) break; } 6. hãy xây dựng một trang web có chức năng như sau: “ thực hiện bài kiểm tra”
  86. JavaScript 86 Xuất hiện 2 button một cái là “ vào bài kiểm tra” một cái là “ không làm “ Khi nhấn nút “vào bài kiểm tra” thì bài kiểm tra phép tính bắt đầu với các số và phép toán là ngẫu nhiên.Nếu trả lời sai thì thoát và hiện thông báo “ bạn về học lại đi “ ,nếu đúng thì hiện câu hỏi tiếp theo cho đến câu 10 thì thoát và hiện thông báo “ quá giỏi”. Bài làm 1) thuc hanh JS function loi_chao() { document.write(" chào bạn Phạm Ngọc Hiếu "); document.write(" "); } function loi() { document.write(" không chào thì thôi bye bye "); } function thong_bao() { var t=confirm("bạn có muốn hiện lời chào không "); if(t==true) loi_chao(); else loi(); } thong_bao(); 2)
  87. JavaScript 87 thực hành JS function ham() { if(document.fom.ket_qua.value==eval("10+10")) { var l= confirm(" bạn có muốn tiếp tục câu thứ hai không "); if(l==true) ham2(); else ham3(); } else { document.write(" bạn trả lời sai rồi bye bye "); setTimeout("ham3()",3000); } } function ham3() { window.close(); } function ham2() { var x=prompt("10*10 bằng bao nhiêu"); if(x==eval(10*10)) { document.write(" bạn trả lời đúng rồi "); ham3(); } else { document.write(" bạn trả lời sai rồi "); ham3(); } } 10+10=
  88. JavaScript 88 3. a,c,e là sai còn lại là đúng. 4. Khi mở trang web thì lời chào hiện lên cùng hộp thoại yêu cầu nhập tên vào. Khi thoát trang web thì lời chòa cùng với tên hiện lên. 5. a) j=4; while(j>0) { Document.writeln(j +” ”); j ; } b) k=1; while(k<=99) { k=k/1.5; k=k*2; } c) num=0; while(num <=10) { If(num==8) break; Num++; }
  89. JavaScript 89 Bài thực hành 2: hãy thử tạo một trang web có mã như sau,nhìn cách thức hoạt động của nó rồi hãy tạo một trang web có chức năng tương tự ( tất nhiên là phải do bạn tự viết). ( code hơi dài nhưng đừng thế mà choáng nhé,thực ra cũng chẳng có gì cả ). thực hành JavaScript b h1{color:#FF0000} var i=-1; var j=-1; var dung_sai=new Array(); dung_sai[0]=" đúng "; dung_sai[1]=" sai "; var cau_hoi=new Array(); cau_hoi[0]=" nhà bác học việt nam nào sau đây vừa đạt được một danh hiệu toán học cao cấp của thế giới ?"; cau_hoi[1]=" câu thủ nào sau đây vừa được ManCity mua về ? "; var tra_loi2=new Array(); tra_loi2[0]=" a) "; tra_loi2[1]=" b) "; tra_loi2[2]=" c) "; tra_loi2[3]=" d) "; tra_loi2[4]=" a) "; tra_loi2[5]=" b) "; tra_loi2[6]=" c) "; tra_loi2[7]=" d) "; function dung() { i=i+1; if(j==7) thoat(); document.getElementById("chut").innerHTML=""; document.getElementById("the1").innerHTML=cau_hoi[i]; document.getElementById("traloi0").innerHTML=tra_loi2[++j]; document.getElementById("traloi1").innerHTML=tra_loi2[++j]; document.getElementById("traloi2").innerHTML=tra_loi2[++j];
  90. JavaScript 90 document.getElementById("traloi3").innerHTML=tra_loi2[++j]; } function div_dung() { document.getElementById("chut").innerHTML=dung_sai[0]; } function div_sai() { document.getElementById("chut").innerHTML=dung_sai[1]; } function thoat1() { window.close(); } function thoat() { document.write(" bài kiểm tra đã kết thúc ,tạm biệt bạn chúc bạn học giỏi "); t=setTimeout("thoat1();",2000); } bài kiểm tra IQ game online nào sau đây được bình chọn là game hay nhất trong năm 2009 ? a) b) c) d)
  91. JavaScript 91 Lời bình: Thực ra thì bài tập này mình cũng làm khá vất vả mới hoàn thành ( do trình độ có hạn ),sau khi làm mình thấy phải chú ý những điều sau: phải hết sức cận thận khi trong một chuỗi mà có nhiều hơn 2 dấu “ (dấu nháy kép),đơn giản là bởi vì ví như các bạn có chuỗi sau : “anh yêu em “nhưng em không yêu” anh “ Thế thì máy nó sẽ không hiểu đó là 1 chuỗi,các bạn phải viết lại như sau: “anh yêu em‟nhưng em không yêu‟anh” Sử dụng nháy đơn sẽ giả quyết được trường hợp này. trong quá trình điều khiển vị trí cho khung thì chú ý rằng để cài đặt được vị trí thì chúng ta phải đặt thông số : “ position:absolute” cho nó.không có thông số này thì coi như khung “chết cứng”.Còn để điều chỉnh vị trí cho đẹp thì chuyển qua cửa sổ design rồi kéo thả đến vị trí thích hợp,các thông số trong cửa sổ code sẽ tự động điều chỉnh. Qua đây chúng ta có thể thấy được công dụng rất hiệu quả của chức năng getElementById(),và innerHTML . “ ++j” và “j++” là cùng ý nghĩa nhưng khác nhau,một cái là cộng trước sau đó mới dùng,còn một cái là dùng trước sau đó mới cộng.không tin các bạn thử thay “++j” ở đọn code trên bằng “j++” mà xem. Khi muốn cho một liên kết thực hiện một hàm nào đó ( mà không nhảy tới trang khác ) thì chúng ta có hai cách : _ hoặc chúng ta sử dụng phép gán href=”#” _ hoặc là chúng ta href=”javascript: ham();” bài thực hành 3 Dùng JavaScript tạo một form lựa chọn theo kiểu select. Bài làm
  92. JavaScript 92 for(i=1987;i "+i+" "); } Với phương pháp này chúng ta khỏi cần phải sử dụng lặp lại cú pháp . Bài thực hành 4 ở bài thực hành này chúng ta sẽ tạo ra một form nhập liệu để gửi lên sever lưu vào cơ sở dữ liệu như sau : Nếu như phần mật khẩu và phần nhắc lại mật khẩu khác nhau thì một dòng thông báo “ bạn đã nhập sai mật khẩu “ hiện lên. Bài làm :
  93. JavaScript 93 login function ham() { if(document.fom.matkhau1.value != document.fom.matkhau2.value) { document.getElementById("hay").innerHTML="ban da nhap sai mat khau"; return false; } else return true; } trang đăng kí thành viên tên đăng nhập mật khẩu nhắc lại mật khẩu Qua ví dụ này các bạn phải lưu ý một điều như sau : ở dòng Các bạn phải thêm từ khóa return trong biến cố onsubmit.Nếu không có từ khóa này các bạn sẽ gặp rắc rối to đấy.
  94. JavaScript 94 JS advanced Sự phân cấp đối tượng trong JS Trong JavaScrip đối tượng được phân ở các cấp khác nhau,lớn nhất,rộng nhất là đối tượng window,tiếp theo là document.,history, Chúng ta có thể tham khảo sơ đồ sau: JavaScript Navigator Hầu hết các câu lệnh của JavaScript đều chạy trên mọi trình duyệt,thế nhưng điều đó cũng có nghĩa là sẽ có một số sẽ không chạy trên một loại trình duyệt nào đó,đặc biệt là trình duyệt cũ.
  95. JavaScript 95 Để có thể khắc phục được nhược điểm này chúng ta sẽ làm cho trang web có khả năng nhận biết được loại trình duyệt mà người dùng đang sử dụng. Các đối tượng Navigator chứa thông tin về trình duyệt và thông tin phiên bản của khách truy nhập,và nhiều thông tin khác nữa. Navigator không có các phương thức mà nó chỉ có các thuộc tính: appCodeName Xác định tên mã nội tại của trình duyệt (Atlas). AppName Xác định tên trình duyệt. AppVersion Xác định thông tin về phiên bản của đối tượng navigator. userAgent Xác định header của user - agent. Ví dụ: document.write("Browser CodeName: " + navigator.appCodeName); document.write(" "); document.write("Browser Name: " + navigator.appName); document.write(" "); document.write("Browser Version: " + navigator.appVersion); document.write(" "); document.write("Cookies Enabled: " + navigator.cookieEnabled); document.write(" "); document.write("Platform: " + navigator.platform); document.write(" "); document.write("User-agent header: " + navigator.userAgent); Kết quả hiện thị như sau: Browser CodeName: Mozilla Browser Name: Microsoft Internet Explorer Browser Version: 4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; AskTB5.4) Cookies Enabled: true
  96. JavaScript 96 Platform: Win32 User-agent header: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; AskTB5.4) Bài thực hành: Hãy nghiêm chỉnh hoàn thiện bài thực hành sau: Viết code JS xác định tên trình duyệt,phiên bản của trình duyệt bạn đang sử dụng. Đáp án: var x=navigator.appName; var y=navigator.appCodeName; var z=navigator.appVersion; var t=navigator.userAgent; document.writeln("trình duyệt mà các bản đang dùng là "+x); document.writeln("phiên bản đang dùng là "+z); document.writeln("mã nội tại của trình duyệt là"+y); document.writeln("header"+t); javaScript window window là đối tượng ở mức cao nhất,nó có khá nhiều thuộc tính và phương thức quan trọng. sau đây chúng ta chỉ tìm hiểu một vài thuộc tính và phương thức quan trọng nhất. thuộc tính closed giá trị trả về của nó là một giá trị boolean cho biết cửa sổ đã đóng hay chưa. Cú pháp: Window.closed Hỗ trợ trong tất cả các trình duyệt. ví dụ function openWin() { myWindow=window.open('','','width=200,height=100'); myWindow.document.write(" This is 'myWindow' "); }
  97. JavaScript 97 function closeWin() { myWindow.close() } function checkWin() { if (myWindow.closed) { document.getElementById("msg").innerHTML="'myWindow' has been closed!"; } else { document.getElementById("msg").innerHTML="'myWindow' has not been closed!"; } } Hãy thử chạy đoạn code trên và tìm hiểu nó. defaultStatus Giá trị trả về của nó là một chuỗi văn bản được hiện thị trên thanh trạng thái (phía dưới trình duyệt). Thuộc tính này không hoạt động trên trạng thái mặc định của IE,Crome,fifox,muốn nó hoạt động được bạn phải điều chỉnh lại mặc định của các trình duyệt trên. Cú pháp: Window.defaultStatus Ví dụ : window.defaultStatus="This is the default text in the status bar!!";
  98. JavaScript 98 Look at the text in the statusbar. Note: The defaultStatus property does not work in the default configuration of IE, Firefox, Chrome, or Safari. Frames Đây là thuộc tính của window,nó trả về một mảng các frame( kể cả iframe) trong trang. Để xác định được số phần tử của mảng này ta dùng thuộc tính length.( frames.length). Cú pháp: Window.frames Hỗ trợ trong tất cả các trình duyệt. Ví dụ sau đây sẽ thực hiện việc tìm tất cả các frame trong một trang và thay đổi thuộc tính src của các frame đó thành địa chỉ “dantri.vn” for (var i=0; i Length Thuộc tính này trả về số frame(kể cả iframe) trong một cửa sổ. Cú pháp: Window.length Hỗ trợ trong tất cả các trình duyệt. Name Trả về tên của cửa sổ hiện thời. Cú pháp: Window.name Hỗ trợ trong tất cả các trình duyệt. Ví dụ sau trả về tên của cửa sổ mới:
  99. JavaScript 99 function openWin() { myWindow=window.open('','MsgWindow','width=200,height=100'); myWindow.document.write(" This window's name is: " + myWindow.name + " "); } Parent Trả về cửa sổ cha mẹ của cửa sổ hiện thời. Cú pháp: Window.parent Hỗ trợ trong tất cả các trình duyệt. Ví dụ sau đây chúng ta sẽ cho xuất hiện một cửa sổ mới( cửa sổ con) và thông báo tên của cửa sổ cha mẹ của nó. function openWin() { window.open('','','width=200,height=100'); alert(window.parent.location); } Self