Instrukcje i algorytmy

Komputer działa w sposób deterministyczny – to znaczy, że zawsze w danym stanie (zawartość pamięci i urządzeń wejściowych) zachowa się tak samo. Jednak wspomniany stan może opisywać dane wejściowe, w zależności od których program musi zrealizować różne warianty działania. Służą do tego wspomniane wcześniej instrukcje warunkowe. Na przykład:

  jeśli a>b to napisz(‘a>b’);
  jeśli a<b to napisz(‘a<b’);

W językach programowania w miejsce „jeśli” pojawia się angielskie „if”.

Przykład:

 <form>
  rok= <input id="rok" type=text value="2016"><br />
  miesiąc= <input id="mies" type=text value="01"><br />
  <input type="button" onclick="javascript:licz()"  value="licz"/><br >
  dni= <input id='dni' type=text value="00" readonly/><br />
  </form>

Javascript:

function licz(){
     rok=document.getElementById('rok').value;
     mies=document.getElementById('mies').value;
     var dni='31';
     if (mies=='02') {
      dni='28';
      if (rok==2016) { dni='29'; }
    }
    if (mies=='04') { dni='30'; }
    if (mies=='06') { dni='30'; }
    if (mies=='09') { dni='30'; }
    if (mies=='01') { dni='30'; }
    document.getElementById('dni').value=dni;
  }

Poza instrukcjami warunkowymi, do zapisu algorytmów potrzebujemy pętli - czyli powtarzania bloku instrukcji. Javascript oferuje kilka rodzajów pętli.

1) Chyba najczęściej spotykaną pętlą jest instrukcja for/in. Służy ona do "przeglądania" wszystkih elementów struktury lub listy.

Przykład:

<button onclick="petla_for_in()">Kliknij</button>

<p id="wynik"></p>

<script>
function petla_for_in() {
    var struktura = {name:"Jan", age:20}; 
    var tablica = ['a','b','c'];
    var text = "";
    for (x in tablica) {
        text += x + ': '+tablica[x] + "  ";
    }
    var x;
    for (x in struktura) {
        text += '<br />' + x + ': '+struktura[x];
    }
    document.getElementById("wynik").innerHTML = text;
}
</script>

Po kliknięciu uzyskujemy wynik:

0: a 1: b 2: c 
name: Jan
age: 20

Dla osób znających inne języki w któych pętla for/in występuje może to być pewna niespodzianka (w najnowszej wersji standardu wprowadzono for/of działającą w taki jak spodziewany sposób). Używa w tym przykładzie zmienna x przyjmuje w pętli wartość "indeksu" - czyli elementu pozwalajacego wybrać własność (indeks tablicy asocjacyjnej). Przy okazji pokazano, że w Javascript zadeklarowana przy pomocy var zmiennajest widoczna w całej funkcji (nawet przed deklaracją).

2) For w stylu C - czyli jedna z najstarszych instrukcji w językach programowania wygląda następująco: for (inicjowanie indeksu; warunek zakończenia; zwiększanie indeksu). Przykład:

<button onclick="sumuj()">kliknij</button>

<p id="wynik"></p>

<script>
function sumuj() {
    var suma = 0;
    var i;
    for (i = 0; i < 8; i++) {
        suma += (i+1)*2;
    }
    document.getElementById("wynik").innerHTML = suma;
}
</script>

W tej pętli liczona jest suma pierwszych 8 liczb parzystych. Indeksem zwyczajowo jest i (co oczywiscie nie jest konieczne).

3) Powyższą pętlę można zapisać prościej przy pomocy instrukcji while. Ma ona strukturę: while (warunek powtarzania):

<button onclick="sumuj()">kliknij</button>

<p id="wynik"></p>

<script>
function sumuj() {
var suma = 0;
var i=0;
while (i < 8) {
  suma += (i+1)*2;
  i++;
}
document.getElementById("wynik").innerHTML = suma;
}
</script>

Jak widać - przy użyciu tej pętli musimy zadbać o to, aby warunek powtarzania był ustawiony na true i osiągnął wartość false - inaczej pętla się nie wykona lub będzie trwała w nieskończoność. Dlatego *w tym przykładzie) ustawiamy zmienną i przed pętlą oraz zmieniamy na końcu.

Z tego powodu (ryzyka błędów) ta pętla używana jest dużo rzadziej - tylko wtedy, gdy na początu nie możemy prosto ustalić ilości powtórzeń.

5) Jeszcze radziej spotyka się pętlę do/while - z warunkiem sprawdzanym na końcu (https://www.w3schools.com/jsref/jsref_dowhile.asp)