JavaScript - Generisanje rezultata

Generisanje rezultata u JavaScript-u

Postoje određene situacije u kojima ćete možda trebati da generišete izlaz iz svog JavaScript koda. Na primjer, možda želite vidjeti vrijednost varijable ili napisati poruku na konzoli pretraživača kako biste pomogli da otklonite problem u vašem JavaScript kodu i tako dalje. U JavaScript postoji nekoliko različitih načina generisanja rezultata, uključujući pisanje rezultata u prozoru pretraživača ili na konzoli pretraživača, prikaz rezultata u dijaloškim okvirima, pisanje rezultata u HTML elementu itd. Mi ćemo detaljnije pogledati svaki od njih u nastavku lekcije.


Ispisivanje rezultata na konzoli pretraživača

Lako možete ispisati poruku ili upisati podatke na konzolu pretraživača pomoću metode console.log(). Ovo je jednostavna, ali vrlo moćna metoda za generisanje detaljnih rezultata. Pogledajmo primjer: 

// Prikazivanje jednostavne tekstualne poruke
console.log("Hello World!"); // Ispisuje: Hello World!

// Ispis vrijednosti varijable
var x = 10;
var y = 20;
var sum = x + y;
console.log(sum); // Ispisuje: 30
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pisanje rezultata na konzoli pretraživača u JavaScript</title>
</head>
<body>
    <script>
   // Prikazivanje jednostavne tekstualne poruke
    console.log("Hello World!"); // Ispisuje: Hello World!

    // Ispis vrijednosti varijable
    var x = 10;
    var y = 20;
    var sum = x + y;
    console.log(sum); // Ispisuje: 30
    </script>
</body>
</html>

Prikazivanje rezultata u dijaloškom okviru upozorenja

Takođe možete koristiti dijaloške okvire upozorenja da biste korisniku prikazali poruku ili izlazne podatke. Dijaloški okvir upozorenja kreira se pomoću metode alert(). Pogledajmo primer: 

// Prikazivanje jednostavne tekstualne poruke
alert("Hello World!"); // Ispisuje: Hello World!

// Ispis vrijednosti varijable
var x = 10;
var y = 20;
var sum = x + y;
alert(sum); // Ispisuje: 30
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Prikazivanje rezultata u dijaloškom okviru upozorenja u JavaScript</title>
</head>
<body>
    <script>
    // Prikazivanje jednostavne tekstualne poruke
    alert("Hello World!"); // Ispisuje: Hello World!

    // Ispis vrijednosti varijable
    var x = 10;
    var y = 20;
    var sum = x + y;
    alert(sum); // Ispisuje: 30
    </script>
</body>
</html>

Pisanje rezultata u prozoru pretraživača

Možete koristiti metodu document.write() za pisanje sadržaja u trenutni dokument samo dok je taj dokument analiziran. Pogledajmo primjer: 

// Prikazivanje jednostavne tekstualne poruke
document.write("Hello World!"); // Ispisuje: Hello World!

// Ispisivanje vrijednosti varijable
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // Ispisuje: 30
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Pisanje rezultata u prozoru pretraživača sa JavaScript</title>
</head>
<body>
    <script>
    // Prikazivanje jednostavne tekstualne poruke
    document.write("Hello World!"); // Ispisuje: Hello World!

    // Ispisivanje vrijednosti varijable
    var x = 10;
    var y = 20;
    var sum = x + y;
    document.write(sum); // Ispisuje: 30
    </script>
</body>
</html>

Ako nakon učitavanja stranice koristite metodu document.write(), prebrisaće sav postojeći sadržaj u tom dokumentu. Pogledajmo sljedeći primjer: 

<h1>Ovo je naslov</h1>
<p>Ovo je paragraf, sa nekim tekstom.</p>

<button type="button" onclick="document.write('Hello World!')">Click Me</button>

Ubacivanje izlaza unutar HTML elementa

Takođe možete napisati ili ubaciti izlaz unutar HTML elementa koristeći svojstvo elementa innerHTML. Međutim, prije pisanja izlaza prvo moramo odabrati element pomoću metode getElementById(), kao što je prikazano u sljedećem primjeru: 

<p id="greet"></p>
<p id="result"></p>

<script>
// Pisanje teksta unutar elementa
document.getElementById("greet").innerHTML = "Hello World!";

// Pisanje vrijednosti varijable unutar elementa
var x = 10;
var y = 20;
var sum = x + y;
document.getElementById("result").innerHTML = sum;
</script>
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Upisivanje unutar HTML elementa sa JavaScript</title>
</head>
<body>
    <p id="greet"></p>
    <p id="result"></p>

    <script>
    // Pisanje teksta unutar elementa
    document.getElementById("greet").innerHTML = "Hello World!";

    // Pisanje vrijednosti varijable unutar elementa
    var x = 10;
    var y = 20;
    var sum = x + y;
    document.getElementById("result").innerHTML = sum;
    </script>
</body>
</html>