05- 💻 Sintaxis Básica de JavaScript Explicada

Acordeón de los Índices de JavaScript

Índice de los temas

• JavaScript Values
• JavaScript Literals
• Variables
• Operators
• Expressions
• Keywords
• Comments
• Identifiers / Names
• JavaScript is Case Sensitive
• Camel Case
• Character Set

---

Lección: JavaScript Syntax

💡 JavaScript Values

💎 En JavaScript, un **valor** es una **pieza de información** que puede ser manipulada por el programa. Estos valores son la **materia prima** con la que trabajan los scripts para realizar cálculos, mostrar datos y tomar decisiones. Los valores se pueden asignar a **variables**, utilizar directamente en el código (como **literales**) o ser el resultado de **operaciones** y **expresiones**.

JavaScript reconoce varios tipos de valores, que se conocen como **tipos de datos**. Algunos de los tipos de datos primitivos más importantes son:

• Números (Number): Representan valores numéricos, que pueden ser enteros o de punto flotante (decimales).
  let edad = 30; let precio = 99.99; let pi = 3.14;
• Cadenas de texto (String): Representan secuencias de caracteres, utilizadas para mostrar texto. Se definen entre comillas simples (') o dobles (").
  let nombre = "Carlos"; let saludo = '¡Hola!';
• Booleanos (Boolean): Representan un valor de verdad, que puede ser true (verdadero) o false (falso). Son fundamentales para la lógica condicional.
  let esMayorDeEdad = true; let tieneDescuento = false;
• Null: Es un valor especial que indica la ausencia intencional de un valor.
  let usuario = null; // Indica que no hay un objeto usuario en este momento
• Undefined: Es un valor especial que indica que una variable no ha sido inicializada (no se le ha asignado un valor) o que una función no devuelve ningún valor explícitamente.
  let ciudad; // 'ciudad' es undefined porque no se le ha asignado un valor function ejemplo() { // No hay sentencia 'return', por lo que devuelve undefined }
• Símbolos (Symbol): Introducidos en ES6, son valores primitivos únicos e inmutables que se utilizan a menudo como claves de propiedades de objetos para evitar colisiones de nombres.
  const idUnico = Symbol('id');

Además de los tipos de datos primitivos, JavaScript también tiene **objetos (Objects)**, que son colecciones de propiedades (pares clave-valor) y pueden contener otros valores, incluyendo funciones. Los arrays son un tipo especial de objeto utilizado para almacenar colecciones ordenadas de elementos.

🔑 En resumen: Los valores son la información fundamental que manipulan los programas JavaScript. Comprender los diferentes tipos de valores es crucial para escribir código que funcione correctamente y pueda procesar datos de manera efectiva.

📜 JavaScript Literals

💎 Los **literales** en JavaScript son **valores fijos** que se escriben directamente en el código fuente. Representan **datos constantes** que no cambian durante la ejecución del programa. Son una forma directa de expresar valores de diferentes tipos de datos.

Tipos de literales en JavaScript:

• Literales numéricos: Representan números. Pueden ser enteros, de punto flotante (decimales) o utilizar notación exponencial.
  10 // Literal entero 3.14 // Literal de punto flotante -5 // Literal entero negativo 6.02e23 // Literal en notación exponencial
• Literales de cadena de texto (String literals): Representan secuencias de caracteres encerradas entre comillas simples (') o dobles (").
  'Hola, mundo' "Este es otro texto" 'Puedes usar "comillas dobles" dentro de simples' "Y 'comillas simples' dentro de dobles"
• Literales booleanos: Representan los valores de verdad true (verdadero) y false (falso).
  true false
• Literales null: Representa la ausencia intencional de un valor y se escribe como null.
  null
• Literales undefined: Representa un valor que no está definido y se escribe como undefined. Sin embargo, aunque técnicamente es un literal, generalmente se encuentra como el valor predeterminado de variables no inicializadas o el resultado de ciertas operaciones. Se recomienda usar null para indicar la ausencia intencional de un valor.
  undefined
• Literales de objeto: Representan objetos y se definen mediante pares clave-valor encerrados entre llaves {}.
  { nombre: "Ana", edad: 25 } {} // Objeto vacío
• Literales de array: Representan arrays (listas ordenadas de valores) y se definen mediante valores separados por comas encerrados entre corchetes [].
  [1, 2, 3, 4, 5] ['manzana', 'banana', 'cereza'] [] // Array vacío
• Literales de función: También conocidas como expresiones de función, definen funciones directamente en el código.
  function(a, b) { return a + b; } // Función anónima
• Literales de expresión regular: Se utilizan para definir patrones de búsqueda y se encierran entre barras diagonales / /.
  /patron/g
• Literales de plantilla (Template literals): Introducidos en ES6, permiten incrustar expresiones dentro de cadenas de texto utilizando backticks (` `).
  let nombre = "Pedro"; `Hola, ${nombre}!`

🔑 En resumen: Los literales son la forma más directa de representar valores fijos en el código JavaScript. Comprender los diferentes tipos de literales es fundamental para escribir código que manipule datos de manera efectiva.

🔑 Variables

📦 Las **variables** en JavaScript son como **etiquetas** que pones a **contenedores** para almacenar y referirte a **valores** (como los literales que vimos antes). Estos contenedores pueden guardar diferentes tipos de datos y, a diferencia de los literales, el valor que almacenan puede **cambiar** durante la ejecución del programa.

Para **declarar** (crear) una variable en JavaScript, se utilizan las siguientes palabras clave:

• var:** Se utilizaba en versiones anteriores de JavaScript. Tiene un ámbito de función o global, lo que puede llevar a comportamientos inesperados en programas más complejos.
• let:** Introducida en ES6 (ECMAScript 2015), proporciona un ámbito de bloque, lo que significa que la variable solo es accesible dentro del bloque de código donde se declara (y en bloques anidados). Se recomienda usar let para variables cuyo valor puede cambiar.
• const:** También introducida en ES6, se utiliza para declarar variables cuyo valor **no debe ser reasignado** después de la inicialización. También tiene un ámbito de bloque. Es importante notar que, para los objetos y arrays declarados con const, las propiedades o elementos *sí* pueden modificarse, pero la variable en sí no puede apuntar a un nuevo objeto o array.

Sintaxis para declarar variables:

var nombreVariable; // Declaración usando var let otraVariable; // Declaración usando let const VALOR_FIJO = 3.14; // Declaración e inicialización usando const

Inicialización (asignación de un valor):

Se puede asignar un valor a una variable en el momento de la declaración o posteriormente utilizando el operador de asignación (=).

let mensaje = "Hola"; // Declaración e inicialización let contador; // Declaración contador = 0; // Inicialización posterior var edad = 25; // Declaración e inicialización con var

Ejemplos de uso de variables:

let cantidad = 10; cantidad = cantidad + 5; // El valor de 'cantidad' ahora es 15 const gravedad = 9.8; // gravedad = 10; // Esto causaría un error porque 'gravedad' se declaró con const let nombre = "Alice"; console.log("El nombre es:", nombre); // Muestra "El nombre es: Alice"

👍 Buenas prácticas al usar variables:

• Utiliza const por defecto para las variables cuyo valor no debe cambiar.
• Utiliza let para las variables cuyo valor puede cambiar.
• Evita usar var en código moderno debido a su ámbito confuso.
• Elige nombres de variables descriptivos y significativos.
• Sigue convenciones de nomenclatura (como camelCase).

🔑 En resumen: Las variables son esenciales para almacenar y manipular datos en JavaScript. La elección entre var, let y const depende de si el valor de la variable necesita ser reasignado y del ámbito deseado.

🖨️ JavaScript Print

📄 En JavaScript, la impresión de contenido desde una página web generalmente se refiere a **iniciar la función de impresión del navegador**, permitiendo al usuario obtener una versión en papel o en formato PDF de la página actual o de contenido específico.

El método window.print():

La forma más común y directa de iniciar la impresión desde JavaScript es utilizando el método window.print(). Al llamar a esta función, se abre el cuadro de diálogo de impresión del navegador, permitiendo al usuario seleccionar su impresora, configurar las opciones de impresión y confirmar la impresión.

Ejemplo de uso:

Puedes asociar la llamada a window.print() a un evento, como el clic de un botón:

<button onclick="window.print()" style="padding: 10px 20px; font-size: 16px; cursor: pointer;">Imprimir esta página</button>

Al hacer clic en este botón, se abrirá el diálogo de impresión del navegador para la página actual.

Controlando el contenido impreso con CSS:

Aunque JavaScript inicia el proceso de impresión, puedes usar **CSS** para controlar cómo se ve la página cuando se imprime. Esto se logra utilizando las **media queries** específicas para la impresión (@media print).

Ejemplo de CSS para impresión:

<style> @media print { body { font-size: 12pt; } .no-imprimir { display: none; /* Ocultar elementos que no deben imprimirse */ } a::after { content: " (" attr(href) ")"; /* Mostrar la URL después de los enlaces */ } } </style> <div class="no-imprimir"> <button onclick="window.print()">Imprimir</button> </div> <p>Este es el contenido que se imprimirá.</p> <a href="https://www.ejemplo.com">Enlace de ejemplo</a>

En este ejemplo, el CSS dentro de @media print se aplicará solo cuando la página se esté imprimiendo. Ocultamos los elementos con la clase .no-imprimir y mostramos la URL después de los enlaces.

🔑 En resumen: La forma principal de iniciar la impresión desde JavaScript es con window.print(). Para controlar el aspecto del contenido impreso, se utilizan las media queries de CSS específicas para la impresión (@media print).

📜 Statements

🧩 Los **statements** o **sentencias** en JavaScript son las **instrucciones** que le indicas al navegador que debe **ejecutar**. Imagina que cada sentencia es un paso en una receta o una orden en una secuencia de acciones. Un programa JavaScript está formado por una o más de estas sentencias, que se ejecutan en el orden en que aparecen, de arriba a abajo.

Las sentencias en JavaScript pueden ser de muchos tipos, realizando diversas acciones. Algunas de las más comunes incluyen:

• Declaraciones de variables: Se utilizan para crear y, opcionalmente, inicializar variables (let, const, var).
  let nombre = "Carlos"; const PI = 3.14159;
• Sentencias de asignación: Se utilizan para asignar valores a las variables (operador =).
  edad = 31;
• Sentencias de control de flujo: Controlan el orden en que se ejecutan las sentencias, permitiendo tomar decisiones (if, else, switch) y realizar repeticiones (for, while, do...while).
  if (edad > 18) { console.log("Es mayor de edad."); }
• Llamadas a funciones: Ejecutan bloques de código reutilizables (funciones).
  saludar("Ana");
• Sentencias de expresión: Cualquier expresión válida en JavaScript que también puede tener efectos secundarios (por ejemplo, una asignación o una llamada a una función).
  contador++;
• Sentencias de retorno: Se utilizan dentro de las funciones para devolver un valor y finalizar la ejecución de la función (return).
  function sumar(a, b) { return a + b; }

🔑 En resumen: Las statements son las unidades básicas de acción en JavaScript. Cada línea de código que realiza una tarea es una sentencia. Los programas JavaScript son secuencias de estas sentencias que el navegador ejecuta para lograr un comportamiento específico.

💻 JavaScript Programs

🚀 Un **programa JavaScript** es esencialmente una **secuencia de instrucciones** o **statements** que el navegador interpreta y ejecuta para llevar a cabo una tarea específica o para añadir interactividad a una página web. Estas instrucciones se ejecutan generalmente en el **orden en que aparecen** en el código, de forma secuencial.

Los programas JavaScript pueden variar enormemente en su complejidad, desde unas pocas líneas de código que realizan una acción simple hasta miles de líneas que componen aplicaciones web completas y sofisticadas.

Características clave de los programas JavaScript:

• Secuencialidad: Las sentencias se ejecutan una tras otra, a menos que una estructura de control de flujo (como un if o un bucle for) altere este orden.
• Lógica: Los programas implementan una lógica específica para manipular datos, responder a eventos del usuario, modificar el DOM (Document Object Model) y realizar otras acciones.
• Interacción: Muchos programas JavaScript están diseñados para interactuar con el usuario a través de eventos (clics, movimientos del ratón, etc.) y modificar la página en respuesta a estas interacciones.
• Modularidad (a menudo): Los programas más grandes suelen estar organizados en funciones y módulos para facilitar la reutilización del código y el mantenimiento.

Ejemplo simple de un programa JavaScript:

// Este es un programa JavaScript simple let mensaje = "¡Hola, mundo!"; // Declaración y asignación de una variable console.log(mensaje); // Llamada a una función para mostrar el mensaje function saludar(nombre) { // Declaración de una función let saludo = "¡Hola, " + nombre + "!"; console.log(saludo); } saludar("Usuario"); // Llamada a la función saludar

En este ejemplo, el programa realiza las siguientes acciones en secuencia:

1. Declara una variable llamada mensaje y le asigna el valor "¡Hola, mundo!".
2. Llama a la función console.log() para mostrar el valor de la variable mensaje en la consola.
3. Declara una función llamada saludar que toma un argumento nombre y muestra un saludo personalizado en la consola.
4. Llama a la función saludar con el argumento "Usuario".

🔑 En resumen: Un programa JavaScript es una secuencia lógica de statements que trabajan juntas para realizar una tarea. La clave para entender los programas JavaScript es comprender cómo se ejecutan las sentencias en orden y cómo las estructuras de control pueden alterar este flujo para crear un comportamiento dinámico e interactivo.

📑 JavaScript Statements

📝 Como mencionamos anteriormente, una **sentencia JavaScript** es una **instrucción individual** que le dice al navegador qué acción realizar. Cada línea de código JavaScript que ejecuta una tarea específica es una sentencia.

Las sentencias pueden realizar diversas acciones, como:

• Declarar variables.
• Asignar valores a variables.
• Realizar operaciones aritméticas.
• Llamar a funciones.
• Crear estructuras de control de flujo (decisiones y bucles).
• Devolver valores desde funciones.

El punto y coma (;):

Tradicionalmente, **cada sentencia JavaScript debe terminar con un punto y coma (;)**. El punto y coma actúa como un **separador**, indicando el final de una sentencia y permitiendo que múltiples sentencias se escriban en la misma línea (aunque esto generalmente se desaconseja por razones de legibilidad).

Ejemplos de sentencias:

let x; // Declaración de una variable x = 5; // Asignación de un valor let y = 10; // Declaración e inicialización let suma = x + y; // Operación aritmética y asignación console.log(suma); // Llamada a una función if (suma > 10) { // Sentencia de control de flujo console.log("La suma es mayor que 10."); }

En este ejemplo, cada línea (excepto el bloque if) es una sentencia individual terminada por un punto y coma.

Omisión del punto y coma (Semicolon Insertion - ASI):

Curiosamente, en muchos casos, JavaScript puede **inferir** el final de una

🔠 Expressions

Las expresiones en JavaScript son combinaciones de valores, variables, operadores y funciones que JavaScript evalúa y devuelve un resultado.

🔑 Keywords

Las palabras clave en JavaScript son términos reservados que tienen un significado especial en el lenguaje, como `if`, `else`, `function`, entre otros.

💬 Comments

Los comentarios en JavaScript son líneas de texto que no se ejecutan. Se utilizan para describir el código. Pueden ser de una sola línea (`//`) o de múltiples líneas (`/* ... */`).

🔠 Identifiers / Names

Los identificadores en JavaScript son nombres que se usan para identificar variables, funciones, objetos, entre otros. Deben seguir ciertas reglas y convenciones.

🔡 JavaScript is Case Sensitive

JavaScript es sensible a las mayúsculas y minúsculas. Esto significa que `variable`, `Variable`, y `VARIABLE` se consideran identificadores diferentes.

🐪 Camel Case

El estilo Camel Case es una convención de nombres donde se combinan palabras sin espacios, y cada palabra comienza con mayúscula, excepto la primera. Ejemplo: `miVariableDeEjemplo`.

🔠 Character Set

El conjunto de caracteres en JavaScript define los caracteres válidos que se pueden usar en el código fuente. Esto incluye letras, números y algunos símbolos especiales.

Ir al indice

Publicar un comentario