free web page hit counter
đŸ›Ąïž
Copyright Notice: This video is officially sourced and embedded from YouTube. For all copyright inquiries, reports, or removals, please contact YouTube's legal team here.
Programmieren Starten

Programmieren Starten

168,000 subscribers

⏱ 👁 78,841 views

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✌

— @Finley-n8j

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???

— @frankmatuszak5830

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 ^^

— @jebiga-b1q

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.

— @e7pure

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

— @lileaso

14:53 currentQuestionIndex Variable erstellen

17:04: Quiz-Fragen ĂŒber Objekte modellieren (Grundkonzept Objekte)

“

Danke, sehr schönes Tutorial zum Mitmachen.

— @vc8606

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

— @tobi7604

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 🎉

— @aynafenriss9428

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

— @Harleking24

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.

— @musik-paint

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();

— @KumaBaern

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?

— @BettyEinhaus-ig7cj

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

— @KobiGurki

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

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.

— @ts5546

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.

— @salyra1335

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 -

— @frankbaumgarten1866

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.

— @h.h.4647

More User Perspectives

@

Man kann doch einfach head eingeben man muss doch nicht header eingeben?

@MurmelgamesTV
@

Man kann doch einfach head eingeben man muss doch nicht header eingeben?

@MurmelgamesTV
@

Wegen des schwarzen Hintergrundes des Editors ist das Video kaum zu gebrauchen.

@kunokunzi
@

40:13 bei mir steht keine frage bei mir ist nur der button "NĂ€chste Frage"

@MK40422
@

Tolles Video. Der <title> kommt allerdings nicht in den <header> sondern in den <head> ;-)

@Herr_Hansen
@

Sehr 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

@SvenMichels89
@

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-12
@

Es ist auch möglich in Visual Studio Code mit einem Ausrufezeichen ein HTML GrundgerĂŒst zu bauen.

@devyannis
@

Super Video. Hat mir sehr sehr geholfen. Bitte mehr davon.

@AlexanderBinner
@

Der Witz ist: Vor ca. 25 Jahren hieß es: Lass den scheiß. X % haben Javascript im Browser eh deaktiviert... und heute...

@thomashering1482
@

Es klappt nicht

@DLM930
@

Die Hauptstadt von Berlin ist Pankow.

@andreasfischer9097
@

Richtig gut.

@straightnorthdancing
@

lol als ich mit javascript angefangen habe , hab ich exakt das selbe gebaut xD

@freemanchaosm2310
@

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

@danigalvani6615
@

hallo, bei mir kann er.
document.getElementById('quiz-result').hidden= false und displayQuestion(); nicht umsetzten. Wieso nicht, könnte mir jmd. bitte helfen?

@iambadmad
@

Sehr schönes Tutorial😊

@Defzan
@

Also, 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 :)

@daxos91
@

Gibt es keinen kurs wo man billig erwerben kann

@BirgitSchedler-lu6kw
@

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.

@sabinebernhardt9667
@

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

@cakiralgmail9595
@

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

@heuerspitstop777
@

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 👍

@heuerspitstop777
@

top, danke!

@joachimku2181
@

Was 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

@nukulus9344
@

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

@alexandereirih7233
@

Dieses Video ist so gut auf doppelter Geschwindigkeit.

@ZaneDBestPerson
@

hab alles 1 zu 1 gemacht wie du, funktioniert leider garnichts so richtig, was mich zu tiefst frustriert, da ich schon etwas erfahrener bin

@tekkdaniels
@

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

@tekkdaniels
@

cooles Video!

@Spandauer66
@

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!

@sal8erno
@

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

@svetozarzivkovic5037
@

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