Veuillez vous connecter à votre compte.
1
Comprenez le fonctionnement du code. Le code que vous allez utiliser pour créer la calculette se base sur de petits bouts de code qui fonctionnent les uns avec les autres pour définir différents éléments du document. Vous pouvez en apprendre plus sur le HTML en cliquant sur ce lien ou vous pouvez lire ce que fait chaque ligne dans le code que vous allez utiliser pour la calculette.
- html: ce bout de code indique au reste du document le langage utilisé. On utilise de nombreux langages différents de programmation et la balise indique au reste du document que cette fois-ci, c'est du HTML que vous utilisez [1] .
- head : cela indique au document que les informations qui suivent sont des données qu'on appelle aussi « métadonnées ». La balise est généralement utilisée pour définir des éléments stylistiques du document, par exemple le titre, les entêtes, etc. C'est comme un parapluie sous lequel le reste du code est défini [2] .
- title : c'est le titre que vous allez donner au document. Cette balise est utilisée pour afficher le titre du document une fois qu'il sera ouvert dans le navigateur.
- body bgcolor= "#" : cela permet de définir une couleur de fond pour le document. Le nombre qui apparait après le dièse correspond à une couleur prédéterminée.
- text= "" : le mot entre guillemets indique la couleur du texte sur le document.
- form name="" : cet attribut indique le nom du formulaire qui sera utilisé pour la structure de ce qui vient après pour que le code JavaScript puisse savoir de quel formulaire on parle. Par exemple, le nom de formulaire que l'on va utiliser est « calculette » ce qui va créer la structure spécifique du document [3] .
- input type="" : c'est là où l'action va se dérouler. L'attribut « input type » indique au document le type de valeur pour le texte qui se trouve dans le reste des crochets. Par exemple, cela pourrait être du texte, un mot de passe, un bouton (comme ce sera le cas pour notre calculette), etc. [4]
- value="" : cet attribut indique au document ce que l'attribut « input type » va contenir. Pour une calculette, vous allez afficher les chiffres de 1 à 9 et les signes arithmétiques (+, -, *, /, =) [5] .
- onClick="" : ce bout de code décrit un évènement qui indique au document que quelque chose doit se passer au moment où le bouton est activé. Pour une calculette, vous voulez afficher le chiffre qui correspond au bouton sur lequel l'utilisateur a appuyé. Par exemple, si le bouton 6 est activé, vous voulez mettre document.calculette.ans.value+='6' entre les guillemets [6] .
- br : c'est une balise qui indique un saut de ligne, tout le reste du code qui vient après apparaitra une ligne en dessous [7] .
- /form, /body, and /html : ces balises fermantes indiquent au navigateur que les balises que vous aviez ouvertes plus tôt sont maintenant finies et fermées
2
Copiez le code ci-dessous. Sélectionnez le texte ci-dessous en maintenant le curseur appuyé du coin en haut à gauche de la boîte et en le faisant glisser jusqu'au coin en bas à droite pour que tout le texte apparaisse en bleu. Appuyez ensuite sur Command + C sur un Mac ou sur Ctrl + C sur un PC pour copier le texte.
<html> <head> <title>Calculette HTML</title> </head> <body bgcolor= "#000000" text= "gold"> <form name="calculette" > <input type="button" value="1" onClick="document.calculette.ans.value+='1'"> <input type="button" value="2" onClick="document.calculette.ans.value+='2'"> <input type="button" value="3" onClick="document.calculette.ans.value+='3'"> <input type="button" value="+" onClick="document.calculette.ans.value+='+'"> <input type="button" value="4" onClick="document.calculette.ans.value+='4'"> <input type="button" value="5" onClick="document.calculette.ans.value+='5'"> <input type="button" value="6" onClick="document.calculette.ans.value+='6'"> <input type="button" value="-" onClick="document.calculette.ans.value+='-'"> <input type="button" value="7" onClick="document.calculette.ans.value+='7'"> <input type="button" value="8" onClick="document.calculette.ans.value+='8'"> <input type="button" value="9" onClick="document.calculette.ans.value+='9'"> <input type="button" value="*" onClick="document.calculette.ans.value+='*'"> <input type="button" value="/" onClick="document.calculette.ans.value+='/'"> <input type="button" value="0" onClick="document.calculette.ans.value+='0'"> <input type="reset" value="Réinitialiser"> <input type="button" value="=" onClick="document. calculette.ans.value=eval(document.calculette.ans.value)"> <br>Le résultat est <input type="textfield" name="ans" value=""> </form> </body> </html>
Résultat finale:
