La suite du cours précédent sur les methodes JavaScript que vous devez absolument connaître pour développer un site optimiser pour les smartphones et les tablettes.
Dans ce nouveau cours découvrez comment détecter le touché de l’utilisateur sur l’écran tactile.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Les Méthodes JavaScript à utiliser pour vos sites sur smartphones et tablettes partie 2
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo c’est la suite du cours précédent ou vous allez découvrir toutes les méthodes JavaScript que vous pouvez utiliser pour créer des sites très interactifs, des sites mobiles pour les Smartphones et les tablettes, très interactifs avec vos utilisateurs. C’est parti pour découvrir toutes ces méthodes spécifiques.
Les méthodes JavaScript utiles
Bien évidemment vous avez toutes les méthodes tactiles c’est ontouchstart, c’est lorsque l’utilisateur commence à toucher, un événement, ontouchmouve c’est lorsque l’utilisateur bouge sont doigt sur l’élément, ontouchend c’est lorsque l’utilisateur termine de toucher l’élément et ontouchecancel c’est lorsque l’utilisateur annule l’événement tactile soit par un autre événement, soit un autre élément dans l’application qui effectue une annulation, donc vous pouvez écouter tous ces événements en JavaScript et en fonction des actions de l’utilisateur, des actions que vous souhaitez mettre en place dans votre application, vous les utilisez. Vous pouvez directement les utiliser dans les balises HTML comme le onclic, vous connaissez onclic, c’est un bouton ou dès que l’utilisateur clique sur cette balise HTML, ça fait quelque chose, c’est les éléments ontouchstart, ontouchmove, ontouchcancel, vous pouvez les utiliser exactement de la même manière.
Chaque événement peut appeler une fonction JavaScript avec un paramètre objet event qui contient deux attributs, donc deux propriétés, pageX c’est l’emplacement du doigt par rapport à la gauche de l’écran et pageY c’est l’emplacement du doigt par rapport au haut de l’écran, donc ici vous avez le point (0, 0) et là vous aurez les coordonnées X et Y de votre point, si c’est ici tac tac tac, ça va vous permettre de savoir exactement où l’utilisateur appuie sur votre écran et effectuer les interactions nécessaires sur votre application.
Vous avez également des éléments liés aux gestes de l’utilisateur, ongesturestart c’est lorsque l’utilisateur commence à utiliser deux doigts sur l’appareil, ongesturechange c’est appelé lorsque l’utilisateur bouge deux doigts pour effectuer une action d’agrandissement/réduction ou de rotation sur les IPhones, rotation d’une image ou agrandir/réduire le zoom sur un élément.
ongestureend c’est appelé lorsque l’utilisateur enlève un ou plusieurs doigts de l’appareil, il avait deux doigts, il en enlève un ou il enlève les deux, pareil, c’est des événements qui appellent des fonctions JavaScript si vous les écoutez, qui vous transmettent l’objet event avec deux paramètres: rotation donc ça détermine la rotation effectuée par l’utilisateur dans le cas où l’utilisateur bouge une image et scale c’est pour la fonction de zoom/dézoom, donc vous pouvez reproduire exactement les mêmes fonctionnalités que sur un iPhone grâce à ces événements-là.
Vous avez également JavaScript qui apporte une nouvelle fonction à chaque champ input c’est setCustomValidity, ça va s’avérer très pratique, en fait ça va vous permettre d’améliorer l’expérience de l’utilisateur pour une validation plus pratique, plus intuitive, plus rapide des formulaires.
Voir les exemples JavaScript
On va voir tout ça dans un exemple de code source, ce sera beaucoup plus parlant pour vous déjà vous allez voir un exemple de code source en utilisant la gestion des événements tactiles de l’utilisateur et également vous verrez un code source pour la validation avec setCustomValidity d’un formulaire, c’est partit.
Pour utiliser les fonctions tactiles et la validation d’un formulaire grâce à des propriétés HTML 5, comme d’habitude le fichier JavaScript qui contiendra tout le code, le fichier ici CSS et la balise viewport pour indiquer les caractéristiques de l’affichage sur une tablette et sur un Smartphone. Le fichier CSS ne change pas, toujours le même, par contre le fichier JavaScript donc comme d’habitude on écoute l’événement une fois que le DOM est chargé, on va appeler la fonction init et donc la on test est ce que l’événement touchstart existe dans le DOM, si oui on s’abonne, on appelle detect, on est sur un périphérique mobile comme une tablette ou un Smartphone, sinon réutiliser l’événement mousedown, dès que l’utilisateur appui sur le bouton gauche de sa souris, on va appeler la fonction detect, et donc dans la fonction detect, en fonction de l’événement, vous avez deux solutions, vous pouvez appeler une fonction différente sur l’événement touchstart et mousedown, vous avez pas besoin de faire ce test du coup, tout en sachant que c’est la même chose on change juste le message ici, vous utilisez un écran tactile ou un écran non tactile sinon c’est les mêmes propriétés de l’objet event, ou alors vous faites comme moi vous appelez la même fonction event et vous faites le même test si ontouchstart existe dans le document, dans l’objet document, tout simplement, vous récupérez les coordonnées de la souris et vous l’affichez via un innerHTML, donc ça c’est pour tester par exemple où l’utilisateur clique dans votre application avec la souris ou avec le doigt, où il effectue un geste tactile, où il appuie à quelle position de l’écran, l’utilisateur appuie avec son doigt donc là vous avez la notion de vérification du mot de passe, donc avec setcustomValidity ça permet de vérifier en temps réel le mot de passe, dans votre page HTML vous avez ici, à chaque fois que l’utilisateur renseigne un mot de passe sur un input on appelle la fonction JavaScript verifpassword, automatiquement on va récupérer les deux id des deux champs pour vérifier si les mots de passe sont identiques donc c’est aussi simple que ça, on test la valeur et les deux mot de passe ne sont pas identiques donc on va afficher une erreur, voilà, on l’indique, et sinon on indique rien, donc le formulaire peut être validé c’est aussi simple que ça, donc qu’est-ce que ça donne ?
Ici essayez de changer la position de votre doigt de cliquer, si je clique la ça récupère les coordonnées on est pas loin (0, 0) ici, là on est sur la page donc vous voyez les coordonnées qui sont affichées, le mot de passe vérifié en temps réel, donc les deux mot de passe sont différents et là je valide les deux mot de passe ne sont pas identiques, donc je mets deux mot de passe identiques, voilà les deux mot de passe sont identiques, donc c’est aussi simple que ça, c’est vraiment très pratique cette fonction setCustomValidity pour vérifier les mots de passe, c’est très pratique, ça bloque la validation d’un formulaire, tout simplement en affichant le message d’erreur maintenant donc vous avez vu, franchement c’est JavaScript, c’est une fois que vous avez appris les bonnes pratiques, la bonne façon d’utiliser les événements, les méthodes, les objets, les propriétés JavaScript, vous allez faire énormément de choses.
Votre plan d’actions !
Maintenant c’est à vous de jouer utilisez toutes ces possibilités avec JavaScript, des événements tactiles, la validation des formulaires plus rapides, c’est vraiment à vous de jouer, si vous avez des questions posez les directement sous ce cours vidéo, comme d’habitude vous retrouverez le code source de ce cours en téléchargement sous cette vidéo, maintenant je vous invite à cliquer sur le lien, sur l’image cliquer ici pour lancer la deuxième vidéo, là juste là, dans la deuxième vidéo vous allez aller beaucoup plus loin avec JavaScript pour faire de vous un expert en développement, vous allez apprendre à utiliser la puissance du langage objet, à maîtriser les designs patterns dans vos applications pour créer deux à trois fois plus rapidement des applications performantes, tout ça c’est dans la deuxième vidéo, vous pourrez même interagir avec moi à travers des sessions de questions-réponses ou je vous répondrais avec des exemples de code source détaillés en fonction de vos problèmes spécifiques dans vos applications, donc cliquez simplement sur le lien, sur cette image lancer la deuxième vidéo, je vous retrouve tout de suite pour tout vous expliquer dans la deuxième vidéo à tout de suite.
[/ppmtoggle] [/ppmaccordion]
Télécharger l’exemple de la vidéo
Retrouvez le code source commenté de l’exemple vue dans la vidéo
Téléchargement du code source Méthodes JavaScript Mobiles
