Prompt y Confirm en JavaScript

Ademas de la ya muy conocida función alert que tiene JavaScrip para la interacción con el usuario también cuenta con otras muy interesantes de las cuales hablaremos y veremos su sintaxis.

Confim.

Esta función permite preguntarle al usuario si desea realizar alguna acción en donde la respuesta es ACEPTAR o CANCELAR, esta función regresa como resultado un boleano (boolean), es decir, si el usuario hizo clic en ACEPTAR la función regresa un true, de lo contrario, si el usuario hace clic en CANCELAR la función regresa un false.

En el siguiente ejemplo crearemos una variable en donde almacenaremos el valor que nos regrese la función confirm dependiendo de la respuesta seleccionada por el usuario, y luego la mandaremos imprimir en consola.

var theConfirm = confirm("Exit?");
console.log(theConfirm);

Prompt.

Esta función puede ser usado para hacer una pregunta abierta, el primer argumento que le mandaremos es la pregunta que deseamos realizar, El segundo argumento es un texto que aparecerá al ejecutarse la función pero esta se sobreescribira con la respuesta del usuario, esta función nos regresa una cadena de texto (string).

nota: el segundo argumento no siempre es necesario a menos que así lo requieras.

En el siguiente ejemplo crearemos una variable en donde guardaremos el valor que nos regrese la función y después lo mandaremos pintar en la consola.

var name= prompt("What is your name?","..");
console.log("Your name is: " + name);

Pero que pasa si lo que queremos del usuario no es su nombre si no su edad y ocupamos que a fuerza el valor que nos regrese sea un entero (int), pues realizamos una conversión con la función Number(),

el cual nos convertirá la respuesta del usuario a entero.

nota: si nosotros queremos utilizamos la función Number pero ingresamos una cadena de texto, entonces nos regresara una valor NaN lo que tenemos que hacer para evitar eso es una pequeña validación en donde cheque el valor de la variable que cachará lo que regrese la función Number, antes de mandarlo imprimir a la consola.

El código quedaría mas o menos asi:

var user_a = Number(prompt("How old are you?:",".."));

if(!isNaN(user_a)){
    console.log("Your age is: "+user_a);
}else{
    console.log("is not a number!!, try again.");
}

Bueno espero que les sirva este post y si tiene alguna duda pueden comentarlo.
Saludos.

Eloquent JavaScript

¿Quieres convertirte en un pro en javaScript?

Se existen muchos cursos en la red que te enseñan de una manera simple y sencilla el desarrollo en javaScript, pero que mejor que verlo por ti mismo y tratar de desarrollar esa capacidad autodidacta que se necesita para mejorar día con día.

Es por eso que en este pequeño post les traigo el libro de Eloquent Javascript que es ademas se ser un gran libro tiene contribuciones de personas de la fundación Mozilla, Hack Reactor (Lean acerca de hack reactor, se sorprenderán) y Ghostery.

Lo pueden checar en linea en el siguiente enlace:

Libro en linea aquí

O bien lo pueden descargar en PDF y tenerlo en sus computadoras con el siguiente enlace:

Descargar libro aquí 

Bueno espero que les guste el post y les sirva el libro, no olviden comentar, Saludos!!

Envió de datos de un formulario HTML por AJAX.

Bueno en esta ocasión enviaremos los datos de un formulario muy y básico hacia el backend en donde cacharemos o atraparemos los datos enviados, en un archivo php.

Primero que nada les mostrare el pequeño formulario en donde supondremos que es un login, tendremos un input de tipo text para el nombre del usuario y un input de tipo password ademas de un input de tipo button para el envio de los datos, asi quedaria mas o menos el código:

NOTA: es muy importante que tengan JQuery referenciado ya sea por CDN o en archivo local y tener instalado un servidor local para poder correr php (xamp, lamp, wamp etc.).

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   // Aquí esta la referencia a jquery
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
 </head>

 <body>
   <form method="post" id="formulario">
      <input type="text" name="usuario" placeholder="Usuario" autofocus/>
      <input type="password" name="contrasena" placeholder="Contraseña"/>
      <input type="button" id="btn-ingresar" value="Ingresar" />
   </form>
   // Este div nos servirá para cachar la respuesta enviada por el backend en caso 
   // de que sea necesario.
   <div id="resp"></div>
 </body>
</html>

Ahora crearemos el script que se encargara de enviar los datos del formulario al backend a un archivo php, el código quedaría dela siguiente manera:

$(document).on('ready',function(){ // para esperar a que la viste se cargue por completo antes
                                   // antes de cargar el javaScript.
      
    $('#btn-ingresar').click(function(){ // Esta función se ejecuta al presionar el botón
                                         // (creo que es obvio por el nombre).

        var url = "datos_login.php";     // aquí referenciamos el nombre del archivo php que se encargara de
                                         // cachar los datos enviados (mas abajo lo declaramos).

        $.ajax({                         // comienza en método ajax.
           type: "POST",                 // indicamos el método que utilizaremos para enviar los datos.
           url: url,                     // aquí colocamos la url del archivo php referenciado mas arriba.
           data: $("#formulario").serialize(), // como dato mandamos todo lo que contenga el form
           success: function(data)             // en caso de éxito se ejecuta la funcion
           {
             $('#resp').html(data);            // coloca la respuesta en el div indicado por su id.      
           }
       });
    });
});

Ahora crearemos el archivo php al cual le llamamos datos_login.php se encargara de cachar los datos y colocaremos un par de echos para que sean las respuestas y se muestren en la vista (en el div que cacha la respuesta en el html), el código quedaría mas o menos así:

<?php
   
    $usuario = $_POST['usuario']; // usando en name del input y el método POST en este caso.
    $contra  = $_POST['contrasena'];
    
    echo "tu usuario es: ".$usuario;   // pintamos los avalores recibidos
    echo "contraseña es: ".$contrsena; // para verificar que sean los correctos

?>

Así quedaría el código completo del lado del html ya que el php queda como se muestra arriba:

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   // Aquí esta la referencia a jquery
   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   <script>
   $(document).on('ready',function(){
      
      $('#btn-ingresar').click(function(){
        var url = "datos_login.php";                                      

        $.ajax({                        
           type: "POST",                 
           url: url,                    
           data: $("#formulario").serialize(),
           success: function(data)            
           {
             $('#resp').html(data);           
           }
         });
      });
   });
   </script>
 </head>
 <body>

   <form method="post" id="formulario">
      <input type="text" name="usuario" placeholder="Usuario" autofocus/>
      <input type="password" name="contrasena" placeholder="Contraseña"/>
      <input type="button" id="btn-ingresar" value="Ingresar" />
   </form>
  
   <div id="resp"></div>
 </body>
</html>

Bueno espero que les sea de ayuda, recuerden comentar sus dudas, saludos.

Crear componentes HTML dianamicamente con JavaScript.

Hoy por hoy los sitios dinámicos son mas atractivos para el usuario final, es por eso que hoy les traigo un post para crear componentes dinamicamente usando javascript, es muy sencillo ya que solo tiene que agrear unas cuantas lineas de código.

suponiendo que tenemos el siguiente código:

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      //Aquí colocaremos el resto del código        
   </script>
 </head>

 <body>
   <div id="padre">
      
   </div>
   <input type="button" id="btn_agregar" value="+">
 </body>
</html>

y lo que queremos es agregar un elemento input de tipo text cada vez que presionemos el botón + entonces, primeramente creamos una función que sera el que se encargue de agregar los datos al componente padre que sera el div con el id "padre" colocado en el código de arriba, la función quedaría algo como esto:

 function crearDin(){
   //aquí instanciamos al componente padre
   var padre = document.getElementById("padre");
   //aquí agregamos el componente de tipo input
   var input = document.createElement("INPUT");
   //aquí indicamos que es un input de tipo text
   input.type = 'text';
   
   //y por ultimo agreamos el componente creado al padre
   padre.appendChild(input);
 }

Ahora por buenas practicas creamos la función onload para asegurarnos de que js se ejecute una vez que todos los componentes html estén cargados, además, instanciaremos el input de tipo button para indicarle que mande llamar la función creada anteriormente y asi puede crear elementos, el código quedaría de la siguiente manera:

window.onload = function(){
   //Aquí referenciamos el botón que realizara la acción
   var btnAdd = document.getEmentById("btn_agregar");
   
   //Aquí solo mandamos llamar la función 
   btnAdd.onclick = crearDin;
}

Y listo ya tenemos nuestro código listo, ahora solo le agregamos un poco de css para tener una mejor vista.

Aquí el código completo:

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      function crearDin(){
         
         var padre = document.getElementById("padre");
         var input = document.createElement("INPUT");         
         input.type = 'text';

         padre.appendChild(input);
      } 
      window.onload = function(){
         
         var btnAdd = document.getEmentById("btn_agregar");   
         btnAdd.onclick = crearDin;
      }      
   </script>
 </head>

 <body>
   <div id="padre">
      
   </div>
   <input type="button" id="btn_agregar" value="+">
 </body>
</html>

Bueno espero que les sirva si tienen dudas comenten y compartan el post, un saludo.

Acción onClick en JavaScrip.

Bueno amigos hoy les traigo un post fácil y sencillo en JavaScript, la acción onclick de un botón que no es mas que indicar al botón que realice alguna acción al ser presionado.

Existen muchas varias formas de realizar pero solo les hablare de dos.

Bueno la primera es la más primitiva y que hoy en día ya no se recomienda realizarlo, en esta forma lo único que hacemos es agregarle al tag button el atributo onclick y especificandele la función que debe mandar llamar al presionar el botón, como se puede apreciar en el siguiente código:

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      //dentro de estos dos tags colocamos nuestro código javaScript   
      //creamos la función que mandara llamar el botón, y dentro todo lo que queramos que realice
      function nombreFuncion(){
        alert("hola javascript");
      }    
   </script>
 </head>

 <body>
   <button onclick="nombreFuncion();">Presioname</button>
 </body>
</html>

y listo ya tenemos nuestra acción del botón pero como comente anteriormente ya no se recomienda realizarlo de esa forma.

Ahora veremos la segunda forma y la mas recomendada, que consta de enlazar el botón o input, para poder tener un mayor control sobre el, de hecho es la forma en que personalmente la trabajo.

Debemos tener en cuenta en que es necesario agregar un id al botón para poder enlazarlo, veamos un ejemplo en el código siguiente:

<!DOCTYPE html>
<html lang="es">
 <head>
   <meta charset="UTF-8" />
   <title> Acción onclick en js </title>
   <script>
      //creamos la función que mandara llamar el botón, y dentro todo lo que queramos que realice
      function nombreFuncion(){
        alert("hola javascript");
      }
      //creamos nuestra función onload para asegurar que js se ejecute una vez que todo este cargado
      window.onload = function(){  
         //ahora enlazamos nuestro botón, utilizando en id
         var miboton = document.getElementById("btn_aceptar");
           
         //ahora simplemente mandamos llamar el 
         //método en donde tenemos todas las instrucciones
         //nota: el nombre de la función al ser llamado
         //no lleva paréntesis.
         miboton.onclick = nombreFuncion;
      }    
   </script>
 </head>

 <body>
   <!--como podemos ver agregamos un id con el nombre que ustedes quieran-->
   <button id="btn_aceptar">Presioname</button>
 </body>
</html>

Y listo así de fácil tenemos nuestra acción, les comento que con JQuery es más fácil aun, pero eso lo veremos en otro post, bueno espero que les sirva y comenten cualquier duda.

Aquí abajo le pongo el vídeo del evento onclick.