e01 – born to runorion.lnu.se/pub/education/course/1dv403/ht14/lecture/e01/e01 - born to...
TRANSCRIPT
![Page 1: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/1.jpg)
E01 – "Born to Run" Föreläsning 1, HT2013 Introduktion till JavaScript
Kurs: 1dv403 Webbteknik I
Johan Leitet
![Page 2: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/2.jpg)
E01 - "Born to Run" Dagens agenda • Kort introduktion • Varför står jag här? • Vad är JavaScript och vad kan man använda det till? • Bra delar, dåliga delar • Att komma igång med JS i webbläsaren
![Page 3: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/3.jpg)
“JavaScript is the world's most misunderstood programming
language h"p://javascript.crockford.com/javascript.html
Licens: Crea:ve Commons A"ribu:on-‐NonCommercial-‐ShareAlike Foto: Eric Miraglia
![Page 4: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/4.jpg)
JavaScript – Till vadå?
Databashanterare
Webbserver
App-utveckling
TV-apparater
Webbsidor Webbapplikationer (RIA)
Skripta programvaror
Node.js
PDF PS/Illustrator
CouchDB
Phonegap iWebkit Sencha Touch
![Page 5: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/5.jpg)
Klientsideskript Skriven kod som talar om för webbläsaren vad den ska göra. Idag: Uteslutande JavaScript Hade förr ryktet om sig att vara enkelt och ”inte ett riktigt programmeringsspråk”
AJAX
Dynamiskt förändra en webbsida
Reagera på händelser Kontrollera data innan den skickas till servern
Lagra data lokalt på klienten
Information om klienten Geolocation
Drag and Drop
Ljud/Video-kontroll
Canvas
![Page 6: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/6.jpg)
JavaScript för webben JavaScript huvudarena är givetvis webben där det används tillsammans med DOM:en och BOM:en för utföra sin magi. Till sin hjälp har man ofta tillgång till verktyg som: jQuery, YUI, Dojo, ExtJS, Closure Library.... Och man arbetar med nya spännande API:er så som: Canvas, Geolocation, Drag and Drop, Web sockets, Web workers, Web Storage...
![Page 7: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/7.jpg)
![Page 8: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/8.jpg)
![Page 9: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/9.jpg)
www
<img>
LiveScript
![Page 10: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/10.jpg)
Potatis, potäter
Livescript JavaScript ECMAScript JScript
1999: ES3 2009: ES5 - Default - Strict
![Page 11: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/11.jpg)
God Parts vs. Bad Parts Tyvärr får vi dras med tråkigheter som: • Globala variabler • Endast ”function scope” • Automatiska semikolon • Löst typat språk • == • Eval • switch fall trough
Tips: Nyttja JSLint
![Page 12: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/12.jpg)
Server - Klient
Response/Request
![Page 13: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/13.jpg)
Hur?
<script type=”text/javascript”> </script>
Här skriver vi vår kod
![Page 14: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/14.jpg)
Var? <html> <head> <script type="text/javascript">
</script>
</head> <body> <script type="text/javascript"> </script> </body> </html>
Du bör dock alltid undvika att blanda HTML-kod och JavaScript i samma fil. Bättre är att lägga JavaScripten i separata filer.
![Page 15: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/15.jpg)
Utskrift
document.write() alert() console.log()
Skapande av element i DOM-strukturen
![Page 16: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/16.jpg)
alert()
<script type="text/javascript"> alert("Dude!"); </script>
![Page 17: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/17.jpg)
document.write()
<script type="text/javascript"> document.write("<p>Hello World</p>"); </script>
document.write() ska du absolut inte vänja dig vid att arbeta med. Som vi senare kommer att se finns det bättre sätt att sköta utskrift till dokumentet.
![Page 18: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/18.jpg)
console.log() <script type="text/javascript"> console.log("4 8 15 16 23 42"); </script>
>= IE8, >= FF4
![Page 19: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/19.jpg)
Inläsning
prompt()
Inläsning från formulärkontroller
![Page 20: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/20.jpg)
prompt() <script type="text/javascript"> console.log( prompt("Eko:") ); </script>
Använd enbart i testsyfte! Är avaktiverad i IE och FF.
![Page 21: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/21.jpg)
Ofta kan det vara en god idé att lägga sin kod i externa filer, med andra ord, inte baka in javascriptkoden i HTML-koden. Bland annat så är det då enkelt att återanvända vår kod.
Skript i externa filer
<script src="filnamn.js"></script>
alert(4+8+15+16+23+42);
filnamn.js
![Page 22: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/22.jpg)
Var? <html> <head> <link rel="stylesheet" href="style.css" /> … <script src="A.js"></script> <script src="B.js"></script> </head> <body> … <script src="hatch.js"></script> </body> </html>
h"p://caniuse.com/script-‐defer
<script defer src="A"></script>
Defer kan användas för att tala om att ingen påverkan på dokumentet kommer att ske, ladda parallellt.
![Page 23: E01 – Born to Runorion.lnu.se/pub/education/course/1DV403/ht14/lecture/E01/E01 - Born to Run.pdf · JavaScript för webben JavaScript huvudarena är givetvis webben där det används](https://reader034.vdocuments.site/reader034/viewer/2022050500/5f9318f5086c65061e4e040a/html5/thumbnails/23.jpg)
When Crockford speaks, the console logs.
Källa: http://twitter.com/crockfordfacts