Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/objetosJSCGenerales»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «<br /> {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}} <div class="slides layout-regular template-default"> <div class="slide"> == Programación Orientada a Objetos...»)
 
 
(19 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
<br />
 
<br />
 +
{{Usuario:ManuelRomero/JavaScript/dom/nav}}
 +
  
 
{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}  
 
{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}  
 
<div class="slides layout-regular template-default">
 
<div class="slides layout-regular template-default">
 
<div class="slide">
 
<div class="slide">
−
 
+
__TOC__
 
== Programación Orientada a Objetos. DOM. ==
 
== Programación Orientada a Objetos. DOM. ==
 
</div>
 
</div>
Línea 45: Línea 47:
 
</div>
 
</div>
  
 +
<div class="slide">
 +
==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
 +
[[Imagen:Objetos1.png]]
 +
===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'''''
 +
<source lang=javascript>
 +
var frase = new String();
 +
var fecha = new Date();
 +
</source>
 +
 +
===Objeto Date===
 +
*Para trabajar con fechas y horas.
 +
*Se inicializa automáticamente en la declaración, con la fecha y hora actuales.
 +
{{Actividad
 +
|Title= Probando fechas
 +
|Declara una fecha y visualiza su valor
 +
<hr />
 +
[[Usuario:ManuelRomero/JavaScript/dom/objetosJSCGenerales/ejemplo1|<font size=5 color=red>Solución</font>]]
 +
}}
 +
*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.
 +
{{Actividad
 +
|Title= 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)
 +
 +
{{Actividad
 +
|Title= Calcula la edad
 +
|Haz un programa que introduces tu fecha de nacimiento y de devuelve tu edad
 +
<hr />
 +
[[Usuario:ManuelRomero/JavaScript/dom/dom/objetosJSCGenerales/Ejemplo3 |<font size=5 color=red>Solución</font>]]
 +
}}
 +
 +
;Modificar la fecha
 +
setFullYear (year, mes, dia);
 +
 +
===Objeto Array===
 +
Varias posibilidades para declararlas e inicializarlas:
 +
<source lang="javascript">
 +
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");
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort):
 +
<source lang="javascript">
 +
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());
 +
</source>
 +
Resultado:<br>
 +
Jani,Hege,Stale,Kai Jim,Borge,Tove <br>
 +
Borge,Hege,Jani,Kai Jim,Stale,Tove
 +
</div>
 +
<div class="slide">
 +
===Number===
 +
===String===
 +
*Podemos crear un objeto de tipo string
 +
<source lang=javascript>
 +
var n = new String();
 +
n= "Hola caracola";
 +
</source>
 +
*Es lo mismo que hacer
 +
 +
<source lang=javascript>
 +
 +
var n;
 +
n= "Hola caracola";
 +
</source>
 +
*Hay una gran cantidad de funciones útiles para cadena de caracteres
 +
 +
====Funciones útiles para cadenas de texto====
 +
<source lang="javascript">
 +
//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"
 +
 +
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
<source lang="javascript">
 +
//toUpperCase(), transforma a mayúsculas
 +
 +
var mensaje1 = "Hola";
 +
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
 +
 +
//toLowerCase(), transforma a minúsculas:
 +
var mensaje1 = "HolA";
 +
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
 +
 +
//charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:
 +
 +
var mensaje = "Hola";
 +
var letra = mensaje.charAt(0); // letra = H
 +
letra = mensaje.charAt(2);    // letra = l
 +
 +
//indexOf(caracter), calcula la primera ocurrencia del carácter indicado
 +
 +
var mensaje = "Hola";
 +
var posicion = mensaje.indexOf('a'); // posicion = 3
 +
posicion = mensaje.indexOf('b');    // posicion = -1
 +
 +
//lastIndexOf(caracter), empieza a buscar por detrás en la cadena
 +
 +
var mensaje = "Hola";
 +
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
 +
 +
//función substring(número), extraer parte de la cadena:
 +
var mensaje = "Hola Mundo";
 +
porcion = mensaje.substring(5);    // porcion = "Mundo"
 +
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
 +
 +
//función split para obtener arrays de texto:
 +
var mensaje = "Hola Mundo, soy una cadena de texto!";
 +
var palabras = mensaje.split(" ");
 +
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
 +
 +
//Con esta función se pueden extraer fácilmente las letras que forman una palabra:
 +
var palabra = "Hola";
 +
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]
 +
 +
</source>
 +
 +
</div>
 +
{{Actividad|
 +
Title=Cadena de caracteres
 +
|La tabla siguiente tiene una cadena de caracteres en un orden concreto
 +
*No se utilizan las letras: I, Ñ, O, U
 +
*La I y la O se descartan para evitar confusiones con otros caracteres, como 1, l o 0.
 +
*Se usan veintitrés letras por ser este un número primo.
 +
}}
 +
{| class="prettytable" style="text-align: center"
 +
! width="20" | 0 !! width="20" | 1 !! width="20" | 2 !! width="20" | 3 !! width="20" | 4 !! width="20" | 5 !! width="20" | 6 !! width="20" | 7 !! width="20" | 8 !! width="20" | 9 !! width="20" | 10 !! width="20" | 11 !! width="20" | 12 !! width="20" | 13 !! width="20" | 14 !! width="20" | 15 !! width="20" | 16 !! width="20" | 17 !! width="20" | 18 !! width="20" | 19 !! width="20" | 20 !! width="20" | 21 !! width="20" | 22
 +
|-
 +
| t || r || w || a || g || m || y || f || p || d || x || b || n || j || z || s || q || v || h || l || c || k || e
 +
|}
 +
 +
===Number===
 +
*Son muchas las funciones o métodos definidos para la clase Number
 +
*Es especialmente interesante ver la función '''''isNaN(valor)''''', la cual me devuelve true o false en función de que el valor sea o no número.
 +
{{Actividad|
 +
Title="Verifica un número"
 +
|Un programa que pida un valor y se quede ahi hasta que el valor introducido sea un número}}
 +
 +
*Aquí tenemos otros usos de los valores numéricos.
 +
 +
<source lang="javascript">
 +
//función isNaN para comprobar si es un número:
 +
var numero1 = 0;
 +
var numero2 = 0;
 +
alert(numero1/numero2); // se muestra el valor NaN
 +
 +
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);
 +
}
 +
 +
//función toFixed(digitos), devuelve el número con los decimales indicados y los redondeos necesarios:
 +
var numero1 = 4564.34567;
 +
numero1.toFixed(2); // 4564.35
 +
</source>
 +
 +
</div>
 +
<div class="slide">
 +
===Algunos objetos referidos al navegador===
 +
'''Window''': Representa la ventana del navegador.<br>
 +
'''Navigator''': Contiene información sobre el navegador Web<br>
 +
'''Screen''': Contiene información sobre la pantalla del ordenador<br>
 +
'''History''' : Contiene información sobre las URLs visitadas <br>
 +
'''Location''': Contiene información sobre la URL actual en el navegador <br>
 +
'''document''': Contiene información el contenido del documento html <br>
 +
 +
Un ejemplo:
 +
<source lang="javascript">
 +
<html>
 +
<head>
 +
<script type="text/javascript">
 +
function printpage()
 +
  {
 +
  window.print()
 +
  }
 +
</script>
 +
</head>
 +
<body>
 +
<input type="button" value="Print this page" onclick="printpage()" />
 +
</body>
 +
</html>
 +
</div>
 
<div class="slide">
 
<div class="slide">

Última revisión de 23:33 9 mar 2016




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

Objetos1.png

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


Icon key points.gif

Puntos clave

Nombre__Objeto.propiedad




Icon key points.gif

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.


Icon activity.jpg

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.


Icon activity.jpg

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)



Icon activity.jpg

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"
//toUpperCase(), transforma a mayúsculas
 
var mensaje1 = "Hola";
var mensaje2 = mensaje1.toUpperCase(); // mensaje2 = "HOLA"
 
//toLowerCase(), transforma a minúsculas:
var mensaje1 = "HolA";
var mensaje2 = mensaje1.toLowerCase(); // mensaje2 = "hola"
 
//charAt(posicion), obtiene el carácter que se encuentra en la posición indicada:
 
var mensaje = "Hola";
var letra = mensaje.charAt(0); // letra = H
letra = mensaje.charAt(2);     // letra = l
 
//indexOf(caracter), calcula la primera ocurrencia del carácter indicado
 
var mensaje = "Hola";
var posicion = mensaje.indexOf('a'); // posicion = 3
posicion = mensaje.indexOf('b');     // posicion = -1 
 
//lastIndexOf(caracter), empieza a buscar por detrás en la cadena
 
var mensaje = "Hola";
var posicion = mensaje.lastIndexOf('a'); // posicion = 3
 
//función substring(número), extraer parte de la cadena:
var mensaje = "Hola Mundo";
porcion = mensaje.substring(5);     // porcion = "Mundo"
var porcion = mensaje.substring(1, 8); // porcion = "ola Mun"
 
//función split para obtener arrays de texto:
var mensaje = "Hola Mundo, soy una cadena de texto!";
var palabras = mensaje.split(" ");
// palabras = ["Hola", "Mundo,", "soy", "una", "cadena", "de", "texto!"];
 
//Con esta función se pueden extraer fácilmente las letras que forman una palabra:
var palabra = "Hola";
var letras = palabra.split(""); // letras = ["H", "o", "l", "a"]


Icon activity.jpg

Cadena de caracteres

La tabla siguiente tiene una cadena de caracteres en un orden concreto
  • No se utilizan las letras: I, Ñ, O, U
  • La I y la O se descartan para evitar confusiones con otros caracteres, como 1, l o 0.
  • Se usan veintitrés letras por ser este un número primo.




0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
t r w a g m y f p d x b n j z s q v h l c k e

Number

  • Son muchas las funciones o métodos definidos para la clase Number
  • Es especialmente interesante ver la función isNaN(valor), la cual me devuelve true o false en función de que el valor sea o no número.


Icon activity.jpg

"Verifica un número"

Un programa que pida un valor y se quede ahi hasta que el valor introducido sea un número




  • Aquí tenemos otros usos de los valores numéricos. 
//función isNaN para comprobar si es un número:
var numero1 = 0;
var numero2 = 0;
alert(numero1/numero2); // se muestra el valor NaN
 
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);
}
 
//función toFixed(digitos), devuelve el número con los decimales indicados y los redondeos necesarios:
var numero1 = 4564.34567;
numero1.toFixed(2); // 4564.35

Algunos objetos referidos al navegador

Window: Representa la ventana del navegador.
Navigator: Contiene información sobre el navegador Web
Screen: Contiene información sobre la pantalla del ordenador
History : Contiene información sobre las URLs visitadas
Location: Contiene información sobre la URL actual en el navegador
document: Contiene información el contenido del documento html

Un ejemplo: 

<html> 
	<head>
		<script type="text/javascript">
			function printpage()
  			{
  				window.print()
  			}
		</script>
	</head>
	<body>
		<input type="button" value="Print this page" onclick="printpage()" />
	</body>
</html>
</div>
<div class="slide">
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/dom/objetosJSCGenerales&oldid=18985»