Wykład 5 Informatyka MPDI 3 semestr Język JavaScript.

Prezentacja na temat: "Wykład 5 Informatyka MPDI 3 semestr Język JavaScript."— Zapis prezentacji:

1 Wykład 5 Informatyka MPDI 3 semestr Język JavaScript

2 Javascript JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. JavaScript jest oddzielnym językiem (nie jest uproszczoną wersją Javy). Javascript jest łatwy w nauce i pozwala na pewne „zdynamizowanie” stron internetowych.

3 Może być osadzany jako składnik pliku HTML, Przeglądarka internetowa "potrafi" zinterpretować instrukcje języka JavaScript Przeglądarki (np. IExplorer) powinny mieć włączoną obsługę JavaScript mogą pytać o zezwolenie na wykonanie skryptu. Cechy JavaScript

4 zaś JavaScript - daje szerokie możliwości obliczeń i analiz numerycznych oraz prezentacji wyników, -może decydować o funkcjonowaniu elementów strony, mając dostęp do obiektów modelu obiektowego znaczników na stronie internetowej (tzw. – DOM, document object model), można sprawować nad tym otoczeniem kontrolę … a zatem HTML definiuje zawartość stron internetowych CSS specyfikuje ich formę

5 Wstawienie skryptu do dokumentu HTML Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są w znaczniku treść skryptu

6 To jest tekst 1 treść skryptu 1 To jest tekst 2 treść skryptu 2 Może istnieć wiele skryptów naprzemiennie z pozostałym kodem HTML

7 Aby tworzyć działające skrypty JavaScript wymagane są: -jakaś metoda wprowadzania i przechowania danych (liczb, tekstów) -jakieś instrukcje, które umożliwią, obliczenia, sprawdzanie warunków itp. -jakieś metody prezentacji wyników

8 Jak widzimy skrypt składa się z wielu instrukcji instrukcja1; instrukcja2 instrukcja3; instrukcja4; itd Instrukcje wykonywane są kolejno od pierwszej do ostatniej (a zatem istotna jest ich kolejność) Mogą być zakończone znakiem średnika ; (lub pisane w osobnych wierszach) Średnik konieczny do oddzielenia instrukcji pisanych w tym samym wierszu

9 Jednowierszowy komentarz od znaków // do końca wiersza // tekst Komentarze Kilka zasad pisania skryptów Wykorzystywane są w celu: - opisy wyjaśniające - dezaktywowanie instrukcji (testy, błędy) Komentarz o kilku wierszach, pomiędzy znakami /* i */ /* treść komentarza */

10 - zmienne nie muszą być deklarowane! - zmienna ma swoją nazwę (identyfikator) - zmienna ma typ - zmienna ma wartość Zmienne przechowują dane !!! 4 x23 identyfikator (nazwa) zmiennej wartość zmiennej liczba całkowita typ zmiennej

11 Identyfikatory Są to nazwy elementów (zmiennych, obiektów, funkcji) Zmienne służą do przechowania wartości określonego typu Jednym z podstawowych sposobów nadania wartości zmiennej jest instrukcja przypisania (nadania wartości) Przykłady identyfikatorów dla zmiennych: xalfaAlfamojaZmiennaB11c_33 Ciąg liter, cyfr, znaków podkreślenia (nie wolno spacji!) Musi się zaczynać od litery Ważne duże i małe litery ! (w odróżnieniu od innych języków) to dwie różne zmienne styl "wielbłądzi"

12 Czasem blok kilku instrukcji otaczamy klamrami { } zazwyczaj we wnętrzu instrukcji warunkowych i iteracyjnych (np. if, for, while) – o nich za chwilę Instrukcje JavaScript – wykonanie akcji! instrukcja1; { instrukcja2; instrukcja3; instrukcja4; } wyodrębiony blok instrukcji

13 Typy instrukcji - przypisania (nadania wartości) - warunkowe - iteracje (pętle) - wykonania funkcji (metody obiektowej lub własnej użytkownika)

14 zmienna operator_przypisania [wyrażenie]; Instrukcja przypisania Po lewej stronie operatora przypisania tylko nazwa zmiennej!!! inicjowanej (pierwszy raz definiowanej) lub istniejącej i przedefiniowywanej. Po prawej stronie operatora przypisania piszemy wyrażenie (bardzo podobne jak w Excelu), zawierające liczby, operatory, nawiasy okrągłe, funkcje – metody obiektów, oraz zmienne o ZNANYCH WARTOŚCIACH Wyrażenie musi być "obliczalne" – wszystkie jego elementy muszą być znane, przede wszystkim użyte w nim zmienne. Obliczona wartość wyrażenia jest przechowana w zmiennej. [ ] oznaczają, że wyrażenie jest opcjonalne (pomijamy wyrażenie w przypadku operatorów ++ i --)

15 Postacie wyrażeń stała zmienna funkcja(wyrażenie) wyrażenie operator wyrażenie dodatkowo stosujemy nawiasy (okrągłe) dla zmiany domyślnego priorytetu operatorów definicja rekurencyjna – z niej wynika, że funkcje można zagnieżdżać praz może być długi ciąg wyrażeń łączonych operatorami

16 =nadaj wartość wyrażenia +=zwiększ o wartość wyrażenia –=zmniejsz o wartość wyrażenia *=pomnóż przez wartość wyrażenia /=podziel przez wyrażenie %= reszta z dzielenia przez wyrażenie Po operatorach ++ i – brak wyrażenia ++inkrementacja – zwiększenie o 1 -- dekrementacja – zmniejszenie o 1 Operatory przypisania

17 a=3//nadaj zmiennej a wartość 3 x=7//nadaj x wartość 7 x+=2//zwiększ x o 2 x–=a//zmniejsz x o wartość a a*=4//pomnóż a przez 4, wynik w a x/=3//x podziel przez 3, wynik w x x%=a //reszta z dzielenia x przez a, wynik w x Przykładowo

18 Typ zmiennej Typ zmiennej zależy od typu wartości wyrażenia przypisywanego zmiennej x = 4 y= 2.3 y2= 3.4e8 z = true v = "Kowalski" całkowitoliczbowy dziesiętny - stałoprzecinkowy dziesiętny - zmiennoprzecinkowy logiczny tekstowy (łańcuchowy)

19 Operatory arytmetyczne + dodawanie -odejmowanie (także zmiana znaku) *mnożenie /dzielenie %reszta z dzielenia operator + służy też do konkatenacji (łączenia tekstów) "Mateusz " + 'Kowalski' para " lub para ' Oczywiście operatory * / maja wyższy priorytet od + i – Uwaga: istnieje operator ^, ale nie służy do potęgowania addytywne multipikatywne

20 Przykład x=7; Wykonanie takiej instrukcji: inicjuje zmienną o identyfikatorze x nadaje jej wartość 7 (typ liczbowy) zmienną można wykorzystać w następnych instrukcjach

21 Przykłady instrukcji przypisania z1 = 4.67; z2 = z1; z3 = z1/2; z3++; z3+=1/z1; z3%=3; z3/=z1*z2/(z1-z2) inicjacja (nowe zmienne) zmiana wartości (wcześniej zainicjowanej zmiennej) Można też: z3=z3+1

22 == !=(nierówne) >= Operatory porównania Przykładowo: x==5 x>=3 a+b> 3*y jest to pytanie: czy jest spełnione? odpowiedź: tak lub nie (true/false) wyrażenie operator wyrażenie Porównania mogą być przypisane do zmiennej: z34 = 5<=6 (zmienna z34 będzie miała wartość true) Używane też w innych instrukcjach (np. warunkowej) – o tym dowiemy się później

23 koniunkcja (i)&& alternatywa (lub) || negacja ! true && false daje false !false daje true Operatory logiczne

24 x=5; alfa= 3*x; b15=(3-x)+2.7/alfa; b15++; x+=4.5; stałe liczbowe: liczby całkowite liczby dziesiętne z KROPKĄ!!! Przykład

25 x = 7;//początkowo x ma wartość 7 x++; //zwiększamy o 1 x /= 2; //dzielimy przez 2 y = 3*x-1; //nowa zmienna typu liczbowego z = x>=y //zmienna z będzie typu logicznego (true/false) napis = "To jest tekst";//zmienna typu tekstowego Przykład Typ zmiennej wynika z typu nadanej wartości (liczbowy, logiczny, tekstowy)

26 Oczywiście ważna jest kolejność instrukcji przypisania! a=5; a++; //to ma sens – teraz a ma wartość 6 b++; // jeśli nieznana wartość zmiennej b to błąd! a=3; b=2*a; //to ma sens c= 3*x; //błąd – nieznane x

27 Instrukcja wypisania na ekranie document.write (elementy); document to wbudowany obiekt w JavaScript, a write (pisz) to jedna z jego funkcji (tzw. metoda) identyfikator obiektu i identyfikator jego metody oddzielamy kropką

28 Elementy listy w metodzie write obiektu document oddzielamy przecinkami lub znakiem + Elementami mogą być: - teksty – w " " lub ' ' (także znaczniki HTML) - wyrażenia obliczeniowe – wyświetlana jest ich obliczona wartość – wszystkie elementy wyrażenia muszą być znane i poprawne (wartości zmiennych, operatory, funkcje matematyczne)

29 document.write ("To jest zwykły tekst "); x=5; //przypisujemy wartość zmiennej // wyświetlamy jej wartość document.write("Wartość zmiennej x : ",x," "); napis = "Mateusz " + 'Kowalski'; document.write(napis); Jak widzimy można wysyłać do przeglądarki znaczniki HTML(dla pozycjonowania, formatowania itp.) Przykład

30 // obiekt document i jego metoda write - wypisanie tekstu document.write ("To jest zwykły tekst"); // wysyłamy też znacznik HTML document.write (" "); //nadajemy wartość zmiennej x=5; //... i wyświetlamy jej wartość document.write("Wartość zmiennej x : "+x); document.write (" To jest liczba PI:"+Math.PI); a to już akapit poza skryptem Wykorzystanie skryptu Javascript w dokumencie HTML właściwość obiektu

31 Metoda dla obiektu window, tworząca okienko dialogowe z napisem informacyjnym lub wartością numeryczną. alert (wyrażenie typu tekstowego) raz=2; alert("Witaj!"); alert("Witaj " + raz + "-gi raz"); dokładniej window.alert, ale domyślny obiekt to window Inna metoda wyprowadzenia danych - wyświetlanie w dodatkowym okienku używamy znaku + do połączenia elementów (konkatenacja)