Prezentacja programu PowerPoint

Download Report

Transcript Prezentacja programu PowerPoint 

Wstęp do JavaScriptu
Marek Magiera
Październik 2003r.
JavaScript a Java
JavaScript




Interpretowany przez klienta
Tworzy skrypty, które mogą
być bezpośrednio wstawiane
do stron HTML
Zorientowany obiektowo
Łatwy
Java




Wykonywany przez klienta
Tworzy "aplety", które są
wywoływane ze strony HTML,
ale nie umieszczane w niej
Oparty na obiektach
Wymaga doświadczenia
programistycznego
Język zorientowany obiektowo
– co to znaczy? (1)
Obiekty
Elementy występujące w danym środowisku
 koty, komputery, samochody itp.
Obiekty powinny posiadać indywidualne nazwy (nie kot1 a np. mruczek)
Obiekty w JavaScript
Elementy występujące w oknie przeglądarki www
okna, formularze, przyciski itp.
posiadające indywidualne nazwy (nie przycisk1 a np. przyciskZamknij)
Język zorientowany obiektowo
– co to znaczy? (2)
Właściwości
Obiekty mają właściwości
koty – futerko, pazurki, brzuch
 komputery – myszkę, klawiaturę itp.

Obiekty można zmieniać modyfikując ich właściwości. Niektóre właściwości
mogą być obiektami. Przykładowa właściwość o nazwana pusty może być
stosowana tam gdzie ma sens. Brzuch może być pusty,
ale futerko – już niebardzo (co to byłby za kot?).
Właściwości w JavaScript
formularze - elementy itp.
 okna – PasekStanu, PasekNarzędzi

Język zorientowany obiektowo
– co to znaczy? (3)
Metody
Obiekty potrafią coś robić i to nazywamy metodami
koty – mruczą, drapią
 komputery – liczą, zawieszają się itp.

Obiekty i właściwości to rzeczowniki a metody czasowniki.
Metody w JavaScript
 okna – otworzyć( ), zminimalizować( )
Nawiasy ( ) oznaczają, że jest mowa o metodzie, a nie o właściwości.
Język zorientowany obiektowo
– co to znaczy? (4)
Łączenie obiektów, właściwości i metod
stosowane jest aby lepiej opisać obiekt lub proces.
kot.mrucz( )
 kot.łapy.przednie.lewa.drap( )

A w JavaScript
okno.zamknij( )
 formularz.elementy.przyciskOpcji.kliknij( )
 dokument.obrazek.nazwa.ukryj( )
 dokument.wypisz( )

Zapis taki nazywamy składnią kropkową.
Język zorientowany obiektowo
– co to znaczy? (5)
Zdarzenia
Jeśli kot „obsługuje” zdarzenie przyGłaskaniu( ) może wykonać
kot.mrucz( )
 kot.łapy.przednie.lewa.nieDrap( )

A w JavaScript
Zdarzenia to czynności wykonywane przez użytkownika podczas odwiedzania
strony www. Przesłanie formularza wywoła zdarzenie onClick( )

formularz.elementy.przyciskOpcji.kliknij( )
Jak umieszcza się skrypty
w dokumencie HTML? (1)
W znacznikach SCRIPT
<script language="JavaScript" type="text/javascript">
<!-- Tutaj polecenia skryptu...
// -->
</script>
Cały skrypt jest objęty znakami komentarza (<!-- i -->),
co gwarantuje, że kod nie zostanie wyświetlony na ekranie
nawet przez stare przeglądarki nie obsługujące JS.
Jak umieszcza się skrypty
w dokumencie HTML? (2)
Z atrybutem np. onClick itp.
W zasadzie wszystkie elementy dokumentu HTML
generują pewne zdarzenia, gdy wystąpią określone
okoliczności. Z tymi zdarzeniami można powiązać polecenia JS.
A to inne zdarzenia
onMouseOver onMouseOut (najechanie i zjazd z obiektu)
onMouseDown onMouseUp (wcisnięcie i puszczenie przycisku)
onFocus onBlur
(wybranie i opuszczenie danego pola formularza)
onLoad onUnload onAbort
<IMG SRC=„obraz.gif"
onClick="polecenie 1;polecenie 2; polecenie 3">
Jak umieszcza się skrypty
w dokumencie HTML? (3)
Z osobnego pliku
stosujemy gdy skrypt, którego chcemy używać ma dosyć dużą objętość,
a korzystamy z niego na kilku podstronach naszego serwisu www
 większa czytelność kodu
 łatwiejsza modyfikacja skryptu
 mniejsza objętość serwisu
<script src="plik.js" language="JavaScript">
</script>
Przykłady skryptów (1)
<HTML>
<HEAD>
<TITLE>Mój pierwszy skrypt</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H2>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
document.write("Elo Ziom!")
</SCRIPT>
</H2>
</BODY>
</HTML>
Przykłady skryptów (2)
<HTML>
<HEAD>
<TITLE>Mój drugi skrypt</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCAA>
<H2>
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
document.write ("<FONT COLOR=Red><B>Witaj </B> </FONT>");
</SCRIPT>
</H2>
</BODY>
</HTML>
Przykłady skryptów (3)
<HTML>
<HEAD>
<TITLE>Mój trzeci skrypt</TITLE>
</HEAD>
<BODY BGCOLOR=#FFCCAA>
<H2> Data ostatniej poprawki
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
document.write (document.lastModified);
</SCRIPT>
</H2>
</BODY>
</HTML>
Przykłady skryptów (4)
<SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT">
<!-- Ukrycie skryptu przed starszymi przeglądarkami
if (navigator.appName == "Netscape")
{
document.write("Korzystasz z Netscape Navigatora.")
}
else
{
document.write("Nie używasz Netscape'a - może powinieneś?")
}
// Koniec ukrywania skryptu przed starszymi przeglądarkami -->
</SCRIPT>
Przykłady skryptów (5)
<HTML>
<HEAD>
<TITLE>Mój czwarty skrypt</TITLE>
</HEAD>
<BODY>
<p align="center">
<FORM>
<INPUT TYPE="button" VALUE="Napisz do mnie"
onClick="parent.location.href='mailto:[email protected]'">
</FORM>
</p>
</BODY>
</HTML>