JavaScript

 

¿Qué es JavaScript?

JavaScript es un lenguaje de programación de alto nivel que se utiliza principalmente para crear sitios web dinámicos e interactivos. A menudo se lo conoce como el "lenguaje de la web", ya que es uno de los lenguajes más populares para programar en la web.

JavaScript se ejecuta en el navegador del usuario y puede interactuar con el HTML y el CSS para crear efectos visuales y dinámicos en una página web. También se utiliza en el desarrollo de aplicaciones web, aplicaciones móviles y juegos en línea.

JavaScript fue creado en 1995 por Brendan Eich, mientras trabajaba en Netscape Communications Corporation. Desde entonces, ha evolucionado y se ha convertido en uno de los lenguajes de programación más utilizados en todo el mundo.

El conocimiento de JavaScript es esencial para cualquier desarrollador web. En esta página, te proporcionaremos una introducción básica a JavaScript, desde las variables y los tipos de datos hasta la manipulación del DOM y los eventos. Aprenderás cómo funciona JavaScript, cómo se utiliza para crear aplicaciones web y cómo puedes empezar a utilizarlo en tus proyectos. ¡Empecemos!"

¿Cómo funciona JavaScript?

Como cargar un archivo JavaScript

El esquema general de una página web es un documento HTML donde están todas las etiquetas HTML de la página. A lo largo de ese documento, pueden existir referencias o relaciones a otros documentos, como archivos CSS o archivos JavaScript.

Por ejemplo, si dentro del documento HTML se encuentra una referencia a un archivo CSS, el navegador lo descarga y lo aplica al documento HTML, cambiando su apariencia visual. De la misma forma, si encuentra una referencia a un archivo JavaScript, el navegador lo descarga y ejecuta las órdenes o acciones que allí se indican.

Tenemos varias maneras de introducir JavaScript en un documento HTML. Vamos a verlas:

Ejemplo de <script> en línea

En este primer y sencillo ejemplo, sólo tenemos un documento: el archivo HTML. En él, existe una etiqueta <script>..</script> que contiene las órdenes o líneas de JavaScript que le indican al navegador que tiene que hacer, en este caso, mostrar un "¡Hola!" en la consola.

<script> "¡Hola!" </script>

Este método de escribir <script>..</script> se denomina JavaScript en línea (inline), y significa que el JavaScript está escrito directamente en el código HTML. Nos puede servir como ejemplo inicial, pero no es la forma recomendable de escribirlo, ya que lo ideal es separar el código HTML del código JavaScript (en archivos diferentes) para organizarnos mejor.

Enlazando desde un JS externo asociado en el HEAD del HTML

Esta otra forma de incluir Javascript en una página tiene la ventaja de, en el caso de necesitar incluir el código Javascript desde varios documentos HTML, no tendremos que volver a escribir dicho código, sino simplemente referenciar el nombre del mismo archivo Javascript a incluir en todas las páginas HTML.

Para mas organización creamos una carpeta, con el nombre que ustedes deseen, luego nuevo archivo, el archivo siempre después del nombre con la extensión .js

El texto js/index.js no es más que una referencia a un archivo index.js que se encuentra dentro de una carpeta js, situada en la misma carpeta que el documento HTML del ejemplo. Si en este archivo JavaScript, incluimos el console.log() de mensaje de bienvenida, ese mensaje debería aparecer en la consola JavaScript al cargar esta página.

Para relacionar un documento JavaScript desde una página web, igual que antes, utilizaremos la etiqueta <script> </script>, sólo que en este caso, haremos referencia al archivo JavaScript con un atributo src (source), como se ve en el siguiente ejemplo:

<script src = " js/demo.js " > </script>

Dentro del BODY del documento HTML

index.html

Normalmente cuando añadimos el JavaScript desde un documento HTML, lo hacemos desde el final del documento. Aunque lo podemos hacer desde cualquier parte, de esta manera, nos aseguramos primeramente de que hemos cargado el documento HTML, por si vamos a trabajar sobre alguno de los elementos de dicho documento.

Lo más recomendable es trabajar con un fichero externo que contenga el JavaScript separando ambas capas (tecnologías/lenguajes). Por lo que, lo más recomendable es trabajar siempre enlazando un documento de JS externo desde el final del BODY del HTML.

Escrito directamente en la parte inferior del BODY del HTML: index.html

Conceptos básicos

Los conceptos básicos en JavaScript incluyen:

• Comentarios: son líneas de texto que se ignoran cuando el código se ejecuta, lo que permite a los desarrolladores explicar lo que hace el código. Los comentarios en JavaScript se pueden crear de dos maneras: utilizando el símbolo "//" para comentarios de una sola línea, o utilizando "/*" y "*/" para comentarios de varias líneas.
• Indentación se refiere a la forma en que se organizan y estructuran los bloques de código. La indentación adecuada ayuda a que el código sea más fácil de leer y entender para los desarrolladores. En JavaScript, se utiliza un espacio en blanco o una tabulación para la indentación.
• Variables: son contenedores que almacenan valores como números, cadenas de texto, objetos y booleanos. Se definen con la palabra clave var, let o const.
• Operadores: son símbolos que realizan operaciones matemáticas, de comparación y lógicas. Ejemplos de operadores son +, -, *, /, ==, >, <, && y ||.
• Estructuras de control: permiten controlar el flujo de ejecución de un programa. Las estructuras de control incluyen if...else, for, while, do...while y switch.
• Funciones: son bloques de código que realizan una tarea específica. Las funciones se definen con la palabra clave function y se invocan usando su nombre seguido de paréntesis.
• Los bucles y ciclos son una parte fundamental de la programación en JavaScript. Un bucle permite que una sección de código se ejecute varias veces, mientras que un ciclo permite que una sección de código se ejecute mientras se cumpla una condición específica. Algunos de los bucles y ciclos más comunes en JavaScript son el bucle for, el bucle while, el bucle do-while y el ciclo if-else.
• Objetos: son entidades que contienen propiedades y métodos. Las propiedades son valores asociados al objeto, mientras que los métodos son funciones que realizan acciones en el objeto.
• Eventos: son acciones que ocurren en una página web, como hacer clic en un botón o desplazarse por la página. Los eventos se manejan en JavaScript usando funciones de manejo de eventos.
• DOM: el Document Object Model es una representación jerárquica de una página web. Permite a JavaScript acceder y modificar los elementos de una página web, como cambiar el contenido de un elemento o agregar nuevos elementos.

Comentarios

Los comentarios en nuestro código son fragmentos de texto o anotaciones que el navegador ignora y no repercuten en el programa. Sirven para dejar por escrito detalles importantes para el programador. De esta forma cuando volvamos al código, nos será más rápido comprenderlo. Es una buena costumbre comentar en la medida de lo posible nuestro código.

Cuando comenzamos a programar, por lo general, se nos suele decir que es una buena práctica mantener comentado nuestro código con anotaciones que faciliten la comprensión de las tareas que realizamos y los problemas que pretendemos solucionar, ya que el código que creamos no suele ser muy bueno, ni mucho menos descriptivo, ya que estamos en fase de aprendizaje.

A medida que conseguimos destreza programando, notaremos que los comentarios son cada vez más prescindibles, sin embargo, conviene no dejar de comentar, sino en su lugar, aprender a comentar mejor.

Una serie de consejos a tener presentes a la hora de dejar comentarios en nuestro código:

• * No comentes detalles redundantes. No escribas lo que haces, escribe por qué lo haces.
• * Mejor nombres de variables/funciones/clases descriptivas que comentarios descriptivos.
• * Sé conciso y concreto. Resume. No escribas párrafos si no es absolutamente necesario.
• * Intenta usar siempre el mismo idioma y estilo de comentarios.
• * Con el tiempo, los comentarios no se suelen mantener, modificar el código sí.

En JavaScript existen dos tipos de comentarios: los comentarios de una sola línea y los comentarios de múltiples líneas.

El primero de ellos se caracteriza porque comienza con // y sólo comenta la linea actual desde donde se escribe.

// comentarios de una sola línea. suelen explicar la siguiente linea  
nombre = "André";  // también se utilizan al final de una linea 

El segundo tipo se utiliza para hacer comentarios extensos que ocuparán varias líneas. Comienza por /* y comentará todo el texto que escribamos hasta que cerremos el comentario con un */.

<script> 
nombre = "André"; 
 /* Por otro lado, existen los comentarios múltiples de varias linea consecutivas, suelen utilizarlos para 
 explicaciones largas que requieren bastante espacio. 
</script>

Indentación

La indentación es una técnica de formateo del código en la que se utilizan espacios o tabuladores para organizar visualmente el código y resaltar su estructura. En JavaScript, la indentación se utiliza para indicar la estructura de un programa, especialmente en bloques de código como funciones, condicionales o bucles.

Un ejemplo de código con mala indentación sería el siguiente:

  function  factorial(n){ 
  if  (n === 0){ 
  return 1;
  }else{
  return  n * factorial(n - 1);
  }
  }
  

En este ejemplo, el código dentro de la función factorial no está correctamente indentado, lo que dificulta la lectura y comprensión del código. Ahora veamos el mismo código pero con buena indentación:

  function  factorial(n)  {
  if  (n === 0)  {
  return  1;
   }  else  { 
  return  n * factorial(n - 1);
  }
  }

En este ejemplo, cada nivel de bloque de código está indentado con 2 espacios, lo que hace que la estructura del código sea mucho más clara y fácil de leer.

Es importante tener en cuenta que la indentación no afecta al funcionamiento del código, pero sí puede mejorar la legibilidad y la facilidad de mantenimiento del mismo.

Variables

Las variables en JavaScript se utilizan para almacenar valores y datos. Para declarar una variable en JavaScript, se utiliza la palabra clave var, let o const. Por ejemplo:

• var miVariable = 42;


• let miOtraVariable = "Hola";


• const PI = 3.1416;

  <script>
  // declarando una variable con var 
  var miVariable =  42;
  // declarando una variable con let 
  let miOtraVariable =  "Hola";
  // declarando una variable con const 
  const PI =  3.1416;
  </script>

Es importante tener en cuenta que JavaScript es un lenguaje de tipado dinámico, lo que significa que no es necesario especificar el tipo de dato de una variable al declararla. El tipo de dato de una variable se determina automáticamente según el valor que se le asigna.

Nota: Las mayúsculas y minúsculas en los nombres de las variables de JavaScript importan. No es lo mismo una variable llamada nombre que una variable llamada Nombre, pueden contener valores diferentes.

Tipos de datos en JavaScript

En JavaScript, existen varios tipos de datos que se pueden asignar a una variable. Los principales tipos de datos son:

• Number: números enteros o decimales.
• String: cadenas de texto.
• Boolean: valores verdadero o falso.
• Null: valor nulo.
• Undefined: valor indefinido.
• Object: objetos, que pueden contener propiedades y métodos.
• Symbol: valores únicos e inmutables utilizados como identificadores de propiedades de objetos.

Variables var y let en JavaScript

En JavaScript, se pueden declarar variables utilizando la palabra clave var o la palabra clave let. La principal diferencia entre ambas es su alcance.

var: Es una palabra clave para declarar una variable en JavaScript. La variable declarada con var tiene un alcance de función, lo que significa que es accesible dentro de la función donde se declaró, incluso si se declara dentro de un bloque de código. Si se declara una variable con var fuera de una función, esta se convierte en una variable global y puede ser accesible en cualquier parte del código.

let: Es una palabra clave para declarar una variable en JavaScript. La variable declarada con let tiene un alcance de bloque, lo que significa que solo es accesible dentro del bloque de código donde se declaró. Si se declara una variable con let fuera de un bloque de código, se convierte en una variable global y puede ser accesible en cualquier parte del código, al igual que con var.

En este ejemplo, se declaran las variables x e y dentro de la función ejemplo(). La variable x se declara con var: y la variable y se declara con let:

Dentro del bloque de código if (true), se cambia el valor de la variable x y se declara una nueva variable y con un valor diferente. Debido a que var: tiene un alcance de función, la variable x se sobrescribe globalmente, mientras que let: mantiene su valor dentro del bloque de código.

Fuera del bloque de código if (true), se muestran los valores de ambas variables. La variable x tiene el valor que se le asignó dentro del bloque de código, mientras que y mantiene su valor original porque tiene un alcance de bloque.

Siempre que sea posible se debería utilizar let y const (ver a continuación), en lugar de var. Declarar variables mediante var se recomienda en fases de aprendizaje o en el caso de que se quiera mantener compatibilidad con navegadores muy antiguos utilizando ECMAScript 5, sin embargo, hay estrategias mejores a seguir, que utilizar var en la actualidad.

Constantes

De forma tradicional, JavaScript no incorporaba constantes. Sin embargo, en ECMAScript 2015 (ES6) se añade la palabra clave const, que inicializada con un valor concreto, permite crear variables con valores que no pueden ser cambiados. Es el mismo concepto de una variable, salvo que en este caso, la información que contiene es siempre la misma (no puede variar).

En el ejemplo anterior vemos un ejemplo de const, que funciona de forma parecida a let. Una buena práctica es escribir el nombre de la constante en mayúsculas, para identificar rápidamente que se trata de una constante y no una variable, cuando leemos código ajeno.

Nota: Realmente, las constantes de JavaScript son variables inicializadas a un valor específico y que no pueden redeclararse. No confundir con valores inmutables, ya que como veremos posteriormente, los objetos si pueden ser modificados aun siendo constantes.

Conclusiones: Hoy se ha visto las palabras reservadas que se pueden utilizar en JavaScript para definir variables: var, let y const. Empleando var y let para la definición de variables y const para la de constantes. Aunque aparentemente var y let parecen ser iguales esto no es así debido a que cada una tiene un alcance diferente. El uso de let tiene grandes ventajas frente a var ya que evita muchos problemas de codificación. Evitando que se alteren los valores de una variable de forma accidental, algo difícil de depurar. Por otro lado, cuando el valor asignado es una constante, es aconsejable utilizar const para indicar a otros programadores el objetivo de la variable, evitar cambios accidentales de la constante e indicar al mismo tiempo al intérprete de JavaScript que puede almacenar los datos de una forma más eficiente. Las ventajas que tiene el uso de let frente a var, hacen que ya no use nunca más var en mi código.

Los operadores

En JavaScript se utilizan para realizar operaciones matemáticas, comparaciones y lógicas. Aquí hay algunos ejemplos de operadores en JavaScript:

Operadores matemáticos

Para utilizar este código, copia el siguiente código y pégalo en tu archivo HTML: Para ver los resultados y a la vez pueden manipularlos para ir practicando con los mismos.

         <script> 
         var x = 5;
         var y = 2;
         var suma = x + y;
         var resta = x - y;
         var multiplicacion = x * y;
         var division = x / y;
         var modulo = x % y;
         document.write("Suma: " + suma + "<br>");
         document.write("Resta: " + resta + "<br>");
         document.write("Multiplicación: " + multiplicacion + "<br>");
         document.write("División: " + division + "<br>");
         document.write("Módulo: " + modulo + "<br>");
         </script>
        

Operadores de comparación

        <script>
        var x = 5; 
        var y = "5";
        var z = 10;
        document.write("x es igual a y: " + (x == y) + "<br>");
        document.write("x es igual a z: " + (x == z) + "<br>");
        document.write("x es igual a y (comparación estricta): " + (x === y) + "<br>");
        document.write("x es mayor que z: " + (x > z) + "<br>");
        document.write("x es menor que z: " + (x < z) + "<br>");
        document.write("x es mayor o igual que y: " + (x >= y) + "<br>");
        document.write("x es menor o igual que z: " + (x <= z) +"<br>");
        </script>
        

Operadores lógicos

        <script> 
        var x = 5; 
        var y = 10;
        var z = 15;
        document.write("x es mayor que y y menor que z: " + (x > y && x < z) + "<br>");
        document.write("x es mayor que y o menor que z: " + (x > y || x < z) +"<br>");
        document.write("no (x es mayor que y): " + !(x > y) + "<br>"); 
        </script>
      

Explicación del ultimo resultado, primero, se declara la variable x con un valor de 5, y la variable y con un valor de 10. Luego, se utiliza el operador de comparación mayor que (>) para comparar x con y, y se niega (!) el resultado utilizando el operador lógico not (no). La negación invierte el valor de la comparación, lo que significa que si x es mayor que y, el resultado de la comparación será falso (ya que se está negando), y si x no es mayor que y, el resultado de la comparación será verdadero.

Además de los operadores que ya mencionamos, aquí te presento algunos otros operadores que se utilizan en JavaScript:

Operadores de asignación

  <script> 
  var x = 5; 
  var y = 10; 
   x += y;  // Equivalente a x = x + y 
  document.write("x es igual a " + x);
  </script> 
 

En este ejemplo, primero se declaran dos variables: x y y, con los valores 5 y 10, respectivamente. Luego, se utiliza el operador de asignación compuesta += para sumar el valor de y a x, y asignar el resultado a x. Esto es equivalente a escribir x = x + y, lo que significa que el valor de x se incrementa en 10 (el valor de y). Finalmente, se usa la función document.write() para mostrar el resultado en la página web. En este caso, se muestra el mensaje "x es igual a 15", ya que 5 (valor inicial de x) + 10 (valor de y) = 15.

Operadores de incremento y decremento

  <script> 
var x = 5;   
 x++; // Equivalente a x = x + 1 
 document.write("x es igual a " + x + "<br>"); 
 x--; // Equivalente a x = x - 1  
 document.write("x es igual a " + x);
 </script> 

Operadores ternario

  <script> 
var edad = 18;   
var resultado =  (edad >= 18) ? "Eres mayor de edad" : "Eres menor de edad";  
document.write(resultado);
</script> 

Operadores de concatenación

<script>  
var nombre = "Juan";
var apellido = "Pérez";  
var nombreCompleto =  nombre + " " + apellido;  
document.write(nombreCompleto);
</script> 

Estos son solo algunos ejemplos más de operadores en JavaScript. Es importante conocerlos y saber cómo utilizarlos correctamente para poder programar de manera efectiva.

Estructuras de control

Las estructuras de control en JavaScript son herramientas fundamentales para el control del flujo de ejecución de un programa. Las estructuras de control permiten que el programa tome decisiones y realice diferentes acciones según ciertas condiciones.

Hay tres tipos principales de estructuras de control en JavaScript: estructuras condicionales, bucles y estructuras de control de excepciones.

La estructura condicional básica es el "if", la sintaxis básica del "if" es la siguiente:

    if  (condición) {
    // código a ejecutar si la condición es verdadera  
    }
  

Aquí, "condición" es una expresión que se evalúa como verdadera o falsa. Si la condición es verdadera, se ejecuta el código entre llaves. Si la condición es falsa, se salta ese código y se sigue ejecutando el código después del "if".

También se pueden agregar bloques "else if" y "else" para proporcionar diferentes caminos de ejecución en función de diferentes condiciones.

   if  (condición1) {
   // código a ejecutar si la condición1 es verdadera 
   } else if  (condición2) { 
   // código a ejecutar si la condición1 es falsa y la condición2 es verdadera 
   } else {  
   // código a ejecutar si todas las condiciones son falsas 
  }

Además del "if", existen otros operadores de comparación que se pueden utilizar en las condiciones, como "==", "!=", "<", ">", "<=", ">=", etc. También se pueden utilizar operadores lógicos como "&&" (y), "||" (o) y "!" (no) para combinar múltiples condiciones.

Un ejemplo simple de uso de estructuras condicionales en JavaScript sería:

  let  edad = 20;
   if  (edad >= 18) {
  console.log ("Eres mayor de edad");
   } else {  
  console.log ("Eres menor de edad");
  }
 

En este ejemplo, si la variable "edad" es mayor o igual a 18, se imprimirá "Eres mayor de edad" en la consola. De lo contrario, se imprimirá "Eres menor de edad".

Las estructuras condicionales, como if-else, switch y ternary, permiten que el programa tome decisiones basadas en ciertas condiciones.

Las estructuras condicionales son muy útiles para tomar decisiones en función de ciertas condiciones. El if-else es la estructura más común y sencilla de utilizar. Pero también podemos utilizar switch cuando tenemos múltiples opciones. El operador ternario (?) es otra forma compacta de escribir una estructura condicional en una sola línea de código

Por ejemplo, el siguiente código muestra cómo utilizar una estructura switch para mostrar un mensaje dependiendo del día de la semana:

 let dia = new  Date().getDay();
 let mensaje;
  switch (dia)  {
  case 0: 
    mensaje = "Hoy es domingo";
 break; 
  case 1: 
    mensaje = "Hoy es lunes";
 break;
  case 2: 
    mensaje = "Hoy es martes";
 break;
  case 3: 
    mensaje = "Hoy es miércoles";
 break;
  case 4: 
    mensaje = "Hoy es jueves";
 break;
  case 5: 
    mensaje = "Hoy es viernes";
 break;
  case 6: 
    mensaje = "Hoy es sábado";
 break;
   default: 
    mensaje = "Día inválido";
}
console.log (mensaje);

En este ejemplo, utilizamos la función getDay() del objeto Date() para obtener el día de la semana actual. Luego utilizamos la estructura switch para asignar un mensaje dependiendo del valor de la variable dia.

Bucles

Los bucles, como for, while y do-while, permiten que el programa repita ciertas acciones mientras se cumpla una condición. Por ejemplo, el siguiente código utiliza un bucle for para imprimir los números del 1 al 5:

  for (let i = 1; i <= 5; i++) {
  console.log (i); 
  }

Las estructuras de control de excepciones, como try-catch, permiten que el programa maneje errores y excepciones de manera controlada. Por ejemplo, el siguiente código utiliza una estructura try-catch para manejar un error de división por cero:

  try  {
  let  resultado = 10 / 0;
  console.log  (resultado); 
 } catch (error) {
    console.log  ("Error:", error.message);
 }

En el ejemplo, el resultado de la división 10/0 es infinito (Infinity en inglés) y por lo tanto, se imprimirá en la consola. Cabe señalar que este resultado se debe a que JavaScript sigue las reglas matemáticas de la división, y en matemáticas, cualquier número dividido entre 0 se considera infinito.

En el bloque try, la operación de división se ejecuta sin problemas, y por lo tanto, no se produce ningún error. Por lo tanto, el código dentro del bloque catch no se ejecuta. Si hubiera ocurrido algún error en la operación, el bloque catch se habría ejecutado en su lugar y habría impreso un mensaje de error en la consola.

  try  {
  let  resultado = 10 / "tres";
  console.log  (resultado); 
 } catch (error) {
    console.log  ("Error:", error.message);
 }

En este ejemplo, el programa intenta dividir 10 por "tres" que es un String, lo cual resulta en un error de división por el string. La estructura try-catch permite que el programa maneje este error de manera controlada y muestre un mensaje de error en la consola.

Estas son solo algunas de las estructuras de control disponibles en JavaScript. Es importante comprender cómo y cuándo utilizar cada una de ellas para poder escribir programas eficientes y efectivos.

Funciones

Las funciones son bloques de código que realizan una tarea específica y que pueden ser llamados y reutilizados en diferentes partes de un programa. Las funciones son una parte fundamental de la programación, ya que nos permiten crear código modular, reducir la redundancia de código y facilitar el mantenimiento y la depuración.

En JavaScript, se pueden definir funciones utilizando la palabra clave function, seguida del nombre de la función, los parámetros que recibe (opcional) y el bloque de código que se ejecutará cuando la función sea llamada.

Por ejemplo, aquí se define una función llamada sumar que toma dos parámetros a y b, suma estos parámetros y retorna el resultado:

function sumar(a, b) {
return a + b;
}

Luego, podemos llamar a la función pasando los valores que queremos sumar como argumentos:

let resultado =  sumar (5, 7); 
 console.log (resultado); // Output: 12

Es importante destacar que las funciones pueden recibir parámetros y pueden retornar valores. Los parámetros son valores que la función espera recibir como entrada, mientras que el valor de retorno es el resultado de la tarea que la función realiza. Además, en JavaScript, las funciones son tratadas como objetos, lo que significa que se les puede asignar a variables, pasar como argumentos a otras funciones, y tener propiedades y métodos.

Además, las funciones también pueden ser anónimas, lo que significa que no tienen un nombre asignado. En este caso, se les puede asignar a una variable:

let sumar =  function(a, b) {
return a + b;
};  

También se pueden crear funciones flecha (arrow functions), que son una forma más compacta de definir funciones. Por ejemplo, la función sumar anterior se puede escribir de esta manera:

let sumar =  (a, b) => a + b;

En resumen, las funciones son una parte fundamental de la programación en JavaScript, y son útiles para crear código modular, reducir la redundancia de código y facilitar el mantenimiento y la depuración. Las funciones pueden recibir parámetros y retornar valores, y pueden ser anónimas o flecha.

Funciones flecha:

Las funciones flecha (arrow functions) son una forma abreviada de escribir funciones en JavaScript. Se definen usando la sintaxis (parametros) => expresion, y su uso más común es como funciones de devolución de llamada (callbacks). A diferencia de las funciones tradicionales, las funciones flecha no tienen su propio contexto this, por lo que se comportan de manera más predecible. Por ejemplo:

// Función tradicional
function suma(a, b) {
return a + b;
}

// Función flecha equivalente
const suma =  (a, b) => a + b;

Cierres:

Un cierre (closure) es una función que tiene acceso a las variables de su entorno léxico (es decir, las variables definidas en su ámbito exterior), incluso después de que la función haya finalizado su ejecución. Esto se debe a que el cierre mantiene una referencia a su entorno léxico en memoria. Los cierres son útiles para crear funciones que pueden recordar su estado interno. Por ejemplo:

function  contador() {
let  count =  0;
return   function() {
count++; 
 console.log (count);
}
}

const incrementar =  contador(); 
 incrementar(); // 1
 incrementar(); // 2
 incrementar(); // 3

Funciones recursivas:

Una función recursiva es aquella que se llama a sí misma dentro de su propia definición. Este tipo de funciones son útiles para realizar operaciones que implican la repetición de un mismo proceso. Por ejemplo, la función factorial es una función recursiva:

function  factorial(n) {
if  (n === 0 || n === 1) {
return  1;
 } else { 
return  n * factorial(n - 1);
}
}
 console.log (factorial(5)); // 120 

Esta función se llama "factorial" y calcula el factorial de un número. El factorial de un número se define como el producto de todos los enteros positivos desde 1 hasta ese número. Por ejemplo, el factorial de 5 es 5 x 4 x 3 x 2 x 1 = 120.

La función utiliza un enfoque recursivo para calcular el factorial. En la primera línea, se verifica si el número es 0 o 1. Si es así, se devuelve 1, ya que el factorial de 0 y 1 es 1. Si el número es mayor que 1, se devuelve el producto del número y el factorial del número menos 1. Esto se repite recursivamente hasta que se llega al caso base de 0 o 1.

En la línea final, se llama a la función con el argumento 5 y se imprime el resultado en la consola. Esto dará como resultado la salida de 120, que es el factorial de 5.

Funciones de orden superior:

Las funciones de orden superior son aquellas que toman una o más funciones como argumentos y/o devuelven una función como resultado. Estas funciones son muy útiles para la programación funcional y la composición de funciones. Por ejemplo:

function  operar(x, y, fn) {
return  fn(x, y);
}

function  sumar(a, b) {
return  a + b;
}
  
function  restar(a, b) {
return  a - b;
}

 console.log (operar(3, 4, sumar)); // 7 
 console.log (operar(3, 4, restar)); // -1 

Métodos de función:

Los métodos de función son funciones que se definen como propiedades de un objeto. Estas funciones pueden acceder a las propiedades y métodos del objeto a través de la palabra clave this. Por ejemplo:

const  objeto = {
 nombre:  "Juan",
 edad:  30,
 saludar:  function() {
 console.log (`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`); 
}
};

objeto.saludar();  // Hola, mi nombre es Juan y tengo 30 años. 

Es importante tener en cuenta que los métodos de función también pueden ser definidos utilizando la sintaxis de funciones flecha, pero en ese caso no tendrán su propio contexto this.

ciclos

Los ciclos o bucles en programación son estructuras que permiten repetir una o varias instrucciones mientras se cumpla una condición determinada. En JavaScript existen tres tipos de ciclos:

1. while: Este ciclo se repite mientras se cumpla una condición. La sintaxis es la siguiente:

while  (condición) {
 // instrucciones a repetir
}

 //Por ejemplo:

let  contador =  1;
while  (contador <= 10) {
 console.log(contador); 
contador++;
}

Este código imprimirá los números del 1 al 10.

2. do-while: Este ciclo es similar al ciclo while, pero se ejecuta al menos una vez antes de verificar la condición. La sintaxis es la siguiente:

do  {
 // instrucciones a repetir 
} while  (condición);

 //Por ejemplo:

javascript Copy code
let  contador =  1;

do  { 
 console.log(contador);  
contador++;
} while  (contador <= 10);

Este código también imprimirá los números del 1 al 10.

3. for: Este ciclo permite repetir un bloque de código un número determinado de veces. La sintaxis es la siguiente:

for  (inicialización; condición; incremento) {
 // instrucciones a repetir 
}
  
 //Por ejemplo: 

for  (let i = 1; i <= 10; i++) {
 console.log(i);  
}

Este código también imprimirá los números del 1 al 10.

Es importante tener cuidado al usar ciclos, ya que pueden generar loops infinitos si no se definen correctamente las condiciones de salida.

Objetos y Arrays

Un objeto es una colección de propiedades, y cada propiedad es una asociación entre un nombre (también llamado clave) y un valor. Los objetos en JavaScript se declaran con llaves {}, y cada propiedad se separa con una coma ,. Aquí tienes un ejemplo:

let  persona = {
nombre:  "Juan",
edad:  25,
ciudad:  "Madrid" 
  };

En este ejemplo, persona es un objeto que tiene tres propiedades: nombre, edad y ciudad. La propiedad nombre tiene un valor de "Juan", la propiedad edad tiene un valor de 25 y la propiedad ciudad tiene un valor de "Madrid".

Para acceder a una propiedad de un objeto, se utiliza la notación de puntos (objeto.propiedad). Por ejemplo, para obtener el valor de la propiedad nombre del objeto persona, se haría así:

 console.log(persona.nombre);  // "Juan" 

También es posible acceder a una propiedad utilizando la notación de corchetes (objeto["propiedad"]), lo cual es útil cuando el nombre de la propiedad es una expresión. Por ejemplo:

let  propiedad =  "edad";
 console.log(persona[propiedad]);  // 25 

Para modificar el valor de una propiedad de un objeto, simplemente se asigna un nuevo valor a esa propiedad:

persona.edad =  26;
 console.log(persona.edad);  // 26 

Arrays

Un array es una colección ordenada de elementos, donde cada elemento puede ser de cualquier tipo de dato. Los arrays en JavaScript se declaran con corchetes [], y cada elemento se separa con una coma ,. Aquí tienes un ejemplo:

let  frutas =  ["manzana", "pera", "plátano"];

En este ejemplo, frutas es un array que tiene tres elementos: "manzana", "pera" y "plátano".

Para acceder a un elemento de un array, se utiliza la notación de corchetes (array[indice]). El índice es un número entero que indica la posición del elemento en el array. Es importante recordar que en JavaScript, los índices empiezan en 0, es decir, el primer elemento del array tiene índice 0. Por ejemplo, para obtener el segundo elemento del array frutas, se haría así:

 console.log(frutas[1]);  // "pera" 

Para modificar un elemento de un array, simplemente se asigna un nuevo valor a ese elemento:

frutas[0] =  "kiwi";
 console.log(frutas);  // ["kiwi", "pera", "plátano"] 

Eventos y Manipulación del DOM

Los eventos son una parte fundamental de la programación web y permiten que las páginas web sean interactivas y respondan a la acción del usuario. En JavaScript, los eventos se manejan mediante funciones de manejo de eventos que se ejecutan cuando ocurre un evento.

Para asignar una función de manejo de eventos a un elemento HTML, primero se debe seleccionar el elemento usando JavaScript y luego llamar al método addEventListener(). Este método toma dos argumentos: el nombre del evento (por ejemplo, "click" para un clic del mouse) y la función de manejo de eventos que se debe ejecutar cuando ocurra el evento.

Por ejemplo, si se tiene un botón HTML con el id "myButton", se podría agregar un manejador de eventos de clic con el siguiente código:

const  button =  document.getElementById("myButton");
 button.addEventListener("click", function() {
 console.log("El botón fue presionado"); 
});

En este caso, la función de manejo de eventos es una función anónima que simplemente escribe un mensaje en la consola.

Además de los eventos del mouse, hay muchos otros eventos que se pueden manejar en JavaScript, como eventos de teclado, eventos de carga de página y eventos de cambio de entrada. Los nombres de los eventos son cadenas específicas que se pueden encontrar en la documentación de la API de eventos de JavaScript.

La manipulación del DOM, por otro lado, se refiere a la capacidad de cambiar el contenido y la estructura de una página web mediante el uso de JavaScript. El DOM es una representación de la estructura de una página web que se puede manipular mediante JavaScript para agregar, eliminar o modificar elementos HTML.

Para manipular el DOM en JavaScript, se utiliza la API del DOM, que proporciona métodos y propiedades para seleccionar y modificar elementos HTML. Por ejemplo, para seleccionar un elemento HTML, se puede usar el método document.getElementById() y para cambiar el contenido de un elemento HTML, se puede usar la propiedad innerHTML.

Por ejemplo, para cambiar el texto de un elemento HTML con el id "myHeading", se puede usar el siguiente código:

const  heading =  document.getElementById("myHeading");
 heading.innerHTML = "Nuevo texto para el encabezado";

En este caso, la propiedad innerHTML se usa para establecer el contenido del elemento HTML seleccionado.

En resumen, los eventos y la manipulación del DOM son habilidades clave en la programación web con JavaScript. Los eventos permiten que las páginas web sean interactivas y respondan a la acción del usuario, mientras que la manipulación del DOM permite que los desarrolladores cambien el contenido y la estructura de una página web para lograr el efecto deseado.

Frameworks y Bibliotecas

frameworks y bibliotecas más populares en JavaScript:

jQuery: es una biblioteca ligera y rápida que simplifica la manipulación del DOM, el manejo de eventos, la animación y las solicitudes AJAX en JavaScript. Permite escribir menos código para lograr más funcionalidad y es compatible con una amplia variedad de navegadores.

React: es un framework desarrollado por Facebook que permite construir interfaces de usuario interactivas y escalables. Utiliza un modelo de componentes para crear aplicaciones web complejas de forma modular y eficiente. Además, se integra fácilmente con otras bibliotecas y frameworks de JavaScript.

Angular: es un framework de desarrollo web de código abierto desarrollado por Google. Se utiliza para construir aplicaciones web de una sola página (SPA) y aplicaciones móviles nativas. Angular utiliza un modelo de componentes y servicios para crear aplicaciones web escalables y altamente mantenibles.

Vue: es un framework progresivo para la construcción de interfaces de usuario. Se enfoca en la capa de vista de una aplicación y permite crear componentes reutilizables y modularizar el código de la aplicación. Vue es altamente adaptable y se puede integrar fácilmente con otras bibliotecas y frameworks.

Cada framework o biblioteca tiene sus propias características y ventajas, y la elección dependerá de las necesidades del proyecto y de la experiencia del desarrollador. Es importante investigar y familiarizarse con cada uno para tomar la mejor decisión en cuanto a su implementación en un proyecto específico.

Ejemplos de codigo de JavaScript.

Para cambiar el color de fondo de una página al hacer clic en un botón.

En este ejemplo, se agrega un botón a la página HTML y se le asigna un controlador de eventos que llama a la función 'cambiarColor()' cuando se hace clic en él. La función 'cambiarColor()' cambia el color de fondo de la página asignando una nueva propiedad 'backgroundColor' al elemento 'body' de la página.

  <body>
  
  <script>
  function  cambiarColor() {
  document.body.style.backgroundColor = "blue";
  }
  </script>

  <button onclick="cambiarColor()">Cambiar color</button>

  </body>

Mostrar un mensaje de bienvenida al usuario con un prompt:

Este código JavaScript muestra una ventana emergente que solicita al usuario que ingrese su nombre utilizando la función prompt(). Luego, el nombre ingresado se almacena en la variable nombre. Después, se usa la función alert() para mostrar un mensaje de bienvenida que incluye el nombre ingresado.

La función prompt() permite al usuario ingresar información a través de una ventana emergente en el navegador. La función alert() muestra un mensaje en una ventana emergente en el navegador. Estas funciones son útiles para interactuar con los usuarios y solicitar o mostrar información en la página web.

  <body>
  
  <script>
  var  nombre = prompt("Por favor, ingresa tu nombre:");
  alert("¡Bienvenido, " + nombre + "!");
  </script>

  </body>

Aquí te muestro un ejemplo completo en el que puedes escribir un texto y al hacer clic en un botón, se mostrará en la página web.

  <body>
  <label  for="texto">  Escribe un texto: </label>
  <input  type="text" id="texto">
  <button  onclick="mostrarTexto()"> Mostrar </button>
  <div  id="resultado"> </div>
  <script>
  function   mostrarTexto()  {
  var  texto = document.getElementById("texto").value;
  document.getElementById("resultado").innerHTML = texto;
  }
  </script>
  </body>

En este ejemplo, primero se crea un formulario con un campo de entrada de texto y un botón. Luego, se crea un elemento div con un ID resultado donde se mostrará el texto ingresado por el usuario.

El botón tiene un atributo onclick que llama a una función llamada mostrarTexto(). Esta función obtiene el valor del campo de entrada de texto usando el método getElementById() y lo asigna al elemento div con el ID resultado usando el método innerHTML.

De esta manera, cuando el usuario escribe un texto en el campo de entrada de texto y hace clic en el botón "Mostrar", el texto se muestra en la página web debajo del botón.

Tres ejemplos de JavaScript

Este código incluye tres ejemplos de JavaScript que se ejecutan al presionar los botones correspondientes. Los resultados de cada ejemplo se muestran debajo de cada botón en el elemento p correspondiente.

    <body>
    <button  onclick="ejemplo1()">Ejemplo 1 </button>
    <p  id="ejemplo1Resultado" ></p>
    
    <button  onclick="cambiarColor()"> Cambiar color </button>
    <p  id="mensaje" ></p>

    <button  onclick="ejemplo3()"> Ejemplo 3 </button>
    <p  id="ejemplo3Resultado" ></p>

   <script>

   // Ejemplo 1: mostrar un mensaje en la consola
   function  ejemplo1() {
    console.log("Hola, mundo!");
    document.getElementById("ejemplo1Resultado").innerHTML = "Se ejecutó el ejemplo 1";
    }
         
   // Ejemplo 2: cambiar el color de fondo del documento aleatoriamente
    var colores = ["red", "green", "blue", "yellow", "purple", "orange"];
     
    function  cambiarColor() {
    var randomColor = colores[Math.floor(Math.random() * colores.length)];
    document.body.style.backgroundColor = randomColor;
    document.getElementById("mensaje").innerHTML = "El color de fondo ha cambiado a " + randomColor;
    }
         
    // Ejemplo 3: generar un número aleatorio entre 1 y 10
    function  ejemplo3() {
    var numero = Math.floor(Math.random() * 10) + 1;
    document.getElementById("ejemplo3Resultado").innerHTML = "El número aleatorio generado es: " + numero;
    }
    </script>
    </body>
  

En el ejemplo 2, la variable colores es una lista de colores disponibles. La función cambiarColor() elige un color aleatorio de la lista utilizando la función Math.random() y lo aplica como el nuevo color de fondo de la página. También se actualiza un mensaje en el párrafo con el ID "mensaje" para indicar el color que se ha aplicado. Cada vez que se hace clic en el botón, el color de fondo cambiará a uno nuevo y se actualizará el mensaje correspondiente.

La función ejemplo3() genera un número aleatorio entre 1 y 10 utilizando el método Math.random() que devuelve un número aleatorio entre 0 y 1 (exclusivo). Luego, se multiplica por 10 y se utiliza Math.floor() para redondear hacia abajo y obtener un número entero entre 0 y 9. Finalmente, se le suma 1 para obtener un número entre 1 y 10.

El resultado se muestra en el elemento HTML con el id "ejemplo3Resultado" utilizando document.getElementById("ejemplo3Resultado"). innerHTML = "El número aleatorio generado es: " + numero; que asigna el valor de la variable numero a la propiedad innerHTML del elemento HTML.

Conclusión, JavaScript es un lenguaje de programación esencial para el desarrollo de aplicaciones web interactivas y dinámicas. La manipulación del DOM y los eventos son dos de las herramientas más poderosas de JavaScript para crear páginas web más atractivas y funcionales.

En esta página, hemos cubierto los conceptos básicos de JavaScript, desde las variables y los tipos de datos hasta la manipulación del DOM y los eventos. También hemos visto algunos ejemplos de cómo se pueden utilizar los eventos y la manipulación del DOM para crear páginas web más interactivas.

Esperamos que esta introducción a JavaScript te haya dado una buena base para empezar a aprender más sobre este lenguaje de programación esencial. Con práctica y dedicación, puedes llegar a dominar JavaScript y crear aplicaciones web impresionantes y funcionales. ¡Adelante!"

Hay muchas referencias y enlaces útiles que se pueden utilizar para aprender más sobre JavaScript y mejorar tus habilidades. Aquí te dejo algunas sugerencias:

W3Schools: este sitio web ofrece tutoriales y ejemplos prácticos sobre JavaScript, así como otros lenguajes de programación web. También tiene una sección de pruebas interactivas que te permiten practicar tus habilidades en tiempo real.

www.w3schools.com

La documentación de Mozilla Developer Network (MDN): esta es una excelente fuente de información sobre JavaScript y la manipulación del DOM. Incluye una guía detallada del lenguaje, así como una referencia completa de las API del DOM.

developer.mozilla

Subir