Giáo Trình Ngôn Ngữ JavaScript – ThS. Nguyễn Duy Hải (Trung Tâm CNTT – ĐHSP Hà Nội)
Tổng quan về giáo trình
Giáo trình Ngôn ngữ JavaScript do ThS. Nguyễn Duy Hải – Phó Giám đốc Trung tâm Công nghệ Thông tin, Trường Đại học Sư phạm Hà Nội biên soạn, là tài liệu giảng dạy học thuật phục vụ học phần lập trình kịch bản phía máy khách (Client-Side Scripting) trong chương trình đào tạo Cử nhân Công nghệ Thông tin và Sư phạm Tin học. Môn học giữ vị trí nền tảng trong khối kiến thức công nghệ web, đóng vai trò cầu nối giữa việc thiết kế giao diện tĩnh (HTML/CSS) và xử lý tương tác động trên trình duyệt web.
Mục tiêu học tập của giáo trình được xác định rõ ràng:
- Cung cấp nguồn gốc lịch sử và bản chất của JavaScript (ngôn ngữ kịch bản phát triển từ LiveScript bởi Netscape và Sun Microsystems).
- Trang bị các quy tắc cú pháp cốt lõi: quy tắc chữ hoa/thường, quy tắc sử dụng cặp dấu, khoảng trắng và chú thích.
- Làm chủ kỹ thuật nhúng mã JavaScript vào tài liệu HTML qua thẻ
<script>, tệp ngoài .js, thuộc tính thẻ hoặc trình điều khiển sự kiện.
- Nắm vững các cấu trúc dữ liệu nền tảng, biến, toán tử, mảng, cấu trúc điều khiển rẽ nhánh, vòng lặp và hàm.
- Khai thác các đối tượng tích hợp sẵn (
String, Math, Date) và đối tượng trình duyệt BOM/DOM (như đối tượng window).
- Xây dựng kỹ năng xử lý hệ thống sự kiện phong phú và hiện thực hóa các giải thuật ứng dụng tương tác giao diện.
Cấu trúc giáo trình tiếp cận theo mô hình tuyến tính từ cơ sở lý thuyết ngôn ngữ đến thao tác đối tượng và ứng dụng thực tiễn. Điểm đặc sắc của tài liệu nằm ở tính hệ thống, việc cung cấp đầy đủ bảng tra cứu sự kiện, các phân tích thuật toán chi tiết kèm mã nguồn mẫu có thể thực thi trực tiếp trên các trình duyệt tiêu chuẩn như Netscape Navigator và Internet Explorer.
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 được phân bổ qua các chủ đề kiến thức liên kết chặt chẽ theo tiến trình logic sư phạm:
[Chủ đề 1: Tổng quan & Môi trường thực thi]
[Chủ đề 2: Cú pháp, Biến, Kiểu dữ liệu & Toán tử]
[Chủ đề 3: Cấu trúc dữ liệu Mảng & Lệnh điều khiển]
[Chủ đề 4: Hàm & Hệ thống Đối tượng Cơ bản]
[Chủ đề 5: Cơ chế Xử lý Sự kiện (Event Handling)]
[Chủ đề 6: Mô hình DOM, BOM & Giải thuật Ứng dụng]
- Chủ đề 1: Tổng quan, Công cụ và Môi trường thực thi: Giới thiệu định nghĩa ngôn ngữ kịch bản client-side; lịch sử phát triển từ LiveScript; khả năng tăng cường tính tương tác và thay đổi nội dung động; các công cụ sinh mã; 4 phương pháp chèn JavaScript vào HTML (dùng thẻ
<script language="JavaScript">, gọi file ngoài qua thuộc tính src, nhúng biểu thức trong thuộc tính thẻ, và chèn vào trình điều khiển sự kiện); giới thiệu các hàm giao tiếp người dùng cơ bản (confirm(), alert(), document.write()).
- Chủ đề 2: Biến, Kiểu dữ liệu và Toán tử: Định nghĩa biến như một vật chứa tham chiếu bộ nhớ; cú pháp khai báo với từ khóa
var (ví dụ: var A = 10;); phạm vi biến toàn cục và biến cục bộ; các kiểu dữ liệu nguyên thủy (Integer với hệ thập phân, thập lục phân, nhị phân; Floating-point với ký hiệu khoa học e/E; String trong dấu ngoặc đơn/kép; Boolean true/false; Null hàm ý không có dữ liệu); cơ chế kết hợp kiểu (ép kiểu tự động giữa chuỗi và số); hệ thống toán tử một ngôi và hai ngôi (toán tử số học, so sánh, logic &&, ||, !, chuỗi, lượng giá) cùng mức độ ưu tiên thực thi.
- Chủ đề 3: Cấu trúc Mảng và Cấu trúc Điều khiển: Khởi tạo đối tượng mảng qua cú pháp
new Array(...); quy tắc chỉ số mảng bắt đầu từ 0 (ví dụ: emp[0] = "Ryan Dias"); hỗ trợ mảng nhiều chiều; các phương thức biến đổi mảng chuyên dụng (join, pop, push, reverse, shift, sort). Cấu trúc rẽ nhánh điều kiện (if...else, switch) và cấu trúc lặp (for, do...while, while, break & continue, for...in, with).
- Chủ đề 4: Hàm và Các Đối tượng Cơ bản: Phân loại hàm định nghĩa trước (
eval(), isNaN()) và hàm do người dùng tự tạo (function funcName(args){...}); từ khóa return; khái niệm ngôn ngữ dựa trên đối tượng (thuộc tính biểu diễn dữ liệu, phương thức biểu diễn hàm tác động); từ khóa this; câu lệnh for...in để duyệt thuộc tính đối tượng; câu lệnh with; chi tiết về 3 đối tượng tích hợp sẵn:
String: Các cách tạo chuỗi, các phương thức tách chuỗi con, chuyển đổi chữ hoa/chữ thường.Math: Cung cấp các hằng số toán học (Math.PI) và phương thức tính toán nâng cao (ví dụ: hàm tính diện tích hình tròn doCalc(x)).Date: Đối tượng quản lý thời gian lưu trữ theo mili-giây tính từ mốc 01/01/1970 00:00:00; các phương thức thiết lập, trích xuất và biến đổi giá trị ngày giờ.
- Chủ đề 5: Cơ chế Xử lý Sự kiện (Event Handling): Cú pháp gán bộ lắng nghe sự kiện (
<thẻ sựkiện="lệnh;">); danh mục các sự kiện tương tác toàn diện trên chuột, bàn phím, tài liệu và biểu mẫu.
- Chủ đề 6: Mô hình Đối tượng Trình duyệt (BOM/DOM) và Ứng dụng: Cấu trúc phân cấp đối tượng trình duyệt (IE Browser Objects, Netscape Browser Objects); đối tượng
window cùng các thuộc tính (status, document, history, location, opener, tập hợp frames[]); nhóm hàm định thời gian (setTimeout, clearTimeout, setInterval, clearInterval); giải thuật và mã nguồn minh họa hiệu ứng giao diện.
Bảng phân loại sự kiện chuẩn trong giáo trình
Giáo trình cung cấp danh mục hệ thống các sự kiện được hỗ trợ trên trình duyệt như sau:
| Tên sự kiện |
Thời điểm phát sinh (Occurs when...) |
onabort |
Người dùng hủy việc tải trang web (a user aborts page loading) |
onblur |
Đối tượng mất tiêu điểm tương tác (a user leaves an object) |
onchange |
Người dùng thay đổi giá trị của đối tượng (a user changes the value of an object) |
onclick |
Người dùng nhấp chuột vào đối tượng (a user clicks on an object) |
ondblclick |
Người dùng nhấp đúp chuột vào đối tượng (a user double-clicks on an object) |
onfocus |
Đối tượng nhận trạng thái kích hoạt/tiêu điểm (a user makes an object active) |
onkeydown |
Một phím trên bàn phím bắt đầu được nhấn xuống (a keyboard key is on its way down) |
onkeypress |
Một phím trên bàn phím được nhấn giữ (a keyboard key is pressed) |
onkeyup |
Một phím trên bàn phím được nhả ra (a keyboard key is released) |
onload |
Trang web hoàn tất việc tải nội dung (Lưu ý trong Netscape: sự kiện diễn ra trong quá trình tải) |
onmousedown |
Người dùng nhấn một nút chuột (a user presses a mouse-button) |
onmousemove |
Con trỏ chuột di chuyển trên đối tượng (a cursor moves on an object) |
onmouseover |
Con trỏ chuột di chuyển vào phạm vi đối tượng (a cursor moves over an object) |
onmouseout |
Con trỏ chuột rời khỏi phạm vi đối tượng (a cursor moves off an object) |
onmouseup |
Người dùng nhả nút chuột (a user releases a mouse-button) |
onreset |
Người dùng đặt lại dữ liệu biểu mẫu (a user resets a form) |
onselect |
Người dùng bôi đen/chọn nội dung văn bản (a user selects content on a page) |
onsubmit |
Người dùng gửi dữ liệu biểu mẫu đi (a user submits a form) |
onunload |
Người dùng đóng trang web hiện hành (a user closes a page) |
Kiến thức nền tảng được xây dựng
Giáo trình thiết lập hệ thống nền tảng vững chắc về lý thuyết và kiến trúc phần mềm:
- Nguyên lý ngôn ngữ dựa trên đối tượng (Object-Based Paradigm): Phân tích rõ cấu trúc thực thể bao gồm thuộc tính (biến) và phương thức (hàm); minh họa trực quan qua mô hình thực tế (đối tượng xe hơi với các thuộc tính cấu tạo, kiểu dáng, màu sắc và các phương thức
go(), brake(), reverse()); quy tắc truy cập cú pháp dấu chấm objectName.propertyName và objectName.method().
- Cơ chế điều khiển bộ nhớ và luồng thực thi: Bản chất lưu trữ của biến thông qua từ khóa
var, quy tắc xác định phạm vi biến toàn cục/cục bộ, vai trò của con trỏ ngữ cảnh this.
- Mô hình lập trình hướng sự kiện (Event-Driven Architecture): Cơ chế bắt và phân phối sự kiện từ hành vi người dùng (chuột, bàn phím) hoặc trạng thái trang web đến các đoạn mã xử lý tương ứng.
Kỹ năng phát triển
Thông qua nội dung học phần, người học xây dựng và hoàn thiện ba nhóm năng lực:
- Kỹ năng kỹ thuật (Technical skills): Viết mã JavaScript đúng quy tắc cú pháp; nhúng mã linh hoạt vào HTML; khai thác thành thạo các phương thức xử lý mảng (
sort, reverse, push, pop) và chuỗi; thao tác các hàm toán học và đối tượng ngày giờ Date.
- Kỹ năng phân tích (Analytical skills): Phân tích và thiết kế thuật toán xử lý dữ liệu chuỗi/mảng; kiểm tra và thẩm định tính hợp lệ của dữ liệu biểu mẫu (form validation) trước khi gửi lên máy chủ.
- Năng lực thực hành ứng dụng (Practical competencies): Xây dựng các chức năng tương tác giao diện thực tế như thanh điều hướng (menus & navigation), lịch (calendars), hiệu ứng văn bản và hình ảnh, đồng hồ thời gian thực, quản lý cửa sổ và khung (
window và frames).
Phương pháp giảng dạy và học tập
Giáo trình được cấu trúc theo phương pháp sư phạm diễn dịch kết hợp minh họa thực nghiệm. Mỗi khái niệm lý thuyết đều đi kèm cấu trúc cú pháp chuẩn, diễn giải thông số và các khối mã nguồn HTML/JavaScript mẫu hoàn chỉnh giúp người học có thể đối chiếu trực quan.
Bài tập và Case Study mẫu: Hiệu ứng chữ chạy trên thanh trạng thái
Giáo trình trình bày chi tiết một tình huống thực hành điển hình về điều khiển giao diện trình duyệt thông qua bài toán tạo hiệu ứng dòng chữ chuyển động trên thanh trạng thái (window.status).
<script language="javascript">
var str = 'Khoa CNTT-DHSP Ha Noi';
// Đưa khoảng trắng vào để tạo khoảng cách giữa 2 lần chạy
for (i = str.length; i < 100; i++) {
str = str + ' ';
}
function ChuChay() {
window.status = str;
str = str.substr(1) + str.substr(0, 1);
setTimeout(ChuChay, 100);
}
ChuChay();
</script>
Định hướng mở rộng và tự học
Giáo trình đưa ra các bài tập phát triển năng lực mở rộng:
- Nâng cấp thuật toán chữ chạy để xử lý nhiều dòng văn bản khác nhau thông qua việc lưu trữ danh sách chuỗi trong Mảng (
Array).
- Thay đổi quy luật chuyển động và hướng di chuyển của chuỗi ký tự.
- Chuyển đổi không gian hiển thị: áp dụng giải thuật chữ chạy lên thanh tiêu đề tài liệu (
document.title) hoặc các phần tử giao diện người dùng khác.
- Tự tra cứu và đối chiếu các thuộc tính chi tiết của hệ thống đối tượng trình duyệt trên nền tảng tài liệu tham khảo chuẩn W3Schools.
Điểm nổi bật và cập nhật
Nội dung giáo trình phản ánh toàn diện bức tranh kỹ thuật của JavaScript trong giai đoạn định hình các tiêu chuẩn web động và ứng dụng tương tác giao diện:
- Tính hệ thống trong phân loại ứng dụng: Giáo trình tổng hợp danh mục rộng lớn các ứng dụng công nghệ của JavaScript trong xây dựng website, bao gồm:
- Tương tác tài liệu và biểu mẫu: Thay đổi thanh trạng thái, tiêu đề; tự động refresh trang; kiểm tra tính hợp lệ của dữ liệu form; tạo hộp thoại tự tạo (custom dialogs); tạo hiệu ứng form (Form Effects).
- Thành phần điều hướng và tiện ích: Lịch (Calendars); liên kết và chú giải công cụ (Links & Tooltips); đồng hồ ngày giờ (Date & Time); hệ thống menu điều hướng đa cấp dựa trên CSS (Menus & Navigation, CSS Based, Multi-levels).
- Hiệu ứng động và đồ họa: Hiệu ứng tài liệu (Document Effects); hiệu ứng chuột và con trỏ (Mouse and Cursor); thanh cuộn (Scrollers); hiệu ứng hoạt hình văn bản (Text Animations); trò chơi trên web (Games); hiệu ứng hình ảnh (Image Effects, Galleries, Mouseover, Slideshows).
- Tương tác dữ liệu và cấu trúc nâng cao: Quản lý tùy biến người dùng/hệ thống (User/System Preference); quản lý cửa sổ và khung (Window and Frames); xử lý nội dung động tích hợp công nghệ Iframe, AJAX, XML và RSS.
- Ghi nhận sự khác biệt môi trường thực thi: Giáo trình phân định rõ hai nhánh đối tượng trình duyệt chính thời kỳ bấy giờ là IE Browser Objects và Netscape Browser Objects, đồng thời lưu ý những sai khác trong xử lý sự kiện (như cơ chế kích hoạt sự kiện
onload của Netscape) giúp người học nắm bắt tính tương thích đa trình duyệt.
Đối tượng sử dụng giáo trình
Giáo trình được biên soạn phục vụ các nhóm đối tượng cụ thể trong môi trường đào tạo đại học:
- Sinh viên chuyên ngành: Sinh viên năm thứ nhất hoặc năm thứ hai thuộc các ngành Sư phạm Tin học, Công nghệ Thông tin, Kỹ thuật Phần mềm, Hệ thống Thông tin đang theo học các học phần Lập trình Web, Công nghệ Web, hoặc Nhập môn Lập trình Kịch bản.
- Yêu cầu kiến thức 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 (cấu trúc tài liệu, các thẻ định dạng, thẻ form, bảng biểu) và tư duy logic lập trình căn bản (khái niệm biến, điều kiện, vòng lặp).
- Giảng viên và cán bộ giảng dạy: Tài liệu là khung đề cương chuẩn để thiết kế bài giảng lý thuyết, biên soạn bài tập phòng thực hành, và xây dựng ngân hàng câu hỏi đánh giá kết thúc học phần.
- Người tự học và nghiên cứu tài liệu: Dành cho người học muốn nắm bắt cấu trúc cốt lõi của JavaScript thuần, phương pháp thao tác BOM/DOM nguyên bản và giải thuật điều khiển sự kiện cơ bản trên trình duyệt.
Câu hỏi thường gặp
1. Giáo trình này phù hợp với đối tượng nào?
Giáo trình được thiết kế trực tiếp cho sinh viên ngành Công nghệ Thông tin, Sư phạm Tin học và các lập trình viên bắt đầu tiếp cận ngôn ngữ kịch bản client-side trên nền tảng web.
2. Cần trang bị kiến thức nền tảng nào trước khi học giáo trình này?
Người học cần nắm vững cú pháp định dạng tài liệu HTML cơ bản để thực hiện nhúng mã script thông qua thẻ <script> hoặc liên kết sự kiện trên các phần tử HTML.
3. Điểm khác biệt của giáo trình so với các tài liệu lập trình khác là gì?
Tài liệu tập trung cô đọng vào cấu trúc ngôn ngữ JavaScript dựa trên đối tượng, bảng phân loại chi tiết 18 sự kiện trình duyệt chuẩn, cùng các giải thuật xử lý chuỗi và định thời gian mẫu gắn liền với môi trường thực thi của trình duyệt Netscape và Internet Explorer.
4. Phương pháp tự học giáo trình như thế nào để đạt hiệu quả cao?
Người học nên gõ và chạy trực tiếp các đoạn mã ví dụ (các hộp thoại confirm, alert, lệnh in document.write), thực hiện từng bước giải thuật của bài toán chữ chạy trên thanh trạng thái, sau đó tự mở rộng giải thuật sang các phần tử document.title hoặc xử lý mảng nhiều chuỗi.
5. Giáo trình giới thiệu những nguồn tài liệu tham khảo bổ trợ nào?
Tài liệu định hướng người học tra cứu chi tiết các thuộc tính và phương thức đối tượng mở rộng thông qua hệ thống tài liệu chuẩn của W3Schools (w3schools.com) và các cổng thông tin chuyên đề công nghệ web.
Kết luận
Giáo trình Ngôn ngữ JavaScript của ThS. Nguyễn Duy Hải cung cấp hệ thống kiến thức nền tảng, chuẩn xác và cô đọng về lập trình kịch bản phía máy khách. Nội dung bao quát đầy đủ từ quy tắc cú pháp, cấu trúc dữ liệu mảng, các kiểu đối tượng cơ bản (String, Math, Date), đến cơ chế xử lý sự kiện và mô hình đối tượng trình duyệt BOM/DOM.
Lộ trình học tập đề xuất:
- Nắm vững cú pháp, biến, kiểu dữ liệu nguyên thủy và toán tử.
- Làm chủ mảng và các cấu trúc điều khiển rẽ nhánh, vòng lặp.
- Khai thác hệ thống hàm và các đối tượng có sẵn.
- Ứng dụng mô hình sự kiện và đối tượng
window để xây dựng các giải thuật tương tác động trên trang web.
Tài liệu là nguồn tư liệu học thuật cơ sở giúp sinh viên xây dựng nền móng vững vàng trước khi bước vào các kỹ thuật lập trình web nâng cao.
