JS_w1

JavaScript - wykład 1

Podstawy

Beata Pańczyk

(na podstawie wykładów

dr inŜ. Anny Kamińskiej)

Język JavaScript

• JavaScript – wprowadzony przez firmy Netscape

i Sun język skryptowy 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 skryptowy

– nie wymagający kompilacji

– polecenia języka wykonuje specjalny program

zawierający interpreter komend

Podstawowe informacje

• Język zorientowany obiektowo

• Skrypt w JavaScript – plik tekstowy

• Tworzenie skryptów – edytory tekstowe

i graficzne

• Składnia i podstawowa struktura języka

JavaScript wzorowana na C, C++, Java

Wady

• Ograniczony zakres stosowania –

nie nadaje się do tworzenia złoŜonych
programów (zbyt wolne)

• Brak moŜliwości zabezpieczania kodu

skryptu przed skopiowaniem przez innych
uŜytkowników WWW

Zastosowania

• Dynamiczna modyfikacja stron WWW

• Obsługa zdarzeń

• Tworzenie interaktywnych, multimedialnych

aplikacji dla WWW, np.

– menu

– dynamiczne formularze

– gry

– wyszukiwarki stron

– zegarki, animacje, dźwięk, ruchomy tekst

Wersje języka JavaScript

• Wersje dla Netscape Navigatora

– JavaScript 1.0 (LiveScript) Navigator 2.0
– JavaScript 1.1

Navigator 3.0

– JavaScript 1.2

Navigator 4.0 itd.

• Implementacja JavaScript dla Microsoft Explorera

– Jscript (lub Active Scripting)

– JScript 1.0 – wersja prawie kompatybilna

z JavaScript 1.0

– JScript 2.0 – dla Explorera 3.02 itd.

• Obecnie: ECMAScript (opisany w specyfikacji

ECMA 262) połączony z W3C HTML DOM

JavaScipt i ECMAScript

• Organizacja ECMA - European Computer

Manufacturers Association
http://www.ecma-international.org/

Współpraca Netscape z ECMA w celu
standaryzacji JavaScript

• ECMAScript – standard JavaScript

• JavaScript 1.5 jest w pełni zgodny z

ECMAScript-262

Podstawowe pojęcia OOP

• Klasa – definiowany przez programistę nowy typ

obiektowy (typ klasy obiektów)

• Składniki klasy

– pola (właściwości) – zawierające dane

– metody - funkcje wykonujące operacje na polach

• Obiekt – instancja klasy

• Enkapsulacja

• Dziedziczenie

• Polimorfizm

OOP w JavaScript

• Język uproszczony

• Programy – przejrzyste, czytelne, krótkie

• MoŜliwość definiowania własnych metod i

klas

• Udostępnianie obiektów tworzonych

automatycznie przez przeglądarkę

Kod JavaScript w HTML

document.write("Hello,world!");

// koniec ukrywania skryptu -->
</script>

</head>
<body> Zawarto

ść

strony www

</body> </html>

• Podstawowy obiekt

document

- reprezentuje

zawartość załadowanej strony HTML

• Metoda

write

() obiektu

document

- wyświetla w aktywnym oknie tekst (parametr
metody)

Kod JavaScript w HTML4.x

• kod w bloku znaczników

• wymagany parametr:

– type

(dla JavaScriptu "text/javascript")

– opcjonalnie parametr

language

oznaczający

minimalny numer wersji JavaScript

• Np..

language="JavaScript1.5">

// Ten skrypt wymaga JS 1.5.
function fun() { ... }

</script>

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 ">"

• <script type="text/javascript">

// <![CDATA[

function fun() { ... }

// ]]>
</script>

Znaki komentarza "//" zapobiegają błędnemu
zinterpretowaniu tej sekcji przez starsze
przeglądarki

Skrypty w plikach

zewnętrznych

• Zewnętrzne skrypty dodaje się takŜe przy

uŜyciu <script>, dodając tylko parametr

src

z nazwą pliku zawierającego kod

skryptu:

• <script

type="text/javascript"

src="plik.js">

</script>

Blok <script>

• 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)

JavaScript w przeglądarkach

• Implementacje JavaScriptu w przeglądarkach dostarczają

obiektów pozwalających na:

– modyfikowanie zawartości dokumentu

– tworzenie i odczyt cookies (obiekt document)

– manipulowanie oknami i wyświetlanie prostych okien

dialogowych (obiekt window)

– pobieraniem informacji o przeglądarce (obiekt

navigator)

– sterowaniem pluginami przeglądarek oraz obsługą

zdarzeń

Problemy

• problemy z manipulowaniem zawartością

dokumentu:

– brak standaryzacji obiektowego modelu

dokumentu (DOM)

– początkowo w wersjach 4.x przeglądarek

Netscape dostęp do niektórych
elementów dokumentu moŜliwy był przy
uŜyciu kolekcji document.layers

– a w IE 4.x - document.all

DOM Document Object Model

• Organizacja W3C - jednolity DOM obsługiwany

przez wszystkie współczesne przeglądarki
(Netscape od wersji 6, IE od wersji 5, Opera od
wersji 6, Mozilla Suite, Mozilla Firefox i Safari

w dowolnej wersji)

• Aby uzyskać referencje do obiektu wewnątrz

dokumentu HTML, naleŜy skorzystać z metody
document.getElementById(identyfikator), tym
samym wymienione wcześniej kolekcje all i layers
uwaŜa się za przestarzałe

Podstawy języka JavaScript

• RozróŜnianie wielkości liter

(domyślna pisownia małymi literami)

• Zakończenie instrukcji - opcjonalny znak średnika

• Bloki instrukcji – w nawiasach klamrowych {}

• Komentarz zawarty w kilku wierszach

/* Długi komentarz

zyka JavaScript */

• Komentarz jednowierszowy

// krótki komentarz

Typy zmiennych

• Liczba (number)
• Łańcuch tekstowy (string) - w pojedynczym

lub podwójnym cudzysłowie, np.

'Rok 2000'

przykładowy tekst

łańcuch pusty (teŜ tekst)

• Wartości logiczne (boolean)

– prawda (

true

)

– fałsz (

false

)

• Specjalny typ

null

– wartość pusta

• Wartość specjalna NaN (Not a Number)

Nazwy zmiennych

• Mogą zaczynać się od

– litery

– znaku ‘_’

• Nie mogą zawierać

– spacji
– polskich liter

• Nie mogą być słowami kluczowymi języka

JavaScript

Definiowanie zmiennych

• Definicja zmiennej – słowo kluczowe

var

(opcjonalne)

• Przykłady definiowania zmiennych

var liczba;

var cena=10;

var liczba=7;

var waluta=

$";

liczba=7;

var napis=cena+waluta;

• Brak konieczności definiowania zmiennych

na początku programu (niebezpieczeństwo
nieczytelności!)

Literały

• Literały – wartości zmiennych, np.

– literał znakowy

"złoty"

– literał liczbowy

2.35e-4

• Przykłady literałów liczbowych

– 3.142

liczba zmiennoprzecinkowa

– 314E-2

liczba zmiennoprzecinkowa

– 26

liczba całkowita

– 076

liczba ósemkowa

– 0x9F

liczba szesnastkowa

Literały

• Znaki specjalne w literałach znakowych

(stałe znakowe) - jak w C

\’

• Znak w szesnastkowym kodzie Unicode

\uXXXX

(XXXX – liczba 0000-FFFF)

np. "\u0041" - znak "A"

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:

, &, |, ^, ~

Konwersja typów

• 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ć

– dokonywać na nich operacji

Konkatencja

• Łączenie typu znakowego i liczbowego

operatorem "+" – wynik typu znakowego

• Najprostszy przypadek konwersji typów

• Przykład

t="2000";

t+=10;

//Wynik: t="200010"

Tablice

• Tablice o niezdefiniowanej długości moŜna

tworzyć za pomocą konstruktora

new

oraz metody

Array()

• np.

var tab1=new Array();

var tab2=new Array("Rok","2000");

• odwołania do elementów tablicy np.:

tab2[0]

• numerowanie elementów tablicy od 0

Instrukcje sterujące

• Składnia - jak w C/C++/Javie

• Instrukcje wyboru:

switch

, operator

warunkowy

(warunek)?instrukcja_1:instrukcja_2;

• Pętle:

for

while

do, for in

• Instrukcje

break

continue

Instrukcja

warunkowa

• if (warunek)

{instrukcje}

else if (warunek)

{instrukcje}

else {instrukcje}

• (warunek) ? warto

ść

1 : warto

ść

• np.

if(liczbaKsiazek >= 5)

alert(”Prezent!");

else alert("Dzi

kujemy!");

Instrukcja wyboru

• switch (zmienna)

{case warto

ść

1: instrukcje;break;

case warto

ść

2: instrukcje;break;

............................

default:instrukcje;

}

Iteracje

• Instrukcja while:

while (warunek)

{instrukcje}

• Instrukcja for:

for(licz=pocz;licz<=koniec;licz++)

{instrukcje}

• Instrukcja for dla obiektów (przechodzi przez

wszystkie pola danego obiektu - w tym elementy
tablicy):

for (wlasnosc in obiekt)

{instrukcje}

Iteracje - przykłady

var haslo=3384;

var prosba="Podaj hasło!";

var odpowiedz=0;

while(odpowiedz!=haslo)

{

odpowiedz=prompt(prosba, "");

}

for (i=1; i<5; i++)

{

document.write(i+"<br>");

}

Inne instrukcje

• Przerwanie wykonywania pętli i prze-

kazanie sterowania na jej początek

continue

• Przerwanie wykonywania pętli i prze-

kazanie sterowania do instrukcji za pętlą

break

• Instrukcja with

with (nazwa_obiektu)

{instrukcje}

Funkcje

• 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}

Przykład zastosowania funkcji

function sprawdzkod(kod) {

if(kod==1313)

return true;

return false;

}

</script>
</head>

Przykład zastosowania funkcji – cd

var kod=prompt("Podaj kod
dost

pu"," ");

if(sprawdzkod(kod))

alert("wła

ciwy kod!");

else

alert("bł

dny kod!");

</script>
</body></html>

Zmienne lokalne i globalne

• 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;

}

Funkcje rekurencyjne

• Funkcja rekurencyjna wywołuje samą siebie

• Przykład funkcji rekurencyjnej

function silnia(liczba) {

s*=liczba--;

if(liczba>=1) silnia(liczba);

return s;

}

JavaScript - Przykład 1

<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> <input NAME=Imie TYPE=button

VALUE="Imi

" onClick="imie()"/> Kliknij

</form> <hr/> </body> </html>

Przykład 1 - wynik

Obiekty i metody

• metoda - funkcja będąca własnością

obiektu

• obiekty definiuje się dwuetapowo -

najpierw strukturę obiektu (prototyp) a na
podstawie prototypu tworzy się faktyczny
obiekt

Obiekty

• w JavaScripcie wszystko jest obiektem

• Object - podstawowy obiekt

• standard ECMA opisuje takŜe obiekty:

– Array (tablica)

– String (łańcuch tekstowy)

– Number (liczba całkowita lub rzeczywista)

– Boolean (wartość logiczna)

– Function (funkcja JavaScriptu)

– Date (data)

– Math (operacje matematyczne).

Dostęp do pól i metod

• 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"]();

Instrukcja wiąŜąca with

• Instrukcje:

obiekt.pole1=warto

ść

;

obiekt.pole2=warto

ść

;

• RównowaŜne:

with (obiekt)

{ pole1=warto

ść

;

pole2=warto

ść

;

}

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);

Obiekty i metody - przykład

• funkcja garderoba (konstruktor) definiuje prototyp

obiektu z trzema własnościami zmiennymi materiał,
kolor, rozmiar i jedną metodą cena()

unction garderoba(materiał,kolor,rozmiar)

{

this.materiał=materiał;

this.kolor=kolor;

this.rozmiar=rozmiar;

this.cena=mcena();

}

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

}

Obiekty i metody - przykład cd

• Generowanie konkretnego obiektu ma postać:

sweter=new
garderoba(’bawelna’,’czarny’,’M’)

• Ustalenie ceny swetra:

cenaswetra=sweter.cena()