Lecture07

rudi.schraml

5/5/2025

Transcript

00:00:00willkommen zum siebten kurstermin diese woche wie angekündigt virtuell und hauptziel ist dass

00:00:09man gemeinsam in das neue assignment einsteigen und noch mal paar dinge besprechen die wichtig

00:00:15sind für das umsetzen von diesem assignment die kurswebseite ist schon abgedatet 2. mai heute und

00:00:25ihr findet beim 29 4 für diese woche da die die seite für den heutigen termin wo ich mir alles

00:00:36kurz zusammengefasst habe wichtig fürs assignment sind die dinge die mehr oder weniger im lecture

00:00:4905 und lecture 06 besprochen haben also wie man das document object model quasi bearbeitet und wie

00:00:59man für dies klassen verwendet und immer für die klassen event händler dekoriert callback funktions

00:01:09definiert das haben wir uns bei dem converter beispiel angeschaut ich hab das im assignment

00:01:14nochmal genau zusammengeschrieben und letztes mal vor die osterferien haben wir uns gemeinsam

00:01:20angeschaut wie man zwischen zwei klassen quasi kommunizieren kann für dies quasi gibt es das

00:01:27beispiel und ich habe das damals glaube ich schon erwähnt es ist mehr oder weniger eine blaupause für

00:01:35das jetzige assignment sehr umfangreich das heißt die deadline ist sehr bewusst gewählt mit 20.05 also

00:01:46ob heute mehr oder weniger 18 tage zeit wobei wir sicher dann nächsten dienstag noch mal kurz zeit

00:01:55dafür verwenden werden und auch dann am 13.05 auch noch mehr zeit haben dass wir gewisse dinge klären uns

00:02:03fehlt nur ein teil dem er nächste woche besprechen lässt also css die styling von webseiten bei instieg

00:02:10damit der task 4 von diesem assignment dann für euch gelöst werden kann diese segment 05 ist verlinkt und

00:02:21ist jetzt quasi auch eine neue referenz auf der webseite verfügbar dass spezifisch die befehle für

00:02:29das manipulieren vom document object model im browser über javascript zusammenfasst die

00:02:37wesentlichen dinge also wir sind mit 05 deadline 20.05 das ist dann am kalender schaut der dienstag noch

00:02:52unseren kurstermin am abend bitte bis dahin hätte ich gern dass es jeder umsetzt die segment 04 haben

00:03:00jetzt richtig lange phase gehabt wo das möglich war das zu machen sollte jetzt jeder gemacht haben

00:03:05schon langsam wird es ein bisschen anspruchsvoller wir schauen trotzdem dass wir probieren dass wir alle

00:03:11im boot behalten und dass das jeder irgendwie schaffen sollte damit zusammengefasst aufbauend auf die beiden

00:03:21letzten kurstermine dieses assignment kurz hinschreiben niemals in der html benutzen da haben wir quasi die textmethode

00:03:33text content verwendet gibt es einfach probleme mit inner html sicherheitsrisiken und das war letztes mal wo man diese liste

00:03:41gehabt haben und listen items hinzugefügt haben mit der erweiterung mit so löschbuttons ich hoffe ihr könnt euch noch daran erinnern

00:03:51also diese callback function haben wir da erklärt beide die die code beispiele die was ich dann im kurs vorprogrammiert habe die sind da

00:04:02aus zip datei verlinkt schaut es dann einmal nach wie wir das gemacht haben das ist ganz wichtig

00:04:08so und ab diesem assignment jetzt bin ich sehr streng was das was die selbstständigkeit betrifft diese collaboration guidelines

00:04:21die habe ich erfunden ich habe auch nicht diese assignments erfunden und auch nicht die slides aber ich finde wie das gemacht ist

00:04:29ist sehr schlüssig und sehr wertvoll und vor allem was ich wertvoll finde sind diese collaboration guidelines

00:04:36und ich erwarte dass sich das jeder durchschaut und auch berücksichtigt also wenn das irgendwer von

00:04:42jemandem kopiert oder gemeinsam macht oder KI verwendet und das nicht zitiert dann gibt es sehr massive punkte abzüge

00:04:51das sind quasi diese guidelines es gibt quasi die hilfestellung die es erlaubt und keine erwähnung in

00:05:04code verwendet also können sie jederzeit mit einem kommentar irgendwo was anmerken und für mich

00:05:10lesbar machen damit ich weiß wo ihr das her habt natürlich ist es erlaubt dass ihr auf

00:05:20irgendwelche dokuseiten quasi code anschaut und auf basis für den code weiter programmiert aber

00:05:26das selber machen nicht mit anderen und auch nicht raus zu kopieren und die gröbsten dinge sind was nicht erlaubt

00:05:38ist antworten oder code von anderen kopieren den code von anderen durchlesen und dann auf basis dessen was man sich

00:05:47angeschaut hat oder schicken lassen und auf basis dessen dann das selber ausprogrammieren

00:05:53schon mal gut wenn man irgendein problem hat und dann vielleicht einmal kurz gefragt wie hast du das gemacht

00:05:59das ist aber weniger wie wenn man den code vom anderen durch schaut und dann genauso programmiert wie der

00:06:07das ist wie eine kopie von den

00:06:11ja KI ist auch ein Thema natürlich also KI generierter code ist nicht sinnvoll bei dem assignment

00:06:19ihr sollt es selber programmieren und das ist meine Hauptaufgabe quasi als Kursleiter sicherzustellen dass ihr selber

00:06:25programmiert und dabei was lernt also KI ist natürlich ein nützliches werkzeug und ihr werdet später auch KI verwenden

00:06:31ich verwende jetzt KI aber jetzt für so einen Grundlagenkurs da geht es darum

00:06:35dass man richtig selber mal einen Code ausprogrammiert damit man die Konzepte die was dahinter steckt

00:06:40vielleicht ein bisschen verinnerlicht und dann auch KI generierten Code besser verstehen kann

00:06:45ja gemeinsam programmieren ist nicht erlaubt und natürlich wenn ich sehe dass es unter einem Code austauscht

00:06:56ist der der was den Code zur Verfügung steht hat genauso ist es genauso nicht erlaubt wie wenn man den Code

00:07:02von einem anderen weiterverwendet

00:07:04lest euch das bitte durch

00:07:06steht da

00:07:08und berücksichtigt das

00:07:10mir ist jetzt ganz wichtig

00:07:12dass

00:07:14ihr das anhaltet

00:07:16bitte

00:07:20so stellen wir mal das mit der KI

00:07:22KI generierter Code ist nicht erlaubt

00:07:24also

00:07:26bitte nicht verwenden

00:07:28selber programmieren

00:07:30man kann sich vielleicht einmal anschauen wie eine KI was programmiert aber

00:07:34ist jetzt in dem Kontext auch nicht so sinnvoll

00:07:40also bitte

00:07:44berücksichtigen

00:07:46Ziel von diesem Assignment ist dass wir ein sogenanntes Taskboard erstellen

00:07:52wo man quasi drei Spalten hat

00:07:54wo man Aufgaben

00:07:58kategorisiert

00:08:00und wir sollten das quasi umsetzen

00:08:04für uns jetzt heute sind die Programmierteile das wichtigste

00:08:08wir werden zwar ein bisschen was layoutieren

00:08:12im vierten Task

00:08:14aber das ist nicht der Hauptpunkt in dem Assignment

00:08:16das kommt dann in Teil 2 noch

00:08:18wenn wir fertig sind

00:08:20wenn wir fertig sind

00:08:22sollte das jetzt irgendwie

00:08:24in dem Screenshot dargestellt

00:08:26ausschauen

00:08:28man sieht jetzt schon vom layout her

00:08:30nicht sehr anspruchsvoll

00:08:32aber jetzt von der Logik

00:08:34die was im Hintergrund mitprogrammiert werden muss

00:08:36ist ja schon einiges zum umsetzen

00:08:38wir haben drei Spalten

00:08:40bei uns sind das jetzt quasi untereinander angeordnet

00:08:42weil das machen wir dann erst im zweiten Schritt

00:08:44wenn wir die CSS Grundloggen gelernt haben

00:08:48jeder Task hat eine Überschrift

00:08:50eine Kategorie

00:08:52To-Do, Doing und Done

00:08:54und Text

00:08:56und jeden Task kann man quasi manipulieren, verschieben, löschen oder editieren

00:09:00oben ist dann quasi die Box

00:09:04wo man ein Task hinzufügen kann

00:09:06genau

00:09:08alles was hier zum Schnelldurchlaufen dazu ist

00:09:10dann natürlich sehr detailliert beschrieben für euch

00:09:14für euch der erste Schritt ist jetzt bitte

00:09:18dass ihr das Assignment von Github Classroom runterladet

00:09:24im Visual Studio Code

00:09:26öffnet es

00:09:28und

00:09:30dann die

00:09:32benötigten

00:09:34Bibliotheken installiert

00:09:36wenn ihr das Assignment dann runtergeladen habt

00:09:48wie immer

00:09:50öffnen in Visual Studio Code

00:09:52und

00:09:54mit

00:09:56npm install

00:09:58die benötigten

00:10:02Pakete noch installieren

00:10:04und

00:10:10im zweiten Schritt

00:10:24können wir dann das Projekt

00:10:26mit

00:10:28npm

00:10:30start

00:10:32den Server starten

00:10:34und das Projekt quasi

00:10:36öffnen

00:10:38so

00:10:40das Projekt läuft jetzt

00:10:42Localhost

00:10:44Port

00:10:461930

00:10:48Steuerung

00:10:50Maustaste

00:10:52und wir können es öffnen

00:10:54sehen

00:10:56jetzt sieht man da

00:10:58das ist das Grundgerüst

00:11:00ist für euch schon vorbereitet

00:11:02wir haben

00:11:04wir haben

00:11:06die drei Kategorien

00:11:08und haben da oben

00:11:10einen Titel

00:11:12den was wir eingeben wollen

00:11:14eine Farbe

00:11:16und dann wenn wir auf Add drucken

00:11:18dann sollte es da unten eingefügt werden

00:11:20das ist

00:11:22an die letzte Einheit

00:11:24da haben wir genau sowas gemacht

00:11:26also wir haben

00:11:28einen Add-Button gehabt

00:11:30wir haben Items mit Beschreibung gehabt

00:11:32und haben die hinzugefügt zu einer Liste

00:11:34und das sind zwar drei Listen

00:11:36aber das ist so ähnlich

00:11:38drei Kategorien

00:11:40im Public Follow drinnen

00:11:42sind die vorbereiteten

00:11:44Dateien

00:11:45ihr kennt das mittlerweile schon

00:11:46Index

00:11:47was wir uns gerade angeschaut haben

00:11:49und

00:11:50ich erkläre ganz kurz noch was

00:11:52es gibt einen Teil

00:11:56den habt ihr so vielleicht noch nicht gesehen

00:12:04und zwar das ist da unten

00:12:06ob Zeile 38

00:12:08da steht

00:12:09Template Card

00:12:10to be cloned in Javascript

00:12:12also den Text da

00:12:14Artikel Class

00:12:15Template Card

00:12:16wir besprechen das dann nächsten Dienstag nochmal

00:12:18wenn wir jetzt zurückschauen

00:12:20auf unsere Seiten

00:12:22man sieht das da nicht

00:12:24ist jetzt Absicht

00:12:25ist nämlich ein Teil

00:12:26dem was wir

00:12:28duplizieren wollen

00:12:29und jetzt wenn wir

00:12:30einen neuen Task hinzufügen

00:12:32ist das unser

00:12:34Grundgerüst

00:12:35duplizieren

00:12:36und dann aus neuen Task

00:12:37einfügen

00:12:38deswegen ist das da

00:12:39und

00:12:40man sieht jetzt eine Klasse

00:12:42die Klasse

00:12:43ist Template Card

00:12:44und

00:12:45ab nächster Woche reden wir

00:12:47über das layoutieren

00:12:48und

00:12:49wenn wir uns jetzt

00:12:50dieses Style Sheet anschauen

00:12:52ist das jetzt noch sehr

00:12:54sehr leer

00:12:55der To-Do-Tite ist da

00:12:56wo es irgendwo rein sollt

00:12:58auf alle Fälle

00:12:59haben wir da

00:13:00ein Klasse Template

00:13:01und eine Klasse Hidden

00:13:03und auf diese beiden Klassen

00:13:05gibt es eine Eigenschaft

00:13:06da steht Display None

00:13:08also wenn wir darüber vor

00:13:09dieser Beschreibung da

00:13:10dass

00:13:12es einfach nicht dargestellt wird

00:13:13es ist zwar da

00:13:14aber der Browser

00:13:16steht es nicht da

00:13:17also wir haben

00:13:18Klasse Template

00:13:20Abstand K

00:13:21das sind zwei Klassen

00:13:22diese

00:13:24dieser Artikel

00:13:27hat quasi

00:13:28Klasse Template

00:13:29damit man es gerade nicht sieht

00:13:30wenn man das wegnehmen würde

00:13:32dann würde man es sehen

00:13:33und es hat nochmal die Klasse Card

00:13:34aber

00:13:35das besprechen wir dann ab

00:13:36nächster Woche

00:13:37ein bisschen mehr

00:13:38dann haben wir die drei

00:13:39Editier Button

00:13:40also die drei Buttons

00:13:41zum

00:13:42zum modifizieren

00:13:43wo wir es verschirmen wollen

00:13:44löschen wollen

00:13:45oder editieren wollen

00:13:46also wenn wir auf anfangen

00:13:47die Buttons klicken

00:13:48das ist dann quasi Task

00:13:53zwei, drei

00:13:55wo wir dann

00:13:56wenn man einen bestehenden Task hat

00:13:57wo wir den verändern können

00:14:00mit Icons und so weiter

00:14:05in der Index Datei

00:14:07ich habe das schon öfter erklärt

00:14:09und da sieht man es jetzt

00:14:10ein bisschen klarer einmal

00:14:11wir haben

00:14:13unser

00:14:14Index

00:14:15ist quasi die

00:14:16die

00:14:17die Einsprung Datei

00:14:18für den ganzen

00:14:19Javascript Code

00:14:20und da drinnen

00:14:21werden quasi die ganzen

00:14:22Importe

00:14:23organisiert

00:14:25das heißt

00:14:26den Index

00:14:27HTML drinnen

00:14:28wo wir ganz oben

00:14:29im Code schauen

00:14:30wird genau

00:14:31eine Javascript Datei

00:14:32importiert

00:14:33und die erledigt für uns

00:14:35das Importieren

00:14:36von allen anderen

00:14:37Javascript

00:14:38Code Teile

00:14:39die was relevant sind

00:14:40für

00:14:41die aktuelle Seite

00:14:43also Index.js

00:14:45Einsprung

00:14:46ist ein Modul

00:14:47da drinnen

00:14:51importieren wir dann

00:14:52von der

00:14:54App.js

00:14:56die App

00:14:57das ist quasi

00:14:58unsere

00:14:59Klasse

00:15:01die die Logik

00:15:02organisiert

00:15:03für das Taskboard

00:15:05und was wir dann

00:15:06dann

00:15:07das habe ich mir erklärt

00:15:08am Anfang

00:15:09eine Funktion

00:15:10schon öfter

00:15:11gesagt

00:15:12Funktionen

00:15:13kann man meistens mit einer

00:15:14Konstante deklarieren

00:15:15weil die sollten sich

00:15:16eigentlich nicht ändern

00:15:17deswegen kann man es

00:15:18als Konstanten deklarieren

00:15:19da drinnen

00:15:20wird einfach eine neue

00:15:21App

00:15:22instanziert

00:15:23und dann werden

00:15:25dort

00:15:26zur Veranschaulichung

00:15:27werden

00:15:28drei

00:15:29sichern

00:15:30Karten

00:15:32also zwei sichern

00:15:33Karten hinzugefügt

00:15:34App

00:15:36add card

00:15:37doing

00:15:38red

00:15:39glass

00:15:40und die Form

00:15:41und da unten

00:15:42wird dann

00:15:43von einer Karte

00:15:44noch

00:15:45die description

00:15:46verändert

00:15:47also ein bisschen

00:15:48eine Code ist

00:15:49schon vorgefügt

00:15:50und momentan

00:15:51ist es halt so

00:15:52dass da drinnen

00:15:53noch nichts passiert

00:15:54also wenn man jetzt

00:15:55auf App.js schaut

00:15:56dann haben wir

00:15:57da jetzt

00:15:58ich habe gesagt

00:15:59von denen wird jetzt

00:16:00eine Instanz

00:16:01erzeugt

00:16:02beim Start

00:16:03beim Aufruf

00:16:05von der Index.html

00:16:06aber da drinnen

00:16:07ist noch alles leer

00:16:08wir haben jetzt

00:16:09dieses add card

00:16:10das heißt es gibt keinen Fehler

00:16:11wenn es aufgerufen wird

00:16:12aber es passiert auch nichts

00:16:13weil da drinnen

00:16:14nichts steht

00:16:15also unsere Aufgabe

00:16:16und von der

00:16:17Grundstruktur

00:16:18ist es jetzt schon so

00:16:19gemacht

00:16:20wie wir es in den Lectures

00:16:21besprochen haben

00:16:22bei card drinnen

00:16:24haben wir noch

00:16:26schon vorgefertigte

00:16:28Funktionen

00:16:30für einzelne Instanz

00:16:32von so einem Task

00:16:34das heißt wir haben

00:16:35einen Titel

00:16:36und eine Farbe

00:16:37wenn wir eine neue

00:16:38Instanz erzeugen

00:16:39wir wollen es

00:16:40zu einer gewissen

00:16:41Spalte verschieben

00:16:42bei uns sind jetzt

00:16:43vertikal angeordnet

00:16:45und

00:16:46seht die Description

00:16:47da ist schon die Variable

00:16:48drinnen

00:16:49der Parameter

00:16:50aber es passiert nichts

00:16:51also kurz nochmal zurück

00:16:53wenn man jetzt

00:16:55in index.js nachschaut

00:16:56wird da die App

00:16:57instanziert

00:16:58es werden ein paar

00:16:59Funktionsaufrufe gemacht

00:17:01aber die Funktionen

00:17:02sind derweil

00:17:03noch leer

00:17:04sobald wir das mit

00:17:05Leben befüllen anfangen

00:17:06sobald es auch

00:17:07ein bisschen Leben

00:17:08auf der

00:17:09Indexseite

00:17:10sichtbar sein

00:17:11also man kann dann

00:17:13quasi da drinnen

00:17:14wenn es sich so weit

00:17:15sind

00:17:16schreibt es ein bisschen

00:17:17um

00:17:18und fügt ein paar

00:17:19eigene Tasks ein

00:17:20damit man das nicht

00:17:21immer wieder

00:17:22rein machen muss

00:17:23wenn man die Seite

00:17:24neu lädt

00:17:25quasi wie das Handy

00:17:27schein tippen

00:17:28für irgendwelche

00:17:29Eingaben

00:17:30damit man es nicht mehr

00:17:31macht

00:17:32dann machen wir es

00:17:33programmiert man es

00:17:34da quasi aus

00:17:37ok

00:17:38schauen wir nochmal zurück

00:17:39zu unserem

00:17:40assignment

00:17:41zur Aufgabenstellung

00:17:48erste Aufgabe

00:17:49wir haben das jetzt

00:17:50schon kurz durchgeschaut

00:17:51gemeinsam

00:17:52damit wir das ein bisschen

00:17:53verstehen haben

00:17:54quasi unser Index

00:17:56HTML-File

00:17:57und unser Index

00:17:58JavaScript-File

00:17:59im Index

00:18:00JavaScript-File

00:18:01wird die

00:18:02App importiert

00:18:03eine Instanz

00:18:04erzeugt

00:18:05es werden jetzt

00:18:06auch schon

00:18:07einzelne Karten

00:18:08erzeugt

00:18:09aber

00:18:10der Code

00:18:13ist noch nicht

00:18:14so ausprogrammiert

00:18:15dass das dann

00:18:16im Document-Object-Model

00:18:17hinzugefügt wird

00:18:19wenn wir jetzt

00:18:22bei App

00:18:23jetzt können wir schon

00:18:24ein bisschen rein

00:18:25Add Card

00:18:26aufrufen

00:18:27sowie

00:18:28in

00:18:30Index.js

00:18:33Zeile 7

00:18:34da wird jetzt

00:18:35mit

00:18:36die drei

00:18:37Argumente

00:18:38eine neue Karte

00:18:39erzeugt werden

00:18:40dann

00:18:42dann

00:18:43sollt

00:18:44eine neue Karte

00:18:45erzeugt werden

00:18:46und

00:18:47hinzugefügt werden

00:18:49und

00:18:50zwar

00:18:51wohin

00:18:52da vorne

00:18:53das erste ist die Spalte

00:18:54entweder

00:18:55zu

00:18:56zu

00:18:57zu

00:18:58doing

00:18:59oder zu dann

00:19:00drei Möglichkeiten

00:19:01haben wir da

00:19:02und

00:19:04wenn das fertig ist

00:19:06wird eine Instanz

00:19:07zurückliefert

00:19:08ganz wichtig für uns

00:19:09also Add Card liefert

00:19:10am Ende eine Instanz

00:19:11zurück

00:19:12wenn wir uns

00:19:14Card anschauen

00:19:15da drinnen haben wir den

00:19:16Konstruktor

00:19:17die sind schon so ausprogrammiert

00:19:18und da ist

00:19:19quasi die Beschreibung

00:19:20wo es passiert wird

00:19:21also wenn wir jetzt

00:19:22über Add Card

00:19:23eine neue Instanz

00:19:24von einer Card

00:19:25also von Task

00:19:26oder von einer Card erzeugen

00:19:27sollte man mit

00:19:29der Farbe

00:19:30und mit dem Titel

00:19:31eine neue Karte erzeugen

00:19:32am Anfang ist der

00:19:34Text

00:19:35die Description leer

00:19:36die muss man dann

00:19:37nachher händisch

00:19:40noch einmal ändern

00:19:41mit Edit

00:19:42Add to Call

00:19:43da fügen wir es dann

00:19:44hinzu

00:19:49da kommen wir dann quasi zu dem

00:19:50was wir in

00:19:52Lecture

00:19:556 gelernt haben

00:19:56diese Interglas

00:19:58Kommunikation

00:19:59die wird erschlagend werden

00:20:00man sieht

00:20:01die Description

00:20:02das bezieht sich wieder

00:20:03auf

00:20:04auf

00:20:05die Instanz

00:20:06von der Karte selber

00:20:07also man sieht das schon

00:20:08das erzeugte

00:20:09Instanz Konstruktor

00:20:10wenn wir es dann

00:20:11zu einer gewissen

00:20:12Spalte hinzufügen

00:20:13wollen

00:20:14oder verschirmen

00:20:15dann brauchen wir

00:20:16irgendwie

00:20:17die Möglichkeit

00:20:19dass wir wieder zurück

00:20:20auf unsere App

00:20:21referenzieren

00:20:22da drinnen ist der

00:20:23Mover

00:20:24und der Mover

00:20:25Element

00:20:26das Bindeglied

00:20:27zwischen

00:20:28Card

00:20:29und App

00:20:30sein

00:20:31zu dem

00:20:32kommen wir dann

00:20:37was ihr jetzt machen müsst

00:20:39das sind dann immer die

00:20:40Deliverables

00:20:41da oben ist ein bisschen beschrieben

00:20:42um was das geht

00:20:43und was jede Funktion

00:20:44so machen sollte

00:20:45und

00:20:46da drinnen

00:20:48ist jetzt genau beschrieben

00:20:50was ihr macht

00:20:51und wie sie es auch macht

00:20:53also wenn man neue Karten erzeugt

00:20:55dann sollte man unten das

00:20:57Template

00:20:58duplizieren

00:20:59wir sollten

00:21:01Titel

00:21:02und Background

00:21:03Farb setzen

00:21:08wir sollten

00:21:09den

00:21:10Description auf

00:21:11No Description setzen

00:21:12weil das ist am Anfang leer

00:21:13und das sollte am

00:21:15Ende

00:21:16hinzugefügt werden

00:21:18die

00:21:19Description steht da

00:21:20wenn wir das aufrufen

00:21:21dann sollte der Text

00:21:22geändert werden

00:21:23und

00:21:24das Ganze

00:21:25so funktionieren

00:21:26dass wenn wir

00:21:27eh drucken

00:21:28dann startet der ganze

00:21:29Prozess

00:21:30von dem hinzufügen

00:21:32Aufbauend darauf

00:21:34findet ihr bei jedem Task

00:21:36dann nach

00:21:37dem Deliverable

00:21:38noch ein paar

00:21:40Hinweise

00:21:41zu den einzelnen

00:21:42Obleife

00:21:43wir schauen uns das gemeinsam

00:21:44beim

00:21:45Task 1

00:21:46den was wir jetzt fast

00:21:47komplett gemeinsam

00:21:48machen werden

00:21:49ein bisschen an

00:21:51und dann sollte eigentlich

00:21:52Task 2

00:21:53und Task 3

00:21:54für euch

00:21:55sehr gut machbar sein

00:21:56und Task 4

00:21:57mit dem Wissen

00:21:58das was wir dann

00:21:59in Lecture 08

00:22:00lernen werden

00:22:01sollte auch

00:22:02sehr einfach

00:22:03machbar sein

00:22:04also

00:22:05da ist keine Inniotik

00:22:06man kann das richtig

00:22:07selber mit

00:22:08ein bisschen ausprobieren

00:22:09lösen

00:22:10und

00:22:11den Code einfach

00:22:12anschreiben

00:22:13ein paar

00:22:14haben Sie mitgekriegt

00:22:15geben wir das Video

00:22:16jetzt schon zum dritten Mal auf

00:22:17und jetzt mal schaut die

00:22:18Lösung ein bisschen anders aus

00:22:19aber

00:22:20es hat immer noch funktioniert

00:22:21aber die Lösung ist auch

00:22:22jetzt mal ein bisschen anders

00:22:23nicht ganz gleich

00:22:25wir wechseln jetzt zurück

00:22:27zum

00:22:28Code

00:22:29zu unserem

00:22:30Grundgerüst

00:22:32das was ja schon

00:22:33verfügbar ist

00:22:34und probieren den Task 1

00:22:36also

00:22:37ausprogrammieren

00:22:38also Task 1

00:22:41wir haben da quasi

00:22:42unsere App

00:22:43und unsere Card

00:22:44und innerhalb von denen

00:22:46wollen wir jetzt

00:22:47programmieren

00:22:48dass wir neue Karten hinzufügen

00:22:49Schauen wir nochmal

00:22:50in Index.js

00:22:51das ist ja der Teil

00:22:52die was vom

00:22:53HTML-File eingebunden wird

00:22:55da drinnen haben wir schon

00:22:56ein bisschen Logik

00:22:57damit wir diese Karten

00:22:58nicht immer

00:22:59händisch erstellen müssen

00:23:00da werden drei Karten

00:23:02quasi erzeugt

00:23:04nachdem aber diese

00:23:05Klassen und Funktionen

00:23:07noch leer sind

00:23:08passiert da nichts

00:23:09und wir sollten die Logik

00:23:11jetzt ausprogrammieren

00:23:12auf Basis von der Anleitung

00:23:14grundsätzlich ist es so

00:23:17dass von App

00:23:18eine neue Instanz

00:23:19erzeugt wird

00:23:20und über Add Card

00:23:21diese neuen Karten

00:23:22erzeugt werden

00:23:23dann sieht man da

00:23:24dass dieses Add Card

00:23:25auch was zurückliefern

00:23:26sollt

00:23:27das heißt diese neue

00:23:28Instanz einer Karte

00:23:29die was dann da

00:23:30in einer Variable

00:23:31abgespeichert wird

00:23:32und wir haben da

00:23:33schon Aufruf von

00:23:34Set Description

00:23:35wo wir jetzt die Logik

00:23:37dazu programmieren

00:23:39das heißt wir wechseln

00:23:40einmal zur App

00:23:41JS

00:23:43da drinnen haben wir

00:23:44dieses Add Card

00:23:46dieses Add Card

00:23:48kriegt drei Parameter

00:23:50übergeben

00:23:53wie in die Funktionsaufrufe

00:23:54zum sehen ist

00:23:55drei Zeichenketen

00:23:57Column

00:23:58dann haben wir

00:23:59ein Title

00:24:00und ein Color

00:24:01mit dem sollten wir

00:24:02arbeiten

00:24:04jetzt schauen wir

00:24:05in der Beschreibung nach

00:24:06Add Card

00:24:08create a new Card

00:24:09Instance

00:24:10and add it to the board

00:24:11ok

00:24:12eine neue Instanz erzeugen

00:24:13die meiste Arbeit

00:24:15sollte

00:24:16aber in Card

00:24:17erledigt werden

00:24:18die Column

00:24:21wird spezifiziert

00:24:22über eine Zeichenkette

00:24:23to do

00:24:24doing or done

00:24:25und

00:24:27Title in Color

00:24:28sind auch Zeichenketten

00:24:29wichtig ist am Ende

00:24:30da wir die neue Instanz

00:24:31von der Karte

00:24:32zurückliefern

00:24:33ok

00:24:34eigentlich können wir

00:24:35dazu gar schon anfangen

00:24:36und zwar mit einer neuen

00:24:37Instanz

00:24:38einer Karte erzeugen

00:24:39und die Instanz

00:24:41am Ende

00:24:42zurückliefern

00:24:43auf die zwei Teile

00:24:44fokussieren wir

00:24:45jetzt nochmal

00:24:46Add to Column

00:24:48eine neue Instanz

00:24:53eine neue Instanz

00:24:55einer Karte erzeugen

00:24:56das heißt

00:24:57New Card

00:24:58ich bin in der falschen Klasse

00:25:03Entschuldigung

00:25:04in AppJs

00:25:07in AppJs

00:25:08Add Card

00:25:09dann sieht man oben

00:25:11die

00:25:12Card wird schon importiert

00:25:14das heißt wir können eine neue Instanz

00:25:19erzeugen

00:25:21erzeugen

00:25:22wie können wir eine neue Instanz erzeugen

00:25:28schauen wir nach

00:25:29wo es da möglich ist

00:25:31da wird uns eh geholfen

00:25:36und zwar das New Card benötigt

00:25:39im Konstruktor einen Titel und eine Farbe

00:25:42und da gehen wir einfach von oben

00:25:44Titel in Color weiter

00:25:47an

00:25:48den Konstruktor

00:25:49von der Klasse Card

00:25:51das darf man auch durchschleusen

00:25:54wir müssen uns das in der App-Klasse

00:25:56drumherum nicht merken

00:25:57in der Instanz

00:25:59also das wollen wir erzeugen

00:26:01und am Ende

00:26:02steht da

00:26:03wir sollten die Instanz zurückliefern

00:26:09New Card

00:26:12ist ein bisschen irreführend

00:26:14New Card

00:26:15und New Obstund Card

00:26:16so passt es jetzt

00:26:19so

00:26:22für uns jetzt

00:26:26eine neue Instanz erzeugt

00:26:28jetzt kümmern wir uns einmal um den Konstruktor

00:26:31in der Klasse CardJs

00:26:33im Konstruktor drinnen

00:26:36kriegen wir die Zeichenketen übergeben

00:26:39und ich neige immer dazu

00:26:41dass ich mir das

00:26:43was ich da beim Instanzieren kriege

00:26:45ein Merk innerhalb von der Instanz

00:26:48das heißt wir machen lokale Variablen

00:26:50mit den Werte

00:26:54die da übergeben werden

00:26:55jetzt

00:26:58schauen wir in der Aufgabe weiter

00:27:01die

00:27:03Delegieren

00:27:04das ist ein String

00:27:08Konstruktor in Card

00:27:10der

00:27:11Given Title in Color

00:27:12und die Card Description

00:27:15sollte

00:27:16empty sein

00:27:17gehen wir den Punkt weiter

00:27:23jetzt sehen wir an der Seite 2

00:27:24von CardJs

00:27:26das da drinnen steht

00:27:28NoDescription

00:27:29das ist der Standardwert

00:27:30und man dann auch jeder Karte

00:27:33die was wir neu erzeugen

00:27:35weiß man dann bei der Description

00:27:37ist gleich das was da oben

00:27:46in der Konstante abgelegt wird

00:27:48also Default mässig kann man dann immer stehen

00:27:51NoDescription

00:27:52und das sind auch die 3 Werte die was quasi ein Task ausmachen

00:27:58ein Titel

00:28:00eine Farbe

00:28:01und

00:28:02eine Beschreibung von dem Task

00:28:11so

00:28:12da drinnen

00:28:16ist ein Hinweis

00:28:18das ist ein guter Platz

00:28:19um die HTML Elemente

00:28:21für die Karten zu generieren

00:28:23zu dem kommen wir gleich

00:28:26für uns das Wichtige ist

00:28:28jetzt

00:28:29und wir sehen das in

00:28:30index.js

00:28:32wir übergeben da

00:28:34diese Werte

00:28:35und wenn wir

00:28:36AddCard ausführen

00:28:37hätten wir gern dass die

00:28:38Instanz erzeugt wird

00:28:39und

00:28:40dass sie dann ins

00:28:41Document Object Model

00:28:42richtig

00:28:43hinzugefügt wird

00:28:44die Frage ist

00:28:45was wird da hinzugefügt

00:28:47und

00:28:48da müssen wir ganz kurz

00:28:49in der Beschreibung ein bisschen

00:28:50durchschauen

00:28:51weil

00:28:53wenn wir

00:28:54über

00:28:59AddCard

00:29:00was hinzufügen

00:29:01dann

00:29:02steht dann da irgendwo

00:29:13zum Thema Template

00:29:15ich hoffe ich finde es

00:29:22oder auch nicht

00:29:26das kann es ein bisschen

00:29:29mithelfen

00:29:30also wenn man neue Karten erstellt

00:29:35über AddCard

00:29:36den App.js

00:29:37dann sollte man das

00:29:39Template aus dem index.html

00:29:42duplizieren

00:29:44und am Ende

00:29:45von der

00:29:46jeweiligen Spalten

00:29:47hinzufügen

00:29:49das ist quasi die

00:29:50Grundstrategie

00:29:51und unten

00:29:52bei den

00:29:53Tipps

00:29:54da steht dann drinnen

00:29:55dass

00:29:56man

00:29:57relevante

00:29:59Funktionen

00:30:00in der Referenz

00:30:01anschauen sollte

00:30:02und für uns

00:30:03jetzt war wichtig

00:30:04das Clone-Node

00:30:05zu dem

00:30:06kommen wir gleich

00:30:07ich greife ein bisschen vor

00:30:08und es geht auch ein bisschen schneller

00:30:09wenn wir uns auf das Server arbeiten

00:30:10würden

00:30:11aber das Clone-Node

00:30:13hilft uns

00:30:14dass wir ein gewisses

00:30:15Element suchen können

00:30:17im

00:30:18HTML-Gerüst

00:30:19und das dann

00:30:20duplizieren können

00:30:22eine

00:30:23Kopie davon erstellen können

00:30:24jetzt schauen wir noch

00:30:26in unserem HTML

00:30:28haben wir ganz unten

00:30:31so einen Blog

00:30:33Artikel

00:30:35mit einem Haufen

00:30:37Sub-Elemente

00:30:38und

00:30:39der Blog hat

00:30:42zwei Klassen

00:30:43und wir schauen dir jetzt ganz kurz

00:30:47in unser

00:30:48also wenn man die Seiten jetzt aufruft

00:30:50dann sollte euch eigentlich auffallen

00:30:58dass dieser Blog

00:31:00da nicht sichtbar ist

00:31:03der Blog ist aber trotzdem da

00:31:06also wenn ihr mit dem Inspektor dann

00:31:10das HTML-Grundgerüst durchschaut

00:31:12dann seht ihr da unten

00:31:15der Blog ist trotzdem da

00:31:17aber er ist grau

00:31:19wenn man draufdruckt

00:31:22sieht man die Klassen

00:31:23die was da

00:31:24oder die CSS-Regeln

00:31:25was drauf

00:31:26angewendet wurden

00:31:27und eine Regel ist

00:31:28von der Klasse

00:31:30Template

00:31:31gibt es ein Property

00:31:32Display

00:31:33auf None gesetzt

00:31:34das bewirkt

00:31:35dass das Ganze

00:31:36nicht taggestellt wird

00:31:37wenn man Display None

00:31:39deaktiviert

00:31:40händisch jetzt

00:31:41dann sieht man da unten

00:31:43diesen Template-Block

00:31:44wir lassen den drinnen

00:31:46und jetzt

00:31:47wenn wir neue Karten erstellen

00:31:48duplizieren wir den

00:31:50und fügen das dann quasi

00:31:51wieder neu ins

00:31:52Dokument-Object-Modeline

00:31:53da jetzt in der Beschreibung

00:31:57drinnen steht

00:31:58bei

00:32:03bei der

00:32:06Card

00:32:07steht da beim Konstruktor

00:32:09this is a good place

00:32:11to create

00:32:12the HTML Elements

00:32:13da drinnen

00:32:15sollte man

00:32:16das Template

00:32:18duplizieren

00:32:20und das Element

00:32:23quasi in dem Fall

00:32:24eine Variable zu erweisen

00:32:26und dann verändern

00:32:27das heißt

00:32:29wir gehen in unsere Karte

00:32:32ein

00:32:34und

00:32:36wir dann in den Schritt

00:32:39suchen wir

00:32:40Suche nach

00:32:42Template

00:32:44und

00:32:48Duplikat erstellen

00:32:50der erste Schritt

00:32:55so

00:32:57jetzt können wir schauen

00:32:58wie heißt

00:32:59dieses Template

00:33:00und zwar

00:33:03wir haben da

00:33:04einen Block

00:33:05mit der Klasse

00:33:07Template

00:33:08und mit der Klasse

00:33:10Card

00:33:11mit der Klasse

00:33:12Template

00:33:13und mit der Klasse Card

00:33:14jetzt können wir hergehen

00:33:20und können über

00:33:21Document

00:33:28Punkt

00:33:29und das haben wir

00:33:30in den letzten zwei Lectures

00:33:31auch schon gehabt

00:33:32es gibt den

00:33:33Curvy Selector

00:33:34können wir noch Elemente

00:33:36über CSS

00:33:37Selektoren suchen

00:33:39nachdem wir jetzt noch

00:33:41recht wenig CSS gehabt haben

00:33:43habe ich jetzt die Möglichkeit

00:33:46dass

00:33:47man sich da ein bisschen

00:33:48helfen lässt

00:33:49wenn man jetzt von Klasse

00:33:50redet

00:33:51spricht man ein Punkt an

00:33:52Hashtag

00:33:53spricht man etwas über

00:33:54ID an

00:33:57man kann das ganze aber

00:33:59mit Hilfe von der

00:34:00Developer Konsole

00:34:01ein bisschen ausprobieren

00:34:02und zwar

00:34:04ich habe das von vorher noch

00:34:06ausgewählt

00:34:07wo ich das jetzt auch gehabt

00:34:08mit dem Display nah

00:34:09und man kann bei so einem Element

00:34:11mit Rechtsklick draufklicken

00:34:12auf Copy gehen

00:34:15und kann sich dann den CSS Selector

00:34:18kopieren

00:34:19ja

00:34:20so

00:34:22haben wir es jetzt kopiert

00:34:25und

00:34:29dann nehme ich den Selector

00:34:31und füge ihn da ein

00:34:32also wenn wir

00:34:34oft haben wir

00:34:35recht komplizierte Selektoren

00:34:36und

00:34:38der Browser kann dir helfen

00:34:39dass man den Selector schreibt

00:34:41in dem Fall ist es so

00:34:43wir suchen ein Element mit der Klasse

00:34:46Template

00:34:47und mit der Klasse Card

00:34:49dann müsste ich schreiben

00:34:50Punkt Template

00:34:51Punkt Card

00:34:53zwei Klassen

00:34:55sind da drauf zu gewesen

00:34:56das wird uns jetzt ein kleiner

00:35:00noch einmal den Weg laufen

00:35:01dieses Element

00:35:05merkt man uns

00:35:06das ist die neue Karten

00:35:11Card Element

00:35:13also in dem Fall

00:35:16würde man dieses Element nehmen

00:35:19und

00:35:20die Referenz

00:35:21da zu Card Element zuweisen

00:35:23aber

00:35:24wir wollen ein Duplikat davon stellen

00:35:26und statt Duplikat

00:35:27gibt es halt da

00:35:28Clone Node

00:35:29machen wir die Klammern noch auf

00:35:34weil dann kriegen wir ein bisschen

00:35:35eine Hilfestellung

00:35:36ist jetzt wichtig

00:35:37und zwar

00:35:38wenn wir nichts einschreiben

00:35:40werden nur die Hülle kopiert

00:35:42wenn wir True einschreiben

00:35:44dann wird der Inhalt auch mitkopiert

00:35:46wir brauchen den Inhalt auch

00:35:49das heißt wir übergeben da True

00:35:51sonst hätten wir quasi nur

00:35:53den Container an sich

00:35:56ohne die Sub-Elemente

00:35:58die was darin beherbergt werden

00:36:00so

00:36:03für uns lädt das schlecht

00:36:04wenn wir im Moment

00:36:05das Element vielleicht später

00:36:06nochmal hernehmen

00:36:07und die Referenz merken

00:36:09das heißt

00:36:11das Element ist

00:36:12was jetzt bezirkt

00:36:13auf unser

00:36:14auf unseren Nine-Task

00:36:18das merken wir uns erinnern

00:36:19von der Instanz

00:36:20von der Klasse

00:36:21was wir in dem Schritt

00:36:25noch machen können

00:36:26wir können die Grundwerte

00:36:27jetzt noch

00:36:29gleich mit verändern

00:36:30wenn wir uns das Template

00:36:34nämlich anschauen

00:36:35dann sehen wir

00:36:38wir haben da drinnen

00:36:39Element mit der Klasse Title

00:36:41Element mit der Klasse

00:36:43Description

00:36:44und die zwei Werte

00:36:45wollen wir ändern

00:36:46das heißt ich suche innerhalb

00:36:49von meinem Element

00:36:50noch was mit der Klasse Title

00:36:53so

00:36:58Card

00:37:01da drinnen

00:37:03in dis.CardElement

00:37:05suche ich noch was

00:37:07und ich mache es

00:37:10absichtlich jetzt mal anders

00:37:11also der QuerySelector

00:37:13ist so das

00:37:14das flexibelste Werkzeug

00:37:16zum Suchen

00:37:17von Elementen

00:37:18im Document-Object-Model

00:37:19aber wenn ich noch was suche

00:37:20spezifisch mit einer

00:37:21Class

00:37:22einer Name oder

00:37:23Id

00:37:24gibt es für jeweilige Möglichkeit

00:37:25zum Beispiel

00:37:26GetElement

00:37:28bei

00:37:30Class gibt's

00:37:31es gibt

00:37:32GetElement

00:37:33bei Id

00:37:34und GetElement

00:37:35bei Name

00:37:36das dürft ihr genauso verwenden

00:37:37wir suchen

00:37:38innerhalb

00:37:39von

00:37:40CardElement

00:37:41noch ein Element

00:37:42bei

00:37:43Class

00:37:44und das Element

00:37:45hat die Klasse

00:37:46Title

00:37:49Punkt

00:37:50und jetzt weise ich nochmal drauf hin

00:37:54was mir wichtig ist

00:37:56in dem Assignment ist

00:37:58das habe ich ganz oben geschrieben

00:38:00bitte nie

00:38:04innerHTML verwenden

00:38:06also irgendwo habe ich das

00:38:07nochmal hingeschrieben

00:38:08never use innerHTML

00:38:10und wenn ihr jetzt in der Referenz

00:38:12nachschaut

00:38:13dann seht ihr irgendwo

00:38:17Beschreibung für Element Punkt Text Content

00:38:27über das kann man den

00:38:29Inhalt von Element genauso verändern

00:38:31ohne diese Sicherheitsrisiken

00:38:33was ich mir erklären wollte

00:38:34oder erklärt habe

00:38:35also ich werde dann immer über Text Content

00:38:37das Ganze verändern

00:38:39das heißt von dem Element

00:38:40will ich mir den Text Content setzen

00:38:44auf

00:38:45in dem Fall geht es um den Title

00:38:46Dis.title

00:38:48Dis.title

00:38:49Das gleiche machen wir dann

00:38:53schauen wir nach

00:38:54wir haben da innerhalb drinnen

00:38:56auch Elementen

00:38:57einen

00:38:58Absatz

00:38:59P für Paragraph

00:39:00und

00:39:01der hat die

00:39:02Klasse

00:39:03Description

00:39:08das heißt

00:39:09STRG C

00:39:10STRG V

00:39:11Das heißt

00:39:12wir duplizieren diesen HTML-Codeblock

00:39:23und dann innerhalb von dem dann

00:39:26gewisse Container Inhalte auch schon verändern

00:39:41in dem Fall Title und Description

00:39:43aber das Ganze ist nur quasi im Code drinnen

00:39:44wir haben es noch nie ins Dokument

00:39:46Object Model

00:39:47für diese ist diese Add-to-Cull Function verantwortlich

00:39:56und da müssen wir uns in der Beschreibung noch mal kurz anschauen

00:40:01und zwar das Add-to-Cull

00:40:11das sollte die Karten zum Board hinzufügen

00:40:14in den jeweiligen Spalten am Ende

00:40:18und das Cullum Element

00:40:20das ist das Document Object Model Element wo wir es einfügen sollten

00:40:24wenn wir oben schauen

00:40:27bei Add-Card

00:40:28da steht aber dass Cullum eine Zeichenkette ist

00:40:30Cullum ist ein String

00:40:31das heißt wir müssen

00:40:33da oben

00:40:34in App.js

00:40:35auf Basis für dem String

00:40:37das Element suchen

00:40:38und das Element

00:40:40übergehen wir nachher auf Add-to-Cull

00:40:42für uns jetzt auch wichtig ist das zweite

00:40:45das brauchen wir erst in Task 3

00:40:47das ist zum Verschieben von die Elemente

00:40:49das tun wir dabei ignorieren

00:40:51und deswegen übergehen wir dann Nullwerten

00:40:53das heißt ich gehe nochmal einen Schritt zurück

00:40:59auf App.js

00:41:02da drinnen

00:41:04wo wir neue Karten erzeugt haben

00:41:08wollen wir hergehen

00:41:10und wollen diese Karte dann

00:41:13in die jeweilige Spalte hinzufügen

00:41:17aber nicht auf Basis von der Zeichenkette da oben

00:41:19sondern wir übergeben dem Add-to-Cull schon

00:41:22die ist Element

00:41:24und in unserem Grundgerüst drinnen

00:41:28haben wir drei Bereiche

00:41:30mit Section Container

00:41:32die jeweils eine Klasse haben

00:41:34Klasse Column

00:41:36und die was über die IDs unsprechbar sind

00:41:40die was der jeweiligen

00:41:42To-to-Spalte entspricht

00:41:44also der jeweiligen Task-Spalte entspricht

00:41:46einmal To-to

00:41:47einmal To-to

00:41:48einmal To-in

00:41:49einmal To-in

00:41:50einmal To-in

00:41:51das heißt wir suchen auf Basis von der Zeichenkette

00:41:53nach dem jeweiligen Element

00:41:55jetzt gehen wir her

00:41:59Dokument

00:42:01suchen wir innerhalb von dem ganzen Dokument

00:42:03get

00:42:05element

00:42:13bei

00:42:15id

00:42:17id

00:42:19und wir suchen jetzt das Element mit der id

00:42:25cal

00:42:29get element bei id und decal

00:42:35und decal

00:42:37und decal

00:42:39das Element

00:42:40was wir da

00:42:41außer selektieren das merkt man uns

00:42:45und dann machen wir den Aufruf in NewCard

00:42:52und sagen wir wollen

00:42:56in dem Column Element was wir da rausgesucht haben

00:42:59die Karten oder den Task hinzufügen

00:43:03der Mover ist null

00:43:05den kennen wir noch nicht

00:43:06das kann beherrscht in Task 3

00:43:07also Element suchen wo es angekehrt

00:43:14und dann die Funktion

00:43:16add to cal aufrufen

00:43:18die wo es dann das hinzufügen

00:43:19bewerkstelligt

00:43:20die speichern wir jetzt einmal

00:43:26jetzt müssen wir da mal schauen

00:43:28weil ich glaube ich habe da einen Fehler gemacht

00:43:29und zwar das geht element by glass

00:43:32da schauen wir jetzt nochmal nach

00:43:36und zwar

00:43:39js

00:43:40get element by glass

00:43:43ob wir da einzelne Elemente zunahse kriegen

00:43:51weil sonst bin ich eher für

00:43:53und zwar

00:43:59und zwar

00:44:00ich bin jetzt gerade nicht ganz so überzeugt von der

00:44:09da kriegen wir nämlich eine Liste zurück

00:44:13und in dem Fall hätten wir gerne noch ein Element

00:44:15das heißt wir werden da unsere Strategie nochmal ein bisschen ändern müssen

00:44:20und wir gehen dann her und wechseln bitte da drinnen bei

00:44:27wo wir den title container aussuchen

00:44:31da nehmen wir den query selector her

00:44:33also bei id funktioniert es gut

00:44:36wenn man jetzt nach Klassen sucht

00:44:39ist es gescheiter wenn man

00:44:41richtig nach der Klasse sucht

00:44:43über den query selector

00:44:46über den query selector

00:44:48sonst müssen wir das nullte Element nehmen

00:44:50und das führt eher zu probleme

00:44:52also wir nutzen den query selector

00:44:55und suchen nach ein Element mit der Klasse

00:44:57also mit dot title

00:44:59ok

00:45:06wieder zurück

00:45:07wir haben in app.js ausprogrammiert

00:45:10dass add to call aufgerufen wird

00:45:12und das Element wird hinzugefügt

00:45:14und sollte jetzt in der Funktion hinzugefügt werden

00:45:17jetzt haben wir da

00:45:18die Referenz auf das HTML

00:45:21was wir einfügen wollen

00:45:22und wir haben da die Referenz wo wir es einfügen wollen

00:45:25das heißt wir wollen beim column element

00:45:28das wir mal jetzt machen

00:45:32am Ende append child

00:45:36das heißt hinzufügen

00:45:37wollen wir dis.cardElement hinzufügen

00:45:41column element dis.cardElement

00:45:47gehen wir her

00:45:51und schauen uns das Ganze mal an

00:45:53ob wir irgendwo Fehler haben

00:45:55aufwerfen

00:45:56aufwerfen

00:46:00hier dann Konsole drin

00:46:13dann haben wir jetzt keine Fehler

00:46:14trotzdem schaut das jetzt

00:46:16ist das nur leer

00:46:17die Frage ist warum ist da nichts drinnen

00:46:19schauen wir uns das dahinterliegende HTML an

00:46:23und schauen wir bei

00:46:25to do any

00:46:26dann sieht man

00:46:27da drinnen haben wir zwei sichere Templates

00:46:29was wir erstellt haben

00:46:30man sieht auch wir haben den title geändert

00:46:34aber man sieht auch

00:46:38dass das immer noch grau ist

00:46:40und warum ist das grau

00:46:41weil eben

00:46:42dieses Template

00:46:44die Klasse immer noch drinnen ist

00:46:46und dann haben wir da quasi

00:46:48und dann haben wir da quasi dieses display

00:46:51non property aktiv

00:46:54für uns heißt das wir müssen die

00:46:56Template Klasse

00:46:58da weg bringen

00:47:00und für dies gibt es die sogenannte

00:47:03class list

00:47:04da könnt ihr nachschauen in der

00:47:08Referenz auf unserer Seite

00:47:10class list get modify list

00:47:14auf css-classes

00:47:16auf ein Element

00:47:18wir nutzen das jetzt wie folgt

00:47:20und zwar wenn wir dieses Element hinzugefügt haben

00:47:23entweder vorher oder nachher

00:47:25entfernen wir diese Template Klasse

00:47:27das heißt bei this.car element

00:47:32hätten wir gern die

00:47:35class list

00:47:37und dann kann man remove machen

00:47:40und wir wollen die Klasse Template entfernen

00:47:52es gibt dann auch noch was zum Toggeln

00:47:55und auch noch was zum hinzufügen von einer Klasse

00:47:58wir wollen direkt da

00:48:00damit das ganze sichtbar wird

00:48:02speichern

00:48:03und wieder retour

00:48:08und voilà unsere Tasks die

00:48:15wo es in index.jstore

00:48:16dynamisch generiert werden

00:48:18erscheinen

00:48:19mit dem Titel

00:48:22mit dem Standard

00:48:23no description

00:48:24ok

00:48:29schauen wir nochmal zu

00:48:32unserer Task Beschreibung zurück

00:48:35wir haben gemacht

00:48:43das Karten hinzufügen

00:48:45den Punkt

00:48:48den haben wir

00:48:49nicht berücksichtigt

00:48:51den lasse ich euch über

00:48:52das ist dieses Hintergrundfarb ändern

00:48:55das bleibt über für euch als Aufgabe

00:48:58ich werde euch morgen im Kurs einen Hinweis geben

00:49:03wie das funktioniert

00:49:04aber ausprogrammieren

00:49:07setzt sich ihr

00:49:08set description

00:49:09das ist auch euch eine Aufgabe

00:49:11das heißt

00:49:12ich habe es dann im

00:49:14das könnt ihr jetzt schon ausprogrammieren

00:49:17aber es fällt noch nicht auf

00:49:18wenn man es nicht gemacht hat

00:49:19es fällt nur deswegen auf

00:49:21weil nämlich

00:49:22in index.js

00:49:25gibt es eine Zeile

00:49:26wo die description gesetzt wird

00:49:28das heißt

00:49:29eigentlich

00:49:30sollt bei dem Task

00:49:31der wo es unter

00:49:32to do steht

00:49:33andere description drinnen sein

00:49:36so wenn ihr es ausprogrammiert habt

00:49:37sollt eigentlich dann

00:49:39bei to do

00:49:41im zweiten Task

00:49:44sollt da andere description stehen

00:49:46das wird auf Basis von dem was wir jetzt gemacht haben

00:49:50mit title

00:49:51und description

00:49:53im Konstrukt

00:49:54das wird das schon möglich sein

00:49:55Element suchen

00:49:56und den Text ändern

00:49:57so

00:50:01Karten hinzufügen

00:50:04das ist für euch über

00:50:06weil ihr seht description

00:50:08was ich noch gerne gemeinsam mit euch machen würde

00:50:11damit wir dieses Event Händler

00:50:13nochmal kurz anreißen

00:50:15ist

00:50:16die Funktionalität

00:50:18für das Formular ausprogrammieren

00:50:20wir haben in unserem

00:50:22Index HTML

00:50:23oben drinnen

00:50:24dieses Formular

00:50:28und wenn der Benutzer was eingibt

00:50:31und auf add drückt

00:50:34oder enter drückt

00:50:35dann sollte

00:50:36also wenn du jetzt add drückt

00:50:39oder enter drückt

00:50:40in einer von den zwei Buchsen

00:50:41mit zwei Buchsen

00:50:42sollte der neue Karten

00:50:43erzeugt werden

00:50:44mit der jeweiligen

00:50:46Farbe

00:50:47und dem Titel

00:50:49zu dem Punkt

00:50:50kommt auch noch

00:50:51wenn der Benutzer kein Titel ergibt

00:50:53dann sollte ein Fehler kommen

00:50:55für uns wichtig ist

00:50:57jede neue Karten

00:50:58werden am Ende

00:50:59von to do

00:51:00und die Inputs

00:51:03sollten gelöscht werden

00:51:05für uns

00:51:08die Logik für das ganze

00:51:11gehört in dieses

00:51:14App.js

00:51:15weil das übernimmt quasi

00:51:17die Funktionalität für unser Taskboard

00:51:19wo dann die ganzen Karten Tasks

00:51:23dargestellt werden

00:51:27das heißt

00:51:29ich habe ein Formular

00:51:31und ich möchte das Formular

00:51:32die Logik von dem Formular

00:51:33in meiner

00:51:35in der App.js Klasse

00:51:37realisieren

00:51:39von App.js

00:51:40weil den Index.js eine Instanz generiert

00:51:43und über die Instanz

00:51:44kann man dann das Formular

00:51:45die Formularlogik deklarieren

00:51:47immer

00:51:49wenn ich dann so

00:51:50mit einem

00:51:51wir haben die Logik

00:51:52zu einem Element

00:51:53in meinem HTML

00:51:55und damit ich die Logik programmieren kann

00:51:57muss ich mir das Element merken

00:51:59in dem Fall geht es um ein Formular

00:52:01in dem Fall

00:52:02ich nehme es einfach

00:52:03dis.form

00:52:04in der Klasse

00:52:05und dann hole ich mir das Formular

00:52:07aus dem Document-Object-Model

00:52:09document.

00:52:12es geht jetzt genauso

00:52:13der Query-Selector

00:52:14aber wenn es um Formulare geht

00:52:16haben wir gesagt

00:52:18werden alle Formulare

00:52:19über Forms

00:52:20aufgelistet

00:52:21und dann können wir

00:52:23über den benannten

00:52:24die werden dann benannt

00:52:25nach dem Title

00:52:26unser Formular hat die ID

00:52:31addCard

00:52:32das heißt

00:52:33ich kann

00:52:34document.forms.addCard

00:52:36und dann kriege ich das Formular

00:52:38document.forms.addCard

00:52:41jetzt habe ich eine Referenz

00:52:45auf dieses Formular

00:52:47so

00:52:50wir haben jetzt

00:52:52die Anforderung

00:52:53dass

00:52:54wenn wir

00:52:56Enter drucken

00:52:57oder auf

00:52:58den Button drucken

00:53:00ein Event ausgelöst werden soll

00:53:03so

00:53:06dieses Formular

00:53:07hat ein Button

00:53:08und der Button ist

00:53:09vom Type-Submit

00:53:10letztes Mal

00:53:12haben wir

00:53:13auf den Button Event gelegt

00:53:16und haben gewartet

00:53:17dass der Button geklickt wird

00:53:18diesen Mal hätte ich gern

00:53:19dass ich auf ein anderes Event

00:53:21warte und das Event heißt

00:53:22Submit Event

00:53:23das wird immer dann ausgelöst

00:53:25wenn man ein Formular drinnen

00:53:26in ein Feld ist und Enter druckt

00:53:28oder wenn

00:53:30innerhalb von dem Formular

00:53:31ein Button ist

00:53:32vom Type-Submit

00:53:33wenn das gedruckt wird

00:53:34also

00:53:35eins für die Sachen eintritt

00:53:36dann wird ein

00:53:37sogenanntes Submit Event

00:53:38ausgelöst

00:53:39das heißt

00:53:40das Event wird nicht auf den Button gelegt

00:53:42sondern auf das ganze Formular

00:53:45im ersten Schritt aber

00:53:48brauchen wir aber eine Funktion

00:53:49die was ausgelöst wird

00:53:51oder abgefeuert wird

00:53:52wann dieses Submit Event eintritt

00:53:54dann schreiben wir das jetzt mit

00:53:57weil das gilt dann nachher auch

00:53:59erster Schritt

00:54:01Event Händler Function deklarieren

00:54:10in dem Fall haben wir

00:54:16hier haben wir

00:54:17was was

00:54:18was

00:54:19Handle

00:54:20Submit

00:54:22Form nenne ich es jetzt an

00:54:29und

00:54:30ich habe es schon einmal erklärt

00:54:31so eine Event Händler Function

00:54:33die kriege immer

00:54:35aus Parameter

00:54:36das Event an sich mit übergeben

00:54:38wir brauchen das nachher

00:54:40jetzt kommt ein e nennen

00:54:42oder Event

00:54:43und für uns ist immer nur interessant

00:54:48ob das Event überhaupt

00:54:50abgefeuert wird

00:54:51und damit ihr das sieht

00:54:53geht mir mal in der Konsole

00:54:55einen Hinweis aus

00:54:57und es funktioniert dann

00:54:59bei der Konsole inne eingeschrieben

00:55:03das haben wir gemacht

00:55:05das zweite ganz wichtig

00:55:07ist immer den Kontext penden

00:55:09sonst

00:55:10wenn man auf dem Button druckt

00:55:12war hat man sonst im Kontext von Button

00:55:15in dem Beispiel war sehr spannend

00:55:17weil dann

00:55:18wenn der Kontext ist

00:55:19weil das Formular das auslöst

00:55:21meistens tut man Kontext penden

00:55:24das heißt

00:55:25das

00:55:29muss auf die Klasse

00:55:31auf die Klasse gebunden werden

00:55:33dies Punkt

00:55:36händelsatmitform

00:55:38Punkt

00:55:43bind

00:55:44dies

00:55:45den Kontext penden

00:55:46auf den aktuellen Kontext

00:55:47das dritte ist

00:55:50jetzt können wir dazu

00:55:53jetzt kommen wir dazu

00:55:54den Zuweisen von

00:55:55Event

00:55:58Listener

00:55:59so

00:56:00im

00:56:05Lectio 06

00:56:06haben wir den Event Listener

00:56:07auf den Button

00:56:08zugewiesen

00:56:09heute haben wir auf das Formular

00:56:10weil wir auf jegliches

00:56:12Submit Event

00:56:13auf das Formular bezogen

00:56:14warten

00:56:15das Formular haben wir uns

00:56:16oben schon gemerkt

00:56:17dies Punkt Form

00:56:20auf dies

00:56:21will man ein Event Listener legen

00:56:24das Event ist jetzt kein Klick

00:56:30sondern jegliche Art von Submit Event

00:56:33was will man aufrufen

00:56:36Handle

00:56:37Submit

00:56:38Form

00:56:39Function deklarieren

00:56:43Kontext penden

00:56:45Event Listener

00:56:46hinzufügen

00:56:48oder deklarieren

00:56:49wenn das funktioniert

00:56:53dann

00:56:56sollte in der Konsole

00:56:57in ausgehen werden

00:57:02sichern wir da

00:57:05schauen wir ob wir keine Fehler haben

00:57:07jetzt hinher und drucken wir auf Add

00:57:13und das ist jetzt warum wir das so gemacht haben

00:57:15und zwar der Title war jetzt leer

00:57:20und es ist jetzt eine Meldung gekommen

00:57:22vom Browser dass da was drinnen sein muss

00:57:24und die Frage ist warum kommt das

00:57:26das kommt dann wenn man auf ein Submit Event wartet

00:57:30und im Grundgerüst bei einem Formularfeld ein Attribut

00:57:34ein Attribut

00:57:39Required gesetzt worden ist

00:57:41also

00:57:43der Submit Event ist ausgelöst worden

00:57:46aber der Browser schaut nach ob in die Formularfelder irgendwo ein Attribut oder Eigenschaft

00:57:53Required gesetzt worden ist

00:57:54wenn das dann fehlt

00:57:56dann wird das Event quasi

00:57:57das heißt Bubbling

00:57:59nicht weiter ausgeführt

00:58:01und es wird ein Hinweis gegeben dass da ein Wert fehlt

00:58:03das heißt wir können wir nicht zu unserem

00:58:06zu unserer Event Händler Function

00:58:08da muss zuerst was drinnen stehen

00:58:09bei der Form ist es nicht benötigt

00:58:11das heißt wenn ich das inni schreibe

00:58:16test

00:58:18jetzt drücken wir auf add

00:58:21dann steht da innen drinnen oder

00:58:24aber

00:58:25das da oben wird rausgelöscht

00:58:27und die Seiten werden eingeladen

00:58:29das passiert deswegen weil

00:58:32jeder lägliche Submit Event löst im gleichen Atemzug

00:58:35einen sogenannten Postrequest aus

00:58:38wenn man einmal die Formulardaten zu einem Server schickt

00:58:41wir wollen das aber nicht

00:58:42wir wollen auf unserer Seite bleiben

00:58:44und die Logik sieht weiterlaufen

00:58:46damit wir dieses Standardverhalten von den Postrequests unterbinden können

00:58:51brauchen wir dieses Event

00:58:54und zwar in unserem

00:58:58Händler Submit Form

00:59:03da haben wir das Event drinnen

00:59:05und damit wir dieses Standardverhalten von Postrequest unterbinden können

00:59:11haben wir schon mal gehört

00:59:13gibt es die Funktion Prevent Default

00:59:16die unterbindet das Wegschicken oder Standardaktionen

00:59:20wie diesen Postrequest absenden

00:59:25jetzt probieren wir das nochmal

00:59:27jetzt können wir beliebig oft draufdrucken

00:59:34und die Seite wird nicht neu geladen

00:59:37für uns ganz zentral

00:59:41wir bleiben auf der Seite

00:59:42die wird nicht neu geladen über den Postrequest

00:59:45und

00:59:48noch ein Vorteil

00:59:50durch Submit Event

00:59:53entweder wir drucken auf add

00:59:56aber das Ganze wird auch ausgelöst

00:59:59wenn man in einem Input-Födel ist und Enter druckt

01:00:02könnt ihr das ausprobieren

01:00:038, 9, 10

01:00:05ganz rechts unten mitschauen

01:00:06entweder wir drucken Enter

01:00:09oder wir drucken add

01:00:10Submit Event wird ausgelöst

01:00:12wird überprüft

01:00:13ob in alle Input-Födel

01:00:15wo Required drinnen steht

01:00:16der Wert steht

01:00:17und dann geht es weiter in unseren

01:00:19in unser Handle Add Event Function

01:00:24letzter Schritt

01:00:27den was wir gemeinsam machen

01:00:28ist jetzt dieses hinzufügen

01:00:30von dieser Karte

01:00:32das ist jetzt gar nicht mehr viel Arbeit

01:00:34diese LogMessage brauchen wir nicht mehr

01:00:40das hat funktioniert

01:00:41wir haben jetzt da unten diese Function

01:00:46addCard

01:00:47und die braucht drei Werte

01:00:49addCard braucht drei Werte

01:00:51und zwar

01:00:53das erste

01:00:55wie gesagt jede neue Karte

01:00:56wird in der Spalte

01:00:57ToDo hinzugefügt

01:00:59addCard kriegt das Ganze aus Zeichenkette

01:01:01die ein zwei Werte

01:01:03die fehlen uns noch

01:01:04der Title

01:01:05und die Color

01:01:07und da können wir jetzt

01:01:10über unser Formular

01:01:12auf die Formularfelder zugreifen

01:01:14das schauen wir uns an

01:01:17und zwar

01:01:18wir haben das Formular

01:01:20dis.form

01:01:22und jetzt bemüßigen wir nochmal die Referenz

01:01:27mdn-form-element

01:01:42schauen wir ob wir da irgendwo ein Beispiel finden

01:01:44Javascript brauchen wir

01:01:46Javascript brauchen wir

01:02:07so auf alle Fälle hat dieses Form-Element wieder ein Property

01:02:12das heißt Elements

01:02:14und da können wir auf alle Controls

01:02:16steht da innerhalb von dem Formular zugreifen

01:02:19und die haben dann

01:02:21sind dann benannt über NOM oder die ID

01:02:23und wir können dann ganz normal darauf zugreifen

01:02:25ich zeig das einmal her

01:02:27man könnte das auch mit dem QuerySelector machen

01:02:29aber in einem Formular ist das echt sehr praktisch

01:02:32dass man das so macht

01:02:33schauen wir noch

01:02:35unser Formular hat ein Input-Födel mit dem NOM-Title

01:02:38das heißt

01:02:41ich gehe her und

01:02:44such dis.form.elements.title

01:02:53jetzt kann man darauf zugreifen

01:02:58und nachdem diese Input-Födel ist

01:03:00hat diese sogenannten Value

01:03:02das heißt der Title

01:03:07der vom Formular ist gleich dies

01:03:09Formular in die Elemente

01:03:11in dem Vödel mit dem NOM-Title

01:03:13und dessen Wert

01:03:15die zweite Möglichkeit

01:03:17das machen wir jetzt für

01:03:19die Color

01:03:20nachdem wir wissen

01:03:24dass

01:03:25auf unserer Seite

01:03:27gibt es genau

01:03:28ein Element mit

01:03:29der ID CardColor

01:03:30komm her

01:03:33ein QuerySelector

01:03:34nehmen

01:03:35document.querySelector

01:03:40Hashtag

01:03:47und selektiere die Farbe über den QuerySelector

01:03:51da gehe ich aufs Formular

01:03:52und dann übergeben wir die zwei Werte

01:03:57an die Funktion

01:03:59AddCard

01:04:02die wir schon fertig ausprogrammiert haben

01:04:04und

01:04:06Color

01:04:08Schauen wir nach

01:04:13nur laden

01:04:18erster Blick ist immer mal

01:04:20ob irgendwo Fehler sind

01:04:22das 2

01:04:24Add

01:04:25das 2

01:04:26wird hinzugefügt

01:04:27das 3

01:04:29hinzugefügt

01:04:31alles was wir jetzt hinzufügen

01:04:33jeder Task

01:04:34wird immer wieder

01:04:35bei

01:04:36ToDo unten

01:04:37angehängt

01:04:38ok

01:04:42also wir haben

01:04:43die Formularfunktionalität

01:04:45entweder drucken

01:04:46oder auf dem Button drucken

01:04:48und das ganze wird hinzugefügt

01:04:51was jetzt noch fehlt

01:04:53ist folgendes

01:04:54das haben wir im Kurs einmal gemacht

01:04:56jetzt Formular hat eine Funktion

01:04:58damit man

01:04:59die Input-Födern wieder leert

01:05:01das müsst ihr bitte noch machen

01:05:04set a card description

01:05:09weil set description

01:05:10die Funktion noch ausprogrammieren

01:05:12dann

01:05:15das Default Behavior

01:05:20mit Event

01:05:22Prevent Default

01:05:24in den Griff bekommen

01:05:27das haben wir uns angeschaut

01:05:29mit dem

01:05:30Required Field

01:05:31das haben wir ausprobiert

01:05:36mit die Input-Normen

01:05:38mit die Förder

01:05:39oder wir gehen

01:05:40mit den Query-Selector drauf zur

01:05:42genau

01:05:43genau

01:05:44bitte noch

01:05:48Formular-Input-Födern

01:05:50nach hinzufügen

01:05:51löschen

01:05:52set description

01:05:53die Funktionalität

01:05:54ausprogrammieren

01:05:55und

01:05:56was man auf alle Fälle fällt

01:05:57ist die Hintergrundfarbe

01:05:59vom Task noch spezifizieren

01:06:04und ausprogrammieren

01:06:05ich werde euch morgen

01:06:07das ganz kurz noch zeigen

01:06:08ob ihr implementieren solltest

01:06:09dann im Task bitte jeder Server

01:06:11auf Task 2 bezogen

01:06:14da haben wir jetzt diese Funktionalität

01:06:16und das Prozedere ist jetzt immer das gleiche

01:06:19wenn ihr euch so ein Template anschaut

01:06:20von so einem Task

01:06:21haben wir drei Buttons

01:06:22und

01:06:25ihr müsst jetzt quasi Event-Händler

01:06:28für jeden Button definieren

01:06:31den Kontext binden

01:06:32und dann den Event-Händler zuweisen

01:06:35also Klick-Events sind das jetzt standardmäßig

01:06:38wenn wir löschen

01:06:39sollte das ganze wieder vom

01:06:40Document-Object-Model weg

01:06:42gemacht werden

01:06:43also weglöscht werden

01:06:46wenn wir es editieren wollen

01:06:47dann wollen wir den Titel

01:06:48oder die Script schon quasi editieren können

01:06:51genau

01:06:53die Script schon glaube ich kann

01:06:54wir editieren nicht den Titel

01:06:56das ganze

01:06:58ist zum Großteil

01:07:00in Card.js zu lösen

01:07:03schaut ihr das da oben

01:07:05so eine saubere Struktur habt

01:07:06keine Ahnung

01:07:07ich würde dann ganz gerne

01:07:09dass ich so habe

01:07:10dass ich da

01:07:11einen Bereich habe

01:07:12wo ich Kontext binden tue

01:07:13und einen Bereich mache ich mir

01:07:16für Event-Händler

01:07:18deklarieren

01:07:24oder kann ich jeder

01:07:25ein bisschen seinen eigenen Stil entwickeln

01:07:27ok

01:07:28ich glaube das waren nicht sehr viele Hinweise

01:07:29ein bisschen schneller

01:07:30jetzt wahrscheinlich

01:07:31im dritten Mal aufnehmen

01:07:32aber ich hoffe

01:07:33wenn es vielleicht ein bisschen langsamer schwitzt

01:07:34dass das für jeden gut machbar ist

01:07:35damit das für jeden gut machbar ist

01:07:37damit das für jeden gut machbar ist

01:07:38damit das für jeden gut machbar ist

01:07:42das für jeden gut machbar ist

01:07:46ganz sicher

Category

Transcript

Recommended