Tópicos(Avanzadosde Programación( Tópicos(Avanzados( de...

Tópicos Avanzados de Programación

Tópicos Avanzados de programación


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 conseguido que se puedan crear páginas con cualquier ordenador y sistema operativo.

Introducción al lenguaje HTML

Estas características son las que marcaron el diseño de todos los elementos del WWW incluida la programación depáginas Web. Como respuesta a todos estos requisitos se creo el lenguaje HTML (HiperText Markup Language),cuyas siglas significan "lenguaje hipertexto de marcas".

Este lenguaje será el encargado de convertir un inocente archivo de texto inicial en una página web con diferentestipos y tamaños de letra, con imágenes impactantes, animaciones sorprendentes, formularios interactivos, etc.

Qué se necesita para crear una página webUna de las características de este lenguaje más importantes para el programador es que no es necesario ningúnprograma especial para crear una página Web. Gracias a ello se ha conseguido que se puedan crear páginas concualquier ordenador y sistema operativo. El código HTML, como hemos adelantado en el párrafo anterior, no esmás que texto y por tanto lo único necesario para escribirlo es un editor de texto como el que acompañan a todoslos sistemas operativos: edit™ en MS-DOS, block de notas en Windows,vi™en UNIX, etc. Por supuesto estos noson los únicos editores de texto que pueden ser usados, sino cualquier otro. También se puede usar procesadoresde texto, que son editores con capacidades añadidas, compo pueden ser Microsoft Word™ o WordPerfect™ perohay que tener cuidado porque en ocasiones hacen traducciones automáticas del código HTML que no siempre sondeseadas. En estos dos últimos casos, también hay que tener en cuenta que deberemos guardar el archivo en modotexto.

Figura 1.2. Un editor de texto simple, como el block de notas de Windows, es todo lonecesario para crear una página Web

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 siguientesson nombres válidos de archivos que contengan código HTML: index.html, index.htm,principal.html,PRINCIPAL.htm, etc...

NOTA: Si el editor o procesador de textos usado para crear la página obliga a usar la extensión .txt al guardar elarchivo en modo texto, deberemos guardarlo con esta extensión, por ejemplo como index.txt, y posteriormente

3


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.


Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir: <hr>


Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir:

<hr>

Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayorque (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

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 lafigura 1.5, es decir le dice al navegador que dibuje una línea horizontal en la pantalla. Esta línea tiene un grosorpredeterminado y un ancho variable en función del tamaño de la ventana del navegador.

Figura 1.5. Uso básico de una etiqueta HTML sin ningún tipo de parámetros. Ejemplousando 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 yel 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 introduce en una etiqueta de la siguiente manera:

<etiqueta atributo="valor">

Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signoigual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas una etiqueta puedetener tantos atributos como se deseen y en ocasiones son necesarios para que la etiqueta tenga algún significado.

En nuestro ejemplo de la línea horizontal existe un atributo llamado SIZE, que significa tamaño en inglés, quepermite controlar el grosor de la línea que será dibujada en pantalla. Veamos un ejemplo, en la figura 1.6 podemosver la línea horizontal con diferentes grosores.

9

Sin embargo hay muchas formas de pintar una línea y sería deseable poder elegir detalles tales como la 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 introduce en una etiqueta de la siguiente manera:

<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 podemos ver la línea horizontal con diferentes grosores.


Figura 1.6. Las etiquetas tienen atributos para cambiar aspectos del efecto que producen.En este ejemplo vemos como se puede cambiar el grosor de una línea con el atributo SIZE.

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.

En la figura 1.6 vemos que el valor numérico que le damos al atributo size no va entrecomillado, por ejemploen <hr size=5>. En HTML no es necesario entrecomillar los valores de los atributos cuando están formadosúnicamente por números [0-9], letras [a-z, A-Z], guiones y puntos. En todo caso es muy recomendable incluirlas comillas siempre. De esta forma no tenemos que preocuparnos de cuando ponerlas y cuando no y a la vezcumplimos el nuevo estándar XHTML. Para los curiosos adelantaremos que XHTML es idéntico a HTML perocon algunas restricciones adicionales del mundo de XML.

Antes de empezar con el código HTML básico conviene hacer saber al lector que aunque en todos los ejemplosusados hasta ahora las etiquetas usadas estaban escritas en mayúsculas en realidad es indiferente el uso de estas ode minúsculas. Sin embargo las mayúsculas son de uso común para que sea más fácil distinguirlas del texto y portanto seguiremos usando este convenio a lo largo del curso.

En los ejemplos también usaremos distinto sangrado (alineación de los párrafos) para los diferentes elementosdel código para mostrar los niveles de anidamiento. Este sangrado no es necesario y el lector puede optar porignorarlo si decide copiar los ejemplos para verlos en su navegador, sin embargo facilita la lectura del código y noafecta al modo en que los objetos de nuestra página serán mostrados.

Primeros pasos con HTML

10

<hr size=5>


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>


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>


http://www.uv.es/cerveron/paginasweb/notashtml.html

Lista de tags básicos de HTML:

Practica: Crear un archivo HTML que tenga como titulo “curso de programacion” y en el cuerpo de la pagina muestre su nombre y numero de control

<html> <head> <title>Topicos Avanzados de Programacion</title> </head> <body> Hola a todos: <br> Nombre: Efrain Padilla Ayala <br> Num. de Control: 90829034 </body> </html>



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


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


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">


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>


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.


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.


Introducción a JavaScript


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


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.


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


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


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

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> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">  </SCRIPT> </HEAD> <BODY onLoad="saludo()"> </BODY> </HTML>

Como se observa, el código JavaScript figura entre las marcas de comentario HTML , 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.


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>


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.


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')



<HTML> <HEAD> <TITLE>Ejemplo 2.1: escritura de cadenas de texto</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </BODY> </HTML>

Ejemplo:


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) }


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)


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>


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.


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">  </script> </head> <body> <noscript> <h2>Esta página requiere JavaScript.</h2> </noscript> </body> </html>


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>


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>


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 }



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…


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



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.


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.


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”


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">  </SCRIPT> </BODY> </HTML>

Date post:	18-Aug-2020
Category:	Documents
Upload:	others
View:	19 times
Download:	0 times

Tópicos(Avanzadosde Programación( Tópicos(Avanzados( de...

Documents