Cours - Langage de Script (Javascript)

LANGUAGE DE SCRIPT : JAVASCRIPT
¡ Dr. SALIHOUN Mohammed

¡ Salihoun.med@gmail.com
RESSOURCES
¡ www.w3schools.com
¡ www.pierre-giraud.com
¡ www.fr.openclassrooms.org
1 - JAVASCRIPT EST UN LANGAGE
DE PROGRAMMATION DE
SCRIPTS PRINCIPALEMENT
EMPLOYÉ DANS LES PAGES WEB
INTERACTIVES
2 - JAVASCRIPT EST UN
LANGAGE ORIENTÉ
OBJET À PROTOTYPE.
FONCTIONNEMENT DU WEB
¡ Navigateur : Demande de page située à une URL
¡ Serveur : Stocke les fichiers et renvoie la page au navigateur pour affichage
Get : URL de la page
OK : Page
PRÉ REQUIS
HTML : HyperText Markup Language
¡ HTML est un Langage de balise permettant de définir la structure de la page et

d’organiser le contenu
¡ Il permet également d’inclure des images, créer des formulaires, des liens, des
paragraphes
HTML - HYPERTEXT MARKUP LANGUAGE
Structure générale d’un fichier HTML
¡ <html>…</html> : Déclare qu’il s’agit d’un document

HTML
¡ <title>…</title> : Donne un titre descriptive au

document.
¡ <body>…</body> : Contient l’ensemble du contenu

et des balises qui constituent le corps du document.
Eléments & Balises
¡ Eléments :
¡ images, fichier audio, vidéo, paragraphe, tableau, etc…
¡ Balises :
¡ <p>Contenu</p> : permet de définir un paragraphe
¡ <b>Contenu</b> : mettre en gras
Balises & Attributs
¡ Attributs : chaque balise possède des attributs
¡ Exemple :
¡ Image : <img src=“lien_fichier” />
¡ Lien : <a href=“url_lien” target=“”> contenu </a>:
LANGAGE DE PROGRAMMATION POUR LE WEB
¡ Côté Client : ¡ Côté Serveur :

¡ Exécution sur le navigateur ¡ Exécution sur le serveur.
¡ Toutes les données pour et les ¡ Le navigateur interroge le serveur
traitements sont déjà chargées sur qui effectue des traitements et
la page retourne les résultats au
navigateur
¡ Vérification de formulaires
Get : URL de la page
OK : Page
INCLUSION DU CODE : <SCRIPT>…</SCRIPT>
Dans l’élément head Dans l’élément body Dans l’élément

de la page html de la page html un fichier externe
<head> <body> <head>

<script> alert(‘hello world’); <script> alert(‘Bonjour’); <script src=‘’test.js’’> </script>
</script> </script> </head>
</head> </body>
VARIABLES & OPÉRATEURS
Toute instruction se termine par ;

§ Commentaires // ou /* */
§ Variables :
• Ils commencent par une var a=100, b=‘100’, c=true;
lettre var e=null;
• Sensibilité à la casse //faiblement typé
• Type : number, string, typeof() : retoune le type de la
booléen, null, NaN, variable
undefined
§ Opérateurs arithmétiques +,-,*,/, +=, -=,/=,*=
§ Opérateurs de concaténation +
§ Opérateurs de comparaison <,>,<=,>=, ==, ===
§ Opérateurs logiques &&, ||, !
VARIABLES & OPÉRATEURS
Conditions Boucles
if(condition){ initialisation
//code while(condition_répétition){
} //code
pas
}
if (condition) { do{
//code //code
}else pas
{ }while(condition_repetition);
//code
}
switch(condition){ for(initialisation; condition_rpet;pas){
case val1: ……; break; //code
} }
JAVASCRIPT - FONCTIONS
Fonctions
<script>
Portée des variables :
//Définition
function test(a, b) {
Toute variable déclarée dans
return a+b; une fonction n’est valable
} que dans cette fonction
var m=test(1,2);//Appel
</script>
JAVASCRIPT - CLASSES & OBJETS
Classe
¡ C’est une représentation abstraite d’un ensemble d’éléments ayant des attributs
(propriétés) et méthodes (fonctions) communs
¡ Une instance d’une classe est appelée

Etudiant objet. E1 : Etudiant
CNE ¡ Pour accéder à un attribut/méthode : A123456

Nom CHAKIB
¡ E1.CNE à A123456
Prenom Hamid
Etudier() ¡ E1. Nom à CHAKIB Etudier()
estenVacance() ¡ E1.Etudier() estenVacance()
Création d’objets : Méthode 1 via la classe Object.

En Javascript tout est évalué comme un objet, même si c’est une valeur que
vous avez affectée à une variable.
1. Créer la variable : var E1 = new Object();

2. Affecter/Remplir les attributs E1.nom=‘CHAKIB’; les attributs seront
automatiquement ajoutés,
3. Utiliser les attributs document.write(E1.nom);
¡ NB : L’ajout de méthodes se fait à l’aide d’une propriété qui recevra comme valeur une
fonction anonyme
Création d’objets : Méthode 1 via la classe Object.

var E1 = new Object();
E1.nom = 'Chakib';
E1.prenom = 'Hamid';
E1.CNE = 'A123456';
E1.displayInfo = function(){
return E1.nom + " " + E1.prenom + " " + E1.CNE;
}
document.write(E1.displayInfo());
Création d’objets : Méthode 2 via l’objet littéral.

Un objet littéral est un objet qui contient déjà les valeurs de ses attributs . Il
reste à définir les propriétés et les méthodes.
var E1 = {
nom : "Chakib",
prenom : "Hamid", Une méthode sera mentionnée
CNE : "A123456", comme un attribut.
displayInfo : function() {
return this.nom + " " + this.prenom + " " + this.CNE; this permet d’accéder à une
} propriété interne à l’objet
};
document.write(E1.displayInfo());
Création d’objets : Méthode 2 via l’objet littéral.

Il s’agit de définir un constructeur/méthode qui sera utilisé pour créer un objet
et initialiser les valeurs de l’objet.
function Etudiant(nom,prenom,cne){
this.proprietNom = nom; //Création d’objet
this.proprietPrenom = prenom; var E1 = new Etudiant("CHAKIB", "Hamid", "A123456");
this.proprietCNE = cne;
this.displayInfo = function (){
return this.proprietNom + " " +
this.proprietPrenom + " " + this.proprietCNE;
} //Appel d’une fonction
} document.write(E1.displayInfo());
JAVASCRIPT - TABLEAUX
Ø Création des tableaux :

¡ var t=[1, 2, 3, 4]; ¡ var t=new Array(1, 2, 3, 4);
¡ var liste=[‘Ali’, ’Car’, ’maison’ ]; ¡ var liste=new Array(‘Ali’, ’Car’, ’maison’ );
Ø Accès au champs : Ø Taille du tableau :

¡ t[0] , liste[2] ¡ liste.length => 3
Ø Parcours des tableaux :

¡ for (i=0; i<t.length;i++){ }
¡ for (i in t){ } la boucle s’arrête à la fin du tableau, i prend la valeur des indices
JAVASCRIPT - TABLEAUX
Méthodes spécifiques
Méthodes Description
push() Ajoute des éléments en fin de tableau et retourne la nouvelle taille du tableau
pop() Supprime le dernier élément d’un tableau et va retourner l’élément supprimé.
unshift() Ajoute des éléments en début de tableau et va retourner la nouvelle taille du tableau.
shift() Supprime le premier élément d’un tableau et va retourner l’élément supprimé.
slice() renvoie un tableau créé en découpant un tableau de départ.
splice() Ajoute, supprime ou remplace des éléments n’importe où dans un tableau
includes() Détermine si un tableau contient une valeur qu’on va passer en argument
reverse() Transpose les éléments d'un tableau
JAVASCRIPT - NUMBER
Méthodes spécifiques
isInteger() Vérifie si c’est un entier
toFixed() Spécifie le nombre de chiffres après la virgule
toString() Transforme en chaîne de caractères
isNaN() Détermine si la valeur n’est pas un nombre
JAVASCRIPT - MATH
Attributs & Méthodes spécifiques

PI Retourne la valeur de PI
sqrt1_2 Retourne la valeur de la racine carrée de 1/2
ln2 Retourne la valeur de log 2
min() Retourne la valeur minimal à partir des éléments passés en argument
max() Retourne la valeur maximal à partir des éléments passés en argument
ceil() Retourne la valeur de x arrondie à l’entier précédant.
floor() Retourne la valeur de x arrondie à l’entier suivant.
JAVASCRIPT - STRING

length Longueur de la chaine
concat() Fusionne deux tableaux et renvoie un nouveau tableau résultant
includes() Détermine si un tableau contient une valeur qu’on va passer en argument
search() Recherche dans une chaîne la valeur spécifiée et renvoie sa position
toUppercase()
Retourne la chaine en majuscules
toLowercase() Retourne la chaine en majuscules

Diviser une chaîne de caractères à partir d'un séparateur pour fournir un tableau de
split()
sous-chaînes.
JAVASCRIPT - STRING

var d = new Date(); var d = new Date(dateString); var d = new Date(milliseconds);
var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);
getDate() Retourne le jour du mois entre 1-31
getFullYear/Day/Hours/Minutes/
Retourne la valeur demandée
Seconds/Milliseconds()
setFullYear/Day/Hours/Minutes/S
Modifie un objet Date
econds/Milliseconds()
now() Retourne le nombre de millisecondes écoulées depuis le 1/1/1970
getDay() Retourne le jour de la semaine
JAVASCRIPT – DOM HTML
DOM (Document Object Model)

¡ Considérer tout le document ainsi que les éléments comme des objets/noeuds
auquel on peux accéder à partir de javascript

¡ En HTML chaque balise est considérée comme un noeud et peut posséder des
attributs.
<a href=‘test.html’> Page d’accueil </a>
¡ En présence de plusieurs nœuds du même type, je peux attribuer un identifiant
unique pour y accéder après :
<div id=‘par1’> Ceci est le paragraphe 1 </div>

¡ A partir de Document on peut accéder aux éléments à l’aide des méthodes
¡ getElementById(‘valeur_id’) : accéder à un élément via son Id

Exemple : document.getElementById(‘par1’);
¡ getElementsByTagName(‘nom_element’) : accéder à tous les éléments
Exemple : document.getElementsByTagName(‘div’); retourne un tableau contenant tous
les éléments de type div
¡ getElementsByClassName(‘nom_classe’) : accéder à tous les éléments sur la base de
l’attribut class

¡ A partir de Document on peut accéder aux éléments à l’aide des méthodes
¡ querySelector(‘’) : accéder au premier élément correspondant

Exemple : document.querySelector(‘div’);
¡ querySelectorAll(‘’) : accéder à tous les éléments
Exemple : document.querySelectorAll(‘div’); retourne un tableau contenant tous les
éléments de type div
NB : Ces deux méthodes se basent sur le sélecteur CSS

¡ Pour accéder au contenu de l’élément il faut utiliser la méthode innerHTML ou la
méthode textContent
Exemple : document.getElementById(‘par1’).innerHTML;
document.getElementById(‘par1’).textContent();
¡ Pour modifier le contenu de l’élément il faut utiliser la méthode innerHTML

Exemple : document.getElementById(‘par1’).innerHTML=‘bienvenue’;

¡ Pour modifier la valeur d’un attribut :
Exemple : document.querySelector(‘a’).href=‘http://www.emsi.ma’;
¡ Pour modifier la valeur d’un attribut class :

Exemple : document.querySelector(‘.para’).className=‘class1’;
¡ Pour modifier le css :

Exemple : document.getElementById(‘p’).style. color=’blue’;
JAVASCRIPT – GESTION DES EVENEMENTS
¡ Un évènement est une action de l’utilisateur prise en compte par le navigateur

Exemple : Clic droit, touche enfoncée, position de la souris, etc…..
¡ Le gestionnaire d’évènements permet d’associer une action à un évènement sur un objet

ou un élément de la page onEvenement="Action_Javascript_ou_Fonction(); "
¡ Pour associer un évènement à un élément :

<img src='une_image.jpg ' onclick='nom_de_lafonction(parametre1,parametre2)' />
¡ Et si on a plusieurs fonctions :
<img src='une_image.jpg' onclick='fonction1() ; fonction2() ; fonction3()' />
¡ Pour associer un évènement à un élément après le chargement de la page :

Méthode 1 : DOM-0
1. Via une fonction

¡ document.getElementById('mon_element').onclick=nom_de_la_fonction;
2. Via une fonction anonyme

¡ document.getElementById('mon_element').onclick=function("un_parametre"){du
code du code...etc}
¡ Pour associer un évènement à un élément après le chargement de la page :

Méthode 2 : DOM-2
1. Via addEventListener
¡ document.getElementById('mon_element').addEventListener("click", nom_de_la_fonction],
true]);
NB : Il est possible d’ajouter plusieurs fonctions à un évènement
Il est possible de retirer un évènement en utilisant : removeEventListener();

¡ document.getElementById('mon_element').removeEventListener("click", nom_de_la_fonction
], true]);

Cours - Langage de Script (Javascript)

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours - Langage de Script (Javascript)

Transféré par

Droits d'auteur :

Formats disponibles

LANGUAGE DE SCRIPT : JAVASCRIPT

¡ Dr. SALIHOUN Mohammed

¡ Navigateur : Demande de page située à une URL

¡ Serveur : Stocke les fichiers et renvoie la page au navigateur pour affichage

Get : URL de la page

HTML : HyperText Markup Language

¡ HTML est un Langage de balise permettant de définir la structure de la page et

Structure générale d’un fichier HTML

¡ <html>…</html> : Déclare qu’il s’agit d’un document

¡ <title>…</title> : Donne un titre descriptive au

¡ <body>…</body> : Contient l’ensemble du contenu

Eléments & Balises

Balises & Attributs

¡ Attributs : chaque balise possède des attributs

¡ Côté Client : ¡ Côté Serveur :

Dans l’élément head Dans l’élément body Dans l’élément

<head> <body> <head>

Toute instruction se termine par ;

¡ Une instance d’une classe est appelée

CNE ¡ Pour accéder à un attribut/méthode : A123456

Création d’objets : Méthode 1 via la classe Object.

1. Créer la variable : var E1 = new Object();

Création d’objets : Méthode 1 via la classe Object.

Création d’objets : Méthode 2 via l’objet littéral.

Création d’objets : Méthode 2 via l’objet littéral.

Ø Création des tableaux :

Ø Accès au champs : Ø Taille du tableau :

Ø Parcours des tableaux :

Attributs & Méthodes spécifiques

Attributs & Méthodes spécifiques

toLowercase() Retourne la chaine en majuscules

Attributs & Méthodes spécifiques

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

DOM (Document Object Model)

DOM (Document Object Model)

DOM (Document Object Model)

¡ getElementById(‘valeur_id’) : accéder à un élément via son Id

DOM (Document Object Model)

¡ querySelector(‘’) : accéder au premier élément correspondant

DOM (Document Object Model)

¡ Pour modifier le contenu de l’élément il faut utiliser la méthode innerHTML

DOM (Document Object Model)

¡ Pour modifier la valeur d’un attribut class :

¡ Pour modifier le css :

¡ Un évènement est une action de l’utilisateur prise en compte par le navigateur

¡ Le gestionnaire d’évènements permet d’associer une action à un évènement sur un objet

¡ Pour associer un évènement à un élément :

¡ Pour associer un évènement à un élément après le chargement de la page :

1. Via une fonction

2. Via une fonction anonyme

¡ Pour associer un évènement à un élément après le chargement de la page :

NB : Il est possible d’ajouter plusieurs fonctions à un évènement

Il est possible de retirer un évènement en utilisant : removeEventListener();

Vous aimerez peut-être aussi