Curso de Javascript 2019

Curso de 180 horas presencial sobre integración de componentes de programario en páginas web.

Curso en Jaume Viladoms

Logo de Javascript

Calendario

lunmarmiéjueviesábdom
1218192021222324marzo 2019
1325262728293031
141234567abril 2019
15891011121314
1722232425262728
18293012345mayo 2019
196789101112
2120212223242526
22272829303112junio 2019
233456789
2410111213141516
2517181920212223
2624252627282930
271234567julio 2019

Módulos y unidades

MF0951_2Integració de components de programari a pàgines web180 h
UF1305Programació amb llenguatges script a pàgines web90 h
UF1306Proves de les funcionalitats i optimització de págines web90 h

Clases UF_1305 — Programació amb llenguatges script a pàgines web

Día 1Jueves 21 marzo

  • 01_introduccion.md — Cliente y servidor web
  • 02_javascript.md — ¿Dónde va el Javascript?
  • 03_editores.md — Editores de código fuente
  • 04_html.md — Entidades HTML
  • index.html — Ejercicios en clase
    • Mensajes: alert(), console.log(), document.write(), literales entre comillas
    • Eventos: onclick
    • Tomar una decisión: confirm(), true|false, if, else, comparación ==
    • Variables: var, asignación,

Día 2Jueves 28 marzo

  • repaso.html — Declarar variables y mostrarlas. Condicional if else. Uso de alert() y confirm()
  • ejercicio01.html — Declarar variables y hacer un condicional. Uso de document.write()
  • eventos.html — Variables referidas a etiquetas: getElementById, onclick y innerHTML
  • ejercicio02.html — Botones para asignar y leer la variable resultado
  • variables.html — Uso de variables para realizar condicionales anidados

Día 3Viernes 29 marzo

Día 4Jueves 4 abril

Día 5Martes 9 abril

Día 6Jueves 11 abril

Día 7Viernes 12 abril

Día 8Martes 23 abril — Sant Jordi

Día 9Jueves 25 abril

  • tipos.md — Deducir el tipo de datos de las variables
  • datos.md — Arrays bidimensionales y datos tipo tabla
  • datos2.md — Agenda de contactos (array de objects)
  • datos3.md — Nombre y puntos de las piezas de ajedrez por su código (object de objects)
  • json.md — Tipos de datos JSON
  • clase.json — Posición de los alumnos en clase
  • tablero.json — Posición de las piezas de ajedrez en el tablero
  • libros.json — Colección de libros
  • agenda.json — Contactos con teléfonos y correo
  • piezas.json — Piezas del ajedrez

Día 10Viernes 26 abril

Día 11Lunes 29 abril

Día 12Martes 30 abril

Día 13Jueves 2 mayo

Día 14Lunes 6 mayo

Día 15Martes 7 mayo

  • faq.md — Crear una lista FAQ con mostrar y ocultar
  • faq.html — Estructura HTML
  • faq.css — Estilos CSS
  • faq.js — Comportamiento JS: Uso del parámetro event y parentElement
  • faq — Ejecución de la página
  • enlace.html — El enlace Javascript prevalece sobre href
  • enlace2.html — Sin usar el onclick de la etiqueta

Día 16Viernes 10 mayo

Día 17Lunes 20 mayo

  • Realización de la prueba teórica y práctica
  • apuntes.md — Enlace al PDF con el contenido de las clases
  • insert_before.html — Ejercicio sobre reordenar una lista

Día 18Viernes 24 mayo

Clases UF1306 — Proves de les funcionalitats i optimització de págines web

Día 19Lunes 27 mayo

Dia 20Lunes 3 junio

Día 21Viernes 7 junio

  • eei.md — Estación Espacial Internacional en el mapa de la Tierra
    • eei1HTML — Obtener y procesar el JSON
    • eei2HTML — Mostrar en el mapa
    • eei3HTML — Actualización automática
  • object.md — El tipo object y variables de propiedades
  • popup.md — Mostrar una ventana emergente
    • popup1HTML — Código HTML y CSS sin Javascript
    • popup2HTML — Crear los botones y la función popup
    • popup3HTML | CSS | JS — Separar CSS y Javascript en archivos
    • popup4HTML | CSS | JS — Añadir automáticamente el botón de cerrar popup
    • popup5HTML | CSS | JS — Mostrar varios popup diferentes

Día 22Lunes 10 junio

Día 23Jueves 13 junio

Día 24Lunes 17 junio

  • excepciones.md — Control de errores con try…catch
  • ventana.md — Abrir enlaces con Javascript: historial, ventanas y marcos en línea
  • etiquetas.md — Creación de etiquetas y su insercción en el DOM
    • parrafos | HTML — Insertar 3 párrafos nuevos al picar el botón
    • tabla1 | HTML — Es desaconsejable crear una única función mastodóntica.
    • tabla | HTML — Es mucho mejor crear muchas funciones pequeñas y manejables

Día 25Martes 18 junio

  • Acabar el ejercicio tabla del día anterior
    • Dibujar las dependencias de las funciones
    • Desarrollar una tarea cotidiana entrando en detalles cada vez más finos
  • rango.md — Uso del input de tipo rango
    • rango | HTML — Actualizar etiqueta al cambiar rango
    • rango2 | HTML — El mismo código para varios rangos
    • rango3 | HTML — Seleccionar un color RGB
  • ejercicio.md — Mover una imagen

Día 26Jueves 20 junio

Día 27Viernes 21 junio

  • controles2.md — Continuación de los controles del día anterior
    • casilla | HTML — Casillas de verificación para poner negrita, cursiva, subrayado y mayúsculas
    • casilla2 | HTML — Los mismo cambiando los condicionales por el operador ternario
    • circulito | HTML — Botones radio para cambiar color, fondo y tamaño de letra
    • circulito2 | HTML — Lo mismo codificando sólo el click del contenedor
  • quiz.md — Preguntas con respuestas para crear un cuestionario
    • quiz.json — Preguntas pasadas a formato JSON
    • quiz.js — Convertir JSON en un archivo JS con la variable datos
    • quiz.css — Estilos para numerar las preguntas y respuestas
    • quiz1 | HTML — Carga del archivo JSON
    • quiz2 | HTML — Carga del archivo JS
    • quiz3 | HTML — Mostrar las preguntas
    • quiz4 | HTML — Mostrar las respuestas
    • quiz5 | HTML — Mostrar los INPUT RADIO
    • quiz6 | HTML — Ajustar los INPUT y agrupar cada pregunta con sus respuestas en un ARTICLE
    • quiz7 | HTML — Botón de calcular el número de aciertos

Día 28Martes 25 junio

Día 29Miércoles 26 junio

Día 30Jueves 27 junio

Día 31Viernes 28 junio — 41ºC

Día 32Lunes 1 julio

Día 33Martes 2 julio

  • Realización de la prueba teórica y práctica

Día 34Miércoles 3 julio

  • repaso.md — Funciones, parámetros, variables locales y globales
  • animación | HTML — Un personaje que está cayendo todo el tiempo
  • formulario | HTML — Adivinar el robot y su poder

Día 35Jueves 4 julio

  • Realización de la prueba final teórica y práctica

Día 36Viernes 5 julio

  • teclado.md — Apuntes sobre eventos de teclado
  • teclado | HTML — Cambiar el color de fondo de la página al pulsar letras en el teclado
  • teclado2 | HTML — Validar entradas de texto con teclado: CP, DNI, etc.
  • teclado3 | HTML — Mover y girar un personaje usando las teclas de dirección

Documentación

Recursos

Enlaces

Alumnos

Montserrat
Antonio
CristinaNuriaAgustí
XaviMartaSergi
ChristianVíctorJesús

Comentarios

  1. 1 Antonio 2019-06-28 Hace un mes
    Dos URLs de colores. Es una facilidad para realizar consultas rápidas al respecto:
    mclibre.org
    cerotec.net

    Solución a la muy común disyuntiva posicional de las etiquetas ‘section’ y ‘article’:
    espai.es

    URLs de algunos modelos de texturas:
    toptal.com
    leaverou.github.io
    dinpattern.com
    colourlovers.com

    ¡Menús a la idea! Para usarlos o personalizarlos al gusto. 😊
    creativosonline.org

    Imágenes libres de copyright. Pueden usarse sin requisitos legales. Son del Universo, en este caso, pero el sitio ofrece de otras áreas también.
    pixabay.com

    Una muy útil herramienta para generar sombras y obtener el código, que podemos incluir en nuestros sitios:
    cssmatic.com

    ¿Necesitamos iconos? Aquí, unos cuantos:
    icon-icons.com

    Tipos de fuentes "seguras" para la Web, es decir, aquellas que podrán verse igual, en la mayoría de los navegadores:
    elwebmaster.com

    Tablas de códigos HTML:
    ascii.cl

    Interesante recopilación con sus explicaciones, de algunos hostings gratuitos para este 2019:
    hostingexperto.es
  2. 2 Víctor 2019-06-28 Hace un mes
    Para exprimirse el coco con JS, a modo de katas, subiendo de nivel (kyu) y con kumite(combate):

    Train with Programming Challenges/Kata | Codewars
    codewars.com
  3. 3 Francisco 2019-06-28 Hace un mes
    How To Add Google Translate Button On Your Webpage? geeksforgeeks.org

    ¿Cómo conseguir un dominio gratis? gianoliveira.com
  4. 4 Víctor 2019-07-05 Hace un mes
    Recomendaciones de libros de Javascript

    -Javascript, The definitive guide, por David Flanagan (ISBN-10: 0596805527).

    -Eloquent Javascript, por Marijn Haverbeke, (gratuíto online)
  5. 5 Antonio 2019-07-17 Hace un mes
    Testeadores para una correcta sintaxis de nuestros códigos:

    HTML: validator.w3.org
    CSS: validator.w3.org
    Javascript: www.piliapp.com
Proinf.net, ©2003-2019 ci 3.1.10 (CC) Esta obra está bajo una licencia de Creative Commons Este software está sujeto a la CC-GNU GPL