DEVENIR-WEBMASTER.COM Log In
 3
close

A quoi sert le Javascript ?

Visiter ma chaine Youtube

# Pourquoi ajouter du JAVASCRIPT au HTML et au CSS ? close

Dans le tutoriel précédent nous avons réalisé un petit document en HTML et en CSS. Nous avons vu que ce document présentait une faiblesse car il ne proposait aucune interactivité avec l'internaute. On cliquait sur la page web et il ne se passait rien.

Dans ce tutoriel nous allons voir comment Javascript va apporter de l'interactivité. En fait lorsque l'internaute clique sur certains endroits de la page le Javascript est capable de récupérer ces clics puis de réagir à ces clicshttp://www.devenir-webmaster.com/V2/COMMUN/img/h1-arrow-open-32.png en exécutant une liste d'instructions choisies par le programmeur.

Le Javascript contrairement à HTML et à CSS est un vrai langage de programmation avec variables, tests de conditions, boucles et fonctions avec en plus deux choses essentielles qui nous intéressent qui sont :

L'interface avec le document.

Le canal de communication avec le serveur (AJAX).

Interactivité avec Javascript

On va décrire ici une séquence traditionnelle :

  1. L'internaute clique sur une zone du document.
  2. Le clic est transmis au Javascript.
  3. Javascript va chercher des données sur le serveur.
  4. Javascript se sert des données pour mettre à jour le document.

Le document est devenu interactif et dynamique.

# On va ajouter du Javascript au HTML et au CSS de la fiche de jeu close

Je vais ajouter du Javascript à la Fiche de 'Call of Duty Black Ops'. J'ajoute ce Javascript dans un fichier séparé. Je ne touche pas au code HTML de ma fiche ni au CSS. Je fais cette remarque pour souligner le fait que cette gestion de l'interactivité va se faire de manière totalement séparée.

Pour visualiser la fiche équipée de son Javascript cliquer ici.

Vous pouvez voir que :

  1. Si je clique sur le titre il change de couleur et devient rouge. Là j'ai placé un peu de code Javascript pour modifier le style du titre de la page.
  2. Si je clique sur l'image elle disparait. Là je fais disparaître du contenu du document.
  3. Si je clique sur le titre 'Pack de Cartes'. Là j'ajoute une ligne au tableau c'est à dire qu'avec Javascript j'ajoute du contenu au document.

Je n'ai pas programmé de communication avec le serveur car nous le ferons dans le tutoriel sur AJAX de cette playlist d'introduction.

Ci dessous le code Javascript que j'ai ajouté.

Code Javascript ajouté à la fiche de jeu

# Le principe du gestionnaire d'événement close

Le programmeur met en place un gestionnaire d'événement en faisant appel à addEventListener. Littéralement on se met à l'écoute d'un événement. Lorsque celui ci se produit Javascript déclenche la séquence de code mise en place par le programmeur.

# Peut-on communiquer avec d'autres serveurs ? close

Il existe un grand nombre d'interfaces de programmation (API) qui nous permettent de communiquer et de travailler avec d'autres serveurs en plus du notre.

Beaucoup d'Api disponible avec Javascript

Par exemple avec l'Api Google Maps vous pouvez communiquer une adresse postale à Google Maps et récupérer le couple latitude, longitude correspondant. Vous pouvez ensuite intégrer une carte avec le point positionné dans votre page web.

La liste des API est quasi infinie. L'idée ici c'est qu'on est plus tout seul mais entouré de serveurs auxquels on peut s'adresser de manière à obtenir des services qui permettront d'ajouter du contenu à nos pages web.

# Qu'est ce que l'on fait d'autre avec Javascript ? close

Côté serveur avec Node.js vous pouvez avantageusement remplacer votre code php par du code Javascript.

On peut aussi gérer des documents PDF.