« STIC:STIC I - Atelier technique 1 » : différence entre les versions
Ligne 97 : | Ligne 97 : | ||
Le '''code source''', c'est-à-dire toutes les instructions qui forment un programme ou une application, est le résultat de l'intégration entre le langage de ''base'' et l'environnement. | Le '''code source''', c'est-à-dire toutes les instructions qui forment un programme ou une application, est le résultat de l'intégration entre le langage de ''base'' et l'environnement. | ||
=== | === Le langage de ''base'' === | ||
Le langage de ''base'' a principalement trois fonctions : | |||
# '''Identifier et stocker les données à travers des références symboliques''' | |||
#: En JavaScript ceci ce fait normalement à travers des variables | |||
#: <source lang="JavaScript"> | |||
// Affecter une variable | |||
var cours = "Atelier technique I"; | |||
// Quel type de donnée ? | |||
typeof cours | |||
</source> | |||
#: | |||
# '''Fournir ou créer des procédures pour traiter les données''' | |||
#: En JavaScript ceci ce fait normalement à travers des fonctions | |||
#: <source lang="JavaScript"> | |||
function myProcedure(input) { | |||
//Do something | |||
var output = input + " transformation"; | |||
return output; | |||
} | |||
</source> | |||
#: | |||
# '''Fournir des méta-élément qui déterminent l'exécution du code''' | |||
#: Par exemple : | |||
#:* <source lang="JavaScript"> | |||
// Les boucles | |||
for (var i = 0; i < 10; i++) { | |||
console.log(i); | |||
} | |||
</source> | |||
#:* <source lang="JavaScript"> | |||
// Les structures de contrôle | |||
if (new Date().getHours() < 12) { | |||
console.log("Good morning!"); | |||
} else { | |||
console.log("Good afternoon!"); | |||
} | |||
</source> | |||
=== Workshop JavaScript de base === | === Workshop JavaScript de base === | ||
Ligne 136 : | Ligne 170 : | ||
#:Le résultat de ce script dans la console JavaScript est le suivant : | #:Le résultat de ce script dans la console JavaScript est le suivant : | ||
#:[[Fichier:JavaScript tutoriel base console log.jpg|cadre|néant|La méthode log() de l'objet Console permet d'afficher des messages dans la console JavaScript.]] | #:[[Fichier:JavaScript tutoriel base console log.jpg|cadre|néant|La méthode log() de l'objet Console permet d'afficher des messages dans la console JavaScript.]] | ||
== Références == | |||
* {{ Goblock | [[Tutoriel JavaScript de base]] }} (aspects formels et référence) | |||
*: | |||
* {{ Goblock | [[Computation avec JavaScript]] }} (aspects théoriques et exemples) |
Version du 23 octobre 2019 à 14:36
Cet article est en construction: un auteur est en train de le modifier.
En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.
Programme
Au programme (peut changer) :
- Introduction du projet Webmaster (évalué dans le cadre du cours STIC II)
- Retour sur l'Introduction à la programmation
- Introduction à JavaScript en prévision du cours STIC I de vendredi
Projet Webmaster
Pour toute information voir :
En bref :
- Travail qui sera évalué dans le cadre de l'ex16 du cours STIC II (fin de la première année)
- Ce n'est pas un projet comme dans le sens des cours ERGO II, VIP II, ...
- Types de projets possibles :
- Default : Installation et configuration d'un portail web (e.g. Word_press, Moodle, Mediawiki)
- Alternatif (plutôt pour niveau intermédiaire/avancé) : Petit projet de développement personnel. Vous pouvez nous soumettre votre idée, mais on pourra vous aider techniquement seulement si vous choisissez des projets qui utilisent :
- JavaScript / Node.js (voir par exemple JavaScript sur le serveur)
- R (voir Pensée computationnelle avec R en construction)
Les ateliers techniques vous proposent des techniques/outils pour mener à bien, et mieux comprendre, ce(s) projet(s).
Tâche pour le prochain Atelier
Réfléchir sur une idée de projet à développer pour le projet Webmaster. Pour inspiration voir les projets des étudiants des autres volées :
- Exercice 16 volée Wall-e
- Exercice 14 ou Projet Webmaster pour les volées précédentes
Introduction à la programmation
Retour sur :
I/O et Computation
Schéma de base de la programmation :
F(X) = Y
La computation consiste à formuler une fonction (dans le sens abstrait) qui mappe le input et le transforme en output.
Numérique / Digital
Tout est fait grâce au codage et encodage du :
- Input
- Output
- Et des instructions...
en code binaire.
Concepts trop abstraits sans la pratique
Réussir à reconduire ces aspects très abstraits à des concepts concret qu'on puisse comprendre est très difficile, voir impossible sans la pratique. Pour cette raison nous allons utiliser JavaScript en tant qu'outil cognitif pour :
- Mieux comprendre le fonctionnement des dispositifs numériques au sens large
- Développer des petits applications interactives (comme il a été le cas dans l'activité exploratoire Premiers pas avec JavaScript
Lien avec projet Webmaster
Même si cette activité est faite principalement dans la perspective du cours STIC, il y a un fort lien également avec le projet Webmaster. Si vous choisissez d'installer et adapter un portail (e.g. Word press, Moodle, Mediawiki, ...), le fonctionnement de ce portail suit le schéma conceptuel de la programmation :
- Le Input est représenté par l'URL (e.g. l'URL de la page d'un blog ou d'une page EduTechWiki)
- La Computation est déclenchée par cet URL, afin que le serveur collecte toutes les informations nécessaires (par exemple depuis une base de données)
- Les informations sont rendus sous forme de page HTML qui représente le Output
Introduction à JavaScript
JavaScript est un langage de scripting, qui nécessite donc d'un interprète. L'interprète peut se trouver à différents endroits, ou environnements, dont le plus commun est le moteur JavaScript qui se trouve dans votre navigateur.
On peut diviser la programmation en deux niveaux :
- Le langage de base
- Il est utile surtout pour le traitement de l'information. Sujet de cet Atelier.
- L'environnement
- Il détermine les possibilités d'échange en terme de I/O pour le traitement de l'information. Sujet de vendredi et du reste de STIC en relation avec l'interactivité avec JavaScript
Le code source, c'est-à-dire toutes les instructions qui forment un programme ou une application, est le résultat de l'intégration entre le langage de base et l'environnement.
Le langage de base
Le langage de base a principalement trois fonctions :
- Identifier et stocker les données à travers des références symboliques
- En JavaScript ceci ce fait normalement à travers des variables
// Affecter une variable var cours = "Atelier technique I"; // Quel type de donnée ? typeof cours
- Fournir ou créer des procédures pour traiter les données
- En JavaScript ceci ce fait normalement à travers des fonctions
function myProcedure(input) { //Do something var output = input + " transformation"; return output; }
- Fournir des méta-élément qui déterminent l'exécution du code
- Par exemple :
// Les boucles for (var i = 0; i < 10; i++) { console.log(i); }
// Les structures de contrôle if (new Date().getHours() < 12) { console.log("Good morning!"); } else { console.log("Good afternoon!"); }
- Par exemple :
Workshop JavaScript de base
Fichiers à télécharger :
Utilisation de la Console JavaScript
Pour utiliser la Console :
- Internet Explorer : Menu Outils > Outils de développement (ou F12)
- Firefox : le scratchpad (SHIFT F4), sinon la console (F12) qui permet d'entrer une ligne.
- Chrome : Menu Outils > Console JavaScript (ou F12)
- Safari : D'abord dans les Options > Avancées cocher la case "Afficher le menu Développement dans la barre des menus", puis CTRL+Alt+I ou CTRL+Alt+C
- Opera: Menu Page > Outils de Développement > Opera Dragonfly (ou CTRL+Shift+I)
La console JavaScript est un endroit très utile pour tester du code JavaScript pour deux raisons :
- On peut saisir directement du code dans la console et l'évaluer. Dans l'image suivante, les lignes précédées par > sont des lignes avec du code, et les lignes précédées par <- proposent le résultat de l'évaluation du code.
- On peut communiquer avec la Console JavaScript. Par exemple la notation
console.log()
permet d'écrire un message dans la Console. Pour ceux qui ont utilisé Flash, cette instruction est similaire à la fonction trace() de Flash. Voici un exemple :for(var i = 0; i < 5; i++) { console.log("Cycle actuel : " + i); }
- Le résultat de ce script dans la console JavaScript est le suivant :
Références
- (aspects formels et référence)
- (aspects théoriques et exemples)