Breve introduccin a JavaScript

Vistanos en roboticajaen.wordpress.com
Variables
Para declarar una variable, Javascript usa la palabra clave var.
var minumero = 2;
alert(minumero);
Las variables pueden almacenar tambin valores Booleanos o valores elementales como null o
undefined.

Operadores
suma:
resta:
multiplicacin:
divisin:
AND:
OR:
IGUAL:
DISTINTO:
MENOR QUE:
MAYOR QUE:

+
*
/
&&
||
==
!=
<
>

Matrices (arrays)
Son variables multidimensionales. Sus valores son identificados con un ndice que comienza por
el valor 0.
var miarray = [rojo , , 32 , null];
alert(miarray[0]); // el mtodo alert mostrar el string rojo
Es posible realizar operaciones con los valores de una matriz y almacenar el resultado, p.e.:
mimatriz[0] = color + mimatriz[0]; // el operador + es capaz de concatenar textos.

Extraer y agregar valores a las matrices

push(valor)
Agrega un nuevo valor al final de la matriz.
shift()
Remueve el primer valor de la matriz y lo retorna para ser procesado.
pop()
Remueve el ltimo valor de la matriz y lo retorna para ser procesado.

var mimatriz = [rojo , 32];

mimatriz.push('coche');
alert(mimatriz[2]); // pasa por pantalla: 32
alert(mimatriz.shift()); // pasa por pantalla: rojo

Condicionales y bucles
if / if-else
var mivariable = 9;
if( mivariable < 10 ) {
alert(El valor es menor que 10);
}else{
alert(El valor es igual que 10 o mayor);
switch
Sirve para comprobar mltiples condiciones.
var mivariable = 9;
switch( mivariable ) {
case 5:
alert(El valor es cinco.);
break;
case 8:
alert(El valor es ocho.);
break;
default:
alert(El valor es + mivariable);
}
La declaracin switch evala una expresin (generalmente una variable simple), compara el
resultado con las declaraciones case y, en caso de xito, ejecuta las instrucciones declaradas para
ese caso.
El cdigo dentro de cada caso debe finalizar con la instruccin break. Esta instruccin informa al
intrprete JS que no hay necesidad de continuar evaluando el resto de los casos.
for
Ejecutar el cdigo entre llaves mientras la condicin declarada en el segundo parmetro sea
verdadera. Utiliza la sintaxis for(inicializacin; condicin; incremento).
var mivariable = 9;
for( var f = 0; f < mivariable; f++ ) {
alert(El valor actual es + f);
}
while
El bucle se ejecutar hasta que la condicin sea falsa. Si la primera evaluacin resulta falsa, el
cdigo nunca ser ejecutado.

var mivariable = 9;
while( mivariable < 100 ) {
mivariable++;
}
alert(El valor final de mivariable es + mivariable);
do while
Si lo que necesitamos es que las instrucciones sean ejecutadas al menos una vez.
var mivariable = 9;
do {
mivariable++;
} while (mivariable > 100);
alert(El valor final de mivariable es + mivariable);

Funciones y Funciones annimas

var mivariable = 5;
function mifuncion() {
mivariable = mivariable *2;
}
for (var f = 0; f < 10; f++) {
mifuncion();
}
alert(El valor de mivariable es + mivariable);
Otra forma de declarar una funcin es usar una funcin annima y asignarla a una variable. El
nombre de la variable ser el nombre que usaremos luego para llamar a la funcin. Esta tcnica es
usada para definir funciones dentro de otras funciones, convertir funciones en constructores de
objetos y crear patrones complejos de programacin.
Funciones annimas son simplemente funciones sin un nombre o identificador. Podemos asignar
estas funciones a variables, usarlas para crear mtodos para objetos, pasarlas como argumento a
otras funciones, etc.
var mivariable = 5;
var mifuncion = function() {
mivariable = mivariable * 2;
};
for (var f = 0; f < 10; f++) {
mifuncion();
}
alert(El valor de mi variable es + mivariable);
Las variables pueden tener diferentes alcances, las declaradas dentro de funciones tienen un alcance
local. De manera que dos variables con el mismo nombre, una en el espacio global y otra dentro de
una funcin, sern consideradas como dos variables diferentes.
Las variables globales son tiles cuando varias funciones tienen que compartir valores comunes.
Un aspecto negativo es la posibilidad de que sus valores sean borrados accidentalmente desde otras

partes del cdigo o incluso desde otros cdigos (todos los archivos Javascript cargados en el
documento comparten el mismo espacio global). Por esta razn es recomendable EVITAR su uso
cuando sea posible.
Las variables globales pueden tambin ser creadas desde el interior de funciones omitiendo la
palabra clave var.
Una prctica comn para evitar el uso de varibles globales es declarar un objeto global y luego crear
nuestra aplicacin dentro de este objeto.
var mivariable = 5;
var miresultado;
function mifuncion(contador) {
contador = contador + 12;
return contador;
}
miresultado = mifuncion(mivariable);
alert(miresultado);
En el ejemplo anterior contador es un argumento. Al inicio declaramos la variable mi resultado
pero no le asignamos ningn valor. Es recomendable y una buena prctica el declarar todas las
variables con las que vamos a trabajar al comienzo, y as evitar confusin y poder identificarlas
fcilmente desde otras partes del cdigo.

Objetos
Para declarar objetos lo ms simple es usar notacin literal.
var miobjeto = {
mipropiedad: valordepropiedad,
nombre: Juan,
edad: 30
};
Para acceder a los valores de las variables podemos usar un punto o corchetes, p.e.:
miobjeto.mipropiedad, o bien, miobjeto['mipropiedad'].
Para acceder a una propiedad por medio del valor de una variable tenemos que hacerlo usando
corchetes. P.e.:
var mivariable = nombre;
var miobjeto = {
nombre: Juan,
edad: 30
};
alert(miobjeto[mivariable]);
Tambin es necesario acceder a las propiedades de este modo cuando su nombre es considerado
invlido para una variable (pero si permitido para una propiedad). P.e.:
var miobjeto = {
nombre: Juan,

'mi edad': 30
};
alert(miobjeto['mi edad']);
Podemos crear o modificar variables usando ambos tipos de notacin. P.e.:
var miobjeto = {
nombre: Juan,
edad: 30
};
miobjeto.nombre = Jorge
miobjeto.trabajo = Programador;
Las funciones dentro de un objeto se llaman mtodos. Los mtodos convierten a un objeto en una
unidad capaz de contener y procesar informacin de forma independiente.
var miobjeto = {
nombre: Juan,
edad: 30,
mostrarnombre: function() {
alert(miobjeto.nombre);
},
cambiarnombre: function(nuevonombre) {
miobjeto.nombre = nuevonombre;
}
};
miobjeto.mostrarnombre();
miobjeto.cambiarnombre('Jorge');
Al igual que las funciones, los mtodos pueden tomar valores por medio de sus atributos y retornar
valores usando la instruccin return.
Los objetos tambin pueden contener otros objetos. Para acceder a las propiedades y mtodos de
estos objetos internos, debemos concatenar sus nombres usando puntos.
var miobjeto = {
nombre: Juan,
edad: 30,
moto: {
modelo: Suzuki,
fecha: 1981
},
mostrarcoche: function() {
alert(miobjeto.nombre + posee una + miobjeto.moto.modelo);
}
};
miobjeto.mostrarcoche();
Una de las caractersticas ms importantes es la posibilidad de crear nuevos objetos que heredan
las propiedades y mtodos de los objetos en los cuales se basan.
La herencia en Javascript se logra a travs de prototipos. Cada objeto tiene un prototipo, y nuevos
objetos se crean a partir de ese prototipo.

En el caso anterior, el objeto miobjeto obtuvo su propio prototipo automticamente al ser creado. Si
decidimos crear un objeto nuevo basado en miobjeto, el nuevo ser creado desde el prototipo de mi
objeto, no desde el objeto mismo. Esta construccin puede seguir por siempre, creando una cadena
de objetos llamada cadena de prototipos. Las modificaciones introducidas en un prototipo
afectarn a todos los objetos hacia abajo en la cadena.
create() es un nuevo mtodo, parte de un objeto nativo llamado Object. Este mtodo usa un objeto
existente como prototipo para crear uno nuevo. P.e.:
<script>
var miobjeto = {
nombre: Juan,
edad: 30,
mostrarnombre: function() {
alert(this.nombre);
},
cambiarnombre: function(nuevonombre) {
this.nombre = nuevonombre;
}
};
var empleado = Object.create(miobjeto);
empleado.cambiarnombre('Roberto');
</script>
Los objetos pueden referenciarse a s mismos usando la palabra clave this. La razn por la que
usamos this es porque el objeto creado acta como un plano para crear nuevos objetos (llamados
instancias). El uso de this es necesario en estos casos para representar el nombre del objeto con el
que estamos trabajando, sin importar si es el original o una de las copias.
El mtodo create() es nuevo y una introduccin reciente en el lenguaje. Para simular este mtodo en
navegadores antiguos, Douglas Crockford, recomienda lo siguiente:
if(typeof Object.create !== 'function') {
Object.create = function(o) {
function F() {}
F.prototype = o;
return new F();
};
}
Dependiendo de nuestras necesidades, puede ser ventajoso crear nuevos objetos con una tcnica
alternativa que combina notacin literal, funciones y la instruccin return.
<script>
var constructor = function(nombreinicial) {
var obj = {
nombre: nombreinicial,
edad: 30,
mostrarnombre: function() {
alert(this.nombre);
},

cambiarnombre: function(nuevonombre) {
this.nombre = nuevonombre;
}
};
return obj;
};
empleado = constructor(Jose);
empleado.mostrarnombre();
</script>
A travs de la variable constructor llamamos a la funcin con el argumento Jose. El objeto obj se
retorna y se asigna a la variable empleado.
Usando esta tcnica podemos crear nuevos objetos de forma dinmica, asignar valores iniciales o
incluso realizar algunas operaciones al comienzo de la funcin y retornar un objeto creado a partir
de este procesamiento.
La ventaja ms importante que ofrece esta tcnica es la posibilidad de definir propiedades y
mtodos privados. Para permitir el acceso a las propiedades y mtodos solo para el objeto que los
cre, debemos volverlos privados usando una tcnica llamada closure (cierre).
Las funciones, y en consecuencia los mtodos, siempre mantienen una conexin con el entorno
donde fueron creados y con sus variables. Cuando retornamos un objeto desde una funcin, sus
mtodos podrn acceder las variables de la funcin, incluso cuando ya no se encuentran en el
mismo entorno.
var funcion = function() {
var nombre = Jose;
var edad = 31;
var obj = {
mostrarnombre: function() {
alert(nombre);
},
cambiarnombre: function(nuevonombre) {
nombre = nuevonombre;
}
};
return obj;
};
empleado = funcion();
empleado.mostrarnombre(); // permite acceder a la variable nombre de la funcin
Aqu el objeto retornado obj recordar las variables nombre y edad, pero ese objeto ser el nico
que tendr acceso a ellas. Esto es llamado closure.

Constructores
Las funciones usadas para crear objetos son llamadas constructores. JS incluye una clase especial
de constructor que trabaja con el operador new para obtener un nuevo objeto. No es parte de la
programacin de prototipos pero fue introducido para ser consistente on otros lenguajes orientados
a objetos (en especial Java).

Esta clase de constructores NO crean un objeto, son como planos a partir de los cuales los objetos
son creados. Por esto, se necesita de la clave this para declarar o acceder a sus propiedades y
mtodos.
function Miobjeto() {
this.nombre = Juan;
this.edad = 30;
this.mostrarnombre = function() {
alert(this.nombre);
};
this.cambiarnombre = function(nuevonombre) {
this.nombre = nuevonombre;
};
}
var empleado = new Miobjeto();
empleado.mostrarnombre();
Excepto por el uso de this, constructores y funciones son muy similares. Es conveniente escribir el
nombre del constructor con letra inicial en mayscula. Para crear un objeto a partir de un
constructor, tenemos que usar el operador new. Un constructor puede incluir atributos con los
cuales proveer valores iniciales para el nuevo objeto. P.e.,
function Miobjeto(nombreinicial, edadinicial) {
...
}
var empleado = new Miobjeto(Roberto, 55);
Este constructor no convierte a un objeto en prototipo de otro, como hace create(). En su lugar, crea
nuevas instancias a partir del prototipo del constructor (Miobjeto.prototype). Por esto, si queremos
introducir modificaciones para afectar esas instancias no podemos trabajar directamente con el
objeto inicial, debemos acceder al prototipo del constructor usando la propiedad prototype.
function Miobjeto(nombreinicial, edadinicial) {
this.nombre = nombreinicial;
this.edad = edadinicial;
this.mostrarnombre = function() {
alert(this.nombre);
};
this.cambiarnombre = function(nuevonombre) {
this.nombre = nuevonombre;
};
}
Miobjeto.prototype.mostraredad = function() {
alert(this.edad);
};
var empleado = new Miobjeto(Roberto, 55);
empleado.mostraredad();
Aplicar el mtodo create() es la forma adecuada de trabajar en JS, creando objetos e instancias sin
involucrarnos en la complejidad de un lenguaje de prototipos como ste. De esta manera, en la
mayora de los casos no necesitaremos trabajar con prototipos, constructores o el operador new.

Objeto Window
Se crea el objeto global Window cada vez que el navegador arranca. Todo est incluido dentro de
este objeto, desde cdigo hasta el documento completo.
El objeto Window puede ser accedido por medio de la propiedad window. Debido a que ste es el
objeto global, el intrprete infiere que todo aquello que no tenga una referencia le pertenece (p.e.,
alert() en lugar de window.alert()).
Veamos una lista de las propiedades y mtodos de uso ms frecuente ofrecidos por este objeto:

alert(texto)
Muestra una ventana emergente conteniendo los valores entre parntesis.

confirm(texto)
Similar a alert(), pero ofrece dos botones: Si y No. Retorna true o false.

setTimeout(funcion, milisegundos)
Ejecuta la funcin especificada luego del tiempo en ms. Podemos cancelar el proceso mediante el
mtodo clearTimeout(variable), si antes asignamos setTimeout(f,t) a una variable.

location
Este objeto incluye varias propiedades para retornar info sobre la direccin URL del documento
actual.

history
Este objeto incluye mtodos para navegar a travs del historial de la ventana. Algunos de estos
mtodos son: back(), forward() y go().

Objeto Document
Dentro del navegador, se crea una estructura interna para procesar el documento HTML. Esta
estructura es el DOM (Document Object Model) y est compuesta por objetos que representan
cada elemento HTML.
El DOM comienza con el objeto Document, accesible desde JS a travs de la propiedad
document. Document es parte del objeto Window y ofrece varias propiedades y mtodos
adicionales para trabajar con el documento.

Eventos
Se llama eventos a las acciones de los usuarios (clic con el ratn o presionar una tecla, p.e.).
Adems de los eventos disparados de las acciones de los usuarios, estn los eventos disparados por
el sistema (p.e., load).
El cdigo que responde a un evento se llama manejador de evento (event handler). Cuando
registramos un manejador de evento, lo que hacemos es definir como responder la aplicacin al
evento.
Despus de que el mtodo addEventListener() se volvi estndar, en lugar de registrar un

manejador lo que hacemos es agregar una escucha al evento (event listener). Esto nos deja con tres
formas diferentes de registrar un manejador de evento para un elemento HTML: agregar un nuevo
atributo de evento a un elemento, registrar un manejador de evento con una propiedad de evento o
usar el nuevo mtodo addEventListener().

Atributos de eventos
Estos atributos estn asociados con eventos que ejecutan cdigo de acuerdo a la respuesta del
usuario o al estado actual del documento y sus elementos. Sus valores sern los cdigos JS
encargados de responder a los eventos (p.e., <p onclick=alert('Hola')>Clic aqu</p>).
Los nombres de los atributos se construyen agregando el prefijo on al nombre del evento.

onLoad
onClick
onMouseover
onMouseout
onKeypress
onKeydown
onKeyup
onChange

es disparado cuando la carga del documento finaliza.

se dispara cuando el usuario hace clic con el ratn.
se dispara cuando el puntero del ratn se mueve sobre el elemento.
se dispara cuando el puntero del ratn deja de estar sobre el elemento.
es disparado cuando una tecla es presionada y liberada.
se dispara cuando una tecla es presionada.
se dispara cuando una tecla es liberada.
se dispara cuando un elemento cambia (p.e., campo formulario).

Propiedades de eventos
Son iguales a los atributos de eventos con la diferencia de que son aplicados en el cdigo JS como
propiedades de elementos. Usando selectores JS podemos referenciar un elemento HTML y
asignarle una propiedad de evento adecuada. P.e.: elemento.onclick = mifuncion;

Mtodo addEventListener()
El mtodo addEventListener() es la tcnica ideal para escuchar eventos y es la implementada
como estndar en HTML5. Su sintaxis es addEventListener(evento, escucha, captura).
El primer atributo es el nombre del evento (sin el prefijo on); el segundo atributo es la funcin que
responder al evento, generalmente llamada listener function (puede ser una referencia a una
funcin o una funcin annima completa); y el tercer atributo determina cmo eventos mltiples
sern disparados en la estructura HTML usando los valores true y false. El valor false es el valor
por defecto.
El mtodo addEventListener() permite agregar todas las escuchas a eventos que necesitemos para
un mismo elemento. JS tambin ofrece el evento removeEventListener() para remover una
escucha de un elemento. Este mtodo requiere los mismos atributos que addEventListener().

Incorporando JS
En lnea
Es una tcnica obsoleta pero an til y prctica en algunas circunstancias.

<body>
<section id=principal>
<p onclick=alert('Has hecho clic!')>Clic aqu</p>
<p>No puedes hacer clic aqu</p>
</section>
</body>

Embebido
En HTML5 no es necesario usar el atributo type dentro de la etiqueta <script> para declarar el
lenguaje utilizado. Javascript es asignado por defecto.
<head>
<meta charset=utf-8>
<title>Javascript</title>
<script>
function hacerclic() {
var elem = document.getElementsByTagName('p')[0]; //el primero
elem.addEventListener('click', mostraralerta);
}
function mostraralerta() {
alert('Has hecho clic!');
}
addEventListener('load', hacerclic);
</script>
</head>
El elemento <script> y su contenido pueden estar localizados en cualquier parte del documento.
Incluso cuando seguimos la prctica recomendada de posicionar los cdigos en la cabecera del
documento, debemos considerar que el cdigo es ledo de forma secuencial por el navegador y no
podemos referenciar un elemento que an no ha sido creado.
Para acceder a los elementos HTML desde JS el objeto Document incluye tres mtodos:
getElementsByTagName() referencia elementos por medio de sus palabras clave.
getElementById() referencia un elemento por medio del valor de su atributo id.
getElementsByClassName()
permite referenciar elementos por el valor de su
atributo class.

Archivos externos
Para reducir el tiempo que se tarda en descargar nuestros documentos, incrementar nuestra
productividad, y distribuir y reusar nuestros cdigos en cada documento sin comprometer
eficiencia, se recomienda grabar los cdigos JS en uno o ms archivos externos y cargarlos usando
el atributo src.
<html lang=es>
<head>
<meta charset=utf-8>
<title>Javascript</title>
<script src=micodigo.js></script>
</head>

Contamos con dos atributos ms para el elemento <script>: async y defer. Son atributos booleanos
que indican cmo y cundo el script incluido por el atributo src se ejecuta. Si async es declarado, el
cdigo es ejecutado de forma asncrona. Si se declara el atributo defer, el cdigo ser ejecutado
cuando el documento se haya ledo por completo. Y cuando ambos estn ausentes, el cdigo se
ejecuta inmediatamente despus de ser ledo.

Nuevos selectores
querySelector()
Este mtodo retorna el primer elemento que concuerda con el grupo de selectores CSS especificado
entre parntesis. Los selectores se declaran usando comillas y la misma sintaxis que en CSS.
function hacerclic() {
var elem = document.querySelector(#principal p:last-child);
elem.addEventListener('click', mostraralerta);
}
function mostraralerta() {
alert('Has hecho clic!');
}
addEventListener('load', hacerclic);
Se pueden declarar varios grupos de selectores separados por coma, retornando el mtodo el primer
elemento que concuerda con cualquiera de ellos.

querySelectorAll()
En lugar de un solo elemento, este metodo retorna todo elemento que concuerda con el grupo de
selectores especificados entre parntesis. El valor retornado es una matriz que contiene cada uno de
los elementos encontrados, ordenados de acuerdo a cmo fueron ingresados en el documento.
function hacerclic() {
var lista = document.querySelectorAll(#principal p);
lista[0].addEventListener('click', mostraralerta);
}
function mostraralerta() {
alert('Has hecho clic!');
}
addEventListener('load', hacerclic);
Generalmente este mtodo ser usado para afectar a varios elementos. Para interactuar con la lista
de elementos retornados podemos usar un bucle for.
function hacerclic() {
var lista = document.querySelectorAll(#principal p);
for (var f = 0; f < lista.length; f++) {
lista[f].addEventListener('click', mostraralerta);
}
}
function mostraralerta() {
alert('Has hecho clic!');

}
addEventListener('load', hacerclic);
La propiedad length est disponible en varios objetos y permite declarar u obtener su tamao.
Este mtodo y los anteriores pueden ser combinados para encontrar los elementos que queremos.
function hacerclic() {
var lista = document.getElementById(principal).querySelectorAll(p);
Consiste en seleccionar un grupo de elementos y luego realizar una segunda seleccin con otro
mtodo para encontrar elementos dentro del primer grupo.

matchesSelector()
Este mtodo no busca elementos sino que controla si los elementos que encontramos son los que
estamos buscando. Tambin se puede usar para determinar si un elemento en particular ser
retornado por el selector que estamos usando. Toma los mismos selectores CSS usados en mtodos
previos pero solo retorna true o false.
function hacerclic() {
var elem = document.getElementById('principal');
var pelem;
if(elem.webkitMatchesSelector(section)) {
pelem = elem.querySelector(p:first-child);
pelem.addEventListener('click', mostraralerta);
}
}

Estilos Javascript
Del mismo modo que en CSS, en JS podemos asignar una lista de estilos a un elemento HTML.
Estos estilos son asignados por medio de propiedades pertenecientes al objeto Style.
function nuevoestilo() {
var elem = document.getElementById('principal');
elem.style.background = #990000;
}
addEventListener('load', nuevoestilo);
Veamos una lista de los estilos JS ms comunes:

background
declara o retorna todos los estilos del fondo. Tambin podemos
trabajar con cada estilo individualmente, p.e.: backgroundColor.
border

declara o retorna los estilos de todo el borde. Podemos afectar cada borde
individualmente, p.e.: borderTop.

margin

declara o retorna los estilos de todo el borde. Podemos afectar cada borde
individualmente, p.e.: borderTop.

padding

declara o retorna los estilos del borde interno. Podemos uasr las propiedades
asociadas, p.e.: paddingBottom, paddingLeft, paddingTop.

width
declara o retorna el ancho del elemento. Tambin contamos con dos
propiedades asociadas que nos permiten declarar el ancho mximo y mnimo de un elemento:
maxWidth y minWidth.
height

declara o retorna la altura de un elemento. Tambin contamos con dos

propiedades asociadas que nos permiten declarar la altura mxima y mnima de un elemento:
maxHeight y minHeight.

visibility determina si un elemento ser visible o no. Puede tomar dos valores: visible y
hidden. Al igual que el resto de propiedades puede retornar el valor actual.
color declara o retorna el color del contenido de un elemento.
font declara o retorna todos los estilos del texto. Tambin podemos declarar los estilos
individualmente usando las propiedades asociadas fontFamily, fontSize, fontSizeAdjust,
fontStyle, fontVariant y fontWeight.

Propiedades className y classList

La definicin de las clases en una hoja de estilo CSS es permanente, no pueden ser modificadas
pero podemos reemplazarlas a travs de su atributo class.
<head>

<style>
.miclase {
background: #DDDD00;
}
</style>
<script>
var elem;
function iniciar() {
elem = document.getElementById('principal');
elem.addEventListener('click', cambiarclase);
}
function cambiarclase() {
elem.className = miclase;
}
addEventListener('load', iniciar);
</script>
</head>
La propiedad className declara o retorna el valor del atributo class. Es posible asignar mltiples
clases a un elemento. Cuando esto ocurre, es mejor aplicar el nuevo objeto classList que ofrece los
siguientes mtodos:

add(clase) agrega otra clase a un elemento.

remove(clase)

remueve una clase de un elemento.

toggle(clase)

agrega o remueve una clase dependiendo del estado actual. Si la clase

ya fue asignada al elemento, se remueve. En caso contrario se agrega.

contains(clase)

detecta si la clase fue asignada al elemento o no, retornando true o

false respectivamente.

Accediendo Atributos
JS incluye mtodos para usar con cualquier atributo, obtener su valor, declarar uno nuevo o
removerlo:

getAttribute(nombre)

retorna el valor del atributo especificado por nombre.

setAttribute(nombre, valor) declara un nuevo atributo para un elemento. Si el

atributo ya existe, el mtodo solo cambiar su valor.
removeAttribute(nombre)

remueve el atributo especificado por nombre.

Propiedad dataset
Es posible personalizar elementos HTML usando el atributo data-*. Tcnica til para agregar info
adicional a un elemento. La info no es visible para el usuario, pero es accesible por el documento y
el navegador. Para leer estos atributos, JS ofrece la propiedad dataset.
El atributo data-* puede tomar cualquier valor, y podemos agregarlo al mismo elemento tantas
veces como necesitemos. El valor que elegimos para cada atributo nos permite identificarlo luego
usando dataset.
Esta propiedad retorna un objeto con todos los atributos data-* incluidos en el elemento. Para
obtener el valor de un atributo especfico, solo tenemos que usar su nombre como una propiedad de
dataset. P.e.: alert(elem.dataset.total) para el elemento <section id=principal data-total=3>.

Crear y Eliminar elementos

Tenemos a nuestra disposicin los siguientes mtodos:

createElement(palabra clave)
crea un nuevo elemento del tipo especificado
por el atributo palabra clave, aunque no agrega el elemento al documento.
appendChild(elemento)

trabaja junto con createElement() para insertar un

nuevo elemento como hijo de un elemento ya existente en el documento. El atributo elemento debe
ser el valor retornado por el mtodo createElement().

removeChild(elemento)

elimina uno de los hijos de un elemento. El atributo

elemento debe ser una referencia al elemento hijo a ser removido.
<head>


<script>
function iniciar() {
var elem = document.getElementById('principal');
var nuevoelemento = document.createElement('p');
elem.appendChild(nuevoelemento);
}
addEventListener('load', iniciar);
</script>
</head>
El mtodo createElement() pertenece al objeto document. Agrega un nuevo elemento al DOM pero
no al documento HTML. Sin embargo, cuando el elemento es requerido como parte del documento
HTML, debemos agregarlo usando appendChild().

Propiedades innerHTML, outerHTML e insertAdjacentHTML

Existen varias formas de agregar contenido a un elemento de JS. La ms flexible (y el nuevo
estndar en HTML5) es usar la propiedad innerHTML. Esta propiedad declara o retorna el
contenido de un elemento.
<script>
function iniciar() {
var elem = document.getElementById('principal');
var nuevoelemento = document.createElement('p');
elem.appendChild(nuevoelemento);
nuevoelemento.innerHTML = Hola mundo!;
}
addEventListener('load', iniciar);
</script>
El valor provisto a la propiedad innerHTML puede ser simplemente texto o cualquier cdigo
HTML. Es recomendable agregar nuevos elementos HTML combinando los mtodos
createElement() y appendChild() y aplicar innerHTML cuando trabajamos solo con texto. Esto
es debido a que innerHTML es ms eficiente para reemplazar contenido que para agregar nuevo.
<script>
function iniciar() {
var elem = document.getElementById('principal');
var contenido = elem.innerHTML;
elem.innerHTML = contenido + <p>Hola Mundo!</p>;
}
addEventListener('load', iniciar);
</script>
Junto con innerHTML, HTML5 incluye las siguientes propiedades y mtodos para el contenido:

textContent

declara o retorna el contenido de un elemento como texto.

outerHTML
declara o retorna contenido del documento. A diferencia de
innerHTML, esta propiedad reemplaza no solo el contenido sino tambin el elemento en el cual es
aplicado.

insertAdjacentHTML(ubicacion, contenido)
Inserta contenido en una ubicacin de acuerdo al valor del primer atributo. Los valores disponibles
son: beforebegin (antes del elemento), afterbegin (dentro del elemento, antes del primer hijo),
beforeend (dentro del elemento, luego del ltimo hijo), y afterend (luego del elemento).
<script>
function iniciar() {
var elem = document.getElementById('principal');
elem.insertAdjacentHTML(beforebegin, <section>Hola
Mundo!</section>);
}
addEventListener('load', iniciar);
</script>
Cuando aplicamos innerHTML, los cdigos HTML y JS son interpretados. Por razones de
SEGURIDAD, es siempre mejor usar textContent en su lugar.