KungfuPHP Chuyên Bitcoin, Crypto, MMO, Lập Trình
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
Bước 3: Kiểm tra kết quả khi click vào button, chúng ta sẽ kết quả như sau.
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
document.getElementById('demo').innerHTML = Date()
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
Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!
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
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
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.
- src : đường dẫn đến file javascript
- Có thể khai báo thẻ script để tham chiếu đến file javascript bất cứ đâu trong thẻ head và body
- 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.
- 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 - 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 - 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