Javascript de Canibales
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Javascript de Canibales

on

  • 2,969 views

presentacion

presentacion

Statistics

Views

Total Views
2,969
Views on SlideShare
2,957
Embed Views
12

Actions

Likes
0
Downloads
13
Comments
1

1 Embed 12

http://www.slideshare.net 12

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • muy bueno
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Javascript de Canibales Presentation Transcript

  • 1. JavaScript Integrantes Miller Caballero Gonzalez Diego Ferney Carrion Muñoz Jorge Enrique Daza Velosa Brayan Esteban Patiño Carrasco
  • 2. Introduccion
    • JavaScript es un lenguaje de script orientado a paginas web que no requiere ser compilado, ya que es interpretado de forma automatica cuando una pagina web se abre.
    • JavaScript fue desarrollado por Netscape y Sun Microsystems en 1995. Es un lenguaje que integra mejoras a las paginas HTML comunes, dandoles mayor funcionalidad, dinamismo, y velocidad.
    • Como contrapeso, Microsoft desarrollo JScript, un lenguaje muy parecido an JavaScript, pero incompatible en ciertas funciones. Por ello la W3C se ha encargado de crear el DOM (Document Object Model), una API que le permite a los programadores web desarrollar una unica version de una pagian web para todo los navegadores. Sin embargo Microsoft ha desarrollado su propio DOM, lo cual genera alguanas incompatibilidades con los navegadores.
  • 3. ¿SE DEBE SABER ROGRAMACÓN BASICA?     En cierto modo antes de diseñar paginas se debe tener presente debe conocer o haber desarrollado programas o proyectos en html u/o xml y conocer un poco de lo que se interpreta en el codigo como las estructuras que se desarrollan en ello y los pasos para que la pagina pudiece funcionar es por ello que debe conocer elementos básicos con los que se construyen las aplicaciones.     En cierto modo si sabe o a programado en otro lenguaje le quedara mas facil interpretar y conocer para desarrollar paginas en javaScript.
  • 4.
    • Sin embargo, es un lenguaje sencillo de entender. Una de estas facilidades se da cuando queremos declarar una variable, en este caso podemos declararla con var, EJ:
    •  
    • var nombre=”Miller”
    • O pueden ser declarada directamente:
    • nombre=”Miller”
    •  
    • De esta forma el programa declarara la variable automaticamente.
    • JavaScript tambien permite realizar operaciones como recoger informacion de formularios, generar ventanas emergentes, crear menus dinamicos, marquesinas especiales, entre otras opciones.
  • 5. Paginas HTML invocando a JavaScript y funciones Esenciales
  • 6. Existen dos propiedades para agregar código en HTML llamando a JavaScript por medio de inclusión directa (incluir código en la pagina HTML por medio de la instrucción script) y realizar llamados por archivos externos (utilizado cuando el numero de líneas de código es muy grande).
  • 7. Ejemplo inclusión directa <script language=&quot;javascript&quot;>//hacer el llamado al lenguaje javascript // código en lenguaje JavaScript </script>   Ejemplo archivo externo Es utilizado con el fin de hacer llamados a otros scripts, cuando el número de líneas de código son muy extensas o cuando el mismo código va ser reutilizable en otras páginas. <script language=&quot;javascript&quot; src=&quot;archivo.js&quot;></script>// hacer el llamado a un //archivo externo. jsp(java script)
  • 8. Funciones esencial del JavaScrpit   Las siguientes funciones JavaScript son análogas cuando utilizamos código para el lenguaje Java, por eso haremos comparaciones entre estos dos lenguajes para entender mejor las instrucciones.
  • 9. Función prompt(): JavaScript variable = prompt (&quot;mensaje&quot;, &quot;mensaje dentro del texto&quot;) Java variable= JOptionPane.showInputDialog( “ escriba en el campo de texto ” ); Cumple la misma funci ó n que el JOptionPane.showInputDialog( “ ESCRIBA.. ” ) en java. Lo que hace la funci ó n prompt es mostrar una ventana donde podamos escribir un campo de texto y mostrar la opci ó n aceptar para mostrar una cadena o cancelar si no se desea enviar nada. Estructura prompt():
  • 10. Función Alert(): JavaScript alert (&quot;mensaje&quot;) Java JOptionPane.showMessageDialog( “ Mensaje ” ) Son cuadro de di á logos previamente etiquetados y muestran mensajes a los usuarios. Com parando alert en Java seria an á logo JOptionPane.showMessageDialog( “ Mensaje ” ) Estructura alert():
  • 11.
      • Función confirm():
      • Cumple la misma función de la instrucción prompt, pero la diferencia es que confirm no da la opción de cuadro de texto como lo hace el prompt.
      • Estructura confirm():
      • valor = confirm (&quot;expresion-javascript&quot;)
      • Función setInterval():
      • Esta función sirve para ejecutar instrucciones cuando se cumple un tiempo dado por el programador, en comparación con Jva seria análogo a la instrucción Synchronized.
      • Estructura de setInterval() :
      • Variable identificador = setInterval(&quot;expresión-javascript&quot;,milisegundos)
  • 12. Ejemplos y explicacion de codigo scripts en JavaScprit  
  • 13. ejemplo1: posicion de una imagen u objeto en la ventana del navegador
    • El script que será presentado a continuación servirá para la utilización de otros ejemplos JavaScript, con el fin de utilizar una imagen que será ubicada en la posición de un objeto en la ventana del navegador. El código permite saber la ubicacion izquierda y superior dentro de la pagina con respecto al margen de la pantalla. El script es un ejemplo de la pagina www. codigo javascript.com/ y se presentara comentarios para que el código sea más entendible.
  • 14. <HTML> <HEAD>   <script language=&quot;javascript&quot;> //parámetros para la posición izquierda en la ventana   this.findLeftObj = function(obj) { /*llamar a una función que guardara un objeto y lo asigna para posicionarlo a la izquierda de la pagina */ var curleft = 0; /*se crea una variable llamada curleft(parte izquierda) if (obj.offsetParent) { /*si el objeto cumple con los parámetros haga..*/ while (obj.offsetParent) { //ciclo, mientras que se cumplan los parametros... curleft += obj.offsetLeft //la variable curleft aumenta y es igual objeto situado en la izqueirda obj = obj.offsetParent; /*el objeto guarda el contenido que se mostrara en la ventana/* } } else { if(obj.x) { curleft += obj.x; //si no, situar el objeto en una coordenada X } } return(curleft); }
  • 15.   / /parametros para la posición superior en la ventana   this.findTopObj = function(obj) { /*llamar a una función que guardara un objeto y lo asigna para posicionarlo en la parte superior de la pagina*/   var curtop = 0; /*se crea una variable llamada curTop(parte superior)*/ if (obj.offsetParent) { /*si el objeto cumple con los parámetros haga../* while (obj.offsetParent) { /*ciclo, mientras que se cumplan los parámetros...*/ curtop += obj.offsetTop /*la variable curleft aumenta y es igual objeto situado en la izqueirda*/   obj = obj.offsetParent; */el objeto guarda el contenido que se mostrara en la ventana*/ } } else { if (obj.y) { curtop += obj.y; /*si no, situar el objeto en una coordenada Y*/ } } return(curtop); }
  • 16. //funcion o metodo para posicionar la imagen   function posicionImagen(imagen) { //toma un objeto de tipo imagen   posXImagen = findLeftObj(imagen); /*asigna en una posición X el objeto imagen el cual llama al método findLeftObj para situar la imagen en la parte izquierda de la ventana*/   posYImagen = findTopObj(imagen); /*asigna en una posición X el objeto imagen el cual llama al método findTopObj para situar la imagen en la parte superior de la ventana/* /* Ventana la cual muestra un mensaje dentro de la página en donde indica las posición izquierdas y superior de la imagen en la página. la instrucción alert la podemos tomar como análoga cuando hacemos un JOPtionPane.showMessage en Java para mostrar mensajes en una ventana, en el caso de javaScript utilizan la instrucción alert para este mismo fin. */ alert('La imagen está en la posición: Left(X) ' + posXImagen + ' Top(Y) ' + posYImagen)   } // Fin de la función posicionImagen()
  • 17. </script>   </HEAD>   // en el cuerpo del script se llama al evento onmouseover que hace un llamado al método posicionImagen   <BODY>   <IMG src=&quot;0.jpg&quot; onmouseover=&quot;posicionImagen(this)&quot; /> /*se crea una variable llamada src de tipo Image la cual llama al evento onmouseover y se invoca al método posicionImagen para obtener la coordenadas en la que se encuentra la imagen*/   <IMG src=&quot;1.jpg&quot; onmouseover=&quot;posicionImagen(this)&quot; /> <IMG src=&quot;2.jpg&quot; onmouseover=&quot;posicionImagen(this)&quot; />     <DIV style=&quot;background-color:#003399; color:#CCCCCC; width:200px; &quot; //mensaje dentro de un cuadro azul onmouseover=&quot;posicionImagen(this)&quot;> /*llama al evento onmouseover y se invoca al método posicionImagen para obtener la coordenadas en la que se encuentra la imagen*/ También podemos saber la posición de una capa o de cualquier objeto cargado en la página. // mensaje dentro de un cuadro azul </DIV>   </BODY> </HTML>
  • 18.  
  • 19. Ejemplos 2: Asignacion Musical A paginas web   Java Scrpit nos permite seleccionar varias obciones para que utilizamos los objetos y no sean solamente estandar sini dinamicos como en Html el bgsound , el cual lo utilizaremos para insertar ficheros musicales de fondo para dichas paginas que el usuarios necesite. Este elemento es accesible a través del document.all del Internet Explorer, de la cual permite asignar de forma dinámica distintos ficheros musicales. NOTA!: El inconveniente es que sólo está soportado a partir de las versiones 4 de este navegador. por lo cual los navegadores de Netscape tienen que recurrir al objeto embed , que permite embeber en la página de dicho fichero musical.
  • 20.
    • Lo que se trata aqui es activar y desactivar el sonido para cada caso, Para el Netscape, basta con usar los métodos play() y stop() del objeto embebido. Auque existen varios ficheros que le permiten al programador asignar un fichero de muSica sin sonido(como el caso de SILENCIO.MID) al objeto bgsound .
    • Ejemplo2:
    • El ejemplo incluye la forma de hacer que el sonido se inicie al poner el puntero del ratón sobre un enlace, y se pare al quitarlo del mismo.
    • <script language=&quot;javascript&quot; type=&quot;text⁄javascript&quot;> ⁄⁄MUSICA EN LA PAGINA ⁄⁄deteccion de versiones ver = parseInt(navigator.appVersion) ⁄⁄internet explorer ie4 = (ver>3 && navigator.appName!=&quot;Netscape&quot;)?1:0 ⁄⁄netscape
  • 21.
    • ns4 = (ver>3 && navigator.appName==&quot;Netscape&quot;)?1:0 ns3 = (ver==3 && navigator.appName==&quot;Netscape&quot;)?1:0 ⁄⁄reproduccion del sonido 
    •  
    • function reproducir() { ⁄⁄para el IE se asigna el fichero musical al objeto bgsound if (ie4) document.all['cancion'].src='⁄ejemplos⁄javascript⁄spring.mid' ⁄⁄para el netscape se usa el metodo play() del objeto embed if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio⁄x-midi'] && self.document.musica.IsReady() ) { self.document.musica.play() } } ⁄⁄detencion de la reproduccion function detener() { ⁄⁄detenemos el sonido asignando un fichero musical sin sonido if (ie4) document.all['cancion'].src='⁄ejemplos⁄javascript⁄silencio.mid' ⁄⁄para el netscape, el metodo stop() detiene el sonido if ((ns4||ns3) && navigator.javaEnabled() && navigator.mimeTypes['audio⁄x-midi'] ) { self.document.musica.stop() } } <⁄script>
  • 22. Operadores
    • Los operadores en java script permiten unir o hacer operaciones con los simbolos matematicos, se utilizan variables en la cual permite tener un solo resultado, este resultado se puede obtener mediante la suma ( + ), resta( - ),multiplicacion( * ) y division( / ). (concatena)
    •  
    •  
    • ejemplo:
    • objeto1=”hola”
    • objeto2=”miller”
    • resultado=objeto1 + objeto2 // “holamiller”
  • 23.
    • Otro operador de java script es el logico que consiste en hacer veridica una afirmacion o falsa si se es caso. es asi que que se utiliza el algebra de booleana o logica matematica para realizar ciertas opreaciones.
    • && - y - and
    • ||- o - or
    • !- no - not
    •  
    • Ejemplo: miBoleano = true miBoleano = !miBoleano //miBoleano ahora vale false tengoHambre = true tengoComida = true comoComida = tengoHambre && tengoComida
  • 24.
    • Mas  opreadores como los condicionales estos operadores se utilizan para realizar comparaciones entres dos o mas objetos.
    •  
    • Operadores: !=diferencia
    • > mayor que
    • < menor que
    • >= mayor igual
    • <= menor igual
    • ==si son iguiales
  • 25.
    • Operador bit a bit
    • Estos operadores transforman los numeros de las operaciones en bits para luego realizar cualquier operacion. Se utilizan los mismos operadores logicos y otros mas que son :
    •  
    • >> se desplaza a la derecha
    • << se desplaza a la izquierda
    • ~   No
    • &  AND
    • I    OR
    • ^   XOR
  • 26.
    • Operador de Asignacion
    • Este operador asigna cualquier valor a distintas  constantes  por un igual que es el aquel que va tener esa funcion de asignacion.
    •  
    • ejemplos:
    •  
    • a=c
    • !=
    • a=a+4
    • a=a^2
  • 27. Los Objetos de Windows
    • Los objetos windows hace referencia a entradas que muestran propiedades y metodos, donde alli se realiza por medio del navegador un objeto independiente de la jerarquia, situando asi todos los componentes de una pagina web para dicha ventana, Todo esto con el fin de mostrar el objeto windows del cual se hace referencia a ventanas actuales. A continuación sus propiedades y sus métodos.
    •  
    •   Propiedades
      • closed. Válida a partir de Netscape 3 en adelante y MSIE 4 en adelante. Es un booleano que nos dice si la ventana está cerrada ( closed = true ) o no ( closed = false ).
      • defaultStatus. Cadena que contiene el texto por defecto que aparece en la barra de estado (status bar) del navegador.
    •  
  • 28.
      • frames. Es un array: cada elemento de este array (frames[0], frames[1], …) es uno de los frames que contiene la ventana. Su orden se asigna según se definen en el documento HTML.
      • history. Se trata de un array que representa las URLS visitadas por la ventana (están almacenadas en su historial).
      • length. Variable que nos indica cuántos frames tiene la ventana actual.
      • location. Cadena con la URL de la barra de dirección.
      • name. Contiene el nombre de la ventana, o del frame actual.
  • 29.
      • opener. Es una referencia al objeto window que lo abrió, si la ventana fue abierta usando el método open() que veremos cuando estudiemos los métodos. 
      • parent. Referencia al objeto window que contiene el frameset.
      • self. Es un nombre alternativo del window actual.
      • status. String con el mensaje que tiene la barra de estado.
      • top. Nombre alternativo de la ventana del nivel superior.
      • window. Igual que self: nombre alternativo del objeto window actual.
  • 30. MUCHAS GRACIAS A TODOS....