Transcription
1. Introduction au cours: habileté bienvenue. Étudiants de karité à une autre classe géniale. C' est une belle journée dehors, et c'est une autre belle journée pour en apprendre davantage sur JavaScript. Et c'est quoi ce cours ? Eh bien, très simpliste. Il s'agit d'une infirmière en script Java, et nous avons tous vu ces notes incroyablement ennuyeux qui à l'écran vraiment horrible. Mais vous devez apprendre en l'utilisant. Donc, c'est ce que ça coûte. Nous allons parler de la méthode de note de script Java, qui est disponible pour nous sur le projet de fenêtre grandement. Real va parler de confirmations et de promesses, et ensuite nous allons terminer ce cours en construisant nos propres alertes très personnalisées. Eh bien, regardez, boîte de
dialogue et vous pourriez être inquiet que vous pensiez, Clyde, je ne sais même pas comment écrire un script Java. Je ne sais pas comment ça marche. Panique. On va le traverser, bâton par bâton. Alors prends un café. On va prendre un Red Bull. Peu importe ce qui vous convient, soyez motivé et je vous verrai dans la croix audio oh
2. Alerte - Créer un événement sur clic d'un bouton: Alertes pour de nombreuses interfaces et dans le passé, les
messages sont simplement effectués en utilisant l'alerte JavaScript native. Et toi et moi savons à quel point Dale est frustrant et moche. Et l'un des problèmes est que la fonction JavaScript d'alerte native, c'est un objet système, et cela signifie juste que nous ne pouvons pas manipuler quoi il ressemble et qu'il vient littéralement directement du navigateur. Donc, afin de manipuler les alertes, leur
apparence sur le terrain, nous devons concevoir notre propre CSS sur le rétro-éclairé. Je vais vous montrer quelques exemples de quelques alertes. Jetons un coup d'oeil. Alors on y va. J' ai une page HTML simple qui vient d'appeler alerte en marche et en marche. Commençons donc maintenant par produire une page HTML. Et maintenant, nous pouvons appeler cet exemple d'alerte. Et vous pouvez créer cette alerte de plusieurs façons. Vous pouvez créer des boutons, vous pouvez faire des entrées, vous pouvez faire des images. Je vais juste faire une entrée ici. Faites-en un bouton que vous pouvez le faire de plusieurs façons. Alors faisons-en un bouton. Et faisons un onclick. Et c'est le feu une fonction que nous pouvons appeler ce que nous sommes allés délicieux appelé Show Alert. Et faisons la valeur de cette entrée. Cliquez sur Camino pour exécuter une alerte JavaScript. Maintenant, la seule chose à faire est que nous définissions cette fonction, et c'est JavaScript XHR reste. Et JavaScript doit être inséré entre les balises de script qui sont exécutées. Alors mettons ceci en ligne est un bouton que nous avons créé et en fait,
ticket, qu'est-ce que vous attendez à se passer ? Oui, cette largeur, c'est facile ? Vous venez de voir comment empêché un bouton avec un événement click. Et dans cette alerte est JavaScript. C' est entrer dans d'autres exemples.
3. Alerte - Écrire du texte à l'écran après que l'alerte ait été déclenchée: Bon, donc on va devenir de plus en plus compliqués comme
on dit maintenant qu'on veut cliquer sur un bouton affiché alerte. Et lorsque vous cliquez sur OK sur cette alerte, le texte est remplacé à l'écran par quelque chose. Comment ferons-nous ça ? Allons-y. Créons un document HTML. Et encore une fois, créons un bouton avec un événement onclick. Appelons cette alerte. Alerte-moi. Je m'ai aimé n'est pas défini. Encore une fois, nous devons rock javascript. Javascript doit être inséré dans les balises de script. Nous devons maintenant définir la fonction de charge MY. Vous ne vous inquiétez pas de la syntaxe autour des fonctions. Nous allons apprendre ça sous peu. Vous verrez, vous verrez comment tout cela s'insère et comment écrire une fonction. Maintenant, après avoir cliqué sur OK alerte bien-être, que voulons-nous exécuter en dessous ? Rappelez-vous avec JavaScript, et nous allons en fait c'est le navigateur à la pasa. Il commence de haut en bas. Donc, une fois que le soluté est fait, il va exécuter ce qui est en dessous. Et dites que nous voulons sur l'écran. Ceci a été remplacé par JavaScript. Cela a lieu conte de JavaScript. Cette tentative et exécuter ce code, je m'attendrais à voir une alerte, ne m'
attendrai pas à voir un bouton. Quand on prend le bouton, on devrait voir une alerte. Et après l'alerte, nous devrions voir le texte mis sur l'écran. Parce que nous avons utilisé le document. Le document est, C'est un objet global. C' est presque, ce n'est pas tout à fait le roi. Souviens-toi de Windows le roi Mais avec sous la fenêtre, vous avez ce gros objet appelé document. Et ce document est votre badge de poids et dit toujours, est-ce que nous accédons à une méthode appelée droit ? Ce qui met littéralement, prend sur cette page. Simple comme ça. Voyons à quoi ça ressemble. jours de notre bouton. Donnez-moi un coup de pied. Mon billet est une alerte. Et que se passe-t-il lorsque je clique sur OK ? Il faut ce qui est remplacé. Quel ensemble génial. Allons passer à autre chose.
4. Boîte de confirmation - Conditionnelle si vous êtes déclaré: On a vu des alertes. Maintenant, regardons une autre fonction JavaScript, une confirmation. Encore une fois, commençons par une simple page HTML qui a un bouton. Cette fois sur le clic, disons obtenir confirmation. Je suis sûr, que nous devons encore définir en JavaScript. Donc, définissons maintenant cette fonction get confirmation. J' ai obtenu en JavaScript dans les balises de script. Nous devons dire à JavaScript que nous définissons une fonction avec le mot-clé function. Et confirmons sur le lecteur d'écran qui viennent, eh bien, c'est juste une fonction JavaScript. Dans ces fonctions JavaScript, vous apprendrez simplement comme un programme au fil du temps, vous allez juste commencer à vous rappeler ce que ces noms de fonction hors, mais celui-ci est appelé conflit. Donc, je n'ai rien codé autour. Confirmez qu'il est intégré. Et nous allons simplement demander à l'utilisateur de U12. Continué devrait nous donner le gars et nous allons voir ce qui se passe. On devrait voir un bouton. Lorsque nous cliquons sur le bouton, nous devrions être affichés avec une boîte de dialogue de confirmation. Bouton Confirmer. Laisse-moi juste me débarrasser de ce point-virgule. Mettre JavaScript, c'est juste HTML est le bouton de confirmation lorsque notre ticket D12 continuer. Et ça me demande littéralement OK ou Annuler. Mais maintenant, si je clique sur OK ou Annuler et que rien ne se passe, essayons de comprendre comment coder quelque chose. Si je clique sur OK, comment ferons-nous cela ? Revenons au code. Nous avons cette boîte de dialogue de confirmation. Et ce que fait JavaScript est que nous pouvons réellement stocker la variable ok., le résultat de l'endroit où l'utilisateur clique sur OK ou Annuler dans une variable. Et nous allons entrer dans les variables dans la section suivante pour tenir serré signifie juste un conteneur où nous pouvons stocker des informations. Donc, stockons-le dans une variable appelée décision. Donc, la décision de l'utilisateur va être stockée dans Penny et la valeur nette dépendra s'il a cliqué sur oui ou non. Et maintenant, je peux coder quelque chose. Codions quelque chose avec une déclaration if. Et encore une fois, si des déclarations nous allons entrer plus tard. Je veux juste que vous ayez une idée de la façon dont nous pouvons commencer à travailler avec ce
genre d'événements JavaScript. Et avant de terminer le codage ici, rappelez-vous comment nous avons traversé les différents types de filles dans les pénis JavaScript, pourquoi les types Donald sont importants ? Cette boîte de dialogue de confirmation, si l'utilisateur clique sur, oui, elle renvoie true. Et si l'utilisateur clique sur les retours connus faux, c'est juste notre JavaScript est construit cette fonction dans son code. Donc ce que nous pouvons dire, c'est que nous pouvons dire si la décision est vraie, c'est un document, non ? L' utilisateur veut continuer. Sinon. Et c'est si la décision est fausse, c'est de la pourriture. L' utilisateur est mis à l'échelle et ne veut pas continuer. J' espère que même si vous ne comprenez pas complètement la syntaxe que
vous pouvez voir, vous pouvez suivre ce que j'essaie de faire. La première chose que nous avons fait est que nous avons créé un bouton. Et le bouton ne fait rien jusqu'à ce que l'utilisateur clique dessus. C' est ce que ça veut dire. Lorsque OnClick en tant que clics, événement net est déclenché. analyseur va voir cette fonction, obtenir la confirmation et il va ensuite trouver cette fonction. Il va savoir que c'est JavaScript. Parce que nous l'avons mis dans la balise de script. Il va trouver cette bonne fonction de confirmation et exécuté. Ça va dire, Ok,
cool, lécher la décision équivaut à confirmer. Voulez-vous continuer ? Quand il voit la confirmation ? Il sait que c'est une fonction, donc il va l'exécuter. Et puis si l'utilisateur clique sur oui, il va retourner un vrai booléen. Et on va écrire ça à l'écran. Et si elles sont cliquées, annuler sera faux. Donc, ce ne sera pas vrai. Et dans ce sera affiché sur l'écran. Voyons ça en action. Donc, ce sont le bouton de confirmation. Nous cliquons dessus. Si vous voulez continuer, dites non. Les utilisateurs ont peur et ne veulent pas continuer. Parfait, les fesses. Actualisez votre page. Essayons d'y aller. Cliquez sur le bouton. Le mot à dire ,
ok, ça veut continuer. Ça marche. Espérons que, avoir une idée pour cela, comment cool c'est un génial et intuitif. Continuons.
5. Amorce: Regardons maintenant quelques invites JavaScript. Nous avons regardé les alertes, nous avons regardé une conformations. Maintenant, regardons les invites. Encore une fois. Nous commençons par un document HTML5. Et nous pouvons le faire de nombreuses façons. Encore une fois, malveillant faire une entrée pour l'instant, et nous allons faire un déclic, va me demander fonction. Donc, nous avons notre bouton, mais maintenant quand le navigateur vient pour exécuter une fonction appelée m'invite, il ne va pas en trouver un, ce qui est pourquoi beurre écrire le mot-clé de fonction JavaScript. On l'a refroidi pour m'inciter. Et maintenant, émettons une invite JavaScript n'est vraiment pas difficile. Vous verrez maintenant avec le mot clé invite, message
erato, Meany, warthogs D ont. Et puis oui, vous pouvez juste donner un petit détenteur de place manque peu d'indice. Vous pouvez dire en nombre. On verra à quoi ça ressemble. Laisse-moi fermer ces autres onglets. N' oubliez pas que ce n'est pas JavaScript pour ne pas continuer à mettre des points-virgules à la fin. C' est juste du HTML. Alors demandez-moi de peasy comme notre bouton. Cliquez sur le bouton. Combien de phrothogs et yazid petit indice que nous avons dit dans le nombre d'eau. Maintenant octane loin et je clique sur OK, rien ne va se passer parce que nous n'avons pas dit à JavaScript quoi faire sans valeur d'entrée. Rappelez-vous, nous avons fait un peu ça avec la confirmation. Eh bien, comment pouvons-nous faire ça avec prompt ? Allons, jetons un coup d'oeil. Faisons-le. La première chose que nous devons faire est de bloquer la décision d'utilisation dans quelque chose, dans une variable. Faisons ça. Disons nombre, parce que nous savons que l'utilisateur va insérer un nombre lambda égal à toutes les utilisations mises dans. Fait vu jusqu'à présent. Et rappelez-vous comment nous avons parlé des littéraux de modèle ? J' espère que tu le feras parce que oui, on va faire un document, non ? Et nous allons utiliser des littéraux de modèle comme deux tirets de Beck. Et on va le dire. Et lorsque vous tapez une variable dans un littéral de modèle, vous devez utiliser le signe dollar et les crochets. Et on l'a appelé numéro, numéro. Et maintenant si je garde ça et qu'on va dans notre drap, Yana se rafraîchit, faisons-le. Faisons une invite dans le nombre de warthogs. Disons que j'ai trois filigranes et que je clique sur OK. Vous avez trois eaux est pâtés. C' est beaucoup. Et vous voyez comment il est dynamiquement inséré les trois sur la page, c'est génial. C' est ce que JavaScript est tout. J' espère que tu t'amuses autant que moi. Continuons.
6. Créer une alerte personnalisée: Rappelez-vous au début que j'ai dit que la fonction d'alerte JavaScript est un objet système, ce qui signifie que nous ne pouvons pas changer sa terre. Alors, comment obtenons-nous des onglets d'alerte JavaScript vraiment cool apparaissant ? Ou je ne vais pas utiliser de plugins parce que ce cours est sur l'enseignement de JavaScript. Et créons juste un. Créons un nous-mêmes avec de la vanille, HTML, CSS et JavaScript. Comme toujours, commençons par un document HTML et créons un bouton. Et maintenant, nous allons créer une fonction onclick. Et disons que moi. Et vous pouvez voir à droite, nous avons un petit bouton ici, cochez moi. Mais bien sûr, rien ne se passe quand on fait des billets. Maintenant, avant d'entrer dans le JavaScript, je veux réellement créer à quoi ressemblerait l'alerte et comment j'aime y penser. Crée une balise div, div qui contient toute notre alerte. Et puis dans cette étiquette div, je veux juste avoir un chauffage. Disons que c'est un message d'avertissement. Et puis je une fois un bouton que l'utilisateur peut cliquer. Ok, faisons ça. Prenons une balise div et disons avoir un identifiant de cela. Ça va être tout le réservoir contenant l'alerte. Et je voulais frapper et nous allons en avoir un autre et il a dit que c'est juste le message passé ce message du matin. Et puis prenons un bouton. Misha dit glosses. Oui. Je ne sais pas pourquoi. N' importe quoi. Sauve ça. Il ressemble juste à gobbledygook sur la page Web est notre message, est notre bouton OK à nouveau ne fait rien. Maintenant, nous allons juste avant que nous ne faisons JavaScript maintenant juste pour styliser ce message d'avertissement Kitty. Et je sais que ce n'est pas une bonne pratique, mais je vais juste mettre le style dans la tête. Je ne veux pas créer des feuilles de style externes et tout cela maintenant, nous pouvons simplement le faire pour obtenir de l'équité. Que devrions-nous faire en premier ? Faisons toute la div. Donc, cela utilise simplement nos techniques de style CSS standard pour identifier l'ID. Et maintenant, nous pouvons le coiffer ensemble. Affichons comme un bloc. Il est mis une couleur de fond. Cinquante-huit, cinquante huit, cinquante huit. Commencer à voir quelques résultats. Position fixe, bordure, deux pixels. vous montre juste comment cette chose est inventée. Mettons ça en même temps. Allons le rendre un peu plus large. Mais tomber à leur début est juste pousser, soulever un peu plus grand sur. Ce n'est pas la façon la plus idéale de faire des choses que j'essaie juste de faire le travail pour secouer un peu vers le haut. Et maintenant mettons juste un peu de rembourrage. Et son alignement qui prend le même type. Il se fait. Ça me prend, je pense que je veux ressentir l'ambiance. Stylisons maintenant ce message d'avertissement. Comment on l'a appelé ? Le message d'or ? Faisons en une couleur blanche pour qu'on puisse la lire. De quoi d'autre avons-nous besoin de méthodes ? Le marginal a l'air terrible. Anjum haut, marge, bas. Ça devrait être notre bouton longitude, longitude. Voir Stine vous dire que Stein a l'air beaucoup plus grand. Et dans le dernier jour pour styler ce bouton OK parce que cela ressemble table. Dites encore une fois, ce qu'on a appelé l'éthique date
de retour à lui et c'est à propos de ce que vous faites avec ça. Faisons une couleur d'arrière-plan. C' est PDS. Et nous ne
serions pas écouter, avoir exactement des frontières carrées. Ça n'a pas l'air si gentil. À mon avis. Bords légèrement arrondis. Probablement ne le voyez même pas, mais c'est ma subtile amélioration sur le design. Nous pouvons maintenant faire une frontière d'un enchérisseur déjà. Et le fond de la marge a besoin d'un peu de travail. Marge inférieure. Et l'autre chose que je veux montrer avec ma souris passe au-dessus du, ok, je voulais devenir un pointeur. Donc je pourrais juste vous aider ce pointeur. Maintenant, dans un survol, il devient un pointeur. Donc tu sais, c'est une bataille. Cool. Allons le rendre un peu plus large. Ajoutons juste un peu de rembourrage. Je suppose que je dirai que ça a l'air bien. J' ai dit que ça avait l'air puissant. Moi juste tirer cet inverse. J' ai dit ressemble à un bel onglet Alert Wave ID dans un autre pop-up que nous avons vu. Et vous pouvez décider que ces choses seraient comme si je venais de faire un travail très difficile. Maintenant, ajoutons JavaScript. Encore une fois, sortons hors script. Va juste en haut. Rappelez-vous que JavaScript doit être dans les balises de script. Et où devrions-nous le mettre ? Et où devrions-nous le mettre comme ? Mettez-le en haut. Oui. Mettons-le tout en haut. Script. Script. Cachons toute cette boîte d'avertissement de confirmation. Donc, pour le moment, nous avons qu'ils bloquent moins d'affichage cisco aucun. Et nous devrions voir ça disparaître. Mais quand nous le voulons, quand nous cliquons sur ce bouton, nous voulons le voir. Eh bien, la première chose que nous devons faire est de
commencer à créer une fonction pour que le bouton des ailes soit cliqué, non ? Si vous regardez en bas, laissez-moi juste faire défiler à nouveau vers le bas du code, vous pouvez voir ce bouton a une fonction que nous avons appelée Lead me. Nous devons maintenant définir cette fonction en JavaScript. Sinon, rien ne se passe, ce qui est ce qui se passe ici. Alors commençons à définir une fonction qui m'appelle. Fonction. Et que voulons-nous arriver ? La première chose que nous voulons arriver, c'est que nous voulons afficher un message d'alerte. Et pour ce faire, nous avons identifié cette balise div entière qui a l'alerte que nous avions avec un ID de confort. Alors appelons-le la boîte de confirmation ou l'absence d'un meilleur mot, document. Mender sur votre page Web, JavaScript a une méthode intégrée appelée getElementById. Et on a appelé ID. Alors maintenant, on l'a. Ensuite, la deuxième chose que nous voulons faire est, vous savez, quand cela alerte l'ouverture sur le bouton OK, nous voulons identifier le bouton OK parce que lorsque le bouton OK est cliqué, nous voulons que le modal apparaisse, cette alerte disparaisse. Donc c'est la deuxième chose qu'on voulait. En retard. Ok, document égal au bouton, getElementsByClassName. Quel rapide s'est terminé. Rappelle-toi ça encore. On l'appelle. Maintenant, si on l'a levé ainsi, ça va revenir. Lorsque vous trouvez un élément par nom de classe, il renvoie ce qu'on appelle une liste de nœuds. Et c'est presque comme un objet de type tableau. Donc, ce n'est pas tout à fait suffisant. Nous devons juste accéder au premier élément de ce tableau, qui est ce que cela fait là. Maintenant que nous avons ce bouton OK, ce que nous voulons faire, c'est définir un déclic. Cela signifie que lorsque l'utilisateur clique dessus, d'accord, par toute la boîte de dialogue disparaît. Alors faisons ça. Et permettez-moi d'ajouter des commentaires ici. Et nous sommes passés par des commentaires. C' est le bouton dans le modal d'alerte. Et maintenant, nous voulons cacher le modal d'alerte quand un bouton est cliqué. Alors faisons ça. Ajoutons donc un écouteur d'événement. Sur clic, OK, bouton sur clic. Et nous devons définir à nouveau la fonction. Mais faisons tout ça en une seule étape. Et vous verrez plus tard, nous n'avons pas besoin d'écrire
ce grand mot-clé est une façon plus courte de le faire, qui est une nouvelle syntaxe. Je te l'apprendrai plus tard. Je veux juste que tu comprennes ce qu'on fait ici. Ensuite, une autre méthode intégrée dans les navigateurs et
JavaScript et le DOM est l'attribut malade. Vous pouvez littéralement modifier les attributs et les différents éléments de votre page. Alors prenons cette boîte de confirmation, que nous avons définie ci-dessus. Et nous pouvons voir un attribut. Et ce que font les attributs sur un état où nous nous souvenons que nous voulions qu'il soit affiché. Maintenant que aucun ou bouton Knit est cliqué, l'attribut que nous voulons faire le style est le premier argument de cette méthode. Et le second, c'est ce que nous voulons changer. Et c'est l'affichage à personne. Souple, non ? Donc maintenant, nous avons défini ce qui se passe avec le bouton dans le modal nerd, mais nous n'avons pas réellement montré le modal de toute façon. Donc on ne peut rien faire avec ça. Eh bien, mettons-le ici et disons « show modal ». Nous avons la boîte de confirmation, l'attribut S8. Nous voulons choisir le style et nous voulons afficher. Bloc. Il devrait y aller. Comment devrions-nous goûter les bons fruits de mer fonctionne. Cliquez sur le bouton. Qu' est-ce qui ne va pas ? Et laissez-moi était qu'il ne fonctionne pas quand d'autres Click Me. Donc quelque chose qu'on ne peut pas Jake, c'est si on console le journal, ouais, on peut bloguer haut. Reçoit l'événement click fonctionne. Allons à la console. Et nous allons cliquer sur le bouton. Vous voyez que rien ne se passe. Donc, évidemment, cette fonction me alerte comme cartographie appelé coussin est pourquoi sur le
moi coloré sur Lech devrait être sur vérification. L' effet de vérification fonctionne maintenant. Et ils sont hauts et comme je le voudrai. Ok, super. Laisse-moi le cacher immédiatement. Que rafraîchir une page lorsque je clique apparaît, nous avons identifié ce bouton OK. Donc, quand je clique sur OK, il va exécuter cette fonction qui dit sur un attribut sit d'afficher aucun et il disparaît. Donc, c'est vraiment un exemple de la façon dont nous avons créé une alerte à partir de zéro, à partir de littéralement gratté sur HTML, CSS, et un peu de JavaScript. Et nous avons littéralement créé notre propre alerte personnalisée. C' est génial. Et ça va s'asseoir sur le chemin d'être génial, CUDA. Continuons.
CM Code_Zone, !false | funny, because its true
