Powrót

unobtrusive scripting – technika pisania dyskretnych skryptów

metody:

  • graceful degradation – kontrolowana degradacja
  • progressive enhancement – progresywne ulepszanie
  • unikanie rozwiązań zależnych od przeglądarki
  • pisanie dokumentacji
  • użyteczność
  • wzorce projektowe
  • dostępność – dla wszystkich użytkowników, również niepełnosprawnych

obszary:

  • treść – słowa, tekst oznaczony poprzez HTML
  • prezentacja – wygląd i układ, formatowanie tekstu, kolor, grafika poprzez kaskadowe arkusze stylów CSS
  • zachowanie – interakcje ze stroną, efekt hover, wypełnianie pól, itp – poprzez JS oraz PHP

 

Separacja struktury od wyglądu i od funkcjonalności.

zamiast:


<body onLoad="Startup"();">

dajemy:


window.onload=Startup;

 

Model zdarzeń W3C

dodanie funkcji obsługi zdarzeń:

metoda addEventListener() – dołączenie funkcji obsługi zdarzeń do dowolnego zdarzenia dowolnego elementu.

window.addEventListener(’load’, Startup, false);

parametry:

  • ’load’ – nazwa zdarzenia bez prefiksu on
  • Startup – funkcja obsługująca zdarzenie
  • zaawansowany znacznik, jak powinna być traktowana większa liczba zdarzeń (false działa w większości zastosowań)

dołączamy tak dowolną liczbę funkcji.

 

dla IE 6 i 7 – działa metoda window.attachEvent(’onload’, Startup);

parametry:

  • ’onload’ – nazwa zdarzenia z prefiksem on
  • Startup – funkcja obsługująca zdarzenie

 

usunięcie funkcji obsługi zdarzeń

metoda removeEventListener() – usunięcie funkcji obsługi zdarzeń.

window.removeEventListener(’load’, Startup, false);

 

dla IE 6 i 7 – metoda window.detachEvent(’onload’, Startup);

 

Sprawdzenie czy przeglądarka obsługuje daną metodę – feature sensing – wykrywanie funkcjonalności:


obj = document.getElementById('myButton');
if (obj.addEventListener) {
  obj.addEventListener('click', ClickMe, false);
} else if (obj.attachEvent()) {
  obj.attachEvent('onclick', ClickMe);
} else {
  obj.onclick = ClickMe;
}

–

 

Hope this helps and happy coding :)

Zobacz jeszcze

this JavaScript

odwołanie się do elementu zaznaczonego w form do zmiany koloru tekstu lub tła strony: <!DOCTYPE html> <html id="b1"> <head> <script> function...

ograniczenie wyświetlonego tekstu

uzyskanie ograniczonej ilości wyrazów w jednolinikowym polu tekstowym: #test { width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border:...

Powrót