Js CM 1 MP

Table des matières
JavaScript
M4103C - Programmation Web – client riche
● À quoi ça sert ?
2ème année - S4, cours - 1/5

● Présentation
2014-2015
● Exemple 1
Marcel Bosc
● Exemple 2
Département informatique IUT de Villetaneuse Université Paris-13
1ère partie Exemples

Js partout !
Google Maps
À quoi ça sert ?
Menus déroulants
etc.
JS = navigateur Serveur = lent
client site.org client (navigateur) serveur
site.org
navigateur
http://site.org/saisie.php apache
votre adresse:
1
toto@site.o 2
HTML CSS serveur web saisie.php
envoyer
Javascript PHP ou Java
adresse non valide! lenteur réseau

toto@site.o
exécution PHP - serveur chargé
lenteur réseau
SQL
envoyer 4 lenteur affichage
internet très simplifié...

internet
JavaScript = rapide Utile et sympa !

client (navigateur) serveur
site.org
Stages :
presque tous Web => JS
apache
votre adresse: 1
toto@site.o
envoyer
script Emploi :
client très demandé
pas d'interaction
client / serveur
Sympa !
lente
adresse non valide!
toto@site.o 2
envoyer
internet
2ème partie Exemple
<html> exemple.html
<head>
<title>exemple</title>
<script src="jquery.js"></script>
Présentation <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 Changer l'affichage

Navigateur
$(document).ready(function() Programme js
{ Type
var i;
Type implicite
implicite
$(document).ready(function()
for(i=0; i<10; i++)
(pas
(pas de
de "int",
"int", "String"...)
"String"...) {
{
var i;
Changer couleur
for(i=0; i<10; i++)
Un titre
console.log('exemple '+i); {
if(i>5){console.log('i est > 5');} console.log('exemple '+i); un paragraphe
if(i>5){console.log('i est > 5');}
Syntaxe
Syntaxe "C"
"C" } } Cacher / montrer
(PHP,
(PHP, Java...)
Java...) $('#bouton').click(function()
une_fonction_exemple();
{
alert('Le bouton a été appuyé !');
function une_fonction_exemple() Ajouter image
});
{ });
alert("C'est moi !");
};
});
HTML arbre DOM
<body> Document Object Model
<h1>Ceci est un titre</h1> représentation objet des
<p> p
éléments HTML du document
Un paragraphe de texte avec un
<a href="page2.html">lien</a> vers une autre a img a
page. Les mots suivants
<strong>sont importants</strong>
strong img <img id="photo" ... />
</p>
</body>
body
On peut le manipuler
un objet!
en Javascript
h1 p
Text Text a Text strong i=document.getElementById("photo");

Ceci est un titre Un para... avec un vers une... suivants i.style.border="1px solid red";
Text Text
lien 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
3ème partie Exemple
Exemple 1 $(document).ready(function()
{
{
});
});
Rappel : sélecteurs CSS Liste jQuery

#para1 {color: green;}
body <body>
p {color: red;} <h1>Ceci est un titre</h1>
<p>bla bla bla</p>
h1 p
<h1>Un essai</h1>
</body>
<h2>Titre section-1</h2>
« # » = id
<p id="para1">bla bla bla bla</p>
balise
<h2 class="actu">Titre section-2</h2>
« . » = class
<p>bli bli bli bli bli</p>
<h2>Titre section-3</h2> $('p').css('color','red');
<p>Qu'est qu'on s'amuse!</p>
<h2 class="actu">Titre section-4</h2>
<p>abc def ghi jkl mno</p> $('xyz')
<h2 class="actu">Titre section-5</h2> liste de tous les éléments
correspondant au sélecteur xyz
.actu {color: blue;}
Liste jQuery Fonction jQuery : .css()
<body>
body Sur la liste appeler la fonction "css"
<h1 class="actu">un titre</h1>
<p class="actu">bla bla</p>
h1 p p <p>bla bla</p>
</body>
$('.actu').css('color','red'); ".css()" change la propriété « style » des éléments :
<p> <p style="color: red;">
Fonctions jQuery : class Fonctions jQuery : .text() .html()

$('p').addClass('actu'); $('p').text('bonjour');
<p> <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>
true
$('p').hasClass('actu')
false
<p>bonjour <a href="...">joe</a></p>
DOM & jQuery DOM & jQuery
j=« liste » d'un seul élément jQuery
var j=$('#photo'); jQuery DOM
j.css('color','red'); d.style.color="red";
d = un élément DOM j.width(100); d.style.width="100px";
var d=document.getElementById('photo'); j.addClass('actu'); d.className+=' actu';
j.removeClass('actu'); d.className=d.className.repla
ce(/\bactu\b/,' ')
DOM jQuery jQuery DOM j.text('bonjour'); d.textContent='bonjour';
j.html('bonjour <a ...>joe</a>'); d.innerHTML('bonjour <a ...>joe</a>');
DOM jQuery
$(d) $('#photo')[0] ...
jQuery DOM
Exemple Réagir à un événement
body
Ceci est un titre
$(document).ready(function() h1 p click sur h1
bla bla bla
{
{
}); $('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 Programmation événementielle
Séquentielle « classique » Événementielle
click click bouton souris
mousedown bouton souris enfoncé début. début.
mouseover souris entre sur un élément
1. Afficher "bonjour" 1. Afficher "bonjour"
mousemove souris bouge sur un élément 2. Afficher carré rouge 2. si click appeler fonction
keydown touche enfoncée 3. Afficher ligne "reagir_click"
...
keyup touche relâchée
keypress touche enfoncée et relâchée fin. attendre
ready / load élément a fini de charger click utilisateur
change élément formulaire modifié reagir_click()
submit formulaire envoyé Afficher carré rouge
...
Event / this Exemple
$('h1').click(une_fonction_a_appeler);
...
function une_fonction_a_appeler(event) {
{ $('h1').click(function()
if(event.which===1) {
{ $('p').text('Bonjour!');
$(this).css('font-size','12px'); $('p').css('color','red');
} });
});
}
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
$('h1').click(function() pratique...
{ très utilisé !
});
Exemple 2 exemple2.js
<body>
<div> $(document).ready(function()
<input id="saisie" type="text"> { <div>
<input id="ajouter" type="button" value="Ajouter"/> $('#ajouter').click(function() <input id="saisie" type="tex
</div> { <input id="ajouter" type="but
<ul id="liste"> var ligne=$('<li></li>'); </div>
<li>Tom</li> var texte=$('#saisie').val(); <ul id="liste">
<li>Joe</li> ligne.text(texte); <li>Tom</li>
</ul> $('#liste').append(ligne); <li>Joe</li>
</body> }); </ul>
});
body
div ul
input input li li
Rappels Fonction jQuery : .val()
{
attendre événement $('#ajouter').click(function()
$(document).ready(function() « prêt » sur doc. {
{ var ligne=$('<li></li>');
$('#ajouter').click(function() attendre événement var texte=$('#saisie').val();
{ ligne.text(texte);
var ligne=$('<li></li>'); « click » sur élém. $('#liste').append(ligne);
var texte=$('#saisie').val(); id="ajouter" });
ligne.text(texte); });
$('#liste').append(ligne); changer texte
});
}); dans él. jQuery
<select> <input type="text"/> <textarea>
« ligne »
Créer un élément Ajouter dans l'arbre DOM

{ body
$('#ajouter').click(function()
{ élément <li> pas div ul <ul id="liste">
var ligne=$('<li></li>');
var texte=$('#saisie').val(); encore dans l'arbre
ligne.text(texte); DOM input input li li
$('#liste').append(ligne);
});
});
$('<xyz ..>...</xyz>')
$('#liste').append(ligne);
Crée des nouveaux éléments
à partir du code HTML. éléments à ajouter :
endroit où ajouter $('<li></li>')
Où ajouter dans l'arbre DOM ?
$('ul').before(...); $('ul').after(...);
body Ce document est distribué librement.

Sous licence GNU FDL :
div ul http://www.gnu.org/copyleft/fdl.html
Les originaux sont disponibles au format LibreOffice
li li http://www-info.iutv.univ-paris13.fr/~bosc
$('ul').prepend(...); $('ul').append(...);

Js CM 1 MP

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Js CM 1 MP

Hochgeladen von

Copyright:

Verfügbare Formate

Table des matières

2ème année - S4, cours - 1/5

Département informatique IUT de Villetaneuse Université Paris-13

1ère partie Exemples

adresse non valide! lenteur réseau

internet très simplifié...

JavaScript = rapide Utile et sympa !

Syntaxe Changer l'affichage

Text Text a Text strong i=document.getElementById("photo");

Principaux objets DOM jQuery

Facilite l'accès au DOM

Rappel : sélecteurs CSS Liste jQuery

$('.actu').css('color','red'); ".css()" change la propriété « style » des éléments :

<p> <p style="color: red;">

Fonctions jQuery : class Fonctions jQuery : .text() .html()

<p class="actu"> <p> $('p').html('bonjour <a href="...">joe</a>');

$(d) $('#photo')[0] ...

Exemple Réagir à un événement

Event / this Exemple

this : élément DOM cible de l'événement

Créer un élément Ajouter dans l'arbre DOM

body Ce document est distribué librement.

Das könnte Ihnen auch gefallen