Zdarzenia i skrypty

Karta pracy 2017/2018

Adres:
plotkarka.eu/KP/zdarzenia.html
Autor:
Radosław Kowaluk

Atrybuty zdarzeń

 

W swoim folderze roboczym utwórz dokument zdarzenia.html (wykorzystaj plik szablonu i metodę kopiuj-wklej):

<!DOCTYPE html>
<html>
 <head>
  <title>Zdarzenia i skrypty</title>
 </head>
 <body>

 </body>
</html>

Pojedyncze kliknięcie1 i zmiana atrybutu bieżącego elementu2

W źródle pliku, w elemencie body dopisz kod.

 <body>
  <input type="button" value="test 1"
   onclick="value='element kliknięty'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wskazanie  elementu3

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="button" value="test 2"
   onmouseover="value='element wskazany'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Opuszczenie elementu4

W źródle pliku, w znaczniku input dopisz kod.

  <input type="button" value="test 2"
   onmouseover="value='element wskazany'"
   onmouseout="value='element niewskazany'">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Aktywacja elementu5

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="text" value="test 3"
   onfocus="value='element aktywny'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Dezaktywacji elementu6

W źródle pliku, w znaczniku input dopisz kod.

  <input type="text" value="test 3"
   onfocus="value='element aktywny'"
   onblur="value='element nieaktywny'">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Naciśnięcie klawisza  elementu7

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="text" value="test 4"
   onkeypress="value='naciśnięto klawisz'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Modyfikacja  elementu8

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="text" value="test 5"
   onchange="value='zmieniono tekst'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wczytanie strony9, okno komunikatu10

W źródle pliku, w znaczniku body dopisz kod.

 <body onload="alert('Test 6')">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze po sprawdzeniu poprawności.

  1. Atrybut onclick - definiuje zdarzenie po kliknięciu w element.
  2. Wartością atrybutów zdarzeń jest skrypt. Skrypt zmiany atrybutu bieżącego elementu: zdarzenie="atrybut='nowa wartość'"
  3. Atrybut onmouseover - zdarzenie wskazania kursorem na element.
  4. Atrybut onmouseout - zdarzenie opuszczenia kursora z elementu.
  5. Atrybut onfocus - zdarzenie aktywowania elementu.
  6. Atrybut onblur - zdarzenie dezaktywowania elementu.
  7. Atrybut onkeypress - zdarzenie naciśnięcia klawisza dla elementu.
  8. Atrybut onchange - zdarzenie zmiany, modyfikacji elementu.
  9. Atrybut onload - definiuje zdarzenie wczytania strony.
  10. Metoda alert() - wywołanie okna komunikatu z tekstem określonym jako argument.

Zdarzenia zaawansowane

Podwójne kliknięcie1

W źródle pliku, w elemencie body dopisz kod.

 <br/>
  <input type="button" value="test 10"
   ondblclick="value='element kliknięty'">
  <br>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Poruszenie kursorem nad elementem2

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="button" value="test 11"
   onmousemove="value='element wskazany'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wciśnięcia przycisku elementu3

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="text" value="test 12"
   onmousedown="value='wciśnięto przycisk'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Puszczenie przycisku elementu4

W źródle pliku, w znaczniku input dopisz kod.

  <input type="text" value="test 12"
   onmousedown="value='wciśnięto przycisk'"
   onmouseout="value='puszczono puszczono'">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wciśnięcia klawisza elementu5

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <input type="text" value="test 13"
   onkeydown="value='wciśnięto klawisz'">
  <br/>
 </body>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Puszczenie klawisza elementu6

W źródle pliku, w znaczniku input dopisz kod.

  <input type="text value="test 13"
   onkeydown="value='wciśnięto klawisz'"
   onkeyup="value='puszczono klawisz'">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Zaznaczenie zawartości pola formularza7

W źródle pliku, w elemencie body dopisz kod.

  <br/>
  <form>  
   <textarea onselect="alert('Zaznaczono tekst')">
    test 14
   </textarea>
   <input type="submit" value="wyślij">
  </form>

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Wysłanie formularza8

W źródle pliku, w znaczniku form dopisz kod.

  <form onsubmit="alert('wysłano formularz')">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Opuszczenie strony9

W źródle pliku, w znaczniku body dopisz kod.

 <body onload="alert('Test 6')"
   onunload="alert('Test 15')">

Zapisz dokument i otwórz go w przeglądarce. Przetestuj skrypt.

Skrypt strony

Skrypt strony10, język programowania11

W źródle pliku, w elemencie head dopisz kod. Zapisz dokument i otwórz go w przeglądarce.

  <title>Zdarzenia i skrypty</title>
  <script>
   alert("Ta strona nie używa ciasteczek")
  </script>
 </head>

Tekst alternatywny12

W źródle pliku, w elemencie head dopisz kod. Zapisz dokument i otwórz go w przeglądarce.

  </script>
  <noscript>
Ta strona nie obsługuje skryptów
  </noscript>
 </head>

Wgrywanie plików na serwer

Umieść pliki ćwiczeniowe na serwerze po sprawdzeniu poprawności.

Nowe elementy w HTML5 12

  1. Atrybut ondblclick - zdarzenie po podwójnym kliknięciu w element.
  2. Atrybut onmousemove - zdarzenie poruszenia kursorem nad elementem.
  3. Atrybut onmousedown - zdarzenie przycisku myszy przy aktywnym elemencie..
  4. Atrybut onmouseout - zdarzenie puszczenia przycisku myszy.
  5. Atrybut onkeydown - zdarzenie naciśnięcia klawisza dla elementu.
  6. Atrybut onkeyup - zdarzenie puszczenia klawisza.
  7. Atrybut onselect - zdarzenie zaznaczenia tekstu w polu formularza.
  8. Atrybut onsubmit - zdarzenie wysyłania formularza.
  9. Atrybut onunload - zdarzenie przejścia na inną stronę.
  10. Element <script> - zawiera kod skryptu w języku programowania wskazanym w atrybucie type.
  11. Użyty zapis, wprowadzony w HTML 5 jest formą skróconą kodu: <script type="text/javascript">, W przypadku użycia języka skryptowego, innego niż javascript, należy określić jego nazwę w atrybucie type.
  12. Element <noscript> - zawiera kod lub tekst alternatywny skryptu.
  13. Elementy: <canvas>, <template>,