Différences entre versions de « JavaScript (Fiche) »
(→Jquery) |
|||
Ligne 1 : | Ligne 1 : | ||
− | = Introduction | + | = Démarche = |
+ | Didactique et socio-constructiviste : par la découverte en exploitant la partie introduction mise en contexte. Les codes et les exemples sont juste utilisés pour se familiariser et introduire les différences entre HTML - PHP et '''JavaScript (js, Json, Ajax, jQuery)'''. | ||
+ | Durant cette première phase, viens des situations formalisations et d'institutionnalisation pour réaliser et comprendre certains exercices et certaines activités. | ||
+ | Dans un second temps est introduit la partie dessing et une initiation au jeu pour matérialiser les quelques éléments de bases. | ||
+ | Dans un troisième temps une phase d'institutionnalisation est nécessaire avec la partie [[#Cours de base]] avant de passer aux notions de communications, d’interfaçage et d'interactivité | ||
+ | |||
+ | = Introduction mise en context = | ||
* Initiation - [https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript Developer.mozilla.org] | * 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] | * Expressions et opérateurs, par catégorie : [https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs] | ||
Ligne 9 : | Ligne 15 : | ||
* De mieux en mieux '''JavaScript - Json - Ajax - JQuery''': '''https://www.w3schools.com/js/''' | * De mieux en mieux '''JavaScript - Json - Ajax - JQuery''': '''https://www.w3schools.com/js/''' | ||
− | = Exemples explicites = | + | == Exemples explicites == |
* https://codes-sources.commentcamarche.net/javascript-6 | * https://codes-sources.commentcamarche.net/javascript-6 | ||
* Plusieurs exemples simples: | * Plusieurs exemples simples: | ||
::* http://www.ostralo.net/javascript/pages/pageJ2.htm | ::* http://www.ostralo.net/javascript/pages/pageJ2.htm | ||
::* Petit design: https://github.com/lmgonzalves | ::* Petit design: https://github.com/lmgonzalves | ||
− | |||
== Utilitaires et exemples == | == Utilitaires et exemples == | ||
Ligne 22 : | Ligne 27 : | ||
:* Bien mais beaucoup de pub (les scripts sont en bas de page généralement): [https://www.javascriptbank.com/] | :* 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] | :* Exellentes ressources [https://codepen.io/search/pens?q=javascript] | ||
− | |||
− | |||
* Exemple avec PHP et Base de données : | * 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 | ::- 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] | ::- Avec Ajax : [https://www.programmation-facile.com/mettez-en-oeuvre-ajax-javascript-vos-sites-web] | ||
− | |||
== Activitées par l'exemple == | == Activitées par l'exemple == | ||
Ligne 67 : | Ligne 69 : | ||
FEDIBIO SCROLLING: https://codepen.io/lmgonzalves/pen/EEKEaM | FEDIBIO SCROLLING: https://codepen.io/lmgonzalves/pen/EEKEaM | ||
FEDIBIO Scrolling Association parfaites: https://codepen.io/lmgonzalves/pen/QPBPJe | FEDIBIO Scrolling Association parfaites: https://codepen.io/lmgonzalves/pen/QPBPJe | ||
− | |||
* Javascript Pagination : https://codepen.io/karpovsystems/pen/fFHxK | * Javascript Pagination : https://codepen.io/karpovsystems/pen/fFHxK | ||
Ligne 82 : | Ligne 83 : | ||
* formulaire de réservation : https://codepen.io/andy31415/pen/FtKzs | * formulaire de réservation : https://codepen.io/andy31415/pen/FtKzs | ||
* Responsif form: https://codepen.io/craigwheeler/pen/nBdsv | * 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 | * Search box Animed: https://codepen.io/brandonkennedy/pen/yGjsi | ||
− | |||
* 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 | * Export HTML table to XLS: https://codepen.io/kostas-krevatas/pen/mJyBwp | ||
* ToDo List: https://codepen.io/franklynroth/pen/ZYeaBd | * ToDo List: https://codepen.io/franklynroth/pen/ZYeaBd | ||
* Un exemple avec de la fumée : https://codepen.io/dee0512/pen/WvGWrK | * 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 = | + | == 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 99 : | Ligne 97 : | ||
* https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript | * https://developer.mozilla.org/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript | ||
* jeu de déplacement : https://codepen.io/arshdkhn1/pen/QKkvJv | * jeu de déplacement : https://codepen.io/arshdkhn1/pen/QKkvJv | ||
− | |||
* Jeu du pendu : https://codepen.io/cathydutton/pen/ldazc | * Jeu du pendu : https://codepen.io/cathydutton/pen/ldazc | ||
* jeu trouver e mot: https://codepen.io/natewiley/pen/xawFn | * 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 | * '''Cavas''' : https://developer.mozilla.org/fr/docs/Tutoriel_canvas | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | = Création = | + | |
+ | = Création, approfondissement et compléments = = | ||
+ | ** Testeur de code en ligne, fait par vous même : https://codepen.io/travist/pen/jrBjBz | ||
* Creer son propre plugin facile en jQuery : http://creersonsiteweb.net/page-jquery-creer-extension | * 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 | * 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/ | * https://blog.internet-formation.fr/2014/04/moteur-de-recherche-php-avec-ajax-et-scroll-infini/ |
Version du 1 octobre 2019 à 11:59
Démarche
Didactique et socio-constructiviste : par la découverte en exploitant la partie introduction mise en contexte. Les codes et les exemples sont juste utilisés pour se familiariser et introduire les différences entre HTML - PHP et JavaScript (js, Json, Ajax, jQuery). Durant cette première phase, viens des situations formalisations et d'institutionnalisation pour réaliser et comprendre certains exercices et certaines activités. Dans un second temps est introduit la partie dessing et une initiation au jeu pour matérialiser les quelques éléments de bases. Dans un troisième temps une phase d'institutionnalisation est nécessaire avec la partie #Cours de base avant de passer aux notions de communications, d’interfaçage et d'interactivité
Introduction mise en context
- 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
- 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
(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: :
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 =
- Testeur de code en ligne, fait par vous même : https://codepen.io/travist/pen/jrBjBz
- 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