Cikls JavaScript

Cikls While

Tas darbojas reizi pēc reizes, ja apaļās iekavās norādītais  izpildās.

Attēls no https://www.programiz.com/

Sintakse:

while (nosacījums) {

// kodu bloks, kas jāizpilda

}

Piemērs: paku kraušana kuģī : 

let paka = 0;

let summa = 0;

while (summa < 100) { 

paka  = Number(prompt("Šīs pakas masa tonnās ir...")); 

 summa= summa + paka;

   alert ("Kuģī  iekrautās kravas daudzums būtu " +summa+ " t.")

   }

alert ("Pieļaujamais kravas daudzums ir 100t. Iekraušana pabeigta, vai izvēlieties mazāku par " + (100 - (summa - paka)) + "t iesaiņojumu.")

Cikls FOR

Teorija no Startit

Cikls

Cikls (looping) ir vadības konstrukcija, kas atkārto noteiktas darbības izpildi līdz brīdim, kad pārstāj izpildīties noteikts nosacījums

Programmēšanā mēdz izšķirt divu veidu ciklus: 

• cikls ar skaitītāju, 

• cikls ar nosacījumu (conditional looping). 

Ciklā ar skaitītāju pirms cikla izpildes jau ir zināms atkārtošanas reižu skaits.

Cikla FOR priekšraksts

Šo cikla priekšrakstu lieto tad, ja ir zināms cikla atkārtošanās reižu skaits. To sauc par ciklu ar skaitītāju.

Veidojot ciklu FOR tiek noteikta mainīgā sākuma vērtība, beigu nosacījums un cikla mainīgā vērtības izmaiņas nosacījums. Visi parametri ir atdalīti ar semikolu

for (cikla mainīgais =sākuma vērtība; beigu nosacījums; cikla mainīgā vērtības izmaiņa){

   <izpildāmās darbības>

}

Piemērs

for (let i =2; i<10; i=i+1){

    document.write(i);

}

i    –     cikla mainīgais, jeb skaitītājs ar sākuma vērtību 2;

i<10  – nosacījums, kuram neizpildoties cikls tiek pārtraukts;

i=i+1 – izteiksme, kas norāda cikla mainīgā vērtības izmaiņu, šajā gadījumā i vērtība atkārtojoties ciklam, tiek palielināta par 1;

Programma beidz izpildīt ciklu tad, kad nosacījums i<10 kļuvis aplams (piemēram, pārsniedz 10)

JavaScript valodā i=i+1 var aizstāt ar i++ un i=i-1 var aizstāt ar i—

Katru jaunu reizi, kad programma iet caur ciklu sauc par iterāciju, tāpēc loģiski, ka ļoti bieži cikla skaitītājam tiek lietots mainīgais i.

Piemēri

for (let i =2; i<10; i=i+1) {     document.write(i); }
for (let i =2; i<10; i++) {    document.write(i+ “ “); }
for (let i =2; i<10; i++) {     document.write(i+ ‘<br>’); }
for (let i =2; i<10; i=i+2) {     document.write(i+ “ “); }
let beigas=10; for (let i =1; i<beigas; i=i+2) {     document.write(i+ “ “); }
let sakums=1; let beigas=10; for (var i=sakums; i<beigas; i++){   document.write(i+ " "); } document.write('<br>'); document.write(" Izvadīju visus skaiļus no  " + sakums + "līdz " +(beigas-1));
let sakums=2; let beigas=10; for (var i=sakums; i<=beigas; i++){   document.write(i +" kvadrātā ir "+i*i+'<br>'); }

Zīmējuma veidošana, izmantojot ceļu (Path)

 Ceļa(path) programmēšanā vispirms jāizveido Canva tāpat, kā taisnstūrim, skat. Taisnsturi.

Path zīmēšanai ir 4 soļi:

Nogriežņa iegūšanai:

1. solis. Izvēlas līnijas krāsu un biezumu (var neizvēlēties, tad tas būs pēc iepriekš iestatītās, noklusētās versijas):

zimejums.strokeStyle = "red"; 

zimejums.lineWidth = 8;

2. solis. Norāda, ka izmantos ceļu(Path):

zimejums.beginPath();    

3.  solis. Norāda, kā veidosies nogrieznis:

zimejums.moveTo(10,10)// dodas uz noogriežņa pirmā galapunkta koordinātēm;  

zimejums.lineTo(100,150)// mērķis - otrs galapunkts;

4. solis. Uzzīmē to:

zimejums.stroke();

Riņķa līnijas lokam: 

Zīmē, domājot līdzīgi, kā zīmējot nogriezni,

3. solī norāda, kā veidosies loks:

zimejums.arc(120, 80, 60, 215*Math.PI/180, 45*Math.PI/180);

         arc(x, y, r, sakumaLenkis, beiguLenkis)

Riņķa līnijai pārveido loka formulu sekojoši:

zimejums.arc(x,y,r,0,2*Math.PI)

zimejums.beginPath();

zimejums.arc(70,250,50,0,2*Math.PI);

zimejums.stroke()

        

Var arī aizkrāsot

zimejums.fillStyle="yellow";
zimejums.fill();

Avots: Startit.lv

Funkcijas JavaScript

 Lai programmās izvairītos no līdzīgu fragmentu nevajadzīgas atkārtošanas, izmanto funkcijas - atsevišķi nodalītus koda fragmentus, kuri var izmantot parametrus.

Kad funkcija, vai procedūra izveidota, to var izmantot programmas jebkurā vietā.

Tie ir koda fragmenti, kurus izsauc pēc vajadzības.

Ja funkciju neizsauc, tā neko nedara.

1.piemērs. Programmētājs var izveidot funkciju, kura zīmē kvadrātu ar noteiktu izmēru 50 pikseļi un līnijas biezumu 5px, kuram var izvēlēties novietojumu.

function kvadr(x,y){

                        zimejums.lineWidth= 5;

         zimejums.strokeRect(x,y,50,50);

      }

Šajā gadījumā, piemēram, kvadr(10,6), kvadr(30,16), kvadr(40,26) būs kvadrāti ar funkcijā aprakstīto (lineWidth=5 un malām 50 pikseļi), bet atradīsies dažādās vietās atbilstoši iekavās norādītajām koordinātēm.

2.piemērs. Ļoti ērti, ja jāzīmē vairākas riņķa līnijas ieviest riņķa līnijai funkciju.

function rl(x, y, radius) {

   zimejums.beginPath();

   zimejums.arc(x, y, radius, 0, Math.PI * 2);

   zimejums.stroke();

  }

Lai uzzīmētu riņķa līniju, tad skriptā būs jāuzraksta, piemēram,  rl(5,7,20)vai rl(10,14,30)

Protams, ļoti bieži funkcijas izmanto arī, veidojot HTML pogas. 

<button onclick="jautajumi()"> OK </button>

<p id="atb"> atrodas HTML failā,

bet pati funkcija atrodas JavaScript daļā:

 function jautajumi() {

     let atbilde = prompt("Vai esi dabā redzējis upes gliemeni? Kur?");

     document.getElementById("atb").innerHTML = atbilde;  

    }

Funkcijas ērti izmantot arī taimerī.

Avoti: https://www.w3schools.com/un Startit.lv

JavaScript zīmējums uz pamatnes (canvas)

Pamatne (canvas)

Veidojot tīmekļa lappuses, bieži tās tiek papildinātas gan ar gataviem attēliem, gan pašrocīgi veidotiem attēliem. Viens no veidiem, kā tīmekļa lappusē iekļaut pašrocīgi veidotus zīmējumus, ir izmantot HTML tagu canvas un skriptu.

HTML tags canvas tīmekļa lappusē izveido tukšu taisnstūra apgabalu, kurā var zīmēt, ko turpmāk sauksim par pamatni, piemēram:

<canvas id="manaPamatne" width="200" height="100"> </canvas>, kur parametri width="200" height="100" nosaka pamatnes platumu un augstumu, bet parametrs id="manaPamatne" piešķir pamatnei identifikatoru, kas būs nepieciešams turpmāk – veidojot zīmējuma skriptu. 

Lai pamatnē būtu ērtāk zīmēt, ir ieviesta koordinātu sistēma ar atskaites punktu tās augšējā kreisajā stūrī, kur x ass vērsta pa labi, bet y ass uz leju:

Ja pamatnei vēlatas pievienot rāmīti un/vai krāsu, tad izmanto parametru style, piemēram:

style="border:1px solid #E62B2B; background-color:#B7D4F5"

Tīmekļa lappuses piemērs ar pamatni:

<p>Te būs pamatne </p>

<canvas id="manaPamatne" width="200" height="100" 

    style="border:1px solid #E62B2B; background-color:#B7D4F5">

</canvas>

<p>Nākamā rindkopa</p>

Viena tīmekļa lappuse var saturēt vienu vai vairākas pamatnes.

Zīmējuma veidošana pamatnē (canvas)

Iepriekšējā nodaļa aplūkojām, kā tīmekļa lappusē iekļaut pamatni, bet, lai tajā veidotu paredzēto zīmējumu, parasti rakstām skriptu. Lai skriptā norādītu, kur un kā zīmēsim, tā sākumā jāiekļauj šādi divi priekšraksti:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

Lai uz pamatnes uzzīmētu un aizpildītu taisnstūri, var izmantot metodes strokeRect un fillRect:

strokeRect(x, y, garums, platums)

fillRect(x, y, garums, platums)

Piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.strokeRect(20,20,150,70);

Ja nepieciešams, pirms taisnstūra zīmēšanas var norādīt tā līnijas krāsu un biezumu (platumu), piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.lineWidth = 5; // līnijas biezums

zimejums.strokeStyle="green"; // līnijas krāsa

zimejums.strokeRect(20,20,150,70);

zimejums.lineWidth = 8;

zimejums.strokeStyle="#FF0000";

zimejums.strokeRect(30,30,50,50);

Fons.

Lai uz pamatnes uzzīmētu taisnstūri noteiktā krāsā, var izmantot metodi fillRect, piemēram:

let pamatne = document.getElementById("manaPamatne");

let zimejums = pamatne.getContext("2d");

zimejums.fillRect(30,25,60,50); //melns taisnstūris

zimejums.fillStyle= "yellow"; // taisnstūra krāsas maiņa

zimejums.fillRect(110,25,60,50);