Javascript - y no Java a secas - es un lenguaje de programación del lado del cliente, o sea que funciona en la maquina del usuario y no en el servidor lo que hace que su tiempo de reacción casi ni se note, ya que trabaja contra la RAM, que es lo más rápido en toda la interacción de componentes de la web (aunque también encontramos compilaciones que corren en el servidor, pero ese es otro peldaño ;). Se diseñó para ejecutar pequeñas aplicaciones dentro de una página WEB debido a las limitaciones que presentaba el HTML (Hyper Text Marckup Language) en sus inicios.
"Javascript es un lenguaje interpretado, orientado a las páginas web, basado en el paradigma prototipo, con una sintaxis semejante a la del lenguaje Java."
Es un lenguaje interpretado porque requiere de un "interpretador", a diferencia de los lenguajes compilados como JAVA.
Netscape Navigator, en aquel entonces el browser más popular y en parte responsable de la difusión a nivel popular de la WEB, tuvo un tremendo éxito al incorporar dentro de sus capacidades la posibilidad de interpretar Applets, pequeños programas escritos en JAVA, y que le daban a la estática página web 2.0, un poco de movimiento y funcionalidad.
Basados en esa experiencia, y pensando en bajar el peso de los archivos applets y así aumentar la velocidad de transmisión de datos entre el servidor y el cliente, Netscape Corporation comenzó a desarrollar un lenguaje más sencillo y auto interpretado para su navegador, que en su tiempo se llamó Livescript.
Este lenguaje, a diferencia de los Applets, tenía el motor incrustado en el Browser o programa de navegación, por lo que no era necesario encapsularlo, si no, solamente transmitir las ordenes en un archivo de texto simple.
Casi al mismo tiempo, Sun Microsystems generó un convenio con Netscape el cual contribuyó a que Livescript se convirtiera en Javascript, o como es conocido en el medio: JS, tomando muchas ventajas de JAVA como lenguaje, pero sin la complejidad en su desarrollo y limitándolo al entorno del browser.
Posteriormente Microsoft entró al mercado de los navegadores con Explorer y su propia propuesta de lenguaje script (JScript) que difiere en la forma de entenderse con las ventanas del Browser, pero que, en rasgos generales, son bastante similares y por lo tanto compatibles con los otros browser del mercado que han venido apareciendo.
Entender Javascript y su funcionamiento es importante para un desarrollador, no sólo porque agrega dinamismo y otros tipos de interactividad a una página web, sino que es el primer paso para entrar al mundo de AJAX (Asynchronous Javascript And XML) que está muy de moda en la web últimamente y que permite tener experiencias más enriquecidas y menos carga de pantallas.
Este documento está dividido en 2 partes, la primera, entender los 5 elementos básicos de la programación. La segunda extiende los conocimiento de las reglas para comenzar a a interactuar con el Browser (BOM) y con el documento y sus partes (DOM).
Cinco elementos básicos en la programación
Objetivo del capítulo:
Generar los conocimientos básicos para entender la lógica de la programación en Javascript y como sacarle provecho a programaciones ya hechas que circulan por la web.
Funciones
Lo primero a entender es que Javascript es un lenguaje en base a funciones, fácilmente identificables porque siempre terminan con paréntesis. La mayor parte de cosas que queramos realizar ya han sido definidas y es cosa de "instanciarlas" en un evento.
Veamos por ejemplo la función alert(), una de las que más ocupo ya que acepta un mensaje como argumento y muestra la ventana de alerta del sistema operativo con el mensaje, de esta manera puedo "ver" lo que el programa está entendiendo.
Ejemplo:
<a href="javascript:alert('hola... mi nombre es luis');">mensaje de alerta </a>
Resultado:
Mensaje alerta
Eventos
Este es buen momento para hablar de los "eventos", o sea el cuándo van a suceder las funciones de Javascript (JS no se manda solo!).
Básicamente hay dos momentos en los cuales se puede ejecutar un "script": cuando el Usuario realice una acción o cuando la página realiza la acción (o sea cuando el programador necesite realizarla). En el ejemplo de arriba insertamos el Javascript como un vínculo HTML, o sea se va a realizar cuando el usuario seleccione el link con el cursor. La misma acción se puede realizar de esta manera:
Ejemplo:
<a href="#" onclick="alert('hola... mi nombre es luis');">mensaje de alerta </a>
Si hacemos una rápida traducción, el evento que gatilló la ventana de alerta fue "onclick" o sea "al apretar el mouse sobre el elemento", que en este caso está amarrado a la etiqueta <a href>
Los eventos que pueden gatillar una acción de JavaScript varían dependiendo de la versión del browser pero los más utilizados y aceptados últimamente son:
Evento
Resultado
onMouseOver
Al pasar el ratón por encima de un enlace, área o frame.
onMouseOut
Cuando deja de estar el ratón encima de un enlace, área o frame.
onMouseMove
Al mover el ratón por el documento.
onKeyUp
Al presionar una tecla.
onClick
Al hacer click con el ratón.
onDblClick
Al hacer doble click con el ratón.
onResize
Al dimensionar la ventana del navegador.
onMove
Al mover la ventana del navegador.
onChange
Al modificar texto en un control de edición. Sucede al perder el foco.
onSelect
Al seleccionar texto en un control de edición.
onFocus
Al situar el foco en un control.
onBlur
Al perder el foco un control.
onSubmit
Al enviar un formulario.
onReset
Al inicializar un formulario.
Ejemplo:
<form action="" method="get">
<input type="text" value="este es un texto" onselect="alert('acaba de seleccionar texto')" />
<input type="text" onkeypress="alert('está apretando una tecla')"/>
<input type="submit" onmouseover="alert('está pasando por encima del botón!!')" />
</form>
También podemos gatillar el evento desde una acción de la página, generalmente utilizado por el programador para no depender de una acción del usuario. Los eventos de la página son:
Evento
Resultado
onLoad
Terminar de cargar una página o frame (entrar).
onAbort
Abortar la carga de una página.
onError
Producirse algún error en la carga de la página.
Ejemplo:
<body onload="alert('la página se ha cargado sin problemas')">
Ubicación de la programación
Hasta el momento, hemos gatillado una función, ya sea por un evento del usuario o de la página, pero siempre es única y escrita de manera focalizada. a esto lo llamamos "on line" o "en la línea", amarrado al elemento.
Pero, ¿qué pasa si la función que queremos gatillar es repetitiva para diferentes tipos de eventos?, ¿Tenemos que escribirla en la misma línea cada vez que la necesitemos?, ¿Qué pasa si es más compleja la acción que queremos realizar y requiere de varios procesos o etapas para lograrlo? o la queremos utilizar en diferentes acciones de nuestra página?.
En esos casos, al igual que en CSS, podemos poner la programación general de manera global en la cabecera del documento y acceder a las acciones complejas con funciones.
Generalmente vamos a escribir nuestra función en la cabecera del documento (entre los tags <head> </head>) de tal manera que no sea visible como contenido en el documento y el Browser va a saber que es una función creada en JavaScript porque lo vamos a encerrar entre los tags <script></script> (aunque esta norma está quedando cada vez más deprecada, para ubicar los llamados al final de nuestro documento HTML).
Ejemplo:
</title>
<script type="text/javascript">
//aquí la programación
</script>
</head>
Antiguamente, al haber tantos lenguajes de script, había que definirlo como parámetro en la etiqueta <script> con la propiedad type, eso ya no es estrictamente necesario ya que los navegadores actualizados son bastante compatibles y saben diferenciar.
Por otro lado, era una buena idea encerrarlo también entre un comentario de HTML (-->) por si algún browser despistado no sabía el lenguaje y mostraba el contenido, aunque estuviera en la cabecera.
Ejemplo:
</title>
<script>
<!--
-->
</script>
</head>
La tercera manera es vincular el script de un archivo externo, de esa manera se puede reutilizar la programación en todas las páginas del sitio que lo tengan vinculado.
Ejemplo:
<script src="js/js.js"></script>
Nota:
Si la etiqueta <script> tiene el atributo src, entonces no lee lo que está entre las etiquetas.
Dentro de las etiquetas, o en este archivo externo, se pueden resumir varias acciones que queremos que se gatillen en una acción. A eso le llamamos funciones, igual a la función alert(), uno puede crear sus propias funciones.
Funciones propias
La creación de una función propia es bastante simple y sigue un par de reglas:
Hay que expresar que es una función.
Hay que nombrar la función.
Escribir la acción de la función.
Ejemplo:
<script>
function elNombre(){
alert(prompt('por favor escriba su nombre'));
}
</script>
</head>
<body onload="elNombre()">
En el ejemplo anterior estamos anidando dos funciones de JavaScript. La primera, prompt(), tiene un campo de texto para recoger un valor, y se queda con ese valor, y de nuevo nuestro viejo amigo alert() nos muestra cuanto vale lo que la primera función recogió.
Nota:
Otra forma de definir una función es asignarla a una variable: let foo = function() { /* acción a realizar */ }
Una vez definida la función para todo el documento, ya sea por carga externa o local, se puede llamar desde cualquier evento dentro del documento.
Ejemplo:
<script>
function elNombre(){
alert(prompt('por favor escriba su nombre'));
}
</script>
</head>
<body onload="elNombre()">
<a href="#" onClick="elNombre()">
¿cuál es tú nombre?
</a>
</body>
Ejercicio:
Cuenta la historia de HTML en el espacio y evento de una página web ocupando las funciones vistas en este capítulo, alert() y prompt().
Variables
El segundo elemento básico en la programación son las variables. Las variables, en programación, son espacios de memoria RAM en los cuales se almacena información. En otras palabras: las variables son contenedores de valores. Este contenedor puede ser transportado y manipulado permitiéndonos recuperar el valor que hemos depositado en él, cada vez que lo necesitemos en la vida de la página en el browser del usuario.
Su definición sigue unas cuantas reglas básicas:
Su nombre no puede comenzar con números.
No puede contener caracteres especiales.
Es sensible a la diferencia entre mayúsculas y minúsculas.
La asignación de un valor es con el signo igual.
Existe mientras exista la página en el navegador del usuario.
Retomemos el ejercicio anterior y pongamos en práctica este nuevo concepto con unas pequeñas modificaciones en nuestra función.
Ejemplo:
<script>
function elNombre(){
y=prompt('por favor escriba su nombre');
alert(y);
}
</script>
</head>
<body onload="elNombre()">
El resultado es el mismo, pero en este caso el valor que recoja prompt() lo asigna a la variable "y", por lo que, de ahora en adelante, cuando escribamos "y" (sin comillas) dentro de esta función, estamos preguntando por el valor que contiene "y".
Operaciones aritméticas
Una de las primeras cosas que hicieron los computadores, y por ende los lenguajes de programación, son operaciones matemáticas. En la siguiente tabla hay un resumen de los operadores disponibles en JavaScript:
-
Resta.
+
Suma cuando son números
*
Multiplica
/
Divide
%
Resto de una división
--
Decremento en 1.
++
Incrementa en 1.
Otros usos de los operadores
+
concatena los valores cuando uno de ellos es cadena.
En este ejemplo, estamos introduciendo un nuevo concepto aparte de ejemplificar la operación matemática. A una función personalizada le podemos pasar uno o varios valores dentro de los paréntesis y en la función, los convierte en variables. En este caso la variable "numero" toma el valor del primer parámetro que encuentra al llamar la función sumar(), que es 5.
En este ejemplo pasamos dos valores dentro de los paréntesis de nuestra función sumar, "5" y "10", y al llegar a la función se introducen estos valores en las variables "numero1" y "numero2" para poder manejarlas.
Tipo de dato
Con el tipo de dato que estamos introduciendo en una variable hay que tener un poco de cuidado, ya que pueden haber 5 tipos de datos en una variable:
cadena (string)
Letras, números o caracteres especiales agrupados por comilla simple o doble. Ej: "hola"
En este ejemplo, muy parecido al anterior si no fuera que el 5 está encerrado entre comillas simples, el resultado es 510 y no 15, ya que 5 no es un número si no una cadena y, a diferencia de otros lenguajes de programación, el caracter de concatenación también es el signo más (+) y sirve para unir valores, si es que no puede sumarlos.
Si tenemos dudas de qué tipo de valor tiene una variable, podemos ocupar el método TypeOf para averiguar su tipo de dato.
Ejemplo:
<script>
function sumadora(){
y=prompt('10 más ',10);
alert( y + 10);
alert (TypeOf y);
}
</script>
</head>
<body onload="sumadora()">
Este ejemplo devuelve 1010 como resultado, porque está concatenando y no sumando, esto quiere decir que el valor que devuelve prompt() es una cadena, tal como lo verificamos al hacer usar TypeOf de la variable y. Si queremos que sume, tenemos que convertir en "tipo numérico" la cadena que está recibiendo de la función prompt() ya sea con la función parseInt() o la función parseFloat().
Ejemplo:
<script>
function sumadora(){
y=prompt('10 más ',10);
alert( parseInt(y) + 10);
}
</script>
</head>
<body onload="sumadora()">
Nota:
Si la ventana de alerta devuelve NaN (not a number) es por que la función no pudo convertir en número el valor recibido.
Aprovechando el concepto de concatenación podemos armar frases dinámicas con variables que recojamos de la página o del usuario.
Ejemplo:
<script>
function sumadora(){
x = parseInt(prompt('primer número:')) + parseInt(prompt('segundo número:'));
alert('el resultado de la suma de este número es ' + x);
}
</script>
</head>
<body onload="sumadora()">
En este ejemplo no sólo estamos dejando de asignar cada valor por separado en una variable, si no que anidamos de nuevo una función dentro de otra, la convertimos en número y además las sumamos, todo en una sola línea y ese valor se asigna a la variable "x"
Vida de una variable (Scope)
Algo que es importante considerar al declarar una variable es su alcance. ¿Queremos que sea local o global?, ¿accesible desde cualquier lado o sólo para la función que la está creando?.
Ejemplo:
let saludar = function() {
let mensaje = 'hola';
alert(mensaje);
};
saludar();
alert(mensaje);
En este caso, la función saludar() levanta una ventana de alerta con el contenido de la variable "mensaje" que dice "hola", pero llamando directo a la variable "mensaje" no devuelve resultado ya que la variable fue declarada dentro de la función y sólo existe para la función.
Ejemplo:
let mensaje = 'mundo';
let saludar = function() {
let mensaje = 'hola';
alert(mensaje);
};
saludar();
alert(mensaje);
En este ejemplo la variable se declara global para la página y pude ser usada en cualquier momento, a menos que dentro de la función se vuelva a definir como variable para la función.
Ejercicio:
Desarrollar, en una página web, un mensaje de alerta que entregue el "número de la suerte del día".
Recogiendo los valores de las preguntas:
¿Cuál es la suma de los números de su dirección?
¿Qué hora es?
¿Cuál es el último número de su número de teléfono?
¿Cuantos besos diste ayer?
¿Cuál es el color favorito?
¿Cuantas veces has hecho este curso?
¿Cuantos años llevas estudiando?
¿Cuantos años crees que te faltan?
Generar "número del día", utilizando operadores matemáticos y concatenando las variables recibidas, abrir una venta de alerta con el texto:
Sonría, su número de la suerte del día es <número del día>.
Parece que vas a tener un día <color>
Condicionales
Pero, ¿qué pasa si queremos mostrar un mensaje sólo si el resultado es mayor a 100?, ¿Cómo evitamos el mensaje de alerta? Ahí es donde aparece el tercer elemento básico de la programación: Las condicionales.
"Sí es que llueve mucho se inundan los paso bajo nivel en Santiago", esta frase la escuchamos todos los años y no es más que una condicional "lógica". Si NO llueve, no pasa nada y nadie se preocupa. Lo mismo pasa con los lenguajes de programación, sólo que la lógica se aplica en inglés: if(). Se evalúa lo que está dentro de los paréntesis, y si el resultado es verdadero, se realiza la acción sujeta a la condición, o sea, todo lo que está dentro de los corchetes ({ }) que están después de if(). Esto es lo que se llama un bloque de acciones.
Ejemplo:
<script>
function sumadora(){
x = parseInt(prompt('primer número:')) + parseInt(prompt('segundo número:'));
if(x > 100){
alert('el resultado de la suma de este número es mayor a 100: ' + x);
}
}
</script>
</head>
<body onload="sumadora()">
Operadores racionales
Para poder evaluar si "x" es mayor a cien ocupamos lo que se llama un operador racional, hay varios, y probablemente ya los hemos ocupado en alguna frase anteriormente:
Operador
Descripción
<
Menor que.
>
Mayor que.
<=
Menor o igual.
>=
Mayor o igual
==
Igual
===
Idéntico (compara también el tipo de dato)
!=
No igual (distinto)
!==
No idéntico
Ejemplo:
<script type="text/javascript">
function sumadora(){
x = 5;
y = '5';
if(x==y) alert('X es igual a Y');
if(x=6) alert('X es igual a ' + x);
if(x!==y) alert('X NO es identico a Y');
}
</script>
</head>
<body onload="sumadora()">
Nota:
Es importante recalcar, que cuando se está buscando la igualdad, el operador no es el signo igual (=), si no dos signos iguales (==), ya que el signo igual asigna valor a una variable y el resultado siempre sería verdadero.
Pero este ejemplo sólo va a activar la alerta si es que "x" vale más de cien. ¿Y cómo se si realmente es menor a cien?. Existe en las condicionales la alternativa; si es que no es mayor a 100, entonces muestra otro mensaje.
Ejemplo:
<script>
function sumadora(){
x = parseInt(prompt('primer número:')) + parseInt(prompt('segundo número:'));
if(x > 100){
alert('el resultado de la suma de este número es ' + x);
} else {
alert('lo siento pero la suma no es mayor a 100 (' + x + ')');
}
}
</script>
</head>
<body onload="sumadora()">
En este ejemplo ocupamos la función else ("si no"), o sea, si no es verdadera la primera condición, realiza otra acción.
Nota: else sólo existe si antes hay un if()
Otro ejemplo, ahora mezclando los anteriores, pero buscando la veracidad en cadenas de texto.
Ejemplo:
<script>
function sumadora(){
x = prompt('cuál es su nombre?:');
if(x == "pedro"){
alert(x + ' es un nombre corto' + x);
} else if(x == "luis"){
alert(x + ' es un buen nombre' + x);
} else {
alert('Lo siento, pero esperabamos que escribiera \"luis\" o \"pedro\". Pruebe de nuevo.');
sumadora();
}
}
</script>
</head>
<body onload="sumadora()">
En el ejemplo anterior, si el nombre recogido con el prompt() no es igual a "luis" o "pedro", entonces alerta que esperaba otro nombre y vuelve a ejecutar la misma función.
Operadores lógicos
En algunas ocasiones, es necesario complejizar un poco la consulta y buscar la veracidad con varias combinaciones. Ahí se utilizaran los operadores lógicos:
OPERADOR
Descripción
&&
Y (AND)
||
O (OR)
!
NO (NOT)
Ejemplo:
<script>
function sumadora(){
x = parseInt(prompt('primer número:')) + parseInt(prompt('segundo número:'));
if(x > 100 && x <= 200 ){
alert('el resultado de la suma de este número es ' + x)
} else if(x > 200){
alert('Ojo!!... la suma es mayor a 200 (' + x + ')');
} else {
alert('lo siento pero la suma no es mayor a 100 (' + x + ')');
}
}
</script>
</head>
<body onload="sumadora()">
En el ejemplo anterior, consultamos si la suma de los dos valores es mayor a 100, pero a la vez menor o igual a 200, si no es verdadero volvemos a preguntar si la suma es mayor a 200 y, por último, si ninguna de las anteriores es verdadera, realiza una acción.
Nota:
Es posible encontrar en varias programaciones una versión corta de la condicional let puedeComprarCerveza = (edad >= 18) ? "mayor de edad" : "menor de edad";
Ejercicio:
Solicitar con un prompt un número y verificar que el número introducido sea par.
Bucles
El cuarto concepto básico de la programación, y tal vez el objetivo principal, son las tareas repetitivas. A esto se le llama bucle, la repetición de una acción mientras la condición sea verdadera. Hay básicamente 2 funciones que permiten la repetición de tareas: while() y for().
while()
Mientras lo que está dentro de los paréntesis sea verdadero, lo que esté en el bloque de acciones se va a repetir.
Alerta:
Con este tipo de acción hay que tener mucho cuidado de que, lo que se esté evaluando, tenga variación, si no, puede ser eterno y "botar" el computador del usuario, o al menos el browser.
for()
Tal vez la más ocupada es la función for(), esta función requiere de 3 parámetros: el punto de partida, la verificación y la modificación.
Ejemplo:
<script>
function repetir(){
for(i=1 ; i <= 100 ; i++){
document.write(i + ") Debo hacer más preguntas en clases o me ponen a hacer tareas ridículas <br>");
}
}
</script>
</head>
<body onload="repetir()">
Nota:
Hay otras maneras de hacer bucles en JavaScript, pero lo vamos a revisar después de que veamos las Matrices.
Ejercicio:
Solicitar con un prompt un nombre, y luego un número de repeticiones. Escribir en el documento el nombre repetido la cantidad de veces correspondiente.
Matrices y Objetos
Si bien las matrices en javacrit son un objeto del tipo Array , el tiempo y la necesidad, obligaron a crear los objetos de tipo Object para tener control soble el "key" y no sólo numérico como los Arrays. Veamoslo por separados.
Matrices (Arrays)
¿Qué pasa cuando queremos guardar en una variable varios valores? A esto se le llama matrices (array) y nos permite tener varios valores asociados a un contenedor. Cada valor tiene una posición dentro de la variable partiendo de cero. Esta capacidad es de los elementos más usados en programación y son parte fundamental de la tarea de los bucles. Veamos un ejemplo:
Ejemplo:
<script>
function matrices(){
let arreglo= new Array();
arreglo[0]="uno";
arreglo[1]="dos";
arreglo[2]="tres";
for(i=0 ; i < arreglo.length ; i++){
document.write(arreglo[i] + "<br>");
}
}
</script>
</head>
<body onload="matrices()">
En este ejemplo ocupamos un método muy común en JavaScript: "length" (longitud en ingles) que nos permite saber qué cantidad de elementos hay dentro del elemento seleccionado, en este caso un arreglo, de esta manera tenemos un punto de inicio y uno de final para nuestro bucle.
Hay muchas funciones de javascript orientada a los elementos y que nos permiten interactuar con ellos como length. En este caso, le consulta el tamaño a nuestro Array, pero podría ser a una cadena, o cualquier elemento seleccionado.
Ejemplo:
<script type="text/javascript">
function largo(){
let nombre='Pedro Pablo Pérez Pereira';
document.write(nombre + " tiene "+ nombre.length +" caracteres");
}
</script>
</head>
<body onload="largo()">
Nota:
Cuando una función se aplica directamente a un elemento, se conoce como método del elemento.
Estas son algunas que se pueden usar con o para un Array:
Método
Descripción
Sintáxis
length
Largo del elemento
variable = str.length
push
Agrega al final de una Matriz
arr.push('valor')
unshift
Agrega al principio de una Matriz
arr.unshift('valor)
pop
Extrae el último elemento de una Matriz
variable = arr.pop()
shift
Extrae el primer elemento de una Matriz
variable = arr.shift()
indexOf
Devuelve el indice del elemento seleccionado.
arr.indexOf('valor')
splice
Elimina un elemento de una Matriz
arr.splice()
concat
Agrega los elementos de una Matrizal final de la otra.
arr.concat(arr2)
sort
Ordena los elementos de una Matriz
arr.sort()
reverse
Invierte el orden de una Matriz
arr.reverse()
split
Convierte cadenas en una Matriz a partir de el separador.
str.split('separador')
join
Junta los elementos de una Matriz en una cadena concatenando con el separador.
arr.join('separador')
forEach()
Recorre cada elemento de una Matriz.
forEach(function (item, index){});
replace
Remplaza elementos dentro de una cadena.
text.replace("esto", "por esto otro");
Otra manera de asignar valores a una matriz es directamente listarlo, separado por coma (,) al definir la función array().
Ejemplo:
<script>
function matrices(){
let arreglo= new Array("uno","dos","tres","cuatro");
arreglo.sort();
for(i in arreglo){
document.write(arreglo[i] + "<br>");
}
}
</script>
</head>
<body onload="matrices()">
En este ejemplo estamos usando una variación de bucle for donde se asigna a la variable i el index de cada elemento del Array en cada ciclo. Este tipo de variación al bucle for se ocupa sobre todo cuando sabemos que el indice de nuestro Array puede que no sea secuencial.
Ejemplo:
<script>
function matrices(){
let arreglo= new Array();
arreglo[0]="manzana";
arreglo[3]="pera";
arreglo[5]="platanos";
for(i in arreglo){
document.write(arreglo[i] + "<br>");
}
}
</script>
</head>
<body onload="matrices()">
Si por el contrario, lo que queremos es tomar los valores de la matriz, se puede usar la variación of en el mismo for.
Ejemplo:
<script>
function matrices(){
let arreglo= new Array();
arreglo[0]="manzana";
arreglo[3]="pera";
arreglo[5]="platanos";
for(i of arreglo){
document.write(i + "<br>");
}
}
</script>
</head>
<body onload="matrices()">
Otra manera de generar directamente un objeto Array es asignarlo los valores dentro los corchetes cuadrados ([ ]).
En este ejemplo estamos usando una tercera manera de hacer bucles, específicamente diseñada para trabajar con Arrays: forEach(). Este método recorre cada elemento de la matriz asignando el índice y el valor a las variables item y index de la función.
Ejercicio:
De la siguiente matriz de frutas escribir en el documento cuál es la palabra más larga y cuántos caracteres tiene. Array("Manzanas","Peras","Sandías","Platanos","Guanábana","Uvas").
Utilizando una ventana de prompt() solicitar un texto y contar la cantidad de palabras que lo componen. Si es menor a 10 palabras, alertar que son muy pocas y volver a solicitar un texto. Si es mayor, escribir en el documento las palabras por separado que componen el texto y contar sus caracteres.
Objetos
Ya vimos que los Arrays son objetos que contienen multiples valores asociados a un contenedor, pero su uso está amarrado a la posición, no siempre controlable, dentro de ella. En esa necesidad aprecen los Objects en javascript que abren la puerta de la programación orientada a los objetos.
Construcción y uso de objetos
Un objeto es una "matriz" donde su posición o "key" es controlable, por eso siempre vamos a tener una estructura del tipo name:value, pero además, con muchas más ventajas que sólo eso, como métodos propios y funciones.
Ejemplo:
let alumno=new Object;
alumno.nombre="Caperucita Roja";
alumno.apellido="de Feroz";
console.log(alumno);
Nota: console.log() es una buena manera de ver los contenidos de una variable en el inspector del browser.
Todo el proceso anterior se puede hacer directamente usando el alias de creación de objetos con los corchetes ({ }) y pasarle el contenedor y valor en la pasada.
Ejemplo:
let alumno={nombre:"Caperucita Roja"};
Si queremos múltiples valores ordenados, separamos cada uno de los valores con una coma (,).
Ejemplo:
let alumno={nombre:"Caperucita Roja", apellido:"de Feroz",email:"caperucita@deferoz.cl",edad:33};
Ahora la variable alumno contiene campos que podemos usar para trabajar con su valor.
Ejemplo:
let alumno={
nombre:"Caperucita Roja",
apellido:"de Feroz",
email:"caperucita@deferoz.cl",
edad:33
};
document.write(alumno["nombre"]);
El ejemplo anterior escribe en el documento el valor de la variable alumno en su posición "nombre".
Como es un objeto tambien podemos usarlo por sus métodos o poropiedades con la notiación javascript de anidado con el punto (.).
Ejemplo:
let alumno={
nombre:"Caperucita Roja",
apellido:"de Feroz",
email:"caperucita@deferoz.cl",
edad:33
};
document.write(alumno.nombre);
Dentro de un objeto puede haber otros objetos como valor y su uso es concatenando la ruta completa hasta el valor que se necesita.
Ejemplo:
let alumno={
nombre:"Caperucita Roja",
apellido:"de Feroz",
email:"caperucita@deferoz.cl",
edad:33,
notas:{
historia:6,
matematicas:7,
ciencias:6
}
};
document.write(alumno.nombre+" "+ alumno.apellido +" se ha sacado un "+ alumno.notas.matematicas + " en matemáticas." );
Así como pueden haber objetos, tambien puede haber matrices dentro de un objejto.
Ejemplo:
let alumno={
nombre:"Caperucita Roja",
apellido:"de Feroz",
email:"caperucita@deferoz.cl",
edad:33,
cursos:[
"historia",
"matematicas",
"ciencias"
]
};
document.write(alumno.nombre+" "+ alumno.apellido +" está registrado en el curso "+ alumno.cursos[0] + "." );
En el ejemplo anterior, podemos hablar con la propiedad cursos y especificar la posición para mostrar el valor (alumno.cursos[0]).
Un elemento interesante de los objetos es que se pueden crear funciones dentro del objeto o métodos propios para que procese información y mostrar su valor.
Ejemplo:
let alumno={
nombre:"Caperucita Roja",
apellido:"de Feroz",
email:"caperucita@deferoz.cl",
edad:33,
notas:{
historia:6,
matematicas:7,
ciencias:6
},
nombreCompleto: function(){
return this.nombre + " " + this.apellido;
}
};
document.write(alumno.nombreCompleto() +" se ha sacado un "+ alumno.notas.matematicas + " en matemáticas." );
En el caso anterior, como queremos mostrar el valor de la función nombreCompleto() del objeto, tenemos que poner los paréntesis.
Por último, así como podemos poner matrices como valor de un objeto, también podemos poner varios objetos como varlos de una matriz para alimentar estructuras dentro de la página web.
En este ejemplo, aprovechamos el forEach() para recorrer los elementos de la matriz y construir una tabla html con los datos de los objetos que lo componen. Este es el primer paso para poder entender JSON como formato de intercambio.
Ejercicio:
Alimentar un menú desplegable (<select>) en un documento html desde un objeto con las regiones de Chile.
Browser Object Model (BOM)
Objetivo del capítulo:
Conocer y entender los objetos de entorno del Browser.
Al abrir una página Web en el browser automáticamente se generan una serie de objetos propios del navegador a los cuales el programador puede tener acceso desde JavaScript. A esto se le llama BOM (Browser Object Model) o Modelo de Objetos de un Browser.
A través de este modelo o acceso a estructura de los objetos, no solo podemos acceder a la información que contiene, si no que además podemos alterarlo en la mayor parte de los casos.
Screen
Este objeto devuelve información con respecto a la tarjeta de video que ocupa el usuario y su configuración. Los valores pueden ser usados, pero no modificados.
Método
Descripción
Sintaxis
height
Altura de la pantalla.
var=screen.height
width
Ancho de la pantalla.
var=screen.width
colorDepth
Los colores en pantalla.
var=screen.colorDepth
pixelDepth
Devuelve la resolución de color (en bits por píxel) de la pantalla
var=screen.pixelDepth
availHeight
Altura de la pantalla sin los taskbar
var=screen.availHeight
availWidth
Ancho de la pantalla sin los taskbar
var=screen.availWidth
Nota:
Estos parámetros se pueden consultar, pero no se pueden modificar.
<script>
function resol(){
let ancho=screen.width;
let alto=screen.height;
if(ancho<1800 && alto<1600){
alert("Aumentar Resolución a 1800x1600");
document.write("Aumente la Resolución");
}
}
</script>
Navigator
Este objeto contiene la información del browser de navegación. A diferencia de los otros objetos, el navigator no permite la modificación de sus parámetros, solamente la visualización.
Método
Descripción
Sintaxis
appCodeName
Devuelve el nombre código del navegador
appName
Devuelve el Nombre del navegador.
var=navigator.appName;
appVersion
Devuelve la Versión.
var=navigator.appVersion;
language
Código del Lenguaje.
var=navigator.language;
platform
Plataforma de trabajo.
var=navigator.platform;
cpuClass
Tipo de microprocesador.
var=navigator.cpuClass;
connectionSpeed
Velocidad de conexión.
var=navigator.connectionSpeed;
cookieEnabled
Determina si las cookies están habilitadas en su navegador
var=navigator.cookieEnabled
geolocation
Devuelve un objeto Geolocalización que se puede utilizar para localizar la posición del usuario
var=navigator.geolocation
onLine
Determina si el navegador está en línea
var=navigator.onLine
product
Devuelve el nombre del motor del navegador
var=navigator.product
userAgent
Devuelve el encabezado de agente de usuario enviado por el navegador al servidor
var=navigator.userAgent
Ejemplo:
<script>
document.writeln("<pre>Nombre código del navegador: " + navigator.appCodeName);
document.writeln("Nombre del navegador: " + navigator.appName);
document.writeln("Versión del navegador: " + navigator.appVersion);
document.writeln("Idioma: " + navigator.language);
document.writeln("Plataforma: " + navigator.platform);
document.writeln("Procesador: " + navigator.cpuClass);
document.writeln("Velocidad de conexión: " + navigator.connectionSpeed);
document.writeln("Estado de las cookies: " + navigator.cookieEnabled);
document.writeln("Geolocalisación: " + navigator.geolocation);
document.writeln("Estado conexión: " + navigator.onLine);
document.writeln("Motor del navegador: " + navigator.product);
document.writeln("Identificación del navegador: " + navigator.userAgent);
</script>
Window
Este objeto tiene información y control sobre las ventanas del browser, entre otras cosas tenemos acceso a las ventanas de sistema, al motor de impresión, a la ubicación y el historial.
Ventana de sistema
Método
Descripción
sintáxis
alert
Abre ventanas alert.
var.alert(datos);
confirm
Abre ventanas confirm.
var.confirm(datos);
prompt
Abre ventanas prompt.
var.prompt(datos[,"valor inicial"]);
Ejemplo:
<a href="http://js.luisfel.com" target="_blank" onClick="return confirm('¿está seguro que quiere ir a ver esta página?')">Manual de JS</a>
Define o devuelve la parte del anclaje (#) de una dirección URL
host
Define o devuelve el
hostname
Define o devuelve el hostname de la URL
href
Define o devuelve la URL
origin
Devuelve protocolo, hostname y el puerto de una URL
pathname
Define o devuelve la ruta de la URL
port
Define o devuelve el puerto de la URL
protocol
Define o devuelve el protocolo URL
search
Define o devuelve el query de la URL
Ejemplo:
<script>
document.writeln("<pre>URL: " + window.location);
document.writeln("Punto de anclaje de la URL: " + window.location.hash);
document.writeln("Host de la URL: " + window.location.host);
document.writeln("Servidor: " + window.location.hostname);
document.writeln("URL: " + window.location.href);
document.writeln("Protocolo: " + window.location.origin);
document.writeln("Ruta: " + window.location.pathname);
document.writeln("Puerto: " + window.location.port);
document.writeln("Protocolo: " + window.location.protocol);
document.writeln("Query: " + window.location.search+'</pre>');
</script>
otro ejemplo
Ejemplo:
<script>
function ir(){
window.location="prb.html";
}
</script>
<button onClick="ir()">ver nueva pagina</button>
Historial de navegación
Cada vez que navegamos con el browser, se lleva un registro histórico de las páginas visitadas por sesión. A esto se puede acceder con el objeto history.
Método
Descripción
Sintaxis
back()
Vuelve a la página anterior.
window.history.back();
forward()
Nos lleva a la página siguiente.
window.history.forward();
go(valor)
Van donde le indique el número. Este puede ser:
-1 como back.
window.history.go(valor);
num lleva a pag X
1 como forward
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Navegar por el historial</title>
</head>
<body>
<button onclick="window.history.back()">atrás</button>
<button onclick="window.history.forward()">adelante</button>
</body>
</html>
Eventos de tiempo
Método
Descripción
setInterval()
Llama a una función o una expresión y evalúa a intervalos especificados (en milisegundos)
setTimeout()
Llama a una función o evalúa una expresión después de un número especificado de milisegundos
clearInterval()
Borra un temporizador establecido con setInterval()
clearTimeout()
Borra un temporizador establecido con setTimeout ()
Ejemplo:
<script>
function saludar() {
alert('Hola Mundo!');
}
setTimeout(saludar, 1000);
</script>
En este ejemplo la página espera 1 segundo después de que cargue y levanta una ventana de alerta con el saludo.
Ejemplo:
<script>
function saludar() {
alert('Hola Mundo!');
}
window.setInterval(saludar, 1000);
</script>
En este ejemplo, la misma ventana se levanta cada segundo. La diferencia es que éste es repetitivo.
Ejemplo:
<script>
let vueltas=0;
function saludar() {
alert('Hola Mundo!');
if(vueltas++ > 5){
window.clearInterval(loop);
}
}
let loop=window.setInterval(saludar, 2000);
</script>
En este ejemplo, la misma ventana se leventa 5 veces, cada 2 segundos y después muere la iteración.
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Reloj</title>
<script>
let myVar = setInterval(function(){ reloj() }, 1000);
function reloj() {
let d = new Date();
let t = d.toLocaleTimeString();
document.getElementById("hora").innerHTML = t;
}
</script>
</head>
<body>
<h1 id="hora"></h1>
</body>
</html>
Nueva ventana
Método
Descripción
sintáxis
open
Abrir ventanas.
var=window.open("url","nombre","atributos");
close
Cerrar ventanas.
var.close();
opener
Indica si se abrio.
var_boolean=var.opener
SI devuelve true
closed
Indica si se cerró.
var_boolean=var.closed
SI devuelve false
Atributos de open (atrbs)
atributo
elemento
toolbar=[yes|no]
Barra de herramientas.
location=[yes|no]
Barra de direcciones.
directories=[yes|no]
Histórico.
channelmode=[yes|no]
Barra de canales.
menubar=[yes|no]
Barra de menús.
status=[yes|no]
Barra de estado.
scrollbars=[yes|no]
Barras de Scroll.
resizable=[yes|no]
Dimensionable.
width=pixels
Ancho de ventana.
height=pixels
Alto de ventana.
fullscreen=[yes|no]
Maximizada.
top=pixels
Posición superior.
left=pixels
Posición izquierda
Nota:
Todos los atributos que se pongan irán dentro de las comillas y separados por una coma entres ellos. Todos ellos son opcionales.
Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
let v1;
function abreVentana(){
v1=window.open("prb.html","ventanaNueva", "status=yes,resizable=yes,width=100,height=100");
}
function cierraVentana(){
v1.close();
}
</script>
</head>
<body>
<input type="button" name="abrir" id="abrir" value="abrir" onclick="abreVentana()" />
<input type="button" name="cerrar" id="cerrar" value="cerrar" onclick="cierraVentana()" />
</body>
</html>
Ejercicio:
Desarrollar 3 páginas Web: La primera página levanta por vínculo una ventana pop-up con el segundo archivo como contenido de 1/4 del tamaño de la pantalla centrada con respecto al tamaño del monitor. A los 3 segundos cierra la ventana y re-direcciona el primer archivo a la tercera página.
Document Object Model (DOM)
Objetivo del capítulo:
Conocer y entender los objetos de entorno de un documento HTML y su manipulación.
Este objeto administra el contenido de un documento y sus propiedades HTML.
Control general
Una de las cosas que podemos hacer es afectar la estructura y presentación de un documento HTML, afectando el BODY del mismo.
En el ejemplo de cambio de color de fondo y texto del manual, evite que se repita el color de fondo con el mismo color de texto cuando cualquiera de las opciones se seleccione para que el texto no se oculte.
Selección de elementos
Tal vez lo más importante del trabajo con el DOM es la capacidad de buscar uno o varios elementos, ya sea para consultar su contenido o cambiarlo.
Método
Descripción
document.getElementById()
Encuentra un elemento por su ID
document.getElementsByTagName()
Encuentra elementos pos su etiqueta
document.getElementsByClassName()
Encuentra elementos pos su clase
Veamos algunos ejemplos de como se puede aplicar para este método del document:
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nombre</title>
<script>
function leerNombre(){
let nombre = document.getElementById('nombre');
alert(nombre.value);
}
function cambiarNombre(){
let nombre = document.getElementById('nombre');
nombre.value="Nuevo nombre";
}
</script>
</head>
<body>
<input type="text" name="nombre" id="nombre" placeholder="escriba aqui su nombre"><br>
<button onClick="leerNombre()">leer el nombre</button>
<button onClick="cambiarNombre()">cambiar el nombre</button>
</body>
</html>
En este caso, el primer botón gatilla la función que busca el objeto "nombre" por su ID dentro del documento y después alimenta una ventana de alerta con el valor de ese objeto.
El segundo botón, agregar el valor "Nuevo nombre" dentro del objeto con el ID "nombre"
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nombre</title>
<script>
function mostrarParrafo(){
let x = document.getElementsByTagName("P");
alert(x[1].innerHTML);
}
</script>
</head>
<body>
<h1> título</h1>
<p> primer párrafo</p>
<p> segundo párrafo</p>
<p> tercer párrafo</p>
<button onClick="mostrarParrafo()">mostrar párrafo</button>
</body>
</html>
En este otro ejemplo, mete en la variable x todos los objetos párrafos que hay en la página y después muestra el que está en segunda posición del arreglo.
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Nombre</title>
<script>
function mostrarParrafo(){
let x = document.getElementsByClassName("destacado");
for(i = 0; i < x.length; i++){
alert(x[i].innerHTML);
}
}
</script>
</head>
<body>
<h1 class="destacado"> título</h1>
<p> primer párrafo</p>
<p> segundo párrafo</p>
<p class="destacado"> tercer párrafo</p>
<button onClick="mostrarParrafo()">mostrar párrafo</button>
</body>
</html>
Este ejemplo busca todos los objetos dentro del documento que tienen la clase "destacado" y los va mostrando dentro del bucle.
Ejercicio:
Construir un formulario con método GET que tenga un campo de texto para solicitar un email. Vía JS, validar la estructura del contenido de éste input y revisar si es un email válido. Si no es válido, deberá advertir que no es un email válido e interrumpir el proceso de envío del formulario.
Cambiar elementos HTML
Método
Descripción
innerHTML
Define o devuelve el contenido del elemento seleccionado.
innerText
Define o devuelve el texto del elemento seleccionado.
getAttribute
Devuelve el atributo de un elemento HTML
setAttribute(attribute,value)
Define el atributo de un elemento HTML
style
Define o devuelve el estilo de un elemento HTML.
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Cambiar párrafo</title>
</head>
<body>
<p id="demo" onclick="cambiarParrafo()">Seleccioname para cambiar el contenido del párrafo (innerHTML).</p>
<script>
function cambiarParrafo() {
document.getElementById("demo").innerHTML = "Párrafo cambiado!";
}
</script>
</body>
</html>
En este caso el contenido del párrafo cambia por el texto "Párrafo cambiado!" cuando es seleccionado.
Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function cambiarParrafo(){
let x = document.getElementsByTagName("P");
for(i = 0; i < x.length; i++){
x[i].style.backgroundColor="#f00";
x[i].style.color="#fff";
}
}
</script>
</head>
<body>
<h1 class="destacado"> título</h1>
<p> primer párrafo</p>
<p> segundo párrafo</p>
<p class="destacado"> tercer párrafo</p>
<button onClick="cambiarParrafo()">mostrar párrafo</button>
</body>
</html>
En este ejemplo buscamos todos los párrafos y le agregamos un estilo de color de fondo rojo y texto color blanco para destacarlo.
Ejercicio:
Confesionario virtual:
Utilizando un formulario que pida: Nombre, edad, ciudad y pecado digital (copy/paste sin leer, hackear la cuenta del pololo/a, crackear software propietario, ataque DOS, Formatear sin respaldar, etc), escribir en el documento la penitencia personalizada en base a una matriz predefinida sin enviar los datos al submit.
Observador
Los observadores son la forma no obstruptiva de asignar una acción a un objeto de la página generando un "escuchador" u observador de objeto. addEventListener() genera un espacio en memoria activa que está viendo y esperando que se realice un evento asociado al elemento "monitoreado".
Esta programación dejó un observador hacia el botón "demo" para cuando se haga "click" en él, registre en párrafo "demo" el texto "Hola Mundo!"
Nota:
Para los browser obsoletos (IE8 o menor) se usaba la función: attachEvent(), detachEvent()
Ejercicio:
Utilizando observadores, alimentar dinámicamente, desde un formulario, con opciones y campos libres, el sujeto, los verbos, los adjetivos calificativos, el sustantivo y la idea de la oración presente en el documento: "Juan se sentía solo, volvía a su departamento, y el silencio era el único que lo esperaba. Juan estaba triste, Juan estaba solo, muy solo. Y Juan tuvo una brillante idea:"
Material de apoyo recomendado
Bibliografía
JAVASCRIPT: GUIA DE APRENDIZAJE
DORI SMITH; TOM NEGRINO
PEARSON EDUCACION
Professional JavaScript for Web Developers
Nicholas C. Zakas
JavaScript: The Definitive Guide
David Flanagan
O'Reilly Media
JavaScript: The Good Parts
Douglas Crockford
O'Reilly Media / Yahoo Press
Aprender Javascript Avanzado con 100 ejercicios prácticos
MEDIAactive
Javascript 
