Challenge 3 - Calculs, variables et chaînes en Javascript
![Ed from CowboyBeebop talking to himself while in cyberspace](../img/cowboy-beebop_ed_talking-to-herself.gif)
A quoi ça sert Javascript ?
A partir de maintenant, tu vas découvrir les bases du language de programmation Javascript.
Pour comprendre le rôle de ce language sur Internet, je te propose l'expérience suivante:
- installe le plugin NoScript qui désactive le code Javascript sur toutes les pages web que tu visites: rends-toi sur ce lien, puis clique sur le bouton "+ Ajouter à Firefox" et dans la petit fenêtre qui s'ouvre, clique sur "Installer". Redémarre enfin Firefox.
- rend toi sur le site www.pagesjaunes.fr avec ton navigateur. Descend bien jusqu'en bas de la page pour observer tout son contenu.
- désinstalle le plugin NoScript: dans Firefox, clique sur l'icône "Menu" puis sur "Extensions" ("Add-ons" en anglais). Ensuite, clique sur "Désactiver" ("Disable" en anglais) pour l'extension NoScript. Si une fenêtre s'ouvre, clique "Oui". Redémarre enfin Firefox.
- retourne sur le site www.pagesjaunes.fr avec ton navigateur. Qu'observes-tu cette fois?
- installe le plugin ScriptSafe qui désactive le code Javascript sur toutes les pages web que tu visites: rends-toi sur ce lien, puis clique sur le bouton "+ Ajouter à Chrome", et dans la petit fenêtre qui s'ouvre, clique sur "Installer".
- rend toi sur le site www.pagesjaunes.fr avec ton navigateur Descend bien jusqu'en bas de la page pour observer tout son contenu.
- désinstalle le plugin ScriptSafe: dans Chrome, clique sur l'icône "Menu" puis "Plus d'outils" puis "Extensions". Ensuite, décoche la case "Activé" pour l'extension ScriptSafe.
- retourne sur le site www.pagesjaunes.fr avec ton navigateur. Qu'observes-tu cette fois?
Dans les champs ci-dessous, le code Javascript que tu écriras sera immédiatement évalué, et le résultat de ta dernière ligne sera affiché.
Les nombres
Devine le résultat des calculs ci-dessous, puis vérifie ta réponse par toi-même dans l'interprêteur Javascript ci-dessous.
1+2+3
?
0.5 * -3
?
2+3*4
?
Essaie d'ajouter des parenthèses dans ce dernier calcul, pour que l'addition soit effectuée en premier
Les variables
Une variable est comme une étiquette, ou comme une boîte dans laquelle on range des choses.
Pour donner une valeur à une variable, on lui affecte une valeur en utilisant l'opérateur=
.
Devine le résultat des expressions ci-dessous, puis vérifie ta réponse par toi-même dans la console Javascript en-dessous.
(n'oublie pas, seul le résultat de ta dernière ligne sera affiché)
x = 2
y = x
y
x = 2
y = x + 2
y
x = 2
x = x * 3
x
Les chaînes de charactères
Une chaîne de caractères (en abrégé chaîne, ou encore string en anglais) représente un texte.
Ces valeurs sont délimitées par une paire de guillemets simples ou doubles : "Ceci est une chaîne"
.
Devine le résultat des expressions ci-dessous, puis vérifie ta réponse par toi-même dans la console Javascript ci-dessous.
x = 'BADA'
y = 'BOUM'
x + y
x = 'TO'
x + x
x = 'X'
y = 'Y'
x = y
x
x = '4'
y = '5'
x + y
- rends-toi sur une page web de ton choix dans un nouvel onglet.
- ouvre la console Javascript de ton navigateur en appuyant sur F12 si tu utilises Firefox, ou bien si tu utilises Chrome simultanément sur Ctrl+Shift+J dans l'ordre.
- insère
document.body.contentEditable='true'
dans la barre de saisie en bas. Ne t'inquiète pas si ton navigateur affiche un avertissement la 1ère fois que tu copies-colles dans cette zone: tapes simplement ce qu'il te demande dans ce cas. - sélectionne n'importe quel texte de la page avec ta souris.
- tape n'importe quoi d'autre au clavier pour le remplacer.