JavaScript (Fiche)

Qu'est le JavaScript ?

JavaScript (« JS » en abrégé) est un langage de programmation dynamique complet qui, appliqué à un document HTML, peut fournir une interactivité dynamique sur les sites Web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Pour résumer JavaScript est un langage basé sur les évènements. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation.

JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore !

JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a :

des Interfaces de Programmation d'Applications pour navigateurs (API) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio. des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook. des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications.

Démarche

Didactique et socio-constructiviste :

• Par la découverte en exploitant la partie Introduction mise en contexte. Dans cette partie les codes et les exemples sont juste utilisés pour se familiariser comprendre et introduire progressivement les différences entre HTML - PHP et JavaScript (js, Json, Ajax, jQuery).
• Durant la phase de découverte, des situations de formalisations et d'institutionnalisation sont nécessaire pour réaliser et comprendre certains exercices et certaines activités.
• Dans un second temps sont introduit la partie design et une initiation au jeu afin de matérialiser les quelques éléments de bases et de voir d'autre possibilité du JavaScript.
• Dans un troisième temps des phases d'institutionnalisations sont nécessaire. Ces phases sont présente a titre indicatif dans la partie découverte et sont reprise dans la partie Cours de base.
• La partie Cours de base permettra en plus de s'initier aux notions de communications, d’interfaçage et d'interactivité qu'offre JavaScript (js, Json, Ajax, jQuery)

Introduction mise en context

• DOM (Document Object Model) pour affecter ses balises HTML en JavaScript et leur faire subir toutes sortes de traitements.
• Initiation - Developer.mozilla.org
• Expressions et opérateurs, par catégorie : [1]
• Premier résumé simple : [2]
• Dynamisez-vos-sites-web-avec-javascript [3] (juste les variables ancienne nommenclature esans distinction de var et de let)
• Plus détaillé [4]
• Petit rappel : [5]
• Simple et en parallèle on apprend le Json : [6]
• De mieux en mieux JavaScript - Json - Ajax - JQuery: https://www.w3schools.com/js/

Exemples explicites

• https://codes-sources.commentcamarche.net/javascript-6
• Plusieurs exemples simples:

• http://www.ostralo.net/javascript/pages/pageJ2.htm
• Petit design: https://github.com/lmgonzalves

Utilitaires et exemples

• Editeur de code en ligne avec quelques exemples (load code samples) https://js.do load code samples
• Micro Code Editor in the Browser: [7]
• Banque de javascript:

• Bien mais beaucoup de pub (les scripts sont en bas de page généralement): [8]
• Exellentes ressources [9]

• Exemple avec PHP et Base de données :

- Sans Ajax: [10] (manque de claretés

- Avec Ajax : [11]

Activitées par l'exemple

• https://js.do/samples/calculator

Un exemple : https://codepen.io/djks34/pen/dPLyjZ

• Choix et Aléatoire

• https://www.w3resource.com/javascript-exercises/javascript-array-exercise-35.php
• https://css-tricks.com/snippets/javascript/select-random-item-array/
• https://codepen.io/codebubb/pen/xBKOpb
• Random Quote Generator : https://codepen.io/kkoutoup/pen/zxmGLE
• Show-Hide based on Select Option jQuery

• https://www.javascriptbank.com/password-verifier.html
• https://www.javascriptbank.com/stop-the-clock.html
• https://js.do/samples/geolocation
• https://codes-sources.commentcamarche.net/source/102929-filtres-multiple-sur-liste

Eléments de WebDesign:

• Texte (écriture) en automatique : https://codepen.io/ConnorGaunt/pen/OReXZB
• Un peu de design de fond : https://codepen.io/VincentGarreau/pen/pnlso
• Un autre avec des particules: https://codepen.io/MarcoGuglielmelli/pen/lLCxy
• une bannière parallaxe: https://codepen.io/amustill/pen/aoFIm
• De belles rotations flip https://codepen.io/syedrafeeq/pen/eCkFt
• gallery : https://codepen.io/gabrieleromanato/pen/dImly
• Caroussel multiples: https://codepen.io/rtpHarry/pen/YPBydd

• ceci n'est pas du javascript car des fois on peut faire sans:

https://codepen.io/johnmotyljr/pen/cDpEH

https://codepen.io/eslam-nasser/pen/VexqvG

• Sticky Slider Navigation (Responsive) : https://codepen.io/ettrics/pen/WRbGRN
• Un autre réponsive: https://codepen.io/tholex/pen/aGkAr
• Animation radiale : https://codepen.io/CreativePunch/pen/lAHiu
• https://codepen.io/sol0mka/pen/iHtsL
• Menu time line: https://codepen.io/ritz078/pen/LGRWjE

• One page scroll: https://codepen.io/AndreCortellini/pen/kaCEf
• Change background colour with fade animation as you scroll: https://codepen.io/daveredfern/pen/zBGBJV

 FEDIBIO SCROLLING: https://codepen.io/lmgonzalves/pen/EEKEaM
 FEDIBIO Scrolling Association parfaites: https://codepen.io/lmgonzalves/pen/QPBPJe

• Javascript Pagination : https://codepen.io/karpovsystems/pen/fFHxK
• Chiffres: https://codepen.io/shivasurya/pen/FatiB
• Compteur : https://codepen.io/_Billy_Brown/pen/dbJeh
• Compteur de clics: https://codepen.io/juliogcampos/pen/BzdjwY
• https://codepen.io/jasonleewilson/pen/gPrxwX

 Montre Mickey: https://codepen.io/jaysalvat/pen/ogQbKB
 Spidometre: https://codepen.io/Sm1lEE/pen/IhbAy

• Menu accordéon : https://codepen.io/pedronauck/pen/fcaDw
• Un quizz: https://codepen.io/gcarino/pen/LDgtn
• formulaire de réservation : https://codepen.io/andy31415/pen/FtKzs
• Responsif form: https://codepen.io/craigwheeler/pen/nBdsv
• Step by step register form: https://codepen.io/JeromeRenders/pen/EPNxPv
• Search box Animed: https://codepen.io/brandonkennedy/pen/yGjsi
• Collaps: https://codepen.io/fernoftheandes/pen/pcoFz
• Export HTML table to XLS: https://codepen.io/kostas-krevatas/pen/mJyBwp
• ToDo List: https://codepen.io/franklynroth/pen/ZYeaBd
• Un exemple avec de la fumée : https://codepen.io/dee0512/pen/WvGWrK
• Avec goolge chart: https://codepen.io/ejsado/pen/HLgzK

Activitées jeux

• https://openclassrooms.com/fr/courses/1455701-creer-un-mini-rpg-en-javascript-avec-canvas/1455880-mise-en-place-des-bases

(version initiale : http://sdz.tdct.org/sdz/creer-un-mini-rpg-en-javascript-avec-canvas.html)

• un autre exemple sur le même principe : https://codepen.io/straker/pen/yasit?editors=1111
• https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript
• jeu de déplacement : https://codepen.io/arshdkhn1/pen/QKkvJv
• Jeu du pendu : https://codepen.io/cathydutton/pen/ldazc
• jeu trouver e mot: https://codepen.io/natewiley/pen/xawFn

Cours de base

• Approche très conceptuelle: avec des exercices simples et explicatifs pour chaque concept : http://www.aliasdmc.fr/coursjavas
• JavaScript - Json - Ajax - JQuery: Transition et éléments de base: :

• https://developer.mozilla.org/fr/docs/Glossaire/jQuery
• https://www.w3schools.com/js/
• https://openclassrooms.com/fr/courses/1631636-simplifiez-vos-developpements-javascript-avec-jquery/1631795-avant-de-commencer

jQuery

• Site officiel : https://jquery.com

Jeux et Média

• https://fr.khanacademy.org/computing/computer-programming
• Cavas : https://developer.mozilla.org/fr/docs/Tutoriel_canvas

Création, approfondissement et compléments

• Création ou utilisation d'un cookie :

• Via Github : Un cookie tout prêt à l'emploi : [12]
• Premiers pas :

- Tuto Créer un cookie : [13] ou [14]

- Tuto : Acceptation / Refus / Effacer cookies: [15] ou pour effacer [16]

- Tuto: Lire un cookie: [17]

• Créer propre plugin facile en jQuery : [18]
• Créer un formulaire pour modifier un site: [19]
• Testeur de code en ligne, fait par vous même : [20]

• https://blog.internet-formation.fr/2014/04/moteur-de-recherche-php-avec-ajax-et-scroll-infini/

Top 10 des frameworks pour javascript

• Pour JavaScript : NodeJs, Angular, React,...

liste: https://colorlib.com/wp/javascript-frameworks/ (anglais)

Top 10 JavaScript frameworks
   1. Angular
   2. React
   3. Vue.js
   4. Ember.js
   5. Meteor
   6. Mithril
   7. Node.js (Node.js n'est pas rééllement un framework. Node.js est un environnement très bas niveau qui se rapproche en quelque sorte plus du C que de PHP, Ruby on Rails ou Django).
   8. Polymer
   9. Aurelia
   10. Backbone.js