Podstawy programowania w JavaScript - Programowanie

(1)

Podstawy programowania Podstawy programowania w j w języku JavaScript ęzyku JavaScript

Wprowadzenie — koncepcja, geneza, podstawowe elementy języka

Część pierwsza

Roman Simiński

roman.siminski@us.edu.pl www.us.edu.pl/~siminski Autor

Kontakt

(2)

Geneza powstania i krótka historia Geneza powstania i krótka historia

Na początku lat 90-tych najpopularniejsze były dwie przeglądarki: Internet Explorer i Netscape Navigator.

Ówczesne WWW było statyczne — konstruowanie stron z wykorzystaniem samego języka HTML było „wiedzą tajemną”.

Twórcy przeglądarek dostrzegają konieczność rozszerzenia stron o elementy umożliwiające interakcję z użytkownikiem oraz elementy rozszerzające

funkcjonalność i atrakcyjność wizualną stron.

W wersji 2 Navigatora, firma Netscape wprowadza interpreter języka

programowania, który może być wstawiony w kod HTML — język nazywa się początkowo LiveWire, potem LiveScript a następnie JavaScript.

Nazwa JavaScript powstała w wyniku porozumienia firmy Netscape i Sun, ta ostatnia promuje języka Java. Niestety te zbieżność nazw dwu różnych języków powoduje wiele rozgardiaszu.

(3)

Geneza powstania i krótka historia, cd. ...

Firma Microsoft chce odebrać rynek firmie Netscape. W wersji 3 przeglądarki Internet Explorer, Microsoft wprowadza interpretery dwóch języków

programowania — VBScript bazujący na języku VisualBasic oraz JScript, mocno przypominającym język JavaScript.

Języki JavaScript i JScript rozwijają się niezależnie i coraz bardziej się różnią.

Pisanie kodu interpretowanego poprawnie w obu typach przeglądarek staje się coraz trudniejsze.

Firma Netscape przekazuje kontrolę nad standaryzacją języka JavaScript do European Computer Manufacturers Association — ECMA. Stowarzyszenie to standaryzuje język JavaScript i nadaje mu nazwę ECMAscript.

Jednocześnie World Wide Web Consortium — W3C — pracuje nad standardem dla DOM — Document Object Model, który ma pozwolić językom

programowania na pełny dostęp do zawartości dokumentu HTML.

(4)

Geneza powstania i krótka historia, cd. ...

Ciągle istnieją różnice pomiędzy JavaScript zgodnym z ECMAscript a JScript.

Microsoft forsuje rozszerzenia pozwalające na obsługę ActiveX oraz dostęp do zasobów lokalnych komputera.

Całe szczęście, znakomita większość typowych zastosowań internetowych może być zaprogramowana bez dbania o to, czy aktualnie interpretuje je przegląda- rka Microsoft czy innych producentów.

Rozwój języka JavaScript oraz DOM doprowadził do powstania tworu zwanego DHTML oraz do rozwoju technologii AJAX.

Języki JavaScript i Java nie mają ze sobą nic wspólnego poza elementem nazwy i podobnymi elementami składni odziedziczonymi po językach C i C++.

(5)

Czym jest JavaScript (ECMAscript)?

JavaScript to język programowania, którego kod jest interpretowany i wykony- wany przez przeglądarkę dokumentów HTML — zwykle przeglądarkę

internetową.

JavaScript umożliwia zatem programowanie akcji, jakie mają się rozegrać po tzw. „stronie klienta” (ang. client side programming).

Kod programu w języku JavaScript jest ściągany razem z kodem HTML, jest interpretowany i wykonywany w obrębie ściągniętej strony — JavaScript działa tylko w obrębie aktualnie oglądanej strony.

JavaScript jest językiem zorientowany obiektowo — pozwala na manipulowanie zdefiniowanymi obiektami lub tworzenie obiektów zdefiniowanych klas.

JavaScript jest językiem skryptowym — nie pozwala na tworzenie samodzielnych aplikacji, działa w środowisku przeglądarki i posługuje się jej zasobami.

(6)

Jakie możliwości daje JavaScript?

Pozwala na odczytywanie zawartości dokumentu HTML oraz na jego modyfikowanie.

Umożliwia programowanie sterowane zdarzeniami na stronie HTML — to główny element realizacji interakcji z użytkownikiem.

Pozwala na weryfikację danych w formularzach przed ich wysłaniem.

Pozwala na wykrywanie informacji o wykorzystywanej przez użytkownika przeglądarce.

Pozwala na tworzenie i odczytywanie informacji zapisanych na komputerze użytkownika (ang. cookies).

Pozwala na manipulowanie wizualną formą dokumentu HTML.

(7)

Wstawianie kodu JavaScript w dokument HTML — znacznik script Wstawianie kodu JavaScript w dokument HTML — znacznik script

Kod JavaScript wstawiany może być do dokumentu HTML na kilka sposobów.

Zawsze jednak wpisywany jest pomiędzy w obrębie znacznika script:

. . .

</script>

Tu kod, jeżeli wstawiamy go bezpośrednio do dokumentu HTML

Informacja o wykorzystywanym kodzie

(8)

Wstawianie kodu JavaScript w dokument HTML — znacznik script Wstawianie kodu JavaScript w dokument HTML — znacznik script

Informację o zawartości skryptu określa się atrybutem type:

. . .

</script>

Znacznik script pozwala na wstawienie zewnętrznego pliku o zadanej nazwie:

Aktualnie skrypt powinien być określony wartością application/x-javascript:

. . .

</script>

. . .

</script>

. . .

</script>

Jednak tak określony typ skryptu nie będzie działał z przeglądarkami używającymi JScript zamiast JavaScript — zatem bezpiecznie jest używać text/javascript.

(9)

Wstawianie kodu JavaScript w dokument HTML — znacznik script Wstawianie kodu JavaScript w dokument HTML — znacznik script

Uwaga — niektóre źródła zalecają stosowanie przestarzałego atrybutu language:

. . .

</script>

Czasem z określeniem wersji:

. . .

</script>

Atrybut language został „zdeprecjonowany”, nie używa się go już. Większość

aktualnie stosowanych przeglądarek akceptuje standard 1.2, zatem jego podawanie nie ma większego sensu.

Zamiast informować przeglądarkę o wykorzystywanej wersji lepiej w kodzie programu zidentyfikować przeglądarkę i dostosować do niej działanie działanie programu.

(10)

Wstawianie kodu JavaScript w dokument HTML — gdzie umieszczać Wstawianie kodu JavaScript w dokument HTML — gdzie umieszczać

Kod skryptu można umieszczać w sekcji body, zostanie wtedy wykonany w trakcie przetwarzania przez przeglądarkę tej właśnie sekcji.

<html>

<body>

document.write( "Tu programik w JavaScript!" );

</script>

</body>

</html>

<html>

<body>

</body>

</html>

document.write( "Tu programik w JavaScript!" ); Zawartość hellofromjs.js Obiekt document reprezentuje aktualnie przetwarzany dok. HTML

Metody write i writeln umożliwiają zapis do aktualnego dokumentu

(11)

Wstawianie kodu JavaScript w dokument HTML — gdzie umieszczać Wstawianie kodu JavaScript w dokument HTML — gdzie umieszczać

Kod skryptu można umieszczać w sekcji head, zwykle w postaci definicji funkcji.

Takie funkcje mogą być następnie wywoływane z wykorzystaniem mechanizmu programowania sterowanego zdarzeniami.

<html>

<head>

function hello() {

}

</script>

</head>

</body>

</html>

Funkcja hello zdefiniowana w sekcji nagłówkowej dokumentu.

Wywołaj funkcję hello gdy ładowana jest sekcja body dokumentu

(12)

Wstawianie kodu JavaScript w dokument HTML — uwagi dodatkowe Wstawianie kodu JavaScript w dokument HTML — uwagi dodatkowe

Zwyczajowo zabezpieczało się kod skryptów przez przeglądarkami, nieznającymi lub nieprawidłowo obsługującymi znacznik script (d0 HTML 3).

<!--

-->

</script>

Aktualnie pewnie nikt nie używa tak starych lub prymitywnych przeglądarek, zatem stosowanie komentarzy HTML nie wydaje się celowe.

// Komentarz jednoliniowy /*

Komentarz wieloliniowy

*/

</script>

W skryptach w języku JavaScript można stosować komentarze znane z C++:

jednoliniowe // i wieloliniowe /**/:

(13)

Podstawowe elementy języka — zmienne Podstawowe elementy języka — zmienne

JavaScript jest językiem ze słabą kontrolą typów. Oznacza to, że zmienna nie posiada sztywno określonego typu wartości — może przechowywać wartości dowolnego typu.

Taka dowolność może prowadzić do niespodziewanych rezultatów w przypadku nieostrożnego posługiwania się zmiennymi.

var zmienna = 5;

document.write( zmienna );

zmienna = "Jestem tekstem";

zmienna = true;

</script>

(14)

Podstawowe elementy języka — definiowanie zmiennych Podstawowe elementy języka — definiowanie zmiennych

W momencie przypisywania wartości do zmiennej, która nie została wcześniej zdefiniowana, zmienna ta jest automatycznie definiowana:

kwotaPodatku = 1200;

nazwaDnia = "Wtorek";

Zmienne można definiować i nadawać im wartość początkową — dobra praktyka!

var kwotaPodatku = 1200;

var nazwaDnia = "Wtorek";

W przypadku definiowania zmiennej bez inicjatora, jej wartość jest nieokreślona, dokładnie zmienna zawiera wartość undefined.

var kwotaPodatku;

document.write( kwotaPodatku );

undefined

(15)

Podstawowe elementy języka — definiowanie zmiennych Podstawowe elementy języka — definiowanie zmiennych

W przypadku redefinicji zmiennej, jej wartość nie jest tracona:

var kwotaPodatku = 1200;

var kwotaPodatku;

document.write( kwotaPodatku );

Jeżeli chcemy, aby wartość zmiennej była niezdefiniowana albo pusta, można wykorzystać literały undefined lub null:

var zmienna = undefined;

document.write( zmienna ); undefined

var zmienna = null;

document.write( zmienna ); null

(16)

Podstawowe elementy języka — definiowanie zmiennych Podstawowe elementy języka — definiowanie zmiennych

Nazwy zmiennych budowane są wg typowych zasad — powinny być ciągiem liter, i cyfr, rozpoczynającym się od litery, przy czym w miejscu litery wystąpić może również znak podkreślenia '_' lub symbol dolara '$'.

var $kwotaPodatku = 100;

document.write( $kwotaPodatku );

document.write( "<br /\>" );

var $stopa$Podatku$VAT = 0.22;

document.write( $stopa$Podatku$VAT );

100 0.22

Oczywiście słowa kluczowe języka JavaScript nie mogą być wykorzystywane jako nazwy identyfikatory zmiennych, funkcji itp..

(17)

Podstawowe elementy języka — zmienne numeryczne Podstawowe elementy języka — zmienne numeryczne

Zmienne numeryczne obejmują typ całkowitoliczbowy i rzeczywisty.

Literały mogą być zapisywane w postaci dziesiętnej, ósemkowej, szesnastkowej, przecinkowej, wykładniczej.

var zmienna = 5;

...

zmienna = 5.5;

...

zmienna = 077;

...

zmienna = 0xff;

...

</script>

(18)

Podstawowe elementy języka — predefiniowane wartości numeryczne Podstawowe elementy języka — predefiniowane wartości numeryczne

Math.E – Stała Eulera.

Math.LN2 – logarytm naturalny z 2.

Math.LN10 – logarytm naturalny z 10.

Math.LOG2E – logarytm binarny ze stałej Eulera.

Math.LOG10E– logarytm dziesiętny ze stałej Eulera.

Math.PI – wartość liczby PI.

Math.SQRT2 – pierwiastek kwadratowy z dwóch.

Math.SQRT1_2 – pierwiastek kwadratowy z 1/2.

(19)

Podstawowe elementy języka — pięć użytecznych właściwości liczbowych Podstawowe elementy języka — pięć użytecznych właściwości liczbowych

Number.MAX_VALUE – największa wartość dostępna w JavaScript (1.7976931348623157e+308).

Number.MIN_VALUE – najbliższa zeru liczba dodatnia dostępna w JavaScript (5e-324), każda mniejsza jest już równa zero.

Number.NaN – wartość używana do określenia, że mamy do czynienia z czymś, co nie jest wartościa numeryczną (NaN — Not A Number). Żadna liczba nie jest

równa NaN, NaN nie jest również równa sobie! Testowanie czy liczba jest równa NaN realizuje funkcja isNaN.

Number.POSITIVE_INFINITY – wartość ta jest wynikiem obliczeń, jeżeli prawdziwy rezultat przekracza swą wartością Number.MAX_VALUE.

Number.NEGATIVE_INFINITY – wartość ta jest wynikiem obliczeń, jeżeli prawdziwy rezultat jest mniejszy od najmniejszej wartości ujemnej.

(20)

Podstawowe elementy języka — zmienne łańcuchowe Podstawowe elementy języka — zmienne łańcuchowe

Każdy znak lub ciąg znaków ograniczony apostrofami lub cudzysłowami uznawany jest za literał łańcuchowy. Można je stosować zamiennie.

var zmienna = "J zyk JavaScript"ę ; document.write( zmienna );

...

zmienna = '"J zyk JavaScript"'ę ; document.write( zmienna );

...

zmienna = "\"J zyk JavaScript\""ę ; document.write( zmienna );

...

zmienna = "'J zyk JavaScript'"ę ; document.write( zmienna );

...

zmienna = '\'J zyk JavaScript\''ę ; document.write( zmienna );

...

</script>

(21)

Podstawowe elementy języka — zmienne łańcuchowe Podstawowe elementy języka — zmienne łańcuchowe

W języku JavaScript występują znaki specjalne (wzorowane na C), sensownie da się wykorzystać '\n', '\t', '\\' oraz ' \/'.

Uwaga — '\n' i '\t' nie formatują dokumentu HTML!

Znak '\\' jest potrzebny:

var zmienna = "c:\mojeskrypty\pierwszy";

...

zmienna = "c:\\mojeskrypty\\pierwszy";

...

Znak '\/' jest również potrzebny — w przypadku błędów na stronie użycie znaku '/' w napisie może zostać zinterpretowanie jako zamknięcie jakiegoś znacznika.

var zmienna = "<h1>Uwaga<\/h1><p>Znak \/ jest potrzebny<\/p>";

(22)

Podstawowe elementy języka — zmienne łańcuchowe Podstawowe elementy języka — zmienne łańcuchowe

Długie napisy można łączyć operatorem +:

var zmienna = "<p>To jest pocz tek paragrafu, " +ą "a to jego koniec<\/p>";

Powyższe rozwiązanie jest pewniejsze niż następująca kontynuacja napisu:

var zmienna = "<p>To jest pocz tek paragrafu, \ą a to jego koniec<\/p>";

Przeglądarki często niepoprawnie przetwarzają spacje przed i po znaku połączenia linii.

(23)

Operatory arytmetyczne Operatory arytmetyczne

W języku JavaScript wolno używać wielu operatorów arytmetycznych znanych z C/C++:

Operator Znaczenie

+ Dodawanie

- Odejmowanie

* Mnożenie

/ Dzielenie

% Reszta z dzielenia

++ Inkrementacja (pre, post)

-- Dekrementacja (pre, post)

- Zmiana znaku

+ Zachowanie znaku

Znane z C/C++ operatory arytmetyczne działają w JavaScript analogicznie, za

(24)

Operatory arytmetyczne Operatory arytmetyczne

Mimo podobieństwa do C/C++ nie wszystkie operatory nie działają tak samo:

var x = 5;

var y = 2;

var z = x / y;

document.write( z );

2.5

var x = 5.2;

var y = 2;

var z = x % y;

1.2000000000000002

(25)

Operator + działa również dla łańcuchów znaków Operator + działa również dla łańcuchów znaków

var x = "Java";

var y = "Script";

var z = x + y;

JavaScript

var x = "Java";

var y = "Script";

var z = x / y;

NaN

Tego należy się spodziewać:

Do tego służy np. wartość NaN:

(26)

Operator + działa również dla łańcuchów znaków Operator + działa również dla łańcuchów znaków

var x = "5";

var y = "2";

var z = x / y;

2.5

A to może być zaskakujące:

var x = "5";

var y = "2";

var z = x + y;

52

Chociaż to działa inaczej:

(27)

Operator + działa również dla łańcuchów znaków i liczb Operator + działa również dla łańcuchów znaków i liczb

var x = "5";

var y = 2;

var z = x + y;

52

W przypadku dodawania łańcuchów znaków i liczb, rezultatem jest łańcuch znaków:

var x = "5";

var y = 2;

var z = y + x;

25

var x = 5;

var y = "2";

var z = x + y;

52

var x = 5;

var y = "2";

var z = y + x;

25

(28)

Przy obliczeniach przydają się też funkcje Przy obliczeniach przydają się też funkcje

Math.abs() Math.acos() Math.asin() Math.atan() Math.ceil() Math.cos() Math.exp() Math.floor() Math.log()

Math.max() Math.min() Math.pow() Math.random() Math.round() Math.sin() Math.sqrt() Math.tan()

We większości przypadku funkcje te działają analogicznie do ich odpowiedników z C/C++.

(29)

Operatory porównania i relacji Operatory porównania i relacji

W języku JavaScript występują znane z C/C++ operatory porównania i relacji, oraz dodatkowe === i !==:

Operator Znaczenie

== Równe wartości

=== Identyczne wartości i typy

!= Różne wartości

!== Nieidentyczne wartości i typy

< Mniejsze

<= Mniejsze lub równe

> Większe

>= Większe lub równe

Uwaga — ze względu na luźną typizację języka JavaScript, porównanie wartości nie

(30)

Reguły rządzące porównaniem Reguły rządzące porównaniem

Wartość true przekształcana jest w wartośc 1 a false w wartość 0 przed porównaniem.

Jeżeli jeden z argumentów posiada wartość NaN rezultatem porównania jest wartość false.

Przy porównaniu łańcucha znaków i liczby, łańcuch jest przekształcane w odpowiednia liczbę, jeżeli to nie jest możliwe rezultatem jest NaN.

Przy porównaniu obiektu i liczby, następuje próba przekształcenia obiektu w liczbę, jeżeli to nie jest możliwe rezultatem jest NaN.

Przy porównaniu dwóch obiektów, porównywane są ich adresy — rezultatem porównania jest true, jeżeli są one równe, false w przeciwnym przypadku.

(31)

Operatory porównania i relacji — wykorzystanie === i !==

Operatory === i !== w trakcie porównania biorą pod uwagę nie tylko wartości ale również typy porównywanych argumentów.

Operatory te stwierdzają identyczność lub nieidentyczność argumentów.

var x = "5";

. . .

x == 5 Prawda→

var x = "5";

. . .

x === 5 Fałsz→

var x = "5";

. . .

x == "5" Prawda→

var x = "5";

. . .

x === "5" Prawda→

var x = "5";

. . .

x != 5 Fałsz→

var x = "5";

. . .

x !== 5 Prawda→

var x = "5";

. . . var x = "5";

. . .

(32)

Operatory bitowe — słowo wstępne Operatory bitowe — słowo wstępne

Zwykle operatory bitowe działają na danych całkowitoliczbowych.

Dlatego język JavaScript będzie przekształcał argumenty takich operatorów do postaci 32-bitowej liczby całkowitej.

Dopiero po przekształceniu będzie wykonywana określona operatorem operacja bitowa.

Wynik jest 32-bitową liczbą całkowitą.

Operatory bitowe działają analogicznie do znanych z C/C++.

(33)

Operatory bitowe Operatory bitowe

Operator Znaczenie

& Koniunkcja bitowa

| Alternatywa bitowa

^ XOR — różnica symetryczna

~ Negacja bitowa

<< Przesunięcie w lewo >> Przesunięcie w prawo

>>> Przesunięcie w prawo z wypełnieniem zerami

W przypadku operatora << następuje wypełnienie zerami od strony prawej.

W przypadku operatora >> następuje wypełnienie zerami od strony lewej, jeżeli argument jest ujemny a jedynkami jeżeli argument jest dodatni.

W przypadku operatora >>> następuje zawsze wypełnienie zerami od strony

(34)

Operatory bitowe — różne przypadki Operatory bitowe — różne przypadki

var x = 1;

var y = x << 1;

document.write( y );

2

var x = 0xffffffff;

document.write( x );

document.write( "<br \/>" );

var y = x << 1;

4294967295 -2

var x = -1;

var y = x << 1;

-1 -2

var x = 1;

var y = x >> 1;

0

(35)

Operatory bitowe — różne przypadki Operatory bitowe — różne przypadki

var x = 0xffffffff;

var y = ~x;

4294967295 0

var x = 0;

var y = ~x;

0 -1

(36)

Operatory bitowe — różne przypadki, cd. ...

var x = 0xffffffff;

var y = x >>> 1;

4294967295 2147483647

var x = 0xffffffff;

var y = x >> 1;

4294967295 -1

var x = -1;

var y = x >> 1;

-1 -1

var x = -1;

var y = x >>> 1;

-1

2147483647

(37)

Operatory bitowe — dziwactwa Operatory bitowe — dziwactwa

var x = "JavaScript";

var y = ~x;

JavaScript -1

var x = "1";

var y = x << 1;

1 2

var x = "1dwatrzy";

var y = x << 1;

1dwatrzy 0

var x = 1.1;

1.1 2

(38)

Operatory przypisania Operatory przypisania

W języku JavaScript wolno używać operatorów przypisania znanych z C/C++

(działają one analogicznie):

Operator Przykład Działanie

= x=5 x==5

+= x += 5 x = x + 5

-= x -= 5 x = x - 5

*= x *= 5 x = x * 5

/= x /= 5 x = x / 5

%= x %= 5 x = x % 5

>>= x >>= 5 x = x >> 5 >>>= x >>>= 5 x = x >>> 5 <<= x <<= 5 x = x << 5 &= x &= 5 x = x & 5

|= x |= 5 x = x | 5

^= x ^= 5 x = x ^ 5

(39)

Operatory logiczne Operatory logiczne

Znane z języka C/C++ operatory logiczne:

Operator Znaczenie

&& Koniunkcja logiczna

|| Alternatywa logiczna

! Negacja logiczna

(40)

Operator warunkowy Operator warunkowy

Znane z języka C/C++ operatory warunkowy:

var x = 1;

var y = 2;

var z = x > y ? x : y;

2

var x = "Ala";

var y = "Ela";

var z = x > y ? x : y;

Ela

var przychod = 1000;

document.write( przychod > 0 ? "Zarobek" : "Strata" ); Zarobek