Aplikacje internetowe - Programowanie

(1)

Aplikacje internetowe Aplikacje internetowe

Podstawy programowania w języku JavaScript Podstawy programowania w języku JavaScript

Roman Simiński

[email protected] www.siminskionline.pl

Tworzenie prostych programów w środowisku przeglądarki

(2)

W jaki sposób umieszczany jest kod JS w dokumencie HTML?

Kod umieszcza się w obrębie znacznika <script> :

<script>

Kod w języku JavaScript

</script>

Dawniej określało się atrybut type, teraz nie jest to konieczne:

<script type="text/javascript">

</script>

(3)

W jaki sposób umieszczany jest kod JS w dokumencie HTML?

Przykład:

<script>

alert("Czołem!\nJavaScript wita :)");

</script>

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.

(4)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja I: kod w obrębie znacznika <body> :

<!DOCTYPE html>

<html>

<body>

. . .

</script>

. . .

</body>

</html>

(5)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja I, przykład:

<!DOCTYPE html>

<html>

<body>

<h1>Kod JS w sekcji body</h1>

</script>

</body>

</html>

Tak umieszczony kod wykona się „samoczynnie” w trakcie interpretacji przez przeglądarkę sekcji body.

Uwaga – w niektórych przeglądarkach zawartość sekcji <h1> pojawi się dopiero po zamknięciu okna wyświetlanego funkcją alert.

Uwaga – w niektórych przeglądarkach zawartość sekcji <h1> pojawi się dopiero po

zamknięciu okna wyświetlanego funkcją alert.

(6)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja II: kod w obrębie znacznika <head> :

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

</body>

</html>

W ten sposób umieszcza się najczęściej kod funkcji.

(7)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja II, przykład:

<!DOCTYPE html>

<html>

<head>

</script>

</head>

<body>

<h1>Kod JS w sekcji head</h1>

</body>

</html>

Tak umieszczony kod wykona się „samoczynnie” w trakcie interpretacji przez przeglądarkę sekcji head.

Tak umieszczony kod wykona się „samoczynnie” w trakcie

interpretacji przez przeglądarkę sekcji head.

(8)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja III, kod w osobnym pliku:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>Kod JS w sekcji head</h1>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h1>Kod JS w sekcji body</h1>

</body>

</html>

Kod w sekcji body Kod w sekcji body

Kod w sekcji head

(9)

Dygresja – JavaScript a programowanie zdarzeniowe Dygresja – JavaScript a programowanie zdarzeniowe

Zdarzenie (ang. event) to coś, co może przytrafić się elementowi HTML.

Najczęściej spotykane zdarzenia:

Zdarzenie Opis

onclick Gdy użytkownik kliknie element HTML onchange Gdy element HTML został zmieniony

onmouseover Gdy muszka przemieszcza się nad elementem HTML onmouseout Gdy myszka opuszcza element HTML

onkeydown Gdy użytkownik naciska klawisz klawiaturowy

onload 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”>

(10)

Gdzie umieszcza się kod JS w dokumencie HTML?

Wersja IV, kod JS aktywowany zdarzeniowo:

<!DOCTYPE html>

<html>

<body>

<h1>Kod JS w onclick przycisku</h1>

Kliknij proszę

</button>

</body>

</html>

<!DOCTYPE html>

<html>

<h1>Kod JS w on load sekcji body</h1>

</body>

</html>

(11)

Wyprowadzanie informacji wyjściowych Wyprowadzanie informacji wyjściowych

Znane już okienko dialogowe alert:

<!DOCTYPE html>

<html>

<body>

<h1>Kod JS w onclick przycisku</h1>

Kliknij proszę

</button>

</body>

</html>

(12)

Wyprowadzanie informacji wyjściowych Wyprowadzanie informacji wyjściowych

Bezpośrednie pisanie do dokumentu HTML:

<!DOCTYPE html>

<html>

<body>

<h1>Pisanie do dokumentu</h1>

document.write("<em>Tekst z JS</em><br />");

document.write(2 * 2);

</script>

</body>

</html>

Uwaga – document to obiekt reprezentujący aktualnie załadowany dokument HTML.

Metody tego obiektu mogą być wywoływane z pominięciem jego nazwy.

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 />");

(13)

Wstawianie danych do elementów HTML 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.

(14)

Wstawianie danych do elementów HTML 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.

<!DOCTYPE html>

<html>

<body>

var paragraf = document.getElementById("info");

paragraf.innerHTML = "Witaj w świecie JavaScript";

</script>

</body>

Pusty paragraf z określonym id Pusty paragraf z określonym id

Pobranie referencji i zapamiętanie w zmienne paragraf Pobranie referencji i zapamiętanie w zmienne paragraf

Wykorzystanie właściwości innerHTML

(15)

Wstawianie danych do elementów HTML Wstawianie danych do elementów HTML

Odwołania do elementów HTML można realizować z wykorzystaniem zmiennych referencyjnych:

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)

else

(16)

Wstawianie danych do elementów HTML Wstawianie danych do elementów HTML

Odwołania do elementów HTML można realizować z wykorzystaniem zmiennych referencyjnych:

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)

else

document.write("Paragraf nie został odnaleziony");

(17)

Manipulowanie wyglądem elementów HTML Manipulowanie wyglądem elementów HTML

Obiekty w DOM posiadają szereg właściwości, można nimi dość dowolnie manipulować.

. . .

paragraf.innerHTML = "Paragraf z dynamicznie określoną treścia i wyglądem";

paragraf.style.color = "blue";

paragraf.style.fontFamily = "Arial";

paragraf.style.fontSize = "larger";

</script>

. . .

(18)

Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Tworzenie większego kodu prawie zawsze wymaga użycia funkcji

Funkcje to nazwany blok instrukcji, uaktywniany na żądanie.

<!DOCTYPE html>

<head>

function pokazAlert(komunikat) {

alert(komunikat);

}

</script>

</head>

<html>

<body>

pokazAlert("Wywołanie funkcji");

</script>

</body>

</html>

Definicja funkcji pokazAlert Definicja funkcji pokazAlert

Wywołanie funkcji pokazAlert

(19)

Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Tworzenie większego kodu prawie zawsze wymaga użycia funkcji

Przekazywanie parametrów – dwa ważne pojęcia

<!DOCTYPE html>

<head>

alert(komunikat);

}

</script>

</head>

<html>

<body>

</script>

</body>

</html>

Parametr formalny funkcji Parametr formalny funkcji

Parametr aktualny wywołania funkcji

(20)

Tworzenie większego kodu prawie zawsze wymaga użycia funkcji Tworzenie większego kodu prawie zawsze wymaga użycia funkcji

Przekazywanie parametrów

<!DOCTYPE html>

<head>

alert(komunikat);

}

</script>

</head>

<html>

<body>

</script>

</body>

</html>

komunikat

Wywołanie funkcji

Parametr formalny funkcji Parametr formalny funkcji

Wartość parametru aktualnego

(21)

Przykładowy program Przykładowy program

Należy napisać program przeliczający odległość wyrażoną w milach amerykańskich na kilometry.

<!DOCTYPE html>

<head>

</head>

<html>

<body>

<h1>Przeliczanie mil na kilometry</h1>

<p>Proszę wprowadzić odległość w milach:</p>

<button>Przelicz na kilometry</button>

</body>

</html>

(22)

Przykładowy program – obsługa zdarzenia onclick Przykładowy program – obsługa zdarzenia onclick

<!DOCTYPE html>

<head>

function przelicz() {

var odleglosc = document.getElementById("kilometry").value;

document.getElementById("wynik").innerHTML = "Odległość w kilometrach: " + (odleglosc * 1.6);

}

</script>

</head>

<html>

<body>

<button onclick="przelicz()">Przelicz na kilometry</button>

</body>

(23)

Przykładowy program – funkcja przeliczająca Przykładowy program – funkcja przeliczająca

<!DOCTYPE html>

<head>

var odleglosc = document.getElementById("kilometry").value;

document.getElementById("wynik").innerHTML = "Odległość w kilometrach: " + (odleglosc * 1.6);

}

</script>

</head>

<html>

<body>

<button onclick="przelicz()">Przelicz na kilometry</button>

Wydobycie wartości z elementu kilometry Wydobycie wartości z elementu kilometry

Przeliczenie i wstawienie wyniku do paragrafu wyjściowego

(24)

Przykładowy program – walidacja danych Przykładowy program – walidacja danych

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);

}

(25)

Przykładowy program – zaokrąglenie wyniku Przykładowy program – zaokrąglenie wyniku

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... .

(26)

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

Program przykładowy – średnie spalanie

(27)

<html>

<head>

</head>

<body>

<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>

</body>

</html>

Komunikacja:

Elementy typu input, z których będą pobrane dane

Program przykładowy – średnie spalanie

(28)

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

Komunikacja:

Paragraf przewidziany dla wyniku, na starcie pusty

Program przykładowy – średnie spalanie

(29)

<html>

<head>

</head>

<body>

</body>

</html>

<html>

<head>

</head>

<body>

</body>

</html>

Komunikacja:

Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem

przycisku Oblicz

Funkcja obliczająca średnie spalanie, aktywowana naciśnięciem

przycisku Oblicz

Program przykładowy – średnie spalanie

(30)

<head>

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ą!";

} }

</script>

</head>

<head>

else {

if(d != 0)

else

} }

</script>

</head>

Pobierz dane jako łańcuchy znaków Pobierz dane jako łańcuchy znaków

Zabezpieczenie przed dzieleniem przez zero, obliczenia, wstawienie

wyniku do par. wyjściowego

Program przykładowy – średnie spalanie

(31)

else {

if(d != 0)

else

} }

else {

if(d != 0)

else

} }

Wynik z wieloma miejscami po przecinku:

Program przykładowy – średnie spalanie

(32)

else {

if(d != 0) {

var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );

out.innerHTML = "Spalanie: " + wynik.toFixed( 2 ) + " l/100km";

} else

} }

else {

if(d != 0) {

var wynik = ( Math.abs( p ) * 100 ) / Math.abs( d );

out.innerHTML = "Spalanie: " + wynik.toFixed( 2 ) + " l/100km";

} else

} }

Ustalenie liczby miejsc po przecinku i ignorowanie wartości ujemnych:

Program przykładowy – średnie spalanie

(33)