Tổng quan về giáo trình

Giáo trình mô đun "DCCT-JAVASCRIP" (Mã mô đun: MĐCNTT 24) được 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ệ, phát hành lưu hành nội bộ năm 2021 tại Hà Nội. Tài liệu do giảng viên Cù Ngọc Quỳnh (Khoa Công nghệ thông tin) chủ biên cùng tập thể giảng viên Khoa Công nghệ thông tin biên soạn.

Về vị trí trong chương trình đào tạo, đây là mô đun chuyên môn nghề thứ 24 trong khung đào tạo ngành Công nghệ thông tin trình độ Cao đẳng nghề. Mô đun đóng vai trò trang bị các kỹ thuật lập trình kịch bản phía máy khách (client-side script), giúp sinh viên xây dựng các tính năng xử lý dữ liệu nhập/xuất và điều khiển hành vi tương tác trên trang web.

Mục tiêu học tập của giáo trình được xác định cụ thể theo ba chuẩn đầu ra:

  • Kiến thức: Nắm vững cú pháp của ngôn ngữ JavaScript; xác định chính xác thời điểm thực thi của một đoạn mã script trong trang web; hiểu rõ cơ chế thông dịch và cây phân cấp đối tượng.
  • Kỹ năng: Khai báo và sử dụng các đối tượng cơ sở (String, Math, Date); đọc hiểu sơ đồ cây phân cấp đối tượng; sử dụng các đối tượng trình duyệt (window, document, history, location) để quản lý trang web; thao tác với các đối tượng form, truy cập và kiểm tra tính hợp lệ (validation) của dữ liệu nhập trên biểu mẫu.
  • Năng lực tự chủ và trách nhiệm: Vận dụng kỹ thuật lập trình vào các ứng dụng thực tế; phát triển kỹ năng tự tìm kiếm và đọc hiểu tài liệu chuyên ngành; nâng cao khả năng làm việc nhóm.

Về cấu trúc và cách tiếp cận, giáo trình được thiết kế theo hình thức tích hợp lý thuyết và thực hành với tổng thời lượng 90 giờ (15 giờ lý thuyết, 72 giờ thực hành, 3 giờ kiểm tra định kỳ và 1 giờ thi kết thúc mô đun). Điểm đặc sắc của tài liệu là phương pháp tiếp cận trực quan, kết hợp song song giữa lý thuyết cú pháp kịch bản và hệ thống mã nguồn mẫu xử lý biểu mẫu thực tế.

Nội dung kiến thức cốt lõi

Các chương/chủ đề chính

Nội dung giáo trình gồm 4 bài học chính, được sắp xếp theo tiến trình phát triển từ cú pháp căn bản đến thao tác đối tượng trình duyệt và xử lý giao diện:

  • Bài 1: Tổng quan về Javascript (10 giờ: 4 giờ lý thuyết, 6 giờ thực hành) Giới thiệu lịch sử hình thành ngôn ngữ từ Mocha, LiveScript đến JavaScript (1995) bởi Brendan Eich tại Netscape; chuẩn hóa ECMAScript (ECMA-262); đặc tính ngôn ngữ bậc cao, động, kịch bản, dựa trên đối tượng (object-based) và dựa trên nguyên mẫu (prototype-based). Giới thiệu cấu trúc đặt mã trong thẻ <script>, môi trường viết mã (Dreamweaver, Notepad, Visual InterDev, Frontpage). Hướng dẫn quy tắc định danh biến (phân biệt hoa thường, phong cách Underscore, CamelCase); các kiểu dữ liệu (string, number, boolean, object, undefined, array); hệ thống toán tử số học, gán, so sánh, logic, điều kiện ternary, toán tử chuỗi, kỹ thuật Template Literal dạng `Chuỗi ${biểu_thức}` và toán tử typeof. Khảo sát cấu trúc mảng Array, các câu lệnh điều khiển rẽ nhánh (if, else if, switch), vòng lặp (for, for...in, for...of, while, do...while, break, continue, nhãn khối lệnh); định nghĩa và gọi hàm có tham số, không tham số, tham số mặc định và lệnh return.

  • Bài 2: Các đối tượng cơ bản trong Javascript (20 giờ: 3 giờ lý thuyết, 17 giờ thực hành) Khảo sát khái niệm đối tượng, thuộc tính, phương thức; sơ đồ cây phân cấp đối tượng (Đối tượng của trình duyệt, Đối tượng kịch bản, Phần tử HTML); ứng dụng câu lệnh eval() để đánh giá chuỗi biểu thức. Trình bày chi tiết cú pháp và phương thức thao tác của 3 đối tượng tích hợp sẵn: đối tượng String (xử lý chuỗi ký tự), đối tượng Math (thực hiện phép toán nâng cao) và đối tượng Date (lưu trữ và xử lý thời gian tính từ mốc mili-giây 01/01/1970).

  • Bài 3: Các đối tượng của trình duyệt trong Javascript (25 giờ: 4 giờ lý thuyết, 20 giờ thực hành, 1 giờ kiểm tra) Trình bày khái niệm mô hình đối tượng tài liệu DOM (Document Object Model); đối tượng event, phân loại các sự kiện tương tác và trình xử lý sự kiện. Giới thiệu cấu trúc, thuộc tính và phương thức quản trị của các đối tượng trình duyệt thông dụng: window, document, history, và location.

  • Bài 4: Xử lý Form và các sự kiện cho phần tử của Form (34 giờ: 4 giờ lý thuyết, 29 giờ thực hành, 1 giờ kiểm tra) Trang bị kỹ thuật truy cập và điều khiển các thành phần giao diện biểu mẫu HTML: đối tượng Form, trường văn bản Textfield, nút bấm Command Button, hộp kiểm Checkbox, nút chọn Radio Button, danh sách chọn ComboBox/Select. Trọng tâm là kỹ thuật kiểm tra tính hợp lệ của nội dung và các trường dữ liệu trên form trước khi gửi dữ liệu.

  • Bài tập tự giải và tài liệu tham khảo: Cung cấp hệ thống bài tập tự giải (trang 76) và danh mục tài liệu tham khảo chuyên ngành (trang 79).

Kiến thức nền tảng được xây dựng

  • Fundamental theories: Lý thuyết ngôn ngữ kịch bản client-side được thông dịch trực tiếp bởi trình duyệt web mà không cần trình biên dịch độc lập (compiler); chuẩn hóa quốc tế ECMA-262; mô hình đối tượng không hỗ trợ kế thừa/đa hình truyền thống mà dựa trên nguyên mẫu (prototype-based).
  • Core principles: Nguyên tắc phân định vùng nhớ thông qua định danh biến (var, let), phân biệt phạm vi khối lệnh (block scope); quy tắc phân biệt chữ hoa - chữ thường (case-sensitive); cơ chế xác định kiểu dữ liệu động qua toán tử typeof; bảng thứ tự ưu tiên thực thi toán tử () $\rightarrow$ * / % $\rightarrow$ + -.
  • Essential frameworks: Cây phân cấp đối tượng 3 tầng (Đối tượng trình duyệt $\rightarrow$ Đối tượng kịch bản $\rightarrow$ Phần tử HTML); Mô hình đối tượng tài liệu DOM điều phối mối liên kết giữa mã script và tài liệu HTML.

Kỹ năng phát triển

  • Technical skills: Khai báo biến, cấu trúc rẽ nhánh, vòng lặp; tổ chức mã nguồn hàm; sử dụng các phương thức xử lý mảng (concat, push, pop, shift, unshift, splice, slice, forEach); thao tác phương thức của các đối tượng String, Math, Date.
  • Analytical skills: Phân tích biểu thức logic điều kiện phức hợp; xử lý chuyển đổi kiểu dữ liệu chuỗi - số; đánh giá chuỗi biểu thức bằng eval().
  • Practical competencies: Nhúng mã kịch bản vào HTML qua thẻ <script>; gắn bộ xử lý sự kiện qua thuộc tính HTML (ví dụ: onclick); truy xuất giá trị trường nhập qua cú pháp <Tên phần tử>.value; xây dựng thuật toán kiểm tra tính hợp lệ của dữ liệu biểu mẫu.

Phương pháp giảng dạy và học tập

  • Pedagogical approach: Giáo trình áp dụng phương pháp đào tạo nghề tích hợp lý thuyết và thực hành. Tỷ trọng thực hành chiếm ưu thế tuyệt đối (72 giờ thực hành trên tổng số 90 giờ, tương đương 80% thời lượng toàn mô đun), giúp sinh viên chuyển hóa các quy tắc cú pháp thành sản phẩm kịch bản cụ thể trên máy tính.
  • Bài tập và case studies: Giáo trình xây dựng hệ thống bài tập mẫu kèm lời giải chi tiết:
    • Bài tập 1: Nhập tên và tuổi bằng hộp thoại prompt(), xuất kết quả có định dạng in đậm/gạch chân qua document.write().
    • Bài tập 2 & 3: Tạo nút nhấn (<input type="button">) và hộp văn bản (<input type="text">), gắn sự kiện onclick để kích hoạt thông báo alert().
    • Bài tập 4: Đọc và hiển thị nội dung chứa trong textfield thông qua thuộc tính msg.value.
    • Bài tập 5: Định nghĩa hàm function HienThi() và liên kết hàm với thuộc tính onclick="HienThi()" trên phần tử nút bấm.
    • Bài tập 6, 7 & 8: Ứng dụng đối tượng Date để hiển thị thời gian hệ thống, cập nhật tiêu đề cửa sổ qua document.title, và tính toán số tuổi bằng biểu thức trừ năm sinh nhập vào từ năm hiện tại.
  • Practical exercises: Sinh viên thực hành trực tiếp trên các công cụ soạn thảo mã nguồn như Dreamweaver, Notepad, Visual InterDev, Frontpage; thiết lập cấu trúc mã kịch bản đặt trong thẻ <head> hoặc <body> của tài liệu HTML.
  • Assessment methods: Đánh giá kết quả học tập gồm 2 bài kiểm tra định kỳ (1 giờ tại Bài 3 và 1 giờ tại Bài 4), kết hợp với bài kiểm tra kết thúc mô đun (1 giờ) để đánh giá toàn diện kỹ năng lập trình kịch bản và kiểm tra dữ liệu form.
  • Self-study guidelines: Người học thực hiện tuần tự danh mục "Bài tập JavaScript tự giải" từ trang 76, chủ động sửa lỗi mã nguồn kịch bản trực tiếp trên trình duyệt web và tham khảo các tài liệu quy chuẩn ở trang 79.

Điểm nổi bật và cập nhật

  • Chuẩn hóa ngôn ngữ: Giáo trình tổng hợp tiến trình phát triển của JavaScript từ phiên bản đầu tiên năm 1995 trên trình duyệt Netscape Navigator đến các phiên bản chuẩn hóa ECMA-262 (ECMAScript 2, ECMAScript 3 và ECMAScript 2016).
  • Cập nhật kỹ thuật lập trình hiện đại:
    • Bổ sung cú pháp khai báo biến phạm vi khối bằng từ khóa let song song với var.
    • Giới thiệu cú pháp chuỗi Template Literal sử dụng cặp dấu huyền backtick (`) kết hợp biểu thức ${biểu-thức}.
    • Mở rộng các phương thức lặp mảng hiện đại như forEach(), vòng lặp for...in duyệt thuộc tính đối tượng và for...of duyệt phần tử tập hợp.
  • Hệ sinh thái và xu hướng ứng dụng thực tế: Giáo trình hệ thống hóa các nền tảng công nghệ liên quan trong ngành công nghiệp phần mềm:
    • Front-end frameworks: Angular.js, Angular 2, ReactJS, Vue.
    • Phía máy chủ (Server-side): Môi trường thực thi Node.js.
    • Cơ sở dữ liệu: Hệ quản trị cơ sở dữ liệu sử dụng JavaScript làm ngôn ngữ kịch bản và truy vấn như MongoDB, CouchDB.
    • Ứng dụng Desktop: Nền tảng Electron (vận hành các phần mềm Visual Studio Code, Atom, GitKraken, WordPress).
    • Ứng dụng di động đa nền tảng: React Native.
  • Vai trò trong kiến trúc web: Giáo trình phân định rõ mối quan hệ giữa ba ngôn ngữ nền tảng web (HTML định dạng cấu trúc, CSS định dạng giao diện, JavaScript xử lý tương tác). Việc kiểm tra dữ liệu form bằng JavaScript phía client giúp tối ưu hóa luồng xử lý, giảm tải các truy xuất kiểm tra thủ công tới máy chủ và cơ sở dữ liệu.

Đối tượng sử dụng giáo trình

  • Sinh viên chuyên ngành: Tài liệu phục vụ trực tiếp cho sinh viên trình độ Cao đẳng nghề ngành Công nghệ thông tin theo khung chương trình đào tạo mô đun chuyên môn nghề.
  • Điều kiện tiên quyết (Prerequisites): Người học cần hoàn thành kiến thức cơ bản về ngôn ngữ đánh dấu siêu văn bản HTML (nắm rõ các thẻ <p>, <img>, cấu trúc cặp thẻ <head>, <body>, các phần tử <form>, <input>) và hiểu biết cơ bản về định dạng giao diện CSS.
  • Giảng viên chuyên ngành: Giảng viên sử dụng tài liệu làm giáo trình giảng dạy chuẩn cho mô đun MĐCNTT 24, căn cứ vào thời lượng 90 giờ để xây dựng kế hoạch bài giảng lý thuyết (15 giờ) và tổ chức các buổi thực hành phòng máy (72 giờ) cùng các kỳ kiểm tra đánh giá.
  • Tự học và tài liệu tham khảo: Tài liệu được lưu hành nội bộ, cung cấp nguồn dữ liệu tra cứu cú pháp cơ bản cho lập trình viên web mới bắt đầu, đặc biệt là các phần liên quan đến xử lý chuỗi, thời gian, mô hình DOM và validation form.

Câu hỏi thường gặp

1. Giáo trình này phù hợp với ai?
Tài liệu được thiết kế cho sinh viên hệ Cao đẳng nghề ngành Công nghệ thông tin và người học cần tiếp cận kiến thức lập trình kịch bản client-side căn bản trên trình duyệt web.

2. Cần kiến thức nền nào trước khi học mô đun này?
Người học cần có kiến thức cơ bản về cấu trúc thẻ HTML (đặc biệt là các phần tử form) và nắm được cách thức hiển thị trang web trên các trình duyệt.

3. Điểm khác biệt về kết cấu của giáo trình so với các tài liệu lý thuyết thuần túy là gì?
Giáo trình dành 80% tổng thời lượng (72/90 giờ) cho việc thực hành trực tiếp trên máy tính, tích hợp các đoạn mã giải mẫu chi tiết cho từng dạng bài tập từ cơ bản đến kiểm tra biểu mẫu.

4. Làm sao để tự học giáo trình đạt hiệu quả cao?
Người học cần trực tiếp viết lại các đoạn mã ví dụ vào chương trình soạn thảo, kiểm tra hoạt động trên trình duyệt, hiểu rõ cơ chế bắt sự kiện (onclick) và hoàn thành đầy đủ hệ thống bài tập tự giải tại trang 76.

5. Giáo trình có cung cấp tài liệu bổ trợ nào không?
Tài liệu tích hợp phần "Bài tập JavaScript tự giải" ở trang 76 để rèn luyện kỹ năng viết mã độc lập và danh mục "Tài liệu tham khảo" tại trang 79 để tra cứu thêm các chuẩn ECMAScript.

Kết luận

  • Giá trị cốt lõi: Giáo trình mô đun "DCCT-JAVASCRIP" (MĐCNTT 24) cung cấp khối kiến thức chuẩn xác và có hệ thống về ngôn ngữ JavaScript client-side, tập trung vào cú pháp nền tảng, các đối tượng lõi (String, Math, Date), mô hình đối tượng tài liệu DOM, đối tượng trình duyệt và kỹ thuật xử lý form dữ liệu.
  • Lộ trình học tập đề xuất: Bắt đầu từ cú pháp, kiểu dữ liệu, cấu trúc điều khiển và hàm (Bài 1) $\rightarrow$ Tiếp cận các đối tượng cơ sở và hàm eval() (Bài 2) $\rightarrow$ Khai thác mô hình DOM, sự kiện và đối tượng trình duyệt (Bài 3) $\rightarrow$ Hoàn thiện kỹ năng xây dựng, kiểm tra tính hợp lệ của biểu mẫu form HTML (Bài 4).
  • Tài liệu bổ trợ: Người học sử dụng hệ thống bài tập tự giải tại trang 76 và danh mục tài liệu tham khảo tại trang 79 để hoàn thiện kỹ năng thực hành nghề nghiệp.