JavaScript Tutorial für Anfänger: Lerne JavaScript in 90 Minuten (deutsch)

[@Programmierenlernen]

Nachtrag zu 27:40 Statt bitte schreiben, damit die Seite nicht neu geladen wird. Da ist uns beim Cutten ein Fehler passiert 😘

[@dieliebekuh1509]

Vielen Dank für den Nachtrag, bin dort nicht weitergekommen. Ansonsten super Beitrag.

[@jonasgedden5249]

OMG, Danke, dass du das noch geschrieben hast. Bin am Verzweifeln gewesen.

[@DJone4one]

wäre vielleicht für andere noch die kurze info zu geben gewesen, das emmet installiert sein sollte wenn man das mit dem Autovervollständigen will. Ich kannte zwar in erster Linie nur Intellisence über VS, aber das lief nicht unter VSC zumindest nicht bei mir. Habs jetzt aber mit emmet hinbekommen.

[@Toni-nw1dk]

oder in der funktion e.preventDefault(); und e als parameter

[@ed1026]

Kannst du mir helfen

[@Silerra]

Ziemlich interessant. Hab mir mal trotz gute Kenntnisse in JS das Video mal angeschaut. Anschließend lese ich in Kommentaren oft sowas wie "sehr gutes Javascript-Tutorial" und stelle fest "Hm, irgendwie ist das kein richtiges JS-Tutorial.". Denn insgesamt zeigt dieses Video nur, wie man möglicherweise eine Anwendung schreibt, ohne dabei großartig Grundlagen des Javascripts zu benennen. Natürlich lernt man auf diesem Weg am schnellsten. Denn ich habe selbst z.B. PHP fast ausschließlich nur über Videos gelernt "Wie schreibt man ein CMS via PHP?". Dabei habe ich alle wichtigen Details zur der Programmiersprache erfasst und konnte es auch für mich nutzen.

[@Programmierenlernen]

Hinweis: Wegen eines Updates von VSCode, geht der "!"-Zeichen-Shortcut nicht mehr so leicht zu bedienen. Ich habe ich für euch extra nochmal ein Video aufgenommen in dem ich erkläre, wie es auf jeden Fall klappt: www.loom.com/share/3787bc8f92af4e0d9e23c5afdc91ef85

[@CriticalPosthumanism]

Mein Gott... ich hab als blutiger Anfänger 4 Stunden damit verbracht über Google herauszufinden wie man diesen Tooltip aktiviert, weil es bei mir nicht wie in deinem Video war. Und erst jetzt hab ich diesen Kommentar gefunden -.-

[@dernoah0078]

Hey. Ich arbeite gerade an einem Projekt für die Ausbildung. Dieses Video hat gerade gefühlt meine Welt verändert. Ich danke dir so sehr. Super easy erklärt und veranschaulicht. Besser hätte es wirklich kaum noch einer erklären können. Bitte mache gerne mehr davon.

[@Programmierenlernen]

Freut mich. Ich empfehle dir das Taschenrechner App-Tutorial auf diesem Kanal.

[@dernoah0078]

@@Programmierenlernen Danke. Ich werde es mir ansehen.

[@NIB01]

@@Programmierenlernen Kann mir jemand erklären warum trotz der Veränderung des Codes in vs code die Seite trotz neuladen immer gleich bleibt? Also so Ding wie Überschrift usw. Werden einfach nicht hinzugefügt.

[@Matsanahs]

@@NIB01 vielleicht hast du vergessen in vs code zu speichern? Also mit strg s

[@Matsanahs]

Aber kommt wahrscheinlich zu spät🥲

[@youknow4237]

Das ist das erste mal dass ich einem Tutorial oder einem Lehrer folgen kann. Wow... ich hoffe du bringst mehr Videos zu java Script raus , das ist wirklich der Hammer! Großes Kompliment 🙏🏼👌🏼

[@Derandreas08]

Von wo kannst du die ganze programmiersprachen weißt du alles auswendig

[@flywillig]

steht für unordered list und nicht für unsorted list, ergibt ja auch Sinn, wenn der Gegenpart ordered list heißt.

[@WarzoneTales]

Du bist der Beste Yunus. Dein Kopf funktioniert wie die Programmiersprachen an sich, ich glaube deshalb können die Leute dir so gut folgen. Kleinschrittig ist die beste Lehrmethode.

[@derlalex8578]

Moin, ich bin egtl. Java Dev aber habe lust am Webdesign bekommen. Ich hab mir das Tutorial komplett reingezogen und muss ehrlich sagen nach dem hab ich geschmunzelt und fands mega cool. Ich hab dann noch nen bisschen eigenes ausprobiert. Vielen Dank für dieses Tolle Tutorial!!! Ihr macht sehr gute Erklärvideos! Weiter So!

[@rudiger7482]

Ich habe Junus und die Developer Akademie bereits kennengelernt. Und ich kann es einfach wärmstens weiterempfehlen.Niemand kann Code und Programmieren im praktischen Sinne so gut erklären wie Junus ! Einfach Hammer dieser Typ. LG Raphael aus Kärnten

[@Benixel]

Für mich als fortgeschrittener HTML-Coder war das super erklärt und ich war in weniger als einer Stunde durch. Vielen Dank.

[@matthiasgames2850]

Hä wie geht das, das Video dauert doch 90 Minuten...

[@Benixel]

@@matthiasgames2850 hä, indem man unnötig stellen einfach überspringt

[@Wladimir_B]

Guten Tag! Also mein Interesse am Programmieren ist schon sehr lange da und ich dachte mir nun das ich mit diesen Tutorials starte. Es war ein verdammt guter Einblick und ich werde auf jeden fall dran bleiben und mich durch die ganze Serie kämpfen. Jedoch bin ich am ersten Code schon verzweifelt, an der To do Liste. Der Kommentar Von Programmieren lernen angepinnt Programmieren lernen vor 6 Monaten Nachtrag zu 27:40 Statt bitte Hat mir das gerade gerettet. Es hat mich eine halbe Stunde gekostet da ich selbst in meinem Code einen Fehler gesucht habe. Klasse Videos! Weiter so!

[@Programmierenlernen]

siehe meinen ersten Kommentar, der angepinnt ist. Aber so hast du zumindest schon debuggen gelernt ;-)

[@dreamdancer8212]

Ich habe das gleiche Problem. Nur wenn ich "" eingebe werden die eingefügten ListItems sichtbar. Bei einem einfachen "

[@merveyukii8229]

@@dreamdancer8212hey, hast du evtl. das damals schon lösen können. Hab genau das selbe Problem. Hab auch den Nachtrag angepasst. Gestern ging noch alles und jetzt einen Tag später, als ich es mir erneut angeschaut habe, blitzt es nur kurz auf und verschwindet. Ich weis auch nicht wie genau ich danach googeln soll 🙈

[@bumblebee9937]

Boah. Endlich.. Endlich jemand, der die Schritte von A-Z erklärt.. einfach Klasse:D

[@Sergfio_S.F]

Der bester auf KZbin 👍🏼 informativ, konstruiert, verständlich ❤️

[@HDivision]

Sehr verständlich und umfassend. Das ist wie das Pinguin beim Schlittschuh fahren lernen. Man stützt sich dran und lernt Fuß zu fassen. Vielen Dank.

[@ihavenoideawhatname]

Ich kann mir keine Art und Weise vorstellen, wie man einem Beginner ein derart komplexes System noch effektiver nahebringen könnte. Und das in 90 Minuten. Du bewegst dich wirklich in der Königsklasse, mein Lieber.

[@JAyjofirst]

Ich hab heute was gelernt und es ist nicht schwer Mathe zu verstehen wenn man sie direkt wie hier anwendet voll gut danke.

[@emiramv9096]

Bester Mann, hast mein Leben verändert. Bitte öfters davon ❤️

[@Dontyx_77]

Sehr lehrreiches Video, ich kenne mich schon etwas mit JS aus, da ich in die HTL gehe und dieses Video hat mir sehr viel weitergeholfen, JS besser zu verstehen.👍 Bitte mach weiter solche Tutorials.

[@marneu7927]

Seit meinen Basic-Programmen damals auf dem C64 mein erster Versuch, mich dem Thema coden erneut zu nähern. Es hat super Spaß gemacht und erstaunlich gut funktioniert. Vielen Dank ;))

[@sweJEverywhere]

wattzz buzzin boomer????

[@الحياةفيألمانيا-ت9ج]

Vielen Dank , dass du viel Mühe in denen videos gibst. Bitte noch mehr Video über javascript veröffentlichen.

[@Programmierenlernen]

nächste Woche kommt wieder was ;-)

[@gogges4923]

Vielen Dank für das sehr lehrreiche Video! Ich habe nun bisher nur 2 mal die Todoliste "nachgemacht" und werde es auch öfter tun, um grundsätzlich mal in den Flow zu kommen und das Verständnis mit der Logik dahinter zu verbinden. Die Erklärungen sind sehr verständlich und nachzuvollziehen. Der Nachtrag zu 27:40 war auch für mich erst beim 2.mal ersichtlich, aber wichtig. Nun funktioniert es einwandfrei. Bisher habe ich selbständig im Code nur, unter "function" das "checked" geändert, dass wenn man eine Todo eingibt, diese nicht direkt abgehakt ist. Dafür habe ich einfach statt "checked" - "notchecked" eingegeben und es funktioniert. Also man lernt in sehr kleinen Schritten. Meinen Abo hast du und bitte weiter so!

[@christianebner8734]

Finde das Video wie alle anderen wirklich toll und einfach erklärt. Das Coden macht mir sehr viel Spaß, so dass ich mir eine berufliche Weiterentwicklung vorstellen kann.

[@therealhuzur885]

Beste to-do-Liste ever! Die Sachen sind sofort nach dem Aufnehmen in die Liste abgehakt. So habe ich es mir immer gewünscht ;)

[@winterdude2302]

kannst den standard auch ändern

[@mikesplayground8809]

einfach in der Zeile bei cecked, unchecked schreiben, dann sind die Kästchen nicht mehr abgehackt. Hat mich auch gestört ;)

[@hombre707]

Hey Junus, Vielen lieben Dank. Folge Dir seit einiger Zeit und komme langsam voran. LG

[@sebastiannerlich8806]

Super Video. Ich habe mit Visual Basic mal angefangen und wollte mich an eine richtige Programmiersprache wagen, dafür ist dein Tutorital super geeignet. Sehr Einsteigerfreundlich mit Anleitung für die Software an sich + Erklärungen zum "warum" (z.B. warum wird das neue File "index.html" genannt?). Gerne mehr in von JAVA Script.

[@Programmierenlernen]

kommt bald

[@nathestar]

Wenn man diesen Kanal mit anderen Programmierkanälen vergleicht, merkt man den Unterschied enorm!!!

[@saltarex]

Aber im VSCode immer schön STRG S betätigen sonst funktioniert gar nichts. Ich hab mir schon mehrmals den Kopf zerbrochen warum etwas nicht funktioniert und hab dann nach ner viertel Stunde bemerkt, das ich nicht gespeichert hab. :)

[@MrTiga93]

Haha das hatte ich auch schon ein paar mal 😂

[@osmanhakbilen1218]

Danke, hab mich schon gewundert wieso nichts funktioniert xD

[@lashkacrimi3062]

Ehrenmann nach genau 4 Stunden und 3 nachtlose Nächte hat dieses Kommentar nochmal den Hinweisen gegeben das ich behindert bin ich.

[@lue224]

Auto Speicher addon

[@michellaxy8160]

Eine Stunde lang bin ich verzweifelt 😅 vielen Dank !

[@BiesenbachKlein]

Super praxisgerecht. Ohne Ballast-Infos. Dafür gibts ein hochverdientes Abo. DANKE + RESPEKT !

[@Programmierenlernen]

Vielen Dank!

[@Aiguma-l4w]

Perfekt erklärt, gar nicht langweilig wenn man auch nicht alles mitbekommt, also suuuuper! Motiviert noch mehr zu lernen und lernen 👍

[@CAKAN001]

Junus du bist einfach der beste du erklärst das so gut das man es gleich versteht obwohl man nicht coden kann und es das erste mal macht ist es so einfach du machst die besten tutorials 🔝 darum ein like von meiner seite

[@McHowie-zz2tn]

Sehr gut erklärtes Video, selbst für Anfänger gut verständlich. Und es bietet ein nettes Grundverständniss dafür wie man programiert. 1+

[@Saitentanz]

Ein sehr interessantes Video, herzlichen Dank dafür! Das hat meinen Horizont an einer Stelle erweitert.

[@user-yu1kt]

Hi Junus. Ich bin 13 Jahre alt und freue mich mega das so ein sympathischer und guter Kanal wie deiner existiert. Ich hoffe ich werde wenn ich erwachsen bin einen Job als Softwareentwickler in New York bekomme. Danke das du mir mein Ziel erleichterst. Lg.

[@Programmierenlernen]

Wenn du jetzt schon an deine Traum arbeitest, wird er sich wahrscheinlich erfüllen wenn du bis dahin nicht aufgibst. Weiter so!

[@user-yu1kt]

@@Programmierenlernen Ich werde nicht aufgeben. Danke dir!

[@southstreetone]

@@user-yu1ktJa krass, so früh weißt du schon was du machen möchtest und kümmerst dich schon jetzt um die skills, kannst gerne wenn du das siehst schreiben wie der Plan bisher läuft, das ist echt spannend! LG Levin

[@realking5625]

Vielen Dank das ist jetzt das erste mal das ich alles mit machen konnte leicht erklärt und es war leicht es zu verstehen und mit zu machen ;D

[@RubioRubsen]

27:11 - großartig bisher. Gut erklärt und sehr sympatisch.

[@Nikitierchen]

Geil. Danke dir. Erste mal gemacht und direkt das "Checked" in ein "Unchecked" geändert. Jetzt kann ich auch meine werte "Abhacken" HEHE. Danke

[@fahrlehrermo]

Mega junus ich feier dein content danke

[@save.r6691]

danke für dieses tutorial habe nur ne stunde gebraucht um zu kapieren das ich vergessen habe zu speicher

[@marcglitza194]

Geiles Tutorial💪💪 War lange auf der Suche danach. Lasse dir einen Like und Abo da👍💯💪🍀. Mach weiter so

[@edonix0529]

Vielen Dank! Ich will Jetzt mit programmieren anfangen und dieses Tutorial ist das beste bis jetzt! Du hast wirklich sehr gut erklärt. danke!

[@uenals-3dworld]

Hallo Junus wirklich ein tolles Tutorial was du hier veröffentlich hast. Man kann alles gut verstehen und du erklärst es auch so einfach das ein 0815 User es verstehen kann. Tolles Tutorial weiter so und viel Erfolg in dein Unternehmen

[@Programmierenlernen]

danke! Dein Kommentar ist mega nett und freut mich sehr, das zu lesen!

[@willywinzig8311]

Ich bin leider erst jetzt auf deine Videos gestoßen. Du erklärst das echt gut. Deshalb habe ich gleich ein Abo und ein 👍 dagelassen.

[@AustinMaverix]

Bruder, es war mit Abstand das beste Tutorial aller Zeiten!

[@thierryflorentdzouatodjeum3574]

zuerst vielen Dank fürs super erklärte Video. Gern hätte ich gewusst, woher du diese Zahlen für key-up,down and space. Ich würde mich auf andere Zahlen für solche keys freuen. : )

[@thomasmuller8687]

Wirklich super erklärt, auch für absolute Laien.

[@NoIZyBoI2404]

Hab mich jetzt nach langer zeit mal dazu entschieden programmieren zu lernen und muss sagen das du einem das extrem einfach machst!! man kommt immer mit und ich für meinen teil habe schon einige kleine befehle selbst eingefügt die du erst ein paar sekunden später im video gezeigt hast :D also absolut top was du machst und ich werde mir auch deine andere TuTs anschauen!

[@Robin-ex8pz]

auch wegen open ai ?

[@avoidmax5503]

Ich komme irgendwie nicht weiter. Ich habe bisher auch keine Ahnung vom programmieren und dachte mir ich fange mal mit diesem Video an. Jetzt stecke ich seit über einer Stunde bei 17:24 fest. Ich habe bis zu dem Punkt im Video alles exakt gleich gemacht. Ich habe sogar alles nochmal von vorne gemacht um sicher zu gehen. Dennoch egal wie oft ich abspeichere und die Seite neu lade, die Textbox bewegt sich nicht nach rechts. Wenn ich den ersten Wert (0px) ändere kann ich es nach oben/unten verschieben. Jedoch nicht den zweiten Wert (100px). Von links nach rechts geht also nicht. Und ich verstehe nicht wieso.. Das Tutorial ist auch schon über ein Jahr alt, hängt das damit zusammen? Muss man jetzt irgendwas anderes eingeben? Würde mich echt freuen wenn mir da jemand helfen kann.

[@lordtrainspotter1786]

Mir geht es genau so, wäre lieb wenn vielleicht einer nochmal erklären könnte das es funktioniert. Da der Kommentar jetzt schon 2 Jahre alt ist, hast du es herausgefunden @avoidmax5503 ?

[@lordtrainspotter1786]

PS: Hab herausgefunden wie es geht, du musst nur das vor weg machen / rauslöschen. lg.

[@IbelieveIcan7ly]

❤Vielen Lieben Dank! 🙏

[@martinukas77]

Unglaublich gut gemacht. Das Video und das Mitmachen haben sehr viel Spaß gemacht. Vielen Dank!

[@lifelevelup8503]

bruder ich küss dein herz habibi. du bist meine rettung aus dem ghetto.

[@Sammelwahn]

1:23:53 müsste da nicht in der if bedingung stehen: rocket.x + rocket.width > ufo.x && rocket.y + rocket.height > ufo.y && rocket.x < ufo.x + ufo.width && rocket.y < ufo.y + ufo.height Weil so wie es im Video ist, ist die Kollision immer nur wenn man das Ufo oben Links trifft ansonsten fliegt das Ufo einfach durch die Rakete durch.

[@pascally.official]

Danke, ist mir auch gerade aufgefallen. Also letztendlich die Abfragen spiegeln.

[@nonamejv]

Danke nach dem Kommentar habe ich gesucht !

[@eulerischezahl613]

bin gerade mal bei 30 min und hab schon so viele coole dinge gelernt. danke für das video :)

[@KarolBoka-k2h]

Kann mir jemand weiterhelfen ? Ich habe bis 31:46 alles genau nachgemacht. Allerdings speichert meine Liste nichts ab was ich oben ins Text Feld eingebe. Habe den Code jetzt schon unzählige Male verglichen und kann den Fehler nicht finden

[@michi1242]

suche seit 12 std nach so einem video danke

[@Samoboz]

geil auf sowas warte ich schon lange. grüße von deiner TT community ^^

[@nikokroger]

Ja so ein gut erklärtes Video ist wirklich das einzige auf ganz gut KZbin schade das es so wenig Aufrufe hat.

[@Sergfio_S.F]

Du bist der bester! Komisch, dass du nur 15K followers hast

[@Programmierenlernen]

Oh danke

[@Muaddhin_Shuaib]

beim einstellen in der minute 16:41 den style zu verändern so das der text verschoben wird klappt bei mir nicht mach ich irgendwas falsch ich habe alles haargenau geschrieben .page-content { padding: 0px 100px; } funktioniert nicht

[@vertex_frazix2988]

Same

[@damianaw3732]

Klappt bei mir auch net

[@danielm.3622]

Das vor muss weg

[@andrefelbel4032]

@@danielm.3622 boa Danke, habe gerade ewig den Fehler gesucht

[@niphius]

Du erinnerst mich an meine Mathelehrerin. Sie erklärt das Thema genau so gut wie du

[@Johannes.Walker]

Vielen dank super erklärt! Ich finde es übertrieben, spannend zu sehen, wie genau die Zahnrädchen funktionieren und welches was genau macht. Mein Interesse und Neugier am Programmieren ist mit dem Video nur gestiegen. Wirklich nicer Einblick 😛😀

[@Programmierenlernen]

Das freut mich sehr!

[@tonihullzer1611]

echt sehr gut didaktisch gemacht, danke!

[@duplaixofficial]

Ein richtig gutes Tutorial! Nur fehlt mir in dem Video (auch wenn es nur ein kleines Tutorial ist) dass man Stylesheets NICHT im HTML Code Standardmäßig reinschreiben sollte, sondern immer in eine separate CSS Datei. Ansonsten verliert man bei komplexen Projekten schnell mal den Überblick und du musst andauernd in den HTML Code, auch wenn du nur etwas am "Style" ändern willst. Lg

[@Programmierenlernen]

true. Habe ich der Einfachheit halber weggelassen, aber hätte man noch reinbringen können.

[@TilmannB0710]

@@Programmierenlernen Da es für Anfänger ist, denke ich auch, das man das besser weg lassen kann - denke da wird sicher noch was kommen, was HTML und CSS genauer beleuchtet - obwohl ich jetzt HTML und CSS eigentlich als sehr einfach empfinde zu lernen - Javascript und PHP finde ich da weit schwerer rein zu kommen - natürlich mit "Anleitung" wie hier ist das alles kein Problem - das aber dann auch bspw in MySQL Datenbanken einzupflegen für bspw Bewertungen / Gästebücher - das wäre für mich da schon weit interessanter, was Webseiten betrifft :).

[@TilmannB0710]

Erst mal die ToDo Liste gebaut - gleich mal weiter machen mit dem Raketen Game :D - einfach Klasse - kann man schon viel mitnehmen. Snake hatte ich auch schon gecodet.

[@TilmannB0710]

Also bis zum Ende des Tutorials hab ich es soweit geschafft - habe dann versucht den Schuss hinzubekommen - aber leider gescheitert - lag aber garnicht so falsch - obwohl ich es irgendwie bei fast richtiger Lösung doch zu kompliziert machen wollte. Aber bei mir bleibt leider der Schuss hinten in der Rakete stecken, hab jetzt sicher 20 mal den Code noch mal durch geguckt, aber den Fehler finde ich leider nicht ... wollte eigentlich wie bei Snake auch ein Game Over mit Neu Laden probieren, wenn man am Bildschirmrand hinaus fliegt - irgendwie habe ich da auch den falsches Gedankengang... Muss ich mir noch mal angucken... Rocket Shot canvas { background-color: black; } let KEY_SPACE = false; // 32 let KEY_UP = false; // 38 let KEY_DOWN = false; // 40 let KEY_LEFT = false; // 37 let KEY_RIGHT = false; // 39 let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 50, y: 200, width: 100, height: 60, src: 'img/rocket.png' }; let ufos = []; let shots = []; document.onkeydown = function(e) { if (e.keyCode == 32) { // Leertaste gedrückt KEY_SPACE = true; } if (e.keyCode == 37) { // Nach Links gedrückt KEY_LEFT = true; } if (e.keyCode == 38) { // Nach oben gedrückt KEY_UP = true; } if (e.keyCode == 39) { // Nach Rechts gedrückt KEY_RIGHT = true; } if (e.keyCode == 40) { // Nach unten gedrückt KEY_DOWN = true; } } document.onkeyup = function(e) { if (e.keyCode == 32) { // Leertaste losgelassen KEY_SPACE = false; } if (e.keyCode == 37) { // Nach Links losgelassen KEY_LEFT = false; } if (e.keyCode == 38) { // Nach oben losgelassen KEY_UP = false; } if (e.keyCode == 39) { // Nach Rechts losgelassen KEY_RIGHT = false; } if (e.keyCode == 40) { // Nach unten losgelassen KEY_DOWN = false; } } function startGame() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); loadImages(); setInterval(update, 1000 / 25); setInterval(createUfos, 5000); setInterval(checkForCollision, 1000 / 25); setInterval(checkForShoot, 1000 / 10); draw(); // calculate } //function gameOver() { // if (rocket.x < 0 || // rocket.x > cols -1 || // rocket.y < 0 || // rocket.y > rows -1 // ) { // rocket = [ { // x: 50, // y: 200, // src: 'img/rocket.png' // }] // } //} function checkForCollision() { ufos.forEach(function(ufo){ if(rocket.x + rocket.width > ufo.x && rocket.y + rocket.height > ufo.y && rocket.x < ufo.x && rocket.y < ufo.y + ufo.height ) { rocket.img.src = 'img/boom.png'; console.log('Collision!!!'); ufos = ufos.filter(u => u != ufo); } shots.forEach(function(shot){ if(shot.x + shot.width > ufo.x && shot.y + shot.height > ufo.y && shot.x < ufo.x && shot.y < ufo.y + ufo.height ) { ufo.hit = true; ufo.img.src = 'img/boom.png'; console.log('Collision Shot!!!'); setTimeout(() => { ufos = ufos.filter(u => u != ufo); }, 2000); } }); }); } function createUfos() { let ufo = { x: 800, y: Math.random() *500, width: 100, height: 40, src: 'img/ufo.png', img: new Image() }; ufo.img.src = ufo.src; ufos.push(ufo); } function checkForShoot() { if (KEY_SPACE) { let shot = { x: rocket.x +110, y: rocket.y +22, width: 20, height: 4, src: 'img/shoot.png', img: new Image() }; shot.img.src = shot.src; shots.push(shot); } } function update() { // gameOver(); if (KEY_UP) { rocket.y -= 4; } if (KEY_DOWN) { rocket.y += 4; } if (KEY_LEFT) { rocket.x -= 4; } if (KEY_RIGHT) { rocket.x += 4; } ufos.forEach(function(ufo) { if (!ufo.hit) { ufo.x -=5; } }); shots.forEach(function(shot) { shot.x +=15; }); } function loadImages() { backgroundImage.src ='img/background.png'; rocket.img = new Image(); rocket.img.src = rocket.src; } function draw() { ctx.drawImage(backgroundImage, 0, 0); ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height); ufos.forEach(function(ufo) { ctx.drawImage(ufo.img, ufo.x, ufo.y, ufo.width, ufo.height); }); shots.forEach(function(shot) { ctx.drawImage(shot.img, rocket.x, rocket.y, shot.width, shot.height); }); requestAnimationFrame(draw); }

[@franzgustaf5177messer]

Bei mir sind bei 1:00:34 diese Fehler aufgetreten: Uncaught ReferenceError: e is not defined game.html:46 at game.html:46:1 game.html:71 Uncaught TypeError: Cannot read properties of null (reading 'getContext') at startGame (game.html:71:17) at onload (game.html:93:28) Könnte mir jemand helfen?

[@franzgustaf5177messer]

Ufoinvasion canvas { background-color: rgba(0,0,0.8); } let KEY_SPACE = false; // 32 let KEY_UP = false; // 38 let KEY_DOWN = false; // 40 let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 100, y: 200, width: 200, height: 80, scr: 'img/rocket.png' }; let ufo = { x: 500, y: 200, width: 100, height: 40, scr: 'img/ufo.png' }; document.onkeydown = function(e) { console.log(e.keyCode); if (e.keyCode == 32) { // Leertaste gedrückt KEY_SPACE = true; } } if (e.keyCode == 32) { // Nach oben gedrückt KEY_UP = true; } if (e.keyCode == 38) { // Nach unten gedrückt KEY_DOWN = true; } document.onkeyup = function(e) { console.log(e.keyCode); if (e.keyCode == 40) { // Leertaste losgelassen KEY_SPACE = false; } if (e.keyCode == 32) { // Nach oben losgelassen KEY_UP = false; } if (e.keyCode == 38) { // Nach unten losgelassen KEY_DOWN = false; } } function startGame(){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); draw(); //.calculate } function loadImages(){ backgroundImage.src = 'img/background.png'; rocket.img = new Image(); rocket.img.src = rocket.src; ufo.img = new Image(); ufo.img.src = ufo.src; } function draw(){ ctx.drawImage(backgroundImage, 0, 0); ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height); requestAnimationFrame(draw); }

[@kamilsamimi3897]

Wow... du bist Perfekt!

[@simongrobner4086]

DANKE! Sehr hilfreich!

[@watch2cats715]

danke das du das fürs uns machst und dich hinsetzt dafür mach weiter so!

[@DE-signYourLife]

Gaanz großes Lob genau sowas habe ich gebraucht, keine großen Phylosophien über die Sprachen und deren Methoden usw. sondern direkt auf den Punkt gebracht mit schönen Beispielen. Könntest Du auch mal ein Tutorial machen wie man mit Hilfe von JavaScript Webseiten nach belieben für sich ändern kann in dem man das WebDevelobment von Chrome benutzt? Also aus der Iqueri Sachen heraus lesen, bestimmte Werte die auf der Seite dynamisch sind in Variablen ausgeben usw usw.? Das wäre mega. Es gibt doch auch Tempermonkey u. Greasemonkey damit könntest Du doch auch ein Tutorial machen oder?

[@simon-fpv3d]

Hat echt Spaß gemacht, mit zu machen. Steh noch ganz am Anfang bei JS. Hab zwar mal nen HWK Abschluss gemacht, wo HTML, CSS und PHP vorkam, jedoch fehlte da natürlich der extreme Tiefgang, weil Web-Entwicklung ein Thema von vielen war... Muss die Tage doch mal schauen, ob ich mich auf deiner Website nicht doch mal anmelde, würde mir sicher nicht schaden. Hätte vor in Richtung Web Development zu gehen.

[@programmiereranfanger4719]

Bitte mach weitere solcher Videos, freier dich

[@finnfinn7030]

ich finde deine videos der hammer ich werde mit diesem video anfangen wo du dass erklärst damit ich coden lerne ,du erklärst dass soo gut ,hr lehrer..

[@erkyil88]

Hilfe Junus, bei der Stelle 1:02:29 wird bei mir nichts aktualisiert, weder der Hintergrund noch die Figur. Bei dem Schritt davor hat alles geklappt. Ich bekomme die Fehlermeldung: Uncaught DOMException: CanvasRenderingContext2D.drawImage: Passed-in image is "broken" game.html:83 Ich bedanke mich für die tollen Videos und wünsche dir alles Gute!

[@-vekzom7729]

Bei uns auch, nur wir bekommen keine Fehlermeldung. Die Bilder werden anscheinend nicht geladen/angezeigt. Hast du inzwischen eine Lösung gefunden?

[@IdiKing]

@@-vekzom7729 bei mir ist das auch so

[@Fabian-gv7lb]

Bei mir auch. Background wird geladen und der Rest nicht. Aber auch ohne Fehlermeldung

[@mariazoglmeyr3665]

Sehr schöne Erklärung 😄

[@oxygenhydro582]

Hallo,hab eine Frage. Ich habe die codes vom Video genau nachgeschrieben aber bekomme keine reaktion. sowohl auf javascprit in sandbox oder jetzt hier auf VSC funktionieren die codes nicht. Ich bin mir aber sehr sicher , dass ich sie 1:1 nachgeschrieben habe . Hat jemand eine Idee woran das liegen könnte? Danke schonmal

[@Alexo.04]

Ist bei mir auch so, gebe die codes 1:1 ein aber dir Seite bleibt weiß

[@eddavogt3568]

@@Alexo.04 im visual studio Speichern und dann Aktualisieren :)

[@saitenspieler3489]

Danke! Wirklich ein großartiges Beispiel. Ich habe viel gelernt!

[@Grov34n]

Hey super Video! Ich bin auch ein Quer- bzw. Neueinsteiger. Mit welchem Hotkey formatierst du das bei Minute 9:17 ? Sorry bin sehr unerfahren ^^' Hab ewig gesucht und es nicht gefunden =/

[@Walkuerus]

Hab auch etwas gesucht. Ich denke es ist Shift + alt + F. Gefunden im Reiter Help/Hilfe und dann Show All Commands -> Format Document.

[@Grov34n]

@@Walkuerus vielen Dank für die Hilfe 👍

[@konradpalm9575]

Klasse Video. Ich hatte aber die ganze Zeit Sorge das ich noch Probleme kriegen würde weil ich Collision richtig geschrieben habe😂

[@luuuuuiiiisssss]

Folgendes Problem: Bei funktion draw(){}, wurde gezeigt wie man die Bilder hinzufügen kann. Wir haben die ctx Zeilen übernommen (85-90 bei 1:02:10), jedoch werden die Bilder nicht geladen/ angezeigt. Wir haben wirklich keine Ahnung an was das liegen könnte. Hatte jemand ein ähnliches Problem oder kann uns jemand weiterhelfen? Falls jemand sich bereit erklärt uns zu helfen, hier der Code: SpaceWar canvas { background-color: rgba(0, 0, 0, 0.788); } let KEY_SPACE = false; let KEY_UP = false; let KEY_DOWN = false; let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 100, y: 200, width: 200, height: 80, src: 'img/rocket.png' } let ufo = { x: 500, y: 200, width: 100, height: 40, src: 'img/ufo.png' } document.onkeydown - function(e) { console.log(e.keyCode); if (e.keyCode == 32){ KEY_SPACE = true; } if (e.keyCode == 38){ KEY_UP = true; } if (e.keyCode == 40){ KEY_DOWN = true; } } document.onkeyup - function(e) { if (e.keyCode == 32){ KEY_SPACE = false; } if (e.keyCode == 38){ KEY_UP = false; } if (e.keyCode == 40){ KEY_DOWN = false; } } function startGame(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext('2d'); loadImage(); draw(); } function loadImages(){ backgroundImage.src = 'img/background.jpg' rocket.img = new Image(); rocket.img.src = rocket.src; ufo.img = new Image(); ufo.img.src = ufo.src; } function draw(){ ctx.drawImage(backgroundImage, 0, 0); ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height,); requestAnimationFrame(draw); }

[@IdiKing]

bei mir ist das gleiche problem

[@sonicmaths8285]

weis nicht, ob das was zur Sache tut, aber du hast onkeyup und onkeydown geschrieben und ich habe onekeyup und onekeydown Denkst du, dass das egal ist, weil das eine eigendefinierte Funktion?

[@manzonelp8686]

in der function StartGame hast du loadImage() und die function heißt aber loadImages. das "s" fehlt. Dadurch hat die function StartGame keine definierte function gefunden welche sie ausführen kann und so wird dann nichts angezeigt.

[@askyourself4873]

@@IdiKing Bei mir auch..ich find den Fehler einfach nicht. Hier auch einmal meins: Raumschiffschlacht canvas { background-color: rgba(0, 0, 0, 0.8); } let KEY_SPACE = false //32 let KEY_UP = false //38 let KEY_DOWN = false //40 let canvas; let ctx; let backgroundImage = new Image(); let rocket = { x: 100, y: 200, width: 200, height: 80, scr: 'img/286673_rocket_icon.png' }; let Ufo = { x: 500, y: 200, width : 100, height : 40, scr : 'img/UFo.png' }; document.onkeydown = function(e) { console.log(e.keyCode); if (e.keyCode == 32) { // Leertaste gedrückt KEY_SPACE = true; } if (e.keyCode == 38) { // Leertaste nach oben gedrückt KEY_UP = true; } if (e.keyCode == 40) { // Leertaste nach unten gedrückt KEY_DOWN = true; } } document.onkeyup = function(e) { if (e.keyCode == 32) { // Leertaste losgelassen KEY_SPACE = false; } if (e.keyCode == 38) { // Leertaste nach oben losgelassen KEY_UP = false; } if (e.keyCode == 40) { // Leertaste nach unten losgelassen KEY_DOWN = false; } function startGame (){ canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); loadImages(); draw(); // calculate } function loadImages(){ backgroundImage.src = 'img/Hintergrund.png'; rocket.img = new Image(); rocket.image.src = rocket.src; ufo.img = new Image(); ufo.img.src = ufo.src; } function draw () { ctx.drawImage(backgroundImage, 0, 0); ctx.drawImage(rocket.img, rocket.x, rocket.y, rocket.width, rocket.height); requestAnimationFrame(draw); } }

[@Kizu1206]

@@askyourself4873 img Ordner in VS erstellt? War bei mir das Problem

[@erdnusspuffer8362]

Ich hab echt kein Plan von coden und der Materie, schaue mir aber trotzdem gerne solche Videos an. Aber trotzdem Erinnert mich das Copy and Paste an Script Kiddy. Euch persönlich will ich mit keinster Weise angreifen! Ihr hab Ahnung und das Verständnis mit coden absolut. Ich hab wie gesagt keinerlei Ahnung von dem ganzen. 🙂

[@Programmierenlernen]

was meinst du genau?

[@Itachi-fk5pf]

bei mir ändert sich auf der seite einfach nichts, ich geb alles zwischen body und body ein aber beim aktualisieren bleint trotzdem alles weiß

[@mortn_yt]

Speichern

[@cecileandrianov6541]

Ich fange an interessiert an diesem Dings zu sein.

[@lewis.7034]

hab den code von 8:02 1zu1 in meinem programm stehen aber im browser tut sich nichts.

[@18Acht7]

Hey, habe auch gerade das selbe Problem gehabt aber dann herausgefunden, dass du nur F5 auf dem projeckt glicken muss. ( Die Nachricht kommt ein bisschen spät haha)

[@tatthiasmauchner7147]

Danke für das Tutorial! Liebe Grüße und viel Programmierspaß, TatthiMau

[@Programmierenlernen]

Sehr gerne 👍

[@LauxKanal]

spacegame.html:74 Uncaught TypeError: gtx.draw is not a function at draw (spacegame.html:74) at startGame (spacegame.html:70) at onload (spacegame.html:91) steht bei mir kann es iwi nicht Fixen?😥

[@Programmierenlernen]

ctx nicht gtx ;-)

[@airuptrinker9110]

Echt sehr hilfreich bist der Beste YUNUS

[@spontanaflex6275]

pov: nach den ersten 8 min kommst du schon nicht mehr weiter (ich brauche HILFE!!!)

[@velixo3338]

Wo drückt der Schuh?

[@mirjamstoewe2431]

@@velixo3338 ich glaub ich hab das selbe Problem wenn ich den code in web Browser einfügen habe ich nur ein weißes Bild, kein Text/Überschrift Trotz Überschrift ...

[@dna9348]

@@mirjamstoewe2431 same

[@velixo3338]

@@mirjamstoewe2431 Hast du gespeichert? STRG + S

[@CriticalPosthumanism]

Das erste mal dass du erwähnst zu speichern ist bei 17:30 Ich hab ganz schön lange gebraucht um zu checken wieso es bei mir nicht funktioniert. Weil ich nie gespeichert habe :D

[@tobyhungerbuhler1495]

Hallo Junus, super Tutorial mit zügigem Tempo... Problem gibts aber bei der Todoliste: von da an wo die Liste in die Funktion kopiert / verschoben wird, gehts schief. Man sieht dass die Funktion bei betätigen des Buttons richtig ausgeführt wird, die angezeigte Liste aber nach einem Bruchteil von Sekunden wieder verschwindet. Hast du vieleicht davon auch den Code auf Github? Würde ev helfen die Ursache zu suchen. Ist Grad mein erster Gehversuch mit HTML CSS JS

[@dieliebekuh1509]

Ich habe genau das gleiche Problem, obwohl ich alles 1zu1 nachgemacht habe. Hat vielleicht jemand eine Lösung?

[@Programmierenlernen]

Hallo Toby, danke für deinen Kommentar. In Minute 27:40 schreibe ich: versuche stattdessen mal zu schreiben. Das verhindert, dass die Seite neu geladen wird. LG Junus

[@tobyhungerbuhler1495]

@@Programmierenlernen Jetzt klappts! 1000 Dank für deine Mühe

[@TilmannB0710]

@@Programmierenlernen Besten Dank, jetzt funktioniert das bei mir auch - hatte mich jetzt auch gewundert, das es sofort verschwand - nette Community - wo anscheinend andere das Problem auch hatten und hier sogar eine Lösung gebracht wird. Besten Dank :)

[@kolotheegg69]

Dankeschön, ich hatte genau das selbe Problem

[@habeshaboss]

*Ein super video danke dafür 😊*

[@suliasiboseniyasana5299]

wenn ich den button drücke reloaded sich meine seite was soll ich machen? hilfe bitte

[@nataliebendig1756]

Einfach klasse!

[@jantempo1115]

Danke für dieses Tutorial. Ich bin absoluter Anfänger. Ich denke es wird moch einige Zeit vergehen bis ich den Code begreife, weil,......... function meinGehirn() { code Raumschiffschlacht nachbauen = true; code Raumschiffschlacht ausführen = true; code Raumschiffkschlacht verstehen = false; }

[@sonicmaths8285]

der ist gut

[@spartan_zero_one503]

Genial, vielen Dank dafür!

[@MSJ9688]

Wieso kommt bei mir kein Text? Habe beim Code alles gleich aber die Seite bleibt weiß. 😓

[@LDB1921]

Ist bei mir auch so

[@puryamenzel5922]

@@LDB1921 Speichern und dann Aktualisieren

[@puryamenzel5922]

Speichern und dann Aktualisieren

[@LDB1921]

@@puryamenzel5922 danke das hat geklappt

[@puryamenzel5922]

@@LDB1921 Sehr gerne. Das freut mich.

[@Ricky4K]

Danke vielmals für deine Hilfe👍

[@alperensik3189]

wow keine dislikes

[@benediktsterra9765]

Brutal gut erklärt

[@Programmierenlernen]

Danke für das Lob!

[@benediktsterra9765]

@@Programmierenlernen hast du eine Mail über die ich mich mit Fragen an dich wenden kann?

[@matthiasschull408]

Sehr cooles Tutorial, sehr sehr cool erklärt! Vielen Dank! Eine Anmerkung: Wenn das Ufo die selbe y-Koordinate haben sollte wie die Rakete dann kollidieren sie nicht ;).

[@Persona0815]

Strg+S... Vielen Dank Saltarex :D. Das war auch mein Problem

[@AIBexo]

danke für eure tollen Videos. TOP!!!

[@zenkny]

Hat mir sehr geholfen dankeschön😘