Bài tập - Thêm tính tương tác với JavaScript

10 phút

JavaScript (hoặc ECMAScript) là một ngôn ngữ lập trình giúp bạn thêm tính tương tác vào các trang web của bạn.

Ví dụ: bạn có thể sử dụng JavaScript để xác định hành vi xảy ra khi người dùng chọn một nút, chẳng hạn như mở cửa sổ bật lên. Sử dụng JavaScript, bạn có thể thêm hoặc loại bỏ nội dung khỏi trang web mà không cần tải lại.

Trong đơn vị này, bạn thiết lập một tập tin JavaScript ví dụ cho trang web của bạn. Trong đó, bạn tạo một nút để chuyển đổi giữa các chủ đề sáng và tối. Sau đó, bạn đính kèm nút vào mã JavaScript thực hiện chuyển đổi chủ đề thực tế. Cuối cùng, bạn kiểm tra dự án đã hoàn thành bằng công cụ dành cho nhà phát triển của trình duyệt của bạn.

Liên kết đến JavaScript

Giống như CSS, bạn có thể thêm JavaScript trực tiếp vào tệp HTML, nhưng cách thực hành tốt nhất được đề xuất là lưu JavaScript của bạn trong một tệp riêng biệt. Việc thêm mã JavaScript của bạn vào một tệp riêng biệt sẽ giúp bạn dễ dàng sử dụng lại trên nhiều trang web. Ví dụ: bạn có thể tạo cảnh báo bật lên bằng cách thêm mã sau vào bất kỳ đâu trong nội dung trang web của bạn:

<script>alert('Hello World')</script>

Tuy nhiên, tốt hơn là bạn nên thêm mã JavaScript vào một tệp riêng biệt mà bạn có thể liên kết đến mọi tệp cần chức năng tùy chỉnh của mình.

Thẻ tập lệnh HTML <script> cho phép chúng tôi liên kết đến tệp JavaScript bên ngoài, đây là cách bạn đặt cấu hình ứng dụng web của mình trong bài tập này.

Trong Visual Studio Code, hãy mở tệp index.html bạn.
Tìm phần tử </body> đóng và đặt con trỏ của bạn trên một dòng mới phía trên nó. Nhập script:src rồi nhấn Enter. Thẻ mở và đóng cho phần tử <script> sẽ được thêm vào mã của bạn.

Sửa đổi yếu <script> để tải tệp tin app.js như minh họa trong ví dụ sau đây. Đảm bảo rằng nó nằm sau khi đóng </ul> phần tử cho danh sách.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Bạn có thể đặt thành <script> này vào <head> vị trí khác trong <body>. Tuy nhiên, việc đặt phần <script> vào cuối phần <body> sẽ cho phép tất cả nội dung trang hiển thị trên màn hình trước khi kịch bản được tải.

Thêm dung sai lỗi

Trong tệp HTML của bạn, hãy thêm thành <noscript> sau thẻ </script> đóng, có thể được dùng để hiển thị thông báo nếu JavaScript bị hủy kích hoạt.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Việc thêm yếu <noscript> này là một ví dụ về khả năng chịu lỗi hoặc giảm duyên dáng. Khi bạn sử dụng phần <noscript>, mã của bạn có thể phát hiện và lên kế hoạch cho thời điểm một tính năng không được hỗ trợ hoặc khả dụng.

Đặt chế độ nghiêm ngặt

JavaScript được thiết kế để dễ tìm hiểu và cho phép nhà phát triển mắc phải một số lỗi nhất định. Ví dụ: JavaScript không loại bỏ lỗi khi bạn sử dụng biến sai chính tả, thay vào đó sẽ tạo ra biến số toàn cục mới. Khi bạn bắt đầu học JavaScript, việc gặp ít lỗi hơn sẽ thuận tiện hơn. Tuy nhiên, nó có thể dẫn đến viết mã đó là khó khăn hơn cho các trình duyệt để tối ưu hóa và khó khăn hơn cho bạn để gỡ lỗi.

Chuyển sang chế độ nghiêm ngặt để nhận được các lỗi hữu ích hơn khi bạn mắc lỗi.

Trong Mã Visual Studio, mở tệp app.js và nhập như sau:
```
'use strict';
```

Thêm nút

Bạn cần một cách để cho phép người dùng chuyển đổi giữa các chủ đề sáng và tối trong trang web của bạn. Trong bài tập này, bạn thực hiện chức năng đó với một yếu tố <button> HTML.

Trong tệp HTML của bạn (index.html), hãy thêm thành <button> này. Đặt nút bên trong thành <div> và thêm nó ngay sau khi kết thúc danh sách (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Lưu ý rằng thành <button> trong ví dụ này có thuộc tính lớp bạn có thể sử dụng để áp dụng kiểu CSS.
Lưu các thay đổi đối với tệp HTML của bạn bằng phím tắt Control+S Trên Windows hoặc Command+S trên macOS.
Trong tệp CSS của bạn (main.css), hãy thêm quy tắc mới với bộ .btn chọn lớp cho nút HTML của bạn. Để làm cho màu nút khác với màu chủ đề sáng hoặc tối chung, hãy đặt các thuộc color và background-color tính trong quy tắc này. Khi trang của bạn hiển thị, những thuộc .btn này sẽ ghi đè lên các thuộc tính mặc định được đặt trong body tắc tệp CSS của bạn.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```
Tiếp theo, sửa đổi .btn tắc để thêm một số kiểu cho kích cỡ, hình dạng, hình dạng và vị trí của nút. CSS sau tạo nút tròn ở bên phải đầu đề trang.
```
.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Tiếp theo, cập nhật CSS cho chủ đề sáng và tối. Xác định một số biến số mới, --btnBg và --btnFontColor, để chỉ định màu nền và màu phông chữ cụ thể cho nút.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Lưu các thay đổi đối với tệp CSS của bạn bằng phím tắt Control+S trên Windows hoặc Command+S trên macOS.

Thêm bộ xử lý sự kiện

Để làm cho nút thực hiện thao tác nào đó khi bạn chọn nút đó, bạn cần có bộ xử lý sự kiện trong tệp JavaScript. Trình xử lý sự kiện là một cách để chạy hàm JavaScript khi một sự kiện diễn ra trên trang. Đối với nút này, hãy thêm một trình xử lý sự kiện cho sự click kiện; chức năng xử lý sự kiện chạy khi sự click kiện xảy ra.

Trước khi bạn có thể thêm bộ xử lý sự kiện, bạn cần tham chiếu đến thành phần nút.

Trong tệp JavaScript của bạn (app.js), hãy sử dụng document.querySelector để nhận tham chiếu nút.
```
const switcher = document.querySelector('.btn');
```
Hàm document.querySelector dụng bộ chọn CSS, giống như bộ chọn CSS bạn đã sử dụng trong tệp CSS. switcher bây giờ là một tham chiếu đến nút trong trang.
Tiếp theo, thêm bộ xử lý sự kiện cho click kiện. Trong mã sau đây, bạn thêm một người nghe cho sự kiện click và xác định một chức năng xử lý sự kiện mà trình duyệt thực hiện khi sự kiện click xảy ra.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

Trong mã trước, bạn đã sử dụng phương pháp toggle để sửa đổi thuộc <body> lớp của phần tử. Phương pháp này tự động thêm hoặc loại bỏ các lớp light-theme và dark-theme khác. Mã này áp dụng các kiểu tối thay vì kiểu sáng nếu bạn bấm, rồi thay vì kiểu sáng thay vì tối nếu bạn bấm lại.

Tuy nhiên, nhãn của nút cũng cần được cập nhật để hiển thị chủ đề chính xác, vì vậy bạn cần thêm câu lệnh if để xác định chủ đề hiện tại và cập nhật nhãn nút.

Đây là diện mạo của mã JavaScript khi thêm bộ xử lý sự kiện:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Đó là một quy ước JavaScript để sử trường hợp lạc đà cho các tên biến với nhiều hơn một từ; ví dụ: biến className.

Thông báo bảng điều khiển

Là nhà phát triển web, bạn có thể tạo thông báo ẩn không hiển thị trên trang web của mình nhưng bạn có thể đọc trong Công cụ dành cho Nhà phát triển trong tab Console. Việc sử dụng thông báo bảng điều khiển sẽ hữu ích cho việc xem kết quả mã của bạn.

Trong tệp JavaScript của bạn, hãy thêm cuộc gọi console.log sau câu lệnh if, nhưng bên trong trình nghe sự kiện.

Sau khi bạn thực hiện thay đổi này, mã JavaScript hoàn chỉnh của bạn sẽ trông như thế này.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Khi bạn đang ở trong tệp JavaScript trong Visual Studio Code, bạn có thể sử dụng tính năng tự động hoàn tất cho console.log bằng cách nhập log và nhấn Enter.

Bạn có thể xác định một văn với dấu ngoặc kép hoặc dấu ngoặc đơn quanh văn bản.

Mở trong trình duyệt

Để xem trước, bấm chuột phải vào index.html rồi chọn Mở Trong Trình duyệt Mặc địnhhoặc tải lại cùng một tab trình duyệt bằng cách nhấn F5.
Chọn nút Tối để chuyển sang chủ đề tối.
Đảm bảo rằng mọi thứ đều chính xác và hoạt động như mong đợi. Nếu không, bạn nên xem lại các bước trước đó để xem liệu bạn có bỏ lỡ điều gì đó không.

Kiểm tra trang trong công cụ dành cho nhà phát triển

Mở Công cụ dành cho Nhà phát triển bằng cách bấm chuột phải và chọn Kiểm trahoặc bằng cách sử dụng phím tắt F12. Ngoài ra, hãy sử ctrl+Shift+I tắt trên Windows hoặc Linux và Option+Command+I trên macOS.
Chọn tab thành thành phần, rồi chọn tab thành thành phần.
Chọn phần tử <body> này. Trong tab kiểu, hãy xem chủ đề được áp dụng. Nếu chủ đề hiện tại là tối, các kiểu dark-theme được áp dụng.

Đảm bảo đã chọn chủ đề tối.
Chọn tab Console để xem thông báo console.log, current class name: dark-theme.

Khi sử dụng bảng điều khiển, bạn có thể nhận được thông tin chi tiết thú vị từ mã JavaScript của mình. Thêm nhiều thông báo bảng điều khiển hơn để hiểu phần nào của mã của bạn đang được thực thi và biết các giá trị hiện tại của các biến khác.

Để tìm hiểu thêm về bảng điều khiển, hãy xem bài viết tổng Console này.

Phản hồi

Trang này có hữu ích không?