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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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.

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

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

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

LECCION N 2
INTRODUCCIN A LOS ELEMENTOS BSICOS DE HTML, CSS
2.1. HTML/CSS: MI PRIMERA PGINA 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

Visualizacin en el navegador

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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:
o <link href=css/estilo.css" rel="stylesheet" type="text/css"/>
o <a href="pag/pag5.html">Ver ejemplo 5</a>

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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 fuerzan nuevas lneas.
<em> <a> <br> <img> <span> <button> <input> <select><textarea>

11

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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;
oBorder-radius:24px
box-shadow: inset -5px -5px #888; box-shadow: inset -5px -5px 5px #888;
Border-top-left-raduis:24px
Border-radius:24px
Border-radius:36px 12 px;
o box-shadow:inset -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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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:
&lt;
&gt;
&amp;
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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Ancestor es un elemento conectado pero ms 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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Siblings son los elementos que comparten un mismo padre en la estructura del
documento

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Uso de float y un div clear que rompe el esquema del float.

22

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

"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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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: 1000px)" srcset="shaum5.jpg">
<source media="(min-width: 800px)" srcset="shaum4.jpg">
<source media="(min-width: 600px) " srcset="shaum3.jpg">
<source media="(min-width: 400px)" srcset="shaum2.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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

FICHA DE AUTOEVALUACIN
I.

DATOS INFORMTICOS:
rea
______________________________________________________________________
Formadora
______________________________________________________________________
Grupo
______________________________________________________________________
Tema
______________________________________________________________________
Semestre
_____________________ Seccin _____________
Fecha ______/______/ 2016

II.

ALUMNO(A)

III.

CRITERIO DE DESEMPEO
1.1.3. Toma 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 TIC.
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.
TOTAL

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

SEGUNDA UNIDAD
JAVASCRIPT
LECCION N 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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

1. Ejecutar sentencias en consola de chrome.

Expresin sintcticamente

incorrecta da

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

La propiedad length de un string indica su longitud (Nmero de caracteres)

"Pepe".length
=> 4
Hola Pepe".length => 9

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

antes - en:
Asignacin condicional
8*(2 - 4) => -16
Asignacin de valor
Asig. con operacin: += -= *= /= %= <<= >>= >>>= &= ^= |=
Evaluacin mltiple

4.1.5. CUESTIONARIO OBLIGATORIO.

A. Indicar el resultado de evaluar la siguientes expresin JavaScript: "2"+"3"

2
4
5
23
"23"
ErrorDeEjecucin

B. Indicar el resultado de evaluar la siguientes expresin JavaScript: +2+"3"

5
23
"23"
ErrorDeEjecucin

37

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

Las variables son sensibles a maysculas

mi_var y Mi_var son variables distintas

4.2.4. ASIGNACIN DE VARIABLES Y ESTADO DEL PROGRAMA

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

4.2.5. RECOMENDACIONES SOBRE SINTAXIS

Se recomienda delimitar las sentencias siempre con: ;

La sintaxis de JS permite introducir caracteres adicionales (blanco, nueva lnea, ..)
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

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
40

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

4.4.4. FUNCIONES COMO OBJETOS

Las funciones son objetos de pleno derecho,
propiedades, pasarse como parmetros, .

pueden asignarse a variables, a

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

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
44

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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

LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT

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