javascript.html

<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">OPERATOR, INPUT, OUTPUT</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Comments in Javascript</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// Comment something</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Multiline comments</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>/*Text xzy*/</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Declare and assign string (possible with "" or '') - "var" was the earlier version in the past for that</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let intStr = "7"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Linebreak and Tab should not used - is morely css-stuff for formating</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>"/n /t"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Declare a variable and assign int (also signed int like -36)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let age = 24</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Defining without assigning (var gets value undefined)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let var</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define 2 variables (one without value and one with value)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let var, age = 25</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define and assign 3 variables (a=5, b=8, c=12)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let [a, b, c] = [5, 8, 12]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Declare a constant and assign int (constant can not be changed like variables)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const age = 25</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Declare and assign float (also signed float like +4.5763</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let float = 5.14876</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change String to Int with base 10</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let intNum = parseInt(intStr,10);</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Declare and assign string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let floatStr = "5.14673"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change String to Float</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let floatNum = parseFloat(floatStr);</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Defines+Assigns a variable (if user exists/has a value use that - otherwise initialize with "guest"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let v = user || "guest"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Open windows for entering something and store in const inp</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const inp = prompt("Enter:")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Convert numeric value to string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>num.toString()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>2nd method to convert numeric value to string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>num + ""</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>3rd method to convert number / int to a String</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>String(n)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Converts String to Number / Int</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Number(s)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Shows the type of the variable as string (eg. "number", "string", "boolean")</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>typeof (x)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Modulo / Rest of the division (=> 1)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>7 % 2</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check 2 values / variables (result in true / false)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>x == y</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Equal value and equal type</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>x === y</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Not equal</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>x != y</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Not equal value and not equal type</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>x !== y</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Greater, lesser, greater + equal , lesser + equal</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>>,<,>=,<=</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if value is NaN (NotANumber) - eg. when converting with Number() and the value is no number</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>isNaN(x)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if n is a integer</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Number.isInteger(n)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Makes variable +1</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>num++;</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Outputs variable num in console</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>console.log(num)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Outputs element as table (eg. for objects, arrays)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>console.table(object)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Alert information in a window</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>alert("Text!")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Alert some text with outputing the variable "name" between (using backticks "`"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>alert(`Bla ${name} bla`)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Round to 2 decimal digits</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>n = n.toFixed(2)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Swap 2 variables</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>[x, y] = [y, x]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Exit javascript node program</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>process.exit(1)</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">STRING</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define a string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let s = "this is a test"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>String with linebreak \n</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let s = "this \n text"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>extract only the first character</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.slice(0,1)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>last char of a string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.slice(-1)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>slicing 2 chars from pos 3 and 4</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.slice[3,5]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>slice from pos 3 to the end</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.slice[3]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>shows the length of the string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.length</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Lowercase the whole string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s = s.toLowerCase()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Uppercase the whole string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s = s.toUpperCase()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns the second char of a string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.charAt(1)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Search if "xyz" is int the string - returns the position where found - when not found returns -1</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.search("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if string/chars are in</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.includes("ee")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Replace "abc" with "xyz" for any occurrences in the string (only working for new browsers!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>sNew = s.replaceAll("abc","xyy)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>2nd method for replacing everything (works for more browsers!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>sNew = s.replace(/abc/g,"xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Concatenate 2 strings</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>sNew = s1.concat(s2)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete all whitespaces at the beginning and the end</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.trim()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Repeat string 3 times</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.repeat(3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Split the words in a array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.split(" ")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete all whitespaces at the beginning and the end</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.trim()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Fills leading zero in a string with allways 3 chars - eg. 006</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.padstart(3,"0")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Find Index of first occurence of this string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.indexOf("ee")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Outputs the x character in the string => second char of the string (same as s[1])</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.charAt(1)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Get the last 3 chars of the string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.slice(-3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>2nd variant: Get the last 3 chars of the string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.substr(s.length-3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Return Ascii-Code of the first character of the string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.charCodeAt(0)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns True if the string end with "?"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s.endsWith("?")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns char for specific ascii-code</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>char = String.fromCharCode(65)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if char is in A-Z</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>char.match(/[A-Z]i)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Spread-Operator for string (=> build array with each character)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>[...s]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Convert object-element to string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>s = JSON.stringify(obj)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Convert datetime-object to string in format "yyyy-mm-dd"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>calcDate.toISOString().split('T')[0]</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">ARRAY</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let arr = [];</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define an array and initialize it</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let arr = [6,7,8];</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define multidim array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let mat= [[1,2,3],[4,5,6],[7,8,9]]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Get second element => 7</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr[1]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Access last element in array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr[arr.length-1]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Get element in the matrix => 5</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>mat[1][1]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Replace the third element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr[2] = 9</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns list as a string => "6,7,8"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>String(Arr)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Must allways be compared with triple = (only == would be wrong)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>a1 === a2</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Total count of the elemets in the array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.length</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Extracts and delete element at the end (fast!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.pop()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Extracts and delete element at the begin (slow!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.shift()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Append new elements to the array at the end (fast!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.push("X","Y")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Add new elements to the array at the beginning (slow!)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.unshift("Y","Z")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Copy elements from index 2 to index 3 => result is one char at index 2</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>ergArr = arr.slice(2,3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Copy the last 2 elements of the array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>ergArr = arr.slice(-2)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete 1 element beginning from index 2</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.splice(2,1)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete 2 elements beginning from the index 0 - and insert the elements 10 and 11</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.splice(0,2,10,11)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>From index -1 delete 0 elements and add 3 and 4</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.splice(-1,0,3,4)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete 2 elements beginning from the index 0 - and assign them to ergArr</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>ergArr = arr.splice(0,2)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>x > 0)                           => Return true if all elements are bigger than 0</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.every(x</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Concatenate 2 arrays to one</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>ergArr = arr1.concat(arr2)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns first index position of element "xyz" (if not exists result is -1)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.indexOf("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Return the last index position of the element "xyz"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.lastIndexOf("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if string exists in the array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.includes("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Reverse the entire array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.reverse()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Split the words in a array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr = varStr.split(" ")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Join the elements from the array in a string with ", " as seperator</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>varStr = arr.join(", ")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if object is an array (if array = true)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Array.isArray(arr)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through index of the array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let i=0; i < arr.lenth; i++) {do smth.}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through array elements</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let elem of arr) {alert(arr)}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Convert a node-list to an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr=Array.from(document.querySelectorAll("a"))</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>2nd method for converting node-list to an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr=[...document.querySelectorAll("a")]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Concatenate the array to a string seperated by " "</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.join(" ")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>a > b ? 1 : -1)               => Order array ascending</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.sort((a,b)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>a > b ? -1 : 1)               => Order array descending</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.sort((a,b)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Ordering long method with function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.sort(function(a,b) {return a > b ? 1 : -1}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Find max value in an array with spread operator</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.max(...arr)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Find min value in an array with spread operator</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.min(...arr)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Array Destrucuring Expl1 (a will be "Ha" and b will be "Ho"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let [a,b] = ["Ha","Ho","Hi","He"]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Array Destrucuring Expl2 (a will be "Ha" and d will be "He"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let [a,,,d] = ["Ha","Ho","Hi","He"]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Array Destrucuring Expl3 (a will be "Ha" and rest will be ["Ho","Hi","He"]</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let [a,...rest] = ["Ha","Ho","Hi","He"]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Swapping values (a will be b and b will be a)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>[a,b] = [b,a]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate trough array by index and element (with shortform)<br><br>Outputs index and Outputs element of array<br>(return is not working here - forEach loops are allways running for all elements)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.forEach((elem,idx) => {<br>    console.log(idx)<br>    console.log(elem)<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through array by elements and index (with longform)<br><br>Outputs index and Outputs element of array<br>(return is not working here - forEach loops are allways running for all elements)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.forEach(function(elem,idx) {<br>    console.log(idx)<br>    console.log(elem)<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate trough an array with 1sec pause at every element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>names.forEach((name, i) => {<br>  setTimeout(() => {<br>    display(name);<br>  }, i * 1000);<br>});</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Map Method - Short Method (Maps a functionality to all elements of the array - every element multiplicated by 2)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>    let newarr = arr.map(x => x * 2);</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Map Method - Long Method (for more code)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>    let newarr = arr.map (function(x) {<br>        x = x * 2<br>    }</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Filter Method - Long Method (Filters all values which are > 6 eg. in a new array)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let newarr = arr.filter (function(x){<br>    if (x > 6) {<br>        return true<br>    }<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Filter Method - Short Method in one line</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let newarr = arr.filter(x => x > 6);</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Reduce Method - for doing something with the array and output / calculate something<br>"total" is the new calculation element - result of this is the sum of all elements of the array<br>every element is added to total - 0 is the default value of "total"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>erg = arr.reduce ((total, elem) => {<br>    return total + elem<br>},0)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>FindIndex Method - find the index-location of an element in the array (if nothing is found it returns -1)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let idx = arr.findIndex(x => {<br>  return x < 10;<br>})<br></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Some Method - checks whether at least one element in the array passes the test - returns boolean answer<br>1st line defines the check function - 2nd line checks the array with the function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const even = (element) => element % 2 === 0;<br>arr.some(even)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Every Method - checks whether all elements in the array passed the test by the defined function - return boolean answer<br>1st line defines the check function - 2nd line checks the array with the function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const isLower = (elem) => elem < 40;<br>arr.every(isLower)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>example for a setTimeout<br>the first and second message will appear immediately - the middle message only after 2 seconds</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>console.log('First message!');<br>setTimeout(() => {<br>   console.log('This message will always run last...');<br>}, 2000);<br>console.log('Second message!');</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">CONTROL STRUCTURE AND ITERATION</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>if (condition is true) {<br>    =>Do something<br>}else if (condition is true){<br>    =>Do something else<br>}else{<br>    =>Default else<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>If structure with logical and</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>if (a == 9) && (b == 7) { c = "Hurra!" }</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>If structure with logical or</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>if (a == 9) || (b == 7) { c = "Hurra!" }</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>If structure with logical not</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>if !(a > 13)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>switch (expression) {           // Switch expression for multiple options<br>case value1: case value 4       // Do something when expression is value1 or value4<br>    // Do something<br>    break;                      // Break necessary for any case / value<br>case value2:                    // Do something when expression is value2<br>    // Do something<br>    break;<br>default:                        // When no case is mathing - then do this<br>    => Do something<br>    break;<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iteration from 1 to 5 with for-loop</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let i=1; i<=5; i++) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iteration backwards from 3 to 0 with for-loop</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let i=3; i>=0; i--) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let i=0; i<arr.length; i++) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through a string</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let char of text) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through the keys of an object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let key in obj) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>For loop with pause at any iteration</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let i = 0; i < 5; i++) {<br>  setTimeout(() => {                            // Pause at any iteration for 5 seconds / 5000 ms<br>    console.log("hey");<br>  }, i * 5000);<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>While loop with break condition</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>while (x < 4) {<br>    if xyz === "abc" {break}<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Do While loop with break condition</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>do {} while (x < 4)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Endless while loop - has to be exited somewhere</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>while (true) {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through array by elements (x)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr.forEach((x) => {<br>    console.log(x)<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Are all falsy values - can checked with if (xyz)...</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>0,"",'',null,undefined,NaN</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Ternary Operator for if - if isNight=true then s=Night - else s=Day</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>isNight ? s="Night" : s="Day"</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">FUNCTION</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Normal Function Decleration</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function addFunc(x=0,y=0) {    // Define a function    - with default value 0 if no input is given<br>    let erg = x+y              // Calculate erg<br>    return erg}                // Return erg value<br>addFunc(3,5)                   // Function Call</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Function Expression (used for anonymous functions)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const add = function(x,y) {...}     // Define a function expression (function is assigned to an variable<br>add(3,5)                            // Function Call</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Anonymous Function with Fat Arrow syntax</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const add = (x,y) => {...}<br>add(3,5)                            // Function Call<br>let h = a => a % 3                  // Even shorter without parentees</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>return-statement with "?" or "||"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>return (age > 18) ? true : console.log('Did parents allow');    // When age > 18 returns true - otherwise output something in the console<br>return (age > 18) || console.log('Did parents allow');          // Same logic with "||"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Use Rest Parameters to accept any number of arguments</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function max(...numbers) {                // Any numbers of arguments<br>    => do something with a loop<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>AddEventListener with parameters in the function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>document.querySelector("#dayToday").addEventListener("click",function() {   // define addEventListener as normal but use "function ()"<br>    toggleBackground("today", 6)                                            // call the function with parameters inside<br>}, false);</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">OBJECT</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define an object (literal syntax)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let obj = {}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>2nd method to define object (construtor syntax)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let obj = new Object()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>properties = attributes of the object (eg. color, shape, minutes, seconds)<br><br>Define an object and initialize it</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let obj = {<br>    name: "John",<br>    age: 30,                // last "," i allowed and called trailing / hanging (its easier so to add/remove/move properties of the object)<br>    shout() {               // Defines a method for the object<br>        return "Hurra!"<br>    }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Access property / shows value of the key "name" (1st method) => John (dot.notation)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.name</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Shows value of the key "name" (2nd method) => John (bracket notation)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj["name"]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Shows key "age" of the object => 30 (dot notation)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.age</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Add a new propertie to the object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.newOne = "xyz"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Add a new method to the object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.newMethod = function(var) {...do someth...}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Call the new method</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.newMethod(25)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if key is in the object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>age in obj</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete a property of an object (dot notation)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>delete obj.age</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete a property of an object (bracket notation)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>delete obj["age nr"]</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if a property / method is in an object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>if ("property" in obj) {...}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Read the keys of an object into an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr = Object.keys(obj)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Read the values of an object into an array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr = Object.values(obj)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Read alle key / value pairs of an object into an (nested) array</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>arr = Object.entries(obj)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if xyz i part of the object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>obj.hasOwnProperty("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if Object is empty</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Object.keys(obj).length === 0 && obj.constructor === Object</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Iterate through the keys of the object and outputs key and value</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>for (let key in obj) {<br>    console.log(key, obj[key]<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Other example for an object<br>teacher count must have quotations cause it contains a space character</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>var school = {<br>  name: 'The Starter League',<br>  location: 'Merchandise Mart',<br>  "teacher count": 10<br>  students: 120,<br>  teachers: ['Jeff', 'Raghu', 'Carolyn', 'Shay']<br>};</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">CONSTRUCTOR, CLASS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>4 Pillars of Object Orientation<br>Make a Object with the old method</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function MakeCar (carMake,carModel,carColor){       // Define the constructor function<br>    this.make = carMake,                            // Define properties for the constructor<br>    this.carModel = carModel,                       // "this" is referencing to the actual object<br>    this.carColor = carColor,<br>    this.honk = function(){                         // Define a mtehod for the constructor<br>        alert(`BEEP ${this.carModel} BEEP`)         // Alert something when the method is called (with prop this.carModel)<br>    }<br>}<br>let car1 = new MakeCar("Honda","Civic","black")     // Create a new car1 (with codeword "new")<br>let car2 = new MakeCar("Tesla","Roadster","red")    // Create a new car1</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Make a Object with the shorthand</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let robotFactory = (model, mobile) => {             // Define constructor with two parameters<br>    return {<br>        model: model,                               // property1<br>        mobile: mobile,                             // property2<br>        beep(){                                     // method<br>            console.log("Beep Boop")<br>        }<br>    }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Make a Object with the new class method (longhand)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>class MakeCar{                                      // Define the classs<br>    constructor (carMake,carModel,carColor){        // Define properties for the class<br>        this.make = carMake                         // Assign the properties of the class to the concrete individual object<br>        this._carModel = carModel                    // "this" is referencing to the actual object (use "_" to indicate that this properties should only changed with getters)<br>        this.carColor = carColor<br>    }<br>    honk(){                                         // Define a method for the class<br>        alert("BEEP ${this.carModel} BEEP")         // Alert something when the method is called (with prop this.carModel)<br>    }<br>}<br>let car1 = new MakeCar("Honda","Civic","black")     // Create a new car1 (with codeword "new")<br>let car2 = new MakeCar("Tesla","Roadster","red")    // Create a new car1</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Give new property and function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>MakeCar.prototype.wash = true                       // Give all the created cars from the class "MakeCar" a new property "wash"<br>MakeCar.prototype.newFunc = function () {           // Give all the created cars from the class "MakeCar" a new function "newFunc"<br>    console.log("We have a new function!"<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define a getter in the class (returns the name-property of the class-element<br>So when somebody is requesting for obj.name - the return will be for _name<br>When somebody is changing with obj.name = "xzy" - nothing happens, cause the property is named _name<br>Of course with obj._name there would be a change possible - but this is very bad practice cause due the "_" the variable should not be touched</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>  get name() {<br>    return this._name;<br>  }</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Inherit a class from another class<br>The class Cat inherits from the class Animal with the keyword "extends"<br>With super - the attributes name and age will be taken / inherit from the class Animal</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>class Animal {<br>  constructor(name, age){<br>	this.name = name<br>	this.age = age<br>  }<br>  speak() {<br>	console.log("Blablabla")<br>  }<br>}<br><br>class Cat extends Animal {<br>  constructor(name, age, usesLitter) {<br>    super(name, age);<br>    this._usesLitter = usesLitter;<br>  }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define static function - this can only be done for the class itself (or for the instances of the class)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>    static generateName() {...}</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">OBJECT ORIENTATION - 4 PILLARS OOP</h2>
<!-- /wp:heading -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">DOCUMENT, QUERYSELECTOR, EVENTLISTENER</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>4 pillars of object orientation in practice<br>Add Eventlistener</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>document.querySelector('#check').addEventListener('click',func1)        // New Method / create an Event Listener / execute function "func1" when mouse is clicked<br>...'onmouseenter'...                                                    // New Method / create an Event Listener / exceute function "func2" when mouse-cursor is over the element<br>...'input'...                                                           // Event Listener with trigger input<br>...'change'...                                                          // Event Listener with trigger every change in the element<br>...'mousemove'...                                                       // Event Listener with trigger when mouse is moved over the element<br>...'transitionend'...                                                   // Event Listener with trigger when the transistion ends<br>document.getElementById("green").onclick = funcGreen                    // Old Method / Waiting for click on this element (by ID) as a "event-listener"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>E.G. document.querySelector('idBlue').addEventListener('click',changeToBlue)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function funcGreen() {                                      // Define function<br>  document.querySelector("body")<br>    .style.backgroundColor = "rgba(241,63,247,1)"           // Change BackGroundColor-Style to rgba-color green (as inlinecode in the rendering - not in the html-code)<br>  document.querySelector("body").style.color = "white"      // Change Fontcolor to white (as inlinecode in the rendering - not in the html-code)<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Use EventListner for alle elements with a specific class</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let elements = document.querySelectorAll(".panel");             // Select all elements with class "panel"<br>elements.forEach(elem => elem.addEventListener("click",func1))  // Iterate trough every element and create EventListener - when clicked start func1 for the element<br>function func1() {                                              // Function is run with the activated Element for the EventListener<br>    this.classlist.toggle("newClass")}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Old Method / Select an element by ID</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>document.getElementById</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>New Method / Select (first) a <tag> or .class or =>id</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>document.querySelector("xyz")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Select all elements which have h2 and store it in the constante c</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const c = document.querySelectorAll("h2")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Element-Listener waiting for a click7</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.onclick</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change BackgroundColor</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.style.backgroundColor</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change Font Color</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.style.color</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Hide element in DOM</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.style.display = "none"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change Text of the selected element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.innerText = "xyz"</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Concatenate 3 variables with space between (old method)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.innerText = v1 + " " + v2 + " " + v3</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Concatenate 3 variables with space between (new method with the "`"-char called template string)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.innerText = `${v1} ${v2} ${v3}`</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Read the value/text of the field</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.value</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Show the ID of the selected element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.id</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Set the src of a image</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.src</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Change class of the element to "MyClass"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.className = "MyClass";</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Manipulate classes informations</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.classList</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Toggle the class hidden (when triggered class is deleted OR added (when the next click occured)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.classList.toggle("hidden")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Add the class hidden</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.classList.add("hidden")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Check if element contains class "cl"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.classList.contains("cl")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Remove the class from the element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>.classList.remove("wiggle")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Call function "func1" every second (1000ms)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>setInterval(func1, 1000)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{do something},10000)          => Do something any 10 seconds</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>setInterval(()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Func1 is running with a delay of at least 2 seconds (with own seperate function)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>setTimeout(func1, 2000)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{do something},1000)            => Do something and wait 1 second (function direct in the statement)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>setTimeout(()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Add some elments to an ul-element</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>var li = document.createElement("li")           // create new li-element<br>li.textContent = "new text"                     // add text to the new element<br>document.querySelector("ul").appendChild(li)    // append the new li-element to the ul-element</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">CSS VARIABLE HANDLING</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Read all control- and input-elements<br></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let inputs = document.querySelectorAll(".controls input");</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>input.addEventListener("change", handleUpdate));    => Wait for change in any element and call the function "handleUpdate"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>inputs.forEach(input</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Handle Update<br></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function handleUpdate() {<br>    const suffix = this.dataset.sizing || '';       // read the sizing-parameter for the triggered element (used data-sizing in html)<br>    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);<br>        // set the variable in css (name according to --name in css)<br>        // use the value from the read element from the adventlistener<br>        // and use the suffix which is read above<br>        // full property looks eg. like "--spacing: 10px"<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">API ACCESS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>request data from API  get data back in JSON format<br>Reading / Fetching the informations from an API-url<br>Request the API-content and output as JSON-information<br>alle the information is stored in data<br>last part is the error handling when something wrong happens</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>fetch(url)<br>    .then(res => res.json())<br>    .then(data => {<br>        console.log(data)<br>    })<br>    .catch(err => {<br>        console.log("error ${err}")<br>    });</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Using a API using async / await</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>async function getSomethingFromAPI() {<br>	const res = await fetch("url").catch(e => {<br>		console.log("Error - Fetch not possible...")<br>	})<br>	if (!data) {<br>		console.log("Error - Data / JSON wrong...")<br>	} else {<br>		const data = await res.json()<br>		console.log(data)<br>	}<br>}<br>getSomethingFromAPI()</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">JQUERY</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>      => include before body-tag</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><script src="</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>put all jQuery code in this function (waiting until the the page has loaded an the DOM is ready)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$(document).ready(function(event){...});</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Class selector</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$('.feature');</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Descendant selector</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$('li strong');</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Multiple selector</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$('em, i');</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Attribute selector</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$('a[target="_blank"]');</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Pseudo-class selector</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>$('p:nth-child(2)');</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">DATE</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Assign variable to actual date</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let now = new Date()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns numeric acttual date as number (helpful to calculate some timespans)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let t1 = Date.now()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Assign actual seconds from actual date variable "now"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let secondes = now.get.Seconds()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Convert datetime-object to string in format "yyyy-mm-dd"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>calcDate.toISOString().split('T')[0]</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">MATH</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Random number between 1 and 6 like a cube (Math.random returns value between 0 and 1)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.floor(Math.random()*6) + 1</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Nearest Upward rounding => 44</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.ceil(43.8)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Return the square-root => 3</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.sqrt(9)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Use PI</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.PI</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Round down the float => 5</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.floor(5.95)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>First number to the power of the second => 8</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.pow(2,3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Creates the cube root => 3</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.cbrt(8)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns the absolute number => 3</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.abs(-3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns the Minimum of the values => 1</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.min(1,2,3)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Returns the Maximum of the values => 3</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Math.max(1,2,3)</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">LOCAL STORAGE</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Set item to local storage (name is the key and Bob is the value)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>localStorage.setItem ("name","Bob")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Get item from local storage (name is the key)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>localStorage.getItem ("name")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete item from local storage (name is the key)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>localStorage.delItem ("name")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Delete the whole local storage</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>localStorage.clear()</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">MODULE EXPORTS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>sometimes the URL also has a search query parameter<br><br>library for javascript<br><br>Allows to store data across browser sessions<br>Define module with Node.js (in a file)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let Obj = {}            // define an object<br>Obj.prop = "xyz"        / define something in the object eg. a function<br>module.exports = Obj    // export the file as module to node.js</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Use a module</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const Obj = require('./module.js');     // import the module for using<br>Obj.funcFromModule                      // use the function from the module</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define module with export</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let Menu = {};<br>export default Menu;</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Import module with import</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>import Menu from './menu';</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">ASYNCHRONOUS HANDLING</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>running synchronous - outputs 1,2,3</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function houseOne(){ console.log('Paper delivered to house 1')}<br>function houseTwo(){console.log('Paper delivered to house 2')}<br>function houseThree(){console.log('Paper delivered to house 3')}<br>houseOne()<br>houseTwo()<br>houseThree()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>running asynchronous - outputs 1,3 and then after 3 seconds 2<br>in the 2nd function the setTimeout-api is called with a delay of 3000ms / 3 seconds</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function houseOne(){ console.log('Paper delivered to house 1')}<br>function houseTwo(){<br>	setTimeout(() => console.log('Paper delivered to house 2'), 3000)<br>}<br>function houseThree(){console.log('Paper delivered to house 3')}<br>houseOne()<br>houseTwo()<br>houseThree()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>running asynchronous - outputs 1, after 3sec  2 and immediately afterwards 3<br>the 2nd function is using a callback (using a function)<br>setTimeout is called with a 3sec delay - then 2 is printed - and then with callback() 3 as the argument of the function 2</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function houseOne(){ console.log('Paper delivered to house 1')}<br>function houseTwo(callback){<br>    setTimeout(() => {<br>        console.log('Paper delivered to house 2')<br>        callback()<br>    }, 3000)<br>}<br>function houseThree(){console.log('Paper delivered to house 3')}<br>houseOne()<br>houseTwo(houseThree)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>using a promise (promise is an object)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const promise = new Promise((resolve, reject) => {		// define the promise and asign to a variable<br>    const error = false<br>    if(!error){<br>        resolve('Promise has been fullfilled')			// when the promise is resolved<br>    }else{<br>        reject('Error: Operation has failed')			// when there is an error<br>    }<br>})<br>console.log(promise)<br>promise<br>    .then(data => console.log(data))		// doing this when the promise is resolved<br>    .catch(err => console.log(err))			// doing this when the promise is not resolved has an error</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>using async / await</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>function houseOne(){<br>    return new Promise((resolve, reject) => {<br>        setTimeout(() => {<br>            resolve('Paper delivered to house 1')<br>        }, 1000)<br>    })<br>}<br>function houseTwo(){<br>    return new Promise((resolve, reject) => {<br>        setTimeout(() => {<br>            resolve('Paper delivered to house 2')<br>        }, 5000)<br>    })<br>}<br>function houseThree(){<br>    return new Promise((resolve, reject) => {<br>        setTimeout(() => {<br>            resolve('Paper delivered to house 3')<br>        }, 2000)<br>    })<br>}<br>async function getPaid(){						// defining a async function<br>    const houseOneWait = await houseOne()		// awaits the ending of function houseOne<br>    const houseTwoWait = await houseTwo()		// waiting for ending function houseTwo<br>    const houseThreeWait = await houseThree()	// waiting for ending function houseThree<br>    console.log(houseOneWait)<br>    console.log(houseTwoWait)<br>    console.log(houseThreeWait)<br>}<br>getPaid()										// after 5seconds (longest functtion running) the output is done</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>create an executor function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const executorFunction = (resolve, reject) => {<br>  if (someCondition) {<br>      resolve('I resolved!');<br>  } else {<br>      reject('I rejected!');<br>  }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>construct a new variable with "new Promise"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const myFirstPromise = new Promise(executorFunction)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>example for a promise handling with resolve, reject and .then</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>let prom = new Promise((resolve, reject) => {<br>  let num = Math.random();<br>  if (num < .5 ){<br>    resolve('Yay!');<br>  } else {<br>    reject('Ohhh noooo!');<br>  }<br>});<br><br>const handleSuccess = (resolvedValue) => {<br>  console.log(resolvedValue);<br>};<br><br>const handleFailure = (rejectionReason) => {<br>  console.log(rejectionReason);<br>};<br><br>prom.then(handleSuccess, handleFailure);</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>example using a promise with .then and .catch<br>.then is handling the resolved part and .catch is handling the rejected part</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>prom<br>  .then((resolvedValue) => {<br>    console.log(resolvedValue);<br>  })<br>  .catch((rejectionReason) => {<br>    console.log(rejectionReason);<br>  });</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>define a async-function with function declaration:</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>async function myFunc() {<br>  // Function body here<br>};</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>define a async-function with function expression</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const myFunc = async () => {<br>  // Function body here<br>};</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>example for handling a async function</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>async function withAsync(num){<br>  if (num === 0){<br>      return 'zero';<br>    } else {<br>      return 'not zero';<br>    }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">REQUESTS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>create xml http request object instances</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const xhr = new XMLHttpRequest()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>assing the url</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const url =  'https://api-to-call.com/endpoint'</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>set the resonse type to json</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>xhr.responseType = 'json'</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{}                   =></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>xhr.onreadystatechange = ()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>use GET statement for reading an URL</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>xhr.onreadystatechange = () => {<br>  if (xhr.readyState === XMLHttpRequest.DONE) {<br>    return xhr.response;<br>  }<br>xhr.open('GET', url);<br>xhr.send();<br>};</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>use POST statement for writing something back to an URL</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const xhr = new XMLHttpRequest();<br>const url = 'https://api-to-call.com/endpoint';<br>const data = JSON.stringify({id: '200'});<br><br>xhr.responseType = 'json';<br><br>xhr.onreadystatechange = () => {<br>  if(xhr.readyState === XMLHttpRequest.DONE){<br>    return xhr.response;<br>  }<br>}<br><br>xhr.open('POST', url);<br>xhr.send(data);</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">NODE.JS</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>https://nodejs.org/en/</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>home of node.js</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>https://nodejs.org/dist/latest-v15.x/docs/api/</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>docu of the modules</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>check if and which node.js version is installed</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>node --version</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>node package manager - show the installed version</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm --version</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>create a package.json files with all necessary project informations</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm init</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>initialize node-project - with the parameter "-y" without prompting for additonal informations</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm init -yarn</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>install module "uuid" - node_modules folder is created - dependencie is added to package.json</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm install uuid</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>install module as development dependencie</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm install -D nodemon</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>install all modules according to the dependencies in the package.json</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm install</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>update the dependencies of the project</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm update</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>install several modueles in one line</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>npm i ejs dotenv</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>how to link 2 js-files</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// in the first file:<br>const pers = {            // define object in a file<br>    name: "John",<br>    age: 30<br>}<br>module.exports = pers     // make object usable for other files<br><br>// in the second file:<br>const person = require("./person")      // use person from other file<br>console.log(person)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Setup a simple server</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const http = require("http")<br>const fs = require("fs")<br>http.creatorServer((req,res) => {<br>	fs.readFile("demofile.html", (err, data) => {<br>		res.writeHead(200, {"Content-Type": "text/html"})<br>		res.write(data)<br>		res.end()<br>	})<br>}).listen(8000)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Module path<br>The path module provides utilities for working with file and directory paths.</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const path = require("path")    // include module<br>console.log(__filename)         // outputs the whole path of the file<br>path.basename(__filename)       // outputs only the filename<br>path.dirname(__filename)        // outputs the dirname of the file<br>path.extname(__filename)        // outputs the extention of the file<br>path.parse(__filename)          // outputs several infos as object (root,dir,base,ext,name)<br>path.parse(__filename).base     // outputs only the base filename<br>path.join(__dirname, "test", "hello.html")  // use dirname and appends the 2 text-infos to the path</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Module fs<br>The fs module enables interacting with the file system</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// Create folder<br>fs.mkdir(path.join(__dirname, "/test"), {}, (err)  =>  {<br>    if (err) throw err;<br>    console.log("Folder created...")<br>})<br><br>// Create and (over)write to file<br>// write file to the joined path<br>// name of the file is "hello.txt"<br>// content of the file is "Hello World!"<br>fs.writeFile(path.join(__dirname, "/test", "hello.txt"), "Hello World!", (err)  =>  {<br>    if (err) throw err<br>    console.log("File written to...")<br>})<br><br>// Create and append to file<br>fs.writeFile(path.join(__dirname, "/test", "hello.txt"), "Hello World!", (err)  => {...})<br><br>// Read file<br>fs.readFile(path.join(__dirname, "/test", "hello.txt"), "utf8", (err, data)  =>  {<br>    if (err) throw err<br>    console.log(data)<br>})<br><br>// Rename file<br>fs.rename(path.join(__dirname, "/test", "hello.txt"),<br>            path.join(__dirname, "/test", "hello2.txt"), (err, data)  =>  {<br>    if (err) throw err<br>    console.log("File renamed...")<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>include module</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const path = require("os")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>outputs the os platform (eg. win32 for windows, darwin for macos)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.platform()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>outputs architecture (eg. x64, x32)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.arch()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>cpu informations (model,speed,times for every core)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.cpus()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>free memory (eg. 18717655040)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.freemem()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>total memory (eg. 34237403136 for 32GB RAM)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.totalmem()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>home directory of the user (eg. c:\Users\Max)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.homedir()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>uptime of the computer in seconds (eg. 13463)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>os.uptime()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Module os<br>The os module provides operating system-related utility methods and properties.</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Module url<br>=> The url module provides utilities for URL resolution and parsing.<br>const url = require("url")  => include module<br>const myUrl = new URL("https://www.xyz.com")     => assign URL<br>myUrl.href          => the whole url (eg. https://www.rapidtech1898.com/htmlFinanztools/en/aktienbewertungInSekundenEN.html)<br>myUrl.toString()    => 2nd method to get the whole url<br>myUrl.hostname      => the hostname of the url (eg. www.rapidtech1898.com)<br>myUrl.host          => the host of the url (including port number - when it exists in the url)<br>myUrl.pathname      => the pathname (eg. /htmlFinanztools/en/aktienbewertungInSekundenEN.html)<br>myUrl.search        => the search-parameters of the url (eg. ?id=100&status=active)<br>myUrl.searchParams  => show parameters (eg. URLSearchParams { 'id' => '100', 'status' => 'active' }<br>myUrl.searchParams.append('abc','123')  => add a parameter with id=abc and value=123<br><br>=> Loop through params</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>console.log(`${name}: ${value}`))</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>myUrl.serachParams.forEach((value,name)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Module http<br>=> The HTTP interfaces in Node.js are designed to support many features of the protocol<br>const http = require("http")  => include module</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>http.createServer((req, res)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>console.log("Server running..."))     // running on port 5000</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>}).listen(5000, ()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Simple Server</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>http.createServer((req, res)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{             // reads file and shows it in browser</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>fs.readFile('demofile.html', (err, data)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Simple GET-API</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.get("/", (request, response)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{                            // server listening on port 8000</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.listen(PORT, ()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Server with Client connection</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{     // returns the savage object</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.get("/api/savage", (request, response)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>{        // listen on port (first entry for hosting on eg. horuku - second one for localhost)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.listen(process.env.PORT || PORT, ()</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>JSX: show the "title" only when "showtitle" is true using a ternary expression</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>{showTitle ? title : ""}</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Define States with default value "" (title is the state, setTitle the state-function)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const [title, setTitle] = useState("")</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br><br><br>###### REACT<br>=> Javascript library for building user interfaces especially for single-page applications (like facebook, twitter etc.)<br>=> React allows developers to create large web applications that can change data, without reloading the page<br>components  => webpage is divided in many components (like on facebook)<br>props       => every component has some properties (size, color, shape, etc.) - arguments are passed into components<br>states      => and components have states (like the counter for likes / dislikes / unread messages etc.) - if state changed => component has to react and re-render<br>react       => contains the APIs for creating components<br>react-dom   => contains the APIs for rendering to the browser DOM<br>JSX         => syntax extension to JS<br><br>npx create-react-app nameProject            => create react app in a folder with the name "nameProject"<br>npm install --global yarn                   => install yarn (if not allready installed)<br>yarn start                                  => start the react app (default on http://localhost:3000/)<br>standard-folder "public" / index.html       => is the base setup for html-file (important is <div id="root"></div> - where everything get rendered from react)<br>standard-folder "public" / favicon.ico      => icon of the tab<br>standard-folder "public" / manifest.json    => name, shortname of the react-app (description of the application)<br>standard-folder "src" / index.js            => entry-point for the react-app (get everything from App and render this to the div-element with the root-id)<br>standard-folder "src" / app.js              => main react-app called App<br><br><Info></Info>                           => call the component "Info"<br><Info />                                => 2nd method to call the component "Info"<br>{title}                                 => JSX: use the variable "title" in the react html code<br><AddItem text="blabla" number={2} />    => Define a prop "text" in a component-call and a numeric prop "number"<br>function AddItem(props)                 => Use the props in the component (access with props.text or props.number)<br>function AddItem(text, number)          => Or use the props destructured in the component<br>function AddItem({text, number=99})     => Define component with default prop for "number"<br><p>{props.number}</p>                   => Render the props.number in a paragraph-tag<br><br>import { useState } from "react"        => Import useState<br>const [count, setCount] = useState(0)   => Define States with default value 0 (count is the state, setcount the state-function)<br><p>Title: {title} </p>                  => Use the variable in the tags<br><button onClick={updateCounterClicked}>Update Counter</button>     => function is called when the button is pressed<br>const updateCounterClicked = () => {setCount(count + 1)}           => count i incread by one in the function (=when the button is pressed)<br><br>=> Use component in a seperate file</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Simplest possible App.js file</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><br>=> Example for a component with class based syntax</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>        <p>Manage your stuff</p><br>      </div><br>    )<br>  }<br>}<br><br>export default Info;</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Example (with old Class syntax)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>index.html in folder <public> with: <div id="root"></div><br>    => defines initial root-element where all the input goes to<br>index.js in folder <src> with: ReactDOM.render(<App />, document.getElementById('root'));<br>    => renders APP and put this in the div with id=root<br>app.js<br>    => Import components with:<br>        import React, { Component } from 'react';<br>        import './App.css';<br>        import Header from './Header';<br>        import SectionMain from './SectionMain';<br>        import Aside from './Aside';<br>        import Footer from './Footer';<br>    => Render components<br>        class App extends Component {<br>          render() {<br>            return (<br>              <div className="App"><br>                // call Header with the 2 props<br>                <Header backColor="green" width="50%"></Header><br>                <SectionMain></SectionMain><br>                <Aside></Aside><br>                <Footer></Footer><br>              </div><br>            );<br>          }<br>        }<br>footer.js<br>    => Import react and styling-file<br>        import React, { Component } from 'react';<br>        import './Footer.css';<br>    => Render components<br>        class Footer extends Component {<br>          render() {<br>            return (<br>                <footer className="Footer"><br>                </footer><br><br>            );<br>          }<br>        }<br>        export default Footer;</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">TOOLS OVERVIEW</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p><a href='https://zellwk.com/blog/crud-express-mongodb/' target='_blank'>https://zellwk.com/blog/crud-express-mongodb/</a><br>NODE.JS</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that<br>runs on the V8 engine and executes JavaScript code outside a web browser.</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Express<br><a href='https://zellwk.com/blog/crud-express-mongodb/' target='_blank'>https://zellwk.com/blog/crud-express-mongodb/</a></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Is a framework for building web applications on top.<br>It simplifies the server creation process that is already available in Node.</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>NODEMON</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Nodemon restarts the server automatically when you save a file that’s used by the server.js<br>npm install nodemon --save-dev          // insatllation as development dependency<br><br>Add this in package.json<br>    "scripts": {<br>        "dev": "nodemon server.js"<br>    }<br>now you can start nodemon with: npm run dev</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>CRUD<br>is an acronym for Create, Read, Update and Delete.</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>It is a set of operations we get servers to execute (POST, GET, PUT and DELETE requests respectively).<br>This is what each operation does:<br>    Create (POST) - Make something<br>    Read (GET)- Get something<br>    Update (PUT) - Change something<br>    Delete (DELETE)- Remove something<br>POST, GET, PUT, and DELETE requests let us construct Rest APIs.</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Package Managers<br>to automatically download 3rd party packages</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>help automate the process of downloading and upgrading libraries from a central repository<br>npm (starting 2015) - node package manager<br>yrn (starting 2016, alternative to npm - but npm packages under the hood)<br>bower (starting 2013 - older one, was in before npm / yarn popular)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Module Bundler<br>to create a single script file</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>A JavaScript module bundler is a tool that gets around the problem with a build step<br>(which has access to the file system) to create a final output that is browser compatible<br>(which doesn’t need access to the file system<br>browserify (starting 2011)<br>webpack (starting 2015)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Transpiler<br>to use future JavaScript features</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Transpiling code means converting the code in one language to code in another similar language.<br>for CSS eg. Sass, Less, Stylus<br>for JavaScript eg. babel, TypeScript, CoffeeScript (starting 2010)<br></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Task Runner<br>to automate different parts of the build process</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>For frontend development, tasks include minifying code, optimizing images, running tests, etc.<br>npm scripts (nowadays the most popular - use the capabilities built into the npm)<br>grunt, gulp (in earlier times)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Template Engines</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Pug<br>EJS Embedded Java Script<br>Nunjucks</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Postman<br>Testing APIs in an web-applicaton</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code><a href='https://www.postman.com/' target='_blank'>https://www.postman.com/</a></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>EJS<br>Embedded Javascript Template</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>HTML with Javsscript logic in it<br>eg. for flexible li-elements from a db<br><% for (let i=0; i<info.length; i++) {%><br>    <li class="rapper"><br>        <span><%= info[i].stageName %></span><br>        <span><%= info[i].birthName %></span><br>        <span class="del">delete</span><br>    </li><br><% } %></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Curl<br>For testing api endpoints<br><a href='https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/' target='_blank'>https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/</a></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>curl --version                  => Check the installed curl version<br>curl https://api.github.com     => show all apis from github<br>curl https://api.github.com/users/zellwk/repos      => show all repos from a specific user (zellwk)<br>curl https://api.github.com/users/zellwk/repos\?sort\=pushed    => show all repos with parameters ("\" have to be before the "=")<br>curl -X POST https://api.github.com/user/repos                  => tries to create an repo via api (use -X before the command)<br>curl -H "Content-Type: application/json" https://api.github.com -v      => shows the header of the api<br>curl -X POST <URL> -d property1=value1 -d property2=value2              => send data via the api with the -d properties<br>curl -x POST -u "username:password" https://api.github.com/user/repos   => send post-request with authentification (use -u property)</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Passport<br>Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to<br>MVC<br>Architectural Concept which is used by many frameworks (ruby on rails, django, laravel, etc.)<br>stands for: Model / View / Controller<br><a href='https://youtu.be/1IsL6g2ixak' target='_blank'>https://youtu.be/1IsL6g2ixak</a></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>never repeat yourself / structured programming<br>Client (Browser,HTML,CSS,JS) => Server (Linux,Windows,PHP,Ruby,Python) => Database (MySQL,PostgresQL,NoSQL,MongoDB)<br>View is the Client (only thing the user sees, speaks only with controller, manly html and css)<br>Controller is the Server (processes requests, server-side logic, middle man between view and model)<br>Model is the Database (Adding/Retrieving from or to the database, speaks only with the controller)</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">EXAMPLE FULL STACK</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>MONGOOSE<br>full example see: \DEV\LeonNoel-100Devs\class33\rap-names-express<br>Setting up the project</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>mkdir api-project		// make new directory for project<br>cd api-project			// change directory to the project<br>npm init				// initzialize npm project / npm-environment<br>npm install express		// install express<br>npm install mongodb/	// install mongodb/<br>npm install ejs			// install ejs</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Setup Server / Middleware</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>const express = require('express')<br>const app = express()<br>const MongoClient = require('mongodb').MongoClient<br>const PORT = 2121       // define port for localhost-access<br>require('dotenv').config()<br><br>app.set('view engine', 'ejs')<br>app.use(express.static('public'))<br>app.use(express.urlencoded({ extended: true }))<br>app.use(express.json())</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Connect to DB<br>database in this example on Atlas MongoDB<br>under "Database Access": create an user with password (can be different than the normal Atlas MongoDB login)<br>under "Network Access": whitelist the IP with which the access is be done<br>store the critical credentials info in a sepearte file called ".env"</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// make an ".env" file where the DB-string is stored - and add .env to the .gitignore so the file get not public on github later<br>DB_STRING = mongodb+srv://<Username from Database Access>:<Password for that user>@cluster0.ram23.mongodb.net/myFirstDatabase?retryWrites=true&w=majority<br>// define basis for db-connection<br>let db,<br>    dbConnectionStr = process.env.DB_STRING,<br>    dbName = 'rap'<br>// connect to mongoDB (with error handling)<br>MongoClient.connect(dbConnectionStr, { useUnifiedTopology: true })<br>    .then(client => {<br>        console.log(`Connected to ${dbName} Database`)<br>        db = client.db(dbName)<br>    })<br>    .catch(err =>{<br>        console.log(`Connection to db not possible - error ${err}`)<br>    })</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Setup Server<br>Listen to the Server / Port<br>process.env.PORT for Heroku-Access and PORT for localhost-access</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.listen(process.env.PORT || PORT, ()=> {<br>    console.log(`Server running on port ${PORT}`)<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>GET / Read Access example for the API<br>Read data from the db collection "rappers" - sort them according hte likes - an put it in an array<br>Call the index.ejs file with the input for "data" (= the array)<br>(1) server.js: app.get<br>(2) server.js: reads data from mongodb and triggers the index.ejs to render<br>(3) index.ejs: renders the file with the given data from mongodb<br>(4) index.ejs: spits out the actual html</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.get('/',(request, response)=>{<br>    db.collection('rappers').find().sort({likes: -1}).toArray()<br>    .then(data => {<br>        response.render('index.ejs', { info: data })<br>    })<br>    .catch(error => console.error(error))<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>POST / Create example for the API<br>Add element to the db collection "rappers" -<br>with the information for stageName / birthName from the form on index.ejs and the field likes with 0<br>console log on the server and redirect to / for the GET to refreh the page index.ejs (new element get displayed)<br>(1) index.ejs: form with action ("/insertxyz" and method (POST) - has a text-input and a submit<br>(2) index.ejs: when submit is clicked the api-action /insertxyz is called with the data<br>(3) main.js: insert the new collection/dataset in the db<br>(4) main.js: call the method "/" again to update the index.ejs with GET</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.post('/addRapper', (request, response) => {<br>    db.collection('rappers').insertOne({stageName: request.body.stageName,<br>    birthName: request.body.birthName, likes: 0})<br>    .then(result => {<br>        console.log('Rapper Added')<br>        response.redirect('/')<br>    })<br>    .catch(error => console.error(error))<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>PUT / Update example for the API<br>Update the element in the db collection "rappers" -<br>Search for stageName and birthName and update the likes-element with +1<br>make new sort + console.log informatin and response json<br>(1) main.js: eventlistener in the client-side js<br>(2) main.js: when element is clicked call the function and make an fetch to the api-call<br>(3) main.js: awaits response and gives to the server.js the data (put-method, headers, body with the data)<br>(4) server.js: get the data from the main.js and updates the db - response to the main.js<br>(5) main.js: awaits the response and reloads the page - so the updated data can be seen</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.put('/addOneLike', (request, response) => {<br>    db.collection('rappers').updateOne({stageName: request.body.stageNameS, birthName: request.body.birthNameS,likes: request.body.likesS},{<br>        $set: {<br>            likes:request.body.likesS + 1<br>          }<br>    },{<br>        sort: {_id: -1},<br>        upsert: true<br>    })<br>    .then(result => {<br>        console.log('Added One Like')<br>        response.json('Like Added')<br>    })<br>    .catch(error => console.error(error))<br><br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>DELETE example for the API<br>Delete the element in the db collection "rappers" -<br>according to the stageName<br>console.log informatin and response json<br>(1)-(5): same as the PUT example only with the methode DELETE</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>app.delete('/deleteRapper', (request, response) => {<br>    db.collection('rappers').deleteOne({stageName: request.body.stageNameS})<br>    .then(result => {<br>        console.log('Rapper Deleted')<br>        response.json('Rapper Deleted')<br>    })<br>    .catch(error => console.error(error))<br>})</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>HTML example for index.ejs<br>the css and client-js file is stored in the folder "public" - so it get linked with the ejs-file<br>all rappers get from the array "info" (is given from data from the server.js file) -<br>is dynamically written to the html-file (ejs build the html-code and "spits" it out)<br>in the second part are the form fields for adding new rappers on the html-page</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// Show current rappers<br><h1>Current Rappers</h1><br><ul class="rappers"><br><% for(let i=0; i < info.length; i++) {%><br>    <li class="rapper"><br>        <span><%= info[i].stageName %></span><br>        <span><%= info[i].birthName %></span><br>        <span><%= info[i].likes %></span><br>        <span class='fa fa-thumbs-up'></span><br>        <span class='fa fa-trash'></span><br>    </li><br><% } %><br></ul><br><br>// Add a rapper<br><h2>Add A Rapper:</h2><br><form action="/addRapper" method="POST"><br>    <input type="text" placeholder="Stage Name" name="stageName"><br>    <input type="text" placeholder="Birth Name" name="birthName"><br>    <input type="submit"><br></form></code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Local JS example (for the index.ejs)<br>1st Part: Adenvetlistener for Icons<br>2nd Part: Deleting and element<br>3rd Part: Updating the likes / +1 like</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// AdventListener for all trash and thumbs-up icons<br>const deleteText = document.querySelectorAll('.fa-trash')<br>const thumbText = document.querySelectorAll('.fa-thumbs-up')<br>Array.from(deleteText).forEach((element)=>{<br>    element.addEventListener('click', deleteRapper)<br>})<br>Array.from(thumbText).forEach((element)=>{<br>    element.addEventListener('click', addLike)<br>})<br><br>// Function for handling deleting locally<br>// Read the stageName and birthName for the element which should be deleted<br>// and handover this information to the API (server.js)<br>// Finally reload the index.ejs with "location.reload()"<br>async function deleteRapper(){<br>    const sName = this.parentNode.childNodes[1].innerText<br>    const bName = this.parentNode.childNodes[3].innerText<br>    try{<br>        const response = await fetch('deleteRapper', {<br>            method: 'delete',<br>            headers: {'Content-Type': 'application/json'},<br>            body: JSON.stringify({<br>              'stageNameS': sName,<br>              'birthNameS': bName<br>            })<br>          })<br>        const data = await response.json()<br>        console.log(data)<br>        location.reload()<br>    }catch(err){<br>        console.log(err)<br>    }<br>}<br><br>// Function for handling a +1 like<br>// Read the stageName and birthName for the element which should be +1 liked<br>// and handover this information to the API (server.js)<br>// Finally reload the index.ejs with "location.reload()"<br>async function addLike(){<br>    const sName = this.parentNode.childNodes[1].innerText<br>    const bName = this.parentNode.childNodes[3].innerText<br>    const tLikes = Number(this.parentNode.childNodes[5].innerText)<br>    try{<br>        const response = await fetch('addOneLike', {<br>            method: 'put',<br>            headers: {'Content-Type': 'application/json'},<br>            body: JSON.stringify({<br>              'stageNameS': sName,<br>              'birthNameS': bName,<br>              'likesS': tLikes<br>            })<br>          })<br>        const data = await response.json()<br>        console.log(data)<br>        location.reload()<br><br>    }catch(err){<br>        console.log(err)<br>    }<br>}</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">AZURE AUTHENTICATION</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p></p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>Keys to provide in the config.js<br>clientID: in Azure Active Directory => App registration => take the id<br>clientSecret: in the App-Registrierung => Certificates & secrets => take the value<br><br>=> in Azure Active Directory<br>- in App registrations<br>- New registration and give name eg. TestBlablabla<br>- choose "in any organizational directory AND personal microsoft accounts"<br>- register<br>- copy application client-id to in config.js at client-id<br><br>=> in the registered Application and in Authentication<br>- redirect uri: http://localhost:2121/auth/openid/return from config.js<br>- front-chanell logout URL: https://localhost:2121<br>- check ID tokens checkbox<br><br>=> in the registered Application and in Certificates & secrets<br>- new client secret<br>- enter description and expires<br>- copy the value (not id!) in config.js at client-secret</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">PKG (create executable from node.js)</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>create an executable (for all plattforms and standard node-version)</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>pkg nameOfFile.js</code></pre>
<!-- /wp:code -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>create exe with specific node-version for windows</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>pkg scrapeAppStore.js --targets node12-win-x64</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">HEROKU (hosting web-apps, running scripts in the cloud)</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"canvasClassName":"cnvs-block-core-paragraph-1686132588595"} -->
<p>Heroku<br>Hosting APIs in the cloud</p>
<!-- /wp:paragraph -->
<!-- wp:code {"canvasClassName":"cnvs-block-core-code-1686132588597"} -->
<pre class="wp-block-code"><code>// Initial setup<br>git init (when .git is not in the folder of the api)<br>echo '{}' > composer.json               // for PHP: additional when deploying an PHP-api<br>echo "web: node server.js" > Procfile   // for Express: create profile (tells heroku what the server-file is)<br>git add .<br>git commit -m "upd"<br>heroku login -i                         // login to heroku<br>heroku create simple-rap-api            // create entry on heroku<br>heroku git:remote -a simple-rap-api     // name of the app on heroku<br>git push heroku master                  // push everything to heroku (or git push heroku main)<br>set config vars in heroku under <seetings> in the app<br><br>// Ongoing updates<br>git add .<br>git commit -m "upd"<br>heroku login -i<br>heroku git:remote -a financerapidapi<br>git push heroku main (or git push heroku master)</code></pre>
<!-- /wp:code -->
<!-- wp:heading {"canvasClassName":"cnvs-block-core-heading-1686125278519"} -->
<h2 class="wp-block-heading">NODEMAILER (send mails)</h2>
<!-- /wp:heading -->