På denna sida beskrivs "det inledande" om YUI, bl.a. vad som krävs för YUI samt vad funktionen use() är och hur den används.

Sidans innehåll

Förbereda websida för YUI

För att använda YUI behövs två saker:

Versioner av YUI-filer

Källkodsfiler för YUI finns i lite olika format, bl.a. utvecklings- och produktionsfiler samt olika "fröfiler".

Utvecklings- och produktionsfiler

Bortsett från att det släpps nya versioner av YUI med jämna mellanrum så finns det två olika typer av YUI-filer. Skillnaden mellan dem är att en är i "läsbart" format, d.v.s. är tänkt för utveckling och felsökning, och den andra i komprimerat format (mellanrum och radbrytningar tagits bort), d.v.s. är tänkt för produktion.

"Fröfiler" (seed files)

"Fröfiler" används för att ladda YUI-ramverk, och det finns ett antal olika versioner, bl.a.

Verktyget Loader (som i sin tur använder verktyget Get i bakgrunden) används bl.a. för att ladda ytterligare YUI-moduler då de refereras till.

I denna webbplats har jag tagit bort eventuella versionsnumret i filnamnet eller mappar för att inte behöva redigera alla filer om jag byter version.

Referens till YUI-ramverk

Innan vi anger referens till YUI-ramverk så måste vi avgöra vilken version av fröfil vi ska använda. I ursprunglig mappstruktur i ramverkets ZIP-fil så finns de i en mapp med samma namn, t.ex. /build/yui-base/yui-base-min.js.

För att spara besökares bandbredd (och tid) så kan man ange en referens till YUI-ramverk på en server på Internet, t.ex. hos Yahoo!. (Därmed är sannolikheten större att besökare redan laddat ner ramverket när den besöker sida.)

I exempel nedan refereras till "standardversionen" av YUI-ramverket.

<script type="text/javascript" src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

Ett problem med ovanstående URL är att den laddar en viss version av ramverk, d.v.s. version 3.4.1 i detta fall, och att om man vill använda den senaste versionen av ramverket så måste man ändra URL:er i alla dokument.

"YUI-skript"

"YUI-skript" (som faktiskt är "vanlig" JavaScript) kan t.ex. placeras i webbsidans head-tagg eller innan avslutade body-tagg, men även i en extern fil.

Exempel

I exempel nedan skapas först en instans av YUI-objekt för att sen anropa metoden use() i instansen. Som argument till metod skickas en lista på moduler som ska laddas och en funktion (eng. callback function; ofta en anonym funktion) att anropa när moduler laddats.

I detta exempel används ska modulen Node laddas för att kunna manipulera element (noder). Argument till funktionen (eng. callback function) har kallats Y (enligt "standard"), vilken sen kan användas i funktionen för att t.ex. samla alla H2-rubriker.

<script type="text/javascript">
  YUI().use("node", function(Y) {
      Y.all("h2").setStyle("color: red;");
  });
</script>

<script type="text/javascript" src="my_yui_script.js"></script>

Till början på sida

Konstruktorn YUI() och metoden use()

För att skapa ett YUI-objekt används konstruktorn YUI(), för att sen anropas metoden use() på objektet.

Exempel

I exempel så väljs alla h2-taggar och ges (text-)färgen röd.

YUI().use("node", function() {...});

Till början på sida

JavaScript-relaterat

I detta avsnitt beskrivs en del JavaScript-relaterade saker man behöver förstå, bl.a. konceptet anonyma funktioner.

Anonyma funktioner

En anonym funktion är en funktion utan namn, d.v.s. det går inte att anropa den (om den inte kopplats till något, t.ex. en variabel eller händelsehanterare :-)).

Exempel

Den grundläggande strukturen/koden är följande:

function () { //har saknas namn pa funktion
  //kod i funktion
}

Anonyma funktioner kan bl.a. användas då man inte behöver referera till funktionen vid namn i kod, t.ex. när man kopplar en händelsehanterare till ett elements händelse eller då man skickar en funktion som argument till en annan funktion.

Funktioner är objekt i JavaScript och kan därför skickas som argument till en annan funktion.

Till början på sida

Referenser

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