Objašnjenje koda:
<!DOCTYPE html>
<html lang="hr">
<!DOCTYPE html>: Deklarira dokument kao HTML5.
<html lang="hr">: Postavlja jezik dokumenta na hrvatski.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Skraćivanje IPv6 adrese</title>
<meta charset="UTF-8">: Definira kodnu stranicu kao UTF-8, što omogućava prikazivanje svih Unicode znakova.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Omogućava responzivni dizajn prilagođavanjem širine prikaza uređaju.
<title>Skraćivanje IPv6 adrese</title>: Postavlja naslov stranice.
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
input, button {
padding: 10px;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
Unutar <style> elementa definirani su CSS stilovi:
body: Postavlja font i marginu za tijelo dokumenta.
.container: Centriranje i postavljanje maksimalne širine za glavni kontejner.
input, button: Stilizacija za input polje i gumb, uključujući padding, marginu, širinu i box-sizing.
button: Specifične stilizacije za gumb, uključujući boju pozadine, boju teksta, obrub i kursor.
button:hover: Promjena boje pozadine na hover.
.result: Stil za prikaz rezultata, uključujući marginu i podebljani tekst.
<body>
<div class="container">
<h1>Skraćivanje IPv6 adrese</h1>
<input type="text" id="ipv6" placeholder="Unesite IPv6 adresu (maksimalni oblik)">
<button onclick="skracivanje()">Skrati IPv6 adresu</button>
<div class="result" id="result"></div>
</div>
<div class="container">: Glavni kontejner koji drži sve elemente stranice.
<h1>Skraćivanje IPv6 adrese</h1>: Naslov stranice.
<input type="text" id="ipv6" placeholder="Unesite IPv6 adresu (maksimalni oblik)">: Input polje za unos IPv6 adrese s placeholder tekstom.
<button onclick="skracivanje()">Skrati IPv6 adresu</button>: Gumb koji poziva JavaScript funkciju skracivanje() kada se klikne.
<div class="result" id="result"></div>: Prazan div koji će prikazati skraćenu IPv6 adresu.
<div class="container">: Glavni kontejner koji drži sve elemente stranice.
<h1>Skraćivanje IPv6 adrese</h1>: Naslov stranice.
<input type="text" id="ipv6" placeholder="Unesite IPv6 adresu (maksimalni oblik)">: Input polje za unos IPv6 adrese s placeholder tekstom.
<button onclick="skracivanje()">Skrati IPv6 adresu</button>: Gumb koji poziva JavaScript funkciju skracivanje() kada se klikne.
<div class="result" id="result"></div>: Prazan div koji će prikazati skraćenu IPv6 adresu.
<script>
function skracivanje() {
let ipv6 = document.getElementById('ipv6').value.trim();
let skraćenaAdresa = skratiIPv6(ipv6);
document.getElementById('result').innerText = skraćenaAdresa;
}
<script>: Ovdje počinje sekcija za JavaScript.
function skracivanje(): Definira funkciju skracivanje koja se poziva kada se klikne na gumb.
let ipv6 = document.getElementById('ipv6').value.trim();: Dohvaća vrijednost iz input polja i uklanja eventualne vodeće i završne razmake.
let skraćenaAdresa = skratiIPv6(ipv6);: Poziva funkciju skratiIPv6 s unesenom IPv6 adresom i sprema rezultat.
document.getElementById('result').innerText = skraćenaAdresa;: Prikazuje skraćenu adresu u result divu.
function skratiIPv6(ipv6) {
ipv6 = ipv6.toLowerCase();
ipv6 = ipv6.split(':').map(segment => segment.replace(/^0+/, '') || '0').join(':');
function skratiIPv6(ipv6): Definira funkciju koja skraćuje IPv6 adresu.
ipv6 = ipv6.toLowerCase();: Pretvara IPv6 adresu u mala slova.
ipv6 = ipv6.split(':').map(segment => segment.replace(/^0+/, '') || '0').join(':');: Dijeli adresu na segmente, uklanja vodeće nule iz svakog segmenta, zamjenjuje prazne segmente s '0' i ponovo spaja segmente.
let najduziNiz = ipv6.match(/(:0){2,}/g);
if (najduziNiz) {
let najduziSegment = najduziNiz.sort((a, b) => b.length - a.length)[0];
ipv6 = ipv6.replace(najduziSegment, '::');
}
ipv6 = ipv6.replace(/:{3,}/g, '::');
let najduziNiz = ipv6.match(/(:0){2,}/g);: Traži najduži niz uzastopnih "0" segmenata.
if (najduziNiz): Ako postoji takav niz:
let najduziSegment = najduziNiz.sort((a, b) => b.length - a.length)[0];: Pronalaženje najdužeg segmenta.
ipv6 = ipv6.replace(najduziSegment, '::');: Zamjena najdužeg segmenta s "::".
ipv6 = ipv6.replace(/:{3,}/g, '::');: Zamjena višestrukih dvotočaka s "::".
return ipv6;
}
</script>
</body>
</html>
return ipv6;: Vraća skraćenu IPv6 adresu.
</script>: Kraj JavaScript sekcije.
</body>: Kraj tijela dokumenta.
</html>: Kraj HTML dokumenta.
Kompletan kod:
<!DOCTYPE html>
<html lang="hr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skraćivanje IPv6 adrese</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
}
input, button {
padding: 10px;
margin: 10px 0;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Skraćivanje IPv6 adrese</h1>
<input type="text" id="ipv6" placeholder="Unesite IPv6 adresu (maksimalni oblik)">
<button onclick="skracivanje()">Skrati IPv6 adresu</button>
<div class="result" id="result"></div>
</div>
<script>
function skracivanje() {
let ipv6 = document.getElementById('ipv6').value.trim();
let skraćenaAdresa = skratiIPv6(ipv6);
document.getElementById('result').innerText = skraćenaAdresa;
}
function skratiIPv6(ipv6) {
ipv6 = ipv6.toLowerCase();
ipv6 = ipv6.split(':').map(segment => segment.replace(/^0+/, '') || '0').join(':');
let najduziNiz = ipv6.match(/(:0){2,}/g);
if (najduziNiz) {
let najduziSegment = najduziNiz.sort((a, b) => b.length - a.length)[0];
ipv6 = ipv6.replace(najduziSegment, '::');
}
ipv6 = ipv6.replace(/:{3,}/g, '::');
return ipv6;
}
</script>
</body>
</html>