Fundamentos de JavaScript para Desarrollo Web Frontend

Introducción a JavaScript

JavaScript es un lenguaje de scripting ligero diseñado para controlar aplicaciones. Como lenguaje embebido, su sintaxis básica es minimalista. ECMAScript define su epsecificación estándar.

Elementos Básicos

Declaraciones

Las unidades de ejecución son líneas que finalizan con punto y coma:

let valor = 15;

Identificadores

Nombres válidos compuestos por letras, $, _ y números (no iniciales). Palabras reservadas no permitidas.

Varaibles

Hoisting: Las declaraciones se mueven al inicio del ámbito:

console.log(miVariable); // undefined
let miVariable = 25;

Integración en HTML

<body>
  <script>
    let dato = 10;
  </script>
  
  <script src="script.js"></script>
  
  <script src="https://cdn.ejemplo.js"></script>
</body>

Comentarios y Salidas

// Comentario de línea
/*
Comentario 
multilínea
*/

alert("Alerta");
document.write("En página");
console.log("En consola");

Tipos de Datos

Primitivos: Number, String, Boolean
Objetos: Colecciones de valores
Especilaes: null, undefined

const usuario = { 
  nombre: "Ana", 
  edad: 30 
};

Operadores

Aritméticos

let x = 10;
x++; // 11 (post-incremento)
++x; // 12 (pre-incremento)

Comparación

5 == "5";  // true (igualdad débil)
5 === "5"; // false (igualdad estricta)

Ternario

const acceso = (edad >= 18) ? "Permitido" : "Denegado";

Control de Flujo

Condicionales

if (temperatura > 30) {
  console.log("Caluroso");
} else if (temperatura > 20) {
  console.log("Templado");
} else {
  console.log("Frío");
}

Switch

switch(diaSemana) {
  case 1: 
    console.log("Lunes");
    break;
  default:
    console.log("Fin de semana");
}

Bucles

// For
for(let i = 0; i < 5; i++) {
  console.log(i);
}

// While
let n = 0;
while(n < 3) {
  console.log(n++);
}

Manejo de Cadenas

const texto = "JavaScript";
console.log(texto.length); // 10
console.log(texto.substring(0,4)); // "Java"
console.log(texto.indexOf("Script")); // 4

Arrays

const numeros = [10, 20, 30];
numeros.push(40); // [10,20,30,40]
numeros.pop();    // [10,20,30]

// Iteración
for(const num of numeros) {
  console.log(num);
}

Funciones

function calcularTotal(precio, impuesto) {
  return precio * (1 + impuesto);
}
console.log(calcularTotal(100, 0.16)); // 116

Etiquetas: JavaScript ecmascript frontend web development DOM

Publicado el 7-12 04:56

Friki Work