Serwisy Internetowe Klient Plan wykładu HTML - znaczniki CSS arkusze kaskadowe stylów Javascript język skryptowy DHTM dynamiczny HTML dr hab. Aleksander Dawid Katowice 2000-2015
Schemat pobierania pliku przez przeglądarkę. Żądanie zasobu. GET /plik.html HTTP/1.1 Host: serwer.http.pl Odpowiedź pozytywna serwera: 200 NazwaSerwera OK. Content-Type: text/html Serwer HTTP dane zawarte w plik.html klient
HTML - hypertext markup language. Język opisu strony, stworzony w celu publikowania dokumentów zawierających tekst i multimedia w internecie. Jeden z głównych twórców to Tim Berners Lee pracujący obecnie w W3C, organizacji, która zajmuje się standaryzacją formatu HTML. Aktualnym standardem języka jest wersja 5.0, która jest kompatybilna z poprzednimi wersjami.
STRUKTURA DOKUMENTU <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Komenda wpisywana w pierwszej linia określająca typ dokumentu i jego wersję. <HTML> <HEAD> <!- - Tutaj wpisz nagłówek - - > </HEAD> <BODY> <!- - Tutaj wpisz elementy strony; tekst, multimedia - - > </BODY> </HTML>
CO POWINIEN ZAWIERAĆ NAGŁÓWEK? <TITLE> Tytuł strony </TITLE> <META> Dostarcza informacji na temat dokumentu. Ta komenda opisuje nam zawartość strony i kodowanie polskich znaków. <META HTTP-EQUIV="content-type CONTENT="text/html; charset=iso-8859-2"> Często stosowane jest też dla polskich liter kodowanie charset=windows-1250
<META NAME ="Description" CONTENT= Opis strony w kilku zdaniach"> <META NAME="Keywords CONTENT= Wyrazy kluczowe"> <META NAME="Language" CONTENT="pl"> <META NAME="Author" CONTENT="imię i nazwisko"> <META NAME="Generator" CONTENT="nazwa edytora"> <META HTTP-EQUIV="Refresh" CONTENT= n; URL=http://.../strona.html"> gdzie n-liczba sekund do następnego odświerzenia.
<META HTTP-EQUIV="Creation-Date" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> <META HTTP-EQUIV="Page-Enter CONTENT="filter:RevealTrans(Duration=3,Transition=23)"> <BASE> - polecenie definiuje bazowy adres dokumentu. <BASE HREF="http://www.nazwa.com.pl/dokument.html"> <LINK> - definiuje relację między dokumentami a innym obiektem.
Atrybuty komendy BODY. BACKGROUND = "URL albo ścieżka/nazwa_pliku.gif" BGCOLOR = "kolor" TEXT = "kolor" LINK = "kolor1" VLINK="kolor2" ALINK="kolor3 LEFTMARGIN = 10 (IE) TOPMARGIN = 10 (IE) BGPROPERTIES = fixed (IE) ONLOAD=... ONUNLOAD=...
FORMATOWANIE TEKSTU. <DIV> blok </DIV> - dzieli dokument na wyróżnione odrębne części. Atrybuty: ALIGN, ID, NAME, CLASS, DIR, LANG, NOWRAP (IE), STYLE, TITLE.
<P>blok</P> - oznacza akapit. Atrybuty: ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE. <H1...H6> - nagłówek. Atrybuty: ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE.
ZNACZNIKI LOGICZNE. Atrybuty: ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE, wszystkie ON (ONCLICK). Znaczniki logiczne zmieniają wygląd tekstu. Dotyczą tekstu. Nie pomijalne znaczniki zamykające. <ABBR> - skrócona wersja dłuższego słowa. <ACRONYM> - akronim. <CITE> - przypis bibliograficzny. <CODE> - kod programu.
<DFN> - definicja jakiegoś terminu. <EM> - emfaza, podkreślenie. <KBD> - oznacza klawisze. <SAMP> - dosłowne przytoczenie ciągu znaków. <STRONG> - podkreśla znaczenie tekstu. <VAR> - zmienna.
<VAR> - zmienna. ZNACZNIKI ATRYBUTÓW FONTA. Atrybuty jak w poprzedniej grupie. <B> - pogrubiony. <BIG> - duży +1. <SMALL> - mały -1. <I> - kursywa. <STRIKE> - przekreślony.
<SUB> - indeks dolny. <SUP> - indeks górny. <TT> - stała szerokość znaków. <U> - podkreślony tekst. <BLINK> - migająca (N).
OBSŁUGA FONTÓW. <BASEFONT> - określa bazowy rozmiar czcionki. Atrybuty: COLOR, FACE, ID, SIZE, NAME <FONT> - określa właściwości czcionki. Atrybuty: COLOR, FACE, ID, SIZE, STYLE, TITLE, LANG, DIR, CLASS
UKŁAD STRONY. <BR> - natychmiastowe przejście do nowego wiersza. Atrybuty: CLASS, CLEAR, ID, STYLE, TITLE <NOBR> - obszar nie łamliwego tekstu. Atrybuty: brak. <WBR> - łamliwość kontrolowana. Atrybuty: brak.
<PRE> - blok tekstu bez formatowania. Atrybuty: ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE, wszystkie ON (ONCLICK). <CENTER> - środkuj.
CYTAT BLOKOWY. <BLOCKQUOTE> - definiuje cytat blokowy. <Q> - krótki cytat. Atrybuty: CITE, ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE, wszystkie ON (ONCLICK). ADRES. <ADDRESS> - definiuje adres. Atrybuty: ALIGN, ID, CLASS, DIR, LANG, STYLE, TITLE, wszystkie ON (ONCLICK).
ZNAKI SPECJALNE. &#kod; kod-numer znaku ze strony kodowej. Znaki nie pożądane <, >, & a > b a > b
MULTIMEDIA. <HR> - linia pozioma. Atrybuty: ALIGN, ID, CLASS, STYLE, TITLE, COLOR, NOSHADE, NOWRAP, SIZE, WIDTH, wszystkie ON (ONCLICK).
<IMG> - wstawienie obrazka do dokumentu. Atrybuty: ALT, BORDER, CONTROLS(I), DYNSRC(I), HEIGHT, WIDTH, HSPACE, ISMAP, LONGDESC, LOOP(I), LOWSRC(N), NAME, SRC, START(I), USEMAP, VSPACE, ALIGN, ID, CLASS, STYLE, TITLE, COLOR,NOSHADE, NOWRAP, SIZE, wszystkie ON (ONCLICK). SRC= obraz/niebo.gif" DYNSRC= movies/intro.avi"
ODTWARZANIE DŹWIEKU W TLE (IE). <BGSOUND> - dźwięki w tle. Atrybuty: LOOP, SRC. ANIMOWANY TEKST (IE). <MARQUEE> - tekst przesuwający się poprzek okna. Atrybuty: ALIGN, BEHAVIOR, BGCOLOR, DIRECTION, HEIGHT, WIDTH, HSPACE, VSPACE, LOOP, SCROLLAMOUNT, SCROLLDELAY.
WYGLĄD DOKUMENTU ŚWIATŁO (N). <SPACER> - definiuje pusty obszar w dokumencie. Atrybuty: ALIGN, HEIGHT, WIDTH, TYPE, SIZE. SZPALTY (N). <MULTICOL> - formatuje tekst w kilku szpaltach. Atrybuty: CLASS, WIDTH, GUTTER, COLS, STYLE.
WARSTWY (N). <LAYER> - definiuje w dokumencie warstwę zawartości. Atrybuty: CLASS, HEIGHT, ABOVE, BACKGROUND, BELOW, BGCOLOR, CLIP, LEFT, NAME, SRC, STYLE, TOP, VISIBILITY, WIDTH, Z-INDEX.
HIPERTEKST Podstawowa cecha HTML, pozwala łączyć dokumenty w jednolity zbiór zawartości zarówno w obrębie komputera jak i całej sieci. Realizują to hiperłącza. URL (Uniform Resource Locator) Składnia: metoda:część_zależna od metody.
Metoda(protokół): rodzaj obiektu wskazywany przez URL HTTP URL http://serwer:port/folder/plik#fragment http://serwer:port/folder/plik?polecenie=wartosc Kodowanie znaków niepewnych. http://www.nazwa.pl:port/nowy%20plik.html (nowy plik) JAVASCRIPT URL javascript:polecenie Przykład: javascript:window.alert( Hello World!)
FTP URL ftp://użytkownik:hasło@serwer:port/ścieżka;type=tryb_transferu type: d - directory a - ASCII i - binary FILE URL file://server/ścieżka file://localhost/ NEWS URL news:grupa_dyskusyjana news:identyfikator_artykułu. Brak nazwy serwera.
NNTP URL nntp://serwer:port/grupa_dyskusyjna/artykuł Przykład: nntp://news.tpi.pl/pl.comp.www.nowe-strony/201 MAILTO URL mailto:adres adres: użytkownik@serwer?subject=wykład WZI&cc=kopia@kserwer TELNET URL telnet://użytkownik:hasło@serwer:port/ GOPHER URL gopher://serwer:port/ścieżka
ADRESY URL BEZWZGLĘDNE pełny adres URL WZGLĘDNE określony adres bazowy <base> Przykład: ścieżka/dokument.html ZALETY STOSOWANIA: przenośność strony. oszczędność przy pisaniu
<A> - Definiuje hiperłącze. Atrybuty: ACCESSKEY, CHARSET, COORDS, DIR, HREF, HREFLANG, LANG, NAME, ID, CLASS, REL, REV, SHAPE, TARGET, TABINDEX, TYPE, STYLE, TITLE, zdarzenia ON (ONCLICK). HREF= wyniki.html" HREF= http://nazwa.com.pl/wyniki.html" HREF= wyniki.html#nba"
<H3><A NAME= "nba >tekst</a></h3> W standardzie HTML 4.0 powinno się to robić przez ID <A HREF= tekst.html rel=next rev=prev> next, prev, head, toc, parent, child, index, glossary
MAPOWANIE OBRAZKÓW. Jeden obrazek zawiera więcej niż 1 odnośnik. METODY mapowanie po stronie serwera (ismap znacznika <img>). mapowanie po stronie klienta (usemap znacznika <img>). Mapowanie po stronie klienta. <IMG SRC= grafika/mapa.jpg usemap= #mapka > <MAP NAME= mapka > <AREA SHAPE=RECTANGLE COORDS=10,10,34,34 > </MAP>
<MAP> - Mapa po stronie klienta. Atrybuty: DIR, LANG, NAME, ID, CLASS, STYLE, TITLE, wszystkie ON (ONCLICK). <AREA> - Definiuje pojedynczy obszar. Atrybuty: ALT, ACCESSKEY, COORDS, HREF, LANG, ID, CLASS, STYLE, TITLE, NOHREF, NOTAB(I), SHAPE, TARGET(N)(I), TABINDEX, TABORDER(I), zdarzenia ON (ONCLICK).
Obszary. Circle (circ) - koło (coords= x,y,r ) polygon(poly) - wielokąt (coords= x 1,y 1,x 2,y 2,...,x n,y n ) rectangle(rect) - prostokąt (coords= x 1,y 1,x 2,y 2 ) <BASE> - Definiuje adres bazowy odsyłaczy. Atrybuty: HREF, TARGET
<LINK> - Definiuje związek dokumentu z innymi zasobami, występuje tylko w nagłówku. Atrybuty: CHARSET, DIR, HREFLANG, HREF, LANG, ID, CLASS, STYLE, TITLE, MEDIA, REL, REV, TARGET, TYPE, zdarzenia ON (ONCLICK). <LINK HREF= style/literki.css rel=stylesheet type= text/css >
LISTY Listy nieuporządkowane (unordered list). <UL> - Definiuje listę nieuporządkowaną. Atrybuty: DIR, LANG, ID, CLASS, COMPACT, STYLE, TITLE, TYPE, zdarzenia ON (ONCLICK).
Przykład. <UL> <LI>text1</LI> <LI>text2</LI> <LI>text3</LI> </UL> Listy uporządkowane (ordered list). <OL> - Definiuje listę uporządkowaną. Atrybuty: DIR, LANG, ID, CLASS, START, COMPACT, STYLE, TITLE, TYPE, zdarzenia ON (ONCLICK).
Przykład. <OL start=2> <LI>zadanie 1</LI> <LI>zadanie 2</LI> <LI>zadanie 3</LI> </OL> Składniki listy (list item). <LI> - Definiuje listę uporządkowaną. Atrybuty: DIR, LANG, ID, CLASS, VALUE, STYLE, TITLE, TYPE, zdarzenia ON (ONCLICK).
Zagnieżdżanie list. <UL> <LI>definicja 1 <UL> <LI>podpunkt 1 <LI>podpunkt 2 </UL> <LI>definicja 2 <UL> <LI>podpunkt 1 <LI>podpunkt 2 </UL> </UL>
Listy słownikowe (definition list). <DL> - Definiuje listę słownikową. Atrybuty: DIR, LANG, ID, CLASS, COMPACT, STYLE, TITLE, zdarzenia ON (ONCLICK).
Przykład. <DL> <DT>hasło</DT> <DD>definicja hasła <DT>HTML <DD>Hypertext markup language </DL> <DT> - Definiuje nazwę hasła. Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, zdarzenia ON (ONCLICK).
<DD> - Definiuje opis hasła. Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, zdarzenia ON (ONCLICK).
Tabele. Liczby i wyrazy ułożone w powiązanych w wiersze i kolumny komórkach. Podstawowe znaczniki opisujące tabele. <TABLE> - deklaracja tabeli. <TR> - definiuje wiersz tabeli. <TH> - definiuje komórki nagłówków. <TD> - definiuje komórki danych. <CAPTION> - definiuje opis tabeli.
Rozszerzające znaczniki opisujące tabele. <COLGROUP>,<COL>,<TBODY>,<THEAD>, <TFOOT> -definiują wygląd całych fragmentów tabeli. <TABLE> - Definiuje tabelę. </TABLE> nie pomijany. Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, BACKGROUND(I), BGCOLOR, BORDER, BORDERCOLOR(N)(I), BORDERCOLORLIGHT(I), BORDERCOLORDARK(I), CELLPADDING, CELLSPACING, COLS(I)(N), HEIGHT(N)(I), WIDTH,
Atrybuty cd. HSPACE(N), VSPACE(N), VALIGN(I), NOWRAP(I), FRAME(I), RULES(I), SUMMARY, zdarzenia ON (ONCLICK). Przykład tabeli. <TR> - Definiuje wiersz tabeli (</TR> nie pomijalne) Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, BGCOLOR, BORDERCOLOR(I), BORDERCOLORLIGHT(I), BORDERCOLORDARK(I), CHAR, CHAROFF, NOWRAP(I), zdarzenia ON (ONCLICK).
<TH> i <TD> - Definiuje w tabeli komórki nagłówka i danych. (</TH>,</TD> pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, BACKGROUND(I), BGCOLOR, BORDERCOLOR(I), BORDERCOLORLIGHT(I), BORDERCOLORDARK(I), CHAR, CHAROFF, COLSPAN, ROWSPAN, HEADERS, HEIGHT, WIDTH, SCOPE, ABBR, AXIS, NOWRAP(I), zdarzenia ON (ONCLICK).
<CAPTION> - Definiuje opis tabeli (</CAPTION> nie pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN(I) zdarzenia ON (ONCLICK).
Nowe znaczniki wprowadzone przez HTML 4.0 <THEAD> - Definiuje główkę tabeli (</THEAD> pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, CHAR, CHAROFF, zdarzenia ON (ONCLICK).
<TFOOT> - Definiuje stopkę tabeli (</TFOOT> pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, CHAR, CHAROFF, zdarzenia ON (ONCLICK). <TBODY> - Definiuje w tabeli sekcję. (</TBODY> pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, CHAR, CHAROFF, zdarzenia ON (ONCLICK).
Podział tabeli na sekcje. Przykład. <COLGROUP> - Definiuje w tabeli grupę kolumn. (</COLGROUP> pomijalne). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, CHAR, CHAROFF, SPAN, WIDTH zdarzenia ON (ONCLICK).
<COL> - Definiuje kolumnę w obrębie grupy kolumn tabeli. (</COL> brak). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE, ALIGN, VALIGN, CHAR, CHAROFF, SPAN, WIDTH zdarzenia ON (ONCLICK).
RAMKI. <FRAMESET> - Definiuje zestaw ramek. (</FRAMESET> zawsze). Atrybuty: ID, BORDER, BORDERCOLOR, CLASS, STYLE, TITLE, COLS, ROWS, FRAMEBORDER, FRAMESPACING, zdarzenia ON.
<FRAME> - Definiuje pojedynczą ramkę (</FRAME> brak). Atrybuty: ID, BORDERCOLOR, CLASS, STYLE, TITLE, SRC, FRAMEBORDER, NAME, NORESIZE, SCROLLING, MARGINHEIGHT, MARGINWIDTH, LONGDESC.
<NOFRAMES> - Definiuje zawartość dokumentu dla przeglądarek nie obsługujących ramek (</NOFRAMES> niekiedy). Atrybuty: DIR, LANG, ID, CLASS, STYLE, TITLE zdarzenia ON (ONCLICK).
<IFRAME> - Definiuje ramki zintegrowane z tekstem (</IFRAME> brak). Atrybuty: ALIGN, ID, CLASS, STYLE, TITLE, SRC, FRAMEBORDER, NAME, SCROLLING, MARGINHEIGHT, MARGINWIDTH, LONGDESC, WIDTH, HEIGHT. Przykład ramek 1 (proste ramki). Przykład ramek 2 (ramki zagnieżdżone). Przykład ramek 3 (ramki pływające).
Nazwy ramek i okna docelowe. Atrybut TARGET znaczników <A> i <AREA> Plik Main.html <FRAMESET cols= 25%,* > <FRAME src= menu.html > <FRAME src= wstep.html name= MainFrame > </FRAMESET> Plik menu.html <A href= roz1.html TARGET= MainFrame > Rozdział 1</A>
Specjalne miejsca docelowe. _blank - ładuje do nowego otwartego okna. _self - wartość domyślna. _parent - ładowanie do okna rodzica. _top - ładowanie na sam szczyt.
KASKADA STYLÓW. Specyfikacja zatwierdzona przez W3C w 1996 roku jako Cascading Style Sheets - CSS dla HTML. Internet Explorer 3.0 Netscape Navigator 4.0 STYL - reguła, która mówi przeglądarce jak ma wyświetlić dany znacznik HTML. Cecha stylu - atrybuty z których tworzony jest wygląd stylu. color - cecha należąca do większej liczby znaczników.
Sposoby przypisania znacznikowi stylu. 1. STYL LOKALNY. Umieszczamy w znaczniku atrybut style,przypisując mu listę cech i ich wartości. Pojawia się w miejscu wystąpienia znacznika. PRZYKŁAD. Zmiana stylu znacznika <H1> <H1 style= color=green; font-style: italic >Zielony nagłówek</h1>
2. STYL NA POZIOMIE DOKUMENTU. Definicja stylu w nagłówku <HEAD> dokumentu HTML, pomiędzy znacznikami <STYLE></STYLE>. Wprowadza treść obcą dla HTML. Atrybuty: DIR,LANG,MEDIA,TITLE,TYPE PRZYKŁAD. <HEAD> <TITLE>STYL NA POZIOMIE DOKUMENTU</TITLE> <STYLE type="text/css"> <!-- H1 {color: red; font-style: italic} --> </STYLE> </HEAD>
MEDIA - screen,tty,tv,projection,hendheld, print,braille,aureal,all. 3. STYL ZEWNĘTRZNY. Definicje stylów umieszczane są w zewnętrznym pliku tekstowym (typ MIME text/css). Sposoby dołączania plików ze stylami. a. przez znacznik <LINK> w nagłówku dokumentu <LINK HREF= style/literki.css rel=stylesheet type= text/css >
b. przez zagnieżdżane style zewnętrzne. <STYLE> <!-- @import url(http://www.st.pl/gen_style.css); @import url(http://www.st.pl/spec_style.css); H1 {color: red; font-style: italic} --> </STYLE> Polecenie @import ma tylko jeden parametr URL.
Reguła przesłaniania stylów (kaskada). Style zewnętrzne, style definiowane na poziomie dokumentu, style lokalne. Polecenia @import kolejno się przesłaniają. Ładowane przez wiele znaczników <LINK> są wzajemnie równoważne, przeglądarka powinna się pytać w takich przypadkach, który styl załadować. IE i N przesłaniają.
Składnia stylu. selektor-znacznika {cecha1:wartość1; cecha2:wartość1 wartość2 wartość3;...} Selektory wielokrotne. H1, H2, H3, H4, H5, H6 {text-align: center} to samo co H1 {text-align: center} H2 {text-align: center} itd.
Selektory kontekstowe. Standard CSS pozwala na zmianę stylu w znacznikach, które występują w kontekście innych znaczników. Listy uporządkowane. OL LI {list-style: upper-roman} OL OL LI {list-style: upper-alpha} Zagnieżdżone znaczniki. P PRE {color: blue} Selektory kontekstowe i wielokrotne można ze sobą łączyć. H1 EM, P STRONG, ADDRESS {color: red}
Klasy stylów. Definiowane w stylach na poziomie dokumentu lub w pliku zewnętrznym. Pozwalają zdefiniować kilka stylów dla tego samego znacznika wybieranych atrybutem class. P.cytat {color: black; font-style: italic} P.adres {color: blue; font-style: italic} <P class=cytat> Cytowanie autora powieści. </P>
Klas nie można zagnieżdżać. P.cytat.centered nie dozwolone. Klasy uniwersalne. Klasa nie związana z żadnym znacznikiem..kursywa {font-style: italic} <P class=kursywa> Atrybut ID. #niebieski {color: blue} <P id=niebieski> ID i CLASS można stosować jednocześnie. Wartości ID muszą być unikatowe w obrębie dokumentu HTML.
Pseudoklasy. <A> A:link - wygląd odsyłacza A:active - wygląd odsyłacza aktywnego po naciśnięciu klaw. A:visited - wygląd odsyłacza odwiedzonego już. A:hover - po najechaniu na odsyłacz wskaźnikiem myszy(ie). <P> P:first-line - wygląd pierwszego wiersza. P:first-letter - wygląd pierwszej litery.
Dziedziczenie klas. Każda nowo utworzona klasa dziedziczy zespół cech po stylu ustawionym dla znacznika. P {color: red; font: 28px Times New Roman} P.kursywa {font-style: italic;} Cechy stylów. 53 cechy podstawowe stylów kaskadowych (CSS). 6 grup, które dotyczą; czcionek, kolorów i tła, tekstu, pól elementów i ich rozmieszczenia w dokumencie, list oraz klasyfikacji znaczników.
Wartości cech. Słowa kluczowe (keywords). Wyrażają działanie lub wymiar. np. underline Wartości długości (lenght values). Służy do jawnego określenia rozmiaru danej cechy. +- wartość [jednostka]. +/- zwiększenie/zmniejszenie o wartość [jednostka]- względne (em,ex,px) absolutne (in, cm, mm, pt-punkty, pc-pajki)
Wartości procentowe. Opisuję rozmiar cechy względem jakiejś innej wielkości związanej z zawartością dokumentu. line-height: 120% Adresy URL. url(protokół://serwer/ścieżka) Kolory. Określa kolor cechy stylu. Triplet RGB hex; #FFFF00 Triplet RGB dec; rgb(czerwona,zielona,niebieska) Nazwa koloru: white, blue, green itd.
Dziedziczenie cech. BODY {color: blue} Tekst w całym dokumencie wyświetlany będzie na niebiesko. Znaczniki między <BODY> a </BODY> będą dziedziczyły cechy po body jeżeli nie ich cechy nie zostały ustawione już wcześniej. Cechy dotyczące czcionki. font-family - zestaw czcionek. H1 {font-family: Helvetica, Universe, Times New Roman }
font-size - rozmiar czcionki. P {font-size: 12px} font-style - pochylenie czcionki. P {font-style: oblique} font-variant - wariant wyświetlania czcionki. P {font-variant: small-caps} font-weight - grubość czcionki. P {font-weight: bold} Dopuszczalne wartości liczbowe. font - zbiorcze określenie cech czcionki. P {font: bold 12/14pt Arial, Garamont, Serif}
Cechy dotyczące tła i koloru. Określa kolor pierwszego planu (foreground) i tła (background). Background-attachement sposób mocowania obrazka w tle przeglądarki. fixed - obrazek się nie przesuwa. Background-color kolor tła elementu. TH {background-color: black; color: white} Background-image obrazek tła elementu. TABLE {background-image: url(grafika/mur.jpg)}
Background-position pozycja wyświetlania obrazka tła. TABLE {background-image: url(grafika/mur.jpg); background-position: 20px 20px} Background-repeat sposób powielania obrazka tła. TABLE {background-image: url(grafika/mur.jpg); background-position: 20px 20px; background-repeat: repeat-y} Background zbiorcze określenie cech tła. background: url(grafika/mur.jpg) blue repeat-y Color - ustala kolor pierwszego planu zawartości znacznika. color: pink
Cechy dotyczące tekstu. Wyrównanie i sposoby prezentacji tekstu. letter-spacing - odstęp między literami. P {letter-spacin: 2px} line-height - odstęp między wierszami. P {line-height: 120%} text-align - wyrównanie tekstu. P {text-align: center} text-decoration - określa atrybuty tekstu. A:hover {text-decoration: underline overline}
text-indent - pozwala na wcięcie (wysunięcie). P {text-indent: 3em} text-transform - zmiana wielkości liter. P {text-transform: capitalize} vertical-align - kontroluje względne położenie elementu wobec zawierającego go wiersz tekstu elementu rodzicielskiego. Baseline,middle,sub,super,text-top,text-bottom, top, bottom. word-spacing - pozwala zwiększyć odstęp między wyrazami. P {word-spacing: 25px}
Cechy dotyczące pól elementów. Każdy element w dokumencie HTML zajmuje prostokątne pole. Zawartość Odstęp wokół zawartości Obramowanie. Marginesy
Cechy dotyczące obramowania. border-color - określa kolor obramowania. TABLE {border-color: black green pink blue} border-width - pozwala na zmianę grubości obramowania. TABLE {border-width: thin thick medium} border-style - określa postać obramowania. None,dotted,dashed,solid,double,groove, ridge,inset,outset. border-top, border-left, border-right, border-bottom border-top: thick solid blue
clear podobnie jak atrybut <br> mówi o przejściu do nowej lini w otoczeniu elementu pływającego. none,left,right,both. float definiuje pole wyświetlania znacznika jako element pływający. none,left,right. H1 {float: left} hight,width kontroluje rozmiar pola wyświetlania znacznika. długość,auto. IMG {height: 100px; width: auto}
margin określa marginesy (nie posiadają koloru ani postaci). margin-left, margin-right, margin-top, margin-bottom. BODY {margin-left: 5px; margin-right: 2px} BODY {margin: 2in 3px} padding kontroluje przestrzeń pomiędzy zawartością elementu a jego obramowaniem. padding-left, padding-right, padding-top, padding-bottom. P {padding-left: 5px; margin-right: 2px} IMG {padding: 2px 4px}
Cechy dotyczące list. list-style-image obrazek zamiast punktów listy. LI {list-style-image: url(graf/symbol.jpg)} list-style-type wyświetla punkty list uporządkowanych jak i nieuporządkowanych. UL (square, disc, circle, none) OL (decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none) LI {list-style-image: url(graf/symbol.jpg); list-style-type: circle}
list-style-position pozycja listy. outside, inside. OL {list-style-position: outside} list-style skrótowa postać wszystkich pozostałych cech list. LI {list-style: url(graf\kwiatek.jpg) square}
Cechy klasyfikujące stylu. display pozwala na zmianę typu elementu. block element blokowy inline element zintegrowany z tekstem list-item element typu list none wyłączenie elementu. white-space określa sposób w jaki przeglądarka traktuje odstępy w znaczniku blokowym(n). normal, pre.
Style niezależne od znaczników. <SPAN> - Wydziela fragment zawartości znacznika (</SPAN> nigdy nie pomijany). Atrybuty: ID, DIR, LANG, TITLE, CLASS, STYLE. Zdarzenia klawiatury i myszy. SPAN {color: red} SPAN.big {font-size: +10px}
Specyfikacja CSS2 Wskazania W3C na dzień 12.05.1998 rok. http://www.w3.org/tr/1998/rec-css2-19980512/css2.zip Różnice pomiędzy CSS1 a CSS2. Rozszerzenie idei media-type, polegające na dostosowaniu Dokumentu do urządzenia go prezentującego. Dodatkowe cechy reguły @import i nowa reguła @media. @import url("loudvoice.css") aural; @media print { /* styl dla urządzenia print */ }
<LINK rel="stylesheet" type="text/css media="print, handheld" href="foo.css"> @media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } } embossed dodatkowe urządzenie (drukarka braille a).
Zmiana ważności cechy na poziomie użytkownika (inherit). BODY { color: black!important; background: white!important; } Reguła @page określa podział dokumentu na strony. @page { size 8.5in 11in; margin: 2cm } size auto portrait landscape inherit
Określenie osobnego formatowania dla stron lewych, prawych i pierwszej strony. @page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; } @page :first { margin-top: 10cm }
Wyjście z formatowania stron. page-break-before Wartość: auto always avoid left right inherit page-break-inside Wartość: avoid auto inherit page-break-after Wartość auto always avoid left right inherit @page rotated {size: landscape} TABLE {page: rotated; page-break-before: right}
direction kierunek wyświetlania tekstu Wartość ltr rtl inherit @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } @charset "ISO-8859-1"; P { clip: rect(5px, 10px, 10px, 5px); }
Cursor określa kursor jaki jest wyświetlany w tym elemencie. Wartość: [ url,]* [ auto crosshair default pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help ] ] inherit P { cursor : url("mything.cur"), url("second.csr"), text; } position określa sposób pozycjonowania elementu na stronie. Wartość: static relative absolute fixed inherit H1 { position: absolute; left: 10px; right: 20px}
box-offset określa pozycję elementu na stronie. Top, left, right, bottom. z-index określa pozycję elementu względem bufora z jak w layer. Wartość indeksu.
CSS 3.0 Media queries Pozwala na sprawdzenie właściwości urządzenia renderującego naszą stronę www. Możemy określić konkretny typ ekranu na jaki będzie przeznaczone nasze formatowanie. iphone 480x852 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="sphone.css" /> Zapytanie media zawiera dwa warunki 1.screen (wynik renderowania przeznaczony jest na ekran) 2.max-device-width: 480px (maksymalna szerokość to 480 pikseli) Jeżeli warunek 1 i 2 są spełnione to zostanie załadowany arkusz sphone.css, w przeciwnym wypadku link jest ignorowany
Przykład: Użycie media do zmiany wyglądu w zależności od urządzenia 1024 px 480 px
Określenie warunków dotyczących urządzenia wyświetlającego w zapytaniu media nie ogranicza się tylko do znacznika link. Może być również zastosowane w pliku CSS @media screen and (max-device-width: 480px) {... } A także w dyrektywie import @import url("sphone.css") screen and (max-device-width: 480px); Zapytanie media może być złożone z kilku warunków @media screen and (max-device-width: 480px) and (resolution: 163dpi) {... }
Przykładowo chcemy zmienić tekst który się pojawia w znaczniku dla wersji mobilnej. W pliku HTML ustawiamy nagłówek H1 <h1 class="res-change"></h1> Plik CSS ładujemy poleceniem <link rel="stylesheet" type="text/css" href="sphone3.css" media="screen"/> W pliku CSS ustawiamy obsługę kliku rodzajów widoków. Zaczynamy od kaskadę od najszerszej wersji naszej strony. Można powiedzieć że jest to widok domyślny dla ekranów (1920 1080).res-change:after{mcontent: 'HD-screen';} @media screen and (max-width: 1024px){.res-change:after{ content: '1024px';} } @media screen and (max-width: 480px){.res-change:after{ content: '480px';} } Projektor Smartfon,Tablet
Meta znacznik viewport Wprowadzony przez firmę Apple i określający rozmiar, skale i zbliżenie <meta name="viewport" content="width=device-width"> szerokość <meta name="viewport" content="initial-scale=2"> <meta name="viewport" content="minimum-scale=0"> <meta name="viewport" content="maximum-scale=10"> Początkowe powiększenie Zakres <meta name="viewport" content="user-scalable=yes/no"> Wyłączanie/Załączanie Gęstość <meta name="viewport" content="target-densitydpi=device-dpi"> Wartości złożone <meta name="viewport" content="width=device-width, initial-scale=1">
Meta znacznik viewport W pliku CSS @viewport { width: device-width; zoom: 1; } Skalowanie obrazu, video, płótna img, video, canvas { max-width: 100%; }
Formatowanie strony przy pomocy znacznika <Table> W pliku HTML <TABLE> <TR> <TH>Lp</TH><TH>Nazwa pliku</th><th>akcja</th> </TR> <TR> <TD>1</TD><TD>Obraz.png</TD><TD><input type=button value=usuń></td> </TR> </TABLE> W pliku CSS table { width: 90%; margin-left: auto; margin-right: auto; text-align: center; background-color: white; border: 1px solid; border-radius: 8px; } Komentarz: Wartość procentowa Marginesy: auto = wycentrowanie tabeli Tekst wycentrowany w tabeli Kolor tła: biały Obramowanie: 1 piksel, linia ciągła Zaokrąglenie brzegów promień 8 pikseli
Formatowanie strony przy pomocy znacznika <Table>
Formatowanie strony przy pomocy znacznika <Table> W pliku HTML <TABLE> <TR> <TH class=lewy>lp</th><th>nazwa pliku</th><th>akcja</th> </TR> <TR> <TD class=lewy>1</td><td>obraz1.png</td> <TD><input type=button value=usuń></td> </TR> <TR> <TD class=lewy>2</td><td>obraz2.png</td> <TD><input type=button value=usuń></td> </TR> </TABLE>
Formatowanie strony przy pomocy znacznika <Table> W pliku CSS table { width: 90%; margin-left: auto; margin-right: auto; text-align: center; background-color: white; border-spacing: 0px; border: 1px solid; border-radius: 8px; } td.lewy{ border-left: 0px solid; } th.lewy{ border-left: 0px solid; border-top: 0px solid; } td{ } th{ } border-bottom: 0px solid; border-left: 1px solid; border-right: 0px solid; border-top: 1px solid; border-left: 1px solid;
Tworzenie guzika ze znacznika linku <a>
Formatowanie strony przy pomocy znacznika <a> W pliku HTML Tworzymy z linku <a> guzik własnej konstrukcji przy pomocy klasy podstawowej guzik <TD> <a href="#" class="guzik">usuń</a> <a href="#" class="guzik niebieski">zapisz</a> </TD> href w znaczniku <a> może uruchamiać dowolna procedurę języka Javascript
Formatowanie strony przy pomocy znacznika <a> W pliku CSS Cień w warstwie poprzedzającej (before) a.guzik::before{ border-radius: 10px; box-shadow: #959595 0 2px 5px; content: ""; display: block; height: 100%; left: 0; padding: 2px 0 0; position: absolute; top: 0; width: 100%; } a.guzik:active::before { padding: 0px 0 0; }
Formatowanie strony przy pomocy znacznika <a> W pliku CSS Wygląd guzika nieaktywnego a.guzik { background: linear-gradient(#fee, #d2c2c2); border: solid 1px #d0c0c0; border-bottom: solid 3px #b2b1b1; border-radius: 10px; box-shadow: inset 0 0 0 1px #f5f5f5; color: #555; display: inline-block; font: bold 12px Arial, Helvetica, Clean, sans-serif; margin: 4px 4px 4px 4px; padding: 4px 8px; position: relative; text-align: center; text-decoration: none; text-shadow: 0 1px 0 #fafafa; }
Formatowanie strony przy pomocy znacznika <a> W pliku CSS Wygląd guzika najechanego a.guzik:hover { background: linear-gradient(#e4e4e4, #edaaaa); border: solid 1px #c2b2b2; border-bottom: solid 3px #b2b1b1; box-shadow: inset 0 0 0 1px #efefef; } Wygląd guzika aktywnego a.guzik:active { background: linear-gradient(#dfcfcf, #e3d3d3); border: solid 1px #959595; box-shadow: inset 0 10px 15px 0 #c4c4c4; top:2px; }
JavaScript Wprowadzony wraz z Netscape Navigator 2.0 w celu dodania interaktywności do statycznej strony HTML. Składnia języka skryptowego została oparta na składni Javy, która swoją składnię zawdzięcza C++. Cel Javascript to polepszenie obsługi strony www. Wprowadzenie skryptu do strony. <SCRIPT LANGUAGE = JavaScript > <! - document.write( Hello World ) --> </SCRIPT>
Zmienne JavaScript Liczba całkowita - z przedrostkiem 0x20 hex. 32 dec Liczba zmiennopozycyjna. Ciąg znaków. (imie= Marceli lub imie= Tomasz ) Zmienne Boole owskie (PRAWDA, FAŁSZ - TRUE, FALSE) JavaScript jest tak jak i Java językiem obiektowym. Obiekt=zmienne/stałe+metody powiązane ze sobą. Wyrażenia x=7; str= Hello World ;
Operatory. operatory jednoargumentowe (++.--). operatory dwuargumentowe. (+,-,*,/). Operatory przypisania x=math.pi; document.write( x= +x); x=false; document.write( x= +x); x= Tekst ; document.write( x= +x); Możliwa jest zmiana typu zmiennej (on fly-, czyli w locie). +=, -=, *=, /= przypisanie i działania matematyczne w tym samym czasie.
Operatory matematyczne +, dodawanie -, odejmowanie *, mnożenie /, dzielenie %, moduł --, zmniejszenie ++, przyrost Operatory porównania ==, równość!=, różność <, mniejszy od <=, mniejszy lub równy >, większy od >=, większy lub równy
Operatory logiczne &&, i (AND), lub (OR)!, nie (NO)!PRAWDA zwraca FAŁSZ i!fałsz zwraca PRAWDA Operatory łańcuchowe +, str= Hello + World! ; ==, case-insensitive.
Instrukcje sterujące pracą skryptu. Warunek if...else If(document.lastModified.year<1995) document.write( Bardzo stary dokument. ) If(document.lastModified.year>=1995)&& (document.lastmodified.month>=10) document.write( Nowy dokument. ) else document.write( Stary dokument. )
Iteracja for for(count=0;count<10;count++) document.write( Licznik:,count); Iteracja warunkowa while Wykonuje instrukcje tak długo jak jej warunek pozostaje prawdziwy. count=0; while(count<100){ document.write( Licznik:,count); count++; }
Instrukcja break (przerwanie) count=0; while(count<100){ if(count==10) break; count++; } Instrukcja continue var i=0; while(i<100){i++ if((i%2)==0) continue; else document.write( Licznik:,i); }
Instrukcja function. Function TytulStrony(strNazwa){ return(document.title == strnazwa) } Pętla for...in (iteracja właściwości obiektu) for (i in obj) document.writeln( dla +i+ obj= +obj[i]+ <br> );
Instrukcja new (definiuje nowy obiekt). urodziny = new Date(1978,9,17); tablica = new Array(10); Instrukcja return (określa wartość zwracaną przez funkcję) Function square(x){ return x*x; }
Instrukcja this. (dostęp do właściwości i metod obiektu) function setsize(x,y){ this.horizsize=x; this.vertsize=y; } document.setsize(640,480); Instrukcja var (podaje nazwę zmiennej). var number=0, liczba=6;
Instrukcja with. with document { write Nie potrzeba określać obiektu ; bgcolor = green; }
Model obiektu przeglądarki sieciowej. Hierarchia obiektów. window navigator document history location anchor link image form
WINDOW Określa bieżące okno przeglądarki Właściwości (dane). closed -określa, czy okno zostało zamknięte. defaultstatus - wadliwa informacja (linia statusu przeglądarki). length - liczba ramek w bieżącym oknie. name - nazwa okna. opener - nazwa okna rodzica. parent - okno z układem ramowym self lub top - odnosi się do bieżącego okna. status - wiersz stanu przeglądarki.
Metody (funkcje). alert(string) -okienko dialogowe <OK>. blur() - strata focus, dezaktywacja okna. cleartimeout(timerid) - kasuje funkcję zegara. close() - zamyka wyszczególnione okno. confirm(string) - okno dialogowe <OK>,<CANCEL>. eval(string) - traktuje string jako kod JavaScript. focus() - uaktywnia okno. open() - otwiera nowe okno. prompt(string,[inputdefault]) - okienko podpowiadające. scroll(x,y) - przesuwa okno do podanych współrzędnych. settimeout(expression,msec) - podpięcie funkcji pod zegar.
Zdarzenia onblur -uruchamianie gdy nastąpi dezaktywacja okna. onerror - na błąd w oknie. onfocus - na aktywację okna. onload - na zakończenie ładowania strony. onunload - na wyjście użytkownika z obrębu okna.
LOCATION Informacje o aktualnie wyświetlonym URL. Właściwości (dane). href -zawiera cały URL. protocol - razem z dwukropkiem (http:). host - nazwa i numer portu www.us.edu.pl:80 hostname - tylko nazwa www.us.edu.pl port - nr. Portu 80. path - scieżka do dokumentu. hash - zawiera wszelkie argumenty CGI po znaku # search - zawiera wszelkie argumenty CGI po znaku? Metody (funkcje). assign(string) -ustawia location.href.
HISTORY Informacje o historii odwiedzanych stron. Właściwości (dane). current -zawiera URL bieżącego wpisu historii. length - zawiera liczbę wejść na listę historii. previous - poprzedni wpis w historii. next - następny wpis w historii. Metody (funkcje). Back() -cofa się o jeden wpis na liście historii. Forward() - przeskakuje o jeden wpis. Go(num) - przeskakuje o num wpisów. go(string) - skacze do wpisu, który zawiera słowo w zmiennej string
DOCUMENT Obiekt definiuje dokument. Właściwości (dane). alinkcolor -kolor łącza aktywnego dokumentu. bgcolor - kolor tła dokumentu. cookie - cookie dokumentu. domain - nazwa domeny serwera. fgcolor - kolor pierwszego planu. lastmodified- data ostatniej modyfikacji dokumentu. linkcolor - kolor łączy dokumentu. referrer - URL dokumentu, z którego przywołano dokument. title- tytuł. URL- pełny URL dokumentu. vlinkcolor- kolor odwiedzonych łączy.
Metody (funkcje). close() -zamyka dany dokument. eval(string) - oblicza wyrażenie string jako kod JavaScript i zwraca wynik. open() - otwiera strumień dla nowego dokumentu. write(expression,[expression...]) - wypisuje wyrażenie HTML writeln (expression,[expression...]) - dodaje nowe połączenie. Przykład
Tablice obiektowe JavaScript Odwoływanie się do większej liczby obiektów w danym oknie lub dokumencie. Przywoływanie obiektów JavaScript 1. Odwoływanie się do hierarchii obiektów. document.flame.src Przykład 2. Tablica obiektów z indeksem numerycznym. document.images[0].src Przykład 3. Tablica skojarzeniowa obiektów. document.images[ FLAME ].src Przykład
Tablice objektów JavaScript anchors -dla znacznika <A> atrybut NAME. applets - <APPLET> arguments - jeden dla każdego argumentu funkcji JavaScript. elements - jeden dla każdego elementu w formie HTML embeds - <EMBED> forms - jeden dla każdej formy HTML frames - Jeden dla każdego znacznika <FRAME> history - jeden dla każdego wpisu na liste historii. images - jeden dla każdego znacznika <IMG> links - jeden dla każdego znacznika zawierającego href mimetypes - jeden dla każdego typu MIME,plug-ins, ActiveX options - <OPTIONS> plugins - jeden dla każdego plug-in na przeglądarce klienta
Obiekty LINK, AREA, ANCHOR Obiekt link korzysta z atrybutu href, a anchor name znacznika <A> Obiekt area powstaje dla każdego znacznika <AREA> Właściwości mają te same co obiekt location. Zdarzenia OnClick -uruchamianie po kliknięciu. OnMouseOver - uruchamianie przy najeżdżaniu na obiekt kursorem. OnMouseOut - uruchamianie przy zjeżdżaniu z obiektu kursorem.
Obiekt IMAGE Tworzone za pomocą znacznika <IMG> Właściwości (dane). border -wartość atrybutu BORDER. complete - Wskazuje, czy obraz został całkowicie załadowany. height - wysokość. hspace - atrybut HSPACE. lowsrc - atrybut LOWSRC. name- atrybut NAME. src - źródło danych obrazu. vspace - atrybut VSPACE. width- szerokość.
Zdarzenia OnAbort -gdy użytkownik przerywa ładowanie obrazu. OnError - gdy wystąpił błąd w trakcie ładowania obrazu. OnLoad - uruchamianie po całkowitym załadowaniu obrazu. Przykład (zmiana obrazków)
Navigator Informacje na temat przeglądarki Właściwości (dane). appcodename -nazwa kodowa przeglądarki. appname - nazwa przeglądarki. appversion - wersja przeglądarki. language - w jakim języku. mimetypes - tablica wszystkich typów MIME obsługiwanych. platform- typ systemu dla którego została skompilowana. plugins - info na temat zainstalowanych dodatków. useragent - http protocol user-agent: Mozilla/2.0 (Win32; I)
Metody javaenabled() - test czy obsługa języka java jest załączona plugins.refresh() - odświerza liste pluginów. preference() - ustawia przeglądarke. savepreferences() - nagrywa preferencje prefs.js. taintenabled()- pytania przed wysłaniem danych.
Obiektowość w JavaScript Tworzenie obiektów 1. Definicja klasy za pomocą funkcji function Wojsko(typ) { this.typ = typ; this.kolor = "red"; this.informacja = Info; } function Info() { return this.typ + ' wojsko' + ' kolor ' + this.kolor; } var Lotnictwo = new Wojsko('Powietrzne'); Lotnictwo.kolor='stalowy'; document.write("<h1>"+lotnictwo.informacja()+"</h1>");
Obiektowość w JavaScript Definicja lokalna funkcji function Wojsko(typ) { this.typ = typ; this.kolor = "red"; this.informacja = function() { return this.typ + ' wojsko' + ' kolor ' + this.kolor; } };
Obiektowość w JavaScript 2. Definicja klasy przez użycie literału var obj={} var Lotnictwo = { typ: "Powietrzne", kolor: "fioletowy", Informacja: function() { return this.typ + ' wojsko' + ' kolor ' + this.kolor; } } Lotnictwo.kolor="stalowy"; document.write("<h1>"+lotnictwo.informacja()+"</h1>"); Za pomocą literału nie można tworzyć instancji obiektu.
Obiektowość w JavaScript 3. Singleton (wzorzec projektowy) Ograniczenie funkcjonalności do jednej instancji klasy var Lotnictwo = new function() { this.typ = "Powietrzne"; this.kolor = "red"; this.informacja = function() { return this.typ + ' wojsko' + ' kolor ' + this.kolor; }; } Lotnictwo.kolor='stalowy'; document.write("<h1>"+lotnictwo.informacja()+"</h1>");
Obiekty wbudowane Obiekt DATE Newdate=new Date (rok,miesiąc, dzień, godzina, minuta, sekunda); Metody getyear() - Zwraca rok.. getmonth() - Zwraca miesiąc. getdate() - Zwraca dzień miesiąca. getday() - Zwraca dzień tygodnia. gethours()- Zwraca godzinę. getminutes()- Zwraca minuty. getseconds() - Zwraca sekundy.
gettime() - liczba msec od 01.01.1970 00:00:00 gettimezoneoffset() - Różnica czasu lokalnego do czasu GMT. setyear(arg) - Ustawia rok. setmonth(arg) - Ustawia miesiąc. setdate(arg)- Ustawia dzień miesiąca. sethours(arg)- Ustawia godziny. setminutes(arg) - Ustawia minuty. setminutes(arg) - Ustawia sekundy. settime(arg) - liczba msec od 01.01.1970 00:00:00 togmtstring(arg) - Reprezentacja łańcucha daty wg. GMT. tolocalstring(arg) - Reprezentacja łańcucha daty wg. czasu lokalnego.
Obiekt MATH Udostępnia funkcje matematyczne Właściwości (dane). E - stała e=2.73. LN2 - logarytm naturalny z 2. LN10 - z 10. LOG2E - podaje podstawę z 2 logarytmu z e. LOG10E - podaje podstawę z 10 logarytmu z e. PI - liczba pi=3.14 SQRT1_2 - pierwiastek kwadratowy z 1/2. SQRT2- pierwiastek kwadratowy z 2.
Metody abs(x) - bezwzględna acos(x) - arcus cosinus. asin(x) - arcus sinus atan(x) - arcus tangens x atan2(x,y)- arcus tangens x/y ceil(x)- zaokrąglenie w góre. cos(x) - cosinus x. exp(x) - exp(x) floor(x) - zaokrąglenie w dół. log(x) - logarytm z x. max(x,y) - maximum z x i y min(x,y)- minimum z x i y pow(x,y)- x do potęgi y random() - podaje liczbę losową round(x) - do liczby całkowitej sin(x) - sinus x sqrt(x) - pierwiastek kwadratowy. tan(x) - tangens.
event (JavaScript 1.2) Obiekt opisujący zdarzenia. Właściwości (dane). data -zwraca tablicę URLi. height - reprezentuje wysokość okna. layerx - pozycja X kursora w obszarze layer. layery - pozycja Y kursora w obszarze layer. modifiers - ALT_MASK, CONTROL_MASK, SHIFT_MASK i META_MASK. pagex- pozycja X w odniesieniu do strony pagey - pozycja Y w odniesieniu do strony screenx - pozycja X w odniesieniu do ekranu screeny - pozycja Y w odniesieniu do ekranu target - nazwa obiektu do którego odwołuje się zdarzenie. type - typ zdarzenia. which - numer naciśniętego guzika myszy.
width - reprezentuje szerokość okna. x - synonim dla layerx. y - synonim dla layery. screen Obiekt opisujący ekran. Właściwości (dane). availheight -wysokość dostępna dla przeglądarki. availleft - dostępność z prawej strony. availtop - dostępność z góry. availwidth - szerokość dostępna dla przeglądarki.. colordepth - głębokość bitowa kolorów.
height - wysokość ekranu. pixeldepth - bity na pixel. width - szerokość ekranu. string Obiekt opisujący działania na łańcuchach. s1 = JavaScript" // tworzy zmienną typu tekstowego s2 = new String( JavaScript") // tworzy obiekt string s1 = "2 + 2" // s2 = new String("2 + 2") eval(s1) // zwraca 4 eval(s2) // zwraca "2 + 2"
Właściwości (dane). constructor -zmiana konstruktora obiektu. length - zwraca długość łańcucha. prototype - dodawanie metod do objektów. var s1 = new String("a") var s2 = new String("b") var s3 = new String("c") function str_rep(n) { var s = "", t = this.tostring() while (--n >= 0) s += t return s } String.prototype.rep = str_rep s1a=s1.rep(3) // returns "aaa" s2a=s2.rep(5) // returns "bbbbb" s3a=s3.rep(2) // returns "cc"
Metody anchor() - tworzy znacznik HTML anchor <a name= > big() - jak znacznik <BIG>. blink() - jak znacznik <BLINK>. bold() - jak znacznik <B>. charat()- zwraca znak dla określonego indeksu. charcodeat() - zwraca kod numeryczny dla określonego indeksu. concat() - łączy obiekty string. fixed() - czcionka monotypiczna <TT>. fontcolor() - kolor czcionki. fontsize()- rozmiar czcionki. fromcharcode() - łańcuch z kodów numerycznych indexof() - zwraca index dla wartości znakowej. italics() - <I>. link() - tworzy link match() - porównanie ciągów. replace() - odszukanie i zamiana.
search() - odszukiwanie. slice() - wyciąga kawałek tekstu z ciągu. small() - jak <SMALL>. split() - dzieli ciąg znakowy. strike()- jak <STRIKE>. sub() - jak <SUB> substr() - zwraca ciąg z podanego indeksu z ilością znaków. substring() - zwraca ciąg pomiędzy dwoma indeksami. sup() - jak <SUP> tolowercase()- konwersja do małych znaków. tosource() - tworzy źródło. tostring() - zwraca ciąg reprezentujący dany objekt. touppercase() - konwersja do dużych znaków. valueof() - zwraca wartość obiektu
Tablice w Javascript Definicja tablicy var dni = ['poniedziałek','wtorek','środa','czwartek']; var auta = new Array("Saab", "Volvo", "BMW"); document.write("<h1>"+dni+"</h1>"); Zamiana wartości dni[0]="monday" auta[0]="fiat" Rozmiar tablicy var rozmiar = dni.length; Sortowanie tablicy var PoNazwach = dni.sort();
Tablice w Javascript Dodawanie elementów tablicy var dni = ['poniedziałek','wtorek','środa','czwartek']; dni[dni.length] = 'piątek'; Tablice obiektów var osoba = {Imie:"Aleksander", Nazwisko:"Dawid", wiek:45}; console.log(osoba.imie+" "+osoba.nazwisko+" "+osoba.wiek); W JavaScript nie ma tablic asocjacyjnych, czyli nie można się odwołać do indeksów jako nazw.
FORMULARZE Element interaktywności w HTML. Pozwala formułować zapytania?. RUN CGI PROGRAM 1. Zapytanie klienta. 2. Serwer przekazuje zapytanie do programu CGI. 3. Serwer przekazuje odpowiedź do przeglądarki.
<FORM> - Definiuje formularz (</FORM> nie pomijany). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, ACCEPT-CHARSET, ACTION, ENCTYPE, METHOD, NAME(N),TARGET. Atrybuty zdarzenia: ONCLICK, ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP, ONSUBMIT, ONRESET.
ACTION - adres URL aplikacji CGI <FORM ACTION= http://www.csr.pl/cgi-bin/update > ENCTYPE - sposób kodowania danych 1. Kodowanie application/x-www-form-urlencoded Nazwa=Firma+Komputerowa&adres=40-200+ Warszawa%0D%0A+UL.+MORSKA+12 Nazwa: Firma Komputerowa adres: 40-200 Warszawa UL. MORSKA 12
2. Kodowanie multipart/form-data ------------------------------12348905643ASX Content-Disposition: form-data; name= nazwa Firma Komputerowa ------------------------------12348905643ASX Content-Disposition: form-data; name= adres 40-200 Warszawa UL. MORSKA 12 ------------------------------12348905643ASX 3. Kodowanie text/plain nazwa=firma Komputerowa adres=40-200 Warszawa%0D%0A UL. MORSKA 12
METHOD - metoda przesyłania danych POST - dane w osobnej transmisji. GET - dane w wierszu poleceń. http://www.csr.pl/cgi-bin/update?nazwa=ksk KONTROLKI - elementy formularza, pozwalające na wprowadzanie danych.
<INPUT> - Tworzy kontrolki (</INPUT> brak). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE,ACCEPT, ACCESKEY, ALIGN, ALT,BORDER(N), CHECKED, DISABLED, ENCTYPE, MAXLENGTH, NAME, NOTAB(I), READONLY, SIZE, SRC, TABINDEX, TABORDER, TYPE, USEMAP, VALUE Atrybuty zdarzenia: ONCLICK, ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER, ONMOUSEUP, ONBLUR, ONSELECT, ONCHANGE.
TYPY KONTROLEK 1. Pola tekstowe. <INPUT TYPE=text NAME=nazwisko> <INPUT TYPE=text NAME=nazwisko SIZE=60 MAXLENGTH=32 VALUE= Brzęczyszczykiewicz > 2. Pola z hasłem. <INPUT TYPE=password NAME=pass> 3. Pola z wyborem pliku. kodowanie: multipart/form-data <INPUT TYPE=file NAME= konkurs_java >
------------------------------12348905643ASX Content-Disposition: form-data; name= imie Wacław Nowak ------------------------------12348905643ASX Content-Disposition: form-data; name= konkurs_java filename= sort.j Pierwszy wiersz pliku... Ostatni wiersz pliku ------------------------------12348905643ASX
4. Pola z wyboru opcji. <INPUT TYPE=checkbox CHECKED NAME=kolor value= biały > 5. Przełącznik opcji. <INPUT TYPE=radio CHECKED NAME=kolor value= biały > <INPUT TYPE=radio NAME=kolor value= zielony > 6. Przyciski. 6.a Wyślij <INPUT TYPE=submit>
6.b Przywróć <INPUT TYPE=reset> 6.c Mapowane przyciski obrazkowe <INPUT TYPE=image SRC= Jas.gif NAME=mapka> 6.d Przyciski zwykłe <INPUT TYPE=button VALUE= Zapisz NAME=save> Wiele Przycisków w jednym formularzu. <INPUT TYPE=submit VALUE= Dodaj NAME=akcja> <INPUT TYPE=submit VALUE= Odejmij NAME=akcja> 7. Pola ukryte. <INPUT TYPE=hidden VALUE=zmiana NAME=akcja>
<BUTTON> - Tworzy przycisk (</BUTTON> nigdy nie opuszczany). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, ACCESKEY, DISABLED, NAME, TABINDEX, TYPE, VALUE Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP, ONBLUR, ONFOCUS
<BUTTON TYPE=submit> Wysyłaj<IMG SRC="greendot.gif" align=middle alt="wyślij go"> </BUTTON> Wielowierszowe pola tekstowe. Pozwalają przesłać dłuższy tekst. Wykorzystywane w grupach dyskusyjnych. <TEXTAREA> - Tworzy wielowierszowe pole wprowadzania tekstu. (</TEXTAREA> nigdy nie opuszczany).
Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, WRAP(N) ACCESKEY, DISABLED, NAME, TABINDEX, COLS, ROWS, READONLY Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP, ONBLUR, ONFOCUS, ONCHANGE, ONSELECT.
<TEXTAREA COLS=30 ROWS=3> Ten tekst znajdzie się w textarea </TEXTAREA> Wybór z list i menu. <SELECT> - Definiuje rozwijane menu. (</SELECT> nigdy nie opuszczany). Punkty listy definiowane są przez znacznik <OPTION>
Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, NAME, TABINDEX, DISABLED, SIZE, MULTIPLE. Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP, ONBLUR, ONFOCUS, ONCHANGE, ONSELECT.
<OPTION> - Definiuje rozwijane menu. (</OPTION> zawsze pomijany). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, DISABLED, LABEL, SELECTED Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP.
<SELECT NAME=OS SIZE=1> <OPTION>Windows 98 <OPTION>Windows NT <OPTION>Linux <OPTION>QNX <OPTION>OS2 </SELECT><BR> <SELECT NAME=OS SIZE=4 MULTIPLE> <OPTION>Windows 98 <OPTION>Windows NT <OPTION>Linux <OPTION>QNX <OPTION>OS2 </SELECT><BR>
<OPTGROUP> - Grupuje elementy <OPTION> w obrębie znacznika <SELECT> (</OPTGROUP> może zostać pominięty). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, DISABLED, LABEL Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP, ONSELECT.
Grupy elementów formularza i fiszki. <LABEL> - Tworzy fiszkę (</LABEL> nigdy nie pomijany). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE, ACCESKEY, FOR Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP, ONBLUR, ONFOCUS.
<LABEL FOR="NIP">Numer Identyfikacji Podatkowej:</LABEL> <INPUT TYPE=TEXT NAME="NumIdPod" ID="NIP"> Grupowanie elementów formularza <FIELDSET> - Tworzy grupę (</FIELDSET> nigdy nie pomijany). Atrybuty: ID, LANG, DIR, CLASS, STYLE, TITLE Atrybuty zdarzenia: ONDBLCLICK, ONKEYDOWN, ONKEYPRESS, ONKEYUP, ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONCLICK, ONMOUSEOVER, ONMOUSEUP.