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

Giáo trình môn học JavaScript (Mã số môn học: MH36) là tài liệu học tập chuyên môn bắt buộc thuộc chương trình đào tạo trình độ Cao đẳng, ngành Tin học ứng dụng. Tài liệu được ban hành chính thức theo Quyết định số 459/QĐ-NSG ngày 31 tháng 08 năm 2022 của Hiệu trưởng Trường Cao Đẳng Bách Khoa Nam Sài Gòn, do ThS. Lê Thị Thùy Trang làm chủ biên. Nội dung giáo trình được xây dựng dựa trên khung chương trình chung môn Tin học do Bộ Lao động - Thương binh và Xã hội quy định, với tổng thời lượng thực hiện là 60 giờ (trong đó gồm 30 giờ lý thuyết, 28 giờ thực hành và 2 giờ kiểm tra đánh giá).

Mục tiêu học tập của giáo trình hướng tới việc trang bị cho người học ba nhóm năng lực cốt lõi:

  1. Kiến thức: Nhận biết tổng quan về ngôn ngữ JavaScript và hệ sinh thái JavaScript Framework; nắm vững các kiến thức cơ bản về cú pháp, kiểu dữ liệu, cấu trúc điều khiển; hiểu rõ phương thức tương tác và xử lý dữ liệu ở phía máy khách (client-side).
  2. Kỹ năng: Vận dụng được ngôn ngữ JavaScript để kết hợp với HTML và CSS trong thiết kế website; sử dụng thành thạo các đối tượng điều khiển, bắt và xử lý sự kiện để hoàn thiện giao diện người dùng tương tác.
  3. Năng lực tự chủ và trách nhiệm: Rèn luyện tác phong làm việc công nghiệp, tính kiên trì, cẩn trọng và năng lực tư duy logic trong quá trình lập trình và gỡ lỗi mã nguồn.

Về cấu trúc và cách tiếp cận, giáo trình được thiết kế theo mô hình tuyến tính gồm 6 bài học chính: từ kiến thức mở đầu, cấu trúc điều khiển, xử lý chuỗi và mảng, lập trình hướng sự kiện, cho đến thao tác với mô hình đối tượng tài liệu (DOM) và mô hình đối tượng trình duyệt (BOM). Đ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 phần giải thích cú pháp với các ví dụ mã nguồn cụ thể, hướng dẫn người học thao tác trực tiếp trên các công cụ tích hợp sẵn của trình duyệt web như hộp thoại kiểm tra mã nguồn (Inspect Element) và cửa sổ giao diện dòng lệnh (Console).

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

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

Giáo trình gồm 6 bài học trọng tâm được sắp xếp theo logic tiến trình từ cơ bản đến nâng cao:

  • Bài 1: Mở đầu
    Giới thiệu định nghĩa ngôn ngữ JavaScript, phân tích ưu điểm (thao tác độc lập trên client, đa nền tảng, dễ tiếp cận) và nhược điểm (mã nguồn hiển thị công khai ở phía client). Giới thiệu tổng quan hệ sinh thái framework/thư viện gồm Angular, NodeJS, ReactJS, jQuery, Sencha Touch, ExtJS. Trình bày ba phương thức nhúng mã kịch bản: Internal (trong thẻ <script>), External (liên kết tệp .js) và Inline (trực tiếp trong thuộc tính thẻ HTML). Hướng dẫn sử dụng các hàm tương tác cơ bản (alert(), confirm(), prompt()), công cụ gỡ lỗi (Inspect Element, console.log()), cùng các hàm định thời gian (setTimeout(), clearTimeout(), setInterval(), clearInterval()). Cung cấp quy tắc khai báo biến bằng từ khóa var, let, const, quy ước đặt tên biến, các kiểu dữ liệu cơ bản, phương thức xuất dữ liệu document.write(), và hệ thống toán tử (toán học, gán, quan hệ, luận lý, độ ưu tiên toán tử, sự khác biệt giữa toán tử so sánh == và ===, các thao tác ép kiểu dữ liệu).
  • Bài 2: Cấu trúc điều khiển
    Trình bày cú pháp và nguyên lý thực thi của cấu trúc rẽ nhánh if, if...else, else if và các cấu trúc điều kiện lồng nhau. Phân tích cấu trúc lựa chọn switch...case, quy tắc sử dụng lệnh break, khối default và kỹ thuật gom nhóm case. Cung cấp cú pháp các vòng lặp xác định (for) và vòng lặp không xác định (while, do...while), kèm theo hai lệnh điều khiển luồng lặp break (ngắt vòng lặp) và continue (bỏ qua bước lặp). Chương này tích hợp hệ thống bài toán mẫu gồm: kiểm tra số nguyên âm/dương, tính tổng hai số, giải phương trình bậc nhất một ẩn và kiểm tra số nguyên tố.
  • Bài 3: Chuỗi, mảng
    Tập trung vào cấu trúc dữ liệu chuỗi (String) và mảng (Array). Về chuỗi: hướng dẫn nối chuỗi bằng toán tử +, xử lý chuỗi nhiều dòng bằng ký tự \ hoặc template string ``, ép kiểu bằng .toString() hoặc đối tượng String(), các hàm xử lý chuỗi gồm indexOf(), lastIndexOf(), search(), slice(), substring(), substr(), replace(). Về mảng: cú pháp khai báo qua new Array() hoặc dấu ngoặc vuông [], truy xuất phần tử theo chỉ mục (index từ 0 đến length - 1), in mảng qua .join(), duyệt mảng bằng vòng lặp for/while, forEach, map, cùng các phương thức tìm kiếm find(), findIndex(). Đồng thời, bài học cung cấp các hàm xử lý số học thuộc đối tượng Number (parseInt(), parseFloat(), toFixed(), toPrecision()) và các phương thức xử lý thời gian thuộc đối tượng Date (nhóm hàm get* và set* cho ngày, tháng, năm, giờ, phút, giây, mili-giây).
  • Bài 4: Sự kiện trong JavaScript
    Định nghĩa sự kiện và cơ chế bắt sự kiện trên phần tử HTML thông qua ba cách: thuộc tính HTML inline, thuộc tính đối tượng DOM và phương thức addEventListener(). Trình bày kỹ thuật kiểm soát luồng sự kiện qua giá trị return true/return false (ứng dụng chặn submit form), quản lý sự kiện vòng đời trang window.onload và thứ tự biên dịch script, phương thức loại bỏ sự kiện removeEventListener(). Chi tiết hóa các sự kiện tương tác: sự kiện chuột (click, ondblclick, mouseover/hover, onmouseout, mousemove), sự kiện bàn phím/biểu mẫu (keyup, submit), và sự kiện cửa sổ (resize).
  • Bài 5: DOM trong JavaScript
    Trình bày tổng quan và cách thức truy xuất, hiệu chỉnh Mô hình Đối tượng Tài liệu (Document Object Model) thông qua 4 thành phần: DOM Element (truy xuất phần tử qua ID, TagName, ClassName), DOM HTML (thay đổi cấu trúc/nội dung thẻ), DOM CSS (thay đổi định dạng giao diện), và DOM Nodes (thao tác trên cây phân cấp đối tượng).
  • Bài 6: BOM trong JavaScript
    Trình bày Mô hình Đối tượng Trình duyệt (Browser Object Model), giúp kịch bản tương tác trực tiếp với môi trường trình duyệt thông qua 6 đối tượng thành phần: Window, Location, History, Cookie, Navigator, và Screen.

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

Giáo trình thiết lập các khối kiến thức lý thuyết cơ sở bao gồm:

  • Nguyên lý thực thi kịch bản Client-side: Cơ chế phân tách phiên làm việc độc lập giữa các trình duyệt khách, chu trình tải và biên dịch mã nguồn theo thứ tự từ trên xuống dưới, từ trái qua phải của bộ phân tích cú pháp HTML/JS.
  • Hệ thống định kiểu động (Dynamic Typing) và phạm vi biến (Scope): Cơ chế tự động nhận diện kiểu dữ liệu theo giá trị gán, sự khác biệt giữa phạm vi hàm/toàn cục của var và phạm vi khối lệnh (block scope) của let/const.
  • Mô hình phân cấp đối tượng: Cấu trúc phân cấp và mối quan hệ cha - con trong cây DOM, cơ chế quản lý trạng thái trình duyệt qua BOM, và biểu diễn dữ liệu hướng đối tượng qua JSON/Object literal.

Kỹ năng phát triển

Thông qua các nội dung trên, giáo trình rèn luyện cho người học các kỹ năng chuyên môn:

  • Kỹ năng kỹ thuật (Technical skills): Viết mã kịch bản JavaScript đúng chuẩn cú pháp; xây dựng hàm xử lý thuật toán; khai báo và thao tác thành thạo trên chuỗi, mảng và đối tượng; tích hợp mã JavaScript vào tài liệu HTML theo các mô hình Internal, External và Inline.
  • Kỹ năng phân tích (Analytical skills): Phân tích điều kiện logic trong các bài toán rẽ nhánh phức tạp; xác định điều kiện dừng vòng lặp tránh lỗi lặp vô hạn; phân biệt cơ chế so sánh dữ liệu tuyệt đối (===) và so sánh chuyển đổi ngầm định (==).
  • Năng lực ứng dụng thực tế (Practical competencies): Xây dựng chức năng kiểm tra tính hợp lệ của dữ liệu biểu mẫu (form validation); xử lý sự kiện tương tác chuột/bàn phím để thay đổi nội dung trang web động; ứng dụng các hàm định thời (setTimeout, setInterval) để tạo hiệu ứng thời gian thực; sử dụng công cụ Inspect Element và Console để bẫy lỗi và gỡ rối chương trình.

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

Giáo trình áp dụng mô hình sư phạm kết hợp chặt chẽ giữa lý thuyết và thực hành ứng dụng, tuân thủ định mức phân bổ 60 giờ học:

Thành phần chương trình Thời lượng (Giờ) Hình thức tổ chức Trọng tâm nội dung
Lý thuyết 30 Giảng dạy tập trung trên lớp Khái niệm, cú pháp, nguyên lý hoạt động của DOM/BOM
Thực hành 28 Phòng máy tính Viết mã, gỡ lỗi Console, thao tác sự kiện, làm bài tập
Kiểm tra 2 Đánh giá tổng hợp Đánh giá kỹ năng lập trình và giải quyết bài toán
Tổng cộng 60 - -

Phương pháp triển khai nội dung bao gồm:

  • Phương pháp giảng dạy (Pedagogical approach): Giảng viên đóng vai trò định hướng lý thuyết, giải thích cơ chế thực thi của trình duyệt và phân tích các đoạn mã mẫu trực quan. Mỗi chủ đề lý thuyết đều gắn liền với một đoạn mã minh họa tối giản để sinh viên quan sát kết quả ngay lập tức.
  • Bài tập và tình huống thực hành (Exercises & Practical scenarios): Giáo trình xây dựng các bài tập gắn liền với nhu cầu thực tế của lập trình giao diện web:
    • Bài toán thuật toán: Kiểm tra số chẵn lẻ, kiểm tra số âm/dương, kiểm tra số nguyên tố, giải phương trình bậc nhất một ẩn (ax + b = 0).
    • Xử lý dữ liệu & Giao diện: Nối chuỗi nhiều dòng, trích xuất chuỗi con, tính tổng các phần tử mảng bằng vòng lặp và phương thức forEach/map, lấy và thiết lập thời gian hệ thống qua đối tượng Date.
    • Tương tác sự kiện & Giao diện: Kiểm tra chuỗi nhập vào trường input nếu lớn hơn 5 ký tự thì hiển thị cảnh báo; bắt sự kiện di chuyển chuột trên toàn bộ thẻ <html> để tạo chuỗi số ngẫu nhiên (Math.random()) và dừng lại khi nhấp vào nút "Stop Random" bằng removeEventListener().
  • Phương pháp đánh giá (Assessment methods): Bao gồm đánh giá quá trình thông qua các bài thực hành trên lớp (khả năng viết mã đúng cú pháp, gỡ lỗi bằng console.log(), xử lý DOM/BOM) và bài kiểm tra kết thúc học phần thời lượng 2 giờ nhằm đánh giá tổng hợp kiến thức lập trình kịch bản và khả năng tích hợp HTML/CSS/JavaScript.
  • Hướng dẫn tự học (Self-study guidelines): Người học được hướng dẫn tận dụng các công cụ sẵn có trên trình duyệt web (Google Chrome, Mozilla Firefox) mà không cần cài đặt môi trường phức tạp. Sinh viên tự rèn luyện bằng cách gõ lại các đoạn mã mẫu, quan sát lỗi trong tab Console của Inspect Element, và hoàn thành các bài tập lập trình hàm được liệt kê ở cuối mỗi bài học.

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

  • Biên soạn theo quy chuẩn đào tạo quốc gia: Giáo trình được biên soạn dựa trên khung chương trình chuẩn của Bộ Lao động - Thương binh và Xã hội, chuẩn hóa theo văn bản quản lý số 459/QĐ-NSG của Trường Cao Đẳng Bách Khoa Nam Sài Gòn, đảm bảo tính thống nhất trong cấu trúc đào tạo nghề trình độ cao đẳng.
  • Cập nhật các chuẩn cú pháp hiện đại: Giáo trình cập nhật các cú pháp bổ sung quan trọng của JavaScript:
    • Phân biệt ba từ khóa khai báo biến var, let, và const, nhấn mạnh phạm vi khối lệnh (block scope) của let nhằm tối ưu hóa việc quản lý bộ nhớ và hạn chế lỗi ghi đè biến.
    • Giới thiệu cú pháp chuỗi nhiều dòng bằng template literal sử dụng cặp dấu backtick ( `), giúp việc khai báo chuỗi phức tạp trở nên trực quan hơn so với phép nối chuỗi truyền thống.
    • Cập nhật phương thức quản lý sự kiện chuẩn addEventListener() và removeEventListener(), cho phép gắn đồng thời nhiều hành động vào một phần tử giao diện mà không làm mất các hành vi trước đó.
  • Khái quát hóa bức tranh công nghệ toàn diện: Giáo trình cung cấp cái nhìn tổng quan về sự mở rộng của JavaScript từ môi trường client-side sang backend thông qua nền tảng NodeJS, đồng thời liệt kê các thư viện và framework phổ biến trong ngành công nghiệp phần mềm: Angular (xây dựng ứng dụng Single Page), ReactJS (phát triển ứng dụng Web/Mobile), jQuery (xử lý hiệu ứng và DOM), Sencha Touch và ExtJS (phát triển ứng dụng quản lý doanh nghiệp).
  • Gắn kết thực tiễn và kỹ thuật gỡ lỗi chuẩn mực: Tài liệu dành riêng các mục chi tiết hướng dẫn sử dụng công cụ gỡ lỗi Inspect Element và hàm console.log(), giúp sinh viên hình thành thói quen kiểm tra giá trị biến, theo dõi trạng thái đối tượng và phát hiện lỗi cú pháp/logic trực tiếp trong môi trường phát triển thực tế.

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

Giáo trình JavaScript (MH36) được biên soạn để phục vụ các nhóm đối tượng cụ thể trong hệ thống giáo dục nghề nghiệp và đào tạo chuyên môn:

  • Sinh viên hệ Cao đẳng: Tài liệu là giáo trình học tập bắt buộc cho học sinh - sinh viên theo học ngành/nghề Tin học ứng dụng. Giáo trình cung cấp đầy đủ các bài học lý thuyết và bài tập thực hành theo đề cương 60 giờ của môn học.
  • Điều kiện tiên quyết (Prerequisites): Để tiếp thu hiệu quả nội dung giáo trình, người học cần có kiến thức nền tảng về:
    1. Kiến thức tin học cơ sở và tư duy thuật toán cơ bản.
    2. Cú pháp xây dựng cấu trúc trang web bằng ngôn ngữ HTML (các thẻ cấu trúc, bảng biểu, liên kết, biểu mẫu dữ liệu).
    3. Cú pháp định dạng giao diện bằng CSS (các bộ chọn selector, thuộc tính màu sắc, bố cục).
  • Giảng viên chuyên ngành: Giảng viên sử dụng tài liệu như một đề cương bài giảng chuẩn mực, có thể khai thác trực tiếp hệ thống ví dụ minh họa, mã nguồn mẫu và các đề mục bài tập thực hành trên lớp để tổ chức giảng dạy lý thuyết (30 giờ) và hướng dẫn thực hành phòng máy (28 giờ).
  • Người tự học và tài liệu tra cứu: Tài liệu phù hợp cho sinh viên các ngành kỹ thuật liên quan hoặc người mới bắt đầu học lập trình web cần một tài liệu mô tả ngắn gọn, trung tính, diễn giải chi tiết các hàm xử lý chuỗi, mảng, toán tử, đối tượng Date/Number, và mô hình DOM/BOM chuẩn trong JavaScript.

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

1. Giáo trình này phù hợp với đối tượng người học nào?

Giáo trình được thiết kế chuyên biệt cho học sinh - sinh viên bậc Cao đẳng thuộc ngành/nghề Tin học ứng dụng theo chương trình đào tạo của Bộ Lao động - Thương binh và Xã hội. Ngoài ra, tài liệu phù hợp với người học muốn nắm vững kiến thức lập trình kịch bản phía client và cơ chế thao tác DOM/BOM.

2. Cần chuẩn bị những kiến thức nền tảng nào trước khi học môn học này?

Người học cần trang bị kiến thức cơ bản về Tin học đại cương, hiểu rõ cấu trúc thẻ của ngôn ngữ HTML (như <div>, <input>, <button>, <form>) và các thuộc tính định kiểu CSS cơ bản. Sự kết hợp giữa HTML, CSS và JavaScript là yêu cầu bắt buộc để hoàn thiện các bài thực hành trong giáo trình.

3. Điểm khác biệt của giáo trình này so với các tài liệu lập trình khác là gì?

Tài liệu được cấu trúc theo định hướng đào tạo nghề thực hành với tỉ lệ phân bổ thời gian cân bằng (30 giờ lý thuyết và 28 giờ thực hành). Giáo trình tập trung vào các ví dụ mã nguồn trực quan, giải thích chi tiết các cơ chế đặc thù của trình duyệt (cơ chế tải script tuần tự, window.onload, cách dùng Inspect Element và console.log) thay vì chỉ trình bày lý thuyết cú pháp đơn thuần.

4. Phương pháp tự học giáo trình này như thế nào để đạt hiệu quả cao nhất?

Người học nên kết hợp đọc hiểu cú pháp lý thuyết và trực tiếp viết lại các đoạn mã ví dụ trên các trình duyệt web phổ biến (Chrome, Firefox). Khi thực thi mã nguồn, cần luôn mở cửa sổ Console để quan sát kết quả xuất dữ liệu của console.log(), theo dõi thông báo lỗi và hoàn thiện tuần tự các bài tập thuật toán từ Bài 1 đến Bài 4 trước khi chuyển sang thao tác với DOM và BOM ở Bài 5, 6.

5. Giáo trình có tích hợp các tài liệu và nội dung bổ trợ nào?

Giáo trình tích hợp sẵn hệ thống mã nguồn mẫu hoàn chỉnh cho từng bài học, danh mục các hàm xử lý chuỗi/mảng/thời gian, hệ thống bài tập thực hành thuật toán, bài toán xử lý sự kiện biểu mẫu và danh mục tài liệu tham khảo chuyên ngành được liệt kê ở trang 76 của tài liệu.

Kết luận

Giáo trình JavaScript (Mã số: MH36) do ThS. Lê Thị Thùy Trang chủ biên tại Trường Cao Đẳng Bách Khoa Nam Sài Gòn cung cấp hệ thống kiến thức toàn diện, chuẩn mực và thực tiễn về ngôn ngữ lập trình kịch bản web cho sinh viên ngành Tin học ứng dụng. Tài liệu hệ thống hóa chặt chẽ từ cú pháp căn bản, cấu trúc điều khiển, kiểu dữ liệu mảng/chuỗi đến các mô hình tương tác hướng sự kiện, DOM và BOM.

Lộ trình học tập đề xuất theo giáo trình:

  1. Giai đoạn 1 (Nền tảng cú pháp): Nghiên cứu Bài 1 và Bài 2 để nắm vững biến (var, let, const), toán tử, hàm gỡ lỗi (console.log), cấu trúc điều kiện (if, switch) và vòng lặp (for, while).
  2. Giai đoạn 2 (Xử lý dữ liệu & Đối tượng): Hoàn thành Bài 3 để làm chủ các thao tác trên String, Array, Number, và Date.
  3. Giai đoạn 3 (Lập trình giao diện tương tác): Nghiên cứu Bài 4, Bài 5 và Bài 6 để thực hành xử lý sự kiện (addEventListener), can thiệp cấu trúc cây tài liệu qua DOM và điều khiển môi trường trình duyệt qua BOM.

Để mở rộng kiến thức, người học có thể tham khảo thêm các tài liệu chuyên ngành về các JavaScript Framework hiện đại (NodeJS, ReactJS, Angular) được giới thiệu trong phần tổng quan của giáo trình.