Praktisk JavaSkriptexempel med källkod Code

By: James Hartman James Hartman
Hours Uppdaterad

⚡ Smart sammanfattning

Praktisk Code Exempel med JavaSkript demonstrerar hur loopar, formulärvalidering och händelser löser vardagliga webbläsaruppgifter. Den här artikeln presenterar en multiplikationstabellgenerator, en komplett valideringsmetod för registreringsformulär, en popup-meny som aktiveras genom att hålla muspekaren över, en digital klocka i realtid och de metoder som gör att sådana skript är tillförlitliga.

  • ✖️ Kapslade loopar: Multiplikationstabellen bygger en HTML-sträng med en yttre radslinga och en inre kolumnslinga.
  • 📝 Formulärvalidering: Parallella arrayer länkar varje indata till sin egen felbehållare, så meddelanden visas bredvid det fält som misslyckades.
  • 📧 E-postregel: Positionskontroller på at-tecknet och den sista punkten avvisar felaktigt utformade adresser innan de skickas.
  • 🖱️ Eventhantering: addEventListener kopplar beteende till ett element utan att placera skriptet inuti markupen.
  • ⏰ Tidsbegränsade uppdateringar: setInterval upprepar en funktion enligt ett fast schema, vilket driver exemplet med liveklocka.
  • 🔐 Serverregel: Klientsideskontroller förbättrar endast upplevelsen, och varje värde måste valideras igen på servern.
  • 🧹 Modern praxis: Ersätt document.write och implicit globals med textContent, let och const i den nya koden.
Läs mer

JavaSkriptexempel med källkod Code

Vad du kommer att bygga i dessa JavaExempel på skript

Varje exempel nedan är en komplett HTML-sida som körs i vilken webbläsare som helst utan ett byggsteg eller externt bibliotek. Tillsammans täcker de de tre färdigheter som förekommer i nästan alla webbläsarskript: generera markup från data, validera användarinmatning och reagera på händelser.

Exempelvis Koncept övat Viktiga metoder som använts
Multiplikationstabell Kapslade loopar och strängbyggande fråga, för, medan, dokument.skriv
Formvalidering Matriser, villkor och DOM-uppdateringar getElementById, indexOf, lastIndexOf, innerHTML
Popup-meddelande Eventhantering addEventListener, varning
Digital klocka Timrar och datumformatering setInterval, Date, padStart, textContent

Grundläggande förtrogenhet med JavaScript syntax antas. Om looparna fortfarande är okända, läs hur man använder loopar i JavaScript innan du startar.

Exempel #1: JavaScript multiplikationstabell

Skapa en enkel multiplikationstabell där användaren blir ombedd att ange antalet rader och kolumner.

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

Utdata (3 rader och 4 kolumner):

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

Code förklaring: Den yttre for-slingan skapar en tabellrad per iteration, medan den inre while-slingan fyller den raden med en cell per kolumn. Räknaren j återställs till 1 efter varje rad, vilket är det steg som de flesta nybörjare glömmer. Utan den återställningen skulle bara den första raden innehålla några celler.

💡 Tips: Promptfunktionen returnerar alltid en sträng. Uttrycket i*j fungerar eftersom JavaSkriptet konverterar båda operanderna till tal för multiplikation, men en jämförelse som rows > 5 skulle jämföra text. Radbryt inmatningen i Number() när värdet används för både aritmetik och jämförelse.

Exempel nr 2: Exempel på JS Forms

Skapa ett exempelformulärprogram som samlar in förnamn, efternamn, e-postadress, användar-ID, lösenord och bekräfta lösenord från användaren. Alla inmatningar är obligatoriska och den angivna e-postadressen ska vara i rätt format. Värdena som anges i textrutorna lösenord och bekräfta lösenord ska också vara desamma. Efter validering med JavaScript, visa korrekta felmeddelanden i rött precis bredvid textrutan där det finns ett fel.

Lösning med källa 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>

Förväntat beteende:

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 förklaring: Tre matriser körs parallellt. ingångar håller de aktuella värdena, fel innehåller matchande meddelanden, och divs innehåller ID:t för behållaren som visar varje meddelande. Indexet länkar därför ett fält, dess feltext och dess utdataplats. E-postgrenen accepterar endast en adress när at-tecknet inte är det första tecknet, och när minst två tecken skiljer at-tecknet från den sista punkten.

⚠️ Varning: Klientsidesvalidering förbättrar användarupplevelsen men ger ingen säkerhet. Vem som helst kan inaktivera JavaSkript eller post direkt till slutpunkten, så varje regel som visas här måste upprepas på servern.

RELATERADE ARTIKLAR

Exempel 3: POPUP-meddelande med hjälp av händelse

Visa ett enkelt meddelande "Välkommen!!!" på din demosida, och när användaren håller muspekaren över meddelandet bör ett popup-fönster visas med meddelandet "Välkommen till min webbsida!!!".

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

Förväntat beteende:

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

Code förklaring: Lyssnaren är kopplad inuti triggerfunktionen, som körs på body-onload-händelsen. Att vänta på load spelar roll, eftersom stycket med id:t "hover" inte existerar medan head-taggen fortfarande tolkas. Samma resultat uppnås tydligare genom att placera skriptet precis före den avslutande body-taggen, eller genom att lägga till defer-attributet.

Exempel nr 4: Live Digitalklocka med setInterval

Visa aktuell tid på sidan och uppdatera den en gång per sekund. Det här exemplet introducerar timers och visar det moderna alternativet till 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>

Förväntat beteende:

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

Genom att anropa showTime en gång före setInterval undviks en synlig fördröjning på en sekund när sidan öppnas. Använd clearInterval med värdet som returneras av setInterval när klockan behöver stoppas.

Bästa praxis för att skriva dessa JavaExempel på skript

De tre originalexemplen härstammar från en tidigare stil av JavaSkript. Listan nedan visar vad som ska ändras när man anpassar dem för produktionsarbete.

  1. Ersätt document.write: Den raderar hela dokumentet när det anropas efter att sidan har laddats. Bygg ett element och ange textContent eller lägg till en nod istället.
  2. Deklarera varje variabel: Använd let och const istället för att förlita sig på implicita globala värden som räknaren. i i slingorna ovanför.
  3. Föredrar textContent framför innerHTML: Att infoga användardefinierad text med innerHTML öppnar ett hål i skriptning över flera webbplatser.
  4. Flytta hanterare ut ur markupen: Ersätt attributen onkeyup och onclick med addEventListener, vilket håller beteendet separerat från strukturen.
  5. Konvertera promptinmatning: Radbryt värden i Number() innan de används i jämförelser, eftersom prompten alltid returnerar en sträng.
  6. Validera igen på servern: Behandla webbläsarkontroller endast som ett bekvämlighetslager.

För att ta dessa exempel vidare, granska JavaSkriptmatrismetoder för de parallella arrayerna som används i formvalideraren, JavaSkriptsträngar för kontroll av e-postpositionen, och kakor i JavaScript för att komma ihåg de värden som en besökare angav. Bestäm var det färdiga manuset hör hemma genom att läsa internt och externt JavaScript.

Vanliga frågor

Spara koden i en fil med filändelsen .html och öppna den i valfri webbläsare. Ingen server, kompilator eller bibliotek krävs för något av de fyra exemplen på den här sidan.

While-slingan stoppas när j passerar kolumnantalet. Utan att återställa j till 1 skulle varje rad efter den första inte producera några celler alls.

Nej. Det förbättrar bara upplevelsen genom att ge omedelbar feedback. En begäran kan kringgå webbläsaren helt, så servern måste tillämpa samma regler innan den lagrar något.

Mouseover aktiveras igen när pekaren flyttas till ett underordnat element, medan mouseenter aktiveras endast en gång för själva elementet. Välj mouseenter när upprepade utlösare är oönskade.

AI är användbart för ett första utkast, men genererad kod använder ofta innerHTML med oescaped inmatning. Läs varje rad och ersätt osäkra DOM-skrivningar innan publicering.

Ja, när du klistrar in det exakta konsolfelet bredvid koden. Tidsfel, som att ett skript körs innan elementet finns, är bland de enklaste för en assistent att identifiera.

Sammanfatta detta inlägg med: