Oppsummering - Kurset (10/11-2015) Grunnleggende HTML... 1 Basic JavaScript... 2 Variabler:... 3 Operatorer:... 4 Klikkhendelser... 5 Kontrollstrukturer... 5 Valgsetninger... 5 Betingelser/påstander... 7 Logiske operatorer... 8 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 Canvas... 19 Matte-funksjoner... 19 Filbehandling... 20 Lese all data... 20 Behandle strukturerte data (csv)... 20 XML... 21 JSON... 22 Skrive til fil... 22 Lage en Proxy... 23 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... 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 ) { //Kode... else { //Kode Kode etter Kode før if ( betingelse ) { //Kode... else if (betingelse){ //Kode... else if (betingelse){ //Kode... else { //Kode Kode etter HUSK mest spesifikke først... Kode før if ( alder > 50 ) { //Kode... else if ( alder > 18){
//Kode... else if ( alder > 0){ //Kode... 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... //Kode etter //Kode før while ( betingelse ) { //Kode... //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 // gir tall fra intervallstart til intervallstart + intervallstørrelse Math.random() *4 + 5 // fom 5, t 9 Math.floor( Math.random()* 4 + 5) Funksjoner Definerer: function funksjonsnavn () { //Kode... function funksjonsnavn ( parameter1, param2, param3 osv..) { //Kode... 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... Filbehandling Lese all data Når vi ønsker starte lesingen: xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = statusforanding; xmlhttp.open("get", "filnavn", true); xmlhttp.send(); Husk lag den globale variabelen: var xmlhttp; Legg til endrignsfunskjonen: function statusforanding() { if (xmlhttp.readystate === 4 && xmlhttp.status === 200 ) { var innhold = xmlhttp.responsetext; //Gjør noe med innhold. Behandle strukturerte data (csv) verdi verdi2 verdi3 verdi verdi2 verdi3 Forskjell er endringsfunksjonen: function statusforanding() {
if (xmlhttp.readystate === 4 && xmlhttp.status === 200 ) { var innhold = xmlhttp.responsetext; var linjer = innhold.split("\n"); for(var i=0; i<linjer.length; i++) { var deler = linjer[i].split(" "); if(deler.length ===????????????) { // Gjør ett eller annet med delene til aktuelle linje... XML Endringsfunksjonen er forskjellig: function statusforanding() { if (xmlhttp.readystate === 4 && xmlhttp.status === 200 ) { var dataxml = xmlhttp.responsexml; Husk for XML:.getElementsByTagName("taggnavn")[0] <= Henter element nr 0 med gitt navn.getelementsbytagname("taggnavn") <= Hente ut en liste med tagger/noder.childnodes[0].nodevalue <= Henter teksten til et element.attributes.getnameditem("attributtnavn").value <= Henter attributtet navn til et element
JSON Endringsfunksjonen er forskjellig: function statusforanding() { if (xmlhttp.readystate === 4 && xmlhttp.status === 200 ) { var innhold = JSON.parse(xmlhttp.responseText); //Håndter innhold som om det var en array-struktur Skrive til fil Vi må ha et PHP-script: <?php $verdi = $_GET["verdi"]; $verdi2 = $_GET["verdi2"]; $verdi3 = $_GET["verdi3"]; $resfil = fopen("filnavn","a"); $linje = $verdi. " ". $verdi2. " ". $verdi3. "\n"; fwrite($resfil,$linje); fclose($resfil);?> Bruke PHP i JavaScript:
var verdi = document.getelementbyid("txtverdi").value; var verdi2 = document.getelementbyid("txtverdi2").value; var verdi3 = document.getelementbyid("txtverdi3").value; var url = "filnavn.php?verdi=" + verdi + "&verdi2=" + verdi2 + "&verdi3=" + verdi3; xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = statusforanding; xmlhttp.open("get", url, true); xmlhttp.send(); Lage en Proxy <?php header('content-type: text/xml'); //header('content-type: application/json'); $resfil = fopen("url til ekstern kilde","r"); while ($linje = fgets($resfil) ) { echo $linje; fclose($resfil);?>