Tại sao "Xin Chào Thế Giới!" / "Hello World!"?
Viết một chương trình đầu tiên mà chỉ đơn giản in ra màn hình câu nổi tiếng "Xin Chào Thế Giới!" hoặc "Hello World!" là một truyền thống lập trình cổ xưa. Trong JavaScript, như trong tất cả các ngôn ngữ lập trình mới, có nhiều cách để in ra thông điệp này.
Vì không thể đảm bảo rằng tất cả người dùng đều có khả năng hoạt động hay kích hoạt JavaScript, khái niệm cơ bản của (X)HTML là cung cấp nội dung mà không cần JavaScript. Điều này có thể đơn giản được đạt được bằng cách ghi "Xin Chào Thế Giới!" trong phần tử .
Ví dụ
Xuất ra một hộp Alert
Nếu bạn nhập các dòng mã này vào một trình soạn thảo văn bản (hoặc sao chép-nhập dán) và lưu nó dưới tên "Hello.html" trên máy chủ web của bạn, bạn có thể mở tệp này bằng cách nhấp đúp hoặc mở trong trình duyệt của bạn bằng cách chọn "Mở tệp". Kết quả sẽ như sau:
Giải thích về chương trình:
Các phần tử của trang HTML và cấu trúc của chương trình JavaScript đã được giới thiệu trong phần giải thích thẻ . Điểm mới duy nhất ở đây là một phần tử:
- Trong phần tử
, chúng ta có câu lệnh "alert("Xin Chào Thế Giới!");". "alert" mở một cửa sổ nhỏ và hiển thị thông điệp nằm trong ngoặc kép trong cửa sổ này - được gọi là hộp thoại. Vì thông điệp là văn bản, nó phải được bao quanh bởi dấu ngoặc kép. Tất cả các câu lệnh trong JavaScript nên (nhưng không bắt buộc) kết thúc bằng dấu chấm phẩy (";"). Nếu bỏ qua dấu chấm phẩy, điều này có thể dẫn đến kết quả không mong đợi.
Xuất ra một hộp Alert bằng cách sử dụng Event-Handlers và một Function
Nếu bạn nhập các dòng mã này vào một trình soạn thảo văn bản và lưu nó dưới tên "HelloWorld.html", bạn có thể mở tệp này bằng cách nhấp đúp hoặc mở trong trình duyệt của bạn bằng cách chọn "Mở tệp". Kết quả sẽ như sau:
Giải thích về chương trình:
So với chương trình đầu tiên, chỉ có hai phần tử mới ở đây:
- Trong phần tử
, chúng ta có một hàm được định nghĩa. Từ khóa là "function" - theo sau là tên hàm ở đây là "fHallo" và hai dấu ngoặc đơn, giữa chúng có thể truyền vào hàm một hoặc nhiều giá trị. Trong trường hợp này, không có giá trị nào được truyền vào. Nội dung của một hàm được thực hiện trong hai dấu ngoặc nhọn - {...}. Không có câu lệnh hoặc bình luận nào được đặt giữa dòng "function" và dấu ngoặc mở - cũng không có bất kỳ câu lệnh JavaScript nào cần phải (nhưng không bắt buộc) kết thúc bằng dấu chấm phẩy. Nếu bỏ qua dấu chấm phẩy, điều này có thể dẫn đến kết quả không mong đợi.
- Để chương trình được thực thi khi trang được tải, một sự kiện gọi là "onload" (
) được yêu cầu - nó được thực thi khi trang được tải. Sự kiện này không nằm trong từng điều kiện (trong trường hợp này nó được đặt trong phần tử
) và thực chất nó tạo liên kết giữa trang HTML và mã JavaScript.
Xuất ra một tài liệu HTML mới
Đáng chú ý: Nếu bạn ghi mã nguồn vào một trình soạn văn bản đơn giản, nó sẽ xuất hiện dưới dạng đen-trắng. Một số trình soạn văn bản cung cấp khả năng tô màu mã nguồn, điều này cải thiện tính rõ ràng của nó (gọi là "Syntax Highlighting").
Nếu bạn nhập các dòng mã này vào một trình soạn thảo văn bản và lưu nó dưới tên "HelloWorld.html", bạn có thể mở tệp này bằng cách nhấp đúp hoặc mở trong trình duyệt của bạn bằng cách chọn "Mở tệp". Kết quả sẽ như sau:
Giải thích về chương trình:
So với chương trình thứ hai, ở đây có 5 phần tử mới:
- Trong hàm "fHallo", đối tượng "document" được truy cập. "document" là một đối tượng con của "window" và thực ra nó nên được gọi là "window.document". Tuy nhiên, JavaScript cũng tìm thấy "document" mà không cần "window.".
- Để không phải viết "document.xxx" lặp đi lặp lại, có câu lệnh "with" (trong trường hợp này "with(document)") được sử dụng, theo sau là "{...}" áp dụng tất cả các phương thức và thuộc tính giữa hai dấu ngoặc nhọn cho đối tượng "document".
- Với "open()", đối tượng được mở hoặc được tạo mới trong trường hợp này.
- Với "write(Meldung);", nội dung được ghi vào tài liệu đã mở. Ngoài văn bản đầu ra mong muốn (Xin Chào Thế Giới!), tiêu đề của tài liệu cũng phải được đặt vì nội dung của cửa sổ cũ bị bỏ qua. Đồng thời, ký hiệu ETAGO (với ký tự escape) cũng phải được đánh dấu. [1]
- Với "close()", tài liệu được đóng lại. Đầu ra vẫn hoạt động ngay cả khi không có "open()" và "close()". Tuy nhiên, nếu bạn không sử dụng "open()" và "close()", trình thông dịch JavaScript sẽ gặp vấn đề, bạn có thể thấy điều này bằng cách chương trình vẫn chạy mãi mãi. Mặt hẻm không hiển thị lên. Cuối cùng, trình duyệt sẽ hỏi xem bạn có muốn kết thúc chương trình không. Vì vậy, trong một quy trình lập trình sạch, có cấu trúc, hãy sử dụng "open()" và "close()".
Xuất ra một hộp văn bản
Nếu bạn nhập các dòng mã này vào một trình soạn thảo văn bản và lưu nó dưới tên "HelloWorld.html", bạn có thể mở tệp này bằng cách nhấp đúp hoặc mở trong trình duyệt của bạn bằng cách chọn "Mở tệp". Kết quả sẽ như sau:
Giải thích về chương trình:
So với chương trình thứ ba, ở đây có 4 phần tử mới:
- Trong phần HTML, một đối tượng Form (là một đối tượng con của "document") được tạo ra với tên "form1".
- Bên trong đối tượng Form, một hộp văn bản được tạo ra với tên "text1".
- Đầu ra được tạo ra bằng cách gán giá trị "Xin Chào Thế Giới!" vào thuộc tính "value" của hộp văn bản "text1".
Đôi điều về các ví dụ
Bốn giải pháp được giới thiệu chỉ là một phần nhỏ trong sự đa dạng của JavaScript. Chi tiết về trình xử lý sự kiện, hàm, biến, đối tượng, hộp thoại, tài liệu ... chỉ được gợi ý trong các ví dụ này một cách ngắn gọn để không biến chúng thành những thứ không thể hiểu được. Mô tả chi tiết về các yếu tố này được dành cho các chương sau. Hãy sao chép các ví dụ lập trình vào trình soạn văn bản của bạn (sao chép văn bản - nhưng tốt hơn là gõ lại !!!) và thực hiện các thí nghiệm với các chương trình bằng cách thay đổi chúng và chạy lại. Kết hợp hai yếu tố (hiển thị một tài liệu mới và một hộp thoại Alert ... hoặc bất cứ điều gì khác - bạn không thể phá hủy bất cứ điều gì - tệ hơn cả, trình duyệt của bạn có thể bị mắc kẹt trong một vòng lặp vô tận và phải kết thúc. Có một cụm từ cũ của vận động viên điền kinh cũng áp dụng cho người lập trình:
- Chỉ có chạy mới biết chạy
- Chỉ có lập trình mới biết lập trình
Và đừng nản lòng nếu không đạt được mọi thứ ngay lập tức! Chiến lược sửa lỗi không có lý do của nó được dành riêng cho một chương sau.
Bài tập + Giải pháp
- Bài tập
- Giải pháp
↑ [1] http://www.w3.org/TR/html4/appendix/notes.html#h-B.3.2