JavaScript ievads un HTML/CSS špikeri

1. Kas ir JavaScript?

JavaScript ir programmēšanas valoda, kas mājaslapai pievieno darbības. HTML izveido saturu, CSS to noformē, bet JavaScript ļauj lapai reaģēt uz klikšķiem, mainīt tekstu, krāsas, skaitīt punktus un zīmēt.

2 x 45 minūšu plāns

2. JavaScript špikeris

Kur raksta JavaScript?

Vienkāršā variantā JavaScript var rakstīt HTML faila apakšā pirms </body> taga.

<script>
  alert("Sveiki!");
</script>

Elementa atrašana pēc id

<p id="teksts">Vecais teksts</p>

<script>
  document.getElementById("teksts").textContent = "Jaunais teksts";
</script>

Poga ar klikšķi

<button onclick="paradiZinu()">Spied mani</button>

<script>
  function paradiZinu() {
    alert("Tu nospiedi pogu!");
  }
</script>

Mainīgais

<p id="punkti">Punkti: 0</p>

<script>
  let skaits = 0;
  skaits = skaits + 1;
  document.getElementById("punkti").textContent = "Punkti: " + skaits;
</script>

Noderīgas komandas

3. Ievaduzdevumi JavaScript

Izveido jaunu failu, piemēram, js.html. Katru uzdevumu vari likt tajā pašā failā zem iepriekšējā uzdevuma.

1. uzdevums – poga un alert

Izveido pogu, kas parāda paziņojumu.

<button onclick="sveiciens()">Sveiciens</button>

<script>
  function sveiciens() {
    alert("Sveiks JavaScript pasaulē!");
  }
</script>

2. uzdevums – maini tekstu

Izveido pogu, kas nomaina tekstu lapā.

<p id="mansTeksts">Šis teksts vēl nav mainīts.</p>
<button onclick="mainiTekstu()">Mainīt tekstu</button>

<script>
  function mainiTekstu() {
    document.getElementById("mansTeksts").textContent = "Teksts ir nomainīts!";
  }
</script>

3. uzdevums – maini fona krāsu

Izveido pogu, kas nomaina visas lapas fona krāsu.

<button onclick="mainiFonu()">Mainīt fonu</button>

<script>
  function mainiFonu() {
    document.body.style.backgroundColor = "lightyellow";
  }
</script>

4. uzdevums – punktu skaitītājs

Katru reizi, kad nospiež pogu, punktu skaits palielinās par 1.

<h2 id="punkti">Punkti: 0</h2>
<button onclick="pieliecPunktu()">+1 punkts</button>

<script>
  let punkti = 0;

  function pieliecPunktu() {
    punkti = punkti + 1;
    document.getElementById("punkti").textContent = "Punkti: " + punkti;
  }
</script>

5. uzdevums – mini klikšķu spēle

Izveido dzīvnieka lapai piemērotu klikšķu spēli: piemēram, “savāc banānus”, “noķer zivis” vai “atrodi kaulus”.

<h2 id="rezultats">Savākti banāni: 0</h2>
<button onclick="savacBananu()" style="font-size: 30px;">🍌</button>

<script>
  let banani = 0;

  function savacBananu() {
    banani = banani + 1;
    document.getElementById("rezultats").textContent = "Savākti banāni: " + banani;
  }
</script>

Vairāk bonusa JS uzdevumu

Ja pamata uzdevumi jau izdodas, izvēlies vienu vai vairākus bonusa piemērus un pielāgo tos savai tēmai.

6. bonuss – parādi vai paslēp tekstu

<p id="noslepums" style="display: none;">Šis ir slepens fakts!</p>
<button onclick="radit()">Parādīt</button>

<script>
  function radit() {
    document.getElementById("noslepums").style.display = "block";
  }
</script>

7. bonuss – maini bildi

<img id="bilde" src="kakis1.jpg" width="250" alt="Kaķis">
<button onclick="mainitBildi()">Mainīt bildi</button>

<script>
  function mainitBildi() {
    document.getElementById("bilde").src = "kakis2.jpg";
  }
</script>

8. bonuss – nejaušs fakts

<p id="fakts">Spied pogu, lai iegūtu faktu!</p>
<button onclick="jaunsFakts()">Jauns fakts</button>

<script>
  function jaunsFakts() {
    let fakti = ["Pandas ēd bambusu.", "Delfīni ir gudri.", "Pūces labi redz tumsā."];
    let numurs = Math.floor(Math.random() * fakti.length);
    document.getElementById("fakts").textContent = fakti[numurs];
  }
</script>

9. bonuss – mini viktorīna

<p>Ko ēd panda?</p>
<button onclick="atbilde('pareizi')">Bambusu</button>
<button onclick="atbilde('nepareizi')">Akmeņus</button>
<p id="rezultats2"></p>

<script>
  function atbilde(variants) {
    if (variants == "pareizi") {
      document.getElementById("rezultats2").textContent = "Pareizi!";
    } else {
      document.getElementById("rezultats2").textContent = "Mēģini vēlreiz!";
    }
  }
</script>

10. bonuss – teksta ievade

<input id="vards" placeholder="Ieraksti savu vārdu">
<button onclick="sveiciensVardam()">Sveicināt</button>
<p id="atbilde"></p>

<script>
  function sveiciensVardam() {
    let vards = document.getElementById("vards").value;
    document.getElementById("atbilde").textContent = "Sveiks, " + vards + "!";
  }
</script>

11. bonuss – krāsu izvēle ar pogām

<button onclick="krasot('lightblue')">Zils</button>
<button onclick="krasot('lightgreen')">Zaļš</button>
<button onclick="krasot('pink')">Rozā</button>

<script>
  function krasot(krasa) {
    document.body.style.backgroundColor = krasa;
  }
</script>

12. bonuss – vienkāršs taimeris

<p id="laiks">0</p>
<button onclick="sakt()">Sākt</button>

<script>
  let sekundes = 0;

  function sakt() {
    setInterval(function() {
      sekundes = sekundes + 1;
      document.getElementById("laiks").textContent = sekundes;
    }, 1000);
  }
</script>

13. bonuss – zīmēšana canvas laukā

canvas ir zīmēšanas laukums. Šajā piemērā JavaScript uzzīmē zilu apli.

<canvas id="zim" width="300" height="180"
        style="border: 2px solid black;"></canvas>

<script>
  let laukums = document.getElementById("zim");
  let ota = laukums.getContext("2d");

  ota.fillStyle = "skyblue";
  ota.beginPath();
  ota.arc(150, 90, 50, 0, 2 * Math.PI);
  ota.fill();
</script>

4. HTML pamat-tagu špikeris

Pilns HTML tagu saraksts: MDN HTML elementi

<h1>Galvenais virsraksts</h1>
<h2>Mazāks virsraksts</h2>
<h3>Vēl mazāks virsraksts</h3>

<p>Šis ir paragrāfs.</p>

<p>Pirmā rinda.<br>
Otrā rinda.</p>

<b>Treknraksts</b>
<i>Slīpraksts</i>
<u>Pasvītrots</u>

<a href="vide.html">Par dzīvnieka vidi</a>

<a href="https://lv.wikipedia.org">
  Vikipēdija
</a>

<img src="lauva.jpg" alt="Lauva" width="300">

<ul>
  <li>Dzīvo mežā</li>
  <li>Ēd ogas</li>
</ul>

<ol>
  <li>Atrodi informāciju</li>
  <li>Saglabā bildi</li>
  <li>Izveido lapu</li>
</ol>

<a href="index.html">Atpakaļ uz sākumu</a>

<p id="apraksts">
  Šo elementu JavaScript var atrast pēc id.
</p>

<p class="fakts">Pirmais fakts</p>
<p class="fakts">Otrais fakts</p>

<button id="poga1" class="liela-poga">
  Spied mani
</button>

Ļoti vienkāršs piemērs lapai

<h1>Panda</h1>

<p>Panda ir interesants dzīvnieks.</p>

<h2>Saites</h2>
<ul>
  <li><a href="vide.html">Vide</a></li>
  <li><a href="uzturs.html">Uzturs</a></li>
</ul>

5. CSS špikeris – pats vienkāršākais

Pilns CSS stilu saraksts: MDN CSS reference

CSS palīdz padarīt lapu skaistāku. Šobrīd var izmantot style atribūtu tieši tagā.

Krāsa un fona krāsa

<p style="color: blue;">Zils teksts</p>

<p style="background-color: yellow;">
  Teksts ar dzeltenu fonu
</p>

Vairāki stili vienā vietā

<p style="color: white; background-color: green; padding: 10px;">
  Šis teksts ir izcelts
</p>

Izmanto div kā “kasti”

<div style="background-color: lightblue; padding: 15px;">
  <h2>Mana sadaļa</h2>
  <p>Šeit ir teksts kastē.</p>
</div>

Izmanto span vienam teksta gabalam

<p>
  Mans dzīvnieks ir
  <span style="color: red; font-weight: bold;">ļoti ātrs</span>.
</p>

Noderīgi teksta stili

Bonusa efekti

<div style="background-color: white;
            padding: 15px;
            border-radius: 15px;
            box-shadow: 4px 4px 10px gray;">
  Skaista kastīte
</div>

<p style="outline: 3px dashed orange; padding: 10px;">
  Teksts ar īpašu kontūru
</p>

<h2 style="text-shadow: 2px 2px 4px gray;">
  Spīdīgs virsraksts
</h2>

<img src="lapsa.jpg" alt="Lapsa" width="250"
     style="border-radius: 20px; box-shadow: 5px 5px 12px gray;">

Viens vienkāršs noformēts piemērs

<div style="background-color: lightyellow;
            border: 2px solid orange;
            border-radius: 15px;
            padding: 15px;
            margin: 10px 0;">

  <h2 style="color: darkgreen; text-align: center;">Ezis</h2>

  <p>Ezis ir mazs dzīvnieks ar adatām.</p>

  <p>
    Tas ir
    <span style="color: red; font-weight: bold;">interesants</span>
    un gudrs.
  </p>
</div>

6. Iepriekšējais pamatuzdevums – izveido dzīvnieka mājaslapu

Tev jāizveido neliela mājaslapa par kādu dzīvnieku, izmantojot HTML un mazliet arī CSS. Darbu veido Notepad++ vidē.

Kas jāizveido obligāti?

1. Index lapa (piemēram, index.html).
2. Vēl vismaz 2 citas lapas par šo pašu dzīvnieku.
3. Starp lapām jābūt saitēm.

Ko ievietot sākuma lapā?

• Dzīvnieka nosaukumu kā virsrakstu.
• Nelielu aprakstu par dzīvnieku.
• Sadaļu “Saites” ar sarakstu uz citām lapām.

Ko ievietot pārējās lapās?

Piemēri lapām:

• Vide – kur dzīvnieks dzīvo.
• Uzturs – ko dzīvnieks ēd.
• Interesanti fakti.
• Aizsardzība vai uzvedība.

Katrā lapā jābūt:

• virsrakstam,
• tekstam,
• vismaz vienai bildei.

7. Par ko var saņemt punktus?

Pamatprasības

Papildpunkti

Superbonuss – “vibe coded” lapa

Vari izveidot vēl vienu īpašu lapu, ko palīdz uztaisīt Gemini. Tā var būt:

• animācija par dzīvnieku,
• neliela spēle,
• interaktīva lapa,
• krāšņs pārsteigums par izvēlēto dzīvnieku.

8. Gemini “vibe coding” špikeris

Gemini vari izmantot, lai izveidotu bonusa lapu ar kaut ko iespaidīgāku. Svarīgi: tev jāsaprot, ko kopē un ko ieliec savā failā.

Kā strādāt?

1. Izdomā ideju par dzīvnieku.
2. Uzraksti Gemini precīzu uzdevumu.
3. Nokopē HTML/CSS/JS kodu.
4. Ielīmē jaunā failā, piemēram, bonus.html.
5. Pārbaudi pārlūkā, kas strādā un kas nestrādā.
6. Ja vajag, palūdz Gemini izlabot kļūdas.

Piemēri, ko prasīt Gemini

Izveido vienkāršu HTML lapu par pandu.
Lapā vajag:
- lielu virsrakstu
- animētu fonu
- pogu, uz kuru uzspiežot parādās interesants fakts
- visu vienā HTML failā
- vienkāršu kodu, ko var saprast 6. klases skolēns

Izveido vienkāršu spēli vienā HTML failā par lauvu.
Spēlē jāklikšķina uz gaļas gabaliņiem, lai iegūtu punktus.
Lūdzu izmanto HTML, CSS un JavaScript.
Kods lai ir vienkāršs un ar komentāriem.

Izveido skaistu pārsteiguma lapu par delfīnu.
Lapā lai ir:
- zils fons
- kustīgi burbuļi
- bilde
- 3 interesanti fakti
- poga “Vēl fakts!”
Visu vienā HTML failā.

Ko rakstīt, ja kaut kas nestrādā?

Šis kods man nestrādā. Izlabo to.
Lūdzu atstāj vienā HTML failā.
Paskaidro, ko tu izmainīji.

Noņem sarežģīto daļu un uztaisi vienkāršāku versiju 6. klases skolēnam.

Pievieno komentārus kodā, lai es saprotu, kas ir virsraksts, poga, stils un JavaScript daļa.

Labs darba princips

• Vispirms uztaisi parasto mājaslapu.
• Tikai tad veido bonusa pārsteiguma lapu.
• Ja Gemini iedod pārāk sarežģītu kodu, palūdz vienkāršāku versiju.

9. Bonusa lapu idejas par dzīvniekiem

10. Failu arhivēšana

Kad mājaslapa ir pabeigta, visi tās faili jāsaliek vienā arhīvā. Tas ir vajadzīgs tāpēc, lai e-pastā varētu nosūtīt visu darbu kopā: index.html, pārējās HTML lapas, bildes un citus failus.

ZIP fails ir kā kārtīga kaste, kurā saliec visus savus darbus: papīrus, bildes un citus vajadzīgos materiālus. Tā vietā, lai nestu katru lietu atsevišķi, tu aiztaisi kasti ciet un nodod visu kopā vienā iepakojumā.

Kas jāizdara?

1. Atrodi savu mājaslapas mapi, kurā ir index.html un visi pārējie faili.
2. Pārbaudi, vai mapē ir arī visas izmantotās bildes.
3. Uzklikšķini uz mapes ar peles labo pogu.
4. Izvēlies 7-Zip un pēc tam Add to archive... vai Add to “mapes-nosaukums.zip”.
5. Izveido ZIP arhīvu.
6. Pievieno šo ZIP failu e-pastam kā pielikumu un nosūti skolotājam.