Javascript in HTML einbinden - Problem?
Wie soll ich JS in HTML einbinden? Habe das immer so gemacht:
<script language="javascript" type="text/javascript" src="dateiname.js"></script>
Aber wenn ich dann z.B:
drawBoxes('yyy bbb ggg');
Mache, dann passiert in der HTML Seite garnichts.
LG
CSS in HTML einzubinden funktioniert letzterzeit komischerweise auch nicht. Muss das dann immer intern in der HTML-Datei machen.
4 Antworten
1) Achte auf ein valides Markup.
2) CSS wird so eingebunden: https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Stylesheets_einbinden#Einbinden_einer_externen_Datei
3) Externe Skriptdateien solltest du so einbinden:
<script src="dateiname.js"></script>
Achte auf eine korrekte Pfadangabe. Groß- und Kleinschreibung sollten berücksichtigt werden.
4) Schau in die Browserkonsole. Entweder kann die Ressource nicht geladen werden oder es besteht ein grundlegender Fehler im Skript. Die Funktion drawBoxes bspw. muss definiert sein.
Öffne auf deiner Seite nochmal die Entwicklerkonsole und gehe in den Network-Tab. Lade die Seite neu und suche dann in der Liste den Eintrag für CSSNA.css heraus. Der vom Webserver ausgegebene MIME-Type ist sicherlich nicht text/css.
Zudem ist, wie ich es schon bei 4) vermutet habe, die Funktion drawBoxes nicht definiert / vorhanden.
Die Funktion existiert nicht. Was auch immer du da machen möchest, musst du über einen anderen Weg realisieren.
Im einfachsten Fall so:
function drawBoxes() {
}
Aber das ist ganz sicher nicht für dich ausreichend. Die Funktion soll doch auch etwas machen. Die Frage ist daher: Woher weißt du, dass es diese Funktion gibt / von woher soll sie denn kommen?
Ich lerne über eine App auf dem Handy (grasshopper) Javascript, und dort wurde diese Funktion benutzt , um z.B Länderflaggen durch solche Kästchen darzustellen
Habe jetzt wieder eine externe CSS Datei drin. In der Konsole sind erst einmal keine Probleme. Aber eins habe ich: DIe Seite aktualisiert und aktualisiert...
Es hört nicht auf xd
Die App wird eine Funktion / Skriptdatei eingebunden haben, die diese Funktion beinhaltet. Sie gehört aber nicht zum Standardrepertoire von Webbrowsern und kann daher nicht auf eigenen Webseiten so einfach angewandt werden.
Schau mal nach p5.js. Das ist eine JS-Bibliothek, die du bei dir einbinden kannst. Sie beinhaltet ein paar Funktionen zum Zeichnen (auf Canvas-Elementen). Sicherlich kannst du dir so ebenso das nachbauen, was du entwickeln wolltest.
Danke! :D
Habe jetzt kein aktualisieren der Seite mehr, da ich den Fehler gefunden habe:
Ich habe in meinem JS-Script folgendes:
var error = "Leider kam es zu einem Fehler.";
console.log("error");
Aber nichts wird auf meiner Seite angezeigt, woran kann das liegen?
Das hört sich sehr komisch an. Guck am besten mal in die Entwicklerkonsole und halte mal nach einem Fehler ausschau. Die Funktion scheint mir auch keine VanillaJS Funktion zu sein.
drawBoxes('yyy bbb ggg');
Lad mal bitte dein Projekt irgendwo hoch, dann kann ich Dir sicher weiterhelfen.
Oh, okay :D Habe halt auf einer Handy App, auf der man JS lernen kann das gelernt, dass dann so Boxen kommen (farbige und so).
Ich kanns ja mal gleich mit console.log ausprobieren.
Ich berichte gleich davon
HTMLNA.html:1 Refused to apply style from 'http://127.0.0.1:5500/CSSNA.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
JavaScriptNA.js:4 Uncaught ReferenceError: drawBoxes is not defined
at JavaScriptNA.js:4
HTMLNA.html:1 Refused to apply style from 'http://127.0.0.1:5500/CSSNA.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.+
- Wie vermutet, die Funktion existiert nicht.
- Füg mal bei deinem Link folgendes hinzu:
<link rel="stylesheet">
Sorry, kann daran liegen dass ich die CSS Datei gestern gelöscht habe, weil ich das vorerst in HTML gemacht habe. Ich erstelle kurz eine wieder. Die Einbindung habe ich trzdm wie gewohnt schon im Script. Ich melde mich gleich wieder.
Habe jetzt wieder eine externe CSS Datei drin. In der Konsole sind erst einmal keine Probleme. Aber eins habe ich: DIe Seite aktualisiert und aktualisiert...
Es hört nicht auf xd
Habe das immer so gemacht: <script language="javascript" type="text/javascript" src="dateiname.js"></script>
Dann mach es zukünftig so, denn alles andere ist ungültig:
<script src="dateiname.js"></script>
Aber wenn ich dann z.B: drawBoxes('yyy bbb ggg'); Mache, dann passiert in der HTML Seite garnichts.
Dann stimmt vermutlich der Pfad zur .js - Datei nicht.
Alex
Doch. Der Pfad funktioniert. Die CSS src habe ich wie du es geschrieben hast dementsprechend geändert :D
Mach alles was mit css zutun hat in style rein
Wie ich schon gesagt habe: Intern geht es. Ich möchte das aber gerne extern haben, da es dort dann viel übersichtlicher ist.
Es gibt nichts schlimmeres, als ein unübersichtlicher Code.
<html>
<head>
<meta charset=„utf-8“>
<title>Hallo du Mensch</title>
</head>
<body>
<br></br>
<center><h1 style=„color:white;“>Hallo sie Menschen</h1></center>
</body>
</html>
boar html ist voll lustig das kann ich seid 2 Tagen
Cool! :D FInde ich gut dass du das lernst. Würde dir wiegesagt empfehlen den CSS also den Style extern zu machen und nicht in der HTML Datei.
Das heißt, du machst eine extra Datei mit dem Ende .css (so wie bei HTML), und dann bindest du mit folgendem Code CSS ein:
<link href="dateiname.css" rel="stylesheet">
Dann kannst du mit dem Style so vorgehen (Ich nehme den Beispielscript von oben:
.h1 {
color: white;
background-color: blue;
}
Und so weiter.
Offensichtlich kannst du es noch nicht.
- Der Doctype fehlt.
- Es müssen englische Anführungszeichen verwendet werden.
- Für den br-Tag gibt es keinen expliziten schließenden Endtag. Es ist ein void element.
- Das center-Element gehört nicht zum HTML5-Standard.
Suche dir eine andere, aktuelle Lernquelle. Ich kann MDN empfehlen.
Da hast du recht, aber ohne diesen funktioniert die Webseite nicht richtig.
Um es nochmal von @regex9 zusammenzufassen:
<br> braucht keinen Endtag, also:
<br> und nicht <br></br>
, <!DOCTYPE html> fehlt,
Anführungszeichen müssen so gesetzt werden:
<h1 style="color: green;"> und nicht eins unten und eins oben,
und Center kannst du nicht in HTML, sondern nur in CSS definieren.
das kann ich seid 2 Tagen
Na, dann wollen wir mal schauen, dass sich das falsch Gelernte nicht bei dir festsetzt. Zunächst mal fehlt über dem <html> die Angabe des Doctype. Die ist zwingend notwendig:
<!doctype html>
Dann solltest Du als Attribut-Wertpaar beim <html>-Element noch die gewählte Sprache angeben:
<html lang="de">
Korrekt (obwohl s überflüssig) ist
<head>
Falsch ist
<meta charset=„utf-8“>
Richtig wäre es, entweder keine typografischen Anführungszeichen oder gar keine Anfürhungszeichen zu verwenden:
<meta charset="utf-8">
Richtig ist
<title>Hallo du Mensch</title>
</head>
<body>
Falsch ist
<br></br>
da das <br>-Element nicht verwendet wird um Abstände zu bauen. Dafür nimmt man CSS. Also zum Beispiel <div style="margin-top:2em">
Die folgende Zeile ist aus mehreren Gründen ungütliges HTML 5:
<center><h1 style=„color:white;“>Hallo sie Menschen</h1></center>
- Das Element <center> existiert nicht in HTML 5 (zum Zentrieren nimmt man CSS)
- Du hat wie oben typografische Anführungszeichen verwendet
Wen wir also Dein Beispiel korrekt schreiben erhalten wir
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Hallo du Mensch</title>
<style>
h1 {
color: white;
background: black;
text-align: center;
margin-top: 2em
}
</style>
</head>
<body>
<h1>Hallo sie Menschen</h1>
</body>
</html>
Das ist falsch. Der Doctype gibt an, welchen Standard das HTML-Dokument verwendet. Und zu dem Wörtchen nur: Für ein HTML-Dokument gibt es insgesamt nur zwei Pflichtangaben. Der Doctype ist die erste.
Ja das mit dem style weiß ich ja habe das am Handy geschrieben da wird das automatisch nach unten gesetzt xd
Wieso sollte ich den css style in der internen html datei speichern? Dann kann sich doch jeder den src code der seite angucken und das Klauen
Und ungültig kann das mit dem <center> nicht sein weil bei meiner site funktioniert das xd
Wieso sollte ich den css style in der internen html datei speichern?
Weil es bei One-Pagern im Hinblick auf die Ladezeit sinnvoller ist, Inline-Styles zu verwenden als externe Stylesheets einzubinden.
Dann kann sich doch jeder den src code der seite angucken und das Klauen
Das kann man auch, wenn die Style-Angaben in einer externen Stylesheet-Datei liegen.
Ok geht das auch wenn ich den Style unter dem Body mache?
Ok geht das auch wenn ich den Style unter dem Body mache?
Nicht als Inline-Style. Wohl aber als externes Stylesheet eingebunden. Zulässig ist also:
<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
<link rel="stylesheet" href="style.css">
</body>
</html>
nicht zulässig ist
<!doctype html>
<html>
<head>
<title>hello world</title>
</head>
<body>
hello world
<style>
p { color:red }
</style>
</body>
</html>
Ne meinte so
<!doctype html>
<html>
<head>
<meta charset=“utf-8“>
<title>Hallo.de</title>
</head>
<body>
<div class=“a“>
<hr style=“color:red“></hr>
<br>
<h1>Hallo</h1>
<br>
<hr style=“color:red“></hr>
</body>
<style>
.div a {
text-align: center;
text-color: black;
background-image= “baum.png“
}
</style>
</html>
Ne meinte so
Nein. Diese Struktur ist nicht zulässig.
Davon abgesehen definiert man in CSS ein Hintergrundbild nicht so wie Du es gemacht hast sondern so:
.div a {
background-image: url("baum.png");
}
Das liegt daran, dass Browser ziemlich fehlertolerant und abwärtskompatibel arbeiten. In bestimmten Fällen (z.B. invalidem Markup) wechseln sie in verschiedene Modi, um das Markup dennoch halbwegs richtig interpretieren zu können. Wenn etwas funktioniert, heißt es dennoch nicht, dass es richtig ist. An anderer Stelle kann es dir (oder Nutzern) schnell wieder auf die Füße fallen.
Du kannst es so machen, sicher. Aber bitte beklage dich später nicht, wenn etwas nicht funktioniert, wie du es gern hättest. Und gib auch nirgendwo an, du könntest HTML, denn das kannst du bei so eklatanten Fehlern dann ja nicht. Der Verdienst, ob etwas funktioniert, liegt dann bei den Browsern. Nicht bei dir.
- Der hr-Tag ist ein void element. Er besitzt kein schließenden Endtag.
- Der style-Tag gehört in den head-Bereich.
Wieso nicht zulässig das mache ich aber so !
Dass es - derzeit und in manchen Browsern - funktioniert, bedeutet nicht, dass es richtig ist. Und wenn Du gerade am Lernen bist, solltest Du es gleich richtig lernen. Richtig ist
- die Styleangabe direkt beim Element (style="color:red")
- die Styleangabe mit <style> p { color:red } </style> - dann aber nur im <head>
- die Styleangabe mit <link rel="stylesheet" href="style.css"> innerhalb von <head> oder innerhalb von <body>
Alles andere ist falsch.
Das kannst du so nutzen. Setze so etwas aber vorrangig nur zum Testen / für Prototyping ein oder wenn du extrem wenig HTML und CSS vorliegen hast.
Das Auslagern des CSS in einen eigenen Bereich hat nun mal verschiedene Vorteile:
- Das CSS kann mehrmals verwendet werden. Die Dateien bspw. für verschiedene HTML-Dateien und die CSS-Selektoren für verschiedene Elemente.
- Das Markup bleibt sauber / einfacher lesbar.
- Du hast eine zentrale Stelle, wo du nur noch Änderungen vornehmen müsstest. Du bist schneller, als wenn du erst das Markup nach dem Style durchsuchen musst.
- Du kannst Kaskaden einsetzen.
- Du kannst Styles unabhängig vom Elementtyp zusammenbauen. Angenommen, ein CSS-Klassenselektor wirkt auf ein p-Element. Den Elementtyp p könntest du nun bspw. zu einem div ändern und es würde vielleicht nicht einmal notwendig sein, das CSS daraufhin anpassen zu müssen.
- Tools wie LESS/SASS können eingesetzt werden.
- Editoren können dir mit ihrem Syntax Highlighting gut helfen.
- Wenn du die Styles validieren lassen möchtest, kannst du die Styles einfacher in einen Validator hineinkopieren.
Das kommt in der Konsole :D