This afternoon I gave a very short introduction to computer programming at Trade School (tradeschool.ourgoods.org). I used JavaScript to illustrate the process of learning how to program, mainly because there's nothing to install and it has many practical uses.
This afternoon I gave a very short introduction to computer programming at Trade School (tradeschool.ourgoods.org). I used JavaScript to illustrate the process of learning how to program, mainly because there's nothing to install and it has many practical uses.
JavaScript is lingua franca of the Web. It's pervasive and since 1999 a standard ( ECMAScript 262). Yes, there are other technologies you can use: Flash, Java Applets, Dart, but none of these have the overwhelming support and community that JavaScript does. Over the years it has been maligned as a poorly designed language but I will argue that it has just been misunderstood. This talk will focus on the fundamentals of the language and its integration with the browser, the DOM and server communication via JSON and Ajax.
In the talk Bryan will present:
* Language fundamentals
* Object-Oriented programming
* Functional programming
* DOM APIs
* Event model
* Odds and ends
Slides in swedish from a presentation I held at Valtech Days 2009 on the architecture of the web. I discus HTTP, resource and service application design.
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
4. Var passar JavaScript in?
JavaScript
CSS
HTML
Innehåll
Interaktivitet
Utformning
Struktur
Innehåll
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)
31. Varför ramverk?
• Snabbare utveckling
• Inbyggda funktioner
• Animeringar och andra effekter
• Cross-browser lösningar
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);
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