JavaScript pamati

JavaScript (JS) ir programmēšanas valoda, kas padara mājas lapas interaktīvas un dinamiskas. Kamēr HTML veido lapas struktūru un CSS nosaka izskatu, JavaScript pievieno uzvedību — reakciju uz lietotāja darbībām, datu validāciju, animācijas un daudz ko citu. JavaScript darbojas tieši lietotāja pārlūkprogrammā (atšķirībā no PHP, kas darbojas serverī). Tas nozīmē, ka JavaScript kods tiek izpildīts uzreiz, bez nepieciešamības sūtīt pieprasījumu serverim. Ko var izdarīt ar JavaScript? • Mainīt HTML saturu un CSS stilus dinamiski • Reaģēt uz lietotāja...

Lasīt tālāk

JavaScript sintakse ir līdzīga citām populārām programmēšanas valodām. Šajā sadaļā apskatīsim mainīgos, datu tipus un pamata operācijas. Mainīgie JavaScript piedāvā trīs veidus, kā deklarēt mainīgos: // let — mainīgs mainīgais (ieteicams) let vards = 'Jānis'; vards = 'Anna'; // var mainīt // const — nemainīgs (konstante) const PI = 3.14159; // PI = 3; // Kļūda! Nevar mainīt // var — vecais veids (izvairies no tā) var vecais = 'neieteicams'; Vienmēr izmanto const pēc noklusējuma. Lieto let tikai...

Lasīt tālāk

Nosacījumi ļauj izpildīt dažādu kodu atkarībā no situācijas. if...else const vecums = 20; if (vecums >= 18) { console.log('Pieaugušais'); } else { console.log('Nepilngadīgais'); } else if const atzime = 8; if (atzime >= 9) { console.log('Izcili!'); } else if (atzime >= 7) { console.log('Labi!'); } else if (atzime >= 4) { console.log('Apmierinoši.'); } else { console.log('Jācenšas vairāk.'); } Ternārais operators Saīsināts nosacījums vienā rindiņā: const vecums = 20; const statuss = vecums >= 18...

Lasīt tālāk

Cikli ļauj atkārtot koda bloku vairākas reizes. for for (let i = 0; i console.log(`Skaitlis: ${i}`); } // 0, 1, 2, 3, 4 while let i = 0; while (i console.log(i); i++; } do...while Izpilda kodu vismaz vienu reizi: let i = 10; do { console.log(i); i++; } while (i // Izvadīs: 10 for...of (masīviem) Modernais veids, kā pārskatīt masīvu: const augļi = ['ābols', 'bumbieris', 'ķirsis']; for (const auglis of augļi) { console.log(auglis); } for...in (objektiem) const lietotajs = { vards: 'Jānis',...

Lasīt tālāk

Funkcijas ir atkārtoti izmantojami koda bloki. JavaScript piedāvā vairākus veidus, kā tās definēt. Funkcijas deklarācija function sveiciens(vards) { return `Sveiks, ${vards}!`; } console.log(sveiciens('Jāni')); // Sveiks, Jāni! Funkcijas izteiksme const sveiciens = function(vards) { return `Sveiks, ${vards}!`; }; Bultiņu funkcijas (arrow functions) Modernais, saīsinātais pieraksts: // Pilnā forma const saskaitit = (a, b) => { return a + b; }; // Saīsinātā (ja tikai viens izteikums) const...

Lasīt tālāk

Masīvi ļauj uzglabāt vairākas vērtības vienā mainīgajā un piedāvā plašu metožu klāstu datu apstrādei. Masīva izveide const augļi = ['ābols', 'bumbieris', 'ķirsis']; const skaitli = [1, 2, 3, 4, 5]; const jaukts = ['teksts', 42, true, null]; console.log(augļi[0]); // 'ābols' console.log(augļi.length); // 3 Elementu pievienošana un noņemšana const saraksts = ['a', 'b', 'c']; saraksts.push('d'); // pievieno beigās → ['a','b','c','d'] saraksts.unshift('z'); // pievieno sākumā →...

Lasīt tālāk

Objekti ir viens no JavaScript pamatdatu tipiem — tie ļauj uzglabāt saistītu datu kolekciju ar nosauktām atslēgām. Objekta izveide const lietotajs = { vards: 'Jānis', uzvards: 'Bērziņš', vecums: 25, irStudents: true, hobiji: ['peldēšana', 'programmēšana'], }; // Piekļuve īpašībām console.log(lietotajs.vards); // 'Jānis' console.log(lietotajs['uzvards']); // 'Bērziņš' // Dinamiska piekļuve const atslega = 'vecums'; console.log(lietotajs[atslega]); // 25 Īpašību pievienošana un dzēšana const obj...

Lasīt tālāk

DOM (Document Object Model) ir programmatiska HTML dokumenta reprezentācija. JavaScript izmanto DOM, lai dinamiski mainītu lapas saturu, struktūru un izskatu. Elementu atlasīšana // Pēc ID (atgriež vienu elementu) const virsraksts = document.getElementById('virsraksts'); // Pēc CSS selektora (pirmais atbilstošais) const poga = document.querySelector('.poga'); const pirmaisLi = document.querySelector('ul > li:first-child'); // Pēc CSS selektora (visi atbilstošie) const visasPogas =...

Lasīt tālāk

Notikumi (events) ļauj JavaScript reaģēt uz lietotāja darbībām — klikšķiem, tastatūras ievadi, peles kustību, formu nosūtīšanu un citām darbībām. addEventListener Ieteicamais veids notikumu pievienošanai: const poga = document.querySelector('#poga'); poga.addEventListener('click', function() { console.log('Poga nospiesta!'); }); // Ar bultiņu funkciju poga.addEventListener('click', () => { console.log('Poga nospiesta!'); }); Populārākie notikumi Notikums Apraksts click Klikšķis uz elementa...

Lasīt tālāk

JavaScript piedāvā plašu metožu klāstu darbam ar teksta virknēm. Virknes pamatoperācijas const teksts = 'Sveika, pasaule!'; teksts.length; // 16 teksts.toUpperCase(); // 'SVEIKA, PASAULE!' teksts.toLowerCase(); // 'sveika, pasaule!' teksts.trim(); // noņem atstarpes sākumā un beigās Meklēšana const teksts = 'JavaScript ir lieliska valoda'; teksts.includes('lieliska'); // true teksts.startsWith('Java'); // true teksts.endsWith('valoda'); // true teksts.indexOf('ir'); // 11...

Lasīt tālāk

Modernais JavaScript bieži izmanto asinhronas operācijas — darbības, kas nenotiek uzreiz (piemēram, datu ielāde no servera). async/await un fetch ir mūsdienu rīki šo operāciju pārvaldīšanai. Sinhrons vs asinhronis kods // Sinhrons — katrs solis gaida iepriekšējo console.log('1. Pirmais'); console.log('2. Otrais'); console.log('3. Trešais'); // Asinhronis — setTimeout neaiztur pārējo kodu console.log('1. Sākums'); setTimeout(() => console.log('2. Pēc 2 sekundēm'), 2000); console.log('3....

Lasīt tālāk

localStorage un sessionStorage ļauj saglabāt datus lietotāja pārlūkprogrammā. Dati tiek glabāti kā teksta atslēga-vērtība pāri. localStorage vs sessionStorage localStorage sessionStorage Dati saglabājas bezgalīgi Dati dzēšas, aizverot cilni Pieejami visās cilnēs (viena domēna ietvaros) Pieejami tikai pašreizējā cilnē Piemērots: iestatījumi, tēma, valoda Piemērots: pagaidu stāvoklis Pamatoperācijas // Saglabāt localStorage.setItem('vards', 'Jānis'); localStorage.setItem('tema', 'tumša'); //...

Lasīt tālāk

Kļūdu apstrāde ir svarīga stabilas aplikācijas daļa. Ar try...catch var pārtvert kļūdas un reaģēt uz tām, nevis ļaut aplikācijai "salūzt". try...catch try { // Kods, kas var izraisīt kļūdu const dati = JSON.parse('nederīgs json'); } catch (kļūda) { // Izpildās, ja notiek kļūda console.error('Kļūda:', kļūda.message); } finally { // Izpildās vienmēr (neatkarīgi no kļūdas) console.log('Beigas.'); } Kļūdu tips try { neeksistējoša(); // ReferenceError } catch (e) { console.log(e.name); //...

Lasīt tālāk