Trong bài viết này mình sẽ tóm tắt về javascript căn bản, giup cho các bạn mới tiếp cận 1 cách nhanh chóng

1. Giới thiệu về Javascript

Javascript là ngôn ngữ lập trình của HTML và web
Javascript rất dễ học
Có thể kết hợp javascript với hầu hết ngôn ngữ lập trình web

2. Cách sử dụng Javascript sử kiện của một phần HTML

a)  Ví dụ 1 

Bước 1:  Tạo  file HTML rỗng và đặc đoạn code dưới đây vào file HTML.

Javascript Demo

Mục đích đoạn code trên sẽ in ra trình duyệt  một button và khi click vào button đó sẽ hiện ra trình duyệt thời gian hiên tại của máy tính.

Bước 2:  Khi chạy file HTML trên trình duyệt ,  chúng ta sẽ được kết quả như hình dưới

javascipt-demo
Bước 3: Kiểm tra kết quả khi click vào button, chúng ta sẽ kết quả như sau.

javascript-demo-result
 a.a)  Cách sử dụng 

Ví dụ trên (vi dụ 1) chúng ta đã sử dụng sự kiện “Onclick” của phần tử HTML để thực thi code javascript  

Chi tiết đoạn code javascript trên

  • document  là một đối tượng chứa tất cả phân tử HTML của trang web  hiện đang hiển thị trên trình duyệt
  • getElementById là một hàm để lấy ra phân tử HTML có một ID nào đó, ở ví dụ trên chúng ta sẽ lấy ra được thẻ <p> vì thẻ <p> có id là demo.
  • innerHTML: là một thuộc tính để lấy ra text của một HTML. Ví dụ nếu ta có thẻ <p> như sau . <p id=”demo”> Xin chào Kungfuphp </p> thì giá trị của innertHTML là  Xin chào Kungfuphp
  • Date() là một hàm của javascipt để lấy thời gian hiện tại của máy tính.

3. Cách khai báo và sử dụng Javascript code trong thẻ <script>

Cách thứ 2 để sử dụng javascript trong một file HTML là khai báo code javascript trong thẻ <script> </script>

a) Ví dụ 2

Thay đổi đoạn code trong ví dụ giống như đoạn code sau đây

Javascript Demo

Mục đích của ví dụ trên giống như ví dụ 1 sẽ in ra trình duyệt thời gian hiện tại khi click vào button.

Tuy nhiên chúng ta sẽ không  code javascript  document.getElementById(‘demo’).innerHTML = Date()  trực tiếp trong sự kiện của phần tử HTML mà sẽ  khai báo nó trong thẻ <script>

Ví dụ trên (ví dụ 2) chúng ta đã khai báo một hàm tên getDateTime() trong thẻ <script> và đặc trong thẻ <head> trong file HTML , hàm này có nhiệm vụ in ra ngày giờ hiện tại khi được gọi

Javascript Demo

Đoạn code trên chúng ta đã khai báo hàm getDateTime() trong thẻ body.

4. Cách khai báo và sử dụng Javascript code trong file js

Bước 1 : Tạo file demo.js cùng thư mục với file html , xem hình dưới đây

javascript-demo-structure-folder
Bước 2 : Di chuyển đoạn code javascript trong vi du 2 từ file html qua file demo.js. File javscript bạn giống như sau
javascript-demo-file-content
lưu ý: bạn không cần sử dụng thẻ <scirpt> trong file js

Bước 3: Trong file Html dùng thẻ script để gọi file javascript.

  1. src : đường dẫn đến file javascript
  2. Có thể khai báo thẻ script để tham chiếu đến file javascript bất cứ đâu trong thẻ head và body
  3. Nên khai báo thẻ script ở cuối thẻ thẻ body để tăng performance cho website

Bây giờ code trong file Html của bạn sẽ như sau:

Javascript Demo

5. Tổng Kết:

Có 3 cách để khai báo và sử dụng javascript.

    1. Khai báo và gọi trực tiếp trong sự kiện của phần tử Html
      Ưu điểm: code nhanh
      Nhược điểm: : làm code html rối, không thể sử dụng lại code
    2. Khai báo thể code javascript trong thẻ <script>
      Ưu điểm: có thể sử dụng lại code trong cùng trang html
      Nhược điểm: : do phải code ở file html nên làm code html trở nên nhiều và rối
    3. Khai báo code javascript trong file javascript
      Ưu điểm: có thể sử dụng lại code trong cùng hoặc khác trang html
      Nhược điểm: : Trình duyệt cache file javascript làm tăng performance của website.

Tổng quan bài viết javascript căn bản, mình đã giới thiệu đến các bạn những gì căn bản nhất, để bắt đầu nghiên cứu về ngôn ngữ lập trình đầy thú vị này. Chúc các bạn học tốt, để lại comment bên dưới nếu có bất kỳ thắc mắc nhé. Thân ái

Gửi bình luận bằng Facebook

Bài viết liên quan

loading...