Programación Orientada a Objetos. DOM.

JavaScript es un lenguaje POO*

• JavaScript es un lenguaje que tiene un gran biblioteca de funciones para utilizar
• Esta biblioteca de funciones se organizan en objetos
• Un objeto va a ser como un tipo de datos
• Los objetos serán programas independientes que puedo utilizar cuando los necesite
• Presenta objetos que se pueden usar
• Permite crear tus propios objetos y tus propios tipos de variables (JavaScript Avanzado)
• Un objeto es un tipo especial de dato que tiene

Propiedades

Métodos

*POO = programación orientada a objetos
 OOP = object oriented programming

Propiedades

Valores que se asocian con los objetos. Ejemplo con el objeto String:

<script type="text/javascript">
	var txt="¡Hola Pepito!";
	document.write(txt.length);
</script>

Métodos

Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:

<script type="text/javascript">
	var str="¡Hola Pepito!";
	document.write(str.toUpperCase());
</script>

Qué es programar orientado a objetos

• Es utilizar objetos u otros programas dentro de mi programa principal
• Ahorar y aprovechar el trabajo realizado por otras personas
• Objetos que el sistema me ofrece
• Objetos que otras personas han realizado
• Objetos que yo haya realizado

Objetos del lenguaje JavaScript

• JavaScrit tiene una serie de objetos que podemos utilizar directamente
• Si quiero acceder a sus propiedades y métodos tendré que usar una notación concreta

Puntos clave

Nombre__Objeto.propiedad

Puntos clave

Objetos de JavaScript Math String Array Number Date Boolean

• A continuación vamos a analizar los diferentes objetos haciendo un ejemplo de cada uno

Diferencia entre Objeto y Clase

• La idea es tener claro que son dos coceptos relacionados pero no sinónimos
• La clase es el concepto de tipo de dato
• El objeto es el concepto de variable
• Es decir yo defino un objeto de una determinada clase
• Se hace con el operador new

 var frase = new String();
 var fecha = new Date();

Objeto Date

• Para trabajar con fechas y horas.
• Se inicializa automáticamente en la declaración, con la fecha y hora actuales.

Probando fechas

Declara una fecha y visualiza su valor

Solución

• La fecha es un elemento muy usado en programación por lo que le vamos a dedicar uno ejemplos

Crear una fecha concreta

• Son muchas las forma de crear una fecha
• Especificando una cadena de caracteres del tipo

YYYY-MM-DD (norma ISO 8601)
YYYY-MM => En este caso  asigna como día 1
YYYY => En este caso  asigna como día 1 - y como mes enero (0)

• Hay otras formas de especificar la fecha.

Probando fechas

Declara fechas con diferentes valores y visulizala

Usando métodos de la clase fecha

Metodo   	    Description
getDate()	    Obtenemos el día como un número  (1-31)
getDay()	    Obtenemos el día dentro de la semana como un número (0-6)
getFullYear()	    Devuelve el año  (yyyy)
getHours()	    Devuelve la hora (0-23)
getMilliseconds()  Devuelve los milisegundos (0-999)
getMinutes()	    Los minutos (0-59)
getMonth()	    Meses (0-11)
getSeconds()	    Segundos  (0-59)
getTime()	    Marca de fecha  (milliseconds since January 1, 1970)

Calcula la edad

Haz un programa que introduces tu fecha de nacimiento y de devuelve tu edad

Solución

Modificar la fecha

setFullYear (year, mes, dia);

Objeto Array

Varias posibilidades para declararlas e inicializarlas:

var misCoches=new Array();
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
 
 
var misCoches=new Array(3);
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
 
var misCoches=new Array("Saab","Volvo","BMW");

Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort):

var arr = new Array(6);
	arr[0] = "Jani";
	arr[1] = "Hege";
	arr[2] = "Stale";
	arr[3] = "Kai Jim";
	arr[4] = "Borge";
	arr[5] = "Tove";
	document.write(arr + "<br />");
	document.write(arr.sort());

Resultado:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove

Number

String

• Podemos crear un objeto de tipo string

var n = new String();
n= "Hola caracola";

• Es lo mismo que hacer

var n;
n= "Hola caracola";

• Hay una gran cantidad de funciones útiles para cadena de caracteres

Funciones útiles para cadenas de texto

//length, calcula la longitud de una cadena de texto
var mensaje = "Hola Mundo";
var numeroLetras = mensaje.length; // numeroLetras = 10
 
//+, se emplea para concatenar varias cadenas de texto
var mensaje1 = "Hola";
var mensaje2 = " Mundo";
var mensaje = mensaje1 + mensaje2; // mensaje = "Hola Mundo"
 
//la función concat se utiliza de modo similar al operador +
var mensaje1 = "Hola";
var mensaje2 = mensaje1.concat(" Mundo"); // mensaje2 = "Hola Mundo"