HT23 - DA106A - Introduktion till JavaScript
0 likes345 views
HT23 - DA106A - Introduktion till JavaScript
![Programmering handlar
om att instruera en
maskin eller del av en
maskin […] att utföra ett
visst arbete.](https://image.slidesharecdn.com/2023-javascript-230926111355-f6b0d1ad/85/HT23-DA106A-Introduktion-till-JavaScript-6-320.jpg)
HT23 - DA106A - Introduktion till JavaScript
- 2. Dagens föreläsning 1.Introduktion till programmering 2.JavaScript & webben 3.Exempel
- 6. Programmering handlar om att instruera en maskin eller del av en maskin […] att utföra ett visst arbete.
- 8. Vad är JavaScript? •En teknik för att utveckla interaktiva webbsidor •Ett programspråk inbäddat i webbläsare •Manipulerar DOM i webbläsaren, samt utför beräkningar http://en.wikipedia.org/w/index.php?title=File:Unofficial_JavaScript_logo_2.svg&page=1
- 9. Har ni sett det tidigare?
- 10. I vilket sammanhang används JavaScript? JavaScript CSS HTML Innehåll Interaktivitet Utformning Struktur Innehåll
- 11. Exempel på JavaScript • Bildspel: http://wowslider.com/javascript-slideshow-quiet-rotate-demo.html • Dynamisk innehåll: http://gmail.com, http://facebook.com, https://twitter.com/ • Beräkningar: http://www.valutaomvandlare.com/ • Validera formulär: https://validatejs.org/examples.html • Interaktiva element: http://mrdoob.com/projects/chromeexperiments/ball_pool/ • Spel: http://www.phoboslab.org/ztype/ • Super mairo: https://supermarioemulator.com/mario.php • Animationer: http://codepen.io/juliangarnier/pen/idhuG • Blandade exempel: http://film.tibbelit.se
- 13. EmberJS ReactJS Polymer JS JavaScript Frameworks VueJS Angular JS
- 14. 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 version av JavaScript – Jscript • På senare dagar (2005) har ajax blivit en populärt • Lägger till extra funktionalitet för webben och webbläsare
- 15. Vad kan man göra med JavaScript? • I princip vad du vill! (som har med webbsidor att göra) • Men det används ofta till att skapa interaktiva webbsidor • Med interaktiv menas: Reagera på användaras handlingar och modifiera webbsidans innehåll
- 21. rogrammering?
- 22. Programmering • Att ge instruktioner till en maskin så att den utför det man vill • Del av att utveckla programvara • Kreativ problemlösande verksamhet • Konstform?
- 23. Programspråk •En dator kan endast utföra ett begränsat antal instruktioner •Varje instruktion är mycket begränsad, t.ex. - Addera innehållet i två minnesutrymmen - Flytta innehållet i ett minnesutrymme till ett annat utrymme
- 24. Maskinkod för att skriva ut 1+2+…+10=55 00110001 00101011 00110010 00101011 00110011 00101011 00110100 00101011 00110101 00101011 00110110 00101011 00110111 00101011 00111000 00101011 00111001 00101011 00110001 00110000 00111101 00110101 00110101
- 25. Lågnivåspråk •Språk som behöver liten eller ingen bearbetning för att exekveras på en dator •Maskinkod – kod som maskinen kan exekvera direkt •Assemblerspråk – kräver en viss översättning, s.k. assemblering, innan programmet kan exekveras.
- 26. Högnivåspråk • Mer anpassade för människor att läsa/skriva • Måste översättas (interpreteras eller kompileras) till maskinkod innan det kan exekveras. • En instruktion i ett högnivåspråk leder ofta till ett antal instruktioner i maskinkod. • JavaScript, Java, C#, C++, Python, Ruby, ASP, JSP – och 5000(?) andra.
- 28. JavaScript • För JavaScript sköter webbläsaren körningen • Webbläsaren är alltså en interpretator (tolk) för JavaScript-kod • JavaScript är ett av de enklaste programspråken att börja med
- 29. Programspråk •Programspråk är, till skillnad från t.ex. svenska och engelska, formella språk •De ska uttrycka något utan tvetydighet. •Men programspråk delar vissa likheter med naturliga språk – vokabulär och grammatik. •Även uttryck och instruktioner.
- 31. The man hit the boy with the stick. Who is holding the stick? Requirements Management, DA254A 7.5 ECTS, VT2014, annabella.loconsole@mah.se 28 MAN BOY
- 32. Requirements Management, DA254A 7.5 ECTS, VT2014, annabella.loconsole@mah.se 29 MAN BOY The man hit the boy with the stick. Who is holding the stick?
- 33. Uttryck (expression) - Kod som producerar ett värde UTTRYCK ”5”+”8” 3 + 5 20/2 + 3*4 "Hejsan" "Hej” + ” ” + "du" 5 > 2 VÄRDE 58 8 22 "Hejsan" "Hej du" true
- 34. Instruktioner •Ett program består av en lista instruktioner •En instruktion består av minst ett uttryck och avslutas med ett semikolon ”;” 5; alert(”Hej och välkommen”); var birthYear = 2022 – age;
- 35. Att skapa ett program • Uppgiftsformulering, vad är det för uppgift som ska lösas? • Vilka steg behöver utföras för att lösa uppgiften? • Vilka instruktioner kan användas för att utföra varje delsteg (algoritm)
- 36. Algoritm •En beskrivning över hur man löser ett problem. Algoritmen består av ett antal instruktioner och beskriver i vilken ordning instruktionerna ska utföras. http://www.recepten.se/recept/pasta_carbonara.html
- 40. Övning •Vilka instruktioner (vilken algoritm) krävs för en dator för att sortera följande bokhög i bokstavsordning: • UML Distilled • Modern PHP • Graph Databases • Verksamhetsarkitektur • Grundläggande datorteknik • Interaktionsdesign och UX Datorn kan: - Lägga saker i högar - Jämföra två värden - Kan alfabetet
- 41. Hur, var, när skriver man JavaScript-kod?
- 42. Inbäddat skript • HTML-elementet <script> används för att definiera ett JavaScript-block. - Jämför detta med att inkludera inbäddad CSS-mall med hjälp av <style> • Elementet <script> kan placeras var som helst i HTML- dokumentet, inte bara i <head> • JavaScript-koden körs på den plats JavaScript-elementet finns.
- 43. HTML (, • <head> <script>.....••···························· • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • </script> </head>
- 44. Externt skript •JavaScript-koden sparas i en separat fil, med filändelsen .js •Skriptfilen inkluderas i HTML-dokumentet, också med hjälp av elementet <script> <script src="minkod.js" type="text/javascript"></script>