JavaScript/jQuery

jQuery

Chapitre no 9
Leçon : JavaScript
Chap. préc. :	Introduction à Prototype
Chap. suiv. :	Sommaire

En raison de limitations techniques, la typographie souhaitable du titre, « JavaScript : jQuery
JavaScript/jQuery », n'a pu être restituée correctement ci-dessus.

jQuery est un framework JavaScript libre lancé en janvier 2006 par John Resig.

Il suffit de télécharger le fichier du site officiel^[1], puis de le stocker dans un endroit où les scripts l'utilisant feront mention. Par exemple pour un .html ou .js dans le même répertoire :

<script type="text/javascript" src="jQuery.js"></script>

Dans ce framework (comme dans Prototype), la fonction $() permet de sélectionner (remplace les getElementBy). Elle est synonyme de jQuery().

Par extension le jQuery.UI ajoute des plugins, c'est-à-dire des fonctions pré-programmées stockées sur pages JS : jQuery.NomDeLaFonction.js. Fonctions graphiques, Drag & Drop, multi-forms etc.

Déclarer une fonction dans celle-ci ($(function(){.....});) le fait après le chargement de la page (onload), ce qui assure sa bonne exécution dès l’affichage complet.

Pour transformer un tableau en chaine de caractères :

.join()
.toString()

Pour trier un tableau :

.sort()

Sur l'espace...

Penser à :

 $(document).ready(function(){
   $(selector).text("voici le texte qui sera placé sur le compartiment ''selector'' ou ''element'' etc");
 });

à chaque fois qu’il y à une fonction mise en place

• noConflict() : permet d'annuler l'alias $, pour n'utiliser que jQuery.
• browser
• fn.jQuery

De nombreux sélecteurs simples, d'attributs, de classe ou d'identifiants sont disponibles sur jQuery.

 $(selector,context)
 $(element)
 $(elements)
 $(jQueryObject)
 $(html)

afin de manipuler le DOM il existe sur jQuery des méthodes.

each(callback  length ...

Gérer les Attributs et Propriétés Gérer les Classes CSS, les styles, les dimensions, positions et contenu.

• La gestion des évènements (events)
• la requête serveur avec $.Ajax(options)

$("lkj").link ("style","origine")  function(){alert("ceci est ma liste"};

De nombreux effets visuels sont disponibles.

jQuery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript.

Obj(tableau d'éléments,Objet,Objet jQuery)

• un tableau sera sérialisé en nom/valeur //un Obj par clé \ valeur .
• Effets visuels // animate // toogle etc
• sélecteurs CSS // $(sélecteur).animate (ObjStyle,[duration],[easing],[callback]);

jQuery(#ID).merge

jQuery().merge (Array1 ,Array2) function (){ });

jQuery(#ID).each

jQuery().each (Array , function (){(index , value )});

jQuery(#ID).grep()

jQuery().grep() (Array , function (){( value, index )});

jQuery(#ID).map()

jQuery().map (Array , function (){(value, index )});

jQuery(#ID).trim

jQuery().trim (string);

<div style="width:740px;height:632px;border:2px outset #191956;overflow:hidden;">

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(ID : eq(2)") 
<span style="color:#ee66bb;"> sélect la 3eme cellule d'un d'un tableau</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">("tr : even").css 
<span style="color:#ee66bb;"> sélect les élements pairs</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(a : gt(1)) 
<span style="color:#ee66bb;"> sélect. tous les link's début 3eme</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">(tr : odd).css 
<span style="color:#ee66bb;"> sélect.Elements impairs (index numérique à partir de 0)</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$('#titre');$(#titre).html('texte') 
<span style="color:#ee66bb;"> ajout une chaine de caractère à titre</span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">$.extend(obj1,obj2);...var obj = $.extend({obj1,obj2,obj3});
<span style="color:#ee66bb;"> ajout </span></dd>

<dd style="width:418px;background:#fff999;border:2px groove #191954;color:#994466;text-decoration:none;">//<! [CDATA[var expréss= new regexp("[a-zA-Zèéàçùî\-]+",""gi");<br />
var tabl = test.match(expréss);<br />
var aff= "nombre de noms...etc" + tabl.length + "\n";<br />
for (var i=0;i < tabl.length ;i++){aff = aff + "[" + tabl[i] + "]\n";}<br />//]]>
<form name ='form' action = ""><br />
input type = 'text' name = exempl..<br /> (form) { var test = document.form.exemple.value;
<span style="color:#ee66bb;"> utiliser lastIndexOf() pour vous déplacer dans le occurrence texte vers le mot suivant (car IndexOf c’est le premier caractère</span></dd>
 jQuery chaine de caractères
 jQuery list = "liste"<br />
 jQuery surfloading = [];<br />

</div>

• Pour savoir si une case est cochée : if ($('input#my_checkbox').is(':checked')) {…
• Pour créer un évènement sur libération d'un champ : $('#my_field').focusout(function() {…

La méthode jQuery.ajax() permet de lancer des requêtes asynchrones^[2] en XMLHttpRequest (XHR).

Pour appliquer un traitement dépendant du résultat de ces requêtes, il suffit de les faire suivre par les méthodes existantes qui correspondent à chaque type de résultat.

Par exemple, le code suivant récupère un fichier et affiche son contenu, ou une erreur si le fichier est inaccessible :

    $.ajax({
        url: "http://www.example.com"

    }).done(function(data) {
        alert(data);

    }).fail(function() {
        alert('The file is missing!');
    });

Le style avec callbacks "error: / success:" sous "url:" est moins bien géré au niveau "defer" que les méthodes ".done() et .fail()" (voire ".then() et .fail()"), introduites dans la v1.5[3].

Outils de tests en ligne :

• http://jsbin.com/#javascript,html
• http://jsfiddle.net/

Plugins et frameworks jQuery :

• DataTables
• http://fancybox.net/api

• http://www.w3schools.com/jquery/jquery_ajax_load.asp
• https://openclassrooms.com/courses/introduction-a-jquery-4

JavaScript

Introduction à Prototype

Sommaire