Fundamentos de JavaScript: Introducción y Conceptos Básicos

Tabla de Contenido

  1. Integrcaión de JavaScript en páginas web

  2. Métodos del objeto window

  3. Propiedades del objeto window

  4. Declaración e inicialización de variables

  5. Elevación de declaraciones con var

  6. Tipos de datos primitivos

  7. Integración de JavaScript en páginas web



<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de JavaScript</title>
    <style>
        .contenedor {
            width: 400px;
            height: 400px;
            background-color: #3498db;
        }
    </style>
</head>
<body>
    <!-- JavaScript en línea -->
    <div class="contenedor" onclick="alert('¡Clic detectado!')"></div>

    <!-- JavaScript interno -->
    <script>
        console.log("Ejecución de script interno");
    </script>

    <!-- JavaScript externo -->
    <script src="./script-externo.js"></script>
</body>
</html>
  1. Métodos del objeto window

<script>
    // Método alert: muestra un cuadro de diálogo con un mensaje y un botón Aceptar.
    window.alert("Bienvenido a la aplicación");

    // Método confirm: cuadro de diálogo con opciones Aceptar y Cancelar.
    const confirmarAccion = window.confirm("¿Desea guardar los cambios?");

    // Método prompt: cuadro de diálogo para entrada de usuario.
    const nombreUsuario = window.prompt("Ingrese su nombre de usuario:");
</script>
  1. Propiedades del objeto window

<script>
    // Propiedad console.log: imprime mensajes en la consola del navegador.
    window.console.log("Depuración en progreso");

    // Propiedad console.dir: muestra una representación interactiva de un objeto.
    window.console.dir(document);

    // Propiedad document.write: escribe contenido directamente en el documento HTML.
    window.document.write("<p style='color: #e74c3c;'>Contenido dinámico insertado</p>");
</script>
  1. Declaración e inicialización de variables

<script>
    // Declaración de una variable con var.
    var contadorVisitas;

    // Asignación de un valor.
    contadorVisitas = 5;

    // Inicialización directa en la declaración.
    var tasaConversion = 0.75;

    console.log("Número de visitas:", contadorVisitas);
    console.log("Tasa de conversión:", tasaConversion);

    // Declaración múltiple de variables.
    var precioUnitario, cantidadStock;
    precioUnitario = 29.99;
    cantidadStock = 150;

    // Declaración e inicialización múltiple en una sola línea.
    var clienteID = 1001, estadoActivo = true;
</script>
  1. Elevación de declaraciones con var

<script>
    // El navegador mueve las declaraciones al inicio del contexto, pero no las asignaciones.
    console.log(valorActual); // Muestra undefined porque la variable está declarada pero no asignada.
    var valorActual;

    valorActual = 42;
    console.log(valorActual); // Ahora muestra 42.
</script>
  1. Tipos de datos primitivos

<script>
    // Tipo Boolean: representa valores lógicos verdadero o falso.
    var esValido = true;
    var estaActivo = false;
    console.log("Estado válido:", esValido);
    console.log("Estado activo:", estaActivo);

    // Tipo Number: incluye enteros, decimales y notación científica.
    var cantidad = 100;
    var precio = 45.99;
    var temperatura = -5.5;
    var poblacion = 1.5e6;
    console.log("Cantidad:", cantidad);
    console.log("Precio:", precio);
    console.log("Temperatura:", temperatura);
    console.log("Población estimada:", poblacion);

    // Tipo String: secuencias de caracteres entre comillas.
    var nombreCompleto = "Ana García";
    var mensajeError = 'Archivo no encontrado';
    var tituloLibro = "\"Cien años de soledad\"";
    console.log("Nombre:", nombreCompleto);
    console.log("Error:", mensajeError);
    console.log("Libro:", tituloLibro);

    // Tipo Undefined: variable declarada pero sin valor asignado.
    var sinDefinir;
    console.log("Valor sin definir:", sinDefinir);

    // Tipo Null: representa la ausencia intencional de cualquier valor.
    var referenciaNula = null;
    console.log("Referencia nula:", referenciaNula);
</script>

Etiquetas: JavaScript Window Object variables Data Types Hoisting

Publicado el 6-7 18:33