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 7 – Structures itératives

    Question de réflexion 7

Quels éléments de temps et quelles animations simples permettent le plus efficacement de dynamiser ton jeu éducatif?

Activités

Réfléchis à des situations dans ta vie qui entraînent une structure répétitive; par exemple COMMENCER mon devoir de programmation, CONTINUER jusqu’à ce que j’aie terminé. 

Diffuse tes exemples dans le forum de discussion.

Visionne les deux parties du tutoriel Les structures d’itération et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse les fichiers de départ : fichier FORfichier WHILE.

À quoi sert principalement la boucle FOR? la boucle WHILE?

Voici un exemple de code pour une boucle FOR. Modifie-le pour que la boucle affiche le compte à partir de 5 au lieu de 0.

<!DOCTYPE html> <html> <body>   <p id="demo"></p>   <script> var i; for (i = 0; i < 10; i++) { document.getElementById("demo").innerHTML += i + "<br />"; } </script>   </body> </html>

À l’aide d’une boucle FOR, crée une structure d’itération qui fait afficher le nom des provinces canadiennes.

À l’aide d’une boucle WHILE, crée une seconde structure d’itération qui fait afficher les nombres de 7 à 20. 

 

Visionne le tutoriel Les listes (ARRAY) et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.

Pense à des contextes d’utilisation d’une telle liste dans un programme. Quand pourrait-elle être utile?

À partir du résultat obtenu à la piste d’exploration 4 de l’activité précédente, fais afficher le nom des provinces dans une liste (ARRAY) à l’aide d’une boucle FOR. 

Optimise le code de ton jeu éducatif en y intégrant une liste à un endroit propice.

En programmation, un code est parfois donné (gratuiciel) ou partagé (partagiciel). Dans d’autres cas, il est protégé par un droit d’auteur, car il devient la propriété intellectuelle de son titulaire.

  • Comment peux-tu déterminer si le code que tu veux utiliser est libre de droits d’auteur?
  • Quels sites Web donnent accès à des codes sources gratuits ou partagés? Diffuse quelques-unes de tes découvertes sur le forum de discussion.
 

Visionne le tutoriel Les fonctions setInterval et setTimeout et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ.

Dans quels contextes te servirais-tu de ces fonctions?

Crée un compteur dont la valeur de départ, zéro, est incrémentée jusqu’à 10, une seconde à la fois. Fais afficher un message lorsque le compteur atteint 10.

Voici le code pour faire afficher un message après trois secondes :

<!DOCTYPE html> <html> <body>   <p>Clique sur le bouton pour qu'après trois secondes le mot "Allo" s'affiche.</p>   <button onclick="maFonction()">Essaie</button>   <script> function maFonction() { setTimeout(function(){ alert("Allo"); }, 3000); } </script>   </body> </html>

Modifie le code pour faire afficher le message après 10 secondes. N’oublie pas de modifier également la consigne destinée à l’utilisatrice ou à l’utilisateur.

Comment peux-tu intégrer ces fonctions dans ton jeu éducatif? Réfléchis à l’endroit où les intégrer dans ton jeu de même qu’à l’utilité qu’elles pourraient y avoir. Trouve des exemples de code (gratuiciel ou partagiciel) que tu pourrais adapter.

 

Prends connaissance du code du jeu mythique Pong et analyse-le.

  • Que reconnais-tu dans ce code? Quelles structures de code te sont familières?
  • Pourrais-tu utiliser certaines de ces structures de code dans ton jeu?
  • Pourquoi ce jeu a-t-il révolutionné le monde du jeu vidéo et de la programmation?

Cherche sur le Web des exemples de codes d’autres jeux vidéo classiques (p. ex., Frogger, Dodger, Simon, Tetris, Asteroids, Space Invaders). Repère dans le code d’un de ces jeux des structures familières. Explique son fonctionnement dans tes mots en utilisant la terminologie propre à la programmation.

Une programmeuse ou un programmeur informatique ne se consacre pas uniquement aux jeux ou aux sites Web. Effectue une recherche pour trouver au moins cinq variantes de ce métier. Pour une de ces variantes, crée une fiche présentant un aspect de ce métier peu connu de la population générale.