Introduction au JavaScript

Qu’est-ce que le JavaScript : Historique et explication

Crée au milieu de l’année 1995 sous le nom de LiveScript, il s’agissait à la base d’un langage permettant de créer des scripts (des suites d’instructions) pour le navigateur web Netscape (que vous n’avez sûrement jamais connu puisque ça fait des années qu’il n’est plus maintenu !).

A la fin de la même année, il est racheté par Sun Microsystems (qui est à l’origine du Java, d’OpenOffice.org, etc.) et il est renommé en JavaScript (clin d’œil au langage Java, avec lequel il n’a d’ailleurs aucun point commun !).

Ce qu’il faut donc savoir du JavaScript c’est que c’est un langage de programmation de scripts orienté objet et interprété côté client.

Un peu rude comme définition non ? Détaillons là pour plus de clarté.

Un langage de programmation de scripts :

Un langage de programmation est avant tout une langue (au même titre que le sont l’anglais ou le français, avec ses propres règles de grammaire et de syntaxe)  avec lequel le  « codeur » va écrire un ensemble d’instructions qui permettront d’ouvrir un menu, de changer d’onglet, d'afficher de texte, etc.

Un langage orienté objet :

Il s’agit, pour le langage, de la manière dont il voit une page web. Tout ce qui se trouve sur cette page web (du texte, une date, une image) devient un objet que le langage peut faire interagir entre eux grâce à ses instructions.

Un langage interprété côté client :

Un langage interprété est un langage qui n’a besoin d’être modifié pour être compris par la machine. Il vous suffit d’écrire votre code et votre navigateur web va interpréter les actions dictées par de ce code.
Mais il faut faire attention, le JavaScript est interprété par le navigateur web de l’utilisateur qui va voir votre page web. Cet utilisateur peut donc le désactiver voire le modifier. Il faut donc veiller à ne pas faire reposer l’intégralité de votre travail sur le JavaScript (dans le cas d’une barre de navigation en JavaScript, si on le désactive, plus rien ne fonctionne. Il faut donc envisager une alternative !)


La question suivante que l'on peut se poser est : où écrire du Javascript ? Et bien dans le cas d'une page web classique, il vous suffit de le placer entre balises

Code:


<script>
// Tout votre code
</script>


Cependant, forumactif vous permet également d'héberger du code Javascript.
Pour créer un nouveau code, allez dans

Code:


Panneau d'administration >> Modules >> Html & JavaScript >> Gestion des codes JavaScript >> Créer un nouveau javascript"

A partir de là vous pouvez écrire votre code et sélectionner les zones du forum sur lesquelles il sera appliqué.


Maintenant que l'on sait où placer le code, regardons quoi écrire !

Que faire avec du JavaScript sur forumactif ?

Le JavaScript vous permet, très basiquement, de modifier les propriétés Html d'une page et de les exploiter.
Dans le cas d'un forum forumactif, vous allez pouvoir réaliser, par exemple :

• Un système d'onglets pour votre page d'accueil ou votre QuiEstEnLigne
  
• Afficher des bulles d'informations pour présenter votre staff
  
• Afficher des pop-ups (comme les spams !)
  
• Gérer des évènements (action au passage de la souris, lorsque l'on clique à tel endroit, etc.)
  
• De la neige qui tombe et toutes ces petites animations
  
• Des calendriers dans lesquels vous pouvez inclure des évènements
  
• Récupérer des informations sur vos visiteurs (navigateur web, système d'exploitation, pays, etc.)
  
• Etc. Etc.
  

Réalisons une pop-up qui va afficher la résolution de votre écran.

Code:

<script>
 var Hauteur = screen.height;
 var Largeur = screen.width;

 var Ecran = "Taille de l'écran : " + Largeur + "x" + Hauteur + " pixels";
 alert(Ecran);
 </script>


• On crée deux variables à l'aide du mot-clé var (une variable est un élément dont la valeur peut changer) pour stocker la hauteur et la largeur de l'écran
  
• On crée une troisième variable "Ecran" qui va être une phrase contenant la hauteur et la largeur récupérées juste avant (les + permettent de coller les morceaux de la phrase entre eux)
  
• On crée une pop-up avec le mot-clé alert et on lui précise la phrase à afficher ("Ecran").
  
• Et c'est fini !
  

Résultat:



Lorsque l'on parle de ce qu'il est possible de faire en JavaScript, peut-être avez-vous déjà eu vent d'animations (apparitions d'objets, zoom, transition), de slides d'images, etc.
Et bien ce sont en effet des choses réalisées en JavaScript mais d'une manière un peu détournée, à l'aide de librairies.

Toujours plus loin avec JavaScript : Les bibliothèques

Si les mots jQuery, Mootools, Dojo ou Node.Js ne vous sont pas étrangers, c'est que vous avez déjà mis un pied dans le monde des bibliothèques JavaScript.

Malgré les nombreuses possibilités offertes par le JavaScript, des actions restent laborieuses voire impossible à faire. C'est pour cela que les bibliothèques ont été écrites. Il s'agit en fait d'un ensemble de nouveaux mots-clés qui viennent se rajouter à ceux du JavaScript afin d'en étendre les capacités.

Par contre chaque bibliothèque a son utilité et bien la choisir est essentiel.

• jQuery permet de faire des actions animées et est celle qui correspond à 90% de vos besoins.
  
• Mootools permet également de réaliser du cliqué-glissé.
  
• Dojo permet d'inclure facilement tout un ensemble de widgets (des cartes, des diagrammes, des calendriers, etc.)
  
• Node.js permet de réaliser des applications complexes à base de javascript (des chatbox, des systèmes de commentaires, etc.)
  

Prenons pour exemple la plus connu des bibliothèques, jQuery. C'est grâce à elle qu'il est possible, sur un forum Forumactif, de réaliser des onglets animés, des générateurs de personnage, des carrousels d'images, etc.

Cependant, il faut savoir que jQuery n'est pas inclus par défaut dans une page web, et pour pouvoir l'utiliser vous devrez ajouter la ligne suivante

Code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Il est à noter que vous pouvez également écrire du code jQuery de la même manière que l'on écrit du JavaScript sur ForumActif sans avoir à ajouter la ligne de code précédente !


Je vous propose de réaliser une petite animation en jQuery afin de terminer cette introduction au JavaScript !

Code:

<script>
$(document).ready(function()
{
  $("#monBouton").click(function()
{
    $("#premierCarre").fadeIn();
    $("#deuxiemeCarre").fadeIn();
  });
});
</script>

• Les premières lignes préparent la page à exécuter les fonctions
  
• la troisième ligne trouve d'elle-même l'élément "monBouton" dans votre code et permet d'écrire des instructions à exécuter lorsque l'on clique dessus (mot-clé click)
  
• Dans les instructions à effectuer on trouve l'élément qui s'appelle "premierCarre" et on le fait apparaitre avec un effet de fondu grâce au mot clé fadeIn
  
• On la fait même chose à la ligne suivante mais en cherchant cette fois l'élément "deuxiemeCarre"
  
• Et c'est tout !
  

Ajoutons un petit peu de Html pour tout faire fonctionner :

Code:

<button id="monBouton">APPUYER</button>

<br><br>
<div id="premierCarre" style="width:80px;height:80px;display:none;background-color:purple;"></div><br>
<div id="deuxiemeCarre" style="width:80px;height:80px;display:none;background-color:orange;"></div><br>

• On crée un bouton qui s'appelle monBouton, pour que l'on puisse exécuter toutes nos instructions lorsque l'on cliquera dessus
  
• On crée une div que l'on appelle "premierCarre" que l'on fera apparaitre avec l'effet de fondu
  
• Et une deuxième div que l'on appelle "deuxiemeCarre" pour les même raisons
  

Résultat :

Commençons l'apprentissage !

Si vous souhaitez vous plonger dans l'univers du JavaScript, voici une liste de liens qui pourront vous intéresser :

Sur Never-Utopia :

• Créer sa barre de navigation
  
• Page d'accueil en accordeon
  
• Des sous-forums en retour à la ligne
  

En français :

• Introduction au JavaScript (developpez.com)
  
• Dynamisez vos sites web avec JavaScript (siteduzero.com)
  

En anglais :

• JavaScript Tutorial (w3schools.com)
  
• Learn to code JavaScript (codecademy.com)
  

thank's

merci du partage :)