script - Programowanie

Transkrypt

Aplikacje internetowe
Podstawy programowania w języku JavaScript
Roman Simiński
[email protected]
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 <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>
2
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.
3
Gdzie umieszcza się kod JS w dokumencie HTML?
Wersja I: kod w obrębie znacznika <body>:
<!DOCTYPE html>
<html>
<body>
. . .
<script>
<script>
</script>
</script>
. . .
</body>
</html>
4
Wersja I, przykład:
Tak
Tak umieszczony
umieszczony kod
kod wykona
wykona się
się „samoczynnie”
„samoczynnie” w
w trakcie
trakcie
interpretacji
interpretacji przez
przez przeglądarkę
przeglądarkę sekcji
sekcji body.
body.
<!DOCTYPE html>
<html>
<body>
<h1>Kod JS w sekcji body</h1>
<script>
</script>
</body>
</html>
Uwaga
Uwaga –– w
w niektórych
niektórych przeglądarkach
przeglądarkach zawartość
zawartość sekcji
sekcji <h1>
<h1> pojawi
pojawi się
się dopiero
dopiero po
po
zamknięciu
zamknięciu okna
okna wyświetlanego
wyświetlanego funkcją
funkcją alert.
alert.
5
Wersja II: kod w obrębie znacznika <head>:
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
</body>
</html>
W ten sposób umieszcza się najczęściej kod funkcji.
6
Wersja II, przykład:
Tak
Tak umieszczony
umieszczony kod
kod wykona
wykona się
się „samoczynnie”
„samoczynnie” w
w trakcie
trakcie
interpretacji
interpretacji przez
przez przeglądarkę
przeglądarkę sekcji
sekcji head.
head.
<!DOCTYPE html>
<html>
<head>
<script>
</script>
</head>
<body>
<h1>Kod JS w sekcji head</h1>
</body>
</html>
7
Wersja III, kod w osobnym pliku:
<!DOCTYPE html>
<html>
<body>
<h1>Kod JS w sekcji body</h1>
<script src="kodwpliku.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="kodwpliku.js"></script>
</head>
Kod
Kod w
w sekcji
sekcji body
body
Kod
Kod w
w sekcji
sekcji head
head
<body>
<h1>Kod JS w sekcji head</h1>
</body>
</html>
8
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”>
9
Wersja IV, kod JS aktywowany zdarzeniowo:
<!DOCTYPE html>
<html>
<body onload="alert('Czołem!\nJavaScript wita :)')">
<h1>Kod JS w on load sekcji body</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>Kod JS w onclick przycisku</h1>
<button onclick="alert('Czołem!\nJavaScript wita :)')">
Kliknij proszę
</button>
</body>
</html>
10
Wyprowadzanie informacji wyjściowych
Znane już okienko dialogowe alert:
<!DOCTYPE html>
<html>
<body>
<h1>Kod JS w onclick przycisku</h1>
<button onclick="alert('Czołem!\nJavaScript wita :)')">
Kliknij proszę
</button>
</body>
</html>
11
Wyprowadzanie informacji wyjściowych
Bezpośrednie pisanie do dokumentu HTML:
<!DOCTYPE html>
<html>
<body>
<h1>Pisanie do dokumentu</h1>
<script>
document.write("<em>Tekst z JS</em><br />");
document.write(2 * 2);
</script>
</body>
</html>
Uwaga
Uwaga –– document
document to
to obiekt
obiekt reprezentujący
reprezentujący aktualnie
aktualnie załadowany
załadowany dokument
dokument HTML.
HTML.
Metody
Metody tego
tego obiektu
obiektu mogą
mogą być
być wywoływane
wywoływane zz pominięciem
pominięciem jego
jego nazwy.
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
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.
Pusty
Pusty paragraf
paragraf zz określonym
określonym id
id
<!DOCTYPE html>
<html>
<body>
<p id="info"></p>
Pobranie
Pobranie referencji
referencji ii zapamiętanie
zapamiętanie w
w zmienne
zmienne paragraf
paragraf
<script>
var paragraf = document.getElementById("info");
paragraf.innerHTML = "Witaj w świecie JavaScript";
</script>
</body>
Wykorzystanie
Wykorzystanie właściwości
właściwości innerHTML
innerHTML
</html>
14
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");
15
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");
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>
<script>
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>
. . .
17
Tworzenie większego kodu prawie zawsze wymaga użycia funkcji
Funkcje to nazwany blok instrukcji, uaktywniany na żądanie.
<!DOCTYPE html>
<head>
<script>
function pokazAlert(komunikat)
{
alert(komunikat);
}
</script>
</head>
<html>
<body>
<script>
pokazAlert("Wywołanie funkcji");
</script>
</body>
</html>
Definicja
Definicja funkcji
funkcji pokazAlert
pokazAlert
Wywołanie
Wywołanie funkcji
funkcji pokazAlert
pokazAlert
18
Przekazywanie parametrów – dwa ważne pojęcia
<!DOCTYPE html>
<head>
<script>
{
alert(komunikat);
}
</script>
</head>
<html>
<body>
<script>
</script>
</body>
</html>
Parametr
Parametr formalny
formalny funkcji
funkcji
Parametr
Parametr aktualny
aktualny wywołania
wywołania funkcji
funkcji
19
Przekazywanie parametrów
<!DOCTYPE html>
<head>
<script>
{
alert(komunikat);
}
</script>
</head>
<html>
<body>
<script>
</script>
</body>
</html>
Parametr
Parametr formalny
formalny funkcji
funkcji
komunikat
Wywołanie funkcji
Wartość
Wartość parametru
parametru aktualnego
aktualnego
20
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>
<input id="kilometry" type="text"><br />
<button>Przelicz na kilometry</button>
<p id="wynik"></p>
</body>
</html>
21
Przykładowy program – obsługa zdarzenia onclick
<!DOCTYPE html>
<head>
<script>
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>
<p id="wynik"></p>
</body>
</html>
22
Przykładowy program – funkcja przeliczająca
<!DOCTYPE html>
<head>
Wydobycie
Wydobycie wartości
wartości zz elementu
elementu kilometry
kilometry
<script>
function przelicz()
{
document.getElementById("wynik").innerHTML = "Odległość w kilometrach: " +
(odleglosc * 1.6);
}
</script>
</head>
Przeliczenie
Przeliczenie ii wstawienie
wstawienie wyniku
wyniku do
do paragrafu
paragrafu wyjściowego
wyjściowego
<html>
<body>
<button onclick="przelicz()">Przelicz na kilometry</button>
<p id="wynik"></p>
</body>
</html>
23
Przykładowy program – walidacja danych
function przelicz()
{
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()
{
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
Komunikacja:
Elementy
Elementy typu
typu input,
input,
zz których
których będą
będą pobrane
pobrane dane
dane
<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>
<input type="button" value="Oblicz" onclick="spalanie()" />
<p id="w"></p>
</body>
</html>
27
Komunikacja:
Paragraf
Paragraf przewidziany
przewidziany dla
dla wyniku,
wyniku,
na
na starcie
starcie pusty
pusty
<html>
<html>
<head>
<head>
</head>
</head>
<body>
<body>
<h2>Obliczanie
<h2>Obliczanie średniego
średniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo ::
<p>Dystans:
<p>Dystans:
<input
<input
<input
<input
type="text"
type="text"
type="text"
type="text"
id="p"
id="p" />
/> [litry]</p>
[litry]</p>
id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
<input type="button"
type="button" value="Oblicz"
value="Oblicz" onclick="spalanie()"
onclick="spalanie()" />
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
28
Komunikacja:
Funkcja
Funkcja obliczająca
obliczająca średnie
średnie
spalanie,
spalanie, aktywowana
aktywowana naciśnięciem
naciśnięciem
przycisku
przycisku Oblicz
Oblicz
<html>
<html>
<head>
<head>
</head>
</head>
<body>
<body>
<h2>Obliczanie
<h2>Obliczanie średniego
średniego spalania
spalania na
na 100
100 km</h2>
km</h2>
<p>Paliwo
<p>Paliwo ::
<p>Dystans:
<p>Dystans:
<input
<input
<input
<input
type="text"
type="text"
type="text"
type="text"
id="p"
id="p" />
/> [litry]</p>
[litry]</p>
id="d"
id="d" />
/> [kilometry]</p>
[kilometry]</p>
<input
<input type="button"
type="button" value="Oblicz"
value="Oblicz" onclick="spalanie()"
onclick="spalanie()" />
/>
<p
<p id="w"></p>
id="w"></p>
</body>
</body>
</html>
</html>
29
<head>
<head>
<script
<script >>
function
function spalanie()
spalanie()
Pobierz
Pobierz dane
dane jako
jako łańcuchy
łańcuchy znaków
znaków
{{
var
var
var
var
pp
dd
==
==
document.getElementById("p").value;
document.getElementById("d").value;
var
var out
out == document.getElementById(
document.getElementById( "w"
"w" );
);
if(isNaN(
if(isNaN( pp )) ||
|| isNaN(
isNaN( dd )) ||
|| pp ===
=== ""
"" ||
|| dd ===
=== "")
"")
out.innerHTML
out.innerHTML == "Dystans
"Dystans ii ilość
ilość paliwa
paliwa muszą
muszą być
być liczbami!";
liczbami!";
else
else
{{
if(d
if(d !=
!= 0)
0)
out.innerHTML
out.innerHTML == "Spalanie:
"Spalanie: "" ++ (p
(p ** 100)
100) // dd ++ "" l/100km";
l/100km";
else
else
out.innerHTML
"Dystans musi
musi być
być liczba
liczba dodatnią!";
dodatnią!";
}}
}}
</script>
</script>
</head>
</head>
Zabezpieczenie
Zabezpieczenie przed
przed dzieleniem
dzieleniem
przez
przez zero,
zero, obliczenia,
obliczenia, wstawienie
wstawienie
wyniku
wyniku do
do par.
par. wyjściowego
wyjściowego
30
Wynik z wieloma miejscami po przecinku:
function
function spalanie()
spalanie()
{{
var
var pp == document.getElementById("p").value;
var
var dd == document.getElementById("d").value;
var
var out
"w" );
);
if(isNaN(
if(isNaN( pp )) ||
|| isNaN(
isNaN( dd )) ||
|| pp ===
=== ""
"" ||
|| dd ===
=== "")
"")
out.innerHTML
"Dystans ii ilość
ilość paliwa
paliwa muszą
muszą być
być liczbami!";
liczbami!";
else
else
{{
if(d
if(d !=
!= 0)
0)
out.innerHTML
out.innerHTML == "Spalanie:
"Spalanie: ""
else
else
++ (p
(p ** 100)
100) // dd ++ "" l/100km";
l/100km";
out.innerHTML
"Dystans musi
musi być
być liczba
liczba dodatnią!";
dodatnią!";
}}
}}
31
Ustalenie liczby miejsc po przecinku i ignorowanie wartości ujemnych:
function
function spalanie()
spalanie()
{{
var
var pp == document.getElementById("p").value;
var
var dd == document.getElementById("d").value;
var
var out
"w" );
);
if(isNaN(
if(isNaN( pp )) ||
|| isNaN(
isNaN( dd )) ||
|| pp ===
=== ""
"" ||
|| dd ===
=== "")
"")
out.innerHTML
"Dystans ii ilość
ilość paliwa
paliwa muszą
muszą być
być liczbami!";
liczbami!";
else
else
{{
if(d
if(d !=
!= 0)
0)
{{
var
var wynik
wynik == ((
out.innerHTML
out.innerHTML
Math.abs(
Math.abs( pp )) **
== "Spalanie:
"Spalanie: ""
100
100 )) // Math.abs(
Math.abs( dd );
);
++ wynik.toFixed(
wynik.toFixed( 22 )) ++ "" l/100km";
l/100km";
}}
else
else
out.innerHTML
"Dystans musi
musi być
być liczba
liczba dodatnią!";
dodatnią!";
}}
}}
32
Ciąg dalszy nastąpi...
33

script - Programowanie

Transkrypt

Podobne dokumenty

Wprowadzenie do języka html

01 Osadzanie skryptow PHP w dokumentach HTML

Tagi HTML

Zapisz do PDF - MissZmyslow.pl

Konspekt - Budowa i struktura dokumentu HTML

Programowanie w językach skryptowych Java Script

Projekty - Politechnika Wrocławska