From 145bae48c833f0cd685825e918baef176ce7d790 Mon Sep 17 00:00:00 2001
From: mb <mail@manettaberends.nl>
Date: Tue, 14 Feb 2023 10:51:57 +0100
Subject: [PATCH] adding the js intro of today

---
 js/javascript-introduction.html | 222 ++++++++++++++++++++++++++++++++
 1 file changed, 222 insertions(+)
 create mode 100644 js/javascript-introduction.html
diff --git a/js/javascript-introduction.html b/js/javascript-introduction.html
new file mode 100644
index 0000000..cf2c6b0
--- /dev/null
+++ b/js/javascript-introduction.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
+    <title>java script - introduction</title>
+</head>
+<body>
+<!-- 
+
+Todays class is about java script or sometimes just called JS!
+
+JS is next to HTML and CSS on of the core technologies of the WEB. 
+With JS you can script on the client side different actions and 
+influnce the webpage behavior :D
+
+-->
+
+<!-- ============================================ -->
+
+<!-- Start of the tutorial - the alert box -->
+<h1>1. alert</h1>
+<button onclick="start()">Start!</button>                                                
+<!--this is a button with the onlick-tag you can execute javascript code -->
+<script>                                                                                 
+//the <script> tag starts the javascript code
+function start(){                                                                        
+//this is a function similar to the "def" in python
+    alert('Hello! \nPlease open the inspector and have a look at the html code.');       
+    //this is an alert box! it pops up on the screen!
+}                                                                                        
+//js has its own syntax. you start a function with a "{" and end with a "}"
+</script>                                                                                
+<!-- this script tag ends the javascript code -->
+
+<!-- ============================================ -->
+
+<!-- dom manipulation -->
+<h1>2. DOM manipulation</h1>
+<h2 id="changethis">This tutorial is stupid</h2>                                         
+<!-- a h1 with an id -->
+<button onclick="changethis()">click me to change the h2!</button>
+<script>
+function changethis(){
+    document.querySelector("#changethis").innerHTML = "This tutorial is great";          
+    // the whole web page is the "document"
+    // with "querySelecter("theClass or ID or element name")" you can access different parts of the document with the class, id or element name.
+    // You can also use getElementById(): with "getElementById("theID")" you can access different parts of the document with the Id
+    // each html element has an innerHTML with the "=" you can change its content!
+}
+</script>
+
+<!-- ============================================ -->
+
+<!-- a simple counter -->
+<h1>3. Counter</h1>                                        
+<h3 id="counter">0</h3>                                        
+<button onclick="counter()">Plus one, please!</button>
+<script>
+var counterValue = 0;                                                                         
+//a variable called counter
+function counter(){
+    counterValue = counterValue + 1;                                                               
+    //count one to the counter
+    document.querySelector("#counter").innerHTML = counterValue;                              
+}
+</script>
+
+<!-- ============================================ -->
+
+<!-- a timer -->
+<h1>4. Timer</h1>
+<h3 id="timer">0</h3>                                        
+<button onclick="timer()">Start the timer!</button>
+<script>
+var timerValue = 0;                                                                         
+//a variable called timer
+function timer(){
+    setInterval(function () {                                                                   
+    //setInterval is called in a specific interval
+        timerValue = timerValue + 1;                                                       
+        document.querySelector("#timer").innerHTML = timerValue;                           
+    }, 1000);                                                                                   
+    //1000 milliseconds are one second
+}
+//click the timer button several times :D
+</script>
+
+<!-- ============================================ -->
+
+<!-- a timer -->
+<h1>5. Timer but only possible to click once :D</h1>
+<h3 id="timerOnce">0</h3>                                        
+<button onclick="timerOnce()">Start the timer!</button>
+<script>
+var timerOnceValue = 0;                                                                         
+//a variable called timerOnceValue
+var timerOnceOn = false;
+function timerOnce(){
+    console.log("timerOnce is clicked!", timerOnceOn);
+    if(timerOnceOn === false){                                                                   
+    //the setInterval will be only started if the timeOnceOn is false
+        timerOnceOn = true; 
+        setInterval(function () {                                                               
+        //setInterval is called in a specific interval
+            timerOnceValue = timerOnceValue + 1;                                                       
+            document.querySelector("#timerOnce").innerHTML = timerOnceValue;                           
+        }, 1000);                                                                               
+        //1000 milliseconds are one second
+    }
+}
+//click the timer button several times :D
+</script>
+
+<!-- ============================================ -->
+
+<!-- an ascii animation -->
+<h1>6. Animation </h1>
+<pre id="animation">
+         (__)
+         (oo)
+  /-------\/
+ / |     ||
+*  ||----||
+   ~~    ~~ 
+</pre>                                        
+<button onclick="animation()">Start the animation</button>
+<script>
+var frames = [`         
+         (__)  
+         (oo)
+  /-------\\/
+ / |     ||
+*  ||----||
+   ~~    ~~  `,`
+         )__(
+         (xx)
+  /-------\\/
+ / |     ||
+X  ||----||
+   ~~    ~~ `];
+
+// Note that the ` character above it not a " or '. It's a so called "backtick".
+// In javascript they called "Template literals", 
+// they are used for multi-line strings (and other things).
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
+
+function animation(){
+    currentframe = 0;
+    setInterval(function () {                                                          
+        document.querySelector("#animation").innerHTML = frames[currentframe]; 
+        currentframe = currentframe + 1;
+        if(currentframe >= frames.length){                                          
+        // length gives back the size of the array
+            currentframe = 0;
+        }
+    }, 500);                                                                               
+}
+</script>
+
+<!-- ============================================ -->
+
+<!-- More DOM manipulation -->
+<h1>7. Chaging the styles</h1>
+<button onclick="changeColors()">click me to change the color of all h1's!</button>
+<script>
+function changeColors(){
+    var headers = document.querySelectorAll("h1");
+    // With "document.querySelectorAll()" you can select multiple elements at once. 
+    // It returns a list, which in this case is a list of <h1> elements.
+    // To change something to all the elements, we need to loop through this list, with a for loop.
+    for(let i = 0; i < headers.length; i++){
+    // This is a for loop in javascript. It looks a bit complex, but it's not that difficult. 
+    // It basically turns "i" into a counter, which stops when it reaches the length of the <h1> headers list.  
+        headers[i].style.color = "green";
+        // With ".style" you can access all the CSS rules. 
+        // So: color, font-size, background-color, transform, etc.
+    }         
+}
+</script>
+
+<!-- ============================================ -->
+
+<!-- Add a game element -->
+<h1>8. Adding elements after every 5 seconds</h1>
+<h3 id="secondTimer">0</h3>
+<div id="newElements"></div>                                     
+<button onclick="addElements()">click me to initialize this game element</button>
+<script>
+var secondTimerValue = 0;                                                                         
+var secondTimerOn = false;
+function addElements(){
+    if(secondTimerOn === false){                                                                   
+        secondTimerOn = true; 
+        setInterval(function() {                                                               
+            secondTimerValue = secondTimerValue + 1;                                                       
+            document.querySelector("#secondTimer").innerHTML = secondTimerValue;                           
+            if(secondTimerValue % 5 == 0){
+            // https://devdocs.io/javascript/operators/remainder
+                console.log("5 seconds are past!");
+
+                let newElement = document.createElement("div");
+                newElement.style.width = "100px";
+                newElement.style.height = "100px";
+                newElement.style.background = "pink";
+                newElement.style.border = "1px solid red";
+                newElement.style.display = "inline-block";
+
+                document.querySelector("#newElements").append(newElement);
+            }                          
+        }, 1000);  
+    }
+}
+</script>
+
+<!-- ============================================ -->
+
+<br>
+<br>
+<hr>
+<br>
+<br>
+</body></html>
\ No newline at end of file
