B3-T9: JavaScript, Frameworks Frontend y Lenguajes Backend
JavaScript es el lenguaje web más preguntado del examen. El foco está en: tipos y coerción (=== vs ==), manipulación del DOM, promesas/async y propagación de eventos. La segunda mitad del tema cubre PHP (sintaxis, Laravel) y Python (datos básicos).
JAVASCRIPT
Fuente: ECMA-262 (ECMAScript Language Specification) — ecma-international.org. MDN Web Docs (developer.mozilla.org) — CC BY-SA.
FUNDAMENTOS
| Característica | Valor |
|---|---|
| Creador | Brendan Eich, Netscape (1995). 10 días de desarrollo |
| Estándar | ECMAScript (ECMA-262). Ediciones: ES5 (2009), ES6/ES2015, ES2016-ES2024 |
| Tipado | Dinámico y débilmente tipado |
| Paradigma | Multi-paradigma: imperativo, funcional, orientado a objetos (prototipos) |
| Ejecución | Interpretado con JIT compilation. Single-threaded con event loop |
| Entornos | Navegador (cliente) + Node.js (servidor, 2009) |
VARIABLES Y TIPOS
| Declaración | Scope | Reasignable | Hoisting |
|---|---|---|---|
var | Función | Sí | Sí (se eleva como undefined) |
let | Bloque | Sí | No (TDZ — Temporal Dead Zone) |
const | Bloque | No | No (TDZ) |
| Tipo primitivo | typeof | Ejemplo |
|---|---|---|
number | "number" | 42, 3.14, NaN, Infinity |
string | "string" | "hola", 'mundo', `template ${var}` |
boolean | "boolean" | true, false |
undefined | "undefined" | Variable declarada sin valor |
null | "object" (bug histórico) | Ausencia intencionada de valor |
symbol | "symbol" | Symbol("id") — ES6, identificadores únicos |
bigint | "bigint" | 9007199254740993n — ES2020 |
Pregunta clásica:typeof null === "object"es un bug del lenguaje desde 1995, nunca corregido por compatibilidad.typeof NaN === "number"también es contraintuitivo.
OPERADORES CLAVE PARA EL EXAMEN
| Operador | Nombre | Ejemplo | Resultado |
|---|---|---|---|
== | Igualdad abstracta (con coerción) | "5" == 5 | true |
=== | Igualdad estricta (sin coerción) | "5" === 5 | false |
!= | Desigualdad abstracta | "5" != 5 | false |
!== | Desigualdad estricta | "5" !== 5 | true |
?? | Nullish coalescing (ES2020) | null ?? "default" | "default" |
?. | Optional chaining (ES2020) | obj?.prop?.sub | undefined si alguno es null/undefined |
... | Spread / Rest | [...arr] / function(...args) | Expande o recoge elementos |
Regla de oro: SIEMPRE usar===. La coerción de==produce resultados impredecibles:"" == false→ true,0 == ""→ true,null == undefined→ true.
FUNCIONES ESPECIALES
| Función | Qué hace | Dato examen |
|---|---|---|
eval(string) | Ejecuta código JavaScript desde un string | NUNCA usar: vulnerabilidad de inyección, rendimiento pobre |
parseInt(str, radix) | Parsea string a entero con base | parseInt("08", 10) → 8. Siempre pasar radix |
parseFloat(str) | Parsea string a decimal | Se para al primer carácter no numérico |
isNaN() / Number.isNaN() | Comprueba si es NaN | isNaN("abc") → true (coerción). Number.isNaN("abc") → false (estricto) |
btoa(str) | String → Base64 | Binary to ASCII |
atob(str) | Base64 → String | ASCII to Binary |
JSON.stringify(obj) | Objeto → JSON string | Serialización |
JSON.parse(str) | JSON string → Objeto | Deserialización |
ARRAYS — MÉTODOS CLAVE
| Método | Muta | Retorna | Función |
|---|---|---|---|
push() / pop() | Sí | Longitud / Elemento | Añadir/quitar al final |
unshift() / shift() | Sí | Longitud / Elemento | Añadir/quitar al principio |
splice(i, n, ...items) | Sí | Elementos eliminados | Insertar/eliminar en posición |
slice(start, end) | No | Nuevo array | Subarray (copia superficial) |
map(fn) | No | Nuevo array | Transforma cada elemento |
filter(fn) | No | Nuevo array | Filtra por condición |
reduce(fn, init) | No | Valor acumulado | Reduce a un solo valor |
find(fn) | No | Elemento o undefined | Primer elemento que cumple |
forEach(fn) | No | undefined | Itera (sin retorno) |
includes(val) | No | Boolean | ¿Contiene el valor? |
sort(fn) | Sí | Array ordenado | Ordena (default: lexicográfico) |
CLOSURES Y ARROW FUNCTIONS
| Concepto | Descripción |
|---|---|
| Closure | Función que "recuerda" el scope donde fue creada, incluso después de que ese scope haya terminado |
| Arrow function | (params) => expresión. No tiene su propio this (hereda del scope padre) |
| this en función normal | Depende de cómo se llama (dynamic binding) |
| this en arrow | Se fija al scope léxico (lexical binding) |
PROMESAS Y ASYNC/AWAIT
| Concepto | Descripción |
|---|---|
| Promise | Objeto que representa un valor futuro. Estados: pending → fulfilled o rejected |
.then(onFulfilled) | Se ejecuta cuando la promesa se resuelve |
.catch(onRejected) | Se ejecuta cuando la promesa falla |
.finally(fn) | Se ejecuta siempre (limpieza) |
Promise.all([]) | Espera a TODAS. Falla si cualquiera falla |
Promise.allSettled([]) | Espera a TODAS. Retorna resultado de cada una (fulfilled o rejected) |
Promise.race([]) | Retorna la primera que se resuelva (o rechace) |
async function | Función que siempre retorna una Promise |
await | Pausa la ejecución hasta que la Promise se resuelva. Solo dentro de async |
AJAX Y FETCH API
| Tecnología | API | Modelo |
|---|---|---|
| XMLHttpRequest (XHR) | Legacy. new XMLHttpRequest() | Callbacks (onreadystatechange) |
| Fetch API | Moderno. fetch(url, options) | Promises. Retorna Response object |
Tip examen: Fetch no rechaza la promesa por errores HTTP (404, 500). Hay que comprobar response.ok. Solo rechaza por errores de red.
EVENT LOOP Y MODELO DE CONCURRENCIA
| Componente | Función |
|---|---|
| Call Stack | Pila de ejecución (LIFO). Una sola — single-threaded |
| Web APIs | setTimeout, fetch, DOM events — ejecutados por el navegador fuera del stack |
| Callback Queue (Task Queue) | Cola de callbacks listos (macrotasks: setTimeout, I/O) |
| Microtask Queue | Prioridad mayor: Promises (.then), MutationObserver, queueMicrotask |
| Event Loop | Mueve callbacks de las colas al call stack cuando este está vacío |
Orden de ejecución: Call Stack → Microtasks (todas) → 1 Macrotask → Microtasks → 1 Macrotask... Las Promises se resuelven ANTES que setTimeout(0).
PROPAGACIÓN DE EVENTOS DOM
| Fase | Dirección | Descripción |
|---|---|---|
| 1. Capturing | Raíz → Target | El evento desciende por el árbol DOM |
| 2. Target | — | El evento llega al elemento que lo originó |
| 3. Bubbling | Target → Raíz | El evento asciende por el árbol DOM |
| Método | Función |
|---|---|
event.stopPropagation() | Detiene la propagación (no llega a ancestros) |
event.preventDefault() | Evita la acción por defecto (ej: no enviar formulario, no seguir enlace) |
addEventListener(type, fn, true) | El tercer parámetro true = escuchar en fase capturing (default: bubbling) |
FRAMEWORKS Y HERRAMIENTAS FRONTEND
| Framework | Creador | Lenguaje | Características clave |
|---|---|---|---|
| React | Meta (Facebook) | JSX (JS + HTML) | Virtual DOM, componentes, hooks, unidireccional. Librería (no framework completo) |
| Angular | TypeScript | Framework completo: router, forms, HTTP, DI. Two-way binding | |
| Vue.js | Evan You | SFC (.vue) | Reactivity system, composition API, progressive framework |
| Svelte | Rich Harris | Svelte syntax | Compilador (no runtime Virtual DOM). Resultado = vanilla JS |
| Next.js | Vercel | React + TypeScript | SSR, SSG, ISR, API routes, App Router |
| Herramienta | Función |
|---|---|
| npm | Gestor de paquetes de Node.js. package.json |
| Webpack | Bundler: agrupa módulos JS, CSS, imágenes en bundles |
| Vite | Bundler moderno: dev server ultra rápido (ESM nativo), build con Rollup |
| Babel | Transpilador: ES6+ → ES5 para navegadores antiguos |
| TypeScript | Superset tipado de JS. Compila a JS. Creado por Microsoft |
| ESLint | Linter: análisis estático de código JS/TS |
| Prettier | Formateador automático de código |
TYPESCRIPT
| Concepto | Descripción |
|---|---|
| Qué es | Superset de JavaScript con tipos estáticos. Todo JS válido es TS válido |
| Compilador | tsc (TypeScript Compiler): .ts → .js |
| Tipos básicos | string, number, boolean, any, void, never, unknown |
| Interfaces | interface User { name: string; age: number; } |
| Generics | function identity<T>(arg: T): T |
| Enums | enum Color { Red, Green, Blue } |
| Union types | string | number |
LENGUAJES BACKEND Y STACKS
STACKS DE DESARROLLO WEB
| Stack | Componentes | Lenguaje |
|---|---|---|
| LAMP | Linux + Apache + MySQL + PHP | PHP |
| LEMP | Linux + Engine-X (NGINX) + MySQL/MariaDB + PHP | PHP |
| MEAN | MongoDB + Express.js + Angular + Node.js | JavaScript (full-stack) |
| MERN | MongoDB + Express.js + React + Node.js | JavaScript |
| MEVN | MongoDB + Express.js + Vue.js + Node.js | JavaScript |
| JAMstack | JavaScript + APIs + Markup (estático, CDN) | JavaScript |
PHP
Fuente: PHP Manual (php.net/manual) — documentación oficial, licencia PHP. Creado por Rasmus Lerdorf (1995).
| Concepto | PHP |
|---|---|
| Tipado | Dinámico, débilmente tipado (type juggling). Desde PHP 7: type hints opcionales |
| Variables | Prefijo $: $nombre = "valor"; |
| Strings | "interpolación $var" (comillas dobles) vs 'literal' (comillas simples) |
| Arrays | Indexados y asociativos: $arr = ["clave" => "valor"]; |
| Comparación | == (con coerción), === (estricta, tipo + valor) |
| Spaceship | <=> (PHP 7): retorna -1, 0, 1 para ordenación |
| Null coalescing | $x = $y ?? "default"; (PHP 7) |
| Concatenación | Con punto: "Hola " . $nombre |
| Superglobales | $_GET, $_POST, $_SESSION, $_COOKIE, $_SERVER, $_FILES, $_REQUEST |
| OOP en PHP | Sintaxis |
|---|---|
| Clase | class Persona { public $nombre; } |
| Herencia | class Alumno extends Persona { } |
| Interfaz | interface Serializable { public function serializar(); } |
| Trait | trait Loggable { } + use Loggable; (herencia horizontal) |
| Namespace | namespace App\Models; |
| Autoload | Composer con PSR-4: composer.json, vendor/autoload.php |
LARAVEL
| Componente | Función |
|---|---|
| Eloquent ORM | Active Record pattern. Modelos = tablas. User::where('age', '>', 18)->get() |
| Blade | Motor de plantillas: {{ $var }}, @if, @foreach, @extends |
| Artisan | CLI: php artisan make:model, php artisan migrate |
| Migrations | Versionado del esquema de BD en código PHP |
| Middleware | Interceptores de peticiones HTTP (auth, CORS, logging) |
| Routes | Route::get('/users', [UserController::class, 'index']) |
| Composer | Gestor de paquetes PHP (composer.json). Equivalente a npm/Maven |
| Producto PHP | Tipo |
|---|---|
| WordPress | CMS (~43% de la web). PHP + MySQL |
| Drupal | CMS (gubernamental, corporativo) |
| Moodle | LMS (e-learning) |
| Magento | E-commerce |
| MediaWiki | Wiki (Wikipedia) |
PYTHON
Fuente: Python Documentation (docs.python.org) — PSF License. Creado por Guido van Rossum (1991).
| Concepto | Python |
|---|---|
| Tipado | Dinámico, fuertemente tipado (no hay coerción implícita) |
| Sintaxis | Indentación obligatoria (sin llaves). Legibilidad como principio |
| Paradigma | Multi-paradigma: OOP, funcional, imperativo |
| Intérprete | CPython (referencia), PyPy (JIT), Jython (JVM), IronPython (.NET) |
| Gestor paquetes | pip + PyPI (pypi.org). Entornos virtuales: venv, virtualenv |
| Versión actual | Python 3.x (Python 2 EOL en 2020) |
| Framework Python | Tipo | Características |
|---|---|---|
| Django | Full-stack | ORM integrado, admin automático, "batteries included". Patrón MTV |
| Flask | Microframework | Ligero, extensible, sin ORM/forms incluido |
| FastAPI | API framework | Async, auto-docs OpenAPI, type hints, rendimiento alto |
NODE.JS
| Concepto | Descripción |
|---|---|
| Qué es | Runtime de JavaScript en el servidor. Motor V8 (Chrome). Creado por Ryan Dahl (2009) |
| Modelo | Event-driven, non-blocking I/O, single-threaded (event loop) |
| Gestor paquetes | npm (default), yarn, pnpm. Registro: npmjs.com |
| Módulos | CommonJS (require()) y ESM (import/export) |
| Framework principal | Express.js — minimalista, middleware-based |
| Alternativas | Deno (seguro por defecto, TypeScript nativo), Bun (ultra rápido, JSC engine) |
FUENTES PÚBLICAS
Este resumen ha sido elaborado íntegramente a partir de fuentes de dominio público. No se ha utilizado material con copyright de terceros ni material de preparadores.
| Fuente | Tipo | Referencia |
|---|---|---|
| ECMA-262 — ECMAScript Specification | Estándar | ecma-international.org |
| MDN Web Docs | Documentación comunitaria | developer.mozilla.org (CC BY-SA) |
| PHP Manual | Documentación oficial | php.net/manual (licencia PHP) |
| Python Documentation | Documentación oficial | docs.python.org (PSF License) |
| Node.js Documentation | Documentación oficial | nodejs.org/docs (MIT) |
| TypeScript Documentation | Documentación oficial | typescriptlang.org (Apache 2.0) |