Ce cours introduit aux trois langages de programmation du Web que sont l'HTML, le CSS et le Javascript. L'HTML est un langage de balisage qui permet de décrire un document et sa structure. Le CSS est un langage qui permet de définir des règles de style à appliquer à un document. Enfin, Javascript est un langage permettant d'ajouter un aspect dynamique à une page web.
Présentation réalisée dans le cadre du cours de "HTML / CSS "donné à l'École Supérieure de Commerce et d'Économie Numérique de Paris.
PLAN :
0.Introduction
1. Les bases du developpement web
- Qu'est-ce que le HTML ?
- Son fonctionnement
- Les navigateurs
- Les dossiers
2. HTML5
- Comment créer un fichier HTML
- Doctype
- Les balises
- La structure
3. CSS
- Link CSS
- Les propriétés
4. Les ressources du web
5. Sand Box
6. Q&A
Présentation réalisée dans le cadre du cours de "HTML / CSS "donné à l'École Supérieure de Commerce et d'Économie Numérique de Paris.
PLAN :
0.Introduction
1. Les bases du developpement web
- Qu'est-ce que le HTML ?
- Son fonctionnement
- Les navigateurs
- Les dossiers
2. HTML5
- Comment créer un fichier HTML
- Doctype
- Les balises
- La structure
3. CSS
- Link CSS
- Les propriétés
4. Les ressources du web
5. Sand Box
6. Q&A
Construire une application sur l'architecture modèle-vue-contrôleur en PHP à partir d'un exemple simple : une liste de choses à faire, avec deux pages types : liste et détails.
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Objectif général
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Créer un fil d’Ariane
Mettre en forme des listes
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Créer une page d’atterrissage
Ce Support de cours Spring contient :
- Architecture JEE (Over view)
- Spring Overview
- Spring IOC
- Spring MVC
- Spring Integration (RMI, JaxWS, JaxRS, JMS, JMX,...)
- Spring Security
Bon apprentissage à tous
Cette présentation concerne le développement piloté par les tests (TDD, Test-Driven Development). Cette méthodologie se base sur des tests unitaires qui testent de manière indépendante des unités de code (module, procédure/fonction, classe...). En particulier, cette présentation utilise la librairie CUnit utilisée pour le langage C.
Dans ce cours, on découvre comment construire une interface graphique en Python en utilisant la librairie Tk. Après avoir vu les différents composants de base, ce cours présente la programmation évènementielle qui permet d'écrire du code qui réagit à des évènements comme le clic sur un bouton, par exemple.
Construire une application sur l'architecture modèle-vue-contrôleur en PHP à partir d'un exemple simple : une liste de choses à faire, avec deux pages types : liste et détails.
Objectif général : Prendre en main l’un des frameworks PHP les plus utilisés
Objectifs spécifiques
Faire correspondre une URL donnée à un traitement précis grâce au routage
Regrouper des traitements connexes grâce aux contrôleurs
Récupérer les données d’une requête http grâce à Request
Retourner des contenus aux formats texte, HTML, JSON, etc. grâce à Response
Intégrer des données dans des templates grâce à Blade
Interagir avec l’utilisateur grâce aux formulaires
Créer, mettre à jour et suivre les évolutions d’un schéma de base de données grâce aux migrations
Faciliter la communication avec une base de données grâce à Eloquent
Ce support de cours contient les concepts fondamentaux de la sécurité des applications Web Statless avec Json Web Token. Des applications de mise en oeuvre de JWT et Spring Security pour les applications basées sur les Micro-services sont publiées ma chaîne vidéo Youtube :
https://www.youtube.com/user/mohamedYoussfi
Le code source des applications est publié sur mon compte GitHUB:
https://github.com/mohamedYoussfi/
Bon apprentissage
Objectif général
Prendre en main le framework CSS le plus utilisé
Objectifs opérationnels
Positionner du contenu avec le système de grille
Créer des barres de navigation
Créer un fil d’Ariane
Mettre en forme des listes
Mettre en forme des tableaux
Créer des formulaires
Créer des boutons
Mettre en forme des images
Créer une page d’atterrissage
Ce Support de cours Spring contient :
- Architecture JEE (Over view)
- Spring Overview
- Spring IOC
- Spring MVC
- Spring Integration (RMI, JaxWS, JaxRS, JMS, JMX,...)
- Spring Security
Bon apprentissage à tous
Cette présentation concerne le développement piloté par les tests (TDD, Test-Driven Development). Cette méthodologie se base sur des tests unitaires qui testent de manière indépendante des unités de code (module, procédure/fonction, classe...). En particulier, cette présentation utilise la librairie CUnit utilisée pour le langage C.
Dans ce cours, on découvre comment construire une interface graphique en Python en utilisant la librairie Tk. Après avoir vu les différents composants de base, ce cours présente la programmation évènementielle qui permet d'écrire du code qui réagit à des évènements comme le clic sur un bouton, par exemple.
Ce cours présente les techniques que l'on peut utiliser pour effectuer des calculs parallèles avec une machine. La première partie introduit à la notion de parallélisme et de processus. Elle présente ensuite comment lancer et manipuler des processus avec les modules subprocess et multiprocessing. On y voit également comment communiquer entre processus avec des Queue et des Pipe. La deuxième partie présente les threads et leur utilisation avec le module threading. On y voit également comment créer un pool de workers/executors pour exécuter des jobs. Enfin, la dernière partie présente le framework dispy qui permet de facilement faire du calcul distribué et exploiter le parallélisme de données.
Ce cours présente le notion de qualité de code et quels sont les critères et pratiques à adopter pour produire du code de qualité. Il présente les erreurs de programmation les plus fréquentes auprès des apprentis programmeurs. La deuxième partie du cours présente la notion de convention de codage et en particulier le PEP 0008 qui décrit des conventions à adopter lorsqu'on programme en Python.
Cette conférence présente le framework Johnny-Five qui permet de programmer des cartes embarquées à l'aide d'un module Node.js. Après un tour rapide du JavaScript et de son fonctionnement, en particulier la programmation fonctionnelle et l'exécution pilotée par les évènements, la présentation décrit Node.js et aborde rapidement son fonctionnement. La troisième partie présente Johnny-Five et plusieurs exemples simples de contrôle d'une LED et de l'utilisation des entrées/sorties numériques et analogiques.
Cette conférence présente LaTeX, un outil permettant de réaliser des documents de haute qualité typographique et professionnelle. Après avoir présenté quelques règles de typographie de la langue française, la présentation fait découvrir les bases de LaTeX et montre comment réaliser son premier document. Elle présente ensuite plusieurs constructions de base comme les listes, l'inclusion d'images et de tableaux, les mathématiques, les listings de code source. Enfin, elle termine avec des constructions plus avancées, comme la notion de figure et références croisées.
Ce cours présente la notion de système embarqué temps-réel et comment il est possible de gérer cela au niveau software avec un Linux embarqué. Plusieurs solutions sont présentées : OS temps-réel, linux préemptif et support hardware. Enfin, le cours présente le PRU-ICSS, dont est dotée la BeagleBone Black, une unité de calcul spécialisée pour les applications temps réel. Le cours présente comment programmer le PRU et notamment comment compiler un code à sa destination à l'aide d'un langage d'assemblage.
Ce cours présente ce qu'est l'internet des objets (IoT), un réseau parallèle au web connectant entre eux des dispositifs physiques. Les différences majeures entre l'IoT et le web sont mises en avant, ainsi que les grands défis auxquels le monde de l'IoT est confronté. Le cours présente ensuite brièvement comment on peut gérer un système embarqué à distance, notamment pour la maintenance, le monitoring, le disaster recovery, notamment à l'aide d'un watchdog. Enfin, pour conclure, plusieurs architectures réseaux possibles sont présentées, pour inter-connecter des systèmes embarqués et les relier au web.
Ce cours présente les principaux moyens de communications que l'on peut déployer au sein d'un système embarqué. Après un rappel sur les différents types de communication (série/parallèle, synchrone/asynchrone, half-duplex/full-duplex), le cours présente le port série ainsi que l'implémentation UART. Vient ensuite le bus USB et les deux modes en hôte ou périphérique. Après cela, le cours présente les protocoles I2C et puis SPI. Enfin, il termine avec le simple bus 1-Wire. Tous ces différents moyens de communication sont disponibles sur la BeagleBone Black et le cours illustre comment les manipuler à l'aide du Linux embarqué.
Ce cours présente ce qu'est Internet et son fonctionnement. En partant de l'ordinateur personnel ou smartphone connectés en un réseau local, le cours remonte petit à petit vers le fournisseur d'accès et l'Internet complet. Le cours présente ensuite plusieurs protocoles qui assurent le bon fonctionnement d'Internet et des services qu'il permet d'offrir. Enfin, la dernière partie concerne l'internet des objets.
Git est un logiciel de gestion de versions décentralisé qui vous permettra de gérer la vie d'un code informatique. Il permet une stratégie de backup, de gérer des versions et de stocker tout l'historique des modifications apportées à un projet informatique.
Dans ce cours, on découvre comment lire et écrire des fichiers à l'aide de Python. Il est possible de créer des fichiers texte ou des fichiers binaires. Pour manipuler un fichier, il faut d'abord l'ouvrir, puis on peut faire les opérations et enfin on doit le refermer.
Ce premier cours présente les notions d'objet et de classe, et le lien entre elles. Il présente aussi le premier concept clé de la programmation orientée objet, à savoir l'encapsulation des données. Les exemples sont fournis dans plusieurs langages (Python, C#, Java, C++ et PHP).
Ce cours présente la programmation fonctionnelle et montre comment il est possible de programmer avec ce paradigme en utilisant Python. La première partie présente la notion d'objet de type fonction, les fonctions lambda, le type callable et les closures. La deuxième partie présente les décorateur et montre comment ajouter du comportement à une fonction à l'aide d'un décorateur. La troisième partie présente les itérateurs et les générateurs qui, grâce à l'instruction yield, génère les données à la demande.
Ce deuxième cours aborde la programmation réseau, c'est-à-dire le développement d'applications avec plusieurs composants qui communiquent entre eux via la réseau. Après une rapide présentation des protocoles UDP et TCP, le cours aborde la notion de socket et présente le module Python de même nom. Le cours présente deux applications concrètes : une application de chat (basé sur UDP) et une application echo (basé sur TCP). Le cours se termine par la découverte de la notion de protocole de communication et de la définition du format des messages échangés.
Slides du cours "JAVA1001 : Introduction à la programmation Java" de la formation "Apprendre Java et la Programmation Orientée-Objets" du learning center de http://www.ukonline.be
Ce deuxième cours concerne les tuples, séquences non modifiables d'éléments. On peut les étendre en tuples nommés en ajoutant un nom à chacune des entrées du tuple, appelées alors champs. Enfin, on peut aller plus loin et définir des objets en associant des fonctions à des données. Cette seconde partie introduit à la programmation orientée objet.
Présentation du projet de transmission numérique dans lequel les étudiants sont amenés, en équipes mixtes électroniciens - informaticiens, à développer une application qui, sur base de données collectées par des senseurs, propose une analyse de ces dernières pour fournir un service.
HTML 4 pour les nuls » par E. Tittel, N. Pitts et C. Valentine
« HTML : précis et concis » par J. Niederst et J. Guérin au édition O’Reilly
« Introduction à HTML et CSS » par E. Sarrion au édition O’Reilly
« HTML et XHTML : La référence » de C. Musciano, B. Kennedy et J. Guérin au édition O’Reilly
N’importe quel autre bouquin sur HTML…
Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.
Objectif général : Découvrir quelques nouveautés du HTML5
Objectifs opérationnels :
Connaître les avantages du HTML5
Utiliser les nouveaux éléments de structuration
Utiliser les nouveaux éléments conteneurs
Utiliser les nouveaux éléments de contenu incorporé
Utiliser les nouveaux éléments et attributs de formulaire
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxtanokouakouludovic
Dans un monde de plus en plus connecté, le développement web joue un rôle crucial en permettant la création de sites internet et d’applications en ligne qui façonnent notre expérience en ligne. Au cours de ce programme, nous allons explorer les fondamentaux du développement web, des langages de programmation essentiels comme HTML et CSS. Que vous soyez novice en programmation ou que vous ayez déjà une expérience, ce cours vous fournira les connaissances et les compétences nécessaires pour prendre en main le monde du développement web.
Introduction à la partie technique de la formation Digitalent mise en place par l'équipe ECAM. Cette formation couvre l'impression 3D, la programmation et l'électronique embarquée.
Ce cours présente la notion de système d'exploitation et en particulier les Linux embarqués qui sont spécialement conçus pour des systèmes embarqués de haut niveau avec des processeurs à usage général (GPP) comme unité de calcul principale. Il explique ensuite comment Linux embarqué démarre, quelles sont les différentes phases et modalités de stockage du système d'exploitation. Enfin, il présente la BeagleBone Black, ses caractéristiques et comment la programmer. Le cours conclut en expliquant la notion de driver de périphérique et comment ils sont conçus sous Linux à l'aide de fichiers.
Ce premier cours introduit la notion de système embarqué en commençant par en donner une définition. Il les caractérise ensuite sur base de plusieurs critères : type d'application, de fonction visé, taille, fiabilité, efficacité. Il présente ensuite plusieurs aspects hardware (unité de calcul, architecture matérielle, composants clés) et software (niveau de programmation, processus de développement). Enfin, il conclut en discutant sur ce qu'est un ingénieur en systèmes embarqués.
Cette présentation montre plusieurs outils gratuits qui peuvent être utilisés pour gérer plusieurs aspects de la gestion de projets, en particulier informatique, de manière collaborative. On y voit comment versioner son code avec Git, déployer son code avec Heroku, tester son code avec Travis, gérer et planifier son temps et ses tâches avec Trello, FreedCamp et Tom'splanner, comment communiquer avec Slack et comment rédiger sa documentation avec Read the Docs.
Ce cours présente comment réaliser des interfaces graphiques avec Python en utilisant la librairie Kivy. La première partie rappelle les principes de la programmation évènementielle puis présente la séparation interface/comportement à l'aide de fichiers KV et Python. La deuxième partie présente comment réaliser des dessins avec les composants Canvas. On y voit comment dessiner des formes, appliquer des transformations et on termine avec un exemple de composants déplaçables.
Ce second cours d'algorithmique présente des techniques utilisées en intelligence artificielle pour trouver une solution à un problème de recherche. La première partie définit un problème de recherche : état, action, arbre d'exécution, espace d'états, cout, objectif et formalisation. La deuxième partie présente plusieurs algorithmes de recherche : non informé (BFS, UCS, DFS, DLS, ID-DFS, BS), informé (BFS, A*) et avec adversaire (Minimax, Alpha-Beta Pruning). Enfin, la troisième partie présente deux librairies Python qui implémentent des algorithmes de recherche.
Ce cours introduit à l'intelligence artificielle. La première partie du cours présente et définit ce qu'est l'intelligence et décrit les notions d'agent rationnel et d'environnement et leurs propriétés. Ces deux concepts permettent d'offrir un cadre de réflexion sur l'intelligence. La fin de la première partie présente les neufs formes d'intelligence selon Howard Gardner. La seconde partie du cours présente et définit l'intelligence artificielle, initiée par Marvin Minsky et John McCarthy au MIT. Elle présente également le test de Turing, test permettant de déterminer si une machine peut penser. Cette partie se termine en présentant les six grands domaines de l'intelligence artificielle.
Ce cours est le premier en lien avec l'algorithmique présente les algorithmes et fonctions récursives ainsi que le type abstrait de données arbre. La première partie revient sur les notions de problème, algorithhme et spécification. La deuxième partie présente la récursion et de nombreux exemples. Enfin, la troisième partie présente le type abstrait de données arbre qui permet d'organiser des données de manière hiérarchique. Le cours se termine avec une introduction aux notions de backtracking et lookahead.
Ce cours concerne la manipulation des chaines de caractères et les expressions régulières. La première partie présente la classe str Python ainsi que les opérations qu'il est possible de faire sur des objets str. La seconde partie concerne les expressions regulières qui permettent de valider des chaines de caractères ou d'en extraire des sous-chaines qui satisfont un motif donné. On y voit finalement comment utiliser le module re Python.
Ce premier cours introduit à plusieurs aspects liés au développement informatique. Le cours présente comment versioner son code avec le système Git et comment le déployer avec Heroku. Il présente ensuite comment débugguer avec le module pdb et comment profiler son code avec les modules timeit et profile. Enfin, le cours termine en présentant le concept de tests unitaires que l'on peut construire avec les modules doctest et unittest.
Ce cours présente la notion de qualité de code et comment il est possible de l'évaluer grâce à des métriques mesurables. Après avoir présenté plusieurs métriques standards, il se concentrer sur des aspects de qualité de code spécifique à l'orienté objet et présente les cinq concepts de l'orienté objet. La deuxième partie du cours présente plusieurs bonnes pratiques à avoir en programmation orientée objet, sur base d'exemples concrets.
Ce cours concerne les arbres, structure de données organisant les données de manière hiérarchique dans de nœuds reliés entre eux par une relation parent-enfant. Le cours présente les arbres généraux et ensuite les arbres binaires, où chaque nœud possède 0 ou 2 enfants. Enfin, le cours termine en présentant des algorithmes de recherche et en particulier l'arbre binaire de recherche.
Ce cours introduit à la notion de type abstrait de données (TAD). On commence par y découvrir les principes de complexité temporelle et spatiale permettant d'analyser les performances d'une structure de données et d'algorithmes. Ensuite, le cours présente plusieurs TAD : la pile, la file, le deque et le vecteur. Enfin, il présente comment implémenter des TAD avec des structures chainées.
Ce cours présente le langage UML qui permet notamment de modéliser des logiciels programmés en orienté objet. Ce cours présente les diagrammes de classes qui permettent de décrire la structure d'un logiciel et les diagrammes d'activité qui permettent de décrire les aspects dynamiques de l'exécution.
Ce cours concerne le polymorphisme, c'est-à-dire la capacité pour une variable de prendre plusieurs types de donnée durant le temps de sa vie. Le cours présente aussi la notion de classe abstraite et d'interface qui est une classe abstraite pure.
Ce cours aborde la gestion d'erreurs en programmation, c'est-à-dire comment gérer les situations où une erreur se produit. Après avoir présenté le principe des spécifications et de la programmation défensive avec l'instruction assert, ce cours présente l'instruction try/except qui permet de capturer des erreurs. Enfin, le cours termine en présentant comment définir ses propres erreurs et les générer avec l'instruction raise.
Ce cours présente la notion d'héritage entre classes qui permet de construire une relation de type "is-a". On crée une sous-classe à partir d'une super-classe, pour en hériter une partie de ses membres. On peut ensuite y ajouter des membres spécifiques. Ce cours présente également la redéfinition de méthodes, et comment utiliser les modificateurs de visibilité des membres.
MongoDB in a scale-up: how to get away from a monolithic hell — MongoDB Paris...Horgix
This is the slide deck of a talk by Alexis "Horgix" Chotard and Laurentiu Capatina presented at the MongoDB Paris User Group in June 2024 about the feedback on how PayFit move away from a monolithic hell of a self-hosted MongoDB cluster to managed alternatives. Pitch below.
March 15, 2023, 6:59 AM: a MongoDB cluster collapses. Tough luck, this cluster contains 95% of user data and is absolutely vital for even minimal operation of our application. To worsen matters, this cluster is 7 years behind on versions, is not scalable, and barely observable. Furthermore, even the data model would quickly raise eyebrows: applications communicating with each other by reading/writing in the same MongoDB documents, documents reaching the maximum limit of 16MiB with hundreds of levels of nesting, and so forth. The incident will last several days and result in the loss of many users. We've seen better scenarios.
Let's explore how PayFit found itself in this hellish situation and, more importantly, how we managed to overcome it!
On the agenda: technical stabilization, untangling data models, breaking apart a Single Point of Failure (SPOF) into several elements with a more restricted blast radius, transitioning to managed services, improving internal accesses, regaining control over risky operations, and ultimately, approaching a technical migration when it impacts all development teams.
Ouvrez la porte ou prenez un mur (Agile Tour Genève 2024)Laurent Speyser
(Conférence dessinée)
Vous êtes certainement à l’origine, ou impliqué, dans un changement au sein de votre organisation. Et peut être que cela ne se passe pas aussi bien qu’attendu…
Depuis plusieurs années, je fais régulièrement le constat de l’échec de l’adoption de l’Agilité, et plus globalement de grands changements, dans les organisations. Je vais tenter de vous expliquer pourquoi ils suscitent peu d'adhésion, peu d’engagement, et ils ne tiennent pas dans le temps.
Heureusement, il existe un autre chemin. Pour l'emprunter il s'agira de cultiver l'invitation, l'intelligence collective , la mécanique des jeux, les rites de passages, .... afin que l'agilité prenne racine.
Vous repartirez de cette conférence en ayant pris du recul sur le changement tel qu‘il est généralement opéré aujourd’hui, et en ayant découvert (ou redécouvert) le seul guide valable à suivre, à mon sens, pour un changement authentique, durable, et respectueux des individus! Et en bonus, 2 ou 3 trucs pratiques!
Le Comptoir OCTO - Équipes infra et prod, ne ratez pas l'embarquement pour l'...OCTO Technology
par Claude Camus (Coach agile d'organisation @OCTO Technology) et Gilles Masy (Organizational Coach @OCTO Technology)
Les équipes infrastructure, sécurité, production, ou cloud, doivent consacrer du temps à la modernisation de leurs outils (automatisation, cloud, etc) et de leurs pratiques (DevOps, SRE, etc). Dans le même temps, elles doivent répondre à une avalanche croissante de demandes, tout en maintenant un niveau de qualité de service optimal.
Habitué des environnements développeurs, les transformations agiles négligent les particularités des équipes OPS. Lors de ce comptoir, nous vous partagerons notre proposition de valeur de l'agilité@OPS, qui embarquera vos équipes OPS en Classe Business (Agility), et leur fera dire : "nous ne reviendrons pas en arrière".
Le Comptoir OCTO - Qu’apporte l’analyse de cycle de vie lors d’un audit d’éco...OCTO Technology
Par Nicolas Bordier (Consultant numérique responsable @OCTO Technology) et Alaric Rougnon-Glasson (Sustainable Tech Consultant @OCTO Technology)
Sur un exemple très concret d’audit d’éco-conception de l’outil de bilan carbone C’Bilan développé par ICDC (Caisse des dépôts et consignations) nous allons expliquer en quoi l’ACV (analyse de cycle de vie) a été déterminante pour identifier les pistes d’actions pour réduire jusqu'à 82% de l’empreinte environnementale du service.
Vidéo Youtube : https://www.youtube.com/watch?v=7R8oL2P_DkU
Compte-rendu :
L'IA connaît une croissance rapide et son intégration dans le domaine éducatif soulève de nombreuses questions. Aujourd'hui, nous explorerons comment les étudiants utilisent l'IA, les perceptions des enseignants à ce sujet, et les mesures possibles pour encadrer ces usages.
Constat Actuel
L'IA est de plus en plus présente dans notre quotidien, y compris dans l'éducation. Certaines universités, comme Science Po en janvier 2023, ont interdit l'utilisation de l'IA, tandis que d'autres, comme l'Université de Prague, la considèrent comme du plagiat. Cette diversité de positions souligne la nécessité urgente d'une réponse institutionnelle pour encadrer ces usages et prévenir les risques de triche et de plagiat.
Enquête Nationale
Pour mieux comprendre ces dynamiques, une enquête nationale intitulée "L'IA dans l'enseignement" a été réalisée. Les auteurs de cette enquête sont Le Sphynx (sondage) et Compilatio (fraude académique). Elle a été diffusée dans les universités de Lyon et d'Aix-Marseille entre le 21 juin et le 15 août 2023, touchant 1242 enseignants et 4443 étudiants. Les questionnaires, conçus pour étudier les usages de l'IA et les représentations de ces usages, abordaient des thèmes comme les craintes, les opportunités et l'acceptabilité.
Résultats de l'Enquête
Les résultats montrent que 55 % des étudiants utilisent l'IA de manière occasionnelle ou fréquente, contre 34 % des enseignants. Cependant, 88 % des enseignants pensent que leurs étudiants utilisent l'IA, ce qui pourrait indiquer une surestimation des usages. Les usages identifiés incluent la recherche d'informations et la rédaction de textes, bien que ces réponses ne puissent pas être cumulées dans les choix proposés.
Analyse Critique
Une analyse plus approfondie révèle que les enseignants peinent à percevoir les bénéfices de l'IA pour l'apprentissage, contrairement aux étudiants. La question de savoir si l'IA améliore les notes sans développer les compétences reste débattue. Est-ce un dopage académique ou une opportunité pour un apprentissage plus efficace ?
Acceptabilité et Éthique
L'enquête révèle que beaucoup d'étudiants jugent acceptable d'utiliser l'IA pour rédiger leurs devoirs, et même un quart des enseignants partagent cet avis. Cela pose des questions éthiques cruciales : copier-coller est-il tricher ? Utiliser l'IA sous supervision ou pour des traductions est-il acceptable ? La réponse n'est pas simple et nécessite un débat ouvert.
Propositions et Solutions
Pour encadrer ces usages, plusieurs solutions sont proposées. Plutôt que d'interdire l'IA, il est suggéré de fixer des règles pour une utilisation responsable. Des innovations pédagogiques peuvent également être explorées, comme la création de situations de concurrence professionnelle ou l'utilisation de détecteurs d'IA.
Conclusion
En conclusion, bien que l'étude présente des limites, elle souligne un besoin urgent de régulation. Une charte institutionnelle pourrait fournir un cadre pour une utilisation éthique.
2. Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons
Attribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International.
3. Rappels
Manipulation de fichiers texte et binaire
Ouverture et fermeture du fichier
Lecture et écriture d’un fichier
Gestion des erreurs d’entrée/sortie
Encodage de l’information
Encodage des caractères, standard Unicode
Sérialisation avec le module pickle
Stockage bas niveau avec le module struct
3
4. Objectifs
Comprendre le World Wide Web (WWW)
Identification des ressources avec des URLs
Principe du client-serveur
Couches principales de l’Internet
Langages du web
Création de documents avec HTML (HyperText Markup Language)
Définition de styles avec CSS (Cascading Style Sheet)
Aspect dynamique côté client avec Javascript
4
6. World Wide Web (WWW)
Espace d’informations contenant des ressources
Documents texte et autres ressources
Ressources liées entre elles par des liens hypertextes
Identification des ressources par des URLs
Bref historique
Inventé par Paul Otlet (visionnaire) en 1934
Inventé par Tim Berners-Lee en 1989
Premier navigateur web en 1990 avec l’aide de Robert Cailliau
6
8. Internet (1)
Système composé d’un ensemble de réseaux interconnectés
Relie des milliards de machines entre elles
Lancé en Californie en 1969 (ARPANET)
Premier échange d’un message électronique entre deux machines
Premières connexions intercontinentales en 1988 (NORDUnet)
Réseau d’échange de données pour cinq pays nordiques d’Europe
Supporte de nombreuses ressources et services
WWW, app, e-mail, téléphonie, partage de fichiers, jeu en ligne...
8
10. Client/Serveur
Communication entre un client et un serveur
1 Le client se connecte au serveur
2 Le serveur accepte la connexion
3 Le client et le serveur communiquent
1 Le client envoie une requête au serveur
2 Le serveur analyse la requête et répond au client
La connexion peut être fermée par le client ou le serveur
Internet
10
11. Serveur web
Serveur utilisé pour publier des sites web
Communication avec ce serveur à l’aide du protocole HTTP
Support d’autres protocoles pour offrir d’autres services
Envoi d’e-mails, streaming, transfert de fichiers...
Serveur web publics reliés à Internet
Certains serveurs web sont privés et limités à un réseau local
11
12. Uniform Resource Locator (URL)
Une URL référence une ressource web sur un réseau
Localisation sur le réseau et mécanisme pour la récupérer
Plusieurs mécanismes d’accès possibles
http indique une page web
ftp utilisé pour le transfert de fichier
mailto permet l’envoi d’un e-mail
jdbc permet d’accéder à une base de données
...
12
13. HyperText Transfer Protocol (HTTP)
Protocole de communication de données pour le WWW
Coordonné par l’Internet Engineering Task Force (ETF)
et le Word Wide Web Consortium (W3C)
Utilisation d’hyperliens entre des nœuds
Permet de naviguer à travers le web
Protocole de type requête-réponse
Construit suivant une architecture client/serveur
13
15. HyperText Markup Language (HTML)
Langage de balisage pour représenter des pages web
Fichier texte permettant d’écrire de l’hypertexte
Plusieurs autres roles
Information sémantique par rapport au contenu
Information de mise en forme du contenu
Inclusion de ressources multimédia (image, formulaire...)
15
16. Historique
HTML 2.0 (24 novembre 1995)
Le W3C publie HTML 3.2 (14 janvier 1997)
Le W3C reprend le travail sur HTML, arrête par l’IETF
Trois variantes de HTML 4.0 (18 décembre 1997)
HTML 4.0 strict, transitional et frameset
HTML 5 publié comme recommandation W3C (28 octobre 2014)
Modernisation de la version 4 avec support multimédia,
des images SVG, du MathML...
16
17. Élement et balise
Élément du document délimité par des balises
Typiquement une balise ouvrante et une balise fermante
Balise formée par le nom de l’élément entouré de chevrons
Avec un / en plus pour distinguer la balise fermante
Imbrication de balises, en les fermant dans le bon ordre
Dernière balise ouverte = première balise fermée
1 <h1 >Titre de premier niveau </h1 >
2
3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p>
17
18. Élement et balise
Élément du document délimité par des balises
Typiquement une balise ouvrante et une balise fermante
Balise formée par le nom de l’élément entouré de chevrons
Avec un / en plus pour distinguer la balise fermante
Imbrication de balises, en les fermant dans le bon ordre
Dernière balise ouverte = première balise fermée
1 <h1 >Titre de premier niveau </h1 >
2
3 <p>Voici un paragraphe avec un <b>mot en gras </b> dedans .</p>
17
19. Attribut
Ajout d’attribut pour configurer l’élément
Se placent dans la balise ouvrante
Un attribut est composé d’une clé et d’une valeur
Valeur entre guillemets doubles, et parfois optionnelle
1 <p title=" Information complémentaire ">Passez la souris sur ce
paragraphe pour avoir des informations complémentaires .</p>
2
3 <p><a href="http :// www.google.be">Faire une recherche </a></p>
18
20. Attribut
Ajout d’attribut pour configurer l’élément
Se placent dans la balise ouvrante
Un attribut est composé d’une clé et d’une valeur
Valeur entre guillemets doubles, et parfois optionnelle
1 <p title=" Information complémentaire ">Passez la souris sur ce
paragraphe pour avoir des informations complémentaires .</p>
2
3 <p><a href="http :// www.google.be">Faire une recherche </a></p>
18
21. Entête et corps
Déclaration du type de document au début du fichier
<!DOCTYPE html> pour l’HTML 5
Le document est déclaré avec l’élément html
Entête du document (méta information) avec head
Corps du document (contenu visible) avec body
1 <! DOCTYPE html >
2
3 <html >
4 <head >
5 <title >Tuyaux examen IN20 </ title >
6 </head >
7 <body >
8 <p>Un seul tuyau : comprendre la matière !</p>
9 </body >
10 </html >
19
22. Entête et corps
Déclaration du type de document au début du fichier
<!DOCTYPE html> pour l’HTML 5
Le document est déclaré avec l’élément html
Entête du document (méta information) avec head
Corps du document (contenu visible) avec body
1 <! DOCTYPE html >
2
3 <html >
4 <head >
5 <title >Tuyaux examen IN20 </ title >
6 </head >
7 <body >
8 <p>Un seul tuyau : comprendre la matière !</p>
9 </body >
10 </html >
19
23. Titre
Plusieurs niveaux de titre (de 1 à 6)
Au maximum un seul titre de niveau 1 par page
Utilisation des éléments h1 à h6
1 <h1 >CU20 Cuisinologie </h1 >
2
3 <h2 >Chapitre 1 : Dépieauter la bête </h2 >
4
5 <p>Identifiez d’abord où est la peau ... </p>
6
7 <h2 >Chapitre 2 : Température optimale du four </h2 >
8
9 <p>Le gradient de température doit être Lipschitz continu ... </p>
20
24. Titre
Plusieurs niveaux de titre (de 1 à 6)
Au maximum un seul titre de niveau 1 par page
Utilisation des éléments h1 à h6
1 <h1 >CU20 Cuisinologie </h1 >
2
3 <h2 >Chapitre 1 : Dépieauter la bête </h2 >
4
5 <p>Identifiez d’abord où est la peau ... </p>
6
7 <h2 >Chapitre 2 : Température optimale du four </h2 >
8
9 <p>Le gradient de température doit être Lipschitz continu ... </p>
20
25. Section et paragraphe
Insertion d’une section avec l’élément section
Possède un titre, plusieurs paragraphes et des sous-sections
Paragraphe inséré grâce à l’élément p
1 <section >
2 <h1 >Série du mois </h1 >
3
4 <p>La série du mois est American Horror Story. Il y a déjà 5
saisons à cette série , pour un total de 54 épisodes .</p>
5
6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p>
7 </section >
21
26. Section et paragraphe
Insertion d’une section avec l’élément section
Possède un titre, plusieurs paragraphes et des sous-sections
Paragraphe inséré grâce à l’élément p
1 <section >
2 <h1 >Série du mois </h1 >
3
4 <p>La série du mois est American Horror Story. Il y a déjà 5
saisons à cette série , pour un total de 54 épisodes .</p>
5
6 <p>Il s’agit d’une série télévisée dramatique et d’horreur .</p>
7 </section >
21
27. Lien hypertexte
Lien hypertexte vers une ressource avec l’élément a
Lien typiquement identifié par une URL
Attribut href pour spécifier la cible du lien
Le texte du lien doit décrire la page liée
Éviter des « ici », ou « cliquez ici », ou encore « ce lien »...
1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p>
22
28. Lien hypertexte
Lien hypertexte vers une ressource avec l’élément a
Lien typiquement identifié par une URL
Attribut href pour spécifier la cible du lien
Le texte du lien doit décrire la page liée
Éviter des « ici », ou « cliquez ici », ou encore « ce lien »...
1 <p>Allez sur le <a href="http :// www.w3.org">site du W3C </a> !</p>
22
29. Formatage (1)
Formatage de base de texte dans un paragraphe
Texte en gras avec l’élément b
Texte important avec l’élément strong
Texte en italique avec l’élément i
Texte emphasé avec l’élément em
Positionnement du texte dans le texte
Texte en indice avec l’élément sub
Texte en exposant avec l’élément sup
23
30. Formatage (2)
1 <p>Le <b>sel </b>, c’est un ion Na <sup >+</sup > et un Cl <sup >-</sup
>.</p>
2 <p>Mais le seul <strong >n’est pas électrique </ strong >, encore
heureux !</p>
3 <p>D’abord <sup >dessus </sup >, et puis <sub >dessous </sub >.</p>
24
31. Image
Insertion d’une image avec l’élément img
Chemin vers l’image identifié par une URL, ou en relatif
Trois attributs pour configurer l’image
Attribut src pour spécifier le chemin de l’image
Attributs width et height pour les dimensions (pixels)
Attribut alt pour un texte alternatif
Balise orpheline, pas de balise fermante
1 <img src="wololo.png" alt="Wololo" width="480" height="360" />
25
32. Image
Insertion d’une image avec l’élément img
Chemin vers l’image identifié par une URL, ou en relatif
Trois attributs pour configurer l’image
Attribut src pour spécifier le chemin de l’image
Attributs width et height pour les dimensions (pixels)
Attribut alt pour un texte alternatif
Balise orpheline, pas de balise fermante
1 <img src="wololo.png" alt="Wololo" width="480" height="360" />
25
33. Tableau
Insertion d’un tableau avec l’élément table
Un tableau est décrit par des lignes composées de cellules
Lignes représentées par l’élément tr et cellule par td ou th
1 <table >
2 <tr >
3 <th >Nom </th >
4 <th >Prénom </th >
5 </tr >
6 <tr >
7 <td >Louis </td >
8 <td >Breyne </td >
9 </tr >
10 </table >
26
34. Tableau
Insertion d’un tableau avec l’élément table
Un tableau est décrit par des lignes composées de cellules
Lignes représentées par l’élément tr et cellule par td ou th
1 <table >
2 <tr >
3 <th >Nom </th >
4 <th >Prénom </th >
5 </tr >
6 <tr >
7 <td >Louis </td >
8 <td >Breyne </td >
9 </tr >
10 </table >
26
35. Liste
Insertion d’une liste numérotée ou non avec l’élément ul ou ol
Chaque élément de la liste est inséré avec l’élément li
Insertion d’une liste de définitions avec l’élément dl
Mot inséré avec l’élément dt et définition avec dd
1 <p>Quand mon réveil sonne le matin ... </p>
2 <ol >
3 <li >Je le prolonge de 10 minutes </li >
4 <li >Quand il resonne , j’ouvre les yeux et j’attends un peu </li >
5 <li >Je me dis ensuite que je vais me lever </li >
6 <li >En fait non , je me rendors </li >
7 </ol >
27
36. Liste
Insertion d’une liste numérotée ou non avec l’élément ul ou ol
Chaque élément de la liste est inséré avec l’élément li
Insertion d’une liste de définitions avec l’élément dl
Mot inséré avec l’élément dt et définition avec dd
1 <p>Quand mon réveil sonne le matin ... </p>
2 <ol >
3 <li >Je le prolonge de 10 minutes </li >
4 <li >Quand il resonne , j’ouvre les yeux et j’attends un peu </li >
5 <li >Je me dis ensuite que je vais me lever </li >
6 <li >En fait non , je me rendors </li >
7 </ol >
27
37. Formulaire
Insertion d’un formulaire avec l’élément form
Le fomulaire se construit ensuite à l’aide de widgets
Deux attributs pour configurer le formulaire
Attribut method pour spécifier la méthode d’envoi
Attribut action identifie la page de traitement
1 <form method="post" action="login.php">
2 <p>Pseudo : <input type="text" name="pseudo" /></p>
3 <p>Mot de passe : <input type="password" name="password" /></p>
4 <p><input type="submit" value="Se connecter" /></p>
5 </form >
28
38. Formulaire
Insertion d’un formulaire avec l’élément form
Le fomulaire se construit ensuite à l’aide de widgets
Deux attributs pour configurer le formulaire
Attribut method pour spécifier la méthode d’envoi
Attribut action identifie la page de traitement
1 <form method="post" action="login.php">
2 <p>Pseudo : <input type="text" name="pseudo" /></p>
3 <p>Mot de passe : <input type="password" name="password" /></p>
4 <p><input type="submit" value="Se connecter" /></p>
5 </form >
28
39. Élement structurel
Délimiter un bloc dans le document HTML
Dans le texte avec l’élément span
Et comme un bloc séparé du texte avec div
Utilisé pour du style (CSS) ou du contenu dynamique (JS)
1 <div id=" moviedetail ">
2 <dl >
3 <dt >Information </dt >
4 <dd ><span id="movietitle" ></span > (<span id="movieyear" ></
span >) </dd >
5 </dl >
6 <dl >
7 <dt >Casting </dt >
8 <dd ><span id=" moviecasting " ></span ></dd >
9 </dl >
10 </div >
29
40. Élement structurel
Délimiter un bloc dans le document HTML
Dans le texte avec l’élément span
Et comme un bloc séparé du texte avec div
Utilisé pour du style (CSS) ou du contenu dynamique (JS)
1 <div id=" moviedetail ">
2 <dl >
3 <dt >Information </dt >
4 <dd ><span id="movietitle" ></span > (<span id="movieyear" ></
span >) </dd >
5 </dl >
6 <dl >
7 <dt >Casting </dt >
8 <dd ><span id=" moviecasting " ></span ></dd >
9 </dl >
10 </div >
29
42. Cascading Style Sheets (CSS)
Langage de description de la présentation de documents
Fichier texte décrivant des règles de mise en page
Historique des différentes versions publiées
CSS1 avec une cinquantaine de propriété (17 décembre 1996)
Environ 70 nouvelles propriétés dans CSS2 (mai 1998)
Découpe en 50 modules dans CSS 3 (premier draft en juin 1999)
31
43. Lien avec HTML
Trois manières d’attacher des règles de style
Directement avec l’attribut style sur un élément
Avec l’élément style dans la partie head
Dans un fichier séparé, avec l’extension .css
Style depuis des fichiers externes avec l’élément link
<link rel="stylesheet" href="mystyle.css" type="text/css" />
32
44. Syntaxe
Règle CSS composée de deux parties
Le sélecteur définit le(s) élément(s) affecté(s)
Le(s) déclaration(s) contiennent les règles
Les règles s’appliquent en cascade aux éléments imbriqués
Une déclaration se compose d’une propriété et d’une valeur
1 h1 {
2 color: red;
3 border: 1px solid blue;
4 }
5
6 p {
7 text - decoration : underline;
8 }
33
45. Syntaxe
Règle CSS composée de deux parties
Le sélecteur définit le(s) élément(s) affecté(s)
Le(s) déclaration(s) contiennent les règles
Les règles s’appliquent en cascade aux éléments imbriqués
Une déclaration se compose d’une propriété et d’une valeur
1 h1 {
2 color: red;
3 border: 1px solid blue;
4 }
5
6 p {
7 text - decoration : underline;
8 }
33
46. Sélecteur
Sélection directe d’un élément en mentionnant son nom
h1 {...}
Sélectionner un élément unique par son identifiant
form#login {...} ou #login {...}
Sélectionner tous les éléments d’une classe
p.firstpara {...} ou .firstpara {...}
Sélection multiple de plusieurs éléments
h1, div.content, #submit {...}
34
47. Dimension
Largeur et hauteur d’un élément avec width et height
Ces propriétés forcent la taille de l’élément
Tailles minimales et maximales avec min-width, max-width...
Utiles lorsque l’utilisateur redimensionne la fenêtre
Dimensions typiquement renseignées en pixels
D’autres unités possibles comme l’em par exemple
35
48. Marges et padding
On peut régler les marges sur les quatre côtés
On a accès aux marges top, bottom, right et left
On peut régler le padding également sur les quatre côtés
Le padding correspond à la marge intérieure
1 div {
2 border: 1px solid;
3 margin -left: 50px;
4 padding -top: 20px;
5 padding -left: 50px;
6 width: 100 px;
7 }
36
49. Marges et padding
On peut régler les marges sur les quatre côtés
On a accès aux marges top, bottom, right et left
On peut régler le padding également sur les quatre côtés
Le padding correspond à la marge intérieure
1 div {
2 border: 1px solid;
3 margin -left: 50px;
4 padding -top: 20px;
5 padding -left: 50px;
6 width: 100 px;
7 }
36
50. Pseudo-classe
Une pseudo-classe fait référence à un état d’un élément
Par exemple un lien déjà visité, le premier fils...
Quelques exemples
:hover pour la souris par dessus un lien
:first-child pour le premier élément du type uniquement
1 tr:first -child {
2 background -color: #999;
3 }
4 tr:nth -of -type (2n) {
5 background -color: green;
6 }
37
51. Pseudo-classe
Une pseudo-classe fait référence à un état d’un élément
Par exemple un lien déjà visité, le premier fils...
Quelques exemples
:hover pour la souris par dessus un lien
:first-child pour le premier élément du type uniquement
1 tr:first -child {
2 background -color: #999;
3 }
4 tr:nth -of -type (2n) {
5 background -color: green;
6 }
37
52. Pseudo-élément
Un pseudo-élément fait référence à une partie d’un élément
Par exemple la première lettre, ligne...
Quelques exemples
::first-letter pour la première lettre
::selection pour la partie sélectionnée
1 p:: first -letter {
2 margin -top: -3px;
3 font -size: 30pt;
4 font -weight: bold;
5 float: left;
6 }
7 p:: selection {
8 background -color: magenta;
9 }
38
53. Pseudo-élément
Un pseudo-élément fait référence à une partie d’un élément
Par exemple la première lettre, ligne...
Quelques exemples
::first-letter pour la première lettre
::selection pour la partie sélectionnée
1 p:: first -letter {
2 margin -top: -3px;
3 font -size: 30pt;
4 font -weight: bold;
5 float: left;
6 }
7 p:: selection {
8 background -color: magenta;
9 }
38
55. JavaScript (JS)
Langage de script de haut niveau, non typé et interprété
Le JavaScript est exécuté côté client, par le browser
Langage orientée objet à prototype
Bref historique des différentes versions
Créé en 1995 par Brendan Eich (pour le compte de Netscape)
Adoption d’un standard ECMAScript en juin 1997
Troisième version d’ECMAScript en 1999 (JavaScript 1.5)
40
56. Lien avec HTML
Deux manières d’attacher du code JavaScript
Avec l’élément script
Dans un fichier séparé, avec l’extension .js
Code depuis des fichiers externes avec l’élément script
<script src="myscript.js" type="text/javascript"></script>
41
57. Affichage
Programme qui affiche un message de bienvenue
Code exécuté au moment où celui-ci est chargé par le navigateur
Inclusion du script à l’endroit où on souhaite l’exécuter
1 window.alert(’Hello Marcin!’);
1 <p>Bienvenue sur ce site !</p>
2
3 <script src="helloworld.js" type="text/javascript" ></script >
42
58. Affichage
Programme qui affiche un message de bienvenue
Code exécuté au moment où celui-ci est chargé par le navigateur
Inclusion du script à l’endroit où on souhaite l’exécuter
1 window.alert(’Hello Marcin!’);
1 <p>Bienvenue sur ce site !</p>
2
3 <script src="helloworld.js" type="text/javascript" ></script >
42
59. Variable et opérations
Déclaration d’une variable avec le mot réservé var
Les variables possèdent un type dynamique
Données de type nombre entier, flottant, booléen...
Une variable peut changer de type en cours d’exécution
1 var max = 20;
2 var score = 7.5;
3 var succeeded = score >= 10;
4 var mean = score / max * 100;
5
6 window.alert(succeeded); // Affiche false
7 window.alert(’Moyenne de ’ + mean); // Affiche Moyenne de 37.5
43
60. Instruction if-else if-else
Exécution conditionnelle de blocs avec if-else if-else
Un bloc de code est délimité avec des accolades
Blocs else if et bloc else optionnels
1 var max = 20;
2 var score = 7.5;
3 var succeeded = score >= 10;
4 var mean = score / max * 100;
5
6 if (succeeded) {
7 window.alert(’Réussi avec une moyenne de ’ + mean + ’%’);
8 } else {
9 window.alert(’Dommage , raté :-(’);
10 }
44
61. Modification de la page
On peut accéder aux éléments de la page pour les modifier
Avec la fonction document.getElementById
On modifie ensuite le contenu avec la propriété innerHTML
1 <p>Bienvenue sur ce site !</p>
2 <p id="result" ></p>
1 var max = 20;
2 var score = 7.5;
3 var succeeded = score >= 10;
4 var mean = score / max * 100;
5
6 var p = document . getElementById (’result ’);
7 if (succeeded) {
8 p.innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’;
9 } else {
10 p.innerHTML = ’Dommage , raté :-(’;
11 }
45
62. Modification de la page
On peut accéder aux éléments de la page pour les modifier
Avec la fonction document.getElementById
On modifie ensuite le contenu avec la propriété innerHTML
1 <p>Bienvenue sur ce site !</p>
2 <p id="result" ></p>
1 var max = 20;
2 var score = 7.5;
3 var succeeded = score >= 10;
4 var mean = score / max * 100;
5
6 var p = document . getElementById (’result ’);
7 if (succeeded) {
8 p.innerHTML = ’Réussi avec une moyenne de ’ + mean + ’%’;
9 } else {
10 p.innerHTML = ’Dommage , raté :-(’;
11 }
45
63. Instruction while
Répéter un bloc tant qu’une condition est vraie avec while
Attention aux boucles infinies si la condition est toujours vraie
Construction du résultat avec une chaine de caractères
Génération de contenu HTML depuis le JavaScript
1 var result = ’’;
2 var i = 1;
3
4 while (i <= 10) {
5 result += i + ’ x 2 = <b>’ + (i * 2) + ’</b><br />’;
6 i += 1;
7 }
8 document . getElementById (’result ’).innerHTML = result;
46
64. Instruction while
Répéter un bloc tant qu’une condition est vraie avec while
Attention aux boucles infinies si la condition est toujours vraie
Construction du résultat avec une chaine de caractères
Génération de contenu HTML depuis le JavaScript
1 var result = ’’;
2 var i = 1;
3
4 while (i <= 10) {
5 result += i + ’ x 2 = <b>’ + (i * 2) + ’</b><br />’;
6 i += 1;
7 }
8 document . getElementById (’result ’).innerHTML = result;
46
65. Réaction à un évènement
Association d’une action à un élément (une fonction)
Par exemple, l’évènement onclick
1 <a id="dontclick">Ne me cliquez pas !</p>
1 var cnt = 0;
2 link = document . getElementById (’dontclick ’);
3 link.onclick = function () {
4 cnt += 1;
5 window.alert("Pas cliquer que c’était mis ... (déjà " + cnt + "
clics)");
6 }
47
66. Réaction à un évènement
Association d’une action à un élément (une fonction)
Par exemple, l’évènement onclick
1 <a id="dontclick">Ne me cliquez pas !</p>
1 var cnt = 0;
2 link = document . getElementById (’dontclick ’);
3 link.onclick = function () {
4 cnt += 1;
5 window.alert("Pas cliquer que c’était mis ... (déjà " + cnt + "
clics)");
6 }
47