- French
- ePUB (adapté aux mobiles)
- Disponible sur iOS et Android
eBook - ePub
HTML5, CSS3, JavaScript Tome 3
À propos de ce livre
Cet eBook fait partie d'une série sur la programmation HTML5, CSS3 et JavaScript.Dans ce troisième tome, l'accent est mis sur les langages CSS3 et JavaScript. Vous y apprendrez entre autres à dessiner dans un canvas, à mettre en forme les éléments affichés dans une page, à tester la validité d'une adresse e-mail entrée par un utilisateur et beaucoup d'autres sujets tout aussi intéressants.Si vous n'avez que très peu de connaissances en programmation HTML/CSS/JavaScript, je vous rassure tout de suite, cet eBook est tout à fait adapté à votre profil. Il est cependant conseillé de lire les deux tomes précédents si vous faites vos premiers pas en programmation Web.
Foire aux questions
Oui, vous pouvez résilier à tout moment à partir de l'onglet Abonnement dans les paramètres de votre compte sur le site Web de Perlego. Votre abonnement restera actif jusqu'à la fin de votre période de facturation actuelle. Découvrez comment résilier votre abonnement.
Pour le moment, tous nos livres en format ePub adaptés aux mobiles peuvent être téléchargés via l'application. La plupart de nos PDF sont également disponibles en téléchargement et les autres seront téléchargeables très prochainement. Découvrez-en plus ici.
Perlego propose deux forfaits: Essentiel et Intégral
- Essentiel est idéal pour les apprenants et professionnels qui aiment explorer un large éventail de sujets. Accédez à la Bibliothèque Essentielle avec plus de 800 000 titres fiables et best-sellers en business, développement personnel et sciences humaines. Comprend un temps de lecture illimité et une voix standard pour la fonction Écouter.
- Intégral: Parfait pour les apprenants avancés et les chercheurs qui ont besoin d’un accès complet et sans restriction. Débloquez plus de 1,4 million de livres dans des centaines de sujets, y compris des titres académiques et spécialisés. Le forfait Intégral inclut également des fonctionnalités avancées comme la fonctionnalité Écouter Premium et Research Assistant.
Nous sommes un service d'abonnement à des ouvrages universitaires en ligne, où vous pouvez accéder à toute une bibliothèque pour un prix inférieur à celui d'un seul livre par mois. Avec plus d'un million de livres sur plus de 1 000 sujets, nous avons ce qu'il vous faut ! Découvrez-en plus ici.
Recherchez le symbole Écouter sur votre prochain livre pour voir si vous pouvez l'écouter. L'outil Écouter lit le texte à haute voix pour vous, en surlignant le passage qui est en cours de lecture. Vous pouvez le mettre sur pause, l'accélérer ou le ralentir. Découvrez-en plus ici.
Oui ! Vous pouvez utiliser l’application Perlego sur appareils iOS et Android pour lire à tout moment, n’importe où — même hors ligne. Parfait pour les trajets ou quand vous êtes en déplacement.
Veuillez noter que nous ne pouvons pas prendre en charge les appareils fonctionnant sous iOS 13 ou Android 7 ou versions antérieures. En savoir plus sur l’utilisation de l’application.
Veuillez noter que nous ne pouvons pas prendre en charge les appareils fonctionnant sous iOS 13 ou Android 7 ou versions antérieures. En savoir plus sur l’utilisation de l’application.
Oui, vous pouvez accéder à HTML5, CSS3, JavaScript Tome 3 par Michel Martin en format PDF et/ou ePUB ainsi qu'à d'autres livres populaires dans Informatique et Programmation en JavaScript. Nous disposons de plus d'un million d'ouvrages à découvrir dans notre catalogue.
Informations
Sujet
InformatiqueJavaScript - Canvas
Les bases de HTML5 Canvas
La balise <canvas> est une des grandes nouveautés du langage HTML 5. Par son intermédiaire, et grâce à quelques instructions JavaScript, vous pourrez dessiner des formes simples ou complexes en 2D ou en 3D.
Pour définir une balise <canvas>, il n’y a rien de plus simple. Ici par exemple, l’identifiant monCanvas est affecté à la balise <canvas> et ses dimensions sont fixées à 300 pixels sur 300. Remarquez le texte entre les balises <canvas> et </canvas>. Il s’affichera si le navigateur utilisé n’est pas compatible avec la balise <canvas>. La propriété CSS background-color fixe la couleur d’arrière-plan.
Voici à quoi ressemble ce code lorsqu’il est interprété dans Internet Explorer 9 :
Pour pouvoir travailler avec la balise <canvas>, il va falloir utiliser quelques lignes de JavaScript. Le but de ces instructions : récupérer le contexte du canevas afin de pouvoir lui adresser des instructions. Voici le code utilisé :
Le contexte du canevas est récupéré par la fonction JavaScript initialisation(). Dans un premier temps, on définit la variable el et on lui affecte l’élément canvas mis en place dans le code HTML5. Cette affectation se fait via la fonction getElementById() à laquelle on transmet l’identifiant de l’élément : monCanvas.
La deuxième instruction récupère le contexte 2D du canvas et le stocke dans la variable ctxt. C’est par l’intermédiaire de cette variable que nous allons pouvoir dessiner dans le canevas. La prochaine rubrique vous montrera comment procéder.
Un rectangle dans un canvas
Cette rubrique s’appuie sur la précédente. Elle va vous montrer comment tracer des rectangles dans un canevas.
Voici le code utilisé :
Le canevas mis en place est le même que dans la rubrique précédente. Pour y afficher un rectangle, nous avons inséré un bouton à l’aide d’un formulaire. Ce bouton exécute la fonction JavaScript rectangle() lorsqu’il est pressé.
Examinons cette fonction.
Les deux premières instructions de la fonction rectangle() vous sont familières. Elles récupèrent le contexte du canevas. Pour afficher un rectangle plein, on commence par définir sa couleur de remplissage en initialisant la propriété fillStyle du contexte. Ensuite, il suffit d’exécuter la fonction fillRect() à laquelle on transmet les coordonnées de l’angle supérieur gauche du rectangle, ainsi que la largeur et la hauteur du rectangle. Ici, le rectangle sera affiché à 10 pixels du bord gauche et à 40 pixels du bord supérieur du canevas. Il aura une largeur de 130 pixels et une hauteur de 60 pixels.
Voici le résultat :
Un cercle dans un canvas
Dans cette rubrique, vous allez apprendre à tracer des cercl...
Table des matières
- Page de titre
- INTRODUCTION
- HTML 5
- CSS 3 - Sélection
- CSS 3 - Mise en page
- CSS 3 - Mise en forme
- CSS 3 - Raccourcir l’écriture
- CSS3 - Dessiner
- JavaScript - Techniques diverses
- JavaScript - Accès au DOM
- JavaScript - Canvas