Praktisk JavaScripteksempler med kildekode Code

Af: James Hartman James Hartman
Hours Opdateret

⚡ Smart opsummering

Praktisk Code Eksempler ved brug af JavaScriptet demonstrerer, hvordan løkker, formularvalidering og hændelser løser hverdagens browseropgaver. Denne artikel præsenterer en multiplikationstabelgenerator, en komplet registreringsformularvalidering, en popup-popup, der udløses ved at holde musen over den, et live digitalt ur og de fremgangsmåder, der sikrer, at sådanne scripts er pålidelige.

  • ✖️ Indlejrede løkker: Multiplikationstabellen opbygger en HTML-streng med en ydre rækkeløkke og en indre kolonneløkke.
  • 📝 Formularvalidering: Parallelle arrays forbinder hvert input til sin egen fejlcontainer, så der vises meddelelser ved siden af ​​det felt, der mislykkedes.
  • 📧 E-mail-regel: Positionstjek på at-tegnet og det sidste punktum afviser forkert udformede adresser før indsendelse.
  • 🖱️ Begivenhedshåndtering: addEventListener tillægger adfærd til et element uden at placere scriptet inde i markup'en.
  • ⏰ Tidsbestemte opdateringer: setInterval gentager en funktion efter en fast tidsplan, hvilket driver eksemplet med live-uret.
  • 🔐 Serverregel: Klientsidekontroller forbedrer kun oplevelsen, og hver værdi skal valideres igen på serveren.
  • 🧹 Moderne praksis: Erstat document.write og implicitte globaler med textContent, let og const i den nye kode.
Læs mere

JavaScripteksempler med kildekode Code

Hvad du vil bygge i disse JavaScripteksempler

Hvert eksempel nedenfor er en komplet HTML-side, der kører i enhver browser uden et byggetrin eller et eksternt bibliotek. Sammen dækker de de tre færdigheder, der optræder i næsten alle browserscripts: generering af markup fra data, validering af brugerinput og reaktion på hændelser.

Eksempel Koncept øvet Nøglemetoder anvendt
Multiplikationstabel Indlejrede løkker og strengopbygning prompt, for, mens, dokument.skriv
Formularvalidering Arrays, betingelser og DOM-opdateringer getElementById, indexOf, lastIndexOf, innerHTML
Popup-besked Begivenhedshåndtering addEventListener, alarm
Digital ur Timere og datoformatering setInterval, Date, padStart, textContent

Grundlæggende kendskab til JavaScript syntaks antages. Hvis løkker stadig ikke er kendte, læs hvordan man bruger løkker i JavaScript før start.

Eksempel #1: JavaScript multiplikationstabel

Lav en simpel multiplikationstabel, hvor brugeren bliver bedt om antallet af rækker og kolonner.

Opløsning:

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

Output (3 rækker og 4 kolonner):

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

Code forklaring: Den ydre for-løkke opretter én tabelrække pr. iteration, mens den indre while-løkke udfylder rækken med én celle pr. kolonne. Tælleren j nulstilles til 1 efter hver række, hvilket er det trin, de fleste begyndere glemmer. Uden denne nulstilling ville kun den første række indeholde celler.

💡 Tip: Promptfunktionen returnerer altid en streng. Udtrykket i*j virker fordi JavaScriptet konverterer begge operander til tal til multiplikation, men en sammenligning som f.eks. rows > 5 ville sammenligne tekst. Ombryd inputtet i Number() når værdien bruges til både aritmetik og sammenligning.

Eksempel nr. 2: Eksempel på JS Forms

Opret et eksempel på et formularprogram, der indsamler fornavn, efternavn, e-mail, bruger-id, adgangskode og bekræftelse af adgangskode fra brugeren. Alle input er obligatoriske, og den indtastede e-mailadresse skal være i det korrekte format. De indtastede værdier i tekstfelterne "adgangskode" og "bekræft adgangskode" skal også være de samme. Efter validering ved hjælp af JavaScript, vis korrekte fejlmeddelelser med rødt lige ved siden af ​​den tekstboks, hvor der er en fejl.

Løsning med kilde 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>

Forventet adfærd:

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 forklaring: Tre arrays kører parallelt. indgange holder de nuværende værdier, fejl indeholder de matchende beskeder, og divs indeholder id'et for den container, der viser hver besked. Indekset linker derfor et felt, dets fejltekst og dets outputplacering. E-mail-grenen accepterer kun en adresse, når at-tegnet ikke er det første tegn, og når mindst to tegn adskiller at-tegnet fra det sidste punktum.

⚠️ Advarsel: Klientsidevalidering forbedrer brugeroplevelsen, men giver ingen sikkerhed. Alle kan deaktivere JavaScript eller post direkte til slutpunktet, så alle regler vist her skal gentages på serveren.

RELATEREDE ARTIKLER

Eksempel nr. 3: POPUP-besked ved hjælp af hændelse

Vis en simpel besked "Velkommen!!!" på din demo-webside, og når brugeren holder musen over beskeden, bør der vises en pop op-vindue med beskeden "Velkommen til min webside!!!".

Opløsning:

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

Forventet adfærd:

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

Code forklaring: Lytteren er tilknyttet triggerfunktionen, som kører på body-onload-hændelsen. Det er vigtigt at vente på load, fordi afsnittet med id'et "hover" ikke findes, mens head-koden stadig parses. Det samme resultat opnås mere overskueligt ved at placere scriptet lige før det afsluttende body-tag eller ved at tilføje defer-attributten.

Eksempel nr. 4: Live Digital Clock ved hjælp af setInterval

Vis det aktuelle klokkeslæt på siden, og opdater det hvert sekund. Dette eksempel introducerer timere og viser det moderne alternativ til document.write.

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

Forventet adfærd:

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

Hvis showTime kaldes én gang før setInterval, undgås en synlig forsinkelse på et sekund, når siden åbnes. Brug clearInterval med den værdi, der returneres af setInterval, når uret skal stoppes.

De bedste øvelser til at skrive disse JavaScripteksempler

De tre originale eksemplarer stammer fra en tidligere stil JavaScript. Listen nedenfor viser, hvad der skal ændres, når de tilpasses til produktionsarbejde.

  1. Erstat document.write: Den sletter hele dokumentet, når det kaldes, efter at siden er indlæst. Byg et element og angiv textContent, eller tilføj en node i stedet.
  2. Deklarér hver variabel: Brug let og const i stedet for at stole på implicitte globaler såsom tælleren i i løkkerne ovenfor.
  3. Foretrækker tekstindhold frem for indreHTML: Indsættelse af brugerleveret tekst med innerHTML åbner et hul i cross-site scripting.
  4. Flyt handlere ud af markup'en: Erstat attributterne onkeyup og onclick med addEventListener, som holder adfærd adskilt fra struktur.
  5. Konverter promptinput: Ombryd værdier i Number(), før de bruges i sammenligninger, da prompt altid returnerer en streng.
  6. Valider igen på serveren: Behandl kun browsertjek som et bekvemmelighedslag.

For at tage disse eksempler videre, gennemgå JavaScript array-metoder for de parallelle arrays, der bruges i formvalidatoren, JavaScriptstrenge til kontrol af e-mailpositioner, og småkager i JavaScript at huske de værdier, en besøgende har indtastet. Bestem, hvor det færdige script hører hjemme ved at læse det. interne og eksterne JavaScript.

Ofte Stillede Spørgsmål

Gem koden i en fil med filendelsen .html, og åbn den i enhver browser. Der kræves ingen server, compiler eller bibliotek for nogen af ​​de fire eksempler på denne side.

While-løkken stopper, når j passerer kolonneantallet. Uden at nulstille j til 1, ville hver række efter den første slet ikke producere nogen celler.

Nej. Det forbedrer kun oplevelsen ved at give øjeblikkelig feedback. En anmodning kan omgå browseren fuldstændigt, så serveren skal anvende de samme regler, før der gemmes noget.

Mouseover aktiveres igen, når markøren bevæger sig hen på et underelement, mens mouseenter kun aktiveres én gang for selve elementet. Vælg mouseenter, når gentagne udløsere er uønskede.

AI er nyttig til et første udkast, men genereret kode bruger ofte innerHTML med unescaped input. Læs hver linje og erstat usikre DOM-skrivninger før publicering.

Ja, når du indsætter den nøjagtige konsolfejl ved siden af ​​koden. Timingfejl, såsom et script der kører før elementet findes, er blandt de nemmeste for en assistent at identificere.

Opsummer dette indlæg med: