Einführung in die Website - HTML, CSS, JavaScript und Bootstrap

1. Einführung: Ich möchte mich bei Ihnen bedanken, dass Sie sich die Zeit genommen haben, meinen Kurs zu besuchen Einführung in die Website-Entwicklungstechnologien. Ich bin dein Ausbilder für Krieg Williams und ich bin seit letzten Jahrzehnt Webentwickler und Vortrag . Jetzt werden in diesem Kurs alle grundlegenden Konzepte untersucht , die erforderlich sind , um Ihnen zu helfen in die Rolle eines Webentwicklers aufzusteigen. Wir werden uns HTML ansehen , eine Markup-Sprache, mit der wir Inhalte in Dokumente einfügen können , die später zu den tatsächlichen gebrannten Webseiten werden oder in ihrem Browser. Wir schauen uns auch CSS an, das zusammen mit HTML verwendet wird , um den HTML-Code schön zu machen. Die Kombination von HTML und CSS ermöglicht es uns also , 1 Inhalt zu platzieren und dann zu stylen. Es ist die Art, die wir uns so wünschen. Wir werden uns auch JavaScript ansehen, das als beliebteste Programmiersprache der Welt angepriesen wird . Es ist sehr einfach zu erlernen und es ist die beliebteste Sprache, die im gesamten Internet verwendet wird . Darüber hinaus werfen wir einen Blick auf UI-Frameworks und konzentrieren uns auf Bootstrap, das beliebteste UI-Framework, das im Wesentlichen eine Paketbibliothek mit am häufigsten verwendeten CSS ist Stile, JavaScript-Methoden und HTML-Code. Um effizient arbeiten zu können. Als Entwickler verwenden wir Visual Studio Code , den Open-Source-Texteditor von Microsoft , der voll von Produktivitätstools und Plug-Ins ist , um Ihnen dabei zu helfen, Ihre Zeit zu maximieren. Es ist sehr mächtig und verfügt über eine Integration für Sprachen und Frameworks auf höherer Ebene. Und es erlaubt unsere Git-Integration. Das stimmt. Ich habe Git erwähnt. Git ist eine Technologie, die es Entwicklern ermöglicht, ihre Änderungen zu verfolgen und eine logische Abfolge von Backups jeder Version ihres Codes beizubehalten . Wir werden also GitHub verwenden , eine der beliebtesten Quellcodeverwaltungsplattformen im Internet, die auf Git basiert. Und es lässt sich sehr einfach in Netlify integrieren, was es uns ermöglicht, direkt von unserem GitHub-Repository aus im Internet bereitzustellen . Know Netlify ermöglicht es uns, erneut direkt von GitHub direkt ins Internet bereitzustellen . Und es ermöglicht uns, das kostenlos mit einigen Einschränkungen zu tun , aber es reicht aus, dass Sie ein Gefühl dafür bekommen was es heißt, etwas zu bauen und es ins Internet zu stellen. also ohne weiteres Lassen Sie uns also ohne weiteres gleich darauf eingehen. Und wieder einmal willkommen bei Einführung in die Website-Entwicklungstechnologien. 2. Visuelle Studio Code installieren: Ordnung, willkommen zurück, Leute beginnen mit Abschnitt 1 dieses Kurses, in dem wir die Grundlagen von HTML, CSS und JavaScript erlernen werden . Bevor wir das tun, müssen wir jedoch unsere Umgebung einrichten nicht ein paar Grundlagen mit Ihnen durchgehen , bevor wir das Tool nicht einmal laden. Eins. Wir verwenden Visual Studio-Code für diesen Kurs oder für diesen Abschnitt der Ergebnisse. Dieser visuelle Studio-Code ist ein sehr, sehr leistungsfähiger Texteditor, der in der Lage ist, viele Sprachen zu behandeln. So ist es perfekt in meinem Buch für HTML und CSS, JavaScript auf dieser Ebene. Davon abgesehen haben Sie möglicherweise bereits etwas Erfahrung oder haben eine Präferenz für das Tool. Und es gibt andere Tools wie Klammern, Dot IO oder sogar Notepad, Notepad Plus I. Wir verwenden jedoch Visual Studio Code und ich empfehle Ihnen, sie zu verwenden. Es ist auch so, dass alle Plug-Ins und alle Tipps zentriert sind, damit ich es Ihnen zeigen werde, Sie können sie voll ausnutzen. Um dorthin zu gelangen, müssen Sie einfach nur durch den Code-Punkt Visual Studio.com stöbern. Und dann können Sie basierend auf Ihrem Betriebssystem für Mac, Windows oder Linux herunterladen. Ich benutze Windows, also würde ich definitiv für Windows herunterladen. Die Installation dafür ist also ziemlich einfach. Alles, was Sie tun müssen Next, Next, Next, Next, und wenn es vollständig installiert ist und Sie es öffnen, werden Sie mit einem ähnlichen Bildschirm begrüßt, dem Begrüßungsbildschirm nein, auf der linken Seite. Und geben Sie einfach einen kurzen Rundgang durch diese IDE zu Ihrer Linken. Sie haben die Möglichkeit, sich anzusehen und zu erkunden, was Ihnen alle Ordner und Dateien in Ihren aktuellen Projekten zeigt . Das ist also eine Sache, die Sie sicherstellen möchten. Jedes Mal, wenn Sie ein Webprojekt erstellen , erstellen Sie einen Ordner, der diesem bestimmten Projekt gewidmet ist . Sie können auch in allen Ihren Codedateien suchen. Wenn Sie sie erhalten, können Sie eine Verbindung zur Quellcodeverwaltung herstellen, und Sie können sich beim Debuggen ansehen. Wissen Sie, im Falle eines HTML-Website-Dokuments müssen Sie sich keine Gedanken über das Schreiben und Debuggen machen. Dies ist eher der Fall, wenn Sie ein komplexes JavaScript-Framework haben , das mit Python R C in einer anderen Sprache arbeitet Python R C in einer anderen Sprache , die ausgeführt werden muss, um mit der Arbeit zu beginnen. Nein, der letzte Tab hier heißt Erweiterungen. Und ich werde Sie nur in die Richtung einiger Erweiterungen weisen , die wir auf jeden Fall nützlich finden werden. Also habe ich eine Reihe von Erweiterungen , weil ich dieses Tool schon eine Weile verwende. Aber für die Zwecke dieser Übung möchte ich Sie ermutigen, einen Live-Server zu erhalten. Sie können also einfach auf Erweiterungen klicken und dann den Live-Server eingeben, die Eingabetaste drücken, dann wird es gefiltert , Sie klicken darauf und dann können Sie installieren. In Ordnung, also geh weiter und hol dir Live Server. Und dann würde ich Sie auch ermutigen, den Bootstrap für die Erweiterung zu bekommen , den ich auch installiert habe. So wird dies später , wenn wir uns an die Entwicklung gewöhnen und so weiter. Und unser Projekt beginnt zu wachsen. Url als du hast nicht mehr viel Zeit, dich auf die kleinen Dinge zu konzentrieren. Diese Tools helfen Ihnen also bei ihrer Produktivität insgesamt. Sie können also weitermachen und diese beiden Erweiterungen überhaupt wissen lassen. Und wenn wir dann wiederkommen, schauen wir uns an, unser allererstes HTML-Dokument zu erstellen. 3. Schreiben deiner ersten HTML-Seite – Text und Links: Alles klar Leute, willkommen zurück. In dieser Lektion beginnen wir also mit Erstellung unserer HTML-Dokumente. Denken Sie daran, dass ich gesagt habe, dass jedes Mal, wenn Sie ein Projekt für ein Webprojekt oder irgendeine Art von Projekten durchführen möchten, immer einen Ordner erstellt oder zumindest irgendwo , dass dieses Projekt auf den damit verbundenen Assets -Projekt wird gespeichert. Was wir also tun werden, ist in Visual Studio Code, wir werden einen Ordner öffnen, oder? Sie haben den Ordner nicht. Das ist in Ordnung. Sobald ich das tue, navigiere ich zu dem Speicherort, an dem ich weiß, dass meine Projekte gespeichert werden, und erstelle dann einen Ordner. Also gehe ich einfach weiter mit der rechten Maustaste sagen New Folder. Und das wäre HTML, ich nenne es HTML Basics. Nachdem ich den Ordner erstellt habe, gehe ich hinein und wähle dann diesen Ordner aus, weiß, was Visual Studio machen wird, und ich bekomme dieses scannbare Vertrauen und das ist in Ordnung. Ich habe die Autoren aller Akten ausgewählt. Alles klar. Um ehrlich zu sein, habe ich diese Warnung manchmal schon einmal vergessen , also ist das gut. Alles klar, was Visual Studio-Code tun wird, ist null die Lösung auf den Standardwert für diesen Ordner festzulegen. In dieser Lösung ist der Explorer oder der Explorer, den Sie sehen werden, der Name des Ordners oben. Und wenn Sie den Mauszeiger in diesem Bereich bewegen, erhalten Sie die Optionen zum Hinzufügen einer neuen Datei, eines neuen Ordners, Aktualisieren oder Ausblenden. Was wir also tun wollen, ist eine neue Datei hinzuzufügen. Keine Faustregel. Jedes Mal, wenn Sie eine Website, ein Webprojekt, eine Gruppe von Webseiten erstellen möchten, was auch immer, Sie möchten sie jedoch in praktisch jeder einzelnen Sprache und unserem Framework klassifizieren . Ihre erste Seite muss Index heißen. Die Erweiterung kann unterschiedlich sein , da wir HTML machen. Es wird index.html sein. Es ist am besten, es als Kleinbuchstaben und alles in Kleinbuchstaben zu belassen als Kleinbuchstaben und alles , da plattformübergreifend einige Plattformen C Kleinbuchstaben bevorzugen , manche ist es egal, aber jeder wird zufrieden sein, wenn es so ist Kleinbuchstaben. Also Kleinbuchstaben I oder ein Kleinwort, index.html, das sollte immer Ihre erste Datei sein. Jetzt, da wir diese Datei erstellt haben, schauen wir uns an, was in diese Datei fließt. Eine HTML-Datei ist also ein Dokument, oder? Und wie gesagt, dies wird dem Benutzer angezeigt. Was auch immer Sie in diese Datei einfügen wird dem Benutzer wirklich angezeigt. Es gibt jedoch bestimmte Regeln im Besitz sind, in das Sie Inhalte einfügen. Also auf der sehr grundlegenden Ebene, wenn ich Hallo Welt sage, nichts zu ausgefallenes, nicht sehr kompliziert aus, oder? Und dann kann ich das mit Live Server in der Vorschau anzeigen. also einfach mit der rechten Maustaste auf die Datei und sagen Sie dann mit Live-Server öffnen. Dann wird Ihr Browser gestartet und Sie würden Hello World sehen. Und das Coole an Booten Live Server ist, dass, wenn ich diese beiden Seite an Seite stelle und alles tippe, was ich in den Lift getippt habe, automatisch nach rechts aktualisiert wird . Es macht Sinn Es ist eine Weile und wenn es nicht gleichen Zeit aktualisiert wird, dann können Sie immer auf Aktualisieren klicken, was Truck immer fernhält, was Sie hier ändern. Wenn Sie es bemerken, ist jede Ladung ohne Körper- oder Kopfmarken nicht möglich. Deshalb muss ich immer wieder auf Aktualisieren klicken. Jedes Mal, wenn ich tippe, passiert nichts. Ich muss auf Refresh money klicken oder sie warnen mich dann. Das sagt mir also, dass mein Dokument etwas Arbeit braucht? Mein Dokument entspricht nicht den Regeln eines HTML-Dokuments. HTML hat also einige strenge Richtlinien , wie der Inhalt sein sollte. Kleine Nummer 1, wir sollten dieses Tag als Doc-Typ-Knoten bezeichnet haben . Der Ductus erklärt dem Browser grundsätzlich, dass ich ein HTML-Dokument bin. Und es ist besonders nützlich für die neueste Art von Dokumenten, nämlich HTML5-Dokumente, damit die meisten modernen Browser wissen würden, okay, ich kann das HTML5-Rendering einsetzen und wissen genau wie behandelt man was in dieses Dokument eingeht. Ich werde selbst, dass wir ein anderes Tag brauchen, auf dem HTML steht. Beachten Sie nun die Anatomie dieser Tucks. Sie haben eine offene Winkelklammer oder ist das, was ich weniger als Zeichen setzt. Und dann haben Sie den Namen des Tags, und dann haben Sie das Zeichen größer als oder die rechte Winkelklammer, um es zu schließen, damit es geöffnet ist. Offene Winkelklammer geben Sie den Namen des Tags ein, schließen Sie abgewinkelte Klammern. Beachten Sie auch, dass ich, als ich HTML eintippte einen oben oben hatte und dann ein anderer einen Schrägstrich hatte. Also öffnest du buchstäblich den Schlepper auf der Nähe und schließt den Tab. Zwischen dem Schlepper legst du den Inhalt ein. Der einzige Inhalt, der jemals direkt in das HTML-Tag fließt , ist ein anderes Tag namens head. Also öffneten wir den Kopf des Winkelklammertyps, schließen die Winkelhalterung und dann einen anderen namens body. Beachten Sie nun, dass es Ihnen immer hilft nur Studio Code versucht Ihnen zu helfen. Und es gibt so große Einschränkungen , dass es Ihnen standardmäßig helfen wird. Das sind Erweiterungen. Ich kann sie auf eine Phobie erhöhen, bekommen, was wir einfach benutzen würden, was wir für nein haben. Es ist gut, die Disziplin zu entwickeln, sie ohne externe Hilfe richtig zu schreiben . Also haben wir das HTML-Tag, und dann haben wir einen offenen und schließenden Kopf. Ich nehme eine offene und enge Leiche. So ähnlich wie bei jedem anderen Dokument. Du hast den Header und du hast den Körper, und dann hast du auch eine Fußzeile. Aber konzeptionell kann man in dieser Situation die Fußzeile in den Körper legen , aber wir haben den Kopf und wir haben den Körper. Schauen wir uns also unter anderem an, was im Kopf war . Im Moment konzentriere ich mich nur auf den Titel. Der Titel wäre also meine erste Webseite. Alles klar. Das ist der Titel der Website und der gesamte Titel wird in den Stadtbezirken angezeigt oder wenn Sie den Browser öffnen, sich in der Wanne befinden und Sie sehen würden wie Amazon.com Strich, was auch immer das ist alles, was sie tun. Sie sehen gerade Titel ist Amazon.com, Titel lautet google.com, was auch immer Sie hier eingeben, das wird im Browser angezeigt . Wir sind ein Wearable, um zu sehen, dass der Neffe im Körper jedoch der tatsächliche Inhalt für das Dokument Ziele ist . Hier hätte ich also meine Hello World getippt. Jetzt, da ich all das getan habe, lass mich zu meinem Live Server zurückkehren und aktualisieren und feststellen, dass es diesmal keine Beschwerden von Visual Studio Code gibt , einem Boot, alles ist Pech. Das heißt, wenn ich weiter tippe und sage, dies ist meine erste Webseite, schau dir an, wie der Live-Server funktioniert. Das wurde für mich automatisch aktualisiert. Und Visual Studio Code beschwert sich nicht weil es jetzt glücklich und zufrieden ist , dass ich vollständig strukturierte HTML-Dokumente habe. Wie ich schon sagte, es sind sehr strenge Regeln dafür. Nun, sobald du das unter Verschluss hast, hast du kein Problem. Beachten Sie auch im Browser-Tab, dass Sie meine erste Webseite sehen. Das haben wir also in den Titel eingefügt. Und dann sind im Dokument unsere Texte. Jetzt. Ja, wir haben Text, aber dann ist es nicht unbedingt ideal für uns, den Text einfach einzuschreiben. Manchmal müssen wir strukturieren, die du wolltest nach links, wir wollen es nach rechts. Wir möchten, dass dieser spezielle Textblock anders aussieht als der andere Textblock. Dann müssen wir verschiedene Tags verwenden , damit sie entsprechend ausgerichtet werden können. Also ja, ich habe diesen Text, aber was ich tun werde, ist es in das zu stecken, was wir ein p-Tag nennen. P ist also die Abkürzung für Absatz. Und das Coole an Visual Studio Code ist , dass wenn Sie den Mauszeiger über diese Hunde bewegen, es Ihnen tatsächlich erklären würde, was sie repräsentieren. Das p-Element stellt also einen Absatz dar. Jedes Mal, wenn Sie einen Textblock haben, empfehle ich Ihnen, ihn in einen p-Typ zu legen. Und dann kannst du mehrere P-Tags haben , die verschiedene Dinge sagen. Dies ist das p-Tag. Alles klar? Oh, das ist das p-Tag. Alles klar. Und Sie haben mehrere Möglichkeiten, Text zu erhalten. Sie haben also das p-Tag, Sie haben auch das, was wir Heterozygoten nennen. Also könnte ich Header sagen und ich werde die Halloworld in die Header-Tags einfügen, also ist das h eins. Alles klar? Und dann hast du H1 bis Sechs. Einer ist also der größte, sechs ist der kleinste. Also werde ich diese einfach duplizieren. Also halte ich einfach die Kontrolle gedrückt und drücke C. und merke, dass ich den Liner oder so nicht hervorhebe. Sehen Sie sich dann einfach V an und es wird die Zeile mit minimalem Aufwand für Sie duplizieren . Also mache ich H2, H3 für fünf und dann sechs. Also das nein, nicht dieser Schwal. Ich öffne und schließe sie richtig. Ich ändere diesen in H2O und schließe es nicht richtig. Das ist normal, immer versucht, diszipliniert zu sein. Moderne Browser haben tatsächlich versucht , Ihre Pfeile zu kompensieren. Wenn Sie also im Browser schauen, werden Sie sehen, dass Sie dass die Größe, wie ich es erwähnt habe, von H1 bis H6, abnimmt und abnimmt. liegt daran, dass es die Tatsache kompensiert , dass ich das Tag nicht richtig geschlossen habe und es geht davon aus, dass ich H2-Tag gemeint habe, also füllt es schon das Leerzeichen für mich aus, aber das ist ein No-Nein. Das ist also eine Sache, die Sie beachten sollten. Ein Boot nimmt Redakteure. Einige von ihnen sind besser als andere darin, Ihnen dies zu zeigen, aber sie werden Ihnen im Allgemeinen nicht sagen, oh, Sie haben einen syntaktischen Fehler. Sie lassen sie einfach in der Anzeige auf der Seite manifestieren, oder es wird sich in beiden Situationen manifestieren. Und dann denken Sie, dass Ihr Code gut ist, aber es ist immer gut, diszipliniert zu sein und es beim ersten Mal richtig zu machen. Wenn ich also ein H1-Tag öffne, schließe ich es. Wenn ich ein H2-Tag öffne, schließe ich es. Wenn ich ein H3 öffne, schließe sie es. Also doppelklicke ich einfach und kopiere und füge ein. Alles klar, das ist alles, was ich hier mache. Und dann würden Sie noch einmal bemerken, nichts Updates im Display vorhanden ist, weil sie bereits wussten dass ich dachte, dass ich jeden 234 und so weiter meinte . Wir haben auch die p-Tags unten, und das sind, okay. Jetzt schauen wir uns ein paar andere Schlepper an. Ich bin mir sicher, dass Sie nützlich finden werden und wahrscheinlich die häufigsten Tags oder Dinge sind, die Sie auf Websites sehen würden. Abgesehen von Texten, die von groß bis klein reichen, bin ich sicher, dass Sie mit Links vertraut sind, da Sie auf einen Link klicken müssen , um von einer Basis zur anderen zu wechseln, oder auf einen Link klicken, um von einer Website zu wechseln ein anderes es, also hast du ein Tag namens Anker-Tag. Wenn du also den Mauszeiger darüber fährst, siehst du es. Wenn das Element ein Attribut hat, stellt es einen Hyperlink dar. Also ein Hyperlink, das ist das schöne Wort, das voraussieht dass Sie einen Link haben oder das ist ein vollständiges Wort, das Sie zwingt, einen Link zu haben, oder? Beachten Sie, dass ein Attribut namens Drift steht. Schauen wir uns also an, was ein Attribut ist. Wir haben also den Schlepper und wir haben festgestellt, dass das, was zwischen dem Open- und Close-Tag liegt, der Inhalt des Themas ist. Mal sehen, wir haben dieses Anker-Tag und ich wollte es mit Amazon verknüpfen. Alles klar, also wird es auftauchen, dass Amazon was auftaucht? Es ist nicht anklickbar, siehe, es ist kein Link, also ist das der Inhalt des Anker-Tags. Aber dann musste ich anklickbar sein. Was ich also tun muss, ist ein Attribut hinzuzufügen. Ein Attribut geht nach innen verbirgt Sie, dass dies das offene Tag ist. Und ich bin von der ANS Spacebar gegangen. Und dann gebe ich dieses Attribut ein H ref. Jetzt gibt es eine Reihe von Attributen, die verwendet werden können. Einige von ihnen sind bisher nicht legal. Einige werden ignoriert, andere werden es durcheinander bringen. In Ordnung? Nun, im Allgemeinen würden Sie meistens ein Attribut namens ID sehen , das wie ein spezieller Name ist , den Sie diesem bestimmten Tag geben. Alles klar, damit ich Link sehen kann, eins, das ist die ID für diesen Link. Aber dann ist das Attribut , das den Link wirklich Common Law macht , das Attribut, das Attribut. Und dann müsste ich den Link eintippen, wohin ich gehen möchte. Also werde ich einfach die vollständige URL eingeben, den Schrägstrich https Colon www.amazon.com. Alles klar, nachdem du das getan hast, beachte, wie es sich automatisch ändert. Wissen Sie, dass der Browser weiß, dass dies ein Link ist , der zu Amazon.com geht. Und wenn ich das sicher genug anklicke, lädt es Amazon. Also habe ich gerade einen mittleren Klick gemacht, damit es in der anderen Wanne auftaucht. Wenn Sie jedoch möchten, dass es automatisch auf der anderen Registerkarte erscheint, denn wenn ich darauf klicke, wird es nur Bros sind wir manchmal nicht wollen, dass das mit unseren Browsern passiert, oder? Wir wollen unsere Trauer mit unserer Website. Manchmal möchten wir, dass sie auf den Link klicken und mit einem anderen pH-Wert dorthin gehen , sich aber nicht von unserer Website entfernen. zu tun, kann ich sehen, dass das Ziel gleich ist und dann den Unterstrich leer sagen. Auf diese Weise weiß der Browser, wann der Link angeklickt wird, öffnet einen anderen Tab oder ein anderes Fenster, das ich sehe. Attribute ermöglichen es Ihnen also, dem es zu tun haben, etwas bestimmten Tag, mit dem Sie es zu tun haben, etwas Besonderes zu geben. Was ist, wenn ich mich daran erinnere, dass wir auf unserer Website aufbauen. Unsere Website ist also eine Sammlung von Webseiten, oder? Nein, wir haben nur eine Seite namens index.html. Was ist, wenn ich zwischen den Seiten navigieren wollte? In Ordnung, also erstelle ich eine andere Seite und nennen wir diese eine Bootspunkt-HTML. Das ist also meine Bootsseite. Und ich gebe ihm die gleiche Grundstruktur und ich werde es die gleiche Grundstruktur und ich werde von Grund auf neu machen, damit du es wieder sehen kannst. Also fangen wir mit dem DOCTYPE HTML an und dann öffne ich das HTML-Tag und dann haben wir den Kopf und dann den Körper. Also im Kopf, den ich sehen wollte, ist eine Bolt Page. Und dann werde ich in den Körper einfach etwas Einfaches setzen. Und C, jeder, ein Boot, eine Rede. In Ordnung, hier würden wir gerne zu ihrer Bootsseite navigieren. Also, wenn ich einen Link wollte, dorthin navigiert, und ich werde diesen Link einfach oben setzen, denn das ist normalerweise der Punkt, an dem das Navbar Zitat ohnehin unquote gehen soll. Also dieser Link, um es zu diesen Kugeln oder Reden zu ermöglichen, sehe ich, dass Alter ref gleich einem Boot-Punkt-HTML ist. Und das ist wirklich alles was man braucht, oder? Ich muss nur die Datei einlegen , zu der ich navigieren möchte. Beachten Sie, dass es immer noch nichts auf der Seite gibt. Warum? Weil ich ihm den Inhalt nicht gegeben habe. Was zwischen dem Öffnen und dem Schließen liegt, ist der Inhalt. Also sage ich einen Bootsbus und dann können wir uns bei Ibotta Rede verbinden. Und wenn wir sicher genug darauf klicken, landen wir auf unserer App Blitz der Rede. Das ist also dieses Loch. Sie können eine Seite mit einer anderen verknüpfen. In Ordnung, also wenn wir zurückkommen, werden wir uns ein paar andere Wertschöpfungs-Tags ansehen , z. B. wie man ein Bild bekommt und wie man zu einer Liste kommt und hält, um mit dem Sitzen von Formularen zu beginnen. Also bleib dran. 4. Entdecke mehr HTML-Tags – Bilder, Formulare und Listen: Willkommen zurück Leute. Wir lernen weiter etwas über die grundlegenden HTML-Tags. Wissen Sie, was wir tun werden, ist einen Blick darauf zu werfen wie wir ein Bild in unser Projekt bekommen können. Also werden wir das mit der About-Seite machen, da es viel weniger Inhalt und Indexseite enthält. Um ein Bild zu bekommen, gehe ich einfach zu einer meiner Lieblingswebsites, die benutzt wird, nämlich pixabay.com. Sie haben also schöne Stockfotos kostenlos. Alles klar, also schnappen wir uns einfach den ersten, den wir sehen. Sie sehen die Blume vielleicht nicht, aber die Konzepte sind Mittel unabhängig von dem Bild, das wir verwenden, kostenloser Download und Download. Ziemlich kleine Größe. Also lasst uns weitermachen und auf Download klicken. Und wenn Sie die Datei erhalten, werden Sie feststellen, dass sie in Ordnung ist, Ihren Download-Ordner geht oder wo auch immer heruntergeladene Dateien auf Ihrem Computer standardmäßig verwendet werden. Wenn Sie jedoch eine Website erstellen, möchten Sie alle Ihre Assets, alle mit der Website verbundenen Dateien im selben Ordner und denselben Speicherort, um den Zugriff zu erleichtern. Denn wie Sie gesehen haben, als wir die Altersreferenz für das Anker-Tag erstellt haben, war es so einfach wie nur den Namen der Seite zu sehen. Und wenn sich der Spandrel nicht im selben Ordner befindet, müsste ich es nach dem Schrägstrich des Doppelpunkts vollständig qualifizieren , je nachdem , welcher Ordnerschrägstrich auch immer Ihr Download-Ordner weit entfernt ist von wo aus Ihr Website-Ordner Kunst sein könnte. Wenn Sie sie also sozusagen auf das DCM-Dach legen , ist Ihre beste Wahl, um es einfach zu haben. So können Sie dieses Bild in Ihrem Dateisystem finden. Sie können es wie im Drag & Drop aus diesem Ordner in Ihren Visual Studio-Code kopieren . Und es wird automatisch mit all Ihren Web-Assets in diesen Ordner gelangen . Okay, also kannst du weitermachen und das machen. Und eine Sache, auf die ich hinweisen möchte, bevor wir vorankommen , ist, dass Sie möglicherweise einen Bildnamen erhalten. Aber dann könnte dieser Bildname kompliziert werden denn wenn Sie es erzählte Bild eingeben müssen und oben in den Typ Watson, Florida-Dash-Punkt alphanumerisch oder welchen Code auch immer, Punkt JPEG. Sie möchten also immer versuchen, Ihre Dateien in etwas Einfaches oder etwas sehr Indikatives umzubenennen Einfaches oder etwas sehr , damit Sie sie leicht abholen können. Also benenne ich diesen Start einfach all diese Nummern um und nenne es Sunflower Dot JPEG. Erweiterungen sind sehr wichtig, wenn es P&G ist, ändern Sie es nicht. Wenn es JPEG ist, ändere es nicht. Wenn es GIF ist, ändere es nicht. Was auch immer Sie nennen, es gibt immer eine Routine zurück, diesen Punkt und was könnte jemals die Punkte Alphabetisieren. Okay, also Sonnenblumenpunkt JPEG oder JPEG nennen sie diese Buchstabenkombination. Wissen Sie, dass wir unser Sonnenblumenbild in unserer Mappe haben und einsatzbereit sind. Sie können auf Ihre Seite gehen und dann einfach das verwenden, was Sie als IMG-Tag bezeichnen. Dieses Tag ist etwas Besonderes, da es sich im Gegensatz zu den anderen Tags selbst schließt. Es hat kein offenes IMG und schließt IMG. Der Körper öffnet und schließt, öffnet und schließt. Ischämisch. das H1, alle, die wir bis zu diesem Zeitpunkt angeschaut haben Öffnet und schließt das H1, alle, die wir bis zu diesem Zeitpunkt angeschaut haben. IMG schließt sich jedoch selbst. Wie sagen wir dem IMG, welches Bild es anzeigen soll? Nun, wir verwenden Attribute. Die ersten und wahrscheinlich wichtigsten Attribute sind also das SRC. Src sagt: Wo ist die Quelle? In Ordnung? Die Quelle des Bildes wäre also und es wäre der Pfad des Bildes. Ein Boot ist also direkt neben dem Boden, also ist die Quelle Sonnenblume, oder? Ich habe nicht bemerkt, dass der Visual Studio-Code tatsächlich den Vorschlag macht, dass alles, was Sie versuchen , den Slum-Boden zu bekommen, drücken Sie die Eingabetaste und es wird automatisch für Sie auf dem Live-Server sehen Live-Server wird nett und einfach sein. Wenn Sie nun die Größe anpassen wollten, können Sie immer nur sehen, dass es ein anderes Attribut namens width war . So könnten Sie diese 200 reduzieren, Sie könnten sie auf 900 erhöhen. Nun, natürlich wollte er damit sehr vorsichtig sein , denn das Bild, das wir bekamen, war auf diesem 64, um etwas Pixel zu kaufen. Also möchte ich die Breite nicht auf mehr erhöhen als die Bilder, weil sie dann pixelig werden. Das ist also eine Sache , die man beachten sollte. Sie bei der Auswahl von Bildern für verschiedene Zwecke sicher, dass sie groß genug für den Abschnitt sind , in dem Sie sie haben möchten. Oder wenn sie in einen kleineren Abschnitt gehen , wird es aber als beeindruckend bezeichnet , so dass es insgesamt weniger Speicherplatz auf Ihrer Festplatte beansprucht und es weniger Zeit benötigt, um die Vermögenswerte für eine Website. Stellen Sie sich vor, Sie versuchen, diese B3-Megabyte-Datei zu laden , die wirklich nur 200 Breiten anzeigt , oder? Wenn Sie es komprimiert haben, wäre es wahrscheinlich eine 200-Kilobyte-Datei. Du bist sauer auf Lord Foster. Wissen Sie, genau wie bei der Breite können Sie auch die Höhe einstellen und Sie können Spaß damit haben. Es gibt nicht viel mehr, was ich dazu sagen kann , dass du einfach Spaß haben kannst. Du spielst mit den Dimensionen herum, wenn du brauchst. Sie werden also verschiedene Bilder finden und versuchen, sie einzufügen, indem sie entsprechend ausrichten. Aber so bekommt man ein Bild rein. Wieder einmal ist das ein selbstschließendes Tag. Es gibt mehrere davon. Dann wirst du einige von ihnen nie benutzen, bis du zwei Seelen hast. Ich meine, das nicht erwähnt, nein, aber ich weiß, dass sie da sind. Und obwohl ich dir nie ein einzelnes Tag beibringen kann, würde ich nicht sehen, dass es möglich ist, jedes einzelne Tag in jedem einzelnen Szenario, in dem sie verwendet werden, beizubringen jedes einzelne Tag in jedem einzelnen . Ich würde Sie nur ermutigen zu experimentieren und zu üben, und das ist alles, was Sie Ihre Fähigkeiten zur Webentwicklung wirklich entwickeln werden. Nun, das nächste Mal, wenn wir uns ansehen wollen, sind es wirklich zwei Tags, die irgendwie Hand in Hand gehen weil sie sehr ähnliche Dinge tun, wären Listen? Nein. Sie wären mit Listen vertraut, wenn Sie Microsoft Word verwenden und er eine Aufzählungsliste wünscht oder 123 wollte, jede Form von Auflistung, können Sie dies mit HTML und seinen Teilnehmern erreichen. Sie haben nur das UL-Tag, das die Abkürzung für die ungeordnete Liste ist. Und eine ungeordnete Liste enthält immer ein Listenelement, oder mehrere Listenelemente. Nein, außer unserem Listenelement-Tag sollte nichts in dieses UL-Tag hineingehen . Nachdem Sie das Listenelement-Tag eingefügt haben, können Sie wieder verrückt werden mit dem, was Sie wollen, setzen Sie ein p-Tag ein, oder? Liste, Punkt eins. Du könntest eine andere Art von Krawatte anlegen. Du könntest es auf H etwas Ziel setzen, oder? Du könntest ein Handtuch im Alter von fünf Jahren einlegen, wenn du willst. Jede Art von Typ kann gehen, aber Sie möchten dieses h5-Tag nie direkt in diese Liste einfügen , in diesem UL-Tag rhabdo, weil Sie sich den verschiedenen Schnee ansehen, diese Kugel verschwindet und dann bin ich mir sicher es geht nach Crayola, es geht um etwas anderes. Wie ich schon sagte, es sagt Ihnen im Schnitt vielleicht nicht schrecklich über diese Fehler. Meistens wird es sich definitiv im Display manifestieren. Okay, also willst du nur die Regeln befolgen. Ally UL, tut mir leid, öffne die ungeordnete Liste, dann beginnst du mit dem Listenelement und fügst dann was du willst in das Listenelement ein. Also p-Tag, Alter 59, lege ein Bild in das Listenelement-Tag. Es spielt wirklich keine Rolle. In Ordnung, also wollen wir nur wissen, dass die andere Version der Liste die, OH, die die geordnete Liste wäre. Wenn wir also 1, 2, 3 wollen , gehen wir los. Dann sehen wir OLC. Sie sehen, dass diese beiden wirklich identisch sind. Sie sind wie sehr enge Cousins, oder? Das wirst du. Und Öl, beide haben die gleiche Struktur darin. Sowohl graben Listenelemente auch immer Sie benötigen, wird in dieses Listenelement-Tag eingeblendet. Ich weiß es. Und schauen wir uns den nächsten großen Ticketgegenstand an, der das Formular ist. Was ich tun werde, erstellt ein neues Dokument, und dieses wird Kontaktpunkt HTML genannt. Kontakte dot HTML. Ich werde die gleiche Struktur von noaa aufheben. hoffe, Sie hätten an dieser Stelle ein 10-jähriges, damit vertrautes Jahr geübt , Kopf und Körper Ich entschuldige mich aufrichtig dafür , dass ich vergessen habe zu erwähnen, dass Sie Ihr Dokument bei jeder Änderung speichern müssen . Ich schätze, du hast es rausgefunden. Ich weiß, aber ich das war eine Aufsicht meinerseits. Ich entschuldige mich. Aber Sie müssen sehen, welche Änderungen Sie vornehmen, bevor ein Live-Server Erwachsene und Alt auswählt. Eine Sache, die ich getan habe, weil ich mich nicht immer daran erinnere zu sehen, ob ich so bin, oh, nein, ich habe nicht erwähnt , dass du sparen musst. Es liegt daran, dass ich Autosave aktiviert hatte. In Visual Studio Code können Sie also Autosave sagen. Welche Änderungen auch immer Sie vornehmen, werden reflektiert, weshalb mein Live-Server immer aktualisiert wird weil er immer automatisch im Fehleranfälligen gespeichert wird . Also entschuldige ich mich dafür, dass ich das nicht vor Null erwähnt habe. Lassen Sie uns jedoch vorankommen. Innerhalb unserer Kontaktseite haben wir also den Titel. Das macht also lustige Tomaten. Und dann werde ich in den Körper ein H1-Tag setzen , auf dem Font ductus steht, damit jeder, der auf dieser Seite landet, weiß, auf welcher Seite er sich befindet, richtig? Jetzt hat normalerweise ein Kontaktformular gut, Formular, ein Sprachkontakt hat außerhalb der Farm. Schauen wir uns also auch an, wie wir Formen und Formen formulieren, die wirklich einfach sind. Aber ich muss erwähnen, dass Formulare das Gateway zwischen einem Benutzer und Ihren internen Systemen sind. Denn jedes Mal, wenn ein Benutzer etwas eingibt oder etwas in das Formular eingibt und dann auf Senden klickt. Sie schicken tatsächlich Theta an Ihr System. Später, wenn Sie ein höheres Entwicklungsniveau erreichen und auf Datenbanken aufbauen, bauen Sie Web-Interfaces auf einer Datenbank auf. Und wie bei der ASP.NET-Kernentwicklung werden wir uns bestimmte Sicherheitsfunktionen ansehen, die wir benötigen, um sicherzustellen, dass wir unsere Systeme einbetten. Lassen Sie uns jedoch vorerst einfach weitermachen. Um also zum Formular zu gelangen, haben wir das Formular-Tag, oder? Und ich sagte einfach, unkompliziert genug. Lassen Sie mich das einfach angemessen tippen. Formular. Nein, form hat drei Arten von Tags, die er annehmen kann. Sagen wir einfach großzügig, dass es mindestens vier Arten von Zielen gibt , oder? Wir haben das, was wir das Label nennen. Label ist wichtig , weil es uns sagt oder es uns erlaubt zu sehen. Das Feld wird bald bearbeitet. Lass mich meine Rechtschreibung richtig machen. Und merke, dass ich versuche alles in Kleinbuchstaben zu machen , oder? Die Labels sind welche Felder, also wäre das FirstName, das ist mein Label, oder? Dann werde ich sagen, welche Kontrolle ich den Vornamen akzeptieren möchte und welche Kontrolle wäre am besten, wenn Sie ein Textfeld sagen würden, dann sind Sie richtig mit dem Geld denn normalerweise wenn Sie es sind wenn du deinen Namen eintippst, es ist Text. Und Sie erhalten ein Feld, dem Sie Text eingeben können. Es ist also ein Textfeld. Also denkst du wahrscheinlich: Okay, also gibt es ein Textfeld, von dem Doug weiß, dass es anders ist. Sie haben ein Eingabe-Tag. Alles klar. Was ist auch selbstschließend. Wissen Sie, dass die Eingabe Attribute benötigt, die ihm helfen , unsere Rauschidentität zu definieren. Also würde ich sagen, der Typ ist gleich 0. Und dann sehen wir hier die ganze Liste der Eingangstypen, oder? Von oben ausgehend kann es ein Farbfeld sein, das all diese wunderbaren Dinge gemacht hat. Aber gerade für den Vornamen wäre das Textfeld am besten geeignet. Geben Sie also gleichem Text ein. Alles klar, ich zeige dir was anderes. Denken Sie daran, dass ich zuvor das ID-Attribut Dies ist ein spezieller Name , den wir diesem Tag geben. Nun, wenn ich fname sehe, kann ich damit dieses Label und das C-Label verwenden. Und dann gebe ich ihm das gleiche F9. Alles klar? Und obwohl ein wichtiges Attribut , das mit Eingabe-Tags einhergeht, insbesondere wenn Sie es mit serverseitigem Code zu tun haben , der Name ist. Man würde also sagen, dass Name gleich ist. Und wenn Name, also ist der Name sehr wichtig, wenn Sie die Intelligenz mit Python, PHP, C-Sharp aufsetzen , wie wir es mit Dotnet Core tun werden. Es ermöglicht dieser Sprache, den Wert tatsächlich zu sehen , der von diesem bestimmten Steuerelement kommt. Also haben wir das Formular wo auch immer Label, wir haben ein Textfeld. Also FirstName, das ist erledigt. Wir können eine E-Mail-Adresse erstellen. Lassen Sie uns also sehen, dass nur der vollständige Name anstelle von Vornamen auch ein Fname ist. Fname kann der vollständige Name sein, oder? Diese, mal sehen, eine E-Mail. Ich möchte also die E-Mail-Adresse des Benutzers, der versucht, die E-Mail-Adresse zu kontaktieren. Und dann werde ich sehen, dass der Typ gleich ist und siehe da, es gibt einen E-Mail-Typ, die IDS-E-Mail. Also rufe ich nur diese E-Mail an. Ich hätte seine beginnende E-Mail-Adresse vollständig qualifizieren können und die ID und der Name müssen nicht unbedingt dasselbe sein. Alles klar. Also spiele ich hier nur ein bisschen herum. Lassen Sie mich diese Vakanz den Code vollständig erweitern. Okay, also haben wir unseren vollständigen Namen, wir haben unsere E-Mail-Adresse. Was brauchen wir sonst noch in unserem Kontaktformular? Nehmen wir an, Sie brauchten die Abfrage. Also noch einmal mehr von diesem Etikett und ich werde es Abfrage oder Beschwerde nennen , was auch immer es ist. Und die Arbeit wird Abfrage sagen. Wissen Sie, dass die Abfrage würde, was der Absatz sehen würde? Ich bin deswegen verärgert. Deshalb kontaktiere ich mich. Sie möchten ihnen erlauben, den Aufsatz zu lesen , zu dem sie hierher gekommen sind, sowieso, lesen. Dort werden Sie den Textbereich sehen, da der Bereich benötigt wird, gibt Ihnen einen viel größeren Platz zum Schreiben, nimmt auf, so dass der Pfeil benötigt wird. Und dann brauchen wir noch einmal keinen Typ, weil sie bereits wissen, dass es Bereich nimmt. Aber wir können ihm eine ID geben und ich sage einfach eine Anfrage. Und noch einmal möchten wir ihm den Namen geben , damit wir eine Abfrage sehen können. Alles klar, jetzt schauen wir uns unsere bisherige harte Arbeit kurz an. Was ich tun werde, gehe zurück zum Index und erstelle eine andere URL. Und dieses hier rufe ich Kontaktpunkt HTML an. Und es macht Spaß. Sprechen Sie mit uns. Keine gute Faustregel bei Website-Design und Website, da es mehrere Dokumente, mehrere Seiten gibt , die Sie von jeder Seite zu jeder Seite von jedem anderen pH-Wert aus gelangen möchten , oder? Was Sie also tun müssten, ist eines, ein neues Anker-Tag hinzuzufügen, das auf die Homepage verweist. Okay, also ja, es ist die Homepage, die auf die Homepage verweist , genau wie alles, was Sie auf der Homepage unserer Websites wären. Melden Sie sich an. Graustufen bringt dich einfach zurück zur Homepage. Es ist nirgendwohin gegangen, oder? Wir haben also diesen Link zur Homepage, aber dann können wir diesen Abschnitt kopieren. Alles klar, ich möchte nicht nur eine Var verwenden oder wie wir es zwischendurch nennen. Wenn Sie also die westliche Tastatur verwenden, dann ist dies die Verschiebung des umgekehrten Schrägstrichs , der sich normalerweise über der Eingabetaste befindet, die Ihnen diese Pipe gibt, oder? Also das trennen sich in den Anker-Tags. Und dann setze ich diese Anker-Tags auf jede einzelne Seite, oder? Also sowohl der Inhalt, um zu sehen, auf welcher Seite ich bin. Ich habe diese provisorische Navigation damit mit dem Durchlaufen, um zwischen den Seiten zu wechseln. Siehst du das? So kommen diese Konzepte für ein hippes Entscheidungsdesign zusammen, oder? Nach und nach siehst du, wie alles den Knoten verbindet und den Knoten , der ich habe diese Navigation zwischen den Seiten festgelegt. Wenn ich aktualisiere oder zurück gehe, um zu navigieren, sehe ich, dass ich, wenn ich auf Home klicke, insgesamt bin, aber sieh dir das an, ich kann aufstehen wem ich zu dieser Maltose kommen kann. Ich kann zurück nach Hause gehen, ich kann zu Kontakt gehen, schau dir das an, dann kann ich auch zurück zu einem Boot gehen. Konzentrieren wir uns jetzt auf einen Kontakt. Also haben wir unsere Lehrbücher Das ist cool. Sieh dir das an, nimmt Boxen und dann können wir unsere Anfrage schreiben. Das ist gut, aber ich bin mit dem Layout nicht ganz zufrieden und ich bin mir sicher, dass Sie es auch nicht tun , weil ich sicher bin, dass Sie es nicht gewohnt sind, diese Formulare in einer Zeile zu kontaktieren. In Ordnung? Was wir also tun wollen, ist eine Pause zwischen ihnen einzurichten, oder? Um den Brick New TAG Alert aufzurufen, haben wir das selbstschließende BR-Tag. Br heißt nur BreakLine, oder? Du repräsentierst nur eine Zusammenfassung. Wenn Sie also die Eingabetaste in Microsoft Word drücken Eingabetaste in Microsoft Word , tippen, tippen, tippen und tippen, möchten Sie zur nächsten Zeile wechseln. Sie drücken die Eingabetaste und tippen erneut. BR ermöglicht es Ihnen also, die Ziegelbremslinie zwischen den Inhaltsblöcken auf Ihrer Seite zu setzen . Beachten Sie jedoch, dass wir auf der Indexseite nicht brechen mussten, als wir die H1 und die Ps gemacht haben , weil sie irgendwie mit einem eigenen Bremsmechanismus ausgestattet sind. also innerhalb eines P-Tags Wenn ich also innerhalb eines P-Tags einen Textblock haben wollte, dann einen weiteren Textblock , aber innerhalb desselben p-Tags, dann könnte ich dieses BR-Tag einfach injizieren. Und das zeige ich dir schnell. Sagen wir also, ich habe es getan, das ist meine erste Webseite. Ich kann wissen, dass ich das in der neuen Zeile will. Nicht wie gesagt, wenn ich zu meiner Indexseite zurückkehre, merke ich, dass alles da drin ist. Die Zeile, wenn ich Enter Stint in der Pieta gedrückt habe, ist hier ein P-Tag geöffnet und geschlossen. Und lasst uns drei Leerzeichen für Leerzeichen dazwischen setzen und ich gehe zurück, keine Veränderung, oder? Es geht immer noch auf ein Auge. Und deshalb brauchen wir diese Pausenzeit, um ihr dann zu sagen, dass sie in die nächste Zeile und so viele Pausen gehen soll , wie wir gesetzt haben, so viele Zeilen, wie er vorstellen wird, aber wir sind immer noch in der Szene. P-Tag. Alles klar, also das ist, dass dieser Break-Tag in diesen Situationen wirklich für uns funktioniert. Also zurück zu unserem Kontaktformular. Wir haben den vollständigen Namen und Ihren vollständigen Namen gesagt. Gib mir einen kurzen und dann das nächste Label. Geben Sie ein, was Sie eingeben müssen, geben Sie Maverick und geben Sie dann ein. Was musst du eintragen? sieht unsere Kontaktseite so aus. Nein. Nun, es gibt verschiedene Interpretationen darüber, wie Formen aussehen können. Ich bin mit diesem immer noch nicht zufrieden. Ich möchte nicht, dass meine Labels und meine Textfelder meine Steuerelemente in derselben Zeile sind. Also rate mal, was ich tun kann. Führe eine Pause ein. Siehst du, nett und einfach. Also beschrifte, gib mir eine neue Zeile, dann gib mir das Textfeld, gib mir eine neue Zeile, dann gib mir das nächste Level und du landest das, richtig. Auf diese Weise gehen wir los, das sieht viel besser aussehende Form nach. Das ist eine viel besser aussehende Form als das, was wir gerade null hatten. Und wenn wir mehr Platz wollen, brechen wir einfach zweimal dazwischen. So vollständiger Name und dann bekommen wir etwas Tageslicht dazwischen. Da sind wir los. Alles klar. Wir können gut lesen. Das nächste Ding wäre jetzt ein Knopf. Wenn du zuguckst und sie sagten, okay, nun, wo ist der Knopf? Das ist gut. Du bräuchtest einen Knopf namens Solis. Werden sie sich einreichen? Sie brauchen einen Absende-Button. Also bei all dem kann ich einfach zwei weitere Steine setzen und dann kann ich sehen Eingabetyp gesendet wird. In Ordnung, dann kann ich sagen, dass das Volumen gleich ist, und dann kann ich diktieren was ich auf das Buch gedruckt werden möchte damit ich sagen kann, dass ich deine Anfrage einreichen und sie so ausführlich schreiben kann wie du muss im Moment sein Es schließt sich selbst. Also Schrägstrich und die Go-Klammer und los geht's, senden Sie Ihre Anfrage. Wissen Sie, dass jedes Formular eine Aktion hat. Ich bin mir sicher, dass mehr steht , wenn Sie ein Formular ausfüllen und auf Absenden klicken, es geht normalerweise auf eine andere Seite. Würde es normalerweise entweder eines von zwei Dingen tun. Entschuldigung. Es wird Ihnen entweder mitgeteilt das von Ihnen übermittelte Formular ungültig ist, da die Daten bestimmte Anforderungen nicht erfüllen oder es wird auf eine andere Seite gehen, bis die Daten erfolgreich gespeichert wurden. Also kann ich sagen, dass die Form Sauerstoff gleich ist und dann kann ich es aufgeben Seite. Wenn ich also sage, dass die Farmauktion gleich index.html ist, bedeutet das, dass sie nach dem Absenden auf die Indexseite geht . Überall wo ich hier hingelegt habe , ist der Ort, an dem es das Werkzeug navigieren würde. Wenn ich also sage, dass Sie Ihre Anfrage absenden, beachten Sie, dass sie gerade navigiert ist. Normalerweise wäre das Layout der Indexseite nicht so. Erfolg, PJ oder etwas, das zu sagen hatte erfolgreich gerettet. Aber dann habe ich keine Art von Rede. Also bekomme ich eine sogenannte 40 für Pfeil. Und es sieht nicht die Seite bekommen. Beachten Sie auch, dass die Namen der Steuerelemente, die ich dem Formular hinzugefügt habe, dort in der URL aufgeführt sind. Das nennt man also eine Abfragezeichenfolge, oder? Wenn du also auf Google oder YouTube gehst und süße Kätzchen eintippst, bin ich mir sicher, was du sehen wirst ist die Youtube.com Slash-Suche. Mit diesem Fragezeichen. Dann entspricht die Suche vielleicht unserer Suchanfrage gleich, was Sie eingegeben haben. Das ist also alles, was wirklich tut, auch wenn das ein Formular ist. In Ordnung? Formulare sind also jedes Mal überall vorhanden, wenn Sie Informationen eingeben und auf eine Schaltfläche klicken, Sie haben ein Formular eingereicht. Nur als Test gebe ich einfach den Namen von jemandem ein , reiche die Abfrage ein und sehe, ob der Name dem Namen entspricht , den ich gerade eingegeben habe. Die E-Mail-Adresse entspricht der E-Mail-Adresse, die ich gerade bei Anfragen eingegeben habe. Ich habe keine Abfrage eingegeben. Nun, ich zeige dir nur, was passiert. Das ist also halten diese serverseitigen Sprachen. Nein, kann sagen, hol mir diese Variable und welcher Wert auch immer dafür möglich war. All dies wird jedes Mal gesendet, wenn Sie ein Formular absenden. Lassen Sie mich also einfach zurückgehen und die Erfolgsseite für unsere Formularübermittlung einrichten . Also sage ich einfach eine neue Akte. Eine andere Möglichkeit, eine neue Modeerscheinung zu erstellen, besteht darin , mit der rechten Maustaste im Explorer zu klicken. Wenn ich mit der rechten Maustaste klicke, erhalte ich die gleiche Option, um eine neue Datei oder einen neuen Ordner zu erstellen. Also werde ich eine neue Datei sagen, ich möchte keinen Erfolgspunkt HTML und dann subsetss dot HTML sehen . Ich möchte noch einmal, dass es überall auf meiner Website navigieren kann . Also gebe ich ihm das gleiche HTML-Skelett. Und zu diesem Zeitpunkt haben wir das Skelett ein paar Mal geschrieben. Visual Studio Code ermöglicht es uns also , als Produktivitätswerkzeug, das es ist, einfach HTML Doppelpunkt fünf zu sagen und uns anzusehen, was es für uns generiert. Wir sehen also ein bisschen mehr als wo Sie noch werden, aber lassen Sie sich davon nicht entmutigen, weil es sehr, sehr, sehr praktisch ist , oder? Wir sehen also immer noch unseren Doctype, wir bekommen immer noch unser HTML-Tag. Ich werde kein Attribut haben, bei dem es dem Browser mitteilt, in welcher Sprache sich die Website befinden wird. Wir bekommen ein paar Meta-Tags, die wir uns später ansehen werden. Wie fast alle FADH sind dies Zerstörung oder Analog, löschen Sie sie einfach. Und dann kriegen wir den Titel und den Körper. Der Titel hier wäre also Erfolg. Und im Körper werde ich die Navbar-Links einsetzen und Navbar-Links zitieren, damit wir dorthin navigieren können, wohin wir gehen möchten. Geben Sie ihm das H1-Tag , um zu sehen, dass Sie erfolgreich sind oder Ihre Daten als sündig angesehen wurden , wurden gespeichert. Alles klar, also probieren wir unser Formular noch einmal aus. Also werde ich das eintragen, und das ist meine Frage. Absenden, Ihre Daten wurden gespeichert. Wissen Sie also, dass unser Erfolg noch einmal arbeitet Wenn Sie in die Abfragezeichenfolge schauen, sehen Sie die Abfrage mit den übermittelten Daten. Von hier aus. Ich kann wählen, ob ich kämmen möchte. Ich kann wählen, zu Amazon zu gehen, ich kann wählen, ob ich überall gehen möchte. Sie sehen also, Formulare sind auch nicht so kompliziert. Es gibt viele Arten von Formularsteuerelementen, die Sie verwenden können. Sie können weitermachen und erkunden, einfach eingeben, und sie können sich ansehen, was Sie für jeden dieser Typen erhalten. Ich habe dir gerade gezeigt, dass die häufigsten sind. Aber Sie können eine Telefonnummer erhalten, Sie können Suchbereich, Passwort und alle Arten von Steuerungstypen abrufen . Daher ermutige ich Sie, aus komplexeren Gründen ein Forum zu erstellen und mit den verschiedenen Kontrolltypen zu experimentieren , die es gibt. 5. Noch mehr HTML-Tags – Tabellen, Kommentare und Inline-Stile: Hey Leute, willkommen zurück. Wir schauen uns also immer noch HTML und einige der beliebtesten oder am häufigsten verwendeten Tags an. Und als nächstes sind Tische. Tische können also etwas kompliziert sein. Es und Formen sind normalerweise die kompliziertesten, aber deshalb sind wir hier, um diese Hindernisse in unserem Wissen abzubauen . Werfen wir einen Blick darauf, was Tabellen sind, und wir verwenden dafür die Boats-Dot-HTML-Seite. Also werde ich mich einfach kuscheln. also in Visual Studio Code Wenn Sie also in Visual Studio Code den Mauszeiger über die Schaltflächen bewegen, sehen Sie Karotten und dann können Sie einfach auf Zerstäuber reduzieren klicken . Sieh dir das an. Lasst uns damit anfangen. Es ist also ein Anfang des Tisches. Ja, du hast es erraten. Wir haben einen offenen und schließenden Tisch. Das ist sein Artikel. Nein, eine Tabelle ist wie eine Excel-Tabelle gedacht oder ich bin mir sicher, dass Sie daran gewöhnt sind, was eine Tabelle auf einem Blatt Papier ist , wenn Sie Zeilen und Spalten haben. Lassen Sie uns nun begreifen , dass es zunächst mit unserer Rolle beginnt. Innerhalb der Tabelle geht also kein anderer Inhalt ein. Aber für eine TR, die kurz für Tabelle ist, Rolle. Okay, die Rolle von Zellen in einer Tabelle. Nein, ich rolle hat Spalten oder ich nenne mich lieber Modi , dass sie sich auch selbst nennen. Warum heißen sie Zellen? Weil es sich buchstäblich um einzelne Einheiten handelt. Es sind nicht unbedingt die Säulen , die ganz nach unten gehen. Die Rolle hat Zellen. Sie fügen also nur eine Zelle oder TB oder Tabellendaten in die Rolle ein, sagt viele Zellen oder wie Sie sie wahrscheinlich bereinigen würden, um die Spalten zu analysieren , da Sie so viele TD-Tags einfügen lassen. Wenn ich also eine Auflistung sein würde oder vielleicht Name, Alter und sagen wir mal das Geburtsdatum mehrerer Personen außerhalb der Mitarbeiter für unsere Firma, ein Boot, dem diese Seite gewidmet ist, schreibe eine Sprechkugel. Also listen wir alle Mitarbeiter auf. Lassen Sie mich das also quantifizieren und es vielleicht in ein h3-Tag einfügen , das Details der Mitglieder enthält. Alles klar. Also Details der Mitarbeiter, Nehmen wir an, wir hatten eine TR und dann möchten Sie eine Überschrift für die Daten geben , die unten aufgeführt sind. Statt td beginnen wir also mit th. Das ist die Abkürzung für Tabellenkopf, oder? Weil Sie normalerweise eine Regel haben, die besagt, was jede Spalte darstellt. Ein Name, Vorname, Nachname, Geburtsalter. Nun, Tisch, damit Sie sich erinnern, wenn Sie in der fünften Spalte sind, Oh, das ist es, was das darstellt, oder? Also werden wir einen Namen haben. Wir werden, sagen wir mal etwas Einfaches, Bild und Personalausweis haben sagen wir mal etwas Einfaches, . Okay, das ist also unsere Tabelle, das ist unsere erste Rolle, und das ist der Satz von Spalten für alle Zellen, die sich in den anderen Zeilen befinden werden. Das ist also Rolle eins für die zweite Regel oder den eigentlichen Mitarbeiter, ich habe nur einen weiteren TR, dann öffne td und dann wäre der Name hier Lewis zu spüren. Alles klar. Was ich tun werde, ist einfach Control CV zu verwenden, diese kleine Verknüpfung, um Zeilen zu duplizieren. Lewis ist 29 Jahre alt und sein Personalausweis ist 77. Etwas ist und all das Zeug. Denken Sie daran? So viele Mitarbeiter, so viele Zeilen wie Geld Daten verkauft, kann ich einfach weiter kopieren und einfügen und einfach die Daten ändern. Jetzt ist dies offensichtlich nicht sehr dynamisch, besonders wenn diese Nato aus der Mitarbeiterdatenbank stammen sollte . Wenn wir es also verwenden dotnet Core, schauen wir uns an, wie genau wir diese ganze Generation automatisieren werden. Welches fremde? Oh, es ist sehr Geld. Nun, lasst uns einfach Hannah haben, wie Milton und dieses Problem 32 ist, und ihre Zeug-ID wäre Werkzeug 234. Alles klar. Werfen wir einen Blick auf unsere About-Seite damit ich einfach mit der rechten Maustaste klicken und Open With Live Server sagen kann. Und da kommt es hoch und unten ist unser Tisch. Was ich also tun wollte, ist alles andere zu kommentieren , was nicht direkt mit dieser Aktivität zusammenhängt . Es ist also ein Doktorkommentar. Und kommentieren bedeutet, dass der Code bleibt, aber er wird ihn ignorieren, wenn wir über Kommentare sprechen. Um einen Kommentar in HTML zu machen, öffnen Sie die Winkelklammer. Ich benutze den Ausrufeverstand, und ich habe zwei Bindestriche und eine Notiz, dass es das irgendwie für mich vollendet hat. Was geht also in diesen Pfeil, welches Visual Studio? Wird dargestellt als grüner Text wird ignoriert. Selbst wenn ich mich erfrische, wirst du nicht sehen, dass all das Kauderwelsch am Strand gerendert wird, oder? Das heißt, wenn ich ein bisschen Code ignorieren lassen möchte, müssen Sie nur den Kommentar öffnen und dann sehen Sie, dass das alles grün wird . Und dann schließe ich den Kommentar an dem Punkt, an dem ich ignoriert werden wollte. All das ist also kein Kommentar , den ich einfach zusammenbrechen kann. Ich, wenn ich aktualisiere, sehen Sie, dass all das ignoriert wird, das Bild ist weg, die Listen sind nur das H1-Tag, der Kommentar und das h3-Tag und die Firma unter den Kommentaren verschwunden der Kommentar und das h3-Tag . In Ordnung, also das ist seine, wie sieht unser Tisch aus? Nicht sehr attraktiv, aber hey, also haben wir Namen, wir haben Alter, wir haben Personalausweis. Das ist die Header-Regel, oder? Und dann ist das so, so, so, so und so. Okay, damit der Tisch etwas stabil gebrauchen kann, kann etwas Verschönerung gebrauchen. Welches ist das grundlegendste Niveau? So erstellst du einen Tisch? Nein, ich habe Styling erwähnt und in der Einleitung erinnerst du dich nicht daran, dass ich CSS erwähnt habe. CSS ist also die Abkürzung für Cascading Stylesheets. Und jedes Mal, wenn wir möchten, dass unser HTML nachschlagen soll, nutzen wir insbesondere die Dienste von CSS. Als ich also sagte, dass die Tabelle etwas Styling benötigt , bedeutet dies, dass ich den Dokumenten CSS hinzufügen kann , damit ich bestimmen kann, wie die Tabelle aussehen soll. Das ist also ein guter Übergang, um den stehenden Hintern einzuführen. Dann werden wir es einfach auf einer sehr grundlegenden Ebene betrachten und dann zurückkommen und es uns genauer ansehen. Um die Tabelle zu stylen, ich als Erstes ein Attribut namens style hinzu , oder? Nein, die Syntax, die in dieses Attribut eingeht , ist so, dass Sie als erstes ein Selektor eingeben, und dann haben Sie einen Doppelpunkt und dann die obigen Werte, also nenne ich sie Selektorwertpeers. Der Selektor ist also, was möchten Sie ändern? Was für ein Boot diesen Toggle du ändern willst, sie wollen plotten, die Farbe ändern. Sie möchten die Hintergrundfarbe ändern. Möchten Sie den Rahmen ändern, damit Sie sehen können, dass all dies Selektoren sind , die potenzielle Dinge sind, die wir ändern könnten. Nicht alle von ihnen sind anwendbar, weil ich das Mal sehen nicht wirklich ändern würde. Ich würde den Versuch, etwas an diesem Tisch zu finden, nicht wirklich ändern . Ich würde mich wahrscheinlich nicht ändern. Aber ich würde die Schriftgröße unserer Tabelle nicht ändern. Stimmt's? Ich würde eher eine Schriftgröße von einem p-Tag oder etwas ändern, das Texte enthält, oder? Aber ich würde nicht unbedingt die Schriftgröße des Tabellen-Tags ändern . Dort befindet sich das ausgewählte, von Ihnen verwendete Tag relativ zu dem Tag, das Sie verwenden. Also wollte ich mich ändern, die Breite der Tabelle sehen. Dann gebe ich ihm einen Wert. Ich kann 100% sagen, was bedeutet, dass sich diese Tabelle so weit wie möglich über die Seite erstreckt. Werfen wir einen Blick zurück. Und dann sehen wir hier , dass das so aussieht, oder? Der Name ist also zentriert, sodass das th-Tag automatisch in die Mitte geht. Aber wenn Sie es genau hinschauen, hier der Inhalt für diesen Namen, hier beginnt dieser, hier beginnt dieser, hier ist die eine Seite. Wenn ich also wollte, dass alles in der Mitte ausgerichtet ist, könnte ich auch einen Stil einsetzen , der besagt, dass der Text zentriert ausrichtet. Ich könnte also sagen, dass stat gleich der Breite 100% ist. Dann ging es nachher mehrere weiter, stelle sicher, dass ich sie über Semikolon trenne. Könnte also auch sagen, dass Text zentriert ausrichten. Und so sage ich dir, dass du den ganzen Text in der Tischmitte ausrichtest , oder? Also zeige ich Ihnen nur , dass das ganze CSS funktioniert wenn wir ändern möchten , wie etwas auf der Seite aussieht Wir beginnen mit dieser Statistik. Ok, wenn wir also wiederkommen, werden wir genauer schauen. Ich sagte, das Style-Tag erlaubt es uns das Erscheinungsbild unserer Seiten zu diktieren. 6. Einführung in CSS – Inline und interne und externe Stylesheets: In der letzten Lektion schauen wir uns CSS an und wie es funktioniert. Und wir haben gesehen, dass die einfachste Breite anwenden CSS das Style-Attribut ist. Also werden wir mit unserer Indexseite herumspielen und ganze Attribute erkunden, die uns helfen die verschiedenen Textblöcke oder verschiedene Bereiche oder verschiedene Elemente zu gestalten verschiedene Bereiche oder verschiedene Elemente , wie Sie darüber nachdenken möchten. aber wir können sie individuell anvisieren. Wenn wir also zu unserem Code zurückkehren, können wir sehen, dass auf der Indexseite alle dies Header-Tags sind. Und was ist, wenn ich wollte, dass das H1-Tag rot ist? Ich kann also leicht sagen, dass Stil dem Predigt entspricht , der Stil ist gleich, das sind unsere Attribute. Dann sagen wir, was ist es, ein Boot, dieses Element möchten wir auswählen. Ich möchte die Farbe auswählen, dann einen Doppelpunkt, und dann möchte ich diese Farbe in Rot ändern. Mit CSS können Sie also tatsächlich den Namen bestimmter Farben eingeben, aber ich glaube nicht, dass sie jede einzelne Farbe haben, jeden einzelnen Farbton nach Namen. Du siehst also Malve, Mauve war keine Option, oder? Wenn Sie also die Farbe mit Namen kennen und es eine einfache Farbe hat, können Sie sie in Rot und Fein eingeben. Aber im Allgemeinen würden Sie Hexadezimal oder RGB verwenden. RGB ist also die Abkürzung für Rot, Grün und Blau. Sie würden also viel zwischen 0 und 255 von jedem gewünschten nach Hause bringen . Also will ich 255 Rot, 0 Grün und 0 Blau. Alles klar, siehst du, es sagt mir, dass es selten ist. auch Visual Studio-Code verwenden, erhalten Sie diesen Farbwähler. Also was ich in das Wort Rot eingegeben habe oder in RGB eingegeben habe. Sobald es die Farbe erkannt hat, können Sie diesen Farbwähler erhalten. Und wenn es immer noch nicht ganz der gewünschte Farbton ist, können Sie ihn immer einfach ziehen und Sie sehen, dass RGB-Wert entsprechend ändert. In Ordnung, also wenn ich den angebotenen Farbton binden wollte , dann ist das der RGB. Rot ist also rot, das wäre 255 0, 0 gewesen. Aber für die verschiedenen Farbtöne können Sie mit Ihren RGB-Werten sehr spezifisch sein. Also werde ich diesen mit RGB belassen. Ich werde das h3 ändern, um Stilfarbe zu sein, versuchen wir es mit einer einfachen Farbe, blau, in Ordnung? Und dann ist der andere Weg , wie Sie tatsächlich eine Farbe erhalten können , die Sie Hexadezimal nennen. Man würde also einen Hashtag sagen und dann haben Sie eine alphanumerische Kombination von Zeichen. Alphanumerisch bedeutet also, dass Sie zwischen 0 und 9 wählen können und in den Buchstaben zwischen A und F wählen können. Alles klar, also, und dann hast du sechs von ihnen. So kann ich wie 000 sehen, ich bin einfach ein Zufall mit dieser Unschärfe. Ich weiß nicht, was ich künstlerisch werde. Ich bekomme hier einen Grünton , oder? 000 F6 1D gibt mir den Grünton. Wieder einmal, wenn es Ihnen nicht gefällt, können Sie es immer ändern, aber dann wird Visual Studio-Code immer, oh, da ist er. Es behält das Hexadezimal bei. Wenn du also mit Hex anfängst, wird es über T In Hex dachte tatsächlich, er würde es ändern. Also der RGB, also sieh dir das an. Ich lerne auch. In Ordnung, also wenn Sie auswählen und unsere eigenen verschieben können und so kommen Sie zu Ihrem Hex. Sie können Ihr Wort verwenden und RGB verwenden. Jetzt, da all das erledigt war, ging ich zum Speichern, noch einmal was ich auf allen habe, um zu sehen, ob dies sicherstellt, dass Sie Ihre Änderungen speichern. Und wenn du dann zu deiner Seite springst, wirst du die verschiedenen Farben sehen. Hallo Welt, hallo world und hallo world. Alles klar, also das ist das ganze CSS, das es stylen lässt. Wie soll Ihr HTML aussehen? Wenn ich also die Schriftart nach dem Semikolon ändern wollte, könnte ich einen anderen Selektor einsetzen, was Spaß machen würde. Sagen wir font-style. Du hast also Schrift. Mit welcher Schriftart können Sie all diese einzelnen Schriften einfügen? Persönlich verwende ich nicht gerne Schriftarten weil man sehr genau darauf achten muss , wohin Sie welche Werte setzen. Stattdessen bin ich gerne sehr spezifisch und sehe, dass ich den Schriftstil genau auswähle. Und dann kann ich kursiv sagen, aber das ist ein Autor wirklich wollte, ich wollte Schriftart. Familie. Dort ändern wir die eigentliche Schriftart. Sie sind also mit einigen dieser Schriftarten von Microsoft Word vertraut . Und einige von ihnen wissen Sie vielleicht nicht unbedingt, aber Sie werden feststellen, dass es sie irgendwie stapelt. Also das sieht wählen Sie RL. Wenn sich IRL nicht auf dem System befindet, das die Seite lädt, wählen Sie Helvetica. Wenn das nicht auf der Seite ist, dann standardmäßig ein Sensor, der 90, oft müssen Maschinen sowieso haben, oder? So sieht diese Schriftfamilie also so ziemlich aus. Wie du siehst. Ich verkette sie nur mit. also Doppelpunktwert aus. Dann will ich ein anderes Selektor-Semikolon. Wählen Sie dann Oregon und bewerten Sie erneut Semikolon. Und in einigen Selektoren können mehrere kommagetrennte Werte annehmen . Alles klar, wenn ich das alles mache und zurückblicke, siehst du, dass dies keine kursiv geschriebene ariale Helloworld ist , was gut ist. Sie können also so viele Stile zu demselben Element hinzufügen , wie Sie in der Situation benötigen. Das nennen wir also Inline CSS, oder? Da es inline ist, ist es inline in der Zeile des tatsächlichen TAGs. Jetzt besteht das Problem mit Inline-CSS darin, dass es in dem, was es kann, begrenzt ist. heißt, was ist, wenn ich möchte, dass Das heißt, was ist, wenn ich möchte, dass alle Header-Tags diese Art von Stil haben? Was ich jetzt tun müsste, ist all das zu nehmen und es hier einzufügen, dann nimm es und füge es hier ein und füge es hier ein. Und überall wo ich es einfügen musste. Ich scheint nicht einfach genug zu sein. Ein wenig kopiere und füge ein. Alles klar. Ordnung. Und jeder sieht zwar einheitlich aus , aber was ist, wenn dein Kunde zurückkommt und sagt: oh, ich will es, ich will es nicht so schattieren. Ich wollte noch einen Schatten dafür haben. Also nein, ich muss mit einem von ihnen den Schatten dafür finden. Sagen wir, es ist leichter oder rosa. Stimmt's? Oder welche Farbe auch immer das hat? Nein, nachdem ich das überall geändert habe, wo ich es kopiert und eingefügt habe. Obwohl es einfach erscheinen mag, weil es nur sechs ist, wäre es, wenn es 20 Orte wären, wenn Sie sich auf mehreren Seiten auf der gesamten Website befinden, wenn Sie sich auf mehreren Seiten auf der gesamten Website befinden, jetzt sehr ineffizient zu versuchen, zu zielen, kopieren und einzufügen an jedem einzelnen Ort. In Ordnung, das ist also die Einschränkung des Inline-CSS. Die Lösung dafür wäre also, dass Sie interne Stylesheets verwenden werden. So würde ein internes Stylesheets in den Kopfbereich von einer Seite gehen und dann die CSS-Stile für den gesamten Pfirsich diktieren . Werfen wir einen Blick darauf, wie das aussieht. 1, wir haben eine statische Aufnahme, also ist es im Kopfbereich und wir öffnen und schließen Stil. Inside Lifestyle. Was wir tun werden, ist ihm zu sagen, welche Tags Tags sind, auf die wir abzielen möchten. Also fange ich einfach an. Ich werde die styles.css nicht stören. Ich sage p-Tags. Ich möchte, dass alle P-Tags auf meiner Seite zum Beispiel die Farbe Violett haben. Also haben wir zwei P-Tags, oder? Wie wir gesehen hätten, wenn wir Inland Out verwenden, musste ich den Stil nehmen, ihn in dieses p-Tag einfügen und in dieses p-Tag einfügen. Und für jedes andere P-Tag auf der Seite besprechen wir einfach, warum das ineffizient ist. Was ich also innerhalb des internen Stylesheets tun kann , ist C p, was bedeutet, dass ich das PtRP-Element ins Visier nehmen möchte. Dann öffne und schließe ich geschweifte Klammern. Alles klar, also dann sieht es, okay, klar, hier zielt der Selektor auf das p-Tag ab. Das lässt Visual Studio Code uns wissen, aber wir sollten keine leeren Regelsätze haben, weshalb Sie sehen, dass dies für die Neun ist. Also versucht es dir zu sagen, hey, wenn du nicht bereit bist, CSS zu lesen, wo deklariere keinen Elementabschnitt dafür, oder? Aber wir schreiben CSS. Also werde ich alle P-Tags sagen, ich möchte, dass du die Farbe hast und ich habe es einfach gehalten, lila. Alles klar. Beachten Sie, dass neun verschwunden ist. Und wenn ich zurück zur Seite gehe , bin ich mir nicht sicher, was gerade passiert ist. Das ist erfrischt, um nach Mach zu kommen, aber das ist in Ordnung. Los geht's. Dies ist meine erste Webseite. Beachten Sie jetzt, dass dies ein P-Tag ist und dies ein P-Tag ist und beide lila sind. Alles von mir schrieb hatte einen Ort, was ich für meine P-Tags will. In Ordnung, also wenn ich alle p-Tags wollte, den kursiven Stil, ist es das gleiche Format, um den Selektor zu haben und wir haben den Wert Semikolon. Und dann flare die Lesbarkeit Candace Duty in den verschiedenen Linien. Also anstatt zu versuchen, es genau dort zu lesen , kreuzen Sie raffiniert, oder? Als wäre es hier abgebildet, was ich für mich verwirrend war, oder? Es wird für mich jedes Zwischenprodukt verwirrend , dass dies weitaus lesbarer ist. Okay, also alle Beatles, ich will lila und kursiv. Da sind wir los. Mit sehr wenig Aufwand habe ich auf dieser Seite einfach nur ein P-Tag gemacht , lila und diatonisch. Übertragen wir diese Art von Markup null auf unsere Tags. Wir haben also sechs H-Hunde und ich möchte, dass alle den gleichen Stil haben. Alles klar, alle von ihnen müssen dasselbe haben. Das Coole daran ist, dass ich Tags anketten kann. So kann ich sehen, dass H1, H2, H3, H4 456 offene und geschlossene geschweifte Klammer haben. Und dann rate mal was? Ich kann das ganze Styling machen. Ich brauche die Anführungszeichen nicht, also nehme ich das einfach als Aufruf, die Werte wählen wird angezeigt. Und ich lege sie einfach von remote in ihre jeweiligen Zeilen, in die Linie mit einem Semikolon. Also kann ich diese Stilattribute tatsächlich aus all diesen Tags entfernen . Und dann wirst du feststellen, dass UP es viel ordentlicher aussieht. Es ist viel wartbarer. Und wenn man zurückblickt, war es sehr effektiv. Also haben alle Edge-Hunde und alle den gleichen Stil. Und die Sache ist , dass selbst wenn Sie etwas Besonderes für eines der htdocs wollen, sagen wir, alle sollten eine Schriftfamilie haben, aber Sie möchten nur H1-Tag für mich. Oh tut mir leid. Alle von ihnen sollten die gleiche Farb- und Schriftfamilie haben, aber es sind nur die H1-Tags, kursiv. Sie können immer, nachdem Sie es für die ganze Familie angegeben haben, immer zurückgehen und jeden selbst sagen. Ich möchte, dass du das hast. In Ordnung? Wenn Sie also zurückgehen, werden Sie feststellen, dass jeder die gleiche Farbe und die Schriftfamilie hat, aber nur eine kursiv geschrieben ist. Das bringt CSS also auf den Tisch. Das bringen interne Stylesheets auf den Tisch. Und wisse, das Coole ist , dass wenn Sie diese Stile auf mehreren Seiten teilen müssen , oder? Denn sagen wir, dass wir überall auf jeder von vier Seiten bisher ein Bild-Tag haben, haben wir eine Form von Header. Todd. In Ordnung, und wir haben überall P-Tags und all diese Dinge. Sie möchten, dass alle diese Seiten dieselben Styling-Regeln haben, was für die Konsistenz sehr wichtig ist, da die meisten, wenn nicht alle Websites, auf denen Sie teilnehmen, feststellen würden, dass es immer ein gemeinsames Thema gibt zwischen dem Text und wie er bei jedem einzelnen Beat angezeigt wird. Das nennen wir also eine Vorlage , die nur erreicht wird, indem sichergestellt wird, dass das CSS an jedem Strand konsistent ist. Roman. Wenn wir das wollten, könnten wir diesen Stilbereich leicht nutzen und ihn einfach jedem Pij in den Kopf einfügen, oder? Wenden Sie sich also an einen Bootserfolg und Index NOL hat das gleiche Styling. Wenn ich also über sie alle navigiere, wird jedes h-Tag gleich aussehen. Alles klar? Alles ist konsistent, oder? Und wenn ich P-Tags woanders hinlege, werden sie alle so aussehen. Das bringt eine weitere Ineffizienz hervor, oder? Was passiert, wenn Sie 20 Seiten haben und der Kunde sagt, ich wollte nicht mehr, dass das H1-Tag Ayatollahs ist. Ich will es wahrscheinlich. Versuchen wir es, ich probiere etwas anderes aus. Ich sage Text, Dekoration ist unterstrichen. In Ordnung, also habe ich sie zur Erfolgsrede geändert. Ich will, dass es auf jeder Seite gemacht wird. Das bedeutet nein danach. Und du siehst, dass wir die gleiche Art von Kopie und Einfügung durchgehen , die wir gerade versuchen zu bewerben, als wir unsere interne Stylesheet-Angst gemacht haben. Jetzt muss ich dies auf jede einzelne Seite kopieren und einfügen , die diesen Stil haben muss. Und das ist wieder ineffizient. Es funktioniert. Aber es ist nicht sehr effizient in Bezug auf die Wartung, denn wenn ich eine Seite verpasse, ging ich zurück und versuchte, das zu beheben. Dann bringen wir den nächsten Weg auf, wie wir CSS machen, nämlich externe Stylesheets. Externe Stylesheets bedeuten also , dass ein Dateibaby das gesamte CSS erstellt wird, aber es wird nicht in der HTML-Datei leben. Wir machen einfach einen Referenz-Tweets. Also schauen wir uns das an. In unserem Explorer werden wir also eine neue Datei haben, und ich nenne sie styles.css. Es spielt keine Rolle, wie Sie die Datei nennen, da manche Leute sie ihren Site-Dot-CSS nennen. Manche Leute nennen es CSS-Stile wie CSS, es spielt keine Rolle, solange Sie es mit Punkt-CSS beenden. Das ist unsere neue Dateierweiterung, oder? Also styles.css. Und was wir dann tun werden, lassen Sie mich die Schnittstelle ein wenig vergrößern. Was wir in styles.css tun werden, ist gesamten CSS-Code gekennzeichnet. Ordnung, also in styles.css wir tatsächlich in die Anführungszeichen gesetzt sind p-Tags sind Tags. Das gesamte CSS-Styling , das auf jeder Seite von intern gehabt hätte . Diese Syntax sieht also genauso aus wie die interne, außer dass sie ihre eigene Datei kennt. Das bedeutet also, dass Index nicht mehr das Styling hat, denn wenn ich zum Index zurückkehre, ist alles wieder normal. Jetzt, da ich es habe Es ist alles in einer dedizierten Datei, was ich tun muss, ist im Leerlauf zu machen. Und ich werde ihm sagen, dass der Link rel dem Stylesheet entspricht. Und dann wäre eine Reise, wo finde ich das Statut, das wir zuvor mit dem Anker-Tag gesehen haben , alles was wir tun müssen, weil sie auf dem gleichen Niveau sind. Wir müssen nur sehen, dass hf den Dateinamen entspricht. Der Dateiname hier ist also styles.css, und dann ist dies ein selbstschließendes Tag. Nachdem wir all das gemacht haben, aktualisieren wir uns und schauen uns das an. Keine Ordnung wird das Universum wiederhergestellt. Ordnung, damit wir diese Leistung jetzt auf allen anderen Seiten wiederholen können diese Leistung jetzt auf allen , die interne Stylesheets erhalten haben Ich bin Winde werden vom Riegel entfernt. Ich entferne es aus dem Kontakt. Und ich wollte es vom Erfolg entfernen. Alles klar. Also mache ich das nur, um Ihnen zu zeigen, wenn ich zu einem Bolzen navigiere , alles, was Sie wissen, und ich sage ihm, dass es einen Verweis auf dieses Datenblatt geben soll, es erhält Bucket-Stile. Wenn ich mich mit uns in Verbindung setze, kontaktiere die Milz, sage ich, dass es sich auf das Stylesheet bezieht. Alles sieht einheitlich aus, oder? Nicht die eleganteste Website und du wirst sie sehen. Aber zumindest sehen wir, wie die Einheitlichkeit eine große Rolle spielt. In Ordnung? So können wir mich also kennen. Unsere Stile sind etwas globaler, da wir mit einer Zeile auf alles in dieser Datei zugreifen können, die weit mehr Stile als einen hat. In Ordnung? Das ist also das ganze CSS funktioniert wirklich. Und ich, ein Video zu machen, das Ihnen jede einzelne Möglichkeit eines Selektorwert-Peers zeigt jede einzelne Möglichkeit eines , wäre nahezu unmöglich. Es gibt so viele und sie sind nützlich verschiedene Dinge und können sie manchmal benutzen. Einige Tags können das nicht. Der einzige Weg, um es sich wirklich bequem zu machen. Ich würde nicht gemeistert sagen weil ich das seit Jahren mache und ich immer noch nicht ohne Zitat zitiert habe, es gemeistert habe. Was fühle ich mich wohl, weil ich Subdominant erforscht habe, oder? Ich habe untersucht, welche Selektoren es gibt. Und mit einem Tool wie Visual Studio Code Assessments in der Liste können Sie sie alle erkunden und sehen. Okay, wenn ich also Index sehe, wie lauten die Werte? Ich kann es mit allen zwei versuchen. Ich kann es versuchen. Das kann ich versuchen. Sieh mal, wie es aussieht. Nein, wenn ich sein R nicht benutzen muss und dann ist nichts besser als zu recherchieren. Wenn Sie eine bestimmte Vision haben, können Sie immer recherchieren. Sie werden immer Material finden , das Ihnen bei dieser Vision hilft. Das ist also eine sehr schnelle Einführung in CSS und wie es funktioniert. In Ordnung, also wenn wir wiederkommen, werden wir das ganze Wochenende ein bisschen mehr schauen. Verwenden Sie CSS, um bestimmte Teile ihrer Website anzusprechen. heißt, wenn ich H1-Tags habe, aber besonders H1-Tag, wollte ich ein bestimmtes Aussehen und Gefühl haben , als ich tatsächlich auf eine bestimmte Weise zielen kann. Also schauen wir uns das an, wenn wir zurückkommen. 7. Mehr Fortgeschrittene CSS – Kurse, Tags und Classes,: Alles klar, das letzte Mal, wenn wir hier sind, schauen wir uns an, wie CSS funktioniert. Wir haben eine nette schnelle Einführung in das allgemeine Erscheinungsbild bekommen. Und wie gesagt, es ist fast unmöglich, in ein paar Videos alles über CSS zu lehren , aber Sie müssen es erkunden und ich hoffe, dass Sie das getan haben. Lasst uns also weitermachen. Nein. Und in dieser Lektion werden wir zwei Dinge gut machen. Erstens werden wir uns ansehen, wie wir bestimmte Tags ansprechen können. Und wir wollen sehen, ja, wir haben P-Tags, aber ich will nicht jedes einzelne Petabyte davon auf diese Weise. Ich möchte ein bestimmtes p-Tag oder ein bestimmtes Element aufrufen. Ich habe dieses Aussehen und Gefühl. Und wir werden auch das ganze Wochenende betrachten , um unseren Tisch tatsächlich zu stylen, weil wir mit der Breite 100 und dem Text-Align Center sind, aber es gibt nichts wirklich zu sehen. Es ist eine Tabelle dort, keine Rasterlinien, die das Hauptmerkmal dafür sind , wie die Tabelle aussehen sollte. Wir sehen also, dass die Standardtabelle in ihrer Anzeige irgendwie anämisch ist und wir möchten , dass sie so aussieht, wie sie aussehen sollte. Beginnen wir also damit, wie wir auf bestimmte Zungen abzielen , oder? Was wir bisher getan haben ist zu sagen, dass alle Heterodoxen diese Farbe haben sollten und alle H1-Tags unterstrichen werden sollten. Was wäre, wenn ich nicht unbedingt möchte, dass alle H1-Tags unterstrichen werden, oder? Also Nikon, die Indexseite, die ich habe, habe zwei Hunde. Eine, die „Hallo Welt“ sagt. Und ich sage, dass dies der Index ist. Stimmt's? Lassen Sie uns nun sagen, dass wir dieses H1-Tag auf dieser Art von H1-Tag auf jeder Seite haben , auf wir sagen, auf welcher Seite wir uns befinden. Wir könnten uns das also als Titel vorstellen, oder? Das sind also unsere Titel-Tags oder ein H1-Tag, das ist das Titel-Tag , das besagt, dass wir bestimmte Attribute haben möchten. Die anderen H1-Tags müssen keine Attribute haben, oder? Nehmen wir an, Text ist unterstrichen. Alles klar, lassen wir es, was für null unterstrichen wird. Oder versuchen wir etwas anderes zu tun, um zu sagen, dass die falsche Farbe von allem, was ein Titel-Tag ist, gebrochen sein sollte. Und mal sehen , wie das aussehen wird. Also hier sehen wir, dass dies das Titel-Tag sein würde. Dies ist der Index und helloworld ist nicht der Titel, also möchte ich nicht, dass es genauso aussieht wie das Titel-Tag. Fotos da ist es. Und mir wurde gerade klar, dass ich dieses Ziel oder den falschen Ort gesetzt habe. Lassen Sie mich es also unter unsere Nav-Leiste ohne Zitat verschieben , oder? Das ist also die Indexseite. Dies ist der Titel, lass mich sagen, das ist der Titel. Jeweils eins. Alles klar. Ich möchte also, dass mein Titel H1 so aussieht. Sowohl die Helloworld sollte bei keinem anderen H1-Tags auf der Seitengröße nicht sein, der Titel sollte nicht so aussehen. Was ich also in meiner CSS-Datei tun kann , ist, anstatt nur auf H1-Tags zu zielen, ich kann sie eher nach Namen oder ID anvisieren. Oder wir können festlegen, was wir unsere Klasse nennen. Also zeige ich dir zuerst einen Ausweis. Dann haben wir uns das Konzept der IDs angeschaut , wenn wir unser Formular machen. Und ich habe dir den ID Fname gezeigt, oder? Alle ZEHN, zehn erhält einen Ausweis. So kann ich in diesem H1-Tag leicht sehen, Ihre ID Titel ist. Stimmt's? Die Sache ist also, dass keine zwei Elemente auf derselben Seite jemals dieselbe ID haben sollten, oder? Denken Sie daran, als würden Sie Ihren gleichnamigen Kindern nicht anbieten wollen. Pred du hast Zwillinge, du wirst immer zwei verschiedene Namen nennen. Du würdest Zwillinge mit dem gleichen Namen brauchen. Behandeln Sie IDEs so. Sie möchten nicht, dass Elemente auf derselben Seite denselben Namen haben. Also habe ich Titel auf der Kontaktseite. Das ist in Ordnung. Ich schaffe es auch auf der About-Seite. Das ist auch in Ordnung, weil es der einzige hier ist. Aber was ich niemals tun sollte, ist diesen Titel und ein anderes Element namens title auf derselben Seite zu haben diesen Titel und ein anderes Element namens title auf . Das ist ein No-No. In Ordnung, jetzt habe ich dieses Element namens Title. Ich möchte jedes Element mit dem ID-Titel darauf abzielen , einen bestimmten Stil und die Datei style.css zu haben , ich kann Hashtag oder Polen oder ein Nummernzeichen sehen. Du nennst es Hashtag-Titel, oder? Sie sehen also hier , dass Element-ID dem beliebigen Element entspricht, jedem TAG, p-Tag, ungeschnittenem Bild, was auch immer es ist. Sobald es heißt, dass ID gleich Titel ist, wird dieses Styling darauf angewendet. Wenn ich also zurückgehe und nachschaue, weiß ich, dass das Titel-Tag den Stil hat und das andere nicht, weil ich gesagt habe, dass nur der Titel diesen Stil haben soll ein Boot uns nur den Titel, Dirigenten, nur der Titel. In Ordnung, das ist also eine Möglichkeit, diese Art von Targeting zu machen. Angesichts der Beschränkung mit der ID ist der Titel gleich, und ich denke, dass moderne Browser dies kompensieren können. Aber nimm einfach noch einmal meinen Rat an, ich komme aus den Tagen, als Browser dir nicht geholfen haben und dabei geholfen haben, deine Fehler zu vertuschen. Ich empfehle Ihnen, dass zwei Elemente nicht dieselbe ID auf derselben Seite haben. Es gibt andere Auswirkungen, insbesondere im Umgang mit JavaScript, bei denen Sie auf Probleme stoßen, wenn Sie mehr als ein Element mit derselben ID haben . In Ordnung? Angesichts dieser Einschränkung kann es zu Zeiten kommen, in denen Sie dies tun müssen. Blöcke sind zwei verschiedene Elemente , die den gleichen Stil haben, aber Sie möchten es nicht auf der ganzen Linie. Also lass uns sehen. Wir haben mehrere p-Tags. Schlage 12345. In Ordnung? Wir haben also mehrere p-Tags. Was ist, wenn ich nicht wollte, dass sie alle lila und kursiv sind, oder? Ich wollte nur, dass 135 lila sind und Ayatollah ist das, was die Risiken von ihnen normal aussehen sollten. Ich kann also immer wieder sehen, alle p-Tags eine bestimmte Haltung haben sollten. Also gebe ich ihnen allen eine lustige Familie. Also jedes P-Tag auf meiner Seite wollte ich die Schriftfamilie Arial haben, kein Problem. Alle von ihnen sollten RL sein. Cool. Ich möchte jedoch, dass 135 lila und kursiv sind. Alles klar, damit ich tatsächlich das erstellen kann , was man eine Klasse nennt. Eine Klasse mit ist also wie ein wiederverwendbarer Stil. Während der Titel oder die Verwendung der ID das eine Element oder die Gewinne abzielt, sollten Sie die wenigen Elemente mit demselben ID-Wert üben , oder? Wenn wir über Klassen sprechen, in denen ein abstrakter Wert geschaffen wird , der so oft wie nötig auf jede Art von Element verteilt werden kann . Also erstelle ich hier eine Klasse, in der ich Punkt sehe. Sagen wir für mich ein Sean. In Ordnung, also bedeutet der Punkt, dass seine Unterklasse und Entzündung der Name der Klasse ist. Und wenn Sie den Mauszeiger bewegen, sehen Sie Element und es wird sagen, dass Klasse gleich Information ist. Also jedes Element, das ich auf alle Nachgeschmacksgras anwenden möchte , das ich auf alle Nachgeschmacksgras anwenden gleich Entzündung als die Attribute da drin, oder? Also Informationsklasse, ich wollte Farbe haben, lila. Und die Texte. Es war keine Textdekoration, es war nicht, es war Schriftstil kursiv zu sein, oder? Du siehst also sogar manchmal raten müssen, du wirst sie nicht alle auswendig lernen, aber dein Feld wird es bequem, oder? Informationen sollten also Farbe, Lila und Schriftstil haben. Wissen Sie, wenn Sie nichts durchschauen , hat diese Stile angewendet. Nicht dass Schlepper das tut, nicht die Anker-Tags und wissen , dass diese dort ihre Farbe geändert haben, aber nichts hier hat diese Klasse angewendet. Aber wenn ich dieses Glas für bestimmte oder bestimmte Tags verwenden möchte , muss man nur sagen dass die Tag-Klasse mit Informationen übereinstimmt. Ich wollte es machen, es ist auf 1, 3 und 5. Wissen Sie, wann ich zurückgehe, sehen Sie hier 1, 3 und 5 haben die Klasse oder die Stile direkt auf sie angewendet. Das ist also die Macht der Klasse, oder? So kann ich wissen, alle Stile erstellen, ihnen eine Klasse geben, aber ich kann sie auf die jeweiligen Elemente setzen. Wieder einmal gilt es nicht immer für jedes einzelne Element, gilt es nicht immer für jedes einzelne Element denn wenn ich dieses Wort auf das IMG-Tag setze, lass mich das IMG auskommentieren. Also werde ich schnell, dass wir uns abkommentieren, ist Kontrolle und Schrägstrich vorwärts. Also gehe ich einfach zu All diesem Kontroll-Schrägstrich auf es kommt rein, oder? Kontroll-Schrägstrich wird also einen Kommentar zu Ungewöhnlichen für Sie kommentieren. Okay, sagen wir mal, ich habe versucht , diese Klasse auf das IMG-Tag zu setzen . Es gibt nichts in dieser Klasse, das die Darstellung der Blume wirklich beeinflussen würde , oder? Obwohl die Klasse da ist, nichts anderes geben, wenn ich hierher gehe. Und beide die Blume, weil sie keine Farbe zeigen muss, oder? Und es hat keine Voraussetzungen, um kursiv geschrieben zu werden. Obwohl Sie die Klasse erstellen können, kann ich überall verwendet werden. Es ist nicht bereit, unsere Mixins immer in irgendeinem zu haben. Wir sind jedoch, wenn Sie eine Reihe von Bildern haben und dann möchten Sie den Stil auf eine bestimmte Reihe von Funktionen anwenden möchten, kann eine Kunstgalerie und nicht jedes einzelne Bild auf Ihrer Website sein. Sie möchten sich also nicht auf das IMG-Tag bewerben. Aber bestimmte Peak wählen vielleicht Bilder anzeigen, dann könnte man immer einen Stil erstellen oder dieses Vertrauen schaffen oder dass ich Windsor bin, nenne es einen DP für das Anzeigebild. Und dann mal sehen, die Breite der Displaybilder sollte 300 und ich werde Pixel verwenden. Und die Höhe sollte 200 Pixel betragen, wenn alle Displaybilder diese Abmessungen haben sollten. Dann kann ich zu meinem Bild gehen und ich sehe, dass deine Klasse dp ist. Wenn ich zurückgehe, sieht das Bild so aus. Und dann werden sie für so viele Bilder, wie ich möchte , alle wie Displaybilder aussehen, oder? Weil sie alle DP genommen haben. Wenn ich also 50 habe, wird das Bild hier unbenutzt. Und altes Problem, Tatsache ist, dass sie alle diese Klasse wiederverwenden werden. Du siehst also, dass es schön und wiederverwendbar ist. Natürlich würde diese Klasse nicht auf etwas zutreffen , das textbasiert rot ist. Also wenn ich wollte, dass dieser Listenpunkt für mich krass ist, Sean. Und wenn Sie anfangen, eine 0 zu tippen, können Sie immer Steuerelement und Leerzeichen verwenden und es wird irgendwie Ergänzungen für Sie machen. Also in gebildeten Chondrulen füllt die Weltraummission betreten es für mich aus. Dann werde ich hier sehen, dass es sich diesem Artikel um keine Shimmy-Informationen handelt. Alles klar, das ist wirklich alles, was das CSS gibt, wie gesagt, du wirst besser mit der Übung. Man muss also nur erforschen, neue Dinge ausprobieren und so fühlt man sich damit wirklich wohl. Okay, also lasst uns zum Styling unseres Tisches springen. Beachten Sie, dass Sie auf dem atemberaubenden Wochenende ein wenig auf bestimmte Elemente abzielen, damit wir, wissen Sie, bestimmte Stile entwickeln können wissen Sie, bestimmte Stile entwickeln die für viele Elemente wiederverwendbar sind. Nein, wir werden uns irgendwie anschauen, wie wir unseren Einstieg in die Elemente in Elemente innerhalb von Elementen verschachteln können , oder? Ein Tisch ist also eine perfekte Möglichkeit, dies zu demonstrieren, weil wir gesehen haben, dass er eine Hierarchie von Schlepper macht. Sie haben den Tisch, dann haben Sie den TI bei einem der TAs und Sie haben das T D. Also ja, Sie müssen irgendwie in den Tisch bohren , um bestimmte Dinge so zu machen, dass sie sicher aussehen Weg. In Ordnung? Also entferne ich zuerst dieses Styling aus der Tabelle. Ich werde es auf seine Standardeinstellung zurücksetzen. Schau und fühle kein Problem. Dann sagen wir, wir geben ihm einen Ausweis. Also Ausweiskram, oder? Style-Tisch-Zeug, Mitglieder, oder? Das haben wir gesagt, dass es hier war. Dies sind Mitarbeiter. Also sind wir im CSS. Ich kann abzüglich des Mitarbeiters abzielen, der die Hashtags Stabtabelle sieht. Alles klar. Lassen Sie mich einfach überprüfen , dass ich das gesagt habe. Tisch stopfen. Gut. Nur darauf zu achten, dass das Drehen stimmt. Und beim CSS wird auch die Groß- und Kleinschreibung beachtet. Sie möchten also, wenn Sie den allgemeinen Fall verwenden , gemeinsame Schlüssel beibehalten. Aber natürlich, wie wir gesehen haben, hörte Kleinbuchstaben SNL Kumpel. Also behalte es einfach alles in Kleinbuchstaben. Also wollte ich den Tisch stoppen, um eine Schriftfamilie gewonnen zu haben, versuchen wir es mit einer anderen Schriftart, damit wir einen Unterschied sehen können. Kurier Neu. In Ordnung. Ich sage es Tausch. Es hat also keine Grenzen, oder? Nein. Lassen Sie mich den Tauschtauschunterricht noch nicht machen. Ich werde die Breite auch auf 100 strecken . Also wiederhole ich fast fast die Stile, die ich anfangs hatte, oder? Wir können also sehen, dass sich die Schriftart geändert hat. Es ist kein Strecken über die Seite. Lassen Sie mich noch einmal die Textausrichtungsmitte einsetzen , damit alles zentriert ist, richtig und gut aussieht. Siehst du, all das hat erreicht. Unsere eigenen hier. Wenn Sie also mehrere Tabellen haben, dann möchten Sie diese Klasse wahrscheinlich dort verwenden. Wenn Sie mehrere Tabellen auf demselben Stück haben, muss ich mich auf die gleiche Weise bewegen. Sie möchten eine Klasse anstelle der ID verwenden. Okay, jetzt wo wir das haben, möchte ich dem TDS und einer Predigt sagen , was das ist der D Hn und das wird der Fernseher oder die Zelle sein, oder? Also wollte ich zu jedem Einzelnen Das ist es sollte eine Grenze haben. Jetzt möchte ich diese Rasterlinien begleichen. Wir sehen eine Mitarbeitertabelle oder Hashtag-Mitarbeitertabelle. Ich will den TD in deinem Element sowie das th. Sie sehen also, dass wir hier sind, wir kombinieren und wir kombinieren unser bisheriges Konzept, bei dem es ein neues bekommt, gewonnen an vielen in der Schriftart. Ich kann fast mehrere Tags trennen und Stile teilen. Cool, wir haben mit einem Header-Tags gesucht. Wisse, dass du auch siehst, dass du sehen kannst, gib mir das Elternelement und schau hinein und hol mir die darin enthaltenen Elemente von diesem Typ. Okay, also mit anderen Worten, hol mir den Personaltisch und hol mir dann das T-H-Diagramm, das sich in dieser Tabelle befindet. Wir haben also TD-Tags DER Stile innerhalb der Tabelle namens Stabstabelle. Dies ist also eine andere Möglichkeit, auf bestimmte Farben zu zielen , welche 101 Thread. Und dann sage ich drinnen , gib mir eine Grenze. Denken Sie also daran, dass ich bereits erwähnt habe, dass Sie mit der Schriftart mehrere Werte über den Board-Rand angeben können , die sehr ähnlich sind. Also kann ich Border sagen. Ich wollte eine Pixelbreite haben, eine größtenteils solide, und es muss die Farbe haben. Aber ich hätte auch Border sagen können. Strich, Breite ist ein Pixel. Ich hätte sagen können, dass der Border Dash Style solide ist, und ich könnte auch sagen, dass die Farbe des Randstiches. Stimmt das? Also zeige ich dir nur, dass es bestimmte Elemente gibt. Sie können die Werte stapeln und es gibt bestimmte Werte, die sie nicht brechen können , wie wir es mit Fonds, Schriftfamilie, Schriftgröße usw. gesehen haben. Also wollte ich einen Rand haben, Pixel breit, fest Farbe, und es muss Daten haben, die so solide im Stil sind, tut mir leid, und dieser Grauton in seiner Farbe und Polsterung. Polsterung bedeutet also, dass ich Elemente um mich herum schieben möchte. Wir acht Pixel sind eher ich wollte mich selbst treffen. Pixel dicker als ich es wäre, oder? Wenn Sie also auf den Tisch zurückblicken, werden wir diesen Raum sehen, denn denken Sie daran, bevor alles erstickt wurde. Und dann nehmen wir den ganzen Knospen und zeigen dir, was der Körper macht. Bei all dem Putten ist alles erstickt. Als ich die Polsterung einlegte , wurden alle dicker, oder? Also setzte es Hilfsgedichte auf , dass acht Pfund Weizen in alle Richtungen. Denken Sie noch einmal so darüber nach. Also nein, Alles ist unser eigenes. Aber dann merkt man, dass ja, jeder seine Grenze hat, denn wie gesagt, sind wirklich Zellen. Es sind nicht wirklich Zeilen und Spalten, sie sind wirklich Zellen. Diese Zellen haben also ihren eigenen Tausch, unsere eigenen sie. Lassen Sie mich hineinzoomen, damit Sie etwas besser sehen können. Dies sind Zellen mit eigenen Grenzen. Keine Tabelle liest es sieht so aus , als ob das nicht richtig aussieht. Es sieht einfach aus wie ein Haufen Kisten. also zurück zum Tisch gehe, kann ich Border Dash, Border Dash, Collapse sagen. Los geht's, der Zusammenbruch des Tauschhandels und kündigen einen Zusammenbruch an. Also kollabieren nicht wir alle Grenzen miteinander. Sie sehen also nicht mehr wie Kisten aus. Nein, es sieht aus wie dieser Tisch. Okay, Tipps und Tricks. Wieder einmal macht die Übung dauerhaft. Nun, das letzte, was ich an dieser Tabelle machen werde , ist zu machen, dass der Kopfbereich anders aussehen ließ. Also möchte ich, dass dies vielleicht die gleiche Farbe wie das H1-Tag ohne bestimmten Grund hat, nur dass ich ihre eigene vermisse und erforsche. Also habe ich dem Fernseher und dem Th schon erzählt, den schieren Stil, aber dann möchte ich einen bestimmten Stil nur für den th, in Ordnung, also werde ich sagen, dass du DAS wirst, Ich möchte deine Farbe gleich ist, gleich RGB-Wert. Es ist keine Farbe, weil Farbe die Texte ändert. Das ist also ein guter Punkt. Nein, obwohl ich das th anvisiere, scheint es, als würde ich Farbe für das th sagen, dann wird das th selbst die Farbe annehmen. Was jedoch passieren wird, ist, dass der eigentliche Text innerhalb des th-Tags ist. Farbe bezieht sich also auf die Ticks, die sich die Farbe immer auf den Text bezieht. Was Sie tun möchten, ist, die Hintergrundfarbe von der th zu ändern , wenn Sie möchten, dass DAS eine andere Farbe und diesen Punkt haben, erhalten Sie diese Farbe. In Ordnung, also wird die Farbe immer standardmäßig blockiert. Wenn Sie sagen, dass Farbe etwas anderes ist, wird es immer der Text sein, wenn Sie möchten sich der Bot-Stöhnartikel der Elemente auf der ganzen Linie ändert, dann müssen Sie die Hintergrundfarbe verwenden. Während ein Knopf Farben wächst, möchte ich, dass die Farbe weiß ist, was ich verrückt werde. Norm.dist benutze die hexadezimalen Nullen 0000, tut mir leid, das wird fff sein. Ich entschuldige mich, um weiß zu werden. Alles klar. Also könnte ich FF, FF sagen, es sind normalerweise sechs, aber dann einige Farben, wenn du die dritte erreichst, wird es automatisch wissen, okay, du meinst weiß, also weiß ich, dass es weiß ist nur weiß wie 000, 000 Block. Und ich könnte sechs Nullen haben, das ist immer noch Block. Und als ich anfange, die verschiedenen Farben zu ändern sind keine Zahlen darin, habe ich angefangen, verschiedene Blätter zu bekommen, oder? Wenn ich also 0, 0, f sage , bekomme ich den Blauton. Zeigt es dir. Also wurde RGB nach Higgs entwickelt um ein bisschen konsistenter, weniger verwirrend zu sein , was auch immer es ist, jedes Zuhause, lass mich einfach alles FFF machen. Dann ist der Text null, weiß. Also hab ich das. Ich wollte es Koralle nennen, aber mit Weiß stöhnt nimmt die Tischplatte. Und dann haben alle Regeln das irgendwie, oder? Es gibt also eine Reihe von Dingen, die du tun kannst als gäbe es so viele Möglichkeiten, so viele Dinge zu tun, es ist fast unmöglich, dich in einem oder wenigen Videos zu zeigen, du hast es einfach zu erforschen. Also ermutige ich dich, innezuhalten und mit bestimmten Elementen und bestimmten Stilen herumzuspielen und zu bestimmten Elementen und bestimmten Stilen herumzuspielen sehen, was dir einfallen lässt, was funktioniert, wo was nicht funktioniert, wir sind und das ist alles was du bekommst komfortabel mit CSS. Wenn wir wiederkommen, werfen wir einen Blick auf JavaScript. 8. JavaScript und die Browser: Hey Leute, in diesem Abschnitt werden wir Erforschung von JavaScript beginnen. Javascript ist eine Skriptsprache, die es uns als Programmierer ermöglicht , mit den HTML-Elementen zu interagieren. Die Sache ist, dass wenn der Browser unsere Website lädt, sei es das Lipset, an dem wir arbeiten, oder irgendetwas , das mit HTML-Code erstellt wird. Sobald dieser Code vom Browser gerendert wurde, wie wir wissen, können wir nichts tun, um ihn zu ändern. Alle Änderungen , die wir vornehmen müssen, müssen wir also zurück in den Code gehen und den Code ändern. Und dann können wir es anpassen, wenn wir die Seite aktualisieren. Mit JavaScript können wir unseren Benutzern jedoch ermöglichen, eine interaktive Erfahrung mit unserem pH-Wert zu eine interaktive Erfahrung mit unserem pH-Wert indem wir etwas Intelligenz dahinter stecken. Das ist es, was die Skriptsprache wirklich macht. Es fügt unseren statischen Inhalten Intelligenz hinzu. Was ich hier habe, ist nur ein Browser. Wir werden den Visual Studio-Code ein bisschen durcheinander gebracht. Und was wir tun werden, ist JavaScript im Kontext einer interaktiven Konsole zu betrachten Kontext einer interaktiven Konsole zu , die jeder Browser tatsächlich hat. Du benutzt Chrome. Ich benutze Edge Retinal. Sie verwenden Opera, Firefox, Safari, die meisten, wenn nicht alle Browser haben diese interaktive Konsole und tragbar, um sie zu erkunden. Was ich also getan habe, ist ein privates Fenster für Edge zu öffnen. Und ich klicke einfach mit der rechten Maustaste und dann gehe ich runter, um es zu inspizieren. Danach zeigt es uns den bloßen minimalen HTML-Code an. Und der Grund ist natürlich , dass private Instanzen , dass die Seite, die wir hier erhalten, nicht so beschäftigt ist , wie es wäre, wenn Sie einfach unsere reguläre Seite laden würden. Stimmt's? Das ist also die reguläre Seite am unregelmäßigen Rand. Dies ist der Private, also ist es nicht so beschäftigt. Worauf wir uns jedoch konzentrieren sollen, wäre die Konsole. Wenn wir auf Konsole klicken, sehen wir hier, dass der Cursor blinkt und darauf wartet , dass wir etwas tun. Diese Konsole ermöglicht es uns also mit JavaScript zu interagieren. Wir können unser JavaScript hier kalt machen und sofortiges Feedback basierend auf dem Code erhalten , den wir schreiben. Die Sache ist, dass beim Aktualisieren dieser Seite die Konsole neu geladen wird. Jeder Code, den Sie geschrieben haben, würde also gelöscht. Aber nachdem wir später mit JavaScript interagieren und die Sprache verstanden haben, fügen wir unserer Website etwas JavaScript hinzu, mit der wir arbeiten. Und Sie werden sehen, wie er den Code, den Sie schreiben, beibehalten und entsprechend wiederverwenden kann. Aber im Moment, wie ich schon sagte, erforschen wir es einfach wirklich. Das erste, was die meisten Programmierer haben, oder? Und wir haben das schon gemacht , ist HelloWorld. Sie sehen also, dass ich angefangen habe zu tippen, und Sie sehen, dass es sich so verhält, als würde Visual Studio Code Vorschläge machen. Einige dieser Vorschläge benötigen Sie möglicherweise nicht, aber wenn Sie sie sich nur ansehen, werden Sie feststellen, dass all diese Dinge das sind wozu der Browser fähig ist. Jeder Browser verfügt also über integrierte Bibliotheken für JavaScript. Und deshalb kann eine Website im Browser, die im Browser geladen wird, wenn Sie Ihren JavaScript-Code hier schreiben wird, wenn Sie Ihren JavaScript-Code hier eine Website im Browser, die im Browser geladen , auf die Anweisungen reagieren, da JavaScript wirklich nur eine Reihe von Anweisungen ist, die sagen der Browser hält die Website sollte sich ziemlich verhalten. Wenn ich etwas auf die Konsole drucken wollte. Diese Konsole wird also für viele Dinge verwendet. Es kann zu Debugging-Zwecken verwendet werden während Sie Ihre Website erstellen. Es kann wie hier für Interaktivität verwendet werden. Wenn ich drucken möchte, sehe ich das Konsolenpunktprotokoll, das L-O-G-Protokoll , dann Klammern öffnen und dann in Anführungszeichen setzen und schließen und dann normalerweise in JavaScript und endet mit einem Semikolon. Also kann ich Halloworld innerhalb dieser einfachen Anführungszeichen sagen. Das ist ein bisschen größer. Also konsolenpunktprotokoll und helloworld. Das heißt also im Grunde genommen Konsole im Browser, welcher Browser und er eine Konsole hat, bitte schreiben Sie die Log-Nachricht hallo world. Wenn ich die Eingabetaste drücke, schau dir das an, es druckt tatsächlich Hello World. Dieser Befehl hat den Browser angewiesen, zu drucken, der innerhalb der Konsole liegt. Das könnte ich leicht ändern. Mein erstes Java-Skript, int enter. Wir haben diesen ersten JavaScript-Druck. Von Zeit zu Zeit werden Sie dies undefiniert sehen, aber Sie müssen sich darüber keine Sorgen machen, es sei denn, Sie sehen Dinge in Rot. Du musst dir darüber nicht zu viele Sorgen machen, oder? Später werden wir sehen , dass ich Ihnen nur einen Kontext gebe , damit Sie sich von nichts anderem überwältigt fühlen , das auf dem Bildschirm erscheint. So würden wir also das Konsolenprotokoll des Browsers schreiben . Jetzt gibt es andere interaktive Tools, die Sie verwenden können. Sie können jsFiddle verwenden. Es gibt eine Reihe von JavaScript-Tools, mit denen Sie den Code schreiben und dann ausführen und den sofortigen Effekt sehen können. Ich denke, dass die Verwendung der Konsole in den Browsern so einfach wie möglich ist, weil Sie die gleiche Erfahrung haben. Dann sehen wir uns später noch einmal an, wie wir unsere Website bearbeiten. Das ist also eine schnelle und schmutzige Einführung in JavaScript, aber wir haben einige Lektionen vor uns. Wir haben uns verschiedene Dinge angesehen, die wir in JavaScript tun können. Und Sie werden sehen, dass wenn Sie jemals programmiert haben, es genauso aussieht wie andere Programmiersprachen. Wenn Sie noch nie programmiert haben, könnte dies Ihre erste Programmiersprache sein. Und die Konzepte hier sind auf jede andere Programmiersprache übertragbar jede andere Programmiersprache , die Sie in Ihrer Karriere lernen werden. 9. Java-Statements und Variable Erklärungen: Ordnung Leute, also werden wir uns in dieser Lektion JavaScript-Anweisungen ansehen und uns ansehen, wie wir Variablen deklarieren können. Und nur die allgemeinen Regeln der Sprache zu verstehen war, wie wir es bisher bei HTML und CSS gesehen haben, jeder von ihnen hat seine eigenen Regeln, oder? also von HTML erwartet, dass Sie bestimmte Tags öffnen und schließen, das müssen Sie manchmal nicht tun. Aber letztendlich gibt es Regeln, die Sie einhalten müssen, wenn Sie das gewünschte Ergebnis aus Ihren Bemühungen wünschen. Das Gleiche gilt für TSS. JavaScript hat also Regeln und noch einmal, was Sie mit JavaScript lernen werden, vieles davon ist übertragbares Wissen. Mit diesem Konsolenfenster ziehe ich es einfach ganz nach oben, um es so groß wie möglich auf dem Bildschirm zu machen . Und was wir tun werden, ist, dass ich einfach gehe, du kannst entweder einfach darauf klicken oder Control L ausführen oder einfach deine Seite aktualisieren, oder Control L ausführen oder einfach deine Seite aktualisieren wenn wir die Konsole aktualisieren. Dies ist also der Code aus der vorherigen Lektion. Ich werde einfach alles reinigen und dann haben wir eine neue Konsole, mit der wir arbeiten können. Sie können auch andere Kleinigkeiten tun , die Ausdrucksfilter leben. Einige davon benötigen Sie möglicherweise nicht unbedingt. Ich weiß es. Sie können bestimmte Konsolen-Seitenleisten und Nachrichten auf Dingen basierend auf der Leistung der Website, auf der Sie sich befinden, ein- und ausblenden bestimmte Konsolen-Seitenleisten und Nachrichten auf Dingen basierend auf der Leistung der Website, auf . Sie können auch filtern, Sie können sich verschiedene Dinge ansehen. Wie gesagt, die Konsole wird zum Protokollieren verwendet. Später, wenn Sie bilinear riesige Websites sind , werden Sie hier tatsächlich verwendet, um bestimmte Fehler zu überwachen, die Sie möglicherweise auf einer Website erhalten. Als Endbenutzer kommt es an, wenn Sie auf eine Schaltfläche klicken und es funktioniert nicht. Sie könnten also sagen, wenn der Benutzer auf die Schaltfläche klickt und etwas nicht so passiert, wie es sollte, Sie sich bei der Konsole anmelden , damit er als Warnung dienen kann , dass dies möglicherweise falsch ist. Die Konsole ist also sehr leistungsfähig, obwohl wir sie verwenden, um zu lernen, wie man Code schreibt. Und das ist aufgrund moderner Browser möglich. Ich lasse Sie nur wissen, dass Sie sie beim Erstellen Ihrer Website für tatsächliche Hilfe auf Produktionsebene verwenden können. Okay, also wie ich schon sagte, wir schauen uns Aussagen an. Aussage in den meisten, wenn nicht allen Programmiersprachen ist genau wie eine Deklaration, oder? Also als ich Console Dot sagte, tut mir leid, console.log, schreibe irgendetwas. Und merke, dass ich meine Pfeiltasten nach oben und unten verwende , mit denen ich alle Befehle durchlaufen kann , die ich zuletzt in der Konsole ausgeführt habe, solange das Fenster geöffnet ist. Das ist also eine andere Sache. Nun, wenn ich auffrische, ja. Solange das Fenster geöffnet ist. Wenn ich also klar bin, aktualisiere ich, ich kann es klären, und dann bin ich wieder hier. Dies ist eine Aussage, keine Anweisungen im Allgemeinen, in JavaScript muss mit einem Semikolon enden. Sie können mehrere Aussagen haben , die Sie durchgemacht haben und sehen, ob ich Hello World machen wollte und dann wollte ich etwas anderes schreiben, ich kann einfach zur nächsten Zeile gehen, die in den Grenzen von Diese spezielle Konsole würde bedeuten, dass es schwierig ist, Umschalttaste und Enter zu drücken. Das bedeutet, dass ich zur nächsten Zeile gehen möchte, aber nicht, führe die Zeile noch nicht aus. Habe ich anfangen, eine andere Aussage einzugeben? Dann könnte dieser sagen: Hallo. Schon wieder. Das ist eine andere Aussage. Und für so viele Anweisungen, wie ich ausführen möchte, kann ich einfach die Umschalttaste drücken. Das endet also im Allgemeinen mit Semikolons. Das sind Aussagen. Andere Dinge, die Sie tun würden, habe ich keine Variablen erwähnt. Eine andere Sache, die Sie tun würden, ist eine Variable zu deklarieren. Eine Variable ist also wie ein temporärer Lagerort für einen Wert. In Ordnung, also wenn ich speichern wollte, sehen Sie einen Namen, ich könnte sagen lassen, das ist ein Schlüsselwort, lass, und dann den Namen der Variablen. Die Variable ist der Name des temporären Speicherplatzes. Also könnte ich den beleuchteten Namen sagen da ich beabsichtige, einen Namen zu speichern, den ich meinen temporären Lagerplatz anrief , entsprechend dem, was ich aufbewahren möchte. Wenn ich Edge speichern wollte, könnte ich sagen, lass altern. Dann kann ich ihm einen Wert geben, indem ich gleich sage. Also nennen wir hier das Gleichheitszeichen bei bestimmten und den Zuweisungsoperator. Während Sandy, was in unserem Lagerraum unter diesem Namen unterschreibt . Beachten Sie also, dass ich doppelte Anführungszeichen verwende und einzelne Anführungszeichen verwende, Sie können fast eines verwenden. Es sind sehr spezifische Situationen , in denen Sie das eine und nicht das andere benutzen würden. Ich werde sie fast austauschbar benutzen, aber später wirst du sehen, wann du das eine und nicht das andere benutzen würdest. Aber in JavaScript können Sie damit in anderen Sprachen davonkommen, Sie können möglicherweise nicht so einfach damit davonkommen. Aber wie gesagt, jede Sprache war ähnlich, hat ihre Nuancen und ihre Regeln. Aber ich habe aufgehört, dass das Wissen übertragbar ist. Lass den Namen gleich sein, und dann kannst du deinen Namen eintragen, ich gebe nur einen zufälligen Namen ein. Sobald ich eine solche Aussage mit einem Semikolon bekomme, möchte ich etwas anderes, das voraus ist. Und ich werde ihm einen Wert zuweisen dem Punkt mit einem Semikolon entspricht. Und was wäre dann, wenn ich die Werte aus diesem Tool drucken wollte ? Dies ermöglicht es Ihnen, dynamisch zu sein, weil ich, ich sehe nur, dass ich diese Werte einfüge , aber in einer realen Situation wie auf unserer Website, wenn jemand Ihr Formular ausfüllt, denken Sie darüber nach dich selbst als Nutzer. Wenn Sie ein Formular ausfüllen und Absenden klicken, werden diese Werte irgendwo gespeichert, denn auf Absenden klicken, werden diese Werte irgendwo gespeichert, denn wenn Sie sich abmelden, sehen Sie tatsächlich Ihren Namen. Es ist derselbe Name, E-Mail-Adresse alle Werte , die Sie im Forum angegeben haben, die Ihnen präsentiert werden. Es ist klar, dass sie irgendwo aufbewahrt werden. Diese temporären Speicherorte, die als Variablen bezeichnet werden, sollen diese Werte vorübergehend speichern, während Sie sich auf unserer Website befinden. Sie wieder komplizierter als das. Wir arbeiten einfach mit dem, was ich gerade sehe. Ich sehe nur, lass mich diesem Wert gleich sein, dass h gleich diesem Wert ist. Wenn ich sie also zurückdrucken wollte, könnte ich Log konsolen und den Namen sehen. Ich kann es noch hinzufügen. Buchstäblich füge ich es hinzu. Dies ist ein Pluszeichen. Wir wissen, dass das für Mathe verwendet wird. Aber hier sind das ein oder zwei Wörter, das ist eine Zahl. JavaScript ist also das, was wir als lose typisierte Sprache bezeichnen, was bedeutet, dass es sich nicht auf den Datentyp fixiert, den Sie zuweisen. Ich sehe nur, dass es einen temporären Speicherplatz schafft , diesen Wert speichern. In anderen Programmiersprachen wird es strikt geben, wo, wenn Sie einen Namen speichern, die Hälfte angibt, dass dies eine Namensvariable ist. Wenn wir mit der Numeralität beginnen, muss ich sagen, dass dies eine Zahlenvariable ist. In JavaScript ist nicht so streng. Wieder einmal haben verschiedene Sprachen unterschiedliche Regeln, aber trotzdem übertragbares Wissen. All dies ist also eine Reihe von Aussagen, die ich noch ausführen muss. Diese. Ich sehe immer wieder Shift Enter, Shift Enter und gehe in die nächste Zeile. die gleiche Weise, wie Sie es schreiben, Tränen und sehen, was wir dazu neigen, es im Texteditor zu schreiben , wenn wir dort ankommen, bis wir tatsächlich ausführen. Wenn ich die Eingabetaste drücke, wird es tatsächlich ausgeführt. All das wird hallo world drucken, hallo nochmal. Und dann schau Carrier, es ist Sprinten 50 versteckt weil wir temporäre Lagerräume deklariert haben. Und wir sagten, drucke den Namen plus das Alter aus. Es druckt den Namen plus das Alter. Was merkst du jetzt als Problem? Ich bin sicher, dass du da siehst, warum ist die 50 an das Versteckte gebunden? Der Grund dafür ist, dass wir Datenbits formatieren müssen , damit wir console.log sagen können. Und dann kann ich es ein bisschen aufpeppen. So wie wir eine Variable plus eine Variable plus eine Variable können, kann ich eine literale Zeichenfolge plus. So nennen wir es, wenn Sie das Anführungszeichen öffnen , Ihre eigene Nachricht eingeben und schließen. Das nennen wir eine literale Zeichenfolge. Ich kann console.log und öffne meine literale Zeichenfolge hier, wo ich den Namen Doppelpunkt sehe, es vorzeigbarer machen, oder? Und dann füge ich die Namensvariable dazu hinzu. Semikolon ist eine Aussage. Und dann wird es das in einer anderen Zeile tun, console.log. Und ich kann umsichtiges Alter Doppelpunkt. Beachten Sie dieses Leerzeichen, das Leerzeichen, die Spalten innerhalb dieser Anführungszeichen. Und dann sehe ich es plus Alter. Ich habe kein Semikolon die Eingabetaste gedrückt. Da sind wir los. Name ist das, was in der Variablen enthalten ist , und das Alter ist das, was in der Variablen enthalten ist. Nein, nichts. Ich habe so alt nicht so viel Platz gemacht, wie ich den Raum hält. Das ist eine andere Sache, nicht in den Anführungszeichen steht. Javascript ist es egal , ob Sie ein Leerzeichen setzen oder nicht, solange die Syntax stimmt. Dies sind Kleinigkeiten an JavaScript, die es so flexibel und einfach zu erlernen machen weil es eine sehr verzeihende Skriptsprache ist. Aber dann gibt es bestimmte Regeln, die brechen können, Sie als potenzieller Entwickler, der auf andere Sprachen wechselt, brechen können. Aber im Moment ist das alles, was wir durch vier Aussagen gehen werden und wie sie funktionieren. Wir wissen, dass wir mit Semikolon enden müssen. Wir wissen, wie man auf der Konsole druckt, wir wissen, wie man Variablen deklariert und Werte zuweist, und wir wissen, wie man sie zurückdruckt und enthält ein Format, das wir drucken. Und wenn ich einen Wert ändern wollte, existiert Name, damit ich dem Namen einen neuen Wert geben kann. Okay, also könnte ich einen neuen Wert sagen und das sagen, um es zu nennen. Alles klar. Wenn ich dann wieder console.log Name und Alter sage, nein, wird es neues Video drucken. Jetzt weißt du, wie man nach der Zuweisung zuweist und ändert, oder? Diese zweite Zeile ähnelt eher einer Bestätigung, dass diese Zeile funktioniert hat. Denn wenn du etwas tust, das nicht funktioniert, würdest du einen bestimmten Fehler bekommen. Wenn ich diese Anweisung in einer unvollständigen Überwachung geschrieben habe und es mir einen ungefangenen Syntaxfehler geben und versucht mir zu sagen, was damit nicht stimmt. Sie schicken mich, das verpasse ich. Verzeihung? Dies ist die Konsole gibt Ihnen unterbrechendes Feedback. Beginnt, im Gegensatz zu dem, was wir mit Visual Studio Code und einem HTML gesehen haben mit Visual Studio Code und einem HTML gesehen , bei dem es tatsächlich versuchen wird, dies zu kompensieren. Dieser wird es nicht tun. Es wird Ihnen sagen, dass Sie einen Bereich haben , in dem Sie ihn reparieren müssen. In Ordnung, also wenn wir wiederkommen, werden wir uns einige arithmetische Optionen ansehen. Operation, tut mir leid, in JavaScript. 10. : Hey Leute, willkommen zurück. In dieser Lektion werden wir uns arithmetischen Operationen in JavaScript befassen, das ist es nicht. Arithmetische Operationen beziehen sich im Allgemeinen auf ein Hauptmerkmal der meisten, wenn nicht alle Programmiersprachen die Fähigkeit sind, einige mathematische Operationen auszuführen. Sie können hinzufügen, subtrahieren, multiplizieren. Wir werden uns nur einen kurzen Blick darauf werfen , wie das aussieht. Würden wir JavaScript verwenden? Ich werde die Konsole räumen. Schauen wir es uns an, damit ich leicht zwei Zahlen hinzufügen kann. Ich kann eins plus eins sagen. Siehst du, es ist, die Konsole bekommt mir interaktives Feedback. Das sind zwei. Also eins plus zehn, das sind 11. Das Pluszeichen, wenn wir es mit zahlreichen Anzeigen zu tun haben, die Zahlen wie Sie erwarten würden, oder? Wir haben also bereits gesehen, dass das Pluszeichen auch darin besteht, eine Zeichenfolge oder zwei Strings oder eine Zahl und eine Zeichenfolge hinzuzufügen . Bei einer Zeichenfolge oder einem Wort wird die Zeichenfolge durch die Anführungszeichen mit einem einzelnen Anführungszeichen oder doppelten Anführungszeichen dargestellt die Anführungszeichen mit . Beide repräsentieren eine Zeichenfolge. Ich kann also immer String One sehen , weil es Zeiten gibt denen eine Zahl oder eine Zahl verwendet wird, aber sie ist nicht unbedingt für mathematische Zwecke wie eine Lizenzteilnummer oder ähnliches. Es wird nicht wirklich für Mathe verwendet, wie man es eine Nummer nennt. Sie könnten also etwas wie A1, R1 haben. Aber wenn diese Zahl für nicht-mathematische Zwecke verwendet wird und Sie sie hinzufügen, sagen wir mal eine Zahl, sagen wir mal eine Zahl, dann werden Sie am Ende etwas wie eins, siebzig, fünfundsiebzig, sechsundsiebzig haben. Weil diese Zeichenfolge plus die Zahl Ihnen die Zeichenfolge und die Zahl geben wird . Wenn ich jedoch zwei Ziffern hinzufügen würde, eine plus 75, dann würden Sie das mathematische Ergebnis von 76 erhalten . sind Kleinigkeiten über JavaScript, die Sie in vielen anderen Sprachen nicht sehen werden, aber das ist eine der wichtigsten Funktionen, die Sie wahrscheinlich nutzen können, wenn zutreffend. Und wenn nicht, dann weiß ich einfach, wie man es benutzt und wann. Das ist Zusatz, Multiplikation, es ist ziemlich dasselbe. Also sieben mal h, das gibt uns das Produkt, oder? Würden wir in der regulären Mathematik, wenn wir schreiben, das x- oder ein x aussehendes Symbol verwenden ? In Informatik und Programmiersprachen verwenden Sie im Allgemeinen das Sternchen, und so stellen Sie die Multiplikation dar. Mal sehen, was passiert , wenn wir versuchen, eine Zeichenfolge mal eine Zahl zu multiplizieren. Wenn ich eine Reihe mal in zahlreichen mache, sieh dir das an, ich bekomme Dollar 76. Es sieht nicht ganz wie der Zusatz aus, der Zusatz-Vorgang, wenn wir die Zeichenfolge plus eine andere Zeichenfolge oder eine Zahl oder plus etwas anderes haben eine andere Zeichenfolge oder eine Zahl oder , wenn es eine Zeichenfolge plus etwas ist, nennen wir diese Verkettung. Also verketten wir die Zeichenfolge verketten etwas mit einer Zeichenfolge. Wenn wir Multiplikation machen, ob es sich um eine Zeichenfolge handelt oder es sich tatsächlich um eine Zahl handelt, erhalten wir natürlich ob es sich um eine Zeichenfolge handelt oder es sich tatsächlich um eine Zahl handelt, die gleichen Ergebnisse. Das ist klar. Schauen wir uns die Division an. Wenn ich also zehn geteilt durch C5 mache, würden wir erwarten, dass wir Tools sehen. Das Visuelle in der Programmierung würde also dieses Zeichen verwenden, das ist Schrägstrich. Also zehn geteilt durch zwei. Wenn ich das mit Streichern machen würde, was würden wir bekommen? Würde die gleichen Ergebnisse erzielen? Das ist die Vision. Und der nächste grundlegende wäre, wäre Subtraktion. 45 minus fünf gibt uns also 40. Wenn ich String 45 minus fünf mache, bekomme ich immer noch 40. Das Pluszeichen ist also das einzige, das wirklich anders funktioniert wenn es sich um Zahlen im Vergleich zu Ziffern und Stream handelt . Wie wir sehen können, liefern sie uns alle sehr ähnliche Ergebnisse. Es ist jedoch immer gut, konsistent zu sein. Mischen und Abgleichen , dass dies im Allgemeinen davon abgeraten wird. Ich denke, sie kompensieren nur die Tatsache, dass es passieren könnte. Aber im Allgemeinen wollte ich mich nur mit Ziffern beschäftigen , wenn du Mathematik machst und es dabei belassen. Alles klar? Die gleiche Art und Weise, wie wir einer Variablen einen R1-Wert zuweisen könnten, ist die gleiche Weise, wie wir sagen können , dass das Produkt gleich ist. Und dann geben wir dir die beiden Zahlen 15 Mal. Nein, es sagt dir undefiniert, weil du eine Erklärung abgegeben hast und ich meine eigenen Regeln verbreche , die mit einem Semikolon endeten, aber ich habe gerade eine Erklärung erstellt. Ich habe es nicht gesagt, dass es irgendetwas mit dem Wert anfangen soll. Es hat Produkte. Hat einen Wert in Produkten, aber es weiß nicht was, es hat kein Verzeichnis erhalten. Jetzt würde ich wahrscheinlich sagen, dass ich sehen wollte, was in Produkten enthalten ist. Also lass mich console.log. Dann würde ich Protokoll schreiben. Wenn ich das mache, sehe ich den Wert innerhalb von Produkten. In Ordnung. Nur noch eine andere Sache, auf die man hinweisen muss. Ich habe keine Semikolons gesetzt und das Ende davon, dass ich gekauft wurde und Regeln gebrochen habe, oder? Der Punkt ist, dass Artefakt ist, dass es nur eine Aussage ist , die ich gleichzeitig schreibe. Es spaltet mich davon, damit davonzukommen. Wenn ich jedoch mehrere Anweisungen in mehreren Zeilen in dieser Aussage oder Anweisungen schreiben mehreren Zeilen in dieser Aussage würde, um zusammen zu laufen , würde ich wahrscheinlich Probleme haben. Also willst du immer und mit deinem Semikolon vorher. So würde das so ziemlich aussehen. Aufbauend auf den einfachen arithmetischen Operationen haben Sie einige akkumulative Operationen. Was also, was meine ich damit ist, sagen wir, wir haben, lasst uns eine Norm haben. Das ist eine Variable b gleich zehn. Und dann wollte ich das um fünf erhöhen. Der Anstieg von eins um fünf würde bedeuten, dass ich sagen müsste, dass num eins sagen welcher Wert oder nicht ein Jahr neuer Wert unabhängig davon sein wird, was Ihr Wert war plus fünf es und so ich könnte es 15 schaffen, weil ich es um fünf erhöht habe. Nein. Eine kürzere Art, dies zu tun, wäre, den Akkumulator oder den akkumulativen Weg zu verwenden . Wenn ich es um fünf erhöhen wollte, könnte ich plus gleich fünf sagen. Okay, also wird diese Aussage genauso bewertet wie sagt, niemand, nimm dich selbst und füge fünf hinzu und erfülle das ist dein neuer Wert. Ziemlich normal. Kümmere dich um den Wert und füge fünf hinzu , und was auch immer das ist, das weisen wir ihm zu. Wenn ich also ansteige, wenn ich das mache, sollte dies nicht 20 werden. Geh und sieh was ich meine. Das ist also ein Akkumulator und dies gilt für jede Art von Operationen. Wenn ich es um das Fünffache erhöhen wollte, was bedeutet, dass ich es mit fünf multiplizieren würde. Dann würde man im Allgemeinen sagen, dass Num One einmal fünf Mal der Norm entspricht. Verkürzte Version, ich kann nur c mal gleich fünf, dann sollte das fünfmal mehr bringen. Wenn ich es um das Fünffache verringern wollte , wäre es dividiert gleich fünf. Und ich senke es um das Fünffache. Das Gleiche würde für die Subtraktion gelten. Also Norm eins minus gleich und dann fünf. Das heißt, nimm fünf davon weg. Wieder einmal erhöhen all dies immer noch den Wert, der in Num eins gespeichert wird , relativ zu der Zahl, die ich hier angebe. Okay, so funktioniert die Arithmetik in JavaScript. 11. JavaScript Decision: Alles klar Leute, in dieser Lektion werden wir uns Entscheidungserklärungen ansehen, obwohl wir im Alltag vergessen, beide Programmierung sind. Im Alltag müssen wir mit bestimmten Dingen Entscheidungen treffen. Wenn bestimmte Faktoren auftreten , ergreifen wir bestimmte Maßnahmen. gleiche Art von Logik. Wenn dann oder was ist der Fall? Der Fall könnte sein , dass wir dies tun oder diese Maßnahme basierend auf einem Wert ergreifen. Wie viel Geld habe ich? Wenn ich 500 Dollar habe , mache ich das. Wenn ich 200 Dollar habe, dann mache ich das usw. Wir treffen oft Entscheidungen über verschiedene Dinge im wirklichen Leben. Bei der Programmierung ist es also das Gleiche. Wir schauen uns diese Variablen an, dass wir uns diese Werte ansehen. Und dann denk einfach darüber nach. Wenn Sie etwas online kaufen und bestimmte Werte zu bestimmten Zeiten angeben, kann sich dies auf den Preis des Artikels auswirken. Wenn Sie einen Gutscheincode angegeben haben, würde der Artikel um einen bestimmten Geldbetrag reduziert. All diese Dinge programmieren wirklich nur und könnten mit der gleichen Art von Logik erreicht werden , die wir betrachten die gleiche Art von Kälte, die wir in JavaScript betrachten. Wenn ein Gutscheincode vorhanden ist, führen Sie diese Mathematik aus. Preis um das Fünffache senken oder subtrahieren, wenn der Preis richtig ist? Ich gebe dir nur Szenarien. Was wir uns also ansehen werden , ist, dass wir uns bereits die Arithmetik angeschaut haben. Wir werden uns jetzt Entscheidungen ansehen. Die gebräuchlichste Form der Entscheidungserklärung , die Sie sehen würden , sind die if-Aussagen. Denn genau wie das, was wir in unseren Köpfen sehen würden, wenn dies erreicht wird , dann ist es ein sehr ähnliches Konstrukt in der Programmierung. Es würde also tatsächlich damit beginnen, zu sehen, ob Sie Klammern öffnen, und wann immer ich Klammern öffne, schließe ich es, denn wenn Sie sie nicht schließen, endete es mit einem Syntaxfehler und es kann sehr werden nervig. Jedes Mal, wenn ich eine Klammer oder sogar momentan Slips öffne , öffne und schließe ich gleichzeitig. Du wirst also bemerken , dass ich das mache. Wenn sich innerhalb der Klammern befindet, geben Sie Ihren Zustand an. Also habe ich die Variablen num eins schon, weil sie sich im selben Konsolenfenster befinden, sie existieren immer noch, bis ich den Browser schließe. Also ist niemand da. Also sagte ich, ob taub größer als zehn ist, und dann geht meine dann in diese geschweiften Klammern hinein. Wenn also, wenn Klammern geöffnet sind, dann haben wir eine Bedingung. Kein Hinweis, dass ich bei U-Dub den gleichen größeren als Sand verwende , der in der Schule gelernt wurde. Ich bin mir sicher, dass Sie zu dem Zeitpunkt, als wir diesen Kurs absolvieren , mehr als weniger als Zeichen erfahren hätten. Das ist also größer als zu sagen, dass dies weniger als Zeichen ist. Sie können größer als, gleich und gleich sehen . Wenn es größer oder gleich zehn ist. Sie können sehen, ob es so ist, ob die Zahl eins kleiner oder gleich zehn ist. Sie können sehen, ob es überhaupt nicht gleich ist. Nicht gleich sieht so aus. Nicht gleich. Und dann kann man sehen, ob es gleichwertig ist. Ich hätte gleichwertig oder nicht gleich sehen sollen, aber das ist in Ordnung. Sie können ein Äquivalent sehen, indem das Doppelgleichheitszeichen verwenden und dann die Äquivalenz, wir werden uns einige verschiedene Variationen des Lochs ansehen , die aussehen können, weil JavaScript sehr werden kann genau wenn es um Äquivalenz geht. Aber was ich sehe ist, dass dies Ihre logischen Operatoren sind , größer als, kleiner als, nicht gleich, größer oder gleich, kleiner oder gleich R, gleich R-Äquivalent. Beachten Sie, dass es doppelt gleich ist, keine einzige, eine einzige Mittelzuweisung. Ich kann nicht sehen, ob Num eins gleich ist. Das wird F nicht ausführen, um zu sehen, ob es gleichwertig ist. Also überprüfe ich diese Seite, diesen Wert, egal welche bedingte Anweisung ODER-Operator und dann diese Seite. Und wenn es stimmt , bleibe ich bei dem, was ich tun werde. Beachten Sie also, dass es weiter ausgeführt wird. Ich muss Shift Enter machen, also beginnen wir mit der nächsten Zeile. Und dann möchten Sie im Allgemeinen Ihren Code einrücken, damit Sie deutlich sehen können, dass dieser Code, den ich schreiben werde , in diese if-Anweisung passt. Wenn das also der Fall ist, dann konsolenpunktprotokoll. Ich mache einfach eine console.log. Tatsache ist jedoch, dass Sie in diesen geschweiften Klammern fast alles tun , was notwendig ist. Wenn das zutrifft. Was wirst du tun? Wirst du etwas Mathe machen? Druckst du etwas auf den Bildschirm? Schicken Sie irgendwo eine Warnung an etwas? Also kann ich console.log machen. Schnittholz ist zehn. Wissen Sie, was für Bolt andere Szenarien ist, was ist, wenn es größer ist als in derselben if-Aussage, ich kann es tatsächlich verketten und anders sagen. Ich kann so viele andere tun, wenn Sekunden sonst sagen, wenn das heißt, wenn das nicht stimmt, dann dieses. In Ordnung, also erstellen wir verschiedene Szenarien. Wenn das stimmt, tu das sonst. Wenn in diesem Szenario etwas anderes stimmt, setzen wir mein ganzes Semikolon ein. Dann mach das und wir können so viele andere Szenarien mit anderem tun , wenn sonst, wenn taub größer ist als Zinn. Und dann gilt die gleiche Syntax. Geschweifte Klammer öffnen. Denken Sie daran, die Umschalttaste zu verwenden wenn sie zu einer neuen Zeile gehen. Und dann versuche ich eine andere Art des Druckens. Anstelle einer console.log werde ich also eine Warnung machen. Warnung würde tatsächlich in einem Browser erscheinen. Waren Sie jemals auf einer Website und wollten vielleicht weitermachen und Sie haben Ihre Änderungen bei dieser Warnung nicht gespeichert, die im Browser angezeigt wurde , um das Klicken zu sehen, müssen Sie darauf klicken, bevor Sie fortfahren können. Das ist so ziemlich genau das , was der Alarm tut. Ich kann also sehen, dass die Warnnummer größer als zehn ist. Dann kann ich noch sagen, Sir, mein Fahrrad und mache so viele andere. Wenn Aussagen als Bedarf sind. Aber manchmal gehen Ihnen die Szenarien aus und wenn keines dieser Szenarien, werden wir extrudieren und Sie wollten eine letzte Sache tun. Es gibt also einen letzten Ausweg, wenn nichts anderes stimmt. Alles klar, ich glaube Global, 500 Dollar habe ich zum Essen bekommen, wenn ich 400 Dollar habe, gehe ich für 300 Dollar ins Kino. Ich wollte es machen. Ansonsten bleibe ich zu Hause. Dass es sonst eine geschweifte Klammer geben würde, oder wenn Sie einfach etwas anderes sagen , und dann geben Sie an, was Sie tun möchten. Wenn nichts, was Sie oben angegeben haben, zutrifft, dann habe ich das getan. Also wollte ich eine console.log machen und sagen, dass etwas passieren kann, so etwas. Das ist also dein letzter Stich. Das ist also einfach, wenn sonst, wenn man sonst nur das haben kann wenn man sonst ungerecht ist. Sie müssen also nicht sonst dazwischen gleich sein, wenn dies, sonst alles in Ordnung, Sie könnten sogar eine if-Aussage dazwischen gleich sein, wenn dies, sonst alles in Ordnung, sonst alles in Ordnung, haben , um zu sehen, ob das stimmt, dann tun Sie dies. Wenn es nicht stimmt, überspringt es einfach und geht sowieso zur nächsten Codezeile. sind also Dinge, die Sie tun können, um Entscheidungen zu treffen. Wenn ich das also ausführe und MTC hier drücke, wird die Konsolenprotokollnummer zehn sein, weil wir num eins auf zehn gesetzt hatten. Wenn ich also num eins sage, ist Ihr Wert Nr. 25. Mal sehen, was passiert. Also werde ich diese if-Aussage erneut ausführen. Der Wert der Norm ist nicht 25s wird die if-Anweisung erneut durchlaufen. Und dann drücke ich die Eingabetaste, sieh dir diese Warnung an, also ist diese Zahl größer als zehn. Das ist es, was diese Warnung bewirkt. Und wenn ich dann auf eins sitze, um gleich fünf zu sein. Also nein, es ist nicht gleich zehn und es ist nicht größer als zehn. Wir erwarten, dass es gehen wird, oh, tut mir leid. Ja, da sind wir los. Es wird sagen, ob nichts passiert ist weil das nicht stimmt, stimmt das nicht. Sonst werden wir das tun. Das heißt, Sie treffen einfache Entscheidungen in JavaScript. Wissen Sie , dass der nächste , den wir uns ansehen werden, als Switch bezeichnet wird. Der Wechsel ist relativ einfach. Es ist ziemlich ähnlich, wird aber in verschiedenen Operationen verwendet. Es sind also wahrscheinlich eher vier Gitter. Nehmen wir an, dass die Noten immer intensiv markiert waren. Wenn du auf 100 kommst, hat der Apostroph 50, du hast es kaum geschafft. Und wenn du 0 hast, nun, das sind keine Zehner, oder? Angenommen, Sie haben drei mögliche Noten, drei mögliche Werte. Sie werden entweder eine 150 sind 0 haben. Also kann ich sagen, schalte die Variable ein. Verwenden wir also einfach die Norm eins oder lassen Sie uns mehr Wagen sein und Raster verwenden. Also ging ich, um Gier gleich 900 zu lassen. Fangen wir damit an. Wir haben also das Gitter, das 100 entspricht. Dann traf ich unsere Entscheidung auf der Grundlage dieses Wertes , dieses Gitter Maya hart. Ich wollte sagen, Gier wechseln. Dann öffne meine geschweiften Klammern wie gewohnt. Beachten Sie also, dass die geschweiften Klammern in diesen Blöcken und diesen Blöcken eine große Rolle spielen . Das ist ein ganzer Block, Steven. Das ist eine ganze Sache. Es ist mehrzeilige und in dieser Struktur sehr streng. Sobald Sie verstanden haben, dass Struktur, die Klammern und geschweifte Klammern verwendet, oder im Switch erneut in Klammern den Wert und die geschweiften Klammern verwendet, dann sollten Sie in Ordnung sein. Die Switch-Anweisung betrachtet den Wert, um zu sehen, wie hoch der Wert ist, was ist der Wert und was soll ich diesen Wert tun? Also statt ob und sonst und was auch immer wir haben wechseln und wir haben Fall. Und dann schauen wir uns den Wert an. Wenn der Fall also 100 ist, was bedeutet, dass dieser Wert diesen Wert hat, hat diese Variable diesen Wert. Dann sage ich Doppelpunkt. Unter diesem Fall ergreife ich dann eine Aktion. Also console.log, du hast so viele Zeilen passiert wie ich brauche, die ich unter diesen Fall legen kann, aber wenn ich fertig bin, werde ich einfach Pause sagen. Nein, ich mache Tabbing, weil ich sehr gerne formatieren möchte. Sie können, es ist weitaus lesbarer, wenn Sie Ihren Code einrücken , und Sie können sehen , wo alles beginnt und aufhört. Wenn du ein Anfänger bist. Der Texteditor wird einfach ausgelöst. Ich mache es nur in der interaktiven Konsole, damit wir sehen können, dass es in Echtzeit passiert. Grade wechseln. Und dann machen wir diesen Fall. Und dann ergreifen wir eine Aktion oder so viele Aktionen wie wir brauchen. Und wenn wir dann fertig sind, müssen wir Break sagen. Wenn wir nicht Break sagen, wird passieren, wenn wir Schnappatmungen in Frühgeburt definieren. Wenn wir also einen zweiten Fall definieren, wenn das Raster 50 ist und dann sage ich console, console.log und sehe, dass Sie kaum bestanden haben. Und wenn ich dann keinen Brief hätte, würde es tatsächlich beide durchlaufen. Also lass mich die Pause entfernen und dir das zeigen. Du siehst also, dass es das getan hat und das getan hat, weil es keine Pause gab, du vergehst möglicherweise kaum. Natürlich stimmt das nicht. Du würdest die Orange bei unseren 50 entweder passieren sehen oder ist nicht bestanden. Also muss ich dieses Break-Schlüsselwort am Ende eines Falles haben, damit es weiß, dass es dort aufhören sollte. Nein. Was hat der VC gesagt, wenn du 0 hast, dann hast du das Gefühl, dass wir einen weiteren Fall hinzufügen können. Sie können also so viele Fälle hinzufügen. Denken Sie daran, dass jeder Fall darin besteht , dass dies das Szenario ist. Das ist es, was ich tun wollte für den Fall , dass dieser ganze Stress oder console.log, dann können wir sehen, dass Sie fehlgeschlagen sind. Dann brechen wir kaputt. Dann wenn nichts der oben genannten. Genau wie bei der if-Aussage oder wir können sonst sagen, war nichts anderes wahr. Also mach das einfach. Wenn nichts anderes stimmt, dann ist es genauso, wie ich den Standardwert sehen kann , nicht höre. Standardwert würde bedeuten, dass, wenn keiner dieser Fälle erfüllt würde , nur diese Aktion standardmäßig aktiviert wird. Also könnte ich console.log. Und normalerweise, wenn es hier ankommt, ist es normalerweise daran, dass etwas ungültig ist. In unserem Fall können wir also sagen, dass es sich um ein ungültiges Raster da Sie entweder 150 oder 0 erhalten sollten. Alles, was in diesen Fällen nicht der Fall ist, könnte ein ungültiger Wert sein, so etwas. Natürlich gebe ich dir nur ein Szenario. Ich hoffe, du denkst darüber nach und siehst es. So könnte ich das auf etwas anderes anwenden, oder? Es wäre also ein ungültiges Gitter. Das werden wir dem System mitteilen, dass es sich um eine ungültige Note handelt, wenn wir die Note aufgrund der Fälle, die wir alle gelernt haben, nicht erkennen wir die Note aufgrund der Fälle, die wir alle gelernt haben . Wenn ich die Eingabetaste drücke , haben wir natürlich bereits das Gitter als 100s definiert. Also würden wir natürlich bestehen wenn ich den Wert von Rastern von 50 ändere und dann diese Switch-Anweisung erneut ausführe, die du kaum bestanden hast. Wenn ich dann den Wert des Rasters erneut auf 0 ändere, wird die Switch-Anweisung auswerten, dass Sie fehlgeschlagen sind. Okay, damit Sie sehen können, dass es jeden dieser Fälle trifft. Versuchen wir es nun mit einem Standardfall. Wenn es also nicht 150 oder 0 ist, basierend auf unserer gesamten Linie, sollte es basierend auf unserer Gliederung als ungültiges Raster angesehen werden. Wenn wir das tun, ungültige Note, und das ist im Grunde genommen treffen die ungültige Note, und das ist im Grunde genommen Hold-Entscheidungen JavaScript. Wie komplex sie werden, basiert natürlich Wie komplex sie werden, basiert auf dem Szenario und Ihr Kontext wird immer Bestimmen Sie, welcher Code benötigt wird, um ihn zu lösen. Aber es ist gut zu wissen, welche Optionen Sie haben und wann Sie sie verwenden müssen. 12. JavaScript Repetition: Hey Leute, willkommen zurück. In dieser Lektion werden wir uns Wiederholungsaussagen ansehen. Lassen Sie mich also weitermachen und unsere Konsole räumen und fangen wir an. Wiederholung kommt ins Spiel, wenn Sie etwas haben, das Sie wiederholt tun wollten , und Sie möchten es nicht jedes Mal manuell machen, oder? Nehmen wir an, wir wollten schreiben die Zahlen eins bis zehn drucken. Du könntest ganz einfach console.log. Wir wollen console.log nicht drucken. Dann würdest du sagen, okay, For in ein Semikolon und dann gehe zum nächsten und dann console.log. Und dann würden wir das Tool drucken. Ich bin sicher, Sie haben den Kern, indem Sie wissen , dass Sie dies bis zehn tun müssen, dass Sie, wenn Sie die Eingabetaste drücken , tatsächlich die 12345 usw. auf die Konsole bringen würden . Das ist offensichtlich sehr Geld. Nun, ich wiederholte Aussage ist das, was es nahelegt. Es hilft uns, bestimmte Operationen zu wiederholen. Und indem wir diese Wiederholungsstruktur schreiben, können wir einen Befehl eingeben , der besagt, dass Sie etwas für X Zeit oder X mehrmals tun der besagt, dass Sie etwas für X Zeit oder X mehrmals oder bis eine bestimmte Bedingung erfüllt ist. Wir werden uns also zu Wiederholungstypen ansehen. Und das sind, die Kegel werden kontrolliert und der Zustand kontrolliert. Beginnen wir also damit, dass die Kegel kontrolliert werden. Eine kontergesteuerte Schleife wird normalerweise in Form einer For-Schleife gefunden. Es ist also für X mehrmals. Tu das, oder? Sagen wir, wir wollten eins bis zehn drucken. Und natürlich wollen wir diese Aussage nicht wiederholen, also werden wir vier sagen und dann Klammern öffnen. Und dann haben wir eine Variable, die unsere Colins sein wird, also initialisieren wir eine, ich nenne sie, ich habe gekauft, es muss nicht angerufen werden. Ich könnte Kegel genannt werden. Es könnte im Grunde alles genannt werden. Xyz Welpenhund. Er spielt wirklich keine Rolle. Ich bin die am häufigsten verwendete Variable jedoch die am häufigsten verwendete Variable , die Sie hier sehen werden, weil ich die Abkürzung für Iterator und der Kommentar auch Iterator genannt wird. Es gibt also nichts Nennenswertes an dem Auge. Es ist nur der Name der Variablen, der verwendet wird, um Kegel fernzuhalten oft die Aktion wiederholt wurde. Das initialisiert also unseren Zähler. Dann haben wir ein Semikolon gefolgt von dieser Bedingung, um zu sagen, dass ich bis x oft hochgehen sollte. Beachten Sie jetzt, dass ich bei 0 anfange. Es könnte bei zehn beginnen, es könnte bei 20 beginnen, spielt wirklich keine Rolle. Wie auch immer du irgendwo anfangen willst, dass die Bedingung sinnvoll ist. Also würde ich offensichtlich nicht mit dieser 20 anfangen und dann sagen, dass es laufen soll, bis ich weniger als r bin, tut mir leid, Rowan, solange ich weniger als zehn bin, denn das würde keinen Sinn ergeben. Ich bin bereits größer als zehn, daher wäre diese Bedingung genau dort verletzt worden. Was du tun wolltest ist zu sagen, beginne bei 0. Normalerweise ist es 0. Es könnte einer sein, aber wo fängst du an? Das wird sich auf den Zustand auswirken. Wenn ich also bei 0 anfange, dann die erste Zeile, und es wird einen Wert von 0 haben. Die zweite Zeile wird den Wert eins, die dritte Zeile und einen Wert von zwei haben . Das heißt, wenn ich zehn werde, wenn ich auf den Wert von zehn steigt, bin ich nicht mehr weniger als zehn, also wird das nicht laufen. Aber wenn du das nennst, wenn du Antonio Finger von 0 nennst, nennst du deinen rechten kleinen Finger 0, dann 12345 offen auf neun, dann hättest du auf alle zehn Finger gezählt. Zwischen 09 einschließlich zehn Runs sind also zehn Runs. Was machen wir da, du wirst sehen was ich meine. So kalter Winter, heißt ich. Da es dann bei 0 beginnt, sehe ich sicher, dass Sie niemals zehn sind, weil ich zehnmal laufen wollte. haben wir gerade festgestellt. Dann werde ich sagen, dass es jedes Mal, wenn Celsius ich plus erhöhen soll . Das könnte auch ich plus zwei sein. Ich plus es. Es hängt davon ab, wie oft ich inkrementieren wollte. Wenn ich also sagen würde, dass ich plus zehn bin, würde es von 0 steigen, tun, was es für den 0 R1 tun muss , der Mackenzie die ganze Minute genannt wird. wie viel sollte ich erhöhen, um zehn erhöhen, dann wäre das, wenn Sie wollen, dass es um zwei kommt, sagen Sie plus zwei. Hier. Wir tun es mit Plus, und weil wir nur um eins nach dem anderen steigen wollten. Und dann schließe ich die Klammern. Also öffne ich die geschweiften Klammern und gehe zur nächsten Zeile, natürlich verwende die Umschalttaste und ziehe dann innerhalb meiner geschweiften Klammern ein. Wieder einmal fangen wir bei 0 an. Wir wollen von 0 bis zur nächsten Zahlenzinn laufen, weil wir dies nicht verletzen wollen. Und wir zählen jedes Mal um eins, wenn es läuft. Was wollen wir wiederholen? Was auch immer wir wiederholen wollten, wir werden diese geschweiften Klammern in diese geschweiften Klammern legen. Ich habe nicht gesagt, wo wir zählen wollten. Zinn oder drucke die Zahlen eins bis zehn. Ich sage console.log. Und dann drucke ich die Zahlen aus. So offensichtlich, dass Kinds manuell drucken, weil dies ein bis n Mal gedruckt wird, zeigt Ihnen nur eines. Aber es gruppiert es, weil es zehnmal gedruckt wurde. Das ist ein gutes Beispiel, weil es zusammengefasst ist, aber genau das passiert hier wirklich. Wenn ich das noch einmal versuche, will ich 12345, nicht nur 110 Mal. Das bedeutet also, dass ich den Wert dessen drucken möchte , was in KI ist, weil sich KI jedes Mal ändert. Also denke ich, dass das eine gute Zahlenquelle ist, die ich für mich zählen sollte. Wenn ich also die Eingabetaste drücke, schau dir das an und alles was wir bekommen 0123456789. Immer noch nicht die Nummern eins bis zehn. Das war das Ziel, aber wir kommen dorthin. Aber wenn du zählst, war dies der erste Lauf. Ich war 0, dann kam es wieder geloopt, um eins erhöht. Hat die Action schon wieder gemacht? Nein, weil ich um eins zugenommen habe. Es ist keiner. Geh nochmal. Es ist 234. Wenn ich 12345678910 zähle, zehn Zahlen ausgedruckt, aber unser Ziel war es , eins bis zehn zu drucken. Ein einfacher Weg, dies zu erreichen , wäre, dass ich, wenn ich weiß , dass ich immer eins weniger sein werde als die Zahl, die ich erwarte. Dann kann ich einfach sagen , wenn du druckst Ich drucke ich plus eins. Füge eins zu i hinzu. Jedes Mal, wenn wir drucken können bedeutet das, dass es 0 gewesen wäre , es wird eins sein usw. und jetzt haben wir auf zehn. In Ordnung. Jetzt schauen wir uns das noch einmal an. Ich habe gesagt, dass wir bei 0 angefangen haben und wir gehen, bis es weniger als zehn ist. Und deswegen müssen wir einen hinzufügen. Was wäre, wenn wir diese zusätzliche Arbeit beim Hinzufügen eines nicht wollten ? Das ist also in Ordnung. Ich könnte einfach Konsolenprotokoll sagen, das Auge ausdrucken. Ich wollte, dass die erste Nummer gedruckt wird, um eine zu sein. Wenn ich das mache, wird es nur 123456789 drucken. Das sind neun Zahlen. Ich kriege die Zehn nicht. Nachdem ich den Zustand hier angepasst habe, muss ich es sagen und wissen, dass wir bei einem anfangen und ich wollte rennen bis ich kleiner oder gleich zehn bin. Es wird also wieder laufen, bis diese Bedingung verletzt wird, während er von der Anzahl zählt, in der wir sitzen. Welche Zahl auch immer im Zustand ist. Wenn ich das mache, bekommen wir 12345678910. Alles klar, das ist eine kontergesteuerte Schleife. Diese sind praktisch , wenn Sie Listen haben , die Sie durchgehen wollten. Wie gesagt, alles, was Sie für eine bestimmte Anzahl von Malen wiederholen möchten . Deshalb nennen wir es eine kontergesteuerte Schleife. Und diese Schleife sieht neben der verbalen Definition hier in den meisten Sprachen genauso aus. Wenn Sie das verstehen, haben Sie diese Art von Schleife für mindestens sechs andere Sprachen gemeistert . Okay, schauen wir uns jetzt den nächsten an. Dies wäre eine While-Schleife oder eine bedingungsgesteuerte Schleife. Und du hast tatsächlich zwei von ihnen. Du hast die Zeit und die andere Zeit. die While-Schleife kennen, beginnen wir mit dem Schlüsselwort while, und dann ist es zustandskontrolliert. Alles was es hat ist also eine Bedingung. Es würde sagen, obwohl eine Bedingung nicht erfüllt ist, sagen wir, dass wir das immer noch bis zehn zählen wollten . Also würde ich sagen, solange ich weniger als zehn bin. Und dann eine Art Syntax, wir haben unsere geschweiften Klammern. Und dann wollten wir innerhalb unserer geschweiften Klammern einrücken, was wir wiederholen wollten. Also habe ich gesagt, während ich weniger als zehn bin console.log. Okay, also erwarten wir, dass es zehnmal nicht-nummerierte Dinge drucken wird. Ich vermisse Altera und das werden wir untersuchen. Zuerst. Wenn du versuchst, das auszuführen, wird es ihr sagen, dass ich nicht definiert bin. Dies ist also nicht definiert, bedeutet, dass Sie versuchen , eine Variable aufzurufen, die noch nicht existiert, Sie haben sie nicht deklariert. Wir haben uns früher die Deklaration von Variablen angesehen. Wir müssen sagen, lass den Variablennamen und benutze ihn dann. Wir haben uns auch angeschaut , dass Variablen, die wir erklärt haben, er nicht klar hatte, dass die Konsole noch existiert. Also können wir sie benutzen, weil ich sicher bin, dass der Name noch da ist. Alles klar. Ich kann immer noch auf den Namen aus all diesen Lektionen zugreifen , weil ich in den gleichen Konsolenvorfällen bin , sie fragen sich wahrscheinlich, okay. Warum also den Zugang kontaktieren? Obwohl wir mich hier erklärt haben. Das nennen wir also Geltungsbereich. Im Rahmen dieser for-Schleife existiere ich. Sobald die for-Schleife fertig ist, existiere ich nicht mehr. Also wurde ich nicht für die gesamte Konsole und den gesamten Browser und die gesamte Anwendung deklariert die gesamte Konsole und den gesamten Browser und . Es wurde wirklich gerade zu dieser for-Schleife erklärt. Genau wie jede andere Variable, die wir gemacht haben, muss ich die Variable definieren. Lass ich ihm einen Standardwert geben. Ich werde sagen, lass ich gleich 0 ist. Dann kann ich die While-Schleife anrufen, um mit KI zu interagieren. Aber sieh dir diese Null an, während er läuft, läuft, läuft und sie sehen diese Zahl. Diese Bedingung wird die Schleife nicht stoppen. Hier können bedingungsgesteuerte Schleifen sehr gefährlich sein. Das nennen wir eine gleichmäßige endliche Schleife. Eine Endlosschleife ist eine Schleife, die auf die Bedingung läuft, erfüllt ist, aber die ausgeführte Operation ist nicht darauf ausgerichtet, die Bedingung zu stoppen. Also sehe ich Doppeltonne, bis ich weniger als zehn bin, was wir bereits etabliert haben. Hier ist das Gleiche, oder? Aber ich ändere nicht den Wert von mir, ich, mein, alles was ich tue, ist zu sagen, solange ich weniger als zehn bin, was es für immer sein wird, weil ich nur Konsolenprotokoll mache. Ich sehe ich nicht plus, und ich sehe nichts tatsächlich Websites abstürzen, Anwendungen abstürzen und Computer im Allgemeinen abstürzen kann . Sie möchten also sehr vorsichtig sein, insbesondere bei der Interaktion größerer Anwendungen, einer Massenzustandskontrollschleifen. In Ordnung? Möglicherweise müssen Sie in Ihrem Task-Manager landen, wenn Sie diesem Befehl folgen, müssen Sie möglicherweise in Ihrem Task-Manager landen und den gesamten Burroughs in dieser Sitzung beenden gesamten Burroughs in dieser Sitzung da sie nicht wirklich aufhören wird läuft. Wenn ich Ihrem Computer also Schaden zufüge, entschuldige ich mich, aber Sie können Ihren Browser einfach löschen und neu starten, zurück zur Konsole springen und uns das noch einmal versuchen lassen. Also denke ich, dass wir unsere Lektion gelernt haben. Dies ist ein brandneues Browserfenster, daher habe ich absolut keinen Verlauf aus einer vorherigen Lektion. Fangen wir also von vorne an. Also lass ich gleich 0 sein. Natürlich beginnt es immer damit, unsere Variablen zu definieren. Die Variablen müssen also existieren, bevor wir sie verwenden. Dann fange ich wieder an, solange ich weniger als zehn bin. Und dann spanne die nächste Leitung, öffne und schließe meine geschweiften Klammern, Tragetasche und dann einrücken. natürlich sicher, dass Sie, wenn Sie zur nächsten Zeile gehen, Umschalttaste und Eingabetaste. Wenn Sie diese Schleife am Ende erneut ausführen, ging Linear los, um die Sitzung zu beenden und in die Konsole zurückzukehren. Sei also sehr vorsichtig. Aber was ich hier machen wollte, ist tatsächlich der Wert von i bei jeder Iteration geändert der Wert von i bei jeder Iteration , damit wir sicher sein können, dass der Wert oder die Bedingung irgendwann erfüllt wird. Also kann ich hier einen Akkumulator benutzen, wo wir uns das angeschaut haben, wo wir einfach sagen, dass ich gleich, tut mir leid, eins, wir steigen um eins. In Ordnung? Ich plus gleich. Denken Sie daran, dass dies dasselbe sein wird wie das, was ich hier mache, ist das Schreiben eines Kommentars. Alles klar, also bin ich gleich und eins ist das Gleiche wie das Schreiben. Jetzt ist die Sache mit einem Kommentar, dass Sie einen Kommentar und eine beliebige Stelle in Ihrem Code eingeben können , wo Sie sich möglicherweise daran erinnern müssen , was passiert. Es gibt Weiße, aber es ist kein aktueller Code. Alles, was hinter diesen doppelten Schrägstrichen steckt, wird ignoriert, wenn der gesamte Codeblock Ron ist. Dies kann jedoch zu einer besseren Lesbarkeit führen , egal ob Sie oder wer sonst Ihren Code ansieht. Sie können sich also angewöhnen, das zu tun, aber das haben wir uns später angeschaut. Also console.log ich. Nachdem Sie also I eingeloggt haben, erhöhen Sie den Wert von I um eins und prüfen Sie dann , ob ich nicht weniger als zehn bin. Wenn es immer noch weniger als zehn ist, wenn es immer noch weniger als zehn ist, dann fahren Sie erneut fort und führen Sie diese Überprüfung fort. Deshalb ist es eine Zustandskontrolle oder es weiß nicht, wie oft es laufen soll. Wenn es negativ zehn war, stiegen negative Zehn um eins. Negative neun sagt, es heißt nicht dass ich nur zehn Mal laufen werde , es überprüft nur diesen Zustand. Es könnte also eine Situation sein , in der die Werte unvorhersehbar sind. Ich weiß nicht, welche Werte ich erwarte, oder? Ich weiß nicht, wie viele Werte es gibt, also wollte ich nur laufen, bis ich weiß, dass ich mit der Bedingung zum Beenden zufrieden bin. Deshalb nennen wir es eine bedingungsgesteuerte Schleife. Dann weiter dazu ist das eine vor der Kontrolle zustandskontrollierte Schleife. Es prüft zuerst den Zustand. Lass uns nachsehen, okay. Wisse, dass ich den Wert jedes Mal gleich von 0 modifiziere , weil wir bei 0 angefangen haben, Jake ist es, es ist 0, dann ist es Konsolenprotokoll, dann erhöht es sich, dann überprüft es erneut. Ist einer immer noch weniger als zehn? Ja, das ist es. Okay. Liebe usw. und dann geht er weiter und es geht weiter bis zum Ende, wo das zehn werden wird. Und dann würde es überprüfen und sehen, dass, okay, das ist nicht mehr zehn ist nicht mehr weniger als zehn, also tu es nicht mehr. Deshalb ging es diesmal von 0 auf zehn, Gegensatz zu der for-Schleife, die tatsächlich genau zehnmal ging. Schauen wir uns ein anderes Szenario an. Was ist, wenn ich im Wert von zehn angefangen habe? Also habe ich mich gleich zehn lassen. Und dann bin ich zur selben Schleife gegangen. Wenn ich das mache, drücke die Eingabetaste. Beachten Sie, dass nichts passiert ist , weil ich schon genommen wurde. Ein Auge ist nicht weniger als zehn. Also habe ich nichts damit zu tun , dass dieser Zustand bereits verletzt wurde. Überspringen Sie das und fahren Sie der nächsten Codezeile oder in Kleinbuchstaben fort. Deshalb nennen wir es eine Vorbedingung Checked Loop. Alles klar? Nein, es ist nah dran. Relativ ist die Do-While-Schleife, die nur eine invertierte Version davon ist. Diese wird als Post-Check-Schleife bezeichnet, weil sie tatsächlich die Aktion ausführt und dann die Bedingung überprüft. Also bin ich gegangen, um den Wert von zehn zu haben. Beachten Sie, als ich um zehn Uhr anfing, überprüfte er den Zustand und es hat nichts getan , weil dieser Zustand verletzt wurde. Also lasst uns weitermachen. Wenn ich jedoch sage, ist die Syntax dafür sehr ähnlich. Ich sage immer, dass es fällig ist. Und dann sagen wir was machen wir? Öffne also unsere geschweiften Klammern. Und dann nach dieser schließenden geschweiften Klammer sagen wir während mit der Bedingung. Also mach diese oder diese Aktionen, solange ich weniger als zehn Jahre alt bin. Nun, rate mal, was es tun wird, bevor es überhaupt überprüft wird, ob es sich um dieses Dentin Wenn ich also das gleiche Konsolenprotokoll nehme, bin ich froh, dass es genau dort in der Zeit ist, sollten wir sehen, drucke den Wert von I mindestens einmal aus. Und dann nicht mehr, weil ich zu diesem Zeitpunkt nicht weniger als zehn bin, weil ich zehn bin. Also lasst uns das versuchen. Dies endet mit einem Semikolon hier. Alles klar, probieren wir es aus. Eins. Da sind wir los. Wir haben wenigstens den Wert zehn bekommen bevor er ausstieg, und gaben uns das undefinierte. Undefiniert bedeutet nur, dass ich fertig bin. Alles klar, lauf mindestens einmal, also lass mich einen machen. Alles klar? Und dann lasst uns die Zeit versuchen. Dieses Mal wird es tun und es tun und es auf diesem ECM machen. Ich hatte mich gerade in eine andere Endlosschleife eingepackt. Also geh nicht so weit. Stellen Sie sicher, dass Sie das I plus gleich eins anlegen, bevor Sie diesen Code ausführen. Also starte ich meine Konsole neu. Okay, also habe ich mein Browserfenster neu gestartet und den Code umgeschrieben. Beachten Sie, dass ich es in einer Zeile gemacht habe. Das ist vollkommen legal, aber ich bin mir sicher, dass Sie es sich ansehen und denken, dass das etwas verwirrender ist , dass der Junge anfangs aussah. Also ja, es ist legal, aber es ist nicht sehr lesbar. Deshalb schlage ich immer wieder vor, dass wir sie ausräumen und einrücken. Alles klar. Also werde ich es einfach auf die gleiche Weise zurücklegen , wie du es gewohnt bist. Und was ich diesmal getan habe, ist sicherzustellen, dass ich das I plus gleich anziehe. Also zeige ich Ihnen nur, dass Sie nicht die richtige Bedingung haben, wenn Sie den Code hier nicht angemessen schreiben und dies nicht tun. Sie können in eine Endlosschleife einwickeln, was letztendlich zu einem Speicher führt , der insgesamt einen Fehler auf jedem Computer darstellt. Du wolltest sehr vorsichtig sein. Also lass mich das nochmal versuchen. Ich war beim ersten Mal nicht sehr vorsichtig, deshalb gebe ich Ihnen den Rat. Alles klar, also lasst ich bei einem anfangen, direkt zur Konsole, der Wert von i und dann erhöht und prüft dann nach dem Inkrementieren, was ist der Wert? Es sind zwei, die weniger als zehn einflößen. Also lasst es uns nochmal machen, Konsolenprotokoll. Und dann geht es und geht und geht bis ich zehn erhöht habe, dann überprüft es, ob zehn weniger als zehn sind. Also heißt es, okay, ich bin fertig. Lass mich gleich dort schneiden. Das sind natürlich Wiederholungsaussagen, mit Übung und mehr Belichtung. Sie werden sehen, wann Sie sie verwenden müssen und halten, dass sie nützlich sind. Aber ich ermutige Sie, über Szenarien nachzudenken , die Sie wiederholen möchten. Denkbare mathematische Probleme, die manuell sind und Sie könnten einige Schritte mit unserer Schleife wiederholen einige Schritte mit unserer Schleife und das Gefühl von ihnen bekommen. 13. Javascript-Funktionen: Alles klar Leute, also kommen wir gut voran. Wir lernen die Kontrollstrukturen der allgemeinen Programmierung. Aber im Kontext von JavaScript. Wie gesagt, das meiste davon ist tatsächlich übertragbares Wissen. Wenn Sie also anfangen, andere Sprachen zu lernen, Sie feststellen, dass ein Großteil der Syntax gleich oder sehr ähnlich ist und Sie in der Lage sind, werden Sie feststellen, dass ein Großteil der Syntax gleich oder sehr ähnlich ist und Sie in der Lage sind, die Tatsache zu übertragen, dass okay, ich muss eine Entscheidung treffen oder eine Schleife machen, usw. an bestimmten Stellen. Nein, wir werden den Gang wechseln und zu einem anderen Thema übergehen , das etwas komplexer, aber sehr lustig ist und sehr leicht zu verstehen ist, sobald Sie den Dreh raus haben. Und das sind Methoden. Eine Methode in jeder Programmiersprache ist eine Möglichkeit , Code einmal zu schreiben, ihn aber oft wiederzuverwenden. Zum Beispiel Konsolenpunktprotokoll. Das ist eine Methode. Warum sage ich, dass es eine Methode ist? Weil es eine Codezeile , die es mir ermöglicht, fast alles beliebig oft zu übergeben . Und ich muss nie etwas mehr als diese beiden Wörter schreiben . Also log ist wirklich die Methode und Konsole sagt wirklich nur Konsole, das ist dieser schwarze Bildschirm , den wir bei der Aufzeichnung schreiben , loggen Sie jede Nachricht. Alles klar. Dies ist eine Methode, die einen Wert annimmt und dann eine Aktion ausführt. Ich weiß nicht wie es geht. Dahinter stecken diese beiden Codezeilen diese beiden Wörter im Code, die so magisch aussehen und sogar kompliziert aussehen könnten. Es gibt viel mehr Komplikationen weil es hier den Wert nimmt, sagt diesem gesamten Browser etwas, dass er Ihnen, dem Endbenutzer, diese Nachricht auf eine bestimmte Weise präsentieren soll . Alles klar, deshalb sage ich , dass wir nicht wissen, wie es geht. Wir wissen einfach, dass wir console.log sagen und es tut es. Dies macht also tatsächlich Codeblock , der 102050 sein könnte, mehr Codezeilen, sehr brauchbar. Es wird eine Zeit in Ihrer Anwendungsentwicklung kommen , Sie Methoden erstellen müssen. Sie haben jedoch nicht viele integrierte Methoden, da Sie Methoden haben, mit denen Sie Strings manipulieren können. Sie haben Methoden, mit denen Sie die Zahlen manipulieren können, die Sie über die integrierte Mathematik verfügen usw. Es gibt eine Reihe von ihnen. Wir können sie alle erforschen und wirklich und wirklich, einige von ihnen, die Sie vielleicht nie benutzen, und einige von ihnen verwenden Sie nur, wenn es absolut notwendig ist. Aber was wir tun werden, ist zu untersuchen, wie wir unsere eigenen Methoden in JavaScript für unsere eigenen Zwecke erstellen können . Beginnen wir damit, unsere eigene Methode zu schreiben. Und manchmal werden Methoden Funktionen genannt. Umgekehrt, jedes Mal, wenn Sie jemanden Funktion oder Methode sagen hören , im Allgemeinen dasselbe. Das Schlüsselwort ist also tatsächlich Funktion. Sie beginnen also damit, Funktion zu sehen, wie Sie in den meisten Zeiten danach sehen, wenn wir etwas tun werden, haben wir eine Erklärung oder eine deklarative Erklärung, oder? Sagen wir also, dass ich gerade eine Variable deklariere. Wenn deklariert, möchte ich eine if-Anweisung usw. Also möchte ich eine Funktion sagen, sage ich function. Und dann habe ich ihm einen Namen gegeben. Was wäre, wenn wir eine Funktion wollen , die zwei Zahlen hinzufügt? Fangen wir einfach an. Wir wollen eine Funktion, die immer Hello World drucken wird. Anstatt also console.log hallo world zu schreiben, möchten Sie jedes Mal, wenn Sie möchten, diese eine Methode aufrufen und sie druckt nur Hallo Welt. Ich kann sagen print hallo world. Also habe ich dieser Funktion einen Namen gegeben. Funktionen sind durch ihre Klammern gekennzeichnet, unabhängig davon, ob hier ein Wert eingeht oder nicht, sie sind nicht optional. Nach den Klammern haben wir geschweifte Klammern mit dem Körper der Funktion geöffnet und geschlossen . Also hier drin schreiben wir , was diese Funktion tun soll. Wie ich schon sagte, wir halten es einfach. Ich will eine console.log, Hello World. In Ordnung, ich möchte nicht einfach Hallo Welt von Funktion sagen . Stellen Sie sich vor, jedes Mal, wenn Sie das tun wollten , müssten Sie diese Codezeile schreiben und Sie wollten es an mehreren Stellen in Ihrem Code tun , Sie haben eine große Website. Sie haben eine Reihe von Stellen, an denen Sie eine artikuläre Nachricht ausdrucken möchten . Du willst das nicht jedes Mal schreiben müssen. Und wenn sich etwas ändert und sie Hallo Universum sagen wollten, dann musst du dich ändern, wenn du 50 Mal drehst. Wenn 50 mal. Wenn Sie alles in eine Funktion einfügen, gehen Sie einfach zur Funktion und ändern sie. Alles klar, also lass mich, lass mich zurück zur Hallo Welt gehen und es dir zeigen. Wenn ich die Eingabetaste drücke, registriere ich, dass diese Funktion existiert. Nein. Wenn ich diese Nachricht drucken wollte, habe ich zwei Möglichkeiten. Ich kann es manuell drucken , weil ich keine Funktion kannte und existierte. Und so oft ich wollte es machen und machen und es tun müssen. Ich kann einfach printf hallo world anrufen, Klammern öffnen und schließen. Und sieh dir das an. Das ist alles was ich brauche. So nennen Sie einen Funktionsaufruf. Das ist also die Funktionsdeklaration, Entschuldigung, Definition ist die Definition, die Erklärung, was die Funktion ist, wie ihr Name ist, was sie tun soll. Und dann ist dies der Funktionsaufruf, was bedeutet, dass der Code in einer Funktion an diesem Punkt passiert. So oft ich diesen Funktionsaufruf mache, wird er immer dasselbe tun. Also kontrolliere und kontrolliere ich nur V und den Abstand zwischen allen Türen. Jedes Mal, wenn du das anrufst, wird es dasselbe tun. Das habe ich also so viele Orte gesehen wie Sie es auf Ihrer Website benötigen, Sie haben gleichzeitig in JavaScript geschrieben und er kann diese Methode einfach auf jeder einzelnen Seite verwenden, wo Sie es sonst möchten wissen wir, sagen wir der CEO oder auf wen auch immer es sich verärgern würde. Ich sagte, Okay, wir wollen nicht länger. Wollte Hallo Welt sagen, wollte Hallo Universum sagen. Alles was Sie tun müssen, ist dieses klare Ziel zur Funktionsdefinition. Und es ist nicht mehr print hallo world, es ist kein gedrucktes Hello Universum. Aber ich würde meine Funktion irgendwie nach dem benennen wollen , was sie tut. Also sehe ich Print Hello World, aber ich ändere das, um zu sagen, hallo universal wollte es irgendwie umbenennen , damit sie, wenn ich diese Website an meinen Kollegen weitergeben muss, sie nicht sein werden verwirrt. Warum print hallo world sagt Hallo Universum, oder? Sie möchten also immer bedenken , dass die Benennung Ihrer Funktionen und Variablen und alles immer widerspiegeln sollte , wofür es ist. Wenn Sie also in den Urlaub nach Bali fahren und zu einem Schlitz zurückkehren und darauf zurückblicken. Du bist nicht verwirrt , wenn du dich fragst: Warte, warum habe ich das gemacht? Was ist noch mal so weit, die Namen werden dir sagen, oder? Nehmen wir an, ich habe diese Methode aktualisiert, den Namen geändert und geändert, was sie tun sollte. Nein, überall in meinem Code , der Großbritannien bis o hatte, Hello World drucken müsste ich aktualisieren, um Print-Universum zu sagen weil ich weiß, wenn dieses Stück Code Hallo Welt ausgibt, es geht immer noch zu sein. Es tut mir leid. Das ist ein bisschen Fehlinformationen. Lass mich zurückgehen. Ich habe Print Hello World nicht wirklich entfernt , ist den Namen zu ändern. Und dann ist das eigentlich eine brandneue Funktion. Es gibt also eine gedruckte Hello World, die immer noch existiert. Aber wenn ich weiß, ob ich Hello Universe drucken wollte , müsste ich print hallo universe sagen. Und dann siehst du Hello Universum von der Funktion. So bekannt macht mich das von zwei Funktionen, die zwei verschiedene Dinge tun. Man druckt Hallo Welt, Großbritannien, Solo, Universal. Wo auch immer ich auch machen wollte. Ich kann diesen Funktionsaufruf machen. Weil wir in unserer Konsole sind und keine Textdatei wirklich bearbeiten. Deshalb hat das Ändern der Funktionsdefinition wie ich das andere Funktionale nicht entfernt und es wurde nur eine neue hinzugefügt. Wenn es eine Textdatei wäre, wäre es natürlich so, als würde man Satz ändern und das nimmt eine Datei an. Sobald Sie diesen Satz geändert haben, wird diese Intensität für den Rest der Dokumente geändert , da wir nicht mit einem Dokument arbeiten, aber später werden Sie sehen, wie das funktioniert. Aber mein Punkt ist , dass wir wissen, dass wir zwei Funktionen haben und wir können einfach eine nach Belieben aufrufen. Wir müssen diesen Befehl nicht manuell schreiben und uns fragen, ob es unsere Welt universell ist, denn wir wissen, wann wir diesen nennen Prints Hello Universum, was zu erwarten ist und dasselbe vom Druck Hallo Die Welt. In Ordnung. Schauen wir uns nun ein anderes Szenario an, in dem Sie vielleicht einen Wert übergeben möchten . Also wie bei console.log geben wir tatsächlich einen Wert ein. Ich nenne das einen Parameter. Der Parameter ist wie ein variabler Entwurf für die Funktion. Und wenn wir dann übergeben, wird ein Wert in dieser Variablen gespeichert und dann können wir mit diesem Wert verarbeiten , was wir wollen. Lassen Sie uns sagen, wir wollten mir eine beliebige Zahl geben und ich werde immer fünf hinzufügen, so etwas, oder geben Sie eine prozentuale Darstellung davon. In Ordnung? Wenn ich eine Funktion sage und sagen wir Prozent berechnen, gib mir eine Dezimalzahl. Ja, berechnen Sie die Dezimalzahl. Lass uns das machen. Berechne Dezimalzahl. In Ordnung. Ich teile immer jede Zahl, die du mir gibst, durch 0. Ich kann einfach Num eins sagen. Num, die ich sehe, erstellt einen Funktionsaufruf, der dezimal berechnet wird, und erwarte, dass eine Zahl oder Wert namens num übergeben wird. Dann genauso. Der einzige Unterschied zwischen dieser Funktion und denen , die wir für den Druck gemacht haben. Der einzige Unterschied besteht darin, dass dieser Wert als Parameter verwendet. Aber was ich hier tun kann, ist Rückkehr, oder? Dies ist es, was wir also eine Value Returning-Funktion nennen , bei der sie etwas tun wird , und dies ist normalerweise nützlich, Mathematik ist einige Manipulationen. Sie senden also den ursprünglichen Wert über und erwarten, dass Sie einen manipulierten Versionsversatzwert erhalten . Was Ihre Funktion tun würde, ist den manipulierten Wert zurückzugeben. Also würde ich einfach sagen, num mal zurück. 0.01, was ist, wenn meine Mathematik korrekt ist, nur die Darstellung von 100 in Dezimalstellen, oder? Eine andere Möglichkeit, dies zu tun, besteht darin direkt durch eine 100 zu dividieren. Das Gleiche. Alles klar. Lass es uns dabei belassen. So normal geteilt durch eine 100. Und das sollte uns die Dezimaldarstellung geben. Also habe ich gerade diese neue Funktion deklariert. Und wenn ich es dann nenne dezimal berechnen und Zinn übergeben. Wenn ich das übergebe, bedeutet, dass jeder Wert, den ich hier lege, in num gespeichert wird. Also sollte es alles zurückgeben, was ich manipuliere oder welche Manipulation auch immer auf Taub angewendet wird. Wenn ich das anrufe, bekomme ich 0.1. Setz dich hin. Wenn ich es mit 101 nochmal nenne, wird es immer fehlerfrei. Mach diese Mathematik für mich. Deshalb habe ich gesagt, dass Sie den Code einmal schreiben und dann das Telefon SHA-1 so oft mit so vielen anderen Werten verwenden können, wie Sie benötigen. Sehr, sehr praktisch. Egal welchen Wert ich übergebe, ich werde immer die Dezimaldarstellung bekommen . Versuchen wir es noch einmal. Was ist, wenn ich Funktion sage? Produkt berechnen? Dieser soll zwei Zahlen annehmen. Sagen wir also num1 und num2. Und dann möchte ich das Produkt dieser beiden Zahlen berechnen . Produkte würden also den Wert zurückgeben, nachdem ich num1 und num2 multipliziert habe. Das ist alles, was wir Produkte berechnen. In Ordnung, geben Sie ein. Jetzt haben wir diese Funktion auch, so viele Funktionen, die ich erstelle. Sie sind also nicht eingeschränkt, es ist nicht so eine Funktion existieren kann. Sie können so viele Funktionen haben, denn sobald es etwas ist, das Sie möglicherweise wiederholen, möchten Sie sicherstellen, dass Sie mehrere Funktionen auf der ganzen Linie haben , die die Situation genau hier bewältigen können. Wenn ich berechne, diesmal nicht dezimal, sondern Produkt, und ich gebe es 532, dann wird es fünfmal 30 zurückgegeben, um mir das Volumen zu geben. In Ordnung, wenn ich dann dezimal für 32 berechnen sage, gibst du mir 0,32 zurück. Jetzt sieh dir das an. Was wäre, wenn ich sagen würde, ich wollte, ich wollte die Dezimaldarstellung von fünfmal 30 Werkzeugen. Alles klar, sieh dir diesen Knoten an. Ich kann das gut berechnen aufrufen, denn das gewünschte Endergebnis ist die berechnete Dezimalzahl. Darin kann ich das Produkt berechnen, weil es einen Wert zurückgibt. Also kann ich es so behandeln, als wäre es eine Zahl oder eine Variable. So kann ich das berechnete Produkt sehen, dann gib ihm die fünf die 32. Und rate mal was? Fünf auf 32 wären die Parameter, die in der Funktion für unsere berechneten Produkte skizziert der Funktion für unsere berechneten Produkte skizziert , weil wir das in der Definition getan haben. Ich brauche zwei Werte, um „Produkt berechnen“ aufzurufen. Ich muss ihm zwei Werte geben. Wenn dies zurückgegeben wird. Dieser zurückgegebene Wert wird nicht als Volumen für unsere berechnete Dezimalzahl dienen, die wir definiert haben, um mir einen Wert zu geben, und ich wurde in dieser Variablen namens Adenom gespeichert und dann gebe Sie unterstützen die Ergebnisse. Das ist also nur ein großer Funktionsaufruf, den ich sehe, gib mir den Wert daraus. Ich muss es bekommen, weitermachen und es als Wert dafür verwenden. Und das wird nur Daisy Chain. Es wird also diesen Funktionsaufruf erfüllen , der einen Wert zurückgibt und dann diesen Funktionsaufruf durchführt und die Endergebnisse zurückgibt. Okay, ich kann eine Reihe von Dingen machen. Wenn du einen Wert zurückgibst. Wenn Sie es in einer Variablen speichern möchten , könnten Sie sagen: Lassen Sie die Variable b gleich, und dann sagen Sie Produkt berechnen. Lassen Sie die Variable b also gleich dem zurückgegebenen Wert entsprechen. Sie können dies nur mit Funktionen tun, die unser Konsolenprotokoll für Intel World und was auch immer zurückgeben. Das wird es nicht zurückgeben. Es kommt nicht zurück, es wird nur gedruckt. Es trägt eine Richtlinie und ein Ende. Diese führt jedoch die Richtlinie aus und versucht , den Wert danach zurückzuschicken. Ordnung, wenn es den Wert zurücksendet, können Sie ihn immer in einer Variablen abfangen oder wie wir gesehen haben, wir können ihn auf verschiedene Arten wiederverwenden. Aber es ist nur eine schnellere Möglichkeit, zwei Zahlen zu multiplizieren, als dies überall zu schreiben , weil sich die Formel ändert. Wenn es sich um einen berechneten Preis handelt und jeder Preis um 10% erhöht werden sollte, müssen Sie dies für jedes einzelne Produkt auf der Website tun , das mühsam wäre. Wenn Sie eine Funktion geschrieben haben, rufen Sie die Funktion einfach jedes Mal auf. Wenn sich die Formel nächste Woche ändert, haben Sie nur einen Ort, an dem Sie die Änderung erfüllen können. Du musst nicht an jeden einzelnen Ort gehen, an dem ich die Änderung vorgenommen habe. Sie haben die eine Änderung in der Funktion vorgenommen, dann ist es das. Alles klar. Ich kann immer einfach sagen, gib mir das Produkt von 49. Ich weiß nicht, ob ich es früher darauf hingewiesen habe, aber wenn du mehrere Werte hast, trennst du sie immer durch Kommas. Habe Wert eins, Wert zwei, Komma, Wert drei, Koma bis zur Anzahl der Werte , die du für diese bestimmte Funktion benötigst . für dieses Konto Berechnen Sie für dieses Konto das Produkt mit nur einer Zahl. Ich brauche ein minimales Werkzeug. Wenn ich drei wollte, muss ich nur die Definition ändern und Komma drei, Komma vier usw. sagen . Es berechnet das Produkt lagert es im variablen Produkt. Und wenn ich dann nur ein Konsolenprotokoll oder dasselbe Produkt mache, zeigt es mir, dass dies der Wert anstelle von Produkten ist . In Ordnung? Das sind alle Funktionen arbeiten und das sind alle Funktionen Ihnen das Leben viel einfacher machen können. In Ordnung. 14. JavaScript und Umfang: Alles klar Leute, also haben wir uns Variablen angeschaut, wir haben uns bedingte Aussagen angeschaut, Wiederholungen angeschaut und wir haben uns die Funktionen angeschaut. Während wir nicht diskutiert haben, ist ein Konzept namens Scopes. Bevor ich also weiter gehe, möchte ich, dass wir uns ansehen, was wir meinen, wenn wir Scopes sagen. Wenn ich im allgemeinen Konsolenfenster bin und sage lass einen Variablennamen gleich sein, und dann gebe ich ihm einen Wert. Um es einfach zu nennen. Diese Variable existiert im Rahmen des gesamten Browsers im Rahmen des gesamten I'm Konsolenfensters. Also kann ich den Namen überall benutzen, wo ich will. Wenn ich eine Funktion schreiben wollte, die Name, den Drucknamen , den Wert ausgibt, okay. Ich muss dafür nicht einmal einen Parameter verwenden, da ich auf den Namen zugreifen kann, sobald der Name in der Konsole vorhanden ist Ich kann einfach Konsolenpunktprotokoll und Drucknamen sagen. Das nennen wir also einen Bereich, damit der Umfang nicht von den Namen Globals vermischt wird. Wenn ich den Wert für den Drucknamen sage, ist es immer gut, Namen zu testen. Das ist also global. Jede Funktion, alles kann auf Bedürfnisse zugreifen. Das ist eine globale Variable. In Ordnung? Wissen Sie, wenn ich eine Funktion definiere und print sage, das ist ein String-Wert, nehme ich hier einen Wert, also nennen wir es einfach, nennen wir es Testzeichenfolge. Das nenne ich diese Variable. Es soll drucken, was sich in Testzeichenfolgen befindet. Also sage ich Konsolenprotokoll-Teststream. Wann immer wir diese Funktion aufrufen, wollte ich nur den Wert drucken, der sich im Teststream befand . Das ist meine Definition. Also persönlich um zu wissen, dass wir die Funktion haben, die existiert. Wenn ich also print string value sage und dann gebe ich ihm einen Wert wie das Testen der Druckfunktion. Was auch immer es ist, bis ich es bin, lass mich meine Trennung kriegen. Testen der Druckfunktion. Geben Sie ihm den Wertefunktionsaufruf an, es wird genau vorhersagen, was ich gesendet habe. Das ist also etwas, das ich für die Konsolen-Log-Dosis gekauft habe , oder? Wenn er über eine Konsole gesendet wird , protokollieren Sie es, drucken Sie es auf die Konsole aus. Das habe ich also getan. Ich habe meine eigene Funktion erstellt, mit der ich eine beliebige Zeichenfolge übergeben kann und sie auf die Konsole drucken wird. kannst du nachdenken. Aber was ich nicht tun kann, ist von überall auf die Testzeichenfolge zuzugreifen. Anders als die Funktion. Wenn ich versucht habe, etwas mit der Testzeichenfolge selbst zu machen, wenn ich versucht habe, die Protokolltestzeichenfolge außerhalb der Grenzen dieser Funktion zu konsolen , erhalte ich diesen Fehler. Das nennen wir noch einmal Scope. Dieser ist also nicht global. Testzeichenfolge befindet sich im Rahmen dieser Funktion. Also jede Variable, die entweder in den Parametern hier deklariert ist, wird innerhalb der geschweiften Klammern von jeder Steuerstruktur deklariert, sei es if Anweisung, Switch, Anweisung, Wiederholung, irgendetwas Sobald es innerhalb der Grenzen dieser gesamten Definition der Aussagen liegt, befindet es sich im Geltungsbereich dieser Aussage. Denken Sie daran, als wir unsere Wiederholungserklärungen machten und ich das getan hatte, denn ich war gleich bla und was auch immer. Aber als er es dann mit einer Weile ausprobiert wurde, musste ich das Auge speziell definieren , weil ich in der for-Schleife einzigartig war. Das war also tatsächlich das Scoping von Artworks. Ich habe es damals einfach nicht erwähnt. Alles klar. Nein, du wirst verstehen, warum ich zurückgehen musste und sagen musste , lass ich gleich 0 und dann die While-Schleife schreiben musste, weil ich eine globale Variable namens I erstellen musste , als ich sah, dass die While-Schleife konnte sehen, dass ich existiere. Wieder einmal können Sie Variablen außerhalb von allem anderen definieren , global für den Browser und global jedes andere Codebit , das jemals geschrieben wird. Ebenso können Sie eine Variable definieren und im Rahmen einer bestimmten Steuerstruktur verwenden . Ich kann hier leicht eine andere Variable definieren und sagen , lass mich das tun. Lassen Sie mich diese Testzeichenfolge über sich selbst ändern , damit wir wissen , dass dies im Rahmen der Funktion liegt. Aber ich könnte leicht schnappen, tut mir leid, meine eigenen Regeln zu brechen. Da sind wir los. Ich könnte also leicht sagen, dass Suffix gleich im Funktionsbereich ist. Und dann werden wir anfangen , wissen zu mischen und zu kombinieren, weil wir Profis werden. Also werde ich sagen, Konsolenprotokoll welche Zeichenfolge übergeben wurde. In Ordnung, plus das Suffix. Deshalb lege ich diese beiden Räume dort hin. Das ist also, dass wir ein Leerzeichen zwischen dem Wert haben , den ich manuell übergebe. Und dann wird dies im Rahmen dieser Funktion existieren . Es bedeutet nicht, eine Funktionsdefinition zu ändern. Ich drücke Enter und dann alles, was ich in den Print-String-Wert übergebe , oder? Wenn ich sage, teste ich nur TO im Funktionsumfang, oder? Wenn ich dies aufrufe, wenn ich ihm meinen Namen, meine Zeichenfolge, den Funktionsbereich gebe, wenn ich versuche, den Wert von Suffix, Suffix zu ändern , sind Sie dem globalen Bereich nicht gleich. Sehen Sie, dass Suffix dem globalen Geltungsbereich entspricht, aber diesen Blick nicht werfen wollte. Obwohl es eine Variable namens Suffix erstellt hat und wieder dieses Demo-Skript , kommt es mit viel Asche davon, die ein Suffix hätte angezündet werden sollen, aber lasst uns damit arbeiten. Obwohl ich hier das Suffix oben mit dem globalen Bereich der Zeichenfolge definiert habe, kommt der Wert, von dem wir wissen, dass der Wert, von dem wir wissen, dass er stammt, wenn ich meine Funktion aufrufe . Suffix befindet sich immer noch im Funktionsbereich. Denn wenn ich die Funktion hier aufrufe, gab ich ihr den Wert für die Testzeichenfolge. Diese Zeichenfolge null hat ihren Wert. Und dann definiere ich meine Funktionsversion dieser Variablen namens Suffix. Dann liebte ich den Wert übergeben wurde , plus das ist Suffix. Das ist nur ein Beispiel dafür , wie Scoping funktioniert. Wenn du geschweifte Klammern hast. Alles, was Sie innerhalb der geschweiften Klammern tun ist darauf beschränkt, diese geschweiften Klammern, wenn Anweisung, Funktion für-Schleife, was auch immer es ist. Wenn Sie neue Variablen benötigen, um diese bestimmte Operation innerhalb einer Reihe geschweifter Klammern auszuführen diese bestimmte Operation innerhalb . Fühlen Sie sich frei, dies zu tun , denn diese Variable wird sich auf diese bestimmte Kontrollstruktur beschränken. 15. JavaScript und HTML DOM: Alles klar Leute, also haben wir uns die Sprache Javascript nur im Kontext und die Grenzen unserer Konsole in unserem Browser angeschaut die Sprache Javascript nur im Kontext und die Grenzen . Betrachten wir es im Kontext , wie es wirklich verwendet werden könnte, nämlich mit regulärem HTML-PH-Wert zu interagieren. Was ich tun werde, ist ein neues Fenster für Visual Studio-Code aufzurufen . Wenn Sie ein brandneues Fenster wünschen, können Sie tatsächlich zur Datei gehen und einfach zu Neues Fenster gehen. Ich möchte also nicht, dass wir die Website, die wir bis zu diesem Zeitpunkt aufgebaut haben, ändern wir die Website, die wir bis zu diesem Zeitpunkt aufgebaut haben , zumindest noch nicht. Denn wie gesagt, JavaScript ist etwas, das Sie verwenden , wenn Sie es brauchen. Das ist es nicht. Oh, ich werde damit auf meiner Website experimentieren. Aber es ist gut zu wissen , welche Macht es hat. Lasst uns also ein neues Fenster öffnen und dann eine neue Datei erstellen. Und lasst uns irgendwo einen neuen Ordner erstellen. Ich werde nur einen neuen Ordner namens G erstellt , der testet und das ist der, den wir verwenden werden R Ich werde verwenden, du kannst deinen eigenen erstellen. Und dann erstelle ich eine neue Datei, die wir natürlich immer Index genannt haben, da es die erste Datei ist. Ich werde nur die HTML5 Boilerplate drehen. Und ich erstelle ein paar Test-Tags. Also werde ich einfach sagen, JavaScript in einem p-Tag zu testen. In Ordnung, wir haben uns schon angesehen , unsere Elemente zu benennen. Wir können die ID JavaScript testen lassen. Ich nenne einfach diesen einen ID-Test für Alkohol, das JavaScript mit ID-Attribut testet. Ich gebe diese an denselben Kurs. Dies konzentriert sich also noch einmal mehr auf JavaScript, zumindest noch nicht die gesamte Website. Also gebe ich nur diese Werte an. Ich wollte dir zeigen, wie du mit deinen Elementen interagieren kannst . Wenn sie es haben, wenn Sie nur die p-Tags wünschen, im Vergleich einem bestimmten Element mit einer ID im Vergleich zu einer oder mehreren Breite, dieselbe Klasse, genauso wie wir mit ihnen interagieren können CSS, wenn wir das bestimmte Element basierend auf seinem gesamten Element-Tag oder seiner ID oder Klasse anvisieren können das bestimmte Element basierend auf seinem gesamten Element-Tag oder seiner ID oder Klasse ist dem ganzen JavaScript sehr ähnlich, ermöglicht es uns, das zu zielen, was wir benötigen , wann immer wir müssen. Alles klar. Ich halte es einfach mit all dem einfach. Ich gehe einfach live, oder? Jetzt leben wir also. Wir haben unsere kleine Seite. Und wenn wir dann mit der rechten Maustaste klicken und zu Inspect gehen und einfach nicht zum Fenster gehen, können wir unsere HTML-Sachen sehen. Wir können tatsächlich zur Konsole springen und wir können tatsächlich damit interagieren. Lassen Sie mich also einfach die Konsole löschen und ein bisschen hineinzoomen. In Ordnung, sagen wir also, wir wollten alle p-Tags auf unserem pH-Wert sehen, oder? Wir haben also eindeutig ein paar Petabyte. Das ist alles, was wir auf die Seite stellen. Peta Guan P-Tag mit einer ID und Klasse oder Klassen, oder? Wenn ich also auf irgendetwas zugreifen möchte, muss ich ein Dokument sagen das Sie dieses Typ-Dokument nicht schwingen möchten, es hat die gesamte Seite hervorgehoben. Ich weiß nicht, ob Sie bemerkt haben, dass dieses Dokument die Seite darstellt, auf der Sie sich befinden. Stimmt's? Dank des Browsers stehen uns dann eine Reihe von Funktionen zur Verfügung. Wie gesagt, JavaScript ist riesig. Ich kann nicht hier sitzen und jede einzelne Sache durchmachen und so weiter. Diese Dinge, die Sie meinen, verwenden Sie niemals oder würden sie unter sehr speziellen Umständen verwenden. In diesem Fall werde ich gehen, um zu holen, dann werden wir sehen, dass wir Element für ID erhalten, Klassennamen zurückbekommen, nach Namen abrufen, nach Tagnamen abrufen und nach Tag-Namen abrufen. Fangen wir mit dem sprechenden Namen an. Tag-Name bedeutet, dass ich angeben möchte , welches Tag ich anvisiere, also ziele ich auf P-Tags ab. Sieh dir das an. Nein, es zeigt mir, dass ich hier eine Sammlung von vier D-Tau habe, p mit dem ID-Test und P2 mit der Testklasse. Und dann sieht es, dass der Test das hat. Es ist also, als wäre das College und das nennen wir ein Array. Später, wenn wir unsere eigene Website ändern, werden wir mit einem Array arbeiten. Aber ich bringe dein Gefängnis nur in das Szenario, das durch die quadratischen Klammern gekennzeichnet ist . Wenn ich also sage, erhalte Elemente nach Tag-Namen, dann sage ich let p tags. Das ist also nur die Variable b gleich. Dann nenne ich diesen Code keine P-Tags haben alle Elemente da drin. Dann kann ich auf Test anrufen. Ich kann anrufen, lass uns Tests anrufen. Und was wäre, wenn ich den Wert darin ändern wollte , damit ich keinen inneren, inneren Text nennen kann. Wir haben diese Intelligenz. Lassen Sie es gleich b gleich dem Zurücksetzen eines Textes von der Konsole aus. Pass auf, was er passieren wird. Also eines der p-Tags, wenn ich die Eingabetaste drücke, haben wir diesen Einstellungstext von der Konsole. Also kann ich tatsächlich JavaScript verwenden, um es zu ändern. Denken Sie also daran, wenn die Seite geladen wird, ist alles nicht statisch, es ist da. Die einzige Möglichkeit, etwas zu ändern, besteht darin, in Visual Studio-Code zurückzukehren und ihn zu ändern. Aber das ist der Zeitpunkt, an dem wir entwerfen. Was wäre, wenn wir einen Teil der Macht in die Hände unserer Benutzer legen wollten ? Deshalb schreiben wir JavaScript in unseren Code, damit diese Dinge passieren können. Hier sehen wir, dass der Text von der Konsole zurückgesetzt wird. In Ordnung. Wenn wir das Spezifische ansprechen wollten , sehe ich hier zu viel. Wenn ich spezifisch sein wollte , mit welchen Ziel-Tags ich möchte, kann ich sagen, get element für ID. Wenn ich „Element nach ID holen“ sage, würde ich diesen ID-Namen angeben , der es mir ermöglicht, den ID-Wert zu wählen , oder? Oder wenn ich diejenigen mit einem Klassennamen bekommen wollte, kann ich sagen, erhalte Elemente nach Klassennamen, was uns in diesem Fall die Testklasse geben würde. Man sollte es Sean nennen. Während sie es taten, wurde die ganze Sammlung gedruckt. Also kann ich sagen, lass B gleich sein und dann diesen Befehl oder diese Anweisung wiederverwenden. Nein, wir haben Klassennamensschilder mit diesen beiden. Dann können wir von hier aus tatsächlich sehen, wie lang die Länge ist. Wir haben zwei von ihnen. Wir können eine Reihe von Dingen sehen und wir könnten dies sogar wie eine for-Schleife einsetzen , in der wir den Wert ändern werden. Es gibt also eine Reihe von Dingen, die wir tun können und wie gesagt, ich kann sie nicht erschöpfen, aber das sind einige Nuggets, die ich mit dir als Ganzes teile. Javascript ermöglicht es, mit der eigentlichen Seite zu interagieren. Später bin ich nicht auf unsere Website gekommen. Wir werden sehen, wie wir die eigentliche Seite ändern können , um Scripting dort zu platzieren, wie wir es in eine eigene Datei einfügen können. Und ich werde einige der Grundlagen mit Ihnen durchgehen , während wir das eigentliche JavaScript zu unserem eigentlichen Website-Projekt hinzufügen das eigentliche JavaScript zu unserem eigentlichen , an dem wir gearbeitet haben. Also bleib dran. 16. So verwendest du JavaScript: Hallo Leute, willkommen zurück. In dieser Lektion schauen wir uns JavaScript an. Javascript ist eine weitere dieser Sprachen , die man nur wirklich erforschen muss . Aber es ist eine dieser Sprachen, mit der man sich wirklich leicht auf den neuesten Stand bringen kann und verstehen kann, wie die Programmierung im Allgemeinen funktioniert. JavaScript ist also etwas, das wirklich in den Browser integriert ist und es Ihnen ermöglicht , in Echtzeit zu ändern , was auf dem Bildschirm angezeigt wird. Wie wir einmal oder in HTML gesehen haben, antworten Sie, fügen Sie das CSS hinzu. Es ist eher wie ein Bürger. Vergiss es. Während der Browser läuft, wird er nur das rendern, was geschrieben wurde. Javascript ermöglicht es uns zu ändern, dass der pH-Wert zwar LPS ist , nachdem das Berlin uns bereits unser HTML-Dokument gegeben hat , aber den Inhalt, die IT-Standards und alles gesehen hat. Wir können nichts ändern. Ich habe wieder verschraubt, aber dann können wir zulassen, dass Java oder JavaScript oder andere erlaubt alle noch Änderungen an der Uhr vornehmen fast nach Belieben angezeigt wird. Lassen Sie uns also hier einige Experimente durchführen und sehen, wie JavaScript funktioniert. Das erste, was zu beachten ist, ist, dass wir ein neues Tag brauchen. Und das würde normalerweise am Ende des Body-Tags gehen. Es wird also entweder in das Head-Tag oder am Ende des Body-Tags gehen . Nummer eins, der Grund, warum du es nicht in den Kopf stecken würdest , ist eher wie Rendern. Wenn die Seite gerendert wird, möchten Sie alles am Strand haben, dann möchten Sie das Skript ausführen da der Browser nicht läuft. Wenn also der Oncotype DX zuerst auf der Seite steht, endet das zuerst hier. Das Gleiche gilt für CSS. Es ist immer gut, von oben nach unten zu rendern. Wenn also ein p-Tag-Stil angezeigt wird und Sie sich hier beruhigen, indem einen anderen P-Tag-Stil wiederholen , der dem obigen widerspricht, wird er ihn tatsächlich außer Kraft setzen. Sie werden also alles auf Ihrer Seite haben wollen bevor das Skript ausgeführt wird, weshalb wir es normalerweise an das Ende der Body-Tags setzen , basierend auf der Art der beschreibenden Arbeit. Manchmal funktioniert es möglicherweise nicht, wenn es oben platziert wird. Also gehe ich einfach hier runter, sagen Skript, offenes und geschlossenes Skripttag. Alles klar, sehr wichtig. Und was ich dann tun kann, ist eine Funktion zu erstellen oder mich zu lassen, lass mich die einfachste machen. Tut mir leid, ich wollte eine Warnung machen. In Alarmbereitschaft können wir also eine Nachricht auf dem Bildschirm aufrufen. Sobald die Seite geladen ist, wurde Seite J S Warnung geladen. Alles klar, also lasst uns sehen, wie das aus unserem Browser aussieht. Wenn ich also zur Indexseite navigiere, lege ich das Skript ein. Es ist auf der Indexseite und navigiere rüber und sieh dir die geladene JS-Warnung an, da sie sogar davor und CEOs auftaucht , oder? Das ist es, was diese Warnung bewirkt. Es erlaubt uns, Sachen zu modifizieren. Wenn ich also so etwas wie einen Button setze , wird JavaScript im Allgemeinen basierend auf einem Ereignis ausgelöst. Sie möchten, dass etwas passiert, wenn etwas anderes passiert oder so, wenn ich den Knopf hochgezogen habe, sagen wir, tippen Sie gleich Taste. Und das ist sehr wichtig, da Schaltflächen standardmäßig Schaltflächen senden. Also onclick, was das Ereignis ist. Also sehe ich, wenn auf diese Schaltfläche geklickt wird, wollte ich die Funktion aufrufen. Ich werde speichern Button geklickt. Und das ist die Funktion. Also werde ich sagen, dass ich mich kritisiere. Okay, also haben wir unseren Button eingeschaltet, bis Sie den Button als Funktion aufrufen möchten. Alles klar, also lass mich diese Seite aktualisieren und hier ist unsere Clique. Ich. Als ich geklickt habe, passiert nichts. Wenn ich das Element inspiziere, wirst du sehen, dass ich eine Reihe von Konsolenfehlern bekomme weil ButtonClicked nicht definiert ist. Es weiß also, dass es sich an das Etwas auf einer Clique wenden sollte . Aber ButtonClicked ist nicht definiert, sodass es nicht weiß, was es sehen soll. Okay, ich sehe, dass ich etwas tun sollte, aber es gibt keinen Hinweis. Im Java-Skriptbereich kann ich diese Funktion also definieren. Also würde ich buchstäblich die Funktion und den Namen der Funktion mit den offenen und schließenden Klammern sehen. sind also sehr wichtig. Und dann in dieser Funktion, Mal sehen, erstelle ich die Nuts-Warnungen, um sie zu sehen. Ich werde kritisiert. Alles klar, also haben wir gesehen, dass das JavaScript automatisch ausgelöst wurde, als wir einfach den Alarm dort platzieren, es ist einfach gegangen, dass du gerade gefeuert hast? Diesmal versuche ich jedoch zu sagen, dass es nur ausgelöst wird, wenn auf die Schaltfläche geklickt wird. Wenn ich zurückgehe, lade ich die Seite neu. Beachten Sie, dass die Seite neu geladen wird keine Warnungen angezeigt. Aber wenn ich klicke, bekomme ich die Warnung, ich werde angeklickt. Also das bin ich, weißt du, überlagere, dynamisch zu sein. Und dies ist der erste Schritt, um mit JavaScript etwas Dynamisches im Webdesign zu gestalten . Also klick mich. So oft Sie das tun, erhalten Sie jedes Mal die Warnung. Das ist also ein Ereignis. Alles klar, also lasst uns anfangen , dich damit zu jagen. Okay, lassen Sie uns sehen, was wir auf der Seite selbst ändern können , wenn auf die Schaltfläche geklickt wird. Was wäre, wenn ich den Text eines dieser Tags ändern möchte , wenn auf die Schaltfläche geklickt wird. Also klicke mich, um Text oder anderes zu ändern, lass mich einen weiteren Button erstellen. Also klick mich. Und dann werde ich sehen, ob ich den Text ändern werde. Dann kann ich mehrere haben. Klicken Sie also auf die Schaltfläche, um Text zu ändern, klicken Sie auf. In Ordnung, also das ist eine andere Funktion, die ich will. So viele Funktionen ich machen muss, kann ich ihnen Handys für mich treffen und habe dann unsere Funktion zu ändern. Nimmt eine Clique. Nun, was werde ich ändern? Nehmen wir an, ich wollte den Text von diesem P for P-Tag ändern , denn ich wollte diesen einen Stick ändern , um zu sehen, dass ich angeklickt wurde. Dies ist, das ist JavaScript-Text. Alles klar, eins, ich muss es ins Visier nehmen können. Also muss ich es mit Ausweis wissen. Also wollte ich ihm einen Ausweis geben, um das Ziel zu sehen. Alles klar. Nichts Geld, um nur auf Tag zu zielen. Denken Sie daran, ich werde Sie sehen , dass Sie nicht zwei Elemente mit derselben ID auf derselben Seite haben derselben ID auf derselben Seite , da dies zu Problemen führen kann. Also hier ist Ausstellung a. Wenn ich das Element nach dem ID-Ziel-Tag abrufen möchte, wenn es zwei oder drei oder zwei oder mehr sieht, weiß es nicht, welches wirklich abzielt, also ist es einfach nicht funktioniert. Alles klar, damit wir das später testen können. Aber jetzt werde ich auf dieses P-Tag zielen und Zieltag sagen. Und dann werde ich in dieser Peta oder in dieser Funktion eher Dokumente sagen. Dokument bedeutet also, dass ich auf dieser Seite Element für ID erhalten möchte. Also siehst du all das, was du durch eine Schlepper Mimik bekommen kannst und meinen Namen bekommen kannst. Er kann meinen Klassennamen bekommen, Klassenname ist Klasse gleich was auch immer. Wenn Sie also mehrere beeinflussen wollten, dann holen Sie sich wieder meinen Klassennamen und kommen Sie durch eine Entzündung, es würde all diese P-Tags bekommen. Oder Sie können per ID, also dem spezifischen, oder? Also hol Element für ID. Und dann haben Sie innerhalb der Klammern offene und schließende Anführungszeichen. Und dann geben Sie den Namen oder die ID-Werte ein , dieses Ziel-Tag ist die ID. Stimmt's? Dann sage ich, was ich ändern möchte. Ich möchte das innere HTML in HTML ändern , was sich in diesem Tag befindet. Also wird der innere HTML hier gleich sein, ich wollte Java-Skripttext sagen. Alles klar, also lasst uns sehen, was das alles ergeben wird. Also habe ich mein zusätzliches Boot jetzt und erinnere mich daran, dass wir Todd für den Blick auf diesen JavaScript-Text abzielen. Ich arbeite immer noch. Alles funktioniert und wir klicken darauf. Es wird immer nur auf JavaScript-Takes basierend auf dem, was wir geschrieben haben, ändern . Aber wenn ich die Seite aktualisiere, wird das ursprüngliche HTML-Dokument immer wieder hergestellt, weil es das weiß. Sobald ich erneut klicke, wird es im laufenden Betrieb geändert, aber es ändert es nicht dauerhaft über die Website. Es ändert sich alles im Kontext meines Browsers. Kurz gesagt, das bietet Javascript, oder? Es gibt noch viel mehr , denn IF-Anweisungen, Sie haben Schleifen, Sie haben eine Reihe von Dingen, die Sie tun können. Kontext bestimmt, was Sie JavaScript tun müssen, um ehrlich zu sein, ist eines der Dinge, von denen es gut ist , über Grundkenntnisse zu verfügen. Aber Sie werden es wirklich nicht auf Ihr Gesicht verwenden , wenn die Alternativen möglicherweise nicht so günstig sind. Ich werde also nicht Zeit damit verbringen, jeden einzelnen Aspekt dieser Sprache zu erforschen. Ich zeige dir wirklich nur ein Ganzes. Es hilft Ihnen, den bereits eingegebenen HTML-Code als DOM zu ändern . So heißt es, oder? So können Sie einfach dieses dynamische Gefühl für Ihre Website haben. Nein. Es wird Situationen geben , in denen Sie möchten, dass das gleiche Skript auf mehreren Seiten ausgeführt werden soll. Wir laufen in das gleiche Gebiet, wissen Sie, wie bei unserem CSS, wenn wir unser CSS im Hauptbereich hinzufügen und wir wollten, dass es auf mehreren Seiten ist , wo wir es in unsere Datei einfügen können. Dort werden wir also hingehen. Und als nächstes wollen wir unser Skript-Zeug in einer Datei für sich selbst. Also füge ich einen neuen Datei-Explorer hinzu oder den Datei-Explorer. Und ich nenne das einen Skriptpunkt, und unsere neue Erweiterung ist js. Beachten Sie also der Visual Studio-Code. Es gibt Ihnen immer ein wenig Indikatoren, dass sie wissen können , mit welcher Art von Datei Sie es zu tun haben, oder? In einer JS-Datei brauchen wir die Skript-Tags nicht. Alles was wir brauchen ist die rohe JavaScript-Syntax, oder? Also script.js, und es würde nur diese Funktionen dort haben. Also dann in der HTML-Datei oder ein Skript-Tag weiß, dass es ungefähr so aussieht wie dieses Skript öffnen und schließen. Dieser schließt sich leider nicht selbst. Es kommt mit einem Attribut namens SRC, dem ich auf die Datei script.js verweisen kann. Dann kann ich das nehmen und auf jeden einzelnen Beat anwenden. Kontakt hat also auch einen Button, sagen wir bitte Kontakt. Button und klicken Sie auf. Ich wollte sehen, dass das ein Alarm ist, oder? Oder ich bin eher geklickt, oder? Also muss ButtonClicked auf der Kontaktschaltfläche aufgerufen werden , klicken Sie auch rechts, also fügen Sie dieses Skript ein. Und dann habe ich diesen Eingabetyp, sende, was mir einen Button gibt. Aber rate mal was? Ich kann sagen, onclick. Onclick, ich möchte, dass du anrufst. Entschuldigung, ich habe die Funktionsnamen vergessen. Also beim Klick wollte ich ButtonClicked aufrufen. Okay, also schauen wir uns an, wie das funktionieren wird. Also weiß ich, dass ich auf meiner Homepage mich diskret habe, dass es den Alarm aufrufen wird. Das ist in Ordnung. Auch auf dem Kontakt habe ich diese Schaltfläche, die beim Anklicken dieselbe Funktion aufruft. Dort können wir das JavaScript auf mehreren Seiten wiederverwendbar machen . Sie müssen JavaScript auf mehrere Stellen anwenden. Das machst du, oder? Und dann wird es seinen Betrieb wie gewohnt fortsetzen . JavaScript ist also teilbar und Sie können in eine eigene Datei gehen. Keine Sache, die ich zeigen werde , und dann können wir das für Nein abschließen , ist was passiert, wenn du anfängst, dich schnell zu vermischen. Wie Sie hier sehen, haben wir Bilder an einem Ort, Sie haben CSS, JavaScript-Datei, Web-HTML-Dateien. Im Allgemeinen würde ich gerne sehen, dass Dateien Stoplight mischen , dass jede Datei ihr eigener Abschnitt sein sollte. Sie Ischium-Alphas sind die wichtigsten, also müssen sie sich im Stammordner befinden, aber die anderen müssen irgendwie getrennt sein, da Sie möglicherweise mehrere CSS-Dateien, mehrere Bilder haben für Ihre Website mehrere Skriptdateien usw. Was ich also mache, ist sie zu trennen, sagen wir, es erstellt einen Ordner namens CSS. Sie haben also die Datei, Neue Datei und Neuer Ordner, oder Sie können mit der rechten Maustaste klicken und Neuer Ordner sagen. Ich erstelle einen Ordner für JS oder JavaScript und erstelle dann einen anderen für Bilder Idole, die IMG aufrufen. Und sei vorsichtig, denn er hatte gerade das IMG unter den js-Ordnern erstellt . Ich. Lass mich das wiederholen. Stellen Sie also sicher, dass Sie keine andere Datei oder einen anderen Ordner auswählen und erstellen. Und dann IMG. Da sind wir los. Dann kann ich das Skript zu den Daten verschieben. Also ziehe ich einfach mit dem Drag und Drop. Ja, ich bekomme die Aufforderung. Klar. Ich verschiebe dieses CSS allerdings hierher. Frag mich noch einmal, bewege dich und dann können Bilder oder Bilder da rein gehen. Also nein, es sieht ein bisschen ordentlicher aus, oder? Ich weiß wo meine HTML-Dateien sind und so viele Bilder wie ich habe, sie befinden sich alle im einen Ordner. Alle CSS-Dateien sind bekannter Ordner usw. Aber schau dir an, was mit der Website passiert und alles sieht wieder normal aus. Das Kochen funktioniert nicht, die Bilder sind weg, alles ist weg. Warum? Weil wir die Speicherorte der Dateien verschieben. Das ist also eine andere Sache. Denken Sie daran, dass ich immer gesagt weil sie auf dem gleichen Niveau waren, könnten wir sie immer namentlich nennen. Nein, es gibt genug Ordner und woanders. Was ich also tun muss, ist den Ordner aufzurufen und dann zum Fasten zu kommen. Für die Stylesheets heißt der Ordner CSS, um zu sagen, dass HF CSS-Schrägstriche sind. Dann für die Kontaktseite weiß es jetzt, wo die Statistikblätter richtig zu bekommen sind. Das ist also nur ein schnelles Update, das wir auf jeder Seite vornehmen müssen . Alle Statistikblätter sind also kein CSS-Stil. Lassen Sie mich einfach nach oben gehen und das ändern. Stimmt's? Also alle bekannten Seiten oder dass sie in den CSS-Ordner gehen sollten , um die Stylesheets zu erhalten. Alles klar, das Gleiche für die JavaScripts. Beachten Sie, dass kein Klicken funktioniert. Die JavaScript-Datei kennt also js-Schrägstripte. Stimmt's? Also gehe ich einfach da rein, hole die JS-Datei und aktualisiere alle Referenzen überall. Und sobald das erledigt ist, funktioniert das Klicken noch einmal. Okay, das heißt also relative Pfade, oder? Sie möchten Ihre Pfade immer relativ zu den Dateigitterstämmen behalten , auf die anderen Dateien zugreifen. Die Kontaktseite ist also diese Wurzel, aber dann muss sie in j gehen, um zum Skript zu gelangen. Ordnung, das ist also eine weitere wichtige Faustregel. Das Gleiche gilt für die Bilder auf dem Boot. Das ist kein IMG-Schrägstrich, oder? Also entferne ich diese einfach und dupliziere diese einfach so oft und dann wird die Bestellung wiederhergestellt. Das ist also nur ein anderes Prinzip, das ich dachte. Oh, kann ich mich da hineinschleichen, wenn die Vielfalt der Dateien in Ihrem Webprojekt zu wachsen beginnt, möchten Sie sicherstellen, dass Sie sie mit einer klaren Abgrenzung trennen, damit Sie genau wissen, wo Sie zu finden sind mit einer klaren Abgrenzung trennen, damit Sie genau wissen, wo Sie Wasser und ganz. 17. jQuery verwenden: Alles klar Leute, willkommen zurück. Also haben wir uns gerade JavaScript auf dem Wasser angeschaut, das Sie für einen Schnee machen können. Nehmen wir es ein bisschen auf und fangen an einem Framework namens jQuery zu lecken. Wissen Sie, dass ein Framework das Ergebnis einer Gruppe von Entwicklern ist, normalerweise Open-Source-Entwicklern, die im Grunde seit Jahren bei diesem Ding tätig sind. Sie machen immer und immer wieder dasselbe. Und sie denken, wenn sie es weiter machen, dann gibt es noch jemand anderen , der es auch weiter macht. Was sie also tun, ist eine Art Paketsprache oder bestimmte häufig verwendete Befehle aus einer bestimmten Sprache. Sie packen sie in eine Datei und geben Ihnen dann bestimmte Regeln , wie Sie sie bei Verwendung eines Bruchteils des Codes wiederverwenden können . JQuery ist also diese Art von Framework. JavaScript ist also, wie gesagt, sehr mächtig. Es gibt viele Dinge dran. Aber dann gibt es bestimmte Dinge , die fünf, zehn Codezeilen erfordern würden . Und was sie dann getan haben, war das Paket, das ich in eine jQuery-Datei oder eine Bibliothek bezeichne. Dann können Sie mit einer Codezeile auf diese 10 Codezeilen zugreifen , die die jQuery-Funktion aufruft. Darum werden wir uns heute ansehen. Der erste Schritt, um jQuery in Ihr Projekt zu bringen, wäre also jQuery in Ihr Projekt zu bringen, wäre , es gibt zwei Optionen, Sie können die Datei herunterladen. Sie können also einfach zu JQuery.com gehen. Und das können wir einfach hier machen , JQuery.com. Und von hier aus werden Sie sehen, dass es leicht ist, CSS3-konform und es ist browserübergreifend, oder? Und es gibt Ihnen einige Beispiele aus der Syntax. Sie können tatsächlich hierher gehen und sehr gute Dokumentation von einem Boot, der API, erhalten, oder? Sie können die Dateien auch herunterladen. Wenn Sie also die Datei herunterladen, erhalten Sie nur eine weitere JS-Datei, wie wir es gesehen haben. Oder Sie können tun, was wir nennen, oder verwenden das, was wir als CDN bezeichnen, was für Content Delivery Network eine Abkürzung ist. Dies sind also gehostete Dateien im Internet. Also habe ich gerade diesen Link Google Apis.com eingegeben und es ist eine gehostete Version der JavaScript-Dateien. Sie sehen also, dass das JavaScript, das wir jetzt durchgemacht haben, im Grunde nichts ist. All das macht ein paar verrückte Sachen, die ich nie hinsetzen und in einer Sitzung unterrichten könnte. Dies sind Jahre und Jahre, in denen wir das Gleiche in JavaScript zusammen tun und was wir als minified bezeichnen werden. Wenn Sie das Min des Links abnehmen würden, würde es etwas lesbarer aussehen, aber selbst dann ist es immer noch ziemlich entsperrt. Sie können sehen, wie groß diese Datei ist. Minifizierung ist also wirklich der Prozess all diese Whitespaces Notizen zu machen, was die Größe und die Gesamtgröße der Datei selbst variabel reduziert , oder? Deshalb enden wir also bei der Minute. Was ich also gesagt habe , ist, dass anstatt diese Minute nicht zu laden und zu versuchen, es in das Projekt zu stecken. Sie haben auch die Möglichkeit, einfach direkt von der Website aus darauf zu verweisen . Dies würde also tatsächlich schneller geladen werden, wenn Ihr Projekt im Internet angezeigt wird, weil Lord Foster, vom Server von Google, jemand berechnet wird und es würde von Ihrem Server zu seinem Computer oder zu ihr Browser, oder? Was wir also tun werden, ist einfach die CDN-Option zu verwenden und jQuery in unsere Website aufzunehmen , wie wir sie haben. Also geh in den Index. Fangen wir mit dem Index an. Was ich tun werde, ist das gleiche Skripttag zu verwenden , außer dass das SRC die URL zur Datei sein wird. Wenn Sie also nicht mit einer Internetverbindung arbeiten, haben Sie diese Option möglicherweise nicht. schnell wirst du gehen wollen. Wenn Sie also die Datei herunterladen müssen und das kein Problem ist, haben Sie eine Reihe von Optionen. Für mich wäre es am einfachsten, hierher zu gehenladen. Manchmal gehe ich einfach zum Seed, kopiere das trotzdem alles, gehe zurück und erstelle eine neue JS-Datei. Also das erstellt eine neue Datei und ich nenne sie jQuery dot js, oder? Und fügen Sie dann den Inhalt der Datei dort ein. Und dann ist das meine jQuery jS-Datei. Lies das. Es ist schwer anzusehen, aber genau das ist es. Anstatt also das CDN zu verwenden, und ich würde sagen, dass Sie entweder unsere Hintern verwenden anstatt das CDN zu verwenden, diesen Punktpunkt, könnten Sie einfach sagen, dass Sie auf Ihre jQuery Dot JS-Datei verweisen oder was auch immer Sie anrufen es, oder? Sie haben also eine Reihe von Optionen. Wieder einmal sollte das Slash jQuery sein. Da sind wir los. In Ordnung, Sie haben also eine Reihe von Optionen, wenn es darum geht, auf dieses Framework Bezug zu nehmen. Beachten Sie auch, dass ich beide meine eigenen Skripte aufstelle , weil dies eine Grundlage bietet. Sobald ich es bekommen habe, macht es eine 100, einige gängige Befehle in JavaScript. Möglicherweise muss ich auf all diese Befehle in meiner eigenen Skriptdatei verweisen . Ordnung ist also wichtig. Lass es zuerst laden und dann kann ich auf das minus 2 jQuery-Zeug in meinen Sachen verweisen. Stellen Sie diese jQuery-Dateien also immer nach oben und alle anderen Abhängigkeiten von Bibliotheken und so weiter. Beginnt immer mit diesen bevor Sie zu Ihrem benutzerdefinierten Code gelangen da Sie sich möglicherweise auf Code aus diesen anderen Dateien verlassen können. Okay, also schauen wir uns an was jQuery an den Tisch bringen kann. Alles klar, also bin ich, ich bin nicht einer meine Skriptdatei dafür benutzt. Ich schreibe hier meinen eigenen jQuery-Code . Und ich werde das immer noch ins Visier nehmen , wenn es geklickt wird, oder? Also lass mich diesen onclick abziehen oder leben schafft ein anderes Buch. Lassen Sie mich eigentlich einfach einen weiteren Button erstellen , damit wir alle unsere Beispiele behalten können. Dies wird keinen Onclick haben. Ich will nicht sehen, dass ich den Titel verstecke. Denken Sie also daran, dass wir den Titel haben. Wir hatten den Titel. Hier ist unser Titel, der Waffen, Lautsprecher bekommen hat, nur alles, damit wir diesen Titel ausblenden möchten , wenn auf diese Schaltfläche geklickt wird. In Ordnung, um mit jQuery zu beginnen, möchten Sie sagen, wenn das Dokument fertig ist, dann bin ich bereit zu laufen. So können Sie das Dollarzeichen sehen. Dies ist eine Marke von jQuery. Denken Sie also daran, dass Sie im Dokument sehen bevor es in die R-Skriptdatei geht, wir haben ein Dokument gesehen, oder? In jQuery sehen Sie also ein Dollarzeichen, offene Klammern und was auch immer einfacher zu zielen ist. Wo es also streitet, würde das gesamte Dokument, wenn gewünscht ein p-Tag, p. sehen. Entschuldigung, keine Anführungszeichen. P. Ich hab, ich halte eine Person falsch, oder? Wenn ich ins Visier nehmen wollte. Es ist also fast wie CSS. Wenn ich ins Visier nehmen wollte, ist das in Ordnung. Ich kann einfach das oberste Dollarzeichen sehen, Klammern öffnen und dann das umschalten, richtig? Hintern, richtig. Nein, ich ziele auf die gesamten Dokumente ab. Ich sage document.ready. In diesem Dokument ist fertig. Ich möchte diese Funktion ausführen. Also in dieser Funktion am Ende mit einem Semikolon, oder? So kann die Syntax eine Lernkurve nehmen, Vererbung kann andere annehmen und entstehen, weshalb ich immer wieder sehe, dass Praxis dauerhaft ist. Also Dollarzeichen, öffne Klammer das Handtuch, das du willst die Ziele, die ich in diesem Fall zuerst einreiche. Und dann treffe ich mich mit Dr. Reddy, was bedeutet, worauf ich relativ zu diesem Tag warte. Führen Sie diese Funktion aus. So dass ich innerhalb dieser Funktion so viele andere Funktionen haben kann , wie viele andere Dinge , die ich tun möchte. Wissen Sie, dass der kürzere Weg dies tatsächlich nur die C-Funktion wäre. Es gibt also tatsächlich einen kürzeren Weg. Also schieße ich alles richtig, kenne alle Geheimnisse des Universums. Die meisten Beispiele, die Sie sehen würden, hätten document.ready, denn seit Jahren hat das alles jQuery getan. Aber in jüngerer Zeit haben sie eine Version dieses Wortes bereitgestellt oder gekürzt , sagen irgendwie Dollarzeichen, offene Klammern, führen diese Funktion aus, weil es bereits zu dem Schluss kommt, dass ich es kann Führen Sie diese Funktion nur aus, wenn das Dokument fertig ist. Okay, also lassen Sie uns so etwas wie das Button-Klick-Ereignis aussehen . Wir haben also bereits gesehen, wie wir ein Onclick-Ereignis mit normalem JavaScript mit jQuery erhalten können . Ich kann C kennen, Dollarzeichen, Klammern öffnen und dann den Knopf sehen oder um zu beseitigen, wenn ich suche, als würden wir einfach sitzen. Und wenn ich dann einen Knopf sage, wird dies auf jedes einzelne Buch hier abzielen, was ich nicht wirklich will. Ich möchte diesen speziellen Button ins Visier nehmen. Also kann ich ihm entweder einen Ausweis geben, dem wir wissen, dass sie völlig eindeutig benannt ist. Also sage ich „Titel ausblenden“, btn. Also mache ich das eher mit meinen Titeln mit meinen IDs. Also weiß ich, um welchen Elementtyp es sich handelt. Also Titel ausblenden btn. Wenn ich also sagen möchte, dass ich Titel BGN ausblenden möchte , würde ich wirklich das Anführungszeichen öffnen. Genau wie CSS verwende ich den Hashtag und lege die ID der Elemente ein, auf die ich abzielt. Dann sage ich einen Punkt, Klick, richtig? Also sehe ich, wenn auf dieses Element geklickt wird , führe diese Funktion aus. Okay, also wirst du viel davon in jQuery sehen. Sie werden das Dollarzeichen oder die Metope sehen, das Element, nach dem gesucht wird und worauf warte ich dann? Das sind also Live-Events. Also haben wir mit document.ready gesehen, wann das Dokument fertig ist, alles klar, run. Nun, wenn auf dieses Element geklickt wird , führen Sie diese Funktion aus. Was setzen wir also in diese Funktion ein? Also kann ich sehen, und bevor wir weiter gehen, habe ich das alles falsch angegangen. Wenn du den Fehler vorher gesehen hast, dann herzlichen Glückwunsch, du bist offiziell klüger als ich, aber wir schreiben ein Drehbuch, also brauchen wir unser Drehbuch. Ich entschuldige mich aufrichtig für diese Aufsicht. Und so werden Sie sehen, dass der Code, der die Farben andeutet, etwas einladender aussieht als nur das Weiß. Alles klar, so wie wir waren und ich werde nur sicherstellen, dass ich meine Einrückungen mache. Ich kann sehen, wo alles anfängt und aufhört. Dies ist also die Hauptfunktion, und dann ist dies das Ereignis innerhalb dieser Hauptfunktion. Also los geht's. Das sieht ein bisschen besser aus. Jetzt, da wir im Skript sind, sehen Sie noch ein paar Codehinweise. Und wenn Sie zusätzliche Hilfe benötigen, können Sie immer die Winter- und jQuery-Snippets von den Erweiterungen abrufen. Sagen Sie, wenn Sie heute einfach Sinn machen und dann nach jQuery suchen, würden Sie verschiedene Snippets sehen und Sie können Hilfe und zusätzliche Hilfe bei der Codierung von den Erweiterungen erhalten . Alles klar, also lasst uns wieder darauf zurückkommen. Also Titel ausblenden btn. Klicken Sie, sobald ich es tun werde, zielt dann dieses Titelelement anhand seiner ID ab. Dann noch einmal Dollarzeichen, offenes Anführungszeichen, einzelne Anführungszeichen, offene Klammern oder andere. Und dann können Anführungszeichen und es kann singulär sein, verdoppelt werden. diesem Stadium spielt es keine Rolle, aber in Hashtags habe ich die Elemente punkten. Und dann sehe ich alle möglichen Funktionen, die sie in jQuery ausführen können. Ich werde es versuchen, auf dem Toggle steht. Es heißt also, die Elemente ein- oder auszublenden. Also schalte um. Stellen Sie sich vor, Sie sollen lesen, das ist alles, was es in JavaScript zu sehen ist. Wenn auf diese Schaltfläche geklickt wird, prüfen Sie, ob der Titel angezeigt wird. Wenn es angezeigt wird, blenden Sie es aus. Wenn es nicht verschwunden ist, dann zeig es. Das sind zwei wenn Aussagen sind und das ist ein ganzer Textblock, wie ich Ihnen gerade gesagt habe, im Gegensatz zum Klicken auf die Schaltfläche. Fein, Titel und Ziel. Einfach, oder? Das bringt jQuery also in die Tabelle, die sich verdichtet. Ein Großteil des Codes hätte ausführlich geschrieben. Lass mich also zurück zu meiner Homepage springen und mein Live Server läuft nicht mehr. Ich kann also immer einfach mit der rechten Maustaste klicken und live gehen oder einfach in der rechten unteren Ecke auf Go-Live klicken. Und wir sind wieder dran. Hier ist mein neuer Button und sieh dir das an. Wenn ich darauf klicke, schaltet es es um. Nett und einfach. Schauen Sie sich alles an, was wir durch im Grunde drei Codezeilen erreicht haben . In Ordnung, damit Sie immer überwachen können, Sie haben Ereignisse in Hülle und Fülle, und sie sind nicht auf Schaltflächen beschränkt, sondern nur um Ihnen alle potenziellen Ereignisse anzuzeigen, können Sie den Wert einiger TA erhalten sag es dem Unterricht, oder? Du kannst nach den Geschwistern suchen. Sie können die Klasse ändern, die Klasse entfernen, und sie hat eine Klasse oder Attribute entfernen und Attribute hinzufügen, richtig, also was wäre, wenn ich, wenn ich, wenn ich darauf geklickt wurde, anstatt umzuschalten, die Klasse hinzufügen wollte, Ich würde unterrichten und dann kann ich die Klasse angeben. Also in der styles.css welche Klassen habe ich? Ich habe DP, habe, lass mich eine andere Klasse erstellen. Also werde ich das geben, ich wollte eine Klasse namens Punkt-Sub-Titel erstellen . Alles klar? Und was mit einem Untertitel passieren würde , ist, dass die Kuration annehmen wird, sagen wir durchgestrichen, nur etwas anderes. Und die Hintergrundfarbe wird schwarz sein. Und die Farbe selbst, Farbe des Textes wäre weiß. Alles klar, also lasst uns das versuchen. Wenn ich darauf klicke, wollte ich den Untertitel der Klasse hinzufügen. Also bin ich Muslime und sage, füge den Untertitel der Klasse hinzu. Und noch einmal habe ich versucht, die Groß- und Kleinschreibung so gut wie möglich zu berücksichtigen. Lasst uns also sehen , was das hervorbringen würde. Also zurück, erfrischt für mich, sicher, jeder ist nett. Ich wusste, wann ich das mache, schau dir das an. So wechseln die Zecken zu Weiß, also ist etwas passiert. Also werde ich das Element untersuchen, um zu sehen, warum sich nicht alles geändert hat. Also wenn ich es inspiziere und einen Blick darauf werfe, sieh dir an , wie die Klasse davon angegangen ist. Lassen Sie mich also einfach auffrischen und machen Sie das noch einmal. Also bei der ersten Ladung gibt es unser H1-Tag, Titel und alles. Wenn ich jetzt klicke, wirst du sehen, dass es sich geändert hat. Es. Es hat den Untertitel eingefügt, sagen wir, dass er für uns in Echtzeit geändert wurde, richtig. Wenn wir jedoch auf die Rechte achten, werden wir sehen, dass der Titel immer noch Vorrang vor Untertiteln hat. In Ordnung, also sind alle Elemente nicht gekommen, weil diese immer noch durch den Titel oder das Ursprungselement CSS überschrieben oder ersetzt werden. Deshalb ist die gepunktete Linie nicht erschienen, der Block ist nicht erschienen. Blaue Farbe weiß, ist da. Okay, also ja, du kannst damit herumspielen und du kannst sehen, wie du ändern kannst , was wohin geht und wie du die verschiedenen Elemente manipulierst. Dies ist wieder etwas, das Sie verwenden, wenn Sie es brauchen. Du könntest dich hinsetzen und Knöpfe machen und das DOM den ganzen Tag ändern lassen. Ich könnte sagen, wenn sie angeklickt werden, will ich alle P-Tags. Alle p-Tags, um die innere HTML-Normalität in unserer Breite oder Höhe zu haben , wäre er HTML? Manchmal muss ich also sogar reingehen und einfach auf C tippen, okay, welches passt am besten zu dem, was ich möchte. Alles klar, also das ist J Query, oder? Also das sehe ich, wenn ich auf diese Schaltfläche klicke, denselben, um den Titel btn auszublenden, wollte ich diese Klasse hinzufügen. Also lasst uns den Umschalter ändern. Da hat Toggle einwandfrei funktioniert. Okay, also sollte es es verstecken und es sollte alle Blütenblätter ändern HTML, um zu sagen, dass dies jQuery-Text ist. Also hat die Seite I aktualisiert. Wenn ich klicke, sehen wir, dass der Umschalter funktioniert, aber der Text ändert sich nicht. Alles klar, gut, kein Problem. Das bedeutet also, dass HTML-Vokal, sind Underwrites-Vokal, gibt es noch etwas anderes? Gibt es Texte. Versuchen wir es mit einer SMS. Also gehe ich zurück, aktualisiere mich und das funktioniert immer noch nicht. Ich sehe meinen Fehler. Ich hätte die Anführungszeichen um die p-Tags haben sollen. Also lasst uns das noch einmal versuchen. Und das alles soll nur zeigen, dass du jetzt arbeitest, oder? All dies ist also diejenigen, die Ihnen zeigen, dass Sie manchmal einfach reingehen und erforschen müssen , um die Lösung zu finden, die Sie benötigen, oder? Hier sehen wir, dass wir, wenn wir alle Tags eines bestimmten Typs auswählen möchten , die Anführungszeichen um ihn herum benötigen. Wenn es ein Dokument ist, brauchen wir das, das ist in Ordnung. Aber wenn wir dann auf eine bestimmte ID zielen wollen, benötigen wir unseren Hashtag. Wenn wir eine bestimmte Klasse ansprechen wollten, wie ich p, r wollte, wollte ich die Informationsklasse, dann wird es dasselbe sein. Punktinformationen, oder? Also Punktinformationen, alles , was Informationen hat. Also werde ich sagen, dass das für mich da ist, Sean. Alles klar. Also ändere ich alle p-Tags, um das zu sagen. Aber alles mit der Informationsklasse, die ich sagen wollte, ist eine Entzündung. Tu das. Sie sehen jQuery-Text. Das sind Informationen. Okay, es gibt also einige Dinge, die Sie mit jQuery tun können , wenn es um Manipulationen geht. Aber wieder einmal ist es für mich eine Verwendung, da Sie eine Art Bibliothek benötigen. Und es gibt jede Menge mehr, die wir in ein paar Videos nicht erkunden können . Wieder einmal macht die Übung dauerhaft. 18. Einführung in Bootstrap 5: Leute, willkommen zurück. Also schließen wir unsere Grundlagen in HTML und CSS ab. Wir haben uns bereits die Grundlagen in JavaScript angeschaut und uns das Framework namens jQuery angeschaut, das auf dem B6 aufbaut. Genauso wie jQuery entwickelt wurde, um einige der wiederholten JavaScript-Aufgaben für Code zu reduzieren. Es ist das Gleiche mit dem Bootstrap, was wir uns ansehen werden, um einen Teil des wiederholten CSS-Codes zu reduzieren wiederholten CSS-Codes , den Entwickler jedes Mal tun, wenn sie sich verärgern sie neigen dazu, diese Dinge zu tun. Was Bootstrap-Entwickler also gemacht haben, war all diese grundlegenden CSS-Funktionen in einer Datei zusammengestellt . Und dann stellen sie es dir einfach kostenlos zur Verfügung. Und du kannst es einfach nach Belieben benutzen. Es ist also ausgezeichnet , was dokumentiert wurde. Sie können ihre Wache auf diese Website bringen , indem Sie auf bootstrap.com gehen. Und die neueste Version ist Version 5, 1, 0. Aber dann werden sie hauptsächlich benutzt, die Sie wahrscheinlich im Internet sehen würden. Wäre 4.6. Seitdem gibt schon viel länger und brachte das Boot einige signifikante Änderungen es schon viel länger und brachte das Boot einige signifikante Änderungen seit der vorangehenden Version, die Version drei war. Aber wir werden uns an dieser Stelle auf Version fünf konzentrieren. Und die Installation dafür ist ziemlich einfach. Es ist das gleiche Konzept. Sie können die Datei in Ihr lokales System oder Ihre Website-Assets integrieren lassen. Oder du kannst einfach das CDN benutzen. Sie geben Ihnen also tatsächlich die CDN-Links , über die Sie einen CSS-CDN-Link hätten, und sie geben Ihnen eine JavaScript-Datei, CDN-Link. Wenn Sie diese URL also noch einmal in diesem CDN-Link hervorheben und dorthin navigieren, würden Sie tatsächlich die gesamte Datei sehen. Und das ist die minimierte Version. Wenn ich das alte Min nehme und mir einfach das CSS anschaue und es sieht etwas lesbarer aus. Und Sie sehen, dass es das gleiche Ziel ist, das wir bis zu diesem Zeitpunkt genau hier geschrieben haben . Nur noch ein paar Dinge und ein bisschen mehr Details, weil sie eine große Anzahl von Szenarien ziemlich behandelt haben . In Ordnung. Aber für diese Situation werden wir nur den CDN-Link verwenden, um ihn in unsere Website zu integrieren , die wir bis zu diesem Zeitpunkt aufgebaut haben. Lassen Sie uns also zunächst diese URL kopieren , damit ich einfach hier kopieren kann. Und dann gehe ich zur Website-Datei und dann zum Verschleiß der Indexbits. Was wir also tun werden, ist es dahin zu legen, wo wir wissen, dass wir unsere CSS-Dateien ablegen. Also habe ich mein lokales CSS, was immer noch wichtig ist, weil ich vielleicht tut, was ich will. Also schrieb ich mein Kostüm für meine benutzerdefinierten Styles und setzte mein eigenes CSS auf. Aber ich möchte die Bootstrap-Datei für das gesamte Styling einbeziehen . In Ordnung, also werden sie wieder sagen, dass Link rel Stylesheet, der Ungleichheit im Rasen durchgemacht hatte, gleich ist. Und oh, eigentlich habe ich gerade gemerkt, dass wir die ganze Verbindung haben. Lassen Sie mich also einfach Entschuldigungen einfügen. Ich wusste nicht, dass wir die ganze Verbindung haben. Ich dachte, sie wären nur die URL. Sie sehen also, dass es das gleiche Link-Tag ist, nur ein bisschen größer. Wir haben also, dass die HRF dieser CDN-Referenz entspricht , oder? Wenn Sie beim Erstellen und Testen keine konsistente Internetverbindung haben oder keine konsistente Internetverbindung haben, können Sie diese Datei immer abrufen, lokal speichern und das gleiche Verfahren wie was wir für uns getan haben oder kostengünstiges Datenblatt. Sie erhalten also das CDN, Sie haben das rel-Stylesheet, und dann haben wir ein paar andere Dinge dieses Integritäts-Flag, das im Grunde wie codierte Zeichenfolge verwendet, um uns zu helfen oder den Stadtteilen zu helfen oder Truck am Rande, aus der Datei, um sicherzustellen, dass dies eine legitime Fünf ist , weil es Leute gibt , die bösartige Dateien auf CDN-Servern ablegen und dann werben, Oh ja, du bekommst die Javascript-Bootstrap-Datei, aber dann stimmt der Integritätscode nicht mit dem vom ursprünglichen Distributor angegebenen überein. Dann wäre es also eingeladen. Das ist es also, was diese Integritätsprüfung dazu ist, und Cross-Ursprungs bedeutet nur, dass sie von verschiedenen Ressourcen aus über das Internet zugegriffen werden kann . Es gibt also keine Notwendigkeit, dies zu ändern, was auch immer sie uns gegeben haben, wir benutzen es richtig? Und diese sind im Allgemeinen wichtig für CDN-Links, weshalb sie uns dafür gesorgt haben, uns zu geben. Das andere wäre also dieses Bundle, die JavaScript-Dateien, damit wir das auch kopieren können. Und ich weiß, dass ich das ganze Drehbuch bekomme. Also muss ich nicht meine eigene Skriptdatei schreiben, also habe ich immer noch das CDN für jQuery kommentiert , was ich tun werde ist zum Beispiel diese JavaScript-Datei über jQuery einzuschließen . Also diese JavaScript-Datei gibt es kein Problem. Und dann haben wir noch andere Skripte. Bestellen Sie also wieder einmal eine Rolle , wenn Sie etwas haben , das von jQuery abhängt, jQuery muss fortfahren. Also sage ich das, weil in früheren Versionen von Bootstrap, Bootstrap 4, es tatsächlich eine Abhängigkeit von jQuery hatte , wenn man sich das Bundle oder die JavaScript-Teile anschaut , die eingefügt werden sollen, Sie würden sehen, dass die jQuery-Datei oben referenziert wird. Die Bootstrap-Datei. liegt daran, dass der Bootstrap JS Abhängigkeiten von der jQuery-Datei hatte. Genauso wie unsere Skriptdatei Abhängigkeiten von der jQuery-Datei hat. Also muss jQuery zuerst kommen, dann unser eigenes. In Bootstrap 5 haben sie sich jedoch von jQuery zu einem Punkt verschoben, an dem sie nur eine JavaScript-Datei benötigen. Und das ist alles was wir brauchen. Es kann also vor der jQuery kommen. Jetzt, da wir all diese Einschlüsse gemacht haben, werfen wir einen Blick darauf. Ich werde den Code nicht mehr ändern. Dann das Aufteilen in Stylesheets und das Skript. Und ich gehe einfach zur Indexseite, damit wir es uns ansehen können. Und wenn Sie sehr vorsichtig sind, würden Sie leichte Unterschiede zu den Tasten bemerken. Lassen Sie die Links anders indem Sie einfach diese CSS-Datei eingeben, bestimmte Dinge haben sich geändert. Okay, also noch einmal, diese CSS-Datei hat einige Stile, die eine Vielzahl von Dingen abdecken, die einige Standardtexte enthalten, die wirklich gute Standardschriftarten eher haben einige Standardfarben sehen wirklich gut aus. Und indem man nur Bootstrap einsetzt, ist es ein Game Changer. Wenn ich also zu Hause mit den Zehen eines Bootes vergleiche, dann wirst du sehen, okay, es geht zurück zu unserem regulären Styling. Dann gibt es natürlich eine weitere Verfeinerung bezüglich der WHO, die diese Seite im Vergleich zu den anderen aussieht. Während wir uns noch mit dem Thema Bootstrap beschäftigen, werden wir uns auch General Lee ansehen , oder? Sie hätten also erkannt, dass die Seite den Inhalt der Seite dehnt , anstatt uns weit nach links und so weit wie möglich zu dehnen . Das wird deutlich durch ein Ganzes angedeutet, was dieser Kastanienbraun war, aber stöhnte, die WHO weit über den Seitenpunkt erstreckt sich, weil wir nur diesen Text gesetzt haben. Aber H-Tags, p-Tags, ein div, bestimmte Tags, die immer so weit wie möglich über jeden Container gehen , in dem sie sich befinden. Nein, das sind die Keyword-Container denn was passiert, ist, dass Sie nicht wirklich weitermachen sei denn, sie haben Inhalte, die ihn bis zum Rand füllen. Im Allgemeinen lassen sie jedoch einen kleinen Rand nach links und einen kleinen Rand nach rechts. Aber ich strecke mich nicht extrem links und direkt außerhalb bestimmter Websites, oder? Mit Bootstrap ist es also ziemlich einfach, so etwas zu erreichen. Also schauen wir uns ein neues Element an und es heißt div. Ein Div steht für nichts, aber ich betrachte es einfach als Teiler, oder? Ein Div wäre also wie Box. Also dehnt sich div im Allgemeinen so weit nach links, so weit wie möglich nach rechts. Das Gute daran ist jedoch, dass Sie tatsächlich die Länge und die Breite, die Höhe und die Breite eines Divs diktieren können Länge und die Breite, die Höhe und die Breite eines Divs diktieren oder die Höhe normalerweise durch den Inhalt bestimmt wird, den Sie setzen Sie es eher ein, und die Breite können Sie das bestimmen. Und dann können Sie diese Divs oder Inhaltsfelder verwenden und sie nebeneinander stecken und ändern, und wie die Daten angezeigt werden sollen. Im Allgemeinen hätten Sie bei Website-Layouts ein div, Sie würden einen Container oder einen Wrapper aufrufen , in den normalerweise alles im pH-Wert enthalten ist. Also nennen wir diese eine div id ist gleich dem Container. An dieser Stelle ist es sehr, sehr wichtig, IDs zu verwenden. Es wird funktionieren, aber es ist viel einfacher zu lesen. Wenn Sie IDs verwenden, das neue bloße DFS dann, wenn Sie dies nicht tun, denn dann, wenn Sie Divs in Divs in Dibs auf Devs, Devs usw. haben . Jetzt weißt du nicht , welches Div für was der Ausweis dir helfen kann zu sagen, was wir leben für Wasser ist, oder? Innerhalb des Containers haben Sie im Allgemeinen einen Abschnitt für die Navbar. Also werde ich einfach sagen, dass div id gleich cool ist. Und ich sagte es einfacher und dann habe ich div, id ist gleich der Ursache unter der Navbar, normalerweise haben sie den Inhalt, also sage ich einfach Inhalt, oder? Und dann hätte ich vielleicht noch einen, der sagt div, id ist gleich Footer. Dort lege ich bin eine urheberrechtliche Information, das irgendwie. Im Allgemeinen hat eine Website oder eine Webseite eher drei Abschnitte. Der NAV, der Inhalt und die Fußzeile. Natürlich kann er mehr hinzufügen, denn wenn Sie den Inhalt oder die Spalten der Seite an Seite im Inhalt verwenden möchten den Inhalt oder die Spalten der Seite an Seite im , können Sie weitere Details nach Bedarf hinzufügen. Aber im Moment halten wir es sehr einfach. Also nehme ich meine Navbar und lege das Innere des Divs namens nav. Und dann nehme ich alles, was angeblich war, sind Zitatinhalte ohne Zitat. Ich nehme all das und lege in das Content div ein, oder? Keine Einrückung hilft auch die Lesbarkeit. Also bin ich immer, du wirst immer sehen ich meinen Code einziehe, um sicherzustellen , dass ich sehen kann, wo man anfängt und wo alles, was darin steckt, aufhört. Alles klar, also div für das Navi. Navigationsleiste Verbindungen. Alles klar, lass mich sie einfach Seite an Seite stellen. Also habe ich meine Nav-Links und dann habe ich Titel und alle Inhalte im Inhalt. Und dann werde ich hier unten nur sagen, dass dies die Fußzeile ist. Stimmt's? Wenn ich jetzt auf die Seite zurückblicke, ändert sich nichts. Lesen Sie, alles sieht gleich aus. Divs tun es also nicht wirklich, man steckt nicht in das Xylem bekommt eine magische Struktur. Es ist wirklich für Ihre Strukturierung und Ihre eigene Manipulationsfähigkeit, oder? Wenn ich also wollte, dass der Container nicht so breit ist wie der pH-Wert, konnte ich leicht Stil sehen und das haben wir schon getan. Warum verwenden wir das Inline-Stylesheet nicht da sich die Struktur dann über mehrere Seiten erstrecken muss und es ineffizient wäre , den Styleguide direkt hier zu verwenden, aber wir werde schauen , dass das genug ist, um zu verstehen, um anzuzeigen, was passiert, wenn ich es 800 Pixel erzähle. Mit 800 Pixeln würde bedeuten, dass es unabhängig Ihrer Bildschirmgröße oder Ihrer Auflösung gleichzeitig gut ist, von Ihrer Bildschirmgröße oder Ihrer Auflösung gleichzeitig gut ist, 800 Pixel von links nach rechts davon aufzunehmen . Und deshalb sieht man, dass das kastanienbraune Rückgrat abschneidet. Für mich stehen hier 100 Pixel auf dem Bildschirm an, den ich verwende. Alles klar? Oder wenn du es nicht wolltest, könnte das genau 80 Prozent sagen, richtig. Prozentsatz bedeutet also, dass ich die Bildschirmgröße nicht kenne. Und hier sprechen Sie über reaktionsschnelles Webdesign, das Bootstrap voll unterstützt. Wenn der gesamte Humboldt-Prozentsatz beginnt, bedeutet das, welche Bildschirmgröße ich gerade habe, ich werde versuchen, 80 Prozent davon aufzunehmen. 80 Prozent auf meinem Bildschirm können also anders aussehen als 80 Prozent auf Ihrem Bildschirm. Was Sie im Verhältnis zur Bildschirmgröße immer 80 Prozent sein werden . Das nächste ist, dass Sie einen Rand nach links haben wollen. Und wieder einmal sind dies Dinge, die Webentwickler immer tun wenn sie mit dem Entwerfen von Websites beginnen. Sie machen immer diese kleinen Tricks , um die Struktur richtig zu machen und so weiter. Und dann ist das unter viel Zeit, die für die Wiederholung dieser Aktivität aufgewendet wurde, denn die Nummer müsste dies tun, ein Styling, zumindest in meinem Stylesheet und dann sicherstellen, dass es sich widerspiegelt auf allen Seiten. Nicht gut an Bootstrap ist , dass es mit voreingestellten Klassen geliefert wird. Ich kann sagen, dass Kras gleich ist und ich sage einfach Container. In Ordnung? Nein, Container. Dokumentation für Container finden Sie in der Bootstrap-Dokumentation. In Ordnung, also wenn Sie sich Dokumente ansehen und dann werden Sie sehen ersten Schritte zunächst hoffen, zusätzliche einzurichten. Du bist im Grunde alte Körper-Halloworld, all diese wunderbaren Dinge. Aber in der, lass mich sehen, ob ich es jetzt finden kann. Und ich zeige Ihnen nur, wie ich versuche, dies zu finden, damit Sie Layout und Container finden können . Da sind wir los. Und wenn eine Klasse namens Container an jedem reaktionsschnellen Haltepunkt eine maximale Breite festlegen würde , was bedeutet, dass sie nur durch die Verwendung des Containers die Bildschirmgröße und die automatische Mittellinie bewertet und Ränder auf alles, was Sie in das Div stecken , von dem Sie sagten, es ist der Container, oder? Und sie geben dir Codebeispiele. So sagen verschiedene Bildschirmgrößen wieder, dass es sich um einen Container für unseren kleinen Bildschirm handelt, sagt ein Container für diesen Container dafür. Aber ohne die Größe anzugeben, wird es nur ein Container auf der ganzen Linie sein? Nein, indem du einen Container hinzufügst, schau dir an, was passiert. Ich denke, das sind wahrscheinlich eher 60 oder 70 Prozent des Bildschirms. Was ich auf beiden Seiten bekomme, indem ich nur auf die Klasse namens Container verweise. Alles klar, also wie für meinen Titel, jeden Titel, ziehe ich das ab. Ich lasse meinen benutzerdefinierten Stil nicht mehr zu, dass mein Rhabarber wächst. Ich möchte einen Bootstrap-Styles verwenden. Also werde ich sagen, dass Klasse gleich ist, und ich denke, sie haben einen namens Jumbotron. Und einfach damit, oh, naja, nichts ist passiert. Und ich denke, das liegt daran, dass Jumbotron wirklich aus Version 4.6 stammt, während wir in Version 5 sind. Also mein Knopf, ich lebe immer noch in der Vergangenheit, kein Problem. Aber das ist der Grund, warum die Dokumentation so cool ist. Er kann immer hierher gehen und sehen, welche Möglichkeiten es gibt. Also richtig. Nein, ich bin auf dem Dokument. Ich schaue mir Typografie des Inhalts an und schaue mir die verschiedenen Display-Klassen an. Sagen wir also, zeige eins an. Das ist die Klasse, die ich verwenden werde Jumbotron einfügen. Nehmen wir an, dass Klasse gleich eins angezeigt wird. Ich bin zu Eimern gegangen. Man sieht, dass es deutlich größer ist als zuvor, oder? So können Sie immer zur Dokumentation hin und her gehen und sich ansehen , welche Optionen mit ihnen herumgespielt werden , und sehen, was Sie erreichen können. Jetzt ist Bootstrap wieder ein großes Framework, daher ist es gut, eine gute Grundlage in CSS zu haben, zumindest zu schätzen, dass alle Selektoren die Werte funktionieren genannt wurden. Welche Elemente in HTML können annehmen? Welche Art von Stilen ist ein bisschen allgemeines Verständnis dafür. Und dann kannst du mit Bootstrap auf diesem Wissen aufbauen. Und spielen Sie einfach herum, wenn Sie etwas erreichen und gehen müssen was eine Dokumentation ist und Sie durchschauen, manchmal habe ich buchstäblich eine Idee und ich weiß nicht, wie ich sie erreichen soll. Ich gehe hier und klicke auf bis ich etwas sehe , das nützlich ist. Lassen Sie uns also über die Knöpfe sprechen , damit ich Sie nicht zu sehr langweilen möchte, aber schauen wir uns die Knöpfe und den Link an. Was wäre, wenn wir sie irgendwie ändern wollten, damit wir sehen , dass sie standardmäßig DEAP geändert wurde. Aber dann haben wir mit Bootstrap verschiedene Schaltflächenstile, die wir anwenden können. Der Knopf sieht also aus, ich sage jetzt hässlich. Was ist, wenn ich es etwas hübscher aussehen lassen wollte? Wenn ich einen roten Knopf wollte und das erste, was du BTN sagst, dann sagst du BTN Strich und was du willst. Sie haben also verschiedene Farbschemata, eine Art eingebauten Schmerz und gehen einfach zu Komponenten, gehen Sie zu Schaltflächen und Sie werden die verschiedenen Optionen für Schaltflächen sehen . Alles, was Sie tun müssen, Klasse gleich btn und bn ist Klasse gleich btn und bn diese Art von der Nuance, die Sie wollen. Ein blauer Knopf, der primär ist. Dies ist sekundär, also besteht Gefahr und so weiter. Also werde ich versuchen, mit diesen herumzuspielen. Also Klasse Primarvereinigung, ich bin zu diesem gegangen. Lasst uns Gefahr sehen. Ich will unsere roten Knöpfe, es ist Gefahr. Und ich möchte, dass dieser ein dunkler Knopf ist, oder? Kein besonderer Grund. Ich spiele nur mit meinen Optionen herum. Wenn ich also gehe, sehe ich, dass dieser primär ist, dieser ist Gefahr, und dieser ist dunkel. Es ist nicht einfach, oder? Wenn ich dunkel zu grün wechseln wollte, ändere ich es einfach in Erfolg. In Ordnung, also noch einmal, das ist etwas, das Sie möglicherweise nicht zum Speicher verpflichten. Ich mache das seit Jahren. Ich fühle mich wohl, lande aber immer noch in der Dokumentation und bin mir nicht sicher. Das ist also etwas , mit dem man herumspielen und erkunden muss. Wenn ich also wollte, dass mein Link , der dieses Anker-Tag ist, wie ein Button aussieht, kann ich das Gleiche tun. Ich kann eigentlich einfach BTN sehen, btn Dash. Und sagen wir, ich wollte, dass dieser zweitrangig ist, oder? Das heißt also, es sollte ein Grünton sein. Da sind wir los. Amazon ist kein Grauton. Jemand, der auf Ihre Website kommt , würde sich das nie wirklich ansehen. Ein Geräusch, nur ein Anker-Tag, schwarz auf der Navigationsleiste. Es ist eindeutig nur ein Haufen Anker-Tags, aber das ist auch ein Anker-Tag und sind Schaltflächen und die gleiche Weise laden. Und wenn ich möchte, dass ein Button wie ein Anker-Tag aussieht, kann ich BTN Dash Link sagen. Und sieh dir das an. Keine Clique Me sieht aus wie ein Anker-Tag, also zeige ich Ihnen nur, dass Sie mit sehr minimalem Aufwand Ihre Inhalte mit Bootstrap ziemlich einfach manipulieren können . Einfach indem du die Containerklasse auf diesen Container-div setzst. Es hat das Aussehen und das Gefühl verändert , indem es das CSS einsetzte, es verändert das Aussehen und das Gefühl. Bevor wir also gehen, werde ich einfach versuchen, den Dirigenten ein schönes Styling anzuwenden . Erstens sollten alle Seiten dieselbe Struktur haben. Was ich also tun werde, ist die neuen Divs zu kopieren , die ich erstellt habe, und ich füge sie auf jeder Seite ein. Und dann werde ich innerhalb des Inhaltsbereichs diesen Inhalt einfach durch das ersetzen , was am Strand war. Also habe ich schon das Navi, also muss ich das Feeds nicht mit den Knöpfen wiederholen. Ich kann das Navi auf der Bootsseite entfernen, aber alles, was sich in diesem Boot befand, werde ich nicht schneiden und ich werde es in den Inhaltsbereich einfügen. In Ordnung, denken Sie noch einmal daran, jederzeit einzurücken , damit Sie sehen können, wo der Inhalt beginnt und aufhört. Und ich mache das Gleiche mit unserer Kontaktseite. Fügen Sie also ein, entfernen Sie den Navigationsbereich und kreuzen Sie dann diesen Inhalt an und fügen Sie ihn in das Content div ein. Alles klar, jetzt hat jeder die gleiche Seitenstruktur. Wenn wir es uns jedoch ansehen, sehen wir keinen Unterschied. Buchstäblich kein Unterschied. Alles sieht immer noch gleich aus. Der einzige Unterschied ist, dass nein, es gibt einen Fußzeilenbereich. Alles klar. Wie lassen wir sie alle in Bezug auf den Knoten gleich aussehen , ein greifbares Aussehen und ein gutes Gefühl, alle müssen die CSS-Datei für einen haben. Also legen wir diese CSS-Datei und die Bulletins-Seite legen sie auf die Seite „Kontakt“. Da sind wir los. Und natürlich brauchen wir unsere JavaScript-Datei. Also kopiere ich einfach diese Schriftreferenz. Auf jeder Seite, auf der Bootstrap referenziert werden muss, muss diese beiden Dateien referenziert werden. Alles klar, nachdem wir all das gemacht haben, sehen wir, wenn wir auf unseren pH-Wert zurückblicken wenn wir auf unseren pH-Wert zurückblicken, nein, der Container funktioniert. In Ordnung, und wir sehen, dass die Schrift irgendwie anders aussieht. Und Navbar sieht anders aus. Und dann sieht sogar das Formular ein bisschen anders aus, sieht etwas sauberer aus. Alles klar, dann hat Bootstrap ein paar coole Dinge , die Formulare sind? Es gibt einige coole Kreuze, die du bisher benutzen kannst. So kann Ihre Form möglicherweise sogar mit dem Schweben und all diesen wunderbaren Dingen aussehen . Es ist so einfach wie das Sehen unserer Klasse, während eine Klasse dem Formularsteuerelement entspricht. Ich werde also sagen, dass Rohodquoten das gleiche Formlabel für das Etikett sind und Krazy die Formularkontrolle für das Steuerelement geht. Also lasst uns das versuchen. Wenn Sie uns kontaktieren, werden wir sagen, dass das Betriebssystem der Formularsteuerung entspricht. Und das werde ich zuerst über alle Formularsteuerelemente hinweg tun . Und dann sieht man einfach den Unterschied, schau dir das automatisch an. Alles klar, es sieht meiner Meinung nach viel besser aus. Und dann haben wir diesen hässlichen Knopf. Lassen Sie uns dieses hässliche Boot und ziemlich so die Klasse ist gleich BTN und ich reiche normalerweise Knöpfe ein, die ich grün mag oder etwas, um M anzuzeigen und du bist bereit zu gehen. Also fange mir diesen Erfolg an. In Ordnung, und mit sehr minimalem Aufwand haben Sie unser Formular gestylt, wenn wir möchten, dass der Button größer ist oder nach Sekunden sucht größer ist oder nach Sekunden sucht, die er blockiert, richtig, also wird er sich nach rechts dehnen über die Seitentabelle hinweg. Oder das hat nicht funktioniert. Lass mich meine Dokumentation überprüfen. Und in der Dokumentation heißt es, dass wir Blockschaltflächen brauchen. Die Syntax muss so aussehen. Alles klar, ich lebe wieder in der Vergangenheit als Bootstrap 4, also kein Problem, die Dokumentation zu überprüfen und voranzukommen. Alles klar, also lasst uns das mit unseren Knöpfen machen. Also bin ich einfach, ich habe das buchstäblich nur von der Bootstrap-Seite kopiert , aber offensichtlich brauche ich nicht all diesen Code. Alles was ich brauche ist meine Eingabetaste in diesem Bereich. Und dann muss ich sicherstellen, dass ich dieselben Klassen verwende. Wenn ich also zu meiner Absendeabfrage zurückkehre, handelt es sich um alle BTN Blöcke, ich kann den überschüssigen Code entfernen. Manchmal mache ich das also. Solange ich dabei bin. Ich gehe einfach und lasse die Probe auf das nachrüsten, was ich brauche, und entferne dann den Überschuss. Und los geht's, wir haben unseren Block-Button. Um Ihnen zu zeigen, wie einfach es ist, Ihre Webseite irgendwie zu manipulieren. Sobald Sie sich die Dokumentation in Bootstrap angesehen haben, haben Sie ein gutes Verständnis für alle CSS in der Kursarbeit. Und dann können Sie den Code einfach entsprechend auf Ihre HTML-Datei anwenden . Nun das Letzte, worauf ich hinweisen wollte, bevor wir gehen, ist der Fuchs, dass, obwohl wir Bootstrap haben, und Bootstrap eindeutig seine eigene, sagen wir, zitieren und zitieren unquotierte Agenda für das, was die Der pH-Wert sollte so aussehen. Sie würden feststellen, dass unsere Stile immer noch vorherrschen. Also nochmals ist die Reihenfolge wichtig, wenn es um Ihre Dateien geht, nämlich CSS und Ihre Skriptdateien, oder? Obwohl Bootstrap an erster Stelle steht, können wir bestimmte Stile immer mit unserer eigenen CSS-Datei überschreiben . Wenn Bootstrap also keinen violetten Knopf hat oder Sie Asche nicht mögen, einen bestimmten Farbton einer Farbe , die Bootstrap verwendet. Sie können immer zu Ihrer Stack-Klasse gehen, C, egal welche Klasse Sie ansprechen möchten und sagen, ob ich diese BTN ansprechen möchte, kann ich einfach dot btn sagen und dann meine eigenen Stile einsetzen. Und dann würde er tatsächlich den Dot-BTN-Stil innerhalb der Bootstrap-Datei außer Kraft setzen . Es ist also einfach, neben der Bootstrap-Datei Ihre eigene Agenda einzufügen. Das ist also eine weitere schnelle und schmutzige Einführung in Bootstrap. Wenn wir weitermachen und unsere Bedürfnisse größer werden, werden wir sehen, wie Bootstrap uns als Produktivitätstool wirklich hilft , bestimmte geringfügige Aufgaben in Bezug auf das Design der Benutzeroberfläche zu überwinden bestimmte geringfügige Aufgaben in Bezug auf das Design der und in Gang zu kommen. Danach werden wir uns ansehen, wie wir unsere Website auf GitHub und dann im Internet veröffentlichen können unsere Website auf GitHub . 19. Website zu GitHub hinzufügen: Ordnung Leute, also haben wir uns an dieser Stelle angeschaut, wie wir grundlegende Websets entwickeln können, statisch aber einfach sind und HTML, CSS und JavaScript verwenden. Sie haben sich also auch Frameworks in JavaScript und CSS in Form von jQuery und Bootstrap angesehen . An dieser Stelle kennen Sie die Grundlagen, Sie haben ein allgemeines Verständnis dafür, wie neue Dateien erstellen, um sie zu verknüpfen. Halten Sie gedrückt, um auf andere Websites zu verlinken. Hotel legt Ihre Bilder fest , um es für all diese Dinge zu gestalten. Der einzig wirkliche Weg, wie du wachsen wirst, ist wenn du alleine arbeitest und erforschst. Das ist also von größter Bedeutung Ihre Entwicklung als Webentwickler. Jetzt machen wir es einen Schritt vorwärts und schauen uns GitHub an. Wissen Sie, dass Github ein Open-Source-Tool ist von Millionen von Menschen, unserer eigenen, der Welt verwendet wird . Und sie nutzen es wirklich, um ihre Projekte sowie die Zusammenarbeit mit anderen Entwicklern zu speichern ihre Projekte sowie . Es schafft also eine nette Plattform, auf der Sie Ihren Code eingeben können, um alle Änderungen, die Sie an Ihrem Code vornehmen, zu verfolgen. Denn was passiert ist, dass Sie morgen eine Änderung vornehmen und dann etwas verpassen, und dann erinnern Sie sich daran, was Sie geändert haben oder warum Sie es geändert haben. Und es ist schwer, alles rückgängig zu machen. So gute Jobs- und Quellcodeverwaltungstools wie GitHub, weil es andere gibt. Aber diese Art von Tools helfen Ihnen dabei, alle Änderungen zu verfolgen , die Sie und Ihre Teamkollegen an einem bestimmten Projekt vorgenommen Sie und Ihre Teamkollegen an haben, und das Senden ist sehr einfach. Zuerst gehst du zu GitHub.com, gibst deine E-Mail-Adresse ein und meldest dich an. Ich denke, Sie müssen wahrscheinlich Ihre Kegel und so überprüfen, aber sobald Sie das getan haben, haben Sie ein Konto es ist kostenlos, zumindest auf einem Grundniveau ist kostenlos und es ist leicht zu bekommen fing an. In dieser Lektion werden wir also unser Webprojekt auf GitHub bringen. Und dann werden wir es einfach erkunden und es wird immer noch tun, es hilft uns, im Auge zu behalten wo sich Veränderungen im Laufe der Zeit befinden. Jetzt ist das mein GitHub-Konto, und Sie können sehen, dass es bei einigen Projekten ziemlich aktiv ist und geöffnet ist. Du kannst bei Bedarf auf mein Profil springen und dir etwas ansehen. Ich habe Studenten aller anderen Personen, die mit ihnen zusammenarbeiten , und ich kann alle Updates in Echtzeit bei allem sehen . Konzentrieren wir uns vorerst darauf, ein neues Repository für unsere Website zu erstellen. Sie klicken also einfach auf diese neue Schaltfläche und erstellen ein neues Repository. Ich sage Test-Website. Alles klar. Du kannst es meine neue Aufregung nennen, was auch immer es ist, es ist nur ein Container ist es sieht nur, wie der Projektname ist. Lassen Sie mich einen Container mit diesem Namen für dieses Projekt erstellen , Sie können eine Beschreibung eingeben, in Ordnung, und Sie können ihn öffentlich oder privat machen. Ich werde mein eigenes Privat machen. Aber wenn Sie es mit anderen teilen möchten weil bestimmte Personen oder Firmen, die einstellen möchten, Sie gerne sehen, dass Sie ein aktives GitHub-Profil haben werden. Du weißt also, dass du ein Projekt hast, du arbeitest daran, du legst es auf GitHub. Sie können es öffentlich machen und diese URL ganz einfach mit jemandem teilen , und wer weiß, am Ende helfen Sie anderen Personen mit Ihrem Code. Für privatere Bemühungen, wenn Sie an etwas Ernsthaftem arbeiten, möchten Sie es alle privat machen, damit es für Menschen nicht öffentlich zugänglich ist. Ich mache mein eigenes Privat, aber zögern Sie nicht, Sie als öffentlich zu machen, damit Sie es Ihren Freunden und Ihrer Familie zeigen können , während Sie weitermachen. Nachdem Sie die Sichtbarkeitsoptionen ausgewählt haben, müssen Sie nichts anderes tun, aber Sie können einfach auf Repository erstellen klicken. Wissen Sie, sobald das Repository erstellt wurde, erhalten Sie diesen Testplatz. Im Gegensatz zu Säure können sie wiederum diese URL mit Menschen teilen. Wenn es öffentlich ist, können sie gut nachsehen, wenn es verbreitet ist, aber dann müssen Sie sie speziell einladen, um es zu sehen. Wenn du es wünschst. Es gibt eine Reihe von Möglichkeiten, Ihren Code von Ihrem Computer auf GitHub zu bekommen . Erstens, Sie können es durch eine Befehlszeile und die Art von manuell tun , Sie können ein vorhandenes Repository schieben, dh wenn Sie es woanders haben, R und ein anderes Open Source Plattform oder Quellcodeverwaltungsplattform können Sie sie auch einfach kopieren. Und dann kannst du von etwas importieren , das es überhaupt nicht in Beziehung setzen kann. GitHub, Git ist das Protokoll, get ist die Technologie hinter GitHub. Und Sie haben andere Arten von Technologien, die ähnliche Dienste wie Silvers auf dem Corral und Team Foundation Server anbieten. Alles klar, was wir benutzen. Mit Visual Studio Code ist es zumindest in jüngerer Zeit sehr einfach, da Sie diese URL tatsächlich einfach kopieren und dann zu Visual Studio Code gehen und wissen lassen können zu Visual Studio Code gehen und wissen lassen , dass dies Ihre ist Git-Repository. Wenn Sie jedoch keinen Visual Studio-Code verwenden, können Sie auch den Desktop verwenden. Sie können also auf dem Desktop auf Setup klicken und Sie Sie das Desktop-Tool herunterladen, wenn Sie es noch nicht haben. Ich hab es tatsächlich. Und es sieht tatsächlich ungefähr so aus. Das ist also ein anderes Projekt , das ich mir gerade ansehe. Aber was es tut, es gibt mir diese nette Benutzeroberfläche. Ich muss keine Befehle oder irgendetwas eingeben. Ich habe ein Interface. Und ich kann alle Änderungen sehen, die ausstehen , und ich kann es verpflichten, was bedeutet, dass ich nach Belieben von meinem Computer zu GitHub schieben kann. Ich kann Änderungen nach unten ziehen. Wenn Sie also in einem Team arbeiten, sagen wir, kotzen, haben Sie diese Website erstellt. Eine Person arbeitete an der Homepage auf anderen und beide auf der anderen Seite, am Kontakt. Oder vielleicht eine Person, die Bootstrap integrieren oder die Bootstrap-Dateien herunterladen und in das Projekt einsetzen sollte Bootstrap integrieren oder die Bootstrap-Dateien herunterladen und , und sie hat es nicht verpflichtet. Und Sie brauchen es, um Ihre Arbeit fortzusetzen, dann können Sie einfach auf Pull klicken und es würde automatisch automatisch alles bekommen, was auf GitHub neu ist , das Sie noch nicht auf Ihrem Computer haben und aktualisieren Sie Ihre Dateien auf dem Computer automatisch. Es ist also eine großartige Möglichkeit, noch einmal mit Ihren Teammitgliedern synchron zu bleiben . Lassen Sie uns also diese Website unseres Computers auf GitHub für zumindest jetzt Baco verwenden, da wir der einzige Entwickler des Projekts sind, oder? Also gehen wir zurück zu Visual Studio Code. Wir klicken hier auf diese Registerkarte „ Quellcodeverwaltung“. Also haben wir die Suche und die Quellcodeverwaltung untersucht. Und was wir tun werden, ist das Repository zu initialisieren. Möglicherweise werde ich aufgefordert , Git lokal auf Ihrem Computer zu installieren. Denn was passiert, ist, dass Git eine verteilte Quellüberwachungssteuerung ist , was bedeutet, dass Sie Ihre eigene Quellverwaltungssteuerung auf Ihrem Computer haben , aber Sie können auch mit unserem Remote-Repository. Und wenn Sie 510-Änderungen an Ihrem Computer feststellen und diese kürzere Kegel behalten wenn Sie eine Internetverbindung herstellen, können Sie mit der Remote-Verbindung synchronisieren. Und es würde tatsächlich alle historischen Kontrollpunkte bekommen , die Sie auf Ihrem Computer haben und synchronisieren. Das ist also der Polar des Bausatzes. Wenn wir also darauf klicken und Repository initialisieren sagen, müssen Sie eine Nachricht eintragen. Also bin ich eine Nachricht House Sitze und alle gingen diese Chicanos oder beides. Also werde ich das erste Commit sagen, oder? Sie werden hören, wie ich inkompetentes Huhn irgendwie austauschbar sagen würde, weil ich zwei Team Foundation Server benutzt habe , auf denen die Nomenklatur einchecken würde, was sie wirklich gleich sind Sache. Danach bin ich zu diesem Häkchen gegangen, auf dem Commit steht. Und dann wird es mich einfach fragen, dass Steve sich ändert und die Veränderungen beibringt. Möchtest du inszenieren und dann Commits und ich sage ja, mach weiter. Und danach wurde das lokale Repository erstellt. Wenn ich also in den Datei-Explorer zurückblicke, wenn ich hier Änderungen an den Dateien vornehme, wird es automatisch mit dem Truck beginnen, um zu sagen, okay, die Bootsseite wurde geändert und Ich kann eigentlich einfach stetige Veränderungen behalten. Ich kann die Änderungen öffnen. Ich kann genau sehen, was zwischen den beiden Dateien geändert wurde . Es war keine signifikante Änderung, aber sagen wir, ich hatte einen neuen Textblock eingefügt. Alles klar, und dann sage ich, okay, lass mich die Änderungen öffnen, dann zeigt es mir, dass diese Zeile geändert wurde. Das ist ein neuer Text. Das ist es, was die Quellcodeverwaltung zu dieser Gleichung bringt. Also werde ich einfach den Überschuss entfernen. Das spielt keine Rolle. Was ich jedoch wissen möchte, ist es mit dem zu synchronisieren was im Internet oder mit GitHub ist, oder? Wenn ich auf diese drei Pfeile klicke, kann ich nach unten zu diesem Teil scrollen, der remote sagt, und dann remote hinzufügen. Und es heißt „Remote hinzufügen“ von GitHub, oder? Also habe ich zwei Möglichkeiten. Ich kann darauf klicken oder ich springe einfach zurück zu meinem GitHub-Repository. Holen Sie sich diesen Link, kopieren Sie ihn einfach. Und dann kehren Sie zurück zu Visual Studio-Code mit dieser URL, drücken Sie die Eingabetaste rechts und entfernen Sie dann Nim. Im Allgemeinen sehen Sie Leute, die in der ersten entfernten Herkunft oder Moschee anrufen oder etwas, das ich einfach als Ursprung nenne. Drücken Sie die Eingabetaste und dann nein, es fordert mich auf. Möchten Sie Git fetch regelmäßig ausführen? Das bedeutet also, dass ich das Berichts-Repository regelmäßig auf eventuelle Änderungen überwachen möchte. Fetch würde also sehen, dass diese Änderungen ausstehen, was bedeutet, dass es sich um diese Änderungen auf GitHub handelt, aber Sie haben sie nicht auf Ihrem Computer, dann würde ziehen es mir erlauben, sie zu bekommen. Also haben wir gerade gesehen, dass ein ganzer Pool in der Desktop-Version funktionieren würde . Also werde ich ja sagen, ich möchte regelmäßige Abrufe ausführen, oder? Nachdem ich das getan habe, kann ich wissen, dass ich Push zum Remote-Repository rechten Maustaste darauf klicken und sagen kann, ziehen, drücken oder nicht radikal auf die drei Punkte klicken. Ich kann ziehen, ich kann schieben. Und wenn ich als Pull-Push hierher komme, kann ich eine Synchronisierung machen. Also würde es automatisch das neue von mir ins Repository schieben und was ist neu von da an mich, oder? Also macht es diese beiden Dinge automatisch. Wenn ich also nur Sync sage, würde es sagen, dass ich kein Upstream habe. Möchtest du diesen Zweig veröffentlichen, sage ich okay. Es ist also nur ein Ghetto, das leer war, aber ich habe Inhalt. Möchten Sie den Inhalt pushen, nur eine Bestätigung. Nachdem das erledigt ist, wenn ich meine GitHub-Seite aktualisiere, nein, sehe ich alle meine Dateien auf GitHub in diesem Repository, oder? Dies ist bei Bedarf erneut für die öffentliche Betrachtung verfügbar. Aber wenn nicht, ist das in Ordnung. Aber Sie können alle Ihre Dateien und alles sehen. Sagen wir also nein, dass ich eine neue Seite erstellt habe. Also habe ich eine neue Seite erstellt und nenne diesen einen Beitrag. Guter Job. Payload Dot HTML, oder? Jede Seite, in Ordnung, das ist alles, was diese Seite haben wird. Kein Problem. An dieser Stelle sehen Sie also, dass es grün hervorgehoben ist. Bedeutet, dass es engagiert ist, was bedeutet, dass es neu ist, oder? Wenn ich also auf die Quellcodeverwaltung klicke , wird es Änderungen geben. Ich kann meine Nachricht eingeben und sie auf einer der Seiten ändern, ändern oder ändern oder den Inhalt oder an vorhandenen Inhalten ändern und etwas Neues hinzufügen. Wenn ich also noch eine Zeile hinzufüge, zeige das Bild in den Umlaufgeschwindigkeiten an, das ist eine Änderung, die du sehen wirst, dass sie verfolgt wird. Es verfolgt also immer die Änderungen, die Sie vornehmen, damit Sie Rechenschaftspflicht haben können , da dann vielleicht 23 Versionen in der Leitung etwas nicht mehr funktioniert. Es kann tatsächlich bis zu diesem Zeitpunkt zurückgesetzt werden, bevor Sie diese Änderung vorgenommen haben. Um zu sehen, dies ist die Version, von der ich weiterarbeiten wollte. Also werden wir das lokal begehen. Also klicke ich einfach auf das Häkchen. Es gibt keine Phase, in der die Bearbeitungen Fan ja sagen oder ich kann immer sagen , um diese Nachricht loszuwerden und dann zu wissen , dass sie lokal begangen wird. Ich wollte auf der Fernbedienung einfach synchronisieren, einige synchronisieren alle Commits zwischen den beiden Seiten. Und danach tun kleine blaue Balken nicht mehr. Wenn ich zurück zu meinem Repository gehe und aktualisiere, sehe ich Änderungen, oder? Vor 20 Sekunden wurde dieses Commit gesendet. In Ordnung, wenn ich also auf weitere Dateien hinzugefügt klicke, zeigt mir eine Zusammenfassung aller Änderungen an der vorhandenen Datei sowie dessen, was hinzugefügt wurde. Es ist also wieder ein sehr mächtiges Werkzeug. Sie können Mitarbeiter einladen. Wenn Sie und Ihre Freunde oder Kollegen gemeinsam an etwas arbeiten müssen, kann er zu den Einstellungen oder Repository gehen und zu Zugriff verwalten gehen. Und dann musst du dein Passwort bestätigen. Aber nachdem Sie das getan haben, können Sie einen Mitarbeiter einladen. Wenn Sie also einen Kollegen haben , der auch auf GitHub ist und Sie mit ihm an diesem speziellen Projekt arbeiten möchten, setzen Sie einfach eine dieser Optionen ein, suchen Sie sie und dieser Optionen ein, suchen Sie sie senden Sie ihm die Einladung haben sie akzeptiert, dann wird dieses Repository auch ein Teil ihrer Armee-Off-Repositorys sein . Sie können Commits machen und schieben und ziehen, genau wie Sie zu diesem Zeitpunkt. Das ist also alles, was GitHub als Tool für die Zusammenarbeit arbeitet. Danach zeige ich Ihnen, wie es uns auch hilft, unsere Website einfach und kostenlos über eine andere Plattform namens Netlify zu veröffentlichen einfach und kostenlos . 20. Öffentliche Website mit Netlify erstellen: Alles klar Leute, willkommen zurück. Wir gehen also zur nächsten Herausforderung über, nämlich die Veröffentlichung oder Website im Internet zu veröffentlichen , damit die Welt sie sehen kann. Was wir also tun werden, um das bis zum endgültigen Netlify zu nutzen , ist eine wunderbar stabile Plattform , die es uns ermöglicht, einige Dinge kostenlos zu tun. Und ich denke, es ist ein guter Anfang zu sehen, wie Ihre Handarbeit leicht ins Internet gestellt und mit sehr minimalem Aufwand veröffentlicht werden kann leicht ins Internet gestellt . Das erste, was zu Netlify.com geht. Und dann würdest du dich anmelden wenn du noch keinen Gegner hast, was zu diesem Zeitpunkt, wenn nicht, verständlich wäre. Ich tue es schon, dass ich mich einfach in mein Konto einloggen kann. Und Sie sehen hier, dass ich wie wenige Websites zwischen persönlichen Projekten und Projekten von Studenten habe wie wenige Websites zwischen , aber ich habe zunächst eine Reihe von Projekten zu Hause und er hat Minuten gebaut. Sie haben wie viele Mitglieder , wenn Sie zusammenarbeiten möchten. Und dann kann ich natürlich für wenig, ein bisschen Geld anfangen, Ihrer Armee Ihrer Reihe von Werkzeugen verschiedene Funktionen hinzuzufügen . Lasst uns also zu einer neuen Seite springen, von CEO einfach zu bekommen. Das ist eine neue Seite von gut. Also haben wir uns nur Get Hub angeschaut und dann ermöglichen sie eine kontinuierliche Bereitstellung von GitHub, GitHub und Bitbucket. Eine kontinuierliche Bereitstellung bedeutet also, dass ich Änderungen an der Website vornehme und sie in Github-Nukleophile übernehme, die dieses GitHub-Repository überwachen dieses GitHub-Repository sie in Github-Nukleophile übernehme, die dieses GitHub-Repository überwachen und es automatisch veröffentlichen. So verkürzt es tatsächlich die Zeit zwischen einer Änderung und dem Aktualisieren der Website. Alles, was Sie tun müssen, ist es in GitHub einzuchecken und Netlify erledigt den Rest. Für die erste Veröffentlichung müssen wir es natürlich mit GitHub verbinden. Sobald ich das mache, wird es mich autorisieren, weil es mich bereits kennt, aber du musst vielleicht noch ein paar andere Schritte machen. Dann kann ich auswählen, welches dieser Repositorys. Und ich versuche mich daran zu erinnern, wie ich meine genannt habe und es waren Test-Websites. Ich kann einfach weitermachen und Test Flip Side Branch drücken , um ihn einzusetzen. Wir lassen es Master und wir lassen alles so wie es ist und stellen die Website bereit. Denken Sie daran, vom ersten Tag an, an dem ich sagte, wird es Ihnen das Leben so viel einfacher machen , wenn Sie Kleinbuchstaben in allen Ihren Dateinamen verwenden und das Wort Index verwenden möchten allen Ihren Dateinamen verwenden und das Wort Index verwenden , um Ihre allererste Rede zu benennen was auch immer Ihre Homepage sein muss , sollte immer Index sein. Hier ist das Exponat a. Netlify wird automatisch nach index.html oder Index suchen . Nun, es hostet statische Sites, also index.html, wenn Ihre Datei nicht als Index bezeichnet wird oder Sie Großbuchstaben haben, verringert dies die Wahrscheinlichkeit, dass es sich um eine erfolgreiche Bereitstellung für das erste Ziel handelt. gibt also wirklich die folgenden Best Practices. Oder das Konzept, Best Practices zu befolgen , ist wirklich dazu da, Sie zu schützen und Ihnen Zeit und Mühe zu sparen , etwas zu debuggen, das nur durch ordnungsgemäße Benennung hätte vermieden werden können Konventionen, oder? Also klicke ich weiter und klicke auf Site bereitstellen. Und das könnte ein paar Minuten dauern. Und sobald das erledigt ist und Sie die Seite möglicherweise einige Male aktualisieren müssen , nur um sicherzustellen, dass sie noch nicht veröffentlicht wurde, Antony, wird sie immer noch bereitgestellt. Sobald es jedoch bereitgestellt ist, sehen Sie, dass Sie eine URL haben. Sie hatten eine zufällige URL für Sie generiert, das ist noch B. Sie können immer Ihre benutzerdefinierte Domain einrichten. Welchen Punkt müssten Sie eine Domain kaufen, WW-Punkt, wissen Sie, meinen Name.com, diese Art von Domain, die Sie tatsächlich kaufen müssen und Sie können auch Sicherheit kaufen, was? Umsonst? Sie haben eine Website , die sich im Internet befindet. Wenn ich also auf diese URL klicke, wird sie tatsächlich auf meiner Website durch HTTPS gesichert. Und ich kann stöbern, oder? Und alles, was ich in der Webdatei hatte, die CSS-Dateien, die JavaScript-Dateien, die Bilder, all diese werden nicht im Internet veröffentlicht , oder? Lassen Sie uns also sagen, dass ich eine Änderung an meiner Homepage vorgenommen habe, oder? Also mache ich dieses Echtzeit-Tool, damit Sie genau sehen können, was ich damit meine alles wird einfach von Ihren Maschinenstraßen bis zum Internet optimiert . Also wollte ich die Hello World sehen. Meine Website. Meine Website ist null. Alles klar, Das Takes ist momentan eindeutig nicht auf der Seite. Also hier ist mein Wechselgeld. Ich habe diese Änderung vorgenommen. Ich werde sagen, aktualisierte Homepage, das ist meine Nachricht. Nachrichten sind also wichtig. Es ist wichtig, beschreibend zu sein, weil sie Ihnen in Zukunft helfen zu wissen, oh, das habe ich diesmal im Vergleich zu Ihren Teammitgliedern getan , die eine Zusammenfassung der Änderungen zu schätzen wissen das ging mit diesem Huhn rein. Also werde ich dieses Commit machen, oder? Und sobald ich das Commit gemacht habe, schiebe ich oder lass mich einfach drücken, ziehen und sinken. Und ich werde es einfach gut machen, zeig nicht wieder, weil du weißt, diese Aufforderungen nach einer Weile sagen sie immer und immer wieder dasselbe . Aber sobald ich das getan habe, springe ich einfach rüber und schaut schnell meinen Job an, nur um sicherzugehen. Alles klar, und ich sehe hier nur 30 Sekunden oder los, ich habe die Homepage aktualisiert, also ist das nicht in GitHub. Wenn ich zum Netlify-Dashboard springe und aktualisiere, werden Sie sehen, dass die letzte Veröffentlichung 119 gelesen wurde. Und wenn Sie es sich ansehen, implementiert, sehen Sie, dass die erste Bereitstellung keine Meldung für die zweite Bereitstellung hatte, die dieselbe Nachricht enthält , die ich gerade in GitHub eingecheckt habe. Okay, also indem Netlify es einfach in GitHub eingecheckt hat, überwachte es, hat eine Änderung bekommen und es ist nicht veröffentlicht. Wenn ich also die Website aktualisiere, gibt es mein verändertes Leben. Sie sehen, dass alles hinzugefügt wird, meine Datei zu aktualisieren und zu verpflichten und dann mit GitHub synchronisiert und das Handgelenk wurde erledigt. Das ist also eine nette und einfache Möglichkeit, Ihre statisch statischen Websites zum Laufen zu bringen. Wissen Sie, verstehen Sie HTML und CSS. Sie wissen, wie man die Bootstrap-analytische jQuery benutzt. So können Sie schöne Websites erstellen und niemand mit GitHub mit GitHub zusammenarbeiten und sie ganz einfach mit GitHub und Netlify im Internet veröffentlichen . 21. Redesign: In Ordnung, jetzt haben wir ein klares Verständnis ganze Seiten waren kaltes grundlegendes Problem innerhalb von CSS und JavaScript, alle von ihnen kombiniert, um eine dynamische Seite zu verwenden. Wir haben auf GitHub gedrängt und haben sogar im Internet veröffentlicht . Das war also eine gute erste Gebühr. Lasst uns nun all dieses Wissen nutzen und etwas aufbauen , das machbar ist, oder? Wir werden also alte, bessere Vorlagen mit echten Inhalten erstellen , die Bootstrap verwenden. Beginnen wir also damit die Überschrift oder die Oberseite zu ändern. Was wir in der Wanne des Bauches sehen, das so schon weiß , dass dieser Titel uns wirklich den Wortlaut gibt, oder? Also meine erste Webseite, das ist in Ordnung. Wir haben unser CSS-Stylesheet, aber was doppelt dann das Symbol, das Sie normalerweise im Browser sehen, oder? Also diese kleine Ikone hier, weil nichts Gefängnis an diesem Punkt gemacht hat, heißt es eine Ikone. Also auf dieser Website, Icons, 8.com und Sie können nach Symbolen filtern, dann Fav-Symbole, ich kann einfach nach Symbolen suchen. Sie werden eine Reihe von Proben haben. Ich sage nicht, dass Sie eines davon verwenden müssen , da dies im Allgemeinen funktionieren oder wie ein Firmenlogo oder etwas anderes sein könnte . Aber ich werde nur eine davon bekommen, die meiner Meinung nach cool genug und allgemein genug ist. Lassen Sie uns mit diesem Code gehen, damit ich dieses Icon herunterladen kann. Und es würde mir die verschiedenen Größen geben , die verfügbar sind. Im Allgemeinen haben Sie für unser Lieblingssymbol den Erweiterungspunkt ICO, der die Abkürzung für das Symbol ist. Oder du kannst tatsächlich PSP und Gs benutzen, oder? Also können wir einfach weitermachen und dieses PNG herunterladen. Und sobald Sie diese Datei haben, kennen wir die Regeln, wo Dina mit Bildern ist. Wir möchten diese Datei zuerst in unser Projekt aufnehmen, damit wir die Datei überall in unserem Dateisystem finden, und dann bitte ich den entsprechenden Ordner , der der IMG-Ordner sein wird. Und dann möchte ich sicherstellen, dass es ein Wort oder ein Name ist , den ich leicht identifizieren kann. Also nenne ich es einfach einen iPod, oder es hätte lokal sein können, was auch immer es ist, oder? Wenn Sie ein anderes Bild finden, solange es sich um ein ISU- oder Punkt-PNG handelt, sollten Sie in Ordnung sein. Also jetzt, da ich dieses Lieblingssymbol zu Hause oder auf einer beliebigen Seite habe. Ich möchte, dass dieses Symbol angezeigt wird und beginnt, den Code-Link einzugeben. Rel ist gleich Icons , so dass es irgendwie wie der CSS-Code aussieht. Und dann braucht es eine H-Referenz ist gleich, ich weiß, dass es auf die Lieblingssymbole gezeigt wurde, also wäre das kein Schrägstrich, Entschuldigung, Bilder, wo ist, wo ist mein Bildordner? Img, entschuldige dich. Slash Favicon-Punkt PNG oder schließen Sie dieses Tag. Und nur zu Vorschauzwecken schauen wir es uns im Live-Server an, nur um zu sehen, wie unser Tabu aussehen wird. Ein ernennen Sie einen Blick darauf, oder? Das ist also das Vorher und Nachher. Das war vorher. Es lässt diese kleinen Dokumente nicht nein, du fängst tatsächlich an, dieses Symbol zu sehen. Das ist also gut, oder? Das ist es also, was nötig , um zu einem Bild in der Oberseite zu gelangen. Nein, das ist eine relativ einfache Bedienung, aber es geht weit nach oben. Lasst uns zu etwas anderem übergehen. Lassen Sie uns also eine richtige Navbar einrichten und wir verwenden Bootstrap-Code, um diese Navbar zu machen. Als Referenz können Sie erneut zu Bootstrap gehen. Wir verwenden Bootstrap 5 und Sie können Ihre Dokumentation in der Warteschleife überprüfen , sollten Navbars aussehen. Wenn Sie also jetzt nach einem bestimmten Ghettoschritt suchen möchten , sehen Sie die Navbar und dann springt aber und es zeigt uns die Samples. Das sind also alle Möglichkeiten. Es kann Navbar nach Hause bringen, das sind die Links. Kann eine Dropdown-Suche bekommen, oder? Sie können es in verschiedenen Farben aussehen lassen. Also das versucht, den Teil zu finden, wo die Farben sind. Da sind wir los. Du kannst das Dunkle bekommen, das blaue Thema. Alles klar, das ist alles, was du wirklich brauchst, um es zu tun. Es muss nur diese Klassen ändern. Was ich tun werde, ist mir eines dieser Beispiele zu leihen und ich werde es einfach halten. Also werde ich dieses Beispiel hier verwenden. Gerade genug Leiste drei Links und der Dropdown-Link. Also kopiere ich das einfach. In Ordnung, springe zurück zu unserem Code und diesem ganzen Abschnitt, in dem es hieß Jetzt werde ich den Code ersetzen, der da war, und sehe viel mehr Code. Aber es ist irgendwie unkompliziert in meinem Buch gelesen. Dieser Teil hier, der besagt, dass das der Schlepper ist, es ist eine Behälterflüssigkeit. Dann öffnet es sich zu einer Klasse auf Grids Out XOR mit der Klasse Navbar Marke. Und dann wäre es der Ort, an dem Sie angeben, vielleicht ist der Name der Websites kein Firmenname, was auch immer es ist. Also werde ich einfach meine Websites sagen , denn das ist es, was diese Website ist. In Ordnung? Und dann hat es noch ein paar andere Knöpfe, Predigt von einem sprach über reaktionsschnelles Design. Dieser Button-Abschnitt hier ist aus dem Grund, wenn der pH-Wert auf die Größe einer mobilen App reduziert wird, dann würden Sie anfangen, kleine Pillen zu sehen. Wenn Sie unsere Websites jemals benutzen, um sie zu ändern, oder? Man sieht diese Pillen von genug Kauf eines Tickets und dann fällt die Navbar ab. dieser Code das nicht automatisch für dich, oder? So können wir das in ein paar zusammenklappenden Navbar in einer Vorschau anzeigen. Das sind auch einige JavaScripts, die auf Buck laufen , die gewachsen sind, um beim Auftauchen der Navbar zu helfen und nicht, wenn sie dann komprimiert wird. Und dann haben wir unsere Anker-Tags. Also hätte ich wirklich kein Alkoxid löschen sollen, was plündert sie auf verschiedenen Seiten. Das erste Anker-Tag wäre also zu Hause. Also verpasse ich diesen Code einfach. Und hier sagt der H ref index.html, Es ist Künstler ist zu Hause als Vorschau. Das ist in Ordnung. Das nächste Anker-Tag war für den Bolzen. Also werde ich dieses in ein Boot umwandeln. Also zeige ich Ihnen nur , dass es keinen Grund gibt, sich wirklich Gedanken über das Kopieren und Einfügen zu machen. Manchmal ist es notwendig. Aber an dem Punkt, an dem Sie kopieren und einfügen, verstehen Sie den Knoten nicht , das das Problem ist. Wir möchten also sicherstellen, dass wir, obwohl wir den Code von Bootstrap ausleihen, wissen, was wir ändern, weil sie mit diesem Angebot vertraut und vertraut sind . Der nächste wäre also, jemanden zu kontaktieren , um dies von der Preisgestaltung zu Kontakt zu ändern. Da sind wir los. Und dann für unser Dropdown, ich meine, das ist ein gutes Beispiel, also werde ich nur externe Websites sagen, oder? Und per Vorschau könnte man zu Amazon gehen. Man könnte, glaube ich, nun, zum Amazon-Link hier unten gehen. Ja, das tun wir. So können wir in den externen Links zu viel auf alles verlinken . Die sind sowieso nur für einige. Amazon und das könnte EB sein. Und dann könnte dies AliExpress sein oder was auch immer es ist, diese Proben. So können Sie diese Dinge einsetzen, wenn Sie möchten. Zum Üben. Kein Problem. Ich lasse sie leer, wo sie den Amazonas haben, aber ich bin nur routinemäßig alle. All dies, um zu zeigen, wie die Dropdown-Liste aussehen würde. Das ist es also für die Navbar, das sind wir Tick Preview davon. Also werde ich einfach wieder auf die Seite springen, dass wir bereits anfangen, den Unterschied zu sehen, diese Navbar schon angeschaut. Wisse, dass es irgendwie unauffällig ist, es ist irgendwie einverstanden. Wie ich schon sagte, wenn Sie die Größe der Websites ändern, würden Sie sehen, dass sich genug automatisch auf magische Weise verdichtet und es wird anfangen, Knochen für Sie zu fallen, oder? All das, wir haben nicht viel Code geschrieben , damit das passiert. Das ist irgendwie aus dem Boxen Bootstrap. Ich mag diese Farbe auf der Navbar nicht. Also wollte ich zurück zu meiner Dokumentation gehen. Ich schaue mir die verschiedenen Farboptionen und ich mag das dunkle Thema wirklich. Das sind also die Klassen, die ich brauche, um das dunkle Thema zu bekommen. Und Sie merken, wenn Sie noch eine andere Farbe im Sinn haben, können Sie Ihre benutzerdefinierte Farbe tatsächlich Inline-Stil verwenden, oder? Oder Sie können eine neue Klasse erstellen und sie überschreiben. Schau, kann den Inline-Stil wie empfohlen hier verwenden. Obwohl ich diesen Navbar Dash Dark will , BG Dash dunkel. Also springe ich zurück zu meiner genug Bar und es ist Navbar Dash, Light, BG Dash. Lassen Sie jemanden das durch eine dunkle Variation ersetzen. Und da sind wir los. Das sieht in meinen Augen etwas besser aus. Sagen wir mal, es bekommt genug Bar, nett und einfach. Und wenn wir dann die Navbar zu Hause haben, wollen wir natürlich dieselbe Navbar auf den anderen Seiten. Jemand, der alle Navbars auf allen anderen Seiten durch die neue Navigationsleiste ersetzt . In Ordnung? Jetzt hat jede Seite die gleiche Navigationsleiste, auf die wir hingearbeitet haben, und sie ist nicht neu und verbessert. Das ist also eine hervorragende Arbeit. Eine andere Sache, auf die ich hinweisen wollte, haben wir die Navbar in den Container gelegt. Nun, es gibt Zeiten, in denen Sie wahrscheinlich möchten, dass sich diese Navbar so weit nach links und so weit wie möglich streckt, oder? Sie würden also einige Websites sehen, auf denen die Navbar tatsächlich auf der gesamten Seite sucht. Der Inhalt ist innerhalb der Marge begrenzt. Das ist also tatsächlich möglich, indem man das Navi einfach nicht in den Container legt, oder? Es gibt also diese Vorschau, wie das aussehen würde, und genau so würde unsere Navbar Rechte auf der ganzen Seite ausdehnen. Und dann möchten Sie vielleicht, dass der Black Strip District auf der Seite liegt, aber nicht unbedingt das Logo so weit links ist und die Links so aussehen. Dann dann fängst du an, viel zu mischen, was ich irgendwie kreiert bekommen kann . Also hier im Nerv würde man sehen, dass sie tatsächlich ein Div mit der Container-Strichflüssigkeit haben. Fluid bedeutet, dass es dein Auge über die Seite strecken wird. Wenn wir Flüssigkeit entfernen und einfach einen normalen Behälter machen. Und Sie werden sehen, wie sich die Reise darüber erstreckt , was sich der Inhalt innerhalb der Grenzen dessen befindet, wie der Container aussehen würde. Also zeige ich dir nur, wie du das Anders mischen und anpassen kannst . Ich bin Klassen und das Layout von Schwefel, nur um den gewünschten Effekt zu erzielen. Nun, du musst experimentieren. In Ordnung, also werde ich mein genug Violett lassen, das ist eigentlich so, als würde sich meine Navigationsleiste durchstrecken, aber die Links beginnen dort, wo sie null sind. In Ordnung, also das ist es für unseren Roman. Lassen Sie uns jetzt zu unseren Inhalten übergehen. Und was ich tun werde, ist diesen Inhalt zu entfernen. Um das schnell zu erledigen, werde ich einfach das div reduzieren, markieren Sie diese beiden Linsen drücken Sie Entf. Und damit der Vollzeitwind dies aus dem Behälter bewegt , weil ein Phenol wie die Navbar durchstrecken wollte. Aber wir werden später wieder zum Filter zurückkehren. Und was wir innerhalb unserer Content-Ära tun werden, zumindest für unsere Homepage, ist in ein Karussell und vielleicht ein paar Überschriften. Alles klar? Wieder einmal erwarte ich nicht, dass Sie all dies unbedingt in Erinnerung nehmen, würden einfach mit den Schlägen rollen und finden, was wir brauchen, wenn wir es brauchen. So wenig Stoß auf die Bootstrap-Dokumentation. Ich suche nach Karussell. Karussell ist im Grunde wie diese Diashow, oder? Und hier ist es das Beispiel für eine Rutsche, Cyclinrutsche. Es kann über Breitensteuerelemente verfügen oder Sie können klicken und navigieren oder den Benutzern erlauben zwischen den Folien zu navigieren. Und ich glaube, das gefällt mir, die mit der Navigation. Der Code hier würde also sehen, dass wir ein div mit einer Klasse, ein paar Klassen haben und wir haben ein paar Daten-Tags. Alles klar, und dann hast du Karussell-innen. Bei jeder Folie haben wir ein Karussellstück. Wenn du also 50 Bilder willst, hättest du 50 dieser Divs. Wenn du drei wolltest. Davon hab ich drei. Ziemlich viel. Und dann haben wir einen Knopf, um zurück zu gehen und zu wenig vorwärts zu knöpfen. Und das ist es wirklich. Sie füllen also einfach die Leerzeichen mit den grundlegenden Tags aus, mit denen Sie bereits mit dem Bild-Tag vertraut sind, oder halten Sie gedrückt, um den Pfad zum Bild zu erhalten. Alles klar, um es einfach zu machen, können wir noch einmal kopieren und sehen, können Sie sich die anderen Beispiele ansehen, die Sie mit Untertiteln anschauen. Du kannst sie mit Untertiteln besorgen, oder? Und nochmal, setz dich einfach hin und sieh dir den Code an denn es ist nichts, was du vorher noch nie gesehen hast, oder? Alles was es ist eine Kombination von Tasten, oder? Diese Schaltflächen würden also mit diesen Indikatoren hier in wo übereinstimmen , auf welcher Seite wir uns befinden. Sie fügen also einfach so viele Schaltflächen hinzu wie Sie Folien haben. Wir haben immer noch das gleiche Format, das wir uns gerade mit den Karussellartikeln angesehen haben. In Ordnung, genau das anstelle des Elements, also hast du das Bild sowie ein div, das in dem angezeigten Text gespeichert ist. In Ordnung, und dann haben Sie immer noch Ihre Navigationsschaltflächen. Also denke ich, dass ich das tatsächlich benutzen werde hier reingehe und sie den ganzen Tag anstarre , denn hier ist eine weitere Oda, coole Animation. Du kannst sie mischen und kombinieren, oder? Normalerweise ist der Unterschied zwischen den Optionen vielleicht ein paar Klassen. So wie Karussell Feed, dass man in diesem nicht vorhanden ist , sagt Karussell und schiebt dann. Alles klar, hier steht Karussell, schieben Sie dann füttern. In Ordnung. So könnten wir diese Vorlage leicht nehmen und sie dann verblassen. Ich zeige dir nur, dass du mischen und kombinieren kannst. Alles klar, also kopiere ich das hier. Ich mag den mit den Knöpfen drin. Und mach dich nicht immer wieder in den Behälter , um einfach zu kleben. Jetzt lasst uns zuerst daran arbeiten, sich zu verändern. Das besagte, dass ich eine Karussellrutsche mag, also suche ich unseren ISO Dash Fit, tut mir leid, das Auto füttern, richtig. Also kenne dieses Auto. Wir wissen also, dass es genauso viel ernähren soll wie der nächste Typ. Stimmt's? Jetzt haben wir die Knöpfe. Das sind die kleinen Tab-Schaltflächen unten. Und dann sehen diese, dass sie auf die Beispielbeschriftungen des Karussells abzielen. Beachten Sie also diesen Hashtag. In Ordnung, diese Datenattribute sind also irgendwie das, was JavaScript verwendet , um Bug-anfällig zu sehen. Wenn dies angeklickt wird, erhalte ich diese Daten daraus und verwende diese, um meine Entscheidungen zu treffen. Später, wenn wir komplexere Operationen aufbauen, müssen wir sie verwenden, wenn wir etwas jQuery schreiben. Also mach dir jetzt keine Sorgen um zu viel. Aber dafür sind sie da. In Ordnung, also haben wir unser div, Karussell, Beispiel, Bildunterschriften, BS, Fahrindikatoren. Wie gesagt, wenn wir mehr Folien wollen, müssen wir mehr hinzufügen und Ketose, kein Problem. Dann haben wir das Innere des Karussell, Karussell-Dash-Dinner und jeden Gegenstand. Artikelnummer 1 würde also die Bildquelle benötigen. Also werde ich den Boden meines Sohnes benutzen. All das ist also IMG Slash Sunflower Dot JPEG. Und in der Regel werden Sie ermutigt, eine Alternative zu schreiben , die uns das Website-Ranking in Suchmaschinen mitteilt . Und es hilft auch bei der Lesbarkeit für Sprachleser für Personen, die möglicherweise sehbehindert sind. wird also ermutigt, es einfach auszusprechen , damit der Leser, wenn der Leser dort ankommt, das nicht wusste , Oh, es ist jeder von uns auf dem Boden. Also wollte ich springen, naja, was ist ein Peak Sub B? Das ist die Website, auf der ich meine Bilder bekommen habe , und ich mache nur drei Bilder, die auf dem Vorderteil waren. Sie müssen diese Bilder nicht verwenden. Was ich Sie jedoch ermutigen würde, ist, die von uns empfohlenen Zeit zu verwenden , denn schauen Sie sich an, was mit Arslanboden oder Sonnenblume passiert , ist eine riesige Datei. Diese nach Geld, egal ob 0 s Größe, oder stellen Sie einfach sicher, dass wir ein Bild bekommen, das in den Bereich passt , in den wir erwarten, dass es eingeht, oder? Was ich also tun werde, ist sie alle als 1280 bis 53. Ich denke, das sollte klug genug sein. Und ich lade sie einfach herunter und verschiebe sie dann zum Projekt. Verschieben Sie sie einfach in den Bild-Ordner und benennen Sie sie dann um. Und so habe ich ein Bild vom Strand, einem Vogel und einem Klee, was eine andere Art von Vogel ist. Weitere Probleme. Also werde ich diese Bilder dann hier benutzen. Also bin ich Z Slash Beach, oder? Und dann sagt der Out Strand. Dann schrägst IMG Bird. Sagt Vogel-Verkaufssymbol. Das heißt, kenne dein Zahnfleisch. Schwierigerer Teil. In Ordnung? Und natürlich, wenn Sie sich ändern möchten, kann er immer weitermachen und den Text ändern. Wenn Sie den Text nicht möchten, entfernen Sie ihn einfach. Also zeige ich es nur. Ja. Ich weiß nicht was du willst. Ihr Umzug hat alle wollen gewählt, obwohl der schwierigere Teil, Zitat ohne Zitat, die Schriftart ist, die wir vier Bilder haben, und ich habe nur drei Folien, also muss ich ein viertes hinzufügen. Alles klar, also schauen wir uns einen Prozess an , um diesen zu erweitern. Ich brauche ein neues Auto, also den Gegenstand, also muss ich nur dieses Div nehmen und ich werde es einfach replizieren. Ich werde nicht versuchen, neu zu tippen , dass ich diesen Fehler machen könnte. Ich bin ein Legal für den Unterricht. Warum tippe es neu ein, wenn ich hier ein vollkommen gutes Beispiel folgen muss. Alles klar, dann kann ich in dieser vierten Folie einfach das einsetzen , was ich brauche. Alles klar? Und das ist die vierte Folie. Da sind wir los. Also änderst du dich. Was musst du ändern? Kein Problem. nun nach dem Einfügen dieses Schrägstrichs daran, dass wir die Tastenindikatoren haben. Wenn Sie also keine Vorlage mit einer Schaltfläche ausgewählt haben , zeigt das an und das ist in Ordnung. Wenn Sie die Botanik anzeigen möchten , wenn Sie Ihre Meinung ändern, entfernen Sie die Schaltflächenindikatoren. Ich werde jedoch meine Tastenindikatoren erweitern , um zu wissen , dass sie einen vierten haben sollten. Also habe ich gerade den dritten genommen und ich schaue mir alles an, was nicht annimmt. Hier siehst du also, dass das Muster 0 eins ist. Und du würdest in jeder Programmiersprache lernen , die normalerweise bei 0 auf Computern beginnt, oder? 0 ist also die erste Folie, eine ist die zweite Seite, zwei ist die dritte Folie. Also offensichtlich wären drei die vierte Folie, richtig? Nun, nachdem wir meine Diashow eingefügt haben, springen wir zurück zur Website und schließen den gesamten Lärm. Und dann gibt es unseren Slumboden. Es gibt unseren Strand. Da ist unser Vogel und da ist der Klee, dem ein Vogel gehört wird. Wir sehen, dass die Etiketten auftauchen. Wir haben unsere Indikatoren und alles, also funktioniert es gut. Aber dann sind die Bilder immer noch ziemlich groß. Jemand, der mit einem benutzerdefinierten CSS loslegen kann, um nur die Dimensionen des Bildes zu reduzieren , ist ein bisschen Thread. Benutzerdefiniertes CSS. Warum? Denn nachdem ich es für Bilder überhaupt angetan habe, wollte es viermal machen. Also werde ich nicht 4 mal Inline-CSS einsetzen. Es ist stattdessen einfacher für mich, zu meiner benutzerdefinierten Styling-Klasse zu springen und eine neue Klasse zu erstellen. Und ich nenne es Slide-Bild-Schlitten. Ich bin G. Und ich werde einfach die Höhe ändern , weil das wirklich ein Problem mit etwa 550 Pixeln hat. Und dann kann ich mit dieser Klasse leicht zurückgehen und jedes Bild nein lassen. Das ist also ein IMG? Ja, du bist d-block. Ja, du bist mit 100 oder W Dash 100, das sind Bootstraps. Wir haben Breite 100 gesehen, aber ich werde sagen, dass Sie auch IMG schieben, was dann reduzieren würde, wie groß Sie sind und los geht's. Alles klar, also sieht es ein bisschen besser aus. Wie gesagt, es ist immer besser, Bilder zu erhalten, die bereits Erwähnungen enthalten, die Sie möchten, oder Sie ändern sie auf Dimensionen, die sie für diesen bestimmten Abschnitt haben sollen . Denn schau dir an, wie sich die Bilder irgendwie vergrößern, wenn ich sie zwinge , eine andere Größe als ihre natürliche Größe zu haben. Lassen Sie uns also wieder in unseren Code eingehen. Wir haben also unsere Autos laufen. Kopiere und füge ein paar Mods wo wir laufen, wo ich wohne. Schauen wir uns nun ein erweitertes Layout an. Ich sage fortgeschritten, weil es sein wird, es wird sehr sauber aussehen und Leute schauen sich ihre Websites an und Dinge, um etwas mit Anleihen zu tun. Aber Bootstrap macht noch einmal so viele Dinge so erreichbar. Es ist nicht witzig. Alles klar. Also gehe ich unter das Auto. Also das war unser Auto, also das ist unser Container, das sind unsere Karussells oder Silan, die unseren Container aufstellen. Ich werde die Linie brechen und dann werde ich ein neues div vorstellen. Dieses Div wird das GOS namens Roll wissen bekommen. Lassen Sie uns noch einmal die Dokumentation konsultieren. Es gibt also ein in Bootstrap integriertes Rastersystem , mit dem Sie Ihre Inhalte in verschiedene Spalten aufteilen können. In Ordnung, hier ist ein Beispiel für 13 Spalten, was wir tun werden. Sie können die Regel verwenden und der Nietzschean sagt col, col, col. Ehrlich gesagt, so viele Anrufe, wie Sie tätigen, wird es sein Bestes geben , diesen Raum von links nach rechts gleichmäßig zwischen so vielen gibt, dass Sie diesen Anruf haben. Wenn Sie feste Größen wünschen, können Sie tatsächlich Col Dash unter Zahlen sagen. Mit anderen Worten, Sie möchten 5050, wir können Farbe verwenden, wenn Sie 123, anrufen, CAFO anrufen möchten. Aber wenn du willst, lass mich sehen, ob ich einen finde, der genau das Beispiel ist, von dem ich spreche. Los geht's. Es gibt also 12, grundsätzlich konzentriert, 12 Spalten von links nach rechts. Sie können diese also immer gleichmäßig aufteilen, oder? Du kannst es also in vier teilen, oder? Vier Spalten, die jeweils Größe drei sein werden. Oder ich kann das in drei aufteilen, die jeweils wieder für dich groß sind, 5050 geteilt haben. Beide wären also psi-Suche. Oder wenn Sie möchten, möchten deutlich breiter sein als der andere, können Sie sehen, dass Sie es sind, Es basiert auf UR für Arten. Aber jede Kombination von Zahlen, die bis zu 12 summieren , ist eine gute Kombination für diese Teilungen. Alles klar, wenn Sie also durchblättern, sehen Sie andere Beispiele. Sie können einen Col, MD und den MD und das LG und die verschiedenen Namen sehen MD und den MD und das LG und , die Sie sehen , die sich wirklich als Bildschirmgröße bezeichnen. Sie könnten also sehen , dass auf einem mittleren Bildschirm , der wie ein normaler Computerbildschirm für Arten abhebt. Aber in dir siehst du wie Col, Dash ASM, was klein bedeutet. Während es auf einem Computerbildschirm eine x-Anzahl von Arten auf einem kleineren Bildschirm wie einem Mobiltelefon einnehmen sollte x-Anzahl von Arten auf , nehmen Sie mehr Platz ein, weil Sie wahrscheinlich möchten, dass dieses Element über das gesamte -Bildschirm, im Gegensatz zu Diigo, wie Sie es auf einem Computer tun würden. Das ist so einfach, diese Layouts zu machen. Wie gesagt, ich wollte, dass etwas mehr so aussieht, drei Spalten. Also hier ist ein Beispiel div-Klassenregel, call, call, call. Also leihe ich mir diesen Code gerade schon aus, hab die Roboter. Das ist in Ordnung. Ich überschreibe es einfach und lege das rein. Okay, also meine drei Spalten, kein Problem. Was will ich jetzt statt der drei Spalten? Ich füge nur einen Beispieltext ein, und das ist eine Überschrift und ein Absatz-Tag und eine Schaltfläche. Und das ist alles, was ich reinlege. Also tippe ich das von Grund auf neu mit dir ein, oder? Nein. So können sie genau verstehen, was passiert. Beachten Sie, dass dies Beispiel-Ticks sind. Es fängt mit Latein an, es ist eine Art Müll. Aber ich zeige dir, wie du diese Art von Text ganz einfach bekommst . Also für den Anruf, für die zweite Spalte, wann ein H2-Tag zu haben ist. Mel wird sehen, dass es trifft Es ist was immer du willst als deine Überschrift. Wenn Sie Werbe-Websites aufbauen , sind Protokolle, wo Sie die Gesprächsthemen über diesen Brothafer sprechen, wissen Sie, kostenfreundlich, effektiv, effizient, et Cetera, oder? Ich gebe dir nur Ideen. Das ist also die Überschrift. Dann möchte ich im p-Tag einen Beispieltext, damit ich tatsächlich einfach das Wort Lorem schreiben, die Eingabetaste drücken kann , und es wird einen ganzen Absatz aus Alarmnahmen erzeugen , also bin ich mir sicher, dass Sie das gesehen haben irgendwo in deinem Leben, irgendwo im Internet. Wenn nicht, ist das in Ordnung. Aber der Punkt davon findet Inhaber statt, also hier legen Sie was auch immer, Sie verwandeln das in die nützlichen Informationen. Alles klar? Wenn Sie Wireframing ausführen und einem Kunden Watt anzeigen möchten, sieht die Website im Allgemeinen Wireframing ausführen und einem Kunden Watt anzeigen möchten, so aus, als würden Sie diese Art von Ort einrichten möchten. Nun, ein gelöstes C, okay, wenn sie dorthin gebracht werden , sieht es so aus. Dann für den letzten werde ich nur dieses p-Tag haben, das dies auf der Krypto-Einheit hat , und ich werde nicht neu tippen, das heißt, ich denke, die Kombination dieser Tags, du weißt schon, wie man das macht ein p-Tag mit einem Anker-Tag, btn sekundär. Also ja, ich stimme zu Button und die Rolle ist Button. Es weiß also, dass es nur ein Knopf ist, oder? Oder es sollte sich wie doppelt oder anders verhalten und das stört, nirgendwohin zu gehen. Details anzeigen. Das ist in Ordnung. Alles klar. Nein, du wirst diese Art von dem sehen, was soll ich sagen? Diese Symbole sind dieser Unicode-Text, verschiedene Orte befinden sich im Internet. Dies sind, er bekommt spezielle Symbole in Ihre Website. So würden Sie zum Beispiel normalerweise in der Fußzeile etwas wie Copyright-Informationen sehen. Und wie bekommt man ein Copyright-Zeichen? Sie machen also kaufmännisches Und-Und-Zeichen und ich denke, es ist C. Wenn Sie also nur einen Ausbruch gemacht haben und ich eine Schriftrolle verwende, werden Sie sehen, dass alle Sonderzeichen im IntelliSense auftauchen , was sie darstellen. Wenn ich also etwas sage, diese Kopie, los geht's, das ist ein Urheberrechtssinn. Also kaufmännisches Und-Exemplar, Semikolon. Wenn Sie also einen Lamberson Rock cool sehen, weiß ich nicht, dass It Rock cool auf Englisch übersetzt UC bedeutet, dass Sie dort diesen kleinen Doppelpfeil bekommen. Okay, also replizieren wir einfach diesen Abschnitt oder diesen Code für unsere dritte Spalte. Und dann lasst uns einen kurzen Blick darauf werfen. Das OK, ruhig, los geht's. Jetzt haben wir unsere drei Überschriften unter Diashow und unserem Beispieltext und unseren Rasterschaltflächen, die nirgendwohin navigieren. Also UCO, alles kommt zusammen, oder? Ich hoffe also, dass Sie genauso gespannt sind, was wir erreichen. Retinoide, die ich für die Fußzeile kenne , und dann werde ich es einfach dort abschließen für das, was wir auf dem Sprachfotofilter machen. Oder zumindest am Ende werde ich eine horizontale Regel setzen, werde ich eine horizontale Regel setzen damit wir eine kleine Linie bekommen. In Ordnung, und dann habe ich diesen Filter gewechselt , um etwas mehr wie ein echter Filterschlepper zu sein. Sie sehen also Fußzeilen-Tags, Sie sehen Kopfzeilen-Tags. Und das nennen wir semantisches HTML. Und es ist nur ein anderer Schreibstil, aber es kommt letztendlich immer noch darauf an, auszusehen, als wäre es nur ein Container. Und semantisch befindet sich dieser Behälter für den Filterinhalt oder so innerhalb des Filterinhalts. Nun zuerst, sobald Sie ihm eine Klasse namens Container gegeben haben, wissen wir, dass Container einen weiteren Bootstrap anstrebt. Und dann füge ich anstelle dieses p-Tags R oder Urheberrechte hinzu und so kaufmännische Und-Kopie, oder? Und dann sehe ich meine Websites. Das ist 2021. In Ordnung. Also sehen wir unsere Website wieder, etwas, das so ist, dass wir unser Navi haben, Sie haben die Überschrift und dann haben wir das. Keine Ahnung, wie auf dieser Folie irgendwie Mart sind. Das sind also Kleinigkeiten, auf die sie achten können wenn Sie etwas Tageslicht zwischen ihnen haben wollen. Es ist im Grunde so einfach wie ein Break-Tag zwischen Navigationsgerät und Container zu setzen . Also bekommst du das kleine BH3. Da gehst du. Nett und einfach, oder? Was manche Leute auch tun, ist, dass sie tatsächlich ein div oder so erstellen oder eine Klasse erstellen, die automatisch sagt, dass sie mir X Marge von oben geben. Also werden sie das auf dem Container-Div-Excel-Modellrand von oben teilen . Wenn Sie also jemals diese Marge ändern wollten, haben Sie nur die Gene Klasse, weil er nicht wirklich ändern kann , wie viel Pause und mit unserem Haltepunkt zurechtkommt. Das ist es also wirklich für das, was wir mit der Homepage machen. Die Aufenthaltsseite kann etwas Arbeit verbrauchen. Auf jeden Fall kann die Kontaktseite etwas Arbeit verbrauchen. Wenn wir also wiederkommen, werden wir uns das Styling des oben genannten Pfirsichs ansehen. 22. Neuausrichtung von Seite mit Bootstrap Grid und Buttons: Alles klar Leute. Willkommen Buck. Also haben wir uns schon ein Restudium oder Homepage angeschaut. Lassen Sie uns unsere Aufmerksamkeit auf unseren Bolzen oder unsere Rede richten. Weißt du noch einmal, diese geben dir nicht Dinge vorgeschrieben , die du experimentieren musst , wenn dir die Art und Weise, wie ich etwas getan habe, nicht gefällt, dich frei zu erforschen und etwas anderes auszuprobieren, oder? Dies sind nur Richtlinien. Ich habe einen anderen Standpunkt als Sie wie bei anderen Menschen. Es ist also in Ordnung zu experimentieren und etwas anderes auszuprobieren. In Ordnung, lasst uns also zuerst einen Bolzen auf den gleichen Standard wie die Homepage bringen , was bedeutet, dass in Bezug auf das Layout daran denken, dass Konsistenz der Schlüssel ist. Also hatten wir uns die Navbar ausgeliehen, aber wir hatten Änderungen an der Homepage-Navbar vorgenommen , die wir interpretiert haben. Wir haben auch Änderungen an unserem Fußzeilenbereich, die wir nicht repliziert haben. Konzentrieren wir uns also darauf. Im Navbar-Bereich hatte ich es also alt aus dem Container genommen oder der mittlere Contian ist, dass ich nur den neuen Navbar-Code kopieren werde, um es einfach zu machen. Und ich werde diesen Navbar-Code einfach zusammenbrechen und entfernen. Und dann löste diese Navbar-Standardeinstellung das Container-div aus. Während ich hier bin, mache ich das Gleiche auf der Kontaktseite, oder? Also mag es , das zu tun , wenn ich eine Änderung vornehme, ich weiß, dass es global ist und versucht habe, es so viele Orte wie möglich zu schaffen, genau zur gleichen Zeit. Also vergesse ich später nicht. Nachdem wir es repliziert haben, Navbar, sehen wir, okay, gut. Es arbeitet auf dem Boot uns, das müssen wir auch in der Fußzeile tun. Also sind wir im Filtercode und es muss eine EHR haben. Also geh zurück zum Boot, stürzte zusammen und ich bin gegangen , um diesen Inhalt zu entfernen div ganz. Aber wir können diesen Filter entfernen. Ich werde das einlegen und in unsere Fußzeile stecken, oder? Wenn wir also zurückblicken, sehen wir, dass die Fußzeile so aussieht, wie wir wollen. Jetzt können wir diesen Inhalt entfernen und mit dem Redesign beginnen. Oder denken Sie daran, dass wir hier eine Pause zwischen dem Inhalt oder dem Containerbereich und dem Navi Hero hatten. Bei all diesen Änderungen, die dafür visuell vorgenommen wurden , sind beide Seiten eher einer Profilseite ähnlich, richtig. Ich möchte sehen, Hey, das ist ein Absatz über mich und habe dann wahrscheinlich ein paar soziale Links. Und dann denke ich genau wie ein Profil denke ich genau über die verschiedenen Dinge nach, die wir tun könnten. also im Container Lassen Sie uns also im Container unsere Rolle erstellen. Jedes Mal, wenn wir die Spaltentrennung haben, also wenn wir mit Klasse gleich Roll beginnen , dann werde ich innerhalb dieser Zeile ein div haben. Und dieses Div wird Klasse gleich haben. Und beachte, wie besonders Amabile meine Einrückung ist. Einrückung ist sehr wichtig, wenn es später um die Lesbarkeit geht, oder? Versuchen Sie also immer sicherzustellen, dass Ihr Code sauber aussieht. Also wollte ich diesen mit dem Namen „Dash Acht“ geben. Okay, ich teile den Strand hinein und vielleicht drei. Also werde ich sehen, nenne es für diesen und ich werde einfach diese Zeile duplizieren und drei streichen, aber ich wollte auch einen Col-Dash-Offset haben. Alles klar, ich vergesse tatsächlich, wie der Offset-Code jemanden durchführt, um hier rüber zu springen und nach Offsets zu suchen, oder? Also der Offset, Offsets hier, ein Ziel, also der Offset ist tatsächlich in den Spalten im Raster. Es ist eigentlich in Spalten. Und hier ist ein Angebot für den Offset. Also versetzen Sie den Strich, unabhängig davon, welche Bildschirmgröße, Bindestrich, was auch immer Offsets aussagt , es bedeutet „ Hold-Modus-Raum“. Willst du zwischen mir und dem, der ich neben mir bin, oder? Also wenn wir es benutzen und lassen Sie mich das einfach kopieren, wenn ich es benutze. Und drittens, das bedeutet, dass ich wenigstens einen Offset von eins haben kann . Also eins plus drei plus acht gleich 12. Nett, oder? In der ersten, werde ich also einen kleinen Vorteil vier haben. Göttin ist gleich wie Text, Dash Info. Alles klar, also wirst du sehen, was das bedeutet. Unsere primäre, lassen Sie mich es primär machen , damit Sie sehen können, wie die Farbe bekommt und das wäre ein Boot, auf dem ich drauf bin. Dies ist für TAG. Und ging zu einem Absatz, wie ich über mich sagte, Platzhaltertext lorem, und lass ihn einfach diesen Text erzeugen. Für diesen Text gebe ich ihm einen Kurs. Text. Stumm geschaltet. Alles klar, also wenn du es bist, wenn du mit dem Tech-Zeug nicht so vertraut bist. Kein Problem. Bootstrap. Wenn Sie also nur Text eingeben, springen Sie zu dieser Dokumentation, ist der Autor der wunderbaren Möglichkeiten, wie sie ihn transformieren können, um die Größe und die verschiedenen Farben festzulegen, die sie mit dem Text erhalten können. All diese wunderbaren Dinge, okay? Und im Allgemeinen, wenn Sie über die primäre oder den Erfolg oder eine Warnung oder Gefahr sprechen über die primäre oder den Erfolg oder , Klassen zu erscheinen, die Sie für BG-Dash oder BTN sehen werden , scheinen dies Schlüsselwörter und die daraus resultierenden Farben stehen für Ihre Zecken zur Verfügung. Wenn Sie also blauen Text wünschen, nimmt der Text Dash Primer Informationen, grünen Text, Text, Fluxus usw. auf, oder? Also zeig ich nur auf den Zeh. Deshalb werden Sie viel Gemeinsamkeiten zwischen der Art und Weise sehen, wie diese Keywords überall verwendet werden. Jetzt, da ich mindestens eine Spalte habe, nicht. Ich bin gegangen, um nach unten zu springen und habe mit dem Aufbau von Säulen angefangen. Was ich in dieser Kolumne möchte, wären Kontaktinformationen, oder? Also werde ich ein anderes Alter für Zunge haben , das die gleichen Primärdaten hat. Aber dieser wird Kontaktinformationen sagen, oder? Und dann werde ich anstelle einer Pita eine ungeordnete Liste verwenden lassen, in der ich nur zu einigen meiner Social-Media-Links gehe. Also siehst du, ich füge nur all diese Tags zusammen und kombiniere sie nur, um mein gewünschtes Ergebnis zu erzielen. Also stimmt es oder wenn es, oh tut mir leid, lass mich diesen Hunger-TAG einfach öffnen und schließen , damit ich einige dieser Pfeile loswerden kann, oder? Also ist f gleich, und ich lege einfach einen Hashtag für null, damit der Link lebendig aussieht. Klasse ist gleich, vielleicht könnte ich Text sehen SSH stumm geschaltet oder Text Bindestrich vollständig, oder? Es ist einfach so, dass es fertig ist. Und ich meine, das liegt noch einmal daran, dass du so dunkle Zecken nimmst, weiß, du willst Link, da du weißt , dass eine URL eine bestimmte Schleife haben wird. Wenn Sie also dieses Aussehen ändern möchten, dann kein Problem. In Ordnung. Also wollte ich meine Links dunkel aussehen lassen. Alles klar, mal sehen , wie das aussehen wird. Und ich gehe zu einem Tutor. Und dann dupliziere ich das einfach. Einer ist also Twitter, eins ist Facebook. Und gewonnen könnte sein. Guter Job. Alles klar, also schauen wir uns an, was wir mit dieser Seite bekommen. Also das ist es, was ein Bolzen bedeutet, dass Flamingo so aussieht , als hätten wir mir etwas Bool. Das ist ein Balkendiagramm stört mich. Und dann haben wir unsere Blocklinks, oder? Also noch einmal mischt viel und experimentiert. Also wollte ich weitermachen. Darunter erstelle ich einen weiteren Abschnitt. Und ich werde diesen Abschnitt vielleicht als mein Portfolio nennen , um etwas zu betonen, woran ich seit all den Jahren gearbeitet habe, vielleicht. Ich weiß es nicht. Aber lassen Sie uns sagen , dass wir haben, also sind wir immer noch im Container-div, wir sind mit dieser Rolle fertig. Also lasst mich es einfach zusammenbrechen und es aus dem Weg schaffen. Alles klar. Und dann bekomme ich einfach eine Mutter, ein anderes Div. Wieder einmal ist es immer gut, Ihre DBS-IDs anzugeben. Sie könnten diesen Portfoliobereich also nur für den Fall nennen oder es war Portfolio, was auch immer Sie wollen. Es ist immer gut, sie zu geben. So kannst du wenigstens sagen , was sich in welchem Abschnitt befindet. Natürlich ist es nicht obligatorisch, wie wir gesehen haben. In diesem Abschnitt werde ich ein H1-Tag haben. Und als kleine Trennung verwende ich nur einen HR-Toggle zwischen diesen beiden. Also bin ich, ich benutze nur ein Hey, ich probiere hier nur Dinge aus, oder? Also ein Ziegelstein auf HR-Ziel, eine weitere Pause. Und dann starte ich mein Portfolio. Also sage ich mein Portfolio. Das ist die Überschrift. Alles klar, damit du weißt, in welchem Bereich wir uns befinden. Dann habe ich ein p-Tag. Und dann mal sehen, ich möchte diesem den Kurs geben. Du hast noch einen namens Lead. Und ich wollte es auch Dash gedämpft machen, nur für dramatische Effekte. Es ist da, aber es ist, weißt du, irgendwie Kreis. Und ich gebe das einfach Lorem. Das ist also mein Absatz über mein Portfolio. Und vielleicht kann ich zwei Knöpfe haben? Wir nennen sie wie einen Aufruf zum Handeln in der Webentwicklung. Ich bin einfach weitergegangen und habe sie gemacht. Also haben wir Unterricht, tut mir leid , H ref, nichts wird wirklich auf ihre Klasse BTN Primary gehen . Und dann siehst du sie Y2. So viele kleine einzigartige Klassen, die Sie von Zeit zu Zeit sehen, besonders wenn Sie an einem Bootstrap-Beispiel vorgehen . Dieser sieht also einen Rand auf der Y-Achse zweier Räume, und das ist alles, was es sieht. Bootstrap hat also viele dieser Dinge zu verhindern. Sie sind reduziert, dass Sie tatsächlich eine Klasse schreiben müssen , nur um eine Marge von zwei zu haben. Die Y-Achse ist von oben nach unten rechts. Also um Ihnen nur Marge zu geben, warum Tool, wenn Sie nur zum Thema wollen, würde leer oder MB usw. sagen , oder? sind also die Richtlinien, auf die Sie achten und sie zu Ihrem Vorteil nutzen können. Nun, nachdem ich all das gemacht habe, habe ich die Werkzeuge sagen wollen, mich einstellen, Feedback hinterlassen wollen, oder? Und einer ist primär, einer ist zweitrangig. Wieder einmal kannst du deine Klamotten mischen und anpassen, aber ich werde einfach rüberspringen und sehen, wie das aussieht. Okay, mein Portfolio. Sie sehen also hier, dass mein Kopfzeilentext irgendwie standardmäßig auf das ist , was mein benutzerdefinierter Stil hat. Ich möchte sie nicht sehr mischen. BTN-Primär und Nachkommen verstehen das, oder? Ich habe zwei Möglichkeiten. Ich könnte einfach mein gesamtes benutzerdefiniertes Styling entfernen, oder ich könnte dieses noch einmal überschreiben, bis Ihre Klasse x86 Dash primär ist. Es weiß also einfach, wann man gerendert wird, man wird blau gerendert und alles andere kann in der Reihe aussehen, oder? Wenn wir wollten, dass all dies in der Mitte ausgerichtet ist, damit ich sie einfach an einem Schlitten heben kann, um sie einfach an einen Schlitten zu heben , Geld springen kann. Und ich könnte zu diesem div sagen, dass deine Klasse gleich Text ist, dem Zentrum, so dass wir, der gesamte Text darin kein Zentrum ausgerichtet ist, oder? Also zeige ich Ihnen nur, wie einfach es ist, bei der Verwendung von Bootstrap einfach einige verrückte Änderungen mit einige verrückte Änderungen mit sehr minimalem Code vorzunehmen. Lassen Sie uns also zu anderen Inhalten übergehen , die in der Rede nützlich sein könnten. Jetzt zeigen wir ein Portfolio, also wäre es wieder umsichtiger Romanautor. Oh sicher, wie eine Galerie der Arbeit oder so ähnlich. Vielleicht unser Fotograf oder ein Webdesigner oder auch nur so enges Design oder was auch immer es ist, wer auch immer Sie sind, kein Problem. Was wir tun können, ist , einfach eine Mini-Galerie direkt unter diesem Div für das Portfolio zu erstellen eine Mini-Galerie direkt . Also werde ich einfach ein anderes Div erstellen. Ich wollte dir die ID-Galerie geben. Und dann werde ich in diesem Div unsere Rolle haben, weißt du, ich könnte diese div-Rolle wirklich treffen. Also wollte ich nur sagen, dass Cross gleich der Regel ist und Ihre Ideengalerie und Einsicht oder vier Rollen, wir werden div haben. Also hier ist noch eine Sache, null, wenn wir Call benutzen. Was wäre, wenn wir mit jeweils drei Items Reihen wollen? In Ordnung, also haben wir uns schon angeschaut, wie wir eine Größe mit Farbe einstellen können. Es geht auf was auch immer. Und wir sehen auch, dass, wenn wir es einfach sagen, wird die Rolle für viele Spalten automatisch im Abschnitt analysiert. In diesem Fall möchte ich zwei Reihen mit jeweils drei Gegenständen. Also kann ich die Mathematik machen. Wenn es 12 ist, will ich drei, das heißt BY Spalten E bis B für Größe dafür. Also kann ich einfach sagen, dass Autos gleich Col Dash Four sind. In Ordnung? Und das kann ich so oft replizieren. Was möchte ich also mehrere Rollen machen. Was für ein Muster ist, dass Sie mehrere Regeln und jeweils 3 erstellen oder Sie entsättigen können , setzt sie alle in die gleiche Regel. Denn was passieren wird, ist, dass die Regel automatisch vier Räume für Räume für Arten in einer Linie zuweist vier Räume für Räume für Arten in einer Linie dann automatisch und kontinuierlich zur nächsten Zeile wechselt und den Raum liefert verfügbar werden benötigt. müssen wir uns also keine Sorgen machen. Ich bin noch nicht bereit, dies zu duplizieren, da der Code zwischen ihnen ziemlich konsistent sein wird . Also mache ich einfach eins richtig und in dieser Kopie und füge es ein, oder? In der Tat denke ich, dass ich dafür die Bootstrap-Karte verbrauchen werde . Lasst uns also zur Dokumentation springen und nach Karten suchen, die rot sind. Sie sehen also hier ein Beispiel dafür , wie die Karte aussieht. Stellen Sie sich also vor, Sie haben Ihre Galerie und Sie haben dies einmalig. Und du hast drei pro Regel. Und Sie haben Ihr kleines Bild und vielleicht den Namen der Projektbeschreibung und etwas, das sie beißen können oder noch ein paar Details, wir kontaktieren Sie Ihr Boot, es ist richtig. Und habe alle Beispiele für Karten. Ich meine, wenn du das Bild nicht noch einmal willst, mach es einfach. Sie haben diese Version davon, et cetera, et cetera, oder? Also denke ich, dass ich mit dem ersten Beispiel gehen werde, wo wir dieses Bild und den Körper gehabt hätten. Das ist also, hier ist das Zitat, das wir brauchen. kopiere ich einfach. Springe zu unserem Code. Und dann legen wir die Karte in Col Dash 4 . Das ist also die erste Spalte. In Ordnung, wir haben kein Bild. Du kannst gehen und das Bild über Putin holen. Ich nenne diesen einen Einkaufswagen. Das ist also mein erstes Portfolio. Und dann kannst du dieses alte Problem hinterlassen. Und dann kopiere ich das einfach . Noch zwei Mal. Alles klar. Einer ist also ein Einkaufswagen, dieser ist ein Juweliergeschäft, und dieser ist Anwesenheitssystem. Dies sind also meine Projekte , an denen ich theoretisch in meinem gesamten Carrier gearbeitet habe . Zeigen Sie sie also einfach den Besuchern für die Website. Und wenn ich dann zurückspringe und sehe, wie meine Seite aussieht, sieht sie einen Einkaufswagen oder stellt das Anwesenheitssystem wieder her. Basierend auf der Größe dieser Karten? Ich könnte dich wahrscheinlich nicht mehr mitnehmen. Ich könnte mich wahrscheinlich auf andere einlassen. Ich könnte einfach sagen, dass unser Jacob drei statt vier Räume. Und dann füge noch eins hinzu, damit wir diesen Raum füllen können. Alles klar, das sieht ein bisschen nach einer besseren Nutzung des Raums aus. Das heißt „Schwan“. Entschuldigung, zur Kasse. In Ordnung, also bin ich einfach nicht merkwürdig gestärkt Beispiel , wo es verwendet werden soll. Also zeige ich dir nur, wie du das kannst. Und wenn ich dann eine zweite Regel wollte, wenn ich nur alle vier repliziere, schau dir an, was passiert, es erstellt einfach automatisch die neue Regel. Natürlich will ich wahrscheinlich etwas Tageslicht zwischen ihnen. Es wäre also zu diesem Zeitpunkt, an dem die Leute dazu neigen würden, ein separates Div für die Regel zu haben , oder? An diesem Punkt werde ich also diese ID entfernen, werde ich also diese ID entfernen da dies nicht nur eine Rührregel ist. Ich werde auch den Überschuss entfernen, den ich bereits gemacht habe. Also werde ich einfach eine andere Regel erstellen oder besser gesagt daraus, dupliziere diese, da wir sie sowieso die ganze Zeit dupliziert haben. Also refaktoriere ich einfach null, oder? Was von Teilen des Prozesses abgesehen ist. Manchmal macht man ein Design wie ich es gerade getan habe. Ich dachte, ich könnte einfach die eine Regel benutzen und was auch immer, aber mir gefällt nicht, wie es aussieht. Kein Problem. Also div dein Ausweis ist Galerie. Und dann haben Sie innerhalb der Galleria mehrere Rollen mit mehreren Spalten, wie zum Beispiel diesen gesamten Rollcode. Und ich füge es zweimal in die Galerieansicht ein. Also habe ich diese Regel, die die erste Reihe und die neuartige Zyklonregel ist. Und es, wenn ich darauf zurückblicke, es immer noch aus sieht es immer noch aus, es ist immer noch erstickt, aber rate mal was? Weil ich jetzt die beiden verschiedenen Rollen habe. Ich kann leicht Ziegel zwischen den Leben aufstellen und mir das ansehen. Ich kriege das Tageslicht. Das sind also alle Container auf Daves, die dir helfen, Abschnitte zusammenzuhalten und sie dann als eine Einheit zu verschieben. Also habe ich diese ganze Reihe in einem div, das ganze will. Wenn ich also nur einen Bruchpunkt zwischen die beiden Divs setze, dann bekomme ich das Tageslicht, nach dem ich suche. Natürlich haben wir keine Bilder, deshalb sehen wir nur diese defekten Links. Sie können Bilder einfügen und diese nach Belieben verschönern und ändern. Aber ich denke, das ist, ich denke, das ist cool. Ich denke, wir haben ziemlich viel getan und wir haben uns eine Reihe von Optionen angesehen. Wir konnten unsere Regeln in unsere Kolumnen aufteilen. Und wir sehen, wo wir noch mehr aufteilen und die verschiedenen Elemente mischen und abgleichen, die zusammenkommen, um eine Website zu erstellen. Jetzt sind wir es also, ich kann es fertig mit Apple Page nennen. Das Haus sieht so aus und das sieht gut aus für mich. Die Bleibe natürlich wieder Konsistenz, diese Schlüssel, damit Sie nur sicherstellen können, dass alle Überschriften Ihrer Website konsistente Farben haben. Wenn Sie nicht bewusst wollten, dass er eine andere Farbe hat, dann ist das in Ordnung. Das liegt an dir. Wenn wir also wiederkommen, schauen wir uns an, unser Kontaktformular neu zu gestalten. Das wird definitiv eine sehr unterhaltsame Aktivität sein. 23. Redesign Bootstrap Formulare: In Ordnung, also sind wir zurück und ändern unser Kontaktformular. Die Sache an Formularen ist also, dass es Menschen gibt , die es als Tagesjob so herausgefordert wie einen Übergangsritus betrachten, um sicherzustellen, dass sie ein Formular entwerfen können. Formular kann so komplex sein, wie es einfach sein muss, da sich Das Formular kann so komplex sein, wie es einfach sein muss, da sich ein Benutzer auf diese Weise eingeladen fühlt, mit Ihnen zu interagieren. Dies ist das Gateway zu Ihrer Anwendung oder auf der grundlegenden Ebene, auf der wir nicht unbedingt etwas zu sensibles sammeln . Es ist in Ordnung. Wir können das einfach durchmachen. Aber später, als wir uns mit komplexeren Entwicklung in Dotnet befassten, werden Sie definitiv anfangen über Sicherheit insgesamt nachzudenken. Eine angemessen gestaltete Form ist unerlässlich. Im Moment konzentrieren wir uns jedoch nur auf das Layout. Wissen Sie, was ich tun werde , ist zu Bootstrap zu springen und zu sehen, welche Formularideen sie für uns haben, oder? Manchmal möchte man etwas tun, naja, man braucht Inspiration und daran ist nichts falsch. Wenn ich also einfach zur Formulardokumentation gehe, schauen wir uns bereits die Formularsteuerelemente an, hatten uns einige davon angeschaut und wir haben gesehen, dass wir die Formular-Dash-Kontrollklasse haben, die wir verwenden konnten. Aber dann haben wir auch gesehen, dass Sie einige Beispiele haben, wie wenn Sie Dichter der Formularkontrolle springen, sehen Sie, okay, Sie haben ein Beispiel, wo, ich meine, das wirklich alles ist für unser Kontaktformular benötigt wird. Alles klar, also könnten wir uns buchstäblich einfach leihen, diese Gene sind wenige Dinge und wir würden Zitat unzitiert, getan, oder? Wenn ich mir Layouts anschaue, habe ich sicher ein paar nette Ideen für OK. Whoa, wir können ein Raster-Layout haben, oder? Also können wir ein paar Eingabe-Tags mit den Spalten machen , oder? Holy kann bekommen, was man Dachrinnen weiß, um eine Rinnenbreite zu haben, sind sich nicht ganz sicher, was das tun würde, aber das ist in Ordnung. Hier ist ein nettes komplexes Formular mit dem beantworteten Raster-Layout. Wenn Sie also ein E-Mail-Passwort oder vielleicht E-Mail-Kontaktnummer, Adresse und alles wünschen damit sich jemand anmelden oder registrieren kann. Sie haben unzählige Möglichkeiten und Möglichkeiten, dieses Ding zu tun. In Ordnung, also werde ich mir diese komplexen Layouts ausleihen. Es sind komplexe Layouts. Natürlich können wir andere Dinge finden, die wir einsetzen können. Was wir derzeit für unser Formular haben, ist nur der vollständige Name, die E-Mail-Adresse und welche Ihre Fragen. Wenn wir uns dieses komplexe Formular ausgeliehen hätten, könnten wir leicht FirstName, LastName sagen. Ändern Sie dies in die möglicherweise die E-Mail-Adresse, lassen Sie dies die Abfrage sein und entfernen Sie dann diese überschüssigen Zeilen. Und dann haben wir natürlich den Button zum Einreichen. Also bin ich, das mache ich. Ich kopiere das einfach, weil es mir gefällt. Ich gehe zu unserem Code. Und dann gehe ich auf die Kontaktseite und merke auch, dass der Filter etwas geändert werden muss. Also lass mich nur Caleb diesen Nev, geh in den Behälter, entferne den Inhalt, den gesamten Inhalt. Denken Sie daran, dass wir damit enden müssen, dass dies unsere Linie ist. Und dann leihe ich mir die Fußzeile aus, um schnell zu navigieren, was ist das? Es ist nur ein Zusammenbruch, was ich zu diesem Zeitpunkt sehen muss, leihe mir die Fußzeile aus, und dann werde ich sie hier platzieren. Also gibt es kein Label zweimal, wieder einmal, es gibt es in Charlotte. Alle RPGs haben die sehr ähnlichen Elemente. So sieht unsere Seite also aus. Ich brauche diesen Break-Tag zwischen dem Navigationsgerät und dem Container. Da sind wir los. Okay, also fangen wir an zu modifizieren oder zu formen. Also haben wir unser Formular, unsere Eingabe, E-Mail. Alles klar. Ich habe gesagt, dass wir dies ändern werden, um Vorname, Nachname und Adresse als E-Mail zu sein. Anstatt also eins nach dem anderen zu ändern, bin ich bereit, eine strategische Blase zu sein, wenn ich bereits die Eingabe für E-Mail habe. Und ich wollte die Adresse in E-Mail ändern, also kopiere ich einfach das Etikett und die Eingabe für E-Mail. Und ich überschreibe die erste Adresszeile. Beachten Sie, dass es zwölftel heißt, ich bin im Div nicht darüber hinweg, nur die beiden Steuerelemente. Also habe ich das E-Mail-Steuerelement beibehalten. Nein, ich kann weitermachen und dies ändern, den Vor- und Nachnamen. Und natürlich möchten Sie sicherstellen, dass Ihre Etiketten viel das haben, wonach Sie gefragt werden. Also FirstName-Eingabe, FirstName für Arbeit für viel ist die ID, oder? Wenn es also zuerst FirstName für mich eingibt, tut mir leid, ich denke, es dreht sich rot FirstName für. Dann. Wir müssen sicherstellen, dass wir den Ausweis haben, richtig. Dasselbe für diesen Fall Das war das Passwort. Es ist kein Nachname. Also Nachname. Und der Typ war Passwort ist kein Text und Ihr Typ war E-Mail. Es ist ein All-Text dafür. Die E-Mail bleibt weiterhin erhalten. Also FirstName, Nachname, E-Mail, kein Problem. Und dann nicht hier, wir können diejenigen entfernen, von denen wir wissen, dass wir sie nicht brauchen, also brauche ich nichts über Stadt und Postleitzahl und irgendetwas anderes. Ich brauche dieses Kontrollkästchen auch nicht. Jemand splitterte, bewege all diese Dinge. Alles klar, aber dann richte zwei an. Ich werde definitiv modifizieren. Das wird also Input, Query sein. Und dafür gibt es keinen Platzhalter. Wie fast alle dachten, ist dies nicht immun , im Textfeld zu sein. Dies wird ein Textbereich sein. Aber das ist die Frage, oder? Also Textbereich, öffnen und schließen Tag. Kein Problem. Nimmt Bereich ein. Ich gebe dir die Klassenkontrolle. Forenkontrolle als Ihre Klasse und Ihre ID wird also die neue Idee sein, bei der es sich um eine Eingabeabfrage handelt. Ich entferne diese Eingabe. Und das Label hier ist, sobald Sie Ihre Anfrage für die Schaltfläche sehen, habe ich dies umbenannt, da ich San in Abfrage einreichen sah. Darüber hinaus möchte ich, dass es sich über jemanden erstreckt , um es zu blockieren. Und wenn ich mir ansehe, was wir kriegen, also Kinder, also das Auge, okay. Alles klar. Das ist gut. Das ist gut zu sehen. Es bedeutet, dass ich irgendwo auf dem Weg so nicht übereinstimmende Schlepper den Vor- und Nachnamen haben . Die E-Mail-Adresse. Okay. Aber dann synchronisiere ich die Adresse durch und sehe die Eingabe in einigen Dingen. dem Weg ist also etwas schief gelaufen. Wir müssen es beheben und das ist mehr Problem. Also lasst uns versuchen, es zu finden. Und ich schaue und sehe ehrlich gesagt nichts falsch. Also müssen wir wahrscheinlich nur die Bitch aktualisieren und DFS der Aktualisierung, die Seite wird besser angezeigt. Also denke ich, das war nur ein Blip auf dem Live-Server. Aber Sie sehen die Konsequenzen es manchmal nicht richtig schließen, manchmal zeigt die Seite nicht an wenn Sie es manchmal nicht richtig schließen, manchmal zeigt die Seite nicht an, was Sie erwartet haben , und der Editor sagt Ihnen nicht warum. Alles klar, also sei einfach wachsam, wenn du diese kleinen Dinge siehst. Und wenn Sie wachsen, werden Sie sich wohler fühlen und lernen , sie besser zu modifizieren. Aber ich denke, das sieht nach einer guten Form aus. Kann etwas Wortlaut auf die Seite legen, nicht nur die Form rot, sondern wir können wahrscheinlich wie etwas verwenden, das wir am Bolzen oh, Sprechabschnitt haben . Auf der Fotoseite hatten wir diese ganze Reihe Talkboote, wer wir sind, und Kontaktinformationen. Ich denke, das könnte auf diesem Formular auch nützlich sein , es liegt wieder einmal an dir. Sie könnten anderer Meinung sein. Also werde ich das alles einfach über das Formular stellen . Wenn also jemand zur Farm navigiert, sieht er, dass ich das bin, so können Sie mich kontaktieren oder das Formular ausfüllen und Ihre Anfrage absenden. Alles klar, ich denke, das ist nett und einfach zu machen. Jetzt liegt das Ausmaß oder die Modifikationen natürlich liegt das Ausmaß oder die Modifikationen Ihrer Vorstellungskraft und Ihren Zielen überein. Also bin ich nicht präskriptiv, ich gebe Ihnen nur Richtlinien und zeige Ihnen, wie alles mit verschiedenen Bootstrap-Elementen zusammenkommen kann mit verschiedenen Bootstrap-Elementen zusammenkommen um Ihre Seiten zu erstellen. An dieser Stelle denke ich, dass die Website gut aussieht. Lies meine Website. Wenn Sie darauf klicken, sollte es natürlich nach Hause navigieren. Es navigiert nicht. Ich klicke auf „Rendern “ navigiert nicht. Das ist also eine Sache , die ich definitiv ändern möchte , während ich hier bin , um das wahrscheinlich zur index.html zu gehen. Ordnung, und wenn ich es dann in diesem Abschnitt mache, muss ich es definitiv in den anderen machen. Okay, also habe ich gerade den Mod-Spinal gemacht, du solltest in der Lage sein, es einfach zu kopieren und einzufügen und zu ändern, oder? Aber nachdem Sie das Modul erstellt haben, sehen Sie, dass es funktioniert, oder? Und das sind Kleinigkeiten, die die Benutzerfreundlichkeit Ihrer Website verbessern . Und Sie möchten sicherstellen, dass Ihre Benutzer zufrieden sind. Und wer eine gute Erfahrung mit anderen Dingen gemacht hätte man beachten sollte, ist, dass weniger, mehr ist. Okay, wenn wir zurückkommen, checken wir einfach alle unsere Änderungen an GitHub ein und schauen uns dann unsere Live-Website an. 24. Komplettieren und aktualisieren von Live-Website: Jetzt werden wir uns bei GitHub einchecken und ich werde nur ein bisschen Chuck bekommen und schlage vor oder sehe idealerweise, was Sie tun möchten, ist jedes Mal, wenn wir einen Meilenstein erreichen, in GitHub einzuchecken . Es ist also immer gefährlich, wenn du all diese Wünsche machst, all diese Seiten und du gehst und TVA Schnalle, oder? Um zu wissen, dass wir keine Schnalle hatten oder zumindest seit diesen letzten Modifikationen hatten, hatten wir keine Schnallung. Wenn mein Computer zwischen der letzten Lektion, dieser Lektion, weitergemacht hätte, wäre all diese Arbeit verloren gegangen. Es liegt also in Ihrem besten Interesse, dass Sie zumindest nachdem Sie mit der Arbeit an einer Seite fertig sind und sie betriebsbereit haben, und es funktioniert, dass Sie sie in GitHub einchecken. So sparen Sie diesen Raum rechtzeitig. Jedes Mal, wenn Sie in GitHub oder Ihren Quellcodeverwaltungsmonitor einchecken , ist es so, als würden Sie ein Lesezeichen in der Menge an Arbeit erstellen ein Lesezeichen in der Menge an , die Sie erledigen oder tun müssen. Es ist also immer gut , kurze Kegel zu behalten. Und weißt du, du wirst immer eine aktuelle Version haben , um zu einem zurückzusetzen, falls irgendetwas passiert. also mit allem, was gesagt Lassen Sie uns also mit allem, was gesagt ist, unsere Änderungen aktualisieren. Und wenn Sie hoffen, dass Sie es durchgemacht haben und andere Bilder eingefügt und andere Dinge aktualisiert haben. Kein Problem. Ich zeige Ihnen einige der anderen Änderungen, die ich vorgenommen habe. Ein sehr kleiner Modus. Auf den Indexgeschwindigkeiten wurde alles diese Überschriften geändert. Einfach irgendwas. Anstatt zu schlagen, zu schlagen, fixieren Sie auch den Abstand zwischen den Überschriften und dem Schieberegler, indem Sie einfach unser Break-Tag zwischen diesen beiden Divs einführen . Nett und einfach. Auf der About-Seite ging es tatsächlich und habe mein kleines Bild bekommen, das stecken bleibt , um es zu sehen, wie es aussehen kann, wenn du nicht gegangen bist und das Bild bekommen hast. So kann es aussehen. Zu diesem Zeitpunkt habe ich kein großes Bild bekommen, nur. Ich habe eigentlich das kleinste Bild von Pixabay bekommen. Für diesen besonderen hier ist es. Ich habe gerade das 640 große so weiter oder es heruntergeladen , weil ich dieses riesige Bild nicht brauchte , um in diesen winzigen Raum zu passen. Sie sollten also immer sicherstellen, dass Ihre Bildgröße so nah wie möglich an dem liegt , was Sie benötigen. Sie möchten nicht, dass riesige Dateien auf Ihrer Website die Benutzererfahrung insgesamt schnell beeinträchtigen oder die Website geladen werden. Und die andere Sache , die ich getan habe, war, nur diese beiden Schaltflächen zu senden , die Kontaktsprache sind. An diesem Punkt könnte dies wohl redundant sein, da eine höhere falsch ausgerichtete Kontaktseite, belebte BAC sie an die Kontaktseite senden wird. Also eigentlich, was ich hier machen werde, ich weiß, dass es mich anstellt , tatsächlich eine E-Mail auszulösen. Alles klar. Hast du jemals auf Boatman Know-Websites geklickt ? Ich bin darauf geklickt. Es versucht, die E-Mail zu starten oder ruft die E-Mail-Adresse an , an die die Anfrage gesendet werden soll. Das werden wir hier machen. Also springe ich zu meinen Knöpfen und beide gehen zu Kontakten. Aber diese, die ich mich anheuere, werde ich ihm eine männliche 2-Richtlinie geben. Und dann eine E-Mail-Adresse. Ich sage test example.com. Und sie lassen uns sehen, was passiert, wenn wir klicken. Lassen Sie also Feedback, okay, es navigiert, das ist in Ordnung. Ich stelle mich jedoch tatsächlich an, um meinen E-Mail-Client zu starten. Habe kein zusätzliches Du, den vollständigen Client, aber es startet tatsächlich meinen E-Mail-Client und versucht, die E-Mail dorthin zu senden. Siehst du das? Das ist es, was das Ganze, wissen Sie, können Ihre URL versuchen, ein E-Mail-Tool und eine Adresse zu senden. Nett und einfach, oder? Während wir also weitermachen, wie ich schon sagte, wenn manchmal kein Szenario auftaucht, meinen Sie nie etwas tun müssen, wenn es hier hochgeht, es ist gut, bequem und oft ganz zu sein. Sie können die Situation manövrieren und das bekommen, was Sie brauchen. Es gibt jedoch keinen Kurs auf der Erde, der dir einfach alles beibringen wird , was du in einer Sitzung wissen musst. Du musst experimentieren. Man muss bestimmte Dinge alleine begegnen. Und so werden Sie als Entwickler wachsen. Also mit allem, was gesagt und getan wurde, hat das Ding Spaziergänge bekommen, damit es aussteigen konnte. Lassen Sie uns fortfahren und unsere Änderungen einchecken. Also lasst uns einfach so wichtig, um einen Abschnitt zu bekommen. Ich werde Webseiten besseres Styling sagen. Alles klar? Und dann gehe ich einfach weiter und verpflichte mich. Sag ja. Und wir müssen synchronisieren, wenn 23 Punkte ziehen, drücken und auf Sync klicken. Und dann gehe ich zur Live-Seite. Also gehe ich nicht zu GitHub, um zu sehen, ob es funktioniert. Das ist also der Test, den ich gegangen bin, um zur Live-Seite zu navigieren. Ich liebe die URLs immer noch irgendwo und sieh mir das an. Es wird automatisch aktualisiert. Also schon Wege , die diese Phase des Staunens durchlaufen , wo GitHub einfach schwierig ist, unsere Website zu aktualisieren. Nun, ich zeige dir nur, dass das unsere Handarbeit live im Internet ist. Jetzt kann jeder sehen , was Watt ist. Alles klar. Eine andere Änderung, von der ich denke, dass ich es tun möchte, ist, die Navigationsleiste, den aktiven Link jedes Mal zu ändern , wenn wir braten, also lassen Sie mich für den Kontext einfach so weit wie möglich hinzoomen. Sie merken also, dass die ganze Miss irgendwie hervorgehoben und die anderen eine Art von Erwachsenen sind. Und selbst wenn ich auf eine Schraube klicke, ist das Zuhause immer noch hervorgehoben und Kontakt Home ist immer noch hervorgehoben. Und das andere, was eine einfache Lösung ist, ist, dass das Favicon nur auf der Homepage ist , von der ich sicher bin, dass wir das Mittel dafür kennen. Wir müssen nur sicherstellen, dass sich auf jeder Strandkugel 50 Icon befindet . Ich denke, das Problem der Navbar ist ein größeres Problem. Es ist irgendwie kein so großes Geschäft, aber gleichzeitig möchten wir sicherstellen, dass die Benutzererfahrung gut ist. Bisher müssen wir einige JavaScripts einsetzen. Zurück in unserer Codedatei wissen wir, dass wir script.js haben und das ist unsere Skriptdatei für all diese Dinge. Wir haben einige Küstenmethoden, mit denen ich wirklich diejenigen löschen werde, die Proben sind. Nirgends wird etwas tun , das wirklich sinnvoll ist. Und wir werden etwas JavaScript und etwas jQuery mischen , um dies zu erledigen. Und in diesem Sinne möchten wir auch sicherstellen, möchten wir auch sicherstellen dass unsere Skriptdateien auf jedem pH-Wert vorhanden sind. Also kannst du das alles einfach kopieren. Das musste ich tun. Das Bootstrap, die jQuery und die Skriptdatei, Sie können das alles einfach kopieren und sicherstellen, dass es sich auf jeder Seite direkt unter dem Fußzeilenbereich befindet. Auf einem Boot sollte es also unter dem Fußzeilenbereich sein. Es würde all diese Dinge einfach zusammenbrechen, oder? Er kann es dort platzieren. Und das Gleiche für den Kontakt. Okay, damit wir das Skript einfach einmal schreiben können und es wird auf allen Seiten verwendet. Kommen wir also zurück zu unseren Drehbüchern. Ich wollte jQuery verwenden, jemanden, der meine Document Dot Vererbung Syntax macht. Oder wir können einfach sagen Dollarzeichenfunktion, öffnen und schließen, Klammer öffnen und schließen und dann schließen. Also immer öffnen und schließen. Einfach Soda. Wir vergessen nicht zu schließen. Auch wenn der Herausgeber darauf hinweisen kann. Es gibt einige Redakteure, die ER nicht unbedingt zu zweit machen. also einfach wütend neu, damit Sie die Wahrscheinlichkeit verringern können die Wahrscheinlichkeit verringern Fehler basierend auf Ihrer Umgebung zu erhalten. Was ich tun möchte, ist irgendwie dynamisch zu laden , welche Seite die Oktave hat. Für den Kontext habe ich in unserer Navigationsleiste irgendwie entfernt, dass sie bereits in der Navbar gekauft wurde. Du hättest bemerkt, dass der Home-Link aktiv war. Ich glaube, ich habe es immer noch in den Kontakten nur als Referenz. Der Home-Link musste ihr Ziel angeben. Also banden sie das aktive Gras und ein in diesem Gebiet, koreanischen PJ. Da wir den Code aus dem Bootstrap kopiert haben, kam es im Beispiel dazu , dass eine Homepage aktiv war. Auf einer echten Website möchten Sie dies jedoch nicht oder es kann so einfach sein, diesen Code zu nehmen und auf den relativen pH-Wert zu setzen, oder? Wenn ich also auf der Kontaktseite bin, sehe ich, dass der Kontaktlink aktiv ist und das ist der aktuelle Strand. Wenn ich auf der Seite bleiben wollte, schien ich natürlich nicht gut zu sein, nein, das führt zu Variationen auf plötzlicher Navbar. Also bekommt er eine neue Seite, um akribisch genug zu sein , um daran zu denken. Und für mich ist das nur eine harte Wartung. Sie haben also diese Option und diese Option funktioniert, es wird gut funktionieren. Ich wollte jedoch etwas dynamischer sein. Was ich also in der Skriptdatei machen werde, ist zuerst unser Register von allen Pfaden zu entfernen oder zu pj ist, dass ich habe. Lasst uns einfach so weit gehen. Seiten. Und ich bin bereit, eine Arterie zu machen, oder? Seiten haben also ein Array mit den verschiedenen Seitennamen. Indexsprache einer Kugel hat eine Seite. Entschuldigung, lass mich meinen verschütteten roten Kontakt holen. Und dann haben wir externe Links. Aber das ist nicht wirklich eine PHP-Seite, die nur URLs gemacht hat. Das sind also die Seiten, mit denen ich es zu tun habe. Und wenn ich eine weitere Seite hinzufüge, die ich gerade hinzugefügt habe, bringe ich keinen Erfolg weil es auch eine Berg genug Bar ist, also muss ich sie nicht für Institute machen. Alles klar. Also alles, was Atlanta in der Navbar ist, werde ich diese Liste einfach entsprechend erweitern. Das nächste, was ich tun möchte, ist den Pfadnamen zu bekommen. Also var pathname, was, wenn wir path me sagen Position des Fensterpunktes sein würde. Ich glaube, es ist Pfadname. Da sind wir los. Mit anderen Worten, gib mir die URL, oder? Wenn Sie also surfen, befinden Sie sich auf dieser Seite , auf dieser Seite usw. Welche URLs hast du richtig? Nachdem ich all das gemacht habe, werde ich ein nettes kleines Event oder ein Klick-Event einrichten. Also werde ich sagen: Eigentlich denke ich an Gewohnheiten. Dann klicke ich vielleicht ein bisschen mehr Arbeit, weil ich es dann herausfinden müsste. Auf welchen Link wurde geklickt. Versuchen Sie dann , genau diese URL zu finden und bezeichnen Sie auf Refaktor-Lot. Also werde ich es tun, ich werde meine Strategie ändern. Stattdessen werde ich sagen, gib mir den ganzen NovaLink, also nav Link. Und dann sage ich jeweils Punkt. Und erwachsener Schaum Sean, wo ich jeden einzelnen, der wieder iteriert wird, nehme es an, dass er in eine Variable namens i gerät. In Ordnung, also mit anderen Worten, bekomme alles mit dem Klassennav Link. Das sind unsere Klassenbesprechungen. Also nichts ist kein Blinzeln. Novalink ist die Klasse , die jedem Navigationselement entweder Nav-Link, Link gegeben wird , oder? Also hole ich sie alle. So viele Links wie vielleicht am Strand, ich werde sie einfach alle holen und jeden einzelnen durchgehen. Und für jeden, den ich mir ansehe, nenne ich es “. Also habe ich zu diesem Zeitpunkt nachgesehen, ob der Pfadname oder oder einfach die URL bekommen hat, auf der wir uns befinden. Wenn der Pfadthema Punkt enthält, also was auch immer das Pfadthema ist, wenn es irgendwie dieses bestimmte Navigationselement enthält. In Ordnung, also vergleiche ich den Namen des Navigationsgeräts mit dem Namen der Seite. Und wenn derjenige, den ich in irgendeiner Warteschleife bin, ist dieser Name im Pfadnamen enthalten. Was möchte ich dann machen? Dann ist dies eine if-Aussage. Wenn also, wenn das stimmt, dann führen Sie diese Auktion an. Und dann habe ich einen anderen, wenn ich diesen Punktklassennamen sehen soll . Dot beinhaltet, dh wenn das Element, auf dem wir uns befinden, nein, wenn der Klassenname bereits bis zu enthält , möchten wir etwas anderes tun. Also gebe ich dir nur die Bedingungen sind das Skelett. Sie haben also eine Vorstellung davon, was wir erreichen wollen. Wenn also die Seite, auf der wir uns befinden, nicht viel aus dem Index ist, dann möchte ich es tun, oder von der Ironie tut es leid. Dann möchte ich sehen, dass Dalda diese Predigt sagt. Aber wenn es jemals das Element abrufen möchte, auf dem wir uns während des Auslösens bei Ereignis unserer Funktion befinden, haben wir das Schlüsselwort, diese Punktklasse. Das ist also eines dieser dynamischen Dinge, die wir tun können. Was wir im laufenden Betrieb sehen. Bitte füge die Klassenoktave hinzu. Und dann haben wir das gesehen, um etwas zu berühren. Aria aktuelle Seite, jemand, um Attribute hinzuzufügen, auf denen REO steht, aktuelle Seite auch. In Ordnung. Wenn nun die zweite Bedingung wahr ist, bedeutet der Klassenname bereits aktiv ist, dann werde ich nur sagen, entferne die Klasse aktiv. Wir wollen also nicht, dass es zwei Oktaven hat , wenn es bereits bis zum T-Cutoff kommt, aber stellen Sie sicher, dass Sie es hinzufügen, wenn wir an diesem Cart-Strand sind. Also denke ich, dass das erledigt ist. Lassen Sie uns testen und sehen und Sie möchten sicherstellen, dass Ihre Seiten in der Reihenfolge sind , in der sie in der Navigationsleiste erscheinen würden. Mischen Sie sie nicht und passen Sie sie nicht an. Alles klar, also indexiere dann ein Boot und kontaktiere. Also im Code überall Das ist ich hatte das Ganze aktiv fest codiert und der Bereich pj wurde hart codiert. Das werde ich entfernen. Also nein, ich bin allein mit jQuery gegangen um all diese harte Arbeit in dem für mich erwachsenen Bug zu erledigen. Also habe ich es von der Kante entfernt. Und es wird auch aus dieser Seitentabelle entfernt, dem Bereich nach pij. Und dann lass uns das für einen Dreh machen. Also werden wir hier einsteigen, oder auf den Index übertrifft die Highlights, dass wir auf unsere Boote klicken, schauen Sie sich das an. Es hat sich geändert. Wir klicken auf Kontakt, es ändert sich auf einem Boot. Unser Zuhause drauf Gene. Überall wo wir hingehen, siehst du, dass es sich definitiv ändern wird. Also nein, da all das die Morgendämmerung und die Dämmerung der Vollständigkeit halber verändert hat und die Dämmerung der Vollständigkeit halber , bevor ich das Huhn nicht kenne , werde ich nur sicherstellen, dass alle Seiten des Symbols oder des Firmenlogos in ihrem Code enthalten sind, dann springe ich einfach rüber um zu kommen und dann meine Nachricht einzugeben. Ich habe Dynamik gemacht, Links nav, gehe weiter und verpflichte mich lokal. Sie werden es immer sagen. Und dann, nachdem das Komitee abgeschlossen ist, ich einfach, damit es unsere Änderungen vorantreibt synchronisiere ich einfach, damit es unsere Änderungen vorantreibt und dann können wir es vielleicht eine Minuten oder 30 Sekunden wie Stiel geben. Und dann sollten wir in der Lage sein, unsere Änderungen, die sich auf der Website widerspiegeln, in sehr kurzer Reihenfolge zu sehen in der Lage sein, unsere Änderungen, die sich auf der Website widerspiegeln, in . Und da sind wir los. Also navigiere ich bereits und du siehst , dass die Seiten entsprechend geändert werden. Alles klar. Und dann weil es eine Verzögerung gibt, wenn es passiert, weil die Seite geladen wird als die Skriptdrohnen , in denen Sie Feeds sehen, oder? Es ist also ein schöner Effekt, das Beige wird ohne es geladen und sie erkennen, Oh, ich muss das tun. Es sieht also einfach wie ein Fade-Effekt aus. In Ordnung, also denke ich, das ist es für OBC-Code-Website-Aktivitäten. An dieser Stelle hast du viel gelernt. Sie haben, Sie sollten sich zumindest mit der grundlegenden HTML-Syntax wohl fühlen. Aber noch einmal muss man nur üben und die Hälfte der Experimente. Und nur so wächst man in dieser Disziplin wirklich, wirklich.