Informatyka MPDI 3 semestr Wykład 2 CSS JavaScript
CSS arkusze stylów opiera się na zasadzie określania cech elementy dzięki atrybutowi style <ZNACZNIK style="cecha:wartość">... Styl może mieć wiele cech, np.: <P style="font-size:20px;color:blue">... <TABLE style=" background-color:#ff0000; border:2px solid red;">... itd cechy stylu oddzielamy średnikami
Przykładowe cechy stylów Styl Opis Przykładowa wartość background-color #ff0000 albo rgb(255,0,0) kolor tła blue background-image adres pliku tła graficznego url('rys1.gif ') border-color kolor obramowania red border-style styl i wygląd obramowania dotted dashed solid border cała ramka (makro-cecha) 2px solid yellow border-left lewa krawędź ramki j.w. border-right prawa krawędź ramki j.w. border-top górna krawędź ramki j.w. border-bottom dolna krawędź ramki j.w.
color kolor tekstu yellow #669933 font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px 2cm font-style styl czcionki italic font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10px 3mm width szerokość elementu 100px left odległość od lewej (górnej) 10cm 3mm krawędzi top position określenie współrzędnych elementu fixed relative
margin margin-top margin-bottom margin-left margin-right odległości od zewnętrznego elementu (w kolejności górny, prawy, dolny, lewy) każdy margines osobno 3px 3px 10px 20px 5cm text-align wyrównanie poziome tekstu left center justify text-decoration wygląd tekstu underline vertical-align wyrównanie w pionie top bottom padding oddalenie wewnętrznego elementu
definiowany element element wewnętrzny element zewnętrzny
Przykład zastosowania margin i padding <DIV style="border:1px solid red; width:600px;backgroundcolor:yellow;"> <DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding: 100px 10px 100px 30px;textalign:center;background-color:grey;" > <P style="background-color:green;">tekst w komórce</p> </DIV> </DIV> Obejrzeć efekt w przeglądarce
Sposoby definicji stylów znaczników 1 sposób: bezpośrednio w elemencie <P style="color:red"> To jest tekst </P> To jest tekst
2 sposób: w bloku HEAD wewnątrz znacznika <STYLE> <HTML><HEAD><TITLE>Indeks: elementy</title> <STYLE type="text/css"> p {font-size: 44px;} table {background-color:#ff0000;} </STYLE> </HEAD> <BODY> <P> To jest tekst 1</P> dla akapitów <TABLE> <TR><TD>AAA</TD></TR></TABLE> </BODY></HTML> dla tabel
Można zestaw cech nazwać jest to tzw. klasa i stosować atrybut class dla różnych znaczników <HTML><HEAD><TITLE>Indeks: elementy</title> <STYLE type="text/css"> </STYLE> </HEAD> <BODY>.czerwony {background-color:#ff0000;} zastosowania klasy. (kropka) <TABLE class="czerwony"><tr><td>a</td><td>b</td></tr></table> <P class="czerwony"> Tekst </P> </BODY></HTML> A B Tekst tabel a akapit
Przykład2: <STYLE type="text/css"> body, td, p {font: 14px helvetica, sans-serif; border:2px solid red} table {border:2px solid black;}.gruby {font: bold 18px helvetica, sans-serif;} </STYLE> i dalej.. <TABLE> <TR><TD>A</TD><TD>B</TD></TR> </TABLE> A B tekst akapitu <p class="gruby"> tekst akapitu </p>
Można też stosować identyfikatory znaczników # <HTML><HEAD><TITLE>Indeks: elementy</title> <STYLE type="text/css"> #maly {font-size:10px;} #duzy {font-size:30px;} </STYLE> </HEAD> <BODY> <P id="maly"> Tekst 1 </P> <P id="duzy"> Tekst 2 </P> </BODY></HTML> Tekst 1 Tekst 2 identyfikator przypisujemy atrybutowi id
3 sposób: W osobnym pliku robimy definicje stylów Plik style.css p {font-size: 44px;}.czerwony {background-color:#ff0000;} Plik index.html <HTML><HEAD><TITLE>Indeks: elementy</title> <LINK rel=stylesheet href="style.css" type="text/css" /> </HEAD> <BODY> <P> To jest tekst 1</P> <TABLE class="czerwony"> <TR><TD>AAA</TD></TR></TABLE> </BODY></HTML>
Przykład skryptu HTML z arkuszem stylów <HTML> <HEAD> <TITLE> Moja strona </TITLE> <link rel=stylesheet href="style.css" type="text/css"> </HEAD> <BODY> <H1> To jest moja strona </H1> <HR size="2" align=left color="navy"> <TABLE> <TR> <TD> AA </TD> <TD> AB </TD></TR> <TR> <TD> BA </TD> <TD> BB </TD> </TR> <TR> <TD> CA </TD> <TD> CB </TD> </TR> </TABLE> <UL class="lista"> <LI> <A HREF='http://www.onet.pl>Onet</A> </LI> <LI> <A HREF='http://www.google.pl>GOOGLE</A> </LI> <LI> <A HREF='http://www.interia.pl>INTERIA</A> </LI> </UL> </BODY> </HTML> plik style.css body{ background-color:gray} table{border-width:3px;}.lista {font-size:20px}
Javascript JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. JavaScript jest oddzielnym językiem (nie jest uproszczoną wersją Javy). Może być osadzany w innych programach, na przykład w przeglądarce internetowej, aby, mając dostęp do obiektów otoczenia (np. modelu obiektowego przeglądarki internetowej - DOM), można sprawować nad tym otoczeniem kontrolę. Javascript jest łatwy w nauce i pozwala na pewne zdynamizowanie stron internetowych. Przeglądarki mogą pytać o zezwolenie na wykonanie skryptu.
Wstawienie skryptu do dokumentu HTML Skrypty JavaScript są zagnieżdżane w dokumentach HTML. Skrypt JavaScript umieszczane są między znacznikami <SCRIPT> i </SCRIPT>. <SCRIPT LANGUAGE="JavaScript"> treść skryptu </SCRIPT>
<HTML><HEAD></HEAD> <BODY> <P> To jest tekst 1</P> <SCRIPT LANGUAGE="JavaScript"> treść skryptu 1 </SCRIPT> <P> To jest tekst 2</P> <SCRIPT LANGUAGE="JavaScript"> treść skryptu 2 </SCRIPT> </BODY></HTML> Może istnieć wiele skryptów naprzemiennie z pozostałym kodem HTML
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 wyników - jakieś metody pokazania wyniku
Wykorzystanie skryptu Javascript w dokumencie HTML <HTML><HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> // obiekt document i jego metoda write - wypisanie tekstu document.write ("To jest zwykły tekst"); // wysyłamy też znacznik HTML document.write ("<BR />"); //nadajemy wartość zmiennej x=5; //... i wyświetlamy jej wartość document.write("wartość zmiennej <I>x</I> : "+x); document.write ("<BR>To jest liczba PI:"+Math.PI); </SCRIPT> <P> a to już akapit poza skryptem</p> </BODY></HTML> właściwość obiektu
Kilka zasad pisania skryptów Komentarze Komentarz o kilku wierszach, /* treść komentarza */ Jednowierszowy komentarz // tekst Wykorzystywane są w celu: - opisy wyjaśniające - dezaktywowanie instrukcji (testy, błędy)
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) 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) Przykłady identyfikatorów dla zmiennych: x alfa Alfa mojazmienna B11 c_33 to dwie różne zmienne styl "wielbłądzi"
Operatory Arytmetyczne: + - * / %(reszta z dzielenia) Przypisania: = += x+=5 odpowiada x=x+5, = x =5 odpowiada x=x 5, *= x*=5 odpowiada x=x*5, /= x/=5 odpowiada x=x/5, ++ inkrementacja zwiększenie o 1 (x++ odpowiada x=x+1) -- dekrementacja zmniejszenie o 1 (x-- odpowiada x=x-1) %= reszta z dzielenia (x%=5 odpowiada x=x%5) operator + służy też do konkatenacji (łączenia tekstów) "Mateusz " + 'Kowalski' para " lub para '
Przykładowo: <SCRIPT LANGUAGE="JavaScript"> x = 7; //początkowo x ma wartość 7 x++; //zwiększamy o 1 x += 4; //dodajemy 4 (lub: x=x+4 ) x %= 10; //reszta z dzielenia z przez 10, a więc.. 2 //tu trzeba by wypisać wartość x na ekranie, zaraz się nauczymy </SCRIPT>
Operatory porównania ==!=(nierówne) <= < > >= Przykładowo: wyrażenie operator wyrażenie x==5 x>=3 a+b> 3*y jest to pytanie: czy jest spełnione? odpowiedź: tak lub nie (TRUE/FALSE) 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 za chwilę
Operatory logiczne koniunkcja (i) && alternatywa (lub) negacja! true && false daje false!false daje true
Instrukcje wykonanie akcji! Instrukcje języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu). Czasem blok kilku instrukcji otaczamy klamrami { } zazwyczaj we wnętrzu instrukcji warunkowych i iteracyjnych (np. if, for, while) o nich za chwilę <SCRIPT LANGUAGE="JavaScript"> instrukcja1; { instrukcja2; instrukcja3; instrukcja4; } </SCRIPT> traktowany w całości jako blok instrukcji
Typy instrukcji - przypisania (nadania wartości); - warunkowe - pętle - wykonania funkcji (metody obiektu)
Instrukcja przypisania zmienna operator_przypisania [wyrażenie]; Po lewej stronie operatora tylko nazwa zmiennej!!! inicjowanej (pierwszy raz definiowanej) lub istniejącej i przedefiniowywanej. Po prawej stronie operatora 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 jest obliczane i jego wartość przechowana w zmiennej Wyrażenie jest opcjonalne (pomijamy w przypadku operatorów ++ i --) Przykłady: x=5; alfa= 3*x; b15=(3-x)+2.7/alfa; b15++; x+=4; stałe - liczby dziesiętne z KROPKĄ!!!
Oczywiście ważna jest kolejność instrukcji przypisania! a=5; a++; //to ma sens a++; //nieznane a a=5;
Instrukcja wypisania na ekranie document.write (element); document to wbudowany obiekt w JavaScript, a write (pisz) to jedna z jego funkcji (tzw. metoda) identyfikator obiektu i identyfikator jego metody oddzielamy kropką Przykład <SCRIPT LANGUAGE="JavaScript"> document.write ("To jest zwykły tekst<br />"); x=5; //przypisujemy wartość zmiennej // wyświetlamy jej wartość document.write("wartość zmiennej <I>x</I> : "+x+"<br />"); napis="mateusz " + 'Kowalski'; document.write(napis); </SCRIPT> Jak widzimy można wysyłać do przeglądarki znaczniki HTML(dla pozycjonowania, formatowania itp.)
Inna metoda wyprowadzenia danych - wyświetlanie w dodatkowym okienku alert Metoda dla obiektu window, tworząca okienko dialogowe z napisem informacyjnym lub wartością numeryczną. <SCRIPT language="javascript"> raz=2; alert("witaj!"); alert("witaj "+raz+"-gi raz"); </SCRIPT> dokładniej window.alert, ale domyślny obiekt to window
Obiekt Math (uwaga! duża litera M) Wbudowany obiekt Math zawiera wartości matematyczne, jako właściwości (ang. property) i funkcje standardowe jako metody (ang. method). Są tutaj przechowywane pewne stałe matematyczne: Math.property lub gotowe funkcje Math.method gdzie property lub method jest jednym z podanych niżej elementów.
property (właściwości) E e - stała Eulera, która wynosi ok. 2.718 PI wartość liczby π, czyli ok. 3.14159 document.write(math.e);
method (metody) abs(wyrażenie) cos(wyrażenie) sin(wyrażenie) tan(liczba) ceil(liczba) floor(liczba) round(liczba) exp(liczba) wartość bezwzględna liczby funkcje trygonometryczne (argument w radianach!!!) zaokrąglenie do całkowitej w górę zaokrąglenie do całkowitej w dół zaokrąglenie do najbliższej całkowitej e x UWAGA!!! log(liczba) logarytm naturalny liczby! pow(liczba1,liczba2) random() sqrt(liczba) wartość liczby1 podniesionej do potęgi liczby2 wartość pseudolosowa z przedziału (0,1) bez argumentu pierwiastek kwadratowy liczby
Przykłady: <SCRIPT LANGUAGE="JavaScript"> document.write(math.sin(4*math.pi/180)+"<br />"); </SCRIPT> lub wykorzystując zmienną: <SCRIPT LANGUAGE="JavaScript"> wynik=math.sin(3*math.pi/180); document.write(wynik); //można też alert ("Wynik=:"+wynik); //w dodatkowym oknie </SCRIPT>
Sekwencja obliczeń: <SCRIPT LANGUAGE="JavaScript"> //Pierwiastki równania kwadratowego a=5; b=5; c=1; delta=b*b-4*a*c; pdelta=math.sqrt(delta); x1:-0.7236067977499789 x1=(-b-pdelta)/2/a; //albo /(2*a) x2=(-b+pdelta)/2/a; x2:-0.276393202250021 document.write('x1:'+x1+"<br />"); document.write('x2:'+x2+"<br />"); </SCRIPT> Oczywiście gdy delta będzie ujemne, to błąd! NaN nieokreślone Jak przeciwdziałać? Instrukcja badania warunku if (test, sprawdzenie!)
Przykład pisania wyrażeń y = sin zapis w skrypcie JavaScript x=math.pi; //musimy określić wartość x 2 x x 3 3 ( x + 4 y= (Math.pow(Math.sin(x),2) - Math.pow((x-3)*x,1/3)) /(Math.abs(Math.pow(x,-3))+4); document.write(y); łatwo o błędy (dużo nawiasów!) Uwaga: wolno spacje, ale nie wewnątrz nazw wolno przenieść do następnego wiersza 3 ) x
jak sobie ułatwić? wprowadzać zmienne pomocnicze liczymy etapami. y = sin 2 x x 3 3 ( x + 4 3 ) x <SCRIPT language="javascript"> x=math.pi; //jak poprzednio L1= Math.pow(Math.sin(x),2); L2=Math.pow((x-3)*x,1/3); L= L1- L2;//licznik M= Math.abs(Math.pow(x,-3))+4; //mianownik y= L/M; //wynik document.write(y); </SCRIPT>
Debugging detekcja błędów kodu JavaScript Przykładowo: document.write("log(5)<br />"); document.write(math.log(5)/math.log(10)+"< br />"); W IExplorerze Menu Narzędzia (narzędzia developerskie - F12) w oknie konsoli klikamy menu Skrypt Po odświeżeniu strony w konsoli pojawi się komunikat: SCRIPT5009: Brak definicji math