{"id":91535,"date":"2022-10-11T23:01:35","date_gmt":"2022-10-12T04:01:35","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/hur-man-bygger-en-enkel-kalkylator-med-html-css-och-javascript\/"},"modified":"2022-10-11T23:01:35","modified_gmt":"2022-10-12T04:01:35","slug":"hur-man-bygger-en-enkel-kalkylator-med-html-css-och-javascript","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/hur-man-bygger-en-enkel-kalkylator-med-html-css-och-javascript\/","title":{"rendered":"Hur man bygger en enkel kalkylator med HTML, CSS och JavaScript"},"content":{"rendered":"
\n

Det b\u00e4sta s\u00e4ttet att l\u00e4ra sig JavaScript \u00e4r att bygga projekt. Om du vill bli en bra webbutvecklare m\u00e5ste du b\u00f6rja skapa s\u00e5 snart som m\u00f6jligt. Du kan b\u00f6rja med att bygga projekt p\u00e5 nyb\u00f6rjarniv\u00e5 som en enkel minir\u00e4knare, digital klocka, stoppur, etc.<\/p>\n

I den h\u00e4r artikeln f\u00e5r du l\u00e4ra dig hur du g\u00f6r en enkel kalkylator med HTML, CSS och JavaScript. Denna minir\u00e4knare kan utf\u00f6ra grundl\u00e4ggande matematiska operationer som addition, subtraktion, multiplikation och division.<\/p>\n

L\u00e5t oss b\u00f6rja.<\/p>\n

<\/span> Komponenter i r\u00e4knaren<\/span><\/h2>\n

Kalkylatorn best\u00e5r av f\u00f6ljande komponenter:<\/p>\n

Matematiska operat\u00f6rer<\/strong>: Addition (+), Subtraktion (-), Multiplikation<\/p>\n

och division (\/).<\/strong>Siffror och decimalknapp<\/p>\n

: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .<\/strong>Sk\u00e4rm<\/p>\n

: Den visar det matematiska uttrycket och resultatet.<\/strong>Rensa sk\u00e4rmknapp<\/p>\n

: Det rensar alla matematiska v\u00e4rden.<\/strong>Knappen Ber\u00e4kna (=)<\/p>\n

\n<\/figure>\n

<\/span> : Den utv\u00e4rderar det matematiska uttrycket och returnerar resultatet.<\/span><\/h2>\n

Mappstruktur f\u00f6r kalkylatorprojektet Skapa en rotmapp som inneh\u00e5ller HTML-, CSS- och JavaScript-filerna. Du kan namnge filerna vad du vill. H\u00e4r heter rotmappen<\/strong>Kalkylator . Enligt standardnamnkonventionen namnges HTML-, CSS- och JavaScript-filerna<\/strong>index.html ,<\/strong>styles.css , och<\/strong> script.js<\/p>\n

\n<\/figure>\n

<\/span> respektive.<\/span><\/h2>\n

HTML-kod \u00d6ppna<\/strong> index.html<\/p>\n

<!DOCTYPE html><html lang=\"en\" dir=\"ltr\"><head><meta charset=\"utf-8\"><title> Simple Calculator using HTML, CSS and JavaScript <\/title><link rel=\"stylesheet\" href=\"https:\/\/www.makeuseof.com\/build-a-simple-calculator-using-html-css-javascript\/styles.css\"><\/head><body><table class = \"calculator\" ><tr><td colspan = \"3\"> <input class = \"display-box\" type = \"text\" id = \"result\" disabled \/> <\/td><!-- clearScreen() function clear all the values --><td> <input class = \"button\" type = \"button\" value = \"C\" onclick = \"clearScreen()\" style = \"background-color: #fb0066;\" \/> <\/td><\/tr><tr><!-- display() function display the value of clicked button --><td> <input class = \"button\" type = \"button\" value = \"1\" onclick = \"display('1')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"2\" onclick = \"display('2')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"3\" onclick = \"display('3')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"https:\/\/www.makeuseof.com\/\" onclick = \"display(\"https:\/\/www.makeuseof.com\/\")\" \/> <\/td><\/tr><tr><td> <input class = \"button\" type = \"button\" value = \"4\" onclick = \"display('4')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"5\" onclick = \"display('5')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"6\" onclick = \"display('6')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"-\" onclick = \"display('-')\" \/> <\/td><\/tr><tr><td> <input class = \"button\" type = \"button\" value = \"7\" onclick = \"display('7')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"8\" onclick = \"display('8')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"9\" onclick = \"display('9')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"+\" onclick = \"display('+')\" \/> <\/td><\/tr><tr><td> <input class = \"button\" type = \"button\" value = \".\" onclick = \"display('.')\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"0\" onclick = \"display('0')\" \/> <\/td><!-- calculate() function evaluate the mathematical expression --><td> <input class = \"button\" type = \"button\" value = \"=\" onclick = \"calculate()\" style = \"background-color: #fb0066;\" \/> <\/td><td> <input class = \"button\" type = \"button\" value = \"*\" onclick = \"display('*')\" \/> <\/td><\/tr><\/table><script type=\"text\/javascript\" src=\"https:\/\/www.makeuseof.com\/build-a-simple-calculator-using-html-css-javascript\/script.js\"><\/script><\/body><\/html><\/pre>\n
fil och klistra in f\u00f6ljande kod: Kalkylatorns struktur skapas med hj\u00e4lp av<\/strong>  m\u00e4rka.  De<\/strong>  taggen inneh\u00e5ller fem rader som representerar fem horisontella sektioner av r\u00e4knaren.  Varje rad skapas med hj\u00e4lp av<\/strong> <\/tabell><\/tabell><\/p>\n m\u00e4rka.  Varje<\/strong>
\n<\/tr>\n taggen inneh\u00e5ller<\/strong> <\/p>\n\n
\n<\/figure>\n
<\/span>  taggar (tabelldata) som h\u00e5ller sk\u00e4rmbilden och knapparna p\u00e5 r\u00e4knaren.<\/span><\/h2>\n
CSS-kod \u00d6ppna<\/strong> styles.css<\/p>\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Orbitron&display=swap');.calculator {padding: 10px;border-radius: 1em;height: 380px;width: 400px;margin: auto;background-color: #191b28;box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;}.display-box {font-family: 'Orbitron', sans-serif;background-color: #dcdbe1;border: solid black 0.5px;color: black;border-radius: 5px;width: 100%;height: 65%;}.button {font-family: 'Orbitron', sans-serif;background-color: #64278f;color: white;border: solid black 0.5px;width: 100%;border-radius: 5px;height: 70%;outline: none;}.button:active {background: #e5e5e5;-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;-moz-box-shadow: inset 0px 0px 5px #c1c1c1;box-shadow: inset 0px 0px 5px #c1c1c1;}<\/pre>\n
fil och klistra in f\u00f6ljande kod: Ovanst\u00e5ende CSS anv\u00e4nds f\u00f6r att styla r\u00e4knaren.  De<\/strong> .klass selector anv\u00e4nds f\u00f6r att v\u00e4lja element med ett specifikt klassattribut.  De<\/strong>.kalkylator ,<\/strong>.display-box , och<\/strong> .knapp klassv\u00e4ljare anv\u00e4nds f\u00f6r att utforma tabellstrukturen, displaysk\u00e4rmen respektive knapparna p\u00e5 r\u00e4knaren.<\/strong> @importera anv\u00e4nds f\u00f6r att importera<\/strong> Orbitron teckensnittsfamilj<\/p>\n
<\/span>  fr\u00e5n Google fonts.<\/span><\/h2>\n
JavaScript-kod \u00d6ppna<\/strong> script.js<\/p>\n
\/\/ This function clear all the valuesfunction clearScreen() {document.getElementById(\"result\").value = \"\";}
\/\/ This function display valuesfunction display(value) {document.getElementById(\"result\").value += value;}\/\/ This function evaluates the expression and return resultfunction calculate() {var p = document.getElementById(\"result\").value;var q = eval(p);document.getElementById(\"result\").value = q;}<\/p><\/pre>\n
<\/span>  fil och klistra in f\u00f6ljande kod:<\/span><\/h2>\n
F\u00f6rst\u00e5 JavaScript-koden De<\/strong>rensa sk\u00e4rmen() ,<\/strong>visa() , och<\/strong> Ber\u00e4kna()<\/p>\n
<\/span>funktioner anv\u00e4nds f\u00f6r att l\u00e4gga till funktionalitet till kalkylatorn.<\/span><\/h3>\n
Rensa v\u00e4rden De<\/strong> rensa sk\u00e4rmen()<\/p>\n
function clearScreen() {document.getElementById(\"result\").value = \"\";}<\/pre>\n
<\/span>funktionen f\u00e5r \u00e5tkomst till DOM med hj\u00e4lp av resultatets ID och rensa dess v\u00e4rde genom att tilldela den en tom str\u00e4ng.<\/span><\/h3>\n
Visar v\u00e4rden<\/strong> visa()<\/p>\n
function display(value) {document.getElementById(\"result\").value += value;}<\/pre>\n
<\/span>funktionen f\u00e5r \u00e5tkomst till DOM med hj\u00e4lp av resultatets ID och l\u00e4gger till v\u00e4rdet f\u00f6r den klickade knappen till resultatet.<\/span><\/h3>\n
Utv\u00e4rdera uttryck De<\/strong> Ber\u00e4kna() funktionen f\u00e5r \u00e5tkomst till DOM med hj\u00e4lp av id f\u00f6r resultatet och utv\u00e4rderar uttrycket med hj\u00e4lp av<\/strong> eval()<\/p>\n
fungera.  Det utv\u00e4rderade v\u00e4rdet av uttrycket tilldelas \u00e5terigen resultatet.<\/strong>Notera : Den<\/strong> eval()<\/p>\n
function calculate() {var p = document.getElementById(\"result\").value;var q = eval(p);document.getElementById(\"result\").value = q;}<\/pre>\n
funktion anv\u00e4nds i JavaScript f\u00f6r att utv\u00e4rdera uttrycket som skickas till det som en parameter.  Den returnerar det utv\u00e4rderade resultatet av det matematiska uttrycket.<\/p>\n
<\/span>  Om du vill ta en titt p\u00e5 den fullst\u00e4ndiga k\u00e4llkoden som anv\u00e4nds i den h\u00e4r artikeln, h\u00e4r \u00e4r GitHub-f\u00f6rvaret.  Om du vill ta en titt p\u00e5 liveversionen av det h\u00e4r projektet kan du ocks\u00e5 kolla in den via GitHub.<\/span><\/h2>\n
Utveckla coola programmeringsprojekt<\/p>\n
Du kan h\u00f6ja dina ingenj\u00f6rskunskaper till n\u00e4sta niv\u00e5 genom att utveckla projekt.  Oavsett om du \u00e4r nyb\u00f6rjare eller om du b\u00f6rjar b\u00f6rja med kodning igen efter en viss ledighet, kan utveckling av projekt vara till stor hj\u00e4lp f\u00f6r att st\u00e4rka ditt sj\u00e4lvf\u00f6rtroende.<\/p>\n
Du kan prova m\u00e5nga enkla projekt som ett schackspel, att g\u00f6ra-lista-app, viktkonverteringsverktyg, Tic Tac Toe-spel, Rock Paper Scissors-spel, Web Scraper med Python, inloggningssystem, chatbot, ormspel, Tetris-spel, tipskalkylator , Countdown Clock, URL Shortener, etc.<\/p>\n
    Smutsa ner h\u00e4nderna med dessa projekt och bli en b\u00e4ttre utvecklare.<\/strong><\/p>\n
            Om f\u00f6rfattaren
<\/strong><\/p>\n
Yuvraj Chandra (80 artiklar publicerade)<\/p>\n
                            Yuvraj \u00e4r en datavetenskapsstudent vid University of Delhi, Indien.  Han brinner f\u00f6r Full Stack Web Development.  N\u00e4r han inte skriver unders\u00f6ker han djupet i olika teknologier.<\/p>\n
<\/span>Mer fr\u00e5n Yuvraj Chandra<\/span><\/h4>\n
Prenumerera p\u00e5 v\u00e5rt nyhetsbrev free G\u00e5 med i v\u00e5rt nyhetsbrev f\u00f6r tekniska tips, recensioner,<\/p>\n
e-b\u00f6cker och exklusiva erbjudanden!<\/p>\n
                        Klicka h\u00e4r f\u00f6r att prenumerera<\/p>\n
    <\/p>\n
\n
\n
\n
\n        <\/p>\n
\n    <\/a><\/p>\n
<\/p>\n
\n
\n        Inget resultat     <\/p>\n
\n         Visa alla resultat     <\/p>\n<\/div>\n<\/div><\/div>\n
\n
\n
\u00a9 2021 Nyheter i Android, Telefoner, Prylar Och Recensioner<\/p>\n<\/div><\/div>\n<\/div><\/div>\n<\/div>\n
<\/p>\n
<\/p>\n

\n<\/p>\n
\n
\n
\n        <\/p>\n
\n
\n
\n
\n