# Programmation JavaScript/Programmer en deux minutes/Tout un site web dans un seul document

* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
* Introduction
    Programmer en deux minutes
*   * Page wiki
*   * Compteur en temps réel
*   * Site dans un document
* Outils de développement
* Syntaxe
** Ligne d'instruction
** Ordre d'évaluation
** Bloc d'instructions
** Identificateurs
** Expression littérale
** Commentaire
** Mots réservés
** Variables
** Opérateurs
** Structures de contrôle
** Exceptions et erreurs
** Fonctions utilisateur
** Évènement
* Objets prédéfinis
** window
** document
** navigator
** Array
** Boolean
** Date
** Error
** Function
** Math
** Number
** Object
** String
** Element
** RegExp
* Fonctions prédéfinies
* Programmation avancée
** Opérateurs de bits
** Fermeture
** Programmation objet
** Notation JSON
** AJAX
** Stockage
** Générateurs
** Interface DOM
** Objets Microsoft
* Frameworks
** Dojo
    Hello World
    Widgets
    Ressources
** jQuery
** Node.js
** React.js
* Tests
** Ava
** Jest
** Cypress
* Débogage
* Erreurs connues
* Références
[ Modifier le sommaire ]
Pour créer Tout un site web dans un seul document, écrivez un document HTML contenant des divisions non-affichées (style="display:none") et une fonction Javascript pour les afficher lorsqu'on navigue dans le document, en cliquant sur les ancres <a onclick="afficher">, ce qui exécute le Javascript suivant :
Félicitation, les divisions de classe page sont affichées et cachées lors des clics sur les ancres.
Remarquez que ce document pose un problème d'accessibilité : les éléments cachés ne s'afficheront pas si le navigateur n'exécute pas le javascript.

## Sans utiliser de JavaScript !

L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.

### CSS

* Créez ce document *.html et ouvrez-le dans un navigateur :

## Avec jQuery, une librairie d'instructions javascript

Nous allons créer un site défilant dans une division d'id galerie.
La division #galerie contient trois divisions :
* deux boutons (div#next et div#previous) à droite et à gauche,
* une très large division (div#slide {width:10000px;}) contenant les pages à faire défiler horizontalement.

### Javascript

    La librairie jQuery est déclarée en tête du document (<script src=http://). Ensuite viennent nos instructions utilisant l'objet jQuery $.
    L'objet $(document) est le document, l'objet $("#ex") est l'élément du document d'id="ex". Il existe des méthodes associées à ces objets :
   * $("#divisionId").width <- retourne la largeur de la division, en pixels.
   * $("#divisionId").hide <- attribut style="display:none" à la division.
   * $(document).ready <- s'éxecute lorsque le document est prêt.
Ces instructions exécutent la méthode ready de l'objet $(document). ($(document).ready(function);)
    Lorsque le document est prêt c'est-à-dire que tout est chargé, la fonction est exécutée. Cette fonction crée l'objet slider.
    slider modifie les styles des divisions #slide, #next et #previous en utilisant les méthodes jQuery animate, show et hide.
* Créez ce document *.html et ouvrez-le dans un navigateur :

## Un menu déroulant en CSS

Le CSS permet également d'interagir avec la souris, via notamment la pseudo-classe hover.
L'apparence déclarée à la pseudo-classe hover est active lorsque la souris est sur l'élément.

### CSS declarations

ul.niveau2 est affiché (display:block;) lorsque la souris est dessus li.sousmenu (li.sousmenu:hover) contenue dans div#menu ul.niveau1.