java script – ProgramaciónExtrema.com https://programacionextrema.com Tutoriales de programación! Wed, 12 Sep 2018 17:52:42 +0000 es hourly 1 https://wordpress.org/?v=5.6.15 https://programacionextrema.com/wp-content/uploads/2015/10/cropped-icon-programacion-extrema-32x32.png java script – ProgramaciónExtrema.com https://programacionextrema.com 32 32 Ocultar y mostrar un botón con Java Script y jQuery https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/ https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/#respond Wed, 12 Sep 2018 17:52:41 +0000 https://programacionextrema.com/?p=1321 Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de… Read More

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> Después de un largo tiempo vuelvo con un nuevo tutorial, puede ser bastante simple pero muy útil para aquellos que recién empiezan a programar. En esta oportunidad vamos a ver cómo ocultar y mostrar un botón con Java Script y jQuery. Esta misma funcionalidad también se puede aplicar con cualquier etiqueta HTML en caso de ser necesario.

Para hacer esto es muy importante tener la librería de jQuery incluida en el código HTML, como lo mostraremos más adelante.

Cómo ocultar y mostrar un botón HTML con Java Script y jQuery

El código que publicaré a continuación lo que hace es ocultar o mostrar el botón con id «acción» con solamente presionar otros dos botones.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar botón acción</button>
    <button type="button" id="hide">Ocultar botón acción</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').show();
        });
        $('#hide').click(function(){
	      $('#button').hide();
        });
      })
    </script>
  </body>
</html>

Ahora si se quiere simplificar la funcionalidad, se puede utilizar la función toggle de jQuery, que detecta automáticamente si el botón está oculto o no. En caso de estar oculto lo muestra y lo mismo en caso contrario.

<html>
  <head>
    <title>Ocultar y mostrar un botón con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <button type="button" id="button">Acción</button>
    <button type="button" id="show">Mostrar/Ocultar</button>
    <script>
      $(function(){
        $('#show').click(function(){
          $('#button').toggle();
        });
      })
    </script>
  </body>
</html>

Bueno gente, eso es todo por esta vez. La idea es que al finalizar el mini tutorial puedan ser capaces de oculta y mostrar etiquetas HTML con Java Script y jQuery. Ante cualquier inconveniente no duden en dejar un comentario.

La entrada Ocultar y mostrar un botón con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/09/12/ocultar-y-mostrar-un-boton-con-java-script-y-jquery/feed/ 0 Cambiar el color de una etiqueta con jQuery https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/ https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/#comments Sat, 10 Mar 2018 19:48:30 +0000 http://programacionextrema.com/?p=1301 En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o… Read More

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> En esta oportunidad les voy a traer otro sencillo tutorial para que puedan aprender a cambiar el color de una etiqueta con jQuery y Java Script de forma dinámica, esta funcionalidad puede ser muy útil en diversos casos como por ejemplo cuando se quiere crear un botón que cambie de color cuando se presiona o se ponga el cursor sobre él, ente otros posibles.

Cómo cambiar el color de una etiqueta o tag HTML con jQuery y Java Script

Antes de mostrar como realizar esta sencilla función es muy importante recordarles que deben importar la librería de jQuery, en el siguiente código la vamos a incluir directamente desde la nube pero ustedes lo pueden hacer descargando el archivo en sus computadoras.

Luego de que tengan configurado la librería de jQuery vamos a empezar a programar, como primer paso vamos a crear una etiqueta con la clase box, la cual va a tener un tamaño de 100×100 px, esto es muy importante ya que si la etiqueta no tiene un tamaño predefinido o no contiene nada (como puede ser un texto) no se va a mostrar el color de fondo.

Luego con jQuery y Java Script simplemente vamos a obtener la etiqueta para cambiar su color de fondo a rojo, modificando la propiedad CSS backgrand con la función CSS que proporciona jQuery.

<html>
  <head>
    <title>Cambiar el color de una etiqueta con jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <style>
      .box {
        height: 100px;
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div class="box">
    </div>
    <script>
      $(function(){
        $('.box').css('background', 'red');
      })
    </script>
  </body>
</html>

Al ejecutar el código anterior en su navegador vas a poder ver un cuadrado de color rojo, en caso de que quieras poner otro color simplemente debes cambiar el valor de la propiedad por otro.

Eso es todo por hoy, espero que les sea de gran utilidad este aporte, ante cualquier inconveniente no duden en dejar un mensaje.

La entrada Cambiar el color de una etiqueta con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2018/03/10/cambiar-el-color-de-una-etiqueta-con-jquery/feed/ 1 Cómo enviar un formulario con Java Script y jQuery https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/ https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/#respond Thu, 28 Sep 2017 19:51:03 +0000 http://programacionextrema.com/?p=1289 Java Script es un lenguaje muy poderoso, utilizado especialmente en el frontend para realizar páginas dinámicas que puedan brindar una mejor usabilidad a los usuarios, es por eso que en este breve tutorial vamos a ver como solucionar un problema muy frecuenta que se pueden encontrar los desarrolladores, el cual consiste en enviar un formulario… Read More

La entrada Cómo enviar un formulario con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> Java Script es un lenguaje muy poderoso, utilizado especialmente en el frontend para realizar páginas dinámicas que puedan brindar una mejor usabilidad a los usuarios, es por eso que en este breve tutorial vamos a ver como solucionar un problema muy frecuenta que se pueden encontrar los desarrolladores, el cual consiste en enviar un formulario utilizando Java Script y jQuery.

Código para enviar un formulario con Java Scipt

Vamos a empezar con el código para enviar el formulario utilizando el lenguaje de programación Java Script, primero crearemos un formulario HTML muy sencillos, seguido de la función que va a realizar el envío.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <button type="submit" onclick="submitform(); return false;">Enviar formulario</button>
    </form>
    <script>
      function submitform(){
      	alert("Formulario enviado desde Java Script");
      	document.getElementById('form').submit();
      }
    </script>
  </body>
</html>

Del código mencionado es muy importante ver que el botón del formulario se encarga de hacer el envío aprovechando a través onclick, además es muy importante no olvidarse de incluir el return false ya que eso evita que el formulario se envie automáticamente sin ejecutar la función submitform de Java Script, otra forma de evitar eso es usar un input de type button como botón.

Código para enviar un formulario con jQuery

La versión anterior fue realizada en Java Script sin ningún tipo de librerías, en esta ocasión realizamos la misma función pero utilizando jQuery.

<html>
  <head>
    <title>Enviar un formulario con Java Script y jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <form id="form" action="page.php">
      <input type="text" name="texto">
      <input id="button" type="button" value="Enviar formulario"/>
    </form>
    <script>
	$("#button").click(function(event){
	  alert("Formulario enviado con jQuery");
	  $('#form').submit();
	});
    </script>
  </body>
</html>

Esas son dos formas posibles para enviar un formulario, esto se puede utilizar mucho cuando se necesita realizar validaciones o simplemente cuando se requiere ejecutar algún proceso o verificación antes de hacer el envío de los datos.

Espero que les haya servido y antes cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo enviar un formulario con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/09/28/como-enviar-un-formulario-con-java-script-y-jquery/feed/ 0 Cómo limpiar un input con jQuery https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/ https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/#comments Wed, 09 Aug 2017 23:45:54 +0000 http://programacionextrema.com/?p=1280 Vuelvo despues de un tiempo con un simple tutorial de Java Script y HTML, en esta ocasión vamos a ver cómo limpiar un input con jQuery. Es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente la de googleapis. Cómo limpiar un input… Read More

La entrada Cómo limpiar un input con jQuery aparece primero en ProgramaciónExtrema.com.

]]> Vuelvo despues de un tiempo con un simple tutorial de Java Script y HTML, en esta ocasión vamos a ver cómo limpiar un input con jQuery. Es importante mencionar que para seguir los pasos hay que utilizar la librería de jQuery, para este tutorial vamos a utilizar directamente la de googleapis.

Cómo limpiar un input con jQuery y Java Script

Vamos a ver que el código es muy sencillo y se puede hacer de muchas formas diferente, antes de empezar vamos a definir un botón y un input con un valor, en este caso el valor va a ser «Hola Mundo!».

<input type="text" value="Hola Mundo!">
<button id="limpiar">Limpiar</button>

El botón al ser oprimido va a limpiar el input, para esto vamos a utilizar el evento click y la funcion val.

$(document).ready(function() {
  $('#limpiar').click(function() {
    $('input[type="text"]').val('');
  });
});

Si al ejemplo le agregamos varios input más, al oprimir el botón se limpiarían todos ya que se ha especificado eso en el evento click. Para especificar que input se desea limpiar se le pueden agregar un id o una clase, a continuación el ejemplo completo.

<!DOCTYPE html>
<html>
  <head>
    <title>Limpiar input con jQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  </head>
  <body>
    <input class="hola-mundo-input" type="text" value="Hola Mundo!">
	<button id="limpiar">Limpiar</button>
    <script type="text/javascript">
		$(document).ready(function() {
			$('#limpiar').click(function() {
				$('.hola-mundo-input').val('');
			});
		});
    </script>
  </body>
</html>

Bueno, eso es todo, espero que les sirva este breve tutorial y ante cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo limpiar un input con jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/08/09/como-limpiar-un-input-con-jquery/feed/ 1 Cómo borrar una etiqueta div HTML con Java Script y jQuery https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/ https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/#respond Mon, 01 May 2017 18:24:23 +0000 http://programacionextrema.com/?p=1257 El desarrollo de sitios dinámicos en la actualidad se está utilizando mucho, debido a la gran usabilidad que le proporciona a los usuarios finales de las aplicaciones. Uno de los lenguajes que juega un papel fundamental en estos casos es Java Script junto a la librería jQuery. Hoy en este mini tutorial vamos a ver… Read More

La entrada Cómo borrar una etiqueta div HTML con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> El desarrollo de sitios dinámicos en la actualidad se está utilizando mucho, debido a la gran usabilidad que le proporciona a los usuarios finales de las aplicaciones. Uno de los lenguajes que juega un papel fundamental en estos casos es Java Script junto a la librería jQuery. Hoy en este mini tutorial vamos a ver cómo eliminar o borrar una etiqueta div HTML con jQuery con un ejemplo muy sencillo y fácil de entender, lo que permitirá hacer sitios más dinámicos.

Cómo eliminar o borrar una etiqueta div HTML con Java Scirpt y jQuery

Para empezar a resolver este sencillo problema crearemos una porción de código HTML, el cual vamos a utilizar para eliminar un elemento div. 

<div id="borrar">
  <p>Eso es una prueba para <strong>borrar código HTML</strong>. Ofrecido por ProgramacionExtrema.com<p>
</div>

En el código anterior definimos un tag div con id «borrar», el cual utilizaremos para eliminar con la siguiente línea de jQuery.

$('#borrar').remove();

A continuación el código completo, en el cual utilizamos la función setTimeout que hace que después de 3 segundo de ejecutarlo elimine la etiqueta HTML.

<html>
  <head>
    <meta charset="utf-8">
    <title> Borrar HTML  con jQuery </title>
    <meta name="robots" content="noindex, nofollow">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript">
      $(function() {
        setTimeout(function(){
          $('#borrar').remove();
        }, 3000)
      });
    </script>
  </head>
  <body>
    <div id="borrar">
      <p>Eso es una prueba para <strong>borrar código HTML</strong>. Ofrecido por ProgramacionExtrema.com
      <p>
    </div>
  </body>
</html>

Eso es todo lo necesario para eliminar código HTML con Java Script, ante cualquier inconveniente no duden en dejar un comentario.

La entrada Cómo borrar una etiqueta div HTML con Java Script y jQuery aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/05/01/como-borrar-una-etiqueta-div-html-con-java-script-y-jquery/feed/ 0 Convertir HTML en imagen con Java Script y jQuery para descargar https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/ https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/#comments Tue, 14 Mar 2017 20:06:13 +0000 http://programacionextrema.com/?p=1235 Hace poco para un proyecto personal tuve la necesidad de generar imágenes a partir de código HTML para que se puedan descargar en formato PNG, si bien en un principio parecía ser una tarea bastante fácil más adelante se me complico ya que no encontraba una librería en Java Script útil que me ayudara a… Read More

La entrada Convertir HTML en imagen con Java Script y jQuery para descargar aparece primero en ProgramaciónExtrema.com.

]]> Hace poco para un proyecto personal tuve la necesidad de generar imágenes a partir de código HTML para que se puedan descargar en formato PNG, si bien en un principio parecía ser una tarea bastante fácil más adelante se me complico ya que no encontraba una librería en Java Script útil que me ayudara a realizar dicha tarea. Después de un tiempo de buscar me encontré con una llamada html2canvas la cual es bastante amigable y es soportada por la mayoría de los navegadores actuales. Con un simple código pude convertir HTML en imagen para que se pueda descargar y guardar en cualquier computadora.

Estas cosas pueden ser muy útiles cuando se tienen grillas o información muy relevante en lo sitios y las personas las comparten mucho por redes sociales.

Cómo convertir etiquetas o tags HTML en imágenes para descargar y guardar usando el lenguaje Java Script

Como hemos dicho en un principio para poder generar la imagen o foto vamos a utilizar la librería html2canvas, la cual convierte código HTML en canvas. Primero para descargar la última versíon de la librería hay que ingresar al sitio oficial https://github.com/niklasvh/html2canvas/releases.

Descargamos el archivo y lo impartamos en nuestro código junto a la librería de jQuery, ya que la vamos a utilizar para simplificar algunas tareas:

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type="text/javascript" src="html2canvas.js"></script>

Después para hacer la conversión es necesario tener algunas etiquetas o tags HTML y un botón para iniciar la descarga de la imagen como se muestra a continuación:

<div id="imagen">
  <p>Esto es una prueba para <strong>exportar código HTML</strong> a imagen en formato PNG. Ofrecido por ProgramacionExtrema.com<p>
</div>
<button id="boton-descarga">Descargar imagen</button>

Y finalmente necesitamos la lógica para convertir el HTML, para esto vamos a crear la función downloadCanvas, la cual recibe el id del div a convertir y el nombre final del archivo descargable:

 function downloadCanvas(canvasId, filename) {
     // Obteniendo la etiqueta la cual se desea convertir en imagen
     var domElement = document.getElementById(canvasId);

     // Utilizando la función html2canvas para hacer la conversión
     html2canvas(domElement, {
         onrendered: function(domElementCanvas) {
             // Obteniendo el contexto del canvas ya generado
             var context = domElementCanvas.getContext('2d');

             // Creando enlace para descargar la imagen generada
             var link = document.createElement('a');
             link.href = domElementCanvas.toDataURL("image/png");
             link.download = filename;

             // Chequeando para browsers más viejos
             if (document.createEvent) {
                 var event = document.createEvent('MouseEvents');
                 // Simulando clic para descargar
                 event.initMouseEvent("click", true, true, window, 0,
                     0, 0, 0, 0,
                     false, false, false, false,
                     0, null);
                 link.dispatchEvent(event);
             } else {
                 // Simulando clic para descargar
                 link.click();
             }
         }
     });
 }

 // Haciendo la conversión y descarga de la imagen al presionar el botón
 $('#boton-descarga').click(function() {
     downloadCanvas('imagen', 'imagen.png');
 });

Luego al presionar el botón de descarga se hará la conversión automática y la imagen se descargará en su computadora, para ver el ejemplo completo y funcionado ingrese aquí.

Detalles e inconvenientes a tener en cuenta

Dos puntos a tener en cuenta:

Para el caso en el que el contenido HTML que se desea convertir a PNG tenga imágenes, estas deben estar alojadas bajo el mismo dominio, ya que en caso contrario no se podrán visualizar por temas de seguridad.

Si la imagen exportada sale borrosa o se ve mal, le recomendamos modificar el código fuente de la librería. Básicamente debe cambiar la función getBounds por la siguiente:

 function getBounds(node) {
     if (node.getBoundingClientRect) {
         var clientRect = node.getBoundingClientRect();
         var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
         return {
             top: Math.floor(clientRect.top),
             bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
             right: Math.floor(clientRect.left + width),
             left: Math.floor(clientRect.left),
             width: width,
             height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
         };
     }
     return {};
 }

De esa forma el resultado será mucho mejor.

Bueno gente, eso es todo lo que hay que saber para poder exportar HTML a imagen en muy pocos pasos y utilizando Java Script con jQuery, espero que les sirva y ante cualquier problema no duden en dejar sus comentarios.

La entrada Convertir HTML en imagen con Java Script y jQuery para descargar aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2017/03/14/convertir-html-en-imagen-java-script-jquery-para-descargar/feed/ 19 Generar token random con Java Script https://programacionextrema.com/2016/11/25/generar-token-random-con-java-script/ https://programacionextrema.com/2016/11/25/generar-token-random-con-java-script/#comments Fri, 25 Nov 2016 18:31:14 +0000 http://programacionextrema.com/?p=1147 Java Script es un lenguaje de programación muy potente y muy utilizado en la actualidad, en este tutorial lo vamos a utilizar para generar un token de forma random o aleatorea. En muchos casos los tokens pueden ser muy útiles para mantener la seguridad de los sistemas que se van a desarrollar, por ejemplo sirven… Read More

La entrada Generar token random con Java Script aparece primero en ProgramaciónExtrema.com.

]]> Java Script es un lenguaje de programación muy potente y muy utilizado en la actualidad, en este tutorial lo vamos a utilizar para generar un token de forma random o aleatorea. En muchos casos los tokens pueden ser muy útiles para mantener la seguridad de los sistemas que se van a desarrollar, por ejemplo sirven para la autenticación o para generar URLs muchos más complejas.

Cómo crear o generar un token con Java Script de forma random

Generar este código de seguridad no es para nada difícil en Java Script, ya que el mismo lenguaje nos proporciona el objeto Math, con el cual se pueden generar números random. El token que vamos a generar a continuación solamente va a estar compuesto de números y letras (0-9a-z).
EL siguiente código genera un número aleatoreo y lo convierte en base 36.

function random() {
    return Math.random().toString(36).substr(2); // Eliminar `0.`
};

function token() {
    return random() + random(); // Para hacer el token más largo
};

alert(token());

Para obtener el resultado hay que utilizar la función token. En caso de querer un valor mucho más grande se puede concatenar otra función random más, como se muestra en el siguiente código:

function token() {
    return random() + random() + random(); // Para hacer el token más largo
};

Bueno gente, esto es todo lo necesario para crear o generar tokens de seguridad con Java Script, espero que les sea de gran utilidad y ante cualquier problema no duden en dejar un comentario.

La entrada Generar token random con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2016/11/25/generar-token-random-con-java-script/feed/ 2 AJAX sin jQuery (sin librerías) https://programacionextrema.com/2016/08/15/ajax-sin-jquery-sin-librerias/ https://programacionextrema.com/2016/08/15/ajax-sin-jquery-sin-librerias/#comments Mon, 15 Aug 2016 21:23:07 +0000 http://programacionextrema.com/?p=1112 Hola gente de programacionextrema.com, lamentablemente por otras responsabilidades hace mucho que no posteo algo útil en este sitio, así que después de mucho tiempo voy a crear un mini tutorial, en el cual voy a explicar cómo utilizar AJAX sin jQuery en Java Sccript (sin utilizar librerías). Cómo hacer una petición AJAX sin jQuery en… Read More

La entrada AJAX sin jQuery (sin librerías) aparece primero en ProgramaciónExtrema.com.

]]> Hola gente de programacionextrema.com, lamentablemente por otras responsabilidades hace mucho que no posteo algo útil en este sitio, así que después de mucho tiempo voy a crear un mini tutorial, en el cual voy a explicar cómo utilizar AJAX sin jQuery en Java Sccript (sin utilizar librerías).

Cómo hacer una petición AJAX sin jQuery en Java Script (sin librerías)

En ciertas ocasiones nos podemos encontrar con la necesidad de realizar una petición AJAX sin utilizar librerías externas para Java Script, como por ejemplo jQuery. A continuación les voy a mostrar un simple código que realiza una petición AJAX.

function ajax() {
  // De esta forma se obtiene la instancia del objeto XMLHttpRequest
  if(window.XMLHttpRequest) {
    connection = new XMLHttpRequest();
  }
  else if(window.ActiveXObject) {
    connection = new ActiveXObject("Microsoft.XMLHTTP");
  }

  var param = "Esto es una prueba AJAX sin jQuery";

  // Preparando la función de respuesta
  connection.onreadystatechange = response;

  // Realizando la petición HTTP con método POST
  connection.open('POST', 'test.php');
  connection.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  connection.send("param=" + param + "&nocache=" + Math.random());
}

function response() {
  if(connection.readyState == 4) {
    alert(connection.responseText);
  }
}
  
ajax();

La función ajax() va a ser la encargada de realizar la petición. Si miramos bien el código lo que hace es una petición POST al archivo «test.php» con el parámetro «param».
Luego la función response se encarga de recibir la respuesta del servidor para mostrarla en un alert.

Para probarlo correctamente vamos a crear el archivo «test.php» con el siguiente contenido. Que básicamente recibe un parámetro «POST» y lo imprime con la función echo.

<?php
  echo $_POST['param'];
?>

Entonces si ejecutamos el código anterior se va a mostrar el mensaje «Esto es una prueba AJAX sin jQuery» mediante un alert.

Bueno gente, eso es todo lo que tienen que saber a la hora de realizar una petición AJAX con Java Script sin jQuery. Espero que les sea de gran utilidad y ante algún problema no duden en enviar un mensaje.

La entrada AJAX sin jQuery (sin librerías) aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2016/08/15/ajax-sin-jquery-sin-librerias/feed/ 2 Aprender Java Script desde 0 https://programacionextrema.com/2016/05/08/aprender-java-script-desde-0/ https://programacionextrema.com/2016/05/08/aprender-java-script-desde-0/#respond Sun, 08 May 2016 22:46:11 +0000 http://programacionextrema.com/?p=1110 Hola gente, la intención del siguiente tutorial es que puedan aprender Java Script desde 0. Vamos a encarar este tutorial como si no tuvieran ningún tipo de conocimientos en el lenguaje. Tal vez también les puedan interesar el tutorial en el cual explicamos cómo hacer un Hola Mundo con PHP, con un ejemplo muy sencillo… Read More

La entrada Aprender Java Script desde 0 aparece primero en ProgramaciónExtrema.com.

]]> Hola gente, la intención del siguiente tutorial es que puedan aprender Java Script desde 0. Vamos a encarar este tutorial como si no tuvieran ningún tipo de conocimientos en el lenguaje.

Tal vez también les puedan interesar el tutorial en el cual explicamos cómo hacer un Hola Mundo con PHP, con un ejemplo muy sencillo para que cualquier persona lo pueda comprender fácilmente.

Antes de empezar a tirar código vamos a hablar un poco del lenguaje. Java Script es un lenguaje de programación utilizado para desarrollar páginas web dinámicas, además normalmente se ejecuta en el cliente (osea en el navegador de los usuario y no en el servidor). Digo normalmente porque en la actualidad existen servidores como NodeJS que ejecutan el lenguaje desde el servidor, igualmente esto no lo vamos a ver en este breve tutorial.

Ahora que aprendimos que el código Java Script es ejecutado en el navegador del cliente (por ejemplo chrome) podemos empezar a tirar un poco de código para aprender algunas cosas básicas.

Ahora si podemos aprender Java Script

Antes de empezar vamos a necesitar un editor de texto, yo les recomiendo Sublime ya que es muy fácil de usar y a su vez muy potente.
Luego vamos a crear un archivo, de nombre index y extensión html (index.html), para luego poder realizar el famoso «Hola Mundo!».

Haciendo el Hola Mundo! en Java Script

El «Hola mundo» se puede hacer de muchas formas distintas, pero nosotros lo vamos a realizar mostrando una ventana.
Para esto vamos a necesitar insertar en nuestro archivo index.html la estructura básica de una página web:

<html>
    <head>
        <title>Aprender JavaScript</title>
        <script>
            alert("Hola Mundo!");
        </script>
    </head>
    <body>
    </body>
</html>

Dentro de las etiquetas script siempre va todo el código Java Script, que en nuestro caso estamos mostrando el mensaje «Hola Mundo!» utilizando la función alert, que nos proporciona el lenguaje de forma nativa.

Variables y estructura de control if con Java Script

Hasta ahora lo que hicimos fue algo muy sencillo, solamente mostramos un mensaje con la función alert. Pero que pasa si queremos agregar más lógica a nuestra página, osea queremos ejecutar cierto código dependiendo de si una condición se cumple o no.
Para realizar esto podemos utilizar la estructura de control if (al igual que en cualquier lenguaje), la cual recibe una condición que si se cumple ejecuta un bloque de código o en caso contrario puede ejecutar otro bloque. Para hacer esto, simplemente vamos a realizar el siguiente código:

<html>
    <head>
        <title>Aprender JavaScript</title>
        <script>
            esMiPrimerPrograma = true;
            if(esMiPrimerPrograma){
                alert("Hola Mundo!");
            }else{
                alert("No es mi primer programa.");
            }
        </script>
    </head>
    <body>
    </body>
</html>

El if siempre recibe un boolean (true o false), en este caso está recibiendo la variable esMiPrimerPrograma que tiene asignando el valor true, y en consecuencia, como se cumple la condición se va a mostrar el mensaje «Hola Mundo!», pero si cambiamos la variable a false, se va a mostrar el mensaje «No es mi primer programa.»

Bueno gente, hemos llegado al final de la primera parte de esta serie de tutoriales que tengo pensado hacer para que puedan aprender a programar con Java script, dentro de unos días voy a lanzar la segunda parte donde vamos a ver más estructuras de control.

La entrada Aprender Java Script desde 0 aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2016/05/08/aprender-java-script-desde-0/feed/ 0 Limpiar un formulario con Java Script https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/ https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/#comments Tue, 08 Mar 2016 23:31:19 +0000 http://programacionextrema.com/?p=1107 Java Script y HTML son dos lenguajes de programación fundamentales para desarrollar un sitio web moderno y sencillo. Es por ese motivo que en esta ocasión aprenderemos una simple técnica para limpiar un formulario con Java Script. La necesidad de limpiar un formulario con Java Script Especialmente en formularios con muchos campos para completar siempre… Read More

La entrada Limpiar un formulario con Java Script aparece primero en ProgramaciónExtrema.com.

]]> Java Script y HTML son dos lenguajes de programación fundamentales para desarrollar un sitio web moderno y sencillo. Es por ese motivo que en esta ocasión aprenderemos una simple técnica para limpiar un formulario con Java Script.

La necesidad de limpiar un formulario con Java Script

Especialmente en formularios con muchos campos para completar siempre es muy útil para los usuarios tener la opción de limpiar o reiniciar el formulario, esto va ahorrarle al usuario realizar ese trabajo molesto, ya que en muchos casos podría dejar de visitar el sitio.

Cómo reiniciar o limpiar un formulario con Java Script

Para realizar esta tarea vamos a necesitar un formulario en HTML. Para este caso vamos a realizar uno muy simple, con dos campos de textos y dos botones (uno para enviar el formulario y el otro para limpiar el formulario).

<form id="miForm" action="action_page.php">
    Nombre:<br>
    <input type="text" name="nombre"><br>
    Apellido:<br>
    <input type="text" name="apellido"><br><br>
    <input type="button" onclick="limpiarFormulario()" value="Limpiar formulario">
    <input type="submit" value="Submit">
</form>

En el código del formulario se puede ver que el botón de tipo button va a ejecutar la función Java Script limpiarFormulario() cuando se haga click. Esa función va a ser la encargada de reiniciar el formulario:

<script>
  function limpiarFormulario() {
    document.getElementById("miForm").reset();
  }
</script>

Esta misma funcionalidad se puede realizar de otra forma mucho más sencilla, compatible con navegadores HTML5 y sin utilizar Java Script. Siguiendo con el código anterior solamente debemos cambiar el tipo del botón por reset y obviamente quitar la función onclick:

<input type="reset" value="Limpiar formulario">

Bueno gente, esto es todo. Espero que les haya sido de gran utilidad este breve tutorial en el cual explicamos cómo limpiar un formulario con Java Script. Ante cualquier inconveniente no dude en enviar un comentario.

La entrada Limpiar un formulario con Java Script aparece primero en ProgramaciónExtrema.com.

]]> https://programacionextrema.com/2016/03/08/limpiar-un-formulario-con-java-script/feed/ 2