"LUENNOT"
Tapa sijoittaa pieniä ohjelmia WWW-sivujen sisään
Tämän avulla voidaan mm. tulostaa erilaisia tekstejä tai muokata eri tavoilla WWW-sivun tai selaimen ominaisuuksia.
JavaScript komentojen kirjoittaminen HTML-koodiin
<script> </script> komentojen väliin
jos yllä oleva sijoitetaan head-tagien väliin ne ajetaan heti sivulle tultaessa
muutoin komento suoritetaan siinä kohdalla kuin se on koodissa
Esimerkki 1/ tehtävä 1
Kirjoita alla oleva koodi ja testaa ohjelma (alla selitys koodista):
<html>
<head><title>Javascriptiä</title>
<script language="JavaScript">
<!--
document.write("<h3>JavaScriptin
kokeilua</h3>");
// -->
window.status="Heippa";
</script>
<body>
<p>HTML-koodia
</body>
</html>
Koodin selitys
rivi3: parametrilla language määritellään kielen tyyppi
rivit 4 ja 6: kommentteja, tuolloin jos selain ei tue JavaScriptiä kommenttien välissä oleva komento ohitetaan
rivi 5: JavaScript-komento
rivi 7: JAVA-script komento, joka tulostaa vasempaan alareunaan (palkkiin) ko. tekstin
Tehtävä 2
Kirjoita
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY></BODY>
</HTML>
Ja kopioi sinne vuorollaan (tai eri sivuille) seuraavat Scriptit (sopivaan kohtaan yo. ohjeiden mukaan). Mitä kyseiset ohjelmat tekevät (tarkkaile myös "vasenta alanurkkaa")?
Siis kirjoita yllä mainitut "pakolliset osat", kopioi alla olevat koodit ja testaa selaimella, mitä kukin tekee...
3a) Huomaa, että a-kohdassa BODY-komennot ovat jo mukana
<script language="JavaScript">
<!--
var clockID = 0;
function UpdateClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
var tDate = new Date();
document.theClock.theTime.value = ""
+ tDate.getHours() + ":"
+ tDate.getMinutes() + ":"
+ tDate.getSeconds();
clockID = setTimeout("UpdateClock()", 1000);
}
function StartClock() {
clockID = setTimeout("UpdateClock()", 500);
}
function KillClock() {
if(clockID) {
clearTimeout(clockID);
clockID = 0;
}
}
//-->
</script>
<body onload="StartClock()"
onunload="KillClock()">
<center><form name="theClock">
<input type=text name="theTime" size=8>
<form></center>
</BODY>
3b)
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("<CENTER>");
document.write("<FORM
NAME=\"Colors\">");
document.write("<select name=\"der_gilb\"
onChange=\"document.bgColor =
this.options[selectedIndex].value\">");
document.write("<option value=\"FFFFFF\"
selected>White");
document.write("<option
value=\"0000FF\">Navy");
document.write("<option
value=\"A0A0A0\">Gray");
document.write("<option
value=\"E9E900\">Yellow");
document.write("<option
value=\"A0A0FF\">Purple");
document.write("<option
value=\"C70000\">Maroon");
document.write("<option
value=\"FFFFA0\">Brown");
document.write("<option
value=\"F0F0FA\">Silver");
document.write("<option
value=\"FF00FF\">Fuchsia");
document.write("<option
value=\"00FFFF\">Blue");
document.write("</select>");
document.write("</FORM>");
document.write("</CENTER>");
// -->
</SCRIPT>
3c) Tarkkaile näytön alareunaa jonkin aikaa...
<SCRIPT LANGUAGE="JavaScript">
function infoscroll(seed,looped)
{
var text1 = "Mitä tekee tämä skripti?";
var text2 = " Huomaatko????";
var msg=text1+text2;
var putout = " ";
var c = 1;
if (looped > 3) {
window.status="<Kysyy Anne...>";
}
else if (seed > 100) {
seed--;
var cmd="infoscroll(" + seed + "," + looped +
")";
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 100 && seed > 0) {
for (c=0 ; c < seed ; c++) {
putout+=" ";
}
putout+=msg.substring(0,100-seed);
seed--;
var cmd="infoscroll(" + seed + "," + looped +
")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100);
}
else if (seed <= 0) {
if (-seed < msg.length) {
putout+=msg.substring(-seed,msg.length);
seed--;
var cmd="infoscroll(" + seed + "," + looped +
")";
window.status=putout;
timerTwo=window.setTimeout(cmd,100); // 100
}
else {
window.status=" ";
looped += 1;
var cmd = "infoscroll(100," + looped + ")";
timerTwo=window.setTimeout(cmd,75); // 75
}
}
}
// -->
<!--
infoscroll(100,1)
// -->
</SCRIPT>