Tópicos Avanzados de Programación Tópicos Avanzados de programación tipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc. Qué se necesita para crearAuna página d web Tópicos vanzados e Programación Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no es más que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todos los sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos no son los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadores de texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ pero hay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre son deseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modo texto. Qué se necesita para crear una página web Una de las características de este lenguaje más importantes para el programador es que no es necesario ningún programa especial para crear una página Web. Gracias a ello se ha Figura conseguido que de setexto puedan páginas con de cualquier y 1.2. Un editor simple,crear como el block de notas Windows, ordenador es todo lo necesario para crear una página Web sistema operativo. Una vez hemos escrito el código deberemos guardar el archivo (con formato de texto) con la extensión .html ( o .htm en MS-DOS, Windows 3.1 o cualquier otro sistema que sólo acepte tres letras en la extensión. Los siguientes son nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html, Tópicos Avanzados de Programación Las bases de HTML Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura: <NOMBRE_ETIQUETA> • bien esta otra: <NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA> Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas. <hr> Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos. Tópicos Avanzados de Programación Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros. Por ejemplo la etiqueta <hr> tal y como lo hemos hecho anteriormente daría lugar a la línea que vemos en la figura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosor predeterminado y un ancho variable en función del tamaño de la ventana del navegador. Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir: <hr> Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplo usando la etiqueta <hr> para crear una línea horizontal. Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la anchura y Sin embargo hay formas de pintar línea y sería deseable poder elegir el grosor que va a muchas tener dicha línea. Para especificar este tipo deuna detalles se crearon los atributos de las etiquetas. nuevo como elemento sela introduce en una etiqueta de la siguiente manera: detallesEste tales anchura y el grosor que va a tener dicha línea. Para especificar este tipo de detalles se crearon los atributos de las etiquetas. Este nuevo elemento se <etiqueta atributo="valor"> introduce en una etiqueta de la siguiente manera: Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puede tener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado. <etiqueta atributo="valor"> En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemos ver la línea horizontal con diferentes grosores. Introducción lenguaje HTML de Programación Tópicos Aalvanzados En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, que permite controlar el grosor de la línea que será Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen. dibujadaEnen pantalla. Veamos ejemplo, la de figura podemos ver SIZE. la línea horizontal este ejemplo vemos como se un puede cambiar elen grosor una línea con el atributo con diferentes grosores. El valor que toma el atributo size determina el número de puntos de pantalla o pixeles que debe ocupar, en grosor, la línea. En posteriores capítulos estudiaremos en detalle la etiqueta <hr> y todos sus atributos. <hr size=5> En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemplo en <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formados Tópicos Avanzados de Programación Estructura de una página En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de la etiqueta <html> al principio y al final de la página respectivamente: <html> Código de la página </html> El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo. La cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera: <html> <head> Elementos de la cabecera </head> ... Resto de código de la página ... </html> Tópicos Avanzados de Programación En la cabecera de la página se introduce toda aquella información que afectará a toda la página. En un principio esta información se limitará al título. Este título se indicará con la etiqueta title usando la siguiente sintaxis: <html> <head> <title>Mi primera página WEB</title> </head> </html> el cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body. En su interior introduciremos todos aquellos elementos de los que queremos que conste nuestra página como pueden ser testo, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto. <html> <head> <title>Mi primera página WEB</title> </head> <body> Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les Guste. </body> </html> Tópicos Avanzados de Programación Lista de tags básicos de HTML: http://www.uv.es/cerveron/paginasweb/notashtml.html <html> <head> Practica: <title>Topicos Avanzados de Programacion</title> </head> Crear un archivo HTML que tenga como titulo “curso de <body> programacion” y en el cuerpo de la pagina muestre su Hola a todos: <br> nombre y numero de control Nombre: Efrain Padilla Ayala <br> Num. de Control: 90829034 </body> </html> Tópicos Avanzados de Programación Tópicos Avanzados de Programación Eventos Los eventos son ampliamente utilizados en documentos HTML como una forma de asociar tags HTML a scripts. Dicho de manera simple, los scripts son programas del lado cliente que llevan a cabo una acción y los eventos son aquellas cosas que ocurren que hacen que se ejecuten los scripts (por ejemplo, el puntero del mouse pasando sobre un elemento, la página terminado de cargar su contenido, etc.). La sintaxis usada para definir un evento es muy similar a la sintaxis de un atributo. En este ejemplo mostramos el tag HTML a, con el atributo "href" y los eventos "onmouseover" y "onmouseout". Tópicos Avanzados de Programación Código <a onmouseover="comenzar_funcion()" onmouseout="detener_funcion()" href="reference.html">Referencia</a> Nota que las funciones "comenzar_funcion()" y "detener_funcion()" deben ser escritas en algún lenguage del lado cliente, el cual no será tratado en este sitio. Para leer más acerca de los scripts del lado cliente refiérete a este documento acerca del lenguaje JavaScript. La disponibilidad de eventos depende del tag utilizado, lo que significa que no todos los eventos pueden ser utilizados en todos los elementos. Para ver qué eventos están disponibles para un elemento específico mira la descripción del elemento en esta Tópicos Avanzados de Programación Eventos en HTML Los eventos son una característica de los documentos HTML (presente en otros lenguajes de programación también) que permite a los autores agregar interactividad entre el sitio web y el visitante, al ejecutar programas del lado cliente cuando el visitante (u otro programa) realiza una acción. Por ejemplo, el autor puede hacer que un párrafo cambie de color de su texto cuando el visitante pose el puntero del mouse sobre el mismo. Así como los atributos, los eventos pueden ser definidos fácilmente en el tag de apertura del elemento, con el mismo formato: <nombretag evento="codigo"> Tópicos Avanzados de Programación El contenido del evento es el código que se ejecutará, y debe ser creado utilizando un lenguaje del lado cliente (por ejemplo, JavaScript) que debe ser soportado por el navegador para que funcione. En el ejemplo siguiente, definimos un párrafo que cambia el color de su texto a rojo cuando el mouse pasa por encima, y lo devuelve a negro cuando se retira. Código <p onmouseover="this.style.color='red'" onmouseout="this.style.color='black'"> Este es un texto que cambia de color.</p> Tópicos Avanzados de Programación Lista de eventos onload: el evento "onload" es lanzado cuando el agente de usuario termina de cargar una página o todos los marcos en un ser de marcos. Este evento es exclusivo de los elementos HTML body y HTML framset. onunload: el evento "onunload" es disparado cuando el agente de usuario retira el documento de una ventana o marco. este evento es exclusivo de los elementos HTML body y HTML framset. onclick: el evento "onclick" ocurre cuando se realiza un click sobre el elemento. ondblclick: el evento "ondblclick" es ejecutado cuando se hace un doble click sobre el elemento. onmousedown: el evento "onmousedown" es lanzado cuando el botón del mouse es presionado sobre el elemento (independientemente de que sea soltado o no). onmouseup: el evento "onmouseup" es disparado cuando el botón del mouse se suelta sobre el elemento. onmouseover: el evento "onmouseover" ocurre cuando el mouse es puesto sobre el elemento. onmousemove: el evento "onmousemove" es ejecutado cuando el mouse es movido mientras está sobre el elemento. onmouseout: el evento "onmouseout" es lanzado cuando el mouse se quita de encima de un documento. onfocus: el envento "onfocus" es disparado cuando un elemento recibe el enfoque, bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque: HTML a, HTML area, HTML label, HTML input, HTML select, HTML textarea, y HTML button. Tópicos Avanzados de Programación onblur: el evento "onblur" ocurre cuando el elemento pierde el enfoque bien sea a través del mouse o por navegación tabulada. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque. onkeypress: el evento "onkeypress" es ejecutado cuando una tecla es presionada y luego soltada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque. onkeydown: el evento "onkeydown" es lanzado cuando una tecla es presionada (independientemente de que sea solatada o no) mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque. onkeyup: el evento "onkeyup" es disparado cuando una tecla es solatada mientras el elemento tiene el enfoque. Este evento es exclusivo de aquellos elementos que pueden recibir el enfoque. onsubmit: el evento "onsubmit" ocurre cuando el formulario es enviado. Este evento es exclusivo del elemento HTML form. onreset: el evento "onreset" es ejecutado cuando el formulario es reestablecido a sus valores por defecto. Este evento es exclusivo del elemento HTML form. onselect: el evento "onselect" es lanzado cuando un usuario selcciona texto en un campo de texto. Este evento es exclusivo de los elementos HTML input y HTML textarea. onchange: el evento "onchange" es disparado cuando un control pierde el enfoque y su valor ha sido modificado desde que recibió el enfoque por última vez. Este evento es exclusivo de los elementos HTML input, HTML select y HTML textarea. Tópicos Avanzados de Programación Introducción a JavaScript Tópicos Avanzados de Programación ¿Qué es JavaScript? JavaScript es un lenguaje de scripts desarrollado por Netscape para incrementar las funcionalidades del lenguaje HTML. Sus características más importantes son: JavaScript es un lenguaje interpretado, es decir, no require compilación. El navegador del usuario se encarga de interpretar las sentencias JavaScript contenidas en una página HTML y ejecutarlas adecuadamente. JavaScript es un lenguaje orientado a eventos. Cuando un usuario pincha sobre un enlace o mueve el puntero sobre una imagen se produce un evento. Mediante JavaScript se pueden desarrollar scripts que ejecuten acciones en respuesta a estos eventos. JavaScript es un lenguaje orientado a objetos. El modelo de objetos de JavaScript está reducido y simplificado, pero incluye los elementos necesarios para que los scripts puedan acceder a la información de una página y puedan actuar sobre la interfaz del navegador. Tópicos Avanzados de Programación Lo que JavaScript puede hacer JavaScript le permite crear una interfaz de usuario activa, lo que ofrece retroalimentación a los visitantes según navegan por sus paginas. Puede utilizar JavaScript para asegurarse de que los formularios introducen información valida en los formularios, lo que le ahorrará tiempo de trabajo y dinero. Si sus formularios requieren cálculos, puede realizarlos con JavaScript en el computador del usuario, sin necesidad de ningún proceso del lado del servidor. Los programas que se ejecutan en el computador del usuario se conocen como programas del lado del cliente; los programas que se ejecutan en el servidor se conocen como programas del lado del servidor. Tópicos Avanzados de Programación Lo que JavaScript NO puede hacer JavaScript le permite es un lenguaje del lado del cliente; es decir, esta diseñado para desempeñar su trabajo en su computador (el de usted), no en el servidor. Por ello, JavaScript sufre algunas limitaciones inherentes, la mayoría de ellas por razones de seguridad: Ø JavaScript no permite leer o escribir archivos en las maquinas cliente. Ø JavaScript no permite la lectura o escritura de archivos en las maquinas del servidor. Ø JavaScript no puede cerrar una ventana que no ha abierto Tópicos Avanzados de Programación ¿Cómo introducir JavaScript en el código HTML? Básicamente existen dos formas de introducir un script de JavaScript en una página HTML: Embebido en el código HTML, entre las etiquetas o tags <script> y </script>. El siguiente código muestra un ejemplo de código JavaScript embebido en el HTML de una página. Tópicos Avanzados de Programación El guion se puede colocar en uno de los dos sitios posibles de la pagina HTML: Entre las etiquetas <head> y </head>, o entre las etiquetas <body> y </body> <HTML> <HEAD> <TITLE>Introducción a JavaScript</TITLE> </HEAD> <BODY> <h1> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> document.write(’¡ Hola Mundo !’) </SCRIPT> </h1> </BODY> </HTML> Tópicos Avanzados de Programación Como se observa, el código JavaScript figura entre las marcas de comentario HTML <!-- y -->, para que los navegadores antiguos (que no soportan las etiquetas script) no muestren el código fuente en la página. Además, delante de la marca de cierre de comentario HTML se insertan los caracteres //, que en JavaScript significan ignorar el resto de la línea, para que el intérprete JavaScript no dé error por la línea --> de comentario HTML. <HTML> <HEAD> <TITLE>Introducción a JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-function saludo() { window.alert('¡Bienvenido a JavaScript!') } //--> </SCRIPT> </HEAD> <BODY onLoad="saludo()"> </BODY> </HTML> Tópicos Avanzados de Programación Como archivo .js que se carga con la página HTML. Para ello, debe indicarse en las tags anteriores el nombre y ubicación del archivo .js que contiene el script JavaScript, como en este ejemplo: <HTML> <HEAD> <TITLE>Tutorial de JavaScript</TITLE> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="codigo.js”></SCRIPT> </HEAD> <BODY> </BODY> </HTML> Tópicos Avanzados de Programación Comentarios en JavaScript Los comentarios se utilizan en todos los lenguajes de programación para añadir explicaciones al código. Cuando el intérprete de comandos (o compilador, según el caso) encuentra estas líneas, las ignora. En JavaScript se utiliza el formato de comentarios propio de C/C++. Así, si es para comentar una línea: // comentario de una línea Si el comentario ocupa varias líneas, se usan los carácteres /* (inicio de comentario) y */ (fin de comentario): /* comentario de varias líneas */ Los bloques de código que integran una unidad son encerrados entre los caracteres { y } (por ejemplo, el código de una función, o las sentencias incluidas dentro de un bucle). Por otra parte, JavaScript hace diferencia entre mayúsculas y minúsculas para los nombres de variables y funciones. Tópicos Avanzados de Programación Escritura de cadenas de texto en la página Las cadenas de texto en JavaScript pueden ir entre comillas dobles o simples indistintamente. Lo único que hay que tener en cuenta es utilizar el mismo tipo de comillas en la apertura y cierre de la cadena de texto. Por ejemplo, para escribir la palabra Texto en una página, podemos utilizar indistintamente document.write("Texto") O Bien document.write('Texto') Tópicos Avanzados de Programación Tópicos Avanzados de Programación Ejemplo: <HTML> <HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-document.write('<IMG SRC="imagen.gif">') document.write("<BR><H1>Bienvenido a JavaScript</H1>") //--> </SCRIPT> </BODY> </HTML> Tópicos Avanzados de Programación Ejercicio usando un archivo externo: Realiza un programa que muestre un aviso (alert) al cargarse la pagina (evento onload), llamando a una funcion grabada en un archivo externo (.js) <HTML> <head> <title>USANDO ARCHIVO FUENTE</title> <SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT" SRC="FUNCIONES.JS"></SCRIPT> </head> <body onload="mensaje('Bienvenido a mi pagina')"> <h1 align="center">Hola Mundo!!</h1> <hr> </body </HTML> function mensaje(texto) { alert(texto) } Tópicos Avanzados de Programación Etiqueta Button. Investiga en internet la etiqueta button para conocer su sintaxis, propiedades y eventos relacionados. Posteriormente crea un programa que muestre un boton en pantalla con la leyenda “pruebame” y que al dar clic en el se abra una ventana con un mensaje (alert) Tópicos Avanzados de Programación Código: <html> <head> <title>PRACTICA DE BOTONES USANDO JS</title> <script language="Javascript" type="text/Javascript" src="funciones.js"></script> </head> <body> <input type="button" name="btn1" value="Pruebame!" onClick="mensaje('bien hecho!!')" style="font-size:14pt" align="center"></input> <br> </body> </html> Tópicos Avanzados de Programación Práctica : Realiza un programa en html con javascript que despliegue una pagina donde se muestren 3 botones, los cuales muestren en una ventana de alerta su nombre, numero de control y la escuela al hacer clic en cada uno de ellos respectivamente. Tópicos Avanzados de Programación Como avisar al usuario. Puede crear una ventana de alerta que se abrirá y dará a los usuarios la información imprescindible sobre su pagina. Basta con colocar el texto que debe aparecer en la ventana dentro del método alert() y entre comillas. <html> <head> <title>mi página JavaScript</title> <script language="JavaScript"> <!-alert(“Bienvenido a mi página JavaScript!”) //--> </script> </head> <body> <noscript> <h2>Esta página requiere JavaScript.</h2> </noscript> </body> </html> Tópicos Avanzados de Programación Confirmación de la elección del usuario Al tiempo que es útil proporcionar información al usuario, en ocasiones también necesitara obtener información a cambio. El siguiente guion muestra como averiguar si el usuario acepta o rechaza una pregunta. <html> <head> <title>Mi página JavaScript</title> <script language="JavaScript"> <!— if (confirm(“Esta seguro de querer continuar?”)) { alert(“Ha respondido que SI”) } else { alert(“Ha respondido que NO”) } //--> </script> </head> <body> <noscript> <h2>Esta página requiere JavaScript.</h2> </noscript> </body> </html> Tópicos Avanzados de Programación Como interrogar al usuario En ocasiones, en lugar de formular una simple pregunta del tipo SI/NO, necesita una respuesta mas específica. Al método Prompt() se le pasan dos fragmentos de información (parámetros), la pregunta que se le formulara al usuario y la respuesta predeterminada. <html> <head> <title>Mi página JavaScript</title> <script language="JavaScript"> <-resp = prompt(“Esta seguro de querer hacer esto?”, “”) if (resp) { alert(“Ha respondido: ”+resp) } else { alert(“Ha rehusado contestar”) } //--> </script> </head> <body> <noscript> <h2>Esta página requiere JavaScript.</h2> </noscript> </body> </html> Tópicos Avanzados de Programación Uso de condicionales mutinivel. En ocasiones necesitara mas de dos opciones en una prueba condicional. Aunque es posible recurrir a varios niveles de if anidados, es mucho mas sencillo utilizar una sentencia switch/case. Switch (valor) { Case “opción 1”: //instrucciones break Case “opción 2”: //instrucciones break Case “opción 3”: //instrucciones break } Tópicos Avanzados de Programación Tópicos Avanzados de Programación Ejercicio 1: Realizar un programa que muestre un botón para cada marca automotriz (ford, vokswagen, seat, honda, toyota), y que al hacer clic sobre el botón, muestre el nombre de un auto de esa marca. Esto deberá hacerlo utilizando la estructura switch/case Ejercicio 2: Realizar un programa que contenga una caja de texto y un botón, el objetivo es que al hacer clic en el botón, el programa deberá mostrar en un alert el texto introducido en la caja de texto. Muestra… Tópicos Avanzados de Programación Manipulación de errores Es bueno pensar que la mayoría de los visitantes a su sitio no tienen experiencia en computación o sistemas, por lo que, deberá ofrecer mensajes de error significativos, en lugar de los mensajes técnicos que la mayoría de los navegadores devuelven, si la fuente del error es lo que el usuario ha hecho. Para esto utilizaremos los comandos try/throw/catch Tópicos Avanzados de Programación Tópicos Avanzados de Programación Creación de imágenes de sustitución Tenemos dos imágenes, la primera, o imagen original, se carga y se visualiza con el resto de la pagina. Cuando el usuario mueve el ratón sobre la imagen original, el navegador la cambia rápidamente por la segunda, o imagen de sustitución, creando la ilusión de movimiento o animación. Tópicos Avanzados de Programación Ejercicio 3: Realice un programa que muestre una pagina con 3 imágenes, las cuales sean sustituidas por otras al pasar el mouse sobre ellas. Tópicos Avanzados de Programación Bucles: for For (i=0; i<5; i++) { sentencias } Esta línea inicia el bucle. La variable i se utiliza para denominar a la variable que será empleada como contador. Primero, i se establece a cero. Un punto y coma señala que hay otra sentencia en la misma línea. La sentencia se lee así; “si i es menor que 5, entonces añadir 1 al valor de i” Tópicos Avanzados de Programación Ejemplo para insertar una tabla con “n” numero de filas y 3 columnas <HTML> <HEAD> <TITLE>creando una tabla usando bucles</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-ans=prompt("de cuantas filas quieres la tabla?","") document.write("<table border='1' cellspacing='4' cellpadding='4'>") document.write("<tr bgcolor='#cccccc'><th>NOMBRE<\/th><th>ESCUELA<\/th><th>MATRICULA<\/th><\/tr>") for (i=1; i<=ans; i++) { document.write("<tr bgcolor='#cccccc'><td>fila "+i+"<\/td><td>fila "+i+"<\/td><td>fila "+i+"<\/td><\/tr>") } //--> </SCRIPT> </BODY> </HTML>