JavaScript. Innehåll. Historia. Document object model DHTML. Varför Javascript?

Transkript

1 Innehåll JavaScript En introduktion till skriptspråket JavaScript och till DOM Scripting Introduktion till JavaScript och DOM JavaScript Syntax DOM och DOM Scripting Händelsehantering och CSS Historia Document object model Skapat 1995 av Netscape och Sun JavaScript Java JavaScript, (VBScript), Jscript, EcmaScript DHTML = HTML + CSS + JavaScript DOM Netscape, Microsoft och W3C A platform and language neutral interface that will allow programs and scripts to dynamically access and update the content, structure and the style of documents W3C:s defenition DHTML Varför Javascript? <div id= inforuta >Min text!</div> #inforuta { position: absolute; left: 100px; var x = document.getelementbyid( inforuta ).style.left; Minskad datatrafik + Snabbare feedback Utökad interaktiv funktionalitet Lättvikts RIA (Rich Internet Applications) slipper installation ti av Java applets och liknande slipper installation av pluggins som Flash spelare mindre filer än Java applets och Flashapplikationer 1

2 Varför inte JavaScript? JavaScript JavaScript kan utgöra en säkerhetsrisk Alla webbläsare har stödjer inte JavaScript och vissa användare väljer att slå av stödet Webbsidan ska fungera bra även för de webbklienter som ej stödjer JavaScript! Ett interpreterande scriptspråk jämfört med Java som kräver kompilering Koden tolkas av webbläsaren <script> //Och här har jag flera rader med scriptkod </script> <script type= text/javascript src= skript.js /> <script type= text/javascript src= skript2.js /> Uttryck och kommentarer Variabler och Datatyper Statements: Första uttrycket Andra uttrycket Första uttrycket; Andra uttrycket; Första uttrycket; Andra uttrycket; Kommentarer: // Kommentar /* Kommentar som spänner Över flera rader */ Variabler: Svagt typade Måste inte deklareras Case sensitive Datatyper: Strängar, Heltal, Flyttal, Boolska, Arrayer Variabler och Datatyper Konvertering av datatyper var age = Trettionio ; // strängvariabel age = 39; // heltalsvariabel // skiljer sig från age= 39 ; var Age = 39.5; // flyttalsvariabel // age och Age är två olika variabler var minvariabel = ; var minvariabel = 1 + Number( 2 ) Number() parsefloat() parseint() var adult = true; // boolsk variabel 2

3 Arrayer Aritmetiska Operatorer Lagrar flera värden av samma eller olika typ Index: Värden nås genom index Element var colors = new Array(); // array av colors[0] = red ; // strängvariabler colors[1] = blue ; var Tal = [ Ett, Två, Tre, Fyra ]; + * och / var age = 39 + år ; // 39år var Age = ; // 39 age = ; // 381 Age = 38; Age += 1; // 39 Jämförande Operatorer och IF-satser ==!= > >= < och <= age = 39; if (age < 40) { alert( Ingen kris ännu? ) if (age == 40) { alert( Nu blir det kris... ); // Notera == inte bara = då tilldelas age värdet 40! Logiska Operatorer och If-satser && och! if (age >= 40 && name!= Silvia ) { alert( Du börjar bli gammal ) else { alert( Lika vacker som alltid...? ) CASESATSER LoopAR switch (betyg) { case "3": alert( Helt ok'); break; case "4": alert( Bra jobbat'); break; case "5": alert( Riktigt bra jobbat!'); break; default: alert( Det är bara att kämpa vidare...'); while, do while och for var stoppbuttonpressed = false; while (stoppbuttonpressed == false){ alert( Vi kör vidare tills du trycker stopp! ); for (var i = 0; i < 10; i++){ alert(i); // i++ är samma som i+=1 och i = i + 1; 3

4 Funktioner Funktioner Kod som läggs i en funktion kan återanvändas Effektivare och mer överskådligt En funktion kan ta emot parametrar och returnera ett värde function addera(tal1, tal2){ var resultat = tal1 + tal2; return resultat; var summa = addera(10, 5); En variabel kan vara global eller lokal. Lokala variabler deklareras i funktioner och globala utanför Funktioner Dataobjekt Riskabelt att använda globala variabler! function addera(tal1, tal2){ resultat = tal1 + tal2; return resultat; var resultat = 100; var summa = addera(20+30); alert(resultat + summa); JavaScript har fördefinierade objekt, och man kan skapa sina egna Ett objekt kan ha egenskaper, utföra metoder och reagera på händelser var colors = [ Red, Green, Blue, Yellow ]; alert(colors.length); function dice(){ var number = Math.floor(Math.random()*6) + 1; Document object Model (DOM) Demonstration av JavaScript En standardiserad modell där man ser en webbsida och dess innehåll som objekt Objekten hänger ihop Elementträd 4

5 elementnoder DOMs viktigaste metoder Kan inneha andra elementnoder, attributnoder och/eller en textnod var meny = document.getelementbyid( minmeny ); var lista = document.getelementbytagname( li ); var minatagg = document.getelementbytagname( a ); alert(minatagg[0].getattribute( href )); minatagg[0].setattribute( href, )); Children, ParentS, SiblingS And Values <body> <h1>rubrik</h1> <p>textstycke</p> <h2>underrubrik</h2> <ul id= MinLista > <li>listvärde 1</li> <li>listvärde 1</li> <li><a href= >di.se</a></li> </ul> </body> Children, ParentS, SiblingS And Values var minlista = document.getelementbyid( MinLista ); var listenheter = minlista.getelementsbytagname( li ); for(var i = 0; i < listenheter.legth; i++){ // Gör något smart document.getelementbytagname ( p )[0].firstChild.nodeValue= Hej världen ; Läsa och ändra Attribut Objektdetektering var firstlink = document.getelementbytagname( a )[0]; if(firstlink.getattribute( href ) == ){ firstlink.setattribute( href, i i ); Kontroll om det finns stöd för DOM <script type=text/javascript> if (document.getelementbyid && document.createtextnode) { // Den kod jag tänkt... return; else { // Anpassad kod, dvs mer kod... </script> 5

6 händelsehantering Exempel på händelser (events): en webbsida laddas en bild laddas en knapptryckning k tryck på en tangent när musen rör sig över något Demonstration av DOM 6