Home » Andet » Web 2.0 programmering – del 1
Web 2.0 programmering – del 1

Web 2.0 programmering – del 1

Share

Web 2.0, AJAX og brugervenlige web-applikationer, som
Facebook, Flickr og YouTube, er tidens store tendens. I denne serie kigger vi
nærmere på, hvordan du selv kan udvikle de nye spændende web-applikationer.

At udvikle spændende programmer, der, som Facebook, Flickr og YouTube, er web 2.0-applikationer, kan være svært. Tidligere har vi her i bladet vist, hvordan du kan bruge AJAX (Asynchronous Javascript And Xml) til at kode til web’en, men det kan munde ud i meget kluntet kode at skrive selv enkelte AJAX-kald. Kluntetheden kommer både fra Javascripts mangel på smarte datastrukturer, og det faktum at forskellige browsere implementerer http-forespørgelser på meget forskellige måder.

Endvidere vil du sikkert gerne have forskellige effekter i dine web-applikationer. Det kan være noget så elementært som knapper, der er inaktive, indtil det giver mening, at de er aktive. Eller måske ligefrem drag-and-drop af data fra et sted til et andet på dine sider. Sådanne effekter skal kodes i Javascript, og de er ikke alle lette og elegante.

Heldigvis er der andre end dig og mig, som har disse behov. Og blandt nogle af de andre, er der folk, som er i stand til at udvikle omfattende libraries, som gør livet som web-udvikler meget lettere. I denne artikelserie vil du skifte bekendtskab med det ene af disse bibliotekter, nemlig prototype (se infoboks ”Bagom navnet” for lidt baggrund).

Mens prototype er et basis-bibliotek til udvidelse af Javascript, håndtering af DOM (Document Object Model) og især AJAX, findes der en lang række biblioteker, som bygger ovenpå prototype. En lille del af disse biblioteker vil du også skifte bekendtskab med i denne serie. Prototype og ”vennerne” har den fordel, at de kommer under en eller anden open source licens (typisk en MIT-licens), hvilket betyder, at du kan downloade dem, bruge dem i dine web-applikationer og foretage de ændringer, som du har brug for – kvit og frit.

I infoboks ”De andre” kan du læse lidt om andre Javascript-biblioteker, som har samme fokus som prototype.

Applikationen

Til denne serie er der udviklet en lille web-applikation. Det er et fotosite, hvor en administrator kan uploade billeder. Endvidere kan administratoren tilføje et antal tags til hvert billede, og det er muligt at redigere billedet en smule, for eksempel beskære det. Besøgende kan søge efter billederne ved hjælp af tags ved at klikke på dem, og derved gøre søgningen mere præcis.

Langt den meste funktionalitet er programmeret ved hjælp af Javascript, men hvor der er brug for backend-kode er valget faldet på PHP. Endvidere er MySQL brugt som database, mens billederne er placeret på serverens filsystem.

Javascript er på mange måder et godt programmeringssprog. Det er en stor misforståelse, at det har noget med Java at gøre, det er ikke en nedgraderet udgave af Java. Javascript har klare rødder i C, og enhver C-programmør vil hurtigt føle sig hjemme.

[pt id=’2003455′ size=’large’ link=’file’ html_attrs=’title=”Administrationsdelen af min lille foto-applikation.”‘]

Administrationsdelen af min lille foto-applikation.

Sproget har et par fine finesser. Den første er objekt-systemet, som er et prototype-baseret system. Objekt-begrebet er ikke det bedste ved Javascript, men derimod funktionsbegrebet. Funktioner er nemlig førsterangs-medlemmer i sproget. Det betyder, at funktioner kan tage funktioner som argumenter og tildele en funktion som ”værdi” til en variable for siden at kalde den ved hjælp af variablen. I C er det ikke let (det involverer pointers til funktioner og andet grimt). PHP har variabel-funktioner, men disse virker ikke i alle situationer, og kræver stadig en særlig syntax for at kalde sådan en funktion.

Se også:  Efter ferien: Få samlet alle oplevelserne

Gennem Javascript har du adgang til browserens DOM. DOM er et træ af objekter som repræsenterer den aktuelle side, og med Javascript er det muligt at ændre siden. Det betyder, at du kan tilføje, fjerne, skjule og ændre dele af, hvad brugeren ser, uden at din server skal generere en ny side. Det er DOM-håndteringen, som gør de nye, og interaktive, web-applikationer mulige.

Det magiske $

At arbejde med browserens DOM er ofte besværligt. For at få fat i et bestemt element eller undertræ, skal du bruge metoden document.getElementById, og det bliver hurtigt til mange tastetryk i din applikation. Her kommer prototype med en stor hjælp, nemlig den magiske $-funktion. I dens enkle form erstatter den document.getElementById. Funktionen $ returnerer et HTML-element, og i prototype er HTML-elementer objekter (af klassen Element).

Fordelen ved disse objekter er, at de har en lang række metoder erklæret. Enhver metode i Element-klassen returnerer altid et Element-objekt, så du kan let skrive selv lange manipulationer på én linje.

I infoboks ”Eksempel med $” finder du et lille HTML-fragment. Klikker du på knapperne, kaldes meget små Javascript-programmer, i begge bruges $(‘eksempel-id’) til at få fat i den DIV med beskeden. Funktionen show sætter et element synligt, mens update ændrer på, hvad der er inden i et element. Måske ville det være lettere at overskrive elements innerHTML property, hvilket også er muligt med prototype. Men det gode ved update er, at funktionen returnerer et Element-objekt, så du blandet andet kan skrive $(‘eksempel-id’).update(‘Ny tekst’).show().

Har du en baggrund i Perl eller PHP, virker $-funktionen meget naturlig, da den hurtig kommer til at minde om en variabel.

Arrays og hashes

Det er i standard-Javascript muligt at have arrays. Det vil sige lister af data af samme type. Desværre er Javascripts array noget begrænsede, for eksempel er de altid indekseret med heltal, og uden huller. Det er nok meget naturligt for en C-programmør, men for en PHP-programmør er det meget begrænsende.

Heldigvis udvider prototype arrays i sådan en grad, at det er en fornøjelse at kode i Javascript. I infoboks ”Array eksempel 1” kan du se, hvor elegant det er muligt. Funktionen each er en iterator som løber gennem alle elementerne og udfører en (anonym) funktion på hvert element. Arrays udvides en del med prototype, så each er ikke den eneste nye funktion. Du får også funktioner som reverse (omvendt rækkefølge), sort (sortering), join (sætter elemeterne sammen til en streng), flatten (array af arrays gøres til et en-dimensional array).

I infoboks ”Array eksempel 2” finder du en anden lækker funktion i prototype, nemlig $A. Den er i familie med det magiske $, og den bruges til at gøre array-lignende datastrukturer til et array. En array-lignende datastruktur er typisk noget, som kan tælles på en eller anden måde.

I eksemplet findes alle HTML-tags af typen H2 og $A opretter et array med dem. Nu er det en enkel sag at løbe alle disse overskrifter igennem med each.

[pt id=’2003458′ size=’large’ link=’file’ html_attrs=’title=”inplaceeditor-1.png og inplaceeditor-2.png: InPlaceEditor kan bruges til at lade brugeren rette mindre tekstområder i en web-applikation.”‘]

inplaceeditor-1.png og inplaceeditor-2.png: InPlaceEditor kan bruges til at lade brugeren rette mindre tekstområder i en web-applikation.

Mens arrays bruger heltal som indeks, er det i prototype også muligt have hash-arrays. Et hash-array er et array af nøgle/værdi-par, og du bruger nøglen til at finde værdien. I infoboks ”Hash eksempel” finder du et lille eksempel, som viser, hvordan $H opretter et hash-array. Funtionen keys returerer et array af nøgler, mens values giver dig værdierne.

Se også:  Under ferien: Beskyt dit udstyr i ferielandet

CSS-klasser

Cascading Style Sheet (CSS) er meget anvendt i web-applikationer, både til at styre udseende (præsentation) og funktionalitet. Prototype har naturligvis understøttelse for CSS i objektmodellen. Med funktionen setStyle kan du sætte et elements style. For eksempel kan du sætte baggrundsfarven med setStyle({backgroundColor: ‘#00FF00’}).

Men vil du sætte CSS-klasse på et element, skal du bruge funktionen addClassName, for eksempel tilføjer du CSS-klassen bar til elementet med ID foo med koden $(‘foo’).addClassName(‘bar’). Browseren vil ændre sidens udseende, når du ændre CSS-klassen på et element, og det kan derved give en effekt at bruge Javascript til at skifte CSS-klasse. Et HTML-element kan have flere CSS-klasser, og du kan fjerne en klasse med funktionen removeClassName (med klassenavnet som argument). Endvidere kan du få et array med alle CSS-klasserne med koden $w($(‘foo’).className)). Funktionen $w splitter en streng op i et array af strenge, hvor mellemrum (og tabulator) bruges som skilletegn.

Har du derimod brug for at få en liste (array) over alle elementer med en bestemt CSS-klasse, findes der $$-funktionen. I denne funktion kan du bruge de sædvanlige CSS-regler. Det betyder, at $(‘foo’) er det samme som $$(‘#foo’), og du kan få alle elementer med CSS-klassen bar med $$(‘.bar’) (bemærk punktum).

Prototype er fundamentet som mange andre Javascript-bibliotekter bygger på. Et af disse er Scriptaculous, som indeholder funktioner med effekter, nogle mere pudsige end praktiske. En meget praktisk funktion er InPlaceEditor. Hvis du kender for eksempel Facebooks statuslinje, hvor du kan redigere den ved at klikke på linje og gemme uden at skulle igennem en genindlæsning af siden, så ved du, hvad en InPlaceEditor er.

I foto-applikationen til denne serie bruges InPlaceEditor rigtig mange steder, fordi det giver et naturligt og effektivt flow for brugeren (primært administratoren/ejeren af applikationen). En InPlaceEditor er i virkeligheden et AJAX-kald, men er pakket pænt ind, så du ikke behøver at vide så meget om AJAX (du vil lære mere om AJAX i næste afsnit i denne serie). I infoboks ”InPlaceEditor (frontend)” kan du se, hvor lidt kode, der skal til. Funktion sætter administrationsdelen op i min foto-applikation, og overskriften og foden kan ændres med hver sin InPlaceEditor.

Tricket i en InPlaceEditor er at have en lille funktion på web-serveren, som tager sig af det, brugeren taster ind. I infoboks ”Backend-funktion til InPlaceEditor” finder du PHP-kode, som tager værdien af, hvad brugeren indtaster (sendes i HTTP-variablen value), gemmer det i en konfigurationsfil, samt sender det tilbage til web-browseren med funktionen echo til slut.

Næste gang

Med denne artikel har du fået en introduktion til prototype, men der er mange andre emner at tage fat på. Næste artikel i serien vil tage AJAX under en grundigere behandling. Prototype gør det meget enklere at skrive AJAX-kald i Javascript.

<div>
<div id=”eksempel_id” style=”display:none”>
<p>Dette er en hemmelig besked</p>
</div>
<input type=button value=’Klik her’ onClick=”$(‘eksempel_id’).show()”>
<input type=button value=’Ny tekst’ onClick=”$(‘eksempel_id’).update(‘Dette er ikke så hemmeligt.’)”>
</div>

function setupAdmin() {
setupPage();
new Ajax.InPlaceEditor(‘headline’, ‘/zphoto/admin/settitle.php’, {cols: 50});
new Ajax.InPlaceEditor(‘footer’, ‘/zphoto/admin/setfooter.php’, {cols: 50});
loadTags();
loadPhotosToScroller();
}

a = [‘Januar’, ‘Februar’, ‘Marts’, ‘April’, ‘Maj’, ‘Juni’, ‘Juli’, ‘August’, ‘September’, ‘Oktober’, ‘November’, ‘December’];
a.each(function(m) {
var li = new Element(‘li’).update(m);
$(‘Eksempel-2’).appendChild(li);
});

a = $A(document.getElementsByTagName(‘h2’));
a.each(function(h) {
var li = new Element(‘li’).update(‘<i>’+h.innerHTML+’</i>’);
$(‘Eksempel-3’).appendChild(li);
});

h = $H({
fornavn: ‘Kenneth’,
efternavn: ‘Geisshirt’,
adresse: ‘k@geisshirt.dk’
});
$(‘Eksempel-4’).update(h.keys() + ‘:’ + h.values());

$value = $_REQUEST[‘value’];
$cfg = parse_ini_file(‘../config.ini’);
$cfg[‘title’] = $value;
$fh = fopen(‘../config.ini’, ‘w’);
fwrite($fh, “[main]n”);
foreach ($cfg as $k => $v) {
fwrite($fh, $k.” = “”.$v.””n”);
}
fclose($fh);
echo $value;

[themepacific_accordion] [themepacific_accordion_section title=”Fakta”]

Bag om navnet

[/themepacific_accordion_section] [themepacific_accordion_section title=”Fakta”]

Emacs og JS2 mode

[/themepacific_accordion_section] [themepacific_accordion_section title=”Fakta”]

De andre

[/themepacific_accordion_section] [themepacific_accordion_section title=”Fakta”]

Links

[/themepacific_accordion_section] [themepacific_accordion_section title=”Fakta”]

Bøger

[/themepacific_accordion_section] [/themepacific_accordion]


TAGS
Guide
jQuery
prototype
Web 2.0

DEL DENNE
Share

Seneste Tech test
Seneste konkurrencer

Mest populære
Populære
Nyeste
Tags

Find os på de sociale medier

Modtag dagligt IT-nyhedsbrev

Få gratis tech-nyheder i din mail-indbakke alle hverdage. Læs mere om IT-UPDATE her

Find os på FaceBook

Alt om DATA

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@altomdata.dk

Datatid TechLife

Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
redaktion@datatid.dk

Audio Media A/S

CVR nr. 16315648,
Lautrupsgade 7,
DK-2100 København Ø
Telefon: 33 91 28 33
info@audio.dk
Annoncesalg / Prislister:
Lars Bo Jensen: lbj@audio.dk Telefon: 40 80 44 53
Annoncer: Medieinformation


Alt om DATA, Datatid TechLife  © 2019
Privatlivspolitik og cookie information - Audio Media A/S