I.S.P.P. “Fray Florencio Pascual Alegre González” Autorización de Funcionamiento D.S. 045-84-ED, 24-10-84 Calle San José – Barrio Tarapacá s/n – Requena – Loreto. Telefax.: (065) 412322, e-mail:
[email protected]
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 módulo de enseñanza aprendizaje, es una propuesta metodológica bien organizada que establece la ruta que tiene que seguir el estudiante para lograr las competencias del curso. Este módulo de aprendizaje está diseñado para los alumnos del VIII ciclo de la Carrera de Computación e Informática del I.S.P.P. “Fray Florencio Pascual Alegre González, que describe con rigor y profundidad los elementos necesarios, ilustrándolos con ejemplos sencillos, pero realistas. Todo ello con un enfoque multi-disciplinar que cubre la programación en JavaScript y el diseño de gráfico. Se ilustra también el uso de librerías tales como jQuery o jQuery UI, Bootstrap (diseños adaptable), gmaps (integración de GoogleMaps) o phonegap (creación de apps ).
2
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 técnicas de programación orientada a objetos, propiciando la observación y la creatividad en la elaboración en forma individual y grupal. Capicitar para un primer nivel de desarrollo de aplicaciones para terminales fijos y móviles (PC, teléfono móvil, tableta, etc) en HTML5, CSS3 y JavaScript5, con las que se diseñan la mayoría de las aplicaciones de cliente en Internet.
PRODUCTO DEL CURSO Los alumnos serán capaces de diseñar Páginas Web y apps adaptadas a PC, teléfono móvil 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.
3
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
PRIMERA UNIDAD INTRODUCCIÓN AL DESARROLLO EN HTML5, CSS3 LECCIÓN N° 1 INTRODUCCIÓN A INTERNET Y A LA WEB 1.1. CLIENTES, SERVIDORES Y LA NUBE
Clientes: Dan acceso a información y servicios en Internet Servidores: Alojan la información y los servicios La nube: conjunto de terminales y servidores interconectados con aplicaciones y protocolos de Internet TCP/IP: protocolos de interconexión 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 más importantes son : PCs, portátiles, tabletas, teléfonos 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 móviles y tabletas. Las aplicaciones usan las normas de la Web (URL, HTTP, ....) 1.3. MÁQUINA SERVIDORA (HOST)
Contiene información y servicios Una máquina servidora tiene una dirección “conocida” en Internet Dirección simbólica (de dominio o DNS): upm.es, google.com, … Cada dirección de dominio tiene una dirección IP (binaria) asociada Hay 2 tipos de direcciones IP: IPv4 e IPv6 IPv4: versión 4 del protocolo IP con dirección de 32 bits o 4 octetos ejemplo: 192.9.0.144, 127.0.0.1 (localhost - mi máquina), ... IPv6: versión 6 del protocolo IP (última) con dirección de 128 bits ejemplo: 2001:db8:85a3::8a2e:370:7334, .... 1.4. SERVIDORES Y PUERTOS
Puerto Dirección de 16 bits dentro de la máquina 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 través 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)
Dirección 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:
[email protected] 1.6. HTTP (HIPERTEXT TRANSFER PROTOCOL)
Protocolo del Web Procesa recursos identificados por un URL en un servidor remoto Métodos 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. APLICACIÓN WEB
Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript HTML :Lenguaje de marcado de páginas Web, define la estructura del contenido de una página Web . En WebApps define la interfaz de la aplicación con el usuario. CSS :Define el estilo visual de un una página o aplicación Web (HTML) JavaScript :Lenguaje de programación de aplicaciones de cliente Ejemplo: Aplicación Web: HTML, CSS y JavaScript
HTML
Lenguaje de marcado CSS
Estilo la visualización JavaScript
Lenguaje de programación
5
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 1.8. ACTIVIDAD CUESTIONARIO
A. Indicar qué respuesta define correctamente al siguiente término: DELETE
Protocolo que permite procesar remotamente recursos en un servidor. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página 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 término: JavaScript
Dirección que identifica sin ambigüedad un recurso en Internet Unidad de información digital de interés para un usuario. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página Web en el navegador. Lenguaje de programación de aplicaciones de cliente. Dirección interna de la máquina servidora donde se instala un servidor.
C. Indicar que respuesta define correctamente al siguiente término: PUERTO
Protocolo que permite procesar remotamente recursos en un servidor. Dirección que identifica sin ambigüedad un recurso en Internet Unidad de información digital de interés para un usuario. Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página Web. Comando de HTTP para crear recursos en un servidor. Lenguaje que define el estilo de visualización de la página Web en el navegador.
D. Indicar qué respuesta define correctamente al siguiente término: GET
Comando de HTTP para traer páginas Web al cliente para su visualización. Lenguaje que define la estructura de la información de una página 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 programación de aplicaciones de cliente.
6
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT LECCION N° 2 INTRODUCCIÓN A LOS ELEMENTOS BÁSICOS 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. … … Estandarizado en la norma ISO de SGML (Standard Generalized Markup Lenguage). El W3C desarrolla especificaciones técnicas y directrices, de forma que se pueda asegurar una alta calidad técnica y editorial.
2.1.2.
ESTRUCTURA HTML Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. , y Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas: o, o
Editor
2.1.3.
Visualización en el navegador
LENGUAJE HTML Las marcas de texto en html, se emplean para el estructurado semántico del contenido . Los textos habitualmente están formados básicamente por titulares
párrafos
, resaltando en ellos agunas palabras en negrita
o en cursiva
. Las imágenes se vinculan en una página HTML con la etiqueta img
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 imágenes que se usan en la web son: GIF, JPG, PNG y las imágenes vectoriales en SVG Ejemplo:
2.1.4.
URL URL (Uniform Resource Locator) es el localizador de un archivo en internet. Una dirección absoluta en internet, que combina el nombre del servidor que proporciona la información, 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 transación en la Web
The New York Times https es la versión segura de http
Google España mailto, es el esquema que se emplea para enlazar a una dirección de correo.
Contacto ftp, es el esquema para la transferencia archivos.
Descarga por FTP Una URL local nos lleva a otra página o archivo del mismo sitio de Internet. Ejemplo de un sitio web, de la raíz 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.
Ver siguiente 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:
Ver ejemplo 5
8
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 2.1.5.
CSS En HTML, controla el aspecto gráfico 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 añadir mediante un bloque marcado como
CSS3 permite posicionar los div en la página, float y clear. Con float el div “flota” a una posición relativa.
CSS3 permite posicionar los div en la página, 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 página, mediante position, absoluta, relativa o fija. Con posición absoluta el div sale del flujo del contenido.
Con posición fija el div no cambia de posición en el escalado del navegador o el scroll en la página.
23
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 3.1.1. TEXTO CSS3 Las propuestas de familia tipográfica terminan con una familia Genérica alternativa. P{ font-family:"Times New Roman",Georgia,Serif; } Valores de las familias genéricas 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 tamaño de la fuente
| | | | inherit Tamaño predeterminado para el texto es de 16px (16px = 1em). o Los valores posibles son: [ xx-small | x-small | small | medium | large | x-large | xx-large ] o Un valor relativo al heredado, mayor o menor:[ larger | smaller ] o es un valor absoluto del tamaño generalmente en px o representa un valor en función al valor heredado.
scaling factor XHTML headings
xx-small
x-small
small
medium
large
x-large
xx-large
3/5
3/4
8/9
1
6/5
3/2
2/1
h5
h4
h3
h2
h1
h6
3/1
line-height – define el interlineado del texto normal | | | | inherit o El número que multiplicado el tamaño de la fuente establece el alto de la línea o Medida, es la altura de la línea como un valor fijo en px, pt… o El porcentaje del alto de la línea en función del tamaño 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: Src [ [format( [, ]*)] | ] [, [format( [,]*)] | ]* @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 En el estilo p{ font-family: 'Caesar Dressing', cursive; } 3.1.4. Actividad Cuestionario A. Cuál 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. Cuál 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 en la cabecera de la página. o Es necesario bajar la fuente y alojarla en tu propio servidor. 3.2. HTML/CSS – VIDEO AUDIO, IMAGEN 3.2.1. IMÁGENES. La resolución de pantalla es el número de pixeles que muestra. La resolución CSS o Viewport. Si un dispositivo tiene un alto número de pixeles, a una distancia de visualización 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.
Imágenes de mapa de bits La imagen está formada por una rejilla de pixeles, se definen por su tamaño en ancho y alto en pixeles y la profundidad de color, el número de colores que es capaz de representar en cada pixel.
PNG, formato 24bits truecolor Compresión sin pérdida Transparencia 256 niveles
JPEG, formato 24bits Compresión produce ruido No transparencia
GIF, formato 8bits, 256 colores Compresión produce dither Transparencia 1 nivel Animación
26
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Imágenes vectoriales SVG SVG son las siglas de Scalable Vector Graphics, Es un formato desarrollado y mantenido por el W3C. Son imágenes definidas matemáticamente, que se calculan en el navegador y su visualización no pierde calidad en cualquier tamaño que se presenten.
Para crear y modificar este tipo de formatos podemos usar: Inkscape: de código 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 solución para imágenes responsive. Permite usar varias imágenes según las condiciones media.
3.2.2. VIDEO. HTML5 permite insertar contenido multimedia, audio y vídeo. Tu navegador no soporta el elemento vídeo Atributos poster: permite insertar una imagen de sustitución cuando el vídeo 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 automáticamente manteniendo la proporción. loop: reproduce el vídeo continuamente . autoplay: reproduce el vídeo automáticamente. preload: carga el vídeo 27
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Es posible incluir diferentes formatos de un archivo para que el vídeo pueda ser soportado en distintos navegadores, se emplea la etiqueta 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 vídeo. La solución es convertir el vídeo a los diferentes formatos de vídeo, que puede ser un proceso complejo y que requiere tiempo. Una solución puede ser emplear YouTube para reproducir vídeo. Sube el vídeo a YouTube, toma nota de su identificador o copia el código de inserción que facilita YouTube. <iframe width="640" height="360" src="https://www.youtube.com/embed/CFp_8Sah6YU" frameborder="0" allowfullscreen> Los parámetros 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 vídeo se reproduzca automáticamente, 1 si espera al play. Controls, con 0 los controles no se muestran con 1 si y en ambos el vídeo se descarga el vídeo, con 2 los controles se muestran pero el video no se descarga hasta hacer play. Loop, 0 sólo una vez y 1 para reproducción infinita. Está en desuso emplear o para insertar vídeo. 3.2.3. AUDIO El audio EN html5 se inserta de manera similar: El formato mp3, no es un formato abierto, para maximizar la compatibilidad usaremos varios formatos con
28
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 3.2.4. ACTIVIDAD Realiza una página que utilice imágenes responsive con la etiqueta picture, que contenga un vídeo de YouTube y archivos de imagen vectorial SVG.
3.3. INTEGRACIÓN DE OBJETOS Y DE MULTIMEDIA EN PÁGINAS HTML5 3.3.1. Integrar objetos y recursos externos HTML permite insertar recursos externos en una página Web con: A. : imágenes Formato de puntos: JPEG, GIF, PNG, .. (resolución fija) Formato vectorial: SVG, … (escalables sin perdida de calidad) B. , : video y audio No existe acuerdo sobre los formatos a utilizar!!! C. <iframe ….>: páginas Web y otros objetos Crea un nuevo marco de navegación Web anidado seguro D. : objetos. plugins, imágenes Es el mas genérico. E. : aplicación exterior, normalmente no-HTML Marca heredada del pasado (Flash), se introdujo como un elemento no estándar 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 páginas 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? : Es la mas general de todas. Puede integrar una imagen, un marco de navegación anidado o un recurso procesado por un plugin. Permite paso de parámetros e interacción con el objeto integrado. Tipo mime identifica tipo de objeto: <iframe>: Es la mas segura. Crea una caja de arena (sandbox) y restringe accesos al mismo origen. Protege de acciones hostiles del objeto importado : Marca no estándar heredada de tiempos del Flash. Aunque ha sido incluida en HTML5, su uso no es muy popular. , <iframe> y pueden usarse con imágenes, video,.. El ejemplo siguiente muestra su equivalencia, incluyendo 2 marcos de navegación anidados, uno con y otro con <iframe>, 2 videos, uno con y otro con <iframe>, 2 imagenes, un SVG animado con y un PNG de baja resolución con .
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 línea siguiente. Coloca cada bloque vertical a la derecha del anterior si cabe y al llegar al final pasa a la línea 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 imágenes las cuales están desordenadas y sin una estructura. El objetivo del laboratorio será ordenar las imágenes y darle estructura; así como practicar lecciones aprendidas. 3.5. TRABAJO GENERAL DE UNIDAD Crear una página 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, imágenes de la ciudad de requena de tipo bitmap y jpg. 5. Dar algún tipo de efecto a las imágenes con CSS3. 6. Incluir algún vídeo cultural de requena. 7. Incluir bordes redondeados en alguna de sus cajas. 8. La página debe comenzar con el siguiente encabezamiento: “Página Grupal de ” 9. Subir dicha aplicación a la cuenta de Neocities.org o de su elección.
32
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
FICHA DE AUTOEVALUACIÓN I.
DATOS INFORMÁTICOS: Área ______________________________________________________________________ Forma dora ______________________________________________________________________ Grupo ______________________________________________________________________ Tema ______________________________________________________________________ Semestre _____________________ Secci ón _____________ Fecha ______/______/ 2016
II.
ALUMNO(A)
III.
CRITERIO DE DESEMPEÑO 1.1.3. T oma decisiones y resuelve problemas con autonomía, asertividad, empatía 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 pedagógicos asumiendo respeto por las ideas vertidas en las T IC. 3.1.4. Actúa bajo principios de convivencia democrática, buscando el bienestar colectivo.
3.
CRITERIOS DE EVALUACIÓN INDICADORES
1
2
ESCALA 3 4
5
Total
Demuestra compromiso y autodisciplina en la elaboración y seguimiento de las prácticas de laboratorio Busco información adicional y participó activamente en clase Me expreso con claridad, coherencia y fluidez, demostrando preparación y dominio del tema Asume con responsabilidad las tareas y prácticas asignadas para la elaboración de las páginas y aplicativos web. Demuestra una actitud crítica 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, cooperación 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
SEGUNDA UNIDAD “JAVASCRIPT” LECCION 04 INTRODUCCIÓN A JAVASCRIPT: EXPRESIONES, VARIABLE, FUNCION, OBJETO Y DOM. 4.1. JAVASCRIPT: EXPRESIONES. Lenguaje de programación diseñado en 1995 por Brendan Eich. Para animar páginas Web en el Navegador Netscape. Hoy se ha convertido en el lenguaje del Web y de Internet. Guía: 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 atrás” ES3 - ECMAScript 3 (Dec. 1999): navegadores antiguos Primera versión 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 vías de introducción 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 expresión representa un valor, que es el resultado de evaluarla Ejemplo: operadores aritméticos +, -, *, / formando expresiones numéricas Las expresiones se evalúan (=>) a los valores resultantes Expresiones mal construidas dan error o llevan el intérprete a un estado inconsistente 13 + 7 => 20 // Suma de números 13 - 1.5 => 11.5 // Resta de números // OJO! la coma española es un punto en la sintaxis inglesa (8*2 - 4)/3 => 4 // Expresión con paréntesis 8 /*3 => ?? // Expresión incorrecta 8 3 => ?? // Expresión incorrecta 34
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 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 línea (Enter). Si tecleamos una expresión la evalúa y calcula el resultado
2. Ejecutar sentencias en consola de chrome.
Expresión sintácticamente
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 apóstrofes, por ej. Frases: "hola, que tal" o 'hola, que tal' String vacío: "" o '' Ejemplo de "texto 'entrecomillado' ", comillas y apóstrofes 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
4.1.3.
La propiedad length de un string indica su longitud (Número de caracteres) "Pepe".length => 4 “Hola Pepe".length => 9
SOBRECARGA DE OPERADORES Los operadores sobrecargados tienen varias semánticas, dependiendo del contexto en que se usan en una expresión Por ejemplo, el operador + tiene 3 semánticas diferentes Suma de enteros (operador binario) Signo de un número (operador unitario) Concatenación de strings (operador binario) 13 + 7 => 20 // Suma de números +13 => 13 // Signo de un número "Hola " + "Pepe" => "Hola Pepe" // Concatenación de strings
4.1.4.
CONVERSION DE TIPOS DE EXPRESIONES. JavaScript realiza conversión automática de tipos cuando hay ambigüedad en una expresión, utiliza las reglas de prioridad para resolverla. La expresión "13" + 7 es ambigua, porque combina un string con un number. Con ambigüedad JavaScript da prioridad al operador + de strings, convirtiendo 7 a string. La expresión +"13" también necesita conversión automática de tipos. El operador + solo esta definido para number (no hay ambigüedad). 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 más arriba o más 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 método; índice a array new Crear objeto con constructor de clase () Invocación de función/método o evaluar expresión ++ -Pre o post auto-incremento; pre o post auto-decremento ! ~ Negación lógica (NOT); complemento de bits + Operador unitario, números. signo positivo; signo negativo delete Borrar propiedad de un objeto typeof void Devolver tipo; valor indefinido * / % Números. Multiplicación; división; modulo (o resto) ++ Concatenación de strings; Números. 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 & Operación y (AND) de bits ^ Operación ó exclusivo (XOR) de bits | Operación ó (OR) de bits && Operación lógica y (AND) 8*2 - 4 => 12 || Operación lógica o (OR) * tiene más prioridad que -, pero (..) obliga a evaluar ?: = OP= , 4.1.5.
antes - en: Asignación condicional 8*(2 - 4) => -16 Asignación de valor Asig. con operación: += -= *= /= %= <<= >>= >>>= &= ^= |= Evaluación múltiple
CUESTIONARIO OBLIGATORIO. A. Indicar el resultado de evaluar la siguientes expresión JavaScript: "2"+"3" B.
2 4 5 23 "23" ErrorDeEjecución
Indicar el resultado de evaluar la siguientes expresión JavaScript: +2+"3"
5 23 "23" ErrorDeEjecución
37
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
C.
Indicar el resultado de evaluar la siguientes expresión JavaScript: 2+(+"3")
2 5 23 33 "23" ErrorDeEjecución
D. Indicar el resultado de evaluar la siguientes expresión JavaScript: ("10"+"23").length
5 23 33 "23" "1023" ErrorDeEjecución
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 cómo funciona el programa. Comentario multilínea: delimitado con /* …. */ /* Ejemplo de programa JavaScript */ Comentario de una Sentencia 1: define la línea: empieza con variable x con valor 7. var x = 7; // Definición de variable // y acaba al final de la // visualizar x en el navegador línea 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 página Web que lo contiene. JavaScript es un lenguaje interpretado que ejecuta las instrucciones a medida que las va leyendo document.write() convierte a string y lo visualiza en el navegador. El string se interpreta como HTML y se visualiza en el lugar de la página 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
Separación de línea HTML
4.2.2.
DEFINICIÓN DE VARIABLES Y ESTADO DEL PROGRAMA Las variables se crean con la sentencia de definición de vari ables La sentencia comienza con la palabra reservada var. A continuación vienen una o más definiciones de variables separadas por comas Cada definición de variable comienza con el nombre de la variable . A la variable se le puede asignar un valor usando el operador de asignación: = Undefined: valor (y tipo) especial de JavaScript que significa indefinido. Las variables sin ningún 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 además números Nombres bien construidos: x, ya_vás, $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
4.2.4.
Las variables son sensibles a mayúsculas mi_var y Mi_var son variables distintas
ASIGNACIÓN DE VARIABLES Y ESTADO DEL PROGRAMA
4.2.5.
Una variable es un contenedor de valores, cuyo contenido puede variar. La sentencia de asignación 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 número, un string, undefined, .. Se denomina punto de ejecución del programa: Al estado en que queda el programa después de ejecutar una instrucción El estado de un programa varia en función del punto de ejecución
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 línea. Esto puede dar problemas y no debe hacerse nunca.
Cada sentencia debe ocupar una línea por legibilidad, salvo algunas excepciones Las sentencias con bloques de código: if/else, while, for, definición de funciones, sentencias que contienen expresiones muy largas
40
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 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 expresión que se asigna a ella misma La parte derecha usa el valor anterior a la ejecución 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 expresión provoca un error y la ejecución 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 expresión Si ++/-- se aplica por la izquierda a la variable (pre), el incremento/decremento se realiza antes de evaluar la expresión Si ++/-- se aplica por la derecha (post) se incrementa/decrementa después de evaluarla Ojo! Usar con cuidado porque tiene efectos laterales y lleva a programas crípticos.
4.3.2.
OPERADORES DE ASIGNACIÓN Es muy común modificar el valor de una variable, sumando, restando, .... algún valor Por ejemplo, x = x +7; y = y - 3; z = z * 8; ……. JavaScript tiene operadores de asignación 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 Función: bloque de código (con parámetros) asociado a un nombre . La función se invoca (o ejecuta) por el nombre y devuelve un valor como resultado. En la invocación se deben asignar valores concretos a los parámetros Las funciones permiten crear operaciones de alto nivel . Se denominan también abstracciones o encapsulaciones de código. La función representa el valor resultante de su ejecución (evaluación). El resultado de evaluar una función depende del valor de los parámetros. Puede utilizarse en expresiones como cualquier otro valor
4.4.1.
FUNCIÓN: DEFINICIÓN E INVOCACIÓN
Una función se define con la palabra reservada function seguida del nombre . A continuación se definen los parámetros entre paréntesis. Los parámetros son variables que se asignan en la invocación. Puede asignarse nuevos valores en el bloque igual que a las variables A continuación se define el bloque de código delimitado entre llaves {} . El bloque contiene instrucciones La sentencia return finaliza la ejecución. Devolviendo el resultado de evaluar como valor de retorno. Si la función 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.
PARÁMETROS DE UNA FUNCIÓN La función se puede invocar con un número variable de parámetros. Un parámetro definido, pero no pasado en la invocación, toma el valor undefined Un parámetro pasado en la invocación, pero no utilizado, no tiene utilidad
4.4.3.
4.4.4.
EL ARRAY DE ARGUMENTOS DE FUNCIONES.
Los parámetros de la función están accesibles también a través del array de argumentos: arguments[....]. Cada parámetro 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 parámetros, …. Literal de función: function (..){..} Función sin nombre, que suele asignarse a una variable, que es la que le da nombr. Se puede invocar a través del nombre de la variable. El operador (...) invoca una función ejecutando su código. Este operador solo es aplicable a funciones (objetos de la clase Function), sino da error. El operador puede incluir parámetros separados por coma, accesibles en el código de la función 43
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
4.5. JAVASCRIPT: OBJETOS, PROPIEDADES, MÉTODOS 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: MÉTODOS Y PROPIEDADES
Los objetos son colecciones de variables (propiedades) y funciones (métodos), agrupadas en un elemento estructurado que llamamos objecto
Nombres de propiedades y métodos, tienen la misma sintaxis que las variables: a, _method, $1, …
Propiedad: variable de un objeto Se acceden con el operador ".": objeto.propiedad
Método: función "especial" asociada a un objeto, invocada con el operador ".": objeto.metodo(parametros). Un método devuelve un valor de retorno igual que una función El método tiene acceso al objeto y puede inspeccionar o modificar sus componentes 44
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 4.5.3.
EJEMPLOS DE OBJETOS DOM Objetos DOM: dan acceso a los elementos HTML de una página Web, por ejemplo Document: Objeto DOM que da acceso a la página Web cargada en el navegador. Es un objeto visible en todo programa JavaScript cuando este se ejecuta en el navegador getElementById(…….). Es un método 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 página visualizada en el navegador.
La sentencia de asignación document.getElementById("fecha").innerHTML = new Date(); muestra en el navegador la fecha y la hora en la caja del bloque genérico identificado por "fecha".
define un bloque HTML sin contenido la propiedad innerHTML de su objeto DOM contiene inicialmente: "" la propiedad outerHTML de su objeto DOM contiene inicialmente: "
" El navegador no muestra nada al visualizar la página, 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 más conciso, más legible e incluso más eficiente La sentencia de asignación 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 página forman un único programa JavaScript. o Las definiciones (variables, funciones, …) son visibles entre scripts Los scripts se ejecutan siguiendo el orden de definición en la página o Instrucciones adicionales ejecutadas en la consola del navegador, se ejecutan después del último script Este ejemplo también es equivalente a los anteriores o Define la función que inserta fecha y hora en un script en la cabecera y la invoca en el script del final o La invocación 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 SELECCIÓN 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 página 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 aplicación Web (muestra la fecha y la hora):
Date <meta charset="UTF-8">
La fecha y la hora son:
<script type="text/javascript"> var fecha = new Date(); var msj; if (fecha.getHours() < 7) { msj = "Buenas noches";} else if (fecha.getHours() < 12) { msj = "Buenos días";} else if (fecha.getHours() < 21) { msj = "Buenas tardes";} else { msj = "Buenas noches";} document.getElementById("h1").innerHTML = msj; document.getElementById("fecha").innerHTML = fecha; B. Incluyendo los siguientes elementos: 1) El nombre de la persona que hace la entrega debajo del titulo
2) Un bloque 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 líneas 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCIÓN 5 JAVASCRIPT: BOOLEANO, IF/ELSE, STRING, NÚMERO, 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 métodos definidos para ella getDay(), getHours(), getMinutes(), getFullYear(), ….. Invocar un método que no está definido en un objeto da un error_de_ejecución
48
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
D. IF/ELSE-IF ENCADENADO
E. FUNCIONES ALERT(), CONFIRM() Y PROMPT()
49
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Cómo se evaluarán 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"; } } Cómo se evaluarán 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 código UNICODE. GUIA: Lenguas y símbolos soportados en UNICODE: http://www.unicode.org/charts/ Literal de string: textos delimitados por comillas o apóstrofes.
51
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT o "hola, que tal", 'hola, que tal', 'Γεια σου, ίσως' , en la línea anterior se representa "hola, que tal" en castellano, griego o String vacío: "" o '' o "texto 'entrecomillado' ", comillas y apóstrofes se pueden anidar: 'entrecomillado' forma parte del texto. o Operador de concatenación de strings: + "Hola" + " " + "Pepe" => "Hola Pepe" B. ALFABETO, CÓDIGO Y CODIFICACIÓN Juego de caracteres o alfabeto . Conjunto de símbolos normalizados para representar una lengua Código de caracteres: Conjunto de puntos de código dados a los símbolos de un alfabeto, p.e. o ASCII: alfabeto inglés 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: código internacionalizado que contiene casi todos los alfabetos Codificación: Representación binaria de un código de caracteres o ASCII e ISO Latin-x: el valor del punto del código coincide con la representación binaria o UNICODE UTF-8: Codificación binaria en 1, 2, 3 o 4 bytes eficiente con lenguas latinas o UNICODE UTF-16: Codificación del plano BMP en 2 bytes y de otros planos en 4 bytes o UNICODE UTF-32: Codificación de todos los planos en 4 b
C. CÓDIGOS ESCAPADOS Definen caracteres UNICODE. Comienzan con barra inversa: \…La definición 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 línea (\n) separa las dos líneas.
52
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
D. MÉTODOS DE STRING Algunos métodos y elementos útiles de String Más 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 número_de_caracteres-1 referencia cada carácter. Acceso como array: 'ciudad'[2] => 'u' Propiedad: 'ciudad'.length => 6. La propiedad length contiene el número de caracteres del string Método: 'ciudad'.substring(2,5) => 'uda'. Devuelve el substring comprendido entre ambos índices Método: 'ciudad'.charCodeAt(2) => 117. Devuelve el número (decimal) con código UNICODE del tercer carácter Método: String.fromCharCode(117) => 'u'. Devuelve el string con el carácter correspondiente al código numérico (decimal)
53
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 5.3. JAVASCRIPT: EL TIPO NUMBER A. TIPO NUMBER Los números del tipo number, se representan con literales de números 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:
e B. INFINITY Y NAN El tipo number posee 2 valores especiales: o NaN o Infinity NaN (Not a Number), representa un valor no numérico, números complejos, strings no convertibles a números. Infinity representa. El infinito matemático. Desbordamiento. El tipo number utiliza el formato, IEEE 754 coma flotante doble precisión (64 bits) o Reales máximo y mínimo: ~1,797x10^308 y 5x10^-324 o Entero máximo: 9007199254740992
C. MÓDULO MATH
El Modulo Math contiene constantes y funciones matemáticas Constantes: Números: 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT D. MÉTODOS DE NUMBER Algunos métodos útiles de Number son o toFixed(n) devuelve string equiv. a número, redondeando a n decimales o toPrecision(n) devuelve string equiv. a número, redondeando número a n dígitos o toExponential(n) devuelve string eq. a número, redondeando mantisa a n decimales o toString([base]) convierte un número a, string con el número en la base indicada [base] es opcional, por defecto base 10 Los métodos se invocan con el operador punto: "." OJO! El número debe estar entre paréntesis para invocar el método, sino da error En este enlace se pueden ver otros métodos de Number: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
E. PARSEINT(..) Y PARSEFLOAT(..) parseInt(string, [base]): función predefinida de JS que convierte string a number. String se interpreta como un entero en la base indicada (por defecto base 10) parseFloat(string): función predefinida de JS que convierte string a number. String se interpreta coma un número en coma flotante. ParseInt(..) o parseFloat(..): realizan una conversión similar a la conversión automática. OJO! Convierten a número si un prefijo no vacío del string representa un número
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 conversión 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 negación convierte un valor en el valor booleano equivalente negado o La doble negación convierte un valor en su equivalente booleano: !! 55
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT B. OPERADORES DE IDENTIDAD E IGUALDAD Identidad o igualdad estricta: === o Determina si 2 valores son exactamente los mismos o Es igualdad semántica 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 Negación de la igualdad estricta Igualdad y desigualdad débil: == y != o OJO! No debe utilizarse o Realiza conversiones impredecibles C. OPERADORES DE COMPARACIÓN JavaScript tiene 4 operadores de comparación o Menor: < o Menor o igual: <= o Mayor: > o Mayor o igual: >= Utilizar comparaciones solo con números (number), donde es una relación de orden bien definida No se recomienda utilizar con otros tipos: string, boolean, object, .. o Las relación de orden en estos tipos existe, pero es muy poco i ntuitiva D. OPERADORES Y (&&) Y O (||) Operador lógico y (and): && o devuelve o sin modificarlos o && o devuelve -> si es equivalente a false o devuelve -> en caso contrario Operador lógico o (or): || o devuelve o sin modificarlos o || o devuelve -> si es equivalente a true o devuelve -> en caso contrario E. OPERADOR DE ASIGNACIÓN CONDICIONAL El operador de asignación condicional, devuelve un valor en función de una condición lógica (siempre entre paréntesis). Es una versión funcional del operador if/else Sintaxis: (condición) ? : o devuelve -> si condición es equivalente a true 56
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT o
devuelve -> en caso contrario
Esta sentencia permite definir parámetros por defecto en funciones con la asignación o param = (x!==undefined) ? x : ; o También se define a veces como "x || ”, pero aplicaría también si x es "", 1, null, ..
5.5. JAVASCRIPT: DOM, EVENTOS E INTERACCIÓN CON EL USUARIO A. EVENTOS EN HTML HTML permite definir eventos de interacción con el usuario Los eventos se definen con atributos con nombres especiales de elementos HTML. onclick (hacer clic), ondbclick (hacer doble clic), onload (página cargada), … Guía: http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.ht ml El valor asignado al atributo es código 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 ) 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT B. CALCULADORA
Ejemplo de calculadora muy sencilla. Con los elementos básicos de interacción cajetines para teclear texto: botones para interactuar con el programa: ..nombre..
Comportamiento de la calculadora Al pulsar el botón se calcula: el cuadrado del número tecleado en el cajetín Al seleccionar el cajetín: se borra el contenido existente La calculadora tiene 3 elementos HTML Un texto indicativo El cajetín donde teclear El botón con el que calcular el cuadrado La interacción con el usuario se realiza con: Botón donde clicar: x2 Este elemento muestra el texto HTML "x2 " donde la marca define un exponente o superíndice. Cajetín de entrada de texto: El objeto DOM obtenido con var num = document.getElementById("n1") permite interacción con el cajetín 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 cajetín num.innerHTML contiene: "", no tiene HTML interno num.outerHTML contiene: " " Es el HTML completo del elemento Modificar la página visualizada, por ej. Asignar num.value = 5; Mostrará 5 en el cajetín Asignar num.outerHTML = Hola
Mostrará un párrafo con“Hola" en vez del cajetín
C. ATENCIÓN A EVENTOS Los objetos DOM tienen eventos asociados atendidos por funciones, por ej. El atributo onClick="vaciar()" de . Asocia al evento clicar en el cajetín la función vaciar() que vacía el cajetín al ocurrir este
58
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT El atributo onClick="cuadrado()" de …. Asocia al evento clicar en la función cuadrado() que muestra en el cajetín el cuadrado del número contenido en este antes de clicar
Existen muchos más eventos de interacción con el usuario. Se puede encontrar más información sobre los más básicos en: http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
D. CALCULADORA: AÑADIR BOTÓN 1/X
En este ejemplo añadimos, Un botón más a la calculadora. El dot calcula el inverso (1/x) del cajetín Añadir un nuevo botón es sencillo o Se añade un nuevo botón HTML, con el texto: 1/x, con atributo : onclick=“inverso()", asocia inverso() a clic en él o Se añade la función: inverso(). Calcula el inverso del número del cajetín o Se añade una marca de párrafo en HTML.Para separar el cajetín de los botones
59
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT E. CALCULADORA EXTENDIDA. Calculadora Extendida. Suma o resta 2 números, así: Se teclea el primer número Se pulsa + o Se teclea el segundo número 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 función inic() El evento onLoad de body indica que se ha construido ya el árbol DOM. Este evento invoca la función inic() que carga en la variable num el objeto DOM de acceso al cajetín, que utilizan el resto de las funciones. Variables acc y op Las variables acc y op guardan el número que está en el cajetín y la operación pulsada (+ o -), cuando se pulsa el botón +(invoca función mas()) o el - (invoca función menos()). Botón = El botón = invoca la función calcular(), que suma o resta el número que está en el cajetín con el número guardado en acc, dependiendo de la operación (+ o -) que
5.6. ACTIVIDAD: EJERCICIO OBLIGATORIO A. Añadir a la calculadora el siguiente título: “Buenos días, bienvenido a la calculadora de ” B. Integrar además en una sola calculadora los siguientes botones de operaciones matemáticas: 1) Operaciones unitarias (con un solo operando): 1.1) x^2 (número elevado al cuadrado) 1.2) 1/x (inverso del número) 1.3) sqrt(x) (raiz cuadrada del número) 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, multiplicación y división) 2.2) x^y (x elevado a y) C. Subir dicha aplicación a la cuenta de neocities.org
60
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
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 condición de permanencia. Lo ilustramos con el cálculo de 2 elevado a n: 2^n (2*2*…*2). Además existen otros tipos de bucles que no vemos aquí: for, for/in, do/while, … Un bucle tiene 3 partes: Iniciación: fija los valores de arranque del bucle en la 1a iteración.La iniciación se realizar aquí en instrucciones anteriores a la sentencia del bucle Condición de permanencia: controla la finalización del bucle . El bucle se ejecuta mientras la condición sea true. Bloque de acciones: acciones realizadas en cada iteración del bucle . Realiza el cálculo de forma iterativa hasta que la condición de permanencia indica que se ha obtenido el resultado B. EJECUCIÓN DEL BUCLE La ejecución del bucle while esta controlada por la condición 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 evaluación de la condición del bucle, si (n !== 1) es true o a false
C. EJEMPLO FUNCIÓN PO_2 El bucle se inicia con los valores iniciales del parámetro n y de la variable res. n es el número cuya potencia de 2 que vamos a calcular. res es una variable local de la función (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 iteración del bucle. La primera instrucción 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 iteración, para multiplicar n veces. 61
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT El bucle finaliza cuando la condición de permanencia (n !== 1) sea false (n llega a cero). La condición de permanencia va siempre delimitada entre paréntesis: ().
D. BUCLE FOR La sentencia for es mas compacta que while. La gestión del bucle (entre paréntesis) va detrás de la palabra reservada for y consta de tres partes separadas por ";”: 1) Iniciación: define e inicia la variable "i”. La variable "n” se define fuera del bucle. 2) Condición de permanencia: el bucle se ejecuta mientras la condición sea true. Se sale del bucle en cuanto pase a false. Similar a la condición de permanencia de while. 3) Acción final del bucle: se ejecuta al final de cada iteración en la ejecución del bloque de código del bucle. n-- decrementa el número hasta llegar a 1. Lleva la cuenta del número 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 6.2. JAVASCRIPT: ARRAYS Array: lista ordenada e indexable de n elementos heterogéneos. 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 tamaño de un array es su propiedad a.length. El tamaño máximo de un array es: 232-2 elementos En castellano se denomina matriz o vector. Un array puede contener, números, 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 tamaño 6.3. EJERCICIOS PRACTICOS A. SUMATORIO: VERSIÓN 1 La calculadora ilustra aquí el uso de arrays, Creando la función sumatorio de n números: Σx El sumatorio de los números 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 números se introducen en el cajetín. En formato CSV (Coma Separated Values)
B. SUMATORIO: VERSIÓN 2 Ejemplo con la calculadora ligeramente modificada. El bloque de código 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 versión). Aunque las llaves suelen incluirse para mejor legibilidad Operadores de la sentencia: acc += +lista[i++]; El operador += suma a la variable la expresión asignada El operador + de +lista[i++] convierte el string a number [i++] accede al array antes de incrementar (postincremento) 63
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
6.4. JAVASCRIPT: FUNCIONES COMO OBJETOS A. CLASE FUNCTION Y LITERAL DE FUNCIÓN Las funciones son objetos de pleno derecho que pertenecen a la clase Function. Pueden asignarse a variables, propiedades, parámetros de funciones, … function (..){..} es un literal de función que crea un objeto función (sin nombre) El objeto suele asignarse a una variable o parámetro, que le da su nombre El literal "function () {}” crea una función vacía como la creada con el constructor "new Function()” La definición de funciones con nombre, también crea objetos de la clase Function El operador paréntesis permite invocar (ejecutar) objetos de tipo función, pasando una lista de parámetros al objeto función, p.e. comer('José','paella')
B. OPERADOR INVOCACIÓN DE UNA FUNCIÓN: (…) El objeto función puede asignarse o utilizarse como un valor, el objeto función contiene el código de la función El operador (...) invoca una función ejecutando su código. Solo es aplicable a funciones (objetos de la clase Function), sino da error. Puede incluir parámetros separados por coma, accesibles en el código de la función
64
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT C. ITERADORES DE ES5 forEach(function(elem, index, array){…}): Iterador que ejecuta la función secuencialmente para cada elemento del array. Parámetros: 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 función. por ejemplo, [1,2].map(function(e){return e+1;}) => [2,3]. filter(function(elem){…}): filtra los elementos del array de acuerdo a la función Y otras funciones: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array
D. FUNCIÓN VECES(..) CON BUCLE WHILE En este ejemplo se implementa la función veces con un bucle while Es totalmente equivalente a la implementación anterior con el iterador forEach() La condición de permanencia en el bucle no es necesaria en el iterador porque esta implícita, El parámetro index de la función itera de 0 a array.length-1 La parámetro index de la función del iterador toma los mismos valores que el i ndice i del bucle El bloque de código de la función itera exactamente igual que el bloque de código del bucle
6.5. JAVASCRIPT: ÁMBITOS DE VISIBILIDAD Y CIERRES (CLOSURES) A. ÁMBITO Y DEFINICIONES LOCALES DE UNA FUNCIÓN Una función puede tener definiciones locales de variables y funciones. Estas son visibles solo dentro de la función. Las variables y funciones locales tienen visibilidad sintáctica, son visibles en todo el bloque de código de la función, incluso antes de definirse. OJO! Se recomienda definir variables y funciones al principio de la función.
65
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Las variables y funciones globales son visibles también dentro de la función. Siempre que no sean tapadas por otras locales del mismo nombre. Una definición 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. Además, una función es un objeto y puede devolverse como parámetro de otra función. La función exterior devuelve la función interior como parámetro. El operador paréntesis sobre la función exterior devuelve la función interior (su código). El operador paréntesis aplicado 2 veces en la función exterior, en cambio, invoca la función interior. La función interior tiene visibilidad sobre las variables exteriores s1 y s2, y puede concatenar s1+s2+s3 C. CIERRES O CLOSURES
Un cierre (closure): función que encapsula un conjunto de definiciones locales que solo son accesibles a través de una interfaz (función u objeto). La interfaz de un cierre con el exterior es el parámetro de retorno de la función. Suele ser un objeto JavaScript que da acceso a las variables y funciones locales. En este ejemplo la interfaz es la función contar() La función contar devuelve el valor de la variable contador y lo incrementa después.El cierre encapsula la variable contador y la función contar. Ninguna instrucción fuera del cierre puede modificar la variable contador, solo la función contar() La variable entero_unico contiene la invocación del cierre (enteroUnico ()) . Esta devuelve la función 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: INTRODUCCIÓN A LA LIBRERÍA JQUERY A. Librerías JavaScript: jQuery Las librerías JavaScript facilitan la programación multinavegador.Se diseñan 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 librería con la misma interfaz (API) jQuery 1.x (última versión 7-1-15: 1.11.3) 66
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Fue la primera y mantiene compatibilidad desde Explorer 6+ Esta optimizada para compatibilidad legacy y es más pesada que jQuery 2.x . jQuery 2.x (última versión 7-1-15: 2.1.4) Creada recientemente y mantiene compatibilidad desde Explorer 9+ Está optimizada para móviles y es mucho más ligera que jQuery 1.x B.
LA FUNCIÓN JQUERY Objeto jQuery: representación equivalente a un objeto DOM. Más eficaz de procesar, tanto de forma individual, como en bloque (array) Función jQuery: jQuery("") o $("")
Devuelve el objeto jQuery que casa con , Si no casa ninguno, devuelve null o undefined selecciona objetos DOM igual que CSS.
Además la función jQuery convierte objetos DOM y HTML a objetos jQuery
C. FECHA Y HORA CON JQUERY Una librería JavaScript externa se identifica por su URL: o <script type="text/javascript" src="jquery-2.1.4.min.js.js" > $("#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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT D. FUNCIÓN READY: ÁRBOL DOM CONSTRUIDO $(document).ready(function() { ..código.. )} Ejecuta el código (bloque) de la función cuando el árbol DOM está construido.Es decir, dicho bloque se ejecuta cuando ocurre el evento onload de Se recomienda utilizar la invocación abreviada: $(function() { ..código.. })
E. CACHE Y CDN (CONTENT DISTRIBUTION NETWORK) Cache: contiene recursos cargados anteriormente durante la navegación. 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 más rápido que bajarlo del servidor, especialmente de la del navegador. CDNs Web: utilizan el mismo URL (a Google, jQuery, …) en muchas páginas. Así se maximiza la probabilidad de que los recursos estén ya en la cache .
F. SELECTORES TIPO CSS DE JQUERY
68
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT G. MÉTODOS DE MANIPULACIÓN Los objetos jQuery se manipulan con métodos de la librería Más información en: http://api.jquery.com/category/manipulation/ Método 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!" Método html() $("#id3").html() devuelve el innerHTML del elemento con "#id3" Método append("Hello World!") $("#id3").append("Hello World!") añade "Hello World!" al innerHTML del elemento con id="id3" Método val() $("#id3").val("3") asigna el valor "3" al atributo value del elemento con id="id3" Método attr(, ) $(".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í! Método addClass() $("ul").addClass("visible") asigna el valor "visible" al atributo class de todos los elementos Una gran ventaja de jQuery es que puede hacer asignaciones e n bloque sin utilizar bucles como aquí! Los 4 modos de la función jQuery H. LOS 4 MODOS DE LA FUNCIÓN JQUERY Acceso a DOM: $("selector CSS") Devuelve un array con los objetos jQuery que casan con Programas más cortos, eficaces y multi-navegador que con JavaScript directamente Transformar HTML en jQuery: $("") 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 librerías basadas en DOM Esperar a DOM-construido: $(function(){..código..}) Ejecuta el código de la función cuando el árbol DOM está construido Equivalente a ejecutar el código 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT Un manejador (callback) de evento Es una función 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) También existe un método 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 función 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 función (objeto de la clase Función) Puede pasarse directamente como un literal de función con el código del manejador (como aquí), o cualquier otro objeto Function, como por ejemplo el nombre de una función definida en otro lugar. OJO! debe ser la función (su código) y no su invocación
70
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
D. EVENTOS EN JQUERY jQuery también permite definir eventos en objetos jQuery con el método on() objetoJQuery.on(evento, manejador) jQuery conserva métodos 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 métodos on(..) y off() son los mismos que los utilizados con el método addEventListener(..) se pueden ver en https://developer.mozilla.org/en-US/docs/Web/Events El manejador del evento es una función (objeto de la clase Función) ejecutado al ocurrir el evento Puede pasarse directamente como un literal de función con el código del manejador (como aquí) o cualquier otro objeto Function, como por ejemplo el nombre de una función definida en otro lugar OJO! debe ser el nombre de la función (su código) y no su invocación E. CALCULADORA JQUERY jQuery simplifica la calculadora Modificaciones Debemos importar la librería jQuery Definir eventos en función ready, con método on(..), con árbol DOM ya construido Obtener objetos jQuery con $(“#…”) Obtener texto de cajetín con val() Asignar texto en cajetín con val(texto)
71
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 6.8. EJERCICIO OBLIGATORIO A. Modificar la calculadora del ejemplo anterior para que realice todos sus accesos a elementos DOM y toda la gestión de eventos con las funciones de la librería jQuery. La calculadora debe mostrar al principio el título: “Buenos días, bienvenido a la calculadora de ” Integrar además en una sola calculadora los siguientes botones de operaciones matemáticas: 1) Operaciones unitarias (con un solo operando): 1.1) x^2 (número elevado al cuadrado) 1.2) 1/x (inverso del número) 1.3) sqrt(x) (raiz cuadrada del número) 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 número 2) 1.6) n! (factorial del número n: n*(n-1)*(n-2)*...*3*2*1) 2) Operaciones binarias (con dos operandos): 2.1) +. -. *, / (suma, resta, multiplicación y división) 2.2) x^y (x elevado a y) 3) Operaciones con n operandos introducidos en formato CSV: 3.1) sumatorio(x) (sumatorio de n números) 3.2) producto(x) (producto de n números) Subir dicha aplicación a la cuenta de neocities.org o de su eleccion
72
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 07 JQUERY UI. INTERACCIÓN CON USUARIO. BOOTSTRAP. DISEÑO ADAPTATIVO 7.1. OBJETOS JAVASCRIPT: NOTACIÓN ARRAY, PROPIEDADES DINÁMICAS, FOR/IN Y DOM A. OBJETOS Objeto Es una agregación de variables, denominadas propiedades Se suelen construir con el literal de objeto, o { propiedad_1:valor_1, …….., propiedad_n:valor_n } Notación punto objeto.propiedad o Accede propiedades por su nombre Notación array objeto["propiedad"] o Accede pasando el nombre como un string o Que puede estar en una variable Notación punto o array son equivalentes Propiedades inexistentes devuelven undefined Pero el operador punto (.) aplicado a undefined, provoca error de ejecución Los nombres de propiedades de un objeto, deben ser todos diferentes, tienen la misma sintaxis que las variables. a, _method, $1, una_piña, .… B. OBJETOS ANIDADOS: ÁRBOLES Los objetos pueden anidarse entre si. Los objetos anidados representan arboles La notación 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.año => Error_de_ejecución C. PROPIEDADES DINÁMICAS Las propiedades se pueden crear y destruir. Para ello se utilizan 3 sentencias Asignación 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
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 iteración un string con el nombre de una propiedad diferente de obj. El contenido de la propiedad debe ser accedido con la notación array: obj[p]
7.2. JAVASCRIPT: JQUERY UI A. LIBRERÍAS JQUERY UI jQuery UI enriquece jQuery Es muy eficaz soportando las interacciones de usuario más habituales. Transforma elementos HTML en elementos activos de interacción con el usuario. Soporta las interacciones más habituales: arrastrar, depositar, seleccionar, ordenar, .. La parte de interacción de usuario es la más utilizada Soporta también muchas animaciones y efectos También posee una galería de temas gráficos jQuery UI es muy popular (http://jqueryui.com) Facilita mucho el diseño de la interfaz con el usuario La versión actual (7-1-15) es jQuery 1.11 Se distribuye con licencia abierta (MIT License) La primera versión se publicó en septiembre de 2007 Tutorial: http://www.desarrolloweb.com/manuales/manual-jqueryui.html 74
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT B. INTERACCIONES DE JQUERY UI Los patrones de interacción 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 interacción Acordeón (Accordion): Expande un elemento de una lista. Autocompleción (Autocomplete): Completa palabras de una lista. Botón (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, ..) Además hay efectos, transiciones, temas y otros elementos (menos utilizados) C. EJEMPLO: PUZZLE
75
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 7.3. JAVASCRIPT: EVENTOS TÁCTILES A. EVENTOS TÁCTILES Telefonos y tabletas usan pantallas táctiles o Estos se manejan con toque (touch) y presionar (taphold) o La aplicaciones más avanzadas utilizan gestos (gestures): desplazamiento, pellizco, W3C ha normalizado eventos táctiles básicos o Están soportados en los navegadores, pero son muy primitivos, son o touchstart, touchmove, touchend B. LIBRERÍA JQUERY UI TOUCH PUNCH jQuery UI Touch Punch (última versión 7-1-15: 1.11.3) Añade soporte táctil a jQuery UI para adaptación a móviles y tabletas Coding libre con licencias MIT y GPLv2 Ver: https://github.com/furf/jquery-ui-touch-punch Transforma eventos de ratón a los equivalentes en pantalla táctil Permite arrastrar, ordenar, seleccionar o redimensionar como en el desktop Utilizando tocar (touch) en sustitución de clic y presionar (taphold) para arrastrar No soporta gestures: swipe, pinch, …. Desarrollada por Dave Furfero Información y código: https://github.com/furf
C. LIBRERÍAS PARA EVENTOS TÁCTILES jQuery mobile: librería desarrollada por la Fundación jQuery Para desarrollar aplicaciones táctiles, incluyendo móviles La versión actual (7-1-15) es jQuery mobile 1.4 Documentación y código: http://jquerymobile.com/ Soporta gestos y eventos táctiles (gestures) Pero no es compatible con jQuery UI El soporte a gestos y eventos táctiles en JavaScript No esta todavía maduro, hay otras librerías interesantes, como interact.js, kendo.ui, lungo.js, zepto.js,… 76
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
7.4. EJEMPLO: TANGRAM Tangram muestra una lista de figuras geométricas, que se pueden arrastrar y rotar Los trozos son figuras geométricas Creadas con SVG (Scalable Vector Graphics), en ficheros independientes. SVG es una extensión de html para gráficos Los trozos de la imagen pueden arrastrarse en el navegador. Se implementa con la interacción draggable o https://jqueryui.com/draggable/ Girarse haciendo click con el ratón. Se giran con CSS en el manejador del evento click.
77
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 8 PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS, TIPOS. 8.1. JAVASCRIPT: ALGUNOS MÉTODOS DE ARRAY A. MÉTODOS DE ARRAY: ARRAY HEREDA MÉTODOS 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) añade e1, ..,en al final del array, devuelve el tamaño del array (a.length) pop(), devuelve el último elemento, eliminadolo del array B. MÁS MÉTODOS join(): devuelve string uniendo elementos.introduce 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 aplicación ilustra splice(..) para borrar las citas existentes push(..) para añadir nuevas citas al fina
78
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 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 título y el director de pe lículas favoritas.
Un array define una colección 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 películas 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 página selecciona una frase diferente
8.3. ACTIVIDAD. EJERCICIO PRÁCTICO Completar el ejemplo de citas editable añadiendo los manejadores de los eventos de edición del contenido de una cita existente o de borrado de dicha cita.
79
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 09 LOCALSTORAGE, IFRAMES, ORIGIN POLICY Y JSON 9.1 EJEMPLO DE UN CRONÓMETRO A. CRONÓMETRO WebApp similar a un cronómetro digital Cuenta décimas 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 cronómetro parado o para si cronómetro 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 funcionarán igual, http://zeptojs.com/
B. DOM COMO ALMACÉN DE DATOS El navegador guarda en document la página HTML que está mostrando, document es un objeto JavaScript con propiedades, que contienen todos los elementos de la página Las propiedades DOM son variables: src, value, innerHTML, etc, donde la información 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 , para almacenar el contador de decimas de segundo
9.2. MEMORIA LOCAL EN HTML5 A. Almacenamiento de datos en cliente 80
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 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 sesión. Los datos solo se guardan solo durante la sesión o Comienzo de sesión: apertura de navegador o pestaña o Final de sesión: cierre de navegador o pestaña B. Variables locales y de sesión
Son propiedades de los objetos localStorage y sessionStorage, solo pueden contener strings, como por ejemplo localStorage.usuario = “Pedro Pérez”; sessionStorage.apellido = “Pérez”; Las variables locales están 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 página tendrá una cuenta diferente. La variable está en su navegador
Cronómetro con memoria Nueva versión del cronómetro con localStorage, así mantiene la cuenta de décimas de segundos entre usos sucesivos de la aplicación El cronómetro utiliza ahora la variable localStorage.c para guardar la cuenta de segundos Debemos inicializar localStorage.c con parámetro por defecto para cuando se ejecute por primera vez Como la información se guarda ahora en localStorage y no en DOM. hay que actualizar primero localStorage y luego mostrar en DOM
81
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
82
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 10 INTRODUCCIÓN A GRÁFICOS Y ANIMACIONES SVG. GEOLOCALIZACIÓN 10.1. GEOLOCALIZACIÓN EN HTML5 A. GEOLOCALIZACIÓN Y SENSORES HTML5 puede soportar geolocalización, En todo tipo de clientes: PCs, móviles tabletas.. El interfaz de geolocaclización, da acceso tambien a otros sensores: Brujula, acelerometro, ..... B. GEOLOCALIZACIÓN La geolocalización se realiza siguiendo jerarquia de consultas o GPS -> antena WIFI -> antena GSM o 3G -> IP fija -> .Se devuelve la respuesta más precisa La geolocalización está accesible en del objeto navigator.geolocation, con método getCurrentPosition(successFunction, errorFunction) o Permite conocer o Latitud y longitud en formato decimal o Altitud y precisión de la altitud o Dirección 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! Geolocalización puede no funcionar por restricciones de seguridad Usar el navegador Firefox para probar los ejemplos geolocalizados en local
83
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT 10.2. APLICACIÓN HTML5 GEOLOCALIZADA EN GOOGLE MAPS A. Geolocalización con gmaps.js Aplicacion de geolocalización. Carga un mapa centrado en nuestra posición que se indica con un marcador Usamos librería gmaps.js para acceso a Google Maps, librería muy potente y sencilla de utilizar http://hpneo.github.io/gmaps/. La librería de Google es bastante mas compleja Se añade al mapa un manejador de eventos click/tap, que calcula la ruta hasta el punto indicado.
84
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
10.3. HTML5 SVG: SCALABLE VECTOR A. GRAPHICS SVG: Scalable Vector Graphics. Formato de representación de gráficos vectoriales. Pueden cambiar de tamaño 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 gráficos vectoriales Las imágenes GIT, JPEG o PNG no reescalan bien porque tienen una resolución determinada Esta WebApp tiene 2 botones: “+” y “-” Cada vez que pulsamos uno de estos botones el tamaño de la imagen debe aumentar o disminuir un 10% según pulsemos “+” y “-”
C. EJEMPO “RELOJ SVG” “Reloj SVG” genera un reloj sencillo con SVG El reloj se compone de Un círculo negro, Tres lineas para las manecillas del reloj 85
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT SVG puede animarse con JavaScript, modificando la representación DOM del reloj. Versión 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 añade estilo CSS. Mejora el aspecto y adapta al tamaño 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
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
E. RELOJES CON “ESTILO” Usando CSS e imágenes se pueden diseñar. Las capturas muestran pequeños cambios de diseño que cambian muy significativamente la apariencia del reloj
87
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
LECCION N° 11 EMPAQUETAR APLICACIONES WEB PARA ANDROID, IOS O FIREFOXOS. 11.1. EJECUCIÓN DE APLICACIONES WEB (HTML/JS/CSS) EN DISPOSICVOS MÓVILES A. OBJETIVO Visualizar nuestras aplicaciones Web desarrolladas con HTML5/JS/CSS3 en disposiCvos móviles. – 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 móvil 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 móvil, que permite visualizar y probar la aplicación anterior D. INSTALACIÓN 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 ejecución Con PhoneGap Desktop haremos “visible” la aplicación web, de forma que el cliente móvil pueda ejecutarla en el disposiCvo deseado
E. INSTALACIÓN PHONEGAP DEVEL. APP http://docs.phonegap.com/ge`ng-started/2-install-mobile-app/ Se ejecuta en el disposiCvo móvil – permite visualizar y probar la aplicación Desarrollada sin necesidad de instalar entornos de compilación/desarrollo naCvos de Android, iOS, etc. – Localizar en iTunes, Google Play o Windows Phone Store
88
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT F. PRIMER PROYECTO (I)
G. PRIMER PROYECTO (II)
H. PRIMER PROYECTO (III)
I.
PRIMER PROYECTO (IV)
89
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT J.
PRIMER PROYECTO (V)
K. PRIMER PROYECTO VI
90
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT L. ESTRUCTURA DEL PRIMER PROYECTO
M. CRONÓMETRO SEGUNDERO
91
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
92
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT N. Proyecto PhoneGap • Vamos a realizar un proyecto PhoneGap con el ejemplo visto • Creamos un nuevo proyecto, de nombre Cronometro – opcionalmente, añadimos el ID “org.mooc.crono”
• Tenemos un nuevo proyecto añadido – hay que modificar el código • Pinchamos en “Local path” para obtener el folder que contiene el proyecto – y luego nos situamos en el directorio “www”
Ficheros Cronómetro Segundero 93
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT • Copiamos el código del Cronómetro
Apariencia Cronómetro Segundero
11.2. ACTIVIDAD GENERAL DE UNIDAD Crear una página web con temática 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 imágenes de la ciudad de requena (para el fondo, para el puzle en JavaScript, etc.) 3. Dar algún 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 página. 6. Utilizar código JavaScript para la fecha y hora de la página. 7. Su página debe contener al menos dos de los siguientes actividades: (Calculadora, ecuaciones matemática, cronometro, puzzle, carrusel) 8. Subir dicha aplicación a la cuenta de Neocities.org o de su elección. 94
LENGUAJE DE PROGRAMCION IV: HTML 5, CSS3 Y JAVASCRIPT
FICHA DE AUTOEVALUACIÓN IV.
DATOS INFORMÁTICOS: Área ______________________________________________________________________ Forma dora ______________________________________________________________________ Grupo ______________________________________________________________________ Tema ______________________________________________________________________ Semestre _____________________ Secci ón _____________ Fecha ______/______/ 2016
V.
ALUMNO(A)
VI.
CRITERIO DE DESEMPEÑO 1.1.3. T oma decisiones y resuelve problemas con autonomía, asertividad, empatía 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 pedagógicos asumiendo respeto por las ideas vertidas en las T IC. 3.1.4. Actúa bajo principios de convivencia democrática, buscando el bienestar colectivo.
IV.
CRITERIOS DE EVALUACIÓN INDICADORES
1
2
ESCALA 3 4
5
Total
Demuestra compromiso y autodisciplina en la elaboración de su producto final Busco información adicional y participó activamente en la elaboración de su trabajo Me expreso con claridad, coherencia y fluidez, demostrando preparación y dominio del tema Asume con responsabilidad las tareas y prácticas asignadas para las pract icas con JavaScript Demuestra una actitud crítica 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, cooperación 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