*UPDATED* JavaScript Complete Series 2023 – Teil 6: 6: Dialogfelder und mehr | CM Code_Zone | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

*UPDATED* JavaScript Complete Series 2023 – Teil 6: 6: Dialogfelder und mehr

teacher avatar CM Code_Zone, !false | funny, because its true

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Kurseinführung

      1:09

    • 2.

      Alert – Erstellen eines an für eine Schaltfläche

      2:26

    • 3.

      Alert – Text auf den Bildschirm schreiben nachdem die Alert ausgelöst wurde

      2:45

    • 4.

      Bestätigungsdialog – Bedingt wenn Anweisung

      4:58

    • 5.

      Eingabeaufforderung

      3:26

    • 6.

      Eine benutzerdefinierte Warnung erstellen

      13:23

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

49

Teilnehmer:innen

--

Projekte

Über diesen Kurs

DIES IST TEIL 6 meiner JAVASCRIPT Complete Serie

Was wir in diesem Kurs abdecken?

Wir werden Tonnen von Informationen in dieser ganzen Serie abdecken, aber für Teil 6 konzentrieren wir uns auf Dialogfelder (wir sehen uns Benachrichtigungen an, bestätigen und die prompten Kästen). Tatsächlich gehen wir tiefer und bauen tatsächlich unsere ganz eigenen Warnungen zusammen, von Grund auf an. Keine Plugins oder Bibliotheken. Wir verwenden einfaches vanilla

WAS sind DIALOGE KÄSTEN

In JavaScript kannst du Dialogfelder oder Popups erstellen, um mit dem Benutzer zu interagieren. Du kannst sie entweder verwenden, um einen Benutzer zu benachrichtigen oder eine Art Benutzereingabe zu erhalten, bevor du fortfährst.

Du kannst drei verschiedene Arten von Dialogfeldern alarmieren, bestätigen und prompt erstellen.

Als interessante side wird das Aussehen dieser Dialogfelder durch das Betriebssystem und/oder die Browsereinstellungen bestimmt, sie können mit der CSS nicht geändert werden. Dialogfelder sind auch modulare Fenster; wenn ein Dialogfeld angezeigt wird, stoppt die Codeausführung und setzt erst fort, nachdem sie abgelaufen wurde.

Was dieser Kurs umfasst?

JavaScript ist die Skriptsprache #1 im Internet, in der viele dynamische und gestylte Inhalte von JavaScript im Hintergrund behandelt werden. Aber bevor du diese Sprache zum Erstellen dynamischer Websites verwendest, musst du ein klares Verständnis dafür haben, wie sie hinter den Kulissen funktioniert.

Am Ende dieses Kurses kannst du JavaScript „sprechen“, indem du ein Verständnis dafür erlangst, wie der Browser ihn verwendet, welche Variablen, Objekte und Funktionen sind, welche verschiedenen Datentypen es gibt und wie du Inhalte auf einer Website manipulieren kannst. Wir graben tiefer und erstellen unsere eigenen Dialogmethoden von Grund auf neu. Wir lernen die arrow syntax, Schleifen durch Objekte und Arrays und arbeiten mit Daten. Wir betrachten Prototypen, JS Engines, den Execution Stack und noch ein paar mehr!

Durch praktische Beispiele hilft dir dieser Kurs JavaScript Stück für Stück zu verstehen. Und wir verwenden die neuesten und besten Funktionen von JavaScript auf dem Weg, damit du dem Paket voraus bleiben kannst.

WOAUF WARTEN SIE NOCH. LASSEN SIE SICH CRACKIN BEKOMMEN

Triff deine:n Kursleiter:in

Teacher Profile Image

CM Code_Zone

!false | funny, because its true

Kursleiter:in

Success takes sacrifice.

And sacrifice is something I know a lot about.

I am a self-taught developer so I understand how difficult and daunting it can be for a new comer. 

Today, I continue to code and stay on top of the latest technologies and programming languages. 

It's time to share the knowledge I've gained and to help others succeed. 

Vollständiges Profil ansehen

Level: All Levels

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Kurseinführung: Willkommensgeschick. Shea-Schüler zu einem weiteren großartigen Kurs. Es ist ein schöner Tag draußen, und es ist ein weiterer schöner Tag, um mehr über JavaScript zu erfahren. Und worum geht es in dieser Klasse? Nun, sehr einfach. Es geht um eine Krankenschwester in Java-Skript, und wir alle haben diese unglaublich ärgerlichen Notizen gesehen, die auf dem Bildschirm wirklich schrecklich sind. Aber du musst lernen, indem du es benutzt hast. Das ist also, was das kostet, es geht darum. Wir werden über die Java-Skriptnotenmethode sprechen, die uns im Fensterprojekt sehr zur Verfügung steht. Real wird über Bestätigungen und Versprechen sprechen sprechen, und dann werden wir diese Klasse beenden, indem wir unsere eigenen sehr benutzerdefinierten Warnungen erstellen. Nun, schauen Sie, Dialog und Sie könnten sich Sorgen machen, dass Sie denken, Clyde, ich weiß nicht einmal, wie man Java-Skript schreibt. Ich weiß nicht, wie das funktioniert. Panik. Wir werden es durchmachen, Stick für Stock. Also schnappen Sie sich einen Kaffee. Wir schnappen uns einen Red Bull. Was auch immer zu Ihrer Phantasie passt, Sie motiviert und ich sehe Sie in der Cross Audio's oh 2. Alert – Ein - für eine button erstellen: Alerts für viele Schnittstellen und in der Vergangenheit werden Nachrichten nur mit nativer JavaScript-Warnung durchgeführt. Und du und ich wissen, wie frustrierend und hässlich Dale ist. Und eines der Probleme ist, dass die native Alert JavaScript-Funktion, es ist ein Systemobjekt, und das bedeutet nur, dass wir nicht manipulieren können wie es aussieht und es kommt buchstäblich direkt aus dem Browser. Um Warnungen zu manipulieren, wie sie im Feld aussehen, müssen wir unser eigenes CSS auf der Hintergrundbeleuchtung entwerfen. Also werde ich Ihnen jetzt ein paar Beispiele für ein paar Warnungen zeigen. Schauen wir uns mal an. Also, hier geht's. Ich habe eine einfache HTML-Seite, die gerade Alarm aufruft und geht. Lassen Sie uns jetzt beginnen, indem wir eine HTML-Seite erstellen. Und jetzt können wir dieses Warnungsbeispiel nennen. Und Sie können diese Warnung auf viele Arten erstellen. Sie können Schaltflächen erstellen, Sie können Eingaben machen, Sie können Bilder machen. Ich werde hier nur einen Beitrag machen. Machen Sie es zu einer Schaltfläche, die Sie es in vielerlei Hinsicht tun können. Also machen wir es einfach zu einem Knopf. Und lassen Sie uns einen Onclick machen. Und es ist Feuer eine Funktion, die wir nennen können, was immer wir köstlich waren, genannt Show alert. Und lassen Sie uns den Wert dieser Eingabe machen. Klicken Sie auf Camino, um eine JavaScript-Warnung auszuführen. Jetzt ist die einzige Sache, die noch zu tun ist, dass wir diese Funktion definieren, und das ist JavaScript XHR Rest. Und JavaScript muss zwischen Skript-Tags eingefügt werden , die ausgeführt werden. Also lassen Sie uns das online stellen ist eine Schaltfläche, die wir erstellt haben und in der Tat, Ticket, was erwarten Sie zu passieren? Ja, diese Breite, wie einfach ist das? Sie haben gerade gesehen, wie verhindert eine Schaltfläche mit einem Klick-Ereignis. Und in dieser Warnung ist JavaScript. Das kommt in ein paar weitere Beispiele. 3. Alert – Text in den Bildschirm ausgelöst nach der Benachrichtigung: In Ordnung, also werden wir immer komplizierter, wenn wir sagen, jetzt wollen wir auf eine Schaltfläche klicken, die angezeigt wird. Und wenn Sie in dieser Warnung auf OK klicken, wird Text auf dem Bildschirm durch etwas ersetzt. Wie würden wir das tun? Lasst uns gehen. Lassen Sie uns ein HTML-Dokument erstellen. Und wieder, lassen Sie uns eine Schaltfläche mit einem onclick-Ereignis erstellen. Nennen wir diese eine Warnung. Alarmieren Sie mich. Ich liebte mich nicht definiert ist. Wieder müssen wir Javascript rocken. Javascript muss in Skript-Tags eingefügt werden. Wir müssen nun die Last MY Funktion definieren. Sie machen sich keine Sorgen um die Syntax um Funktionen. Das werden wir in Kürze erfahren. Sie werden sehen, wie alles passt und wie man eine Funktion schreibt. Nun, nachdem Sie auf OK Wellness Alarm geklickt haben, was wollen wir unter ihm ausgeführt werden? Denken Sie daran, es mit JavaScript, und wir werden tatsächlich ist es der Browser auf die Pasa. Es beginnt von oben nach unten. Sobald das Solute fertig ist, wird es ausführen, was darunter ist. Und sagen wir, wir wollen auf dem Bildschirm. Dies wurde durch JavaScript ersetzt. Dies geschieht Geschichte von JavaScript. Dieser Versuch, diesen Code auszuführen, würde ich erwarten, eine Warnung zu sehen, wird nicht erwarten, eine Schaltfläche zu sehen. Wenn wir den Knopf nehmen, sollten wir eine Warnung sehen. Und nach der Warnung sollten wir Text auf dem Bildschirm sehen. Weil wir das Dokument benutzt haben. Dokument ist, Es ist ein globales Objekt. Es ist fast, es ist nicht ganz der König. Erinnere dich an Fenster, den König. Aber mit unter Fenster haben Sie dieses große Objekt namens Dokument. Und dieses Dokument ist Ihr Gewichtsabzeichen und immer sagen, greifen wir auf eine Methode namens richtig? Was buchstäblich nur setzt, nimmt diese Seite auf. Einfach, wie es. Mal sehen, wie das aussieht. Tage unser Knopf. Tritt mich bitte. Mein Ticket ist eine Warnung. Und was passiert, wenn ich auf OK klicke? Es braucht, was ersetzt wurde. Wie genial Set. Lasst uns weitermachen. 4. Bestätigungsdialog – Bedingung, wenn Statement: Wir haben Warnungen gesehen. Sehen wir uns nun eine andere JavaScript-Funktion an, eine Bestätigung. Lassen Sie uns wieder mit einer einfachen HTML-Seite beginnen, die eine Schaltfläche hat. Dieses Mal auf Klick, sagen wir, erhalten Bestätigung. Ich bin sicher, was wir immer noch in JavaScript definieren müssen. Also lassen Sie uns jetzt definieren diese get Bestätigungsfunktion. Wurde in JavaScript innerhalb von Skript-Tags. Wir müssen JavaScript sagen, dass wir eine Funktion mit dem Funktionsschlüsselwort definieren. Und lassen Sie uns auf dem Screenreader bestätigen, die von kommen, na ja, es ist nur eine JavaScript-Funktion. In diesen JavaScript-Funktionen lernen Sie nur als Programm im Laufe der Zeit, Sie werden sich nur daran erinnern, was diese Funktion Namen aus, aber diese eine wird Konflikt genannt. Also habe ich nichts codiert. Bestätigen Sie, dass dies eingebaut ist. Und lasst uns einfach den Benutzer zu U12 fragen. Fortsetzung sollte uns den Kerl geben und mal sehen, was passiert. Also sollten wir einen Knopf sehen. Wenn wir auf die Schaltfläche klicken, sollten wir mit einem Bestätigungsdialogfeld angezeigt werden. Bestätigen Sie die Taste. Lassen Sie mich das Semikolon loswerden. Putting JavaScript, dies ist nur HTML ist der Bestätigungs-Button, wenn unser Ticket D12 weiter. Und es fragt mich buchstäblich OK oder Abbrechen. Aber jetzt, wenn ich auf OK oder Abbrechen klicke und nichts passiert, versuchen wir herauszufinden, wie man etwas codiert. Wenn ich auf OK klicke, wie würden wir das tun? Gehen wir zurück zum Code. Wir haben diese Bestätigungs-Dialogbox. Und was JavaScript tut, ist, dass wir tatsächlich die ok. Variable speichern können, das Ergebnis, wo der Benutzer auf OK oder Abbrechen in eine Variable klickt. Und wir werden in Variablen im nächsten Abschnitt kommen, um fest zu halten , um nur einen Container, in dem wir Informationen speichern können. Also lassen Sie es in einer Variablen namens Entscheidung speichern. Die Entscheidung des Benutzers wird also in Penny gespeichert und der Nettowert hängt davon ab, ob er auf Ja oder Nein geklickt hat. Und jetzt kann ich etwas programmieren. Lassen Sie uns etwas mit einer if-Anweisung codieren. Und nochmals, wenn Aussagen, auf die wir später eingehen werden. Ich möchte nur, dass Sie ein Gefühl dafür bekommen, wie wir mit diesen Arten von JavaScript-Ereignissen arbeiten können . Und bevor ich fertig Codierung hier, erinnern Sie sich, wie wir durch die verschiedenen Tochtertypen in JavaScript-Penisen gewesen, warum Donald-Typen sind wichtig? Dieses Bestätigungsdialogfeld, wenn der Benutzer klickt, ja, gibt es true zurück. Und wenn der Benutzer klickt bekannt gibt false, das ist nur unser JavaScript ist diese Funktion in seinen Code eingebaut. Was wir sagen können, ist, dass wir sagen können, wenn die Entscheidung wahr ist, es ist Dokument, richtig? Der Benutzer möchte den Vorgang fortsetzen. Sonst. Und das ist, wenn die Entscheidung falsch ist, das ist Fäulnis. Der Benutzer ist skaliert und möchte nicht fortfahren. Ich hoffe, obwohl Sie die Syntax, die Sie sehen können, nicht vollständig verstehen, können Sie irgendwie folgen, was ich versuche zu tun. Das erste, was wir getan haben, ist, dass wir einen Button erstellt haben. Und die Schaltfläche tut nichts, bis der Benutzer darauf klickt. Das ist es, was dieser onclick bedeutet. Wenn OnClick als Klicks, wir net Ereignis ausgelöst wird. Parser wird diese Funktion sehen, Bestätigung erhalten und es wird dann diese Funktion finden. Es wird wissen, dass es JavaScript ist. Weil wir es in das Skript-Tag gesetzt haben. Es wird diese gute Bestätigungsfunktion finden und ausgeführt. Es wird sagen, Okay, cool, lecken Entscheidung gleich bestätigen. Möchten Sie fortfahren? Wenn es die Bestätigung sieht? Es weiß, dass das eine Funktion ist, also wird es es ausführen. Und dann, wenn der Benutzer auf Ja klickt, wird er einen echten Booleschen Wert zurückgeben. Und wir werden das auf den Bildschirm schreiben. Und wenn diese angeklickt werden, wird Abbrechen falsch sein. Das wird also nicht wahr sein. Und in diesem wird auf dem Bildschirm angezeigt. Lass es uns in Aktion sehen. Also sind diese Bestätigungs-Schaltfläche. Wir klicken darauf. Wenn du das fortsetzen willst, sag nein. Benutzer haben Angst und will nicht fortfahren. Perfekt, Hintern. Aktualisieren Sie Ihre Seite. Lasst uns versuchen zu gehen. Klicken Sie auf die Schaltfläche. Das Sagen, okay, die wollen weitermachen. Das funktioniert. Hoffentlich, immer ein Gefühl für diese, wie cool es ist eine genial und intuitiv. Lasst uns weitermachen. 5. Eingabeaufforderung: Schauen wir uns nun einige JavaScript-Eingabeaufforderungen an. Wir haben uns Alerts angeschaut, wir haben eine Konformationen ausgesehen. Sehen wir uns jetzt die Eingabeaufforderungen an. Wieder. Wir beginnen mit einem HTML5-Dokument. Und wir können so viele Möglichkeiten tun. Wieder, böswillige machen eine Eingabe für jetzt, und wir werden ein Entklicken tun, wird mich Funktion auffordern. Also haben wir unsere Schaltfläche, aber jetzt wenn der Browser kommt, um eine Funktion namens prompt me auszuführen, wird es nicht eine finden, weshalb Butter JavaScript Funktion Schlüsselwort schreiben. Wir haben es gekühlt, um mich zu veranlassen. Und jetzt lassen Sie uns eine JavaScript-Eingabeaufforderung ausgeben ist wirklich nicht schwierig. Sie sehen jetzt mit dem Stichwort prompt, erato message, Meany, Warzenschweine D haben. Und dann ja, Sie können einfach geben, ein kleines Platzhalter fehlt wenig Hinweis. Sie können in Zahl sagen. Wir werden sehen, wie das aussieht. Lassen Sie mich einfach diese anderen Tabs schließen. Vergessen Sie immer, dass dies kein JavaScript ist, um Semikola nicht am Ende zu setzen. Dies ist nur HTML. Also fragen Sie mich peinlich wie unser Knopf. Klicken Sie auf die Schaltfläche. Wie viele Warzenschweine und Yazid wenig Hinweis, dass wir in Anzahl von Wasser gesagt. Jetzt weit Oktan und ich klicke auf OK, nichts wird passieren, weil wir JavaScript nicht gesagt haben , was ohne Eingabewert zu tun ist. Denken Sie daran, wir haben ein bisschen davon mit der Bestätigung gemacht. Nun, wie machen wir das mit prompt? Schauen wir uns mal an. Lass es uns tun. Das erste, was wir tun müssen, ist, dass wir die Verwendungsentscheidung in etwas, in einer Variablen aufhalten müssen. Lasst uns das machen. Nehmen wir Nummer an, weil wir wissen dass der Benutzer eine Zahl Lambda einfügen wird, was auch immer die Verwendungen verwendet werden. Macht so weit gesehen. Und erinnern Sie sich, wie wir über Template-Literale gesprochen haben? Ich hoffe, du tust es, denn ja, wir gehen Dokumentendokument, richtig? Und wir werden Template-Literale als zwei Beck Bindestriche verwenden. Und wir werden sagen, dass du es getan hast. Und wenn Sie eine Variable innerhalb eines Vorlagenliteral eingeben, müssen Sie das Dollarzeichen und die eckigen Klammern verwenden. Und wir haben es Nummer, Nummer genannt. Und jetzt, wenn ich das speichere und dann gehen wir in unser Blatt, Yana Refresh, machen wir es. Lassen Sie uns eine Eingabeaufforderung in die Anzahl der Warzenschweine machen. Nehmen wir an, ich habe drei Wasserzeichen und ich klicke auf OK. Sie haben drei Wasser ist Pasteten. Das ist eine Menge. Und Sie sehen, wie es dynamisch die drei auf der Seite eingefügt wird, das ist genial. Das ist, worum es bei JavaScript geht. Hoffe, du amüsierst dich genauso wie ich. Lasst uns weitermachen. 6. Erstelle eine benutzerdefinierte Benachrichtigung: Denken Sie daran, am Anfang habe ich gesagt, dass die JavaScript-Alert-Funktion ein Systemobjekt ist, was bedeutet, dass wir ihr Land nicht ändern können. Also, wie bekommen wir dann wirklich coole JavaScript-Alert-Tabs angezeigt? Oder ich werde keine Plugins verwenden, weil es in diesem Kurs darum geht, Ihnen JavaScript beizubringen. Und lassen Sie uns einfach einen erstellen. Lassen Sie uns selbst mit Vanille, HTML, CSS und JavaScript erstellen . Wie immer beginnen wir mit einem HTML-Dokument und lassen Sie uns eine Schaltfläche erstellen. Und jetzt erstellen wir eine onclick-Funktion. Und sagen wir, dass ich. Und du siehst auf der rechten Seite, wir haben einen kleinen Knopf hier, kreuzen mich. Aber natürlich passiert nichts, wenn wir Ticket. Bevor wir jetzt in das JavaScript einsteigen, möchte ich tatsächlich erstellen, wie die Warnung aussehen würde und wie ich daran denke. Erstellt ein div, div Tag, das unsere gesamte Warnung enthält. Und dann innerhalb dieses div-Tags möchte ich nur eine Heizung haben. Sagen Sie, das ist eine Warnmeldung. Und dann habe ich einmal eine Schaltfläche, auf die der Benutzer klicken kann. Okay, machen wir das. Lassen Sie uns ein div-Tag haben und sagen wir, wir haben eine ID davon. Das wird der ganze Tank sein, der die Warnung enthält. Und ich wollte schlagen und lassen Sie uns eine andere haben, und es sagte, das ist nur die Nachricht, die heute Morgen Nachricht. Und dann nehmen wir einen Knopf. Misha sagt Glossen. Ja. Ich weiß nicht warum. Irgendwas. Speichern Sie das. Sieht einfach aus wie gobbledygook auf der Webseite ist unsere Botschaft, ist unsere OK-Taste wieder tut nichts. Nun, lasst uns kurz bevor wir JavaScript jetzt nur noch diese Warnmeldung Kitty stylen wollen. Und ich weiß, dass das keine gute Übung ist, aber ich werde nur den Stil in den Kopf stellen. Ich möchte keine externen Stylesheets erstellen und all das jetzt, wir können es einfach tun, um Eigenkapital zu bekommen. Also, was sollen wir zuerst tun? Lassen Sie uns das gesamte div machen. Dies verwendet also nur unsere Standard-CSS-Styling-Techniken zur Identifizierung der ID. Und jetzt können wir es zusammen stylen. Lassen Sie uns es als Block anzeigen. Es hat eine Hintergrundfarbe. Achtundfünfzig, achtundfünfzig, achtundfünfzig. Beginnen, einige Ergebnisse zu sehen. Position fest, Rahmen, zwei Pixel. Ich zeige dir nur, wie das Ding erfunden wird. Lassen Sie uns das auf die gleiche Zeit stellen. Lass es uns etwas breiter machen. Aber fallen zu ihrem Beginn ist nur schieben Sie es, heben Sie ein wenig größer auf. Dies ist nicht der ideale Weg, Dinge zu tun, die ich nur versuche, die Arbeit zu erledigen, um irgendwie nach oben zu schütteln. Und jetzt lasst uns einfach etwas Polsterung setzen. Und seine Ausrichtung, die auf den gleichen Typ nimmt. Es wird immer. Es bringt mich, ich glaube, ich will die Stimmung spüren. Lassen Sie uns jetzt diese Warnmeldung formatieren. Wie nannten wir es? Die goldene Botschaft? Machen wir es zu einer weißen Farbe, damit wir es wirklich lesen können. Was brauchen wir noch Methoden? Marginal sieht schrecklich aus. Anjum oben, Rand, unten. Das sollte unsere Längen- und Längengrad-Taste sein. Sehen Sie, Stine sagt Ihnen, dass Stein viel größer aussieht. Und in den letzten Tag, um diese OK-Taste Stil, weil das sieht Tabelle. Sag noch einmal, was Ethical genannt wurde, geht zurück auf ihn und es geht darum, was du damit machst. Lassen Sie uns eine Hintergrundfarbe machen. Es ist PDS. Und wir würden nicht zuhören, haben genau quadratische Grenzen. Sieht nicht so schön aus. Meiner Meinung nach. Leicht abgerundete Kanten. Vermutlich nicht einmal sehen, aber es ist meine subtile Verbesserung im Design. Wir können jetzt eine Grenze machen, die bereits von einem Bieter schüttelt. Und der Rand unten braucht ein bisschen Arbeit. Rand unten. Und die andere Sache, die ich mit meiner Maus zeigen möchte, schwebt über die, okay, ich wollte ein Zeiger werden. So könnte Ihnen nur helfen, dass Zeiger. Jetzt in einem Mauszeiger über, wird es zu einem Zeiger. Also weißt du, es ist ein Kampf. Cool. Lass es uns etwas breiter machen. Lassen Sie uns einfach etwas Polsterung hinzufügen. Ich schätze, ich werde sagen, es sieht gut aus. Ich sagte, das sieht mächtig aus. Ich ziehe das umgekehrte. Ich sagte, sieht aus wie ein nettes Alert Tab Wave ID in einem anderen Pop-up, das wir sahen. Und du kannst entscheiden, dass diese Dinger so aussehen würden, als hätte ich gerade einen wirklich harten Job gemacht. Jetzt fügen wir JavaScript hinzu. Lassen Sie uns das Off-Skript wieder ausklingen. Geh einfach nach oben. Denken Sie daran, dass JavaScript innerhalb von Skript-Tags sein muss. Und wo sollen wir es hinstellen? Und wo sollen wir es hinstellen? Legen Sie es an die Spitze. Ja. Lass es uns ganz oben stellen. Skript. Skript. Lassen Sie uns diese ganze Bestätigungswarnbox ausblenden. Also im Moment haben wir sie blockieren weniger Cisco Display keine. Und das sollten wir verschwinden sehen. Aber wenn wir wollen, wenn wir auf diese Schaltfläche klicken, wollen wir es sehen. Nun, das erste, was wir tun müssen, ist, dass wir anfangen müssen , eine Funktion für Flügel-Button zu erstellen, die angeklickt werden, richtig? Wenn Sie nach unten schauen, lassen Sie mich einfach wieder nach unten scrollen bis zum Ende des Codes können Sie sehen dass diese Schaltfläche eine Funktion hat, die wir aufgerufen haben Lead me. Wir müssen diese Funktion jetzt in JavaScript definieren. Sonst passiert nichts, was hier passiert. Lassen Sie uns also anfangen, eine Funktion zu definieren, die mich genannt wird. Funktion. Und was wollen wir passieren? Nun, das erste, was wir passieren wollen, ist, dass wir eine Warnmeldung anzeigen wollen. Und um das zu tun, haben wir das ganze div-Tag identifizieren, das die Warnung hat, die wir mit einer ID des Komforts hatten. Also nennen wir es das Bestätigungsfeld oder das Fehlen eines besseren Wortes, Dokuments. Mender auf Ihrer Webseite, JavaScript hat eine eingebaute Methode namens getElementById. Und wir haben ID angerufen. Jetzt haben wir es. Das zweite, was wir tun wollen, ist, wissen Sie, wenn das die Offenheit auf OK Schaltfläche alarmiert, wollen wir die OK-Taste identifizieren, denn wenn die OK-Taste geklickt wird, wollen wir, dass Modal auftaucht, dieser Alarm verschwindet. Das ist also das zweite, was wir wollten. Verspätet. Ok, Schaltfläche gleich Dokument, getElementsByClassName. Was schnell endete. Erinnern Sie sich noch einmal. Wir nennen es. Wenn wir es einfach so heben, wird es tatsächlich zurückkehren. Wenn Sie ein Element nach Klassennamen finden, gibt es, was eine Knotenliste genannt wird. Und es ist fast wie ein Array-ähnliches Objekt. Das ist also nicht genug. Wir müssen nur auf das erste Element dieses Arrays zugreifen, was das dort tut. Jetzt, da wir diesen OK-Button haben, wollen wir ein Unclick definieren. Es bedeutet, dass, wenn der Benutzer darauf klickt, okay, durch das gesamte Dialogfeld verschwindet. Also lasst uns das machen. Und lassen Sie mich hier Kommentare hinzufügen. Und wir haben Kommentare durchgemacht. Dies ist die Schaltfläche im Alert-Modal. Und jetzt wollen wir die Warnung modal ausblenden, wenn eine Schaltfläche angeklickt wird. Also lasst uns das machen. Also lassen Sie uns einen Ereignis-Listener hinzufügen. Klicken Sie auf OK, klicken Sie auf. Und wir müssen die Funktion wieder definieren. Aber lassen Sie uns alles in einem Schritt machen. Und Sie werden später sehen, dass wir eigentlich nicht schreiben müssen, dieses große Schlüsselwort ist ein kürzerer Weg, es zu tun, was neue Syntax ist. Das werde ich dir später beibringen. Ich will nur, dass du verstehst, was wir hier tun. Dann ist eine andere eingebaute Methode in den Browsern und JavaScript und das DOM krank Attribut. Sie können buchstäblich Attribute und verschiedene Elemente auf Ihrer Seite ändern. Also lasst uns das Bestätigungsfeld greifen, das wir oben definiert haben. Und wir können ein Attribut sehen. Und welche Attribute in einem Zustand tun, in dem wir uns erinnern wollten, dass es angezeigt wird. Jetzt, da keine oder Knit Schaltfläche geklickt wird, ist das Attribut, das wir den Stil machen möchten, das erste Argument für diese Methode. Und zweitens ist das, was wir ändern wollen. Und das ist Anzeige für niemanden. Geschmeidig, richtig? Also haben wir jetzt definiert, was mit dem Button innerhalb des Nerd-Modals passiert, aber wir haben das Modal sowieso nicht gezeigt. Also können wir nichts damit machen. Nun, lass es uns einfach hier aufstellen und sagen Show Modal. Wir haben Bestätigungsbox, S8-Attribut. Wir wollen den Stil auswählen und wir möchten anzeigen. Blocken. Sollte es mal gehen. Wie sollten wir schmeckte gute Meeresfrüchte funktioniert. Klicken wir auf die Schaltfläche. Was ist schief gelaufen? Und lassen Sie mich war es nicht funktioniert, wenn andere Click Me. Also etwas, das wir nicht Jake können, ist, wenn wir Log trösten, ja, wir können hoch bloggen. Empfängt das Click-Ereignis funktioniert. Gehen wir einfach zur Konsole. Und lasst uns auf die Schaltfläche klicken. Sie können sehen, dass nichts passiert. Also offensichtlich funktioniert diese Warnung, die mich als Mapping genannt Kissen ist warum auf dem farbigen mich auf Lech auf Scheck sein sollte. Effekt prüfen funktioniert jetzt. Und diese sind hoch und wie ich es will. Okay, großartig. Lassen Sie mich das sofort verstecken. Das Aktualisieren einer Seite, wenn ich auf kommt, wir haben diese OK-Schaltfläche identifiziert. Wenn ich also auf OK klicke, wird diese Funktion ausgeführt, die auf einem sit-Attribut sagt, um keine anzuzeigen und sie verschwindet. Dies ist also wirklich ein Beispiel dafür, wie wir eine Warnung von Grund auf neu erstellt haben, von buchstäblich auf HTML, CSS und ein bisschen JavaScript zerkratzt . Und wir haben buchstäblich unsere eigene, individuell gestaltete Warnung erstellt. Das ist fantastisch. Und das wird auf dem Weg zum Ehrfürchtigen sitzen, CUDA. Lasst uns weitermachen.