Lenguaje JavaScript parte 2

JAVASCRIPT
TECNOLOGÍAS DE DESARROLLO WEB DEL
LADO DEL CLIENTE PARA SISTEMAS DE
INFORMACIÓN ORIENTADOS A INTERNET.

OBJETOS ELEMENT: PROPIEDADES
Además de los estilos de un elemento,
también puede modificar su contenido.
Algunas de las propiedades y métodos
provistos por los objetos Element para este
propósito son:
 innerHTML.
 outerHTML.
 insertAdjacentHTML(ubicación,
contenido

propósito son:
 innerHTML: Esta propiedad declara o
devuelve el contenido de un elemento.
 outerHTML.
contenido

propósito son:
 innerHTML.
 outerHTML: Esta propiedad declara o
devuelve un elemento y su contenido. A
diferencia de la propiedad innerHTML,
esta propiedad no solo reemplaza el
contenido, sino también el elemento.

propósito son:
 innerHTML.
 outerHTML.
contenido): Inserta contenido en una
ubicación determinada por el atributo
ubicación.

propósito son:
contenido): Los valores disponibles son:
 beforebegin.
 afterbegin.
 beforeend.
 afterend.

propósito son:
 beforebegin: Antes del elemento.
 afterbegin.
 beforeend.
 afterend.

propósito son:
 beforebegin.
 afterbegin: Dentro del elemento, antes
del primer elemento hijo.
 beforeend.

propósito son:
 beforebegin.
 afterbegin.
 beforeend: Dentro del elemento,
después del último elemento hijo.

propósito son:
 beforebegin.
 afterbegin.
 beforeend.
 afterend: Después del elemento.

La manera más sencilla de reemplazar el
contenido de un elemento es con la propiedad
innerHTML. Asignando un nuevo valor a esta
propiedad, el contenido actual se reemplaza
con el nuevo.
El siguiente ejemplo reemplaza el contenido
del elemento <p> con el nuevo texto “¡El
mejor sitio web!" cuando pulsa clic en párrafo.
La propiedad innerHTML también sirve para
leer y procesar el contenido actual.

<!DOCTYPE html><html lang="es"><head>
<meta charset="utf-8"><title>JavaScript</title>
<script>
function cambiarcontenido() {
var elemento =
document.getElementById("subtitulo");
elemento.innerHTML =
"Este es mi sitio web";}
</script>
</head>

<body>
<section>
<h1>Sitio Web</h1>
<p id="subtitulo"
onclick="cambiarcontenido()">
¡El mejor sitio web!</p>
</section>
</body>
</html>

Además de texto, la propiedad innerHTML
también puede procesar código HTML.
Cuando el código HTML se asigna a esta
propiedad, se interpreta y el resultado se
muestra en pantalla.

<body>
<section>
<h1>Sitio Web</h1>
<button type="button"
onclick="agregarelemento()">
¡Agrega contenido!
</button>
</section>
</body>
</html>

<body>
<section>
<h1>Sitio Web</h1>
¡Agrega contenido!
</button>
</section>
</body>
</html>
Se obtiene una referencia al primer elemento
<section> en el documento y reemplaza su
contenido con un elemento <p>. A partir de
ahí, el usuario solo verá el elemento <p> en
la pantalla.

Si no desea reemplazar todo el contenido de
un elemento, sino agregar más contenido,
puede usar el método insertAdjacentHTML().
Este método puede agregar contenido antes o
después del contenido actual y también fuera
del elemento, dependiendo del valor asignado
al primer atributo.

<body>
<section>
<h1>Sitio Web</h1>
onclick="agregarelemento()">Agrega
contenido</button>
</section>
</body>
</html>

CREAR OBJETOS ELEMENT
Cuando se agrega código HTML al documento
a través de propiedades y métodos como
innerHTML o insertAdjacentHTML(), el
navegador analiza el documento y genera
los objetos Element necesarios para
representar los nuevos elementos.
Aunque es normal utilizar este procedimiento
para modificar la estructura de un documento,
el objeto Document incluye métodos para
trabajar directamente con los objetos
Element.

 createElement(nombre): Crea un nuevo
objeto Element del tipo especificado por el
atributo nombre.
 appendChild(elemento): Inserta el elemento
representado por un objeto Element como
hijo de un elemento existente en el
documento.
 removeChild(elemento): Elimina un
elemento hijo. El atributo debe ser una
referencia del hijo a eliminarse.

Para crear un nuevo objeto Element para
agregar un elemento al documento, primero
debe crear el objeto con el método
createElement() y luego usar este objeto para
agregar el elemento al documento con el
método appendChild().

<body>
<section>
<h1>Sitio Web</h1>
onclick="agregarelemento()">Agrega
elemento</button>
</section>
</body>
</html>

Los objetos Element que devuelve el método
createElement() son los mismos que los
creados por el navegador para representar el
documento y, por lo tanto, puede modificar
sus propiedades para asignar nuevos estilos o
definir sus contenidos.
El siguiente código asigna contenido a un
objeto Element antes de agregar el elemento
al documento.

<body>
<section>
<h1>Sitio Web</h1>
Agrega elemento</button>
</section>
</body>
</html>

EVENTOS.
HTML provee atributos para ejecutar
JavaScript cuando ocurre un evento. Ya ha
implementado onload para ejecutar una
función cuando el navegador termina de
cargar el documento junto a onclick que
ejecuta código JavaScript cuando el usuario
hace clic en un elemento. Todos los atributos
se pueden configurar desde JavaScript. Esto
se debe a que los atributos de los elementos
se convierten en propiedades de los objetos
Element y, por lo tanto, puede definir sus
valores desde JavaScript

EVENTOS.
<script>
function agregarevento() {
var elemento =
document.querySelector
("section > button");
elemento.onclick = mostrarmensaje;}
function mostrarmensaje() {
alert("Presionó el botón");}
window.onload = agregarevento;
</script></head>

EVENTOS.
<script>
var elemento =
</script></head>
En este caso, se definen dos
atributos: el atributo onload del
objeto Window y el atributo
onclick del elemento <button>.
En este caso, se definen dos
atributos: el atributo onload del
objeto Window y el atributo
onclick del elemento <button>.

EVENTOS.
<script>
var elemento =
</script></head>
Cuando se carga el
documento, el evento load se
desencadena y se ejectua la
función agregarevento().

EVENTOS.
<script>
var elemento =
</script></head>
agregarevento() obtiene una referencia a
<button> y define su atributo onclick para
ejecutar mostrarmensaje() al pulsar el botón.

EVENTOS.
<body>
<section>
<h1>Sitio Web</h1>
<button type="button">Mostrar
</button>
</section>
</body>
</html>

EVENTOS.
No hay diferencia entre declarar el
atributo onload en el elemento
<body> o en el objeto Window,
pero debido a que siempre debe
separar el código JavaScript del
documento HTML y desde el
código es más fácil definir el
atributo en el objeto Window, esta
es la práctica recomendada.

EVENTOS.
No se recomienda el uso de atributos de
evento en elementos HTML porque es
contrario al propósito principal de
HTML5 que es proveer una tarea
específica para cada uno de los
lenguajes involucrados. HTML debe
definir la estructura del documento, CSS
su presentación y JavaScript su
funcionalidad.

EVENTOS.
Definir estos atributos desde código
JavaScript, tampoco se recomienda. Por
estas razones, se han incluido nuevos
métodos en el objeto Window para
controlar y responder a eventos.

EVENTOS.
 addEventListener(evento, listener, captura):
Prepara un elemento para responder a un
evento.
 El primer atributo es el nombre del evento
(sin el prefijo on).
 El segundo es una referencia a la función
que responderá al evento (llamada listener).
 El tercer atributo es un booleano que
determina si el evento va a ser capturado
por el elemento o se propagará a otros
elementos (generalmente se ignora o se
declara como false).

EVENTOS.
 removeEventListener(evento, listener): Este
método elimina el listener de un elemento.

EVENTOS.
Los nombres de los eventos que requieren
estos métodos no son los mismos que los
nombres de los atributos utilizado hasta el
momento.
Los nombres de los atributos se han definido
agregando el prefijo on al nombre real del
evento. Por ejemplo, el atributo onclick
representa el evento click. El evento load
(onload), el evento mouseover (onmouseover)
y así sucesivamente.

EVENTOS.
En el método addEventListener() para hacer
que un elemento responda a un evento, tiene
que especificar el nombre real del evento
entre comillas.

EVENTOS.
<script>
var elemento =
elemento.addEventListener
("click", mostrarmensaje);}

EVENTOS.
window.addEventListener
("load", agregarevento);
</script>
</head>
<body>
<section>
<h1>Sitio Web</h1>
<button type="button">Mostrar</button>
</section>
</body></html>

EVENTOS.
("load", agregarevento);
</script>
</head>
<body>
<section>
<h1>Sitio Web</h1>
<button type="button">Mostrar</button>
</section>
</body></html>
Ahora se utiliza el método
addEventListener() para
agregar listeners al objeto
Window y el elemento
<button>

OBJETOS EVENT.
Cada función que responde a un evento
recibe un objeto que contiene información
acerca del evento. Aunque algunos eventos
tienen sus propios objetos, existe un objeto
llamado Event que es común a cada evento.
Las siguientes son algunas de sus
propiedades y métodos:
 target.
 type.
 preventDefault().
 stopPropagation().

OBJETOS EVENT.
Propiedades y métodos:
 target: Esta propiedad devuelve una
referencia al objeto que ha recibido el
evento (generalmente es un objeto
Element).
 type: Esta propiedad devuelve una cadena
de caracteres con el nombre del evento.
 preventDefault(): Este método cancela el
evento para prevenir que el sistema realice
 tareas por defecto.
 stopPropagation():

OBJETOS EVENT.
Propiedades y métodos:
 stopPropagation(): Este método detiene la
propagación del evento a otros elementos,
de modo que solo el primer elemento que
recibe el evento puede procesarlo
(normalmente se aplica a elementos que se
superponen y pueden responder al mismo
evento).

OBJETOS EVENT.
El objeto Event se envía a la función como un
argumento y, por tanto, debe declarar un
parámetro que recibirá este valor. El nombre
del parámetro es irrelevante, pero se define
normalmente como e o evento.

OBJETOS EVENT.
<script>
function agregareventos() {
var lista = document.
querySelectorAll("section > p");
for (var f = 0; f < lista.length; f++) {
var elemento = lista[f];
("click", cambiarcolor);}
}

OBJETOS EVENT.
function cambiarcolor(evento) {
var elemento = evento.target;
elemento.style.backgroundColor =
"#999999";}
("load", agregareventos);
</script>
</head>

OBJETOS EVENT.
<body>
<section>
<h1>Sitio Web</h1>
<p>Mensaje número 1</p>
</section>
</body>
</html>

OBJETOS EVENT.
Se agrega un listener para el evento click a
cada elemento <p> dentro del elemento
<section> del documento, pero todos se
procesan con la misma función.
Para identificar en qué elemento ha hecho
clic el usuario desde la función, se lee la
propiedad target del objeto Event.

OBJETOS EVENT.
Esta propiedad devuelve una referencia al
objeto Element que representa el
elemento que ha recibido el clic. Usando
esta referencia, se modifica el fondo del
elemento. En consecuencia, cada vez que
el usuario hace clic en el área ocupada
por un elemento <p>, el fondo de ese
elemento se vuelve gris.

OBJETOS EVENT.
El objeto Event se pasa de forma automática
cuando se llama a la función. Si desea enviar
valores propios junto con este objeto, puede
procesar el evento con una función anónima.
La función anónima solo recibe el objeto
Event, pero desde el interior de esta función
puede llamar a la función que se encarga de
responder al evento con todos los atributos
necesarios.

OBJETOS EVENT.
<script>
function agregareventos()
{ var lista = document.querySelectorAll
("section > p");
for (var f = 0; f < lista.length; f++)
{ var elemento = lista[f];
("click", function(evento) {
var mivalor = 125;
cambiarcolor(evento, mivalor);});
}
}

OBJETOS EVENT.
<script>
("section > p");
var mivalor = 125;
}
}
En vez de llamar a la
función cambiarcolor()
directamente, primero
se ejecuta una función
anónima.

OBJETOS EVENT.
<script>
("section > p");
var mivalor = 125;
}
}
La función anónima, recibe el objeto Event,
declara una nueva variable llamada mivalor
con el valor 125, y luego llama a la función
cambiarcolor() con ambos valores. Usando
estos valores, la función cambiarcolor()
modifica el contenido del elemento.

OBJETOS EVENT.
function cambiarcolor(evento, mivalor)
{ var elemento = evento.target;
"Valor " + mivalor;}
("load", agregareventos);
</script>

Lenguaje JavaScript parte 2

Recomendados

Recomendados

Más contenido relacionado

Similar a Lenguaje JavaScript parte 2

Similar a Lenguaje JavaScript parte 2 (20)

Más de Facultad de Ciencias y Sistemas

Más de Facultad de Ciencias y Sistemas (20)

Último

Último (20)

Lenguaje JavaScript parte 2