GIÁO TRÌNH BÀI GIẢNG: LẬP TRÌNH WEB – CHƯƠNG 3: NHẬP MÔN JAVASCRIPT (INTRODUCTION TO JAVASCRIPT)

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

Bài giảng Chương 3: Nhập môn JavaScript (Introduction to JavaScript) là tài liệu học tập chính khóa thuộc học phần Lập Trình Web, do giảng viên Nguyễn Hữu Hiếu biên soạn cho sinh viên Khoa Khoa Học và Kỹ Thuật Máy Tính – Trường Đại Học Bách Khoa TP.HCM (ấn bản lưu hành năm 2017). Trong cấu trúc chương trình đào tạo kỹ sư Công nghệ Thông tin, học phần này giữ vai trò là khối kiến thức cơ sở chuyên ngành, trang bị cho người học nền tảng kỹ thuật phát triển giao diện và logic tương tác phía máy khách (client-side).

Tài liệu xác định vị trí của JavaScript như một trong ba ngôn ngữ nền tảng của lập trình web chuẩn mực, cùng với HTML (định nghĩa nội dung) và CSS (quy định bố cục và hiển thị giao diện). Mục tiêu học tập cốt lõi của tài liệu tập trung vào:

  • Trang bị kiến thức cú pháp chuẩn của ngôn ngữ JavaScript dựa trên tiêu chuẩn ECMA-262.
  • Làm rõ cơ chế tương tác giữa JavaScript với cấu trúc Document Object Model (DOM) để thao tác nội dung, thuộc tính và kiểu dáng HTML/CSS.
  • Cung cấp phương pháp luận tổ chức mã nguồn (nội tuyến và ngoại tuyến) cùng kỹ thuật làm việc với các cấu trúc dữ liệu cốt lõi như Đối tượng (Object) và Mảng (Array).

Cấu trúc bài giảng được xây dựng theo phương pháp sư phạm tiếp cận trực quan: đi từ định nghĩa khái niệm, ngữ cảnh lịch sử, cú pháp căn bản, cơ chế xuất dữ liệu, đến thao tác trên các kiểu dữ liệu phức tạp. Điểm đặc thù của tài liệu là tính thực chứng cao, mọi khái niệm lý thuyết đều đi kèm các đoạn mã HTML/JavaScript tối giản có thể thực thi trực tiếp trên môi trường trình duyệt.

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

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

Nội dung của bài giảng Chương 3: Introduction to JavaScript bao gồm 7 chủ đề kỹ thuật then chốt:

  1. Tổng quan ngôn ngữ và Lịch sử chuẩn hóa:

    • Định nghĩa JavaScript là ngôn ngữ kịch bản cho HTML và Web.
    • Bối cảnh lịch sử: Được phát minh bởi Brendan Eich vào năm 1995, chính thức chuẩn hóa thành chuẩn ECMA vào năm 1997 với tên định danh kỹ thuật là ECMA-262 (phiên bản ECMAScript 5 ban hành tháng 7 năm 2010 được trích dẫn làm cơ sở tham chiếu).
    • Phân biệt rõ rệt giữa JavaScript và Java: hai ngôn ngữ hoàn toàn khác nhau về khái niệm thiết kế và triết lý vận hành.

  2. Thao tác Document Object Model (DOM) căn bản:

    • Thay đổi nội dung văn bản HTML thông qua phương thức tìm kiếm phần tử document.getElementById() và thuộc tính innerHTML.
    • Thay đổi giá trị thuộc tính HTML (ví dụ minh họa: thay đổi thuộc tính src của thẻ <img> giữa các tệp ảnh pic_bulboff.gif và pic_bulbon.gif khi người dùng kích hoạt sự kiện).
    • Thay đổi kiểu dáng hiển thị CSS trực tiếp qua thuộc tính style (ví dụ gán màu sắc color = "red").
    • Sử dụng JavaScript để kiểm thực dữ liệu nhập (Data Validation).

  3. Vị trí nhúng mã và Kiến trúc mã nguồn:

    • Sử dụng thẻ <script> trong phần <head> hoặc <body> của tài liệu HTML.
    • Cơ chế tách mã nguồn sang tệp tin ngoại tuyến (tệp có phần mở rộng .js) thông qua cú pháp <script src="myScript.js"></script>.
    • Phân tích lợi ích của tệp ngoại tuyến: phân tách rõ ràng giữa cấu trúc HTML và mã logic, hỗ trợ bảo trì, và tăng tốc độ tải trang nhờ bộ nhớ đệm (cache) của trình duyệt.

  4. Các phương thức xuất dữ liệu (JavaScript Output):

    • Tài liệu nêu rõ JavaScript không có hàm in ấn/hiển thị tích hợp sẵn mà sử dụng 4 cơ chế của môi trường trình duyệt:
      1. Ghi dữ liệu vào hộp thông báo nổi: window.alert().
      2. Ghi trực tiếp vào luồng xuất HTML: document.write() (kèm lưu ý: nếu thực thi sau khi trang tải xong sẽ ghi đè toàn bộ tài liệu).
      3. Ghi vào phần tử HTML thông qua thuộc tính: innerHTML.
      4. Ghi thông tin vào bảng điều khiển gỡ lỗi của trình duyệt: console.log() (truy cập bằng phím tắt F12).

  5. Cú pháp, Quy tắc định danh và Biến:

    • Cấu tạo câu lệnh (Statements) kết thúc bằng dấu chấm phẩy ; (không bắt buộc tuyệt đối nhưng được khuyến nghị).
    • Phân loại giá trị thành 2 nhóm: Giá trị cố định (Literals: số thực 10.50, số nguyên 1001, chuỗi "John Doe" / 'John Doe', biểu thức tính toán) và Giá trị biến (Variables khai báo qua từ khóa var).
    • Phân biệt chữ hoa - chữ thường (Case Sensitivity) trong tên biến (lastName khác với lastname).
    • Quy ước đặt tên Camel Case (FirstName, LastName), cấm sử dụng dấu gạch ngang (Hyphen -) trong tên biến do trùng với toán tử trừ.
    • Quy tắc chú thích mã nguồn bằng // (dòng đơn) và /* ... */ (nhiều dòng).

  6. Cấu trúc dữ liệu Đối tượng (Objects):

    • Đặc điểm: Không cần khai báo trước kiểu dữ liệu của biến.
    • Cú pháp khởi tạo qua Object Literal: { name1: value1, ..., nameN: valueN } (ví dụ tài liệu: car = {myCar: "Saturn", 7: "Mazda", getCar: CarTypes("Honda"), special: Sales}).
    • Ba phương thức tạo đối tượng trong JavaScript:
      1. Sử dụng Object literal: var course = { number: "CIT597", teacher: "Dr. Dave" };
      2. Sử dụng toán tử new Object() và gán thuộc tính sau đó.
      3. Sử dụng hàm khởi tạo (Constructor Function) kết hợp từ khóa bắt buộc this: 
        function Course(n, t) {
    this.number = n;
    this.teacher = t;
}
var course = new Course("CIT597", "Dr. Dave");
    • Cơ chế truy xuất thuộc tính: Cú pháp dấu chấm (car.myCar) và cú pháp mảng/ngoặc vuông (car["myCar"] hoặc car[7]).

  7. Cấu trúc dữ liệu Mảng (Arrays) và Vòng lặp for...in:

    • Khởi tạo mảng qua 4 cách: Array literal ["red", "green", "blue"], new Array(), new Array(size), hoặc new Array(val1, val2, ...).
    • Tính chất mảng thưa (Sparse Array): Bộ nhớ chỉ được cấp phát cho các phần tử thực sự được gán giá trị; chỉ số mảng có giới hạn từ $0$ đến $2^{32} - 1$.
    • Mảng đa chiều được biểu diễn dưới dạng mảng của các mảng (myArray[5][3]).
    • Các hàm xử lý mảng có sẵn: myArray.sort() (sắp xếp theo thứ tự bảng chữ cái), myArray.sort(function(a, b) { return a - b; }) (sắp xếp theo thứ tự số học), myArray.reverse(), myArray.push(), myArray.pop(), myArray.toString().
    • Cú pháp vòng lặp duyệt thuộc tính for (variable in object) và đặc tính thứ tự duyệt không xác định (undefined order).

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

Tài liệu tập trung xác lập hệ thống lý thuyết cốt lõi về:

  • Mô hình lập trình hướng sự kiện (Event-driven Programming): Khái niệm hàm được kích hoạt khi có sự kiện tương tác từ người dùng (ví dụ sự kiện nhấp chuột qua thuộc tính onclick).
  • Cơ chế định kiểu động (Dynamic Typing): Khả năng lưu trữ giá trị linh hoạt của biến mà không cần định nghĩa kiểu dữ liệu tĩnh tại thời điểm khai báo.
  • Mối liên hệ giữa Mảng và Đối tượng: Khẳng định bản chất mảng trong JavaScript chính là đối tượng, giải thích cơ chế truy xuất thuộc tính thông qua toán tử chỉ mục.

Kỹ năng phát triển

Thông qua bài giảng, người học được rèn luyện các kỹ năng kỹ thuật cụ thể:

  • Kỹ năng viết mã kịch bản JavaScript chuẩn xác theo quy tắc cú pháp ECMA.
  • Kỹ năng thao tác động với các nút trên cây DOM để thay đổi thuộc tính và kiểu dáng giao diện mà không cần tải lại toàn bộ trang.
  • Kỹ năng sử dụng các công cụ gỡ lỗi (Developer Tools - F12) và bảng điều khiển (console.log) để kiểm tra dữ liệu và theo dõi luồng thực thi của chương trình.

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

Tài liệu bài giảng áp dụng mô hình sư phạm trực quan, lấy ví dụ thực hành tối giản làm trung tâm giải thích lý thuyết. Mỗi chủ đề đều được tổ chức theo tiến trình: Nêu nguyên lý $\rightarrow$ Giới thiệu cú pháp chuẩn $\rightarrow$ Cung cấp đoạn mã HTML hoàn chỉnh minh họa $\rightarrow$ Phân tích kết quả hiển thị trên trình duyệt.

Bài tập và các ca thực hành mẫu

Bài giảng tích hợp nhiều trường hợp mẫu có tính ứng dụng kỹ thuật trực tiếp:

  • Ứng dụng bật/tắt đèn: Thao tác hàm changeImage() để kiểm tra và hoán đổi giá trị thuộc tính src của thẻ ảnh: 
    <script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>
  • Thực hành xuất dữ liệu và biểu thức: Tính toán số học (5 + 6) * 10, xuất kết quả ra bảng điều khiển hoặc trực tiếp vào cây DOM qua định danh id="demo".
  • Thao tác mảng số học: Ứng dụng hàm so sánh function(a, b) { return a - b; } truyền vào sort() để xử lý việc sắp xếp giá trị số học thay cho sắp xếp chuỗi mặc định.

Hướng dẫn tự học và kiểm tra

Người học được định hướng tự học thông qua việc tái tạo lại các đoạn mã HTML/JS trong môi trường cục bộ, sử dụng phím F12 để theo dõi các thông báo lỗi và kiểm thử các phương thức xuất dữ liệu khác nhau. Việc thực hành phân biệt phạm vi tác động của mã nguồn khi đặt trong thẻ <head> so với thẻ <body> giúp người học nắm vững thứ tự phân tích cú pháp của trình duyệt.

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

Dựa trên dữ liệu văn bản bài giảng năm 2017 của Trường Đại học Bách Khoa TP.HCM, các điểm kỹ thuật nổi bật bao gồm:

  1. Chuẩn hóa kiến thức theo chuẩn ECMA-262: Tài liệu bám sát đặc tả kỹ thuật tiêu chuẩn ECMA-262 (nêu rõ mốc chuẩn ECMAScript 5 ban hành tháng 7 năm 2010), giúp người học nắm bắt đúng quy chuẩn ngôn ngữ chính thức thay vì các phần mở rộng phi tiêu chuẩn của từng trình duyệt.
  2. Làm rõ các hành vi đặc biệt của DOM API: Cảnh báo chi tiết về tác động phụ của phương thức document.write(). Nếu hàm này được gọi sau khi tài liệu HTML đã hoàn tất tải, nó sẽ xóa bỏ toàn bộ nội dung hiện hữu của trang.
  3. Phân tích bản chất của cấu trúc dữ liệu:
    • Giải thích cơ chế lưu trữ của Mảng thưa (Sparse Array), nơi không gian bộ nhớ chỉ cấp phát cho các chỉ số được gán dữ liệu thực tế, cho phép các chỉ số lớn như myArray[50000] = 3 hoạt động bình thường mà không gây lãng phí tài nguyên.
    • Đối chiếu giữa cú pháp truy xuất thuộc tính qua dấu chấm (object.property) và ngoặc vuông (object[property]), chỉ rõ trường hợp bắt buộc phải dùng ngoặc vuông khi tên thuộc tính được lưu trong biến hoặc chứa ký tự đặc biệt.

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

Tài liệu được thiết kế nhằm phục vụ các nhóm đối tượng học thuật cụ thể:

  • Sinh viên đại học chính quy: Sinh viên năm thứ 2 hoặc năm thứ 3 thuộc các ngành Khoa học Máy tính, Kỹ thuật Máy tính, Công nghệ Thông tin và Hệ thống Thông tin đang theo học học phần Lập trình Web.
  • Yêu cầu tiên quyết (Prerequisites): Người học cần có kiến thức cơ bản về ngôn ngữ đánh dấu siêu văn bản (HTML) để tạo lập cấu trúc trang web và ngôn ngữ định kiểu theo tầng (CSS) để thiết lập bố cục giao diện.
  • Giảng viên chuyên ngành: Sử dụng làm đề cương bài giảng slide chuẩn hóa trên lớp, cung cấp cấu trúc nội dung và các đoạn mã mẫu ngắn gọn cho các buổi học lý thuyết kết hợp thực hành.
  • Người tự học lập trình Web: Sử dụng làm tài liệu tham khảo kỹ thuật để hiểu rõ cơ chế vận hành nguyên bản của JavaScript (Vanilla JavaScript) trước khi tiếp cận các khung làm việc (frameworks) phức tạp.

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 biên soạn phục vụ sinh viên khối ngành Công nghệ Thông tin và Kỹ thuật Máy tính tại các trường đại học, đặc biệt là người bắt đầu tiếp cận lập trình ứng dụng web phía client.

2. Cần kiến thức nền tảng nào trước khi học chương này?

Người học bắt buộc phải nắm vững cấu trúc thẻ của HTML và các thuộc tính định dạng cơ bản của CSS, do JavaScript trong chương này được sử dụng chủ yếu để tương tác trực tiếp lên hai thành phần trên.

3. Điểm khác biệt căn bản giữa Java và JavaScript theo bài giảng là gì?

Tài liệu khẳng định Java và JavaScript là hai ngôn ngữ hoàn toàn khác nhau cả về mặt khái niệm lẫn thiết kế; JavaScript là ngôn ngữ kịch bản gọn nhẹ chạy trên trình duyệt web, tuân theo tiêu chuẩn ECMA-262 do Brendan Eich phát minh năm 1995.

4. Tại sao nên đặt mã JavaScript trong tệp tin ngoại tuyến (.js)?

Theo bài giảng, việc tách mã JavaScript ra tệp ngoại tuyến mang lại ba lợi ích: phân tách rõ ràng giữa mã cấu trúc HTML và mã xử lý logic, nâng cao tính dễ đọc và khả năng bảo trì hệ thống, đồng thời tận dụng bộ nhớ đệm (cache) của trình duyệt để tăng tốc độ tải trang.

5. Vì sao không được dùng dấu gạch ngang (hyphen) khi đặt tên biến trong JavaScript?

Trong cú pháp JavaScript, dấu gạch ngang - được dành riêng cho toán tử số học (phép trừ). Do đó, việc đặt tên biến dạng first-name sẽ gây lỗi cú pháp; thay vào đó, lập trình viên được hướng dẫn sử dụng quy ước Camel Case (ví dụ firstName).

Kết luận

Bài giảng Chương 3: Nhập môn JavaScript cung cấp một hệ thống kiến thức nền tảng, có cấu trúc chặt chẽ và chuẩn xác về ngôn ngữ lập trình JavaScript trong môi trường web. Bằng cách kết hợp giữa lý thuyết chuẩn hóa ECMA-262 và các ví dụ thực hành thao tác DOM cụ thể, tài liệu xác lập nền móng kỹ thuật vững chắc cho người học.

Lộ trình học tập tiếp theo được gợi ý từ tài liệu bao gồm việc mở rộng nghiên cứu về cơ chế xử lý sự kiện chuyên sâu, các hàm nâng cao và kỹ thuật lập trình tương tác phức tạp hơn trong các chương học tiếp theo của học phần Lập Trình Web.