<!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>