Upload
vuongtu
View
221
Download
0
Embed Size (px)
Citation preview
Webbprogrammering och interaktivitet
Introduktion, HTML5, CSS & Selenium
TDP013
Anders Fröberg Institutionen för Datavetenskap (IDA)
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.
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.
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
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.
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.
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.
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.
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
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
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 ?
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.
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.
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.
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
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.
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
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
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>
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…
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”
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
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.
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
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
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.
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
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
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
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
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
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.
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.
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.
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.
Live example1
38
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).
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
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.
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.
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.
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
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.
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/
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
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å.
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
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.
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")
Selenium – Ett verktyg för att testa webbplatser.
63
.....
inputElement = driver.find_element_by_name("q")
inputElement.send_keys("Cheese!")
inputElement.submit()
.......
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()
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
ECMAScript
• Specifikationen för JavaScript och JScript
• Specificeras (delvis) av JavaScript och JScript
• Innehåller inte Document Object Model (DOM)
66
Användning av ECMAScript
• Mozilla Firefox
• Google Chrome
• Google documents
• Microsoft .NET Framework
• Adobe Flash
• Adobe Acrobat
67
ECMAScript edition 5
• Lanserades 2009
• Nuvarande version
• Stöd för JSON
• Uppdatering 5.1 • Lanserades 2011 • (Mer) kompatibel med edition 3
68
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
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
PROGRAMMERING
71
Tilldelningar och scope
• Variabler kan var som helst definieras globalt
• Funktioner har bara ett scope
72
Tilldelningar och scope
function functionA() { variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // Returnerar ”Hello, world”
73
Tilldelningar och scope
function functionA() { var variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // ReferenceError: variable is not defined
74
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
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
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
Tilldelningar och scope
function functionD() { if (1 == 1) { var variable = ”Hello, world”; } alert(variable); } functionD();
78
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
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
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
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
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
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
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
DOCUMENT OBJECT MODELThe road to hell is paved with good intentions
86
87
88
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
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
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
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
93
JQUERYThe Write Less, Do More, JavaScript Library
94
www.liu.se
www.liu.se