1. Cách thức hoạt động của JavaScript trên web

Js thường sẽ được nhúng trực tiếp vào trang web hoặc sẽ được tham chiếu qua một file có đuôi là .js riêng. JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy client khi truy cập và được xử lý tại đó. Thay vì tải về máy server và sau khi xử lý xong mới phản hồi kết quả đến client.

Với hiện nay, thì các trình duyệt Internet cũng có thể hỗ trợ ta tắt/mở JavaScript. Lúc đó thì ta có thể thấy được nếu một trang web không có JavaScript thì sẽ như thế nào? Từ đó có thể hình dung dễ dàng hơn về cách JavaScript hoạt động. Hoạt động đơn giản nhưng hiệu quả là những gì mà ngôn ngữ JS sở hữu. Đối với ngôn ngữ lập trình này hiện được ứng dụng trong nhiều môi trường, nhiều nền tảng khác nhau để đáp ứng cho nhu cầu của người dùng.

2. Cách thêm JavaScript vào Website

2.1. Cặp thẻ mở và đóng trong JavaScript

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>, ví dụ:

<script language="javascript">
    alert("Hello World!");
</script>

2.2. Thêm trực tiếp JavaScript vào file HTML

Để có thể viết được HTML trên file HTML thì bắt buộc các bạn cần phải khai báo bắt buộc theo cú pháp:

<script type="text/javascript">
        //code javascript ở đây
</script>

Đoạn script này có thể đặt ở bất cứ đâu trong file HTML. Tuy nhiên tùy thuộc vào vị trí mà chúng ta muốn tiến hành thêm code JavaScript trong HTML file mà việc tiến hành tải trang có những yêu cầu khác nhau. Thường thì việc thêm JS tốt nhất, dễ dàng nhất là vào trong chính <head>, điều này đảm bảo giúp nó tách bạch hoàn toàn với nội dung chính của file HTML.

Tuy nhiên, việc thêm JS tại vị trí tag <body> giúp đem tới khả năng tăng tốc độ tải vô cùng hiệu quả. Lúc này, nội dung của trang web sẽ được tải nhanh chóng hơn, lúc này thì JavaScript sẽ được parsed đầy đủ và chuẩn xác. Việc tiến hành cụ thể như thế nào cần có sự cân đối, điều chỉnh dựa vào điều kiện thực hiện cụ thể mới có được kết quả tốt nhất.

Ví dụ: mình sẽ đưa ra ví dụ cụ thể nhưng như mình đã nói trước đó thì ở một số ví dụ đầu tiên này các bạn chưa cần hiểu rõ về code(ta sẽ học dần ở những bài sau) mà chỉ cần nắm được sự hiệu quả của nó hay vị trí của nó là được!

JavaScript trong <head>:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Đoạn đã thay đổi.";
}
</script>
</head>
<body>
<h2>Demo JavaScript trong Head</h2>
<p id="demo">Một đoạn văn</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>

JavaScript trong <body>:

<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript trong Body</h2>
<p id="demo">Một đoạn văm.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Đã được thay đổi.";
}
</script>
</body>
</html>

2.3. Nhúng file JavaScript từ một file bên ngoài

Tương tự như CSS hay việc nhúng file trong PHP thì ta có thể import từ một file bên ngoài vào được và bắt buộc file đó phải có phần mở rộng .js theo cú pháp:

<script type="text/javascript"></script>

Ví dụ: file JS của mình có tên là demo.js thì lúc này mình import vào như sau:

<script language="javascript" src="demo.js"></script>

Không phải lúc nào chúng ta cũng có thể tiến hành thêm Javascript vào HTML bằng cách trực tiếp. Trong nhiều trường hợp, việc có thể chèn qua một file độc lập sẽ đem tới kết quả tốt hơn rất nhiều. Thực tế khi có một số trường hợp một vài JS scripts đòi hỏi người dùng sử dụng ở nhiều trang khác nhau thì đây là giải pháp thích hợp nhất nên cân nhắc lựa chọn. Việc để file Js ở một file riêng giúp quá trình tái sử dụng lại code khi cần được hỗ trợ hiệu quả nhất. Cách này khi được áp dụng đảm bảo hỗ trợ giúp quá trình đọc code trở nên đơn giản và dễ dàng hơn, chính vì thế, công việc bảo trì khi cần thực hiện cũng trở nên đơn giản mà hiệu quả hơn. Mình nghĩ là quan trọng nhất là tăng thêm tốc độ của website hiệu quả, thông qua việc giảm đi thời gian tải trang xuống mức thấp nhất. Bạn cũng không muốn vào một website mà nó tải trang cả phút vẫn không xong!

2.4. Viết trực tiếp vào thẻ HTML

Cách này cũng khá phổ biến khi bạn muốn gọi một hàm hay thực thi một đoạn code javascript ngắn.

Ví dụ:

<button type="button" onclick="code">Ấn vào rồi biết</button>

Hay một ví dụ cụ thể hơn nhé:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Javascript lesson1</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <button type="button" onclick="alert(1)">click</button>
</body>
</html>

3. Viết chương trình Helloword đầu tiên với JavaScript

Đầu tiên ta tạo một file là index.html:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" value="Click Me"/>
    </body>
</html>

Sau khi chạy file này bằng trình duyệt thì sẽ có một nút bấm hiện ra. Bây giờ ta sẽ viết code sao cho khi ấn vào nút đó sẽ hiện ra màn hình Helloworld. Một lưu ý nhỏ là button đó mình có đặt id=clickme nha.

Viết mã Javascript khi click vào button có id=”clickme” thì thông báo lên màn hình:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" id="clickme" value="Click Me"/>
        <script language="javascript">
        // Lấy element có id=clickme lưu vào biến button
        var button = document.getElementById('clickme');      
        // Khi click vào element chứa trong button thì thực hiện một function, 
        // bên trong function thông báo lên Hello World!
        button.addEventListener('click', function(){
            alert('Hello World!');
        });
        </script>
    </body>
</html>

Bạn phải đặt đoạn mã javascript bên dưới button như trong demo nhé, nếu bạn đặt ở trên là sẽ bị lỗi đấy. Lý do tại sao thì trong các bài tiếp theo mình sẽ giải thích kỹ hơn.

Viết chương trình JavaScript đầu tiên