ICS3C – Introduction à la programmation informatique

La programmation : un univers de possibilités!

Description de la vidéo

Avis aux lectrices et aux lecteurs : Cette vidéodescription présente en alternance la narration et les éléments visuels de la vidéo qui sont porteurs de contenu.

Les images strictement décoratives ou certains sons d’ambiance qui ne sont pas porteurs de contenu ne sont pas décrits.

Description sonore

Tout au long de la vidéo, on entend une musique de fond qui rappelle une celle d'un jeu vidéo.

Description visuelle

Gros plan sur un écran d’ordinateur. On y voit une ancienne version du jeu Pong. Un zoom arrière est effectué. Des bras pianotent sur le clavier d’un ordinateur portable. Un message apparaît dans lequel il est écrit : « Peux-tu faire le ménage de ta chambre s’il te plaît? » Un zoom avant est fait, et un curseur clique sur « Répondre ». Un deuxième message écrit : « OK! » suivi d’un émoticône sourire. La caméra monte et fait un plan large. On voit un robot assis. Du linge traîne sur le sol.

Narratrice

La source d’inspiration de la plupart des inventions humaines réside dans le besoin de résoudre un problème, dans le désir de se simplifier la vie et d’automatiser des actions ennuyantes ou répétitives.

Description visuelle

La caméra revient sur l’écran de l’ordinateur. On y voit, à droite, une chambre vue de haut dans laquelle se tient un robot immobile. À gauche, le curseur clique sur « Nouveau programme » et on voit la phrase suivante être écrite : « Robot_Nettoyer_Chambre ». Les mots sont séparés d’une barre de soulignement. Le curseur clique sur la touche « OK ». Un zoom arrière est fait, et l’image devient grise. L’ordinateur est toujours visible.

Narratrice

La programmation informatique est au cœur de nombreuses inventions qui ont vu le jour au cours des derniers siècles.

Description visuelle

L’ordinateur sort de l’image par la droite et une ligne du temps se dessine. Tour à tour, les inventions suivantes apparaissent avec un logo : « 1989, Internet », « 1976, Apple 1 », « 1963, Sketchpad », « 1952, Tic-Tac-Toe », « 1947, Transistor ».

Narratrice

Savais-tu que le premier programme informatique connu a été conçu en 1842 par Augusta Ada King? La comtesse de Lovelace travaillait alors sur l’ancêtre de l’ordinateur : la machine analytique.

Description visuelle

La ligne du temps s’arrête sur une image d’Augusta Ada King. Sous cette image, sa date de naissance et son nom sont écrits. L’image d’une machine analytique se place à côté de l’image d’Augusta Ada King.

Narratrice

Mais qu’est-ce qu’un programme informatique exactement?

Description visuelle

L’écran bouge vers le haut. La question « Mais qu’est-ce qu’un programme information exactement? » est écrite.

Narratrice

Un programme informatique, c’est un ensemble de codes ou d’instructions qui commande à une machine l’exécution de tâches complexes.

Description visuelle

La question s’efface et est remplacée par une représentation visuelle d’un programme informatique. C’est un grand carré dans lequel alternent grandes, moyennes et petites barres de couleurs. L’écran se déplace à droite et un robot dans une bulle envoie la main.

Narratrice

Qu’ils servent à exécuter des opérations mécaniques, à analyser des données, ou à créer des mondes entièrement virtuels, les codes sont partout, même là où nous ne les soupçonnons pas...

Description visuelle

Dans une bulle, le robot disparaît et laisse la place à une pince mécanique qui vise un boulon dans un mur. Dans une bulle, des points multicolores sont reliés par les lignes noires. Tout bouge. Dans une autre bulle, un homme se tient debout. Il porte des lunettes 3D et pointe les planètes en orbite autour de lui. Dans une autre bulle, une image d’ordinateur envoie des signaux, représentés par des lignes jaunes, brunes, bleues et grises, à un terminal. Celui-ci envoie d’autres signaux à des images de cinq machines agricoles.

Narratrice

Pour réaliser une tâche à l’aide de l’informatique, tu dois d’abord déterminer l’objectif de ton programme.

Description visuelle

La bulle s’agrandit et l’écran devient vert. La phrase suivante s’écrit : « //Objectif du programme ».

Narratrice

Il te faut ensuite choisir un environnement de développement et un langage de programmation.

Description visuelle

Sous « //Objectif du programme », il est écrit : « Nettoyer ma chambre à l’aide d’un robot ». Les mots CSS, Javacript, PHP, C++, C#, Visual Basic, Python et HTML gravitent autour de ces deux éléments.

Narratrice

Au moment de rédiger ton code, il convient de décomposer la tâche à accomplir en opérations simples.

Description visuelle

De la droite glisse un écran d’ordinateur, divisé en deux. À droite, une chambre vue de haut dans laquelle se tient un robot immobile. À gauche, un programme informatique avec son code. Au-dessus de du code sont placés les boutons « Arrêter », « Prévisualiser » et « Exécuter ». On y voit des barres colorées de différentes longueurs. Le curseur clique sur l’icône « Prévisualiser » dans le menu en haut de l’image. Dans l’écran de droite, le robot bouge, mais sur une boîte devant le lit.

Narratrice

Ton code devra enfin être mis à l’épreuve et ajusté pour que la tâche visée soit accomplie adéquatement et efficacement.

Description visuelle

D’autres codes informatiques sont écrits, et le robot se déplace librement dans la chambre. Il s’arrête soudainement et tourne sur lui-même.

Narratrice

Attends-toi à devoir retester ton programme à plusieurs reprises et à effectuer quelques débogages.

Description visuelle

Le curseur clique sur l’icône « Arrêter », et les lignes des codes informatiques se déplacent. Ensuite, le curseur clique sur l’icône « Exécuter ».

Narratrice

Si tu sais faire preuve de patience, de rigueur et de créativité, la programmation informatique t’aidera à résoudre bon nombre de situations.

Description visuelle

Un zoom arrière est fait et on revoit la chambre du début de la vidéo. Le robot est placé de profil et se dirige vers la droite. Il sort du cadre de l’image.

Narratrice

Elle te sera utile, peu importe le domaine qui te passionne : qu’il s’agisse des jeux vidéo, de la robotique, de la mécanique automobile ou même des arts de la scène. Développe tes compétences en programmation informatique et prends les commandes qui t’ouvriront les portes de l’avenir...

Description visuelle

La caméra zoome sur l’ordinateur. Des doigts tapent sur le clavier. L’écran d’ordinateur montre le jeu de Pac-Man. Ensuite, un gros plan est fait et on voit tour à tour un robot monté sur des chenilles, une voiture autonome émettant des signaux qui s’arrête devant un panneau arrêt et une scène de théâtre inondée de faisceaux lumineux multicolores. L’image revient sur l’ordinateur et on voit des mains inscrire le code informatique d’un jeu vidéo qui se met à fonctionner.

Fin de la description.

Bloc 4 – Structures de contrôle

    Question de réflexion 4

Quelles structures de contrôle sont les plus utiles pour la conception de ton jeu éducatif? 

Activités

Visionne les cinq premières minutes de la vidéo Les conditions if, if... else et if... else if... else pour avoir un aperçu du concept. À quoi sert une condition telle que la structure IF dans le code? Quelle est son importance?

Visionne le tutoriel La condition IF et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.

Voici un exemple d’une condition IF codée en JavaScript :

var age = 11;   if(age > 12) { console.log("Désolé, tu es trop jeune!"); }

Explique dans tes propres mots la structure de décision présente dans cet exemple et les éléments du code qui y sont associés. Insère ta définition de la condition IF dans ton glossaire.

Trouve une condition IF qui s’appliquerait à ton jeu éducatif. Partage tes idées avec les autres élèves du groupe-classe et détermine la façon de coder une des idées que tu aimes le plus.

 

Réfléchis à des situations dans ta vie où tu as recours à une structure de décision; par exemple : SI je me lève avant 7 h ALORS je prends l’autobus SINON je marche pour me rendre à l’école. Dans le forum de discussion, communique aux autres élèves une situation impliquant une structure de décision. 

Visionne le tutoriel La condition IF ELSE et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.

Regarde l’exemple ci-dessous d’une condition IF ELSE :

var sexe = "masculin";   if(sexe == "masculin") { console.log("Tu es un garçon!"); } else { console.log("Tu es une fille!"); }

Quels sont les éléments de langage obligatoires pour que ce type de condition fonctionne? Explique ta réponse dans tes propres mots et insère ta définition de la condition IF ELSE dans ton glossaire.

Trouve au moins deux conditions IF ELSE qui s’appliqueraient à ton jeu éducatif. Partage tes idées dans le forum de discussion et commente celles des autres élèves. Quelle idée te semble la plus utile pour dynamiser ton jeu?

 

Visionne le tutoriel La condition ELSE IF et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.

Examine le code suivant : 

var heure = 11;   if(heure < 10) { console.log("Bonne journée!"); } else if(heure > 18) { console.log("Bonne soirée!"); } else { console.log("Bonjour!"); }

Que se passe-t-il dans ce programme? Explique dans tes propres mots comment il est semblable ou différent aux exemples vus auparavant.

Quels sont les éléments de langage obligatoires pour que ce type de condition fonctionne? Explique ta réponse dans tes propres mots et insère ta définition de la condition ELSE IF dans ton glossaire.

Crée un jeu en JavaScript dont le but est de deviner un chiffre de 1 à 100 et qui indique à la joueuse ou au joueur si le chiffre qu'elle ou il suggère est trop élevé ou trop peu élevé. Lorsqu’elle ou il réussit à deviner le chiffre, indique le nombre d’essais qu'il lui a fallu pour le trouver. Effectue une recherche en ligne pour connaître la façon de générer un nombre au hasard.

Trouve une fonction ELSE IF qui s’appliquerait à ton jeu éducatif. Partage tes idées avec les autres élèves du groupe-classe dans le forum de discussion.

 

Le programme ci-dessous contient une erreur et ne peut être lu. Trouve l’erreur et corrige-la pour rendre le programme fonctionnel.

var actif != true;   if(actif = true) { console.log("Actif!"); }

Quel était le problème? Comment l’as-tu découvert?

Le programme ci-dessous contient des erreurs et ne peut être lu. Trouve les erreurs et corrige-les pour rendre le programme fonctionnel.

if(sexe == "masculin") { console.log("Tu es un garçon!"); } else (sexe == "feminin"){ console.log("Tu es une fille!") }

Quels étaient les problèmes? Comment les as-tu découverts?

Le programme ci-dessous contient une erreur et ne peut être lu. Trouve l’erreur et corrige-la pour rendre le programme fonctionnel.

if (age >= 13) { console.log("Tu as plus de 13 ans."); } else if(age == 13) { console.log("Tu as 13 ans."); } else { console.log("Tu as moins de 13 ans."); }

Quel était le problème? Comment l’as-tu découvert?

Pourquoi savoir déboguer ses programmes est-il important en programmation informatique? Quelles sont les habiletés essentielles pour y arriver?