Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Apprendre à coder en JavaScript | Cours complet (2020) Objectifs du cours JavaS

Apprendre à coder en JavaScript | Cours complet (2020) Objectifs du cours JavaScript et prérequis Bienvenue dans ce cours complet traitant du langage de programmation JavaScript. Ce tutoriel aborde l’ensemble des fonctionnalités de base et utiles du JavaScript. L’objectif principal de celui-ci est de faire de vous des développeurs autonomes pour que vous puissiez résoudre par vous même la majorité des problématiques liées au JavaScript et que vous soyez capables de terminer des projets plus ou moins complexes. L’idée derrière ce cours n’est donc pas simplement de vous présenter les différentes notions liées au JavaScript une à une mais bien que vous les compreniez et que vous sachiez quand et comment utiliser chacune d’entre elles dans le futur. Pour cela, le cours est progressif dans sa difficulté au sein de chaque partie et entre les parties : nous allons commencer par définir les notions de base du JavaScript avec les variables, fonctions et autres structures de contrôle comme les boucles et les conditions et irons progressivement vers du plus complexe et du plus structuré avec l’orienté objet et l’utilisation d’APIs (Interfaces de Programmation) par exemple. Cette progressivité rend le cours ouvert et accessible à tous : que vous ayez déjà des bases ou non en JavaScript, vous trouverez forcément quelque chose à en retirer. Cependant, pour suivre ce cours dans de bonnes conditions, il est essentiel que vous possédiez des bases en HTML et en CSS. Si vous ne connaissez pas du tout ces deux langages, je vous invite à consulter mon cours complet traitant de ce sujet en cliquant ici Pédagogie et méthodologie du cours JavaScript Pour ce cours JavaScript, nous allons déjà commencer par définir le rôle du JavaScript et par vous créer un socle de connaissances solide pour vous permettre d’avoir une vue d’ensemble du langage. Ensuite, nous irons le plus rapidement vers des exemples et exercices concrets pour valider l’acquisition de ces premières connaissances et pour être sûr de bien comprendre quand et comment utiliser chacune d’entre elles. Chaque notion du cours est illustré par des exemples les plus concrets possibles. En effet, pour rendre le cours le plus digérable, intéressant, pédagogique et pratique possible, un fort accent a été mis sur la pratique. Dans un but pédagogique, et afin de vous fournir la meilleure expérience d’apprentissage possible, ce cours a été divisé en de multiples sous-chapitres eux mêmes regroupés en sections. Vous pouvez à tout moment voir le sommaire du cours sur votre gauche pour vous repérer et naviguer entre les différentes leçons du cours. Les codes des différents exemples vous seront fournis. Cependant, je vous conseille d’adopter une attitude active et de vous exercer sur chacun d’entre eux plutôt que de simplement les copier-coller si vous souhaitez véritablement progresser : je vous rappelle ici qu’on n’apprend vraiment à coder qu’en pratiquant. Introduction au JavaScript Dans cette première leçon d’introduction, nous allons définir ce qu’est le JavaScript ainsi que les principes fondateurs de ce langage et allons comprendre la place du JavaScript parmi les autres langages et ses usages. Une première définition du JavaScript Le JavaScript est un langage de programmation créé en 1995. Le JavaScript est aujourd’hui l’un des langages de programmation les plus populaires et il fait partie des langages web dits « standards » avec le HTML et le CSS. Son évolution est gérée par le groupe ECMA International qui se charge de publier les standards de ce langage. On dit que le HTML, le CSS et le JavaScript sont des standards du web car les principaux navigateurs web (Google Chrome, Safari, Firefox, etc.) savent tous « lire » (ou « comprendre » ou « interpréter ») ces langages et les interprètent généralement de la même façon ce qui signifie qu’un même code va généralement produire le même résultat dans chaque navigateur. Pour définir ce qu’est le JavaScript et le situer par rapport aux autres langages, et donc pour comprendre les intérêts et usages du JavaScript il faut savoir que :  Le JavaScript est un langage dynamique ;  Le JavaScript est un langage (principalement) côté client ;  Le JavaScript est un langage interprété ;  Le JavaScript est un langage orienté objet. Pas d’inquiétude, on va définir le plus simplement possible ce que ces qualificatifs signifient ! Le JavaScript, un langage dynamique Le JavaScript est un langage dynamique, c’est-à-dire un langage qui va nous permettre de générer du contenu dynamique pour nos pages web. Un contenu « dynamique » est un contenu qui va se mettre à jour dynamiquement, c’est-à-dire changer sans qu’on ait besoin de modifier le code manuellement mais plutôt en fonction de différents facteurs externes. On oppose généralement les langages « dynamiques » aux langages « statiques » comme le HTML et le CSS. Illustrons les différences d’utilisation entre ces types de langage en discutant des possibilités du HTML, du CSS et du JavaScript. Pour rappel, le HTML est un langage de balisage (langage qui utilise des balises) qui est utilisé pour structurer et donner du sens aux différents contenus d’une page. Le HTML nous permet de communiquer avec un navigateur en lui indiquant que tel contenu est un titre, tel contenu est un simple paragraphe, tel autre est une liste, une image, etc. Le navigateur comprend les différentes balises HTML et va alors afficher notre page à nos visiteurs en tenant compte de celles-ci. Le contenu HTML ne va jamais être affiché tel quel, brut, mais des règles de mises en forme vont lui être appliquées. Ces règles de styles vont être définies en CSS. Le CSS va ainsi nous permettre d’arranger les différents contenus HTML de la page en les positionnant les uns par rapport aux autres, en modifiant la couleur des textes, la couleur de fond des éléments HTML, etc. Le CSS va ainsi se charger de l’aspect visuel de notre page tandis que le HTML se charge de la structure (définir les contenus) de celle-ci. Le HTML et le CSS forment ainsi un premier couple très puissant. Cependant, nous allons être limités si nous n’utilisons que ces deux langages tout simplement car ce sont des langages qui ne permettent que de créer des pages « statiques ». Une page statique est une page dont le contenu est le même pour tout le monde, à tout moment. En effet ni le HTML ni le CSS ne nous permettent de créer des contenus qui vont se mettre à jour par eux-mêmes. Le CSS, avec les animations, nous permet de créer des styles pseudo-dynamiques mais tout de même prédéfinis. C’est là où le JavaScript entre en jeu : ce langage va nous permettre de manipuler des contenus HTML ou des styles CSS et de les modifier en fonction de divers évènements ou variables. Un évènement peut être par exemple un clic d’un utilisateur à un certain endroit de la page tandis qu’une variable peut être l’heure de la journée. Regardez par exemple le code suivant : L’idée n’est bien sûr pas ici de vous expliquer comment fonctionne ce code qui est déjà relativement complexe mais de vous donner une idée de ce qu’on va pouvoir réaliser avec quelques lignes de JavaScript. Mon code JavaScript est ici placé dans l’élément head de mon fichier HTML à l’intérieur d’un élément script. Ce code récupère l’heure actuelle et l’actualise toutes les secondes d’une part, et nous permet de cacher / d’afficher l’heure via un bouton d’autre part. Ces deux fonctionnalités sont des fonctionnalités dynamiques qu’on n’aurait pas pu réaliser en HTML ni en CSS. Le JavaScript, un langage (principalement) côté client La catégorisation langages statiques / langage dynamique est une première façon de classer les différents langages de programmation. On peut également classer les différents langages selon l’endroit où ils vont s’exécuter : soit côté client, soit côté serveur. Pour comprendre ce que sont les langages « côté client » et « côté serveur », il convient avant tout de comprendre ce qu’est un client et ce qu’est un serveur et pour cela il faut savoir ce qu’est un site. Un site est un ensemble de ressources et de fichiers liés entre eux. Pour que notre site soit accessible sur le web pour tous, on va l’héberger sur un serveur, c’est-à-dire envoyer l’ensemble de nos fichiers sur le serveur et on va également acheter un nom de domaine qui va servir à identifier notre site. Un « serveur » est une sorte de super ordinateur, constamment accessible et connectés aux autres serveurs (formant ainsi un réseau qu’on appelle le web) et qui va héberger les fichiers constituant un (ou plusieurs) site(s) web et le(s) « servir » sur demande du client. Lorsqu’on demande à accéder à une page web en tapant une URL dans notre navigateur, nous sommes le client ou plus exactement notre navigateur est le logiciel client qui effectue une demande ou « requête » au serveur qui est la suivante : « sers- moi le fichier correspondant à l’adresse que je t’ai envoyée ». Les fichiers ou pages d’un site web vont pouvoir être constituées uploads/s3/ java-script.pdf