STIC:STIC I - Atelier technique 1
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 :
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 :
Computation avec JavaScript
Suivez les exemples étape par étape de la page :
De temps en temps on verra ensemble les aspects les plus importants.
Pour manier directement le code dans Visual studio code (conseillé) ou Brackets, vous pouvez télécharger les fichiers des exemples :
Utilisez la console du navigateur pour tester le code.
Workshop JavaScript de base
Si vous avez terminé avec la page sur la computation avec JavaScript, vous pouvez vous lancer dans un workshop qui suit la même logique des workshop sur HTML5 et CSS vus en MINIT
Fichiers à télécharger :
Utilisez la console du navigateur pour tester votre code.
Références
- (aspects formels et référence)
- (aspects théoriques et exemples)