JavaScript:

JavaScript nos permite animar la página web de forma más profesional.

Eventos y funciones:
Ventana de alerta:
Estilo inline:
Para añadir un evento en un script tipo línea o estilo inline, solo es necesario
añadir el evento y no la función.
<p onClick= “alert('Hola, has hecho click en la palabra');”></p>
Dónde:
OnClick es el evento y significa que la acción se realizará cuando pulsemos
click en el elemento correspondiente.
alert es la acción a realizar, en este caso es una ventana de alerta.
('') es el mensaje dentro de la ventana de alerta.
Nota: Como la etiqueta <p> es una etiqueta block, si hacemos click dentro de
ese block, el mensaje de alerta saldrá sin la necesidad de pulsar solo en las
palabras.
Encabezado:
Nota: Como jerarquía en el encabezado, primero poner las etiquetas del JS
(script) y después del CSS (style).
Para añadir un evento en el encabezado, es necesario añadir la función dentro
de la etiqueta script dentro de la etiqueta head y antes de la etiqueta style.
<script>
Function alerta(){
alert(“Hola, has hecho click en la palabra”);}
</script>
Después, añadir el evento dentro de una etiqueta en el código html y el
nombre de la función dentro del evento.
<p onClick=”alerta()”;> </p>
Archivo externo:
Crear un archivo tipo JavaScript, guardarlo y añadirlo en un script.
<script src=”nombredelarchivo.js”></script>
Añadir en el archivo externo:
function saludo(){
alert(“Hola, has hecho click en la palabra”);}
Después, añadir el evento dentro de una etiqueta en el código html y el
nombre de la función dentro del evento.
<p onClick=”saludo()”;> </p>
Tipos de eventos:
Eventos de ratón (más usados).
Eventos de teclado.
Eventos de ventana.
Eventos de tiempo.
Eventos de ratón:
onClick: Permite crear una interacción pulsando click.
onmouseover: Permite crear una interacción moviendo el mouse sobre el
elemento.

Objetos y métodos:
En el caso de que añadamos una función en el JS pero no lo pongamos en una
etiqueta y queramos probarlo tal como está, añadir:
Window.onload=nombredelafunciónquequieresquerealice;
Pero esto pasa de forma lineal (con una sola función y como consecuencia con
una sola etiqueta(por ejemplo con la etiqueta <p>)), pero si tenemos más de
100 párrafos, hacer lo siguiente:
Objeto document y método getElementsByTagName:
Añadir otra función.
function ejecuta(){
document.getElementsByTagName(“p”)[0].onclick=saludo;}
Dónde:
document es un objeto.
getElementsByTagName es un método.
(“p”) es o son las etiquetas afectadas.
[0] es el número de la posición de la etiqueta p afectada.
Onclick es el evento.
saludo es la función de JS.
Propiedad onload:
onload: Permite cargar un objeto.
En el caso de declarar a todas las etiquetas del tipo específico:
Objeto document, método getElementsByTagName y bucle:

Por otra parte, para identificar selectores de id en JS, se hace lo siguiente:

Objeto document y método getElementById:
Para modificar un atributo id.

Pero qué pasa cuando tenemos una clase puesta en una etiqueta y queremos
ponerle algo en JS (una función de JS).
Objeto document y método getElementsByClass:
En una clase en JS, siempre debemos indicar un objeto con una variable.

Si quieres que afectar a todos los class de la etiqueta correspondiente,

entonces añadir un bucle for.
Identificación de elementos 2:
Nuevos métodos:
Objeto document y método querySelector():
Permite modificar solo el primer elemento que corresponde al tipo de selector
indicado entre paréntesis.
Recordar esto: #nombre=id, .nombre =class, nombre=elemento o etiqueta.
Si queremos seleccionar una etiqueta de varias de mismo elemento dentro de
una etiqueta específica, tenemos que añadir un selector descendiente y una
pseudoclase.

Nota: Es importante dominar los selectores tanto en html y en Css como en JS.
querySelectorAll():
Permite modificar los elementos que corresponden al tipo de selector indicado
entre paréntesis.
Si queremos afectar a todas las etiquetas dentro de una etiqueta.

Si queremos afectar a todas las etiquetas dentro de una etiqueta pero no

sabemos cuántos hay, entonces usar la propiedad length y:
Nota: Esto nos ayuda demasiado al querer añadir más párrafos dentro de una
etiqueta preestablecida porque se modificará automáticamente.
Para modificar a otros elementos aparte, añadir una coma y escribir las
etiquetas.

EVENTOS:
Evento es la acción después de la acción física.
Tipos de eventos:
Evento provocado por el usuario.
Ejemplo: (Onclick).
Evento provocado por el sistema.
Ejemplo: (Windows.onload).
Manejador de evento:
Código que procesa el evento.
Recordar que hay 3 formas de construir manejadores de eventos:
1.- Eventos en línea o inline. (Obsoleto, poco recomendable, es en cada línea y
esto genera mucho código).
2.- Eventos como encabezado o con hoja externa de JS.
3.- Método addEventListener(). Es Nuevo en HTML5 y es la más
recomendada (porque utiliza menos código y permite establecer varios
eventos en un mismo objeto)).
Objeto document y método addEvenListener():
Crear una imagen, añadir una ventana de alerta en la imagen
Formas de añadir una ventana de alerta con objeto, método y evento.
Número 1:
Construir en línea.
<img src=”imagen.jpg” onClick=”alert('Hola, has hecho click en la
imagen');”>
Numero 2:
Construir una función en script del encabezado o en una hoja externa JS.
<script>
Function jaja(){
alert(“Chihuahua rabioso”);
}
function ejecuta(){
document.getElementsByTagName(“img”)[0].onclick=jaja;
}
Window.onload=ejecuta;
</script>
</head>
<body>
<p><img src="230916abda79d3b.jpg"></p>
</body>
Numero 3:
Añadir addEventListener.
addEventListener tiene: Nombre del evento (algo que ocasione un evento),
función a ejecutar, valor booleano.
Ejemplo:
<script>
Function jaja(){
alert(“Chihuahua rabioso”);
}
function ejecuta(){
var z= document.getElementsByTagName(“img”)[0];
z.addEventListener(“click”,jaja,false);
}
Window.onload=ejecuta;
</script>
</head>
<body>
<p><img src="230916abda79d3b.jpg"></p>
</body>
Ventajas de la número 3 (AEL):
Puede hacer muchas cosas con un solo objeto.
Nota: Para usar la misma variable, declararla al inicio del script como vaiable.
Ejemplo: var dinero (Esto permite poder usarla donde sea como una variable).
Ejemplo de método addEventListener aplicado a una imagen:
Propiedades:
width: Permite modificar la anchura del objeto.
heigth: Permite modificar la altura del objeto.
En este ejemplo, vamos a declarar otra función que permita crecer la imagen
cuando pasamos el ratón sobre ella, además de declarar una variable para que
pueda aceptar cada función.
Ejemplo:
<head>
<script>
var imagen;
function ejecuta(){
imagen= document.getElementsByTagName(“img”)[0];
imagen.addEventListener(“mouseover”,crecer,false);
}
Function crecer(){
imagen.width=225;
imagen.height=225;
}
Window.onload=ejecuta;
</script>
</head>
<body>
<p><img src="230916abda79d3b.jpg"></p>
</body>
Pero hay un problema, cuando la imagen se agranda, nunca vuelve a su
estado original, entonces, hacemos lo siguiente.
<head>
<script>
var imagen;
function ejecuta(){
imagen= document.getElementsByTagName(“img”)[0];
imagen.addEventListener(“mouseover”,crecer,false);
imagen.addEventListener(“mouseout”,regresartamañooriginal,false)
}
Function crecer(){
imagen.width=225;
imagen.height=225;
}
Function regresartamañooriginal(){
imagen.width=200;
imagen.height=200;
}
Window.onload=ejecuta;
</script>
</head>
<body>
<p><img src="230916abda79d3b.jpg"></p>
</body>
Listo, si queremos añadir otra función, simplemente colocar otro método
addEventListener. En este caso son tres, agrandar, enchicar y click con
mensaje.
<script>
var imagen;
function ejecuta(){
imagen= document.getElementsByTagName(“img”)[0];
imagen.addEventListener(“mouseover”,crecer,false);
imagen.addEventListener(“mouseout”,regresartamañooriginal,false);
imagen.addEventListener(“click”,mensaje,false);
}
Function crecer(){
imagen.width=225;
imagen.height=225;
}
Function regresartamañooriginal(){
imagen.width=200;
imagen.height=200;
}
Function mensaje(){
alert(“Chihuahua rabioso”);
}
Window.onload=ejecuta;
</script>
</head>
<body>
<p><img src="230916abda79d3b.jpg"></p>
</body>
Eventos parte 2:
En el mismo ejercicio, hacer lo siguiente para afectar a muchas imagenes.
Añadir imágenes dentro de la misma etiqueta <p> en HTML, añadimos
tamaños pequeños cada una y separamos entre ellas con &nbsp;&nbsp;
También utilizaremos una función anónima dentro del método
addEventListener.
Hacemos lo siguiente.
<script>
var imagen=new Array(2);
function ejecuta(){
for(var i=0;i<3;i++){
imagen[i]=document.getElementsByTagName("img")[i];
}
imagen[0].addEventListener("mouseover",function()
{imagen[0].width=400;imagen[0].height=400;},false);
imagen[0].addEventListener("mouseout",function()
{imagen[0].width=300;imagen[0].height=300;},false);
imagen[0].addEventListener("click",jaja,false);

imagen[1].addEventListener("mouseover",function()
{imagen[1].width=400;imagen[1].height=400;},false);
imagen[1].addEventListener("mouseout",function()
{imagen[1].width=300;imagen[1].height=300;},false);
imagen[1].addEventListener("click",jaja,false);

imagen[2].addEventListener("mouseover",function()
{imagen[2].width=400;imagen[2].height=400;},false);
 imagen[2].addEventListener("mouseout",function()
{imagen[2].width=300;imagen[2].height=300;},false);
imagen[2].addEventListener("click",jaja,false);
}
/*function crecer(){
imagen.height=2000;
imagen.width=2000;
}*/
/*function regresartamañooriginal(){
imagen.height=300;
imagen.width=300;
}*/
function jaja(){
alert("Chihuahua rabioso");
}
/*window.onload=ejecuta;*/
window.addEventListener("load",ejecuta,false);
</script>
Elementos o etiquetas anidadas:
El tercer valor del método addEventListener (booleano) indica cual acción es
primero de dos elementos o etiquetas que estén en la misma posición.
Por defecto es false, si cambiamos a true entonces el proceso se invierte.