JavaScript - praktyka

JavaScript gości na egzaminach praktycznych dość często w połączeniu z pracą graficzną, stroną w HTML i CSS. Spróbujmy na podstawie dotychczas zamieszczonych zadań określić zakres powtórki.
Jeśli ktoś powtarzał do egzaminu pisemnego to już dużo umie. Jeśli nie warto zajrzeć:
Repetytorium https://minirepetytorium.blogspot.com/2019/11/javascript.html

Przykład interaktywny 1. Skrypt "Formularz kontaktowy" (Arkusz E.14-06-19.06 )

<form> <h3> Formularz kontaktowy</h3> <table> <tr> <td>Imię:</td> <td><input type="text" id="imie1"></td> </tr> <tr> <td>Nazwisko:</td> <td><input type="text" id="nazwisko1"></td> </tr> <tr> <td>E-mail:</td> <td><input type="text" id="email1"></td> </tr> <tr> <td>Usługa:</td> <td> <select id="usluga1"> <option>naprawa komputera</option> <option>odzyskiwanie danych</option> <option>konfiguracja sieci LAN</option> </select> </td> </tr> <tr> <td></td> <td><input type="checkbox"> Wyślij kopię wiadomości</td> </tr> <tr> <td></td> <td> <input type="button" value="Wyślij" id="wyslij"> <input type="reset" value="Wyczyść"> <br> </td> </tr> </table> <p id="akapit1"> </p> </form> <script> var przycisk = document.getElementById('wyslij'); przycisk.onclick = function() { var imie = document.getElementById('imie1').value; var nazwisko = document.getElementById('nazwisko1').value; var email = document.getElementById('email1').value.toLowerCase(); var usluga = document.getElementById('usluga1').value; var akapit = document.getElementById('akapit1'); akapit.innerHTML = imie + " " + nazwisko + "<br>" + email + "<br>Usługa: " + usluga; } </script>

Rys historyczny

Warto się zapoznać z przykładowymi rozwiązaniami.

2014

1. Sprawdzanie znaku liczby.
2. Zabezpieczenie strony hasłem.
3. Generowanie ciągów liczb.
4. Data ostatniej aktualizacji strony.

2015

1. Kalkulator prosty - cztery podstawowe działania.
2. Obliczanie pola i obwodu kwadratu.

2016

1. Przeliczanie jednostek temperatury.
2. Przeliczanie kursu walut.
3. Sprawdzanie jakości hasła (x2).

2017

1.  Kalkulator (obliczanie pola powierzchni ścian).
2.  Kalkulator (obliczanie malowania).
3.  Kalkulator (obliczanie kafelkowania).
4.  Kalkulator (obliczanie ceny mieszkania).

2018

1. Kalkulator (wyznaczający koszt ogłoszenia).
2. Kalkulator (wyznaczający średnią ocen).
3. Kalkulatory (wyznaczające najwyższą/najniższą średnią ocen).

2019

1. Działania na polach formularza i liczbach
2. Działania na polach formularza i ciągach tekstu

2020

1.  Kalkulatory (z różnymi polami formularza).
2. Generowanie ciągu

Wnioski

Z przedstawionej tematyki problemów widać, że najczęściej mamy do czynienia z jakimś „kalkulatorem”. Trzeba zatem opanować technikę obsługi zdarzeń, deklarowania zmiennych, wprowadzania danych i wyprowadzania wyników za pomocą okien dialogowych (funkcje prompt() i alert()) oraz pól formularza (element <input>). Często trzeba zastosować przycisk (np. element <button>).

Przykład 1.

<button onclick="f()">Przykład 1.</button> <script> function f() { var x = prompt("Jak masz na imię?") alert("Cześć " + x) } </script>
Z wyrażeń, instrukcji i funkcji trzeba minimum znać podstawowe operatory (arytmetyczne, relacji i przypisania), instrukcję warunkową if, pętlę for oraz zagadnienia z function.

Przykład 2.

x = <input id="i1" type="number"> <button id="b1">Oblicz x!</button> x! = <input id="i2" type="number"> <script> function silnia() { var n=i1.value var silnia=1 for(i=1; i<=n; i++){ silnia*=i } i2.value=silnia } b1.onclick = silnia </script>
Uwaga
W przykładzie zastosowano uproszczony sposób odwoływania się do elementów. Zamiast metody
document.getElementById("nazwa_identyfikatora")
zastosowano samą nazwę identyfikatora.


Sprawdzanie poprawności danych

Przykład 3.

x = <input id="i1" type="number"> <button id="b1">Sprawdź</button> <script> function spr() { if(isNaN(parseFloat(i1.value))) alert("Błąd danych") } b1.onclick = spr </script>

W arkuszu jest dostępna "ściągawka" z wybranych pól i metod modelu DOM języka JavaScript.

Wybrane pola i metody modelu DOM języka JavaScript

Wyszukiwanie elementów

document.getElementById(id)
document.getElementsByTagName(TagName)
document.getElementsByClassName(ClassName)

Zmiana elementów

element.innerHTML = "nowa zawartość"
element.attribute = "nowa wartość"
element.setAttribute(atrybut, wartosc)
element.style.property = "nowa wartość"

Operacje na elementach dokumentu

document.createElement(element)
document.removeChild(element)
document.appendChild(element)
document.replaceChild(element)
document.write(text)

Wybrane właściwości obiektu style

backgroundColor
color
fontSize
fontStyle = "normal | italic | oblique | initial | inherit"
fontWeight = "normal | lighter | bold | bolder | value | initial | inherit"

Wybrane zdarzenia HTML

Zdarzenia myszy
onclick
ondblclick
onmouseover
onmouseout
Zdarzenia klawiatury
onkeydown
onkeypress
onkeyup

Zdarzenia obiektów

onload
onscroll
onresize

Elementy formularzy

Ważniejsze typy pola input: button, checkbox, number, password,
Inne elementy: radio, text, select,textarea

Metody i pola obiektu string (JS)

length
indexOf(text)
search(text)
substr(startIndex, endIndex)
replace(textToReplace, newText)
toUpperCase()
toLowerCase()

Zadania (w arkuszach oznaczonych gwiazdką):

• https://egzamin-e14.blogspot.com/
• https://egzamin-ee09.blogspot.com/
• https://egzamin-ee03.blogspot.com/

Więcej:

• https://poradnikmetodyczny.blogspot.com/