El objetivo de este curso es poder aprender JavaScript de forma sencilla viendo un concepto teórico, luego algunos ejemplos resueltos y por último y lo más importante, efectuar una serie de ejemplos tu solo. Este curso es complementario al curso gratuito de HTML5 y el curso de CSS3
¿Qué es JavaScript?
JavaScript es un lenguaje interpretado, multiplataforma y orientado a objetos el cual se basa en el estándar ECMAScript.
Un lenguaje interpretado significa que las instrucciones las analiza y procesa el navegador en el momento que deben ser ejecutadas.
Dentro de este curso de JavaScript vamos a hacer ejemplos básicos del lenguaje, ejemplos que trabajan con el DOM de las páginas web o ejemplos que hagan uso de alguna librería como Modernizr, Raphael, jQuery, entre otras
Para empezar a probar el lenguaje JavaScript puedes abrir la Consola JavaScript de tu navegador y empezar a escribir código.
console.log("Mi Primer Código JavaScript del Curso de Programación Gratis");
Ejemplo
Vamos a crear un programa que muestre en una página web el mensaje “Hola Mundo estoy aprendiendo a programar en Estrada Web Group”.
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de JavaScript</title>
<meta charset="UTF-8">
</head>
<body>
<script>
document.write(' Hola Mundo estoy aprendiendo a programar en Estrada Web Group ');
</script>
</body>
</html>
En el ejemplo anterior podemos ver que con document.write se escribe en el documento HTML y el código JavaScript debe ir encerrado en las etiquetas <script></script>.
JavaScript es sensible a mayúsculas y minúsculas, por lo que hay que tener cuidado como escribimos nuestro código, pero no te preocupes esto es solo el inicio y poco a poco te iras familiarizando con el tema.
Sección 1. Primeros pasos
- ¿Qué es JavaScript? – presentarle JavaScript y su historia.
- Instalar un editor de código fuente JavaScript: aprende a instalar Visual Studio Code para editar código JavaScript.
- Conoce la pestaña Consola de Herramientas de desarrollo web: te brinda una introducción básica a la ventana Consola en los navegadores web.
- JavaScript Hello World: aprende a ejecutar el primer código JavaScript que muestra el famoso "¡Hello World!".
Sección 2. Fundamentos
- Sintaxis: detalles de la sintaxis de JavaScript, incluidos espacios en blanco, declaraciones, identificadores, palabras clave, expresiones y comentarios.
- Variables: muestra cómo declarar variables.
- Tipos de datos: te presentamos los tipos de datos de JavaScript, incluidos los tipos primitivos y de referencia.
- Número: aprenderás cómo JavaScript usa el tipo Número para representar los números enteros y de coma flotante.
- Separador numérico: te muestra cómo hacer que los números sean más legibles usando guiones bajos como separadores numéricos.
- Literales octales y binarios: brinda soporte para literales binarios y cambia la forma de representar los literales octales.
- Booleano: te presentamos el tipo
boolean. - String: aprenderás sobre el tipo primitivo de cadenas de texto (string) y algunas operaciones básicas de un string.
- Objeto: te presenta el tipo de objeto.
- Valores primitivos frente a valores de referencia: aprenderás dos tipos de valores en JavaScript, incluidos los valores primitivos y de referencia, y las diferencias entre ellos.
- Array: te presenta el tipo
Arrayy cómo manipular los elementos de la matriz.
Sección 3. Operadores
- Operadores aritméticos: te presentamos los operadores aritméticos que incluyen suma (
+), resta (-), multiplicación (*) y división (/). - Operador de resto o residuo: te muestra cómo usar el operador de resto (
%) para obtener el resto cuando un valor se divide por otro valor. - Operadores de asignación: en este artículo te guían sobre cómo usar los operadores de asignación (
=) para asignar un valor o una expresión a una variable. - Operadores unarios: aprende a usar operadores unarios.
- Operadores de comparación: te muestra cómo usar operadores de comparación para comparar dos valores.
- Operadores lógicos: aprende a usar los operadores lógicos:
NOT(!),AND(&&) yOR(||). - Operadores de asignación lógica: te presentamos los operadores de asignación lógica, incluidos
||=,&&=y??= - Operador coalescente nulo (
??): acepta dos valores y devuelve el segundo valor si el primero esnulloundefined. - Operador de exponenciación: te presentamos el operador de exponenciación (
**) que calcula una base a la potencia del exponente, que es similar al métodoMath.pow().
Sección 4. Declaraciones de flujo de control
- if: te muestra cómo usar la declaración if para ejecutar un bloque si una condición es verdadera.
- if…else: aprende a ejecutar un bloque de código en función de una condición específica.
- if…else…if – verifica múltiples condiciones y ejecuta un bloque.
- Operadores ternarios: te muestran cómo hacer un atajo para la instrucción if (? :).
- switch: te muestra cómo reemplazar múltiples sentencias if al comparar un valor con múltiples variantes usando la sentencia switch.
- while: aprende cómo realizar un bucle de prueba previa que ejecuta repetidamente un bloque de código siempre que una condición específica sea verdadera.
- do...while: muestra cómo realizar un ciclo posterior a la prueba que ejecuta un bloque de código repetidamente hasta que una condición específica es falsa.
- bucle for: aprende a ejecutar repetidamente un bloque de código en función de varias opciones.
- bucle for...in: aprende a iterar sobre las propiedades de un objeto utilizando el bucle for...in.
- break: aprende a terminar prematuramente un bucle.
- continue: te muestra cómo omitir la iteración actual de un ciclo y saltar a la siguiente.
- Operador de coma: te guía sobre cómo usar el operador de coma en un bucle for para actualizar varias variables a la vez.
Sección 5. Funciones en JavaScript
- Funciones: en este artículo te presentamos las funciones en JavaScript.
- Funciones ciudadanos de primera clase: aprende cómo almacenar funciones en las variables, pasar funciones a otras funciones como argumentos y devolver funciones como valores.
- Funciones anónimas: aprende sobre las funciones anónimas, que son las funciones sin nombre.
- Pasar valores a una función: comprenderás cómo funciona pasar valores a una función en JavaScript.
- Función recursiva: aprenderás a definir funciones recursivas.
- Parámetros predeterminados: aquí te muestro cómo definir parámetros predeterminados para las funciones.
Sección 6. Objetos y Prototipos (Objects & Prototypes)
- Introducción a los bjetos: en etse artículo aprenderás sobre los ojetos y conocerás los métodos de un objeto.
- Funciones de constructor: aquí aprenderás cómo usar funciones de constructor para definir tipos personalizados en JavaScript.
- Prototipo (protorype): aprenderás cómo funciona el protorype en JavaScript.
- Patrón de constructor/prototipo: muestra cómo combinar la función de constructor y el patrón de prototipo para definir tipos personalizados.
- Herencia prototípica: aprenderás la herencia prototípica en JavaScript.
- ¿Qué es this en JavaScript? Comprenda este valor y cómo funciona en JavaScript.
- globalThis: proporciona una forma estándar de acceder al objeto global en todos los entornos.
- Propiedades del objeto: sumérgete en las propiedades del objeto y sus atributos.
- Propiedades enumerables: obtene más información sobre las propiedades enumerables.
- Propiedades Propias – comprende las propiedades propias y heredadas.
- Object.values(): devuelve los valores propios de la propiedad enumerable de un objeto como una matriz.
- Object.entries(): devuelve los propios pares enumerables [clave, valor] de propiedad con clave de cadena de un objeto.
- Object.assign(): copia un objeto o fusiona objetos.
- Object.is(): comprueba si dos valores tienen el mismo valor.
- Funciones factory: aprende sobre las funciones factory o de fábrica, que son funciones que devuelven objetos.
- Destrucción de objetos: aprenda a asignar propiedades de un objeto a las variables.
- Operador de encadenamiento opcional (?.): simplifica la forma de acceder a una propiedad ubicada en lo profundo de una cadena de objetos conectados sin tener que verificar si cada referencia en la cadena es nula o indefinida.
- Extensiones de sintaxis de objetos literales: proporcionan una nueva forma de definir objetos literales.
