Aplikacje internetowe Podstawy programowania w języku JavaScript Roman Simiński roman.siminski@us.edu.pl www.siminskionline.pl Tworzenie prostych programów w środowisku przeglądarki
W jaki sposób umieszczany jest kod JS w dokumencie HTML? Kod umieszcza się w obrębie znacznika : Kod w języku JavaScript Dawniej określało się atrybut type, teraz nie jest to konieczne: <script type="text/javascript"> Kod w języku JavaScript 2
W jaki sposób umieszczany jest kod JS w dokumencie HTML? Przykład: alert("czołem!\njavascript wita :)"); Funkcja alert wyświetla komunikat message w oknie dialogowym wraz z przyciskiem OK. Funkcja alert nie udostępnia rezultatu: alert( message ) Wygląd okna dialogowego może się różnić w zależności od przeglądarki. Ćwiczenie: Proszę sprawdzić wygląd okna dialogowego funkcji alert w różnych przeglądarkach. 3
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja I: kod w obrębie znacznika :... Kod w języku JavaScript... 4
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja I, przykład: Tak umieszczony kod wykona się samoczynnie w trakcie interpretacji przez przeglądarkę sekcji body. <h1>kod JS w sekcji body</h1> alert("czołem!\njavascript wita :)"); Uwaga w niektórych przeglądarkach zawartość sekcji <h1> pojawi się dopiero po zamknięciu okna wyświetlanego funkcją alert. 5
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja II: kod w obrębie znacznika <head>: <head> Kod w języku JavaScript </head> W ten sposób umieszcza się najczęściej kod funkcji. 6
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja II, przykład: <head> Tak umieszczony kod wykona się samoczynnie w trakcie interpretacji przez przeglądarkę sekcji head. alert("czołem!\njavascript wita :)"); </head> <h1>kod JS w sekcji head</h1> 7
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja III, kod w osobnym pliku: <h1>kod JS w sekcji body</h1> <script src="kodwpliku.js"> Kod w sekcji body <head> <script src="kodwpliku.js"> </head> Kod w sekcji head <h1>kod JS w sekcji head</h1> 8
Dygresja JavaScript a programowanie zdarzeniowe Zdarzenie (ang. event) to coś, co może przytrafić się elementowi HTML. Najczęściej spotykane zdarzenia: Zdarzenie onclick onchange onmouseover onmouseout onkeydown onload Opis Gdy użytkownik kliknie element HTML Gdy element HTML został zmieniony Gdy muszka przemieszcza się nad elementem HTML Gdy myszka opuszcza element HTML Gdy użytkownik naciska klawisz klawiaturowy Gdy dokument HTML został załadowany przez przeglądarkę Ogólna składnia aktywowania kodu JS dla zdarzenia: <jakiś-znacznik_html jakieś-zdarzenie='kod JavaScript'> <jakiś-znacznik_html jakieś-zdarzenie= kod JavaScript > 9
Gdzie umieszcza się kod JS w dokumencie HTML? Wersja IV, kod JS aktywowany zdarzeniowo: <body onload="alert('czołem!\njavascript wita :)')"> <h1>kod JS w on load sekcji body</h1> <h1>kod JS w onclick przycisku</h1> <button onclick="alert('czołem!\njavascript wita :)')"> Kliknij proszę </button> 10
Wyprowadzanie informacji wyjściowych Znane już okienko dialogowe alert: <h1>kod JS w onclick przycisku</h1> <button onclick="alert('czołem!\njavascript wita :)')"> Kliknij proszę </button> 11
Wyprowadzanie informacji wyjściowych Bezpośrednie pisanie do dokumentu HTML: <h1>pisanie do dokumentu</h1> document.write("<em>tekst z JS</em><br />"); document.write(2 * 2); Uwaga document to obiekt reprezentujący aktualnie załadowany dokument HTML. Metody tego obiektu mogą być wywoływane z pominięciem jego nazwy. document.write("<em>tekst z JS</em><br />"); write("<em>tekst z JS</em><br />"); 12
Wstawianie danych do elementów HTML Aby kod JS mógł operować na elementach HTML opracowano DOM Document Object Model. HTML DOM jest standardem określającym jak pobierać, zmieniać, dodawać i usuwać elementy z dokumentu HTML załadowanego do przeglądarki. HTML DOM jest niezależny od środowiska, przeglądarki, języka, pozwala na dynamiczne modyfikowanie zarówno treści elementów dokumentu HTML jak i ich struktury oraz wyglądu. HTML DOM pozwala na: odwoływanie się do elementów HTML jak do obiektów w prog. obiektowym; dostęp do wszystkich właściwości elementu HTML jak do właściwości; dostęp do metod oraz zdarzeń związanych z elementem. 13
Wstawianie danych do elementów HTML Dostęp do konkretnych, unikatowych elementów HTML uzyskuje się poprzez: przydzielenie elementowi unikatowego identyfikatora id, wykorzystanie funkcji getelementbyid w celu uzyskania referencji do obiektu reprezentującego element HTML w DOM' Wykorzystanie właściwości innerhtml. <p id="info"></p> Pusty paragraf z określonym id Pobranie referencji i zapamiętanie w zmienne paragraf var paragraf = document.getelementbyid("info"); paragraf.innerhtml = "Witaj w świecie JavaScript"; Wykorzystanie właściwości innerhtml 14
Wstawianie danych do elementów HTML Odwołania do elementów HTML można realizować z wykorzystaniem zmiennych referencyjnych: var paragraf = document.getelementbyid("info"); paragraf.innerhtml = "Witaj w świecie JavaScript"; lub odwołując się bezpośrednio do referencji, będącej rezultatem funkcji getelementbyid: document.getelementbyid("info").innerhtml = "Witaj w świecie JavaScript"; Wykorzystanie zmiennych referencyjnych pozwala na kontrolę poprawności odwołań: var paragraf = document.getelementbyid("inf o"); if(paragraf!= null) paragraf.innerhtml = "Witaj w świecie JavaScript"; else document.write("paragraf nie został odnaleziony"); 15
Wstawianie danych do elementów HTML Odwołania do elementów HTML można realizować z wykorzystaniem zmiennych referencyjnych: var paragraf = document.getelementbyid("info"); paragraf.innerhtml = "Witaj w świecie JavaScript"; lub odwołując się bezpośrednio do referencji, będącej rezultatem funkcji getelementbyid: document.getelementbyid("info").innerhtml = "Witaj w świecie JavaScript"; Wykorzystanie zmiennych referencyjnych pozwala na kontrolę poprawności odwołań: var paragraf = document.getelementbyid("inf o"); if(paragraf!= null) paragraf.innerhtml = "Witaj w świecie JavaScript"; else document.write("paragraf nie został odnaleziony"); 16
Manipulowanie wyglądem elementów HTML Obiekty w DOM posiadają szereg właściwości, można nimi dość dowolnie manipulować.... <p id="info"></p> var paragraf = document.getelementbyid("info"); paragraf.innerhtml = "Paragraf z dynamicznie określoną treścia i wyglądem"; paragraf.style.color = "blue"; paragraf.style.fontfamily = "Arial"; paragraf.style.fontsize = "larger";... 17
Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Funkcje to nazwany blok instrukcji, uaktywniany na żądanie. <head> function pokazalert(komunikat) { alert(komunikat); } </head> Definicja funkcji pokazalert pokazalert("wywołanie funkcji"); Wywołanie funkcji pokazalert 18
Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Przekazywanie parametrów dwa ważne pojęcia <head> function pokazalert(komunikat) { alert(komunikat); } </head> Parametr formalny funkcji pokazalert("wywołanie funkcji"); Parametr aktualny wywołania funkcji 19
Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Przekazywanie parametrów <head> function pokazalert(komunikat) { alert(komunikat); } </head> pokazalert("wywołanie funkcji"); komunikat Wywołanie funkcji Parametr formalny funkcji Wartość parametru aktualnego 20
Przykładowy program Należy napisać program przeliczający odległość wyrażoną w milach amerykańskich na kilometry. <head> </head> <h1>przeliczanie mil na kilometry</h1> <p>proszę wprowadzić odległość w milach:</p> <input id="kilometry" type="text"><br /> <button>przelicz na kilometry</button> <p id="wynik"></p> 21
Przykładowy program obsługa zdarzenia onclick <head> function przelicz() { var odleglosc = document.getelementbyid("kilometry").value; document.getelementbyid("wynik").innerhtml = "Odległość w kilometrach: " + (odleglosc * 1.6); } </head> <h1>przeliczanie mil na kilometry</h1> <p>proszę wprowadzić odległość w milach:</p> <input id="kilometry" type="text"><br /> <button onclick="przelicz()">przelicz na kilometry</button> <p id="wynik"></p> 22
Przykładowy program funkcja przeliczająca <head> Wydobycie wartości z elementu kilometry function przelicz() { var odleglosc = document.getelementbyid("kilometry").value; document.getelementbyid("wynik").innerhtml = "Odległość w kilometrach: " + (odleglosc * 1.6); } </head> Przeliczenie i wstawienie wyniku do paragrafu wyjściowego <h1>przeliczanie mil na kilometry</h1> <p>proszę wprowadzić odległość w milach:</p> <input id="kilometry" type="text"><br /> <button onclick="przelicz()">przelicz na kilometry</button> <p id="wynik"></p> 23
Przykładowy program walidacja danych function przelicz() { var odleglosc = document.getelementbyid("kilometry").value; if(isnan(odleglosc) odleglosc == "") document.getelementbyid("wynik").innerhtml = "Błędna odległość"; else document.getelementbyid("wynik").innerhtml = "Odległość w kilometrach: " + (odleglosc * 1.6); } 24
Przykładowy program zaokrąglenie wyniku function przelicz() { var odleglosc = document.getelementbyid("kilometry").value; if(isnan(odleglosc) odleglosc == "") document.getelementbyid("wynik").innerhtml = "Błędna odległość"; else { var wynik = odleglosc * 1.6; document.getelementbyid("wynik").innerhtml = "Odległość w kilometrach: " + wynik.tofixed(2); } } Ćwiczenie: Proszę napisać program przeliczający odległość wyrażoną w kilometrach na : mile amerykańskie, morskie, cale, jardy, stopy, wiorsty, pacierze.... 25
Program przykładowy średnie spalanie Zadaniem skryptu na stronie WWW jest obliczanie, ile średnio litrów paliwa spala pojazd na trasie 100 km. Wartość ta zwana dalej średnim spalaniem obliczana jest na podstawie ilości zużytego przez pojazd paliwa oraz liczby przejechanych kilometrów. przejechany dystans [km] ilość paliwa [litry] 100 [km] x [litry] spalanie = ( 100 * ilość paliwa ) / przejechany dystans Copyright Roma Simiński Strona : 26
Program przykładowy średnie spalanie Komunikacja: <head> </head> Elementy typu input, z których będą pobrane dane <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> 27
Program przykładowy średnie spalanie Komunikacja: <head> </head> Paragraf przewidziany dla wyniku, na starcie pusty <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> 28
Program przykładowy średnie spalanie Komunikacja: <head> </head> Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem przycisku Oblicz <h2>obliczanie średniego spalania na 100 km</h2> <p>paliwo : <input type="text" id="p" /> [litry]</p> <p>dystans: <input type="text" id="d" /> [kilometry]</p> <input type="button" value="oblicz" onclick="spalanie()" /> <p id="w"></p> 29
Program przykładowy średnie spalanie <head> Pobierz dane jako łańcuchy znaków <script > function spalanie() { var p = document.getelementbyid("p").value; var d = document.getelementbyid("d").value; var out = document.getelementbyid( "w" ); if(isnan( p ) isnan( d ) p === "" d === "") out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else { if(d!= 0) out.innerhtml = "Spalanie: " + (p * 100) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; } } Zabezpieczenie przed dzieleniem przez zero, obliczenia, wstawienie </head> wyniku do par. wyjściowego 30
Program przykładowy średnie spalanie Wynik z wieloma miejscami po przecinku: function spalanie() { var p = document.getelementbyid("p").value; var d = document.getelementbyid("d").value; var out = document.getelementbyid( "w" ); } if(isnan( p ) isnan( d ) p === "" d === "") out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else { if(d!= 0) out.innerhtml = "Spalanie: " + (p * 100) / d + " l/100km"; else out.innerhtml = "Dystans musi być liczba dodatnią!"; } 31
Program przykładowy średnie spalanie Ustalenie liczby miejsc po przecinku i ignorowanie wartości ujemnych: function spalanie() { var p = document.getelementbyid("p").value; var d = document.getelementbyid("d").value; var out = document.getelementbyid( "w" ); } if(isnan( p ) isnan( d ) p === "" d === "") out.innerhtml = "Dystans i ilość paliwa muszą być liczbami!"; else { if(d!= 0) { var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d ); out.innerhtml = "Spalanie: " + wynik.tofixed( 2 ) + " l/100km"; } else out.innerhtml = "Dystans musi być liczba dodatnią!"; } 32
Program przykładowy średnie spalanie Ciąg dalszy nastąpi... 33