Temat : Wykorzystanie skryptów na stronie internetowej 1. Menu rozwijalne
Zamiast umieszczać na stronie kolejne przyciski (linki) do stron, które chcemy wywołać, możemy połączenia umieścić w liście rozwijalnej.
Przykład 1:
<html>
<head>
<meta charset="UTF-8">
<title>lista-linki</title>
<script type="text/javascript">
function go () {
location=document.formularz.menu.options[document.formularz.menu.se lectedIndex].value
}</script>
</head>
<body>
<form name="formularz">
<p> <select name="menu" size="1">
<option value=http://onet.pl> ONET </option>
<option value=http://wp.pl> WP </option>
<option value=http://interia.pl> INTERIA </option>
<option value=http://zsstaszow.pl> ZSSTASZOW </option>
<input type="button" name="test" value="W drogę!" onClick="go()">
</form>
</body>
</html
2. Dynamiczna zmiana atrybutów np tekstu.
Zmiana atrybutów tekstu stosowana jest najczęściej w celu wyróżnienia jakiegoś fragmentu tekstu.
Przykład 2 - podwójne kliknięcie na tekst powoduje jego zmianę, ale bez możliwości zmiany powrotnej ( mało praktyczne rozwiązanie).
<html>
<head>
<meta charset="UTF-8">
<title>zmiana tekstu</title>
<script type="text/javascript">
function duzy (a) { a.style.fontSize='25pt';
a.style.color='red';
}</script>
</head>
<body bgcolor='#00ffff' text='#0000ff'>
<h2> Lista oddziałów firmy</h2>
<hr><BR>
<li ondblclick='duzy(this);'>
Katowice ul. Katowicka 1/2
</li>
<li ondblclick='duzy(this)';>
Kraków ul. Krakowska 1/2
</li>
<li ondblclick='duzy(this)';>
Kielce ul. Kielecka 1/2
</li>
<li ondblclick='duzy(this)';>
Krosno ul. Krośnieńska 1/2
</li>
</body>
</html
Przykład 3 -rozwiązanie bardziej rozbudowane, ze zmianą powrotną tekstu -pojedyncze kliknięcie.
<html>
<head>
<meta charset="UTF-8">
<title>zmiana tekstu</title>
<script type="text/javascript">
function duzy (a) {
if (a.className=="czarny") a.className="czerwony"; else a.className="czarny";
}</script>
<style>
.czerwony {color:rgb(255,0,0);font-style:normal; font-size:25;}
.czarny {color:rgb(0,0,0);font-style:normal;}
</style>
</head>
<body bgcolor='#00ffff' text='#0000ff'>
<h2> Lista oddziałów firmy</h2>
<hr><BR>
<li CLASS="czarny" onclick='duzy(this);'>
Katowice ul. Katowicka 1/2
</li>
<li CLASS="czarny" onclick='duzy(this);'>
Kraków ul. Krakowska 1/2
</li>
<li CLASS="czarny" onclick='duzy(this);'>
Kielce ul. Kielecka 1/2
</li>
<li CLASS="czarny" onclick='duzy(this);'>
Krosno ul. Krośnieńska 1/2
</li>
</body>
</html
Zadanie domowe: Elementy strony ze skryptami:
Lista rozwijalna z przykładu 1 zawiera miejscowości z list oddziałów, wybranie miejscowości i kliknięcie na przycisk wyświetla poniżej informacje o adresie danego oddziału, a najechanie myszką na te dane powoduje zmianę ich wyglądu (wyróżnienie), odsunięcie myszki powraca tekst do wyglądu pierwotnego. Wybranie innej miejscowości zmienia poniższe dane adresowe.
