Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013.
Sommaire : - Recherches et étude du projet - Html - Css - Javascript - Finalité du projet
Recherches et étude du projet : Après réflexions, nous avons décidé de créer une page html permettant de tracer des courbes à partir de formules mathématiques. Pour nous aider, nous avons recherché des choses similaires déjà existantes sur internet : (http://freescience.fr/math/drawligne.html)
(Extrait du code source de la page html http://freescience.fr/math/drawligne.html) Ce site peut nous aider à la syntaxe, à trouver des fonctions ou des idées de fonctions, peut nous aider à la disposition de la page et aux différents éléments qui peuvent la composer.
Partie Html : Html signifie Hyper Text Markup Language. HTML est un langage qui permet de présenter des informations sur Internet. Ce que l on voit quand on regarde une page sur Internet est l'interprétation par le navigateur du code HTML. Pour formaliser l'écriture d'un document, le langage HTML utilise des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le document et les liens qu'il établit avec d'autres documents. Pour éditer notre page, nous avons utilisé l éditeur de code «Notepad++». Pour notre page Html, nous avons utilisé des balises telles que : - «h3» (pour le titre) : La balise «h», met le texte en type titre. Il existe six niveaux de titres.<h1> étant la plus grande taille. - «href» : qui permet d insérer un lien dans la page html. Nous avons décidé de mettre un lien du lycée Colbert. - «font» : qui permet de modifier la police d écriture de la page. Ici, nous avons choisi la police d écriture «Verdana». - «input» : qui définit un champ de formulaire. Celle-ci possède un attribut type, ici avec comme valeur «button», qui crée un bouton. Par exemple, nous avons utilisé cette balise pour créer un bouton permettant d effacer toutes les données. On a utilisé la balise «input» avec l attribut type avec comme valeur «text» qui crée un champ texte. Par exemple, nous avons utilisé cette balise pour créer une zone texte où rentrer la valeur désirée pour «ymin». - «textarea» : qui définit un champ de texte multiligne où une personne peut taper du texte. L attribut name permet de donner le nom du contrôle, l attribut cols donne la largeur en nombre de colonnes, l attribut rows donne la hauteur en nombre de ligne. La balise «textarea» doit être dans une balise «form».
- Pour le sélecteur de couleur, nous avons utilisé une balise «table» puis une balise «select» qui crée des choix destinés à être sélectionnés par l'utilisateur. La balise «option» utilisé à plusieurs reprises après permet de spécifier les choix dans l élément «select». Pour que le css soit inclut dans la page html, il nous fait créer un lien sur celleci. Pour cela, il faut utiliser les balises «link» qui avertit le navigateur qu il doit chercher un document situé à l extérieur de la page Html, «rel="stylesheet"» précise que le document en question est une feuille de style externe., «L'attribut type="text/css"» précise le type de feuille de style et «L'attribut href=" URL "» donne l URL de la feuille de style, c'est-à-dire son emplacement sur Internet. Pour inclure le javascript dans html, il suffit d utiliser une balise «script» et préciser le langage dans l attribut language en «javascript».
Partie Css : Les CSS (Cascading Style Sheets, c'est à dire "feuilles de styles en cascade") sont utilisés pour définir la présentation des pages Web. Les CSS vous permettront de créer vos styles et le design général de votre site Internet. Ils vous permettent de définir n'importe quelle propriété de style comme la bordure, la couleur de fond, le type de caractère, l'espace entre les lettres, etc Pour le titre, nous avons utilisé les balises : - «position» : La propriété de feuille de style position css peut prendre la valeur de : «static» valeur par défaut, «relative» positionnement se fera par rapport à l'endroit où l'élément à été déclaré dans le code HTML, «absolute» positionnement se fera par rapport au coin haut gauche de la page, «fixed» reste fixe, ne bouge pas quand défile l'écran. Pour notre page html, nous avons choisi la valeur «absolute». - «top» : La propriété de feuille de style css top permet de spécifier la position verticale du coin haut gauche de l'élément par rapport à un point. Elle peut prendre une valeur numérique positive ou négative suivie de % ou px ou em ou ex. Pour notre page html, nous avons choisi une valeur de «10px». - «left» : La propriété de feuille de style css left permet de spécifier la position horizontale du coin haut gauche de l'élément par rapport à un point. Elle peut prendre la valeur numérique positive ou négative suivie de % ou px ou em ou ex. Pour notre page html, nous avons choisi une valeur de «80px». Pour le fond d écran, nous avons utilisé les balises : - «width» : qui règle la taille. - «background-image» : qui est bien sûr l'adresse de l'image choisie pour le fond de page. - «background-repeat» : qui donne le positionnement du fond d écran.
Partie Javascript : JavaScript (souvent abrégé JS) est un langage de programmation de scripts principalement utilisé dans les pages web interactives. Le code source est écrit par le développeur. C'est un ensemble d'actions, appelées instructions, qui vont permettre de donner des ordres à l'ordinateur afin de faire fonctionner le programme. Le code source régit le fonctionnement du programme. Pour notre page, nous avons utilisé les balises : - «var» : qui permet de déclarer une variable. Les variables peuvent être suivies de différents attributs comme «color», «font» ou directement le nom de la variable et sa valeur. - En vert et précédés de //, se sont les commentaires. - Pour créer une fonction il faut utiliser une balise «function». cette balise peut-être suivie de diverses attributs tels que if, return ou encore else. Dans l exemple ci-contre, nous avons une fonction qui permet le tracé des axes réels : En conclusion, le javascript crée des fonctions permettant de réaliser les différentes courbes.
Finalité du projet : Finalement, nous avons aboutis à une page html composé de trois parties : - une partie HTML - une partie CSS - une partie JavaScript (incluse dans le code source html) Cette page permet de créer, à partir de fonctions mathématiques proposées, les courbes correspondantes. Dans cette page, on peut choisir, dans plusieurs proposées, la couleur que nous désirons pour la courbe ou encore la graduation des axes. Il y a également une partie «listage» qui permet de voir le détail de ce qui se passe.