1 Javascript Présenté par : M. BETARI Amine Blog Personnel : Année Scolaire: 2013 - 2014

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


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>


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


Déclaration des variables (chaine de caractères)

Caractères spéciaux et échappement


// 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);


Déclaration des variables (Les nombres) Les nombres entiers

Les nombres à virgule


// 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


function nom_de_la_fonction(liste de paramètres) { instruction 1; instruction 2; ...... return résultat; }

// Appel de la fonction

nom_de_la_fonction();

Portée des variables Variable locale

Variable globale


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


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("Avant l'appel à la fonction<BR>");



TesterVar();

document.write("Après l'appel à la fonction<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


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


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; // initialisation

while(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


// Déclaration et affectation

var 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éclaration

var tab1 = new Array();

var tab2 = [];

// Affectation des valeurs

tab1[0] = "Ensao";

Lire et modifier une valeurPour accéder à un élément, on utilise tableau[indice]



var table= ["esto", "ensao", "encgo"];

alert("La seconde case vaut : " + table[1]); // on lit l'element d'indice 1

table[1] = "ista"; // on le modifie

table[3] = "faculté"; // on cree un nouvel element

// Déclaration

var tab1 = new Array();

var tab2 = [];

// Affectation des valeurs

tab1[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



var 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


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 / …


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


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



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.


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")


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

…..


<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


É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


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


<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 balises

elem[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.


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


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.


Expression Retour

:first Le premier élément (équivaut à :eq(0)).

:last Le dernier élément


<!DOCTYPE HTML>

<html>

<head>


<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>


Expression Numéros des éléments sélectionés

#premier_text 1

#premier_texte .texte 2

span + img 3

p 1 et 4

p[class] rien

p[id] 1

img:visible 3 et 5

:hidden 7

p: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, removeClass

Manipuler : append, wrap, prepend

55jQuery : Fonctions utiles

Exemples


<!DOCTYPE HTML>

<html>

<head>




$(function(){

alert($('#div').html());

$('#div').html('Salam');

});

</script>

</head>

<body>

<div id="div"> Bonjour </div>

</body>

</html>

Exemples


<!DOCTYPE HTML>

<html>

<head>




$(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>


<!DOCTYPE HTML>

<html>

<head>




$(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)


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.


<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


Il est possible dans jQuery de créer sa propre fonction :

62jQuery : créer sa propre fonction

<!DOCTYPE HTML>

<html>

<head>




$(function(){

fonctionJs = function() {

alert(‘fonction');

};

});

</script>

</head>

<body onload='fonctionJs()' > </body>

</html>

63 jQuery : Les événements

<!DOCTYPE HTML>

<html>

<head>




$(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>


<!DOCTYPE HTML>

<html>

<head>




$(function(){

$("a").click(function(){

alert($(this).attr('href')); return false;

});

});

</script>

</head>

<body>

<a href="http://www.abetari.com">Blog</a>

</body>

</html>


<!DOCTYPE HTML>

<html>

<head>




$(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>

Documents

1 Javascript Présenté par : M. BETARI Amine Blog Personnel : Année Scolaire: 2013 - 2014