Crear un alert con jQuery

Tabla de contenidos

En Generacionweb, diseño web Valencia, apostamos por jQuery para el diseño de páginas web.

Ejemplo básico de como crear un alert con jquery. Crear un alert con jQuery, aprendiendo jquery paso a paso. Con este ejemplo aprendemos a crear un alert de la manera mas sencilla.

Crear un alert con jQuery

crear un alert con jquery
Para crear un alert con jQuery debemos previamente cargar la biblioteca de javaScript jQuery dentro del head para poder utilizar todas las funcionalidades de jQuery. En este ejemplo hemos cargado también un archivo scripts.js en el cual implementaremos el código que ejecuta un alert.

En el caso de que no quisiésemos cargar un archivo .js externo se puede crear un alert directamente dentro del body utilizando etiquetas script, por ejemplo:

<script> 
alert ("Hola Mundo"); 
</script>

 

En el caso de utilizar un archivo externo con la carga de nuestros códigos jQuery tendremos que cargar dentro del head el archivo scpript.js en el cual estará todo nuestro código jQuery que vayamos implementando, en este caso solo utilizamos un alert.

ARCHIVO HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alert</title>
<link rel="stylesheet" href="css/styles.css" />
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/scripts.js"></script>
</head>

<body>
<div class="content">
<h1>Alert</h1>                                  

<p>Al cargar la página, se ejecutará un alert con el texto "Hola Mundo".</p>

</div>
</body>
</html>

ARCHIVO CSS

/* CSS Document */

body{
  background:#81d742;
}
.content{
  width:1000px;
  margin-top:50px;
  min-height:600px;
  background:#fff;
  margin:0 auto;
  padding:20px;
}

ARCHIVO JQUERY

Usamos document ready como función que se ejecutará una vez cargada la web en el navegador.

// JavaScript Document

$(document).ready(function() {
    alert ("Hola Mundo"); 
});

Descargar alert con jquery

Picture of Jose Hilario
Jose Hilario
¡Apasionado del diseño web! Especializado en WordPress, WooCommerce y Elementor PRO. Me encanta diseñar páginas web atractivas y optimizadas para SEO. Mi objetivo: impulsar a las empresas con un diseño web atractivo y funcional.

Deja una respuesta

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

Relacionados: