Web programiranje → HTML, CSS i JavaScript → JavaScript: prvi koraci

JavaScript: prvi koraci

Gde se piše i pokreće JavaScript

<p>Otvori F12 → Console pa klikni dugme.</p>
<button onclick="console.log('Zdravo iz konzole!'); this.textContent = 'Kliknuto!';">Klikni</button>
<p id="izlaz"></p>
<script>
  // ispis na stranicu
  document.getElementById("izlaz").textContent = "2 + 3 = " + (2 + 3);
</script>

Rezultat:

console.log(...) je kao cout / print – ispisuje u konzolu. Tu se vide i greške u kodu (crveno).

Promenljive i tipovi

let ime = "Ana";          // tekst (string)
let razred = 7;           // broj (number) – nema posebnih int i double
let prosek = 4.75;
let takmicar = true;      // logička vrednost (boolean)
const PI = 3.14159;       // konstanta – ne može da se promeni

razred = razred + 1;      // let može da se menja
console.log(ime, razred); // Ana 8
console.log(typeof prosek);                    // "number"
console.log(`${ime} ide u ${razred}. razred`);  // šablon string sa ` (backtick)

Grananje i petlje

let bodovi = 72;
if (bodovi >= 90) {
  console.log("odlično");
} else if (bodovi >= 60) {
  console.log("prošao/la");
} else {
  console.log("vežbaj još");
}

// for petlja – ista kao u C++
let zbir = 0;
for (let i = 1; i <= 10; i++) {
  zbir += i;
}
console.log("zbir 1..10 =", zbir);    // 55

// while
let n = 1234, cifre = 0;
while (n > 0) {
  n = Math.floor(n / 10);
  cifre++;
}
console.log("broj cifara:", cifre);   // 4

Logički operatori su kao u C++: && (i), || (ili), ! (ne).

Nizovi i objekti

let ocene = [5, 4, 5, 3];
ocene.push(5);                          // dodaj na kraj
console.log(ocene.length);              // 5
console.log(ocene[0]);                  // 5 – indeksi od 0

for (const o of ocene) {                // prolaz kroz sve elemente
  console.log(o);
}

// korisne metode nizova
let dvojke = ocene.map(o => o * 2);           // [10, 8, 10, 6, 10]
let petice = ocene.filter(o => o === 5);      // [5, 5, 5]
let suma = ocene.reduce((s, o) => s + o, 0);  // 22
ocene.sort((a, b) => a - b);                  // sortiranje brojeva rastuće

// objekat: grupa podataka pod imenima (kao struct / rečnik)
let ucenik = { ime: "Ana", razred: 7, ocene: [5, 4, 5] };
console.log(ucenik.ime);                // Ana
ucenik.grad = "Pančevo";                // novo svojstvo

Pazi: [10, 9, 1].sort() daje [1, 10, 9], jer bez funkcije poredi kao tekst. Za brojeve uvek piši sort((a, b) => a - b).

Funkcije

function povrsinaPravougaonika(a, b) {
  return a * b;
}

// isto, kraći zapis – "streličasta" funkcija
const kvadrat = x => x * x;

function prost(n) {
  if (n < 2) return false;
  for (let d = 2; d * d <= n; d++) {
    if (n % d === 0) return false;
  }
  return true;
}

console.log(povrsinaPravougaonika(3, 4));   // 12
console.log(kvadrat(9));                    // 81
let prosti = [];
for (let i = 1; i <= 30; i++) if (prost(i)) prosti.push(i);
console.log(prosti.join(" "));              // 2 3 5 7 11 13 17 19 23 29

Funkcija prost je ista kao u lekcijama iz C++-a – algoritmi se ne menjaju, samo zapis. Funkcije su u JavaScript-u posebno važne jer se pozivaju kao odgovor na događaje (klik, unos) – tema sledeće lekcije.

Zadaci za vežbu

Za svaki zadatak postoji primer, uputstvo i rešenje. Rešenja su provereno ispravna u pregledaču.

Proveri znanje