Mechatronika PWSW Informatyka Wykład 2
Strony WWW (World Wide Web) Mosaic pierwsza przeglądarka 1993 Internet Explorer Opera Firefox(Mozilla) Safari Chrome(Google)
HTML HTML (ang. HyperText Markup Language, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych HTML kod źródłowy języka, można bezpośrednio pisać korzystając z edytora tekstu nieformatowanego (ASCII) np. Notatnik zapis w pliku tekstowym ASCII, z rozszerzeniem htm lub html HTML zdefiniowanie sposobu strukturalnej i wizualnej prezentacji dokumentu w przeglądarce internetowej, osadzanie ciągów instrukcji języków skryptowych, wpływających na zachowanie przeglądarek lub innych parserów HTML przeglądarka dla przesyłu dokumentów HTML korzysta przede wszystkim z protokołu HTTP (hypertext transfer protocol) ale także bezpieczniejszego (szyfrowanego) protokołu HTTPS.
Dynamiczny HTML lub DHTML (ang. Dynamic HyperText Markup Language, dynamiczny hipertekstowy język znaczników) techniki służące do dynamicznej zmiany treści, wyglądu, zachowania dokumentu HTML w przeglądarce umożliwiające interakcję strony WWW z użytkownikiem i stosowanie efektów wizualnych plik HTML - tekst nieformatowany małe pliki łatwe do przesyłu w sieci
PODSTAWOWA STRUKTURA dokumentu HTML konfiguracja treść strony <HTML> <HEAD> <TITLE> Tytuł w nagłówku okna </TITLE> </HEAD> <BODY> Tu są elementy pojawiające się na stronie </BODY> </HTML>
Znaczniki (tagi) postać ogólna <ZNACZNIK atrybuty> zawartość </ZNACZNIK> atrybuty są opcjonalne (niekonieczne) znacznik otwierający znacznik zamykający
Przykład dla znacznika opisującego hiperłącze <A href="http://onet.pl"> Onet </A> nazwa atrybutu wartość atrybutu zawartość
Znaczniki podstawowe (jest ich ok. 80) Strukturalne (pewien obiekt), np. P akapit H1 akapit nagłówkowy TABLE tabela UL, LI listy DIV, SPAN grupujące IMG obraz i inne Prezentacyjne określające formę np. B pogrubienie I italic U - podkreślenie Hiperłącza (kotwice) A
Zagnieżdżanie znaczników <P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P> Tekst1 Tekst2 Tekst3 np. <TD><IMG src="obraz.jpg" /></TD> obrazek w komórce tabeli UWAGA: ciąg spacji HTML traktuje jak jedną przy konieczności użycia kilku spacji stosuje się twarde spacje text text
Znaczniki elementów pustych (bez zawartości) <ZNACZNIK atrybuty/> można pisać: <ZNACZNIK> </ZNACZNIK> przykładowo: <BR /> wymuszona zmiana wiersza <IMG /> grafika <INPUT /> pole formularza <BR/> lecz zgodnie z XHTML powinno być: <BR /> ze spacją
Wybrane znaczniki Akapit tekstowy - znacznik <P> - Przykłady: <P> Tytuł </P> <P> Tytuł2 </P> wybór kroju, koloru, rozmiaru czcionki przez atrybut style i jego cechy o tym za chwilę Dawniej określał to znacznik <FONT> ale niezalecany dla nowszych standardów HTML Akapity nagłówkowe określonych gotowych stylów <H1> Nagłówek pierwszy </H1> <H2> Nagłówek drugi </H2> <H3> Nagłówek trzeci </H3> <H4> Nagłówek czwarty</h4> <H5> Nagłówek piąty</h5> <H6> Nagłówek szósty</h6>
Linie poziome znacznik HR pusty nie ma znacznika zamykającego <HR style="tu opis stylu"/>
Styl czcionki <B> tekst </B> <I> tekst </I> <U> tekst </U> pogrubiona kursywa podkreślona Stosuje się tylko lokalnie, np. wewnątrz akapitu dla krótkiego fragmentu tekstu <P>Litwo, <B> Ojczyzno </B> moja</p> tylko jedno słowo pogrubione
Kolor tła strony jako atrybut znacznika BODY <BODY style="background-color:nazwa koloru"> motywy lub obrazek w tle strony można zdefiniować innymi parametrami stylu dla BODY np. background-image
Kolory white aqua silver gray blue fuchsia lime red teal olive yellow maroon navy Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w układzie szesnastkowym (cyfry 0123456789ABCDEF), określające nasycenie składowych RGB (red, green, blue) od 00 (minimum) do FF (maksimum = 255 10 ) np. #17AACF R G B czyli np. #00FF00 to zielony
Tabele <TABLE BORDER="1">. </TABLE> <TR> </TR> znacznik wiersza <TD> </TD> znacznik kolumny Przykład: <TABLE BORDER="1"> <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>
Lista wypunktowana <UL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </UL> Lista numerowana <OL> <LI> tekst punktu pierwszego </LI> <LI> tekst punktu drugiego </LI> <LI> tekst punktu trzeciego </LI> </OL>
Przykład <ol> <li>punkt 1.</li> <li>punkt 2. <ul> <li>podpunkt 1.</li> <li>podpunkt 2.</li> </ul> </li> </ol> efekt 1. Punkt 1. 2. Punkt 2. Podpunkt 1. Podpunkt 2.
Grafika znacznik IMG <IMG SRC="ścieżka_do_pliku/nazwa_pliku" /> <IMG SRC="OBRAZY/plik.jpg" style="opis_stylu"/> folder podrzędny względem tego, w którym jest plik HTML
Odsyłacze (link hiperłącze) Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką. <A HREF= "adres URL" >Element, który należy kliknąć </A> Np. <A HREF= " http://www.wp.pl" > Wirtualna Polska </A> <A HREF="http://www.microsoft.com/poland/ > Możesz zaglądnąć pod ten adres </A> <A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" /> </A>
Formularze <FORM> <SELECT name="typy" multiple="multiple"> <OPTION selected="selected">rock and roll</option> <OPTION>Jazz</OPTION> <OPTION>Blues</OPTION> </SELECT> <INPUT type="radio" name="wybor" value="p" />Podstawowe <INPUT type="radio" name="wybor" value="s" />Średnie <INPUT type="radio" name="wybor" value="w" />Wyższe Wpisz tekst:<input type="text" name="t1" size="20"/> <INPUT type="submit" value="ok" name="b1" /> <INPUT type="reset" value="reset" name="b2" /> ta sama nazwa cd.
<INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK <TEXTAREA NAME="TEKST" ROWS="5" COLS="20"> MIEJSCE NA WIĘKSZY TEKST </TEXTAREA><BR /> </FORM>
efekt
Dla obsługi danych wpisanych do formularzy (np. ich wysłanie na serwer w celu zapisu czy też analizy) konieczne jest zastosowanie specjalnych metod
Przykład dokumentu HTML <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY bgcolor="gray"> <H1> To jest moja strona </H1> <HR /> <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> <LI> <A HREF='http://www.onet.pl>Onet</A> <LI> <A HREF='http://www.google.pl>GOOGLE</A> <LI> <A HREF='http://www.interia.pl>Interia</A> </UL> </BODY> </HTML> HEAD tabela lista hiperłączy BODY
CSS arkusze stylów <TABLE style=" lista cech stylu">... Styl może mieć wiele parametrów: <TABLE style=" background-color:#ff0000; border:2px solid red;">... cechy oddzielamy średnikami cecha1:wartość; cecha2:wartość itd.
Definicje stylów znaczników lub klasy 1. bezpośrednio w elemencie <P style="color:red"> To jest tekst </P> 2. w bloku HEAD <HTML><HEAD><TITLE>Indeks: elementy</title> <style type="text/css"> p {font-size: 144px;}.czerwony {background-color:#ff0000;border:1px solid black;} #moj {background-color:#00cc00;} identyfikator </style> </head> <BODY> <P> To jest tekst 1</P> <TABLE class="czerwony" style="margin:0 auto;font-size:40px;"> <TR><TD>AAA</TD> <TR><TD id="moj">bbb</td></tr></table> </BODY></HTML> tag klasa
3. W osobnym pliku 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ładowe cechy stylów Styl Opis Przykładowa wartość background-color kolor tła red background-image adres tła graficznego url('rys.gif') border-color kolor ramki #33FF99 border-style styl i wygląd obramowania solid dotted dashed border grubość, styl i kolor ramki 1px solid green cursor wygląd kursora hand color kolor czcionki tekstu yellow font-family rodzaj oraz rodzina czcionki Arial sans-serif font-size wielkość czcionki 14px font-style styl czcionki italic
font-weight grubość (waga) czcionki bold lighter height wysokość elementu 10cm left top odległość od lewej (górnej) krawędzi 20px 10mm 2in (cale) 10cm text-align wyrównanie poziome tekstu left text-decoration wygląd tekstu underline vertical-align wyrównanie w pionie top width szerokość elementu 200px margin padding odległość od zewnętrznego elementu odległość od krawędzi elementu 10px 20px 30px 50px (góra prawy dół lewy) jak wyżej Pełny opis możliwych do zastosowania cech stylów: np. http://www.signs.pl/html/o/style.php
Przykładowo: <DIV style="border:1px solid red; width:600px;backgroundcolor:yellow;margin:0 auto;"> <DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding: 100px 20px 200px 60px;text-align:center;background-color:grey;" > <p style="background-color:white;margin:0;font-size:44px;">tekst w komórce</p> </DIV> </DIV> Obejrzeć efekt w przeglądarce margin padding
Przykładowo: <head><style type="text/css"> body{font: 14px helvetica, sans-serif;} td {font: 14px helvetica, sans-serif;} p.gruby {font: bold 16px helvetica, sans-serif;} </style></head> i dalej.. <BODY>. <table style="border: 3px solid green;"><tr><td>.. itd </table> <p class="gruby"> tekst akapitu </p>.
JavaScript Język programowania: interpretowany, zorientowany obiektowo, skryptowy. JavaScript jest oddzielnym językiem, nie jest uproszczoną wersją Javy. Osadzany w innych programach, na przykład w plikach HTML, interpreter zaimplementowany we wszystkich przeglądarkach Ma dostęp do obiektów otoczenia (np. modelu obiektowego przeglądarki internetowej DOM Dynamic Object Model), można sprawować nad tym otoczeniem kontrolę
Porównanie JavaScript Interpretowany przez klienta Tworzy skrypty, które mogą być bezpośrednio wstawiane do stron HTML Łatwy Java Wykonywany przez klienta Tworzy "aplety", które są wywoływane ze strony HTML Wymaga doświadczenia programistycznego
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> Treść skryptu stanowią instrukcje wykonawcze (pisane w osobnych wierszach) Można pisać dwie instrukcje w jednym wierszu (trzeba je wtedy oddzielać znakiem ; Instrukcje wykonywane są po kolei od pierwszej do ostatniej
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<br/>"); document.write ("<BR/>"); // wysyłamy znacznik html //przypisujemy 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> </BODY></HTML> obiekt
Zasady tworzenia skryptów JavaScript Komentarze Komentarz o kilku wierszach, /* treść komentarza */ Jednowierszowy komentarz // tekst
Można tu tworzyć zmienne przechowujące wartości (liczbowe, tekstowe, logiczne i inne) Nazwa zmiennej musi się zaczynać od litery potem ciąg liter lub cyfr (bez spacji) dopuszczalny w nazwie znak _ Ważne duże i małe litery. Najczęściej zmienną tworzy tzw. instrukcja przypisania (nadania wartości) np. x=5 y=12 z= x+y v=x/z+(1-x)/y zmienna = wyrażenie Zamiast = mogą być też inne operatory przypisania Wyrażenia po prawej stronie znaku = budujemy bardzo podobnie jak w Excelu
Operatory Arytmetyczne: + - * / %(reszta z dzielenia) Przypisania: = ++ -- += x+=5 odpowiada x=x+5, zwiększ o 5 = x =2 odpowiada x=x 2, zmniejsz o 2 *= x*=3 odpowiada x=x*3, pomnóż x przez 3 /= x/=5 odpowiada x=x/5, podziel x przez 3 %= x%=5 odpowiada x=x%5 (reszta z dzielenia x przez 5) Przykładowo: x = 7; x++; x += 4; x - -; x %= 10; + też konkatenacja (łączenie tekstów) "Mateusz" + "Kowalski" stałe tekstowe " lub '
Operatory porównania ==!=(nierówne) <= < > >= Przykładowo: 4==5 3>=x 3!=4 (x=2)<(3*y+50); Porównania używane są w instrukcji if i pętlach warunkowych Można też przypisywać ich wartość wartość do zmiennej typu Boolean
Operatory logiczne koniunkcja (i) && alternatywa (lub) negacja! true && false daje false!false daje true
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ą 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.)
W document.write elementy w nawiasie okrągłym oddzielamy przecinkami, (lub znakiem +) teksty piszemy otoczone znakami " " lub ' ' elementami mogą być nazwy zmiennych lub wyrażenia wtedy wyświetlana jest ich wartość x=6; y=8; document.write("wartość zmiennej <I>x</I> : ", x, "<BR />"); document.write("stosunek x do y wynosi : ",x/y, "<BR />"); document.write("suma x i y wynosi : ",(x+y), "<BR />");
Interaktywne podawanie wartości zmienna = prompt ("Tekst zachęty"); Metoda prompt powoduje otwarcie okienka do wpisania wartości. Wartość zmiennej jest typu tekstowego, aby wykonywać działania arytmetyczne należy skonwertować ją na liczbę wykorzystując funkcję Number(x). <SCRIPT LANGUAGE="JavaScript"> x= prompt ("Podaj x:"); y= prompt ("Podaj y:"); z=x+y; document.write(z, "<BR>"); //tu zadziała "sklejenie" v=number(x)+number(y); document.write(v, "<BR>");//tu dodawanie arytmetyczne </SCRIPT>
Obiekt Math Obiekt Math przechowuje wartości matematyczne, jako właściwości i metody. Są tutaj przechowywane pewne stałe i funkcje matematyczne. Składnia: Math.stała (właściwość) lub Math.funkcja (metoda) gdzie property lub method jest jednym z podanych niżej elementów.
właściwości E e - stała Eulera, która wynosi ok. 2.718 PI wartość liczby π, czyli ok. 3.14159 i inne np. LN2
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 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) pierwiastek kwadratowy liczby
Instrukcje Instrukcje języka oddzielamy średnikami (jeśli zapisujemy w tym samym wierszu). Blok instrukcji otaczamy klamrami { } zazwyczaj w ciele funkcji, instrukcjach warunkowych i iteracyjnych (np. if, for, while) Jeszcze raz przypomnijmy.. Ważne są duże i małe litery w identyfikatorach (nazwach) zmiennych, obiektów, metod, funkcji!!!!
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 --) opcjonalność określają nawiasy [ ] 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 b++; //jeśli nieznane b - błąd b=5; a=78 a= a+4; //zmiana wartości a a+=4 ; //tak też można zapisać zwiększenie wartości a o 4
Przykład pisania wyrażeń zapis w skrypcie JavaScript y = sin 2 x x 3 3 ( x + 4 3 ) x x=math.pi; //musimy określić wartość x 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
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
Instrukcja warunkowa if...else Instrukcja if powoduje wykonanie kodu źródłowego instrukcja1 tylko wtedy, gdy warunek logiczny jest spełniony. Jeżeli zostanie użyty poszerzony wariant instrukcji if, to po spełnieniu warunku zostanie wykonany kod instrukcja1 lecz w przeciwnym wypadku zostanie wykonany kod instrukcja2. if (warunek) { kod wykonywany jeżeli warunek spełniony } else { kod wykonywany jeżeli warunek nie spełniony } blok else opcjonalny (niekonieczny)
Przykład dla instrukcji warunkowej <HTML><HEAD></HEAD><BODY> <SCRIPT LANGUAGE="JavaScript"> document.write ("Sprawdzenie<BR>"); x=math.log(1); //przypisujemy wartość zmiennej //.. i wyświetlamy jej wartość document.write("wartość zmiennej <I>x</I> : "+x+"<br />"); if (x>0) document.write("liczba dodatnia"); // warunkowo else document.write("ujemna lub 0"); </SCRIPT> </BODY></HTML>
można zagnieżdżać instrukcje if x=math.log(1.1); //przypisujemy wartość zmiennej //.. i wyświetlamy jej wartość document.write("wartość zmiennej <I>x</I> : "+x+"<br />"); if (x<0) document.write("liczba ujemna"); // warunkowo else if (x==0) document.write("liczba równa 0"); // warunkowo else document.write("dodatnia");
Pętla for Pętla for powtarza instrukcje wnętrza pętli aż do momentu, aż testowany warunek staje się fałszywy. W JavaScript pętla for jest podobna do pętli w Java i C.
Pętla for posiada następującą składnię: lub for ( inicjalizacja licznika; test_logiczny; inkrementacja ) instrukcja; for ( inicjalizacja licznika; test_logiczny; inkrementacja ) { } instrukcja1; instrukcja2;... w klamrach { } instrukcje wewnętrzne
Przykład dla iteracji for <HTML> <HEAD></HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<11; i++) { document.write(i+"<br>"); } </SCRIPT> </BODY></HTML>
Pętla while while (warunek) { instrukcje } Pętla wykonuje iterację (powtarza instrukcję) gdy warunek spełniony, gdy nie, to przechodzi dalej. Sprawdzenie warunku na początku. n = 0; x = 0; while( n < 10 ) { n ++; x += n; document.write(x+"<br>"); }
Pętla do while do instrukcja while (warunek); Wykonuje iterację (powtarza instrukcję) gdy warunek spełniony, gdy nie, to przechodzi dalej. Sprawdzenie warunku na końcu. n = 0; x = 0; do { n ++; x += n; document.write(x+"<br>"); } while ( n < 10 )
Pętle while i do.. while różnią się tym, że w pętli while warunek może być od razu fałszywy i instrukcja nigdy się nie wykona, zaś w pętli do.. while instrukcja zawsze jest co najmniej raz wykonana.
Przykład <SCRIPT LANGUAGE="JavaScript"> for (i=0; i<91; i++) { document.write(i+" " +Math.sin(i*Math.PI/180) +"<br>"); } </SCRIPT> metoda write może też być wieloargumentowa (argumenty oddzielane przecinkami)
alert Metoda dla obiektu window, tworząca okienko dialogowe z napisem informacyjnym. <script language="javascript"> alert("witaj!"); </script> dokładnie window.alert, ale domyślny obiekt to window