You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
222 lines
8.8 KiB
HTML
222 lines
8.8 KiB
HTML
2 years ago
|
<!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>
|