›
›

Giáo trình DCCT JavaScript - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

pdf 79 trang Gia Huy 17/05/2022 2532
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình DCCT JavaScript - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ", để 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_dcct_javascript_trinh_do_cao_dang_truong_cao_dang.pdf

Nội dung text: Giáo trình DCCT JavaScript - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

  1. BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ š›&š› GIÁO TRÌNH MÔ ĐUN:DCCT-JAVASCRIP NGHỀ: CÔNG NGHỆ THÔNG TIN TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 245/QĐ-CĐNKTCN ngày 23 tháng 10 năm 2020 của Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ Hà Nội, năm 2021 (Lưu hành nội bộ)
  2. TUYÊN BỐ BẢN QUYỀN: Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. MÃ TÀI LIỆU:MĐCNTT 24 2
  3. LỜI GIỚI THIỆU Trong những năm qua, dạy nghề đã có những bước tiến vượt bậc cả về số lượng và chất lượng, nhằm thực hiện nhiệm vụ đào tạo nguồn nhân lực kỹ thuật trực tiếp đáp ứng nhu cầu xã hội. Cùng với sự phát triển của khoa học công nghệ trên thế giới, lĩnh vực Công nghệ thông tin nói chung đã có những bước phát triển đáng kể. Chương trình dạynghề Công nghệ thông tin đã được xây dựng trên cơ sở phân tích nghề, phần kỹ năng nghề được kết cấu theo các môđun. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình theo các môđun đào tạo nghề là cấp thiết hiện nay. Mô đun 24: DCCT-JAVASCRIPlà mô đun đào tạo chuyên môn nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu trong và ngoài nước, kết hợp với kinh nghiệm trong thực tế. Mặc dầu có rất nhiều cố gắng, nhưng không tránh khỏi những khiếm khuyết, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn. Xin chân thành cảm! Hà Nội, ngày 23 tháng 04 năm 2021 Tham gia biên soạn 1. Chủ biên Cù Ngọc Quỳnh giảng viên khoa CNTT 2. Tập thể Giảng viên Khoa CNTT Mọi thông tin đóng góp chia sẻ xin gửi về hòm thư tienphungktcn@gmail.com, hoặc liên hệ số điện thoại 0913393834-0983393834 3
  4. MỤC LỤC LỜI GIỚI THIỆU3 Bài 1: TỔNG QUAN VỀ JAVASCRIPT 10 1. Giới thiệu bài học 10 2. JavaScript và hỗ trợ của trình duyệt 10 2.1. Chuẩn hoá ngôn ngữ lập trình JavaScript 10 2.2. Đặc điểm chung của JavaScript 10 2.3. Ứng dụng của JavaScript 11 3. Sơ lược về ngôn ngữ JavaScript 12 4. Thời điểm thực hiện một đoạn Script 14 4.1.Cấu trúc của đoạn Javascript 14 4.2.Javascript trong một trang HTML 14 4.3. Môi trường viết Javascript 16 5. Các biến 16 5.1. Khai báo biến 17 5.2. Quy tắc đặt tên biến 17 5.3. Một số phong cách đặt tên biến 18 6. Các kiểu dữ liệu 18 6.1. Dữ liệu kiểu string 18 6.2. Dữ liệu kiểu number 19 6.3. Dữ liệu kiểu boolean 19 6.4. Dữ liệu kiểu object 20 6.5. Dữ liệu kiểu undefined 20 6.6. Dữ liệu kiểu array 21 6.7. Cách xác định kiểu của dữ liệu 21 7. Các toán tử 22 7.1. Các toán tử số học 22 7.2. Toán tử so sánh 23 7.3. Toán tử logic 24 7.4. Toán tử điều kiện 24 7.5. Toán tử với chuỗi 24 7.6. Toán tử typeof 25 8. Các biểu thức 25 8.1. Toán hạng 25 8.2. Toán tử 26 8.3. Độ ưu tiên của các toán tử 26 8.4. Khoảng trắng giữa các toán hạng và toán tử 27 4
  5. 9. Mảng 27 10. Các câu lệnh điều khiển 31 11. Các lệnh vòng lặp 34 12. Hàm(function) 38 12.1. Hàm là gì? 38 12.2. Phân loại hàm 39 12.3. Cách khai báo & gọi hàm "không có tham số" 40 12.4. Cách khai báo & gọi hàm "có tham số" 41 12.5. Gọi hàm thông qua một sự kiện 42 12.6. Lệnh return 43 Bài 2: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT 45 1. Các đối tượng Javascript 45 1.1. Đối tượng 45 1.2. Thuộc tính và phương thức 45 1.3. Cách dùng đối tượng 45 2.Cây phân cấp của đối tượng 45 3. Câu lệnh eval 46 4. Đối tượng String 46 5. Đối tượng Math 46 6. Đối tượng Date 47 BÀI TẬP: 47 Bài 3: CÁC ĐỐI TƯỢNG CỦA TRÌNH DUYỆT TRONG JAVASCRIPT 52 1.Đối tượng event – Khái niệm 52 2. Các sự kiện Javascript 52 3. Trình xử lý sự kiện 57 4. Các đối tượng trình duyệt thông thường 57 4.1. Mô hình đối tượng(DOM) 57 4.2.Đối tượng window 58 4.3. Đối tượng Document 58 4.4. Đối tượng History 58 5. Đối tượng Location 58 BÀI TẬP 59 Bài 4: XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO PHẦN TỬ CỦA FORM 63 1. Đối tượng Form 63 2. Đối tượng Textfield(trường văn bản) 63 3. Đối tượng Command Button 64 4. Đối tượng Checkbox 64 5. Đối tượng Radio Button 65 5
  6. 6. Đối tượng ComboBox/Select 65 7.Kiểm tra tính hợp lệ của nội dung và các trường trên form 66 BÀI TẬP: 70 BÀI TẬP JAVASCRIPT TỰ GIẢI 76 TÀI LIỆU THAM KHẢO 79 6
  7. GIÁO TRÌNH MÔ ĐUN Tên mô đun: DCCT-JAVASCRIP Mã mô đun: MĐCNTT 24 Vị trí, tính chất, ý nghĩa và vai trò của mô đun: - Vị trí: Mô đun JAVASCRIPT - Tính chất: Mô đun JAVASCRIPT áp dụng trong việc xây dựng các đọan client-side script. Truyền đạt cho sinh viên những khái niệm quan trọng về thời điểm thực hiện của một đoạn JavaScritp, biến và phạm vi sử dụng cũng như việc sử dụng các đối tượng cơ bản của JavaScript như String, Date, Math, để xử lý các dữ liệu nhập, xuất. - Ý nghĩa và vai trò của mô đun: Đây là mô đun đào tạo chuyên môn nghề, cung cấp cho sinh viên các kỹ năng cơ bản nhất của nghề Công nghệ thông tin. Mục tiêu của mô đun: - Về kiến thức: + Nắm vững cú pháp của ngôn ngữ JavaScript. + Xác định thời điểm một đoạn Script được thực hiện. - Về kỹ năng: + Sử dụng được các đối tượng cơ sở của JavaScript + Đọc hiểu sơ đồ các đối tượng. + Sử dụng các đối tượng window và document để quản lý trang web + Sử dụng các đối tượng của form, truy cập và kiểm tra các dữ liệu nhập trên form. - Về năng lực tự chủ và trách nhiệm: + Tích cực ứng dụng kỹ thuật lập trình cho các ứng dụng trong thực tế. + Khả năng tìm tài liệu, đọc hiểu tài liệu + Khả năng làm việc nhóm Nội dung mô đun 1. Nội dung tổng quát và phân bổ thời gian: Thời gian Số Tên các bài trong mô đun TT Tổng Lý Thực Kiểm số thuyết hành tra* 1 Bài 1: Tổng quan về Javascript 10 4 6 1. Giới thiệu bài học 2. JavaScript và hỗ trợ của trình duyệt 7
  8. 3. Sơ lược về ngôn ngữ JavaScript 4. Thời điểm thực hiện một đoạn Script 5. Các biến 6. Các kiểu dữ liệu 7. Các toán tử 8. Các biểu thức 9. Mảng 10. Các câu lệnh điều khiển 11. Các lệnh vòng lặp 12. Hàm(function) 2 Bài 2: Các đối tượng cơ bản trong 20 3 17 Javascript 1. Các đối tượng Javascript 2. Cây phân cấp của đối tượng 3. Câu lệnh eval 4. Đối tượng String 5. Đối tượng Math 6. Đối tượng Date 3 Bài 3: Các đối tượng của trình duyệt 25 4 20 1 trong Javascript 1. Đối tượng event – Khái niệm 2. Các sự kiện Javascript 3. Trình xử lý sự kiện 4. Đối tượng trình duyệt thông thường. 5. Đối tượng location 4 Bài 4: Xử lý Form và các sự kiện cho 34 4 29 1 phần tử của Form 1. Đối tượng Form 2. Đối tượng Textfield(trường văn bản) 3. Đối tượng Command Button 4. Đối tượng Checkbox 5. Đối tượng radio 6. Đối tượng ComboBox/lựa chọn 8
  9. 7. Kiểm tra tính hợp lệ của nội dung và các trường trên form Thi kết thúc mô đun 1 1 Cộng 90 15 72 3 9
  10. Bài 1: TỔNG QUAN VỀ JAVASCRIPT Mã bài: MĐCNTT 24.01 Giới thiệu: Giới thiệu về ngôn ngữ lập trình Javascript, những khái niệm cơ bản. Mục tiêu: - Trình bày được những khái niệm quan trọng về thời điểm thực hiện của một đoạn JavaScritp, biến và phạm vi sử dụng cũng như việc sử dụng các đối tượng cơ bản của JavaScritp như String, Date, Math, để xử lý các dữ liệu nhập, xuất. - Nắm vững cú pháp của ngôn ngữ JavaScript - Xác định thời điểm một đọan Script được thực hiện - Sử dụng được các đối tượng cơ sở của JavaScript Nội dung chính: 1. Giới thiệu bài học - Ngôn ngữ lập trình Javascript được giới thiệu đầu tiên vào năm 1995. Mục đích là để đưa những chương trình vào trang web ở trình duyệt Netscape Navigator - một trình duyệt web phổ biến những năm 1990. - JavaScript được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên là Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Có lẽ việc đổi tên như vậy là để giúp JavaScript được chú ý nhiều hơn. Bởi tại thời điểm này, Java đang được coi là một hiện tượng và trở nên phổ biến. 2.JavaScript và hỗ trợ của trình duyệt 2.1. Chuẩn hoá ngôn ngữ lập trình JavaScript Sau khi ngôn ngữ lập trình JavaScript được chấp nhận sử dụng bên ngoài Netscape, nó được chuẩn hoá bởi một tài liệu tên là ECMAScript bởi Ecma International. Do đó, bạn có thể gọi nó là JavaScript hay ECMAScript. Riêng với bản thân thì mình thích gọi nó là JavaScript hơn. Đơn giản vì mình thấy JavaScript phát âm dễ hơn và nhanh hơn. Tại thời điểm bài viết này được xuất bản (04/2017), phiên bản ECMAScript mới nhất là ECMAScript 2016 hay ECMA-262. Do đó, đã có rất nhiều sự khác biệt giữa JavaScript hiện tại so với phiên bản đầu tiên của nó. Trong các bài viết sau, mình sẽ chủ yếu giới thiệu với bạn những kiến thức nguyên thuỷ về JavaScript. Qua đó, bạn có thể tự tìm hiểu những chuẩn mới của JavaScript một cách dễ dàng. 2.2. Đặc điểm chung của JavaScript 〈 Là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, Ruby, Nó rất gần với ngôn ngữ tự nhiên của con người. Trong khi ngôn ngữ lập trình bậc thấp (low-level) như: Assembly sẽ gần với máy tính hơn. 〈 Là ngôn ngữ lập trình động (dynamic programming language): như Python, Ruby, Perl, Chúng được tối ưu hoá nhằm nâng cao hiệu suất cho lập trình 10
  11. viên. Trong khi ngôn ngữ lập trình tĩnh (static programming language): như C/C++, lại được tối ưu hoá để nâng cao hiệu suất cho phần cứng máy tính. 〈 Là ngôn ngữ lập trình kịch bản (scripting language): nghĩa là không cần biên dịch (compile) hay liên kết (linked) giống như ngôn ngữ lập trình biên dịch (C/C++, Java, ) mà nó sẽ được dịch tại thời điểm chạy. 〈 Là ngôn ngữ dựa trên đối tượng (object-based): tức nó gần giống như ngôn ngữ lập trình hướng đối tượng, ngoại trừ JavaScript không hỗ trợ tính kế thừa và đa hình. 〈 Là ngôn ngữ d ựa trên nguyên mẫu (prototype-based): là một kiểu của lập trình hướng đối tượng, trong đó các hành vi của đối tượng được sử dụng lại. 2.3. Ứng dụng của JavaScript JavaScript có rất nhiều ứng dụng trên nhiều môi trường và nền tảng khác khau: 〈 JavaScript cùng với HTML, CSS trở thành ngôn ngữ không thể thiếu đối với website 〈 Ngoài ra, có rất nhiều framework JavaScript khác nhau phía front-end: Angular.js, Angular2, ReactJS, Vue.js, Ember.js, Meteor.js, backbone, 〈 JavaScript có thể sử dụng phía server với framework : Node.js 〈 Một số database sử dụng JavaScript như là kịch bản và là ngôn ngữ query: MongoDB, CouchDB 〈 JavaScript có thể dùng để xây dựng ứng dụng Desktop với framework: Electron. Những ứng dụng nổi tiếng có thể kể đến là: Atom, Visual Studio Code, GitKraken, Wordpress.com, 〈 Để xây dựng ứng dụng điện thoại đa nền tảng (Android, IOS) có thể dùng: React-native 11
  12. 3.Sơ lược về ngôn ngữ JavaScript JavaScript là ngôn ngữ lập trình phổ biến nhất trên thế giới trong suốt 20 năm qua. Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web: 1. HTML: Giúp bạn thêm nội dung cho trang web. 2. CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web. 3. JavaScript: Cải thiện cách hoạt động của trang web. JavaScript có thể học nhanh và dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính năng của website đến việc chạy game và tạo phần mềm nền web. Hơn nữa, có hàng ngàn mẫu template JavaScript và ứng dụng ngoài kia, nhờ vào sự cống hiến của cộng đồng, đặc biệt là Github. JavaScript ngày đó và bây giờ JavaScript được tạo trong mười ngày bởi Brandan Eich, một nhân viên của Netscape, vào tháng 9 năm 1995. Được đặt tên đầu tiên là Mocha, tên của nó được đổi thành Mona rồi LiveScript trước khi thật sự trở thành JavaScript nổi tiếng như bây giờ. Phiên bản đầu tiên của ngôn ngữ này bị giới hạn độc quyền bởi Netscape và chỉ có các tính năng hạn chế, nhưng nó tiếp tục phát triển theo thời gian, nhờ một phần vào cộng đồng các lập trình viên đã liên tục làm việc với nó. Trong năm 1996, JavaScript được chính thức đặt tên là ECMAScript. ECMAScript 2 phát hành năm 1998 và ECMAScript 3 tiếp tục ra mắt vào năm 1999. Nó liên tục phát triển thành JavaScript ngày nay, giờ đã hoạt động trên khắp mọi trình duyệt và trên khắp các thiết bị từ di động đến máy tính bàn. JavaScript liên tục phát triển kể từ đó, có lục đạt đến 92% website đang sử dụng JavaScript vào năm 2016. Chỉ trong 20 năm, nó từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên bộ công cụ của các chuyên viên lập trình web. Nếu bạn đang dùng internet, vậy chắc chắn bạn đã từng sử dụng JavaScript rồi. Điều gì khiến JavaScript trở nên vĩ đại? JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript: 1. Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML; 2. Nó dễ học hơn các ngôn ngữ lập trình khác; 3. Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn; 4. Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới; 5. JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng; 6. Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database; 7. Nó giúp website tương tác tốt hơn với khách truy cập; 8. Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác. Khuyết điểm của JavaScript là gì? 12
  13. Mọi ngôn ngữ lập trình đều có các khuyết điểm. Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó. Một số khuyết điểm có thể kể đến là: 1. Dễ bị khai thác; 2. Có thể được dùng để thực thi mã độc trên máy tính của người dùng; 3. Nhiều khi không được hỗ trợ trên mọi trình duyệt; 4. JS code snippets lớn; 5. Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất. Cách hoạt động của JavaScript trên trang web là gì? JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. Nó là ngôn ngữ phía client, tức là script được tải về máy của khách truy cập và được xử lý tại đó thay vì phía server là xử lý trên server rồi mới đưa kết quả tới khách truy cập. Hãy lưu ý là các trình duyệt web phổ biến cũng hỗ trợ việc người dùng có muốn tắt JavaScript hay không. Đó là lý do bạn nên biết trang web sẽ hoạt động như thế nào torng trường hợp không có JavaScript. Điểm khác biệt giữa các ngôn ngữ lập trình khác và JavaScript là gì? Lý do vì sao JavaScript là một trong các ngôn ngữ lập trình phổ biến nhất là nó rất linh hoạt. Trên thực tế, có nhiều lập trình viên chọn nó làm ngôn ngữ chính và chỉ sử dụng các ngôn ngữ khác trong danh sách bên dưới nếu nóhọ cần dùng điều gì đó đặc biệt. Hãy xem qua các ngôn ngữ lập trình phổ biến nhất bên dưới: JavaScript hoặc JS sẽ giúp tăng tính tương tác trên website. Script này chạy trên các trình duyệt của người dùng thay vì trên server và thường JavaScript sử dụng thư vuiên của bên thứ 3 nên có thể tăng thêm chức năng cho website mà không phải code từ đầu. Viết tắt của “Hypertext Markup Language”, HTML là một trong số các ngôn ngữ lập trình phổ biến nhất trên web và xây dựng nên các khối HTML chính của một trang web. Ví dụ về HTML tags là cho đoạn văn và cho hình ảnh. PHP là ngôn ngữ phía server, khác với JavaScript chạy trên máy client. Nó thường được sử dụng trong các hệ quản trị nội dung nền PHP như PHP WordPress, nhưng cũng thường được dùng với lập trình back-end và có thể tạo ra kênh truyền thông tin hiệu quả nhất tới và từ database. CSS viết tắt của “Cascading Style Sheets” , nó giúp webmaster xác định styles và định nghĩa nhiều loại nội dung. Bạn có thể làm vậy thủ công CSS với mọi yếu tố trong HTML, nhưng nếu vậy bạn sẽ cứ lặp đi lặp lại thành phần đó mà bạn dùng ở nhiều nơi khác nhau. 13
  14. Nếu xem ngôn ngữ lập trình như là việc xây ngôi nhà, HTML sẽ định dạng kiến trúc của căn nhà, CSS sẽ là thảm và tường để trang trí ngôi nhà đẹp hơn. JavaScript thêm yếu tố tương tác trong ngôi nhà, như là việc mở cánh cửa và làm đèn sáng. Bạn vẫn có thể làm web mà không có JavaScript nhưng rủi ro là website của bạn trông như là những web thời những năm 1995. Làm thế nào để thêm JavaScript trên website của bạn? Để thêm chuỗi code JavaScript code vào trang web, bạn sẽ cần gắn tag . Ví dụ như sau: Your JavaScript code Với quy tắc cơ bản, bạn nên gắn JavaScript trong tag cho website của bạn trừ khi bạn muốn nó thực thi tại một thời điểm nhất định hoặc một yếu tố nhất định của trang web. Bạn cũng có thể lưu code JavaScript dưới file riêng và gọi nó lên mỗi khi cần trên website. Vậy, JavaScript là gì? JavaScript là ngôn ngữ lập trình mang đến sự sinh động của website. Nó khác với HTML (thường chuyên cho nội dung) và CSS (thường chuyên dùng cho phong cách), và khác hẵn với PHP (chạy trên server chứ không chạy dưới máy client). Bạn cần biết gì: 1. JavaScript là ngôn ngữ dễ học; 2. Nó được phát triển bởi Netscape, và đang được dùng trên 92% webstie; 3. JS có thể được gắn vào một element của trang web hoặc sự kiện của trang web như cú click chuột; 4. Hoạt động trên đa trình duyệt và đa thiết bị; 5. Nhanh và nhẹ hơn các ngôn ngữ lập trình khác; 6. Có thể ít an toàn hơn vì độ phổ biến của nó; 7. Bạn có thể thêm JavaScript trực tiếp vào HTML hoặc bạn có thể lưu nó trên files riêng biệt và gọi lên khi cần. 4. Thời điểm thực hiện một đoạn Script 4.1.Cấu trúc của đoạn Javascript 4.2.Javascript trong một trang HTML - Đặt các dòng mã lệnh của Javascript giữa cặp thẻ - Có thể viết nhiều đoạn mã lệnh Javascript trong cùng một tập tin HTML. Các khối mã lệnh Javascript có thể đặt bất kỳ nơi nào của trang HTML. Có thể đặt trong cặp 14
  15. thẻ hoặc trong cặp tuy nhiên ta nên đặt trong cặp thẻ để dễ kiểm soát mã lệnh và cùng dễ sửa đổi chương trình. - Có thể viết một tệp tin Javascript riêng và sau đó kết nối với một hoặc nhiều tệp tin trang web khác nhau. 15
  16. 4.3. Môi trường viết Javascript Có thể dùng chương trình soạn thảo: Frontpage, Notepate, Visual InterDev, Dreamweaver, chọn chế độ code, Dreamweaver hỗ trợ phân biệt từ khóa bằng màu chữ, hỗ trợ các hàm, thuộc tính của các tag, giúp người sử dụng thuận tiện trong việc thiết kế và viết chương trình. 5. Các biến Biến trong JavaScript là một định danh dùng để lưu trữ dữ liệu, trạng thái (số, chuỗi, đối tượng, ), thông qua định danh này chương trình sẽ làm việc với vùng nhớ bằng cách gọi định danh này. Mỗi biến có một kiểu dữ liệu riêng, dựa vào kiểu dữ liệu của biến có các thao tác khác nhau với biến. Ví dụ với biến kiểu số nguyên, số thực thì có phép cộng, trừ, nhân, chia. Biến kiểu chuỗi thì có độ dài của chuỗi, phép nối 2 chuỗi, 16
  17. 5.1. Khai báo biến 5.2. Quy tắc đặt tên biến —Dùng các ký tự a z, A Z, 1 9, dấu gạch dưới ‘_’, dấu ‘$’ —Tên biến không trùng với từ khóa JS —Tên biến không bắt đầu bởi con số —Tên biến không có ký tự khoảng trắng —Tên biến là case sensitive. Lưu ý: trong JavaScript có phân biệt chữ hoa và chữ thường. Ví dụ STDIO và Stdio được hiểu là hai tên khác nhau. Ví dụ: name_of_cat // Hợp lệ _Address // Hợp lệ 3school // Không hợp lệ vì bắt đầu bằng số position%Enemy // Không hợp lệ vì có chứa kí tự đặc biệt % Một số ví dụ về khai báo biến trong JavaScript: let a; a = 5; let b = 6; let c = a + b; console.log(a); console.log(c); let name = "Lập trình JavaScript"; console.log(name); Dòng 1: Khai báo một biến có tên là a. Dòng 2: Lưu giá trị 5 vào biến a. Dòng 3: Khai báo một biến có tên là b và lưu giá trị 6. Dòng 4: Khai báo một biến c và lưu giá trị bằng tổng của biến a vào biến b. Dòng 9: Khai báo biến name và lưu trữ chuỗi Lập trình JavaScript vào name. Nếu không gán giá trị cho biến thì biến đó sẽ có kiểu là undefined. 17
  18. Một số ví dụ khác: var d = 7 + 1 + 4; var e = 8.23; var f; f = d + 3; var name = "Nguyễn Nghĩa"; var address = "Hồ Chí Minh"; var info = name + address; 5.3. Một số phong cách đặt tên biến Phong cách đặt tên biến cũng rất quan trọng, để dễ dàng hiểu ý nghĩa của biến: 〈 Tên biến phải là một danh từ. 〈 Tên biến phải mang ý nghĩa rõ ràng. Underscore Mô tả: Mỗi từ cách nhau bởi mỗi dấu gạch dưới. Ví dụ: name_of_cat, title_website, windows_height, Camel case Mô tả: Những chữ cái đầu của mỗi từ đều viết hoa, những chữ cái còn lại đều viết thường. Ví dụ: NameOfCat, TitleWebsite, WindowsHeight, Một phong cách được biến tấu từ Camel Case là những chữ cái đầu tiên viết thường và những chữ sau đó tuân theo Camel Case Ví dụ: nameOfCat, titileWebsite, windowsHeight, 6. Các kiểu dữ liệu - Trong JavaScript, các kiểu dữ liệu được chia thành những loại cơ bản như sau: o string o number o boolean o object o undefined o array (đây là một trường hợp đặc biệt của kiểu dữ liệu object) 6.1. Dữ liệu kiểu string - Trong JavaScript, các dữ liệu thuộc kiểu string (hay còn được gọi là "chuỗi") là một tập hợp gồm các ký tự, chúng được viết bên trong cặp dấu nháy kép hoặc cặp dấu nháy đơn. Ví dụ: o Giá trị của biến a là một chuỗi được viết bên trong cặp dấu nháy kép. 18
  19. o Giá trị của biến b là một chuỗi được viết bên trong cặp dấu nháy đơn. var a = "Tài liệu học HTML"; var b = 'Lập Trình Web'; 6.2. Dữ liệu kiểu number - Trong JavaScript, các dữ liệu thuộc kiểu number (hay còn được gọi là "số") là một tập hợp của các con số (0 - 9) không chứa dấu khoảng trắng và có thể chứa dấu trừ (-) nằm ở đầu để đại diện cho số âm. Ví dụ: o Giá trị của biến a là số 22. o Giá trị của biến b là số -1993. var a = 22; var b = -1993; - Nếu một số được đặt bên trong gặp dấu nháy kép hoặc cặp dấu nháy đơn thì nó sẽ bị chuyển sang kiểu dữ liệu string. Ví dụ: o Giá trị của biến a là chuỗi 22. o Giá trị của biến b là chuỗi -1993. var a = "22"; var b = '-1993'; 6.3. Dữ liệu kiểu boolean - Trong JavaScript, các dữ liệu thuộc kiểu boolean chỉ có thể nhận một trong hai giá trị, đó là: § true (đúng) § false (sai) - Có hai cách để nhận giá trị kiểu boolean, đó là: § Gán giá trị trực tiếp. § Nhận được từ một điều kiện. 19
  20. Ví dụ: o Giá trị của biến a là true. o Giá trị của biến b là false. o Giá trị của biến c là true, vì điều kiện (6 > 2) là đúng. o Giá trị của biến d là false, vì điều kiện (6 > 10) là sai. var a = true; var b = false; var c = 6 > 2; var d = 6 > 10; 6.4. Dữ liệu kiểu object - Trong JavaScript, các dữ liệu thuộc kiểu object (hay còn được gọi là "đối tượng") là một tập hợp gồm những cái tên và mỗi cái tên sẽ chứa đựng một giá trị dữ liệu. - Lưu ý: Những cái tên còn được gọi là "thuộc tính" của đối tượng, giá trị của những cái tên còn được gọi là "giá trị thuộc tính của đối tượng". Ví dụ: Đoạn mã bên dưới dùng để tạo một đối tượng có tên là SinhVien, nó có ba thuộc tính: o Thuộc tính name với giá trị là chuỗi Nhân. o Thuộc tính gender với giá trị là chuỗi Nam. o Thuộc tính year với giá trị là số 1993. var SinhVien = { name:"Nhân", gender:"Nam", year:1993 } 6.5. Dữ liệu kiểu undefined - Trong JavaScript, khi một biến được khai báo mà không gán giá trị thì biến đó sẽ có giá trị là undefined và kiểu dữ liệu cũng là undefined. Ví dụ: 20
  21. var myName; //biến myName sẽ có giá trị là undefined và kiểu dữ liệu là undefined - Ngoài ra, giá trị undefined còn có thể nhận được bằng cách gán trực tiếp. Ví dụ: var myName = "Nguyễn Thành Nhân"; //biến myName có kiểu dữ liệu là string myName = undefined; //biến myName có kiểu dữ liệu là undefined 6.6. Dữ liệu kiểu array - Trong JavaScript, array còn được gọi là mảng, nó là một trường hợp đặc biệt của đối tượng. (Thật ra, mảng có kiểu dữ liệu là object) - Mảng là một loại biến đặc biệt có thể lưu trữ nhiều giá trị đồng thời, mỗi giá trị được gọi là một phần tử mảng. Ví dụ: Đoạn mã bên dưới dùng để tạo một mảng có tên là mobile và nó có ba phần tử: o Phần tử thứ nhất có giá trị là HTC. o Phần tử thứ nhất có giá trị là Nokia. o Phần tử thứ nhất có giá trị là SamSung. var mobile = ["HTC","Nokia","SamSung"]; 6.7. Cách xác định kiểu của dữ liệu - Để xác định kiểu của một dữ liệu nào đó thì ta sử dụng toán tử typeof Ví dụ: var a = typeof ""; //string var b = typeof "Lập Trình Web"; //string var c = typeof 1993; //number 21
  22. var d = typeof true; //boolean var e = typeof false; //boolean var f = typeof {name:"Nhân", gender:"Nam", year:1993}; //object var g = typeof undefined; //undefined var h = typeof ["HTC","Nokia","SamSung"]; //object - Ta cũng có thể kiểm tra kiểu dữ liệu của một biến. Ví dụ: var year = 1993; var a = typeof year; //number 7. Các toán tử Toán tử JavaScript gồm có các toán tử số học, các toán tử so sánh, toán tử logic và các toán tử với chuỗi ký tự Cơ bản về các biểu thức và toán tử trong Javascript, các toán tử cần nắm vững ở đây là các toán tử số học toán tử gán toán tử so sánh toán tử logic các toán tử với chuỗi Các toán tử gán trong Javascript Toán tử gán được dùng để gán giá trị ở bên phải toán tử vào biến ở bên trái toán tử. Có các toán tử gán sau: Toán tử Ví dụ Ý nghĩa = x = y gán y vào x += x += y x = x + y -= x -= y x = x - y *= x *= y x = x * y /= x /= y x = x / y %= x %= y x = x % y 7.1.Các toán tử số học Các toán tử số học này thực hiện trên các số - dữ liệu dạng số (cụ thể hoặc biến). Toán tử Mô tả Ví dụ + phép cộng 25 + 5 = 30 - phép trừ 10 - 5 = 5 22
  23. * phép nhân 2*3 = 6 / phép chia 20 / 2 = 10 % lấy phần dư của phép chia 56 / 3 = 2 ++ Tăng thêm 1 var a = 10; a ++; //giá trị a là 11 giảm đi 1 var a = 10; a ; //giá trị a là 9 var x =10+5; document.write(x); // In ra: 15 Có thể sử dụng nhiều số hạng: var x =10; var y = x +5+22+45+6548; document.write(y); //In ra : 6630 Ví dụ về phép chia lấy phần dư modulus var myVariable =26%6; //myVariable bằng 2 Chú ý về phép toán tăng thêm 1 ++ và giảm 1 : Khi viết biểu thức thì toán tử có thể ở bên trước hoặc sau biến cần tăng giảm, kết quả trả về của biểu thức có sự khác nhau tùy cách viết Viết sau biến như: a = var++, b = var thì giá trị trả về của biểu thức (giá trị gán vào a, b) là giá trị gốc của var, còn bản thân var vẫn được tăng, giảm var a =0; b =10; var a = b++; //a sẽ là 10; b là 11 Nếu toán tử ++ viết bên trái biến, thì giá trị biểu thức trả về chính là biến sau khi tăng giảm var a =0; b =10; var a =++b; //a sẽ là 11; b là 11 7.2. Toán tử so sánh Toán tử so sánh sử dụng trong các biểu thức về logic để so sánh bằng nhau, khác nhau. Nó trả về giá trị true false JavaScript có một số toán tử so sánh, ví dụ so sánh bằng: == 23
  24. var num =10; // num == 8 will return false Bảng toán tử so sánh Toán tử Diễn tả Ví dụ == so sánh bằng 5 == 10 false === giống nhau (cùng giá trị và kiểu dữ liệu) 5 === 10 false != khác giá trị 5 != 10 true !== Khác giá trị và kiểu 10 !== 10 false > lớn hơn 10 > 5 true >= lớn hơn hoặc bằng 10 >= 5 true 2)&&(10 2 là true, 10 < 15 là false; //a = true && false; 7.4. Toán tử điều kiện variable = (condition) ? value1: value2; Nhận giá trị value1 nếu điều kiện là true, nhận value2 nếu điều kiện false var isAdult = (age < 18) ? "Too young": "Old enough"; //isAdult là Too young nếu age nhỏ hơn 18 //isAdult là Old enough nếu age lớn hơn hoặc bằng 18 7.5. Toán tử với chuỗi Toán tử với chuỗi sử dụng nhiều là nối hai chuỗi lại với nhau, sử dụng toán tử + để nối. Lưu ý toán tử này có thể nối số vào chuỗi. var mystring1 = "Học viết mã "; 24
  25. var mystring2 = "JavaScript."; document.write(mystring1 + mystring2); //sẽ viết ra: Học viết mã JavaScript. Xuất biến ra chuỗi với kỹ thuật Template Literal Bạn có thể đưa vào chuỗi nằm giữa dấu `` (không phải '' hay ""), trong chuỗi đó có thể chèn biểu thức với ký hiệu ${biểu-thức} let tb =`Hai nhân hai là ${2*2}`; let name ="XuanThuLab"; let msg =`Xin chao ${name}`; console.log(tb); console.log(msg); 7.6. Toán tử typeof Toán tử typeof trả về kiểu dữ liệu cần kiểm tra của một biến, một giá trị. var a = 1; var b = "Hi"; var c = true; var d = null; var e; console.log(typeof(a)); // trả về number console.log(typeof(b)); // trả về string console.log(typeof(c)); // trả về boolean console.log(typeof(d)); // trả về object console.log(typeof(e)); // trả về undefined console.log(typeof(f)); // trả về undefined 8. Các biểu thức - Tương tự như trong toán học, biểu thức trong JavaScript cũng là một tập hợp gồm các toán hạng và các toán tử. 8.1. Toán hạng - Điểm khác nhau giữa toán hạng trong JavaScript và toán hạng trong toán học chính là toán hạng trong JavaScript thì không nhất thiết phải là một chữ số, nó có thể là một giá trị hoặc một biến. - Ví dụ, ở kịch bản bên dưới, giá trị của biến b là một biểu thức (trong đó biến a là một toán hạng). 25
  26. var a = 50; var b = a + 20; //Biến b sẽ có giá trị là 70 8.2. Toán tử - Các toán tử trong JavaScript có chức năng giống với toán tử trong toán học. - Tuy nhiên, một vài toán tử trong JavaScript có cách viết khác so với cách viết toán tử trong toán học. - Bên dưới là danh sách những toán tử cơ bản nhất trong JavaScript: Toán tử Tên gọi Ví dụ Kết quả + Phép cộng 10 + 4 14 - Phép trừ 10 - 4 6 * Phép nhân 10 * 4 40 / Phép chia 10 / 4 2.5 % Phép chia lấy phần số dư 10 % 4 2 - Phép cộng trong JavaScript tương đối khác so với phép cộng trong toán học. Trong JavaScript: o Số có thể cộng số => cho ra số. o Số có thể cộng chuỗi (hoặc chuỗi có thể cộng số) => cho ra chuỗi. o Chuỗi có thể cộng chuỗi => cho ra chuỗi. Ví dụ: var a = 5 + 7; //Biến a sẽ có giá trị là 12 var b = 1993 + "Thành Nhân"; //Biến b sẽ có giá trị là 1993Thành Nhân var c = "Thành Nhân" + 1993; //Biến c sẽ có giá trị là Thành Nhân1993 var d = "Nguyễn" + " Thành Nhân"; //Biến d sẽ có giá trị là Nguyễn Thành Nhân 8.3. Độ ưu tiên của các toán tử - Một biểu thức đơn giản sẽ bao gồm hai toán hạng và một toán tử, ví dụ: 5 + 9 - Một biểu thức phức tạp sẽ có nhiều toán hạng và nhiều toán tử (điều đó đồng nghĩa với việc trong một biểu thức phức tạp sẽ bao gồm nhiều biểu thức đơn giản), ví dụ: 7 + 8 * (10 - 2) + 3 * 4 26
  27. - Thông thường, trong một biểu thức phức tạp, các biểu thức đơn giản sẽ thực thi lần lượt theo thứ tự từ trái sang phải. Tuy nhiên, tùy vào độ ưu tiên của toán tử sẽ quyết đinh biểu thức nào được thực thi trước. - Ví dụ, thứ tự thực thi của biểu thức 7 + 8 * (10 - 2) + 3 * 4 như sau: o 7 + 8 * (10 - 2) + 3 * 4 => 7 + 8 * 8 + 3 * 4 o 7 + 8 * 8 + 3 * 4 => 7 + 64 + 3 * 4 o 7 + 64 + 3 * 4 => 7 + 64 + 12 o 7 + 64 + 12 => 71 + 12 o 71 + 12 => 83 - Dưới đây là bảng tổng hợp mức độ ưu tiên của một số toán tử cơ bản nhất trong JavaScript Mức độ ưu tiên Toán tử 1 ( ) 2 * / % 3 + - 8.4. Khoảng trắng giữa các toán hạng và toán tử - Trong JavaScript, dấu khoảng trắng giữa các toán hạng và toán tử là không quan trọng (có cũng được, không có cũng không sao) - Ví dụ, ba biểu thức bên dưới có cùng một kết quả: o 7 + 8 - 3 * 4 o 7+8-3*4 o 7+ 8- 3 *4 9. Mảng Mảng Array là một đối tượng định nghĩa sẵn trong JS, nó là đối tượng chứa danh sách các dữ liệu. Có hai cách tạo ra đối tượng mảng, sử dụng toán tử new và khởi tạo bằng ký hiệu Cách 1:Tạo mảng với new Array(), ví dụ: var courses =newArray("HTML","CSS","JS"); Cách 2:Tạo mảng với khai báo dữ liệu trong [] var courses =["HTML","CSS","JS"]; Mỗi phần từ có một chỉ số trong mảng, phần tử thứ nhất chỉ số là 0. Để truy cập tới phần tử mảng dùng ký hiệu tên-mảng[chỉ-số-phần-tử] var cacmonhoc =newArray("HTML","CSS","JS"); var monhoc = courses[0];// HTML 27
  28. cacmonhoc[1]="C++";//đổi phần tử thứ 2 thành C++ Khi cố gắng truy cập phần tử mảng, mà phần tử đó không tồn tại thì nó trả về giá trị bằng undefined var courses =newArray("HTML","CSS","JS"); document.write(courses[10]); //Xuất ra "undefined" vì phần tử thứ 10 không có Tạo mảng bằng cách chỉ định số lượng phần tử Ở cách tạo thứ 2 này, các phần tử không được gán giá trị ngay, mảng sẽ tạo ra số lượng phần tử yêu cầu sau đó giá trị từng phần tử được gán sau. var courses =newArray(3); courses[0]="HTML"; courses[1]="CSS"; courses[2]="JS"; Một số thuộc tính và phương thức Một số thuộc tính và phương thức định nghĩa sẵn cho các đối tượng mảng Số lượng phần tử trong mảng Thuộc tính length cho biết số lượng phần tử trong mảng var courses =["HTML","CSS","JS"]; document.write(courses.length); //Outputs 3 Kết hợp 2 mảng Để kết hợp 2 mảng thành một mảng, dùng phương thức concat var c1 =["HTML","CSS"]; var c2 =["JS","C++"]; var courses = c1.concat(c2); Ví dụ trên có được mảng courses bằng cách nối c2 vào c1. Vậy courses có bốn phần tử: HTML, CSS, JS, C++. Nhớ là concat không tác động gì trên mảng gốc, mà nó chỉ sử dụng các mảng gốc để tạo ra mảng kết hợp mới. Vậy mảng c1, c2 vẫn không có sự thay đổi nào Duyệt qua các phần tử mảng bằng forEach courses.forEach(function(item, index, array){ console.log(item, index); }); 28
  29. //HTML 0 //CSS 1 //JS 2 Thêm một phần tử vào cuối bằng push courses.push("GO"); Thêm một phần tử vào đầu bằng unshift courses.unshift("C++"); Xóa phần tử cuối của mảng bằng pop courses.pop(); Xóa phần tử đầu của mảng bằng shift courses.shift(); Xóa các phần tử theo chỉ số splice //Xóa 2 phần từ bắt đầu phần tử ở vị trí index courses.splice(index,2); Nhân bản một mảng với slice var courses2 = courses.slice(); Mảng kết hợp Nhiều ngôn ngữ lập trình có hỗ trợ đánh chỉ số không chỉ là bằng số mà có thể bằng text, đây là các mảng kết hợp. Rất tiếc là JavaScript không hỗ trợ loại mảng này. Tuy nhiên, bạn nhớ lại về đối tượng, truy cập thuộc tính đối tượng hoạt động khá giống với mảng kết hợp. var person =[];//mảng rỗng person["name"]="John"; person["age"]=46; document.write(person["age"]); //Outputs "46" Bạn thấy person hoạt động giống như một đối tượng. Các chỉ số name, age không phải là chỉ số mảng mà là thuộc tính của đối tượng person. Do đó nếu bạn lấy số phần tử mảng person.length sẽ trả về 0 Cách đơn giản để duyệt qua các phần tử mảng var index; var a =["a","b","c"]; 29
  30. for(index =0; index < a.length;++index){ console.log(a[index]); } 30
  31. 10. Các câu lệnh điều khiển Câu lệnh điều kiện if, else if và các vòng lặp như vòng lặp for, vòng lặp while, vòng lặp do while, lệnh rẽ nhánh switch, break, continue Khối lệnh trong Javascript Nhiều câu lệnh Javascript có thể nhóm với nhau tạo ra khối lệnh, các khối lệnh được nhóm bằng cặp dấu ngoặc nhọn {}, các khối thường sử dụng trong các câu lệnh điều khiển rẽ nhánh, vòng lặp { //Các dòng lệnh trong khối } Khối lệnh cũng có thể dán nhãn cho nó, để sau này từ vị trí khác, bạn có thể nhảy đến thi hành các lệnh trong khối (với lệnh continue, break) labelexamp :{ //Các dòng lệnh trong khối có nhãn labelexamp } Chú ý khai báo biến với var thì nó không bị giới hạn trong khối, khai báo biến với let thì phạm vị hiệu lực chỉ trong khối khai báo var a =5; { var a =2; } console.log(a); //Xuất ra là 2 => biến a trong và ngoài khối là 1 let b =10; { let b =20; } //Xuất ra là 10 => biến b trong và ngoài khối là khác nhau alert(b); Lệnh if, if else Lệnh if : nếu điều kiện là đúng (true) thì thi hành các lệnh trong khối - nếu điều khiện sai false thì khối lệnh sau nó bị bỏ qua, cú pháp là: if(điều_kiện){ //Các dòng lệnh trong khối 31
  32. } Ví dụ: var myNum1 =7; var myNum2 =10; if(myNum1 myNum2){ alert("Đây là khối lệnh 1"); } else{ alert("Đây là khối lệnh 2"); } Chạy code trên hiện thị thông báo: Đây là khối lệnh 2 vì myNum1 > myNum2 là false Khối lệnh else if else if sẽ tạo ra câu lệnh điều kiện if mới nếu điều kiện trước đó false var course =1; if(course ==1){ document.write("HTML Tutorial"); 32
  33. }elseif(course ==2){ document.write("CSS Tutorial"); }else{ document.write("JavaScript Tutorial"); } Chạy code trên, trình duyệt sẽ hiện thị HTML Tutorial, nếu bạn gán biến course thì hiện thị CSS Tutorial, nếu gán course khác với 1 và 2 thì sẽ hiện thị JavaScript Tutorial Lệnh switch Trong trường hợp bạn có rẽ nhánh (nhiều điều kiện) khác nhau thay vì sử dụng nhiều else if hãy dùng switch với cú pháp switch(expression){ case n1: // thi hành nếu expression bằng n1 break; case n2: // thi hành nếu expression bằng n2 break; default: // mặc định thi hành nếu expression không bằng giá trị nào ở trên } Ví dụ: var day =2; switch(day){ case1: document.write("Monday"); break; case2: document.write("Tuesday"); break; case3: document.write("Wednesday"); break; default: document.write("Another day"); 33
  34. } // Outputs "Tuesday" Lưu ý từ khóa break; để điều hướng ra khỏi khối. Thường bạn cần có break; ở cuối mỗi khối của lệnh switch, nếu thiếu break thì sẽ không thoát lệnh mà sẽ thi hành khối tiếp theo. Ở ví dụ trên, nếu bỏ đi break, thì script sẽ chạy từ điểm rẽ nhánh case 2: cho đến cuối (xuất ra: Tuesday, Wednesday, Another day) Từ khóa default: định nghĩa khối mặc định, khối này thi hành nếu tất cả các điều kiện rẽ nhánh không thỏa mãn. 11. Các lệnh vòng lặp Vòng lặp for Cú pháp: for(statement1; statement2; statement3){ Khối lệnh thi hành } 〈 statement1 : lệnh thi hành trước khi vòng lặp for bắt đầu 〈 statement2 : điều kiện kiểm tra trước mỗi lần thi hành khối lệnh for (true thì khối lệnh sẽ thi hành, false sẽ khối for sẽ không thi hành - thoát lặp) 〈 statement3 : thi hành sau mỗi lần một vòng hoàn thành Ví dụ: for(i=1; i "); } //In ra 1 2 3 4 5 Có thể bỏ qua statement1 (vẫn giữ lại dấu ;) var i =1; for(; i "); } //In ra 1 34
  35. 2 3 4 5 Tương tự bạn có thể bỏ qua statement3 và statement2 (vẫn giữ ;), lưu ý bạn cũng có thể sử dụng lệnh break; để thoát vòng lặp. var i =0; for(;;i+=2){ if(i>10)break;//Thoát vòng lặp document.write(i +" "); } for in for in duyệt qua các key của đối tượng đếm được (không dùng cho mảng) //Cú pháp for(let yourvar in object){ } //Ví dụ let ob ={key1:1, key2:2}; for(let k in ob){ console.log(k); } //In ra: key1, key2 for of Lệnh for of duyệt qua các đối tượng. //Cú pháp for(let yourvar in objects){ } //Ví dụ let a =["A","B","C"]; for(let e in a){ console.log(e); } //In ra A,B,C Vòng lặp while 35
  36. Thi hành khối lệnh khi mà điều kiện kiểm tra vẫn là true while(điều-kiện){ //Khối lệnh } Đầu tiên nó kiểm tra điều kiện, nếu true sẽ thi hành khối lệnh. Đến cuỗi khối lại kiểm tra điều kiện, nếu điều kiện vẫn là true thì lại tiếp tục thì hành vòng mới của khối lệnh. Ví dụ var i=0; while(i "); i++; } //In ra 0 1 2 3 4 5 Lưu ý về việc sau một số vòng thì điều kiện phải là false nếu không vòng lặp sẽ lặp lại vô tận. Vòng lặp do while Giống với vòng lặp while nhưng khối lệnh thi hành luôn mà không kiểm tra điều kiện trước, khi khối lệnh thi hành xong mới kiểm tra điều kiện để xem có lặp lại hay không Cú pháp do{ //Khối lệnh } while(condition); Ví dụ var i=20; do{ document.write(i +" "); 36
  37. i++; } while(i "); if(i >=7){ break;//Thoát lặp nếu i >=7 } } //In ra các số: (bỏ qua 5) 0 1 2 3 4 6 7 Lệnh continue còn dùng để nhảy đến một khối lệnh có nhãn bằng cú pháp continue nhãn_khối_lệnh; 37
  38. Lệnh break còn dùng để hủy thi hành khối lệnh bên ngoài có nhãn, với cú pháp: break nhãn_khối_lệnh_ngoài; Phần nói về các đối tượng có kiểu liệt kê được (ví dụ như mảng, danh sách ), còn có các lệnh duyệt qua từng phần tử liệt kê được đó với các lệnh for in, for of. 12. Hàm(function) 12.1. Hàm là gì? - Hàm là một tập hợp gồm nhiều câu lệnh, các câu lệnh này được sắp xếp theo một thứ tự xác định để xây dựng thành một chức năng cụ thể - Mỗi hàm sẽ có một cái tên và hàm chỉ thực thi khi nó được gọi đến tên. Ví dụ: o Trong kịch bản bên dưới, chúng ta có một hàm tên là GioiThieuBanThan. o Hàm này gồm ba câu lệnh với chức năng là hiển thị một câu giới thiệu về bản thân. function GioiThieuBanThan(){ var name = "Nhân"; var year = 1993; document.write("Tôi là " + name + " sinh năm " + year); } - Một hàm có thể được gọi nhiều lần (hay nói cách khác là không giới hạn số lần gọi hàm). Ví dụ: o Trong kịch bản bên dưới, hàm GioiThieuBanThan được gọi đến ba lần function GioiThieuBanThan(){ var name = "Nhân"; var year = 1993; document.write("Tôi là " + name + " sinh năm " + year); } GioiThieuBanThan(); //Gọi lần thứ nhất document.write(" "); 38
  39. GioiThieuBanThan(); //Gọi lần thứ hai document.write(" "); document.write(" "); GioiThieuBanThan(); //Gọi lần thứ ba 12.2. Phân loại hàm - Hàm được chia làm hai loại cơ bản: hàm không có tham số & hàm có tham số - Hàm không có tham số là hàm mà kết quả thực thi của nó luôn luôn không thay đổi. Ví dụ: o Hàm GioiThieuBanThan bên dưới là một hàm không có tham số o Kết quả thực thi của nó luôn là hiển thị dòng chữ "Tôi là Nhân sinh năm 1993" function GioiThieuBanThan(){ var name = "Nhân"; var year = 1993; document.write("Tôi là " + name + " sinh năm " + year); } GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 - Hàm có tham số là loại hàm mà khi gọi hàm ta phải truyền giá trị vào cho nó. Tùy vào giá trị được truyền mà hàm sẽ thực thi và cho ra kết quả khác nhau. Ví dụ: - Hàm GioiThieuBanThan bên dưới có hai tham số là x & y - Về nội dung của hàm: o Biến name được gán giá trị bằng với giá trị của tham số x o Biến year được gán giá trị bằng với giá trị của tham số y - (1) Trong lần gọi hàm đầu tiên: o Tham số x được truyền giá trị là Trình Giảo Kim ==> biến name có giá trị Trình Giảo Kim 39
  40. o Tham số y được truyền giá trị là 1993 ==> biến year có giá trị 1993 ==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Trình Giảo Kim sinh năm 1993 - (2) Trong lần gọi hàm thứ hai: o Tham số x được truyền giá trị là La Thành ==> biến name có giá trị La Thành o Tham số y được truyền giá trị là 1989 ==> biến year có giá trị 1989 ==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là La Thành sinh năm 1989 - (3) Trong lần gọi hàm thứ ba: o Tham số x được truyền giá trị là Tần Thúc Bảo ==> biến name có giá trị Tần Thúc Bảo o Tham số y được truyền giá trị là 1985 ==> biến year có giá trị 1985 ==> Kết quả thực thi của hàm sẽ là hiển thị dòng chữ Tôi là Tần Thúc Bảo sinh năm 1985 function GioiThieuBanThan(x,y){ var name = x; var year = y; document.write("Tôi là " + name + " sinh năm " + year); } GioiThieuBanThan("Trình Giảo Kim", 1993); //Tôi là Trình Giảo Kim sinh năm 1993 GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989 GioiThieuBanThan("Tần Thúc Bảo", 1985); //Tôi là Tần Thúc Bảo sinh năm 1985 12.3. Cách khai báo & gọi hàm "không có tham số" - Để khai báo (khởi tạo) một hàm thuộc thoại không có tham số, ta sử dụng cú pháp như sau: functiontên hàm() { //Danh sách các câu lệnh của hàm } - Để gọi một hàm thuộc loại không có tham số, ta sử dụng cú pháp: 40
  41. tên hàm() Ví dụ: Tạo một hàm có tên GioiThieuBanThan với chức năng hiển thị câu "Tôi là Nhân sinh năm 1993" function GioiThieuBanThan(){ document.write("Tôi là Nhân sinh năm 1993"); } GioiThieuBanThan(); //Gọi hàm 12.4. Cách khai báo & gọi hàm "có tham số" - Để khai báo một hàm thuộc thoại có tham số, ta sử dụng cú pháp như sau: functiontên hàm(tham số thứ nhất, tham số thứ hai, tham số thứ ba, ) { //Danh sách các câu lệnh của hàm } - Tham số có tính năng gần giống như biến, tuy nhiên tham số thì chỉ có thể sử dụng bên trong hàm. - Khi khai báo hàm, ta khai báo danh sách các tham số thì điều này cũng gần giống như việc khai báo danh sách các biến. - Đối với hàm có tham số, khi gọi hàm ta phải truyền giá trị cho các tham số theo cú pháp như sau: tên hàm(giá trị tham số thứ nhất, giá trị tham số thứ hai, giá trị tham số thứ ba, ) - Việc truyền giá trị cho tham số cũng tương tự như việc gán giá trị cho biến, nếu ta gọi hàm mà không truyền giá trị cho các tham số thì mặc định các tham số sẽ có giá trị là undefined Ví dụ: o Tạo một hàm có tên là GioiThieuBanThan o Hàm GioiThieuBanThan có hai tham số là name & year function GioiThieuBanThan(name, year){ 41
  42. document.write("Tôi là " + name + " sinh năm " + year); } GioiThieuBanThan(); //Tôi là undefined sinh năm undefined GioiThieuBanThan("Trình Giảo Kim"); //Tôi là Trình Giảo Kim sinh năm undefined GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989 GioiThieuBanThan("Tần Thúc Bảo", 1985); //Tôi là Tần Thúc Bảo sinh năm 1985 - Để tránh tình trạng tham số bị nhận giá trị undefined thì trong lúc khai báo hàm ta có thể gán giá trị mặc định cho các tham số, khi đó nếu lúc gọi hàm ta không truyền giá trị cho tham số thì tham số sẽ sử dụng giá trị mặc định được gán lúc khai báo. Ví dụ: o Hàm GioiThieuBanThan bên dưới có hai tham số là name & year o Tham số là name được gán giá trị mặc định là Nhân o Tham số là year được gán giá trị mặc định là 1993 function GioiThieuBanThan(name = "Nhân", year = 1993){ document.write("Tôi là " + name + " sinh năm " + year); } GioiThieuBanThan(); //Tôi là Nhân sinh năm 1993 GioiThieuBanThan("Trình Giảo Kim"); //Tôi là Trình Giảo Kim sinh năm 1993 GioiThieuBanThan("La Thành", 1989); //Tôi là La Thành sinh năm 1989 12.5. Gọi hàm thông qua một sự kiện - Ta có thể thiết lập việc một hàm nào đó sẽ được thực thi khi một sự kiện nào đó xảy ra (Ví dụ như: khi người dùng click chuột vào một phần tử, dí chuột vào một phần tử, ) bằng cách đặt câu lệnh gọi hàm vào bên trong thuộc tính sự kiện của phần tử. Ví dụ: Bấm vào đây 42
  43. function GioiThieu(){ alert("Tôi là Nguyễn Thành Nhân sinh năm 1993"); } 12.6. Lệnh return - Lệnh return dùng để trả về cho hàm một giá trị. (Sau khi thực thi xong, hàm sẽ có một giá trị, lúc đó nó có thể được sử dụng giống như một biến) Ví dụ 1: function number(){ return (10*10 - 50); } var result_01 = number(); var result_02 = 7 + number() - 30; var result_03 = "Hello: " + number(); Ví dụ 2: function number(a,b){ return (a+b)*2; } var result_01 = number(5,10); var result_02 = number(2,8) - 5; var result_03 = 5*number(1,4) - 49; Ví dụ 3: 43
  44. function ThongTin(name, year){ var hoten = "Họ tên: " + name; var namsinh = "Năm sinh: " + year; var thongtin = hoten + " " + namsinh; return thongtin; } var SinhVien = "SINH VIÊN " + ThongTin("Nguyễn Thành Nhân", 1993); document.write(SinhVien); 44
  45. Bài 2: CÁC ĐỐI TƯỢNG CƠ BẢN TRONG JAVASCRIPT Mã bài: MĐCNTT17.02 Giới thiệu: Giới thiệu về các đối tượng cơ bảntrong Javascirpt. Mục tiêu: - Làm việc trên các đối tượng cơ bản - Sử dụng các thuộc tính và phương thức của đối tượng Nội dung chính: 1. Các đối tượng Javascript 1.1. Đối tượng - Thuộc tính (biến) dùng để định nghĩa đối tượng và các phương thức (hàm) tác động tới dữ liệu đều nằm trong đối tượng. - Ví dụ: một chiếc xe hơi là một đối tượng. Các thuộc tính của nó là cấu tạo, kiểu dáng và màu sắc. Hầu hết các chiếc xe hơi đều có một vài phương thức chung như go(), brake(), reverse(). 1.2. Thuộc tính và phương thức - Để truy cập thuộc tính của đối tượng, chúng ta phải chỉ ra tên đối tượng và thuộc tính của nó: objectName.propertyName - Để truy cập phương thức của đối tượng, chúng ta phải chỉ ra tên đối tượng và thuộc tính của nó: objectName.method() 1.3. Cách dùng đối tượng - Khi tạo trang web, chúng ta cần chèn: - Các đối tượng trình duyệt - Các đối tượng có sẵn (thay đổi phụ thuộc vào ngôn ngữ kịch bản được sử dụng) - HTML elements - Chúng ta cũng có thể tạo ra các đối tượng để sử dụng theo yêu cầu của mình. 2.Cây phân cấp của đối tượng Đối tượng của trình duyệt Đối tượng kịch bản 45 Phần tử HTML
  46. 3. Câu lệnh eval - Hàm eval được dùng để đánh giá một chuỗi mã lệnh mà không cần tham chiếu đến bất cứ đối tượng cụ thể nào. - Chuỗi có thể là một biểu thức JavaScript, một câu lệnh hoặc một nhóm câu lệnh - Biểu thức có thể bao gồm nhiều biến và nhiều thuộc tính của một đối tượng. var x = 5; var z = 10; document.write(eval(“x + z + 5”)); 4. Đối tượng String - Đối tượng string được dùng để thao tác và làm việc với chuỗi văn bản. - Chúng ta có thể tách chuỗi ra thành các chuỗi con và biến đổi chuỗi đó thành các chuỗi hoa hoặc thường trong một chương trình. - Cú pháp tổng quát: stringName.propertyName hay stringName.methodName - Cách tạo đối tượng String Có 3 phương thức khác nhau để tạo ra chuỗi. + Dùng lệnh var và gán cho nó một giá trị. + Dùng một toán tử (=) có gán với một tên biến. + Dùng hàm khởi tạo String (string). 5. Đối tượng Math - Đối tượng Math có các thuộc tính và phương thức biểu thị các phép tính toán học nâng cao. function doCalc(x) { var a; a = Math.PI * x * x; alert ("The area of a circle with a radius of " + x + “ is " + a); } 46
  47. 6. Đối tượng Date - Date là một đối tượng có sẵn chứa thông tin về ngày và giờ. - Đối tượng Date không có thuộc tính nào. - Nó có nhiều phương thức dùng để thiết lập, lấy và xử lý các thông tin về thời gian. - Đối tượng Date lưu trữ thời gian theo số mili giây tính từ 1/1/1970 00:00:00 DateObject = new Date(parameters) BÀI TẬP: Bài tập JavaScript 1: Cho người dùng nhập vào tên và tuổi. Hãy viết lại tên và tuổi của người đó ra màn hình bằng hàm document.write, trong đó tên có màu đậm, tuổi được gạch chân. var Ten, Tuoi; // Khai báo 2 biến để lưu tên và tuổi Ten = prompt("Bạn hãy nhập vào tên ", ""); Tuoi = prompt("Bạn hãy nhập vào Tuổi : ", 20); document.write("Chào bạn : " + Ten + " "); document.write(" "); // Xuống dòng document.write("Tuổi của bạn là : " + Tuoi + " "); Bài tập JavaScript 2: Tạo một nút nhấn (button) có name là welcome, value là ” Welcome “. Một textbox có tên là msg, value = “Welcome to”. Hướng dẫn: Sử dụng phương thức (hàm) write của đối tượng document để tạo. Giải mẫu: document.write("Tao Button va Text bang Script "); document.write(" "); document.write("<input type=button name=welcome value = 'Welcome' "); 47
  48. document.write("onclick = 'alert ('Welcome to JavaScript');' > "); document.write(" "); Bài tập JavaScript 3: Tạo một nút như trong ví dụ 2 và thêm chức năng sau: Khi người dùng click vào nút welcome thì hiển thị thông báo “Welcome to JavaScript” Hướng dẫn: Dùng thẻ để tạo nút nhấn và thêm thuộc tính onClick = “ ;” (Trong đó có thể là một lệnh JavaScript bất kỳ, ví dụ lệnh document.write, alert, prompt hoặc lệnh gọi hàm v.v ) Giải mẫu: Lưu ý quan trọng: Trong JavaScript, một hằng xâu được bao bởi cặp nháy đơn hoặc nháy kép, ví dụ các xâu: ‘nháy đơn’, “nháy kép” là những xâu hợp lệ, tuy nhiên bạn viết: ‘abc” hay “xyz’ là những xâu không hợp lệ. Trong trường hợp bạn muốn in chính bản thân dấu nháy đơn hoặc nháy kép ra màn hình thì bạn đặt trước nó một ký tự \, ví dụ bạn có thể in ra màn hình dòng chữ: Women’s day ra màn hình bằng hai hàm alert và document theo các cách sau đây: alert(“Women’s day”), document.write(‘Women\’s day’); alert(“Women\”s day”); alert(‘Women”s day’); v.v Bài tập JavaScript 4: Lấy (đọc) giá trị của một phần tử HTML Tạo 2 phần tử như trong ví dụ 2 bằng thẻ HTML, khi người dùng click chuột vào nút Welcome thì hiển thị nội dung chứa trong text có tên là msg. Hướng dẫn: Để lấy giá trị của một phần tử HTML, bạn viết .value Ví dụ: msg.value cho ta giá trị của text tên là msg. Giải mẫu: 48
  49. Bài tập JavaScript 5: Khai báo hàm trong JavaScript và cách liên kết nút nhấn với một hàm Tạo 2 phần tử như ví dụ 2, khi người dùng nhấn nút thì gọi một hàm có tên là HienThi, hàm hiển thị có chức năng hiển thị nội dung trong text có tên là msg ở trên. Hướng dẫn: Trong thẻ tạo button, bạn đặt thuộc tính onClick = “ ”, trong trường hợp này bạn đặt OnClick = “HienThi()”. Điều này có nghĩa là khi người sử dụng Click chuột (OnClick = Click chuột) thì trình duyệt hãy gọi hàm HienThi(). Cũng giống như trong ngôn ngữ C, Một hàm bắt buộc phải có cặp ngoặc đơn, cho dù có tham số hay không. Ví dụ khi gọi hàm HienThi thì bạn phải viết là HienThi(). Giải mẫu: function HienThi() // Khai báo một hàm tên là HienThi { alert(msg.value); // Lấy nội dung trong text box và hiển thị alert("Bạn hãy nhập vào ô text và thử lại !"); } Lưu ý: Trong C, để khai báo một hàm thường bạn viết, ví dụ: int HienThi() v v Tuy nhiên, với JavaScript có hơi khác tí chút, thay vào đó bạn viết function HienThi(). Bài tập JavaScript 6: Minh hoạ cách khai báo và sử dụng đối tượng Date trong JavaScript để hiển thị ngày giờ của hệ thống. Yêu cầu: Hãy hiển thị ngày và giờ của hệ thống máy tính khi trang Web được nạp. Thông tin hiển thị ra có dạng như sau: 49
  50. Hướng dẫn: Sử dụng đối tượng Date và sử dụng các hàm lấy thứ, ngày, tháng, năm để in thông tin ra màn hình. Chú ý đến các hàm tính tháng, ngày trong tuần bị hụt một đơn vị. Bài tập JavaScript 7: Minh hoạ sử khai báo và dùng đối tượng Date để lấy giờ, phút, giây của hệ thống. Yêu cầu: Hiển thị Giờ và phút trong thanh tiêu đề của cửa sổ khi trang Web được nạp. Hướng dẫn: Giá trị hiển thị trong thanh tiêu đề của trang web được lưu trong thuộc tính title của đối tượng document, do vậy để hiển thị thông tin trên thanh tiêu đề, bạn cần viết: document.title = . Ví dụ, để hiển thị dòng chữ “Hello Every body !”, bạn viết: document.title “Hello Every body !” Minh hoạ: var D = new Date(); document.title = "Bây giờ là: " + D.getHours()+" giờ "+ D.getMinutes()+ " phút."; Bài tập JavaScript 8: Vận dụng biến đối tượng Date để tính tuổi của một người. Yêu cầu : Cho người dùng nhập vào năm sinh của họ, sau đó hiển thị tuổi tương ứng. Hướng dẫn: Sử dụng đối tượng Date để lấy năm hiện tại. Tuổi sẽ bằng năm hiện tại trừ đi năm sinh vừa nhập vào. Minh hoạ mẫu: Tính tuổi var D = new Date(); var NamSinh, NamHienTai; 50
  51. NamHienTai = D.getYear(); // Lưu năm hiện tại vào biến NamSinh = prompt("Bạn sinh năm bao nhiêu ? : ",""); alert("Tuổi của bạn bây giờ là : " + (NamHienTai-NamSinh)); Bài tập JavaScript 9: Tương tự như bài 3 nhưng năm sinh nhập vào không được lớn hơn năm hiện tại. Hướng dẫn: Sử dụng vòng lặp do while để yêu cầu nhập lại nếu năm sinh > năm hiện tại. Minh hoạ mẫu: Tinh tuoi var D = new Date(); var NamSinh, NamHienTai; NamHienTai = D.getYear(); //Lưu năm hiện tại vào biến do { NamSinh = prompt("Bạn sinh năm bao nhiêu : ",""); } while (parseInt(NamSinh)>NamHienTai); //Nhập lại nếu Năm sinh>năm hiện tại alert("Tuổi của bạn bây giờ là : " + (NamHienTai-NamSinh)); 51
  52. Bài 3: CÁC ĐỐI TƯỢNG CỦA TRÌNH DUYỆT TRONG JAVASCRIPT Mã bài: MĐCNTT17.03 Giới thiệu: Giới thiệu về các đối tượng của trình duyệttrong Javascirpt. Mục tiêu: - Nêu được cú pháp, cách áp dụng, các hàm cơ bản trong javascript - Tạo được tài liệu HTML sử dụng mã javascript trong lập trình - Tích cực chủ động làm các bài tập thực thành theo đúng nội dung Nội dung chính: 1.Đối tượng event – Khái niệm - Sự kiện là kết quả của các hành động được thực hiện bởi người sử dụng - Một sự kiện có thể được khởi tạo bởi người sử dụng hoặc hệ thống - Mỗi sự kiện được kết hợp với một đối tượng Event. Đối tượng Event cung cấp thông tin về: - Kiểu sự kiện - Vị trí của con trỏ tại thời điểm xảy ra sự kiện - Đối tượng Event được xem như một phần của trình xử lý sự kiện *Chu trình sống của sự kiện: - Chu trình sống của sự kiện thông thường bao gồm các bước: + Hành động của người sử dụng hoặc một điều kiện tương ứng khi sự kiện xảy ra + Đối tượng Event được cập nhật ngay lập tức để phản ánh sự kiện + Phát sinh sự kiện + Trình xử lý sự kiện tương ứng được gọi + Trình xử lý sự kiện thực hiện các hành động và trả về kết quả 2. Các sự kiện Javascript - Các sự kiện thông thường mà JavaScipt hỗ trợ: • onClick • onMouseOut • onChange • onLoad • onFocus • onSubmit * onClick• onBlur • onMouseDown - Sự ki•ện onClickonMouseOver được khởi tạo khi người sử dụng• click chuonMouseUpột vào button hoặc các phần tử form hoặc các liên kết. 52
  53. function compute(form) { if (confirm("Are you sure?")) form.result.value = eval(form.expr.value) else alert("Please come back again.") } Enter an expression: Result: * onChange - Sự kiện onChange xảy ra khi một phần tử form thay đổi. Điều này có thể xảy ra khi nội dung của phần tử text thay đổi, hoặc khi một lựa chọn trong danh sách lựa chọn thay đổi. <! hide script from old browsersfunction checkNum(num) 53
  54. { if (num == "") { alert("Please enter a number"); return false; } if (isNaN (num)) { alert("Please enter a numeric value"); return false; } else alert ("Thank you"); } // end hiding from old browsers > Please enter a number: * onFocus/onBlur/onMouseOver/onMouseOut - onFocus + Sự kiện onFocus được gởi đi bất cứ khi nào phần tử form trở thành phần tử form hiện thời. Chỉ khi phần tử nhận được focus nó mới chấp nhận dữ liệu nhập từ người dùng. - onBlur + Blur ngược với focus. Khi người dùng rời khỏi phần tử form, sự kiện onBlur được kích hoạt. - onMouseOver + Sự kiện onMouseOver được khởi tạo khi con trỏ chuột di chuyển lên trên một phần tử. - onMouseOut + Sự kiện onMouseOut được khởi tạo khi con trỏ chuột rời khỏi phần tử đó. 54
  55. n Ví dụ: var num =0 function showLink(num) { if (num==1) { document.forms[0].elements[0].value= "You have selected Aptech"; } if (num==2) { document.forms[0].elements[0].value = "You have selected Asset"; } if (num==3) { document.forms[0].elements[0].value = "You have selected Arena"; } } n Di chuyển con trỏ chuột lên trên từ Aptech, xem kết quả xuất hiện. 55
  56. * onLoad/onSubmit/onMouseDown/onMouseUp - OnLoad + Sự kiện onLoad được gửi đến đối tượng document khi đã tải xong tài liệu - onSubmit + Sự kiện onSubmit phát sinh bất cứ khi nào người dùng gửi form đi (sử dụng nút Submit). Sự kiện xảy ra trước khi form thật sự được gửi đi. - onMouseDown + Sự kiện này được kích hoạt khi hành động nhấp chuột xảy ra. - onMouseUp + Sự kiện này được kích hoạt khi hành động nhả chuột xảy ra. * onResize – Example - onResize + Sự kiện này được kích hoạt khi sự kiện resize xảy ra, nghĩa là khi người dùng hoặc script chỉnh kích thước cửa sổ hay frame. Kết quả: window.onresize= notify; function notify() { alert("Window resized!"); } Please resize the window. 56
  57. 3. Trình xử lý sự kiện - Phân đoạn này của mã JavaScript chạy để đáp ứng với sự kiện được gọi là trình điều khiển sự kiện. - Trình điều khiển sự kiện được xếp loại theo: + Trình điều khiển sự kiện như là thuộc tính của thẻ HTML: + Trình điều khiển sự kiện như là thuộc tính của đối tượng: object.eventhandler = function; 4. Các đối tượng trình duyệt thông thường - Trình duyệt là một ứng dụng được sử dụng để hiển thị nội dung của tài liệu HTML. - Các trình duyệt cũng đưa ra một số đối tượng có thể được truy cập và sử dụng trong script. IE Browser Objects Netscape Browser Objects 4.1. Mô hình đối tượng(DOM) - Một tính năng quan trọng của JavaScript là ngôn ngữ dựa trên đối tượng. - Giúp người dùng phát triển chương trình theo môđun và có thể sử dụng lại. - Đối tượng được định nghĩa là một thực thể đơn nhất bao gồm các thuộc tính và phương thức. - Thuộc tính là giá trị của một đối tượng. 57
  58. Vd: Document.bgcolor 4.2.Đối tượng window - Đối tượng này tương ứng với cửa sổ của trình duyệt và có thể được sử dụng để truy xuất thông tin về trạng thái của cửa sổ. Các thuộc tính: Các phương thức: • document • alert • event • blur • history • close • location • focus • name • navigate • navigator • open 4.3. Đố• i tượscreenng Document - Đối tượng này thể hiện tại liệu HTML trong cửa sổ trình duyệt và cho phép truy xuất thông tin trong cửa số đó. Các thuộc tính: Các phương thức: • alinkColor • clear • bgColor • close • Body • open • fgColor • write • linkColor • writeln • location • Title 4.4. Đố• i tượURLng History • vlinkColor - Đối tượng này cung cấp danh sách URL được thăm gần đây nhất của client - Chẳng hạn, phương thức "back()" của history hiển thị tài liệu ngay trước đó trong cửa số trình duyệt: history.back(); Phương thức: • back • forward • go 5. Đối tượng Location - Đối tượng này chứa thông tin về URL hiện thời. Nó cung cấp phương thức cho phép trình duyệt có thể tải lại URL đó. Các thuộc tính: Các phương thức: • hash • assign • host • reload • hostname • replace • href 58
  59. BÀI TẬP Bài tập JavaScript 10: Minh hoạ cách đặt các câu lệnh JavaScript vào trong các phần tử HTML để thực thi khi người dùng click chuột và sử dụng hàm open của đối tượng window để mở trang web. Yêu cầu: Viết đoạn Script cho người dùng nhập vào một số nguyên. Nếu người dùng nhập số 1 thì mở trang Web nếu nhập số 2 thì mở trang nếu nhập số 3 thì mở trang còn nếu nhập một số khác với 1, 2 hay 3 thì mở trang Hướng dẫn: Để mở một trang Web bất kỳ trong cửa sổ hiện hành bạn viết như sau: window.open(“Địa chỉ của trang cần mở”). Ví dụ: window.open( để mở trang chủ của VNN trong cửa sổ hiện tại. Như vậy, để giải quyết yêu cầu của bài toán trên, bạn cần cho người dùng nhập vào một số và sử dụng cấu trúc switch để kiểm tra và mở trang web tương ứng. Minh hoạ mẫu: Mở trang web bằng hàm open của đối tượng window. var LuaChon; LuaChon = prompt("Bạn hãy nhập vào một số để mở trang web: ", 1); switch (LuaChon) { case "1" : window.open(" "); break; case "2" : window.open(" "); break; case "3" : window.open(" "); break; default : window.open(" "); } Bài tập JavaScript 11: Minh hoạ việc khai báo và sử dụng biến đối tượng Array để lưu trữ danh sách và cách sử dụng các hàm của đối tượng Array như hàm sort và vòng lặp for in 59
  60. Yêu cầu: Cho người dùng nhập vào danh sách tên của một lớp, sau đó sắp xếp theo vần Alphabet rồi hiển thị danh sách đã sắp xếp đó ra màn hình, mỗi người trên một dòng. Hướng dẫn: Sử dụng vòng lặp for để cho phép nhập danh sách họ tên và Lưu danh sách vào một mảng, sau đó sử dụng phương thức sort của đối tượng mảng để sắp xếp, tiếp theo dùng vòng lặp for in để in các phần tử trong danh sách. Minh hoạ mẫu: Sắp xếp mảng var SoLuong, x; var DS = new Array(100); //Khai báo mảng DS, có thể lưu tối đa là 100 phẩn tử SoLuong = prompt("Bạn cần nhập bao nhiêu người: ", 5); for (i=0; i Danh sách đã sắp xếp là "); for (x in DS) /* Nên sử dụng cấu trúc for in này để duyệt mảng */ { document.write( DS[x] ); document.write(" "); // Xuống dòng } Nhận xét: Nếu muốn sắp theo chiều giảm dần thì sau khi sort bạn gọi hàm reverse. Bài tập JavaScript 12: Minh hoạ việc đưa các câu lệnh JS vào trong một thẻ khi người dùng click chuột. Yêu cầu: Tạo một nút nhấn (Button) có name = “DangKy”, value = “Đăng ký”. Khi người dùng Click vào nút này thì thông báo là “Đăng ký dịch vụ E-Mail”. 60
  61. Hướng dẫn: Đối với các phần tử HTML, như textbox, button, checkbox, Select v.v Các trình duyệt đều cho phép ta thực thi một hoặc nhiều câu lệnh JavaScript khi người sử dụng click chuột lên các phần tử đó. Vấn đề ở chỗ, viết các câu lệnh đó như thế nào ? Để viết các câu lệnh JavaScript khi người dùng click chuột lên một phần tử nào đó, trong thẻ của phần tử này, ta viết như sau: OnClick = “Các câu lệnh JavaScript”. “Các câu lệnh JavaScript” ở đây là bất kỳ câu lệnh JavaScript nào và chúng phải được cách nhau bởi dấu chấm phảy. Ngoài ra, các câu lệnh phải đặt trong cặp dấu nháy kép (Hoặc nháy đơn). Ví dụ một số cách đưa câu lệnh JavaScript cần thực thi khi người dùng click chuột 1. Onclick = “alert(‘Hello world’;” 2. OnClick = ‘write(“Welcome to JavaScript”);’ 3. OnClick = “var x,y; x = 10; y = 20; alert(‘Tổng là : ‘ + (x + y)); “ 4. OnClick = “var Tuoi; Tuoi = txtTuoi.value; KiemTra(Tuoi);” 5. OnClick = “KiemTra();” Theo ví dụ trên, khi người sử dụng Click: 1: Thực hiện câu lệnh alert(‘Hello world’) 2: Thực hiện câu lệnh document.write(‘Welcome to JavaScript’); 3: Thực hiện NHIỀU câu lệnh JavaScript 4: Thực hiện nhiều câu lệnh JavaScript và có lời gọi đến hàm KiemTra(Tuoi) 5: Thực hiện câu lệnh gọi hàm KiemTra(). Minh hoạ mẫu: Minh hoạ đưa câu lệnh JavaScript vào các phần tử Bài tập JavaScript 13: Minh hoạ cách thay đổi thuộc tính của một đối tượng thông qua việc viết các câu lệnh JavaScript. 61
  62. Tạo một nút có name = ThayMauNen, value = “Thay đổi màu nền”. Khi người dùng click chuột vào nút này thì thay đổi màu nền của trang Web thành màu “xanh”. Hướng dẫn: Để thay đổi màu nền của trang Web thành màu, ta cần thay đổi thuộc tính document.bgColor = “blue”. (Màu đỏ là red, tìm: magenta, đen: black, trắng: white, vàng: Yellow, tím nhạt: lavender). Như vậy, câu lệnh này sẽ được đặt trong phần onClick như sau: Thay mau nen bang click chuot Thay đổi màu nền sử dụng đối tượng document 62
  63. Bài 4: XỬ LÝ FORM VÀ CÁC SỰ KIỆN CHO PHẦN TỬ CỦA FORM Mã bài: MĐCNTT17.04 Giới thiệu: Làm việc với đối tượng form và các thành phần trên Form Mục tiêu của bài: - Trình bày được các kiểu dữ liệu trên form - Xử lý các kiểu dữ liệu kiểu số, kiểu chuỗi, vận dụng vào xử lý trên 1 form nhập liệu cụ thể - Rèn luyện tính cẩn thận, khả năng làm việc nhóm Nội dung chính: 1. Đối tượng Form - Đối tượng Form chứa 3 thuộc tính: n Accept n Action n Method - Ví dụ: 2. Đối tượng Textfield(trường văn bản) - Textfield nhận biết các sự kiện onBlur, onFocus và onChange n onFocus xuất hiện khi nhấp chuột vào bên trong trường văn bản. n onBlur xảy ra khi người dùng di chuyển ra khỏi trường văn bản n onChange xảy ra khi người dùng có sự thay đổi trong trường văn bản và sau đó di chuyển ra khỏi trường văn bản - Ví dụ: 63
  64. 3. Đối tượng Command Button - Command button nhận biết sự kiện onClick - onClick xuất hiện khi người sử dụng nhấp chuột vào command button 4. Đối tượng Checkbox - Checkbox là một đối tượng form HTML, hoạt động theo cơ chế bật tắt - Checkbox có thể được Check hoặc không - Giống như nút lệnh checkbox cũng hiểu được sự kiện onClick 64
  65. 5. Đối tượng Radio Button - Radio buttons gần giống như checkboxes - Sự khác biệt ở đây là chỉ có một Radio được chọn. Khi một Radio được chọn, nó sẽ giữ nguyên sự lựa chọn đó cho đến khi nút khác được chọn. - Radio button hiểu được sự kiện onClick. 6. Đối tượng ComboBox/Select - Đối tượng ComboBox trong form HTML xuất hiện giống như một danh mục sổ xuống hoặc danh mục cuộn của các tuỳ chọn - Có thể sử dụng thanh cuộn để thay đổi sự hiển thị danh sách các lựa chọn - ComboBox hỗ trợ các sự kiện onBlur, onFocus, and onChange 65
  66. 7.Kiểm tra tính hợp lệ của nội dung và các trường trên form - Việc kiểm tra rất quan trọng, vì có thể có trường không chứa dữ liệu. - Cũng có thể có trường chứa dữ liệu không hợp lệ. - Xem ví dụ sau: Form Events <! function validateFirstName() { var str= form1.fname.value; if(str.length==0) { alert(" The first name cannot be empty"); return false; } return true } function validateLastName() { 66
  67. var str= form1.lname.value; if(str.length==0) { alert(" The last name cannot be empty"); return false; } return true; } function validateEmail() { var str= form1.email.value; if(str.length==0) { alert(" The Email field cannot be empty"); return false; } } function processForm() { disp=open("", "result") disp.document.write(" Result Page "+" ") disp.document.write(" "+ "Thanks for signing in"+" "+" "+" ") disp.document.write("First name \t\t: "+form1.fname.value+" ") disp.document.write("Last name \t\t: "+form1.lname.value+" ") disp.document.write("Email \t\t\t: "+form1.email.value+" ") disp.document.write("Your Comments \t\t: "+form1.comment.value+" ") disp.document.write(" ") if(disp.confirm("Is this information correct")) disp.close() } // > 67
  68. Handling Form Events First Name : Last Name : Email : Comments : Enter your comments 68
  69. BÀI TẬP: Bài tập JavaScript 14: Minh hoạ việc đọc giá trị trong phần tử text và hiển thị ra màn hình Yêu cầu: Tạo một hộp text có tên là HoTen. Một nút có tên là HienThi, value = “Hiển thị”. Khi người dùng click vào nút HienThi thì hiển thị nội dung trong hộp text đó bằng hàm alert. Hướng dẫn: Để lấy giá trị của một phần tử HTML nào đó, chúng ta viết .value Trong đó: chính là giá trị của thuộc tính name khi bạn tạo thẻ. Ví dụ: – Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v Minh hoạ: Đọc giá trị trong hộp text Hãy gõ văn bản vào trong hộp text và click vào nút Hiển thị Lưu ý: Khi muốn lấy giá trị của phần tử nào đó bằng JavaScript thì bạn phải đặt cho nó một cái tên, như ví dụ ở trên, để lấy giá trị trong hộp text ta đã đặt cho hộp text này tên (name) là HoTen. Bài tập JavaScript 15: Minh hoạ việc thay đổi giá trị của hộp textbox Yêu cầu: Tạo ra ba hộp text lần lượt tên là SoHang1, SoHang2, KetQua và một nút có tên là TinhTong, để thực hiện phép tính tổng. Khi người dùng nhập hai số hạng vào hộp SoHang1 và SoHang2, sau đó click vào nút TinhTong thì kết quả tổng sẽ được lưu vào trong hộp text KetQua. Hướng dẫn: Để thay đổi giá trị một thuộc tính nào đó của phần tử HTML, bạn viết theo cách sau: . = Trong đó: Tên phần tử chính là giá trị của thuộc tính name khi bạn tạo thẻ. 70
  70. Ví dụ: HoTen.value = “Đây là văn bản mới”, DangKy.value = “Sign Up now”, v.v Thayđổi giá trị của thuộc tính Hãy nhập hai số và click vào nút Tính tổng + = Lưu ý: – Giá trị lưu trong hộp text luôn là một xâu, do vậy để thực hiện phép cộng được đúng, bạn cần phải chuyển giá trị sang dạng số bằng hàm parseFloat (Hoặc parseInt) như ở trên. – Việc thay đổi này có thể áp dụng cho các phần tử khác như button, checkbox, v.v Bài tập JavaScript 16: Minh hoạ việc gọi hàm khi người dùng click vào một nút Yêu cầu: Tạo ra 4 text có tên lần lượt là: MauNen, MauChu, TieuDe, TrangThai và một nút có tên là ThayDoi, value là “Thay đổi”. Khi người dùng click vào nút ThayDoi thì màu nền, màu chữ, tiêu đề của tài liệu và thanh trạng thái của cửa sổ trình duyệt sẽ được thay đổi bằng các giá trị trong text tương ứng Hướng dẫn: Bạn hoàn toàn có thể viết nhiều câu lệnh trong thuộc tính OnClick như các ví dụ trước, tuy nhiên nếu có nhiều lệnh thì chương trình trông không được sáng sủa cho lắm. Khi đó bạn có thể nhóm các câu lệnh vào trong một hàm và trong thuộc tính OnClick bạn chỉ việc gọi hàm này ra. Minh hoạ mẫu: Thayđổi thuộc tính của trang Web functionCapNhat() 71
  71. { document.title =TieuDe.value;/* Thay đổi tiêu đề của trang Web */ document.bgColor =MauNen.value;/* Thay đổi màu nền của trang */ document.fgColor =MauChu.value;/* Thay đổi màu chữ của trang */ window.defaultStatus =TrangThai.value;/* Thay đổi dòng trạng thái của cửa sổ */ } Nhập vào các giá trị và nhấn nút Thayđổi Nhận xét: Ở ví dụ trên, khi người dùng click chuột lên nút ThayDoi thì hàm CapNhat( ) sẽ được gọi. Bài tập JavaScript 17: Hãy tạo một nút nhấn (button) có value = “Thu”. Khi người dùng click vào nút này thì tiêu đề của cửa sổ sẽ là “Bạn đã click chuột” Hướng dẫn: Trước hết ta cần xác định xem các lệnh nào cho phép ta thay đổi tiêu đề của cửa sổ thành “Bạn đã click chuột”, tiếp theo là đặt các lệnh đó vào đâu để khi người dùng click chuột thì nó được thực thi theo như yêu cầu bài toán 〈 Lệnh để thay đổi tiêu đề như sau: title = “Bạn đã click chuột” 〈 Như ta đã biết khi người dùng click thì sự kiện onClick xuất hiện, do vậy câu lệnh trên sẽ được đặt tương ứng vào sự kiện onClick, như sau: Hãy click vào nút ở dưới và quan sát tiêu đề 72
  72. Bài tập JavaScript 18: Tạo một trang Web, có 2 phần tử: Phần tử button có value = “Gửi”, và một phần tử textbox.Yêu cầu: khi người dùng click vào nút Gửi thì thông báo trên màn hình là: “Bạn đã click vào nút gửi” còn khi người dùng click vào textbox thì thông báo là “Bạn đã click vào textbox”. Hướng dẫn: Theo yêu cầu của bài thì dòng thông báo “Bạn đã click chuột vào nút gửi” xuất hiện chỉ khi người dùng click chuột vào nút gửi, do vậy các lệnh thực hiện hiển thị thông báo sẽ được đặt trong sự kiện onclick của nút nhấn. Còn dòng thông báo “Bạn đã click chuột vào text box” khi người dùng click chuột vào textbox, do vậy các lệnh thực hiện hiển thị dòng thông báo sẽ được đặt trong sự kiện onclick của textbox: Minh hoạ: Hay click vao nut va textbox o duoi va quan sat tieu de Bài tập JavaScript 19: Tạo 2 nút, nút thứ nhất có value = “Xanh”, nút thứ hai có value = “Đỏ”. Yêu cầu: Khi người dùng click vào nút xanh thì màu nền của tài liệu là xanh (blue), còn khi người dùng click vào nút đỏ thì màu nền của tài liệu là: Đỏ (red). Hướng dẫn: Thuộc tính màu nền của tài liệu được lưu trong thuộc tính bgColor của đối tượng document. Thuộc tính này có thể thay đổi được. Minh hoạ: 73
  73. Bài tập JavaScript 20: Tạo một danh sách lựa chọn gồm có 4 màu: red, blue, brown và lavender. Khi người dùng chọn một màu thì màu nền của tài liệu sẽ thay đổi tương ứng. Minh hoạ: functionDoiMau() { document.bgColor =Mau.value; // Hoặc viết: window.document.bgColor = Mau.value; } Bạn hãy chọn màu nền: Màu đỏ Màu xanh Màu nâu Màu xanh nhạt Bài tập JavaScript 21: Tạo một textarea có tên là NoiDung, một Textbox có tên là: SoKyTu. Với yêu cầu như sau: Khi người sử dụng gõ các phím vào trong textarea thì số lượng ký tự (Độ dài xâu) chứa trong textarea đó sẽ được hiển thị trong textbox. Nếu số lượng ký tự trong textarea gõ vào vượt quá 200 ký tự thì thông báo: “Bạn đã gõ quá số ký tự cho phép!”. functionKiemTra() { if(NoiDung.value.length >200) alert("Bạn đã gõ quá số ký tự cho phép!"); 74
  74. SoKyTu.value =NoiDung.value.length;// Hiển thị số ký tự trong textbox SoKyTu } Số ký tựđã gõ: Ở ví dụ trên, hàm kiểm tra sẽ được gọi mỗi khi sự kiện nhấn phím (onKeyUp) xuất hiện hay nói cách khác là khi người dùng gõ thêm một ký tự vào trong textarea. Bài tập JavaScript 22: Tạo một nút có value = “Gửi”, textbox có name = “HoTen”, 2 nút radio có tên là GioiTinh và nhãn tương ứng là Nam, nữ. Yêu cầu: Khi người dùng di chuyển chuột vào phần tử nào thì hiển thị thông báo tương ứng dưới thanh trạng thái. Ví dụ nếu người sử dụng di chuyển chuột qua nút nhấn “Gửi” thì thanh trạng thái sẽ là “Bạn đang di chuyển chuột vào nút” Hướng dẫn: Khi người dùng di chuyển chuột thì sự kiện di chuyển chuột sẽ xuất hiện, sự kiện này có tên là : onMoseMove. Vậy ta sẽ viết lệnh trong sự kiện này. Minh hoạ: Xu ly su kien Nam Nữ 75
  75. BÀI TẬP JAVASCRIPT TỰ GIẢI Bài số 1: Tạo một tầng có chứa dòng chữ “Hello”, kích thước H1. và một nút nhấn có nhãn là “Thay đổi”. Khi người dùng click vào nút này thì yêu cầu người dùng nhập vào một xâu, sau đó thay nội dung trong thẻ H1 bằng xâu nhập vào này (Theo 4 cách: thay thuộc tính innerText, innerHTML, outerText, outerHTML). Bài số 2: Tạo một thẻ H1, màu chữ xanh dùng để hiển thị thời gian của hệ thống (gồm giờ:phút:giây). Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây trong máy tính sau đó gán cho thuộc tính innerText của thẻ H1. Sử dụng hàm setInterval(“CapNhat();”, 1000) để liên tục cập nhật thời gian theo từng giây. Bài số 3: Tạo 2 tầng trong IE, mỗi tầng chứa một bức ảnh. Tầng thứ nhất chạy từ trái sang phải màn hình, tầng thứ hai chạy từ trên xuống dưới màn hình. Gợi ý: Sử dụng 2 hàm setInterval để gọi 2 hàm di chuyển 2 tầng. Bài số 4: Tạo một tầng chứa 3 liên kết. Chuột click tại vị trí nào thì tầng sẽ được đặt tại vị trí đó. Gợi ý: Viết lệnh trong sự kiện onClick của thẻ BODY. Bài số 5: Tạo một form đăng ký E-Mail tương tự như của Yahoo (Bạn chỉ cần tạo một số phần tử, không cần tạo hết). Mỗi khi người dùng di chuyển chuột đến một phần tử nào đó thì hiển thị một lời chú thích bằng Tiếng việt. (Xem Bài số 5) Bài số 6: Tạo 3 tầng (Trong Netscape), mỗi tầng nạp một trang tương ứng như sau: và Bài số 7: Tạo một tầng chứa một bức ảnh, một nút có nhãn là “Di chuyển”. Khi người dùng click vào nút này thì bức ảnh sẽ di chuyển chéo từ góc trên bên phải xuống góc dưới bên trái của màn hình. Gợi ý: Tăng dần pixelTop, giảm pixelLeft. Bài số 8: Hãy tạo ra trang Web có giao diện như sau: Yêu cầu: 〈 Khi người dùng di chuyển chuột đến phần tử nào thì hiển thị dòng nhắc dưới thanh trạng thái để hướng dẫn người dùng. Ví dụ: Khi người dùng đưa chuột vào trong ô textbox User Name thì thì hiển thị dưới thanh trạng thái là: “Nhập mã người dùng”, hay khi người đưa chuột đến nút “Đăng ký” thì hiển thị dòng nhắc: “Gửi thông tin đi để đăng ký” v.v Hướng dẫn: Nút đăng ký nên là nút thường, tức là tạo bằng thẻ: Bài số 9: Có giao diện như bài 1, nhưng yêu cầu như sau: 〈 Khi gửi thông tin đi, cần kiểm tra xem nội dung người dùng gõ trong ô Password với textbox trong ô “Gõ lại password” có giống nhau hay không? Nếu bằng nhau thì mới gửi (Submit) đi, còn nếu không bằng thì thông báo là “Password phải giống nhau” 76
  76. 〈 Khi gửi thông tin, cần kiểm tra ngày sinh, tháng sinh phải hợp lệ. (Tức ngày phải nhỏ hơn 32, tháng phải nhỏ hơn 13) Hướng dẫn: Nút đăng ký nên là nút thường, tức là tạo bằng thẻ: Trong đó Hàm DangKy() sẽ kiểm tra dữ liệu hợp lệ và khi dữ liệu nhập vào đúng đắn thì gửi đi bằng cách gọi phương thức submit của đối tượng document, như sau: document.submit(); Bài số 10: Làm tương tự bài tập 7 và 8, nhưng thêm yêu cầu: Khi người dùng nhập hoặc số lượng, hoặc đơn giá thì hãy tính luôn ô textbox thành tiền. Hướng dẫn: Viết lệnh tính thành tiền trong cả 2 sự kiện onKeyUp của cả hai textbox số lượng và textbox đơn giá. Lưu ý: Trước khi tính tích thì cần phải kiểm tra xem dữ liệu trong hai textbox đã có hay chưa, nếu một ô chưa nhập gì thì chưa tính. Bài số 11: Hãy tạo một menu đặt theo chiều dọc gồm 4 mục như sau: Giới thiệu Tin tức Sản phẩm Trợ giúp Yêu cầu: 4 mục này có màu nền là xanh, màu chữ là vàng (yellow). Khi người dùng di chuyển đến mục nào thì mục đó có màu nền là màu đỏ. Khi di chuyển chuột ra khỏi thì màu nền trở lại màu xanh. Khi người dùng click vào thì mở ra trang tương ứng là và Gợi ý: Làm tương tự như bài tập mẫu, nhưng tạo ra 4 thẻ H2. Bài số 11: Hãy tạo một menu gồm 4 mục như ở trên nhưng theo chiều ngang, Hướng dẫn: Nếu bạn dùng thẻ H2, thì mỗi mục sẽ tự động được đặt riêng trên một dòng. Để có thể đặt nhiều mục trên cùng một dòng, bạn có thể tạo một bảng có một hàng và nhiều cột. Mỗi mục bây giờ sẽ được đặt trong một thẻ . Để thay đổi kích thước, màu nền, màu chữ v.v bạn cũng sử dụng STYLE: . Ví dụ: Trang QTM 77
  77. TÀI LIỆU THAM KHẢO [1]An Introduction to Network Programming with Java, Jan Graba, Springer, 2007 [2] Đỗ Thanh Nghị, Trần Công Án, Hà Duy An, Lâm Chí Nguyện. Giáo trình lập trình Web. NXB ĐHCT, 2014. [3] 79