Javascript

JavaScript - JS

Teórico

Definición

• Lenguaje de programación interpretado, imperativo, orientado a objetos, basado en prototipos y débilmente tipado.

• Implementado en todos los navegadores.

• Client-side = corre en el cliente web.

Interpretado

• Se lee una instrucción, se la analiza y traduce a código de máquina, se la ejecuta, se lee la siguiente instrucción.

Interpretado vs CompiladoCompilado: todo el programa no una instrucción.

Imperativo

• Un programa imperativo es un conjunto de instrucciones que le indican a la máquina como realizar una tarea. Mantienen un estado y las instrucciones cambian dicho estado.

• Es estructurado.

Orientado a Objetos

• Permite definir variables tipo objetos que implementan estados y acciones para modificarlos.

• Los objetos en JS son arrays asociativos tipo atributo: valor;

• Pero no es Smalltalk/Java. La ejecución es imperativa no basada en objetos.

Objetos - Herencia

• No hay herencia en los objetos de JS, la prototipación permite la instanciación de nuevas instancias.

• No existe el concepto de “superclase”.

Débilmente Tipado

Var a = “hola”;a = a + 1;

Y además es interpretado…

Dinámico

• Versátil: puedo definir el tipo que desee en el momento que desee.

• Soporta recursividad,

• Soporta funciones notación lambda.

Sintáxis

• Instrucción finaliza “;”• Una instrucción una sentencia.• Varias instrucciones en una misma línea

separadas por “;”.

var a = 0;a = a + 1;

Identificadores

• Los identificadores o nombres variables JS empiezan con:– letra– _– $– Resto cualquiera de los anteriores.

• Case Sensitive.

Tipos de Datos

• Cadenas: “hola”

• Numéricos (– Sin decimales: 1,2,3,…– Con Decimales: 3.14159– Notación exponencial base 10: 123e3 = 123000 – Boolean: true / false

Tipos de Datos

• Arreglos / Arrays – 1er elemento índice 0var frutas = new Array();frutas[0] = “manzana”;frutas[1] = “naranja”;frutas[2] = “pera”;

var frutas = [“manzana”, “naranja”, “pera”];

Tipos de Datos

• Objetos:

var profesor = {legajo: 123456,nombre: “Daniel”,curso: “Programador Web”,turno: “N”

}

profesor.nombre = “Daniel” profesor[“nombre”]

Undefined / Null / New

• undefined: la variable no tiene valor alguno.• null: el valor de la variable es vacío (nulo).• new: crea una variable tipo objeto.– Puedo crear variables objetos a partir de tipos

básicos:• Var numero = new Number();• Var booleano = new Boolean();• Var cadena = new String();

OperadoresOperador Descripción Valor de y Operación Valor de x

+ Suma 5 x = y + 2 7

- Resta 5 x = y - 2 3

* Multiplicación 5 x = y * 2 10

/ División 5 x = y / 2 2.5

% Resto división 5 x = y % 2 1

-- Decrementar Dado y=5444

y--x = --yx = y--

45

++ Incrementar Dado y=5666

y++x = ++yx = y++

65

Operadores con AsignaciónOperador Operación Valor x Valor y Resultado Equivale a

= x = y 10 5 x = 5

+= x+=y 10 5 x = 15 x = x + y

-= x-=y 10 5 x = 5 x = x – y

*= x*=y 10 5 x = 50 x = x * y

/= x/=y 10 5 x = 2 x = x / y

%= x%= 10 5 x = 0 x = x % y

Suma de Cadenasvar a = “a”;var b = “b”;var c = “c”;var d = a + b + c; // d = “abc”

d = a + 7; // “a7”var e = 7;e = e + 5; // 12e = e + a; // “12a”

Una cadena + un número = otra cadenaUn número + una cadena = otra cadena

Operadores ComparaciónComparación Tipo Valor x Valor y Resultado

== Igual 5 5 true

!= Distinto 5 5 false

< Menor 5 7 true

<= Menor o igual 5 7 true

> Mayor 5 7 false

>= Mayor o igual 5 7 false

Operadores Comparación IIOperación Comparación x Y Resultado

=== Igual en tipo y valor 5 5 true

5 “5” false

!== Distinto en tipo y valor 5 5 false

5 “5” true

Operadores LógicosOperación Descripción

&& and

|| or

! not

Estructuras

• Decisión– Nos permiten ejecutar una serie de acciones

basándonos en el valor de verdad de una condición lógica.

• Repetición– Nos permiten ejecutar una serie de acciones un

número fijo de veces o mientras se cumpla una condición lógica.

Estructuras de Decisión

if condición { sentencias a ejecutar si condición es true}else {

sentencias a ejecutar si condición es false}

Estructuras de Decisión

if (hora<12) { hora = hora + “ AM”;}else { hora = hora + “ PM”;}

Estructuras de Decisión

if condición { sentencias a ejecutar si condición es true}else if condicion2 {

sentencias a ejecutar si condicion2 es true}else{

sentencias a ejecutar si condicion2 es false}

Estructuras de Decisión

if condición { x = x + y;}else{ x = x – y;}

x = (condición) ? x + y : x – y ;

Estructuras de Decisión

switch(n) {case 1:  sentencias… break;case 2:   sentencias… break;default:   sentencias…

}

Estructuras de Decisiónswitch (nro_de_mes) {

case 1:   nombremes = “Enero”;

break;case 2:   nombremes = “Enero”;

break;case 3:   nombremes = “Marzo”;

break;

…

case 11:   nombremes = “Noviembre”;

break;default:    nombremes = “Diciembre”;

}

Estructuras de Repetición

• for : repite un bloque de sentencias un número finito de veces.

• for/in : itera sobre las propiedades de un objeto.

• While : repite un bloque de sentencias mientras una condición evalue a true.

• do/while : idem.

Estructuras de Repetición

document.write(“Hoy es Domingo”);document.write(“Hoy es Lunes”);document.write(“Hoy es Martes”);document.write(“Hoy es Miércoles”);document.write(“Hoy es Jueves”);document.write(“Hoy es Viernes”);document.write(“Hoy es Sábado”);

Estructuras de Repetición

for ( sentencia1; sentencia2; sentencia3) {bloque de sentencias;

}

sentencia1: se ejecuta antes que todo.

sentencia2: se ejecuta antes del bloque y si evalúa a true el bloque se ejecuta.

sentencia3: se ejecuta una vez ejecutado el bloque.

Estructuras de Repeticiónvar dias = [“Domingo”, “Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”,

“Sábado”];

For (var i=0; i<=6; i++) {document.write( “Hoy es ” + dias[i] );

}

Estructuras de Repetición

for ( var in objeto) { sentencias con var}

Recorre los atributos de objeto, uno por uno.

Estructuras de Repeticiónvar profesor = {

legajo: 123456,nombre: “Daniel”,curso: “Programador Web”,turno: “N”

}

for (var datosprofe in profesor) {document.write(profesor[datosprofe]);

}

12345 Daniel Programador Web N

jsforinobj.html

Estructuras de Repetición

While condición { sentencias…}

Mientras condición sea true se ejecutarán las sentencias.

Estructuras de Repetición

var i = 1;while (i<3) {

document.write(“Este es el paso: " + i );i++;

}

Estructuras de Repetición

var i = 1;do {

document.write(“Este es el paso: " + i ); i++;

} while (i<3);

Estructuras de Repetición

while { } vs do { } while();

Cuidado con la condición ya que do{} se ejecuta al menos una vez!.

Probar los ejemplos anteriores con la condición i<1

Estructuras de Repetición

• break: nos permite interrumpir la ejecución de pasos dentro del ciclo de iteraciones.

for (var i=0; i<10; i++) {if (i==3) break;document.write(“Paso: ” + i);

} Cuando i=3 se interrumpe el ciclo.

Estructuras de Repetición

• continue: nos permite interrumpir la ejecución de un paso en un ciclo continuando con el siguiente.

for (var i=0; i<10; i++) {if (i==3) continue;document.write(“Paso: ” + i);

} Cuando i=3 no se imprime “Paso: 3”

Control de Ejecución

• Etiquetas “break” y “continue”

Se etiqueta un conjunto de sentencias y se puede interrumpir la ejecución de dicho grupo “break” o se puede pasar a ejecutarlas “continue”.

continue se usa solo dentro de loops.

Control de Ejecución

• Ejemplo break etiquetado

outerloop: for (var i = 0; i < 5; i++) { document.write( “i=” + i ); innerloop: for (var j = 0; j < 5; j++) { if (j > 3 ) break ; // continua con el siguiente paso del loop if (i == 2) break innerloop; // salta a innerloop if (i == 4) break outerloop; // salta a outerloop document.write( “j=” + j ); } }

breaklabeled.html

Control de Ejecución

• Ejemplo de continue etiquetado: outerloop:

for (var i = 0; i < 3; i++) { document.write("Outerloop: " + i + "<br />"); for (var j = 0; j < 5; j++) { if (j == 3){ continue outerloop; } document.write("Innerloop: " + j + "<br />"); } }

Errores

Durante la ejecución de un script pueden surgir errores:

- Sintáxis,- Funciones no presentes en un navegador,- Datos ingresados por un usuario,- Datos recibidos desde un servidor.

Errores

Los errores pueden capturarse para evitar que se interrumpa la ejecución del script.

try { sentencias…si se produce un error… }

catch(err) { //error la ejecución continúa en el bloque catch

}err: código de error – err.message: descripción del error.

Funciones Predefinidas

• Para númerosisNaN(x): x is Not a Number?

Number(x): x convertido a objeto Number.

x.toString(): representación string de x.

x.valueOf(): valor numérico de x.

x.toPrecision(2): formatea x a 2 dígitos.

typeOf(x): devuelve el tipo de x.

Funciones Predefinidas

• Para fechas: se utiliza el objeto DateNew Date(): devuelve un objeto fecha.

Date.getDate(): el día del mes (1-31).

Date.getDay(): el día de la semana (0-6 // dom-sáb).

Date.getHours(): la hora actual (hh).

Date.getMonth(): el mes (número).

Date.getFullYear(): año 4 dígitos.

Date.toString(): formato completoWed Apr 09 2014 22:00:00 GMT-0300 (Hora est. de Sudamérica E.)

Funciones Predefinidas

• Para Strings

String.length: longitud de la cadena.

String.charAt(n): devuelve el carácter en la posición “n” indicada.

String.indexOf(“c”): devuelve la primera posición del carácter “c” en string.

String.concat(): concatena dos cadenas.

Strings continuación

String.substring(j, h): devuelve una subcadena de string, empezando en la posición “j” y finalizando en contando “h” sin incluir dicho caracter.

String.toLowerCase(): la cadena a minúsculas.

String.toUpperCase(): la cadena a mayúsculas.

String.trim(): la cadena sin espacios.

Funciones Predefinidas

• Para arraysArray.Concat(array2): concatena “array2” a continuación de Array.

Array.indexOf(elemento): busca el “elemento” en Array y devuelve la posición.

Array.pop(): devuelve el último elemento de Array y lo remueve de Array.

Array.push(elemento): inserta “elemento” al final del Array.

Funciones User-defined

• Funciones sin devolución de valor (sin return) o Procedimientos:

function ImprimirHola() {document.write(“Hola”);

}

Funciones User-defined

• Funciones con devolución de valor (return un valor):

function SumaUno(j) {   return j++;}

x = SumaUno(x);

Scope de Variables

• Las variables son válidas dentro del módulo donde se las declara.

• Una variable global tiene scope global, puede estar definida en cualquier lugar dentro del script.

• Las variables locales son las definidas dentro de funciones. Tienen scope (local) dentro de la misma función.

JS Ejercicios

1. Dados 2 arreglos, generar un tercero que contenga los 2 primeros.

2. Dado un arreglo con números devolver el mayor valor contenido en el arreglo.

3. Dado un arreglo con cadenas, devolver la cadena más larga dentro del arreglo.

4. Dada una fecha mostrarla en formato generar el string: “Hoy es día de mes de año.”