LAYOUT PAGINA
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript - Tutorial</title>
<style>
/* Reset básico - SIN POSITION FIXED, SOLO FLEX NATURAL */
body {
margin: 0;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
height: 100vh;
display: flex;
flex-direction: column;
}
/* CAJA 1: Menú superior - fluye naturalmente */
.menu-superior {
background-color: #333;
padding: 0; /* Los enlaces controlan su espacio */
line-height: 0; /* Elimina espacio extra */
}
.menu-superior a {
color: white;
text-decoration: none;
padding: 12px 15px; /* Ajusta este valor a tu gusto */
display: inline-block;
font-size: 14px;
line-height: normal; /* Restaura line-height normal para el texto */
}
.menu-superior a:hover {
background-color: #555;
}
.menu-superior a.activo {
background-color: #007bff;
}
/* Contenedor flexible para menú lateral + contenido */
.contenedor-flex {
display: flex;
flex: 1; /* Ocupa el espacio restante */
min-height: 0; /* Importante para que funcione el overflow */
}
/* CAJA 2: Menú lateral - fluye naturalmente */
.menu-lateral {
width: 180px;
background-color: #f0f0f0;
padding: 10px; /* Padding general del contenedor */
overflow-y: auto;
}
.menu-lateral h3 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.menu-lateral a {
display: block;
padding: 8px 10px; /* Los enlaces controlan su espacio */
color: #333;
text-decoration: none;
margin: 2px 0; /* Pequeño margen entre ellos */
border-left: 2px solid transparent;
font-size: 14px;
}
.menu-lateral a:hover {
background-color: #ddd;
border-left-color: #007bff;
}
/* CAJA 3: Contenedor que centra el contenido */
.contenedor-centrado {
flex: 1;
display: flex;
justify-content: center;
padding: 20px;
overflow-y: auto;
}
/* CAJA 4: Contenido con ancho fijo */
.contenido {
max-width: 800px;
width: 100%;
font-size: 20px; /* ← Agranda todo el texto del contenido */
}/*
.contenido p {
font-family: Arial, sans-serif;
}*/
/* Estilos del contenido */
h1 {
margin-top: 0;
color: #333;
}
h2 {
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-top: 30px;
color: #333;
}
h2:first-of-type {
margin-top: 0;
}
code {
background-color: #f4f4f4;
padding: 2px 5px;
border-radius: 3px;
font-family: monospace;
}
pre {
background-color: #f4f4f4;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
font-family: monospace;
}
</style>
</head>
<body>
<!-- CAJA 1: Menú superior - flujo natural -->
<div class="menu-superior">
<a href="index.html">Inicio</a>
<a href="php.html">PHP</a>
<a href="js.html" class="activo">JavaScript</a>
<a href="css.html">CSS</a>
<a href="html.html">HTML</a>
</div>
<!-- Contenedor flex para las otras dos cajas -->
<div class="contenedor-flex">
<!-- CAJA 2: Menú lateral - flujo natural -->
<div class="menu-lateral">
<h3>Temas de JavaScript</h3>
<a href="#js-intro">Introducción a JS</a>
<a href="#js-sintaxis">Sintaxis Básica</a>
<a href="#js-variables">Variables y Tipos</a>
<a href="#js-funciones">Funciones en JS</a>
<a href="#js-objetos">Objetos y Arrays</a>
<a href="#js-dom">Manipulación del DOM</a>
</div>
<!-- CAJA 3: Contenedor que centra -->
<div class="contenedor-centrado">
<!-- CAJA 4: Contenido centrado -->
<div class="contenido">
<h1>Tutorial de JavaScript</h1>
<h2 id="js-intro">Introducción a JavaScript</h2>
<p>JavaScript es un lenguaje de programación interpretado, orientado a objetos, utilizado principalmente en el lado del cliente (navegador web).</p>
<p>Creado por Brendan Eich en 1995, JavaScript permite crear páginas web interactivas y dinámicas.</p>
<p>No debe confundirse con Java - son lenguajes completamente diferentes.</p>
<h2 id="js-sintaxis">Sintaxis Básica</h2>
<p>JavaScript usa una sintaxis similar a C. Las sentencias terminan con punto y coma (opcional pero recomendado).</p>
<p><strong>Ejemplo:</strong> <code>console.log("Hola Mundo");</code></p>
<p>Los comentarios pueden ser de una línea (//) o múltiples líneas (/* */).</p>
<h2 id="js-variables">Variables y Tipos de Datos</h2>
<p>En JavaScript moderno se usa 'let' y 'const' para declarar variables. 'var' es la forma antigua.</p>
<p><strong>Tipos:</strong> number, string, boolean, object, undefined, null, symbol.</p>
<p><strong>Ejemplo:</strong></p>
<pre>let nombre = "Ana";
const edad = 30;
let esEstudiante = true;
let colores = ["rojo", "azul", "verde"];</pre>
<h2 id="js-funciones">Funciones en JavaScript</h2>
<p>Las funciones se pueden declarar de varias formas:</p>
<p><strong>Declaración de función:</strong></p>
<pre>function suma(a, b) {
return a + b;
}</pre>
<p><strong>Función flecha:</strong> <code>const resta = (a, b) => a - b;</code></p>
<h2 id="js-objetos">Objetos y Arrays</h2>
<p><strong>Objetos:</strong> colecciones de propiedades</p>
<pre>let persona = {
nombre: "Juan",
edad: 25,
saludar: function() {
return "Hola, soy " + this.nombre;
}
};</pre>
<p><strong>Arrays:</strong> listas ordenadas</p>
<pre>let frutas = ["manzana", "banana", "naranja"];
frutas.push("uva"); // Añadir elemento</pre>
<h2 id="js-dom">Manipulación del DOM</h2>
<p>JavaScript puede manipular el DOM (Document Object Model) para cambiar el contenido de la página.</p>
<p><strong>Ejemplos:</strong></p>
<pre>// Seleccionar elementos
document.getElementById("miId");
document.querySelector(".miClase");
// Modificar contenido
elemento.textContent = "Nuevo texto";
elemento.innerHTML = "<b>Texto en negrita</b>";
// Eventos
boton.addEventListener("click", function() {
alert("¡Hiciste clic!");
});</pre>
</div>
</div>
</div>
</body>
</html>
Comentarios
Publicar un comentario