FORMULARIOS EN HTML
Etiquetas principales
de un formulario
- <form>: Es la etiqueta contenedora principal.
Define el inicio y el fin del formulario. Sus atributos más importantes
son action (la dirección URL donde se enviarán los datos) y method (el
método HTTP de envío, como GET o POST).
- <label>: Representa una etiqueta de texto
descriptiva para un campo del formulario. Mejora la accesibilidad y la
usabilidad. Usa el atributo for para conectarse con el id del campo
correspondiente.
- <input>: Es la etiqueta más versátil para crear
campos de entrada de datos. Su atributo type define de qué tipo será el
campo:
- type="text": Cuadro de texto
común.
- type="password": Oculta los
caracteres escritos (para contraseñas).
- type="email": Valida de forma
básica que se escriba un correo válido.
- type="number": Permite ingresar
solo números.
- type="checkbox": Casilla de
verificación múltiple.
- type="radio": Botón de opción
única (seleccionar uno entre varios).
- type="submit": Botón para enviar
el formulario.
- <textarea>: Crea un cuadro de texto grande de varias
líneas. Se usa para mensajes largos o comentarios.
- <select> y <option>: Crean un menú desplegable. <select>
es el contenedor y <option> define cada una de las opciones
disponibles en la lista.
- <button>: Define un botón interactivo. Puede usarse
para enviar, reiniciar o ejecutar acciones personalizadas con JavaScript.
TABLAS EN HTML
Una tabla en
HTML es una estructura que se utiliza para organizar y presentar datos
estructurados en filas y columnas, de manera similar a una hoja de cálculo
EJEMPLO
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<form action="productos.html" method="post"
class="formulario">
<h1>FORMULARIO</h1>
<p><label for="nombre">Nombre: <input
type="text" id="nombre"></label></p>
<p><label for="apellido">Apellido: <input
type="text" id="apellido"></label></p>
<p><label
for="edad">Edad: <input type="text"
id="edad"></label></p>
<P><label
for="observacion">Observacion:<textarea
id="observacion"></textarea></label></P>
<p><label
>plato:<select id="plato">
<option
value="ceviche">ceviche</option>
<option
value="tallarines">tallarines</option>
<option
value="cabrito">cabrito</option>
<option
value="shambar">shambar</option>
<option value="milanesa">milanesa</option>
</select>
</label></p>
<p><b>bebidas</b></p>
<input type="checkbox"
value="gaseosa"><label>gaseosa</label><br>
<input type="checkbox"
value="jugo"><label>jugo</label><br>
<input type="checkbox"
value="agua"><label>agua</label><br>
<input type="checkbox"
value="vino"><label>vino</label><br>
<p><b>tipo
de pago</b></p>
<input type="radio" value="contado" name="tipo de
pago"><label>contado</label><br>
<input type="radio" value="yape" name="tipo de
pago"><label>yape</label><br>
<input type="radio" value="plin" name="tipo de
pago"><label>plin</label><br>
<input type="radio" value="tarjeta" name="tipo de
pago"><label>tarjeta de credito</label><br>
<button
type="submit">Enviar</button>
</form>
</body>
</html>
Etiquetas principales
de una tabla
- <table>: Es la etiqueta contenedora principal.
Define el inicio y el fin de la tabla.
- <tr> (Table Row): Define una fila dentro de la tabla. Todo
el contenido (celdas y encabezados) debe ir dentro de una fila.
- <th> (Table Header): Define una celda de encabezado. Por
defecto, el texto se muestra en negrita y centrado. Se utiliza en la
primera fila o columna para dar título a los datos.
- <td> (Table Data): Define una celda de datos estándar.
Contiene el contenido real de la tabla (texto, números, imágenes, etc.).
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link
rel="stylesheet" href="estilos2.css">
</head>
<body>
<h1>TABLA DE PRECIOS</h1>
<table border="1"
class="tabla">
<tr>
<th>nacional</th>
<th>internacional</th>
<th>carta</th>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td>30</td>
</tr>
<tr>
<td>40</td>
<td>50</td>
<td>70</td>
</tr>
<tr>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
</table>
</body>
</html>
CSS:
Css1
body {
margin:
0;
/* Elimina márgenes por defecto del navegador */
display:
flex;
/* Activa el modo Flexbox */
justify-content: center; /* Centra el
formulario horizontalmente */
align-items: center; /*
Centra el formulario verticalmente */
min-height: 100vh;
/* Obliga al body a ocupar el 100% de la altura de la pantalla */
background-color: #f0f2f5; /* Opcional: un
color de fondo agradable */
}
.formulario {
background: white;
padding: 30px;
border-radius:
8px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra elegante */
}
Css2
.tabla {
width: 50%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
.tabla th, .tabla td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
.tabla th {
background-color: #007BFF;
color: white;
}
/*
.tabla tbody tr:nth-child(even) {
background-color:
#f9f9f9; /* Da un color alternado a las filas */
JAVASCRIPT:
Un array en JavaScript
(también llamado arreglo o matriz) es una estructura de datos que permite
almacenar múltiples valores en una sola variable, organizados en una lista
ordenada donde cada elemento tiene una posición numérica única llamada índice
(el cual comienza siempre en 0).
METODOS
- push(): Añade uno o más elementos al final del array y devuelve la
nueva longitud de la lista. Modifica el array original.
- pop(): Elimina el último elemento del array y lo devuelve. Modifica
el array original.
- shift(): Elimina el primer elemento del array y lo devuelve, moviendo
todos los demás índices una posición hacia atrás. Modifica el array
original.
- unshift(): Añade uno o más elementos al inicio del array y devuelve la
nueva longitud. Modifica el array original.
- forEach(): Ejecuta una función una vez por cada elemento del array. Se usa
exclusivamente para recorrer la lista, no devuelve un nuevo array.
- map(): Crea un nuevo array con los resultados de aplicar una función
a cada uno de los elementos del array original sin modificarlo.
- filter(): Crea un nuevo array que contiene únicamente los elementos que
cumplen con una condición específica (pasan un filtro).
- find(): Devuelve el primer elemento del array que cumple con la
condición del filtro. Si ningún elemento la cumple, devuelve undefined.
- reduce(): Ejecuta una función reductora sobre cada elemento, devolviendo un único
valor como resultado (por ejemplo, la suma de todos los números del
array).
- includes(): Determina si un array contiene un elemento específico,
devolviendo true o false según corresponda.
EJEMPLO
const
lenguajes = ["JavaScript", "Python", "Java"];
const numeros =[];
// MÉTODOS DE MODIFICACIÓN
lenguajes.push("Go");
console.log(".push() ->",
lenguajes);
lenguajes.pop();
console.log(".pop() ->",
lenguajes);
// MÉTODOS DE ACCESO Y BÚSQUEDA
const tienePython =
lenguajes.includes("Python");
console.log(".includes() ->",
tienePython);
const porcion = lenguajes.slice(0, 2);
console.log(".slice() ->",
porcion);
// MÉTODOS DE ITERACIÓN Y TRANSFORMACIÓN
numeros.forEach(num
=> console.log(".forEach() ->", num));
const
dobles = numeros.map(num => num * 2);
console.log(".map()
->", dobles);
const pares
= numeros.filter(num => num % 2 === 0);
console.log(".filter()
->", pares);
const
mayorQueTres = numeros.find(num => num > 3);
console.log(".find() ->",
mayorQueTres);
const sumaTotal =
numeros.reduce((acumulador, actual) => acumulador + actual, 0);
console.log(".reduce() ->",
sumaTotal);
const algunoNegativo = numeros.some(num
=> num < 0);
console.log(".some()
->", algunoNegativo);
FUNCIONES EN
JAVASCRIPT
Una función en
JavaScript es un bloque de código reutilizable diseñado para realizar una
tarea específica, el cual se ejecuta únicamente cuando es invocado o
"llamado" desde otra parte del script. Elementos principales de una función
- Palabra clave (function): Es la palabra reservada de JavaScript que
se utiliza para declarar o definir una función tradicional.
- Nombre de la función: Es el identificador que se le asigna a la
función para poder invocarla más adelante (por ejemplo, calcularTotal).
- Parámetros: Son variables locales que se colocan entre paréntesis () en la
definición de la función. Actúan como contenedores para recibir la
información externa que la función necesita para operar.
- Argumentos: Son los valores reales y concretos que se le pasan a la función en
el momento exacto en que se la invoca (por ejemplo, en calcularTotal(5,
10), el 5 y el 10 son los argumentos).
- Cuerpo de la función: Es el bloque de código encerrado entre
llaves {} que contiene todas las instrucciones e instrucciones lógicas que
se ejecutarán cuando la función se active.
- Sentencia de retorno (return): Es una directiva opcional que finaliza la
ejecución de la función y devuelve un valor específico al lugar donde fue
llamada. Si no se incluye, la función devuelve undefined.
EJEMPLO 1:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button
onclick="mostrarSaludo()">presioname</button>
<h1 id="textoSaludo"></h1>
<script src="script.js"></script>
</body>
</html>
function mostrarSaludo(){
document.getElementById("textoSaludo").innerText="¡Hola
bienvenido";
}
EJEMPLO 2:
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>calculadora simple</h1>
<form
id="formulario">
<label
for="num1">numero 1:</label>
<input type="number" id="num1"
required>
<br><br>
<label for="num2">numero
2</label>
<input type="number" id="num2"
required>
<button type="button"
onclick="calcular()">calcular</button>
</form>
<h3>resultado <span id=resultado>0</span></h3>
<script src="script.js"></script>
</body>
</html>
function
calcular() {
const n1=parseFloat(document.getElementById("num1").value);
const n2=parseFloat(document.getElementById("num2").value);
if(isNaN(n1)||isNaN(n2)){
document.getElementById("resultado").innerText="ingresa
los numeros";
return;
}
const suma=n1+n2;
document.getElementById("resultado").innerText=suma;
}