Bài trước: CuTeoHocLamWeb (5): Làm quen với JavaScript
-----
6. Viết mã JavaScript ở đâu
Để việc học JavaScript thú vị, chúng ta sẽ học lý thuyết gắn với các ví dụ cụ thể.
Trong lĩnh vực làm web, cụ thể là lập trình giao diện web, bạn sẽ dùng JavaScript để thực hiện các xử lý nghiệp vụ, tạo ra các hành động và hiệu ứng thú vị cho trang web.
Muốn có các hành động và hiệu ứng, chúng ta sẽ dùng các đoạn mã JavaScript làm thay đổi nội dung của HTML, và CSS. Vì HTML và CSS tạo ra giao diện, nên thay đổi HTML và CSS sẽ làm thay đổi giao diện.
6.1 Viết mã JavaScript ở 3 nơi khác nhau
Bạn sẽ viết mã JavaScript trong các tập tin, để trình duyệt có thể dịch và thực thi mã nguồn.
Cũng như CSS, bạn có thể viết mã JavaScript (từ đây sẽ viết tắt là JS) ở 3 nơi khác nhau:
- Viết mã JS ở trong phần tử HTML
- Viết mã JS ở trong tài liệu HTML
- Viết mã JS ở ngoài tài liệu HTML
Viết mã JS ở trong phần tử HTML
Chúng ta sẽ tạo ra giao diện web gồm 1 bóng đèn và 2 nút bấm, để bật và tắt bóng đèn.
Bạn vào trang google, gõ từ khóa tìm kiếm là “pic_bulbon.gif” (bóng đèn sáng), tải hình này về thư mục assets.
Bạn vào lại trang google, gõ từ khóa tìm kiếm là “pic_bulboff.gif” (bóng đèn tắt), tải hình này về thư mục assets.
Như vậy, bạn đã có 2 cái hình của bóng đèn, với 2 trạng thái là bật và tắt. Khi tải ảnh bóng đèn, nên để ý kích thước của 2 ảnh phải bằng nhau thì hiệu ứng sẽ đẹp hơn.
Dùng phần mềm
lập trình (ví dụ VS code), mở mã nguồn HTML (tập tin QueHuong.html), hoặc tạo
một tập tin HTML mới cũng được, để chèn hình bóng đèn và nút bấm.
Thêm đoạn mã HTML sau (đoạn mã tô đậm) vào ngay sau thẻ <body>. Bạn chưa cần hiểu ý nghĩa của đoạn mã JS, chúng ta sẽ học sau.
<body>
<button onclick="document.getElementById('myImage').src='../assets/pic_bulbon.gif'">Bật đèn</button>
<img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='../assets/pic_bulboff.gif'">Tắt đèn</button>
<br>
<img src="../assets/caphe.jpg">
Lưu lại tập tin mã nguồn, mở trang QueHuong.html bằng trình duyệt để xem kết quả. Bạn bấm vào nút Bật đèn và Tắt đèn để xem bóng đèn bật và tắt.
Vậy là bạn đã
viết được 2 dòng mã JS ở trong thẻ mở <button>:
onclick="document.getElementById('myImage').src='../assets/pic_bulbon.gif'"
onclick="document.getElementById('myImage').src='../assets/pic_bulboff.gif'"
Viết mã JS ở trong tài liệu HTML
Bạn xóa mã JS ở trong thẻ <button>, mã nguồn sẽ như sau:
<body>
<button>Bật đèn</button>
<img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">
<button>Tắt đèn</button>
<br>
<img src="../assets/caphe.jpg">
Lưu lại mã nguồn và mở lại trang web trên trình duyệt, bạn sẽ vẫn thấy bóng đèn, nút bấm, tuy nhiên, bấm chuột vào 2 nút bấm thì không thấy bóng đèn thay đổi trạng thái.
Bạn thêm đoạn mã sau vào tập tin QueHuong.html:
</style>
<script>
function batTatDen() {
const img
= document.getElementById('myImage');
if (img.src.endsWith('pic_bulboff.gif')) {
img.src = '../assets/pic_bulbon.gif';
} else
{
img.src = '../assets/pic_bulboff.gif';
}
}
</script>
</head>
<body>
<button onclick="batTatDen()">Bật/Tắt đèn</button>
<img id="myImage" src="../assets/pic_bulboff.gif" style="width:100px">
<br>
<img src="../assets/caphe.jpg">
Lưu lại tập tin mã nguồn, mở lại trang web QueHuong.html bằng trình duyệt, bấm vào nút Bật/Tắt đèn để xem kết quả.
Ở phần này, bạn
đã viết mã JS ở trong phần tử <script></script>. Phần tử
<script> nằm trong tài liệu HTML. Tài liệu HTML được lưu trong tập tin
QueHuong.html.
Viết mã JS ở ngoài tài liệu HTML
Khi tạo thư mục của dự án (ở các bài học trước), bạn đã tạo sẵn thư mục javascript để chứa mã nguồn JS (nếu chưa có bạn hãy tạo thêm). Trong thư mục javascript, tạo tập tin main.js.
Mở main.js bằng Notepad hoặc VS code, chuyển mã nguồn trong phần tử <script> trong tập tin QueHuong.html sang tập tin main.js. Lưu lại những thay đổi trong main.js.
Trong tập tin
QueHuong.html, thêm đoạn mã sau:
</style>
<script src="../javascript/main.js"></script>
</head>
Lưu và mở tập tin QueHuong.html bằng trình duyệt để xem kết quả, nút Bật/Tắt đèn đã hoạt động bình thường.
Như vậy, chúng ta đã viết mã JS ở tập tin riêng, nằm ngoài tài liệu HTML, có phần mở rộng là .js. Tất nhiên, chúng ta cũng phải viết lệnh trong HTML, để tìm và gọi mã JS từ tập tin .js bên ngoài vào tập tin .html (<script src="../javascript/main.js"></script>).
Tóm lại, chúng ta có thể viết mã JS ở trong thẻ mở của một phần tử HTML, viết trong phần tử <script> của tài liệu HTML và viết một tập tin riêng. Tùy từng tình huống, chúng ta sẽ lựa chọn nơi viết mã JS cho phù hợp.
6.2 Bài tập
1. Bạn có thể viết mã JS ở đâu? Đáp án nào không đúng.
A. Viết trong thẻ mở của một phần tử HTML
B. Viết trong phần tử <script> của HTML
C. Viết trong thẻ đóng của một phần tử HTML
D. Viết trong tập tin .js
2. Đoạn mã <script src="../javascript/main.js"></script> là gì? Phát biểu nào không đúng.
A. Là một phần tử của HTML
B. Dùng để triệu gọi mã nguồn JS
C. Báo cho trình duyệt biết vị trí của tập tin main.js
D. Là một đoạn mã JS
3. Phát biểu nào sau đây không đúng?
A. Dùng HTML để tạo ra nội dung cho trang web
B. Dùng CSS để định dạng hiển thị cho trang web
C. Dùng JS để lập trình xử lý logic, tương tác của trang web
D. Dùng CSS để lập trình xử lý logic cho trang web
4. Viết và chạy các đoạn mã trong bài học.
-----
Gợi ý làm bài tập
1(C), 2(D), 3(D)
-----
Cập nhật: 12/12/2024