Exemples - Moodle - IUT de Villetaneuse

Transcription

Table des matières
JavaScript
M4103C - Programmation Web – client riche
●
À quoi ça sert ?
●
Présentation
●
Exemple 1
●
Exemple 2
2ème année - S4, cours - 1/5
2014-2015
Marcel Bosc
Département informatique
IUT de Villetaneuse
Université Paris-13
Exemples
1ère partie
Js partout !
Google Maps
À quoi ça sert ?
Menus déroulants
etc.
Serveur = lent
JS = navigateur
site.org
client
client
navigateur
CSS
serveur web
Javascript
PHP ou Java
site.org
http://site.org/saisie.php
votre adresse:
HTML
serveur
(navigateur)
1
[email protected]
apache
2
saisie.php
envoyer
3
lenteur réseau
exécution PHP - serveur chargé
lenteur réseau
lenteur affichage
adresse non valide!
[email protected]
SQL
internet
internet
Utile et sympa !
serveur
(navigateur)
votre adresse:
4
très simplifié...
JavaScript = rapide
client
envoyer
site.org
apache
1
Stages :
presque tous Web => JS
[email protected]
script
client
envoyer
Emploi :
très demandé
pas d'interaction
client / serveur
lente
adresse non valide!
[email protected]
2
envoyer
internet
Sympa !
Exemple
2ème partie
Présentation
exemple.html
<html>
<head>
<title>exemple</title>
<script src="jquery.js"></script>
<script src="exemple.js"></script>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>bla bla bla</p>
</body>
</html>
$(document).ready(function() exemple.js
{
$('h1').click(function()
{
$('p').text('Bonjour!');
$('p').css('color','red');
});
});
Syntaxe
$(document).ready(function()
{
Type
Type implicite
implicite
var i;
(pas
(pas de
de "int",
"int", "String"...)
"String"...)
for(i=0; i<10; i++)
{
console.log('exemple '+i);
if(i>5){console.log('i est > 5');}
Syntaxe
Syntaxe "C"
"C" }
(PHP,
(PHP, Java...)
Java...)
Programme js
{
var i;
for(i=0; i<10; i++)
{
console.log('exemple '+i);
if(i>5){console.log('i est > 5');}
}
Changer couleur
Cacher / montrer
$('#bouton').click(function()
{
alert('Le bouton a été appuyé !');
});
une_fonction_exemple();
function une_fonction_exemple()
{
alert("C'est moi !");
};
});
Changer l'affichage
Ajouter image
});
Navigateur
Un titre
un paragraphe
HTML
DOM
arbre
<body>
<p>
Un paragraphe de texte avec un
<a href="page2.html">lien</a> vers une autre
page. Les mots suivants
<strong>sont importants</strong>
</p>
</body>
Document Object Model
représentation objet des
éléments HTML du document
p
a
img
a
strong
img
body
un objet!
h1
p
Text
Text
Ceci est un titre
Un para... avec un
a
Text
lien
Text
vers une... suivants
<img id="photo" ... />
On peut le manipuler
en Javascript
i=document.getElementById("photo");
i.style.border="1px solid red";
strong
Text
sont importants
Principaux objets DOM
jQuery
Facilite l'accès au DOM
window
Un titre
DOM brut :
un paragraphe
HTMLElement
document.getElementById('photo').style.display="none";
document
jQuery :
$('#photo').hide();
« $ » = jQuery
Exemple
3ème partie
Exemple 1
{
{
});
});
Rappel : sélecteurs CSS
Liste jQuery
#para1 {color: green;}
body
p {color: red;}
« # » = id
balise
« . » = class
<h1>Un essai</h1>
<h2>Titre section-1</h2>
<p id="para1">bla bla bla bla</p>
<h2 class="actu">Titre section-2</h2>
<p>bli bli bli bli bli</p>
<h2>Titre section-3</h2>
<p>Qu'est qu'on s'amuse!</p>
<p>abc def ghi jkl mno</p>
.actu {color: blue;}
h1
p
<body>
<p>bla bla bla</p>
</body>
$('xyz')
liste de tous les éléments
correspondant au sélecteur xyz
Liste jQuery
body
h1
p
p
<body>
<h1 class="actu">un titre</h1>
<p class="actu">bla bla</p>
<p>bla bla</p>
</body>
$('.actu').css('color','red');
Fonction jQuery : .css()
Sur la liste appeler la fonction "css"
".css()" change la propriété « style » des éléments :
<p>
Fonctions jQuery : class
$('p').addClass('actu');
<p>
<p style="color: red;">
Fonctions jQuery : .text() .html()
$('p').text('bonjour');
<p class="actu">
<p>bla bla</p>
<p>bonjour</p>
Mieux que .css() !
class + fichier CSS
$('p').removeClass('actu');
<p class="actu">
<p>
$('p').html('bonjour <a href="...">joe</a>');
<p>bla bla</p>
$('p').hasClass('actu')
true
false
<p>bonjour <a href="...">joe</a></p>
DOM & jQuery
DOM & jQuery
j=« liste » d'un seul élément jQuery
jQuery
j.css('color','red');
j.width(100);
j.addClass('actu');
j.removeClass('actu');
var j=$('#photo');
d = un élément DOM
var d=document.getElementById('photo');
DOM
jQuery
jQuery
DOM
jQuery
DOM
$(d)
$('#photo')[0]
jQuery
DOM
j.text('bonjour');
j.html('bonjour <a ...>joe</a>');
DOM
d.style.color="red";
d.style.width="100px";
d.className+=' actu';
d.className=d.className.repla
ce(/\bactu\b/,' ')
d.textContent='bonjour';
d.innerHTML('bonjour <a ...>joe</a>');
...
Exemple
Réagir à un événement
body
{
{
});
});
Ceci est un titre
h1
p
bla bla bla
click sur h1
$('h1').click(une_fonction_a_appeler);
Gestionnaire d’événement :
une fonction qui sera appelée plus tard,
lorsqu'un événement se produit
Événements
click
mousedown
mouseover
mousemove
keydown
keyup
keypress
ready / load
change
submit
click bouton souris
bouton souris enfoncé
souris entre sur un élément
souris bouge sur un élément
touche enfoncée
touche relâchée
touche enfoncée et relâchée
élément a fini de charger
élément formulaire modifié
formulaire envoyé
Programmation événementielle
Séquentielle « classique »
Événementielle
début.
début.
1. Afficher "bonjour"
2. Afficher carré rouge
3. Afficher ligne
...
1. Afficher "bonjour"
2. si click appeler fonction
"reagir_click"
fin.
attendre
click utilisateur
reagir_click()
Afficher carré rouge
...
Event / this
Exemple
$('h1').click(une_fonction_a_appeler);
...
function une_fonction_a_appeler(event)
{
if(event.which===1)
{
$(this).css('font-size','12px');
}
}
this : élément DOM cible de l'événement
event : objet décrivant l'événement
{
{
});
});
Fonction anonyme
4ème partie
Approche « habituelle »
$('h1').click(une_fonction_a_appeler); lourd ...
Exemple 2
...
function une_fonction_a_appeler()
{
}
Fonction anonyme
{
pratique...
très utilisé !
});
Exemple 2
<body>
<div>
<input id="saisie" type="text">
<input id="ajouter" type="button" value="Ajouter"/>
</div>
<ul id="liste">
<li>Tom</li>
<li>Joe</li>
</ul>
</body>
body
div
input
input
ul
li
li
exemple2.js
{
$('#ajouter').click(function()
{
var ligne=$('<li></li>');
var texte=$('#saisie').val();
ligne.text(texte);
$('#liste').append(ligne);
});
});
<div>
<input id="saisie" type="tex
<input id="ajouter" type="but
</div>
<ul id="liste">
<li>Tom</li>
<li>Joe</li>
</ul>
Rappels
Fonction jQuery : .val()
attendre événement
{
{
ligne.text(texte);
});
});
« prêt » sur doc.
attendre événement
« click » sur élém.
id="ajouter"
changer texte
dans él. jQuery
« ligne »
Créer un élément
{
{
ligne.text(texte);
});
});
$('<xyz ..>...</xyz>')
Crée des nouveaux éléments
à partir du code HTML.
{
{
ligne.text(texte);
});
});
<select>
<input type="text"/>
<textarea>
Ajouter dans l'arbre DOM
body
élément <li> pas
div
ul
<ul id="liste">
encore dans l'arbre
DOM
input
input
li
li
endroit où ajouter
éléments à ajouter :
$('<li></li>')
Où ajouter dans l'arbre DOM ?
$('ul').before(...);
$('ul').after(...);
body
Ce document est distribué librement.
Sous licence GNU FDL :
div
http://www.gnu.org/copyleft/fdl.html
ul
Les originaux sont disponibles au format LibreOffice
li
$('ul').prepend(...);
li
http://www-info.iutv.univ-paris13.fr/~bosc
$('ul').append(...);

Exemples - Moodle - IUT de Villetaneuse

Transcription

Documents pareils

MONECHO - Stage Dev Informatique 2016

WINDOWS XP - Désactiver le centre de sécurité

Télécharger fiche produit

calendrier modules de recherche 2015-2016

Intégrateur Web Expert H/F Parue le 11/06/2014

J`irais cracher sur vos tombes

Savoir gérer son site web et l`enrichir

Classement Blind Test avril 2012

Mon Curriculum Vitae