Mini-Projekte in JavaScript erstellen

Erweitern Sie Ihre Kenntnisse mit Coursera Plus für 239 $/Jahr (normalerweise 399 $). Jetzt sparen.

Mini-Projekte in JavaScript erstellen

Dieser Kurs ist Teil mehrerer Programme.

Dozent: Tom Chant

Bei enthalten

Mehr erfahren

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

4 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Was Sie lernen werden

Erstellen effizienter Funktionen mit Hilfe von Pfeil-Syntax und Ausdrücken.
Anwendung von Array-Methoden wie .map() und .reduce() zur Datenverarbeitung.
Debugging von JavaScript-Anwendungen unter Verwendung gängiger Techniken zur Fehlerbehandlung.

Kompetenzen, die Sie erwerben

Kategorie: Javascript
Kategorie: Web Development
Kategorie: User Interface (UI)
Kategorie: Data Validation
Kategorie: Debugging
Kategorie: Event-Driven Programming
Kategorie: Data Import/Export
Kategorie: Data Management

Werkzeuge, die Sie lernen werden

Kategorie: Web Applications
Kategorie: Web Development Tools

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

4 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

Erweitern Sie Ihre Fachkenntnisse

Dieser Kurs ist als Teil verfügbar

Wenn Sie sich für diesen Kurs anmelden, müssen Sie auch ein bestimmtes Programm auswählen.

Lernen Sie neue Konzepte von Branchenexperten
Gewinnen Sie ein Grundverständnis bestimmter Themen oder Tools
Erwerben Sie berufsrelevante Kompetenzen durch praktische Projekte
Erwerben Sie ein Berufszertifikat zur Vorlage

In diesem Kurs gibt es 4 Module

Sind Sie bereit, Ihre JavaScript-Kenntnisse durch einen projektbasierten Ansatz zu verbessern? Dieser Kurs führt Sie durch grundlegende und fortgeschrittene JavaScript-Konzepte anhand praktischer, realitätsnaher Herausforderungen.

Anhand praktischer Projekte erkunden Sie funktionale Methoden wie .map() und .reduce(), wichtige logische Operationen wie den ternären Operator und Kurzschlüsse, die Übermittlung von Formularen u.v.m. Als Nächstes erkunden Sie zunehmend fortgeschrittene JavaScript-Konzepte wie Schleifen, filter(), Importe und die Destrukturierung von Objekten, indem Sie drei vollständige Projekte erstellen: einen Meme-Picker, ein Cookie-Zustimmungsbanner und einen X/Twitter-Klon. Sie werden lernen, sauberen und effizienten Code zu schreiben und Herausforderungen zu meistern, die Ihr Verständnis von JavaScript festigen. Am Ende dieses Kurses verfügen Sie über ein solides Verständnis leistungsfähiger JavaScript-Methoden und -Techniken, die Sie direkt in Ihren Programmierprojekten und in Ihrer Programmierkarriere anwenden können.

Erweitern Sie Ihre JavaScript-Kenntnisse mit praktischen Herausforderungen, die Methoden, Arrays, Destrukturierung und vieles mehr umfassen.

Das ist alles enthalten

1 Aufgabe49 Plug-ins

1 Aufgabe Insgesamt 30 Minuten

JavaScript-Grundlagen-Quiz 30 Minuten

49 Plug-ins Insgesamt 201 Minuten

Einführung in Mini-Projekte 1 Minute
Willkommen zum interaktiven Unterricht! 1 Minute
Objekt Destrukturierung 3 Minuten
Objekt Destrukturierung Herausforderung 2 Minuten
Die Methode .map() 7 Minuten
Die .map()-Methode Herausforderung 4 Minuten
Die Methode .join() 3 Minuten
Die Herausforderung der Methode .join() 2 Minuten
.map() vs .forEach() 5 Minuten
For-Schleife Break und Continue 5 Minuten
Die Gefahren von innerHTML 5 Minuten
Jenseits von Funktionsdeklarationen 1: Funktionsausdrücke 3 Minuten
Jenseits von Funktionsdeklarationen 2: Herausforderung Funktionsausdruck 2 Minuten
Jenseits von Funktionsdeklarationen 3: Pfeilfunktionen 6 Minuten
Herausforderung Pfeilfunktionen 4 Minuten
Inline-Pfeilfunktionen Herausforderung 2 Minuten
Import Export (benannt) 4 Minuten
Importieren Exportieren (Standard) 4 Minuten
Die Methode .reduce() 6 Minuten
Die .reduce() Methode Herausforderung 4 Minuten
Die Methode .reduce() mit Objekten 8 Minuten
Die Methode .reduce() mit Objekten Herausforderung 3 Minuten
Standard-Parameter 3 Minuten
Super-Challenge-Einrichtung 3 Minuten
Super Challenge Lösung 9 Minuten
Der Ternäre Operator 4 Minuten
Der ternäre Operator für komplexe Konditionale 3 Minuten
Ternärer Operator Herausforderung 4 Minuten
Twimba Ternary Refactor 5 Minuten
Der Rest-Parameter 5 Minuten
Die Herausforderung der Rest-Parameter 7 Minuten
Ausbreitung Syntax (...) 4 Minuten
Spread Syntax (...) Herausforderung 5 Minuten
Kurzschaltung mit ODER (||) 5 Minuten
Kurzschließen mit OR (||) Herausforderung 2 Minuten
Kurzschließen mit AND (&&) 3 Minuten
Kurzschließen mit AND (&&) Herausforderung 4 Minuten
Anweisungen wechseln 5 Minuten
Konstrukteure: Date() 5 Minuten
Der Error()-Konstruktor 3 Minuten
Objekte mit Methoden und 'this' 5 Minuten
Objekte zu Konstruktorfunktionen 5 Minuten
Herausforderung Konstruktorfunktion 5 Minuten
Konstruktorfunktionen zu Klassen 5 Minuten
Konstruktorfunktionen zu Klassen Herausforderung 2 Minuten
Debugging: Fehler (neu) 7 Minuten
Debugging: console.error 2 Minuten
Debugging: try...catch 5 Minuten
Rekapitulieren Sie 2 Minuten

In diesem Abschnitt lernen Sie, wie Sie mit JavaScript ein interaktives Cookie-Zustimmungsmodal erstellen. Dabei werden die Themen zeitgesteuerte Anzeige, Styling, Formulare, Validierung, Barrierefreiheit und Handhabung von Benutzerinteraktionen behandelt.

Das ist alles enthalten

1 Aufgabe31 Plug-ins

1 Aufgabe Insgesamt 80 Minuten

Einen lästigen Cookie mit Zustimmung erstellen Benotete Aufgabe 80 Minuten

31 Plug-ins Insgesamt 111 Minuten

Cookie-Zustimmung Intro 3 Minuten
Positionieren Sie das Modal 3 Minuten
Außerdem: setTimeout 4 Minuten
Den Timer einstellen 2 Minuten
Außerdem: element.style 6 Minuten
Wiedererscheinen lassen des Modals 2 Minuten
Schließen Sie das Modal 3 Minuten
Abgesehen davon: Formulare 7 Minuten
Ein Formular hinzufügen 1 2 Minuten
Nebenbei: Formulare - Einreichung 5 Minuten
Nebenbei: Formulare - Herausforderung 3 Minuten
Nebenbei: Validierungs-Attribute 8 Minuten
Das Formular abschicken 3 Minuten
Aside: preventDefault 4 Minuten
preventDefault Herausforderung 3 Minuten
Schaltflächen in Formularen - seltsames Verhalten 3 Minuten
Modale Nachricht hinzufügen 2 Minuten
Modale Meldungen hinzufügen 2 6 Minuten
Modale Meldungen hinzufügen 3 3 Minuten
Nebenbei: FormData 4 Minuten
Formular Daten 1 2 Minuten
Daneben: FormData-Methoden 3 Minuten
Formular Daten 2 3 Minuten
Nebenbei: Deaktivieren von Elementen 6 Minuten
Deaktivieren Sie die Schaltfläche "Schließen 3 Minuten
Es gibt keine Wahl 1 4 Minuten
Außerdem: classlist.toggle 4 Minuten
Nebenbei: Klassenliste Toggle Challenge 3 Minuten
Es gibt keine Wahl 2 3 Minuten
Fragen der Zugänglichkeit 2 Minuten
Rekapitulieren Sie 2 Minuten

Dieser Abschnitt führt Sie durch Schleifen, Datenmanipulation, DOM-Manipulation und ereignisgesteuerte Programmierung in JavaScript und gipfelt in der Erstellung eines interaktiven Merkmals, das Katzen auf der Basis von benutzerdefinierten Emotionen filtert und anzeigt.

Das ist alles enthalten

1 Aufgabe37 Plug-ins

1 Aufgabe Insgesamt 30 Minuten

Erstellen eines Meme-Pickers Benotete Zuweisung 30 Minuten

37 Plug-ins Insgesamt 166 Minuten

Intro 4 Minuten
Was für eine schreckliche for-Schleife 3 Minuten
Übrigens: für von 5 Minuten
Verwenden Sie ein für von 2 Minuten
Nest die für von 5 Minuten
Die Emotionen wiedergeben 1 4 Minuten
Emotionen rausspielen 2 6 Minuten
Außerdem: Import der Daten 6 Minuten
Importieren Sie die Daten 2 Minuten
Nebenbei: Radio-Eingänge 6 Minuten
Rendering der Radiosignale 6 Minuten
Außerdem: .includes() 6 Minuten
duplikate entfernen 3 Minuten
Übrigens: e.target 6 Minuten
Abrufen der ID der angeklickten Option 3 Minuten
Außerdem: parentElement 3 Minuten
Außerdem: Klassenliste hinzufügen/entfernen 7 Minuten
Farbe zur ausgewählten Emotion hinzufügen 6 Minuten
Außerdem: getElementsByClassName 5 Minuten
Entfernen Sie die Highlight-Klasse 2 Minuten
Nebenbei: querySelector und warum er nützlich ist 5 Minuten
Verbinden Sie die Taste 5 Minuten
Wurde eine Emotion gewählt? 3 Minuten
Außerdem: Kontrollkästchen 6 Minuten
isGif 4 Minuten
Außerdem: filter() 6 Minuten
Außerdem: filter() 2 5 Minuten
Finden von Übereinstimmungen mit .filter() 4 Minuten
Nur animierte GIFs 4 Minuten
Einführung von zwei wichtigen Funktionen 5 Minuten
Wenn es nur eine Katze gibt... 5 Minuten
Wenn es mehr als eine Katze gibt... 4 Minuten
renderCat() 5 Minuten
Schließen Sie das Modal 2 Minuten
Die Reihenfolge der Dinge 3 Minuten
Nebenbei: Element auswählen 7 Minuten
Rekapitulieren Sie 3 Minuten

In diesem Modul lernen Sie, wie Sie einen vollständig interaktiven Twitter-Klon ("Twimba") erstellen können, indem Sie mit DOM-Manipulation, Ereignisbehandlung, Datenattributen und bedingtem Rendering in JavaScript arbeiten.

Das ist alles enthalten

1 Aufgabe36 Plug-ins

1 Aufgabe Insgesamt 30 Minuten

Bau eines X-Klons Benotete Aufgabe 30 Minuten

36 Plug-ins Insgesamt 143 Minuten

Intro 5 Minuten
Importieren Sie die Daten 4 Minuten
Nebenbei: TextArea 3 Minuten
TextArea hinzufügen 4 Minuten
Tweet Boilerplate 3 Minuten
Tweet Boilerplate Herausforderung 4 Minuten
Außerdem: forEach() 5 Minuten
Verwenden Sie forEach, um das HTML zu erstellen 2 Minuten
Übertragen der Tweets in den Feed 4 Minuten
Nebenbei: CDN Font Awesome 6 Minuten
Tolle Icons hinzufügen 5 Minuten
Wie ein Tweet Teil 1: Erklärung 2 Minuten
Außerdem: Daten-Attribute 4 Minuten
Nebenbei: Data Attr JS und Herausforderung 6 Minuten
Nebenbei: Probleme bei der Benennung von Datenattributen 3 Minuten
Wie ein Tweet Teil 2: Datenattribute 2 Minuten
Wie ein Tweet Teil 3: eventListener 0 Minuten
Wie ein Tweet Teil 4: handleLikeClick() 4 Minuten
Wie ein Tweet Teil 5: das Objekt des Tweets finden 6 Minuten
Nebenbei: Kopieren von Objekten und Arrays 4 Minuten
Wie ein Tweet Teil 6: das Inkrement wiedergeben 1 Minute
Anders als ein Tweet 3 Minuten
Ein Boolesches umdrehen 2 Minuten
Retweet eines Tweets 8 Minuten
Nebenbei: CSS-Klassen bedingt rendern 7 Minuten
Einfärben der Icons 6 Minuten
Antworten 1: UUIDs von Tweets mit Antworten abrufen 3 Minuten
Antworten 2: HTML Zeichenfolge für Antworten und Hinzufügen zum übergeordneten div 6 Minuten
Antworten 3: Ausgeblendet umschalten 5 Minuten
Refactoring des Tweet-Buttons 4 Minuten
Nebenbei: UUID 7 Minuten
Erstellen Sie das neue Tweet-Objekt 4 Minuten
Einen neuen Tweet rendern 2 Minuten
UX-Korrekturen 5 Minuten
Rekapitulieren Sie 3 Minuten
Bereitstellung von Twimba 1 Minute

Erwerben Sie ein Karrierezertifikat.

Fügen Sie dieses Zeugnis Ihrem LinkedIn-Profil, Lebenslauf oder CV hinzu. Teilen Sie sie in Social Media und in Ihrer Leistungsbeurteilung.

Dozent

Tom Chant

Scrimba

11 Kurse 340.070 Lernende

von

Scrimba

Mehr von Softwareentwicklung entdecken

Packt
Modern JavaScript Tooling, Modules, and Backend Integration
Kurs
Scrimba
Advanced JavaScript 3: Objects, Collections, Functions
Kurs
Packt
Introduction to AJAX and Mini-Projects
Kurs
Packt
JavaScript Masterclass - Zero To Job Ready With 10 Projects
Spezialisierung

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Neue Karrieremöglichkeiten mit Coursera Plus

Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten

Mehr erfahren

Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.

Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online

Erkunden Sie die Abschlüsse

Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.

Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.

Mehr erfahren

Häufig gestellte Fragen

Um Zugang zu den Kursmaterialien und Aufgaben zu erhalten und um ein Zertifikat zu erwerben, müssen Sie die Zertifikatserfahrung erwerben, wenn Sie sich für einen Kurs anmelden. Sie können stattdessen eine kostenlose Testversion ausprobieren oder finanzielle Unterstützung beantragen. Der Kurs kann stattdessen die Option "Vollständiger Kurs, kein Zertifikat" anbieten. Mit dieser Option können Sie alle Kursmaterialien einsehen, die erforderlichen Bewertungen abgeben und eine Abschlussnote erhalten. Dies bedeutet auch, dass Sie kein Zertifikat erwerben können.

Wenn Sie sich für den Kurs einschreiben, erhalten Sie Zugang zu allen Kursen der Spezialisierung, und Sie erhalten ein Zertifikat, wenn Sie die Arbeit abgeschlossen haben. Ihr elektronisches Zertifikat wird Ihrer Seite "Leistungen" hinzugefügt - von dort aus können Sie Ihr Zertifikat ausdrucken oder Ihrem LinkedIn-Profil hinzufügen.

Ja. Für ausgewählte Lernprogramme können Sie eine finanzielle Unterstützung oder ein Stipendium beantragen, wenn Sie die Anmeldungsgebühr nicht aufbringen können. Wenn für das von Ihnen gewählte Lernprogramm eine finanzielle Unterstützung oder ein Stipendium verfügbar ist, finden Sie auf der Beschreibungsseite einen Link zum Antragsformular.