Javascript lernen ohne HTML-Vorkenntnisse?
Guten Tag,
ich hätte da mal eine Frage! Ich habe in einem Forum speziell für Programmiersprachen gefragt, welche Sprache es sinnvoll ist, als erstes zu lernen.
Ich hatte den Gedanken, zuerst PHP zu lernen. Mir wurde das ausgeredet und JavaScript empfohlen. Da ich selbst wenig Ahnung habe, habe ich mich auf diesen Ratschlag verlassen und mich an die Arbeit gemacht.
Zuerst war ich etwas verwirrt, denn html schien sehr wichtig zu sein. Auf Nachfrage im Forum wurde mir bestätigt, dass html zwar wichtig sei, aber ich könne getrost weitermachen: Html ist zwar wichtig, aber das lernst du einfach nebenbei??!
Trotzdem habe ich weitergemacht und bin jetzt an einem Punkt angelangt, an dem ich bezweifle ohne html-Kenntnisse irgendwie voranzukommen....
Wie gesagt, ich habe wenig Ahnung von der Materie. Könntet ihr mir beantworten, ob ich tatsächlich mit JS weitermachen sollte? Oder doch eine andere (richtige) Sprache anfangen sollte.
LG Lori
6 Antworten
(...) Ich hatte den Gedanken, zuerst PHP zu lernen. (...)
Demzufolge war / ist es also dein Ziel, Webanwendungen zu entwickeln.
Zuerst war ich etwas verwirrt, denn html schien sehr wichtig zu sein.
Ja, HTML ist wichtig für Webseiten, denn es ist das Datenformat, welches zwischen Webserver und Browser transportiert wird.
Wenn du über deinen Browser eine Webseite aufrufst, stellt dieser eine Anfrage an den betreffenden Webserver, der die Webseite anbietet. Dieser schickt die angeforderten Daten daraufhin zurück zum Browser. Um ein einheitliches Format zu haben, welches der Browser letztendlich auch auswerten und (zu einer ersten grafischen Ansicht der Webseite) verarbeiten kann, wird HTML als Datenformat genutzt.
HTML-Dokumente beinhalten also zum einen den Inhalt, der auf der Webseite dargestellt werden soll (z.B. Texte, Bildverweise) und zum anderen Elemente, die diese Daten näher beschreiben.
Dieser Code-Snippet beispielsweise:
<h1>Irgendein Text</h1>
Besteht aus dem Inhalt selbst und Tags / Metainformationen zu diesem Inhalt. Diese geben dem Browser später die Information, dass Irgendein Text eine Überschrift darstellen soll.
Wenn du Webseiten entwickeln möchtest, kommst du an HTML nicht vorbei.
(...) Html ist zwar wichtig, aber das lernst du einfach nebenbei (...)
Das ist, wie ich finde, eine ziemlich lasche Aussage. Die Ergebnisse solchen Denkens konnte man hier schon oft genug auf GF bewundern. Ich bin ja inzwischen sogar schon vorsichtig geworden, HTML als einfach zu bezeichnen, denn offensichtlich liegt doch eine Schwierigkeit darin - und sei es nur, sich einmal ernsthaft mit der Dokumentation zu befassen oder Lernquellen zu finden, die nicht falsche Informationen vorgeben.
Wenn du Webseiten entwickeln möchtest, würde ich dir also zunächst empfehlen, HTML und CSS zu lernen. Beide Sprachen sind nicht schwer, es sind ja auch keine Programmiersprachen. Lies dazu gern meine Antwort von hier: Website erstellen, Grundlagen lernen?, denn dort teile ich verschiedene Quellen, die man getrost zum Lernen verwenden kann.
Erst danach würde ich an deiner Stelle mit JavaScript und der DOM API beginnen, die die Manipulation von Elementen auf einer Webseite ermöglicht.
AldoradoXYZ hat dir ja auch schon eine andere Möglichkeit gezeigt, wie du auch nur mit JavaScript und dem canvas-Element starten könntest. Direkt für Anfänger ausgerichtet ist hierbei die p5.js-Bibliothek, die ich dir gern ans Herz legen würde. Wie man sich seine Entwicklungsumgebung einrichtet, wird dort auch beschrieben. Nur ein Punkt: Die dortige Vorlage zeigt leider auch kein valides HTML und solches zu schreiben, solltest du dir von Beginn an angewöhnen.
Ein valides HTML-Dokument hat immer einen Doctype in der ersten Zeile und beinhaltet ein title-Element, welches den Seitentitel beinhaltet (der nicht leer ist). Im Minimalfall also so:
<!doctype html>
<title>My first page</title>
Wenn wir das nun auf die Vorlage zu p5.js ausweiten:
<!doctype html>
<html>
<head>
<title>My first sketch</title>
<script src="https://cdn.jsdelivr.net/npm/p5@1.0.0/lib/p5.js"></script>
<script src="sketch.js"></script>
</head>
<body></body>
</html>
Oder doch eine andere (richtige) Sprache anfangen sollte.
Was meinst du mit richtige Sprache? JavaScript ist eine richtige Programmiersprache, falls du das meinst.
Sollte dir die Webentwicklung nicht zusagen, solltest du dir zunächst überlegen, was du stattdessen machen möchtest. Themenfelder gibt es ja genug und in einigen lässt sich weiterhin JavaScript verwenden, wenn auch viele Tutorials / Lehrmaterialien zu JavaScript eher auf die Webentwicklung ausgerichtet sind (es ist nun einmal eines der Hauptanwendungsfelder von JavaScript).
Auch zu JavaScript selbst lassen sich Alternativen finden, solltest du wirklich schon bei den Grundlagen (Arrays, Kontrollstrukturen, Funktionen) scheitern. Aber ich denke, für diesen Fall kannst du unter meiner Antwort nochmal einen Kommentar hinterlassen, solltest du diesbezüglich wirklich noch einen Rat suchen.
Sofern du mit JavaScript bisher zurechtgekommen bist, würde ich dir empfehlen, auch damit weiter zu arbeiten. Ja, es wird schwieriger, umso tiefer du dich hineinwühlst, doch das hast du überall so. Nicht nur bei Programmiersprachen.
Ist es für jeden möglich programmieren zu lernen?
Verschiedene Vorbedingungen müssen zuvor schon erfüllt werden, um einen Zugang erhalten zu können. So kann es für manche Menschen zumindest eine große Hürde sein, die vielleicht sogar kaum überwunden werden kann. Um eine Orientierung zu geben: Ich denke da bspw. an beeinträchtigte Menschen (körperlich, wirtschaftlich, ...).
Außerdem muss eine gewisse Motivation dahinter stehen.
Du zielst aber eher auf dich ab. Und da würde ich sagen: Ja, es ist möglich, wenn du eine Motivation dazu hast und diese auch beibehalten kannst.
Mit Ziel, wie es zur Zeit der Fall ist, bin ich mir recht sicher, dass es deutlich produktiver und mit mehr Erfolg verlaufen wird.
Auch wenn du ein Ziel hast, würde ich dir empfehlen, noch Teilziele zu setzen, die einfach sind und dich somit nicht überfordern. Sie sollten dazu dienen, mit den Grundkenntnissen vertraut zu machen (auch der Strategie: Wie kann ich anfangen? Wie kann ich Probleme formulieren/beschreiben und zerlegen?) und müssen auch nicht zwingend mit dem Hauptziel direkt in Verbindung stehen.
Mit p5.js kannst du viele solcher Teilziele gut formulieren, denn es ist einfacher, welche zu finden, wenn eine Zeichenfläche (canvas) zur Verfügung steht. Ein einfaches Beispiel ist Pong. Das Spiel ist einfach und fordert nur wenige Grundkenntnisse (Variablen, mathematische Operatoren, if-else). Andere solcher Beispiele:
- Asteroids
- Breakout
- Conways Game of Life
- Dodger
- Memory
- Nim Spiel
- Peg Solitaire
- Simon
- Snake
- Tetris
- Text-Adventures
- Tic-Tac-Toe
- Vier gewinnt
Oder generell:
- Zeichnen geometrischer Objekte (Haus vom Nikolaus, Mandalas, ... - Beispiele wurden dir hier ja schon gezeigt)
- Das Implementieren eigener Datenstrukturen (Stack, Liste, zirkuläre Liste, Baum, Dictionary)
- Das Nachbauen von String-Funktionen (indexOf, contains, replace, reverse, substring, split, lastIndexOf, trim, ...)
- Sortier- und Suchverfahren (schau dazu auf Wikipedia)
- Spezielle Algorithmen wie Dijkstra, Huffman, A*, ...
- Verschlüsselungsverfahren (Caesar, Vigenère, ...)
- mathematische Berechnungen (Taschenrechner, Fakultät, Dreiecksberechnungen, Potenz ohne Multiplikationsoperator, Umrechnen von Zahlensystemen, ...), vor allem mit Blick auf Rekursion
- Schau auf CodingBat (auch wenn die Seite für Java/Python ausgerichtet ist, kannst du die Übungen von dort auf JS adaptieren)
Für mich sieht das nach Codes aus, die ich niemals so schreiben können werde.
Einer der wichtigsten Punkte ist praktische Übung. Und daneben natürlich noch vertrauenswürdige Quellen, von denen man sein Wissen beziehen kann.
Aber die Erwartungen würde ich zunächst herunterschrauben. Natürlich wirst du einige Zeit brauchen, um dich einzuarbeiten und Stück für Stück besser zu werden. Wenn du nun in die Materie einsteigst, wirst du immer mehr Begriffe lesen / hören, zu denen du weiter recherchieren kannst und die dir überhaupt spezifischere Recherchen erlauben (ein plumpes Beispiel: Statt Knopf oder Schaltfläche suchst du nach Button und findest dementsprechend mehr und bessere Ergebnisse). So ist es ja auch in anderen Themen.
Das andere, komplexe Codes einschüchternd wirken können, ist verständlich. Da steckt aber zu großen Teilen auch nichts Weiteres dahinter, als aufgebaute Erfahrung.
Ob du später ebenfalls einmal auf dieses oder jenes Niveau kommst, lässt sich nicht sagen. Es ist sehr davon abhängig, dass du selbst am Ball bleibst. Quellen, die auf dich Einfluss nehmen können, gibt es heutzutage genug. Das heißt, du musst nicht von Brendan Eich (Entwickler von JS) persönlich unterrichtet werden, um alle Tricks von JavaScript kennenzulernen (um es einmal bildlich auszudrücken).
Danke! Wenn ich mir den Quelltext von dieser Seite anschaue, dann ist das ja html. Zwischen dem Ausdruck "script" ist, wenn ich das richtig verstanden habe, JS. An dieser Stelle würde ich gerne wissen, ob das wirklich so aussieht, oder wie dieser Code zustande gekommen ist. Weil das für mich kaum lesbar, geschweige denn schreibbar aussieht...
Gerade bei Webseiten müssen ja viele Ressourcen zwischen Browser und Webserver hin- und hergeschickt werden. Das HTML, CSS-Dateien, JS-Dateien, Bilder, etc.. Umso mehr das ist, umso mehr macht sich das beim Laden bemerkbar. Vor allem bei mobilen Geräten. Folglich versucht man mit verschiedenen Strategien, das Ladeverhalten zu beeinflussen. Beispielsweise durch lazy loading (Inhalte werden dynamisch nachgeladen, sobald sie benötigt werden) oder Komprimierung. Viele Skripte, aber auch CSS, wirst du deshalb im komprimierten Zustand vorfinden, wenn sie den Browser erreicht haben. Auch für HTML ist das möglich.
Skripte werden explizit minified und uglified - d.h., es gibt Tools (wie UglifyJS), die aus deinem Code überflüssige Whitespaces (Leerzeichen, Tabs, Zeilenumbrüche) und Semikolons entfernen. Variablennamen werden verkürzt, Ausdrücke umgeschrieben. Am Ende kommt so ein Code heraus.
Während der Entwicklungszeit arbeitest du aber mit ganz normalem, lesbaren Code. Lesen und Schreiben solchen Codes ist durchaus möglich, aber nicht zu empfehlen. Es ist mit großem Aufwand verbunden.
Also nochmal, weil nur hier Bilder gehen.
Html:
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Java Script:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 400);
ctx.lineTo(200, 400);
ctx.lineTo(50, 250);
ctx.lineTo(200, 250);
ctx.lineTo(125, 175);
ctx.lineTo(50, 250);
ctx.lineTo(50, 400);
ctx.lineTo(200, 250);
ctx.lineTo(200, 400);
ctx.stroke();
Ergebnis im Browser:
Das ganze Zeichnen passiert im JavaScript. Das html bietet nur einen Anker an, damit das JavaScript weiß wo es hin zeichnen soll.
Und damit könntest Du schon tausende JavaScript Programme realisieren und alle benötigen nur diesen kleinen Schnippsel html. Der übrigens immer so aussehen kann. Was steht da auch schon? Eine Breite, Höhe und nen Rand. Die einzige Referenz ist "myCanvas" und darauf kommt es an.
Gruß
Alles klar, dann weiß ich bescheid. Ich werde es mit JavaScript probieren.
Ich danke Dir vielmals!
Sie benötigen nicht eine einzige Sprache, sondern eine Reihe von Sprachen. Zum Beispiel: HTML + CSS + Javascript. Oder HTML + CSS + Javascript + jQuery + PHP + SQL. Und so weiter.
Die Anzahl der Sprachen hängt von den Aufgaben ab, die Sie lösen.
Darüber hinaus sind die Arbeitstools wichtig, die von den Entwicklern verwendet werden, mit denen Sie sich im selben Team befinden. Zum Beispiel: Git, Gulp, SCSS ...
Halten Sie also einen Kreis von Aufgaben vor Ihren Augen und fügen Sie das Wissen hinzu, das nicht ausreicht, um sie zu lösen.
Wenn Sie ein eigenes Projekt haben, gehen Sie von dessen Anforderungen aus.
Wenn Sie nach einem Job suchen, informieren Sie sich über die Jobanforderungen für Arbeitssuchende in Unternehmen, die Ihnen gefallen.
Die Antwort finde ich super für Leute die schon mindestens eine Sprache gut können und Projekte machen wollen.
Wir haben hier aber einen blutigen Anfäger vor uns, der nicht eine Zeile Code schreiben kann, egal welche Sprache. Und auch kein html, gar nichts.
Jemand, der einfach nur wissen will, womit er anfangen soll.
JavaScript ist toll, weil es direkt im Browser läuft. Man muss nicht groß kompilieren und sieht sofort was passiert. Aber ja, man kann auch mit c anfangen. Nur mit irgendwas sollte man anfangen, sonst macht man nie ein Projekt bei dem deine Antwort hilfreich wäre xD
Gruß
Für viele Sprachen gibt es Sandboxen, die direkt im Browser funktionieren.
Sie können sich beispielsweise jede Woche den Grundlagen einer neuen Sprache widmen.
Zum beispiel widme erste Woche den Grundlagen des Javascripts.
Zweite Woche - den Grundlagen des HTMLs.
Dann - CSS, PHP, Python usw.
Dann können Sie auswählen, woran Sie nächste Woche interessiert sind - eine andere Sprache oder zusätzliche Kenntnisse in einer Sprache, die Sie bereits kennen, oder die Lösung eines praktischen Problems.
Danke! Welche Sprache sollte ich als erstes lernen bzw. welche bietet sich an, als erstes zu lernen?
Die Verantwortung für die Wahl der nächsten Stufe in Ihrem Leben liegt bei Ihnen. Ich weiß nicht, wie gut Sie Javascript bereits kennen und welche Aufgaben Sie bereits lösen können.
Durch das Programmieren lernt man ständig neue Sprachen und neue Entwicklungswerkzeuge. Suchen Sie daher nicht nach der richtigen Sprache, sondern nach der nächsten Sprache.
Ich habe beschrieben, wie ich für mich selbst wähle.
- Überprüfen Sie, was Sie können.
- Finden Sie ein Projekt, für das Sie fast richtig sind.
- Und steigern Sie Ihr Niveau, indem Sie etwas anderes lernen.
Hier noch ein Beispiel für dich,
leider wieder eine extra Antwort, weil man in Antworten von Antworten keine Bilder posten kann:
Html ist genauso wie vorher:
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
JavaScript diesmal mit function:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
function drawTriangle(x, y, width, recursionDepth){
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width/2, y-width);
ctx.lineTo(x, y)
ctx.stroke();
recursionDepth--;
if (recursionDepth < 0){
return;
}
drawTriangle(x, y, width/2, recursionDepth);
drawTriangle(x + width/2, y, width/2, recursionDepth);
drawTriangle(x + width/4, y - width/2, width/2, recursionDepth);
}
drawTriangle(100 ,400, 350, 3);
Ergebnis der Rekursion ein Sierpinski-Dreieck:
Gruß an alle, die in der Zukunft das hier finden, weil sie eine Lösung für ihre Rekursionsaufgabe suchen xD. Kann man übrigens noch otpimieren. Seht ihr die doppelten Linien?
Mit größerer Rekursionsstufe sieht es dann interessanter aus:
Geändert ist nur:
drawTriangle(100 ,400, 350, 6);
Wenn ich das in 5 Minuten hinbekomme, dann kannst Du mit deiner ganzen Zeit sicher fantastische Dinge bauen. Viel Spaß.
Gruß
HTML ist nicht die Königsdisziplin wenn nicht CSS und JS Grundkenntnisse sitzen.
PHP ist eine Liga höher, weil man die Anfragen am Server abarbeiten kann wie Datenbankzugriffe, Grafikbearbeitung automatisiert (verkleinern von Grafiken) und Backend Entwicklung ist.
JS ist immer nützlich und kann auch viel wenn man es mit AJAX benutzt. Das ist eine Methode, wie man die Website automatisch aktualisieren kann.
Danke!
Also sollte ich JS als erstes lernen und mich dann erst um CSS, HTML und zu guter letzt PHP kümmern? Oder wie sollte ich am besten vorgehen?
Alles klar, ich danke dir!
Eine Frage, welche wohl recht schwer zu beantworten ist, hätte ich dann doch noch: Ist es für jeden möglich programmieren zu lernen?
Ich hatte einst mit Java meinen Anfang versucht. Ohne ein echtes Ziel verlief das aber recht schleppend und habe dann auch abgebrochen.
Mit Ziel, wie es zur Zeit der Fall ist, bin ich mir recht sicher, dass es deutlich produktiver und mit mehr Erfolg verlaufen wird. Allerdings verunsichern mich die fertigen Programme. Auch hier zum Beispiel, wenn ich mir den Quelltext so anschaue. Für mich sieht das nach Codes aus, die ich niemals so schreiben können werde.
Ist das übertrieben, oder ist solch eine Einschätzung richtig?