1 / 119

Projektowanie stron WWW

Projektowanie stron WWW. JavaScript jako język programowania. Co to jest Java-script. JavaScript jest językiem programowania jest opisywany jako język skryptowy, jest językiem obiektowym: używa obiektów, metod, zdarzeń, zmiennych, itd.

brigit
Download Presentation

Projektowanie stron WWW

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Projektowanie stron WWW JavaScript jako język programowania

  2. Co to jest Java-script • JavaScript jest językiem programowania • jest opisywany jako język skryptowy, • jest językiem obiektowym: • używa obiektów, metod, zdarzeń, zmiennych, itd. • Tworzony przez Netscape (wcześniej był znany jako LiveScript), • JavaScript jest programem, który jest umieszczany na stronie HTML • znaczniki: <SCRIPT>, </SCRIPT> • Powinny się znaleźć w sekcji <HEAD> a nie powinny być umieszczane w sekcji <BODY>, ale to nie jest regułą.

  3. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> document.write("Hello, world!") </SCRIPT></H1> </BODY> </HTML>

  4. Dlaczego używamy JavaScript? • Język HTML nie umożliwia wielu czynności, a niektóre są trudne do uzyskania, • JavaScript umozliwia pracę interaktywną, oraz tworzenie dynamicznych witryn, • JavaScript umożliwia sprawdzanie poprawnosci danych przekazywanych przez skrypty CGI, • JavaScript został zaprojektowany z myślą o jego użytkowaniu przez osoby, które nie umieją programować,

  5. Dlaczego używamy JavaScript? • Potrafi lepiej wykorzystac możliwości serwera, odciążyć jego pracę, • umożliwia lepsze zarzadzanie okienkami, przyciskami, ramkami (ogólnie elementami witryny), • umożliwia stosowanie różnych efektów specjalnych jak np. animację, przewijania, uzależnienie wyświetlania witryny od preferencji użytkownika.

  6. Tryby działania JavaScript • JavaScript działa w dwóch trybach: • Podczas ładowania strony • W reakcji na zdarzenia (zwykle kliknięcia elementu ekranu) • Postać użycia JavaScript: • <SCRIPT LANGUAGE=”JavaScript” SRC=”URL”> UWAGA: W JAVASCRIPT OBOWIAZUJE ZASADA: JEDNA INSTRUKCJA TO JEDEN WIERSZ (chyba że średnikiem oddzielimy dwie instrukcje w jednym wierszu. Ale jedna instrukcja nie może się ciągnąć przez kilka wierszy)

  7. Java Script – język obietowy • Własności, • Metody, • Zdarzenia.

  8. Właściwości • Właściwościami są zmienne przechowujące atrybuty obiektów stosowanych w języku. Dostęp jest możliwy poprzez polecenie postaci: obiekt.własność • Przykładowe właściwości: • document.color - kolor dokumentu • document.fgcolor - kolor tekstu, • document.lastModyfied - data ostatniej modyfikacji

  9. Metody • Metoda jest funkcją, która wykonuje czynności związane z obiektem. Wywołujemy poprzez podanie obiekt.nazwa. Po nazwie metody podajemy parę nawiasów. • Przykłady: • document.write(string) - wpisujemy do dokumetu tekst, • form.submit() - wysyłamy formularz, • window.alert() - wyświetla okienko dialogowe z zawartością string, • window.open(URL, nazwa) - otwiera dokument.

  10. Przykład „własnej”: wyświetlanie daty <SCRIPT LANGUAGE="JAVASCRIPT1.1"> <!-- var dzis= new Date() document.write("Dokument ostatnio zmodyfikowano dnia ") document.write(document.lastModified+"<BR>") document.write("Dziś jest "+dzis+"<BR>") document.write("Dzień miesiąca: "+dzis.getDate()+"<BR>") document.write("Miesiąc: "+dzis.getMonth()+"<BR>") document.write("Rok: "+dzis.getYear()+"<BR>") document.write("Dzien tygodnia: "+dzis.getDay()+"<BR>") document.write("Godzina: "+dzis.getHours()+"<BR>") document.write("Minut: "+dzis.getMinutes()+"<BR>") document.write("Sekund: "+dzis.getSeconds()+"<BR>") document.write("Czas : "+dzis.getTime()+"<BR>") document.write("GMT : "+dzis.toGMTString()+"<BR>") // prosta operacja arytmetyczna var jutro = new Date(dzis.getYear(), dzis.getMonth(), dzis.getDate()+1) document.write("jutro będzie "+jutro+"<BR>") //--> </SCRIPT>

  11. Zdarzenia • Zdarzeniami są specjalne akcje, wywoływane podczas czynności zachodzących w systemie, np. otwarcie okna, wysłanie formularza. • Przykłady: • onBlur - wykonywane, gdy użytkownik opuszcza stronę • onChange - wykonywane, gdy użytkownik zmieni zawartość aktywnego pola, • onClick - wykonywane, gdy użytkownik kliknie określony przycisk,

  12. Elementy języka Java Script • Do pisania programów korzystamy z liter alfabetu łacińskiego (angielskiego): małe i duże litery (są rozróżniane), cyfry, znaki specjalne: [, ], (, ), ,(przecinek), … • Liczby: 123, 123.45, 123e3, 123e-4, -123.45e-4, • Identyfikatory: ciąg liter i cyfr zaczynający się od litery, do liter zaliczamy znak „_”, • Słowa kluczowe: słowa, które mają specjalne znaczenie, nie należy ich używać do innych celów, • Instrukcje: połączenia identyfikatorów, liczb, znaków specjalnych i słów kluczowych, instrukcje są z góry ustalone, nie jest ich dużo, • Np. for(i=1;i<=10;i++) • Funkcje: zbiór instrukcji+pewne dodatkowe zasady, • Biblioteki: zbiór funkcji+pewne dodatkowe zasady.

  13. Instrukcje • Instrukcje dzielą się na: • Instrukcje podstawienia, • Instrukcje wywołania funkcji, • Instrukcje bloku, • Instrukcje warunkowe, • Instrukcje pętli, • Instrukcje przerywające wykonywanie sekwencji.

  14. Instrukcje podstawienia • Używamy ich wtedy, gdy chcemy pewną złożoną wartość czymś prostszym (oczywiście zmienną), • Np. x=12.34+y+12/y • Ogólna postać: • identyfikator=wyrażenie

  15. Wyrażenie • Wyrażenie jest to złożony zapis wykonywanych operacji zgodnie z pewnymi regułami. Te reguły to przede wszystkim znaczenie operatorów i kolejność wykonywania operacji. • Np.. Nie jest obojętne, czy operację: 132+456+325 wykonamy (132+456)+325 czy 132+(456+325).

  16. Wyrażenie • Wyrażenie dzielą się na wyrażenia proste (bez operatorów) i złożone – wyrażenia proste połączone operatorami. • Przykład wyrażeń prostych: • 1 • c, • I złożonych • 1+c, • 2+4 • 2+4+3/4+5 • 2+(3*5+1)/(3+1)

  17. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> x=12*34 document.write("x="+x) //mogę napisać: document.write("x="+12*34) </SCRIPT></H1> </BODY> </HTML>

  18. Instrukcja bloku (sekwencji) Instrukcji bloku używamy wtedy, gdy chcemy by pewna grupa instrukcji była traktowana jako jedność. Ważne w połączeniu z innymi instrukcjami. Możemy także stosować, gdy chcemy wydzielić pewne operacje (przykład) Ogólna postać: { I1;I2 I3 I4 I5;i6 }

  19. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { x=12*38 document.write("x="+x) } </SCRIPT></H1> </BODY> </HTML>

  20. Instrukcje złożone (bloki) zagnieżdżone <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { { x=2 y=1+1/x z=1+1/y } document.write("z="+z) } </SCRIPT></H1> </BODY> </HTML>

  21. Instrukcja alternaty • Używamy wtedy, gdy chcemy warunkowo wykonać pewną operację. • Są dowstepne dwie wersje alternatywy: • if (w) {…} • if (w) {…} else {…} • Semantyka, czyli działanie jest następujące: • W obu przypadkach obliczany jest warunek (coś do daje prawdę lub fałsz) • Jeśli warunek jest prawdziwy, to wykonywana jest instrukcja, może być złożona i koniec instrukcji if - pierwszy wariant, • Jeśli warunek jest prawdziwy, to wykonywana jest instrukacja, w przeciwnym razie wykonywana jest duga instrukcja – drugi wariant

  22. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { x=5 if (x<10) { document.write("Liczba jest mniejsza od 10") } } </SCRIPT></H1> </BODY> </HTML>

  23. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { x=11 if (x<10) { document.write("Liczba jest mniejsza od 10") } else { document.write("Liczba jest większa od 10") } } </SCRIPT></H1> </BODY> </HTML>

  24. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { var dzis= new Date() document.write("teraz jest "+dzis.getHours()+"<BR>") if (dzis.getHours()<10) { document.write("Dzień dobry<BR>") } else if (dzis.getHours()<18) { document.write("miłego dnia <BR>") } else { document.write("dobry wieczór<BR>") } } </SCRIPT></H1> </BODY> </HTML>

  25. Przykład Można prościej. Tam gdzie jest jedna instrukcja możemy opuścić nawiasy klamrowe (oznaczają one instrukcję złożoną). <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1><SCRIPT> { var dzis= new Date() document.write("teraz jest "+dzis.getHours()+"<BR>") if (dzis.getHours()<10) document.write("Dzień dobry<BR>") else if (dzis.getHours()<18) document.write("miłego dnia <BR>") else document.write("dobry wieczór<BR>") } </SCRIPT></H1> </BODY> </HTML>

  26. Instrukcja switch Konstrukcja switch Jeśli chcemy mieć jeszcze więcej możliwości określenia zachowania programu przy zróżnicowanych wartościach wejściowych, użyjemy konstrukcji switch. Pozwala ona wykonać jeden z wielu bloków kodu, w zależności od różnych wartości zmiennej. Jej składnia ma postać: switch (zmienna) { case wartosc1: kod wykonywany, gdy zmienna ma wartość wartosc1 break case wartosc2: kod wykonywany, gdy zmienna ma wartość wartosc2 break // ... itd case wartoscX: kod wykonywany, gdy zmienna ma wartość wartoscX break default: kod wykonywany, gdy zmienna nie przyjmuje żadnej z powyższych wartości }

  27. Instrukcja switch • Instrukcja switch opisuje sytuacje wielowariantowe. • Gdyby nie break, to od momentu wejścia w blok byłyby wykonywane wszystkie instrukcje do końca bloku. • Działanie switch: • Obliczamy wartość zmiennej, • Po obliczeniu szukamy wartości w case, • Jak znajdziemy, to jest wykonywany odpowiedni blok instrukcji, • Gdy nie będzie znaleziony, to wykonywane są instrukcje przypisan do default.

  28. Przykład var dzis=new Date() // tworzony jest obiekt z datą dzien=dzis.getDay() // wiemy, jaki jest dzień, na podstawie daty switch (dzien); { case 5: document.write("Wreszcie piątek!"); break; case 6: document.write("Imprezowa sobota"); break; case 0: document.write("Śpiąca niedziela"); break; default: document.write("Kiedy wreszcie będzie weekend?!"); }

  29. Pętle • Pętle używamy wtedy, gdy chcemy wykonywać kilka operacji pewną liczbę razy. • Rodzaj użytej pętli zależy od tego, czy wiemy ile razy pętla będzie się wykonywać (instrukcja for), czy też nie wiemy (pętla while).

  30. Pętla while • Składnia: • while (warunek) • { • Instrukcje • } • Działanie: • Obliczany jest warunek, • Jeśli jest prawdziwy, to wykonujemy instrukcje i powrót do 1, • Jeśli nie jest prawdziwy, to koniec

  31. Przykład • <HTML> • <HEAD> • <TITLE>My first script</TITLE> • </HEAD> • <BODY BGCOLOR=WHITE> • <SCRIPT> • { • x=20*Math.random() • document.write("*** x="+x+"<br>") • while (x>0) • { • x=x-1 • document.write(" **x="+x+"<br>") • } • document.write(" *x="+x+"<br>") • } • </SCRIPT> • </BODY> • </HTML>

  32. Pętla while <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <SCRIPT> { // while (w) {…} var cotydzien= new Date(2011,10,2) // 2.10.2011 var i=1 while (i<=15) { document.write("Wyklad "+i+" będzie "+cotydzien+"<BR>") cotydzien=new Date(cotydzien.getYear(), cotydzien.getMonth(), cotydzien.getDate()+7) i++ } } </SCRIPT> </BODY> </HTML>

  33. Petla do while • Konstrukcja tej pętli jest bardzo podobna do poprzednio opisanej while, z tym że kod w niej umieszczony zawsze musi być wykonany co najmniej raz – nawet gdy warunek nie zostanie spełniony. • Jest to związane z tym, że warunek interpreter sprawdza dopiero po wykonaniu poleceń – składnia ma bowiem postać

  34. Instrukcja do while Składnia do { instrukcje } while (warunek). • Działanie: • Instrukcje są wykonywana, • Obliczany jest warunek, • Gdy jest prawdziwy, to pętla jest ponownie wykonywana, • Gdy jest nieprawdziwy, to pętla jest przerywana

  35. Pętla for • Pętli for używamy wtedy, gdy wiemy ile razy pętla ma się wykonać. • Składnia: • for(zm=wp; warunek;zmiana zm) • { • Instrukcje • } • Semantyka: • Zmiennej zm jest przypisywana wartość początkowa • Następuje sprawdzenie, czy warunek jest prawdziwy, • Jeśli jest prawdziwy, to: • Wykonywane są instrukcje, • Następuje modyfikacja zmiennej sterującej • Jeśli jest nieprawdziwy, to następuje koniec instrukcji pętli

  36. Przykład • <HTML> • <HEAD> • <TITLE>My first script</TITLE> • </HEAD> • <BODY BGCOLOR=WHITE> • <SCRIPT> • { • for (i=1; i<=10; i++) • document.write(i+"<BR>") • } • </SCRIPT> • </BODY> • </HTML>

  37. For zagnieżdżone • <HTML> • <HEAD> • <TITLE>My first script</TITLE> • </HEAD> • <BODY BGCOLOR=WHITE> • <SCRIPT> • { • for (i=1; i<=5; i++) • { • document.write("<BR>") • for (j=5; j>=1; j--) • document.write(i*j+" ") • } • } • </SCRIPT> • </BODY> • </HTML>

  38. Operatory relacyjne • ==, • !=, • <, • <=, • >=, • >

  39. Przykład <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <SCRIPT> { document.write("operatory relacyjne+<BR>") x=5 y=6 if (x==y) document.write("równe<BR>") else document.write("różne<BR>") if (x!=y) document.write("różne<BR>") else document.write("równe<BR>") if (x<y) document.write("mniejsze<BR>") else document.write("wieksze<BR>") } </SCRIPT> </BODY> </HTML>

  40. Operatory arytmetyczne • + - dodawanie • - odejmowanie • * - mnożenie, • / - dzielenie, • % - dzielenie całkowitoliczbowe, • ++ - incrementacja, • -- - dekrementacja • przypisania: • +=, -=, *=, /=, %=

  41. Obiekty • Własności, • Metody, • zdarzenia

  42. Częściej wykorzystywane obiekty • Tablice, • Napisy, • Matematyczny (funkcje, stałe matematyczne), • Data, • Inne, np. okna

  43. Tablice • array - pozwala na tworzenie tablic i pracę z nimi. Tablice przechowują wielkości tego samego typu. Do przetwarzania tablic wykorzystujemy funkcję indeks. Indeks jest to wyrażenie, które powinno być >= 0 i nie powinno przekraczać liczby elementów. • tablicę tworzymy za pomocą: nazwatablicy=new array([dlugość]) • Własności: • length - liczba całkowita określająca ilość komórek w tablicy, np. a.lenght(),

  44. Tablice • Przykład Obliczanie sumy elementów tablicy n=5: a=Array(n) suma=0 for (i=0;i<5;i++) suma=suma+a[i]

  45. Tablice • Przykład: obliczenie elementu maksymalnego max=a[0] for (i=1;i<n;i++) if (a[i]>max) max=a[i] • Można i tak i_max=0 for (i=1;i<n;i++) if (a[i]>a[i_max) i_max=i

  46. Tablice • Przykład: wypisz elementy maksymalne: • Obliczamy maksimum (poprzedni slajd) for (i=0;i<n;i++) If (a[i]==max) document.write(a[i])

  47. Metody dla typu tablicowego • .concat(obiektArray2) - Łączy dwie lub więcej tablic i zwraca nową. • .join("separ") - Zwraca łańcuch znaków elementów tablicy, przedzielonych separatorem. • .pop() - Usuwa i zwraca ostatni element tablicy. • .push("el1"[,"el2"]) - Dodaje element lub więcej na koniec tablicy i zwraca nową długość. • .reverse() - Zwraca tablice z elementami w odwrotnej kolejności. • .slice(indexPocz [,indexKońc]) - Zwraca tablicę utworzoną z części danej. • .sort([funkcjaPorównawcza]) - Zwraca tablicę posortowaną. • .splice(index,ile [,el1, el2]) - Dodaje i/lub usuwa elementy tablicy. • .toString() - Zwraca łańcuch znaków, który reprezentuje daną tablicę. • .unshift("el1"[,"el2"]) Dodaje jeden lub kilka elementów na początek tablicy i zwraca nową długość.

  48. Tablice • // przykład tablicy • var dztyg= new array(8) • dztyg[1]="poniedziałek" • dztyg[2]="wtorek" • dztyg[3]="środa" • dztyg[4]="czwartek" • dztyg[5]="piątek" • dztyg[6]="sobota" • dztyg[7]="niedziela"

  49. Przykład <HTML> <head> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- //--> </SCRIPT> </head> <body> <FORM> <Script> a=new Array(3) for (i=0;i<3;i++) a[i]=i document.write("Tablica przed operacja") for (i=0;i<3;i++) document.write(a[i]) document.write("Tablica po operacji") a.reverse() for (i=0;i<3;i++) document.write(a[i]) b=new Array(3) b=a.reverse() document.write("Tablica po jeszcze kolejnej operacji") for (i=0;i<3;i++) document.write(b[i]) </Script> </form> </BODY> </HTML>

More Related