Ignorer la navigation

Initiation au javaScript

Qu'est-ce que JavaScript ?

Logo JavaScriptLe JavaScript (JS) est un langage de programmation.

Voici quelques exemples de ce qui est réalisable grâce au JavaScript :

  • Un système de chat, comme celui de Facebook ;

  • Une suggestion lors de la frappe dans un champ de texte, comme lors d'une recherche avec Google ;

  • Un lecteur de vidéos ou de musiques, aussi puissant que celui de Youtube, grâce aux balises <video> et <audio> ;

  • Des jeux exploitants la balise <canvas>,comme Torus, un Tetris en 3D ;

  • La modélisation 3D d'une Lamborghini

  • Et bien d'autres choses !

source: http://openclassrooms.com/courses/dynamisez-vos-sites-web-avec-javascript

Objectif des prochains paragraphes

L'Objectif des prochains paragraphes est d'introduire des notions sur le JavaScript et présenter l'interaction entre le fichier HTML et le fichier JavaScript, à partir d'un exemple de réalisation d'un dessin sur une page WEB.

Ces notions seront largement suffisantes pour utiliser la bibliothèque RGraph.

Les deux programmes ci -après permettent de dessiner dans une zone d'une page WEB appelé <canvas> (rectangle gris) un rectangle rouge, un cercle bleu et d'afficher le fameux "Hello World"

fichier Javascript: rect_cercle.js

fichier HTML5: Rectangle_Cercle.html

Télécharger ces deux fichiers (clic droit de la souris -> Enregistrer la cible du lien sous  ....) , enregistrer-les dans le même dossier et exécuter le fichier HTML, vous devriez obtenir ceci:

page_web

fichier HTML "rectangle_cercle.html"

    Comme pour le CSS, Il est préférable de créer un fichier JavaScript qui sera référencé dans le fichier HTML.

rect_cercle

Dans le fichier HTML  "rectangle_cercle.html"  ci-dessus:

ligne 6:

  • On indique le nom du fichier JavaScript utilisé: rect_cercle.js. ce fichier doit se situer dans le même dossier que le fichier html.

ligne 12:

  • id = "mon_canevas" identifie le <canvas> dans lequel se fera le tracé
  • Ce <canvas> aura une hauteur de 250 pixels et une largeur de 350 pixels (width="350" height="250")
  • Le <canvas> est ici entouré d'un trait gris de 1 pixel (ligne 12: style="border 1 px solid gray" ); ce qui permettra de bien le repérer sur la page Web.

ligne 13:

  • Si le navigateur ne peut pas afficher la figure, la mention "[No canvas support]" apparaîtra.

ligne 14:

  • </canvas> est la balise de fermeture.

 

Le fichier JavaScript "rect_cerc.js"

Le programme JavaScript "rect_cerc.js" ci-dessous permet de dessiner le cercle bleu, le rectangle rouge et d'écrire "Hello World" sur la page WEB, dans le <canvas>.

rect-cercle.js

les lignes rouges correspondent à des commentaires.

à la ligne 1:

  • cette ligne indique que le code JavaScript se lancera dès que la page HTML aura été chargée.

de la ligne 3 à 7:

  • on définit les deux variables nécessaires au tracé des éléments.

de la ligne 10 à 24:

  • on trace le rectangle
  • on dessine le cercle
  • on écrit "Hello World".

les tracés  du rectangle et du cercle doivent commencer par context.beginPath()  (lignes 11 et 17)

Code JavaScript directement incorporé dans le HTML

Même s'il est conseillé de séparer le code JavaScript et le HTML, on peut incorporer du code JavaScript directement dans le fichier HTML à l'aide des balises <script> et </script>. En voici un exemple:

rectangle

  • le script Javascript (code encadré par les balises <script> et </script>) permet de tracer un rectangle (lignes 17 à 25). Le résultat est présenté ci-dessous.
  • Ce script doit être placé juste en bas du fichier, avant la balise </body>, pour que le code javascript s'exécute à la fin du chargement de la page WEB

rectangle1

Vous pouvez maintenant réaliser les activités "le langage JavaScript"

Régi par la licence Creative Commons: Licence d'attribution en partage identique et non commercial 4.0