Skrypt do arkusza
http://fx-team.fulara.com/e14/e_14_2018_06_05.pdf

Etapy pracy nad arkuszem

  1. Piszemy szkielet strony (html, head, body, język polski utf-8)
  2. Trzeba utworzyć pola formularza
    1
    <input type="checkbox" checked name="zmiennaPHP" id="zmiennaJS">
  3. arkusza formularz ma 3 elementy:
    1
    2
    3
    4
    5
    6
    7
    <form>
       <input type="number" id="liczbaGosci">
       <input type="checkbox" id="poprawiny">
       <input type="button" value="Oblicz koszt">
    </form>
    <script>
    </script>
  4. Dodajemy kod HTML dookoła (umiemy to zgodnie z pkt 1):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html>
     <head>
       <meta charset="utf-8">
      </head>    
     
     <body>

     <form>
       <input type="number" id="liczbaGosci"> <br>
       <input type="checkbox" id="poprawiny"> <br>
       <input type="button" value="Oblicz koszt"> <br>
     </form>
     <script>
     </script>
     </body>
    </html>
  5. Kolejny krok to wczytanie zmiennych z formularza
    • WCZYTANIE LICZBY (ważne!)
      1
      var liczbaGosci = parseInt(document.getElementById("liczbaGosci").value);

      – parseInt( argument ) – zamiana 'argument’ na liczbę
      – document.getElementById( „nazwaDiv”) – pobranie z formularza pola o id „liczbaGosci”
      – .value – interesuje nas treść z formularza a nie jego cechy np. CSS

    • wczytanie checkboxa
      1
      var poprawiny = document.getElementById("poprawiny").checked;

      checked- czy checkbox jest zaznaczony?

  6. podpinamy funkcję pod przycisk

    7. funkcja = podprogram
    przy buttonie (trzeci input) piszecie:

    1
    onclick="klik()"

    – podpinamy przycisk do funkcji w ten sposób.

    1
    <input type="button" value="Oblicz koszt" onclick="klik()">

    a teraz script

    1
    2
    3
    4
    5
    6
    7
    <script>
        function klik()
        {
            var liczbaGosci = parseInt(document.getElementById("liczbaGosci").value);
            var poprawiny = document.getElementById("poprawiny").checked;
        }
    </script>
  7. wypisanie wyników
    – robimy div na wyniki

    1
    <div id="wyniki"> </div>

    – w javascript:

    1
    document.getElementById("wyniki").innerHTML = liczbaGosci;  //może być zamiast zmiennej komunikat np. 'Liczba gosci ' + liczbaGosci
  8. Kolejny krok to podpinamy punkt d) do funkcji klik()
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <html>
     <head>
       <meta charset="utf-8">
      </head>    
      <body>

    <form>
       <input type="number" id="liczbaGosci"> <br>
       <input type="checkbox" id="poprawiny"> <br>
       <input type="button" value="Oblicz koszt" onclick="klik()"> <br>
    </form>
    <div id="wynik"></div>
    <script>
        function klik()
        {
            var liczbaGosci = parseInt(document.getElementById("liczbaGosci").value);
            var poprawiny = document.getElementById("poprawiny").checked;
            document.getElementById("wynik").innerHTML = liczbaGosci + ' ' + poprawiny;
        }
    </script>
    </body>
  9. Sam skrypt wygląda następująco
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <html>
     <head>
       <meta charset="utf-8">
      </head>    
     
    <body>

    <form>
       <input type="number" id="liczbaGosci"> <br>
       <input type="checkbox" id="poprawiny"> <br>
       <input type="button" value="Oblicz koszt" onclick="klik()"> <br>
    </form>
    <div id="wynik"></div>
    <script>
        //funkcja klik() wywołuje się zawsze po wciśnięciu przycisku Oblicz koszt!
        function klik()
        {
            var liczbaGosci = parseInt(document.getElementById("liczbaGosci").value); //pobierz z formularza i zamień na liczbę INT
            var poprawiny = document.getElementById("poprawiny").checked; //stan checkboxa
            document.getElementById("wynik").innerHTML = 'Liczba gości:' + liczbaGosci + ' poprawiny:' + poprawiny; //tego nie ma w zadaniu - DEBUG
            var kosztWesela = 100 * liczbaGosci; //obliczamy koszt wesela bez poprawin
            if (poprawiny) //jeśli checkbox zaznaczony
                kosztWesela *= 1.30; //przemnóż razy 1,3  czyli dodaj 30%
            document.getElementById("wynik").innerHTML = '<br> Koszt wesela: ' + kosztWesela; //wynik wypisz w warstwie wynik
        }
    </script>
    </body>
EE09(E14), JavaScript