jQuery – Ejercicios básicos 01- Mensaje emergente con formulario
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.js y jquery.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í:
