Le fonctionnement de l'Internet - Apprendre le Web Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne. Résumé L'Internet est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres. L'histoire des débuts de l'Internet est quelque peu nébuleuse. Pédagogie active How the internet Works in 5 minutes : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. Allons plus loin Un réseau de base Pour que deux ordinateurs puissent communiquer entre eux, ils doivent être liés soit par un lien physique (généralement par un câble Ethernet), soit sans fil (par exemple, via WiFi ou Bluetooth). Note : À partir de maintenant, nous ne parlerons que de connexions physiques, mais sachez que les explications ci-dessous sont tout aussi valides pour les réseaux sans fil. Un réseau de réseaux Localiser un ordinateur L'Internet et le web
Le protocole HTTP Septembre 2017 Introduction au protocole HTTP Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur Internet depuis 1990. La version 0.9 était uniquement destinée à transférer des données sur Internet (en particulier des pages Web écrites en HTML] La version 1.0 du protocole (la plus utilisée) permet désormais de transférer des messages avec des en-têtes décrivant le contenu du message en utilisant un codage de type MIME. Le but du protocole HTTP est de permettre un transfert de fichiers (essentiellement au format HTML) localisés grâce à une chaîne de caractères appelée URL entre un navigateur (le client) et un serveur Web (appelé d'ailleurs httpd sur les machines UNIX). Communication entre navigateur et serveur La communication entre le navigateur et le serveur se fait en deux temps : Requête HTTP Une requête HTTP est un ensemble de lignes envoyé au serveur par le navigateur. METHODE URL VERSION<crlf> EN-TETE : Valeur<crlf> . . . Commandes En-têtes Réponse HTTP
Introduction à JavaScript orienté objet JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée OOP). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript. Note : Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit des classes. Un aperçu de JavaScript Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire Une réintroduction à JavaScript. La programmation orientée objet La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Terminologie Espace de noms Classe Définit les caractéristiques de l'objet. Objet Propriété
Openweb.eu.org — Bien faire le web ! Html Color Codes Diagramming for JavaScript and HTML, by Northwoods Software GoJS is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms. GoJS makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts. GoJS offers many advanced features for user interactivity such as drag-and-drop, copy-and-paste, in-place text editing, tooltips, context menus, automatic layouts, templates, data binding and models, transactional state and undo management, palettes, overviews, event handlers, commands, and an extensible tool system for custom operations. GoJS is pure JavaScript, so users get interactivity without requiring round-trips to servers and without plugins. Build custom modeling environments and domain-specific visual languages using the powerful features of GoJS. Yet GoJS is remarkably simple for such a powerful and flexible system. Explore Run Interactive Samples Learn Learn with GoJS Tutorials
L'API Websockets ce que c'est et comment l'utiliser Présentation WebSocket est une technologie évoluée qui permet d'ouvrir un canal de communication interactif(bi-directionnel) permanent entre un navigateur (côté client) et un serveur, afin de résoudre certains problèmes posés par le caractère unidirectionnel et déconnecté du protocole HTTP. Avec cette API vous pouvez envoyer des messages à un serveur et recevoir ses réponses de manière événementielle sans avoir à aller consulter le serveur pour obtenir une réponse. La spécification permettant d'utiliser les WebSockets est développée par le W3C, tandis que le protocole de communication est standardisé par l'IETF. Exemple Prenons comme exemple un système de chat, celui-ci doit répondre aux postulats suivants: Pouvoir envoyer des messagesPouvoir recevoir des messagestous les messages envoyés sont immédiatement retransmis aux autres participants De ce fait vous avez 2 canaux d'ouverts en même temps, l'un pour les envois, l'autre pour la réception Point Important La Pratique(côté client) Sources
Un premier projet - Créez des applications pour Windows 8 en HTML et JavaScript Nous avons notre IDE de prêt, il est lancé, notre compte de développeur nous permet de créer et tester une application sur notre machine. Alors allons-y, démarrons notre premier projet ! Nouveau projet Une fois Visual Studio lancé, il présente une page de démarrage classique avec quelques liens d'aide et des ressources d'apprentissage (voir figure suivante). Pour créer notre projet, cliquez sur Nouveau projet… dans la colonne de gauche, sous Démarrer. Nous allons choisir dans la colonne de gauche la catégorie des Modèles, puis le langage qui nous concerne : JavaScript. Cliquez sur OK pour lancer la création de ce nouveau projet. L'interface de Visual Studio 2012 L'explorateur de solutions Dans la partie droite de votre interface se trouve l'Explorateur de solutions, représenté à la figure suivante. L'éditeur de code La figure suivante vous est forcément familière si vous avez déjà développé en HTML/JavaScript. Les propriétés Un peu de code Maintenant, exécutons notre code. L'explorateur DOM
Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin.
Flux de données traités par vos applications - Applications Brouillon Cette page n'est pas terminée. Les flux de données internes et externes représentent le coeur de toute application web. A mesure qu'il évolue, ces flux de données deviennent de plus en plus complexes. Les maitriser vous aidera à construire des applications web plus efficaces. Flux HTTP basique Depuis l'origine, le web est basé sur une architecture client/serveur reposant sur le protocole HTTP. Le schéma ci-dessus montre un flux basique de site web. Ne soyez pas dupe de l'apparente simplicité de cette architecture. L'un des inconvénients de cette approche simple est qu'à chaque fois qu'un utilisateur veut voir une page web, tous ses éléments doivent être requêtés, même ceux qui ne changent pas d'une page à l'autre. Flux de données avancé A la fin des années 90, Microsoft a trouvé un contournement technique à cette nécessité de requêter les ressources de manière répétée. Le principal changement introduit par cette technologie porte sur où et quand les requêtes HTTP sont manipulées.
Les appels Ajax avec XMLHTTPRequest - Les tutoriaux de Tout JavaScript.com 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). 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 ? ligne 1 : on crée une instance de l'objet XMLHTTPRequest ligne 2 : on spécifie la méthode de transmission des données, l'URL et le mode de transmission de la requête ; ligne 3 : on exécute la requête proprement dite ; ligne 5 : on affiche une boîte d'alerte dès que la requête est terminée.
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é
HTML5 Web Workers