Danh mục

Tìm kiếm
/

Mục lục

Không có mục lục
Tham gia kênh Telegram của CloudFly để nhận thêm ưu đãi và không bỏ lỡ bất kỳ khuyến mãi nào từ CloudFly

JavaScript Là Gì? Cách Viết Chương Trình JavaScript Đơn Giản

Với khả năng xử lý sự kiện và thay đổi nội dung một cách trực tiếp trên trình duyệt, JavaScript đã trở thành công cụ không thể thiếu cho các nhà phát triển web hiện đại. Trong bài viết dưới đây, CloudFly sẽ khám phá chi tiết về JavaScript là gì, và hướng dẫn cách viết chương trình JavaScript đơn giản nhất. Hãy cùng tìm hiểu nhé!

javascript là gì

1. JavaScript là gì?

1.1. Khái niệm

JavaScript, hay còn gọi là JS, là ngôn ngữ lập trình phổ biến giúp tạo ra các trang web tương tác. Được tích hợp trực tiếp vào HTML, JavaScript giúp website trở nên linh hoạt hơn. Đồng thời hỗ trợ thực thi các tập lệnh từ phía người dùng (Client-Side) cũng như phía máy chủ (Node.js) để tạo ra các trang web động.

Với hơn 20 năm tồn tại và phát triển, JavaScript đã trở thành nền tảng cho 92% các trang web hiện nay (tính đến năm 2016). Ngày nay, ngôn ngữ này không chỉ giới hạn trong lập trình web. Nhờ nền tảng Node.js, nó đã mở rộng ra nhiều lĩnh vực, từ lập trình máy tính cho đến các thiết bị của NASA. 

1.2. Javascript dùng để làm gì?

Dưới đây là một số ứng dụng của JavaScript:

  • Thay đổi nội dung HTML: Một trong những phương thức quan trọng của JavaScript để làm việc với HTML là getElementById(). Phương thức này cho phép bạn tìm kiếm một phần tử HTML với id = "demo" và thay đổi nội dung của nó thành “Hello JavaScript”.
  • Thay đổi giá trị thuộc tính HTML: JavaScript cũng có thể thay đổi giá trị của các thuộc tính. Ví dụ, bạn có thể thay đổi thuộc tính src của thẻ <img> để cập nhật hình ảnh.
  • Thay đổi kiểu HTML: Đây là một phần mở rộng của việc thay đổi thuộc tính. Ví dụ, bạn có thể sử dụng document.getElementById('demo').style.fontSize = '35px'; để thay đổi kích thước chữ.
  • Ẩn các phần tử HTML: JavaScript có khả năng ẩn các phần tử HTML bằng cách thay đổi thuộc tính hiển thị của chúng.
  • Hiển thị các phần tử HTML: Đặc biệt, JavaScript cũng có thể hiển thị những phần tử HTML đang ẩn, thông qua việc điều chỉnh thuộc tính hiển thị của chúng.

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

JavaScript thường được nhúng trực tiếp vào trang web hoặc tham chiếu từ file .js riêng biệt. Là một ngôn ngữ phía client, JavaScript sẽ được tải xuống và xử lý ngay trên máy của người dùng. Thay vì gửi về server để xử lý rồi mới phản hồi lại kết quả cho khách truy cập.

Hiện nay, các trình duyệt web đều cho phép bạn bật hoặc tắt JavaScript. Khi tắt JavaScript, bạn sẽ thấy cách một trang web hoạt động mà không có các tính năng tương tác ngôn ngữ này cung cấp. Điều này giúp bạn hình dung rõ hơn về vai trò quan trọng của JavaScript trong việc làm cho trang web trở nên sinh động.

cách thức hoạt động của javascript trên trang web

3. Lợi ích khi sử dụng JavaScript là gì?

JavaScript mang lại rất nhiều lợi ích quan trọng trong phát triển web:

  • Dễ học và sử dụng: Cú pháp của JavaScript lấy cảm hứng từ ngôn ngữ lập trình Java. Điều này giúp việc học và viết mã trở nên đơn giản. Với việc được sử dụng cho cả mã phía máy khách và phía máy chủ, JavaScript đã trở thành một ngôn ngữ linh hoạt và cực kỳ phổ biến.
  • Không phụ thuộc nền tảng: JavaScript có thể được chèn vào bất kỳ trang web nào và hoạt động với nhiều ngôn ngữ, khung phát triển khác nhau. Sau khi viết, mã JavaScript có thể chạy trên bất kỳ thiết bị nào. Nhờ đó, bạn có thể phát triển ứng dụng dễ dàng mà không bị ràng buộc bởi nền tảng.
  • Giảm tải cho máy chủ: JavaScript có thể xử lý logic và thực hiện nhiều tác vụ ngay trên máy khách, giúp giảm tải cho máy chủ. Ví dụ, trong quá trình đăng ký, JavaScript có thể nhanh chóng kiểm tra số điện thoại hợp lệ mà không cần gửi yêu cầu lên máy chủ, tăng hiệu suất đáng kể.
  • Cải thiện trải nghiệm người dùng: JavaScript giúp tạo ra các trang web thân thiện và trực quan. Cũng như cho phép xử lý thông tin phức tạp một cách nhanh chóng. Bên cạnh đó, khả năng mở rộng của nó cũng giúp cải thiện sự tương tác và mở rộng các tính năng trên trang web.
  • Hỗ trợ xử lý đồng thời: JavaScript có khả năng chạy nhiều tác vụ cùng lúc, giúp Node.js xử lý đồng thời nhiều yêu cầu mà không làm giảm hiệu suất hệ thống.

4. Cách viết chương trình JavaScript

4.1. Mở đóng thẻ

Tất cả các đoạn mã JavaScript đều được đặt trong cặp thẻ mở và đóng là <script></script>. Dưới đây là một ví dụ cụ thể:

<script language="javascript">

    alert("Hello World!");

</script>

Trong ví dụ này, đoạn mã JavaScript sẽ hiển thị một hộp thoại thông báo với dòng chữ "Hello World!" khi trang web được tải lên.

cách viết chương trình javascript 1

4.2. Cách đặt thẻ Script

Có ba cách chính để sử dụng thẻ <script> trong JavaScript, bao gồm:

  • Internal:

Đây là cách viết mã JavaScript ngay trong tệp HTML hiện tại. Thông thường, bạn có thể đặt thẻ <script> trong phần <head>, nhưng cũng có thể đặt ở bất kỳ đâu trong tệp, miễn là có đầy đủ thẻ mở và đóng. Dưới đây là ví dụ:

<html>

    <head>

        <title></title>

        <script language="javascript">

            alert("Hello World!");

        </script>

    </head>

    <body>

    </body>

</html>

  • External:

Với phương pháp này, bạn có thể viết mã JavaScript trong một tệp riêng biệt và lưu tệp đó với phần mở rộng .js. Sau đó, bạn chỉ cần sử dụng thẻ <script> để nhúng tệp vào tệp HTML của bạn. Lưu ý rằng bạn không cần thẻ đóng </script> vì trình duyệt tự động nhận diện tệp .js là chứa mã JavaScript.

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

  • Inline:

Phương pháp này cho phép bạn viết mã JavaScript trực tiếp trong thẻ HTML. Ví dụ:

<input type="button" onclick="alert(1)" value="Đăng ký"/>

Khi người dùng nhấn vào nút, một hộp thoại thông báo sẽ xuất hiện với giá trị "1".

4.3. Viết chương trình JavaScript đơn giản

Trước khi bắt đầu viết chương trình JavaScript, bạn cần cài đặt phần mềm Notepad++ hoặc bất kỳ công cụ viết mã nào khác mà bạn thích.

Bước 1: Tạo tệp HTML

Bạn tạo một tệp có tên index.html ở bất kỳ vị trí nào trên máy tính của bạn, miễn là tệp có phần mở rộng là .html. Sau đó, bạn hãy viết đoạn mã sau vào tệp:

<html>

    <head>

        <title></title>

    </head>

    <body>

        <input type="button" value="Click Me"/>

    </body>

</html>

cách viết chương trình javascript 2

Bước 2: Viết mã JavaScript

Bây giờ, bạn có thể thêm mã JavaScript để xử lý sự kiện khi người dùng nhấn vào nút. Bạn hãy thay đổi mã HTML như sau:

<html>

    <head>

        <title></title>

    </head>

    <body>

        <input type="button" id="clickme" value="Click Me"/>

        <script language="javascript">

         

        // Lấy element có id="clickme" và lưu vào biến button

        var button = document.getElementById('clickme');

      

        // Khi người dùng nhấn vào nút, sẽ thực hiện một hàm

        // Hàm này sẽ hiển thị thông báo "Hello World!"

        button.addEventListener('click', function(){

            alert('Hello World!');

        });

        </script>

    </body>

</html>

Với đoạn mã này, khi bạn nhấn vào nút "Click Me", một hộp thoại thông báo sẽ xuất hiện với nội dung "Hello World!".

>>> Xem thêm:

Hy vọng bài viết trên trên đã giúp bạn hiểu rõ hơn về JavaScript là gì và cách viết chương trình JavaScript đơn giản. Nếu còn thắc mắc hay muốn đăng ký máy chủ ảo Cloud Server tại CloudFly, hãy liên hệ ngay với chúng tôi qua thông tin bên dưới để được tư vấn và hỗ trợ chi tiết. Đội ngũ kỹ thuật có chuyên môn cao luôn sẵn sàng 24/7 để giải quyết mọi vấn đề của bạn.

THÔNG TIN LIÊN HỆ:

  • Group săn sale: https://t.me/cloudflyvn

 

Tham gia kênh Telegram của CloudFly để nhận thêm ưu đãi và không bỏ lỡ bất kỳ khuyến mãi nào từ CloudFly
Chia sẻ