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

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"

//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"]

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.

"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">

@@ Línea 82: / Línea 82: @@
 {{Actividad
 |Title= Probando fechas
-|Declara una fecha y visualiza su valor}}
+|Declara una fecha y visualiza su valor
-[[Usuario:ManuelRomero/JavaScript/dom/objetosJSCGenerales/ejemplo1|Solución]]
+<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
@@ Línea 90: / Línea 93: @@
   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 - enero
+  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}}
-;Mostrar el formato de la fecha
 ;Usando métodos de la clase fecha
@@ Línea 110: / Línea 111: @@
   getTime()	    Marca de fecha  (milliseconds since January 1, 1970)
-{{{Actividad
+{{Actividad
 |Title= Calcula la edad
-|Haz un programa que introduces tu fecha de nacimiento y de devuelve tu 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);
-<source lang="javascript">
-var miFecha=new Date()
-//Ejemplos de uso:
-miFecha.setFullYear(2010,0,14); //fija la fecha a 14 de Enero de 2010
-miFecha.setDate(myDate.getDate()+5); //aumenta la fecha guardada en 5 días
-var miFecha=new Date(); //vamos a hacer una comparación de fechas
-miFecha.setFullYear(2010,0,14);
-var hoy = new Date();
-if (miFecha>hoy)
-{
-	alert("Hoy es antes del 14 de Enero del 2010");
-}
-else
-{
-	alert("Hoy es después del 14 de Enero de 2010");
-}
-</source>
-</div>
-<div class="slide">
 ===Objeto Array===
@@ Línea 174: / Línea 155: @@
 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">
@@ Línea 182: / Línea 287: @@
 '''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">

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

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

Programación web al lado del cliente

Contenido

Programación Orientada a Objetos. DOM.

JavaScript es un lenguaje POO*

Propiedades

Métodos

Qué es programar orientado a objetos

Objetos del lenguaje JavaScript

Puntos clave

Puntos clave

Diferencia entre Objeto y Clase

Objeto Date

Probando fechas

Probando fechas

Calcula la edad

Objeto Array

Number

String

Funciones útiles para cadenas de texto

Cadena de caracteres

Number

"Verifica un número"

Algunos objetos referidos al navegador

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar