[Javascript Căn bản] Javascript là gì? Sử dụng Javascript trong website như thế nào?

Trong thiết kế web, 3 thành phần quan trọng không thể thiếu để cấu thành một trang web hoàn chỉnh đó là HTML, CSS và Javascript. Đóng vai trò như là một cái “hồn” của website ở phía máy khách, Javascript đang được sử dụng ứng dụng rộng rãi để lập trình lên những hành động đáp ứng tương tác với người dùng web. Bài viết này sẽ bắt đầu series học Javascript căn bản, và đầu tiên chúng ta nên làm quen với Javascript và cách sử dụng nó trong website.

Javascript là gì?

HTML hay CSS không được gọi là ngôn ngữ lập trình, nhưng Javascript chính là một ngôn ngữ lập trình. Javascript có đầy đủ thành phần để cấu thành nên một ngôn ngữ lập trình như biến, hàm, đầu vào, đầu ra,…. Javascript đa số được thực thi tại máy khách nên nó còn thường được loại là mã kịch bản phía máy khách.

Vì chỉ hoạt động trên website và đối tượng tác động trực tiếp là các mã đánh dấu HTML, có sử dụng các thuộc tính CSS, nên trước khi học Javascript bạn học và nắm rõ về HTML và CSS trước đã.

Javascript không phải là ngôn ngữ java nên bạn đừng nhầm lẫn giữa hai loại ngôn ngữ này, chúng hoàn toàn khác nhau về khái niệm lẫn thiết kế của ngôn ngữ.

Javascript làm được gì mã HTML?

Javascript có thể làm được nhiều việc tùy vào khả năng lập trình của bạn. Nhưng một số tính năng sau đây là một số tính năng phổ biến mà nó tác động lên HTML như:

JavaScript có thể thay đổi nội dung HTML

Bạn có một thẻ HTML như thế này <p id="demo">Đây là tôi</p> và bạn muốn thay đổi từ “Đây là tôi” thành “Tôi đang học Javascript” khi bấm vào một nút. bạn có đoạn mã như sau:

document.getElementById("demo").innerHTML = "Tôi đang học Javascript";

• Hàm document.getElementById("demo") sẽ trả về đối tượng HTML đang có ID là ‘demo’.
• innerHTML là phương thức chèn nội dung vào trong đối tượng đó.

JavaScript có thể thay đổi thuộc tính HTML

Một số thẻ HTML có chứa thuộc tính, ví dụ như thẻ <img> có thuộc tính là “src” để nhận dạng hình ảnh. Bạn có thể sử dụng Javascript để thay đổi giá trị cho thuộc tính này. Ví dụ như câu sau:

document.getElementById('thumb').src='product2.png';

• Hàm document.getElementById('thumb') trả về đối tượng HTML có ID là ‘thumb‘.
• src là thuộc tính cần thay đổi giá trị

JavaScript có thể thay đổi kiểu HTML (CSS)

Trong bài viết [CSS Căn bản] CSS là gì? cách sử dụng CSS trong website mình có nói đến việc chèn CSS theo kiểu inline rất ít khi được sử dụng, nhưng khi bạn muốn thay đổi kiểu CSS cho một thẻ HTML nhất định bằng Javascript nó sẽ sử dụng kiểu chèn CSS này. Vì sao? trong bài [CSS Căn bản] Xét độ ưu tiên của các CSS trùng nhau mình đã nói độ ưu tiên của CSS Inline là cao nhất, hơn nữa, việc chèn Inline sẽ giúp Javascript có cơ sở để gọi dựa vào ID của thẻ HTML. Đoạn mã dưới đây sẽ làm thay đổi kiểu CSS của thẻ HTML có ID là ‘demo‘.

document.getElementById('demo').style.fontSize='35px';

• Hàm document.getElementById('demo') lấy ra đối tượng HTML có ID là ‘demo‘.
• style là phương thức tác động đến HTML.
• fontSize là một thuộc tính CSS sẽ được thay đổi.
• 35px là giá trị thay đổi của thuộc tính CSS.

JavaScript có thể ẩn/hiển phần tử HTML

Thật ra thì phương thức này cũng là làm thay đổi kiểu CSS của HTML mà thôi, nó sẽ sử dụng thuộc tính css là display để điều khiển hiển thị hoặc ẩn đi phần tử HTML. Mã mẫu như sau:

Ẩn phần tử: document.getElementById('demo').style.display = 'none';
Hiện phần tử: document.getElementById('demo').style.display = 'blook';

Cơ bản chúng ta đã biết Javascript có thể làm được những gì, nhưng sử dụng làm sao để các mã này hoạt động và tác động được đến đối tượng HTML? hãy xem phần tiếp theo.

Cách sử dụng JavaScript

Tương tự như CSS, JavaScript có thể được để ở 3 nơi khác nhau là linked, embed, và inline. Tuy nhiên nó không có mức độ ưu tiên mà chỉ có sự xung đột khi bị trùng. Kiểu chèn inline không được khuyến khích sử dụng, nó thường được sử dụng cho những nút button với những đoạn Javascript thô, do đó bạn chỉ nên sử dụng phương pháp Linked hoặc embeb.

Phương pháp nhúng JavaScript embed

Tất cả đoạn mã Javascript sẽ được triển khai trong tệp HTML và nằm trong cặp thẻ <script>...</script>. Ví dụ như đoạn sau:

<script>
function myFunction() {
   document.getElementById('demo').style.fontSize='35px';
}
</script>

Bạn có thể sử dụng thuộc tính onclick của nút button để gọi hàm javascript. ví dụ như sau:

<button type="button" onclick="myFunction()">Nút thử</button>

Phương pháp gọi tệp JavaScript linked

Tất cả mã Javascript được để trong tệp có đuôi mở rộng là *.js. và được gọi vào tệp HTML bằng đoạn sau:

<script src="tên_file.js"></script>

Phương pháp này được sử dụng phổ biến do các mã Javascript được viết ở một tệp riêng tách biệt với mã HTML. Với đoạn gọi trên bạn có thể đặt ở thẻ <head> hoặc thẻ <body> mà không làm ảnh hưởng gì.

Về cấu trúc của tệp *.js thì bạn có thể viết thẳng mã Javascript mà không sử dụng thẻ </script> như phương pháp embed. Và cách sử dụng cũng tương tự.

Trong bài viết sau mình sẽ chia sẻ về Cú pháp của JavaScript