Implantación de aplicaciones Web

Presentación del tema: "Implantación de aplicaciones Web"— Transcripción de la presentación:

1 Implantación de aplicaciones Web
JavaScript Implantación de aplicaciones Web

2 Arquitectura general JavaScript

3 JavaScript Se seguirá la web http://www.javascriptya.com.ar/
Información completa, clara, adicional y totalmente actualizada en En este tema sólo se va a tratar javaScript en el lado del cliente. De ella se tratarán los puntos: 2 elementos generales y estructura: … <script language="javascript"> ó <script type="text/javascript"> document.write('Hola Mundo'); </script> JavaScript es sensible a mayúsculas y minúsculas. // para comentarios de linea /* */ para comentarios de varias lineas Atención al copiar y pegar desde Word o PowerPoint a archivo por problemas con las comillas dobles (“”) y simples (‘’)

4 JavaScript 3 variables e impresión de datos:
Tipos de variable: enteros (100, 260, etc.), reales (1.24, 2.90, 5.00, etc.), cadenas de caracteres ("Juan“ o ‘Juan’, "Compras” o ‘Compras’, etc.), Valores lógicos (true,false) y otros. En la declaración de una variable NO se especifica su tipo y pueden declararse en cualquier parte del código. Declaración e inicialización de una variable: var edad; edad=20; var edad=20; Impresión de una variable en un documento HTML: document.write(edad); -> imprimir una variable document.write(‘Hola caracola’); -> imprimir una cadena document.write(‘<br>’); ->imprimir una marca HTML Se recuerda que javaScript es sensible a mayúsculas y minúsculas.

5 JavaScript 3 entrada de valores por pantalla:
Función prompt es: <variable que recibe el dato>=prompt(<mensaje a mostrar en la ventana>,<valor inicial a mostrar en la ventana>); Ejemplo: var nombre; var edad; nombre=prompt('Ingrese su nombre:','Nombre, por favor'); edad=prompt('Ingrese su edad:','');

6 JavaScript 5 suma y concatenación de variables:
El operador + se utiliza para la suma de números y la concatenación de cadenas. Si las variables no han sido introducidas por teclado se utiliza el + para sumar si son números y para concatenar si son cadenas de caracteres. Si las variables han sido introducidas por teclado y son números si las queremos utilizar como números antes hay que transformarlas de cadenas a enteros con parseInt(varTeclado). Si no realizamos la transformación javaScript tomará esos números como cadenas de caracteres y al aplicarle el + se concatenarán y no se sumarán. Si se quiere convertir cadenas a reales se tiene que utilizar la función parseFloat(varTeclado).

7 JavaScript 6 a 15 estructuras alternativas e iterativas.
Operador Y (AND) es && Operador O (OR) es || Asignación es = Operador igual es == Importante en el switch que no se olvide el break al final de cada caso. default en el switch para ejecutar en caso de que no entre en ningún caso.

8 JavaScript Entorno de programación en JavaScript de Firefox
Buscar la opción de “Depurador” en Firefox. Donde se encuentra en Firefox depende de la versión del navegador.

9 JavaScript Entorno de programación en JavaScript de Firefox
Prueba a depurar código JavaScript con los botones del depurador en los programas con funciones. Se puede probar también con el depurador de Chrome.

10 JavaScript Entorno de programación en JavaScript de Chrome
Ir a Herramientas->Herramientas para desarrolladores

11 JavaScript Entorno desarrollo Firefox vs Chrome vs Firebug Chrome:
Fácil de usar e incorporado en el navegador y rápido. Disposición variable en pantalla. Visualización de variables personalizada. Otras opciones avanzadas (cookies, recursos, auditorias,…) Firefox: Fácil de usar, incorporado en el navegador y muy útil para desarrollos simples. No disposición variable en pantalla. Excelente inspeccionador de elementos HTML. Firebug (extensión de Firefox) Problemas con breakpoints y entorno de depuración de scripts. Buen inspeccionador de elementos HTML y CSS.

12 JavaScript 16 Funciones Tienen la siguiente estructura:
function <nombre de función>(argumento1, argumento2, ..., argumento n) { <código de la función> } Ejemplo definición: function mostrarMensaje() { document.write("Cuidado<br>"); document.write("Ingrese su documento correctamente<br>"); Ejemplo de llamada: mostrarMensaje();

13 JavaScript 17 Funciones con parámetros Ejemplo definición:
function mostrarComprendidos(x1,x2) { var inicio; for(inicio=x1;inicio<=x2;inicio++) { document.write(inicio+' '); } } Ejemplo llamada: var valor1,valor2; valor1=prompt('Ingrese valor inferior:',''); valor1=parseInt(valor1); valor2=prompt('Ingrese valor superior:',''); valor2=parseInt(valor2); mostrarComprendidos(valor1,valor2);

14 JavaScript 18 Funciones que devuelven un valor Ejemplo definición:
function sumarComprendidos(x1,x2) { var inicio; var suma=0; for(inicio=x1;inicio<=x2;inicio++) { suma=suma+inicio;} return suma; } Ejemplo llamada: var valor1,valor2, result; valor1=prompt('Ingrese valor inferior:',''); valor1=parseInt(valor1); valor2=prompt('Ingrese valor superior:',''); valor2=parseInt(valor2); result=sumarComprendidos(valor1,valor2); document.write(result);

15 JavaScript Paso de parámetros por referencia en funciones No existe paso de parámetros por variable o referencia, solo por valor, por tanto no se pueden hacer procedimientos que modifiquen variables en los parámetros. Dicho de otra forma en las funciones de JavaScript no existen parámetros de salida o entrada/salida.

16 JavaScript 19 Programación Orientada a Objetos (POO). Clase Date. Ejemplo: … <SCRIPT type="text/javascript"> function mostrarFechaHora() { var fecha=new Date(); document.write('Hoy es '); document.write(fecha.getDate()); document.write('<br>'); document.write(Los segundos son:'); document.write(fecha.getSeconds()); } //Llamada a la función mostrarFechaHora(); </SCRIPT>

17 JavaScript JavaScript Standard Library
Aquí se encuentran todas las clases y sus correspondientes métodos de la librería estándar de JavaScript así como ejemplos de uso.

18 JavaScript 23 Clase String. Ejemplos
Los string en JavaScript se crean con las ' ' o "". Por ejemplo: 'Juan' o "Juan" son dos string o cadenas de caracteres iguales. Como repaso, se recuerda que el operador + se utiliza para concatenar dos String. Ejemplo: var final='La entrada tiene ' + contador + ' caracteres.'; Aquí se puede ver que se concatena tres String donde dos de ellos son otro String y el restante una variable con un valor. Otros métodos: Propiedad length: retorna la cantidad de caracteres de un objeto String. var nom='Juan'; document.write(nom.length); //Resultado 4

19 JavaScript 23 Clase String. Ejemplos
Método substring (posinicial, posfinal). Retorna un String extraída de otro, desde el carácter 'posinicial' hasta el 'posfinal'-1. cadena3=cadena1.substring(2,5); En este ejemplo, cadena3 contendrá los caracteres 2, 3, 4 sin incluir el 5 de cadena1 (Cuidado que comienza en cero). Método toUpperCase(). Convierte todos los caracteres del String que invoca el método a mayúsculas. Ejemplo: cadena1=cadena1.toUpperCase(); //Conversión cadena1 mayúsculas. Método toLowerCase(). Convierte todos los caracteres del String que invoca el método a minúsculas. Ejemplo: cadena1=cadena1.toLowerCase(); //Conversión cadena1 minúsculas.

20 JavaScript HTML DOM tree JavaScript HTML DOM (Document Object Model)
HTML DOM tree

21 JavaScript Búsqueda de elementos HTML con JavaScript:
Con HTML DOM JavaScript puede: JavaScript puede cambiar los elementos HTML de la página. JavaScript puede cambiar los atributos HTML de la página. JavaScript puede cambiar todos los estilos CSS de la página. JavaScript puede reaccionar a todos los eventos de la página. Búsqueda de elementos HTML con JavaScript: Búsqueda de elementos HTML por id: getElementById (“idHTML"); Búsqueda de elementos HTML por el nombre del tag: getElementsByTagName(“marcaHTML"); Búsqueda de elementos HTML por el nombre de la clase: getElementsByClassName (“clase"); Puede no funcionar en todos los navegadores como por ejemplo Internet Explorer 5,6,7 y 8 (ver

22 JavaScript Búsqueda de elementos HTML por id: getElementById (“idHTML"); <p id="intro">Hello World!</p> <script language="JavaScript"> var x=document.getElementById("intro"); document.write("<p>Texto del id intro: " + x.innerHTML + "</p>"); </script> Hello World! Texto del id intro: Hello World! Con innerHTML obtenemos el contenido de la marca buscada.

23 JavaScript Búsqueda de elementos HTML por tag: getElementByTagName(“nombreTag"); <p>The DOM is very useful.</p> <p>This example demonstrates the <b>getElementsByTagName</b> method</p> <script language="JavaScript"> var y=document.getElementsByTagName("p"); document.write('First paragraph' + y[0].innerHTML); </script> The DOM is very useful. This example demonstrates the getElementsByTagName method First paragraph The DOM is very useful. Con el indice [i] se indica el tag en orden de aparición que se busca. y[1].innerHTML contiene exactamente: This example demonstrates the getElementsByTagName method

24 JavaScript Búsqueda de elementos HTML por el nombre de la clase: getElementsByClassName (“clase"); <style> .Intro{color:#FF0000;} </style> <p class="Intro">The DOM is very useful.</p> <script language="JavaScript"> var y=document.getElementsByClassName("Intro"); document.write('First paragraph ' + y[0].innerHTML); </script> The DOM is very useful. First paragraph The DOM is very useful. Con el indice [i] se indica el tag de la clase en orden de aparición que se busca.

25 JavaScript Cambio del contenido HTML
<p id="intro">Hello World!</p> <script language="JavaScript"> var x=document.getElementById("intro"); x.innerHTML= ' Hola Mundo '; </script> Hola Mundo A la propiedad innerHTML se le puede asignar un valor y por tanto cambiamos el contenido del documento HTML. Cabe destacar que al cambiar el contenido sólo se muestra el contenido nuevo.

26 JavaScript Cambio de un atributo HTML
<p align="left">Parrafo</p> <script language="JavaScript"> var y=document.getElementsByTagName("p"); y[0].align="right"; </script> Parrafo Se selecciona la propiedad en cuestión del objeto HTML buscado y se le asigna el valor deseado. Para acceder a la propiedad se utiliza el operador . al igual que se hizo con la propiedad innerHTML.

27 JavaScript Cambio de un estilo (CSS).
<p id="p2">Hello World!</p> <script language="JavaScript"> document.getElementById("p2").style.color="#0000FF"; document.getElementById("p2").style.fontFamily="Arial"; </script> Hello World! Para cambiar un estilo hay que buscar el objeto, utilizar la propiedad style seguida del estilo a cambiar y asignarle el valor deseado. Se puede cambiar cualquier estilo de la marca seleccionada.

28 JavaScript HTML DOM Style Object
En esta lista al entrar en cada estilo se puede ver información útil como: Descripción detallada del estilo. Sintaxis y forma de uso. Navegadores que soportan este estilo. Ejemplos y plataforma para pruebas. Están la lista de elementos que se pueden modificar con .style

29 JavaScript Eventos HTML DOM
JavaScript puede ser ejecutado cuando ocurra un evento, como por ejemplo un click en un elemento HTML. Para ejecutar por ejemplo el código ante un evento click, hay que incluir código Javascript como un atributo HTML: onclick="JavaScript Code" Ejemplos de eventos HTML. Click del ratón. Carga de una página. Carga de una imagen. Cuando el ratón se mueve sobre un elemento. Cuando un campo de entrada cambia. Cuando los datos de un formulario HTML son enviados …

30 JavaScript Eventos HTML DOM. Primer ejemplo:
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> onclick es el evento asociado a un click de ratón. El código Javascript va entre comillas dobles. ¿Que ocurre cuando se hace click sobre el elemento h1? Se dispara el evento onclick y se ejecuta el código asociado. En este caso es cambiar el contenido de la marca. En DOM se utiliza this para hacer referencia a la propia marca donde se esta ejecutando el código JavaScript. Por tanto en este ejemplo this indica la propia marca h1. Problema propuesto: prueba el mismo ejemplo con el evento onmouseover, onmouseout.

31 JavaScript Eventos HTML DOM. Funciones. Segundo ejemplo
<h1 onmouseover="mOver(this)" onmouseout="mOut(this)">Mouse Over Me</h1> <script language="JavaScript"> function mOver(obj){ obj.innerHTML="Thank You"} function mOut(obj){obj.innerHTML="Mouse Over Me"} </script> Este ejemplo cambia el contenido HTML si el ratón entra o sale de la marca con su correspondiente función asociada.

32 JavaScript document.write: aspecto destacado a tener en cuenta
<button onclick="display()">Dale</button> <script language="JavaScript"> function display(){ document.write("Hola"); } </script> Al ejecutar document.write borramos todo el contenido inicial del documento HTML creado fuera de la zona del lenguaje JavaScript. Prueba este ejemplo y comprueba como se elimina el botón u otras marcas adicionales que pongas. Solución a continuación.

33 JavaScript document.write: aspecto destacado a tener en cuenta
<button onclick="display()">Dale</button> <script language="JavaScript"> function display() { document.getElementById("demo").innerHTML="Hola"; } </script> <p id="demo"></p> Como se ve la marca existe y se cambia su contenido por tanto no se hace un document.write que elimina todo el contenido HTML fuera de las marcas script.

34 JavaScript Asignar eventos utilizando HTML DOM
<button id="myBtn">Dale</button> <script language="JavaScript"> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> Se puede asignar un evento a un elemento HTML DOM simplemente con el operador . y el nombre del evento, al cual hay que asignarle el código Javascript para controlarlo (con function(){codigo JavaScript}).

35 JavaScript Eventos HTML DOM?
Una vez visto los modos básicos de tratar los eventos HTML DOM y su uso con ejemplos de algunos de ellos, se muestra la lista del w3c de los eventos HTML DOM disponibles para JavaScript en En esta lista al entrar en cada evento se puede ver información útil como: Descripción detallada del evento. Sintaxis de uso en HTML y JavaScript. Navegadores que soportan este evento. Marcas HTML para las que se puede utilizar este evento. Ejemplos y plataforma para pruebas.

36 JavaScript Ejemplo ayuda de evento

37 JavaScript Ejemplo evento onchange
<script language="JavaScript"> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> <p>Enter your name:</p> <input type="text" id="fname" onchange="myFunction()"> Con este código se hace que una entrada de texto de un formulario se convierta siempre a mayúsculas. Se hace con el evento onchange que se activa al “cambiar” la entrada de texto.

38 JavaScript 24. Formularios y eventos.
Se puede utilizar JavaScript para descargar el servidor de funcionalidad y evitar intercambios innecesarios entre cliente y servidor. Nuestra actividad en JavaScript es procesar los eventos que generan estos controles (un evento es una acción que se dispara, por ejemplo si se presiona un botón). A los eventos de los objetos HTML se les asocia una función, dicha función se ejecuta cuando se dispara el evento respectivo. En el siguiente ejemplo cada vez que presionamos el botón, se llama a la función incrementar, en la misma incrementamos la variable contador en uno. Hay que tener en cuenta que a la variable contador la definimos fuera de la función para que no se inicialice cada vez que se dispara el evento. La función alert crea una ventana que puede mostrar un mensaje.

39 JavaScript Ejemplo formulario y evento ….
<script type="text/javascript"> var contador=0; function incrementar() { contador++; alert('El contador ahora vale :' + contador); } </script> <form> <input type="button" onClick="incrementar()" value="incrementar"> </form> …

40 JavaScript 24 Controles FORM, BUTTON y TEXT.
<script language="JavaScript"> function mostrar() { var nom=document.form1.nombre.value; alert('Ingreso el nombre:' + nom); } </script> <form name="form1"> Ingrese su nombre: <input type="text" name="nombre"> <br> <input type="button" value="Confirmar" onClick="mostrar()"> </form> Para acceder a los valores del control usamos la propiedad value.

41 JavaScript 26 Control PASSWORD trabajo personal.
27 Control CHECKBOX trabajo personal (similar a control Radio explicado a continuación). CHECKBOX es más sencillo de utilizar que radio.

42 JavaScript 28 Control Radio. <script language="JavaScript">
function mostrarSeleccionado() { if (document.form1.estudios[0].checked) alert('no tienes estudios'); if (document.form1.estudios[1].checked) alert('tienes estudios primarios');} </script> <form name="form1"> <!--estudios [0]--> <input type="radio" name="estudios" value="sin estudios">Sin estudios <br> <!--estudios [1]--> <input type="radio" name="estudios">Primarios <br> <input type="button" value="Mostrar" onClick="mostrarSeleccionado()"> </form>

43 JavaScript 28 Control Radio.
Es importante notar que todos los objetos de tipo radio tienen el mismo name. Luego podemos acceder a cada elemento por medio de un subíndice: if (document.form1.estudios[0].checked) alert('no tienes estudios'); Igual que el checkbox, la propiedad checked retorna true o false, según esté o no seleccionado el control radio.

44 JavaScript El objeto window
Al objeto window lo hemos estado usando constantemente. Representa la ventana del navegador. window es un objeto global. Es bueno hacer notar que todas las funciones y propiedades de window las podemos llamar anteponiéndole el nombre del objeto window seguida del método, o en forma resumida indicando solamente el nombre del método (como lo hemos estado haciendo). Esto es posible ya que el objeto window es el objeto de máximo nivel. Por ejemplo las dos sentencias siguientes son iguales: valor=window.prompt("Ingrese valor",""); es igual a: valor=prompt("Ingrese valor",""); Para reducir la cantidad de caracteres que se escriben normalmente los programas escritos de la segunda forma.

45 JavaScript El objeto Window propiedades y funciones
location: redirección a web history: historial de visitas. navigator: información del navegador screen: información sobre el monitor (resoluciones, …) del navegador.

46 JavaScript Archivo JavaScript externo (*.js)
El lenguaje JavaScript permite agrupar funciones y disponerlas en un archivo separado a la página HTML. Esto trae muchos beneficios: Reutilización de funciones en muchos archivos. No tenemos que copiar y pegar sucesivamente las funciones en las páginas en las que necesitamos. Facilita el mantenimiento de las funciones al encontrarse en archivos separados. Es decir debemos disponer el siguiente código para importar el archivo *.js: <script type="text/javascript" src="funciones.js"></script> Mediante la propiedad src indicamos el nombre del archivo a importar. Luego, podemos llamar dentro de la página HTML, a las funciones que contiene el archivo externo *.js. El archivo *.js como recurso puede estar en cualquier ubicación del sistema o ubicación web, es decir en el src se tiene que indicar la URL del archivo. Por ejemplo: <script type="text/javascript" src=" <script type="text/javascript" src="../funciones/baile/pasos.js"></script>

47 JavaScript Ejemplo archivo JavaScript externo (*.js)
Suponemos la existencia de un archivo funciones.js en la misma ruta que el archivo HTML, con una función retornarFecha(). <html> <head> <title>Problema</title> <script type="text/javascript" src="funciones.js"></script> </head> <body> <script type="text/javascript"> document.write('La fecha de hoy es:'+retornarFecha()); </script> </body> </html>

48 JavaScript jQuery http://www.w3schools.com/jquery/default.asp
jQuery es una biblioteca de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web. jQuery es software libre y de código abierto. jQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en JavaScript que de otra manera requerirían de mucho más código, es decir, con las funciones propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

49 JavaScript ¿ Esto es todo en JavaScript?
NO, rotundamente NO. Esta presentación ha tenido el objetivo de hacer un visión general de JavaScript como lenguaje de programación a modo introductorio. Se han mostrado ejemplos significativos de funcionalidades, librerías, eventos, … pero todo lo explicado no deja de ser una muestra que se puede ampliar en gran medida. Además hay temas que no se han tratado como la gestión avanzada de objetos, creación y eliminación de objetos DOM y uso de JQuery entre otras. Animo a indagar y ampliar los conocimientos en este tema…