Praktiline JavaSkriptinäited koos lähtekoodiga Code

Mida te nendes ehitate JavaSkriptinäited

Iga allolev näide on täielik HTML-leht, mis töötab mis tahes brauseris ilma ehitusetapi või välise teegita. Koos hõlmavad need kolme oskust, mis esinevad peaaegu igas brauseri skriptis: andmetest märgistuse genereerimine, kasutaja sisendi valideerimine ja sündmustele reageerimine.

Põhiteadmised JavaScript süntaks eeldatakse. Kui tsüklid on ikka veel võõrad, lugege kuidas tsükleid kasutada JavaScript enne alustamist.

Näide nr 1: JavaSkripti korrutustabel

Loo lihtne korrutustabel, kus küsitakse kasutajalt ridade ja veergude arvu.

Lahendus:

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

Väljund (3 rida ja 4 veergu):

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

Code selgitus: Välimine for-tsükkel loob iga iteratsiooni kohta ühe tabelirea, sisemine while-tsükkel aga täidab selle rea ühe lahtriga veeru kohta. j lähtestatakse pärast iga rida väärtusele 1, mis on samm, mille enamik algajaid unustab. Ilma selle lähtestamiseta sisaldaks lahtreid ainult esimene rida.

Näide nr 2: JS Formsi näide

Loo näidisvormiprogramm, mis kogub kasutajalt eesnime, perekonnanime, e-posti aadressi, kasutajatunnuse, parooli ja parooli kinnituse. Kõik sisendid on kohustuslikud ja sisestatud e-posti aadress peaks olema õiges vormingus. Samuti peaksid parooli ja parooli kinnituse tekstikastidesse sisestatud väärtused olema samad. Pärast valideerimist, kasutades JavaScript, kuvavad veateateid punasega otse tekstikasti kõrval, kus on viga.

Lahendus koos allikaga 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>

Oodatav käitumine:

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 selgitus: Kolm massiivi jooksevad paralleelselt. sisendite hoiab praeguseid väärtusi, vigu sisaldab vastavaid sõnumeid ja divs sisaldab iga sõnumit kuvava konteineri ID-d. Seega seob indeks välja, selle veateksti ja väljundi asukoha. E-posti haru aktsepteerib aadressi ainult siis, kui „ät”-märk ei ole esimene märk ja kui „ät”-märki ja viimast punkti eraldab vähemalt kaks märki.

Näide nr 3: Hüpikteade sündmuse abil

Kuva oma demolehel lihtne sõnum „Tere tulemast!!!“ ja kui kasutaja viib kursorit sõnumi kohale, peaks ilmuma hüpikaken sõnumiga „Tere tulemast minu veebilehele!!!“.

Lahendus:

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

Oodatav käitumine:

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

Code selgitus: Kuulaja on lisatud päästikfunktsiooni sisse, mis käivitatakse sisuteksti laadimise sündmuse korral. Laadimise ootamine on oluline, sest lõik ID-ga „hover” ei eksisteeri, kui päist veel parsitakse. Sama tulemuse saab selgemini, kui paigutada skript vahetult enne sulgevat sisuteksti silti või lisada atribuudi „defer”.

Näide nr 4: Otseülekanne Digital Clock, kasutades setInterval

Kuva lehel praegust kellaaega ja värskenda seda iga sekundi tagant. See näide tutvustab taimereid ja näitab document.write'i moodsat alternatiivi.

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

Oodatav käitumine:

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

Funktsiooni showTime üks kord kutsumine enne funktsiooni setInterval vältib nähtavat ühesekundilist viivitust lehe avamisel. Funktsiooni clearInterval tagastatud väärtusega saab kasutada siis, kui kellaaeg on vaja peatada.

Parimad tavad nende kirjutamiseks JavaSkriptinäited

Kolm originaalnäidet pärinevad varasemast stiilist. JavaSkript. Allolev loend näitab, mida muuta nende tootmistööks kohandamisel.

1. Asenda document.write: See kustutab kogu dokumendi, kui seda pärast lehe laadimist kutsutakse. Loo element ja määra sellele textContent või lisa selle asemel sõlm.
2. Deklareeri iga muutuja: Kasutage pigem let ja const funktsioone kui implitsiitseid globaale, näiteks counter'it. i ülaltoodud silmustes.
3. Eelista tekstisisu sisemisele HTML-ile: Kasutaja antud teksti sisestamine innerHTML-iga avab saitidevahelise skriptimise augu.
4. Teisalda käitlejad märgistusest välja: Asendage atribuudid onkeyup ja onclick atribuudiga addEventListener, mis hoiab käitumise struktuurist eraldi.
5. Teisenda viipa sisend: Murra väärtused funktsioonis Number() enne võrdlustes kasutamist, kuna viip tagastab alati stringi.
6. Kinnitage serveris uuesti: Käsitle brauserikontrolle ainult mugavuskihina.

Nende näidete edasiseks käsitlemiseks vaadake üle JavaSkriptimassiivi meetodid vormivalidaatoris kasutatavate paralleelsete massiivide puhul JavaSkriptistringid e-posti positsioonikontrollide jaoks ja küpsised sees JavaScript külastaja sisestatud väärtuste meeldejätmiseks. Otsustage, kuhu valmis skript kuulub, lugedes sisemine ja väline JavaScript.

KKK