Mtro. Fernando Arciniega

Apoyame con un clic en los anuncios, me ayudas a seguir generando contenido de calidad. ¡Gracias por tu apoyo!

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors
Search in posts
Search in pages

jQuery – Ejercicios básicos 01- Mensaje emergente con formulario

jQuery – Ejercicios básicos 01- Mensaje emergente con formulario
Print Friendly, PDF & Email

jQuery es una biblioteca de JavaScript que permite interactuar con documentos estáticos HTML y dinámicos como PHP, manipular la estructura de los documentos DOM (Modelo de Objetos del Documento), manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. Para hacer uso de la biblioteca jQuery necesitamos descargarla desde la página oficial o desde esta web la versión 1.12.1 Una vez descargado ocuparemos los archivos jquery.jsjquery.min.js

Mensaje emergente desde un formulario

Para realizar este ejercicio debemos crear primero un documento HTML con sus estructura básica.

<!DOCTYPE html>
<html lang="es">
<head>
<title>Titulo de la web</title>
<meta charset="utf-8" />
</head>
<body>
</body>
</html>

Dentro de body creamos un formulario sencillo para introducir el texto y enviar la variable mediante un botón:

<form>
      <label for="entrada">Introduce tu nombre</label>
      <input type="text" name="entrada" id="entrada" />
</form>
<button id="saluda">Saludar</button>

Vamos a añadir un script que realice lo siguiente:

//Construimos la función para el Saludo:

function saludo(persona){  //Creamos la función 'saludo' con un parámetro para recibir la variable de tipo string
alert('Hola '+ persona);   //Mostramos el mensaje con el que saludamos y le añadimos el nombre que hemos obtenido 
			}
			
jQuery('#saluda').click(function(){   	  //Al hacer clic sobre el botón de saludar ejecutamos la función
var nombre = jQuery('#entrada').val();   //Tomamos el valor que hemos escrito en su campo correspondiente
saludo(nombre);	         //Llamamos la función 'saludo' pasándole la variable que hemos capturado 
			});

El Script que añadiremos después del formulario quedará así:

<script type="text/javascript">
		jQuery(document).ready(function() {
					function saludo(persona){ 
     					alert('hola '+ persona); 
										}
		jQuery('#saluda').click(function(){ 
    				 var nombre = jQuery('#entrada').val(); 
    					 saludo(nombre); 
										});
		});
</script>

Para hacer uso de las bibliotecas jQuery debemos declararlas en el head:

<script src="jquery.js"></script>
<script src="jquery.min.js"></script>

La vista previa del formulario y el mensaje al dar clic quedará así:

formulario y mensaje basico con jquery

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.