Käytännön JavaSkriptiesimerkkejä lähdekoodin kanssa Code

by: James Hartman James Hartman
Hours Päivitetty

⚡ Älykäs yhteenveto

Käytännön Code Esimerkkejä, joissa käytetään JavaSkriptit osoittavat, kuinka silmukat, lomakkeiden validointi ja tapahtumat ratkaisevat selaimen jokapäiväisiä tehtäviä. Tässä artikkelissa esitellään kertotaulugeneraattori, täydellinen rekisteröintilomakkeen validointityökalu, hiirellä aktivoitava ponnahdusikkuna, reaaliaikainen digitaalinen kello ja käytännöt, jotka pitävät tällaiset skriptit luotettavina.

  • ✖️ Sisäkkäiset silmukat: Kertotaulukko muodostaa HTML-merkkijonon, jossa on ulompi rivisilmukka ja sisempi sarakesilmukka.
  • 📝 Lomakkeen validointi: Rinnakkaistaulukot linkittävät jokaisen syötteen omaan virhesäiliöön, joten viestit näkyvät epäonnistuneen kentän vieressä.
  • 📧 Sähköpostisääntö: AT-merkin ja viimeisen pisteen tarkistukset hylkäävät väärin muotoillut osoitteet ennen lähetystä.
  • 🖱️ Tapahtuman käsittely: addEventListener liittää elementtiin toiminnan sijoittamatta komentosarjaa koodin sisälle.
  • ⏰ Ajoitetut päivitykset: setInterval toistaa funktion kiinteän aikataulun mukaisesti, mikä ohjaa reaaliaikaista kelloa.
  • 🔐 Palvelinsääntö: Asiakaspuolen tarkistukset parantavat vain käyttökokemusta, ja jokainen arvo on validoitava uudelleen palvelimella.
  • 🧹 Nykyaikainen käytäntö: Korvaa document.write ja implisiittiset globaalit uudessa koodissa textContent-, let- ja const-muuttujalla.
Lue lisää

JavaSkriptiesimerkkejä lähdekoodin kanssa Code

Mitä näihin rakennat JavaSkriptiesimerkkejä

Jokainen alla oleva esimerkki on täydellinen HTML-sivu, joka toimii missä tahansa selaimessa ilman rakennusvaihetta tai ulkoista kirjastoa. Yhdessä ne kattavat kolme taitoa, jotka esiintyvät lähes jokaisessa selainskriptissä: merkintöjen luominen datasta, käyttäjän syötteen validointi ja tapahtumiin reagoiminen.

esimerkki Konsepti harjoiteltu Käytetyt keskeiset menetelmät
Kertotaulu Sisäkkäiset silmukat ja merkkijonojen rakentaminen kehote, for, while, document.write
Lomakkeen vahvistus Taulukot, ehdot ja DOM-päivitykset getElementById, indexOf, lastIndexOf, innerHTML
Ponnahdusviesti Tapahtuman käsittely addEventListener, hälytys
Digikello Ajastimet ja päivämäärän muotoilu setInterval, Date, padStart, textContent

Perustietoa JavaKäsikirjoitus syntaksi oletetaan. Jos silmukat ovat vielä vieraita, lue miten silmukoita käytetään JavaKäsikirjoitus ennen aloittamista.

Esimerkki 1: JavaScript kertolaskutaulukko

Luo yksinkertainen kertotaulu, jossa käyttäjältä kysytään rivien ja sarakkeiden lukumäärä.

Ratkaisu:

<html>
<head>
  <title>Multiplication Table</title>
  <script type="text/javascript">
    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols);
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0' cellpadding='5'>";
      for(i=1;i<=rows;i++)
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>";
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }
  </script>
</head>
<body>
</body>
</html>

Tuloste (3 riviä ja 4 saraketta):

1   2   3   4
2   4   6   8
3   6   9  12

Code selitys: Ulompi for-silmukka luo yhden taulukkorivin iteraatiota kohden, kun taas sisempi while-silmukka täyttää kyseisen rivin yhdellä solulla saraketta kohden. j nollataan arvoon 1 jokaisen rivin jälkeen, mikä on vaihe, jonka useimmat aloittelijat unohtavat. Ilman tätä nollausta vain ensimmäinen rivi sisältäisi soluja.

💡 Vinkki: Kehotefunktio palauttaa aina merkkijonon. Lauseke i*j toimii, koska JavaSkripti muuntaa molemmat operandit luvuiksi kertolaskua varten, mutta vertailu, kuten rows > 5 vertaisi tekstiä. Rivitä syöte sisään Number() kun arvoa käytetään sekä aritmetiikkaan että vertailuun.

Esimerkki 2: JS Forms -esimerkki

Luo esimerkkilomakeohjelma, joka kerää käyttäjältä etunimen, sukunimen, sähköpostiosoitteen, käyttäjätunnuksen, salasanan ja salasanan vahvistuksen. Kaikki tiedot ovat pakollisia ja sähköpostiosoitteen tulee olla oikeassa muodossa. Myös salasana- ja salasanan vahvistus -tekstiruutuihin syötettyjen arvojen tulee olla samat. Vahvistuksen jälkeen JavaKäsikirjoitus, näytä asianmukaiset virheilmoitukset punaisella juuri sen tekstiruudun vieressä, jossa virhe on.

Ratkaisu lähteellä Code:

<html>
<head>
  <title>Form Validation</title>
  <script type="text/javascript">
    var divs = new Array();
    divs[0] = "errFirst";
    divs[1] = "errLast";
    divs[2] = "errEmail";
    divs[3] = "errUid";
    divs[4] = "errPassword";
    divs[5] = "errConfirm";
    function validate()
	{
      var inputs = new Array();
      inputs[0] = document.getElementById('first').value;
      inputs[1] = document.getElementById('last').value;
      inputs[2] = document.getElementById('email').value;
      inputs[3] = document.getElementById('uid').value;
      inputs[4] = document.getElementById('password').value;
      inputs[5] = document.getElementById('confirm').value;
      var errors = new Array();
      errors[0] = "<span style='color:red'>Please enter your first name!</span>";
      errors[1] = "<span style='color:red'>Please enter your last name!</span>";
      errors[2] = "<span style='color:red'>Please enter your email!</span>";
      errors[3] = "<span style='color:red'>Please enter your user id!</span>";
      errors[4] = "<span style='color:red'>Please enter your password!</span>";
      errors[5] = "<span style='color:red'>Please confirm your password!</span>";
      for (i in inputs)
      {
        var errMessage = errors[i];
        var div = divs[i];
        if (inputs[i] == "")
        	document.getElementById(div).innerHTML = errMessage;
        else if (i==2)
        {
          var atpos=inputs[i].indexOf("@");
          var dotpos=inputs[i].lastIndexOf(".");
          if (atpos<1 || dotpos<atpos+2 || dotpos+2>=inputs[i].length)
        	document.getElementById('errEmail').innerHTML = "<span style='color: red'>Enter a valid email address!</span>";
          else
        	document.getElementById(div).innerHTML = "OK!";
        }
        else if (i==5)
        {
          var first = document.getElementById('password').value;
          var second = document.getElementById('confirm').value;
          if (second != first)
        	document.getElementById('errConfirm').innerHTML = "<span style='color: red'>Your passwords don't match!</span>";
          else
       		document.getElementById(div).innerHTML = "OK!";
        }
        else
        	document.getElementById(div).innerHTML = "OK!";
       }
     }
        function finalValidate()
        {
          var count = 0;
          for(i=0;i<6;i++)
          {
            var div = divs[i];
            if(document.getElementById(div).innerHTML == "OK!")
            count = count + 1;
          }
          if(count == 6)
          	document.getElementById("errFinal").innerHTML = "All the data you entered is correct!!!";
        }
   </script>
</head>
<body>
	<table id="table1">
      <tr>
        <td>First Name:</td>
        <td><input type="text" id="first" onkeyup="validate();" /></td>
        <td><div id="errFirst"></div></td>
      </tr>
      <tr>
        <td>Last Name:</td>
        <td><input type="text" id="last" onkeyup="validate();"/></td>
        <td><div id="errLast"></div></td>
      </tr>
      <tr>
        <td>Email:</td>
        <td><input type="text" id="email" onkeyup="validate();"/></td>
        <td><div id="errEmail"></div></td>
      </tr>
      <tr>
        <td>User Id:</td>
        <td><input type="text" id="uid" onkeyup="validate();"/></td>
        <td><div id="errUid"></div></td>
      </tr>
      <tr>
        <td>Password:</td>
        <td><input type="password" id="password" onkeyup="validate();"/></td>
        <td><div id="errPassword"></div></td>
      </tr>
      <tr>
        <td>Confirm Password:</td>
        <td><input type="password" id="confirm" onkeyup="validate();"/></td>
        <td><div id="errConfirm"></div></td>
      </tr>
      <tr>
        <td><input type="button" id="create" value="Create" onclick="validate();finalValidate();"/></td>
        <td><div id="errFinal"></div></td>
      </tr>
	</table>
</body>
</html>

Odotettu käyttäytyminen:

Empty first name        -> Please enter your first name!
Email "ann@site"        -> Enter a valid email address!
Email "ann@site.com"    -> OK!
Passwords differ        -> Your passwords don't match!
All six fields valid    -> All the data you entered is correct!!!

Code selitys: Kolme ryhmää kulkee rinnakkain. tuloa pitää nykyiset arvot, virheet sisältää vastaavat viestit ja divs sisältää sen säilön tunnuksen, joka näyttää kunkin viestin. Indeksi siis linkittää kentän, sen virhetekstin ja sen tulostussijainnin. Sähköpostihaara hyväksyy osoitteen vain, kun ät-merkki ei ole ensimmäinen merkki ja kun ät-merkin ja viimeisen pisteen välillä on vähintään kaksi merkkiä.

⚠️ Varoitus: Asiakaspuolen validointi parantaa käyttökokemusta, mutta ei tarjoa turvallisuutta. Kuka tahansa voi poistaa sen käytöstä. JavaSkriptaa tai lähetä suoraan päätepisteeseen, joten jokainen tässä näytetty sääntö on toistettava palvelimella.

AIHEESEEN LIITTYVÄT ARTIKKELIT

Esimerkki 3: Tapahtumaa käyttävä ponnahdusikkunaviesti

Näytä demosivullasi yksinkertainen viesti ”Tervetuloa!!!”, ja kun käyttäjä vie hiiren viestin päälle, näkyviin pitäisi avautua ponnahdusikkuna, jossa lukee ”Tervetuloa verkkosivulleni!!!”.

Ratkaisu:

<html>
    <head>
        <title>Event!!!</title>
        <script type="text/javascript">
            function trigger() {
                document.getElementById("hover").addEventListener("mouseover", popup);
                function popup() {
                    alert("Welcome to my WebPage!!!");
                }
            }
        </script>
        <style>
            p{
                font-size: 50px;
                position: fixed;
                left: 550px;
                top: 300px;
            }
        </style>
    </head>
    <body onload="trigger();">
        <p id="hover">Welcome!!!</p>
    </body>
</html>

Odotettu käyttäytyminen:

Page loads      -> the text "Welcome!!!" appears in large type
Mouse hovers    -> an alert box shows "Welcome to my WebPage!!!"

Code selitys: Kuuntelija on liitetty trigger-funktion sisään, joka suoritetaan body-tapahtuman "onload" yhteydessä. Latauksen odottaminen on tärkeää, koska kappaletta, jonka id on "hover", ei ole olemassa niin kauan kuin otsikkoa vielä jäsennetään. Sama tulos saavutetaan selkeämmin sijoittamalla komentosarja juuri ennen sulkevaa body-tagia tai lisäämällä defer-attribuutti.

Esimerkki 4: Live Digikello käyttäen setIntervalia

Näytä sivulla nykyinen aika ja päivitä se kerran sekunnissa. Tässä esimerkissä esitellään ajastimet ja moderni vaihtoehto document.write-funktiolle.

<html>
<head>
    <title>Digital Clock</title>
</head>
<body>
    <h2 id="clock">--:--:--</h2>

    <script>
        function showTime() {
            const now = new Date();
            const hh = String(now.getHours()).padStart(2, "0");
            const mm = String(now.getMinutes()).padStart(2, "0");
            const ss = String(now.getSeconds()).padStart(2, "0");

            // textContent is safer than innerHTML for plain text
            document.getElementById("clock").textContent = hh + ":" + mm + ":" + ss;
        }

        showTime();                 // draw immediately
        setInterval(showTime, 1000); // then refresh every second
    </script>
</body>
</html>

Odotettu käyttäytyminen:

09:05:07
09:05:08
09:05:09   (the heading updates in place once per second)

Kutsumalla showTime-funktiota kerran ennen setInterval-funktiota vältetään näkyvä yhden sekunnin viive sivun avautuessa. Käytä clearInterval-funktiota ja setInterval-funktion palauttamaa arvoa, kun kellon on pysäytettävä.

Parhaat käytännöt näiden kirjoittamiseen JavaSkriptiesimerkkejä

Kolme alkuperäistä esimerkkiä ovat peräisin aikaisemmasta tyylistä. JavaSkripti. Alla oleva luettelo näyttää, mitä muutoksia tehdään, kun niitä mukautetaan tuotantotyöhön.

  1. Korvaa document.write: Se poistaa koko dokumentin, kun sitä kutsutaan sivun latautumisen jälkeen. Luo elementti ja aseta textContent tai lisää solmu sen sijaan.
  2. Määrittele jokainen muuttuja: Käytä let- ja const-muuttujaa implisiittisten globaalien, kuten laskurin, sijaan i yllä olevissa silmukoissa.
  3. Suosi tekstisisältöä sisäisen HTML:n sijaan: Käyttäjän toimittaman tekstin lisääminen innerHTML:n avulla avaa sivustojenvälisen komentosarjojen suojausaukon.
  4. Siirrä käsittelijät pois merkinnästä: Korvaa onkeyup- ja onclick-attribuutit addEventListener-attribuutilla, joka pitää toiminnan erillään rakenteesta.
  5. Muunna kehotesyöttö: Rivitä arvot Number()-funktiossa ennen niiden käyttöä vertailuissa, koska kehote palauttaa aina merkkijonon.
  6. Vahvista uudelleen palvelimella: Käsittele selaintarkistuksia vain mukavuuskerroksena.

Jotta näitä esimerkkejä voitaisiin viedä pidemmälle, tarkastele JavaSkriptitaulukon menetelmät lomakevalidoijassa käytettyjen rinnakkaisten taulukoiden osalta JavaSkriptijonot sähköpostin sijaintitarkistuksiin ja evästeet JavaKäsikirjoitus muistaa kävijän syöttämät arvot. Päätä, mihin valmis skripti kuuluu, lukemalla sisäinen ja ulkoinen JavaKäsikirjoitus.

UKK

Tallenna koodi tiedostoon, jonka tiedostopääte on .html, ja avaa se millä tahansa selaimella. Tämän sivun neljä esimerkkiä eivät vaadi palvelinta, kääntäjää tai kirjastoa.

While-silmukka pysähtyy, kun j ohittaa sarakemäärän. Ilman j:n palauttamista arvoon 1, jokainen rivi ensimmäisen jälkeen ei tuottaisi soluja ollenkaan.

Ei. Se parantaa käyttökokemusta vain antamalla välitöntä palautetta. Pyyntö voi ohittaa selaimen kokonaan, joten palvelimen on sovellettava samoja sääntöjä ennen minkään tallentamista.

MouseOver-näppäin laukeaa uudelleen, kun osoitin siirtyy alielementin päälle, kun taas MouseEnter laukeaa vain kerran itse elementille. Valitse MouseEnter, kun toistuvat laukaisimet eivät ole toivottuja.

Tekoäly on hyödyllinen ensimmäisille luonnoksille, mutta luotu koodi käyttää usein innerHTML:ää ilman koodinvaihtomerkkiä. Lue jokainen rivi ja korvaa vaaralliset DOM-kirjoitukset ennen julkaisemista.

Kyllä, kun liität tarkan konsolivirheen koodin viereen. Ajoitusvirheet, kuten komentosarjan suorittaminen ennen elementin olemassaoloa, ovat avustajan helpoimmin tunnistettavia virheitä.

Tiivistä tämä viesti seuraavasti: