JavaScript: Viisi yksinkertaista JavaScript-toimintoa nettisivuille

Pyrithän aina siihen, että tekemäsi nettisivut noudattavat ainakin näitä standardeja:



Muistathan, että yllä olevien linkkien tarkoitus on: a) antaa itsellesi mahdollisuus vaivattomasti tarkistaa sivusi, b) antaa sivullasi vierailijoille mahdollisuus tarkistaa sivusi "laatu".

Aloitan tällä ensimmäisellä JavaScript-oppaallani JavaScript-kieltä esittelevien tutoriaalien sarjan. Muista "nettikielistä" kiinnostuneille olen kirjoittanut oppaita Flash / ActionScript 3 -kielelle ja php-kielelle.

JavaScript-kieli soveltuu mitä loistavimmin tämän yksinkertaisen dynaamisen nettisivun perustoiminnon toteuttamiseen. Dynaamisella nettisivulla tarkoitan nettisivua, jonka sisältö päivittyy myös ensilatauksen jälkeen. Puhtaasti staattinen nettisivu taas pysyy muuttumattomana, kunnes sen xhtml-lähdekoodia muutetaan.

Hyvä esimerkki dynaamisen nettisivun tapauksesta ovat tietokantoihin tallennetuista tiedoista päivittyvät nettisivut. Tällöin nettisivujen sisältö päivittyy aina tietokannan sisällön päivittyessä. Tämä on erittäin hyvä lähestymistapa nettisivujen tekemiseen: itse nettisivuja ei tarvitse päivittää, vaan riittää että tietokantaan tallennetut tiedot päivitetään. Ja samaa tietokantaahan voidaan käyttää vaikka tuhannen eri nettisivun päivittämiseen, jolloin säästynyt työmäärä alkaa olla jo hyvinkin merkittävä.

Nettiohjelmoijan on jo noviisivaiheessa hyvä ymmärtää palvelinpuolenohjelmoinnin ja nettiselainohjelmoinnin ero: Palvelinpuolen tietokannat (esim. MySQL) ja kielet (esim. php) sijaitsevat ja suoritettaan palvelimella, jolla nettisivut sijaitsevat. Sen sijaan JavaScript-kieli on nimenomaan kehitetty nettiselainohjelmointia varten. JavaScript-koodi siis suoritetaan nettisivuilla vierailijan tietokoneella sijaitsevalla selaimella. JavaScript- ja php-kielien rinnakkainen käyttäminen muodostaakin nettiohjelmoijalle varsin toimivan työkalupakin, koska kieliä käytetään varsin eri tarkoituksiin.

JavaScript-oppaissani siis tutustutaan etenkin niihin toimintoihin, jotka on järkevintä toteuttaa nettisivuilla vierailijan selaimella. Mutta nyt itse esimerkkeihini:

1) Kellonajan tulostaminen nettisivuille

Toteutetaan nettisivuille tulostuva sekuntikello yhdistelemällä xhtml-, css- ja JavaScript-koodia.

Aloitettaan kellonkasaaminen tekemällä nettisivuille haluttuun kohtaan tyhjä div-elementti:

<div id="timeDiv">
</div>
            

Seuraavaksi lisään div-elementin css-muotoilut sivua vastaavaan css-tiedostoon:

#timeDiv
{
	position: static;
	width: 150px;
	height: 30px;
	font: normal normal bold 18px arial;
	border: double 5px #0000FF;
	text-align: center;
	margin:  0px 0px 0px 0px;
	padding:  5px 0px 5px 0px;
}
            

Nyt on aika muotoilla kello-elementin päivittävät javaScript-funktiot, jotka olen lisännyt ulkoiseen javaScript-tiedostoon basic-javascript-functions.js. Toinen (ei niin suositeltava) tapa, joka toimii lyhyille JavaScript-koodinpätkille on lisätä funktioiden määrittelyt xhtml-sivun head-osioon.

Kyseiset JavaScript-funktiot ovat:

            
function updateclock()
{
	var thetime=new Date();

	var nhours=thetime.getHours();	
	var nmins=thetime.getMinutes();
	var nsecn=thetime.getSeconds();
	
	// add a zero in front of numbers<10
	nmins = checkTime(nmins);
	nsecn = checkTime(nsecn);
	
	var timeDivObj        = document.getElementById('timeDiv');
	timeDivObj.innerHTML  = nhours+": "+nmins+": "+nsecn;
}

function startclock()
{
	setInterval('updateclock()',1000);
}

function checkTime(i)
{
	if (i<10) {
		i = "0" + i;
	}
  	return i;
}            
			

Koska yllä oleva JavaScript-koodi on tallennenttu ulkoiseen .js-tiedostoon on se ladattava itse nettisivuilla, jotta funktioita voidaan käyttää. Tämä ja kellonkäynnistäminen onnistuu helposti xhtml-sivun head-osioon kirjoitettavalla koodilla:

<script src="basic-javascript-functions.js" language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
	startclock();
</script>            
            

Yllä olevalla tavalla toteutettu kellomme näyttää nyt tältä:

2) Sivut päivitetty teksti.

Tämänkin pystyy toteuttamaan sivulleen hyvin lyhyellä JavaScript-koodilla, mutta muunnan tässä esimerkissäni tekstin suomenkieliseksi, jotta voin samalla esitellä myös if-lauseen käytön JavaScript-kielessä. Toteutukseni on alla funktiossa pageModified:

function pageModified()
{
 	var da       = new Date(document.lastModified);
 	var paiva    = da.getDate();
 	var kuukausi = da.getMonth() + 1;
 	var vuosi    = da.getFullYear();  
 	var pm		  = new String("Näitä sivuja on päivitetty " + paiva + ". ");

 	if(kuukausi == 1)
 	{
  		pm = pm + "tammikuuta ";
 	}
 	else if(kuukausi == 2)
 	{
  		pm = pm + "helmikuuta ";
 	}
 	else if(kuukausi == 3)
 	{
  		pm = pm + "maaliskuuta ";
 	}
 	else if(kuukausi == 4)
 	{
  		pm = pm + "huhtikuuta ";
 	}
 	else if(kuukausi == 5)
 	{
  		pm = pm + "toukokuuta ";
 	}
 	else if(kuukausi == 6)
 	{
  		pm = pm + "kesäkuuta ";
 	}
 	else if(kuukausi == 7)
 	{
  		pm = pm + "heinäkuuta ";
 	}
 	else if(kuukausi == 8)
 	{
  		pm = pm + "elokuuta ";
 	}
 	else if(kuukausi == 9)
 	{
  		pm = pm + "syyskuuta ";
 	}
 	else if(kuukausi == 10)
 	{
  		pm = pm + "lokakuuta ";
 	}
 	else if(kuukausi == 11)
 	{
  		pm = pm + "marraskuuta ";
 	}
 	else if(kuukausi == 12)
 	{
  		pm = pm + "joulukuuta ";
 	}
 
 	pm = pm + vuosi + ".";
 	document.writeln(pm); 
}	
                                    
            

Nyt päivämäärätekstin saa tulostettua nettisivuilleen haluttuun kohtaan hyvin lyhyellä JavaScript-koodilla:

<script language="javascript" type="text/javascript">
	pageModified();
</script>            
                        
            

Yllä oleva funktio tulostaa nettisivuille tekstin:



3) Navigointivalikon tekeminen nettisivuille.

Olen tälle sivustolleni toteuttanut jokaiselle pääsivulle (tämä on alisivu) navigointipalkin ( katso JavaScript-ohjelmoinnin pääsivu ). Opastan nyt kuinka samanlaisen navigointipalkin voi toteuttaa omille nettisivuilleen. Tässä esimerkissäni tosin navigoinnin sijaan vaihdan valikosta sivulla näkyvää perhosen kuvaa, mutta sama pohja toimii myös sivujen navigointiin.

Kirjoitetaan ensin nettisivuille tuleva xhtml-koodi paikkaan, johon valikko halutaan sijoittaa. Valikko on hyvä sijoittaa tunnukselliseen div-elementtiin, jolloin sen muotoilu ja sijoittelu stylesheetin avulla on helppoa. Nettisivuille kirjoitettava xhtml-koodi on seuraavanlainen:

<a name="image_location"></a>            
<div id="menu">

	<dl>

	<dt onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
        	Perhoset
	</dt> 

	<dd id="smenu1" onmouseover="javascript:show('smenu1');" 
	onmouseout="javascript:show('');">
                
	<ul>
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/amiraali-12.jpg';" href="#image_location">Amiraali</a>
        </li>
        
        <li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/herukkaperhonen-4.jpg';" href="#image_location">Herukkaperhonen</a>
        </li>                           
                    	
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/nokkosperhonen-7.jpg';" href="#image_location">Nokkosperhonen</a>
        </li>
						
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/piippopaksupaa-20.jpg';" href="#image_location">Piippopaksupää</a>
        </li>
                        
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/ratamoverkkoperhonen-1.jpg';" href="#image_location">Ratamoverkkoperhonen</a>
        </li>    
					
	</ul>
	</dd>        
            
</dl>
<dl>	

	<dt onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
		Kasvit
	</dt>

	<dd id="smenu2" onmouseover="javascript:show('smenu2');" 
	onmouseout="javascript:show('');">

	<ul>
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/harakankello-2.jpg';" href="#image_location">Harakankello</a>
        </li>
        
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/kaenkaali-2.jpg';" href="#image_location">Käenkaali</a>
		</li>
                        
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/niittynatkelma-1.jpg';" href="#image_location">Niittynätkelmä</a>
		</li>
                        
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/nurmitadyke-2.jpg';" href="#image_location">Nurmitädyke</a>
		</li>
                       
		<li><a onclick="document.getElementById('menu_pic').src 
		= 'pics/pietaryrtti-2.jpg';" href="#image_location">Pietaryrtti</a>
		</li>             				
				
		</ul>		
        </dd>
</dl>
</div>
<br /><br /><br /><br /><br /><br />
           
<img id="menu_pic" src="pics/piippopaksupaa-20.jpg" alt="Kuva"/>
</center>
<br /><br /><br /><br />
            
            

Seuraava askel on kirjoittaa valikon ulkoasun asetukset omaan .css-tiedostoonsa seuraavilla riveillä:

dl, dt, dd, ul, li {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	list-style-type: none;
}

#menu {
	position: static; 
	margin-top: 0px;
	height: 25px;
	width: 300px;
	font: normal normal bold 14px arial;
	color: #0000FF;
	background: #fef6ae;
	z-index: 100;
	text-align: center;
}

#menu dl{
	float: left;
	width: 150px;
}

#menu dt {
	cursor: pointer;
	margin: 2px 0px 0px 0px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font: normal normal bold 14px arial;
}

#menu dd {
	border: 1px solid gray;
}

#menu li {
	text-align: center;
	background: #fff;
}

#menu li a, #menu dt a {
	color: #000000;
	text-decoration: none;
	display: block;
	border: 0 none;
	height: 100%;
	font: normal normal normal 12px arial; 
}

#menu li a:hover, #menu dt a:hover {
	background: #eee;
	font-weight: bold;
}

            

Nyt valikko on aseteltu paikoilleen nettisivuilla ja sen ulkonäkö on määritelty. Jäljellä jää enää valikon toiminnallisuuden toteuttaminen omassa javaScript-funktiossaan. Kaikeksi onneksi tämä on itse asiassa toteutuksen yksinkertaisin ja helpoin osa, kuten alla olevasta funktiosta voi nähdä:

function show(id) {
	var d = document.getElementById(id);
	for (var i = 1; i<=2; i++) {

		if (document.getElementById('smenu'+i)) {
			document.getElementById('smenu'+i).style.display='none';
		}
	}
	
	if (d) {d.style.display='block';}
}            
            

Olen jälleen sijoittanut tämän funktion ulkoiseen JavaScript-tiedostoon basic-javascript-functions.js , joten käytettäessä funktiota ulkoinen tiedoston on ladattava ensimmäisessä esimerkissä selostamallani tavalla.

Oleellista show-funktiossa on huomioida ERITTÄIN HYÖDYLLISEN getElementById-funktion käyttö. Pelkästään käyttämällä nettisivujen xhtml-elementeille tunnisteita (id) ja asettamalla getElementById-funktion avulla elementtien sijainnin ja tyylin voi nettisivuille toteuttaa hyvinkin näyttäviä ja hyödyllisiä toimintoja.

Toinen tähän esimerkkiini tarkoituksella lisäämäni piirre on xhtml-koodiini upottama a-linkkitagin onclick-attribuuttiin laittama JavaScript-koodirivi. Nettisivujen eri elementteihin on helppo liittää interaktiivisia toimintoja lisäämällä toiminnon toteuttava JavaScript- koodi kyseisen elementin (vaikka yksinkertainen div-elementti) onclick, onmouseover, onmouseout, jne... attribuutteihin. Jos attribuuttiin tulee vähänkään enemmän JavaScript-koodia on ehdottomasti paras tapa kirjoittaa tämä koodi ulkoisessa tiedostossa sijaitsevaan funktioon ja lisätä xhtml-attribuuttiin ainoastaan tämän funktion kutsu. Yksi mainitsemista onclick-attribuuteista on alla:

<li><a onclick="document.getElementById('menu_pic').src = 'pics/harakankello-2.jpg';" 
href="#image_location">Harakankello</a></li>            
            

Kolmas nettiohjelmoijalle hyödyllinen asia on tietää miten joku "alustusfunktio" voidaan kutsua, kun nettisivu ladataan. Tämä käy helposti kirjoittamalla xhtml-koodin head-osioon seuraavasti (jos käytetään show-nimistä funktiota):

<script language="JavaScript" type="text/javascript">
<!--
	window.onload=show;
-->
</script>                         
             

Lopullinen yllä kuvatunlaisen valikko näyttää nyt tälle sivulle upotettuna tältä (kokeile valikkojen toimintoja):

Perhoset

• Amiraali
• Herukkaperhonen
• Nokkosperhonen
• Piippopaksupää
• Ratamoverkkoperhonen

Kasvit

• Harakankello
• Käenkaali
• Niittynätkelmä
• Nurmitädyke
• Pietaryrtti

4) Lomakkeen syötetietojen tarkastaja:

JavaScript-kieli soveltuu hyvin lomakkeissa annetun syötteen tarkistamiseen, koska tarkastus voidaan JavaScriptin avulla tehdä jo nettisivuilla vierailijan omalla koneella ennen kuin syöte lähetetään palvelimelle käsiteltäväksi (jos lähetetään. Tässä esimerkissä syöte käsitellään myös JavaScript-koodilla käyttäjän omassa selaimessa.)

Tehdään ensin hyvin yksinkertainen xhtml-lomake (form), jolla käyttäjä voi antaa sivulle tulostuvan kuvan vasemman yläkulman koordinaatit sivulle piirretyn boksin suhteen:

<a name="coordinates"></a>
<div id="formDiv">            
	<form id="positionForm" action="javascript-perusfunktiot#coordinates">
	Aseta alla olevan kuvan paikka X = 0 ... 100, Y = 0 ... 100 <br /><br />
	Kuvan X-koordinaatti: <input id='XID' type='text' name='XCOORD' size='5' /><br />
	Kuvan Y-koordinaatti: <input id='YID' type='text' name='YCOORD' size='5' /><br /><br />
	<input type='button' onclick="process_form();" name='submit' value='Lähetä' />
 	</form>  
	<br /><br />
    
	<div id="formImageDiv">       
		<img id="formImage" src="pics/niittynatkelma-1.jpg" alt="Kuva"/>
	<div/>
</div>          
            
            

Lisätään seuraavaksi stylesheet-tiedostoon (.css) elementtejä vastaavat muotoilut:

#formDiv
{
	position: static;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

#formImageDiv
{
	position: static;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: solid 2px #000000;
	width: 340px;
	height: 340px;
	text-align: left;
}

#formImage
{
	position: static;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
}

            

Lopuksi on enää jäljellä lomakkeen tarkistuksen suorittavan JavaScript-funktion process_form kirjoittaminen ulkoiseen javaScript tiedostoon basic-javascript-functions.js . Esimerkkiäni varten kopioin isNumeric-funktion sellaisenaan tästä JavaScriptiä käsittelevästä tutoriaalista. Yksi periaatteni koodaamisessa onkin: pyörää ei kannata joka kerta keksiä uudestaan, mutta keksijä on syytä mainita joka kerta.

Alla on process_form- ja isNumeric-funktioiden toteutukset:

function process_form()
{
    var valid = true;

    if ( document.getElementById("XID").value == "" )
    {
        alert ( "X-Koordinaatti ei saa olla tyhjä!" );
        valid = false;
		return valid;
    }
	
	if ( document.getElementById("YID").value == "" )
    {
        alert ( "Y-Koordinaatti ei saa olla tyhjä!" );
        valid = false;
		return valid;
    }
	
	if( isNumeric(document.getElementById("YID"), "Y-koordinaatin pitää olla numero!") == false)
		return valid;
		
   	if( isNumeric(document.getElementById("XID"), "X-koordinaatin pitää olla numero!") == false)
		return valid;
	
	var Xvalue     = document.getElementById("XID").value;
	var Yvalue     = document.getElementById("YID").value;
	var XvalueInt  = parseInt(Xvalue);
	var YvalueInt  = parseInt(Yvalue);
	
	if( (XvalueInt < 0) || (XvalueInt > 100) )
	{
		alert ( "X-Koordinaatin arvo pitää olla välillä 0 ... 100" );
        valid = false;
		return valid;
	}
	
	if( (YvalueInt < 0) || (YvalueInt > 100) )
	{
		alert ( "Y-Koordinaatin arvo pitää olla välillä 0 ... 100" );
        valid = false;
		return valid;
	}
	
	document.getElementById("formImage").style.marginTop  =  Yvalue + 'px'; 
	document.getElementById("formImage").style.marginLeft =  Xvalue + 'px';
	
	if( valid == false)
    	return valid;
		
	return valid;
}

function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

            

Lopullinen syötteen käsittelijämme on nyt nähtävissä alla:

Aseta alla olevan kuvan paikka X = 0 ... 100, Y = 0 ... 100

Kuvan X-koordinaatti:
Kuvan Y-koordinaatti:

5) Liikuteltava perhonen

Tämä viimeinen esimerkkini ei itseasiassa kuulu kategoriaan helpot javaScript-toteutukset, mutta helpon meille siitä tekee, että Tim Taylor on nettisivullaan http://tool-man.org/examples/dragging.html esitellyt toimivan JavaScript-toteutuksen xhtml-elementtien liikuttelemiseksi nettisivuilla.

Meille siis riittää tätä esimerkkiä varten, että osaamme liittää tämän toteutuksen nettisivullemme. Aloitetaan lisäämällä alla oleva JavaScript-koodi xhtml-sivun head-osioon:

<script language="javascript1.2" type="text/javascript">
<!--
var delay = 100;

window.onload=function()
{
	var group;
  	var coordinates = ToolMan.coordinates();
 
  	var drag1 = ToolMan.drag();
  	var boxDrag1 = document.getElementById("butterflyImg2Div");
  	drag1.createSimpleGroup(boxDrag1);
	
	document.getElementById("butterflyImg2Div").style.top = "0px";
	document.getElementById("butterflyImg2Div").style.left = "0px";
	
	show();
	
	start = setInterval("updateGame()",delay);
	
}

document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = captureMousePosition;            
-->
<script/>            
            

Alustamme siis nettisivua ladattaessa (window.onload) yllä olevassa nimettömässä funktiossa xhtml-elementin liikuttelun toteuttavan Tim Taylorin tekemän JavaScript-koodin ja olen lisännyt tähän oman updateGame-funktion, joka tulostaa perhosen koordinaatit ruudulle:

function updateGame()
{
	var butterfly2CurrentTop  = parseInt(document.getElementById("butterflyImg2Div").style.top);
	var butterfly2CurrentLeft = parseInt(document.getElementById("butterflyImg2Div").style.left);
	if( (butterfly2CurrentTop >= 0) && (butterfly2CurrentTop < 580) && (butterfly2CurrentLeft >= 0)
		&& (butterfly2CurrentLeft < 700) )
	{
		document.getElementById("positionBox").innerHTML  
		= "Kuvan vasemman ylänurkan koordinaatit rajatussa laatikossa ovat<br /><br />X =" 
		+ butterfly2CurrentLeft + ", Y = " + butterfly2CurrentTop;
	}
	else
	{
		document.getElementById("positionBox").innerHTML  
		= "Kuvan vasen ylänurkka on rajatun laatikon ulkopuolella."
	}	
}            
            
            

Näiden koodilisäysten jälkeen pitää lisätä kyseiset xhtml-elementit haluttuun kohtaan nettisivuille xhtml-koodilla:

<center>
	<div id="ImgBg">
		<div id="butterflyImg2Div">
		<img src="../pics/butterfly-3.gif" alt="Ratamoverkkoperhonen" />
		</div>
                        
		<div id="positionBox">
		</div>
	</div>
</center>            
            
            

Lopuksi asetetaan xhtml-elementien paikat ja tyylit kohdalleen stylesheet tiedostossa:

            
#ImgBg
{
	position: absolute;
	top: 12900px;
    left: 0px;	
	width: 700px;
	height: 580px;
	border: dotted;
	text-align: left;
    margin: 0px 0px 0px 75px;
	padding: 0px 0px 0px 0px;
}

#butterflyImg2Div
{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 100;
	
}

#positionBox
{
	position: absolute;
	top: 25px;
	right: 25px;
	width: 200px;
	height: 125px;
	border: dotted;
	text-align: left;
}
            

Nyt liikuteltava perhonen onkin valmis laitettavaksi osaksi tätä nettisivua. Samalla päätän tämän ensimmäisen JavaScript-oppaani. Toivottavasti tästä on hyötyä mahdollisimman monelle. Itse olen taas tätäkin tehdessä oppinut jälleen monta uutta asiaa. Palautetta tästä tutoriaalista voi lähettää osoitteeseen talaakso@gmail.com .

Takaisin JavaScript-ohjelmoinnin etusivulle