- Inicio
- Cursos
- Programación
- Curso de JavaScript y jQuery = J2
1.- Intro, HTML
Intro.
-
-
var
function()
if()
- Operadores de comparación:
==, ===, !=, !==, >, <, >=, <=
- Operadores matemáticos o aritméticos.
parseFloat()
switch
-
-
-
$(function(){})
.click()
.html()
-
HTML.
Abramos Visual Code Studio y demos en nuevo archivo:
Escribamos index.html y vamos hacia donde está WampServer, en mi caso está en la unidad e: si tu instalaste en c: dirígete a c, ingresemos a la carpeta de wamp64 o wamp dependiendo el caso, luego a la carpeta www, y ahí vamos a crear una nueva carpeta llamada calculadora, todo en minúsculas, para cuando la visitemos no tengamos ningún problema.
Ahora sí, demos en Crear archivo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
</head>
</html>
<link rel="stylesheet" href="calculadora.css">
<script src="https://code.jQuery.com/jQuery-3.7.1.min.js"></script>
<script src="calculadora.js"></script>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="calculadora.css">
<script src="https://code.jQuery.com/jQuery-3.7.1.min.js"></script>
<script src="calculadora.js"></script>
</head>
<body>
</body>
</html>
<h1>Calculadora</h1>
<div>
</div>
<div class="calculadora">
</div>
<div class="operador" id="operador"></div>
<div class="resultado" id="resultado">0</div>
<div>
</div>
<div class="botones">
</div>
Ahora agreguemos un botón, ya vimos esto en el capítulo anterior, los botones tienen apertura y cierre, ahora si vamos a agregarle una clase CSS que se llama calculadora-boton.
También le pondremos un identificador y será boton_7
<button class="caluladora-boton" id="boton_7">7</button>
Como el siguiente botón se parecerá mucho a este, dupliquemos este botón:
Mantén el cursor de escritura en este botón, presiona shift+alt sin soltarlos, y presiona una vez la tecla de flecha hacia abajo, y listo.
<button class="caluladora-boton" id="boton_8">8</button>
<body>
<h1>Calculadora</h1>
<div class="calculadora">
<div class="operador" id="operador"></div>
<div class="resultado" id="resultado">0</div>
<div class="botones">
<button class="caluladora-boton" id="boton_7">7</button>
<button class="caluladora-boton" id="boton_8">8</button>
<button class="caluladora-boton" id="boton_9">9</button>
</div>
</div>
</body>
<button class="caluladora-boton" id="boton_dividir">/</button>
<button class="caluladora-boton" id="boton_4">4</button>
<button class="caluladora-boton" id="boton_5">5</button>
<button class="caluladora-boton" id="boton_6">6</button>
<button class="caluladora-boton" id="boton_multiplicar">*</button>
<button class="caluladora-boton" id="boton_1">1</button>
<button class="caluladora-boton" id="boton_2">2</button>
<button class="caluladora-boton" id="boton_3">3</button>
<button class="caluladora-boton" id="boton_restar">-</button>
Y el ultimo será en su identificador boton_restar y en el texto un guión.
Repitamos el procedimiento y cambiemos ahora los botones, para que el primero sea el cero.
El segundo tendrá en su identificador boton_punto y en el texto un punto.
El tercero tendrá en su identificador boton_igual y en su texto un signo de igual.
<button class="caluladora-boton" id="boton_0">0</button>
<button class="caluladora-boton" id="boton_punto">.</button>
<button class="caluladora-boton" id="boton_igual">=</button>
<button class="caluladora-boton" id="boton_sumar">+</button>
Código Final:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora</title>
<link rel="stylesheet" href="calculadora.css">
<script src="https://code.jQuery.com/jQuery-3.7.1.min.js"></script>
<script src="calculadora.js"></script>
</head>
<body>
<h1>Calculadora</h1>
<div class="calculadora">
<div class="operador" id="operador"></div>
<div class="resultado" id="resultado">0</div>
<div class="botones">
<button class="caluladora-boton" id="boton_7">7</button>
<button class="caluladora-boton" id="boton_8">8</button>
<button class="caluladora-boton" id="boton_9">9</button>
<button class="caluladora-boton" id="boton_dividir">/</button>
<button class="caluladora-boton" id="boton_4">4</button>
<button class="caluladora-boton" id="boton_5">5</button>
<button class="caluladora-boton" id="boton_6">6</button>
<button class="caluladora-boton" id="boton_multiplicar">*</button>
<button class="caluladora-boton" id="boton_1">1</button>
<button class="caluladora-boton" id="boton_2">2</button>
<button class="caluladora-boton" id="boton_3">3</button>
<button class="caluladora-boton" id="boton_restar">-</button>
<button class="caluladora-boton" id="boton_0">0</button>
<button class="caluladora-boton" id="boton_punto">.</button>
<button class="caluladora-boton" id="boton_igual">=</button>
<button class="caluladora-boton" id="boton_sumar">+</button>
</div>
</div>
</body>
</html>