Studio 2010
Bạn khơng cần phải đặt tồn bộ đoạn mã JavaScript vào các file HTML. Thay
vào đó, bạn có thể tận dụng thuộc tính s r c của thẻ < scrip t> . Thuộc tính của
các thẻ giúp định nghĩa hoặc cung cấp thêm thông tin chi tiết cho một phần tử. Ví dụ, phần tử <form> có thể chứa một thuộc tính định nghĩa sự kiện nào sẽ xảy
ra khi form được gửi đi. Với thuộc tính s r c của thẻ < scrip t> , bạn có thể xác
định vị trí của file JavaScript ngồi. Trình duyệt web sau đó sẽ đọc mã
JavaScript chứa trong file này khi tải trang web. Với file JavaScript ngồi, bạn có thể giữ các đoạn mã JavaScript dùng chung ở cùng một nơi, thay vì phải cập nhật ở từng trang riêng biệt - điều này sẽ giúp tiết kiệm rất nhiều công sức. Lúc này, bạn đã tạo ra một trang web (tạo bởi Visual Studio) chỉ thực hiện một nhiệm vụ duy nhất là hiện ra một hộp thoại thông báo nhờ mã JavaScript nằm
trong thẻ <head>. Trang web này có chứa mã JavaScript trong phần thẻ <head>.
Trong phần tiếp theo, bạn sẽ học cách đặt mã JavaScript vào một file ngoài và tham chiếu đến đoạn mã trong file HTML.
Tạo file JavaScript ngồi với Visual Studio 2010
1. Nếu khơng mở được file myfirstpage.htm hãy chọn Open Project từ menu File của Visual Studio, chọn dự án mà bạn lưu file myfirstpage.htm và mở file này. Khi đó Visual Studio sẽ hiển thị như ở bước 6 của ví dụ trước. 2. Tạo mới một file để chứa mã JavaScript bằng cách chọn New File từ menu
File. Hộp thoại Add New Item xuất hiện. Trong danh sách template (file mẫu), chọn Jscript File và đổi mục Name thành myscript.js, như hình dưới rồi nhấn vào nút Add. Lưu ý rằng danh sách template có thể khác nhau tùy thuộc bộ cài Visual Studio được sử dụng. Bạn có thể tìm thấy file myscript.js trong thư mục mã nguồn mẫu của Chương 2.
3. Một file JavaScript (Jscript) trống mở ra và được thêm vào dự án web. Bạn sẽ thấy một tab cho file myscript.js và một tab cho file myfirstpage.htm như hình dưới đây. Nếu file myfirstpage.htm chưa mở, hãy nhấn đúp để mở trong cửa sổ Solution Explorer.
/ \ Chú ý Phần đuôi mở rộng thông thường của file JavaScript và JScript là Chú ý Phần đuôi mở rộng thông thường của file JavaScript và JScript là
.js, nhưng bạn không bắt buộc phải dùng chúng. Sở dĩ chúng ta chọn kiểu file JScript trong bước 2 là vì kiểu file này tự động cập nhật đúng phần đuôi mở rộng. Bạn có thể dễ dàng chọn TextDocument từ hộp thoại Add New Item và đặt tên cho nó với phần mở rộng .js.
V__________________________ ’_____________________ _____________ !_________________________________/
4. Nhấn vào tab myfirstpage.htm, bôi đen đoạn mã JavaScript. Tuy nhiên, giữ nguyên đoạn mã bên trong thẻ <script> và </script>. (Hiện tại, bạn chưa cần sử dụng những thẻ trên, chúng ta sẽ bàn đến chúng ở phần sau). Bạn cũng có thể tìm thấy file myfirstpage.htm trong thư mục mã nguồn mẫu của Tài nguyên đi kèm.
5. Sao chép đoạn mã được bôi đen bằng cách chọn Copy từ menu Edit.
6. Nhấn vào tab myscript.js, trỏ chuột đến dòng đầu tiên và chọn Paste từ menu Edit. Đoạn mã được dán tại vị trí trỏ chuột. Thay đổi đoạn văn bản trong lời gọi hàm yetAnotherAlert thành “Đây là ví dụ thứ hai” như dưới đây:
a l e r t ( t e x t T o A l e r t ) ; }
yetAnotherAlert("Đây l à v í dụ thứ hai");
7. Lưu file myscript.js bằng cách chọn Save từ menu File. File này có dạng giống như sau:
8. Với mã JavaScript được lưu trong file myscript.js, bạn có thể xóa đoạn mã JavaScript trong file myfirstpage.htm, chỉ để lại cặp thẻ script có dạng như sau:
< s c r i p t t y p e = " t e x t / j a v a s c r ip t " > < / s c r i p t >
9. Bây giờ, thêm thuộc tính src vào thẻ mở <script>:
< s c r i p t t y p e = " t e x t / j a v a s c r i p t " data-src="myscript
L0. Nếu muốn, bạn có thể chuốt lại đoạn mã bằng cách xóa dấu chuyển dịng và
< s c r i p t t y p e = " t e x t / j a v a s c r i p t " d a ta -s r c = " m y s c r ip t.js " > < /s (
Toàn bộ nội dung của file myfirstpage.html sẽ giống như dưới đây:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > <head>
<title>Trang đầu tiên của tôi</title>
<script type="text/javascript" data-src="myscripLj's"></script> </head>
<body> </body> </html>
L1. Lưu file myfirstpage.html.
L2. Để xem trang bằng trình duyệt, chọn Start Without Debugging từ menu Debug. Trang web được duyệt qua web server và mở trên trình duyệt. Kết quả là hộp thoại thơng báo “Đây là ví dụ thứ hai” như hình sau:
L3. Nhấn OK để đóng hộp thoại thơng báo. Bây giờ, xem lại các đoạn mã để thấy sự khác biệt. Trên trình duyệt web, chọn Source từ menu View. Lưu ý
lúc này thẻ < scrip t> chứa một tham chiếu đến file JavaScript ngoài.
Như vậy, bạn đã biết cách lập trình JavaScript với Visual Studio 2010. Tới đây, bạn có thể bỏ qua một số phần để đến phần giới thiệu về cách gỡ lỗi hoặc đọc
tiếp để tìm hiểu cách lập trình JavaScript với các cơng cụ khác.