Fundamentos de JavaScript
En esta página aprenderás poco a poco los conceptos básicos del lenguaje interpretado JavaScript.
Introducción y Contexto
En esta sección, sabrás qué es este lenguaje y su propósito, así como su importancia en el desarrollo web.
¿Qué es JavaScript y cuáles son sus principales usos en la web?
1
JavaScript es un lenguaje de programación que permite funciones e interacciones complejas con sitios web, ya sea actualización dinámica o controles multimedia.
¿Qué es JavaScript y cuáles son sus principales usos en la web?
2
Fue creado en abril del año 1995 por Brendan Eich en 10 días cuando fue contratado por la empresa Netscape Communications. Esta compañía tenía la visión de que la red necesitaba ser más dinámica de lo que era en aquel entonces.
¿Por qué JavaScript no es lo mismo que Java?
3
Aparte de diferencias obvias como la sintaxis entre lenguajes, y sus propósitos, Java es un lenguaje compilado, mientras que JavaScript es un lenguaje interpretado mientras corre el navegador corre el script.
¿Cómo se complementa JavaScript con HTML y CSS?
4
En HTML, JavaScript interactúa mediante el Document Object Model (DOM), puede leer y obtener contenido HTML, modificarlo o crear contenido nuevo. Con CSS, JavaScript puede modificar o deshabilitar clases así como sus estilos “inline”.
Fundamentos del Lenguaje
En esta sección, sabrás la sintaxis básica de JavaScript, así como conceptos fundamentales para el dominio de lenguaje.
¿Cuál es la sintaxis básica de JavaScript y cómo se escriben comentarios?
5
Se usa una keyword (let o const), un
identificador, y un valor, expresión u operador. Para definir comentarios, todo lo que esté
delante de dobles diagonales (//) será ignorado, o entre (/* */).
// escribir un comentario...
let x = 5;
let y = 6;
¿Qué diferencias hay entre var, let y const?
6
La keyword let se usa para variables que puedan cambiar de
valor, const se usa para constantes (variables que no pueden cambiar su valor) y
var era una keyword que cumplía el propósito de let y const en el JavaScript
viejo, ahora usarla es una mala práctica.
var a = 1 // puede ser redeclarada;
let b = 1; // no puede ser redeclarada
const PI = 3.1416; // no puede cambiar de valor
¿Cuáles son los tipos de datos primitivos en JavaScript? Da un ejemplo de cada uno.
7
Son datos que no son objetos y que no tienen métodos o propiedades,
existen 7: string, number, bigint, boolean, undefined, symbol y null.
const str="hola";
const num=123.45;
const big=12345678901234567890n;
const bool=true;
let undef;
const sym=Symbol("id");
const nul=null;
¿Qué diferencia hay entre un array y un objeto en JavaScript?
8
Los arrays sirven para crear y almacenar listas de un solo tipo de dato, mientras que los objetos representan “cosas” con características o propiedades que pueden ser de distintos tipos de datos.
const numeros = [1, 2, 3, 4];
const persona = { nombre: "Ana", edad: 21, activa: true };
¿Qué son y cómo se usan los operadores aritméticos, lógicos y relacionales?
9
Los operadores aritméticos se usan para realizar operaciones con números
(+, -, *, **, /, %, ++, –), los lógicos se usan para combinar expresiones
booleanas osea revisar condiciones (&&, ||, !) y los relacionales se usan para comparar dos valores (==,
===, !=, !==, >, <, >=, <=).
let a=10, b=3;
let suma=a+b, resta=a-b, mult=a*b
const ambos=(a>5 && b>5), alguno=(a>5 || b>5), negado=!(a>5);
const eq=(3=='3'), estr=(3===3)
Control de Flujo
Aquí aprenderás sobre sentencias condicionales, bucles y palabras clave relacionados a estos.
¿Cómo funcionan las sentencias condicionales if, else y switch?
10
If se usa para especificar que un bloque de código se ejecute si una condición específica es verdadera, else se usa si esta MISMA condición es falsa. El switch determina varios bloques de códigos que se pueden ejecutar dependiendo del valor de una variable.
¿Cuáles son las diferencias entre los bucles for, while y do...while?
11
El for crea un ciclo de acuerdo a condiciones y un paso definido, el while siempre se ejecutará mientras una condición se cumpla, y el do…while siempre ejecuta el bloque de código una vez antes de empezar a revisar la condición.
¿Para qué sirven las palabras clave break y continue?
12
La palabra clave break termina la ejecución de un ciclo o una sentencia switch. Mientras que el continue salta la iteración actual dentro de un ciclo.
Funciones
Sabrás como declarar funciones, el scope de una variable y las novedosas funciones flecha.
¿Cómo se declara una función y cómo se llama en JavaScript?
13
Se usa la palabra clave function, el nombre de la función y los parámetros si es que tiene. Se llama cuando algo invoca la función con el operador (), ej. function fun().
¿Qué significa que una función tenga parámetros y un valor de retorno?
14
Significa que la función necesita recibir argumentos, que la función necesita para realizar su propósito, un valor de retorno es lo que devolverá la función al final de terminar su ejecución.
¿Qué son las funciones flecha (=>) y qué ventajas tienen?
15
Es una alternativa compacta a la sintaxis tradicional de funciones, no necesitan las palabras claves de function, return o las llaves.
¿Qué es el scope en JavaScript y cómo afecta a las variables?
16
El scope determina la accesibilidad o visibilidad de las variables, existe el scope global, de función y de bloque. Las variables solo existen dentro de scope que se definan.
Objetos y Colecciones
Conocerás qué es lo que compone un objeto, sus propiedades y métodos.
¿Cómo se declara un objeto y cómo se accede a sus propiedades?
17
Se declara con el nombre del objeto (que debería ser const) y una lista de pares tipo llave:valor entre llaves.
¿Qué diferencia hay entre una propiedad y un método en un objeto?
18
Los métodos se pueden ejecutar en cualquier momento respecto a un objeto, sin embargo las propiedades siempre deben ser las mismas (pero pueden cambiar de valor) respecto objeto a objeto.
Menciona al menos 3 métodos básicos de los arrays (push, pop, map, etc.) y explica cómo funcionan.
19
push: añade los elementos al final del array y retorna la nueva longitud de este. pop: elimina el último elemento del array y lo retorna. map: crea un nuevo array con el array original afectado por una función en cada elemento de este.
Otros temas básicos
Información miscelánea útil.
¿Qué es el DOM y por qué es importante en el uso de JavaScript en páginas web?
20
El DOM (Document Object Model) es un árbol de objetos creado al cargar la página, es importante gracias a que permite a JavaScript cambiar e interactuar con la estructura de la página y realizar HTML dinámico.
¿Qué es un evento en JavaScript y menciona al menos 3 ejemplos comunes?
21
Los eventos son cosas/ocurrencias dentro del HTML a las que JavaScript puede reaccionar, ejemplos son: onclick (al cliquear un elemento), onmouseover (al poner el cursor por encima de un elemento) y onkeydown (cuando el usuario presione una tecla concreta).
¿Cuál es la diferencia entre alert, prompt y console.log?
22
Alert muestra un mensaje al usuario en el navegador, prompt también muestra un mensaje pero a la vez pide un texto/respuesta. Finalmente console.log solo imprime un mensaje en la consola del navegador.
¿Cómo se abre la consola del navegador y qué ventajas tiene usarla para depurar código?
23
Se puede abrir usando atajos de teclado como F12 o dando click en el menú del navegador y darle a Inspeccionar Elemento o Herramientas de Desarrollador.