Tự học lập trình Javascript

Tự học lập trình Javascript

Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 1 LỜI NÓI ĐẦU Chào các bạn, đây là lần đầu tiên mình viết một chuyên đề về một ngôn ngữ lập trình. Do đó không thể không tồn tại một số sai sót mong được sự đóp góp nhiệt tình của các bạn. Theo xu hướng hiện nay, web là một ứng dụng ngày càng được nhiều người sử dụng cùng với sự phát triển không ngừng của internet. Để phát triển được một website năng động về nội dung lẫn hình thức thì đều trước hết chúng ta phải nắm được một số vấn đề cơ bản và những ngôn ngữ cũng như các công cụ giúp chúng ta có thể cho ra đời những trang web hoàn hảo. Javascript là một ngôn ngữ lập trình tương đối nhẹ, đơn giản nhưng nó lại là cánh tay đắc lực của coder cũng như designer. Sau đây là nội dung quyển sách, mọi góp ý xin gởi về tungtung@gkiss.net hoặc tlqtung34@student.ctu.edu.vn. Y!M: trantung8111 Chúc các bạn luôn thành công và học tốt. Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 2 MỤC LỤC    Trang CHƯƠNG 1: LÀM QUEN VỚI JAVASCRIPT 4 1.1 JAVASCRIPT LÀ GÌ? 4 1.2 JAVASCRIPT CÓ THỂ LÀM GÌ? 4 1.3 SỬ DUNG JAVASCRIPT NHƯ THẾ NÀO? 4 1.4 JAVASCRIPT THỰC THI LỆNH KHI NÀO? 5 1.5 VỊ TRÍ JAVASCRIPT TRONG TRANG HTML? 6 1.6 HIỂN THỊ DỮ LIỆU BẰNG JAVASCRIPT LÊN TRÌNH DUYỆT 7 1.7 GHI CHÚ TRONG JAVASCRIPT 7 CHƯƠNG 2: BIẾN TRONG JAVASCRIPT 8 2.1 KHAI BÁO BIẾN 8 2.2 CÁC QUI TẮC VỀ BIẾN 8 CHƯƠNG 3: CÁC TOÁN TỬ 9 3.1 HỆ THỐNG PHÉP TÍNH TRONG JAVASCRIPT 9 3.2 TOÁN TỬ GÁN TRONG JAVASCRIPT 9 3.3 NỐI CÁC CHUỖI KÝ TỰ 10 3.4 PHÉP CỘNG TRONG CHUỖI VÀ SỐ 10 3.5 TOÁN TỬ SO SÁNH 10 3.6 TOÁN TỬ LOGIC 11 3.7 TOÁN TỬ ĐIỀU KIỆN 11 CHƯƠNG 4: CÁC PHÁT BIỂU 12 4.1 CÂU LỆNH IF… ELSE 12 4.2 CÂU LỆNH SWITCH…CASE 13 4.3 VÒNG LẶP FOR 14 4.4 VÒNG LẶP WHILE 15 4.5 VÒNG LẶP DO…WHILE 15 4.6 VÒNG LẶP FOR…IN 16 4.7 CÂU LỆNH BREAK VA CONTINUE 16 CHƯƠNG 5: CỬA SỔ THÔNG BÁO 17 5.1 HỘP THOẠI CẢNH BÁO 17 5.2 HỘP THOẠI XÁC NHẬN 17 5.3 HỘP THOẠI NHẬP LIỆU 18 CHƯƠNG 6: HÀM (FUNCTION) TRONG JAVASCRIPT 19 6.1 HÀM KHÔNG THAM SỐ 19 6.2 HÀM CÓ THAM SỐ 20 6.3 HÀM CÓ TRẢ VỀ GIÁ TRỊ SAU KHI THỰC HIỆN LỆNH 20 6.4 GỌI HÀM TRONG MỘT HÀM KHÁC 20 CHƯƠNG 7: SỰ KIỆN TRONG JAVASCRIPT 21 7.1 SỰ KIỆN LÀ GÌ ? 21 7.2 SỰ KIỆN VỚI FORM 22 7.3 SỰ KIỆN VỚI HÌNH ẢNH 22 7.4 SỰ KIỆN VỚI IMAGE MAP 22 7.5 SỰ KIỆN VỚI LINK 22 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 3 7.6 SỰ KIỆN VỚI WINDOW 22 CHƯƠNG 8: MẢNG TRONG JAVASCRIPT 22 8.1 MẢNG CƠ BẢN 22 8.2 NỐI MẢNG (CONCAT) 23 8.3 NỐI CÁC PHẦN TỬ TRONG MẢNG (JOIN) 23 8.4 XÓA MỘT PHẦN TỬ Ở CUỐI MẢNG (POP) 24 8.5 THÊM MỘT PHẦN TỬ VÀO CUỒI MẢNG (PUSH) 24 8.6 ĐẢO NGƯỢC MỘT MẢNG (REVERSE) 24 8.7 LOẠI BỎ MỘT PHẦN TỬ Ở ĐẦU MẢNG (SHIFT) 24 8.8 TẠO MẢNG MỚI TỪ MỘT MẢNG CÓ SẲN (SLICE) 24 8.9 SẮP XẾP MẢNG (SORT) 25 8.10 THÊM VÀ XÓA CÁC PHẦN TỬ CỦA MẢNG (SPLICE) 25 8.11 CHUYỂN MỘT MẢNG THÀNH CHUỖI (TOSTRING) 25 8.12 THEM PHẦN TỬ VÀO ĐẦU MẢNG (UNSHIFT) 25 CHƯƠNG 9: ĐỐI TƯỢNG MATH VÀ THIẾT LẬP THỜI GIAN CHẠY 26 9.1 ĐỐI TƯỢNG MATH 26 9.2 THIẾT LẬP THỜI GIAN CHẠY 27 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 4 CHƯƠNG 1: LÀM QUEN VỚI JAVASCRIPT 1.1 JAVASCRIPT LÀ GÌ? JavaScript được thiết kế để tạo ra các tương tác vào các trang HTML JavaScript là một ngôn ngữ kịch bản (scripting language) Một ngôn ngữ kịch bản là một ngôn ngữ lập trình nhẹ JavaScript thường được nhúng trực tiếp vào các trang HTML JavaScript là một ngôn ngữ thông dịch nghĩa là script thực hiện mà không cần sự biên dịch JavaScript thì hoàn toàn miễn phí 1.2 JAVASCRIPT CÓ THỂ LÀM GÌ? - JavaScript cung cấp cho những designer một công cụ lập trình vì HTML là không phải là một ngôn ngữ lập, nhưng JavaScript là một ngôn ngữ lập trình với cú pháp rất đơn giản. Hầu hết mọi người có thể nhúng các đoạn mã JavaScript vào những trang HTML làm cho nó trở nên sinh động hơn. - JS có thể đưa vào trang HTML một đoạn văn bản mới mà trước đó nội dung của trang web này chưa hề có. - JS có thể phản ứng lại với một sự kiện nào đó như người sử dụng nhấn chuột lên một phần tử của trang HTML hoặc thay đổi một giá trị nào đó trong ô nhập liệu … - JS có thể đọc hoặc thay đổi nội dung của các phần tử trong trang HTML. - JS có thể dùng để kiểm tra dữ liệu trước khi trình duyệt gửi dữ liệu đến máy chủ. Điều này giúp cho máy chủ không phải xử lý quá nhiều. - JS có thể dùng để phát hiện các loại trình duyệt khác nhau để có thể tải những phần thiết kế phù hợp với trình duyệt đó - JS có thể dùng để sử dụng tạo các tập tin cookie lưu trữ và truy xuất thông tin trên máy tính của người truy cập website. 1.3 SỬ DUNG JAVASCRIPT NHƯ THẾ NÀO? Để sử dụng JS rất đơn giản, chúng ta chỉ cần đưa các câu lệnh của JS vào trong thẻ <script> của HTML Ví dụ: Xuất ra trình duyệt câu “Hello World” <html> <body> <script type="text/javascript"> document.write("Hello World!"); </script> </body> </html> Chúng ta cũng có thể thêm thẻ của HTML vào JS <html> <body> <script type="text/javascript"> document.write("<h1>Hello World!</h1>"); </script> </body> </html> Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 5 Để tránh trường hợp một số trình duyệt không hỗ trợ JS và có thể gây ra lỗi khi website của chúng ta có sử dụng JS, chúng ta thêm một đoạn sau ghi chú của HTML cho nội dung của JS <html> <body> <script type="text/javascript"> <! document.write("Hello World!"); // > </script> </body> </html> 1.4 JAVASCRIPT THỰC THI LỆNH KHI NÀO? JS trong một trang web thực thi theo 2 cách sau: TH1: Thực hiện lệnh ngay khi trang web được tải về trình duyệt của người sử dụng. TH2: Thực hiện lệnh khi nhận được một tác động nào đó như nhấn nút, di chuyển chuột hoặc đưa chuột lên một phần tử nào đó của HTML … Ví dụ: TH1 <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html> Ví dụ: TH1 <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html> Ví dụ: TH2 <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 6 </script> </head> <body > <a href="#" onclick="message()">Click Here</a> </body> </html> 1.5 VỊ TRÍ JAVASCRIPT TRONG TRANG HTML? Đặt trong cặp thẻ <head> của trang web <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script> </head> <body onload="message()"> </body> </html> Đặt trong cặp thẻ <body> của trang web <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script> </body> </html> Đặt trong tập tin .js sau đó nhúng tập tin này vào website. Tạo tập tin alert.js có nội dung sau: // JavaScript Document function message() { alert("This alert box was called with the onload event"); } Sau đó tạo một tập tin HMTL nhúng tập tin .js trên vào <html> <head> <script type="text/javascript" src="alert.js"></script> </head> <body > <a href="#" onClick="message()">Click Here</a> </body> </html> Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 7 1.6 HIỂN THỊ DỮ LIỆU BẰNG JAVASCRIPT LÊN TRÌNH DUYỆT Để in ra một giá trị nào đó bằng JS ra trình duyệt chúng ta chỉ dụng câu lệnh đơn giản sau Cú pháp document.write("<giá trị cần in>"); Ví dụ: <script type="text/javascript"> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> Chúng ta có thể dùng câu lệnh này để in các giá trị có thể chuỗi, số, thẻ HTML … 1.7 GHI CHÚ TRONG JAVASCRIPT Khi chúng ta lập trình đoạn mã sẽ không đơn giản là một vài dòng mà đôi khi có thể lên đến cả ngàn dòng lệnh trên một trang nên chúng ta cần ghi chú cho các dòng lệnh, đoạn mã lệnh để khi chúng ta hoặc người khác đọc có thể hiểu được đoạn mã đó có ý nghĩa gì Có 2 kiểu ghi chú thường được sử dụng trong ngôn ngữ lập trình: Dòng ghi chú đơn bắt đầu với dấu // Ví dụ: <script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> Nhiều dòng ghi chú bắt đầu với dấu /* và kết thúc với */ Ví dụ: <script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>"); </script> Chú ý: Chúng ta có thể dùng 2 dòng ghi chú này để đóng tạm thời các dòng lệnh JS trong quá trình lập trình Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 8 CHƯƠNG 2: BIẾN TRONG JAVASCRIPT 2.1 KHAI BÁO BIẾN Biến được dùng để lưu trữ những thông tin trong quá trình xử lý một vấn đề nào đó. Như chúng ta đã học tại các trường phổ thông thì: x=5 y=6 z=x+y = 5 + 6 = 11 Với phép toán trên thì x, y, z là các biến. • x dùng để lưu trữ giá trị 5 • y dùng để lưu trữ giá trị 6 • z dùng để lưu trữ tổng giá trị của 2 biến x và y Với JS cũng vậy biến dùng để lưu trữ một giá trị nào đó có thể là một chuỗi, một đối tượng, một con số, một mảng, một phép toán nào đó Để khai báo một biến trong JavaScript chúng ta chỉ cần đặt một câu lệnh var trước tên của biến. var <tên biến>; Chúng ta có thể khai báo trước biến và không cần đưa giá trị vào biến đó Ví dụ: <script type="text/javascript"> var x; var carname; </script Chúng ta cũng có thể vừa khai báo biến và vừa gán giá trị vào biến đó. Giá trị đó được gọi là giá trị mặc định Ví dụ: <script type="text/javascript"> var x=5; var carname="Volvo"; </script> Biến có thể là một phép toán nào đó Ví dụ: <script type="text/javascript"> var x=5; y=x-5; z=y+5; </script 2.2 CÁC QUI TẮC VỀ BIẾN Tên biến phải bắt đầu bằng ký tự hoặc dấu gạch dưới ( _ ) và không có khoảng trắng. Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 9 Ví dụ: <script type="text/javascript"> var xToaDo =5; var _toaDo = 10; </script> Tên biến phân biệt chữ hoa và chữ thường nghĩa là chữ x sẽ khác với chữ X Ví dụ: <script type="text/javascript"> var xToaDo = 5; var XToaDo = 10; </script> Cách đặt tên biến nên sử dụng trong lập trình. • Đặt tên biến có đầy đủ ý nghĩa với nội dung biến sẽ chứa. • Chữ cái đầu tên trong cụm từ tạo tên biến nên là chữ thường và các chữ cái đầu tiên trong các từ còn là chữ hoa. Ví dụ: <script type="text/javascript"> var tongGiaTri; var toaDoX; var toaDoY; </script> CHƯƠNG 3: CÁC TOÁN TỬ Toán tử là một trong những phần không thể thiếu trong bất kỳ ngôn ngữ lập trình nào. Nếu chúng ta hiểu rõ toán tử thì các dòng sử lý lệnh của chúng ta sẽ gắn gọn và dể hiểu hơn. Dấu bằng (=): sử dụng để gán một giá trị. Dấu cộng (+): để cộng thêm một giá trị 3.1 HỆ THỐNG PHÉP TÍNH TRONG JAVASCRIPT Cho biến y = 5 Toán tử Miêu tả Ví dụ Kết quả + Cộng x=y+2 x=7 - Trừ x=y-2 x=3 * Nhân x=y*2 x=10 / chia x=y/2 x=2.5 % Lấy giá trị lẻ x=y%2 x=1 ++ Tăng x=++y x=6 Giảm x= y x=4 3.2 TOÁN TỬ GÁN TRONG JAVASCRIPT Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 10 Cho biến x=10 và y=5 Operator Example Same As Result = 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 /= x/=y x=x/y x=2 %= x%=y x=x%y x=0 3.3 NỐI CÁC CHUỖI KÝ TỰ Để nối các chuỗi ký tự lại với nhau, JavaScript sử dụng dấu cộng (+) Ví dụ: <script type="text/javascript"> var txt1,txt2,txt3; txt1="What a very"; txt2="nice day"; txt3=txt1+txt2; document.write(txt3); </script> Ví dụ: <script type="text/javascript"> var txt1,txt2,txt3; txt1="What a very"; txt2="nice day"; txt3=txt1+" "+txt2; document.write(txt3); </script> 3.4 PHÉP CỘNG TRONG CHUỖI VÀ SỐ Ví dụ: <script type="text/javascript"> x=5+5; document.write(x); x="5"+"5"; document.write(x); x=5+"5"; document.write(x); x="5"+5; document.write(x); </script> 3.5 TOÁN TỬ SO SÁNH Ví dụ chúng ta có một biến x có giá trị là 5. Bây giờ chúng thử xem với hệ thống toán tử so sánh trong JavaScript như thế nào. [...]... default: http://gkiss.net Trang 13 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) code to be executed if n is different from case 1 and 2 } Ví dụ: var tuoiHocVien = 8; switch(tuoiHocVien) { case 6: document.write("Bạn sẽ học lớp 1"); break; case 7: document.write("Bạn sẽ học lớp 2"); break; case 8: document.write("Bạn sẽ học lớp 3"); break; default: document.write("Xin... type="text /javascript" > showImage(); http://gkiss.net Trang 26 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) 9.2 THIẾT LẬP THỜI GIAN CHẠY JavaScript có thể thực hiện một chức năng nào đó sau một thời gian được định trước setTimeout() - Thực hiện một số lệnh với thời gian được định trước trong tương lai clearTimeout() - Hủy hàm setTimeout() Cú pháp: setTimeout( "javascript. .. sự kiện onload thườ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 để tải phiên bản thích hợp cho website đó Thuộc tính sự kiện (Event Properties): x - Tọa độ x của chuột khi có một sự kiện xảy ra http://gkiss.net Trang 21 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) y - Tọa độ y của chuột khi có một sự kiện xảy ra JavaScript định ra 5 loại sự kiện sau:... một số mã lệnh khác nhau Ví dụ: var diemHocVien_A = 8.1; if( diemHocVien_A < 3.5){ document.write( "Học lực loại }else if ( diemHocVien_A < 5){ document.write( "Học lực loại }else if ( diemHocVien_A < 6.5){ document.write( "Học lực loại }else if ( diemHocVien_A < 8){ document.write( "Học lực loại }else{ document.write( "Học lực loại } KÉM"); YẾU"); TRUNG BÌNH"); KHÁ"); GIỎI");... bỏ http://gkiss.net Trang 17 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) Khi nhấn vào nút OK chúng ta sẽ nhận được một giá trị của hộp thoại gửi về là true và ngược lại là false Cú pháp: confirm("sometext"); Ví dụ: JavaScript training function show_comfirm()... JavaScript training function show_prompt() { var name; name = prompt("Tên của bạn là gì?","Xin vui lòng nhập tên bạn vào đây"); if(name != "" && name != null){ http://gkiss.net Trang 18 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) document.write("Xin chào... value="Hiện Alert Box" /> CHƯƠNG 6: HÀM (FUNCTION) TRONG JAVASCRIPT 6.1 FUNCTION LA GÌ ? Function là một chức năng mà thông thường chúng ta gọi làm hàm Trong JavaScript hàm thường được gọi thông qua một sự kiện hoặc hàm nào đó Để trình duyệt kết hợp với JavaScript một cách linh động chúng ta có thể đưa các đoạn mã JavaScript mà một hàm và khi cần dùng đến chức năng mà hàm cung cấp chúng... onclick="show_alert()" value="Hiện Alert Box" /> http://gkiss.net Trang 19 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) 6.3 HÀM CÓ THAM SỐ Ví dụ: JavaScript training function show_alert(text) { alert(text); } var i; for (i=1;i var i; for (i=2;i var str_1 = ["a","b","c"]; var str_2 = ["d","e","f"]; var str_3 = ["g","h","i"]; var charaters; charaters = str_1.join("|"); http://gkiss.net Trang 23 Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) document.write(charaters); 8.4 . miễn phí 1.2 JAVASCRIPT CÓ THỂ LÀM GÌ? - JavaScript cung cấp cho những designer một công cụ lập trình vì HTML là không phải là một ngôn ngữ lập, nhưng JavaScript là một ngôn ngữ lập trình với. thời các dòng lệnh JS trong quá trình lập trình Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 8 CHƯƠNG 2: BIẾN TRONG JAVASCRIPT 2.1 KHAI BÁO BIẾN. Tự học Javascript Writer: TungTung (tlqtung34@student.ctu.edu.vn) http://gkiss.net Trang 7 1.6 HIỂN THỊ DỮ LIỆU BẰNG JAVASCRIPT LÊN TRÌNH DUYỆT Để in ra một giá trị nào đó bằng JS ra trình