Script nyelvek alkalmazása a webkartográfiában

Gede Mátyás Script nyelvek alkalmazása a webkartográfiában MFTTT, 2007. március 22.

Miről lesz szó: • Webkartográfiai alkalmazások csoportosítása • Mik is azok a scriptek? • Szerver és kliens oldali nyelvek • Szerver oldali scriptek – PHP • Kliens oldali scriptek – JavaScript • Alkalmazási példák • Ajánlott irodalom

Webkartográfiai alkalmazások csoportosítása • Statikus – dinamikus • Igényel – nem igényel speciális beépülő modult (Flash, Java stb.)

Mik is azok a scriptek? Példa: Csináljunk egy weboldalt, ami kiírja 1-től 100-ig a számok négyzetét. Megoldás hagyományos módon: <html><title>Számok négyzete</title> <body> 1*1=1<br> 2*2=4<br> 3*3=9<br> ... ... ... 100*100=10000<br> </body></html> Megoldás JavaScripttel: <html><title>Számok négyzete</title> <body> <script language=”JavaScript”> for(i=1;i<=100;i++) document.writeln(i+’*’+i+’=’+i*i+’<br>’); </script> </body></html>

Szerver és kliens oldali scriptek Script végre-hajtása Eredmény 1. Kliens oldali script HTTP kérés *** *** *** *** *** *** *** *** *** *** *** *** Kért HTML oldal, benne a script Webszerver Felhasználó

Szerver és kliens oldali scriptek Script végre-hajtása Eredmény 2. Szerver oldali script HTTP kérés *** *** *** *** *** *** *** *** *** *** *** *** A script által generált HTML oldal Webszerver Felhasználó

Szerver oldali scriptek - PHP A PHP kód a HTML forráskódba épül be: <html><body> <h1>A 8.A diákjai</h1> <?php $dbl=mysql_connect(’localhost’,’nev’,’jelszo’) or die(’Nem sikerült kapcsolódni’); mysql_select_db(’iskola’,$dbl); $r=mysql_query(”select kod,nev from diakok where osztaly=’8a’;”,$dbl); while($d=mysql_fetch_assoc($r)) print(”Név: {$d[’nev’]}; kód: {$d[’kod’]} <br>\n”); mysql_close($dbl); ?> </body></html> A script eredménye: <html><body> <h1>A 8.A diákjai</h1> Név: Buzás Béla; kód: BB <br> Név: DobosDániel; kód: DD <br> Név: Kis János; kód: KJ <br> Név: Nagy Sándor; kód: NS <br> Név: Puttonyos Miklós; kód: PM <br> Név: Vörös Vilma; kód: VV <br> </body></html> • PHP = Personal Home Page – Hypertext Preprocessor • Fő felhasználás • - Webes adatbázis-felületek • - On-line képgenerálás • - A szerveren tárolt információkhoz való hozzáférés szabályozása

Szerver oldali scriptek - PHP Képgenerálás: <?php header(’Content-type: image/gif’); $i=imagecreate(100,100); $hatter=imagecolorallocate($i,0,0,0); imagecolortransparent($i,$hatter); $zold=imagecolorallocate($i,100,255,100); for($d=0;$d<50;$d+=10) imagerectangle($i,$d,$d,99-$d,99-$d,$zold); imagegif($i); ?> Eredmény:

Térképvázlat generálása adatbázisból:

Kliensoldali scriptek - JavaScript • A Java nyelvvel párhuzamosan kifejlesztett script nyelv • Napjaink minden böngészőprogramja ismeri Þ nem kell hozzá semmilyen plusz modult telepíteni. • Fő felhasználása: • - Menürendszerek és egyéb interaktív tartalom a weboldalakon • - egérkezelés • - böngészőablakok vezérlése (pl. státusz sor; átméretezés; kezelőszervek eltüntetése, megjelenítése stb.) • Hátrányai: • a különböző böngészők kicsit eltérően értelmezik • a böngészőkben le lehet tiltani a script-végrehajtást

Kliensoldali scriptek - JavaScript <html><body> <img src='kep.gif' name=kep style='position:absolute;top:0;left:0'> <script language=JavaScript> js.html var msie=document.all?true:false; function mdown(e) { if (msie) { ex=event.x;ey=event.y; } else { ex=e.pageX;ey=e.pageY; } document.images['kep'].style.top=ey;document.images['kep'].style.left=ex; window.status='x='+ex+' y='+ey; } document.onmousedown=mdown; </script> </body></html>

Alkalmazási példák • PHP: • Egyetemi Digitális Térképtár (EDIT) • Tanszéki GPS kölcsönző rendszer • Tengerfenék-domborzati földrajzi köznevek • JavaScript: • Vetülettani számítások • PHP és JavaScript: • Vakegér játék • Magyarország autótérképe • Vetületrajzolás képlet alapján

Ajánlott irodalom (www) • HTML 4.01 Specification • Cascading Style Sheets, level 2 • PHP kézikönyv • Client-Side JavaScript Reference

A diavetítésnek vége, kattintásra lelépek…

Script nyelvek alkalmazása a webkartográfiában