SlideShare a Scribd company logo
1 of 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....

More Related Content

What's hot

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
 

What's hot (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
 

Viewers also liked

Diapositivas Daniel
Diapositivas DanielDiapositivas Daniel
Diapositivas Danieldaniel
 
Television educativa
Television educativaTelevision educativa
Television educativaIsrael Solipa
 
Presentación sobre las tablet.
Presentación sobre las tablet.Presentación sobre las tablet.
Presentación sobre las tablet.270681
 
La televison slide
La televison slideLa televison slide
La televison slidemartacs36
 
telefonía en el mmundo
telefonía en el mmundotelefonía en el mmundo
telefonía en el mmundoDalimar_Guzman
 
La historia de la televison
La historia de la televisonLa historia de la televison
La historia de la televisonmariapalomino21
 
Laboratorio la televison
Laboratorio la televisonLaboratorio la televison
Laboratorio la televisonzataymaru
 
linea de tiempo de la televison
linea de  tiempo de la televisonlinea de  tiempo de la televison
linea de tiempo de la televisonmariapaula2001
 
Presentación tablets (Gabriel y Víctor) I.E.S. Alminares
Presentación tablets (Gabriel y Víctor) I.E.S. AlminaresPresentación tablets (Gabriel y Víctor) I.E.S. Alminares
Presentación tablets (Gabriel y Víctor) I.E.S. AlminaresGabrivictor
 
Diapositivas historia del telefono movil
Diapositivas historia del telefono movilDiapositivas historia del telefono movil
Diapositivas historia del telefono movilIngrit1039
 
Introducción a la Robótica Móvil
Introducción a la Robótica MóvilIntroducción a la Robótica Móvil
Introducción a la Robótica MóvilFernando Passold
 
Entornos digitales de enseñanza y aprendizaje
Entornos digitales de enseñanza y aprendizajeEntornos digitales de enseñanza y aprendizaje
Entornos digitales de enseñanza y aprendizajegrintie
 
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...Jorge Herrera
 
Comercio Móvil: tipos, usos y tendencias globales
Comercio Móvil: tipos, usos y tendencias globalesComercio Móvil: tipos, usos y tendencias globales
Comercio Móvil: tipos, usos y tendencias globalesOnline Team
 

Viewers also liked (20)

Diapositivas Daniel
Diapositivas DanielDiapositivas Daniel
Diapositivas Daniel
 
Television educativa
Television educativaTelevision educativa
Television educativa
 
Presentación sobre las tablet.
Presentación sobre las tablet.Presentación sobre las tablet.
Presentación sobre las tablet.
 
La televison slide
La televison slideLa televison slide
La televison slide
 
Presentación1 votine
Presentación1 votinePresentación1 votine
Presentación1 votine
 
telefonía en el mmundo
telefonía en el mmundotelefonía en el mmundo
telefonía en el mmundo
 
Historia del telefono movil me
Historia del telefono movil meHistoria del telefono movil me
Historia del telefono movil me
 
La televisión
La televisiónLa televisión
La televisión
 
La historia de la televison
La historia de la televisonLa historia de la televison
La historia de la televison
 
Laboratorio la televison
Laboratorio la televisonLaboratorio la televison
Laboratorio la televison
 
Tablets
TabletsTablets
Tablets
 
linea de tiempo de la televison
linea de  tiempo de la televisonlinea de  tiempo de la televison
linea de tiempo de la televison
 
Presentación tablets (Gabriel y Víctor) I.E.S. Alminares
Presentación tablets (Gabriel y Víctor) I.E.S. AlminaresPresentación tablets (Gabriel y Víctor) I.E.S. Alminares
Presentación tablets (Gabriel y Víctor) I.E.S. Alminares
 
Diapositivas historia del telefono movil
Diapositivas historia del telefono movilDiapositivas historia del telefono movil
Diapositivas historia del telefono movil
 
Dispositivos móviles.
Dispositivos móviles.Dispositivos móviles.
Dispositivos móviles.
 
Introducción a la Robótica Móvil
Introducción a la Robótica MóvilIntroducción a la Robótica Móvil
Introducción a la Robótica Móvil
 
Informática básica 2011
Informática básica 2011Informática básica 2011
Informática básica 2011
 
Entornos digitales de enseñanza y aprendizaje
Entornos digitales de enseñanza y aprendizajeEntornos digitales de enseñanza y aprendizaje
Entornos digitales de enseñanza y aprendizaje
 
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...
Entornos digitales de enseñanza y aprendizaje colaborativo. (Para ver vídeos ...
 
Comercio Móvil: tipos, usos y tendencias globales
Comercio Móvil: tipos, usos y tendencias globalesComercio Móvil: tipos, usos y tendencias globales
Comercio Móvil: tipos, usos y tendencias globales
 

Similar to Java Script de canibaless

Similar to Java Script de canibaless (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
 

Recently uploaded

activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfRosabel UA
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfEduardoJosVargasCama1
 
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
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxhenarfdez
 
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
 
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
 
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
 
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
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfapunteshistoriamarmo
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docxEliaHernndez7
 
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
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfJonathanCovena1
 
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...JAVIER SOLIS NOYOLA
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAJAVIER SOLIS NOYOLA
 
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
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresJonathanCovena1
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfcarolinamartinezsev
 

Recently uploaded (20)

activ4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdfactiv4-bloque4 transversal doctorado.pdf
activ4-bloque4 transversal doctorado.pdf
 
Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
 
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
 
AEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.pptxAEC 2. Aventura en el Antiguo Egipto.pptx
AEC 2. Aventura en el Antiguo Egipto.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
 
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
 
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
 
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
 
Revista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdfRevista Apuntes de Historia. Mayo 2024.pdf
Revista Apuntes de Historia. Mayo 2024.pdf
 
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
🦄💫4° SEM32 WORD PLANEACIÓN PROYECTOS DARUKEL 23-24.docx
 
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
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Factores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdfFactores que intervienen en la Administración por Valores.pdf
Factores que intervienen en la Administración por Valores.pdf
 
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN  PARÍS. Por JAVIER SOL...
ACERTIJO LA RUTA DEL MARATÓN OLÍMPICO DEL NÚMERO PI EN PARÍS. Por JAVIER SOL...
 
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLAACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
ACRÓNIMO DE PARÍS PARA SU OLIMPIADA 2024. Por JAVIER SOLIS NOYOLA
 
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
 
Novena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan EudesNovena de Pentecostés con textos de san Juan Eudes
Novena de Pentecostés con textos de san Juan Eudes
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por Valores
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 

Java Script de canibaless

  • 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....