Centralt innehåll

• Ramverk eller klassbibliotek inom design eller skriptspråk.


• Webben som plattform för applikationer av olika slag.
• Fördjupning i märkspråk där det huvudsakliga innehållet är standarderna för HTML och CSS med särskilt fokus på responsiv design.
• Skriptspråk för webbutveckling på klientsidan och dokumentobjektsmodell.
• Riktlinjer för god praxis inom webbutveckling.
• Uppnående av interoperabilitet genom att följa standarder och testa på olika plattformar.
• Applikationer som fungerar oberoende av vald plattform och hur tillgänglighet uppnås även för användare med funktionsnedsättning.
• Kvalitetssäkring av applikationens funktion och validering av kodens kvalitet.
• Terminologi inom området webbutveckling.

Fakta

1. jQuery

Sannolikt har någon annan webbutvecklare haft samma problem att lösa som du har. Varför inte återanvända bra lösningar? Det är grundtanken bakom JavaScript-bibliotek, som är färdig kod med funktioner som det bara är att anropa.

Det finns många olika JavaScript-bibliotek, men jQuery är den vanligaste (=mest populära). Av alla webbsidor som använder ett JavaScript-bibliotek använder 80% jQuery. Det är skapat för att enkelt hitta och ändra element, hantera händelser (event) och animera förändringar.

jQuery är ett JavaScript-bibliotek.

jQuery används för att förenkla JavaScript-programmeringen.

Fördelar med jQuery:

• Färdiga funktioner för många vanliga uppgifter.
• Olika effekter (t.ex. visa/dölj) och animationer.
• Förenklad syntax.
• Inbyggt stöd för tillgänglighet i koden.
• Inbyggt stöd för eventuella olikheter och buggar i webbläsarna (normalisering av DOM).

Fler fördelar med jQuery:

• Finns mycket hjälp och manualer för det är det vanligaste JavaScript-biblioteket.
• Kort effektiv syntax, tanken är "skriv mindre, gör mer" (write less, do more).
• jQuery tar många vanliga uppgifter som kräver många rader med JavaScript-kod för att utföra, och gör dem som funktioner som man kan anropa med en enda rad kod.
• Förenklar många saker från JavaScript, som t.ex. hanteringen av DOM (Document Object Model).

• HTML / DOM hantering
• CSS hantering
• HTML-händelser (events)
• Effekter och animeringar
• AJAX (ett sätt att uppdatera en del av en webbsida utan att ladda om hela sidan)

1.1 Länka till jQuery

Om man inte vill ladda ned hela jQuery kan man länka till den från ett CDN (Content Delivery Network), t.ex. Googles CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1.2 jQuery - Syntax för onload-händelsen

Tidigare skrev vi kod för onload-händelsen:

window.addEventListener("load", init);

function init()
{
  //Kod för t.ex. koppling av olika events till HTML-element.
}

Koden ovan kan också skrivas på ett kortare sätt utan att deklarera en funktion med namn:

window.addEventListener("load", function() 
{
  //Kod för t.ex. koppling av olika events till HTML-element.
});

Med jQuery kan man också hantera händelser och skriva onload-händelsen så här:

$(document).ready(init);

function init()
{
  //jQuery-kod för t.ex. koppling av olika events till HTML-element.
}

jQuery-koden ovan kan också skrivas på ett kortare sätt utan att deklarera en funktion med namn:

$(document).ready(function() 
{
  //jQuery-kod för t.ex. koppling av olika events till HTML-element.
});

Här ovan har vi 4 olika sätt att skriva kod som utför samma sak. 2 sätt utan jQuery och 2 sätt med jQuery.

1.3 jQuery - Syntax för att hämta HTML-element

jQuerys syntax är gjord för att hämta HTML-element och göra något med dem. Vi har ju tidigare mest använt document.getElementById för att göra det.

jQuery syntax: $(selector).action()
$-teckent talar om att det är jQuery
En selektor talar om vilket eller vilka HTML-element som ska hämtas
En jQuery action() talar om vad som ska göras med de hämtade elementen

Exempel:

1.4 jQuery - Händelser

Olika jQuey-händelser (events)

1.5 jQuery - Effekter

Exempel på effekter:

1.6 jQuery - HTML

jQuery innehåller funktioner för hämta och ändra HTML-element och attribut, dvs ett sätt att hantera DOM (Document Object Model).

Det går att lägga till HTML-element och innehåll, se mer på jQuery Add Elements
Det går att ta bort HTML-element, se mer på jQuery Remove Elements

1.6 jQuery - CSS

jQuery har funktioner för hantera CSS.

Begrepp

JavaScript-bibliotek: Färdig kod med funktioner som det bara är att anropa

jQuery: Det mest populära JavaScript-biblioteket.

Selektor: Taggnamn, class eller id som identifierar ett element.

Länkar

Film: presentationen

w3schools: jQuery

jQuery.com

Film

Fördjupning

Övningar

Inlämningsuppgift

login     logout    

Exit tickets

Ta inlämningsuppgiften "Separera JS & HTML". Använd funktioner från jQuery för att skriva om JavaScript-koden (utgå från den gamla koden).

1. Börja med att byta ut window.addEventListener("load", init); mot jQuery
2. Byt ut alla "document.getElementById" och alla "document." mot jQuery
3. Byt ut alla document.getElementById.addEventListener mot jQuery-händelser.

Se film för beskrivning av tillvägagångssätt

Kontrollera:
- Validera HTML
- Validera CSS (om du har någon)
- Använd strict mode.
- Inga fel i konsolen när JavaScriptet körs (F12 - console).
- Ingen JavaScript i HTML-koden
- du har indenterat html & css koden
- startsidan heter index.html
- filnamn med små bokstäver, inga mellanslag eller åäö
- Som med all programmering ska koden vara indenterad, ha bra variabelnamn och vara översiktligt kommenterad.

Lämna in:
Packa (zippa) ihop projektet och spara den packade filen i Unikum