PEC 1. Hello World (en Vue PDF

Preview

Summary

PEC 1...

Description

Programación Web Avanzada PEC 1: Hello World! (en Vue.js) Presentación En esta primera PEC se abordarán conceptos básicos de JavaScript como Asincronía, DOM y los principios básicos de funcionamiento de Vue.js. Para ello usaremos el entorno de desarrollo creado previamente por lo que es necesario realizar la PEC 0 previamente.

Competencias En esta PEC se desarrollan las siguientes competencias del Grado: ● ● ●

CE5. Capacidad para adaptarse a las tecnologías y a los futuros entornos actualizando las competencias profesionales. CE13. Capacidad para usar de forma apropiada los lenguajes de programación y las herramientas de desarrollo para el análisis, diseño e implementación de aplicaciones. CE15. Capacidad para implementar, poner en marcha y mantener software y hardware multimedia.

Objetivos Los Objetivos concretos de esta PEC son: ● ● ●

Conocer conceptos básicos de asincronía en JavaScript Poner en práctica conceptos básicos de JavaScript Familiarizarse con el funcionamiento de Vue.js

Recursos de lectura Programación Web y AJAX: ● Módulo 1. Introducción a la programación web avanzada ● Módulo 2. Introducción a AJAX Vue docs: ● La instancia Vue: h  ttps://es.vuejs.org/v2/guide/instance.html ● Sintaxis de template: https://es.vuejs.org/v2/guide/syntax.html ● Conceptos básicos de componentes: https://es.vuejs.org/v2/guide/components.html Vue CLI: ● https://cli.vuejs.org/guide/installation.html Olga Filipova: Capítulo 2 - Fundamentals ● MVVM architectural pattern ● DefineProperty, getters, and setters ● Vue.js fundamentals

Programación Web Avanzada · PEC 1 Estudios de Informática, Multimedia y Telecomunicaciones

2021

pág 1

●

Installing, using, and debugging a Vue.js application: vue-cli

Formato de entrega A través del campus deberéis entregar un único fichero PDF con las respuestas a las preguntas realizadas. El documento deberá contar como mínimo con el nombre del alumno en el encabezado.

Puntuación ● ●

La puntuación de cada ejercicio está detallada en su enunciado, sobre un total de 10 puntos. Se valorará la concreción y la precisión de las respuestas por encima de la extensión. No es necesario grandes explicaciones en ninguna pregunta. Con una descripción somera destacando los puntos claves de cada respuesta es suficiente.

Consultas En caso de que tengáis que consultar algo mediante el foro o por correo electrónico, copiad vuestro código a una plataforma online y enviad el link para evitar problemas con el correo de la UOC (ya que elimina los ficheros .js y .vue para evitar inyectar código malicioso así como la indentación del código). Os recomendamos utilizar cualquiera de estas dos opciones: ● ●

Codepen (para sencillos snippets de código) CodeSandBox (para ejercicios más complejos)

Nota: En caso de publicar algún código en el foro, deberán ser consultas genéricas y no directamente soluciones a los ejercicios. Hacer accesible soluciones de ejercicios a otros compañeros, aunque pueda no tener una intención directa, se considerará copia y se penalizará académicamente a nivel de asignatura.

Propiedad intelectual y plagio La Normativa académica de la UOC dispone que el proceso de evaluación se cimenta en el trabajo personal del estudiante y presupone la autenticidad de la autoría y la originalidad de los ejercicios realizados. La ausencia de originalidad en la autoría o el mal uso de las condiciones en las que se realiza la evaluación de la asignatura, es una infracción que puede tener consecuencias académicas graves. El estudiante será calificado con un suspenso (D/0) si se detecta falta de originalidad en la autoría de alguna prueba de evaluación contínua (PEC) o final (PEF), sea porque haya utilizado material o dispositivos no autorizados, sea porque ha copiado textualmente de internet, o ha copiado apuntes, de PEC, de materiales, manuales o artículos (sin la cita correspondiente) o de otro estudiante, o por cualquier otra conducta irregular.

Programación Web Avanzada · PEC 1 Estudios de Informática, Multimedia y Telecomunicaciones

2021

pág 2

Cuestiones Ejercicio 1. (1 punto) ¿Qué es AJAX?

Ejercicio 2. (0.5 puntos) ¿Qué ventajas ofrece AJAX respecto a modelos anteriores de programación web?

Ejercicio 3. (0.5 puntos) Identifica los parámetros, el tipo de petición, el esquema y la url completa que fue ejecutada de la siguiente petición HTTP: :method: GET :scheme: https :authority: www.google.es :path: /complete/search?q=casa&cp=0&client=desktop-gws-wiz-on-focus-serp&xssi=t&gs_ri=g ws-wiz&hl=es&authuser=0&pq=casa&psi=fa8nYPjfCMKh1fAPwJekoAo.1613213566267&sugexp =foo%2Conf%3D1&dpr=1 Cookie: CGIC=Ij90ZXh0L2h0bWwsYXBwbGljYXRpb24veGh0bWwreG1sLGFwcGxpY2F0aW9uL3htbDtxPTAuOSw qLyo7cT0wLjg; NID=209=uEFnhUF1fYSMU95g_hJHHAf7gxagEhUM2ACDGXGzFXwEi6VEvFSZPOb4TSyDMymn0W4d5dD6 XsoJz371Slr5ib2AagdEYPhBuOJNHKhJCTdA7fgeCz5gXZwWRmLkE-EMLWXMCqD-6toE_JbwK1vN2zRV FoZzcVTpbNteBo7bYPY; 1P_JAR=2021-2-13-10; OTZ=5848492_52_52_123900_48_436380; CONSENT=PENDING+855 Accept: */* Accept-Encoding: gzip, deflate, br Host: www.google.es User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Safari/605.1.15 Accept-Language: en-us Referer: Connection: keep-alive

Ejercicio 4. (0.5 puntos) ¿Qué caracteriza a los códigos de respuesta de tipo 5xx? ¿Y los 2xx?

Programación Web Avanzada · PEC 1 Estudios de Informática, Multimedia y Telecomunicaciones

2021

pág 3

Ejercicio 5. (0.5 puntos) ¿Describe brevemente qué es el DOM y cuál es su relación con AJAX?

Ejercicio 6. (1 punto) Enuncia y describe brevemente los tipos de ámbitos puede tener una variable en JavaScript.

Ejercicio 7. (2 puntos) ¿Cuál es la salida de los siguientes códigos Javascript? ¿Por qué? for (var i = 0  ; i < 3  ; i++) { setTimeout(() => c  onsole.log(i), 1); } for (let i = 0  ; i < 3  ; i++) { setTimeout(() => c  onsole.log(i), 1); } A. 0 1 2 y 0 1 2 B. 0 1 2 y 3 3 3 C. 3 3 3 y 0 1 2 console.log(3 + 4 + '  5'); A. B. C. D.

"345" "75" 12 "12"

console.  log(Number(2  ) === Number(2)  ); console.  log(Boolean(false) === Boolean(false)); console.  log(Symbol('  foo') === Symbol  ('foo')); A. B. C. D.

true, true, false false, true, false true, false, true true, true, true

Ejercicio 8 (1.5 puntos) Atendiendo al contenido del fichero HelloWorld.vue  , -

¿Cuál es el valor de {{ msg }}? ¿Por qué?

Programación Web Avanzada · PEC 1 Estudios de Informática, Multimedia y Telecomunicaciones

2021

pág 4

-

¿De qué tipo es ese parámetro? ¿Por qué?

Ejercicio 9 (1 punto) ¿Qué significa el modificador scoped  de la declaración de estilos en el fichero HelloWorld.vue  ? 

Ejercicio 10 (1 punto) -

¿Cuál sería el procedimiento necesario para añadir un nuevo componente al fichero App.vue? Enumera y describe los pasos. ¿Qué comando es necesario ejecutar en la consola para ejecutar el entorno de desarrollo? ¿Qué comando es necesario ejecutar en la consola para generar una versión de la aplicación lista para desplegar en producción?

Ejercicio 11 (0.5 puntos) Adjunta una captura de pantalla de la aplicación de Vue en ejecución

Programación Web Avanzada · PEC 1 Estudios de Informática, Multimedia y Telecomunicaciones

2021

pág 5...