Post on 23-Feb-2016
description
1
JavascriptPrésenté par : M. BETARI Amine
Blog Personnel : www.abetari.com
Année Scolaire: 2013 - 2014
Sommaire
Javascript : Vue d’ensemble Syntaxe Javascript Les fonctions Les tableaux Les objets Les événements Introduction jQuery
2
Javascript est un langage de script simplifié orienté objet
Javascript permet de rendre un site internet développé en HTML dynamique
Javascript est exécuté par le navigateur du visiteur
Javascript est déterminé par une norme, nommé ECMA-262/ECMAScript
3Javascript: Vue d’ensemble
Historique 1995 : inventé par Brendan Eich et développé
par Netscape LiveScript comme première appellation
4Javascript: Vue d’ensemble
Dans une utilisation web, l’exécution du code PHP se déroule comme suit :
5Javascript : Vue d’ensemble
Le code Javascript est placé dans une page HTML Un minimum d’une page HTML
6Javascript : Vue d’ensemble
Il y a deux méthodes pour insérer du Javascript dans une page web :1. Directement dans les balises HTML (événements)2. Directement dans le code HTML (<script></script>)
3. Placer le code dans un fichier séparé<script type="text/javascript" src="script.js"></script>
7Javascript : Vue d’ensemble
Déclaration et affectation Le mot clé var permet de déclarer une ou plusieurs
variables Après la déclaration de la variable, il est possible de lui
affecter une valeur
8Syntaxe Javascript : Les variables
//Déclaration de i, de j et de k.var i, j, k;
//Affectation de i.i = 1; //Déclaration et affectation de prix.var prix = 0;
//Déclaration et affectation de caracterevar caractere = ["a", "b", "c"];
Déclaration des variables On ne peut pas donner qu’on veut à nos variables Le nom de variable peut contenir des lettres en minuscules et en
majuscules, des chiffres ainsi que le underscore Le nom ne doit pas commencer par un chiffre Il existe des mots prédéfinies comme : break, case, char…. Le type d’une variable dépend de la valeur stockée dans cette
variable
9Syntaxe Javascript : Les variables
Déclaration des variables (chaine de caractères)
Caractères spéciaux et échappement
10Syntaxe Javascript : Les variables
// deux chaines de caracteresvar message1 = 'Une chaine de caracteres';var message2 = "C'est une chaine de caracteres ";
// maintenant, on les affichealert(message1);alert(message2);
// deux chaines de caracteresvar message1 = "Ceci est un \" petit \" test";var message2 = "Ceci est un \n petit \test";
// maintenant, on les affichealert(message1);alert(message2);
Les opérations sur les chaînes La concaténation var chaine = « Salam » + « alikem »; Déterminer la longueur d’une chaîne : chaine.length; Identifier le nième caractère d’une chaîne :
chaine.charAt(index); Extraction d’une chaine de carcatère
chaine.substring(start,end);
11Syntaxe Javascript : Les variables
Déclaration des variables (Les nombres) Les nombres entiers Les nombres à virgule
12Syntaxe Javascript : Les variables
// on demande les nombresvar nombre1 = prompt('Premier nombre ?');var nombre2 = prompt('Deuxieme nombre ?');
// on calcule le quotient et on l'affichevar resultat = nombre1 / nombre2;alert("Le quotient de ces deux nombres est " + resultat);
// var nombre = 1.234;alert(nombre);
Voici une liste des fonctions prédéfinies decodeURI() encodeURI() eval() isFinite() isNaN() parseFloat() parseInt() Prompt() Alert() Confirm() . ….
13Syntaxe Javascript: Les fonctions
Il est parfois utile de regrouper un certain nombre d’instructions dans un bloc réutilisable plusieurs fois
Une fonction peut renvoyer un résultat et utiliser des paramètres
14Syntaxe Javascript: Les fonctions
function nom_de_la_fonction(liste de paramètres) { instruction 1; instruction 2; ...... return résultat; }// Appel de la fonctionnom_de_la_fonction();
Portée des variables Variable locale
Variable globale
15Syntaxe Javascript: Les fonctions
function essai() { var variable = 'Bonjour'; alert(variable );}essai();alert(variable); // Erreur variable is not defined
var variable ;function essai() { variable = 'Bonjour';}essai();alert(variable); // OK
Exemple
16Syntaxe Javascript: Les fonctions
var MaVar1 = 8; var MaVar2 = 12; function TesterVar() {
MaVar1 = 12 var MaVar2 = 15; document.write("Dans la fonction<BR>"); document.write("MaVar1 = " + MaVar1 + "<BR>"); document.write("MaVar2 = " + MaVar2 + "<BR>");}document.write("Avant l'appel à la fonction<BR>");document.write("MaVar1 = " + MaVar1 + "<BR>");document.write("MaVar2 = " + MaVar2 + "<BR>");TesterVar();document.write("Après l'appel à la fonction<BR>");document.write("MaVar1 = " + MaVar1 + "<BR>");document.write(" MaVar2 = " + MaVar2 + « <BR>");
Opérateurs de comparaison Ces deux opérateurs fonctionnent aussi pour les chaines de caractères == : si les deux valeurs sont égales != : si les deux valeurs sont différentes a < b / a > b / a <= b / a >= b ( pour les valeurs numériques) ET (&&)/ OU (||)
Les conditions
17Syntaxe Javascript: Opérateurs et conditions
if(condition_vrai) // execution d’un bloc d’instructions {
alert("La condition est vrai");}else {
alert("la condition est fausse}
Les conditions
18Syntaxe Javascript: Opérateurs et conditions
var nom = prompt("Entrez un nom d'animal"); switch(nom) { case "chat":
alert("1"); break;
case "pingouin" : alert(« 2"); break; default : alert("Je n'ai rien à te dire..."); }
Les conditions
19Syntaxe Javascript: Opérateurs et conditions
switch(ma_var) { var egal_deux = 2 case 1 :
alert("Ma variable vaut 1"); break;
case egal_deux : alert("Ma variable vaut 2"); break; default : alert("Ma variable vaut autre chose que 1 ou 2"); }
Les boucles
20Syntaxe Javascript: Les boucles
var i;i = 0; // initialisationwhile(i < 10) // condition{ alert(i); // action i++; // incrementation}
for(initialisation ; condition ; incrementation){ instructions}
do{ instructions}while(condition);
Créer un fichier html (formation.html) Mettre une structure html de base Créer un fichier scripts.js Faire un appel du fichier à partir de la page HTML Reprendre les exemples des slides
21TP 1/3
Ecrire un programme qui permet d’échanger deux valeurs entiers
Ecrire le même programme sans passer par une variables temporaire
Ecrire une fonction qui demande de taper deux valeurs(largeur et longueur) et affiche la surface du rectangle
Ecrire une fonction qui calcule la somme des entiers de 1 à n, la fonction doit retourner une valeur.
22TP 2/3
Ecrire une fonction qui permet de déterminer le jour de la semaine.
Pensez à la classe Date // D = new Date(); Utiliser des (if…else) Même programme avec l’utilisation du switch
23TP 3/3
JavaScript propose une structure de données permettant de stocker l’ensemble de ces données dans une variables commune.
Un tableau est une variable pouvant contenir plusieurs données indépendantes
Tableaux unidimensionnels Tableaux multidimensionnels Tableaux associatifs
La première case portera le numéro 0 et la énième case le numéro n-1
24Syntaxe Javascript :Les Tableaux
Créer un tableau JavaScript fournit plusieurs façons de créer un tableau
25Syntaxe Javascript :Les Tableaux
// Déclaration et affectationvar MonTableau1= ["donnée 1", "donnée 2", "donnée 3", "donnée 4"];
var MonTableau2 = new Array("donnée 1", "donnée 2", "donnée 3", "donnée 4");// Déclarationvar tab1 = new Array();var tab2 = [];// Affectation des valeurstab1[0] = "Ensao";
Lire et modifier une valeurPour accéder à un élément, on utilise tableau[indice]
26Syntaxe Javascript :Les Tableaux
// Déclaration et affectationvar table= ["esto", "ensao", "encgo"]; alert("La seconde case vaut : " + table[1]); // on lit l'element d'indice 1table[1] = "ista"; // on le modifietable[3] = "faculté"; // on cree un nouvel element
// Déclarationvar tab1 = new Array();var tab2 = [];// Affectation des valeurstab1[0] = "Ensao";
Tableau associatif Pour les tableaux associatif , on crée un tableau vide, et on
associe manuellement une par une toutes les valeurs On utilise une chaîne de caractères en tant qu’indice
27Syntaxe Javascript :Les Tableaux
// Déclaration et affectationvar scores = new Array();scores["Toto"] = 142;scores["Pierre"] = 137;
Quelques fonctionsPour un tableau nommé tableau: tableau.length tableau.sort(); ….
TP sur les tableaux : http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript/exploiter-un-tableau-1
28Syntaxe Javascript :Les Tableaux
Se sont soit des entités prédéfinies du langage, soit créé par le programmeur
On trouve deux type d’objets : Objets du navigateur Objets créés par le programmeur
29Syntaxe Javascript :Les Objets
Construction des objets var objet = new Classe();
Utilisation des objets objet.propriete() objet.methode()
Classes d’objets prédéfinis Math / String / Date / Image / RegExp / …
30Syntaxe Javascript :Les Objets
Classes d’objets prédéfinis x = Math .abs(-3.26); x = Math.ceil(3.89); x = Math.round(6.01); d = new Date(); d.getDate();Plus en détail :
http://www.toutjavascript.com/reference/reference.php
31Syntaxe Javascript :Les Objets
JavaScript traite les éléments qui s’affichent dans votre navigateur comme des objets.
Classés selon une hiérarchie pour pouvoir les désigner Auxquels des propriétés sont associées
JavaScript divise la page du navigateur en objets, afin de permettre d’accéder à n’importe lequel d’entre eux et de pouvoir les manipuler par leurs propriétés
32Syntaxe Javascript :Les Objets
33Syntaxe Javascript :Les Objets
L’objet le plus haut dans la hiérarchie est window qui correspond à la fenêtre même du navigateur.
L’objet document est un sous-objet de window. Cet objet représente la page HTML affichée dans le navigateur.
34Syntaxe Javascript :Les Objets
Il est possible d’atteindre tous les éléments de la page HTML avec ces deux méthode de l’objet document
document.getElementById("id") document.getElementsByTagName("balise") document.getElementsByName("name")
35Syntaxe Javascript :Les Objets
Les événements sont des actions de l’utilisateur, qui vont donner lieu à une interactivité.
Grâce au JavaScript il est possible d’associer des fonctions à des événements tels que le passage de la souris au-dessus d’une zone par exemple
Ce sont les gestionnaires d’événements qui permettent d’associer une action à un événement
36Syntaxe Javascript :Les Evénements
Événements page et fenêtre onabort : s’il y a une interruption dans le chargement onerreur : en cas d’erreur durant le chargement de la page onload : après la fin du chargement de la page onresize : quand la fenêtre est redimensionnée…..
37Syntaxe Javascript :Les Evénements
<body onload = "alert('salam')"><body onresize= " alert('tu es entrain de redimensionner la page' ">
Événements souris onclick : sur un simple click onmousedown: lorsque le button de la souris est enfoncé onmousemove: lorsque la souris est déplacée onmouseover: lorsque la souris est sur l’element…..
Événements clavier onkeydown : lorsqu’une touche est enfoncée onkeypress : lorqu’une touche est pressé et relâchée onkeyup : lorsqu’une touche est relâchée
38Syntaxe Javascript :Les Evénements
Événements formulaire onchange : à la perte du focus si la valeur a changé onselect : quand du texte est sélectionné onsubmit : quand le formulaire est validé (via un button de
type « submit ») onfocus : lorsque l’élément prend le focus (devient actif) onreset : lors de la remise à zéro du formulaire
39Syntaxe Javascript :Les Evénements
Il existe un cas où accéder à un élément est simple : c’est lorsque le code se trouve dans la balise HTML. On utilise dans ce cas le mot-clé this qui désigne cet élément
40Syntaxe Javascript :Les Evénements
<select name="color" onchange="color(this.value)"><option value="white">White</option><option value="black">Black</option><option value="red">Red</option><option value="orange">Orange</option><option value="yellow">Yellow</option><option value="gray">Gray</option>
</select>
Créer un tableau qui contient les éléments suivants : esto/ensao/encgo var table = ["esto", "ensao", "encgo"];
Créer une fonction qui prend en paramètre le tableau crée et affiche sont contenu de cette façon :
41TP 1/3
Créer une page HTML contient un formulaire avec une liste déroulante.
La liste contient des couleurs La couleur du background de la page par défaut est le
blan Le choix d’une valeur de la liste change le background
de la page
42TP 2/3
Créer un formulaire comme ci-dessous: Afficher les informations saisies par l’utilisateur dans
une boite de dialogue « alert », puis dans une autre page HTML.
43TP 3/3
jQuery est une bibliothèque JavaScript gratuite, ayant une syntaxe courte et compatible avec tous les navigateurs courants.
jQuery permet de traverser et manipuler très facilement l’arbre DOM des pages web
jQuery permet par exemple de changer/ajouter une classe CSS, créer des animations, modifier des attributs, etc.
jQuery permet de gérer les événements JavaScript jQuery permet de faire des requêtes AJAX
44jQuery : Introduction
jQuery est une simple bibliothèque à importer Disponible sur le site : http://code.jquery.com/ <script type="text/javascript" src="jqueryr.js"></
script> Ou Directement sur Google code <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
jQuery n’est pas la seule bibliothèque JS disponible, vous pouvez aussi vous intéresser à d’autres comme Mootools, Scriptaculous, Prototype, Yahoo UI, Dojo
45jQuery : Introduction
46jQuery : Rappel sur le DOM
47jQuery : Exemple
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">$(function(){
$('#contenu').html('Hello World');});</script>
</head> <body>
<div id="contenu">Salut tout le monde !</div></body></html>
Toute jQuery repose autour d’une fonction : jQuery() ( abrégée $() car le dollar est un caractère autorisé pour les noms de fonctions en Javascript) qui permettra de sélectionner des éléments dans votre page web.
Cette fonction accepte des paramètres et retourne un objet
jQuery() ou $() Elle accepte des sélecteurs en argument
48jQuery : Fonction principale
Sélecteurs CSS
49jQuery : Les sélecteurs
Expression Retour #titre La balise ayant pour id
« titre »h1 Les balises h1.class Les balises qui ont la classe
« class »a, h1, h2 Les balises a,h1 et h2* Toutes les baliseselem[attr] Balises elem dont l’attribut
« attr » est spécifiéelem[attr="val"] Balises elem dont l'attribut
"attr" est à la valeur val.
elem bal Balises bal contenues dans une balise elem.
50jQuery : Les sélecteurs
Expression Retour elem > bal Balises bal directement
descendantes de balises elem.
elem + bal Balises bal immédiatement précédées d'une balise elem.
Sélecteurs spécifiques jQuery
51jQuery : Les sélecteurs
Expression Retour :hidden Éléments invisibles, cachés.:visible Éléments visibles.
:parent Éléments qui ont des éléments enfants.
:header Balises de titres : h1, h2, h3, h4, h5 et h6.
:contains(t) Éléments qui contiennent du texte t.
:empty Éléments dont le contenu est vide.
52jQuery : Les sélecteurs
Expression Retour :first Le premier élément
(équivaut à :eq(0)).:last Le dernier élément
53jQuery : Les sélecteurs <!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> </head> <body>1: <p id="premier_texte">2: <span class="texte"> Salam Alikem </span>3: <img src="images/photo_1.png" alt="Premiere Photo" class="image1" /> </p>4: <p>5: <img src="images/photo_1.png" alt="Second Photo" />6: <span class="texte">Genie Informatique </span> </p>7: <img src="images/photo_1.png" alt="Second Photo" style="display:none"/> </body></html>
54jQuery : Les sélecteurs
Expression Numéros des éléments sélectionés
#premier_text 1#premier_texte .texte 2span + img 3p 1 et 4p[class] rienp[id] 1img:visible 3 et 5:hidden 7p:contains('Salam') 1
Les méthodes s’appliquent généralement à tous les éléments sélectionnés
$(‘.classe’).hide()$(‘.classe’).show()Parcourir le DOM : $(‘.classe’).parent(), $
(‘.classe’).next()$(‘.classe’).children(), $(‘.classe’).parents()Ajouter ou retirer des classes CSS : addClass,
removeClassManipuler : append, wrap, prepend
55jQuery : Fonctions utiles
Exemples
56jQuery : Fonctions utiles
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){ alert($('#div').html());
$('#div').html('Salam');});
</script> </head> <body> <div id="div"> Bonjour </div> </body></html>
Exemples
57jQuery : Fonctions utiles
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){ $('#div').append('<strong>les ingénieurs</strong>')});
</script> </head> <body> <div id="div"> Bonjour </div> <p><a href="#" onclick="$('#div').hide()"> Disparition</a></p> </body></html>
58jQuery : Fonctions utiles
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){ $('p').before('Avant la balise p <br />'); $('textarea').after('<p>Veuillez ne
pas poster de commentaires </p>');});
</script> </head> <body> <p>First paragraphe</p> <p>Second paragraphe</p> <textarea></textarea> </body></html>
La méthode css() : permet d’obtenir la valeur d’une propriété de style, il est aussi possible avec cette méthode de définir ou modifier un propriété de style, il suffit de passer un 2eme paramètre à la méthode
.css(propertyName).css(propertyName, value).css(properties)
59jQuery : Fonctions utiles
La méthode html() : permet de remplacer le contenu d’un élément ou le récupérer
La méthode text() : permet de manipuler le contenu comme du texte
La méthode wrap() permet d’envelopper n’importe quel élément entre deux balises.
60jQuery : Fonctions utiles
<p id="premier"> <span class="texte"> Salut tout le monde </span></p>$('#premier').text(); // Renvoie salut tout le monde$('#premier').html(); // Renvoie la balise <span>$(‘.texte').wrap(‘<h1></h1>’);
La méthode wrapAll() est pareille à wrap() sauf que wrap() enveloppe chaque élément un par un, alors que wrapAll() enveloppe tous les éléments d’un coup
61jQuery : Fonctions utiles
Il est possible dans jQuery de créer sa propre fonction :
62jQuery : créer sa propre fonction
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){ fonctionJs = function() {
alert(‘fonction');};
}); </script> </head> <body onload='fonctionJs()' > </body></html>
63 jQuery : Les événements<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){$("select").change(function(){ alert(‘text’); });});
</script> </head> <body> <select name="color">
<option value=“a”>A</option><option value=“b”>B</option>
</select> </body></html>
64 jQuery : Les événements
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(function(){ $("a").click(function(){ alert($(this).attr('href')); return false; });});
</script> </head> <body> <a href="http://www.abetari.com">Blog</a> </body></html>
65 jQuery : Les événements
<!DOCTYPE HTML><html> <head> <title>Titre de la page</title> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript">
$(document).keyup(function(touche){ // on écoute l'évènement keyup()
var appui = touche.which || touche.keyCode; if(appui == 13){ alert('Vous venez d\'appuyer sur la touche Entrée !'); } }); </script> </head> <body></body></html>
Mettre le code du dernier slide dans une page HTML Ajouter un button/lien, après le clique : Enlever les liens; Voir le code dans une boite de dialogue Transformer les liens en buttons Regrouper les buttons dans un bloc (div) Colorer le texte ( se baser sur les classe existent déjà) Vider la page HTML
66jQuery : Tp 1/3
Reprendre les exemples des slides Reprendre le TP de la création d’une page HTML qui
contient une liste déroulante et à chaque changement d’une valeur de la liste, la couleur de la page se change.
Utilisez jQuery !!
67jQuery : Tp 2/3
68jQuery : Tp 3/3
Créer une page HTML qui a comme affichage :
Au clic sur un div, on affiche :
Pensez à .css()
69jQuery : Annexe
<p id="contenu"> Lorem <span class="vert">ipsum dolor</span> sit
amet, <span class="titre2"> consectetur adipiscing elit</span>.Etiam <a
href="#">facilisis</a> <span class="rouge">ultrices</span> dolor, eu <span
class="orange">fermentum eros</span> aliquet ac. Aenean varius <span
class="titre2">ultrices nisi </span> vel aliquet. Nam eu viverra sem. <span
class="gras">Fusce facilisis </span> eros ac <span class="titre1">elit scelerisque
molestie</span>. Morbi lacus orci, interdum ac <span
class="souligne">faucibus hendrerit</span>, <span class="barre">facilisis vel</span> nunc. <span
class="souligne">Sed in </span> <span class="bleu">mauris</span> <span
class="gras">lorem</span>. Integer facilisis, <span class="italique">augue et
suscipit</span> molestie, <span class="barre">lectus lectus</span>
pellentesque mi, <span class="vert"> at</span> condimentum <span
class="italique">nulla</span> nibh ut turpis. <span> Cum sociis</span> natoque <span
class="vert">penatibus et magnis</span> dis <a href="#">parturient montes</a>, nascetur ridiculus
mus. Etiam quis nisl metus.<span
class="vert">Phasellus</span>ullamcorper posuere augue quis placerat. <span class="titre1">Duis sed quam</span>odio.
Donec <span class="vert">aliquam metus</span> a <a href="#">ligula lacinia</a> a
tempor leo <span class="bleu">imperdiet</span>. Cras augue purus, <span class="souligne">lobortis
eu</span> scelerisque sed, <span class="vert">venenatis ut</span> turpis.
Donec <span class="bleu">quis magna sapien</span>. Ut ut diam arcu. <span
class="souligne">Suspendisse nec risus</span> id lacus venenatis <a
href="#">rhoncus.</a> In vitae <span class="vert">justo tellus</span>, <span
class="bleu">vitae lacinia nunc </span>. Aliquam <span class="italique">erat</span>
<span class="rouge">volutpat.</span> </p>