====== LU01.A05 - JS einbinden in den HTML-Code ====== ===== Rahmenbedingungen ===== * Sozialform: individual * Hilfsmittel: * VS Code Editor * Zeit: 20 Minuten * Erwartetes Resultat: 3 Buttons, die mittels unterschiedlicher JS-Einbindung Informationen auf dem Browser ausgeben. ===== Ausgangslage ===== Sie haben im //LU01b - JavaScript in HTML// gelernt, dass es in JS unterschiedliche Arten gibt JS-Code ins HTML einzubinden. Wir wollen nun diese Varianten praktisch anwenden. ===== Vorarbeiten ===== - Legen Sie im Visual Studio Code ein Projektverzeichnis //scripts// für die zukünftigen JS-Scripte an. - Legen Sie in dem Verzeichnis //scripts// eine Datei //LU05_L05.js// an. Ihr JS-Code wird hier gespeichert. - Kopieren Sie den nachfolgenden HTML-Code inm Ihre Lösungsdatei und bearbeiten Sie den Auftrag gemäss Aufgabenbeschreibung. ===== Basisquellcode für LU01_L05.html =====

My Second JavaScript

===== Aufgabe ===== Realisieren Sie basierend auf der Aufgabe //LU01_L03.html// die nachfolgenden 3 Varianten, wie JavaScript ins HTML eingebunden wird. - Direkt im HTML-Tag: Ausgabe des Datums (Button 1) - Mittels Script-Tags: Ausgabe des Namens (Button 2) - Als separate Datei: Ausgabe der Hobbies (Button 3, muss noch angelegt werden) ===== Zielvorgabe 1: Dateiorganisation ===== Ihr Files sollten wie folgt organisiert sein: {{:modul:m288:learningunits:lu01:aufgaben:lu01_a05_2.jpg?400|File-Organisation im VS-Code}} ===== Zielvorgabe 2: Browserausgabe ===== Ihre Lösung sollte in etwa wie folgt aussehen. {{:modul:m288:learningunits:lu01:aufgaben:lu01.a05.jpg?600|Zielvorgabe der Lösung}} ===== Lösungen ===== [[de:modul:m288:learningunits:lu01:loesungen:05|LU01.L05]] ---- [[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir