Tổng Quan.
JavaScript là một ngôn ngữ lập trình phía client phổ biến trong phát triển ứng dụng web. Nó cho phép bạn thêm tính năng tương tác và dữ liệu động cho trang web của bạn. Bài viết này sẽ giúp bạn hiểu cách bắt đầu với JavaScript, từ việc cài đặt trình duyệt cho đến việc sử dụng cú pháp cơ bản và hiển thị thông tin bằng console.log().
Giới Thiệu.
JavaScript ra đời vào năm 1995 bởi Brendan Eich tại Netscape. Ban đầu, nó được phát triển để tạo ra các hiệu ứng trang web động. Tuy nhiên, từ đó, JavaScript đã phát triển thành một ngôn ngữ mạnh mẽ và đa dạng, nó có khả năng xây dựng ứng dụng web hoàn chỉnh. Ngôn ngữ này đã được chấp nhận rộng rãi và hiện được hỗ trợ trên mọi trình duyệt web chính.
Cài đặt JavaScript.
Không cần cài đặt riêng JavaScript vì mọi trình duyệt hiện tại đều tích hợp sẵn JavaScript Engine. Điều quan trọng là bạn chỉ cần tạo file HTML và viết code JavaScript bên trong nó.
Sử dụng phương thức getElementById() để tham chiếu đến một phần tử HTML.
Bạn có thể sử dụng phương thức getElementById() để lấy tham chiếu đến một phần tử HTML dựa trên ID của nó và sau đó thay đổi nội dung của phần tử đó bằng cách sử dụng thuộc tính innerHTML.
<html>
<body>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>Trong ví dụ này, document.getElementById("demo") tìm phần tử có id là “demo” trong HTML và sau đó gán nội dung của phần tử đó bằng chuỗi “Hello JavaScript”.
Kết quả là nội dung của phần tử với id “demo” sẽ thay đổi thành “Hello JavaScript”.
Trong JavaScript, bạn có thể sử dụng cả dấu ngoặc kép (“) và dấu ngoặc đơn (‘) để định nghĩa chuỗi.
<html>
<body>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
</body>
</html>Kết quả.
Ví dụ trên chúng ta sử dụng dấu ngoặc đơn để bao quanh chuỗi “Hello JavaScript” trong hàm getElementById() và nó hoạt động tương tự như ví dụ trước đó. Bạn có thể chọn sử dụng dấu ngoặc đơn hoặc kép dựa trên sở thích cá nhân hoặc tùy theo trường hợp code của bạn.
JavaScript có thể thay đổi giá trị thuộc tính HTML.
<html>
<body>
<div class="dotted-border">
<button onclick="document.getElementById('myImage').src='https://wiki.hoanghd.com/wp-content/uploads/codes/js/pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="https://wiki.hoanghd.com/wp-content/uploads/codes/js/pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://wiki.hoanghd.com/wp-content/uploads/codes/js/pic_bulboff.gif'">Turn off the light</button>
</div>
</body>
</html>Trong ví dụ này JavaScript đang thay đổi giá trị của thuộc tính src (source) của một thẻ <img>.
JavaScript có thể thay đổi CSS của một phần tử HTML.
<html>
<body>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html> Trong ví dụ này, JavaScript đang thay đổi CSS của id “demo3” bằng cách thay đổi fontSize thành “35px”.
JavaScript có thể hiển thị các phần tử HTML đã bị ẩn bằng cách thay đổi kiểu hiển thị (display style).
<html>
<body>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>Trong ví dụ này, JavaScript đang thay đổi kiểu hiển thị của một phần tử có id là “demo” thành “block”, làm cho phần tử này hiển thị trên trang web.
Kết Luận.
Bài viết này đã giới thiệu về JavaScript, bao gồm lịch sử hình thành, cú pháp cơ bản và việc sử dụng console.log() để hiển thị thông tin. JavaScript là một ngôn ngữ mạnh mẽ và quan trọng trong phát triển web và việc hiểu cơ bản là bước đầu tiên quan trọng trong việc trở thành một lập trình viên web thành thạo. Trong các bài viết tiếp theo, chúng ta sẽ khám phá thêm về các khía cạnh khác của JavaScript và cách sử dụng nó để xây dựng ứng dụng web phức tạp hơn.
