d.aster/Front-End
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

hinzugefügt Module Funktionalität in den Quelkode, es wurde import und export Funktionalität verwendet

Browse Source
This commit is contained in:
David 2022-11-15 11:47:07 +01:00
parent d077e9e981
commit 1ee4cd646c
9 changed files with 130 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
javascript/Javascript Expert/chapter11/index.html
View File

@ -7,6 +7,7 @@
<title>Working with Arrays</title>
</head>
<body>
<script src=""></script>
<script type="module" src="map.js"></script>
<!-- Man muss type="module" in den script Tag definieren, um die Modules in der Webseite zu verwenden -->
</body>
</html>

2
javascript/Javascript Expert/chapter11/map.js
View File

@ -1,4 +1,4 @@
import { randomIntNumbers as randomNumbers } from "./template.js";
import { randomIntNumbers as randomNumbers } from "./template.js"; // Die Module template Verwendung
var arr = randomNumbers(15);
console.log("EUR", arr);

64
javascript/Javascript Expert/chapter17/clean.js Normal file
View File

@ -0,0 +1,64 @@
var budget = [
{ value: 250, description: 'Sold old TV 📺', user: 'jonas' },
{ value: -45, description: 'Groceries 🥑', user: 'jonas' },
{ value: 3500, description: 'Monthly salary 👩‍💻', user: 'jonas' },
{ value: 300, description: 'Freelancing 👩‍💻', user: 'jonas' },
{ value: -1100, description: 'New iPhone 📱', user: 'jonas' },
{ value: -20, description: 'Candy 🍭', user: 'matilda' },
{ value: -125, description: 'Toys 🚂', user: 'matilda' },
{ value: -1800, description: 'New Laptop 💻', user: 'jonas' },
];
var limits = {
jonas: 1500,
matilda: 100,
};
var add = function (value, description, user) {
if (!user) user = 'jonas';
user = user.toLowerCase();
var lim;
if (limits[user]) {
lim = limits[user];
} else {
lim = 0;
}
if (value <= lim) {
budget.push({ value: -value, description: description, user: user });
}
};
add(10, 'Pizza 🍕');
add(100, 'Going to movies 🍿', 'Matilda');
add(200, 'Stuff', 'Jay');
console.log(budget);
var check = function () {
for (var el of budget) {
var lim;
if (limits[el.user]) {
lim = limits[el.user];
} else {
lim = 0;
}
if (el.value < -lim) {
el.flag = 'limit';
}
}
};
check();
console.log(budget);
var bigExpenses = function (limit) {
var output = '';
for (var el of budget) {
if (el.value <= -limit) {
output += el.description.slice(-2) + ' / '; // Emojis are 2 chars
}
}
output = output.slice(0, -2); // Remove last '/ '
console.log(output);
};

30
javascript/Javascript Expert/chapter17/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script defer type="module" src="script.js"></script>
<title>Modern JavaScript Development: Modules and Tooling</title>
<style>
body {
height: 100vh;
display: flex;
align-items: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
h1 {
font-family: sans-serif;
font-size: 50px;
line-height: 1.3;
width: 100%;
padding: 30px;
text-align: center;
color: white;
}
</style>
</head>
<body>
<h1>Modern JavaScript Development: Modules and Tooling</h1>
</body>
</html>

3
javascript/Javascript Expert/chapter17/package.json Normal file
View File

@ -0,0 +1,3 @@
{
"type": "module"
}

11
javascript/Javascript Expert/chapter17/script.js Normal file
View File

@ -0,0 +1,11 @@
// Importing Module
// import add, { totalPrice as price, tq, addToCart } from "./shoppingCard.js";
import * as ShoppingCard from "./shoppingCart.js";
import add from "./shoppingCart.js";
console.log("Importing Module");
add("ananas", 3);
ShoppingCard.addToCart("bread", 5);
console.log(ShoppingCard.totalPrice);
console.log(ShoppingCard.tq);

19
javascript/Javascript Expert/chapter17/shoppingCart.js Normal file
View File

@ -0,0 +1,19 @@
console.log("Exporting Module");
const shippingCost = 10;
const cart = [];
const addToCart = function (product, quantity) {
cart.push({ product, quantity });
console.log(`${product}, ${quantity} added to cart`);
};
const totalPrice = 237;
const totalQuantity = 21;
export { totalPrice, totalQuantity as tq, addToCart };
export default function (product, quantity) {
// default export braucht keinen Namen. Bei der Importierung eines solchen Export,
// kann man egal welchen Namen zuweissen, in unserem Fall ist es einfach als add Function bennant worden (sehe die Datei script.js import add from "./shoppingCard.js";)
cart.push({ product, quantity });
console.log(`${product}, ${quantity} added to cart`);
}

15
javascript/Javascript Expert/examples/index.html
View File

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Event Listeners</title>
<script src="ajaxCall.js"></script>
</head>
<body>
<div>
<p class="demo">Original text</p>
</div>
</body>
</html>

8
javascript/Javascript Expert/examples/script.js
View File

@ -1,8 +0,0 @@
const myFunction = event => {
const date = new Date();
document.querySelector(".demo").innerHTML = date;
console.log(date);
console.log(event);
};
document.addEventListener("click", myFunction);