Dans cette première leçon, le formateur explique ce qu’est JavaScript et comment il complète HTML et CSS pour rendre les pages web interactives. Il précise que HTML décrit le contenu et que CSS le stylise, mais que ces deux langages restent statiques. JavaScript, en tant que langage de script implémenté selon la spécification ECMAScript, s’exécute principalement côté client dans le navigateur, bien qu’il puisse aussi fonctionner côté serveur via Node.js. Le cours décrit la nature prototype‑orientée du langage, l’ajout de la syntaxe de classes à partir d’ECMAScript 6, et son exécution interprétée par le moteur du navigateur. Le rôle principal de JavaScript est d’ajouter de l’interactivité : gestion avancée des formulaires, animations, effets visuels, jeux, manipulation du DOM, et appels AJAX asynchrones. Le formateur montre plusieurs exemples d’widgets (albums photo, zoom, drag‑and‑drop, transitions) et distingue les pages interactives des pages dynamiques générées côté serveur. Il mentionne les bibliothèques et frameworks populaires (jQuery, Vue.js, React, Angular) ainsi que le concept de « Vanilla JS » (JavaScript pur). Enfin, il indique les prérequis recommandés (logique de programmation, variables, structures de contrôle, tableaux, fonctions) pour suivre la série.
Chapters
Bonjour à tous et bienvenue dans cette première vidéo consacrée au langage JavaScript. Dans les leçons où nous avons traité les langages HTML et CSS, nous avons vu que HTML est un langage de description de pages web. Il permet de présenter le contenu hypertexte destiné à être affiché sur le navigateur. Le CSS quant à lui est un langage de style. Sert à soigner le design du contenu intégré en HTML. Donc avec ces deux langages, on peut déjà créer une bonne page web. Cependant, cette page-là sera trop statique et manquera d'interactivité avec l'utilisateur. C'est pour cette raison que JavaScript fait son entrée. En fait, ni HTML ni CSS ne sont des langages de programmation. Le premier est un langage de description déclaratif simple qui se base sur des balises et certains caractères spéciaux, et le deuxième est un langage de style qui ressemble plutôt à des directives formulées sous forme de propriétés et valeurs. JavaScript par contre est un vrai langage de programmation, ou plutôt un langage de script car il s'exécute loin des contraintes matérielles d'un ordinateur que l'on appelle le bas niveau. Mais bon, pour faire simple, on dira qu'il s'agit d'un langage de programmation. JavaScript est principalement un langage côté client, c'est-à-dire qu'il s'exécute sur le navigateur aux côtés du HTML et du CSS. Mais on peut aussi le faire s'exécuter sur le serveur à l'aide de la plateforme Node.js par exemple. Dans cette série de leçons, nous allons nous servir du JavaScript en tant que langage côté client. JavaScript est une implémentation du langage ECMAScript qui est un standard ECMA. Ce dernier fournit des spécifications aux différents langages côté client comme JavaScript, ActionScript d'Adobe Systems ou JScript de Microsoft. Ces 3 langages sont tous des implémentations pour le même langage qui est ECMAScript. JavaScript est un langage de programmation orienté prototype. Ce style de programmation est proche de la programmation orientée objet, mais il n'utilise pas de classes. Cependant, à partir de la version 6 d'ECMAScript, on peut se servir du JavaScript en tant qu'un vrai langage de programmation orienté objet en bénéficiant de tout le potentiel fourni par ce paradigme, comme la création de classes, l'héritage, etc. Il s'agit d'un langage de programmation interprété, c'est-à-dire qu'il sera exécuté au fur et à mesure à l'aide de l'interpréteur qui n'est rien d'autre que le moteur JavaScript incorporé au navigateur. Maintenant, la question qui paraît évidente est: à quoi sert JavaScript? Il y a quelques instants, j'ai mentionné le mot interactivité. En fait, c'est ça le rôle du JavaScript si on s'en sert du côté client, c'est créer de l'interactivité avec le navigateur ou l'utilisateur. L'interactivité est tout simplement la capacité de la page web à dialoguer avec l'utilisateur et inversement. Bien entendu, le terme interactivité est plus large que ça, mais dites-vous que du moment où la page peut identifier l'action de l'utilisateur afin d'exécuter le traitement souhaité, alors on dit qu'elle est interactive. En gros, à l'aide de JavaScript, on peut gérer des formulaires d'une manière plus avancée que celle proposée en HTML5. On peut aussi développer des animations plus complexes que celles que l'on peut faire en CSS3, comme c'est le cas pour des albums photos avec des effets évolués ou diaporamas. On peut aussi créer du texte ou du contenu défilant, des dessins, des jeux. On peut même contrôler du contenu HTML intégré par en masquer ou afficher une partie suivant l'action de l'utilisateur. Ce langage est aussi utilisé pour créer des instances AJAX qui permettent d'échanger le contenu avec le serveur d'une manière asynchrone. À titre d'exemple, voilà quelques réalisations faites en JavaScript. Là par exemple, c'est un album tournant qui contient un bout de code JavaScript mais aussi du HTML et CSS. Ici c'est une sorte de zoom sur la zone survolée par l'utilisateur sur une petite image dont les détails ne sont pas trop visibles. Là, c'est un exemple drag and drop. Ici, c'est une sorte d'album photo dont les transitions reproduisent l'effet domino ou vague. Voilà un autre exemple d'album photo. Encore une autre version d'album. Pour info, il ne faut pas confondre page web interactive avec page web dynamique. Car une page web dynamique est une page dont le contenu est généré dynamiquement, souvent depuis la base de données. Pour créer une page web dynamique, on utilise des langages côté serveur comme PHP, JSP, mais aussi JavaScript si on s'en sert en tant que langage côté serveur. La syntaxe de JavaScript est inspirée de nombreux langages de programmation et principalement du langage C et Java, et elle est très riche en fonctionnalités. Notez qu'au lieu d'écrire entièrement le code JavaScript par soi-même, on peut utiliser des frameworks qui en facilitent le développement. Le plus populaire reste jQuery qui est une bibliothèque de fonctions déjà faites et que l'on peut réutiliser en écrivant moins de code, mais il existe aussi Vue.js, React.js, Angular et j'en passe. Il serait utile de savoir que la version originale de JavaScript, que l'on verra d'ailleurs dans cette série de leçons, est connue sous le nom de Vanilla.js. En fait, il s'agit du JavaScript sans bibliothèque. Enfin, pour tirer profit de cette série, il est préférable que vous ayez un minimum de prérequis en programmation, car n'oubliez pas que JavaScript est un langage de programmation dont on va découvrir la syntaxe et les fonctionnalités. Il est donc recommandé que vous soyez à l'aise avec la logique de programmation ou algorithmique et connaître les concepts de base comme les variables, les structures de contrôle, les tableaux, les fonctions, etc. On se contente de ça pour cette première vidéo et on se retrouve à la prochaine leçon pour explorer ensemble ce magnifique langage. Merci pour votre attention et à la vidéo prochaine.