poniedziałek, 2020-11-30

Znacznik output

W HTML5 pojawił się nowy znacznik, który jest bardzo przydatny dla programistów JavaScript.

Przykład nr 1 – pole prostokąta

W przykładzie widać, że próba wykonania określonego w atrybucie oninput wyrażenia następuje po każdej zmianie wartości pola formularza. Podczas wpisywania długości pierwszego boku wynikiem obliczeń jest wartość Not-A-Number (Nie-Liczba). Jest to zrozumiałe, ponieważ nie określono jeszcze długości drugiego boku.

Kod przykładu

We właściwości elementu form o nazwie oniput wpisane jest wyrażenie w języku JavaScript, które zostanie wykonane podczas każdej modyfikacji elementów input określonych identyfikatorami o nazwach a i b. Wartości pobierane są z ich własności value (odpowiednio a.value oraz b.value). Zawartość pola to łańcuch znaków, przed wykonaniem działania jest ona konwertowana przy pomocy metody parseInt() na liczbę całkowitą typu integer. Do pola wyświetlającego wynik odwołano się przy pomocy jego atrybutu name (wynik).

<div id="tester-1">
  <form oninput="wynik.value=parseInt(a.value)*parseInt(b.value)">
    <label>Długość boku a: <input id="a" type="number"></label>
    <label>Długość boku b: <input id="b" type="number"></label>
    Pole = <output name="wynik"></output>
  </form>
</div>

Przykład nr 2 – udoskonalone obliczenia

Drugi przykład jest modyfikacją poprzedniego, tym razem wartość NaN nie jest wyświetlana.

Kod przykładu

W kodzie wyrażenia metodę parseInt() zastąpiono zastosowaniem własności valueAsNumber. Przed wykonaniem działania następuje sprawdzenie, czy obie wartości są liczbami.

<div  id="tester-2">
  <form oninput="if(!isNaN(a.valueAsNumber) && !isNaN(b.valueAsNumber)) wynik.value=a.valueAsNumber*b.valueAsNumber">
    <label>Długość boku a: <input id="a" type="number"></label>
    <label>Długość boku b: <input id="b" type="number"></label>
    Pole = <output name="wynik"></output>
  </form>
</div>

Przykład nr 3 – kwadrat liczby

Znacznik output może być stosowany z różnymi elementami formularza, w przykładzie wykorzystano input typu range.

Kod przykładu

W porównaniu do wcześniej demonstrowanych przykładów, w prezentowanym rozwiązaniu wprowadzono dwa zupełnie nowe elementy. Po pierwsze w formularzu umieszczono dwa znaczniki output, pierwszy z nich będzie wyświetlał wartość ustawioną suwakiem. Drugą innowacją jest wykorzystanie dwóch oddzielonych średnikiem instrukcji w atrybucie oninput.

<div id="tester-3">
  <form oninput="wynik.value=x.valueAsNumber*x.valueAsNumber;liczba.value=x.valueAsNumber;">
    <input type="range" id="x" value="2">
    <output name="liczba"></output>
    ^2 = <output name="wynik"></output>
  </form>
</div>

Przykład nr 4 – warunkowe potwierdzenie

Możliwości związane ze znacznikiem output można wykorzystać do wyświetlania komunikatów.

Kod przykładu

W przykładzie po wprowadzeniu ustalonego w kodzie ciągu znaków wyświetlany jest komunikat. Ciąg znaków może być wpisany za pomocą różnej wielkości znaków dlatego do porównania ze wzorcem wykorzystano metodę toUpperCase().

<div id="tester-4">
  <form oninput="wynik.value=(a.value.toUpperCase()=='CKZIU' ? 'sama prawda!' : '')">
    <label>Najlepsza szkoła? <input id="a" type="text"></label>
    <output name="wynik"></output>
  </form>
</div>

Przykład nr 5 – zliczanie ilości znaków

Do budowy wyrażenia umieszczonego w atrybucie oninput znacznika form można wykorzystać różna własności dostępne w języku JavaScript. Tym razem zastosowano własność length, która oznacza ilość znaków w ciągu.

Kod przykładu

Nowością w prezentowanym rozwiązaniu jest wstawienie w znaczniku output znaku zapytania. Zniknie on po wprowadzeniu pierwszego znaku w monitorowane wyrażeniem pole.

<div id="tester-5">
  <form oninput="wynik.innerHTML=a.value.length">
    <label>Wprowadź coś: <input id="a" type="text"></label>
    Ilość znaków: <output name="wynik">?</output>
  </form>
</div>

Przykład nr 6 – odwracanie ciągu znaków

Aby odwrócić wprowadzony ciąg znaków, wykorzystano kilka metod dostępnych w języku JavaScript.

Kod przykładu

W prowadzony w formularzu ciąg znaków jest dzielony na elementy tablicy zawierające pojedyncze znaki (metoda join()). Metoda reverse() odwraca kolejność elementów tablicy. Aby wyświetlić wynik, elementy tablicy zostają ostatecznie „sklejone” przy pomocy metody join().

<div id="tester-6">
  <form oninput="wynik.value=a.value.split('').reverse().join('');">
    Odwróć tekst: <input id="a" type="text">
    <output name="wynik"></output>
  </form>
</div>

Przykład nr 7 – zwielokrotnianie ciągu znaków

Za pomocą określonego w atrybucie wyrażenia oninput można wykonywać bardzo różne operacje, mocno oddalając się od typowych obliczeń. W prezentowanym przykładzie użytkownik wskazuje liczbę powtórzeń zdefiniowanego w wyrażeniu ciągu znaków.

Kod przykładu

Do powielania łańcucha znaków wykorzystano metodę repeat(). Przyjmuje ona argument, który określa liczbę powtórzeń.

<div id="tester-7">
  <form oninput="wynik.value='CKZiU '.repeat(a.valueAsNumber)">
    <label>CKZiU x <input id="a" type="number"></label>
    <output name="wynik"></output>
  </form>
</div>

Przykład nr 8 – prymitywna animacja

Posługując się strzałkami dostępnymi w polu wprowadzania danych, można uzyskać prymitywną animację.

Kod przykładu

Prezentowane rozwiązanie jest bardzo podobne do poprzedniego. Innowacją jest wykorzystanie w wyrażeniu konkatenacji.

<div id="tester-8">
  <form oninput="wynik.value='&nbsp; '.repeat(a.valueAsNumber)+'@'">
    <label>Porusz małpką: <input id="a" type="number"></label>
    <output name="wynik">@</output>
  </form>
</div>