XML 5

Transkrypt

XML 5

XML – eXtensible Markup Language
część 5
JavaScript
Co to jest JavaScript?
• JavaScript był zaprojektowany w celu dodania
interaktywności do stron HTML
• JavaScript jest językiem skryptowym
• JavaScript jest zwykle osadzony w dokumentach HTML
• JavaScript jest językiem interpretowalnym (brak
kompilacji)
• Używanie JavaScript jest darmowe i nie ma potrzeby
wykupywania licencji.
Co „potrafi” język JavaScript?
• JavaScript umożliwia dynamiczne wstawianie tekstu na
stronę HTML
• JavaScript potrafi reagować na zdarzenia np.
zakończenie ładowania strony, kliknięcie w jakiś element
strony
• JavaScript potrafi czytać i zmieniać zawartość
elementów HTML
• JavaScript może być wykorzystywany do walidacji
danych przed wysłaniem na serwer
• JavaScript może być wykorzystany do detekcji
przeglądarki użytkownika
• JavaScript może być wykorzystany do stworzenia pliku
cookie
JavaScript w dokumencie HTML
• Wykorzystujemy znacznik <script>
Przykład
<html>
<body>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</body>
</html>
JavaScript w dokumencie HTML
• Wykorzystujemy znacznik <script>
Przykład
<html>
<body>
<!-document.write("Hello World!");
//-->
</script>
</body>
</html>
Zmienne w JavaScript
Zmienne wykorzystywane są do przechowywania wartości lub
wyrażeń
Zmienne mogą posiadać nazwy krótkie (np. x) lub długie (np.
imię) przy czym:
• Wielkość liter w nazwach zmiennych ma znaczenie
• Nazwa zmiennej zaczyna się od litery bądź podkreślnika
Deklaracja (tworzenie) zmiennych:
var x;
var carname=”Fiat”;
Zmienne w JavaScript
Deklaracja zmiennych i przypisanie wartości:
var x=5;
var carname=”Fiat”;
Przypisanie wartości do niezadeklarowanej zmiennej (zmienna
jest deklarowana automatycznie):
x=5;
carname=”Fiat”;
Redeklaracja zmiennej (zmienna nie traci swojej wartości):
var x=5;
var x;
Operatory arytmetyczne
Załóżmy, że y=5. Wówczas:
Operatory przypisania
Załóżmy, że x=10 i y=5. Wówczas:
Operatory w JavaScript
Operator konkatenacji
Operatorem konkatenacji jest +.
Przykład
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
Zmienna txt3 wynosi:
What a very nice day
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
Zmienna txt3 wynosi:
What a verynice day
Operatory w JavaScript
x=5+5;
document.write(x);
document.write("<br />");
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
</script>
<p>UWAGA: Wynikiem dodania liczby do
stringu jest string.</p>
Operatory porównania
Załóżmy, że x=5. Wówczas:
Operatory logiczne
Załóżmy, że x=6 i y=3. Wówczas:
Operator warunkowy
Składnia:
variablename=(condition)?value1:value2
Przykład:
greeting=(visitor=="PRES")?"Dear President ":"Dear ";
Instrukcja warunkowa
Przykład
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
Popup boxes
alert – wypisanie informacji dla użytkownika
alert(”tekst”)
confirm – potwierdzenie ze strony użytkownika
confirm(”tekst”)
Popup boxes
prompt – pobranie wartości od użytkownika
prompt(”tekst”)
Funkcje w JavaScript
Funkcje wykorzystujemy m.in. wtedy gdy nie chcemy aby
skrypt był wykonany w czasie ładowania strony.
Funkcja zawiera instrukcje, które będą wykonane wtedy gdy
zajdzie pewne zdarzenie lub gdy wywołamy funkcję.
Funkcja może być zdefiniowana w sekcji <body> lub <head>.
Zdefiniowanie funkcji w sekcji <head> daje gwarancję, że
funkcja jest czytana/załadowana przed wywołaniem.
Funkcja może być też zdefiniowana w zewnętrznym pliku z
rozszerzeniem js. Plik ten musi być dołączony do strony.
Składania:
function nazwafunkcji(var1,var2,...,varX)
{
cialo funkcji
}
Uwagi:
• Słowo function jest pisane z małej litery.
• W przypadku gdy funkcja nie ma parametrów
nawiasy ( i ) pozostają tzn.
function nazwafunkcji()
{
cialo funkcji
}
Przykład
<html>
<head>
function message()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!"
onclick="message()"/>
</form>
</body>
</html>
Przykład
Przykład
<html>
<head>
function product(a,b)
{
return a*b;
Funkcja może zwracać wartość
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
</body>
</html>
Pętle w JavaScript
Składnia pętli for
for(var=startvalue;var<=endvalue;var=var+increment)
{
instrukcje
}
Składnia pętli while
while (var<=endvalue)
{
instrukcje
}
Pętle w JavaScript
Przykład
<html>
<body>
var i=0;
for (i=0;i<=5;i++)
{
document.write("The number is " + i);
}
</script>
</body>
</html>
Pętle w JavaScript
Przykład
<html>
<body>
var i=0;
while (i<=5)
{
document.write("<br/>");
i++;
}
</script>
</body>
</html>
Pętle w JavaScript
Przykład
<html>
<body>
var i=0;
for (i=0;i<=10;i++)
{
if (i==3)
{
break;
}
}
</script>
</body>
</html>
Pętle w JavaScript
Przykład
<html>
<body>
var i=0
for (i=0;i<=10;i++)
{
if (i==3)
{
continue;
}
}
</script>
</body>
</html>
Obiekty w JavaScript
JavaScript jest językiem obiektowym tzn. możemy w nim
definiować własne obiekty zmienne własnych typów.
Każdy obiekt posiada swoje właściwości (pola) oraz metody
(funkcje).
Język JavaScript oferuje
wbudowanych obiektów.
wiele
bardzo
przydatnych
• Właściwości
Właściwość to wartość związana z obiektem.
Przykład
var txt="niedziela";
alert(txt.length);
</script>
• Metody
Metody to operacje, które mogą być wykonane na obiekcie.
Przykład
var txt=„niedziela";
alert(txt.toUpperCase());
</script>
• String Object
http://www.w3schools.com/jsref/jsref_obj_string.asp
• Date Object
http://www.w3schools.com/jsref/jsref_obj_date.asp
• Math Object
http://www.w3schools.com/jsref/jsref_obj_math.asp
HTML DOM
Co to jest HTML DOM?
• DOM to skrót od Document Object Model czyli
Obiektowy Model Dokumentu
• DOM definiuje standard dostępu do dokumentów
HTML i XML
• DOM jest niezależny od platformy i języka
• HTML DOM definiuje obiekty i właściwości elementów
HTML oraz metody dostępu do nich
• DOM jest standardem W3C
HTML DOM document object
Każdy dokument HTML wyświetlony w przeglądarce staje się
obiektem (ang. document object).
Obiekt ten umożliwia dostęp ze skryptu do wszystkich
elementów dokumentu HTML.
Tablice (kolekcje) obiektu dokumentu:
anchors[] – tablica kotwic (anchors)
forms[] – tablica formularzy
images[] – tablica obrazków
links[] – tablica linków
Składnia:
document.nazwa_tablicy.właściwość
Przykład
Kod strony WWW:
<html>
<body>
<a name="html">HTML</a><br/>
<a name="css">CSS</a><br/>
<a href="http://www.o2.pl">Link</a><br/>
<a name="xml">XML</a><br/>
Właściwość
<p>Anchors:
document.write(document.anchors.length);
</script></p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
Właściwość
<p>Linki:
document.write(document.links.length);
</script></p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
Właściwość
<p>Adres:
document.write(document.links[0].href);
</script></p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<a href="http://www.wp.pl">Link 1</a><br/>
<a href="http://www.rmf.fm">Link 2</a><br/>
<a href="http://www.o2.pl">Link 3</a><br/>
<p>
Właściwość
for(var i=0;i<document.links.length;i++)
document.write(document.links[i].href+"<br/>");
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<a name="wp" href="http://www.wp.pl">Link 1</a><br/>
<a name="o2" href="http://www.o2.pl">Link 3</a><br/>
<p>
Właściwość
document.write(document.links[i].name+"<br/>");
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<form name="imie"></form>
<form name="nazwisko"></form>
<form name="wiek"></form>
<p>
document.write(document.forms[0].name+"<br/>");
document.write(document.forms[1].name+"<br/>");
document.write(document.forms[2].name);
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<form name="dane">
<input type="text" name="liczba" value="1">
<input type="text" name="imie" value="Marek">
</form>
<p>
document.write(document.forms[0].liczba.value+"<br/>");
document.write(document.forms[0].imie.value+"<br/>");
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<form name="dane">
<input type="text" name="liczba" value="1">
<input type="text" name="imie" value="Marek">
</form>
<p>
document.write(document.dane.liczba.value+"<br/>");
document.write(document.dane.imie.value+"<br/>");
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<form name="dane">
<input type="text" name="liczba1" value="1">
<input type="text" name="liczba2" value="Marek">
</form>
<p>
document.write(document.dane.liczba1.value+document.dane
.liczba2.value);
</script>
</p>
</body>
</html>
HTML DOM document object
Właściwości obiektu dokumentu:
cookie – zwraca pary nazwa/wartość ciasteczek .
domain – zwraca domenę serwera.
readyState – (o tym później… albo w ogóle?)
referrer – zwraca URL
„załadował” aktualny dokument.
dokumentu,
title – zwraca tytuł dokumentu.
URL – zwraca URL dokumentu.
który
Przykład
Kod strony WWW:
<html>
<body>
Domena:
document.write(document.domain);
</script>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<head>
<title>Jakis tytul</title>
</head>
<body>
Tytul:
document.write(document.title);
</script>
</body>
</html>
HTML DOM
Zgodnie z modelem DOM wszystko w dokumencie HTML jest
węzłem (ang. node).
• Cały dokument jest węzłem dokumentu (ang. document
node)
• Każdy element HTML jest węzłem elementu (ang. element
node)
• Tekst w elementach HTML to węzły tekstu (ang. text node)
• Każdy atrybut HTML jest węzłem atrybutu (ang. attribute
node)
• Komentarze są węzłami komentarzy (ang. comment nodes)
HTML DOM
Przykład
<html>
<head>
<title>My title</title>
</head>
<body>
<a href="">My link</a>
<h1>My header</h1>
<body>
</html>
Drzewo węzłów
HTML DOM
Według modelu DOM dokument HTML to zbiór węzłów. Do
węzłów mamy dostęp przy pomocy języka JavaScript lub innych
języków programowania (w czasie zajęć będziemy wykorzystywać
język JavaScript).
Model DOM daje nam do dyspozycji właściwości oraz metody.
• Właściwość węzła to pewna jego cecha np. nazwa.
• Metoda węzła to operacja która może być wykonana na węźle
np. usunięcie węzła.
HTML DOM
Wybrane właściwości DOM:
x.innerHTML – zawartość elementu x
x.nodeName – nazwa elementu x
x.nodeValue – wartość x
x.parentNode – rodzic elementu x
x.childNodes – dzieci elementu x
x.attributes - atrybuty x
gdzie x to nazwa węzła (element HTML).
HTML DOM
Wybrane metody DOM:
x.getElementById(id) - element z określonym id
x.getElementsByTagName(name) – elementy z
określoną nazwą
x.appendChild(node) – do węzła x dodaj dziecko
o nazwie node
x.removeChild(node) – usuń dziecko węzła x o
nazwie node
gdzie x to nazwa węzła (element HTML).
innerHTML
Właściwość ta umożliwia nam w prosty sposób modyfikację
zawartości dowolnego elementu HTML.
Właściwości innerHTML nie należy do specyfikacji HTML DOM,
ale jest wspierana przez większość przeglądarek.
Właściwość innerHTML jest przydatna w przypadku pobrania
bądź zamiany zawartości elementu HTML (w tym <html> i
<body>). Może być także użyta do podejrzenia zawartości strony,
która została dynamicznie zmodyfikowana.
Przykład
Kod strony WWW:
Metoda
Właściwość
<html>
<body>
<p id="intro">Hello World!</p>
txt=document.getElementById("intro").innerHTML;
document.write("<p>Tekst: " + txt + "</p>");
</script>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<p>
document.write(document.links[i].innerHTML+"<br/>");
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
<html>
<body>
<p>
Nazwa
document.write(document.links.wp.innerHTML+"<br/>");
document.write(document.links[1].innerHTML+"<br/>");
document.write(document.links.o2.innerHTML);
</script>
</p>
</body>
</html>
Przykład
Kod strony WWW:
Metoda
Właściwość
<html>
<body>
txt=document.getElementById("intro").nodeName;
</script>
</body>
</html>
Przykład
Kod strony WWW:
Metoda
Właściwość
<html>
<body>
txt=document.getElementById("intro").parentNode.nodeName;
</script>
</body>
</html>
Przykład
Kod strony WWW:
Metoda
Właściwości
<html>
<body>
txt=document.getElementById("intro").childNodes[0].
nodeValue;
</script>
</body>
</html>
Dostęp do węzłów
Dostęp do węzłów można uzyskać na trzy sposoby:
• przez użycie metody getElementById()
• przez użycie metody getElementsByTagName()
• przez nawigację po drzewie węzłów wykorzystując
zależności między węzłami
getElementById
Metoda getElementById zwraca element z określonym ID.
Składnia:
node.getElementById("id")
getElementById
Kod strony WWW:
<html>
<body>
txt=document.getElementById("intro").innerHTML;
</script>
</body>
</html>
getElementById
Kod strony WWW:
<html>
<head>
//patrz następny slajd
</script>
</head>
<body>
<div id="wr1"
style="position:absolute;left:10px;top:100px;visibility:
visible;">
<img width="200" id="rys1" src="auto.jpg"
onmouseover="move()">
</div>
<input type="button" value="move" onclick="move()">
</body>
</html>
getElementById
Java Script:
function move()
{
var selector =document.getElementById('wr1').style;
var oldLeft = parseInt(selector.left);
var newLeft = (oldLeft + 20);
selector.left = newLeft + "px";
}
getElementById
Kod strony WWW:
<html>
<head>
//patrz dwa slajdy dalej
</script>
</head>
<body>
<div id="wr1"
style="position:absolute;left:10px;top:200px;visibility:hidden;">
<img width="200" id="rys1" src="sanfra.jpg"
onclick="change('wr1')">
</div>
<div id="wr2"
style="position:absolute;left:280px;top:170px;visibility:hidden;">
<img width="200" id="rys1" src="auto.jpg"
onclick="change('wr2')">
</div>
//patrz następny slajd
</body>
</html>
getElementById
Kod strony WWW:
<div style="position:absolute;top:55px;">
<div style="position:absolute;left:20px;">
<img width="80" id="r1" src="sanfra.jpg"><br>
<form>
<input style="position:absolute;left:30px;"
type="checkbox" name="wr1"
onclick="show(this.form.wr1)"/>
</form>
</div>
<div style="position:absolute;left:160px;">
<img width="80" id="r2" src="auto.jpg"><br>
<form>
<input style="position:absolute;left:30px;"
type="checkbox" name="wr2"
onclick="show(this.form.wr2)"/>
</form>
</div>
</div>
getElementById
Java Script:
function show(f)
{
if (f.checked)
document.getElementById(f.name).style.
visibility="visible";
else
document.getElementById(f.name).style.
visibility="hidden";
}
getElementById
Rezultat:
getElementById
Rezultat:
getElementById
Rezultat:
getElementByTagName
Metoda getElementsByTagName zwraca listę elementów
(ang. nodeList) o określonej nazwie.
Składnia:
node.getElementsByTagName("name")
Do poszczególnych elementów listy odwołujemy się za
pomocą indeksu przy czym pierwszy element posiada indeks
= 0.
getElementByTagName
Kod strony WWW:
<html>
<body>
<p>Hello World!</p>
x=document.getElementsByTagName("p");
document.write("Tekst: " + x[0].innerHTML);
</script>
</body>
</html>
getElementByTagName
Kod strony WWW:
<html>
<body>
<p>Hello World!</p>
<div id="main">
<p>Niedziela</p>
</div>
x=document.getElementById("main").getElementsByTagN
ame("p");
document.write("Pierwszy akapit w div: " +
x[0].innerHTML);
</script>
</body>
</html>
getElementByTagName
Kod strony WWW:
<html>
<body>
<p>Hello World!</p>
<p>Niedziela</p>
document.write("Tekst: "+x[0].innerHTML + "<br>");
document.write("Tekst: "+x[1].innerHTML);
</script>
</body>
</html>
getElementByTagName
Kod strony WWW:
<html>
<body>
<p>Hello World!</p>
<p>Model DOM</p>
<p>Wlasciwosc length</p>
for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br/>");
}
</script>
</body>
</html>
Przechodzenie drzewa węzłów
Następujące właściwości:
• parentNode – węzeł będący rodzicem
• firstChild – pierwsze dziecko
• lastChild – ostatnie dziecko
umożliwiają przechodzenie drzewa węzłów.
Kod strony WWW:
parentNode elementów p i div
firstChild elementu body
<html>
<body>
<p>Hello World!</p>
<div>
<p>Model DOM!</p>
<p>Zaleznosci miedzy wezlami</p>
</div>
</body>
</html>
lastChild elementu body
i parentNode elementów p
Kod strony WWW:
<html>
<body>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Istnieją dwie szczególne właściwości dokumentu:
• document.documentElement
rodzicem
–
węzeł
• document.body – dostęp do znacznika body
będący
Kod strony WWW:
<html>
<body>
<p>Hello World!</p>
<div>
<p>Model DOM</p>
</div>
x=document.body;
alert(x.innerHTML);
</script>
</body>
</html>
Właściwości węzłów
W modelu DOM każdy węzeł jest obiektem.
Obiekty posiadają właściwości
manipulowanie obiektami.
i
Ważne właściwości węzłów:
nodeName
nodeValue
nodeType
metody
umożliwiające
Właściwość nodeName
Właściwość określająca nazwę węzła.
• nodeName jest typu read-only
• nodeName dowolnego węzła będącego znacznikiem to nazwa znacznika
• nodeName dowolnego węzła będącego atrybutem
to nazwa atrybutu
• nodeName dowolnego węzła będącego tekstem
(tekst) to #tekst
• nodeName węzła dokumentu to #dokument
Właściwość nodeValue
Właściwość określająca wartość węzła.
• nodeValue dla dowolnego węzła będącego
znacznikiem – brak
• nodeValue dowolnego węzła będącego atrybutem
to wartość atrybutu
• nodeValue dowolnego węzła będącego tekstem to
sam tekst
Kod strony WWW:
<html>
<body>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Właściwość nodeType
Właściwość zwraca typ węzła.
Typ elementu
Typ węzła
Element
1
Atrybut
2
Tekst
3
Komentarz
8
document
9
Modyfikacje elementów HTML - przykłady
Kod strony WWW:
<html>
<body>
document.body.bgColor="lavender";
</script>
</body>
</html>
Kod strony WWW:
<html>
<body>
<p id="p1">Hello World!</p>
document.getElementById("p1").innerHTML="
New text!";
</script>
</body>
</html>
Kod strony WWW:
<html>
<body>
<input type="button"
onclick="document.body.bgColor=‘blue';"
value="Change background color" />
</body>
</html>
Kod strony WWW:
<head>
function ChangeText()
{
document.getElementById("p1").innerHTML="New
text!";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()"
value="Change text" />
</body>
</html>
Kod strony WWW:
<html>
<head>
function ChangeStyle()
{
document.getElementById("p1").style.color="blue";
document.getElementById("p1").style.fontFamily="Ari
al";
}
</script>
</head>
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeStyle()"
value="Change style" />
</body>
</html>
Kompletny opis obiektów JavaScript i HTML DOM można
znaleźć na stronie:
http://www.w3schools.com/jsref/default.asp

XML 5

Transkrypt

Podobne dokumenty

JAVAScript w dokumentach HTML (2)

JavaScript cd. (2)

JavaScript - sosw.poznan.pl

Krótki kurs JavaScript

Strona internetowa w systemach unix

JAVAScript w dokumentach HTML (2)