Initiation au langage de programmation JavaScript

1. JAVASCRIPT
Club Netlinks Insat

2. PLAN
 Introduction
 Applications
 Objet Window
 Syntaxe et Inclusion dans HTML
 Notions de Base: Variables
Opérateurs
Boucles
Fonctions
Objets
Tableaux
 DOM
 Manipuler Code HTML
 Gestion d’évènements
 Pour aller plus loin

3. INTRODUCTION
 JavaScript, Créé en 1995 par Netscape et Sun
Microsystems, sous le nom de LiveScript.
 Le JavaScript est un langage de programmation
orienté objet interprété.
 Il permet d’écrire des scripts.
 Il est exécuté côté client(par le navigateur qui
inclut l’interpréteur).
 Internet Explorer: Chakra / JScript,
 Mozilla Firefox : SpiderMonkey
 Google Chrome:V8.

4.  Le JavaScript est majoritairement utilisé sur
Internet, conjointement avec les pages Web HTML
 Il s'insère dans le code HTML d'une page web
  On dit alors que le JavaScript est une extension
du HTML. Il permet de rendre celles-ci interactives

5. APPLICATIONS
 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;
 Des jeux
(https://www.benjoffe.com/code/games/torus )
 La modélisation 3D (
https://threejs.org/examples/webgl_materials_cars.
html )
 …..

6. BOITE DE DIALOGUE ET OBJET WINDOW
L’objet Window
 Cet objet prédéfini représente la fenêtre courante du
navigateur.
 Liste (non exhaustive) des méthodes :
alert ()
confirm ()
prompt ()
open ()
close ()
…..

7. EXEMPLE PRATIQUE
 window.html

8. SYNTAXE ET INCLUSION DANS HTML
 Les codes JavaScript sont insérés au moyen de la
balise <script></script>
 Syntaxe du code JavaScript est simple:
liste d’instructions séparés par des ;
 Commentaire multilignes : /* */
 Commentaire monoligne: //
 Il est conseillé d'écrire le code JavaScript dans un
fichier externe d’extension .js. Il est ensuite appelé
depuis la page web à l’aide de la balise: <script
src=‘script.js’></script>

9. VARIABLES
 Une variable est un moyen pour stocker une valeur.
 Le JavaScript étant un langage sensible à la casse .
 Le JavaScript est un langage typé dynamiquement.
 Pour déclarer une varibale:
var myVariable;
 Pour l’affectation:
var myVariable = valeur;
 Le nom d'une variable ne peut contenir que des
caractères alphanumériques( a-z, A – Z, 0 – 9, _ , $), ne
commence pas par un chiffre et doit différer des mots-
clés utilisés par le JavaScript.

10. VARIABLES
• il représente tout
nombre, que ce
soit un entier, un
nombre négatif,
scientifique, …
• var number = 5.5;
• var number = 3e+5;
• var number = 0x35;
Le type
numérique
• représente
n'importe quel
texte
• var text="Mon texte";
• var text= 'Mon texte';
Les chaînes
de caractères
• un booléen est
un type à deux
états qui sont
les suivants
: vrai ou faux
• var Test=true;
• var Test=false;
Les
booléens
 Il existe 3 types principalement.

11. VARIABLES
 typeof variable: instruction qui permet de tester
l’existence et le type de la variable. Si
erreur(variable non déclarée ou non initialisée,
renvoie undifined)
 Nombre=parseInt(text) : méthode qui permet
convertir une chaine en un entier. Si erreur, renvoie
NaN(Not a Number).
 Text= Nombre+’’ : Pour Convertir un nombre en une
chaine de caractères.

12. OPÉRATEURS
 Opérateurs et instructions identiques aux plusieurs
langages de programmation:
 opérateurs arithmétiques : + − ∗ / %
 in/décrémentation : var++ /var−− /++var /−−var
 opérateurs logiques : && | |
 comparaisons : == != <= < >= >
 concaténation de chaîne de caractères : +
 affectation : = += −= ∗= ...

13. BOUCLES

14. EXEMPLE PRATIQUE
 Var.html

15. LES FONCTIONS
 Il existe des fonctions natives, mais il est aussi
possible d'en créer, avec le mot-clé function.
 Déclaration:
function myFunction(arguments) {
// Le code que la fonction va devoir exécuter
}
Même limitations que nomvariable.
 Appel:
myFunction(arguments)

16. LES FONCTIONS
 Les variables déclarées au sein d'une fonction ne
sont accessibles que dans cette fonction.=>
Variable Locale .
 Une fonction peut recevoir un nombre défini ou
indéfini de paramètres. (Exemple: On la définit avec
un argument, et on l’appelle sans).
 Elle peut aussi retourner une valeur ou ne rien
retourner du tout. (mot –clé return).

17. LES OBJETS
 Le JavaScript met à notre disposition des objets
natifs, directement utilisables.
 Number, Boolean, et String sont des objets natifs
=>Les variables contiennent toutes des objets,
mais de natures différentes=> Typé
dynamiquement.
 Le JavaScript nous permet de créer nos propres
objets.
 Un objet a un constructeur, des propriétés et des
méthodes.

18. LES OBJETS
 Exemple:
 Objet String()
 Lorsqu’on définit une constante ou une variable chaîne de
caractères, Javascript crée d’une façon transparente une
instance String
 1 propriété : length
 Liste (non exhaustive) des méthodes :
bold( )
italics( )
fontcolor ( )
fontsize( )
toUpperCase ( )
toLowerCase ( )
substring( )
charAt()
indexOf()
...

19. LES TABLEAUX
 Déclaration:
 Accession avec [ ] (ex : tableau [ i ])
 les indices varient de 0 à N-1
 les éléments peuvent être de type différent
 la taille peut changer dynamiquement
 les tableaux à plusieurs dimensions sont possibles
 Parcours:
for (var i = 0; i < myArray.length; i++)
{ //code }

20. LES TABLEAUX
 Propriétés et méthodes :
length, reverse(), sort(), push(element), pop(),shift()
(supprimer le 1ér élément), etc..
 tableau.join(‘ ’): convertir tableau en un chaine de
caractère
 Inversement:
tableau=chaine.split(‘ ‘):convertir une chaine en un
tableau

21. DOM
 Le Document Object Model (abrégé DOM) est
une interface de programmation API pour les
documents XML et HTML.
 Le DOM est un moyen de représenter un document
sous forme d'une arborescence.

22. DOM
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<h1>Titre</h1>
<p>Un peu de texte</p>
</body>
</html>

23. DOM
 L'objet document est un sous-objet de window. Il
représente la page Web et plus précisément la
balise <html>.
 Il possède une méthode principale:
var myvar=document.getElementById(id).
 L’objet Element nous fournit deux méthodes,:
getAttribute(‘cle’)
setAttribute(‘cle’,’valeur’).

24. EXEMPLE_PRATIQUE
 Dom.html

25. MANIPULER CODE HTML
 Avec JavaScript on peut naviguer dans la structure
de la page HTML et la modifier(ajout, ,
remplacement, suppression,… des éléments).
 C’est vraiment aisé de manipuler le contenu d'une
page web.

26. EXEMPLE PRATIQUE
 Html.html

27. GESTION D’ÉVÈNEMENTS
 Les évènements permettent de déclencher une
fonction selon qu'une action s'est produite ou non.
 Action  Événement  Capture  Action

28. GESTION DES ÉVÉNEMENTS
Évenement: Action pour le déclencher
 onclick : un clic du bouton gauche de la souris sur une
cible
 onmouseover : passage du pointeur de la souris sur une
cible
 onblur : une perte de focus d’une cible
 onfocus : une activation d’une cible
 onselect : sélection d’une cible
 onchange : une modification du contenue d’une cible
 onsubmit : une soumission d’un formulaire
 onload : à la fin du chargement d’un élément
 onunload : la fermeture d’une fenêtre ou le chargement
d’une page autre que la courante

29. EXEMPLE _PRATIQUE
 Event.html

30. GESTION DES ÉVÉNEMENTS
 Aujourd’hui,on utilise l’objet Event. Le code permettant
l’ajout d’un événement devient;
var element = document.getElementById(‘id');
var myFunction = function() {
alert("Vous m'avez cliqué !");
};
element.addEventListener('click', myFunction);

31. POUR ALLER PLUS LOIN..
 Node.js: possible aujourd'hui de créer une
application en JavaScript grâce à Node.js

32. MERCI POUR VOTRE ATTENTION