comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 0 Respuestas
  • 1461 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5394
  • Actividad:
    40%
  • Reputación 31
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« en: Febrero 24, 2010, 11:06:32 am »
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:

Código: Javascript
  1. <script language="javascript">
  2. <!--
  3. alert ("Pulse aqui para ver su pagina en rojo");
  4. document.bgColor = "red";
  5. //-->
  6. </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:

Código: Javascript
  1. <script language="javascript">
  2. <!--
  3. document.write ("Buenos dias, puerto rico son como las 12 y pico..xD.");
  4. document.write ("HslTeam");
  5. //-->
  6. </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:

Código: Javascript
  1. <script language="javascript">
  2. <!--
  3. var control;
  4. for (control = 1; control <=10; control++)
  5. {
  6. document.write (control + "<br>");
  7. }
  8. //-->
  9. </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:

Código: Javascript
  1. <script language="javascript">
  2. <!--
  3. document.write ("<b>Esto es negrita</b><br>");
  4. document.write ("<i><u>Esto es cursiva</u></i><br>");
  5. //-->
  6. </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:

Código: Javascript
  1. document.write ("Alfa");
  2. document.write ("Omega");
  3. //Ahora introducimos un salto de linea.
  4.  
  5. document.write ("<br>");

//Estas dos palabras apareceran separadas por un espacio.

Código: Javascript
  1. document.writeln ("Alfa");
  2. 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>:

Código: Javascript
  1. <script language="javascript">
  2. <!--
  3. document.write ("<h1>Texto con mi amigo Javascript</h1>");
  4. alert ("Pulsq aqui para ver su pagina en rojo");
  5. document.bgColor = "red";
  6. document.fgColor = "purple";
  7. //-->
  8. </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:

Código: HTML5
  1. <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  2.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  3.       <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  4.          P&aacute;gina con Javascript.
  5.       </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  6.       <No tienes permisos para ver links. Registrate o Entra con tu cuenta language="javascript">
  7.          <!--
  8.         document.write ("<h1>Esto es texto escrito en la página.</h1>");
  9.         //-->
  10.       </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  11.    </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  12.    <No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  13.       <No tienes permisos para ver links. Registrate o Entra con tu cuenta onClick = "document.bgColor='red';document.fgColor='skyblue';">
  14.          Pulse para cambiar los colores.
  15.       </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  16.    </No tienes permisos para ver links. Registrate o Entra con tu cuenta>
  17. </No tienes permisos para ver links. Registrate o Entra con tu cuenta>

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&ntilde;ar
« Última modificación: Abril 18, 2014, 11:17:12 am por Expermicid »


 

¿Te gustó el post? COMPARTILO!



[FLASH] Iniciandose a la programacion en flash

Iniciado por ANTRAX

Respuestas: 2
Vistas: 1345
Último mensaje Marzo 16, 2010, 02:47:30 pm
por Pa531no5
Lenguajes de programación más usados 2016 por Stack Overflow

Iniciado por graphixx

Respuestas: 0
Vistas: 1385
Último mensaje Marzo 18, 2016, 02:09:19 am
por graphixx
[VIDEOTUTORIALES] Serie Fundamentos de programación - 7 Niveles

Iniciado por graphixx

Respuestas: 0
Vistas: 1319
Último mensaje Abril 18, 2016, 08:36:58 pm
por graphixx
Los lenguajes de programación más propensos a fallos de seguridad en la web

Iniciado por graphixx

Respuestas: 0
Vistas: 1458
Último mensaje Enero 18, 2016, 08:12:17 pm
por graphixx
[VIDEOTUTORIALES] Curso de programación web para principiantes.

Iniciado por Vasyyyl

Respuestas: 2
Vistas: 1573
Último mensaje Agosto 23, 2016, 05:03:04 pm
por Vasyyyl