TDP013. Webbprogrammering och interaktivitet. Introduktion, HTML5, CSS & Selenium. Anders Fröberg Institutionen för Datavetenskap (IDA)

Transkript

1 TDP013 Webbprogrammering och interaktivitet Introduktion, HTML5, CSS & Selenium Anders Fröberg Institutionen för Datavetenskap (IDA)

2 Kursens nyckelpersoner Examinator: Anders Fröberg Kursansvarig: Anders Fröberg Kursssistent: Alexander Kazen Kontakta mig gällande frågor om kursen. Kontakta kursassistent för hjälp kring laborationerna. 2

3 Kursens design 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. 3

4 Kursens litteratur Kursens kunskapsfilosofi 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 4

5 Kursens innehåll 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. 5

6 Kursens examination 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. 6

7 Kursens teknikval 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. 7

8 Kursens tekniska innehåll 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. 8

9 Varför utvecklar vi webbapplikationer? Skrivbords applikation Mr Gates 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 Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om att man kan uppdatera.

10 Varför utvecklar vi webbapplikationer? Skrivbords applikation Webbapplikation Mr Gates Outlook 2003 släpps Office 365 lanseras Mr Gates Användare köper och installerar. Användare skapar konto på nätet och betalar en liten summa varje månad. Outlook 2007 släpps Nya uppdateringar görs av sidan Nu krävs ny marknadsföring och skeppning av produkter till butiker Nästa gång användaren loggar in syns dessa nya ändringar Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om att man kan uppdatera. 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

11 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?

12 Server 1. Hämtar ett rent text dokument, användaren kan läsa med viss svårighet. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.

13 2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre. Server 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> Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.

14 2. Hämtar ett HTML dokument, hjälper inte användaren att läsa, blir bara värre. Server 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> 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. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat. Kapitel 1 Lorem ipsum dolor sit amet, elit. consectetur adipiscing Avsnitt 1 Vestibulum venenatis, velit sed cursus ultricies, sem nisi fringilla erat.

15 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> <table> <tr> <td>cell 1</td> <td>cell 2</td> Punkt 1 Punkt 2 Cell 1 Cell 2 Cell 3 Cell 4 <a href= >Google</a> Google (här har vi ett exempel på HTML attribut, i form av href )

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

17 HTML Class och ID class 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. id Markera ett unikt element i HTML koden. HTML dokumentet får bara innhålla ett element med ett visst id värde. <div class= ingress >Detta är text</div> <a class= external href=... >External</a> <button class= image-button ></button> <button id= send >Send</button> <a id= googlelink href=... >Google</a> <div id= leftcontent >...</div> Element kan ha både class och id definierade

18 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> Flera exempel på HTML attribut <form> <input type="checkbox" value="cc" />Send CC<br/> Message: <textarea rows="3"></textarea><br /> <button type="submit">send</button> </form>

19 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 apparel, sports, tools, groceries and general home and garden items. /> </head> <body> </body> </html> electronics, toys,

20 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

21 Validering av HTML kod 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

22 HTML 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 kontokortstransaktion er, 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.

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

24 De första stegen när man skapar ett HTML dokument... XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" Gamla sättet <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> HTML 5 <!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> Projekt godkänd metod

25 Färger På webben används s k additativ färgblandning Man blandar färgerna Röd, Grön och Blå (RGB) Hexadecimala A B C D E F # eller #000 = Svart #FFFFFF eller #FFF = Vit #FF0000 eller #F00 = Röd

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

27 Boxmodell height 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

28 Boxmodell padding height 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

29 border Boxmodell padding height 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

30 border Boxmodell padding height 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 margin Den faktiska bredden är = width + padding + border + margin

31 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

32 CSS - Selector En selector är ett syntax som avgör vilka element som skall påverkas av vilka regler. Selector h1.ingress #sendbutton div.ingress Förklaring En visst typ av element, t ex alla h1 element Alla element med attributet class satt till något värde, t ex class=ingress Elementet med ett visst id, t ex id=sendbutton Alla div element med class=ingress div h1 div.ingress h1 Nestlade selectorer, t ex alla h1 som ligger innuti div Alla kombinationer fungerar

33 En property avgör vilka egenskaper som skall ändras och value avgör vad den skall ändras till. CSS - Properties Property color width border Values RGB färgkod, sätter texten i det valda elementet till denna färg. Sätter bredden av ett element, använder enheter som px, % etc 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.

34 CSS - Exempel CSS a { color: #F00; } div h1 { font-size: 12px; border: 1px solid #CCC; } div.ingress { font-weight: bold; } img { cursor: pointer; } Utfall Alla länkar blir nu röda istället för standard blå Alla h1 taggar som ligger nestlade under div taggar får en mindre font storlek och en grå kant Alla div taggar som har class=ingress får fet stil Alla bilder gör nu om muspekaren till en hand istället för vanlig pekare när man håller musen över bilden.

35 CSS Hover selector a:hover { background-color: yellow; } 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å om man använder den i kombination med a elementet.

36

37

38 38 Live example1

39 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).

40 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

41 CSS Float & Clear 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

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

43 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 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. DIV

44 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

45 Validering Som med HTML, är korrekt CSS nödvändig för att webbläsaren skall slippa gissa vad som menas med koden. Congratulations! No Error Found. 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.

46 Separation av innehåll och presentation Enklare att skapa, underhålla och återanvända HTML När man bygger dynamisk a webbsidor är detta oumbärligt Går att skapa olika design beroende på webbläsare CSS CSS CSS Man kan skapa helt olika utseenden vid behov för samma HTML innehåll. Titta på:

47

48

49

50

51

52

53

54

55

56

57

58 CSS i HTML dokument Länkat... <head> <link rel= stylesheet type= text/css href= style.css /> </head>... Godkänd metod Header style... <head> <style type= text/css > a { color: #F00; } div.ingress { font-weight: bold; } </style> </head>... Detta är ibland OK i andra sammanhang

59 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å.

60 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

61 Selenium Ett verktyg för att testa webbplatser. I ett programmeringsspråk (t ex Python) skriver man kod för att beskriva olika flöden genom webbplatsen. Öppna sidan Hitta elementet med id värdet q 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. 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 61

62 Selenium Ett verktyg för att testa webbplatser. 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(" 62

63 Selenium Ett verktyg för att testa webbplatser.... inputelement = driver.find_element_by_name("q") inputelement.send_keys("cheese!") inputelement.submit()... 63

64 Selenium Ett verktyg för att testa webbplatser.... print driver.title try: WebDriverWait(driver, 10).until( lambda driver : driver.title.lower().startswith("cheese!") ) print driver.title finally: driver.quit() 64

65 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

66 ECMAScript Specifikationen för JavaScript och JScript Specificeras (delvis) av JavaScript och JScript Innehåller inte Document Object Model (DOM) 66

67 Användning av ECMAScript Mozilla Firefox Google Chrome Google documents Microsoft.NET Framework Adobe Flash Adobe Acrobat 67

68 ECMAScript edition 5 Lanserades 2009 Nuvarande version Stöd för JSON Uppdatering 5.1 Lanserades 2011 (Mer) kompatibel med edition 3 68

69 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

70 Variation hos olika applikationer Mozilla Firefox JavaScript (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

71 71 PROGRAMMERING

72 Tilldelningar och scope Variabler kan var som helst definieras globalt Funktioner har bara ett scope 72

73 Tilldelningar och scope function functiona() { variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // Returnerar Hello, world 73

74 Tilldelningar och scope function functiona() { var variable = Hello, world ; } function functionb() { return variable; } functiona(); functionb(); // ReferenceError: variable is not defined 74

75 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

76 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

77 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

78 Tilldelningar och scope function functiond() { if (1 == 1) { var variable = Hello, world ; } alert(variable); } functiond(); 78

79 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

80 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

81 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

82 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

83 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

84 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

85 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

86 The road to hell is paved with good intentions DOCUMENT OBJECT MODEL 86

87 87

88 88

89 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

90 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

91 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 DOMträdet. 91

92 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 93

94 The Write Less, Do More, JavaScript Library JQUERY 94

95

96