E4 Front End
E4 Front End
E4 Front End
Lectura Fundamental
El Lenguaje JavaScript
Contenido
1 JavaScript 1
2 Tipos de Datos 1
3 Funciones 10
Palabras Claves: JavaScript, programación del lado del cliente, JavaScript plano
Como hemos mencionado anteriormente la construcción de páginas Web involucra especificar los elementos,
componentes visuales que harán parte de la página, su contenido, a través del lenguaje HTML. También es posible
describir el aspecto de estos componentes, diseño, por medio de la definición de hojas de estilo CSS (Cascading
Style Sheets) y es posible agregar funcionalidad a los elementos por medio del lenguaje JavaScript.
1. JavaScript
En JavaScript las variable son no tipadas, esto significa que no se especifica el tipo de dato que la variable va a
contener y que es posible asignar valores de distintos tipos en cualquier momento a la variable.(No se si esto sea
importante)
JavaScript es un lenguaje de programación multiparadigma el cuál soporta los paradigmas orientados a objetos
y además es un lenguaje de programación interpretado, es decir, que el lenguaje es capaz de analizar y ejecutar
otros programas, un lenguaje interpretado solo realiza la traducción a medida de que sea necesario, instrucción por
instrucción a diferencia de los lenguajes compiladores o ensambladores. JavaScript se define como un lenguaje de
programación orientado a objetos basado en prototipos o basado en instancias, imperativo el cuál es un conjunto de
instrucciones que indican al computador cómo realizar las tareas, tal cómo se mencionó anteriormente. JavaScript
se utiliza principalmente del lado del cliente, es decir, se ejecuta el programa en el ordenador, no en el servidor
permitiendo una creación más dinámica en las páginas web. JavaScript es el lenguaje más popular en la web
utilizando código abierto, aunque los navegadores web son el principal uso para JavaScript, también es útil para
bases de datos modernas como CouchDB, MongoDB. El lenguaje permite un fácil manejo para el desarrollador, ya
que no necesariamente se necesita un extenso conocimiento.
2. Tipos de Datos
Los tipos de datos en JavaScript se pueden clasificar en primitivos y objeto. Los tipos primitivos incluyen:
• números;
• cadenas, y
• booleanos.
POLITÉCNICO GRANCOLOMBIANO 1
2.1. Númericos
Todos los números en JavaScript son representados como valores de punto flotante, por tal razón dentro del
lenguaje no hay distinción entre tipos enteros y los tipos flotantes que son aproximaciones a los números reales.
Cada número es almacenado utilizando 64 bits cuya representación está definida por el estándar IEEE 754, que es
el mismo formato utilizado para representar valores de tipo double en Java.
Los valores numéricos pueden especificarse de distintas maneras, como literales enteros base 10:
Estos dos valores son el entero más pequeño y el más grande que se puede representar de manera exacta, es decir,
sin pérdida de precisión. Esto se debe a que según el estándar IEEE 754 se utilizan como máximo 53 bit para la
parte entera.
Otra posibilidad para valores númericos es utilizar Los literales enteros base 16:
Como se puede observar, se admite que los dı́gitos hexadecimales letras y la letra ‘X’ vayan en minúsculas.
En caso de especificar valores de punto flotante, se puede utilizar la notación tradicional para representar valores
reales que incluye el punto decimal, ası́:
3.141592653589793 // El valor de π
2.718281828459045 // El valor de
Un manera más para especificar valores de punto flotante es utilizar la notación exponencial:
Los números entran dentro del tipo de datos que son inmutables en JavaScript, esto es, que su valor no puede
cambiar una vez creado.
POLITÉCNICO GRANCOLOMBIANO 2
2.2. Cadenas
Las cadenas (strings) en JavaScript son secuencias de sı́mbolos. Cada uno de los sı́mbolos es almacenado en 16 bits
y su valor representa un sı́mbolo Unicode, esto último permite poder representar un amplio conjunto de sı́mbolos y
no únicamente el tradicional conjunto de sı́mbolos ASCII.
Las cadenas al igual que los números son valores que no pueden cambiar. A pesar que las cadenas suelen ser
consideradas como arreglos de sı́mbolos, no hay un tipo de dato para representar un único sı́mbolo como suele
suceder en otros lenguajes como C y Java.
Para definir una cadena basta con delimitarla con un sı́mbolo comilla sencilla (’) o comilla doble (") en cada
extremo. Ası́, ejemplos de literales de cadenas son:
Es posible llevar a cabo la concatenación de dos o más cadenas a través del operador +. Note que este mismo
operador se utiliza para realizar la operación de la suma, sin embargo, cuando es aplicado a cadenas se interpreta
como el operador de concatenación.
Otras de las posibilidades que brindan las cadenas es la de obtener su longitud. Para ello accedemos a la propiedad
length de las cadenas a través del operador punto (.). Por ejemplo:
Adicionalmente a la propiedad length, las cadenas tienen un amplio conjunto de métodos que permiten realizar
operaciones comunes con cadenas.
2.3. Booleanos
Como en otros lenguajes de programación, los valores booleanos, se utilizan para representar un valor de verdad
el cual puede ser falso o verdadero. El lenguaje JavaScript define dos palabras reservadas: true y false que
constituyen los dos valores para este tipo.
Comúnmente las expresiones de tipo booleano, es decir, aquellas que al ser evaluadas resultan en alguno de los
valores true o false son utilizadas en la definición de estructuras de control de flujo como if o while.
Una de las caracterı́sticas del lenguaje JavaScript es la conversión tipos, lo que permite que valores de otros tipos
distintos a los booleanos puedan ser convertidos valores booleanos.
Por ejemplo, cualquier valor numérico distinto de 0 y NaN es equivalente a true. El siguiente código imprimirá el
POLITÉCNICO GRANCOLOMBIANO 3
mensaje en consola dado que no es 0 ni NaN.
if (1) {
console.log("It's true");
}
Una situación similar ocurre con las cadenas, en donde cualquier cadena distinta a la cadena vacı́a es considerada
como true, incluso las siguientes:
Por medio de los literales booleanos o variables con valores este tipo es posible invocar el método toString el cual
devuelve una cadena que representa dicho valor.
Las operaciones que se pueden llevar a cabo sobre valores booleanos son: la operación AND y OR.
El operador && corresponde a la operación AND y el operador && corresponde a la operación OR.
La siguiente es una expresión booleana que evalúa a true si el valor de la variable anio representa un año bisiesto.
2.4. Objetos
Un objeto en JavaScript es una colección no ordenada de propiedades, parejas nombre-valor, cuyos nombres son
identificadores y sus valores pueden ser de tipos primitivos u otros objetos. Todo objeto es miembro del tipo de
dato fundamental object.
JavaScript difiere de otros lenguajes de programación orientados a objetos como Java, debido a que la herencia no
se realiza extendiendo clases sino a través de prototipos, en este caso un objeto puede heredar las propiedades de
otro objeto, esto se conoce como herencia de prototipos.
Un literal de objeto es una lista separada por comas de parejas nombre-valor encerradas en llaves. El siguiente
es un ejemplo de literal de objeto:
POLITÉCNICO GRANCOLOMBIANO 4
var persona = {
'id': 1, // los nombres son cadenas
"nombre": 'David',
apellido: 'Rodrı́guez',
direccion: { // los valores pueden ser objetos
tipoVia: 'CL',
numeroVia: 57,
cuadrante: 'ESTE',
viaGeneradora: 0,
}
};
En este ejemplo el objeto tiene cuatro propiedades id, nombre, apellido y direccion. Las propiedades nombre
y apellidos son cadenas, id es numérico y direccion es objeto. Note que los nombres de las propiedades son
cadenas, de manera opcional pueden estar encerradas por comillas, sin embargo, si el nombre incluye un espacio
el uso de las comillas es obligatorio: {'num elemens': 4}. Es aconsejable que los nombres de los atributos sean
definidos bajo las mismas reglas que los identificadores de variables dado que esto hará más fácil acceder a sus
valores.
Para acceder al valor de una propiedad se utiliza el identificador del objeto, seguido del operador punto, seguido del
nombre de la propiedad, por ejemplo: person.nombre. En caso que el nombre de la propiedad incluya un espacio,
como ’num elemns’, no se podrá acceder utilizando el punto debido a que tratar de accederlo de esa manera
generará un error de sintaxis. Aún ası́ se podrá acceder a dicho valor utilizando corchetes de la siguiente manera:
En caso que al intentar acceder a una propiedad de un objeto se especifique un nombre de una propiedad que no
existe la expresión evaluará a undefined. Note que esto no genera un error de ejecución:
Aunque intentar acceder a una propiedad que no existe no genera un error de ejecución, intentar acceder a una
propiedad utilizando una variable cuyo valor es undefined genera una excepción de tipo TypeError, por ejemplo:
POLITÉCNICO GRANCOLOMBIANO 5
var person = {
identificacion: {
tipo: 'CC',
numero: '1010101010'
}
};
// person.id evaluará a undefined, la propiedad id no existe
var cedula = person.id.numero; // provoca TypeError
Sabiendo ya como acceder a las propiedades de un objeto es posible utilizar el operador de asignación (=) para
reasignar un valor que puede ser el resultado de una expresión o simplemente un valor literal.
miObjeto['num elems'] = 3;
person.nombre = 'Andrés';
En JavaScript las clases están basadas en el mecanismo de herencia de prototipos. Cuando dos objetos heredan
propiedades del mismo objeto prototipo.
2.5. Arreglos
Los arreglos en JavaScript son colecciones ordenadas o secuencias de elementos. Toda la colección es referenciada por
medio de un identificador y cada uno de los elementos de la colección puede ser accedido a través del identificador
del arreglo y un ı́ndice numérico basado en 0, posición en que fue almacenado el elemento dentro del arreglo. El
hecho de que los ı́ndices de los arreglos sean basados en 0 significa que el menor ı́ndice válido es el 0, y que al crear
una arreglo de n elementos sin especificar sus ı́ndices, estos valores serán asignados a los primeros n ı́ndices enteros
a partir del número 0 y con su último ı́ndice n − 1. Los ı́ndices en los arreglos son enteros positivos o cero de 32
bits lo que significa que el ı́ndice máximo válido es 232 − 2 = 4294967294.
A diferencia de otros lenguajes como C/C++ y Java, los arreglos en JavaScript son dinámicos, esto significa
que pueden crecer o acortase en tamaño, además difieren en que los elementos no necesariamente se almacenan
contiguamente, por ejemplo, un arreglo podrı́a tener elementos cuyos ı́ndices 0, 2 y 3, y no tener elemento ubicado
en la posición 1.
Crear un arreglo, si se conocen previamente los elementos y el orden en que deben ser almacenados, puede hacerse
siguiendo la sintaxis definida para literales de arreglos, en donde los elementos del arreglo se listan separados por
comas y se encierran dentro de corchetes cuadrados. Esta sintaxis difiere de la utilizada en Java en la que se utiliza
llaves ({}) en lugar de corchetes. Por otra parte el acceso a los elementos se realiza de la misma manera que en
Java y se hace especificando el ı́ndice del elemento a acceder dentro del operador ([]). Un ejemplo de la creación
de un arreglo y el acceso a algunos de sus elementos es el siguiente:
POLITÉCNICO GRANCOLOMBIANO 6
// un arreglo vacı́o
var arregloVacio = [];
Los arreglos pueden contener valores de distintos tipos y no es necesario que sean constantes, pueden ser expresiones,
incluso pueden ser omitidos lo que resultarı́a en la asignación del valor undefined en esa posición:
Otra manera de crear arreglos es por medio del constructor Array. Este constructor puede recibir una cantidad
variable de argumentos. Invocarlo sin argumentos creará un arreglo vacı́o, con un argumento entero creará un
arreglo con esa cantidad de elementos undefined y con más de un elemento creará un arreglo que contendrá los
argumentos pasados al constructor en ese mismo orden.
// un arreglo vacı́o
var a = new Array();
Los arreglos son un tipo especial de objetos con tantas propiedades como elementos, más las propiedades length y
proto . JavaScript crea una propiedad por cada elemento de un arreglo en donde el ı́ndice del elemento lo vuelve
cadena y es el nombre de la propiedad, a su vez el elemento es el correspondiente valor de dicha propiedad.
Una vez creado un arreglo este puede crecer dinámicamente, esto significa que se puede agregar más elementos.
Para ello basta con asignar un valor a la posición en el arreglo. Por ejemplo:
POLITÉCNICO GRANCOLOMBIANO 7
Ası́ este arreglo lucirá:
[ 2, 3, , , , 4 ]
Para agregar elementos al final de un arreglo, es decir, en la siguiente posición válida no utilizada, no es necesario
conocer el ı́ndice, aunque, no es algo complicado de hacer, si todos elementos están siendo referenciados con números,
bastarı́a con acceder a la propiedad length del arreglo. El método Array.push() definido para arreglos permite
agregar un nuevo elemento. Si se desean agregar varios elementos al mismo tiempo es posible dado que el método
recibe múltiples argumentos.
Dado que los arreglos son dinámicos, es posible modificar su longitud, en caso de reducir la longitud estarı́amos
hablando de la eliminación de algunos elementos. En el siguiente código se modifica la propiedad length de un
arreglo luego de crearlo lo cual provocará la eliminación de algunos de sus elementos.
a = [];
a.push(1, 4, 9, 16, 25, 36); // agrega 6 elementos al arreglo
a.length = 4; // producirá la eliminación de los elementos 25 y 36
// el arreglo resultante es [1, 4, 9, 16]
El operador delete permite eliminar un elemento de un arreglo. Eliminar un elemento es equivalente a asignar
undefined en la posición de dicho elemento, esto significa que su longitud no varı́a.
Para recorrer un arreglo se suele utilizar un ciclo for. En el siguiente ejemplo deseamos sumar los valores
contenidos en un arreglo.
POLITÉCNICO GRANCOLOMBIANO 8
sum += impares[i];
}
// sum tendrá el valor 25
Por la manera como fue construido el arreglo impares sabemos que los ı́ndices de sus elementos inician en 0 y van
hasta impares.length-1. Por tal razón podemos utilizar la versión tradicional del ciclo for para iterar sobre el
arreglo. Sin embargo, es posible que en algún momento algunos de los elementos del arreglo hayan sido eliminados
con el operador delete y al utilizar el mismo método para iterar sobre los elementos del arreglo producirá que
algunos de los accesos impares[i] devuelvan el valor undefined el cual al ser sumado a la variable sum producirá
el valor NaN, un valor representativo que suele ser devuelto por algunas operaciones aritméticas cuando está definido
su resultado, por ejemplo cuando se evalúa la expresión 0/0.
Para poder sumar únicamente los valores que no han sido eliminados en el arreglo, en este caso 1, 5 y 9, podemos
utilizar el método Object.keys() el cual recibe como argumento un arreglo y retorna los ı́ndices de los elementos
en el arreglo, exceptuando aquellos que hayan sido eliminados a través del operador delete. A partir de esto
podemos iterar sobre el arreglo utilizando el arreglo de llaves (ı́ndices), de la siguiente manera:
Una manera alternativa para recorrer un arreglo disperso, como lo es el arreglo impares en el ejemplo anterior, es
utilizar el ciclo for/in.
// el arreglo impares es [ 1, , 5, , 9 ]
var sum = 0;
POLITÉCNICO GRANCOLOMBIANO 9
// itera sobre las llaves del arreglo impares
for (var index in impares) {
sum += impares[index];
}
// sum tendrá el valor 15!
En cada iteración del ciclo index toma los valores de las llaves en el arreglo impares.
Existen varias funciones funciones útiles para trabajar con arreglos, todas ellas se encuentran definidas en
Arrays.prototype.
3. Funciones
Para definir funciones se utiliza la palabra clave function seguida de un identificador para la función (nombre),
un listado de identificadores de parámetros, separados por comas y delimitados por paréntesis, y por último los
sı́mbolos llaves con cero o más sentencias que son ejecutadas cuando la función es invocada.
El siguiente es un ejemplo de la definición de una función que recibe como argumento una cadena y retorna el valor
true si la cadena es palı́ndromo.
function isPalindrome(s) {
var is = true;
var n = s.length;
for (var i = 0, j = n-1; i < j && is; i++, j--) {
is = is && (s[i] == s[j]);
}
return is;
}
Una caracterı́stica interesante de las funciones es que pueden ser pasadas como argumentos a otras funciones por
ejemplo:
POLITÉCNICO GRANCOLOMBIANO 10
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
function operate(oper, a, b) {
return oper(a, b);
}
Código 1: Ejemplo del paso de una función como argumento a otra función.
De manera alternativa al uso del método operate() del código 1 es posible definir la función al mismo tiempo que
se está invocando la función, esto suele ser algo muy común al momento de definir manejadores de eventos.
operate(function(a, b) {
return a / b;
}, 12, 3); // devuelve 4
También es posible, hacer uso del operador arrow (=>), para reducir un poco el código de la definición de la función
pasada como argumento.
Al utilizar JavaScript dentro de una página es posible acceder al objeto window, este objeto representa la ventana o
marco (frame) en donde hemos situado nuestro código. Este objeto nos permite acceder a información acerca de la
ventana, definir manejadores de eventos e invocar útiles métodos.
• location: es la ubicación, URL de la ventana o marco. Modificar este valor implica que la ventana cargará
esta nueva ubicación.
POLITÉCNICO GRANCOLOMBIANO 11
Entre los métodos definidos para el objeto Window se encuentra el método alert(), el cual permite mostrar al
usuario un mensaje en una pequeña ventana que no desaparecerá hasta que el usuario haga clic sobre alguno de
sus botones. Este método, puede ser invocado sin la necesidad de utilizar el identificador window, gracias a que
este objeto es global, lo que implica que el objeto se encuentra disponible desde cualquier alcance con solo usar su
identificador.
Según lo anterior, si deseáramos mostrar al usuario el mensaje “Welcome to JavaScript”, bastarı́a únicamente con
invocar el método, sin utilizar el identificador window, pasando la cadena como argumento dentro de una página:
alert('Welcome to JavaScript');
Como también podrı́amos hacerlo por medio del identificador window, ası́:
window.alert('Welcome to JavaScript');
En cualquiera de los dos casos al invocarse estas sentencias observarı́amos un mensaje como el de la figura 1.
De manera similar a cómo incluimos archivos CSS en una página HTML, también es posible incluir código
JavaScript.
Una de las maneras para incluir código JavaScript dentro de una página es ubicando el código dentro de las etiquetas
<script></script>. Una vez el elemento sea cargado en la página, el código será ejecutado, por esta razón, se
sugiere ubicar el elemento script dentro del cuerpo de la página, esto es dentro de las etiquetas <body></body>,
pero como último elemento, sino se realiza una verificación de que todo el contenido de la página esté listo y
cargado.
En este ejemplo 2, el código JavaScript se encuentra en el mismo archivo que el código HTML y de ser posible
incluso, podrı́a haber también reglas CSS. Dado que los tres lenguajes definen aspectos de la página es recomendable
mantenerlos separados aunque trabajen para el mismo propósito. Otra de las maneras para incluir el código
JavaScript en una página, es poniendo el código en un archivo aparte y referenciándolo, utilizando nuevamente la
etiqueta <script> pero especificando el nombre del archivo por medio del atributo src. Un ejemplo de esto, se
puede observar en el código 3:
POLITÉCNICO GRANCOLOMBIANO 12
<!DOCTYPE html>
<html>
<head>
<title>An alert example</title>
</head>
<body>
<!-- another elements here -->
<script type="text/javascript" >
// JavaScript code here!
window.alert('Welcome to JavaScript');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>An alert example</title>
</head>
<body>
<script type="text/javascript" src="code.js" ></script>
</body>
</html>
Uno de los atributos más importantes que contiene el objeto Window es el atributo document el cual representa el
documento contenido en la ventana.
El objeto Document contiene métodos bastante útiles para acceder a los elementos de la página. Por ejemplo, uno
de ellos es el método getElementById() que permite buscar un elemento por su atributo id. El objeto devuelto
por este método es de tipo Element y por ende permite acceder a sus atributos y modificar sus comportamientos
por medio de los manejadores de eventos (event handlers).
Para finalizar
En esta lectura exploramos los conceptos básicos del lenguaje JavaScript de manera independiente del contexto,
para más adelante abordar la escritura de código JavaScript del lado del cliente, código que es ejecutado en el
navegador en el momento que se carga una página o interactúa con alguno de sus elementos.
POLITÉCNICO GRANCOLOMBIANO 13
Referencias
POLITÉCNICO GRANCOLOMBIANO 14
INFORMACIÓN TÉCNICA
POLITÉCNICO GRANCOLOMBIANO 15