Introducción al lenguaje Javascript

1. JavaScript - JS
Teórico

2. 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.

3. 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 Compilado
Compilado: todo el programa no una
instrucción.

4. 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.

5. 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.

6. 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”.

7. Débilmente Tipado
Var a = “hola”;
a = a + 1;
Y además es interpretado…

8. Dinámico
• Versátil: puedo definir el tipo que desee en el
momento que desee.
• Soporta recursividad,
• Soporta funciones notación lambda.

9. 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;

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

11. 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

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

13. Tipos de Datos
• Objetos:
var profesor = {
legajo: 123456,
nombre: “Daniel”,
curso: “Programador Web”,
turno: “N”
}
profesor.nombre = “Daniel”
profesor[“nombre”]

14. 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();

15. Operadores
Operador 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=5
4
4
4
y--
x = --y
x = y--
4
5
++ Incrementar Dado y=5
6
6
6
y++
x = ++y
x = y++
6
5

16. Operadores con Asignación
Operador 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

17. Suma de Cadenas
var 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; // 12
e = e + a; // “12a”
Una cadena + un número = otra cadena
Un número + una cadena = otra cadena

18. Operadores Comparación
Comparació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

19. Operadores Comparación II
Operació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

20. Operadores Lógicos
Operación Descripción
&& and
|| or
! not

21. 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.

22. Estructuras de Decisión
if condición {
sentencias a ejecutar si condición es true
}
else {
sentencias a ejecutar si condición es false
}

23. Estructuras de Decisión
if (hora<12) {
hora = hora + “ AM”;
}
else {
hora = hora + “ PM”;
}

24. 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
}

25. Estructuras de Decisión
if condición {
x = x + y;
}else{
x = x – y;
}
x = (condición) ? x + y : x – y ;

26. Estructuras de Decisión
switch(n) {
case 1:
sentencias…
break;
case 2:
sentencias…
break;
default:
sentencias…
}

27. Estructuras de Decisión
switch (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”;
}

28. 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.

29. 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”);

30. 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.

31. Estructuras de Repetición
var dias = [“Domingo”, “Lunes”, “Martes”, “Miércoles”, “Jueves”, “Viernes”,
“Sábado”];
For (var i=0; i<=6; i++) {
document.write( “Hoy es ” + dias[i] );
}

32. Estructuras de Repetición
for ( var in objeto) {
sentencias con var
}
Recorre los atributos de objeto, uno por uno.

33. Estructuras de Repetición
var 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

34. Estructuras de Repetición
While condición {
sentencias…
}
Mientras condición sea true se ejecutarán las
sentencias.

35. Estructuras de Repetición
var i = 1;
while (i<3) {
document.write(“Este es el paso: " + i );
i++;
}

36. Estructuras de Repetición
var i = 1;
do {
document.write(“Este es el paso: " + i );
i++;
} while (i<3);

37. 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

38. 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.

39. 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”

40. 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.

41. 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

42. 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 />");
}
}

43. 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.

44. 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.

45. Funciones Predefinidas
• Para números
isNaN(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.

46. Funciones Predefinidas
• Para fechas: se utiliza el objeto Date
New 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 completo
Wed Apr 09 2014 22:00:00 GMT-0300 (Hora est. de Sudamérica E.)

47. 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.

48. 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.

49. Funciones Predefinidas
• Para arrays
Array.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.

50. Funciones User-defined
• Funciones sin devolución de valor (sin return)
o Procedimientos:
function ImprimirHola() {
document.write(“Hola”);
}

51. Funciones User-defined
• Funciones con devolución de valor (return un
valor):
function SumaUno(j) {
return j++;
}
x = SumaUno(x);

52. 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.

53. 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.”