Ejercicios Moviles

Ejercicios Canvas HTML y JavaScript
CECYTEM ACAMBAY
2018-2018
L.I.A José Luis Anaya Reyes

EJERCICIO APP CALCULADORA (HTML, JAVASCRIPT Y CSS)
1. En este ejercicio se creará una aplicación de una calculadora con las operaciones básicas.
2. Para este ejercicio deberemos de crear una nueva carpeta dentro de nuestra carpeta del sub
modulo, dicha carpeta se llamará CALCULADORA.
3. Dentro de la carpeta CALCULADORA se deberán de crear tres archivos nombrados de la siguiente
manera:
a) estilo.css
b) funcionalidad.js
c) index.html
4. El primer archivo que programaremos será el index.html
5. <!DOCTYPE html>
6. <html>
7. <head>
8. <meta charset="UTF-8">
9. <title>Calculadora con JavaScript</title>
10. <link type="text/css" href="estilo.css" rel="stylesheet">
11. </head>
12. <body onload="init();">
13.
14. <table class="calculadora">
15. <tr>
16. <td colspan="4"><span id="resultado"></span></td>
17. </tr>
18. <tr>
Ejercicios Canvas HTML y JavaScript | CECyTEM Acambay
19. <td><button id="siete">7</button></td><td><button

id="ocho">8</button></td><td><button id="nueve">9</button></td><td><button
id="division">/</button></td>
20. </tr>
21. <tr>
22. <td><button id="cuatro">4</button></td><td><button
id="cinco">5</button></td><td><button id="seis">6</button></td><td><button
id="multiplicacion">*</button></td>
23. </tr>
24. <tr>
25. <td><button id="uno">1</button></td><td><button
id="dos">2</button></td><td><button id="tres">3</button></td><td><button
id="resta">-</button></td>
26. </tr>
27. <tr>
1
28. <td><button id="igual">=</button></td><td><button
id="reset">C</button></td><td><button id="cero">0</button></td><td><button
id="suma">+</button></td>
29. </tr>
30. <tr>
31. <td colspan="4"><span id="creditos">MI PRIMER APLICACION TU NOMBRE
CECyTEM</span></td>
32. </tr>
33. </table>
34.
35. <script src="funcionalidad.js"></script>
36. </body>
37. </html>
5. El siguiente documento a editar deberá de ser el de estilo.css. Deberás de ir ejecutando o actualizando
el documento index.html para ir visualizando los resultados.
.calculadora{
display:block;
margin:0 auto;
padding:20px;
background-color:#2980b9;
width:350px;
height:600px;
border-radius: 25px;
}
.calculadora td button{
display:block;
width:70px;
height: 70px;
font-size: 25px;
}
#creditos{
display:block;
padding-top:20px;
color:#fff;
text-align: center;
width:300px;
}
#resultado{
display:block;
text-align: center;
font-size: 40px;
margin-bottom: 50px;
2
width:300px;
height: 100px;
line-height: 100px;
background-color:#fff;
border-radius: 25px;
}
6. Y por último el archivo funcionalidad.js
//Declaramos variables
var operandoa;
var operandob;
var operacion;
function init(){
//variables
var resultado = document.getElementById('resultado');
var reset = document.getElementById('reset');
var suma = document.getElementById('suma');
var resta = document.getElementById('resta');
var multiplicacion = document.getElementById('multiplicacion');
var division = document.getElementById('division');
var igual = document.getElementById('igual');
var uno = document.getElementById('uno');

var dos = document.getElementById('dos');
var tres = document.getElementById('tres');
var cuatro = document.getElementById('cuatro');
var cinco = document.getElementById('cinco');
var seis = document.getElementById('seis');
var siete = document.getElementById('siete');
var ocho = document.getElementById('ocho');
var nueve = document.getElementById('nueve');
var cero = document.getElementById('cero');
//eventos de click
uno.onclick = function(e){
resultado.textContent = resultado.textContent + "1";
}
dos.onclick = function(e){
3
}
tres.onclick = function(e){
}
cuatro.onclick = function(e){
}
cinco.onclick = function(e){
}
seis.onclick = function(e){
}
siete.onclick = function(e){
}
ocho.onclick = function(e){
}
nueve.onclick = function(e){
}
cero.onclick = function(e){
}
reset.onclick = function(e){
resetear();
}
suma.onclick = function(e){
operandoa = resultado.textContent;
operacion = "+";
limpiar();
}
resta.onclick = function(e){
operacion = "-";
limpiar();
}
multiplicacion.onclick = function(e){
operacion = "*";
4
limpiar();
}
division.onclick = function(e){
operacion = "/";
limpiar();
}
igual.onclick = function(e){
operandob = resultado.textContent;
resolver();
}
}
function limpiar(){
resultado.textContent = "";
}
function resetear(){
resultado.textContent = "";
operandoa = 0;
operandob = 0;
operacion = "";
}
function resolver(){
var res = 0;
switch(operacion){
case "+":
res = parseFloat(operandoa) + parseFloat(operandob);
break;
case "-":
res = parseFloat(operandoa) - parseFloat(operandob);
break;
case "*":
res = parseFloat(operandoa) * parseFloat(operandob);
break;
case "/":
res = parseFloat(operandoa) / parseFloat(operandob);
5
break;
}
resetear();
resultado.textContent = res;
}
7. Para finalizar Argumenta tu resultado.
EJERCICIOS FORMAS BASICAS

TRABAJANDO CON RECTANGULOS
6
EJERCICIO 1:
1. En este ejercicio deberás de crear una nueva carpeta llamada CANVAS, y dentro de ella un
documento llamado Rectangulo.html.
2. Deberás de copiar el siguiente código y argumentaras el resultado.

7
3. Argumentación del resultado:
EJERCICIO 2:
1. En este ejercicio aprenderemos a cambiar el color de relleno de un rectángulo.
2. Para ello deberemos de abrir nuevamente el archivo Rectangulo.html y lo modificamos según los
requerimientos que se muestran en la imagen.
3. Deberás de copiar el siguiente código y argumentar tu resultado.
8
9
10
11
EJERCICIO 3:
1. Crea un nuevo documento llamado Lineas.html
2. Copia el código que se muestra en la imagen.

12
13
1.
EJERCICIO 4: Practicando con arcos y curvas.

Ejercicios Moviles

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ejercicios Moviles

Uploaded by

Copyright:

Available Formats

Ejercicios Canvas HTML y JavaScript

L.I.A José Luis Anaya Reyes

19. <td><button id="siete">7</button></td><td><button

6. Y por último el archivo funcionalidad.js

var uno = document.getElementById('uno');

7. Para finalizar Argumenta tu resultado.

EJERCICIOS FORMAS BASICAS

2. Deberás de copiar el siguiente código y argumentaras el resultado.

1. En este ejercicio aprenderemos a cambiar el color de relleno de un rectángulo.

3. Deberás de copiar el siguiente código y argumentar tu resultado.

2. Copia el código que se muestra en la imagen.

3. Argumentación del resultado:

You might also like