Conceptos básicos de JavaScript

Descubra los fundamentos de JavaScript. Una guía completa para comprender los conceptos clave, desde la sintaxis básica hasta las estructuras de control, las matrices y los objetos.

En este artículo, exploraremos los fundamentos del lenguaje de programación JavaScript. Tanto si eres un principiante curioso como un desarrollador experimentado que busca repasar sus conocimientos, esta guía completa está diseñada para brindarte una sólida comprensión de los conceptos clave de JavaScript. Desde la sintaxis básica hasta las estructuras de control, desde matrices y objetos hasta funciones y eventos, te guiaremos en este emocionante proceso de aprendizaje. Así que prepárate para sumergirte en el fascinante mundo de JavaScript y descubrir todo lo que este potente lenguaje tiene para ofrecer.

Variables y tipos de datos

Declaración de variables

Al trabajar con JavaScript, necesitamos declarar variables para almacenar datos. La declaración de una variable se realiza mediante la palabra clave varseguido del nombre de la variable que queremos utilizar. Por ejemplo, para declarar una variable llamada edadescribiríamos var edad;.

Tipos de datos primitivos

JavaScript ofrece varios tipos de datos primitivos, que son tipos de datos básicos que no son objetos. Los más utilizados son:

Cadena: se utiliza para representar texto.
Número: se utiliza para representar cifras.
Booleano: se utiliza para representar un valor de verdad (verdadero o falso).
Indefinido: se utiliza para representar una variable a la que aún no se le ha asignado un valor.
Nulo: se utiliza para representar la ausencia de un valor.
Símbolo: se utiliza para crear identificadores únicos e inalterables.

Cadenas de caracteres

Las cadenas se utilizan para representar texto en JavaScript. Una cadena se define encerrando el texto entre comillas simples (”) o comillas dobles (“”). Por ejemplo, var nombre = 'Juan'; o var mensaje = "Hola a todos";Las cadenas se pueden concatenar utilizando el operador +.

Las cifras

En JavaScript, los números se utilizan para representar valores numéricos. Pueden ser enteros o decimales. Por ejemplo, los números pueden ser enteros o decimales, var integernumber = 10; o var númerodecimal = 3,14;Los números se pueden utilizar en operaciones aritméticas como suma, resta, multiplicación y división.

Booleanos

Los booleanos se utilizan para representar valores de verdad, es decir, valores que pueden ser verdaderos o falsos. Los booleanos se utilizan a menudo en expresiones condicionales para tomar decisiones. Por ejemplo, var isTrue = verdadero; o var isFalse = false;.

Operadores y expresiones

Operadores aritméticos

JavaScript ofrece una serie de operadores aritméticos para realizar cálculos matemáticos. Los operadores aritméticos más utilizados son :

Suma (+): sirve para sumar dos valores.
Resta (-): Se utiliza para restar un valor de otro.
Multiplicación (*): sirve para multiplicar dos valores.
División (/): sirve para dividir un valor entre otro.
Módulo (%): sirve para obtener el resto de la división de dos números.

Operadores de comparación

Los operadores de comparación se utilizan para comparar valores y devuelven un valor booleano (verdadero o falso) en función del resultado de la comparación. Los operadores de comparación más utilizados son :

Igual (==): comprueba si dos valores son iguales.
Diferente (!=): comprueba si dos valores son diferentes.
Estrictamente igual (===): comprueba si dos valores son iguales en cuanto a tipo y valor.
Estrictamente diferente (!==): comprueba si dos valores son diferentes en cuanto a tipo y valor.
Superior (>): comprueba si un valor es superior a otro.
Inferior (<): comprueba si un valor es inferior a otro.
Mayor o igual que (>=): comprueba si un valor es mayor o igual que otro.
Menor o igual que (<=): comprueba si un valor es menor o igual que otro.

Leer también Software antimalware gratuito.

Operadores lógicos

Los operadores lógicos se utilizan para combinar expresiones condicionales y devolver un valor booleano en función del resultado de la combinación. Los operadores lógicos más utilizados son :

AND (&&): devuelve verdadero si todas las expresiones son verdaderas, falso en caso contrario.
OR (||): devuelve verdadero si alguna de las expresiones es verdadera, de lo contrario, falso.
NO (!): invierte el valor de una expresión (verdadero se vuelve falso y viceversa).

Expresiones condicionales

Las expresiones condicionales, también conocidas como sentencias condicionales, se utilizan para tomar decisiones basadas en una condición. Las expresiones condicionales más comunes son:

if: ejecuta un bloque de código si una condición es verdadera.
else: ejecuta un bloque de código si una condición es falsa.
else if: se utiliza para comprobar varias condiciones diferentes.
switch: ejecuta diferentes acciones en función de diferentes valores posibles.

Estructuras de control

Los bucles

Los bucles se utilizan para repetir una serie de instrucciones hasta que se cumpla una condición específica. Los bucles más comunes en JavaScript son:

for: repite un bloque de código un número determinado de veces.
mientras: repite un bloque de código mientras una condición especificada sea verdadera.
do…while: repite un bloque de código una vez, luego repite el bloque mientras una condición especificada siga siendo verdadera.

Instrucciones condicionales

Las sentencias condicionales se utilizan para realizar diferentes acciones según una condición específica. Las sentencias condicionales más comunes en JavaScript son:

if...else: ejecuta un bloque de código si una condición es verdadera, en caso contrario ejecuta otro bloque de código.
switch...case: ejecuta diferentes acciones según los diferentes valores posibles.

Instrucciones de control de salto

Las sentencias de control de salto se utilizan para modificar el flujo de ejecución de un programa. Las sentencias de control de salto más comunes en JavaScript son:

break: detiene la ejecución de un bucle o una declaración condicional.
continuar: interrumpe una iteración de un bucle y pasa a la siguiente iteración.
return: Devuelve un valor de una función y detiene la ejecución de la función.

Las funciones

Definición de funciones

Las funciones se utilizan para agrupar un conjunto de instrucciones y ejecutarlas cuando sea necesario. Una función se define mediante la palabra clave funciónseguido del nombre de la función y de los paréntesis que contienen los parámetros de la función. Por ejemplo, para definir una función denominada calcularSumaescribiríamos function calcularSuma(a, b) { ... }.

Llamada a funciones

Para ejecutar una función, debemos llamarla usando su nombre seguido de los paréntesis que contienen los argumentos. Por ejemplo, para llamar a la función calcularSuma que definimos anteriormente, escribiríamos calcularSuma(5, 10);.

Pasar parámetros

Los parámetros se utilizan para pasar valores a una función. Cuando definimos una función, podemos especificar los parámetros que necesitamos. Cuando llamamos a la función, pasamos los valores correspondientes a los parámetros. Por ejemplo, en la función calcularSuma(a, b), a y b son parámetros.

Leer también Tres enfoques para el desarrollo de aplicaciones móviles

Devolución de valores

Las funciones pueden devolver un valor utilizando la palabra clave devolverCuando una función llega a una instrucción devolverDevuelve el valor especificado y detiene la ejecución de la función. Por ejemplo, en la función calcularSuma(a, b)podríamos utilizar devuelve a + b; para devolver la suma de los dos números.

Los cuadros

Declaración de tablas

Las matrices se utilizan para almacenar varios valores en una sola variable. Una matriz se declara utilizando corchetes ([]) y separando los valores con comas. Por ejemplo, var frutas = ['manzana', 'plátano', 'naranja'];.

Acceso a los elementos

Para acceder a un elemento específico de un array, usamos su índice. El primer elemento de un array tiene un índice de 0, el segundo de 1, y así sucesivamente. Por ejemplo, para acceder al primer elemento del array frutautilizaríamos frutas[0];.

Modificación de elementos

Para cambiar el valor de un elemento específico de una matriz, utilizamos su índice y el operador de asignación (=). Por ejemplo, para modificar el segundo elemento de la tabla fruta en kiwiutilizaríamos frutas[1] = 'kiwi';.

Métodos útiles

JavaScript ofrece varios métodos integrados para trabajar con matrices. Éstos son algunos de los métodos más utilizados:

push(): añade un elemento al final de la matriz.
pop(): borra el último elemento de la matriz.
shift(): borra el primer elemento de la matriz.
unshift(): añade un elemento al principio de la matriz.
slice(): devuelve una copia parcial de la matriz.
splice(): modifica el contenido de la matriz añadiendo o eliminando elementos.

Objetos

Creando objetos

Los objetos se utilizan para agrupar propiedades y métodos asociados. Un objeto se define mediante llaves ({}) y especificando las propiedades y valores correspondientes. Por ejemplo, var car = { marca: 'Toyota', modelo: 'Corolla', año: 2020 };.

Acceso a los inmuebles

Para acceder a una propiedad específica de un objeto, utilizamos la notación de puntos (.) seguido del nombre de la propiedad. Por ejemplo, para acceder a la propiedad marca del objeto cocheutilizaríamos marca.coche;.

Cambio de propiedades

Para cambiar el valor de una propiedad específica de un objeto, utilizamos la notación de puntos (.) y el operador de asignación (=). Por ejemplo, para cambiar el valor de modelo del objeto coche en Camryutilizaríamos car.model = 'Camry';.

Métodos de objetos

Un objeto también puede contener métodos, que son funciones asociadas al objeto. Los métodos se definen de la misma manera que las funciones, pero dentro del objeto. Por ejemplo, var persona = { nombre: 'Juan', edad: 30, sayHello: function() { console.log('¡Hola!'); } };Para llamar a un método de un objeto, utilizamos la notación de punto (.) seguido del nombre del método. Por ejemplo, person.sayHello();.

El alcance de las variables

Alcance mundial

El ámbito global se refiere a todas las variables, funciones y objetos que se definen fuera de cualquier función. Se puede acceder a las variables declaradas en el ámbito global desde cualquier parte del código.

Ámbito local

El ámbito local se refiere a las variables, funciones y objetos definidos dentro de una función. Las variables declaradas dentro de una función solo son accesibles dentro de ella.

Alcance de las funciones

Cuando una función se define dentro de otra, el alcance de la función interna se limita a la función externa. Las variables declaradas dentro de la función externa son accesibles tanto para la función externa como para la interna, pero las variables declaradas dentro de la función interna solo son accesibles para la función interna.

Leer también Cómo aprovechar el Big Data para mejorar la experiencia de usuario en tu web y aplicación móvil

Manipulación del DOM

Selección de elementos

El DOM (Modelo de Objetos del Documento) es una representación en forma de árbol de todos los elementos de un documento HTML. Para seleccionar un elemento específico del DOM, utilizamos métodos como getElementById, getElementsByClassName o getElementsByTagName. Por ejemplo, var title = document.getElementById('title');.

Modificación del contenido

Una vez seleccionado un elemento DOM, podemos modificar su contenido mediante las propiedades adecuadas. Por ejemplo, para modificar el texto de un elemento, usamos textoContenido o innerHTML. Por ejemplo, title.textContent = 'Nuevo título';.

Modificación de estilos

También podemos cambiar los estilos de un elemento DOM usando las propiedades de estilo adecuadas. Por ejemplo, para cambiar el color de fondo de un elemento, usamos backgroundColor. Por ejemplo, title.style.backgroundColor = 'azul';.

Gestión de eventos

Los eventos son acciones que ocurren en una página web, como hacer clic en un botón o pasar el cursor sobre una imagen. Podemos agregar detectores de eventos a los elementos DOM para ejecutar código en respuesta a estos eventos. Por ejemplo: button.addEventListener('click', myFunction); llamará miFunción cuando se pulsa el botón.

Clases y prototipos

Creación de clases

Las clases se utilizan para crear objetos basados en un modelo común. Una clase se define mediante la palabra clave clase, seguido del nombre de la clase. Podemos definir las propiedades y métodos de la clase dentro de su cuerpo. Por ejemplo,

clase Persona {
  constructor(nombre, edad) {
    este.nombre = nombre
    this.edad = edad;
  }

  sayHello() {
    console.log('¡Hola!');
  }
}

Patrimonio y prototipos

La herencia permite que una clase herede propiedades y métodos de otra. En JavaScript, la herencia se logra mediante prototipos. Los prototipos son objetos que actúan como plantillas para crear nuevos objetos. Por ejemplo,

class Estudiante extends Person {
  constructor(nombre, edad, nivel) {
    super(nombre, edad);
    this.nivel = nivel;
  }

  direBonjour() {
    super.direBonjour();
    console.log('¡Soy un estudiante!');
  }
}

Errores y gestión de excepciones

Tipos de errores

JavaScript puede encontrar varios tipos de errores durante la ejecución del código. Los más comunes son errores de sintaxis, errores de referencia y errores genéricos.

Errores de sintaxis: se producen cuando el código está mal escrito y no sigue la sintaxis correcta de JavaScript.
Errores de referencia: ocurren cuando el código intenta acceder a una variable o método que no existe.
Errores genéricos: ocurren cuando el código genera una excepción que no se manejó específicamente.

Uso del bloque try-catch

Para gestionar errores y excepciones, podemos usar el bloque try-catch. El bloque try se usa para encapsular el código que podría generar una excepción, mientras que el bloque catch se usa para gestionar la excepción ejecutando un bloque de código específico. Por ejemplo,

try {
  // Código susceptible de generar una excepción
} catch (error) {
  // Código para manejar la excepción
}

Gestión de excepciones

El manejo de excepciones es el proceso de tomar las medidas adecuadas en respuesta a una excepción. Las acciones tomadas pueden variar según el tipo de error encontrado. Por ejemplo, podemos mostrar un mensaje de error al usuario o reintentar la operación que generó la excepción. El manejo de excepciones nos permite gestionar los errores con precisión y mantener el programa funcionando sin problemas.