⚡ JavaScript Ievads

JavaScript (JS) ir programmēšanas valoda, kas padara tīmekļa lapas interaktīvas. Tā darbojas tieši pārlūkprogrammā — servera daļas nav vajadzīgs.

javascript

Kas ir JavaScript?

	HTML	CSS	JavaScript
Loma	Struktūra	Izskats	Uzvedība
Piemērs	Poga eksistē	Poga ir zila	Poga kaut ko dara

ℹ️ JavaScript ≠ Java

Java un JavaScript ir pilnīgi atšķirīgas valodas, kurām nav gandrīz nekādu sakaru, neskatoties uz līdzīgo nosaukumu.

<script> pieslēgšana

✅ Labākā prakse

Izmantojiet <script defer> taga iekšā <head>, vai novietojiet <script> pirms </body>. Tas nodrošina, ka HTML ir ielādēts pirms skripts tiek izpildīts.

Teksts

<!-- 1) Iekšējais skripts – HTML failā -->
<body>
  <button onclick="sveicināt()">Klikšķis</button>

  <script>
    function sveicināt() {
      alert("Sveika pasaule!");
    }
  </script>
</body>

<!-- 2) Ārējais skripts – ieteicamākais variants -->
<head>
  <!-- ar defer: skripts tiek ielādēts, HTML parsēšana turpinās -->
  <script src="js/galvenais.js" defer></script>
</head>
<body>
  ...
</body>

<!-- 3) Skripta novietojums pirms </body> – klasiskais veids -->
<body>
  ...
  <script src="js/galvenais.js"></script>
</body>

console.log() – izstrādātāja labākais draugs

ℹ️ Kā atvērt konsoli

Nospiediet F12 vai Ctrl+Shift+J (Chrome/Edge) →; cilne "Console". Visas console.log() izvades redzamas tur.

Teksts

// Konsoliznešana – parāda informāciju pārlūka konsolē
console.log("Sveika pasaule!");            // Parast teksts
console.log(42, true, [1, 2, 3]);           // Vairāki mainīgie
console.log("Summa:", 5 + 3);              // Apraksts + vērtība

// Citi konsoles veidi:
console.warn("Brīdinājums!");              // Dzeltens
console.error("Kļūda!");                   // Sarkans
console.info("Informācija");               // Zils
console.table([{v: "Anna"}, {v: "Jānis"}]);// Tabula

// Grupēšana
console.group("Lietotāja dati");
console.log("Vārds: Anna");
console.log("Vecums: 28");
console.groupEnd();

// Laika mērīšana
console.time("operācija");
let summa = 0;
for (let i = 0; i < 1000000; i++) summa += i;
console.timeEnd("operācija"); // operācija: 12.345ms

Dialogi: alert, confirm, prompt

⚠️ Dialogi realitātē

Dialogi alert(), confirm(), prompt() bloķē visu pārlūku un izskatās nemoderni. Reālos projektos izmanto modālus logus ar HTML/CSS/JS.

Teksts

// alert() – rāda ziņu (nevar izlaist, bloķē lapu)
alert("Sveicināti mājaslapā!");

// confirm() – jā/nē jautājums, atgriež true/false
const atbilde = confirm("Vai jūs esat pilngadīgs?");
if (atbilde) {
    console.log("Sveicināti!");
} else {
    console.log("Drīkstēsiet, kad būsiet 18.");
}

// prompt() – pieprasa ievadi, atgriež virkni vai null
const vārds = prompt("Kā tevi sauc?", "Anna"); // 2. params = noklusējums
if (vārds !== null && vārds.trim() !== "") {
    alert("Sveici, " + vārds + "!");
} else {
    alert("Jūs nenorādījāt vārdu.");
}

Komentāri

Teksts

// Vienas rindiņas komentārs

/* Vairāku rindiņu
   komentārs */

/**
 * JSDoc komentārs – funkcijas dokumentācija
 * @param {string} vārds - Lietotāja vārds
 * @returns {string} Sveiciens
 */
function sveicināt(vārds) {
    return "Sveiki, " + vārds + "!";
}

// Kods komentārā (īslaicīgi izslēgts)
// console.log("šis netiks izpildīts");

// TODO: uzlabot šo funkciju
// FIXME: šeit ir kļūda datu validācijā

Pirmais reālais skripts

Teksts

<!DOCTYPE html>
<html lang="lv">
<head>
    <meta charset="UTF-8">
    <title>Mans pirmais JS</title>
</head>
<body>
    <h1 id="virsraksts">Sveika pasaule!</h1>
    <button id="mainīt-btn">Maini krāsu</button>
    <p id="laiks"></p>

    <script>
        // Iegūt HTML elementus
        const virsraksts = document.getElementById("virsraksts");
        const poga = document.getElementById("mainīt-btn");
        const laika_rādīšana = document.getElementById("laiks");

        // Krāsu masīvs
        const krāsas = ["#e74c3c", "#3498db", "#2ecc71", "#9b59b6", "#f39c12"];
        let krāsas_indekss = 0;

        // Pogas notikums
        poga.addEventListener("click", function() {
            virsraksts.style.color = krāsas[krāsas_indekss];
            krāsas_indekss = (krāsas_indekss + 1) % krāsas.length;
        });

        // Rādīt pašreizējo laiku
        function atjaunināt_laiku() {
            const tagad = new Date();
            laika_rādīšana.textContent = "Laiks: " + tagad.toLocaleTimeString("lv");
        }

        atjaunināt_laiku();
        setInterval(atjaunināt_laiku, 1000); // Atjaunināt ik sekundi
    </script>
</body>
</html>