Différences entre versions de « JavaScript (Fiche) »
De Didaquest
Aller à la navigationAller à la rechercheLigne 1 : | Ligne 1 : | ||
− | + | = Introduction simple et rapide = | |
− | * | + | * Initiation - [https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript Developer.mozilla.org] |
− | + | * Expressions et opérateurs, par catégorie : [https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs] | |
− | + | * Premier résumé simple : [https://cours-web.ch/js/bases/] | |
+ | * Dynamisez-vos-sites-web-avec-javascript [https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript] (juste les variables ancienne nommenclature esans distinction de var et de let) | ||
+ | * Plus détaillé [https://openclassrooms.com/fr/courses/6175841-apprenez-a-programmer-avec-javascript] | ||
+ | * 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 '''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/ https://js.do load code samples] | ||
+ | * Micro Code Editor in the Browser: [https://codepen.io/kazzkiq/pen/xGXaKR] | ||
+ | * Banque de javascript: | ||
+ | :* Bien mais beaucoup de pub (les scripts sont en bas de page généralement): [https://www.javascriptbank.com/] | ||
+ | :* Exellentes ressources [https://codepen.io/search/pens?q=javascript] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | * Exemple 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] (manque de claretés |
− | + | ::- Avec Ajax : [https://www.programmation-facile.com/mettez-en-oeuvre-ajax-javascript-vos-sites-web] | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | == | + | == Activitées par l'exemple == |
* https://js.do/samples/calculator | * https://js.do/samples/calculator | ||
:: Un exemple : https://codepen.io/djks34/pen/dPLyjZ | :: Un exemple : https://codepen.io/djks34/pen/dPLyjZ | ||
− | Choix et Aléatoire | + | * '''Choix et Aléatoire''' |
:* https://www.w3resource.com/javascript-exercises/javascript-array-exercise-35.php | :* https://www.w3resource.com/javascript-exercises/javascript-array-exercise-35.php | ||
:* https://css-tricks.com/snippets/javascript/select-random-item-array/ | :* https://css-tricks.com/snippets/javascript/select-random-item-array/ | ||
Ligne 44 : | Ligne 39 : | ||
:* Random Quote Generator : https://codepen.io/kkoutoup/pen/zxmGLE | :* Random Quote Generator : https://codepen.io/kkoutoup/pen/zxmGLE | ||
:* Show-Hide based on Select Option jQuery | :* Show-Hide based on Select Option jQuery | ||
+ | |||
* https://www.javascriptbank.com/password-verifier.html | * https://www.javascriptbank.com/password-verifier.html | ||
Ligne 50 : | Ligne 46 : | ||
* https://codes-sources.commentcamarche.net/source/102929-filtres-multiple-sur-liste | * 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 | * Texte (écriture) en automatique : https://codepen.io/ConnorGaunt/pen/OReXZB | ||
* Un peu de design de fond : https://codepen.io/VincentGarreau/pen/pnlso | * Un peu de design de fond : https://codepen.io/VincentGarreau/pen/pnlso | ||
Ligne 74 : | Ligne 70 : | ||
* Javascript Pagination : https://codepen.io/karpovsystems/pen/fFHxK | * Javascript Pagination : https://codepen.io/karpovsystems/pen/fFHxK | ||
− | |||
* Chiffres: https://codepen.io/shivasurya/pen/FatiB | * Chiffres: https://codepen.io/shivasurya/pen/FatiB | ||
* Compteur : https://codepen.io/_Billy_Brown/pen/dbJeh | * Compteur : https://codepen.io/_Billy_Brown/pen/dbJeh | ||
* Compteur de clics: https://codepen.io/juliogcampos/pen/BzdjwY | * Compteur de clics: https://codepen.io/juliogcampos/pen/BzdjwY | ||
* https://codepen.io/jasonleewilson/pen/gPrxwX | * https://codepen.io/jasonleewilson/pen/gPrxwX | ||
− | Montre | + | Montre Mickey: https://codepen.io/jaysalvat/pen/ogQbKB |
Spidometre: https://codepen.io/Sm1lEE/pen/IhbAy | Spidometre: https://codepen.io/Sm1lEE/pen/IhbAy | ||
Ligne 94 : | Ligne 89 : | ||
* Collaps: https://codepen.io/fernoftheandes/pen/pcoFz | * 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 | * 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) | (version initiale : http://sdz.tdct.org/sdz/creer-un-mini-rpg-en-javascript-avec-canvas.html) | ||
Ligne 104 : | Ligne 103 : | ||
* jeu trouver e mot: https://codepen.io/natewiley/pen/xawFn | * jeu trouver e mot: https://codepen.io/natewiley/pen/xawFn | ||
− | == | + | == Activitées résumée et jeux == |
* https://fr.khanacademy.org/computing/computer-programming | * https://fr.khanacademy.org/computing/computer-programming | ||
= Approfondissement et compléments = | = Approfondissement et compléments = | ||
− | * Testeur de code en ligne | + | * 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 | * '''Cavas''' : https://developer.mozilla.org/fr/docs/Tutoriel_canvas | ||
− | * Avec goolge | + | * Avec goolge chart: https://codepen.io/ejsado/pen/HLgzK |
Version du 30 septembre 2019 à 22:04
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:
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:
- Exemple avec PHP et Base de données :
Activitées par l'exemple
- 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:
- 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
- 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
(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
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