Oppsummering - Til nå... (1/10-2015) Grunnleggende HTML... 1 Basic JavaScript... 2 Variabler:... 3 Operatorer:... 4 Klikkhendelser... 5 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander... 7 Logiske operatorer... 7 Løkker... 8 Arrayer... 10 "Ordinære"... 10 Løkker og arrayer... 10 Assosiative arrayer... 12 Arrayfunksjoner... 12 2 Dimmensjonale arrayer... 13 Hendelser... 14 Hendelsesparameter - Ikke "Essensielt"... 14 Tidsstyrte Hendelser... 16 Manipulere dokumenter... 16 Tilfeldige tall... 17 Funksjoner... 17 Definerer:... 17 Bruker/ Kaller:... 17 Eksempler:... 18 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> <select id="lstxxx">
<option value="???">tekst</option> <option value="???">tekst</option> </select> document.getelementbyid("lstxxx").value <!-- kommentar --> Basic JavaScript window.onload = oppstart; function oppstart() { //Kode her... 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.43247676823786 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 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; 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 ) { 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) >= (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 //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)
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]);
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);
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
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
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) {
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: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
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'
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...);
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; NB!NB! NB! Funksjonen stopper utførelsen dersom/når den møter på en return VIKTIG (med noen unntak): * Alt en funksjon bruker Må komme gjennom prametere * Alt den produserer MÅ sendes ut gjennom return * gi gode navn * håndtere alle parameterverdier * håndtere alle feil Funksjoner som gir ja/nei svar bør returnere true/false: function allelike(arr) { var forste = arr[0]; for(var i; i<arr.length; i++) { if( arr[i]!== forste ) { return false return true function oppstart() { var liste = [2,4,2,2,2,2,2]; if( allelike(liste) === true) { alert("yatzy"); else { alert("uyatzy");
Canvas <canvas width="???" height="????" id="tegneflate"></canvas> var ctx = document.getelementbyid("tegneflate").getcontext("2d"); ctx.beginpath(); ctx.moveto(x,y); ctx.lineto(x,y); ctx.stroke(); ctx.beginpath(); ctx.arc(x,y,diam,0,2*math.pi) ctx.stroke(); ctx.beginpath(); ctx.rect(x,y,vidde,høyde) ctx.stroke(); ctx.strokestyle = 'cssfarge' ctx.linewidth = tall Fyll: ctx.fillstyle = 'cssfarge' ctx.fill() //NB Kjør fill før stroke HUSK: X måles fra venstre kant, Y måles fra toppen Matte-funksjoner Math.pow(basistall,potens) Math.pow(2,10) 2 10 Math.sqrt(tall) Kvadratrot - Math.sqrt(4); Math.round(tall) Avrunding TIPS: Math.round(tall/100)*100 //Nærmeste 100 Math.floor(tall) Hugge av desimaler (for positive tall) ---- Runder alltid ned...
Math.abs(tall) Fjerner minus... Math.sin(vinkel) Math.asin(sinverdi) --- NBNBNBNB Måles i radianer...