Skip to content

Commit 2e0c394

Browse files
bjellinebjelline
committed
1 parent 8a2d4ac commit 2e0c394

File tree

6 files changed

+332
-297
lines changed

6 files changed

+332
-297
lines changed

‎images/javascript/meinmodule.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export let b = 10;
2+
3+
let c = 'super secrret';
4+
5+
export function setB( newValue ) {
6+
b = newValue;
7+
}
8+
9+
// console.log("meinmodule kann variable a nicht:", a);
10+

‎images/javascript/meinscript.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
let b = 10;
2+
console.log("meinskript kann variable a sehen:", a);
3+
4+
a += 10;
5+
6+
console.log("meinskript kann variable a verändern:", a);

‎images/javascript/module.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<link rel="shortcut icon" href="/assets/img/favicon.png">
5+
<title>Demo-Seite: Javascript und Module</title>
6+
<style>
7+
main {
8+
max-width: 600px;
9+
margin: 0 auto;
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
.flex {
13+
display: flex;
14+
gap: 5px;
15+
}
16+
</style>
17+
</head>
18+
<body id="bg">
19+
<main>
20+
<nav class="flex">
21+
<a href="no-module.html">ohne Module</a>
22+
|
23+
<b>mit Modul</b>
24+
25+
</nav>
26+
<h1>Variablen in Javascript mit Modul</h1>
27+
28+
<script type="module">
29+
let a = 1;
30+
31+
import { b, setB } from './meinmodule.js';
32+
33+
console.log("direkt im html mit type=module kann ich variable b sehen:", b);
34+
35+
// b += 10;
36+
37+
console.log("direkt im html mit type=module kann ich variable b nicht verändern!!!!:");
38+
39+
setB(42);
40+
41+
console.log("direkt im html mit type=module kann ich variable b sehen:", b);
42+
43+
</script>
44+
<p>
45+
javascript-code der mit normalen script-tags geladen wird
46+
befindet sich gemeinsam in einem globalen namensraum.
47+
</p>
48+
</main>
49+
50+
51+
</body>
52+
</html>
53+

‎images/javascript/no-module.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<head>
3+
<meta charset="utf-8">
4+
<link rel="shortcut icon" href="/assets/img/favicon.png">
5+
<title>Demo-Seite: Javascript und Module</title>
6+
<style>
7+
main {
8+
max-width: 600px;
9+
margin: 0 auto;
10+
font-family: Arial, Helvetica, sans-serif;
11+
}
12+
.flex {
13+
display: flex;
14+
gap: 5px;
15+
}
16+
</style>
17+
</head>
18+
<body id="bg">
19+
<main>
20+
<nav class="flex">
21+
<b>ohne Module</b>
22+
|
23+
<a href="module.html">mit Modul</a>
24+
25+
</nav>
26+
<h1>Variablen in Javascript ohne Module</h1>
27+
28+
<script>
29+
let a = 1;
30+
</script>
31+
<script src="meinscript.js"></script>
32+
<script>
33+
console.log("direkt im html kann ich variable b sehen:", b);
34+
b += 10;
35+
console.log("direkt im html kann ich variable b sehen:", b);
36+
</script>
37+
<p>
38+
javascript-code der mit normalen script-tags geladen wird
39+
befindet sich gemeinsam in einem globalen namensraum.
40+
</p>
41+
</main>
42+
43+
44+
</body>
45+
</html>
46+

0 commit comments

Comments
 (0)