Praktičan JavaPrimjeri skripti s izvornim kodom Code
James Hartman
⚡ Pametni sažetak
Praktičan Code Primjeri korištenja JavaSkripta pokazuje kako petlje, validacija obrazaca i događaji rješavaju svakodnevne zadatke preglednika. Ovaj članak predstavlja generator tablice množenja, potpuni validator obrazaca za registraciju, skočni prozor koji se aktivira zadržavanjem miša, digitalni sat uživo i prakse koje održavaju pouzdanost takvih skripti.
Što ćete ugraditi u ovo JavaPrimjeri skripti
Svaki primjer u nastavku je kompletna HTML stranica koja se pokreće u bilo kojem pregledniku bez koraka izgradnje ili vanjske biblioteke. Zajedno pokrivaju tri vještine koje se pojavljuju u gotovo svakom skriptu preglednika: generiranje oznaka iz podataka, provjeru korisničkog unosa i reagiranje na događaje.
| Primjer | Koncept u praksi | Ključne korištene metode |
|---|---|---|
| Tablica množenja | Ugniježđene petlje i izgradnja stringova | upit, za, dok, document.write |
| Validacija obrasca | Nizovi, uvjeti i ažuriranja DOM-a | getElementById, indexOf, lastIndexOf, innerHTML |
| Skočna poruka | Rukovanje događajima | addEventListener, upozorenje |
| Digisat | Tajmeri i formatiranje datuma | setInterval, Datum, padStart, textContent |
Osnovno poznavanje JavaScript sintaksa se pretpostavlja. Ako su petlje još uvijek nepoznate, pročitajte kako koristiti petlje u JavaScript prije početka.
Primjer br. 1: JavaTablica množenja skripte
Napravite jednostavnu tablicu množenja koja od korisnika traži broj redaka i stupaca.
Rješenje:
<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>
Izlaz (3 retka i 4 stupca):
1 2 3 4 2 4 6 8 3 6 9 12
Code obrazloženje: Vanjska for petlja stvara jedan redak tablice po iteraciji, dok unutarnja while petlja ispunjava taj redak s jednom ćelijom po stupcu. Brojač j se resetira na 1 nakon svakog retka, što je korak koji većina početnika zaboravi. Bez tog resetiranja, samo bi prvi redak sadržavao ćelije.
💡 Savjet: Funkcija prompta uvijek vraća niz znakova. Izraz i*j radi jer JavaSkripta pretvara oba operanda u brojeve za množenje, ali usporedba kao što je rows > 5 bi usporedio tekst. Zamotaj unos u Number() kada se vrijednost koristi podjednako za aritmetiku i usporedbu.
Primjer br. 2: Primjer JS obrazaca
Izradite primjer programa obrasca koji prikuplja ime, prezime, e-poštu, korisnički ID, lozinku i potvrdu lozinke od korisnika. Svi unosi su obavezni, a unesena adresa e-pošte treba biti u ispravnom formatu. Također, vrijednosti unesene u tekstualna polja za lozinku i potvrdu lozinke trebaju biti iste. Nakon validacije pomoću JavaScript, prikažite odgovarajuće poruke o pogrešci crvenom bojom odmah pored tekstnog okvira u kojem postoji greška.
Rješenje s izvorom 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>
Očekivano ponašanje:
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 obrazloženje: Tri niza rade paralelno. ulazi drži trenutne vrijednosti, pogreške sadrži odgovarajuće poruke i DIV sadrži ID spremnika koji prikazuje svaku poruku. Indeks stoga povezuje polje, njegov tekst pogreške i njegovu izlaznu lokaciju. Grana e-pošte prihvaća adresu samo kada znak at nije prvi znak i kada barem dva znaka odvajaju znak at od završne točke.
⚠️ Upozorenje: Validacija na strani klijenta poboljšava korisničko iskustvo, ali ne pruža sigurnost. Svatko je može onemogućiti. JavaSkriptirajte ili pošaljite izravno na krajnju točku, tako da se svako ovdje prikazano pravilo mora ponoviti na poslužitelju.
Primjer br. 3: Skočna poruka pomoću događaja
Na svojoj demo web stranici prikažite jednostavnu poruku „Dobrodošli!!!“, a kada korisnik zadrži pokazivač miša iznad poruke, trebao bi se prikazati skočni prozor s porukom „Dobrodošli na moju web stranicu!!!“.
Rješenje:
<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>
Očekivano ponašanje:
Page loads -> the text "Welcome!!!" appears in large type Mouse hovers -> an alert box shows "Welcome to my WebPage!!!"
Code obrazloženje: Slušač je pričvršćen unutar okidačke funkcije koja se izvršava na događaju u tijelu nastavka. Čekanje učitavanja je važno jer odlomak s ID-om "hover" ne postoji dok se zaglavlje još uvijek parsira. Isti rezultat se postiže čišće postavljanjem skripte neposredno prije oznake tijela nastavka ili dodavanjem atributa defer.
Primjer br. 4: Uživo Digitalni sat pomoću setInterval
Prikažite trenutno vrijeme na stranici i osvježite je jednom svake sekunde. Ovaj primjer uvodi timere i pokazuje modernu alternativu za 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>
Očekivano ponašanje:
09:05:07 09:05:08 09:05:09 (the heading updates in place once per second)
Pozivanjem showTime jednom prije setInterval izbjegava se vidljivo kašnjenje od jedne sekunde prilikom otvaranja stranice. Koristite clearInterval s vrijednošću koju vraća setInterval kada sat treba stati.
Najbolje prakse za pisanje ovih JavaPrimjeri skripti
Tri originalna primjerka datiraju iz ranijeg stila JavaScenarij. Donji popis prikazuje što treba promijeniti prilikom prilagodbe za produkcijski rad.
- Zamijeni document.write: Briše cijeli dokument kada se pozove nakon što se stranica učita. Izgradite element i postavite textContent ili umjesto toga dodajte čvor.
- Deklarirajte svaku varijablu: Koristite let i const umjesto oslanjanja na implicitne globalne promjenjive kao što je counter
iu gornjim petljama. - Preferiraj textContent u odnosu na innerHTML: Umetanje teksta koji je korisnik naveo pomoću innerHTML-a otvara rupu u cross-site scriptingu.
- Premjestite rukovatelje izvan oznake: Zamijenite atribute onkeyup i onclick s addEventListener, koji odvaja ponašanje od strukture.
- Pretvori unos u upitnik: Vrijednosti se prebace u Number() prije korištenja u usporedbama, budući da prompt uvijek vraća niz znakova.
- Ponovno provjerite na poslužitelju: Provjere preglednika tretirajte samo kao dodatni sloj za pogodnost.
Za daljnje objašnjenje ovih primjera, pregledajte JavaMetode niza skripti za paralelne nizove korištene u validatoru obrazaca, JavaNizovi skripte za provjeru pozicije putem e-pošte i kolačići u JavaScript zapamtiti vrijednosti koje je posjetitelj unio. Odlučite gdje pripada gotovi scenarij čitajući unutarnje i vanjsko JavaScript.
