STIC:STIC I - Atelier technique 1

De EduTech Wiki
Aller à : navigation, rechercher

Cette page fait partie des cours STIC I et STIC II

STIC


1 Programme

Au programme (peut changer) :

2 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 :
    1. Default : Installation et configuration d'un portail web (e.g. Word_press, Moodle, Mediawiki)
    2. 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 :

Les ateliers techniques vous proposent des techniques/outils pour mener à bien, et mieux comprendre, ce(s) projet(s).

2.1 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 à partir de la volée Wall-e
  • Exercice 14 ou Projet Webmaster pour les volées précédentes
Attention : pour des raisons de sécurité les projets webmaster des étudiants sont accessibles seulement sur le réseau de l'UNIGE ou via VPN

3 Introduction à la programmation

Retour sur :

3.1 I/O et Computation

Schéma de base de la programmation :

Articulation entre Input, Computation et Output

3.2 F(X) = Y

La computation consiste à formuler une fonction (dans le sens abstrait) qui mappe le input et le transforme en output.

F(X) = Y

3.3 Numérique / Digital

Tout est fait grâce au codage et encodage du :

  • Input
  • Output
  • Et des instructions...

en code binaire.

Programmer signifie traduire les intentions du développeur afin que la machine les exécute conformément aux attentes. Adaptation de Denning & Martell (2015, p. 90, Fig. 5-3)

3.4 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)

3.5 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 rendues sous forme de page HTML qui représente le Output

4 Introduction à JavaScript

JavaScript est un langage de scripting, qui nécessite donc 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.

Les trois niveaux du code JavaScript.

On peut diviser la programmation en deux niveaux :

  1. Le langage de base
    Il est utile surtout pour le traitement de l'information (voir Tutoriel JavaScript de base pour une référence). Sujet de cet Atelier.
  2. 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.

4.1 Le langage de base

Le langage de base a principalement trois fonctions :

  1. Identifier et stocker les données à travers des références symboliques
    En JavaScript ceci se fait normalement à travers des variables
    // Affecter une variable
    var cours = "Atelier technique I";
    
    // Quel type de donnée ?
    typeof cours
    
  2. Fournir ou créer des procédures pour traiter les données
    En JavaScript ceci se fait normalement à travers des fonctions
    function myProcedure(input) {
      //Do something
      var output = input + " transformation";
      return output;
    }
    
  3. Fournir des méta-éléments qui déterminent l'exécution du code
    Par exemple :
    • // Les boucles
      for (let 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!");
      }
      

4.2 Utilisation de la Console JavaScript

Pour tester le code, faites du copier/coller dans la console du navigateur

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)
Console des erreurs en Google Chrome

La console JavaScript est un endroit très utile pour tester du code JavaScript pour deux raisons :

  1. 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.
    La console du navigateur évalue directement du code.
  2. 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(let i = 0; i < 5; i++) {
        console.log("Cycle actuel : " + i);
    }
    
    Le résultat de ce script dans la console JavaScript est le suivant :
    La méthode log() de l'objet Console permet d'afficher des messages dans la console JavaScript.

4.3 Computation avec JavaScript

Entraînez une lecture selective basée sur le code :
  1. Lisez d'abord le bout de code correspondant
  2. Si vous le comprenez (vraiment !) passez à l'étape suivante
  3. Si non, lisez les explications

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.

4.4 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.

5 Références