Transcription
1. Bienvenue dans ce cours !: Bonjour. Bienvenue dans mon cours de
Java Script cross. Et cette classe abordera
les bases de JavaScript, notamment les variables, les
fonctions, les tableaux, les objets et la manipulation des barrages Ce cours est
parfait pour les débutants ou pour tous ceux qui souhaitent
rafraîchir leurs compétences. Aucune
expérience préalable en Javascript n'est requise, juste une
connaissance de base du HTMO Au fur et à mesure que nous parcourons
chaque ligne de code, vous obtiendrez également des explications
détaillées grâce à des
diapositives que j'ai générées qui décrivent
tout ce que vous devez savoir sur chaque ligne de
code et le cours. À la fin de ce cours, vous serez capable de créer une application
Web interactive simple et de présenter vos nouvelles
compétences en toute confiance. Prêt à plonger.
Commençons. Rendez-vous dans la première leçon.
2. Introduction et mise en place: T. Bienvenue dans cette vidéo d'
introduction, dans laquelle je vais
vous présenter JavaScript. Nous allons apprendre comment
déclarer des variables, des
fonctions, travailler avec des objets, des enquêtes, et à la fin, nous allons avoir un
exemple simple de manipulation du dom. Donc, avant de
passer en revue tous ces sujets, nous devons configurer l'environnement de
développement. Tout d'abord, vous devez
télécharger VS code, l'éditeur de code, appelé VSCode Vous pouvez accéder à votre navigateur
et accéder à cette URL. Code dosual study.com, téléchargement par barre oblique. Ensuite, vous pouvez télécharger le code
VS en fonction de votre système
d'exploitation. Après avoir téléchargé et installé le code
vis dans votre système, vous pouvez l'ouvrir.
Avant d'écrire du code, nous devons installer une extension qui nous aidera dans notre parcours de
développement. Vous pouvez donc vous rendre ici
dans la section des extensions. Et recherchez une
extension de serveur en direct. C'est bon. C'est l'extension
que je recherche. Je l'ai déjà installé, vous pouvez
donc l'installer. Et une fois que vous l'avez fait, puis-je avoir ce bouton juste
ici qui dit « Go Live » Ne cliquez pas dessus pour le moment. Avant de le faire, de
lancer et d'exécuter le serveur, à l'aide de cette extension,
vous devez créer un fichier HTML à points d'index. Vous pouvez cliquer sur ce
bouton ici et créer un nouveau fichier HTML à points d'
index. Je l'ai déjà là.
3. Javascript : variables, fonctions, tableaux, objets et manipulation du DOM: À côté de l'
index du fichier HTML, vous devez créer la structure HTML de base
d'une page Web. Ensuite, vous pouvez
exécuter le serveur. Commençons par notre code. La première chose
dont nous avons besoin dans une page HTML est l'élément type de
chien, écrivez le type de chien,
puis définissez-le en HTML Comme ça. J'ai du dactylographe là-bas. Type de chien HML. Si vous souhaitez en savoir
plus sur cet élément, vous pouvez consulter cette
diapositive ici. Comme je l'ai dit, au début, chaque ligne de code comporte une
diapositive contenant des informations sur cette ligne de code
en particulier. Donc, après cette ligne ou
après cet élément HTML, nous allons avoir
l'élément HTML ici, écrivez la balise d'ouverture. C'est ce qu'on appelle la balise ouverte, et c'est la
balise de fermeture d'un élément. Et ici, à l'intérieur des signes
plus ou moins grands, vous allez avoir le
nom de cet élément. Dans ce cas, c'est du HTML. Encore une fois, vous pouvez en apprendre davantage sur cet élément sur les
diapositives ici. Maintenant, à l'intérieur de cet élément, côté de la balise d'ouverture ou entre les
balises d'ouverture et
de fermeture, vous trouverez nos éléments de page
ou notre structure de page. Ainsi, dans chaque page, nous allons avoir un
élément d'en-tête à l'intérieur de l'en-tête, nous pouvons mettre des informations sur
la page, comme ajouter un
titre, un élément de titre, le
titre de la page. Je vais dire quelque chose comme introduction à Javascript,
introduction. Après la tête, nous allons
avoir l'élément du corps. Encore une fois, ouvrir et
fermer les étiquettes. C'est bon. Nous allons maintenant vous
présenter les principes fondamentaux
de Javascript. Maintenant, pour écrire du code JavaScript, nous avons besoin d'un élément HTML appelé script like cell À l'intérieur des balises d'ouverture
et
de fermeture de cet élément de script, vous pouvez avoir notre code de script
Java. La première chose que nous allons
apprendre est de savoir comment
déclarer des variables. Nous pouvons déclarer que la variable
constante utilise le
mot clé constant comme suit. Par exemple, déclarons une variable Pi et définissons sa valeur sur 3,14 ou 3,14
sans unités Il s'agit d'une constante, ce qui
signifie qu'elle ne peut pas changer. La variable constante ne peut pas changer. Maintenant, si vous voulez avoir une
variable qui peut être modifiée, ce que je veux dire
par « peut être modifiée », c'est
que, par exemple, ici, je peux avoir Pi, puis réinitialiser sa valeur à, par
exemple, cinq. Cela n'est pas autorisé
et cela ne fonctionnera pas. À l'heure actuelle, rien ne
va mal ici. Nous n'avons aucune erreur, mais en réalité, Javascript
ne vous permettra pas de le faire. Pour ce faire, vous devez utiliser le mot clé let
et déclarer la variable, par
exemple, here,
mess message variable. Le massage peut être modifié, nous utilisons
donc le mot clé let et nous allons définir sa valeur
initiale sur, par
exemple, hello JavaScript. Maintenant, comme je l'ai dit, cette variable peut être modifiée. Vous pouvez vous rendre ici et
modifier sa valeur en « How there », par exemple. Maintenant, c'est fini pour les variables. Ensuite, nous allons avoir la journalisation ou les
informations de journalisation sur la console. La console, si vous ne
savez pas ce qu'est la console,
c'est la console de notre navigateur. Actuellement, nous n'avons pas fait fonctionner le serveur, donc c'est ce que je
vais faire. Cliquez donc sur le
bouton ici, Go Live, et cela démarrera un serveur, un serveur en direct sur
votre système local. Et une fois que vous êtes là, assurez-vous d'ouvrir l'inspecteur, et ensuite, voici le conseil. Maintenant, à côté, puis-je avoir un endroit où nous pouvons
imprimer des informations. Habituellement, ce conseil est utilisé des fins de débogage, vous savez, pour corriger certaines erreurs ou pour trouver des informations sur
le code que nous exécutons Je vais donc juste
vous montrer au lieu de parler. Je vais consoler les
variables que nous avons déclarées. Peut consoler la variable Pi. Utilisez donc l'objet console, puis dans ce sujet, nous avons de nombreuses méthodes
utiles. Et l'une d'entre elles est
la méthode log. Ici, vous pouvez enregistrer n'importe quelle variable
ou n'importe quelle donnée de votre choix. Vous pouvez enregistrer la variable Pi. Ensuite, je vais enregistrer ça. Maintenant, si je passe du côté
navigateur de la console, vous pouvez voir que nous avons la
valeur de la variable Pi. Maintenant, allons-y et voyons la valeur de notre variable de
message. Comme vous pouvez le voir ici, nous avons déclaré que la valeur initiale de la variable de message
est hello Javascript, puis nous l'avons réaffectée avec
une autre valeur, bonjour Encore une fois, je vois maintenant
que c'est la valeur finale. Comme vous pouvez le voir,
c'est bonjour. Ainsi, en modifiant la valeur
d'une variable principale, vous remplacez réellement
la valeur de la variable. C'est tout pour la journalisation de la console. Passons maintenant à la section «
Voyons les fonctions ». Maintenant, ce sont les fonctions d'alarme. Nous allons utiliser
le mot-clé function. Nous allons appeler
cette fonction greet. Et cette fonction va
recevoir un argument. Les arguments peuvent être placés entre deux
parenthèses de la fonction après le
nom de la fonction juste là Ce sont deux parenthèses. Et voici le nom de l'argument. Cette fonction get va donc saluer une personne
en utilisant son nom. C'est pourquoi nous avons un nom d'
argument ici. Dans cette fonction,
utilisez le journal de la console comme ça, et enregistrez le
nom de la console. C'est bon. Maintenant, si je sauvegarde ceci,
rien ne se passera. Parce que nous devons
exécuter la fonction. Pour ce faire, nous
appelons la fonction, et nous ajoutons deux
parenthèses comme S. Maintenant, en passant le paramètre name Par exemple, James, sauvegardez encore une fois, vous pouvez voir que nous avons James. En fait, cette fonction va donc
saluer James dans ce cas. Je vais supprimer le journal de la
console à partir de là. Et remplacez-le par
le mot-clé return, en ajoutant une chaîne littérale, ce qui nous aidera à injecter
du code javascript Va voir ça dans une minute. Va dire bonjour. Allez ensuite injecter une variable avascr en utilisant le signe du dollar et deux
accolades comme ça, restant dans
la chaîne
littérale Maintenant, à l'intérieur, nous pouvons
transmettre toutes les variables que nous voulons. Dans ce cas, je vais
transmettre l'argument name, qui est également une variable. Maintenant, je vais enregistrer ceci car nous avons supprimé
le journal de la console d'ici. Nous ne pouvons pas voir le résultat
de la fonction Crete. Nous devons donc placer la
fonction crit dans un journal de console. Écrivez donc le journal de la console, puis exécutez
la fonction Crete, coupez-la à partir de là et
exécutez-la les deux parenthèses de la fonction de
journal, comme ceci Si je l'enregistre,
vous verrez le résultat de l'appel de
la fonction d'accueil, qui est Hello James. C'est tout pour les fonctions
en JavaScript. Passons maintenant
à un autre sujet. Après les fonctions. Travaillons
ou apprenons à
travailler avec des objets. Maintenant, pour déclarer un objet, alors que les objets peuvent être assignés
en tant que valeurs pour les variables. Nous pouvons déclarer une variable, une variable constante
en utilisant la constante Qard Par exemple, nommez
cette variable person. Nous pouvons maintenant attribuer la valeur de cette variable constante
à un objet. Les objets constituent un excellent moyen d' organiser des informations ou des données. Donc, si vous voulez en savoir
plus sur les objets, vous pouvez consulter les
diapositives ici. Avant de l'enregistrer, je
vais le commenter en disant « déclarer un objet ». Hein ? Je vais enregistrer ça. Maintenant, à l'intérieur de cet objet, il
va avoir des propriétés. La première propriété est
la propriété du prénom. Il s'agit de propriétés personnalisées, vous pouvez
donc les nommer
comme bon vous semble. Maintenant, au lieu de définir la valeur de cette propriété
en utilisant un signe égal comme celui-ci,
nous utilisons collins pour définir
la valeur d'une propriété d'objet. Maintenant, après le col,
nous allons avoir la valeur de la
propriété du prénom, définie sur James. Ensuite, nous pouvons ajouter
autant de propriétés que nous le
souhaitons à cet objet, mais nous devons séparer les propriétés par
une virgule, comme ça Ensuite, nous allons avoir la propriété du
nom de famille, et nous allons définir
son nom de famille comme Wilson. Une autre virgule est
là et définissez la propriété H sur 13, OK Et même les objets peuvent avoir
des propriétés définies sur une fonction. Les propriétés sont donc comme
des variables, mais, vous savez, la déclaration de
ces propriétés diffère des
variables habituelles dans les scripts Java. Ainsi, pour déclarer une fonction ou
une méthode à l'intérieur de cet objet, vous devez d'
abord écrire le
nom de cette fonction, par
exemple, son nom complet, comme toute autre propriété. Mais la valeur de
cette propriété sera une déclaration de
fonction. Nous pouvons déclarer une fonction en utilisant le mot-clé function, comme ceci. Ou en fait, nous pouvons même utiliser méthode
plus avancée pour
déclarer des fonctions. Au lieu d'utiliser le mot-clé
function, nous pouvons utiliser la structure de la
fonction flèche. Il vous suffit donc d'écrire deux parenthèses comme ça, en
ouvrant et en fermant, puis d'ajouter une flèche créée par signe égal dans
un signe plus grand et vous
assurer qu'il n'y a pas d'
espace entre les deux. Il s'agit d'une fonction de flèche. Ajoutez ensuite deux accolades à
l'endroit où le code de cette fonction
va être exécuté Créez cette fonction,
en utilisant le mot clé return, en renvoyant une
chaîne littérale et en injectant ce prénom Ce mot clé fait référence à
cet objet personnel. Si vous souhaitez
enregistrer ce mot clé dans la console, l'objet entier sera imprimé dans la console. Nous sélectionnons donc
cet objet actuel l'aide de ce mot clé
point prénom Nous accédons
donc au prénom
de
propriété de l'objet personnel. Je vais donc avoir
le prénom, puis je vais également
accéder au nom de famille. Donc, ce point est le nom de famille, je vais y ajouter une orthèse bouclée C'est bon. Maintenant, je
vais le sauvegarder. Voyons maintenant ces propriétés
imprimées sur la console. vais accéder aux
propriétés et méthodes de nos objets, et je vais les imprimer en
utilisant la méthode de journalisation de la console. journal de la console peut donc
sélectionner l'
objet personne et accéder à
la propriété du prénom. Maintenant, dans le navigateur, vous pouvez voir
ici dit James. La dernière sortie fait donc
référence à la ligne numéro 35, qui est notre ligne d'orientation où se trouve
ce journal de console. C'est bon. Nous allons
avoir un autre journal de console, dans lequel nous allons exécuter
notre fonction de nom complet. Nous pouvons le faire
simplement, comme nous appelons une propriété. Accédez donc à la propriété du nom complet. Mais cette fois, nous allons
ajouter deux parenthèses, comme si nous exécutions
une fonction en toute sécurité Et le dernier résultat indique « undefined defined Maintenant, pourquoi nous l'avons obtenu. C'est logique
et cela devrait être le cas car nous utilisons
la syntaxe de la fonction aro. Et la fonction o n'a
pas ce mot clé. Revenez donc à notre déclaration de
fonction de base en utilisant le mot-clé function. Enlevez l'oral de
là, et c'est tout. Je vais enregistrer
ça. Et c'est tout. Assurez-vous donc de remplacer cela par la
déclaration de fonction, comme suit. Maintenant, si nous voyons les résultats, puis-je voir James Wilson les
afficher
directement dans le navigateur de
la console. C'est bon. Maintenant, continuons. Après avoir travaillé avec les objets, allons-y et
travaillons avec des tableaux Alors, comment déclarer un tableau ? Encore une fois, nous déclarons d'abord
une variable, et nous la nommons fruits en la définissant comme égale à
un tableau vide. C'est ainsi que nous pouvons déclarer un
tableau entre crochets, ouvrant et en fermant les
crochets. Il s'agit donc d'un
tableau vide pour le moment. Pour qu'il ne soit pas vide ou pour
ajouter des données à ce tableau. Nous pouvons ajouter les données à ce
tableau sous forme d'éléments, séparés par
une virgule, juste là Vous pouvez ajouter des chaînes, des chiffres, ce que vous voulez. Ici, je vais ajouter des chaînes, des
noms de fruits comme la
pomme, la banane et la cerise. C'est bon. Puis-je le sauvegarder ? Et maintenant, allons-y et
accédons aux
éléments ou aux éléments du tableau. Puis-je utiliser le journal des points de la console pour voir l'élément du tableau
sur la console. Et je vais sélectionner le
premier élément de ce tableau. Ajoutez donc le nom du tableau, puis ajoutez des crochets, même manière, à
l'intérieur du crochet, vous devez entrer l'
index de l'élément. Dans les tableaux, nous commençons par zéro comme indice
du premier élément Nous commençons donc à compter dans
la programmation en général, nous commençons à compter à partir de
zéro, zéro, un, deux, 34. Apple a l'indice zéro. Donc, si je sauvegarde ceci, nous allons voir Apple a loué
la console. C'est vrai. Si vous voulez
obtenir une banane, vous pouvez transmettre l'
index numéro un. Et voilà. Banane.
Maintenant, continuons. Nous pouvons également enregistrer
l'ensemble de la gamme de fruits sur console. Alors, passez les fruits comme ça, je vais en avoir une
gamme juste là. Avec les trois éléments. Gaz. Il s'agit de l'
indice numéro zéro, référez-vous à l'
élément pomme numéro un, à la banane à la cerise. Vous avez ici la
propriété de longueur, égale à trois. Vous pouvez également imprimer la longueur
d'un tableau en utilisant Well, en utilisant la propriété
ou les inconvénients le long la longueur de la propriété,
aussi simple que cela Là-dedans, tu
vas en avoir trois. Et c'est la longueur de
la gamme de fruits. C'est bon. Continuons maintenant et allons travailler avec certaines méthodes matricielles. Permettez-moi d'ajouter un niveau de commentaire,
disons en utilisant des méthodes matricielles,
en utilisant des méthodes matricielles. Nous allons commencer
par la première méthode. Tout d'abord, nous allons devoir
utiliser la gamme de fruits. Et nous allons appeler,
comme vous pouvez le voir ici, VSCode nous a donné
des indices ou des indices sur toutes les méthodes de tableau qui peuvent être appelées ou
utilisées sur un tableau Chaque tableau possède le
même ensemble de méthodes. Cette fois, je vais
utiliser la méthode pop. La méthode pop supprime
le dernier élément. Dans ce cas, vous allez supprimer
cet élément ici. Donc, si j'appelle la méthode pop, comme ça, d'accord. Et pour voir le résultat, je vais utiliser le journal de la console. Laissez-moi faire défiler la page vers le haut, et je vais enregistrer
le tableau de fruits sur console. Donc, cette méthode pop remplacera le tableau Nous pouvons donc enregistrer
le tableau de fruits sur console, et nous pouvons voir qu'il ne contient que deux éléments, la
pomme et la banane. Le dernier élément
a donc été supprimé. Donc, vous savez,
faites attention à ne pas utiliser cette
méthode car elle
remplacera la
valeur initiale du tableau Maintenant, la deuxième méthode est une méthode qui nous
aidera à
parcourir chaque élément
du tableau. Cette méthode est appelée pour chacun d'entre eux. Maintenant, cette fonction
acceptera un
rappel de fonction en tant qu'argument Vous pouvez donc transmettre
une déclaration de fonction, vous pouvez déclarer une
fonction comme ça ici, mais sans nom. Assurez-vous de ne pas l'utiliser
pour ne pas le nommer car il s'agit simplement d'une
fonction de rappel d'une méthode Il s'exécutera lorsque nous
exécuterons le code. Ici, vous pouvez utiliser le mot-clé
function, ou je pense qu'il est temps
d'utiliser l'aérosyntaxe Maintenant, cette méthode
obtiendra deux arguments, l'élément du tableau, elle
parcourra donc son
élément ici, je l'appelle fruit. Et chaque fois que ce
sera
le cas, vous savez, l'argument
du fruit aura la valeur
de l'un de ces éléments, il examinera
chacun d'entre eux dans l'ordre. Le deuxième argument est donc l'indice de cet élément
dans le tableau. Maintenant, à l'intérieur d'ici, nous pouvons
enregistrer par contre l'index de l'élément. C'est un colon. D'ailleurs, vous pouvez utiliser le signe plus pour concaténer des chaînes
et des nombres Après l'appel,
nous aurons nom
du fruit ou l'élément de
la gamme de fruits. Maintenant, je vais enregistrer ça. Dans le navigateur, vous pouvez voir que les éléments
de notre tableau sont
imprimés. L'indice zéro fait référence à
l'élément pomme. Nous avons ici Index One Banana. J'espère que vous avez vu comment fonctionne la fonction
d f d. Je vais juste vérifier si le
navigateur est à sa place. C'est bon. Très bien,
maintenant nous allons continuer. Pour apprendre pour chacun ici, je vais apprendre à
créer un ensemble d'objets. C'est donc très utile
pour organiser nos données. Je vais utiliser la variable
principale ici, et je vais
déclarer une constante
ou une variable principale avec
le nom students, can pour définir sa valeur sur
un tableau comme celui-ci, et décider que dans ce tableau nous
allons avoir un objet. Cet objet va
avoir une propriété. Le prénom, le nom du premier
élève étant Alice, peut également avoir une
propriété d'âge définie sur 20. Vous pouvez maintenant ajouter d'autres objets. Permettez-moi d'ajuster ce tableau
pour le rendre plus visible. Je vais séparer les tableau ou les éléments à
l'aide d'une virgule Il en va de même pour
les éléments d'objets. Ajoutez la virgule
dans le deuxième objet, le même nom de propriétés pour
celui-ci sera Bob Je vais avoir un S 22. Et le dernier objet, qui aura le même nom de
propriétés que
celui-ci, sera Charlie,
dont l'âge sera fixé à 223 ans. C'est vrai. Il s'agit d'un
ensemble d'objets. Maintenant, nous pouvons à nouveau parcourir chaque objet
en utilisant la méthode for, mais sur le tableau des étudiants. Écrivez donc aux élèves F. Je vais imprimer le nom de chaque
élève et H. Donc, si vous pensez capable de le
faire vous-même, vous pouvez continuer et essayer. Donc F, je vais ajouter une
fonction flèche en tant que fonction de retour. Et cette fonction noire
va attirer l'étudiant. Et vous pouvez ajouter
l'index ou simplement, vous savez, vous n'avez pas besoin
de l'ajouter juste là. Nous avons donc les étudiants. C'est ce qui nous tient à cœur. Et à côté, je vais à nouveau
utiliser le journal de la console. Désolé pour cela, Consol point log. Et je vais prendre en compte
l'argument des étudiants. Et n'oubliez pas que l'argument étudiant
ici représente un objet. Nous parcourons donc
chaque objet de ce tableau en boucle. Et chaque objet possède
des propriétés, un nom et un âge. Je vais donc consulter propriété name,
comme vous pouvez le voir, code
VS nous a donné les propriétés
de cet objet étudiant Nom. Ensuite, je vais
le concaténer avec une chaîne qui indique « est » avec l'espace situé ici dans
l'espace situé devant, puis ajouter une autre
information sur l'élève, à savoir âge Et après l'âge, je dirais des
années. OK. Maintenant, dans le navigateur,
comme vous pouvez le voir, il imprimera toutes
les informations sur nous, mais ce n'est pas le cas. Je ne sais pas pourquoi il est dit que
823 n'est pas défini. J'en ai fait une sorte, désolée. Vous devez donc y ajouter
une colonne. Eh bien, je dois le faire. Vous pouvez maintenant voir le résultat. Nous avons trois éléments ou trois étudiants
dans ce tableau, et nous avons imprimé
trois chaînes ou trois phrases concernant ces étudiants ou les
présentant. C'est bon. Passons maintenant à autre chose. Et cette fois, nous allons
apprendre à utiliser des
méthodes d'objets avec des tableaux Donc, après la méthode des quatre. Je vais déclarer une autre variable principale,
lui donner des noms, et nous allons prendre le tableau des étudiants et utiliser
une autre méthode appelée map. La méthode map est
similaire à la méthode des quatre H, mais avec une simple différence, que la fonction map à savoir que la fonction map
va renvoyer un tableau et va être affectée à la valeur de cette variable. Allons-y donc et
voyons cela en action. Je passe un rappel en
utilisant la syntaxe aro. Celui-ci va également obtenir l'étudiant ou l'
élément du tableau et l'index. Je vais y mettre
l'index, mais nous n'allons pas l'utiliser. À l'intérieur de ce dos
de la fonction cartographique. Nous allons revenir, et nous sommes tenus utiliser la
déclaration de retour ici Je vais renvoyer le nom à point de l'
étudiant. Cela créera un Uwara avec
uniquement les noms des étudiants. Et vous pouvez le
constater juste une seconde. Je vais le dire et en
dehors de la fonction cartographique, je vais utiliser Cdle point log et Cdle log the names variable Maintenant, dans le navigateur, vous pouvez clairement voir le
tableau avec uniquement Alice Bob, Charlie, qui sont les
noms de nos étudiants. Nous avons donc créé un tout nouveau tableau avec
uniquement le nom de l'étudiant. C'est ainsi que vous pouvez modifier les
tableaux, et en fait, la fonction de carte est très
importante dans Java Script, et vous pouvez faire beaucoup
de choses avec elle Nous arrivons maintenant à la dernière
partie de cette leçon, qui est la manipulation du dom. Je vais donc
ajouter un commentaire ici et dire « manipulation de Dm ». Puis-je commencer par sélectionner
des éléments de notre page HTML. Allons-y et ajoutons quelques éléments HTML
dans notre corps. En dehors du script, il est
possible d'ajouter des éléments tels qu'un titre ou notre page. Euh, nous pouvons ajouter le titre
en utilisant H one Element. Je vais lui donner un argument ou un attribut
ID, je vais définir
son ID sur title. Je vais dire ici, un script Java juridique. C'est bon. Après l'élément H, il y aura un élément bouton avec des balises d'ouverture et de fermeture. Ne l'oubliez pas.
Nous allons avoir un identifiant dans cet identifiant, par
exemple, le bouton Changer le
titre. Ce bouton sera
responsable
de la modification du titre. Ici, puis-je dire « changer le
titre ». C'est bon. Maintenant, nous leur donnons des identifiants parce que nous voulons les
sélectionner à l'aide JavaScript et sélectionner un élément
spécifique à l'intérieur de notre corps. Nous avons besoin d'un identifiant unique. C'est pourquoi nous utilisons
l'attribut ID. Puis-je donc avoir un élément DIF. Encore une fois, vous pouvez en apprendre davantage sur ces éléments
dans ces diapositives. Puis-je donc ajouter un identifiant
pour ce contenu dF. C'est ça. Ne peut comporter
que trois éléments, un
H, un bouton, un bouton et un développement. Maintenant, ci-dessous, puis-je commencer à
manipuler notre dôme, puis-je sélectionner maintenant
l'élément de titre, une constante particulière, et le
nommer élément de titre Et nous allons
accéder au document de la page ou au document de
page, et nous allons utiliser une méthode
appelée get element by ID. Et je vais chercher le titre, qui porte le titre d'identification. Eh bien, je vais transmettre le titre de
la pièce d'identité. C'est bon. Après le titre, puis-je
sélectionner notre élément de bouton. Documentez, obtenez l'élément par identifiant, et l'identifiant de notre
bouton est le contenu. Enfin, sélectionnez réellement « non ». Le bouton ne
possède pas l'identifiant du contenu, mais il contient le bouton de
changement de titre de l'identifiant. C'est écrit de la même façon. Puis-je le copier d'
ici et le coller juste pour m'assurer qu'
il
n'y ait aucune erreur. Maintenant, après l'élément de bouton
, sélectionnez l'élément de
contenu. Je vais utiliser le document
point get élément par identifiant, l'identifiant de l'
élément de contenu est content. Maintenant, après avoir sélectionné notre élément. Nous voulons maintenant modifier le contenu du texte de
l'élément de titre. En fait, nous devons
changer le titre. Sélectionnez l'élément de titre,
accédez au contenu textuel de cet élément et
modifiez-le pour qu'il soit
bienvenu dans Java Script. Script Java. Si je sauvegarde ça. Maintenant, oui, j'oublie de fermer la console. Je peux voir ici qu'il a changé pour Welcome to Java Script. Si je supprime cette
ligne et que je sauvegarde
à nouveau, pour revenir à
sa valeur initiale, qui est bonjour Javascript. Maintenant, si je renvoie
la ligne de code, elle redeviendra
Welcome to Java Script. Maintenant, continuons. Nous pouvons même ajouter un
écouteur d'événements à n'importe quel élément, mais dans ce cas,
vous allez ajouter un écouteur d'événements à
l'élément bouton Je vais donc sélectionner
l'élément bouton et y ajouter un écouteur d'événements Cette méthode d'écoute d'événements acceptera le
nom de l'événement Cette affaire est un clic. Nous allons écouter
l'événement Click. Je vais fermer ça. Et tu vas être
rappelé. Dans ce rappel,
nous allons
modifier le contenu de l'
élément de titre Encore une fois, la propriété
de contenu
textuel de l'élément de titre sec lui a attribué le titre modifié. Le titre a été modifié avec un point d'
exclamation. C'est bon. Maintenant, je peux le tester
sur le navigateur. Si je clique sur Modifier le titre, il deviendra Changement de titre
. C'est bon. Je vais ajouter des
fonctionnalités supplémentaires à cet événement de clic. allons sélectionner l'élément de
contenu que nous avons déclaré ici. Et je vais
modifier la valeur de la propriété
HTML interne Ce code HTML interne
acceptera les éléments HTML. Ce n'est pas comme le contenu du texte. Je vais donc vous
montrer en action. Je vais ajouter une chaîne littérale. À l'intérieur, laissez-moi le sauvegarder. À côté d'ici, il y
aura des éléments AML, l'élément P, qui font référence
à l'élément de paragraphe Et en ajoutant le paragraphe, nous allons appeler
la fonction grite que nous
avons déclarée ici Oui, juste là. Nous
avons la fonction grite, qui accepte un argument name
et renvoie le message d'accueil C'est bon. Va
transmettre le nom. Par exemple, étudiant, par
exemple. Oui. Inscrivons votre étudiant. Je vais dire,
par exemple, ou en fait, il dira exactement bonjour étudiant. Nous
allons enregistrer ça. Et si je reviens ici, clique sur changer le titre, peux voir que le
titre a changé, et nous avons ici bonjour étudiant le développement du contenu. C'est bon. Nous pouvons ajouter
d'autres éléments à ce code. Nous pouvons avoir un paragraphe et un autre paragraphe,
si nous le voulons. Puis-je vous donner certains de vos fruits préférés et nous pouvons les transmettre ou
utiliser la gamme de fruits. Et nous allons
utiliser la méthode join. La méthode join va donc
joindre tous les éléments du tableau, et elle acceptera le séparateur
entre ces éléments. Nous pouvons donc
les séparer à l'aide d'un coma. Il les rejoindra
tous sous forme de chaîne. Il les renverra
tous sous forme de chaîne. Je vais donc enregistrer ça. Avant de lancer
ou de voir les résultats, nous allons ajouter
le dernier paragraphe. Encore une fois, si je n'explique pas assez bien
les choses, vous pouvez consulter les
diapositives ici. Je vais donc ajouter des étudiants coréens. Étudiants et
allez dans le
tableau des noms , joignez tous les objets et séparez-les par une virgule C'est bon. Maintenant,
dans notre navigateur. Nous pouvons cliquer ici, changer le titre, et vous pouvez voir les trois
paragraphes ou les trois phrases. Le premier dit : « Bonjour étudiants ». Ici, certains de vos
fruits préférés sont la pomme et la banane. Nous n'en avons que trois car
nous avons utilisé la méthode pop, qui remplace
la valeur du tableau Hein ? Maintenant, nous avons aussi cette phrase qui dit étudiants
coréens, Alice, Bob et Charlie. Le tableau de noms que nous
avons déclaré ici, en utilisant la méthode map.
Aymen El Kani, software engineer
