Takaisin JavaScript-ohjelmoinnin etusivulle


JavaScript: Viisi yksinkertaista JavaScript-toimintoa nettisivuille

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 yksinkertaisen dynaamisen nettisivun perustoimintojen 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 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):









Kuva




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:



Kuva






Takaisin JavaScript-ohjelmoinnin etusivulle