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 3 – Éléments de programmation

    Question de réflexion 3

Quels éléments de programmation sont les plus utiles pour la conception de ton jeu éducatif?

Activités

Visionne le tutoriel Introduction au langage JavaScript – Partie 2 et reproduis ce qui y est fait. Pour faciliter ton apprentissage, télécharge et décompresse le fichier de départ

Dans tes propres mots, explique pourquoi console.log est si utile en programmation informatique et donne un exemple de contexte dans lequel il est judicieux de s’en servir. Intègre le tout dans ton glossaire.

Où, en Ontario, est-il possible d’étudier en français pour devenir programmeuse ou programmeur? Explore les différents programmes et les diverses options d’études dans le domaine. Quelle option d’études te serait la plus avantageuse?

La programmation informatique est souvent associée au développement de jeux et d’applications. Dresse une liste d’au moins cinq autres domaines dans lesquels travaillent les programmeuses et les programmeurs. Laquelle de ces options te semble la plus intéressante? Diffuse ta liste et ton avis dans le forum de discussion.

Consulte le document Les commentaires

  • Quelles informations devrait-on fournir au début d’un programme?
  • Pourquoi est-il important d’ajouter des commentaires dans le code? À quels endroits devrait-on le faire?
  • Diffuse ton avis dans le forum de discussion.
 

Visionne la vidéo d’animation Les variables en programmation pour en apprendre davantage sur ce concept fondamental. Définis ce concept dans tes propres mots. Diffuse ta définition dans le forum de discussion et insère-la dans ton glossaire.

Visionne le tutoriel Utilisation des variables et reproduis certains des exemples qui y sont présentés. 

En vue de concevoir un court programme en JavaScript, déclare et initialise deux variables qui contiennent chacune un nombre, puis déclare et initialise une variable qui contient ton nom. Ajoute un commentaire descriptif à chacune des variables déclarées. 

Le programme devra exécuter les tâches suivantes : 

  • calculer le produit des deux nombres et l’afficher;
  • afficher ton nom.
 

Visionne le tutoriel Les formulaires et reproduis l’exemple qui y est présenté. Résume dans tes propres mots ce qu’est un formulaire et intègre ta définition dans ton glossaire.

Crée un formulaire pour ton jeu éducatif dans lequel des entrées de données (p. ex., demander le nom de la joueuse ou du joueur et son âge) mèneront à des sorties de données du nom et de l’âge sous une autre forme (p. ex., Bonjour [nom de la joueuse ou du joueur], Bienvenue dans le jeu [nom de la joueuse ou du joueur]). 

 

À l’aide du document Balises INPUT, familiarise-toi avec les diverses balises INPUT que tu peux utiliser comme contrôle dans un formulaire.

  • Lesquelles voudrais-tu intégrer dans ton jeu éducatif? Imagine au moins trois questions que tu pourrais programmer en utilisant des balises INPUT différentes et partage tes idées dans le forum de discussion.
  • Commente les propositions d’au moins deux élèves du groupe-classe et considère leurs suggestions ou commentaires.
  • En fonction des suggestions ou des commentaires reçus, programme une question de ton jeu éducatif en utilisant une de ces balises INPUT dans le but d’approfondir ta compréhension de ce concept.

Quelle balise te permettrait de créer dans ton formulaire :

  • un menu déroulant?
  • une case à cocher?
  • un bouton radio?

À l’aide de l’attribut « type », définis la balise qui te permettrait d’ajouter une de ces composantes à ta page Web. 

Intègre un menu déroulant dans ta page Web. Dans quel contexte pourrais-tu utiliser un tel menu dans ton jeu éducatif?