Java Script

Literatura:

1. Eric Freeman, ElisabethRobson – HTML5-przewodnik po tworzeniu aplikacji internetowych za

pomocą Java Scriptu –Helion 2012
2. Piotr Bubacz- Aplikacje internetowe- rozdziała JavaScript2005
3. Aleksandra Tomaszewska – Tworzenie stron www-Ilustrowany przewodnik- Helion 2011

JavaScriptjest to język programowania, który umożliwia tworzenie interakcji z użytkownikiem

w przeglądarce. Aplikacje tworzone w JavaScript wykonywane są po stronie użytkownika. JavaScript
to język skryptowy, interpretowany. Wykorzystywany jest do tworzenia animacji, sprawdzania
poprawności danych wpisywanych do formularza lub tworzenia menu rozwijalne itp.Kod aplikacji
można umieszczać w stronie lub w zewnętrznym pliku. Możemy też odwoływać się do wielu plików
równocześnie, co ułatwia tworzenie i korzystanie z bibliotek funkcji.

• //- jednowierszowy komentarz

• /* */- komentarz wielowierszowy
• Każda instrukcja kończy się średnikiem

Zmienne

Zmienne przechowują informacje. Zmienne mogą przechowywać liczby, obiekty tekst.DO

zmiennej odwołujemy się za pomocą jej nazwy, która jest identyfikatorem. Język JavaScript nie jest
językiem silnie typowanym, tzn, że możemy przypisać do zmiennej dana dowolnego typu, a następnie
poprzez ponowne przypisanie zmienić typ przechowywanej informacji.W JavaScript stosowane jest
dynamiczne typowanie, co oznacza, że w momencie deklaracji nie określa się typu zmiennej, bo
interpreter określa go podczas wykonywania kodu. W celu utworzenia zmiennej trzeba wykorzystać
słowo kluczowe var, za którym należy umieścić nazwę zmiennej. Poniżej podana została postać
deklaracji zmiennej w języku JavaScript:

varNazwisko;
varImie, Nazwisko;
varkwota = 200;

Przykłady:
var temp=36.6; wartość zmiennoprzecinkowa
varliczbaFoto=5; wartość całkowita
vartypOdpowiedzi=true; wartość logiczna
vat motto=”struktura dom”; łańcuch znaków
var liczba=Math.random(); funkcja wewnętrzna biblioteki funkcji wewnętrznych
JavaScript ( wartość generatora liczba losowych)
var kwota =Math.floor(23.456) funkcja wewnętrzna funkcji wewnętrznych JavaScript
zaokrągla liczbę do wartości całkowitej
var liczba= parseInt(„12”) konwersja łańcuchów tekstowych na liczby całkowite
var liczba= parseFloat(„99.9”) konwersja łańcuchów tekstowych na liczby
zmiennoprzecinkowe
var wynik=(wynik-36)*3; wynik wyrażenia matematycznego
var win; zmiennej przypisana jest wartość niezdefiniowana undefined
Java Script

Nazwa zmiennej.Aby dobrze nazwać zmienną należy nadać jej znacząca nazwę i stosować
litery, cyfry oraz znak podkreślenia. Należy unikać nazw zarezerwowanych dla opisu elementów
języka. W nazwach wieloczłonowych dobrze jest stosować „notację wielbłądzią”.
Zasięg zmiennej. Zmienne maja określony zasięg. Zmienne zdefiniowane w funkcjach są
dostępne w obrębie tych funkcji, w momencie zakończenia wykonywania funkcji zmienna traci swoja
wartość. Zmienne zadeklarowane poza funkcją maja zasięg globalny.
Stałe. Wartość stałej musi być podawana podczas deklarowania i nigdy się nie zmienia.
Postac deklaracji stałej:
ConstNazwaUczelni=”UWM”

Typy danych
Typ danych i=określa jakiego typu informacje mogą być przechowywane w danej zmiennej
oraz jakich operacji można dokonywać na danych. Dostępnych jest kilka typów danych: typ tekstowy-
String, typ liczb całkowitych - Integer, typ liczb zmiennoprzecinkowych- float, typ logiczny- Boolean
(dwie wartości true, false).
Istnieją sekwencje sterujące, rozpoczynające się od znaku \, które mogą być przechowywane
w zmiennej String:
\b- znak cofania
\t- tabulacja
\n- nowa linia
\f – wysunięcie strony
\r –przejście do nowej linii
\ ‘’- podwójny cudzysłów
\ ‘ – pojedynczy cudzysłow
\ \- ukośnik

• Null – oznacza, że zmienna nie przechowuje żadnej wartości.

• Undefined – to wartość przechowywane w zadeklarowanej zmiennej, która nie została
zainicjonowana żadna wartością lub nie otrzymała żadnych danych.

Modyfikowanie zmiennych - -operatory

Na zmiennych numerycznych wykonuje się modyfikowanie za pomocą operacji matematycznych.

Operatory zostały zebrane w tabeli.

Operator Przykład Opis

+ a = b + c Dodaje wartości zmiennych b i c oraz zapisuje wynik w zmiennej a .
- a = b - c Odejmuje wartość zmiennej c od wartości zmiennej b i wynik zapisuje
w zmiennej a.
* a = b * c Mnoży wartości zmiennych b i c, a wynik zapisuje w zmiennej a.
/ a = b / c Dzieli wartość zmiennej b przez wartość zmiennej c i wynik zapisuje w
zmiennej a.
% a = b % c Oblicza resztę z dzielenia wartości zmiennej b przez wartość zmiennej
Java Script

c i wynik zapisuje w zmiennej a.

++ a = ++b Inkrementuje wartość zmiennej b (zwiększa ją o 1) i wynik zapisuje w
zmiennej a.
-- a = --b Dekrementuje wartość zmiennej b (zmniejsza ją o 1) i wynik zapisuje w
zmiennej a.

Operator Przykład Opis

+= a += b Ten przykład równoważny jest poleceniu a = a + b.
-= a -= b Ten przykład równoważny jest poleceniu a = a - b .
*= a *= b Ten przykład równoważny jest poleceniu a = a * b.
/= a /= b Ten przykład równoważny jest poleceniu a = a / b.
%= a %= b Ten przykład równoważny jest poleceniu a = a % b.

Operator Opis Uwagi

operatora
== Równy a == b: sprawdza, czy a jest równe b. Np. level=2; pet=”cat”;
!= Różny a != b: sprawdza, czy a jest różne od b.
< Mniejszy a < b: sprawdza, czy a jest mniejsze od b. Np. temp<36.6
<= Mniejszy lub a<= b: sprawdza, czy a jest mniejsze lub równe b.
równy
>= Większy lub a >= b: sprawdza, czy a jest większe lub równe b.
równy
> Większy a > b: sprawdza, czy a jest większe od b.
AND(&&) Operator dwuargumentowy, który zwraca prawdę tylko wtedy,
gdy oba argumenty są prawdziwe.
OR(||) Operator dwuargumentowy, który zwraca prawdę tylko wtedy,
gdy jeden lub oba argumenty są prawdziwe
NOT(!) Operator jednoargumentowy, który zwraca odwrotność logiczną
testowanej zmiennej
? : Trzyargumento X=(a>b)?c:d Wynikiem działania jest:
wy operator
warunkowy If (a>b) {x=c} else {x=d}
void Operator Void sprawia, że wyrażenie przekazuje wartość
sterowaniawyr
ażeniami niezidentyfikowaną
typeof Operator do Zwraca łańcuch, który zawiera określenie typu wyniku tego
identyfikacji
typów wyrażenia lub wartości zmiennej
Java Script

Instrukcje sterujące – określające kolejność wykonywania obliczeń.

Instrukcja warunkowa if: - stosowana przy podejmowaniu decyzji.

If (wyrażenie){ If (wyrażenie) {
Instrukcja1; If (wyrażenie) { Instrukcja1;
} Instrukcja1; }Elseif (wyrażenie 2){
}Else { Instrukcja2;
Instrukcja2; } }Else {
} Instrukcja3;
}

Instrukcja warunkowa switch: – służy do podejmowania decyzji wielowariantowych.

Instrukcja następująca po słowie default zostanie wykonana, jeśli wyrażenie nie spełniło żadnego z
wyrażeń stałych.

Switch (wyrażenie) {
Case wyrażenie: instrukcja; break;
Case wyrażenie: instrukcja; break;
Default:instrukcja3;}
Instrukcje iteracyjne - Pętle
Pętle umożliwiają powtórzenie instrukcji dopóki nie zostanie spełniony warunek.
Pętla for: Na początku zostanie ustalony stanPoczatkowy, następnie pętla będzie
wykonywana aż do spełnienia warunku określonego jako warunekZakończenia, przy każdej iteracji
będą wykonywane operacje umieszczone w zmiany.
for (stanPoczatkowy; warunekZakończenia; Zmiany)

Przykład:
for (sprawdzenie=3; sprawdzenie>0; sprawdzenie --){
alert (” w trakcie sprawdzania”);
}
alert (” wykonano wszystkie sprawdzenia”);

Pętla for/in: umożliwia przeglądanie kolekcji obiektów.

for (var element in Kolekcja){
Lista instrukcji;}
Pętla while: umożliwia wykonywanie ciągu instrukcji, aż do spełnienia określonego warunku
sprawdzanego na początku działania pętli.
While (warunekKońcowy)
Lista instrukcji;
Przykład:
var sprawdzenie=3;
while(sprawdzenie>0){
alert(„w trakcie sprawdzania);
Sprawdzanie=sprawdzanie-1;
}

Pętle do while: w pętli najpierw następuję przetwarzanie, a później sprawdzenie warunku.

Java Script

Do {}
While (warunekKońcowy);

Instrukcje break natychmiast zatrzymuje przetwarzanie bez żadnych dalszych powtórzeń.

Instrukcja continue natychmiast zatrzymuje bieżące powtórzenie, jednak test w sprawie następnego
powtórzenia jest przeprowadzany. Instrukcje break i continue powinny występować wewnątrz bloku
znajdującego się wewnątrz pętli.

Document Object Model - Współpraca JavaScript i HTML

Skrypt JavaScript może współpracować ze strukturą DOM ( ang. Document Object Model –
Obiektowy model Dokumentu) dokumentu HTML. Język JavaScript udostępnia następujące
możliwości wyświetlania informacji:

• Pisanie na stronie - document.writeln(„Informacja na stronie WWW”);

• Wyświetlenie Okno dialogowe z napisem alert ("Zaczynamy informacje");
• Wyświetlenie kodu HTML w dowolnym elemencie document.getElementById(idElementu)

Aby manipulować obiektami składającymi się na stronę, należy je identyfikować.Dzięki temu

kod może znaleźć wymagany obiekt. Najlepszym wyborem jest zastosowanie atrybutu id
identyfikującego obiekty. Po nadaniu elementowi strony unikalnego identyfikatora można umożliwić
skryptowi JavaScript przetworzenie go. Język JavaScript udostępnia w tym celu specjalna metodę
document.getElementById(idElementu).
Konstrukcja document.getElementById(idelementu).właściwość pozwala na odwoływanie się do
właściwości elementu:

• innerHTML – umożliwia określenie kodu HTML który zostanie umieszczony w elemencie

• innerText– umożliwia określenie ciągu znaków który zostanie umieszczony w elemencie
• className – umożliwia umieszczenie klasy CSS użytej do prezentacji elementu

Przykład:

var p= document.getElementById(idElementu) – przypisanie elementu identyfikatora do

zmiennej JavaScript

p.innerHTML- właściwość zmiennej pozwala zmienić zawartość przechowywanego w niej

elementu

DOM

We wszystkich obiektach dostępne są dwa rodzaje zasobów: właściwości oraz metody.

Właściwości są zmiennymi przechowującymi wartości opisujące obiekt, którym jesteś
zainteresowany.
Java Script

window

history location document

html

head body

title h1 p table form

Obiekt Window–najwyższy obiekt w hierarchii, reprezentuje globalne środowisko w którym

są uruchamiane programy JavaScript. Zawiera właściwości i metody pozwalające na manipulowanie
oknem przegladarki. Obiekt window pełni rolę globalnego środowiska, więc nazwy jego właściwości i
metod są prawidłowo rozpoznawalne, nawet jeśli nie są poprzedzone nazwą obiektu window.

• location- przechowuje adres URL strony. Jeśli wpiszesz jej nowa wartość przeglądarka przejdzie
pod wskazany adres.
• status – przechowuje łańcuch wyświetlany w pasku statusu przeglądarki
• defaultStatus– określa domyślna treść paska statusu
• onload – przechowuje nazwę funkcji, która ma zostać wywołana po całkowitym załadowaniu
strony i utworzeniu struktury DOM
• document- przechowuje strukturę DOM.
• Alert() – wyświetla okienko z komunikatem i przycisk OK
• Prompt()–wyświetla okienko z komunikatem, ale umożliwia pobranie informacji od użytkownika
• Confirm()- wyświetla okienko z komunikatem oraz dwa przyciski OK i Cancel
• Open (URL, nazwa, opcje) – otwiera nowe okno przeglądarki
• Close()- zamyka okno przeglądarki. Argument URL jest adresem strony, która zostanie
wyświetlona w nowym oknie, a argument nazwa jest nazwą nowego okna przeglądarki.
• scrollBY(x,y) – metoda przesuwa zawartość okna o x pikseli w poziomie i y pikseli w pionie
• setTimeout- wywołuje funkcję zwrotną po ustalonym czasie (pozwala na wykonanie kodu z
pewnym opóźnieniem). Posiada dwa argumenty- kod JS, wielkość opóźnienia w milisekundach
• setInterval – wywołuje funkcję zwrotną cyklicznie w ustalonych interwałach

cw- Wyświetlenie komunikatu w oknie komunikatu po 5 sekundach (5000 milisekund)

function odlicz(){
seTimeout(‘’alert(‘czas minął’)’’,5000);
// funkcja clearTimeout ()- zatrzymuje uruchomiony wątek
}
cw - Tworzenie nowego okna przeglądarki
Java Script

functionNoweOkno() {
varNoweOkno=windows.open(“podstrona.html”, ‘nazwa nowego okna”, left=50,top=50,
width=450,menubar=no,scrollbars=no);
}
Obiektdocument– jest właściwością obiektu window. Za jego pomocą można uzyskać dos tęp
do struktury DOM.

• Bgcolor - Kolor tła strony

• Cookie – obiekt pozwala na zarzadzanie ciasteczkami dla danego dokumentu
• Domain – nazwa domenowa serwera z którego pochodzi pobrany dokument
• Fgcolor - Kolor tekstu strony
• Referer– zawiera adres lokalizacji z jakiej użytkownik wszedł na dana stronę
• Title - Tytuł aktualnie wyświetlanej strony WWW.
• URL- przechowuje adres URL dokumentu
• lastModified–tekst z informacją o ostatniej modyfikacji danego dokumentu
• createElement- służy do tworzenia elementów w strukturze DOM
• getElementById()– pobiera element o wskazanym identyfikatorze
• getElementBYTagName()- pobiera element o określonej nazwie znacznika
• getElementByClassName()pobiera element określonej klasy
• write() – wstawia treść do dokumentu
• writeln()- wstawia treść do dokumentu i na końcu umieszczany jest znak przejścia do nowej linii

Obiekt location – pozwala na manipulowanie adresem strony. Modyfikując właściwość tego obiektu,
możemy na przykład przekierowywać przeglądarkę na inne adresy.

• host –zwraca hosta wraz z numeremportu z aktualnego adresu URL

• Hostname – zwraca samą nazwę hosta
• Href – zwraca pełny adres URL aktualnie otwartego dokumentu
• Protocol – zwracanazwęwykorzystywanegoprotokołu
• Target- zwraca wartość atrybutu target z aktualnego adresu URL
• Reload()-odświeżaniebieżącejstrony
• Replace()- wyświetla nową strone o adresie URL, nadpisując aktualna stronę w historii
przeglądarki

Obiekt Navigator – pozwala na uzyskiwanie informacji o użytkowniku strony.

• appName
• appVersion
• browserlanguage
• platform
• userAgent
• userLanguage

obiekt History – umożliwia zarzadzanie historią przeglądanych stron

• back() – powoduje wyświetlenie poprzedniej strony z historii przeglądarki

• forward() – powoduje wyświetlenie kolejnej strony umieszczonej w historii przeglądarki
Java Script

• go() – powoduje wyświetlenie strony o numerze x z historii przegladarki

•

Obiekt p- obiekt zwracany przez element getElementBy

• innerHTML – zawartość obiektu

• childElementCount- liczba elementów dzieci
• firstChild- pierwsze dziecko, element pierwszy
• appendChild– dodanie nowego elementu
• insertbefore– wstawienie nowego elementu
• setattribute– ustawienie atrybutów elementów takich jak src,class,id
• getAtribute- odczytywanie atrybutów elementów takich jak src,class,id

Obsługa wejścia/wyjścia – wyświetlanie i pobieranie informacji

Język JavaScript udostępnia następujące możliwości wyświetlania informacji:

• Pisanie na stronie - document.writeln(„napis”);

• Wyświetlenie Okno dialogowe z napisem alert ("napis wyświetlony");
• Wyświetlenie kodu HTML w dowolnym elemencie document.getElementById(idElementu)

Aby manipulować obiektami składającymi się na stronę, należy je identyfikować.Dzięki temu

kod może znaleźć wymagany obiekt. Najlepszym wyborem jest zastosowanie atrybutu id
identyfikującego obiekty. Po nadaniu elementowi strony unikalnego identyfikatora można umożliwić
skryptowi JavaScript przetworzenie go. Język JavaScript udostępnia w tym celu specjalna metodę
document.getElementById(idElementu).
Konstrukcja document.getElementById(idelementu).właściwość pozwala na odwoływanie się do
właściwości elementu:

• innerHTML – umożliwia określenie kodu HTML który zostanie umieszczony w elemencie

• innerText– umożliwia określenie ciągu znaków który zostanie umieszczony w elemencie
• className – umożliwia umieszczenie klasy CSS użytej do prezentacji elementu

Zdarzenie - Najprostszą metoda komunikacji jest wciśnięcie przycisku na stronie. Każdy element na
stronie umożliwiającą obsługę zdarzenia kliknięcia za pomocą właściwości onclick.

Procedura Kiedy jest wywoływana

obsługi
onAbort Użytkownik przerwał ładowanie obrazu, klikając przycisk Stop
na pasku narzędzi okna przeglądarki.
onBlur Element przestał być aktywny. Zawsze, gdy użytkownik
opuszcza aktywne pole.
onChange Stan elementu uległ zmianie. Zawsze, gdy użytkownik zmieni
zawartość aktywnego pola.
onClick Klawisz myszy został naciśniety i zwolniony. Gdy użytkownik
Java Script

kliknie określony przycisk.

onDBLclick Klawisz myszy został dwukrotnie po sobie naciśniety i
zwolniony.
OnError Wystąpił błąd
onFocus Gdy użytkownik uaktywni określone pole.
onKeyDown Klawisz został wciśnięty
onKeyPress Klawisz został naciśniety i zwolniony
onKeyUp Klawisz został zwolniony
onLoad Za każdym razem, gdy załadowana zostanie strona WWW.
onMouseDown Klawisz myszy został wciśnięty
onMouseMove Wskaźnik myszy zmienił położenie na stronie
onMouseOut Wskaźnik myszy został przesunięty poza obiekt
onMouseOver Zawsze, gdy użytkownik umieści wskaźnik myszy na określonym
polu.
onMouseUp Przycisk myszy został zwolniony
onMove Okno zostało przesunięte
onReset Formularz został odświeżony (przywrócone zostały wartości
domyślne)
onResize Rozmiar okna został zmieniony
onSelect Zawsze, gdy użytkownik zaznaczy zawartość pola.
onSubmit Za każdym razem, gdy przesłana zostanie zawartość
formularza.
onUnload Za każdym razem, gdy zmieniana jest aktualnie wyświetlana
strona WWW.
Funkcje

Funkcja jest zgrupowaną sekwencja instrukcji języka, której nadano jakąś nazwę. Funkcje
przygotowuje się raz, a później możne jej używać wielokrotnie. W celu przygotowania funkcji należy
określić, co ta funkcja ma robić i nadać jej odpowiednią nazwę. Aby funkcje mogły wykonać
jakąkolwiek operację. Musza zostać wywołane w kodzie strony HTML.

<script >
function pokazoknoKom(tekst) {
varmData=new Date();
varmKom="Ważne info\n\n";
mKom+=tekst+"\n\n"
mKom+="wygenerowano o godzine: "+ mData.toTimeString()+"\n"
alert(mKom)
}
</script>
<script>
pokazoknoKom("na tej stronie znajdujasie funkcje JS")
</script>
Funkcje zwracające informacje

Możemy tworzyć funcie , które będą odsyłały informacje do wywołującego je kodu. Na takie działanie
pozwala słowo kluczowe return, które najczęściej jest umieszczane na samym końcu kodu funkcji.
Java Script

Taka instrukcja od razu kończy działanie funkcji i zwraca do wywołującego kodu dowolną
zdefiniowana przez nas informację.

<script >
function mnozenieLiczb(A,B)
{ return A * B }
</script>
<script
varwynik = mnozenieLiczb(50, 80) ;
document.writeln("wynik funkcji ");
document.writeln(wynik);
alert(wynik)
</script>
Pola tekstowe–dana wpisana w kontrolce input można pobrać za pomocą funkcji.

<input id="dane" type="text"/>

<input type="button" value="wyświetl" onclick="wyswietl()" />
<div id="wynik" ></div>
<script type="text/javascript">
function wyswietl(){
document.getElementById("wynik").innerHTML="wpisałeś: " + "<h2>"+document.getElementById("dane").value+"</h2>";}
</script>
Utwórz stronę z obrazem i napisem w języku polskim w kolorze zielonym, np. obraz jabłka i napis
„jabłko”. Utwórz skrypt, który spowoduje, ze po kliknięciu na napis w języku polskim pojawi się napis
w języku angielskim w kolorze czerwonym.

<style type="text/css">
.stylczerwony{color:red;}
.stylzielony{color:green;}
</style>
</head>
<body>
<h1>programyjavascript</h1>
<div id="nazwa" onclick="zmien()"></div>
<script type="text/javascript">
document.getElementById("nazwa").innerHTML="<h2>jabłko</h2>";
document.getElementById("nazwa").className="stylzielony";
function zmien(){
document.getElementById("nazwa").innerHTML="<h2>apple </h2>";
document.getElementById("nazwa").className="stylczerwony";}
</script>
Obiekty

Aby manipulować obiektami składającymi się na stronę, należy je identyfikować.Dzięki temu

kod może znaleźć wymagany obiekt. Najlepszym wyborem jest zastosowanie atrybutu id
identyfikującego obiekty.
Przykład – wstawianie bieżącej daty na stronę.

<script >
varmData=new Date();
varmKom="Dzisiejsza data:";
mKom=mKom+mData.toDateString()
document.write(mKom)
</script>
Java Script

JSON
JavaScript Object Notation– lekki format wymiany danych komputerowych. JSON jest formatem
tekstowym, będącym podzbiorem języka JavaScript.

JSON powstał w oparciu o dwie struktury:

• Zbiór par nazwa/wartość. W różnych językach jest to implementowane jako obiekt, rekord,
struktura, słownik, tabela, lista z kluczem, albo tabela asocjacyjna.
• Uporządkowana lista wartości. W większości języków implementuje się to za pomocą tabeli,
wektora, listy, lub sekwencji.

W przypadku formatu JSON, przybierają one następujące formy:

Obiekt jest nieuporządkowanym zbiorem par nazwa/wartość. Opis obiektu rozpoczyna { (lewa klamra)
a kończy } (prawa klamra). Po każdej nazwie następuje : (dwukropek) oraz pary nazwa/wartość,
oddzielone , (przecinkiem).Np. {nazwa1:wartość1, nazwa2:wartosc2}

{"dane":{"user":[{"imie":"Jan","nazwisko":"Kowalski"},{"imie":"Piotr","nazwisko":"Nowak"}]}}

Tabela jest uporządkowanym zbiorem wartości. Opis tabeli rozpoczyna znak [ (lewy nawias
kwadratowy) a kończy znak ] (prawy nawias kwadratowy). Poszczególne wartości rozdzielane są znakiem
, (przecinek). Np.[2,3,6].

Wartość to łańcuch znakowy, którego początek i koniec oznacza podwójny cudzysłów, lub liczba, lub
wartość true (prawda) lub false (fałsz) lub null, lub obiekt lub tabela. Np. „true”Struktury te można
zagnieżdżać.

Łancuch znakowy jest zbiorem zera lub większej ilości znaków Unicode, opakowanym w podwójne
cudzysłowy, stosujących znak odwrotnego ukośnika jako początek sekwencji specjalnej (escape).
Pojedynczy znak jest reprezentowany jako łańcuch jednoznakowy. Łańcuch znakowy JSON jest
podobny do łańcucha znakowego C lub Java. Np. „ala ma kota”

Liczby zapisywane w formacie JSON są bardzo podobne do liczb w języku C lub Java, poza tym
wyjątkiem, że nie używa się formatów ósemkowych i szesnastkowych. Np. 17

• stringify
• parse

MechanizmWebStorage – interfejs API (local Storage)

Możliwość składowania danych w przeglądarce jest potrzebna do:

- tworzenie koszyka na zakupy

- zapisywanie ustawień aplikacji zdefiniowane przez użytkownika

- Przechowywanie danych o użytkownikach

Java Script

Działanie mechanizmu WEbStorage

1. Za pomocą mechanizmu lokalnego składowania danych strona może zapisać w przeglądarce

pary klucz-wartość. ( od 5-10 MB na lokalne składowanie dla każdej domeny)
2. Klucz używamy do pobrania odpowiedniej mu wartości. ( do lokalnie składowanych danych
ma dostęp klient; strony mogą zapisywać i odczytywać tylko te dane , które zostały
utworzone przez strony pochodzące z tej samej domeny)

API WEbStorage jest dostępny poprzez obiekt LocalStorage.

Obiekt localStorage

• length – przechowuje liczbę elementów zapisanych w lokalnej składnicy

• setItem(„klucz”, „wartosc”) – zapisywanie danych. Można tylko zapisywać dane typu String
• getItem („klucz”) –pobieranie wartości ze składnicy powiązanych z elementemklucz
• key(indeks) –zwraca klucz ze składnicy po indeksie
• clear– usuwa wszystkie elementy z lokalnej składnicy danych ( przypisane do danej domeny)

Przykład- powiązanie wartości z kluczem (tablica asocjacyjna)

localStorage[„klucz”]=”wartosc”

localStorage[„info”]=”Na tym komputerze nie pracują dzieci”

Zapisywanie tablic w obiekcie localStorage

Dodajemy elementy do mechanizmu localStorage z unikalnymi nazwami info_1, info_2, info_45

Java Script

Laboratorium 01 – zadania początkowe

1-Utwórz stronę z obrazem i napisem w języku polskim w kolorze zielonym, np. obraz jabłka i napis
„jabłko”. Utwórz skrypt, który spowoduje, ze po kliknięciu na napis w języku polskim pojawi się napis
w języku angielskim w kolorze czerwonym.

2-Utwórz stronę z trzema napisami w języku polskim w kolorze zielonym,. Utwórz skrypt, który
spowoduje, ze po kliknięciu na kolejne napisy w języku polskim pojawi się napis w języku angielskim
w kolorze czerwonym.

3-Utwórz stronę na której będziesz uzupełniał słowa w języku polskim w polach tekstowych. W
momencie ukończenia pisania słowo to pojawi się w języku angielskim w stylu h2.

4-Utwórz stronę z dwoma rysunkami, w momencie wybrania danego rysunku pojawi się napis w
języku polskim i angielskim.

5-Utwórz listę rozwijalna zwierają trzy elementy foto. Wybór z listy spowoduje załadowanie się
odpowiedniej fotografii na stronę.

6-Utwórz stronę, która będzie sprawdzała i wyświetlała użytkownikowi długość tekstu znajdującego
się w polu <textarea>.

7-Utwórz stronę, która będzie obliczała i wyświetlali długość tekstu na bieżąco.

8-Utwórz stronę, która będzie przetwarzała wprowadzony tekst zgodnie z wyborem w polu opcji:
pogrubienie, kursywa.

9-Utwórz stronę składająca się z nagłówka tekstu. Zdefiniuj funkcje obsługi zdarzenia polegającą na
zamianie tekstu wewnątrz nagłówka w zależności od najechaniu myszy na nagłówek i obsługi
zdarzenia opuszczenia obszaru nad nagłówkiem przez mysz.

10-Utwórz stronę zawierająca formularz z pole tekstowe przeznaczonym na wpisanie nazwy firmy i
poleceniem wpisania. Zdefiniuj funkcje obsługi wpisania przez użytkownika nazwy firmy.
Java Script

11-Utwórz stronę zawierająca formularz z pole tekstowe przeznaczonym na wpisanie z adresu e-mail i
poleceniem wpisania. Zdefiniuj funkcje obsługi wpisania przez użytkownika poprawnego adresu e-
mail.

12-Utwórz stronę wczytującą ilość kg i wzrost i wyświetlającą wyliczony wskaźnik BMI w oknie
dialogowym .

13-Utwórz stronę wczytującą wiek i wyświetlająca informację w zależności od wieku hej, cześć,
witam, dzień dobry.

14-Utwórz stronę zawierająca formularz z pole tekstowe przeznaczonym na wpisanie kodu

pocztowego i poleceniem wpisania. Zdefiniuj funkcje obsługi wpisania przez użytkownika poprawnego
kodu pocztowego.

15-Utwórz stronę zawierająca formularz z pole tekstowe przeznaczonym na wpisanie wzrostu i

poleceniem wpisania. Zdefiniuj funkcje obsługi wpisania przez użytkownika poprawnego wzrostu.

16-Utwórz stronę zawierająca formularz z pole tekstowe przeznaczonym na wpisanie wagi poleceniem
wpisania. Zdefiniuj funkcje obsługi wpisania przez użytkownika poprawnej wagi.

17-Napisz skrypt , który wyświetli na stronie tytułdokumentu i adres URL.

18-Utwórz stronę na której użytkownik wpisuje Imie i plec, a system wyświetlastosowne

podziękowanie za odpowiedź.

19-Napisz stronę zawierająca link do losowo wybranej strony z trzech ulubionych.

20- Utwórz funkcje podmieniająca obrazki na stronie

Java Script

Laboratorium 02
Utwórz funkcję losującą trzy słowa z trzech zbiorów i generującą w ten sposób frazę.
Zbior1: pełnowymiarowo, wielopłaszczyznowo, dalekosiężnie, biznesowo, optymalnie
Zbiór1: akredytowane, wzmożone, zorientowane, skupione, zrównoważone
Zbiór 3: procesy, rozwiązania, zagadnienia, strategie, wizje
Java Script

Laboratorium 03 – dodawanie elementów struktury DOM do strony, mechanizm

WebStorage
Utwórzstronęhtml zawierającą formularz do wczytywania tekstu. Utwórz kod JS który
z wczytanych tekstów tworzy listę elementów na stronie www. Dodatkowo dodaj kod, który
zapamięta wczytane elementy w lokalnej składnicy danych (WebStorage).

1. Utwórz stronę lista.html o następującej strukturze DOM:

document

html

head body

title script form ul d=”elementy”

input input li

Rysunek 1 Dokument HTML 5 z formularzem i listą elementów

2. Utwórz arkusz styli new.css do wyświetlania wyglądu strony

Java Script

Rysunek 2 Arkusz styli dla body i elementu ul i li

3. Dodanie do przycisku „Informacja do zapamiętania” funkcji obsługi zdarzenie kliknięcia o

nazwie handleButtonClick.

4. Zaktualizuj funkcję handleButtonClick tak, aby funkcja pobierała informację z pola tekstowego
txtInput i wyświetlała w oknie komunikatu kontrolnie pobraną informację, a w przypadku gdy
użytkownik nic nie wpisał, aby wyświetlała komunikat informujący o konieczności informacji
tytułu „Musisz wpisać informację!”.

5. Wyświetl wpisane informacje w polu tekstowym na stronę. W tym celu za każdym razem, gdy
wprowadzisz nowa informację należy spowodować, aby do listy „elementy” została dodana
kolejna pozycja <li>, która będzie przechowywała wprowadzoną informację.
Java Script

• Utworzenie nowego elementu <li>w strukturze DOM

var li=document.createElement(„li”);
li.innerHtml=”zawartość elementu”
• Dodawanie elementu do struktury DOM. Aby dodać element <li> należy sprawić , aby stał się
on dzieckiem <ul> o identyfikatorze elementy.

varul = document.getElementByID(‘’elementy”);
ul.appendChild(li);

6. Przeanalizuj algorytm zapisywania i pobierania informacji lokalnej składnicy (Web Storage)oraz

odpowiednio je indeksuje za każdym razem, gdy dodawany jest nowy element.

Algorytm pobrania:

 Pobierz tablice zawierającą klucze(tylko powiązane z informacją) z obiektu localStorage

 Iterujemy po tablicy (elementy tablicy to klucze reprezentujące info) i odczytujemy kolejne

Algorytm zapisu:

 Pobierz wartość elementu z pola tekstowego

 Pobierz tablice zawierającą klucze (tylko powiązane z info) z obiektu localStorage)
 Zapisz info wraz z kluczem w tablicy infoArray klucz-wartość jako ostatni element
 Tablice infoArray zapisz w obiekcie localStorage
Java Script

Rysunek 3

7. Przeanalizuj narzędzie umożliwiające zarzadzanie elementami zapisanymi w obiekcie

localStorage

8. Realizacja algorytmu zapisu do lokalnej składnicy

Java Script

9. Realizacja algorytmu pobierania z lokalnej składnicy

Java Script

Laboratorium 04 – funkcje, obiekty, tworzenie konstruktora

Agencja zwróciła się z prośbą o zaprojektowanie aplikacji , która będzie pokazywała aktualne
odjazdy linii znajdujące się na tablicy odjazdów .

1. Zaprojektuj obiekt Linia. Budowa każdego obiektu to cel (title), rodzaj (gender) wydarzenia,
ocena (rating) i godzinyodjazdów (ODtimes).

var Linia1 = {
title: "Ostróda ME",
genre: "19 osób",
rating: 2,
ODtimes: ["15:00", "19:00", "23:00"],
};

varLinia2 = {
title: "Ostróda DU",
genre: "25 osób",
rating: 5,
ODtimes: ["17:00", "21:00"],
};

2. Napisz funkcję która przekształca łańcuch zawierający godzinę 17:00 na czas wyrażony w
milisekundach.

function getTimeFromString(str) {
vartheTime = new Date();
var time = str.match(/(\d+)(?::(\d\d))?/);
theTime.setHours( parseInt(time[1]) || 0);
theTime.setMinutes( parseInt(time[2]) || 0 );
return theTime.getTime();
}

3. Napisz kod , którego zadaniem będzie informowanie o najbliższym odjeździe. Funkcja jako
argument będzie przyjmowała obiekt linia, a zwracaną wartością będzie łańcuch zawierający
godzinę kolejnego odjazdu na podstawie bieżącego czasu.

function getNextOD(linia) {
var now = new Date().getTime();
for (vari = 0; i<linia.odtimes.length; i++) {
varodtime = getTimeFromString(linia.odtimes[i]);
if ((odtime - now) > 0) {
return "Następny odjazd " + linia.title + " zaczyna się o " +
linia.odtimes[i];
}
}
return null;
}
Java Script

4. Przeprojektuj kod tak, aby funkcja getNextOD(linia) stała się metodą obiektu Linia.

Wywołanie:

5. Utwórz konstruktor dla obiektu reprezentującego Linię.

Wywołanie:
Java Script

TEST- JavaScript

1. Określ wyniki wyrażeń:

a) (9/5)*tempC+32 dla tempC=10
b) ‘’Liczba ‘’ +” ‘’ +”2”
c) level>=5 dla level=10 oraz dla level=5
d) color!=”różowy” dla color=”niebieski”
e) (2*Math.Pi)*r dla r=3
2. Jaki stan licznika zostanie wyświetlony w oknie______________

var count=0;
for (vari=0;i<5,i++) {
count=count+i;
}
3. Ile razy zobaczysz okno z komunikatem „ w trakcie sprawdzania”? ____________

var tops=5;
while (tops >0) {
for (var spins=0;spins<3;spins++) {
alert(“w trakcie sprawdzania”);
}
tops=tops-1;

4. Ile razy zyskałeś szansę?__________

for (var szansa=0;szansa<3;szansa++) {

alert(“wygrałeś”);
}
5. Ile razy straciłeś szansę?__________

for (var szansa=0;szansa<10;szansa++) {

alert(“straciłeś kolejną szansę”);
}
alert(“ życie bez szans nie byłoby tym samym”);
6. Napisz kod wykorzystując instrukcję for, if…. Który wypisuje w okienku ostrzeżenie
palindrom „MOŻE JUTRO TA DAMA SAMA DA TORU JEŻOM” przy następującym założeniu ,
że masz dane zmienne przechowujące wartości :

var slowo1=”M”;
var slowo2=”TU JEŻO”;
var slowo3=”A DA TOR”;
var slowo4=”A DAMA SA”;
var slowo5=”MOŻE JUTRO T”;
varfraza=””;
……????
Java Script

alert(fraza);
7. Dla podanego kodu HTML stwórz model DOM

<!DOCTYPE html>
<html>
<head>
<title>Wakacje</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styl.css" />
</head>
<body>
<div id="strona">
<div id="logo">Strona z wakacji</div>
<div id="menu">
<ul>
<li><a href="index.html" >Strona główna</a></li>
<li><a href="londyn.html" >Londyn</a></li>
<li><a href="paryz.html" >Paryż</a></li>
<li><a href="kontakt.html" >Kontakt</a></li>
</ul>
</div>
<div id="tresc">
<h1>Paris, moje fotografie</h1>
<p>Wybrałem kilka fotografii, gdzie widok szczególnie mnie zachwycił</p>
<p>Moją ulubioną restauracją jest małe bistro zwane</p>
<p>Moje ulubione miejsca godne polecenia:</p>
<div class="galeriagaleriaParyz">
<table>
<tr>
<td><imgsrc="img/f1.jpg" alt=""/></td>
<td><imgsrc="img/f2.jpg" alt=""/></td>
<td><imgsrc="img/f3.jpg" alt=""/></td>
</tr>
<tr>
<td>L'Arc de Triomphe</td>
<td>La Tour Eiffel</td>
<td>Tower Bridge</td>
</tr>
</table>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
Java Script