tp web : jquery mobiletvaira.free.fr/web/tp-jquery-mobile.pdf · 2019-11-20 · jquery mobile...

TP Web : jQuery Mobile« 2019 tv <[email protected]> - v.1.0

Application Web Mobile 2

jQuery Mobile 2

Travaux pratiques 3

Séquence 1 : première application web mobile . . . . . . . . . . . . . . . . . . . . . . . . . . . 3Séquence 2 : navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Séquence 3 : navigation et contenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Annexe 1 : Le langage JavaScript 18

Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18Le typage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19La syntaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Annexe 2 : Le framework jQuery 21

Présentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Autres : jQuery UI, DataTables et jQuery Mobile . . . . . . . . . . . . . . . . . . . . . . . . . 22

Annexe 3 : Viewport et Responsive Web Design 24

jQuery Mobile TP Web

TP Web : jQuery MobileL’objectif de ce tp est d’écrire une application web pour mobile.

Application Web Mobile

Une application web pour mobile est une application web « customisée » pour ce type de terminal(taille, tactile, performances, ...) qui :

• utilise une feuille de style CSS spécifique aux périphériques mobiles (media="handheld" cf. http://www.alsacreations.com/article/lire/930-css3-media-queries.html)

• fournit une interactivité imitant les applications natives (cf. http://www.hongkiat.com/blog/mobile-frameworks/)

jQuery Mobile

JQuery Mobile est un framework d’interface optimisé pour les appareils mobiles tactiles. Son objectifest de permettre de rapidement développer des applications mobiles ou des applications web monopageen réponse à la grande diversité des Smartphones et tablettes sur le marché. Il est développé par l’équipedu projet JQuery. Il s’appuie sur l’utilisation des technologies du web : HTML5, CSS3, DOM, Javascript,Ajax.

De manière générale, on développe des documents HTML5 et jQuery Mobile ajoute des éléments etdes attributs de style adaptées aux terminaux mobiles.

Les bibliothèques de jQuery Mobile sont requises et on peut :• soit les télécharger et les stocker en local sur votre serveur• soit les utiliser directement à partir du serveur public jQuery.com (jQuery CDN)• soit parmi les CDN (Content Delivery Networks) proposés, par exemple : Google CDN et Microsoft

CDN

On effectue l’importation dans le document HTML :• de la feuille de style spécifique mobile (.css)� �

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />� �

• de la bibliothèque JavaScript jQuery (.js)� �<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>� �

• de la bibliothèque JavaScript jQuery Mobile (.js)� �<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>� �

Quelques liens utiles :• http://jquerymobile.com/• https://www.w3schools.com/jquery/• https://www.mobiletuto.com/developper-avec-jquery-mobile/• http://demos.jquerymobile.com/

BTS SN-IR LT La Salle Avignon 2 / 24 « 2019 <[email protected]> v.1.0

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

http://www.hongkiat.com/blog/mobile-frameworks/

http://www.hongkiat.com/blog/mobile-frameworks/

jQuery.com

http://jquerymobile.com/

https://www.w3schools.com/jquery/

https://www.mobiletuto.com/developper-avec-jquery-mobile/

http://demos.jquerymobile.com/

Travaux pratiques

Séquence 1 : première application web mobile

Il est possible structurer l’application web suivant deux approches :• un document par page et on utilise des liens et l’id de la page (href="page2.html#page2")• un document contenant n pages et on utilise les ancres de la balise a à partir de l’id des pages

(href="#page2")

Une application web monopage (single-page application ou SPA) est une application web accessible viaune page web unique. Le but est d’éviter le chargement d’une nouvelle page à chaque action demandée,

et de fluidifier ainsi l’expérience utilisateur. Deux méthodes existent pour ce faire : l’ensemble des éléments del’application est chargé (contenu, images, CSS et JavaScript) dans un unique fichier HTML, soit les ressourcesnécessaires sont récupérées et affichées dynamiquement en fonction des actions de l’utilisateur. Le terme a étéintroduit par Steve Yen en 2005.

Les pages sont créés à partir de la balise section (ou <div>) dans le document. On exploite ensuiteles attributs (http://demos.jquerymobile.com/1.2.0/docs/api/data-attributes.html) fournis parJQuery Mobile :

• data-role : précise la nature du bloc (page|header|content|footer)• data-position : spécifie où l’élément doit être positionné (top|bottom|right|left)• data-inset : spécifie si l’élément doit être contenu dans les marges ou à l’extérieur de celles-ci

(true|false)• data-transition : spécifie quelle transition utiliser lors du chargement de nouvelles pages

(slide|slideup|slidedown|pop|flip|fade)• data-theme : spécifie le thème graphique à utiliser pour les éléments d’un conteneur (a|b|c|d|e)• ...

Une page jQuery Mobile « type » devra nécessairement :• déclarer un doctype HTML5• imposer la taille de la surface du viewport à la valeur de device-width du terminal, sans zoom

initial• intégrer les ressources jQuery Mobile (CSS et JavaScript)

Le squelette d’une page jQuery Mobile sera le suivant :� �<!DOCTYPE html><html lang="fr">

<head><title>Ma première application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.

css" /></head><body>



<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>


http://demos.jquerymobile.com/1.2.0/docs/api/data-attributes.html

jQuery Mobile Séquence 1 : première application web mobile TP Web

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></body>

</html>� �Dans jQuery Mobile, chaque page est associée à une vue de l’application définie dans la balise <body>.

Une page est identifiée par l’attribut data-role="page".Le corps de la page web mobile aura la structure suivante :• un en-tête (data-role="header")• un contenu et un logo (data-role="content")• un pied de page (data-role="footer")

Une simple page jQuery Mobile aura le contenu ci-dessous :� �<!DOCTYPE html><html lang="fr">

<head><title>Ma première application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.

css" /><style type="text/css">.center { text-align: center; }</style>

</head><body>

<section id="page1" data-role="page">

<header data-role="header"><h1>Titre du site</h1></header><div data-role="content">

<p>Un contenu ...</p>

</div><p class="center">

<img src="logo.png" alt="Un logo !" width="50%" height="50%" />

</p><footer data-role="footer" data-position="fixed">© 2019 </footer>

</section><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</body></html>� �

Dans cet exemple, la balise <div> peut être utilisée à la place des balises HTML5 <section>, <header>et <footer>.

Question 1. Créer une simple page jQuery Mobile mono-page.html.

Pour tester cette page, on utilisera de préfèrence un émulateur, ceux inclus dans les navigateursChrome et Firefox avec la touche F12 .


Il est aussi possible de l’exécuter directement dans le navigateur d’un terminal mobile (smartphone) si ondispose d’un accès Wifi et d’un serveur Intranet ou Internet pour héberger le document web.

Question 2. Tester avec un émulateur le rendu de la page jQuery Mobile mono-page.html.

Il est possible de définir plusieurs pages au sein d’un même document. Elles sont toutes définies àl’aide de l’attribut data-role="page" et identifiées à l’aide d’un unique id. On va utiliser des balises apour naviguer entre les pages :� �

<!DOCTYPE html><html lang="fr">

<head><title>Ma première application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.


</head><body>

<section id="page1" data-role="page">

<header data-role="header"><h1>Site - Page 1</h1></header><div data-role="content">

<p>Un contenu ...</p><p><a href="#page2">La page 2</a></p>

</div><p class="center">

<img src="logo.png" alt="Un logo !" width="50%" height="50%" />

</p><footer data-role="footer" data-position="fixed">© 2019 </footer>

</section><section id="page2" data-role="page">


<p>Un autre contenu ...</p><p><a href="#page1">La page 1</a></p>

</div><footer data-role="footer" data-position="fixed">© 2019 </footer>

</section><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</body></html>� �

Par défaut, le jQuery Mobile applique une transition fade (fondu). Pour définir un effet de transitionpersonnalisé, il faut ajouter l’attribut data-transition au lien a, par exemple :� �

<p><a href="#page2" data-transition="flip">La page 2</a></p>� �Question 3. Créer une application jQuery Mobile multi-pages.html.

Question 4. Tester avec un émulateur le rendu de l’application jQuery Mobile multi-pages.html.

jQuery Mobile Séquence 2 : navigation TP Web

Séquence 2 : navigation

L’application intègre maintenant plusieurs pages au sein d’un même document. On va utiliser lebalayage (swipe) afin de passer d’une page à l’autre.

Pour cela, il faut intégrer du code jQuery :� �<!DOCTYPE html><html lang="fr">

<head><title>Ma première application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.


</head><body>

<section id="page1" data-role="page" data-prev="" data-next="#page2"><header data-role="header"><h1>Site - Page 1</h1></header><div data-role="content">

<p>Un contenu ...</p></div><p class="center">

<img src="logo.png" alt="Un logo !" width="50%" height="50%" /></p><footer data-role="footer" data-position="fixed">© 2019 </footer>

</section><section id="page2" data-role="page" data-prev="#page1" data-next="">


<p>Un autre contenu ...</p>



</div><footer data-role="footer" data-position="fixed">© 2019 </footer>

</section><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>

// Fonctions de navigation pour changer de pagefunction navnext( next ) {

$( ":mobile-pagecontainer" ).pagecontainer( "change", next, {transition: "slide"

});}function navprev( prev ) {

$( ":mobile-pagecontainer" ).pagecontainer( "change", prev, {transition: "slide",reverse: true

});}

$( document ).one( "pagecreate", "#page1", function() {// Gestion des évènements swipeleft/swiperight// swipeleft = page suivante$( document ).on( "swipeleft", ".ui-page", function( event ) {

// récupère le nom de la page suivantevar next = $( this ).jqmData( "next" );// change de pageif ( next ) {

navnext( next );}

});// swiperight = page précédente$( document ).on( "swiperight", ".ui-page", function( event ) {

// récupère le nom de la page précèdentevar prev = $( this ).jqmData( "prev" );// change de pageif (prev) {

navprev( prev );}

});});

</script></body>

</html>� �Question 5. Créer une application jQuery Mobile multi-pages-swipe.html.

Pour tester cette application, on utilisera le simulateur d’évènements tactiles inclus dans l’émulateurde Chrome et Firefox :



Chrome

Firefox

Question 6. Tester avec l’émulateur la navigation par balayage.

Pour compléter la navigation dans cette application, on va intégrer deux boutons dans le pied depage :



Le code est maintenant le suivant :� �<!DOCTYPE html><html lang="fr">

<head><title>Ma première application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.


</head><body>

<section id="page1" data-role="page" data-prev="" data-next="#page2"><header data-role="header"><h1>Site - Page 1</h1></header><div data-role="content">

<p>Un contenu ...</p></div><p class="center">

<img src="logo.png" alt="Un logo !" width="50%" height="50%" /></p><footer data-role="footer" data-position="fixed" data-mini="true">

<a href="#" class="prev ui-btn ui-btn-left ui-btn-icon-notext ui-icon-carat-l">Précédent</a>

<p class="center">© 2019 </p><a href="#" class="next ui-btn ui-btn-right ui-btn-icon-notext ui-icon-carat-r">

Suivant</a></footer>

</section><section id="page2" data-role="page" data-prev="#page1" data-next="">

<header data-role="header"><h1>Site - Page 2</h1></header>



<div data-role="content"><p>Un autre contenu ...</p>

</div><footer data-role="footer" data-position="fixed" data-mini="true">

<a href="#" class="prev ui-btn ui-btn-left ui-btn-icon-notext ui-icon-carat-l">Précédent</a>

<p class="center">© 2019 </p><a href="#" class="next ui-btn ui-btn-right ui-btn-icon-notext ui-icon-carat-r">

Suivant</a></footer>

</section>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>





});}

$( document ).one( "pagecreate", "#page1", function() {// Gestion des évènements swipeleft/swiperight// swipeleft = page suivante$( document ).on( "swipeleft", ".ui-page", function( event ) {


navnext( next );}


// récupère le nom de la page précèdentevar prev = $( this ).jqmData( "prev" );// change de pageif (prev) {

navprev( prev );}

});// Même principe pour des clics$( document ).on( "click", ".next", function() {

var next = $( ".ui-page-active" ).jqmData( "next" );if ( next ) {

navnext( next );}

});$( document ).on( "click", ".prev", function() {

var prev = $( ".ui-page-active" ).jqmData( "prev" );if ( prev ) {

navprev( prev );}


jQuery Mobile Séquence 3 : navigation et contenu TP Web

});});

</script></body>

</html>� �jQuery Mobile dispose d’une fonctionnalité permettant de créer et d’ajouter automatiquement des bou-tons "Précédent" à n’importe quel en-tête, bien qu’elle soit désactivée par défaut. Le framework génère

automatiquement un bouton "retour" sur un en-tête avec l’attribut data-add-back-btn="true". Si vous sou-haitez simplement une transition inverse sans revenir réellement dans l’historique, vous devez utiliser l’attributdata-direction="reverse".

Question 7. Créer une application jQuery Mobile multi-pages-navigation.html. Tester avec l’ému-lateur.

Séquence 3 : navigation et contenu

jQuery Mobile propose deux techniques pour assurer la navigation entre pages :• un menu avec l’attribut data-role="panel"• des onglets avec l’attribut data-role="navbar"

data-role="panel" data-role="navbar"

jQuery Mobile fournit les classes ui-bar et ui-body pour la subdivision et le regroupement visuel decontenu. De plus, les classes ui-bar-[a-z] et ui-body-[a-z] ajoutent la nuance appropriée de votrethème. L’attribut data-mini="true" permet un rendu plus petit des éléments.



Les collapsibles sont des widgets simples qui permettent de développer ou de réduire le contenulorsque on clique dessus et qui sont utiles pour fournir une présentation compacte du contenu. Pourcréer ce type de bloc, il faut un conteneur avec l’attribut data-role="collapsible". Directement àl’intérieur de ce conteneur, ajoutez un en-tête (H1-H6) ou un élément de légende. Le cadre donnera àl’en-tête un style ressemblant à un bouton cliquable et ajoutera une icône "+" à gauche pour indiquerqu’il est extensible. Les icônes par défaut des en-têtes réductibles peuvent être remplacées à l’aide desattributs data-collapsed-icon et data-expanded-icon. Exemple : data-collapsed-icon="carat-d"et data-expanded-icon="carat-u". L’icône peut être positionné avec l’attribut data-iconpos. Pardéfaut, un cadre est affiché pour le contenu que l’on peut désactiver avec data-inset="false".

Une listview est un widget qui permet un affichage comme une simple liste non ordonnée (ul) ouordonnée (ol) avec un attribut data-role="listview" et possède un large éventail de fonctionnalités(https://demos.jquerymobile.com/1.4.5/listview/).

data-role="collapsible" data-role="listview"

� �<!DOCTYPE html><html lang="fr">

<head><title>Une application web mobile !</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.


</head><body>

<section id="accueil" data-role="page" data-theme="a"><header data-role="header" data-position="fixed">


https://demos.jquerymobile.com/1.4.5/listview/

<h1>Site</h1><div data-role="navbar">

<ul><li><a href="#produits">Produits</a></li><li><a href="#services">Services</a></li>

</ul></div><a href="#menu" class="ui-btn-left" data-icon="bars" data-iconpos="notext">Menu</a>

</header>

<div data-role="content"><div class="ui-body ui-body-a ui-corner-all"><h3 class="center">Titre</h3><p class="center">Bienvenue ! ...</p>

</div><p class="center"><img src="logo.png" alt="Un logo !" width="50%" height="50%" /></p>




<p class="center">© 2019 </p></footer><div id="menu" data-role="panel" data-display="push" data-position="left">

<ul data-role="listview"><li><a href="#produits" data-ajax="false">Produits</a></li><li><a href="#services" data-ajax="false">Services</a></li><li data-icon="delete"><a href="#accueil" data-rel="close">Fermer</a></li>

</ul></div>

</section><section id="produits" data-role="page" data-prev="" data-next="#services" data-theme="a">

<header data-role="header" data-position="fixed"><h1>Site</h1><div data-role="navbar">

<ul><li><a href="#produits" class="ui-btn-active ui-state-persist">Produits</a></li

><li><a href="#services">Services</a></li>

</ul></div><a href="#menu1" class="ui-btn-left" data-icon="bars" data-iconpos="notext">Menu</a

></header><div data-role="content">

<div data-role="collapsible" data-collapsed-icon="carat-d" et data-expanded-icon="

carat-u"><h3>Produit n°1</h3><p>Détails du produit n°1 (avec le thème "a") ...</p>

</div><div data-role="collapsible" data-collapsed-icon="carat-d" et data-expanded-icon="

carat-u"><h3>Produit n°2</h3><p>Détails du produit n°2 (avec le thème "b") ...</p>

</div></div><footer data-role="footer" data-position="fixed" data-mini="true">

<a href="#" class="prev ui-btn ui-corner-all ui-btn-inline ui-mini ui-btn-left ui-btn-icon-notext ui-icon-carat-l">Précédent</a>

<p class="center">© 2019</p><a href="#" class="next ui-btn ui-corner-all ui-btn-inline ui-mini ui-btn-right ui-

btn-icon-notext ui-icon-carat-r">Suivant</a></footer><div id="menu1" data-role="panel" data-display="push" data-position="left">

<ul data-role="listview"><li><a href="#produits" data-ajax="false">Produits</a></li><li><a href="#services" data-ajax="false">Services</a></li><li data-icon="delete"><a href="#accueil" data-rel="close">Fermer</a></li>

</ul></div>

</section><section id="services" data-role="page" data-prev="#produits" data-next="" data-theme="a">

<header data-role="header" data-position="fixed"><h1>Site</h1><div data-role="navbar">

<ul><li><a href="#produits">Produits</a></li><li><a href="#services" class="ui-btn-active ui-state-persist">Services</a></li

></ul>

</div><a href="#menu2" class="ui-btn-left" data-icon="bars" data-iconpos="notext">Menu</a

></header><div data-role="content">

<ul data-role="listview" data-inset="true">

<li><a href="#service1" data-transition="slide"><h3>Service n°1</h3><p>En savoir plus ...</p></a>

</li><li>

<a href="#service2" data-transition="slide"><h3>Service n°2</h3><p>En savoir plus ...</p></a>

</li></ul>


<a href="#" class="prev ui-btn ui-corner-all ui-btn-inline ui-mini ui-btn-left ui-btn-icon-notext ui-icon-carat-l">Précédent</a>

<p class="center">© 2019</p><a href="#" class="next ui-btn ui-corner-all ui-btn-inline ui-mini ui-btn-right ui-

btn-icon-notext ui-icon-carat-r">Suivant</a></footer><div id="menu2" data-role="panel" data-display="push" data-position="left">

<ul data-role="listview"><li><a href="#produits" data-ajax="false">Produits</a></li>

<li><a href="#services" data-ajax="false">Services</a></li><li data-icon="delete"><a href="#accueil" data-rel="close">Fermer</a></li>

</ul></div>

</section>

<section id="service1" data-role="page" data-theme="a"><header data-role="header"><h1>Site</h1></header><h2 class="center">Service n°1</h2><div class="content" data-role="content">

<p>Ce service ...</p><p class="center">Contact : 04.04.04.04.04</p><p class="center">Horaires d'ouverture : <br/>du 1er Decembre au 31Mars,<br/>de 9h à 12h et de 13h30 à 17h30.</p>

</div><div class="center" data-role="controlgroup" data-type="horizontal" data-mini="true">

<a href="mailto:info%40societe.com" data-role="button" data-icon="forward" data-iconpos="right" target="_blank">info(at)neige.com</a>


<a href="#services" class="ui-btn ui-corner-all ui-btn-inline ui-mini ui-btn-leftui-btn-icon-notext ui-icon-back">Retour</a>

<p class="center">© 2019 </p></footer>

</section>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><script>





});}

$( document ).one( "pagecreate", "#produits", function() {// Gestion des évènements swipeleft/swiperight// swipeleft = page suivante$( document ).on( "swipeleft", ".ui-page", function( event ) {


navnext( next );}


// récupère le nom de la page précèdentevar prev = $( this ).jqmData( "prev" );// change de page


if (prev) {navprev( prev );

}});// Même principe pour des clics$( document ).on( "click", ".next", function() {

var next = $( ".ui-page-active" ).jqmData( "next" );if ( next ) {

navnext( next );}

});$( document ).on( "click", ".prev", function() {

var prev = $( ".ui-page-active" ).jqmData( "prev" );if ( prev ) {

navprev( prev );}

});});

</script></body>

</html>� �Question 8. Créer une application jQuery Mobile multi-pages-menu.html. Tester avec l’émulateuravec les deux thèmes a et b.

Le passage d’une page à une autre peut se faire de différentes manières. Dans le cas d’un documentmulti-pages, le passage se fait en cliquant sur une ancre a possédant l’id de la page. Si l’on souhaite

par contre atteindre un contenu qui n’est pas dans le document courant, jQuery Mobile utilise par défaut latechnologie Ajax, pour passer d’une vue à une autre. On ajoute l’attribut rel="external" qui permet depréciser qu’il s’agit bien d’une page externe au document courant. Si l’on ne souhaite pas utiliser Ajax pourpasser d’un contenu à un autre, il faut mettre l’attribut data-ajax à false.

avec l’attribut data-theme="a" avec l’attribut data-theme="b"

Vous pouvez personnaliser votre thème avec ThemeRoller : https://themeroller.jquerymobile.com/.


https://themeroller.jquerymobile.com/

https://themeroller.jquerymobile.com/


Annexe 1 : Le langage JavaScript

Présentation

JavaScript (qui est souvent abrégé en « JS ») est un langage de script léger, orienté objet, princi-palement connu comme le langage de script des pages web. Mais il est aussi utilisé dans de nombreuxenvironnements extérieurs aux navigateurs web tels que Node.js. Le code JavaScript est interprété oucompilé à la volée (JIT).

JavaScript ne doit pas être confondu avec le langage de programmation Java.

Le standard pour JavaScript est ECMAScript.

JavaScript a été créé en 1995 par Brendan Eich. Il a été standardisé sous le nom d’ECMAScript en juin1997 par Ecma International dans le standard ECMA-262. JavaScript n’est depuis qu’une implémentation

d’ECMAScript, celle mise en ½uvre par la fondation Mozilla. L’implémentation d’ECMAScript par Microsoft(dans Internet Explorer jusqu’à sa version 9) se nomme JScript, tandis que celle d’Adobe Systems se nommeActionScript.

C’est un langage à objets utilisant le concept de prototype (une POO sans classe, fondée sur lanotion de prototype qui est un objet à partir duquel on crée de nouveaux objets) :

• Tous les objets sont des instances ;• On définit et on crée un ensemble d’objets avec des fonctions qui sont des constructeurs ;• On crée un seul objet grâce à l’opérateur new ;• Le constructeur ou le prototype définit un ensemble de propriétés initiales. Il est possible d’ajouter

ou de retirer des propriétés dynamiquement.

Les classes JavaScript ont été introduites avec ECMAScript 2015 : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes.

Ressources :• Site officiel : https://developer.mozilla.org/fr/docs/Web/JavaScript• Standard ECMA-262 : www.ecma-international.org• Node.js : https://nodejs.org/en/• https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets• https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_modèle_objet_JavaScript_

en_détails• Cours JavaScript : http://tvaira.free.fr/web/cours-javascript.pdf et http://tvaira.free.

fr/web/

Le langage JavaScript est un des langages les plus populaires actuellement :


https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes

https://developer.mozilla.org/fr/docs/Web/JavaScript

https://www.ecma-international.org/publications/standards/Ecma-262.htm

https://nodejs.org/en/

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Utiliser_les_objets

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_mod�le_objet_JavaScript_en_d�tails

https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Le_mod�le_objet_JavaScript_en_d�tails

http://tvaira.free.fr/web/cours-javascript.pdf

http://tvaira.free.fr/web/

http://tvaira.free.fr/web/

jQuery Mobile Le typage TP Web

Le typage

Tous les langages de programmation permettent de manipuler des valeurs avec des variables.Le typage d’une variable consiste à associer à son nom un « type » de donnée.Pour rappel, le « type » est la convention d’interprétation (codage) de la séquence de bits qui constitue

la variable. Le type de la variable spécifie aussi la longueur de cette séquence (8 bits, 32 bits, 64 bits, ...).Suivant les langages de programmation, il existe plusieurs manières de considérer le typage :— Typage statique : il consiste à demander au programmeur de déclarer expressément chaque

variable en indiquant son type. Exemples de langage à typage statique : C, C++, Java, C#— Typage dynamique : il consiste à laisser l’interpréteur réaliser cette opération de typage « à la

volée » lors de l’exécution du code. C’est la valeur affectée à la variable qui précisera son type.Exemples de langage à typage dynamique : PHP, Perl, Python, Javascript, bash (shell Linux)

— Typage fort : Un langage de programmation est dit fortement typé lorsqu’il garantit que lestypes de données employés décrivent correctement les données manipulées. Exemples de langagefortement typé : C++, Java, C#, Python

— Typage faible : Un langage de programmation est dit faiblement typé lorsqu’il ne considèrepas comme une erreur les changements de types. Exemples de langage faiblement typé : PHP,Javascript, C (car il accepte les transtypages implicites comme par exemple int vers short)

Le langage JavaScript est doté d’un typage dynamique faible.� �var a = 1; // un nombrevar b = 2.5; // un nombrevar c = "hello"; // une chaine de caracteresvar d; // undefined


jQuery Mobile La syntaxe TP Web

console.log(typeof a);console.log(typeof b);console.log(typeof c);console.log(typeof d);

d = a; // un nombre

console.log(a);console.log(b);console.log(c);console.log(d);

var x = "5"; // une chaine de caracteresvar y = 1+ y; // un nombreconsole.log(typeof x);console.log(typeof y);

console.log(y); // NaN (Not a Number)� �Exemple d’utilisation des types en Javascript

Le code JavaScript a besoin d’un objet global pour y rattacher les déclarations (variables et fonctions)avant d’exécuter des instructions. La situation la plus connue est celle de l’objet window obtenu dans lecontexte d’une page web. Du code JavaScript peut être intégré directement au sein des pages web (avecles balises <script></script>, pour y être exécuté sur le poste client. C’est alors le navigateur web quiprend en charge l’exécution de ces programmes appelés scripts.� �

<!DOCTYPE html><html dir="ltr" lang="fr">

<head><meta charset="utf8" /><script>

alert('Hello world!');</script></head><body></body>

</html>� �Du code JavaScript intégré directement dans une page web

JavaScript peut également être utilisé comme langage de programmation sur un serveur HTTPà l’image des langages comme PHP. Il existe par ailleurs des projets indépendants et Open Sourced’implémentation de serveurs en JavaScript. Parmi eux, on pourra distinguer Node.js, une plateformepolyvalente de développement d’applications réseau.

La syntaxe

Le langage JavaScript utilise une syntaxe très proche de celle utilisée en C/C++.En C, chaque instruction se termine par un point-virgule (;). JavaScript est plus souple, permettant à

une fin de ligne de marquer implicitement la fin d’une instruction. Cet usage est déconseillé.



Annexe 2 : Le framework jQuery

Présentation

jQuery est une bibliothèque JavaScript libre et multiplateforme créée pour faciliter l’écriture descripts côté client dans le code HTML des pages web.

Elle contient de nombreuses fonctionnalités : notamment des animations, l’accès et la manipulationdu DOM (Document Object Model), la manipulation des feuilles de style en cascade (CSS), la gestion desévènements, etc. L’utilisation d’Ajax est facilitée et de nombreux plugins sont présents.

jQuery a connu un large succès auprès des développeurs Web et son apprentissage est aujourd’hui un desfondamentaux de la formation aux technologies du Web. Il est à l’heure actuelle la bibliothèque front-end

la plus utilisée au monde (plus de la moitié des sites Internet en ligne intègrent jQuery). Voir aussi : React (aussiappelé React.js ou ReactJS) et Vue.js.

jQuery se présente comme un unique fichier JavaScript contenant toutes les fonctions de base.Il peut être inclus dans une page web de plusieurs façons :• en téléchargeant le fichier source à partir du site officiel jquery.com :� �

<script src="/chemin/vers/jQuery.js"></script>� �• parmi les CDN (Content Delivery Networks) proposés, par exemple :� �

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>� �Tous les appels jQuery sont faits dans une seule fonction anonyme (sans nom !) :� �$(function() {

// le code jQuery ...});

// ou :

$(document).ready(function() {// le code jQuery ...

});� �jQuery permet d’accèder aux éléments du DOM. Plusieurs types de sélecteurs sont prévus. Par exemple

il est possible de sélectionner :• à partir de l’attribut id d’un élément HTML :� �

$('#idElement')� �• à partir du type d’élément :� �

$('p')� �• à partir d’une classe CSS :� �

$('.uneClasse')� �Quelques exemples :


jquery.com

jQuery Mobile Autres : jQuery UI, DataTables et jQuery Mobile TP Web

� �// écrire un message dans une balise <p id='exemple'> :$('#exemple').html('Un message');

// cacher la balise <p id='exemple'> :$('#exemple').hide();

// afficher la balise <p id='exemple'> :$('#exemple').show();

// exécuter un code lorsqu'on clique sur la balise <p id='exemple'> :$("#exemple").click(function() {

// Le code à exécuter ...});

// modifier les attributs d'une balise <p class='paragraphe'> :$('.paragraphe').css('background','black');$('.paragraphe').css('color','white');

// récupérer un attribut d'une balise :var lien = $('a').attr('href');alert(lien);� �

Autres : jQuery UI, DataTables et jQuery Mobile

jQuery UI est une collection de widgets, effets visuels et thèmes implémentés avec jQuery, des feuillesde style en cascade, et du HTML.

jQuery UI permet le glisser-déposer (drag & drop), le redimensionnement, la sélection, et le classement(tri).

Les widgets fournis par jQuery UI :— Accordion : conteneur en accordéon— Autocomplete : boite d’auto-complétion basée sur les entrées de l’utilisateur— Button : apparence des boutons améliorée, transforme les boutons radio et cases à cocher en

boutons poussoirs— Datepicker : sélecteur de date avancé— Dialog : boite de dialogue— Menu : affichage d’un menu— Progressbar : barre de progression animables— Selectmenu— Slider— Spinner : bouton fléché— Tabs : onglet— Tooltip : infobulle

Les effets visuels fournis par jQuery UI :— Color Animation : animation de la transition d’une couleur à une autre— Toggle Class, Add Class, Remove Class, Switch Class : animation de la transition d’un style

à une autre— Effect : variété d’effets (apparition, diapositive, explosion, fondu, etc.)— Toggle : activation ou désactivation des effets— Hide, Show : affichage ou masquage des effets


jQuery Mobile Autres : jQuery UI, DataTables et jQuery Mobile TP Web

DataTables est un plugin jQuery open-source permettant de dynamiser un tableau HTML. Cettebibliothèque écrite en Javascript offre un grand nombre de configurations pour améliorer l’ergonomie desgrilles de données, surtout lorsqu’elles ont des proportions imposantes.

JQuery Mobile est un framework d’interface optimisé pour les appareils mobiles tactiles. Son objectifest de permettre de rapidement développer des applications mobiles. Il est développé par l’équipe duprojet JQuery.

Aller plus loin : on peut ensuite faire une application hybride, c’est-à-dire encapsuler l’applicationweb dans une application native :

— avec Apache Cordova (ou seulement Cordova) : https://cordova.apache.org/ (cf. http://tvaira.free.fr/dev/android/cordova.html)

— avec Adobe PhoneGap (ou seulement PhoneGap) est un framework destiné à faciliter la créationd’applications mobiles pour différentes plateformes (Android, iOS, Windows Phone) : https://www.phonegap.com/

— avec un WebView dans une application Android : http://tvaira.free.fr/dev/android/android-hybride.html


https://cordova.apache.org/

http://tvaira.free.fr/dev/android/cordova.html

http://tvaira.free.fr/dev/android/cordova.html

https://www.phonegap.com/

https://www.phonegap.com/

http://tvaira.free.fr/dev/android/android-hybride.html

http://tvaira.free.fr/dev/android/android-hybride.html


Annexe 3 : Viewport et Responsive Web Design

Le Viewport désigne la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur unappareil mobile est différente de celle sur un écran d’ordinateur : sur mobile, le navigateur ne dispose pasde « fenêtre » réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.

La surface physique correspond au nombre physique de pixels qui composent la matrice de l’écran,telle que le constructeur le décrit dans les caractéristiques (« résolution « ou plutôt la définition).

Il existe aussi la surface utilisable (en "pixels CSS"), également appelée device-width, qui corres-pond au nombre de pixels virtuels que le terminal pense avoir et sur lequel il fonde son affichage.

La surface utilisable ne correspond pas toujours à la surface physique, notamment pour les mobiles dits"retina" ou haute définition. Un "pixel CSS" n’est donc pas égal à un pixel physique.

Liens : https://www.mydevice.io/ ou http://screensiz.es

Par défaut la taille du viewport d’un terminal mobile ne correspond ni à la taille de son écran réelle nià celle en "pixels CSS". Elle est généralement supérieure à la surface physique, afin de pouvoir y affecterun niveau de (dé)zoom.

La valeur initiale du viewport ne dépend pas du terminal mais du navigateur mobile (et peut parfois mêmeêtre modifiable par l’utilisateur dans ses réglages).

Pour s’affranchir de ce zoom, il est possible de modifier et d’imposer la taille de la surface du viewportd’un périphérique mobile à l’aide d’un élément <meta>.

Les différentes valeurs de cet élément meta et de son attribut content offrent la possibilité de fixer lalargeur de viewport à la valeur souhaitée, voire de l’adapter automatiquement à la valeur de device-widthdu terminal.� �

<meta name="viewport" content="width=device-width, initial-scale=1.0">� �Responsive Web Design (conception de sites web adaptatifs) est une conception web qui vise, grâce à

différents principes et techniques, à offrir une consultation adaptée sur des écrans de tailles très différentes.[https://fr.wikipedia.org/wiki/Site_web_adaptatif]


https://www.mydevice.io/

http://screensiz.es

https://fr.wikipedia.org/wiki/Site_web_adaptatif

tp web : jquery mobiletvaira.free.fr/web/tp-jquery-mobile.pdf · 2019-11-20 · jquery mobile...

Documents