adding the js intro of today
parent
72dfcb010c
commit
145bae48c8
@ -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>
|
||||
Loading…
Reference in New Issue