JScript Katana

Mis on “javascript:void(0)”? Täielik juhend tähenduse, kasutamise ja parimate tavade kohta

Muu utiliitfunktsioonid
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Sissejuhatus – Mis on “javascript:void(0)”?

JavaScripti õppimisel võid koodis kokku puutuda märgendiga “javascript:void(0)”. Esialgu võib see olla raske mõista. Kuid see on üks kasulikke tehnikaid lehe käitumise kontrollimiseks ja sündmuste haldamiseks.
See artikkel selgitab selgelt “javascript:void(0)” tähendust, eesmärki ja kasutamist. Samuti käsitletakse olulisi ettevaatusabinõusid ja kaasaegseid alternatiive.

1-1. Levinud küsimus: Mida tähendab “javascript:void(0)”?

“javascript:void(0)” on märge, mida kasutatakse linkide või nuppude vaikimisi käitumise vältimiseks ning selle asemel kohandatud JavaScripti käivitamiseks.
Tavaliselt suunab HTML <a> element klõpsamisel sihtlehele. Kuid kui soovid, et link käituks nagu nupp ilma kuhugi navigeerimata, on “javascript:void(0)” kasulik.
Näide:

<a href="javascript:void(0);">Click</a>

Selle lingi klõpsamine ei tee midagi iseenesest. Saad selle asemel lisada oma JavaScripti sündmuse käitlemise.

1-2. Lugejate väljakutsed ja artikli eesmärk

Kohandatud sündmuste lisamisel veebilehtedele on palju viise linkide ja nuppude kontrollimiseks. Kuid “javascript:void(0)” võib algajatele segadust tekitada ning valesti kasutades mõjutada SEO-d või ligipääsetavust.
See artikkel käsitleb järgmisi teemasid, et saaksid seda õigesti mõista ja kasutada:

  1. “javascript:void(0)” põhimõte ja rakendamine
  2. Ettevaatusabinõud ja puudused
  3. Turvalisemad ja kaasaegsed alternatiivid

Selle teadmisega suudad luua kaasaegsemaid ja tõhusamaid veebirakendusi.

2. “javascript:void(0)” põhimõte

“javascript:void(0)” on JavaScripti avaldis, mida kasutatakse peamiselt linkide või nuppude vaikimisi käitumise keelamiseks. See jaotis selgitab, kuidas void operaator töötab ja mida “void(0)” tegelikult tähendab.

2-1. Mida tähendab “void” operaator

JavaScriptis tagastab “void” operaator mitte midagi (undefined).
Tavaliselt tagastavad JavaScripti avaldised väärtuse, kuid “void” sunnib tulemuseks olema undefined. Seda kasutatakse peamiselt hindamise tulemuse eiramiseks, samal ajal kõrvaltoimeid teostades.
Lihtne näide:

console.log(void(0)); // Output: undefined

See kinnitab, et void(0) tagastab undefined.

2-2. Mida “void(0)” esindab

“void(0)” tähendab “ära midagi ära teha”. See hindab undefined, vältides lehe navigeerimist, võimaldades samal ajal sinu kohandatud klõpsukäitumist.
Näide:

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

See link ei navigeeri, kuid käivitab teavituse.

2-3. Miks kasutatakse “javascript:void(0)”

Peamised põhjused on:

  1. Linki navigeerimise keelamine Vältida lehe uuesti laadimist, samal ajal kohandatud klõpsusündmusi käsitledes.
  2. Kasutamine surnud lingina Kasulik arenduse käigus kohatäitjana.
  3. Lihtne ja kerge rakendada Algajatele sõbralik süntaks.

3. Kasutusnäited ja rakendamine

See jaotis selgitab “javascript:void(0)” kasutusnäiteid reaalses maailmas, alates põhilistest koodijuppidest kuni rakendatud stsenaariumiteni.

3-1. Põhiline koodinäide

<a href="javascript:void(0);">Link</a>

See link ei tee midagi klõpsamisel.

3-2. Klõpsusündmuste kohandamine

Näide 1: Teavituse näitamine

<a href="javascript:void(0);" onclick="alert('Clicked!');">Click</a>

3-3. Stsenaariumipõhine näide

Modaalakna käivitamine
HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

document.getElementById('openModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  document.getElementById('modal').style.display = 'none';
});

4. Eelised ja puudused – Kas peaksid seda tõesti kasutama?

“javascript:void(0)” on laialdaselt kasutusel, kuid sellel on mõned puudused. See jaotis selgitab nii eeliseid kui ka ettevaatusabinõusid.

4-1. Eelised

  1. Väldib vaikimisi navigeerimist
  2. Lihtne ja intuitiivne süntaks
  3. Kasulik kohatäite linkide jaoks

4-2. Puudused

  1. SEO mõju Otsingumootorid ei saa href sisu indekseerida.
  2. Juurdepääsetavuse probleemid Ekraanilugejad ja klaviatuuriga navigeerimine ei pruugi korralikult toimida.

4-3. Millal kasutada ja millal vältida

Soovitatavad kasutusjuhtumid:

  • Käitub nagu nupp, kuid on teostatud lingina
  • Ajutised tühjad lingid

Väldi, kui:

  • Vajate SEO-sõbralikke linke
  • Juurdepääsetavus on oluline

5. Alternatiivid ja kaasaegsed parimad praktikad

Kuigi “javascript:void(0)” on mugav, on olemas kaasaegsemad ja turvalisemad lähenemised.

5-1. event.preventDefault() kasutamine

Kontseptsioon
See meetod tühistab vaikimisi käitumise, nagu lingi navigeerimine või vormi esitamine.

Näide
HTML:

<a href="#" id="customLink">Link</a>

JavaScript:

document.getElementById('customLink').addEventListener('click', function(event) {
  event.preventDefault();
  alert('Custom event executed!');
});

5-2. <button> elemendi kasutamine

HTML5 soovitab kasutada <button> elemente, kui soovitakse rakendada nuppude sarnast käitumist.
HTML:

<button id="actionButton">Click</button>

JavaScript:

document.getElementById('actionButton').addEventListener('click', function() {
  alert('Button clicked!');
});

5-3. Juurdepääsetav ja SEO-sõbralik näide

HTML:

<a href="#" id="accessibleLink" tabindex="0">Click</a>

JavaScript:

document.getElementById('accessibleLink').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    alert('Executed with Enter key!');
  }
});

6. Näite kood kasutusjuhtumi järgi

6-1. Navigeerimismenüü loomine

HTML:

<a href="javascript:void(0);" id="menuToggle">Menu</a>
<ul id="menu" style="display: none;">
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

JavaScript:

document.getElementById('menuToggle').addEventListener('click', function() {
  const menu = document.getElementById('menu');
  menu.style.display = (menu.style.display === 'none') ? 'block' : 'none';
});

6-2. Modaalakna käivitaja

HTML:

<a href="javascript:void(0);" id="openModal">Open Modal</a>
<div id="modal" style="display:none; background:rgba(0,0,0,0.5); padding:20px;">
  <p>This is a modal window.</p>
  <button id="closeModal">Close</button>
</div>

JavaScript:

const modal = document.getElementById('modal');
document.getElementById('openModal').addEventListener('click', function() {
  modal.style.display = 'block';
});
document.getElementById('closeModal').addEventListener('click', function() {
  modal.style.display = 'none';
});

7. Kokkuvõte – “javascript:void(0)” kasutamine ja tulevikuvalikud

7-1. Peamised õppetunnid

  1. Põhikontseptsioon : Keela vaikimisi lingi käitumine ja käivita kohandatud loogika.
  2. Ettevaatusabinõud ja alternatiivid : Kasuta SEO ja juurdepääsetavuse jaoks event.preventDefault() või <button>.
  3. Praktilised näited : Navigeerimismenüüd, modaalakna käivitajad ja muud.

7-2. Soovitused kaasaegseks arenduseks

Kuigi “javascript:void(0)” on endiselt kasutusel, seab kaasaegne arendus esikohale SEO ja kasutatavuse.
Soovitatav lähenemine:

  • Kasuta “javascript:void(0)” kiirete prototüüpide või väga väikeste projektide jaoks.
  • Kasuta tootmiskeskkondades event.preventDefault() või <button>.

7-3. Lõppsõna

Kasutades siin tutvustatud tehnikaid, rakenda kood, mis arvestab nii SEO-d kui ka kasutajakogemust.

広告