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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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().
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
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.
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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
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.
Eksempel med $
Dette er en hemmelig besked
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
InPlaceEditor (frontend)
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();
}
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
Eksempel med array 1
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);
});
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
Eksempel med array 2
a = $A(document.getElementsByTagName('h2'));
a.each(function(h) {
var li = new Element('li').update(''+h.innerHTML+'');
$('Eksempel-3').appendChild(li);
});
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
Eksempel med hash
h = $H({
fornavn: 'Kenneth',
efternavn: 'Geisshirt',
adresse: 'k@geisshirt.dk'
});
$('Eksempel-4').update(h.keys() + ':' + h.values());
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
Backend-funktion til InPlaceEditor
$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;
Web 2.0 programmering - del 4
(28. sep)Web 2.0 programmering - del 3
(25. sep)Web 2.0 programmering - del 2
(22. sep)Byg dynamiske html-sider med jQuery
(25. maj)Chip med 48-kerner
(05. maj)På elektronik-indkøb i Kina
(25. okt)Bedre værktøjer til mobile medarbejdere
(15. sep)Fakta
Bag om navnet
Navnet prototype hentyder til det faktum, at Javascript ikke bruger klasser til objekt-orienteret programmer. Derimod er Javascript et prototype-baseret sprog, hvor nedarvning sker ved at udvide prototyper, og derved give ny funktionalitet. Fordelen er, at det er muligt at ændre klasser ved runtime, det vil sige på et meget sendt tidspunkt i forhold til udførelsen af koden.
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Emacs og JS2 mode
Emacs er en af de store editorer blandt UNIX/Linux-folk. Personligt er jeg en af dem, som bruger Emacs til næsten alt. Desværre er Javascript ikke særlig godt understøttet af hverken GNU Emacs (version 21 og 22) eller XEmacs.
Dog findes der et fantastisk Javascript-mode, nemlig JS2-mode. Du skal selv downloade og installere det, det er ikke særlig kompliceret, og det er godt beskrevet. JS2 har fin syntax highlightning, og indeholder en lille Javascript-fortolker så det er muligt at finde fejl, inden du gemmer koden. Der er mulighed for at holde kodeblokke ({ ... }) sammen, så det er lettere at overskue store kodefragmenter (tastkombinationen Ctrl-c Ctrl-o).
Fakta
De andre
Prototype hører til en lille håndfuld Javascript-biblioteker, som forsøger at gøre udvikling af web-applikationer på tværs af browsere, lettere. I denne håndfuld finder du også biblioteker som jQuery, mootools, Google Web Toolkit og Yahoo UI som alle distribueres under en Open Source-licens. jQuery er et modent bibliotek, som på mange måder minder om prototype.
Både Nokia og Microsoft har tidligere sagt, at de på forskellig vis vil gøre brug af jQuery, for eksempel vil kommende Nokia-telefoner have jQuery installeret, så telefonen ikke behøver at downloade biblioteker, når burgeren anvender en web-applikation. Mens prototype ser HTML-elementerne som det centrale, har jQuery CSS-klasserne som det centrale. Funktionen $ fungerer langt hen ad vejen som prototypes $$-funktion. Endvidere findes der mange udvidelser/plugins til jQuery.
Fakta
Links
* http://en.wikipedia.org/JavaScript
* http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
* http://www.prototypejs.org - prototypes officielle hjem
* http://script.aculo.us - vigtigt bibiotek med effekter
* http://scripteka.com - katalog med biblioteker
* http://code.google.com/p/js2-mode/ - JS2.mode til Emacs
* http://en.wikipedia.org/wiki/Prototype-based_programming – kort om prototype-baserede sprog
Fakta
Bøger
* Prototype & Scrptaculous in action, Crane et al., Manning 2007
* AJAX in action, Crane et al., Manning 2007
