Cách sử dụng javascript trong html

Trong bài viết này chúng ta sẽ tìm hiểu về JavaScript là gì và cách để sử dụng JavaScript trong HTML.

Javascript là gì?

Javascript[viết tắt là JS] là một ngôn ngữ lập trình động được sử dụng cho lập trình website, lập trình ứng dụng web, lập trình game và hơn thế nữa. Nó cho phép bạn triển khai các tính năng động trên các trang web mà không thể được thực hiện chỉ với HTML và CSS.

Nhiều trình duyệt sử dụng Javascript làm ngôn ngữ kịch bản để thực hiện các việc động trên trang web. Đôi khi bạn lướt web sẽ thấy các tính năng động được sử dụng bằng Javascript như: Dropdown menu, thay đổi màu sắc động, đôi khi là các hiệu ứng…

Javascript có các framework nào?

Hiện nay Javascript có rất nhiều framework với các tác dụng khác nhau từ frontend cho đến backend. Sau đây tôi sẽ liệt kê một số framework phổ biến hiện nay:

• jQuery: Một thư viện được sử dụng phổ biến
• ReactJS: Một thư viện viết ứng dụng mobile.
• NodeJS: Một thư viện hoạt động phía server.
• Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.

Lợi ích khi sử dụng Javascript

Có một số lý do mà rất nhiều các developer thích làm việc với Javascript. Dĩ nhiên, chắc chắn có một số lý do nào đó mà họ lại yêu thích sử dụng Javascript, và dưới đây là một số lợi ích khi sử dụng Javascript.

• Dễ học và khá đơn giản để triển khai: Nó là một ngôn ngữ lập trình phía người dùng, không giống như các ngôn ngữ lập trình mạnh mẽ như C, Java hay Golang – yêu cầu có những quy tắc chặt chẽ khi viết code.
• Tốc độ xử lý nhanh: vì Javascript là ngôn ngữ lập trình chạy ở phía client, nên nó chạy cực kỳ nhanh, ngay lập tức – thay vì phải kết nối lại với phía server để nhận phản hồi.
• Đa dạng framework: như AngularJS hay ReactJS là những framework Javascript được sử dụng để build lên các ứng dụng website cực kỳ lớn.
• Xây dựng website đa tương tác: tất cả chúng ta đều bị thu hút bởi vẻ đẹp trong thiết kế website, đặc biệt là những trang web sử dụng Javascript để tạo ra các tương tác sinh động.
• Javascript là một ngôn ngữ thông dịch: nghĩa là nó sẽ không hề yêu cầu bạn phải chạy trình biên dịch [compiler]. Tất cả mọi thứ bạn cần chỉ là một trình duyệt web như Chrome chẳng hạn – và javascript sẽ chạy ngay trên trình duyệt của bạn luôn.

Sử dụng Javascript trong HTML

Đến đây thì chắc các bạn cũng phần nào hiểu được JavaScript là gì rồi đúng không nào. Tiếp theo chúng ta sẽ tìm hiểu về cách sử dụng JavaScript trong HTML như thế nào. Cũng giống như CSS, Javascript có thể được sử dụng bên trong HTML chẳng hạn như:

1. Code bên trong thẻ HTML

Ở đây bạn có thể viết code Javascript bên trong thẻ HTML với một vài cú pháp JS đặc biệt. Trong HTML sẽ có một số event attributes cho phép bạn thực hiện một chức năng nào đó khi sự kiện được kích hoạt. Ví dụ như thế này:

button title="alert['Bạn vừa click vào button']">Click me!

Bên trên là một ví dụ đơn giản về sự kiện click trong Javascript được viết bên trong thẻ HTML. Khi người dùng click vào button thì đoạn code hoặc hàm bên trong thuộc tính title sẽ được thực thi.

2. Viết code Javascript bên trong cặp thẻ script

Nếu bạn đã học qua về CSS, thì bạn có thể thấy code CSS có thể được viết bên trong cặp thẻ style. Đối với JavaScript cũng vậy, bạn có thể viết code JavaScript bên trong cặp thẻ script:

function[] { alert["Code JS bên trong cặp thẻ script"]; }

3. Viết code JavaScript bên trong một file JS

Bạn cũng có thể viết code JavaScript bên trong một file .js sau đó import chúng vào HTML.

// demo.js file alert["Code JS bên trong một file khác"];

Thuộc tính src của thẻ script được sử dụng để import source code từ một file js khác. File js này cũng có thể đến từ website khác, trong trường hợp này chúng ta cần truyền vào đường dẫn đến file js.

Lưu ý rằng phần mở rộng của một file JavaScript sẽ là .js cũng giống như các file HTML thì sẽ có đuôi là .html vậy.

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

Bạn có thể viết code JavaScript thông qua trình soạn thảo Notepad, visual code, PHPStorm… Ở đây mình sẽ sử dụng PHPStorm để code JavaScript nhé.

Đầu tiên các bạn tạo giúp mình một file index.html và tạo một button bên trong file HTML vừa tạo.

JavaScript là gì? Click me!

Sau đó chúng ta sẽ sử dụng thuộc tính title để bắt sự kiện người dùng click vào button và show dòng chữ “Bạn đã click vào button.”

JavaScript là gì? Click me!

Hàm alert['content'] trong JavaScript được sử dụng để hiển thị một popup với nội dung được chỉ định. Với ví dụ trên chúng ta sẽ có được kết quả như sau khi click vào button:

Bất kỳ ngôn ngữ nào cũng sẽ có cách khác nhau để comment code. Nó được sử dụng để ghi chú lại đoạn code mà bạn đã viết, có thể là để người khác có thể đọc hiểu dễ dàng code của bạn.

/* Comment nhiều dòng */ // Comment 1 dòng

Kết luận

Trong bài viết này chúng ta đã được học về JavaScript là gì? Cách sử dụng JavaScript như thế nào trong HTML. Ở bài viết sau tôi sẽ tiếp tục nói về cách khai báo biến trong JavaScript.

Tham khảo: //www.freecodecamp.org/

Bài viết liên quan

Bạn có thể nhúng JavaScript vào một file HTML theo một trong hai cách chủ yếu sau đây:

• Dùng cặp thẻ để nhúng JavaScript vào file HTML
• Dùng thẻ link để nhúng JavaScript vào file HTML [Viết file riêng có đuôi .js]

Cách 1 : Dùng cặp thẻ Script để viết js trong cùng HTML

Cặp thẻ Script ta có thể đặt ở trong cặp thẻ hoặc

alert[“aaa”]

Ở ví dụ trên là ta đang để Script ở trong thẻ head . Trong một file HTML có thể viết nhiều đoạn Script, bạn có thể cho nó ở trong cặp thẻ cũng được. Để sao cho ta quản lý file một cách thuận tiện nhất.

Thuộc tính type:  thuộc tính này không bắt buộc . Không có cũng không sao. Js tự mặc định sẵn trong HTML.

Cách 2: Dùng link để gọi file js riêng

Js được đặt ở một file riêng biệt vs html.

Đuôi .js

Thuộc tính src để đặt đường dẫn file js.

Trong file js riêng không được chứa cặp thẻ

Chúc Các Bạn Thành Công ! 

Chat với chúng tôi qua zalo

wpDiscuz

Nhúng [chèn] JavaScript vào HTML – ảnh minh họa

Tương tự như với CSS, dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng [chèn] JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

Cách nhúng [chèn] JavaScript vào HTML

Cách một, nhúng JavaScript kiểu Internal

Nhúng Internal có thể hiểu là chúng ta chèn code JavaScript vào một cụm nào đó trong tập tin HTML. Thông thường thì anh em hay nhóm nó vào trong cặp thẻ và   .

Các bạn thử 02 ví dụ nhúng HTML kiểu Internal dưới đây. Các bạn có thể dán code dưới đây vào một file định dạng .html bằng note pad và mở nó bằng trình duyệt để xem.

• Nhúng trong cặp thẻ :

Tiêu đề website alert["Chào mừng bạn đến với Hocban.vn"]; Nội dung website

• Nhúng trong cặp thẻ :

Tiêu đề website alert["Chào mừng bạn đến với Hocban.vn"]; Nội dung website

Cách hai, nhúng JavaScript kiểu inline

Đối với cách nhúng inline chúng ta có thể chèn ngay vị trí bất kỳ của một dòng code HTML.Trong ví dụ dưới đây mình sẽ tạo 03 vùng chọn tương ứng với 03 thẻ