Videotutorial: Aprenda JavaScript y jQuery

Bienvenido al curso definitivo de JavaScript y jQuery.

Este vídeo explica qué es JavaScript y qué puede hacer por nosotros.

En este vídeo aprenderás qué editor utilizaremos y lo instalaremos juntos.

Este vídeo muestra cómo utilizar clics con JavaScript y cómo funcionan las variables.

La sentencia If. If se utiliza con mucha frecuencia en programación. Por ejemplo, si sólo desea ejecutar algo si se cumple una determinada condición.

Este vídeo trata sobre las matrices (campos) en JavaScript. Nos permiten almacenar múltiples piezas de información dentro de una variable.

En este vídeo, aprenderás sobre los bucles for (bucles). Estos nos permiten ejecutar un determinado código varias veces seguidas.

Las funciones son una especie de miniprograma que podemos volver a utilizar en cualquier momento después de haberlo creado. Por ejemplo, si pulsas el botón de inicio de tu teléfono móvil, aparece una función que te lleva a la pantalla de inicio. Las funciones facilitan mucho el trabajo.

Aquí se muestra el resultado del reto (es decir, un cuestionario) y también se crea la base HTML.

El CSS (la apariencia) del cuestionario se programa aquí.

El JavaScript de nuestro cuestionario está programado y explicado aquí.

Ya has visto cómo funcionan las funciones con un parámetro. Ahora echemos un vistazo a las funciones con múltiples parámetros. Los parámetros múltiples se utilizan cuando quieres usar una función con varias variables diferentes. En matemáticas, por ejemplo, cuando se suman varios valores.

Existen variables globales y locales. Resumiendo brevemente: Las variables globales son las variables que se crean fuera de las funciones, y las variables locales son las que se crean dentro de las funciones. A continuación veremos con más detalle cómo funciona esto.

En los lenguajes de programación, es posible configurar funciones de forma que tengan un valor de retorno. Hasta ahora, sólo hemos tenido funciones que simplemente ejecutaban algo, pero no devolvían nada con lo que pudiéramos seguir trabajando. Así que ahora echemos un vistazo a RETURN.

En este artículo trataremos los operadores matemáticos y los operadores de asignación. Los operadores matemáticos son cosas bastante simples, como sumas, restas, etc., mientras que los operadores de asignación permiten realizar operaciones sencillas con bastante facilidad, como aumentar por 5. Como ambos son importantes en programación, aquí se tratan los dos temas.

En programación existen tres (o cuatro) tipos de bucles: el bucle do-mientras, el bucle while y el bucle for. Ya conocemos el bucle For. Veamos ahora el bucle do-while (controlado por el pie) y el bucle while (controlado por la cabeza).

Este artículo trata sobre una alternativa a las condiciones If. Estas son Switch y Case. En otras palabras, usted tiene un interruptor que alterna entre los distintos casos y se queda con el que está activo.

Ya hemos hablado de las matrices, pero no hemos entrado en detalles. Hay mucho más que saber sobre los arrays. La propiedad más importante de un array JavaScript es el número de elementos (longitud). Sin embargo, el array también tiene otras propiedades como el índice, que nos da información sobre la posición 0 del array.

Los objetos son un concepto muy importante e interesante en muchos lenguajes de programación. En principio, todo puede describirse como un tipo de objeto. Tomemos un objeto que solemos ver en las carreteras: un COCHE. Un coche tiene ciertas propiedades/características y puede realizar ciertas acciones.

Veamos cómo podemos crear objetos en JavaScript. Para ello, creamos una función constructora y dos instancias de nuestro objeto en nuestra etiqueta head. Dentro de la función constructora, que tiene el mismo nombre que nuestro objeto, le decimos al programa que los parámetros que se pasan a la función constructora cuando se crea una instancia del objeto deben ser los valores del objeto.

Como base para las funciones de objetos, partimos del código del último tutorial, en el que creamos variables que se generan para cada instancia de nuestro objeto.

En este tutorial, conocerás el objeto Math. Se trata de un objeto que se basa en la clase Math y viene con un montón de propiedades y funciones interesantes.

Este vídeo trata sobre el objeto Date o la clase Date. Se trata de objetos que pueden utilizarse para incluir la hora en un programa. Esto no significa necesariamente la hora o la fecha, sino que también puede ser un intervalo de tiempo. Un objeto Date contiene el tiempo transcurrido desde el momento 1970-01-01 00:00:00. Hay varias formas de pasar parámetros al constructor de fecha.

En este vídeo aprenderás a construir un reloj interactivo con JavaScript.

Este vídeo trata de la herencia y el polimorfismo. Dos conceptos de la programación orientada a objetos.

En este artículo abordamos la pregunta: ¿Qué es jQuery? jQuery es una librería JavaScript que nos permite crear sitios web aún más atractivos.

Aquí aprenderá a procesar los clics mucho más fácilmente con jQuery.

En este tutorial, aprenderás cómo cambiar la apariencia de un sitio web con jQuery. Para ello, podemos simplemente sobrescribir un atributo de un campo, por ejemplo. En este ejemplo, podemos cambiar el enlace del iframe (es decir, el src/fuente) pasando el ratón por encima del cuadrado. Podrías cambiar fácilmente el código y, por ejemplo, agrandar el cuadrado sobrescribiendo los atributos height y width al pasar el ratón por encima. En general, ahora puedes utilizar este método para cambiar fácilmente la apariencia del sitio web.

Una de las características más interesantes de jQuery es la de desvanecer un elemento. En este ejemplo, desvanecemos un botón tan pronto como hacemos clic en otro botón. Usamos la función FadeOut ("función de desvanecimiento"). Para mostrar el elemento de nuevo después, usamos la función FadeIn.

En este video, veremos la animación en jQuery. Esto es algo que se mueve. Así que nos aseguramos de que un elemento en nuestro sitio web se mueve / cambia. Hay una función en jQuery para esto. Se llama animate() y espera tres parámetros.

Veamos qué es jQuery UI.

El Acordeón es un widget que, como un acordeón, nos permite ver sólo ciertas partes del conjunto. Resulta especialmente útil si se quiere transmitir mucha información, pero resultaría demasiado confusa en un solo texto de gran tamaño.

Este tutorial trata sobre los elementos ordenables en jQuery UI. Estos son elementos ordenables. Estarás familiarizado con esto si usas sitios web de productividad como Wunderlist o Trello. La capacidad de hacer elementos ordenables es una característica muy interesante que se puede utilizar en muchas aplicaciones diferentes.

A veces ocurre que quieres que el usuario pueda cambiar el tamaño de un elemento. Entonces los redimensionables son la solución. Te permiten hacer precisamente eso. Puedes ver un pequeño triángulo en la parte inferior derecha del elemento, sobre el que puedes hacer clic y luego, si mantienes pulsado el puntero del ratón, puedes ampliarlo o reducirlo.

En jQuery UI, los draggables hacen muy fácil construir un elemento que pueda ser arrastrado hacia adelante y hacia atrás. Echemos un vistazo a cómo hacer esto aquí.

Las barras de progreso son una forma estupenda de mostrar al usuario en qué punto se encuentra de un proceso concreto. En el proceso de venta en una tienda online, por ejemplo, o en una encuesta, ayuda al usuario a saber en qué fase se encuentra para completar los pasos.

En este tutorial, me gustaría hablar brevemente de los efectos en jQuery UI. Hay algunos efectos muy interesantes que hacen posible que su sitio web se vea aún mejor y también completamente soplar los calcetines de sus usuarios.

En este vídeo puedes ver el resultado del reto. Una página de preguntas frecuentes.

Estamos implementando la página de preguntas frecuentes aquí.

Este vídeo presenta el juego de ingenio que se programa en este capítulo.

En primer lugar, echemos un vistazo a la estructura y el aspecto del juego.

Veamos ahora algunas de las funcionalidades del juego.

El jugador ya puede realizar las primeras acciones del juego, pero ahora tenemos que asegurarnos de que la partida se puede reiniciar y terminar correctamente.

Ahora sólo queda integrar el Tim en el juego para calcular correctamente la puntuación y limitar el tiempo de juego. También llevaremos a cabo algunos pequeños pasos más para finalizar el juego.

Aquí se presenta la app del capítulo. Se trata de una app/sitio web de listas de tareas.

Ahora vamos a crear la base y echar un vistazo a cómo podemos crear y editar el tema correspondiente con jQuery Mobile.

Como estamos siguiendo un enfoque OOP, necesitamos crear la arquitectura correspondiente. Aquí nos ocupamos de ello.

En este vídeo añadimos las páginas y nos ocupamos de la página donde creamos las tareas.

De forma similar a la página de creación, la página de edición también debe rellenarse y dotarse de la funcionalidad correspondiente.

Ahora podemos ocuparnos de nuevo de la arquitectura y crear la estructura de datos.

Ahora que tenemos nuestra estructura de datos, podemos llamarla fácilmente en nuestra interfaz de usuario.

Durante la programación, fueron necesarios algunos pasos en el "flujo de explicación", que ahora podemos solucionar. También nos ocupamos del almacenamiento permanente de datos y completamos la app.