Ở bài viết trước ta đã làm quen với JS, xem JS là gì và tìm hiểu sơ qua JS có thể mạnh như thế nào…
Giờ ta sẽ bắt đầu thực tập việc code JS, cũng như tìm hiểu những script (dịch dân dã là “đoạn mã ngắn”).
Tag <script>, và ứng dụng JS đầu tay
Việc đưa JS vào một trang web cũng giống như việc đưa vào một đoạn HTML, ta sử dụng tag (thẻ – nhưng ta sẽ không dùng từ thẻ mà dùng tag) để đánh dấu đoạn khởi đầu và kết thúc của một đoạn code. Và tag mà ta sẽ dùng ở đây là <script>, nó sẽ giúp cho trình duyệt hiểu là những chữ tiếp theo, kết thúc bằng </script> là một đoạn mã JS để thực thi chứ không phải là HTML để trình bày (HTML thì kết quả của nó sẽ là trình bày, chứ không thực thi một chuyện gì cả), phần kí tự nằm giữa <script> và </script> được gọi là script block.
Ta có thể chèn tag <script> vào phần header của trang web (giữa <head> và </header>), hay trong phần BODY (giữa 2 tag HTML <body> và </body>). Và mặc dù ta hoàn toàn có thể đặt JS ở ngoài những vùng đó (trước <html> hoặc sau </html>, nhưng làm vậy thì không hợp chuẩn web và sẽ tạo ra thói quen xấu. Lập trình cũng có chuẩn của lập trình, giống như xây dựng thì có tiêu chuẩn xây dựng vậy.
Tag <script> có một số thuộc tính, và thuộc tính hay dùng phổ biến nhất là language và type. Như ta đã nói ở trên, JS không phải là ngôn ngữ script duy nhất, những ngôn ngữ script khác nhau thì cần những bước thực thi khác nhau. Vì vậy, thuộc tính language sẽ giúp trình duyệt hiểu script sẽ được biên dịch như thể nào. Và không có gì dễ đoán hơn là nếu ta code JS thì thuộc tính language sẽ mang giá trị Javascript.
Vậy tag script của chúng ta sẽ bắt đầu như sau:
<script language="javascript" type="text/javascript">
Việc thêm thuộc tính language là một thói quen tốt, tuy nhiên ta có thể bỏ qua nó, các trình duyệt, ví dụ như IE, mặc định ngôn ngữ script là JS, vì thế nếu gặp <script> mà không có đặc tình language, trình duyệt sẽ hiểu nó là JS. Nhưng trong code thực hành, chúng ta nên giữu thói quen thêm thuộc tính language vào.
Với một số site, script mặc định sẽ không phải là JS, ngừoi ta gọi những loại script đấy là script chạy trên phía server (JS của ta thì chạy trên trình duyệt của người lướt web), vì vậy lúc đó ta phải để ý đến thuộc tính language, thêm nữa là phiên bản của JS mà ta sử dụng. Những trang mà ta sẽ gặp sẽ là site viết bằng ASP.
Tuy nhiên, chuẩn web ngày nay đã không còn đề cao chức năng của thuộc tính language nữa, nên có thể bỏ qua. Bây giờ ta sẽ nói về thuộc tính type. Đây là thuộc tính bắt buộc của tag <script>. Và nó sẽ dẫn đến việc tag <script> như sau:
<script type="text/JavaScript">
Tuy nhiên với một số trìnhh duyệt cũ, thì tương thích là việc ta cần chú ý, và khi đó, tag như sau là tối ưu:
<script language="javascript" type="text/javascript">
Để ý là phiên bản JS sẽ được định bởi thuộc tính language chứ không phải type.
Bài đâu tiên: tô mọi thứ màu đỏ
Ta sẽ thực hành một chút JS bằng cách code sao cho nền của trình duyệt sẽ có màu đỏ. Xem code dưới đây:
<html>
<body BGCOLOR="white">
Paragraph 1
<script language="javascript" type="text/javascript">
document.bgColor= "RED";
</script>
</body>
</html>
Lưu lại dưới tên, ví dụ tôi lấy tên bai1.htm, sau đó mở bằng trình duyệt để xem. Ta sẽ thấy một site màu đỏ với góc trên bên trái là dòng chữ Paragraph 1. Khoan đã nào, chẳng phải ở TAG body chúng ta đã đặt bgColor là white rồi sao, vậy sao lại là màu đỏ? ta sẽ tìm hiểu xem chuyện gì xảy ra ở đây.
Như trên ta đã thấy, ta đặt BODY là white, nghĩa là page sẽ mang màu trằng, nhưng ngay phía dưới ta lại code ngay JS là document có thuộc tính RED, document có rất nhiều thuộc tính, ở đây, document chính là page, nên page sẽ có màu đỏ.
Mỗi dòng trong cặp tag <script></script> được gọi là một statement- khai báo, hay đơn giản hơn là câu lệnh. tuy nhiên có một số câu lệnh dài hơn một dòng. Ta cũng sẽ để ý đến dấu chấm phẩy (semicolon ; ), được dùng để báo một câu lệnh chấm dứt. Trong JS việc đặt “;” khá thoải mái, nhưng thực hành code cho tốt thì nên để dấu “;” hợp lý và đúng chỗ.
Và nên nhớ tag đóng </script>
Crocodile & Saviour 