JavaScript Tutorial - Kompletter Einsteigerkurs zum JavaScript lernen
Video Overview & Insights
Zum JavaScript Komplettkurs: https://programmieren-starten.de/javascript-kurs-lp-1/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=javascript-kurs
das die erste frage "was ist die haupstadt von berlin?" was hat so getriggert. đ aber trotzdem cooler kursâ
Komplettes JavaScript Tutorial: Mit diesem kompletten Einsteigerkurs wirst du kinderleicht die Programmiersprache JavaScript lernen. Im Kurs werden wir ein komplettes Praxisprojekt umsetzen, sodass du am Ende deine erste eigene Web-App gebaut hast, nĂ€mlich ein Quiz-App! WĂ€hrend der Umsetzung dieses Projekts wirst du alle notwendigen JavaScript Grundlagen (Variablen, Datentypen, Objekte, Arrays, Funktionen, Schleifen, Verzweigungen, etc.) leichtverstĂ€ndlich lernen. Als Bonus erhĂ€ltst du sogar eine EinfĂŒhrung in das CSS Framework Bootstrap.
Inhaltsverzeichnis:
Ich kann das Programm nicht debuggen, warum? Ich habe Edge auf dem PC aber diese Seite kann nicht geöffnet werden, warum? Was mache ich falsch bzw. was hab ich vergessen???
00:00 Einleitung + Projektvorstellung
01:55 Code Editor installieren (Visual Studio Code)
Also das war das beste Tutorial fĂŒr JS Beginner dass ich kenn. Ehrlich.. ich such und such nach was ordentlichem, und da ist es! Danke dir ^^
03:27 Projekt einrichten
05:25 Erste Zeile JavaScript Code
Sorry, aber viel zu viele Informationen in zu kurzer Zeit. Nach den ersten 10 Minuten schon abgehĂ€ngt. Wirklich folgen und verstehen kann man das nur, wenn man Vorerfahrungen in Programmierung oder zumindest allgemeine Informatik-Kenntnisse hat. Bei der ErwĂ€hnung der "Console" war ich schon raus. Wer das Teil noch nie benutzt hat (und nein, wer nicht programmiert o.Ă€., kennt das Teil nicht!!!), weiĂ ĂŒberhaupt nicht, was das ist und was das soll. Die ErklĂ€rung wird hier jedoch ĂŒbergangen. Es heiĂt zuvor, wir wollen "Hallo Welt" auf dem Bildschirm sehen, dann erscheint es jedoch nicht dort, sondern in der Console. Der Zusammenhang wird ĂŒberhaupt nicht klar. Grundlagen zu HTML mĂŒssen auch bekannt sein. Allein aus den zwei Tags, die hier benutzt werden, wird das natĂŒrlich nicht klar. An dieser Stelle dann bitte auch so ehrlich sein und sagen, dass Vorwissen in XY (hier: HTML) erforderlich ist! AnschlieĂend folgen dann gleich reihenweise verschiedene Infos zu Variablen etc. Das ganze in einem mĂ€chtigen Werkzeug, das allein einen AnfĂ€nger schon ĂŒberfordert... Schade.
09:53 score-Variable erstellen (Grundkonzept Variablen)
11:40 Exkurs zu Datentypen
Sorry, aber dieser Kurs ist alles andere als Programmiereinsteiger-freundlich...direkt mit objekten und Variablen die ein Array sind. Jemand der keine Ahnung von Programmieren oder JS hat, ist hier maximal ĂŒberfordert. Ich finde deine Didaktik jedoch gut
14:53 currentQuestionIndex Variable erstellen
17:04: Quiz-Fragen ĂŒber Objekte modellieren (Grundkonzept Objekte)
Danke, sehr schönes Tutorial zum Mitmachen.
20:52 Antwortmöglichkeiten ĂŒber Array modellieren (Grundkonzept Arrays)
25:23 Weitere Quiz-Fragen Objekte erzeugen (Konzept von Objekten und Arrays kombinieren)
Super Tutorial đ
Vielen Dank dafĂŒr
29:50 Fragen ĂŒber HTML im Browser anzeigen
34:26 Funktion zur Anzeige der Fragen erstellen (Grundkonzept Funktionen)
Tolles Video †danke dafĂŒr, ich habe noch einen Reset- Button (statt "Danke fĂŒr die Teilnahme" ) am Ende eingebaut, um das Quiz neu zu starten đ
40:46 Antwortmöglichkeiten im Browser ĂŒber Buttons anzeigen (Grundkonzept Schleifen)
46:12 Korrekte Antwort ermitteln (Grundkonzept if-Statements)
Ni idea que dijo pero gran curso
54:05 âNĂ€chste Frageâ Button implementieren
56:15 Resultat von Quiz anzeigen
Wenn die Frage nicht angezeigt wird, dann kann das im HTML-Tag <script src= das Attribut "src" falsch geschrieben worden sein.
1:03:10 Anwendung mit CSS visuell schöner gestalten (Bootstrap)
Links die im Video erwÀhnt wurden:
39:30 Also an dieser Stelle ehrlicher Feedback/Kritik: Deine Namensbenennungen könnten nicht verwirrender sein! Ich hab das jetzt alternativ mal so bennant :
let score = 0;
let currentQuestionIndex = 0;
let allQuestions = [
{
question: "Was ist die Hauptstadt von Berlin?",
answers: ["Paris", "London", "Berlin", "Madrid"],
correctAnswer: 2
},
{
question: "Welche Farbe hat die Zitrone?",
answers: ["Gelb", "Rot", "Blau", "Lila"],
correctAnswer: 0
},
{
question: "Wie viele Beine hat ein Doggo?",
answers: ["2", "3", "4", "vier"],
correctAnswer: [2, 3]
}
];
function displayQuestion() {
let currentQ = allQuestions[currentQuestionIndex]; // Klare Benennung
document.getElementById('question').textContent = currentQ.question; //html id "question" -> text.Content der soll jetzt sein = question
}
displayQuestion();
Zum JavaScript Komplettkurs: https://programmieren-starten.de/javascript-kurs-lp-1/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=javascript-kurs
Download Visual Studio Code: https://code.visualstudio.com/
Was ist den control shift + j aufm Mac?
Bootstrap: https://getbootstrap.com/docs/5.0/getting-started/introduction/
Quellcode zum Projekt: https://github.com/JannickLeismann/JS-Quiz-App
Ich glaube er mag das Wort indiziert
--------------------------------------------------------------------------------
Möchtest du mehr Inhalte von Programmieren Starten haben? Hier findest du hilfreiche Links fĂŒr unsere wertvollsten Ressourcen:
Also fĂŒr Jemanden, der wie ich noch nie JavaScript genutzt hat und nur rudimentĂ€re Kenntnisse besitzt, eher abschreckend. đ questions.question, question.question âŠ ĂŒberall nur question, question, question â man kommt sich vor wie bei einem Wortspiel-Marathon. Und dann noch answer, answers, Button(answer) â aber bloĂ nicht Button(answers)! đ Ab 46:18 war bei mir dann erstmal die Luft raus. Und es war auch ein wenig Hin und Hergespringe, dem man erstmal folgen muss, gerade bei der "answers.Div.appendChild" Geschichte. Trotzdem Danke.
Kostenlose Programmier-Einsteiger-Serie: https://programmieren-starten.de/pev-lp1/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=pev
Besuche unsere Webseite: https://programmieren-starten.de/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=value
Hab alles nach Programmiert, alles hat funktioniert, alles auĂer das am Ende "Quiz beendet!" kommt. Hab jetzt lange genug versucht den Fehler zu suchen und mir das so oft wieder angesehen im Video, dass ich zu dem Punkt komme dass ich sage, dass ich den teil lassen werde.
Du hast es sehr gut erklÀrt, aber am Ende bin ich gar nicht mehr mitgekommen, da es mir persönlich viel zu schnell war, so schnell dass ich einen Fehler gemacht habe, den ich leider nach Stunde einer nicht finden konnte.
Naja was solls, ist nur eine Sache die nicht Funktioniert und ab da gebe ich auf zu suchen.
Programmieren Starten Premium: https://programmieren-starten.de/premium-mitgliedschaft-lp1/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=premium-mitgliedschaft
Kurse einzeln kaufen: https://programmieren-starten.de/produkte/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=einzelkauf
Der Download produziert eine englische Version, Du hantierst mit einer deutschen und erklÀrst nicht den Weg zur deutschen Version - nerv -
Besuche unseren Blog: https://programmieren-starten.de/blog/?utm_source=youtube&utm_medium=social&utm_term=javascript-tutorial-kompletter-einsteigerkurs-zum-javascript-lernen&utm_content=link-in-videobeschreibung&utm_campaign=value
Das ist doch kein Einsteigerkurs. Jeder AnfĂ€nger ist damit komplett ĂŒberfordert.
More User Perspectives
Man kann doch einfach head eingeben man muss doch nicht header eingeben?
@MurmelgamesTVMan kann doch einfach head eingeben man muss doch nicht header eingeben?
@MurmelgamesTVWegen des schwarzen Hintergrundes des Editors ist das Video kaum zu gebrauchen.
@kunokunzi40:13 bei mir steht keine frage bei mir ist nur der button "NĂ€chste Frage"
@MK40422Tolles Video. Der <title> kommt allerdings nicht in den <header> sondern in den <head> ;-)
@Herr_HansenSehr schönes Tutorial!
Ein wenig verwirrend ist es schon mit den question/s. Sonst aber sehr, sehr gut.
Hab es aus SpaĂ mal mitgemacht und nur einen Fehler gehabt, der hatte sich aber in meiner HTML eingeschlichen " answers // anwers " :D.
Mit dem Aussehen am ende, dass fand ich nochmal einen guten Punkt. Somit hat man direkt gesehen, dass man sowas einfaches auch direkt was Professioneller aussehen lassen kann.
lg
Wow..... 3 std verbrachte ich mit dem Tutorial inklusive Fehlersuche, aber am Ende wurde alles gut und funktionierte. Trotzdem sollte ich bei Hello World anfangen gg. Meine geringen Python Kenntnisse brachten mir da keinen Vorteil. Danke fĂŒr das Tutorial..... Sehr gut erklĂ€rt.
@MyDeLoreanDMC-12Es ist auch möglich in Visual Studio Code mit einem Ausrufezeichen ein HTML GrundgerĂŒst zu bauen.
@devyannisSuper Video. Hat mir sehr sehr geholfen. Bitte mehr davon.
@AlexanderBinnerDer Witz ist: Vor ca. 25 Jahren hieĂ es: Lass den scheiĂ. X % haben Javascript im Browser eh deaktiviert... und heute...
@thomashering1482Es klappt nicht
@DLM930Richtig gut.
@straightnorthdancinglol als ich mit javascript angefangen habe , hab ich exakt das selbe gebaut xD
@freemanchaosm2310Wie kann ich den die Fragen und Antworten mischen? So dass sie nicht immer in der gleichen Reihenfolge angezeigt werden?
@danigalvani6615hallo, bei mir kann er.
document.getElementById('quiz-result').hidden= false und displayQuestion(); nicht umsetzten. Wieso nicht, könnte mir jmd. bitte helfen?
Sehr schönes Tutorialđ
@DefzanAlso, ich habe keine Ahnung, 5 Minuten im Thema, ABER:
Wenn das Hallo Welt nicht in den DevTools auftaucht, musste ich das ohne QuirksMode ausfĂŒhren. Dazu muss man einfach <!DOCTYPE html> hinter den Start in der index.html schreiben. Code sieht jetzt wie folgt aus:
<html><!DOCTYPE html>
<script src="Quiz.js"></script></html>
</html>
Hoffe es hilft :)
Gibt es keinen kurs wo man billig erwerben kann
@BirgitSchedler-lu6kwMein NetBeans meckert das script-tag im html-tag an, wenn es nicht im head oder body steht. darf denn ein script-tag direkt im html-tag stehen? Funktionieren tut es super und ist auch toll erklÀrt.
@sabinebernhardt9667Danke fĂŒr deine MĂŒhe, bin AnfĂ€nger in JS, alles habe ich nicht verstanden aber viel gelernt. Was bedeutet der parameter UserAnser in der Funktion , der wurde nicht definiert, woher weiĂ die Funktion, was es damit tun soll? Vielen Dank fĂŒr eure antworten Jungs
@cakiralgmail95953. Mal ebenfalls kein ""Hallo Welt" in DevTools... Was ist da wieder falsch, mache 1 zu 1 das Gleiche wie im Video (bzw, man sieht oft nicht ob du Enter oder eine Maustaste drĂŒckst, was wohl der Fehler ist)
Das Problem ist tatsĂ€chlich, dass du zwischendurch immer irgendwelche Befehle gibst, wie Enter oder Mausklick, und nicht sagst, dass wir das auch machen mĂŒssen. Wir sehen ja deine HĂ€nde nicht. Muss sagen, dieses "Tutorial" hat mich meine letzten Nerven gekostet, danke dafĂŒr đđ
Habe EXAKT das Gleiche gemacht aber bei mir taucht nichts im DevTool auf, nur der > Sowas ist der Grund warum ich keinen Bock darauf habe... Und meine HĂ€nde sind zu GroĂ, vertippe mich stĂ€ndig... Könnte kot***, man braucht diesen Mist heutzutage nun mal.
Trotzdem Danke fĂŒr das Video đ
top, danke!
@joachimku2181Was soll ich machen wenn das "Hallo Welt" nicht bei mir auf der Console steht.
Edit: ich habs direkt alleine herausgefunden. ich hab das einfach auf console.log(print=("Hallo Welt")) geÀndert
Neues Problem: ich gebe was im Title ein und es kommt nicht oben auf der Seite vor
Edit: ich glaube das kann einfach nicht aktualisiert werden, aber warum ist die Frage
Problem gelöst: hat einfach 15 minuten gedauert, warum auch immer
Neues Problem: die Antworten zeigen sich nicht an auf den Knöpfen
Super erklÀrt, jedch wenn ich es 1:1 nachbaue oder von GitHub copy and paste mache funktioniert das nicht ....
Fehlermeldung: quiz.js:34 Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at displayQuestion (quiz.js:34:53)
at quiz.js:48:1
Dieses Video ist so gut auf doppelter Geschwindigkeit.
@ZaneDBestPersonhab alles 1 zu 1 gemacht wie du, funktioniert leider garnichts so richtig, was mich zu tiefst frustriert, da ich schon etwas erfahrener bin
@tekkdanielsscript.js:24 Uncaught ReferenceError: Cannot access 'question' before initialization
at displayQeustion (script.js:24:32)
at script.js:46:1
cooles Video!
@Spandauer66Eine gute EinfĂŒhrung in verstĂ€ndlicher Art und Weise erklĂ€rt. Doch eine Sache die ich fĂŒr âKomplette Einsteigerâ absolut irritierend finde ist, dass die Indexdatei (ich wĂŒrde mal sagen völlig falsch; warum eigentlich) dargestellt wird, fĂŒr âEINSTEIGERâ ohne HTML-Kenntnisse wohl kaum nachvollziehbar! Ansonsten, wie dauernd angepreist, ein nettes Werbevideo fĂŒr einen nicht kostenfreien JavaScript Kurs!
@sal8erno1. Bei mir kommt zwar keine Fehlermeldung und ist auch nichts rot unterstrichen, aber ab "letAnswersDiv = getElementbyId...... habe Ich alles 1:1 so geschrieben wie im Video und gespeichert und trotzdem zeigt er mir nicht alle 4 Auswahlmöglichkeiten an sondern nur die Frage und den Button "NÀchste Frage"
2. Bei function checkAnswer kommt folgende Fehlermeldung = Signature declarations can only be used in TypeScript files.ts(8017) ? Kann mir jemand weiterhelfen
Klasse Video, alles sehr gut erklĂ€rt, was da passiert. FĂŒr mich ein wenig störend ist, auch wenn's kein HTML-Kurs ist und es ja trotzdem funktioniert, dass title und der Link zum bootstrap-CSS im header landen und nicht im head der HTML-Datei. Gibt's dafĂŒr einen Grund?
@BjoernSchlieper