På denna underwebb beskrivs hur man kan utöka webbsidors funktionalitet med YUI - ett JavaScript-ramverk. (Beskrivningen utgår från jQuery-versionen av denna underwebb, vilket kan förklara dess annorlunda struktur. :-))

Exempelsidor i denna underwebb använder HTML version 5, men JavaScript bör även fungera med HTML 4 och XHTML 1. Därför skrivs "(X)HTML" istället för "HTML och/eller XHTML" för att spara plats och tid. :-)
Observera att denna underwebb använder JavaScript! :-) För att kunna använda underwebbens funktion (främst öppna nya fönster med exempel) krävs att din webbläsare stödjer JavaScript samt att JavaScript inte har inaktiverats! Din webbläsare bör även stödja CSS version 3 - den del som stöddes av Internet Explorer 9 och Firefox 4 till 10.

Även denna underwebb (liksom CSS2 och JavaScript) är designad enbart med stilmallar, d.v.s. inga (X)HTML-tabeller används för design. Denna webbplats är även designad med HTML 5.

Sidans innehåll

Om YUI generellt

JavaScript har genom åren fått ett dåligt rykte, bl.a. då folk inte litar på teknologin (p.g.a. säkerhetrisker och olika funktion hos olika webbläsare) samt att många designers har "överanvänt" teknologin i tron om att deras webbplatser blir "hippare". Stödet för JavaScript har fungerat olika i olika webbläsare, bl.a. gick Microsoft sin egen väg vilket ledde till att designers var tvungna att skriva JavaScript-kod för två olika "modeller". I.o.m. introduktionen av DOM (Document Object Model; och lite tankearbete från intelligentare än mig :-)) så finns det nu ett angreppssätt som gör att vi kan skriva kod för endast en "modell".

Detta är sanning med modifikation, d.v.s. det finns fortfarande en del olikheter mellan webbläsare. För att komma runt detta har ett antal JavaScript-ramverk skapats, bl.a. YUI, jQuery, Prototype och MoJo. Ämnet för denna underwebb är ramverket YUI.

JavaScript-ramverk kan ses som ett enhetligt programmeringsgränssnitt (eng. Application Programming Interface, API) i webbläsare. I ramverket finns ett antal färdiga funktioner, d.v.s. saker som vi inte behöver skriva funktioner för.

Om JavaScript generellt

Ett viktigt begrepp i samband med JavaScript är "elegant nedgradering" (eng. graceful degradation), vilket innebär att en webbplats alltid ska fungera oavsett vilka teknologier besökares webbläsare stödjer (CSS, JavaScript, m.m.). JavaScript bör alltså användas för att utöka upplevelsen av ett besök och inte hindra besökare från att komma åt delar av webbplatsen. Ytterligare ett intressant begrepp är "diskret JavaScript" (eng. unobtrusive JavaScript), d.v.s. JavaScript ska inte vara ett krav för att besöka webbplats samt ska inte vara "påträngande" (reta upp besökare). För att detta ska fungera så måste vi först designa webbplats utan andra teknologier (så som CSS och JavaScript). Först när design (eller snarare struktur) är klar så ändrar vi presentationen med CSS och funktionaliteten med JavaScript (se sidan DOM).

Ett exempel på detta är (om de blir klara) de större exemplen som finns sist i sida. De är en del av sida som döljs med YUI när sida laddas och visas i ett "pop-up"-fönster när besökare klickar på en knapp.

Till början på sida

Om denna underwebb

Denna underwebb har delats upp i följande sidor:

Vad som inte behandlas

Version av YUI i denna underwebb

När denna beskrivning började skrivas så gällde version 3.4.1 av YUI, d.v.s. det finns en stor risk att ny version släppts och att det finns fler (men kanske även mindre) antal metoder. Några metoder kan rent av ha ändrats en del, så se dessa beskrivningar som en introduktion och verifiera eventuella felaktigheter på den officiella webbplatsens dokumentation.

Exempel i denna underwebb

Många exempel ändrar bakgrundsfärg m.h.a. CSS-stilar då detta är mest tydligt. Men YUI kan användas till så mycket mer än att ändra CSS-stilar för element, så använd inte (vissa) exempel som en måttstock på vad som är möjligt. :-)

Några exempel är beskrivningar av faktisk funktionalitet i denna underwebb (eller webbplats) - kan det bli mer praktiskt än så? :-)

Till början på sida

Referenser

Nedan finns några webbsidor/-platser som jag använt för att skapa denna underwebb.