JavaScript Tutorial - Kompletter Einsteigerkurs zum JavaScript lernen

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:

00:00 Einleitung + Projektvorstellung
01:55 Code Editor installieren (Visual Studio Code)
03:27 Projekt einrichten
05:25 Erste Zeile JavaScript Code
09:53 score-Variable erstellen (Grundkonzept Variablen)
11:40 Exkurs zu Datentypen
14:53 currentQuestionIndex Variable erstellen
17:04: Quiz-Fragen über Objekte modellieren (Grundkonzept Objekte)
20:52 Antwortmöglichkeiten über Array modellieren (Grundkonzept Arrays)
25:23 Weitere Quiz-Fragen Objekte erzeugen (Konzept von Objekten und Arrays kombinieren)
29:50 Fragen über HTML im Browser anzeigen
34:26 Funktion zur Anzeige der Fragen erstellen (Grundkonzept Funktionen)
40:46 Antwortmöglichkeiten im Browser über Buttons anzeigen (Grundkonzept Schleifen)
46:12 Korrekte Antwort ermitteln (Grundkonzept if-Statements)
54:05 „Nächste Frage“ Button implementieren
56:15 Resultat von Quiz anzeigen
1:03:10 Anwendung mit CSS visuell schöner gestalten (Bootstrap)

Links die im Video erwähnt wurden:

--------------------------------------------------------------------------------
Möchtest du mehr Inhalte von Programmieren Starten haben? Hier findest du hilfreiche Links für unsere wertvollsten Ressourcen:

[Adrian_Marmy]

"Wie oft kann man nen Kurs in einem Tutorial erwähnen?" - "Ja!!!" ;-)

Aber davon abgesehen sehr gut erklärt. 😅👌

[gitarrenTag]

Klasse JS-Kurs. Wie immer super erklärt. Genau was ich gesucht habe: Wie ich mit JavaScript HTML manipulieren kann, dh. Sachen ins HTM hinzufügen, verändern und ausblenden kann. Super finde ich den Teil, wo zur Laufzeit genau so viele Buttons erzeugt werden, wie es Elemente hat.

[heuerspitstop]

3. 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 😂👍

[kriskess]

Die Aufgabe wird super erklärt. Es ist leicht verständlich. Jetzt fehlt nur noch die Routine in der Nutzung;-)!

[realiger]

Ich mag dich! Du bist Sympatisch, klatscht dein Gesicht nicht in den Code und erklärst alles deutlich! Dazu noch, du lobst die Leute, Feier ich! :D Scripte eigentlich nur mit PHP, aber ähnelt sich doch schon etwas :D Danke jedenfalls!

[ZaneDBestPerson]

Dieses Video ist so gut auf doppelter Geschwindigkeit.

[harryindaclub]

Vielen Dank für das Video! Wirklich sehr gut erklärt!

Ich bin gerade noch am Anfang und es ist schon echt viel, ob da jemals durch blicken werde. Bisher denk ich mir nur: "Niemals schaff ich das" oder "Ich bin zu dumm dafür"....Naja mal schauen.

[BjoernSchlieper]

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?

[sabinebernhardt]

Mein 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.

[zweieckiger]

krig den text nicxht angezeigt könte daran liegen das question.question am ande auch js verwirt und nicht nur mich

[svetozarzivkovic]

1. Bei mir kommt zwar keine Fehlermeldung und ist auch nichts rot unterstrichen, aber ab "letAnswersDiv = 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

[Lexiud]

Gutes Video, auch 4 Monate später . Am Ende wird es jedoch wirklich schnell, da hätte man sich gerne mehr Zeit lassen können, meiner Meinung nach,

[tekkdaniels]

script.js:24 Uncaught ReferenceError: Cannot access 'question' before initialization
at displayQeustion (script.js:24:32)
at script.js:46:1

[ChildrensBookFactory]

Ich danke Ihnen vilmals für ihr informatives kontent.

Könnten Sie mal einen Komplett Kurs zu Godot's Entwicklersprache GD Script machen ?
Dazu haben sie zwar schon eine ganze Video Reihe gemacht, es wehre nur schön alles nochmal in einem Video zu haben

[mixschnack]

Toll, wie du den Camel-Case erklärst. :) Schade allerdings, dass du nicht darauf eingehst, warum als Worttrenner nicht der Unterstrich oder der Bindestrich verwendet wird.

[danigalvani]

Wie kann ich den die Fragen und Antworten mischen? So dass sie nicht immer in der gleichen Reihenfolge angezeigt werden?

[salerno]

Eine 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!

[donkey]

Hallo ich hätte da eine Frage ab Minute 40:30 funktioniert das bei mir nicht da wird diese Fehlermeldung: = question.question;
Könnte mir jemand helfen

[cakiralgmail]

Danke 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

[xCore.rs]

46:07 bei mir wird die Frage und die Antworten nicht angezeigt, bitte helft mir!
let score = 0;
let currentQuestionIndex = 0;

let questions = [
{
question: "Was ist die Hauptstadt Deutschland?",
answers: ["Uruguanda", "Berlin", "Östereich", "Madrid"],
correctcAnswer: 1
},
{
question: "wie hoch ist der Eifelturm?",
answers: ["10", "0m", "10000m", "746, 9m"],
correctcAnswer: 3
},
{
question: "Was ist meine Lieblingsfarbe?",
answers: ["Braun", "Blau", "Durchsichtig", "Alle"],
correctcAnswer: 1
}

];

function displayQuestion (){
let question =

= question.question;

let answersDiv =
question.answers.forEach((answer, index) => {
let answerButton =
answerButton.textContent = answer;

});
}
}

displayQuestion();