JavaScript - Intro
Download as PPTX, PDF0 likes590 views
Introduktion till JavaScript
JavaScript - Intro
- 1. JavaScript … och JavaScript-ramverket jQuery
- 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!
- 6. Har ni sett det innan?
- 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
- 12. JavaScript - Var skrivs det?
- 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.
- 16. Exempel på att hitta 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
- 19. Exempel på att modifiera 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.
- 21. Exempel med JavaScript Hitta & manipulera element
- 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
- 26. Exempel - DOM
- 27. Att hämta värde från formulär
- 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)
- 29. Exempel på localStorage localStorage.setItem("Name", "Anton"); localStorage.getItem("Name"); // Returnerar "Anton"
- 30. jQuery – ett JS- ramverk
- 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);
Editor's Notes
- #2: Responsiv design – olika enheter – olika möjligheter.
- #10: 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.
- #11: 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!
- #22: 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>
- #27: Visa på barn & föräldrar i documentet Navigera mellan figurerna i elementet
- #30: Bygg en ”välj bakgrundsfärg”