Curso de JavaScript Practico, comenzando Juego Navegador!!!
Hoy he tenido que Re-hacer el código por que no me di cuenta que no estaba bien el código :S aquí el Post:
Hace mucho que tengo que aprender JavaScript es decir tener unos conocimientos decentes de este lenguaje de Programación, realmente he estado repasando muchos manuales como habitualmente hacia antes de comenzar a intentar programar . Pero la verdad no me termina de gustar ningún manual por lo que me dije con los vagos conocimientos que tengo de Python, Perl y C++ podría intentar entender Js sin leer tantos manuales poco prácticos.
Ojo que basta con copiar el primer código y pegarlo en un archivo ".html" y ya tendrán funcionando el código en un navegador como se muestra en la imagen.
De Js se ha escrito de Todo. Este lenguaje de Programación es muy potente debido a la gran escalada de las paginas Web y las aplicaciones Móviles del Momento. Por lo que no me fue fácil ver por donde comenzar. Al final me pregunte que es lo que quiero??? y mi respuesta fue generar un ambiente ameno para mis aplicaciones de python, y me dije por que no usar Django de una Vez??? a lo que me respondí no es posible debido a que quiero resultados rápidos, ademas de que quiero hacer un jueguito interactivo como Ogame o Travian ese ha sido mi sueño desde que comencé con el sueño de programar hace mas de 10 años. El Juego es un simulador de Navegador donde vas construyendo y atacando sin muchas gráficas pero con Js va bastante rápido. Pero en ningún lado dicen como hacerlos de una manera sencilla asi que me anime a crear un pequeño tutorial, por el momento no sera online pero iremos aprendiendo JavaScript a medida que hacemos cosas interesantes!!! Incluso códigos de Python intentare reproducirlos aquí! Solo que aun no he buscado como hacer Scraping con JavaScript por eso y por que ya tengo Bastante código también seguiré con estos proyectos pero con vistas agradables JavaScript en su momento tendremos todo esto en Django:
- Juego Simulador Navegador(Tutorial Principal).
- Bot AdaCrypbot mas gráficas en JS.
- Gráficas de datos de STEEMIT en Js
- Sabermetria con gráficas y tablas tipo WEB, se que tengo rato que no publico nada de esto, tenia un pequeño conflicto mental pero creo que no tiene nada de malo enseñar algunas estadísticas con el Bio-Ritmo :D
Ya con eso tenemos Bastante con este manual mi objetivo es hacer un juego sencillo tipo simulador asi como enseñar un poco de lo que voy aprendiendo de JavaScript, en su momento retomare el de Python aunque no calo muy bien hace meses quizás ahora haya gente interesada en aprender a Programar en Python y JavaScript y en su momento aprender también Django, aunque en este si he hecho algunas cosas :D Aquí les traigo e primer Código del Manual, próximamente le colocare Tutorial como Hacer un juego tipo Simulador en JavaScript Paso a Paso. Código JavaScript que suma varios valores y los muestra en tiempo Real:
<!DOCTYPE html><!--http://www.lawebdelprogramador.com--><html><head> <script type="text/javascript"> /** * Funcion que se ejecuta cada vez que se añade una letra en un cuadro de texto * Suma los valores de los cuadros de texto */ function sumar() { var valor1=verificar("valor1"); var valor2=verificar("valor2"); var valor3=verificar("valor3"); var valor4=verificar("valor4"); // realizamos la suma de los valores y los ponemos en la casilla del // formulario que contiene el total document.getElementById("total").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3)+parseFloat(valor4); document.getElementById("total1").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3); document.getElementById("total2").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(55.22); } /** * Funcion para verificar los valores de los cuadros de texto. Si no es un * valor numerico, cambia de color el borde del cuadro de texto */ function verificar(id) { var obj=document.getElementById(id); if(obj.value=="") value="0"; else value=obj.value; if(validate_importe(value,1)) { // marcamos como erroneo obj.style.borderColor="#808080"; return value; }else{ // marcamos como erroneo obj.style.borderColor="#f00"; return 0; } } /** * Funcion para validar el importe * Tiene que recibir: * El valor del importe (Ej. document.formName.operator) * Determina si permite o no decimales [1-si|0-no] * Devuelve: * true-Todo correcto * false-Incorrecto */ function validate_importe(value,decimal) { if(decimal==undefined) decimal=0; if(decimal==1) { // Permite decimales tanto por . como por , var patron=new RegExp("^[0-9]+((,|\.)[0-9]{1,2})?$"); }else{ // Numero entero normal var patron=new RegExp("^([0-9])*$") } if(value && value.search(patron)==0) { return true; } return false; } </script> <style> input {border:1px solid #808080;text-align:right;width:100px;} #total {font-weight:bold;} #total1 {font-weight:bold;} #total2 {font-weight:bold;} div {width:200px;text-align:right;} </style></head><body> <h1>Suma de valores</h1> <div>Valor 1: <input type="text" id="valor1" onkeyup="sumar();"></div> <div>Valor 2: <input type="text" id="valor2" onkeyup="sumar();"></div> <div>Valor 3: <input type="text" id="valor3" onkeyup="sumar();"></div> <div>Valor 4: <input type="text" id="valor4" onkeyup="sumar();"></div> <div>Total: <input type="text" id="total" disabled value="0"> <div>Total1: <input type="text" id="total1" disabled value="0"> <div>Total2: <input type="text" id="total2" disabled value="0"></body></html>El código permite ingresar 4 números y sumarlos, con varios resultados aquí esta la gracia...
Para explicar un poco el código podemos observar las 2 partes del código:
- HEAD
- BODY
Generalmente en el HEAD vamos a colocar todos los Scripts y el CSS, a menos que destinemos algunos archivos para eso y simplemente debemos vincularlos, a su ves estos 2 cuerpos se dividen en partes por ejemplo el HEAD que es el que nos interesa tiene el CSS que el la hoja de estilo en cascada, y el JavaScript que es a lo que estamos abocados hoy, en el JavaScript tenemos 3 Funciones a saber:
- sumar
- verificar
- validate_importe
La que que realmente nos interesa es sumar, aunque es necesario que guardemos si queremos este tipo de código de verificar y validar para futuros proyectos, estos códigos son realmente importante cada ves que vamos a crear funciones con las que necesitamos interactuar con el Usuario.
En la Función Sumar podemos observarla:
function sumar() { var valor1=verificar("valor1"); var valor2=verificar("valor2"); var valor3=verificar("valor3"); var valor4=verificar("valor4"); // realizamos la suma de los valores y los ponemos en la casilla del // formulario que contiene el total document.getElementById("total").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3)+parseFloat(valor4); document.getElementById("total1").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3); document.getElementById("total2").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(55.22); }Realmente esta función era mucho mas chica y la he cambiado apra ver los diferentes resultados simplemente agregue otro ID para total, por ejemplo total1, total2 la función era así:
function sumar() { var valor1=verificar("valor1"); var valor2=verificar("valor2"); var valor3=verificar("valor3"); var valor4=verificar("valor4"); // realizamos la suma de los valores y los ponemos en la casilla del // formulario que contiene el total document.getElementById("total").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3)+parseFloat(valor4); }Podemos ver que estas 2 lineas fueron las incluidas por mi:
document.getElementById("total1").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(valor3); document.getElementById("total2").value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(55.22);Es muy sencillo JavaScript, podemos observar getElementById es el encargado de hacer Return por decirlo de alguna manera, este genera un ID y se lo pasa como return a la función, al ser llamado el ID total2 dará como resultado value=parseFloat(valor1)+parseFloat(valor2)+parseFloat(55.22) bastante sencillo hasta aquí, creo que aun mas sencillo que python pero cada lenguaje tiene sus fuertes!!!
Ahora el HTML es una parte importante del Código fijate:
<body> <h1>Suma de valores</h1> <div>Valor 1: <input type="text" id="valor1" onkeyup="sumar();"></div> <div>Valor 2: <input type="text" id="valor2" onkeyup="sumar();"></div> <div>Valor 3: <input type="text" id="valor3" onkeyup="sumar();"></div> <div>Valor 4: <input type="text" id="valor4" onkeyup="sumar();"></div> <div>Total: <input type="text" id="total" disabled value="0"> <div>Total1: <input type="text" id="total1" disabled value="0"> <div>Total2: <input type="text" id="total2" disabled value="0"></body>Si revisamos un poco este código podemos observar que hay 4 valores numerados en valor1 valor2 y así sucesivamente podrían haber 1000, y y tenemos 3 totales total1 total2 total3, aquí lo importante es el ID o id que le pasamos al html que debe coincidir con el valor que creamos mas arriba de la función sumar del javascript.
Es importante visualizar la libreria onkeyup de los valores que metemos en el html y bueno debemos visualizar que los totales no la llevan!!! Esto es un dato importante
Con este pequeño codigo ya tenemos una sumatoria funcional en javascript es bastante sencilla y nos deja visualizar por ejemplo el próximo paso:
- Generar una conexión con la hora del sistema y sumar cada segundo x cantidad.
- Restar x cantidad y subir niveles.
Hasta aquí la entrada de hoy para no sobre-saturarnos.
Dios les Bendiga