Javascript, lomakkeet ja suojaus

Tässä kurssin viimeisessä luvussa käsittelemme vielä vähän ohjelmointia sekä lomakkeiden tekemisen perusteita.

JavaScript

Dynaamiset sivut (php, asp) sekä Server Side Include ovat järjestelmiä, jotka toimivat palvelimen päässä. Kaikki laskenta ja operointi tapahtuu siis palvelimessa eikä käyttäjän omassa koneessa. JavaScript on taas ohjelmointikieli ja -ympräistö, joka suoritetaan asiakkaan päässä. JavaScriptin avulla voidaan tehdä pieniä näppäriä toimintoja, joilla sivuston selaaminen tehdään helpommaksi ja kivemmaksi. Ja väärin käytettynä rasittavaksi.

JavaScript-ohjelmointikieli pohjautuu ihan oikeaan ja monipuoliseen ohjelmointikieleen eli C-kieleen. Lisäksi se pitää sisällään olio-ohjelmoinnin käsitteitä, joten sen opettelu ihan nollasta ei onnistu ihan muutamassa minuutissa. Mutta onneksi helpommallakin voi päästä - nimittäin kopioimalla sopivia koodipätkiä muualta netistä. Verkossa on useita www-palveluita, joissa on tarjolla valmiita ja loppuun hiottuja JavaScript-ohjelmia, joita voi vapaasti kopioida omaan käyttöön.

Tässä kuitenkin kaksi yksinkertaista esimerkkiä Javascriptin toiminnasta:

Esimerkki 1: sivun viimeinen muutospäivä.

<doctype...>
<html>
<head>
	<title>JavaScript-testi 1</title>
</head>
<body>
<p>Tätä sivua on muutettu viimeksi 
<script language="JavaScript" type="text/javascript">
   document.write(document.lastModified);
   </script></p>

<p>Tekstiä tekstiä tekstiä....</p>
</body>
</html>

Kokeile yllä olevaa koodia kopioimalla se johonkin omaan tiedostoosi. Jos haluat monipuolisemman tulosteen, käytä esimerkiksi seuraavaa koodia:

<head>
<script language="javascript">
 function lastUpdate(){
	var days = new Array(
		"sunnuntai", "maanantai", "tiistai", "keskiviikko", 
		"torstai", "perjantai", "lauantai");
	var modified = new Date(document.lastModified);
	var m_day    = modified.getDay();
	var m_day_m  = modified.getDate();
	var m_month  = modified.getMonth()+1;
	var m_year   = modified.getYear(); 
	var m_hour   = modified.getHours();
	var m_min    = modified.getMinutes();
	if (m_year<1000) m_year = m_year + 1900; 
	if (m_year<2000) m_year = m_year + 100; 
	if (m_month<10)  m_month= '0' + m_month;
	if (m_day_m<10)  m_day_m= '0' + m_day_m;	
	if (m_hour<10)   m_hour = '0' + m_hour;
	if (m_min<10)    m_min  = '0' + m_min;
	document.writeln("Päivitetty viimeksi "); 
	document.write(days[m_day]+"na ") ;
	document.write(m_day_m+".") ;
	document.write(m_month+".") ;
	document.write(m_year);
	document.write(" kello "+m_hour+":"+m_min);
}
</script>
</head>

<body>
<script>lastUpdate();</script>

Esimerkki 2: Suurenna ikkuna koko ruudun kokoiseksi

HUOM! Tämä ei ole lainkaan suositeltavaa, sillä käyttäjän pitäisi itse pystyä kontrolloimaan minkä kokoisia web-ikkunoita hänen tietokoneensa ruudulla on!!

<head>
	<script language="javascript" type="text/javascript">
	function fullscreen () {
		w = screen.availWidth;	// otetaan selville ruudun leveys
		h = screen.availHeight;	// otetaan selville ruudun korkeus
	
		window.moveTo(0,0);	// siirretään ikkuna vas. ylänurkkaan
		window.resizeTo(w,h); 	// suurennetaan ikkuna mahd. suureksi
	}
	</script>
</head>
<body onload="fullscreen()">
...
</body>

Esimerkki 3: Dialogit ja kuittaukset

Javascriptillä voi myös luoda ikkunoita, joilla käyttäjältä voidaan kysellä tietoja tai lähettää tietoja ohjelman kulusta.

<form name=oma_lomake>
<input type=button value="Kokeile" 
onClick="nimi=prompt('Kirjoita nimesi','nimi');
alert('Terve '+nimi+'!')">
</body>
</html>
</form>

Lisää vastaavia täältä sekä täältä

Navigointimenu

Javascriptillä voidaan myös toteuttaa tietokoneohjelmista tuttu navigointimenu, jossa eri valikot ponnahtavat esiin kun hiiren vierittää menun otsikon päälle. Erään esimerkin löydät opettajan vanhoilta työsivuilta.

Javascriptiä käytettäessä tulee ottaa huomioon kaikki ne päätelaitteet, joista syystä tai toisesta ei ole Javascriptiä. Tämä saattaa johtua yhtä hyvin tietoturva-asetuksista kuin itse laitteen ominaisuuksista (esim. kännykkä). Siksi navigointia ei välttämättä kannata toteuttaa yksinomaan Javascriptiin nojautuen, vaan rinnalle kannattaa tarjota sellainen versio, joka toimii myös alkeellisemmissa ja rajoittuneemmissa selaimissa

Sama ilman javascriptiä.

Lomakkeet

Lomakkeet ovat web-sivuja, joissa on tekstin lisäksi elementtejä joiden avulla voidaan käyttäjältä kysellä tietoja. Olet varmaan tällaisiin moneen kertaan jo törmännytkin:

Esimerkki lomakkeesta.

Vikailmoituslomake.

Lomake alkaa form-tunnisteella ja päättyy /form-tunnisteeseen. Näiden välissä saattaa olla tavallista HTML-koodia (p, div, h1, h2...) sekä lomake-elementtejä (textarea, button, menu, option, checkbox...). Kaikissa lomakkeissa on SEND-painiket (submit), jota painamalla lomakkeen tiedot lähetetään palvelimelle käsiteltäväksi.

Lomakkeita ei yleensä tehdä ilman että palvelimen päähän tehdään ohjelma, joka tulkitsee lomakkeen tiedot, tallentaa ne johonkin tietokantaan tai tuottaa vastausten pohjalta uuden HTML-sivun tai -lomakkeen. Näiden toimintojen toteuttaminen vaatii PHP- tai ASP-ohjelmointitaitoja, joten niitä ei tällä kurssilla käsitellä.

JavaScriptin avulla voidaan kuitenkin tehdä jonkinlaista vuorovaikutteisuutta sekoittamalla sitä ja lomakkeita keskenään. Tässä esimerkiksi sellainen lomake, jonka optiovalinnan mukaan selain siirtyy eri www-palveluihin:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>JavaScript Goto Listbox Example</title>
</head>

<body>

<!-- Change the VALUES to your links! -->

<CENTER>
<FORM>

<SELECT NAME="list">

<OPTION SELECTED VALUE="http://www.mikesworld.net">Mike's World
<OPTION VALUE="http://www.netscape.com">Netscape
<OPTION VALUE="http://www.microsoft">Microsoft
<OPTION VALUE="http://www.infoseek.com">Infoseek
</SELECT><P>

<INPUT TYPE=BUTTON VALUE="Go Get It!" 
onClick="location.href=this.form.list.options[this.form.list.selectedIndex].value">

</FORM>
</CENTER>

</body>
</html>

Lähde: http://www.mikesworld.net/jshtml/listboxexample.html

Lisätietoja lomakkeista löydät

tutkimalla netistä löytämiäsi lomakkeita (esim. http://www.karvonen.info/mute/vikailmo/index.html)
lukemalla manuaali- ja ohjesivuja, esim. tästä tai täältä

Sivujen suojaaminen salasanalla

Jos sinulla on käytössäsi unix tai linux-palvelimella pyörivät www-sivut, voit suojata ne tai osan niistä salasanalla. Näin kuka tahansa ei pääse käsiksi tietoihisi. Tästä löytyy valmiit ohjeet opettajan vanhoilta työsivuilta.

Opiskele.com

Valikko

Päivitykset: