Escolar Documentos
Profissional Documentos
Cultura Documentos
HTML5
Con Javascript 1.5 y CSS3
HTML5 es la quinta revisión importante del lenguaje de las páginas web,
establece una serie de nuevos elementos y atributos que reflejan el uso
típico de los sitios web modernos. En este artículo aprenderás a crear una
calculadora sencilla gracias a las tecnologías HTML5, Javascript y CSS.
Para empezar necesitas un editor de textos para escribir código HTML. Puedes
utilizar los que vienen por defecto en cada sistema operativo, siendo Notepad
para Microsoft Windows, TextEdit para Mac OS X y para Ubuntu Linux está
Gedit. También en internet existe una gran cantidad de ellos para todos los
sistemas operativos actuales.
1
<html>
<head>
<meta httpequiv="ContentType" content="text/html; charset=UTF
8" />
<title>Plantilla en blanco</title>
</head>
<body>
</body>
</html>
Conocido los elementos y cómo se forma una página web HTML5, guarda
dicho documento con una extensión html, un ejemplo sería plantilla.html
Ejecuta el archivo y verás tu navegador con una pantalla en blanco. Por último,
para validar tu documento HTML5, entra desde tu navegador favorito a
validator. w3.org. Verás una serie de pestañas, pulsa en Valídate by File
Upload. A continuación pulsa en el botón Choose File y elige el archivo donde
hayas guardado el documento creado anteriormente.
Escribe el código
<html>
<head>
<title>Calculadora</title>
3
<meta httpequiv="ContentType" content="text/html; charset=UTF
8" />
<link rel="stylesheet" type="text/css" href="src/css/estilo.css" />
<script type="text/javascript" src="src/js/calculadora.js"></script>
</head>
<body>
<div id="fondo"></div>
<input type="text" id="pantalla" />
<div id="numero0" class="boton">0</div>
<div id="numero1" class="boton">1</div>
<div id="numero2" class="boton">2</div>
<div id="numero3" class="boton">3</div>
<div id="numero4" class="boton">4</div>
<div id="numero5" class="boton">5</div>
<div id="numero6" class="boton">6</div>
<div id="numero7" class="boton">7</div>
<div id="numero8" class="boton">8</div>
<div id="numero9" class="boton">9</div>
<div id="ope_mas" class="boton">+</div>
<div id="ope_men" class="boton"></div>
<div id="ope_por" class="boton">x</div>
<div id="ope_div" class="boton">/</div>
<div id="ope_dec" class="boton">.</div>
<div id="ope_res" class="boton">=</div>
<div id="ope_bor" class="boton">C</div>
</body>
4
</html>
Para que los archivos se importen correctamente crea una carpeta llamada src
y, dentro de ella, dos subcarpetas tituladas css y js. En la primera creas un
archivo de texto con nombre estilo. css y, en la segunda, creas otro
denominado calculadora.js. El atributo id
determina la identificación de cada uno de los
componentes y el atributo class especifica la
clase del elemento. Esto se utilizará tanto
para aplicar una apariencia a la página como
para hacerla dinámica.
Guarda y ejecuta
Escribe el código
El código de un archivo CSS puede llegar a resultar muy extenso. En este
caso, se ha elegido una configuración sencilla. Para aplicar un estilo a tu
5
página copia utiliza el código del archivo Código 3 con tu editor de textos. Una
vez que hayas copiado el código, guárdalo como estilo.css valídalo en
jigsaw.w3.org/ css-validator y ejecuta index.html. Si todo ha ido bien, verás
una calculadora. Como podrás observar, el resultado es bien diferente, ahora
es agradable a la vista. Sin embargo, no está operativa, para ello es necesario
añadirle funcionalidades con Javascript.
* {
position: absolute;
webkituserselect:none;
mozuserselect:none;
userselect: none;
body {
margin: 0;
padding: 0;
backgroundcolor: #ffffff;
#fondo {
width: 310px; height:412px;
left: 0px; top: 0px;
backgroundcolor: #D5DED9;
borderradius: 30px;
border: solid 5px #050E09;
.boton {
textalign: center;
cursor: pointer;
font: 54px arial, sansserif;
6
height: 60px;
width: 60px;
border: solid 3px black;
borderradius: 5px;
backgroundcolor: #99B2B7;
#pantalla {
left: 23px; top:27px;
font: 40px arial, sansserif;
textalign: right;
height: 60px;
width: 191px;
border: solid 3px black;
borderradius: 5px;
backgroundcolor: #99B2B7;
#numero0 {left: 23px; top: 324px;}
#numero1 {left: 23px; top: 254px;}
#numero2 {left: 91px; top: 254px;}
#numero3 {left: 159px; top: 254px;}
#numero4 {left: 23px; top: 184px;}
#numero5 {left: 91px; top: 184px;}
#numero6 {left: 159px; top: 184px;}
#numero7 {left: 23px; top: 114px;}
#numero8 {left: 91px; top: 114px;}
#numero9 {left: 159px; top: 114px;}
#ope_mas {left: 228px; top: 324px;}
#ope_men {left: 228px; top: 254px;}
7
#ope_por {left: 228px; top: 184px;}
#ope_div {left: 228px; top: 114px;}
#ope_dec {left: 91px; top: 324px;}
#ope_res {left: 159px; top: 324px;}
#ope_bor {left: 228px; top: 27px; height: 66px;}
Escribe el código
function iniciar()
document.getElementById("numero0").addEventListener('mousedown',
function(){ponerDigito('0');}, false);
document.getElementById("numero1").addEventListener('mousedown',
function(){ponerDigito('1');}, false);
document.getElementById("numero2").addEventListener('mousedown',
function(){ponerDigito('2');}, false);
document.getElementById("numero3").addEventListener('mousedown',
function(){ponerDigito('3');}, false);
8
document.getElementById("numero4").addEventListener('mousedown',
function(){ponerDigito('4');}, false);
document.getElementById("numero5").addEventListener('mousedown',
function(){ponerDigito('5');}, false);
document.getElementById("numero6").addEventListener('mousedown',
function(){ponerDigito('6');}, false);
document.getElementById("numero7").addEventListener('mousedown',
function(){ponerDigito('7');}, false);
document.getElementById("numero8").addEventListener('mousedown',
function(){ponerDigito('8');}, false);
document.getElementById("numero9").addEventListener('mousedown',
function(){ponerDigito('9');}, false);
document.getElementById("ope_mas").addEventListener('mousedown',
function(){ponerDigito('+');}, false);
document.getElementById("ope_men").addEventListener('mousedown',
function(){ponerDigito('');}, false);
document.getElementById("ope_por").addEventListener('mousedown',
function(){ponerDigito('*');}, false);
document.getElementById("ope_div").addEventListener('mousedown',
function(){ponerDigito('/');}, false);
document.getElementById("ope_dec").addEventListener('mousedown',
function(){ponerDigito('.');}, false);
document.getElementById("ope_res").addEventListener('mousedown',
resolver, false);
document.getElementById("ope_bor").addEventListener('mousedown',
borrar, false);
function ponerDigito(digito)
document.getElementById("pantalla").value += digito;
function borrar()
document.getElementById("pantalla").value = "";
9
}
function resolver()
document.getElementById("pantalla").value =
eval(document.getElementById("pantalla").value);
La calculadora en Internet
Una vez hayas modificado el ejercicio es hora de que otros usuarios puedan
utilizar tu calculadora en la red.
Para ello crearemos una carpeta con tu nombre en el servidor del instituto y
con un programa ftp lo subiremos al servidor para que se pueda utilizar.
10