Lệnh Alert trong Javascript 
Giới thiệu ngôn ngữ lập trình C / C++ Tích hợp Javascript vào Website
Bài này codehow sẽ hướng dẫn bạn cách cài đặt và tích hợp Javascript vào website, qua đó bạn sẽ biết cách viết một chương trình Javascript đơn giản.
Bước đầu tiên để học Javascript là bạn hãy tự mình cài đặt một chương trình JS đơn giản, nó sẽ giúp bạn hiểu được luồng hoạt động của JS, cách biên dịch, cũng như cách kết hợp với các phần tử HTML / CSS như thế nào.
Mình sẽ hướng dẫn thật chi tiết nhất có thể, giúp bạn nắm vững được bài học, cũng như có kiến thức để tiếp tục học ở những bài tiếp theo.
Giới thiệu thẻ javascript script
Trong HTML có một thẻ rất đặc biệt, đó là thẻ script. Thẻ này dùng để khai báo mã Javascript trên website. Nó sẽ không được HTML biên dịch và hiển thị ra ngoài trang web, mà sẽ được HTML bỏ qua và sử dụng JS compiler để biên dịch. Cú pháp của thẻ script như sau:
<script>
Mã javascript
</script>Bên trong cặp thẻ này chính là các đoạn mã javascript mà chúng ta sẽ code cho trang web hiện tại.
Ví dụ 1: Hiện thị lời chào từ codehow khi khách truy cập vào một trang web.
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại codehow.net</title>
<meta charset="utf-8">
</head>
<body>
<h1>Học lập trình miễn phí tại codehow.net</h1>
<script>
document.write("Chào mừng bạn đến với Codehow.net");
</script>
</body>
</html>Lệnh document.write sẽ in ra nội dung lên trình duyệt.
Ví dụ 2: Hiển thị một thông báo "Welcome to Codehow.net" khi người dùng vào website.
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại codehow.net</title>
<meta charset="utf-8">
</head>
<body>
<script>
alert("Welcome to Codehow.net");
</script>
</body>
</html>Chạy lên bạn sẽ thấy giao diện như sau:
Lệnh alert dùng để hiển thị một thông báo dạng popup lên trình duyệt.
Tích hợp javascript vào trang web từ một file .js
Trong phần 1 codehow đã hướng dẫn cách tích hợp javascript vào trang web, nhưng đó là cách code trực tiếp trên file html luôn. Thực tế thì bạn nên đưa tất cả chúng ra ngoài một file riêng, sau đó import vào bằng cách sử dụng thẻ script.
Cách làm này có rất nhiều lợi ích, cụ thể như sau:
- Dễ dàng chỉnh sửa, phát triển, mở rộng chương trình.
- Cấu trúc file html sẽ đơn giản hơn rất nhiều, tránh được tình trạng một nùi code JS trên mã html.
- Tối ưu hơn trong SEO, đây là chuẩn mà Google đưa ra để đánh giá một trang web.
Cú pháp như sau:
<script src="URL_FILE_JS"></script>
Trong đó URL_FILE_JS chính là đường dẫn trỏ đến file javascript của bạn. Nó có thể là một file nằm trên chính server của bạn, và cũng có thể là một file js bất kì nằm trên internet.
Ví dụ: Tạo một file demo.js với nội dung như sau.
alert('Bạn đã chạy file demo.js tại codehow.net');Tạo một file index.html với nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại codehow.net</title>
<meta charset="utf-8">
</head>
<body>
<script src="/demo.js"></script>
</body>
</html>Cấu trúc thư mục sẽ như sau:
Chạy lên bạn sẽ thấy kết quả không khác gì như ví dụ trong phần 1.
Tích hợp javascript vào trong thẻ html
Ngoài hai cách trên thì bạn cũng có thể đặt mã javascript vào bên trong thẻ html, thông qua các thuộc tính có hỗ trợ mã javascript.
Các thẻ html đều có những thuộc tính như onclick, onmousemove.., ta gọi đó là sự kiện, nó sẽ xảy ra khi bạn dùng chuột click vào phạm vi của thẻ html đó.
Ví dụ: Hiển thị thông báo khi click vào một ô input.
<!DOCTYPE html>
<html>
<head>
<title>Học lập trình miễn phí tại codehow.net</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="Click me" onclick="alert('Chào mừng bạn đến với CodeHow.net')"/>
</body>
</html>Kết quả cũng tương tự như phần 1.
Lời kết
Vậy là mình đã hướng dẫn xong cách tích hợp mã javascript vào website, đây là 3 cách phổ biến nhất mà bạn có thể sử dụng trong quá trình xây dựng dự án. Và mình cũng xin nhấn mạnh như sau: Hãy sử đặt tất cả mã javascript vào một file riêng, bởi vì sau này bạn sẽ rất dễ dàng nâng cấp và phát triển thêm, cũng như tối ưu hơn trong SEO (Search Engine).
