[SOLUCIONADO] Eventos JavaScript

Mechamon · #1 (**permalink**) 27/01/2016, 17:56

Buenas tengo que hacer este ejercicio pero la verdad no me queda claro lo que debo hacer ya tengo el html con los 4 párrafos. si me pueden ayudar con ideas a ver como aplicar los efectos a esto.

acá lo que me piden

Definir las funciones necesarias para que un documento que presente al menos cuatro párrafos amplios, que nos ejecute al menos SEIS eventos Javascript funcionales diferentes, mostrando una descripción en la pantalla del evento correspondiente.

Alexis88 · #2 (**permalink**) 27/01/2016, 19:15

Esta información puede servirte.

Un saludo

Mechamon · #3 (**permalink**) 27/01/2016, 19:36

si eso lo leí y lo estuve revisando pero la verdad no veo como aplicarlos al texto o que hacer y que muestre una descripción en pantalla. no logro agarrarle el sentido al ejercicio

Alexis88 · #4 (**permalink**) 27/01/2016, 21:11

Guíate con los ejemplos que aparecen en la segunda mitad de la página. Inténtalo y, si fallas, vuelve por aquí con el código que hayas elaborado.

Mechamon · #5 (**permalink**) 28/01/2016, 17:44

ya tengo los párrafos y lo que se me ocurrió fue poner un tipo botón para los eventos, pero no se que más poner y me faltan 3 eventos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<script type="text/javascript" src="js/Pagina-7.js"></script>
</head>

<body>
<p>La aventura de la creación del FC Barcelona en 1899 por un grupo de jóvenes extranjeros que vivían en Barcelona fue la consecuencia de un proceso de expansión de la práctica del fútbol y otros deportes de origen británico en Europa. De ahí la naturaleza intercultural del Club, su vocación polideportiva y la voluntad de arraigo en una ciudad y en un país. La fundación del Club coincidió con los años del arranque de la práctica deportiva en Cataluña, en el contexto de un clima social y cultural propio, propenso a la adaptación de un modelo de ocio moderno. Joan Gamper, fundador del Club, fue el alma y el impulsor del proceso durante los primeros 25 años. Su compromiso con el FC Barcelona va más allá de sus facetas como jugador, directivo y presidente.
<input type="button" value="Dame Click" onclick="hacer_onclick()"/></p>

<p>Hans Gamper (Winterthur, Suiza, 1877 – Barcelona, 1930) llegó a Barcelona en 1898 por motivos profesionales. En sus ratos de ocio jugaba a fútbol con un grupo de compañeros en la Bonanova. En octubre de 1899, Gamper publica un anuncio en la revista Los Deportes en el que hace un llamamiento para formar un equipo de fútbol. El 29 de noviembre, Gamper y once hombres más (los suizos Otto Kunzle y Walter Wild, los ingleses John y William Parsons, el alemán Otto Maier, y los catalanes Lluís d’Ossó, Bartomeu Terradas, Enric Ducal, Pere Cabot, Carles Pujol y Josep Llobet) se reúnen para formar una asociación que llevará el nombre y el escudo de la ciudad: el Futbol Club Barcelona.
<input type="button" value="Click Aca" onmouseover="hacer_onmouseover()"/></p>

<p>El fundador del FC Barcelona deseó una entidad abierta a todos en que la catalanidad, la democracia, la poliesportivitat il'universalitat fueron las premisas esenciales. Deseó una entidad abierta a todo el mundo, sin tener en cuenta la procedencia de las personas. Se imaginó un club integrador en el que todo el mundo pudiera dar su opinión, y apostó por una sociedad democrática, regida libremente por sus asociados. Y, agradecido al país que le había acogido, Cataluña, no dudó en dar al FC Barcelona un sentido que lo marcaría universalmente: el compromiso con la catalanidad. Catalanidad, democracia, polideportividad y universalidad: a partir de las premisas de Gamper hoy todo tiene un sentido cuando hablamos del Barça.
<input type="button" value="Adios" onmouseout="hacer_onmouseout()"/></p>

<p>El primer sello que tiene el club es el mismo de la ciudad de Barcelona. El FC Barcelona utilizó el mismo escudo que Barcelona en una muestra de la voluntad que tenía de identificarse con la ciudad que la acogía y fundirse con ella. En 1910 la junta directiva, que quería que el Club dispusiera de un símbolo propio, convoca un concurso para cambiar el distintivo de la entidad.En esos primeros momentos media camiseta era azul y la otra media era grana, con las mangas del color contrario y los pantalones blancos. Una de las diversas teorías para explicar los orígenes de los colores azul y grana es que Gamper adoptó los mismos colores del Basilea, donde había jugado antes de venir a Cataluña. </p>
</body>
</html>

function hacer_onclick()
{
alert("Evento onclick / Me haz dado click");
}

function hacer_onmouseover()
{
alert("Evento onmouseover / Estas sobre el elemento");

}

function hacer_onmouseout()
{
alert("Evento onmouseout / Salir del elemento");

}

Alexis88 · #6 (**permalink**) 28/01/2016, 19:10

Me alegra ver que lo hayas intentado.

Puedes utilizar distintos eventos en el párrafo sin la necesidad de utilizar otros elementos dentro de él. Por ejemplo, los eventos del mouse, como mouseover, mouseout, mouseenter, mouseleave, mouseup, mousedown, mousemove, dblckick, click, contextmenu y las interfaces Wheel y Drag. Te sugiero leer la documentación de cada uno de ellos para que los comprendas mejor.

Para el siguiente ejemplo, utilizaré los eventos mouseover, mouseout, mouseup y mousedown, los cuales dispararán una función que mostrará el nombre del evento en un elemento aparte.

Código HTML:

Ver original<span id="evento"></span>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>
<p class="ForosDelWeb">Contenido</p>

Código Javascript:

Ver originaldocument.addEventListener("DOMContentLoaded", function(){
    var nomEvento = document.querySelector("#evento"),
        handler = function(event){
            if (event.target.className == "ForosDelWeb"){
                nomEvento.innerHTML = event.type + "<br />" + nomEvento.innerHTML;
            }
        };
    
    this.addEventListener("mouseover", handler, false);
    this.addEventListener("mouseout", handler, false);
    this.addEventListener("mouseup", handler, false);
    this.addEventListener("mousedown", handler, false);
}, false);

Cuando haya cargado la página, tomamos al elemento en el cual se mostrará el nombre del evento ocurrido y, además, declararemos una función que será la encargada de realizar dicha acción. Líneas abajo, registramos los cuatro eventos en el documento y asignamos a la función previamente declarada para que se ejecute cuando ocurra cualquiera de los cuatro eventos.

Por defecto, el primer argumento que recibe la función manejadora del evento es al objeto del evento (a menos de que se especifique otro argumento como primero). Utilizando su propiedad target, tomamos al elemento en el cual ocurrió directamente el evento y si el nombre de su clase es igual al que establecimos en los párrafos, querrá decir que el evento ocurrió en uno de ellos, por lo que procedemos a mostrar el nombre del evento junto con los que ya ocurrieron previamente.

DEMO

Un saludo

Mechamon · #7 (**permalink**) 28/01/2016, 21:57

tengo esta pagina que no se donde colocar correctamente el contador para párrafos visibles.

HTML
<script type="text/javascript" src="js/Pagina-6.js"></script>
<meta name="author" content="Francisco Zúñiga, Fecha: 29/01/2016, Módulo Programación en JavaScript">
</head>
<body>
<div id="wrapper">
<div id="logo"> </div>
<hr />

<div id="header">
<div id="menu">
<ul>
<li><a href="index.html">Index</a></li>
<li><a href="Pagina-2.html">Pagina-2</a></li>
<li><a href="Pagina-3.html">Pagina-3</a></li>
<li><a href="Pagina-4.html">Pagina-4</a></li>
<li><a href="Pagina-5.html">Pagina-5</a></li>
<li class="current_page_item"><a href="Pagina-6.html" class="first">Pagina-6</a></li>
<li><a href="Pagina-7.html">Pagina-7</a></li>
</ul>
</div>


</div>


<div id="page">
<div id="page-bgtop">
<div id="content">
<div class="post">
<h2 class="title"><a href="#">PAGINA 6: JAVASCRIPT-5</a> </h2>
<div class="entry">
<div id="controles"> Tamaño del texto
<select id="tamanyo" onchange="formato()">
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="28">28</option>
<option value="36">36</option>
<option value="72">72</option>
</select>
Interlineado del texto 
<select id="interlin" onchange="formato()">
<option value="1,0">1,0</option>
<option value="2,0">2,0</option>
<option value="3,0">3,0</option>
<option value="4,0">4,0</option>
<option value="5,0">5,0</option>
</select>
Tipo de texto 
<select id="tipo" onchange="formato()">
<option value="arial">arial</option>
<option value="verdana">verdana</option>
<option value="geneva">geneva</option>
<option value="georgia">georgia</option>
<option value="cambria">cambria</option>
<option value="batang">batang</option>

atang

</select>
color del texto 
<select id="color" onchange="formato()">
<option value="#000000">negro</option>
<option value="#CCCCCC">gris</option>
<option value="#6699FF">azul</option>
<option value="#FF00FF">fucsia</option>
<option value="#FFFF00">amarillo</option>
<option value="#008000">verde</option>
<option value="#FF0000">rojo</option>
</select>
</div>
<div id="controles2"> 
Negrita 
<input name="negrita" type="checkbox" value="negrita" id="negrita" onclick="formato()"/>
    
Cursiva 
<input type="checkbox" name="cursiva" value="checkbox" id="cursiva" onclick="formato()"/>
    Subrayado 
<input type="checkbox" name="subrayado" value="checkbox" id="subrayado" onclick="formato()"/>
</div>
<div id="texto">
<p>Científicos del Instituto de Ciencias Fotónicas (ICFO) de Barcelona, en colaboración con investigadores alemanes y estadounidenses, acaban de demostrar el grafeno es capaz de convertir un fotón absorbido en múltiples electrones que pueden conducir corriente eléctrica. Este prometedor descubrimiento convierte el grafeno en una importante alternativa para la tecnología de energía solar, actualmente basada ??en semiconductores convencionales como el silicio, según publica hoy la revista Nature Physics.<br />
“En la mayoría de los materiales, un fotón absorbido genera un solo electrón, pero en el caso del grafeno hemos visto que un fotón absorbido es capaz de producir muchos electrones excitados, y por lo tanto una señal eléctrica mayor” explica Frank Koppens, líder del grupo de la investigación en ICFO. Esta característica convierte al graneo en el ladrillo ideal para la construcción de cualquier dispositivo que quiera convertir la luz en electricidad. En particular, permite la producción de potenciales células solares y detectores de luz que absorban la energía del sol con pérdidas mucho menores. </p>
<p>Hace algún tiempo que la brillante idea de Edison, la bombilla con filamento metálico, ha empezado a formar parte de los museos de tecnología. Su problema es que solo en torno a un 2-3% de la energía eléctrica necesaria para que sus resistencias de wolframio o tungsteno se pongan incandescentes (los filamentos de estas lámparas alcanzan una temperatura de 2.700 grados centígrados) se transforma en luz visible; el resto se dispersa en forma de calor. De ahí que lámparas fluorescentes compactas y de tecnología led, mucho más eficientes, la hayan sustituido progresivamente.<br />
Pero no demos todavía a la vieja lámpara incandescente por muerta, porque investigadores del Instituto de Tecnología de Massachusetts (MIT) se han empeñado en recuperar su cálido resplandor en nuestros hogares por obra y gracia de la nanotecnología. Llamado cristal fotónico, el invento de estos expertos consiste en una estructura realizada con finísimas capas alternas de cristal, óxido de tantalio y dióxido de silicio que actúa a la vez como espejo y filtro. Por un lado, deja pasar la luz visible emitida por la resistencia de tungsteno, y por el otro, refleja la radiación infrarroja, que es reabsorbida y reutilizada para generar más luminosidad. </p>
<p>Para el experimento, no es necesario utilizar una lámpara de incandescencia que funcione, es decir, que puede estar fundida. Lo único imprescindible es que la bombilla no sea pequeña -la clásica de 60 W es suficiente- y que su cristal esté intacto de modo que el gas inerte que se aloja en su interior siga allí dentro.<br />
La prueba consiste en meterla en el microondas y ponerlo en marcha. Al cabo de unos segundos, la bombilla empieza a emitir luz dediferentes colores y acaba por explotar. La explicación: las luces de colores se deben a la ionización del gas del interior de la bombilla, una mezcla de argón, neón y nitrógeno, que se introduce para que el filamento no entre en contacto con el oxígeno del aire. Y es el calentamiento al que se somete la bombilla lo que hace que esta estalle.</p>
<p>Tras llevar a cabo una intervención quirúrgica que afecta al cerebro, los médicos deben comprobar que no surgen complicaciones. Para ello, controlan la evolución de algunos parámetros, como la temperatura y la presión intracraneal. No obstante, esto a menudo exige que se le implante al paciente –y luego se le retire– un sistema de monitorización, lo que aumenta el riesgo de que sufra infecciones y hemorragias.<br />
Ahora, según recoge un estudio publicado en la revista Nature, un equipo de investigadores de las universidades de Illinois, en Urbana-Champaign, y de la de Washington, en San Luis, ha ideado un pequeño biosensor que después de registrar y enviar esa información clave se disuelve de forma inocua en el organismo. </p>
</div>
</div>
</div>
</div>


<div style="clear: both;"> </div>
</div>
</div>

<div id="footer-bgcontent">
<div id="footer">
<p><a href="Pagina-2.html">JavaScript-1</a> | <a href="Pagina-3.html">JavaScript-2</a> | <a href="Pagina-4.html">JavaScript-3</a> | <a href="Pagina-5.html">JavaScript-4</a> | <a href="Pagina-6.html">JavaScript-5</a> | <a href="Pagina-7.html">JavaScript-6</a></p>
</div>
</div>

</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------
JS
// JavaScript Document

function Cantidad() // cantidad de parrafos visible
{
var parrafos =
document.
getElementsByTagName("p");
var cParrafos=0;

for(var x=0;x<parrafos.length;x++)
{
if(parrafos[x].
style.display == ""
|| parrafos[x].
style.display == "block")
{
cParrafos++;
}
}
document.getElementById
("nOcultos").value = cParrafos;
}

// muestra / oculta parrafos
function muestraOculta(id){
var elemento=document.
getElementById('contenidos_'+id);
var enlace=document.
getElementById('enlace_'+id);

if(elemento.style.display == ""
|| elemento.style.display == "block")
{
elemento.style.display = "none";
enlace.innerHTML =
'Mostrar contenidos';
}
else{
elemento.style.display = "block";
enlace.innerHTML =
'Ocultar contenidos';
}
Cantidad();
}
--------------------------------------------------------------------------------------------------------
y esto es lo que no se donde colocarlo ahora en la hoja en blanco fue sencillo porque lo puse en body

<body onload="Cantidad();">
<div>
<label for="nOcultos"> Párrafos Visibles</label>
<input type="text"
id="nOcultos" size="3"
readonly>
</div>

Alexis88 · #8 (**permalink**) 28/01/2016, 22:17

Ese ya es otro problema.

Publícalo en un nuevo hilo y, por favor, utiliza el highlight respectivo para mostrar código. Es el combo que se encuentra justo sobre el área de texto en el cual escribes la descripción del hilo y las respuestas.

Un consejo: solo muestra la parte en la que se presenta el problema, porque cuando tu publicación se llena de código irrelevante, muchos se desaniman y prefieren no responder.

Un saludo

Mechamon · #9 (**permalink**) 28/01/2016, 23:11

al final puse eventos en la pagina no me complique mucho y los puse solo para su funcion

http://proyecto.96.lt/Pagina-7.html

Mechamon · #10 (**permalink**) 29/01/2016, 11:12

Gracias Por la ayuda todo listo.