GIÁO TRÌNH mô ĐUNDCCT JAVASCRIP NGHỀ CÔNG NGHỆ THÔNG TIN TRÌNH độ CAO ĐẲNG

BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ -^> & ^> GIÁO TRINH 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 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ộ) TUYÊN BỐ BẢN QUYỀN: Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng nguyên trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm MÃ TÀI LIỆU:MĐCNTT 24 LỜI GIỚI THIỆU Trong năm qua, dạy nghề có bước tiến vượt bậc số lượng chất lượng, nhằm thực 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 phát triển khoa học công nghệ giới, lĩnh vực Cơng nghệ thơng tin nói chung có bước phát triển đáng kể Chương trình dạynghề Công nghệ thông tin xây dựng sở phân tích nghề, phần kỹ nghề kết cấu theo môđun Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình theo mơđun đào tạo nghề cấp thiết Mô đun 24: DCCT-JA VASCRIPlà mô đun đào tạo chuyên môn nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong q trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu nước, kết hợp với kinh nghiệm thực tế Mặc dầu có nhiều cố gắng, khơng tránh khỏi khiếm khuyết, mong nhận đóng góp ý kiến độc giả để giáo trình hồn thiệ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 Chủ biên Cù Ngọc Quỳnh giảng viên khoa CNTT Tập thể Giảng viên Khoa CNTT Mọi thơng tin đóng góp chia sẻ xin gửi hòm thư tienphungktcn@,gmail.com, liên hệ số điện thoại 0913393834-0983393834 MỤC LỤC LỜI GIỚI THIỆU3 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 vai trị mơ đun: - Vị trí: Mơ đun JAVASCRIPT - Tính chất: Mơ đun JAVASCRIPT áp dụng việc xây dựng đọan client-side script Truyền đạt cho sinh viên khái niệm quan trọng thời điểm thực đoạn JavaScritp, biến phạm vi sử dụng việc sử dụng đối tượng JavaScript String, Date, Math, để xử lý liệu nhập, xuất - Ý nghĩa vai trị mơ đun: Đây mơ đun đào tạo chuyên môn nghề, cung cấp cho sinh viên kỹ nghề Công nghệ thông tin Mục tiêu mô đun: - kiến thức: + Nắm vững cú pháp ngôn ngữ JavaScript + Xác định thời điểm đoạn Script thực - Về kỹ năng: + Sử dụng đối tượng sở JavaScript + Đọc hiểu sơ đồ đối tượng + Sử dụng đối tượng window document để quản lý trang web + Sử dụng đối tượng form, truy cập kiểm tra liệu nhập form - lực tự chủ trách nhiệm: + Tích cực ứng dụng kỹ thuật lập trình cho ứng dụng thực tế + Khả tìm tài liệu, đọc hiểu tài liệu + Khả làm việc nhóm Nội dung mơ đun Nội dung tổng quát phân bổ thời gian: Số TT Thời gian Tên mô đun Tổng số L \ thuyết Thực hành Bài 1: Tổng quan Javascript Giới thiệu học JavaScript hỗ trợ trình duyệt 10 Kiêm tra* Sơ lược ngôn ngữ JavaScript Thời điểm thực đoạn Script Các biến Các kiểu liệu Các toán tử Các biểu thức 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) Bài 2: Các đối tượng Javascript Các đối tượng Javascript Cây phân cấp đối tượng Câu lệnh eval Đối tượng String Đối tượng Math Đối tượng Date 20 17 Bài 3: Các đối tượng trình duyệt Javascript Đối tượng event - Khái niệm Các kiện Javascript Trình xử lý kiện Đối tượng trình duyệt thơng thường Đối tượng location 25 20 Bài 4: Xử lý Form kiện cho phần tử Form Đối tượng Form Đối tượng Textfield(trường văn bản) Đối tượng Command Button Đối tượng Checkbox Đối tượng radio Đối tượng ComboBox/lựa chọn 34 29 Kiểm tra tính hợp lệ nội dung trường form Thi kết thúc mô đun Cộng 90 15 72 Bài 1: TỔNG QUAN VỀ JAVASCRIPT Mã bài: MĐCNTT 24.01 Giới thiệu: Giới thiệu ngơn ngữ lập trình Javascript, khái niệm Mục tiêu: - Trình bày khái niệm quan trọng thời điểm thực đoạn JavaScritp, biến phạm vi sử dụng việc sử dụng đối tượng JavaScritp String, Date, Math, để xử lý liệu nhập, xuất - Nắm vững cú pháp ngôn ngữ JavaScript - Xác định thời điểm đọan Script thực - Sử dụng đối tượng sở JavaScript Nội dung chính: Giới thiệu học - Ngơn ngữ lập trình Javascript giới thiệu vào năm 1995 Mục đích để đưa chương trình vào trang web trình duyệt Netscape Navigator trình duyệt web phổ biến năm 1990 - JavaScript phát triển Brendan Eich Hãng truyền thông Netscape với tên Mocha, sau đổi tên thành LiveScript, cuối thành JavaScript Có lẽ việc đổi tên để giúp JavaScript ý nhiều Bởi thời điểm này, Java coi tượng trở nên phổ biến JavaScript hỗ trợ trình duyệt 2.1 Chuân hố ngơn ngữ lập trình JavaScript Sau ngơn ngữ lập trình JavaScript chấp nhận sử dụng bên ngồi Netscape, chuẩn hố tài liệu tên ECMAScript Ecma International Do đó, bạn gọi JavaScript hay ECMAScript Riêng với thân thích gọi JavaScript Đơn giản thấy JavaScript phát âm dễ nhanh Tại thời điểm viết xuất (04/2017), phiên ECMAScript ECMAScript 2016 hay ECMA-262 Do đó, có nhiều khác biệt JavaScript so với phiên Trong viết sau, chủ yếu giới thiệu với bạn kiến thức nguyên thuỷ JavaScript Qua đó, bạn tự tìm hiểu chuẩn JavaScript cách dễ dàng 2.2 Đặc điêm chung JavaScript • Là ngơn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, Ruby, Nó gần với ngơn ngữ tự nhiên người Trong ngơn ngữ lập trình bậc thấp (low-level) như: Assembly gần với máy tính • • Là ngơn ngữ lập trình động (dynamic programming language): Python, Ruby, Perl, Chúng tối ưu hố nhằm nâng cao hiệu suất cho lập trìnhviên Trong ngơn ngữ lập trình tĩnh (static programming language): C/C++, lại 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 (scripting language): nghĩa khơng cần biên dịch (compile) hay liên kết (linked) giống ngơn ngữ lập trình biên dịch (C/C++, Java, ) mà dịch thời điểm chạy • Là ngơn ngữ dựa đối tượng (object-based): tức gần giống 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 đa hình • Là ngơn ngữ dựa ngun mẫu (prototype-based): kiểu lập trình hướng đối tượng, hành vi đối tượng sử dụng lại 2.3 Ứng dụng JavaScript JavaScript có nhiều ứng dụng nhiều môi trường tảng khác khau: • JavaScript với HTML, CSS trở thành ngơn ngữ khơng thể thiếu website • • • • • Ngồi ra, có nhiều framework JavaScript khác phía front-end: Angularjs, Angular2, ReactJS, Vuejs, Emberjs, Meteorjs, backbone, JavaScript sử dụng phía server với framework : Nodejs Một số database sử dụng JavaScript kịch ngôn ngữ query: MongoDB, CouchDB JavaScript dùng để xây dựng ứng dụng Desktop với framework: Electron Những ứng dụng tiếng kể đến là: Atom, Visual Studio Code, GitKraken, Wordpress.com, Để xây dựng ứng dụng điện thoại đa tảng (Android, IOS) dùng: React-native 3.Sơ lược ngơn ngữ JavaScript JavaScript ngơn ngữ lập trình phổ biến giới suốt 20 năm qua Nó số ngơn ngữ lập trình web: HTML: Giúp bạn thêm nội dung cho trang web CSS: Định dạng thiết kế, bố cục, phong cách, canh lề trang web JavaScript: Cải thiện cách hoạt động trang web JavaScript hoc nhanh dễ dàng áp dụng cho nhiều mục đích khác nhau, từ việc cải thiện tính website đến việc chạy game tạo phần mềm web Hơn nữa, có hàng ngàn mẫu template JavaScript ứng dụng kia, nhờ vào cống hiến cộng đồng, đặc biệt Github JavaScript ngày JavaScript tạo mười ngày Brandan Eich, nhân viên Netscape, vào tháng năm 1995 Được đặt tên Mocha, tên đổi thành Mona LiveScript trước thật trở thành JavaScript tiếng Phiên ngôn ngữ bị giới hạn độc quyền Netscape có tính hạn chế, tiếp tục phát triển theo thời gian, nhờ phần vào cộng đồng lập trình viên liên tục làm việc với Trong năm 1996, JavaScript thức đặt tên ECMAScript ECMAScript phát hành năm 1998 ECMAScript tiếp tục mắt vào năm 1999 Nó liên tục phát triển thành JavaScript ngày nay, hoạt động khắp trình duyệt khắp 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 sử dụng JavaScript vào năm 2016 Chỉ 20 năm, từ ngơn ngữ lập trình riêng trở thành công cụ quan trọng công cụ chuyên viên lập trình web Nếu bạn dùng internet, chắn bạn sử dụng JavaScript Điều khiến JavaScript trở nên vĩ đại? JavaScript có nhiều ưu điểm khiến vượt trội so với đối thủ, đặc biệt trường hợp thực tế Sau số lợi ích JavaScript: Bạn khơng cần compiler web browser biên dịch HTML; Nó dễ học ngơn ngữ lập trình khác; Lỗi dễ phát dễ sửa hơn; Nó gắn số element trang web event trang web thông qua click chuột di chuột tới; JS hoạt động nhiều trình duyệt, tảng, vâng; Bạn sử dụng JavaScript để kiểm tra input giảm thiểu việc kiểm tra thủ cơng truy xuất qua database; Nó giúp website tương tác tốt với khách truy cập; Nó nhanh nhẹ ngơn ngữ lập trình khác Khuyết điểm JavaScript gì? Đối tượng Radio Button - Radio buttons gần giống checkboxes - Sự khác biệt có Radio chọn Khi Radio chọn, giữ nguyên lựa chọn nút khác chọn - Radio button hiểu kiện onClick Đối tượng ComboBox/Select - Đối tượng ComboBox form HTML xuất giống danh mục sổ xuống danh mục cuộn tuỳ chọn - Có thể sử dụng cuộn để thay đổi hiển thị danh sách lựa chọn - ComboBox hỗ trợ kiện onBlur, onFocus, and onChange Kiêm tra tính hợp lệ nội dung trường form - Việc kiểm tra quan trọng, có trường khơng chứa liệu - Cũng có trường chứa liệu khơng hợp lệ - Xem ví dụ sau: Form Events Handling Form Events

First Name : Last Name :

Email : Comments : Enter your comments

69 BÀI TẬP: Bài tâp JavaScript 14: Minh hoạ việc đọc giá trị phần tử text hiển thị hình Yêu cầu: Tạo hộp text có tên HoTen Một nút có tên HienThi, value = “Hiển thị” Khi người dùng click vào nút HienThi hiển thị nội dung hộp text hàm alert Hướng dẫn: Để lấy giá trị phần tử HTML đó, viết .value Trong đó: giá trị thuộc tính name bạn tạo thẻ Ví dụ: - Hoten.value, DangKy.value, GioiTinh.value, Password.value v.v Minh hoạ: Đọc giá trị hộp text Hãy gõ văn vào hộp text click vào nút Hiển thị 200) alert("Bạn gõ số ký tự cho phép!"); SoKyTu.value =NoiDung.value.length;// Hiển thị số ký tự textbox SoKyTu } Số ký tựđã gõ: Ở ví dụ trên, hàm kiểm tra gọi kiện nhấn phím (onKeyUp) xuất hay nói cách khác người dùng gõ thêm ký tự vào textarea Bài tâp JavaScript 22: Tạo nút có value = “Gửi”, textbox có name = “HoTen”, nút radio có tên GioiTinh nhãn tương ứng Nam, nữ Yêu cầu: Khi người dùng di chuyển chuột vào phần tử hiển thị thơng báo tương ứng trạng thái Ví dụ người sử dụng di chuyển chuột qua nút nhấn “Gửi” trạng thái “Bạn di chuyển chuột vào nút” Hướng dẫn: Khi người dùng di chuyển chuột kiện di chuyển chuột xuất hiện, kiện có tên : onMoseMove Vậy ta viết lệnh kiện Minh hoa: Xu ly su kien Nam Nữ BÀI TẬP JAVASCRIPT Tự GIẢI Bài số 1: Tạo tầng có chứa dịng chữ “Hello”, kích thước H1 nút nhấn có nhãn “Thay đổi” Khi người dùng click vào nút yêu cầu người dùng nhập vào xâu, sau thay nội dung thẻ H1 xâu nhập vào (Theo cách: thay thuộc tính innerText, innerHTML, outerText, outerHTML) Bài số 2: Tạo thẻ H1, màu chữ xanh dùng để hiển thị thời gian hệ thống (gồm giờ:phút:giây) Gợi ý: Viết hàm CapNhat để lấy giờ:phút:Giây máy tính sau gán cho thuộc tính innerText thẻ H1 Sử dụng hàm setInterval(“CapNhat();”, 1000) để liên tục cập nhật thời gian theo giây Bài số 3: Tạo tầng IE, tầng chứa ảnh Tầng thứ chạy từ trái sang phải hình, tầng thứ hai chạy từ xuống hình Gợi ý: Sử dụng hàm setInterval để gọi hàm di chuyển tầng Bài số 4: Tạo tầng chứa liên kết Chuột click vị trí tầng đặt vị trí Gợi ý: Viết lệnh kiện onClick thẻ BODY Bài số 5: Tạo form đăng ký E-Mail tương tự Yahoo (Bạn cần tạo số phần tử, không cần tạo hết) Mỗi người dùng di chuyển chuột đến phần tử hiển thị lời thích Tiếng việt (Xem Bài số 5) Bài số 6: Tạo tầng (Trong Netscape), tầng nạp trang tương ứng sau: https://vndoc.com, https://quantrimang.com https://meta.vn Bài số 7: Tạo tầng chứa ảnh, nút có nhãn “Di chuyển” Khi người dùng click vào nút ảnh di chuyển chéo từ góc bên phải xuống góc bên trái hình Gợi ý: Tăng dần pixelTop, giảm pixelLeft Bài số 8: Hãy tạo trang Web có giao diện sau: Yêu cầu: • Khi người dùng di chuyển chuột đến phần tử hiển thị dịng nhắc trạng thái để hướng dẫn người dùng Ví dụ: Khi người dùng đưa chuột vào textbox User Name thì hiển thị trạng thái là: “Nhập mã người dùng”, hay người đưa chuột đến nút “Đăng ký” hiển thị dịng nhắc: “Gửi thơng tin để đăng ký” v.v Hướng dẫn: Nút đăng ký nên nút thường, tức tạo thẻ: Bài số 9: Có giao diện 1, yêu cầu sau: • Khi gửi thơng tin đi, cần kiểm tra xem nội dung người dùng gõ ô Password với textbox “Gõ lại password” có giống hay khơng? Nếu gửi (Submit) đi, cịn khơng thơng báo “Password phải giống nhau” 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ỏ 32, tháng phải nhỏ 13) Hướng dẫn: Nút đăng ký nên nút thường, tức tạo thẻ: Trong Hàm DangKy() kiểm tra liệu hợp lệ liệu nhập vào đắn gửi cách gọi phương thức submit đối tượng document, sau: document.submit(); Bài số 10: Làm tương tự tập 8, thêm yêu cầu: Khi người dùng nhập số lượng, đơn giá tính ln textbox thành tiền Hướng dẫn: Viết lệnh tính thành tiền kiện onKeyUp hai textbox số lượng textbox đơn giá *** Lưu ý: Trước tính tích cần phải kiểm tra xem liệu hai textbox có hay chưa, chưa nhập chưa tính Bài số 11: Hãy tạo menu đặt theo chiều dọc gồm mục sau: • Giới thiệu Tin tức Sản phâm Trợ giúp Yêu cầu: mục có màu xanh, màu chữ vàng (yellow) Khi người dùng di chuyển đến mục mục có màu màu đỏ Khi di chuyển chuột khỏi màu trở lại màu xanh Khi người dùng click vào mở trang tương ứng https://download.com.vn, https://vndoc.com, https://meta.vn https://quantrimang.com Gợi ý: Làm tương tự tập mẫu, tạo thẻ H2 Bài số 11: Hãy tạo menu gồm mục theo chiều ngang, Hướng dẫn: Nếu bạn dùng thẻ H2, mục tự động đặt riêng dịng Để đặt nhiều mục dịng, bạn tạo bảng có hàng nhiều cột Mỗi mục đặt thẻ Để thay đổi kích thước, màu nền, màu chữ v.v bạn sử dụng STYLE: