Embedded Files
Función y onclick
Una función en JavaScript es un bloque de código que defines para realizar una tarea específica. Cada vez que escribas el nombre de la función, se ejecutarán todos los comandos dentro de ella.
Estructura General
function NombreDeLaFuncion() {
...
lineas de comandos;
...
}
NombreDeLaFuncion();
function: es la palabra clave que usamos para definir una función.
Atributo Onclick
El onclick es un evento que ocurre cuando haces clic en algo en una página web, como un botón. Si usas onclick en JavaScript, puedes decirle al botón qué función ejecutar cuando alguien haga clic en él. Por ejemplo, cuando haces clic en un botón, podrías hacer que aparezca un mensaje en la pantalla.
<etiqueta onclick="funcion()" atributos="valor">Contenido</etiqueta>
<button onclick="nombrefuncion()">botón</button>
<script>
function nombrefuncion() {
alert("¡Hola, hiciste clic en el botón!");
}
</script>
Explicación:
<button onclick="nombrefuncion()">botón</button>
Este código crea un botón en una página web.
onclick="nombrefuncion()": Significa que cuando alguien haga clic en el botón, va a ejecutar la función llamada nombrefuncion().
El texto "botón" es lo que aparece dentro del botón.
Dentro de las etiquetas <script>...</script>, código JavaScript.
<script>
function nombrefuncion() {
alert("¡Hola, hiciste clic en el botón!");
}
</script>
function nombrefuncion(): Define una función llamada nombrefuncion. Esta es como una receta que puedes usar cuando quieras.
alert("¡Hola, hiciste clic en el botón!"); Es lo que hace la función. Muestra un mensaje emergente en la pantalla cuando se llama a la función.
Ejemplos:
<html>
<head>
<title>Ejemplo onclick</title>
</head>
<body>
<button onclick="mostrarMensaje1()" >boton1</button>
<b onclick="mostrarMensaje2()" >JAG</b>
<script>
function mostrarMensaje1() {
alert("Hola, hiciste clic en el botón!");
alert("Botón!");
}
function mostrarMensaje2() {
alert("Hola, hiciste clic en JAG!");
alert("José Antonio Galán");
}
</script>
</body>
</html>
Actividad 3.4A
Crea una nueva página HTML como el ejemplo anterior con el nombre "Act34A".
Dentro de la etiqueta <body>, agrega los siguientes elementos:
<h1 onclick="funcion1()" >Act34A</h1>
<h2 onclick="funcion2()">Título secundario</h2>
<h3 onclick="funcion3()">Título terciario</h3>
<button onclick="funcion4()" >boton1</button>
Dentro de la etiqueta <script>, crea las siguientes funciones:
funcion1(): Esta función debe mostrar una alerta con el mensaje "Título Principal".
function funcion1() {
alert("Titulo Principal");
}
funcion2(): Esta función debe mostrar una alerta con el mensaje "Título Secundario".
function funcion2() {
alert("Titulo secundario");
}
Crea dos funciones más, funcion3() y funcion4(), para que cada una muestre una alerta con los mensajes "Título Terciario" y "Botón", respectivamente.
Actividad 3.5B
Crea una nueva página HTML que siga la estructura del ejemplo anterior. El archivo debe llamarse "Act34B".
Dentro de la página, agrega un título principal, un subtítulo, y un botón. Haz que estos elementos sean interactivos cuando el usuario haga clic en ellos, de modo que aparezcan mensajes en la pantalla.
Deberás agregar un total de tres funciones en un bloque <script>. Dos de estas funciones mostrarán alertas cuando se haga clic en los títulos, y las otras dos cuando se interactúe con otros elementos de la página, como el botón.
Pista: Los eventos onclick te permitirán capturar la interacción del usuario con los elementos de la página. Asegúrate de que cada función esté asociada a un mensaje diferente, como "Título Principal" o "Botón Presionado".
Reflexiona: ¿Qué sucede cuando el usuario interactúa con los títulos y el botón? ¿Qué parte del código provoca que aparezcan los mensajes? Piensa en cómo los eventos están conectados a las funciones que creas.
Page updated
Report abuse