HREF JavaScript: Gọi các hàm JavaScript – truy cập thuộc tính href thuộc tính javascript

Để gọi một hàm JavaScript, bạn có thể sử dụng thuộc tính HREF của một Liên kết HTML, sử dụng HREF JavaScript. Hãy xem nó hoạt động như thế nào.

Bạn đang xem : truy cập thuộc tính href thuộc tính javascript

HREF JavaScript là một phương pháp để dễ dàng gọi một hàm JavaScript khi người dùng nhấp vào một liên kết trên một 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ì bạn có thể thấy chức năng này đang 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 liền mạch với HTML và CSS. Là một lập trình viên JavaScript, bạn có thể thường xuyên thấy mình đang xen mã JavaScript với mã HTML / CSS của mình.

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


Khóa học đào tạo Javascript hiện đại (2022)

4,8

< p class = "course-card__num_reviews"> (9,741)

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! | Bởi Colt Steele, Stephen Grider

Khám phá khóa học

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ẽ giống như sau:

  & lt; HTML & gt;
& lt; ĐẦU & gt;
& lt; SCRIPT & gt;
... mã JavaScript…
& lt; / SCRIPT & gt;
& lt; / ĐẦU & gt;
& lt; CƠ THỂ & gt;
...Nội dung trang web…
& lt; / CƠ THỂ & gt;
& lt; / HTML & gt;  

Ở trên vẫn là tất cả mã HTML. Bất kỳ thứ gì 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ó:

  & lt; button onClick = “javascript: JavaScript_Function ()” & gt;  

JavaScript mà bạn đã viết sẽ được xử lý khi người dùng “nhấp vào” nút. Bản thân JavaScript_Function () sẽ ở đầu trang (phần “HEAD”), nhưng nút sẽ ở giữa trang (phần “BODY”).

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 phần 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 các 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 siêu liên kết . Một siêu kết nối 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: 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:

  & lt; a href = “http://www.google.com” & gt; Tìm kiếm trên web của Google & lt; / a & gt;  

Trong phần trên, thẻ & lt; A & gt; thẻ là phần đầu của liên kết. Thuộc tính HREF là nơi liên kết đi đến. Và sau đó là & lt; / A & gt; đóng thẻ.

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:

  & lt; a href = ”javascript: JavaScript_Function ()” & gt; Nhấp vào & lt; / a & gt;  

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

Các nhà phát triển thường sử dụng liên kết “A” theo cách này vì nó rất dễ dàng. Đây 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 các liên kết và nhà phát triển không phải dò tìm bất kỳ hành động cụ thể nào từ người dùng.

Xem Thêm  Biểu thức và toán tử - JavaScript - nghĩa là gì trong js

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 được dùng nữa.

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

Bạn có thể sử dụng JavaScript HREF. Ở cấp độ thủ tục và máy tính, nó sẽ không gây ra bất kỳ vấn đề 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ỳ không được dùng nữa 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 – hơn 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, bạn đang sử dụng nó theo cách đi ngược lại với mục đích ban đầu của thuộc tính. Mặc dù nó hoạt động nhưng điều này khiến nó trở nên “lộn xộn” và không trực quan.

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

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

  & lt; a href = “#” onClick = ”javascript: JavaScript_Function ()” & gt;  

Trên thực tế, nếu bạn tra cứu HREF JavaScript ngay bây giờ, đó có thể 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 lý tưởng. HREF của bạn không được là “#” vì điều đó khiế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 thử nghiệm 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 đến tiêu đề “Điều khoản dịch vụ” của bạn hoặc “#social” có thể liên kết đến các liên kết truyền thông xã hội của bạn. Khi bạn có dấu “#” trống, nó chỉ giả sử 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:

  & lt; A HREF = “javascript: null” onClick = ”javascript: JavaScript_Function ()” & gt;  

Vì vậy, bạn thực sự đang sử dụng JavaScript ở hai nơi! Bạn đang sử dụng nó trong HREF, nhưng cũng trong chức năng 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ó sẽ không làm gì cả. Nó cũng cho thẻ A biết rằng onClick nó sẽ chạy chức năng JavaScript.

Trong lập trình, có rất nhiều điều được giả định. Điều này đặc biệt đúng đối với 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à là trình thông dịch. Nói chung, càng được nêu rõ ràng thì càng tốt. Khi tuyên bố của bạn không rõ ràng, nhiều khả năng bạn sẽ dẫn đến 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 tôi cần lưu ý là việc có toàn bộ thuộc tính HREF là không hoàn toàn cần thiết. Bạn có thể tạo một liên kết đơn giản như sau:

  & lt; a & gt; Đây là liên kết. & lt; / a & gt;  

Liên kết này sẽ vẫn xuất hiện giống 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ố chúng. 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ó 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ờ, bạn luôn có thể làm mất 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 một 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.

  & lt; A HREF = ”javascript: void (0)” & gt;  

Điều này cho trang web biết rõ ràng rằng trang web 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ể chỉ làm mới trang với thuộc tính HREF trống.

Xem Thêm  Cách xem bảng trong SQL Server - hiển thị bảng trong sql

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.

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

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

  & lt; A HREF = “javascript: javascript: void (0)” onClick = ”javascript: My_Function ()” & gt;  

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

  • MouseDown. Đây là lúc người dùng thực sự nhấn nút, chứ không phải khi người dùng nhả nút.
  • Di chuột. Đâ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 dòng mà đặt JavaScript trong các vị trí SCRIPT và STYLE của HTML.

Ví dụ: bạn có thể nghe toàn cầu sự kiện OnMouseDown trong khu vực HEAD của bạn, như vậy:

  window.AddEventListener (“mousedown”, My_Function ());  

Trình xử lý sự kiện có thể 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 ban đầu:

  OnLoad () {
... mã JavaScript…
}  

Bởi vì JavaScript, HTML và CSS đều là thủ tục, điều sẽ xảy ra là trình thông dịch (trình duyệt) đi qua từng dòng từng trang, bắt đầu từ trên cùng.

Tại sao bạn sử dụng JavaScript HREF?

Vì vậy, chúng tôi biết rằng JavaScript HREF không được dùng nữa. Nó vẫn là một lựa chọn nếu bạn đang phát triển, thử nghiệm sự phát triển của mình hoặc chỉ lập trình như một sở thích. Nó hoàn toàn hoạt động ở cấp độ kỹ thuật. Nhưng đó không phải là điều bạn muốn tạo thành thói quen. Bạn không muốn sử dụng HREF JavaScript nhiều lần như một phương thức gọi các hàm.

Ngoại lệ là bạn muốn sử dụng HREF JavaScript để trả về null hoặc trả về 0 trong trường hợp liên kết A không thực sự đi đến đâu. Đây là cách thích hợp nhất để đảm bảo rằng trình duyệt không cố tải lại trang hoặc di chuyển lên đầu trang bằng một liên kết A không có tham chiếu thích hợp.

Nếu bạn thực sự muốn tìm hiểu sâu về phát triển web, thì việc biết HTML, CSS và JavaScript (và cách chúng tương tác với nhau) là điều cần thiết. Bạn có thể tìm hiểu kiến ​​thức cơ bản về JavaScript, bao gồm cả cách gọi các hàm, trong Hướng dẫn JavaScript của chúng tôi.

Câu hỏi thường gặp:

HREF trong JavaScript là gì?

Trong JavaScript, bạn có thể gọi một hàm hoặc đoạn mã JavaScript thông qua thẻ HREF của một liên kết. Điều này có thể hữu ích vì nó có nghĩa là mã JavaScript đã cho sẽ tự động chạy cho ai đó nhấp vào liên kết. HREF đề cập đến thuộc tính “HREF” trong thẻ A LINK (siêu liên kết trong HTML).

Bạn có thể sử dụng JavaScript trong HREF không?

Trong thẻ A, bạn có thể gọi JavaScript thông qua phần HREF của thẻ. Bạn cũng có thể gọi JavaScript thông qua hàm onClick, hàm onHover hoặc các thuộc tính liên kết A khác. Ngoài ra, bạn có thể sử dụng JQuery. Sử dụng JavaScript trong các thuộc tính HREF rất dễ dàng, nhưng nó thường được coi là một chiến lược không được dùng nữa.

Điều gì xảy ra nếu HREF trống?

Nếu thuộc tính HREF trong liên kết A trống, thẻ A thường sẽ tải lại trang. Đây có thể là một vấn đề vì tải lại trang có thể làm mất dữ liệu người dùng. Có những lựa chọn thay thế. Sử dụng dấu # thay vì liên kết sẽ chuyển hướng người dùng đến đầu trang. Các tùy chọn khác là chức năng OnClick hoặc chức năng sự kiện JQuery.

Trang được cập nhật lần cuối:


Xem thêm những thông tin liên quan đến chủ đề truy cập thuộc tính href thuộc tính javascript

window location in JavaScript

  • Tác giả: kudvenkat
  • Ngày đăng: 2015-02-24
  • Đánh giá: 4 ⭐ ( 3117 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Link for all dot net and sql server video tutorial playlists
    http://www.youtube.com/user/kudvenkat/playlists

    Link for slides, code samples and text version of the video
    http://csharp-video-tutorials.blogspot.com/2015/02/windowlocation-in-javascript.html

    Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
    https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

    In this video we will discuss the use of Location object.

    The Window.location property returns a Location object that can be used to get information about the current page. Window.location property can also be used to redirect the browser to a new page.

    In Part 73 of JavaScript tutorial we discussed how to detect if JavaScript is enabled by using [noscript] element. Another way is by using window.location property. Let us use the example we worked with in Part 73. We will use window.location property along with [noscript] element to detect if JavaScript is enabled.

    Add a new HTML page to your project. Name it Default.htm. Copy and paste the following HTML and JavaScript.
    [html]
    [head]
    [script]
    // If JavaScript is enabled this code redirects the user to HTMLPag1.htm
    // If JavaScript is disable this code will not execute and the user reamains on this
    // page and he gets to the see the message that JavaScript is disabled.
    window.location = “/HTMLPage1.htm”;
    [/script]
    [/head]
    [body]
    [h1]It seems that you have disabled JavaScript. Please enable JavaScript.[/h1]
    [/body]
    [/html]

    We don’t need to make any modification to HTMLPage1.htm.

    At this point
    If you have JavaScript enabled, and if you visit Default.htm page, you will be redirected to HTMLPage1.htm
    If you have JavaScript disabled, and if you visit Default.htm page, you will reamin on Default.htm page and you will get to see the message that says JavaScript is disabled.

    window.location property is especially useful if you have 2 sites
    1. One for users with JavaScript
    2. Another for users without JavaScript

    Make the home-page of Non-JavaScript website the default page. In the default page include the following JavaScript code to redirect the user to the JavaScript-EnabledSite.com
    window.location = “http://www.JavaScript-EnabledSite.com”;

    If you have JavaScript enabled, you will be redirected to JavaScript enabled website.
    If you have JavaScript disabled, you will not be redirected and stay with the website which works without JavaScript.

    Some of the useful properties of the location object
    window.location.href – Returns the URL of the current page
    window.location.hostname – Returns the domain name
    window.location.protocol – Returns the protocol (http or https)
    window.location.pathname – Returns the path of the current page

    [script type=”text/javascript”]
    document.write(“window.location.href = ” + window.location.href + “[br/]”);
    document.write(“window.location.hostname = ” + window.location.hostname + “[br/]”);
    document.write(“window.location.pathname = ” + window.location.pathname + “[br/]”);
    document.write(“window.location.protocol = ” + window.location.protocol + “[br/]”);
    [/script]

    Output :
    window.location.href = http://localhost:57695/Default.htm
    window.location.hostname = localhost
    window.location.pathname = /Default.htm
    window.location.protocol = http:

Thuộc tính của đối tượng trong JavaScript

  • Tác giả: laptrinhtudau.com
  • Đánh giá: 5 ⭐ ( 8772 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thuộc tính của đối tượng trong JavaScript – Lập Trình Từ Đầu 2 Đối Tượng Trong JavaScript

Cập nhật thuộc tính phần tử Dom – JavaScript

  • Tác giả: blog.codegym.vn
  • Đánh giá: 3 ⭐ ( 2531 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng JavaScript trên website: Mà Google mong muốn!

  • Tác giả: hoaidoan.vn
  • Đánh giá: 4 ⭐ ( 7225 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngoài ra, ban cũng có thể thêm JavaScript vào một liên kết, cho phép bạn nâng cấp chức năng của nó. Một ví dụ về điều này là khi người dùng nhấp vào menu

Làm cách nào để thêm thuộc tính “href” vào liên kết động bằng JavaScript?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 5492 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] var a = document.getElementById(‘yourlinkId’); //or grab it by tagname etc a.href = “somelink url”

[Tự học Javascript] Attributes(Đặc tính) and properties(thuộc tính) của DOM trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 9758 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Khi trình duyệt tải trang, trình duyệt sẽ “đọc” (một từ khác: “phân tích cú pháp”) HTML và tạo các đối tượng DOM từ đó. Đối với các nút phần tử, hầu hết các thuộc tính HTML tiêu chuẩn tự động trở thành thuộc tính của các đối tượng DOM. Hôm nay cafedev chia sẻ cho ace về các thuộc tính và đặc tính của chúng.

Truy cập và lấy thuộc tính của object trong javascript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 6842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách truy cập và lấy thuộc tính của object javascript. Bạn sẽ học được các phương pháp cơ bản để truy cập và lấy thuộc tính của object trong JavaScript sau bài học này.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Thuộc tính C # (GET, SET) - lấy và đặt c #