Capacitación formadores Generación de

capacidades en el Ecosistema Digital de

Bogotá

Formación especializada TI
JavaScript
Métodos y propiedades para los Arreglos
length; //contar cantidad de elementos del arreglo

var frutas=[“Manzana”, “Banana” , “Pera”];

Console.log(amigos.length); // me muestra el valor 3

push(); //agregar un elemento al final del arreglo. Existe una función contraria que llamada unshift() que
agrega el elemento al inicio.

frutas.push(“Naranja”,…);

pop(); //elimina el ultimo elemento de un arreglo. Existe una función contraria llamada shift() elimina el
primer elemento
frutas.pop();
Métodos y propiedades para los Arreglos
concat(); //concatener un arreglo

var amigosTrabajo=[“pedro”,”juan”,”jaime”];
var amigosEstudio=[“oscar”,”jose”,”fernando”]

var todosMisAmigos=amigosTrabajo.concat(amigosEstudio);

join() // cambia el separador de los elementos en el array al imprimir(mostrar en pantalla)

amigos.join(“ - ”);

sort(); //ordena los elementos de un array

amigos.sort();
Métodos y propiedades para los Arreglos
indexOf(); //nos devuelve la posición de un elemento
var pos=frutas.indexOf(“Banana”);

splice(); //elimina elementos a partir de una posición. Recibe dos parámetros el primero la posición
desde donde va a eliminar y el segundo el numero de elementos a eliminar.

var elementoEliminado = frutas.splice(pos, 1); // así es como se elimina un elemento

Array.from() //Crea un nuevo Array de un objeto iterable o parecido a un array.
Array.isArray() //Devuelve true si una variable es un Array, de lo contrario
devuelve false.
Array.observe() //Observa los cambios del Array asincronicamente, similar a
Array.of() //Crea un nuevo Array con un numero de argumentos variable, sin
importar numero o tipo de argumentos.
Ciclo While y Do While
Crea un bucle que ejecuta una sentencia especificada mientras n = 0;
cierta condición se evalúe como verdadera. Dicha condición es x = 0;
while (n < 3) {
evaluada antes de ejecutar la sentencia.
n ++;
Cada interación, el bucle incrementa n y la añade a x. Por lo x += n;
tanto, x y n toman los siguientes valores: }

Después del primer pase: n = 1 y x = 1

do {
Después del segundo pase: n = 2 y x = 3
i += 1;
Después del tercer pase: n = 3 y x = 6 document.write(i);
Después de completar el tercer pase, la condición n < 3 no será } while (i < 5);
verdadera más tiempo, por lo que el bucle terminará.
Conversión de variables
Tipos de datos de JavaScript
En JavaScript hay 5 tipos de datos diferentes que pueden contener valores:
● string
● number
● boolean
● object
● function

También hay 3 tipos de objetos:

● Object
● Date
● Array
Conversión de variables
El operador typeof
Puede usar el operador typeof para encontrar el tipo de datos de una variable de JavaScript.

● typeof "John" // Returns "string"

● typeof 3.14 // Returns "number“
● typeof NaN // Returns "number“
● typeof false // Returns "boolean“
● typeof [1,2,3,4] // Returns "object“
● typeof {name:'John', age:34} // Returns "object“
● typeof new Date() // Returns "object“
● typeof function () {} // Returns "function“
● typeof myCar // Returns "undefined" *
● typeof null // Returns "object"
Conversión de variables
Las variables de JavaScript se pueden convertir a una nueva variable y a otro tipo
de datos:
● Mediante el uso de una función de JavaScript
● Automáticamente por el propio JavaScript
Convertir números en cadenas de texto
● toString () //convierte un numero en una cadena de texto
● toExponential()
● toFixed()
● toPrecision()

El método toString() también se puede utilizar para convertir booleanos y fechas

en String.
Convertir cadenas de texto a numeros
● parseFloat() //convierte una cadena de texto a un numero decimal
● parseInt() //convierte una cadena de texto a un numero entero

Si el valor dentro de la cadena de textos no contiene números, la conversión se

realizara al numero NaN que es un numero sin valor usado por JavaScript.
Métodos y propiedades para cadenas de texto
● length //retorna el largo de la cadena de texto
● indexOf() //devuelve el índice de (la posición de) la primera aparición de un texto especificado en
una cadena
● lastIndexOf() //devuelve el índice de la última aparición de un texto especificado en una cadena
● search() // busca una cadena para un valor específico y devuelve la posición de la coincidencia
● slice() //extrae una parte de una cadena y devuelve la parte extraída en una nueva cadena.
● substring() //es similar a slice().La diferencia es que la subcadena no puede aceptar índices
negativos
● substr() //es similar a slice(). La diferencia es que el segundo parámetro especifica la longitud de la
parte extraída.
Diferencias indexOf y search
● El método search () no puede tomar un segundo argumento de posición de inicio.
● El método indexOf () no puede tomar valores de búsqueda potentes (expresiones regulares).
Métodos y propiedades para cadenas de texto
● replace() //reemplaza un valor especificado con otro valor en una cadena
● toUpperCase() //Una cadena se convierte en mayúscula
● toLowerCase() //Una cadena se convierte en minúscula
● concat() //une dos o más cadenas
● trim() //elimina el espacio en blanco de ambos lados de una cadena
● charAt() //devuelve el carácter en un índice especificado (posición) en una cadena
● charCodeAt() //devuelve el unicode del carácter en un índice especificado en una cadena
● split() //Una cadena se puede convertir a una matriz con este método
DOM
Obtener elementos:

● document.getElementsByTagName(); //retorna (array) todos los elementos

que sean de la etiqueta indicada
● document.getElementById(); //retorna un elemento por su Id
● document.getElementByName(); //retorna un elemento o array de elementos
por su Name
● document.getElementsByClassName(); //retorna los elementos por el
nombre de su clases
DOM
Crear nodos(Elementos):

● document.createElement(); // crea un elemento del tipo especificado html en

JS
● document.createTextNode(); //crea un nodo de texto en html
● elemento.appendChild(contenido); //agrega un nodo dentro de otro
● elemento.setAttribute(name, value); //agrega un atributo a un elemento con
su respectivo valor
DOM
Agregando nodos

● parentNode(); //retorna el elemento padre de un elemento obtenido.

● elementoPadre.insertBefore(elementoInsertar, elementoReferencia);
//inserta un elemento antes de otro elemento referenciado
● elemento.innerHTML=“texto” //permite agregar HTML dentro de un
elemento de texto o retornar su HTML.
● elemetoPadre.replaceChild(elemento, elementoReferencia); //permite
reemplazar un elemento HTML por otro.
● elementoPadre.removeChild(elementoEliminar); //permite eliminar un
elemento HTML
DOM
Modificar elementos:

//formas abreviadas de usar la función setAttribute

elemento.id= “nuevoID”;
elemento.className=“nuevaClase”;

elemento.style.propiedad= “valor”; //modificar estilos desde JS

Eventos
● Modelo básico de eventos
Este modelo simple de eventos se introdujo para la versión 4 del estándar HTML
y se considera parte del nivel más básico de DOM. Aunque sus características
son limitadas, es el único modelo que es compatible en todos los navegadores y
por tanto, el único que permite crear aplicaciones que funcionan de la misma
manera en todos los navegadores.
● Modelo de eventos estándar
Las versiones más avanzadas del estándar DOM (DOM nivel 2) definen un
modelo de eventos completamente nuevo y mucho más poderoso que el
original. Todos los navegadores modernos lo incluyen, salvo Internet Explorer.
Modelo básico de eventos
En este modelo, cada elemento o etiqueta XHTML define su propia lista de
posibles eventos que se le pueden asignar. Un mismo tipo de evento (por
ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios
elementos XHTML diferentes y un mismo elemento XHTML puede tener
asociados varios eventos diferentes.
 Elementos para los que está
Evento Descripción
definido
<button>, <input>, <label>, <selec
onblur Deseleccionar el elemento
t>, <textarea>, <body>
Deseleccionar un elemento que
onchange <input>, <select>, <textarea>
se ha modificado
onclick Pinchar y soltar el ratón Todos los elementos
Pinchar dos veces seguidas con
ondblclick Todos los elementos
el ratón
<button>, <input>, <label>, <selec
onfocus Seleccionar un elemento
t>, <textarea>, <body>
Elementos de formulario
onkeydown Pulsar una tecla (sin soltar)
y <body>
Elementos de formulario
onkeypress Pulsar una tecla
y <body>
Elementos de formulario
onkeyup Soltar una tecla pulsada
y <body>
La página se ha cargado
onload <body>
completamente
Pulsar (sin soltar) un botón del
onmousedown Todos los elementos
ratón
onmousemove Mover el ratón Todos los elementos
El ratón "sale" del elemento (pasa
onmouseout Todos los elementos
por encima de otro elemento)
 El ratón "entra" en el elemento
onmouseover Todos los elementos
(pasa por encima del elemento)
Soltar el botón que estaba
onmouseup Todos los elementos
pulsado en el ratón
Inicializar el formulario (borrar
onreset <form>
todos sus datos)
Se ha modificado el tamaño de la
onresize <body>
ventana del navegador
onselect Seleccionar un texto <input>, <textarea>
onsubmit Enviar el formulario <form>
Se abandona la página (por
onunload <body>
ejemplo al cerrar el navegador)
Manejadores de eventos
Un evento de JavaScript por sí mismo carece de utilidad. Para que los eventos resulten
útiles, se deben asociar funciones o código JavaScript a cada evento. De esta forma,
cuando se produce un evento se ejecuta el código indicado, por lo que la aplicación
puede responder ante cualquier evento que se produzca durante su ejecución.

Las funciones o código JavaScript que se definen para cada evento se

denominan "manejador de eventos" y como JavaScript es un lenguaje muy flexible, existen
varias formas diferentes de indicar los manejadores:
● Manejadores como atributos de los elementos XHTML.
● Manejadores como funciones JavaScript externas.
● Manejadores "semánticos".
Manejadores de eventos como atributos XHTML
Se trata del método más sencillo y a la vez menos profesional de indicar el
código JavaScript que se debe ejecutar cuando se produzca un evento. En este
caso, el código se incluye en un atributo del propio elemento XHTML.

<input type="button" value="Pinchame y verás" onclick="alert('Gracias por

pinchar');" />
Manejadores de eventos y variable this
JavaScript define una variable especial llamada this que se crea
automáticamente y que se emplea en algunas técnicas avanzadas de
programación.

<div id="contenidos" style="width:150px; height:60px; border:thin solid silver"

onmouseover="this.style.borderColor='black';"
onmouseout="this.style.borderColor='silver';">
Sección de contenidos...
</div>
Manejadores de eventos como funciones externas
La definición de los manejadores de eventos en los atributos XHTML es el método más sencillo pero
menos aconsejable de tratar con los eventos en JavaScript. El principal inconveniente es que se
complica en exceso en cuanto se añaden algunas pocas instrucciones, por lo que solamente es
recomendable para los casos más sencillos.
Si se realizan aplicaciones complejas, como por ejemplo la validación de un formulario, es aconsejable
agrupar todo el código JavaScript en una función externa y llamar a esta función desde el elemento
XHTML.
Siguiendo con el ejemplo anterior que muestra un mensaje al pinchar sobre un botón:

<input type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />

Utilizando funciones externas se puede transformar en:

function muestraMensaje() {
alert('Gracias por pinchar');
}

<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />

El principal inconveniente de este método es que en las funciones externas no se puede seguir
utilizando la variable this y por tanto, es necesario pasar esta variable como parámetro a la función:

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="resalta(this)"

onmouseout="resalta(this)">
Manejadores de eventos semánticos
Los métodos que se han visto para añadir manejadores de eventos (como atributos XHTML y como
funciones externas) tienen un grave inconveniente: "ensucian" el código XHTML de la página.
Como es conocido, una de las buenas prácticas básicas en el diseño de páginas y aplicaciones web es
la separación de los contenidos (XHTML) y su aspecto o presentación (CSS). Siempre que sea posible,
también se recomienda separar los contenidos (XHTML) y su comportamiento o programación
(JavaScript).
Mezclar el código JavaScript con los elementos XHTML solamente contribuye a complicar el código
fuente de la página, a dificultar la modificación y mantenimiento de la página y a reducir la semántica
del documento final producido.
Afortunadamente, existe un método alternativo para definir los manejadores de eventos de JavaScript.
Esta técnica es una evolución del método de las funciones externas, ya que se basa en utilizar las
propiedades DOM de los elementos XHTML para asignar todas las funciones externas que actúan de
manejadores de eventos.
Manejadores de eventos semánticos
<input id="pinchable" type="button" value="Pinchame y verás" onclick="alert('Gracias por pinchar');" />
Se puede transformar en:

// Función externa
function muestraMensaje() {
alert('Gracias por pinchar');
}

// Asignar la función externa al elemento

document.getElementById("pinchable").onclick = muestraMensaje;

// Elemento XHTML
<input id="pinchable" type="button" value="Pinchame y verás" />
Si se añaden los paréntesis después del nombre de la función, en realidad se está ejecutando la función
y guardando el valor devuelto por la función en la propiedad onclick de elemento.

El único inconveniente de este método es que la página se debe cargar completamente antes de que se
puedan utilizar las funciones DOM que asignan los manejadores a los elementos XHTML. Una de las
formas más sencillas de asegurar que cierto código se va a ejecutar después de que la página se
cargue por completo es utilizar el evento onload:

window.onload = function() {
document.getElementById("pinchable").onclick = muestraMensaje;
}
Obteniendo información del evento (objeto event)
JavaScript permite obtener información sobre el ratón y el teclado mediante un objeto especial llamado
event. Desafortunadamente, los diferentes navegadores presentan diferencias muy notables en el
tratamiento de la información sobre los eventos.
Aunque es un comportamiento que resulta muy extraño al principio, todos los navegadores modernos
excepto Internet Explorer crean mágicamente y de forma automática un argumento que se pasa a la
función manejadora, por lo que no es necesario incluirlo en la llamada a la función manejadora. De esta
forma, para utilizar este "argumento mágico", sólo es necesario asignarle un nombre, ya que los
navegadores lo crean automáticamente.

function manejadorEventos(elEvento) {
var evento = elEvento;
}
Información sobre el evento
La propiedad type indica el tipo de evento producido, lo que es útil cuando una misma función se utiliza
para manejar varios eventos:

var tipo = evento.type;

La propiedad type devuelve el tipo de evento producido, que es igual al nombre del evento pero sin el
prefijo on.