Mini-Projekte in JavaScript erstellen

Sichern Sie sich eines unserer besten Angebote mit Coursera Plus für 199 $ (normalerweise 399 $). Jetzt sparen.

Mini-Projekte in JavaScript erstellen

Dieser Kurs ist Teil mehrerer Programme.

Dozent: Tom Chant

Bei enthalten

Mehr erfahren

Fragen Sie Coursera

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: Daten importieren/exportieren
Kategorie: Benutzeroberfläche (UI)
Kategorie: Interaktives Design
Kategorie: Leitlinien für die Zugänglichkeit von Webinhalten
Kategorie: Web-Entwicklung
Kategorie: Ereignisgesteuerte Programmierung
Kategorie: Validierung von Daten
Kategorie: Datenverwaltung
Kategorie: Daten-Mapping
Kategorie: Javascript
Kategorie: Rechnerische Logik

Werkzeuge, die Sie lernen werden

Kategorie: Web-Anwendungen

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 AufgabeInsgesamt 30 Minuten

JavaScript-Grundlagen-Quiz30 Minuten

49 Plug-insInsgesamt 201 Minuten

Einführung in Mini-Projekte1 Minute
Willkommen zum interaktiven Unterricht!1 Minute
Objekt Destrukturierung3 Minuten
Objekt Destrukturierung Herausforderung2 Minuten
Die Methode .map()7 Minuten
Die .map()-Methode Herausforderung4 Minuten
Die Methode .join()3 Minuten
Die Herausforderung der Methode .join()2 Minuten
.map() vs .forEach()5 Minuten
For-Schleife Break und Continue5 Minuten
Die Gefahren von innerHTML5 Minuten
Jenseits von Funktionsdeklarationen 1: Funktionsausdrücke3 Minuten
Jenseits von Funktionsdeklarationen 2: Herausforderung Funktionsausdruck2 Minuten
Jenseits von Funktionsdeklarationen 3: Pfeilfunktionen6 Minuten
Herausforderung Pfeilfunktionen4 Minuten
Inline-Pfeilfunktionen Herausforderung2 Minuten
Import Export (benannt)4 Minuten
Importieren Exportieren (Standard)4 Minuten
Die Methode .reduce()6 Minuten
Die .reduce() Methode Herausforderung4 Minuten
Die Methode .reduce() mit Objekten8 Minuten
Die Methode .reduce() mit Objekten Herausforderung3 Minuten
Standard-Parameter3 Minuten
Super-Challenge-Einrichtung3 Minuten
Super Challenge Lösung9 Minuten
Der Ternäre Operator4 Minuten
Der ternäre Operator für komplexe Konditionale3 Minuten
Ternärer Operator Herausforderung4 Minuten
Twimba Ternary Refactor5 Minuten
Der Rest-Parameter5 Minuten
Die Herausforderung der Rest-Parameter7 Minuten
Ausbreitung Syntax (...)4 Minuten
Spread Syntax (...) Herausforderung5 Minuten
Kurzschaltung mit ODER (||)5 Minuten
Kurzschließen mit OR (||) Herausforderung2 Minuten
Kurzschließen mit AND (&&)3 Minuten
Kurzschließen mit AND (&&) Herausforderung4 Minuten
Anweisungen wechseln5 Minuten
Konstrukteure: Date()5 Minuten
Der Error()-Konstruktor3 Minuten
Objekte mit Methoden und 'this'5 Minuten
Objekte zu Konstruktorfunktionen5 Minuten
Herausforderung Konstruktorfunktion5 Minuten
Konstruktorfunktionen zu Klassen5 Minuten
Konstruktorfunktionen zu Klassen Herausforderung2 Minuten
Debugging: Fehler (neu)7 Minuten
Debugging: console.error2 Minuten
Debugging: try...catch5 Minuten
Rekapitulation2 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 AufgabeInsgesamt 80 Minuten

Einen lästigen Cookie mit Zustimmung erstellen Benotete Aufgabe80 Minuten

31 Plug-insInsgesamt 111 Minuten

Cookie-Zustimmung Intro3 Minuten
Positionieren Sie das Modal3 Minuten
Außerdem: setTimeout4 Minuten
Den Timer einstellen2 Minuten
Außerdem: element.style6 Minuten
Wiedererscheinen lassen des Modals2 Minuten
Schließen Sie das Modal3 Minuten
Abgesehen davon: Formulare7 Minuten
Ein Formular hinzufügen 12 Minuten
Nebenbei: Formulare - Einreichung5 Minuten
Nebenbei: Formulare - Herausforderung3 Minuten
Nebenbei: Validierungs-Attribute8 Minuten
Das Formular abschicken3 Minuten
Aside: preventDefault4 Minuten
preventDefault Herausforderung3 Minuten
Schaltflächen in Formularen - seltsames Verhalten3 Minuten
Modale Nachricht hinzufügen2 Minuten
Modale Meldungen hinzufügen 26 Minuten
Modale Meldungen hinzufügen 33 Minuten
Nebenbei: FormData4 Minuten
Formular Daten 12 Minuten
Daneben: FormData-Methoden3 Minuten
Formular Daten 23 Minuten
Nebenbei: Deaktivieren von Elementen6 Minuten
Deaktivieren Sie die Schaltfläche "Schließen3 Minuten
Es gibt keine Wahl 14 Minuten
Außerdem: classlist.toggle4 Minuten
Nebenbei: Klassenliste Toggle Challenge3 Minuten
Es gibt keine Wahl 23 Minuten
Fragen der Zugänglichkeit2 Minuten
Rekapitulation2 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 AufgabeInsgesamt 30 Minuten

Erstellen eines Meme-Pickers Benotete Zuweisung30 Minuten

37 Plug-insInsgesamt 166 Minuten

Intro4 Minuten
Was für eine schreckliche for-Schleife3 Minuten
Übrigens: für von5 Minuten
Verwenden Sie ein für von2 Minuten
Nest die für von5 Minuten
Die Emotionen wiedergeben 14 Minuten
Emotionen rausspielen 26 Minuten
Außerdem: Import der Daten6 Minuten
Importieren Sie die Daten2 Minuten
Nebenbei: Radio-Eingänge6 Minuten
Rendering der Radiosignale6 Minuten
Außerdem: .includes()6 Minuten
duplikate entfernen3 Minuten
Übrigens: e.target6 Minuten
Abrufen der ID der angeklickten Option3 Minuten
Außerdem: parentElement3 Minuten
Außerdem: Klassenliste hinzufügen/entfernen7 Minuten
Farbe zur ausgewählten Emotion hinzufügen6 Minuten
Außerdem: getElementsByClassName5 Minuten
Entfernen Sie die Highlight-Klasse2 Minuten
Nebenbei: querySelector und warum er nützlich ist5 Minuten
Verbinden Sie die Taste5 Minuten
Wurde eine Emotion gewählt?3 Minuten
Außerdem: Kontrollkästchen6 Minuten
isGif4 Minuten
Außerdem: filter()6 Minuten
Außerdem: filter() 25 Minuten
Finden von Übereinstimmungen mit .filter()4 Minuten
Nur animierte GIFs4 Minuten
Einführung von zwei wichtigen Funktionen5 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 Modal2 Minuten
Die Reihenfolge der Dinge3 Minuten
Nebenbei: Element auswählen7 Minuten
Rekapitulation3 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 AufgabeInsgesamt 30 Minuten

Bau eines X-Klons Benotete Aufgabe30 Minuten

36 Plug-insInsgesamt 143 Minuten

Intro5 Minuten
Importieren Sie die Daten4 Minuten
Nebenbei: TextArea3 Minuten
TextArea hinzufügen4 Minuten
Tweet Boilerplate3 Minuten
Tweet Boilerplate Herausforderung4 Minuten
Außerdem: forEach()5 Minuten
Verwenden Sie forEach, um das HTML zu erstellen2 Minuten
Übertragen der Tweets in den Feed4 Minuten
Nebenbei: CDN Font Awesome6 Minuten
Tolle Icons hinzufügen5 Minuten
Wie ein Tweet Teil 1: Erklärung2 Minuten
Außerdem: Daten-Attribute4 Minuten
Nebenbei: Data Attr JS und Herausforderung6 Minuten
Nebenbei: Probleme bei der Benennung von Datenattributen3 Minuten
Wie ein Tweet Teil 2: Datenattribute2 Minuten
Wie ein Tweet Teil 3: eventListener0 Minuten
Wie ein Tweet Teil 4: handleLikeClick()4 Minuten
Wie ein Tweet Teil 5: das Objekt des Tweets finden6 Minuten
Nebenbei: Kopieren von Objekten und Arrays4 Minuten
Wie ein Tweet Teil 6: das Inkrement wiedergeben1 Minute
Anders als ein Tweet3 Minuten
Ein Boolesches umdrehen2 Minuten
Retweet eines Tweets8 Minuten
Nebenbei: CSS-Klassen bedingt rendern7 Minuten
Einfärben der Icons6 Minuten
Antworten 1: UUIDs von Tweets mit Antworten abrufen3 Minuten
Antworten 2: HTML Zeichenfolge für Antworten und Hinzufügen zum übergeordneten div6 Minuten
Antworten 3: Ausgeblendet umschalten5 Minuten
Refactoring des Tweet-Buttons4 Minuten
Nebenbei: UUID7 Minuten
Erstellen Sie das neue Tweet-Objekt4 Minuten
Einen neuen Tweet rendern2 Minuten
UX-Korrekturen5 Minuten
Rekapitulation3 Minuten
Bereitstellung von Twimba1 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 Kurse459.836 Lernende

von

Scrimba

Mehr von Software-Entwicklung entdecken

Status: Kostenloser Testzeitraum
Packt
Modern JavaScript Tooling, Modules, and Backend Integration
Kurs
Status: Kostenloser Testzeitraum
Scrimba
Advanced JavaScript 3: Objects, Collections, Functions
Kurs
Status: Kostenloser Testzeitraum
Packt
Introduction to AJAX and Mini-Projects
Kurs
Status: Vorschau
EDUCBA
Build and Implement JavaScript ToDo Applications
Kurs

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

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 finanzielle Unterstützung oder ein Stipendium beantragen, wenn Sie die Einschreibegebü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 zur Beantragung.