📢 Bonjour à tous et à toutes ❗

Nous verrons dans cette formation sur JavaScript 3 , les fondamentaux, l’essentiel pour démarrer avec ce langage utilisé pour les sites internet, pages web
, logiciels ou même applications smartphones (oui oui, on peut en trouver de partout 😄).
C'est la troisième couche des technologies standards du web, après HTML et CSS.

“JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives et à ce titre est une partie essentielle des applications web.
Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l’une des technologies cœur du World Wide Web.
Une grande majorité des sites web l’utilisent, et la majorité des navigateurs web disposent d’un moteur JavaScript dédié pour l’interpréter, indépendamment des considérations de sécurité qui peuvent se poser le cas échéant.
C’est un langage orienté objet à prototype : les bases du langage et ses principales interfaces sont fournies par des objets.
Cependant, à la différence d’un langage orienté objets, les objets de base ne sont pas des instances de classes. ”

Wikipedia

“ JavaScript (souvent abrégé en « JS ») est un langage de script léger, orienté objet, principalement connu comme le langage de script des pages web.
Mais il est aussi utilisé dans de nombreux environnements extérieurs aux navigateurs web tels que Node.js, Apache CouchDB voire Adobe Acrobat.
Le code JavaScript est interprété ou compilé à la volée (JIT) .
Le standard qui spécifie JavaScript est ECMAScript
JavaScript est un langage de programmation qui permet d’implémenter des mécanismes complexes sur une page web.
À chaque fois qu’une page web fait plus que simplement afficher du contenu statique, afficher du contenu mis à jour à des temps déterminés, des cartes interactives, des animations 2D/3D, des menus vidéo défilants, etc… JavaScript a de bonnes chances d’être impliqué. ”

MDN

Vous l’avez compris, Javascript est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia(images, vidéos, son) , d’animer des images, il est actuellement à sa V8 (2021).
Dans cette première partie on abordera les bases de Javascript dans sa V5 (juste avant ECMAScript 2015 aka ECMAScript 6 aka ES6 que l’on abordera ensuite dans la partie Javascript Level 2, on fera étape après étape).
Vous avez là encore énormément de support et de ressources complémentaires disponible sur le Net.
Afin de ne pas vous disperser, utilisez principalement les 2 suivantes (y a du bon mais surtout du moins bon) :

  1.  L’incontournable W3School (Vous le connaissez déjà et on y retournera) : https://www.w3schools.com/js/DEFAULT.asp

  2. MDN  Chez MDN Web Docs , la bible :
    2.1 https://developer.mozilla.org/fr/docs/Learn/Front-end_web_developer
    2.2 https://developer.mozilla.org/fr/docs/Learn/JavaScript

TODO 🎢:

1. Installer sur Firefox l'extension Web Developper

2.Dans un second temps on va changer d'éditeur de code pour passer sur Visual Studio Code img :

Il devient un incontournable (en gratuit, merci crocsoft au passage) des éditeurs légers :
  • Télécharger PUIS installer Visual Studio Code img :->ICI <- .
  • Installer les extensions ci-dessous pour VSC : CTRL + SHIFT + X puis tapez Debugger, Code runner, Live server.

  • Il faudra peut-être redémarrer entre-temps VSC, faites lui plaisir, faites-le s’il vous le demande.

  • Ouvrez un répertoire de travail File -> Open Folder puis

    • On va dans le menu des fichiers en haut à gauche CTRL + SHIFT + E
    • Ensuite soit on clique sur le symbole situé en (1) soit on fait File -> New file, soit on fait CTRL + N pour créer un nouveau fichier que l’on va enregistrer CTRL + S en tant que Jsjour1.html
    • Et ensuite on entre à l’intérieur le code suivant :
    <!DOCTYPE html>
<html>
<body>
    <!-- SRC https://www.w3schools.com/js/tryit.asp?filename=tryjs_myfirst -->
    <h2>My First JavaScript</h2>
    <button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
        Click me to display Date and Time.</button>
    <p id="demo"></p>
    <script>//un commentaire en JS, rajout perso
        alert("Hello World");
        console.log("Tu peux me voir en appuyant sur F12 ou allant dans les outils de dev de ton navigateur ;)");
    </script>
</body>
</html>

    Le fichier JsJour1.html est disponible ici ->ICI<- en cas de
    Vous pouvez demander à votre navigateur de l’interpréter comme pour du html en double cliquant dessus ou en utilisant html preview dans VSC : clic droit puis Open With Live Server :

Comme vous pouvez le voir le code Javascript s’exécute entre 2 balises <script> et </script> et il nous permet d’interagir avec l’utilisateur ou de modifier dynamiquement la page.
On en verra beaucoup plus tout bien évidemment au long la formation.

3. Pour finir notre configuration, et pour la fin de la formation, on va avoir besoin d'installer un serveur Web (si cela n'est pas déjà fait) sur votre ordinateur :

  • Pour ceux sont sur img Linux, img Ubuntu :
    • Suivez les instructions de la communauté : ->ICI <-
    • Ou alors Télécharger PUIS installer Xampp ( La 5.6.28, pas la derniere !!! ) :->ICI <-.
  • Pour ceux qui sont sur Windows, Télécharger PUIS installer Xampp ( La 5.6.28, pas la derniere !!! ) :->ICI <-.
  • Pour ceux qui sont sur Mac, Télécharger PUIS installer Xampp ( La 5.6.28, pas la derniere !!! ) :->ICI <-.

Merci de garder pour vous les ressources que vous y trouverez et de ne pas les diffuser 😏
Merci de m’avertir de toute erreur ou coquille qui m’auraient échapées 😍

©️ 🚫 Do not distribute 😌