Show pageOld revisionsBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== 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. <code html 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> </code> <WRAP todo> * Starten Sie NotePad++ (oder ein anderer Text-Editor) und kopieren Sie obigen Code. * Speichern Sie obigen Code in eine Datei ''hello.html'' in 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. </WRAP> ===== 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: <code 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> </code> JS: <code js hello.js> console.log("Hallo von hello.js!"); </code> CSS: <code css hello.css> h1 { color: lightgray; } body { background-color: black; } </code> <WRAP todo> * 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. </WRAP> kurse/ef05a-2021/js/helloworld.txt Last modified: 2022/02/03 11:13by Ivo Blöchliger