JavaScript (Fiche)

- Simple et rapide :

• Petite intro :

* https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript

* Expressions et opérateurs, par catégorie : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs

• Petit résumé simple :

• https://cours-web.ch/js/bases/

• https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript (juste les variable ancienne nommenclature var au lieu de let)
• https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript

- Plus détaillé

Tutoriel

• https://codes-sources.commentcamarche.net/javascript-6
• Avec PHP et Base de données :

- Sans Ajax: https://codes-sources.commentcamarche.net/faq/178-rendre-le-javascript-dynamique-par-apport-a-une-base-de-donnees

- Avec Ajax : https://www.programmation-facile.com/mettez-en-oeuvre-ajax-javascript-vos-sites-web/

• plusieurs exemples simple: http://www.ostralo.net/javascript/pages/pageJ2.htm

Utilitaires

• Editeur de code en ligne : https://js.do/
• Banque de javascript

• Bien mais beaucoup de pub (les scripts sont en bas de page généralement): https://www.javascriptbank.com/

Pas à Pas

• Petit rappel : https://openclassrooms.com/fr/courses/146276-tout-sur-le-javascript/146274-syntaxe-en-javascript
• Simple et en parallèle on apprend le Json : https://www.toutjavascript.com/main/index.php3
• De mieux en mieux : https://www.w3schools.com/js/

activitées de bases web

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

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

DESIGN:

• 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

• One page scroll: https://codepen.io/AndreCortellini/pen/kaCEf

• 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

• 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

activitées de bases 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 du pendu : https://codepen.io/cathydutton/pen/ldazc

activitées résumée et jeux

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

Approfondissement et compléments

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