JavaScript

Introducción a

Ing. Hector Estigarribia - FCT Unc@ 12/05/2014

1
¿Qué es JavaScript?
• JavaScript es un lenguaje de programación utilizado para
crear pequeños programitas encargados de realizar

12/05/2014
acciones dentro del ámbito de una página web dinámica.
• Una página web dinámica es aquella que incorpora

Ing. Hector Estigarribia - FCT Unc@

efectos, animaciones, acciones que se activan al pulsar
botones y ventanas con mensajes de aviso al usuario.
• JavaScript es un lenguaje de programación interpretado,
por lo que no es necesario compilar los programas para
ejecutarlos.
• El navegador del cliente es el encargado de interpretar
las instrucciones Javascript y ejecutarlas para realizar 2
estos efectos e interactividades.
¿Qué es JavaScript?
• A pesar de su nombre, JavaScript no guarda ninguna relación
directa con el lenguaje de programación Java. Legalmente,

12/05/2014
JavaScript es una marca registrada de la empresa Sun
Microsystems, como se puede ver en
http://www.sun.com/suntrademarks/.

Ing. Hector Estigarribia - FCT Unc@

3
Breve historia
• A principios de los años 90 empezaban a desarrollarse las
primeras aplicaciones web y por tanto, las páginas web

12/05/2014
comenzaban a incluir formularios complejos.
• Con unas aplicaciones web cada vez más complejas y una
velocidad de navegación tan lenta, surgió la necesidad de un

Ing. Hector Estigarribia - FCT Unc@

lenguaje de programación que se ejecutara en el navegador
del usuario.
• Brendan Eich, un programador que trabajaba en Netscape,
pensó que podría solucionar este problema…
• Curiosidad: es también uno de los
fundadores de Mozilla.
4
Breve historia
• Brendan Eich adaptó otras tecnologías existentes
(como ScriptEase) al navegador Netscape Navigator 2.0, que

12/05/2014
iba a lanzarse en 1995. Inicialmente, Eich denominó a su
lenguaje LiveScript.
• Posteriormente, Netscape firmó una alianza con Sun

Ing. Hector Estigarribia - FCT Unc@

Microsystems para el desarrollo del nuevo lenguaje de
programación.
• Justo antes del lanzamiento Netscape decidió cambiar el
nombre por el de JavaScript.
• La razón del cambio de nombre fue exclusivamente por
marketing, ya que Java era la palabra de moda en el mundo
informático y de Internet de la época. 5
Breve historia
• La primera versión de JavaScript fue un completo éxito y
Netscape Navigator 3.0 ya incorporaba la siguiente versión del

12/05/2014
lenguaje, la versión 1.1.
• Al mismo tiempo, Microsoft lanzó JScript con su navegador
Internet Explorer 3.

Ing. Hector Estigarribia - FCT Unc@

• JScript era una copia de JavaScript al que le cambiaron el
nombre para evitar problemas legales.

6
Breve Historia
• Para evitar una guerra de tecnologías, Netscape decidió que lo
mejor sería estandarizar el lenguaje JavaScript.

12/05/2014
• De esta forma, en 1997 se envió la especificación JavaScript
1.1 al organismo ECMA European Computer Manufacturers
Association).

Ing. Hector Estigarribia - FCT Unc@

• ECMA creó el comité TC39 con el objetivo de "estandarizar de
un lenguaje de script multiplataforma e independiente de
cualquier empresa".
• El primer estándar que creó el comité TC39 se
denominó ECMA-262, en el que se definió por primera vez el 7
lenguaje ECMAScript.
Breve Historia
• Por este motivo, algunos programadores prefieren la
denominación ECMAScript para referirse al lenguaje

12/05/2014
JavaScript.
• De hecho, JavaScript no es más que la implementación que
realizó la empresa Netscape del estándar ECMAScript.

Ing. Hector Estigarribia - FCT Unc@

• En Junio de 1997 se publicó la primera edición del estándar
ECMA-262.
• Un año después, en Junio de 1998 se realizaron pequeñas
modificaciones para adaptarlo al estandar ISO/IEC-16262 y se
creó la segunda edición.
• La tercera edición del estándar ECMA-262 (publicada en
Diciembre de 1999) es la versión que utilizan los navegadores 8
actuales.
Incluir JavaScript en documentos XHTML

En el mismo
documento

12/05/2014
XHTML

Ing. Hector Estigarribia - FCT Unc@

En un archivo
externo

En los
elementos
9
XHTML
Incluir JavaScript en el mismo
documento XHTML
• El código JavaScript se encierra entre etiquetas <script> y se incluye
en cualquier parte del documento. Aunque es correcto incluir
cualquier bloque de código en cualquier zona de la página, se

12/05/2014
recomienda definir el código JavaScript dentro de la cabecera del
documento (dentro de la etiqueta <head>):
<head>

Ing. Hector Estigarribia - FCT Unc@

<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Ejemplo de código JavaScript en el propio
documento</title>
<script type="text/javascript">
alert("Un mensaje de prueba");
</script>
</head> 10
Ejemplo
Definir JavaScript en un archivo
externo
• Las instrucciones JavaScript se pueden incluir en un archivo
externo de tipo JavaScript que los documentos XHTML enlazan

12/05/2014
mediante la etiqueta <script>.
• Se pueden crear todos los archivos JavaScript que sean
necesarios y cada documento XHTML puede enlazar tantos

Ing. Hector Estigarribia - FCT Unc@

archivos JavaScript como necesite.
<script type="text/javascript" src="js/codigo.js"></script>
• Archivo codigo.js:
alert("Un mensaje de prueba");

11
Ejemplo
Incluir JavaScript en los
elementos XHTML
• Este último método es el menos utilizado, ya que consiste en
incluir trozos de JavaScript dentro del código XHTML de la

12/05/2014
página:
<body>
<p>Haga click

Ing. Hector Estigarribia - FCT Unc@

<span onclick="alert('Un mensaje de prueba')">
acá.
</p> Ejemplo
</body>
El mayor inconveniente de este método es
que ensucia innecesariamente el código XHTML de la página y
complica el mantenimiento del código JavaScript. En general,
este método sólo se utiliza para definir algunos eventos y en 12
algunos otros casos especiales, como se verá más adelante.
Etiqueta noscript
• El lenguaje HTML define la etiqueta <noscript> para mostrar un
mensaje al usuario cuando su navegador no puede ejecutar
JavaScript o no lo tiene activado.

12/05/2014
<body>
<noscript>

Ing. Hector Estigarribia - FCT Unc@

<p>Bienvenido a Mi Sitio</p>
<p>La página que estás viendo requiere para su
funcionamiento el uso de JavaScript. Si lo has deshabilitado
intencionadamente, por favor vuelve a activarlo.</p>
</noscript>
Ejemplo
</body>
La etiqueta <noscript> se debe incluir en el interior de la
etiqueta <body> (normalmente se incluye al principio de <body>).
El mensaje que muestra <noscript> puede incluir cualquier 13
elemento o etiqueta XHTML.
Sintaxis
• No se tienen en cuenta los espacios en blanco y las nuevas
líneas

12/05/2014
• Se distinguen las mayúsculas y minúsculas
• No se define el tipo de las variables

Ing. Hector Estigarribia - FCT Unc@

• No es necesario terminar cada sentencia con el carácter de
punto y coma (;) *
• Se pueden incluir comentarios:
• // Ejemplo de comentario de una sola línea
• /*Ejemplo de
comentario de
varias líneas: */ 14
Posibilidades y limitaciones
• JavaScript fue diseñado de forma que se ejecutara en un
entorno muy limitado

12/05/2014
• Los scripts tampoco pueden cerrar ventanas que no hayan
abierto esos mismos scripts.
• Los scripts no pueden acceder a los archivos del ordenador

Ing. Hector Estigarribia - FCT Unc@

del usuario (ni en modo lectura ni en modo escritura) y
tampoco pueden leer o modificar las preferencias del
navegador.
• Si la ejecución de un script dura demasiado tiempo (por
ejemplo por un error de programación) el navegador informa
al usuario de que un script está consumiendo demasiados
recursos y le da la posibilidad de detener su ejecución. 15
JavaScript en otros entornos
• Herramientas como Adobe Acrobat permiten incluir
código JavaScript en archivos PDF.

12/05/2014
• Otras herramientas de Adobe como Flash y Flex utilizan
ActionScript, un dialecto del mismo estándar de

Ing. Hector Estigarribia - FCT Unc@

JavaScript.
• Photoshop permite realizar pequeños scripts mediante
JavaScript y la versión 6 de Java incluye un nuevo
paquete (denominado javax.script) que permite integrar
ambos lenguajes.
• Por último, aplicaciones como Yahoo Widgets y
el Dashboard de Apple utilizan JavaScript para programar 16
sus widgets.
Tipos de variables
• Numéricas
• var iva = 16; // variable tipo entero

12/05/2014
• var total = 234.65; // variable tipo decimal
• Cadenas de texto

Ing. Hector Estigarribia - FCT Unc@

• var mensaje = "Bienvenido a nuestro sitio web";
• var nombreProducto = 'Producto ABC';
• var texto1 = "Una frase con 'comillas simples' dentro";
• var texto2 = 'Una frase con "comillas dobles" dentro';
• var texto1 = 'Una frase con \'comillas simples\' dentro';
• var texto2 = "Una frase con \"comillas dobles\" dentro";
17
Ejemplo
Tipos de variables
• Arrays
• var dia1 = "Lunes";

12/05/2014
• var dia2 = "Martes";
• ...

Ing. Hector Estigarribia - FCT Unc@

• var dia7 = "Domingo";
• var dias = ["Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado", "Domingo"];
• var diaSeleccionado = dias[0]; // diaSeleccionado = "Lunes“
• var otroDia = dias[5]; // otroDia = "Sábado“ Ejemplo
• Booleanos
• var clienteRegistrado = false; 18
• var ivaIncluido = true;
Operadores
• Asignación
• var numero1 = 3;

12/05/2014
• numero1 = numero2;
• Incremento y decremento

Ing. Hector Estigarribia - FCT Unc@

• var numero = 5;
• ++numero;
• --numero;
• numero1++;
• numero1--; Ejemplo

19
Operadores Lógicos
• Negación
• var visible = true;

12/05/2014
• alert(!visible); // Muestra "false" y no "true“
• var cantidad = 0;

Ing. Hector Estigarribia - FCT Unc@

• vacio = !cantidad; // vacio = true
• cantidad = 2; Ejemplo
• vacio = !cantidad; // vacio = false
• var mensaje = "";
• mensajeVacio = !mensaje; // mensajeVacio = true
• mensaje = "Bienvenido";
• mensajeVacio = !mensaje; // mensajeVacio = false 20
Operadores Lógicos
• AND
• La operación lógica AND obtiene su resultado combinando dos

12/05/2014
valores booleanos.
• El operador se indica mediante el símbolo && y su resultado

Ing. Hector Estigarribia - FCT Unc@

solamente es true si los dos operandos son true:
variable1 && & =ampersand
variable1 variable2
variable2

true true true

true false false

false true false

21

false false false

Operadores Lógicos
• OR
• La operación lógica OR también combina dos valores

12/05/2014
booleanos.
• El operador se indica mediante el símbolo ||y su resultado

Ing. Hector Estigarribia - FCT Unc@

es true si alguno de los dos operandos es true:

variable1 ||
variable1 variable2 Ejemplo
variable2
true true true
| = pipe
true false true

false true true 22

false false false
Operadores Matemáticos
• var numero1 = 10;
• var numero2 = 5;

12/05/2014
• resultado = numero1 / numero2; // resultado = 2
• resultado = 3 + numero1; // resultado = 13

Ing. Hector Estigarribia - FCT Unc@

• resultado = numero2 – 4; // resultado = 1
• resultado = numero1 * numero 2; // resultado = 50
• resultado = numero1 % numero2; // resultado = 0
• numero1 = 9;
• numero2 = 5;
• resultado = numero1 % numero2; // resultado = 4
23
% operador "módulo", que calcula el resto de la división
entera de dos números
Operadores Matemáticos
• Los operadores matemáticos también se pueden combinar
con el operador de asignación para abreviar su notación:

12/05/2014
• var numero1 = 5;
• numero1 += 3; // numero1 = numero1 + 3 = 8

Ing. Hector Estigarribia - FCT Unc@

• numero1 -= 1; // numero1 = numero1 - 1 = 4
• numero1 *= 2; // numero1 = numero1 * 2 = 10
• numero1 /= 5; // numero1 = numero1 / 5 = 1
• numero1 %= 4; // numero1 = numero1 % 4 = 1

24
Operadores Relacionales
• Los operadores relacionales definidos por JavaScript son
idénticos a los que definen las matemáticas:

12/05/2014
• mayor que (>),
• menor que (<),

Ing. Hector Estigarribia - FCT Unc@

• mayor o igual (>=),
• menor o igual (<=),
• igual que (==) y
• distinto de (!=).
• El operador== se utiliza para comparar el valor de dos
variables, por lo que es muy diferente del operador =, que se
utiliza para asignar un valor a una variable:
25
Operadores Relacionales
• var numero1 = 3;
• var numero2 = 5;

12/05/2014
• resultado = numero1 > numero2; // resultado = false
• resultado = numero1 < numero2; // resultado = true

Ing. Hector Estigarribia - FCT Unc@

• numero1 = 5;
• numero2 = 5;
• resultado = numero1 >= numero2; // resultado = true
resultado = numero1 <= numero2; // resultado = true
resultado = numero1 == numero2; // resultado = true
resultado = numero1 != numero2; // resultado = false

26
Operadores Relacionales
• // El operador "=" asigna valores
• var numero1 = 5;

12/05/2014
• resultado = numero1 = 3; // numero1 = 3 y resultado = 3

Ing. Hector Estigarribia - FCT Unc@

• // El operador "==" compara variables
• var numero1 = 5;
• resultado = numero1 == 3; // numero1 = 5 y resultado = false

Ejemplo
27
 Estructuras de control de flujo
• Estructura if
if(condicion) {
... }

12/05/2014
var mostrarMensaje = true; var mostrarMensaje = true;

Ing. Hector Estigarribia - FCT Unc@

if(mostrarMensaje) { if(mostrarMensaje == true) {
alert("Hola Mundo"); } alert("Hola Mundo"); }

Las comparaciones siempre se realizan con el operador ==, ya que el

operador = solamente asigna valores:

Ejemplo
28
Estructuras de control de flujo
• Estructura if...else

if(condicion) if(edad < 12)

12/05/2014
{... } { alert("Todavía eres muy pequeño"); }
else { ... } else if(edad < 19) { alert("Eres un adolescente"); }
else if(edad < 35) { alert("Aun sigues siendo joven"); }

Ing. Hector Estigarribia - FCT Unc@

else { alert(“Estás viejo "); }

No es obligatorio que la combinación de

estructuras if...else acabe con la instrucción else, ya que puede
terminar con una instrucción de tipo else if().

29
 Estructuras de control de flujo
• Estructura for for(inicializacion; condicion; actualizacion)
{ ... }

12/05/2014
var mensaje = "Hola, estoy dentro de un bucle";
for(var i = 0; i < 5; i++)
{ alert(mensaje); }

Ing. Hector Estigarribia - FCT Unc@

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(var i=0; i<7; i++)
{ alert(dias[i]); }

Ejemplo
30
 Estructuras de control de flujo
• Estructura for...in for(indice in array)
{ ... }

12/05/2014
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
for(i in dias)
{ alert(dias[i]); }

Ing. Hector Estigarribia - FCT Unc@

Si se quieren recorrer todos los elementos que forman
un array, la estructura for...in es la forma más eficiente
de hacerlo,

31
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para cadenas de texto

12/05/2014
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10

Ing. Hector Estigarribia - FCT Unc@

var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"

var mensaje1 = "Hola";

var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"
32
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para cadenas de texto

12/05/2014
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"

Ing. Hector Estigarribia - FCT Unc@

var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"

var mensaje = "Hola";

var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2); // letra = l 33
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para cadenas de texto

12/05/2014
var mensaje = "Holaaaa";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b'); // posicion = -1

Ing. Hector Estigarribia - FCT Unc@

var mensaje = "Holaaa";
var posicion = mensaje.lastIndexOf('a'); // posicion = 5
posicion = mensaje.lastIndexOf('b'); // posicion = -1

34
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para cadenas de texto

12/05/2014
var mensaje = "Hola Mundo";
var porcion = mensaje.substring(2); // porcion = "la Mundo"

Ing. Hector Estigarribia - FCT Unc@

porcion = mensaje.substring(5,7); // porcion = "Mun"
porcion = mensaje.substring(7); // porcion = "ndo“
porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
porcion = mensaje.substring(3, 4); // porcion = "a“
porcion = mensaje.substring(5, 0); // porcion = "Hola "
porcion = mensaje.substring(0, 5); // porcion = "Hola "

var mensaje = "Hola Mundo, soy una cadena de texto!"; var palabra = “Hola”
35
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para arrays

12/05/2014
var vocales = ["a", "e", "i", "o", "u"];
var numeroVocales = vocales.length; // numeroVocales = 5

Ing. Hector Estigarribia - FCT Unc@

var array = ["hola", "mundo"];
var mensaje = array.join(""); // mensaje = "holamundo"
mensaje = array.join(" "); // mensaje = "hola mundo"

var array = [1, 2, 3];

var ultimo = array.pop(); 36
// ahora array = [1, 2], ultimo = 3
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para arrays

12/05/2014
var array = [1, 2, 3];
array.push(4); // ahora array = [1, 2, 3, 4]

Ing. Hector Estigarribia - FCT Unc@

var array = [1, 2, 3];
var primero = array.shift(); // ahora array = [2, 3], primero = 1

var array = [1, 2, 3];

array.unshift(0); // ahora array = [0, 1, 2, 3]

var array = [1, 2, 3]; 37

array.reverse(); // ahora array = [3, 2, 1]
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para números

12/05/2014
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN

Ing. Hector Estigarribia - FCT Unc@

var numero1 = 0;
var numero2 = 0;
if(isNaN(numero1/numero2))
{ alert("La división no está definida para los números indicados"); }
else { alert("La división es igual a => " + numero1/numero2); }

38
Funciones y propiedades
básicas de JavaScript
• Funciones útiles para números

12/05/2014
var numero1 = 10;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor Infinity

Ing. Hector Estigarribia - FCT Unc@

var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35
numero1.toFixed(6); // 4564.345670
numero1.toFixed(); // 4564

39
Funciones
• function nombre_funcion() {
...

12/05/2014
}

Ing. Hector Estigarribia - FCT Unc@

function suma_y_muestra()
{ resultado = numero1 + numero2;
alert(“La suma es" + resultado); }

var resultado;
var numero1 = prompt("Introduce un número: ");
var numero2 = prompt("Introduce otro número: ");
suma_y_muestra();
40
Ejemplo
Argumentos y valores de
retorno
• function nombre_funcion(argumento1, argumento2, …argumentoN) {
...

12/05/2014
}

Ing. Hector Estigarribia - FCT Unc@

// Definición de la función
function calculaPrecioTotal(precio) {
var impuestos = 1.16;
var gastosEnvio = 10;
var precioTotal = ( precio * impuestos ) + gastosEnvio;
}

// Llamada a la función y guarda en una variable el resultado Ejemplo

var precioTotal = calculaPrecioTotal(23.34); 41
Ámbito de las variables
function creaMensaje() {
var mensaje = “Mensaje de prueba”; }
creaMensaje();

12/05/2014
alert(mensaje);

Ing. Hector Estigarribia - FCT Unc@

Al ejecutar el código anterior no se muestra ningún mensaje
por pantalla. La razón es que la variable mensaje se ha definido
dentro de la función creaMensaje() y por tanto, es una variable
local que solamente está definida dentro de la función.

function creaMensaje() {
var mensaje = “Mensaje de prueba”;
alert(mensaje); } 42
creaMensaje(); Ejemplo
Ámbito de las variables
var mensaje = “Mensaje de prueba”;
function muestraMensaje() {
alert(mensaje); }

12/05/2014
Ing. Hector Estigarribia - FCT Unc@
La variable mensaje se ha definido fuera de cualquier función.
Este tipo de variables automáticamente se transforman en
variables globales y están disponibles en cualquier punto del
programa (incluso dentro de cualquier función).

function creaMensaje() { Dentro de la funcion

mensaje = "Mensaje de prueba"; } sin usar “var=“ la
creaMensaje(); alert(mensaje); variable es 43
considerada global
Ejemplo
Sentencias break y continue
• permiten manipular el comportamiento normal de los
bucles for para detener el bucle o para saltarse algunas
repeticiones.

12/05/2014
• Concretamente, la sentencia break permite terminar de
forma abrupta un bucle y la sentencia continue permite
saltarse algunas repeticiones del bucle.

Ing. Hector Estigarribia - FCT Unc@

Ejemplo

44
Otras estructuras de control
while(condicion) { ... } do { ... } while(condicion);

12/05/2014
switch(variable) {

Ing. Hector Estigarribia - FCT Unc@

case valor_1: ... break;
case valor_2: ... break;
... case valor_n: ...
break;
default: ... break; }

45
FUENTES
• http://librosweb.es/javascript/
• http://www.desarrolloweb.com/manuales/20/

12/05/2014
• http://www.gratiszona.com/apuntes/javascript/16-
conversion-entre-tipos.htm

Ing. Hector Estigarribia - FCT Unc@

46