JavaScript Tutoriels pour les débutant·e·s Nos modules principaux pour apprendre le développement web proposent des tutoriels modernes et à jour sur les bases de JavaScript. Votre premier site web : ajouter de l'interactivité Cet article propose une brève introduction à JavaScript et à son utilisation, destinée aux personnes totalement débutantes en développement web. Scripts dynamiques avec JavaScript Ce module se concentre sur l'essentiel du langage JavaScript, ainsi que sur quelques sujets clés autour : apprendre ces notions vous donnera une base solide. Frameworks et bibliothèques JavaScript Les frameworks JavaScript sont essentiels dans le développement web moderne côté client, fournissant des outils éprouvés pour créer des applications web interactives et évolutives. Guides JavaScript Guides fondamentaux du langage Guide JavaScript Un guide beaucoup plus détaillé du langage JavaScript, destiné à celles et ceux ayant déjà programmé en JavaScript ou dans un autre langage. Intermédiaire Closures Avancé
Grunt: The JavaScript Task Runner JavaScript Tutorial Référence JavaScript Pour une liste alphabétique, voir le volet de navigation situé à gauche sur cette page. Expressions primaires Les mots-clés basiques et les expressions générales en JavaScript. this Le mot-clé this fait référence à une propriété spéciale du contexte d'exécution de la fonction. function Le mot-clé function définit une expression de fonction. class Le mot-clé class définit une expression de classe. function* Le mot-clé function* définit une expression pour une fonction génératrice. yield Cet opérateur permet de suspendre et de reprendre l'exécution d'une fonction génératrice. yield* Cet opérateur permet de déléguer l'exécution de la fonction à une autre fonction ou un autre objet itérable. async function* L'opérateur async function définit une expression de fonction asynchrone. await Cet opérateur permet de stopper et de reprendre l'exécution d'une fonction asynchrone et d'attendre pour la résolution ou le rejet d'une promesse. Littéral initialisateur de tableau. Littéral initialisateur d'objet. /ab+c/i new in
CoffeeScript L'interactivité avec la balise HTML5 Canvas La balise <canvas> se comporte comme toute autre balise. Elle possède des attributs width, height et id. Le contenu de la balise correspond à un contenu alternatif pour les navigateurs ne la supportant pas. J'ai aussi défini une fonction à exécuter au chargement de la page et une balise <div> qui contiendra certaines informations, à savoir la quantité de mouvements effectués par l'élément. Le code JavaScript est un petit peu plus compliqué. var canvas, draw, width, height; var downcheck, upcheck, rightcheck, leftcheck; var up = 0;var down = 0;var left = 0;var right = 0; Ensuite, nous devrons créer une fonction init(), qui détermine ce qu'il faut faire au chargement de la page. function init() { canvas = document.getElementById('game'); height = canvas.height; width = canvas.width; draw = canvas.getContext('2d'); setInterval(redraw, 30); document.onkeydown = canvasMove; document.onkeyup = canvasStop; } Ensuite, nous devons ajouter une fonctionnalité pour déplacer le carré. Et voilà !
JavaScript Éloquent : Une introduction moderne à la programmation total.js - Web application framework for node.js Creating an HTML5 Canvas Painting Application Table of contents Introduction My previous HTML5 Canvas tutorial provided you with insight into the numerous use cases for Canvas in web applications. In this article we will explore how you can write your own Canvas-based painting application. Making a web application that allows users to draw on a Canvas requires several important steps: setting up your HTML document with a Canvas context (a <canvas> element with an id), setting up your script to target that Canvas context and draw inside it and adding the required mouse event handlers for user interaction and associated logic. Once the event handlers are in place, it’s then fairly simple to add any desired functionality. The final painting application example looks like this: To make it easier to follow along with the code walkthrough presented below, you can download the full code example and follow along with it as you read the article. Getting started with the HTML We shall begin with a minimal HTML document: Canvas interaction Rectangle