Premiers pas en JavaScript

1.3 Outils indispensables
cuy copyleft
  See You Why?  

 


Historique (1.1) | | Préalable (1.3)

Contenu


JavaScript 1 - Introduction
1.1 JS : définition
1.2 JS : historique
1.3 JS : outils indispensables
1.4 JS : connaissances préalables
1.5 JS : à tester
1.6 JS : comparaison JS / PHP
1.8 JS : exercices
1.9 JS : un test JS : introduction
JavaScript 2 - Commentaires et instructions
JavaScript 3 - Variables
JavaScript 4 - Types de variables
JavaScript 5 - Variables et chaines
JavaScript 6 - Les fonctions
JavaScript 7 - Les fonctions à paramètre unique
JavaScript 8 - Les fonctions à paramètres multiples
JavaScript 9 - L'instruction RETURN dans une fonction
JavaScript 10 - Appel d'une fonction dans une autre fonction
JavaScript 11 - Les variables locales ou globales
JavaScript 12 - Quelques opérateurs mathématiques
JavaScript 13 - ???
JavaScript 14 - L'instruction IF, pour les conditions
JavaScript 15 - L'instruction IF... ELSE..., pour les conditions à deux sorties
JavaScript 16 - Les IF imbriqués et fonction aléatoire
JavaScript 17 - Les conditions complexes
JavaScript 18 - L'instruction SWITCH, en cas de choix multiples
JavaScript 19 - La boucle FOR
JavaScript 20 - La boucle WHILE
JavaScript 21 - Les événements dans la programmation
JavaScript 22 - Quelques événements : onMouseOver onLoad etc.
JavaScript 23 - Les objets
JavaScript 24 - Créer ses propres objets
JavaScript 25 - Appliquer des méthodes à ses objets
JavaScript 26 - Les tableaux
JavaScript 27 - Différentes façons de créer des tableaux
JavaScript 28 - Propriétés et méthodes applicables aux tableaux
JavaScript 29 - Les méthodes applicables aux tableaux
JavaScript 30 - Méthodes de tris pour tableaux SORT, REVERSE et PUSH
JavaScript 31 - Ajouter des éléments à un tableau en utilisant une boucle
JavaScript 32 - Tecnique pour imprimer les éléments d'un tableau
JavaScript 33 - Lecture de bases de données
JavaScript 34 - Les objets mathématiques
JavaScript 35 - Les objets relatifs aux dates
JavaScript 36 - Les formulaires JS sont des objets
JavaScript 37 - Accès aux éléments d'un formulaire
JavaScript 38 - Validation des entrées d un formulaire
JavaScript 39 - Graphisme et JavaScript

JavaScript 50 - Calculateur d'emprunt
JavaScript 51 - Calendrier perpétuel et options diverses
JavaScript 99 - Documentation


 
 

 
Avec un peu de JavaScript,
n'oubliez pas de rendre vos pages
plus dynamiques et plus interactives.
 

 
 

 
Notre volonté est de rendre cette formation de JavaScript,
disponible le plus rapidement possible.
Le lecteur excusera l'imperfection de ce travail en cours de construction
et pourrait nous informer des défauts rencontrés.

  MERCI
 

 

 

I. Définition

voir <<< séquence précédente

 

II. Rappel historique

voir <<< séquence précédente

 

III. Outils indispensables

Avant de vous rappeler les connaissances préalables souhaitées pour pouvoir suivre à l'aise ces premiers pas en JavaScript, il nous paraît opportun de vous indiquer les outils dont vous ne pourriez vous passer.

Évidemment, il vous faudra un ordinateur... peu importe que son système d'exploitation (O.S.) soit Windows (95, 98, XP, Vista ou Seven), Linux (il existe de nombreuses distributions gratuites : Slackware, Ubuntu, Red Hat, Suse, Debian, Mandriva ou...) ou Mac OS (Apple)...

Deux autres outils seulement vous seront indispensables : un éditeur de texte et un navigateur... pas de panique, tout ordinateur possède ces deux logiciels.

 

A. un éditeur de texte

Il ne faut pas confondre "éditeur de texte" et "traitement de texte". Un éditeur de texte :

Si vous avez un ordinateur sous Windows, vous disposez probablement du "Bloc-notes" (parfois aussi appelé Notepad). Ce logiciel est suffisant, mais nous conseillons vivement le logiciel libre Notepad++ (site officiel) qui propose des fonctionnalités supplémentaires (coloration des symboles, chargement de fichiers de toute taille, recherche et remplacement de texte, choix des polices d'affichage, etc.)

Notepad++ est plus qu'un simple éditeur de texte. Il s'agit d'un outil destiné avant tout aux développeurs, débutants comme confirmés.

Offrant la coloration syntaxique de plus de vingt langages de programmation différents (ce qui permet de découvrir immédiatement les fautes de syntaxe), de l'Ada au XML en passant par les populaires PHP, C++ ou Python, sans oublier évidemment le JavaScript, il inclut également de nombreux plugins dont l'autocomplétion ou la conversion en binaire ou hexadécimal.

Sous licence libre GPL, il est recommandé pour la création et l'édition de codes relativement petits, et sera un outil indispensable pour tous les développeurs. Il permet également l'édition de plusieurs documents simultanément via un ingénieux système d'onglets et détecte automatiquement les modifications effectuées sur les fichiers.

Un coup d'œil au même fichier, affiché l'un par le Bloc-Notes et l'autre par Notepad++ vous convaincra, j'espère.


Simplicité extrême du menu ;
monotonie ;
erreur impossible à trouver ;


Richesse du menu ;
un clic sur une balise met la balise fermante en évidence dans la même couleur ;
reconnaissance des scripts JavaScript ;
mise en évidence des paramètres de certaines balises ;
mise en italiques de certains mots clefs ;

 

 

B. un navigateur

Actuellement encore, l'Internet Explorer est le navigateur le plus utilisé dans le monde (probablement parce qu'installé d'office par Microsoft Windows). Rappelons cependant que le navigateur Internet Explorer ( site officiel) est en nette perte de part de marché... en décembre 2013, on annonçait 57,91 %[1] contre 95 % au début des années 2000. À la même date fin 2013, on observait que Mozilla Firefox ( site officiel) comptait 18,35 % (ce navigateur a plafonné entre 28 et 30 %), Google Chrome ( site officiel) (mon préféré) 16,22 % (2,8 % en juin 2009 et 20,7 % du marché mondial en juin 2011), Safari ( site officiel) (spécialement développé par et pour Apple, mais qui a une version Windows) 5,82% (pour 5,02 % en 2011) et Opera ( site officiel) qui fonctionne sous Linux, Windows et Mac et qui exécute les scripts JavaScript beaucoup plus rapidement, seulement 1,33% (pour 1,89 % en 2011).

Nous ne manquerons pas de faire connaître d'autres navigateurs moins connus, mais qui valent le détour. Ainsi, Maxton ( site officiel) et Avant Browser ( site officiel) qui ne fonctionnent que sous Windows et basés sur le système Trident qu'emploie Internet Explorer ; pour Mac, nous avons pensé à Camino ( site officiel), basé sur le système Gecko qu'utilisent aussi FireFox et Netscape, ainsi qu'à OmniWeb ( site officiel), parfaitement adapté aux espaces de travail (workspaces) de Mac ; nous pensons également aux inconditionnels de Linux pour qui nous proposons Epiphany ( site officiel) ; enfin un navigateur multiplateforme, qui fonctionne aussi bien sous Windows, Linux ou Mac OS X, le Chromium ( site officiel), base du Google Chrome.

N'oublions pas que plusieurs navigateurs différents peuvent être installés sur un même ordinateur...

 

C. une séquence normale de travail

Si en HTML, on peut voir le résultat attendu en faisant usage d'un éditeur WYSIWYG (What You See Is What You Get), en éditant des pages qui contiennent du JavaScript, on travaillera en suivant la séquence suivante :

      1. entrer ou éditer son document HTML et les scripts avec votre éditeur de texte ;
      2. sauvegarder votre document (touches Ctrl+S sous Windows) sur votre disque dur (sans oublier son nom ni son emplacement) ;
      3. basculer vers votre navigateur (touches Alt+Tab sous Windows) ;
      4. selon les cas :
        1. s'il s'agit d'un nouveau document (pas encore ouvert), charger votre document dans votre navigateur (menu Fichier>>Ouvrir),
        2. si votre document est déjà chargé ou ouvert dans votre navigateur, rafraîchir (ou touche F5 sous Windows) et voir le résultat (attention, selon votre configuration, votre navigateur pourrait garder en mémoire cache une ancienne version de votre fichier... prudence donc).

Un retour vers l'étape 1 sera nécessaire pour poursuivre votre travail ou pour apporter des corrections, le cas échéant : Alt+Tab vous fera basculer vers votre éditeur...
N'oubliez donc pas la séquence habituelle de travail : "Éditer-Sauvegarder-Basculer-Rafraîchir(Charger)". Vous l'avez probablement déjà découvert, notre Éditeur-Testeur qui apparaîtra souvent dans ce tutoriel peut vous libérer de cette quadruple séquence de travail...

 

IV. Connaissances préalables

voir suite >>>

 

 

V. À tester

voir suite >>>

 

 

VI. Comparatif PHP/JavaScript

voir suite >>>

 

 

VIII. Exercices intro

voir suite >>>

 

 

IX. Test

voir suite >>>

 

[1] cf. Comparatif : 6 navigateurs web alternatifs à l'essai ! ici et IE8 reste le navigateur le plus utilisé (article paru en janvier 2014)


Historique (1.1) | | Préalable (1.3)