Introducción a los eventos - Curso de JavaScript de cero a máster - Capítulo 31

Dejamos atrás la parte básica del curso para dar paso al nivel medio. Nivel que voy a inaugurar con una Introducción a los eventos de JavaScript.

Eventos de JavaScript

¿Qué son los eventos?

Los eventos son una serie de acciones u ocurrencias que pueden desencadenar ciertas cosas.
El código de ciertas acciones, permanecerá inactivo, sin ejecutarse hasta que se produzca un evento, por ejemplo, el usuario pulsa un botón y este realiza algo.

En resumen, podemos hacer que cuando pase algo en concreto, se ejecute una acción.

Disponemos de muchos tipos de eventos que iremos viendo a lo largo del curso. En este capítulo solo probarás el tipo de evento onclick, solo para que puedas ver un ejemplo de uso práctico de los eventos.

¿Qué es un controlador de eventos?

Un controlador de eventos es el mecanismo que necesitas para que se maneje el evento. Por norma general, será una función que se va a llamar en el momento en el que se active el evento.

Por el momento, en esta introducción vamos a poner eventos directamente sobre etiquetas html. Hay otras formas de hacerlo. Las iremos viendo.

Eventos JavaScript sobre html

Veamos un primer ejemplo, un evento que se ejecute en el momento en el que el usuario haga click en un botón.

Tendrás que tener los siguientes archivos para hacer la prueba. Los puedes dejar en la raíz del directorio principal (raíz) o bien, crea carpetas folder_open, una para ir guardando archivos .js y otra para los de .css tal y como muestro en el vídeo.

Proyecto Atom

Para realizar este ejemplo, te basta con el archivo .html, ya que vamos a escribir ahí el evento de JavaScript directamente sobre una etiqueta html. La parte del CSS es opcional, ya que este curso no va a estar dedicado a esto, para ello tienes mi curso dedicado a CSS desde cero. No obstante, no está mal que vayas practicando con el manejo de archivos aunque no entiendas demasiado CSS. Con un botón por defecto de html te sirve para hacer esto.

test.html

Este es el código que debes guardar en una página .html.

En lo que te tienes que fijar es en la línea 11. Aquí tienes una etiqueta <button> con un evento de tipo onclick ejecutado directamente desde este botón. En este onclick he puesto un alert() de JavaScript.

Etiquetas html

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Introducción a los eventos</title>
	<script src="test.js"></script>
	<link href="test.css" rel="stylesheet" />
</head>

<body>
	<button onclick="alert('¡Has pulsado el botón!');">¡NO PULSAR!</button>
</body>
</html>

test.css

Este es el código que debes guardar en una hoja .css.

Código CSS

@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

body{
	text-align: center;
	margin-top: 7em;
}

button {
	padding: 1em 2.1em 1.1em;
	display: block;
	color: #e8e1df;
	background-color: #fbdedb;
	display: inline-block;
	background: #ec7b6f;
	background-color: #f04747;
	transition: 0.6s;
	font-family: 'Bungee', cursive;
	font-size: 2em;
	text-align: center;
	position: relative;
	border-radius: 1.5em;
	box-shadow: 0em -0.6rem 0.1em rgba(0, 0, 0, 0.1) inset;
	border:none;
}
button:hover, .btn:focus {
    opacity: 0.75;
}
button:active {
    transform: scale(1.2);
}

Si cargamos esto en el navegador, nos va a aparecer un botón como este.

Evento onclick de javascript

Resultado en el navegador

Al pulsar el botón, se ejecuta el evento, pero solo si se pulsa el botón.

Evento onclick JavaScript

Ejercicios de JavaScript

  1. Haz que el mismo mensaje del alert() que activa el botón se muestre en el documento html en lugar de con el propio alert().

La solución la encontrarás aquí: Haz click aquí.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.


    Comentarios

    Si te quedan dudas sobre el temario, sobre JavaScript, o cualquier otra cosa relacionada o simplemente quieres agradecer, aquí tienes tu sitio para dejar tu granito de arena. Gracias por tus comentarios y por darle vida a este sitio web.