Lenguaje JavaScript parte 1

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

INTRODUCCIÓN
HTML5 puede ser imaginado como un edificio
soportado por tres grandes columnas: HTML,
CSS y Javascript.
Javascript es un lenguaje interpretado usado
para múltiples propósitos.
El código Javascript logra velocidades de
ejecución similares a aplicaciones
encontradas en ambientes de escritorios.

INTRODUCCIÓN
HTML solo provee la funcionalidad necesaria
para enviar la información introducida por el
usuario al servidor o para limpiar el formulario.
Algo similar pasa con CSS; construye
instrucciones (reglas) con seudoclases para
aplicar un grupo diferente de propiedades
cuando el usuario mueve el ratón sobre un
elemento, pero realizar tareas personalizadas,
como modificar los estilos de varios
elementos al mismo tiempo, involucra cargar
una nueva hoja de estilo que ya presente
estos cambios.

INTRODUCCIÓN
Existen tres técnicas para incorporar código
Javascript dentro de HTML. Sin embargo, al
igual que en CSS, solo la inclusión de
archivos externos es la recomendada a usar
en HTML5:
• En línea.
• Embebido.
• Archivos externos.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Aprovecha atributos disponibles en elementos
HTML. Manejadores de eventos que ejecutan
código de acuerdo con la acción del usuario. Los
más usados se relacionan con el ratón: onclick,
onMouseOver, onMouseOut. O eventos de
teclado y de ventana, ejecutando acciones luego
que una tecla es presionada o alguna condición
en la ventana del navegador cambia.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
<body>
<div id=”el_div”>
<p onclick=”alert(‘¡Pulsó clic
izquierdo!’)”>Pulse clic</p>
<p>No puede hacer clic</p>
</div>
</body>

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
El código se ejecuta cada vez
que se pulsa clic izquierdo con
el ratón sobre el texto que dice
“Pulse clic”. Lo que el
manejador onclick dice es algo
como: “cuando alguien haga
clic sobre este elemento
ejecute este código” y el
código en este caso es una
función predefinida en
Javascript que muestra una
pequeña ventana con el
mensaje “¡Pulsó clic izquierdo!”

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Intente cambiar el manejador
onclick por onMouseOver,
por ejemplo, y verá cómo el
código es ejecutado.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Esta clase de práctica no
es recomendable. El
código HTML se extiende
innecesariamente y se
hace difícil de mantener y
actualizar. Así mismo, el
código distribuido sobre
todo el documento
complica la construcción
de aplicaciones útiles.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Agrupa los códigos en un
mismo lugar entre etiquetas
<script>. <script> actúa
igual al elemento <style>
usado en CSS. Ayuda a
organizar el código en un
solo lugar, afectando los
elementos HTML por medio
de referencias.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Del mismo modo que con
el elemento <style>, en
HTML5 no debe usarse
ningún atributo para
especificar lenguaje. Ya no
es necesario incluir el
atributo type en la etiqueta
<script>. HTML5 asigna
Javascript por defecto.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
<head><title>Este texto es el título del documento</title>
<script>function mostraralerta(){
alert(‘Hizo clic!');}
function hacerclic(){
document.getElementsByTagNam
e('p')[0].onclick=mostraralerta;}
window.onload=hacerclic;
</script>
</head>

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
El <script> puede ubicarse en
cualquier lugar del HTML, dentro
de otros elementos o entre ellos.
Para más claridad, se
recomienda colocar los
Javascript en la cabecera del
documento y luego referenciar
los elementos a ser afectados
usando los métodos apropiados.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Métodos para referenciar
elementos HTML desde
Javascript:
 getElementsByTagName:
Referencia por nombre o
palabra clave.
 getElementById:
Referencia por el valor de
su atributo id.
 getElementsByClassNam
Nueva incorporación que
referencia un elemento por el
valor de su atributo class.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Una situación debe ser
considerada: el código del
documento es leído de
forma secuencial por el
navegador y no puede
referenciarse un elemento
que aún no ha sido
creado.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Las funciones Javascript
son cargadas (declaradas)
pero no ejecutadas. Luego
los elementos HTML,
incluidos los elementos
<p>, son creados. Y
finalmente, cuando el
HTML completo es
cargado en la ventana del
navegador, el evento load
es disparado y la función
hacerclic() es llamada.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
getElementsByTagName
referencia todos los
elementos <p>. Este
retorna un (array) con
una lista de elementos
de la clase especificada
encontrados en el HTML.
Sin embargo, usando el
índice [0] al final del
método se está pidiendo
retornar solo el primer
elemento de la lista.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Una vez que este
elemento es identificado,
el código registra el
manejador de eventos
onclick para el mismo. La
función mostraralerta()
será ejecutada cuando el
evento click es disparado
sobre este elemento
mostrando el mensaje
“¡Pulsó clic izquierdo!”

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Códigos embebidos incrementan el tamaño
de los documentos y cada documento debe
volver a incluir los mismos códigos. Para
reducir los tiempos de descarga, incrementar
la productividad y poder distribuir y reusar
códigos en cada HTML sin comprometer
eficiencia, grabe los javascript en uno o más
archivos externos y llámelos con el atributo
src.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
<script> carga los Javascript
desde un archivo externo
llamado micodigo.js. Para el
usuario, esta práctica reduce
tiempos de descarga y acceso a
nuestro sitio web, mientras que
para el desarrollador simplifica la
organización y facilita el
mantenimiento.

INTRODUCCIÓN
en HTML5:
• En línea.
• Embebido.
Copie el anterior código ubicado
dentro del archivo HTML
previamente creado. Cree un
nuevo archivo de texto vacío
llamado micodigo.js y copie en su
interior el código Javascript

MÉTODOS
 getElementById.
 getElementsByTagName.
 getElementsByClassName.
 getElementsByName.
No son suficientes para integrar JavaScript.
Ahora puede seleccionar elementos HTML
aplicando toda clase de selectores CSS por
medio de los nuevos métodos:
 querySelector().
 querySelectorAll().

MÉTODOS
 getElementById.
Devuelve una
referencia al
objeto Element
que representa
el elemento
identificado
con el valor
especificado
por el atributo
(el valor
asignado al
atributo id.)

MÉTODOS
 getElementById.
Devuelve un array con referencias a
los objetos Element que representan
el tipo de elementos especificados
por el atributo. El atributo es el
nombre que identifica a cada tipo de
elemento, como h1, p, img, div, etc.

MÉTODOS
 getElementById.
los elementos identificados con la
clase especificada por el atributo (el
valor asignado al atributo clase).

MÉTODOS
 getElementById.
los elementos identificados con el
nombre especificado por el atributo
(el valor asignado al atributo name.)

MÉTODOS
Nuevos métodos:

MÉTODOS
Nuevos métodos:
Este método devuelve una referencia al
objeto Element que representa el elemento
que coincide con el selector especificado
por el atributo. Retorna el primer elemento
que concuerda con el grupo de selectores
especificados entre paréntesis. Los
selectores son declarados usando comillas
y la misma sintaxis CSS.

MÉTODOS
Nuevos métodos:
function hacerclic(){
document.querySelector
(“#principal p:firstchild”).
onclick=mostraralerta;}
function mostraralerta(){
alert('hizo clic!');}

MÉTODOS
Nuevos métodos:
getElementsByTagName ha sido
reemplazado por querySelector().
Los selectores para esta consulta en
particular están referenciando al
primer elemento <p> que es hijo del
elemento identificado con el atributo
id y el valor main.

MÉTODOS
Nuevos métodos:
El querySelector() retorna el primer
elemento <p> dentro de <div> que es,
por supuesto, su primer hijo. El
propósito de este ejemplo es mostrar
que querySelector() acepta toda clase
de selectores válidos CSS y ahora, del
mismo modo que en CSS.

MÉTODOS
Nuevos métodos:
Este método devuelve un array con
referencias a los objetos Element que
representan los elementos que coinciden
con los selectores especificados por el
atributo. Se pueden declarar uno o más
selectores separados por comas.

MÉTODOS
Nuevos métodos:
Devuelve todos los elementos que
concuerdan con el grupo de selectores
declarados entre paréntesis. El valor
devuelto es un array con cada elemento
encontrado en el orden en el que
aparecen en el HTML.

MÉTODOS
Nuevos métodos:
function hacerclic()
{var lista =
document.
querySelectorAll
(“#principal p”);
lista[0].onclick =
mostraralerta;}
function
mostraralerta()
{alert('hizo clic!');}
window.onload =
hacerclic;

MÉTODOS
Nuevos métodos:
El grupo de
selectores
especificados
en el método
querySelectorAll
() encontrará
cada elemento
<p> en el HTML
que es hijo del
elemento <div>.

MÉTODOS
Nuevos métodos:
Después de la
ejecución, el array lista
tendrá dos valores:
una referencia al
primer elemento <p> y
una referencia al
segundo elemento
<p>.

MÉTODOS
Nuevos métodos:
Ya que el índice
de cada array
inicia en 0, en la
próxima línea el
primer elemento
encontrado es
referenciado
usando
corchetes y el
valor 0 (lista[0]).

MÉTODOS
Nuevos métodos:
Normalmente es
usado para afectar
varios elementos y
no uno. Para
interactuar con una
lista de elementos
retornados puede
usar un ciclo for.

MÉTODOS
Nuevos métodos:
{var lista =
document.
querySelectorAll
(“#principal p”);
for (var f=0;
f<lista.length;
f++)
{lista[f].onclick =
mostraralerta;}}
function mostraralerta()
window.onload =
hacerclic;

MÉTODOS
Nuevos métodos:
En vez de seleccionar
el primer elemento
encontrado, se registra
el manejador de
eventos onclick para
cada uno de ellos con
un ciclo for. Ahora,
todos los elementos
<p> dentro de <div>
mostrarán una pequeña
ventana cuando el
usuario pulsa clic sobre
ellos.

MÉTODOS
querySelectorAll(), y querySelector(),
pueden contener uno o más grupos de
selectores separados por coma.
Pueden ser combinados para
referenciar elementos a los que resulta
difícil llegar. Por ejemplo combinando
querySelectorAll() y getElementById()
sería:

MÉTODOS
{var lista = document.
getElementById(‘principal’),
querySelectorAll(“p”);
lista[0].onclick=mostraralerta;}
function mostraralerta()

OBJETO WINDOW
Cada vez que se abre el navegador o se inicia
una nueva pestaña, se crea un objeto global
llamado Window para referenciar la ventana
del navegador y proveer algunas propiedades y
métodos esenciales. El objeto se almacena en
una propiedad del objeto global de JavaScript
llamada window. A través de esta propiedad
puede conectarnos con el navegador y el
documento desde el código. El objeto Window
a su vez incluye otros objetos con los que
provee información adicional relacionada con la
ventana y el documento.

OBJETO WINDOW
Propiedades disponibles para acceder a estos
objetos:
 Location: Contiene un objeto Location con
información acerca del origen del
documento. También se puede usar como
una propiedad para declarar o devolver la
URL del documento (por ejemplo,
window.location =
“http://www.formasterminds.com”).

OBJETO WINDOW
objetos:
 History: Esta propiedad contiene un objeto
History con propiedades y métodos para
manipular el historial de navegación.
Navigator: Esta propiedad contiene un objeto
Navigator con información acerca de la
aplicación y el dispositivo. Una de sus
propiedades es geolocation (usada para
detectar la ubicación del usuario.)

OBJETO WINDOW
objetos:
 Document: Esta propiedad contiene un
objeto Document, que provee acceso a los
objetos que representan los elementos
HTML en el documento.

OBJETO DOCUMENT
Casi todo en JavaScript se define como un
objeto, incluyendo los elementos en el
documento.
Cuando se carga un HTML, el navegador crea
una estructura interna para procesarlo llamada
DOM (Document Object Model).
Esta estructura está compuesta por múltiples
objetos de tipo Element (u otros tipos más
específicos que heredan de Element), que
representan cada elemento en el documento.

OBJETO DOCUMENT
Los objetos Element mantienen una conexión
permanente con los elementos que
representan. Cuando se modifica un objeto, su
elemento también se modifica y el resultado se
muestra en pantalla. Para ofrecer acceso a
estos objetos y alterar sus propiedades desde
código JavaScript, los objetos se almacenan en
un objeto llamado Document que se asigna a la
propiedad document del objeto Window.

OBJETO DOCUMENT
El objeto Document incluye propiedades para
ofrecer acceso rápido a los objetos Element que
representan los elementos más comunes del
documento.
 Forms: Devuelve un array con referencias a
los objetos Element que representan los
elementos <form> en el documento.
 Images: Devuelve un array con referencias a
los objetos Element que representan los
elementos <img> en el documento.
 Links: Devuelve un array con referencias a los
objetos Element que representan los
elementos <a> en el documento.

MÉTODOS
Accediendo a los objetos Element en el DOM,
pueden leerse y modificarse los elementos en
el documento, pero, debe considerar que el
navegador lee el documento de forma
secuencial y no puede referenciar un elemento
que aún no se ha creado. Lo mejor, es ejecutar
el código JavaScript solo cuando ocurre el
evento load. Los navegadores disparan el
evento después de que se ha cargado el
documento y todos los objetos en el DOM se
han creado y son accesibles.

MÉTODOS
El siguiente ejemplo incluye el atributo
onload en el elemento <body> para poder
acceder a un elemento <p> en la cabecera
del documento desde el código JavaScript.

MÉTODOS
<!DOCTYPE html><html lang="es"><head>
<meta charset="utf-8"><title>Ejemplo</title>
<script>
function iniciar() {
var elemento =
document.getElementById("subtitulo");}
</script>
</head><body onload="iniciar()">
<section><h1>Mi sitio web</h1>
<p id="subtitulo">El mejor sitio</p>
</section></body></html>

MÉTODOS
<meta charset="utf-8"><title>Ejemplo</title>
<script>
var elemento =
document.getElementById("subtitulo");}
</script>
<section><h1>Mi sitio web</h1>
<p id="subtitulo">El mejor sitio</p>
Ésto no realiza acción alguna, solo obtiene
una referencia a Element que representa <p>
y la almacena en la variable elemento tan
pronto como se carga el documento. Si se
leyera la propiedad id en el objeto
almacenado en la variable elemento, se
obtiene la cadena de caracteres "subtitulo"

MÉTODOS
<meta charset="utf-8"><title>JavaScript</title>
<script>
function iniciar() {var elemento =
document.getElementById("subtitulo");
alert("El id es: " + elemento.id); // "El id
es: subtitulo"}
</script>
</head><body onload="iniciar()"><section>
<h1>Sitio web</h1><p id="subtitulo">El mejor
sitio</p></section></body></html>

MÉTODOS
<script>
alert("El id es: " + elemento.id); // "El id
es: subtitulo"}
</script>
</head><body onload="iniciar()"><section>
<h1>Sitio web</h1><p id="subtitulo">El mejor
sitio</p></section></body></html>
Se accede al elemento con getElementById()
porque <p> tiene un id. Si no estuviera
presente o desease una opción, puede usarse
otro método provisto por el objeto Document.

MÉTODOS
<script>
function iniciar() {var lista=
document.getElementsByTagName("p");
for (var f = 0; f < lista.length; f++) {
var elemento = lista[f];
alert("El id es: " + elemento.id);}}
</script></head><body onload="iniciar()">
<section><h1>Sitio Web</h1>
<p id="subtitulo">El mejor web</p>

MÉTODOS
<script>
getElementsByTagName() devuelve un array
con referencias a todos los elementos cuyos
nombres son iguales al valor provisto entre
paréntesis.

MÉTODOS
<script>
El atributo se ha definido con el texto "p", por
lo que el método devuelve una lista de todos
los elementos <p> en el documento.

MÉTODOS
<script>
Después de obtener las referencias, se
accede a cada elemento con un bucle for y se
muestra el valor de sus atributos id en la
pantalla.

MÉTODOS
<script>
Si conoce la posición del elemento a acceder,
puede especificar su índice. En el ejemplo,
solo existe un <p>, por lo tanto la referencia a
este elemento se encontrará en la posición 0
del array.

MÉTODOS
<script>
var elemento = lista[0];
Si conoce la posición del elemento a acceder,
puede especificar su índice. En el ejemplo,
solo existe un <p>, por lo tanto la referencia a
este elemento se encontrará en la posición 0
del array.

MÉTODOS
<script>
document.querySelector("section > p");
alert("El id es: " + elemento.id);}</script>

MÉTODOS
<script>
document.querySelector("section > p");
querySelector() busca un elemento usando un
selector CSS. Por ejemplo para encontrar
elementos <p> que son hijos directos de un
elemento <section>. Éste devuelve solo la
referencia al primer elemento encontrado.

MÉTODOS
Los métodos estudiado buscan elementos en
todo el documento, pero puede reducir la
búsqueda solo al interior de un elemento. Con
este propósito, los objetos Element también
incluyen sus propias versiones de métodos
como:
 getElementsByTagName()
Por ejemplo, puede buscar elementos <p>
dentro de elementos <section> con una
identificación específica.

MÉTODOS
<script>function iniciar() {var elemprincipal =
document.getElementById("seccionprincipal");
var lista =
elemprincipal.getElementsByTagName("p");
<section id="seccionprincipal">
<h1>Sitio Web</h1><p id="subtitulo">El mejor
sitio web!</p></section></body></html>

MÉTODOS
var lista =
Se obtiene una referencia al elemento
identificado como "seccionprincipal“ …

MÉTODOS
var lista =
… y se llama al método
getElementsByTagName() para encontrar los
elementos <p> dentro de ese elemento.

MÉTODOS
var lista =
Ya que solo hay un <p> dentro de <section>,
se lee la referencia en el índice …

MÉTODOS
var lista =
… y se muestra el valor de su atributo id en la
pantalla.

OBJETOS ELEMENT
Lo que convierte a JavaScript en un lenguaje
especial es la posibilidad de modificar esos
elementos y el documento.
Con este propósito, los objetos Element
contienen propiedades para manipular y definir
los estilos de los elementos y sus contenidos.
Una de estas propiedades es style, el cual
contiene un objeto llamado Styles que a su vez
incluye propiedades para modificar los estilos
de los elementos.

OBJETOS ELEMENT
Los nombres de los estilos en JavaScript no
son los mismos que en CSS.
No hubo consenso a este respecto y, a pesar
de que puede asignar los mismos valores a las
propiedades, hay que aprender sus nombre en
JavaScript.
Las siguientes son las propiedades que más
se usan.

OBJETOS ELEMENT: PROPIEDADES
 color: Declara el color del contenido del
elemento.
 background: Declara los estilos del fondo
del elemento. También puede trabajar con
cada estilo de forma independiente usando
las propiedades asociadas:
 backgroundColor.
 backgroundImage.
 backgroundRepeat.
 backgroundPosition.
 backgroundAttachment.

 border: Declara los estilos del borde del
elemento. Puede modificar cada estilo de
forma independiente con las propiedades
asociadas:
 borderColor.
 borderStyle.
 borderWidth

 border: Puede modificar cada borde
individualmente usando:
 borderTop: borderTopColor,
borderTopStyle y borderTopWidth.
 borderBottom: borderBottomColor,
borderBottomStyle y borderBottomWidth.
 borderLeft: borderLeftColor,
borderLeftStyle y borderLeftWidth.
 borderRight: borderRightColor,
borderRightStyle y borderRightWidth.

 margin: Declara el margen del elemento.
 marginBottom.
 marginLeft. marginRight.
 marginTop.
 padding: Declara el relleno del elemento.
paddingBottom.
 paddingLeft.
 paddingRight.
 paddingTop.

 width: Declara el ancho del elemento.
 maxWidth: Ancho máximo.
 minWidth: Ancho mínimo.
 height: Declara la altura del elemento.
 maxHeight: Altura máxima.
 minHeight: Altura mínima.
 visibility: Determina si el elemento es visible.
 display: Define el tipo de caja usado para
presentar el elemento.

 position: Define el tipo de posicionamiento
usado para posicionar el elemento.
 top: Especifica la distancia entre el margen
superior del elemento y el margen superior
de su contenedor.
 bottom: Especifica la distancia entre el
margen inferior del elemento y el margen
inferior de su contenedor.
 left: Especifica la distancia entre el margen
izquierdo del elemento y el margen
izquierdo de su contenedor.

 right: Especifica la distancia entre el
margen derecho del elemento y el margen
derecho de su contenedor.
 cssFloat: Permite al elemento flotar hacia
un lado o el otro.
 clear: Recupera el flujo normal del
documento, impidiendo que el elemento
siga flotando hacia la izquierda, la derecha,
o ambos lados.
 overflow: Especifica cómo se va a mostrar
el contenido que excede los límites de la
caja de su contenedor.

 zIndex: Define un índice que determina la
posición del elemento en el eje z.
 font: Declara los estilos de la fuente. O
individualmente usando:
 fontFamily.
 fontSize.
 fontStyle.
 fontVariant. fontWeight.
 textAlign: Alinea texto dentro del elemento.
 verticalAlign: Alinea elementos Inline
verticalmente.

 textDecoration: Resalta el texto con una
línea. También puede declarar los estilos de
forma individual asignando los valores true
o false a las propiedades:
 textDecorationBlink.
 textDecorationLineThrough.
 textDecorationNone.
 textDecorationOverline.
 textDecorationUnderline.

Modificar los valores de estas propiedades
es sencillo:
1. Debe obtener una referencia al objeto
Element que representa el elemento que
desea modificar.
2. Luego asigna un nuevo valor a la
propiedad del objeto Styles que desea
cambiar.
La única diferencia con CSS, además de
los nombres de las propiedades, es que
los valores se tienen que asignar entre
comillas.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<script>
var elemento =
document.
getElementById("subtitulo");
elemento.style.width = "300px";

// …
elemento.style.border =
"1px solid #FF0000";
elemento.style.padding = "20px";}
</script>
</head>
<body onload="iniciar()">
<section>
<h1>Sitio Web</h1>
<p id="subtitulo">
El mejor sitio</p>

Las propiedades del objeto Styles son
independientes de los estilos CSS asignados
al documento.
Leer una de estas propiedades sin asignar
valor desde JavaScript, devolverá una cadena
de caracteres vacía.
Para proveer información acerca del
elemento, los objetos Element incluyen
propiedades adicionales. Las más usadas
son:

Propiedades de objetos Element:
 clientWidth: Devuelve el ancho del
elemento, incluido el relleno.
 clientHeight: Devuelve la altura del
elemento, incluido el relleno.
 offsetTop: Devuelve el número de píxeles
que se ha desplazado el elemento desde la
parte superior de su contenedor.
 offsetLeft: Devuelve el número de píxeles
que se ha desplazado el elemento desde el
lado izquierdo de su contenedor.

 offsetWidth: Devuelve el ancho del
elemento, incluidos el relleno y el borde.
 offsetHeight: Devuelve la altura del
elemento, incluidos el relleno y el borde.
 scrollTop: Devuelve el número de píxeles
en los que el contenido del elemento se ha
desplazado hacia arriba.
 scrollLeft: Devuelve el número de píxeles
en los que el contenido del elemento se ha
desplazado hacia la izquierda.

 scrollWidth: Devuelve el ancho del
contenido del elemento.
 scrollHeight: Devuelve la altura del
contenido del elemento.
Estas propiedades son de solo lectura,
pero puede obtener el valor necesitado
leyendo estas propiedades y después
usando las propiedades del objeto
Styles para asignarle uno nuevo.

<!DOCTYPE html>
<html lang="es">
<head>
<style>
#subtitulo {
width: 300px;
padding: 20px;
border: 1px solid #FF0000;}
</style>

<!DOCTYPE html>
<html lang="es">
<head>
<style>
#subtitulo {
width: 300px;
padding: 20px;
border: 1px solid #FF0000;}
</style>
Se asignan los
estilos al elemento
<p> desde CSS

No es común modificar los estilos de un
elemento uno por uno. Normalmente, los
estilos se asignan a los elementos desde
grupos de propiedades CSS a través del
atributo class. Estas reglas se llaman
clases. Las clases se definen de forma
permanente en hojas de estilo CSS, pero
los objetos Element incluyen las
siguientes propiedades para asignar una
clase diferente a un elemento y, por lo
tanto, modificar sus estilos todos a la vez.

 className: Declara o devuelve el valor del
atributo class.
 classList: Devuelve un array con la lista de
las clases asignadas al elemento.
La forma más fácil de reemplazar la clase de
un elemento es asignando un nuevo valor a la
propiedad className.

 classList: Incluye los siguientes métodos:
 add(clase): Agrega una clase al
elemento.
 remove(class): Elimina una clase del
elemento.
 toggle(clase): Agrega o elimina una clase
según el estado actual. Si ya se ha
asignado al elemento, la elimina, y en
caso contrario agrega la clase.
 contains(clase): Si se ha asignado la
clase al elemento o no, devuelve true o
false respectivamente.

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.supercolor {background: #0099EE;}
.colornegro {background: #000000;}
</style>

<!DOCTYPE html>
<html lang="es">
<head>
<style>
.supercolor {background: #0099EE;}
.colornegro {background: #000000;}
</style>
Se declaran las clases: supercolor y
colornegro. Ambas definen el color de fondo
del elemento. La clase supercolor se asigna
al elemento <p>, lo que le otorga al elemento
un fondo azul.

<body>
<section>
<h1>Sitio Web</h1>
<p id="subtitulo" class="supercolor"
onclick="cambiarcolor()">
El mejor sitio!</p>
</section>
</body>
</html>

<body>
<section>
<h1>Sitio Web</h1>
El mejor sitio!</p>
</section>
</body>
</html>
La función se ejecuta
cuando el usuario hace
clic en el elemento, no
cuando el documento
termina de cargarse.

Se pueden asignar varias clases a un
mismo elemento. Cuando esto ocurre, en
lugar de la propiedad className es
mejor utilizar los métodos de la
propiedad classList. Debe implementarse
el método contains() para detectar si ya
se ha asignado una clase a un elemento
y agregarla o eliminarla, dependiendo
del estado actual.

</head>
<body>
<section>
<h1>Sitio Web</h1>
¡El mejor sitio web!</p>
</section>
</body>
</html>

</head>
<body>
<section>
<h1>Sitio Web</h1>
¡El mejor sitio web!</p>
</section>
</body>
</html>
Cada vez que el usuario hace clic en el
elemento <p>, su estilo se modifica,
pasando de tener un fondo de color a no
tener ningún fondo. Se puede obtener el
mismo efecto con el método toggle().

</style>
<script>
var elemento =
</script>
</head>
Este método comprueba el estado
del elemento y agrega la clase si
no se ha asignado anteriormente,
o la elimina en caso contrario.

</style>
<script>
var elemento =
</script>
</head>
El método toogle() simplifica el
trabajo. Ya no debe controlar si
la clase existe o no, el método
lo hace automáticamente y
agrega la clase o la elimina
dependiendo del estado actual.

<body>
<section>
<h1>Sitio Web</h1>
!El mejor web!</p>
</section>
</body>
</html>

Lenguaje JavaScript parte 1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Lenguaje JavaScript parte 1

Similar a Lenguaje JavaScript parte 1 (20)

Más de Facultad de Ciencias y Sistemas

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

Último

Último (20)

Lenguaje JavaScript parte 1