JavaScript (Fiche)

Introduction simple et rapide

• 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

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

Activitées résumée et jeux

• https://fr.khanacademy.org/computing/computer-programming

Approfondissement et compléments

• Testeur de code en ligne, fait par vous même : https://codepen.io/travist/pen/jrBjBz
• Cavas : https://developer.mozilla.org/fr/docs/Tutoriel_canvas
• Avec goolge chart: https://codepen.io/ejsado/pen/HLgzK

Jquery

Transition et eelments de base: JavaScript - Json - Ajax - JQuery: https://www.w3schools.com/js/

• https://jquery.com

- Initiation :

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

Création

• Creer son propre plugin facile en jQuery : http://creersonsiteweb.net/page-jquery-creer-extension
• Creer un formulaire pour modifier un site: http://exercices.openclassrooms.com/assessment/365?id=1631636&slug=simplifiez-vos-developpements-javascript-avec-jquery&login=7292272&tk=de29b7be5bb6d58638f02f3477d51fdb&sbd=2016-02-01&sbdtk=fa78d6dd3126b956265a25af9b322d55

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