Javascript

JavaScript es seguramente el primer lenguaje de programación que deberías aprender.

De hecho, teniendo en cuenta las posibilidades de este lenguaje y su grado implantación en el mercado, es seguro que siendo un experto única y exclusivamente en JavaScript (y en alguna de sus librerías más importantes, como React) podrás optar a un trabajo cualificado bien remunerado, o lo que es mejor, podrás crear cualquier solución tecnológica que desees.

¿Qué vas a aprender con este curso de JavaScript?

En este curso te enseño los fundamentos de este lenguaje de programación y cómo aplicarlos en el desarrollo de páginas web. Entre los ejercicios que hay en este curso, tenemos:

  • Juegos de preguntas y respuestas.
  • Varios tipos de sliders.
  • Una aplicación para tomar notas.
  • Un menú desplegable tipo hamburguesa.
  • y en general, muchísimas cosas más.

Después de dominar los conceptos explicados en este curso, podrás hacer con éxito infinidad de aplicaciones. En este enlace tienes algunas propuestas y ejemplos de aplicaciones creadas con Javascript por algunos de mis alumnos.

Lenguajes de guión (script)

Los lenguajes scripts son lenguajes que no necesitan ser compilados. En el caso de Javascript, el navegador es capaz de interpretar el código fuente y ejecutarlo.

Visual Studio Code

Este es el editor de código que usaremos para programar.

Consulta mi curso de visual studio code.

Lecciones

Variables

Son zonas de la memoria del ordenador identificadas por un nombre y capaces de almacenar información que no puede variar durante la ejecución del programa. Variables de texto Variables numéricas Ejercicio: Intercambiar el contenido de dos variables Conversión de tipos

Operadores

Operador de concatenación Operadores aritméticos Ejercicios con operadores aritméticos 1. Escribir un programa que calcule el número de segundos que existen en un día. Para ello debemos multiplicar los segundos de un minuto, por los minutos de una hora, por las horas de un día. Como todo el mundo sabe, […]

Estructuras condicionales

Operadores lógicos o booleanos Diferencia entre == y === El triple igual significa “son iguales sin conversión de tipos”. 1==”1″ // true, conversión automática del tipo de datos 1===”1″ // false, ya que son datos de diferente tipo 0==false // true 0===false // false, ya que son datos de diferente tipo Condicional if Ejercicio: operador […]

Bucle for

Snippet para crear bucles for en Sublime Text: for Ejercicios bucle for 1. Pares I Imprimir los números pares que hay dentro de los 100 primeros números naturales. No utilizar la estructura de control if para resolver este ejercicio. 2. Pares IIImprimir los números pares que hay dentro de los 100 […]

Bucle While

Ejercicios bucle while 1. Repetir el juego del número secreto, pero ahora después de jugar se le preguntará al usuario si desea seguir jugando. Si no desea seguir jugando la variable booleana “quieroJugar” que evalúa el bucle while valdrá false, con lo cual termina el juego. 2. El usuario debe […]

Funciones

Son bloques de código reutilizables. Función que no devuelve nada, sin parámetros Función que no devuelve nada, con parámetros Ejercicios: funciones Resolveremos los siguientes ejercicios definiendo una función con parámetros de entrada 1. Ejercicio “hoyQuieroComer”Crear una función llamada “hoyQuieroComer” que recibe un parámetro “comida” curyo valor será “garbanzos”.Cuando llamemos a la […]

Arrow Functions

¿Por qué es necesario declarar una arrow function antes de usarla? Declaración de una función: Expresión de una función (función como valor) En la primera fase de carga del código Javascript (hoising), las funciones se almacenan en memoria con todo su código, pero laas variables y constantes se almacenan con […]

Métodos para trabajo con cadenas

Ejercicio: cadenas Utilizando el método substring imprimir las letras que van desde la posición 3 a la 7 de la cadena “wonderful day”, es decir “derf”.

Números aleatorios

Generar número aleatorio dentro de un rango Como ejemplo, si deseamos generar un número aleatorio entre 25 y 75, la sentencia sería Ejercicio número aleatorio Obtener un número aleatorio entre 5 y 7. Ejercicio letra aleatoria Obtener una letra aleatoria de tu nombre. Tendrás que usar los siguientes códigos: Pasos […]

location.href

Nos permite: Recuperar el valor de la url en la que estoy (cuando está a la derecha del igual). Redireccionar a otra página (cuando está a la izquierda del igual). Ejercicio: location.href Obtener el nombre de la página actual. Pista:location.href nos devuelve la url completa de la página en la que estoy.

DOM

Gracias al DOM, Javascript puede acceder y modificar todos los elementos de un documento HTML. Para ello, el navegador crea una representación interna de la página, un árbol de nodos. querySelector I querySelector II querySelector III querySelector IV Mecánica de resolución ejercicios Escribe el código HTML. Al pulsar sobre el […]

Efecto parallax

Break! Gran día de repaso Repasaremos los últimos ejercicios: El juego del número secreto y aleatorio. Cuando terminemos la partida, nos debe preguntar si queremos volver a jugar. Calcular el factorial de un número. Calcular grados centígrados. Ejercicio del formulario para mandar cajas.

innerHTML

Ejercicios: innerHTML 1. Ejercicio: mouseoverDadas dos capas, al hacer “mouseover” sobre la capa de arriba, que aparezca en la capa de abajo el texto “Has hecho mouse over sobre la capa 1” 2. Ejercicio: mapa Teniendo en cuenta que con el siguiente código html puedo pintar una moneda sobre en mapa en cierta […]

Propiedad style

Cambio del estilo de un elemento: obj.style.color = ‘#ff0000’; Ejercicios: style 1. Ejercicio: cuestionario Nota: un elemento “span” es una capa (div) alineada con el texto. 2. Ejercicio: cambiar color body Cuando seleccionemos un valor en el combo desplegable, el color del body debe cambiar. 3. Ejercicio Lightbox Usaremos los siguientes estilos: Detectar cuando […]

Cambiar atributo src

Cambiar la imágen indefinidamente Tendremos dos posibles aproximaciones diferentes: Ejemplo drag and drop

Añadir clase, borrar clase, alternar clase, evaluar si tiene una clase

Añadir clase Cambiar clase Eliminar clase Evaluar si tiene una clase Ejercicios Ejercicio – animate.css Usando addClass, hacer que al pulsar un botón este coja los estilos necesarios y suministrados por la librería animate.css para que se produzca la animación correspondiente Para que funcione, habrá que añadir el class animated y el class correspondiente […]

Create element

Ejercicio createElement A partir de la siguiente página, añadir el código javascript necesario para que inicialmente se reproduzca el video con sonido y la palabra ‘mute‘. Al pulsar sobre el slider, este debe ponerse en silencio y la palabra debe cambiar a ‘unmute‘. Pasos a seguir: Añadimos el texto ‘mute’ […]

Arrays

Declaración Añadir y quitar elementos de un array En javascript no existen los arrays asociativos Si cambiamos la palabra “Array” por el nombre utilizado para designar a cualquier otro objeto, el código continúa funcionando. Esto es así porque realmente estamos definiendo las propiedades de un objeto. (En javascript foo[“bar”] es […]

Tres en raya

Ejercicio – Dos jugadores Hacer el juego del tres en raya para dos jugadores. Un solo jugador El método juegaPlayer1() quedará así: Por tanto, debemos crear un método getComputerMove() que creará una copia del tablero, moverá la ficha sobre esta copia y en función del resultado decidirá dónde mover en […]

Ahorcado

Realizar el juego del ahorcado. Al iniciar el programa, este deberá escoger una palabra al azar entre 4. Esta será la palabra secreta que el usuario deberá adivinar. Utilizando el códigovar palabraConGuiones = secretWord.replace(/./g, “_ “);el programa creará una nueva palabra con tantos guiones bajos como letras tenga la palabra […]

Juego de palabras

e escoge una frase aleatoriamente entre un array de frases. Desordenamos la frase. Para simplificar el proceso, tendremos otro array donde las frases desordenadas se almacenan en el mismo órden que en el primer array. Envolvemos las palabras del array en spans independientes a los que asociamos el class button para detectar la pulsación […]

localStorage

localStorage vs Cookies: En ambos casos la información es almacenada en el cliente, es decir, en el navegador, pero accedemos y manipulamos la información de las cookies desde el servidor y accedemos y manipulamos la información del localStorage desde el cliente. Podemos almacenar hasta 4 Kb por cookie, mientras que […]

Deconstrucción

Nos permite almacenar los valores de una entidad compleja (un array o un objeto) en variables independientes. Deconstrucción de array Deconstrucción de un objeto Importar un objeto y deconstruirlo funciones.js Importar todos los exports de un módulo Rest operator/ spread operator (…) Rest operator Spread operator

fetch

Las peticiones fetch permiten hacer peticiones a un servidor cuyos resultados serán gestionados mediante promesas. Ejemplos de uso de fetch Petición GET sin parámetros a una API externa Petición GET sin parámetros a un fichero local En un documento JSON correcto, los nombres de las propiedades deben ir entre comillas […]

Import, export

Con variables test.html main.js variables.js Con funciones main.js funciones.js

modernizr

Modernizr es un paquete de detección de las capacidades de un navegador relativas a HTML5 y CSS3. 1) Desarrollo (Development)Es un script completo, con todas las funcionalidades básicas de Modernizr, sin comprimir y con comentarios. Ideal para la fase de desarrollo de nuestro proyecto. Luego sería recomendable descargar un paquete idóneo […]

Cómo hacer un trivial con Javascript

Este ejercicio de Javascript, tiene cierta complejidad. Existen varias formas de hacer un trivial con Javascript, y en este caso, ya que el orden de las preguntas y de las posibles respuestas es aleatorio, se complica un poco más.

Calculadora con Javascript

En este ejercicio, voy a programar la calculadora con Javascript de dos maneras diferentes. La primera versión es poco más sencilla, y la segunda se apoya en la primera. Así que en el video tienes el proceso utilizando las dos metodologías

Obtener la letra del DNI con Javascript

El ejercicio de Javascript, calcular la letra del DNI con Javascript, es un ejercicio típico, que te permite poner en práctica los fundamentos de lenguaje de programación.

Calcular el factorial con Javascript

Para resolver el ejercicio, calcular el factorial de un numero con Javascript. necesitaremos una variable que almacenará el número cuyo factorial queremos calcular

Mini juego con jQuery

La idea es que aparecen tres fotografías en línea y una fotografía abajo. Nosotros debemos pulsar sobre la fotografía idéntica a la que está abajo.

Bucle each de jQuery

Para resolver este ejercicio de Javascript he usado la librería jQuery. Me he ido acostumbrando a utilizar esta librería de Javascript porque resulta muy sencilla y tiende a simplificarlo todo

Aviso Legal | Política de privacidad