Hello World
Legen Sie für jede Übung einen Ordner an und speichern alle nötigen Dateien darin. Das vereinfacht das hochladen der nötigen Dateien auf den Server.
Minimalversion
Folgende Version läuft auch lokal im Browser und muss nicht auf einen Webserver geladen werden.
- hello.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <h1>F12-Entwicklertools öffnen!</h1> <script> console.log("Hallo Welt von JavaScript"); </script> </body> </html>
- Starten Sie NotePad++ (oder ein anderer Text-Editor) und kopieren Sie obigen Code.
- Speichern Sie obigen Code in eine Datei
hello.htmlin einen geeigneten Ordner (z.B.01-hello-world). Lassen Sie den Text-Editor offen! - Öffnen Sie die Datei zusätzlich in einem Browser. Öffnen Sie dort die Entwicklertools (F12) und lassen Sie sich die Konsole anzeigen.
Minimalversion auf verschiedene Dateien verteilt
Auch die Minimalversion läuft noch lokal, da alle Dateien direkt von der HTML-Datei eingebunden werden. Was nicht mehr lokal funktioniert, ist wenn Dinge dynamisch von JavaScript aus nachgeladen werden.
HTML:
- hello.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="hello.js"></script> <link href="hello.css" rel="stylesheet"> </head> <body> <h1>F12-Entwicklertools öffnen!</h1> </body> </html>
JS:
- hello.js
console.log("Hallo von hello.js!");
CSS:
- hello.css
h1 { color: lightgray; } body { background-color: black; }
- Legen Sie einen Ordner (z.B.
02-hello-multifile) an und speichern Sie obige drei Dateien darin. - Studieren und verstehen Sie obigen Code. Stellen Sie Fragen.
- Modifizieren Sie obige Dateien und überprüfen Sie, ob Ihre Änderungen zu den erwarteten Ergebnissen führen.