Viết chương trình javascript đầu tiên

Học Javascript

Qua khái niệm javascript là gì? thì bạn thấy tất cả các trình duyệt đều hỗ trợ nên ta không cần phải download thư viện gì cả mà thông qua những đoạn mã script giúp trình duyệt nhận diện được đó là Javascript.

Cặp thẻ mở và thẻ đóng

JavaScript có thể được thực hiện bởi sử dụng các lệnh JavaScript mà được đặt trong thẻ HTML <script>… </script> trong một trang web.

Thẻ <script> báo cho chương trình trình duyệt bắt đầu phiên dịch tất cả văn bản ở giữa các thẻ này như là một script. Một cú pháp đơn giản của JavaScript sẽ xuất hiện như sau:

Thẻ script nhận hai thuộc tính quan trọng sau:

  • Language − Thuộc tính này xác định ngôn ngữ scripting nào bạn đang sử dụng. Giá trị của nó sẽ là javascript. Mặc dù các phiên bản gần đây của HTML (và XHTML) đã thôi dần không sử dụng thuộc tính này nữa.
  • Type − Thuộc tính này là những gì bây giờ được đề nghị sử dụng và giá trị của nó nên được thiết lập là “text/javascript”.

Dưới đây là một đoạn JavaScript:

Đặt thẻ script ở đâu?

Chúng ta có ba cách đặt thường được sử dụng sau đây:

Cách 1: Internal – viết trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên đó không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những đoạn mã đó phải được bao lại bằng thẻ script.
Ví dụ đặt trong thẻ head

Ví dụ đặt trong thẻ body

Cách 2: External – viết ra một file js khác rồi import vào

Bạn có thể viết những đoạn mã javascript ở một file có phần mở rộng là .js, sau đó dùng thẻ script để import vào (giống CSS vậy). Ví dụ file JS của mình có tên là test.js thì lúc này mình import vào như sau:

Lưu ý: Lúc này bên trong file test.js bạn không đặt thẻ scirpt nữa vì nó là file có phần đuôi là .js rồi nên trình duyệt tự nhận diện đây là file chứa mã Javascript.

Cách 3: Inline – viết trực tiếp trong thẻ HTML

Inline nghĩa là bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML luôn. Như ví dụ dưới đây là mình đang viết dạng inline vì đoạn mã alert(1) được đặt trong sự kiện onclick của thẻ button.

Viết chương trình Học Javascript cơ bản!

Bước 1: Bây giờ chúng ta thực hành nhé, bạn hãy tạo một file index.htmlvà lưu tại bất kì vị trí nào, miễn là phần mở rộng là.html, sau đó mở file đó rồi gõ nội dung sau vào:

Chạy lên trình duyệt bạn thấy xuất hiện một button. Bây giờ ta sẽ viết ứng dụng khi click vào button đó thì sẽ xuất hiện một thông báo “Học Javascript cơ bản!” nhé. Có lưu ý là button đó mình có đặt id=clickvaoday nha.

Bước 2: Viết mã Javascript khi click vào button có id="clickvaoday" thì thông báo lên màn hình.

Lưu ý: Bạn phải đặt đoạn mã javascript bên dưới button như trong demo, nếu bạn đặt ở trên là sẽ bị lỗi đấy, lý do tại sao thì trong các bài tiếp theo mình sẽ giải thích kỹ hơn.

Lời kết

Chúng ta cũng đã làm một ví dụ nho nhỏ sử dụng hàm getElementByIdaddEventListener, nếu bạn không hiểu hai hàm này thì cứ từ từ nhé, các bài sau ta sẽ nói về nó nhiều hơn.