Làm cách nào để liên kết HTML với chức năng JavaScript?

Để bao gồm tệp JavaScript bên ngoài, chúng ta có thể sử dụng thẻ script có thuộc tính src. Bạn đã sử dụng thuộc tính src khi sử dụng hình ảnh. Giá trị cho thuộc tính src phải là đường dẫn đến tệp JavaScript của bạn

Thẻ tập lệnh này phải được bao gồm giữa các thẻ trong tài liệu HTML của bạn

Tệp JavaScript

• Luôn kết thúc bằng phần mở rộng js
• Chỉ bao gồm JavaScript

Theo thông lệ, đặt tất cả các tệp JavaScript vào một thư mục có tên là js trên các trang web, như vậy

Bản demo đơn giản bao gồm JavaScript

Dưới đây là minh họa rất đơn giản về cách đưa tệp JavaScript bên ngoài vào trang HTML

JavaScript của người khác

Đối với lớp này, bạn không cần phải viết bất kỳ mã JavaScript thực tế nào. Thật may mắn cho bạn, nhiều người đã viết rất nhiều JavaScript và thậm chí còn cho phép bạn sử dụng nó miễn phí

Khung JavaScript

Framework về cơ bản là một thư viện mã cho một ngôn ngữ nhất định. Nói chung, khung trừu tượng hóa các tác vụ phổ biến và giúp các nhà thiết kế và nhà phát triển viết mã cụ thể của họ dễ dàng và nhanh hơn. Các khung không thực sự tự làm bất cứ điều gì, chúng chỉ cung cấp một nền tảng dễ dàng hơn để mọi người xây dựng trên đó

Khung JavaScript phổ biến

Trong số các khung này, JQuery hiện là khung phổ biến nhất. Đó cũng là từ mà bạn muốn gặp nhất khi được sử dụng như một từ thông dụng

Kích thước tệp JavaScript

Nhiều tệp JavaScript có xu hướng khá lớn, điều này có thể làm chậm thời gian tải trang của bạn. Các khung phổ biến thường cung cấp phiên bản mã "rút gọn" của chúng. Bạn phải luôn sử dụng phiên bản này trong các trang của mình vì phiên bản này sẽ có kích thước tệp nhỏ hơn

HREF JavaScript là một phương pháp để dễ dàng gọi hàm JavaScript khi người dùng nhấp vào liên kết trên trang web.  

Nếu bạn đã từng nhấp vào một liên kết và nhận được hộp bật lên, chẳng hạn như hộp thoại cảnh báo, thì có khả năng bạn đã thấy chức năng này hoạt động

Một trong những khía cạnh thú vị nhất của JavaScript, với tư cách là một ngôn ngữ, là cách nó tích hợp hoàn hảo với HTML và CSS. Là một lập trình viên JavaScript, bạn có thể thường thấy mình xen kẽ mã JavaScript với mã HTML/CSS của mình

Nhưng việc sử dụng HREF JavaScript cũng là một chức năng không được dùng nữa — điều mà bạn nên biết nếu bạn đang tìm hiểu về Câu hỏi phỏng vấn JavaScript. Vì vậy, hãy xem HREF JavaScript, cách nó hoạt động và khi nào bạn có thể sử dụng nó

Khóa học Bootcamp Javascript hiện đại [2022]

Cập nhật lần cuối vào tháng 1 năm 2023

4. 7 [11.004]

Tài nguyên JS trực tuyến cập nhật nhất. Làm chủ Javascript bằng cách xây dựng một danh mục dự án tuyệt đẹp. . Tác giả Colt Steele, Stephen Grider

Gọi một hàm JavaScript thông qua HREF

Hầu hết mọi người đều quen thuộc với HTML trước khi họ bắt đầu lập trình bằng JavaScript, nhưng không phải tất cả. Trước khi hiểu lý do tại sao chúng tôi sử dụng thuộc tính HREF, chúng tôi nên hiểu cách chúng tôi sử dụng JavaScript trong một trang web

Vùng “HEAD” của trang HTML có thể lưu trữ mã JavaScript. Vì vậy, trang của bạn sẽ trông như thế này

		
			
				...JavaScript code…
			
		
		
			...Website content…
		
	

Trên đây vẫn là tất cả mã HTML. Mọi thứ trong thẻ HTML về cơ bản là mã của trang web. Nhưng mặc dù phần “HEAD” lưu trữ mã, nó thường được gọi trong phần “BODY. ” Gọi mã JavaScript có nghĩa là bạn cần biết “khi nào” mã đó sẽ được xử lý — thường dựa trên hành động của người dùng

Vì vậy, bạn có thể có

JavaScript mà bạn đã viết sẽ được xử lý khi người dùng “click” vào nút. Bản thân JavaScript_Function[] sẽ ở đầu trang [“phần ĐẦU”], nhưng nút sẽ ở giữa trang [“phần CƠ THỂ”]

Trên thực tế, một yếu tố thú vị là nút này về cơ bản sẽ là một yếu tố vô giá trị nếu không sử dụng JavaScript để xử lý một số dạng mã. Các nút thường được sử dụng trong biểu mẫu HTML, nhưng ngoài việc gửi biểu mẫu, chúng cần JavaScript để có chức năng nâng cao hơn

Tuy nhiên, trong trường hợp này, chúng tôi không sử dụng các nút. Chúng tôi đang sử dụng một siêu liên kết. Siêu liên kết là nền tảng cơ bản của Internet. Bạn biết đó là bất kỳ liên kết nào thường hiển thị dưới dạng màu xanh lam và được gạch chân. một kết nối đến một trang khác

Một siêu liên kết, trong HTML, được viết như sau

Google Web Search

In the above, the tag is the beginning of the link. The HREF attribute is where the link goes. And then the closes the tag.

Nhưng thuộc tính HREF không nhất thiết phải bao gồm URL. Cách xa nó.  

Trên thực tế, bạn có thể tạo mã JavaScript khởi chạy trong thuộc tính HREF của URL

Click

Khi bạn gọi một hàm JavaScript thông qua HREF, nó tương tự như JavaScript onClick — hàm tập lệnh xử lý khi bạn nhấp vào liên kết. Nhưng bạn cũng có thể sử dụng hành động onHover để xử lý JavaScript khi người dùng chỉ cần đặt con trỏ của họ vào liên kết hoặc nhiều hành động “di chuyển chuột” khác

Các nhà phát triển thường sử dụng các liên kết “A” theo cách này vì nó rất dễ dàng. Đó là một cách dễ dàng để thiết lập giao diện do người dùng kiểm soát — người dùng đã quen với việc nhấp vào liên kết và nhà phát triển không phải quét tìm bất kỳ hành động cụ thể nào từ người dùng

Thật không may, mặc dù đây là một kỹ thuật khá dễ dàng, nhưng nó cũng bị coi là không dùng nữa

Tại sao bạn không nên sử dụng HREF JavaScript

Bạn có thể sử dụng HREF JavaScript. Ở cấp độ thủ tục và máy tính, nó sẽ không gây ra bất kỳ sự cố nào. Về cơ bản, nó sẽ giống với việc sử dụng chức năng onClick của liên kết. Nhưng nó cực kỳ phản đối vì một lý do quan trọng

HREF có nghĩa là hoạt động như một định danh - một tham chiếu - chứ không phải là một hành động. Vì vậy, nếu bạn sử dụng thuộc tính HREF của mình theo cách này, thì bạn đang sử dụng nó theo cách đi ngược lại mục đích ban đầu của thuộc tính. Trong khi nó hoạt động, điều này làm cho nó trở nên “lộn xộn” và không trực quan

Nói cách khác, nó giống như đi ngược lại “ngữ pháp” của ngôn ngữ lập trình. Nó nhận được thông điệp, nhưng nó làm như vậy theo cách không được tài liệu hóa hoặc hỗ trợ chung

Hầu hết mọi người sẽ nói với bạn rằng bạn nên sử dụng đoạn mã sau để thay thế

Trên thực tế, nếu bạn tra cứu HREF JavaScript ngay bây giờ, đó có thể sẽ là một trong những ví dụ phổ biến nhất mà bạn thấy

Nhưng điều này thực sự cũng không phải là lý tưởng. HREF của bạn không nên là “#” vì điều đó dẫn đến điều hướng lên đầu trang. Nhiều người không nhận ra điều này vì họ đang kiểm tra mã của mình trên một trang rất nhỏ. Nếu mã của bạn chỉ dài một trang, thì “#” sẽ không có tác dụng gì cả

Nhưng “#” thực sự được sử dụng để chỉ định các vị trí trong một trang. Ví dụ: “#tos” có thể liên kết với tiêu đề “Điều khoản dịch vụ” của bạn hoặc “#xã hội” có thể liên kết với các liên kết mạng xã hội của bạn. Khi bạn có một dấu “#” trống, nó chỉ cho rằng bạn muốn lên đầu trang vì nó không thể tìm thấy bất kỳ tham chiếu rõ ràng nào khác

Thay vào đó, bạn nên tuyên bố rõ ràng, trong HREF, rằng tham chiếu HREF [trang để điều hướng đến] không tồn tại

Vì vậy, hiện tại bạn đang thực sự sử dụng JavaScript ở hai nơi. Bạn đang sử dụng nó trong HREF, cũng như trong hàm onClick

Trên đây là một ví dụ tốt hơn về lập trình. Nó cho liên kết biết rằng thẻ “HREF” hoàn toàn không có giá trị và nó không nên làm bất cứ điều gì. Nó cũng báo cho thẻ A rằng onClick nó sẽ chạy chức năng JavaScript

Trong lập trình, có rất nhiều giả định. Điều này đặc biệt đúng đối với các ngôn ngữ đánh dấu [HTML, CSS] và ngôn ngữ dựa trên web [JavaScript] không có trình biên dịch mà chỉ có trình thông dịch. Nói chung, điều đó càng được nêu rõ ràng thì càng tốt. Khi bạn không rõ ràng trong các tuyên bố của mình, nhiều khả năng bạn sẽ dẫn đến sự phức tạp hoặc hành vi thất thường trên các nền tảng khác

Sử dụng HREF trống trên thẻ A

Một điều khác mà chúng ta nên lưu ý là việc có thuộc tính HREF hoàn toàn không thực sự cần thiết. Bạn có thể tạo một liên kết đơn giản như

This is a link.

Liên kết này sẽ vẫn xuất hiện như một liên kết. Thành phần “a” bao gồm nhiều thứ và URL chỉ là một trong số đó. Một thẻ có hành động “onClick” và hành động “onHover”, bạn có thể sử dụng cả hai hành động này thông qua JavaScript và CSS

Tuy nhiên, điều này không khôn ngoan. Khi bạn có một thẻ HREF trống, nó thường tải lại trang, điều này có thể gây nhầm lẫn cho người dùng. Và nếu bạn tải lại trang trên một người dùng bất ngờ, luôn có khả năng bạn sẽ làm mất một số công việc của họ

May mắn thay, các phương pháp tương tự đã hoạt động ở trên sẽ hoạt động ở đây. Chúng ta có thể sử dụng hàm JavaScript để trả về “false. ” Trước đây, chúng tôi đã sử dụng “null. ” Nhưng chúng ta hãy xem xét một phương pháp khác. HREF JavaScript void 0

Điều này nói rõ ràng với trang web rằng nó không nên làm bất cứ điều gì. Bằng cách sử dụng tập lệnh A HREF JavaScript này, bạn loại bỏ khả năng bạn có thể làm mới trang với thuộc tính HREF trống

Các phương pháp gọi JavaScript khác

Tất nhiên, không phải lúc nào bạn cũng gọi mã JavaScript của mình từ một siêu liên kết

Một số phương pháp, ngoài tập lệnh A HREF JavaScript, mà bạn có thể sử dụng để gọi mã JavaScript trong trang HTML là gì?

Như đã đề cập, bạn luôn có thể sử dụng phương thức onClick

Ngoài ra còn có các sự kiện khác mà JavaScript có thể sử dụng

• Di chuột xuống. Đây là khi người dùng thực sự nhấn nút, chứ không phải khi người dùng thả nó ra
• Bay lượn. Đây là khi người dùng di chuyển con trỏ của họ qua một phần tử nhất định, thay vì nhấp vào phần tử đó
• MouseUp. Đây là khi người dùng nhả nút, sau khi đã nhấp vào nó.  

Điều quan trọng cần lưu ý là bạn có thể sử dụng nhiều sự kiện JavaScript nếu bạn không sử dụng HTML nội tuyến mà muốn đặt JavaScript vào các vị trí HTML SCRIPT và STYLE.  

Chẳng hạn, bạn có thể lắng nghe toàn bộ sự kiện OnMouseDown trong khu vực HEAD của mình, như vậy

window.AddEventListener[“mousedown”,My_Function[]];

Trình xử lý sự kiện có thể lắng nghe nhiều loại sự kiện, chẳng hạn như nhấn phím và cuộn

JavaScript cũng có thể tải trên các sự kiện cụ thể, chẳng hạn như khi trang tải lần đầu