.. raw:: html

   <p data-intro='OOgah Chakkah'></p>

Un peu de pratique : les littéraux
##################################

.. warning::

   La pratique qui suit n'est pas une pratique du JavaScript : il s'agit de pratiquer les notions vues précédemment, et il se trouve que le navigateur nous fournit un environnement facile d'accès qui certes, est en JavaScript. Mais le but ici n'est pas de pratiquer le JavaScript qui nous n'avons pas encore commencé à voir.

Accès à la console du navigateur
********************************

.. image:: images/console.png

Pour commencer à expérimenter un peu les éléments que nous venons de voir, nous avons besoin d'un environnement. Le plus simple est d'ouvrir un navigateur web qui nous offre un environnement JavaScript accessible depuis la console.

Pour trouver cette console, il nous suffit d'aller dans les outils de développement :

Mozilla Firefox : ``CMD`` ou ``CTRL`` + ``MAJ`` + ``K``
Google Chrome : ``CMD`` ou ``CTRL`` + ``MAJ`` + ``J``

Nous avons maintenant un environnement JavaScript prêt à l'emploi.

Littéraux
*********

Dans la console, taper quelques littéraux :

.. code-block:: javascript

   1000 // un nombre
   true // un booléen
   false // un autre booléen
   '1000' // une chaîne de caractère
   'mille' // une chaîne de caractère
   "mille" // une chaîne de caractère
   'true' // une chaîne de caractère

Identificateurs
***************

.. code-block:: javascript

   qqch // cet identificateur n'étant pas défini, une erreur sera renvoyé
   Math // cet identificateur est défini par JavaScript
   document // cet identificateur est défini par l'environnement

Mots-clés réservés
******************

.. code-block:: javascript

   var qqch // on défini qqch avec le mot-clé réservé « var »
   qqch // l'identificateur « qqch » ne renvoie plus d'erreur, il est défini (mais renvoie « undefined » car pas défini )
   Math = null // on peut redéfinir l'identificateur « Math » fourni par JavaScript et lui assigner la valeur « null »
   if = null // on ne peut pas redéfinir le mot-clé réservé « if » fourni par le langage

Opérateurs
**********

.. code-block:: javascript

   1+2 // renvoie 3
   12+ // ne fonctionne pas, demande 2 arguments
   10/2 // renvoie 5
   11%4 // renvoie 3 (11 / 4 = 2 reste 3)
   0 > 1 ? 'oui' : 'non' // renvoie 'non'

Séparateurs
***********

.. code-block:: javascript

   [ 23, 34, 'abc', 'true' ]

Si on oublie des séparateurs parmi [,'], on peut s'attendre à des problèmes par exemple :

.. code-block:: javascript

   [ 23, 34, 'abc', 'true ]
   [ 23, 34, 'abc' 'true' ]
   [ 23, 34, 'abc', 'true'

.. raw:: html

   <script>
   introJs().setOptions({
      showProgress: true,
      steps: [{
         title: 'Bienvenue',
         intro: "Cette page est interactive. Effectuez les actions demandées à chaque étape avant de continuer. Si vous êtes bloqué, appelez l'enseignant. Ne faites pas « suivant » bêtement sans faire les actions demandées."
      },
      {
         title: 'Avant toute chose.',
         element: document.querySelector('.admonition'),
         intro: 'Nous allons faire ici un peu de javascript basique. Prenez connaissance de cet avertissement.'
      },
      {
         title: 'Accès à la console du navigateur',
         element: document.querySelector('#acces-a-la-console-du-navigateur > img:nth-child(2)'),
         intro: "Nous voulons accéder à la console du navigateur, qui va nous permettre de faire un peu de javascript basique. C'est la partie droite sur cette capture d'écran."
      },
      {
         title: 'Raccourci clavier',
         element: document.querySelector('#acces-a-la-console-du-navigateur > p:nth-child(5)'),
         intro: 'Voici le raccourci clavier pour y accéder. Vous devez avoir accès à cela avant de continuer.'
      },
      {
         title: 'Littéraux',
         element: document.querySelector('#litteraux'),
         intro: 'Nous allons commencer par taper différents littéraux dans la console, puis appuyer sur entrée.'
      },
      {
         title: '1000',
         element: document.querySelector('div.highlight-javascript:nth-child(3) > div:nth-child(1) > pre:nth-child(1) > span:nth-child(2)'),
         intro: 'Commençons par taper un nombre, <b>1000</b> dans le navigateur, puis « entrée ».'
      },
      {
         title: 'true',
         element: document.querySelector('span.kc:nth-child(4)'),
         intro: 'Maintenant tapons le booléen (une valeur qui est soit vraie soit fausse) <b>true</b> dans la console puis entrée'
      },
      {
         title: 'false',
         element: document.querySelector('span.kc:nth-child(6)'),
         intro: 'Tapez maintenant le booléen <b>false</b> dans la console puis entrée'
      },
      {
         title: "'1000'",
         element: document.querySelector('span.s1:nth-child(8)'),
         intro: "Maintenant, tapons <b>'1000'</b> (n'oubliez pas les apostrophes) : il s'agit non pas d'un nombre mais d'une chaîne de caractères"
      },
      {
         title: "'mille'",
         element: document.querySelector('span.s1:nth-child(10)'),
         intro: 'idem pour <b>\'mille\'</b>'
      },
      {
         title: '"mille"',
         element: document.querySelector('.s2'),
         intro: 'Ainsi que "mille".'
      },
      {
         title: "'true'",
         element: document.querySelector('span.s1:nth-child(14)'),
         intro: "Ou encore \'true\' : il s'agit aussi d'une chaîne de caractères"
      },
      {
         title: 'identificateurs',
         element: document.querySelector('#identificateurs'),
         intro: 'Faites de même pour ces identificateurs, et pensez à regarder le commentaire à leur droite'
      },
      {
         title: 'Mots-clés réservés',
         element: document.querySelector('#mots-cles-reserves'),
         intro: 'Faites de même pour ces mots-clés réservés, et pensez à regarder le commentaire à leur droite'
      },
      {
         title: 'Opérateurs',
         element: document.querySelector('#operateurs'),
         intro: 'Faites de même pour ces opérateurs, et pensez à regarder le commentaire à leur droite'
      },
      {
         title: 'Séparateurs',
         element: document.querySelector('#separateurs'),
         intro: 'Faites de même pour ces commandes, et pensez à regarder le commentaire à leur droite'
      }]
   }).start();

   </script>