Développement Web : 'Zone Grand Débutant' IV-A. Introduction▲ Les trois notions fondamentales : Le fichier est au format JavaScript ; Le document (ou programme) est à destination de l'internaute ; L'outil est un navigateur Web. Le code JavaScript est interprété par le navigateur Web (s'il n'est pas trop préhistorique et si sa configuration ne l'a pas désactivé). Je viens déjà de vous présenter un inconvénient de JS : il peut être désactivé. Incruster du code JS dans une page Web permet à la page de réagir aux actions de l'internaute, par exemple "la souris survole tel bouton" ou encore "le formulaire vient d'être envoyé". ActionScript 3, la dernière version du langage de script pour Flash, utilise une syntaxe quasiment identique à celle de JavaScript. IV-B. Pour développer en JavaScript, il est recommandé d'avoir un éditeur de code plus puissant que ceux recommandés au début de cet article (avoir la documentation du langage à portée de main commence à devenir une condition importante). IV-C. Sélectionnez IV-D. IV-D-1. IV-D-2.
Club des développeurs Ruby et Ruby on Rails : actualités, cours, tutoriels, programmation, codes sources, livres, outils et forums Flexbox, guide complet Le module Flexbox Layout fournit une façon plus efficace de disposer, aligner et distribuer l'espace entre les éléments de votre page. 4 riches articles de Chris Coyier sont réunis ici. Par Chris Coyier NdT : Ce tutoriel est la réunion de quatre articles de Chris Coyier formant une introduction à Flexbox. Vous pouvez ensuite consulter tous les articles sur Flexbox traduits dans la Cascade notamment les exemples concrets d'implémentation et les astuces techniques. Le module CSS3 Flexbox Layout fournit une façon efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques - d'où le terme "flex". L'idée principale est de donner à un élément contenant (container) la possibilité de changer les largeur et hauteur des éléments contenus (items), afin de remplir au mieux l'espace disponible, et de s'adapter à tous les terminaux et toutes les tailles d'écrans. Les bases Propriétés display: flex|inline-flex; flex-wrap
Une réintroduction à JavaScript - MDC Introduction Pourquoi une réintroduction ? Parce que JavaScript peut raisonnablement se targuer d'être le langage de programmation le plus incompris au monde. Bien que souvent raillé comme étant un simple jouet, derrière sa simplicité désarmante se cachent certaines fonctionnalités de langage très puissantes. De nombreuses applications JavaScript de premier plan sont apparues, ce qui montre qu'une connaissance approfondie de cette technologie est une compétence importante pour tout développeur Web. Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Note : Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Aperçu Les nombres NaN + 5;
La version 17 de Node.js, le moteur d'exécution JavaScript, est disponible, avec OpenSSL 3, bien que Deno, son concurrent, estime que la création des projets Node peut devenir une tâche ardue L'équipe de développement de Node.js a annoncé le 19 octobre la sortie de la version 17 de Node.js. Cette version est livrée avec OpenSSL 3 et la version 9.5 du moteur JavaScript V8. « L'inclusion d'OpenSSL 3.0 est une grande nouveauté. Cela nous donne une voie vers la communauté FIPS (Federal Information Processing Standards) », a déclaré Michael Dawson Responsable Node.js pour Red Hat et IBM chez Red Hat. Dans le même temps, l'équipe de développement de Deno, le moteur d'exécution de JavaScript et TypeScript, annonce Deno 1.15 avec également la version 9.5 du moteur JavaScript V8 et de nouvelles API cryptographiques. Node.js Notons que Node.js est un environnement d'exécution JavaScript basé sur le moteur JavaScript V8 de Google qui exécute le code JavaScript en dehors du navigateur. Le système de modules de Node permet aux développeurs d'étendre la plateforme à l'aide de modules tiers pour obtenir un maximum de fonctionnalités. Empiler les traces avec la version Node.js Deno Resultat
Reset & normalize — Formation Découverte du CSS | Grafikart Dans cette vidéo nous allons parler de deux outils que vous serez sûrement amené à utiliser lorsque vous ferez du CSS : Reset et Normalize. Ces outils permettent de contrebalancer le problème des styles par défaut imposés par les navigateurs (par exemple, les paragraphes ont une marge par défaut, marges qui ne sont pas forcément consistantes entre les navigateurs). Reset L'objectif de cette approche est de contrer l'apparence que le navigateur impose par défaut à la plupart des élément HTML. Ceci permet ensuite, lorsque l'on travaille sur le CSS, de ne pas avoir à penser aux styles qui pourraient être appliqués défaut aux éléments. Le reset originalMinireset Normalize Cet outil propose une approche différente qui consiste à essayer de normaliser l'apparence des éléments HTML à travers les différents navigateurs. Normalize.css Quelle approche utiliser On peut alors se demander quelle approche nous devons privilégier dans notre CSS.
Cookies Avec JavaScript, il est possible de programmer les célèbres cookies. Nous allons voir ici à quoi servent les cookies et comment stocker et récupérer des informations grâce à eux. En bas de cette page, vous trouverez des exemples de programmation de cookies. 1 - A quoi servent les cookies ? Les cookies sont très utilisés, par tous les sites commerciaux et par de plus en plus de sites perso. La raison est simple. Le nombre de visites, la date de la dernière visite,... 2 - Comment STOCKER des informations ? Le type d'informations à stocker n'a aucune influence sur le code. La valeur à stocker est associée à un nom de cookie. Donc pour stocker la valeur Arthur dans la variable prenom il suffit d'appeler la fonction comme ceci : 3 - Comment RECUPERER les informations ? Voyons un cookie qui contiendrait les informations suivantes : Si la variable demandée n'est pas contenue dans le cookie, elle est considérée comme valant null. le_prenom=GetCookie("prenom"); Maintenant, vous savez tout.
Méthode agile : créer des squads pour responsabiliser chacun Après 10 mois, 1 semaine et 3 jours de travail acharné sur le site Internet de votre client, vous et votre équipe lui présentez le résultat. Cette œuvre d’art suit le cahier des charges. Sauf que le client en question se tortille sur sa chaise. Ennuyé, il vous avoue à demi-mot qu’il n’est pas pleinement satisfait. Vous avez fait de l’excellent boulot, mais ses problématiques et besoins ont évolué, et le cahier des charges n’y répond plus tout à fait. Il vous déroule une loooongue liste de changements à effectuer. Pour éviter ces situations où le produit livré ne répond plus au besoin initial client, et prendre en compte le fait que les entreprises sont en perpétuel mouvement, la méthode “agile” a pour pilier le fait d’adapter la roadmap en permanence. Qu’est-ce que la méthode agile et quels sont ses avantages ? Quoi La méthode agile est un framework (dans le langage technique) ou encore un canevas, un cadre méthodologique fondé sur l’itération. Cela induit deux choses très positives : Qui
Box-sizing pour les nuls Box-sizing est une alternative au modèle de boîte standard, encore trop peu utilisée. Elle est très simple et peut réellement changer votre travail. Une très bonne introduction par Paula Borowska. Par Paula Borowska Box-sizing est une solution alternative au modèle de boîte standard que nous offre CSS. Pour bien comprendre la propriété box-sizing, il faut d'abord bien comprendre le modèle de boîte. Le modèle de boîte Ce modèle découle du fait que les éléments HTML sont pour la plupart des boîtes et que CSS utilise ces boîtes pour les agencer dans votre mise en page. Notez la relation entre ces propriétés : nous avons d'abord le contenu (Content), défini par sa largeur et sa hauteur, que cette dernière soit automatique ou spécifiée, elle est toujours là. Content : le contenu, c'est à dire le texte ou l'imagePadding : crée un espace autour du contenu. Quand nous définissons les dimensions d'un élément, nous ne définissons en fait que les largeur et hauteur du contenu. Voici un exemple :
Tutorial XMLHTTPRequest Robloche nous propose ici un tutorial passionnant sur l'utilisation des requêtes serveur en JavaScript. Ce tutorial a été remis à jour en aout 2017 pour tenir compte des évolutions des navigateurs. L'objet XMLHTTPRequest permet de réaliser des appels au serveur depuis la page HTML. Il s'agit d'appels AJAX (Asynchronous JAvascript XML). Aujourd'hui, tous les navigateurs acceptent ce mode de fonctionnement, sans incompatiblité particulière. AJAX a permis l'émergence de véritables applications web et a grandement participé à l'essor du javascript, qui est même devenu un langage serveur avec Node.js ! Présentation Comme leur nom ne l'indique pas, les objets XMLHTTPRequest permettent de récupérer toutes sortes de données, et pas seulement des fichiers XML. > Masquer le code JavaScript var xhr_object = new XMLHttpRequest(); xhr_object.open("GET", location.href, false); xhr_object.send(null); if (xhr_object.readyState == 4) alert("Requête effectuée !") Comment ça marche ? [haut de la page] Méthodes
Site en Javascript : les bonnes pratiques pour que Google le crawle efficacement Les sites réalisés tout ou partie en javascript compliquent la tâche de Google. Mais des solutions existent pour faciliter le travail du moteur de recherche. Le Javascript est un langage prisé par les développeurs : présent depuis les débuts du web, l'évolution des frameworks lui permet de rester à jour. Fédérant une impressionnante communauté grâce aux nombreuses possibilités offertes par le langage, Javascript est présent dans de très nombreux sites. Une question de liens Sur un site, Google va lire le HTML de la page d'accueil, puis va suivre les différents liens présents sur la page pour faire de même sur les autres pages. "Faciliter la vie de Google" Heureusement, des solutions existent pour palier à ce problème. Le pré-rendering, la solution ? Autre solution, l'affichage dynamique. Des outils comme Pupeteer, Rendertron ou Prerender.io permettent de faire du pre-rendering.