Praktisches Beispiel. Nehmen wir an, du willst deine eigene Webseite bauen. Du lädtst dir Visual-Studio-Code runter und legst eine Index.html an, um dort deinen HTML-Code reinzuschreiben. HTMl ist keine Programmiersprache, sondern eine Markup-Sprache. Dann gehst du her und willst die Webseite natürlich auch cool stylen. Du willst dass sie bestimmte Farben hat, der Hintergrund vielleicht weiß oder schwarz ist, und dass das ganze layout eben cool aussieht. Das machst du in der Regel mit CSS-Code. CSS ist die Abkürzung für Cascading-Style-Sheet-Sprache. Diese ist also für Style und Layout. In der unten genannten Grafik siehst du auf der linken Seite wie der Programmierer das ganze angelegt hat. Erst die Index.html, dann legt er über das Pluszeichen, eine style.css an für das Schreiben des Style-Codes und er möchte natürlich auch mit java-script arbeiten. Damit schreibt er Funktionen. Java-Script ist extrem wichtig in der gesamten Web-Programmierung und nahezu beinahe jede Webseite hat java-script am Start.
Ein Beispiel für eine Funktion wäre z. B. wenn du auf einen Button klickst auf einer Webseite und nach dem Klick siehst du auf der Webseite den Text angezeigt „Hallo schön, dass du wieder hier bist“. Hier wird also im Hintergrund im Code mit Hilfe von java-script der Text ausgegeben. Java-script ist sehr mächtig. Wenn du java-script lernen möchtest, fang nicht gleich mit java-script an, sondern lerne erst HTML, dann CSS, und dann java-script. Das sind sogenannte Frontend-Techniken. Im Cyber-Raum 1 findest du alles, zu diesen Techniken.
Achtung! Achtung !
Bitte verwechsle niemals Java mit java-Script. Es sind 2 völlig unterschiedliche Sprachen! Java ist eine compiler-Sprache, das heißt, sie wird compiliert. und java-script kannst du im Browser ausführen. Auch wenn sie ähnlich klingen, sind sie völlig unterschiedlich.
Hier geht es also um java-script!
Frage 1 – Hilfe mein java-script funktioniert nicht.
Beurteile folgende Situation ( 10 Punkte)
Franky ist noch neu in der Programmierung, er hat sich entschlossen mit Frontend-Entwicklung anzufangen und cool einzusteigen, Html und CSS Kenntnisse hat er bereits, nun möchte er sich auch an java-script wagen. Visual-Studio-Code hat er bereits mit Live-Server installiert. Er geht her und baut folgendes Webseitengerüst unten stehend in der Grafik auf. Er legt eine Index.html an, um dort das HTML-Gerüst aufzubauen, dann legt er eine style.css an, damit er seine Webseite cool stylen kann. und danach so denkt er, legt er einfach ein java-script auf der linken seite an und schreibt „script.js„. Das Problem, er möchte einen Button bauen, wenn der User auf den Button klickt soll ein netter Text auf der Webseite erscheinen. „Hallo, schön, dass du wieder hier bist“ , soll also in java-script ausgeführt werden und auf der Webseite angezeigt werden, wenn der User auf den Button klickt.
Das Problem:
Franky klickt auf den Button, aber die Funktion wird nicht ausgeführt. Welchen krassen Fehler hat Franky bereits im Aufbau seiner Webseite im Bereich java-Script gemacht und warum wird so das java-script nicht ausgeführt?
Lösung
Franky hat soweit alles richtig gemacht, das Problem, er hat vergessen, das ganze zu verbinden.
Er sollte folgenden Code im HTML--Bereich einfügen, um sein externes JavaScript (in diesem Fall die Datei script.js) in die Webseite zu laden und auszuführen.
Frage 2 Hat Maria ein Problem?
Der Fall: Maria will eine Webseite coden, sie lädt sich Visual-Studio-Code herunter und installiert den Live-Server. Den Live-Server der ist extrem wichtig, damit sie sehen kann wie ihre Webseite aussieht. Es ist eine sogenannte Extension, also eine Erweiterung. Sie geht her und legt eine index.html an, dann legt sie eine style.css an auf der linken Seite mit dem Pluszeichen und weil sie java-script benutzen möchte und auch ausführen möchte, legt sie das java-Script folgendermaßen, wie unten abgebildet an. Sie schreibt das geöffnete Script in Zeile 11 und das geschlossene script in Zeile 14 und im Zwischenraum möchte sie das Java-Script der gesamten Webseite hier eintragen.
Frage 1 : Ist es ratsam, das java-script so anzulegen? (10 Punkte)
Frage 2: Würde java-Script code so überhaupt ausgeführt werden können (10 Punkte)
Frage 3: Wo müsste sie genau den java-script Code eintragen? (10 Punkte)
Bei dieser Frage konntest du fette 30 Punkte machen. Begründe genau!
Lies mich: Lösung
Das ist eine sehr spannende Frage.
Zu Frage 1 : Es geht, aber nicht unbedingt zu empfehlen. Siehe unten Begründung.
Zu Frage 2 : Ja, sie könnte java-Script so ausführen
Zu Frage 3 : Java-Script muss in diesem Falle zwischen dem geöffneten script in Zeile 11 und dem geschlossenen script in Zeile 14 ausgeführt werden. Sie müsste ihren java-script -Code also ab Zeile 12 eintragen, damit er ausgeführt werden könnte! – Wichtig und falls dich jemand fragt, wie kann ich java-script ausführen. Hier ist immer der Zwischenraum zwischen dem geöffneten Script und dem geschlossenen Script aussschlaggebend.
Um ihn auszuführen, müsste sie rechts unten auf den sogenannten Live-Server klicken ( Wenn du das Bild vergrößerst steht rechts unten „Go Live“. Dort könnte sie dann in einer Vorschau das ganze anschauen, ob ihr java-script ausgeführt wird. Derzeitig ist kein java-script code vorhanden, deshalb wird auch nichts ausgeführt werden.
Warum ist diese Lösung bei einer Webseite nicht zu empfehlen?
Grundsätzlich funktioniert diese Lösung und es ist kein Problem, eine index.html wurde angelegt, für das html, eine CSS wurde angelegt, (linke Seite) und das java-script wurde vorbereitet.
Das Problem, bei einer Webseite hast du in der Regel extrem viel java-script code. Wenn du diese Lösung wählst wird das ganze sehr schnell unübersichtlicht, weil du hier ja auch noch die gesamte HTML Struktur drin hast und diese kann ja auch noch größer werden im Laufe deines Projekts.
Es ist deshalb ratsam, das ganze so anzulegen wie in Frage 1 hier auf der Seite. ( Kleines Lösungs-Screenshot). Man geht her legt eine index.html an, für das HTML, für das CSS, also für das Stylen der Webseite eine style.css und für java-script legt man ein extra file an und nennt es script.js. Wie in Fall 1 geschildert musst das ganze dann im body verbinden. Es ist dann einfach übersichtlicher und du kannst dort endlos viel java-script code einpflegen….
Zusammenfassend lässt sich folgendes sagen: Wenn du nur mal kurz ein Beispiel ausprobieren willst mit js-Code, dann kann man das schon so machen, aber bei größeren Projekten etc, ist es aus Platzgründen und Code-technischen Überlegungen schon ratsam, für das java-script ein eigenes script.js anzulegen, um alles schön strukturiert und übersichtlich zu haben im Code.
Frage 3 Julia und Franky beim Eis essen (20 Punkte)
Franky und Julia sitzen beim Eis essen. Julia fragt Franky:
Frage 1 Gibt es eigentlich im Bereich java-script Bibliotheken oder Frameworks, die man kennen sollte?
Frage 2 Kann ich in java-script auch Diagramme entwickeln, wenn ja, welche Technik kann ich nutzen?
Lies mich - Lösung
Frage 1
Ja natürlich gibt es Bibliotheken, wie React.js oder das Framework Vue.js oder das Angular-Framework.
Ein interessantes Techstack ist sicherlich HTML, CSS, Java-script + eine der oben genannten 3 Techniken. Das sind häufige sogenannte Frontend-Techniken.
Frage 2
Julia möchte ja, Diagramme im code bauen. Das geht mit Visual-Studio-Code in Verbindung mit Chart.js – Möglich wäre hier auch das ganze mit Python zu machen. Python und Plotly-Technik.
Das Problem bei chart.js ist sicherlich, dass der Installationsvorgang nicht ganz einfach ist, deshalb wurde schon vor 2 Jahren, ein Video angefertigt, wie du Chart.js in Visual-Studio-Code aufbaust und Diagramme mithilfe von Code in Sekundenschnelle verändern und aufbauen kannst.
Wie installiert man eigentlich chart.js, um Diagramme zu programmieren und anzuzeigen? Video
