Ovo je najjednostavniji mogući primer „živog“ koda.
Klikneš nešto — i dobiješ reakciju.
Bez instalacija, bez alata, bez magije. Samo jasno pravilo: ako se nešto desi, uradi se nešto drugo.
Prvi mini-projekat koji reaguje na tebe
U prvom tekstu videli smo da kodiranje nije ništa misteriozno.
Sada idemo korak dalje – ne da bismo „učili jezik“, već da bismo videli kako kod razmišlja.
Ideja je jednostavna: klikneš nešto i dobiješ reakciju.
To je osnova svake aplikacije, bez obzira koliko komplikovano delovala.
Šta zapravo radimo
Ne pravimo sajt.
Ne pravimo aplikaciju.
Pravimo razgovor između tebe i računara.
Ti kažeš: klik.
Računar odgovori: poruka.
Sve ostalo su detalji.
HTML: kako računar vidi stranicu
HTML ne „radi“ ništa.
On samo kaže šta postoji na ekranu.
Kada napišeš:
<button id="dugme">Klikni me</button>
<p id="poruka"></p>
ti računaru objašnjavaš sledeće:
Ovde postoji dugme.
I ovde postoji mesto gde će se nešto pojaviti.
U ovom trenutku, dugme je mrtvo.
Ne reaguje, ne misli, samo postoji.
I to je normalno.
JavaScript: trenutak kada se stvari pokrenu
JavaScript je deo koji donosi ponašanje.
Ovaj kod:
<script>
document.getElementById("dugme").onclick = function () {
document.getElementById("poruka").innerText = "Zdravo, svete!";
};
</script>
nije magija, iako tako izgleda.
On u stvari kaže: Nađi dugme. Sačekaj da ga neko klikne.
Kada se to desi, upiši tekst u ono prazno mesto.
To je sve.
Nema trikova.
Nema skrivenih procesa.
Samo jasno pravilo: ako se desi ovo – uradi ono.
Kako da ovo isprobaš (bez ikakvog alata)
Ovo nije projekat za „instaliranje“. Dovoljno je da otvoriš običan tekst fajl na računaru, ubaciš kod i sačuvaš ga kao index.html. Kada ga otvoriš dvoklikom, videćeš dugme na ekranu. Klikneš ga – i dobiješ reakciju. Ako se to desilo, upravo si napravio svoj prvi mali program.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Moj prvi mini-projekat</title>
</head>
<body>
<button id="dugme">Klikni me</button>
<p id="poruka"></p>
<script>
document.getElementById("dugme").onclick = function () {
document.getElementById("poruka").innerText = "Zdravo, svete!";
};
</script>
</body>
</html>
Zašto je ovo važnije nego što izgleda
U ovom malom primeru već postoji:
uzrok i posledica
logika „ako / onda“
reakcija na korisnika
I to je srž programiranja.
Sutra to nije dugme i poruka.
Sutra je formular, igra, aplikacija, sistem.
Ali princip je isti.
Ako razumeš, možeš da menjaš.
Probaj da promeniš tekst poruke, napišeš svoje ime.
Zamisli šta bi se desilo da poruka bude drugačija.
Ne moraš znati sve komande.
