TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor...
Transcript of TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor...
![Page 1: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/1.jpg)
Webbprogrammering och interaktivitet
Introduktion, HTML5, CSS & Selenium
TDP013
Anders Fröberg Institutionen för Datavetenskap (IDA)
![Page 2: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/2.jpg)
Kursens nyckelpersoner
2
Examinator: Anders Fröberg
Kursansvarig: Anders Fröberg
Kursssistent: Alexander Kazen Kontakta mig ([email protected]) gällande frågor om kursen.
Kontakta kursassistent för hjälp kring laborationerna.
![Page 3: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/3.jpg)
Kursens design
3
I högskoleförordningen står det under mål för kandidatexamina bland annat att:
För kandidatexamen skall studenten - visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer, - Högskoleförordningen (1993:100)
• Kursen är byggd på ett sätt som lägger stor vikt vid att ge studenterna möjlighet att själva söka efter den information som behövs för att lösa de innefattande laborationerna.
• Föreläsningarna är tänkta att introducera ämnena och hjälpa studenterna att komma igång med sin informationssökning.
![Page 4: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/4.jpg)
Kursens litteratur
4
• Det finns ingen officiell tryckt litteratur till kursen.
• Varje föreläsning redovisar för dess referenser på kurshemsidan.
• Tänk på examina-målet!
visa förmåga att söka, samla, värdera och kritiskt tolka relevant information i en problemställning samt att kritiskt diskutera företeelser, frågeställningar och situationer
Kursens kunskapsfilosofi
![Page 5: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/5.jpg)
Kursens innehåll
5
• Kursen behandlar webbteknik med fokus på programmering av webbapplikationer.
• Kursen består av ett antal programmeringsuppgifter (laborationer) som behandlar viktiga teknikdelar som HTML5, CSS, JavaScript, Node.js och MongoDB.
• Ett större programmeringsprojekt genomförs slutligen. Kursen bygger i stor grad på egen programmering.
• Examination sker genom muntlig demonstration och presentation av funktion och kod.
![Page 6: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/6.jpg)
Kursens examination
6
• Laborationer och projekt görs i par och registreras i webreg i vanlig ordning. Instruktionerna för varje laboration visar tydligt vilka kurs-, program- och examensmål laborationen är tänkt att examinera.
• För godkänt i kursen skall laborationerna genomföras, men graderat betyg avgörs av projektet. Mer info på kurshemsidan.
![Page 7: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/7.jpg)
Kursens teknikval
7
• Kursen har gjorts om från att vara en klassisk PHP -> MySQL kurs till att bli en bleeding-edge Node.js,MongoDB, HTML5 kurs.
• Vi vill utmana IP studenter med en bit av det som spås bli framtiden för webbutveckling.
• Även om inte just Node.js eller MongoDB kommer vara framtiden så kommer idéerna, och framför allt JavaScript, ha en stor betydelse.
![Page 8: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/8.jpg)
Kursens tekniska innehåll
8
• Klientsida (dvs det användaren ser och som körs i webbläsaren)
• HTML, CSS, JavaScript ->HTML5
• Serversida (dvs det som körs på en datorn någonstans som innehåller all information som skall visas)
• Node.js+Express.js (JavaScript) och MongoDB (databas)
• Förutom detta kommer vi titta på olika verktyg för att testa klient och serversida.
![Page 9: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/9.jpg)
Varför utvecklar vi webbapplikationer?
Skrivbords applikation
Outlook 2003 släpps
Användare köper och installerar.
Outlook 2007 släpps
Nu krävs ny marknadsföring och skeppning av produkter
till butiker
Användare behåller det gamla office paketet, tycker
inte det behöver uppdateras, eller vet kanske
inte ens om att man kan uppdatera.
Mr Gates
Mr Gates
![Page 10: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/10.jpg)
Varför utvecklar vi webbapplikationer?
Skrivbords applikation WebbapplikationOutlook 2003 släpps
Användare köper och installerar.
Outlook 2007 släpps
Nu krävs ny marknadsföring och skeppning av produkter
till butiker
Användare behåller det gamla office paketet, tycker
inte det behöver uppdateras, eller vet kanske
inte ens om att man kan uppdatera.
Mr Gates
Mr Gates
Office 365 lanseras
Användare skapar konto på nätet och betalar en liten
summa varje månad.
Nya uppdateringar görs av sidan
Nästa gång användaren loggar in syns dessa nya
ändringar
Användare får direkt tillgång till nya uppdateringar utan
att man behöver marknadsföra dessa till existerande kunder eller
skeppa till butiker.
Inkomsterna är kontinuerliga varje månad, så länge
kunderna är nöjda.
Mr Gates
Mr Gates
![Page 11: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/11.jpg)
Varför använder vi webbapplikationer ?
• Inga installationer (om datorn har en webbläsare).
• Om man sitter hemma hos någon eller på internetcafé spelar ingen roll, så länge man har en webbläsare och internet.
• Samma filer på alla datorer man loggar in från. • Kan logga in från hela världen och t ex läsa sin
mejl.
En av de bästa saker med Facebook är att personer kan använda det på t ex semestern eller jobbet, från vilken dator som helst.
Tänk om Facebook varit en skrivbords applikation som skulle installeras på datorn, hade företaget blivit värderat till $50 miljarder dollar under 2011 ?
![Page 12: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/12.jpg)
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
![Page 13: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/13.jpg)
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
<h1>Kapitel 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Avsnitt 1</h2> <p>Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p>
2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre.
![Page 14: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/14.jpg)
Server
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet.
<h1>Kapitel 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>Avsnitt 1</h2> <p>Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.</p>
2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre.
Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.
3. Om vi låter vår webbläsare få ta hand om HTML dokumentet, så visar den upp ett läsbart och indelat dokument.
![Page 15: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/15.jpg)
HTML Taggar exempel
HTML Rendering exempel
<h1>Rubrik</h1> Rubrik
<h2>Rubrik</h2> Rubrik
<p>Stycke text</p> Stycke text
<ul> <li>Punkt 1</li> <li>Punkt 2</li></ul>
• Punkt 1 • Punkt 2
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr><a href=”http://www.google.com”>Google</a> Google
(här har vi ett exempel på HTML attribut, i form av ”href”)
Cell 1 Cell 2Cell 3 Cell 4
![Page 16: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/16.jpg)
Det finns många webbläsare på marknaden, och de är inte alla lika.
Därför kan man ibland bli lite förvånad över hur ens webbplats ser ut på olika webbläsare.
Eftersom webbläsare kan rendera HTML lite olika är det viktigt att testa sin webbplats på flera läsare under utvecklingens gång.
![Page 17: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/17.jpg)
HTML – Class och ID
class id
<div class=”ingress”>Detta är text</div>
<a class=”external” href=”...”>External</a>
<button class=”image-button”></button>
Markera att elementet på något sätt är viktigt eller av en viss typ. HTML dokumentet får innehålla flera element med samma class värde.
Markera ett unikt element i HTML koden. HTML dokumentet får bara innhålla ett element med ett visst id värde.
<button id=”sendEmail”>Send</button>
<a id=”googleLink” href=”...”>Google</a>
<div id=”leftContent”>....</div>
Element kan ha både class och id definierade
![Page 18: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/18.jpg)
HTML Formulär<form>
Name: <input type=”text” /><br /> <input type="radio" name=”gender" value="female" /> Female<br />
<input type="radio" name=”gender" value="male" /> Male<br /> <button type=”submit”>Send</button>
</form>
<form>
<input type="checkbox" value="CC" />Send CC<br/>
Message: <textarea rows="3"></textarea><br />
<button type="submit">Send</button>
</form>
Flera exempel på HTML attribut
![Page 19: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/19.jpg)
HTML – Head unika taggar
<html> <head> <title>TDDD52 > Hemsida</title> </head> <body> </body> </html>
<html> <head> <title> Amazon.com: Online Shopping for Electronics, Apparel, Computers, DVDs & more</title> <meta name=”description” content=”Online retailer of books, movies, music and games along with electronics, toys, apparel, sports, tools, groceries and general home and garden items.” /> </head> <body> </body> </html>
![Page 20: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/20.jpg)
Specialtecken – HTML Entities
• Om man vill göra ett < eller > tecken i sin text tolkar webbläsaren detta som början eller slutet på en tag, och allt blir fel. Använd då: < eller >
• Om man vill göra ett tecken som inte finns på tangentbordet t ex copyright symbolen. Använd då: ©
• Leta på nätet efter en komplett lista…
![Page 21: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/21.jpg)
Validering av HTML kod
• http://validator.w3.org
• Korrekt skriven XHTML kod gör att webbläsaren inte behöver gissa hur den skall tolka koden
• Detta leder till att din webbplats har större chans att se ut som du tänkt dig i alla webbläsare
• I laborationsserien skall koden valideras som XHTML Strict
• Om du har fel, rätta ett i taget tills du får ”grönt”
![Page 22: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/22.jpg)
Indelning och semantik • Delar upp text på ett
logiskt sätt i dokumentet.
• Ger textstycken en semantisk betydelse, t ex rubriker.
• Ger webbläsaren en chans att tolka dokumentet innan visning.
• Ger sökmotorer möjlighet att bättre förstå innehållet på webbplatsen.
Formulär • Ger ett dokument
komponenter som ingår i formulär.
• Knappar, textbox, radiobutton, checkbox etc.
• Dessa formulär är en viktigt del i kommunikationen mellan användare och ägare av en webbplats.
• T ex kontokortstransaktioner, kommentarfält ...
Länkar • Kan länka dokument
till andra dokument.
• Skapar ett nätverk av dokument som kan ses av användaren som ”en sida”.
• Länkarna kan också ge en hint till sökmotorer om innehåll och relevans.
HTML
![Page 23: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/23.jpg)
HTML, XHTML, HTML5
Igår • HTML 4 – Hyper Text Markup
Language
• XHTML - Extensible Hyper Text Markup Language
• Två olika specifikationer för hur man märker vanlig text med taggar
Idag • HTML5 - Framtiden för HTML
• HTML5 är inte bara till för semantik, formulär och länkar men även för avancerade tekniker så som: lokala databaser, video, sockets etc
• Idag är vi i början av denna utveckling, och alla funktioner för HTML5 är inte implementerade i alla webbläsare.
![Page 24: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/24.jpg)
De första stegen när man skapar ett HTML dokument...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <meta http-equiv="content-type” content="text/html;charset=utf-8" /> <title>An XHTML 1.0 Strict standard template</title> </head>
<body> <p>… Your HTML goes here …</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type” content="text/html;charset=utf-8" /> <title>Title of the document</title> </head>
<body> The content of the document...... </body>
</html>
XHTML
HTML 5
Projekt
godkänd
metod
Gamla sättet
![Page 25: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/25.jpg)
Färger
• På webben används s k additativ färgblandning
• Man blandar färgerna Röd, Grön och Blå (RGB)
• Hexadecimala0 1 2 3 4 5 6 7 8 9 A B C D E F
• #000000 eller #000 = Svart • #FFFFFF eller #FFF = Vit • #FF0000 eller #F00 = Röd
![Page 26: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/26.jpg)
Färger
• Man kommer givetvis inte ihåg alla dessa färger, utan använder en lista eller program för att få fram den färg man vill ha.
![Page 27: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/27.jpg)
Boxmodell
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
width
heig
ht
![Page 28: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/28.jpg)
Boxmodell
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
width
heig
htpadding
![Page 29: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/29.jpg)
Boxmodell
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
width
heig
htpadding
border
![Page 30: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/30.jpg)
Boxmodell
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
width
heig
htpadding
border
margin
Den faktiska bredden är = width + padding + border + margin
![Page 31: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/31.jpg)
CSS
• Cascading Style Sheet
• Hur innehåll skall presenteras
• Cascade tolkar vi som ”ärver och skriver över”
• Mest exakta regeln styr
• Regler som appliceras sist gäller de som är före
• Ett oerhört viktigt och kraftfullt verktyg för att få webbplatser användbara
• Kan förändra färger, storlekar, placeringar etc
• Tolkas utav webbläsare, vilket kan leda till lite olika resultat beroende på val av läsare
![Page 32: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/32.jpg)
CSS - SelectorSelector Förklaring
h1 En visst typ av element, t ex alla h1 element
.ingress Alla element med attributet ”class” satt till något värde, t ex ”class=ingress”
#sendButton Elementet med ett visst id, t ex ”id=sendButton”
div.ingress Alla div element med ”class=ingress”
div h1 Nestlade selectorer, t ex alla h1 som ligger innuti div
div.ingress h1 Alla kombinationer fungerarhttp://www.w3schools.com/cssref/css_selectors.asp
En selector är ett syntax som avgör vilka element som skall påverkas av vilka regler.
![Page 33: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/33.jpg)
CSS - PropertiesProperty Values
color RGB färgkod, sätter texten i det valda elementet till denna färg.
width Sätter bredden av ett element, använder enheter som px, % etc
border value kan vara ”5px solid red” som ger en 5px tjock solid kant
border-style Sätter kanten till en annan typ, t ex dotted, dashed, double, groove, ridge, solid etc
Det finns en uppsjö olika property-value man kan använda.
En property avgör vilka egenskaper som skall ändras och value avgör vad den skall ändras till.
![Page 34: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/34.jpg)
CSS - ExempelCSS Utfall
a { color: #F00; }
Alla länkar blir nu röda istället för standard blå
div h1 { font-size: 12px; border: 1px solid #CCC; }
Alla h1 taggar som ligger nestlade under div taggar får en mindre font storlek och en grå kant
div.ingress { font-weight: bold; }
Alla div taggar som har ”class=ingress” får fet stil
img { cursor: pointer; }
Alla bilder gör nu om muspekaren till en hand istället för vanlig pekare när man håller musen över bilden.
![Page 35: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/35.jpg)
CSS – Hover selector
a:hover {
background-color: yellow; }
www.google.com www.google.com
En selector som först applicerar sina regler när musen förs över elementet
Kolla denna länk om ni använder :hover i era webbplatser, det finns några saker man måste tänka på http://w3schools.com/cssref/sel_hover.asp om man använder den i kombination med a elementet.
![Page 36: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/36.jpg)
![Page 37: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/37.jpg)
![Page 38: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/38.jpg)
Live example1
38
![Page 39: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/39.jpg)
HTML – span - inline
<span>När jag vill markera något i en flytande text t ex att <span class=”red”>detta ska vara rött</span> men att texten annars ska flyta på ...
När jag vill markera något i en flytande text t ex att detta ska vara rött men att texten annars ska flyta på ...
Används för att gruppera inline element i ett dokument.
Denna grupp kan man sedan ändra med CSS eller Javascript (senare föreläsning).
![Page 40: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/40.jpg)
HTML – div - block
<div>När jag vill gruppera block element <div class=”green-border”>
<ul>
<li>Item 1</li1>
<li>Item 2</li1>
<li>Item 3</li1>
<li>Item 4</li1>
</ul>
</div>
• Item 1 • Item 2 • Item 3 • Item 4
![Page 41: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/41.jpg)
CSS – Float & Clear
DIV
DIV
DIV
DIV
Antag att vi har fyra div taggar efter varandra.
När webbläsaren ser nästa div tagg kommer den att göra en radbrytning och sedan rendera hela div taggen.
![Page 42: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/42.jpg)
CSS – Float & Clear
DIV DIV
DIV
DIV
Om vi på den blå div taggen sätter float: left; så placeras den så långt till vänster som möjligt. Efterkommande element hamnar sedan direkt efter.
Den röda div taggen har inte float, så den vita hamnar på nästa rad.
![Page 43: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/43.jpg)
CSS – Float & Clear
DIV DIV DIV
DIV
Om vi även på den röda sätter float: left; så kommer den gröna direkt efter.
DIV DIV
DIV
DIV
Om vi vill undvika att det nästkommande elementet hamnar direkt efter den röda, så sätter vi clear: left; på det gröna elementet.
![Page 44: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/44.jpg)
CSS – Float & Clear
• Kan även använda float: right; och clear: right;
• Att kunna sätta float på element möjliggör att man kan skapa andra layouter än bara rakt upp och ner
Med float kan vi placera element på
andra sätt än med ren HTML
![Page 45: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/45.jpg)
Validering
• http://jigsaw.w3.org/css-validator/
• Som med HTML, är korrekt CSS nödvändig för att webbläsaren skall slippa gissa vad som menas med koden.
• Om man skriver stora stylehsheets är det smart att validera ofta.
• En ”mänsklig” validering som kollar att webbplatsen ser ut som det är tänkt på alla större webbläsare är fortfarande nödvändig.
Congratulations! No Error Found.
![Page 46: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/46.jpg)
Separation av innehåll och presentation
• Enklare att skapa, underhålla och återanvända
• När man bygger dynamisk a webbsidor är detta oumbärligt
• Går att skapa olika design beroende på webbläsare
HTML
CSS CSS CSS
Man kan skapa helt olika utseenden vid behov för samma HTML innehåll. Titta på: http://www.csszengarden.com/
![Page 47: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/47.jpg)
![Page 48: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/48.jpg)
![Page 49: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/49.jpg)
![Page 50: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/50.jpg)
![Page 51: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/51.jpg)
![Page 52: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/52.jpg)
![Page 53: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/53.jpg)
![Page 54: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/54.jpg)
![Page 55: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/55.jpg)
![Page 56: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/56.jpg)
![Page 57: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/57.jpg)
![Page 58: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/58.jpg)
CSS i HTML dokument
Header style
Länkat
... <head> <style type=”text/css”> a { color: #F00; }
div.ingress { font-weight: bold; } </style> </head> ...
... <head> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> ...
Detta är ibland OK i andra
sammanhang
Godkänd
metod
![Page 59: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/59.jpg)
CSS i HTML dokument
Inline<body>
<div style=”font-weight: bold;”> This text will be bold </div>
</body>
Detta är aldrig ok i denna kurs.
Om ni får för er att göra såhär, tänk på hur det hade påverkat Zen Garden om de gjorde så.
![Page 60: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/60.jpg)
CSS3
• En ny standard för CSS
• Innehåller specifikationer för rundade kanter, gradients, skuggor, roteringar etc.
• Endast nya webbläsare kan hantera dessa.
• Äldre webbläsare hanterar inte CSS3
![Page 61: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/61.jpg)
Selenium – Ett verktyg för att testa webbplatser.
61
I ett programmeringsspråk (t ex Python) skriver man kod för att beskriva olika flöden genom webbplatsen.
Hitta elementet med id värdet ’q’
Öppna sidan
Skriv in ordet ”Cheese” i elementet med id ’q’
Tryck enter
Vänta max tio sekunder på att titeln på sidan börjar med ordet cheese
Detta kan för vissa vara ett av de viktigaste verktyg man lär sig i sin karriär.
Att automatisera testning av webbplatser kan spara enormt mycket tid och därmed även pengar.
![Page 62: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/62.jpg)
Selenium – Ett verktyg för att testa webbplatser.
62
import selenium from selenium import webdriver from selenium.common.exceptions import TimeoutException from selenium.webdriver.support.ui import WebDriverWait
import time
driver = webdriver.Firefox()
driver.get("http://www.google.com")
![Page 63: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/63.jpg)
Selenium – Ett verktyg för att testa webbplatser.
63
.....
inputElement = driver.find_element_by_name("q")
inputElement.send_keys("Cheese!")
inputElement.submit()
.......
![Page 64: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/64.jpg)
Selenium – Ett verktyg för att testa webbplatser.
64
...
print driver.title
try: WebDriverWait(driver, 10).until( lambda driver : driver.title.lower().startswith("cheese!")
)
print driver.title
finally: driver.quit()
![Page 65: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/65.jpg)
Selenium – En sista notis
• Selenium öppnar en webbplats via http, detta innebär att ni måsta ha era HTML, CSS och JavaScript filter på en webbserver för att testa de.
• Detta kan man göra genom att lägga sina filer i www-pub mappen.
• Ett annat alternativ är att exekvera python –m SimpleHTTPServer i den mappen man har sina filer (antaget att man har Python och SimpleHttpServer modulen installerad)
65
![Page 66: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/66.jpg)
ECMAScript
• Specifikationen för JavaScript och JScript
• Specificeras (delvis) av JavaScript och JScript
• Innehåller inte Document Object Model (DOM)
66
![Page 67: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/67.jpg)
Användning av ECMAScript
• Mozilla Firefox
• Google Chrome
• Google documents
• Microsoft .NET Framework
• Adobe Flash
• Adobe Acrobat
67
![Page 68: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/68.jpg)
ECMAScript edition 5
• Lanserades 2009
• Nuvarande version
• Stöd för JSON
• Uppdatering 5.1 • Lanserades 2011 • (Mer) kompatibel med edition 3
68
![Page 69: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/69.jpg)
ECMAScript edition 7
• Lanserades Juni 2016
• Nuvarande version • Inte fullt stöd i webbläsarna än
• Officially known as ECMAScript 2016 • Mindre tillägg till ECMAScript 2015
69
![Page 70: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/70.jpg)
Variation hos olika applikationer
• Mozilla Firefox JavaScript 1.8.5 (edition 5.1) • Google Chrome JavaScript (edition 6) • Internet Explorer JScript 9.0 (edition 5) • Opera ECMAScript (edition 6)
• Adobe Flash ActionScript 3 (edition 3) • Adobe Acrobat JavaScript 1.7 (edition 3)
70
![Page 71: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/71.jpg)
PROGRAMMERING
71
![Page 72: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/72.jpg)
Tilldelningar och scope
• Variabler kan var som helst definieras globalt
• Funktioner har bara ett scope
72
![Page 73: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/73.jpg)
Tilldelningar och scope
function functionA() { variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // Returnerar ”Hello, world”
73
![Page 74: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/74.jpg)
Tilldelningar och scope
function functionA() { var variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // ReferenceError: variable is not defined
74
![Page 75: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/75.jpg)
Tilldelningar och scope
var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (p in persons) { alert(p); } } functionC(); alert(p);
75
![Page 76: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/76.jpg)
Tilldelningar och scope
var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (var p in persons) { alert(p); } } functionC(); alert(p);
76
![Page 77: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/77.jpg)
Tilldelningar och scope
var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (var p in persons) { alert(p); } alert(p); } functionC();
77
![Page 78: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/78.jpg)
Tilldelningar och scope
function functionD() { if (1 == 1) { var variable = ”Hello, world”; } alert(variable); } functionD();
78
![Page 79: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/79.jpg)
Objektorienterad programmering
• JavaScript använder prototyping till skillnad från Java/Python/C++
• JavaScript stödjer endast arv från en (1) prototyp
• ”Vanlig” objektorienterad programmering i JavaScript är möjligt, men kostar mer minne då varje objekt definierar sina egna funktioner.
79
![Page 80: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/80.jpg)
Prototyping
• Funktioner är motsvarigheten till klasser
• Funktioner kan innehålla funktioner
• Klasser kan utökas efter att objekt har skapats
• Objekt kan utökas efter att de skapats
80
![Page 81: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/81.jpg)
Prototyping
function Animal() { // Constructor alert(’Animal::Constructor’); } Animal.prototype.talk = function() { // Method return undefined; } var myAnimal = new Animal(); alert(myAnimal.talk()); Animal.prototype.scream = function() { return undefined; } alert(myAnimal.scream());
81
![Page 82: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/82.jpg)
Prototyping
function Animal() { // Constructor alert(’Animal::Constructor’); } Animal.prototype.talk = function() { // Method return ”sound”; } var myAnimal = new Animal(); Animal.prototype.whisper = function() {v return ”….”; } myAnimal.scream = function() { return ”SOUND!”; } alert(myAnimal.whisper());
alert(myAnimal.talk());
alert(myAnimal.scream());
82
![Page 83: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/83.jpg)
Arv (inheritance)
• Utökar egentligen bara ett objekt med fler prototyper
• Konstruktorn till sub-klassen måste refereras explicit, annars används konstruktorn för föräldern
• Konstruktorn i föräldern måste anropas när arvet definieras
83
![Page 84: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/84.jpg)
Arv (inheritance)
function Dog() { Animal.call(this); alert(’Dog::Constructor’); } Dog.prototype = new Animal(); Dog.prototype.constructor = Dog; Dog.prototype.talk = function() { return ”woff woff”; } var myDog = new Dog(); alert(myDog.talk());
84
![Page 85: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/85.jpg)
Callbacks
• Funktioner som argument till funktioner
• Lämnar över ansvaret för att fånga upp data och event till den kallade funktionen
• Stor del av JavaScript och tredjeparts-bibliotek
”Om jag ger dig mitt telefonnummer så ringer du mig när du laddat ner nästa avsnitt av The Newsroom (2012) [red. anm. från iTunes]...”
85
![Page 86: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/86.jpg)
DOCUMENT OBJECT MODELThe road to hell is paved with good intentions
86
![Page 87: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/87.jpg)
87
![Page 88: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/88.jpg)
88
![Page 89: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/89.jpg)
Noder
• Varje element i ett HTML dokument är en nod i DOM-trädet (inklusive <!-- kommentarer -->)
• Det finns 12 olika typer av noder
• element, TextNode och AttributeNode är de tre typer som är intressanta för webbdesign
89
![Page 90: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/90.jpg)
Navigera i DOM
• getElementById(’param’) returnerar ett (1) element om det existerar ett element med angivet ID.
• getElementByTagName(’param’) returnerar en lista med element som det existerar ett eller flera sådana element.
90
![Page 91: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/91.jpg)
Operationer på noder
• element.childNodes returnerar en lista med alla noder direkt under element i DOM-trädet.
• element.parentNode returnerar den nod som finns direkt ovanför element i DOM-trädet.
• element.nextSibling returnerar den nod som finns direkt till höger och på samma nivå som element i DOM-trädet.
• element.previousSibling returnerar den nod som finns direkt till vänster och på samma nivå som element i DOM-trädet.
91
![Page 92: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/92.jpg)
Modifiera DOM-trädet
• document.createElement(’param’) skapar ett nytt element.
• document.createTextNode(’param’) skapar en ny TextNode.
• element.appendChild(element) placerar det angivna elementet sist i listan av noder direkt under det specificerade elementet.
• element.removeChild(element) tar bort ett element från listan av noder direkt under det specificerade elementet.
92
![Page 93: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/93.jpg)
93
![Page 94: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/94.jpg)
JQUERYThe Write Less, Do More, JavaScript Library
94
![Page 95: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/95.jpg)
www.liu.se
![Page 96: TDP013 lec11 2014 - IDATDP013/lectures/TDP013_lec1_2016.pdf · Server Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed](https://reader030.fdocuments.net/reader030/viewer/2022020319/5cfe41a688c99303098c7178/html5/thumbnails/96.jpg)
www.liu.se