Tutorial Javascript

Aprende JS paso a paso y gratis. Apuntes de alumno

En este tutorial Javascript encontrarás los resúmenes de clase de la asignatura de JS del curso de confección y publicación de páginas web IFCD0110. Los apuntes están pensados para un nivel inicial. Úsalos a modo de repaso de los conocimientos adquiridos en clase. Si estás estudiando en fuentes alternativas pueden ser un buen complemento para tu aprendizaje.

Tabla de contenidos

Javascript es un lenguaje de script apasionante que nos permite dotar una página web  de dinamismo. Es una gran herramienta para introducirse en el mundo de la programación. Aprender JS te ayudará a romper el hielo.

  1. Primero aprenderás la sintaxis y el vocabulario del lenguaje.
  2. A continuación te familiarizarás con el código y la lógica de programación.
  3. Más adelante interactuarás con el DOM y el BOM.
  4. Te darás cuenta que ya puedes empezar a utilizar lo aprendido mezclándolo con CSS y será el momento de crear animaciones con JS y darte cuenta que en algunas ocasiones será interesante el CSS3 y en otras es mejor programarlo en JS.
  5. Y entonces… ya tendrás un nivel básico que te permitirá decidir si ya sabes lo mínimo para hacer páginas web o si necesitas profundizar porqué te gusta y has decidido que te quieres convertir en programador web. Si este fuera el caso recuerda que este es un tutorial para principiantes.

Sé paciente y no tires la toalla antes de tiempo. Lo bonito de javascript es que cuando le pillas el tranquillo después quieres más. Vas a necesitar equivocarte y saber manejar la frustración. Pero con un poco de esfuerzo recogerás frutos y merecerá la pena.

¡Deseo que este tutorial gratuito sobre Javascript os sea de utilidad!

Índice de contenidos de la guía

  1. La apasionante historia del javascript resumida
  2. ¿Qué es un programa?. Nuestro primer programa
  3. Comentarios
  4. Concepto de acoplamiento en Javascript
  5. Instrucciones básicas para empezar a familiarizarse con Javascript. Window.alert(), Window.prompt(), console.log(), document.write()
  6. La etiqueta noscript
  7. Variables. Sintaxis básica.
  8. ¿Qué nombre debo poner a mis variables?
  9. Como saber dónde falla tu script cuando no encuentras el error.
  10. Mostrar mensajes por la consola del navegador
  11. Palabras reservadas que no se deben usar para declarar variables
  12. Operaciones y tipo de variables: numéricas, texto, booleanos, listas, objetos
  13. Funciones
  14. Scope de las variables en Javacript
  15. Métodos para arrays, números y strings
  16. Métodos imprescindibles para trabajar con fechas
  17. Cómo escapar carácteres en Javascript
  18. Ejemplo de constructor
  19. Instrucciones iterativas y condicionales.
  20. Diferencias y similitudes entre while y for
  21. Ejemplos explicados paso a paso de la instrucción for.
  22. Ejemplos explicados paso a paso de la instrucción while.
  1. Ejemplos explicados paso a paso de la instrucción if.
  2. Ejemplos explicados paso a paso de la instrucción switch. ¿Qué error no debes cometer?
  3. Resumen de carácteres extraños {},, (), :, ;, ,
  4. El Document Object Model (DOM). ¿Qué es?
  5. Como llamar/identificar a los nodos de un documento web.
  6. Acceder y modificar los nodos de javascript
  7. Insertar nuevos nodos en un documento web
  8. Eliminación de nodos en un documento web.
  9. Sustituir nodos en un documento web
  10. Introducción a las animaciones en Javascript: setInterval, clearInterval, setTimeout
  11. Introducción a los eventos Javascript
  12. Ejemplo de como crear una galería de imágenes de producto
  13. Eliminar eventos Javascript .removeEventListener()
  14. Insertar y eliminar sonido en una página web
  15. Eliminar el comportamiento por defecto de un elemento html con .preventDefault()
  16. Validación de formularios web. Desactivar el envío de un formulario.
  17. Formulario que se envía automáticamente al rellenar los campos
  18. Instrucción this de javascript explicada paso a paso
  19. Validar formularios con try catch throw finally
  20. Crear, modificar, eliminar y detectar cookies con Javascript.
  21. Examen test nivel básico

Otros contenidos sobre JS del blog

  1. Javascript no es difícil. Lo es el problema a resolver
  2. La importancia de usar correctamente la tecla tabulador.
  3. Las prisas nunca son buenas para aprender a programar
  4. Factores que afectan al tiempo de carga de una página web
  5. Embellecer tu javascript o comprimirlo
  6. Función que crea un color aleatorio RGB o Hexadecimal
  7. Calcular el width y el height disponible en pantalla con onresize()
  8. Programa que activa un enlace web pasados unos segundos

Ejercicios Javascript

La siguiente colección de ejercicios y prácticas está ordenada siguiendo el orden de conceptos de este tutorial. Todos los ejercicios están concebidos para usar javascript puro.

  1. Ejercicio 1 – Acoplamiento de un script.
  2. Ejercicio 2 – Corrige los errores. console, window, document
  3. Ejercicio 3 – Corrige los errores de sintaxis. Instrucciones básicas
  4. Ejercicio 4 – ¿Qué declaraciones de variables son erróneas?
  5. Ejercicio 5 – ¿Declaración errónea o correcta? Versión difícil.
  6. Ejercicio 6 – Escribir un mensaje guardado en una variable.
  7. Ejercicio 7 – Ejercicio sobre arrays, arreglos, listas, vectores o como le quieras llamar
  8. Ejercicio 8 – Corrige los errores de sintaxis en un objeto
  9. Ejercicio 9 – Cálculo del perímetro de un rectángulo mediante funciones
  10. Ejercicio 10 – Corrige los errores de sintaxis en unas funciones.
  11. Ejercicio 11 – Sumas con letras.
  12. Ejercicio 12- Diferencia entre x++ y ++x
  13. Ejercicio 13 – Uso de length y acceso a las posiciones de un array.
  14. Ejercicio 14 – Generación de fechas personalizadas.
  15. Ejercicio 15 – ¿Qué hora es? Programación de un reloj muy sencillo
  16. Ejercicio 16 – Programación de una ventana emergente cansina.
  17. Ejercicio 17 – Generación de encabezados html iterativamente
  18. Ejercicio 18 – Diccionario idioma A – idioma B con if y con for
  19. Ejercicio 19 – Traducir un programa resuelto con if a switch
  20. Ejercicio 20 – Función que escribe una tabla de multiplicar
  21. Ejercicio 21 – Programa que escribe las tablas de multiplicar del 1 al número indicado.
  22. Ejercicio 22 – Dibujar una escalera de 10 peldaños.
  23. Ejercicio 23 – Vamos a dormir. Hay 100 ovejas que contar.
  24. Ejercicio 24 – Hay 10 botellas sobre la pared
  25. Ejercicio 25 – Una masca valaba par las fascas
  26. Ejercicio 26 – ¿Estamos en fin de semana?
  27. Ejercicio 27 – ¿Qué día de la semana es hoy?
  28. Ejercicio 26. – Generación de un dado de 6 caras.
  29. Ejercicio 27 – Generador de contraseñas aleatorias de n caracteres
  30. Ejercicio 28. – Ejercicios sobre condicionales
  31. Ejercicio 29. – Contar vocales en un texto.
  32. Ejercicio 30. – El juego del ahorcado numérico.
  1. Ejercicio 31 – Análisis de un documento web mediante llamadas al DOM.
  2. Ejercicio 32 – Crear, modificar y eliminar párrafos en una página web.
  3. Ejercicio 33 –  Escribir el nombre y apellidos de un usuario en el documento web dentro de una caja html.
  4. Ejercicio 34. Introducir una imagen aleatoria en un documento web al hacer clic en un botón.
  5. Ejercicio 35. Limpiar el html de JS en línea. Asignación de eventos.
  6. Ejercicio 36. Asignación de un saludo auténtico. Asignación de eventos y repaso de crear y eliminar nodos.
  7. Ejercicio 37. Modificar el destino de todos los enlaces de un documento web con javascript puro.
  8. Ejercicio 38. Anular el comportamiento por defecto de todos los enlaces de un documento web con javascript puro.
  9. Ejercicio 39. La lista de recordatorios. Crear y borrar nodos.
  10. Ejercicio 40. El Pokemon corredor.
  11. Ejercicio 41. Programación de un slider sin librerías externas.
  12. Ejercicio 42. Burbujas con frases motivacionales aleatorias.
  13. Ejercicio 43. Programación de un susto emergente.
  14. Ejercicio 44. ¡Música maestro!
  15. Ejercicio 45. Cronómetro.
  16. Ejercicio 46. Salvapantallas de imágenes aleatorias.
  17. Ejercicio 47. Formulario con campos ocultos (compatible con wordpress)
  18. Ejercicio 48. Ventana emergente de control de edad.
  19. Ejercicio 49. Menú vertical con submenú activado por javascript (sin jQuery)
  20. Ejercicio 50. Lista de la compra
  21. Ejercicio 51. Lista de la compra perfeccionada con cookies.
  22. Ejercicio 52. Control de edad a una página web con ventana emergente y recordatorio de usuario mediante cookies.
  23. Ejercicio 53. Venta emergente aviso ley de cookies.
  24. Ejercicio 54. Coche que acelera o frena.
  25. Ejercicio 55. Contenidos según cookies.
  26. Ejercicio 56. El caso del cajetín que cambia de lugar y no se puede cerrar.
  27. Ejercicio 57. Depuración de errores JS.
  28. Examen test nivel básico

Últimos contenidos sobre Javascript del blog