Manual Aprendizaje Lenguaje Completo

I.S.P.P.
Fray Florencio Pascual Alegre Gonzlez

Autorizacin de Funcionamiento D.S. 045-84-ED, 24-10-84
Calle San Jos Barrio Tarapac s/n Requena Loreto.
Telefax.: (065) 412322, e-mail: isppffpag@hotmail.com
MODULO DE APRENDIZAJE
LENGUAJE DE PROGRAMACION IV
Desarrollo en HTML, CSS y Javascript

REQUENA 2016
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
PRESENTACION
Un mdulo de enseanza aprendizaje, es una propuesta metodolgica bien
organizada que establece la ruta que tiene que seguir el estudiante para lograr
las competencias del curso.
Este mdulo de aprendizaje est diseado para los alumnos del VIII ciclo de la
Carrera de Computacin e Informtica del I.S.P.P. Fray Florencio Pascual
Alegre Gonzlez, que describe con rigor y profundidad los elementos
necesarios, ilustrndolos con ejemplos sencillos, pero realistas. Todo ello con
un enfoque multi-disciplinar que cubre la programacin en JavaScript y el
diseo de grfico. Se ilustra tambin el uso de libreras tales como jQuery o
jQuery UI, Bootstrap (diseos adaptable), gmaps (integracin de GoogleMaps)
o phonegap (creacin de apps ).
COMPETENCIAS DEL CURSO

Permitir a los estudiantes realizar mantenimientos de Aplicativos Web,
elaborar, proyectos educativos usando tcnicas de programacin orientada a
objetos, propiciando la observacin y la creatividad en la elaboracin en forma
individual y grupal.
Capicitar para un primer nivel de desarrollo de aplicaciones para terminales
fijos y mviles (PC, telfono mvil, tableta, etc) en HTML5, CSS3 y JavaScript5,
con las que se disean la mayora de las aplicaciones de cliente en Internet.
PRODUCTO DEL CURSO

Los alumnos sern capaces de disear Pginas Web y apps adaptadas a PC,
telfono mvil o tableta, a programar nuevas aplicaciones en JavaScript, a
ejecutarlas y depurarlas en el navegador Web o a empaquetarlas para las
tiendas de aplicaciones de Android, iOS (Apple) o FirefoxOS.
PRIMERA UNIDAD
INTRODUCCIN AL DESARROLLO EN HTML5, CSS3
LECCIN N 1
INTRODUCCIN A INTERNET Y A LA WEB
1.1. CLIENTES, SERVIDORES Y LA NUBE
Clientes: Dan acceso a informacin y servicios en Internet

Servidores: Alojan la informacin y los servicios
La nube: conjunto de terminales y servidores interconectados con aplicaciones y
protocolos de Internet
TCP/IP: protocolos de interconexin de redes de fibra, cable, WIFI, etc, sobre los que se
implementan las aplicaciones de Internet y sus protocolos
1.2. CLIENTES, NAVEGADORES Y TIENDAS
Clientes de acceso a Internet ms importantes son : PCs, porttiles, tabletas, telfonos

inteligentes
Navegador (browser) cliente Web de acceso a servidores. Utilizando: URL,
HTTP, HTML, CSS y JS Ejemplo: Chrome, Firefox, Internet Explorer, Opera,
Safari, ...
Tiendas de aplicaciones
Instalan aplicaciones en mviles y tabletas. Las aplicaciones usan las normas de la Web
(URL, HTTP, ....)
1.3. MQUINA SERVIDORA (HOST)
Contiene informacin y servicios

Una mquina servidora tiene una direccin conocida en Internet
Direccin simblica (de dominio o DNS): upm.es, google.com,
Cada direccin de dominio tiene una direccin IP (binaria) asociada
Hay 2 tipos de direcciones IP: IPv4 e IPv6
IPv4: versin 4 del protocolo IP con direccin de 32 bits o 4 octetos
ejemplo: 192.9.0.144, 127.0.0.1 (localhost - mi mquina), ...
IPv6: versin 6 del protocolo IP (ltima) con direccin de 128 bits
ejemplo: 2001:db8:85a3::8a2e:370:7334, ....
1.4. SERVIDORES Y PUERTOS
Puerto
Direccin de 16 bits dentro de la mquina servidora
o Es donde se instala el programa servidor
El programa servidor es lo que normalmente denominamos servidor
o Cliente y servidor se comunican a travs de un protocolo: HTTP, SMTP,
o Utilizando el interfaz de sockets TCP/IP para comunicar entre ambos
Los servicios tienen un protocolo y un puerto por defecto
Web:
Protocolo HTTP (puerto 80), HTTPS (443)
Email:
Protocolo SMTP (puerto 25), POP3 (110), IMAP143)
Shell segura: protocolo SSH (puerto 22)
4

1.5. URL (UNIFORM RESOURCE LOCATOR)
Direccin de un recurso en un servidor en Internet

Internet soporta muchos tipos de servicios diferentes
Cada tipo de servicio utiliza un URL y protocolo diferentes
Algunos ejemplos de tipos de URLs
URL Web: utiliza HTTP para acceder a recursos, incluye
o Protocolo, servidor y recurso (camino): http://google.com/picture.png
URL de correo (email): identifica el buzon de usuario, incluye
o Protocolo, buzon de usuario y servidor: mailto:pepe_garcia@gmail.com
1.6. HTTP (HIPERTEXT TRANSFER PROTOCOL)
Protocolo del Web

Procesa recursos identificados por un URL en un servidor remoto
Mtodos o comandos principales de HTTP
GET: trae al cliente (lee) un recurso identificado por un URL
POST: crea un recurso identificado por un URL
PUT: actualiza un recurso identificado por un URL
DELETE: borra un recurso identificado `pr un URL
....... (hay mas comandos)
1.7. APLICACIN WEB
Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript

HTML :Lenguaje de marcado de pginas Web, define la estructura del contenido de una
pgina Web . En WebApps define la interfaz de la aplicacin con el usuario.
CSS :Define el estilo visual de un una pgina o aplicacin Web (HTML)
JavaScript :Lenguaje de programacin de aplicaciones de cliente
Ejemplo: Aplicacin Web: HTML, CSS y JavaScript
HTML
Lenguaje de marcado
CSS
Estilo la visualizacin
JavaScript
Lenguaje de programacin

1.8. ACTIVIDAD CUESTIONARIO
A. Indicar qu respuesta define correctamente al siguiente trmino: DELETE
Protocolo que permite procesar remotamente recursos en un servidor.

Comando de HTTP para traer pginas Web al cliente para su visualizacin.
Lenguaje que define la estructura de la informacin de una pgina Web.
Comando de HTTP para crear recursos en un servidor.
Lenguaje que define el estilo de visualizacin de la pgina Web en el navegador.
Comando de HTTP para borrar recursos en un servidor.
Comando de HTTP para editar recursos en un servidor.
B. Indicar qu respuesta define correctamente al siguiente trmino: JavaScript
Direccin que identifica sin ambigedad un recurso en Internet

Unidad de informacin digital de inters para un usuario.
Lenguaje de programacin de aplicaciones de cliente.
Direccin interna de la mquina servidora donde se instala un servidor.
C. Indicar que respuesta define correctamente al siguiente trmino: PUERTO
Protocolo que permite procesar remotamente recursos en un servidor.

Direccin que identifica sin ambigedad un recurso en Internet
Unidad de informacin digital de inters para un usuario.
D. Indicar qu respuesta define correctamente al siguiente trmino: GET

Comando de HTTP para borrar recursos en un servidor.
Comando de HTTP para editar recursos en un servidor.
Lenguaje de programacin de aplicaciones de cliente.

LECCION N 2
INTRODUCCIN A LOS ELEMENTOS BSICOS DE HTML, CSS
2.1. HTML/CSS: Mi Primera Pagina Web
2.1.1.
QUE ES HTML
Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse
en cualquier navegador.
<html> </html>
Estandarizado en la norma ISO de SGML (Standard Generalized Markup Lenguage).
El W3C desarrolla especificaciones tcnicas y directrices, de forma que se pueda
asegurar una alta calidad tcnica y editorial.
2.1.2.
ESTRUCTURA HTML
Un documento HTML tiene tres etiquetas que describen la estructura general de un
documento y dan una informacin sencilla sobre l. <html>, <head> y <body>
Las etiquetas pueden escribirse tanto en maysculas como en minsculas, pero se
recomienda el uso de minsculas: <html> o<HTML>, <body> o <BODY>
Editor
2.1.3.
Visualizacin en el navegador
LENGUAJE HTML
Las marcas de texto en html, se emplean para el estructurado semntico del contenido
.
Los textos habitualmente estn formados bsicamente por titulares <h1></h1> prrafos
<p></p> , resaltando en ellos agunas palabras en negrita <strong></strong> o en cursiva
<em></em> .
Las imgenes se vinculan en una pgina HTML con la etiqueta img
<img src="ingress.jpg" width="400" height="492" alt="Louis-Francois Bertin - Ingres"/>
con los atributos: src = URL, width = ancho, height = alto, alt = texto alternativo de la
imagen.
7

Las imgenes que se usan en la web son: GIF, JPG, PNG y las imgenes vectoriales en SVG
Ejemplo:
2.1.4.
URL
URL (Uniform Resource Locator) es el localizador de un archivo en internet.
Una direccin absoluta en internet, que combina el nombre del servidor que proporciona
la informacin, el directorio donde se encuentra, el nombre del fichero:
esquema://www.miDominio.com/ruta/miArchivo.html
Un esquema define el tipo de servicio de internet:
http, es el protocolo usado para la transacin en la Web
<a href="http://www.nytimes.com/"> The New York Times</a>
https es la versin segura de http
<a href=" https://www.google.es/"> Google Espaa</a>
mailto, es el esquema que se emplea para enlazar a una direccin de correo.
<a href="mailto:nombre@miDominio.com"> Contacto</a>
ftp, es el esquema para la transferencia archivos.
<a href="ftp://ftp.miDominio.com/ruta/miArchivo.zip">Descarga por FTP</a>
Una URL local nos lleva a otra pgina o archivo del mismo sitio de Internet.
Ejemplo de un sitio web, de la raz parten todas las subcarpetas.
css, img, pag
Cuando el archivos a enlazar est en la misma carpeta: la ruta es directamente el nombre
del archivo de destino. <a href="pag2.html">Ver siguiente</a>
El archivo de destino est en una carpeta de nivel inferior a su origen, en este caso
deberemos escribir la ruta a partir de la carpeta donde est el archivo de origen:
<link href=css/estilo.css" rel="stylesheet" type="text/css"/>
<a href="pag/pag5.html">Ver ejemplo 5</a>

2.1.5.
CSS
En HTML, controla el aspecto grfico del documento mediante hojas de estilo CSS
(cascading style sheets), el CSS, indica al navegador como se deben visualizar los
elementos de un documento HTML.
As se consigue separar el aspecto del contenido.
El estilo CSS, se puede aadir mediante un bloque marcado como <style> en la cabecera
(<head>) y aplica el estilo a los elementos de la pgina.
Para aplicar un estilo de presentacin, el selector de elementopuede ser una etiqueta
HTML: p, h1, ul, li
El estilo afecta a todo el contenido incluido dentro de esa etiqueta
<p> </p>, <h1></h1>, <ul></ul>, <li></li>.
El estilo se define entre llaves "{" y "}"
Cada etiqueta HTML tiene unos valores de CSS por defecto, que pueden variar segn el navegador,
que tendremos que modificar con nuestros estilos personales.
Visualizacin valores por

defecto CSS en el navegador

2.1.6.
NAVEGACION HTML
La etiqueta <a> se emplea para definir un enlace a otra pgina. Un men es una lista de
enlaces. Se recomienda usar las marcas de lista <ul> <li> y el enlace <a>.
Un men vertical y horizontal con FLEX, tendra este formato.
10

2.1.7.
EDITORES HMTL
Antes de comenzar a trabajar con un editor especfico, es recomendable conocer el cdigo.
Podemos usar programas que trabajen con texto plano, sin aadir sus propias marcas de
edicin. Los documentos HTML deben tener la extensin html o htm.
Usar un editor wysiwyg como el Adobe Dreamweaver o el BlueGriffon
(http://www.bluegriffon.org/) o un editor con ayudas visuales como el sublime
(http://www.sublimetext.com/) o el Brackets (http://brackets.io/ )nos facilitar las cosas.
Ver comparativa: http://en.wikipedia.org/wiki/Comparison_of_HTML_editors
2.1.8.
RECURSOS CSS
MDN Usando las cajas flexibles CSS
https://developer.mozilla.org/es/docs/Web/Guide/CSS/Cajas_flexibles
CSS-TRICKS A Complete Guide to Flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
2.2. ESTRUCTURA HTML Y CSS

2.2.1.
ESTRUCTURA HTML
La etiqueta meta define varios tipos de metadatos.

El atributo charset especifica la codificacin usada en nuestra pgina.
<meta charset="character_set">
Charset utf-8 es la Unicode Transformation Format 8-bit representa el cdigo de caracteres
UNICODE. Es compatible con ASCII. Permite visualizar los caracteres de todos los idioma
Los elementos html pueden visualizarse por defecto como bloque o como en lnea.
Los elementos bloques block ocupan todo el ancho de la pgina y fuerzan a una nueva lnea
antes y despus.
<article> <aside> <canvas> <div> <footer> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> <header>
<p> <pre> <section><ul>
Los elementos en lnea inline slo ocupan el ancho necesario y no fue rzan nuevas lneas.
<em> <a> <br> <img> <span> <button> <input> <select><textarea>
11

2.2.2.
ESTRUTURA HTML5
En HTML5, los bloques div son sustituidos por bloques semnticos que muestran
significado por si mismos.
En HTML 5 se ha querido mejorar esa situacin introduciendo varias etiquetas para
definir
diferentes
tipos
de
secciones: <article>, <section>, <nav>,<aside>, <header> y <footer> .
Al utilizar etiquetas especficas para tipos de contenido especfico, se mejora la
legibilidad y facilidad de reutilizacin tanto del cdigo HTML como de las hojas de estilo.
Secciones y esquemas del documento con HTML5
Encabezamiento: <header>
La etiqueta <header> est pensada para agrupar el contenido inicial de una pgina
web. El elemento <header> puede estar incluido en <body> y entonces se entiende
que es el encabezado de la pgina en su conjunto, pero tambin se puede incluir
en <article>, <section>, <nav> y <aside> y entonces se entiende que es el encabezado
del elemento que lo contiene.
Navegacin: <nav>
La etiqueta <nav> est pensada para agrupar los enlaces a otras pginas o los
enlaces a los apartados de la propia pgina. La imagen siguiente muestra una pgina
con tres elementos <nav>:
o
o
o
El <nav> de <header> puede contener enlaces globales a otras pginas de sitio

web.
El <nav> de <body> puede contener enlaces a las secciones de la pgina.
El <nav> de <aside> puede contener enlaces a otros sitios webs relacionados
con el contenido de la pgina.
12

Seccin: <section>
La etiqueta <section> est pensada para agrupar los apartados del contenido
principal del documento. Normalmente, las secciones <section>empiezan con un
ttulo (<h1>, <h2>, etc.) que hace referencia al tema tratado en la seccin.
Un elemento <section> puede contener elementos <section>. Las secciones
interiores se entienden como subsecciones de la seccin exterior. Un
elemento <section> puede contener elementos <article> y viceversa.
Las etiquetas <section> y <article> son similares. La diferencia entre ellas es
que <article> es para partes que forman una unidad en s mismas y<section> es para
partes de una unidad mayor.
Artculo: <article>
La etiqueta <article> est pensada para agrupar el contenido de la pgina que forma
una unidad en s misma desde el punto de vista temtico. Es decir, que un artculo
debera poder publicarse y leerse como documento independiente, aunque una
pgina puede estar formada por varios artculos de temtica relacionada o no. Las
etiquetas <article> y <section> son similares. La diferencia entre ellas es
que <article> es para partes que forman una unidad en s mismas y<section> es para
partes de una unidad mayor.
Lateral: <aside>
La etiqueta <aside> est pensada para agrupar contenido secundario y tangencial al
contenido al que acompaa (por ejemplo, un bloque de anuncios, un grupo de
enlaces externos relacionados, una cita del texto). Normalmente se suele mostrar en
los lados del documento.
Pie: <footer>
La etiqueta <footer> est pensada para contener informacin general sobre el
documento, informacin que se suele poner al final del documento: autor,
direcciones de contacto, licencia o condiciones de uso, enlaces a otros documentos
relacionados, etc.
13

Ejemplo de estructura de una pgina realizada con los bloques semnticos HTML5
2.2.3.
ESTRUCTURA CSS
El estilo CSS se puede aadir escribiendo directamente las propiedades CSS en la lnea, es el
mtodo ms sencillo, se aade un atributo style en el elemento concreto dentro de la
pgina. No se pueden reutilizar en otros elementos que comparten las mismas propiedades.
Se escriben las propiedades del estilo en las marcas del HTML como "nombre: valor"
separadas por punto y coma.
<body style="color: red; ">
<p style="font-size: 16px; color: blue; font-family: Arial, Helvetica, sans-serif;">Mi primera
pgina</p>
Lo ms aconsejable para mantener la separacin entre contenido y presentacin, en una
hoja de estilo CSS separada del HTML, que se importa con un elemento <link> en la
cabecera.
14

CSS Permite adaptar la presentacin a PCs, mviles, tabletas o impresoras con el
atributo media que activar el estilo especfico de cada dispositivo.
<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css">
<link href=estilo.css" rel="stylesheet" type="text/css" media="(min-width:380px)">
CSS3 permite aadir bordes y bordes redondeados
CSS3 permite aadir sombras
box-shadow:
none|offset-x
offset-y
blur-radius
spread-radius
color
inset|initial|inherit;
o box-shadow: -5px -5px #888; box-shadow: -5px -5px 5px #888;
o box-shadow: -5px -5px 0 5px #888; box-shadow: -5px -5px 5px 5px #888;
o box-shadow: 0 0 5px #888; box-shadow: 0 0 5px 5px #888;
o box-shadow: inset -5px -5px #888; box-shadow: inset -5px -5px 5px #888;
Border-radius:24px
Border-radius:24px
Border-radius:36px 12 px;
o box-shadow:insetBorder-top-left-raduis:24px
-5px -5px 0 5px #888;box-shadow:
inset -5px
-5px 5px 5px
0;
#888;box-shadow: inner 0 0 5px #888;box-shadow: inset 0 0 5px 5px #888;
Border-top-right-raduis:50px 30 px
Border-radius: 0 20px 20 px 0
Border-bottom-right-raduis:50px
30px
Border-radius:2px 0 0 20px
box-shadow: -5px -5px

#888;
box-shadow: -5px -5px 5px

#888;
box-shadow: 0 0 5px #888
box-shadow: 0 0 5px 5px

#888;
box-shadow:
inset -5px -5px 5px #888
box-shadow:
inset -5px -5px 5px #888
Border-radius:50% ;
Border-radius:0 50% 0 50%
box-shadow: -5px -5px 0 5px

#888;
box-shadow: inset -5px -5px

#888;
box-shadow: inner 0 0 5px

#888;
Border-radius:50% 50% 0 0
Border-top-right-raduis:50% 20%
box-shadow: -5px -5px 5px 5px

#888;
box-shadow: inset -5px -5px 5px

#888
box-shadow: inset 0 0 5px 5px

#888;
15

2.2.3.1. DIV
El elemento <div> es un elemento de bloque que se emplea contener en su interior otros
elementos HTML. No tiene ningn significado, es semnticamente neutro.
<div id="caja" class="card"> . </div>
Atributo ID: identifica unvocamente un elemento HTML en una pgina. Un

elemento HTML solo debe tener un atributo ID y este debe ser nico en la pgina.
El selector CSS #caja se refiere al elemento con atributo id="caja, como en #caja
{color:blue}
Atributo CLASS: define una clase de elementos HTML. Un elemento puede tener
varios atributos CLASS. El selector CSS .card se refiere a todos los elemento de la
clase card (que llevan el atributo class="card"), como en .card {color:red}
div
Padding, Margin y border
2.2.4.
RECURSO HTML y CSS

MDN: Lista de Elementos HTML5
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/HTML/Inline_elements
W3C: HTML5 elements
http://dev.w3.org/html5/markup/elements.html
HTML5-Visual Cheat Sheet
https://docs.google.com/viewer?a=v&pid=sites&srcid=bGFuZG1hcmtzY2hvb2wub3Jnf
G1zLWNpcmFzLWNsYXNzLXdlYnNpdGV8Z3g6M2I3ZjY1NzJlMjlmNDA3Ng
CSS3 Generator
http://css3generator.com /
CSS3 Gradient Generator
http://gradients.glrzad.com/
{CSS} Portal - on line generator
16

2.2.5.
Actividad: Cuestionario
A. Cul de las siguientes etiquetas de estructura no es semntica HTML5:
<header>
<section>
<div>
<aside>
B. Cul de las siguientes etiquetas NO es de bloque block:
<h1>
<hr>
<span>
<p>
C. Hay caracteres que deben aparecer en los contenidos como escapes, de manera que no
interacten con la sintaxis del etiquetado. El carcter ">" en el HTML se escribe:
<
>
&
D. Dados los valores de sombra para una caja:
box-shadow: inset 5px 5px 20px 5px #CCCCCC;
La sombra es:
De color rojo
Interior
De 30px de desplazamiento horizontal
Exterior
2.3. HERENCIA CSS

Para entender como funcionan los selectores y la herencia CSS es necesario entender qu es
el rbol del documento
El rbol del documento del ejemplo anterior:
17

Ancestor es un elemento conectado pero m s arriba en la estructura del documento
Descendientes son los elementos conectados pero ms abajo en la estructura

del documento.
Parent es el elemento conectado y directamente sobre un elemento en la

estructura del documento.
Child es el elemento conectado y directamente debajo de un elemento en la

estructura del documento.
18
2.3.1.
Siblings son los elementos que comparten un mismo padre en la estructura del
documento
SELECTORES CSS
El selector aplica a todos los elementos HTML de la pgina con esa etiqueta (p).
El selector mltiple de CSS, incluye varios selectores separados por coma (,), para aplicar
propiedades comunes: h1, h2, h3.
El selector descendente puede incluir etiquetas separadas solo por espacios. Se aplicar
solo a elementos que estn dentro de otros anteriores, ancestros, en el ejemplo, .caja
deber ser ancestro de nav y nav deber ser ancestro de ul.
Selector
universal * afecta a todos los elementos.
* { margin: 0; padding: 0; }
Las clases se usan para aplicar estilos a un elemento determinado.

<p class="rojo">Prrafo rojo<p>
.rojo { color: red; }
Tambin se pueden aplicar estilos a un id.

<p id="texto>Prrafo especial</p> #texto { color: blue; }
La seleccin de hijos es similar al selector descendente, que se aplica slo a los elementos
que son hijos directos.
li > a { color: red; }
19

2.3.2.
PRIORIDAD CSS
Reglas adicionales de prioridad de las declaraciones CSS ordenadas de menor a mayor:
CSS por defecto del Navegador (navegador)
CSS en preferencias de usuario del navegador (usuario)
CSS en pgina HTML o script CSS (diseador)
CSS en pgina HTML o script CSS con !important (diseador)
Ejemplo: body {color:blue !important;}
CSS en preferencias de usuario del navegador con !important
(usuario), p. e. body {color:blue !important;}
2.3.3.
RECURSOS CSS
Kseso CSS: CSS bsico: Cascada, especificidad y herencia
http://ksesocss.blogspot.com/2012/05/css-basico-cascada-especificidad-y.html
Dev.Opera: Recorriendo el rbol DOM
http://dev.opera.com/articles/view/traversing-the-dom-es/
LIBROS WEB: rbol de nodo
http://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html
UOC: Herencia y cascada
http://mosaic.uoc.edu/ac/le/es/m6/ud2/
2.3.4.
ACTIVIDAD CUESTIONARIO.
A.
Qu es ms aconsejable, que el estilo est en la cabecera del documento o en

archivo CSS aparte?
En la cabecera
En hoja de estilo CSS aparte
B.
La etiqueta <blockquote> se emplea para tratar:

Para bloques de texto en prrafos sangrados.
Para representar citas.
Para representar fragmentos de cdigo informtico.
C. Las listas de informacin no ordenadas se identifican con la etiqueta:

<ul>
<ol>
<dl>
D. La etiqueta <em> da nfasis al texto que encierra, por defecto se representa:
De color rojo "red"

Como cursiva
Como redonda
Como negrita
20
LECCIN N 3
ESTRUCTURA HTML5/CSS3 PARA MULTIPANTALLA Y OBJETOS MULTIMEDIA
3.1. ESTRUCTURA CSS3: Permite posicionar los div en la pgina, float
<style type="text/css">
div {
float: left;
padding: 5px;
margin-right: 5px;
margin-bottom: 5px;
border: 1px solid
#666;
}
</style>
CSS3 permite posicionar los div en la pgina, float y clear. Con float el div flota a una
posicin relativa.
CSS3 permite posicionar los div en la pgina, float y clear. Con clear rompe el
esquema del float.
21
Uso de float y un div clear que rompe el esquema del float.
22

CSS3 permite posicionar los div en la pgina, mediante position, absoluta, relativa o fija.
Con posicin absoluta el div sale del flujo del contenido.
Con posicin fija el div no cambia de posicin en el escalado del navegador o el scroll en la
pgina.
23

3.1.1. TEXTO CSS3
Las propuestas de familia tipogrfica terminan con una familia Genrica alternativa.
P{
font-family:"Times New
Roman",Georgia,Serif; }
Valores de las familias genricas son:
'serif' (Ej.: Times)
'sans-serif' (Ej.: Helvetica, Arial)
'cursive' (Ej.: Zapf-Chancery, Comic sans)
'fantasy' (Ej.: Western, Impact)
'monospace' (Ej.: Courier)
font-size Especifica el tamao de la fuente
<absolute-size> | <relative-size> | <length> | <percentage> | inherit
Tamao predeterminado para el texto es de 16px (16px = 1em).
o <absolute-size> Los valores posibles son:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
o <relative-size> Un valor relativo al heredado, mayor o menor:[ larger | smaller ]
o <length> es un valor absoluto del tamao generalmente en px
o <percentage> representa un valor en funcin al valor heredado.
scaling
factor
XHTML
headings
xx-small
x-small
small
medium
large
x-large
xx-large
3/5
3/4
8/9
6/5
3/2
2/1
h5
h4
h3
h2
h1
h6
3/1
line-height define el interlineado del texto normal

| <nmero> | <medida> | <porcentaje> | inherit
o El nmero que multiplicado el tamao de la fuente establece el alto de la lnea
o Medida, es la altura de la lnea como un valor fijo en px, pt
o El porcentaje del alto de la lnea en funcin del tamao de la fuente
3.1.2. @font CSS3

Formatos @font-face
String
Font Format
Common extensions
"woff"
WOFF (Web Open

Font Format)
.woff
24
"truetype"
TrueType
.ttf
"opentype"
OpenType
.ttf, .otf
"embeddedopentype"
Embedded OpenType
.eot
"svg"
SVG Font
.svg, .svgz
3.1.3. @font-face
Permite vincular fuentes sin necesidad de que el cliente las tenga instaladas en su
ordenador.
font-family
Valor: <family-name>
Src
[<uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string>
[,<string>]*)] | <font-face-name> ]*
@font-face {
font-family: FiraMono;
src: url(FiraMono-Regular.woff) format("woff"),
url(FiraMono-Regular.eot) format("embedded-opentype");
}
p{
font-family: FiraMono, serif;
}
@font-face embedding
Es posible el uso de fuentes alojadas en servidores externo.
Google Fonts
En la cabecera
<link href='http://fonts.googleapis.com/css?family=Caesar+Dressing'
rel='stylesheet' type='text/css'>
En el estilo
p{
font-family: 'Caesar Dressing', cursive;
}
3.1.4. Actividad Cuestionario
A. Cul de los siguientes formatos no es un formato de fuente:
o .WOFF
o .SVG
o .SWF
o .OTF
25
B. Cul de los siguientes formatos no es un formato de fuente:

o .WOFF
o .TTF
o .EOT
o .PNG
C. @font-face permite vincular fuentes:
o Pero el usuario debe tener las fuentes instaladas en su dispositivo.
o El usuario no es necesario que tenga las fuentes instaladas en su dispositivo.
D. Mediante @font-face es posible el uso de fuentes alojadas en servidores de terceros
como Google fonts:
o Se enlaza mediante el uso de una etiqueta <link> en la cabecera de la pgina.
o Es necesario bajar la fuente y alojarla en tu propio servidor.
3.2. HTML/CSS VIDEO AUDIO, IMAGEN
3.2.1. IMGENES.
La resolucin de pantalla es el nmero de pixeles que muestra.
La resolucin CSS o Viewport.
Si un dispositivo tiene un alto nmero de pixeles, a una distancia de visualizacin normal,
usaremos dip la unidad de pixel independiente del dispositivo, es aproximadamente igual
en todos los dispositivos.
El pixel CSS, corresponde al pixel real del dispositivo y el dispositivo corrige esta diferencia
con un factor de escala.
Imgenes de mapa de bits

La imagen est formada por una rejilla de pixeles, se definen por su tamao en ancho y alto
en pixeles y la profundidad de color, el nmero de colores que es capaz de representar en
cada pixel.
PNG, formato 24bits truecolor

Compresin sin prdida
Transparencia 256 niveles
JPEG, formato 24bits

Compresin produce ruido
No transparencia
GIF, formato 8bits, 256 colores

Compresin produce dither
Transparencia 1 nivel
Animacin
26

Imgenes vectoriales SVG
SVG son las siglas de Scalable Vector Graphics, Es un formato desarrollado y mantenido por
el W3C. Son imgenes definidas matemticamente, que se calculan en el navegador y su
visualizacin no pierde calidad en cualquier tamao que se presenten.
Para crear y modificar este tipo de formatos podemos usar:

Inkscape: de cdigo abierto https://inkscape.org/es/
SVG-Editor: Editor online. http://www.svg-editor.org.uk/
Adobe Illustrator: http://www.adobe.com/products/illustrator.html
La etiqueta picture la solucin para imgenes responsive. Permite usar varias imgenes
segn las condiciones media.
<picture>
<source media="(min-width: 1100px)" srcset="shaum6.jpg">
<source media="(min-width: 600px) " srcset="shaum3.jpg">
<source media="(min-width: 300px)srcset="shaum1.jpg">
<img src="shaum1.jpg" alt="shaum">
</picture>
3.2.2. VIDEO.
HTML5 permite insertar contenido multimedia, audio y vdeo.
<video src="video.mp4"> Tu navegador no soporta el elemento vdeo </video>
Atributos
poster: permite insertar una imagen de sustitucin cuando el vdeo no est disponible.
controls: se incluyen controles de play, pause
width y height: ancho y alto, se ajusta al valor y el otro se calcula automticamente
manteniendo la proporcin.
loop: reproduce el vdeo continuamente .
autoplay: reproduce el vdeo automticamente.
preload: carga el vdeo <video src="video.mp4" poster="videojpg" autoplay loop
controls></video>
27

Es posible incluir diferentes formatos de un archivo para que el vdeo pueda ser soportado
en distintos navegadores, se emplea la etiqueta <source>
<video width="640" height="360" controls preload>
<source src="video.mp4" type='video/mp4; codecs="avc1,mp4a"' />
<source src="video.ogv" type='video/ogg;
codecs="theora,vorbis"' />
<source src="video.webm" type='video/webm; codecs="vp8,vorbis"'
/>
</video>
Formatos y compatibilidad de los navegadores:
https://developer.mozilla.org/es/docs/Web/HTML/Formatos_admitidos_de_audio_y_video_en_html5
Cada navegador, cada dispositivo, soporta diferentes formatos de vdeo. La solucin es

convertir el vdeo a los diferentes formatos de vdeo, que puede ser un proceso complejo y
que requiere tiempo.
Una solucin puede ser emplear YouTube para reproducir vdeo. Sube el vdeo a YouTube,
toma nota de su identificador o copia el cdigo de insercin que facilita YouTube.
<iframe width="640" height="360"
src="https://www.youtube.com/embed/CFp_8Sah6YU" frameborder="0" allowfullscreen>
</iframe>
Los parmetros de YouTube:
Autohide , valor 0 para tener los controles visibles y 1 si prefieres que se oculten cuando
el video se est reproduciendo.
Autoplay, 0 si quieres que el vdeo se reproduzca automticamente, 1 si espera al play.
Controls, con 0 los controles no se muestran con 1 si y en ambos el vdeo se descarga el
vdeo, con 2 los controles se muestran pero el video no se descarga hasta hacer play.
Loop, 0 slo una vez y 1 para reproduccin infinita.
Est en desuso emplear <object> o <embed> para insertar vdeo.
3.2.3. AUDIO
El audio EN html5 se inserta de manera similar:
<audio src="audio.mp3" controls autoplay loop > </audio>
El formato mp3, no es un formato abierto, para maximizar la compatibilidad usaremos varios
formatos con <source>
<audio controls>
<source src="audio.ogg" type="audio/ogg">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.wav" type="audio/wav">
</audio>
28

3.2.4. ACTIVIDAD
Realiza una pgina que utilice imgenes responsive con la etiqueta picture, que contenga un
vdeo de YouTube y archivos de imagen vectorial SVG.
3.3. INTEGRACIN DE OBJETOS Y DE MULTIMEDIA EN PGINAS HTML5

3.3.1. Integrar objetos y recursos externos
HTML permite insertar recursos externos en una pgina Web con:
A.<img .>: imgenes
Formato de puntos: JPEG, GIF, PNG, .. (resolucin fija)
Formato vectorial: SVG, (escalables sin perdida de calidad)
B. <video .>, <audio .>: video y audio
No existe acuerdo sobre los formatos a utilizar!!!
C. <iframe .>: pginas Web y otros objetos
Crea un nuevo marco de navegacin Web anidado seguro
D. <object .>: objetos. plugins, imgenes
Es el mas genrico.
E. <embed .>: aplicacin exterior, normalmente no-HTML
Marca heredada del pasado (Flash), se introdujo como un elemento no estndar
Permiten integrar (hacer mash-ups) contenidos con gran facilidad
http://www.sitepoint.com/add-svg-to-web-page/
https://groups.google.com/forum/#!topic/epub-widgets-discuss/JWGV_RPe4H4
http://www.w3.org/TR/html5/embedded-content-0.html
3.3.2. Audio y Video en HTML5
Las marcas audio y video de HTML5: Permiten incluir audio y video en pginas Web
http://www.w3schools.com/html/html5_video.asp
29

Video: formatos
Contenedor OGG
Video: Theora (VP7), Audio: Vorbis
o Calidad menor
Contenedor MP4
Video: H264, Audio: ACC
Existen Patentes
Contenedor WebM
Video: VP8, Audio: Vorbis
Qu marca usar?
<object>: Es la mas general de todas. Puede integrar una imagen, un marco de
navegacin anidado o un recurso procesado por un plugin. Permite paso de parmetros
e interaccin con el objeto integrado. Tipo mime identifica tipo de objeto: <object
type="image/svg+xml" .. >
<iframe>: Es la mas segura. Crea una caja de arena (sandbox) y restringe accesos al
mismo origen. Protege de acciones hostiles del objeto importado
<embed>: Marca no estndar heredada de tiempos del Flash. Aunque ha sido incluida
en HTML5, su uso no es muy popular.
<object>, <iframe> y <embed> pueden usarse con imgenes, video,..
El ejemplo siguiente muestra su equivalencia, incluyendo
2 marcos de navegacin anidados, uno con <object> y otro con <iframe>,
2 videos, uno con <video> y otro con <iframe>,
2 imagenes, un SVG animado con <object> y un PNG de baja resolucin con <img>.
30
GALERIA CON FLEXBOX

Flexbox adapta los bloques a la caja con
display: flex; // Crece horizontalmente (flex-direction:row)
flex-wrap: wrap; // Inserta hasta final y pasa a lnea siguiente.
Coloca cada bloque vertical a la derecha del anterior si cabe y al llegar
al final pasa a la lnea siguiente. Utilizan valores por defecto (flexgrow:0, flex-shrink:1, flex-basis:auto).
Cada bloque vertical puede contener a su vez dos bloques
horizontales.
31
3.4. ACTIVIDAD LABORATORIO

Se entregara una carpeta de nombre Practica_Imagenes que contendr un archivo Html con
imgenes las cuales estn desordenadas y sin una estructura. El objetivo del laboratorio ser
ordenar las imgenes y darle estructura; as como practicar lecciones aprendidas.
3.5. TRABAJO GENERAL DE UNIDAD
Crear una pgina web grupal, que incluya al menos:
1. Uso de colores para texto y fondo, incluyendo al menos colores degradados y sombras en
alguna de sus cajas.
2. Distintos encabezados.
3. Uso de caracteres especiales
4. Incluir, imgenes de la ciudad de requena de tipo bitmap y jpg.
5. Dar algn tipo de efecto a las imgenes con CSS3.
6. Incluir algn vdeo cultural de requena.
7. Incluir bordes redondeados en alguna de sus cajas.
8. La pgina debe comenzar con el siguiente encabezamiento: Pgina Grupal de <nombre
del grupo >
9. Subir dicha aplicacin a la cuenta de Neocities.org o de su eleccin.
32
FICHA DE AUTOEVALUACIN
I.
DATOS INFORMTICOS:
rea
______________________________________________________________________
Forma dora
______________________________________________________________________
Grupo
______________________________________________________________________
Tema
______________________________________________________________________
Semestre
_____________________ Secci n _____________
Fecha ______/______/ 2016
II.
ALUMNO(A)
III.
CRITERIO DE DESEMPEO
1.1.3. T oma decisiones y resuelve problemas con autonoma, asertividad, empata y responsabilidad.
1.1.4. Demuestra tica, compromiso y autodisciplina en las tareas que asume.
2.3.4. Utiliza las TIC existentes en su medio, en sus procesos pedaggicos asumiendo respeto por las ideas vertidas en las T IC.
3.1.4. Acta bajo principios de convivencia democrtica, buscando el bienestar colectivo.
3.
CRITERIOS DE EVALUACIN
INDICADORES
ESCALA
3 4
Total
Demuestra compromiso y autodisciplina en la elaboracin y seguimiento de las prcticas de

laboratorio
Busco informacin adicional y particip activamente en clase
Me expreso con claridad, coherencia y fluidez, demostrando preparacin y dominio del tema
Asume con responsabilidad las tareas y prcticas asignadas para la elaboracin de las pginas y
aplicativos web.
Demuestra una actitud crtica y un manejo adecuado de los temas en el proceso de su aprendizaje.
Intervengo en clase con mis interrogantes, ideas u opiniones con claridad y coherencia
Actu con respeto y responsabilidad durante el horario de clases
Establece un clima de respeto, cooperacin y tolerancia al planificar y ejecutar los trabajos en
grupos.
T OT AL
LEYENDA:
INSUFICIENTE (1)
SUFICIENTE (2)
REGULAR (3)
BUENO (4)
MUY BUENO (5)
PROMEDIO TOTAL: PUNTAJE OBTENIDO X 20 =

PUNTAJE TOTAL
6.
OBSERVACIONES
__________________________________________________________________________________________
__________________________________________________________________________________________
__________________________________________________________________________________________
________________
Alumno(a)
33
SEGUNDA UNIDAD
JAVASCRIPT
LECCION 04
INTRODUCCIN A JAVASCRIPT: EXPRESIONES, VARIABLE, FUNCION, OBJETO Y DOM.
4.1. JAVASCRIPT: EXPRESIONES.
Lenguaje de programacin diseado en 1995 por Brendan Eich. Para animar pginas Web en el
Navegador Netscape. Hoy se ha convertido en el lenguaje del Web y de Internet.
Gua: https://developer.mozilla.org/es/docs/Web/JavaScript/Guide .
JavaScript: sigue la norma ECMA-262 (European Computer Manufacturers Assoc.). La que es
Seguida por todos los navegadores: Chrome, Explorer, Firefox, Safari, ..
Link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript.
ECMA-262 ha evolucionado mucho, siempre con "compatibilidad hacia atrs

ES3 - ECMAScript 3 (Dec. 1999): navegadores antiguos
Primera versin ampliamente aceptada, compromiso entre Netscape y Microsoft
ES5 - ECMAScript 5.1 (Jun. 2011): navegadores actuales
Desarrollado junto con plataforma HTML5 (HTML, CSS y JavaScript) de WHATWG
(https://whatwg.org)
ES6 - ECMAScript 6 (Jun. 2015): en vas de introduccin en navegadores
Introduce muchas mejoras, ver http://es6-features.org/
4.1.1.
EXPRESIONES NUMERICAS Y OPERADORES

JavaScript incluye operadores
Los operadores permiten formar expresiones, componiendo valores con dichos
operadores
Una expresin representa un valor, que es el resultado de evaluarla
Ejemplo: operadores aritmticos +, -, *, / formando expresiones numricas
Las expresiones se evalan (=>) a los valores resultantes
Expresiones mal construidas dan error o llevan el intrprete a un estado
inconsistente
13 + 7
=> 20
// Suma de nmeros
13 - 1.5
=> 11.5
// Resta de nmeros
// OJO! la coma espaola es un punto en la sintaxis inglesa
(8*2 - 4)/3 => 4
// Expresin con parntesis
8 /*3
=> ??
// Expresin incorrecta
8 3
=> ??
// Expresin incorrecta
34

1. Abrir consola JavaScript de Chrome.
La consola de un navegador (Chrome)

puede ejecutar sentencias o expresiones
JavaScript en modo interactivo.
El interprete analiza y ejecuta el texto
introducido al teclear nueva lnea (Enter). Si
tecleamos una expresin la evala y calcula
el resultado
2. Ejecutar sentencias en consola de chrome.
Expresin sintcticamente
incorrecta da
ERROR
4.1.2.
TEXTO: STRINGS.
El texto escrito se representa en JavaScript con strings. Un string delimita el texto con
comillas o apstrofes, por ej.
Frases: "hola, que tal" o 'hola, que tal'
String vaco: "" o ''
Ejemplo de "texto 'entrecomillado' ", comillas y apstrofes se pueden anidar,
'entrecomillado' forma parte del texto.
Operador + concatena strings, por ejemplo
"Hola" + " " + "Pepe" => "Hola Pepe
35
4.1.3.
La propiedad length de un string indica su longitud (Nmero de caracteres)

"Pepe".length
=> 4
Hola Pepe".length => 9
SOBRECARGA DE OPERADORES
Los operadores sobrecargados tienen varias semnticas, dependiendo del contexto
en que se usan en una expresin
Por ejemplo, el operador + tiene 3 semnticas diferentes
Suma de enteros (operador binario)
Signo de un nmero (operador unitario)
Concatenacin de strings (operador binario)
13 + 7
=> 20
// Suma de nmeros
+13
=> 13
// Signo de un nmero
"Hola " + "Pepe" => "Hola Pepe" // Concatenacin de strings
4.1.4.
CONVERSION DE TIPOS DE EXPRESIONES.

JavaScript realiza conversin automtica de tipos cuando hay ambigedad en una
expresin, utiliza las reglas de prioridad para resolverla.
La expresin "13" + 7 es ambigua, porque combina un string con un number. Con
ambigedad JavaScript da prioridad al operador + de strings, convirtiendo 7 a string.
La expresin +"13" tambin necesita conversin automtica de tipos. El operador +
solo esta definido para number (no hay ambigedad). JavaScript debe convertir el
string "13" a number antes de aplicar operador +.
36

La prioridad de los operadores es descendente y de izquierda a derecha. (Mayor si
ms arriba o ms a izq.)
GUIAS:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
. []
Acceso a propiedad o invocar mtodo; ndice a array
new
Crear objeto con constructor de clase
()
Invocacin de funcin/mtodo o evaluar expresin
++ -Pre o post auto-incremento; pre o post auto-decremento
! ~
Negacin lgica (NOT); complemento de bits
+ Operador unitario, nmeros. signo positivo; signo negativo
delete
Borrar propiedad de un objeto typeof void
Devolver tipo;
valor indefinido
* / %
Nmeros. Multiplicacin; divisin; modulo (o resto)
++ Concatenacin de strings; Nmeros. Suma; resta
<< >> >>>
Desplazamientos de bit
< <= > >=
Menor; menor o igual; mayor; mayor o igual
instanceof in objeto pertenece a clase?; propiedad pertenece a objeto?
== != === !==
Igualdad; desigualdad; identidad; no identidad
&
Operacin y (AND) de bits
^
Operacin exclusivo (XOR) de bits
|
Operacin (OR) de bits
&&
Operacin lgica y (AND)
8*2 - 4 => 12
||
Operacin lgica o (OR)
* tiene ms prioridad que -, pero (..) obliga a evaluar
?:
=
OP=
,
4.1.5.
antes - en:
Asignacin condicional
8*(2 - 4) => -16
Asignacin de valor
Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluacin mltiple
CUESTIONARIO OBLIGATORIO.
A. Indicar el resultado de evaluar la siguientes expresin JavaScript: "2"+"3"
B.
2
4
5
23
"23"
ErrorDeEjecucin
Indicar el resultado de evaluar la siguientes expresin JavaScript: +2+"3"
5
23
"23"
ErrorDeEjecucin
37
C.
Indicar el resultado de evaluar la siguientes expresin JavaScript: 2+(+"3")
2
5
23
33
"23"
ErrorDeEjecucin
D. Indicar el resultado de evaluar la siguientes expresin JavaScript: ("10"+"23").length
5
23
33
"23"
"1023"
ErrorDeEjecucin
4.2. JAVASRCRIP: PROGRAMAS, SENTENCIAS Y VARIABLES.
Un programa es una secuencia de sentencias, que se ejecutan en el orden en que han sido
definidas (con excepciones)
Las sentencias realizan tareas al ejecutarse en un ordenador. Cada sentencia debe
acabarse con punto y coma: ";.
Los comentarios solo tienen valor informativo, para ayudar a entender cmo funciona el
programa.
Comentario multilnea:
delimitado con
/* . */
/* Ejemplo de
programa JavaScript */
Comentario de una
Sentencia 1: define la
lnea: empieza con
variable x con valor 7.
var x = 7; // Definicin de variable
// y acaba al final de la
// visualizar x en el navegador
lnea
Sentencia 2: visualiza
document.write(x);
x en el navegador
4.2.1.
SCRIPT JAVASCRIPT CON VARIABLES.

Script: programa JavaScript encapsulado entre marcas <script>.
Se ejecuta al cargar en el navegador la pgina Web que lo contiene. JavaScript
es un lenguaje interpretado que ejecuta las instrucciones a medida que las va
leyendo
document.write(<expresin>) convierte <expresin> a string y lo visualiza en el
navegador. El string se interpreta como HTML y se visualiza en el lugar de la
pgina donde est el script JavaScript
38

Una variable guarda valores para uso posterior. Una variable representa el valor que
contiene. Puede utilizarse en expresiones como cualquier otro valor.
Define la variable
euro con valor 10
Visualizan en el
navegador el
resultado de
evaluar las
expresiones
Separacin de
lnea HTML
4.2.2.
DEFINICIN DE VARIABLES Y ESTADO DEL PROGRAMA

Las variables se crean con la sentencia de definicin de vari ables
La sentencia comienza con la palabra reservada var. A continuacin vienen una
o ms definiciones de variables separadas por comas
Cada definicin de variable comienza con el nombre de la variable . A la variable
se le puede asignar un valor usando el operador de asignacin: =
Undefined: valor (y tipo) especial de JavaScript que significa indefinido. Las variables
sin ningn valor asignado contienen el valor undefined
Estado de un programa:
Conjunto de todas las variables creadas por el programa junto con sus
correspondientes valores
4.2.3.
SINTAXIS DE LOS NOMBRES DE VARIABLES
El nombre (o identificador) de una variable debe comenzar por:

letra, _ o $, El nombre pueden contener adems nmeros
Nombres bien construidos: x, ya_vs, $A1, $, _43dias
Nombres mal construidos: 1A, 123, %3, v=7, a?b, ..
Nombre incorrecto: da error_de_sintaxis e interrumpe el programa
Un nombre de variable no debe ser una palabra reservada de JavaScript.

Por ejemplo: var, function, return, if, else, while, for, in, new, typeof, .
39
4.2.4.
Las variables son sensibles a maysculas

mi_var y Mi_var son variables distintas
ASIGNACIN DE VARIABLES Y ESTADO DEL PROGRAMA
4.2.5.
Una variable es un contenedor de valores, cuyo contenido puede variar. La

sentencia de asignacin de variables asigna un nuevo valor con el operador: =
Las variables de JavaScript son no tipadas. Esto significa que se puede asignar
cualquier tipo de valor. Una variable puede contener un nmero, un string,
undefined, ..
Se denomina punto de ejecucin del programa:
Al estado en que queda el programa despus de ejecutar una instruccin
El estado de un programa varia en funcin del punto de ejecucin
RECOMENDACIONES SOBRE SINTAXIS
Se recomienda delimitar las sentencias siempre con: ;

La sintaxis de JS permite introducir caracteres adicionales (blanco, nueva linea, ..)
para facilitar la legibilidad del programa
JavaScript permite omitir ; si la sentencia acaba con nueva lnea. Esto puede dar
problemas y no debe hacerse nunca.
Cada sentencia debe ocupar una lnea por legibilidad, salvo algunas excepciones
Las sentencias con bloques de cdigo: if/else, while, for, definicin de funciones,
sentencias que contienen expresiones muy largas
40

4.3. JAVASCRIPT: EXPRESIONES CON VARIABLES
Una variable representa el valor que contiene.
Puede ser usada en expresiones como cualquier otro valor
Una variable puede utilizarse en la expresin que se asigna a ella misma
La parte derecha usa el valor anterior a la ejecucin de la sentencia
y = y - 2 asigna a y el valor 6 (8-2), porque y tiene el valor 8 antes de ejecutarse
Usar una variable no definida en una expresin provoca un error y la ejecucin del programa
se interrumpe
4.3.1.
PRE Y POST AUTO INCREMENTO O DECREMENTO

JavaScript posee los operadores ++ y -- de auto-incremento o decremento
++ suma 1 y -- resta 1 a la variable a la que se aplica
++ y -- se pueden aplicar por la derecha o por la izquierda a las variables de una
expresin
Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se
realiza antes de evaluar la expresin
Si ++/-- se aplica por la derecha (post) se incrementa/decrementa despus de
evaluarla
Ojo! Usar con cuidado porque tiene efectos laterales y lleva a programas crpticos.
4.3.2.
OPERADORES DE ASIGNACIN
Es muy comn modificar el valor de una variable, sumando, restando, .... algn valor
Por ejemplo, x = x +7; y = y - 3; z = z * 8; .
JavaScript tiene operadores de asignacin especiales para estos casos
n +=, -=, *=, /=, %=, (y para otros operadores del lenguaje)
x += 7; ser lo mismo que x = x + 7;
41
4.4. JAVASCRIPT: FUNCIONES

Funcin: bloque de cdigo (con parmetros) asociado a un nombre . La funcin se invoca (o
ejecuta) por el nombre y devuelve un valor como resultado. En la invocacin se deben
asignar valores concretos a los parmetros
Las funciones permiten crear operaciones de alto nivel . Se denominan tambin
abstracciones o encapsulaciones de cdigo.
La funcin representa el valor resultante de su ejecucin (evaluacin). El resultado de
evaluar una funcin depende del valor de los parmetros. Puede utilizarse en expresiones
como cualquier otro valor
4.4.1.
FUNCIN: DEFINICIN E INVOCACIN
Una funcin se define con la palabra reservada function seguida del nombre .
A continuacin se definen los parmetros entre parntesis. Los parmetros son
variables que se asignan en la invocacin. Puede asignarse nuevos valores en
el bloque igual que a las variables
A continuacin se define el bloque de cdigo delimitado entre llaves {} . El
bloque contiene instrucciones
La sentencia return <expresion> finaliza la ejecucin. Devolviendo el resultado de
evaluar <expresion> como valor de retorno. Si la funcin llega a final del bloque sin
haber ejecutado un return, acaba y devuelve undefined
42
4.4.2.
PARMETROS DE UNA FUNCIN

La funcin se puede invocar con un nmero variable de parmetros.
Un parmetro definido, pero no pasado en la invocacin, toma el valor undefined
Un parmetro pasado en la invocacin, pero no utilizado, no tiene utilidad
4.4.3.
4.4.4.
EL ARRAY DE ARGUMENTOS DE FUNCIONES.
Los parmetros de la funcin estn accesibles tambin a travs del array de

argumentos: arguments[....]. Cada parmetro es un elemento del array.
En: comer('Jos', 'paella')

arguments[0] => 'Jos'
arguments[1] => 'paella'
FUNCIONES COMO OBJETOS

Las funciones son objetos de pleno derecho, pueden asignarse a variables, a
propiedades, pasarse como parmetros, .
Literal de funcin: function (..){..}
Funcin sin nombre, que suele asignarse a una variable, que es la que le da nombr.
Se puede invocar a travs del nombre de la variable.
El operador (...) invoca una funcin ejecutando su cdigo. Este operador solo es
aplicable a funciones (objetos de la clase Function), sino da error. El operador puede
incluir parmetros separados por coma, accesibles en el cdigo de la funcin
43
4.5. JAVASCRIPT: OBJETOS, PROPIEDADES, MTODOS Y DOM

4.5.1.
ELEMENTOS HTML Y OBJETOS DOM
Los elementos HTML se visualizan en el navegador en cajas asociadas

Los objetos DOM de JavaScript permiten inspeccionar y modificar los elementos
HTML
El atributo id= es distinto en cada elemento y puede utilizarse para identificar los
elementos HTML desde JavaScript
document.getElementById("fecha"), devuelve el objeto DOM del elemento HTML con
atributo id="fecha"
El objeto DOM obtenido as permite modificar el elemento HTML visualizado e
interaccionar con el usuario
4.5.2.
OBJETOS JAVASCRIPT: MTODOS Y PROPIEDADES
Los objetos son colecciones de variables (propiedades) y funciones (mtodos),

agrupadas en un elemento estructurado que llamamos objecto
Nombres de propiedades y mtodos, tienen la misma sintaxis que las variables: a,

_method, $1,
Propiedad: variable de un objeto

Se acceden con el operador ".": objeto.propiedad
Mtodo: funcin "especial" asociada a un objeto, invocada con el operador ".":

objeto.metodo(parametros).
Un mtodo devuelve un valor de retorno igual que una funcin
El mtodo tiene acceso al objeto y puede inspeccionar o modificar sus
componentes
44

4.5.3.
EJEMPLOS DE OBJETOS DOM

Objetos DOM: dan acceso a los elementos HTML de una pgina Web, por ejemplo
Document: Objeto DOM que da acceso a la pgina Web cargada en el navegador. Es un
objeto visible en todo programa JavaScript cuando este se ejecuta en el navegador
getElementById(.). Es un mtodo que se puede invocar sobre document (pertenece
a document)
document.getElementById("fecha")
getElementById("fecha") devuelve el objeto DOM del elemento HTML con id="fecha",
cuando se invoca sobre el objeto document
document.getElementById("fecha").innerHTML
Es la propiedad innerHTML del objeto DOM asociado al elemento HTML con id="fecha"
var cl = document.getElementById("fecha"). Asigna a la variable cl un objeto DOM.
cl.innerHTML es la propiedad innerHTML del objeto contenido en cl
4.5.3.1. EJEMPLO FECHA Y HORA: INNERHTML

La propiedad innerHTML de un objeto DOM contiene el HTML interno (delimitado
entre marcas)
La propiedad outerHTML contiene todo el HTML del elemento incluyendo las
marcas
Modificando el contenido de innerHTML o outerHTML modificamos desde
javaScript la pgina visualizada en el navegador.
La sentencia de asignacin document.getElementById("fecha").innerHTML = new

Date(); muestra en el navegador la fecha y la hora en la caja del bloque <div> genrico
identificado por "fecha".
<div id="fecha"></div> define un bloque HTML sin contenido

la propiedad innerHTML de su objeto DOM contiene inicialmente: ""
la propiedad outerHTML de su objeto DOM contiene inicialmente: "<div
id="fecha"></div>"
El navegador no muestra nada al visualizar la pgina, pero el script inserta la hora y la
fecha
45

4.5.3.2. FECHA Y HORA EQUIVALENTE
El script JavaScript mostrado aqu es totalmente equivalente al anterior, pero es la

forma habitual de hacerlo, porque es ms conciso, ms legible e incluso ms eficiente
La sentencia de asignacin document.getElementById("fecha").innerHTML = new
Date();
Se descompone aqu en dos sentencias (equivalentes a lo anterior)
La primera carga el objeto DOM en una variable y la segunda modifica su
propiedad innerHTML
4.5.3.3. VARIOS SCRIPTS

Varios scripts en una pgina forman un nico
programa JavaScript.
o Las definiciones (variables, funciones,
) son visibles entre scripts
Los scripts se ejecutan siguiendo el
orden de definicin en la pgina
o Instrucciones adicionales ejecutadas
en la consola del navegador, se
ejecutan despus del ltimo script
Este ejemplo tambin es equivalente
a los anteriores
o Define la funcin que inserta fecha y
hora en un script en la cabecera y la
invoca en el script del final
o La invocacin debe realizarse al final, para
que el rbol DOM est ya construido y el
elemento DOM se haya construido ya
4.5.4.
FUNCIONES DE SELECCIN DE ELEMENTOS DOM

getElementById("my_id"): Es el mas sencillo de utilizar porque devuelve. El objeto
DOM con el identificador buscado o null si no lo encuentra
Un identificador solo puede estar en un objeto de una pgina HTML!
46

getElementsByName("my_name"), getElementsByTagName("my_tag"),
getElementsByClassName("my_class"), querySelectorAll("CSS selector"),...
Devuelven una matriz de objetos

Por ejemplo: getElementsByName(my_name)[0]
referencia el primer elemento con atributo name=my_name
4.6. ACTIVIDAD
A. Ampliar la siguiente aplicacin Web (muestra la fecha y la hora):

<!DOCTYPE html><html>
<head>
<title>Date</title>
<meta charset="UTF-8">
</head>
<body>
<h1 id="h1"></h1>
<h2 id="h2">La fecha y la hora son:</h2>
<div id="fecha"></div>
<script type="text/javascript">
var fecha = new Date();
var msj;
if (fecha.getHours() < 7) { msj = "Buenas noches";}
else if (fecha.getHours() < 12) { msj = "Buenos das";}
else if (fecha.getHours() < 21) { msj = "Buenas tardes";}
else
{ msj = "Buenas noches";}
document.getElementById("h1").innerHTML = msj;
document.getElementById("fecha").innerHTML = fecha;
</script>
</body>
</html>
B. Incluyendo los siguientes elementos:
1) El nombre de la persona que hace la entrega debajo del titulo <h1>
2) Un bloque <div> debajo de la fecha y la hora y las instrucciones JavaScript necesarias
para que muestre en dicho bloque el contenido de las siguientes propiedades DOM en
lneas separadas, que comiencen por el nombre de la propiedad(es) mostrada(s):
a) Contenido de innerHTML de elemento identificado por id="h2"
b) Contenido de outerHTML de elemento identificado por id="h1"
c) Contenido de la propiedad global: location.href
d) Contenido de la propiedad global: location
e) Contenido de las propiedades globales: screen.width y screen.heigth
47
LECCIN 5
JAVASCRIPT: BOOLEANO, IF/ELSE, STRING, NMERO, DOM, EVENTOS E INTERACION
5.1. BOOLEANOS Y SENTENCIA IF/ELSE.
A. BOOLEANOS: TRUE Y FALSE:
El tipo booleano solo posee los valores: true y false.
B.
SENTENCIA
IF/ELSE
C.
LA CLASE
DATE: FECHAS Y
HORAS
Clase Date
new Date()
crea objetos
pertenecientes a
esta clase
new Date() devuelve un objeto con fecha y hora del reloj en el momento de crear
el objeto
Sobre los objetos de esta clase se pueden invocar los mtodos definidos para ella
getDay(), getHours(), getMinutes(), getFullYear(), ..
Invocar un mtodo que no est definido en un objeto da un error_de_ejecucin
48
D. IF/ELSE-IF ENCADENADO
E. FUNCIONES ALERT(), CONFIRM() Y PROMPT()
49

F. EJERCICIOS
G. CUESTIONARIO OBLIGATORIO
Para superar este test, has de responder correctamente al menos el 75% de las preguntas.
Principio del formulario
1. Dadas las siguientes definiciones de funciones:
function f_1 (x) {
if (x) {
return 8;
} else {
return "7";
}
}
function f_2 (x) {
return ((4 <= x)&&(x < 7));
}
function f_3 (x) {
if ((x % 2) === 0) {
return "par";
} else {
return "impar";
}
50

Cmo se evaluarn las siguientes expresiones: f_2 (3) :
o 1
o 7
o 8
o 8
o par
o impar
o True
o false
2. Dadas las siguientes definiciones de funciones:
function f_1 (x) {
if (x) {
return 8;
} else {
return "7";
}
}
function f_2 (x) {
return ((4 <= x)&&(x < 7));
}
function f_3 (x) {
if ((x % 2) === 0) {
return "par";
} else {
return "impar";
}
}
Cmo se evaluarn las siguientes expresiones: f_2 (4)
o 1
o 7
o 8
o 8
o par
o impar
o True
o false
5.2. JAVASCRIPT: EL TIPO STRING
A. EL TIPO STRING
Los literales de string se utilizan para representar textos escritos. Puede representar
lenguas diferentes porque utiliza el cdigo UNICODE.
GUIA: Lenguas y smbolos soportados en UNICODE: http://www.unicode.org/charts/
Literal de string: textos delimitados por comillas o apstrofes.
51

o "hola, que tal", 'hola, que tal', ' , ' , en la lnea anterior se representa
"hola, que tal" en castellano, griego
o String vaco: "" o ''
o "texto 'entrecomillado' ", comillas y apstrofes se pueden anidar: 'entrecomillado'
forma parte del texto.
o Operador de concatenacin de strings: +
"Hola" + " " + "Pepe" => "Hola Pepe"
B. ALFABETO, CDIGO Y CODIFICACIN
Juego de caracteres o alfabeto
. Conjunto de smbolos normalizados para
representar una lengua
Cdigo de caracteres: Conjunto de puntos de cdigo dados a los smbolos de un alfabeto,
p.e.
o ASCII: alfabeto ingls codificado en 7 bits (128 caracteres y 95 imprimibles)
o ISO-8859-1, 2, .., 15: Alfabetos de Europa occidental codificados en 8 bits
o UNICODE: cdigo internacionalizado que contiene casi todos los alfabetos
Codificacin: Representacin binaria de un cdigo de caracteres
o ASCII e ISO Latin-x: el valor del punto del cdigo coincide con la representacin
binaria
o UNICODE UTF-8: Codificacin binaria en 1, 2, 3 o 4 bytes eficiente con lenguas
latinas
o UNICODE UTF-16: Codificacin del plano BMP en 2 bytes y de otros planos en 4 bytes
o UNICODE UTF-32: Codificacin de todos los planos en 4 b
C. CDIGOS ESCAPADOS
Definen caracteres UNICODE. Comienzan con barra inversa: \La definicin solo incluye
caracteres ASCII. Se incluyen en strings como otros caracteres
Hay tres tipos
Caracteres de control ASCII
Caracteres UNICODE
Caracteres ISO-8859-1
Algunos ejemplos
Las "Comillas dentro de \"comillas\"" deben ir escapadas dentro del string.
En "Dos \n lineas el retorno de lnea (\n) separa las dos lneas.
52
D. MTODOS DE STRING
Algunos mtodos y elementos tiles de String
Ms infor: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
Un string es un array de caracteres, un ndice entre o y nmero_de_caracteres-1

referencia cada carcter.
Acceso como array: 'ciudad'[2] => 'u'
Propiedad: 'ciudad'.length => 6. La propiedad length contiene el nmero de caracteres
del string
Mtodo: 'ciudad'.substring(2,5) => 'uda'. Devuelve el substring comprendido entre
ambos ndices
Mtodo: 'ciudad'.charCodeAt(2) => 117. Devuelve el nmero (decimal) con cdigo
UNICODE del tercer carcter
Mtodo: String.fromCharCode(117) => 'u'. Devuelve el string con el carcter
correspondiente al cdigo numrico (decimal)
53

5.3. JAVASCRIPT: EL TIPO NUMBER
A. TIPO NUMBER
Los nmeros del tipo number, se representan con literales de nmeros
JavaScript 3 y 5 (ES3 y ES5), tiene 3 formatos de literales: Decimales, hexadecimales y
coma flotante
Decimales:
o Enteros: 1, 32, .
o Enteros con decimales: 1.2, 32.1, .
Hexadecimales
o Solo enteros: 0xFF, 0X10, ..
Coma flotante (decimal)
o Coma flotante: 3.2e1 (3,2x101)
o Sintaxis: <mantisa>e<exponente>
B. INFINITY Y NAN
El tipo number posee 2 valores especiales:
o NaN
o Infinity
NaN (Not a Number), representa un valor no
numrico, nmeros complejos, strings no
convertibles a nmeros.
Infinity representa. El infinito matemtico.
Desbordamiento.
El tipo number utiliza el formato, IEEE 754 coma
flotante doble precisin (64 bits)
o Reales mximo y mnimo: ~1,797x10^308 y 5x10^-324
o Entero mximo: 9007199254740992
C. MDULO MATH
El Modulo Math contiene constantes y funciones

matemticas
Constantes: Nmeros: E, PI, SQRT2,
Funciones
o sin(x), cos(x), tan(x), asin(x), .
o log(x), exp(x), pow(x, y), sqrt(x), .
o abs(x), ceil(x), floor(x), round(x), .
o min(x,y,z,..), max (x,y,z,..),
o random()
54

D. MTODOS DE NUMBER
Algunos mtodos tiles de Number son
o toFixed(n) devuelve string equiv. a nmero, redondeando
a n decimales
o toPrecision(n) devuelve string equiv. a nmero,
redondeando nmero a n dgitos
o toExponential(n) devuelve string eq. a nmero,
redondeando mantisa a n decimales
o toString([base]) convierte un nmero a, string con el
nmero en la base indicada
[base] es opcional, por defecto base 10
Los mtodos se invocan con el operador punto: "."
OJO! El nmero debe estar entre parntesis para invocar el mtodo, sino da error
En este enlace se pueden ver otros mtodos de Number:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
E. PARSEINT(..) Y PARSEFLOAT(..)
parseInt(string, [base]): funcin predefinida de JS que convierte string a number. String
se interpreta como un entero en la base indicada (por defecto base 10)
parseFloat(string): funcin predefinida de JS que convierte string a number. String se
interpreta coma un nmero en coma flotante.
ParseInt(..) o parseFloat(..): realizan una conversin similar a la conversin automtica.
OJO! Convierten a nmero si un prefijo no vaco del string representa un nmero
5.4. JAVASCRIPT: BOOLEANOS

A. TIPO BOOLEANO
El tipo boolean (booleano) solo tiene 2 valores
o true: verdadero
o false: falso
Los valores booleanos se utilizan para tomar decisiones. En
sentencias condicionales: If/else, bucles, etc.
La regla de conversin de otros tipos a booleano es
o 0, -0, NaN, null, undefined, "", '' son equivalentes a false
o resto de valores son equivalentes a true
La negacin convierte un valor en el valor booleano equivalente
negado
o La doble negacin convierte un valor en su equivalente booleano: !!<v>
55

B. OPERADORES DE IDENTIDAD E IGUALDAD
Identidad o igualdad estricta: ===
o Determina si 2 valores son exactamente los mismos
o Es igualdad semntica solo en: number, boolean, strings y
undefined
o OJO! En objetos es identidad de referencias (punteros)
o La identidad determina igualdad de tipo y de valor
Desigualdad estricta: !==
o Negacin de la igualdad estricta
Igualdad y desigualdad dbil: == y !=
o OJO! No debe utilizarse
o Realiza conversiones impredecibles
C. OPERADORES DE COMPARACIN
JavaScript tiene 4 operadores de comparacin
o Menor: <
o Menor o igual: <=
o Mayor: >
o Mayor o igual: >=
Utilizar comparaciones solo con nmeros (number), donde
es una relacin de orden bien definida
No se recomienda utilizar con otros tipos: string, boolean,
object, ..
o Las relacin de orden en estos tipos existe, pero es muy poco i ntuitiva
D. OPERADORES Y (&&) Y O (||)
Operador lgico y (and): <v1> && <v2>
o devuelve <v1> o <v2> sin modificarlos
o <v1> && <v2>
o devuelve <v1> -> si <v1> es equivalente a false
o devuelve <v2> -> en caso contrario
Operador lgico o (or): <v1> || <v2>
o devuelve <v1> o <v2> sin modificarlos
o <v1> || <v2>
o devuelve <v1> -> si <v1> es equivalente a true
o devuelve <v2> -> en caso contrario
E. OPERADOR DE ASIGNACIN CONDICIONAL
El operador de asignacin condicional, devuelve un valor en funcin de una condicin
lgica (siempre entre parntesis). Es una versin funcional del operador if/else
Sintaxis: (condicin) ? <v1> : <v2>
o devuelve <v1> -> si condicin es equivalente a true
56

o
devuelve <v2> -> en caso contrario
Esta sentencia permite definir parmetros por defecto en funciones con la asignacin
o param = (x!==undefined) ? x : <parmetro_por_defecto>;
o Tambin se define a veces como "x || <parmetro_por_defecto>, pero aplicara
tambin si x es "", 1, null, ..
5.5. JAVASCRIPT: DOM, EVENTOS E INTERACCIN CON EL USUARIO

A. EVENTOS EN HTML
HTML permite definir eventos de interaccin con el usuario
Los eventos se definen con atributos con nombres especiales de elementos HTML.
onclick (hacer clic), ondbclick (hacer doble clic), onload (pgina cargada),
Gua:
http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.ht
ml
El valor asignado al atributo es cdigo JavaScript (string) ejecutado al ocurrir el evento.
this referencia el objeto DOM del elemento HTML asociado al evento
onclick="this.src ='scare.png'" asigna al atributo src, de la imagen, el URL al icono
scare.png
this.src se refiere a la propiedad asociada al atributo src del objeto DOM de la imagen
onclick="this.src ='wait.png'" asigna al atributo src, de la imagen, el URL al icono
wait.png
El ejemplo asocia 2 eventos a la imagen (elemento <img .... >)
onclick="this.src ='scare.png'" muestra el icono scare.png al hacer clic en la imagen
ondbclick="this.src ='wait.png'" muestra el icono clic.png al hacer doble clic en la
imagen
57

B. CALCULADORA
Ejemplo de calculadora muy sencilla. Con los elementos bsicos de interaccin

cajetines para teclear texto: <input type="text" .. >
botones para interactuar con el programa: <button>..nombre..</button>
Comportamiento de la calculadora
Al pulsar el botn se calcula: el cuadrado del nmero tecleado en el cajetn
Al seleccionar el cajetn: se borra el contenido existente
La calculadora tiene 3 elementos HTML
Un texto indicativo
El cajetn donde teclear
El botn con el que calcular el cuadrado
La interaccin con el usuario se realiza con:
Botn donde clicar: <button onclick="cuadrado()"> x<sup>2 </sup></button> Este
elemento muestra el texto HTML "x<sup>2</sup>" donde la marca <sup> define un
exponente o superndice.
Cajetn de entrada de texto: <input type="text" id="n1" onclick="vaciar()">
El objeto DOM obtenido con var num = document.getElementById("n1") permite
interaccin con el cajetn
Las propiedades del objeto num dan acceso a los atributos HTML y a otros, por ejemplo
num.type contiene "text"
num.id contiene "n1"
num.value contiene "9", es el contenido tecleado en el cajetn
num.innerHTML contiene: "", <input> no tiene HTML interno
num.outerHTML contiene: "<input type="text" id="n1" onclick="vaciar()">"
Es el HTML completo del elemento
Modificar la pgina visualizada, por ej.
Asignar num.value = 5; Mostrar 5 en el cajetn
Asignar num.outerHTML = <p>Hola</p>
Mostrar un prrafo conHola" en vez del cajetn
C. ATENCIN A EVENTOS
Los objetos DOM tienen eventos asociados atendidos por funciones, por ej.
El atributo onClick="vaciar()" de <input type="text" id="n1" onClick="vaciar()">.
Asocia al evento clicar en el cajetn la funcin vaciar() que vaca el cajetn al ocurrir
este
58

El atributo onClick="cuadrado()" de <button onClick="cuadrado()"> . Asocia al
evento clicar en <button..> la funcin cuadrado() que muestra en el cajetn el
cuadrado del nmero contenido en este antes de clicar
Existen muchos ms eventos de interaccin con el usuario. Se puede encontrar ms

informacin sobre los ms bsicos en:
http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
D. CALCULADORA: AADIR BOTN 1/X
En este ejemplo aadimos, Un botn ms a la calculadora. El dot calcula el inverso (1/x)

del cajetn
Aadir un nuevo botn es sencillo
o Se aade un nuevo botn HTML, con el texto: 1/x, con atributo : onclick=inverso()",
asocia inverso() a clic en l
o Se aade la funcin: inverso(). Calcula el inverso del nmero del cajetn
o Se aade una marca de prrafo en HTML.Para separar el cajetn de los botones
59

E. CALCULADORA EXTENDIDA.
Calculadora Extendida.
Suma o resta 2 nmeros, as:
Se teclea el primer nmero
Se pulsa + o Se teclea el segundo nmero
se pulsa =
Variables num, acc y op
Las variables num, acc y op se definen al
principio del script para su uso en las funciones.
Las variables globales son visibles en las
funciones.
Evento onLoad y funcin inic()
El evento onLoad de body indica que se ha construido ya el rbol DOM. Este evento
invoca la funcin inic() que carga en la variable num el objeto DOM de acceso al cajetn,
que utilizan el resto de las funciones.
Variables acc y op
Las variables acc y op guardan el nmero que est en el cajetn y la operacin pulsada (+
o -), cuando se pulsa el botn +(invoca funcin mas()) o el - (invoca funcin menos()).
Botn =
El botn = invoca la funcin calcular(), que suma o resta el nmero que est en el cajetn
con el nmero guardado en acc, dependiendo de la operacin (+ o -) que
5.6. ACTIVIDAD: EJERCICIO OBLIGATORIO

A. Aadir a la calculadora el siguiente ttulo:
Buenos das, bienvenido a la calculadora de <nombre y apellido de la persona>
B. Integrar adems en una sola calculadora los siguientes botones de operaciones matemticas:
1) Operaciones unitarias (con un solo operando):
1.1) x^2 (nmero elevado al cuadrado)
1.2) 1/x (inverso del nmero)
1.3) sqrt(x) (raiz cuadrada del nmero)
1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es
negativo devuelve -Math.ceil(x))
2) Operaciones binarias (con dos operandos):
2.1) +. -. *, / (suma, resta, multiplicacin y divisin)
2.2) x^y (x elevado a y)
C. Subir dicha aplicacin a la cuenta de neocities.org
60
LECCION N 06
BUCLES. ARRAYS. FUNCIONES COMO OBJETOS. MBITOS. CIERRES. JQUERY
6.1. JAVASCRIPT: BUCLES
A. BUCLE
Bloque de instrucciones que se repite
mientras se cumple una condicin de
permanencia. Lo ilustramos con el clculo de 2
elevado a n: 2^n (2*2**2). Adems existen
otros tipos de bucles que no vemos aqu: for,
for/in, do/while,
Un bucle tiene 3 partes:
Iniciacin: fija los valores de arranque del bucle en la 1a iteracin.La iniciacin se
realizar aqu en instrucciones anteriores a la sentencia del bucle
Condicin de permanencia: controla la finalizacin del bucle . El bucle se ejecuta
mientras la condicin sea true.
Bloque de acciones: acciones realizadas en cada iteracin del bucle . Realiza el
clculo de forma iterativa hasta que la condicin de permanencia indica que se
ha obtenido el resultado
B. EJECUCIN DEL BUCLE
La ejecucin del bucle while esta controlada por la condicin de permanencia: (n !== 1).
Mientras n sea distinto de 1 ejecutar el bucle
Cuando n sea igual a 1 saldr del bucle
El estado del programa determina en cada evaluacin de la condicin del bucle, si (n
!== 1) es true o a false
C. EJEMPLO FUNCIN PO_2

El bucle se inicia con los valores iniciales del parmetro n y de la variable res. n es el
nmero cuya potencia de 2 que vamos a calcular. res es una variable local de la
funcin (definida dentro de su bloque de acciones y solo es visible en su interior),
cuyo valor inicial es 1.
El bloque de acciones va delimitado entre llaves: {} y se ejecuta en cada iteracin del
bucle. La primera instruccin res = res *2, calcula la potencia de forma incremental.
La segunda resta 1 a n para llevar la cuenta de multiplicaciones de res * 2, una en cada
iteracin, para multiplicar n veces.
61

El bucle finaliza cuando la condicin de permanencia (n !== 1) sea false (n llega a cero).
La condicin de permanencia va siempre delimitada entre parntesis: ().
D. BUCLE FOR
La sentencia for es mas compacta que while. La gestin del bucle (entre parntesis) va detrs
de la palabra reservada for y consta de tres partes separadas por ";:
1) Iniciacin: define e inicia la variable "i. La variable "n se define fuera del bucle.
2) Condicin de permanencia: el bucle se ejecuta mientras la condicin sea true. Se sale del
bucle en cuanto pase a false. Similar a la condicin de permanencia de while.
3) Accin final del bucle: se ejecuta al final de cada iteracin en la ejecucin del bloque de
cdigo del bucle. n-- decrementa el nmero hasta llegar a 1. Lleva la cuenta del nmero
de multiplicaciones por 2.
El bloque de acciones se delimita con llaves {}, pero si un bloque tiene solo una sentencia,
las llaves pueden omitirse (segundo ejemplo), como en cualquier otra sentencia que
incluya un bloque.
62

6.2. JAVASCRIPT: ARRAYS
Array: lista ordenada e indexable de n elementos
heterogneos.
Se suelen construir con el literal de array: [1, 4, 2,
23]. Sus elementos son accesibles con un ndice de
rango: 0 a n-1, a[k] es el elemento k+1
El tamao de un array es su propiedad a.length. El
tamao mximo de un array es: 232-2 elementos
En castellano se denomina matriz o vector.
Un array puede contener, nmeros, strings, undefined, objetos, arrays,
A un array dentro de un array se accede con 2 indexaciones
Indexar elementos inexistentes devuelve undefined, incluyendo ndices mayores que
a.length.
Cambiando la longitud del array reducimos su tamao
6.3. EJERCICIOS PRACTICOS
A. SUMATORIO: VERSIN 1
La calculadora ilustra aqu el uso de arrays, Creando la funcin sumatorio de n nmeros:
x
El sumatorio de los nmeros 1, 2, 3, 4 es: n (1, 2, 3, 4) = 1 + 2 + 3 + 4 = 10
Formato CSV (Coma Separated Values). String con valores separados por comas. Por
ejemplo: "1, 2, 3, 4" o "1,2,3,4". Muy utilizado bases de datos, hojas de calculo,
Los nmeros se introducen en el cajetn. En formato CSV (Coma Separated Values)
B. SUMATORIO: VERSIN 2
Ejemplo con la calculadora ligeramente modificada. El bloque de cdigo que calcula x
se cambia por una sola sentencia equivalente al bloque anterior.
Los bloques con una sola sentencia pueden omitir las llaves {..} (como en esta versin).
Aunque las llaves suelen incluirse para mejor legibilidad
Operadores de la sentencia: acc += +lista[i++];
El operador += suma a la variable la expresin asignada
El operador + de +lista[i++] convierte el string a number
[i++] accede al array antes de incrementar (postincremento)
63
6.4. JAVASCRIPT: FUNCIONES COMO OBJETOS

A. CLASE FUNCTION Y LITERAL DE FUNCIN
Las funciones son objetos de pleno derecho que pertenecen a la clase Function. Pueden
asignarse a variables, propiedades, parmetros de funciones,
function (..){..} es un literal de funcin que crea un objeto funcin (sin nombre)
El objeto suele asignarse a una variable o parmetro, que le da su nombre
El literal "function () {} crea una funcin vaca como la creada con el constructor
"new Function()
La definicin de funciones con nombre, tambin crea objetos de la clase Function
El operador parntesis permite invocar (ejecutar) objetos de tipo funcin, pasando
una lista de parmetros al objeto funcin, p.e. comer('Jos','paella')
B. OPERADOR INVOCACIN DE UNA FUNCIN: ()

El objeto funcin puede asignarse o utilizarse como un valor, el objeto funcin contiene
el cdigo de la funcin
El operador (...) invoca una funcin ejecutando su cdigo. Solo es aplicable a funciones
(objetos de la clase Function), sino da error. Puede incluir parmetros separados por
coma, accesibles en el cdigo de la funcin
64

C. ITERADORES DE ES5
forEach(function(elem, index, array){}):
Iterador que ejecuta la funcin secuencialmente para cada elemento del array.
Parmetros: elem (elemento i), index (indice i), array (array sobre el que se itera)
Equivale a un bucle, que itera desde el primero al ltimo elemento de un array
map(function(elem){}): mapa elementos del array a valor de retorno de la funcin. por
ejemplo, [1,2].map(function(e){return e+1;}) => [2,3].
filter(function(elem){}): filtra los elementos del array de acuerdo a la funcin
Y otras funciones:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
D. FUNCIN VECES(..) CON BUCLE WHILE

En este ejemplo se implementa la funcin veces con un bucle while
Es totalmente equivalente a la implementacin anterior con el iterador forEach()
La condicin de permanencia en el bucle no es necesaria en el iterador porque esta
implcita,
El parmetro index de la funcin itera de 0 a array.length-1
La parmetro index de la funcin del iterador toma los mismos valores que el i ndice i
del bucle
El bloque de cdigo de la funcin itera exactamente igual que el bloque de cdigo del
bucle
6.5. JAVASCRIPT: MBITOS DE VISIBILIDAD Y CIERRES (CLOSURES)

A. MBITO Y DEFINICIONES LOCALES DE UNA FUNCIN
Una funcin puede tener definiciones locales de variables y
funciones. Estas son visibles solo dentro de la funcin.
Las variables y funciones locales tienen visibilidad sintctica, son
visibles en todo el bloque de cdigo de la funcin, incluso antes de
definirse. OJO! Se recomienda definir variables y funciones al
principio de la funcin.
65

Las variables y funciones globales son visibles tambin dentro de la funcin. Siempre que
no sean tapadas por otras locales del mismo nombre. Una definicin local tapa a una
global del mismo nombre.
B. FUNCIONES ANIDADAS
Las funciones locales pueden tener otras funciones locales
definidas en su interior.
Las variables externas a las funciones locales son visibles en
el interior de estas funciones.
Adems, una funcin es un objeto y puede devolverse como
parmetro de otra funcin. La funcin exterior devuelve la
funcin interior como parmetro.
El operador parntesis sobre la funcin exterior devuelve la
funcin interior (su cdigo). El operador parntesis aplicado
2 veces en la funcin exterior, en cambio, invoca la funcin
interior. La funcin interior tiene visibilidad sobre las variables exteriores s1 y s2, y puede
concatenar s1+s2+s3
C. CIERRES O CLOSURES
Un cierre (closure): funcin que encapsula un conjunto de definiciones locales que solo
son accesibles a travs de una interfaz (funcin u objeto).
La interfaz de un cierre con el exterior es el parmetro de retorno de la funcin. Suele
ser un objeto JavaScript que da acceso a las variables y funciones locales.
En este ejemplo la interfaz es la funcin contar()
La funcin contar devuelve el valor de la variable contador y lo incrementa
despus.El cierre encapsula la variable contador y la funcin contar.
Ninguna instruccin fuera del cierre puede modificar la variable contador, solo la
funcin contar()
La variable entero_unico contiene la invocacin del cierre (enteroUnico ()) . Esta
devuelve la funcin contar, de forma que invocar entero_unico() es lo mismo que
invocar contar().Al invocar el cierre, sus variables se crean y siguen existiendo hasta
que el objeto se destruye.
6.6. JAVASCRIPT: INTRODUCCIN A

LA LIBRERA JQUERY
A.
Libreras JavaScript: jQuery
Las libreras JavaScript

facilitan la programacin multinavegador.Se disean para funcionar en IE, Firefox, Safari, Chrome, Opera, ...
Ahorran mucho tiempo -> se deben utilizar siempre que existan
Por ejemplo. jQuery, jQuery UI, D3, Bootstrap, Prototype, PhoneGap,
jQuery es muy popular (http://jquery.com/) -> Lema: write less, do more
Se distribuye con licencia abierta (MIT) y facilita mucho la programaci n JavaScript
de cliente. Procesa objetos DOM, gestiona eventos, animaciones, estilos CSS, Ajax, ..
jQuery 1.x y 2.x son dos versiones de la librera con la misma interfaz (API)
jQuery 1.x (ltima versin 7-1-15: 1.11.3)
66

Fue la primera y mantiene compatibilidad desde Explorer 6+
Esta optimizada para compatibilidad legacy y es ms pesada que jQuery 2.x .
jQuery 2.x (ltima versin 7-1-15: 2.1.4)
Creada recientemente y mantiene compatibilidad desde Explorer 9+
Est optimizada para mviles y es mucho ms ligera que jQuery 1.x
B.
LA FUNCIN JQUERY
Objeto jQuery: representacin equivalente a un objeto DOM.
Ms eficaz de procesar, tanto de forma individual, como en bloque (array)
Funcin jQuery: jQuery("<selector CSS>") o $("<selector CSS>")
Devuelve el objeto jQuery que casa con <selector CSS>, Si no casa ninguno,
devuelve null o undefined
<selector CSS> selecciona objetos DOM igual que CSS.
Adems la funcin jQuery convierte objetos DOM y HTML a objetos jQuery
C. FECHA Y HORA CON JQUERY

Una librera JavaScript externa se identifica por su URL:
o <script type="text/javascript" src="jquery-2.1.4.min.js.js" > </script>
$("#fecha") obtiene el objeto jQuery, del elemento HTML con id="fecha".
$("#fecha").html(new Date())
inserta new Date() como HTML interno del objeto jQuery devuelto por
$("#fecha")
es equivalente a document.getElementById("fecha").innerHTML = new Date();
67

D. FUNCIN READY: RBOL DOM CONSTRUIDO
$(document).ready(function() { ..cdigo.. )}
Ejecuta el cdigo (bloque) de la funcin cuando el rbol DOM est construido.Es
decir, dicho bloque se ejecuta cuando ocurre el evento onload de <body>
Se recomienda utilizar la invocacin abreviada: $(function() { ..cdigo.. })
E. CACHE Y CDN (CONTENT DISTRIBUTION NETWORK)

Cache: contiene recursos cargados anteriormente durante la navegacin. La cache
identifica los recursos por igualdad de URLs. Un nuevo recurso se carga de alguna
cache (navegador, ..) si tiene el mismo URL que otro ya guardado. Cargarlo de la
cache es ms rpido que bajarlo del servidor, especialmente de la del navegador.
CDNs Web: utilizan el mismo URL (a Google, jQuery, ) en muchas pginas. As se
maximiza la probabilidad de que los recursos estn ya en la cache .
F. SELECTORES TIPO CSS DE JQUERY
68

G. MTODOS DE MANIPULACIN
Los objetos jQuery se manipulan con mtodos de la librera
Ms informacin en: http://api.jquery.com/category/manipulation/
Mtodo html(<cdigo html>)
$("#id3").html("Hello World!") sustituye el innerHTML del elemento con
id="id3 por "Hello World!"
Es equivalente a: document.getElementById(fecha).innerHTML = "Hello
World!"
Mtodo html()
$("#id3").html() devuelve el innerHTML del elemento con "#id3"
Mtodo append("Hello World!")
$("#id3").append("Hello World!") aade "Hello World!" al innerHTML del
elemento con id="id3"
Mtodo val(<valor>)
$("#id3").val("3") asigna el valor "3" al atributo value del elemento con
id="id3"
Mtodo attr(<atributo>, <valor>)
$(".lic").attr("rel", "license") asigna "license" al atributo rel a todos los
elementos con class=lic"
Una gran ventaja de jQuery es que puede hacer asignaciones en bloque sin
utilizar bucles como aqu!
Mtodo addClass(<valor>)
$("ul").addClass("visible") asigna el valor "visible" al atributo class de todos
los elementos <ul>
Una gran ventaja de jQuery es que puede hacer asignaciones e n bloque sin
utilizar bucles como aqu!
Los 4 modos de la funcin jQuery
H. LOS 4 MODOS DE LA FUNCIN JQUERY
Acceso a DOM: $("selector CSS")
Devuelve un array con los objetos jQuery que casan con <selector CSS>
Programas ms cortos, eficaces y multi-navegador que con JavaScript
directamente
Transformar HTML en jQuery: $("<ul><li>Uno</li><li>Dos</li></ul>")
Devuelve objeto jQuery equivalente al HTML
Mecanismo simple para convertir HTML en jQuery
Transformar DOM en jQuery: $(objetoDOM)
Transforma objeto DOM en objeto jQuery equivalente
Tiene compatibilidad total con DOM y con otras libreras basadas en DOM
Esperar a DOM-construido: $(function(){..cdigo..})
Ejecuta el cdigo de la funcin cuando el rbol DOM est construido
Equivalente a ejecutar el cdigo asociado al evento onload
6.7. JAVASCRIPT: EVENTOS DOM Y JQUERY
A. EVENTOS Y MANEJADORES
JavaScript utiliza eventos para interaccionar con el entorno
Hay eventos de muchos tipos Temporizadores, clicks en boton, tocar en pantalla,
pulsar tecla, ...
69

Un manejador (callback) de evento
Es una funcin que se ejecuta al ocurrir el evento
El script inicial debe configurar los manejadores (callbacks) a ejecutar cuando ocurra
cada evento que deba ser atendido
B. EVENTOS EN HTML
En programas grandes es recomendable separar HTML, CSS y JavaScript
Debe estar en ficheros diferentes (o al menos en partes claramente separadas)
De esta forma el cuerpo (body) solo contiene HTML y la cabecera (head) incluye CSS
y JavaScript
La forma habitual de definir eventos directamente en JavaScript es con
objetoDOM.addEventListener(evento, manejador)
Tambin existe un mtodo removeEventListener(..) para eliminar el evento
Tradicionalmente el manejador se asignaba a una propiedad con el nombre del
atributo HTML
objeto.evento = manejador
jQuery usa la funcin on() para definir eventos y off() para eleminarlos
objetoJQuery.on(evento, manejador)
C. EVENTOS EN JAVASCRIPT
Los eventos se definen asociados a onload para que el rbol DOM est ya est
construido
El manejador del evento onload hay que invocarlo o definirlo o en HTML o en sino
en un script al final
La norma de JavaScript incluye muchos eventos diferentes
Se pueden ver en https://developer.mozilla.org/en-US/docs/Web/Events
Los nombres de los eventos son diferentes del de los atributos de eventos
La forma tradicional (objeto.evento = manejador) est en desuso y no la ilustramos
El manejador del evento es una funcin (objeto de la clase Funcin)
Puede pasarse directamente como un literal de funcin con el cdigo del manejador
(como aqu), o cualquier otro objeto Function, como por ejemplo el nombre de una
funcin definida en otro lugar. OJO! debe ser la funcin (su cdigo) y no su
invocacin
70
D. EVENTOS EN JQUERY
jQuery tambin permite definir eventos en objetos jQuery con el mtodo on()
objetoJQuery.on(evento, manejador)
jQuery conserva mtodos asociados a eventos individuales de versiones
anteriores, pero est recomendado usar solo on() y off()
http://api.jquery.com/category/events/
Los nombres y tipos de eventos utilizados por los mtodos on(..) y off()
son los mismos que los utilizados con el mtodo addEventListener(..)
se pueden ver en https://developer.mozilla.org/en-US/docs/Web/Events
El manejador del evento es una funcin (objeto de la clase Funcin) ejecutado al ocurrir
el evento
Puede pasarse directamente como un literal de funcin con el cdigo del
manejador (como aqu) o cualquier otro objeto Function, como por ejemplo el
nombre de una funcin definida en otro lugar
OJO! debe ser el nombre de la funcin (su cdigo) y no su invocacin
E. CALCULADORA JQUERY
jQuery simplifica la calculadora
Modificaciones
Debemos importar la librera jQuery
Definir eventos en funcin ready, con mtodo on(..), con rbol DOM ya construido
Obtener objetos jQuery con $(#)
Obtener texto de cajetn con val()
Asignar texto en cajetn con val(texto)
71

6.8. EJERCICIO OBLIGATORIO
A. Modificar la calculadora del ejemplo anterior para que realice todos sus accesos a
elementos DOM y toda la gestin de eventos con las funciones de la librera jQuery.
La calculadora debe mostrar al principio el ttulo:
Buenos das, bienvenido a la calculadora de <nombre y apellido de la persona>
Integrar adems en una sola calculadora los siguientes botones de operaciones
matemticas:
1) Operaciones unitarias (con un solo operando):
1.1) x^2 (nmero elevado al cuadrado)
1.2) 1/x (inverso del nmero)
1.3) sqrt(x) (raiz cuadrada del nmero)
1.4) parte_entera(x) (parte entera de x: si x es positivo devuelve Math.floor(x) y si es
negativo devuelve -Math.ceil(x))
1.5) 2^n (potencia n del nmero 2)
1.6) n! (factorial del nmero n: n*(n-1)*(n-2)*...*3*2*1)
2) Operaciones binarias (con dos operandos):
2.1) +. -. *, / (suma, resta, multiplicacin y divisin)
2.2) x^y (x elevado a y)
3) Operaciones con n operandos introducidos en formato CSV:
3.1) sumatorio(x) (sumatorio de n nmeros)
3.2) producto(x) (producto de n nmeros)
Subir dicha aplicacin a la cuenta de neocities.org o de su eleccion
72
LECCION N 07
JQUERY UI. INTERACCIN CON USUARIO. BOOTSTRAP. DISEO ADAPTATIVO
7.1. OBJETOS JAVASCRIPT: NOTACIN ARRAY, PROPIEDADES DINMICAS, FOR/IN Y DOM
A. OBJETOS
Objeto
Es una agregacin de variables, denominadas
propiedades
Se suelen construir con el literal de objeto,
o { propiedad_1:valor_1, ..,
propiedad_n:valor_n }
Notacin punto
objeto.propiedad
o Accede propiedades por su nombre
Notacin array
objeto["propiedad"]
o Accede pasando el nombre como un string
o Que puede estar en una variable
Notacin punto o array son equivalentes
Propiedades inexistentes devuelven undefined
Pero el operador punto (.) aplicado a undefined, provoca error de ejecucin
Los nombres de propiedades de un objeto, deben ser todos diferentes, tienen la misma
sintaxis que las variables.
a, _method, $1, una_pia, .
B. OBJETOS ANIDADOS: RBOLES
Los objetos pueden anidarse entre si. Los objetos anidados representan arboles
La notacin punto o array puede encadenarse. Representando un camino en el rbol.
Las siguientes expresiones se evaluan as:
pelicula.director.nombre => 'Steven'
pelicula['director']['nombre'] => 'Steven'
pelicula['director'].apellido => 'Spielberg'
pelicula.estreno => undefined
pelicula.estreno.ao => Error_de_ejecucin
C. PROPIEDADES DINMICAS
Las propiedades se pueden crear y destruir. Para ello se utilizan 3 sentencias
Asignacin de valores
Borrado de propiedades
Comprobar si existe una propiedad
Asignar a (y crear) propiedades: x.c = 4
asigna 4 -> si la propiedad c existe
crea c y le asigna 4 -> si la propiedad c no existe
Borrar propiedades: delete x.c
elimina x.c -> si la propiedad x.c existe
no hace nada -> si la propiedad x.c no existe
Borrar propiedades: "c" in x
73
devuelve true -> si la propiedad x.c existe

n devuelve false -> si la propiedad x.c no existe
D. SENTENCIA FOR/IN
La sentencia for (var p in obj) {..bloque de instrucciones..}, itera en todas las
propiedades del objeto obj
La variable p contiene en cada iteracin un string con el nombre de una propiedad
diferente de obj. El contenido de la propiedad debe ser accedido con la notacin array:
obj[p]
7.2. JAVASCRIPT: JQUERY UI

A. LIBRERAS JQUERY UI
jQuery UI enriquece jQuery
Es muy eficaz soportando las interacciones de usuario ms habituales. Transforma
elementos HTML en elementos activos de interaccin con el usuario. Soporta las
interacciones ms habituales: arrastrar, depositar, seleccionar, ordenar, .. La parte
de interaccin de usuario es la ms utilizada
Soporta tambin muchas animaciones y efectos
Tambin posee una galera de temas grficos
jQuery UI es muy popular (http://jqueryui.com)
Facilita mucho el diseo de la interfaz con el usuario
La versin actual (7-1-15) es jQuery 1.11
Se distribuye con licencia abierta (MIT License)
La primera versin se public en septiembre de 2007
Tutorial:
http://www.desarrolloweb.com/manuales/manual-jqueryui.html
74

B. INTERACCIONES DE JQUERY UI
Los patrones de interaccin con el usuario transforman elementos HTML en
Arrastrables (Draggable): Permite arrastrar un elemento en un rea
Depositable (Droppable): Permite depositar un elemento en otro.
Redimensionable (Resizable): Permite redimensionar un elemento.
Seleccionable (Selectable): Permite seleccionar un elemento de una lista.
Ordenable (Sortable): Permite ordenar una lista de elementos.
Los componentes (widgets) construyen elementos de interaccin
Acorden (Accordion): Expande un elemento de una lista.
Autocomplecin (Autocomplete): Completa palabras de una lista.
Botn (Button): Da uniformidad a diversos tipos de botones.
Introductor de fechas (Datepicker): Despliega un calendario.
Deslizador (Slider): Crea un elemento deslizante.
Y muchos otros (Menu, Progressbar, Selectmenu, Spinner, Tabs, Tooltip, ..)
Adems hay efectos, transiciones, temas y otros elementos (menos utilizados)
C. EJEMPLO: PUZZLE
75

7.3. JAVASCRIPT: EVENTOS TCTILES
A. EVENTOS TCTILES
Telefonos y tabletas usan pantallas tctiles
o Estos se manejan con toque (touch) y presionar (taphold)
o La aplicaciones ms avanzadas utilizan gestos (gestures): desplazamiento, pellizco,
W3C ha normalizado eventos tctiles bsicos
o Estn soportados en los navegadores, pero son muy primitivos, son
o touchstart, touchmove, touchend
B. LIBRERA JQUERY UI TOUCH PUNCH
jQuery UI Touch Punch (ltima versin 7-1-15: 1.11.3)
Aade soporte tctil a jQuery UI para adaptacin a mviles y tabletas
Coding libre con licencias MIT y GPLv2
Ver: https://github.com/furf/jquery-ui-touch-punch
Transforma eventos de ratn a los equivalentes en pantalla tctil
Permite arrastrar, ordenar, seleccionar o redimensionar como en el desktop
Utilizando tocar (touch) en sustitucin de clic y presionar (taphold) para arrastrar
No soporta gestures: swipe, pinch, .
Desarrollada por Dave Furfero
Informacin y cdigo: https://github.com/furf
C. LIBRERAS PARA EVENTOS TCTILES

jQuery mobile: librera desarrollada por la Fundacin jQuery
Para desarrollar aplicaciones tctiles, incluyendo mviles
La versin actual (7-1-15) es jQuery mobile 1.4
Documentacin y cdigo: http://jquerymobile.com/
Soporta gestos y eventos tctiles (gestures)
Pero no es compatible con jQuery UI
El soporte a gestos y eventos tctiles en JavaScript
No esta todava maduro, hay otras libreras interesantes, como
interact.js, kendo.ui, lungo.js, zepto.js,
76
7.4. EJEMPLO: TANGRAM

Tangram muestra una lista de figuras geomtricas, que se pueden
arrastrar y rotar
Los trozos son figuras geomtricas Creadas con SVG (Scalable Vector
Graphics), en ficheros independientes. SVG es una extensin de html para
grficos
Los trozos de la imagen pueden arrastrarse en el navegador. Se
implementa con la interaccin draggable
o https://jqueryui.com/draggable/
Girarse haciendo click con el ratn. Se giran con CSS en el manejador del
evento click.
77
LECCION N 8
PROFUNDIZACIN EN ARRAYS, OBJETOS, PROPIEDADES, MTODOS, TIPOS.
8.1. JAVASCRIPT: ALGUNOS MTODOS DE ARRAY
A. MTODOS DE ARRAY: ARRAY HEREDA MTODOS DE SU CLASE
sort(): devuelve el array ordenado y lo guarda en la variable a
reverse(): devuelve el array invertido y lo guarda en la variable
a
push(e1, .., en) aade e1, ..,en al final del array, devuelve el
tamao del array (a.length)
pop(), devuelve el ltimo elemento, eliminadolo del array
B. MS MTODOS
join(<separador>): devuelve string uniendo elementos.introduce
<separador> entre elementos. La coma de separador permite
generar CSV
slice(i,j): devuelve una rodaja. Indice negativo (j) es relativo al final.
ndice "-1 es igual a a.length-2
splice(i, j, e1, e2, .., en). sustituye j elementos desde i en array por
e1, e2, ..,en. Devuelve elementos eliminados
C. CITAS
Este ejemplo utiliza un array para gestionar citas
Una cita es una frase de un autor conocido
La aplicacin ilustra
splice(..) para borrar las citas existentes
push(..) para aadir nuevas citas al fina
78

8.2. JAVASCRIPT OBJETOS Y ARRAYS: EJEMPLO CITAS
A. OBJETOS Y ARRAYS
Objetos y arrays permiten definir y gestionar recursos de datos, de forma que resulten
muy sencillos de utilizar en programas, bases de datos,
Un objeto puede definir la estructura de los datos de un recurso.
Los objetos se suelen construir con el literal de objeto: { propiedad_1:valor_1,
.., propiedad_n:valor_n }. Cada propiedad guarda un valor, igual que una
variable
Por ejemplo, los objetos nos permiten dar el ttulo y el director de pe lculas
favoritas.
Un array define una coleccin indexable de recursos

Un array se suele construir con el literal de array: [ recurso_1, recurso_2, ,
recurso_n ]
Por ejemplo, podemos agrupar los objetos anteriores en un array de pelculas
favoritas.
B. EJEMPLO CITAS
Este ejemplo muestra una cita seleccionada al azar
Una cita es una frase de un autor conocido
Cada recarga de la pgina selecciona una frase diferente
8.3. ACTIVIDAD. EJERCICIO PRCTICO

Completar el ejemplo de citas editable aadiendo los manejadores de los eventos de edicin
del contenido de una cita existente o de borrado de dicha cita.
79
LECCION N 09
LOCALSTORAGE, IFRAMES, ORIGIN POLICY Y JSON
9.1 EJEMPLO DE UN CRONMETRO
A. CRONMETRO
WebApp similar a un cronmetro digital
Cuenta dcimas de segundo (100 miliseg.). El contador se inicializa
con 0,0 segundos
n.toFixed(1) formatea con 1 decimal
Tiene 2 botones
arrancar/parar: arranca o para la cuenta a partir del valor en que quedo
o arranca si cronmetro parado
o para si cronmetro contando
inicializar: pone el contador a 0,0
La libreria zepto.js utilizada en los temas siguientes equivale a jQuery 2.0. Los ejemplos
pueden sustituir zepto por jQuery y funcionarn igual, http://zeptojs.com/
B. DOM COMO ALMACN DE DATOS

El navegador guarda en document la pgina HTML que est mostrando, document es
un objeto JavaScript con propiedades, que contienen todos los elementos de la pgina
Las propiedades DOM son variables: src, value, innerHTML, etc, donde la informacin
se puede guardar y recuperar. DOM solo contiene strings y todo debe convertirse a/de
string
Los elementos de DOM se pueden utilizar como variables. Hemos utilizado el elemento
<span id="crono">, para almacenar el contador de decimas de segundo
9.2. MEMORIA LOCAL EN HTML5

A. Almacenamiento de datos en cliente
80

HTML5 implementa nuevos tipos de almacenamiento de variables. Sencillas y eficientes
de utilizar desde Javascript
Variables locales los datos se guardan permanentemente, hasta que se borran
Variables de sesin. Los datos solo se guardan solo durante la sesin
o Comienzo de sesin: apertura de navegador o pestaa
o Final de sesin: cierre de navegador o pestaa
B. Variables locales y de sesin
Son propiedades de los objetos localStorage y sessionStorage, solo pueden contener

strings, como por ejemplo
localStorage.usuario = Pedro Prez;
sessionStorage.apellido = Prez;
Las variables locales estn asociadas a protocolo, dominio y puerto
un programa solo puede acceder a propiedades de local/sessionStorage, creadas
por otros programas cargados del mismo servidor
Same origin policy
Seguridad: un programa solo confia en programas del mismo servidor
Modularidad: cada servidor tiene un espacio de nombres diferente
C. EJEMPLO DE LOCALSTORAGE
Cada usuario que acceda a esta pgina tendr una cuenta diferente. La variable est en su
navegador
Cronmetro con memoria

Nueva versin del cronmetro con localStorage, as
mantiene la cuenta de dcimas de segundos entre usos
sucesivos de la aplicacin
El cronmetro utiliza ahora la variable localStorage.c para
guardar la cuenta de segundos
Debemos inicializar localStorage.c con parmetro por
defecto para cuando se ejecute por primera vez
Como la informacin se guarda ahora en localStorage y no en DOM. hay que
actualizar primero localStorage y luego mostrar en DOM
81
82
LECCION N 10
INTRODUCCIN A GRFICOS Y ANIMACIONES SVG. GEOLOCALIZACIN
10.1. GEOLOCALIZACIN EN HTML5
A. GEOLOCALIZACIN Y SENSORES
HTML5 puede soportar geolocalizacin, En todo tipo de clientes: PCs, mviles tabletas..
El interfaz de geolocaclizacin, da acceso tambien a otros sensores: Brujula,
acelerometro, .....
B. GEOLOCALIZACIN
La geolocalizacin se realiza siguiendo jerarquia de consultas
o GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .Se devuelve la respuesta ms
precisa
La geolocalizacin est accesible en del objeto navigator.geolocation, con mtodo
getCurrentPosition(successFunction, errorFunction)
o Permite conocer
o Latitud y longitud en formato decimal
o Altitud y precisin de la altitud
o Direccin y velocidad
Norma y tutoriales
http://dev.w3.org/geo/api/spec-source.html
http://dev.opera.com/articles/view/how-to-use-the-w3c-geolocation-api/
http://code.google.com/apis/maps/index.html
OJO! Geolocalizacin puede no funcionar por restricciones de seguridad
Usar el navegador Firefox para probar los ejemplos geolocalizados en local
83

10.2. APLICACIN HTML5 GEOLOCALIZADA EN GOOGLE MAPS
A. Geolocalizacin con gmaps.js
Aplicacion de geolocalizacin. Carga un mapa centrado en
nuestra posicin que se indica con un marcador
Usamos librera gmaps.js para acceso a Google Maps, librera
muy potente y sencilla de utilizar
http://hpneo.github.io/gmaps/. La librera de Google es bastante
mas compleja
Se aade al mapa un manejador de eventos click/tap, que calcula
la ruta hasta el punto indicado.
84
10.3. HTML5 SVG: SCALABLE VECTOR

A. GRAPHICS
SVG: Scalable Vector Graphics. Formato de representacin de grficos vectoriales.
Pueden cambiar de tamao sin perdida de calidad
B. EJEMPLO AJUSTE SVG
Ajuste SVG ilustra como reescalar una imagen SVG.
Las imagenes en SVG reescalan sin perder calidad, porque son grficos
vectoriales
Las imgenes GIT, JPEG o PNG no reescalan bien porque tienen una
resolucin determinada
Esta WebApp tiene 2 botones: + y -
Cada vez que pulsamos uno de estos botones el tamao de la imagen debe
aumentar o disminuir un 10% segn pulsemos + y -
C. EJEMPO RELOJ SVG

Reloj SVG genera un reloj sencillo con SVG
El reloj se compone de Un crculo negro, Tres lineas para las manecillas del
reloj
85

SVG puede animarse con JavaScript, modificando la representacin DOM del reloj.
Versin 1: las manecillas se mueven con transform
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
Version 2: Calcula las coordenadas de las manecillas
Se aade estilo CSS. Mejora el aspecto y adapta al tamao de la pantalla
D. ANIMAR MANECILLAS CON COORDENADAS

Para animar las manecillas del reloj, se incluye un script que cada segundo recalcula
las coordenadas exteriores de las manecillas del reloj
o El secundero tiene una longitud de 50 pixels
o El minutero tiene una longitud de 40 pixels
o La manecilla horaria de 30 pixels
Las coordenadas x2, y2 de las manecillas de horas, minutos y segundos se calculan
con las funciones:
o x2(tiempo, unidades_por_vuelta, x1, radio)
o y2(tiempo, unidades_por_vuelta, y1, radio)
86
E. RELOJES CON ESTILO

Usando CSS e imgenes se pueden disear. Las capturas muestran pequeos
cambios de diseo que cambian muy significativamente la apariencia del reloj
87
LECCION N 11
EMPAQUETAR APLICACIONES WEB PARA ANDROID, IOS O FIREFOXOS.
11.1. EJECUCIN DE APLICACIONES WEB (HTML/JS/CSS) EN DISPOSICVOS MVILES
A. OBJETIVO
Visualizar nuestras aplicaciones Web desarrolladas con HTML5/JS/CSS3 en disposiCvos
mviles.
Android, iOS, Windows Phone,
smartphones, tablets,
Usaremos las herramientas PhoneGap Desktop y PhoneGap Developer App
B. FLUJO DE TRABAJO
1. Desarrollamos una app web
2. Servimos con PhoneGap Desktop
3. Accedemos desde el disposiCvo mvil mediante PhoneGap Developer App
C. PROGRAMAS A INSTALAR
PhoneGap Desktop en el ordenador en que desarrollamos la app HTML5/JS/CSS3
PhoneGap Developer App en el dispositivo mvil, que permite visualizar y probar la
aplicacin anterior
D. INSTALACIN PHONEGAP DESKTOP
http://docs.phonegap.com/ge`ng-started/1-install-phonegap/desktop/
Descargar el instalador para Mac OS X o Windows
Puede que haya que dar permisos de ejecucin
Con PhoneGap Desktop haremos visible la aplicacin web, de forma que el cliente
mvil pueda ejecutarla en el disposiCvo deseado
E. INSTALACIN PHONEGAP DEVEL. APP

http://docs.phonegap.com/ge`ng-started/2-install-mobile-app/
Se ejecuta en el disposiCvo mvil
permite visualizar y probar la aplicacin Desarrollada sin necesidad de instalar
entornos de compilacin/desarrollo naCvos de Android, iOS, etc.
Localizar en iTunes, Google Play o Windows Phone Store
88

F. PRIMER PROYECTO (I)
G. PRIMER PROYECTO (II)
H. PRIMER PROYECTO (III)
I.
PRIMER PROYECTO (IV)
89

J.
PRIMER PROYECTO (V)
K. PRIMER PROYECTO VI
90

L. ESTRUCTURA DEL PRIMER PROYECTO
M. CRONMETRO SEGUNDERO
91
92

N. Proyecto PhoneGap
Vamos a realizar un proyecto PhoneGap con el ejemplo visto
Creamos un nuevo proyecto, de nombre Cronometro
opcionalmente, aadimos el ID org.mooc.crono
Tenemos un nuevo proyecto aadido

hay que modificar el cdigo
Pinchamos en Local path para obtener el folder que contiene el proyecto
y luego nos situamos en el directorio www
Ficheros Cronmetro Segundero

93

Copiamos el cdigo del Cronmetro
Apariencia Cronmetro Segundero
11.2. ACTIVIDAD GENERAL DE UNIDAD

Crear una pgina web con temtica educativa, que incluya al menos:
1. Uso de colores para texto y fondo, incluyendo al menos colores degradados y sombras
en alguna de sus cajas.
2. Incluir imgenes de la ciudad de requena (para el fondo, para el puzle en JavaScript,
etc.)
3. Dar algn tipo de efecto a la CCS3 la cabecera Principal.
4. Incluir bordes redondeados en alguna de sus cajas.
5. Mostrar una ventana emergente de Bienvenida al cargar la pgina.
6. Utilizar cdigo JavaScript para la fecha y hora de la pgina.
7. Su pgina debe contener al menos dos de los siguientes actividades: (Calculadora,
ecuaciones matemtica, cronometro, puzzle, carrusel)
8. Subir dicha aplicacin a la cuenta de Neocities.org o de su eleccin.
94
FICHA DE AUTOEVALUACIN
IV.
DATOS INFORMTICOS:
rea
______________________________________________________________________
Forma dora
______________________________________________________________________
Grupo
______________________________________________________________________
Tema
______________________________________________________________________
Semestre
_____________________ Secci n _____________
Fecha ______/______/ 2016
V.
ALUMNO(A)
VI.
CRITERIO DE DESEMPEO
1.1.3. T oma decisiones y resuelve problemas con autonoma, asertividad, empata y responsabilidad.
1.1.4. Demuestra tica, compromiso y autodisciplina en las tareas que asume.
2.3.4. Utiliza las TIC existentes en su medio, en sus procesos pedaggicos asumiendo respeto por las ideas vertidas en las T IC.
3.1.4. Acta bajo principios de convivencia democrtica, buscando el bienestar colectivo.
IV.
CRITERIOS DE EVALUACIN
INDICADORES
ESCALA
3 4
Total
Demuestra compromiso y autodisciplina en la elaboracin de su producto final

Busco informacin adicional y particip activamente en la elaboracin de su trabajo
Me expreso con claridad, coherencia y fluidez, demostrando preparacin y dominio del tema
Asume con responsabilidad las tareas y prcticas asignadas para las pract icas con JavaScript
Demuestra una actitud crtica y un manejo adecuado de los temas en el proceso de su aprendizaje.
Intervengo en clase con mis interrogantes, ideas u opiniones con claridad y coherencia
Actu con respeto y responsabilidad durante el horario de clases
Establece un clima de respeto, cooperacin y tolerancia al planificar y ejecutar los trabajos en
grupos.
T OT AL
LEYENDA:
INSUFICIENTE (1)
SUFICIENTE (2)
REGULAR (3)
BUENO (4)
MUY BUENO (5)
PROMEDIO TOTAL: PUNTAJE OBTENIDO X 20 =

PUNTAJE TOTAL
V.
OBSERVACIONES
__________________________________________________________________________________________
__________________________________________________________________________________________
________________
Alumno(a)
95

Idioma

Manual Aprendizaje Lenguaje Completo

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Aprendizaje Lenguaje Completo

Cargado por

Copyright:

Formatos disponibles

I.S.P.P.

Fray Florencio Pascual Alegre Gonzlez

Desarrollo en HTML, CSS y Javascript

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

COMPETENCIAS DEL CURSO

PRODUCTO DEL CURSO

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Clientes: Dan acceso a informacin y servicios en Internet

Clientes de acceso a Internet ms importantes son : PCs, porttiles, tabletas, telfonos

Contiene informacin y servicios

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Direccin de un recurso en un servidor en Internet

Protocolo del Web

Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

A. Indicar qu respuesta define correctamente al siguiente trmino: DELETE

Protocolo que permite procesar remotamente recursos en un servidor.

B. Indicar qu respuesta define correctamente al siguiente trmino: JavaScript

Direccin que identifica sin ambigedad un recurso en Internet

C. Indicar que respuesta define correctamente al siguiente trmino: PUERTO

Protocolo que permite procesar remotamente recursos en un servidor.

D. Indicar qu respuesta define correctamente al siguiente trmino: GET

Comando de HTTP para traer pginas Web al cliente para su visualizacin.

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Visualizacin valores por

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Un men vertical y horizontal con FLEX, tendra este formato.

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

2.2. ESTRUCTURA HTML Y CSS

La etiqueta meta define varios tipos de metadatos.

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

El <nav> de <header> puede contener enlaces globales a otras pginas de sitio

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

box-shadow: -5px -5px

box-shadow: -5px -5px 5px

box-shadow: 0 0 5px #888

box-shadow: 0 0 5px 5px

Border-radius:0 50% 0 50%

box-shadow: -5px -5px 0 5px

box-shadow: inset -5px -5px

box-shadow: inner 0 0 5px

box-shadow: -5px -5px 5px 5px

box-shadow: inset -5px -5px 5px

box-shadow: inset 0 0 5px 5px

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Atributo ID: identifica unvocamente un elemento HTML en una pgina. Un

Padding, Margin y border

RECURSO HTML y CSS

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

2.3. HERENCIA CSS

El rbol del documento del ejemplo anterior:

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Descendientes son los elementos conectados pero ms abajo en la estructura

Parent es el elemento conectado y directamente sobre un elemento en la

Child es el elemento conectado y directamente debajo de un elemento en la

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Las clases se usan para aplicar estilos a un elemento determinado.

Tambin se pueden aplicar estilos a un id.