Kurs WWW – wykład 4

1. Kurs WWW – wykład 4 Paweł Rajba pawel@ii.uni.wroc.pl http://www.ii.uni.wroc.pl/~pawel/

2. CSS – Box model • Dla każdego elementu drzewa dokumentu jest tworzony prostokątny blok, w którym ten element się znajduje. Model ten omawia dodatkowe parametry takich prostokątów. • Każdy blok zawiera 4 obszar • content • padding • border • margin

3. CSS - Box model ze strony W3 Konsorcjum

4. CSS – Box model • Marginesy • właściwości • margin-top • margin-right • margin-bottom • margin-left • margin • wartości • długości (np. 3 cm) • procenty (np. 120%) • auto

5. CSS – Box model • Marginesy c.d. • domyślne wartości: 0 • margin – skrót dla margin-top, margin-right, margin-bottom, margin-left • w zależności od ilości ustawionych wartości mamy • 1 wartość – ustawia wszystkie strony • 2 wartości – #1: top i bottom, #2: left i right • 3 wartości – #1: top, #2: left i right, #3: bottom • 4 wartości – #1: top, #2: right, #3: bottom, #4: left

6. CSS – Box model • Marginesy - przykłady • BODY { margin: 2em } • BODY { margin: 1em 2em } • BODY { margin: 1em 2em 3em } • BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; }

7. CSS – Box model • Marginesy – uwagi • marginesy mogą czasamy zostać skolapsowane (collapse); oznacza to, że 2 lub więcej marginesów zostanie zamienione na jeden, zwykle ten o największej wartości • marginesy poziome nie kolapsują się • marginesy bloków, których pozycje są absolutne lub relatywne nie kolapsują się

8. CSS – Box model • Padding • właściwości • padding-top • padding-right • padding-bottom • padding-left • padding • wartości (domyślnie 0) • długości (np. 1cm) • procenty (na podstawie wielkości zawartości, np. 120%)

9. CSS – Box model • Border – wielkość • właściwości • border-top-width • border-right-width • border-bottom-width • border-left-width • border-width • wartości • długościami (np. 1cm) • thin, medium, thick (thin<=medium<= thick)

10. CSS – Box model • Border – kolor • właściwości • border-top-color • border-right-color • border-bottom-color • border-left-color • border-color • wartości • kolor • transparent (wtedy border jest przeźroczyty, ale ma grubość)

11. CSS – Box model • Border – styl • właściwości – styl • border-top-style • border-right-style • border-bottom-style • border-left-style • border-style

12. CSS – Box model • Border – styl • wartości • none – brak • hidden – prawie to samo co none; różnica w kontekście konfliktu rozdzielczości w tabelkach • dotted – kropki • dashed – krótkie kreski • solid – ciągła linia • double – podwójna linia (w połączeniu z border-width:thin daje to pojedynczą linię) • groove – jakby wyrzeźbione • ridge – podobne do ridge • inset – jakby osadzone • outset – podobne do inset

13. CSS – Box model • Border – skróty • właściwości • border-top • border-bottom • border-right • border-left • border • wartości • width style color

14. CSS – Box model • Border – przykłady • P { border: solid red } • P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red } • BLOCKQUOTE { border-color: red; border-left: double; color: black } /* bordel-color-left: black */

15. CSS – rodzaje wartości • specified • computed • actual

16. CSS – rodzaje wartości • Specified values • ustalanie wartości odbywa się wg następujących kryteriów: • uzyskujemy wartość z kaskady (np. w arkuszu wprost mamy wartość dla danej właściwości) • jeśli wartość jest dziedziczona, to używamy tej wartości • użyj wartości domyślnej

17. CSS – rodzaje wartości • Computed values • wartości specified mogą być absolutne (red, 2mm) lub relatywne (auto, 2em, 120%). Dla wartości absolutnych obliczeń wykonywać nie trzeba, natomiast dla relatywnych jak najbardziej.

18. CSS – rodzaje wartości • Actual values • Wartość ostatecznie przypisana. Może się różnić od computed, gdy np. zostanie obliczona wielkość czcionki na 15px, a w systemie takiej nie ma i wtedy zostanie wybrana wielkość 14px. • actual value to computed lub specified value po zaokrągleniach, przybliżeniach

19. Reguła import • Powoduje wczytanie reguł z zewnętrznego pliku • @import "mystyle.css" • @import url("mystyle.css")

20. Inheritance (dziedziczenie) • Elementy dziedziczą wartości po swoim rodzicu z drzewa dokumentu, jeśli to dziedziczenie jest dopuszczone. • <H1>To jest <EM>ważny</EM> nagłówek</H1> Jeśli kolor w EM nie jest ustawiony, a H1 ma kolor czerwony, to EM też będzie miało kolor czerwony.

21. Kaskada • Arkusze styli mogą mieć trzy różne źródła pochodzenia • author • user • user agent

22. Kaskada – wyszukiwanie wartości 1. Znaleźć wszystkie deklaracje, które dopasowują się do elementu i właściwości (wyszukanie odpowiednich selektorów) 2. Pierwsze sortowanie jest wg wag i źródła pochodzenia: • domyślnie, reguły autora mają wyższy priorytet od reguł usera • jeśli reguła jest !important to porządek ten się ulega odwróceniu • reguły !important są ważniejsze od reguł normalnych • reguły user agenta mają najniższy priorytet

23. Kaskada – wyszukiwanie wartości 3. Drugie sortowanie jest wg szczegółowości: bardziej szczegółowe selektory mają wyższy priorytet od tych ogólnych. 4. Ostatecznie, jeśli dwie reguły mają ten sam priorytet, to wygrywa ta, która pojawiła się później.

24. Kaskada – wyszukiwanie wartości • /* From the user's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } • /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt } text-indent: 1em font-style: italic font-size: 12pt font-family: sans-serif

25. Typy mediów • Określenie rodzaju medium • w arkuszu stylów: @import url("loudvoice.css") aural; @media print { /* definicja arkusza styli */ } • jako atrybut znacznika LINK <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css">

26. Typy mediów • Rozpoznawane typy mediów: • all – wszystkie rodzaje urządzeń • aural– urządzenia generujące mowę; do tego typu jest przeznaczony osobny zestaw styli • braille– przeznaczone dla urządzeń dotykowych braille’a • embossed– przeznaczone dla stronicowanych drukarek braille’a • handheld– przeznaczone dla urządzeń podręcznych (mały ekran, czarno-białe, słaba przepustowość) • print– przeznaczone dla drukarek oraz do wyświetlania na ekranie w trybie print preview

27. Typy mediów • Rozpoznawane typy mediów c.d.: • projection– przeznaczone do prezentacji na projektorach, druków transparentów, itp. • screen– do wyświetlania na kolorowych ekranach komputerów • tty– do wyświetlania na urządzeniach o ustalonej siatce znaków, np. terminali tekstowych • tv– do wyświetlania na urządzeniach typu television (niska rozdzielczość, kolor, dźwięk,...)

28. CSS – pozycjonowanie • Właściwość: position • wartości: • static (domyślnie) – normalne pudełko, właściwości left i top nie mają znaczenia • relative – pozycja pudełka jest obliczana zgodnie z normal flow • absolute – pozycja pudełka jest wyznaczona jest względem dokumentu i na podstawie wartości 'left', 'right', 'top', i 'bottom' • fixed – to samo co absolute, tyle że pozycja jest względem okna przeglądarki

29. CSS – pozycjonowanie • Właściwość: z-index – kolejność wg której warstwy się będą pojawiać • wartości: • auto • liczba (im większa liczba, tym warstwa będzie wyżej)

30. CSS – pozycjonowanie • Właściwość: display • wartości (kilka podstawowych) • inline – dla elementu tworzony jest osobny inline box (inline) • block – dla elementu tworzony jest osobny block box • none – dla elementu nie tworzony żaden box • Właściwość: float • left – pudełko jest do lewej i opływane z prawej • right – pudełko jest do prawej i opływane z lewej • none – pudełko w ogóle nie jest opływane

31. CSS – pozycjonowanie • Właściwość overflow – określa widoczność w momencie, gdy zawartość ma większy rozmiar niż rozmiar warstwy • wartości • visible – zawartość warstwy będzie widoczna • hidden – zawartość warstwy będzie niewidoczna • scroll – pojawią się paski przewijania

32. CSS – pozycjonowanie • Przykład online :-)

33. Wprowadzenie do JavaScript • Stworzony przez firmę Netscape • Wykonywany po stronie • klienta – i tą wersją będzie się interesować • serwera • Zorientowany obiektowo język skryptowy • Obsługiwany przez przeglądarki • MS Internet Explorer 3.0 i wzwyż • Netscape Navigator 2.0 i wzwyż • Opera, ...

34. JavaScipt i ECMAScript • Organizacja ECMA - European Computer Manufacturers Association http://www.ecma-international.org/ • Współpraca Netscape z ECMA w celu standaryzacji JavaScript • ECMAScript – standard JavaScript • JavaScript 1.5 jest w pełni zgodny z ECMAScript-262 Edition 3

35. Osadzanie JavaScript • Węwnątrz dokumentu HTML <SCRIPT language="JavaScript" type="text/javascript"> <!– ...tutaj umieszczamy skrypt... //--> </SCRIPT> • Dołączenie zewnętrznego pliku <SCRIPT language="JavaScript" type="text/javascript" src="skrypt.js"></SCRIPT> • Wewnątrz znaczników: <A href="javascript:void(0)">Tu klikać</A>

36. Osadzanie JavaScript • Gdzie umieszczać? • jeżeli w skrypcie mamy definicje funkcji lub coś co należy wykonać przed ładowaniem strony, to należy skrypt umieścić w nagłówku, • jeżeli natomiast skrypt ma wykonać jakieś akcje w trakcie ładowania (np. coś napisać na ekranie) lub później, to skrypt należy umieścić wewnątrz treści dokumentu.

37. Komentarze • // komentarz jednowierszowy • /* komentarz blokowy */

38. Literały • Liczby całkowite • podstawa dziesiętna, np. 69 • podstawa ósemkowa, np. 033 (deprecated) • podstawa szesnastkowa, np. 0x8F • Liczby zmiennoprzecinkowe • mogą mieć następujące części: • liczba całkowita w postaci dziesiętnej • kropkę (".") • część ułamkową (liczba całkowita w postaci dziesiętnej) • wykładnik • przykłady: 3.14, -3.1E12, .1e12, 2E-12.

39. Literały • Logiczne (Boolean): true, false • Napisy • Umieszczamy w pojedynczych lub podwójnych apostrofach • Znaki specjalne • \n – nowy wiersz • \t – tabulacja • \" – podwójny apostrof • \\ - backslash • "Aloha", 'Aloha', "c:\\Program Files" • null – wartość pusta • undefined – wartość niezdefiniowana

40. Literały • Tablice • auta = ["Audi","Ford","Fiat"] auta[0] // "Audi" auta[1] // "Ford" auta[2] // "Fiat" • kolory = [ ,"niebieski", ,"zielony", ] kolory[0] // undefined kolory[1] // "niebieski" kolory[2] // undefined kolory[3] // "zielony" Ten ostatni przecinek nie ma znaczenia – jest pomijany

41. Literały • Obiekty • var ulubione = "Królik"; function inne(nazwa) { return nazwa; } farma={male: "Chomik", srednie: ulubione, duze: inne("Słoń")} farma.male // "Chomik" farma.srednie // "Królik" farma.duze // "Słoń" • punkt={coords: {x: 7, y: 10}, color: "red"} punkt.coords.x // 7 punkt.coords.y // 10 punkt.color // "red"

42. Typy i konwersja typów • JavaScript jest językiem typowanym dynamicznie • Nie deklarujemy typów, a w razie potrzeby dokonywane są odpowiednie konwersje Przykład: var zmienna = 69; zmienna = "nowa wartość" // tutaj nie będzie błędu x = "x = "+40; // zwraca "x = 40" y = "69"-9; // zwraca 60 z = "69"+9; // zwraca 699

43. Zmienne i stałe • Deklaracje zmiennych • przez przypisanie wartości x=5; • przez słowo var • jeśli zmiennej nie zostanie przypisana wartość to przyjmuje wartość undefined • Deklaracja stałych • stała nie może zmieniać wartości lub być przedeklarowana • const wroclaw = "071";

44. Operatory • Przypisania: =, +=, -=, /=, %= x = 7; x += 4; x %= 10; • Porównania: ==, ===, !==, !=, <=, <, >, >= 4=='4'; 3==='3'; 3!=="3"; 3<10; • Arytmetyczne: ++, --, % x++; --x; x%4; • Bitowe: &, |, ^, ~, <<, >> (zachowuje znak), >>> 15 & 9 // 9; 15 ^ 9 // 6; 9 << 2 // 36; • Logiczne: &&, ||, ! true && false // false; !false // true

45. Operatory • Operator łączenia napisów: + "Paweł "+"Rajba"==="Paweł Rajba" • Operator warunkowy: ?: status = (wiek>=18) ? "pełnoletni" : "dziecko"; • Operator przecinek - stosowany głównie w for for (var i=0, j=9; i<=9; i++, j--) { ... } • Operator in – sprawdza, czy obiekt ma szukaną własność auta=new Array("Volvo", "Audi", "Mercedes); 0 in auta; 4 in auta; PI in Math;

46. Operatory • Operator delete: delete x=2; var y=3; delete x; // zwraca true delete y; // zwraca false (bo jest var) auta=new Array("Volvo", "Audi", "Mercedes); delete auta[1]; 1 in auta; // zwraca false auta[1]=undefined; 1 in auta; // zwraca true • Operator new objectName = new objectType ( param1 [,param2] ...[,paramN] )

47. Operatory • Operator instanceof objectName instanceof objectType dzien=new Date(2000, 10, 22) if (dzien instanceof Date) { ... } • Operator this – odwołanie do bieżącego obiektu this.color • Operator void – wymusza obliczenie wyrażenia bez zwracania wartości <A HREF="javascript:void(0)">Tu klikać i nic się nie stanie</A>

48. Instrukcje sterujące • Blok {instrukcja1 instrukcja2 ... instrukcjaN} • Instrukcja warunkowa if • if (condition) { ...instrukcje... } [else { ...instrukcje... } ] • if (x<10) { return "Mało!"; } else { return "Może być"; }

49. Instrukcje sterujące • Instrukcja warunkowa switch • switch (wyrażenie){ case etykieta : // ...instrukcje... break; case etykieta : // ...instrukcje... break; ... default : // ...instrukcje... } • switch(auto) { "Audi" : document.write("Jest ok"); break; "Volvo" : document.write("Jest very ok"); break; default : document.write("Takich nie lubimy"); }

50. Instrukcje sterujące • Pętla for • for ([wyrażeniepoczątkowe]; [warunek]; [wyrażenieInkrementacyjne]) { ...instrukcje... } • for (var i=0; i<10; i++) { document.write(i+"<br>"); }