jQuery

Om du inte redan gjort det ladda ner Firefox och använd som webläsare.

Ladda seda ner add-in som heter webdeveloper.

Installera

Dag 0

Lek med jQuery för att se vad det kan göra.

På den här länken finns en enkel javascript kompilator så du enkelt ser vad du kan göra med 
Här har du allt du behöve för att börja koda med jQuery


Dag 1

progressive enhancement

Det här betyder att så många som möjligt ska kunna utnyttja din sida. De som har en modernare webläsare ska kunna ha nytta av coola effekter som snygga bildgallerier och menyer. De med äldre webläsare ska kunna navigera hjälpligt på sidan.

Berika sidor med ECMA-script.

Vi ska lära oss att använda script för att utföra sådant på sidan där inte css/html räcker. Tex en rikare upplevelse på sidan som snygga bildgallerier eller spara bandbredd genom att minimera anrop till en webserver.

jQuery

JavaScript

Java

jQuery

Ladda ner jQuery här (högerklicka och spara på ett bra ställe)

Du kan använda min template eller så kan du spara om din Gösta sida.

Övning 1

Vi ska installera jQuery och kolla så det funkar.

lägg till den här kodraden någonstans i <head>

<script type="text/javascript" src="/jquery-1.10.2.js"></script>

Som du förstår så läser den här raden in jQuery till din sida.

Vi ska göra rätt från början och lägga till en separat fil med kod. 

Skapa en ny fil i notepad++ (ctrl+n).

Välj språk Javascript.

Spara som minkod.js

lägg till den här kodraden någonstans i <head>

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

Lägg till den här koden i minkod.js

$(document).ready(function () {

// här ska vi lägga in kod

});

Ta bort "// här ska vi lägga in kod" och skriv istället.

alert('jQuery funkar').

http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers

Hjälp till uppgiften

Enkel nybörjarsida kolla hur de har gjort

Här har du allt du behöver veta om jQuery

En serie som går igenom hela grunderna

Övning 2

Vi ska titta på det här funktionerna.

Show, Hide, slideDown, slideUp,

Jobba själv

Skapa de här beteenden.

Övning 1.

Lägg in lite text och en rubrik med h1. Lägg till jQuery som gör så att h1 ändrar färg när du klicka på tex en knapp.

Övning 2

Lägg till en klass som får din rubrik att ändra font-size till 400%.

Övning 3

Skapa två paragrafer. När du klickar på en knapp med texten läs mindre försvinner en paragraf. När du klickar igen kommer texten tillbaka.

Övning Webdesigner wall

Kolla den här länken och se hur de har gjort och testa funktionerna.


Dag 2 Webdesignerwall och Plug-in

Toggle

Toggle är jQuery funktion som fungerar som en av/på knapp. Första gången du klickar slår du av synligheten på ett element, andra gången slår du på igen.

Lägg till två paragrafer till din html. Skapa något som du clickar på som slår av och på synligheten på den sista texten.

Här har du dokumentatione för toggle

Webdesingerwall

Webdesignerwall är en sida med mycket tips, tricks och tutorial för webutvecklare.

Kolla på webdesingerwall hur de har byggt några olika jQuery funktioner. Välj den du tycker verkar passa bäst och gör den själv.

Ändra den lite grann. Tex lägg in lite bilder eller få det att se lite annorlunda ut.

Webdesingerwall

Byta stylesheet med jQuery. (lite svårare)

jQuery kan användas för att byta stylesheet på din sida. Skapa två stylesheet i notepad, en för dagtid och en för natttid.

 spara som tex day.css och natt.css

Skapa en knapp som gör att du kan byta mellan dag och natt.

Det här är en förenkling av övningen som du hittar här.

Tutorial ändra stylesheet.

Här nedan har jag två bilder, en nattbakgrund och en dagbakgrund.

Hur det funkar.

1) Skapa två stylesheet ett för dag theme och ett för natt theme.

2) Gör en knapp som låter dig ändra mellan de båda theme.

3) För att lyckas måste du kunna den här jQuery koden .attr kolla hur den funkar på dokumentationen.

4) tex så här

$('.day').click(function() {

$('link').attr('href','morning.css');
});

Förklaring: jag har skapat två knappar med olika klasser som förändrar link tag, som läser in min stylesheet.

Ladda in galleria (lite krånglig)

Ett vanligt sätt att använda jQuery är att ladda ner och installera plug-in som andra redan har skrivit. För det mesta används bildgallerier och menyer.

Vi ska ladda ner en slide-box.

Här kan du ladda ner plug-in galleria.

Plug in (min sida som förklarar hur du gör)

Tips är att noga gå igenom dokumentationen.


 

Examinerande uppgift jQuery

 

 


 

TV och Dator i din mobil!

ComHem kör en ny kampanj "TV och Dator i din mobil". De marknadsför att det 
går att streama en del av deras tjänster direkt i mobilen. Om man tecknar upp sig för comhem får man välja en av fyra mobiltelefoner.

 

De vill att du ska utforma en webplats för den kampanjen. Det är speciellt noga med det här;

 

Skapa ett Form någonstans på sidan.

Det ska finnas bilder på små smartphones som thumbnails på sidan.

Det ska finnas en länk på sidan som leder till https://www.comhem.se

Det ska vara länkat till de här sidorna. Kampanj, TV i mobilen, Om oss.

 

För betyget E.

 

Det ska gå att klicka fram och dölja forms med hjälp av jQuery (toggle)

Du ska kunna förändra css på någon del av sidan genom en knapptryckning.

Det ska vara fungerande länkar, men du behöver inte tänka på att skapa en NAV-bar.

E

 

För betyget C

Du ska kunna lägga in Galleria-plugin på din sida.

DU kan även lägga in andra lite krångligare jQuery på din sida, kanske byta stylesheet på din sida. (se min tutorial)

Du arbetar "hyfsat" självständigt. Det här betyder ändå att du får fråga hur mycket du vill.

 

Du kan skapa en NAV-bar.

Du har lite snyggt luft runt element på din sida. Du kan alltså använda dig av margin och padding.

 

c

 

För betyget A

Du kan använda dig av någon form av jQuery som förhöjer upplevesen av din sida. Kanske snyggare jQuery för forms liknande den som finns på slide panel på webdesignerwall.

Eller att du får en toning effekt på en hover när du för musen över menyer.

 

Du kan skapa en horisontell navbar med hover och visited.

Du kan använda dig av position för att få saker att ligga ovanpå varandra till exemepel. (fjärilen  på bilden nedanför är positionerad med absolute position med css)

 

 

Hjälp till uppgiften

css, html och jQuery

 

fjaril

klar

 

BIlder till uppgiften


Dag 5-6 Eget arbete klart