Está en la página 1de 144

SERVICIO NACIONAL DE ADIESTRAMIENTO EN TRABAJO INDUSTRIAL

DESARROLLO
DE SOFTWARE

MANUAL DE APRENDIZAJE

FUNDAMENTOS DE
PROGRAMACIÓN WEB

CÓDIGO: 89001739

Profesional Técnico
FUNDAMENTOS DE PROGRAMACIÓN WEB

ÍNDICE

TAREA N° CONTENIDO N° PÁG.


I. DESCRIPCIÓN GENERAL DE HTML5. VISIÓN GENERAL CSS. 7
1. Estructura Global. 10
2. Creación de un modelo básico CSS. 33
3. Creación de un Formulario de Contacto. 39
4. Creación de una aplicación web utilizando VISUAL STUDIO 2013 42
II. OPERACIONES CON JAVASCRIPT. 47
5. Variables y operadores. 50
6. Creación de funciones. 52
7. Validaciones. 80
8. Creación de arrays y objetos con JSON. 83
9. Creación del DOM. 84
10. Creación de una función con JQUERY. 85
III. CREACIÓN DE FORMULARIOS CON VALIDACIÓN DE ENTRADA. 91
11. Validación de entrada con atributos HTML5. 91
12. Validación de entrada usando JAVASCRIPT. 94
13. Inserción de audio y video. 101
14. Api Form 105
IV. CREACIÓN DE OBJETOS GRÁFICOS Y CANVAS. 107
15. Preparación de un canvas. 107
16. Dibujando en el lienzo. 108
17. Gráficos con SVG. 109
18. Programando objeto gráfico usando canvas API. 113
19. Storage. 115
20. Creación de gráficos avanzados. 116
V. ADAPTABILIDAD DE INTERFACE DE USUARIO. 122
21. Soporte en múltiples forms. 122
22. Creando adaptabilidad user Interface. 130
23. Geolocalización. 135

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 5


FUNDAMENTOS DE PROGRAMACIÓN WEB

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 6


FUNDAMENTOS DE PROGRAMACIÓN WEB

I. DESCRIPCIÓN GENERAL DE HTML5, VISIÓN GENERAL CSS.


El Profesional Técnico en Desarrollo web al término de esta tarea podrá
identificar, reconocer y aplicar en una visión general del HTML5 orientado a
mejorar la presentación y estilo de una página web esta tarea deberá
desarrollar las siguientes operaciones.

- Creación de la Estructura Global.


- Creación de un modelo básico en CSS.
- Creación de un formulario de contacto.
- Creación de una Aplicación web utilizando Visual Studio 2013.

EQUIPOS Y MATERIALES.

- 1 Computador con tecnología Core 2 Duo con velocidad de 3.16 Ghz –


Superior.
- Software Microsoft visual Net 12– Superior – Netbeans.

1.1. ORDEN DE EJECUCIÓN.


- Utiliza estructura de diseño.
- Identifican tipos de operadores.
- Crea estilos de presentación.
- Identifican e implementa presentación a través de página.
- Operaciones con JavaScript.
- Creación de formularios con validación de entrada.
- Creación de objetos gráficos y canvas.
- Adaptabilidad de interface de usuario.

1.2. OPERACIONES.

1.2.1. NORMAS DE SEGURIDAD Y PROTECCIÓN AMBIENTAL.

NORMAS DE SEGURIDAD.
- Identificar el lugar de los extinguidores y la ubicación de las salidas del
laboratorio.
- Recordar dónde está situado el botiquín.
- No poner en funcionamiento un equipo de laboratorio sin que el instructor
haya revisado la instalación.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 7


FUNDAMENTOS DE PROGRAMACIÓN WEB

- No utilizar ninguna herramienta o equipo sin conocer su uso, funcionamiento


y normas de seguridad específicas.
- Manejar con especial cuidado el material frágil.
- Informar al instructor del material roto o averiado.
- No fumar, comer o beber en el taller.
- Guardar prendas y objetos personales, no dejarlos sobre la mesa de trabajo.
- Procurar no andar de un lado para otro sin motivo y, sobre todo, no correr
dentro del laboratorio.
- Tener siempre las manos limpias y secas. Si se tiene alguna herida
protegerla.
- Mantener el puesto de trabajo limpio y ordenado, para evitar accidentes.

NORMAS DE PROTECCIÓN AMBIENTAL.


- Los componentes electrónicos son tóxicos.
- Si se salpica sobre la mesa, limpiar con agua y secar después con un paño.
- Al acabar la práctica, limpiar y ordenar el material utilizado.
Los desechos tóxicos, generados en la tarea deben ser recolectados y
entregados al instructor para ser depositados en el tacho correspondiente.

IMPORTANTE:
Habilitar las líneas de código en caso de errores (line member).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 8


FUNDAMENTOS DE PROGRAMACIÓN WEB

ESTRUCTURA GENERAL DE UNA PÁGINA EN HTML5


II. Uso de operadores

CASO APLICATIVO 1.
<!DOCTYPE html>
<html lang="es">
<head>
<title>SEMANA </title>
<meta charset="utf-8" />
</head>
<body>
<header>
<h1>Bienvenidos a Senati </h1>
<p>Mi webSite creado en html5</p>
</header>
<section>
<article>
<h2>Div con ID Post <h2>
<p> Contenido (ademas de imagenes, citas, videos etc.) </p>
</article>
</section>
<aside>
<h3>Barra lateral </h3>
<p>contenido</p>
</aside>
<footer>
Pie de pagina
Autor : Haml el 2016
</footer>
</body>
</html>
III. Tipos de datos, alcances y variables

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 9


FUNDAMENTOS DE PROGRAMACIÓN WEB

1. ESTRUCTURA GLOBAL.
IV. Variables estáticas
Las etiquetas más importantes son:

<!DOCTYPE html>
Es la declaración del tipo de documento que se está mostrando.
El DOCTYPE variará según el tipo de documento realizado, en nuestro ejemplo
hemos utilizado el doctype del HTML5

<header>: Es el equivalente a la cabecera de la página web. Contiene el título


o nombre de la empresa/titular de la página, logo e información relacionada.

<nav>: Contiene los enlaces (barra de navegación) externos o internos de la


página.

<section>: Es una gran caja que sirve para mostrar grandes bloques de
contenido de la página. Puede contener diferentes subapartados de diferentes
temas (de tipo <article>).

<article>: Es una caja independiente de contenido que puede estar contenida


(o no) dentro de un <section>. Normalmente utilizada para contenidos no
demasiado extensos.

<aside>: Define un bloque de contenido relacionado de manera indirecta con el


contenido principal, pero que no es esencial para la compresión del mismo.

<footer>: Equivale al pie de página de un apartado concreto


(<section>, <article>...) o de la página web en general.

Nota: El lenguaje html5 trabaja bajo etiquetas a través de un


lenguaje de marcas

Entornos de trabajo:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 10


FUNDAMENTOS DE PROGRAMACIÓN WEB

CABECERAS.

En un documento de HTML se pueden indicar seis tipos de cabeceras


(tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y
<H6>. El texto que se escriba entre el inicio y el fin de la directiva será el
afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en
mayor tamaño.

Ejemplo: Se vería como:

<H1>Texto de Prueba</H1> Texto de prueba


<H2>Texto de Prueba</H2> Texto de Prueba
<H3>Texto de Prueba</H3> Texto de Prueba
<H4>Texto de Prueba</H4> Texto de Prueba
<H5>Texto de Prueba</H5> Texto de Prueba

<H6>Texto de Prueba</H6> Texto de Prueba

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 11


FUNDAMENTOS DE PROGRAMACIÓN WEB

ATRIBUTOS DEL TEXTO.


Para indicar atributos del texto (negrilla, subrayado, etc...) se tienen varias
directivas. Algunas de ellas no son reconocidas por determinados navegadores
de Internet, es por ello que según el navegador que esté utilizando, se verá el
resultado correctamente o no.

Atributo Directiva Ejemplo Resultado


Negrita <B></B> <B>Texto de prueba</B> Texto de prueba
Cursiva <I></I> <I>Texto de prueba</I> Texto de prueba
Teletype <TT></TT> <TT>Texto de prueba</TT> Texto de prueba
Subrayado <U></U> <U>Texto de prueba</U> Texto de prueba
Tachado <S></S> <S>Texto de prueba</S> Texto de prueba
Parpadeo <BLINK></BLINK> <BLINK>Texto de prueba</BLINK> Texto de prueba
Texto de prueba
Superíndice <SUP></SUP> <SUP>Texto de prueba</SUP>
Subíndice <SUB></SUB> <SUB>Texto de prueba</SUB> Texto de prueba

Centrado <CENTER></CENTER> <CENTER>Texto de prueba</CENTER> Texto de prueba

Por otro lado la directiva <FONT></FONT> permite variar el tamaño, el color, y


el tipo de letra de un texto determinado. Utiliza para ello los parámetros size,
bgcolor y face.

size = valor
Da al texto un tamaño en puntos determinado.

size = +/- valor


Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el
valor.

color = "código de color"


Escribe el texto en el color cuyo código se especifica.

face = "nombre de font"


Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en
el ordenador que "lee" la página se usará el font predeterminado del
navegador.

Ejemplo Se vería como


<FONT size=+2 color="#FF0000” face="Arial"> Texto de prueba
Texto de prueba
</FONT>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 12


FUNDAMENTOS DE PROGRAMACIÓN WEB

Énfasis.
HTML define cuatro elementos que denotan un cambio de énfasis en el texto
que rodean a partir del texto de que están anidados:

- <strong> identifica el texto que es más importante que su texto circundante.


El navegador generalmente hace este contenido en negrita.
- <em> identifica el texto que debe ser subrayado. El navegador por lo general
hace que este contenido en cursiva.
- <b> y <i> identificar el texto que va a prestar en negrita o en cursiva,
respectivamente,

Ejemplo 01.
<!doctype=html>
<html lang="es">
<meta charset="utf-8">
<body>
<h1 class="blue">Una introducción a los elementos, las etiquetas y contenidos</h1>
<p>
<strong>Elementos</strong> consiste en <strong> contenido</strong> dando enfasis
<em>Inicio</em> dando enfasis <em>Fin</em> etiqueta.
</p>
<hr />
<p>

Ciertos elementos, como la elemento de la barra horizontal, no necesitan


contenido embargo y constan de un solo elemento, de cierre automático.

Estos son conocidos como los elementos.


</p>
Ejemplo
<p>
<em>El dinero</em> es importante pero <strong>la salud</strong> lo es más.
</p>
</body>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 13


FUNDAMENTOS DE PROGRAMACIÓN WEB

Resultado:

CASO PRÁCTICO DE USO CONTROLES:

Caso práctico uso del datalist.


<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<inputid="Categorias"list="RangoEdades"/>
<datalistid="RangoEdades">
<optionvalue="0 años"></option>
<optionvalue="1-5 años"></option>
<optionvalue="6-10 años"></option>
<optionvalue="11-17 años"></option>
<optionvalue="Adultos"></option>
</datalist>
</body>
</html>

Caso práctico del select.


<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<selectid="Categorias">
<optgrouplabel="Ferretería">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 14


FUNDAMENTOS DE PROGRAMACIÓN WEB
<optionvalue="herramientas"> Herramientas</option>
<optionvalue="pinturas">Pinturas</option>
</optgroup>
<optgrouplabel="Grifería">
<optionvalue="exteriores">Exteriores</option>
<optionvalue="interiores">Interiores</option>
</optgroup>
<optgrouplabel="Eléctrico">
<optionvalue="luninarias">Luminarias</option>
<optionvalue="focos">Focos</option>
</optgroup>
</select>
</body>
</html>

TEXTO EN MOVIMIENTO

Se puede poner un texto que se desplace por la pantalla; esto recibe el nombre
de Marquesina (marquee en inglés).

La etiqueta es...
<MARQUEE>Este texto se desplaza</MARQUEE>

Parámetros del Marquee:

- WIDHT, HEIGHT ajustan el ancho y alto de la marquesina. Pueden ser igual


a un número de pixels, o a un porcentaje de la pantalla...
- BEHAVIOR (comportamiento en inglés) definirá la forma de ejecutar el
desplazamiento del texto. Sus valores pueden ser:
BEHAVIOR=SCROLL (el texto aparecerá por el lado derecho y
desaparecerá por el izquierdo).
BEHAVIOR=SLIDE (el texto aparecerá por el lado derecho y se detendrá al
llegar al izquierdo).
BEHAVIOR=ALTERNATE... lo ponemos en una página y vemos qué pasa...
- BGCOLOR="#FF0000" (color de fondo de la marquesina).
- DIRECTION=LEFT o RIGHT (modifica la dirección de desplazamiento).
- SCROLLAMOUNT=XX (define la cantidad de desplazamiento en pixeles de
cada movimiento de avance).
- LOOP=XX (veces que el texto aparecerá, si no está, aparecerá
indefinidamente).
- HSPACE=XX, VSPACE=XX (separa la marquesina del texto de la página en
lo horizontal y vertical tantos píxeles como se le indique).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 15


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplos:
<MARQUEE WIDTH=70% HEIGHT=60> Esta marquesina ocupa el 70 % del
ancho de la pantalla y tiene una altura de 60 pixels </MARQUEE>

<MARQUEE BEHAVIOR=ALTERNATE>Movimiento alternado de izquierda a


derecha y viceversa</MARQUEE>

COMENTARIOS.
Para incluir comentarios en la página Web se utiliza la directiva <!-- -->.

Ejemplo:
<!-- Esto es un comentario sobre mi página Web -->

Los comentarios no serán mostrados por el navegador y son útiles para realizar
anotaciones en el documento HTML que nos indiquen lo que estamos haciendo
en una determinada parte del documento. Asimismo, se verá más adelante que
la directiva de comentario nos será de utilidad para incluir código JavaScript en
nuestra página Web.

LISTAS DE ELEMENTOS.

Existen tres tipos de listas:


- Lista numeradas.
- Lista sin numerar.
- Lista de definición.

LAS LISTAS NUMERADAS: Representarán los elementos de la lista


numerando cada uno de ellos según el lugar que ocupan en la lista. Para este
tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la
lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los
siguientes parámetros:

start = num
Indica que número será el primero de la lista. Si no se indica se entiende que
empezará por el número 1.

type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una
lista ordenada numéricamente. Los tipos posibles son:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 16


FUNDAMENTOS DE PROGRAMACIÓN WEB

1 = Numéricamente. (1,2,3,4,... etc.)


a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)

Ejemplo Resultado
<OL>
<LI>España 1. España
<LI>Francia 2. Francia
<LI>Italia 3. Italia
<LI>Portugal 4. Portugal
</OL>
<OL type=A >
<LI>España A. España
<LI>Francia B. Francia
<LI>Italia C. Italia
<LI>Portugal D. Portugal
</OL>

LAS LISTAS SIN NUMERAR: Representan los elementos de la lista con una
"viñeta" o marca que antecede a cada uno de ellos. Se utiliza la directiva
<UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los
elementos. La directiva <UL> puede contener el parámetro type que indica la
forma del "topo" o marca que antecede a cada elemento de la lista. Los valores
de type pueden ser disk, circle o square, con lo que el topo o marca puede ser
un disco, un círculo o un cuadrado.

Ejemplo Resultado
<UL type=disk>
<LI>España • España
<LI>Francia • Francia
<LI>Italia • Italia
<LI>Portugal • Portugal
</UL>
<UL type=square>
<LI>España  España
<LI>Francia  Francia
<LI>Italia  Italia
<LI>Portugal  Portugal
</UL>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 17


FUNDAMENTOS DE PROGRAMACIÓN WEB

LAS LISTAS DE DEFINICIÓN: Muestran los elementos tipo Diccionario, o sea,


término y definición. Se utiliza para ellas la directiva <DL></DL>. El elemento
marcado como término se antecede de la directiva <DT>, el marcado como
definición se antecede de la directiva <DD>.

Ejemplo Resultado
<DL>
<DT>WWW
<DD>Abreviatura de World Wide Web WWW Abreviatura de World Wide Web
<DT>FTP FTPAbreviatura de File Transfer
<DD>Abreviatura de File Transfer Protocol Protocol
<DT>IRC IRC Abreviatura de Internet Relay Chat
<DD>Abreviatura de Internet Relay Chat
</DL>

Existen otros dos tipos de listas menos comunes. Las listas de Menú o
Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza
la directiva <MENU></MENU> y los elementos se anteceden de <LI> El
resultado es una lista sin numerar más "compacta" es decir, con menos
espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva
<DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un
límite de 20 caracteres.

Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con
lo que se consigue una estructura tipo "índice de materias".

Ejemplo Resultado
<UL type= disk>
<LI>Buscadores
<UL>
• Buscadores:
<LI>Yahoo
o Yahoo
<LI>Ole
o Ole
<LI>Lycos
o Lycos
</UL>
• Links:
<LI>Links
o Microsoft
<UL>
o IBM
<LI>Microsoft
<LI>IBM
</UL>
</UL>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 18


FUNDAMENTOS DE PROGRAMACIÓN WEB

IMÁGENES

Hasta el momento se ha visto cómo se puede escribir texto en una página


Web, así como sus posibles formatos. Para incluir una imagen en nuestra
página Web utilizaremos la directiva <IMG>. Hay dos formatos de imágenes
que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG.
Cualquier otro tipo de archivo gráfico o de imagen (BMP, PCX, CDR, etc...) no
será mostrado por el navegador, a no ser que disponga de un programa
externo que permita su visualización.

La directiva <IMG> tiene varios parámetros:

src = "imagen"
Indica el nombre del archivo gráfico a mostrar.

alt = "Texto"
Mostrará el texto indicado en el caso de que el navegador utilizado para ver la
página no sea capaz de visualizar la imagen.

lowsrc ="imagen"
Muestra una segunda imagen "superpuesta" sobre la primera una vez se carga
la página. Este parámetro no es reconocido por la totalidad de los navegadores
ya que está en estudio su aplicación, así que en la mayoría de los casos será
ignorado mostrándose solo la primera imagen (src). En Netscape muestra la
imagen indicada por lowsrc en primer lugar, y posteriormente muestra la
imagen indicada por src. Si las imágenes son iguales pero tienen distinta
"resolución" se conseguirá un efecto tipo "Fade". Si las imágenes son de
distinto tamaño la imagen indicada en src se redimensionara al tamaño
indicado por la imagen indicada en lowsrc

align = TOP / MIDDLE / BOTTOM


Indica cómo se alineará el texto que siga a la imagen. TOP alinea el texto con
la parte superior de la imagen, MIDDLE con la parte central, y BOTTOM con la
parte inferior.

border = tamaño
Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde
que será visible cuando la imagen forme parte de un Hipervínculo.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 19


FUNDAMENTOS DE PROGRAMACIÓN WEB

height = tamaño
Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.

width = tamaño
Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el
tamaño de la imagen original.

hspace = margen
Indica el número de espacios horizontales, en puntos, que separarán la imagen
del texto que la siga y la anteceda.

vspace = margen
Indica el número de puntos verticales que separaran la imagen del texto que le
siga y la anteceda.

ismap / usemap
Indica que la imagen es un MAPA. Se verán estos parámetros más adelante.

Ejemplo Se vería como

<IMG src="logo_eti.gif" >

La imagen a mostrar puede encontrarse en el mismo lugar (URL) que la página


Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL
donde se encuentre la imagen.

Ejemplo:

<IMG src= "http://www.microsoft.com/iexplorer.gif">

Se verán ejemplos "jugando" con los tamaños de la imagen, así como


comprobando la alineación de los textos. (Recordar que en función del
navegador que se utilice pueden verse o no los efectos de cada parámetro).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 20


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplo Se vería como

<IMG src="logo_eti.gif" width=100>

< IMG src="logo_eti.gif" height=20>

< IMG src="logo_eti.gif" align=TOP>ETI

< IMG src="logo_eti.gif" align=MIDDLE>ETI !!!

< IMG src="logo_eti.gif"


align=BOTTOM>Atencion !!!

HIPERVÍNCULOS

La característica principal de una página Web es que podemos incluir


Hipervínculos. Un Hipervínculo es un enlace de la página que hace que el
navegador acceda a otro recurso, otra página Web, un archivo, etc...

Para incluir un Hipervínculo se utiliza la directiva <A></A>. El texto o imagen


que se encuentre dentro de los límites de esta directiva será sensible, esto
quiere decir que si pulsamos con el ratón sobre él, se realzará la función de
Hipervínculo indicada por la directiva <A></A>. Si el Hipervínculo está indicado
por un texto, este aparecerá subrayado y en distinto color, si se trata de una
imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el
parámetro href que indica el lugar a donde nos llevará el Hipervínculo si lo
pulsamos.

Ejemplo Se vería como


<A href = "http://www.microsoft.com/"> Pulse para ir a la Pulse para ir a la página
página de Microsoft</A> de Microsoft

Si se sitúa el ratón encima de la frase y pulsamos, el navegador accederá a la


página Web indicada por el parámetro href, es decir, accederá a la página
situada en http://www.microsoft.com/

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 21


FUNDAMENTOS DE PROGRAMACIÓN WEB

Lo mismo se podría hacer con un gráfico.

Ejemplo Se vería como

Para buscar en Internet :


<A href = "http://www.senati.edu.pe/web/eti/" >
<IMG src = "senati.jpg"></A>

Formularios:

<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Uso de Formulario </h1>
<hr>
<h2>Registre sus datos</h2>
<form method="post" action="/registration/new" id="registration-form">
<label for="first-name">Nombre</label><br />
<input type="text" id="first-name" name="FirstName"/><br />
<label for="last-name">Apellido :</label><br />
<input type="text" id="last-name" name="LastName"/><br />
<label for="email-address">Correo:</label><br />
<input type="email" id="email-address" name="EmailAddress"/><br />
<label for="password">password:</label><br />
<input type="password" id="password" name="Password"/><br />
<label for="confirm-password">Confirme su password:</label><br />
<input type="password" id="confirm-password" name="ConfirmPassword"/><br />
<label for="website">Sitio Web/blog:</label><br />
<input type="url" id="website" name="WebsiteUrl" /><br />
<button type="submit">Registro</button>
</form>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 22


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO APLICATIVO:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Senati Eti </title>
<!--Estilos aplicados ES OPCIONAL -->
<link href="/styles/site.css" rel="stylesheet" type="text/css" />
<link href="/styles/nav.css" rel="stylesheet" type="text/css" />
<link href="/styles/header.css" rel="stylesheet" type="text/css" />
<link href="/styles/footer.css" rel="stylesheet" type="text/css" />
<link href="/styles/pages/live.css" rel="stylesheet" type="text/css" />
<link href="/styles/mobile.css" rel="stylesheet" type="text/css" />
<link href="/styles/print.css" media="print" rel="stylesheet" type="text/css" />
</head>
<body>

<nav class="page-nav">
<div class="container">
<a href="/index.htm">Inicio</a>
<a href="/about.htm">Acerca</a>
<a href="/schedule.htm">Programacion</a>
<a href="/register.htm">Registro</a>
<a href="/location.htm">Ubicacion</a>
<a href="/live.htm" class="active">En Vivo</a>
<a href="/feedback.htm">Retroalimentacion</a>
</div>
</nav>

<header class="page-header">
<div class="container">
<h1>HTML 5 </h1>
<p class="tag-line">Conferencia HTML5 PARA DESARROLLADORES</p>
</div>
</header>

<section class="page-section live">


<div class="container">
<h1>Asistir a la conferencia en este momento? ¡Involucrate!</h1>
<form action="#">
<label for="ask-question-text">Haz una pregunta</label>
<input id="ask-question-text" type="text" />
<button type="submit">Solicitar</button>
</form>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 23


FUNDAMENTOS DE PROGRAMACIÓN WEB
<ul>

</ul>
</div>
</section>

<footer class="page-footer">
<div class="container">
<p>
Organizado por Eti
</p>
<address>
Conferencia Centro<br />
Av Alfredo Mendiola 3550<br />
Independencia<br />
555-5120
</address>
<p>
Diciembre ; 2016 ETI
</p>
</div>
</footer>

<script src="/scripts/Object.inherit.js" type="text/javascript"></script>


<script src="/scripts/WebSocket.js" type="text/javascript"></script>
<script src="/scripts/pages/live.js" type="text/javascript"></script>
</body>
</html>

SOLUCIÓN:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 24


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO APLICATIVO:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Registros de Informacion</title>
</head>
<body>
<nav class="page-nav">
<div class="container">
<a href="/index.htm">Inicio</a>
<a href="/about.htm">Acerca</a>
<a href="/schedule.htm">Programacion</a>
<a href="/register.htm">Registro</a>
<a href="/location.htm">Ubicacion</a>
<a href="/live.htm" class="active">En Vivo</a>
<a href="/feedback.htm">Retroalimentacion</a>
</div>
</nav>
<header class="page-header">
<div class="container">
<h1>SENATI - ETI </h1>
<p class="tag-line">Una conferencia de dos vías sobre las últimas novedades de
HTML5</p>
</div>
</header>
<section class="page-section register">
<div class="container">
<h1>Registro a la conferencia</h1>
<form method="post" action="/registration/new" id="registration-form">
<div class="field">
<label for="first-name">nombre:</label>
<input type="text" id="first-name" name="FirstName" required="required"
autofocus="autofocus"/>
</div>
<div class="field">
<label for="last-name">Apellido:</label>
<input type="text" id="last-name" name="LastName" required="required"/>
</div>
<div class="field">
<label for="email-address">Correo:</label>
<input type="email" id="email-address" name="EmailAddress" required="required"/>
</div>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 25


FUNDAMENTOS DE PROGRAMACIÓN WEB

<div class="field">
<label for="password">Cambiar password:</label>
<input type="password" id="password" name="Password" required="required"
pattern="[a-zA-Z0-9]{5,}" title="At least 5 letters and numbers"/>
</div>
<div class="field">
<label for="confirm-password">Confirma tu password:</label>
<input type="password" id="confirm-password" name="ConfirmPassword"
required="required"/>
</div>
<div class="field">
<label for="website">Website/blog:</label>
<input type="url" id="website" name="WebsiteUrl" placeholder="http://"/>
</div>
<div>
<button type="submit">Register</button>
</div>
</form>
</div>
</section>
<footer class="page-footer">
<div class="container">
<p>
Organizado por Eti
</p>
<address>
Conferencia Centro<br />
Av Alfredo Mendiola 3540<br />
Independencia<br />
555-5120
</address>
<p>
Diciembre ; 2016 ETI
</p>
</div>
</footer>

<script src="/scripts/pages/register.js" type="text/javascript"></script>


</body>
</html>

SOLUCIÓN:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 26


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO APLICATIVO:
NUEVOS CONTROLES

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Nuevos controles</title>
</head>
<body>
<form action="." oninput="range_control_value.value =
range_control.valueAsNumber">
<p>
Nombre: <input type="text" name="name_control" autofocus required />
<br />
Correo Electrónico: <input type="email" name="email_control" required />
<br />

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 27


FUNDAMENTOS DE PROGRAMACIÓN WEB

URL: <input type="url" name="url_control" placeholder="Escripe la URL de tu página


web personal" />
<br />
Fecha: <input type="date" name="date_control" />
<br />
Tiempo: <input type="time" name="time_control" />
<br />
Fecha y hora de nacimiento: <input type="datetime" name="datetime_control" />
<br />
Mes: <input type="month" name="month_control" />
<br />
Semana: <input type="week" name="week_control" />
<br />
Número (min -10, max 10): <input type="number" name="number_control" min="-10"
max="10" value="0" />
<br />
Intervalo (min 0, max 10): <input type="range" name="range_control" min="0"
max="10" value="0" /><output for="range_control" name="range_control_value"
>0</output>
<br />
Teléfono: <input type="tel" name="tel_control" />
<b
Término de búsqueda: <input type="search" name="search_control" />
<br />
Color Favorito: <input type="color" name="color_control" />
<br />
<input type="submit" value="Submit!" />
</p>
</form>semana
</body>
</html>

SOLUCION:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 28


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PROPUESTO:

Crear una aplicación web basado en código HTML donde puedas aplicar todas
las directivas aprendidas hasta el momento. Esta aplicación debe cumplir las
siguientes características:

- Debe constar de 4 páginas.


- Su contenido es libre (Ej.: Información turística, exposición temática de un
tema de ciencia y tecnología, información personal, etc.).
- Su presentación debe guardar simetría en la distribución de objetos, la
presentación del diseño debe ser guardar estética.
- Debes alojarlo en un servidor web gratuito, luego envía un correo electrónico
al instructor informando la dirección URL de tu página web.

Recomendación

Para el alojamiento:

Paso 1.
https://www.000webhost.com/

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 29


FUNDAMENTOS DE PROGRAMACIÓN WEB

Paso 2.

Paso 3. Llenar el formulario.

Paso 4 (click en el nombre).

Paso 5 (hay que esperar unos segundos).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 30


FUNDAMENTOS DE PROGRAMACIÓN WEB

Paso 6. Ahora, volver a loguearse con su cuenta.

Paso 7. Aparece su panel de control (actualizarlo).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 31


FUNDAMENTOS DE PROGRAMACIÓN WEB

Paso 8 (En la parte inferior).

Click en el fileManager.

Paso 9. Asignar de nuevo la clave.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 32


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ya se estará dentro del panel de control. Listo para que se puedan publicar
páginas web de forma gratuita.

2. CREACIÓN UN MODELO BÁSICO EN CSS.

Paso 1
CASO APLICATIVO:

<!DOCTYPE html ">


<html>
<head>
<meta charset="utf-8">
<title>Mi primera página con CSS</title>
</head>
<body>
<ul class="navbar">
<li><a href="indice.html">Página principal</a>
<li><a href="meditaciones.html">Biografia</a>
<li><a href="ciudad.html">Experiencia</a>
<li><a href="enlaces.html">Imagenes</a>
</ul>

<!-- Contenido principal -->


<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a la primera página con estilo!

<p>No tiene imágenes, pero aún es un demo.

También tiene enlaces, aunque no lleven a ningún sitio…

<p>Debería haber más cosas aquí, pero ¿Qué pondría para su mejora?

<address>Creado el 19 de Mayo de 2016 <br>


por hmamanchura@senati.pe.</address>

</body>
</html>

Paso 2. Ahora crear el estilo en un archivo aparte (buena práctica) .css


body {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 33


FUNDAMENTOS DE PROGRAMACIÓN WEB
color: purple;
background-color: #fbeed5 // color de fondo

Pasó 3. Aplicar el estilo al archivo inicial creado en el Paso 1.


Dentro del Body.
<link href="estilo1.css" rel="stylesheet" type="text/css"/>

Resultado:

Ahora agregar más estilo en el archivo inicial.

body {
position: absolute;
padding-left: 11em;
color: purple;
background-color: #fbeed5; // color de fondo
font-family: Georgia, "Times New Roman",
Times, serif;
}
ul.navbar {
position: absolute;
top: 2em;
left: 1em;
width: 9em
padding: 0;
margin: auto;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 34


FUNDAMENTOS DE PROGRAMACIÓN WEB
}
ul.navbar li {
background: black;
margin: 0.1em 0;
padding: 0.1 em;
border-right: 1em solid black

}
ul.navbar a {
text-decoration: none }
a:link {
color: white }
a:visited {
color: #000 }
h1 {
position: initial;
}

POR LO TANTO, QUEDARÁ DE LA SIGUIENTE MANERA:

CASO APLICATIVO: UBICACIÓN DE LA IMAGEN.

<head>
<style type="text/css">
body {
background-image: url(Recurso/eti.jpg);
background-repeat: no-repeat;
background-position: 60px 100px;
}
</style>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 35


FUNDAMENTOS DE PROGRAMACIÓN WEB
</head>

<body>
<p>Imagen en las coordenadas x=60px y=100px</p>
</body>

RESULTADO:

CASO APLICATIVO:

<head>
<style type="text/css">
p{
padding-top: 30px;
padding-right:10px;
padding-bottom:20px;
padding-left:50%
}
</style>
</head>

<body>
<p>
Escuela de Tecnologia de la Informacion - Desarrollo Web
</p>
</body>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 36


FUNDAMENTOS DE PROGRAMACIÓN WEB

Fondo.
Propiedades Descripción
background-color Aplicar color de fondo a diferentes elementos.
background-image Utilizar una imagen como fondo.
background-repeat La imagen de fondo se repite.
background-attachment Dejar fija la imagen de fondo.
background-position Ubicar una imagen en un lugar determinado.

Textos.
Propiedades Descripción
text-indent Como dejar sangría en un texto.
text-align Centrar un texto.
text-decoration Definir un texto tachado o subrayado.
text-transform Convertir un texto a minúsculas o mayúsculas.
letter-spacing Controlar el espacio entre letras.
word-spacing Controlar el espacio entre palabras.
white-space Definir la ubicación del salto de línea.
color Colorear el texto a su gusto.
direction Definir el sentido de la escritura.

Fuentes.
Propiedades Descripción
font-family Definir un tipo de fuente.
font-style Escribir en itálica.
font-variant Variar la fuente a mayúsculas más pequeñas.
font-weight Como darle intensidad a la fuente.
font-size Definir el tamaño de la fuente.

Bordes
Propiedades Descripción
border-width Establecer el ancho del borde del elemento.
border-color Colorear el borde.
border-style Uso de bordes ocultos.
Uso de bordes punteados.
Uso de bordes a rayas.
Uso de bordes sólidos.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 37


FUNDAMENTOS DE PROGRAMACIÓN WEB
Uso de bordes dobles.
Uso de bordes sombreados.
Uso de bordes en relieve.
Uso de bordes en recuadro.
Uso de bordes resaltados.

Márgenes.
Propiedades Descripción
margin Como dejar un margen alrededor de un elemento con
medidas.
margin Como dejar un margen alrededor de un elemento con
porcentajes.

Relleno – Padding.
Propiedades Descripción
padding Como controlar el relleno que hay entre el borde y el
contenido.

Listas.
Propiedades Descripción
list-style-type Aplicar diferentes marcadores a los Ítems de una lista
desordenada.
Aplicar números decimales y números romanos en listas
ordenadas.
Aplicar letras, números y blancos para listas ordenadas.
.
Tablas.
Propiedades Descripción
table-layout Como controlar el tamaño de las celdas de una tabla.
border-collapse Definir un borde separado o un borde de una línea fina en
una tabla.

Dimensiones.
Propiedades Descripción
width Defina el ancho de un párrafo a su gusto.
min-width Defina un ancho mínimo para un párrafo.
max-width Como definir un ancho máximo para un párrafo.
height Como establecer la altura de un elemento.
min-height Defina una altura mínimo para un elemento.
max-height Defina una altura máxima para un párrafo.
line-height Declare una separación entre líneas.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 38


FUNDAMENTOS DE PROGRAMACIÓN WEB

Efectos visuales
Propiedades Descripción
overflow Insertar una barra de desplazamiento en caso que el
contenido sea superior a la caja que lo contiene
clip Mostrar parte de una imagen
display Como convertir diferentes elementos en Ítems de una lista
visibility Mostrar u ocultar un texto

CASO APLICATIVO:
<head>
<style type="text/css">
ul { list-style-image: url(Recurso/eti.jpg);
}
</style>
</head>
<body>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>

3. CREACIÓN DE UN FORMULARIO DE CONTACTO.

<!DOCTYPE html>
<HTML>
<META charset="utf-8">
<body>
<H1>Registre sus datos</H1>
<form id="contact_form" action="#" method="POST" enctype="multipart/form-data">
<div class="row">
<label for="name">Tu nombre:</label><br />
<input id="name" class="input" name="name" type="text" value="" size="30" /><br />
</div>
<div class="row">
<label for="email">Tu email:</label><br />
<input id="email" class="input" name="email" type="text" value="" size="30" /><br />
</div>
<div class="row">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 39


FUNDAMENTOS DE PROGRAMACIÓN WEB
<label for="message">Tu mensaje:</label><br />
<textarea
id="message" class="input" name="message" rows="7" cols="30"></textarea><br />
</div>
<input id="submit_button" type="submit" value="Enviar email" />
</form>
</body>
</HTML>

RESULTADO:

CASO APLICATIVO: FORMULARIO CONTACTO CON CSS.

<!doctype html>
<head>
<meta charset="UTF-8">
<title>Formulario con estilos CSS.</title>

<style type="text/css">

#formul {
padding: 20px 0px 0px 30px; /* margen con valores: arriba - derecha - abajo -
izquierda */
font-family:verdana,arial;
font-size:9pt;
}

.campos {
font-family:verdana,arial; /* tipo de letra */

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 40


FUNDAMENTOS DE PROGRAMACIÓN WEB
width: 500px; /* anchura de campos de formulario */
font-size:8pt; /* tamaño de la letra*/
color:#0000FF; /* color del texto */
border: 1px dotted red; /* color del borde puede ser solid ó dotted */
background-color:#f5f8f8; /* color del fondo */
}

.boton{
font-size:12px;
font-family:Verdana,Helvetica;
font-weight:bold;
color:#0000FF;
background:#A4C1FF;
border:0px;
width:120px;
height:25px;
}

#b_reset {
margin: 0px 0px 0px 0px; /* margen con valores: arriba - derecha - abajo -
izquierda */
}

#b_submit {
margin: -25px 0px 0px 380px; /* margen con valores: arriba - derecha - abajo -
izquierda */
}

</style>
</head>
<body>
<div id="formul">

<h3>Formulario de contacto.</h3>

<form method="POST" action="mensaje.php" name="mensaje_f"


enctype="multipart/form-data">

<p>Nombre: <br />


<input class="campos" type="text" name="nombre"></p>

<p>E-Mail: <br />


<input class="campos" type="text" name="email"></p>

<p>Asunto: <br />


<input class="campos" type="text" name="asunto"></p>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 41


FUNDAMENTOS DE PROGRAMACIÓN WEB

<p>Mensaje:<br />
<textarea class="campos" rows="10" name="mensaje"></textarea></p>

<p>Adjuntar archivo: <br />


<input class="campos" type="file" name="archivo" size="20">
</p>

<input type="hidden" name="id" value="">

<div id="b_reset">
<input class="boton" type="reset" value="Restablecer" name="B2">
</div>

<div id="b_submit">
<input class="boton" type="submit" value="Enviar mensaje" name="B1">
</div>
</form>
</div>
</body>
</html>

4. APLICACIÓN WEB UTILIZANDO VISUAL STUDIO 2013.

CASO APLICATIVO: CON VISUAL STUDIO:

<form id="formulario">
<p>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 42


FUNDAMENTOS DE PROGRAMACIÓN WEB
<fieldset form="formulario">
<legend>Datos de usuario</legend>
<p><input type="text"> Nombre</p>
<p><input type="text"> Apellido</p>
</fieldset>
</p>
<p>
<fieldset form="formulario">
<legend>Datos bancarios</legend>
<p>
<select>
<option>Selecionar tarjeta</option>
<option>Visa</option>
<option>MasterCard</option>
<option>American Express</option>
<option>Tarjeta Aurora</option>
</select>
</p>
<p><input type="number">Numero de tarjeta</p>
</fieldset>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 43


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO APLICATIVO:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form>
<table width="400">
<tr><td>Nombre</td><td><input type="text"></td></tr>
<tr><td>Apellido</td><td><input type="text"></td></tr>
<tr><td>E-mail</td><td><input type="email"
pattern="^[-\w.]+@{1}[-a-z0-9]+[.]{1}[a-z]{2,5}$"></td></tr>
<tr><td>Web</td><td><input type="url"></td></tr>
<tr><td>Comentario</td><td>
<textarea></textarea></td>
</tr>
<tr><td></td><td>
<input type="submit">
<input type="reset"></td></tr>
</table>
</form>
</body>
</html>

MARCO TEÓRICO:

¿Qué es CSS?
CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un
mecanismo simple que describe cómo se va a presentar un documento en la
pantalla, en un dispositivo de sonido, cómo se va a imprimir, en un dispositivo
braille, aparatos móviles, etc.

CSS permite posicionar el contenido, diseñar tablas, definir características para


sitios en diferentes idiomas y propiedades relacionadas con la comunicación
del usuario.

CSS ayuda a separar el contenido de la presentación.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 44


FUNDAMENTOS DE PROGRAMACIÓN WEB
<head>
<style="type:text/css">
selector {
font-family: familia de fuente, familia de fuente genérico
}
</style>
</head>

Nota: Se deben utilizar comas entre los valores.

Los posibles valores para definir las familias de fuentes.

Las más comunes | arial | Verdana | Helvetica | "Times New Roman" | Courier |
Univers

<head>
<style="type:text/css">
selector {background: valor 1 valor 2}
</style>
</head>

Nota: Se debe dejar un espacio en blanco entre los valores.

Los posibles valores para definir los fondos.

color | transparent | URL | none | repeat | repeat-x | repeat-y | no-repeat | no-repeat |


fixed | % | longitud | left | center | right | top | bottom

Ejemplo:
Se va a aplicar un fondo rojo al elemento h2 de esta página.
Código
<head>
<style type="text/css">
h2 { background:red }
</style>
</head>

<body>
<h2>El fondo del título es rojo.</h2>
</body>

Resultado:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 45


FUNDAMENTOS DE PROGRAMACIÓN WEB

FORMULARIO:
El formulario es una herramienta interactiva y dispone de una multitud de
controles, cada uno con una utilidad específica (campos de texto, casillas de
verificación, etc...) Mediante un programa procesador (Php, Asp, etc.) el
formulario facilita el flujo de datos desde la página Web hacia el servidor o al
revés.

La directiva principal, sin la cual no se podría hablar de formularios, es la


directiva <form>. Ella incluye todas las otras directivas y delimita el formulario.

Los elementos imprescindibles de un formulario son: los cuadros de texto, las


áreas de texto, las casillas de verificación, los botones de opción, los cuadros
de lista, los campos de formularios ocultos, los botones de envió o de
restablecimiento, etc.

Casi todos estos elementos (excepto las áreas de texto y los cuadros de lista)
se construyen con una sola directiva <input>. Esta directiva dispone de un
atributo @type, con el cual, con sólo cambiar su valor (text, checkbox, radio,
etc.), se obtendrá el tipo de control que se necesita.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 46


FUNDAMENTOS DE PROGRAMACIÓN WEB

II. OPERACIONES CON JAVASCRIPT.

En este capítulo se trataran los siguientes temas:

- Variables y Operadores.
- Creación de funciones.
- Validaciones.
- Creación de array y objetos con Json.
- Creación del DOM.
- Creación de una función con JQuery.

2.1. JAVASCRIPT.
HTML permite definir el diseño para sus páginas web, pero aparte del elemento
<form>no se prevé ningún tipo de interacción con el usuario. Además, el diseño
definido por el uso de HTML tiende a ser bastante estático. Se puedes añadir el
comportamiento dinámico a una página escribiendo JavaScript con respecto al
código.
Hay varias maneras que se pueden incluirJavaScript en su página web, todas
relacionadas con la etiqueta <Script>:

Ejemplo:

Cuando la página HTML es un formulario que permite acceder a un anuario


telefónico, se puede insertar un script que verifique la validez de los parámetros
proporcionados por el usuario. Esta prueba se efectúa localmente y no necesita
un acceso a la red.

Por otro lado, también se podrá utilizar JavaScript para efectuar varias
opciones a la vez; por ejemplo, acompañar el acceso a un documento HTML de
la visualización de un vídeo o la ejecución de un applet de Java...

Diferencias con Java:

La principal diferencia entre JavaScript y Java, es que este último es un


lenguaje de programación completo. Lo único que comparten es la misma
sintaxis.

JavaScript es un lenguaje que se integra directamente en páginas HTML. Tiene


como características principales las siguientes:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 47


FUNDAMENTOS DE PROGRAMACIÓN WEB

- Es interpretado (que no compilado) por el cliente, es decir, directamente del


programa fuente se pasa a la ejecución de dicho programa, con lo que al
contrario que los lenguajes compilados no se genera ni código objeto ni
ejecutable para cada máquina en el que se quiera ejecutar dicho programa.
- Está basado en objetos. No es, como Java, un lenguaje de programación
orientada a objetos (OOP). JavaScript no emplea clases ni herencia, ni otras
técnicas típicas de la OOP.
- Su código se integra en las páginas HTML, incluido en las propias páginas.
- No es necesario declarar los tipos de variables que van a utilizarse ya que
como se verá más adelante, JavaScript realiza una conversión automática
de tipos.
- Las referencias a objetos se comprueban en tiempo de ejecución. Esto es
consecuencia de que JavaScript no es un lenguaje compilado.
- No puede escribir automáticamente al disco duro. Por eso decimos que
JavaScript es un lenguaje seguro para el entorno de internet en el que se
aplicará

Utilización de JavaScript en un documento HTML:

La inserción de un documento HTML se realiza mediante la marca SCRIPT


utilizando la sintaxis:

<SCRIPT>
Código del script
</SCRIPT>

Los atributos de esta marca son:

- LANGUAGE="JavaScript”._ Precisa el lenguaje del script. Este atributo es


obligatorio.
- SRC=url._ El atributo SRC precisa el URL del script a insertar en el
documento. Este atributo es opcional.

Por ejemplo:

<SCRIPT LANGUAGE="lenguaje" SCR=url>


Código del script
</SCRIPT>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 48


FUNDAMENTOS DE PROGRAMACIÓN WEB

Podrá especificarse para insertar en un documento un script de un lenguaje


determinado y que cuyo código fuente se encuentra en un archivo especificado
en un determinado url. A continuación enunciaremos algunos puntos a tener
encuentra respecto a la introducción de JavaScript en un documento HTML:

- El script insertado mediante la marca SCRIPT es evaluado por el cliente tras


la visualización de la página HTML. Las funciones definidas no se ejecutan
inmediatamente, dependen de los eventos asociados a la página.
- La inserción del script mediante la marca SCRIPT puede colocarse en
cualquier lugar del documento HTML pero se recomienda colocarla en la
cabecera, es decir, en la zona definida por el HEAD. De este modo, el script
está definido desde el principio del documento, lo que garantiza que éste se
visible en todo el documento.
- Si se definen, además del script mediante el atributo SRC, scripts en el
propio documento, el cliente evaluará en primer lugar el insertado mediante
el atributo SRC y seguidamente los incluidos en el documento.
- Los URL correspondientes a un JavaScript poseen generalmente la
extención .js.
- Es preferible delimitar los scripts insertados en un documento por
comentarios HTML para asegurarse de que el contenido del script no
aparecerá en los clientes que no reconozcan la marca SCRIPT. Por ejemplo:

<SCRIPT Type=“text/javascript”>
<-- Disimula el contenido del script para navegadores no compatibles
Código del script
//-->
</SCRIPT>

- El lenguaje JavaScript no es case sensitive, es decir, no distingue


mayúsculas de minúsculas salvo en las cadanas de caracteres literales.

Por último, comentar otra forma de introducir scripts en documentos HTML, y


es incluir estos script como controladores de eventos de algunas marcas, como
pueden ser la marcas de imágenes, anclas, links, botones, etc. Veamos a
continuación un ejemplo:

<A HREF="index.htm" OnClick="alert('ir al índice')">


Ir al índice
</A>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 49


FUNDAMENTOS DE PROGRAMACIÓN WEB

Como puede verse, dentro de la marca, como atributo de esta, se pone un


controlador de eventos y después del signo igual y entre comillas se incluye el
código de JavaScript. Ahora bien, también es posible llamar a una función del
HEAD del documento. Se recomienda esta segunda opción ya que es una
manera más limpia y clara de escribir páginas. Se conseguiría lo mismo que en
el ejemplo anterior de esta forma:

5. VARIABLES Y OPERADORES.

<HEAD>
<SCRIPT Type=“text/javascript”>
<-- Disimula el contenido del script para navegadores incompatibles
function alerta() {
var men=”Hola soy senatino”
alert(men);
}
//-->
</SCRIPT>
...
</HEAD>

<BODY>
<A HREF="index.htm" OnClick="alerta()">
Ir al índice
</A>
...
</BODY>

Los comentarios en JavaScript:


Son los elementos más simples de los que se compone un lenguaje de
programación, aunque no por ello son los menos importantes, se está
hablando de los comentarios.

Los comentarios en el código permiten insertar observaciones.

Se distinguen los comentarios en una sola línea, precedidos por la barra


oblicua doble // y los comentarios en varias líneas delimitados por los símbolos
/* y por */. Por ejemplo:

// esto es un comentario
/* esto es un comentario de varias líneas con una longitud cualquiera */

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 50


FUNDAMENTOS DE PROGRAMACIÓN WEB

Identificadores en JavaScript:
Los identificadores de un lenguaje son los caracteres que se le asigna a los
nombres de variables, constantes, funciones, objetos, etc..., que se definen en
dicho lenguaje, estos son necesarios para poder invocar a dichos elementos en
lugares posteriores a su definición.

Los identificadores deben seguir las siguientes reglas:

- El identificador debe empezar por una letra o por el carácter '_'.


- Los caracteres siguientes, además de letras o el carácter '_', pueden ser
cifras.

Ejemplo:
Num_linea
aux1
_exit

Las palabras reservadas:


Las palabras reservadas son palabras especiales que se utilizan para aumentar
la legibilidad y separar las entidades sintácticas. Estas palabras no pueden
usarse como identificadores.

Ejemplos sencillos:
Una vez que se ha iniciado en el mundo de JavaScript es hora de empezar a
ver al lenguaje "en acción" viendo una batería de ejemplos muy sencillos que
permitirán ir adentrándose en la potencia de este lenguaje.

Ejemplo 1: Visualización de texto mediante una ventana.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 51


FUNDAMENTOS DE PROGRAMACIÓN WEB

Como primer ejemplo no hay nada mejor que el clásico programa ¡Hola
mundo!. Este mostrará una ventana conteniendo el famoso mensaje cuando se
pulse sobre el botón ejemplo1. Para ello se debe generar el siguiente código
fuente.

<CENTER>
<FORM>
<INPUT Type="button" Value=" ejemplo1
"onClick="alert(' ¡Hola mundo! ')">
</FORM>
</CENTER>

6. CREACION DE FUNCIONES.

Ejemplo 2: Definición de una función.

Este ejemplo define una función que calcula el cuadrado de un número y


visualiza el resultado en una ventana parecida a la anterior. Esto se llevará a
cabo cuando se pulse sobre el bot´n ejemplo2.
Como sabemos la función se tendrá que definir entre las marcas
(<SCRIPT>,</SCRIPT>) que se encuentran dentro de la cabecara (HEAD) del
documento.

<html>
<head>
<title>Plantilla</title>
<SCRIPT Laguage="JavaScript">
<!--
function Cuadrado(numero) {
return numero * numero;
}
//-->
</SCRIPT>
</head>
<body>
<CENTER>
<FORM>
El cuadrado de 5 es..::
<INPUT Type="button" Value="
ejemplo2 " onClick="alert(Cuadrado(5))">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 52


FUNDAMENTOS DE PROGRAMACIÓN WEB
</FORM>
</CENTER>
</body>
</html>

Ejemplo 3: Interacción con un formulario.

Este ejemplo es refleja la interacción de un script con un formulario, esta es


una de las aplicaciones en la que los programadores de páginas Web echan
mano de JavaScript. Concretamente en este ejemplo el usuario introducirá una
expresión aritmética en un campo de texto del formulario y el script le pedirá al
usuario que la confirme antes de pasar a evaluarla.

<html>
<head>
<title>Plantilla</title>
<SCRIPT Laguage="JavaScript">
function evalua(form) {
if (confirm("¿Está seguro?"))
form.result.value = eval
(form.expr.value);
else
alert("Inténtelo
de nuevo.");
}
</SCRIPT>
</head>
<body>
<CENTER><FORM>
Introduzca la expresión:
<INPUT Type="text" name="expr"
Size=10>

Resultado:
<INPUT Type="text" name="result"
Size=10>

<INPUT Type="button" Value=" Evaluar


" onClick="evalua(this.form)">
</FORM></CENTER>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 53


FUNDAMENTOS DE PROGRAMACIÓN WEB

Manejo de Eventos:

Las aplicaciones JavaScript en el cliente son orientadas al evento. Los eventos


son acciones que ocurren usualmente como resultado a algo que hizo el
usuario. Por ejemplo haciendo Click en un botón, cambiando un campo de
texto, moviendo el mouse sobre un link, etc. Para que la aplicación responda a
un evento, se debe definir los manejadores de eventos, tales como onChange y
onClick.

JavaScript soporta los eventos resumidos en la tabla siguiente:

Evento Aplicado a Ocurre Cuando Manejador


Usuario aborta la carga de una
Abort Images. onAbort
imagen.
Windows y todos los
Usuario deselecciona la
Blur elementos de un onBlur
ventana o el formulario.
formulario.
Textfield, textarea, lista Usuario cambio valores de los
Change onChange
de selección. elementos.
Botones, radio button,
Usuario hace click sobre un
checkbox, submit
Click elemento de un formulario o en onClick
button, reset button,
un link.
links.
Usuario deja un objeto en la
DragDrop Ventanas. onDragDrop
ventana del browser.
La carga de un documento o
Error Images, Windows. onError
una imagen causo un error.
Windows y todos los
Usuario selecciona un ventana
Focus elementos de un onFocus
o un elemento de un formulario.
formulario.
Documento, imagen,
KeyDown Usuario presiona una tecla. onKeyDown
link, textarea.
Documento, imagen,
KeyPress Usuario pulsa una tecla. onKeyPress
link, textarea.
Documento, imagen,
KeyUp Usuario suelta la tecla. onKeyUp
link, textarea.
Cuerpo de un
Load Usuario carga la página. onLoad
documento.
Usuario pulsa el botón del
MouseDown Documento, botón, link. onMouseDown
mouse.
MouseMove Nada por defecto. Usuario mueve el mouse. onMouseMove
Usuario mueve el cursor fuera
MouseOut Áreas y link. onMouseOut
del mapa de imagen o del link.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 54


FUNDAMENTOS DE PROGRAMACIÓN WEB

Usuario mueve el cursor sobre


MouseOver Link. onMouseOver
un link.
Usuario suelta el botón del
MouseUp Documento, botón, link. onMouseUp
mouse.
Usuario o script mueve la
Move Ventana. onMove
ventana.
Reset Formulario. Usuario resetea un formulario. onReset
Usuario o script cambian el
Resize Ventana. onResize
tamaño de la ventana.
Usuario selecciona un
Select Textfield, textarea. onSelect
elemento de entrada de texto.
Submit Formulario. Usuario submite un formulario. onSubmit
Unload Cuerpo del documento. Usuario sale de la página. onUnload

Definiendo un Manejador de Evento.

Para definir un manejador de eventos se debe agregar al tag el atributo


correspondiente al evento que se desea atender. El código JavaScript va entre
cremillas como el valor del atributo. La sintaxis general es:

<TAG manejador="Código JavaScript">

Donde TAG es un Tag HTML y manejador es el nombre del manejador de


eventos, correspondiente a uno de los especificados en la columna 4 de la
tabla anterior.

Como Código JavaScript se puede incluir un conjunto de sentencias separadas


por punto y coma (;), aunque típicamente se incluye la invocación a una
función.

Por ejemplo si se dispone de una función JavaScript denominada calcula, se


puede incorporar el llamado a esta función cuando el usuario haga click sobre
un botón de la siguiente manera:

<input type="button" value="Calcular" onClick="calcula(this.form)">

Ejemplos: Factorial de un número:

<HTML>
<HEAD>
<SCRIPT Type=“text/javascript”>
function factorial(num)

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 55


FUNDAMENTOS DE PROGRAMACIÓN WEB
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Escribe el número:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document
.forms[0].x.value);">
<BR><BR>
<INPUT TYPE="text" NAME="f">
<input type="reset" />
</FORM>
</BODY>
</BODY>
</HTML>

Estructuras de Programación

1. Operadores Lógicos y Relacionales


>, <, <=, >=
== igualdad
!= diferente
&& y
|| o
! No

2. La estructura “if-else”
Sintaxis:
if(condición)
{
sentencia1;
sentencia2;
sentencia3;
}
else
{
sentencia4;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 56


FUNDAMENTOS DE PROGRAMACIÓN WEB
sentencia5;
sentencia6;
}

Ejemplo 1
<HTML>
<SCRIPT Type=“text/javascript”>
var num;
num=parseFloat(prompt("Escribe un número",""));
if(num==100)
{
alert("El número que has escrito es 100");
}
else
{
alert("El número que has escrito no es 100");
}
if(num>0)
{
alert("El número que has escrito es positivo");
}
else
{
alert("El número es negativo o 0");
}
</SCRIPT>
</HTML>

Ejemplo 2
<HTML>
<SCRIPT Type=“text/javascript”>
var a,b;
a=parseFloat(prompt("Escribe el primer número",""));
b=parseFloat(prompt("Escribe el segundo número",""));
if(a==b) alert("Los dos números son iguales");
if(a != b) alert("Los dos números son distintos");
if(a>b)
{
alert("El primer número es mayor que el segundo");
}
else
{
alert("El primer número no es mayor que el segundo");
}
if((a>b) && (100>a))

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 57


FUNDAMENTOS DE PROGRAMACIÓN WEB
{
alert("El primero es mayor que el segundo");
alert("Además los dos son menores de 100");
}
else
{
alert("El primero no es mayor que el segundo");
alert("O uno de los dos números es mayor o igual a 100");
}
</SCRIPT>

</HTML>

3. La estructura de programación “while”


Sintaxis:
while(condición)
{
setencia1;
sentencia2;
sentencia3;
}

Ejemplo 1
<HTML>
<SCRIPT Type=“text/javascript”>
var x=0;
while(x<6)
{
alert("El valor de x es= "+x);
x=x+1;
}
</SCRIPT>
</HTML>

4. Contadores en JavaScript

Ejemplo 1:
a=a+1 es equivalente a escribir a++
a=a-1 es equivalente a escribir a—
num=num+2 es equivalente a escribir num += 2
num=num*2 es equivalente a escribir num *= 2

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 58


FUNDAMENTOS DE PROGRAMACIÓN WEB
num=num/2 es equivalente a escribir num /= 2

<HTML>
<SCRIPT Type=“text/javascript”>
var i=2;
var res="";
var j=7;
while (i<j)
{
res=res+" "+i+" "+j+"\n";
i++;
j--;
}
alert(res);
</SCRIPT>
</HTML>

Ejemplo 2:
Programa que repite un texto cualquiera, el número de veces que queramos,
utilizando un “while”

<HTML>
<SCRIPT Type=“text/javascript”>
var nom;
var indice=1;
var num;
var respuesta=" ";
nom=prompt("Escribe tu nombre","");
num=prompt("Cuántas veces quieres que lo repita","");
num=parseInt(num,10); // era una cadena y ahora es un número
while (indice <= num)
{
respuesta=respuesta+nom+"\n";
indice++;
}
alert(respuesta);
</SCRIPT>
</HTML>

Ejemplo 3:
Programa que acumula la suma y el producto de un número, para salir pulsar 0.

<HTML>
<SCRIPT Type=“text/javascript”>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 59


FUNDAMENTOS DE PROGRAMACIÓN WEB
var num;
var sum=0;
var pro=1;
var respuesta="";
num=prompt("Escribe un número diferente de cero=","");
num=parseFloat(num);
while(num != 0)
{
sum=sum+num;
pro=pro*num;
respuesta=respuesta+num+"\tsuma parcial:"+sum+"\tproducto parcial:"+pro+"\n";
num=prompt("Escribe otro número (para acabar introduce cero)","");
num=parseFloat(num);
}
alert(respuesta);
</SCRIPT>
</HTML>

Ejemplo 4:
¿Qué hace este programa?

<HTML>
<SCRIPT Type=“text/javascript”>
var opc="0";
while (opc != "T")
{
opc=prompt("Escribe la letra de la opción deseada: (S) Sumar - (R) Raíz Cuadrada -
(L) Logaritmo Neperiano - (A) Ayuda - (T) Terminar","");
if (opc=="S") suma();
if (opc=="R") raiz();
if (opc=="L") logaritmo();
if (opc=="A") ayuda();
}
function suma()
{
var a,b;
a=prompt("Escribe el primer sumando","");
a=parseFloat(a);
b=prompt("Escribe el segundo sumando","");
b=parseFloat(b);
alert("La suma de "+ a +" y "+ b +" es "+(a+b));
}
function raiz()
{

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 60


FUNDAMENTOS DE PROGRAMACIÓN WEB
var a;
a=prompt("Escribe el radicando ","");
a=parseFloat(a);
alert("La raíz cuadrada de "+ a +" es "+Math.sqrt(a));
}
function logaritmo()
{
var x;
x=prompt("Escribe un número positivo","");
x=parseFloat(x);
alert("El logaritmo neperiano de "+ x +" es "+Math.log(x));
}

function ayuda()
{
alert("Es bastante tonto que me pidas ayuda\npero aquí la tienes:\n\tPulsa S si quieres
sumar\n\tPulsa R para la raíz cuadrada\n\tPulsa L para el logaritmo neperiano\n\tPulsa
A para acceder a la ayuda\n\tPulsa T para acabar");
}
</SCRIPT>
</HTML>

5. La Estructura de programación “For”

for (contador = valor inicial; condición; expresión de incremento)


{
…;
…;
…;
}

Sintaxis:

for (i=1;i<=10;i++)
{
sentencia1;
sentencia2;
sentencia3;
}

Ejemplo1: Programa que repite un texto cualquiera en número de veces


que queramos, utilizando un “for”

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 61


FUNDAMENTOS DE PROGRAMACIÓN WEB

<HTML>
<SCRIPT Type=“text/javascript”>
var texto;
var num;
var salida="";
texto=prompt("Escribe un texto","");
num=prompt("Cuántas veces quieres que lo repita","");
num=parseInt(num,10);
for(i=1;i<=num;i++)
{
salida=salida+texto+"\n";
}
alert(salida);
</SCRIPT>
</HTML>

Ejemplo 2:
Programa que calcula todos los múltiplos de 11 menores de 3000 y por último
nos da la suma de todos ellos.

<HTML>
<SCRIPT Type=“text/javascript”>
var salida="";
var sum=0;
for(multi=11;multi<3000;multi=multi+11)
{
salida=salida+multi+" ";
sum=sum+multi;
}
alert(salida+"\nLa Suma de todos ellos es= "+sum);
</SCRIPT>
</HTML>

Ejemplo 3:
Programa que calcular el factorial de un número.

<HTML>
<SCRIPT Type=“text/javascript”>
¿var salida="";
var fact=1;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 62


FUNDAMENTOS DE PROGRAMACIÓN WEB
var num;
num=prompt("Cálculo del factorial del numero ","");
num=parseInt(num,10);
for(i=1;i<=num;i++) fact=fact*i;
alert("El factorial de "+num+" es "+fact);
</SCRIPT>
</HTML>

Ejemplo 4:
Programa que calcula los 10 primeros múltiplos del número que se quieran, por
último nos da la suma de todos ellos.

<HTML>
<SCRIPT Type=“text/javascript”>
var salida="";
var num;
var mult;
var sum=0;
num=prompt("¿Múltiplos de qué número?","");
num=parseInt(num,10);
for(i=1;i<=10;i++)
{
mult=num*i;
salida=salida+mult+" ";
sum=sum+mult;
}
alert(salida+"\nSuma= "+sum);
</SCRIPT>
</HTML>

Ejemplo 5:
2
Desarrollar la siguiente formula y=x -5x+10

<HTML>
<SCRIPT Type=“text/javascript”>
var x1,x2,paso;
var salida="";
var y;
x1=prompt("Escribe el menor valor de x","");
x1=parseFloat(x1);
x2=prompt("Escribe el mayor valor de x","");
x2=parseFloat(x2);
paso=prompt("Escribe el incremento de x:","");
paso=parseFloat(paso);

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 63


FUNDAMENTOS DE PROGRAMACIÓN WEB
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+i+" "+y+"\n";
}
alert(salida);
</SCRIPT>
</HTML>

6. El Objeto “Math”

Nos permite trabajar con funciones matemáticas.


Concretamente:
Math.log(x) = ln(x)
x
Math.exp(x) = e
Math.sqrt(x) = raiz cuadrada de “x”
b
Math.pow(a, b) = a
Math.floor(): número entero más cercano y menor
Math.ceil(): número entero más cercano y mayor
Math.round(): redondea al entero más próximo.
Math.random(): número aleatorio entre 0 y 1
Math.round(y-x)*Math.random()+x: número aleatorio entre “x” e “y”.
Math.sin(x)= sin(x) x en radianes
Math.cos(x)= cos(x) x en radianes
Math.tan(x)= tg(x) x en radianes
Math.atan(x)= arctg(x) resultado en radianes
Math.abs(x): valor absoluto de “x”
Math.max(a,b) : máximo valor de los dos
Math.min(a,b): mínimo valor de los dos.

Ejemplo 1:
Programa que calcula la hipotenusa de un triángulo rectángulo.

<HTML>
<SCRIPT Type=“text/javascript”>
var cat1,cat2,hipo; JavaScript Hugo 32
cat1=prompt("Escribe el valor de un cateto","");
cat2=prompt("Escribe el valor del otro cateto","");
cat1=parseFloat(cat1);
cat2=parseFloat(cat2);
hipo=Math.sqrt(cat1*cat1+cat2*cat2);
alert("La hipotenusa del triángulo de catetos "+cat1+" y "+cat2+" es "+hipo);
</SCRIPT>
</HTML>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 64


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplo 2:
Programa que calcula tantas hipotenusas como se quiera.

<HTML>
<SCRIPT Type=“text/javascript”>
var opcion="S";
var cat1,cat2,hipo;
while(opcion=="S" || opcion=="s")
{
cat1=prompt("Escribe el valor de un cateto","");
cat2=prompt("Escribe el valor del otro cateto","");
cat1=parseFloat(cat1);
cat2=parseFloat(cat2);
hipo=Math.sqrt(cat1*cat1+cat2*cat2);
alert("La hipotenusa del triángulo de catetos "+cat1+" y "+cat2+" es "+hipo);
opcion=prompt("¿Quieres calcular otra hipotenusa? (S/N)","");
}
alert("Adiós muy buenas");
</SCRIPT>

</HTML>

Ejemplo 3:
Programa que resuelve una ecuación de segundo grado.

<HTML>
<SCRIPT Type=“text/javascript”>
var a,b,c;
var discri;
var x1,x2;
a=prompt("Escribe el coeficiente de la x^2","");
a=parseFloat(a);
b=prompt("Escribe el coeficiente de la x",""); JavaScript Hugo 33
b=parseFloat(b);
c=prompt("Escribe el término independiente","");
c=parseFloat(c);
discri=b*b-4*a*c;
if(discri<0) alert("Soluciones Imaginarias");
if(discri==0)
{
x1=-b/(2*a);
alert("Solución doble que es "+x1);
}
if(discri>0)

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 65


FUNDAMENTOS DE PROGRAMACIÓN WEB
{
x1=(-b+Math.sqrt(discri))/(2*a);
x2=(-b-Math.sqrt(discri))/(2*a);
alert("Las soluciones son = "+x1+" y "+x2);
}
</SCRIPT>
</HTML>

Ejemplo 4:
Programa que calcula el logaritmo en base cualquiera de un número dado.

<HTML>
<SCRIPT Type=“text/javascript”>
var num;
var opc,base;
num=prompt("Escribe un número positivo","");
num=parseFloat(num);
opc=prompt("1 Logaritmo Neperiano. 2 Logaritmo Decimal. 3 Logaritmo en base
a\nEscribe el número de la opción","");
opc=parseInt(opc,10);
if(opc==1)
{
alert("El logaritmo Neperiano de "+num+" es "+Math.log(num));
}
if(opc==2)
{
alert("El logaritmo Decimal de "+num+" es "+(Math.log(num)/Math.log(10)));
}
if(opc==3)
{
base=prompt("Introduce el valor de la base a","");
base=parseFloat(base);
alert("El Logaritmo en base "+base+" del número "+num+" es
"+(Math.log(num)/Math.log(base)));
}
</SCRIPT>
</HTML>

7. Números Aleatorios.

Ejemplo 1:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 66


FUNDAMENTOS DE PROGRAMACIÓN WEB

<HTML>
<SCRIPT Type=“text/javascript”>
var a,x,y;
var salida="";
salida=salida+"5 números aleatorios entre 0 y 1\n";
for(i=1;i<=5;i++)
{
salida=salida+Math.random()+"\n";
}
salida=salida+"\n\n5 números aleatorios entre 3 y 7\n";
for(i=1;i<=5;i++)
{
salida=salida+(Math.round(7-3)*Math.random()+3)+"\n";
}
salida=salida+"\n\n5 números aleatorios entre 15 y 70\n";
for(i=1;i<=5;i++)
{
salida=salida+(Math.round(70-15)*Math.random()+15)+"\n";
}

alert(salida);
alert("Vamos a ver 5 números aleatorios entre los dos\nque tú quieras");
x=parseFloat(prompt("Escribe el número menor (puede ser decimal)",""));
y=parseFloat(prompt("Escribe el número mayor (puede ser decimal)",""));
salida="";
salida=salida +"5 números aleatorios entre "+x+" y "+y+"\n\n\n";
for(i=1;i<=5;i++)
{
a=Math.round(y-x)*Math.random()+x;
salida=salida+a+"\n";
}
alert(salida);
/* Si quieres números aleatorios enteros basta
cambiar los paréntesis de la siguiente forma:
Math.round((y-x)*Math.random()+x) */
salida="";
salida=salida+"150 números enteros aleatorios entre 2 y 17\n";
for(i=1;i<=150;i++)
{
salida=salida+Math.round((17-2)*Math.random()+2)+" - ";
}
alert(salida);
</SCRIPT>
</HTML>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 67


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplo 2:

ADIVINANZA
Se va a hacer un programa que pregunte un número entero del 1 al 10, y el
usuario del programa tiene 5 tentativas para adivinarlo.

<HTML>
<SCRIPT Type=“text/javascript”>
var x,num;
var i=0;
var control=0;
x=Math.round(9*Math.random()+1);
while(i<5)
{
i++;
num=parseInt(prompt("Escribe un entero entre 1 y 10, intento "+i,""));
if(num==x)
{
alert("Lo has acertado en "+i+" tentativas");
i=5;
control=1;
}
}
if(control==0)
{
alert("Lo siento pero se han acabado tus 'vidas', el número era "+x);
}
</SCRIPT>
</HTML>

Ejemplo 3:

<HTML>
<SCRIPT Type=“text/javascript”>
var x,y,z;
var nota=0;
for(i=1;i<=5;i++)
{
x=Math.round(9*Math.random()+1);
y=Math.round(9*Math.random()+1);
z=parseInt(prompt(x+" + "+y+" = ",""));
if(z==x+y)
{

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 68


FUNDAMENTOS DE PROGRAMACIÓN WEB
alert("Muy bien");
nota=nota+1;
}
else
{
alert("Lo siento, pero "+x+" + "+y+" = "+(x+y));
}
}
alert("Tu nota es "+(2*nota));
</SCRIPT>
</HTML>

8. Las sentencias BREAK y CONTINUE.

Ejemplo 1: Se debe ejecutar este código y decir qué realiza.

Ejecutarlo varias veces, observando detenidamente lo que sucede

Ejemplo 2: Comparar este código con el anterior y decir cuál es la diferencia.

<HTML>
<SCRIPT Type=“text/javascript”>
var x,num;
var i=0;
x=Math.round(9*Math.random()+1);
while(i<5)
{
i++;
num=parseInt(prompt("Escribe un entero entre 1 y 10, intento "+i,""));
if(num==x)
{
alert("Lo has acertado en "+i+" tentativas");
break;
}
}
if(i==5)
{
alert("Lo siento pero se han acabado tus 'vidas', el número era "+x);
}
</SCRIPT>
</HTML>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 69


FUNDAMENTOS DE PROGRAMACIÓN WEB

9. La Estructura de programación “switch-case”.

switch(x)
{
case valor 1:
sentencia1;
sentencia2;
…;
…;
break;
case valor 2:
sentencia3;
…;
…;
break;



}

Ejemplo 1:

<HTML>
<SCRIPT Type=“text/javascript”>
var opc="0";
var num;
while (opc != "10")
{
opc=prompt("Escribe la opción que desees: (1)El Triple-(2)El Cuadrado-(3)El
Logaritmo Neperiano(4)El Seno-(5)El Coseno-(10)SALIR","");
switch(opc)
{
case "1": JavaScript Hugo 40
num=prompt("Escribe el número","");
num=parseFloat(num);
alert("El triple de "+ num +" es " +(3*num));
break;
case "2":
num=prompt("Escribe el número","");
num=parseFloat(num);
alert("El cuadrado de "+ num +" es " +(num*num));
break;
case "3":
num=prompt("Escribe el número","");

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 70


FUNDAMENTOS DE PROGRAMACIÓN WEB
num=parseFloat(num);
alert("El Logaritmo Neperiano de "+ num +" es " +(Math.log(num)));
break;
case "4":
num=prompt("Escribe el ángulo en radianes","");
num=parseFloat(num);
alert("Elseno de "+ num +" es " +Math.sin(num));
break;
case "5":
num=prompt("Escribe el ángulo en radianes","");
num=parseFloat(num);
alert("El coseno de "+ num +" es " +Math.cos(num));
break;
}
}
</SCRIPT>
</HTML>

Ejemplo 2:
El programa nos pide el número total de preguntas y el número de respuestas
acertadas. A partir de aquí y utilizando la estructura "switch-case", el programa
nos da la "nota" cualitativa.

<HTML>
<SCRIPT Type=“text/javascript”>
var num,bien,notanum,notacual;
num=parseInt(prompt("Escribe el número total de preguntas",""));
bien=parseInt(prompt("Escribe el número de respuestas acertadas",""));
notanum=parseInt(10*bien/num);
switch(notanum)
{
case 0:
notacual="Muy Deficiente";
break;
case 1:
notacual="Muy Deficiente";
break;
case 2:
notacual="Deficiente";
break;
case 3:
notacual="Deficiente";
break;
case 4:
notacual="Insuficiente";

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 71


FUNDAMENTOS DE PROGRAMACIÓN WEB
break;
case 5:
notacual="Suficiente";
break;
case 6:
notacual="Bien";
break;
case 7:
notacual="Notable";
break;
case 8:
notacual="Notable";
break;
case 9:
notacual="Excelente";
break;
case 10:
notacual="Matrícula de Honor";
break;
}
alert("La nota cualitativa es "+notacual);
</SCRIPT>
</HTML>

Ejemplo 3:

<HTML>
<SCRIPT Type=“text/javascript”>
var salida="";
salida=salida+"Enero tiene "+ diasmes(1) +" días\n";
salida=salida+"Febrero tiene "+ diasmes(2) +" días\n";
salida=salida+"Marzo tiene "+ diasmes(3) +" días\n";
salida=salida+"Abril tiene "+ diasmes(4) +" días\n";
salida=salida+"Mayo tiene "+ diasmes(5) +" días\n";
salida=salida+"Junio tiene "+ diasmes(6) +" días\n";
salida=salida+"Julio tiene "+ diasmes(7) +" días\n";
salida=salida+"Agosto tiene "+ diasmes(8) +" días\n";
salida=salida+"Septiembre tiene "+ diasmes(9) +" días\n";
salida=salida+"Octubre tiene "+ diasmes(10) +" días\n";
salida=salida+"Noviembre tiene "+ diasmes(11) +" días\n";
salida=salida+"Diciembre tiene "+ diasmes(12) +" días\n";
alert(salida);
/* Función "diasmes" */
function diasmes(mes)

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 72


FUNDAMENTOS DE PROGRAMACIÓN WEB
{
var dias;
switch(mes)
{
case 2:
dias=28;
break;
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dias=31;
break;
case 4:
case 6:
case 9:
case 11:
dias=30;
break;
}
return dias;
}
</SCRIPT>
</HTML>

10. Estructura Condicional Do while

Do
{ sentencia1; sentencia2; sentencia3 } while(condicion);

Diferencias:

While Do while

Mientras se cumpla la condición, se


repetirá la ejecución de las sentencias
“Mientras” se cumpla la condición, se 1, 2 y 3.
irán repitiendo las sentencias 1, 2 y 3. Como la evaluación de la condición se
efectúa al acabarse el ciclo, el do-while
se ejecutará siempre como mínimo
una vez. Ésta es la diferencia que hay
entre la estructura do-while y la while.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 73


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplo 1:

<HTML>
<SCRIPT Type=“text/javascript”>
var x=1;
var salida="while:\n";
while (x<5)
{
x=x+1;

salida=salida+x+"\t"; JavaScript Hugo 43


}
salida=salida+"\ndo while:\n";
x=1;
do
{
x=x+1;
salida=salida+x+"\t";
} while (x>5);
alert(salida);
</SCRIPT>
</HTML>

Ejemplo 2:
La llamada sucesión de FIBONACCI es: 0, 1, 1, 2, 3, 5, 8, 13…

<HTML>
<SCRIPT Type=“text/javascript”>
var anterior,ultimo,aux;
anterior=0;
ultimo=1;
var solucion;
solucion="0 - 1";
while (ultimo<=25000000000000)
{
aux=anterior+ultimo;
anterior=ultimo;
ultimo=aux;
if (ultimo>0) solucion=solucion+" - "+ultimo;
}
alert(solucion);
</SCRIPT>
</HTML>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 74


FUNDAMENTOS DE PROGRAMACIÓN WEB
Ejemplo 3:

<HTML>
<SCRIPT Type=“text/javascript”>
var fin;
var num=2;
var fact;
var solucion="";
fin=prompt("Factoriales hasta el número?","");
fin=parseFloat(fin);
while (num<=fin)
{
fact=1;
for (i=1;i<=num;i++)
{
fact=fact*i;
}
solucion=solucion+" - "+fact;
num++;
}
alert(solucion);
</SCRIPT>
</HTML>

11. Arrays.

Una matriz es un conjunto de elementos colocados de forma adyacente en la


memoria de manera que nos podemos referir a ellos con un solo nombre
común.

Las matrices se pueden clasificar según su tamaño en:


- Matrices Estáticas: tienen un tamaño fijo e inmutable.
- Matrices Dinámicas: tienen un tamaño variable. En JavaSript las matrices
siempre son dinámicas.

Las matrices se pueden clasificar según sus dimensiones:


- Arrays: son matrices de una dimensión.
- Matrices: son matrices multidimensionales.

En JavaScript, las matrices son siempre “Arrays”, pero veremos que podemos
“simular” matrices multidimensionales.

Ejemplo 1:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 75


FUNDAMENTOS DE PROGRAMACIÓN WEB

<HTML>
<SCRIPT Type=“text/javascript”>
var x=new Array();
var salida="";
for(i=0;i<=10;i++)
{
x[i]=2*i;
salida=salida+"x["+i+"]="+x[i]+"\t";
}
alert(salida);
</SCRIPT>
</HTML>

Ejemplo 2:

<HTML>
<SCRIPT Type=“text/javascript”>
var n;
var salida="";
n=prompt("Escribe el número de elementos del Array","");
n=parseInt(n);
var Vector=new Array(n);
for(i=0;i<n;i++)
{
Vector[i]=prompt("Introduce Valor","");
salida=salida+Vector[i]+"\n";
}
alert("Los valores de la matriz son:\n"+salida);
</SCRIPT>
</HTML>

Ejemplo 3:
Calcular la media aritmética de una serie indeterminada de valores.

<HTML>
<SCRIPT Type=“text/javascript”>
var x=new Array();
var med;
var y=0;
var i=0;
var sum=0;
while(y != 9999)
{
y=parseFloat(prompt("Introduce un valor\npara acabar escribe 9999","9999"));

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 76


FUNDAMENTOS DE PROGRAMACIÓN WEB
x[i]=y;
i++;
}
x[i]=0;
for(j=0;j<i-1;j++)
{
sum=sum+x[j];
}
med=sum/j;
alert("La media es "+med);
</SCRIPT>
</HTML>

Ejemplo 4:
Programa que calcula la media aritmética de un número determinado de
valores utilizando una función.

<HTML>
<SCRIPT Type=“text/javascript”>
function media(n)
{
var x=new Array(n);
var sum=0;
for(i=0;i<n;i++)
{
num=parseFloat(prompt("Escribe un valor de la serie ("+(i+1)+"º):",""));
x[i]=num;
sum=sum+x[i];
}
return sum/n;
}
var valores;
valores=parseInt(prompt("Escribe el número de elementos de la serie",""));
alert("La media de todos los valores es: "+media(valores));
</SCRIPT>
</HTML>

Ejemplo 5:

<HTML>
<SCRIPT Type=“text/javascript”>
var salida="";
var Datos=new Array("Hugo","Yensth","Yaneth");
var Edad=new Array(24,15,26);
alert("La matriz Datos tiene "+Datos.length+" elementos");

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 77


FUNDAMENTOS DE PROGRAMACIÓN WEB
alert("La matriz Edad tiene "+Edad.length+" elementos");
for (i=0;i<=2;i++)
{
salida=salida+Datos[i]+" - "+Edad[i]+"\n";
}
alert(salida);
</SCRIPT>
</HTML>

12. Otros ejemplos.

Ejemplo 1:

<HTML>
<HEAD>
<SCRIPT Type=“text/javascript”>
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#0000FF">
<FONT COLOR="#FF0000">
<H1><P ALIGN="CENTER">Calculo del Área de un Triángulo</H1>
<HR>
</FONT>
<FONT COLOR="#FFFFFF"><P>
<BR>
<HR>
<FONT COLOR="YELLOW">
<FORM>
<P ALIGN="CENTER">
Base del triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.value);">
<BR>
<BR><HR><P ALIGN="CENTER"><B>
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 78


FUNDAMENTOS DE PROGRAMACIÓN WEB

Ejemplo 2:

<HTML>
<SCRIPT Type=“text/javascript”>
var nom;
nom=prompt("Escribe tu nombre","");
var salida="";
for(i=1;i<=5;i++)
{
salida=salida+"<BR>"+"i= "+i+" Hola "+nom;
}
document.write("<H1><P align='CENTER'>Uso de DOCUMENT.WRITE</H1>");
document.write("<BR><BR>");
document.write(salida);
</SCRIPT>
</HTML>

Ejemplo 3:

<HTML>
<HEAD>
<SCRIPT Type=“text/javascript”>
function MCD(a,b)
{
var resto,aux;
if(a<b)
{
aux=a;
a=b;
b=aux;
}
if ((a%b)==0) resto=b;
while((a%b) !=0)
{
resto=a%b;
a=b;
b=resto;
}
return resto;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW"><FONT COLOR="RED">
<H1><P ALIGN="CENTER">SIMPLIFICACIÓN DE FRACCIONES</H1>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 79


FUNDAMENTOS DE PROGRAMACIÓN WEB
<FORM><B>
<p align="center">Numerador : <input type="text" size="9"
name="num1"><br>
Denominador: <input type="text" size="9" name="den1"
onblur="document.forms[0].num2.value=document.forms[0].num1.value/MCD(docume
nt.forms[0].num1.value,this.value);document.forms[0].den2.value=this.value/MCD(docu
ment.forms[0].num1.value,this.value);">
<br>
</p>
<hr>
<p align="center"><br>
<input type="text" size="7" name="num2"><br>
<input type="text" size="7" name="den2"><br><br>
<INPUT TYPE="button" VALUE="Otra Fracción"
onClick="document.forms[0].num1.value='';document.forms[0].den1.value='';document.
forms[0].num2.value='';document.forms[0].den2.value='';">
</p>
</form>
</body>
</html>

7. VALIDACIONES.

CASO PRÁCTICO DE VALIDACIÓN UTILIZANDO JAVASCRIPT.

<!DOCTYPE HTML">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
}
body {
background-color: #666666;
}
-->
</style>
</head>

<body>
<script type="text/javascript" >
var validar = function(form){
var ok = true;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 80


FUNDAMENTOS DE PROGRAMACIÓN WEB
var f = document.form;
if(f.nro_tarjeta.value==''){
alert('Completa el campo nro tarjeta')
f.nro_tarjeta.focus()
ok = false
}else if(!parseInt(f.nro_tarjeta.value)){
alert('Completa el campo nro tarjeta SÓLO CON NÚMEROS')
f.nro_tarjeta.value = ''
f.nro_tarjeta.focus()
ok = false
}

if(f.nro_telefono.value==''){
alert('Completa el campo nro telefonico')
f.nro_telefono.focus()
ok = false
}else if(!parseInt(f.nro_telefono.value)){
alert('Completa el campo nro telefonico SÓLO CON NÚMEROS')
f.nro_telefono.value = ''
f.nro_telefono.focus()
ok = false
}

if(f.email.value==''){
alert('Completa el campo email')
f.email.focus()
ok = false
}else{
var t = f.email.value.split("")
var g = 0
for(i=0; i<t.length; i++){
if(t[i]=='@')
g++
}
if(g==0 || g>1){
alert('Ingrese una direccion email valida')
f.email.focus()
ok = false
}
}
if(ok==true){
alert('Datos OK')
f.submit()
}
}
</SCRIPT>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 81


FUNDAMENTOS DE PROGRAMACIÓN WEB
<form id="form" name="form" method="post" action="">
<div align="center">
<h1>REGISTRO DE CLIENTE
</h1>
<hr />
</div>
<table width="200" border="1" align="center">
<tr>
<td>EMAIL</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>NRO. TARJETA </td>
<td><input name="nro_tarjeta" type="text" id="nro_tarjeta" /></td>
</tr>
<tr>
<td>NRO TELEFONO </td>
<td><input name="nro_telefono" type="text" id="nro_telefono" /></td>
</tr>
<tr>
<td colspan="2">
<div align="right">
<input type="button" name="Submit" value="Enviar" onclick="javascript:validar();" />
</div></td>
</tr>
</table><hr />
</form>
</body>
</html>
SOLUCIÓN:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 82


FUNDAMENTOS DE PROGRAMACIÓN WEB

8. CREACIÓN DE ARRAYS Y OBJETOS CON JSON.

JSON
Es una notación de objetos basados en javascript que permite crear objetos de
manera rápida y simple, estos objetos pueden ser utilizados de la manera que
queramos y la notación se utiliza muy comúnmente para crear servicios REST.

La sintaxis básica es la siguiente:

var miObjeto = {
"propiedad1" : "propiedadvalor1",
" propiedad2" : " propiedadvalor2",
…,
" propiedadN" : " propiedadvalorN"
};

CASO PRÁCTICO (sintaxis)


varlistaEmpleados = [
{
"codigo": "1"
"nombre": "Hugo Mamanchura",
},
{
"codigo": "2"
"nombre": "Martin Weber",
}
];

CASO PRÁCTICO:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<section id="tests">
<h1>USO DE JSON (JavaScript Object Notation)</h1>
<div id="content" >
</div>
</section>
<script type="text/javascript">
var objetos = {"Personas":[
{"nombre":"Hugo","edad":40},

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 83


FUNDAMENTOS DE PROGRAMACIÓN WEB
{"nombre":"Huguito","edad":10}
]};
document.getElementById('content').innerHTML = objetos.Personas[0].nombre ;
/*Declarar un objeto JSON con una funcion en un atributo
notese el uso de "this" que hace referencia a el objeto en sí, es decir a persona*/
var persona = {"nombre":"Hugo","edad":23,
"avisar":function(){alert("Hola soy "+this.nombre);}
};
persona.avisar();
</script>
</body>
</html>

9. CREACIÓN DEL DOM.

Es una de las innovaciones que más ha influido en el desarrollo de las páginas


web dinámicas y de las aplicaciones web más complejas pero los navegadores
web utilizan otro estándar del W3C, el DOM, para representar la estructura
interna. En esta tarea, aprenderá los fundamentos del DOM.

Añadir un nivel de interactividad a las páginas con la ayuda de un poco de


código JavaScript.

CASO PRÁCTICO:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Eventos con Javascript</title>
</head>
<body>
<form>
<p>
<label>Escribe tu Nombre:
<input type="text" id="Nombre" /></label></p>
<input type="button" id="submit" value="Enviar" />
</form>
<div id="area"></div>
<script type="text/javascript">
function saludo() {
var user = document.getElementById("Nombre").value;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 84


FUNDAMENTOS DE PROGRAMACIÓN WEB
var s = document.createElement("p");
s.textContent = "Gracias " + user;
document.getElementById("area").appendChild(s);
}
document.getElementById("submit").addEventListener("click", saludo);
</script>
</body>
</html>

SOLUCIÓN:

10. CREACIÓN DE UNA FUNCIÓN CON JQUERY.

Framework de JavaScript para facilitar, entre otros, el acceso a los elementos


del DOM, los efectos, interactuar con los documentos HTML, desarrollar
animaciones y agregar interacción con la tecnología AJAX a páginas web
jQuery ofrece una gran cantidad de funcionalidad.

1. Core. Las API del núcleo de jQuery le permiten código de marca para su
ejecución una vez que la página ha terminado de cargar, crear elementos
DOM, y el bucle a travésun conjunto de elementos seleccionados.

- Motor de selección. El motor selector de jQuery ("chisporroteo") es uno


de los atractivos principales de jQuery. Esole permite seleccionar
rápidamente un grupo de elementos mediante el uso de selectores CSS.
- Filtrado y desplazamiento. jQuery define muchas funciones para
agregar criterios a la selección elemento(Por ejemplo, primero, contiene y
última) y también para recorrer el árbol DOM (por ejemplo, siguiente,
anterior, padres y hermanos).
- Crear, modificar y borrar. jQuery le permite modificar el contenido del
texto, atributos y estilos deun elemento seleccionado, así como para
insertar y eliminar elementos de la DOM.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 85


FUNDAMENTOS DE PROGRAMACIÓN WEB

Introducción a JavaScript

- Presentación. jQuery le permite crear nuevos, cambia existente, y quitar los


estilos CSS, como la necesidadSurge.
- Eventos. jQuery le permite agregar y quitar secuencia de comandos para la
escritura de controladores de eventos en el navegador, por ejemplo, por
encima del ratón, palanca, haga clic, y así sucesivamente.
- Animación y Efectos. jQuery le permite agregar una serie de efectos
visuales para elementos de una página. Por ejemplo, desaparezca de forma
gradual, deslice hacia arriba, deslice hacia abajo, y así sucesivamente.
- El Ajax. jQuery proporciona una serie de métodos alternativos para realizar
peticiones AJAX para ambos servicios web thirdparty y su propio servidor
web para obtener más contenido.
- Utilidades. jQuery proporciona una serie de métodos adicionales para
trabajar con matrices, cadenas y otros objetos de JavaScript incorporado

CASO PRÁCTICO UTILIZANDO NETBEANS JAVA.

Despliegue secuencial

<!DOCTYPE html>
<html lang="es">
<head>
<title>Manejo Secuencial de Imagenes</title>
<style>
li {
float: left;
list-style: none;
margin: 0 25px 25px 0;
display: none;
}
</style>
</head>
<body>
<a href="#" id="mostrar">Mostrar</a> /<a href="#" id="ocultar">Ocultar</a>
<ul>
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 86


FUNDAMENTOS DE PROGRAMACIÓN WEB
<li><img src="eti.jpg"></li>
<li><img src="eti.jpg"></li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
var lista = $('li').hide();
$('#mostrar').click(function() {
var i = 0;
(function mostrarimg() {
lista.eq(i++).fadeIn(400, mostrarimg);
})();
});
$('#ocultar').click(function() {
var i = $('li').size();
(function ocultarimg() {
lista.eq(--i).fadeOut(200, ocultarimg);
})();
});
});
</script>
</body>
</html>

Caso práctico para ser desarrollado por el estudiante:


Lightbox con Java
Paso 1:

Paso 2:
Ubicar las imágenes en la carpeta web del proyecto.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 87


FUNDAMENTOS DE PROGRAMACIÓN WEB

Paso 3: Ingresar:https://github.com/lokesh/lightbox2.git

Para descargar los estilos, librería jquery o imágenes de prueba.

Paso 4: Ahora el estilo

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 88


FUNDAMENTOS DE PROGRAMACIÓN WEB

Paso 5:
Por lo tanto, la estructura del proyecto quedara de la siguiente manera :

Ahora crear la página Ejemplo.html elaborar:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Caso Practico Lightbox</title>
<link href="css/lightbox.min.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<hr />
<h3>IMAGENES DE PRUEBA</h3>
<pre>Autor : Hugo Mamanchura Lima</pre>
<div>
<a class="example-image-link" href="eti.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti.jpg" alt="" /></a>
<a class="example-image-link" href="eti2.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti2.jpg" alt="" /></a>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 89


FUNDAMENTOS DE PROGRAMACIÓN WEB
<a class="example-image-link" href="eti3.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti3.jpg" alt="" /></a>
<a class="example-image-link" href="eti4.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti4.jpg" alt="" /></a>
<a class="example-image-link" href="eti5.jpg" data-lightbox="example-set" data-
title="Cerrar."><img class="example-image" src="eti5.jpg" alt="" /></a>
</div>
</section>
<section>
<p>
</p>
</section>
<script src="js/lightbox-plus-jquery.min.js" type="text/javascript"></script>
</body>
</html>

Quedará de la siguiente manera;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 90


FUNDAMENTOS DE PROGRAMACIÓN WEB

III. CREACIÓN DE FORMULARIOS CON VALIDACIÓN DE ENTRADA.

En este capítulo se trataran los siguientes temas:

- Validación de entrada con atributos HTML5.


- Validación de entrada usando Javascript.
- Inserción de audio y video.
- Api form

11. VALIDACIÓN DE ENTRADA CON ATRIBUTOS HTML5.

CONTENIDO TEÓRICO.

Validación restringida

El HTML5 brinda sintaxis y elementos de API para posibilitar la validación de


formularios del lado del cliente. Aunque esta funcionalidad no reemplaza la
validación del lado del servidor, que todavía es necesaria por seguridad e
integridad de la información, la validación del lado del cliente puede brindar una
experiencia de usuario mejor al darle al usuario una respuesta inmediata
acerca de la información ingresada.

Sintaxis de HTML para la validación restringida.

Los siguientes elementos de sintaxis de HTML5 pueden ser usados para


restringir datos en el formulario.

El atributo required en los elementos <input>, <select> y <textarea> indica que


se debe ingresar algún dato. (En el elemento <input>, required sólo se aplica
con ciertos valores del atributo type).

El atributo pattern en el elemento <input> restringe el valor para que concuerde


con una expresión regular específica.

Los atributos min y max del elemento <input> restringen los valores máximos y
mínimos que pueden ser ingresados.

El atributo step del elemento <input> (cuando se usa en combinación con los
atributos min y max) restringe la granularidad de los valores ingresados. Un
valor que no se corresponda con un valor permitido no será validado.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 91


FUNDAMENTOS DE PROGRAMACIÓN WEB

El atributo maxlength de los elementos <input> y <textarea> restringe el


máximo número de caracteres (en puntos de código unicode) que el usuario
puede ingresar.

Los valores url y email para type restringen el valor para una URL o dirección
de correo válida respectivamente.

Validación de entrada con atributos HTML5.

Caso Práctico 1.

Pagina inicial: Index.html


<form name="userLogin" method="post"
action="login.html">
<fieldset>
<legend>Ingrese Su Login</legend>
<div id="usernameField" class="field">
<input id="uname" name="username" type="text" placeholder="Nombre y Apellido" />
<label for="uname">Nombre:</label>
</div>
<div id="passwordField" class="field">
<input id="pwd" name="password" type="password" placeholder="Clave" />
<label for="pwd">Clave</label>
</div>
</fieldset>
<input type="submit" value="Enviar" />
</form>

Página final: login.html


<!DOCTYPE html>
<html>
<head>
<title>Formularios</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>Bienvenidos</div>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 92


FUNDAMENTOS DE PROGRAMACIÓN WEB

Caso Práctico 2.

Para garantizar que el usuario introduce datos en un sistema de forma


obligatoria: En el campo, agregar el atributo requerido para el HTML5 <Input>.

Si el usuario intenta presentar la forma antes de proporcionar un valor, que no


será publicado en el servidor. El siguiente ejemplo muestra cómo utilizar el
atributo required:
Required
Ejemplo 1:
<!doctype="html>
<html>
<input id="contactNo" name="contactNo"
type="tel" placeholder="ingrese nro. de telefono" required="required" />
</html>

Ejemplo 2:
<!doctype="html>
<input id="percentage" type="number"
min="0" max="100" />

Caso Práctico 3.

<!DOCTYPE html>
<html>
<head>
<title> Validacion de formulario </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<form id="registerForm" method="post" action="pagina.html">
<div id="firstNameField" class="field"><label for="firstName">Nombre </label>
<input id="firstName" name="firstName" required="required" placeholder="Ing. tu
nombre" />
<input type="submit" name="btnproesar" value="Procesar">
<span style="color:red">*</span>
</div> ...
</form>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 93


FUNDAMENTOS DE PROGRAMACIÓN WEB

12. VALIDACIÓN DE ENTRADA USANDO JAVASCRIPT.

Caso Práctico 4.

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
</head>
<body>
<script>
function isAnInteger( text ){
var intTestRegex = /^\s*(\+|-)?\d+\s*$/;

return String(text).search(intTestRegex) != -1; }


function validateForm() {
if( ! isAnInteger(document.getElementById('score').value))
return false;
return true; }
</script>
<form id="scoreForm" method="post" action="..."
onsubmit="return validateForm();" > ...
<div id="scoreField" class="field" >
<label for="score">Score:</label>
<input id="score" name="score" type="number" placeholder="ingrese solo numero"/>
<input type="submit" name="btnprocesar" value="Procesar">
</div> ... </form>
</body>
</html>

Caso Práctico Utilizando Visual Studio.

Paso 1:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 94


FUNDAMENTOS DE PROGRAMACIÓN WEB
<formid="loginform"method="post"action="login.aspx">
<fieldset>
<legend>Acceso al Sistema</legend>
<div>
<labelfor="username">Usuario:</label>
<input
type="text"id="username"placeholder="Usuario"autofocus="autofocus"required="requir
ed"/>
</div>
<div>
<label for="userpwd">Password:</label>
<input type="password"id="userpwd"placeholder="Password"required="required"/>
</div>
<div>
<label for="ndia">Día del mes:</label>
<input id="ndia"type="number"min="1"max="31"/>
</div>
<div>
<labelfor="cempleado">Código Empleado:</label>
<inputid="cempleado"type="text"
pattern="[A-Z]{3}[0-9]{5}"
title="3 letras y 5 dígitos"/>
</div>
</fieldset>
<inputtype="submit"value="Ingresar"/>
</form>
</body>
</html>

Paso 2:
Crear una página de Bienvenido con el login.aspx

Caso Práctico de validación con CSS.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
input {
background-color:white;
}
input:invalid {
background-color:orange;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 95


FUNDAMENTOS DE PROGRAMACIÓN WEB
input:valid {
background-color:white;
}
</style>
</head>
<body>
<formid="regForm"method="post"action="register.aspx">
<div>
<labelfor="nEmpleado">Nombres:</label>
<inputid="nEmpleado"required="required"placeholder="Nombres del Empleado"/>
</div>
<inputtype="submit"value="Registrar"/>
</form>
</body>
</html>

Caso Práctico de Validacion cn JS y CSS:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
.inputValid {
background-color: yellow;
}
.inputInvalid {
background-color: orange;
}
</style>

<scripttype="text/javascript">

function isNumber(text) {
var TestRegex = /[0-9]{1,}/;
return String(text).search(TestRegex) != -1;
}

function validateForm() {
var textbox = document.getElementById("ndocumento");
if (isNumber(document.getElementById("ndocumento").value)) {
textbox.className = "inputValid";
returntrue;
}
textbox.className = "inputInvalid";

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 96


FUNDAMENTOS DE PROGRAMACIÓN WEB
returnfalse;
}

</script>

</head>
<body>
<form id="dataForm"method="post"action="register.aspx"
onsubmit="return validateForm();">
<div>
<input id="ndocumento"type="text"/>
</div>
<input type="submit"value="Enviar Datos"/>
</form>

</body>
</html>

Caso Práctico General para aplicar en visual studio.

Paso 1:

<!DOCTYPE html>
<htmllang="en">
<head>
<meta charset="utf-8"/>
<title>Registrese para la conferencia</title>

<link href="/styles/site.css"rel="stylesheet"type="text/css"/>
<link href="/styles/pages/register.css"rel="stylesheet"type="text/css"/>
</head>
<body>

<navclass="page-nav">
<divclass="container">
<ahref="/inicio.htm">Inicio</a>
<ahref="/acerca.htm">Acerca</a>
<ahref="/registre.htm">Registrese</a>
</div>
</nav>

<headerclass="page-header">
<divclass="container">
<h1>Senati-Eti</h1>
<pclass="tag-line">conferencia de HTML5 desarroladores web</p>
</div>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 97


FUNDAMENTOS DE PROGRAMACIÓN WEB
</header>

<sectionclass="page-section register">
<divclass="container">
<h1>Registrese para la Conferencia</h1>
<formmethod="post"action="/registration/new"id="registration-form">
<divclass="field">
<labelfor="first-name">Nombre:</label>
<inputtype="text"id="first-
name"name="FirstName"required="required"autofocus="autofocus"/>
</div>
<divclass="field">
<labelfor="last-name">Mamanchura:</label>
<inputtype="text"id="last-name"name="LastName"required="required"/>
</div>
<divclass="field">
<labelfor="email-address">Direccion:</label>
<inputtype="email"id="email-address"name="EmailAddress"required="required"/>
</div>
<divclass="field">
<labelfor="password">Password:</label>
<inputtype="password"id="password"name="Password"required="required"pattern="[a-
zA-Z0-9]{5,}"title="At least 5 letters and numbers"/>
</div>
<divclass="field">
<labelfor="confirm-password">Clave:</label>
<inputtype="password"id="confirm-
password"name="ConfirmPassword"required="required"/>
</div>
<divclass="field">
<labelfor="website">blog:</label>
<inputtype="url"id="website"name="WebsiteUrl"placeholder="http://"/>
</div>
<div>
<buttontype="submit">Registrese</button>
</div>
</form>
</div>
</section>

<footerclass="page-footer">
<divclass="container">
<p>
Por Hugo Mamanchura Lima</p>
<address>
Conferencia Central <br/>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 98


FUNDAMENTOS DE PROGRAMACIÓN WEB
</address>
<address>
senati</address>
<p>
&#169; 2016</p>
</div>
</footer>

</body>
</html>

Estructura del estilo:

Paso 2: Ahora el estilo site.css

<linkhref="/styles/site.css"rel="stylesheet"type="text/css"/>

Codificar:

/*estilos*/

html {
/*font-size 62.5%*/
font-size: 62.5%;
font-family: Calibri, Arial, sans-serif;
background-color: #EAEEFA;
}

body {
margin: 0;
/*Default font-size tabulado 18px*/
font-size: 1.8rem;
}

.container {
padding: 01rem;
max-width: 94rem;
/*Horizontal centro contenido*/
margin: 0auto;
}

nav {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 99


FUNDAMENTOS DE PROGRAMACIÓN WEB
background-color: #1d1d1d;
line-height: 6rem;
font-size: 1.7rem;
}

nava {
color: #fff;
padding: 1rem;
}

h1 {
font-size: 4rem;
letter-spacing: -1px;
margin: 1em0.25em0;
}

Paso 3: Ahora el estilo register.css


<linkhref="/styles/pages/register.css"rel="stylesheet"type="text/css"

.registerform {
max-width: 40rem;
}

.register.field {
margin-bottom: 1rem;
}

.registerlabel {
display: block;
}

.registerinput {
display: block;
padding: .5rem;
width: 100%;
box-sizing: border-box;
}

.registerbutton {
padding: .5rem;
}

.registerform.submission-attemptedinput:invalid {
background-color: #f9b2b2;
outline: none;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 100


FUNDAMENTOS DE PROGRAMACIÓN WEB

13. INSERCIÓN DE AUDIO Y VIDEO.

Implementando Drag and Drop.

Estructura incluir las imágenes en una carpeta image:

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style>
#contenedorprincipal {
width:50%;
height:200px;
}
#contenedorizquierda {
width:50%;
height:200px;
background-color:beige;
float:left;
overflow:auto;
}
#contenedorderecha {
width:50%;
height:200px;
background-color:orange;
float:left;
overflow:auto;
}

</style>
<!--definamos el script para soltar los objetos
definiendo el elemento a arrastrar y capturando el ID
-->
<scripttype="text/javascript">
function evdragstar(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
//eliminamos el comportamiento por defecto del contenedor

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 101


FUNDAMENTOS DE PROGRAMACIÓN WEB
//origen y destino

function evdragover(ev) {
ev.preventDefault();
}
//funcion para hacer que elemento arrastrado se quede en el receptor seleccionado
function evdrop(ev, e1) {
//anula el comportamiento por defecto del elemento
ev.stopPropagation();
//anula el comportamiento por defecto del navegador
ev.preventDefault();
data = ev.dataTransfer.getData("text");
//agregamos el elemento arrastrado el contenedor destino
//appendChild es agregar
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<divid="contenedorprincipal">
<divid="contenedorizquierda"ondragover="evdragover(event)"
draggable="true"ondragstart="evdragstar(event)"
ondrop="evdrop(event)">
<pid="e1"draggable="true"ondragstart="evdragstar(event)">
Elemento arrastrable
</p>
<h5id="e2"draggable="true"ondragstart="evdragstar(event)">
Otro Elemento arrastrable
</h5>
<ulid="e3"draggable="true"ondragstart="evdragstar(event)">
<li>Primer Elemento</li>
<li>Segundo Elemento</li>
</ul>
</div>
<divid="contenedorderecha"ondragover="evdragover(event)"ondrop="evdrop(event,thi
s)">
<imgsrc="image/espana.gif"id="e4"draggable="true"ondragstart="evdragstar(event)"/>
<imgsrc="image/europa.gif"id="e5"draggable="true"ondragstart="evdragstar(event)"/>
<imgsrc="image/italia.gif"id="e6"draggable="true"ondragstart="evdragstar(event)"/>
</div>
</div>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 102


FUNDAMENTOS DE PROGRAMACIÓN WEB

Solución: Proceder a arrastrar las imágenes:

INSERTANDO AUDIO.

La etiqueta Audio:

Insertar un archivo de audio para reproducir en una página web, permitirá


escucharlo sin necesidad de tener instalado ningún programa adicional para
dicho fin. Un ejemplo de sintaxis de esta etiqueta sería el siguiente:

<audio src=”audio.mp3″ type=”audio/mp3″ controls autoplay />

A continuación se expone una breve descripción de algunos de los atributos


disponibles para esta etiqueta.

Src. Indica la ruta del archivo a reproducir.

Autoplay. Permite que la reproducción comience de forma automática sin


previo aviso. En ocasiones no se recomienda su uso para dejar que el usuario
decida cuándo reproducir audio, cuando lo desee.

Autobuffer. Permite cargar de forma automática el archivo para que sea más
rápida su reproducción a posteriori y reducir así tiempos de espera para el
usuario.

Width y height. Definen respectivamente la anchura y la altura que deberá


tener la etiqueta de audio.
Loop. Ejecuta la reproducción en bucle de forma que al finalizar vuelve a
empezar.

Controls. Muestra los controles de reproducción.

Type. Define el tipo de archivo a reproducir y su extensión (video,


audio...)/(mp3, ogg...).

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 103


FUNDAMENTOS DE PROGRAMACIÓN WEB

La etiqueta Video:
En el caso de la etiqueta de video, atributos son muy similares a los de la
etiqueta audio. Ejemplo de su sintáxis.

<video src=”video.ogg”>
<!– Código a mostrar en navegadores que no soportan HTML 5 –>
</video>

CASO PRÁCTICO DE INSERCIÓN DE AUDIO Y VIDEO.

Estructura sencilla:

CASO PRÁCTICO:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>Insercion de Video</title>
</head>
<body>
<h2>Insercion Audio de Forma sencilla </h2>
<br/>
<audio src="recursos/eroz.mp3"controls></audio>
</body>
</html>

CASO PRÁCTICO:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 104


FUNDAMENTOS DE PROGRAMACIÓN WEB
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Insercion de Video</title>
</head>
<body>
<h2>Insercion Video de Forma sencilla </h2>
<br/>
<video src="recursos/eroz1.mp4" width="500"controls>

</video>
</body>
</html>

14. API FORM.

Caso Práctico: Seleccion de archivo.


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>seleccion de Archivo</title>
</head>
<pre>Seleccion de Archivo</pre>
<body>
<input type="file"id="txtArchivoBinario" onchange="cargarArchivoBinario()"/>
<img id="areaImagen" draggable = "false"/>
<script type="text/javascript">
function cargarArchivoBinario() {
var archivo = document.getElementById("txtArchivoBinario");
if (archivo.files.length != 0 &&
archivo.files[0].type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function (e) {
var imagen = document.getElementById("areaImagen");
imagen.src = e.target.result;
};
reader.onerror = function () {
alert("Nose puede leer imagen");
};
reader.readAsDataURL(archivo.files[0]);
} else {
alert("Seleccione un archivo de imagen...");
}
}
</script>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 105


FUNDAMENTOS DE PROGRAMACIÓN WEB

Caso Práctico: Cargando informacion de archivo.


<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>seleccion de archivo de Texto </title>
<pre>Cargando informacion de archivo...</pre>
</head>
<body>
<inputtype="file"id="txtArchivoTexto"onchange="cargarArchivoTexto()"/>
<textareaid="areaResultados"rows="30"cols="40"></textarea>
<scripttype="text/javascript">
function cargarArchivoTexto() {
var archivo = document.getElementById("txtArchivoTexto");
//verificamos si el usuario seleccionó al menos un archivo
//y este sea de tipo texto (.txt)
if (archivo.files.length != 0 && archivo.files[0].type.match(/text.*/)) {
//Creamos un objeto filereader para leer el archivo
var reader = new FileReader();
//Capturamos el evento onload para iniciar la carga del archivo
//e representa el contenido del archivo leído, es un parámetro implícito
reader.onload = function (e) {
//Capturando el control que almacenará la lectura del archivo
var area = document.getElementById("areaResultados");
//Entregando al control la lectura del archivo
area.value = e.target.result;
};
//Capturamos el evento onerror para verificar si existe alguna excepción durante la
lectura
//e representa la excepción generada
reader.onerror = function (e) {
alert("No se pudo cargar el archivo...");
};

//confirmar la lectura del archivo

reader.readAsText(archivo.files[0]);
} else {
alert("Seleccione un archivo válido");
}
};

</script>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 106


FUNDAMENTOS DE PROGRAMACIÓN WEB

IV. CREACIÓN DE OBJETOS GRAFICOS Y CANVAS.

En este capítulo se trataran los siguientes temas:

- Preparación de un canvas.
- Dibujando en el lienzo.
- Creación de interactividad gráfica usando usando SVG.
- Programando objeto gráfico usando Canvas API.
- Storage.
- Creación de objetos gráficos.

15. PREPARACION DE UN CANVAS.

CASO PRÁCTICO:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function retornarLienzo(x)
{
var canvas = document.getElementById(x);
if (canvas.getContext)
{
var lienzo = canvas.getContext("2d");
return lienzo;
}
else
return false;
}
function dibujar()
{
var lienzo=retornarLienzo("lienzo1");
if (lienzo)
{
lienzo.fillStyle = "rgb(200,0,0)";
lienzo.fillRect (10, 10, 100, 100);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="200">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 107


FUNDAMENTOS DE PROGRAMACIÓN WEB

Su navegador no permite utilizar canvas.


</canvas>
</body>
</html>

Resultado:

16. DIBUJANDO EN EL LIENZO.

CASO PRÁCTICO:
<!DOCTYPEHTML>
<head>
<scripttype="text/javascript">

function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
}
else
returnfalse;
}

function dibujar() {
var lienzo = retornarLienzo("lienzo1");
if (lienzo) {
lienzo.strokeStyle = "rgb(200,0,0)";
//Inicio de camino
lienzo.beginPath();
lienzo.moveTo(0, 0);
lienzo.lineTo(150, 300);
lienzo.lineTo(300, 0);
//Trazar linea
lienzo.stroke();

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 108


FUNDAMENTOS DE PROGRAMACIÓN WEB
}
}
</script>
</head>
<bodyonLoad="dibujar()">
<canvasid="lienzo1"width="300"height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

Resultado:

17. GRÁFICOS CON SVG.

CASO PRÁCTICO:

Creando 2 canvas el primero grafico una cruz y el segundo crea un cuadrado.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo1=retornarLienzo("lienzo1");
if (lienzo1) {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 109


FUNDAMENTOS DE PROGRAMACIÓN WEB
lienzo1.strokeStyle="rgb(0,0,255)";
lienzo1.beginPath();
lienzo1.moveTo(25,0);
lienzo1.lineTo(25,50);
lienzo1.stroke();
lienzo1.beginPath();
lienzo1.moveTo(0,25);
lienzo1.lineTo(50,25);
lienzo1.stroke();
var lienzo2=retornarLienzo("lienzo2");
if (lienzo2) {
var patron = lienzo2.createPattern(lienzo1.canvas,'repeat');
lienzo2.fillStyle = patron;
lienzo2.fillRect(0,0,300,300);
}
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="50" height="50"><br>
Su navegador no permite utilizar canvas.
</canvas>
<br>
<canvas id="lienzo2" width="300" height="300"><br>
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 110


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Graficos con SVG </title>
</head>
<body>
<svg>
<circle cx="120"cy="80"r="40" stroke="blue" fill="red">
</circle>
<circle cx="160"cy="80"r="40" stroke="blue" fill="yellow">
</circle>
</svg>
<svg>
<ellipse cx="150" cy="60" rx="110" ry="30" stroke="blue" fill="red">
</ellipse>
<ellipsecx="250"cy="60"rx="140"ry="30"stroke="blue"fill="url(#graradial)"></ellipse>
</svg>
<svg>
<rectx="70"y="70"width="100"height="50"fill="url(#gralineal)"stroke="black"></rect>
</svg>
<svg>
<linearGradient id="gralineal" x1="0%" y1="0%" x2="100%" y2="75%">
<stop offset="0.2" stop-color="red"></stop>
<stop offset="1.0" stop-color="black"></stop>
</linearGradient>
<radialGradientid="graradial"fx="0.2"fy="0.7">
<stop offset="0.3"stop-color="yellow"></stop>
<stop offset="1.0"stop-color="red"></stop>
</radialGradient>
</svg>
<svg>
<polygon points="50,50 250,50 150,200">

</polygon>
<ellipse cx="150"cy="50"rx="100"ry="20" fill="url(#graradial)">
</ellipse>
<circle cx="150" cy="250" r="50" fill="url(#graradial)"></circle>
</svg>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 111


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO: CANVAS CON ROTACIÓN.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.fillStyle="rgb(255,0,0)";
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.fillRect(-100,-100,200,200);
lienzo.restore();
avance+=0.05;
if (avance>Math.PI*2)
avance=0;
}
}
var avance=0;
function inicio() {
setInterval(dibujar,50);
}
</script>
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 112


FUNDAMENTOS DE PROGRAMACIÓN WEB

18. PROGRAMANDO OBJETO GRÁFICO USANDO CANVAS API.

CASO PRÁCTICO: CREACION DE KEYFRAMES AVANZADOS.


<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Formularios Avanzados</title>
<style>
#pooltable {
width:340px;
height:200px;
margin-bottom:50px;
border-radius:5px;
background:green;
}
#pooltable.animate {
background:blue;
}
#ball {
width:40px;
height:40px;
border-radius:20px;
background:white;
position:relative;
left:0px;
top:0px;
}
@-webkit-keyframesballmovement {
0% {
left: 0px;
top:0px;
background-color:yellow;
}
33% {
left :100px;
top:160px;
background-color:orange;
}
66% {
left :200px;
top:0px;
background-color:red;
}
100% {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 113


FUNDAMENTOS DE PROGRAMACIÓN WEB
left :300px;
top:160px;
background-color:purple;
}
}
#ball.animate {
-webkit-animation-name :ballmovement;
-webkit-animation-duration :10s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:2;
-webkit-animation-direction:alternate;
}
</style>
<script>
function iniciarAnimacion() {
button.disabled = true;
ball.classList.add("animate");
}
</script>
</head>
<body>
<divid="pooltable">
<divid="ball"></div>
</div>
<buttonid="button"onclick="iniciarAnimacion()">Iniciar Animación</button>

</body>
</html>

Resultado:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 114


FUNDAMENTOS DE PROGRAMACIÓN WEB

19. STORAGE.

CASO PRÁCTICO: LA WEB STORAGE.

<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>
<script>
window.addEventListener('load', inicio, false);
function inicio() {
document.getElementById('guardar').addEventListener('click', guardar, false);
document.getElementById('traducir').addEventListener('click', recuperar, false);
}
function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value,
document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}
function recuperar(evt) {
if (localStorage.getItem(document.getElementById('ingles').value) == null)
alert('No está almacenala la palabra '+document.getElementById('ingles').value);
else
document.getElementById('castellano').value=localStorage.getItem(document.getElem
entById('ingles').value);
}
</script>
</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<input type="button" id="traducir" value="Traducir">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>

Resultado:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 115


FUNDAMENTOS DE PROGRAMACIÓN WEB

20. CREACIÓN DE GRÁFICOS AVANZADOS.

CASO PRÁCTICO:
<!DOCTYPEHTML>
<html>
<head>

<scripttype="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
returnfalse;
}

var fila = 0;
function dibujar() {
var lienzo = retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0, 0, 300, 300);
lienzo.strokeStyle = "rgb(255,0,0)";
lienzo.beginPath();
lienzo.moveTo(0, 150);
lienzo.quadraticCurveTo(150, fila, 300, 150);
lienzo.stroke();
fila++;
if (fila > 300)
fila = 0;
}
}

function iniciar() {
setInterval(dibujar, 10);
}

</script>
</head>
<bodyonLoad="iniciar()">
<canvasid="lienzo1"width="300"height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 116


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO 2 DE GIRO DE LIENZO:


Aplicando con Netbeans
Paso 1
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}

function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.clearRect(0,0,600,600);
lienzo.save();
lienzo.translate(300,300);
lienzo.rotate(avance);
lienzo.scale(tamx,tamy);
lienzo.drawImage(img1,-125,-125);
avance+=0.05;
tamx+=0.01;
tamy+=0.01;
if (avance>Math.PI*2)
avance=0;
if (tamx>=10) {
tamx=0.01;
tamy=0.01;
}
lienzo.restore();
}
}

var avance=0;
var img1;
var tamx=0.01;
var tamy=0.01;
function inicio() {
img1 = new Image();
img1.src = 'eti.jpg';

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 117


FUNDAMENTOS DE PROGRAMACIÓN WEB
img1.onload = function(){
setInterval(dibujar,50);
}
}
</script>
</head>
<body onLoad="inicio()">
<canvas id="lienzo1" width="600" height="600">
prueba con otro navegador...
</canvas>
</body>
</html>

Resultado:

CASO PRACTICO: MANEJO DEL EVENTO DRAG AND DROP CON


GRÁFICOS.

<!DOCTYPE HTML>
<html>
<head>
<title>Semana 4 - html5 </title>
<meta charset="utf-8">
<style>
#recuadro {
width:300px;
height:50px;
background-color:yellow;
border-style:solid;
border-color:red;
font-size:1.5em;
}
#palabras span {
font-size:1.5em;
}
</style>
<script>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 118


FUNDAMENTOS DE PROGRAMACIÓN WEB
window.addEventListener('load', inicio, false);
function inicio() {
document.getElementById('palabra1').addEventListener('dragstart', drag, false);
document.getElementById('palabra2').addEventListener('dragstart', drag, false);
document.getElementById('palabra3').addEventListener('dragstart', drag, false);
document.getElementById('palabra4').addEventListener('dragstart', drag, false);
document.getElementById('recuadro').addEventListener('dragover', permitirDrop,
false);
document.getElementById('recuadro').addEventListener('drop', drop, false);
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var dato=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(dato));
}
function permitirDrop(ev)
{
ev.preventDefault();
}
</script>
</head>
<body>
<p>Arrastre en orden las palabras para formar la oración correcta.</p>
<div id="recuadro"></div>
<div id="palabras">
<span id="palabra1" draggable="true">Senati </span>
<span id="palabra2" draggable="true">especialidad </span>
<span id="palabra3" draggable="true">de </span>
<span id="palabra4" draggable="true"> Desarrollo Web </span>
</div>
</body>
</html>

Resultado:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 119


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO: UBICANDO IMAGEN EN UN DIV:

<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>

<style>
#caja {
margin: 10px;
width: 350px;
height: 350px;
border: 5px dashed gray;
border-radius: 8px;
background: rgb(230,230,230);
background-repeat: no-repeat;
background-size: 100%;
}
</style>

<script>
window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('caja').addEventListener('dragover', permitirDrop, false);
document.getElementById('caja').addEventListener('drop', drop, false);
}

function drop(ev)
{
ev.preventDefault();
var arch=new FileReader();
arch.addEventListener('load',leer,false);
arch.readAsDataURL(ev.dataTransfer.files[0]);
}

function permitirDrop(ev)
{
ev.preventDefault();
}

function leer(ev) {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 120


FUNDAMENTOS DE PROGRAMACIÓN WEB
document.getElementById('caja').style.backgroundImage="url('" + ev.target.result +
"')";
}
</script>
</head>

<body>
<p>Arrastrar una imagen desde el escritorio.</p>
<div id="caja">
</div>
</body>
</html>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 121


FUNDAMENTOS DE PROGRAMACIÓN WEB

V. ADAPTABILIDAD DE INTERFACE DE USUARIO

En este capítulo se trataran los siguientes temas:

- Soporte de múltiples Form.


- Creando adaptabilidad de multiples forms.
- Geolocalización.

21. SOPORTE EN MULTIPLES FORMS.

CASO PRÁCTICO: TRANSICIÓN.

<!DOCTYPE html>
<html>
<head>
<title>CSS Transiciones </title>
<meta charset="utf-8">
<style type="text/css">

div {
font-family: verdana, arial;
font-size: small;
width: 400px;
height: 60px;
padding: 10px 10px;
margin: 10px;
background-color: yellow;
border-radius: 5px;
}

div.simple {
transition: width 2s, height 2s, font-size 2s, background-color 3750ms;
}

div.complex {
transition-property: width, height, font-size, background-color;
transition-duration: 2s, 2s, 2s, 3750ms;
transition-timing-function: ease-in;
transition-delay: 1s;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 122


FUNDAMENTOS DE PROGRAMACIÓN WEB

div:hover {

width: 600px;
height: 80px;
font-size: large;
background-color: red
}
select {
width: 420px;
margin: 10px;
}

button {
display: block;
margin:10px;
}
</style>

<script>
function onLoad() {
initMessagesList();
var divElements = document.querySelectorAll("div");
for (var i = 0; i < divElements.length; i++) {
divElements[i].addEventListener("transitionend", onTransitionend, true);
}
}

var messagesElement = document.querySelector("messages");

function onTransitionend(e) {
messages.add(new Option(e.propertyName + ", Tiempo Trasncurrido " +
e.elapsedTime));
}

function initMessagesList() {
messages.innerHTML = "";
messages.add(new Option("---Para visualizar los eventos transicion---"));
}

</script>
</head>

<body onload="onLoad()">

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 123


FUNDAMENTOS DE PROGRAMACIÓN WEB

<div class="simple">Pase el mouse aquí para ver las transiciones complejas</div>


<div class="complex">Pase el mouse aquí para ver las transiciones complejas</div>

<select id="messages"></select>

<button onclick="initMessagesList()">Limpiar eventos</button>


</body>
</html>

RESULTADO:

CASO PRÁCTICO: ROTACIONES 2D.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>2D Rotaciones</title>
<style>
div {
font-family: verdana, arial;
font-size: small;
width: 400px;
height: 60px;
background-color: yellow;
border-radius: 5px;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 124


FUNDAMENTOS DE PROGRAMACIÓN WEB

.rotate1 {
transform: rotate(10deg);
-ms-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
}

.rotate2 {
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
}

.rotate3 {
transform: rotate(-0.5rad);
-ms-transform: rotate(-0.5rad);
-webkit-transform: rotate(-0.5rad);
-moz-transform: rotate(-0.5rad);
-o-transform: rotate(-0.5rad);
}

.translateAndRotateAboutTopLeft {
transform: translate(100px, 100px) rotate(10deg);
-ms-transform: translate(100px, 100px) rotate(10deg);
-webkit-transform: translate(100px, 100px) rotate(10deg);
-moz-transform: translate(100px, 100px) rotate(10deg);
-o-transform: translate(100px, 100px) rotate(10deg);

transform-origin: left top;


-ms-transform-origin: left top;
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
}

</style>
</head>

<body>

<div class="rotate1">
Gire 10 grados a la derecha(about center-point).<br>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 125


FUNDAMENTOS DE PROGRAMACIÓN WEB
transform: rotate(10deg);
</div>

<br/><br/>

<div class="rotate2">
Girar 10 grados en sentido antihorario (about center-point).<br>
transform: rotate(-10deg);
</div>

<br/><br/>

<div class="rotate3">
Gire en sentido antihorario 0,5 radianes(about center-point).<br>
transform: rotate(-0.5rad);
</div>

<div class="translateAndRotateAboutTopLeft">
Traducir y luego gire (about top-left corner).<br>
transform: translate(100px, 100px) rotate(10deg);
transform-origin: left top;
</div>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 126


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO: EFECTO 3D.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>3D Transformations</title>

<style>
div {
width: 200px;
height: 200px;
font-family: arial;
font-size: 40pt;
text-align: center;
position: absolute;
}

#container {
margin: 400px;
perspective: 200px;
-webkit-perspective: 200px;
-moz-perspective: 200px;
-o-perspective: 200px;

transition: transform 5s;


}

#container:hover {
transform: rotate(90deg);
}

#rightFace {
background-color: yellow;
transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-webkit-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-moz-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
-o-transform: translateX(-100px) rotateY(90deg) translateZ(200px);
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 127


FUNDAMENTOS DE PROGRAMACIÓN WEB
#leftFace {
background-color: orange;
transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-webkit-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-moz-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
-o-transform: translateX(100px) rotateY(-90deg) translateZ(200px);
}
#topFace {
background-color: purple;
transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-webkit-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-moz-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
-o-transform: translateY(100px) rotateX(-90deg) rotateY(180deg)
translateZ(200px);
}

#bottomFace {
background-color: red;
transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-webkit-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-moz-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
-o-transform: translateY(-100px) rotateX(90deg) rotateY(180deg)
translateZ(200px);
}

#backFace {
background-color: green;
transform: rotateY(180deg) translateZ(100px);
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
}

#frontFace {
background-color: rgba(0, 0, 255, 0.25);
transform: translateZ(100px);
-webkit-transform: translateZ(100px);

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 128


FUNDAMENTOS DE PROGRAMACIÓN WEB
-moz-transform: translateZ(100px);
-o-transform: translateZ(100px);
}

</style>

<script>
function onChangePerspective() {
var container = document.getElementById("container");
alert(container.style["msPerspective"]);
}

</script>

</head>

<body>
<div id="container">
<div id="rightFace">Derecha</div>
<div id="leftFace">Izquierda</div>
<div id="topFace">Arriba</div>
<div id="bottomFace">Fondo</div>
<div id="backFace">Espalda</div>
<div id="frontFace">Frente</div>
</div>
</html>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 129


FUNDAMENTOS DE PROGRAMACIÓN WEB

22. CREANDO ADAPTABILIDAD USER INTERFACE.

CASO PRÁCTICO: RESPONSIVE.


<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<style>
.container {
width:996px;
margin:0px auto;
font-size:1em;
}
section,aside {
padding: 10px;
background:#ccc;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-
radius:5px;border-radius:5px;
}
section {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
nav {
overflow: hidden;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 130


FUNDAMENTOS DE PROGRAMACIÓN WEB
nav ul {
list-style-type:none;
float:left;
padding:0px;
}
nav ul li {
float:left;
padding:3px 10px;
margin:2px;
background:#ccccff;
-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-
radius:5px;border-radius:5px;
}
footer {
margin:10px;
text-align:center;
clear:both;
}

/* para 980px o menos */


@media screen and (max-width:980px) {
.container {
width:98%;
}
section {
width:68%;
}
}

/* para 700px o menos */


@media screen and (max-width:700px) {
aside,section {
float:none;

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 131


FUNDAMENTOS DE PROGRAMACIÓN WEB
width:96%;
}
nav, section {
font-size:1.2em;
}
aside {
margin-top:5px;
}
nav ul {
float:none;
clear:both;
}
}

/* para 480px o menos */


@media screen and (max-width:480px) {
aside {
display:none;
}
nav, section {
font-size:1.5em;
}
section {
width:94%;
}
nav ul {
float:left;
clear:none;
width:50%;
}
nav ul li {
float:none;
}

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 132


FUNDAMENTOS DE PROGRAMACIÓN WEB
}
</style>

</head>

<body>

<div class="container">
<header>
<h1>Ejemplo web Senati - Responsive</h1>
<header>

<nav>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
<ul>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
<li>menu 8</li>
</ul>
</nav>

<section>
<b>Aqui va todo el contenido...
<p>

<b>meta name="viewport" content="width=device-width, initial-scale=1.0" ;</b>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 133


FUNDAMENTOS DE PROGRAMACIÓN WEB

<br>Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los
navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del
dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del
dispositivo y que la escala inicial es de 1
</p>

<p>
Aqui va todo el contenido....
Las propiedades que más nos interesan son las siguientes:
<ul>
a) <b>width y height</b> Ancho y alto del navegador (podemos añadir el prefijo min- o
max-)<br>
b) <b>width y height</b> Ancho y alto del dispositivo, móviles y tablets (podemos
añadir el prefijo min- o max- )<br>
c) <b>orientation</b> Orientación del móvil o tablet (para panorámico utilizaremos
orientation:portrait, para vertical orientation:landscape)
</ul>
</p>
<p>
<b>@media screen and (max-width:980px)</b> Se utiliza para definir un tamaño o
inferior. En este caso, para 980px o menos.
</p>
</p>
</section>
<aside>Aparte</aside>
<footer>
<a href="http://www.senati.edu.pe/eti/">Senati - Eti (Pie de pagina) </a>
</footer>
</div>
</body>
</html>

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 134


FUNDAMENTOS DE PROGRAMACIÓN WEB

RESULTADO:

23. GEOLOCALIZACIÓN.

CASO PRÁCTICO: Mostrando exactitud, latitud y longitud.

<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>

<script type="text/javascript">

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('obtener').addEventListener('click',
recuperarLocalizacion, false);
}

function recuperarLocalizacion() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarCoordenada);
} else {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 135


FUNDAMENTOS DE PROGRAMACIÓN WEB
alert('El navegador no dispone la capacidad de geolocalización');
}
}

function mostrarCoordenada(posicion) {
document.getElementById('dato').innerHTML='Latitud:'+
posicion.coords.latitude+
'<br> Longitud:'+posicion.coords.longitude+
'<br>Exactitud:'+posicion.coords.accuracy;
}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localización actual">
<br>
<span id="dato"></span>
</body>
</html>

Resultado:

CAS PRÁCTI CO: MOSTRANDO MAPA.


<!DOCTYPE HTML>
<html>
<head>
<title>Prueba</title>

<script type="text/javascript">

window.addEventListener('load', inicio, false);

function inicio() {
document.getElementById('obtener').addEventListener('click',
recuperarLocalizacion, false);
}

function recuperarLocalizacion() {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 136


FUNDAMENTOS DE PROGRAMACIÓN WEB
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(mostrarCoordenada);
} else {
alert('Prueba con otro navegador');
}
}

function mostrarCoordenada(posicion) {
var direccion = posicion.coords.latitude + "," + posicion.coords.longitude;
var mapa = "http://maps.googleapis.com/maps/api/staticmap?center="
+direccion+"&zoom=14&size=500x500&sensor=false";
document.getElementById("dato").innerHTML = "<img src='"+mapa+"'>";
}

</script>

</head>
<body>
<input type="button" id="obtener" value="Obtener la localización actual en Google
Maps">
<br>
<div id="dato"></div>
</body>
</html>

RESULTADO:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 137


FUNDAMENTOS DE PROGRAMACIÓN WEB

CASO PRÁCTICO: UBICACIÓN.

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript">
function localizacion() {

d = document.getElementById("demo");

if (navigator.geolocation) {

d.innerHTML = "<p>Soporta Geolocalizacion</p>"


navigator.geolocation.getCurrentPosition(
mostrarPosicion,
mostrarError,
{
enableHightAccuracy: true,
timeout: 5000
}
);
}
else {
d.innerHTML = "<p>No soporta Geolocalizacion</p>"
}

function mostrarPosicion(position) {

var latitude = position.coords.latitude;


var longitude = position.coords.longitude;

d.innerHTML += "<p>Latitud: " + latitude + "</p>";


d.innerHTML += "<p>Longitud: " + longitude + "</p>";

latlon = latitude + "," + longitude;


var img_url =
"http://maps.googleapis.com/maps/api/staticmap?center="
+ latlon
+ "&zoom=18&size=24000x18800&sensor=false";

d.innerHTML += "<img src='" + img_url + "'>";


}

function mostrarError(error) {

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 138


FUNDAMENTOS DE PROGRAMACIÓN WEB

switch (error.code) {

case error.PERMISSION_DENIED:
d.innerHTML += "<p>Permiso Denegado</p>"
break;
case error.POSITION_UNAVAILABLE:
d.innerHTML += "<p>Permiso Disponible</p>"
break;
case error.POSITION_TIMEOUT:
d.innerHTML += "<p>Tiempo Agotado</p>"
break;
case error.POSITION_UNKNOWN_ERROR:
d.innerHTML += "<p>Permiso Denegado</p>"
break;
}

}
}
</script>
</head>
<body>
<divid="geo1">
<h1>Clases - Senati</h1>
<buttononclick="localizacion()">Capturar Localización</button>
<divid="demo">

</div>
</div>
</body>
</html>

Resultado:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 139


FUNDAMENTOS DE PROGRAMACIÓN WEB

MARCO TEÓRICO.

Responsive Web es una tendencia o enfoque actual para solucionar los


problemas de diseño para la gran diversidad de resoluciones y dispositivos.
Este enfoque quiere centrarse en el contenido, y en el cliente, en su
experiencia de usuario, si deja de trabajar con su equipo de sobremesa y
quiere continuar navegando en la misma página web desde una tablet o
smartphone.

Responsive Web quiere eliminar la necesidad de diseños diferentes y nuevos


desarrollos para distintas resoluciones y por el contrario, sugiere que nuestro
desarrollo debe dar soporte y responder a la necesidad del contexto sobre el
que se esté ejecutando, teniendo en cuenta parámetros como el tamaño de
pantalla, el tipo de dispositivo o la orientación. La página web debe de tener la
capacidad de adaptarse a cada Dispositivo, creando una solución única,
práctica y adaptable.

Geolocalización.
Se refiere al posicionamiento con el que se define la localización de un objeto
espacial (representado mediante punto, vector, área, volumen) en un sistema
de coordenadas y dato determinado. Este proceso es utilizado
frecuentemente en los Sistemas de Información Geográfica Hace referencia a
conocer nuestra ubicación geográfica automáticamente. Hay varias maneras
de que esto suceda, y como es natural, los dispositivos móviles son los que
más fácil permiten la actualización de nuestra posición, por su portabilidad.

Las distintas versiones del Google Maps son:

Google Ride Finder. Se basa en la localización permanente de taxis y


limusinas mediante el uso de GPS. La herramienta muestra la ubicación
actual de todos los vehículos permitidos de los servicios que participan en las
principales ciudades de EE.UU., incluyendo Chicago y San Francisco, en un
mapa de Google Maps. A partir de 2009 la herramienta parece ser
interrumpida.

Google Moon. Uso de las imágenes de la NASA acerca de la geografía lunar,


siendo integrado a la interfaz de Google Maps. Sin embargo, se han
deshabilitado ciertas utilidades.

Google Earth:

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 140


FUNDAMENTOS DE PROGRAMACIÓN WEB

- Permite volar a cualquier lugar de la Tierra y ver imágenes de satélite,


mapas, relieve y edificios 3D. Ahora también puedes ver galaxias del
espacio exterior y cañones del océano.
- Forma de interactuar y compartir es más sencilla.
- Guarda los lugares que visites y compartirlos con otras personas

LA FUNCIÓN NAVIGATOR.GEOLOCATION.GETCURRENTPOSITION.

La ubicación del usuario se obtiene a través de la siguiente función:

navigator.geolocation.getCurrentPosition(funcExito, funcError,
opciones);
Esta función tiene tres parámetros (los dos últimos opcionales):

funcExito: función de retorno que se ejecutará si se obtiene la posición. Se le


pasará como parámetro un objeto Position.

funcError: función de retorno que se ejecutará si no se obtiene la posición.


Se le pasará como parámetro un objeto PositionError.

opciones: un objeto PositionOptions con parámetros para la obtención de la


localización.

La función intentará obtener la posición del usuario. Si lo consigue llamará a


la función que le pasemos como primer parámetro pasándole un objeto
Position con esos datos. Si, por el contrario, no lo consigue, llamará a la
función que le pasemos como segundo parámetro pasándole un objeto
PositionError que indicará la razón por la que no lo ha conseguido.

EL OBJETO POSITION
Es el objeto que nos indicará la ubicación del usuario si el navegador puede
determinarla. Este objeto consta de los siguientes atributos

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 141


FUNDAMENTOS DE PROGRAMACIÓN WEB

Antes de nada se debe saber qué navegadores soportan esta funcionalidad.


En la siguiente tabla podemos verlo:

Navegador Versión
Opera 10.6+
Internet Explorer 9+
Chrome 5+
Firefox 3.5+

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 142


FUNDAMENTOS DE PROGRAMACIÓN WEB

CUESTIONARIO TEÓRICO:
1. ¿Qué es el Responsive Web Design o Diseño Web Adaptable?
2. ¿Por qué es importante el Diseño Web Adaptable?
3. ¿Qué navegadores soportan los Media Query?
4. ¿Qué es un Meta tags?
5. Diseñar una página en forma libre o guiandose del caso práctico realizado y
testear su adaptabilidad.

CUESTIONARIO PRÁCTICO
Crear una página web donde se muestre información sobre la ciudad
conteniendo un mapa interactivo de Google Maps, de acuerdo con esta
estructura para el documento HTML.

ESCUELA DE TECNOLOGÍAS DE LA INFORMACIÓN 143

También podría gustarte