open

Débuter la programmation par Javascript

#1 A qui s'adressent ces tutoriels ? open

Ces tutoriels s'adressent à des internautes qui ne connaissent pas la programmation et qui veulent apprendre à programmer en Javascript. Ils vont donc débuter par Javascript.

Cette playlist de tutoriels va vous proposer un niveau de détail que vous devriez apprécier si vous n'avez jamais programmé.

Si vous n'avez jamais programmé vous n'avez pas d'éditeur habituel donc je vous propose d'utiliser Sublime Text. Dans ces tutoriels je détaille tout ce que vous devez faire avec Sublime Text pour faire le tutoriel.

A travers un exemple on va mettre en place quelques instructions de base utilisées en programmation. On va regarder à quoi elles servent et comment on les utilise. On va le faire pour :

  1. Une variable.
  2. Un test conditionnel.
  3. Une fonction.
  4. Un tableau.
  5. Une boucle.

Je laisse volontairement de côté les objets qui sont pourtant LA brique importante du Javascript pour ne pas compliquer cette initiation.

En prérequis il vous faut :

  1. Savoir à quoi sert Javascript et pour ça je vous mets un lien vers un tutoriel qui répond à cette question (durée 7mn 40s).
  2. Avoir installé Sublime Text et avoir quelques notions pour l'utiliser. Je vous mets un lien vers une playlist. Les deux premiers tutoriels suffisent pour apprendre à installer une version minimale et à avoir les bases suffisantes pour faire ce qui suit (durée environ 20mn pour les deux).

#2 Mise en place d'un espace de travail open

Le Javascript auquel on va s'intéresser c'est celui qui tourne dans un navigateur. On va déjà voir que l'on peut exécuter du Javascript dans un navigateur par l'intermédiaire d'une console.

Pour accéder à cette console vous prenez les outils pour webmaster. Si vous utilisez Chrome vous y accédez avec le menu Plus d'outils puis Outils de développement ou (CTRL+SHIFT+I) puis vous cliquez sur les doubles chevrons et vous choisissez console.

Accéder à la console javascript de Chrome

Vous tapez les deux instructions ci-dessous dans la console de manière à ce qu'elles soient lues par Javascript. On dit qu'elles sont interprétées par Javascript.

Pour des contraintes de saisie d'écran je vais choisir la console car je peux zoomer et je vais même la détacher. Vous n'êtes pas obligé de faire comme moi. Vous pouvez laisser la console attachée.

Détacher la console javascript de Chrome

On va placer notre code Javascript dans une structure minimale HTML (Pas besoin de connaître le HTML). Pour cela :

  1. Vous lancez Sublime Text et vous tapez CTRL+N pour créer un nouveau fichier puis CTRL+S pour enregistrer le fichier. Vous l'appelez debuter.html
  2. Allez sur le bureau et faites un glisser/déposer du fichier dans Chrome (pas la console) de manière à ce que le fichier soit partagé par Sublime et Chrome.
  3. Retour à Sublime dans lequel vous tapez !+tab pour avoir une structure HTML minimale.
  4. Vous tapez script+tab pour avoir des balises script.
  5. Dans tous ces tutoriels de la playlist "Débuter" on va placer notre code entre les balises script. Tapez console.log('Bonjour'); puis CTRL+S pour sauvegarder. Allez dans la console et appuyez sur F5.

On est prêt !