JavaScript. En Introduktion

Storlek: px

Starta visningen från sidan:

Download "JavaScript. En Introduktion"

Stig Sundberg
för 6 år sedan
Visningar:

1 JavaScript En Introduktion

2 Innehåll Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript

3 Introduktion Ingen koppling till Java Statiska och dynamiska webbsidor (HTML, XHTML PHP, ASP, ASP.NET) Förr DHTML, nudom Scripting JavaScript kan utgöra en säkerhetsrisk Microsoft stöder JavaScript för att skapa Windows 8-appar

4 Fördelar med Javascript Plattformsoberoende Minskad datatrafik Snabbare feedback Utökad interaktiv funktionalitet

5 Viktiga aspekter Det ska vara lätt att underhålla och återanvända kod <script type= text/javascript src= scripts.js /> <script type= text/javascript src= morescript.js /> Sidan ska fungera i olika webbläsare Objektdetektering Webbläsarberoende Läsare som saknar stöd för JavaScript Webbsidan ska fungera bra även för de webbklienter som ej stödjer JavaScript

6 Var ska skriptet vara? Ett HTML-dokument kan innehålla ett obegränsat antal skript Skript kan skrivas i <body> eller <head> och / eller i båda Vanligtvis skrivs alla skript på ett ställe <head> När en extern fil länkas in När inline skript används <body> När inline skript används Kan se till att allt som används har laddats först <body onload= kod();" > <window onload= kod();" > Fungerar inte alltid om man bläddrar framåt eller bakåt

7 Script i HTML-koden Med JavaScript kan ni skriva direkt i HTML-koden. Om ni vill skriva olika saker vid olika tillfällen <body> <script> if (heading) { document.write("<h1>överskrift</h1>"); } else { document.write("<p>paragraf</p>"); } </script> </body>

8 Regler för JavaScript Ett kommando avslutas med semikolon ; Ett block i Javascript börjar med { och slutar med } Javascript är Case sensitive Det är skillnad på Ulrik och ulrik Det går att göra radbrytning i koden utan att den ändrar funktion med \ var ulrik = En lärare ; var ulrik = En \ lärare

9 Gör innehållet interaktivt Innehållet på en HTML-sida kan förändras vid musklick eller andra händelser Sidan kan bli dynamisk och interaktiv <head> <script> function displaydate() { document.getelementbyid( datum").innerhtml=date(); } </script> </head> <body> <p id= datum"> Här kommer datumet att visas. </p> <button type="button" onclick="displaydate()">visa datum</button> </body>

10 Kommentarer Precis som med all slags programmering är kommentering viktig Glöms ofta bort //Kommentar på enkel rad Var x=5; // En variabel med namnet x och värdet 5 /* Kommentarer som spänner över flera rader */

11 Prompt och alert <script type="text/javascript"> // Öppnar en prompt som användaren kan skriva i var mittnamn = prompt("skriv ditt namn: ", ""); // If-sats som kontrollerar om namnet är Stefan if (mittnamn == "Stefan") { //Öppnar ett pop-up-fönster alert("hej på mej!"); else { alert("hej på dej!"); </script>

12 Funktioner och objekt Allt i JavaScript är objekt Objekt har: Egenskaper (properties) objekt.namn, objekt.storlek,. De kan ändras och hämtas Metoder (methods) objekt.start(), objekt.addera()

13 Objekthierarki

14 Funktioner Funktionen kan finnas i både <head> och <body> och användas på båda ställen Precis som alla andra skript <head> <script> function enfunktion { alert("jag heter Stefan Berglund och jobbar som lärare); } </script> </head> Funktionen anropas med sitt namn (enfunktion)

15 Argument Funktioner kan ha argument Ett argument är en variabel som skickas med när funktionen anropas <head> <script> function myfunction(name,job){ alert("jag heter " + name + " och jobbar som " + job);} </script> </head> <body> <p>starta en funktion med argument</p> <button onclick="myfunction('stefan Berglund','lärare')">Klicka</button> </body>

16 Datatyper och operatorer De tre vanligaste datatyperna: String, Number, Boolean OBS! Null och Undefined Operatorer: +, -, *, /, %, ++ och Datatyperna är dynamiska var x // x är inte definierad x = 34; // x är ett nummer x = Ulrik"; // x är en sträng

17 Konvertering av datatyper var minvariabel = ; var minvariabel = 1 + Number( 2 ) var minvariabel = 1+2; minvariabel = Number() parsefloat() parseint()

18 Dataobjekt var strsträng = new String(); var dateidag = new Date(); alert( Året är: + dateidag.getfullyear()); alert( PI har värdet: + Math.PI); alert( PI avrundat: + Math.round(Math.PI));

19 Arrayer var strarray = new Array( Ett, Två, Tre ); var strarray2 = new Array(3); var strarray3 = new Array(); var strarray4 = new Array(1, Två, 3.45); strarray[0] = Ett ; strarray[1] = Två ; alert( Värdet i andraposition: + strarray[1

20 Villkor (If-satser) Operatorer: ==,!=, >, >=, < och <= Logiska operatorer: &&, och! if ( ett villkor ett annat villkor){ // händelse om villkoret uppfyllt else { // händelse om villkoret ej uppfyllt

21 Break Break() kan användas för att hoppa ut ur en loop Break() bryter loopen och fortsätter exekvera koden efter loopen (om sådan finns) <script> function myfunction() {var x="",i=0; for (i=0;i<10;i++) { if (i==3) { break; } x=x + Nummer: " + i + "<br>"; document.getelementbyid("demo").innerhtml=x; </script>

22 Continue Continue() kan användas för att hoppa över ett steg i en loop <script> function myfunction() {var x="",i=0; for (i=0;i<10;i++) { if (i==3) { continue; } x=x + Nummer: " + i + "<br>"; document.getelementbyid("demo").innerhtml=x; </script>

23 Switch switch ( intnummer ) { case 1: // kod om case = 1 break; case 2: // kod case = 2 break; default: // kod om ej något av tidigare case uppfyllts

24 Loopar (For, While) for (initialt värde; loopvilkor; händelse){ // kod som upprepas while ( loopvillkor ){ // kod som upprepas

25 Händelsehantering Exempel på händelser (events): En webbsida laddas En bild laddas En knapptryckning på musen Tryck på en tangent Kan vara en särskild tangent När musen rör sig över något (hoover)

26 Händelsehantering och Css Definiera ej utseendet i din JavaScript-kod! var n=document.getelementbyid( nav ); n.classname = dynamic

27 Struktur, utseende och beteende <p>här har vi lite text</p> p{ color: red; var paragraf = document.getelementsbytagname( p ); for (var i=0; i<paragraf.length; i++){ paragraf[i].onclick = function(){ alert( Du klickade på paragraf + (i+1));

28 Händelsehantering och Css Inlinestilmallar: alert( p-taggens färg: + paragraf.style.color); paragraf.style.color = blue ;

29 Händelsehantering och Css Vanliga stilmallar:.nystil{ font-size: 1.5em; var meny = document.getelementbyid( meny ); meny.classname = nystil ; Alternativt: meny.setattribute( class, nystil );

30 Felhantering Med try kan du definiera ett kodblock som ska testas för fel medan det körs Med catch() kan du definiera ett block av kod som skall exekveras om ett fel uppstår i try-blocket. Try och catch() används tillsammans try { //Kör kod här } catch(err) { //Om det blir fel hanteras det med den här koden }

31 Skapa ett felmeddelande Med throw kan du beskriva vad som gått fel catch(err) kan då beskriva vad som hänt <body> <script> function myfunction() { try { var x=document.getelementbyid("demo").value; if(x=="") throw "tomt"; if(isnan(x)) throw "inte ett nummer"; if(x>50) throw "för högt"; if(x<10) throw "för lågt"; catch(err) { var y=document.getelementbyid("mess"); y.innerhtml="det du skrev är " + err + "."; </script> <p>slå in ett nummer mellan 10 och 50:</p> <input id="demo" type="text"> <button type="button" onclick="myfunction()">testa</button> <p id="mess"></p> </body>

32 Validering med JavaScript Används väldigt ofta Kolla om texten är ifylld på ett korrekt sätt innan den skickas <script> function validateform() { var x=document.forms["myform"][" "].value; var atpos=x.indexof("@"); var dotpos=x.lastindexof("."); if (atpos<1 dotpos<atpos+2 dotpos+2>=x.length) { alert( Det är inte en korrekt -adress"); return false; </script>

Relevanta dokument

JavaScript En Introduktion

Innehåll JavaScript En Introduktion Introduktion till JavaScript Händelsehantering och CSS Felhantering i JavaScript Validering i JavaScript Introduktion Ingen koppling till Java Statiska och dynamiska