Login

nbergmann · 01.11.2022, 09:40

Hier sind die beiden Codes:
<!DOCTYPE html><html lang="de">
<head>
<meta charset="utf-8">
<title>Übung, Tabelle</title>
<link rel="stylesheet" href="js4.css">
</head>
<body>
<script>
document.write("<table>");
for(let i=1; i<=5; i++)
{
document.write("<tr>");
for(let k=1; k<=15; k++)
document.write("<td>" + i * k + "</td>");
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>

-------------------------------------------------------------------------

nbergmann · 01.11.2022, 16:28

Ich habe selber die Erklärung gefunden:
Es ist die Datei js4, die nur in einem der beiden Ordner existierte.
Kopiert man diese in den Ordner der Datei, laufen beide Programme richtig.

Heißt das nun andererseits, dass die html-Datei immer zusammen mit js4 verschickt werden muss, damit sie richtig läuft?

***rzscout*** · 01.11.2022, 20:17

Hi nbergmann,
wenn du eine externe JavaScript-Datei verwendest, solltest du diese entweder in dem gleichen Ordner haben oder in einem Unterordner. Danach musst du nur noch richtig den Verweis darauf schreiben.

Zu deinem Codebeispiel kann ich nur sagen das man es vermeiden sollte Seiten mit document.write() zu erstellen. Dafür gibt es bessere Methoden. document.write() hat auch den Nachteil, dass diese nicht im Dom erkannt und angesprochen werden können. Daher sollte man Methoden nutzen wie document.createElement(). Diese erstellt HTML-Elemente, die dann mithilfe von element.appendChild() in den DOM hinzugefügt werden können. Das ist viel sauberer und man kann später drauf besser zugreifen.

Zudem solltest du mit Semmantik besser umgehen in HTML. Erstelle ausschließlich JavaScript-Teile im Head-Element so wie es das W3C vorgesehen hat. Mit dem Attribut 'defer' kannst du dann das Skript nach dem Laden des DOM's ausführen lassen.

Hier ein Beispiel wie ich es machen würde:

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Tabelle</title>

    <script>

        // Ein EventListener der den Code Lädt wenn der DOM vollständig geladen wurde

        document.addEventListener('DOMContentLoaded', function() {

            // Selektion des body-Elements

            var body = document.querySelector("body");

            // Erstellung von zwei Elementen

            var table = document.createElement('table');

            var tbody = document.createElement('tbody');

            // Hinzufügen des Tables in den body

            body.appendChild(table);

            // Hinzufügen des tbody-Elements in den table als Kindelement

            table.appendChild(tbody);

            // Erste Schleife

            for(let i=1; i<=5; i++) {

                // Erstellen eines tr-Elements und hinzufügen zum tbody

                let tr = document.createElement('tr');

                tbody.appendChild(tr);

                for(let k=1; k<=15; k++) {

                    let td = document.createElement('td');

                    // TextContent hinzufügen zum Element td

                    td.textContent = (i*k);

                    tr.appendChild(td);

                }

            }

        });

    </script>

</head>

<body>

    <!-- Hier wird dann später die Tabelle durch JavaScript automatisch erstellt -->

</body>

</html>

Viel Erfolg beim lernen. Gerne kannst du weitere Fragen hier ins Forum stellen.

Viele Grüße
rzscout

nbergmann · 02.11.2022, 11:21

Guten Morgen rzscout!

Herzlichen Dank für deine schnelle, ausführliche Antwort.
Ich habe Sie für spätere Zeiten abgespeichert.

Als Anfänger bin ich von Java nach 200 Lehrbuchseiten frustriert nach JavaScript gewechselt.
Mit dem Buch "Einstieg in JavaScript" von Thomas Theis bin ich nach Einsteigerproblemen sehr zufrieden und habe bis Seite 77 alles verstanden und alle Übungsaufgaben gelöst.
Der Code oben ist aus dem Buch. Ich halte mich natürlich an die Empfehlungen des Autors. Für deine Empfehlungen ist es noch zu früh.
Zurück zu meiner Kern-Frage.
Verstehe ich das richtig, dass html-Dateien oft nicht wie exe-Dateien alleine überall funktionieren, sondern Zusatzdateien benötigen?

Glück auf
Norbert
---

***rzscout*** · 02.11.2022, 14:54

Moin nbergmann,
HTML-Dateien sind keine eigenständig ausführbare Dateien wie exe-Anwendungen. Sie laufen mithilfe von Browser. Hier werden die Tags ausgelesen und dann interpretiert. Zum Thema JavaScript und Java. Das sind unterschiedlichen Technologien und haben garnicht mit einader zu tun außer der ähnichen Syntax.

JavaScript wird entweder in HTML eingebunden oder man kann es via Skript-Tag direkt in HTML integrieren. Das oben genannte Beispiel mit document.write ist veraltet. Nur mit einigen Ausnahmen ist die Benutzung praktisch, aber für die meisten Arbeiten wird es nicht benötigt, da es zahlreiche Probleme mit sich bringt. Es dient nur zum lernen. Zum Umsetzen einer Seite verwendet man andere Methoden.

VG

rzscout

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken