Gyakorlati JavaSzkriptpéldák forráskóddal Code

By: James Hartman James Hartman
Hours korszerűsített

⚡ Okos összefoglaló

Gyakorlati Code Példák a következő használatával: JavaSzkriptek bemutatják, hogyan oldják meg a ciklusok, az űrlap-érvényesítés és az események a mindennapi böngészőfeladatokat. Ez a cikk bemutat egy szorzótábla-generátort, egy teljes regisztrációs űrlap-érvényesítőt, egy egérrel aktivált felugró ablakot, egy élő digitális órát, valamint azokat a gyakorlatokat, amelyek biztosítják az ilyen szkriptek megbízhatóságát.

  • ✖️ Beágyazott ciklusok: A szorzótábla egy HTML karakterláncot épít fel egy külső sorhurokkal és egy belső oszlophurokkal.
  • 📝 Űrlapérvényesítés: A párhuzamos tömbök minden bemenetet a saját hibatárolójához kapcsolnak, így az üzenetek a hibás mező mellett jelennek meg.
  • ???? E-mail szabály: A kukac jel és az utolsó pont pozícióellenőrzései a beküldés előtt elutasítják a hibásan formázott címeket.
  • 🖱️ Rendezvénykezelés: Az addEventListener viselkedést rendel egy elemhez anélkül, hogy szkriptet helyezne a jelölésen belül.
  • ⏰ Időzített frissítések: A setInterval függvény fix ütemezés szerint ismétli a függvényt, ami az élő óra példáját vezérli.
  • 🔐 Szerver szabály: Az ügyféloldali ellenőrzések csak a felhasználói élményt javítják, és minden értéket újra kell validálni a szerveren.
  • 🧹 Modern gyakorlat: Cseréld le a document.write és az implicit globális változókat textContent, let és const változókra az új kódban.
További információk

JavaSzkriptpéldák forráskóddal Code

Mit fogsz ezekbe építeni JavaSzkriptpéldák

Az alábbi példák mindegyike egy teljes HTML-oldal, amely bármilyen böngészőben fut build lépés vagy külső könyvtár nélkül. Együttesen lefedik azt a három készséget, amelyek szinte minden böngészőszkriptben megjelennek: jelölés generálása adatokból, felhasználói bevitel validálása és eseményekre való reagálás.

Példa Gyakorolt ​​koncepció Főbb alkalmazott módszerek
Szorzótábla Beágyazott hurkok és húrépítés prompt, for, while, document.write
Űrlapérvényesítés Tömbök, feltételek és DOM-frissítések getElementById, indexOf, lastIndexOf, innerHTML
Felugró üzenet Rendezvénykezelés addEventListener, riasztás
Digimagas óra Időzítők és dátumformázás setInterval, Date, padStart, textContent

Alapvető ismeretek JavaForgatókönyv szintaxist feltételezünk. Ha a ciklusok még mindig ismeretlenek, olvassa el hogyan kell ciklusokat használni JavaForgatókönyv kezdés előtt.

1. példa: JavaSzkript szorzótábla

Készíts egy egyszerű szorzótáblát, amelyben a felhasználótól kéred meg a sorok és oszlopok számát.

Megoldás:

<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>

Kimenet (3 sor és 4 oszlop):

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

Code magyarázat: A külső for ciklus iterációnként egy táblázatsort hoz létre, míg a belső while ciklus oszloponként egy cellával tölti fel ezt a sort. j minden sor után 1-re áll vissza, ami az a lépés, amit a legtöbb kezdő elfelejt. Enélkül az alaphelyzetbe állítás nélkül csak az első sor tartalmazna cellákat.

💡 Tipp: A prompt függvény mindig egy karakterláncot ad vissza. A kifejezés i*j működik, mert JavaA szkript mindkét operandust számmá alakítja szorzáshoz, de egy összehasonlítás, például rows > 5 összehasonlítaná a szöveget. A bemenetet körbefutja Number() amikor az értéket aritmetikai és összehasonlítási célokra egyaránt használják.

2. példa: JS Forms példa

Készítsen egy minta űrlapprogramot, amely begyűjti a felhasználó keresztnevét, vezetéknevét, e-mail címét, felhasználói azonosítóját, jelszavát és jelszavának megerősítését. Minden adat megadása kötelező, és a megadott e-mail címnek a megfelelő formátumban kell lennie. A jelszó és a jelszó megerősítése szövegmezőkben megadott értékeknek is meg kell egyezniük. Az érvényesítés után a következővel: JavaForgatókönyv, a megfelelő hibaüzeneteket pirossal jelenítse meg közvetlenül a szövegmező mellett, ahol a hiba található.

Megoldás forrással 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>

Várható viselkedés:

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 magyarázat: Három tömb fut párhuzamosan. bemenet tartja az aktuális értékeket, hibákat tartalmazza az egyező üzeneteket, és divs az egyes üzeneteket megjelenítő konténer azonosítóját tartalmazza. Az index tehát összekapcsol egy mezőt, annak hibaüzenetét és a kimeneti helyét. Az e-mail ág csak akkor fogad el címet, ha a kukac jel nem az első karakter, és ha legalább két karakter választja el a kukac jelet az utolsó ponttól.

⚠️ Figyelmeztetés: A kliensoldali validáció javítja a felhasználói élményt, de nem nyújt biztonságot. Bárki letilthatja. JavaSzkripteljen vagy küldjön közvetlenül a végpontra, így minden itt látható szabályt meg kell ismételni a szerveren.

KAPCSOLÓDÓ CIKKEK

3. példa: Felugró üzenet esemény használatával

Jeleníts meg egy egyszerű „Üdvözöljük!!!” üzenetet a demó weboldaladon, és amikor a felhasználó az üzenet fölé viszi az egeret, egy felugró ablaknak kell megjelennie az „Üdvözöljük a weboldalamon!!!” üzenettel.

Megoldás:

<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>

Várható viselkedés:

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

Code magyarázat: A figyelő a trigger függvényen belül van csatolva, amely a törzs betöltési eseményére fut. A betöltésre való várakozás azért fontos, mert a „hover” azonosítójú bekezdés nem létezik, amíg a fejléc elemzése folyamatban van. Ugyanez az eredmény érhető el tisztábban, ha a szkriptet közvetlenül a záró törzscímke elé helyezzük, vagy ha hozzáadjuk a defer attribútumot.

4. példa: Élő Digital óra a setInterval használatával

Jelenítse meg az aktuális időt az oldalon, és frissítse másodpercenként. Ez a példa bemutatja az időzítőket, és a document.write modern alternatíváját.

<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>

Várható viselkedés:

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

A showTime függvény egyszeri meghívása a setInterval függvény előtt elkerüli a látható egy másodperces késleltetést az oldal megnyitásakor. Használd a clearInterval függvényt a setInterval által visszaadott értékkel, ha az órát meg kell állítani.

Bevált gyakorlatok ezek írásához JavaSzkriptpéldák

A három eredeti példa egy korábbi stílusból származik. JavaSzkript. Az alábbi lista bemutatja, hogy mit kell megváltoztatni, ha éles munkához adaptáljuk őket.

  1. Cserélje le a document.write fájlt: A teljes dokumentumot törli, ha az oldal betöltése után hívják meg. Hozz létre egy elemet és állítsd be a textContent értéket, vagy fűzz hozzá egy csomópontot.
  2. Deklaráljuk az összes változót: Használj let és const függvényeket implicit globális függvények, például a counter helyett. i a fenti hurkokban.
  3. A textContent előnyben részesítése az innerHTML helyett: A felhasználó által megadott szöveg innerHTML-lel történő beszúrása egy cross-site scripting lyukat nyit.
  4. Kezelők áthelyezése a jelölésen kívülre: Cserélje le az onkeyup és onclick attribútumokat az addEventListener értékre, amely a viselkedést elkülöníti a struktúrától.
  5. Prompt bemenet konvertálása: A Number() függvény összehasonlításokban való felhasználása előtt tördelje az értékeket, mivel a prompt mindig karakterláncot ad vissza.
  6. Ellenőrizd újra a szerveren: A böngészőellenőrzéseket csak kényelmi rétegként kezelje.

A példák további elemzéséhez tekintse át JavaSzkript tömbmetódusok az űrlap-érvényesítőben használt párhuzamos tömbök esetében, JavaSzkriptkarakterláncok az e-mail pozícióellenőrzésekhez, és sütik a JavaForgatókönyv hogy emlékezzen a látogató által megadott értékekre. A kész szkript helye a szöveg elolvasásával eldönthető. belső és külső JavaForgatókönyv.

GYIK

Mentsd el a kódot egy .html kiterjesztésű fájlba, és nyisd meg bármilyen böngészőben. Az ezen az oldalon található négy példa egyikéhez sem szükséges szerver, fordító vagy függvénykönyvtár.

A while ciklus leáll, amint j eléri az oszlopok számát. Ha j nem állítaná vissza 1-re, az első sor utáni összes sor nem eredményezne cellákat.

Nem. Csak az azonnali visszajelzéssel javítja a felhasználói élményt. Egy kérés teljesen megkerülheti a böngészőt, így a szervernek ugyanazokat a szabályokat kell alkalmaznia, mielőtt bármit is tárolna.

A MouseOver billentyű ismét aktiválódik, amikor a mutató egy gyermekelemre mutat, míg a MouseEnter billentyű csak egyszer aktiválódik magánál az elemnél. Válassza a MouseEnter billentyűt, ha az ismételt aktiválások nem szükségesek.

A mesterséges intelligencia hasznos az első vázlatok elkészítéséhez, de a generált kód gyakran használ innerHTML-t escape-karakter nélküli bemenettel. Olvass el minden sort, és cseréld ki a nem biztonságos DOM-bejegyzéseket közzététel előtt.

Igen, amikor a pontos konzolhibát beilleszti a kód mellé. Az időzítési hibák, például egy szkript lefutása az elem létezése előtt, a legkönnyebben azonosíthatók egy asszisztens számára.

Foglald össze ezt a bejegyzést a következőképpen: