Oppsummering - Til nå... (1/ )

Transkript

1 Oppsummering - Til nå... (1/ ) Grunnleggende HTML... 1 Basic JavaScript... 1 Variabler:... 2 Operatorer:... 3 Klikkhendelser... 4 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander... 6 Logiske operatorer... 7 Løkker... 7 Arrayer... 9 "Ordinære"... 9 Løkker og arrayer... 9 Assosiative arrayer Grunnleggende HTML - Helt enkle dokumenter html, title, img, p, div, span, body, head, ul, ol, li, table++ - Struktur <html> <head> <script> <-- All JS her med referanse til tign i body... </script> </head> <body> </body> </html> - <input type="text" id="txtfjfdfh"></input> <button id="btnknapp" type="button">djjsdksdjkl</button>  Basic JavaScript window.onload = oppstart; function oppstart() { //Kode her...

2 SKRIV PEN KODE - MED INDENTERING REKKEFØLGE KODE UTFØRES Eksempel: var t = 45; document.getelementbyid("id-på-element").innerhtml = t; //45 t = 76; LÆR DERE Å BRUKE DEBUGGER (F12 I Chrome) // Enlinjekommentarer /* Er flerlinje kommentarer */ Endre innhold i en tag: document.getelementbyid("id-på-element").innerhtml = verdi; id-på-element.innerhtml = verdi <div id="id-på-element">dhdh</div> Variabler: var navn = verdi; navn = verdi verdi = variabel var tekst = "tekst"; var tall = 5; var tall2 = 5.89; var tekst = "456"; var tall = parseint(tekst); var tekst = "45.6"; var tall = parsefloat(tekst); var tall =

3 var tekst = tall.tofixed(2) document.getelementbyid("utskrift").innerhtml = tall.tofixed(2) var tekst = "Det var en \"fin\" dag"; var filsti = "C:\\hei\\temp\\test" var tekst = "Hei på deg"; alert ( tekst.length) // 10 var tegn = tekst.charat(7) // "d" var posisjon = tekst.indexof("å") // 5 var del = tekst. substr(3,4) // " på " tekst.replace(" ", "") tekst.replace("å", "ae") Regular expressions var storebokstaver = tekst.touppercase() var svar = "oslo"; //Fra bruker var riktig = "Oslo"; if( svar ===riktig ) // false if ( svar === "Oslo" svar === "oslo" svar === "OSLO" svar === "OsLo" ) if( svar.touppercase() === riktig.touppercase() ) Operatorer: var t = 4 + 6; var t2 = t + 67; var t3 = 4-5; var t4 = 5 * 5; var t5 = 7 / 6; var test = 45; test = test + 1; // 46 test += 1; // 47 test++; //48 var test = 45; test = test - 1; // 44

4 test -= 1; // 43 test--; //42 test *= 5; // test = test * 5 test /= 5; // test = test / 5 var personer = 4; var epler = 25; var igjen = epler % personer; // 1 var sammehengendetekst = "Hei på" + "deg"+ alder; var tekst += "nok en gang"; Hente verdi fra en tekstboks: <input type="number" id="txtalder"></input> var alder = parseint(document.getelementbyid("txtalder").value); <input type="text" id="txtnavn"></input> var navn = document.getelementbyid("txtnavn").value; Klikkhendelser window.onload = oppstart; function oppstart() { //Kode her... document.getelementbyid("btnknapp").onclick = klikket;

5 function klikket() { var navn = document.getelementbyid("txtnavn").value; Kontrollstrukturer Valgsetninger Kode før if ( betingelse ) { Kode etter Kode før if ( betingelse ) { //Kl1 //Kl2 Kode etter Benytt alltid { og Betingelse er f.eks.: alder > 56; tekst === "Hei" Kode før if ( betingelse ) { else { //Kode Kode etter Kode før if ( betingelse ) {

6 else if (betingelse){ else if (betingelse){ else { //Kode Kode etter HUSK mest spesifikke først... Kode før if ( alder > 50 ) { else if ( alder > 18){ else if ( alder > 0){ else { //Kode Kode etter ( betingslese? sannverdi : usannverdi ) var tekst = ( alder > 18? "myndig" : "umyndig") var lonn = (alder > 18? 200 : 90 ) * anttimer; Betingelser/påstander HUSK må ALLTID gi svaret ja eller nei === (er lik)!== (ulike) > (større enn) < (mindre enn)

7 >= (større enn eller lik) <= (mindre enn eller lik) verdi operator verdi alder > 18 IKKE bruk == og!= var myndig = alder > 18; if( myndig === true) if( myndig) Logiske operatorer && (OG) (ELLER - En eller begge)! (IKKE) alder > 18 && hoeyde > 180 alder > 18 && < 90 alder > 18 && alder < 90 alder > 18 hoeyde > 180 if (!( alder > 18 hoeyde > 180 ) ) Løkker //Kode før if ( betingelse ) { //Kode etter

8 //Kode før while ( betingelse ) { //Kode etter var tall = 10; while (tall > 0) { alert(tall); tall--; for (var tall = 10; tall > 0; tall-- ) { alert("hei"); for (var tall = 0; tall < 10; tall++) { alert(tall); for (var tall = 0; tall < 10; tall++) { tall+=3; alert(tall)

9 for (var tall = 0; tall < 10; tall++) { if( tall % 2 === 0) { alert(tall); break; // Stopper løkka continue; // Hopper til neste runde Arrayer "Ordinære" var poeng = [34, 23, 67, 2, 4, 8] ; poeng[2] = 245; // [34, 23, 245, 2, 4, 8]; poeng[3]++; // [34, 23, 245, 3, 4, 8]; alert ( poeng[5] ); // 8 NB! NB! NB! NB! NB! Vi starter å telle på 0 var antall = poeng.length // 6 Legge til på slutten: poeng[poeng.length] = 324; // [34, 23, 245, 3, 4, 8, 324]; var navn = [ ]; navn[navn.length] = "Tom"; Løkker og arrayer var navn = ["Tom","Ole","Knut"]; alert(navn[0]);

10 alert(navn[1]); alert(navn[2]); Gjør følgende, men hver gang med en verdi som er 1, 2,3,4, osv.: alert(navn[0]); for ( var i = 0; i<3 ; i++) { alert(navn[i]); for ( var i = 0; i<navn.length ; i++) { alert(navn[i]); var sum = 0; for ( var i = 0; i<poeng.length ; i++) { sum += poeng[i]; alert(sum); var sum = 0; for ( var i = 0; i < poeng.length ; i++) { sum += poeng[i]; alert(sum); for ( var i = 0; i < poeng.length ; i++) { if (poeng[i] > maks ) { maks = poeng[i]; alert(maks);

11 Assosiative arrayer var poeng = [34, 23, 67, 2, 4, 8] ; poeng[2] = 245; // [34, 23, 245, 2, 4, 8]; alert( poeng[1] ) var deltagerpoeng = { Knut : 34, Ole : 25, Per : 45 deltagerpoeng["per"] = 76; alert( deltagerpoeng["ole"] ) deltagerpoeng.knut = 3445; var status = { status["per"] = "OK"; var sum = 0; for (var nokkel in deltagerpoeng) { sum += deltagerpoeng[nokkel]; alert(sum); for (var nokkel in deltagerpoeng) { alert (nokkel + " fikk " + deltagerpeong[nokkel] + " poeng" ); if( ("Per" in deltagerpoeng ) === true){ if( "Per" in deltagerpoeng){ Arrayfunksjoner

12 var tall = [6,7,3,4,5,2]; var tekst = tall.join("#") // "6#7#2#4#5#2" var tekst = "<p>" +tall.join("</p><p>") + "</p>" var verdier = "Per,Ole,Tom,Nils"; //Input fra bruker... var navn = verdier.split(",") // ["Per","Ole","Tom","Nils"]; alert(tall); document.getelementbyid("utskrift").innerhtml = tall alert(tekst); document.getelementbyid("utskrift").innerhtml = tekst var posisjon = tall.indexof(2) // 5 var posisjon2 = tall.indexof(8) // -1 tall.splice(3,2) // Fjern alle elementer fra pos. 3 og 2 stykk etter => [6,7,3,2] tall.sort(); tall.reverse(); 2 Dimmensjonale arrayer var bilinfo = [ ] bilinfo[0] = ["AS-44523","Nissan","X-Trail",2009] bilinfo[1] = ["B-313","Donalbil","v1",1952] bilinfo[2] = ["A-1","Mercedes","C1",2100] alert ( bilinfo[0][2] ) //X-Trail var bilinfo = [ ] bilinfo[0] = {NR: "AS-44523", Merke: "Nissan", Modell: "X-Trail",Aar: 2009

13 bilinfo[1] = {NR: "B-313", MErke: "Donalbil",Modell: "v1",aar: 1952 alert( bilinfo[1]["modell"] ) // v1 Hendelser window.onload = oppstart; function oppstart() { //Kode her... document.getelementbyid("btnknapp").onclick = klikket; function klikket() { //Kode onmousedown onmouseup onmousemove onmouseover onmouseout document.onkeypressed document.onkeydown document.onkeyup Hendelsesparameter - Ikke "Essensielt" window.onload = oppstart; function oppstart() { //Kode her... document.getelementbyid("btnknapp").onclick = klikket; function klikket(evt) {

14 hjørne alert ( evt.clientx ) //X-koordinaten til musa - HUSK 0,0 er øverste venstre window.onload = oppstart; function oppstart() { //Kode her... document.getelementbyid("btnknapp").onclick = klikket; document.getelementbyid("btnknapp2").onclick = klikket; function klikket(evt) { if( evt.currenttarget === document.getelementbyid("btnknapp") ) window.onload = oppstart; function oppstart() { //Kode her... document.onkeypressed = tasttrykket; function tasttrykket (evt) { if( evt.keycode === 8) if( evt.keychar=== "A") Se:

15 Tidsstyrte Hendelser function plagbruker() { alert("yo!"); var id; function oppstart() { id = setinterval("plagbruker()", 300) // 300 ms, 1000 ms = 1 sekund document.getelementbyid("btnstopp").onclick = stop; function stop() { clearinterval(id); Finnes en settimeout som gjør noen 1 gang.. Manipulere dokumenter var nyttelement = document.createelement("li"); nyttelement.innerhtml = "?????"; nyttelement.id = "fjfk" document.getelementbyid("liste").appendchild(nyttelement); <ul id="liste"></ul> document.getelementbyid("liste").removechild(nyttelement); Endre CSS document.getelementbyid("utskrift").style.cssegenskap = verdi document.getelementbyid("utskrift").style.color = 'red'

16 document.getelementbyid("utskrift").classname = klassenavn Tilsvarer <p id="utskrift" class="klassenavn"> Tilfeldige tall Math.random() // Gir tall fra og med 0, til 1 Math.random()*intervallstørrelse + intervallstart intervallstart + intervallstørrelse // gir tall fra intervallstart til Math.random() *4 + 5 // fom 5, t 9 Math.floor( Math.random()* 4 + 5) Funksjoner Definerer: function funksjonsnavn () { function funksjonsnavn ( parameter1, param2, param3 osv..) { return verdi Bruker/ Kaller: funksjonsnavn(); funksjonsnavn(argument1, argument2, argument3 osv...);

17 Eksempler: function summertall(tall1, tall2) { return tall1+tall2; function oppstart() { var talla = document.getelementbyid("txttalla").value; var svar = summertall(talla,9) document.getelementbyid("resultat").innerhtml = svar; VIKTIG (med noen unntak): * Alt en funskjon bruker Må komme gjennom prametere * Alt den produserer MÅ sendes ut gjennom return