{"id":1262,"date":"2020-03-16T14:08:33","date_gmt":"2020-03-16T13:08:33","guid":{"rendered":"https:\/\/maxfest.dk\/port\/?p=1262"},"modified":"2020-03-16T17:42:00","modified_gmt":"2020-03-16T16:42:00","slug":"noter-javascript-3","status":"publish","type":"post","link":"https:\/\/maxfest.dk\/port\/skiftligt-materiale\/noter\/noter-javascript-3\/","title":{"rendered":"Noter: JavaScript  (3)"},"content":{"rendered":"\n<p>Noter om JavaScript taget p\u00e5 UCL p\u00e5 MMD. Undervisningsmateriale udgivet af  Thomas Jessen.<\/p>\n\n\n\n<p>Litteratur, som ligger grundlag for undervisningen:  Murach\u2019s JavaScript (2nd Edition) by Mary Delamater, kapitel 1 og 3.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">L\u00e6ringsm\u00e5l<\/h2>\n\n\n\n<p>Beskriv f\u00f8lgende:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Hvad er operatorer og hvordan kodes de?<\/li><li>Hvad er en kontrolstruktur og hvordan kodes de?<ul><li>if-else&nbsp;<\/li><li>While loops&nbsp;<\/li><li>For loops&nbsp;<\/li><\/ul><\/li><li>Hvad er et array og hvordan kodes de?<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Operatorer<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Rational operators<\/h3>\n\n\n\n<p>Kilde:  Side 84-85 i  Murach\u2019s JavaScript &amp; JavaScript Comparison Operators via.  <a href=\"https:\/\/www.w3schools.com\/js\/js_operators.asp\">https:\/\/www.w3schools.com\/js\/js_operators.asp<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>==<ul><li>Lige med<\/li><\/ul><\/li><li>===<ul><li>Lige med v\u00e6rdi og type<\/li><\/ul><\/li><li>!=<ul><li>Ikke lige med<\/li><\/ul><\/li><li>!==<ul><li>Ikke lig med v\u00e6rdi og type<\/li><\/ul><\/li><li>&lt;<ul><li>Mindre end<\/li><\/ul><\/li><li>&lt;=<ul><li>Mindre end eller lige med<\/li><\/ul><\/li><li>&gt;<ul><li>St\u00f8rre end<\/li><\/ul><\/li><li>&gt;=<ul><li>St\u00f8rre end eller lige med<\/li><\/ul><\/li><li>?<ul><li>Tern\u00e6r operation<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Rationelle operatorer er operatorer man bruger til sammenligning. Sammenligninger returnerer TRUE eller FALSE, afh\u00e6ngigt af om sammenligningen var sand eller ej.<\/p>\n\n\n\n<p>Nedenfor er der indskrevet eksempler p\u00e5 brug af rational operators, hvor x har f\u00e5et v\u00e6rdien 1.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var x = 1;\nvar y = false;\n\/*\n== | Lige med\n*\/\n\/\/ Eksempel:\nx == 1; \/\/ Returnerer TRUE, da x er 1\nx == 0; \/\/ Returnerer FALSE, da x ikke er 0\nx == 2; \/\/ Returnerer FALSE, da x ikke er 2\nx == true; \/\/ Returnerer TRUE, da x er TRUE\n\n\/*\n=== | Lige med v\u00e6rdi og type\n*\/\n\/\/ Eksempel:\nx === 1; \/\/ Returnerer TRUE, da x er 1 og er et tal\nx === 0; \/\/ Returnerer FALSE, da x ikke er 0\nx === 2; \/\/ Returnerer FALSE, da x ikke er 2\nx === true; \/\/ Returnerer FALSE, da x ikke er en boolean\n\n\/*\n!= | Ikke lige med\n*\/\n\/\/ Eksempel:\nx != 1; \/\/ Returnerer FALSE, da x er 1\nx != 0; \/\/ Returnerer TRUE, da x ikke er 0\nx != 2; \/\/ Returnerer TURE, da x ikke er 2\nx != true; \/\/ Returnerer FALSE, da x er TRUE\n\n\/*\n!== | Ikke lige med v\u00e6rdi og type\n*\/\n\/\/ Eksempel:\nx !== 1; \/\/ Returnerer FALSE, da x er 1\nx !== 0; \/\/ Returnerer TRUE, da x ikke er 0\nx !== 2; \/\/ Returnerer TURE, da x ikke er 2\nx !== true; \/\/ Returnerer TRUE, da x ikke er en boolean\n\n\/*\n&lt; | Mindre end\n*\/\n\/\/ Eksempel:\nx &lt; 1; \/\/ Returnerer FALSE, da x er ikke er mindre end 1\nx &lt; 0; \/\/ Returnerer FALSE, da x ikke er mindre end 0\nx &lt; 2; \/\/ Returnerer TRUE, da x er mindre end 2\nx &lt; true; \/\/ Returnerer FALSE, da x ikke er mindre end true\n\n\/*\n&lt;= | Mindre end eller lige\n*\/\n\/\/ Eksempel:\nx &lt;= 1; \/\/ Returnerer TRUE, da x er er mindre end lige 1\nx &lt;= 0; \/\/ Returnerer FALSE, da x ikke er mindre eller lige end 0\nx &lt;= 2; \/\/ Returnerer TRUE, da x er mindre end eller lige 2\n\/*\n> | St\u00f8rre end\n*\/\n\/\/ Eksempel:\nx > 1; \/\/ Returnerer FALSE, da x er ikke st\u00f8rre er st\u00f8rre end 1\nx > 0; \/\/ Returnerer TRUE, da x  er st\u00f8rre end 0\nx > 2; \/\/ Returnerer FALSE, da x er ikke er st\u00f8rre end 2\n\/*\n>= | St\u00f8rre end eller lige\n*\/\n\/\/ Eksempel:\nx >= 1; \/\/ Returnerer TRUE, da x er er st\u00f8rre end lige 1\nx >= 0; \/\/ Returnerer TRUE, da x er st\u00f8rre eller lige end 0\nx >= 2; \/\/ Returnerer FALSE, da x ikke er st\u00f8rre end eller lige 2\n\/*\n? | Tern\u00e6r operation\n*\/\n\/\/ Eksempel:\nx ? true : false \/\/ returnerer TRUE, fordi x er TRUE\nx ? false : true \/\/ returnerer FALSE, fordi x er TRUE\ny ? true : false \/\/ returnerer FALSE, fordi y er FALSE\ny ? false : true \/\/ returnerer TRUE, fordi y er FALSE<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Logical operators<\/h3>\n\n\n\n<p>  Kilde:  Side 84-85 i  Murach\u2019s JavaScript. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>!<ul><li>Ikke \/ Omvendt<\/li><li>G\u00f8r et sandt tilf\u00e6lde usandt (ved TRUE returneres i stedet FALSE)<\/li><li>G\u00f8r et usandt tilf\u00e6lde sandt (ved FALSE returneres i stedet TRUE)<\/li><li>S\u00e6ttes f\u00f8r en variabel, v\u00e6rdi, array, funktion eller constant.<\/li><\/ul><\/li><li>&amp;&amp;<ul><li>Og<\/li><li>Returnerer TRUE hvis alle tilf\u00e6lde er TRUE.<\/li><li>Returnerer FALSE hvis et eller flere tilf\u00e6lde er FALSE<\/li><li>S\u00e6ttes mellem statements<\/li><\/ul><\/li><li>||<ul><li>Eller<\/li><li>Returnerer TRUE hvis et eller flere tilf\u00e6lde er TRUE.<\/li><li>Returnerer FALSE hvis alle tilf\u00e6lde er FALSE<\/li><li>S\u00e6ttes mellem statements<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Logical operators er operatorer der beskriver om tilf\u00e6lde er sande. De kan sammens\u00e6ttes.<\/p>\n\n\n\n<p>Nedenfor er der indskrevet eksempler p\u00e5 brug af logical operators, hvor der afpr\u00f8ves en bred variation af JavaScript v\u00e6rdier.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>x = true;\ny = false;\nz = 1;\ntext = 'false';\nfun = function() {\n   return(true);\n}; \nn = null;\nx; \/\/ Returnerer TRUE\ny; \/\/ Returnerer FALSE\nz; \/\/ Returnerer 1, hvilket er TRUE\ntext; \/\/ Returnerer 'false', hvilket er TRUE\nfun(); \/\/ Returnerer TRUE\nn; \/\/ Returnerer null, hvilket ikke er tidssvarende TRUE eller FALSE\n\/*\n&amp;&amp; | Og\n*\/\n\/\/ Eksempel:\nx &amp;&amp; y; \/\/ Returnerer FALSE, fordi y er FALSE\nx &amp;&amp; !y; \/\/ Returnerer TRUE, fordi x og y er TRUE\n!x &amp;&amp; y; \/\/ Returnerer FALSE, fordi x og y er FALSE\n\/*\n|| | Eller\n*\/\n\/\/ Eksempel:\nx || y; \/\/ Returnerer TRUE, fordi x er TRUE\nx || !y; \/\/ Returnerer TRUE, fordi x og y er TRUE\n!x || y; \/\/ Returnerer FALSE, fordi x og y er FALSE\n\/\/ Eksempel med || og &amp;&amp;\nx &amp;&amp; x || y; \/\/ Returnere TRUE. Er tilsvarende (x &amp;&amp; x) || y;\n!x &amp;&amp; x || y; \/\/ Returnere FALSE. Er tilsvarende (!x &amp;&amp; x) || y;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Assignment Operators<\/h3>\n\n\n\n<p>Kilde: JavaScript Assignment Operators via. <a href=\"https:\/\/www.w3schools.com\/js\/js_operators.asp\">https:\/\/www.w3schools.com\/js\/js_operators.asp<\/a>.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>=<ul><li>Lig v\u00e6rdien<\/li><\/ul><\/li><li>+=<ul><li>Nuv\u00e6rende v\u00e6rdi + den nye v\u00e6rdi<\/li><\/ul><\/li><li>-=<ul><li>Nuv\u00e6rende v\u00e6rdi &#8211; den nye v\u00e6rdi<\/li><\/ul><\/li><li>*=<ul><li>Nuv\u00e6rende v\u00e6rdi ganget med den nye v\u00e6rdi<\/li><\/ul><\/li><li>\/=<ul><li>Nuv\u00e6rende v\u00e6rdi divideret med den nye v\u00e6rdi<\/li><\/ul><\/li><li>%=<ul><li>Overskud af nuv\u00e6rende v\u00e6rdi divideret med den nye v\u00e6rdi<\/li><\/ul><\/li><li>**=<ul><li>Nuv\u00e6rende v\u00e6rdi ganget eksponentielt med den nye v\u00e6rdi<\/li><\/ul><\/li><\/ul>\n\n\n\n<p>Assignment operators tilskriver en v\u00e6rdi.<\/p>\n\n\n\n<p>Nedenfor er der indskrevet eksempler p\u00e5 brug af assignment operators, hvor x tilskrives nye v\u00e6rdier. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var x = 1; \/\/ 1\nx += 1; \/\/ 2\nx -= 1; \/\/ 1\nx *= 1; \/\/ 1\nx *= 2; \/\/ 2\nx *= 2; \/\/ 4\nx \/= 2; \/\/ 2\nx %= 3; \/\/ 2\nx **= 2 \/\/ 4\nx **= 2 \/\/ 16<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JavaScript String Operators<\/h3>\n\n\n\n<p>Kilde: JavaScript String Operators via. <a href=\"https:\/\/www.w3schools.com\/js\/js_operators.asp\">https:\/\/www.w3schools.com\/js\/js_operators.asp<\/a>.<\/p>\n\n\n\n<p>Tekst strenge. Man kan bruge &#8221; eller &#8216;.<\/p>\n\n\n\n<p>Eksempler:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\"Tekst i en streng\";\n'Hello world';<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u00d8vrige JavaScript Operators<\/h3>\n\n\n\n<p>Kilde: JavaScript Type Operators via. <a href=\"https:\/\/www.w3schools.com\/js\/js_operators.asp\">https:\/\/www.w3schools.com\/js\/js_operators.asp<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> Kontrolstruktur <\/h2>\n\n\n\n<p>Kilder: Side 86-87 i  Murach\u2019s JavaScript  &amp;  <a href=\"https:\/\/www.w3schools.com\/js\/js_switch.asp\">https:\/\/www.w3schools.com\/js\/js_switch.asp<\/a> <\/p>\n\n\n\n<p>Kontrolstrukturer if og else statements og cases.<\/p>\n\n\n\n<p>If og else statements bygges op s\u00e5ledes<\/p>\n\n\n\n<p>if(&#8230; condition &#8230;){&#8230; statements &#8230;} ifelse(&#8230; alernate condition&#8230;){&#8230;  statements &#8230;} else{&#8230;  statements  &#8230;}<\/p>\n\n\n\n<p>Hvis condition (krav) i if returnerer TRUE udf\u00f8res statements deri. Hvis ikke, afpr\u00f8ves alle ifelse conditions. Hvis ingen if eller ifelse conditions er sande, udf\u00f8res else, hvis den er sat.<\/p>\n\n\n\n<p>Nedenfor er der indskrevet eksempler p\u00e5 brug af kontrolstruktur i if &amp; else og switch og case.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var x = true;\nvar y = false;\nvar n = null;\n\/\/ If and else\nif(x){\n   return(1);\n} elfeif(x == false) {\n   return(2);\n} else {\n   return(3);\n}\n\/\/ Returnerer 1\nif(y){\n   return(1);\n} elfeif(x == false) {\n   return(2);\n} else {\n   return(3);\n}\n\/\/ Returnerer 2\nif(y){\n   return(1);\n} elfeif(x == false) {\n   return(2);\n} else {\n   return(3);\n}\n\/\/ Returnerer 3\n\n\/\/ Switch and Case\nswitch(x) {\n  case true:\n    return(1);\n    break;\n  case false:\n    return(2);\n    break;\n  default:\n    return(3);\n}\n\/\/ Returnerer 1\nswitch(y) {\n  case true:\n    return(1);\n    break;\n  case false:\n    return(2);\n    break;\n  default:\n    return(3);\n}\n\/\/ Returnerer 2\nswitch(n) {\n  case true:\n    return(1);\n    break;\n  case false:\n    return(2);\n    break;\n  default:\n    return(3);\n}\n\/\/ Returnerer 3<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">for- While- &amp; do while- loops<\/h2>\n\n\n\n<p> Kilder: Side 88-91 i  Murach\u2019s JavaScript.<\/p>\n\n\n\n<p>for loops er et loop der eksekverer p\u00e5 baggrund af en v\u00e6rdi der stiger eller falder, indtil det rammer en \u00f8nsket v\u00e6rdi.<\/p>\n\n\n\n<p>While- og do while loops er noget kode der bliver ved med at blive udf\u00f8rt indtil et statement er sandt. Do-while loop vil altid blive k\u00f8rt en gang.<\/p>\n\n\n\n<p>I loops der er afh\u00e6ngige af en v\u00e6rdi, bruges v\u00e6rdien <em>i<\/em> typisk.<\/p>\n\n\n\n<p>Nedenfor kan der ses eksempler p\u00e5 hvordan man kan skrive 1-10 til console med hver metode.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>for(i=1; i&lt;=10; i++){\n   console.log(i);\n}\ni=1;\nwhile(i&lt;10){\n   console.log(i);\n   ++i;\n}\ni=1;\ndo{\n   console.log(i);\n   ++i;\n}\nwhile(i&lt;10);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Fordele og ulemper<\/h3>\n\n\n\n<p>Alle loops kan bruges til at k\u00f8re en r\u00e6kke af v\u00e6rdier igennem.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>for er godt, da kravene kan skrives \u00f8verst, og derfor er nem at l\u00e6se og forst\u00e5<\/li><li>do-while og while er praktisk hvis regnestykket for den n\u00e6ste iteration er komplekst.<\/li><\/ul>\n\n\n\n<p>Ikke line\u00e6re eller tilf\u00e6ldige iterationer kan implementeres i begge strukturer, men implementeringen er nemmest i do-while og while.<\/p>\n\n\n\n<p>do-while vil altid blive anvendt en gang. S\u00e5 man skal v\u00e6re p\u00e5passelig med hvordan det stilles op.<\/p>\n\n\n\n<p>while loop har det med at blive eksekveret 2 gange til sidst, medmindre man er p\u00e5passelig med sin ops\u00e6tning.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Arrays <\/h2>\n\n\n\n<p>Kilder: Side 98-99 i  Murach\u2019s JavaScript.<\/p>\n\n\n\n<p>Arrays er en samling af 0 eller flere elementer.<\/p>\n\n\n\n<p>L\u00e6ngden af et array er defineret af antallet af elementer deri.<\/p>\n\n\n\n<p>Indekseringen af array starter p\u00e5 0.<\/p>\n\n\n\n<p>Nedenfor kan der ses et eksempel p\u00e5 et array<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var liste = []; \/\/ tomt array\nliste[0] = 'Hello'; \/\/ liste[0] returnerer fremover 'Hello'\nliste[1] = 'World'; \/\/ liste[1] returnerer fremover 'World'\nliste; \/\/ Returnerer [\"Hello\", \"World\"]<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Noter om JavaScript taget p\u00e5 UCL p\u00e5 MMD. Undervisningsmateriale udgivet af Thomas Jessen. Litteratur, som ligger grundlag for undervisningen: Murach\u2019s JavaScript (2nd Edition) by Mary Delamater, kapitel 1 og 3. L\u00e6ringsm\u00e5l Beskriv f\u00f8lgende: Hvad er operatorer og hvordan kodes de? Hvad er en kontrolstruktur og hvordan kodes de? if-else&nbsp; While loops&nbsp; For loops&nbsp; Hvad er&#8230;<\/p>\n","protected":false},"author":1,"featured_media":715,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[18],"class_list":["post-1262","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-noter","tag-mmd"],"_links":{"self":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1262","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/comments?post=1262"}],"version-history":[{"count":24,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1262\/revisions"}],"predecessor-version":[{"id":1294,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/posts\/1262\/revisions\/1294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media\/715"}],"wp:attachment":[{"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/media?parent=1262"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/categories?post=1262"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxfest.dk\/port\/wp-json\/wp\/v2\/tags?post=1262"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}