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 JavaScript introducción funciones esenciales

Similar a JavaScript introducción funciones esenciales (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

PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdfGabrieldeJesusLopezG
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORGonella
 
Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.profandrearivero
 
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docx
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docxIII SEGUNDO CICLO PLAN DE TUTORÍA 2024.docx
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docxMaritza438836
 
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOMARIBEL DIAZ
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTESaraNolasco4
 
los cinco reinos biologicos 0 de los seres vivos
los cinco reinos biologicos 0 de los seres vivoslos cinco reinos biologicos 0 de los seres vivos
los cinco reinos biologicos 0 de los seres vivosOrdinolaSernaquIrene
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOEveliaHernandez8
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfvictorbeltuce
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfssuser50d1252
 
describimos como son afectados las regiones naturales del peru por la ola de ...
describimos como son afectados las regiones naturales del peru por la ola de ...describimos como son afectados las regiones naturales del peru por la ola de ...
describimos como son afectados las regiones naturales del peru por la ola de ...DavidBautistaFlores1
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALEDUCCUniversidadCatl
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdfRAMON EUSTAQUIO CARO BAYONA
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxRAMON EUSTAQUIO CARO BAYONA
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsxJuanpm27
 

Último (20)

PPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptxPPTX: La luz brilla en la oscuridad.pptx
PPTX: La luz brilla en la oscuridad.pptx
 
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdfPRIMER GRADO SOY LECTOR PART1- MD  EDUCATIVO.pdf
PRIMER GRADO SOY LECTOR PART1- MD EDUCATIVO.pdf
 
DETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIORDETALLES EN EL DISEÑO DE INTERIOR
DETALLES EN EL DISEÑO DE INTERIOR
 
Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.Abregú, Podestá. Directores.Líderes en Acción.
Abregú, Podestá. Directores.Líderes en Acción.
 
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docx
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docxIII SEGUNDO CICLO PLAN DE TUTORÍA 2024.docx
III SEGUNDO CICLO PLAN DE TUTORÍA 2024.docx
 
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADOPLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
PLAN DE TUTORIA- PARA NIVEL PRIMARIA CUARTO GRADO
 
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE4º SOY LECTOR PART2- MD  EDUCATIVO.p df PARTE
4º SOY LECTOR PART2- MD EDUCATIVO.p df PARTE
 
los cinco reinos biologicos 0 de los seres vivos
los cinco reinos biologicos 0 de los seres vivoslos cinco reinos biologicos 0 de los seres vivos
los cinco reinos biologicos 0 de los seres vivos
 
recursos naturales america cuarto basico
recursos naturales america cuarto basicorecursos naturales america cuarto basico
recursos naturales america cuarto basico
 
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADOCUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
CUADERNILLO DE EJERCICIOS PARA EL TERCER TRIMESTRE, SEXTO GRADO
 
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdfMapa Mental de estrategias de articulación de las areas curriculares.pdf
Mapa Mental de estrategias de articulación de las areas curriculares.pdf
 
VISITA À PROTEÇÃO CIVIL _
VISITA À PROTEÇÃO CIVIL                  _VISITA À PROTEÇÃO CIVIL                  _
VISITA À PROTEÇÃO CIVIL _
 
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdfFichas de Matemática TERCERO DE SECUNDARIA.pdf
Fichas de Matemática TERCERO DE SECUNDARIA.pdf
 
Sesión La luz brilla en la oscuridad.pdf
Sesión  La luz brilla en la oscuridad.pdfSesión  La luz brilla en la oscuridad.pdf
Sesión La luz brilla en la oscuridad.pdf
 
describimos como son afectados las regiones naturales del peru por la ola de ...
describimos como son afectados las regiones naturales del peru por la ola de ...describimos como son afectados las regiones naturales del peru por la ola de ...
describimos como son afectados las regiones naturales del peru por la ola de ...
 
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMALVOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
VOLUMEN 1 COLECCION PRODUCCION BOVINA . SERIE SANIDAD ANIMAL
 
05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf05 Fenomenos fisicos y quimicos de la materia.pdf
05 Fenomenos fisicos y quimicos de la materia.pdf
 
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docxMODELO DE INFORME DE INDAGACION CIENTIFICA .docx
MODELO DE INFORME DE INDAGACION CIENTIFICA .docx
 
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
3. Pedagogía de la Educación: Como objeto de la didáctica.ppsx
 
Aedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptxAedes aegypti + Intro to Coquies EE.pptx
Aedes aegypti + Intro to Coquies EE.pptx
 

JavaScript introducción funciones esenciales

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