Introduction aux technologies de site Web - HTML, CSS, JavaScript et Bootstrap

1. Introduction: Je tiens à vous remercier d'avoir pris le temps de consulter mon cours Introduction aux technologies de développement de sites Web. Je suis votre instructeur pour War Williams et je suis développeur web et cours depuis dix ans. Maintenant, dans ce cours, nous allons examiner tous les concepts fondamentaux concepts fondamentaux nécessaires pour vous aider à devenir développeur Web. Nous examinerons le HTML, qui est un langage de balisage qui nous permet de placer du contenu dans des documents qui deviendront plus tard les pages Web qui ont été gravées ou dans leur navigateur. Nous examinons également le CSS, qui est utilisé en tandem avec HTML pour rendre le HTML beau. La combinaison du HTML et du CSS nous permet donc de mettre 1 contenu puis de styliser. C'est comme nous le désirons. Nous allons également jeter un coup d'œil à JavaScript, qui est vanté comme le langage de programmation le plus populaire au monde. Il est très facile à apprendre et c'est la langue la plus populaire utilisée sur presque tout Internet. En plus de cela, nous examinerons les frameworks d' interface utilisateur et nous nous concentrerons sur Bootstrap, qui est le framework d'interface utilisateur le plus populaire, qui est essentiellement une bibliothèque de paquets de CSS les plus couramment utilisés. styles , méthodes JavaScript et code HTML. Afin de fonctionner efficacement. En tant que développeurs, nous utiliserons Visual Studio Code, éditeur de texte open source de Microsoft, qui regorge d'outils de productivité et de plug-ins pour vous aider à maximiser votre temps. Il est très puissant et il est livré avec une intégration pour les langages et frameworks de niveau supérieur. Et cela permet l' intégration de Git. C'est vrai. J'ai mentionné Git. Git est une technologie qui permet aux développeurs de suivre leurs modifications et de maintenir une séquence logique de sauvegardes de chaque version de leur code. Nous utiliserons donc GitHub, l'une des plateformes de contrôle des sources les plus populaires sur Internet, basée sur Git. Et il s'intègre très facilement à Netlify, ce qui nous permet de déployer sur Internet directement depuis notre référentiel GitHub. Know Netlify nous permet de déployer une fois de plus directement depuis GitHub directement sur Internet. Et cela nous permet de le faire gratuitement avec quelques restrictions, mais il vous suffit d'avoir une idée de ce que c'est de construire quelque chose et de le mettre sur Internet. Donc, sans plus tarder, allons-y. Et encore une fois, bienvenue dans Introduction aux technologies de développement de sites Web. 2. Installer le code Visual Studio: Bon, bon retour, les gars commencent avec la Section 1 de ce cours, où nous apprendrons les bases du HTML, du CSS et du JavaScript. Avant de le faire, nous devons configurer notre environnement ne pas avoir à passer en revue quelques bases avec vous avant même de ne pas charger l'outil. Un. Nous utiliserons Visual Studio Code pour ce cours ou pour cette section des scores sortis. Ce Visual Studio Code est un éditeur de texte très, très puissant capable de gérer de nombreuses langues. C'est donc parfait dans mon livre pour HTML et CSS, JavaScript à ce niveau. Cela dit, il se peut que vous ayez déjà certaine expérience ou que vous ayez une préférence sur l'outil. Et il existe d'autres outils tels que des crochets, points IO ou même un bloc-notes, Notepad Plus Plus I. Cependant, nous utiliserons Visual Studio Code et je vous recommande d'utiliser. C'est aussi pour que tous les plug-ins et tous les plugins soient centrés sur les pourboires, de sorte que je suis sur le point de vous montrer, vous pouvez en profiter pleinement. Donc, y arriver est tout simplement qu'il vous suffit d'aller parcourir le point de code Visual Studio.com. Ensuite, en fonction de votre système d'exploitation, vous pouvez télécharger pour Mac, Windows ou Linux. J'utilise Windows, donc je téléchargerais définitivement pour Windows. L'installation pour cela est donc assez simple. Tout ce que vous devez faire Suivant, Suivant, Suivant, Suivant, puis quand il est entièrement installé et que vous l'ouvrez, vous serez accueilli avec un écran similaire à celui-ci, l'écran de bienvenue non, à votre gauche. Et il suffit de vous donner un aperçu rapide de cet IDE sur votre gauche. Vous aurez la possibilité d'examiner et d'explorer, ce qui vous montre tous les dossiers et fichiers de vos projets actuels. C'est donc une chose que vous voulez vous assurer. Chaque fois que vous créez un projet Web, vous créez un dossier dédié à ce projet particulier. Vous pourrez également effectuer des recherches dans tous vos fichiers de code. Lorsque vous les obtenez, vous pouvez vous connecter au contrôle de la source et vous pouvez envisager l'exécution du débogage. Sachez que dans le cas d'un document de site Web HTML, vous n'avez pas à vous soucier de l'écriture et du débogage. C'est plus utile si vous avez un framework JavaScript complexe qui fonctionne avec ou même Python R C sur un autre langage qui doit être exécuté pour commencer à travailler. Non, le dernier onglet ici est appelé extensions. Et je vais juste vous orienter vers quelques extensions que nous allons certainement trouver utiles. J'ai donc un tas d'extensions parce que j'utilise cet outil depuis un certain temps. Mais aux fins de cet exercice, je vous encourage à obtenir un serveur en direct. Vous pouvez donc simplement cliquer sur les extensions, puis taper live server, appuyer sur Entrée, puis il filtrera , vous cliquez dessus, puis vous pourrez installer. Très bien, alors allez-y et obtenez Live Server. Et puis je vous encourage également à obtenir le bootstrap pour l'extension, que j'ai également installé. Ce sera donc plus tard lorsque nous nous habituerons au développement et ainsi de suite. Et notre projet commence à croître. URL en tant que vous n'avez plus beaucoup de temps pour vous concentrer sur les petites choses. Ces outils vous aideront donc à atteindre leur productivité globale. Vous pouvez donc aller de l'avant et faire connaître ces deux extensions. Et quand nous reviendrons, nous envisageons la création de notre tout premier document HTML. 3. Écrivez votre première page HTML - Texte et liens: Très bien, les gars, bienvenue. Dans cette leçon, nous allons commencer par création de documents HTML. Rappelez-vous, j'ai dit que chaque fois que vous êtes un boulon pour faire un projet sur un projet Web ou tout type de projet, crée toujours un dossier ou au moins un endroit réservé ce projet sur les ressources liées à cela. le projet sera stocké. Ce que nous allons faire, c'est que dans Visual Studio Code, nous allons ouvrir un dossier, n'est-ce pas ? Vous n'avez pas le dossier. C'est très bien. Une fois que j'ai tendance à le faire, naviguez jusqu'à l'emplacement où je sais que mes projets seront stockés, puis créez un dossier. Je vais donc simplement cliquer avec le bouton droit de la souris pour dire Nouveau dossier. Et ce serait HTML, je vais appeler ça des bases HTML. Ensuite, après avoir créé le dossier, j'entre et puis je sélectionne ce dossier, je sais ce que Visual Studio va faire, et je reçois cette confiance scannable et c'est très bien. J'ai choisi les auteurs de tous les dossiers. Très bien. Pour être honnête, j'ai parfois oublié cet avertissement avant, donc c'est bien. Très bien, donc ce que le code Visual Studio fera est null définir la solution par défaut sur ce dossier. Ainsi, dans cette Solution, Explorer ou l'explorateur, de toute façon, vous verrez le nom du dossier en haut. Et lorsque vous survolez cette zone, vous avez la possibilité d' ajouter un nouveau fichier, un nouveau dossier, d' actualiser ou de réduire. Nous voulons donc ajouter un nouveau fichier. Aucune règle de base. Chaque fois que vous êtes un boulon pour créer un site Web, un projet Web, un groupe de pages Web, quelle que soit la manière dont vous souhaitez le classer dans pratiquement toutes les langues et dans notre cadre. Votre première page doit s'appeler index. L'extension peut différer car nous faisons du HTML. Ce sera index.html. Il est préférable de le laisser minuscules et tout en minuscules car multiplateforme, certaines plates-formes préféraient les minuscules C, autres s'en foutent, mais tout le monde sera satisfait si c'est minuscules. Donc je minuscule ou un mot minuscule, index.html, qui devrait toujours être votre premier fichier. Maintenant que nous avons créé ce fichier, regardons ce qui se trouve dans ce fichier. Donc, un fichier HTML est un document, n'est-ce pas ? Et comme nous l'avons dit, c'est ce qui est affiché à l'utilisateur. Donc, tout ce que vous mettez dans ce fichier c'est ce qui est réellement affiché à l'utilisateur. Cependant, il y a certaines règles qui appartiennent au trou dans lequel vous mettez du contenu. Donc au niveau très basique, si je disais bonjour tout le monde, rien de trop chic, ça n'a pas l' air très compliqué, non ? Et puis je peux prévisualiser cela à l'aide de Live Server. Il suffit donc de cliquer avec le bouton droit de la souris sur le fichier , puis de dire ouvrir avec Live Server. Ensuite, votre navigateur se lancera et vous verrez Hello World. Et ce qui est cool des bateaux Live Server, c' est que si je mets ces deux côte à côte et que je tape tout ce que j'avais tapé sur l'ascenseur sera automatiquement mis à jour à droite. C'est logique C'est un moment et s'il ne se met pas à jour en même temps, vous pouvez toujours appuyer sur Actualiser ce qui empêchera toujours le camion de ne pas changer ici. Maintenant, si vous le remarquez, chaque chargement n'est pas possible sans étiquette de corps ou de tête. C'est pourquoi je continue à devoir cliquer sur Refresh. Donc, chaque fois que je tape, rien ne se passe. Je dois toucher Refresh money ou ils me préviennent. Donc, est-ce que cela me dit que mon document a besoin de travail ? Mon document ne répond pas aux règles d'un document HTML. Le HTML a donc des directives strictes quant à la manière dont le contenu doit être. Petit numéro 1, nous devrions avoir cette balise appelée nœud de type doc. Le canal déclare essentiellement au navigateur que je suis un document HTML. Et il est particulièrement utile pour les derniers types de documents, qui seraient des documents HTML5, sorte que la plupart des navigateurs modernes sachent, d'accord, je peux mettre dans le rendu HTML5 et savoir exactement comment traiter ce qui se trouve dans ce document. Je vais lui-même dire que nous avons besoin d' une autre balise qui dit HTML. Remarquez maintenant l'anatomie de ces tucks. Vous avez un support d' angle ouvert ou c'est ce qui me définit moins que le signe. Ensuite, vous avez le nom de la balise, puis vous avez le signe supérieur à ou le crochet d'angle droit pour la fermer afin qu'elle soit ouverte. Type de support d'angle ouvert dans le nom de la balise, fermez les crochets inclinés. Remarquez également que lorsque j'ai tapé du HTML, j'en avais un haut, puis un autre est arrivé avec une barre oblique. Donc littéralement, vous ouvrez le remorqueur sur la fermeture proche de la languette. Entre le remorqueur, vous mettez le contenu. Le seul contenu qui soit directement à l'intérieur de la balise HTML est donc une autre balise appelée head. Nous avons donc ouvert la tête de type support d'angle, fermons le support d'angle, puis un autre appelé corps. Maintenant, remarquez qu'il est toujours tourné pour vous aider c'est juste que Studio Code essaie toujours de vous aider. Et il y a tellement de limitations que cela vous aidera par défaut. Ce sont des extensions. Je peux les augmenter en phobie, obtenir ce que nous utiliserions simplement ce que nous avons pour non, c'est bon de développer la discipline consistant à les écrire correctement sans aide extérieure. Nous avons donc la balise HTML, puis à l'intérieur, nous avons une tête ouverte et fermée. J'aurai un corps ouvert et fermé. Comme pour n'importe quel autre document. Vous avez l'en-tête et le corps, puis vous avez également un pied de page. Mais conceptuellement, vous pouvez placer le pied de page à l'intérieur du corps dans cette situation, mais nous avons la tête et nous avons le corps. Voyons donc ce qui se trouvait dans la tête, entre autres choses. instant, je vais juste me concentrer sur le titre. Le titre serait donc ma première page Web. Très bien. C'est le titre du site Web et tout le titre est celui qui s' affiche dans les arrondissements ou lorsque vous ouvrez le navigateur, êtes dans la baignoire et vous verrez comme un tiret Amazon.com, Quoi qu'il en soit, c'est tout ce qu'ils font. Ils ne voient que le titre est Amazon.com, titre est google.com, peu importe ce que vous tapez ici, c'est ce qui apparaît dans le navigateur. Nous sommes portables de voir que le neveu dans le corps, cependant, c'est là que le contenu réel du document vise. C'est donc là que j' aurais tapé mon Hello World. Maintenant que j'ai fait tout cela, permettez-moi de revenir sur mon Live Server et de me rafraîchir et remarquer qu'il n'y a pas de plaintes cette fois de la part de Visual Studio Code, un bateau, quoi que ce soit qui a de la chance. Cela signifie que si je continue à taper et que je dis que c'est ma première page Web, regardez comment fonctionne le serveur en direct. Il a été mis à jour automatiquement pour moi. Et Visual Studio Code ne se plaint pas parce qu'il est maintenant heureux et satisfait d'avoir des documents HTML entièrement structurés. Donc, comme je l'ai dit, ce sont des règles très strictes. Eh bien, une fois que vous avez obtenu ça sous les enveloppes, vous n'avez aucun problème. Notez également dans l'onglet du navigateur que vous verrez ma première page Web. C'est donc ce que nous avons mis dans le titre. Et ensuite, dans le document, il y a nos textes. Maintenant. Oui, nous avons du texte, mais il n'est pas forcément idéal pour nous de simplement écrire le texte. Nous avons parfois besoin d'une structure qui vous emmène vers la gauche, nous le voulons vers la droite. Nous voulons que ce bloc de texte soit différent de l'autre bloc de texte. Nous devons donc utiliser différentes balises afin qu'elles puissent être ciblées en conséquence. Donc oui, j'ai ce texte, mais ce que je vais faire, c'est le mettre dans ce que nous appelons une balise p. Par conséquent, P est abréviation de paragraphe. Et ce qui est génial avec Visual Studio Code, c'est que lorsque vous survolez ces chiens, cela vous expliquerait en fait ce qu'ils représentent. L'élément p représente donc un paragraphe. Ainsi, chaque fois que vous avez un bloc de texte, je vous recommande de le placer à l'intérieur d'un type P. Ensuite, vous pouvez avoir plusieurs balises p qui disent des choses différentes. C'est la balise p. C'est bon ? Oh, c'est la balise P. Très bien. Et vous avez plusieurs façons d'entrer du texte. Donc vous avez le tag p, vous avez aussi ce que nous appelons les hétérozygotes. Donc je pourrais dire en-tête et je vais mettre le Helloworld à l'intérieur des balises d'en-tête, donc c'est h un. C'est bon ? Et ensuite, vous avez H1 à six. L'un est donc le plus grand, six sont les plus petits. Je vais juste les dupliquer. Donc je maintiens tout simplement le contrôle en appuyant sur C. et je remarque que je ne mets pas en évidence la doublure ou quoi que ce soit. Voyez ensuite V et cela dupliquera la ligne pour vous avec un minimum d'effort. Je vais donc faire H2, H3 pour cinq et ensuite six. Donc non, pas cette vente. Je les ouvre et les ferme correctement. Je change celui-ci en H2O et je ne le ferme pas correctement. C'est normal, toujours essayé d'être discipliné. Les navigateurs modernes ont essayé de compenser vos flèches. Donc, si vous regardez dans le navigateur, vous verrez que vous voyez cette taille décroissante comme je l'avais mentionné de H1 à H6, et elle diminue. C'est parce que cela compense le fait que je n'ai pas fermé correctement l'étiquette et que je suppose que je parlais de l'étiquette H2, donc c'est déjà ça qu'il remplit le blanc pour moi, mais c'est non. C'est donc une chose qui me préoccupe. Un bateau prend les éditeurs. Certains d'entre eux sont meilleurs que d'autres pour vous montrer cela, mais ils ne vous diront généralement pas, oh, vous avez une erreur syntaxique. Ils les laisseront simplement manifestés à l' écran de la page, ou ils se manifesteront dans l'une ou l'autre des situations. Et ensuite, vous penserez que votre code est bon, mais il est toujours bon d'être discipliné et de le faire correctement la première fois. Donc, lorsque j'ouvre une balise H1, je la ferme. Si j'ouvre une balise H2, je la ferme. Si j'ouvre un H3, attachez-le. Je ne fais donc que double-cliquer et copier et coller. C'est tout ce que je fais ici. Et puis vous remarquerez une fois de plus, rien n'est mis à jour à l'écran parce qu'ils savaient déjà que je pensais que je voulais dire chaque 234, et cetera, et cetera. Nous avons aussi les balises p ci-dessous, et c'est le cas, d'accord. Examinons maintenant d' autres remorqueurs. Je suis sûr que vous trouverez utile et que ce sont probablement les balises ou objets les plus courants que vous verriez sur les sites Web. Ainsi, en dehors des textes allant du grand au petit, je suis sûr que vous connaissez bien les liens car vous devez cliquer sur un lien pour passer d'une base à une autre, ou cliquer sur un lien pour passer d' un site Web à un autre. un autre, donc vous avez une étiquette appelée la balise d'ancrage. Donc, si vous le survolez, vous le verrez. Si l'élément possède un attribut, il représente un lien hypertexte. Donc un lien hypertexte, c'est le joli mot qui prédit vous aurez un lien ou c'est un mot complet qui vous oblige à avoir un lien, n'est-ce pas ? Remarquez qu'il y avait un attribut appelé dérive. Voyons donc ce qu'est un attribut. Nous avons donc le remorqueur et nous avons établi que ce qui se passe entre les balises open et close est le contenu du sujet. Voyons donc, nous avons cette balise d'ancrage et je voulais le lier à Amazon. Très bien, donc ça va apparaître le mot Amazon qui arrive quoi ? Il n'est pas cliquable, voyez, ce n'est pas un lien, donc c'est le contenu de la balise ancre. Mais je devais être cliquable. Je dois donc ajouter un attribut. Un attribut passe à l'intérieur du champ ouvert, vous indique qu'il s' agit de la balise ouverte. Et je suis passé de la barre d'espace ANS. Et puis je vais taper cet attribut H réf. Il existe maintenant un certain nombre d' attributs qui peuvent être utilisés. Certains d'entre eux sont légaux jusqu'ici non. Certains seront ignorés, autres vont tout gâcher. Très bien ? En général, la plupart du temps, vous verriez comme un attribut appelé ID, qui est comme un nom spécial que vous donnez à cette balise particulière. Très bien, donc je peux voir le lien, un, c'est l' ID de ce lien. Mais alors l'attribut qui fait vraiment le lien common law est l'attribut, attribut. Et ensuite, je devrais taper le lien vers l'endroit où je veux aller. Je vais donc juste mettre l'URL complète, barre oblique de deux-points https www.amazon.com. Très bien, après cela, remarquez comment il change automatiquement. Sachez que le navigateur sait qu'il s'agit d'un lien qui va vers Amazon.com. Et quand je clique assez sûr, c'est pour charger Amazon. Je viens donc de faire un clic central pour qu'il apparaisse dans la autre baignoire. Cependant, si vous vouliez qu'il apparaisse automatiquement dans l'onglet différent parce que si je clique dessus, ce sera juste Bros, nous ne voulons pas que cela se produise avec nos navigateurs, n'est-ce pas ? Nous voulons notre tristesse avec notre site Web. Parfois, nous voulons qu'ils cliquent sur le lien et qu'ils s'y rendent à un pH différent, mais qu'ils ne s'éloignent pas de notre site Web. Donc pour ce faire, je peux voir que la cible est égale à et ensuite dire un trait de soulignement vide. Ainsi, le navigateur sait quand on clique sur le lien, ouvre un autre onglet ou une autre fenêtre que je vois. Les attributs vous permettent donc de donner quelque chose de spécial à la balise que vous avez affaire. Et si je me souviens que nous sommes en train de construire sur notre site Web. Notre site Web est donc une collection de pages Web, n'est-ce pas ? Non, nous n'avons qu'une seule page appelée index.html. Que se passe-t-il si je voulais naviguer entre les pages ? Très bien, je vais donc créer une autre page, et appelons celle-ci un point HTML bateau. Voici donc ma page bateau. Et je vais lui donner la même structure de base et je vais le faire à partir de zéro pour que vous puissiez voir à nouveau. Nous commençons donc par le HTML DOCTYPE, puis j'ouvre la balise HTML, puis nous avons un encart de cela nous avons la tête puis le corps. Donc, dans la tête, je voulais voir une page de boulon. Et puis, dans le corps, je vais juste mettre quelque chose de simple. Et C, chacun, un bateau, un discours. Très bien, c'est donc là que nous aimerions naviguer sur la page de leur bateau. Donc, si je voulais un lien qui y naviguerait et que je vais juste mettre ce lien en haut parce que c'est généralement là que citation de la barre de navigation ne peut pas aller de toute façon. Donc ce lien pour lui permettre d' accéder à ces puces ou à ce discours, je verrai que l'âge ref est égal à un code HTML de point de bateau. Et c'est vraiment tout ce qu'il faut, non ? J'ai juste besoin de mettre dans l'outil AS le fichier vers lequel je veux naviguer. Remarquez qu'il n'y a toujours rien sur la page. Pourquoi ? Parce que je ne lui ai pas donné le contenu. Ce qui se situe entre l' ouverture et la fermeture, c'est le contenu. Je vais donc dire qu'un bateau-bus et ensuite on peut être relié au discours d'Ibotta. Et lorsque nous cliquons suffisamment dessus, nous atterrissons sur notre application . C'est donc ce trou. Vous pouvez lier une page à une autre. Très bien, donc quand nous reviendrons, ce que nous allons faire, c'est regarder quelques autres balises à valeur ajoutée comme comment obtenir une image et comment accéder à une liste et maintenir pour commencer à poser des formulaires. Alors restez à l'écoute. 4. Explorer plus de tags HTML - Images, formes et listes: Bienvenue les gars de retour. Nous continuons d'en apprendre davantage sur les balises HTML de base. Sachez que ce que nous allons faire, c'est jeter un coup d'œil à façon dont nous pouvons intégrer une image dans notre projet. Nous allons donc le faire avec la page À propos, car elle contient beaucoup moins de contenu et de page d'index. Donc pour avoir une image, je vais juste passer sur l'un de mes sites Web préférés qui utilisent, à savoir pixabay.com. Ils ont donc de belles photos gratuites. Très bien, alors prenons le premier que nous voyons. Vous ne voyez peut-être pas la fleur, mais les concepts sont des moyens quelle que soit l'image que nous utilisons, téléchargez et téléchargez gratuitement. Taille assez petite. Allons de l'avant et cliquez sur Download. Et lorsque vous obtiendrez le fichier, vous remarquerez qu'il va bien, va dans votre dossier de téléchargements ou partout où les fichiers téléchargés seront par défaut sur votre ordinateur. Cependant, une fois de plus, lorsque vous créez un site Web, vous souhaitez que tous vos actifs, tous les fichiers associés au site Web se trouvent dans le même dossier et au même emplacement pour faciliter l'accès. Parce que comme vous l'avez vu lors la création de la référence d'âge pour la balise d'ancrage, il était aussi facile que de voir simplement le nom de la page. Et si le spandrel n'est pas dans le même dossier, alors je devrais le qualifier complètement après la barre oblique de deux-points, quelle que soit la barre oblique du dossier, quelle que soit la barre oblique de dossier, quel que soit votre dossier de téléchargements est éloigné. à partir de l'endroit où votre dossier de site Web peut être l'art. Donc, les placer sur le toit du DCM, pour ainsi dire, est votre meilleur moyen de faire les choses facilement. Vous pouvez donc trouver cette image sur votre système de fichiers. Vous pouvez le copier comme par glisser-déposer depuis ce dossier dans votre code Visual Studio. Et il va automatiquement entrer dans ce dossier avec toutes vos ressources Web. Très bien, pour que vous puissiez aller de l'avant et le faire. Et une chose que je voudrais souligner avant d'aller de l'avant c'est que vous pouvez obtenir un seul nom d'image. Mais alors ce nom d'image peut devenir compliqué car lorsque vous devez la taper l'image indiquée et entrer dans le type Watson, Florida dash dot alphanumérique ou autre code, point JPEG. Vous voulez donc toujours essayer de renommer vos fichiers en quelque chose simple ou très indicatif afin de pouvoir les récupérer facilement. Je vais donc juste renommer ce décollage tous ces numéros et l'appeler tournesol point JPEG. Les extensions sont très importantes si c'est P&G, ne les modifiez pas. S'il s'agit de JPEG, ne le modifiez pas. S'il s'agit d'un GIF, ne le modifiez pas. Quel que soit votre nom, il retourne toujours une routine, ce point et ce qui pourrait écrire les points. Très bien, donc tournesol point JPEG ou JPEG est ce qu'ils appellent cette combinaison de lettres. Sachez que nous avons notre image de tournesol à l'intérieur de notre dossier et prête à l'emploi. Vous pouvez accéder à votre page et ensuite utiliser ce que vous appelez une balise IMG. Cette balise est spéciale car contrairement aux autres balises, elle se ferme automatiquement. Il n'a pas IMG ouvert et fermé IMG. Le corps s'ouvre et se ferme, s'ouvre et se ferme. Ischémique. Est-ce que H1, tous ceux que nous avons regardés jusqu' ici, s' ouvrent et se ferment. Toutefois, IMG se ferme automatiquement. Comment dire à l'IMG quelle image il doit afficher ? Eh bien, nous utilisons des attributs. Le premier attribut, et probablement le plus important, est le SRC. Src dit : Où est la source ? Très bien ? La source de l'image serait donc, et ce serait le chemin de l'image. Donc, un bateau est juste à côté du sol, donc la source est le tournesol, non ? Je n'ai pas remarqué que le code Visual Studio suggérera que tout ce que vous essayez d'obtenir le bidonville appuyez sur Entrée et il le fera automatiquement pour vous sur le serveur en direct. live server sera agréable et facile. Maintenant, si vous vouliez ajuster la taille de celui-ci, vous pouvez toujours voir qu'il s'agissait d' un autre attribut appelé width. Vous pouvez donc réduire ces 200, vous pouvez l'augmenter à 900. Bien sûr, il voulait être très prudent avec ça parce que l'image que nous avons eue était sur ce 64 pour acheter quelque chose de pixels. Je ne voudrais donc pas augmenter la largeur à plus que l'image, car elle commence alors à être pixélisée. C'est donc une chose à garder à l'esprit. Lorsque vous choisissez des images à des fins différentes, assurez-vous qu'elles sont suffisamment grandes pour la section dans laquelle vous les souhaitez. Ou s'ils doivent entrer dans une section plus petite, mais c'est impressionnant à cette taille particulière, de sorte qu'il prend moins d'espace sur votre disque dur dans l'ensemble, et il faut moins de temps pour charger le ressources pour un site Web. Imaginez essayer de charger ce fichier B3 mégaoctets qui va vraiment afficher 200 largeurs, non ? Lorsque vous l'avez compressé, il s' agirait probablement d'un fichier de 200 kilo-octets. Vous êtes en colère contre Lord Foster. Sachez, tout comme pour la largeur, vous pouvez également ajuster la hauteur et vous amuser avec celui-ci. n'y a pas grand-chose que je puisse dire à ce sujet, c'est que vous pouvez simplement vous amuser un peu. Vous jouez avec les dimensions si vous en avez besoin. Vous trouverez donc différentes images et essayez de les mettre en place, alignez-les en conséquence. Mais c'est ainsi que vous obtenez une image. Encore une fois, il s'agit d'une balise à fermeture automatique. Il y en a plusieurs. Ensuite, certains d'entre eux que vous n' utiliserez jamais tant que vous n'aurez pas deux âmes. Je veux dire, je ne l'ai pas mentionné, non, mais je sais qu'ils sont là. Et même si je ne peux pas vous enseigner un seul tag, je ne verrais pas qu'il soit possible d'enseigner chaque tag sur chaque scénario dans lequel ils sont utilisés. Je vous encourage simplement à expérimenter et à pratiquer, et c'est tout ce que vous allez vraiment développer vos compétences en développement Web. Maintenant, la prochaine fois que nous voulons regarder, eh bien, il y a vraiment deux balises qui vont de pair parce qu'elles font des choses très similaires seraient des listes ? Non. Vous seriez familier avec les listes si vous utilisez Microsoft Word et qu'il voulait une liste à puces ou si vous vouliez 123, n'importe quelle forme d'inscription, vous pouvez le faire avec HTML et ses participants. Vous n'avez que la balise UL, qui est abréviation de la liste non ordonnée. Et une liste non ordonnée comportera toujours un élément de liste, un ou plusieurs éléments de liste. Non, rien ne devrait entrer dans cette étiquette UL, sauf notre étiquette d'élément de liste. Après avoir mis dans la balise d'élément de liste, vous pouvez devenir fou avec ce que vous voulez à nouveau, mettre une balise p, n'est-ce pas ? Liste, article 1. Vous pourriez mettre un autre type de cravate. Vous pourriez le mettre sur H quelque chose de cible, non ? Vous pourriez mettre une serviette de cinq ans si vous le vouliez. N'importe quel type de type peut disparaître, mais vous ne voudriez jamais mettre cette étiquette h5 directement dans cette liste, dans cette étiquette UL rhabdo parce que regardez la neige différente, cette balle disparaît et je suis sûr Il va à Crayola, il s'agit de quelque chose d'autre. Donc, comme je l'ai dit, cela peut ne pas vous dire dans l'édition terrible de ces erreurs. La plupart du temps, cela se manifestera certainement à l'écran. Très bien, donc vous voulez simplement suivre les règles. Ally UL, désolé, ouvrez la liste non ordonnée, puis vous commencez par l'élément de liste, puis vous mettez ce que vous voulez dans l'élément de liste. Donc p tag, 59 ans, placez une image dans la balise d'élément de liste. Ça n'a vraiment pas d'importance. Très bien, alors nous voulons juste savoir que l'autre version de la liste serait, OH, qui serait la liste ordonnée. Donc, quand on veut 1, 2, 3, on y va. Ensuite, nous voyons OLC. Vous voyez que ces deux-là sont vraiment identiques. Ils sont comme des cousins très proches, non ? Vous allez le faire. Et l'huile, ils ont tous deux la même structure à l'intérieur. Les deux éléments de liste, puis tout ce dont vous avez besoin se trouvent à l'intérieur de cette balise d'élément de liste. Savoir. Et jetons un coup d'œil au prochain billet majeur, qui est la forme. Donc, ce que je vais faire crée un nouveau document, et celui-ci s' appellera contact point HTML. Contacts points HTML. Je vais créer la même structure par Noaa. J'espère que vous auriez pratiqué une expérience de 10 ans familière avec elle, la tête et le corps à ce stade aussi, je m'excuse sincèrement d'avoir oublié de mentionner que vous devez sauvegarder votre document à chaque changement. Je suppose que vous l'avez compris. Je sais, mais c' était un oubli de ma part. Je m'excuse. Mais vous devez voir les changements que vous apportez avant un serveur en direct ne choisisse les adultes et les vieux. Une chose que j'ai faite parce je ne me souviens pas toujours de voir si je suis comme, oh, non, je n'ai pas mentionné que vous devez économiser. C'est parce que j'avais activé l'enregistrement automatique. Ainsi, dans Visual Studio Code, ils vous permettent de dire enregistrement automatique. Donc, quels que soient les changements que vous apportez seront reflétés, c'est pourquoi mon serveur live se met toujours à jour parce qu'il enregistre toujours automatiquement dans le sujet des bogues. Je m'excuse donc de ne pas avoir mentionné cela avant la nulle. Mais allons de l'avant. avons donc le titre à l'intérieur de notre page de contact. Donc, ce sont des tomates amusantes. Et puis dans le corps, je vais mettre une balise H1 qui indique le canal de police, afin que quiconque atterrit sur cette page sache sur quelle page ils se trouvent ? Maintenant, généralement un formulaire de contact a bien, forme, un contact de parole est hors ferme. Voyons donc comment nous formulons des formes et des formes sont vraiment faciles. Mais je dois mentionner que les formulaires constituent la passerelle entre un utilisateur et vos systèmes internes. Parce que chaque fois qu'un utilisateur saisit quelque chose dans le formulaire ou entre quelque chose dans le formulaire, puis cliquez sur Envoyer. Ils envoient en fait de la thêta à votre système. Plus tard, lorsque vous atteignez un niveau de développement plus élevé et que vous construisez des bases de données, construisez des interfaces Web au-dessus d'une base de données. Et comme lorsque nous effectuons le développement de base ASP.Net, nous examinerons certaines fonctionnalités de sécurité dont nous avons besoin pour nous assurer d' intégrer nos systèmes. Cependant, pour l'instant, allons simplement de l'avant. Donc pour obtenir le formulaire TO, nous avons la balise de formulaire, n'est-ce pas ? Et j'ai dit simple, assez simple. Permettez-moi donc de taper cela de façon appropriée. Formulaire. Non, la forme a trois types d'étiquettes qu'il peut prendre. Disons simplement qu'il y au moins quatre types de cibles, non ? Nous avons ce que nous appelons le label. L'étiquette est importante car elle nous indique ou nous permet de voir. Le champ est sur le point d'être modifié. Permettez-moi de bien comprendre mon orthographe. Et remarquez que j' essaie de tout faire en minuscules, non ? Les étiquettes sont quels champs, donc ce serait FirstName, c'est mon étiquette, n'est-ce pas ? Ensuite, je vais dire quel contrôle je veux accepter le prénom et quel serait le meilleur contrôle si vous dites zone de texte, alors vous avez raison sur l'argent parce que d' habitude quand vous êtes en tapant votre nom, c'est du texte. Et vous obtenez une boîte qui vous permet de saisir du texte. C'est donc une zone de texte. Donc, vous pensez probablement, d'accord, donc il y a une zone de texte que Doug sait qu'il y a une différence. Vous disposez d'une balise d'entrée. Très bien. Ce qui est également à fermeture automatique. Sachez que l'entrée prend des attributs qui l'aident à définir notre identité sonore. Je dirais donc que le type est égal à 0. Et ensuite, nous voyons ici toute la liste des types d'intrants, n'est-ce pas ? Donc, à partir du haut, il peut s'agir d'une case à cocher colorée, fait toutes ces choses merveilleuses. Mais pour le prénom, celui qui convient le mieux serait la zone de texte. Par conséquent, le type est égal au texte. Très bien, je vais vous montrer une autre chose. Rappelez-vous que j'ai mentionné précédemment l'attribut ID. C'est un nom spécial que nous donnons à cette étiquette. Eh bien, si je vois fname, cela me permet d'utiliser cette étiquette et cette étiquette C pour. Et puis je lui donne le même F9. C'est bon ? Et bien que l'attribut important qui va avec les balises d'entrée, surtout lorsque vous traitez code côté serveur soit le nom. Vous direz donc que le nom est égal. Et si nom, le nom est très important pour quand vous allez mettre l' intelligence en utilisant Python, PHP, C-sharp, comme nous allons le faire avec Dotnet Core. Il permet à ce langage de voir réellement la valeur provenant de ce contrôle particulier, de ce contrôle particulier. Nous avons donc le formulaire partout où l'étiquette est libellée, nous avons une zone de texte. Donc, FirstName, c'est fait. Nous pouvons faire une adresse e-mail. Voyons donc que le nom complet au lieu des prénoms est également un fname. Fname peut être un nom complet, non ? Celle-ci, voyons voir, un courriel. Je veux donc l' adresse e-mail de l'utilisateur qui essaie de nous contacter . Et puis je vais voir que le type est égal à lo et voici, il y a un type d'e-mail, l'e-mail ID. J'appelle juste ces e-mails. J'aurais pu pleinement qualifier son adresse e-mail initiale et l'ID et le nom ne doivent pas nécessairement être la même chose. Très bien. Je joue juste un peu ici. Permettez-moi d'élargir complètement ce code vacant. Très bien, nous avons donc notre nom complet, nous avons notre adresse e-mail. De quoi avons-nous besoin d'autre sur notre formulaire de contact ? Supposons que vous ayez besoin de la requête. Donc encore une fois, plus de cette étiquette et je vais l'appeler requête ou plainte, quoi qu'il s'agisse. Et le travail va dire requête. Sais-tu que la requête serait quel serait le paragraphe vu ? Je suis mécontent à cause de cela. C'est pourquoi je contacte. Vous voulez leur permettre de lire l'essai qu'ils sont venus ici, de toute façon, lire. C'est donc là que vous allez voir la zone de texte, car elle prend une zone vous donne un espace beaucoup plus grand pour écrire, prend donc la flèche. Et encore une fois, nous n'avons pas besoin type car ils savent déjà que c'est ce qui prend de la surface. Mais nous pouvons lui donner une pièce d'identité et je dirai simplement requête. Et encore une fois, nous voulons lui donner le nom pour que nous puissions voir la requête. Très bien, maintenant jetons un coup d'œil à tous nos efforts acharnés jusqu'ici. Donc, ce que je vais faire, revenez à l'index et créez une autre URL. Et celui-là, je vais appeler contact dot HTML. Et c'est amusant. Parlez-nous. Pas de bonne règle générale avec la conception du site Web et le site Web car il y a plusieurs documents, plusieurs pages, vous voulez pouvoir accéder de n'importe quelle page à n'importe quelle page à partir d'un autre pH, n'est-ce pas ? Il vous faudra donc ajouter une nouvelle balise d' ancrage qui fait référence à la page d'accueil. Très bien, donc oui, c'est la page d'accueil qui fait référence la page d'accueil comme tout ce que vous seriez sur la page d'accueil de nos sites Web. Vous vous connectez. Les niveaux de gris vous ramènent simplement à la page d'accueil. Il n'est allé nulle part, n'est-ce pas ? Nous avons donc ce lien vers la page d'accueil, mais nous pouvons ensuite copier cette section. Très bien, je ne veux pas faire, c'est juste utiliser un var ou ce que nous appellerons ça un tuyau entre les deux. Donc, si vous utilisez un clavier occidental, cela sera décalé sur la barre oblique inverse, qui se trouve généralement au-dessus du bouton Entrée qui vous donne ce tuyau, n'est-ce pas ? Donc, séparez-vous dans les balises d'ancrage. Et puis je vais mettre ces balises d'ancrage sur chaque page, n'est-ce pas ? Donc, les deux contenus, voir sur quelle page je suis. J'ai cette navigation de fortune par cela avec enfuissement pour me déplacer entre les pages. Vous voyez ça ? C'est ainsi que ces concepts se réunissent pour le design de la hanche, non ? Petit à petit, vous voyez comment tout interconnecte nœud et le nœud que j'ai réglé cette navigation entre les pages. Si je me rafraîchis ou que je reviens naviguer, je verrai que si je clique sur Accueil, je suis dans l'ensemble , mais regardez ça, je peux trouver qui je peux atteindre ce maltose. Je peux rentrer chez moi, je peux aller à Contact Us, regarder ça, puis je peux aussi retourner sur un bateau. Concentrons-nous sur un contact avec nous dès maintenant. Nous avons donc nos manuels scolaires C'est cool. Regarde ça, prend des boîtes, puis on peut écrire notre requête. C'est bien, mais je ne suis pas tout à fait satisfait de la mise en page et je suis sûr que vous ne l'êtes pas non plus parce que je suis sûr que vous n'êtes pas habitué à voir ces formulaires tous en une seule ligne comme ça. Très bien ? Donc, ce que nous voudrions faire, c'est en place une rupture entre eux, n'est-ce pas ? Donc, pour obtenir l'alerte Brick New TAG, nous avons la balise BR à fermeture automatique. Br veut juste dire BreakLine, non ? Vous représentez simplement un résumé. Ainsi, lorsque vous appuyez sur Entrée dans Microsoft Word, vous savez que vous tapez, tapez, tapez, saisissez, vous devez passer à la ligne suivante. Vous appuyez sur Entrée, puis saisissez à nouveau. BR est donc ce qui vous permettra de placer ligne de frein en brique entre les blocs de contenu de votre page. Notez cependant, sur la page d'index que nous n' avons pas eu à rompre lorsque nous avons fait le H1 et le P parce qu' ils sont en quelque sorte équipés de leur propre mécanisme de freinage. Donc, à l'intérieur d'une balise P, si je voulais avoir un bloc de texte, puis un autre bloc de texte, mais à l'intérieur de la même balise p, je pourrais simplement injecter cette balise BR. Et je vais vous le montrer rapidement. Disons donc que je l'ai fait, c'est ma première page Web. Je peux dire que c'est ce que je veux dans la nouvelle ligne. Ce n'est pas comme je l'ai dit que si je retourne à ma page d'index, remarque que tout est là-dedans. La ligne, si j'ai appuyé sur Enter stint dans la Pieta, voici une balise P ouverte et fermée. Et mettons trois espaces pour les espaces entre eux et j'y retourne, sans changement, n'est-ce pas ? C'est toujours dans un œil. Et c'est pourquoi nous avons besoin de ce temps de pause pour ensuite lui dire d'aller à la ligne suivante et autant de pauses que nous mettons, autant de lignes qu'il introduira, mais nous sommes toujours dans la scène. Étiquette P. Très bien, donc c'est tenir ce break tag fonctionne vraiment pour nous dans ces situations. Revenons donc à notre formulaire Contactez-nous. Nous avons dit le nom complet et votre nom complet. Donnez-moi un bref, puis le prochain label. Saisissez ce que vous devez entrer, donnez Maverick, puis Entrée. Que devez-vous entrer ? Donc, notre page Contactez-nous ressemble à ceci. Non. Eh bien, il y a différentes interprétations de ce à quoi les formes peuvent ressembler. Je ne suis toujours pas satisfait de celui-ci. Je ne veux pas non plus que mes étiquettes et mes zones de texte soient mes commandes sur la même ligne. Devinez ce que je peux faire. Introduisez une pause. Vous voyez, c'est sympa et simple. Alors étiquetez, donnez-moi une nouvelle ligne, puis donnez-moi la zone de texte, donnez-moi une nouvelle ligne, puis donnez-moi le niveau suivant et vous arrivez ça, c'est vrai. Donc, en faisant cela, on y va, ça semble beaucoup plus beau. C'est une forme bien plus belle que ce que nous venons de nulle. Et si nous voulons plus d'espace, nous ne faisons que franchir la ligne deux fois entre les deux. Donc, le nom complet et ensuite nous avons un peu de lumière du jour entre eux. On y va. Très bien. Nous pouvons bien lire. La prochaine chose maintenant serait un bouton. Si vous regardiez et qu'ils ont dit : OK, eh bien, où est le bouton ? C'est bien. Vous auriez besoin d'un bouton appelé Solis. Vont-ils se soumettre ? Ils ont besoin d'un bouton de soumission. Donc sur tout cela, je peux simplement mettre deux briques de plus et ensuite je peux voir type d'entrée est soumis. Très bien, alors je peux dire que le volume est égal à, et cela me permet de dicter ce que je veux imprimer sur le livre afin que je puisse dire soumettre votre requête et l'écrire aussi verbeuse que vous doit être dans le moment. Il se ferme automatiquement. Donc, barre oblique et le crochet aller et nous y allons , soumettez votre requête. Sachez que chaque formulaire contient ce que vous appelez une action. Je suis donc sûr que d'autres sont disponibles lorsque vous remplissez un formulaire et que vous cliquez sur Soumettre, cela va généralement à une autre page. Cela ferait généralement l'une des deux choses suivantes. Désolé. Il vous indiquera que le formulaire que vous avez envoyé n' est pas valide car les données ne répondent pas à certaines exigences soit il ira sur une autre page jusqu'à ce que les données aient été enregistrées avec succès. Je peux donc dire que l'oxygène de forme est égal à et ensuite je peux abandonner la page. Donc, si j'ai dit que la vente aux enchères agricoles est égale à index.html, cela signifie qu'elle ira la page d'index une fois qu'elle aura été soumise. Où que j'ai mis ici, c'est l' outil de navigation. Donc, si je dis soumettre votre requête, remarquez qu'elle vient de naviguer. Nous ne serions généralement pas comme la mise en page d'index. Succès, PJ ou quelque chose qui avait à dire sauvé avec succès. Mais je n'ai aucune sorte de discours. Je reçois ce qu' on appelle un 40 pour flèche. Et il voit que la page ne peut pas être obtenue. Notez également que les noms des contrôles que j'ai ajoutés au formulaire sont répertoriés dans l'URL. C'est ce que vous appelez une chaîne de requête, n'est-ce pas ? Donc, si vous allez sur Google ou YouTube et que vous tapez des chatons mignons, je suis sûr que ce que vous allez voir est la recherche oblique de youtube.com. Avec ce point d'interrogation. Alors peut-être que la recherche est égale notre requête de recherche est égale à ce que vous avez saisi. C' est donc tout ce qui fait vraiment, même s'il s'agit d'une forme. Très bien ? Les formulaires sont donc partout chaque fois que vous saisissez des informations et que vous cliquez sur un bouton, vous avez envoyé un formulaire. Donc, juste en guise de test, je vais juste mettre le nom de quelqu'un, soumettre la requête et voir si le nom est égal au nom que je viens d'entrer. L'adresse e-mail est égale à l'adresse e-mail que je viens d' entrer sur les requêtes vide. Je n'ai pas saisi de requête. Je vous montre juste ce qui se passe. Il s'agit donc de conserver ces langues côté serveur. Non, je peux dire me procurer cette variable et quelle que soit la valeur possible. Tout cela est envoyé chaque fois que vous soumettez un formulaire. Laissez-moi donc revenir en arrière et configurer la page de réussite pour la soumission de notre formulaire. Je vais juste dire un nouveau dossier. Une autre façon de créer un nouveau fondu consiste à cliquer avec le bouton droit de la souris dans l'explorateur. Donc, si je clique avec le bouton droit de la souris, j'ai la même option pour créer un nouveau fichier ou un nouveau dossier. Donc je vais dire un nouveau fichier, je ne veux pas voir le succès point HTML puis les sous-points HTML. Encore une fois, je veux qu'il puisse naviguer où que ce soit sur mon site. Je vais donc lui donner le même squelette HTML. Et à ce stade, nous avons écrit le squelette plusieurs fois. Visual Studio Code, encore une fois, étant l'outil de productivité qu'il est, nous permet de simplement dire deux-points HTML cinq et de regarder ce qu' il génère pour nous. Nous voyons donc un peu plus que là où vous allez encore, mais ne vous découragez pas par cela parce que c'est très, très, très pratique, n'est-ce pas ? Donc nous voyons toujours notre doctype, nous obtenons toujours notre balise HTML. Je ne serai pas doté d'un attribut où il indique au navigateur dans quelle langue le site Web va se trouver. Nous obtenons des balises Meta que nous examinerons plus tard. Donc, comme presque tous les FADH, ils sont destructeurs ou analogiques, il suffit de les supprimer. Ensuite, nous obtenons le titre et le corps. Le titre ici serait donc un succès. Et dans le corps, je vais mettre dans les liens de la barre de navigation, citer des liens de barre de navigation sans guillemets, afin que nous puissions naviguer vers où nous voulons aller. Donnez-lui la balise H1 pour voir que vous avez réussi ou que vos données ont été considérées comme pécheuses, ont été enregistrées. Très bien, essayons encore une fois notre formulaire. Je vais donc mettre ça, et c'est ma question. Soumettez, vos données ont été enregistrées. Sachez donc que notre succès fonctionne encore une fois, si vous regardez dans la chaîne de requête, vous verrez la requête avec les données envoyées. À partir d'ici. Je peux choisir de faire un peigne. Je peux choisir d'aller sur Amazon, je peux choisir d'aller partout. Vous voyez donc que les formulaires ne sont pas très compliqués non plus. Il existe de nombreux types de contrôles de formulaire que vous pouvez utiliser. Vous pouvez aller de l'avant et explorer, simplement mettre en type, et ils peuvent regarder ce que vous obtenez pour chacun de ces types. Je viens de vous montrer que les plus courants. Mais vous pouvez obtenir un numéro de téléphone, vous pouvez obtenir une plage de recherche, passe, toutes sortes de types de contrôle. Je vous encourage donc à créer un forum pour raisons plus complexes et à expérimenter les différents types de contrôle qui existent. 5. Encore plus de tags HTML - Tableaux, commentaires et styles en ligne: Salut les gars, bienvenue. Nous sommes donc toujours en train de regarder le HTML et certaines des balises les plus populaires ou les plus utilisées. Et la prochaine étape, c'est les tables. Les tables peuvent donc être un peu compliquées. Les formes et les formes sont généralement les plus compliquées, mais c'est pourquoi nous sommes ici pour éliminer ces obstacles dans nos connaissances. Jetons donc un coup d'œil à ce que sont les tables et nous utiliserons la page HTML du point des bateaux pour cela. Je vais juste me câliner. Ainsi, dans Visual Studio Code, si vous survolez les boutons, vous voyez des carottes et vous pouvez simplement cliquer sur les remorqueurs de réduction. Voyez ça. Commençons donc là-dessus. C'est donc un début de table. Oui, vous l'avez deviné. Nous avons une table ouverte et fermée. C'est son article. Non, un tableau ressemble à une feuille de calcul Excel ou je suis sûr que vous êtes habitué à ce qu' est un tableau sur un bout de papier si vous avez des lignes et des colonnes. Conceptualisons maintenant que tout d'abord, il commence par notre rôle. Donc, à l'intérieur de la table, aucun autre contenu n'entre dans la table. Mais pour un TR, qui est abréviation de table, rôle. Très bien, rôle des cellules dans un tableau. Non, je roule a des colonnes ou je préfère s'appeler des modes c'est qu'ils s'appellent aussi eux-mêmes. Pourquoi s'appelle-t-on des cellules ? Parce que ce sont littéralement des unités individuelles. Ce ne sont pas forcément les colonnes qui descendent. Le rôle comporte des cellules. Donc, vous placez simplement une cellule, une tuberculose ou des données de table dans le rôle indique beaucoup de cellules ou comme vous le nettoieriez probablement pour les analyser , car vous allez mettre autant de balises td. Donc, si je devais être une annonce ou peut-être le nom, l'âge et disons la date de naissance de plusieurs personnes hors du personnel de notre entreprise, un bateau dédié à cette page, écrivez une balle de discours. Nous listons donc tous les membres du personnel. Permettez-moi donc de quantifier cela et de le mettre dans une balise h3 qui dit des détails sur les membres. Très bien. Donc, les détails du personnel, Supposons que nous ayons eu un TR et que ce que vous voudriez faire est de donner une rubrique pour les données qui seront ci-dessous. Donc, au lieu de TD, nous allons commencer par th. C'est l'abréviation de l'en-tête de table, non ? Parce qu'en général, vous avez une règle qui indique ce que chaque colonne représente. Un nom, un prénom, un prénom, un âge de naissance. Eh bien, pour que lorsque vous êtes sur la cinquième colonne, vous vous rappelez, Oh, c'est ce que cela représente, n'est-ce pas ? Nous allons donc avoir un nom. Nous allons avoir, disons quelque chose de simple, l'image et l'identification du personnel. Très bien, c'est notre tableau, c'est notre premier rouleau, et c'est l'ensemble de colonnes pour toutes les cellules qui se trouvent dans les autres lignes. Donc c'est le premier rôle de la deuxième règle ou du membre du personnel, j'ai juste un autre TR puis ouvrir TD et ensuite le nom ici serait Lewis. Très bien. Ce que je vais faire, c'est simplement utiliser le CV de contrôle, ce petit raccourci pour dupliquer des lignes. Lewis a 29 ans et sa carte d'identité de personnel est 77. y a quelque chose et tout ça. Tu te souviens ? Donc, autant de membres du personnel, autant de lignes que d'argent vendent des données, je peux simplement continuer à copier et coller et à modifier les données. Ce n' est évidemment pas très dynamique, surtout si cette otan doit provenir de la base de données des employés. Donc, lorsque nous aurons l'occasion de l'utiliser Dotnet Core, nous examinons comment nous automatiserons exactement toute cette génération. Qu'est-ce qui est étranger ? Oh, c'est vraiment de l'argent. Eh bien, alors laissez-nous juste Hannah, comment Milton et ce problème est 32, et son identifiant serait l'outil 234. Très bien. Jetons un coup d'œil à notre page à propos pour que je puisse simplement cliquer avec le bouton droit de la souris et dire Ouvrir avec Live Server. Et voilà, et il y a notre table en bas. Ce que je voulais faire, c'est de commenter tout ce qui n'est pas directement lié à cette activité. Il s'agit donc d'un commentaire documentaire. Et commenter signifie que le code reste, mais il l'ignorera lorsque nous parlerons de commentaires. Donc, pour faire un commentaire en HTML, ouvrez le crochet d'angle. J'utilise l'exclamation saine d'esprit, et j'ai deux tirets et un avis que cela a en quelque sorte complété cela pour moi. Quoi qu'il y ait à l'intérieur de cette flèche, quel Visual Studio ? La représentation en texte vert sera ignorée. Donc, même si je me rafraîchis, vous ne verrez pas tout ce charabia se faire sur la plage, n'est-ce pas ? Donc, si je veux avoir un peu de code ignoré, suffit d'ouvrir le commentaire et ensuite vous voyez que tout cela est en vert. Ensuite, je terminerai le commentaire au point où je voulais être ignoré. Donc tout cela n'est pas un commentaire que je peux simplement effondrer. Quand je me rafraîchis, vous voyez que tout cela est ignoré, l'image a disparu, listes ne sont plus que la balise H1, le commentaire, et la balise h3 et la société sous les commentaires. Très bien, donc c'est à lui, quoi ressemble notre table ? Pas très attrayant, mais bon, donc nous avons un nom, avons de l'âge, nous avons une carte d'identité du personnel. C'est la règle de l'en-tête, non ? Et alors, c'est ainsi, ainsi, ainsi, et ainsi de suite. Très bien, pour que la table puisse utiliser un peu stable, peut utiliser un peu d'embellissement. Quel est le niveau le plus élémentaire ? C'est ainsi que vous créez une table ? Non, j'ai mentionné le style et dans l'introduction, vous ne vous souvenez pas que j'ai mentionné CSS. CSS est donc l'abréviation des feuilles de style en cascade. Et chaque fois que nous voulons que notre code HTML recherche, nous utilisons en particulier les services de CSS. Donc, quand j'ai dit que la table avait besoin d'un certain style, cela signifie que je peux ajouter du CSS aux documents afin que je puisse déterminer à quoi devrait ressembler la table. C'est donc une bonne ségue pour introduire des fesses debout. Ensuite, nous allons simplement l'examiner à un niveau très élémentaire, puis revenir et l'examiner plus en profondeur. Donc, pour styliser la table, la première chose que je vais faire est d'ajouter un attribut appelé style, n'est-ce pas ? Non, la syntaxe qui entre dans cet attribut est telle que vous avez la première chose à taper est un sélecteur, puis vous avez un deux-points puis les valeurs ci-dessus, donc je les appelle homologues de valeurs de sélecteur. Donc, le sélecteur est que voulez-vous changer ? Quel bateau cette bascule que vous voulez changer, ils veulent tracer, changer la couleur. Vous souhaitez modifier la couleur d'arrière-plan. Voulez-vous modifier la bordure que vous puissiez voir tous ces sélecteurs qui sont des éléments potentiels que nous pourrions modifier. Ils ne sont pas tous applicables parce que je ne changerais pas vraiment le voyons. Je n'aurais pas vraiment changé la tentative de trouver quelque chose à propos de cette table. Je ne changerais probablement pas. Mais je ne modifierais pas la taille de police de notre table. C'est vrai ? Je changerais davantage une taille de police d'une balise p ou de quelque chose qui contient des textes, non ? Mais je ne changerais pas nécessairement la taille de la police de la balise de table. C'est là que la valeur sélectionnée que vous utilisez est relative à la balise que vous utilisez. Je voulais donc changer, voir la largeur de la table. Ensuite, je lui donne une valeur. Je peux dire 100%, qui signifie que je veux que ce tableau s' étende aussi loin que possible sur la page. Revenons donc à ce sujet. Et puis nous voyons ici que c'est à ça que ça ressemble, non ? Le nom est donc centré, sorte que la balise th passe automatiquement au centre. Mais si vous regardez bien, c'est là que commence le contenu de ce nom, c'est là que commence celui-ci, c'est là que commence ce site. Donc, si je voulais que tout soit aligné au centre, je pourrais également mettre dans un style qui dit aligner le texte au centre. Je pourrais donc dire que stat est égal à la largeur 100%. Ensuite, il s'est passé plusieurs fois, assurez-vous de les séparer par un point-virgule. On pourrait aussi dire que le centre d'alignement du texte. Je vous dis donc d'aligner tout le texte dans le centre du tableau, n'est-ce pas ? Je vous montre donc que tout le CSS fonctionne chaque fois que nous voulons modifier apparence de quelque chose sur la page, nous commençons par cette statistique. Ok, donc quand nous reviendrons, nous regarderons plus en profondeur. J'ai dit que la balise de style nous permet dicter l'apparence et la convivialité de nos pages. 6. Introduction à CSS - Feuilles de style en ligne et internes et en dehors: Dans la dernière leçon, nous examinons CSS et son fonctionnement. Et nous avons vu que la largeur la plus simple appliquer CSS consiste à utiliser l'attribut style. Nous allons donc jouer avec notre page d'index et explorer des attributs entiers nous aide à coiffer les différents blocs de textes ou différentes zones ou différents éléments soit la façon dont vous voulez y penser, mais nous pouvons les cibler individuellement. En revenant à notre code, nous pouvons voir que sur la page d' index, nous avons toutes ces balises d'en-tête. Et si je voulais que l'étiquette H1 soit rouge ? Je peux donc facilement dire que le style est égal au style de vantardise est égal à, c'est nos attributs. Ensuite, nous disons, qu'est-ce que c'est, un bateau, cet élément que nous aimerions sélectionner. J'aimerais sélectionner la couleur, puis un deux-points, puis j'aimerais changer cette couleur en rouge. Ainsi, avec CSS, vous pouvez saisir le nom de certaines couleurs, mais je ne pense pas qu'elles aient toutes les couleurs, chaque nuance par nom. Vous voyez que mauve, mauve n'était pas une option, n'est-ce pas ? Donc, si vous connaissez la couleur par son nom et que c'est une couleur simple, vous pouvez la taper en rouge, très bien. Mais de manière générale, ce que vous utiliseriez est hexadécimal ou RVB. RVB est donc l'abréviation du rouge, du vert et du bleu. Donc, vous mettriez à la maison entre 0 et 255 de chacun de ceux que vous voulez. Je veux donc 255 rouges, 0 vert et 0 bleu. Très bien, tu vois, ça me dit que c'est rare. En utilisant Visual Studio Code, vous obtenez ce sélecteur de couleurs. Donc ce que j'ai tapé dans le mot rouge ou j'ai tapé en RVB. Une fois qu'il détecte la couleur, vous pouvez obtenir ce sélecteur de couleurs. Et si ce n'est toujours pas la teinte souhaitée, vous pouvez toujours la faire glisser et vous voyez que valeur RVB change en conséquence. Très bien, donc si je voulais attacher cette nuance offerte, c'est le RVB. Donc le rouge est rouge, ça aurait été 255 0, 0. Mais pour les différentes nuances, vous pouvez être très précis en utilisant vos valeurs RVB. Je vais donc quitter celui-ci en utilisant RVB. Je vais changer le h3 pour être couleur de style est, essayons une couleur simple, bleu, d'accord ? Et ensuite, l'autre façon d'obtenir une couleur est d'utiliser ce que vous appelez hexadécimal. Vous direz donc un hashtag, puis vous avez une combinaison alphanumérique de caractères. Par conséquent, alphanumérique signifie que vous pouvez choisir entre 0 et 9, et vous pouvez choisir entre a et F dans les lettres. Très bien, donc, et ensuite, vous en avez six. Donc je peux voir comme 000, je suis juste un hasard avec ce flou. Je ne sais pas ce que je vais devenir artistique. Je prends une nuance de vert ici, non ? 000 F6 1D me donne la nuance de vert. Encore une fois, si cela ne vous plaît pas, vous pouvez toujours changer, mais code Visual Studio sera toujours là. Il conserve l'hexadécimal. Donc, si vous commencez par hexadécimal, il sera au-dessus de T In Hex pensait qu'il allait le changer. Donc, le RVB, regardez ça. J'apprends aussi. Très bien, donc si vous sélectionnez et que vous pouvez déplacer nôtre et donc vous atteignez votre hexadécimal. Vous pouvez utiliser votre mot et utiliser RVB. Maintenant, avec tout cela fait, je suis allé économiser, une fois de plus ce que j' ai sur tout pour voir si oui, veillez à sauvegarder vos modifications. Et ensuite, lorsque vous sauterez sur votre page, vous verrez les différentes couleurs. Bonjour tout le monde, bonjour tout le monde et bonjour tout le monde. Très bien, donc c'est tout le CSS qui lui permet de coiffer. À quoi voulez-vous que votre code HTML ressemble ? Donc, si je voulais changer la police après le point-virgule, je pourrais ajouter un autre sélecteur, ce qui serait amusant. Disons un style de police. Vous avez donc une police de caractères. Quelle police vous permet d'insérer toutes ces polices individuelles ? Personnellement, je n' aime pas utiliser les polices car vous devez être très précis sur l'endroit où vous mettez quelles valeurs. Donc, au lieu de cela, j'aime être très spécifique et voir que je sélectionne exactement le style de police. Et puis je peux dire italique, mais c'est un auteur vraiment voulu, je voulais la police. Famille. Là, nous allons changer la police réelle. Vous connaissez donc certaines de ces polices de Microsoft Word. Et certains d'entre eux que vous ne connaissez peut-être pas forcément, mais vous remarquerez qu'ils sont en quelque sorte en lots. C'est donc voir choisir RL. Si IRL n'est pas sur le système qui charge la page, choisissez Helvetica. Si ce n'est pas sur la page, alors par défaut un capteur que 90, c'est souvent que les machines doivent avoir de toute façon, non ? C'est donc à peu près à quoi ressemble cette famille de polices. Comme vous pouvez le voir. Je ne fais que les enchaîner. Donc, la valeur deux-points du sélecteur. Ensuite, je veux un autre point-virgule de sélecteur. Sélectionnez ensuite l'Oregon et le point-virgule de valeur à nouveau. Et dans certains sélecteurs peuvent prendre plusieurs valeurs séparées par des virgules. Très bien, alors quand je fais tout cela et que je regarde en arrière, vous voyez que ce n'est pas un Helloworld d' Arial en italique , ce qui est bien. Vous pouvez donc ajouter autant de styles au même élément que nécessaire dans la situation. C'est ce que nous appelons CSS en ligne, n'est-ce pas ? Parce qu'il est en ligne, il est en ligne dans la ligne de la TAG réelle. Maintenant, le problème avec le CSS en ligne est qu' il est limité dans ce qu'il peut faire. veut dire, que se passe-t-il si je voulais toutes les balises d'en-tête aient ce genre de style ? Maintenant, ce que je dois faire, c'est prendre tout ça et coller ici, puis le prendre et le coller ici et le coller ici. Et partout où je voulais le coller. Je ne suis pas assez simple. Un peu copier-coller. Très bien. Très bien. Et tout le monde a l'air uniforme, mais alors si votre client revenait et disait : oh, je le veux, je ne veux pas qu' il soit aussi ombragé pour ça. Je voulais une autre teinte pour ça. Donc non, je dois aller chercher l' ombre pour cela avec l'un d'eux. Disons que c'est plus léger ou plus rose. C'est vrai ? Ou quelle que soit la couleur ? Non, après avoir changé cela partout où je l'ai copié et collé. Donc, même si cela peut sembler simple parce qu'il n'y en a que six, c' est que s'il y avait 20 places, si vous étiez sur plusieurs pages sur l'ensemble du site Web, il serait très inefficace maintenant d'essayer de viser, de copier et de coller tous les endroits. Très bien, c'est donc la limitation du CSS en ligne. La solution serait donc que vous utilisiez des feuilles de style internes. Ainsi, une feuille de style interne allait dans la zone de tête d'une page, puis elle dicterait les styles CSS pour l'ensemble de la pêche. Jetons donc un coup d'œil à ce à quoi cela ressemble. 1, nous avons un plan statique, donc c'est dans la section de tête et nous ouvrons et fermons style. vie intérieur. Ce que nous allons faire, c'est lui dire quelles sont les balises que nous voulons cibler. Je vais donc commencer simplement. Je ne vais pas déranger le styles.css. Je vais dire des étiquettes P. Je veux que toutes les balises p de ma page aient la couleur violette, par exemple. Nous avons donc deux étiquettes P, n'est-ce pas ? Comme nous l'aurions vu si nous utilisions l'intérieur des terres, j'ai dû prendre le style, coller dans cette balise p et le coller dans cette balise p. Et pour toutes les autres balises P sur la page, nous discutons simplement de la raison pour laquelle c'est inefficace. Donc, ce que je peux faire à l'intérieur de la feuille de style interne, c'est C p, ce qui signifie que je veux cibler l'élément PThRP. Ensuite, je vais ouvrir et fermer les bretelles bouclées. Très bien, alors ça voit, ok, il est clair que le sélecteur cible la balise p. C'est ce que Visual Studio Code nous fait savoir, mais nous ne devrions pas avoir de jeux de règles vides, c'est pourquoi vous voyez que c'est le neuf. Donc, il essaie de vous dire, hé, si vous n'êtes pas prêt à lire CSS, où ne déclarez aucune section d' éléments pour cela, n'est-ce pas ? Mais nous allons écrire du CSS. Donc je vais dire toutes les étiquettes p, je veux que tu aies la couleur et je suis allé garder ça simple, violet. Très bien. Remarquez que neuf sont partis. Et si je retourne à la page, je ne suis pas sûr de ce qui vient de se passer. C'est rafraîchissant d'arriver à Mach, mais c'est très bien. On y va. Il s'agit de ma première page Web. Notez maintenant qu'il s'agit d'une balise p et qu'il s'agit d'une balise p et qu'ils sont tous les deux violets. Tous mes écrits avaient un seul endroit que je voulais pour mes étiquettes P. Très bien, donc si je voulais toutes les balises p, le style italique, c'est le même format pour avoir le sélecteur et nous avons le point-virgule de valeur. Et puis la lisibilité évasée Candace duty dans les différentes lignes. Donc, au lieu d'essayer de le lire juste là, croiser astucieux, n'est-ce pas ? Comme si c'était représenté ici, ce que j'ai eu de la confusion pour moi, non ? Il devient déroutant pour moi chaque intermédiaire juste en face, que c'est beaucoup plus lisible. Très bien, donc tous les Beatles, je veux du violet et de l'italique. On y va. Donc, avec très peu d'efforts, je viens tag sur cette page, violet et diatonique. Transférons donc ce type de balisage nul à nos balises. Nous avons donc six chiens H et je veux qu'ils aient tous le même style. Très bien, ils doivent tous avoir la même chose. Ce qui est cool à ce sujet, c' est que je peux enchaîner des étiquettes. Je peux donc voir H1, H2, H3, H4 ont 456 accolades bouclées ouvertes et fermées. Et puis devinez quoi ? Je peux mettre tout ce style. Je n'ai pas besoin des guillemets, donc je prends cela comme appel, les valeurs sélectionnées apparaissent. Et je vais juste les mettre dans leurs lignes respectives à distance, dans la ligne avec un point-virgule. Je peux donc supprimer ces attributs de style de toutes ces balises. Et puis vous remarquerez que UP commence à paraître beaucoup plus soigné. C'est beaucoup plus facile à entretenir. Et quand on regarde en arrière, c'était très efficace. Donc tous les chiens de bord et tous partagent le même style. Et le fait est que même si vous voulez quelque chose de spécial pour l'un des htdocs, disons qu'ils devraient tous avoir une famille de polices, mais vous ne voulez que H1 balise pour moi. Oh, désolé. Tous doivent avoir la même couleur et la même famille de polices, mais ce ne sont que les balises H1, italiques. Vous pouvez toujours, après avoir spécifié pour toute la famille, vous pouvez toujours revenir en arrière et dire chacun par vous-même. Je veux que tu aies ça. Très bien ? Ainsi, lorsque vous revenez en arrière, vous verrez que tout le monde a la même couleur et la même famille de polices, mais qu'une seule est en italique. C'est donc ce que CSS apporte à la table. C'est ce que les feuilles de style internes apportent à la table. Et sachez que ce qui est génial, c'est que si vous avez besoin de partager ces styles sur plusieurs pages, n'est-ce pas ? Car disons que partout sur quatre pages, jusqu'à présent, nous avons une balise image, nous avons une forme d'en-tête. Todd. Très bien, et nous avons des étiquettes P partout et toutes ces choses. Vous souhaitez que toutes ces pages aient les mêmes règles de style, ce qui est très important pour la cohérence, car la plupart des sites Web sur lesquels vous parcourez, sinon tous les sites Web, vous remarquerez qu'il existe toujours un thème commun entre le texte et la façon dont il est affiché à chaque temps. C'est donc ce que nous appelons un modèle qui n'est accompli qu'en veillant à ce que le CSS soit cohérent sur toutes les plages. Roman. Si nous le voulions, nous pourrions facilement utiliser cette zone de style et la coller dans la tête de chaque épingle, n'est-ce pas ? Alors contactez un bateau succès et index NOL ont le même style. Donc, si je les traverse tous, chaque balise h va ressembler. C'est bon ? Tout est cohérent, n'est-ce pas ? Et si je mets des étiquettes P ailleurs, elles vont tous ressembler de cette façon. Maintenant, cela soulève une autre inefficacité, n'est-ce pas ? Que se passe-t-il lorsque vous avez 20 pages et que le client dit que je ne voulais plus que la balise H1 soit celle de l'Ayatollah. Je le veux probablement. Essayons, je vais essayer autre chose. Je vais dire texte, la décoration est soulignée. Très bien, donc au sujet du discours de réussite, je l'ai changé. Je veux que ça se fasse à chaque page. Cela signifie que non après cela. Et vous voyez que nous traversons le même type de copier-coller que nous venons d'essayer de promouvoir lorsque nous avons fait notre crainte de feuille de style interne. Donc maintenant, je dois copier et coller cela sur chaque page qui a besoin de ce style. Et encore une fois, c'est inefficace. Il fonctionne. Mais ce n'est pas très efficace en termes de maintenance car si je manque une page, je suis retourné et j'ai essayé de résoudre ce problème. Nous abordons donc la prochaine façon de faire du CSS, qui est des feuilles de style externes. Ainsi, les feuilles de style externes signifient qu' un fichier baby va créer tout le CSS, mais il ne vivra pas dans le fichier HTML. Nous allons simplement faire des tweets de référence. Examinons donc ça. Donc, dans notre explorateur, nous allons avoir un nouveau fichier, et je vais l' appeler styles.css. Peu importe ce que vous nommez le fichier comme certains l' appellent son site dot CSS. Certaines personnes l'appellent des styles CSS que CSS, ça n'a pas vraiment d' importance tant que vous le terminez avec des points CSS. C'est notre nouvelle extension de fichier, n'est-ce pas ? Donc styles.css. Et puis, ce que nous allons faire, permettez-moi d'augmenter un peu l'interface. Ce que nous allons faire dans styles.css est étiqueté tout notre code CSS. Très bien, donc dans styles.css, nous sommes en fait mis dans les guillemets sont les balises p sont des balises. Tout le style CSS qui aurait eu sur chaque page de l'intérieur. Cette syntaxe ressemble donc à la syntaxe interne, sauf qu'elle connaît son propre fichier. Cela signifie donc que l'index n' a plus le style car si je retourne à l'index, tout revient à la normale. Maintenant que j'ai tout cela est dans un fichier dédié, ce que je dois faire est de faire du ralenti. Et je vais lui dire que le lien rel est égal à la feuille de style. Et puis un voyage serait, où est-ce que je trouve le statut que nous avons vu auparavant avec l'étiquette d'ancrage, tout ce que nous avons à faire parce qu'ils sont au même niveau. Il suffit de voir que hf est égal aux noms de fichiers. Le nom de fichier ici est styles.css, puis il s'agit d'une balise à fermeture automatique. Après avoir fait tout cela, nous nous rafraîchissons et regardons cela. Aucun ordre n'est restauré dans l'univers. Très bien, donc nous pouvons maintenant répéter cet exploit sur toutes les autres pages qui ont reçu des feuilles de style internes, les vents sont retirés du pêne dormant. Je vais le retirer du contact. Et je suis allé le retirer du succès. Très bien. Donc je le fais juste pour vous montrer quand je navigue vers un boulon tout ce que vous savez, et je lui dis de faire référence à cette fiche de données, il obtient des styles de compartiment. Lorsque je vais nous contacter, contactez des doses rate, je le dis faire référence à la feuille de style. Tout est en uniforme, non ? Ce n'est pas le site le plus élégant et vous le verrez. Mais au moins, nous voyons comment l' uniformité joue un rôle important. Très bien ? C'est ainsi que nous pouvons me connaître. Nos styles sont un peu plus globaux car avec une seule ligne, nous pouvons accéder à tout ce qui se trouve dans ce fichier, qui comporte bien plus de styles qu'un. Très bien ? Donc c'est tout le CSS qui fonctionne vraiment. Et moi, faire une vidéo vous montrant toutes les possibilités d' un pair de valeur de sélecteur serait presque impossible. Il y en a tellement et ils utiles diverses choses et peuvent parfois les utiliser. Certaines balises ne peuvent pas. Le seul moyen de se sentir vraiment à l'aise. Je ne dirais pas une maîtrise parce que je fais ça depuis années et je n'ai toujours pas cité sans citation, je l'ai maîtrisé. Ce que je suis à l'aise parce que j' ai exploré les subdominants, n'est-ce pas ? J'ai exploré quels sont les sélecteurs. Et avec un outil tel que Visual Studio Code Assessments dans la liste, vous pouvez tous les explorer et les voir. Ok, donc si je vois l'index, quelles sont les valeurs ? Je peux essayer les deux. Je peux essayer ça. Je peux essayer ça. Voyez à quoi ça ressemble. Non, si j'ai besoin de ne rien utiliser et que rien ne vaut la recherche. Lorsque vous avez une vision particulière, vous pouvez toujours faire des recherches. Vous trouverez toujours du matériel pour vous aider dans cette vision. Il s'agit donc d'une introduction très rapide au CSS et à son fonctionnement. Bon, donc quand nous reviendrons, nous allons regarder un peu plus pendant tout le week-end. Utilisez CSS pour cibler des parties particulières de son site Web. Ce qui signifie que si j'ai des balises H1, mais en particulier H1 tag, je voulais avoir un aspect particulier que celui que je peux réellement cibler d'une manière spécifique. Nous allons donc regarder ça quand nous reviendrons. 7. Plus CSS - Cours de classe, et de sélecteurs d'identité: Très bien, donc la dernière fois que nous sommes ici, nous examinons comment le CSS fonctionne. Nous avons eu une belle introduction rapide à son aspect général. Et comme je l'ai dit, il est presque impossible d'enseigner tout sur le CSS dans quelques vidéos, mais il faut explorer et j'espère que c' est ce que vous avez fait. Passons donc à autre chose. Non. Et dans cette leçon, nous allons bien faire deux choses. Premièrement, nous allons examiner comment cibler des balises particulières. Et nous voulons voir, oui, nous avons des balises P, mais je ne veux pas tous les pétaoctets de cette façon. Je veux un tag p particulier ou un élément particulier. J'ai ce look et cette sensation. Et nous allons aussi regarder tout le week-end de style notre table parce que nous avons la largeur 100 et le centre d'alignement du texte, mais il n'y a rien à voir vraiment. Il s'agit là d'un tableau, aucune ligne de grille qui est caractéristique principale de ce à quoi devrait ressembler la table. Nous voyons donc que la table par défaut est un peu anémique dans son affichage et nous voudrions faire ressembler à quoi elle devrait ressembler. Commençons donc par la façon dont nous ciblons des langues particulières, n'est-ce pas ? Ce que nous avons fait jusqu'ici, c'est dire que tous les hétérodoxes doivent avoir cette couleur et que toutes les balises H1 doivent être soulignées. Et si je ne voulais pas nécessairement que toutes les balises H1 soient soulignées, n'est-ce pas ? Donc Nikon, la page d'index que j'ai, j'ai deux chiens. Un qui dit bonjour le monde. Et je vais dire que c'est l'indice. C'est vrai ? Disons maintenant que nous avons cette balise H1 sur ce type de balise H1 sur chaque page où nous indiquons sur quelle page nous sommes. Nous pourrions donc considérer cela comme un titre, n'est-ce pas ? Il s'agit donc de nos balises de titre ou de n'importe quelle balise H1, c' est-à-dire la balise de titre qui indique celle que nous voulons avoir des attributs particuliers. Les autres balises H1 n'ont pas besoin d'attributs, n'est-ce pas ? Disons donc que le texte est souligné. Très bien, laissons-le qui est souligné pour null. Ou essayons de faire autre chose pour dire que la mauvaise couleur de tout ce qui est une balise de titre doit être cassée. Et voyons à quoi cela ressemblera. Nous voyons donc que ce serait la balise de titre. C'est l'index et helloworld n'est pas le titre, donc je ne veux pas qu'il ressemble à la balise titre. Il y a des photos. Et je viens réaliser que j'ai mis cette cible ou un mauvais endroit. Alors laissez-moi le déplacer en dessous notre barre de navigation sans devis, non ? Il s'agit donc de la page d'index. C'est le titre, permettez-moi de dire que c'est le titre. Chacun d'eux. Très bien. Je veux donc que mon titre H1 ressemble de cette façon. Le Helloworld ne devrait pas sur d'autres balises H1 sur la taille de la page ne l'est pas, le titre ne doit pas ressembler à ça. Donc, ce que je peux faire dans mon fichier CSS, c'est plutôt que de cibler les balises H1, je peux plutôt les cibler par nom ou par ID. Ou nous pouvons définir ce que nous appelons notre classe. Je vais d'abord vous montrer par pièce d'identité. Ensuite, nous avons examiné le concept d' identification lorsque nous faisons notre formulaire. Et je vous ai montré le nom d'identité, non ? Tous les dix, dix reçoivent une pièce d'identité. Je peux donc facilement voir dans cette balise H1, votre identifiant est titre. C'est vrai ? Le fait est qu' aucun des deux éléments sur la même page ne devrait jamais avoir le même identifiant, n'est-ce pas ? Pensez-y comme si vous ne voudriez pas offrir à vos enfants le même nom. Pred que vous ayez des jumeaux, vous allez toujours nommer deux noms différents. Vous voudriez avoir besoin de jumeaux du même nom. Traitez donc les IDE comme ça. Vous ne voulez pas que les éléments de la même page portent le même nom. J'ai donc un titre sur la page de contact. C'est très bien. Je peux également le faire sur la page À propos. C'est très bien, car c'est le seul ici. Mais ce que je ne devrais jamais faire, c'est que celui-ci s'appelle titre et un autre élément appelé titre sur la même page. C'est un non-non. Très bien, maintenant j'ai cet élément appelé Titre. Je veux cibler n'importe quel élément avec le titre d'ID pour avoir un style particulier et le fichier style.css, je peux voir le hashtag ou la Pologne ou un signe de numéro. Vous appelez ça le titre du hashtag, n'est-ce pas ? Vous voyez donc ici que l' ID de l'élément est égal à n'importe quel élément, chaque TAG, balise p, image non coupée, quel qu'il soit. Une fois que l'ID est égal à titre, il y appliquera ce style. Donc, si je reviens en arrière et que je regarde, je sais que la balise titre a le style et que l'autre ne le fait pas parce que j'ai dit que je voulais que seul le titre ait ce style, un bateau nous est seulement le titre, chefs d'orchestre, seulement le titre. Très bien, c'est donc une façon de faire ce genre de ciblage. Maintenant, étant donné la limitation avec l'ID est égal au titre, et je pense que les navigateurs modernes peuvent compenser cela. Mais il suffit de suivre mon conseil une fois de plus, je suis vieille école à partir de l'époque où les navigateurs vous aidaient pas et vous aidaient à dissimuler vos erreurs. Je vous conseille de ne pas faire deux éléments aient le même identifiant sur la même page. Il y a d'autres répercussions, surtout lorsque vous traitez avec JavaScript, où vous risquez de rencontrer problèmes si vous avez plusieurs éléments avec le même identifiant. Très bien ? Compte tenu de cette limitation, il peut y avoir des moments où vous en avez besoin. Les blocs sont deux éléments différents qui ont le même style, mais vous n'en voulez pas tous. Voyons donc voir. Nous avons plusieurs balises p. Battre 12345. Très bien ? Nous avons donc plusieurs balises p. Et si je ne voulais pas qu'ils soient tous violets et italiques, n'est-ce pas ? Je voulais seulement que 135 soient violets et l'ayatollah est ce que leurs risques devraient paraître normaux. Donc encore une fois, je peux toujours voir toutes les balises p devraient avoir une position particulière. Je vais donc leur donner à tous une famille amusante. Donc, chaque étiquette p sur ma page, je voulais avoir la famille de polices Arial, pas de problème. Ils devraient tous être RL. Cool. Cependant, je veux que 135 soient violets et italiques. Très bien, je peux vraiment créer ce que vous appelez une classe. Un cours avec, c'est comme un style réutilisable. Alors que le titre ou l'utilisation de l'ID ciblent un élément ou les gains, bonnes pratiques les quelques éléments ayant la même valeur d'ID, n'est-ce pas ? Lorsque nous parlons de classes où la création d' une valeur abstraite peut être répartie sur n'importe quel type d'élément autant de fois que nécessaire. Je vais donc créer une classe ici où je vois point. Disons pour moi, Sean. Très bien, le point signifie que sa sous-classe et l'inflammation est le nom de la classe. Et si vous survolez, vous voyez l'élément et cela indiquera que la classe est égale à l'information. Donc, tout élément que je veux appliquer à tous les arrière-goût de l'herbe équivaut à l'inflammation comme attributs là-dedans, non ? Donc, classe d'information, je voulais avoir de la couleur, du violet. Et les textes. Ce n'était pas une décoration textuelle, ce n'était pas le cas, c'était un style de police pour être italique, non ? Donc, vous voyez même parfois devoir deviner, vous ne les mémoriserez pas tous, mais votre terrain se mettra à l' aise, n'est-ce pas ? Les informations doivent donc avoir une couleur, un violet et un style de police. Sachez que si vous regardez à travers rien n' a les styles appliqués. Non pas que les remorqueurs ne le fassent, pas les balises d'ancrage et sachent que celles là gardent la couleur changée, mais rien ici n'a été appliqué à cette classe. Mais si je veux utiliser ce verre sur une étiquette particulière ou sur des étiquettes particulières, tout ce qu'il faut faire est d'aller dire que la classe de balises est égale à l'information. Je le voulais, c'est sur 1, 3 et 5. Savoir quand je reviens en arrière, vous voyez ici 1 , 3 et 5 que la classe ou les styles leur sont directement appliqués. donc ça le pouvoir de la classe, n'est-ce pas ? Je peux donc créer tous les styles, leur donner une classe, mais je peux les mettre sur les éléments particuliers. Encore une fois, cela ne s'applique pas toujours à chaque élément car si je mets ce mot à dire sur la balise IMG, permettez-moi de décommenter l'IMG. Je vais donc rapidement décommenter le contrôle et la barre oblique. Donc je vais juste aller à tout ce contrôle avant , n'est-ce pas ? Par conséquent, la barre oblique de contrôle va commenter sur peu commun pour vous. Très bien, disons que j'ai essayé de mettre cette classe sur le tag IMG. n'y a rien dans cette classe qui puisse vraiment affecter l'affichage de la fleur, n'est-ce pas ? Donc, même si le cours est là, si je vais ici, il n'y aura rien de différent. Et les deux fleurs parce qu'elle n'a pas à montrer de couleur, n'est-ce pas ? Et il n'a pas besoin d'être mis en italique. Donc, bien que vous puissiez créer la classe, je veux dire que vous pouvez utiliser n'importe où. Il n'est pas prêt à toujours avoir nos mixins dans aucun cas. Cependant, si vous avez un tas de photos et que vous vouliez appliquer le style à un ensemble particulier de fonctionnalités peut être une galerie d'art et non pas toutes les images votre site Web. Vous ne voudriez donc pas appliquer à la balise IMG. Mais un pic particulier a choisi d'afficher des images, alors vous pourriez toujours créer un style ou créer cette confiance ou que je suis Windsor, appeler cela un DP pour l'image d'affichage. Et puis voyons que la largeur des images d'affichage devrait être de 300, et je vais utiliser des pixels. Et la hauteur doit être 200 pixels si toutes les images doivent avoir ces dimensions. Ensuite, je peux passer à mon image et je peux voir que votre classe est dp. Donc, quand je reviens en arrière, c'est à ça que ressemble cette image. Et puis, pour autant d' images que je veux avoir, elles ressembleront toutes à des images d'affichage, non ? Parce qu'ils ont tous pris le DP. Donc, si j'en ai 50, l'image n'est pas utilisée ici. Et le vieux problème, c'est qu'ils vont tous réutiliser cette classe. Vous voyez donc qu'il est agréable et réutilisable. Bien sûr, cette classe ne s'appliquerait pas à quelque chose de rouge basé sur du texte. Donc, si je voulais que cet objet de liste soit grossier pour moi, Sean. Et si vous commencez à taper un 0 en haut, vous pouvez toujours utiliser le contrôle et l'espace et cela fera des ajouts pour vous. Donc, dans les chondrules formées, la mission spatiale entrée le remplit pour moi. Ensuite, je vais voir ici que cet article n'est pas une information scintillante. Très bien, donc c'est vraiment tout ce qu'il y a du CSS, comme je l'ai dit, on s' améliore avec la pratique. Il vous suffit donc d'explorer, essayer de nouvelles choses et c'est ainsi que vous vous sentez vraiment à l'aise avec cela. Très bien, alors passons au style de notre table. Notez qu'un peu pendant le week-end époustouflant, ciblez des éléments particuliers afin que nous puissions, vous savez, développer des styles spécifiques réutilisables sur de nombreux éléments. Non, nous allons regarder comment nous pouvons imbriquer nos dans la pièce ensemble au sein d'éléments, n'est-ce pas ? Une table est donc un moyen idéal de le démontrer parce que nous avons vu qu'elle fait une hiérarchie de remorqueurs. Vous avez la table, puis vous avez le TI à n'importe lequel des TA et vous avez le T D. Donc oui, faut un peu forer dans la table pour obtenir certaines choses pour avoir une certaine apparence. chemin. Très bien ? Je vais donc tout d'abord retirer ce style de la table. Je vais le rétablir à sa valeur par défaut. Regardez et ne ressentez aucun problème. Disons que nous allons lui donner une pièce d'identité. Donc, des pièces d'identité, n'est-ce pas ? Des trucs de table de style, membres, non ? C'est ce que nous avons dit ici. Ce sont des membres du personnel. Nous sommes donc dans le CSS. Je peux cibler moins un membre du personnel stable voyant les hashtags table du personnel. Très bien. Permettez-moi de vérifier que c'est ce que j'ai dit. Table de trucs. Bien. Il suffit de s' assurer de tourner, c'est juste. Et le CSS est également très sensible à la casse. Vous souhaitez donc, si vous utilisez un cas commun, conserver les clés courantes. Mais bien sûr, comme nous l'avons vu, minuscules ont entendu SNL Buddy. suffit donc de garder tout cela en minuscules. Je voulais donc arrêter table pour avoir gagné une famille de polices de, essayons une police différente pour que nous puissions voir une différence. Courrier New. Très bien. Je vais le dire troc. Il n'a donc pas de frontières, n'est-ce pas ? Non. Laissez-moi donc ne pas faire le troc pour l'instant. Je vais également étendre la largeur jusqu'à 100. Donc, je suis presque, presque refaire les styles que j'avais initialement, non ? Nous pouvons donc voir que la police a changé. Il ne s'étend pas sur toute la page. Et encore une fois, laissez-moi mettre le texte aligner au centre pour que tout soit centré, juste , bien. Vous voyez, tout cela a été accompli. nôtre ici. Donc, si vous avez plusieurs tables, c'est probablement là que vous voudriez utiliser cette classe. Si vous avez plusieurs tables sur la même pièce, je dois me déplacer de la même façon. Vous souhaitez utiliser une classe au lieu de l'ID. Très bien, maintenant que nous avons cela, je veux dire au TDS et à un sermon ce que c'est le D Hn et ce sera la télé ou la cellule, n'est-ce pas ? Je voulais que chacun ait une frontière. Maintenant, je veux régler ces lignes de grille. Nous allons voir la table du personnel ou la table du personnel par hashtag. Je veux la TD à l'intérieur de votre élément ainsi que le th. Donc, vous voyez que nous sommes ici, que nous combinons et nous combinons notre concept précédent où il en obtient un nouveau, a gagné du travail sur beaucoup de polices. Je peux presque séparer plusieurs balises et partager des styles. Cool, on a cherché avec des étiquettes d'en-tête. Sachez que vous voyez aussi que vous pouvez voir, donnez-moi l'élément parent et regardez à l'intérieur et obtenez les éléments à l'intérieur de ce type. En d'autres termes, donnez-moi la table du personnel, puis donnez-moi le diagramme T-H qui se trouve à l'intérieur de cette table. Nous avons donc des balises td DES styles à l'intérieur de la table appelée Table Staff. C'est donc une autre façon de cibler couleur spécifique, qui 101 thread. Et puis, à l'intérieur, je vais dire que je vais me donner une frontière. Rappelez-vous donc que j'ai mentionné plus tôt qu'avec la police, vous pouvez spécifier plusieurs valeurs à travers la bordure du tableau est très similaire. Je peux donc dire frontière. Je voulais une largeur de pixel, une plupart solide, et il doit avoir la couleur. Mais j'aurais aussi pu dire frontière. Dash, la largeur est d'un pixel. J'aurais pu dire que le style de bordure est solide, et je pourrais aussi dire la couleur du tableau de bord. Est-ce vrai ? Je ne fais que vous montrer qu' il y a certains éléments. Ils peuvent regrouper les valeurs et il y en a certaines qu'ils ne peuvent pas les casser vendues comme nous l'avons vu avec fonds, la famille de polices, la taille de la police, etc. Je voulais donc avoir une bordure, un pixel de large, solide dans et il doit avoir des données aussi solides en style, désolé, et cette nuance de gris dans sa couleur et son rembourrage. rembourrage signifie donc que je veux pousser des éléments autour de moi. Nous, huit pixels, c'est plutôt que je voulais me rencontrer. pixels plus gros que je ne le serais, non ? Donc, si vous regardez la table, nous commencerons à voir cet espace parce que rappelez-vous avant que tout soit étouffé. Ensuite, nous prenons tous les bourgeons et vous montrons ce que fait le corps. Donc, avec tout le putting, tout est étouffé. Quand j'ai mis le rembourrage, tout le monde est devenu plus gros, non ? Il a donc mis des poèmes d'aide que huit livres de blé dans toutes les directions. Encore une fois, pensez-y comme ça. Donc non, tout est le nôtre. Mais alors vous remarquez que oui, tout le monde a sa frontière parce que, comme je l'ai dit, ce sont vraiment des cellules. Ce ne sont pas vraiment des lignes et des colonnes, ce sont vraiment des cellules. Ces cellules ont donc leur propre troc, les nôtres. Permettez-moi de zoomer pour que vous puissiez voir un peu mieux. Ce sont des cellules avec leurs propres frontières. Aucune table n'a lu, il semble que c'est parce que ça ne semble pas bien. On dirait juste un tas de boîtes. En revenant à la table des choses, je peux dire bordure dash, bordure dash, effondrement. On y va, le barter dash s'effondre et annoncer un effondrement. Donc, nous ne nous effondrons pas toutes les frontières les unes sur les autres. Ils ne ressemblent plus à des boîtes. Non, on dirait cette table. Très bien, trucs et astuces. Encore une fois, la pratique devient permanente. Maintenant, la dernière chose que je vais faire à cette table est de faire, cela a rendu la zone d'en-tête différente. Donc je veux que cela ait peut-être le même genre de couleur que l'étiquette H1 sans raison particulière, juste que je manque la sienne et explore. Donc j'ai déjà dit à la télé et au th, le style pur, mais ensuite je veux un style particulier pour le th, d'accord, donc je vais dire que vous le ferez celui que je veux votre couleur soit la même, la même Valeur RVB. Ce n'est pas une couleur car la couleur change les textes. C'est donc un bon point. Non, même si je cible le th, il semblerait que si je disais couleur pour le th, alors le th lui-même prendra la couleur. Cependant, ce qui se passera, c'est que le texte réel à l'intérieur de la balise th. La couleur fait donc référence aux ticks que chaque fois que la couleur fait référence au texte. Ce que vous voudriez faire, c'est changer la couleur d'arrière-plan du th, si vous vouliez que le THE ait une couleur différente et ce point, vous obtiendrez cette couleur. Très bien, la couleur sera toujours bloquée par défaut. Si vous dites que la couleur est autre chose, que ce sera toujours le texte si vous voulez que l'article gémissant des éléments de l'autre côté du tableau change, alors vous devez utiliser la couleur d' arrière-plan. Alors qu'un bouton a grandi des couleurs, je veux que la couleur soit blanche, ce qui va devenir fou. Norm.dist utilise les zéros hexadécimaux 0000, désolé, ce sera fff. Je m'excuse de devenir blanc. Très bien. Donc je pourrais dire FF, FF, c'est généralement six, mais quelques couleurs, au moment où vous atteindrez le troisième, il saura automatiquement, ok, vous vouliez dire blanc, donc je saurai que c'est blanc . comme un bloc de 000 000. Et je pourrais avoir six zéros, c'est toujours bloqué. Et alors que je commence à changer les différentes couleurs n' y a pas de chiffres à l'intérieur, j'ai commencé à obtenir des feuilles différentes, n'est-ce pas ? Donc si j'ai dit 0, 0, f, j'ai la nuance de bleu. Ça vous montre. RVB a donc été développé après Higgs moi pour être un peu plus cohérent, moins déroutant, quoi que ce soit, n'importe quelle maison, laissez-moi tout faire FFF. Le texte est donc nul, blanc. Je l'ai donc. Je voulais appeler ça du corail, mais le gémissement de blanc prend le dessus de la table. Et puis toutes les règles ont en quelque sorte cela, n'est-ce pas ? Il y a donc un certain nombre de choses que vous pouvez faire comme il y avait tellement d'options, tellement de choses à faire, c'est presque impossible encore une fois, vous montrer dans une ou quelques vidéos, vous avez juste à explorer. Je vous encourage donc à faire une pause et à commencer à jouer avec certains éléments et certains styles et voir ce que vous pouvez trouver avec ce qui fonctionne, où ce qui ne fonctionne pas, nous sommes et c'est tout ce que vous obtenez confortable avec CSS. Quand nous reviendrons, nous allons jeter un coup d'œil à JavaScript. 8. Explorer JavaScript et la console de navigateur: Hé les gars, dans cette section, nous allons commencer à explorer JavaScript. Javascript est un langage de script qui nous permet , en tant que programmeurs, d'interagir avec les éléments HTML. Le fait est que lorsque le navigateur charge notre site Web, qu'il s'agisse du Lipset sur lequel nous travaillons ou de tout ce qui est construit avec du code HTML. Une fois que ce code est rendu par le navigateur, comme nous l'avons vu, nous ne pouvons rien faire pour le modifier. Donc, pour toute modification que nous devons apporter, nous devons revenir dans le code et modifier le code. Ensuite, nous pourrons l' ajuster lorsque nous actualiserons la page. Cependant, avec JavaScript, nous pouvons permettre à nos utilisateurs de une expérience interactive avec notre pH en mettant une certaine intelligence derrière lui. C'est donc ce que fait vraiment le langage de script. Il ajoute de l'intelligence à notre contenu statique. Ce que j'ai ici, c'est juste un navigateur. Nous allons un peu brouiller le code Visual Studio. Et ce que nous allons faire, c'est regarder JavaScript dans le contexte d'une console interactive que chaque navigateur possède réellement. Vous utilisez Chrome. J'utilise Edge rétinal. Vous utilisez Opera, Firefox, Safari, la plupart des navigateurs, sinon tous, auront cette console interactive et portable pour l'explorer. Ce que j'ai fait, c'est ouvrir une fenêtre privée pour Edge. Et je vais juste cliquer avec le bouton droit de la souris, puis je vais aller inspecter. Après cela, oui, il nous montre le code HTML minimum. Et la raison naturelle est que les instances privées que la page que nous obtenons ici ne sont pas aussi occupées que si vous deviez simplement charger notre page normale. C'est vrai ? C'est donc la page normale sur le bord irrégulier. C'est le privé, donc ce n'est pas aussi occupé. Cependant, ce sur quoi je veux que nous nous concentrions, c'est la console. Lorsque nous cliquons sur Console, nous voyons ici que le curseur clignote et qu'il attend que nous fassions quelque chose. Cette console nous permet donc d'interagir avec JavaScript. Nous pouvons froidir notre JavaScript ici et obtenir des commentaires immédiats basés sur le code que nous écrivons. Le fait est que lorsque vous actualisez cette page, elle rechargera la console. Donc, tout code que vous avez écrit serait effacé. Mais une fois que nous aurons interagi avec JavaScript et que nous aurons compris la langue plus tard, nous ajouterons du JavaScript à notre site Web avec lequel nous travaillons. Et vous verrez comment il peut persister un enregistrement du code que vous écrivez et le réutiliser en conséquence. Mais pour l'instant, comme je l'ai dit, nous sommes vraiment en train d'explorer. La première chose que la plupart des programmeurs, n'est-ce pas ? Et nous l'avons déjà fait, c'est HelloWorld. Vous voyez donc que j'ai commencé à taper et vous voyez que Visual Studio Code faisait des suggestions. Vous n'avez peut-être pas besoin de certaines de ces suggestions, mais si vous les regardez simplement, vous verrez que toutes ces choses sont ce dont le navigateur est capable. Ainsi, chaque navigateur dispose en fait bibliothèques intégrées pour JavaScript. Et c'est pourquoi, lorsque vous écrivez votre code JavaScript ici, un site Web sur le navigateur se charge le navigateur peut agir sur les instructions, car JavaScript n'est en réalité qu'un tas d'instructions qui disent le navigateur contient le site Web devrait se comporter à peu près. Si je voulais imprimer quelque chose sur la console. Cette console est donc utilisée pour beaucoup de choses. Il peut être utilisé à des fins de débogage pendant que vous construisez votre site Web. Il peut être utilisé pour l'interactivité comme ici. Si je veux imprimer, je peux voir le journal des points de la console, le journal L-O-G, puis ouvrir les parenthèses, puis le mettre guillemets et fermer, puis généralement en JavaScript et se termine par un point-virgule. Je peux donc dire bonjour à l'intérieur de ces citations simples. C'est un peu plus gros. Donc console dot log et helloworld. Donc, c'est essentiellement dire console dans le navigateur, quel que soit le navigateur et il a une console, veuillez écrire le message de journal bonjour monde. Quand j'appuie sur Entrée, regardez ça, il imprime Hello World. Cette commande indiquait au navigateur d' imprimer qui se trouve à l'intérieur de la console. Je pourrais facilement changer cela. Mon premier script Java, int enter. Nous avons obtenu ma première impression JavaScript. De temps en temps, vous verrez cela indéfini, mais vous n'avez pas vraiment à vous inquiéter à moins voir des choses apparaître en rouge. Vous n'avez pas vraiment à vous inquiéter trop, n'est-ce pas ? Plus tard, nous verrons que je vous donne juste un contexte pour que vous ne vous sentiez pas submergé par quoi que ce soit d'autre qui apparaît à l'écran. C'est ainsi que nous écririons le journal de la console du navigateur. Il existe maintenant d'autres outils interactifs que vous pouvez utiliser. Vous pouvez utiliser JSFiddle. Il existe un certain nombre d' outils JavaScript qui vous permettent d' écrire le code, puis exécuter et de voir l'effet immédiat. Je pense que l'utilisation de la console dans les navigateurs, aussi simple que possible parce que vous obtenez la même expérience. Une fois de plus, nous examinerons plus tard la façon dont nous modifions notre site Web. C'est donc une introduction rapide et sale à JavaScript, mais nous avons quelques leçons à venir. Nous sommes allés examiner différentes choses que nous pouvons faire en JavaScript. Et vous verrez que si vous avez déjà fait de la programmation, cela ressemble à d'autres langages de programmation. Si vous n'avez jamais fait de programmation, il pourrait s'agir de votre premier langage de programmation. Et les concepts ici sont transférables dans tous les autres langages de programmation que vous apprendrez au cours de votre carrière. 9. Déclarations et déclarations variables: Très bien les gars, donc dans cette leçon, nous allons examiner les instructions JavaScript, voir comment déclarer des variables. Et le simple fait de comprendre les règles générales du langage était comme nous l'avons vu avec HTML et CSS jusqu'à présent, chacun d'eux a son propre ensemble de règles, n'est-ce pas ? Donc, HTML, on s'attend à ce que vous ouvriez et fermiez certaines balises, parfois vous n'avez pas à le faire. Mais en fin de compte, il y a règles auxquelles vous devez adhérer si vous voulez obtenir le résultat souhaité de vos efforts. Même chose avec TSS. JavaScript a donc des règles et encore une fois, ce que vous allez apprendre avec JavaScript, c'est beaucoup de connaissances transférables. Donc, avec cette fenêtre de console, je vais simplement la faire glisser jusqu'au haut pour la rendre aussi grande que possible à l'écran. Et ce que nous allons faire, c'est que je vais le faire, vous pouvez soit cliquer sur ce bouton, soit vous faire Control L, ou simplement rafraîchir votre page chaque fois que nous allons actualiser la console. C'est donc le code de la leçon précédente. Je vais juste tout nettoyer et ensuite nous avons une nouvelle console avec laquelle travailler. Vous pouvez également faire d'autres petites choses qui filtrent l'expression en direct. avez peut-être pas nécessairement besoin de certains d'entre eux. Savoir. Vous pouvez afficher et masquer certaines barres latérales de la console et messages sur des éléments en fonction des performances du site Web sur lequel vous vous trouvez. Vous pouvez également filtrer, vous pouvez regarder différentes choses. Comme je l'ai dit, la console est utilisée pour la journalisation. Ainsi, plus tard, lorsque vous êtes bilinéaire d'énormes sites Web, vous êtes réellement utilisé ici pour surveiller certaines erreurs que vous pourriez accéder à un site Web. En tant qu'utilisateur final, il y assiste lorsque vous cliquez sur un bouton et cela ne fonctionne pas. Vous pouvez donc dire que si l'utilisateur clique sur le bouton et que quelque chose ne se passe pas comme il se doit, vous pourriez ouvrir une erreur de connexion à la console afin qu'elle puisse servir d'avertissement indiquant que cela pourrait être erroné. La console est donc très puissante, même si nous l'utilisons pour apprendre à écrire du code. Et cela est possible grâce aux navigateurs modernes. Je vous informe simplement que lorsque vous construisez votre site Web, vous pouvez l'utiliser pour obtenir de l'aide réelle au niveau de la production. Très bien, comme je l'ai dit, nous examinons des déclarations. Dans la plupart des langages de programmation, sinon tous les langages de programmation c'est comme une déclaration, n'est-ce pas ? Alors quand j'ai dit point de console, désolé, console.log, écrivez n'importe quoi. Et remarquez que j'utilise mes flèches haut et bas qui me permettent de parcourir toutes les commandes que j'ai exécutées pour la dernière fois dans la console tant que la fenêtre est ouverte. C'est donc une autre chose. Eh bien, si je me rafraîchis oui. Tant que la fenêtre est ouverte. Donc, si je suis clair, je me rafraîchis, je peux me dégager, puis je suis de nouveau là. Il s'agit d'une instruction, non d'une instruction généralement, en JavaScript qui doit se terminer par un point-virgule. Vous pouvez avoir plusieurs déclarations que vous avez passées et voir si je voulais faire Hello World et ensuite je voulais écrire autre chose, je peux juste passer à la ligne suivante, qui dans les limites de cette console particulière signifierait qu'il est difficile d' appuyer sur Maj et Entrée. Cela signifie que je veux passer à la ligne suivante, mais ne l' exécutez pas encore. Est-ce que je peux commencer à taper une autre déclaration ? Alors celui-ci pourrait dire : Bonjour. Une fois encore. C'est une autre déclaration. Et pour autant d'instructions que je veux exécuter, je peux simplement appuyer sur Maj Entrée. Cela se termine généralement par des points-virgules. Ce sont des déclarations. D'autres choses que vous feriez, je n'ai pas mentionné de variables. Une autre chose que vous feriez est donc de déclarer une variable. Une variable ressemble donc à une zone de stockage temporaire pour une valeur. Très bien, donc si je voulais stocker, voir un nom, je pourrais dire que c'est un mot clé, laisser, puis le nom de la variable. La variable est le nom de l'espace de stockage temporaire. Je pourrais donc dire un nom allumé puisque j'ai l'intention de stocker un nom que j' ai appelé mon espace de stockage temporaire en fonction de ce que j'ai l'intention de stocker. Si je voulais stocker l'avantage, je pourrais dire laisser vieillir. Ensuite, je peux lui donner une valeur en disant égal. Nous appelons donc ici le signe égal à un opérateur particulier et d'affectation. Alors que Sandy, ce qui est souscrit dans notre espace de stockage sous ce nom. Notez donc que j'utilise des guillemets doubles, et que j'utilise des guillemets simples, vous pouvez presque utiliser l'un ou l'autre. Il s'agit de situations très spécifiques où vous utiliseriez l' un et non l'autre. Je vais presque les utiliser de manière interchangeable, mais plus tard, vous verrez quand vous utiliseriez l'un et non l'autre. Mais en JavaScript, vous pouvez vous en sortir dans d'autres langues, vous ne pourrez peut-être pas vous en sortir aussi facilement. Mais comme je l'ai dit, chaque langue était similaire, a ses nuances et ses règles. Mais j'ai laissé de côté les connaissances sont transférables. Laissez le nom être égal à, et ensuite vous pouvez mettre dans votre Putting your name, je vais juste mettre un nom aléatoire. Une fois que j'ai reçu une telle déclaration avec un point-virgule, je veux autre chose de ce point de vue. Et je vais lui attribuer une valeur égale pour le pointer d'un point-virgule. Et que se passe-t-il si je voulais imprimer les valeurs à partir de cet outil ? Cela vous permet d'être dynamique parce que je suis juste, je vois juste, je mets ces valeurs, cependant, dans une situation réelle comme sur notre site Web, quand quelqu'un remplit votre formulaire, pensez à vous-même en tant qu'utilisateur. Lorsque vous remplissez un formulaire et que vous appuyez sur Soumettre, ces valeurs sont stockées quelque part car lorsque vous vous déconnectez, vous voyez réellement votre nom. Il s'agit du même nom, de l'adresse e-mail sur les valeurs que vous avez mises le forum que vous verrez présenter. Il est donc clair qu'ils sont stockés quelque part. Ces zones de stockage temporaires appelées variables sont donc conçues pour stocker temporairement ces valeurs lorsque vous êtes sur notre site Web. Encore une fois, devenez plus compliqué que cela. Nous allons simplement travailler avec ce que je vois en ce moment. Je vois juste, laissez-moi être égal à cette valeur, qu'il soit égal à cette valeur. Donc, si je voulais les imprimer, je pourrais consoler le journal et voir le nom. Je peux y ajouter. Littéralement, je l'ajoute. C'est un signe plus. Nous savons que c'est utilisé pour les mathématiques. Mais ici, il s'agit d'un mot ou deux mots, c'est un chiffre. Le JavaScript est donc ce que nous appelons un langage mal typé, qui signifie qu'il ne va pas se fixer ce qui signifie qu'il ne va pas se fixer sur le type de données que vous attribuez. Je vois juste créer un espace de stockage temporaire , stocker cette valeur. Dans d'autres langages de programmation, il y aura stricte où si vous stockez un nom, la moitié indique qu'il s'agit d'une variable de nom. Si nous commençons par la numéralité, je dois dire qu'il s'agit d'une variable numérique. En JavaScript, ce n'est pas si strict. Une fois de plus, les différentes langues ont des règles différentes, mais des connaissances transférables indépendamment. Donc, tout cela est un tas de déclarations que je n'ai pas encore exécutées. Ceux-ci. Je continue à voir Maj Enter, Maj Enter et passer à la ligne suivante. la même manière, vous l'écrivez, larmes et voyez ce que nous avons tendance à l'écrire dans l'éditeur de texte lorsque nous y arriverons jusqu'à ce que nous l'exécutions réellement. Donc, quand j'appuie sur Entrée, il va réellement s'exécuter. Tout ça va imprimer Hello World, bonjour encore. Et puis regardez porteur, c'est le sprint a été caché 50 parce que nous avons déclaré à des espaces de stockage temporaires. Et nous avons dit d'imprimer le nom plus l'âge. Il imprime le nom plus l'âge. Maintenant, qu'est-ce que vous remarquez comme un problème ? Je suis sûr que vous voyez pourquoi les 50 sont attachés au caché ? La raison en est donc que nous devons formater des bits de données pour que nous puissions dire console.log. Et puis je peux l' épiner un peu. Donc, de la même façon que nous pouvons plus une variable plus une variable, je peux plus une chaîne littérale. C'est ce que nous appellerons cela lorsque vous ouvrirez le guillemet, saisissez votre propre message et le fermez. C'est ce que nous appelons une chaîne littérale. Je peux console.log et ouvrir ma chaîne littérale ici, où je vois le nom deux-points, rendre plus présentable, non ? Et puis j'ajoute la variable name à cela. point-virgule est une déclaration. Et puis cela va le faire dans une autre ligne, console.log. Et je peux vieillir le côlon prudent. Remarquez cet espace, cet espace, ces colonnes à l'intérieur de ces guillemets. Et puis je peux le voir plus l'âge. Je n'ai pas appuyé sur Entrée. On y va. Le nom correspond à ce qu'il y a dans la variable et l'âge correspond à ce qui se trouve dans la variable. Non, rien. Je ne l'ai pas espacé autant que je l' ai espacé. Une autre chose en termes de désaccord n'est pas entre guillemets. Javascript ne se souciera si vous placez un espace ou pas tant que la syntaxe est correcte. Ce sont de petites choses sur JavaScript qui rendent si flexible et facile à apprendre car c'est un langage de script très indulgent. Mais il y a alors certaines règles qui peuvent enfreindre, vous briser en tant que développeur potentiel qui passe à d'autres langues. Mais pour l'instant, c'est tout ce que nous allons passer par quatre déclarations et comment elles fonctionnent. Nous savons que nous devons finir par un point-virgule. Nous savons comment imprimer sur la console, nous savons déclarer des variables et attribuer des valeurs, et nous savons comment les imprimer et conserver un format que nous imprimons. Et si je voulais changer une valeur, nom existe pour que je puisse donner à nom une nouvelle valeur. Très bien, je pourrais donc dire une nouvelle valeur, en disant ça pour nommer. Très bien. Ensuite, si je dis le nom et l'âge console.log à nouveau, non, il va imprimer une nouvelle vidéo. Vous savez maintenant comment attribuer et modifier après l' affectation, n'est-ce pas ? Cette deuxième ligne ressemble plutôt une confirmation que cette ligne a fonctionné. Parce que si vous faites quelque chose qui ne fonctionne pas, vous obtiendrez une certaine erreur. Si j'ai écrit cette déclaration dans un suivi incomplet et que cela va me donner une erreur de syntaxe inaperçue et essayer de me dire ce qui ne va pas avec elle. Ils m'envoient, ça me manque. Pardon ? C'est la console qui vous donne des commentaires interruptifs. Tout commence, contrairement à ce que nous avons vu avec Visual Studio Code et un code HTML où il essaiera réellement de compenser. Ce n'est pas le cas. Il vous indiquera que vous avez une zone dont vous avez besoin pour le réparer. Très bien, donc quand nous reviendrons, nous examinerons quelques options arithmétiques. Opération, désolé, en JavaScript. 10. Opérations arithmétiques de JavaScript: Salut les gars, bienvenue. Dans cette leçon, nous allons examiner les opérations arithmétiques en JavaScript, ce n'est pas le cas. Les opérations arithmétiques se réfèrent généralement à une caractéristique clé de la plupart des langages de programmation, sinon tous les langages de programmation, est la capacité effectuer certaines opérations mathématiques. Vous pouvez ajouter, soustraire, multiplier. Nous allons juste jeter un coup d'œil à quoi cela ressemble. Est-ce que nous utiliserions JavaScript ? Je vais vider la console. Regardons cela pour que je puisse ajouter facilement deux numéros. Je peux dire un plus un. Vous voyez que c'est le cas, la console me reçoit des commentaires interactifs. C'est deux. Donc un plus dix, c'est 11. Le signe plus lorsque nous traitons de nombreuses publicités, les chiffres comme vous vous y attendez, n'est-ce pas ? Nous avons donc déjà vu que le signe plus est aussi l'amour d'ajouter une chaîne ou deux cordes ou un chiffre et une chaîne. Avec une chaîne ou un mot, chaîne est représentée par les guillemets avec des guillemets simples ou des guillemets doubles. Les deux représentent une chaîne. Je peux donc toujours voir la chaîne 1 parce qu'il y a des moments où un chiffre ou un nombre est utilisé, mais ce n'est pas nécessairement à des fins mathématiques comme un numéro fractionné de licence ou quelque chose comme ça. Il ne sera pas vraiment utilisé pour les mathématiques, ce que vous appelez ça un numéro. Vous pourriez donc vous retrouver avec quelque chose comme A1, R1. Mais si ce nombre finit par être utilisé à des fins non mathématiques et que vous l'ajoutez, disons un chiffre, alors vous allez vous retrouver avec quelque chose comme un, soixante-dix, cinq, soixante-dix, soixante-dix, soixante-dix, soixante-dix six. Parce que cette chaîne le chiffre vont vous donner la chaîne et le chiffre. Cependant, si je devais ajouter deux chiffres, un plus 75, vous obtiendrez le résultat mathématique de 76. Ce sont des petites choses sur JavaScript que vous ne verrez pas dans beaucoup d'autres langues, mais c'est l'une des fonctionnalités clés dont vous pourrez probablement profiter quand, le cas échéant. Et si ce n'est pas le cas, sachez simplement comment l'utiliser et quand. C'est de l'addition, de la multiplication, c'est à peu près la même chose. Donc sept fois h, ça nous donne le produit, n'est-ce pas ? Donc, en mathématiques normales, lorsque nous écrivons, utiliserait-on le symbole X ou X ? En informatique et en langages de programmation, général, vous utilisez l'astérisque, et c'est ainsi que vous dépeignez la multiplication. Voyons ce qui se passe lorsque nous essayons multiplier une chaîne par chiffre. Si je fais une série de fois dans de nombreux, regardez ça, je vais avoir 76 dollars. Cela ne ressemble pas tout à fait à l'ajout, l'opération d'ajout lorsque nous avons la chaîne plus autre chaîne ou un chiffre ou plus autre chose quand il s'agit d' une chaîne plus quelque chose, nous appelons cette concaténation. Donc, nous concaténons la chaîne, concaténant quelque chose en une chaîne. Évidemment, lorsque nous effectuons une multiplication, qu'il s'agisse d'une chaîne ou d'un chiffre, nous obtenons les mêmes résultats. C'est clair. Examinons la division. Donc, si j'en fais dix divisés par C5, on s'attendrait à voir des outils. Donc, le visuel en programmation utilise ce signe, c'est une barre oblique. Dix divisés par deux. Si je faisais ça avec des cordes, qu'est-ce que nous obtiendrions ? Est-ce que vous obtiendrez les mêmes résultats ? C'est ça la vision. Et le prochain de base serait, serait la soustraction. Donc 45 moins cinq nous donne 40. Si je fais des cordes 45 moins cinq, j'en ai toujours 40. Le signe plus est donc le seul qui fonctionne vraiment différemment lorsqu'il s'agit de chiffres par rapport aux chiffres et aux flux. Comme nous pouvons le constater, ils nous donnent tous des résultats très similaires. Cependant, il est toujours bon d'être cohérent. Le mélange et l' appariement sont donc généralement découragés. Je pense qu'ils ne font que compenser le fait que cela puisse arriver. Mais en général, je voulais juste traiter les chiffres lorsque vous faites des mathématiques et laisser ça à ça. C'est bon ? la même manière que nous pourrions attribuer à une variable, la valeur R1 à une variable est de la même façon que nous pouvons dire que le produit est égal. Ensuite, nous vous donnons les deux chiffres 15 fois. Non, cela vous dit non défini parce que vous lui avez donné une déclaration et que j'enfreins mes propres règles qui se sont terminées par un point-virgule, mais je viens de créer une déclaration. Je ne lui ai pas dit de faire quoi que ce soit avec la valeur. Il y a des produits. a une valeur dans les produits, mais il ne sait pas quoi, il n'a pas obtenu de répertoire. Maintenant, je dirais probablement que je voulais voir ce qu'il y a dans les produits. Alors laissez-moi console.log. Ensuite, j'écrirais le protocole. Lorsque je fais cela, je peux voir la valeur des produits. Très bien. Juste, juste une autre chose à signaler. Je n'ai pas mis de points-virgules et à la fin, c' est moi qui me fais acheter et enfreindre les règles, non ? Le fait est que l'artefact est qu'il ne s'agit que d'une déclaration que j' écris à la fois. Ça me divise à m'en sortir. Cependant, si j'écrivais plusieurs déclarations en plusieurs lignes dans cette déclaration ou des instructions pour être exécutées ensemble, je finirais probablement par rencontrer des problèmes. Donc, vous le souhaitez toujours, et avec votre point-virgule avant. C'est à peu près à quoi cela ressemblerait. appuyant sur des opérations arithmétiques simples, vous en avez une accumulée. Alors, qu'est-ce que je veux dire par là, disons que nous l'avons fait, nous allons, nous allons, Normalement un. C'est une variable b égale à dix. Ensuite, j'ai voulu augmenter cette valeur de cinq. Donc, l'augmentation d'un par cinq, cela signifierait que je devrais dire nulle un quelle que soit la valeur ou non une nouvelle valeur d'un an quelle que soit votre valeur, plus cinq et c'est comme ça que je J'ai pu en faire 15 parce que je l'ai augmenté de cinq. Non. Une façon plus courte de le faire serait d'utiliser l'accumulateur ou la méthode accumulée. Si je voulais l' augmenter de cinq, je pourrais dire plus cinq. Très bien, donc cette affirmation va évaluer la même chose que de dire : personne, prenez-vous et ajoutez-y cinq et répondra à votre nouvelle valeur. C'est plutôt normal. Prenez soin de la valeur et ajoutez-en cinq, et quoi que ce soit, c'est ce que nous lui attribuons. Donc, si j'augmente, si je fais ça, cela ne devrait pas devenir 20. Va voir ce que je veux dire. Il s'agit donc d'un accumulateur, ce est vrai pour tous les types d'opérations. Si je voulais l'augmenter de cinq fois, je le multiplierais par cinq. Ensuite, de façon générale, on dirait que num un est égal à la norme une fois cinq. Version raccourcie, je peux juste c fois égal à cinq, alors cela devrait l'apporter cinq fois plus. Si je voulais le diminuer de cinq fois, il serait divisé par cinq. Et je suis en train de le réduire de cinq fois. Il en va de même pour la soustraction. Donc, norme un moins égal et ensuite cinq. Cela signifie qu'on en retire cinq. Encore une fois, tous ces éléments augmentent encore la valeur stockée dans le numéro un par rapport au nombre que je déclare ici. Très bien, c'est comme ça que je fonctionne l' arithmétique en JavaScript. 11. Déclarations de décision JavaScript: Très bien les gars, dans cette leçon, nous allons examiner les déclarations de décision, bien que, dans la vie de tous les jours, oublions sont les deux programmes. Dans la vie quotidienne, nous devons prendre des décisions avec certaines choses. Si certains facteurs sont obtenus, nous prenons certaines mesures. Ce même genre de logique. Si c'est le cas, ou quel est le cas ? Le cas est peut-être que nous le faisons ou que nous prenions cette action en fonction peut-être d'une valeur. Alors, combien d'argent ai-je ? Si j'ai 500$, je le ferai. Si j'ai 200$, je le ferai, etc. Nous prenons beaucoup de décisions sur diverses choses dans la vraie vie. C'est donc la même chose avec la programmation. Nous examinons ces variables, que nous examinons ces valeurs. Et ensuite, réfléchissez-y. Si vous achetez quelque chose en ligne et que vous fournissez certaines valeurs à certains moments, cela peut affecter le prix de l'article. Si vous avez fourni un code de coupon , l'article sera réduit d'un certain montant d'argent. Toutes ces choses ne sont que de la programmation et pourraient être accomplies en utilisant le même genre de logique que nous regardons le même genre de froid que nous regardons en JavaScript. Si un code de coupon est présent, exécutez ce calcul. Diminuer le prix de cinq fois ou soustraire si le prix est correct ? Je vous donne juste des scénarios. Ce que nous allons donc examiner c'est que nous avons déjà examiné l'arithmétique. Nous allons maintenant examiner les décisions. La forme de déclaration de décision la plus courante que vous verriez est la déclaration if. Parce que tout comme ce que nous verrions dans nos esprits, si cela l'obtenait, c'est une construction très similaire dans la programmation. Donc, ça commençait par voir si vous ouvriez une parenthèse et chaque fois que j'ouvre des parenthèses, je la ferme parce que si vous ne la fermez pas, cela se retrouvait avec une erreur de syntaxe et cela peut devenir très ennuyeux. Ainsi, chaque fois que j'ouvre une parenthèse ou même des mémoires actuellement, j'ouvre et ferme en même temps. Vous remarquerez donc que je fais ça. Si vous indiquez votre état à l'intérieur des parenthèses . J'ai donc déjà les variables num one parce qu'elles se trouvent dans la même fenêtre de console, elles existent toujours jusqu'à ce que je ferme le navigateur. Donc, personne n'est là. Je suis donc allé dire que si un engourdi est supérieur à dix, puis je passe ensuite à l'intérieur de ces accolades bouclées. Donc si, si les parenthèses sont ouvertes , nous avons une condition. Je n'utilise pas la même chose que le sable à U-Dub appris à l'école. Je suis sûr qu'au moment où nous faisions ce cours, vous auriez appris plus que, moins que des signes. C'est donc plus important que de dire que c'est moins que le signe. Vous pouvez voir plus grand que, égal et égal à. S'il est supérieur ou égal à dix. Vous pouvez voir si c'est le cas, si num un est inférieur ou égal à dix. Vous pouvez voir s'il n'est pas du tout égal. Ce n'est pas égal à ça. Pas égal. Ensuite, vous pouvez voir si c'est équivalent. J'aurais dû voir des équivalents ou non égaux, mais c'est très bien. Vous pouvez voir l'équivalent en utilisant le signe double égal et ensuite l'équivalence nous allons examiner différentes variations de trous qui peuvent sembler parce que JavaScript peut devenir très précis en ce qui concerne l'équivalence. Mais ce que je vois, c'est que ce sont vos opérateurs logiques supérieurs, inférieurs, non égaux, supérieurs ou égaux, inférieurs ou égaux à R, égaux à R équivalent. Remarquez qu'il s'agit d'un double égal, pas d'une seule affectation, d'un seul moyen. Je ne vois pas si num one est égal à. Cela n'exécutera pas F pour voir s'il est équivalent. Je vérifie donc ce côté, cette valeur, quelle que soit l' instruction conditionnelle OU l'opérateur, puis ce côté. Et si c'est vrai , je vais rester à ce que je vais faire. Remarquez donc qu'il continue à s'exécuter. Je dois faire Shift Enter, donc nous allons commencer la ligne suivante. Et d'une manière générale, vous voulez mettre en retrait votre code pour voir clairement que ce code que je suis sur le point d'écrire correspond à cette déclaration if. Donc, si c'est le cas, alors consoles dot log. Je vais juste faire un console.log. Mais le fait est qu' à l'intérieur de ces accolades vous faites presque tout ce qui est nécessaire. Si c'est vrai. Que vas-tu faire ? Allez-vous faire des calculs ? Allez-vous imprimer quelque chose à l'écran ? Allez-vous envoyer une alerte à quelque chose quelque part ? Je peux donc faire console.log. Le bois d'œuvre est dix ans. Sachez quels autres scénarios Bolt, si c'est plus grand que et si c'est moins que dans la même déclaration if, je peux réellement l' enchaîner et dire autrement. Je peux en faire autant d'autres si les secondes disent autrement si, qui signifie que si ce n'est pas vrai, alors celui-ci. Très bien, nous créons donc différents scénarios. Si c'est vrai, faites-le autrement. Si quelque chose d'autre est vrai dans ce scénario, nous mettons tous mes points-virgules. Ensuite, faites-le et nous pouvons faire autant d'autres scénarios en utilisant d'autres si, sinon si un engourdi est plus grand que l'étain. Et ensuite, la même syntaxe s'applique. Attelle bouclée ouverte. N'oubliez pas d'utiliser Maj Enter lorsqu'ils se dirigent vers une nouvelle ligne. Ensuite, je vais essayer un autre type d'impression. Donc, au lieu d'un console.log, je vais faire une alerte. Alert apparaîtrait dans un navigateur. Avez-vous déjà été sur un site Web et que vous vouliez peut-être passer à autre chose et que vous n'avez pas enregistré vos modifications sur cette alerte est apparue dans le navigateur pour voir le clic, vous devez cliquer dessus avant de pouvoir continuer. C'est à peu près ce que fait l'alerte. Je peux donc voir que le numéro d'alerte est supérieur à dix. Ensuite, je peux dire autrement, monsieur, mon vélo et faire autant d'autres. Si les déclarations sont nécessaires. Mais parfois, vous manquez les scénarios et , si aucun de ces scénarios, nous allons extruder et vous vouliez faire une dernière chose. Il y a donc un dernier recours si rien d'autre n'est vrai. Très bien, je pense que Global, 500$ que j'ai eu pour dîner, si j'ai 400$, je vais aller au cinéma pour 300$. J'allais le faire. Sinon, je reste à la maison. Sinon, il y aurait, ou si vous dites simplement autre chose, ouvrez l'orthèse bouclée, puis vous indiquez ce que vous voulez faire. Si rien de ce que vous avez dit ci-dessus n'est vrai , c'est ce que je suis allé faire. Je voulais donc faire un console.log et dire quelque chose comme si rien ne peut arriver, quelque chose comme ça. C'est donc votre dernier point. Donc c'est simple, sinon, si vous ne pouvez avoir que le si vous pouvez l'avoir si c'est injuste autrement. Donc, vous n'avez pas besoin d' avoir d' autre si entre les deux égaux à si cela, sinon c'est bon, Vous pourriez même avoir une déclaration if pour voir si c'est vrai, alors faites-le. Si ce n'est pas vrai, il suffit de sauter dessus et de passer à la ligne de code suivante de toute façon. Ce sont donc des choses que vous pouvez faire pour prendre des décisions. Donc, si je lance ceci et que j'appuie sur MTC ici, le numéro de journal de la console sera dix parce que nous avions défini le numéro un sur dix. Donc, si je dis numéro un, votre valeur n'est pas 25. Voyons ce qui se passe. Je vais donc relancer cette déclaration si. La valeur Norm one n'est pas 25s va à nouveau passer par l'instruction if. Et puis j'appuie sur Entrée, regarde cette alerte, sorte que ce nombre est supérieur à dix. C'est donc ce que fait cette alerte. Et ensuite, si je suis assis sur un seul pour être égal à cinq. Donc non, il n'est pas égal à dix et il n'est pas supérieur à dix. Nous nous attendons à ce que ça se passe, oh, désolé. Oui, on y va. Il va dire que si rien n'était arrivé parce que ce n'est pas vrai, ce n'est pas vrai. Sinon, c'est ce que nous allons faire. C'est-à-dire que vous prenez des décisions simples en JavaScript. Sachez que le prochain que nous allons examiner s'appelle un interrupteur. L'interrupteur est relativement facile. C'est assez similaire, mais il est utilisé dans différentes opérations. C'est donc probablement plus comme quatre grilles. Disons donc que les notes ont toujours été marquées intenses. Si vous arrivez à 100, l'apostrophe en a eu 50, vous avez à peine réussi. Et si vous avez 0, eh bien, ce n'est pas des dizaines, n'est-ce pas ? Supposons que vous ayez trois notes possibles, trois valeurs possibles. Vous aurez soit un 150 sont 0. Je peux donc dire allumer la variable. Nous allons donc simplement utiliser la norme 1 ou soyons plus chariot et utiliser des grilles. Je suis donc allé laisser la cupidité égale à 900. Commençons par ça. Nous avons donc une grille égale à 100. Ensuite, je suis allé prendre notre décision en se basant sur cette valeur, cette grille Maya difficile. Je suis allé dire changer de cupidité. Puis ouvrez mes bretelles bouclées comme d'habitude. Notez donc que les accolades bouclées jouent un rôle important dans ces blocs et ces instructions de blocs. C'est tout un pâté de maisons, Steven. C'est tout ça. Il est multiligne et c'est très strict dans cette structure. Une fois que vous comprenez que la structure qui utilise des parenthèses et des accolades, ou dans le commutateur utilise une fois de plus entre parenthèses, la valeur et les accolades, vous devriez aller bien. L'instruction switch examine la valeur pour voir quelle est la valeur, quelle est la valeur et que dois-je faire cette valeur ? Donc, au lieu de si et d'autre, et quoi que ce soit, nous avons un changement et nous avons une affaire. Ensuite, nous examinons la valeur. Donc, si la casse est 100, ce qui signifie que cette valeur a, cette variable a cette valeur. Ensuite, je dis deux-points. Ensuite, sous cette affaire, je prends une action. Donc console.log, vous avez passé autant de lignes que j'ai besoin que je peux mettre en dessous de cette affaire, mais quand j'aurai fini, je vais juste dire pause. Non, je suis en tabulation parce que je suis très enthousiaste à la mise en forme. Vous pouvez, c'est beaucoup plus lisible lorsque vous mettez en retrait votre code et vous pouvez voir où tout commence et s'arrête. Quand on est débutant. L'éditeur de texte se déclenchera facilement. Je le fais simplement dans la console interactive pour que nous puissions voir cela se produire en temps réel. Grade de commutateur. Et ensuite, nous faisons cette affaire. Ensuite, nous prenons une action ou autant d'actions que nécessaire. Et quand nous aurons fini, nous devons dire « pause ». Si nous ne disons pas de rupture, ce qui arrivera, c'est que lorsque nous définirons les respirations instantanées dans la prématurité. Donc, quand nous définissons un second cas, si la grille est 50 et ensuite je dis console, console.log et vous voyez à peine passé. Et puis, si je n'avais pas de mémoire, il parcourrait les deux. Laissez-moi enlever la pause et vous montrer ça. Vous voyez donc qu'il a fait cela et cela parce qu' il n'y a pas eu de pause, vous avez peut-être à peine passé. Bien sûr, ce n'est pas vrai. Vous verriez l'orange à nos 50 passes ou ne passait pas. J'ai donc besoin d'avoir ce mot-clé break à la fin d'une affaire pour qu' il sache qu'il devrait s'arrêter là. Non. Qu'est-ce que le VC que nous avons dit que si vous avez obtenu 0, alors vous pensez que nous pouvons ajouter un autre cas. Vous pouvez donc ajouter autant de cas. N'oubliez pas que chaque cas est en voyant que c'est le scénario. C'est ce que je voulais faire dans le cas où tout ce stress ou console.log, alors nous pouvons voir que vous avez échoué. Ensuite, on se brise. Alors si rien de ce qui précède. Donc, comme avec l' énoncé if ou nous pouvons dire autre chose, rien d'autre n'était vrai. Alors, il suffit de faire ça. Si rien d'autre n'est vrai, alors c'est de la même façon que je peux voir par défaut, n'entendez pas. Par conséquent, la valeur par défaut signifierait que si aucun de ces cas n'était respecté, il suffit d' utiliser cette action par défaut. Je pourrais donc console.log. Et généralement au moment où il arrive ici, c'est généralement parce que quelque chose n'est pas valide. Donc, dans notre cas, nous pouvons dire que c'est une grille non valide car vous devriez obtenir 150 ou 0. Tout ce qui n'est pas dans ces cas pourrait être une valeur non valide, quelque chose comme ça. Bien sûr, je vous donne juste un scénario. J'espère que vous y réfléchissez et que vous voyez. C'est ainsi que je pourrais appliquer cela à autre chose, n'est-ce pas ? Ce serait donc une grille non valide. C'est ce que nous allons dire au système que si nous ne détectons pas la note fonction des cas que nous avons tous appris, il s'agit d'une note non valide. Si j'appuie sur Entrée, bien sûr, nous avons déjà défini la grille de 100 secondes. Donc, bien sûr, nous passerions si je modifiais la valeur des grilles de 50 et que je réexécuterais cette instruction switch, vous avez à peine réussi. Ensuite, si je change à nouveau la valeur de la grille sur 0, instruction switch évaluera que vous avez échoué. Très bien, vous pouvez voir que ça touche chacun de ces cas. Essayons maintenant un cas par défaut. Donc, si ce n'est pas 150 ou 0 basé sur toute notre ligne, alors en fonction de notre contour, il doit être considéré comme une grille non valide. Donc, lorsque nous le faisons, notes non valides, et c' est essentiellement le cas, les décisions respectent JavaScript, bien sûr, leur complexité est basée sur le scénario et votre contexte sera toujours déterminer quel code est nécessaire pour le résoudre. Mais il est bon de savoir quelles sont vos options et quand les utiliser. 12. Déclarations de répétitions JavaScript: Salut les gars, bienvenue. Dans cette leçon, nous allons examiner les déclarations de répétition. Laissez-moi donc aller de l'avant et vider notre console et commençons. répétition survient lorsque vous avez quelque chose que vous vouliez faire à plusieurs reprises et que vous ne voulez pas le faire manuellement à chaque fois, n'est-ce pas ? Disons donc que nous voulions écrire, imprimer les chiffres de un à dix. Vous pouvez facilement console.log. Nous ne voulons pas imprimer console.log. Ensuite, vous direz, OK, Pour en un point-virgule puis passez au suivant, puis à console.log. Ensuite, nous imprimions l'outil. Je suis sûr que vous comprenez l'essentiel en sachant que vous devrez le faire jusqu'à dix ans, que lorsque vous appuyez sur Entrée , vous obtiendrez le 12345, etc. que vous devrez le faire jusqu'à dix ans, que lorsque vous appuyez sur Entrée, vous obtiendrez le 12345, etc. C'est évidemment très argent. Eh bien, la déclaration de répétition est ce qu'elle suggère. Il nous aide à répéter certaines opérations. Et en écrivant cette structure de répétition, nous pouvons mettre une commande qui dit faire quelque chose nous pouvons mettre une commande qui dit faire quelque chose pendant X temps ou X fois plutôt, ou jusqu'à ce qu'une certaine condition soit remplie. Nous allons donc envisager trop de types de répétitions. Et c'est le cas, les cônes sont contrôlés et contrôlés par l'état. Commençons donc par les cônes contrôlés. Une boucle contre-contrôlée se trouve généralement sous la forme de ce que nous appelons une boucle for-loop. C'est donc pour un nombre X de fois. Faites ça, n'est-ce pas ? Disons que nous voulions imprimer un à dix. Et bien sûr, nous ne voulons pas répéter cette affirmation, donc nous allons dire quatre, puis ouvrir la parenthèse. Et puis nous avons une variable qui va être celle de notre Colin, donc nous en initialisons une, je vais l'appeler, j'ai acheté qu'elle n'a pas besoin d'être appelée. On pourrait m'appeler « cône ». On pourrait appeler ça n' importe quoi. Chiot Xyz. Il n'a vraiment pas d'importance. Je suis la variable la plus couramment utilisée que vous verrez ici, car je suis l'abréviation d'itérateur et le commentaire est également appelé itérateur. y a donc rien de significatif dans l'œil. C'est juste le nom de la variable utilisée pour empêcher les cônes du nombre de fois où l'action a été répétée. C'est donc l'initialisation de notre compteur. Ensuite, nous avons un point-virgule suivi cette condition pour dire que je devrais monter jusqu'à x nombre de fois. Maintenant, remarquez que je vais commencer à 0. Il pourrait commencer à dix ans, il pourrait commencer à 20 ans, ça n'a vraiment pas d'importance. Cependant, vous voulez commencer quelque part, que la condition est logique. Donc évidemment, je ne commencerais pas avec cette vingtaine et ensuite je lui dirais de courir jusqu'à ce que je sois inférieur à r, désolé, Rowan, tant que j'ai moins de dix ans, parce que cela n' aurait pas de sens. J'ai déjà plus de dix ans, donc cette condition aurait été violée là. Ce que vous vouliez faire, c' est de commencer à 0. Typiquement, c'est 0. C'est peut-être un, mais par où commencez-vous ? Cela affectera la maladie. Donc, si je commence à 0, alors la première ligne, et elle aura une valeur de 0. La deuxième ligne aura une valeur de 1, la troisième ligne et une valeur de deux. Cela signifie que lorsque j'aurai dix ans, quand j'atteins la valeur de dix, je n'ai plus moins de dix ans, donc il ne sera pas exécuté celui-là. Mais si vous appelez cela, si vous appelez les doigts d'Antonio à partir de 0, vous appelez votre droite pinky 0, puis 12345 ouvert à neuf, alors vous auriez compté sur les dix doigts. Donc, entre 09 inclus, c'est dix points. Que faisons-nous ? Vous verrez ce que je veux dire. Alors, comme ça commence à 0, je ça commence à 0, vais m'assurer que tu n'égales jamais dix fois parce que je voulais courir dix fois. Nous venons d'établir cela. Ensuite, je vais lui dire d' augmenter chaque fois que Celsius je plus, plus. Cela pourrait aussi être moi plus deux. Je l'ai plus. Cela dépend du nombre de fois que j'ai voulu augmenter. Donc, si je disais que je plus dix, il augmenterait de 0, ferait ce qu'il doit faire pour le 0 R1 appelé Mackenzie toute la minute. De combien devrais-je augmenter, augmenter de dix, alors ce serait si vous vouliez qu'il vienne à deux, vous dites plus deux. Ici. Nous le faisons par plus, parce que nous ne voulions augmenter que d'un à la fois. Et puis je ferme les parenthèses. Je vais donc ouvrir les accolades bouclées et passer à la ligne suivante, bien sûr en utilisant Maj Entrée, puis retrait à l'intérieur de mes accolades bouclées. Encore une fois, nous commençons à 0. Nous voulons passer de 0 jusqu'au numéro le plus proche, car nous ne voulons pas enfreindre cela. Et nous comptons par un chaque fois qu'il fonctionne. Alors, que voulons-nous répéter ? Quoi que nous voulions répéter, nous allons placer à l'intérieur de ces bretelles bouclées. Je n'ai pas dit où nous voulions compter. Étalez ou imprimez les chiffres de un à dix. Je vais dire console.log. Ensuite, j' imprimerai les chiffres. Tellement évident que Kinds va imprimer manuellement car cela va imprimer une à n fois z ne vous montre qu'un. Mais il le regroupe parce qu' il a été imprimé dix fois. C'est un bon exemple parce qu'il est en train de le regrouper, mais c'est vraiment ce qui se passe ici. Donc, si j'essaie encore ça, je veux 12345, pas seulement 110 fois. Cela signifie que je voudrais imprimer la valeur de ce qu'il y a dans l'IA, car l'IA change à chaque fois. Je pense donc que c'est une bonne source de chiffres pour moi. Donc, si j'appuie sur Entrée, regardez ça et tout ce que nous obtenons 0123456789. Il n'y a toujours pas de numéro un à dix. C'était l'objectif, mais nous y arriverons. Mais si vous comptez, c' était la première fois. J'avais 0, puis il est revenu en boucle, augmenté d'un. Est-ce que l'action a encore eu lieu ? Non, parce que j'ai augmenté d'un. Ce n'est pas un. Allez-y encore. C'est 234. Si je fais un compte 12345678910, il a imprimé dix chiffres, mais notre objectif était d'imprimer un à dix. Un moyen facile d'y parvenir serait que si je sais que je serai toujours un de moins que le nombre auquel je m'attends. Ensuite, je peux juste dire que lorsque vous imprimez j'imprime moi plus un. Ajoutez-en un à moi. Chaque fois que nous sommes capables d'imprimer, cela signifie que cela aurait été 0, ce sera un, etc. Et maintenant, nous avons jusqu'à dix ans. Très bien. Regardons ça maintenant. J'ai dit que nous avons commencé à 0 et que nous allons jusqu'à moins de dix ans. Et à cause de cela, nous devons en ajouter un. Que se passe-t-il si nous ne voulions pas que ce travail supplémentaire soit d'en ajouter un ? Donc, c'est très bien. Je pourrais juste dire journal de console, imprimer l'œil. Je voulais que le premier numéro soit imprimé pour être un. Ensuite, quand je fais ça, il ne fera que imprimer 123456789. C'est neuf chiffres. Je n'ai pas les dix. Donc, après avoir ajusté la condition ici, je dois le dire et savoir que nous commençons par un et que je voulais courir jusqu'à ce que je sois inférieur ou égal à dix. Une fois de plus, il fonctionnera jusqu'à ce que cette condition soit violée pendant qu' elle compte à partir du nombre que nous sommes assis. Quel que soit le numéro dans l'état. Donc, si je fais ça, on obtient 12345678910. Très bien, c'est une boucle à contre-contrôle. Ceux-ci sont utiles lorsque vous avez des listes que vous vouliez passer en revue. Comme je l'ai dit, tout ce que vous voulez répéter pendant un certain nombre de fois. C'est pourquoi nous appelons cela une boucle à contre-contrôle. Et cette boucle, en dehors de la définition verbale ici, se présente de la même manière dans la plupart des langues. Par conséquent, en comprenant cela, vous avez maîtrisé ce type de boucle pour au moins six autres langues. Très bien, regardons maintenant le prochain. Il s'agirait d'une boucle de temps ou d'une boucle contrôlée par condition. Et vous en avez deux. Vous avez le temps et l'autre à faire. Connaissant la boucle while, nous commençons par le mot-clé pendant, puis il est contrôlé par condition. Il n'y a donc qu'une condition. On dirait que même si certaines conditions ne sont pas remplies, disons que nous voulions toujours le faire en comptant jusqu'à dix. Je dirais donc que j'ai moins de dix ans. Et puis une sorte de syntaxe, nous avons nos accolades. Et puis, à l'intérieur de nos bretelles bouclées nous voulions mettre en retrait ce que nous voulions répéter. J'ai donc dit, alors que j'ai moins de dix console.log. Très bien, donc nous nous attendons à ce qu'il imprime dix fois des choses non numérotées. Altera me manque, et nous allons explorer cela. D'abord. Quand tu essaieras de lancer ça, ça va lui dire que je n'ai pas été défini. Ce n'est donc pas défini, ce qui signifie que vous essayez d'appeler une variable qui n'existe pas encore, vous ne l'avez pas déclarée. Nous avons examiné la déclaration de variables plus tôt. Nous devons dire laisser le nom de la variable, puis l'utiliser. Nous avons également examiné le fait que les variables que nous avons déclarées, il n'avait pas clair que la console existe toujours. Nous pouvons donc les utiliser car je suis sûr que le nom est toujours là. Très bien. Je peux toujours accéder au nom de toutes ces leçons il y a parce que je suis dans les mêmes incidents de la console, ils se demandent probablement, d'accord. Pourquoi contacter l'accès ? Même si nous avons déclaré que je suis ici. C'est donc ce que nous appellerons la portée. Dans le cadre de cette boucle for-loop, j'existe. Une fois la boucle for-terminée, je n'existe plus. Je n'ai donc pas été déclaré à l'ensemble de la console l'ensemble du navigateur et à toute l'application. Il a vraiment été déclaré à cette boucle for-loop. Comme toutes les autres variables que nous avons faites, je dois définir la variable. Permettez-moi de lui donner une valeur par défaut. Je vais dire que je suis égal à 0. Ensuite, je peux faire appel à la boucle while pour interagir avec l'IA. Mais regardez ce null pendant qu'il est en cours d' exécution, en cours d'exécution, et ils voient ce numéro. Cette condition ne va pas arrêter la boucle. C'est donc là que les boucles contrôlées par condition peuvent être très dangereuses. C'est ce que nous appellerons une boucle finie uniforme. Une boucle infinie est une boucle qui va courir sur la condition qui est remplie, mais l'opération en cours n'est pas orientée vers l'arrêt de la condition. Je vois donc colon ton jusqu'à ce que j'ai moins de dix ans, ce que nous avons déjà établi. Voici la même chose, non ? Mais je ne change pas la valeur de moi, moi, tout ce que je fais, c'est dire quand j'ai moins de dix ans, ce qui sera toujours parce que tout ce que je fais c' est le journal de la console. Je ne vois pas en plus, plus je ne vois rien qui puisse réellement planter des sites Web, planter une application, planter des ordinateurs en général. Vous voulez donc être très prudent, surtout lorsque vous interagissez avec de plus grandes applications, une boucle contrôlée par état en vrac. Très bien ? Vous devrez peut-être vous retrouver, si vous suivez cette commande, vous devrez peut-être vous retrouver dans votre gestionnaire de tâches et aller tuer toute cette session Burroughs car elle ne s'arrêtera pas réellement. courir. Donc, si je cause des dommages à votre ordinateur, je m'excuse, mais vous pouvez simplement supprimer et redémarrer votre navigateur, revenir sur la console et nous laisser réessayer. Je pense donc que nous avons appris notre leçon. Il s'agit d'une toute nouvelle fenêtre de navigateur, donc je n'ai absolument aucun historique d'aucune leçon précédente. Recommençons donc à zéro. Je suis donc égal à 0. Bien sûr, cela commence toujours par définir nos variables. Les variables doivent donc exister avant de les utiliser. Je vais recommencer alors que j'ai moins de dix ans. Et puis tendez la ligne suivante, ouvrez et fermez mes accolades bouclées, fourre-tout , puis retirez. Bien sûr, assurez-vous que lorsque vous passez à la ligne suivante, vous vous déplacez et entrez. Si vous finissez par exécuter cette boucle à nouveau, linéaire s'est déclenché pour tuer la session et revenir dans la console. Soyez donc très prudent. Mais ce que je voulais faire ici, c'est en fait changer la valeur de i à chaque itération afin que nous puissions être sûrs que la valeur ou la condition sera finalement remplie. Je peux donc utiliser un accumulateur ici où nous avons regardé cela, où nous disons simplement que je suis égal à, désolé, un, nous augmentons d'un. Très bien ? Je suis plus égal. Rappelez-vous que ce sera la même chose que ce que je fais ici est écrire ce que nous appellerons un commentaire. Très bien, donc je suis égal moi plus un, c'est la même chose que d'écrire ceci. Maintenant, le problème avec un commentaire est que vous pouvez ajouter un commentaire et n'importe où dans votre code où vous devrez peut-être vous rappeler ce qui se passe. Il y a des blancs, mais ce n'est pas du code réel. Donc, tout ce qui se passe derrière ces doubles barres obliques sera ignoré lorsque tout le bloc de code est Ron. Mais cela peut conduire à une meilleure lisibilité , que ce soit vous-même ou quiconque regarde votre code. Vous pouvez donc prendre l' habitude de le faire, mais nous l'avons examiné plus tard. Donc console.log i. Donc, après avoir connecté I, augmentez la valeur de I d'un, puis vérifiez si je n'ai pas moins de dix. S'il est encore inférieur à dix, s'il est encore inférieur à dix, allez-y et lancez à nouveau et continuez à effectuer cette vérification. C'est pourquoi il s'agit d'un contrôle de condition ou il ne sait pas combien de fois il doit être exécuté. Si c'était négatif dix, dix négatifs ont augmenté d'un. Négatif neuf dit, ce n'est pas dire que je ne vais courir que dix fois, c'est juste vérifier cette condition. Il peut donc s'agir d'une situation où les valeurs sont imprévisibles. Je ne sais pas quelles valeurs je m'attends à obtenir, n'est-ce pas ? Je ne sais pas combien de valeurs il y a, donc je voulais juste courir jusqu'à ce que je sache que je suis satisfait de la condition de sortie. C'est pourquoi nous l'appelons une boucle contrôlée par condition. Ensuite, il s' agit d'une boucle contrôlée par condition pré-vérifiée. Il vérifie d'abord l'état. Allons vérifier, très bien. Sachez que je modifie la valeur chaque fois égale à 0 parce que nous avons commencé à 0, Jake c'est 0, puis il est journal de la console, puis il augmente, puis il vérifie à nouveau. Est-ce qu'un est encore moins de dix ? Oui, c'est vrai. D'accord. L'amour, etc. et puis il continue et ça continue jusqu'à la fin où cela deviendra dix. Et puis il vérifierait que, d'accord, ce n'est plus dix n'est plus inférieur à dix, alors ne le faites plus. C'est donc à peu près la raison pour laquelle il est passé de 0 à dix cette fois, par opposition à la boucle for-qui est passée exactement dix fois. Examinons un autre scénario. Que se passe-t-il si je commençais à la valeur de dix ? Je suis donc allé me laisser égaler à dix. Et puis je suis allé à la même boucle. Lorsque je fais cela, appuyez sur Entrée. Remarquez que rien ne s'est passé parce que je suis déjà pris. Un œil n'est pas inférieur à dix. Je n'ai donc rien à voir avec cette condition déjà violée. Sautez donc cela et passez à la ligne de code suivante ou en minuscules. C'est pourquoi nous appelons cela une boucle vérifiée de précondition. C'est bon ? Non, c'est proche. Relative est la boucle do-while, qui n'est qu'une version inversée de celle-ci. Celui-ci s'appelle une boucle de post-vérification car elle effectue réellement l'action , puis vérifie la condition. Je suis donc allé me laisser pour avoir la valeur de dix. Remarquez que quand j'ai commencé à dix ans, il a vérifié l'état et ça n'a rien fait parce que cette condition a été violée. Allons de l'avant. Cependant, si je dis oui, syntaxe est très similaire. Je dis toujours que c'est dû. Et ensuite, nous disons que faisons-nous ? Alors ouvrez nos bretelles bouclées. Et puis après cette accolade bouclée nous disons avec la condition. Alors faites ceci ou ces actions alors que j'ai moins de dix ans. Eh bien, devinez ce que ça va faire avant même qu'il ne vérifie si cette dentine, donc si je prends le même journal de console, d'accord, je suis content qu'il soit juste là à l'intérieur du « faire », nous devrions voir, imprime la valeur de I au moins une fois. Et puis pas plus parce que je n'ai pas moins de dix ans à ce moment-là parce que j'ai dix ans. Essayons donc celui-là. Cela se termine par un point-virgule ici. Très bien, essayons ça. Un. On y va. Nous avons au moins obtenu la valeur dix avant sa sortie et nous avons donné cette valeur indéfinie. Non défini signifie juste que j'ai fini. Très bien, courez au moins une fois, alors laissez-moi en faire un. C'est bon ? Et puis essayons le « faire ». Cette fois, je vais le faire et faire sur cet ECM. Je venais de m'envelopper dans une autre boucle infinie. Alors, n'allez pas aussi loin. Assurez-vous de mettre le I plus égal à un avant d' exécuter ce code. Je vais donc redémarrer ma console. Très bien, j'ai donc redémarré fenêtre de mon navigateur et j'ai réécrit le code. Remarquez que je l'ai fait en une seule ligne. C'est parfaitement légal, mais je suis sûr que vous le regardez et que vous pensez que c' est un peu plus déroutant que ce garçon avait l'air au départ. Donc oui, c'est légal, mais il n'est pas très lisible. C'est pourquoi je continue à suggérer de les écarter et de les mettre en retrait. Très bien. Je vais donc juste le remettre de la même façon que vous êtes habitué. Et ce que j'ai fait cette fois, c'est de m'assurer que je mets le I plus égal. Donc je vous montre simplement que si vous n'écrivez pas le code ici correctement et que vous ne le faites pas, vous n'avez pas la bonne condition. Vous pouvez être enroulé dans une boucle infinie, ce qui finira par conduire à une mémoire globale une erreur sur n'importe quelle machine. Vous vouliez être très prudent. Laissez-moi essayer encore une fois. Je n'ai pas été très prudent la première fois, c'est pourquoi je vous donne les conseils. accord, alors laissez-moi commencer par un, directement sur la console, la valeur de i, puis incrémente puis vérifie après l'incrémentation, quelle est la valeur ? C'est deux à inculquer moins de dix. Refaisons-le, journal de la console. Et puis ça va et va jusqu'à ce que je prenne dix incréments, puis il vérifie que dix vaut moins de dix. Donc, ça dit, d'accord, c'est fini. Laissez-moi couper juste là. Ce sont des énoncés de répétition, bien sûr, avec de la pratique et plus d'exposition, vous verrez quand les utiliser et vous estimez qu'ils sont utiles. Mais je vous encourage à réfléchir à scénarios que vous voudriez répéter. Des problèmes mathématiques imaginables qui sont manuels et vous pouvez répéter certaines étapes en utilisant notre boucle et aller de l'avant et en avoir l'impression. 13. Fonctions Javascript: Très bien, les gars, donc on arrive bien. Nous apprenons les structures de contrôle de la programmation générale. Mais dans le contexte de JavaScript. Comme je l'ai dit, il s'agit surtout de connaissances transférables. Donc, lorsque vous commencez à apprendre d'autres langues, vous vous rendrez compte qu'une grande partie de la syntaxe identique ou très similaire, vous serez en mesure de transférer le fait que d'accord, j'ai besoin de prendre une décision ou de faire une boucle, etc., à certains moments. Non, nous allons changer de vitesse et passer à un autre sujet, qui est un peu plus complexe mais très amusant, très facile à comprendre une fois que vous aurez pris le coup. Et ce sont des méthodes. Une méthode dans n'importe quel langage de programmation est un moyen d' écrire du code une fois, mais de le réutiliser souvent. Par exemple, journal de points de console. C'est une méthode. Pourquoi est-ce que je dis que c'est une méthode ? Parce que c'est une ligne de code qui me permet de transmettre presque n'importe quoi, n'importe quel nombre de fois. Et je n'ai jamais besoin d'écrire plus que ces deux mots. Donc log est vraiment la méthode et console ne fait que dire console, qui est cet écran noir que nous écrivons lors l'enregistrement, consigne n'importe quel message. Très bien. Il s'agit d'une méthode qui prend une valeur puis exécute une action. Je ne sais pas comment ça fait. Derrière cela, ces deux lignes de code sont ces deux mots du code qui semblent tellement magiques et peuvent même paraître compliqués. Il y a beaucoup plus de complication parce qu'il prend la valeur ici, est-ce que quelque chose indique à tout le navigateur qu' il doit présenter ce message à vous, l'utilisateur final, d'une manière particulière. Très bien, c'est pourquoi je dis que nous ne savons pas comment ça fait. Nous savons juste que nous disons console.log et il le fait. Cela rend donc ce bloc de code qui pourrait être 102050, plus de lignes de code, très utilisable. Il viendra un moment dans le développement de votre application où vous devrez créer des méthodes. Vous n'avez pas beaucoup de méthodes intégrées, car vous avez des méthodes qui vous permettent de manipuler des chaînes, vous avez des méthodes qui vous permettent de manipuler les nombres que vous avez des mathématiques intégrées, etc. Il y en a plusieurs. Nous pouvons les explorer tous et vraiment et vraiment, certains d'entre eux que vous ne pouvez jamais utiliser, et certains d'entre eux que vous n'utilisez que lorsque cela est absolument nécessaire. Mais ce que nous allons faire, c'est regarder comment nous pouvons créer nos propres méthodes en JavaScript à nos propres fins. Commençons par écrire notre propre méthode. Et parfois, les méthodes sont appelées fonctions. Inversement, chaque fois que vous entendez quelqu'un dire fonction ou méthode, c'est généralement la même chose. Donc, le mot-clé est en fait fonction. Vous commencez donc par voir la fonction, comme vous le voyez la plupart du temps après, lorsque nous allons faire quelque chose, nous avons une déclaration ou une déclaration déclarative, n'est-ce pas ? Disons donc que je suis sur le point de déclarer une variable. Si je déclare, je veux une déclaration if, etc. Donc je veux une fonction, je vais dire fonction. Et puis je suis allé lui donner un nom. Que se passe-t-il si nous voulions une fonction qui ajoute deux chiffres ? Commençons simplement. Nous voulons une fonction qui va toujours imprimer Hello World. Donc, au lieu d'écrire console.log bonjour world, chaque fois que vous voulez que cela se produise, vous voulez simplement appeler cette seule méthode et elle imprime simplement bonjour monde. Je peux dire imprimer bonjour le monde. Je suis donc allé donner un nom à cette fonction. Les fonctions sont caractérisées par leurs parenthèses, qu'une valeur soit ou non ici, elles ne sont pas facultatives. Après les parenthèses, nous avons accolades bouclées ouvertes et fermées avec le corps de la fonction. Nous écrivons donc ici ce que nous voulons que cette fonction fasse. Comme je l'ai dit, nous gardons les choses simples. Je veux un console.log, Hello World. Très bien, je ne veux pas simplement dire bonjour le monde de la fonction. Imaginez que chaque fois que vous vouliez le faire, vous deviez écrire cette ligne de code et que vous vouliez le faire à plusieurs endroits de votre code, vous avez un grand site Web. Vous avez plusieurs endroits où vous vouliez imprimer un message articulaire. Vous ne voulez pas avoir à écrire cela à chaque fois. Et puis, si quelque chose change et qu'ils voulaient dire bonjour l'univers, alors si vous tournez 50 fois, vous devez changer. Si 50 fois. Lorsque vous mettez tout cela dans une fonction, suffit d'aller à la fonction et de la modifier. Très bien, laissez-moi, laissez-moi revenir à Hello World et vous montrer. Lorsque j'appuie sur Entrée, je m'inscris que cette fonction existe. Non. Si je voulais imprimer ce message, j'ai deux options. Je peux l'imprimer manuellement parce que je ne connaissais pas de fonction et que j'existais. Et pendant autant de fois que je voulais le faire, le faire et le faire. Je peux juste appeler printf Hello World, ouvrir et fermer des parenthèses. Et regardez ça. C'est tout ce dont j'ai besoin. C'est ce que vous appelez un appel de fonction. Il s'agit donc de la déclaration de fonction, désolé, définition est la définition, l'explication de ce qu'est la fonction, son nom, de ce qu'elle doit faire. Et puis c'est l'appel de fonction, ce qui signifie que je veux que le code à l'intérieur d'une fonction se produise à ce stade. Donc autant de fois que je fais cet appel de fonction, il fera toujours la même chose. Je ne fais que contrôler et contrôler V et intercaler toutes les portes. Chaque fois que vous appelez cela, il fera la même chose. C'est donc ce que je voyais autant d'endroits que vous pourriez en avoir besoin sur votre site Web, vous avez écrit à un moment donné en JavaScript et il peut simplement utiliser cette méthode sur chaque page, n'importe où vous voulez Je sais, disons que le PDG ou qui que ce soit pour qui il allait fâcher. J'ai dit : Ok, on ne veut pas plus longtemps. Je voulais dire bonjour le monde, je voulais dire bonjour l'univers. Tout ce que vous avez à faire, c'est clair, cet objectif à la définition de la fonction. Et il n'est plus imprimé Hello World, il n'est pas imprimé Hello Universe. Mais je voudrais nommer ma fonction en fonction de ce qu'elle fait. Donc je vois imprimer Hello World, mais je change cela pour dire bonjour universel un peu voulu le renommer sorte que si je dois transmettre ce site Web à mon collègue, ils ne seront pas confus. Pourquoi imprimer Hello World dit Hello univers, non ? Vous devez donc toujours garder à l'esprit que le fait de nommer vos fonctions et variables et tout doit toujours refléter à quoi il sert. Ainsi, lorsque vous partez en vacances à Bali et que vous revenez à une fente et que vous y regardez en arrière. Vous n'êtes pas confus de vous demander, Attendez, pourquoi ai-je fait ça ? Que se passe-t-il encore une fois, les noms vous diront, n'est-ce pas ? Disons donc que j'ai mis à jour cette méthode, que j'en ai changé le nom et que j'ai changé ce qu'elle devait faire. Non, partout dans mon code qui avait la Grande-Bretagne jusqu'à o, print bonjour monde, je devrais mettre à jour pour dire l'univers d'impression parce que je sais quand ce peu de code cause imprimer bonjour monde, il va toujours être. Je suis désolé. C'est un peu de désinformation. Laissez-moi revenir en arrière. Je n'ai pas réellement supprimé print hello world fait déjà modifier le nom. Et puis il s'agit en fait d'une toute nouvelle fonction. Il y a donc l'impression Hello world qui existe toujours. Mais sachant que si je voulais imprimer Hello univers, je devrais dire imprimer bonjour univers. Et puis vous verrez Hello univers depuis la fonction. Tellement connu, cela fait de moi deux fonctions qui font deux choses différentes. On imprime Hello World, Grande-Bretagne, solo, universel. Partout où je voulais faire non plus. Je peux faire cet appel de fonction. Parce que nous sommes dans notre console et que nous modifions pas vraiment un fichier texte. C'est pourquoi modifier la définition de la fonction comme je l'ai fait, n'a pas supprimé l'autre fonction et elle vient d'en ajouter une nouvelle. S'il s'agissait d'un fichier texte, bien sûr, ce serait comme changer de phrase et cela prend un fichier. Une fois que vous avez modifié cette phrase, cette intensité est modifiée pour le reste des documents car nous ne travaillons pas avec un document, mais plus tard, vous verrez comment cela fonctionne. Mais ce que je veux dire, c'est que nous savons que nous avons deux fonctions et que nous pouvons simplement appeler l'une ou l'autre à volonté. Nous n'avons pas besoin d'écrire cette commande Alt manuellement et de nous demander si c'est universel notre monde, car nous savons que lorsque nous appelons celle-ci imprime Hello univers, à quoi s'attendre et la même chose de l'impression Hello Monde. Très bien. Examinons maintenant un autre scénario dans lequel vous voudriez peut-être transmettre une valeur. Ainsi, comme avec console.log, nous transmettons une valeur. Je vais appeler cela un paramètre. Le paramètre est similaire à une conception de variable pour la fonction. Et puis, lorsque nous transmettons, une valeur est stockée dans cette variable, puis nous pouvons traiter ce que nous voulons avec cette valeur. Disons donc que nous voulions me donner n'importe quel chiffre et que j'en ajouterai toujours cinq, quelque chose comme ça, ou je vous en donnerai une représentation en pourcentage. Très bien ? Si je dis une fonction et disons que je calcule le pourcentage, je donne une décimale. Oui, calculez la décimale. Faisons ça. Calculez la décimale. Très bien. Je divise toujours le nombre que vous me donnez par 0. Je peux facilement dire nul un. Num que je vois crée un appel de fonction, il est calculé décimal, et s'attendre à ce qu'un nombre ou valeur appelée num soit transmis. Alors, exactement de la même façon. La seule différence entre cette fonction et celle que nous avons faite pour l'impression. La seule différence est que celle-ci prend cette valeur comme paramètre. Mais ce que je peux faire ici, c'est le retour, n'est-ce pas ? C'est donc ce que nous appellerons une fonction de retour de valeur où elle va faire quelque chose et c'est généralement utile que les mathématiques soient une manipulation. Vous envoyez donc la valeur d'origine et vous vous attendez à obtenir une valeur de décalage de version manipulée. Ce que votre fonction ferait, c'est renvoyer la valeur manipulée. Donc je dirais juste retourner un nombre de fois. 0.01, qui si mes calculs sont corrects, est juste la représentation de 100 en décimales, n'est-ce pas ? Une autre façon de le faire consiste diviser directement par 100. Même chose. Très bien. Laissons-le à celui-là. Si normal divisé par 100. Et cela devrait nous donner la représentation décimale. Je viens donc de déclarer cette nouvelle fonction. Et puis, si je l'appelle, calculez la décimale et passez en étain. Si je passe cela signifie que quelle que soit la valeur que j'ai mise ici sera stockée en num. Il devrait donc renvoyer tout ce que je manipule ou toute manipulation appliquée à engourdie. Donc, quand j'appelle ça, j'ai 0,1. Asseyez-vous. Si je l'appelle à nouveau avec 101, cela sera toujours sans faute. Faites ce calcul pour moi. C'est pourquoi j'ai dit que vous pouvez écrire le code une fois, puis utiliser le téléphone SHA-1 autant de fois avec autant d'autres valeurs que vous pourriez avoir besoin. Très, très pratique. Donc, quelle que soit la valeur que je transmets, je vais toujours obtenir la représentation décimale. Essayons encore une fois. Que faire si je disais « fonction » ? Calculer le produit ? Celui-ci est censé prendre deux chiffres. Disons donc num1 et num2. Ensuite, je veux calculer le produit de ces deux chiffres. Donc, les produits seraient que je retournerais la valeur après avoir multiplié num1 et num2. C'est tout ce que nous calculons les produits. Très bien, entrez. Maintenant, nous avons aussi cette fonction, tant de fonctions que je suis en train de créer. Vous n'êtes donc pas limité, ce n'est pas comme si une seule fonction pouvait exister. Vous pouvez avoir autant de fonctions, car une fois que c'est quelque chose que vous risquez de répéter, vous voulez vous assurer de disposer de plusieurs fonctions pouvant gérer la situation ici même. Si je dis calcul, pas décimal cette fois mais produit, et que je lui donne 532, alors il retournera cinq fois 30 pour me donner le volume. Très bien, alors si je disais calculer la décimale pour 32, vous me renderez 0,32. Maintenant, regardez ça. Et si je disais je voulais, je voulais la représentation décimale d'un outil cinq fois 30. Très bien, regardez ce nœud. Je peux bien appeler calculer cela, car le résultat final que je veux est la décimale calculée. À l'intérieur de cela, je peux calculer le produit car il va renvoyer une valeur. Je peux donc le traiter comme s'il s'agissait d' un nombre ou d'une variable. Je peux donc voir le produit calculé, puis lui donner le cinq le 32. Et devinez quoi ? Cinq sur 32 seraient les paramètres définis par la fonction pour nos produits calculés car c'est ce que nous avons fait dans la définition. J'ai besoin de deux valeurs pour appeler le produit de calcul. Je dois lui donner deux valeurs. Quand cela sera renvoyé. Cette valeur renvoyée ne servira pas de volume pour notre décimal calculé, ce que nous avons défini pour voir me donner une valeur et j'ai été stocké dans cette variable appelée adénome, puis donne vous soutenez les résultats. Ce n'est donc qu'un gros appel de fonction où je vois, donnez-moi la valeur de cela. Je vais devoir l'obtenir, aller de l'avant et l'utiliser comme valeur pour cela. Et ça ne fera que marguerite. Il répondra donc à cet appel de fonction qui renvoie une valeur, puis il effectue cet appel de fonction et qui renvoie les résultats finaux. Très bien, je peux faire un certain nombre de choses. Lorsque vous renvoyez une valeur. Si c'est que vous vouliez le stocker dans une variable, vous pouvez dire : Laissez la variable b égale à, puis vous dites calculer le produit. Laissez donc la variable b égale à n'importe quelle valeur renvoyée. Vous ne pouvez le faire qu' avec des fonctions qui renvoient notre journal de console pour Intel World et autres. Cela ne va pas le rendre. Il ne revient pas, c'est juste de l'impression. C'est une directive portant et une fin. Cependant, celle-ci applique la directive et tente renvoyer la valeur par la suite. Très bien, alors quand il renvoie la valeur, vous pouvez toujours l'attraper dans une variable ou, comme nous l'avons vu, nous pouvons la réutiliser de différentes manières. Mais c'est juste un moyen plus rapide de multiplier deux nombres que écrire partout l' écrire partout, car c'est la formule qui change. Si le prix était calculé et que chaque prix doit être balisé de 10 %, vous devez le faire pour chaque produit sur le site Web qui serait fastidieux. Alors que si vous avez écrit une fonction, vous appelez simplement la fonction à chaque fois. Si, si la formule change la semaine prochaine, vous n'avez qu'un seul endroit pour répondre au changement. Vous n'avez pas besoin d'aller à tous les endroits où j'ai fait le changement. Vous avez apporté la seule modification de la fonction, alors c'est tout. Très bien. Je peux toujours dire que donnez-moi le produit de 49. Je ne sais pas si je l'ai signalé plus tôt, mais lorsque vous avez plusieurs valeurs, vous les séparez toujours par des virgules. Avoir la valeur 1, la valeur deux, la virgule, la valeur trois, coma jusqu'au nombre de valeurs dont vous avez besoin pour cette fonction particulière. Pour ce compte, calculez le produit d'un seul numéro. J'ai besoin d'un outil minimum. Si j'en voulais trois, je dois juste changer la définition et dire virgule trois, virgule quatre, etc. Il calculera le produit, le stockera dans le produit variable. Et si je fais simplement un journal de console ou le même produit, cela me montrera que c'est la valeur plutôt que les produits. Très bien ? Toutes les fonctions fonctionnent et toutes les fonctions peuvent vous faciliter la vie. Très bien. 14. Variables et portée de JavaScript: Très bien les gars, donc nous avons examiné les variables, nous avons examiné les déclarations conditionnelles, nous avons examiné la répétition et nous avons examiné les fonctions. Bien que nous n'ayons pas discuté d'un concept appelé scopes. Donc, avant d'aller plus loin, je veux que nous regardions ce que nous voulons dire quand nous parlons de portée. Lorsque je suis dans la fenêtre générale de la console et que je dis que le nom d'une variable soit égal à, puis je lui donne une valeur. Pour juste nommer. Cette variable existe dans le champ d'application de l'ensemble du navigateur, dans le cadre de toute la fenêtre I'm console. Je peux donc utiliser le nom où je veux. Si je voulais écrire une fonction qui imprime le nom, nom d'impression, la valeur, très bien. Je n'ai même pas besoin de prendre un paramètre pour cela car je peux accéder au nom une fois que le nom existe dans la console, je peux simplement dire journal de points de console et nom d'impression. C'est donc ce que nous appellerons une portée afin de ne pas mélanger la portée et le nom global. Si je dis valeur de nom d'impression, il est toujours bon de tester les noms. C'est donc mondial. N'importe quelle fonction, tout peut accéder aux besoins. C'est une variable globale. Très bien ? Sachez, si je définit une fonction et que je dis « print », c'est une valeur de chaîne, je prends une valeur ici, alors appelons-la simplement, appelons-la chaîne de test. C'est ce que j' appelle cette variable. Il est censé imprimer tout ce qui se trouve à l'intérieur des chaînes de test. Je vais donc dire flux de test du journal de console. Chaque fois que nous appelons cette fonction, je voulais simplement imprimer la valeur qui se trouvait dans flux de test. C'est ma définition. Donc, en personne, de savoir que nous avons la fonction qui existe. Donc, si je dis valeur de chaîne d'impression, puis je lui donne une valeur comme tester la fonction d'impression. Quoi qu'il en soit, laissez-moi me séparer. Test de la fonction d'impression. Donnez-lui l'appel de fonction de valeur, il prédira exactement ce que j'ai envoyé. C'est quelque chose que j'ai acheté la dose de journal de console, non ? Quand il est envoyé sur quelque chose de la console, l' imprime sur la console. C'est donc ce que j'ai fait. J'ai créé ma propre fonction où je peux passer n'importe quelle chaîne et elle l' imprimera sur la console. Vous pouvez y penser. Mais ce que je ne peux pas faire, c'est accéder à la chaîne de test depuis n'importe où Autre que la fonction. Si j'essayais de faire quelque chose avec la chaîne de test par elle-même, si j'essayais de consoler la chaîne de test du journal en dehors des limites de cette fonction, je vais obtenir cette erreur. C'est ce que nous appellerons encore une fois la portée. Celui-ci n'est donc pas mondial. La chaîne de test est dans le champ d'application de cette fonction. Ainsi, toute variable déclarée soit dans les paramètres ici, elle est déclarée à l'intérieur des accolades de toute structure de contrôle, que ce soit une instruction, commutateur, une instruction, une répétition, n'importe quoi. Une fois qu'il se trouve dans les limites de cette définition d' instructions il est dans le champ d'application de cette déclaration. Rappelez-vous quand nous faisions nos déclarations de répétition et que j' avais fait ce que j'ai fait car je suis égal à bla et peu importe. Mais quand on l'a essayé avec un certain temps, j'ai dû définir l'œil spécifiquement parce que j'étais unique à la boucle for-loop. Donc, c'était en fait une illustration de portée. Je n'en ai pas parlé cette fois-ci. Très bien. Non, vous comprenez pourquoi j'ai dû revenir en arrière et dire que je suis égal à 0 , puis écrire la boucle while parce que j'ai dû créer une variable globale appelée I à l'époque, j'ai vu que la boucle while J'ai pu voir que j'existe. Une fois de plus, vous pouvez définir variables en dehors de tout le reste, globalement dans le navigateur et globalement pour tous les autres bits de code qui seront écrits. Vous pouvez également définir une variable et l'utiliser dans le cadre d'une structure de contrôle particulière. Je peux facilement définir une autre variable ici et dire laissez-moi, laissez-moi faire cela. Permettez-moi donc de changer cette chaîne de test au-dessus de elle-même pour que nous sachions que cela est dans le cadre de la fonction. Mais je pourrais facilement casser, désolée, enfreindre mes propres règles. On y va. Je pourrais donc facilement dire que le suffixe égal dans la portée de la fonction. Ensuite, nous allons commencer à mélanger et à faire correspondre les connaissances parce que nous sommes en train de devenir des professionnels. Je vais donc dire que la console n'importe quelle chaîne a été transmise. Très bien, plus le suffixe. C'est pourquoi j'ai mis ces deux espaces là. Nous pouvons donc avoir un espace entre la valeur que je transmets manuellement. Et puis cela va exister dans le cadre de cette fonction. Cela ne signifie pas modifier une définition de fonction. J'appuie sur Entrée , puis tout ce que je transmets dans la valeur de chaîne d'impression, n'est-ce pas ? Si je dis, je teste, je teste simplement TO dans la portée de la fonction, non ? Si j'appelle cela, si je lui donne mon nom, ma chaîne, mon étendue de fonction, si j'essaie de changer la valeur du suffixe, suffixe, vous n'êtes pas égal à la portée globale. Voyez que le suffixe est égal à la portée globale, mais je ne voulais pas jeter ce regard là-dessus. Donc, même s'il a créé une variable appelée suffixe et ce script de démonstration, c'est qu'il s'en sort avec beaucoup de cendres qui auraient dû être allumés suffixe, mais travaillons avec ça. Donc, même si j'ai défini le suffixe en haut ici avec la portée globale de la chaîne, lorsque j'appelle ma fonction, la valeur qui est là dont nous savons provient. suffixe est toujours dans la portée des fonctions. Parce que lorsque j'appelle la fonction ici, je lui ai donné la valeur de la chaîne de test. Cette chaîne null a sa valeur. Ensuite, je définit ma version de fonction de cette variable appelée suffixe. Ensuite, j'ai adoré la valeur transmise en plus du suffixe. n'est qu'un exemple de la façon dont le cadrage fonctionne. Lorsque vous avez des bretelles bouclées. Tout ce que vous faites à l'intérieur des accolades bouclés est limité à cela, ces accolades bouclées, si l'instruction, fonctionnent pour la boucle, quelle qu'elle soit. Si vous avez besoin de nouvelles variables pour effectuer cette opération particulière à l'intérieur d'un ensemble d'accolades bouclées. N'hésitez pas à le faire car cette variable va se limiter à cette structure de contrôle particulière. 15. JavaScript et HTML DOM: Très bien les gars, nous avons donc regardé le langage Javascript uniquement dans le contexte et les limites de notre console dans notre navigateur. Examinons cela dans le contexte de la façon dont il pourrait vraiment être utilisé, est-à-dire pour interagir avec le PH HTML normal. Ce que je vais faire, c'est ouvrir une nouvelle fenêtre pour le code Visual Studio. Si vous voulez une toute nouvelle fenêtre, vous pouvez accéder au fichier et simplement accéder à Nouvelle fenêtre. Je ne veux donc pas que nous modifiions le site Web que nous avons créé jusqu'ici, du moins pas encore. Parce que, comme je l'ai dit, JavaScript est quelque chose que vous utilisez quand vous en avez besoin. Ce n'est pas le cas. Oh, je vais expérimenter sur mon site Web avec ça. Mais il est bon de connaître le pouvoir qu'il possède. Alors ouvrons une nouvelle fenêtre, puis créons un nouveau fichier. Et créons un nouveau dossier quelque part. Je vais juste créer un nouveau dossier appelé G est en train de tester et c'est celui que nous allons utiliser R je vais utiliser, vous pouvez créer le vôtre. Et puis je vais créer un nouveau fichier, que nous avons toujours appelé index car il s'agit du premier fichier. Je vais juste faire tourner la boilerplate HTML5. Et je vais créer quelques balises de test. Donc je vais juste dire tester JavaScript dans une balise p. Très bien, nous avons déjà envisagé de nommer nos éléments. Nous pouvons avoir l'ID tester JavaScript. Je vais juste appeler ce test d' identification sur l'alcool, ce test JavaScript avec l'attribut ID. Je vais les donner à la même classe. Donc encore une fois, cela est plus centré sur JavaScript, pas encore tout le site web, du moins. Je ne fais que donner ces valeurs. Je suis allé vous montrer comment vous pouvez interagir avec vos éléments. Quand ils l'ont fait, lorsque vous voulez uniquement les balises p plutôt que vous voulez un élément spécifique avec un ID par rapport ou peu de largeur, la même classe, la même manière que nous pouvons interagir avec eux en utilisant CSS lorsque nous pouvons cibler l'élément en fonction ensemble de sa balise d'élément, de son identifiant ou de sa classe est très similaire à tout JavaScript nous permet de cibler ce dont nous avons besoin , quand nous en avons besoin. Très bien. Je ne fais que rester simple avec tout ça. Je vais juste aller en direct, non ? Maintenant, nous sommes en vie. Nous avons notre petite page. Et lorsque nous cliquons avec le bouton droit de la souris et que nous allons Inspecter et que nous n'allons pas dans la fenêtre, nous pouvons voir nos éléments HTML. Nous pouvons réellement passer à la console et nous pouvons commencer à interagir avec elle. Permettez-moi donc de vider la console et de zoomer un peu. Très bien, disons que nous voulions voir toutes les étiquettes p sur notre pH, n'est-ce pas ? Il est donc clair que nous avons quelques pétaoctets. C'est tout ce que nous avons mis sur la page. Étiquette Peta Guan P avec une carte d'identité et une classe ou des classes, n'est-ce pas ? Donc, si je veux accéder à quelque chose, je dois dire un document que vous ne voulez pas faire basculer ce type de document, il met en surbrillance toute la page. Je ne sais pas si vous avez pris note de ce document représente la page sur laquelle vous vous trouvez. C'est vrai ? Ensuite, grâce au navigateur, nous avons de nombreuses fonctions à notre disposition. Comme je l'ai dit, JavaScript est vaste. Je ne peux pas m'asseoir ici et traverser toutes les choses et ainsi de suite. Ces choses que vous voulez dire ne jamais utiliser ou que vous utiliseriez dans des circonstances très spécialisées. Donc, dans ce cas, je vais aller chercher, puis nous allons voir que nous obtenons élément par ID, récupérons le nom de classe, obtenir par nom, obtenir par nom de balise et obtenir par nom de balise. Commençons par parler de nom. Le nom de la balise signifie que je veux spécifier la balise que je cible, donc je cible les balises p. Regardez-moi ça. Non, ça me montre que j' ai une collection de quatre de D Tau ici, p avec le test d'identification et P2 avec la classe de test. Et puis il voit que le test a ça. C'est comme si c'était université et c'est ce que nous appellerons un tableau. Plus tard, lorsque nous modifierons notre propre site Web, nous travaillerons avec un tableau. Mais je vais juste amener votre prison à ce scénario caractérisé par des accolades carrées. Donc, si j'ai dit obtenir des éléments par nom de balise, alors je vais dire laisser p tags. Donc, c'est juste la variable b égale à. Ensuite, j'appelle ce code aucune balise P n' a tous les éléments là-dedans. Ensuite, je peux faire appel à un test. Je peux faire appel, appelons les tests. Et si je voulais modifier la valeur qu'il contient pour ne pas appeler de texte intérieur et intérieur. Nous avons cette intelligence. Laissez-le égal à b égal à la réinitialisation d'un texte à partir de la console. Regardez ce qu'il va se passer. Donc, l'une des balises p, lorsque j'appuie sur Entrée, nous avons ce texte de réglage depuis la console. Je peux donc utiliser JavaScript pour le modifier. Alors n'oubliez pas que lorsque la page se charge, tout n'est pas statique, c'est là. La seule façon de changer quelque chose est de revenir dans le code Visual Studio et de le modifier. Mais c'est à ce moment que nous concevons. Et si nous voulions mettre une partie du pouvoir entre les mains de nos utilisateurs ? C'est pourquoi nous écrivons du JavaScript à l'intérieur de notre code pour permettre à ces choses de se produire. Ici, nous voyons réinitialiser le texte depuis la console. Très bien. Si nous voulions cibler le spécifique, j'en vois trop ici. Si je voulais être spécifique avec les balises cibles que je veux, je peux dire obtenir élément par ID. En disant obtenir élément par ID, je spécifierais ce nom d'ID, ce qui me permettrait de cibler la valeur de l'identifiant, n'est-ce pas ? Ou si je voulais obtenir ceux avec un nom de classe, je peux dire obtenir des éléments par nom de classe, qui dans ce cas nous donnerait la classe de test. C'était pour l'appeler Sean. Pendant qu'ils l'ont fait, c'était imprimer toute la collection. Je peux donc dire que B est égal à, puis réutiliser cette commande ou cette instruction. Non, nous avons les étiquettes de nom de classe qui ont ces deux-là. Ensuite, à partir de là, nous pouvons réellement voir quelle est la longueur. Nous en avons deux. Nous pouvons voir un certain nombre de choses et nous pourrions même mettre cela dans une boucle for-loop où nous allons modifier la valeur. Il y a donc un certain nombre de choses que nous pouvons faire et comme je l'ai dit, je ne peux pas les épuiser, mais ce sont des pépites que je partage avec vous dans l'ensemble. Javascript lui permet d'interagir avec la page réelle. Plus tard, je n'ai pas accédé à notre site Web. Nous verrons comment modifier la page réelle pour y insérer des scripts, comment la placer dans son propre fichier. Et je vais passer en revue certaines des bases avec vous au fur et à mesure que nous ajouterons le JavaScript réel à notre projet de site Web sur lequel nous travaillons. Alors restez à l'écoute. 16. Comment utiliser JavaScript: Bonjour les gars, bienvenue. Dans cette leçon, nous commencerons à examiner JavaScript. Javascript est un autre de ces langages que vous devez vraiment explorer. Mais c'est l'un de ces langages qu'il est vraiment facile de se mettre au courant et de commencer à comprendre comment fonctionne la programmation en général. JavaScript est donc quelque chose qui est vraiment intégré au navigateur et vous permet de modifier en temps réel ce qui est affiché à l'écran. Comme nous l'avons vu une fois ou en HTML, répondez ajouter le CSS. C'est plutôt comme un citoyen. Oubliez ça. Pendant que le navigateur est en cours d'exécution, il ne fera que restituer ce qui a été écrit. Javascript nous permet de modifier que si le pH est LPS après que Berlin nous ait déjà donné notre document HTML, il a nous ait déjà donné notre document HTML, en quelque sorte vu le contenu, les normes informatiques et tout. Nous ne pouvons rien changer. J'ai encore boulonné, mais ensuite nous pouvons autoriser Java ou JavaScript ou d'autres permis tous encore faire des modifications sur la montre est affiché presque à volonté. Faisons donc quelques expériences ici et voyons comment fonctionne JavaScript. La première chose à noter, c' est que nous avons besoin d'une nouvelle étiquette. Et cela se passerait généralement à la fin de l'étiquette corporelle. Il va donc soit entrer à l'intérieur l'étiquette de tête, soit à la fin de l'étiquette corporelle. Premièrement, la raison pour laquelle vous ne le mettiez dans la tête, c'est plutôt un rendu. Lorsque la page est en cours de rendu, vous voulez tout sur la plage, puis vous voulez exécuter le script car le rendu du navigateur ne fonctionne pas. Donc, si l'Oncotype DX est le premier sur la page, c'est ce qui se termine ici en premier. Même chose pour CSS. Il est toujours bon de rendre de haut en bas. Donc, si vous avez un style de balise p apparaît et que vous vous calmez ici à itération d'un autre style de balise P qui contredit celui ci-dessus, alors il le remplacera. Vous voudrez donc tout ce qui se trouve sur votre page avant l'exécution du script, avant l'exécution du script, c'est pourquoi nous le plaçons généralement à la fin des balises de corps en fonction de la nature du travail me descriptif. Parfois, il peut ne pas fonctionner s'il est placé sur le dessus. Je vais donc juste descendre ici, dire script, étiquette de script ouverte et fermée. Très bien, très important. Et puis ce que je peux faire, c'est créer une fonction ou me laisser faire la plus simple. Désolé, je voulais faire une alerte. Ainsi, en alerte, nous permet de faire apparaître un message à l'écran. Donc, une fois la page chargée, la page chargée l'alerte J S. Très bien, voyons à quoi cela ressemble depuis notre navigateur. Donc, si je navigue vers la page d'index, c'est là que je mets le script. C'est sur la page d'index et naviguez et regardez cette alerte JS chargée de la page, car elle apparaît même avant elle et les PDG, n'est-ce pas ? C'est donc ce que fait cette alerte. Il nous permet de modifier des choses. Donc, si je mets quelque chose comme un bouton, car d'une manière générale, JavaScript est déclenché en fonction d'un événement. Vous voudriez que quelque chose se produise quand quelque chose d'autre arrive ou donc si j' ai tiré le bouton vers le haut, disons que le type est égal au bouton. Et c'est très important, car les boutons sont par défaut pour envoyer les boutons. Donc onclick, qui est l'événement. Je vois donc quand on clique sur ce bouton, je voulais appeler la fonction. Je vais enregistrer le bouton cliqué. Et c'est ça la fonction. Je vais donc dire me critiquer. Très bien, donc nous avons notre bouton allumé jusqu'à ce que vous ayez cliqué sur le bouton comme fonction. Très bien, laissez-moi rafraîchir cette page et voici notre clique. Moi. Quand j'ai cliqué, rien ne se passe. Si j'inspecte l'élément, vous verrez que je reçois un tas d'erreurs de console parce qu'il voit ButtonClicked n'est pas défini. Il sait donc qu'il devrait se tourner vers quelque chose sur une seule clique. Mais ButtonClicked n'est pas défini, il ne sait donc pas quoi le faire. Je vois que je suis censé faire quelque chose, mais rien n'indique. Dans la zone de script Java, je peux donc définir cette fonction. Je verrais donc littéralement la fonction et le nom de la fonction avec les parenthèses ouvertes et fermées. Ils sont donc très importants. Et puis à l'intérieur de cette fonction, Voyons voir, je crée les alertes de noix à voir. Je suis critiqué. Très bien, donc nous avons vu que le JavaScript déclenché automatiquement quand nous venons d'y mettre l'alerte, il vient de vous virer ? Cependant, cette fois, j'essaie de le dire uniquement lorsque vous cliquez sur le bouton. Donc, quand je reviendrai en arrière, je vais recharger la page. Notez que la page est en cours de rechargement, aucune alerte n'apparaît. Mais quand je clique, je reçois l'alerte, on me clique dessus. C'est donc moi, tu sais, je superpose, je suis dynamique. Et c'est la première étape pour créer quelque chose de dynamique dans la conception Web à l'aide de JavaScript. Alors cliquez sur moi. Autant de fois que vous le faites, vous recevrez l'alerte à chaque fois. C'est donc un événement. Très bien, alors commençons, comme on dirait, à vous piéger. Très bien, voyons ce que nous pouvons changer sur la page elle-même lorsque vous cliquez sur le bouton. Que se passe-t-il si je voulais modifier le texte de l'une de ces balises lorsque vous cliquez sur le bouton ? Cliquez donc sur moi pour changer de texte ou autre, laissez-moi créer un autre bouton. Alors cliquez sur moi. Et puis je vais voir changer de texte. Donc, je peux en avoir plusieurs. Cliquez donc sur le bouton pour modifier le texte, cliquez sur. Très bien, donc c'est une autre fonction que je veux. Autant de fonctions que j'ai besoin de faire, je peux les rencontrer pour moi et ensuite avoir notre fonction à changer. Il suffit d'une clique. Eh bien, qu'est-ce que je vais changer ? Disons que je voulais changer le texte de cette balise P pour P, je voulais changer celle-ci pour voir que j'ai cliqué. C'est, c'est du texte JavaScript. Bon, premièrement, je dois pouvoir le cibler. J'ai donc besoin de savoir par pièce d'identité. Je suis donc allé lui donner une pièce d'identité pour voir la cible. Très bien. Rien ne finance juste l'étiquette cible. Rappelez-vous, je vous verrai dans fait que vous n'avez pas deux éléments avec le même identifiant sur la même page car cela peut entraîner des problèmes. Alors voici l'exposition a. Lorsque je veux obtenir l' élément par la balise cible ID, s'il en voit deux, trois ou deux ou plus, il ne sait pas lequel est vraiment ciblé, donc ça ne fonctionne tout simplement pas. Très bien, pour que nous puissions le tester plus tard. Mais maintenant, je vais cibler cette balise P et dire tag cible. Et puis, dans cette péta ou dans cette fonction, je vais plutôt dire des documents. Donc, document signifie que sur cette page, je veux obtenir élément par ID. Donc, vous voyez toutes ces choses que vous pouvez obtenir par un remorqueur et obtenir mon nom. Il peut obtenir mon nom de classe, le nom classe étant la classe égale n'importe quoi. Donc, si vous vouliez affecter plusieurs, alors à nouveau obtenir mon nom de classe et obtenir par inflammation, il obtiendrait toutes ces balises p. Ou vous pouvez obtenir par pièce d'identité, c'est-à-dire celle spécifique, n'est-ce pas ? Obtenez donc élément par ID. Et puis, à l'intérieur des parenthèses vous avez des guillemets ouverts et fermés. Ensuite, vous entrez le nom ou les valeurs d'ID, cette balise cible est l'ID. C'est vrai ? Ensuite, je vais dire ce que je veux modifier. Je veux modifier le HTML interne en HTML signifie ce qu'il y a à l'intérieur de cette balise. Donc, le HTML interne ici va être égal à, je voulais dire du texte de script Java. Très bien, voyons donc ce que tout cela va donner. J'ai donc mon bateau supplémentaire maintenant, rappelez-vous que nous ciblons Todd pour avoir regardé ce texte JavaScript. Je travaille toujours. Tout fonctionne et nous allons cliquer dessus. Il ne changera toujours que des prises JavaScript en fonction de ce que nous avons écrit. Mais si j'actualise la page , je vais toujours refaire le document HTML d'origine parce que c'est ce qu'elle sait. Une fois que je clique à nouveau, il le modifiera à la volée, mais il ne le modifie pas définitivement via le site Web. Tout cela change dans le contexte de mon navigateur. En un mot, c'est ce que propose JavaScript, n'est-ce pas ? Il y a beaucoup plus à cela parce que les instructions IF, vous avez des boucles, vous avez un certain nombre de choses que vous pouvez faire. contexte détermine ce que vous devez faire sur JavaScript, pour être honnête, est l'une de ces choses dont il est bon d'avoir les connaissances de base. Mais vous ne finirez pas vraiment par l' utiliser sur votre visage dans une situation où les alternatives peuvent ne pas être aussi favorables. Je ne vais donc pas passer du temps explorer tous les aspects de cette langue. Je ne fais vraiment que te montrer un tout. Il vous aide à modifier le code HTML déjà entré dans votre DOM. C'est ce qu'on appelle ça, non ? Vous pouvez donc simplement avoir cette sensation dynamique sur votre site Web. Non. Dans certains cas, vous souhaitez que le même type de script soit exécuté sur plusieurs pages. Nous sommes dans le même genre de territoire, sachez, comme avec notre CSS lorsque nous ajoutons notre CSS dans la zone de tête et que nous voulions que ce soit sur plusieurs pages où le placer dans notre fichier. C'est donc là que nous allons aller. Et ensuite, nous voulons que notre script soit dans un fichier pour lui-même. Je vais donc ajouter un nouvel explorateur de fichiers ou il est, ou Explorateur de fichiers. Et je vais appeler ça un point de script, et notre nouvelle extension est js. Remarquez donc le code Visual Studio. Cela vous donne toujours quelques indicateurs qu'ils peuvent savoir à quel type de fichier vous traitez, n'est-ce pas ? Donc, dans un fichier JS, nous n'avons pas besoin des balises de script. Tout ce dont nous avons besoin, c'est la syntaxe JavaScript brute, n'est-ce pas ? Donc script.js, et il aurait juste ces fonctions là. Alors, buck dans le fichier HTML ou une balise de script saura qu'il ressemble à ce script ouvert et fermé. Malheureusement, celui-ci n' est pas auto-fermé. Il est livré avec un attribut appelé SRC qui me permet de référencer le fichier script.js. Je peux donc prendre ceci et appliquer à chaque battement. Par conséquent, le contact a également un bouton, disons Nous contacter. Bouton et cliquez sur. Je voulais voir que c' est une alerte, n'est-ce pas ? Ou on me clique plutôt, non ? Donc, ButtonClicked doit être appelé sur le bouton de contact cliquez également, à droite, donc incluez ce script. Et puis j'ai ce type d'entrée, soumettez ce qui me donne un bouton. Mais devinez quoi ? Je peux dire, onclick. En cliquant, je veux que vous appeliez. Désolé, j'ai oublié les noms des fonctions. Donc, en cliquant, je voulais appeler ButtonClicked. Très bien, voyons comment cela va fonctionner. Je sais donc que sur ma page d'accueil, je me suis discrète, il appellera l'alerte. C'est très bien. Toujours sur le Contact Us, j'ai ce bouton qui, lorsqu'on clique dessus, appelle la même fonction. Nous pouvons donc rendre le JavaScript réutilisable sur plusieurs pages. Vous avez besoin de JavaScript à appliquer à plusieurs endroits. Vous faites ça, n'est-ce pas ? Et ensuite, il poursuivra son fonctionnement comme il le ferait normalement. JavaScript est donc partageable et vous pouvez accéder à son propre fichier. Aucune chose que je vais montrer et ensuite nous pourrons fermer cela pour non, c'est ce qui se passe quand vous commencez à mélanger rapidement. Comme vous le voyez ici, nous avons des images au même endroit, vous avez des fichiers CSS, JavaScript , Web HTML. manière générale, j' aimerais que les fichiers mixent feu d'arrêt selon lequel chaque fichier devrait être sa propre section. Ils sont les alphas ischium les plus importants, ils doivent donc se trouver dans le dossier racine, mais les autres doivent être séparés car vous risquez de vous retrouver avec plusieurs fichiers CSS, plusieurs images pour votre site Web, plusieurs fichiers de script, etc. Donc ce que je fais, c'est les séparer, disons qu'il crée un dossier appelé CSS. Vous avez donc le fichier, Nouveau fichier et Nouveau dossier, ou vous pouvez cliquer avec le bouton droit de la souris et dire Nouveau dossier. Je crée un dossier pour JS ou JavaScript, puis j'en crée un autre pour les images que les idoles appellent IMG. Et soyez prudent car il venait de créer l'IMG sous les dossiers js. Moi. Laissez-moi refaire celui-là. Donc GS assurez-vous que vous ne sélectionnez aucun autre fichier ou dossier et que vous êtes en train de créer. Et ensuite IMG. On y va. Je peux donc déplacer le script vers les données. Je suis juste en train de faire glisser et de déposer. Oui, je reçois le mouvement rapide. Bien sûr. Je vais cependant déplacer ce CSS ici. Demandez-moi encore une fois, déplacez-vous et l'image ou les images peuvent y aller. Donc non, c'est un peu plus soigné, non ? Je sais où se trouvent mes fichiers HTML et autant d' images que moi, ils sont tous dans le même dossier. Tous les fichiers CSS sont connus dossier, etc. Mais regardez ce qui arrive au site Web et tout revient à la normale. La cuisine ne fonctionne pas, les images ont disparu, tout est parti. Pourquoi ? Parce que nous déplacons les emplacements des fichiers. C'est donc une autre chose. Rappelez-vous que j'ai toujours dit parce qu'ils étaient au même niveau, nous pouvions toujours les appeler par leur nom. Non, il y a assez de dossiers et ailleurs. Donc, ce que je dois faire, c'est appeler le dossier, puis passer au jeûne. Ainsi, pour les feuilles de style, le dossier s'appelle CSS pour dire que HF est des styles obliques CSS. Ensuite, pour la page Contactez-nous, il sait maintenant où trouver les fiches de statistiques correctes. s'agit donc que d'une mise à jour rapide que nous devons faire sur chaque page. Toutes les feuilles de statistiques ne sont donc pas de style CSS. Permettez-moi de monter et de modifier cela. C'est vrai ? Donc toutes les pages connues ou qu'elles devraient aller dans le dossier CSS pour obtenir les feuilles de style. Très bien, même chose pour les JavaScript. Notez qu'aucun clic ne fonctionne. Le fichier JavaScript connaît donc les scripts slash js. C'est vrai ? J'y vais donc, récupérez le fichier JS et mettez-le à jour dans toutes les références. Et une fois que c'est fait, le clic fonctionne encore une fois. Très bien, c'est ce qu'on appelle des chemins relatifs, n'est-ce pas ? Vous souhaitez toujours conserver vos chemins d'accès par rapport aux souches de réseau de fichiers qui accèdent aux autres fichiers. Donc, la page Contactez-nous est cette racine, mais ensuite elle doit aller dans j pour accéder au script. Très bien, donc c'est une autre règle de base importante. C'est la même chose pour les images sur le bateau. Ce n'est pas une barre oblique IMG, non ? Je vais donc simplement les supprimer et je vais juste dupliquer celui-ci autant de fois et ensuite l'ordre est restauré. n'est donc qu'un autre principe que j'ai pensé. Oh, puis-je me faufiler là-dedans alors que la variété des fichiers commence à grandir dans votre projet Web, vous voulez vous assurer que vous les séparez avec une délimitation claire afin que vous sachiez exactement où trouver eau et entier. 17. Utiliser jQuery: Très bien, les gars, bienvenue. Nous avons donc jeté un coup d'œil à JavaScript sur l'eau que vous pouvez faire pour une neige. Reprenons-le un peu et commençons à lécher un framework appelé jQuery. Connaître un framework est le résultat d'un groupe de développeurs, généralement des développeurs open source, qui y travaillent depuis des années. Ils continuent de faire la même chose encore et encore et encore. Et ils pensent que s' ils continuent à le faire, il y a quelqu'un d'autre qui continue de le faire aussi. Ce qu'ils font, c'est une sorte de langage de paquet ou certaines commandes couramment utilisées dans une langue particulière. Ils les regroupent dans un seul fichier , puis vous donnent un certain nombre de règles sur la façon dont vous pouvez les réutiliser en utilisant une fraction du code. JQuery est donc ce genre de framework. Ainsi, comme je l'ai dit, JavaScript est très puissant. Il y a beaucoup de choses à faire. Mais il y a certaines choses qui nécessiteraient cinq, 10 lignes de code. Et puis ce qu'ils ont fait, c'est qu'ils ont paquet que je suis mis dans ce que nous appelons un fichier jQuery ou une bibliothèque. Vous pouvez donc accéder à ces 10 lignes de code en utilisant une ligne de code appelant la fonction jQuery. C'est donc ce que nous allons regarder aujourd'hui. Donc, la première étape pour intégrer jQuery dans votre projet serait, eh bien, il y a deux options vraiment, vous pouvez télécharger le fichier. Vous pouvez donc simplement aller sur JQuery.com. Et nous pouvons simplement le faire ici, JQuery.com. Et de là, vous verrez qu'il est léger, compatible CSS3, et c'est un navigateur croisé, n'est-ce pas ? Et il vous donne quelques exemples de syntaxe. Ils peuvent en fait aller ici et obtenir une très bonne documentation d'un bateau, l'API, n'est-ce pas ? Vous pouvez également télécharger les fichiers. Donc, si vous téléchargez le fichier, vous allez juste obtenir un autre fichier js comme nous l'avons vu. Vous pouvez également faire ce que nous appelons ou utiliser ce que nous appelons un CDN, qui est l'abréviation du réseau de diffusion de contenu. Il s'agit donc de fichiers hébergés sur Internet. Je viens donc de taper ce lien, Google APIS.com, et c'est une version hébergée des fichiers JavaScript. Vous voyez donc que le JavaScript que nous avons traversé n' est fondamentalement rien. Tout cela fait des choses folles que je n'ai jamais pu m'asseoir et enseigner en une seule séance. Ce sont des années et des années à faire la même chose en JavaScript et ce que nous appellerons minified. Si vous avez enlevé le Min du lien, il semblerait un peu plus lisible, mais même dans ce cas, il est tout de même assez déverrouillé. Vous pouvez voir à quel point ce fichier est énorme. Donc, la minification est vraiment le processus prendre note de tous ces espaces blancs, ce qui réduit variablement la taille, la taille globale du fichier lui-même, n'est-ce pas ? C'est pourquoi nous nous retrouvons avec le minimum. Donc ce que je disais, c'est qu'au lieu de ne pas charger cette minute et d' essayer de le mettre dans le projet. Vous avez également la possibilité de le référencer directement depuis le site Web. Cela se chargerait donc plus rapidement lorsque votre projet est vu sur Internet, car Lord Foster, à partir du serveur de Google, quelqu'un est calculé et il le ferait de votre serveur à leur ordinateur ou à leur navigateur, n'est-ce pas ? Donc, ce que nous allons faire, c'est simplement utiliser l'option CDN et inclure jQuery dans notre site Web tel que nous l'avons. Alors, allez dans l'index. Commençons par l'indice. Ce que je vais faire, c'est utiliser la même balise de script sauf que le SRC sera l'URL du fichier. Donc, si vous ne travaillez pas avec une connexion Internet, vous n'avez peut-être pas cette option. Vous voudrez aller aussi vite. Donc, si vous devez télécharger le fichier et que ce n'est pas un problème, vous avez plusieurs options. Pour moi, le plus simple serait d'aller ici en charge. Parfois, ce que je fais, c'est que je vais à la graine, copie tout ça quand même, retourne, crée un nouveau fichier JS. Donc cela crée un nouveau fichier et je l'appellerai jQuery dot js, non ? Ensuite, collez le contenu du fichier. Et puis c'est mon fichier jQuery js. Lisez ceci. C'est difficile à regarder, mais c'est ce que c'est. Donc, au lieu d'utiliser le CDN, et je dirais utiliser soit nos mégots au lieu d'utiliser le CDN, ce point de point, vous pourriez simplement dire que vous faites référence votre fichier jQuery dot js ou tout ce que vous appelez C'est ça, n'est-ce pas ? Vous avez donc un certain nombre d'options. Encore une fois, cela devrait être slash jQuery. On y va. Très bien, vous avez donc un certain nombre d'options quand il s'agit de faire référence à ce cadre. Notez aussi que je le mets en place mes propres scripts parce que le truc est que cela fournit comme une base. Donc une fois que j'ai obtenu, il fait 100, mal de commandes courantes en JavaScript. Je devrai peut-être référencer toutes ces commandes dans mon propre fichier de script. Donc, l'ordre est important. Laissez-le charger d'abord et ensuite je peux faire référence aux trucs jQuery moins 2 dans mes affaires. Donc, mettez toujours ces fichiers jQuery en haut et toutes les autres dépendances sur les bibliothèques et ainsi de suite. Commencez toujours par ces derniers avant d'accéder à votre code personnalisé car vous pouvez compter sur le code de ces autres fichiers. Très bien, jetons donc un coup d'œil à ce que jQuery peut apporter à la table. Très bien, donc je ne suis pas du genre à utiliser mon fichier de script pour cela. Je vais écrire mon propre code jQuery juste en dessous. Et je vais toujours cibler ça quand on clique dessus, n'est-ce pas ? Laissez-moi donc enlever ce onclick ou vivre crée un autre livre. En fait, permettez-moi de créer un autre bouton pour que nous puissions conserver tous nos exemples. Il n'y aura pas de bouton onclick. Je ne veux pas me voir cacher le titre. N'oubliez pas que nous avons le titre. Nous avions le titre. Voici notre titre, c'était obtenir des armes, des haut-parleurs, tout ce que nous voulons donc masquer ce titre lorsque vous cliquez sur ce bouton. Très bien, donc pour commencer avec jQuery, que voulez-vous faire, c'est dire lorsque le document est prêt, puis je suis prêt à l'exécuter. Vous pouvez donc voir le document du signe du dollar. Il s'agit d'une marque déposée de jQuery. Alors rappelez-vous que vous voyez dans le document avant qu'il ne passe dans le fichier de script R, nous avons vu un document, n'est-ce pas ? Ainsi, dans jQuery, vous voyez un signe dollar, parenthèse ouverte, puis tout ce qui est plus facile à cibler. Donc, où il s'agit de discuter de l'ensemble du document, si vous vouliez une balise p, verrait p. si vous vouliez une balise p, verrait p. Désolé, pas de guillemets. P. J'ai, je garde une mauvaise chose à une personne, n'est-ce pas ? Si je voulais cibler. C'est donc presque comme du CSS. Si je voulais cibler, c'est bon. Je peux juste voir ce signe du dollar supérieur, les parenthèses ouvertes, puis ça bascule à droite ? Butt, c'est vrai. Non, je cible l' ensemble des documents. Je dis que le document est prêt. Dans ce document est prêt. Je veux exécuter cette fonction. Donc à l'intérieur de cette fonction à la fin avec un point-virgule, n'est-ce pas ? Ainsi, la syntaxe peut prendre une courbe d'apprentissage, hérédité peut en prendre d'autres et s'endurer, c'est pourquoi je continue de voir que la pratique devient permanente. Donc, signe dollar, ouvrez la parenthèse la serviette que vous voulez les cibles, que dans ce cas, je soumets le document en premier. Et puis je vois le Dr Reddy, ce qui signifie que c'est ce que j'attends par rapport à cette étiquette. Exécutez cette fonction. Pour qu'à l'intérieur de cette fonction, je puisse avoir autant d'autres fonctions, comme beaucoup d'autres choses que je veux faire. Sachez que la façon la plus courte de le faire serait simplement la fonction C. Il y a donc un moyen plus court. Donc je tourne bien, connais tous les secrets de l'univers. Donc la plupart des exemples que vous verriez auraient document.ready parce que pendant des années C'est tout ce que jQuery l'a fait. Mais plus récemment, ils ont fourni ou abrégé ce mot une version abrégée de ce mot, un signe de dollar, parenthèse ouverte, exécute cette fonction parce qu'elle va déjà déduire que je peux n'exécutez cette fonction que lorsque le document est prêt. Très bien, alors ressemblons événement de clic sur le bouton. Nous avons donc déjà vu comment obtenir un événement onclick en utilisant JavaScript normal avec jQuery. Je peux connaître C, signe dollar, parenthèse ouverte, puis voir le bouton ou éliminer à la recherche que je cherche comme si on s'asseyait. Et puis, si je dis un bouton, cela va cibler chaque livre ici, qui n'est pas vraiment ce que je veux. Je veux cibler ce bouton particulier. Je peux donc lui donner une pièce d'identité, dont nous savons qu'il s'agit d'un nom entièrement unique. Je vais donc dire Hide Title, btn. J'ai donc tendance à le faire avec mes titres plutôt avec mes pièces d'identité. Je sais donc de quel type d' élément il s'agit. Alors, Masquer le titre btn. Donc, si je veux dire que je veux cibler Hide Title BGN, je ferais vraiment un guillemets ouvert. Tout comme CSS, j' utilise le hashtag, insère l'ID des éléments que je cible. Puis je dis un point, cliquez, n'est-ce pas ? Je vois donc quand cet élément est cliqué, exécuter cette fonction. Très bien, vous verrez donc beaucoup de cela dans jQuery. Vous verrez le signe du dollar ou la métope, l'élément recherché puis qu'est-ce que j'attends ? Il s'agit donc d'événements en direct. Nous avons donc vu avec document.ready quand le document est prêt, d' accord, exécuté. Eh bien, lorsque vous cliquez sur cet élément , exécutez cette fonction. Alors, qu'est-ce que nous mettons à l'intérieur de cette fonction ? Donc je peux voir, et avant d'aller plus loin, j' ai mal agi. Si vous avez vu l'erreur avant moi, félicitations, vous êtes officiellement plus intelligent que moi, mais nous sommes en train d'écrire un scénario, nous avons donc besoin de notre scénario. Je m'excuse sincèrement pour cet oubli. Vous commencerez donc à voir que le code indiquant que les couleurs commencent à paraître un peu plus accueillant que le blanc prend. Très bien, donc comme nous l'étions et je vais juste m' assurer de faire mes indentations. Je peux voir où tout commence et s'arrête. C'est donc la fonction principale, puis c'est l'événement à l'intérieur de cette fonction principale. On y va donc. C'est un peu mieux. Maintenant que nous sommes dans le script, vous allez commencer à voir quelques indices de code supplémentaires. Et si vous avez besoin d'aide supplémentaire, vous pouvez toujours obtenir les extraits d'hivers et jQuery à partir des extensions. Dites que si vous allez juste sentir aujourd'hui et que vous recherchez jQuery, vous verriez différents extraits et vous pouvez obtenir de l'aide, une aide supplémentaire pour votre codage à partir des extensions. Bon, alors revenons à ça. Alors, Masquer le titre btn. Cliquez une fois que je vais le faire, puis cible cet élément de titre par son ID. Alors encore une fois, signe dollar, guillemets ouverts, guillemets simples, parenthèses ouvertes ou autres. Et puis les guillemets qui peuvent être singuliers, peuvent être doublés. Cela n'a pas vraiment d' importance à ce stade, mais dans les hashtags que je D des éléments pointent. Et puis je vois toutes les fonctions possibles qu' ils peuvent effectuer dans jQuery. Je vais essayer celui qui dit Toggle. Il est donc écrit afficher ou masquer les éléments. Alors basculez. Imaginez maintenant que vous devez lire, c'est tout ce qu'il y a en JavaScript à voir. Lorsque vous cliquez sur ce bouton, vérifiez si le titre est affiché. S'il est affiché, masquez-le. S'il n'a pas disparu, montrez-le. C'est deux si les instructions sont et c'est tout un bloc de texte comme je viens de vous le dire, par opposition au moment où vous cliquez sur le bouton. Bien, titre et cible. C'est simple, non ? C'est donc ce que jQuery apporte à la table ce genre de condense. Une grande partie du code aurait été abondamment écrite. Laissez-moi donc revenir sur ma page d'accueil et mon serveur Live Server a cessé de fonctionner. Je peux donc toujours cliquer avec le bouton droit de la souris et passer en direct ou simplement cliquer sur Aller en direct dans le coin inférieur droit. Et nous sommes de retour. Voici mon nouveau bouton et regardez ça. Quand je clique dessus, il le bascule. Joli et simple. Regardez tout ce que nous avons accompli à travers trois lignes de code. Très bien, pour que vous puissiez toujours surveiller, vous avez des événements à profusion, et ils ne sont pas limités aux boutons, mais pour vous montrer tous les événements potentiels, vous pouvez obtenir la valeur de certains TA Dites-le à la classe, n'est-ce pas ? Vous pouvez chercher les frères et sœurs. Vous pouvez changer la classe, supprimer la classe, et elle a une classe ou supprimer des attributs et ajouter des attributs, à droite, alors que se passe-t-il si, quand on clique sur elle au lieu de basculer, je voulais ajouter la classe, Je cours, puis je peux spécifier la classe. Donc, dans le styles.css, quelles classes ai-je ? J'ai Dp, j'ai, laissez-moi créer une autre classe. Je vais donc donner ça, je voulais créer une classe appelée point sub title. C'est bon ? Et ce qui arriverait avec un sous-titre, c' est que la curation sera disons frapper en pointillés, juste quelque chose de différent. Et la couleur de fond sera noire. Et la couleur elle-même, couleur du texte serait blanche. Très bien, alors essayons ça. Lorsque j'ai cliqué dessus, j'ai voulu ajouter le sous-titre de la classe. Je suis donc musulman et je dis ajouter le sous-titre de la classe. Et encore une fois, j'ai essayé d'être sensible au mieux à la casse. Voyons donc ce que cela produirait. Donc, en revenant, rafraîchi pour moi, bien sûr, tout le monde est gentil. Je savais que quand je faisais ça, regarde ça. Les tiques changent donc en blanc, donc quelque chose s'est passé. Je vais donc inspecter l'élément pour voir pourquoi tout n'a pas changé. Donc, si j'inspecte et que je jette un coup d'oeil, je vois la classe qui l'a atteint. Laissez-moi me rafraîchir et refaire ça. Donc sur la charge initiale, il y a notre étiquette H1, notre titre et tout. Maintenant, lorsque je clique, vous verrez qu'il a changé. C'est. Il a mis dans le sous-titre, disons changé en temps réel pour nous, n'est-ce pas. Cependant, si nous regardons les droits, nous verrons que le titre est toujours prioritaire sur les sous-titres. Très bien, tous les éléments n'ont pas été obtenus car ils sont toujours remplacés ou remplacés par titre ou l'élément d'origine CSS. C'est pourquoi la ligne pointillée n'est pas apparue, le bloc n'est pas apparu. La couleur bleue blanche, est là. Très bien, donc oui, vous pouvez jouer avec elle et vous pouvez voir comment modifier ce qui va où et comment manipuler les différents éléments. Encore une fois, c'est quelque chose que vous utilisez lorsque vous en avez besoin. Vous pouvez vous asseoir et faire des boutons et faire modifier le DOM toute la journée. Je pourrais dire que quand on clique sur elles, je veux toutes les balises p. Toutes les balises p doivent avoir la norme HTML interne dans notre largeur ou notre hauteur, serait-il HTML ? Donc parfois même je dois entrer et taper sur C, d' accord, lequel convient le mieux à ce que j'aimerais. Très bien, donc c' est la requête J, non ? C'est donc moi qui vois quand je clique sur ce bouton, le même pour masquer btn, je voulais ajouter cette classe. Changeons donc le bascule. Puisque Toggle a parfaitement fonctionné. Très bien, il devrait donc le cacher et il devrait changer tous les pétales HTML pour dire que c'est du texte jQuery. donc actualisé la page I. Lorsque je clique, nous voyons que le bascule fonctionne mais le texte ne change pas. Très bien, pas de problème. Donc cela signifie que la voyelle HTML, sont des voyelles souscrites, y a-t-il autre chose ? Y a-t-il des textes ? Essayons un texte. J'y retourne, je me rafraîchis, et ça ne marche toujours pas. Je vois mon erreur. J'aurais dû avoir les guillemets autour des balises p. Essayons encore une fois. Et tout cela est juste pour montrer que vous travaillez maintenant, n'est-ce pas ? Donc, tout cela est pour vous montrer que parfois il suffit d'aller explorer pour trouver la solution dont vous avez besoin, n'est-ce pas ? Nous voyons donc ici que chaque fois que nous voulons sélectionner toutes les balises d'un certain type, nous avons besoin des guillemets autour de celui-ci. Quand il s'agit d'un document, nous en avons besoin, c'est très bien. Mais lorsque nous voulons cibler un identifiant particulier, nous avons besoin de notre hashtag. Si nous voulions cibler une classe particulière, comme je voulais p, r, je voulais la classe d'information, alors ce sera la même chose. informations sur les points, n'est-ce pas ? Donc, donnez des informations, tout ce qui a de l'information. Je vais donc dire que c' est bon pour moi, Sean. Très bien. Je change donc toutes les balises p pour dire ça. Mais tout ce qui concerne la classe d'information, je voulais dire que c' est de l'inflammation. Fais ça. Vous voyez du texte jQuery. Il s'agit d'informations. Très bien, il y a donc beaucoup de choses que vous pouvez utiliser jQuery pour manipuler. Mais encore une fois, pour moi, c'est une utilité car vous avez besoin d'une sorte de bibliothèque. Et il y a beaucoup d'autres choses que nous ne pourrons pas explorer dans quelques vidéos. Encore une fois, la pratique devient permanente. 18. Introduction à Bootstrap 5: Les gars, bienvenue. Nous terminons donc nos bases en HTML et CSS. Nous avons déjà examiné les bases de JavaScript, et nous avons jeté un coup d'œil au framework appelé jQuery, qui se construit sur le B6. Donc de la même manière que jQuery a été conçu pour réduire certaines des tâches JavaScript répétées sur le code. C'est la même chose avec le Bootstrap, qui est ce que nous allons regarder NON, est conçu pour réduire une partie du code CSS répété que les développeurs ont tendance à faire chaque fois qu'ils créent une contrariété, ils ont tendance à faire ces choses. Ainsi, ce que les développeurs Bootstrap ont fait a été compilé toutes ces fonctions CSS de base dans un seul fichier. Et ensuite, ils vous le fournissent gratuitement. Et vous pouvez simplement l'utiliser à volonté. C'est donc excellent que documenté. Vous pouvez obtenir leur garde sur ce site Web en allant sur bootstrap.com. Et la dernière version est la version 5, 1, 0. Mais ils sont surtout utilisés ceux que vous verriez probablement sur Internet non. Serait 4.6. Puisque celui-ci existe depuis bien plus longtemps et a apporté des changements importants depuis la version précédente, qui était la version trois. Mais nous allons nous concentrer sur la version cinq à ce stade. Et l'installation est assez simple. C'est le même concept. Vous pouvez intégrer le fichier votre système local ou à votre ensemble de ressources de site Web. Ou vous pouvez simplement utiliser le CDN. Ils vous donnent donc en fait les liens CDN que vous auriez un lien CSS CDN, et ils vous donnent un fichier JavaScript, un lien CDN. Une fois de plus, si vous mettez simplement en surbrillance cette URL dans ce lien CDN et que vous y naviguez, vous verrez ce fichier entier. Et c'est la version minifiée. Si je prends le vieux Min et que je regarde juste le CSS et il semble un peu plus lisible. Et vous voyez que c'est le même genre d'objectif que celui que nous avons écrit jusqu' ici même. Juste quelques autres choses et un peu plus de détails car ils ont couvert un grand nombre de scénarios. Très bien. Mais dans cette situation, nous allons simplement utiliser le lien CDN pour l'intégrer à notre site Web que nous avons créé jusqu'ici. Commençons donc par copier cette URL pour que je puisse simplement copier ici. Ensuite, je vais passer au fichier du site Web, puis à l'usure sur les bits d'index. Ce que nous allons faire, c' est le mettre là où nous savons que nous avons mis nos fichiers CSS. J'ai donc mon CSS local, ce qui est toujours important parce que j'ai peut-être fait ce que je veux. J'écrivais donc mon costume pour mes styles personnalisés et j'ai créé mon propre CSS. Mais je voudrais inclure le fichier bootstrap pour le style général. Très bien, donc encore une fois, ils diront que la feuille de style link rel qui avait connu une disparité dans le gazon est égale à. Et en fait, je viens de réaliser que nous avons tout le lien. Alors, laissez-moi juste déposer mes excuses. Je ne savais pas que nous avions tout le lien. Je pensais que c' était juste l'URL. Vous voyez ici que c'est la même balise de lien, juste un peu plus grande. Nous avons donc que le HRF est égal à cette référence CDN, n'est-ce pas ? Encore une fois, si vous n' avez pas ou si vous n'avez pas connexion Internet cohérente lors de la création et du test, vous pouvez toujours obtenir ce fichier, l'enregistrer localement et suivre la même procédure que celle ce que nous avons fait pour nous ou une fiche technique à faible coût. Donc vous obtenez le CDN, vous avez la feuille de style rel, puis nous avons quelques autres choses de ce drapeau d'intégrité, qui utilise essentiellement comme une chaîne encodée pour nous aider ou aider les arrondissements ou pour sur le bord, hors du fichier pour s'assurer qu'il s'agit d'un cinq légitime car il y a gens là-bas qui mettront fichiers malveillants sur les serveurs CDN et feront ensuite de la publicité, Oh oui, vous obtenez le Fichier d'amorçage Javascript , mais le code d'intégrité ne correspond pas à celui donné par le distributeur d'origine. Il serait donc invité. C'est donc ce que cette vérification d' intégrité est en quelque sorte, et l'origine croisée signifie simplement qu'il est accessible à partir de différentes ressources sont traversées par Internet. Il n'est donc pas nécessaire de changer cela, quoi qu'ils nous aient donné, nous l'utilisons correctement ? Et ils sont généralement importants pour les liens CDN, c'est pourquoi ils ont veillé à nous donner. L'autre serait donc ce bundle, les fichiers JavaScript, afin que nous puissions également le copier. Et je sais que je reçois le scénario complet. Je n'ai donc pas besoin d'écrire mon propre fichier de script, donc j'ai toujours le CDN pour jQuery commenté tout ce que je vais faire est d'inclure ce fichier JavaScript au-dessus du jQuery par exemple. Donc ce fichier JavaScript là, pas de problème. Et puis, nous avons d'autres scripts. Donc, l'ordre, encore une fois, compte toujours si vous avez quelque chose qui dépend de jQuery, jQuery doit le poursuivre. Donc je dis que parce que dans les versions précédentes de Bootstrap, bootstrap 4, Il a en fait eu une dépendance à jQuery est si vous regardez le bundle ou les parties JavaScript à insérer, vous verrez le fichier jQuery référencé ci-dessus. Le fichier bootstrap. C'est parce que le Bootstrap JS avait des dépendances sur le fichier jQuery. la même manière que notre fichier de script a des dépendances sur le fichier jQuery. JQuery doit donc venir en premier, puis le nôtre. Dans Bootstrap 5, cependant, ils se sont éloignés de jQuery à un point où ils n'ont besoin que d' un seul fichier JavaScript. donc tout ce dont nous avons besoin. Il peut donc venir avant le jQuery. Maintenant que nous avons fait toutes ces inclusions, jetons un coup d'œil. Je ne vais plus changer de code. Ensuite, le fractionnement en feuilles de style et en script. Et je vais juste passer à la page d'index pour que nous puissions y jeter un coup d'œil. Et si vous êtes très attentif, vous remarquerez de légères différences avec les boutons. Laissez les liens différents simplement en insérant ce fichier CSS, certaines choses ont changé. Très bien, donc encore une fois, ce fichier CSS a un certain nombre de styles qui couvrent un large éventail de choses qui ont textes par défaut qui bonnes polices par défaut ont plutôt de bonnes polices par défaut. certaines couleurs par défaut ont vraiment fière allure. Et juste en mettant Bootstrap, c'est un changement de jeu. Donc, si je compare la maison avec les orteils d'un bateau, alors vous allez voir, d'accord, c'est de retour à notre style habituel. Bien sûr, il y a un autre raffinement à propos de l'OMS cette page ressemble par rapport aux autres. Alors que nous sommes encore sur le sujet de Bootstrap, nous allons également commencer à jeter un coup d'œil au général Lee, n'est-ce pas ? Vous auriez donc réalisé que la page étire le contenu de la page plutôt qu'elle nous étire gauche et dans la mesure du possible. Cela est clairement indiqué par un tout tiré ce qui était ce marron mais gémissait, qui, loin de la page, le point s'étire parce que tout ce que nous avons fait était de définir ce texte. Mais les balises H, p tags, une div, certaines balises qui vont toujours le plus loin possible sur n'importe quel conteneur dans lequel ils se trouvent. Non, c'est le conteneur de mots-clés car ce qui se passe, c'est qu' n'y a pas de problème que vous continuiez réellement il n'y a pas de problème que vous continuiez réellement à moins qu'ils n'aient du contenu qui le remplit à ras bord. Mais d'une manière générale, ils laissent une petite marge à gauche et une petite marge à droite. Mais je ne m'étire pas très à gauche et juste en dehors de certains sites Web, n'est-ce pas ? Ainsi, avec Bootstrap, il est assez facile d'accomplir quelque chose comme ça. Nous allons donc examiner un nouvel élément qui s'appelle une div. Une div ne représente vraiment rien, mais je pense juste que c'est un séparateur, n'est-ce pas ? Donc, une div serait comme une boîte. Donc, div s'étend généralement aussi loin à gauche, aussi loin à droite que possible. La bonne chose à ce sujet, est que vous pouvez réellement dicter la longueur et la largeur, la hauteur et la largeur d'un div ou la hauteur est généralement déterminée par le contenu que vous mettez-y plutôt, et la largeur que vous pouvez déterminer. Ensuite, vous pouvez utiliser ces divs ou boîtes de contenu et les coller les unes à côté des autres, les unes sous les autres et manipuler la façon dont vous voulez que les données s'affichent. Donc, d'une manière générale, avec les mises en page de sites Web, vous auriez une div, vous appelez un conteneur ou un emballage dont tout le pH se trouve généralement à l'intérieur. Appelons donc ce div id est égal au conteneur. À ce stade, il est très important d'utiliser des identifiants. Cela fonctionnera, mais c'est beaucoup plus facile à lire. Lorsque vous utilisez des ID, le nouveau simple DFS puis quand vous ne le faites pas, parce que lorsque vous avez des divs dans des dibs dans les dibs sur les devs, les développeurs, etc. Maintenant, vous ne savez pas quelle div correspond à ce que la carte d'identité peut vous aider à dire quel est notre vie pour l'eau, n'est-ce pas ? Ainsi, à l'intérieur du conteneur, vous avez généralement une section pour la barre de navigation. Je vais juste dire que div id est égal à cool. Et j'ai dit que c'est plus facile et puis j'ai div, id est égal à cause sous la barre de navigation, généralement ils ont le contenu, donc je vais juste dire contenu, non ? Et puis peut-être que j'en aurais un autre qui dit div, id est égal à Footer. C'est là que j'ai dit que je suis une information sur les droits d'auteur , ce genre de choses. De manière générale, un site ou une page Web comporte plutôt trois sections. Le NAV, le contenu et le pied de page. Bien sûr, il peut en ajouter plus, car lorsque vous voulez utiliser côte le contenu ou les colonnes côte à du contenu, vous pouvez ajouter plus de détails selon vos besoins. Mais pour l'instant, nous allons rester très simples. Je vais donc prendre ma barre de navigation et mettre l'intérieur de la div appelée nav. Et puis je vais prendre tout ce qui était censé être du contenu sans citation. Je vais prendre tout ça et mettre à l'intérieur de la div de contenu, non ? Aucune indentation n'aide également à la lisibilité. Donc je le suis toujours, vous allez toujours me voir mettre en retrait mon code pour m' assurer que je peux voir où l'on commence et où tout ce qui a été mis à l'intérieur s'arrête. Très bien, donc div pour la navigation. Liens de navigation. Très bien, laissez-moi les mettre côte à côte. J'ai donc mes liens de navigation, puis j'ai titre et tout le contenu à l'intérieur du contenu. Et puis, en bas, je vais juste dire que c'est le pied de page. C'est vrai ? Maintenant, lorsque je regarde la page en arrière, rien ne change. Lisez, tout est pareil. Donc, les divs ne le font pas vraiment, vous ne mettez pas dans le xylème magiquement se structure. C'est vraiment pour votre structuration et votre propre capacité de manipulation, n'est-ce pas ? Donc, si je voulais le récipient ne soit pas aussi large que le pH, je pouvais facilement voir le style et nous l'avons déjà fait. Pourquoi n'utilisons-nous pas la feuille de style en ligne , car la structure va devoir s'étendre sur plusieurs pages et il serait inefficace d'utiliser le guide de style directement à l'intérieur, mais nous Je vais regarder cela suffit pour comprendre, pour afficher ce qui se passe quand je le dis à 800 pixels. Par 800 pixels, quelle que soit taille de votre écran ou votre résolution à la fois, il est bon de prendre 800 pixels de gauche à droite. Et c'est pourquoi vous voyez cette colonne vertébrale marron coupée. Donc, pour moi, c'est là que 100 pixels s'arrêtent sur l'écran que j'utilise. C'est bon ? Ou si vous ne le vouliez pas, cela pourrait simplement dire 80 pour cent, n'est-ce pas. Par conséquent, le pourcentage signifie que je ne connais pas la taille de l'écran. Et c'est là que vous commencez à parler de conception web réactive, dont Bootstrap prend pleinement en charge. Quand il démarre tout le pourcentage de Humboldt, cela signifie que quelle que soit la taille d'écran sur laquelle je suis, j'essaierai d'en prendre 80 %. Ainsi, 80 pour cent sur mon écran peuvent être différents de 80 pour cent sur votre écran. Ce que vous serez toujours 80 % par rapport à la taille de l'écran. La prochaine chose, c'est que vous voudriez avoir une marge à gauche. Et encore une fois, ce sont des choses que les développeurs Web font toujours lorsqu'ils commencent à concevoir des sites Web. Ils font toujours ces petites astuces pour bien faire la structure et ainsi de suite. Et puis c'est parmi beaucoup de temps passé refaire cette activité, car le nombre devrait le faire, un style, du moins dans ma feuille de style, puis s'assurer qu'il reflète sur toutes les pages. n'est pas une bonne chose avec Bootstrap, c'est qu'il est livré avec des classes prédéfinies. Je peux dire que Kras est égal à et je vais juste dire conteneur. Très bien ? Non, conteneur. Vous trouverez la documentation relative au conteneur dans la documentation Bootstrap. Très bien, donc si vous regardez dans documents et que vous verrez commencer initialement espérer en configurer d'autres. Vous êtes fondamentalement vieux corps Helloworld, toutes ces choses merveilleuses. Mais dans le, laissez-moi voir si je peux le trouver maintenant. Et je vais juste vous montrer que j'essaie de trouver ça pour que vous puissiez trouver disposition et les conteneurs. On y va. Et avoir une classe appelée conteneur définira une largeur maximale à chaque point d'arrêt réactif, ce qui signifie que, simplement en utilisant le conteneur, elle évaluera la taille de l' écran et automatiquement la ligne centrale et marges sur tout ce que vous avez mis à l'intérieur de la div que vous avez dit être le conteneur, n'est-ce pas ? Et ils vous donnent des exemples de code. Donc, les différentes tailles d'écran disent encore une fois que c'est un conteneur pour notre petit écran dit un conteneur pour ce conteneur pour cela. Mais sans spécifier la taille, il s'agira simplement d'un conteneur à travers le tableau ? Non, juste en ajoutant un conteneur, regardez ce qui se passe. Je pense que c'est probablement plus comme 60 ou 70 % de l'écran. Ce que j'obtiens des marges de chaque côté juste en référençant cette classe appelée conteneur. Très bien, comme pour mon titre, chaque titre, je vais l'enlever. Je ne laisse plus mon style personnalisé pousser ma rhubarbe. Je veux utiliser un style Bootstrap. Je vais donc dire que la classe est égale à, et je pense qu'ils en ont un qui s'appelle Jumbotron. Et juste en faisant ça, oh, eh bien, rien ne s'est passé. Et je pense que c'est parce que le jumbotron vient vraiment de la version 4.6 alors que nous sommes dans la version 5. Donc mon bouton, je vis toujours dans le passé, sans problème. Mais encore une fois, c'est pourquoi la documentation est si cool. Il peut toujours aller ici et voir quelles sont vos options. Donc, c'est vrai. Non, je suis sur le document. Je regarde la typographie sur le contenu, et je regarde les différentes classes d'affichage. Disons donc d'en afficher un. C'est la classe que je vais utiliser l'insert de jumbotron. Disons donc que la classe est égale à afficher un. Je suis allé à godets. Vous pouvez voir qu'il est beaucoup plus grand qu' avant, n'est-ce pas ? Vous pouvez donc toujours aller et revenir à la documentation et regarder les options qui s' offrent à elles et voir ce que vous pouvez accomplir. Maintenant, bootstrap est une fois de plus un gros framework, il est donc bon d'avoir une bonne base en CSS, au moins apprécier tous les sélecteurs ont été appelés le travail des valeurs. Quels types d'éléments en HTML peuvent prendre ? Quels types de styles sont compréhension quelque peu générale de cela. Et ensuite, avec Bootstrap, vous pouvez tirer parti de ces connaissances. Et en fait, il suffit de jouer si vous avez besoin d' accomplir quelque chose et de suivre ce qu'est une documentation et que vous regardez parfois, j' ai littéralement une idée et je ne sais pas comment l'accomplir. Je vais ici et je clique sur jusqu'à ce que je vois quelque chose d'utile. Parlons donc des boutons pour ne pas trop vous ennuyer, mais regardons les boutons et le lien. Et si nous voulions les modifier afin de voir qu'il a été modifié par défaut. Mais ensuite, avec Bootstrap, nous avons différents styles de boutons que nous pouvons appliquer. Donc le bouton a l'air, je vais dire moche en ce moment. Et si je voulais le rendre un peu plus joli ? Si je voulais un bouton rouge et la première chose que vous dites BTN, alors vous dites un tiret BTN, puis quel genre de ce que vous voulez. Ils ont donc différents jeux de couleurs, une sorte de douleur intégrée et accédez simplement aux composants, allez dans Boutons et vous verrez les différentes options pour les boutons. Tout ce que vous devez faire, classe est égal à btn et btn dash ce type de nuance que vous voulez. Un bouton bleu principal. C'est secondaire, il existe donc un danger, et cetera, et cetera. Je vais donc essayer de jouer avec eux. Donc, je suis allé à la classe primaire. Voyons le danger. Je veux nos boutons rouges, c'est dangereux. Et je veux que celui-ci soit un bouton sombre, n'est-ce pas ? Aucune raison particulière. Je joue juste avec mes options. Donc, quand je pars, je vois que celui-ci est primordial, celui-ci est dangereux, et celui-ci est sombre. Ce n'est pas facile, non ? Si je voulais passer du noir au vert, je le transforme en succès. Très bien, donc encore une fois, c'est quelque chose que vous ne vous engagez peut-être pas dans la mémoire. Je fais ça depuis des années. Je suis à l'aise, mais je me retrouve toujours dans la documentation et je n'en suis pas sûr. C'est donc quelque chose que vous devez jouer et explorer. Donc, si je voulais que mon lien, qui est cette balise d'ancrage, ressemble à un bouton, je peux faire la même chose. Je peux juste voir btn, btn dash. Et disons que je voulais que celui-ci soit secondaire, n'est-ce pas ? Cela signifie donc qu'il devrait s'agir d'une nuance de vert. On y va. Amazon n'est pas une nuance de gris. Donc, quelqu'un qui vient sur votre site Web pencherait jamais vraiment sur cela. Un bruit, juste une balise d'ancrage, noire sur la barre de navigation. Il ne s'agit clairement que d'un tas d'étiquettes d'ancrage, mais il s'agit également d'une étiquette d'ancrage et sont des boutons et la charge de la même manière. Et si je veux qu'un bouton ressemble à une balise d'ancrage, je peux dire lien de tiret BTN. Et regardez ça. Aucune clique ne me ressemble à une balise d'ancrage, donc je vous montre simplement qu' avec un effort très minimal, vous pouvez manipuler votre contenu assez facilement à l'aide de Bootstrap. Juste en mettant la classe conteneur sur cette div de conteneur. Il a transformé le look et sensation simplement en insérant le CSS, il transforme l'apparence et la sensation. Donc avant de partir, je vais juste essayer d'appliquer un bon style aux conducteurs. Tout d'abord, toutes les pages doivent avoir la même structure. Donc, ce que je vais faire, c'est copier les nouvelles divs que j'ai créées et je vais les coller sur chaque page. Et puis, à l'intérieur de la zone de contenu, je vais simplement remplacer contenu par ce qui se trouvait sur la plage. J'ai déjà la navigation, donc je n'ai pas besoin de répéter ça avec les boutons. Je peux supprimer la navigation sur la page du bateau, mais tout ce qui était dans ce bateau pij, je ne vais pas couper et je vais coller à l'intérieur de la zone de contenu. Très bien, encore une fois, n'oubliez pas de mettre en retrait à tout moment pour que vous puissiez voir où le contenu commence et s'arrête. Et je vais faire la même chose avec notre page de contact. Alors collez, supprimez la zone de navigation, puis cochez ce contenu capturé et collez à l'intérieur de la div de contenu. Très bien, maintenant tout le monde a la même structure de page. Cependant, lorsque nous l'examinons, nous ne voyons aucune différence. Il n'y a littéralement aucune différence. Tout est toujours le même. La seule différence est que non, il y a une zone de pied de page. Très bien. Comment les rendre tous identiques en termes de nœud, d'apparence tangible et de bien-être, tous doivent avoir le fichier CSS pour un seul. Nous allons donc mettre ce fichier CSS et la page des bulletins, placer dans la page Contactez-nous. On y va. Et bien sûr, nous avons besoin de notre fichier JavaScript. Je vais donc juste copier cette référence des Écritures. Par conséquent, chaque page qui doit faire référence à bootstrap doit avoir ces deux fichiers référencés. Très bien, alors après avoir fait tout cela, si nous regardons notre pH en arrière, nous voyons non, le conteneur fonctionne. Très bien, et nous voyons que la police est un peu différente. Et Navbar a l'air différent. Et puis même la forme semble un peu différente, semble un peu plus propre. Bon, alors bootstrap a des choses sympas qui sont des formulaires ? Il y a des croix sympas que vous pouvez utiliser jusqu'à présent. Voici donc à quoi votre forme peut potentiellement ressembler même avec le vol stationnaire et toutes ces choses merveilleuses. C'est aussi facile que de voir former notre classe, alors qu'une classe est égale au contrôle de forme. Je vais donc dire que les cotes brutes sont des étiquettes de forme égale pour l'étiquette et Krazy contrôle la forme pour le contrôle. Essayons donc ça. Alors, en nous contactant, nous allons dire que le système d'exploitation est égal au contrôle de forme. Et je vais tout d'abord le faire pour tous les contrôles de formulaire. Et ensuite, vous voyez simplement la différence, regardez cela automatiquement. Très bien, c'est beaucoup mieux à mon avis. Et puis, nous avons ce bouton moche. Laissez-moi ce bateau moche et assez bien que la classe est égale à btn et je soumets généralement des boutons que j'aime vert ou quelque chose pour indiquer M et vous êtes prêt à partir. Alors commencez-moi ce succès btn-success. Très bien, et avec un effort très minime, vous avez coiffé notre formulaire si nous voulions que le bouton soit plus grand ou cherchez quelques secondes, il bloque btn, droite, donc il s' étirera à droite dans le tableau des pages. Ou cela n'a pas fonctionné. Permettez-moi de vérifier ma documentation. Et dans la documentation, il est dit que nous avons besoin de boutons de blocage. La syntaxe doit ressembler à ceci. Très bien, encore une fois, je vis dans le passé en tant que Bootstrap 4, donc pas de problème pour vérifier la documentation et aller de l'avant. Très bien, alors faisons-le avec nos boutons. Donc je suis juste, je viens littéralement de copier ça à partir du site Bootstrap, mais évidemment je n'ai pas besoin de tout ce code. Tout ce dont j'ai besoin, c'est mon bouton de saisie dans cette zone. Ensuite, je dois m' assurer que j' utilise les mêmes cours. Donc, si je retourne à ma requête Submit, c'est un bloc BTN, je peux supprimer le code excédentaire. C'est parfois ce que je fais. Depuis que je suis là. Je vais juste faire adapter l'échantillon à ce dont j'ai besoin, puis je retire l'excédent. Et voilà, nous avons notre bouton de blocage. Donc, juste pour vous montrer à quel point il est facile de manipuler votre page Web. Une fois que vous consultez la documentation dans Bootstrap, vous avez une bonne compréhension de tous les CSS sur les classes fonctionnelles. Ensuite, vous pouvez simplement appliquer le code à votre fichier HTML en conséquence. Maintenant, la dernière chose que je voulais souligner avant partir, c'est le renard que même si nous avons Bootstrap, et Bootstrap a clairement son propre, disons citer et citer agenda sans citation pour ce que Le pH devrait ressembler. Vous remarquerez que nos styles sont toujours en train de prévaloir. Donc encore une fois, l'ordre compte quand il s'agit de vos fichiers, à savoir CSS et vos fichiers de script, n'est-ce pas ? Même si vous mettez Bootstrap en premier, nous pouvons toujours remplacer certains styles l'aide de notre propre fichier CSS. Donc, si Bootstrap n'a pas bouton violet ou que vous n'aimiez pas les cendres, certaine nuance d'une couleur utilisée par Bootstrap. Vous pouvez toujours aller à votre classe de pile, C, quelle que soit la classe que vous voulez aborder et dire que si je voulais aborder ce BTN, je peux simplement dire point btn et ensuite mettre dans mes propres styles. Et puis il remplacerait en fait le style de point BTN à l'intérieur du fichier bootstrap. Il est donc facile de placer dans votre propre agenda en même temps que le fichier bootstrap. C'est donc une autre introduction rapide et sale à Bootstrap. Au fur et à mesure que nos besoins s'intensifient, nous verrons comment Bootstrap nous aide réellement , en tant qu' outil de productivité, à surmonter certaines tâches subalternes en termes de conception d'interface utilisateur et d'aller de l'avant. Après cela, nous allons voir comment publier notre site Web sur GitHub , puis par extension sur Internet. 19. Ajouter un site Web à GitHub: Très bien les gars, donc à ce stade, nous avons examiné comment développer un web sets de base, statique mais basique, en utilisant HTML, CSS et JavaScript. Vous avez donc également jeté un coup d' œil aux frameworks en JavaScript et CSS sous la forme de jQuery et Bootstrap. Donc, à ce stade, vous connaissez les bases, vous avez une compréhension générale de la façon de créer de nouveaux fichiers en attente pour les lier. Maintenez le lien vers d'autres sites Web. L'hôtel met vos images en place pour les adapter à toutes ces choses. La seule vraie façon de grandir est travailler seul et d'explorer. Cela est donc primordial pour votre développement en tant que développeur Web. Maintenant, nous faisons un pas en avant et nous examinons GitHub. Know github est un outil open source utilisé par des millions de personnes, nôtre, le monde entier. Et ils l'utilisent vraiment pour stocker leurs projets ainsi que pour collaborer avec d'autres développeurs. Il crée donc une plate-forme sympa pour vous permettre de mettre votre code pour suivre toutes les modifications que vous apportez à votre code. Parce que ce qui se passe, c'est que vous pouvez venir demain faire un changement et ensuite vous manquez quelque chose, puis vous vous souvenez de ce que vous avez changé ou pourquoi vous l'avez changé. Et c'est difficile de tout défaire. De bons outils de gestion du travail et du contrôle des sources comme GitHub parce qu' il y en a d'autres. Mais ce type d' outils vous aide à suivre tous les changements apportés par vous et les autres membres de votre équipe à un projet particulier et tout envoi est très facile. Tout d'abord, vous allez sur GitHub.com, vous saisissez votre adresse e-mail, vous vous inscrivez. Je pense que vous devez probablement vérifier vos cônes et vos trucs, mais une fois que vous avez fait cela, vous avez un compte , c'est gratuit, au moins au niveau de base est gratuit et c'est facile à obtenir a commencé. Dans cette leçon, ce que nous allons faire, c'est mettre notre projet Web sur GitHub. Et ensuite, nous allons simplement explorer et cela nous aidera à garder une trace des changements au fur et à mesure que nous évoluons. Maintenant, il s'agit de mon compte GitHub, et vous pouvez voir qu'il est assez actif sur plusieurs projets et qu'il est ouvert. Vous pouvez sauter sur mon profil si vous en avez besoin et regarder quoi que ce soit. J'ai des étudiants de toutes les autres personnes qui collaborent et je peux voir toutes les mises à jour se produire en temps réel. Mais pour l'instant, concentrons-nous sur la création d'un nouveau référentiel pour notre site Web. Il vous suffit donc de cliquer sur ce nouveau bouton, de créer un nouveau référentiel. Je vais dire site web de test. Très bien. Vous pouvez le nommer ma nouvelle contrariété, quoi qu'il soit, c'est juste un conteneur, c'est juste voir quel est le nom du projet. Permettez-moi de créer un conteneur portant ce nom pour ce projet, vous pouvez mettre une description, accord, et vous pouvez le rendre public ou privé. Je vais faire mon propre privé. Mais si vous voulez le partager avec d'autres parce que certaines personnes ou entreprises qui voudraient embaucher, vous aimez vraiment voir que vous aurez un profil GitHub actif. Vous savez donc que vous avez un projet, que vous y travaillez, vous le mettez sur GitHub. Vous pouvez le rendre public et vous pouvez facilement partager cette URL avec quelqu'un et qui sait vous pourriez aider d'autres personnes avec votre code. Pour plus de lois sur les entreprises privées, si vous travaillez sur quelque chose de sérieux, vous voudriez tous le rendre privé afin qu' il ne soit pas accessible publiquement aux gens. Je fais mon propre privé, mais n'hésitez pas à le rendre public afin que vous puissiez montrer vos amis et à votre famille au fur et à mesure. Ainsi, après avoir choisi les options de visibilité, vous n'avez pas vraiment besoin de faire autre chose, mais vous pouvez simplement cliquer sur Créer un référentiel. Sachez qu'une fois le référentiel créé, vous obtenez cet espace de test. Contrairement à l'acide, encore une fois, cette URL qu' ils peuvent partager avec les gens. S'il est public, ils peuvent bien naviguer s'il est répandu, mais vous devez les inviter spécialement à le voir. Si vous le désirez. Il existe plusieurs façons d'obtenir votre code depuis votre machine sur GitHub. Premièrement, vous pouvez aller de l'avant et le faire par une ligne de commande et manuellement, vous pouvez pousser un référentiel existant, ce qui signifie que si vous l' aviez ailleurs, R et un autre open source plate-forme ou plate-forme de contrôle de source plutôt, vous pouvez également la copier. Et ensuite, vous pouvez importer à partir de quelque chose qui n'est pas du tout relié. Donc GitHub, Git est le protocole, get est la technologie derrière GitHub. Et vous disposez d'autres types de technologies qui fournissent des services similaires tels Silvers sur Corral et Team Foundation Server. Très bien, ce que nous utilisons. Avec Visual Studio Code, c'est très simple, du moins ces derniers temps, car vous pouvez simplement copier cette URL, puis accéder à Visual Studio Code et lui faire savoir qu'il s' agit de votre Dépôt Git. En dehors de cela, si vous n'utilisez pas Visual Studio Code, vous pouvez également utiliser le bureau. Vous pouvez donc cliquer sur Configuration sur le bureau et cela vous amènera à télécharger l'outil de bureau si vous ne l'avez pas déjà. Je l'ai vraiment. Et ça ressemble vraiment à ça. C'est donc un autre projet que je suis en train de regarder. Mais ce que ça fait, ça me donne cette belle interface utilisateur. Je n'ai pas à taper de commandes ou quoi que ce soit. J'ai une interface. Et je peux voir toutes les modifications en attente et je peux les valider, ce qui signifie que je peux pousser de ma machine à GitHub à volonté. Je peux faire baisser les changements. Donc, lorsque vous travaillez en équipe, disons vomir, vous construisiez ce site Web. Une personne a travaillé sur la page d'accueil sur autre et les deux sur l' autre, sur le contact. Ou peut-être une personne qui était censée intégrer bootstrap ou télécharger les fichiers Bootstrap et mettre dans le projet sans l' avoir engagé. Et vous en avez besoin pour continuer votre travail, puis vous pouvez simplement cliquer sur tirer et il va automatiquement obtenir tout ce qui est nouveau sur GitHub que vous n'avez pas déjà sur votre machine et mettez automatiquement à jour vos fichiers sur la machine. C'est donc un excellent moyen de rester une fois de plus en synchronisation avec les membres de votre équipe. Allons donc aller de l'avant et obtenir ce site Web de notre ordinateur et sur GitHub pour au moins en ce moment Baco, puisque nous sommes le seul développeur du projet, n'est-ce pas ? Nous allons donc revenir à Visual Studio Code. Nous allons cliquer ici sur cet onglet Contrôle des sources. Nous avons donc exploré la recherche et le contrôle de la source. Et ce que nous allons faire, c'est initialiser le référentiel. Il se peut que vous ayez besoin d' installer Git localement sur votre machine. Parce que ce qui se passe, c' est que git est un contrôle de surveillance des sources distribuées, qui signifie que vous aurez votre propre contrôle de gestion des sources sur votre machine, mais vous pouvez également synchroniser avec notre référentiel distant. Et si vous rencontrez 510 changements sur votre machine et qu'ils conservent des cônes plus courts lorsque vous obtenez une connexion Internet, vous pouvez alors synchroniser avec la télécommande. Et il obtiendrait en fait tous les points de contrôle historiques que vous avez sur votre machine et synchroniserait. C'est donc la polaire de la trousse. Donc, lorsque nous cliquons dessus et que nous disons initialiser le référentiel, vous devez entrer un message. Je suis donc un message pour les sièges de la maison et tous ont marché ces chicanos ou les deux. Je vais donc dire « engagement initial », n'est-ce pas ? Vous allez m'entendre dire un poulet incompétent de façon interchangeable parce que j'ai utilisé deux Team Foundation Server où la nomenclature verrait l'enregistrement, ce qu'ils sont vraiment les mêmes truc. Alors après ça, je suis allé à cette tique qui dit « commettre ». Et ensuite, il me demandera simplement de savoir que Steve change et d' enseigner les changements. Voulez-vous mettre en scène puis engager et je vais dire oui, allez-y. Et une fois cela fait, il a créé le référentiel local. Donc, si je regarde en arrière dans l'explorateur de fichiers, si j'apporte des modifications aux fichiers ici, il va automatiquement commencer le camionnage pour dire, ok, la page du bateau a été modifiée et Je peux en fait rester des changements constants. Je peux ouvrir les modifications. Je peux voir exactement ce qui a été modifié entre les deux fichiers. Ce n'était pas une modification significative, mais disons que j'ai mis un nouveau bloc de texte. Très bien, et puis je dis, d'accord, laissez-moi ouvrir les modifications, puis cela me montrera que cette ligne a été modifiée. Il s'agit d'un nouveau texte. C'est donc ce que la source contrôlée apporte à cette équation. Je vais donc juste enlever l'excédent. Cela n'a pas vraiment d'importance. Ce que je veux savoir, c' est le synchroniser avec ce qui est sur Internet ou avec GitHub, n'est-ce pas ? Donc, en cliquant sur ces trois flèches, je peux faire défiler vers le bas jusqu'à cette partie qui dit télécommande, puis ajouter à distance. Et il est dit ajouter à distance de GitHub, non ? J'ai donc deux options. Je peux cliquer dessus ou je peux simplement revenir à mon référentiel GitHub. Obtenez ce lien, il suffit de copier ça. Revenez ensuite à Visual Studio Code partir de cette URL, appuyez sur Entrée, à droite, puis supprimez Nim. manière générale, vous verrez des gens appeler la première origine éloignée ou mosquée ou quelque chose que j'appelle simplement son origine. Appuyez sur Entrée, puis sur Non, cela me demande. Souhaitez-vous exécuter périodiquement git fetch ? Cela signifie donc ce que j'aime surveiller périodiquement le référentiel de rapports pour détecter toute modification potentielle. Donc, Fetch verrait que vous avez ces modifications en attente, ce qui signifie qu'il s'agit de ces modifications sur GitHub mais que vous ne les avez pas sur votre machine, alors tirer me permettrait de les obtenir. Nous venons donc de voir qu'un pool entier fonctionnerait dans la version de bureau. Donc je vais dire oui, j'aimerais effectuer des récupérations périodiques, n'est-ce pas ? Maintenant, après avoir fait cela, je peux savoir que pousser vers le référentiel distant est que je peux cliquer dessus avec le bouton droit de la souris et dire tirer, pousser ou ne pas cliquer radicalement sur les trois points. Je peux tirer, je peux pousser. Et si je viens ici en tant que poussée, je peux faire une synchronisation. Donc, cela pousserait automatiquement ce qui est nouveau de moi au référentiel et plus ce qui est nouveau à moi, n'est-ce pas ? Il fait donc automatiquement ces deux choses. Donc, si je dis simplement Sync, ça dirait que je n'ai pas d'amont. Si vous souhaitez publier cette branche, je dirai bien. Donc c'est juste qu'un ghetto était vide, mais j'ai du contenu. Vous souhaitez diffuser le contenu, juste une confirmation. Donc, après cela, si j'actualise ma page GitHub, non, je vois tous mes fichiers sur GitHub dans ce référentiel, non ? Une fois de plus, il est disponible pour consultation publique si nécessaire. Mais si ce n'est pas le cas, c'est très bien. Mais vous pouvez voir tous vos fichiers et tout. Disons donc non, que j'ai créé une nouvelle page. J'ai donc créé une nouvelle page et j'appelle ça un post. Bon travail. HTML point de charge utile, n'est-ce pas ? Chaque page, d'accord, c'est tout ce que cette page va avoir. Pas de problème. Donc, à ce stade, vous verrez qu'il est surligné en vert. Cela signifie que c'est engagé, ce qui signifie qu'il est nouveau, non ? Donc, si je clique sur le contrôle source, il y aura des changements S. Je peux saisir mon message et le modifier sur l' une des pages, ou modifier le contenu ou le contenu existant, en ajoutant quelque chose de nouveau. Donc, si j'ai ajouté une ligne de plus, affichez l'image dans les vitesses orbitales, c'est un changement que vous verrez suivre. Il s'agit donc toujours de suivre les changements que vous apportez afin que vous puissiez avoir comptes, car peut-être 23 versions en ligne, quelque chose cesse de fonctionner. Il peut en fait revenir à ce stade avant de procéder à ce changement. Pour voir, c'est la version à partir de laquelle je suis allé continuer à travailler. Nous allons donc le commettre localement. Je vais donc simplement cliquer sur la coche. n'y a pas d'étape où les modifications Fan disent oui ou je peux toujours dire juste pour se débarrasser de ce message et ensuite savoir qu'il est engagé localement. Je voulais sur la télécommande, juste faire une synchronisation, certains synchroniser tous les commits entre les deux côtés. Et après ça, les petites barres bleues ne le font pas. Si je retourne dans mon référentiel et que je me rafraîchis, je vais commencer à voir des modifications, n'est-ce pas ? Il y a 20 secondes, ce commit a été envoyé. Très bien, donc si je clique sur j'y ai ajouté d'autres fichiers, alors affiche un synopsis de toutes les modifications apportées au fichier existant ainsi que de ce qui a été ajouté. Encore une fois, c'est un outil très puissant. Vous pouvez inviter des collaborateurs. Si vous et vos amis ou collègues devez travailler ensemble sur quelque chose, il peut accéder aux paramètres ou au référentiel et accéder à Gérer l'accès. Ensuite, vous devez confirmer votre mot de passe. Mais après cela, vous pourrez inviter un collaborateur. Donc, si vous avez un collègue qui est également sur GitHub et que vous souhaitez travailler avec lui sur ce projet particulier, il vous suffit de mettre l'une de ces options, de les trouver, leur envoyer l'invitation s'ils l'acceptent , ce dépôt fera également partie de leur armée hors dépôt. Ils peuvent faire des commits, pousser et tirer comme vous à ce moment-là. C'est donc tout ce que GitHub fonctionne comme un outil de collaboration. Après cela, je vais vous montrer comment cela nous aide également à publier facilement et gratuitement notre site Web facilement et gratuitement notre site utilisant une autre plateforme appelée Netlify. 20. Créer un site Web public avec Netlify: Très bien, les gars, bienvenue. Nous passons donc au prochain défi, à savoir la publication ou le site Web sur publication ou Internet pour que le monde entier puisse le voir. Donc, ce que nous allons faire, c'est que l'utiliser pour Netlify final est une plate-forme merveilleusement stable qui nous permet de faire beaucoup de choses gratuitement. Et je pense que c'est un bon début voir comment votre œuvre peut facilement être mise sur Internet et publiée avec un minimum d'efforts. La première chose va sur Netlify.com. Ensuite, vous voudriez vous inscrire si vous n'avez pas déjà d'adversaire, ce qui, à ce stade, si vous ne le faites pas, cela serait compréhensible. Je le fais déjà, je peux simplement me connecter à mon compte. Et vous voyez ici que j'ai combien de sites Web entre les projets personnels et les projets des étudiants, mais j'ai un certain nombre de projets initialement à la maison et il a construit des minutes. Vous avez le nombre de membres si vous souhaitez collaborer. Et puis, bien sûr, pour un peu d'argent, je peux commencer à ajouter différentes fonctionnalités à votre armée de votre suite d'outils. Passons donc à un nouveau site de Get CEO easy. C'est un nouveau site de Good. Nous avons donc regardé Get Hub, puis ils permettent un déploiement continu à partir de GitHub, GitHub et Bitbucket. déploiement continu signifie donc que j' apporte des modifications au site Web et je l'emmène dans les nucléophiles Github qui surveille ce référentiel GitHub et que je le publie automatiquement. Cela réduit donc le temps entre la modification et le besoin d' aller mettre à jour le site Web. Tout ce que vous avez à faire est de l'enregistrer dans GitHub et Netlify s'occupera du reste. Donc, pour la publication initiale, nous devons bien sûr la connecter à GitHub. Donc une fois que j'ai fait cela, il m'autorisera parce qu' il me connaît déjà, mais vous devrez peut-être faire d'autres étapes. Ensuite, je peux choisir lequel de ces référentiels. Et j'essaie de me souvenir de ce que j'ai appelé le mien et c' était des sites de test. Je peux juste aller de l'avant et frapper branche de test flip side pour le déployer. Nous le laissons maître et nous laissons tout tel quel et déployons le site. Maintenant, rappelez-vous, dès le premier jour que j'ai dit, cela vous facilitera tellement la vie lorsque vous voulez utiliser des minuscules dans tous vos noms de fichiers et utiliser l'index de mots pour nommer votre tout premier discours, quel que soit votre page d'accueil doit toujours être index. Voici un exemple. Netlify va rechercher automatiquement index.html ou index. Eh bien, il héberge des sites statiques, donc index.html, si votre fichier n'est pas nommé index ou que vous avez des majuscules, cela réduit la probabilité qu'il soit un déploiement réussi sur le premier objectif. y a donc vraiment de bonnes pratiques à suivre. Ou le concept de suivre les meilleures pratiques est vraiment là pour vous protéger et vous faire gagner du temps et des efforts pour déboguer quelque chose qui aurait pu être évité simplement par un nom approprié. Conventions, n'est-ce pas ? Je vais donc cliquer sur Déployer le site. Et cela peut prendre quelques minutes. Et une fois que c'est fait et que vous devrez peut-être actualiser la page quelques fois juste pour vous assurer qu' elle n'est pas déjà publiée, Antony, elle est toujours en cours de déploiement. Mais une fois qu'il est déployé, vous voyez que vous disposez d'une URL. Ils ont généré une URL aléatoire pour vous, ce n'est pas B. Vous pouvez toujours configurer votre domaine personnalisé. quel point vous devrez acheter un domaine, WW dot, vous savez, mon nom.com, ce genre de domaine que vous devrez acheter et vous pouvez également acheter la sécurité, quoi ? C'est gratuit ? Vous disposez d' un site Web sur Internet. Donc, si je clique sur cette URL, mon site Web est sécurisé par HTTPS. Et je peux naviguer, non ? Et tout ce que j'avais dans le fichier web, les fichiers CSS, les fichiers JavaScript, les images, toutes ces images ne sont pas publiées sur Internet, n'est-ce pas ? Disons donc que j'ai modifié ma page d'accueil, n'est-ce pas ? Je vais donc faire cet outil en temps réel pour que vous puissiez voir exactement ce que je veux dire par tout est simplement simplifié depuis vos rues de machines jusqu'à Internet. Je voulais donc voir le monde Hello. Mon site Web. Mon site Web est nul. Très bien, cela prend clairement n'est pas sur la page pour le moment. Voici donc mon changement. J'ai apporté ce changement. Je vais dire une page d'accueil mise à jour, c'est mon message. Les messages sont donc importants. Il est important d'être descriptif car ils vous aideront à l'avenir à savoir, oh, c'est ce que j'ai fait cette fois contre les membres de votre équipe qui apprécieront un résumé des changements. qui est entré avec ce poulet. Je vais donc faire cet engagement, non ? Et une fois que j'ai fait cet engagement, je vais pousser ou me laisser pousser, tirer et couler. Et je vais juste aller, Ne vous montrez plus parce que vous savez, ces invites au bout d'un moment, ils continuent de dire la même chose encore ces invites au bout d'un moment, ils continuent de dire la même chose et encore et encore. Mais une fois que j'ai fait cela, je vais juste sauter par-dessus, vérifier rapidement mon travail juste pour m'assurer. Très bien, et je vois ici juste 30 secondes ou plus, j' ai mis à jour la page d'accueil, donc ce n'est pas dans GitHub. Si je saute sur le tableau de bord Netlify et que je me rafraîchis, vous verrez que la dernière publication a été lue 119. Et si vous le regardez, les déploiements, vous voyez que le premier déploiement n'a pas eu de message de déploiement pour le deuxième déploiement a le même message que celui que je viens d'enregistrer dans GitHub. Très bien, donc juste en l' enregistrant dans GitHub, Netlify l'a surveillé, a obtenu une modification et il ne le publie pas. Donc, si je rafraîchis le site Web, il y a mon changement de vie. Vous voyez que tout ce qu'il faut faire est de mettre à jour mon fichier et de valider , puis de synchroniser avec GitHub et le poignet a été pris en charge. C'est donc un moyen facile et agréable de mettre en service vos sites Web statiquement statiques. Vous savez, comprenez le HTML et le CSS. Vous savez comment utiliser jQuery analytique bootstrap. Vous pouvez donc créer de magnifiques sites Web et personne ne peut y collaborer avec GitHub assez facilement et les publier sur GitHub assez facilement et les publier Internet en utilisant GitHub et Netlify assez facilement. 21. La page d'accueil redonnée avec Bootstrap Slider et la mise en page: Très bien, donc maintenant nous avons une compréhension claire des pages entières étaient un problème de base froid dans CSS et JavaScript, toutes combinées pour utiliser une page dynamique. Nous avons poussé GitHub et nous avons même publié sur Internet. C'était donc un bon premier prix. Maintenant, mettons toutes ces connaissances à utiliser et à construire quelque chose de faisable, n'est-ce pas ? Nous allons donc construire un vieux modèle de meilleure qualité avec du contenu réel à l'aide de Bootstrap. Commençons donc par modifier le titre ou le haut. Ce que nous voyons dans la baignoire du terrier qui sait déjà que le titre est ce qui nous donne vraiment le libellé, n'est-ce pas ? Donc, ma première page Web, c'est très bien. Nous avons notre feuille de style CSS, mais quel double alors l'icône que vous voyez habituellement dans le navigateur, n'est-ce pas ? Donc cette petite icône ici, parce qu'il n'y a rien fait de prison sur ce point, elle s'appelle une icône. Donc sur ce site Web, icônes, 8.com et vous pouvez filtrer sur les icônes, puis les icônes fav, je peux simplement rechercher des icônes. Ils auront un tas d'échantillons. Je ne dis pas que vous devez utiliser l'un d'entre eux parce que cela pourrait généralement fonctionner ou ressembler à un logo d'entreprise ou autre chose. Mais je vais juste m'en procurer un qui, selon moi , est assez cool et assez général. Laissez-nous utiliser ce code pour que je puisse télécharger cette icône. Et cela me donnerait les différentes tailles disponibles. Donc généralement pour notre icône fav, vous avez l'extension point ICO, qui est abréviation d'icône. Ou vous pouvez réellement utiliser les PSP et G, n'est-ce pas ? Nous pouvons donc simplement télécharger ce PNG. Et une fois que vous avez ce fichier, nous connaissons les règles sur l' endroit où Dina avec des images. Nous voulons d'abord intégrer ce fichier dans notre projet, donc nous trouvons le fichier où qu'il se trouve dans notre système de fichiers, puis je plaise au dossier approprié, qui sera le dossier IMG. Et ensuite, par extension, je veux m'assurer que c'est un mot ou un nom que je peux facilement identifier. Je vais juste appeler ça un iPod, ou ça aurait pu être local, quoi qu'il soit, n'est-ce pas ? Si vous trouvez une autre image, tant qu'il s'agit d'isu ou de point PNG, tout ira bien. Maintenant que j'ai cette icône fav sur la page d'accueil ou sur n'importe quelle page d'ailleurs. C'est pourquoi je veux que cette icône soit affichée et commence à taper le lien de code. Rel est égal aux icônes , c'est donc un peu ça ressemble au code CSS. Et puis il faut qu'une référence H soit égale à, je sais qu'elle a été pointée vers les icônes fav, donc ce ne serait pas une barre oblique, désolé, des images, où est, où est mon dossier d'images ? Img, excuse-toi. Slash favicon point PNG, ou fermez cette balise. Et juste à des fins d'aperçu, regardons cela dans le serveur en direct juste pour voir à quoi ressemblera notre tabu. Un regard sur ça, n'est-ce pas ? Il s'agit donc de l'avant et de l'après. C'était avant. Il ne laisse pas ces petits documents non, vous commencez à voir cette icône. Donc, c'est bien, non ? C'est donc ce qu'il faut pour atteindre une image à l'intérieur du haut. Non, c'est un fonctionnement relativement simple, mais ça monte en grande partie. Passons à autre chose. Configurons donc une barre de navigation appropriée et nous utiliserons le code Bootstrap pour faire cette barre de navigation. Par conséquent, pour référence, vous pouvez une fois de plus vous rendre dans Bootstrap. Nous utilisons Bootstrap 5 et vous pouvez vérifier votre documentation attente, les barres de navigation devraient regarder donc si vous voulez rechercher quelque chose de ghetto spécifique maintenant, vous voyez la barre de navigation et ensuite il saute cependant et il nous montre les échantillons. Voilà donc toutes les possibilités. Il peut le ramener à la maison, ce sont les liens. Vous pouvez obtenir une recherche déroulante, n'est-ce pas ? Vous pouvez le laisser paraître dans différentes couleurs. Il s'agit donc d'essayer de trouver la partie où les couleurs. On y va. Vous pouvez obtenir le noir, le thème bleu. Très bien, c'est tout ce dont vous avez vraiment besoin pour le faire. Il suffit de changer ces classes. Donc, ce que je vais faire, c'est emprunter un de ces échantillons et je vais rester simple. Je vais donc utiliser cet échantillon ici. Juste assez de barres de trois liens et du lien déroulant. Je vais juste copier ça. Très bien, revenez à notre code et à toute cette section qui disait Maintenant je vais remplacer le code qui était là et voir beaucoup plus de code. Mais c'est un peu simple dans mon livre lu. Donc cette partie ici qui dit que c'est le remorqueur, c'est un liquide de conteneur. Ensuite, il s'ouvre dans une classe sur les grilles XOR avec la marque de barre de navigation de classe. Et c'est là que vous placez peut-être que le nom des sites Web n'est pas un nom d' entreprise, quel qu'il soit. Je vais donc simplement dire mes sites Web parce que c'est ce que ce site est. Très bien ? Et puis il y a d' autres boutons, sermon par un discours sur le design réactif. Donc cette section de boutons ici est pour la raison si le pH est redimensionné à la taille d'une application mobile, alors vous commenceriez à voir de petites pilules. Si jamais vous utilisez nos sites Web pour le redimensionner, n'est-ce pas ? Vous voyez ces pilules en achetant un billet , puis la barre de navigation tombe. Ce peu de code ne fait-il pas cela automatiquement pour vous, n'est-ce pas ? Nous pouvons donc prévisualiser cela dans quelques barres de navigation réduites. C'est aussi certains JavaScript qui sont en buck grandi pour aider la barre de navigation à venir et ne le font pas quand elle est ensuite condensée. Ensuite, nous avons nos étiquettes d'ancrage. Donc je n' aurais vraiment pas dû effacer l'oxyde, qu'est-ce qui les pille sur différentes pages. La première plaque d'ancrage serait donc à la maison. Je ne fais que barrer ce code. Et ici, la référence H dit index.html, c'est les artistes qui sont chez eux en guise de prévisualisation. C'est très bien. L'étiquette d'ancrage suivante était pour le boulon. Je vais donc changer celui-ci en bateau. Je vous montre donc qu'il n'y a aucune raison de vraiment s'inquiéter du copier-coller. Parfois, c'est nécessaire. Mais au moment où vous copiez et collez je ne comprends pas nœud qui est le problème. Nous voulons donc nous assurer que même si nous empruntons le code à bootstrap, nous savons ce que nous modifions car ils sont familiers et à l'aise avec ce devis. Le prochain serait donc de contacter quelqu'un pour passer de la tarification au contact. On y va. Et puis pour notre liste déroulante, je veux dire, c'est un bon échantillon, donc je vais juste dire des sites externes, non ? Et en prévisualisant, on pourrait aller sur Amazon. On pourrait aller, je pense, au lien Amazon ici. Oui, c'est le cas. Nous pouvons donc créer un lien vers n'importe quoi trop dans les liens externes. C'est juste pour certains de toute façon. Amazon et cela pourrait être EB. Et puis celui-ci pourrait être AliExpress ou quoi que ce soit, ces échantillons. Vous pouvez donc mettre ces choses si vous le souhaitez. Pour la pratique. Pas de problème. Je vais les laisser vides là où ils ont l'Amazonie, mais je suis toujours tous. Tous ceux qui montrent à quoi ressemblerait la liste déroulante. Donc c'est tout pour la barre de navigation, c'est nous cocher l'aperçu de cela. Donc je vais juste revenir sur le côté que nous sommes déjà en train de construire un début à voir la différence, déjà regardé cette barre de navigation. Sachez que c'est un peu discrètement, c'est un peu d'accord. Comme je le disais, si vous redimensionnez les sites Web, vous verriez que cela se condense automatiquement comme par magie et ça commencera à perdre de l'os pour vous, n'est-ce pas ? Tout cela, nous n'avons pas écrit beaucoup de code pour que cela arrive. C'est une sorte de bootstrap sorti des boîtes. Je n'aime pas cette couleur sur la barre de navigation. J'ai donc voulu revenir à ma documentation. Je regarde les différentes options de couleurs et j'aime vraiment le thème sombre. Voici donc les cours dont j'ai besoin pour obtenir le thème sombre. Et vous remarquez que si vous avez encore une autre couleur en tête, vous pouvez réellement mettre votre couleur personnalisée utilisant un style en ligne, n'est-ce pas ? Vous pouvez également créer une nouvelle classe et la remplacer. Regardez, vous pouvez utiliser le style en ligne comme recommandé ici. Bien que comme je veux ce tableau de bord Dark, BG dash dark. Je vais donc revenir à ma barre assez et c'est Navbar Dash, Light, BG Dash. Laissez quelqu'un remplacer cela par une variation sombre. Et on y va. Cela commence à paraître un peu mieux à mes yeux. Disons qu'il y a assez de bar, agréable et facile. Et bien sûr, si nous avons la barre de navigation dans la maison, nous voulons la même barre de navigation sur les autres pages. Quelqu'un pour remplacer toutes les barres de navigation toutes les autres pages par la nouvelle barre de navigation. Très bien ? Maintenant, chaque page a la même barre de navigation que celle que nous avons travaillée, et elle n'est pas nouvelle ni améliorée. C'est donc un excellent travail. Une autre chose que je voulais souligner, nous avons placé la barre de navigation à l'intérieur du conteneur. Eh bien, il y a des moments où vous voulez probablement que cette barre de navigation s' étende aussi loin à gauche et que possible, n'est-ce pas ? Vous verriez donc certains sites Web où la barre de navigation effectue des recherches sur toute la page. Le contenu est confiné dans la marge. C'est donc possible en ne mettant pas la navigation à l'intérieur du conteneur, n'est-ce pas ? Il y a donc cet aperçu, quoi cela ressemblerait, et c'est ce que notre barre de navigation enverrait les droits sur toute la page. Et encore une fois, vous voudrez peut-être que le quartier de la bande noire sur la page, mais pas nécessairement le logo soit aussi loin à gauche et que les liens soient comme ça. Alors c'est à ce moment que vous commencez à mélanger beaucoup de choses que je peux créer un peu. Ici, à l'intérieur du nerf, on verrait qu'ils ont en fait un div avec le liquide de tiret de conteneur. Fluid signifie qu'il va étirer votre œil sur toute la page. Si nous enlevons le liquide et que nous en faisons simplement un récipient ordinaire. Et vous verrez que le trajet s' étend sur ce que le contenu se trouve à l'intérieur des limites de ce à quoi ressemblerait le conteneur. Je vous montre donc comment vous pouvez mélanger et faire correspondre les différents. Je suis des cours et la disposition du soufre juste pour obtenir l'effet désiré. Eh bien, il faut expérimenter. Très bien, donc je vais laisser assez de violet, c'est en fait comme quand ma barre de navigation s'étend juste à travers, mais les liens commencent là où ils sont nuls. Très bien, donc c' est tout pour notre roman. Passons maintenant à notre contenu. Et ce que je vais faire, c'est supprimer ce contenu. Donc, pour travailler rapidement, je vais juste réduire cette div, mettre en surbrillance ces deux lentilles en appuyant sur Supprimer. Et pour que le vent à terme le déplace hors du conteneur parce qu' un phénol voulait s' étirer comme la barre de navigation. Mais nous reviendrons au filtre plus tard. Et ce que nous allons faire dans notre ère du contenu, moins pour notre page d'accueil, est placé dans un carrousel et peut-être quelques rubriques. C'est bon ? Encore une fois, je ne m'attends pas à ce que vous confiez forcément tout cela en mémoire, que vous rouliez avec le coup de poing, trouviez ce dont nous avons besoin quand nous en avons besoin. Si peu de bosse à la documentation Bootstrap. Je vais chercher un carrousel. Carrousel est essentiellement comme ce diaporama, non ? Et voici l' exemple d'une diapositive, d'une glissière de cycline. Il peut avoir des contrôles de largeur ou cliquer et naviguer ou autoriser les utilisateurs à naviguer entre les diapositives. Et je pense que j'aime bien celle-ci, celle avec la navigation. Donc le code ici verrait que nous avons une div avec une classe, quelques classes, et nous avons quelques balises de données. Très bien, et puis vous avez un carrousel intérieur. À chaque diapositive, nous avons un carrousel. Donc, si vous voulez 50 photos, vous auriez 50 de ces divs. Si vous en vouliez trois. J'en ai trois. peu près. Et puis nous avons un bouton pour revenir en arrière et un bouton vers l'avant. Et c'est vraiment ça. Il vous suffit donc de remplir les blancs avec les balises de base que vous connaissez déjà, vous savez, à propos de la balise image ou, vous savez, maintenez la touche pour obtenir le chemin d'accès à l'image. Très bien, donc pour faciliter la tâche, une fois de plus, nous pouvons copier et vous voyez, pouvez regarder les autres exemples que vous utilisez avec des légendes. Vous pouvez les obtenir avec des légendes, n'est-ce pas ? Et encore une fois, asseyez-vous et regardez le code parce que ce n'est rien que vous n'avez jamais vu auparavant, non ? Tout ce n'est qu'une combinaison de boutons, n'est-ce pas ? Ces boutons correspondront donc à ces indicateurs ici où, quel côté nous sommes. Il vous suffit donc d'ajouter autant de boutons que de diapositives. Nous avons toujours le même format que celui que nous venons regarder avec les objets du carrousel. Très bien, juste cela au lieu de l'élément, vous avez donc l'image ainsi qu' une div stockée dans le texte affiché. Très bien, et vous avez toujours vos boutons de navigation. Je pense donc que je vais utiliser celle-ci et aller ici et les regarder toute la journée parce qu'il y a une autre animation Oda, cool. Vous pouvez les mélanger et les associer, non ? Habituellement, la différence entre les options est peut-être comme quelques classes. Ainsi, comme les aliments Carrousel, celui-ci n'est pas présent dans celui-ci dit carrousel, puis glisse. Très bien, celui-ci dit carrousel, glissez puis alimentez. Très bien. Nous pourrions donc facilement prendre ce modèle et ensuite le faire fondre. Je vous montre juste que vous pouvez mélanger et faire correspondre. Très bien, je vais donc copier celle-ci. J'aime bien celui avec les boutons dedans. Et ne faites pas de boue dans le récipient est allé juste coller. Commençons maintenant à changer d'abord. Cela dit que j' aime bien un toboggan de carrousel, donc je vais chercher notre ISO Dash adapté, désolé, la voiture donc alimentée, n'est-ce pas. Connaissez-vous cette voiture. Nous savons donc qu'il est censé nourrir autant que le prochain. C'est vrai ? Maintenant, nous avons les boutons. Ce sont les petits boutons de tabulation en bas. Et puis ils voient qu'ils ciblent les légendes des exemples de carrousel. Remarquez donc ce hashtag. Très bien, donc ces attributs de données sont en quelque sorte ce que JavaScript utilise pour voir les bogues. Lorsque vous cliquez dessus, je vais récupérer ces données et les utiliser pour répondre à mes décisions. Donc, plus tard, lorsque nous construirons des opérations plus complexes, nous devrons les utiliser lorsque nous écrivons un jQuery. Alors, ne vous inquiétez pas trop pour le moment. Mais c'est à ça qu'ils servent. Très bien, donc nous avons notre div, carrousel, exemple, légendes, BS, indicateurs de conduite. Comme je l'ai dit, si nous voulions plus de diapositives, il faut ajouter plus de cétose, sans problème. Ensuite, nous avons l' intérieur du carrousel, dîner du carrousel et chaque article. L'article numéro 1 aurait donc besoin de la source de l'image. Je vais donc utiliser le plancher de mon fils. Donc tout cela est IMG slash tournesol dot JPEG. outre, vous êtes généralement encouragé à écrire une alternative qui nous indique classement du site Web sur les moteurs de recherche. Il aide également à la lisibilité des lecteurs vocaux pour les personnes susceptibles d'être malvoyantes. Il est donc encouragé de le dire simplement pour que lorsque le lecteur arrive ne sache pas que, Oh, c'est chacun de nous sur le sol. Alors je voulais sauter, eh bien, qu'est-ce qu'un pic sous-B ? C'est le site que j'ai utilisé pour obtenir mes images et je ne fais prendre trois images qui se trouvaient sur la face avant. Ils n'ont pas besoin d' utiliser ces images. Ce que je vous encourage cependant à faire, c'est d'utiliser les mentions selon lesquelles le temps que nous recommandons, car regardez ce qui se passe avec sol Arslan ou le tournesol est un dossier énorme. Ceux-ci après l'argent, qu'il s'agisse de la taille 0, ou simplement de s'assurer que nous obtenons une image qui correspond à la zone dans laquelle nous nous attendons à ce qu' elle aille, n'est-ce pas ? Donc, ce que je vais faire, c'est les avoir tous comme 1280 d'ici 53. Je pense que ça devrait être assez intelligent. Et je vais simplement les télécharger , puis les déplacer vers le projet. Il suffit donc de les déplacer dans le dossier d'images , puis de les renommer. J'ai donc eu une photo de la plage, d'un oiseau et d'un trèfle, qui est un autre type d'oiseau. Encore des problèmes. Je vais donc utiliser ces images ici. Je suis donc une plage oblique, n'est-ce pas ? Et puis la sortie dit plage. Puis IMG slash bird. Symbole de vente Bird. C'est, connaissez vos gencives. Une partie plus difficile. Très bien ? Et bien sûr, si vous voulez changer, il faut, il peut toujours aller de l'avant et changer le texte. Si vous ne voulez pas le texte, il suffit de le supprimer. Je ne fais que le montrer. Oui. Je ne sais pas ce que vous voulez. Votre déménagement a voté, bien que la partie la plus difficile, citation sans citation, serait la police que nous avons quatre images, et je n'ai que trois diapositives, donc je dois en ajouter une quatrième. Très bien, regardons donc un processus d'extension de celui-ci. J'ai besoin d'une nouvelle voiture, donc l'article, donc j'ai juste besoin de prendre cette div et je vais juste la reproduire. Je ne vais pas essayer de retaper que je pourrais commettre cette erreur. Je suis légal pour la classe. Pourquoi le retaper alors que j'ai un très bon exemple à suivre ici. Très bien, je peux juste mettre ce dont j'ai besoin dans cette quatrième diapositive. C'est bon ? Et c'est la quatrième diapositive. On y va. Donc, vous changez. Que devez-vous changer ? Pas de problème. Maintenant, après avoir introduit cette barre oblique, rappelez-vous que nous avons les indicateurs de bouton. Donc, si vous n'avez pas choisi de modèle avec un bouton, cela indique cela et c'est très bien. Si vous vouliez supprimer les indicateurs de botanique lorsque vous changez d'avis, vous supprimez les indicateurs de bouton. Cependant, je vais étendre les indicateurs de mon bouton pour savoir qu'ils devraient en avoir un quatrième. Je viens donc de prendre la troisième et je suis dégueulasse regarder tout ce qui n'est pas adopté. Ici, vous voyez que le modèle 0 est un. Et vous apprendriez dans n'importe quel langage de programmation qui commence généralement à 0 dans les ordinateurs, n'est-ce pas ? Donc 0 est la première diapositive, une est le deuxième côté, deux sont la troisième diapositive. Donc évidemment, trois seraient la quatrième diapositive, n'est-ce pas ? Maintenant, après avoir mis mon diaporama, revenons sur le site Web et fermons tout le bruit. Et puis il y a notre plancher de bidonvilles. Il y a notre plage. Il y a notre oiseau, et il y a le trèfle, qui est un oiseau entendu. Nous voyons que les étiquettes apparaissent. Nous avons nos indicateurs et tout ce qui se passe bien. Mais les images sont encore assez grandes. Quelqu'un pour commencer à utiliser un CSS personnalisé pour simplement réduire les dimensions de l'image est un peu fil de fil. CSS personnalisé. Pourquoi ? Parce qu'après l'avoir fait pour les images, je voulais le faire quatre fois. Je ne vais donc pas mettre du CSS 4 fois en ligne. Il est plutôt plus facile pour moi de passer à ma classe de style personnalisée et de créer une nouvelle classe. Et j'appellerai ça un traîneau d'image de diapositive. Je suis G. Et je vais juste changer la hauteur parce que c'est ce qui a vraiment un problème avec quelque chose comme 550 pixels. Et puis avec ce cours, je peux facilement revenir en arrière et laisser chaque image non. C'est donc un IMG ? Oui, vous êtes un bloc D. Oui, vous êtes avec 100 ou W dash 100, c'est des bootstraps. Nous avons vu la largeur 100, mais je vais dire que vous êtes aussi glissant IMG, ce qui réduirait la taille que vous êtes et nous y allons. Très bien, donc ça a l'air un peu mieux. Donc, comme je l'ai dit, il est toujours préférable d'obtenir des images qui font déjà mention que vous voulez ou de les redimensionner aux dimensions que vous voulez qu'elles soient pour cette section particulière. Parce que regardez comment les images ont augmenté quand je les oblige à avoir une taille différente de leur taille naturelle. Revenons donc dans notre code. Nous avons donc nos voitures en marche. Copiez et collez quelques mods sur endroit où nous sommes en train de courir, sur l'endroit où je vis. Examinons maintenant une mise en page avancée. Je dis avancé parce que ça va être, ça va paraître très propre et les gens regarderont leurs sites Web et les choses pour faire quelque chose sur les obligations. Mais encore une fois, Bootstrap rend tellement de choses réalisables. Ce n'est pas drôle. Très bien. Je vais donc passer sous la voiture. Donc c'était notre voiture, donc c'est notre conteneur, c'est nos carrousels ou nos silane qui installent notre conteneur. Je vais briser la ligne et ensuite je vais introduire une nouvelle div. Cette div va faire connaître ce GOS appelé Roll. Une fois de plus, nous allons consulter la documentation. Il existe donc un système de grille intégré Bootstrap qui vous permet de diviser votre contenu en différentes colonnes. Très bien, voici un exemple pour 13 colonnes, ce que nous sommes sur le point de faire. Vous pouvez utiliser la règle et le Nietzschéen dit col, col, col. Franchement, autant d' appels que vous passez, il fera de son mieux pour diviser cet espace de gauche à droite uniformément entre autant de dons que vous avez cet appel. Si vous voulez des tailles fixes, vous pouvez dire col dash sous les chiffres. En d'autres termes, vous voulez 5050, nous pouvons utiliser la couleur si vous voulez 123, appeler, appeler CAFO. Mais si vous le souhaitez, laissez-moi voir si je peux en trouver un qui est exactement l'exemple dont je parle. On y va. Il y a donc 12 colonnes, essentiellement concentrées là, de gauche à droite. Vous pouvez donc toujours les diviser uniformément, non ? Vous pouvez donc le diviser en quatre, n'est-ce pas ? Quatre colonnes, chacune ayant une taille trois. Ou je peux diviser cela en trois, chacun étant de taille pour vous, divisé 5050. Donc les deux seraient des recherches psi. Ou si vous voulez, voulez être nettement plus large que l'autre, vous pouvez le voir, c'est basé sur l'UR pour les espèces. Mais toute combinaison de nombres qui totalisent jusqu'à 12 est une bonne combinaison pour ces scissions. Très bien, donc si vous faites défiler, vous commencerez à voir d'autres exemples. Vous pouvez voir un col, md et le MD et le LG et les différents noms que vous voyez font vraiment référence à cela comme la taille de l'écran. Vous pouvez donc le voir sur un écran moyen, ce qui serait comme un écran d'ordinateur normal décolle pour les espèces. Mais dans vous verrez comme col, tiret ASM, ce qui signifie petit. Ainsi, sur un écran d'ordinateur, il devrait prendre x nombre d'espèces sur un écran plus petit, comme un téléphone portable, prendre plus de place car vous voulez probablement que cet élément soit étendu sur l'ensemble. par opposition à Diigo qui sort de l'écran comme vous le feriez sur un ordinateur. C'est tellement facile de faire ces mises en page. Donc, comme je l' ai dit, je voulais quelque chose qui ressemble davantage à ça, trois colonnes. Voici donc un exemple de règle de classe div, appel, appel, appel. Donc je vais déjà emprunter ce code, avoir les robots. C'est très bien. Je vais juste le remplacer et mettre ça dedans. Très bien, donc mes trois colonnes, pas de problème. Maintenant, au lieu des trois colonnes, que voulez-vous ? Je vais juste mettre un exemple de texte, et c'est un titre et une balise de paragraphe et un bouton. Et c'est tout ce que je fais. Je vais donc taper ça à partir de zéro avec toi, non ? Non. Ils peuvent donc comprendre exactement ce qui se passe. Notez qu'il s'agit d'exemples de tiques. Ça commence par le latin, c'est une sorte de poubelle. Mais je vais vous montrer comment obtenir ce genre de texte assez facilement. Donc pour l'appel, pour la deuxième colonne, quand avoir une balise H2. Mel va voir que c'est ce que tu veux comme tête. Si vous construisez sites Web promotionnels sont des protocoles, c'est là que vous parlez des points de discussion sur ce pain d'avoine, vous savez, rentable, efficace, efficace, et Cetera, c'est ça ? vous donne juste des idées. C'est donc le titre. Ensuite, dans la balise p, je veux un exemple de texte pour pouvoir écrire le mot lorem, appuyer sur Entrée, et cela générera un paragraphe entier sur les prises d'alarme , donc je suis sûr que vous avez vu ceci quelque part dans votre vie, quelque part sur Internet. Sinon, c'est très bien. Mais le but de cela prend place, donc c'est là que vous mettez quoi que ce soit, vous transformez cela en informations utiles. C'est bon ? En règle générale, lorsque vous effectuez cadrage filaire et que vous voulez montrer des watts à un client, le site Web aura l' air de vouloir placer ce genre d'endroit. Eh bien, un C soluté, d'accord, si on les emmène là, c'est à ça que ça ressemble. Ensuite, pour le dernier, je vais juste avoir cette balise p qui a ceci sur l'unité crypto et je ne suis pas allé retaper cela va, je pense que la combinaison de ces balises, vous savez déjà comment faire ça pour une balise p avec une balise d'ancrage, btn secondaire. Donc oui, j'accepte le bouton et le rôle est bouton. Il sait donc que ce n'est qu'un bouton, n'est-ce pas ? Ou il devrait agir comme un double ou autre ce qui empêche d' aller nulle part. Afficher les détails. C'est très bien. Très bien. Non, vous verrez ce genre de choses que je dois dire ? Ces symboles sont des textes Unicode, différents endroits se trouvent sur Internet. Ceux-ci sont, il obtient des symboles spéciaux dans votre site Web. Par exemple, généralement dans le pied de page, vous verrez quelque chose comme des informations sur les droits d'auteur. Et comment obtenir un signe de droit d'auteur ? Donc vous faites de l'esperluette et je pense que c' est C. Donc, si vous venez de faire des débordements et que j'utilise un rouleau, vous verrez tous les caractères spéciaux apparaître dans IntelliSense, ce qu'ils représentent. Donc, si je dis quelque chose, cette copie, on y va, c'est un sens du droit d'auteur. Donc, esperand copie, point-virgule. Donc, quand vous voyez un Lamberson rock cool, je ne sais pas que It Rock cool en anglais se traduit par une UC, c'est là que vous obtenez cette petite flèche double. Très bien, nous allons donc simplement reproduire cette section ou ce code pour notre troisième colonne. Ensuite, jetons un coup d'œil. Le OK, calme, on y va. Nous avons donc maintenant nos trois titres sous diaporama et notre exemple de texte, ainsi que nos boutons de grille qui ne naviguent nulle part. Donc, UCO, tout se réunit, n'est-ce pas ? J'espère donc que vous êtes aussi excité par ce que nous accomplissons. Je connais les rétinoïdes pour le pied de page, puis je vais juste le plafonner juste là pour ce que nous faisons sur le filtre photo vocal. Ou du moins à la fin de tout ça, je vais mettre une règle horizontale pour que nous ayons une petite ligne. Très bien, puis je suis allé changer ce filtre pour qu'il ressemble davantage à un vrai remorqueur de filtre. Vous verrez donc des balises de pied de page, vous verrez des balises d'en-tête. Et c'est ce que nous appelons le HTML sémantique. Et c'est juste un style d'écriture différent, mais ça se résume à l' se résume à impression que c'est juste un conteneur. Et sémantiquement, ce conteneur est destiné au contenu du filtre ou à l'intérieur du contenu du filtre. Eh bien d'abord, une fois que vous lui avez donné une classe appelée conteneur, nous savons que Container va pour un bootstrap plus. Et puis, au lieu de cette balise p, je vais ajouter R ou droits d'auteur et donc une esperluette copie, non ? Ensuite, je vais voir mes sites Web. Nous sommes en 2021. Très bien. Nous voyons donc notre site Web à nouveau, quelque chose qui veut que nous ayons notre navigation, vous avez la direction et ensuite nous avons cela. Pas de remarque que sur cette diapositive sont un peu mart. Ce sont donc de petites choses qu'ils peuvent commencer à surveiller si vous voulez un peu de lumière du jour entre elles. C'est aussi simple que de placer une étiquette de rupture entre la navigation et le conteneur. Donc, vous obtenez ce petit BH3. Vous y allez. C'est sympa et facile, non ? Ce que certaines personnes font aussi, c'est qu'elles créent réellement une div ou quelque chose comme ça, ou créent une classe qui dit automatiquement, me donne X montant de marge par le haut. Ils vont donc diviser ce qui est sur la marge du modèle Excel div du conteneur par le haut. Donc, si jamais tu voulais changer cette marge, tu as juste la classe des gènes parce qu'il ne peut pas vraiment changer combien de rupture et d' arriver avec notre point d'arrêt. C'est vraiment tout pour ce que nous faisons avec la page d'accueil. La page de résidence peut utiliser du travail. Certainement, la page de contact peut utiliser du travail. Donc, quand nous reviendrons, nous regarderons le style de la pêche ci-dessus. 22. Redesign la page à la page à la ligne de bootstrap et les boutons: Très bien, les gars. Bienvenue Buck. Nous avons donc déjà envisagé la réétude ou la page d'accueil. Tournons notre attention sur notre boulon ou notre discours. Sachez, encore une fois, ils ne vous donnent pas de prescription avec des choses que vous devez faire des expériences si vous n'aimez pas la façon dont j'ai fait quelque chose, hésitez pas à explorer et à essayer autre chose, n'est-ce pas ? Ce ne sont que des lignes directrices. J'ai un point de vue différent de vous comme vous le feriez avec d'autres personnes. Il est donc normal d'expérimenter et d'essayer autre chose. Très bien, nous allons d'abord nous mettre au même niveau que la page d'accueil, ce qui signifie qu' en termes de mise en page, rappelez-vous que la cohérence est essentielle. Nous avions donc emprunté la barre de navigation, mais nous avions apporté des modifications à la barre de navigation de la page d'accueil que nous avons interprétée créée. Nous avons également apporté des modifications à notre zone de pied de page que nous n' avons pas répliquées. Concentons-nous donc à ce faire. Donc, dans la section Navbar, j'avais retiré son ancien conteneur ou Contian est que je vais juste copier le nouveau code barre de navigation pour faciliter la tâche. Et je vais juste réduire ce code barre de navigation, le supprimer. Et puis cette barre de navigation par défaut a déclenché la div du conteneur. Pendant que je suis ici, je vais faire la même chose sur la page de contact, n'est-ce pas ? J'aime donc le faire chaque fois que je fais un changement, je sais que c'est mondial et j'ai essayé faire autant d' endroits que possible, le faire autant d' endroits que possible, en même temps. Je n'oublie donc pas plus tard. Donc, après l'avoir répliqué, Navbar, nous voyons, OK, bien. Il travaille sur le bateau nous, nous devons également le faire sur le pied de page. Nous sommes donc dans le code de filtre et il doit y avoir un DSE. Retournez donc au bateau, effondré et je suis allé simplement supprimer complètement ce contenu div. Mais nous pouvons supprimer ce filtre. Je vais mettre dans ce sens que chacun est et mettre dans notre pied de page, non ? Lorsque nous regardons en arrière, nous voyons que le pied ressemble à ce que nous voulons. Nous pouvons maintenant supprimer ce contenu et commencer la refonte. Ou n'oubliez pas que nous avons eu une rupture entre le contenu ou la zone conteneur et le héros de la navigation. Donc, avec tous ces changements apportés, visuels pour cela, les deux pages ressemblent davantage à une page de profil, à droite. Je veux voir, Hey, c'est un paragraphe sur moi et j' ai probablement des liens sociaux. Et puis, tout comme un profil, vous savez, je pense aux différentes choses que nous pourrions faire. Alors, à l'intérieur du conteneur, créons notre rôle. Donc chaque fois que nous aurons la séparation des colonnes, donc si nous devons commencer par la classe égale roll, sont, alors à l'intérieur de cette ligne, je vais avoir une div. Et cette div aura des classes égales. Et remarquez à quel point Amabile mon indentation est particulièrement importante. L'indentation est très importante pour ce qui est de la lisibilité ultérieurement, n'est-ce pas ? Essayez donc toujours de vous assurer que votre code est propre. J'ai donc voulu donner à celui qui s'appelle Dash huit. Très bien, je divise la plage dedans et peut-être trois. Je vais donc voir l'appeler pour celui-là et je vais juste dupliquer cette ligne et faire le col dash trois, mais je voulais aussi avoir un décalage col dash. Très bien, j' oublie en fait comment le code offset boucle quelqu'un pour sauter ici et chercher des décalages, non ? Donc le décalage, les décalages ici, un objectif, donc le décalage est en fait dans les colonnes étaient dans la grille. Il est en fait en colonnes. Et voici une citation pour le décalage. Donc, décaler le tableau de bord, quelle que soit la taille de l'écran , le tiret, tout ce qu'il dit détermine que cela signifie espace en mode attente. Vous voulez entre moi et celui que je suis à côté, n'est-ce pas ? Donc, si nous l'utilisons et laissez-moi simplement le copier si je l'utilise. Et trois, cela signifie que je peux au moins avoir un décalage d'un. Donc, un plus trois plus huit équivaut à 12. Bien, c'est ça ? Donc, à l'intérieur du premier, je vais avoir un petit avantage quatre. Goddess est égal à peut-être du texte, des informations de tiret. Très bien, donc vous verrez ce que cela signifie. Notre primaire, laissez-moi le rendre primaire pour que vous puissiez voir la couleur devient et ce serait un bateau moi là-dessus. C'est pour TAG. Et je suis allé avoir un paragraphe, comme je l'ai dit à mon sujet, espace réservé lorem, et il a simplement laissé générer ce texte. Pour ce texte, je vais lui donner un cours. Texte. sourdine. Très bien, si c'est le cas, si vous n'êtes pas si familier avec les trucs technologiques. Pas de problème. Bootstrap. Donc, si vous tapez simplement du texte, passez à cette documentation l'auteur des merveilleuses façons dont ils peuvent le transformer pour définir la taille, les différentes couleurs qu'ils peuvent obtenir avec le texte. Toutes ces choses merveilleuses, d'accord ? Et de manière générale, lorsque vous parlez de la principale ou du succès, ou d'un avertissement ou d'un danger pour les classes que vous verrez pour BG dash ou BTN, celles-ci semblent mots-clés et les résultats obtenus. des couleurs sont disponibles pour vos tiques. Donc, si vous voulez du texte bleu, apprêt de tiret de texte prend des informations, du texte vert, du texte, du Fluxus, et cetera, n'est-ce pas ? Je ne fais que pointer cet orteil. C'est pourquoi vous verrez beaucoup de points communs entre la façon dont ces mots-clés sont utilisés partout. Maintenant que j'ai au moins une colonne, non. Je suis allé sauter vers le bas et commencer à accumuler des colonnes. Dans cette colonne, ce que je voudrais être des coordonnées, n'est-ce pas ? Je vais donc avoir un autre âge pour la langue qui a les mêmes prises primaires. Mais celui-ci va indiquer les coordonnées, n'est-ce pas ? Et puis, au lieu d'une pita, je vais utiliser une liste non ordonnée où je vais simplement accéder à certains de mes liens sur les réseaux sociaux. Donc, vous voyez, je ne fais que rassembler toutes ces balises et je ne fais que les combiner pour obtenir le résultat souhaité. C'est vrai ou si, oh désolé, laissez-moi ouvrir et fermer ce TAG de faim pour que je puisse me débarrasser de certaines de ces flèches, n'est-ce pas ? Donc f est égal à, et je vais juste mettre un hashtag pour null pour que le lien soit vivant. classe est égale, peut-être que je pourrais voir le texte SSH coupé en sourdine ou le tiret de texte en entier, non ? C'est juste pour ça que c'est fait. Et je veux dire, encore une fois, c'est à vous de prendre des ticks aussi sombres, blancs, que vous voulez un lien car vous savez qu'une URL va avoir une boucle particulière. Donc, si vous voulez changer ce look, alors pas de problème. Très bien. Je voulais donc rendre mes liens sombres. Très bien, voyons à quoi ça ressemblera. Et je vais voir un tuteur. Et ensuite, je vais juste dupliquer ça. L'un est Twitter, l'autre est Facebook. Et Won pourrait l'être. Bon travail. Très bien, alors jetons un coup d'œil à ce que nous obtenons avec cette page. Donc c'est ce qu'un boulon signifie flamant rose pour avoir l' air d'avoir un boulon. C'est un graphique à barres qui me dérange. Et ensuite, nous avons nos liens de blocage, n'est-ce pas ? Alors encore une fois, mélangez beaucoup et expérimentez. J'ai donc voulu continuer. Je vais créer une autre section en dessous. Et je vais appeler cette section peut-être que mon portefeuille pour quelque chose qui accentue ce sur quoi je travaille depuis toutes ces années, peut-être. Je ne sais pas. Mais disons que nous l'avons, donc nous sommes toujours à l'intérieur de la div conteneur, nous en avons fini avec ce rôle. Laissez-moi juste l'effondrer et le sortir du chemin. Très bien. Et puis, sous ça, je vais juste avoir une mère, une autre div. Encore une fois, il est toujours bon de donner vos identifiants DBS. Vous pourriez donc appeler cette section portefeuille juste au cas où ou il s'agissait d'un portefeuille, ce que vous voulez. C'est toujours bon de leur donner. Vous pouvez donc au moins dire ce qu'il y a dans quelle section. Bien sûr, ce n'est pas obligatoire comme nous l'avons vu. Donc, dans cette section, je vais avoir une étiquette H1. Et en guise de séparation, je vais simplement utiliser un basculement RH entre ces deux-là. Donc je suis, j'utilise juste un hé, j'essaie juste des choses ici, non ? Donc, une brique sur la cible RH, une autre pause. Ensuite, je commence mon portefeuille. Je vais donc dire mon portefeuille. C'est le titre. Très bien, pour que vous sachiez dans quelle section nous sommes. Ensuite, j'ai un tag p. Et puis voyons voir, je veux donner le cours à celui-ci. Vous en avez un autre appelé Lead. Et je voulais faire en sorte que Dash soit aussi coupé en sourdine, juste pour un effet dramatique. Il est là, mais c'est, vous savez, un cercle. Et je vais juste donner ce Lorem. C'est donc mon paragraphe sur mon portefeuille. Et peut-être est-ce que je peux avoir deux boutons ? Nous les appelons comme un appel à l' action dans le développement Web. Je suis juste allé de l'avant et je les ai fait. Donc nous avons de la classe, désolé, H ref, rien ne va vraiment se passer sur leur classe primaire BTN. Et puis vous me verrez Y2. y a donc beaucoup de petites classes uniques que vous voyez de temps en temps, surtout si vous utilisez un exemple de bootstrap. Celui-ci voit donc une marge sur l'axe Y de deux espaces, et c'est tout ce qu'il voit. Bootstrap a donc beaucoup de choses à prévenir. Vous avez réduit le besoin que vous alliez réellement écrire en classe juste pour avoir une marge de deux. L'axe Y va du haut vers le bas à droite. Donc, pour vous donner une marge, pourquoi outil, si vous voulez juste sur le sujet dirait vide ou MB, et cetera, non ? Ce sont donc les politiques que vous pouvez surveiller et les utiliser à votre avantage. Maintenant, après avoir fait tout cela, j'ai les outils que je veux dire, m'embaucher, dire laisser des commentaires, n'est-ce pas ? Et l'un est primaire, l'autre est secondaire. Encore une fois, vous pouvez mélanger et assortir vos vêtements, mais je vais simplement sauter par-dessus et voir à quoi cela ressemble. Bon, mon portefeuille. Vous voyez donc ici que le texte de mon en-tête correspond un peu à ce que prend mon style personnalisé. Je ne veux pas beaucoup les mélanger. BTN-Primaire et descendants le comprennent, n'est-ce pas ? J'ai deux options. Je pourrais simplement supprimer tout mon style personnalisé, ou je pourrais encore une fois remplacer celui-ci jusqu'à ce que votre classe soit x86 dash primaire. Donc, il sait juste que lorsque vous êtes rendu, vous rendez en bleu et tout le reste peut paraître en ligne, n'est-ce pas ? Si on voulait que tout ça soit aligné au centre pour qu'on la soulève à un traîneau que je pourrais sauter de l'argent. Et je pourrais dire à cette div que votre classe est égale au texte, au centre, de sorte que nous, tout le texte n'est pas aligné au centre, n'est-ce pas ? Je vous montre donc à quel point il est facile de commencer à apporter des modifications folles avec un code très minimal lors de l'utilisation de Bootstrap. Passons donc à un autre contenu qui pourrait être utile dans le discours. Maintenant, nous présentons un portefeuille, donc ce serait de nouveau un romancier prudent. Bien sûr, comme une galerie de l'œuvre ou quelque chose comme ça. Peut-être notre photographe ou un concepteur web ou même un design aussi proche ou quoi que ce soit, qui que vous soyez, sans problème. Ce que nous pouvons faire, c'est simplement créer une mini galerie juste en dessous de cette div pour le portfolio. Je vais donc créer une autre div. Je voulais vous donner la galerie d'identité. Et puis à l'intérieur de cette div, je vais avoir notre rôle, vous savez, je pourrais simplement rencontrer ce rôle de div. Donc je voulais juste dire que la croix est égale à la règle et vos idées galerie et vos idées ou quatre rouleaux, nous allons avoir div. Voici donc une autre chose, nulle quand on utilise l'appel. Et si nous voulions faire des rangs avec trois éléments chacun ? Très bien, nous avons déjà regardé comment définir une taille en utilisant la couleur. C'est sur quoi que ce soit. Et nous voyons également que si nous disons simplement appeler cela, il analysera automatiquement le rôle de plusieurs colonnes. Donc, dans ce cas, je veux deux rangées avec trois éléments chacune. Je peux donc faire les calculs. Si c'est 12, j'en veux trois, cela signifie PAR colonnes E à B pour la taille. Donc, je peux juste dire que les voitures sont égales au col tiret quatre. Très bien ? Et je peux le reproduire autant de fois. Donc, ce que je veux faire plusieurs rôles. Donc, quel modèle est que vous créez plusieurs règles et 3 chacune ou que vous pouvez désaturer cela les met toutes dans la même règle. Parce que ce qui se produira, c'est que la règle attribue automatiquement quatre espaces aux espaces pour les espèces sur une ligne, puis passe automatiquement à la ligne suivante et alimente continuellement l' espace. disponibles sont nécessaires. Nous n'avons donc pas vraiment à nous inquiéter de ce point. Je ne suis pas encore prêt à dupliquer cela parce que le code entre eux va être assez cohérent. Donc je vais juste en faire un correctement et dans ce copier-coller, non ? En fait, je pense que je vais utiliser la carte Bootstrap pour cela. Passons donc à la documentation et cherchons les cartes rouges. Vous voyez donc ici un exemple de ce à quoi ressemble la carte. Imaginez donc avoir votre galerie et vous en avez une seule fois. Et vous en avez trois par règle. Et vous avez votre petite image et peut-être le nom de la description du projet et quelque chose pour eux à mordre ou quelques détails supplémentaires, contactez votre bateau, c'est vrai. Et j'ai tous les exemples de cartes. Je veux dire, si vous ne voulez plus l' image, faites-le simplement. Vous avez cette version, et cetera, et cetera, n'est-ce pas ? Je pense donc que je vais prendre le premier exemple où nous aurions eu cette image et le corps. Voici donc la citation dont nous avons besoin. Je vais juste copier ça. Passez à notre code. Et puis à l'intérieur du col dash 4, nous avons mis cette carte. C'est donc la première colonne. Très bien, nous n' avons aucune image. Vous pouvez aller chercher l'image sur Poutine. Je vais juste appeler ça un panier d'achat. C'est donc mon premier portefeuille. Et puis vous pouvez laisser ce vieux problème. Et puis je vais juste copier ça. Encore deux fois. Très bien. Donc l'un est le panier, celui-ci est une bijouterie, et celui-ci est un système de fréquentation. Ce sont donc mes projets sur lesquels j'ai travaillé dans l'ensemble de mon opérateur théoriquement. Il suffit donc de les montrer aux visiteurs du site Web. Et puis quand je saute en arrière et vois à quoi ressemble ma page, elle voit le panier ou rétablir le système de présence. En fonction de la taille de ces cartes ? Je ne pourrais probablement plus vous emmener. Je pourrais probablement m'enfoncer sur d'autres. Je pourrais facilement dire notre Jacob trois espaces au lieu de quatre. Et puis ajoutez-en un autre juste pour que nous puissions remplir cet espace. Très bien, ça ressemble un peu à une meilleure utilisation de l'espace. C'est ce qu'on appelle le cygne. Désolé, c'est la caisse. Très bien, donc je ne suis pas exemple étrange renforcé où il est à utiliser. Je ne fais que vous montrer comment vous pouvez le faire. Et ensuite, si je voulais une deuxième règle, si je viens de reproduire ces quatre, regardez ce qui se passe, cela crée automatiquement la nouvelle règle. Bien sûr, je vais probablement vouloir un peu de lumière du jour entre eux. C'est donc à ce moment-là que les gens auraient tendance à vouloir avoir une div distincte pour la règle, n'est-ce pas ? Donc, à ce moment-là, ce que je vais faire, c'est supprimer cet identifiant car il ne s' agit pas seulement d'une règle d'agitation. Je vais également supprimer l' excédent que j'ai déjà fait. Je vais donc simplement créer une autre règle ou plutôt à partir de celles-ci, dupliquer cela puisque nous les dupliquions tout ce temps de toute façon. Donc, je me contente de refacter nul, non ? Ce qui fait partie des parties du processus. Parfois, vous faites un design comme je viens de le faire. Je pensais pouvoir utiliser la seule règle et n'importe quoi, mais je n'aime pas ce que ça ressemble. Sans problème. Alors div votre galerie d'identité est. Et puis, à l'intérieur de la Galleria, il plusieurs rôles avec plusieurs colonnes, comme l'intégralité du code de roulement. Et je le colle deux fois à l'intérieur de la vue de la galerie. J'ai donc cette règle, qui est la première rangée et la nouvelle règle du cyclone. Et quand je le regarde en arrière, c' est toujours un peu comme il est encore étouffé, mais devinez quoi ? Parce que maintenant j'ai les deux rôles distincts. Je peux facilement mettre de la brique entre les vies et regarder ça. Je reçois cette lumière du jour. Donc, tous les conteneurs de Dave vous aident à garder les sections ensemble , puis à les déplacer en une seule unité. J'ai donc toute cette rangée dans une div, tout ce besoin. Donc, si je mets juste un point de rupture entre les deux plongées, alors j'ai la lumière du jour que je cherche. Bien sûr, nous n' avons pas d'images, c'est pourquoi nous ne voyons que ces liens brisés. Vous pouvez insérer des images, les embellir et les modifier comme vous le souhaitez. Mais je pense que c'est ça, je pense que c'est cool. Je pense que nous avons fait beaucoup de choses et nous avons examiné un certain nombre d'options. Nous avons pu diviser nos règles sur nos colonnes. Et nous voyons où diviser encore plus et mélanger et correspondre les différents éléments qui se réunissent pour créer un site Web. Donc maintenant, je peux dire que c'est fait avec la page Apple. La maison a l'air de cette façon et ça m'a l'air bien. La demeure, bien sûr, cohérence encore une fois, ces clés, sorte que vous pouvez simplement vous assurer que tous les en-têtes sont des couleurs cohérentes dans l' ensemble de votre site Web. À moins que vous ne vouliez délibérément qu'il soit d'une couleur différente, alors c'est très bien. C'est à vous de décider. Ainsi, lorsque nous reviendrons, nous envisagerons de redessiner notre formulaire de contact. Ce sera certainement une activité très amusante. 23. Page de contact redonnez avec Bootstrap Forms: Très bien, nous sommes donc de retour et nous modifions notre formulaire de contact. Le problème des formes, c'est qu'il y a gens qui le considèrent comme leur travail de jour comme un rite de passage pour s'assurer qu' ils peuvent concevoir un formulaire. formulaire peut être aussi complexe que simple, car c' est ainsi qu'un utilisateur se sent réellement invité à interagir avec vous. Il s'agit de la passerelle vers votre application ou au niveau de base où nous ne collectons pas nécessairement quelque chose de trop sensible. C'est très bien. On peut juste aller jusqu'à l'école avec ça. Mais plus tard, lorsque nous avons commencé à envisager un développement plus complexe dans Dotnet, vous commencerez certainement penser à la sécurité dans son ensemble. est essentiel d'avoir une forme bien conçue. Pour l'instant, cependant, nous nous concentrons uniquement sur la mise en page. Sachez que ce que je vais faire, c'est sauter sur Bootstrap et voir quelles idées de forme ils ont pour nous, n'est-ce pas ? Parfois, vous voulez faire quelque chose, eh bien, vous avez besoin d'inspiration et il n'y a rien de mal à cela. Donc, si je viens de passer à la documentation du formulaire, nous examinons déjà les contrôles de formulaire, examiné certains d'entre eux et nous avons vu que nous avions la classe de contrôle de tableau de bord de formulaire que nous pourrions utiliser. Mais nous avons vu aussi que vous avez des échantillons comme si vous sautez des poètes du contrôle de forme, vous voyez, d'accord, ils ont un exemple où, je veux dire, c'est vraiment tout ce besoin pour notre formulaire de contact. Très bien, donc littéralement nous pourrions emprunter ces gènes sont peu nombreux et nous serions cités sans citation, c'est fait, non ? Si je regarde les mises en page, suis sûr d'avoir de belles idées pour OK. Whoa, on peut avoir une grille, n'est-ce pas ? On peut donc faire beaucoup de balises d'entrée avec les colonnes, n'est-ce pas ? Holy peut savoir ce qu' on appelle les gouttières, avoir une largeur de gouttière ne sont pas tout à fait sûrs de ce que l'on ferait, mais c'est très bien. Voici un bon formulaire complexe utilisant la disposition de la grille qui a été répondu. Donc, si vous voulez un mot de passe e-mail ou peut-être un numéro de contact , une adresse et tout ce que quelqu'un peut se connecter ou s'inscrire. Vous avez des tonnes d'options et de façons de le faire. Très bien, donc ce que je vais vraiment faire c'est emprunter ces mises en page complexes. Il s'agit de mises en page complexes. Bien sûr, nous pouvons trouver d'autres choses à mettre en place. instant, ce que nous avons pour notre formulaire, c'est juste le nom complet, l'adresse e-mail et les questions que vous avez posées. Si nous empruntions ce formulaire complexe, nous pourrions facilement dire FirstName, LastName. Changez cela par l'adresse e-mail, puis laissez cela être la requête, puis supprimez ces lignes excédentaires. Et puis, bien sûr, nous avons le bouton à soumettre. Donc, je vais le faire. Je vais juste copier celle-ci parce que je l'aime bien. Je vais passer à notre code. Et puis je vais passer à la page de contact, remarquez également que le filtre doit être modifié. Laissez-moi juste Caleb est ce nev, allez dans le conteneur, retirez le contenu, tout le contenu. N'oubliez pas que nous devons en finir avec cela, c'est notre ligne de conduite. Et puis je vais emprunter le pied de page pour naviguer rapidement, qu'est-ce que c'est ? C'est juste effondrer ce que je dois voir à l'époque, emprunter le pied de page, puis je vais le placer ici. Il n'y a donc pas d'étiquette deux fois, encore une fois, à Charlotte. Tous les RPG ont des éléments très similaires. Voilà donc à quoi ressemble notre page. J'ai besoin de cette étiquette de rupture entre la navigation et le conteneur. On y va. Très bien, commençons donc à modifier ou à former. Nous avons donc notre formulaire, notre entrée, notre e-mail. Très bien. J'ai dit que nous allions changer cela pour qu'il s'agisse du prénom, du nom et de l'adresse par e-mail. Donc, au lieu de changer un par un, je suis prêt à être une bulle stratégique si j' ai déjà l'entrée pour le courrier électronique. Et je voulais changer l'adresse en e-mail, donc je vais simplement copier l'étiquette et l' entrée pour le courrier électronique. Et je vais remplacer la première ligne d'adresse. Remarquez que ça s'appelle douzième, je n'en ai pas fini dans la div, juste les deux commandes. J'ai donc préservé le contrôle des e-mails. Non, je peux modifier cela, le prénom et le nom de famille. Et bien sûr, vous voulez vous assurer que vos étiquettes sont bien ce qu'on demande. Donc l'entrée FirstName, FirstName pour la main-d'œuvre pour beaucoup est l'ID, non ? Donc, si c'est d' abord entrer FirstName pour moi, désolé, je pense qu'il tourne en rouge FirstName pour. Ensuite. Nous devons nous assurer d'avoir la carte d'identité, c'est vrai. La même chose pour celle-ci, c'était le mot de passe. Ce n'est pas un nom de famille. Donc, nom de famille. Et le type était mot de passe n'est pas de texte et votre type était un e-mail. C'est un texte complet pour cela. L'e-mail est toujours conservé. Donc FirstName, Lastname, e-mail, aucun problème. Et ensuite, n'êtes pas là, nous pouvons enlever ceux dont nous savons que nous n'avons pas besoin, donc je n'ai besoin de rien à propos de la ville, du zip et de quoi que ce soit d'autre. Je n'ai pas besoin de cette case à cocher non plus. Quelqu'un écharde, bouge toutes ces choses. Très bien, mais adressez-vous ensuite à deux. Je vais définitivement modifier. Cela va donc être une entrée, une requête. Et il n'y a pas de place pour celle-ci. Comme presque tous le pensaient, cela n'est pas à l'abri d'être dans la zone de texte. Il s'agit d'une zone de texte. Mais c'est la question, n'est-ce pas ? Ainsi, zone de texte, ouvrir et fermer la balise. Pas de problème. Il prend de la surface. Je vais vous donner le contrôle de la classe. Ainsi, le contrôle du forum en tant que classe et votre ID sera la nouvelle idée qui est la requête d'entrée. Je vais supprimer cette entrée. Et l'étiquette ici est une fois que vous voyez votre requête pour le bouton, je suis allé renommer cela en voyant San en requête d'envoi. En plus de cela, je veux qu'il s'étende sur quelqu'un pour le faire bloquer btn. Et quand je regarde ce que nous obtenons, enfants, donc l'œil, d'accord. Très bien. C'est bien. C' est bon à voir. Cela signifie que quelque part en cours de route, j'ai tellement mal égalé que les remorqueurs ont le prénom et le nom de famille. L'adresse e-mail. D'accord. Mais ensuite, je synchronise l'adresse et je vois l'entrée à l'intérieur de certaines choses. Quelque chose s'est donc mal passé en cours de route. Nous devons y remédier et c'est encore plus problématique. Essayons donc de trouver des fourre-tout. Et je regarde et honnêtement, je ne vois rien de mal. Donc probablement nous avons juste besoin de mettre à jour la chienne et DFS de l'actualisation de la page affiche mieux. Je pense donc que c'était juste un coup sur le serveur en direct. Mais vous voyez les conséquences de ne pas le fermer correctement parfois, parfois, lorsque vous faites cela, la page n' affiche pas ce que vous attendiez et l' éditeur ne vous dira pas pourquoi. Très bien, alors soyez vigilant quand vous voyez ces petites choses. Et à mesure que vous grandissez, vous serez plus à l' aise et apprendrez à mieux les modifier. Mais je pense que c'est une bonne forme. peux mettre un peu de verbiage sur la page, pas seulement la forme rouge, mais nous pouvons probablement utiliser comme quelque chose que nous avons dans la section « boulon oh, discours ». Ainsi, sur la page des photos, nous avions toute cette rangée de bateaux de discussion qui nous sommes, et des coordonnées. Je pense que cela pourrait être utile sur ce formulaire, encore une fois, c'est à vous de décider. Vous pouvez ne pas être d'accord. Je vais donc juste mettre tout ça au-dessus du formulaire. Donc, quand quelqu'un navigue vers la ferme, il voit que c'est moi, c'est ainsi que vous pouvez me contacter ou remplir le formulaire et envoyer votre requête. Très bien, je pense que c'est agréable et facile à faire. Maintenant, évidemment, l'ampleur ou modifications sont à la hauteur de votre imagination et de vos objectifs. Je ne suis donc pas prescriptif, je vous donne juste des directives et je vous montre comment tout cela peut être combiné avec divers éléments Bootstrap pour créer vos pages. À ce stade, je pense que le site est beau. Lisez mon site Web. De toute évidence, lorsque vous cliquez dessus, il doit naviguer à la maison. Il ne s'agit pas de naviguer. Je clique sur le rendu ne navigue pas. C'est donc une chose que je voudrais changer définitivement pendant que je suis ici pour que cela aille probablement dans le index.html. Très bien, et si je le fais dans cette section, je vais certainement devoir le faire dans les autres. Très bien, donc je viens de faire le mod spinal, vous devriez être capable d'aller de l'avant et copier et de le coller et de le changer, non ? Mais après avoir fait le module, voyez que ça marche, non ? Et ce sont de petites choses qui améliorent la convivialité de votre site Web. Et vous voulez vous assurer que vos utilisateurs sont satisfaits. Et qui aurait eu une bonne expérience sur d'autres choses à garder à l'esprit, c'est moins, c'est plus. Très bien, alors quand nous reviendrons, nous allons simplement vérifier toutes nos modifications apportées à GitHub et ensuite jeter un coup d'œil à notre site Web en direct. 24. Site de service complet et mis à jour en direct: Maintenant, nous allons nous renseigner GitHub et je vais juste baiser un peu Chuck et suggérer ou voir idéalement, ce que vous voudriez faire est de vérifier GitHub chaque fois que nous atteignons un jalon. C'est donc toujours dangereux quand on fait tous ces désirs, toutes ces pages et que tu pars et que tu fermes TVA, non ? Pour savoir que nous n'avons pas eu boucle ou du moins depuis ces dernières séries de modifications, nous n'avions pas de boucle. Si mon ordinateur s'est allumé entre la dernière leçon, cette leçon, tout ce travail aurait été perdu. Il est donc dans votre intérêt qu'au moins fois que vous avez fini de travailler sur une page et que vous l'avez activée, et que cela fonctionne, vous l' enregistrez dans GitHub. Vous économisez donc cet espace dans le temps. Chaque fois que vous vous connectez à GitHub ou à votre moniteur de contrôle de source, c'est comme si vous un signet dans la quantité de travail que vous effectuez ou que vous devez effectuer. Il est donc toujours bon de garder des cônes courts. Et vous savez, vous aurez toujours une version récente pour revenir à une version si quelque chose se produisait. Donc, avec tout ce qui est dit, allons-nous mettre à jour nos changements. Et si vous espérez que vous y êtes allé et que vous avez mis d'autres images et mis à jour d'autres choses. Pas de problème. Je vais vous montrer quelques-uns des autres changements que j'ai apportés. Un mode très mineur. Donc, sur les vitesses de l'indice, tout cela a été changé ces titres. Juste quelque chose. Au lieu de frapper, de frapper, de frapper, de taper, corrigez également l'espacement entre les en-têtes et le curseur en introduisant simplement notre étiquette de rupture entre ces deux divs. Joli et simple. Sur la page à propos j'ai eu ma petite image qui est coincée pour qu'elle regarde c'est à quoi elle peut ressembler si vous n'êtes pas allé chercher l'image. C'est à quoi ça peut ressembler. À ce stade, je n'ai pas eu une image énorme, seulement. J'ai eu l' image la plus petite de Pixabay. Pour celui-ci, c'est le cas ici. Je viens de télécharger le 640 big ainsi de suite ou parce que je n'avais pas besoin cette énorme image pour rentrer dans cet espace minuscule. Vous devez donc toujours vous assurer que taille de votre image est aussi proche que possible de ce dont vous en avez besoin. Vous ne voulez pas que des fichiers volumineux sur votre site Web gênent rapidement l'expérience utilisateur ou le chargement du site Web. Et l'autre chose que j'ai faite était d' envoyer ces deux boutons qui sont des discours de contact. À ce stade, sans doute que cela pourrait être redondant parce que la page Contact mal alignée plus élevée, BAC feuilletée va l' envoyer à la page de contact. Donc, en fait, ce que je vais faire ici, je sais que ça me semble être une embauche pour déclencher un e-mail. Très bien. Vous avez déjà cliqué sur les sites Web de Boatman ? Je suis allé cliquer dessus. Il essaie de lancer l'e-mail ou d'afficher l'adresse e-mail à laquelle envoyer la demande. C'est ce que nous allons faire ici. Je saute donc sur mes boutons et les deux vont à des contacts. Mais celui-là que je m'engage, je vais lui donner une directive masculine 2. Et ensuite, une adresse e-mail. Je vais dire test example.com. Et ils nous laisseront regarder ce qui se passe lorsque nous cliquons. Laissez donc vos commentaires, d'accord, ça navigue, c'est très bien. Cependant, embauchez-moi va en fait lancer mon client de messagerie. Vous n'avez pas de plus, le client complet, mais il lance mon client de messagerie et essaie d'y envoyer l' e-mail. Vous voyez ça ? C'est donc ce que l' ensemble, vous savez, vous pouvez faire essayer votre URL d' envoyer un outil et une adresse e-mail. C'est sympa et facile, n'est-ce pas ? Donc, comme je l'ai dit, à moins qu'un scénario n'apparaisse parfois, vous n'avez jamais à faire quelque chose quand il monte ici, c'est bien d'être confortablement et souvent tout entier. Vous pouvez manœuvrer la situation et obtenir ce dont vous avez besoin ultime. Cependant, il n'y a pas de cours sur Terre qui vous apprendra tout ce que vous devez savoir en une seule séance. Vous devez expérimenter. Vous devez rencontrer certaines choses par vous-même. Et c'est ainsi que vous allez grandir en tant que développeur. Donc, avec tout ce qui a été dit et fait, il y a des promenades pour qu'il descende. Allons de l'avant et vérifions nos changements. Donc, c'est tellement important d'obtenir une section. Je vais dire un meilleur style aux pages Web. C'est bon ? Et puis je vais juste aller de l'avant et m'engager. Dis oui. Et nous devons synchroniser lorsque 23 points tirent, poussent et cliquent sur la synchronisation. Ensuite, je vais naviguer sur le site en direct. Je ne vais donc pas aller sur GitHub pour voir si ça marche. C'est donc le test que j'ai passé pour naviguer sur le site en direct. J'adore toujours les URL quelque part et je regarde ça. Il est automatiquement mis à jour. Donc déjà des chemins qui traversent cette étape d'étonnement où tout simplement délicat à GitHub met à jour notre site Web. Je vous montre juste que c'est notre œuvre en direct sur Internet. Maintenant, tout le monde peut voir ce qu'est le watt. Très bien. Une autre modification que je pense que je voudrais faire est changer la barre de navigation, le lien actif à chaque fois que nous sommes entrés, donc pour le contexte, permettez-moi de zoomer aussi loin que possible. Vous remarquez donc que tout le manque est en quelque sorte mis en évidence et les autres sont des adultes. Et même lorsque je clique sur un boulon, maison est toujours mise en surbrillance et contact home est toujours mis en surbrillance. Et l'autre chose, qui est facile à résoudre, est que le favicon n'est que sur la page d'accueil, je suis sûr que nous connaissons le remède à celle-ci. Nous devons juste nous assurer qu'une icône de 50 est sur chaque balle de plage. Je pense que le problème de la barre de navigation est un problème plus important. Ce n'est pas si important, mais en même temps, nous voulons nous assurer que l'expérience utilisateur est bonne. Jusqu'à présent, nous allons devoir utiliser certains JavaScript. Donc, dans notre fichier de code, nous savons que nous avons script.js et c' est notre fichier de script pour toutes ces choses. Nous avons des méthodes côtières que je vais vraiment effacer ceux qui sont des échantillons. Nulle part ne va faire quelque chose qui soit vraiment significatif. Et nous allons mélanger JavaScript et du jQuery pour que cela soit fait. Et sur ce point, nous voulons également nous assurer que nos fichiers de script sont présents à chaque pH. Vous pouvez donc simplement copier tout cela. J'ai dû le faire. Le bootstrap, jQuery et le fichier de script, vous pouvez simplement copier tout cela et vous assurer qu'il se trouve sur chaque page juste en dessous de la section de pied de page. Donc, sur un bateau, il devrait se trouver sous le pied de page. Cela ne ferait que s'effondrer toutes ces choses, non ? Il peut le placer là. Et c'est la même chose pour le contact. Très bien, pour que nous puissions écrire le script une fois et qu'il soit diffusé sur toutes les pages. Revenons donc à nos scénarios. Je voulais utiliser jQuery, quelqu'un pour faire ma syntaxe d'hérédité de point de document. Ou nous pouvons simplement dire la fonction de signe du dollar, ouvrir et fermer, ouvrir et fermer, puis fermer. Donc, toujours ouvert et fermé. Juste du soda. Nous n'oublions pas de fermer. Même si l'éditeur peut le faire allusion. Il y a des éditeurs qui ne sont pas forcément en deux comme ça. Alors, mettez-vous en colère en effet nouveau afin que vous puissiez réduire la probabilité d' erreurs en fonction de votre environnement. Donc ce que je veux faire, c'est charger dynamiquement quelle page a l'octave. Donc pour le contexte, dans notre barre de navigation, j'ai un peu supprimé qu'il est déjà acheté dans la barre de navigation. Vous auriez remarqué que le lien d'accueil était actif. Je pense que je l'ai toujours dans les contacts à titre de référence. Le lien à domicile devait donner son objectif. Ils ont donc attaché l'herbe active et un pyjama coréen à l'intérieur de cette zone. Donc, parce que nous avons copié le code depuis bootstrap, il est arrivé avec cela dans l'exemple où une page d'accueil était active. Cependant, dans un vrai site Web, vous n'en avez pas envie, ou cela peut être aussi simple que de prendre ce code et de le mettre sur le pH relatif, n'est-ce pas ? Donc, si je suis sur la page de contact , je vais voir que le lien de contact est actif et c'est la plage actuelle. Si je voulais rester à la page, je n'ai pas semblé bien sûr, non, cela introduit une variation sur la barre de navigation soudaine. Il obtient donc une nouvelle page pour être assez méticuleux pour se souvenir de faire ça. Et pour moi, c'est juste un entretien difficile. Vous avez donc cette option et cette option fonctionne, elle fonctionnera très bien. Cependant, je voulais être un peu plus dynamique. Donc ce que je vais faire dans le fichier de script, c'est d'abord enlever notre registre tous les chemins ou de pj c'est que j'ai. Allons donc justement jusqu'ici. Pages. Et je suis prêt à faire une artère, non ? pages auront donc un tableau contenant les différents noms de page. discours d'index d'une puce comporte une page. Désolé, laissez-moi obtenir mon contact rouge renversé. Ensuite, nous avons des liens externes. Mais ce n'est pas vraiment une page PHP qui ne fait que des URL. Voici donc les pages auxquelles je m'occupe. Et si j'ajoute une autre page que je viens d'y ajouter, je ne mets pas le succès parce que c'est aussi un bar assez de montagne, donc je n'ai pas besoin de la faire pour les instituts. Très bien. Donc, tout ce qui est Atlanta dans la barre de navigation, je vais étendre cette liste en conséquence. Donc, la prochaine chose que je veux faire est d'obtenir le nom du chemin. Donc var pathname, qui, quand nous disons chemin serait l'emplacement du point de fenêtre. Je pense que c'est le nom du chemin. On y va. En d'autres termes, donnez-moi l'URL, n'est-ce pas ? Donc, lorsque vous naviguez, vous êtes sur cette page, sur cette page, et cetera. Quelles URL êtes-vous sur le droit ? Maintenant, après avoir fait tout cela, je vais mettre en place un joli petit événement ou un événement de clic. Je vais donc dire, en fait, je pense aux habitudes. Ensuite, je clique sur événement pourrait être un peu plus de travail parce que je devrais le découvrir. Quel lien a été cliqué. Et puis essayez de localiser cette URL exacte et de désigner pour refactoriser le lot. Donc je vais le faire, je vais changer ma stratégie. Au lieu de cela, je vais dire, donnez-moi tout le NovaLink, donc nav link. Et puis je vais dire « point » chacun. Et la mousse adulte Sean, où je prends chacun qui est en cours d'itération, il affirme entrer dans une variable appelée i. Très bien, donc, en d'autres termes, obtenez tout avec le lien de la classe nav. C'est nos réunions de classe. Donc, rien n'est pas un clignement des yeux. Novalink est la classe qui est donnée à chaque élément de navigation, soit lien de navigation, lien, non ? Donc, je vais tous les récupérer. Autant de liens que peut-être sur la plage, je vais tous les chercher et passer par chacun d' eux. Et pour chacun que je regarde, je l'appelle . Alors, à ce moment-là, je suis allé voir si le nom du chemin ou, ou simplement l' URL sur laquelle nous nous trouvons. Si le point de thème de chemin inclut, ce qui signifie quel que soit le thème du chemin, s'il inclut cet élément de navigation particulier. Très bien, je vais donc comparer le nom de l'élément de navigation avec le nom de la page. Et si celui que je suis en attente, ce nom est impliqué est inclus dans le chemin d'accès. Alors, que dois-je faire ? Il s'agit alors d'une déclaration if. Donc, si c'est vrai, indiquez cette vente aux enchères. Et puis je vais avoir un autre pour voir ce nom de classe de points. point inclut, ce qui signifie que si l'élément sur lequel nous sommes, non, si le nom de la classe inclut déjà jusqu' à ce moment-là, nous voulons faire autre chose. Je vous donne juste les conditions du squelette. Vous avez donc une idée de ce que nous essayons d'accomplir. Donc, si la page sur laquelle nous ne sommes pas beaucoup fait partie de l'index, alors je le veux, ou de l'ironie est désolée. Ensuite, je veux voir cette Dalda prononcer ce sermon. Mais quand on veut obtenir l'élément sur lequel nous sommes au cours de l'événement de déclenchement sur notre fonction, nous avons le mot-clé, cette classe de points. C'est donc l'une de ces choses dynamiques que nous pouvons faire. Ce que nous voyons à la volée. Veuillez ajouter l'octave de classe. Et puis nous avons vu cela pour toucher quelque chose plus tôt. Page actuelle Aria, quelqu'un à ajouter sur les attributs qui indiquent REO, page actuelle également. Très bien. Maintenant, si la deuxième condition est vraie moyenne dans le nom de la classe inclut déjà active, alors je vais simplement dire supprimer la classe active. Nous ne voulons donc pas qu'il ait deux octaves s'il atteint déjà la limite en T, mais assurez-vous de l'ajouter si nous sommes sur cette plage de charrette. Je pense donc que c'est fait. Laissez-nous tester et voir et vous voulez vous assurer que vos pages sont dans le même ordre qu'elles apparaîtront dans la barre de navigation. Ne les mélangez pas et ne les associez pas. Bon, alors indexez ensuite un bateau et un contact. Donc, dans le code n'importe où, c'est que j'avais tout l' actif étant codé en dur et la zone pj était codée en dur. Je vais supprimer ça. Donc non, je suis allé seul le jQuery pour faire tout ce travail acharné dans le bug développé pour moi. Je l'ai donc retiré du bord. Et il est également supprimé de cette table de pages, la zone selon pij. Et puis, faisons-le pour faire un tour. Nous allons donc embarquer ici, ou c'est, ou sur l'indice dépasse les points forts que nous cliquons sur nos bateaux tous regardent cela. Il a changé. Nous cliquons sur Contact, il change sur un bateau. Notre maison sur les gènes. Donc, partout où nous allons, vous voyez que cela va certainement changer. Donc non, avec tout cela a changé l'aube et le crépuscule pour être complet avant de ne pas connaître le poulet, je vais juste m' assurer que toutes les pages de l'icône ou le logo de l'entreprise dans leur code, Ensuite, je sauterai et je mettrai mon message. J'ai fait de la dynamique, des liens de navigation, allez-y et je m'engageais localement. Ils diront toujours. Et puis, une fois ce comité terminé, je vais simplement procéder synchronisation afin qu'il pousse nos changements et nous puissions lui donner peut-être quelques minutes ou 30 secondes comme la tige. Ensuite, nous devrions être en mesure de voir nos changements refléter sur le site Web dans un très court ordre. Et on y va. Je suis déjà en train de naviguer et vous voyez que les pages sont modifiées en conséquence. Très bien. Et puis parce qu'il y a un retard dans le moment où cela se produit, parce que la page se charge que les drones de script dans lesquels vous voyez des flux, n'est-ce pas ? C'est donc un bel effet, le beige s'est chargé sans ça et ils se rendent compte, Oh, je dois le faire. Donc, ça ressemble un peu à un effet de fondu. Très bien, je pense que c'est tout pour les activités du site Web de code OBC. À ce stade, vous avez beaucoup appris. Vous devriez au moins être à l' aise avec la syntaxe HTML de base. Mais encore une fois, il suffit de pratiquer la moitié des expériences. Et c'est la seule façon dont vous grandissez vraiment, vraiment dans cette discipline.