ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

maaike's code samples

Browse Source
This commit is contained in:
brightboost
2021-09-04 21:22:51 +02:00
parent 0189d40676
commit b89b9dfb3f
70 changed files with 2737 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Chapter 13/ch13-browser-supporting-file-reader.html
Executable
+13
View File
@@ -0,0 +1,13 @@
<html>
<body>
<div id="message"></div>
<script>
let message = document.getElementById("message");
if (window.FileReader) {
message.innerText = "Good to go!";
} else {
message.innerText = "No FileReader :(";
}
</script>
</body>
</html>
Chapter 13/ch13-canvas-animation.html
Executable
+42
View File
@@ -0,0 +1,42 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
window.onload = init;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.height = 500;
canvas.width = 500;
var pos = {
x: 0,
y: 50,
};
function init() {
draw();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
pos.x = pos.x + 5;
if (pos.x > canvas.width) {
pos.x = 0;
}
if (pos.y > canvas.height) {
pos.y = 0;
}
ctx.fillRect(pos.x, pos.y, 100, 100);
window.setTimeout(draw, 50);
}
</script>
</body>
</html>
Chapter 13/ch13-canvas-circle.html
Executable
+21
View File
@@ -0,0 +1,21 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
let canvas = document.getElementById("canvas1");
let ctx = canvas.getContext("2d");
canvas.width = 150;
canvas.height = 200;
ctx.beginPath();
ctx.arc(75, 100, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
Chapter 13/ch13-canvas-draw-mouse.html
Executable
+63
View File
@@ -0,0 +1,63 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="color" id="bgColor" />
<br>
<img src="" width="300" height="200" id="holder" />
<input type="button" id="save" value="save" />
<script>
window.onload = init;
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 700;
canvas.height = 700;
let pos = {
x: 0,
y: 0,
};
let bgColor = "red";
let bgC = document.getElementById("bgColor");
bgC.addEventListener("change", function () {
bgColor = event.target.value;
});
document.getElementById("save").addEventListener("click", function () {
let dataURL = canvas.toDataURL();
console.log(dataURL);
document.getElementById("holder").src = dataURL;
});
function init() {
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousemove", setPosition);
canvas.addEventListener("mouseenter", setPosition);
}
function draw(e) {
if (e.buttons !== 1) return;
ctx.beginPath();
ctx.moveTo(pos.x, pos.y);
setPosition(e);
ctx.lineTo(pos.x, pos.y);
ctx.strokeStyle = bgColor;
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
}
function setPosition(e) {
pos.x = e.pageX;
pos.y = e.pageY;
}
</script>
</body>
</html>
Chapter 13/ch13-canvas-drawing-canvas.html
Executable
+31
View File
@@ -0,0 +1,31 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>
<canvas id="canvas3"></canvas>
<script>
let canvas1 = document.getElementById("canvas1");
let ctx1 = canvas1.getContext("2d");
ctx1.strokeRect(5, 5, 150, 100);
let canvas2 = document.getElementById("canvas2");
let ctx2 = canvas2.getContext("2d");
ctx2.beginPath();
ctx2.fillStyle = "blue";
ctx2.arc(60, 60, 20, 0, 2 * Math.PI);
ctx2.stroke();
let canvas3 = document.getElementById("canvas3");
let ctx3 = canvas3.getContext("2d");
ctx3.drawImage(canvas1, 10, 10);
ctx3.drawImage(canvas2, 10, 10);
</script>
</body>
</html>
Chapter 13/ch13-canvas-lines.html
Executable
+23
View File
@@ -0,0 +1,23 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
ctx.lineWidth = 2;
ctx.moveTo(0, 20);
ctx.lineTo(50, 100);
ctx.stroke();
</script>
</body>
</html>
Chapter 13/ch13-canvas-save-image.html
Executable
+34
View File
@@ -0,0 +1,34 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<input type="file" id="imgLoader" />
<br>
<canvas id="canvas"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let imgLoader = document.getElementById("imgLoader");
imgLoader.addEventListener("change", upImage, false);
function upImage() {
let fr = new FileReader();
fr.readAsDataURL(event.target.files[0]);
fr.onload = function (e) {
let img = new Image();
img.src = event.target.result;
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
console.log(fr);
};
}
</script>
</body>
</html>
Chapter 13/ch13-canvas-saving-image.html
Executable
+38
View File
@@ -0,0 +1,38 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<input type="color" id="squareColor" />
<br>
<img src="" width="200" height="200" id="holder" />
<input type="button" id="save" value="save" />
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
let bgC = document.getElementById("squareColor");
bgC.addEventListener("change", function () {
color = event.target.value;
draw(color);
});
document.getElementById("save").addEventListener("click", function () {
let dataURL = canvas.toDataURL();
document.getElementById("holder").src = dataURL;
});
function draw(color) {
ctx.fillStyle = color;
ctx.fillRect(70, 70, 100, 100);
}
</script>
</body>
</html>
Chapter 13/ch13-canvas-text.html
Executable
+21
View File
@@ -0,0 +1,21 @@
<html>
<head>
<style>
#canvas1 {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<script>
let canvas = document.getElementById("canvas1");
let ctx = canvas.getContext("2d");
canvas.width = 200;
canvas.height = 200;
ctx.font = "24px Arial";
let txt = "Hi canvas!";
ctx.fillText(txt, 10, 35);
</script>
</body>
</html>
Chapter 13/ch13-canvas.html
Executable
+20
View File
@@ -0,0 +1,20 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1"></canvas>
<script>
let canvas = document.getElementById("c1");
let ctx = canvas.getContext("2d");
canvas.width = 500; //px
canvas.height = 500; //px
//ctx.fillStyle = "pink";
ctx.fillRect(20, 40, 100, 100);
</script>
</body>
</html>
Chapter 13/ch13-drawing-image.html
Executable
+23
View File
@@ -0,0 +1,23 @@
<html>
<head>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="c1"></canvas>
<img id="flower" src="flower.jpg" />
<script>
window.onload = function () {
let canvas = document.getElementById("c1");
canvas.height = 300;
canvas.width = 300;
let ctx = canvas.getContext("2d");
let myImage = document.getElementById("flower");
ctx.drawImage(myImage, 10, 10);
};
</script>
</body>
</html>
Chapter 13/ch13-geo-getlocation.html
Executable
+15
View File
@@ -0,0 +1,15 @@
<html>
<body>
<script>
window.onload = init;
function init() {
navigator.geolocation.getCurrentPosition(showGeoPosition);
}
function showGeoPosition(data) {
console.dir(data);
}
</script>
</body>
</html>
Chapter 13/ch13-inspect-geo.html
Executable
+11
View File
@@ -0,0 +1,11 @@
<html>
<body>
<script>
window.onload = init;
function init() {
console.dir(navigator.geolocation);
}
</script>
</body>
</html>
Chapter 13/ch13-localstorage.html
Executable
+14
View File
@@ -0,0 +1,14 @@
<html>
<body>
<div id="stored"></div>
<script>
let message = "Hello storage!";
// localStorage.setItem("example", message);
if (localStorage.getItem("example")) {
document.getElementById("stored").innerHTML =
localStorage.getItem("example");
}
</script>
</body>
</html>
Chapter 13/ch13-media.html
Executable
+18
View File
@@ -0,0 +1,18 @@
<html>
<body>
<audio controls>
<source src="sound.ogg" type="audio/ogg" />
<source src="sound.mp3" type="audio/mpeg" />
</audio>
<video width="1024" height="576" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
</video>
<iframe
width="1024"
height="576"
src="https://www.youtube.com/embed/v6VTv7czb1Y"
>
</iframe>
</body>
</html>
Chapter 13/ch13-reading-file.html
Executable
+17
View File
@@ -0,0 +1,17 @@
<html>
<body>
<input type="file" onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
let fr = new FileReader();
fr.onload = function (e) {
message.innerHTML = e.target.result;
};
fr.readAsText(files[0]);
}
</script>
</body>
</html>
Chapter 13/ch13-upload-file.html
Executable
+14
View File
@@ -0,0 +1,14 @@
<html>
<body>
<input type="file" onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
console.log(files[0]);
message.innerText = files[0].name;
}
</script>
</body>
</html>
Chapter 13/ch13-upload-files.html
Executable
+15
View File
@@ -0,0 +1,15 @@
<html>
<body>
<input type="file" multiple onchange="uploadFile(this.files)" />
<div id="message"></div>
<script>
let message = document.getElementById("message");
function uploadFile(files) {
for (let i = 0; i < files.length; i++) {
message.innerHTML += files[i].name + "<br>";
}
}
</script>
</body>
</html>
Chapter 13/ch13.js
Executable
+6
View File
@@ -0,0 +1,6 @@
let varContainingFunction = function () {
let varInFunction = "I'm in a function.";
console.log("hi there!");
};
varContainingFunction();