Một IDE phổ biến khác trong giới lập trình web là Eclipse. Lập trình viên có thể cài đặt các framework khác nhau để hỗ trợ cho các mục đích lập trình khác nhau. Ví dụ, họ có thể cài đặt Web Tools Platform hay bộ cơng cụ lập trình PHP (PHP Hypertext Preprocessor) để tạo mơi trường tiện ích tối ưu hóa cho cơng việc của họ. Việc thảo luận về các dự án Eclipse tiềm năng không thuộc phạm vi của cuốn sách này, tuy nhiên chúng ta sẽ thảo luận về việc lập trình JavaScript trên nền Eclipse cơ bản.
Để lập trình JavaScript với Eclipse, trước tiên bạn phải tải về bộ cài Eclipse và đôi khi nền tảng chạy các ứng dụng Java (JRE). Thông tin chi tiết và cách thức
tải về có trên trang web Eclipse (http://www.edipse.org). Trong phần này, chúng
tôi giả định bạn chưa từng dùng Eclipse và đây là lần đầu tiên bạn làm quen với Eclipse. Tuy nhiên, phần này không cung cấp hướng dẫn cài đặt Eclipse. Bạn nên tìm đọc các tài liệu hướng dẫn có sẵn trên website của Eclipse để nắm được những thông tin mới cập nhật.
Viết dự án web đầu tiên chứa mã JavaScript bằng Eclipse JavaScript bằng Eclipse
Bây giờ đã đến lúc tạo một trang web có chứa mã JavaScript bằng Eclipse. Nếu bạn không dùng Eclipse, hãy bỏ qua phần này. Ở phần cuối của chương, chúng ta sẽ thảo luận cách lập trình khơng cần đến IDE và một số lời khuyên nhỏ khi gỡ lỗi JavaScript.
c \
Chú ý Phần này sẽ hướng dẫn sử dụng IDE Eclipse cho các lập trình viên
JavaScript. Giao diện Eclipse của bạn có thể sẽ khác một chút với các hình minh họa trong cuốn sách. Khi mở Eclipse lần đầu, bạn sẽ được yêu cầu chọn vùng làm việc (workspace). Hãy chọn vùng làm việc mặc định.
V ________________________ ’______________________________________ ’________________________ - ___________________ /
1. Tạo dự án mới bằng cách chọn New > JavaScript từ menu File. Hộp thoại JavaScript xuất hiện. Nhập Chapter2 vào mục Project name (tên dự án) rồi nhấn Finish.
2. Thư mục rỗng Chapter2 được mở ra trong phần Project Explorer như bên dưới:
3. Nhấn chuột phải vào thư mục Chapter2, chọn New > File, hộp thoại New File mở ra. Nhập myfirstpage.htm vào trường File Name và chọn Finish.
Bạn có thể tìm thấy file eclipse_myfirstpage.htm trong thư mục mã nguồn
mẫu của Chương 2. Nếu muốn sử dụng file này, hãy đặt lại tên file thành
4. Sau khi chọn Finish, Eclipse mở trang vừa tạo bằng trình duyệt riêng. Tuy vậy, chúng ta cần sửa chứ không phải chạy trang web. Nhấn phải chuột vào file myfirstpage.htm trong Project Explorer và chọn Open. Trang này được mở trực tiếp trong trình soạn thảo của Eclipse như sau:
5. Bây giờ là lúc viết mã trong cửa sổ soạn thảo. Hãy nhập vào đoạn mã dưới đây: < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 . 0 T r a n s i t i o n a l / "h t t p : //www.w3. o r g /T R /x h tm l1 /D T D /x h t m l1 -tr a n sitio n a l.d td ": <html xmlns="h ttp ://w w w .w 3 .o rg /1 9 9 9 /x h tm l" > <head>
< title> T ran g đãu t i ê n của t ô i < / t i t l e > < s c r i p t t y p e = " t e x t / j a v a s c r ip t " > f u n c tio n y e t A n o t h e r A le r t(te x tT o A le r t) { a l e r t ( t e x t T o A l e r t ) ; } yetAnotherAlert("Đây l à Chương 2"); < / s c r i p t > </head> <body> </body> </html> / \
Chú ý Với mục đích của ví dụ này, nếu khơng muốn mất thời gian, bạn
có thể bỏ qua phần khai báo DOCTYPE và bắt đầu với thẻ <html>.
Ngược lại, nếu bạn lập trình web thật sự thì việc khai báo DOCTYPE là cần thiết. Xem Chương 1 để tìm hiểu tầm quan trọng của khai báo
DOCTYPE.
V_____________________________________________________________________________________________________ /
Để xem trang vừa tạo, nhấn chuột phải vào phần Project Explorer, chọn Open With rồi chọn Web Browser. Trang web sẽ hiển thị trên trình duyệt của Eclipse với một thơng báo như Hình 2-7.
Ngồi ra, bạn cũng có thể xem trang vừa tạo bằng các trình duyệt khác chẳng hạn như trình duyệt mặc định. Để mở bằng trình duyệt mặc định, duyệt đến file vừa tạo (ví dụ C:UsersSteveworkspaceChapter2folder) và nhấn đúp vào file.
( \
Chú ý Nếu sử dụng Windows Internet Explorer, bạn có thể nhận được cảnh
báo về việc truy cập các nội dung bị chặn, tuỳ thuộc vào mức độ bảo mật được cấu hình. Truy cập địa chỉ
http://windows.microsoft.com/enUS/windows7/Internet-Explorer-
Information-bar-frequently-asked-questions để tìm hiểu thêm về tính năng
này và làm thế nào để tắt nó.
H ìn h 2 - 7 H iể n t h ị f i l e t r o n g E c l i p s e .
Trong ví dụ này, bạn đã tạo được một trang web cơ bản có nhúng mã JavaScript. Phần JavaScript của trang web chỉ chứa một vài phần tử. Đầu tiên, thẻ script được gọi đến và khai báo rằng ngôn ngữ sử dụng là JavaScript như dưới đây:
< s c r i p t t y p e = " t e x t / j a v a s c r ip t " >
Chú ý Bạn có thể khai báo JavaScript bằng cách khác, tuy nhiên đây là cách
được hỗ trợ rộng rãi nhất.
Tiếp đó, đoạn mã khai báo hàm y e tA n o th e r A le r t có một tham số
t e x t T o A l e r t như sau:
f u n c tio n y e t A n o t h e r A le r t(te x tT o A le r t) {
Nội dung của hàm có nhiệm vụ duy nhất là hiển thị một hộp thoại thông báo trong cửa sổ trình duyệt. Thơng báo được hiển thị có thể là bất kỳ đoạn văn bản nào được truyền vào như tham số của hàm. Tất cả được thực hiện bởi lệnh dưới đây: