Rappel

• HTML: décrit le contenu d'une page web
• CSS: décrit la présentation du html
• Javascript: exécute un comportement dynamique

Rappel: HTML et le DOM

Lorem ipsum

	
Mauris id dictum lorem...
	

		
 In vehicula nec massa non dictum.
		

			Nullam
			malesuada
			augue dictum tincidunt viverra
		
	

Le DOM et jQuery

• Difficile et compliqué à utiliser
• Des différences importantes entre navigateurs (plus maintenant)

jQuery a emergé en 2005/2006 en simplifiant l'accès et la manipulation du contenu html

Javascript

Quelques fondamentaux

Javascript: les variables

var x = 23;     // x=23
var y = x * 10; // y=230
var user = "Kevin Dupont";

// D'abord: on déclare une variable
var y;
// On peut lui donner une valeur dès la déclaration
var y = 23;
// Ensuite: on l'utilise
y = 0;
y = y + 100;

Javascript: les fonctions

Les fonctions sont un groupement de commandes

// vide
function() {
}
// renvoie une valeur
function() {
  var x = 12;
  return x * 10;
}
// Prend un ou plusieurs paramètres
function(x) {
  return x * 3.14159;
}
// Peut avoir un  nom
function cmToInches(cm) {
  return cm * 0.393700787;
}

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Signe distinctif: $
Exemple: $(MAGIC)

jQuery: Utilisation typique

1. On sélectionne des éléments du html
2. On applique une action dessus

jQuery: les sélecteurs

= ce qui permet de sélectionner des éléments du html

• Sélectionner par la balise html: $("h2")
• Sélectionner par id: $("#topic")
• Sélectionner par la classe css: $(".section")
• Combinable: $("div.section")

Notez

Les sélecteurs jQuery sont d'une puissance surprenante

jQuery: les méthodes

Exemplifions

$("h2").hide();
$(".section").click(function() {
	$(".important").css("color", "red");
});

Exercices

(Première vague)

Allez sur cette présentation, et déplacez-vous sur cette page
http://is.gd/apabud

Exercice 1

En cliquant sur "texte caché", ce dernier est remplacé par un autre texte.

http://jsfiddle.net/bu3grfxk/

Exercice 2

Ecrire un convertisseur euros → francs

http://jsfiddle.net/n1ce5vzd/

Animations

Les préliminaires

Ajouter ou enlever une classe css à un élément

Manipuler une class

L'on peut ajouter ou enlever une class d'un élément.

						$('#paloaltours').addClass('blue').removeClass('green')
					

Manipuler une class

L'on peut ajouter ou enlever une class selon si elle est déjà présente ou non.

						$('#paloaltours').toggleClass('green')
					

Exercices

Deux exercices en un !
L'objectif est d'ajouter/enlever des classes CSS sur des éléments en fonction d'événements utilisateur.

http://jsfiddle.net/784Lx3ts/

Exercices

Lorsque l'utilisateur clique sur l'élémént +/-, la taille de l'image change.

http://jsfiddle.net/zaoy8huk/

Le HTML complet

L'événement DOM Ready

Les animations

jQuery propose quelques fonctions prédéfinies

fadeIn()

fadeOut()

fadeToggle()

slideDown()

slideUp()

slideToggle()

animate()

Faites vos propres animation avec animate.

Ne permet d'animer que des valeurs numériques.

$('#paloaltours').animate({ width:'20%', left:'80%' }, 1500)
					

Enchainer les animation

Il est possible de chaîner les animations.

$('#paloaltours').animate({ width:'20%', left:'80%' }, 700)
                 .animate({ width:'10%', left:'0' }, 700)
                 .slideUp(700)
                 .slideDown(700)
					

Stoper une animation

Il est possible de chaîner les animations.

$('#paloaltours').stop(true)
					

Exercice 1

Découverte des animations

Exercice 2

Un accordeon en jQuery.

Exercice 3

Bouton on/off animé.

Les plugins jQuery

Le principe

• On charge un script de plugin
• (optionnel) un fichier css
• Magie: une nouvelle méthode jquery est disponible

plugin jQuery : Color

Url : https://github.com/jquery/jquery-color/

Permet de d'animer les changement de couleurs.

Ajoute à .animate() la possibilité d'animer sur background-color et color

plugin jQuery : Validate

Permet de valider un formulaire et d'afficher des messages en conséquence. Url : http://jqueryvalidation.org/Exemple :

<form id="login">
  <label for="email">Email:</label><input type="text" name="email">
  <label for="password">Password:</label><input type="password" name="password">
</form>
<script type="text/javascript">
  $('#login').validate({
    rules: {
      email: { required: true, email: true },
      password: { required: true }
    },
    messages: {
      email: 'Vous devez entrer un email valide.',
      password: 'Vous devez entrer un mot de passe'
    },
    submitHandler: function(form) {
      // Faire des choses une fois le formulaire valide
    }
  })
</script>

Exercices

Exercice ...

jQuery.Color

Reproduire l'animation Windows 8 avec .animate()

Exercice ...

Formulaires

Utiliser un plugin jQuery pour gérer ses formulaires

Bonus