SlideShare una empresa de Scribd logo
1 de 30
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]
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
 

Destacado

Destacado (14)

timothy m
timothy mtimothy m
timothy m
 
openTRANS - XML Standard für den elektronischen Geschäftsverkehr
openTRANS - XML Standard für den elektronischen GeschäftsverkehropenTRANS - XML Standard für den elektronischen Geschäftsverkehr
openTRANS - XML Standard für den elektronischen Geschäftsverkehr
 
C.E.Weldon Resume
C.E.Weldon ResumeC.E.Weldon Resume
C.E.Weldon Resume
 
Die Frau
Die FrauDie Frau
Die Frau
 
Vorstellung Eines PR Geeigneten Cms 16
Vorstellung Eines PR Geeigneten Cms 16Vorstellung Eines PR Geeigneten Cms 16
Vorstellung Eines PR Geeigneten Cms 16
 
Horn Poster
Horn PosterHorn Poster
Horn Poster
 
04
0404
04
 
Jessica Brown_Resume_Web
Jessica Brown_Resume_WebJessica Brown_Resume_Web
Jessica Brown_Resume_Web
 
A Survey of provenance management in wireless sensor network
A Survey of provenance management in wireless sensor networkA Survey of provenance management in wireless sensor network
A Survey of provenance management in wireless sensor network
 
Catz1
Catz1Catz1
Catz1
 
Benson Park Sculpture Garden
Benson Park Sculpture GardenBenson Park Sculpture Garden
Benson Park Sculpture Garden
 
Benjamin Webster Final Presentation
Benjamin Webster Final PresentationBenjamin Webster Final Presentation
Benjamin Webster Final Presentation
 
Trabajo práctico de tango
Trabajo práctico de tangoTrabajo práctico de tango
Trabajo práctico de tango
 
Andrea resume
Andrea resumeAndrea resume
Andrea resume
 

Similar a Javascript de Canibales

Similar a Javascript de 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

Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOPsicoterapia Holística
 
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
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primariaWilian24
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxNadiaMartnez11
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnnlitzyleovaldivieso
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptxRigoTito
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdfValeriaCorrea29
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptNancyMoreiraMora1
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Katherine Concepcion Gonzalez
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
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
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...jlorentemartos
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptxEL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptxsisimosolorzano
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxpvtablets2023
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOluismii249
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 

Último (20)

Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADOTIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
TIENDAS MASS MINIMARKET ESTUDIO DE MERCADO
 
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
 
6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria6°_GRADO_-_MAYO_06 para sexto grado de primaria
6°_GRADO_-_MAYO_06 para sexto grado de primaria
 
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
 
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docxTALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
TALLER DE DEMOCRACIA Y GOBIERNO ESCOLAR-COMPETENCIAS N°3.docx
 
semana 4 9NO Estudios sociales.pptxnnnn
semana 4  9NO Estudios sociales.pptxnnnnsemana 4  9NO Estudios sociales.pptxnnnn
semana 4 9NO Estudios sociales.pptxnnnn
 
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
2 REGLAMENTO RM 0912-2024 DE MODALIDADES DE GRADUACIÓN_.pptx
 
Abril 2024 - Maestra Jardinera Ediba.pdf
Abril 2024 -  Maestra Jardinera Ediba.pdfAbril 2024 -  Maestra Jardinera Ediba.pdf
Abril 2024 - Maestra Jardinera Ediba.pdf
 
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.pptFUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
FUERZA Y MOVIMIENTO ciencias cuarto basico.ppt
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLAACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
ACERTIJO DE POSICIÓN DE CORREDORES EN LA OLIMPIADA. Por JAVIER SOLIS NOYOLA
 
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
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptxEL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
EL HABITO DEL AHORRO en tu idea emprendedora22-04-24.pptx
 
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptxRESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
RESULTADOS DE LA EVALUACIÓN DIAGNÓSTICA 2024 - ACTUALIZADA.pptx
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 

Javascript de 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. MUCHAS GRACIAS A TODOS....