[JavaScript] 8 clase: El POO (Programacion Orientada a Objetos).

1.0 Introduccion a lo que es el POO.

Todos los lenguajes modernos de programacion se basan en lo que se ha dado en llamar Programacion Orientada a Objetos (POO), y porsupuesto Jaavascript no es una excepcion.
Basicamente, la POO nos dice que toodo aquelloque podemos manejar es un objeto, es decir, la ventana, donde se carga una pagina web es un objeto, la pagina web en si es tambien un objeto. Dentro de la pagina web existen textos, imagenes, formularios, capas, tablas, botones, marcos.
Bueno, pues cada uno de ellos tambien es un objeto.
Los objetos tienen una entidad propia:

Las propiedades.Son las caracteristicas de un objeto en concreto. Por ejemplo una propiedad de una pagina seria su color de fondo.

Los metodos.Son funciones especificas que cada objeto puede llevar a cabo.
Por ejemplo, un metodo seria de una cadena de texto cambiar las letras que la forman a mayusculas.

Los eventos. Son sucesos que pueden llegar a producirse o no. Javascript reconoce cuando tiene lugar un evento y se puede programar una respuesta.
Por ejemplo, se puede detectar si el usuario apoya el puntero sobre una imagen, o si pulsa el boton derecho, o si aprieta o libera una tecla, etc.

Empezemos con el objeto document, y el metodo write().

Por ejemplo, vamos a empezar con algo sencillo.
Vamos a hacer una pagina que nos muestre un cuadro de viso como los que ya conocemos y que,
al pulsar el boton aceptar, se cambie el color del fondo.
Vamos a lograr esto mediante el objeto llamado document, que es, ni mas ni menos que el documento activo, es decir, la pagina que hay cargada en el navegador. Este objeto tiene una propiedad llamada bgColor, que representa al color del fondo. y ya tios, a partir de ahi le asignamos el color que en este caso, yo le asigne red (rojo),

Script:

<script language="javascript">
<!--
alert ("Pulse aqui para ver su pagina en rojo");
document.bgColor = "red";
//-->
</script>

Bien, este script no tiene nada del otro mundo, pero lo explicare,
primero hacemos q el usuario vea el mensaje con un alert que diga, Pulse aquipara ver su pagina en rojo, y como me supongo q habran leido la definicion de document y bgColor, le asignamos un valor q bgColor que sera, el color rojo, osea red en ingles.

write()

No estan ustedes hartos de un simple alert()Huh.
Bueno, yo si, me canso de que solo abra un mensajito y listo se termino.
bueno, empezemos con el metodo write, este recibe como argumento aquello que queramos escribir, en ese sentido el argumento se crea del mismo modo que se crea la funcion alert().

Ejemplo para aclararnos la mente:

<script language="javascript">
<!--
document.write ("Buenos dias, puerto rico son como las 12 y pico..xD.");
document.write ("HslTeam");
//-->
</script>

Bien, alfin, algo interesante!, ya vemos como el contenido no nos aparece en un mensaje y ya, sino en la pagina.

Por ejemplo, aca otro script:

<script language="javascript">
<!--
var control;
for (control = 1; control <=10; control++)
{
document.write (control + "<br>");
}
//-->
</script>

Vemos q tambn nos sirven las estructuras de control como el for, osea es algo simple, no se maten 3 horas, mirando algo tan simple..

Tambien se pueden incluir tags de HTML, ejemplo:

<script language="javascript">
<!--
document.write ("<b>Esto es negrita</b><br>");
document.write ("<i><u>Esto es cursiva</u></i><br>");
//-->
</script>

Observen que hemos utilizado algunos tags de HTML.

Pero una cosita, NO CONFUNDAN write con writeln,
es lo mismo que el anterior lo unico que incluye un espacio para separar del proximo q se escriba.
Ejemplo:

document.write ("Alfa");
document.write ("Omega");
//Ahora introducimos un salto de linea.

document.write ("<br>");

//Estas dos palabras apareceran separadas por un espacio.

document.writeln ("Alfa");
document.write ("Omega");

El espacio intermedio se debe a writeln(), como dije mas arriba.

2.1 Propiedad fgColor()

Ya que estabamos conociendoun poco el objeto document, y antes de pasar a otros asuntos, quiero ense;arles  la propiedad fgColor (foreground color), permite darle un change al color del text0.

ejemplo>:

<script language="javascript">
<!--
document.write ("<h1>Texto con mi amigo Javascript</h1>");
alert ("Pulsq aqui para ver su pagina en rojo");
document.bgColor = "red";
document.fgColor = "purple";
//-->
</script>

Cuando le dan a aceptar, veran el color del fondo en rojo, y el color de las letras en morado.

3.1 El evento Onclick

Primeramente vean este script:

<html>
   <head>
      <title>
         P&aacute;gina con Javascript.
      </title>
      <script language="javascript">
         <!--
         document.write ("<h1>Esto es texto escrito en la página.</h1>");
         //-->
      </script>
   </head>
   <body>
      <button onClick = "document.bgColor='red';document.fgColor='skyblue';">
         Pulse para cambiar los colores.
      </button>
   </body>
</html>

Bueno, como veremos ,  lo 1 que nos interesa ver, en la linea que aparece resaltada es la palabra onClick. Esto es un evento. Esto hace cuando cuando ponemos button onClick = "document.bgColor='red';document.fgColor='skyblue';">
Entonces, cuando hacemos click en Pulse para cambiar colores, hacemos que esta funcion que es el cambio de color de fondo a red, osea rojo se haga, y el cambio de color de texto tambien cambie a skyblue xd!.

Bueno, esto ya es loq dare por poo, claro q es mas largo el tema, pero me voy con el dom en la proxima clase.

Espero que lo hagan entendido,

By N3xtdoor.

Estupendo Guiñar