docĆw.1. a) Utworzyć dokument HTML (rys.1) wykorzystujący funkcję
download 
Reklamacja Transkrypt
Ćw.1. a) Utworzyć dokument HTML (rys.1) wykorzystujący funkcję
JavaScript – dostęp do elementów strony
1
Ćw.1.
a) Utworzyć dokument HTML (rys.1) wykorzystujący funkcję
utworz_liste():
<body onload="utworz_liste()">
<p>Lista kolorów:</p>
<div id="lista_kol"> </div>
</body>
Skrypt lista.js zawiera kod:
function utworz_liste()
{ // tworzenie kodu HTML
var lista;
lista = "<ul>" + "<li>Czarny</li>"
+ "<li>Pomarańczowy</li>"+ "<li>RóŜowy</li>"
+ "</ul>";
// pobranie odwołania do elementu <div> na stronie
elDiv = document.getElementById("lista_kol");
// dodanie zawartości do elementu <div>
elDiv.innerHTML = lista;
}
Rys.1.
b) Zmodyfikować funkcję utworz_liste() tak aby wyświetlała
kolory w postaci listy select (rys.2).
c) Zmodyfikować funkcję utworz_liste() tak aby tworzyła listę
na podstawie elementów umieszczonych w tablicy:
var t=new Array("czarny","czerwony",
"zielony","niebieski","biały");
Do tworzenia poszczególnych opcji listy skorzystać
z instrukcji for.
Rys.2.
Ćw.2.
a) Utworzyć dokument HTML (rys.3a,b,c):
<body>
<h3 id="n1">Przykład:</h3>
<h3 id="n2">Zmiana styli</h3>
<p> <input type="button" value="Ustaw Styl 1" onclick="styl1();" />
<input type="button" value="Ustaw Styl 2" onclick="styl2();" />
</p>
</body>
Skrypt css.js ma postać:
function styl1() {
// pobranie odwołań do elementów HTML
n1 = document.getElementById("n1"); n2 = document.getElementById("n2");
// ustawienie styli poprzez wskazanie nazwy klasy dla elementu
n1.className = "styl1_n1"; n2.className = "styl1_n2";
}
function styl2() {
// pobranie odwołań do elementów HTML
n1 = document.getElementById("n1"); n2 = document.getElementById("n2");
// ustawienie styli
n1.className = "styl2_n1"; n2.className = "styl2_n2";
}
JavaScript – dostęp do elementów strony
2
Arkusz css jest postaci:
.styl1_n1 { border: #008080 1px solid; background-color:#36ca04;}
.styl1_n2 { font-family: Verdana, Arial; font-weight: bold;
font-size: 10pt; background-color:#008080;color:#dff5fd}
.styl2_n1 { border: #6840ac 1px solid; background-color:#ac93d7;}
.styl2_n2 { font-family: Verdana, Arial; font-weight: bold;
font-size: 10pt; background-color:#6840ac;color:#ece7f5}
b) dodać trzeci przycisk ustawiający kolejny styl - według własnego uznania.
Rys.3a.
Widok normalny
Rys.3b.
Widok w stylu 1
Rys.3c.
Widok w stylu 2
Ćw.3.
a) Utworzyć dokument HTML (rys.4):
<script type="text/javascript">
<!-- Ukrycie JavaScriptu
function pokaz()
{ document.getElementById("wr1").style.visibility = "visible"; }
function ukryj()
{ document.getElementById("wr1").style.visibility = "hidden"; }
//Koniec kodu JavaScript -->
</script></head>
<body>
<div id="wr1" >Przykład ukrywania zawartości</div>
<div>
<input type="radio" name="rd1" onclick="pokaz();" checked="checked" />PokaŜ
<input type="radio" name="rd1" onclick="ukryj();" />Ukryj
</div>
</body>
Arkusz css ma postać:
#wr1 {
position:absolute; left:100px; top:50px; width:100px; height:100px;
background-color:yellow;
visibility:visible; }
JavaScript – dostęp do elementów strony
Rys.4a.
Rys.4b
b) zmodyfikować dokument tak aby zawierał dwa elementy div np.
<div id="d1"> i <div id="d2">
oraz przyciski div1 i div2. Kliknięcie na przycisk ma powodować pokazanie wybranego
elementu div a ukrycie drugiego (rys.5).
Rys.5.
3
