Com crear una calculadora amb HTML

Autora: John Stephens
Data De La Creació: 21 Gener 2021
Data D’Actualització: 14 Ser Possible 2024
Anonim
Crear una calculadora con JavaScript, HTML y CSS desde cero.
Vídeo: Crear una calculadora con JavaScript, HTML y CSS desde cero.

Content

En aquest article: Comprendre el codiEscriure el codi bàsic de la calculadoraCrear la calculadoraUtilitzar la calculadora11 Referències

Hi ha moltes maneres de fer càlculs al vostre ordinador mitjançant la calculadora incorporada, però també podeu crear-ne la vostra utilitzant només codi HTML. Per fer-ho, heu d’aprendre els fonaments bàsics d’HTML abans de copiar el codi necessari en un fitxer e que guardeu amb extension.html. A continuació, simplement obriu el fitxer al navegador favorit per accedir a la calculadora. Aquesta tècnica us permet fer càlculs directament al vostre navegador tot aprenent els fonaments bàsics de l'art de la programació informàtica.


etapes

Primera part Comprensió del codi



  1. Comprendre el funcionament del codi. El codi que fareu servir per crear la calculadora es basa en petits trossos de codi que funcionen entre ells per definir diferents elements del document. Podeu obtenir més informació sobre HTML fent clic en aquest enllaç o podeu llegir què fa cada línia del codi que fareu servir per a la calculadora.
    • html: aquest tros de codi indica a la resta del document el llenguatge utilitzat. S'utilitzen molts llenguatges de programació diferents i l'etiqueta indica a la resta del document que aquesta vegada és HTML que utilitzeu.
    • cap : això indica al document que la informació següent són dades també anomenades "metadades". L’etiqueta s’utilitza normalment per definir elements estilístics del document, com ara el títol, les capçaleres, etc. És com un paraigua sota el qual es defineix la resta del codi.
    • títol : Aquest és el títol que donareu al document. Aquesta etiqueta s'utilitza per mostrar el títol del document un cop obert al navegador.
    • body bgcolor = "#" : Estableix un color de fons per al document. El nombre que apareix després de la nit correspon a un color predeterminat.
    • = '' : La paraula entre cometes indica el color de l'e al document.
    • nom del formulari = "" : Aquest atribut indica el nom del formulari que s'utilitzarà per a l'estructura del que ve després perquè JavaScript pugui saber quina forma es parla. Per exemple, el nom del formulari que utilitzarem és "calculadora" que crearà l'estructura específica del document.
    • entrada tipus = "" : aquí és on es desenvoluparà l’acció. L'atribut "tipus d'entrada" indica al document el tipus de valor per a l'e a la resta de claudàtors. Per exemple, pot ser e, una contrasenya, un botó (com serà per a la nostra calculadora), etc.
    • value = "" : Aquest atribut indica al document què contindrà l’atribut "tipus d’entrada". Per a una calculadora, mostrarà els números de l’1 al 9 i els signes aritmètics (+, -, *, /, =).
    • onclick = "" : Aquest codi descriu un esdeveniment que indica al document que alguna cosa ha de passar quan s’activa el botó. Per a una calculadora, voleu mostrar el número que correspon al botó que l'usuari ha premut. Per exemple, si el botó 6 està habilitat, voleu posar document.calculator.in.value + = 6 entre les cometes.
    • br : és una etiqueta que indica una aturada de línia, tota la resta del codi que ve a continuació apareixerà a continuació.
    • / form, / body i / html Aquestes etiquetes de tancament indiquen al navegador que les etiquetes que heu obert abans estan finalitzades i tancades.

2a part Escriu el codi bàsic de la calculadora

Copieu el codi següent. Seleccioneu la e a sota mantenint premut el cursor des de la cantonada superior esquerra de la caixa i arrossegant-lo fins a la cantonada inferior dreta de manera que tota la e aparegui de color blau. A continuació, premeu "Comando + C" en un Mac o "Ctrl + C" en un PC per copiar el e.


Calculadora HTML

El resultat és

Part 3 Creació de la calculadora




  1. Obriu un fitxer e a l’ordinador. Hi ha molts programes que podeu utilitzar, però, per motius de qualitat, es recomana utilitzar Edit o Bloc de notes.
    • En un Mac, només cal fer clic a la lupa situada a la part superior dreta de la pantalla per obrir Spotlight. Un cop obert, escriviu editar i feu clic al programa que s'hauria de seleccionar en blau.
    • Feu clic al botó començament a l’esquerra inferior. A la barra de cerca, escriviu bloc i feu clic a l'aplicació que hauria d'aparèixer als resultats.


  2. Enganxeu el codi HTML al document.
    • En un Mac, només cal fer clic al cos del document i prémer "Comando + V". Hauríeu de fer clic sobre format a la part superior de la pantalla i després Veure en e simple després d’enganxar el codi.
    • Feu clic a la màquina del document i enganxeu-la prement "Ctrl + V".


  3. Desa el fitxer. Només cal fer clic al botó expedient a la part superior esquerra de la finestra i després Desa com a ... en un PC o Desar ... en un Mac al menú desplegable que apareix.


  4. Afegiu l’extensió HTML. Un cop al menú, escriviu el nom del fitxer seguit de ".html" abans de fer clic registre. Per exemple, si voleu anomenar aquest fitxer "la meva primera calculadora", podeu donar-li el nom: "MyPremierCalculette.html".

Part 4 Utilitzant la calculadora



  1. Cerqueu el fitxer HTML. Simplement escriviu el nom del fitxer a Spotlight a Mac o a la barra de cerca del menú Inici del Windows. No cal escriure l’extensió del fitxer.


  2. Feu clic sobre ell per obrir-lo. El vostre navegador predeterminat ha d’obrir la calculadora en una pestanya nova.


  3. Feu clic als botons per utilitzar-lo. Els resultats dels vostres càlculs haurien d’aparèixer a la barra proporcionada a aquest efecte.

Com treure el vòmit d'un interior del cotxe

Robert Doyle

Ser Possible 2024

Quan vomeu a l’interior d’un cotxe, é e encial netejar ràpidament, ja que no netejar la zona adequada pot deixar taque i olor difícil d’eliminar. El vòmit també é àc...

Com alimentar una serp

Robert Doyle

Ser Possible 2024

Le erp ón depredador natural . Quan e tan en captivitat, la eva font d’aliment mé aludable ón ratolin o rate vive , congelade i de congelade . Podeu crear la vo tra pròpia pre a pe...

El Nostre Consell