1. JavaScript là gì?
JavaScript được thiết kế để tạo ra các tương tác vào các trang HTML
JavaScript là một ngôn ngữ kịch bản (scripting language)
Một ngôn ngữ kịch bản là một ngôn ngữ lập trình nhẹ
JavaScript thường được nhúng trực tiếp vào các trang HTML
JavaScript là một ngôn ngữ thông dịch nghĩa là script thực hiện mà không cần sự biên dịch
JavaScript thì hoàn toàn miễn phí
2. Javascript có thể làm gì?
- JavaScript cung cấp cho những designer một công cụ lập trình vì HTML là không phải là một ngôn ngữ lập, nhưng JavaScript là một ngôn ngữ lập trình với cú pháp rất đơn giản. Hầu hết mọi người có thể nhúng các đoạn mã JavaScript vào những trang HTML làm cho nó trở nên sinh động hơn.
- JS có thể đưa vào trang HTML một đoạn văn bản mới mà trước đó nội dung của trang web này chưa hề có.
- JS có thể phản ứng lại với một sự kiện nào đó như người sử dụng nhấn chuột lên một phần tử của trang HTML hoặc thay đổi một giá trị nào đó trong ô nhập liệu …
- JS có thể đọc hoặc thay đổi nội dung của các phần tử trong trang HTML.
- JS có thể dùng để kiểm tra dữ liệu trước khi trình duyệt gửi dữ liệu đến máy chủ. Điều này giúp cho máy chủ không phải xử lý quá nhiều.
- JS có thể dùng để phát hiện các loại trình duyệt khác nhau để có thể tải những phần thiết kế phù hợp với trình duyệt đó
- JS có thể dùng để sử dụng tạo các tập tin cookie lưu trữ và truy xuất thông tin trên máy tính của người truy cập website.
3. Sử dụng Javascript như thế nào?
Để sử dụng JS rất đơn giản, chúng ta chỉ cần đưa các câu lệnh của JS vào trong thẻ <script> của HTML
Ví dụ: Xuất ra trình duyệt câu “Hello World”
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>
Chúng ta cũng có thể thêm thẻ của HTML vào JS
<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>");</script></body></html> Để tránh trường hợp một số trình duyệt không hỗ trợ JS và có thể gây ra lỗi khi website của chúng ta có sử dụng JS, chúng ta thêm một đoạn sau ghi chú của HTML cho nội dung của JS
<html><body> <script type="text/javascript"> <!-- document.write("Hello World!"); //--> </script></body></html>4. JavaScript thực thi lệnh khi nào
JS trong một trang web thực thi theo 2 cách sau:
TH1: Thực hiện lệnh ngay khi trang web được tải về trình duyệt của người sử dụng.
TH2: Thực hiện lệnh khi nhận được một tác động nào đó như nhấn nút, di chuyển chuột hoặc đưa chuột lên một phần tử nào đó của HTML …
Ví dụ: TH1
<html><head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script></head> <body onload="message()"></body></html>Ví dụ: TH1
<html><head></head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script></body> </html>Ví dụ: TH2
<html><head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script></head> <body ><a href="#" onclick="message()">Click Here</a></body></html> 5. Vị trí JavaScript trong trang HTML
Đặt trong cặp thẻ <head> của trang web
Đặt trong cặp thẻ <head> của trang web
<html><head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event"); } </script></head> <body onload="message()"></body></html>Đặt trong cặp thẻ <body> của trang web
<html><head></head> <body> <script type="text/javascript"> document.write("This message is written by JavaScript"); </script></body> </html>Đặt trong tập tin .js sau đó nhúng tập tin này vào website. Tạo tập tin alert.js có nội dung sau:
// JavaScript Documentfunction message(){ alert("This alert box was called with the onload event");}Sau đó tạo một tập tin HMTL nhúng tập tin .js trên vào
<html><head><script type="text/javascript" src="alert.js"></script></head><body > <a href="#" onClick="message()">Click Here</a></body></html>6. Hiển thị dữ liệu bằng JS trên trình duyệt
Để in ra một giá trị nào đó bằng JS ra trình duyệt chúng ta chỉ dụng câu lệnh đơn giản sau
Cú pháp
document.write("<giá trị cần in>");
Ví dụ:
Để in ra một giá trị nào đó bằng JS ra trình duyệt chúng ta chỉ dụng câu lệnh đơn giản sau
Cú pháp
document.write("<giá trị cần in>");
Ví dụ:
<script type="text/javascript">document.write("<h1>This is a heading</h1>");document.write("<p>This is a paragraph.</p>");document.write("<p>This is another paragraph.</p>");</script>Chúng ta có thể dùng câu lệnh này để in các giá trị có thể chuỗi, số, thẻ HTML …
7. Ghi chú trong mã lệnh JS
Khi chúng ta lập trình đoạn mã sẽ không đơn giản là một vài dòng mà đôi khi có thể lên đến cả ngàn dòng lệnh trên một trang nên chúng ta cần ghi chú cho các dòng lệnh, đoạn mã lệnh để khi chúng ta hoặc người khác đọc có thể hiểu được đoạn mã đó có ý nghĩa gì
Có 2 kiểu ghi chú thường được sử dụng trong ngôn ngữ lập trình:
Dòng ghi chú đơn bắt đầu với dấu //
Ví dụ:
<script type="text/javascript"> // Write a heading document.write("<h1>This is a heading</h1>"); // Write two paragraphs: document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>");</script>Nhiều dòng ghi chú bắt đầu với dấu /* và kết thúc với */
Ví dụ:
<script type="text/javascript"> /* The code below will write one heading and two paragraphs */ document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); document.write("<p>This is another paragraph.</p>");</script>Chú ý: Chúng ta có thể dùng 2 dòng ghi chú này để đóng tạm thời các dòng lệnh JS trong quá trình lập trình
Posted in: Chuyên đề JavaScript cơ bản
