Aller au contenu

Découvrez les Méthodes JavaScript à utiliser pour vos sites sur smartphones et tablettes

Dans ce nouveau cours sur le developpement de site pour mobile, vous allez aborder la partie JavaScript avec notamment la gestion de l’orientation de l’écran grâce aux événements.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Découvrez les Méthodes JavaScript à utiliser pour vos sites sur smartphones et tablettes

Bonjour à tous et bienvenu sur Développement Facile.

Ici Matthieu expert en développement applicatif, ensemble on continue les cours dédiés à la création de sites internet pour les Smartphones, les tablettes et les ordinateurs de bureau, là c’est la partie JavaScript, dans les parties précédentes vous avez vu la partie HTML 5, la partie CSS 3 et maintenant c’est la partie JavaScript donc vous allez voir les méthodes utiles qui vont vous être très utiles pour la création de site mobile avec JavaScript.

Les méthodes JavaScript utiles

Alors déjà vous avez window.orientation donc ça va vous permettre de récupérer l’orientation du navigateur, est-ce que le périphérique, tablette ou smartphone, est en mode paysage ou en mode portrait, vous avez trois valeurs possibles, c’est à dire vous récupérer un entier, vous faites var votre variable = window.orientation donc zéro c’est le mode portrait par défaut, ensuite -90 c’est une orientation de 90° dans le sens des aiguilles d’une montre et 90° c’est une orientation dans le sens contraire des aiguilles d’une montre, dans les deux cas c’est mode paysage, droite ou mode paysage gauche et il existe un événement qui est associé à cette orientation c’est orientation change, vous écoutez cet événement orientation change et dès que l’utilisateur passe en mode portrait ou paysage vous recevez un événement et vous pouvez faire la mise à jour, de la largeur de l’affichage de votre application de votre site Web.

Alors vous avez l’attribue window.deviceOrientationEvent qui permet de connaître l’inclinaison, la rotation et l’orientation du périphérique, comme pour l’autre précédemment, cet attribut est associé à un écouteur, deviceOrientation et cet écouteur, c’est un événement qui envoie un événement, un objet à un écouteur et ça permet de lancer en gros une fonction JavaScript lorsque le périphérique change l’un de ses éléments. Vous avez Alpha, c’est la direction en degrés vers laquelle l’appareil est dirigé par rapport à sa boussole, c’est l’orientation, on parle d’orientation, beta c’est l’angle en degrés vers lequel l’appareil est penché sur un axe devant, derrière, on parle d’inclinaison, d’un côté vous avez l’orientation par rapport à sa boussole en degrés, l’inclinaison devant, derrière et gamma c’est l’angle en degrés vers lequel l’appareil est penché sur un axe gauche, droite donc on parle de rotation alors gauche droite.

Pour ensuite vous avez l’objet windowDeviceMotionEvent qui est également associé à un événement deviceMotion, et là ça permet de récupérer l’accélération de l’appareil sur trois axes, quand l’utilisateur fait ça avec sa tablette ou son Smartphone, c’est là ou vous détectez la fonction annulation donc ça permet de détecter l’accélération sur trois axes de l’appareil, l’accélération c’est les données de l’accélération ne prenant pas en compte l’effet de gravité et vous avez accelerationIncluningGravity donc cette propriété-là qui vous donne les données de l’accélération avec l’effet de gravité incluse.

Voir les exemples JavaScript

Alors pour que ce soit plus parlant pour vous, on va voir ensemble un exemple de code source donc vous aurez un exemple de code source pour connaître l’inclinaison, la rotation et l’orientation du périphérique donc inclinaison, orientation, rotation, orientation et vous aurez un exemple de code source pour connaître l’accélération du périphérique, également, on voit tout de suite un exemple de code.

Alors voici l’exemple de code source donc comme d’habitude vous incluez le fichier javascript donc vous incluez un fichier javascript, ça permet la mise en cache dans le navigateur toujours pareil vous incluez afficher CSS pour utiliser la mise en cache du navigateur, la balise wiew port qui permet de gérer l’affichage sur un périphérique mobile comme une tablette ou un smartphone et donc vous avez le javascript qui est chargé, donc on écoute deux événements, au chargement du DOM et si l’utilisateur change l’orientation du périphérique, passer de paysage en mode vertical et on a la gestion de l’accélération comme je vous ai dit, on écoute, on récupère cette propriété si l’accélération est supportée, on écoute cet événement là et on appelle la fonction get accélération qui est ici, sinon on indique dans la console de debug que device Motion n’est pas supporté par ce navigateur, même principe pour l’orientation du périphérique de la tablette, du smartphone, on test la propriété window, on affiche un message dans la console comme quoi elle est supportée et on utilise, on appelle deux fonctions donc on écoute, on appelle deux fonctions ici et ici, on s’abonne à un événement pour appeler cette fonction on se réabonne à ce même événement pour appeler une autre fonction c’est-à-dire quand cet événement est déclenché par JavaScript il va appeler ces deux fonctions tout simplement, donc ça, ça permet de connaître l’orientation donc c’est appelé directement au chargement du DOM, lorsque l’utilisateur change l’orientation du périphérique, de la tablette ou du smartphone et donc on récupère window.orientation par défaut c’est indéfini et après en fonction de la valeur récupérée, mode portrait, paysage à gauche ou paysage à droite et on fait un innerhtml pour l’afficher dans le navigateur de l’utilisateur. Là c’est device orientation si on regarde c’est lorsque l’utilisateur, en cas d’changement d’orientation du périphérique et donc on indique l’orientation du périphérique sur l’axe des S, l’axe des X et l’axe des Y, tout simplement, c’est une fonction qui permet de dire toujours sur même événement, donc suffit de regarder à chaque fois que cet événement vivace orientation est diffusé par JavaScript et bien on va dire à l’utilisateur si il se rapproche du nord ou pas, c’est une mini application pour indiquer si l’utilisateur est orienté vers le nord, c’est comme une petite boussole en fait ça je vais rajouter là comme une boussole tout simplement, voilà, c’est rajouté, donc ça indique en fonction de la valeur de l’angle en z alpha, direction du nord tournez à gauche ou tournez à droite et donc là c’est l’accélération donc get accélération, on écoute l’événement device mention, tout simplement et on affiche les valeurs d’accélération donc la quand la gravité est incluse dedans donc sur l’axe des Z, l’axe des  et l’axe des Y, on indique tout ça à l’utilisateur. Il faut savoir que pour mes tests comme vous le voyez je suis sur un navigateur de bureau, donc il n’y aura pas d’affichage des différentes valeurs, bien que l’événement est supporté il n’est pas appelé avec firefox en tout cas sur un ordinateur mac, sur le mac MacBook il n’est pas appelé et il indique qu’il est supporté mais il n’est pas appelé tout simplement.

Voilà donc c’est vraiment très simple à mettre en œuvre avec JavaScript, si vous avez compris comment utiliser les éléments, vous abonner à des événements pour appeler des fonctions, vous avez tout compris après il suffit juste d’utiliser les bonnes propriétés de l’objet window, les bonnes propriétés de l’objet diffusé par l’événement à chaque fois un objet est diffusé par l’événement donc que ce soit device motion, device orientation, il y a un objet event que j’ai appelé event qui a différentes propriétés pour récupérer les valeurs que vous cherchez à obtenir, c’est aussi simple que ça.

Votre plan d’actions !

A votre tour d’utiliser ces méthodes JavaScript supplémentaires pour vos sites mobiles, ça va vous permettre de mettre des interactions supplémentaires avec l’utilisateur, que ce soit au niveau de l’accélération, de la rotation, de l’inclinaison et de l’orientation de la tablette ou du smartphone vous pouvez mettre en œuvre des éléments très interactifs avec vos utilisateurs, donc à travers les exemples de codes sources, vous avez vu que si l’utilisateur utilise un ordinateur de bureau vous savez détecter justement qu’il n’y a pas option d’inclinaison d’orientation, vous pouvez lancer d’autres événements, d’autres fonctionnalités, comme d’habitude si vous avez des questions posez les directement sous ce cours vidéo.

Maintenant je vous invite, là juste au-dessus de moi il y a une image cliquer ici pour lancer la deuxième vidéo et dans la deuxième vidéo vous allez à apprendre à utiliser toutes ces fonctionnalités dans le détail à travers des cas très concrets. Posez toutes vos questions je vous répondrai avec un exemple de code source détaillé, vous allez tout savoir sur javascript, les événements, la programmation orientée objet, les modèles de conceptions, on se retrouve dans la deuxième vidéo pour cela il suffit de cliquer sur le lien là juste au-dessus de moi je vous explique tout ça dans la deuxième vidéo à tout de suite.

[/ppmtoggle][/ppmaccordion]

Exemple de site mobile avec du JavaScript

Retrouvez le code source commenté de l’exemple vue dans la vidéo.

Téléchargement du code source Méthodes JavaScript pour site Mobile

Cliquez ici pour télécharger le code source Méthodes JavaScript pour site Mobile

Posez toutes vos questions sur le code JavaScript

Utilisez la zone commentaire ci-dessous pour poser vos questions sur le JavaScript et les sites mobiles

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>