JavaScript En Introduktion

Transkript

1 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 webbsidor (HTML, XHTML PHP, ASP, ASP.NET) Förr DHTML, nu DOM Scripting JavaScript kan utgöra en säkerhetsrisk Microsoft stöder JavaScript för att skapa Windows 8-appar Fördelar med JavaScript Plattformsoberoende Minskad datatrafik Snabbare feedback Utökad interaktiv funktionalitet Lättvikts RIA (RichInternet Applications) - slipper installation av Java-applets och liknande - slipper installation av plugins som Flash-spelare - mindre filer än Java-applets och Flashapplikationer Var ska skriptet vara? Ett HTML-dokument kan innehålla obegränsat med skript Skript kan skrivas i eller och / eller i båda Vanligtvis skrivs alla skript på ett ställe är bästa alternativet 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 /> Viktiga aspekter Sidan ska fungera i olika webbläsare Objektdetektering Webbsidan ska fungera bra även för de webbklienter som ej stödjer JavaScript! 1

2 Script i HTML-koden if (heading) { document.write("<h1>överskrift</h1>"); else { document.write("<p>paragraf</p>"); 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 med \ göra radbrytning i koden utan att den ändrar funktion var ulrik= En lärare ; var ulrik= En \ lärare ; Gör innehållet interaktivt Innehållet på en HTML-sida kan förändras vid musklick eller andra händelser function displaydate() { document.getelementbyid( datum").innerhtml= Date(); <p id= datum">här visas dagens datum.</p> <button type="button" onclick="displaydate()"> Visa datum</button> Kommentarer - Det är viktigt att kommentera kod! //Kommentar på enkel rad Var x=5; // En variabel med namnet x och värdet 5 /* Kommentarer som spänner över flera rader */ 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!"); 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() 2

3 Funktioner Funktionen kan finnas i både och och användas på båda ställen function minfunktion { alert("jag heter Stefan Berglund och jobbar som lärare); minfunktion(); Argument Funktioner kan ha argument Ett argument är en variabel som skickas med när funktionen anropas function myfunction(name,job){ alert("jag heter " + name + " och jobbar som " + job); <p>starta en funktion med argument</p> <button onclick="myfunction('stefan', Lärare')"> Klicka här</button> 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 Konvertering av datatyper var minvariabel = ; var minvariabel = 1 + Number( 2 ) var minvariabel = 1+2; minvariabel = Number(minVariabel); parsefloat(minvariabel); parseint(minvariabel); Dataobjekt var strstring = 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)); 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 3

4 Villkor (If-satser) Operatorer: ==,!=, >, >=, < och <= Logiska operatorer: &&, och! if( x == 1 x > 10) { // händelse om villkoret uppfyllt else{ // händelse om villkoret ej uppfyllt Break Break() kan användas för att hoppa ut ur en loop 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; Continue Continue() kan användas för att hoppa över ett steg i en loop 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; Switch switch ( intnummer ) { case 1: // kod om case= 1 break; case 2: // kod om case= 2 break; default: // kod om ej något av tidigare caseuppfyllts Loopar (For, While) for (initialt värde; loopvilkor; händelse) { // kod som upprepas while ( loopvillkor ) { // kod som upprepas 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) 4

5 Struktur, utseende och beteende <p>här har vi lite text</p> p{ color: red; Händelsehantering och CSS Inlinestilmallar: alert( p-taggens färg: + paragraf.style.color); paragraf.style.color = blue ; var paragraf = document.getelementsbytagname( p ); for (var i=0; i<paragraf.length; i++){ paragraf[i].onclick = function(){ alert( Du klickade på paragraf + (i + 1)); Händelsehantering och CSS Definiera ej utseendet i din JavaScript-kod! var n=document.getelementbyid( nav ); n.classname = dynamic Händelsehantering och CSS Vanliga stilmallar:.nystil { font-size: 1.5em; var meny = document.getelementbyid( meny ); meny.classname = nystil ; Alternativt: meny.setattribute( class, nystil ); 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 Skapa ett felmeddelande <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> 5

6 Skapa ett felmeddelande 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; Validering med JavaScript Används väldigt ofta Kolla om texten är ifylld på ett korrekt sätt innan den skickas 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; 6