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

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.


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.


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



<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



<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


width

heig

htpadding

Boxmodell


width

heig

htpadding

border

Boxmodell


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.

http://www.w3schools.com/cssref/css_selectors.asp

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.


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.


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.


• 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.


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")


63

.....

inputElement = driver.find_element_by_name("q")

inputElement.send_keys("Cheese!")

inputElement.submit()

.......


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


function functionA() { variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // Returnerar ”Hello, world”

73


function functionA() { var variable = ”Hello, world”; } function functionB() { return variable; } functionA(); functionB(); // ReferenceError: variable is not defined

74


var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (p in persons) { alert(p); } } functionC(); alert(p);

75


var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (var p in persons) { alert(p); } } functionC(); alert(p);

76


var persons = new Array(); persons[”Anders”] = ”Froberg”; persons[”Erik”] = ”Berglund”; function functionC() { for (var p in persons) { alert(p); } alert(p); } functionC();

77


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 )

• 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

Documents

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