›
›

Giáo trình Javascript

pdf 79 trang hapham 4300
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Javascript", để 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:

  • pdfgiao_trinh_javascript.pdf

Nội dung text: Giáo trình Javascript

  1. Giáo trình Javascript
  2. September 16, 2009 [JAVASCRIPT] Mục Lục Giới Thiệu Về Hocvui.net 3 MỞ ĐẦU Javascript 3 Mở đầu về Javascript 3 Cú pháp Javascript 5 Các kiểu giá trị 6 Tiếp theo 7 Phép toán, câu lệnh gán. 10 javascipt Cách đặt tên biến 11 javascript Function - hàm 12 thủ tục vào, ra đơn giản 12 javascript - event 13 Các hàm sẽ dùng trong các ví dụ 14 Một số hàm hay dùng trong JavaScript 14 JavaScript Comments - chú thích 15 CẤU TRÚC RẼ NHÁNH 16 cấu trúc rẻ nhánh - câu lệnh if 16 else if 17 CẤU TRÚC LẶP 19 Cấu trúc lặp 19 break, dừng vòng lặp 20 MẢNG 21 Mảng trong javascript 21 Tại sao lại dùng đến mảng 22 Array function - các hàm làm việc với mảng 24 Mảng hai chiều javascript 26 Mảng dựng sẵn 27 JS FUNCTION - HÀM 29 Tự soạn thảo các hàm javascript 29 Hàm và các tham số 30 Biến toàn cục và biến cục bộ 32 javascript - function return 34 FORM 37 Giải đáp trước thắc mác về những dấu chấm 37 javascript làm việc với các form 37 Nhận + thiết lập thông tin từ các biểu mẩu 41 Kiểm tra các trường text,password,textarea 43 kiểm tra trường select 44 HocVui.Net Page 1
  3. September 16, 2009 [JAVASCRIPT] Kiểm tra các nút radio 45 Xử lý chuỗi. 46 WINDOW 48 Làm việc với các cửa sổ. 48 Đóng cửa sổ đả mở 49 Di chuyển cửa sổ 50 Địa chỉ cửa sổ 51 FRAMES 52 Javascript và frame 52 Ví dụ về frame và js 53 HẸN GIỜ 66 Định giờ cho các sự kiện 66 clearTimeout - Ngưng hẹn giờ 67 Tạo một đồng hồ bấm giờ 68 LINH TINH KHÁC 69 Làm việc với ngày giờ 69 JavaScript getElementById 70 JavaScript innerHTML 71 JavaScript Void 0 71 Vấn đề trình duyệt Navigator 72 COOKIES 73 Cookies dùng để làm gì 73 Thiết lập cookies 75 Đọc cookies 76 HocVui.Net Page 2
  4. September 16, 2009 [JAVASCRIPT] Giới Thiệu Về Hocvui.net Rõ ràng, Internet đang thay đổi thế giới, và dĩ nhiên thay đổi cả nhiều người trong chúng ta. Chúng ta có thêm nhiều cách để giao dịch, nhiều cách để trò truyện, nhiều thứ để vui chơi, và có lẽ trên hết là nhiều kiến thức hơn Các tiện ít từ những Website từ một thứ thú vị đã trở thành tất yếu, tìm kiếm thông tin với Google, một góc riêng của mình với Yahoo Blog, xem video trên Youtube có lẻ đã trở thành thói quen của nhiều người trong chúng ta. Một điều chắc chắn là ứng dụng Web sẽ càng ngày đi sâu và phát triễn hơn nữa vào cuộc sống của con người . Vì thế hocvui.net được tạo ra để đem lại cho các bạn những hiểu biết nền tảng về mảng kiến thức này. Lượng thông tin qua mạng Internet giờ đây nhiều hông kể xiết, hocvui.net chẳng qua là một Website được xây dựng bởi những học sinh, chắc chắn sẽ không thể nào đem tới cho bạn những kiến thức chuyên sâu, cũng như không hề dám khẳng định rằng hocvui.net không có thiếu sót. Mọi điều hocvui.net muốn đem là chia sẽ cho các bạn những gì chúng tôi biết và ngược lại từ phía bạn. Chúng ta hãy cùng học hỏi và cùng chia sẽ cho nhau những kiến thức đó! Các bài viết hướng dẫn của hocvui.net đều được viết ra trong quá trình tự học, sau từ những kinh nghiệm thực tế, mình đã trình bày lại, sưu tầm thêm, cũng như thêm vào những lưu ý của chính bản thân mình. Bài viết của mình đã được mình sắp xếp theo thứ tự từ đơn giản tới phức tạp, hệ thống kiến thức lại một cách cô đọng nhất có thể. kể cả thứ tự các ngôn ngữ mình cũng đã sắp xếp teo thứ tự từ cơ bản nhất tới nâng cao dần, mong các bạn hãy xem qua các bài viết của mình với thứ tự đó. HTML>>JAVASCRIPT/VBSCRIPT>>PHP/ASP>>SQL, mõi bài đều xem từ trên xuống dưới, đừng nên bỏ qua thứ gì, đó là kinh nghiệm mà mình đúc kết được. Và điều quan trọng nhất: Mình luôn mong muốn các bạn có thể giúp mình hoàn thiện nội dung kiến thức bằng cách viết các comment cho bài viết, thẳng thắng đưa ra ý kiến, nêu ra những khuyết điểm để chúng ta cùng sửa chữa. Chân thành cảm ơn các bạn! MỞ ĐẦU Javascript Mở đầu về Javascript Tháng Sáu 02, 2009, 03:11:00 PM gửi bởi nvcnvn Javascript là ngôn ngữ thứ hai mình muốn giời thiệu với các bạn vừa mới bước chân vào con đường webmaster, rất nhiều các cao thủ thiết kế web sử dụng ngôn ngữ này và khiến trang web của họ trỡ nên sống động, có thể nói javascript đã trỡ thành một ngôn ngữ không thể không nhắc tới khi nói tới lĩnh vực thiết kế website. Sau đây là một số thông tinh mà mình sưu tầm để chúng ta còn đi ba hoa JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi HocVui.Net Page 3
  5. September 16, 2009 [JAVASCRIPT] Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gầ n với Self hơn Java. .js (sau này mình gọi tắt javascript là js luôn cho nó ngắn) là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript. Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với ECMA-262 bản 3. ECMAScript là phiên bản chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357. Điều kiện cần để học javascript: Kiến thức cơ bản của HTML và người bạn Notepad Và để có thể đi đâu cũng có thể noi rằng: Tui biết chút ít Javascript, ta hãy viết đoạn javascript đầu tiên của mình, bằng cách mở bất kì một file html nào của mình ra, chàn đoạn code nà vào bất cứ đâu: Code: alert('javascript'); Ví dụ: Code: Test Script alert('javascript'); HocVui.Net Page 4
  6. September 16, 2009 [JAVASCRIPT] Chú ý: Nếu bạn dùng trình duyệt IE, rất có thể bạn sẽ không chạy được script, bạn sẽ thấy một thông điệp tại lề trên của trình duyệt: Click vào cái thanh báo chọn Allow blocked content Thì lúc đó javascript mới có thể chạy! Cú pháp Javascript Tháng Sáu 05, 2009, 07:03:39 AM gửi bởi nvcnvn Javascript thường được hèn vào một trang web, nếu không muốn nói là sinh ra chỉ để chèn vào trang web. Ta có tể chèn Javascript vào html rất đơn giản với cái thẻ script, sau đó chèn code javascript vào bên trong nội dung thẻ script. Code: document.write("Hello World!"); kết quả: Hello World! điều đặt biệt là js có thể xuất ra html. Đây dĩ nhiên là điều không thể thiếu để lập trình web với một ngôn ngữ lập trình ! Code: document.write(" Hello, what's your name!? "); document.write(" My name: "); Bạn hãy tự thử xem nhé! Câu hỏi đặt ra là: tại sao lại không viết mọi thứ một cách bình thường! hay bạn thắc mắc về bất cứ điều gì! Câu trả lời sẽ nằm ở các phần sau! Bây giờ chú ý tới mặt cú pháp! bạn để ý trước, mỗi lần mình viết document.write() thì đó là một câu lệnh, mỗi câu lệnh: Code: Câu lệnh là đơn vị cơ bản của một ngôn ngữ lập trình. Trong trường hợp đặc biệt, nó có thể cũng trở thành một đơn vị thao tác của máy tính điện tử hay còn gọi là một chỉ thị. Vì mức độ phức tạp, việc dùng các chỉ thị để trực tiếp điều khiển máy tính sẽ rất ít thông dụng. Thay vào đó, HocVui.Net Page 5
  7. September 16, 2009 [JAVASCRIPT] người ta ghép một số tổ hợp của các chỉ thị để cho máy thi hành đươc một động tác lớn hơn goi là câu lệnh. Như vậy mỗi câu lệnh bao gồm một hay một số mệnh lệnh máy tính được sắp xếp theo trình tự xác định và nhằm mụch đích ra lệnh cho CPU tiến hành một thao tác cố định có ý nghĩa. Tùy theo ngôn ngữ lập trình, các câu lệnh sẽ có cấu trúc khác nhau và có trật tự sắp xếp nhất định. Trật tự này thường không đổi và được gọi là cú pháp (syntax). Câu lệnh có thể hiểu như là mệnh đề cơ bản có thể được cấu trúc thông qua việc xử dụng các từ khóa (đã được định nghĩa từ trước bởi ngôn ngữ lập trình) hoặc là có thể tạo bởi các chỉ thị từ các cấu trúc ngữ pháp hay cú pháp đã được định nghiã sẵn. Các câu lệnh của một chương trình dùng để chỉ thị cho máy tính biết làm gì, xử lý như thế nào với các dữ liệu và từ đó tiến hành các phép tính toán hay biến đổi dữ liệu để đạt được kết quả. Và kết thúc mỗi câu lệnh, ta phải kết thúc với dấu ; Chèn javascript vào HTML Các ví dụ ở trên đả nêu ra cách chèn javascript vào HTML bình thường với cặp thẻ Nếu bạn có một đoạn javascript, và muốn dùng nó cho nhiều trang web, bạn không cần phải viết lại. Save nội dung javascript (kho6ng có hai thẻ nhé) lại với một file có phần mở rộng là .js (giống như với html là .html thôi) Đặt thêm thuộc tính src vào thẻ script mở: VD: Code: Bên trong thẻ script không cần chứa bất cứ gì nhưng nội dung của file chứa javascript đả được thêm vào trang html. Sau này khi các bạn có đã có thể viết những hàm cho riêng mình, đặt biệt là với những hàm dài, công dụng trên nhiều site, cách làm này rất hữu ít. Các kiểu giá trị Tháng Sáu 09, 2009, 11:24:53 AM gửi bởi nvcnvn Javascript thuộc loại ngôn ngữ mà kiểu của biến được đoán, một số ngôn ngữ cần được khái báo trước kiểu biến như pascal chẵn hạn! Một số kiểu giá trị: Boolean Boolean là gái trị logic có hai giá trị là TRUE hoặc FALSE.(TRUSE có nghĩa là đúng, FALSE là sai) Số là loại giá trị dùng đễ tính toán đó, đừng nói bạn không biết số là gì nha! Số thì có số động, số nguyên 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! HocVui.Net Page 6
  8. September 16, 2009 [JAVASCRIPT] Tiếp theo Tháng Sáu 08, 2009, 03:37:51 PM gửi bởi nvcnvn các bạn đã làm quen với hai khái niệm đầu tiên là hàm và biến, ở đây nếu bạn đã từng học qua bất kì một ngôn ngữ lập trình nào thì mọi việc sẽ được đơn giản hoá, nhưng còn với những người không chuyên như tụi mình, mọi việc sẽ hơi rắc rối phải dành riêng một bài để nói cho rõ! Ví dụ mình có đoạn code 1 Code: alert("aaaaaaaaaaaaaaaaaa"); Với đoạn code tương tự nhưng: 2 Code: thongbao="aaaaaaaaaaaaaaaaaa"; alert(thongbao); và đoạn code thứ hai: 3 Code: thongbao="aaaaaaaaaaaaaaaaaa"; alert("thongbao"); HocVui.Net Page 7
  9. September 16, 2009 [JAVASCRIPT] Cũng một loạt ví dụ tương tự nhưng với nội dung là một con số: 4 Code: alert("1111111111"); và: 5 Code: alert(1111111111); Bây giờ ta gán cho một biến giá trị 11111111111 6 Code: thongbao=1111111111; alert(thongbao); và: 7 Code: thongbao="1111111111"; alert(thongbao); HocVui.Net Page 8
  10. September 16, 2009 [JAVASCRIPT] Chắc các bạn cũng nhận ra, sự đặc biệt mình muốn nhấn mạnh chính là các dấu ("), từ trong phép gán giá trị tới nội dung hàm. Ờ ví dụ 2,3 chúng ta nhận ra ngay sự khác biệt! giữ hai kết quả aaaaaaaaaa và thongbao, thật sự là như thế này: thongbao="aaaaaaaaaaaaa"; dòng này có nghĩa là gán giá trị là chuỗi aaaaaaaaa cho biến thongbao. alert(thongbao); lệnh alert sẽ lấy giá trị mà biến thongbao mang và in ra, trong lúc này thongbao có giá trị là aaaaaaaaa. Nhưng với dòng lệnh: alert("thongbao"); dòng này có nghĩa là in ra chuỗi thongbao. Như vậy, ta thấy được rằng giá trị chuỗi sẽ được đặt trong cặp dấu " Còn với các ví dụ 4,5,6,7 các bạn biết tại sao kết quả lúc nào cũng là những con số một tuy rõ ràng là có sự khác biệt giữa các dùng các dấu " Thật ra là vì : alert("1111111111"); các con số một ở đây hiễu là chuỗi dạng số. alert(1111111111); còn đây là con số 1111111111. Kí tự chữ cái lúc nào cũng là chuỗi, trừ phi là tên riêng của cái gì đó, số mà đặt bên trong dấu ngo85c kép kép thì trở thành chuỗi. Để dùng giá trị của biến thì biến không được đặt trong dấu ngoặc kép giống như ở ví dụ 3, ý của người lập trình là hàm này sẽ in ra giá trị của biến thongbao, nhưng lại nhầm khiến giá trị in ra là chuỗi thongbao. Đây cũng là lí do mà tên biến bắt buộc phải bắt đầu với kí tự chữ cái, thử nghĩ xem, một anh chằng quyết định đặt tên biến là 123 và giá trị của nó là 456 rắc rối sẽ nảy sinh ra ở đây! Còn đây là ví dụ cuối cùng của bài này: 8 Code: a=2001; alert("Anh yêu em từ năm anh "+a); Hoặc là với ví dụ này 9 Code: b="Anh yêu em từ năm anh "; a=15; alert(b+(a+1)+"tuôi"); HocVui.Net Page 9
  11. September 16, 2009 [JAVASCRIPT] Làm ơn đừng cú ý tới cái dấu cộng, chỉ hãy hiểu là dấu + dùng để nối hai thứ đó lại. Ví dụ này vừa thể hiện rỏ mối quan hệ giữa biến, chuỗi và số, tất nhiên là tại sao cần dùng tới biến. ví như ví dụ 8, bạn nói bạn yêu một cô từ năm 2001, lỡ vài năm sau chia tay, bạn muốn dùng lại trang web này tặng cho một cô khác, lúc này bạn thấy mọi việc đơn giản là đỗi năm quen biết lại, nhưng hãy đặt trường hợp cả chương trình không chỉ có một dòng có năm 2001 thì để sữa lại mọi chuyện sẽ đơn giàn hơn nhiều nếu ta dùng tới biến. Còn ở ví dụ 9, các cặp dấu () cũng thể hiện thứ tự ưu tiên cho các bước thực hiện như trong môn toán, mình chỉ viết ví dụ này cho các bạn hiểu thêm. Phép toán, câu lệnh gán. Tháng Sáu 11, 2009, 11:19:25 AM gửi bởi nvcnvn Câu lệnh gán: Lệnh gán là 1 trong những lệnh cơ bản nhất của ngôn ngữ lập trình, trong javascript có dạng: = ; nếu gán biến cho gái trị chuỗi: =" "; cần có thêm cặp dấu nháy. Các bạn sẽ tìm hiểu sâu hơn cách dặt tên biến ở bài cách đặt tên biến 1.Toán tử số học (+[cộng], -[trừ], *[nhân], /[chia] , %[chia lấy dư], ++[tự tăng 1], [tự giàm 1]) + : Phép cộng.(khỏi giả thích) - : Phép trừ.(khỏi giả thích) * : Phép nhân.(khỏi giả thích) /: Phép chia.(khỏi giả thích) % : Phép chia lấy phần dư.VD: 5/3 được 1 dư 2 thì 5%3=2, ++: Phép tăng một đơn vị.VD: 1++=2; 5++=6 : Phép giảm một đơn vị.VD:1 =0; 9 =8 2.Toán tử so sánh == : So sánh bằng. > : So sánh lớn hơn. = : So sánh lớn hơn hoặc bằng. =, không có chuyện =>) 3.Toán tử logic && (and): Giá trị đúng khi cả hai cùng đúng. VD: nếu (anh yêu em) và (em yêu anh) thì cưới ngay . ta chỉ cưới ngay khi hai điều kiện trong ngoặc cùng đúng. || (or) : Giá trị đúng nếu một trong 2 đều đúng. VD:nếu (em đau khổ) hoặc (anh đau khổ) thì chia tay HocVui.Net Page 10
  12. September 16, 2009 [JAVASCRIPT] ! Chỉ cần một trong hai điều kiện đúng là chia tay Đối với chuỗi Toán tử + tượng trưng cho việc nối hai chuỗi lại. VD: a="I am"; b="Nguyen"; c=a+b; thì c có giá trị là chuỗi "I am Nguyen" javascipt Cách đặt tên biến Tháng Sáu 05, 2009, 11:29:25 AM gửi bởi nvcnvn trước tiên, dành cho các bạn mới bước chân vào lĩnh vực lập trình: Biến là đại lượng được đặt tên, dùng để lưu giữ gái trị và gái trị có thể thay đổi trong quá trình thực hiện chương trình. SGK 11/12 Quả thật khái niệm được coi là cơ bản này khá là mơ hồ cho những người mới bắt đầu như chúng ta, nhưng các bạn sẽ từ từ hiểu ỏ mọi vấn đề khi tiếp tục đi sâu vào! Một ví dụ đời thường: Bạn có một bao thuốc lá, bạn lấy cây viết đặt tên nó là a, bạn nhét 10,000 VND vào bao thuốc lá, thì lúc này bao thuốc là có giá trị là 10,000 VND (tất nhiên là không tính tiền cái bao ) rồi một hồi sau, bạn lấy 10,000 ra, bỏ vào tờ 5,000 thì nó có gái trị 5,000 hay là x,y,z trong một bài toán, ta cho x=5, y=6, z=x+y thì Z=11 Còn trong lập trình javascript Biến lại chia làm 2 loại, biến toàn cục và biến cục bộ, đây là hai khái niệm mà nói thiệt, hơi khó là phân biệt ngay lúc này, các chiệu khó từ từ rồi ta sẽ quay lại, bây giờ chúng ta chỉ nhận biết sơ qua! Biến toàn cục: ta khai báo biến toàn cục rất đơn giản, ví dụ ta đặt tên biến là a và giá trị =1. Code: a=1; Biến toàn cục có giá trị trong toàn bộ văn bản biến cục bộ: ta cần thêm từ kháo var vào trước. Code: var a=1; biến cục bộ tất nhiên khác với biến toàn cục là nó chỉ có hiệu lực trong cục bộ , tất nhiên cục bộ ấy là cái gì thì ta sẽ tìm hiều sau ha! Quy tắc đặt tên biến Có 3 quy tắc: Ký tự bắt đầu phải là một chữ cái, còn các ký tự tiếp theo có thể là chữ số, gạch dưới, chữ cái. Ngoài mấy thứ kể trên ra, bạn không nên thêm bết cứ thứ gì khác vào tên biến! Không được có khoản trắng Các biến phân biệt chữ hoa chữ thừơng, vì thế ANH sẽ khác với Anh cũng như anh, để tránh rắc rối, ta nên dùng chữ thường cho tất cả tên biến và dùng dấu _ để phân cách thay cho khoảng trắng. HocVui.Net Page 11
  13. September 16, 2009 [JAVASCRIPT] javascript Function - hàm Tháng Sáu 08, 2009, 11:30:21 AM gửi bởi nvcnvn Hàm à ờ, hàm không có gì là xa lạ với các bạn, trong các ví dụ của mình ở bài đầu tiên cũng có dùng một hàm, đó là hàm alert. Nói đơn giản : Hàm là thứ mà khi ta gọi (gọi có nghĩa là viết ra và cho dòng lệnh chạy) thì nó sẽ thực hiện một số thao tác nhất định. Hàm thường có dạng: functionname() bên trong dấu ngoặc () đôi khi chả có gì, đôi khi là một con số hoặc trong trường hợp hàm alert thì là một chuổi, từ từ ta sẽ giải thích thêm! Ví dụ khi ta dùng hàm alert("thông báo cái gì đó") thì công việc của nó sẽ là: mở ra cái khung, cái khung có cái viền, cài viền màu , nền màu , trong nền có dòng chữ thông báo cái gì đó. Hàm alert là một trong những hàm dựng sẵn trong javascript, có rất nhiều các hàm như thế, các bài sau sẽ nói rõ hơn về từng hàm. bạn cũng có thể viết một hàm co riêng mình. nói thêm về cách tự viết hàm: Mình sẽ không nói về các viết mà sẽ nói cho bạn một ví dụ: Bạn làm một trang web cho người yêu, bạn muốn ít nhất 10 lần sự kiện A suất hiện, Sự kiện A bao gồm: Viết ra dòng chữ anh yêu em Chuyễn dòng chữ thành màu đỏ chuyễn dòng chữ thành màu xanh viết ra dòng chữ em yêu anh không thì tuỳ Ví dụ này dễ hiểu hơn ha! thủ tục vào, ra đơn giản Tháng Sáu 09, 2009, 04:14:41 PM gửi bởi nvcnvn Trước tiêng ta cũng phải biết một, hai cách để nhận dữ liệu và xuất dữ liệu ra màn hình để còn biết đường làm ví dụ! hai thủ tục mà mình dùng để nah65p và xuất dự liệu là hàm Prompt và hàm alert. Ví dụ như ta làm một cái máy tính, tính bình thương của một số nào đó, thì tất nhiên phải có một chỗ nào đó co người dùng điền số vào. hàm Prompt yêu cầu người dùng nhập vào một số thông tin nào đó và sau khi người dùng nhập và nhấn OK, hàm sẽ gán những gì người dùng nhập vào cho một biến. VD: Code: a=prompt("Đây là đối số thứ nhất","Giá trị mặc định"); b=a*a; alert("Bình phương của "+a+" ="+b); Xem ví dụ HocVui.Net Page 12
  14. September 16, 2009 [JAVASCRIPT] Ta phân tích a=prompt("Số thứ nhất",""); ở đây ta thấy a được gán giá trị là hàm prompt, trong hàm prompt yêu cầu hai đối số(đối số chẳng qua là cái gì hàm yêu cầu, hai đối số phân cách nhau bở dấu phẩy) đối số thứ nhất là thông báo sẽ hiễn thị trong ô prompt, thường là câu hỏi, hay yêu cầu nhập gái trị, đối số thứ hai là giá trị mặc định bên trong trường tông tin, nếu không muốn có bất kì giá trị nào bên trong đây, ta đặt ngay sao dấu phầy cặp dấu nháy. Hàm alert thì quá quen thuộc chắc không cần nói nữa! javascript - event Tháng Sáu 08, 2009, 05:09:39 PM gửi bởi nvcnvn Bạn còn nhớ bài Event của HTML không, chính là nó đó! Các bạn nên xem qua trước khi đi vào. Khó mà hiểu được bài này nếu các bạn không xem qua nó! Event dịch ra nghĩa Tiếng Việt chắc là Sự kiện. ví dụ như sự kiện onclick có nghĩa là khi click chuột. Khi click chuột sẽ có một cái gì đó hiện ra. Trong javascript, giả sử bạn có một đoạn code như thế này( đã chèn vào file html nhé): Code: alert("lần thứ nhất"); alert("lần thứ hai"); alert("lần thứ ba"); Viết ra như thế thì sẽ lần lượt hiện ra ba bảng không báo, nhưng nếu bạn muốn tuỳ theo hành động của người dùng, scpit sẻ chạy thì phải dùng tới event, dĩ hiên tính tưng tác của website phụ thuộc vào vấn đề này! một điều chú ý: bạn còn nhớ trong các quy tắc XHTML, ta gái trị của các sự kiện phải đạt trong cặp dấu ", nếu đoạn script cũng có chứa dấu nháy kép, mọi thứ sẽ bị nhầm lẫn, ta cần đổi dấu nháy kép của scpit thành dấu nháy đơn. VD: Code: HocVui.Net Page 13
  15. September 16, 2009 [JAVASCRIPT] Vấn đề này nói tới đây thì đã rỏ, các bạn chĩ việc xem kĩ lại bài HTML Event. Các hàm sẽ dùng trong các ví dụ Tháng Sáu 17, 2009, 04:10:09 PM gửi bởi nvcnvn 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 Xem ví dụ prompt(): Mở một hộp thoại cho phép người sử dụng hông tin vào Xem ví dụ document.write(): in ra màn hình với nội dung đặt bên trong dấu ngoặc kép Một số hàm hay dùng trong JavaScript Tháng Hai 12, 2009, 12:07:38 PM gửi bởi nvcnvn * parseInt("chuỗi"): biến chuỗi thành số nguyên * parseFloat("chuỗi"): biến chuỗi thành số thực * Number( ): chuyển đổi một "đối tượng" sang dạng số. Nếu thất bại trả về NaN (not a number) * isNaN( ): kiểm tra giá trị. Nếu không phải số trả về true, ngược lại nếu là số trả về false HocVui.Net Page 14
  16. September 16, 2009 [JAVASCRIPT] * eval("chuỗi"): biến chuỗi thành biểu thức tính toán được, hoặc biến chuỗi thành lệnh thi hành được như là mã lệnh của JS. * Math.PI : hằng số PI = 3.14 * Math.sqrt(a) : căn bậc 2 của a. * Math.pow(x,y) : tính xy * Math.random() : tạo số ngẫu nhiên >0 và //Dòng chú thích a alert("Code javascript"); //dòng chú thích b alert("Code javascript"); Nhiều chú thích cùng lúc Khi mà bạn có một chú tích quá dài và việc viết trên cùng một hàng trỡ nên quá khó khăn, hãy dùng hai kí tự /* để bắt đầu những dòng chú thích, và đánh dấu kết thúc bằng hai kí tự */ VD: Code: /* Những dòng chú thích không nhất thiết rằng phải nằm cùng hàng */ alert("Code javascript"); HocVui.Net Page 15
  17. September 16, 2009 [JAVASCRIPT] CẤU TRÚC RẼ NHÁNH cấu trúc rẻ nhánh - câu lệnh if Tháng Sáu 11, 2009, 04:29:50 PM gửi bởi nvcnvn Đọc bài này các bạn cần xem lại: các kiểu giá trị,Phép toán, câu lệnh gán. Trong cuộc sống, có nhiều việc ta chỉ làm khi thoả mản một số điều kiện cụ thể. Ví dụ: Một ông bố hứa với con trai: _Nếu con đỗ đại học thì bố sẽ thưởng cho con một chiếc xe. Chừng nào mà điều kiện con đỗ đại học thì ông bố mới lo tới chuyện thưởng cho con một chiếc xe . Tới một ngày kia, ông bố lại nói với cậu con trai. _Nếu con đỗ đại học thì bố sẽ thưởng cho con một chiếc xe, nếu không thì đi nghĩa vụ quân sự. Ở câu nói thứ nhất của ông bố, không nói rõ thi rớt thì có chuyện gì, còn ở câu thứ ai có nói rõ. Trong lập trình tuy hình thức từng ngôn ngữ hơi khác nhau nhưng cũng có hai dạng cơ bản của câu điều kiện, ta chỉ bàn tới câu lệnh này trong phạm vi javascript if-then if( ) { câu lệnh 1; câu lệnh 2; } Nếu chỉ có một câu lệnh sau vế điều kiện thì ta không cần cặp dấu ngoặc {}, nhưng luôn có có hiện diện của cặp dấu {} là một thói quan tốt, giúp tránh nhầm lẫn! if-then-else if-then if( ) { //các câu lệnh sẽ thực hiện nếu điều kiện thoả mản câu lệnh 1; câu lệnh 2; }else{ //các câu lệnh thực hiện khi điều kiện không thoả mản câu lệnh 1; câu lệnh 2; } Cách xác định đúng hay sai Ví dụ ta có đoạn script: Code: a=3; b=5; if(a<b) { alert("Đúng"); }else{ HocVui.Net Page 16
  18. September 16, 2009 [JAVASCRIPT] alert("Sai"); } Trường hợp này thì kết quả sẽ là bản thông báo với nội dung Đúng Nhưng hãy xét thêm trường hợp: Code: a=3; b=5; if(a //promt để nhập dữ liệu gán cho biến c c=prompt("Nhập một ký tự số từ 0 >9:",""); //vì một con số 1 chữ sẽ có giá trị từ 0 >9 if((c>=0)&&(c Tự bản thân toán tử = đã là một toán tử hoặc else if Tháng Sáu 13, 2009, 05:02:03 PM gửi bởi nvcnvn ELSE IF cũng tương tự như IF, nhưng thật ra là một câu lệnh if ngay sau vế else. tại sao lại dùng tới ư, xem ví dụ nhé: Nếu điểm Trung Bình năng của con từ 9 trở lên thì quà của con sẽ là một chiếc Novol, từ 7 tới dưới 9 là một chiếc Martin, còn mà dưới 7 là có chuyện đó! . để thể hiện thông điệp đó trong javascript: Code: diem=prompt("Điểm của bạn",""); if(diem>=9) { alert("Được một chiếc Novol"); }else if(diem>=7) { HocVui.Net Page 17
  19. September 16, 2009 [JAVASCRIPT] alert("Được một chiếc Martin"); }else { alert("Tiêu rồi"); } Click Xem bạn thấy cấu trúc else if xuất hiện ở phần giữa chương trình không hãy xem thử ví dụ với điểm của bạn từ 9 trở lên, để thấy được khác biệt, ta xem ví dụ này: Code: diem=prompt("Điểm của bạn",""); if(diem>=9) { alert("Được một chiếc Novol"); } if(diem>=7) { alert("Được một chiếc Martin"); }else { alert("Tiêu rồi"); } Click Xem Ta thay cấu trúc else if với một câu if, điều gì sẽ sảy ra khi ta nhập một điểm từ 9 trở lên. Vân, nó sẽ hiện ra tới hai hộp thông báo, một chiếc Novol và một chiếc Martin, lời nhỉ. Sở dĩ là vì ở đoạn con dùng cấu trúc else if có nghĩ là khi trường hợp điểm từ 9 trở lên đã thoả mản lần if đầu tiên, lần else if chỉ diễn ra khi lần if đầu tiên không thoả mản, nói một cách khác, đó là 2 vế của 1 câu lệnh. Còn ở đoạn code thứ hai, đó là hai câu lệnh riêng biệt, nếu điểm từ chính trở lên, thoả điều kiện cho câu lệnh 1, thì tất nhiên cũng lớn ơn 7 và thoả luôn điều kiện câu lệnh 2. Nếu bạn không dùng tới cấu trúc else if mà muốn dùng toàn câu if thì ta phải thêm điều kện vào câu lệnh, ví như với đoạn code 2, ta cần thêm vào điều kiện như thế này: Code: diem=prompt("Điểm của bạn",""); if(diem>=9) { alert("Được một chiếc Novol"); } if((diem>=7)&&(diem<9)) HocVui.Net Page 18
  20. September 16, 2009 [JAVASCRIPT] { alert("Được một chiếc Martin"); } if(diem var i=0; while(i I LOVE YOU "); i=i+1; } Không tính hai thẻ đóng và mở của tag thì ta có 6 dòng, đoạn js này dài 6 dòng nhưng sẽ in ra được 1000 câu anh yêu em với định dạng như trên, bắt đầu phân tích nào: dòng var i=0; khai báo biến đếm (vì nó là để đếm xem bao nhiêu lần rồi nên gọi là biến đếm thôi) i và gán cho nó giá trị =0; dòng while(i<1001) dòng này là linh hồn của cả đoạn, chữ while trong tiếng anh có nghĩa là trong khi, còn với cú pháp javascript trên thì dịch cả câu là : khi điều kiện còn đúng thì làm đi, làm lại cái trong cặp dấu ngoặc móc, với câu lệnh trên của chúng ta thì điều kiện là i<1001. Hàm document.write có vài điểm hơi lạ, các bạn chắc hẵn còn nhớ là để tránh sự nhần lẫn giữa các dấu nháy, nếu bạn muốn thêm vào trong hàm các phần tử html với các gái trị bao quanh dấu nháy thì phải thay các dấu nháy đôi bằng HocVui.Net Page 19
  21. September 16, 2009 [JAVASCRIPT] dấu nháy đơn, nhưng tại sao mình lại dùng được các dấu náy kép được, dĩ nhiên các bạn sẽ đoán được là nhờ các dấu \ ngay phía trước các dấu nháy kép, đây là một số lưu ý để sao này các bạn chắc hẵn sẽ cần dùng tới. Dòng i=i+1; đây là dòng tăng giá trị của i lên, phải có dòng này thì tới một lúc nào đó vòng lặp mới ngưng chứ! Một dạng vòng lặp khác là vòng lặp for. Bạn hãy xem ví dụ với cùng chức năng với đoạn code trên: Code: for(i=0;i I LOVE YOU "); } tất cả vòng lặp for đều như thế này: for(phần khởi tạo;phần điều kiện;tăng hay giảm giá trị) Phần khởi tạo: bạn khái báo biến đếm và gán giá trị ban đầu cho nó luôn. Phần điều kiện: bạn đặt ra điều kiện. Phần tăng/giảm gái trị: đây là điềm khác biệt nhất với vòng lặp while, trong khi vòng lặp while thì cần một câu lệnh để tăng/giảm giá trị cho biến đếm, thì bản chất vòng lặp for đã có sẵn điều này. Mình trong ví dụ trên, điều kiện mìh đã đạt theo kiểu toán tự rút gọn ( ++ có nghĩa là tự tăng lên 1, bạn nên xem lại bài toán tử) Chú ý: mọi con đường đều về La Mã, ở các ví dụ trên mình chỉ cho tăng biến đếm lên, trong khi vẫn có thể làm như thế với các giảm biến đếm xuống, chỉ cần linh hoạt một chút: Code: for(i=1001;i>1;i ) { document.write(" I LOVE YOU "); } hãy linh hoạt và vận dụng thích hợp cho mục đích của bạn, đó là việc mà chỉ con người mới làm được. break, dừng vòng lặp Tháng Sáu 14, 2009, 07:34:45 PM gửi bởi nvcnvn Thử đặt ra trường hợp ta có một chương trình học toán cho trẻ, loại học bảng cửu chương ấy(ví dụ bảng cửu chương 2), chương trình như thế này: _Mỗi lần chương trình sẽ in ra màn hình câu: 2x1=? _Một prompt sẽ xuất hiện, yêu cầu trẻ nhập số vào. _Nếu đúng thì chương trình tiếp tục vè sẽ kết thúc cho tới khi tớ 2x10. _Nếu sai thì chương trình sẽ dừng, và bảo trẻ nên học lại bài. Giải pháp: _Chạy một vòng lặp từ một tới 10, dùng cấu trúc if để xác định đúng sai. Nhưng làm sao ta có thể dừng vòng lặp lại khi kết quả sai. _Lệnh break sẽ là giải pháp, nó sẽ bẻ gãy vòng lặp ngay khi chương trình phát hiện nó. HocVui.Net Page 20
  22. September 16, 2009 [JAVASCRIPT] Code: for(i=1;i MẢNG Mảng trong javascript Tháng Sáu 09, 2009, 11:40:10 AM gửi bởi nvcnvn Nếu bạn đã từng học qua bất cứ ngôn ngữ lập trình nào, thì chắc hẵn sẽ không xa lạ gì với mãng! Còn nếu bạn là người mới vào nghề như mình, thì đây là một khái niệm mới, cũng khá khó đấy! Mảng gồm có hai loại, mảng một chiều và mảng nhiều chiều, trong mãng nhiều chiều thông dụng nhất ta dùng tới mảng hai chiều, vì thế bài này chỉ nói về mảng một chiều và mảng hai chiều. mảng một chiều là dãy hữu hạn các phần tử cùng kiểu. Mảng được đặt tên và mỗi pần tử có một chỉ số. Đề mô tả mảng một chiều cần xác định kiểu của phần ử và cách đánh số các phần tử của nó. Nhớ lại ví dụ về biến mà mình mô tả với bao thuốc lá ớ, bây ta ví dụ trường hợp ta có 10 bao thuốc là và bạn quyết định đặt tên cho chúng là bao1,bao2, ,bao8,bao9,bao10, với mục đích là mỗi bao chứa một cái gì đó, tới khi nào cần cái gì thì lấy ra mà dùng. Còn mảng, mảng chính là cả cây thuốc lá! , đơn giản chỉ là một cây thuốc là, bên trong có những bao thuốc lá! giải thích cho dài dòng, mảng 1 chiều đơn thuần là một tập hợp các biến, và các biến có thứ tự thay vì tên! tạo một mảng: Ví dụ toạ một mảng đơn giản Code: mang=Array("a","b","c"); alert(mang[0]); Thử in ra phần tử thứ nhất của mảng(kết quả sẽ là a) Đây cũng là một các để khia báo mảng, các phần tử của mảng được đặt trong dấu nháy kép và chúng được ngăn cách nhau giữa dấu (,) HocVui.Net Page 21
  23. September 16, 2009 [JAVASCRIPT] Còn đây là cách thứ hai, khá dễ nhìn! Bạn hãy khai báo mảng, không cần khai báo nội dung bên trong: Code: mang=Array(); sau đó, khai báo từng phần tử bằng cách này: Code: mang[0]="a"; mang[1]="b"; mang[2]="c"; mang[3]="d"; Chú ý: Trong javascript phần tử đầu tiên của mảng có thứ tự là 0. Một số hàm làm việc với mảng: .length: Xác định số phần tử của mảng. Tại sao lại dùng đến mảng Tháng Sáu 14, 2009, 08:19:13 PM gửi bởi nvcnvn tại sao lại dùng đến mảng Câu trả lời: mảng là cách tuyệt vời để quản lí dữ liêu. Người ta xây dựng khá nhiều các hàm để làm việc với mảng Xét bài toán: Tính tổng số tiền thu được trong tuần, tính và in ra màn hình số ngày có thu nhập cao hơn trung bình, thấy ngay nếu dùng biến đơn giản, ta cần tới 7 biến để lưu trử thu nhập của mỗi ngày, một biến b để lưu trử số ngày có thu nhập cao hơn TB, biến b lưu trữ giá trị Tb để so sánh. Để người ta nhập vào 7 biến này bằng prompt. Sau đó tính trung bình. Cho một dãy 7 câu lệnh if nếu ngày nào có thu nhập cao hơn TB thì biến b tăng lên một đơn vị. Code: var a=0; var b=0; t1=prompt("Thu nhập ngày thứ nhất",""); t2=prompt("Thu nhập ngày thứ 2",""); t3=prompt("Thu nhập ngày thứ 3",""); t4=prompt("Thu nhập ngày thứ 4",""); t5=prompt("Thu nhập ngày thứ 5",""); t6=prompt("Thu nhập ngày thứ 6",""); t7=prompt("Thu nhập ngày thứ 7",""); b=(eval(t1)+eval(t2)+eval(t3)+eval(t4)+eval(t5)+eval(t6)+eval(t7))/7; alert(b); if(t1>b) HocVui.Net Page 22
  24. September 16, 2009 [JAVASCRIPT] { a=a+1 } if(t2>b) { a=a+1 } if(t3>b) { a=a+1 } if(t4>b) { a=a+1 } if(t5>b) { a=a+1 } if(t6>b) { a=a+1 } if(t7>b) { a=a+1 } alert("Số ngày có thu nhập cao hơn Trung bình tuần là "+a); Phù,7 ngày đã xong, vậy thì bửa sau hết tháng, tính cả tháng! Cắn lưỡi quá Mảng sẽ giúp ta rút ngắn quá trình trên, nhưng tất nhiên là không phải chỉ dùng riêng mình nó. Xem lại một chút bài vòng lặp, ta có thể dùng vòng lặp để lướt qua cả mảng, gán giá trị cho cả mảng. Nói chung là khá lẹ! _ Hướng đi là cho vòng lạp duyệt qua mãng, vừa duyệt vừa gán giá trị Code: //Khai báo mang là phần tử mảng mang=Array(); //Số ngày yêu cầu, giả sử là 30 songay=5; //biến tổng lưu giữ giá trị tong so tien thu đuoc tong=0; //biến tb lưu giữ giá trị trung bình tb=0; //biến num lưu gữ số ngày có thu nhập cao hơn num=0; //bắt đầu vòng lặp for(i=0;i<songay;i++) { HocVui.Net Page 23
  25. September 16, 2009 [JAVASCRIPT] mang[i]=prompt("Thu nhập của ngày "+(i+1),""); //mỗi lần vòng lặp chạy, biến tổng được tăng lên tong=eval(tong)+eval(mang[i]); } tb=tong/songay; for(i=0;i tb) { num=num+1; } } alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình "+tb+" là "+num); Ví dụ trên hơi rắc rối nhưng nếu xem xét kĩ, việc một mảng duy nhất thay thế công dụng của 7 biến quả là lời nhỉ! Array function - các hàm làm việc với mảng Tháng Sáu 17, 2009, 04:24:38 PM gửi bởi nvcnvn Trước tiên mình tạo một mảng và nó sẽ được dùng trong suốt bài này: Code: mang=Array(); mang[0]="anh"; mang[1]="yêu"; mang[2]="em"; Các thuộc tính và Method để làm việc với đối tượng đều có dạng: .xxx Trong đó xxx chính là các thuộc tính và Method(nhớ là có dấu chấm ha) length Trả về số phần tử của mảng >Xem join tạo một chuổi từ một mảng, các phần tử chuỗi sẽ các nhau kí tự bên trong cặp () Code: mang.join("_") Xem HocVui.Net Page 24
  26. September 16, 2009 [JAVASCRIPT] reverse Trả lại một mảng với thứ tự các phần tử bị đảo ngược Code: mang.reverse() Xem sort Trả lại mảng mà các phần tử được sắp xếp theo bảng chữ cái Xem concat Nối nhiều phần tử vào một mảng Code: mang.concat("nhiều","lắm") Xem pop trả lại phần tử cuối cùng và xoá nó ra khỏi mảng Xem HocVui.Net Page 25
  27. September 16, 2009 [JAVASCRIPT] splice chia nhỏ mảng ra, hàm này nhận vào 2 đối số, đối số thứ nhất là vị trí của phần tử bắt đâu, đối số thứ hai là vị trí kết thúc. Code: mang.splice(1,2) Xem Mảng hai chiều javascript Tháng Sáu 17, 2009, 10:50:43 AM gửi bởi nvcnvn Một khi đả hiểu được mảng một chiều, thì sẽ rất đơn giản đê hiểu về mảng hai chiều. Mảng hai chiều thật chất chỉ là một mảng, mà mỗi phần tử lại chúa một mảng khác. Ví dụ thực tế có thể là cái bàn cờ hay hệ trục toạ độ. Khai báo cũng khá đơn giản mang2c=Array(Array(1,2,3),Array("a","b","c")) Có thể khái báo một cách đơn giản hơn bằng cách: Code: var mang1=Array(1,2,3); var mang2=Array("a","b","c") var mang2c=Array(mang1,mang2); //chạy và xem thử kết quả nhé alert(mang2c[0][0]); Duyệt qua mảng 2 chiều với hai vòng lặp Ta sùng hai vòng lặp để duyệt qua mãng, vòng lặp thứ nhất chứa vòng lặp thứ hai, khi vòng lặp thứ nhất chạy một lần duyệt phần tử thứ nhất của mảng lớn (chính là mang1 trong ví dụ) thì vòng lặp thứ hai sẽ duyệt hết các phần tử trong mang1, tiếp theo vòng lặp lớn sẽ chuyễn tới phần tử thứ 2, vòng lặp nhỏ HocVui.Net Page 26
  28. September 16, 2009 [JAVASCRIPT] Mảng dựng sẵn Tháng Sáu 23, 2009, 09:09:37 AM gửi bởi nvcnvn Khi trình duyệt đọc mo655t trang HTML, no1 tự động tạo ra các mảng, các mảng đó chính là các HTML Element, và ta có thể dùng chúng như một cách tham chiếu tới đối tượng ta muốn. Ví dụ như ta có một loạt các hình ảnh trong trang với các tag image, trình duyệt sẽ tạo ra một mảng để lưu trử các imagr này. Để tham chiếu tới một iamge nào đó ta: document.images[ ] trình duyệt đọc code theo thứ tự từ trên xuống dưới, từ trái qua phải, nó phát hiện cái náo trước thì thứ tự nhỏ nhất. VD: ta có đoạn code của trang html như sau: Code: Hocvui.net - Trang ví dụ Ờ đây, ngoài cách tham chiếu tới bất cứ phần tử nào trong form, để đặt giá trị chẵn hạn, ví dụ như là text_03 chẳng hạn. ta có thể viết một đoạn code bình thường như sau: Code: document.form_02.text_03.value="Một cách tham chiếu"; hay theo những thông tin mới về những mảng dựng sẵn Code: // đạon này dịch là: tìm trong văn bản, form thứ hai, phần tử thứ nhất của form, đặt giá trị document.forms[1].elements[0].value="Một cách tham chiếu"; Chú ý:nếu các bạn có ý định chạy hai đạon javascript kia trên đoạn mã html mình lấy ra ví dụ, các bạn cần đặt đoạn javascript bên dưới cả hai form, điều này là vì trình duyệt đọc code theo thứ tự từ trên xuống dưới, từ trái qua phải khi nó bắt gặp d9aon5 js, nó sẽ chạy mã khi, trong khi đó nó chưa tìm thấy những đối tượng mà js sẽ làm việc! HocVui.Net Page 27
  29. September 16, 2009 [JAVASCRIPT] Đây chỉ là một vài trong số rất nhiều mảng dựng sẵn, và thật ra các bài hướng dẫn javascipt của hocvui.net cũng chỉ mới nói tới những gì mà mình nghĩ là gần gủi và cần thiết nhất đối với các bạn. Một câu hỏi trong lúc mà mình học javascript là làm sao biết những mảng nào được dựng sẵn, làm sao biết những đối tượng nào có những thuộc tính nào. Để giải thích cho điều đó ta hãy tìm câu hỏi với google và từ kháo HTML DOM. Bảo đảm với một chút vốn tiếng Anh, bạn sẽ giải đáp được hết những thắc mắc trên. và tất nhiên, nếu có khả năng, mình sẽ tìm, tổng hợp lại các tải liệu đó và dịch ra tiếng Việt để phục vụ cho những người Việt Nam ham học hỏi. Dưới đây mình có một mô hình thiếu sót mô tả DOM (Document Opject Model) Các bạn hãy cố gắng tìm hiểu thêm nha. HocVui.Net Page 28
  30. September 16, 2009 [JAVASCRIPT] JS FUNCTION - HÀM Tự soạn thảo các hàm javascript Tháng Sáu 18, 2009, 03:10:34 PM gửi bởi nvcnvn Một số hàm wen thuộc với các bạn cho tới lúc này chính là các hàm alert,prompt, các hàm này là những hàm đã có sẵn trong javascript, và bạn cũng có thể tự soạn thảo cho mình một hàm. Hàm - function các bạn tự viết giống như là một dạng viết tắt, qua nhiều ví dụ, ví dụ viết ra hàng ngàn câu I Love You, qua công cụ là các ngôn ngữ lập trình ta đã rút ngắn mọi việc chỉ còn vài hàng, nhưng sẽ không hay nếu bạn lặp đi lặp lại nhiều lần dù chỉ một đoạn code đó trên trang web. Xét ví dụ Bạn hãy chắc chắn biết cách viết ra 1000 dòng I Love You với vòng lặp while. Lần này bạn muốn tô điểm thêm cho trang web bằng cách, nói một nghìn lần I Love You, sau đó là một bức ảnh trái tim, rồi lại nói 1000 lần I Love You , lại ảnh trái tim, 1000 lần I Love You , một đoá hoa, Nói chung là phải vài lần 100 lần cách nhau, và nói cách riêng :)) là ta phải lặp đi lặp lại đoạn code: Code: for(i=0;i I LOVE YOU "); } Ở nhiều phần của site, điều này sẽ làm cho ta khó hiệu chỉnh, giả như khi tình yêu bớt mặn nồng, bạn muốn giàm số lần nói anh yêu em xống còn 500, vậy là phải moi cho bằng hết ra mà sửa. Và nói mọi thứ cho dài dòng thì câu hàm là một giải pháp chắc các bạn cũng đoán ra hàm - function cú pháp khai báo có dạng như thế này: Code: function () { //Nội dung các câu lệnh sẽ nàm trong hai dấu ngoặc nhọn này } Ví dụ mình muốn tạo hàm say_Iloveyou(quy tắc đặt tên hàm giống như quy tắc đặt tên biến) với công dụng là viết ra 1000 câu I Love You thì code sẽ là: Code: function say_Iloveyou() { for(i=0;i I LOVE YOU "); } } Và để chạy hàm này, bạn hãy đặt dòng: HocVui.Net Page 29
  31. September 16, 2009 [JAVASCRIPT] Code: say_Iloveyou(); ở bất cứ đâu các bạn muốn in ra 1000 câu tình cảm đó. và khi muốn sửa lại chỉ còn 500 hay 5 câu gì đó, thì bạn chỉ việc sửa lại code bên trong function. Hảm của chúng ta giống như các hàm khác, sẽ rất hữa dụng khi chúng ta kết hợp với các sự kiện. Hàm say_Iloveyou() không giống những hàm mà ta đả biết như là alert hay prompt, nó không hề nhận vào một tham số nào trong cặp dấu ngoặc (). Trong bài sau ta sẽ tìm hiểu thêm vấn đề này. Hàm và các tham số Tháng Sáu 19, 2009, 09:16:08 AM gửi bởi nvcnvn Giống như hàm alert với việc nhận vào một tham số đặt bên trong cặp ấu (), ta có thể dễ đàng và lin hoạt thay đổi nội dung xuất hiện bên trong hộp thoại. Quay lại ví dụ về hàm viết 1000 câu I Love You. Hãy đặt ra trường hợp tương tự như ở ví dụ trước, bạn muốn in ra nhiều dòng chữ I Love You, nhưng số lượng không đều nhau (ví dụ: lần đầu bạn in 100 câu, lần hai in 390 câu, lần 3 in 5 câu chẵn hạn). Dĩ nhiên đoạn code củ của bạn: Code: function say_Iloveyou() { for(i=0;i I LOVE YOU "); } } sẽ không thể nào tuỳ chỉnh như ý muốn của bạn và công việc của chúng ta sẽ không còn tối ưu nữa. Thật may, có một cách để cho các hàm của bạn linh động hơn với việc dùng những tham số. Hãy nhìn vào ví dụ: Code: function say_Iloveyou(num) { for(i=0;i I LOVE YOU "); } } Hãy chú ý dòng đầu tiên, cái bạn cần nhìn là từ đặt trong cặp dấu (), từ đó là một biến lưu giữ giá trị mà bạn cần dùng trong hàm. Sau đó hãy để mắt nhìn qua dòng bắt đầu vòng lặp (hàng thứ 3), bạn có nhận thấy điều gì khác với đoạn code củ của chúng ta chứ. D(ó chính là thay vì con số 1001 mình thay bằng từ num là từ nằm trong cặp dấu ngoặc kép trên phần khai báo tên hàm. Điều đó có nghĩa là gì!? Code: HocVui.Net Page 30
  32. September 16, 2009 [JAVASCRIPT] fo r(i=0;i Javascript Funtion function say_Iloveyou(num) { for(i=0;i I LOVE YOU "); } } Nói 9 lần I Love You say_Iloveyou(9); Nói 99 lần I Love You say_Iloveyou(99); Nói 999 lần I Love You say_Iloveyou(999); Đưa nhiều tham số vào hàm Giống như hàm prompt nhận vào tới hai tham số, ta tất nhiên có thể đưa vào thêm các tham số trong hàm để hàm trở nên linh động hơn. Tất cả hàm trên của chúng ta đều in ra câu I Love You, với định dãng in dậm và màu hồng, ta có thể thêm tham số vào để thay đổi định dạng và màu chữa, hoặc là thay đổi luôn cả câu chữ. Mọi việc cần làm là đặt tham số đúng chỗ. Sau đây là ví dụ thay đỗi luôn cả nội dung câu: Code: function say_Iloveyou(num,cau) HocVui.Net Page 31
  33. September 16, 2009 [JAVASCRIPT] { for(i=0;i Chỉ cần thêm một tham số cau vào, tham số này cụng lưu trữ một giá trị mà bạn cần làm việc, nếu mình muốn in ra bảy lần câu "Anh ghét em" chẳng hạn, thì mình sẽ gọi hàm như thế này: Code: say_Iloveyou(7,"anh ghét em "); Chú ý là nếu giá trị gán vào cho tham số là chuỗi thì nó cần đặt trong cặp dấu nháy "" Trên đây chỉ là những hàm đơn giản nhất, với những code đơn giản nhất, chỉ với những kiến thức thông thường như thế này thôi, nhưng với bộ óc con người, chúng ta sẽ phát triễn nó lên một tầm cao mới. Biến toàn cục và biến cục bộ Tháng Sáu 19, 2009, 09:56:47 AM gửi bởi nvcnvn Vấn đề của hai loại biến toàn cục và cục bộ mình đã trình bày ngay từ đầu! Nhưng chỉ giải thích sơ qua là khác nau ở cái tên và không đi sâu thêm, bởi muốn hiểu vấn đề này, chúng ta cần phải đi qua phần hàm - function để có thể hiểu rỏ nhất. Nhắc lại chút: Biến cục bộ( ngay từ từ cục bộ củng cho biết nó chỉ hoạt động ở một bộ phận nhất định) Biến cục bộ khi khai báo bắt đầu với từ kháo var Biến toàn cục đương nhiên khác với biến toàn cục ở chỗ nó có giá trị ở toạn bộ phận. Biến toàn cục khi khai báo không có từ khoá var. Trong các ví dụ ít khi nào mình dùng tới từ khoá var, bởi vì đơn giản mình muốn các ví dụ đơn giản nhất có thể, dĩ nhiên, các ví dụ đó cũng không hề bị ảnh hưởng bởi việc dùng loại biến nào. Xét lại ví dụ của loạt bài mảng nói về công dụng : Tính tổng số tiền thu được trong tuần, tính và in ra màn hình số ngày có thu nhập cao hơn trung bình. Đoạn code của chúng ta đây: Code: //Khai báo mang là phần tử mảng mang=Array(); //Số ngày yêu cầu, giả sử là 30 songay=5; //biến tổng lưu giữ giá trị tong so tien thu đuoc tong=0; //biến tb lưu giữ giá trị trung bình tb=0; HocVui.Net Page 32
  34. September 16, 2009 [JAVASCRIPT] //biến num lưu gữ số ngày có thu nhập cao hơn num=0; //bắt đầu vòng lặp for(i=0;i tb) { num=num+1; } } alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình "+tb+" là "+num); Đó là đoạn code củ, bây giờ mình đã biết về hàm, điều đầu tiên mình nghĩ tới là tuỳ biến để đoạn code không chỉ làm việc cho 7 ngày mà có thể là 1 tháng hay 2 tuần tuỳ ý! code lúc này là: Code: function tinhtoan(numngay) { //Khai báo mang là phần tử mảng mang=Array(); //Số ngày yêu cầu, lúc này được gán với giá trị numngay là tham số duy nhất của hàm tintoan songay=numngay; //biến tổng lưu giữ giá trị tong so tien thu đuoc tong=0; //biến tb lưu giữ giá trị trung bình tb=0; //biến num lưu gữ số ngày có thu nhập cao hơn num=0; //bắt đầu vòng lặp for(i=0;i tb) { num=num+1; } } alert("Số ngày trong "+songay+" có thu nhập cao hơn trung bình "+tb+" là "+num); } HocVui.Net Page 33
  35. September 16, 2009 [JAVASCRIPT] bây giờ bạn hãy bắt đầu gọi hàm này ở bất cứ đâu trên trang web. Nhưng hãy thêm một số dòng bên dưới như mình đây: Code: // Ở đây mình gọi hàm để tính toán trong 9 ngày tinhtoan(9); // Đưa ra số ngày đã tính toán alert("Số ngày tính toán: "+num); // thông báo riêng tổng thu nhập alert("tổng thu nhập: "+tong); // và mức thu nhận trung bình alert("thu nhập trung bình: "+tb); Sau khi bạn nhập đầy đủ thông tin, cả thảy sẽ có 4 hộp thông báo, 1 vốn dĩ của hàm, 1 Đưa ra số ngày đã tính toán, 1 thông báo riêng tổng thu nhập, 1 mức thu nhận trung bình. Nhưng mọi vệc thường hay chuyễn hướng với từ nhưng Ta thay đổi một số dòng ở các đoạn khai báo function, cụ thể là thêm từ kháo var vào trước dòng khai báo hai biến, tong và tb Code: //Khai báo mang là phần tử mảng mang=Array(); //Số ngày yêu cầu, giả sử là 30 songay=numngay; //biến tổng lưu giữ giá trị tong so tien thu đuoc var tong=0; //biến tb lưu giữ giá trị trung bình var tb=0; //biến num lưu gữ số ngày có thu nhập cao hơn num=0; rồi hãy gọi hàm và thêm một số dòng như trường hợp trên, mọi thứ sẽ không như bình thường nữa. Đầu tên là một hộp thông báo của hàm, thứ hai là hộp thông báo Đưa ra số ngày đã tính toán, còn hai hộp thông báo kia sẽ "vắn bóng" Đơn giãn vì khi khai báo từ kháo var trước hai biến tong và tb, lúc này chúng trở thành hai biến cục bộ, và như đã nó, biến cục bộ chỉ có gái trị trong một bộ phận(cụ thể trường hợp này chính là hàm tintoan), khi ta gọi hai biến này ngoài cấu trúc hàm, javascript sẽ cho rằng những hàm này chưa tồn tại, chưa được khai báo( vốn dĩ ta đã khai báo trong hàm) và lỗi sẽ sảy ra khiến hai hợp thoại không thể xuất hiện. Lại nhấn mạnh một lần nữa, tuỳ theo mục đích của trương trình, chính lập trình viên sẽ quyết định xem dùng những gì cho thích hợp nhất với chương trình. Và đó là một yếu tố không thể thiếu, yếu tố con người! javascript - function return Tháng Sáu 19, 2009, 02:54:29 PM gửi bởi handsome Bạn có nhớ những hàm tính toán không, giống như Math.sqrt() nên trong bài Một số hàm hay dùng trong JavaScript HocVui.Net Page 34
  36. September 16, 2009 [JAVASCRIPT] Bản thân các hàm này mang luôn một giá trị. Có nghĩa là ta có thể lấy ngay: 5 + Math.sqrt(4) //bằng mấy nhỉ Các hàm từ trước tới giờ ta viết chỉ mới thực hiện hành động mà ta muốn, chứ chưa hề mang giá trị nào. Để có thể gán cho hàm một giá trị ta dùng lệnh return. Xét hàm đơn giản tính tồng và đưa ra màn hình hai số. Code: function tinhtong(a,b) { alert(a+b) } function tinhtong(a,b) { alert(a+b) } Dùng return cho hàm này: Code: function tinhtong(a,b) { var kq=a+b; return kq; } Lúc này nếu bạn gọi hàm này một cách bình thường thì sẽ chả có gì sảy ra, nhưng hãy thử: Code: alert(tinhtong(2,3)); Hoặc: Code: alert(tinhtong(2,3)+tinhtong(3,7)); Bạn sẽ thấy lúc này của hàm đã được gán giá trị. Ngoài ra ta cũng có thể gán cho nó những giá trị boolean, và dùng hàm làm điều kiện. Xét đoạn code so sánh ba số người dùng nhập vào, nếu cả ba số bằng nhau thì thông báo "Đúng" ngược lại "Sai". Đầu tiên sẽ là đoạn không dùng tới funtion Code: a=prompt("Số a",""); b=prompt("Số b",""); HocVui.Net Page 35
  37. September 16, 2009 [JAVASCRIPT] c=prompt("Số c",""); if((a==b)&&(a==c)&&(c==b)) { alert("Đúng"); }else{ alert("Sai"); } Cũng công dụng tương tự, mình viết một chương trình dùng tới funtion: Code: function vd2() { a=prompt("Số a",""); b=prompt("Số b",""); c=prompt("Số c",""); if((a==b)&&(a==c)&&(c==b)) { return true; }else{ return false; } } Rồi ở bất kì đâu trên trương trình, bạn dùng một cấu trúc if: Code: if(vd2()) { alert("Đúng"); }else{ alert("Sai"); } Lúc này hàm vd2() đã tính toàn và gán cho chính nó một giá trị hoặc true hoặc false và có thể dùng làm điều kiện. Thực tế việc return giá trị của một hàm về được ứng dụng rất nhiều, một trong số đó sẽ được nêu ra ở loạt bài về làm việc với form. HocVui.Net Page 36
  38. September 16, 2009 [JAVASCRIPT] FORM Giải đáp trước thắc mác về những dấu chấm Tháng Sáu 17, 2009, 05:18:33 PM gửi bởi nvcnvn Bắt đầu từ bài sau, các bạn sẽ làm việc với những html forms, cái mà nắm vị trí chủ đạo trong việc tương tác với người dùng. Bạn sẽ thấy có rất nhiều dấu chấm trong khi ta làm việc, những dấu chấm này không xa lạ, ví dụ như: document.write() //viết ra màn hình cái gì đó array.sort() //Sắp xếp các phần tử trong mảng Đó là cách mà ta tham chiếu đến cái gì đó và làm những cái gì đó, nếu bạn đã xem qua toàn bộ các bài viết html tại thì chác bạn sẽ nhớ cái mình gọi là tính lồng ghép , phần tử này chứa trong phần tử kia, và các phần tử chứa trong đối tượng document và đối tượng lớn nhất chính là window. Các dấu chấm trong một dòng js sẽ phân tách các đối tượng, khi javascript bắt gặp một chuỗi các đối tượng được ngăn cách bởi các dấu chấm, nó sẽ đi dần xuống dối tượng cuối cùng trong chuỗi đó. Mọi việc sẽ dần già rỏ ra khi các bạn xem các bài sau! Hãy học cùng hocvui.net nhé. javascript làm việc với các form Tháng Sáu 17, 2009, 07:21:09 PM gửi bởi nvcnvn Để học qua phần này, các bạn bắt buộc phải tìm hiểu html form qua các bài viết này: html - forms - biểu mẩu Tháng Năm 31, 2009, 03:39:04 PM gửi bởi nvcnvn Cho đến lúc này, mình tin là nếu các bạn đã thử dùng vài công cụ hỗ trợ thiết kế web như MS FrontPage hay Dreamweaver thì các bạn đã có thể thể hiện trang web theo ý muốn của mình, tuy là chỉ dùng html thì sẽ không thể nào tối ưu hoá về mặt kĩ thuật. Có 2 điều làm cho trang web trở nên hấp dẫn: giao diện, tính tương tác với khách hàng. Vấn đề giao diện thì mặc dù hơi khó nhưng các bạn cũng đã phần nào giải quyết được, tuỳ theo thị hiếu khách hàng mà tuỳ ta lựa chọn (vd: khách hàng là tầng lớp trung niên thì tông màu nhẹ nhàng, tuổi teen thì màu mè loè loẹt). Nhưng vấn đề giao tiếp với khách hàng thì có thể khác nhau về hình thức nhưng cơ bản thì luon giống nhau, và lại một lần nhìn vào thực tế bạn chưa thể nào giao tiếp với khách hàng cho tới khi bạn biết được mội sever-script(php,asp ) hay ít nhất một client- script(javascript,vbscript ) Tuy đã nói là không biết một trong hai loại script trên thì không thể giao tiếp với khác hàng, nhưng mà html lại như là cầu nối, thiếu html thì cũng hơi khó mà mầng được cái gì! HocVui.Net Page 37
  39. September 16, 2009 [JAVASCRIPT] Hình thức giao tiếp già cỗ nhất là cái khỏng trống cho ta điền thông tin vào rồi nhấn nút, đợi một hồi thì cái gì mình điền vào sẽ được gửi đi, hay là mấy cái ô rồi mình click chuột vào check, đó chính là các phần tử coon bên trong phần tử form. Để thông tin của các phần tử trên được gừi đi, chúng cần được đặt trong cặp thẻ , trong thẻ form này cũng có một vài thuộc tính. Code: action: đó là link mà sau khi form được gửi đi, trang web sẻ được huyễn tới, rang này có thể là một trang bất kì hay chính trang chưa form, trang này chứa code xử lí thông tin form theo cách mà bạn muốn. Code đó có thể là 1 client-script hay sever-script. method: là hình cách thức gửi form đi, có hai giá trị là post,get, giá trị get là mặc định, bạn hãy tự viết một trang chưa form sau bài này để nhận thấy sự khác biệt giữa post và get, để xem kỉ năng quan sát của bạn như thế nào. name: cái này thì các bạn biết rồi, trong html đơn thuần cái này chả giúp được gì, nhưng mà form là để phối hợp với các ngôn ngữ khác, những ngôn ngữ này dùng tới cái name này khá nhiều. Thẻ form không trực tiếp show cái gì ra màn hình cả, và cũng chả có giá trị gì nếu thiếu các phần tử con bên trong. Một số phần tử của form ở các bài sau. html from input elements Tháng Năm 31, 2009, 08:19:46 PM gửi bởi nvcnvn cái thẻ input này hiễn thị ra được nhiều thứ lắm, nhờ giá thuộc tính type, vừa ví dụ vừa kể luôn một số loại phổ biến: text Code: Có thể đặt sẵn chữ vào trong cái ô đó bằng cách thêm thuộc tính value với giá trị là cái gì bạn muốn hiễn thị. Code: Ði?n cái gì dó password Loại này thì cũng tương tự như loại trên, chỉ có điều khi đánh chữ vào thì hiện ra dấu chấn đen Code: bạn thử tự gõ vào mà xem checkbox Code: có thể cho cái nut này được đánh dấu sẵn bằng cách thêm vào code từ checked="yes" Code: Ta thường thêm giá trị mặc định vào check box với thuộc tính value để xử lí khi form được truyền đi, giá trị này chỉ được truyền đi khi checkbox được chọn, và gái trị này dĩ nhiên là không hiện HocVui.Net Page 38
  40. September 16, 2009 [JAVASCRIPT] ra màn hình. radio radio là nhón nút, ví dụ như làm trắc nghiệm loại chỉ có duy nhất 1 đáp án đúng thì ta dùng các nút radio, các nút radio phải có cùng tên để có và giá trị khác nhau kết quả: Code: hãy chọn thử bất kì một nút, rồi chọn nút khác, bạn sẽ thấy một lúc chỉ có thể chọn một nút, cụ thể chỉ có thể chọn một nút trong nhóm nút có cùng tên Cũng có thể chọn trước một nút bất kì bằng cách thêm thuộc tính checked="yes" Code: reset Khi đã điền hết các chỗ mà người ta cho bạn điền, mà muốn xoá điền lại cho lẹ thì dùng cái này, nó sẽ xoá tráng các giá trị Code: Reset hidden hidden dùng để chứa giá trii5 nào đó mà ta muốn gửi đi nhưng không muốn hiện ra cho người khác thấy, tất nhiên là nó cần có thuộc tính value để làm nên việc, tại sao lại cần đến nó ưu, bài học ở các ngôn ngữ sau sẽ giải thích! Code: submit nút sumit sẽ gửi form đi sau khi nhấn Code: html form select emlements Tháng Năm 31, 2009, 08:24:56 PM gửi bởi nvcnvn select phần tử select, đua ra cho người ta một danh sách sổ suống để chọn lựa, mỗi chọn lựa nằm bên trong tag option Code: Người yêu Bạn bè Gia đình HocVui.Net Page 39
  41. September 16, 2009 [JAVASCRIPT] Bên trong tag select ta có thể định dạng cho à ờ, xem ví dụ nhé Code: Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Ngu?i yêu B?n bè Gia đình Ngu?i yêu Nếu muốn người dùng chọn được nhiều kết quả cùng lúc bằng cách giữ phím Ctrl+Click chọn, ta thêm thuộc tính multiple="yes" Code: Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Ngu?i yêu B?n bè Gia đình Ngu?i yêu ta có thể quyết định những cái nào được chọn với giá trị selected="yes" Code: Người yêu Bạn bè Gia đình Ngu?i yêu Chú ý: trong thực tế ta cần đặt thuộc tính name trên tag mở select và thuộc tính value ở mỗi option, khi form được gửi đi, giá trị của phần tử select chính là giá trị tương ứng của option được chọn Bấy nhiêu đó cũng vừa đủ để chúng ta đi vào làm việc với javascript nhưng trước tiên, bạn cần đặt tên cho biểu mẫu để javascript biết bạn muốn nó làm việc với cái nào. Biểu mẫu đơn giản sau đấy sẽ nhắc luôn cho ác bạn cách đặt tên: Code: Hãy đặt tên các thành phần trong form sao cho nó giúp bạn dễ liên tưởng đến nó, ví như bạn muốn người dùng điền tên vào một trường text, thì trường đó nên có tên là name chẳng hạn! HocVui.Net Page 40
  42. September 16, 2009 [JAVASCRIPT] Thêm một số lưu ý nữa là các bạn hãy xem kĩ những phần có nói về thuộc tính value. Nhận + thiết lập thông tin từ các biểu mẩu Tháng Sáu 17, 2009, 08:18:34 PM gửi bởi nvcnvn Sét đoạn html này: Code: Tên: Email: Con cái Có/Chưa: Giới tính: Nử Nam Con đầu lòng của bạn 5 tuổi 10 tuổi 15 tuổi Ghi chú: Ghi chú của bạn Xem trên browser thì sẽ giống thế này: Tên: Email: Con cái Có/Chưa: Giới tính: Con đầu lòng của bạn 5 tuổi 10 tuổi 15 tuổi Ghi chú c?a b?n G?i Ghi chú: Ví dụ này có các trường biểu mẩu phổ biến nhất bao gồm text, select, radio và textarea. Khi gửi form đi, dữ liệu sẽ được chuyễn tới một trang có tên là new.html (action="new.html"). trang này là trang chứa javascript xử lý thông tin. Dĩ nhiên bạn có thể đặt code javascript ngay tại trang bạn viết mã html, nhưng nếu muốn lam2 thế, để code javascript hoạt động đúng cách mong muốn, bạn nên viết một hàm, và kích hoạt nó khi form được gửi khi nhấn nút submit Để làm việc với js nư đã nói trước, các bạn cần đặt tên cho chúng bằng thuộc tính name và cái js lưu ý đến thứ 2 chính là value. HocVui.Net Page 41
  43. September 16, 2009 [JAVASCRIPT] Đối với các trường biểu như text thuộc tính value không nhất thiết có mặt trong các thẻ vìa giá trị của nó sẽ được thêm vào khi người dùng nhập thông tin vào. Trường hợp bạn đặt mặc định giá trị sẽ xuất hiện trên trường thì bạn có thể thêm vào thuộc tính value, giá trị của trường sẽ là chuỗi cuối cùng trước khi người dùng gửi biểu mẩu.(ngừi dùng vẫn có thể thay đổi) Nếu bạn muốn lưu một giá trị nào đó mà không muốn người dùng biết và dửa đổi, hãy dùng trường hidden kèm theo thuộc tính value Đối với phần tử select, name được luu trữ trong tag mở select, và value được lưu giữ trong tag mở option. Checkbox thuộc tính value cần có sẵn, checkbox sẽ được dùng trong trường hợp câu trả lời chỉ có hai loại kết quả hay là một dạng đánh dấu. Ví như bạn hỏi người đó có con chưa, nếu checkbox được họn, gái trị của check box sẽ được gửi đi. Khi bạn bắt đầu làm việc, bạn sẽ thấy giá trị "co" như trên ví dụ của chúng ta sẽ cho biết là người dùng đả chọn, hay là bạn có một danh sách các mặt hàng, bạn muốn biết người dùng có thích những mặt hàng đó hay không, một loạt các checkbox với tên mặt hàng sẽ rất hiệu quả. Radio cái này dùng khi bạn có một câu hỏi, nhiều đáp án và người dùng chỉ được chọn 1 trong nhiều. tất cả các nút radio trong cùng một nhóm(các đáp án dành cho cùng 1 câu hòi chằng hạn) phải có cùng tên, và tất nhiên là khác giá trị. textarea value của textarea không nằm trong tag mở của nó, mà nằm giữa hai cặp thẻ. Bạn vẫn tham chiếu tới nó và thuộc tính value của nó như mọi phần tử form khác, nhưng nếu muốn đặt sẵn giá trị thì điều bạn cần làm là đặt giá trị d8o1 vào giữa hai cặp thẻ đóng và mở của nó. Bắt đầu nhào vô làm việc! Các bạn đã đọc qua bài giả thích về các dấu chấm chưa!? Nếu chưa thì hãy nhín một chút thời gian và đọc qua ha. Trích dẫn Các dấu chấm trong một dòng js sẽ phân tách các đối tượng, khi javascript bắt gặp một chuỗi các đối tượng được ngăn cách bởi các dấu chấm, nó sẽ đi dần xuống dối tượng cuối cùng trong chuỗi đó. Uhm, và đối tượng lớn nhất chính là window, tất cả văn bản html sẽ chứa trong đối tượng document. Để thám chiếu tới bất cứ một phần tử nào của form, ta điều cần làm như thế này: window.document. . trong trường hợp này, giả sử mình tham chiếu tới trường text "name"(trường yêu cầu người dùng điền tên) thì code sẽ là: Code: window.document.the_form.name và để lấy giá trị của nó (giá trị của thuộc tính value) Code: window.document.the_form.name.value Để thiết lập giá trị ta làm bằng cách: Code: window.document.the_form.name.value="giá trị bạn muốn thiết lập"; HocVui.Net Page 42
  44. September 16, 2009 [JAVASCRIPT] Một ví dụ tĩnh lượt và đơn giản Hảy điền tên bạn vào và nhấn nút. Code: function guestname() { alert(document.the_form.name.value); } Tên: Tên: Submit Nhưng người ta thường dùng cách này hơn: Code: Tên: Thay vì kích hoạt scpirt với thuộc tính onclick đặt ở nút submit, người ta kích hoạt hàm với sự kiện onsubmit trên tag mở form. Tại sao ư!? Xem tiếp bài sau nhé. Kiểm tra các trường text,password,textarea Tháng Sáu 19, 2009, 04:27:47 PM gửi bởi nvcnvn Nói chung các cái gì mà gõ lọc cọc chữ hay cái gì vào ta đều có thểm cùng làm một cách: if(document. . .value=="") Code: function guestname() { /*Trong điều kiện, mình dùng cặp dấu "" để biểu hiện giá trị rỗng, một cách khác là dùng từ null, nhưng dùng làm chi cho nó dài dòng */ if(document.the_form.name.value=="") { /*Nếu mà "document.the_form.name.value" tức là trường text name có giá trị rỗng HocVui.Net Page 43
  45. September 16, 2009 [JAVASCRIPT] có nghĩa là nó chưa được điền bất cứ gì Hàm sẽ được gán giá trị false*/ alert("Chưa điền"); return false; //Thông báo thêm là hãy điền tên vào trường text name alert("Bạn chưa điền thông tin vào nơi yêu cầu, điền lại ha bạn!"); }else{ alert(document.the_form.name.value); } } Tên: Khá là đơn giản nhĩ!? kiểm tra trường select Tháng Sáu 20, 2009, 09:33:20 AM gửi bởi nvcnvn Phần tử select của biều mẩu không giống như các phần tử trước, bởi rằng nó có sẵn những giá trị, và cùng một lúc, người ta có thể chọn nhiều gái trị. Ta vẫn có thể kiểm tra xem giá trị của select có bằng rỗng hay không, và sau đó vẫn là các bước quen thuộc. Nhưng javascript còn cho ta một cách nữa để kiến mọi thứ trở nên linh động hơn. Bạn có thể biết người dùng đã chọn lựa chọn thứ mấy với selectedIndex VD: Code: function vd() { if(document.aa.bb.value!="") { alert(document.aa.bb.selectedIndex); } } Lựa chọn 1 Lựa chọn 2 Lựa chọn 3 L?a ch?n 1 L?a ch?n 2 G?i L?a ch?n 3 HocVui.Net Page 44
  46. September 16, 2009 [JAVASCRIPT] Nếu người dùng lựa chọn phần tử đầu tiên (Lựa chọn 1) thì kết quả là 0, phần tử thứ 2 (Lựa chọn 2) kết quả là một, Còn nếu không chọn thì kết quả trả vể là số âm (-1) thì có nghĩa là chả có cái nào được chọn! Ta có thể dùng cách này để xác định xem select có được chọn hay chưa. Kiểm tra các nút radio Tháng Sáu 21, 2009, 03:55:24 PM gửi bởi nvcnvn Các nút radio là trường mà khó làm ăn với nhất. Thử với một form như thế này: Code: Sẽ chả có cái gì sảy ra khi ta thay đổi các chọn lựa (sự kiện onclick đàng lẻ phải kích hoạt một cái gì đó) bởi vì các nút chọn lựa có cùng tên, khác giá trị, khó lòng mà cho javascript biết bạn muốn nói tới nút nào trong 4 nút. Cách gải quyết vấn đề này cũng không quá phức tạp. Bản chất của các nhóm nút chọn lựa là một mảng, với tên mảng là tên chung của nhóm nút, nút đầu tiên có vị trí là 0, Nếu muốn lấy giá trị của từng nút, ta có thể làm như thế này: document. . [ ].value VD: document.ff.aa[0].value Còn nếu mu6on1 xem nút đó có được check chưa, thì ta phải dùng thuộc tính checked if(document. . [ ].checked==true) Và để xem nhóm nút có được check chưa, tốt nhất là dùng một vòng lặp, chạy qua cái mảng này, kiểm tra từng cái. Đây là code function để các bạn dành riêng kiểm tra các nút radio Code: //Biến check ban đầu mang giá trị no, nếu có 1 phần tử nào của nhóm nút được chỏn, giá trị sẽ là yes var check="no" //Bắt đầu vòng lặp chạy từ đầu tới cuối mảng radio for(i=0;i<document.ff.aa.length;i++) { // Nếu phát hiện một phần tử nào đã được chọn, check sẽ = yes if(document.ff.aa[i].checked==true) { check="yes" } } HocVui.Net Page 45
  47. September 16, 2009 [JAVASCRIPT] if(check=="yes") { alert("Đã chọn"); return true; }else{ alert("Chưa chọn"); return false; } Xử lý chuỗi. Tháng Sáu 22, 2009, 02:20:12 PM gửi bởi nvcnvn Đương nhiên đây là bước sau khi chúng ta nhận được thông tin từ from. Ở các trường form như select,checkpx,radio hầu như ta đã chọn cho chúng một vlaue có định, chỉ còn lại textare,text,password đó là những trường bạn muốn người ta nhập ít nhất là 1 ký tự hay đa phần là một chuỗi. Ta chưa thể xử lý các biểu mẩu một cách tối đa khi chưa hiểu rỏ cách làm việc với chuỗi, dĩ nhiên, không phải lúc nào cũng như các ví dụ ở bài form, mọi thứ chỉ là xem xem "rỗng hay đặc". Suyên suốt toàn bộ ví dụ, ta dùng một chuỗi duy nhất: Code: var chuoi="anh yêu em nhiều lắm em có biết không!?"; Tất cả mọi Method làm việc với string đều khá wen thuộc .method Length Hàm này trả về độ dài chuỗi VD: Code: document.write(chuoi.length) KQ:39 Split Hàm này biến chuỗi thành mảng, hàm này nhận vào một tham số, đó là ký tự hoặc nhóm ký tự phân tách các phần tử trong chuỗi. VD: Code: mang=chuoi.split(" "); Trong ví dụ này mình dùng ký tự hoảng trắng để phân tách các phần tử. Và giờ ta có một mảng bao g6m2 các phần tử: anh,yêu,em,nhiều,lắm,em,có,biết,không!? Search hàm này dùng để tìm kiếm sử xuất hiện của chuỗi 2 trong chuỗi đầu tiên, nếu không tìm thấy giá trị trả về sẽ =-1, nếu tìm thấy kết quả trả về sẽ là vị trí tìm thấy. VD: Code: HocVui.Net Page 46
  48. September 16, 2009 [JAVASCRIPT] var chuoi="anh yêu em nhiều lắm em có biết không!?"; var chuoi2="yêu"; var kq=chuoi.search(chuoi2); document.write(kq); Kết quả sẽ là 4 Code: var chuoi="anh yêu em nhiều lắm em có biết không!?"; var chuoi2="Yêu"; var kq=chuoi.search(chuoi2); document.write(kq); Nhưng chỉ thay lại từ yêu bằng từ Yêu, kết quả sẽ là -1 Replace hàm này nhận vào 2 tham số, tham số thứ nhất là nhòm ký tự cần thay thế của chuỗi 1, tham số thứ hai là nhóm ký tự dùng để thay thế. Code: var chuoi="anh yêu em nhiều lắm em có biết không!?"; var chuoi2="ghét"; var kq=chuoi.replace("yêu",chuoi2); document.write(kq); kết quả trên màn hình sẽ là: anh ghét em nhiều lắm em có biết không!? substring lấy ra một chuổi con từ chuỗi đầu tiên. Hàm này nhận vào hai tham số, tham số đầu tiên là vị trí bắt đầu trích ra, tham số thứ hai là vị trí của ký tự đứng sau kiy1 tự cuối cùng muốn trích. Chú ý rằng ký tự đầu tiên trong chuỗi có vị trí là 0. VD: muốn rút từ yêu ra ta làm Code: var chuoi="anh yêu em nhiều lắm em có biết không!?"; document.write(chuoi.substring(4,7)); toUpperCase Chuyễn các ký tự của chuỗi thành các ký tự IN toLowerCase Ngược lại với toUpperCase Trên đây chỉ là một số phương pháp thường dùng, tuỳ theo trường hợp mà các bạn hãy ứng dụng cho đúng. Ví dụ nếu là form điền địac chỉ email mà thiếu vắn ký tự @ và dấu (.) là một điều cần xem xét lại. chỉ mang lại cho bạn những kiến thức cần, để có đủ kiến thức đó luôn phải nhờ vào sự có gắng của các bạn! HocVui.Net Page 47
  49. September 16, 2009 [JAVASCRIPT] WINDOW Làm việc với các cửa sổ. Tháng Sáu 22, 2009, 08:58:26 AM gửi bởi nvcnvn Mình muốn nói làm việc với các cửa sổ ở đây là nói tới của sổ trình duyệt. Javascript cho ta khá nhiều cách để làm việc với nó: chẵn hạn như canh chỉnh kích thước, vị trí hoặc đơn giản là mở một cửa sổ mới. Bài này chủ yếu đề cập tới cách mở và làm việc với cửa sổ. Muốn làm việc với cửa sổ thì tất nhiên cần tham chiếu tới window. Đề mở một cửa sổ mới ta: window.open(" "," "); VD: Code: Tuy nhiên nếu bạn đã đọc qua bài về đường dẫn của html, thì tất nhiên bạn cũng đã biết cách mở một cửa sổ mới mà không cần javascript. Và nếu chỉ mở một cửa sổ mới thôi, thì cần quái gì dùng tới mấy cái script này, câu trả lời như đả nêu ở trên, ta còn làm được nhiều việc khác. VD: ta có thể canh kích thước của ô cửa sổ mới mở ra bằng cách: Code: XEM width=600,height=400 hai con số trên cho ta cách thức để chỉnh chiều rộng và cao của cửa sổ. Bài sau chúng ta sẽ làm thêm một số việc nữa với mấy cái cửa sổ này! HocVui.Net Page 48
  50. September 16, 2009 [JAVASCRIPT] Đóng cửa sổ đả mở Tháng Sáu 22, 2009, 10:20:21 AM gửi bởi nvcnvn Đóng cửa sổ Sau khi mở, bạn sẽ có lúc muốn đóng! Mọi việc quá đơn giản, rê chuột tới góc trên của cửa sổ, click vào cái dấu X o tướng màu đỏ. Hoặc là dùng lệnh close của javascript Giá mà mọi việc, mọi suy nghĩ đểu đơn giản như thế bạn sẽ không cần dùng tới các kỉ năng lập trình, tới một ngày nào đó, bạn sẽ đặt ra tình huống rắc rối và cương quyết muốn làm như sau: Bạn có một form, với nhiều check, bạn muốn khi người ta chọn vào checkbox nào, một cửa sổ nhỏ sẽ nhảy ra giải thích, nói thêm và dĩ nhiên, khi người ta hối hận vì đã chọn nút đó và bỏ chọn, cửa sổ nhỏ sẻ close. Chắc bạn củng đả tìm ra hướng gải quyết: 1: mỗi checkbox đều có thuộc tính onclick kích hoạt 1 hàm 2: hàm sẽ kiểm tra, nếu checkbox được check thì sẽ mở ra cửa sổ tương ứng, nếu là uncheck(đã check rồi muốn bỏ thì vẫn phải click vào mà) thì tắt cái cửa sổ mới mở. Cho tới giờ chắc để viết hàm như thế thì bạn cũng không quá tốn sức, chỉ cần kiể ta thuộc tính checked của checkbox thế là xong. mọi việc là ở câu lệnh close. VD: Bạn ở 1 cửa sổ mới có tên là new_window Code: window.open(' Để đóng nó, ta có hai trường hợp _Bạn đóng nó từ cửa sổ ban đầu: window_name.close(); trong trường hợp của chúng ta: Code: new_window.close(); _Bạn đóng nó từ chính nó: Chỉ đơn giản: Code: window.close(); Nó ở đây có nghĩa là cửa sổ chứa javascript đang làm việc, nó coi nó là window, xem một cửa sổ nào đó khác là một cái gì đó khác. bạn hãy thử mở một cửa sổ mới và đóng cửa sổ củ từ cửa sổ mới xem! HocVui.Net Page 49
  51. September 16, 2009 [JAVASCRIPT] Di chuyển cửa sổ Tháng Sáu 22, 2009, 10:50:40 AM gửi bởi nvcnvn Bạn mở một cửa sổ ra, ngoài định kích thước, đóng bạn cũng có thể quyết định xem nó sẽ xuất hiện ở chỗ nào trên màn hình, cũng như từ từ duy chuyễn nó. Code: window.open(" ","new_win","width=300,height=400"); new_win.moveTo(50,50); Xem Với đoạn code trên, công việc được miêu tả như sau: 1 Mở của sổ mới có địa chỉ : tên: new_win, chiều rộng 300, cao 400 2 Di chuyễn new_win tới điểm cách lề tar1i màn hình 50, lề trên 50 *moveTo chuyễn cửa sổ tới một địa điểm cố định trên màn hình moveBy() Với moveBy() bạn sẽ di chuyễn cửa sổ tới một vị trí so với vị trí hiện tại của nó. VD: Code: new_win.moveBy(50,50); Kết hợp hàm trên với hàm hẹn giờ(để giảm tốc độ mọi thứ xuống) bạn có thể kiến một cửa sổ di chuyễn trong màn hình. Ở đây ta hãy dùng một phương pháp như thế này: hàm tự gọi hàm và nội dung hàm là duy chuyễn cửa số chứa nó Code: HocVui.Net Page 50
  52. September 16, 2009 [JAVASCRIPT] function move() { window.moveBy(50,50) setTimeout('move();',1000); } move(); Đặt đoạn code này trong trang chứa cửa sổ được mở ra, ở đây mình đạt tên cho file này là new_win.htm Địa chỉ cửa sổ Tháng Sáu 23, 2009, 07:53:29 AM gửi bởi nvcnvn Địa chỉ ở đây muốn nói tới trang web cửa sổ đang duyệt. Bạn có thể chuyễn hướng cửa sổ với javascript. Code: window.location=" "; Đương nhiên bạn sẽ thấy rất dư thừa bởi vì có thể dễ dàng chuyễn hướng website với html. Nhưng đó chỉ à nếu ta kh6ong biết linh hoạt, bạn có thể tạp một trò chơi, tuỳ theo người dùng trả lời để chuyễn hướng họ. Hay là một ứng dụng hữu ít hơn đó là chuyễn hướng người dùng theo từng điều kiện thích hợp đối với bạn! HocVui.Net Page 51
  53. September 16, 2009 [JAVASCRIPT] FRAMES Javascript và frame Tháng Sáu 23, 2009, 10:03:20 AM gửi bởi nvcnvn Frame cũng là một trong những cách thiết kế web html rất hay, và tất nhiên với javascript ta sẽ làm được rất nhiểu điều thú vị với frame. bạn nên xem lại các bài về frame ở trang trước khi đi vào loạt bài này Nếu bạn còn nhớ về bài mảng dựng sẵn của mỗi trình duyệt, bài này cũng sẽ rất có ít. Với tấm bản đồ sơ sài lụng vụng và thiếu sót(hên mà hok thiếu cái cần). ta có thể thấy các Frame cũng được dựng sẵn mảng, và bản thân các frame cũng chính là một đối tượng window(lúc HocVui.Net Page 52
  54. September 16, 2009 [JAVASCRIPT] vẽ hình mình bỏ qua chi tiết đó). Lưu ý là ta nên đặt tên và id cho các tag để dể bề làm việc! frameset với các frame Trang chứa framest hơi khó mà làm việc với javscript, nếu bạn đọc kĩ thì ở đó không có sự hiện diện của tag body, điều này cũng có nghĩa là hơi khó mà kích hoạt các hàm js, cách dễ dàng hơn là chèn code js vào những trang con. Và đương nhiên là hơi khó để code từ frame này, có hiệu lực trên frame kia. Ta chú ý đến vấn đề tham chiếu. Lúc này, frames chứa trong một window lớn hơn, đó chính là parent. Nếu muốn tham chiếu tới nội dung parent (tất nhiên lúc này chỉ có các tag frameset và frame) ta tham chiếu vào ngay document. VD nếu ta có một ( frameset đã chia trang thành hai tahnh2 phần ngang với chiều ca0 = nhau = 50%) Và ta muốn thay đổi kích thước đó: parent.document.getElementById('frameset1').rows='95%,*'; ta tam chiếu tới chính frameser và thuộc tính rows của nó và đặt lại giá trị. Lấy giá trị của thuộc tính thuộc một phần tử ở frame khác. Chỉ hơi khác một chút ở phần tham chiếu. sau khi khi báo parent ta không đi tiếp đến document mà là thên của frame, và sau đó là phần tử chứa trong frame đó. Bài sau sẽ nêu một số ví dụ rất thú vị cho các bạn. cho các bạn Ví dụ về frame và js Tháng Sáu 23, 2009, 10:26:18 AM gửi bởi nvcnvn Main html: Frames and JavaScript function alertFrame(){ HocVui.Net Page 53
  55. September 16, 2009 [JAVASCRIPT] alert(frames["leftFrame"].name) } � � > Top html: Frames and JavaScript var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i<3; i++){ if(i==0){ sourceFiles += tags+"arrays.js"+closeOpen+closeTag+"\n" } HocVui.Net Page 54
  56. September 16, 2009 [JAVASCRIPT] else if(i==1){ sourceFiles += tags+"dyNav.js"+closeOpen+closeTag+"\n" } else{ sourceFiles += tags+"style.js"+closeOpen+closeTag+"\n" } } document.write(sourceFiles) if(top.location.href.indexOf("frames.htm") == -1){ top.location = "frames.htm" } <frame name=" topFrame " src="top.htm"> <a href="javascript:alert(self.location)"> </a> <a href="javascript:alert(parent.location)"> </a> <a href="javascript:alert(top.location)"> </a> <a href="javascript:alert(parent.leftFrame.location)"> </a> <a href="javascript:alert(parent.leftFrame.document.forms[0].elemen ts[0].value)"> </a> //if(parent.opener)alert("window.opener==true") if(parent.opener){ document.write(' Back to Frames Tutorial ') } else{ HocVui.Net Page 55
  57. September 16, 2009 [JAVASCRIPT] document.write(' Back to Frames Explanation ') } var tracImg = ' '; document.write(tracImg) Left HTML: Frames and JavaScript function switchFrame() { parent.topFrame.location = parent.rightFrame.location parent.rightFrame.location = parent.topFrame.location } var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " HocVui.Net Page 56
  58. September 16, 2009 [JAVASCRIPT] } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i if(top.location.href.indexOf("frames.htm") == -1){ top.location = "frames.htm" } <frame name=" leftFrame " src="left.htm"> function switchFrame() { parent.topFrame.location = parent.rightFrame.location parent.rightFrame.location = parent.topFrame.location } The switchFrame() function simply swaps the source of frames "topFrame" and "rightFrame" by setting their locations equal to the other's location. HocVui.Net Page 57
  59. September 16, 2009 [JAVASCRIPT] if(parent.opener){ document.write(' Back to Frames Tutorial ') } else{ document.write(' Back to Frames Explanation ') } Right HTML: Frames and JavaScript var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i<3; i++){ if(i==0){ sourceFiles += tags+"arrays.js"+closeOpen+closeTag+"\n" } else if(i==1){ sourceFiles += tags+"dyNav.js"+closeOpen+closeTag+"\n" } else{ sourceFiles += tags+"style.js"+closeOpen+closeTag+"\n" } } document.write(sourceFiles) HocVui.Net Page 58
  60. September 16, 2009 [JAVASCRIPT] //if(top.location.href.indexOf("frames.htm") == -1){ //top.location = "frames.htm" //} <frame name=" rightFrame " src="right.htm"> <a href="#" onclick="parent.topFrame.document.bgColor='red'"> ; </a> <a href="#" onclick="parent.topFrame.document.bgColor='white'"& gt; </a> ; if(parent.opener){ document.write(' Quay trở về trang của Hocvui.net ') } else{ document.write(' Quay trở về trang của Hocvui.net ') } Đây là một trang frame có sẵn một số code javascript, các bạn hãy vào xem và view source để thấy sự khác iệt mình muốn nói tới. hãy chú ý tới mothod location. cái này rất là thú vị khi có frame làm việc chung. HocVui.Net Page 59
  61. September 16, 2009 [JAVASCRIPT] Main HTML: Frames and JavaScript function alertFrame(){ alert(frames["leftFrame"].name) } � � > Top HTML: HocVui.Net Page 60
  62. September 16, 2009 [JAVASCRIPT] Frames and JavaScript var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i if(top.location.href.indexOf("frames.htm") == -1){ top.location = "frames.htm" } <frame name=" topFrame " src="top.htm"> <a href="javascript:alert(self.location)"> </a> <a href="javascript:alert(parent.location)"><a HocVui.Net Page 61
  63. September 16, 2009 [JAVASCRIPT] href="javascript:alert(parent.location)">Địa chỉ của trang lớn chứa frame này </a> <a href="javascript:alert(top.location)"> </a> <a href="javascript:alert(parent.leftFrame.location)"> </a> <a href="javascript:alert(parent.leftFrame.document.forms[0].elements [0].value)"> </a> //if(parent.opener)alert("window.opener==true") if(parent.opener){ document.write(' Back to Frames Tutorial ') } else{ document.write(' Back to Frames Explanation ') } var tracImg = ' '; document.write(tracImg) HocVui.Net Page 62
  64. September 16, 2009 [JAVASCRIPT] Left HTML: Frames and JavaScript function switchFrame() { parent.topFrame.location = parent.rightFrame.location parent.rightFrame.location = parent.topFrame.location } var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i if(top.location.href.indexOf("frames.htm") == -1){ top.location = "frames.htm" } HocVui.Net Page 63
  65. September 16, 2009 [JAVASCRIPT] <frame name=" leftFrame " src="left.htm"> function switchFrame() { parent.topFrame.location = parent.rightFrame.location parent.rightFrame.location = parent.topFrame.location } The switchFrame() function simply swaps the source of frames "topFrame" and "rightFrame" by setting their locations equal to the other's location. if(parent.opener){ document.write(' Back to Frames Tutorial ') } else{ document.write(' Back to Frames Explanation ') } Right HTML: HocVui.Net Page 64
  66. September 16, 2009 [JAVASCRIPT] Frames and JavaScript var openTag = " " var closeTag = " " var sourceFiles = "" if(location.href.indexOf("q=cache") > -1){ scriptLink = " " } else { scriptLink = "" } var tags = openTag+midOpen+endOpen+scriptLink for(i=0; i //if(top.location.href.indexOf("frames.htm") == -1){ //top.location = "frames.htm" //} <frame name=" rightFrame " src="right.htm"> <a href="#" onclick="parent.topFrame.document.bgColor='red'"> </a> HocVui.Net Page 65
  67. September 16, 2009 [JAVASCRIPT] <a href="#" onclick="parent.topFrame.document.bgColor='white'"> ; </a> if(parent.opener){ document.write(' Quay trở về trang của Hocvui.net ') } else{ document.write(' Quay trở về trang của Hocvui.net ') } mình đã dùng thêm một số code javascript mà chưa hề đề cập tới ở các bải hướng dẫn, mình không nói tới, nhưng các bạn hãy thử tự tìm hểu xem! HẸN GIỜ Định giờ cho các sự kiện Tháng Sáu 22, 2009, 02:35:21 PM gửi bởi nvcnvn bạn có thể dễ dàng định trước thời gian để kích hoạt một hàm, ví dụ như để thông báo cho người dùng khi họ đã vừa làm một việc gì đó trong khoảng thời gian bao nhiêu giây. Ta thực hiện đều này với setTimeout setTimeout nhận vào hai tham số, tham số thứ nhất chính là câu lệnh javascript sẽ thực hiện, tham số thứ hai là khoảng thời gian chờ. bạn chú ý, tham số thứ nhất chính là câu lệnh javascript cần được đặt trong một cặp dấu nháy, và nếu ngay trong câu lệnh cũng có một dấu nháy, mọi chuyễn sẽ rất rắc rối. Để hạn chế điều đó, ta hãy viết javascript dưới dãng hàm. VD: Để làm xuất hiện một hộp thông báo sau 3 giây kể từ khi kích hoạt: Code: function trungian() HocVui.Net Page 66
  68. September 16, 2009 [JAVASCRIPT] { alert("Bạn vừa click vào đây 3 giây trước"); } function run() { setTimeout("trungian();",3000); } Bài sau sẽ đề cập tới việc ngưng hẹn giờ. clearTimeout - Ngưng hẹn giờ Tháng Sáu 22, 2009, 03:00:47 PM gửi bởi nvcnvn Giả sử rằng ta có một chương trình làm toán, người làm bài chỉ có thời gian là 5 giây để trả lời câu hỏi, quá thời gian 5 giây, nếu người chơi chưa trả lời được, hao85c là trả lời sai sẽ hiện ra bảng thông báo chứa kết quả. CÒn nếu trong thời gian 5 giây, người chơi kịp trả lời và trả lời chính xác, một thông báo chúc mừng xuất hiện. Hướng gải quyết của chúng ta sẽ là: 1 Viết một hàm kiểm tra đáp án, kích hoạt khi người dùng nhấn submit 2 Trong lúc đó cũng viết một hàm hẹn giờ với setTimeout. 3 Phải làm như thế nào để dừng bước 2 khi người trả lời đúng. Bước 1 và 2 mình tin các bạn sẽ dễ dàng làm được, mọi việc ta cần là ở bước 3, mọi người hãy xem ví dụ: Code: //hàm bắt đầu làm toán function batdau() { alert("Kết quả của biểu thức: 3+5=?"); dapan=8; /*bắt đầu tính thời gian, trong trường hợp này ta gan một biến cho setTimeout để dễ hao tác hơn*/ hengio=setTimeout("sai();",5000); } //hàm thông báo khi sai function sai() { alert("Đáp án đúng là "+dapan); } //hàm kiểm tra function check() { if(document.the_form.kq.value==dapan) { alert("Chúc mừng bạn đã trả lời đúng"); //Xoá bỏ hẹn giờ với clearTimeout HocVui.Net Page 67
  69. September 16, 2009 [JAVASCRIPT] clearTimeout(hengio); }else{ sai(); clearTimeout(hengio); } } Hàm bắt đầu sẽ in ra câu hỏi, sau đó bắt đầu hẹn giờ, hết tời gian, setTimeout sẽ gọi hàm sai() thông báo đáp án. Hàm check sẽ được gọi khi gửi thông tin, nếu đáp án đúng thì gửi câu chúc mừng, sai thì gọi hàm sai, cả hai hành động đều dùng thêm một hàm clearTimeout để tắt stTimeout. Để làm việc với clearTimeout ta cần gán setTimeout với một giá trị bài sao sẽ hướng dẫn cách để chúng ta làm một đồng hồ bấm giờ với clearTimeout và setTimeout Tạo một đồng hồ bấm giờ Tháng Sáu 22, 2009, 03:26:41 PM gửi bởi nvcnvn Nếu ta muốn làm một đồng hồ bấm gờ, khi bấm chạt thì bắt đầu đếm, khi bấm ngưng thì ngừng lại thì làm thế nào nhỉ. Dĩ nhiên là cần tới setTimeout và clearTimeout vì đang nằm trong laot5 bài về chúng mà . Cụ thể thì làm thế nào nhỉ, đồng hồ bấn giờ cứ mỗi giây tăng lên 1, vậy thì có nghĩ là phải gọi một hàm setTimeout thực hiện một hàm tăng lên 1, sau đó là phải làm sau cho hàm setTimeout chạy liên tục cứ sau mỗi 1 giây. Trong đầu bạn chắc hẵn sẽ hiện ra ý tưởng về một vòng lặp, đó cũng là nhưng gì mình nghĩ tới đầu tiên. Đáng buồn thay: Code: function thongbao() { alert("Thêm 3 giây nữa đả trôi qua"); } i=0; while(i Mình viết đoạn code này với suy nghĩ, cứ mỗi lần các c\vòng lặp chạy, nó sẽ gọi hàm setTimeout, đợi 3 giây rồi chạy tiếp. Mọi thứ tan vỡ khi mình chạy thử, sau khi đợi 3 giây thì cả 10 hộp cacnh3 báo hiện ra , câu trả lời là vì: Vòng lặp chỉ gọi hàm setTimeout chứ không đợi nó, đối với tốc dộ khinh hồn của vòng lặp, 10 lần sẽ trôi qua ngay như cùng một lúc, và bạn chỉ vừa tắt hộp cacnh3 báo thứ nhất thì 9 hộp kia đã xuất hiện. Không thể nào giảm tốc độ của một vòng lặp được! Vậy hãy thử nhìn vào hướng khác, nhìn rộng và xa ra, châu Mỷ chẵn hạn :)) OAo, một hàm tự gọi lại chính nó rong một khoảng thời gian. Đó là cách giải quyết: HocVui.Net Page 68