Wykh 6 Skrypty typu JavaScript 1.Zmiana komunikatu w pasku

Transkrypt

Wykh 6
Skrypty typu JavaScript
1.Zmiana komunikatu w pasku przeglądarki, automatyczne
pokazywanie daty
Rys.1. Zastosowanie skryptów do pisania w linii statusu oraz
automatyczne wyświetlanie daty
body {
color: #000000;
font-family: Arial,sans-serif;
background-color: transparent;
}
h1,h3,h4 {
color: #333366;
margin-left: 200px;
}
.date {
color: red;
font-size:12px;
font-weight: bolder;
margin-left: 200px;
top: 95px;
}
Rys.2. Plik z definicjami zewnętrznych arkuszy stylów
Zofia Kruczkiewicz, Wykład 6, HTML
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<title>Mapa odsyłaczy, skrypty JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styl8.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
function load()
{ window.status = "Przykłady skryptów \-Wpisywanie do linii statusu!!"; }
// ]]>
</script>
</head>
<body onload="load()">
<p class="date">
//<![CDATA[
var data = new Date();
var miesiace = new Array("stycznia","lutego","marca","kwietnia","maja",
"czerwca","lipca","sierpnia","września","października","listopada","grudnia");
document.write(data.getDate()+", ");
document.write(miesiace[data.getMonth()]+", ");
document.write(data.getFullYear()+" roku");
//]]>
</script>
</p>
<h1>Odsyłacze</h1>
<img src="rainbow.gif" usemap = "#tecza" alt=""/>
<map name="tecza" id="tecza">
<area shape = "rect" coords = "0,0,100,40" href="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz"
target="newwindow" alt=""/>
<area shape = "rect" coords = "200,0,400,40" href="c1.htm" target="newwindow" alt=""/>
<area shape = "rect" coords = "500,0,600,40" href="c3.htm#Miejsce1"
target="newwindow" alt=""/>
<area shape = "rect" coords = "400,0,500,40" href="#Miejsce2" target="newwindow" alt=""/>
</map>
</body>
</html>
Rys.3. Zastosowanie skryptów do pisania w linii statusu oraz automatyczne wyświetlanie
daty
2
2. Pokaz slajdów – skrypty JavaScript
Rys.4. Stan początkowy strony
3
Rys.5. Po wybraniu myszą lewego dolnego obrazka
Rys.6. Po wybraniu myszą prawego dolnego obrazka
4
Rys.7. Po wybraniu połączenia – Cofnij (najechanie myszą)
5
Rys.8. Po wybraniu połączenia – Następny
(najechanie myszą)
Rys.9. Po powrocie po wybraniu strony przez
połączenie Następny
6
Rys.10. Po wybraniu połączenia – Koniec
(najechanie myszą)
Rys.11. Po powrocie po wybraniu strony przez
połączenie Koniec
7
img.polozenie {
margin-right: 4px; vertical-align:text-bottom;
border:red; height: 150px; width: 150px;
}
body {
background-color: #FFFFFF; color: #000000;
}
.wiersz_graficzny {
height: 120px;text-align: center;
}
.wiersz_tekstowy {
text-align: center; color: #333366; margin: 5px 15px 5px 15px; border: solid;
background-color: #D2FFF1; font-family: Arial,sans-serif;
font-size: 11pt; line-height: 90%; border-color: #FF0000; border-width: 2px;
}
div.srodek {
text-align: center;
margin: auto;
padding: 3px;
}
a.niebieski:visited {
color: #0000FF; background-color: transparent;
font-family: Arial,sans-serif;text-decoration: none;
}
a.niebieski:hover {
color: #00FF00; background-color:rgb(170,170,170);
background-image: url(Kwiatek.gif);
}
p.lacz {
color: #D2FFF1;
background-color: transparent; font-family: Arial,sans-serif; text-align: center;
}
p{
color: #003366; font-family: Arial,sans-serif;
background-color: transparent; text-align:center;
}
p.litera:first-letter {
font-size:xx-large; color:#FF0000; background-color: transparent;
}
a:link,a:visited {
color: #336633; background-color: transparent; font-family: Arial,sans-serif;
font-size:12px; font-weight: bolder; letter-spacing: 1px; text-decoration: none;
}
a:hover {color: #009966; background-color:rgb(230,230,179);}
Rys.12. Zawartość pliku styl10.css – arkusze stylów do pokazu slajdów
8
<head>
<title>Pokazy slajdów, skrypty JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styl10.css" rel="stylesheet" type="text/css" />
//<![CDATA[
var wybrany = new Image();
var koncowy = new Image();
wybrany.src = "Assets.gif"
koncowy.src = "Books.gif"
var wy_wybrany = new Image();
var wy_koncowy = new Image();
wy_wybrany.src = "School.gif "
wy_koncowy.src = "Dbmusic.gif "
function Cofnij()
{ alert("To jest początek pokazu.");}
// ]]>
</script>
</head>
<body>
<p class="litera"> Pokazy slajdów</p>
<p class="wiersz_graficzny">
<img src="Assets.gif" class="polozenie" alt="Pierwszy slajd"/>
<img src="Books.gif" class="polozenie" alt="Drugi slajd"/> </p>
<div class="srodek">
<a href="mapa.html">
<img src="Books.gif" class="polozenie" alt="Pierwsza strona" id="next"
onmouseover="next.src = wybrany.src"
onmouseout="next.src = koncowy.src"/></a>
<a href="s15.html"><img src="Dbmusic.gif" class="polozenie"
alt="Wyjście z pokazu" id="exit" onmouseover="exit.src=wy_wybrany.src"
onmouseout="exit.src = wy_koncowy.src" /> </a>
</div>
<div class="wiersz_tekstowy">
<p class="lacz">
<a class="niebieski" href="#" onmouseover="Cofnij()"> COFNIJ</a> |
<a class="niebieski" href="mapa.html"> NASTĘPNY </a> |
<a class="niebieski" href="s15.html"> KONIEC</a> </p> /div>
</body>
</html>
Rys.13. Strona internetowa ze skryptami JavaScript do prezentacji slajdów
9
3. Kontrola poprawności danych za pomocą skryptów JavaScript
Rys.14. Przykład skryptu kontrolującego poprawność wprowadzanych danych do
formularza (Wykład 5 - prezentacja określona za pomocą zewnętrznych arkuszy stylów)
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Formularz ankiety-zewnetrzne arkusze stylów</title>
<link rel="stylesheet" href="styl7.css" type="text/css"></link>
10
//<![CDATA[
function validate_nazwisko_imie(form)
{ if (form.nazwisko.value == "" || form.imie.value=="")
{ alert ("Proszę podać swoje nazwisko i imie.");
form.nazwisko.focus();
return false;
}
return true;
}
//]]>
</script>
</head>
<body>
<h2>Ankieta</h2>
<form method="post"
action="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz/ankieta1.php"
onsubmit="return validate_nazwisko_imie(this);">
<pre>
<i>Podaj nazwisko: </i><input type ="text" name="nazwisko" value="" class="poletekstowe"/>
<i>Podaj imię
</i><input type ="text" name="imie" value=""/>
</pre>
<p><i>Płeć</i>
<select name="plec" size="1">
<option>MęŜczyzna</option>
<option selected="selected" class="wybor">Kobieta</option>
</select>
</p>
<p><i>Podaj swoje umiejętności<br/> Zaznacz wszystkie moŜliwe odpowiedzi</i> </p>
<ol>
<li><input type="checkbox" name="komputer" checked="checked" class="wybor"/>
Znajomość obsługi komputera</li>
<li><input type="checkbox" name="prawo_jazdy"/>Posiadanie prawa jazdy</li>
<li><input type="checkbox" name="angielski" checked="checked"/>
Znajomość języka angielskiego</li>
<li><input type="checkbox" name="niemiecki"/>Znajomość języka niemieckiego</li>
</ol>
<i>Napisz o swoich dodatkowych umiejętnościach</i><br/>
<textarea name="coment" rows="5" cols="50"> </textarea>
<p>
<input type="submit" value="Prześlij dane operacji"/><br/>
<input type="reset" value="Wyczyść dane" class="przycisk"/><br/>
</p>
</form>
</body>
</html>
11

Wykh 6 Skrypty typu JavaScript 1.Zmiana komunikatu w pasku

Transkrypt

Podobne dokumenty

ALABAMA S3 SRC (METAL FREE)

Opole: Świąteczny klimat na Placu Katedralnym

Tworzenie stron WWW 1 Zajęcia stacjonarne. Arkusze CSS

HTML - sosw.poznan.pl

Przelicznik ocen uzyskanych na uczelni partnerskiej (Manchester

Podstawowe polecenia HTML

flipper - POLISHMADE