SlideShare una empresa de Scribd logo
1 de 33
JavaScript Integrantes Miller Caballero Gonzalez Diego Ferney Carrion Muñoz  Jorge Enrique Daza Velosa Brayan Esteban Patiño Carrasco
Introduccion ,[object Object],[object Object],[object Object]
¿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.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Paginas HTML invocando a JavaScript y funciones Esenciales
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).
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)
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.
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():
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():
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Ejemplos y explicacion de codigo scripts en JavaScprit   
ejemplo1: posicion de una imagen u objeto en la ventana del navegador ,[object Object]
<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); }
  / /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); }
//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()
</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>
 
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.
[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
Operadores ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Los Objetos de Windows ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
DOM (Document Object Model) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Objeto Window de DOM ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Objeto Document de DOM en JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
MUCHAS GRACIAS A TODOS....

Más contenido relacionado

La actualidad más candente

Programacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptProgramacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptRobert Moreira
 
Jyoc java-cap18 swing y java fx
Jyoc java-cap18 swing y java fxJyoc java-cap18 swing y java fx
Jyoc java-cap18 swing y java fxJyoc X
 
jQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptjQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptJacob Flores
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas) Roberto Mejia
 
Script presentacion
Script presentacionScript presentacion
Script presentacionVanne Napa
 
Librería swing java
Librería swing javaLibrería swing java
Librería swing javapgpg2006
 
Combinación ganadora: Plone como CMS, tu framework preferido como frontend
Combinación ganadora: Plone como CMS, tu framework preferido como frontendCombinación ganadora: Plone como CMS, tu framework preferido como frontend
Combinación ganadora: Plone como CMS, tu framework preferido como frontendmenttes
 

La actualidad más candente (15)

Programacion orientada a objetos en javascript
Programacion orientada a objetos en javascriptProgramacion orientada a objetos en javascript
Programacion orientada a objetos en javascript
 
Javascript
JavascriptJavascript
Javascript
 
Jyoc java-cap18 swing y java fx
Jyoc java-cap18 swing y java fxJyoc java-cap18 swing y java fx
Jyoc java-cap18 swing y java fx
 
Java
JavaJava
Java
 
Javascript
JavascriptJavascript
Javascript
 
jQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java scriptjQuery - 01 Conceptos básicos de java script
jQuery - 01 Conceptos básicos de java script
 
Presentación JavaScript
Presentación JavaScriptPresentación JavaScript
Presentación JavaScript
 
Swing
SwingSwing
Swing
 
Swin01
Swin01Swin01
Swin01
 
Java script(diapositivas)
Java script(diapositivas) Java script(diapositivas)
Java script(diapositivas)
 
Clase
ClaseClase
Clase
 
Clase 10 expresiones regulares
Clase 10 expresiones regularesClase 10 expresiones regulares
Clase 10 expresiones regulares
 
Script presentacion
Script presentacionScript presentacion
Script presentacion
 
Librería swing java
Librería swing javaLibrería swing java
Librería swing java
 
Combinación ganadora: Plone como CMS, tu framework preferido como frontend
Combinación ganadora: Plone como CMS, tu framework preferido como frontendCombinación ganadora: Plone como CMS, tu framework preferido como frontend
Combinación ganadora: Plone como CMS, tu framework preferido como frontend
 

Similar a Todo Javascript para canibales

Similar a Todo Javascript para canibales (20)

INFOSAN Objetos en javascript
INFOSAN Objetos en javascriptINFOSAN Objetos en javascript
INFOSAN Objetos en javascript
 
Merry
MerryMerry
Merry
 
Mootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JSMootools Y Otros Frameworks JS
Mootools Y Otros Frameworks JS
 
TEMA Nº 3: ELEMENTOS DE JSP
TEMA Nº 3: ELEMENTOS DE JSPTEMA Nº 3: ELEMENTOS DE JSP
TEMA Nº 3: ELEMENTOS DE JSP
 
Tutorial Java Script
Tutorial Java ScriptTutorial Java Script
Tutorial Java Script
 
Java script
Java scriptJava script
Java script
 
Manual Java Xml Html
Manual Java Xml HtmlManual Java Xml Html
Manual Java Xml Html
 
AJAX EN CURSO PHP
AJAX EN CURSO PHPAJAX EN CURSO PHP
AJAX EN CURSO PHP
 
javascript.ppt
javascript.pptjavascript.ppt
javascript.ppt
 
Introducción JavaScript
Introducción JavaScriptIntroducción JavaScript
Introducción JavaScript
 
Manual De Ajax En Espanol
Manual De Ajax En EspanolManual De Ajax En Espanol
Manual De Ajax En Espanol
 
Ajax
AjaxAjax
Ajax
 
Spring framework
Spring frameworkSpring framework
Spring framework
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Javascript
JavascriptJavascript
Javascript
 
Curso de Desarrollo Web 2
Curso de Desarrollo Web 2Curso de Desarrollo Web 2
Curso de Desarrollo Web 2
 
TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP
TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSPTEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP
TEMA Nº 4: GENERACIÓN DE CONTENIDO DINÁMICO CON JSP
 

Último

PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxiemerc2024
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalJonathanCovena1
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxFernando Solis
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.docRodneyFrankCUADROSMI
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxlclcarmen
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfGruberACaraballo
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfUPTAIDELTACHIRA
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024IES Vicent Andres Estelles
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Juan Martín Martín
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.JonathanCovena1
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptAlberto Rubio
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOluismii249
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfpatriciaines1993
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxroberthirigoinvasque
 

Último (20)

PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 
Concepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptxConcepto y definición de tipos de Datos Abstractos en c++.pptx
Concepto y definición de tipos de Datos Abstractos en c++.pptx
 
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
SESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.docSESION DE PERSONAL SOCIAL.  La convivencia en familia 22-04-24  -.doc
SESION DE PERSONAL SOCIAL. La convivencia en familia 22-04-24 -.doc
 
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptxLA LITERATURA DEL BARROCO 2023-2024pptx.pptx
LA LITERATURA DEL BARROCO 2023-2024pptx.pptx
 
Biografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdfBiografía de Charles Coulomb física .pdf
Biografía de Charles Coulomb física .pdf
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
Sesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronósticoSesión de clase: Fe contra todo pronóstico
Sesión de clase: Fe contra todo pronóstico
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdfNUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
NUEVAS DIAPOSITIVAS POSGRADO Gestion Publica.pdf
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024Prueba libre de Geografía para obtención título Bachillerato - 2024
Prueba libre de Geografía para obtención título Bachillerato - 2024
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.Análisis de los Factores Externos de la Organización.
Análisis de los Factores Externos de la Organización.
 
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).pptPINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
PINTURA DEL RENACIMIENTO EN ESPAÑA (SIGLO XVI).ppt
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 4ºESO
 
Proyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdfProyecto de aprendizaje dia de la madre MINT.pdf
Proyecto de aprendizaje dia de la madre MINT.pdf
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
Lecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigosLecciones 06 Esc. Sabática. Los dos testigos
Lecciones 06 Esc. Sabática. Los dos testigos
 

Todo Javascript para canibales

  • 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.
  • 4.
  • 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.
  • 12. Ejemplos y explicacion de codigo scripts en JavaScprit  
  • 13.
  • 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.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. MUCHAS GRACIAS A TODOS....