Wyklad PU3 2

Programy użytkowe III
Wykład 2
Style kaskadowe CSS
• Narzędzie do formatowania wyglądu
dokumentów
• Umożliwiają rozdział treści od
formatowania
• Nie wszystkie przeglądarki realizują w
pełni style CSS
Miejsca definiowania styli
• Odrębny plik .css zawierający wzorzec stylu
• Importowanie stylów z innych stron przez
polecenie @import.
• Sekcja <style> .. </style> w nagłówku
dokumentu html
• Sekcja stylu obejmująca fragment tekstu
• Style inline (bezpośrednio w formatownym
elemencie poprzez atrybut STYLE
• Definicje lokalne mają priorytet wyższy od
bardziej globalnych
Wstawianie stylów inline
cecha wartość
<p style="color:red; background:yellow”>Przykład</p>
Przykład
<img src="obraz.jpg” style="width: 150px”>

Definiowanie stylów dla fragmentu
dokumentu
<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">

To jest fragment objęty poleceniem SPAN
</span>
<div style=""font-family: arial; color: olive; position: relative; left: 300; width: 550">
Fragment dokumentu objęty blokiem DIV
</div>
Definiowanie stylu dla całego
dokumentu
selektor {cecha:wartość}
<head>
<style type="text/css">

</style>
</head>
Importowanie styli
<style>

</style>
Definiowanie styli w zewnętrznym arkuszu
arkuszstyli.css
BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm}
P {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal; text-
indent: 3 em}
A {text-decoration: none; color: blue}
H1 {font-size: 24pt}
H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color: #808000}
TD {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal}
Strona wykorzystująca arkusz

<head>
<title>Moja strona</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<LINK REL=stylesheet HREF="arkuszstyli.css" TYPE="text/css">
</head>
Pierwszeństwo styli
b {color:red}
i {color:blue}
u{color:green}
<head>
<title>Moja strona</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<LINK REL=stylesheet HREF="arkuszstyli.css" TYPE="text/css">
<style type="text/css">

</style>
</head>
<body>
<div style="color:pink”>To <b>jest</b> <i><u>fragment</u></i>
<b style="color:orange”>tekstu</b></div>
</body></html>
To jest fragment tekstu

Selektory
selektor {cecha:wartość}
• Selektor elementu
•b {color:red}
• Grupowanie selektorów
•i,u,h1 {font-size:15px}
• Selektor uniwersalny * {color:#FF0000; font-weight:bold}
• Selektor z klasą
• *.klasa1 {color: blue}
• a.zewnetrzny {color:green}
• <p class="klasa1”>Tekst</p>
• <a class="zewnetrzny” href="http://chip.pl”>CHIP</a>
• <a href="strona.htm>Strona</a>
• Selektor ID
•#tytul {color:blue}
•<p id="tytul”>Tekst</p>
Selektory
• Selektor potomka
• h1 i {color:blue}
• <h1>Przykładowy <u><i>tekst</i></u></h1>
• <i>Inny tekst</i>
• Selektor dziecka
• h1 > i {color:blue}
• <h1>Przykładowy <i>tekst</i></h1>
• <h1>Przykładowy <u><i>tekst</i></u></h1>
• Selektor braci
• b + i <color:blue>
•<p><b>Taki</b> <i>tekst</i></p>
•<p><i>tekst</i></p>
Selektory
• Selektory atrybutów
– p[align="center”]{color:blue}
• <p align="center”>Tekst</p>
• <p align="left”>Tekst</p>
– td[width]{background:yellow}
• <td width="30%”>Tekst</td>
• <td>Tekst</td>
Selektory pseudoklas
Pseudoklasa wyraża aktualny stan elementu.
• Pseudoklasa nieodwiedzanego, niewskazywanego łącza

– a:link {color:blue}
• Pseudoklasa odwiedzonego łącza
– a:visited {color:green}
• Pseudoklasa wskazywanego łącza
– a:hover {color:orange}
• Pseudoklasa aktywnego (wybranego) łącza
– a:active {color:red}
• Pseudoklasa elementu edytowanego (np. pola edycyjnego)
– input:focus {background:yellow}
Selektory pseudoelementów
• Pierwsza linia akapitu
– p:first-line {color:blue}
• Pierwsza litera akapitu
– p:first-letter {font-size:200%}
Jednostki miary
• Miary apsolutne
– in - cale, 1in = 2.54cm
– cm - centymetry, 1cm
– mm - milimetry, 1mm
– pt - punkty, 1pt = 1/72in
– pc - pika, 1pc = 12pt
• Miary wzgędne
– em - wysokość czcionki elementu
– ex - x-height - wysokość litery x
– px - piksele, w odniesieniu do rozdzielczości tła
– %
Formatowanie czcionek
• Rodzaj czcionki - font-family: Arial, Times
• Styl czcionki – font-style: italic (inne: normal, oblique )
• Wariant czcionki –font-variant: small-caps (inne: normal)
• Waga czcionki – font-weight: bold (inne: normal, bolder, lighter, 100-900)
• Wysokość czcionki – font-size: 15px (inne: medium, small, smaller, 200%)
• Atrybut mieszany – font: small-caps bold 14pt/18pt Times, serif
Formatowanie tekstu
• Odstępy pomiędzy wyrazami - word-spacing: 1cm
• Odstępy pomiędzy literami – letter-spacing: 1mm
• Odstępy pomiędzy liniami – line-height: 1cm
• Dekoracja tekstu – text-decoration: underline (inne: none, overline, line-
through, blink)
• Transormacje tekstu – text-tranform: capitalize (uppercase,lowercase,none)
Kolory i tła
• Kolor tekstu - color:blue
• Kolor tła – background-color: yellow
• Grafika w tle: background-image: url(obraz.jpg)
• Atrybut mieszany - background: #FFFF00 url(obraz.jpg)
Rozmiary
• Szerokość – width:150px (3mm, 1 cm, 50%)
• Wysokość – height:50%
Pozycjonowanie
• Absolutne, w dowolnym miejscu strony
– <div style="position:absolute; left:0px; top:0px"><img
src="obraz.gif" "></div>
• Względne, od miejsca wstawienia elementu
– <p style="position: relative; left: 200px; top:
50px">Tekst</p>
• Ustalone, względem okna przeglądarki
– <div style="position:fixed; left:0; top:0”> "><img
src="obraz.gif" "></div>
Formularze
Pozwalają wysyłać dane użytkownika na
serwer
Formularz
Metoda wysyłania
Adres docelowy
<form action="http://www.onet.pl” method="get”>
<input name="imie” type="text” size="15” value="Jan”>

<input name="wysylanie” type="submit” value="Wyślij”>
</form>
Pola formularza
• Tekstowe <input type="text">
• Radio <input type="radio">
• Checkbox <input type="checkbox">
• Memo <textarea> .. </textarea>
• Lista <select> <option>…</option><option>…
</option> </select>
• Przycisk wysyłającyc <input type="submit">
• Przycisk czyszczący <input type="reset">
• Przycisk ogólny <input type="button">
Metoda wysyłania GET
Dane są doklejane do adresu wywoływanej strony,
GET / HTTP/1.1
Host: szukaj.onet.pl/query.html?imie=Jan&nazwisko=Kowal
User-Agent: Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.6)
Gecko/20040122
Accept: text/xml,application/xml,application/xhtml+xml,text/html;
q=0.9,text/plain;q=0.8
Accept-Language: pl,en-us;q=0.7,en;q=0.3
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
znak powrotu karetki i wysunięcia strony (CRLF)
Metoda wysyłania POST
Dane są doklejane na końcu pakietu
GET / HTTP/1.1
Host: szukaj.onet.pl/query.html
User-Agent: Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.6)
Gecko/20040122
Accept: text/xml,application/xml,application/xhtml+xml,text/html;
q=0.9,text/plain;q=0.8
Accept-Language: pl,en-us;q=0.7,en;q=0.3
Accept-Charset: ISO-8859-2,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
znak powrotu karetki i wysunięcia strony (CRLF)
imie=Jan
nazwisko=Kowal
Skrypty klienckie
Programy osadzone w kodzie HTML
• Języki JavaScript, VBScript, ActionScript

• Wykonywane przez przeglądarkę
• Mogą być nie obsługiwane lub zablokowane
• Jawne kody źródłowe
• Brak wymiany danych przez sieć
• Brak wymagań względem serwera
• Brak możliwości współpracy z bazami danych i
rejestracji danych
Skrypty serwerowe
Programy osadzone w kodzie HTML
• Technologie PHP, ASP (JavaScript, VBScript),

ASP.NET (JScript, C#, J#, VB.NET ….), JSP
(Java)
• Wykonywane przez serwer WWW
• Brak wymagań względem przeglądarki
• Ukryte kody źródłowe
• Konieczność komunikacji przez sieć
• Serwer musi udostępniać technologię
• Możliwość współpracy z bazami danych
Język JavaScript
• Stworzony przez NETSCAPE
• Inna składnia i filozofia od Java
• Brak jawnego typowania zmiennych
• Zaimplementowany w większości
przeglądarek
Osadzanie JavaScript
Bezpośrednio w znaczniku HTML, w atrybucie definiującym zdarzenie.
<input type="button” value="Przywitaj” onClick="alert(‘Hello’)”>

W nagłówku strony. Umieszczamy w nim własne definicje funkcji.
<html>
<head>
<title>Przykład</title>
<script language="JavaScript”>
function Moja()
{
alert("Hello”);
}
</script>
</head>
<body>
<input type="button” value="Przywitaj” onClick="alert(‘Hello’)”>
</body>
W ciele strony. Możemy z jego pomocą dynamicznie generować zawartość.
<html>
<head>
<title>Przykład</title>
</head>
<body>
<script language="JavaScript”>
for (i=1;i<=7;i++)
document.write(i+’<br>’);
</script>
</body>
Osadzanie JavaScripy
Dołączanie zewnętrznego pliku skryptowego.
<script src=funkcje.js.js></script>
Operatory
• Arytmetyczne: +,-,*,/,++,-=,+=,*=,/=
• Porównań: ==,!=,<,>,<=,>=
• Logiczne: &&, ||, !
Zmienna
Zmienne w JavaScript nie mają jawnych typów.
var a,b; //deklaracja zmiennych, typ niezdefiniowany
var c=6,d="hello”; // deklaracja zmiennych + inicjacja; zmienna c-int, d-string
d=7*3.2+4.1; // deklaracja niejawna zmiennej, zmienna liczbowa

Instrukcje
• for (wyr1;wyr2;wyr3) { /* blok */}
• while (warunek) { /* blok */ }
• do { /* blok */} while (warunek)
• if (warunek) { /* blok1 */} else { /*blok2*/}
• switch (zmienna) { case 1:
{ /*blok1*/};break; case 2:
{ /*blok2*/};break; default: { /*blok*/};}
Funkcje
Bezargumentowa, nie zwracająca wartości
Definicja
function Witaj() //nagłówek

{
//ciało
var x=5;
alert(‘Kwadrat 5^2=‘+(x*x));
}
Wywołanie
Witaj();
Funkcje
Argumentowa, nie zwracająca wartości
Definicja
function Sumuj(a,b) //nagłówek

{
//ciało
var wynik=Number(a)+Number(b);
alert(‘Suma ‘+a+’ plus ‘+b+’ równa się ‘+wynik);
}
Wywołanie
Sumuj(4,5);
Funkcje
Argumentowa, zwracająca wartość
Definicja
function Suma(a,b) //nagłówek

{
//ciało
var wynik=Number(a)+Number(b);
return wynik;
}
Wywołanie
d=Suma(4,2)+Suma(Suma(2,45),12);
Funkcje globalne
- Wykonuje polecenie podane jako argument
- Sprawdza czy wartość jest skończona

- Sprawdza czy wartość nie jest liczbą
- Konwertuje obiekt na liczbę
-Konwertuje tekst na liczbę rzeczywistą
-Konwertuje tekst na liczbę całkowitą

- Konwertuje obiekt na tekst
Wartość globalne
• NaN – wynik nie jest liczbą
• Infinity – nieskończoność
• undefined – wartość niezdefiniowana
Klasa Math
Metody
Stałe
Klasa String
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "<br />")
document.write(str.indexOf("World") + "<br />")
document.write(str.indexOf("world"))
</script>
Klasa Date
var d = new Date()
document.write(d.toLocaleString())
</script>
Klasa Array
var arr = new Array(6)
arr[0] = "Jani"
arr[1] = "Hege"
arr[2] = "Stale"
arr[3] = "Kai Jim"
arr[4] = "Borge"
arr[5] = "Tove„
document.write(arr + "<br />")
document.write(arr.sort())</script>
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove
Document Obiect Model
Opisuje hierarchiczną strukturę obiektów tworzących stronę HTML
Obiekt window
Obiekt reprezentuje okno przeglądarki
• Obiekty wewnętrzne Window:

– document (strona HTML)
– history (historia przeglądarki)
– location (aktualny adres strony w oknie)
– navigator (zawiera informacje o przeglądarce)
– screen (zawiera informacje o ekranie)
– frames[] – kolekcja ramek w oknie
Obiekt window
• Właściwości
– status (treść napisu na pasku statutowym)
– length (liczba ramek w oknie)
window.status="Przykładowy tekst"
Obiekt window
• Metody:
– alert(tekst) (pokazuje okienko informacyjne)
– promp(pytanie, domyslna tresc) (pokazuje okienko zapytania i
zwraca wpisany tekst
– confirm (pytanie) (pokazuje okienko potwierdzeni tak/nie i
zwraca true/false)
– close() (zamyka okno)
– open() (otwiera nowe okno)
– resizeTo() (zmienia rozmiar okna)
– scrollBy() (przewija okno względnie)
– scrollTo() (przewija okno na pozycje)
– navigate("URL") (wczytuje do okna nową stronę)
– moveTo() – przesunięcie okna na pozycję
Metoda open()
Adres Nazwa
window.open(‘http://www.onet.pl’,’ONET’,’menubar=no;location=no’);
Obiekt window
• Metody obsługi czasu:
– setTimeout(czas,wyrażenie) (wykonuje
wyrażenie po podanej liczbie milisekund)
– clearTimeout() (anuluje działanie setTimeout)
– setInterval(czas, wyrażenie) (wywołuje
wyrażenie co podany okres czasu)
– clearInterval() (wyłącza interval)
<html>
<head><title>Zegar</title></head>
<body>
<script language="JavaScript">
window.setInterval(‘window.status=Date().toLocaleString()’,1000);
//setInterval(’status=Date().toLocaleString()’,1000);
</script>
</body>
</html>
<html>
<body>
window.setTimeout("alert('Na co czekasz?')",10000);
</script>
</body>
</html>
Obiekt document
Reprezentuje pojedynczy dokument HTML
• Kolekcje
– anchors[] (hiperłącza)
– forms[] (formularze)
– images[] (obrazy)
Obiekt document
• Właściwości
– body
– bgColor
– fgColor
– cookie
– documentElement (korzeń elementów)
– title (tytuł dokumentu)
<html>
<body>
var Kolory=new Array('yellow','blue','green','red','gray');
var NrKoloru=01;
window.setInterval("document.bgColor=Kolory[NrKoloru++]; if (NrKoloru>4) NrKoloru=0;",300);
</script>
</body>
</html>
Obiekt document
• Metody
– open() – otwiera dokument do pisania
– clear() – czyści zawartość dokumentu
– close() – zamyka dokument do pisania
– write(), writeln() – pisze do dokumentu
– getElementById(), getElementByName() –
wybiera element wg id lub nazwy
Obiekt document
<html>
• Zdarzenia <head><title>Zegar</title></head>
function CzytajKlawisz()
{
alert('Wcisnieto klawisz:'+event.keyCode);
}
document.onkeydown=CzytajKlawisz;
</script>
<body>
Strona
</body>
</html>
<html>
<head><title>Klawiatura</title></head>
var y=100;
function Przesun()
{
if (event.keyCode==40) y+=5;
if (event.keyCode==38) y-=5;
document.getElementById('bohater').style.top=y;
}
document.onkeydown=Przesun;
</script>
<body>
<div id="bohater" style="position:absolute; left:100px; top:100px;
background-color:yellow"><img src="bohater.gif"></div>
</body>
</html>
<html>
<head><title>Animacja</title></head>
var y=100;
function Przesun()
{
y+=5;
document.getElementById('bohater').style.top=y;
}
window.setInterval('Przesun()',500);
</script>
<body>
<div id="bohater" style="position:absolute; left:100px; top:100px;
background-color:yellow"><img src="bohater.gif"</div>
</body>
</html>
<html>
<head><title>Myszka</title></head>
function Przesun()
{
document.getElementById('bohater').style.left=event.clientX;
document.getElementById('bohater').style.top=event.clientY;
}
document.onmousemove=Przesun;
</script>
<body>
<div id="bohater" style="position:absolute; left:100px; top:100px; background-color:yellow">
<img src="bohater.gif">
</div>
</body>
</html>
Obiekt body
document.body.scrollTop=100;
onLoad
Obiekt navigator
Obiekt screen
Obiekt form
Obiekt input
Obiekt select

Wyklad PU3 2

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Wyklad PU3 2

Uploaded by

Copyright:

Available Formats

Programy użytkowe III

<p style="color:red; background:yellow”>Przykład</p>

<img src="obraz.jpg” style="width: 150px”>

<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red">

Strona wykorzystująca arkusz

To jest fragment tekstu

• Pseudoklasa nieodwiedzanego, niewskazywanego łącza

<form action="http://www.onet.pl” method="get”>

<input name="imie” type="text” size="15” value="Jan”>

• Języki JavaScript, VBScript, ActionScript

• Technologie PHP, ASP (JavaScript, VBScript),

<input type="button” value="Przywitaj” onClick="alert(‘Hello’)”>

var a,b; //deklaracja zmiennych, typ niezdefiniowany

var c=6,d="hello”; // deklaracja zmiennych + inicjacja; zmienna c-int, d-string

d=7*3.2+4.1; // deklaracja niejawna zmiennej, zmienna liczbowa

function Witaj() //nagłówek

function Sumuj(a,b) //nagłówek

function Suma(a,b) //nagłówek

- Wykonuje polecenie podane jako argument

- Sprawdza czy wartość jest skończona

-Konwertuje tekst na liczbę całkowitą

• Obiekty wewnętrzne Window:

You might also like