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

(1)

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;

background-color: transparent;

font-family: Arial,sans-serif;

margin-left: 200px;

}

.date { color: red;

background-color: transparent;

font-family: Arial,sans-serif;

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

(2)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Mapa odsyłaczy, skrypty JavaScript</title>

<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">

<script type="text/javascript">

//<![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>

<area shape = "rect" coords = "0,0,100,40" href="http://sprocket.ict.pwr.wroc.pl/~zkruczkiewicz"

target="newwindow" alt=""/>

<area shape = "rect" coords = "500,0,600,40" href="c3.htm#Miejsce1"

target="newwindow" alt=""/>

</map>

</body>

</html>

(3)

Rys.3. Zastosowanie skryptów do pisania w linii statusu oraz automatyczne wyświetlanie daty

2. Pokaz slajdów – skrypty JavaScript Rys.4. Stan początkowy strony

(4)

Rys.5. Po wybraniu myszą lewego dolnego obrazka Rys.6. Po wybraniu myszą prawego dolnego obrazka

(5)

Rys.7. Po wybraniu połączenia – Cofnij (najechanie myszą)

(6)

Rys.8. Po wybraniu połączenia – Następny Rys.9. Po powrocie po wybraniu strony przez

(najechanie myszą) połączenie Następny

(7)

Rys.10. Po wybraniu połączenia – Koniec Rys.11. Po powrocie po wybraniu strony przez (najechanie myszą) połączenie Koniec

(8)

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

(9)

<head>

<title>Pokazy slajdów, skrypty JavaScript</title>

<link href="styl10.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

//<![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

(10)

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>

<title>Formularz ankiety-zewnetrzne arkusze stylów</title>

(11)

<script type="text/javascript">

//<![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>

<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>

Znajomość obsługi komputera</li>

<li><input type="checkbox" name="prawo_jazdy"/>Posiadanie prawa jazdy</li>

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/>

<p>

</p>

</form>

</body>

</html>