Wykład 1 - Republika WWW

Transkrypt

Język JavaScript
JavaScript - wykład 1
Podstawy
Beata Pańczyk
W oparciu o kurs:
http://republika.onet.pl/-1,34,fabryka.html
1
• JavaScript – wprowadzony przez firmy Netscape
i Sun język skryptowy (nie wymaga kompilacji)
wspomagający tworzenie dokumentów HTML
• Wykonywanie poleceń JavaScript - przeglądarka
WWW (interpretacja po stronie klienta)
• JavaScript dodaje do stron WWW interaktywność –
moŜliwość reagowania na polecenia uŜytkownika
• Język zorientowany obiektowo, składnia i
podstawowa struktura wzorowana na C/C++
• jeden ze składników DHTML-a, czyli Dynamicznego
HTML-a (z ang. Dynamic HTML).
• DHTML to technika tworzenia i modyfikacji
elementów strony za pomocą języka skryptowego. 2
Historia
•
•
•
•
•
połowa lat 90 - w firmie Netscape powstał język LiveScript
1995 - przemianowany na JavaScript
główny twórca - Brendan Eich
kolejne lata - kolejne wersje
ustandaryzowany przez ECMA (międzynarodowa
organizacja standaryzacyjna, skrót od dawnej nazwy
European Computer Manufacturers Association)
• zamieszanie w nazewnictwie - uŜywane są nazwy
JavaScript, ECMAScript oraz (dla produktów firmy
Microsoft) JScript.
• obecnie występujące na rynku wersje najpopularniejszych
przeglądarek (FireFox 1.5, Internet Explorer 6, Netscape 8,
Opera 8) są zgodne z ECMAScript v3, czyli JavaScript 1.5
oraz JScript 5.5 i 5.6.
Wersje
ECMA
Script
V1
V3
V4
JavaScript
JScript
1.0
1.1
1.2
1.3
1.4
1.5
2.0
1.1
2.0
3.0
5.5, 5.6
.NET
3
4
Określenie typu skryptów
Zastosowania
• budowa stron reagujących na działania
uŜytkownika
• sprawdzanie poprawności formularzy
• obsługa elementów interfejsu strony
(np. dynamicznych menu i przycisków)
• dynamiczne generowanie treści oraz
realizacja wielu innych efektów
5
• dokument HTML – powinien w nagłówku
zawierać określenie domyślnego języka
skryptowego – nie jest to obligatoryjne, ale
zalecane przez W3C
• <meta http-equiv="Content-Script-Type"
content="typ">
typ - rodzaj języka.
• w przypadku języka JavaScript:
<meta http-equiv="Content-Script-Type"
content="text/javascript">
• brak powyŜszego znacznika - przeglądarka
próbuje ustalić domyślny język skryptowy na
podstawie nagłówków HTTP otrzymanych z
serwera
6
1
Umieszczanie skryptów
w kodzie HTML
Skrypty osadzone
• Skrypty osadzone - umieszczane wewnątrz
kodu HMTL przy uŜyciu znacznika
<script> z obligatoryjnym parametrem
type, o ile dokument ma być zgodny ze
specyfikacją HTML 4
• Skrypty zewnętrzne - umieszczenie
skryptu w oddzielnym pliku i uŜycie
znacznika <script> z parametrem src
7
Kod JavaScript w HTML<4
• <script type="text/javascript">
//tutaj kod skryptu
</script>
• większość dostępnych na rynku przeglądarek potrafi
pracować w trybie zgodności z przestarzałymi standardami i
akceptuje równieŜ znacznik <script> nie zawierający
argumentu type
• language – parametr dawniej określający język skryptu
(np. language="javascript"); nie występuje w ścisłej
(strict) wersji standardu HTML 4 i obecnie nie naleŜy go
stosować (z drugiej strony - starsze przeglądarki,
obsługujące standard HTML wcześniejszy niŜ 4.0,
rozpoznają tylko parametr language, nie rozpoznają
natomiast parametru type)
8
Kod JavaScript w HTML4.x
<html>
<head>
<script language="javascript">

</script>
</head>
• kod w bloku znaczników <script>...</script>
• wymagany parametr:
– type (dla JavaScriptu "text/javascript")
– opcjonalnie parametr language oznaczający
minimalny numer wersji JavaScript
• Np..
<script type="text/javascript"
language="JavaScript1.5">
// Ten skrypt wymaga JS 1.5.
function fun() { ... }
</script>
9
Kod JavaScript w XHTML
• nie występuje parametr language
• specyfikacja XML wymaga, by umieścić treść
skryptu wewnątrz sekcji CDATA, jeśli stosowane
są znaki "<" czy ">"
// <![CDATA[
function fun() { ... }
// ]]>
</script>
Znaki komentarza "//" zapobiegają błędnemu
zinterpretowaniu tej sekcji przez starsze
przeglądarki
11
10
Skrypty zewnętrzne
• oddzielny plik zwykle z rozszerzeniem js
• <script type="text/javascript"
src="lokalizacja skryptu">
</script>
src="http://nazwa.domeny/skrypty/skrypt.js">
</script>
• znacznik zamykający </script> jest niezbędny
i nie naleŜy go pomijać.
12
2
Pełny dokument ze skryptem
Ukrywanie skryptów
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Moja strona WWW</title>
src="http://nazwa.domeny/skrypty/skrypt.js">
</script>
</head>
<body> <script type="text/javascript"> </script>
</body>
13
</html>
• Jeśli przeglądarka nie obsługuje pewnego
typu skryptów, bądź obsługa skryptów jest
wyłączona - naleŜy wyświetlić stosowną
informację lub teŜ wykonać alternatywny
kod stosując znacznik <noscript>:
• <script type="text/javascript"> </script>
<noscript>
<h1>
Ta witryna wymaga obsługi skryptów
</h1>
</noscript>
14
Prosty skrypt
Ukrywanie skryptów c.d.
• witryna moŜe być odczytywana przez przeglądarki nie
obsługujące JavaScript i nie rozpoznające znacznika
<script> (mało prawdopodobne)
• w celu uniknięcia wyświetlenia kodu skryptu, ujmuje się
go w komentarze SGML:

</script>
15
<?xml version="1.0" encoding="iso-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-2"/>
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<title>Pierwszy skrypt</title>
<script type="text/javascript">

</script> </head>
<body> <p>Pierwszy skrypt</p>
16
</body> </html>
Blok <script>
Wynik działania skryptu
• Umieszczanie bloku - w nagłówku (przy pobieraniu
strony będzie ładowany jako pierwszy) lub ciele
dokumentu
• Dowolna liczba bloków <script> na stronie
• Kolejność osadzania skryptów ma znaczenie - będą
wykonywane w kolejności umieszczenia na stronie
• Przeglądarka moŜe wstrzymywać ładowanie
i wyświetlanie strony póki nie wykona skryptu najlepiej skrypty umieszczać na samym końcu (co
pomoŜe uniknąć błędów polegających na odwoływaniu
się do elementów strony, które jeszcze się nie
załadowały)
17
18
3
Metoda document.write sekcji
skrypt w <head>
Metoda document.write
<body>
document.write("<h1>");
document.write("Oto moja strona WWW");
document.write("</h1>");
</script>
<p>OK</p>
</body>
</html>
19
Validation Error: document type does not allow element "h1" here.
<head>
...
<!-document.write("<h1>");
document.write("Oto moja strona WWW");
document.write("</h1>");
-->
</script> </head>
<body> <p>OK</p>
</body></html>
20
Komentarze w kodzie skryptu
JavaScript w przeglądarkach
• Komentarz blokowy
/* ... treść komentarza
blokowego... */
</script>
• Komentarz wierszowy
//treść komentarza liniowego...
</script>
• Komentarz wierszowy moŜe się znaleźć w środku
komentarza blokowego:
/*
//treść komentarza
21
*/
• Implementacje JavaScriptu w przeglądarkach
dostarczają obiektów pozwalających na:
– modyfikowanie zawartości dokumentu (obiekt
document)
– manipulowanie oknami i wyświetlanie okien
dialogowych (obiekt window)
– pobieraniem informacji o przeglądarce (obiekt
navigator)
– obsługę zdarzeń
Podstawy języka JavaScript
Typy zmiennych
22
• liczbowy (number) - nie ma rozróŜnienia na typy
całkowitoliczbowe i rzeczywiste
(zmiennopozycyjne). Liczby zapisywane są za
pomocą literałów liczbowych
• łańcuchowy (string) - w pojedynczym lub
podwójnym cudzysłowie
• logiczny (boolean) : true,false
• specjalny typ null – wartość pusta
• RozróŜnianie wielkości liter
(domyślna pisownia małymi literami)
• Zakończenie instrukcji - opcjonalny znak średnika
• Bloki instrukcji – w nawiasach klamrowych {}
• Nazwy zmiennych:
– mogą zaczynać się od litery, znaku ‘_’
– nie mogą zawierać spacji polskich liter
– nie mogą być słowami kluczowymi języka
JavaScript
• obiektowy
23
24
4
Literały
• Literały – wartości zmiennych, np.
– literał znakowy
"złoty", 'kolor'
– literał liczbowy
2.35e-4, 0.1E-1
• Znaki specjalne w literałach znakowych (stałe
znakowe) - jak w C \b, \f, \n, \r, \t, \’, \\
• Znak w szesnastkowym kodzie Unicode \uXXXX
np. "\u0041" - znak"A"
• Przykłady literałów liczbowych
– 3.142
liczba zmiennoprzecinkowa
– 314E-2 liczba zmiennoprzecinkowa
– 26
liczba całkowita
– 076
liczba ósemkowa
– 0x9F
liczba szesnastkowa
Definiowanie zmiennych
• Definicja zmiennej – słowo kluczowe var
(opcjonalne)
• Przykłady definiowania zmiennych
var liczba;
var liczba=7;
liczba=7;
var cena=10;
var waluta="$";
var napis=cena+waluta;
• Brak konieczności definiowania zmiennych
na początku programu
25
26
Konwersja typów
i konkatenacja
Operatory
• Operatory arytmetyczne: +, -, /, *, %
• Operatory zwiększania i zmniejszania: -- , ++
• Operatory porównania: ==, !=, >, <, >=, <=
=== równe wartością i typem
!== róŜne wartością i typem
• Operatory logiczne: &&, ||, !
• Operatory przypisania: =, +=, -=, *=, /=, %=
• Operatory bitowe: >>, <<, &, |, ^, ~
• JavaScript - język o łagodnej kontroli typów
• Zmienne i literały róŜnych typów moŜna bez
potrzeby wcześniejszego uzgadniania typów
porównywać, łączyć itp.
• Łączenie typu znakowego i liczbowego operatorem
"+" – wynik typu znakowego
• Przykład - najprostszy przypadek konwersji typów:
t="2000";
t+=10;
//Wynik:
t="200010"
27
28
Instrukcja warunkowa i switch
Tablice
• var nazwa_tab=Array(rozmiar_tablicy);
np.:
var tablica=Array(10);
• tablice o niezdefiniowanej długości moŜna tworzyć za
pomocą konstruktora new np.
var tab1=new Array();
var tab2=new Array("Rok","2000");
var tablica = new Array("wart1",
"wart2", "wart3");
• odwołania do elementów tablicy np.: tab2[0]
• numerowanie elementów tablicy od 0
29
• if (warunek) {instrukcje}
else if (warunek)
{instrukcje}
else
{instrukcje}
• (warunek)?wartość1:wartość2
• switch (zmienna)
{case wartość 1: instrukcje;break;
case wartość 2: instrukcje;break;
............................
default:instrukcje;
}
• np. if(liczbaKsiazek >= 5)
alert(”Prezent!");
else alert("Dziękujemy!");
30
5
Iteracje
Iteracje - przykłady
• while (warunek)
{instrukcje}
• for(licz=pocz;licz<=koniec;licz++)
{instrukcje}
• do { instrukcje)
while (warunek)
var haslo=3384;
var prosba="Podaj hasło!";
var odpowiedz=0;
while(odpowiedz!=haslo)
{
odpowiedz=prompt(prosba, "");
}
• for dla obiektów (przechodzi przez wszystkie pola
danego obiektu - w tym elementy tablicy):
for (wlasnosc in obiekt)
{instrukcje}
31
Inne instrukcje
for (i=1; i<5; i++)
{
document.write(i+"<br>");
}
32
Funkcje
• Przerwanie wykonywania pętli i przekazanie sterowania na jej początek
continue
• Przerwanie wykonywania pętli i przekazanie sterowania do instrukcji za pętlą
break
• Instrukcja with
with (nazwa_obiektu)
{instrukcje}
33
Przykład zastosowania funkcji
<html><head>
function sprawdzkod(kod)
{ if(kod==1313)return true;
return false;
}
</script></head>
<body>
<script type=„text/javascript">
var kod=prompt("Podaj kod dostępu"," ");
if(sprawdzkod(kod))
alert("właściwy kod!");
else
alert("błędny kod!");
</script>
35
</body></html>
• Umieszczanie funkcji - w nagłówku dokumentu
• Funkcje (zmienne lokalne funkcji deklaruje się jako var,
zwracane rezultaty poprzedza się słowem kluczowym
return)
function nazwa_funkcji(arg1,arg2,...)
{ instrukcje;
return zmienna
}
function nazwa_funkcji()
{ instrukcje;
return zmienna
}
34
Przykład – wynik dzialania
36
6
Zmienne lokalne i globalne
JavaScript - Przykład 1
• Zmienne lokalne - występujące w funkcjach
(lokalne dla danej funkcji)
• Zmienne globalne – występujące poza funkcjami
• Zmiennej lokalnej nie moŜna wywołać poza
funkcją
• np.
function piszLublin(tekst){
var nazwa="Lublin: "; //lokalna
document.write(nazwa + tekst);
return true;
}
37
<html> <head>
<title>Pierwszy przkład w JavaScript</title>
function imie()
{w=window.prompt("Podaj swoje imie:","");
if (w==""){window.alert("Cześć ANONYMOUS?");}
else {window.alert("Cześć "+w+" !!!");}
}
</script> </head>
<body> <h2> PRZYKŁAD 1 </h2>
<form action="..." method="post">
<p><input name="imie" type="button"
value="imie" onclick="imie()" /> Kliknij
38
</p></form> <hr/> </body> </html>
Przykład 1 - wynik
Obiekty
39
Dostęp do pól i metod
• obiekty definiuje się dwuetapowo - najpierw
strukturę obiektu (prototyp) a na podstawie prototypu
tworzy się faktyczny obiekt
• w JavaScripcie wszystko jest obiektem
• Object - podstawowy obiekt
• Obiekty JavaScript:
– Array (tablica)
– String (łańcuch tekstowy)
– Number (liczba całkowita lub rzeczywista)
– Boolean (wartość logiczna)
– Function (funkcja JavaScriptu)
– Date (data)
40
– Math (operacje matematyczne).
Instrukcja wiąŜąca with
• Obiekty JavaScriptu są tablicami asocjacyjnymi
• Dostęp do pól obiektów przy uŜyciu dwóch
równowaŜnych notacji:
obiekt.pole i obiekt["pole"]
• metody obiektu (funkcje) są jego polami - dostęp
jest moŜliwy przy uŜyciu notacji z kropką lub
notacji z nawiasami kwadratowymi
• Np.
m.metoda1();
m["metoda1"]();
• Instrukcje:
obiekt.pole1=wartość;
obiekt.pole2=wartość;
• RównowaŜne:
with (obiekt)
{ pole1=wartość;
pole2=wartość;
}
41
42
7
Definiowanie własnego obiektu
• Aby zdefiniować własny obiekt wystarczy utworzyć
funkcję konstruktora:
• // funkcja konstruktora
function MojObiekt(poleA, poleB)
{ this.poleA = poleA;
this.poleB = poleB;
function _metoda1()
{alert("mojObiekt::metoda1()");}
this.metoda1 = _metoda1;
function _metoda2()
{alert("mojObiekt::metoda2()");}
this.metoda2 = _metoda2;
}
• utworzenie instancji klasy MojObiekt (operator new):
var m = new MojObiekt(2, 3);
43
Obiekty i metody - przykład
• funkcja garderoba (konstruktor nowego obiektu)
definiuje prototyp obiektu z trzema własnościami
zmiennymi materiał, kolor, rozmiar i jedną metodą
cena()
function garderoba(materiał,kolor,rozmiar)
{
this.materiał=materiał;
this.kolor=kolor;
this.rozmiar=rozmiar;
this.cena=mcena();
}
44
Obiekty i metody - przykład cd
function mcena()
//Cena wyjsciowa 10+dodatek zalezny od materialu
{ var cenawyjsciowa=10;
var dodatek=0;
if (this.material==‘bawelna’) {dodatek=5.50};
if (this.material==‘akryl’) {dodatek=2.50};
if (this.material==‘lycra’) {dodatek=7.50};
return cenawyjsciowa+dodatek
}
• Generowanie konkretnego obiektu:
sweter=new garderoba(’bawelna’,’czarny’,’M’)
• Ustalenie ceny swetra:
cenaswetra=sweter.cena()
45
8

Wykład 1 - Republika WWW

Transkrypt

Podobne dokumenty

JavaScript- Podstawy programowania na potrzeby

Zadanie 1

Openwebmail i "Premature end of script headers"

Instrukcja pierwsza wraz z ćwiczeniami

JavaScript – podstawy