Home Javascript Làm thế nào để nhúng javascript vào html nhanh chóng 2019

Làm thế nào để nhúng javascript vào html nhanh chóng 2019

0
Làm thế nào để nhúng javascript vào html nhanh chóng 2019

Các thủ thuật internet là điều mã nhiều nhân viên công nghệ thông tin hay người mới học tin học đều muốn biết và tìm hiểu nó.

Chính vì thế không mất thời gian quá nhiều chỉ cần một chút chuyên tâm bạn có thể biết được nhiều thủ thuật hay khi sử dụng công nghệ.

Bài viết hôm nay sẽ mang đến cho bạn một kiến thức mới về làm thế nào để nhúng javascript vào html? Các bạn cùng theo dõi bài viết ngay sau đây nhé!

Khoan đã!!! Có lẽ hơi thừa nhưng cho tôi hỏi tí. Bạn đã cài đặt javascript cho mình chưa? Nếu chưa thì khoan đọc bài viết này nhé! Sẽ hơi rối cho bạn đấy!

Kéo xuống đọc tiếp thôi nào!

1- Ưu điểm của Javascript

Trước khi tìm hiểu về nhúng javascript vào html hãy cùng chúng tôi điểm qua những ưu điểm của javascript. Javascript được sử dụng phổ biến bởi tính đơn giản, thông dụng. Chính vì một phần nhờ những ưu điểm vượt trội của nó mà người ta tin tưởng lựa chọn nhiều hơn.

ưu điểm javascript
Javascript có những ưu điểm vượt trội gì?

Ngôn ngữ lập trình này có từ lâu đời và dễ sử dụng trong số các loại ngôn ngữ lập trình. Ngày nay nó được cải tiến nhiều để phù hợp với nhu cầu người dùng.

1.1- Tối giản tương tác với server

  • Bạn không cần một compiler vì khi sử dụng web browser có thể biên dịch nó bằng HTML cơ bản
  • Nó dễ học hơn các ngôn ngữ lập trình khác vì thiết kế đơn giản cấu trúc gọn nhẹ
  • Lỗi dễ phát hiện hơn nên dễ sửa hơn so với nhiều ngôn ngữ lập trình phức tạp
  • Nó giúp website tương tác tốt hơn với khách truy cập vì dễ truy cập và thao tác sử dụng không cầu kỳ hay qua nhiều phân lớp
  • Nó nhanh hơn và tương đối dùng data nhẹ hơn các ngôn ngữ lập trình khác khiến người dùng lựa chọn sử dụng tương tác với server

Như vậy có thể thấy rằng javascript là ngôn ngữ lập trình cơ bản và thông dụng hướng đến nhiều đối tượng người dùng sử dụng nó trong tiến trình truy cập và sử dụng mạng.

1.2- Giao diện người dùng thân thiện, nhiều tính năng hơn

  • Được gắn trên một số element của trang web hoặc event của trang web
  • Truy cập đơn giản thông qua click chuột hoặc di chuột tới phần hoặc mục cần thiết tìm kiếm do nhu cầu sử dụng của người dùng
  • JS hoạt động trên nhiều trình duyệt, nền tảng… nên giao diện cũng như tính năng đều khá đơn giản dễ truy cập và tìm kiếm thông tin
  • So với các giao diện của các ngôn ngữ lập trình khác thì javascript có kiểu giao diện cho người dùng đặc thù và phổ thông nên tương đối thân thiện và nhiều tính năng để lựa chọn. Hơn hết đây là một ngôn ngữ lập trình hướng đến nhiều nhất người dùng ở mọi tầng lớp khác nhau sử dụng truy cập.

1.3 – Phản hồi ngay lập tức khách truy cập

Khi bạn sử dụng javascript là ngôn ngữ lập trình chính cho trang web của mình thì nó sẽ ngay lập tức phản hồi sự truy cập của bạn. Điều này đồng nghĩa với việc mọi thao tác bảo mật sẽ ngăn chặn virus hay hacker ngay lập tức. Từ đó cho thấy javascript đơn giản nhưng sự tương tác và bảo mật khá tốt và chất lượng.

1.4 – Dễ debug

  • Bạn có thể sử dụng JavaScript để kiểm tra input hay deput
  • Giảm thiểu việc kiểm tra thủ công khi truy xuất qua database…
  • Với những ngôn ngữ lập trình khác việc kiểm tra debug còn nhiều thao tác khó khăn hay loằng ngoằng nhưng với javascript thao tác này cực kỳ đơn giản.
thao tác javascript, nhúng javascript html
Javascript có thao tác đơn giản, dễ hiểu

Ngoài ra, người dùng có thể thấy rằng từ những ưu điểm được liệt kê đối với ngôn ngữ lập trình javascript thì nó sẽ có những mặt hạn chế nhất định cần khắc phục mà người dùng nên lưu ý khi chọn sử dụng nó cho các thao tác trao đổi thông tin dữ liệu của mình. Cụ thể:

  • Dữ liệu truy cập, lịch sử hay data người dùng dễ bị khai thác
  • Hacker sẽ dùng mã độc trên máy tính của người dùng có thể được dùng để thực thi bằng thao tác đơn giản
  • Nhiều khi javascript không được hỗ trợ trên mọi trình duyệt của nhà mạng
  • JS có code snippets lớn
  • Javascript có thể bị triển khai khác nhau tùy từng thiết bị nên dẫn đến việc không đồng nhất các dữ liệu hóa thông tin.

2- Cách nhúng Javascript vào HTML

Hiện nay đối với ngôn ngữ lập trình Javascript có nhiều cách nhúng vào HTML khác nhau. Tuy nhiên có 3 cách đơn giản và dễ sử dụng nhất đối với người dùng là:

2.1- Nhúng Javascript vào HTML trực tiếp

Thêm JavaScript trong HTML một cách trực tiếp với các thao tác tương đối đơn giản được sử dụng đó là: tag <script></script> để đặt chung tất cả mã JS bạn viết, theo đó JS code có thể được thêm vào như sau:

giữa tag <head>

<body>

Lưu ý là sẽ tùy thuộc vào nơi bạn thêm code JavaScript trong HTML file thì sẽ cho ra đời cách tải lên có thể khác nhau nên bạn không phải ngạc nhiên hay lăn tăn về vấn đề này. Trên thực tế, theo nhiều chuyên gia công nghệ thì thực tế tốt nhất là nên thêm thêm nó vào trong <head>. Với cách làm này sẽ để nó tách hẳn khỏi nội dung chính của file HTML, người dùng sẽ dễ làm việc và thao tác hơn.

javascript html
Bạn có thể nhúng javascript vào html bằng phương pháp trực tuyến

Nhưng nếu như bạn đặt nó vào trong tag <body> thì một ưu điểm khác đó là có thể tăng tốc độ tải. Vì nội dung website khi đó sẽ được tải nhanh hơn cũng chính vì thế mà JavaScript sẽ được parse chính xác và an toàn, tiện lợi.

2.2- Nhúng Javascript trong HTML bằng một file độc lập

Tuy trong từng trường hợp cụ thể mà người ta chọn nhúng JavaScript vào HTML một cách trực tiếp. Và dĩ nhiên đó không hẳn là cách hay nhất bởi nhiều khi sẽ có vài JS scripts cần được sử dụng tại nhiều trang khác nhau.

Cho nên, cách tốt nhất để nhúng JavaScript vào HTML là tạo 1file JavaScript riêng biệt. Cụ thể, những files này khi được gọi trong HTML documents giống với cách gọi CSS documents với các lợi ích như:

  • HTML code và JavaScript code bị tách riêng ra
  • Tái sử dụng lại code khiến việc đọc code sẽ dễ dàng hơn
  • Bảo trì cũng đơn giản hơn
  • Files Cached JavaScript sẽ tăng tốc website
  • Giảm thiểu thời gian trang phải tải

Ví dụ để nhúng một file JavaScript trong HTML gồm các thao tác

<!DOCTYPE html>

<html lang=”en-US”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Time right now:</title>

</head>

<body>

</body>

<script src=”js/myscript.js”></script>

</html>

Do đó ta sẽ được một nội dung mới của file myscript.js là:

let d = new Date();

document.body.innerHTML = “<h1>Time right now is: ” + d.getHours() + “:” + d.getMinutes() + “:” + d.getSeconds()</h1>”

>> Tìm hiểu thêm các biến trong Javascript tiện ích giúp bạn nắm rõ ý nghĩa và chức năng khi khai báo.

2.3- Ví dụ Javascript để xác thực email address

JavaScript chính là để tăng sức mạnh cho ứng dụng. Để có thể sử dụng, bạn cần xác thực nội dung truy cập. Một trong số những nội dung quan trọng nhất mà hệ thống bảo mật cần phải làm đó chính là cần xác thực là địa chỉ email.

hàm javascript trong html
Hệ thống sẽ gửi thông báo về email

Khi đó, hàm JavaScript sẽ có thể xác thực địa chỉ email trước khi gửi tới server của người dùng. Cụ thể là:

function validateEmailAddress(email) {

var re = /^(([^<>()[\]\\.,;:\s@\”]+(\.[^<>()[\]\\.,;:\s@\”]+)*)|(\”.+\”))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

return re.test(email);

}

function validate() {

$(“#result”).text(“”);

var emailaddress = $(“#email”).val();

if (validateEmailAddress(emailaddress)) {

$(“#result”).text(emailaddress + ” is valid :)”);

$(“#result”).css(“color”, “green”);

} else {

$(“#result”).text(emailaddress + ” is not correct, please retry:(“);

$(“#result”).css(“color”, “red”);

}

return false;

}

$(“#validate”).bind(“click”, validate);

Theo đó muốn thêm function này vào form để nhập liệu, bạn sẽ dùng loại code sau:

<form>

<p>Enter an email address:</p>

<input id=’email’>

<button type=’submit’ id=’validate’>Validate!</button>

</form>

<h2 id=’result’></h2>

Sau đó bạn sẽ nhận được kết quả. Kết quả sẽ xảy ra với 2 trường hợp tương ứng với 2 loại thông báo là gmail hợp lệ hoặc gmail không hợp lệ của người dùng.

Kết luận

Như vậy với những thông tin cần thiết được đúc kết khác chi tiết và đầy đủ từ bài viết này đã giúp bạn hiểu rõ hơn về ngôn ngữ lập trình javascript. Đồng thời bạn cũng có thể hiểu được cách làm thế nào để nhúng javascript vào html cơ bản nhất.

Đó là những gì tôi cần truyền đạt đến bạn. Nếu có thắc mắc hay cần trợ giúp đừng ngần ngại hãy liên hệ ngay nhé!

Chúc bạn thành công!

LEAVE A REPLY

Please enter your comment!
Please enter your name here