1. JavaScript Integrantes Miller Caballero Gonzalez Diego Ferney Carrion Muñoz Jorge Enrique Daza Velosa Brayan Esteban Patiño Carrasco
2.
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.
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="javascript">//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="javascript" src="archivo.js"></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 ("mensaje", "mensaje dentro del texto") 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 ("mensaje") 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():
14. <HTML> <HEAD> <script language="javascript"> //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="0.jpg" onmouseover="posicionImagen(this)" /> /*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="1.jpg" onmouseover="posicionImagen(this)" /> <IMG src="2.jpg" onmouseover="posicionImagen(this)" /> <DIV style="background-color:#003399; color:#CCCCCC; width:200px; " //mensaje dentro de un cuadro azul onmouseover="posicionImagen(this)"> /*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.