NIIT - ICT HÀ NỘI

Thư viện Video

Bài học Lập trình Javascript đầu tiên

  • Tác giả NIIT - ICT HANOI

  • Ngày đăng 21/ 09/ 2019

  • Bình luận 0 Bình luận

Trong bài hướng dẫn tự học Javascript đầu tiên này, bạn sẽ tìm hiểu cách tự tạo một trang web hỗ trợ JavaScript.

Bài học Javascript đầu tiên

 

Bài học Javascript đầu tiên

 

Tại đây, bạn sẽ tìm hiểu cách dễ dàng thêm tính tương tác vào trang web bằng JavaScript. Nhưng, trước khi chúng ta bắt đầu, hãy đảm bảo rằng bạn có một số kiến ​​thức làm việc về HTML và CSS.

Sau đó hãy quay lại đây với các bài tự học Javascript.

 

Thêm Javascript vào trang Web của bạn

 

Thông thường có ba cách để thêm JavaScript vào trang web:

 

  1. Nhúng mã JavaScript giữa một cặp thẻ mở <script> và thẻ đóng </script>
  2. Tạo một tệp JavaScript bên ngoài với phần mở rộng .js và sau đó tải nó vào trang thông qua thuộc tính src của thẻ <script>.
  3. Đặt mã JavaScript trực tiếp bên trong thẻ HTML bằng các thuộc tính thẻ đặc biệt như onclick, onmouseover, onkeypress, onload, v.v.

 

Các phần sau đây sẽ mô tả chi tiết từng cách thêm Javascript vào trang web như sau:

 

Nhúng mã Javascript bằng cặp thẻ <script> và </script>

 

Bạn có thể nhúng mã JavaScript trực tiếp trong các trang web của mình bằng cách đặt mã giữa các thẻ <script> và </script>. Thẻ <script> báo cho biết trình duyệt rằng các câu lệnh Javascript được chứa sẽ được hiểu là tập lệnh thực thi và không phải là HTML. Đây là một ví dụ:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Embedding JavaScript</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
    document.write(greet); // Prints: Hello World!
    </script>
</body>
</html>

 

Mã JavaScript trong ví dụ trên sẽ chỉ in một đoạn văn bản trên trang web. Bạn sẽ tìm hiểu ý nghĩa của từng câu lệnh JavaScript trong các chương sắp tới.

 

Lưu ý: Thuộc tính type cho thẻ <script> (tức là <script type="text/javascript") không còn cần thiết kể từ HTML5. Vì JavaScript là ngôn ngữ kịch bản mặc định cho HTML5.

 

Liên kết một tệp Javascript riêng bên ngoài

 

Bạn cũng có thể đặt mã JavaScript của mình vào một tệp riêng có phần mở rộng .js và sau đó gọi tệp đó trong file làm việc hiện tại của bạn thông qua thuộc tính src của thẻ <script>, như sau:

<script src="js/hello.js"></script>

Điều này hữu ích nếu bạn muốn các quản lý các file tốt hơn. Nó giúp cho bạn khỏi lặp đi lặp lại cùng một nhiệm vụ và làm cho trang web của bạn dễ bảo trì hơn nhiều.

Hãy thử tạo một tệp JavaScript có tên 'hello.js' và đặt đoạn mã sau vào đó:

// A function to display a message
function sayHello() {
    alert("Hello World!");
}

// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;

 

Bây giờ, trong file làm hiện hiện tại, bạn có thể gọi tệp JavaScript bên ngoài này vào để sử dụng bằng cách sử dụng thẻ <script>, như thế này:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Including External JavaScript File</title>        
</head>
<body>    
    <button type="button" id="myBtn">Click Me</button>
    <script src="js/hello.js"></script>
</body>
</html>

 

Lưu ý: Thông thường khi tệp JavaScript bên ngoài được tải xuống lần đầu tiên, nó sẽ được lưu trong bộ đệm của trình duyệt (giống như hình ảnh và CSS), do đó, sẽ không cần phải tải xuống nhiều lần từ máy chủ, giúp cho trang web tải nhanh hơn.

 

Thiết lập mã Javascript nội tuyến

 

Bạn cũng có thể thiết lập mã JavaScript nội tuyến bằng cách chèn trực tiếp vào thẻ HTML bằng các thuộc tính thẻ đặc biệt như onclick, onmouseover, onkeypress, onload, v.v.

Tuy nhiên, bạn nên tránh đặt nhiều mã JavaScript nội tuyến vì nó làm HTML của bạn lộn xộn với JavaScript và làm cho mã JavaScript của bạn khó bảo trì. Đây là một ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inlining JavaScript</title>        
</head>
<body>    
    <button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>

 

Ví dụ trên sẽ hiển thị cho bạn một thông báo cảnh báo khi click vào button.

Mẹo nhanh: Bạn phải luôn tách biệt nội dung và cấu trúc của trang web (ví dụ: HTML) kiểu dáng (CSS) và hành vi (JavaScript).

 

Thiết lập mã Javascript trong file HTML

 

Phần tử <script> có thể được đặt trong phần <head> hoặc phần <body> của tài liệu HTML.

Nhưng để lý tưởng nhất, các tập lệnh javascript không bắt buộc tải trước nên được đặt ở cuối phần <body>, ngay trước thẻ đóng </body>, nó sẽ làm cho các trang web của bạn tải nhanh hơn, vì làm thế nó sẽ không ngăn cản trình duyệt render trang.

Mỗi thẻ <script> chặn quá trình render trang cho đến khi nó được tải xuống và thực thi đầy đủ mã JavaScript, do đó, việc đặt chúng vào phần <head> (tức là phần tử <head>) mà không thực sự cần thiết dẫn tới việc load webstie chậm hơn.

Mẹo nhanh: Bạn có thể đặt bất kỳ số lượng phần tử <script> nào trong một tài liệu HTML. Tuy nhiên, chúng được xử lý theo thứ tự xuất hiện trong tài liệu, từ trên xuống dưới.

 

Sự khác nhau của Client-side và Server-side Scripting

 

Các ngôn ngữ kịch bản phía máy khách như JavaScript, VBScript, v.v. được trình duyệt web diễn giải và thực thi, trong khi các ngôn ngữ kịch bản phía máy chủ như PHP, ASP, Java, Python, Ruby, v.v. chạy trên Web Server và gửi lại kết quả cho trình duyệt web ở định dạng HTML.

Kịch bản phía máy khách (Client-side) có nhiều ưu điểm so với cách tiếp cận kịch bản phía máy chủ (Server-side) truyền thống.

Ví dụ: Bạn có thể sử dụng JavaScript để kiểm tra xem người dùng đã nhập dữ liệu không hợp lệ trong trường biểu mẫu và hiển thị thông báo cho các lỗi nhập tương ứng trong thời gian thực trước khi gửi biểu mẫu đến máy chủ web để xác thực dữ liệu cuối cùng và xử lý thêm để ngăn chặn Sử dụng băng thông mạng không cần thiết và khai thác tài nguyên hệ thống máy chủ.

Ngoài ra, phản hồi từ tập lệnh phía máy chủ chậm hơn so với tập lệnh phía máy khách, vì tập lệnh phía máy chủ được xử lý trên máy tính từ xa không phải trên máy tính cục bộ của người dùng.

Bạn có thể tìm hiểu thêm về các kịch bản phía máy chủ khi tham gia Học Lập trình PHP tại NIIT - ICT Hà Nội.

Tags
Bài viết liên quan
 
Chat với chúng tôi