Calculadora JavaScript, un ejercicio básico típico de este lenguaje

El siguiente ejercicio es el típico ejercicio que todos los que hemos tenido que aprender JavaScript tuvimos que escribir en su momento. En este blog ya hemos tratado como hacer un calculadora con Java, y la verdad es que no podía faltar su versión de la calculadora JavaScript. Con el ejemplo que a continuación veremos, se trabajará el ejercicio con funciones pasando valores y escribiendo texto gracias a ellas.

Para darle un estilo básico a la calculadora, esto lo haremos mediante unas pocas reglas CSS3. Maquetaremos los botones y los resultados utilizando HTML5.

Para el que necesite echar un vistazo al ejercicio funcionando, puede echar un vistazo en el siguiente enlace.

La anterior captura de pantalla es lo que se va a poder ver en pantalla cuando se utilice el siguiente código. Tan solo son unas cuantas líneas sencillas, pero muy útiles de este maravilloso lenguaje de programación.

Calculadora JavaScript

<head>

<title>Calculadora basica con JavaScript</title>
<meta charset="utf-8">
<style>

    #borde{border:1px solid #000;
           max-width: 300px !important;
           padding:1%;
           text-align: center;
           margin-left: auto;
           margin-right: auto;
    }    

    input[type="button"]:hover{

        background-color:slategray;

        cursor: pointer;

    }

    input[type="button"].arit{

        background-color:maroon;

    }

    input[type="button"].igual{

        background-color: #c200e0;

    }

    input[type="button"].limpiar{

        background-color:orangered;

    }

    form{

        background-color:white;
        text-align: center;

    }

    input[type="text"]{

        background-color:black;

        border:0px;

        width:250px;

        height: 40px;

        font-size: 20px;

        color: white;

        text-align: right;

        pointer-events: none;

    }

    input[name="txtcaja1"]{

        height: 20px;

        font-size: 18px;

        padding-right: 2%;

    }

    input[name="txtcaja2"]{

        margin-bottom: 10px;

        font-size: 26px;

        padding-right: 2%;

    }

    input[type="button"]{

        font-size: 18px;

        font-weight:lighter;

        font-family: Arial, "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

        width:60px;border:0px;

        height: 60px;

        color: white;

        background-color:#007fff;

        margin-bottom: 5px;

        }

    body{

        background-color:#f1f1f1;

    }

</style>

</head>

<body>

<div id="borde">

<h2>Calculadora Básica con JavaScript</h2>

<form name="f1"><br/>

<input type="text" name="txtcaja1"/><br/>

<input type="text" name="txtcaja2" value="0"/><br/>

<input type="button" class="limpiar" onClick="document.f1.reset();" value="C"/>

<input type="button" class="limpiar" onClick="document.f1.txtcaja2.value='0'" value="CE"/>

<input type="button" class="arit" onClick="masmenos()" value="±"/> <input type="button" class="arit" onClick="arit('%')" value="%"/><br/>

<input type="button" onClick="escribir('7')" value="7"/>

<input type="button" onClick="escribir('8')" value="8"/>

<input type="button" onClick="escribir('9')" value="9"/> <input type="button" class="arit" onclick="arit('/')" value="÷"/><br/>

<input type="button" onclick="escribir('4')" value="4"/>

<input type="button" onclick="escribir('5')" value="5"/>

<input type="button" onclick="escribir('6')" value="6"/> <input type="button" class="arit" onclick="arit('*')" value="×"/><br/>

<input type="button" onClick="escribir('1')" value="1"/>

<input type="button" onClick="escribir('2')" value="2"/>

<input type="button" onClick="escribir('3')" value="3"/> <input type="button" class="arit" onclick="arit('-')" value="-"/><br/>

<input type="button" onClick="escribir('0')" value="0"/>

<input type="button" onClick="escribir('.')" value="."/>

<input type="button" class="igual" onclick="calcular()" value="="/> <input type="button" class="arit" onclick="arit('+')" value="+"/><br/>

</form>

<script>
    /*Función para escribir los números en las cajas de texto*/

    function escribir(n){

        var caja2 = document.f1.txtcaja2.value;

        if (caja2=="0" && n!="."){

            cajao=caja2.replace("0", "")

            document.f1.txtcaja2.value = cajao + n;

        }

        else{

            document.f1.txtcaja2.value = caja2 + n;

        }

    }

    function arit(o){

        var caja1 = document.f1.txtcaja1.value;

        var caja2 = document.f1.txtcaja2.value;

        if (caja1=="" && caja2!=""){

            document.f1.txtcaja1.value = caja2 + o;

            document.f1.txtcaja2.value="";

        }

        else if(caja2!=""){

            document.f1.txtcaja1.value = caja1 + caja2 + o;

            document.f1.txtcaja2.value="";

        }

    }

    function calcular(){

        var caja1 = document.f1.txtcaja1.value;

        var caja2 = document.f1.txtcaja2.value;

        document.f1.txtcaja2.value = eval(caja1 + caja2);

        document.f1.txtcaja1.value="";

    }

    /*Función para cambiar el signo de los números*/

    function masmenos(){

        var caja2 = document.f1.txtcaja2.value;

        if (caja2 > 0){

            document.f1.txtcaja2.value= "(-" + caja2 + ")";

        }

        else{

            cajaplus = caja2.replace(/[-|(|)]/g, "");

            document.f1.txtcaja2.value = cajaplus;

        }

    }

</script>
</div>
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

<head>

<title>Calculadora basica con JavaScript</title>

<style>

#borde{border:1px solid #000;

max-width: 300px !important;

padding:1%;

text-align: center;

margin-left: auto;

margin-right: auto;

}

input[type="button"]:hover{

background-color:slategray;

cursor: pointer;

}

input[type="button"].arit{

background-color:maroon;

}

input[type="button"].igual{

background-color: #c200e0;

}

input[type="button"].limpiar{

background-color:orangered;

}

form{

background-color:white;

text-align: center;

}

input[type="text"]{

background-color:black;

border:0px;

width:250px;

height: 40px;

font-size: 20px;

color: white;

text-align: right;

pointer-events: none;

}

input[name="txtcaja1"]{

height: 20px;

font-size: 18px;

padding-right: 2%;

}

input[name="txtcaja2"]{

margin-bottom: 10px;

font-size: 26px;

padding-right: 2%;

}

input[type="button"]{

font-size: 18px;

font-weight:lighter;

font-family: Arial, "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";

width:60px;border:0px;

height: 60px;

color: white;

background-color:#007fff;

margin-bottom: 5px;

}

body{

background-color:#f1f1f1;

}

</style>

</head>

<body>

<h2>Calculadora Básica con JavaScript</h2>

</form>

/*Función para escribir los números en las cajas de texto*/

function escribir(n){

var caja2 = document.f1.txtcaja2.value;

if (caja2=="0" && n!="."){

cajao=caja2.replace("0", "")

document.f1.txtcaja2.value = cajao + n;

}

else{

document.f1.txtcaja2.value = caja2 + n;

}

function arit(o){

var caja1 = document.f1.txtcaja1.value;

var caja2 = document.f1.txtcaja2.value;

if (caja1=="" && caja2!=""){

document.f1.txtcaja1.value = caja2 + o;

document.f1.txtcaja2.value="";

}

else if(caja2!=""){

document.f1.txtcaja1.value = caja1 + caja2 + o;

document.f1.txtcaja2.value="";

}

function calcular(){

var caja1 = document.f1.txtcaja1.value;

var caja2 = document.f1.txtcaja2.value;

document.f1.txtcaja2.value = eval(caja1 + caja2);

document.f1.txtcaja1.value="";

}

/*Función para cambiar el signo de los números*/

function masmenos(){

var caja2 = document.f1.txtcaja2.value;

if (caja2 > ){

document.f1.txtcaja2.value= "(-" + caja2 + ")";

}

else{

cajaplus = caja2.replace(/[-|(|)]/g, "");

document.f1.txtcaja2.value = cajaplus;

}

</script>

</div>

</body>

Ni que decir tiene que este es solo un ejercicio básico, y que no se puede modificar el código junto con sus CSS para darle una aspecto más bonito, al gusto del usuario. Quién quiera puede trabajar mucho más y mejorar de manera notable. Pero para quien lo necesite este me parece un buen punto de partida para empezar a trabajar con JavaScript.

Añadir imágenes al compartir posts en redes sociales desde Wordpress

LEER

Quizás también te interese ...