GUIA DE LABORATORIO 4 INTRODUCCION MULTIMEDIA FRONTEND JAVASCRIPT

1. Guía Unificada de Laboratorios
Código FLA-23 v.00
Página 1 de 1
1. Titulo
Práctica: Desarrollo de una Calculadora de Direcciones IP en HTML, CSS y JavaScript
2. Objetivo
Construir una calculadora web interactiva que determine la clase de una dirección IP (A, B
o C), la máscara por defecto y el número de hosts disponibles, reforzando el aprendizaje
de tipos de variables, tipos de datos, operadores, condicionales, ciclos y funciones en
JavaScript.
3. Marco Teórico
Dirección IP: Identificador numérico en una red basado en el protocolo IP.
Clases de IP:
• Clase A (0–127)
• Clase B (128–191)
• Clase C (192–223)
Máscara de subred: Define red y hosts en una IP.
Hosts disponibles: 2^(bits de host) - 2.
JavaScript – Tipos de Variables:
• var: ámbito global.
• let: ámbito de bloque.
• const: constante inmutable.
Tipos de Datos: string, number, boolean, object, array, undefined, null.
Operadores: Realizan cálculos (ejemplo: Math.pow()).
Condicionales: if...else para tomar decisiones.
Ciclos: Repeticiones de código, ejemplo for.
Funciones: Bloques reutilizables de código.
4. Materiales, Equipos e Insumos
Software:
• Editor de Código: Visual Studio Code (VS Code) es el editor recomendado,
aunque cualquier editor de texto plano es suficiente.
• Navegador Web: Un navegador moderno como Google Chrome, Mozilla Firefox o
Microsoft Edge para visualizar la página web.
• Plugins recomendados:

2. o Live Server (para ejecutar en tiempo real).
o Sublime Text Monokai Theme (interfaz).
o HTMLHint y Stylelint (linters para validar código).
Archivos Digitales:
• Una carpeta de proyecto para organizar todos los archivos del sitio.
• Un archivo HTML (index.html), un archivo CSS (styles.css) y un archivo JavaScript
(main.js).
5. Procedimiento
Siga los siguientes pasos para construir una página web interactiva desde cero.
1. Configuración del Entorno:
o Cree una nueva carpeta en su escritorio con un nombre descriptivo, como
mi-proyecto-web.
o Dentro de esta carpeta, cree la siguiente estructura de archivos y carpetas,
que es una práctica recomendada:
o mi-proyecto-web/
o ├── css/
o │ └── styles.css
o ├── js/
o │ └── script.js
o └── index.html
o Abra VS Code y abra la carpeta que acaba de crear (Archivo -> Abrir
carpeta...).

3. 2. Estructuración con HTML:
Paso 2.1: Abra el archivo
index.html.

4. 3. Estilización con CSS:
• Paso 3.1: Abra el archivo styles.css.
o Dentro de este archivo, escriba las reglas CSS para darle estilo a los
elementos de su página.

5. Paso 4. Programación en JavaScript
• Declarar variables (var, let, const) y mostrar tipos de datos.
• Crear la función calcularClase() que:
1. Valide la dirección IP.
2. Use ciclos for para recorrer octetos.
3. Apliques condicionales para determinar la clase de IP.
4. Use operadores matemáticos para calcular hosts.
5. Retorne un objeto con clase, máscara y hosts.
• Asociar la función al campo input para que el cálculo se realice en tiempo real.

7. Paso 5. Prueba en GitHub con VS Code
1. Inicializar repositorio:
git init
2. Conectar a GitHub:
git remote add origin <url_repositorio>
git branch -M main
git push -u origin main
3. Instalar Live Server y ejecutar para ver la página en tiempo real.
6. Bibliografía
• Mozilla Developer Network (MDN). "JavaScript Guide".
• A. S. Tanenbaum, Redes de Computadoras, 5ª Edición.
• W. Stallings, Comunicaciones y Redes de Computadores, 10ª Edición.