Biblioteca-Tech/01. Realizando Álgebra Básica en la Consola del Navegador con about:blank at main · Tammy-Escobar/Biblioteca-Tech · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
# Realizando Álgebra Básica en la Consola del Navegador con about:blank

## 1. Introducción: Descubriendo las Herramientas Matemáticas del Navegador

Nuestro navegador web es mucho más que una simple herramienta para navegar por internet. En realidad, es un entorno potente que nos ofrece capacidades para hacer cálculos matemáticos. Dentro de este entorno, encontramos la página about:blank y la consola de JavaScript como herramientas fundamentales para nuestros experimentos y cálculos.

### 1.1. La Página about:blank: Nuestro Espacio en Blanco

La página about:blank es una característica básica de todos los navegadores web. Es como una hoja en blanco que nos permite trabajar sin distracciones. Cuando escribimos about:blank en la barra de direcciones, obtenemos una página vacía sin contenido, estilos ni programas corriendo.

Esta página aparece en diferentes situaciones:
- Cuando abrimos una nueva pestaña
- Como página de inicio predeterminada
- Como espacio seguro para probar código

Es importante saber que about:blank no es un virus ni software malicioso. Es un estado normal y seguro del navegador. De hecho, esta página nos ayuda con la seguridad porque:
- Actúa como un ambiente aislado (sandbox) para probar código
- Nos protege de ventanas emergentes peligrosas
- Crea un espacio seguro para ejecutar nuestros programas

Además, about:blank es muy eficiente porque:
- Carga muy rápido
- Usa poca memoria
- Es ideal para computadoras lentas o conexiones lentas a internet

### 1.2. La Consola de JavaScript: Nuestro Espacio de Pruebas Interactivo

La consola de JavaScript es una herramienta poderosa que encontramos en todos los navegadores modernos. Su función principal es ayudarnos a probar y depurar (encontrar errores) en nuestro código JavaScript.

La consola funciona como un entorno REPL (Read-Evaluate-Print-Loop), que significa:
- **Read** (Leer): Lee lo que escribimos
- **Evaluate** (Evaluar): Calcula el resultado
- **Print** (Imprimir): Muestra el resultado
- **Loop** (Repetir): Vuelve a empezar

Esta característica nos permite ver los resultados de nuestros cálculos inmediatamente, lo que es muy útil para aprender y experimentar con matemáticas.

## 2. Accediendo a la Consola del Navegador

### 2.1. Cómo Abrir la Consola

Podemos acceder a la consola de diferentes maneras:

**Usando atajos de teclado:**
- En Windows: `Ctrl + Shift + I` o `F12`
- En Mac: `Cmd + Opt + I`

**Usando el menú del navegador:**
- Chrome/Edge: "Más herramientas > Herramientas para desarrolladores"
- Firefox: "Desarrollador web > Consola web"
- Safari: "Desarrollar > Mostrar inspector web" (primero debemos activar el menú Desarrollar en las preferencias)

Una vez que abrimos las herramientas de desarrollo, debemos hacer clic en la pestaña "Consola". Aquí es donde escribiremos y ejecutaremos nuestros comandos JavaScript.

### 2.2. Realizando Operaciones Aritméticas Básicas

En la consola podemos usar los operadores matemáticos estándar para hacer cálculos:

**Operadores básicos:**
- **Suma (+)**: `2 + 2` = 4
- **Resta (-)**: `10 - 3` = 7
- **Multiplicación (*)**: `10 * 3` = 30
- **División (/)**: `10 / 2` = 5
- **Resto (%)**: `15 % 2` = 1 (el resto de dividir 15 entre 2)
- **Potencia (**)**: `10 ** 3` = 1000 (10 elevado a la 3)

**Orden de las operaciones:**
Debemos recordar que las operaciones siguen un orden específico (PEMDAS):
1. Paréntesis
2. Exponentes
3. Multiplicación y División (de izquierda a derecha)
4. Suma y Resta (de izquierda a derecha)

**Ejemplos:**
- `1 + 1 * 3` = 4 (primero se multiplica, luego se suma)
- `(1 + 1) * 3` = 6 (primero se suma dentro del paréntesis)

**Nota importante sobre decimales:**
JavaScript a veces tiene problemas con números decimales. Por ejemplo:
- `0.1 + 0.2` puede dar `0.30000000000000004` en lugar de `0.3`

Esto es normal en la programación, pero debemos tenerlo en cuenta para cálculos que requieren mucha precisión.

## 3. Operadores de Comparación

Los operadores de comparación nos permiten comparar valores y siempre nos devuelven `true` (verdadero) o `false` (falso):

### 3.1. Operadores de Igualdad

- **Igual (==)**: `5 == 5` → `true`
- **Diferente (!=)**: `5 != 10` → `true`
- **Estrictamente igual (===)**: `5 === '5'` → `false` (porque uno es número y otro es texto)
- **Estrictamente diferente (!==)**: `5 !== '5'` → `true`

### 3.2. Operadores de Comparación Numérica

- **Mayor que (>)**: `10 > 5` → `true`
- **Menor que (<)**: `5 < 10` → `true`
- **Mayor o igual (>=)**: `10 >= 10` → `true`
- **Menor o igual (<=)**: `5 <= 10` → `true`

## 4. Operadores de Asignación

Los operadores de asignación nos ayudan a guardar valores en variables:

### 4.1. Asignación Básica

```javascript
let x = 3;  // Guardamos el valor 3 en la variable x
```

### 4.2. Asignación Compuesta

Estos operadores nos permiten modificar el valor de una variable basándose en su valor actual:

- **Suma y asigna (+=)**: `x += 4` es lo mismo que `x = x + 4`
- **Resta y asigna (-=)**: `x -= 2` es lo mismo que `x = x - 2`
- **Multiplica y asigna (*=)**: `x *= 3` es lo mismo que `x = x * 3`
- **Divide y asigna (/=)**: `x /= 2` es lo mismo que `x = x / 2`
- **Módulo y asigna (%=)**: `x %= 3` es lo mismo que `x = x % 3`

### 4.3. Incremento y Decremento

- **Incremento (++)**: Suma 1 a la variable
  - `++x` (pre-incremento): suma 1 antes de usar el valor
  - `x++` (post-incremento): usa el valor y luego suma 1

- **Decremento (--)**: Resta 1 a la variable
  - `--x` (pre-decremento): resta 1 antes de usar el valor
  - `x--` (post-decremento): usa el valor y luego resta 1

## 5. Ejemplos Prácticos

### 5.1. Calculadora Básica

```javascript
// Operaciones simples
let resultado = 10 + 5;  // 15
resultado *= 2;          // 30
resultado /= 3;          // 10

// Comparaciones
let esIgual = resultado === 10;  // true
let esMayor = resultado > 5;     // true
```

### 5.2. Trabajando con Variables

```javascript
let edad = 25;
let añosTranscurridos = 5;

// Calcular nueva edad
edad += añosTranscurridos;  // edad ahora es 30

// Verificar si es mayor de edad
let esMayorDeEdad = edad >= 18;  // true
```

## 6. Consejos Importantes

1. **Prueba todo**: La consola es perfecta para experimentar. No tengas miedo de probar diferentes operaciones.

2. **Usa paréntesis**: Cuando tengas dudas sobre el orden de las operaciones, usa paréntesis para ser claro.

3. **Cuidado con los decimales**: Recuerda que JavaScript puede tener imprecisiones con números decimales.

4. **Diferencia entre == y ===**: Usa `===` cuando quieras comparar tanto el valor como el tipo de dato.

5. **Practica regularmente**: La consola del navegador es una herramienta gratuita y siempre disponible para practicar.

## 7. Conclusión

La consola del navegador es una herramienta poderosa y accesible que nos permite realizar cálculos matemáticos y operaciones algebraicas básicas. Con about:blank como nuestro espacio de trabajo seguro y la consola como nuestra calculadora interactiva, tenemos todo lo necesario para explorar conceptos matemáticos y de programación.

La naturaleza interactiva de la consola, donde podemos ver resultados inmediatamente, la convierte en una excelente herramienta para aprender y experimentar. Es el punto de partida perfecto para cualquiera que quiera adentrarse en el mundo de la programación y las matemáticas computacionales.