JavaScript - Intro
- 3. Dagens föreläsing
• JavaScript?
• JavaScript – syntax?
• JavaScript – att leta upp element i HTML-dokumentet
• JavaScript – att manipulera element i HTML-
dokumentet
• JavaScript – exempel
• jQuery – Ett av många JavaScript-ramverk för front-end
• jQuery – syntax?
• jQuery – Exempel
- 5. JavaScript lever i
din webbläsare
Allt som behövs för att köra JavaScript är en webbläsare
– smidigt värre!
- 7. JavaScript – varför?
• Vi vill ge liv till annars statiska webbsidor!
• T.ex.
Automatiskt modifiera dynamiskt innehåll
Facebook
Twitter
Gmail
Diverse beräkningar
T.ex. valutakonverteringar
Förbättrade GUI
Animeringar
Lägga till/ta bort/modifiera befintliga HTML-element
- 8. JavaScript - exempel
• http://valuta.se
• http://yensdesign.com/tutorials/validateform/
• http://www.phoboslab.org/ztype/
- 9. JavaScript - Historik
• Utvecklades av Netscape under mitten av 90-talet
• Har inget med Java att göra – det är ett eget
programmeringsspråk
• Microsoft skapade sin egen verision av JavaScript –
Jscript
• På senare dagar (2005) har ajax blivit en populärt
• Lägger till extra funktionalitet för webben och
webbläsare
- 10. Vad kan man göra med
JavaScript?
• I princip vad du vill!
• Men det används ofta till att skapa interaktiva
webbsidor
• Med interaktiv menas: Reagera på användaras
handlingar och modifiera webbsidans innehåll
- 11. JavaScript
• JavaScript skrivs som ren text
• Det kan skrivas antingen inbäddat direkt i HTML-
koden
• Eller i en separat fil, som sedan inkluderas i HTML-
dokumentet
- 13. JavaScript som
programmeringsspråk
• Ett högnivåspråk
• Ett otypat språk
• Ett skriptspråk
• Ni kan programmera, så efter lite träning med syntaxen
så borde det inte vara några problem att komma igång
=)
- 15. Att hitta element genom JS
• En stor fördel med JS är att vi kan leta upp HTML-
element!
• Vi kan leta upp detta genom att:
Ange typen av element (t.ex. alla <p>-element)
Ange klassen för ett element (t.ex. alla element med klassen
”blue”)
Ange ett id för ett element
• Jämför detta med hur vi använder CSS för att hitta våra
element.
- 17. Användardrivet GUI
• Vi ”lyssnar” efter användarens handlingar, som t.ex.
Klick
Musrörelser
Svepningar
M.m.
• Vi kan sedan koppla ihop dessa handlingar med element
– och sedan koppla detta till en funktion
- 18. Att modifiera element
• Vi kan ändra attribut för element
• Vi kan ändra CSS för element
• Vi kan ändra text för element
• Vi kan lägga till nya element
• Vi kan ta bort element
- 20. ”this” – att referera till elementet
som utlöste händelsen
• ”this” som nyckelord är väldigt händigt att hantera – på
så sätt behöver vi inte ”leta upp” elementet som utlöste
händelsen mer än en gång.
- 22. DOM
• Trädstruktur som motsvarar taggarnas ordning/nästling
• Varje element är en ”nod” i trädet
• Relationer mellan noderna beskrivs med förälder/barn och syskon
- 24. Använda DOM
• I JavaScript kan man alltid komma åt DOM via objektet
”document”
• Därifrån kan vi ”navigera” genom trädet
// referens till body-elementet:
document.body
// lista över alla element i body
document.body.childNodes
- 25. Att navigera i DOM
• Vi antar att ”node” är en nod/element i DOM-trädet
// Navigera mellan noder på samma nivå
node.nextSibling
node.previousSibling
// Nedåt, barnnoder
node.firstChild
node.lastChild
node.childNodes // alla barn
// Uppåt, förälder
node.parentNode
- 28. localStorage – Att spara data
hos klienten
• Vi kan spara data lokalt (text-strängar) hos användaren.
Typ som cookies, men är inte begränsade på samma sätt
gällande längden på det som sparas
Enklare att hantera än cookies
• Sparas i nyckel: värde format (som ett lexikon)
- 32. jQuery – Referera till element
• Att referera till element (”CSS”-referenser)
$(”#id”);
document.querySelectorAll(”#id”);
• Att referera till taggar
$(”a”);
document.querySelectorAll(”a”);
• Att referera till klasser
$(”.blue”);
document.querySelectorAll(”.blue”);
- 33. jQuery – navigera i DOM
• Document.getElementById(”id”).nextsibling;
$(”#id”).next();
• Document.getElementById(”id”).childNodes;
$(”#id”).children();
• Document.getElementById(”id”).parentNode;
$(”#id”).parent();
- 34. Att använd funktioner i
jQuery
• Att dölja ett element:
document.getElementById(”id”).style.display = ”none”;
$(”#id”).hide();
• Att tona in ett element (animering):
$(”#id”).fadeIn(1000);
Editor's Notes
- Responsiv design – olika enheter – olika möjligheter.
- Utvecklades som “Mocha” & “LiveScript” under 90-talet
Presenterades i Netscape Navigator 2, 1995
Bytte då namnet till JavaScript (för att det fanns ett annat spännande språk som hette Java). Men man ville stödja “små Java-program” I webbläsaren
Ajax, Web 2.0. Ville slippa för många sidomladdningar för varje gång man vill prata med databasen
Tekniken fanns sedan tidigare, men uppmärksammades först nu ordentligt.
Developed under the name Mocha, LiveScript was the official name for the language when it first shipped in beta releases of Netscape Navigator 2.0 in September 1995, but it was renamed JavaScript[10] when it was deployed in the Netscape browser version 2.0B3.[11]
Termen Ajax myntades 2005 av Jesse James Garrett, designstrateg och produktutvecklare hos Adaptive Path i USA. I essän Ajax: A New Approach to Web Applications [1], noterade han att det faktum att en webbsida varit tvungen att kommunicera med servern vid varje liten interaktion från användarens sida, gjort användningen ofta plågsamt långsam och obekväm. Han konstaterade att många då relativt nya sajter eller tjänster, som Flickr, Google Maps och Google Mail använde ett antal elegantare och snabbare tekniker med ett mellanlager - en "Ajax-maskin" som laddas som en del av webbsidan.
Garrett poängterade att de tekniker som gjorde detta möjligt hade funnits en längre tid, och att det nu handlade om att använda dem samlat och med ett bestämt syfte.
XMLHttpRequest-objektet fanns t ex redan 1999 i Internet Explorer, via en så kallad ActiveX-kontroll. W3C har föreslagit en standard motsvarande XMLHttpRequest som heter DOM level 3, eller Document Object Model Level 3, och har funnits som utkast sedan 2004.
- Vi kan bygga små program i webbläsaren
Miniräknare
Bildspel
Animeringar
Beräkningar vad du vill
Göra webbplatser attraktiva
Animeringar
Interaktivt innehåll
Dynamiska innehåll
Samla in data om användaren
Vilken webbläsare kör du?
Vilket operativsystem kör du?
Osv!
- Leta upp:
Alla bilderna
Navigationen
Huvudrubriken
Ändra:
Byt färg på menyn
Ändra rubriken på sidan
När man klickar på en bild, så blir bakgrundsfärgen mörkare
<script>
var figures = document.querySelectorAll("figure");
for(var i = 0; i < figures.length; i++){
figures[i].addEventListener("click", colorize, false);
}
function colorize(){
this.style.backgroundColor = "#AAA";
}
</script>
- Visa på barn & föräldrar i documentet
Navigera mellan figurerna i elementet
- Bygg en ”välj bakgrundsfärg”