WYKŁAD 4 JĘZYK JAVASCRIPT CZĘŚĆ 1
DEFINICJA JAVASCRIPT (oficjalna nazwa ECMA-262, ECMAScript 6 czerwiec 2015r.) Skryptowy język programowania, którego celem jest dodanie dynamiki do możliwości HTML'a. Umożliwia: manipulację wyglądem i położeniem elementów HTML; zmiany zawartości elementów HTML (innerhtml); pobieranie danych z formularzy i sprawdzanie ich poprawności; asynchroniczne ładowanie danych na stronę (Ajax);
CECHY JAVASCRIPT język skryptowy - nie musi być kompilowany do kodu maszynowego; ze względów bezpieczeństwa nie można zapisywać na dysku komputera, na którym przeglądana jest dana strona; wszelkie odwołania do funkcji i obiektów wykonywane są w trakcie wykonywania programu; pozwala na odciążenie serwerów i ograniczenie zbędnych danych, wysyłanych przez Internet; działa po stronie przeglądarki użytkownika.
ZAMIESZCZANIE KODU W HTML Kod JavaScript musi być zawarty pomiędzy znacznikami HTML a <script> i </script> Można go umieszczać w dowolnym miejscu dokumentu, ale o ile to tylko możliwe, umieszcza się go albo na początku strony w sekcji HEAD albo na końcu. w części <head> jeśli chcemy, żeby pliki załadowały się na początku pliki kluczowe dla działania strony; na końcu przed zamknięciem </body> jeśli chcemy, żeby pliki nie opóźniały ładowania elementów strony;
PRZYKŁAD <script type="text/javascript"> kod skryptu </script> <script type="text/javascript" src="nazwa_pliku.js"></script> <noscript>ta witryna wymaga obsługi skryptów.</noscript>
DOBRE PRAKTYKI JAVASCRIPT Dobrą praktyką jest: zamieszczanie kodu JavaScript w zewnętrznych plikach.js; zamieszczanie kodu JavaScript na końcu dokumentu; ładowanie asynchroniczne plików.js poprzez dodawanie atrybutu async do znacznika <script> o ile nie zakłóci to działania strony. <script async src= plik.js ></script> Zewnętrzne pliki są łatwiejsze do zarządzania, do tego poprzez umieszczenie ich w pamięci przeglądarki (cache) strony szybciej się ładują.
WYŚWIETLANIE INFORMACJI JavaScript nie posiada wbudowanych żadnych funkcji wyświetlających efekty działań. Można to osiągnąć na cztery sposoby wykorzystując: okno z komunikatem window.alert("cześć"), dokument HTML document.write("cześć"), element HTML innerhtml document.getelementbyid("demo").innerhtml = "to jest demo"; konsolę przeglądarki console.log("cześć").
WYŚWIETLANIE INFORMACJI Liczbę trzeba umieścić bezpośrednio w nawiasie okrągłym: document.write(1); Napis musi być ujęty w znaki cudzysłowu lub apostrofu: document.write("abc"); document.write('abc'); W jednej instrukcji można wyświetlić wiele oddzielnych liczb, tekstów i zmiennych łączenie odbywa się poprzez "+". document.write("abc " + 2.0 + " def " + 3);
ZMIENNE var zmienna; var liczba =5; Zmienne tworzone są za pomocą słowa kluczowego var lub przypisanie wartości. Nazwa zmiennej może być dowolna, choć musi spełniać następujące zasady: musi zaczynać się od litery lub znaku podkreślenia, może zawierać jedynie litery, cyfry i znaki podkreślenia, nie może zawierać znaków narodowych (czyli dopuszczalne są jedynie znaki alfabetu łacińskiego), w nazwach rozróżniane są małe i duże litery.
JS I NOTACJA WIELBŁĄDZIA (CAMEL CASE) Podczas tworzenia zmiennych programiści wykorzystują różne sposoby na łączenie kilku słów w jedną nazwę zmiennej: Łączniki: first-name, last-name, master-card, inter-city; Podkreślenia: first_name, last_name, master_card, inter_city. Camel Case: FirstName, LastName, MasterCard, InterCity. W JavaScript najpopularniejsza jest notacja wielbłądzia z pierwszą literą małą: Camel Case: firstname, lastname, mastercard, intercity. Łączniki nie są dozwolone w JavaScript interpretuje je jako operację odejmowania.
TYPY DANYCH var length = 16; // Number var lastname = "Johnson"; // String var cars = ["Saab", "Volvo", "BMW"]; // Array var x = {firstname:"john", lastname:"doe"}; // Object Typy danych są ważne z punktu widzenia programowania bez typów danych komputer nie wiedziałby, jakie operacje może wykonać. var x = 16 + 4 + "Volvo"; // 20Volvo var x = "Volvo" + 16 + 4; // Volvo164
FUNKCJE JAVASCRIPT Funkcja to blok kodu wywoływany na stronie: Przez zdarzenie (np. kliknięcie przycisku); Przez inną funkcję; Automatycznie (tzw. self invoked) function nazwafunkcji(arg1, arg2) { var x = arg1*arg2; } var x = nazwafunkcji(2, 5);
RETURN W FUNKCJACH Wewnątrz funkcji argumenty zachowują się jak zmienne lokalne, tzn. ich zmiany nie wpływają na kod poza funkcją. Return pozwala na przekazanie wyniku działania w funkcji na zewnątrz. function nazwafunkcji(arg1, arg2) { } var x = arg1*arg2; return x; var x = nazwafunkcji(2, 5);
OBIEKTY JAVASCRIPT Obiekt najłatwiej sobie można wyobrazić jako "pojemnik", wewnątrz którego umieszczone są zmienne (właściwości) i funkcje (metody). Obiektem może być kot. Kot będzie miał między innymi takie właściwości, jak: cat.age, cat.breed, cat.color oraz takie metody jak: cat.crazymode() i cat.purrmode() Wszystkie koty mają te same właściwości, ale różne wartości tych właściwości. Podobnie jest z metodami wszystkie koty je mają, jednak wywołują je w różnych momentach.
PRZYKŁAD OBIEKTU var cat = { age: 7, breed: "NFO", color: "black", crazymode: function() { window.alert("au! It s crazy cat! "); }, purrmode: function() { window.alert("oh, what a kitty!"); } }; cat.crazymode();
ZDARZENIA Zdarzenia w HTML to rzeczy, które przydarzają się elementom HTML lub dokumentowi. To na przykład przesunięcie kursora myszy, kliknięcie, załadowanie strony, opuszczenie strony itp. Każdy element strony ma przypisany zestaw obsługiwanych przez niego zdarzeń, a każdemu z nich można przypisywać własne procedury obsługi, napisane w JavaScript.
ZDARZENIA Obsługę danego zdarzenia można przypisać na dwa sposoby. 1. Jeśli jest bardzo krótka i może być zapisana w jednej linii kodu, można ją przypisać bezpośrednio do znacznika obsługującego dane zdarzenie nie zalecane: <znacznik zdarzenie="instrukcja;"> 2. W przypadku dłuższych procedur zdarzeniu należy przypisać jedynie wywołanie funkcji JavaScript: <znacznik zdarzenie="nazwafunkcji();"> <p onclick="nazwafunkcji();">
LISTA TYPOWYCH ZDARZEŃ (więcej: http://www.w3schools.com/jsref/dom_obj_event.asp) onfocus - kiedy element otrzymuje fokus; onblur - kiedy element traci fokus; onchange - kiedy element traci focus i zmienia się wartość; onclick - kiedy element został kliknięty; onmouseover - kiedy kursor myszy wejdzie w obszar elementu; onmouseout - kiedy kursor myszy opuści obszar elementu; onselect - podczas zaznaczania fragmentu tekstu; onsubmit - podczas wysyłania formularza; onload - kiedy przeglądarka zakończy ładowanie strony lub ramki; onunload - kiedy przeglądarka usuwa bieżący dokument.
MODEL DOM Model DOM (z ang. Document Object Model) czyli obiektowy model dokumentu pozwala na odwoływanie się do elementów witryny oraz ich zmienianie, dodawanie i usuwanie. HTML DOM definiuje: Elementy HTML jako obiekty; Właściwości wszystkich elementów HTML; Metody elementów HTML; Zdarzenia dla elementów HTML.
SCHEMAT DOM DOM jest modelem hierarchicznym i udostępnia zestaw obiektów odzwierciedlających dokument HTML oraz elementy okna przeglądarki. Jest to struktura drzewiasta, w której elementy niższego poziomu są węzłami elementów wyższego poziomu.
SCHEMAT DOM
SCHEMAT DOM Głównym, globalnym obiektem DOM przeglądarki jest window. W tym obiekcie przechowywane są wszystkie globalne zmienne i funkcje. W nim jest także obiekt document, który reprezentuje całą stronę www. W oparciu o DOM JavaScript może: Dodawać, zmieniać i usuwać wszystkie elementy HTML i ich atrybuty na stronie; Zmieniać wszystkie style i klasy CSS na stronie; Dodawać i reagować na wszystkie zdarzenia HTML na stronie;
PORUSZANIE PO DOM HTML Wszystkie elementy HTML na stronie są zawarte w obiekcie document drzewa DOM HTML i tworzą tzw. kolekcje elementów. Kolekcje elementów - tablice zawierające informacje o wszystkich elementach danego typu. Np.: kolekcja forms zawiera w sobie wszystkie formularze i odwołujemy się do niej poprzez document.forms. Ilość elementów w kolekcji odczytuje się za pomocą właściwości lenght var formscounter = document.forms.length;
PORUSZANIE PO DOM HTML Kolekcja document.forms zawiera wszystkie formularze na stronie. Jeśli formularz ma atrybut name, to można go wybrać po nazwie w kolekcji document.forms. <form name="form1"></form> <form name="form2"></form> Do pierwszego z formularzy można się odwołać poprzez instrukcje: document.forms["form1"] document.forms.form1 document.forms[0]
PORUSZANIE PO DOM HTML Wewnątrz obiektu formularza można odwoływać się do jego kontrolek po nazwach za pośrednictwem kolekcji elements lub bezpośrednio po nazwie: <input type= text name= elname > document.forms[0].texts['elname'] document.forms[0].elname Żeby nie powtarzać w kółko document.forms... można sobie przypisać obiekt formularza do zmiennej tymczasowej: var f = document.forms[0]; f.elname.value= Agnieszka ;
PODSTAWOWE METODY I WŁASNOŚCI Metoda getelementbyid(id) Jeśli element ma identyfikator, to można go znaleźć za pomocą getelementbyid(id). Jest to najczęściej używany sposób dostępu do elementu. Własność innerhtml Najprostszy sposób na pobranie lub zastąpienie zawartości elementu. document.getelementbyid("demo").innerhtml = "Hello World!"; Własność innerhtml może być użyta do każdego elementu HTML, także <html> i <body>.
ODNAJDYWANIE ELEMENTÓW HTML document.getelementbyid(id) wykorzystuje element ID PRZED: <p id= demo > </p> // <p class= full >Akapit</p> // Akapit <script> document.getelementbyid( demo ).innerhtml= Lepszy akapit ; </script> PO: <p id= demo > </p> // Lepszy akapit <p class= full >Akapit</p> // Akapit
ODNAJDYWANIE ELEMENTÓW HTML document.getelementsbytagname(name) - wykorzystuje znacznik; PRZED: <p id= demo > </p> // Lepszy akapit <p class= full >Akapit</p> // Akapit <script> document.getelementbytagname( p ).innerhtml= Zwykły akapit ; </script> PO: <p id= demo > </p> // Zwykły akapit <p class= full >Akapit</p> // Zwykły akapit
ODNAJDYWANIE ELEMENTÓW HTML document.getelementsbyclassname(name) wykorzystuje klasę; PRZED: <p id= demo > </p> // Lepszy akapit <p class= full >Akapit</p> // Akapit <script> document.getelementbyclassname( full ).innerhtml= Jestem najlepszy! ; </script> PO: <p id= demo > </p> // Zwykły akapit <p class= full >Akapit</p> // Jestem najlepszy!
ZMIANA ELEMENTÓW HTML element.innerhtml zmienia zawartość elementu HTML; element.attribute - zmienia wartość atrybutu elementu HTML; document.getelementbyid( demo ).value= Brukselka ; document.getelementbyid( demo ).classname= title ; element.setattribute(attribute, value) - zmienia wartość atrybutu elementu HTML; element.style.property zmienia styl elementu HTML; document.getelementbyid( demo ).style.width= 200px ; document.getelementbyid( demo ).style.bordercolor = #ff0000 ;
ZMIANA ELEMENTÓW HTML element.style.property oraz element.classname Dzięki możliwości modyfikowania stylu danego elementu możliwe jest uzyskanie ciekawych efektów: Ukrywanie elementów: element.style.display = 'none' Zmiana pozycji elementów: element.style.left = x + 'px'; Przy używaniu nazw styli wykorzystuje się również notację wielbłądzią (camel case). background-color = backgroundcolor float = cssfloat Zaleca się jednak wykorzystywanie własności classname, w celu oddzielenia kodu JavaScript od wyglądu strony.
DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE http://www.w3schools.com/js/default.asp