Lekcja 12

Formularze w JS

1. formularze
2. onchange - TEXT
3. oninput - TEXT
4. onclick - RADIO
5. onclick - CHECKBOX
6. onchange - SELECT
7. generator tabel
8. funkcje tekstowe

Własności formularzy
Formularze na stronach WWW umożliwiają wymianę danych pomiędzy użytkownikiem, a stroną internetową. Typowymi elementami formularzy są pola tekstowe TEXT i TEXTAREA, przyciski BUTTON, pola opcji RADIO, wyboru CHECKBOX i listy SELECT i OPTION. Elementy formularzy definiujemy za pomocą znaczników HTML, natomiast obsługa należy do JavaScript. Podstawowymi własnościami elementów formularzy są nazwa elementu NAME, wartość VALUE oraz oznaczenie ID.

Odwołanie do elementów formularza i strony WWW w JavaScript realizujemy za pomocą metody getElementByID i własności innerHTML. W znaczniku definiujemy zdarzenie onchange, onclick, lub podobne. W przypisanej do zdarzenia funkcji pobieramy wartość elementu formularza za pomocą własności value.

onchange
Zdarzenie onchange jest wywoływane za każdym razem, podczas wychodzenia z niego, gdy pole uległo zmianie.

<form>
  Wpisz imię:<input type="text" id="IMIE" onchange=Fimie()>
  <input type="text" id="EIMI">
</form>
<p id="NAZW">Wacław Libront</p>
<div id="WYNIK" value=""></div>

<script>
function Fimie(){
  //pobieranie informacji z pola formularza IMIE
  var x=IMIE.value;
  var xx="";
  //napis odwrotnie
  for (var i=x.length-1;i>=0;i--) xx = xx + x[i];
  //wstawianie do pola formularza
  EIMI.value=xx;
  //pobieranie z dowolnego elementu strony - NAZW 
  var y=document.getElementById("NAZW").innerHTML;
  var yy="";
  for (var i=y.length-1;i>=0;i--) yy = yy + y[i];
  //zapisywanie do dowolnego elementu strony
  document.getElementById("WYNIK").innerHTML = yy;
}
</script>

Na stronie zdefiniowano dwa pola tekstowe IMIE i EMI. Za pomocą instrukcji IMIE.value możemy pobrać zawartość pola do zmiennej. W podobny sposób przypisujemy i wyświetlamy na stronie.

Na stronie zdefiniowano również dwa elementy NAZW i WYNIK. Pobieranie i przypisywanie do elementów na stronie realizujemy za pomocą konstrukcji document.getElementById("NAZW").innerHTML.

oninput
Zdarzenie oninput aktywuje się po każdej zmianie – za każdym razem, gdy wciśniemy w polu tekstowym jakiś klawisz.

<form>
  Imie:<input type="text" id="PASS" oninput=Pimie()>
</form>
<script>
function Pimie(){
  var x=PASS.value;
  var xx="";
  for (var i=x.length-1;i>=0;i--) xx = xx + x[i];
  PASS.value=xx;
}
</script>

Funkcja Pimie jest uruchamiana po każdej zmianie w polu PASS i (znanym sposobem) odwraca napis.

onclick - pole RADIO
Zdarzenie onclick aktywuje się po każdym kliknięciu myszką w pole.

<form>
  <input type="radio" value="m" name="plec" id="PLEC" checked="checked" onclick=Klik(0)> m
  <input type="radio" value="k" name="plec" id="PLEC" onclick=Klik(1)> k
</form>
<div id="WYNIK" value=""></div>

<script>
function Klik(co){ 
  //alert(PLEC[co].value); 
  //za pomocą własności pola value  
  if (PLEC[co].value == 'm') yy="mężczyzna"
    else yy="kobieta";
  document.getElementById("WYNIK").innerHTML = yy;
  //za pomocą parametru CO
  if (co == 0) yy="mężczyzna"
    else yy="kobieta";
  document.getElementById("WYNIK").innerHTML = yy}
</script>

Pola RADIO służą do wyboru jednej z dwóch lub wielu różnych opcji - można wybrać tylko jedną z nich. Prostym sposobem na sprawdzenie, która z nich została wybrana jest przypisanie do każdego pola tej samej funkcji z innym parametrem. Sprawdzać możemy własność value, albo też podaną jako parametr wartość. Zwróć uwagę, że wszystkie pola mają własność id równą PLEC.

onclick - pole CHECKBOX
Pole wyboru możemy obsługiwać w podobny sposób, jak pole opcji. Możemy też sprawdzać w pętli własność checked. Przycisk – button obsługujemy za pomocą funkcji przypisanej do własności onclick.

<form>
  pol<INPUT type="checkbox" id="PRZ" name="prz" value="polski">
  ang<INPUT type="checkbox" id="PRZ" name="prz" value="angielski">
  mat<INPUT type="checkbox" id="PRZ" name="prz" value="matematyka">
  fiz<INPUT type="checkbox" id="PRZ" name="prz" value="fizyka">
  <input type="button" value="SPRAWDŹ" onclick="spr()">
</form>
<div id="WYNIK" value=""></div>

<script>
function spr(){
  var pp="";
  for (var i=0;i<PRZ.length;i++)
    if (PRZ[i].checked) 
      pp=pp+PRZ[i].value+" ";  
  document.getElementById("WYNIK").innerHTML = pp;
}
</script>

Do przycisku SPRAWDŹ przypisano funkcję spr(), która w pętli "przelatuje" przez wszystkie pola wyboru formularza. Jeśli własność checked pola jest prawdziwa (pole zaznaczone), to napis pp jest powiększany i odpowiedni napis. Zwróć uwagę, że wszystkie pola wyboru mają własność id równą PRZ.

onchange - pole SELECT-OPTION
Listy jednorazowego wyboru można obsługiwać za pomocą zdarzenia onchange. Sprawdzamy w pwłasność selectedIndex. Lista wielokrotnego wyboru ma ustawioną własność multiple. Najlepiej sprawdzać ją za pomocą osobnego przycisku i pętli. Sprawdzamy własność selected. Aby zaznaczyć na liście kilka pozycji posługujemy się klawiszem CTRL lub SHIFT.

<form>
  <SELECT id="LISTA" 
    onchange="Flista()">
    <option value="polski">pol
    <option value="angielski">ang
    <option value="matematyka">mat
    <option value="fizyka">fiz
  </SELECT>
</form>

<form>
  <SELECT id="MULTI" multiple>
    <option value="polski">pol
    <option value="angielski">ang
    <option value="matematyka">mat
    <option value="fizyka">fiz
  </SELECT>
  <input type="button" value="SPRAWDŹ"   
    onclick="Wlista()">
</form>
<div id="WYNIK" value=""></div>

<script>
// lista jednokrotnego wyboru
function Flista(){
  numer=LISTA.selectedIndex;
  document.getElementById("WYNIK").innerHTML = LISTA[numer].value;
}

// lista wielokrotnego wyboru
function Wlista(){
  var pp="";
  for (var i=0;i<MULTI.length;i++)
  if (MULTI[i].selected)   
    pp=pp+MULTI[i].value+" ";
  document.getElementById("WYNIK").innerHTML = pp;
}
</script>

Do pola WYNIK wstawiamy wynik wyboru listy jednokrotnego lub wielokrotnego wyboru. W pierwszym przypadku posługujemy się własnością selectedindex, która podaje numer wybranego pola listy (licząc od zera jak w tablicy).

W przypadku listy wielokrotnego wyboru sprawdzamy własność selected w pętli, która jest prawdziwa, gdy pole jest wybrane.

Generator tabel
Praktycznym sprawdzianem nabytych umiejętności będzie automatyczne tworzenie na stronie WWW tabel. Pobieramy z pól tekstowych ilość wierszy i kolumn. W dwóch pętlach sklejamy z fragmentów znaczników HTML tekst tworzący tabelę. Na końcu wstawiamy wytworzony zestaw znaczników do pola div - indeks TT.

<form>
  wiersze:<input type="text" id="TW">
  kolumny:<input type="text" id="TK">
  <input type="button" value="TWÓRZ" onclick="RobTab()">
</form>
<div id=tt></div>

<script>
function RobTab(){
  var wi=TW.value;
  var ko=TK.value;
  var tabela="";
  tabela=tabela + "<TABLE border=1>";
  for (var w=0;w<wi;w++){
    tabela=tabela + "<tr height=30>";
    for (var k=0;k<ko;k++){
      tabela=tabela+"<td width=30 align=center>";
      tabela=tabela+(w+1)*(k+1);
      tabela=tabela+"</td>";
    }
    tabela=tabela + "</tr>";
  }
  tabela=tabela + "</TABLE>";
  document.getElementById("tt").innerHTML=tabela;
}
</script>

Funkcja RobTab pobiera z pól tekstowych wpisane ilości wierszy i kolumn - pola TW i TK tworzonej tabeli. Funkcja skleja z kawałków tekstów kod HTML. Na końcu tekst ze znacznikami jest wstawiany do pola tt.

Teksty, liczby i daty

Operacje na napisach

• napis.length - ilość znaków

• napis.indexOf(tekst) - pozycja tekstu w napisie

• napis.substring(n,m) - wycina z napisu ciąg znaków od pozycji n do pozycji m-1 włącznie

• napis.charAt(n) - zwraca znak o numerze n

• napis.toLowerCase() – małe litery

• napis.toUpperCase() – duże litery

Operacje data i czas

• teraz=new Date()

• g=teraz.getHours()

• m=teraz.getMinutes()

• s=teraz.getSeconds()

• ro=teraz.getYear()

• mi=teraz.getMonth()

• dz=teraz.getDay();