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>

<head>

<title>Document</title>

</head>

<body>

<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="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="radio" value="contado" name="tipo de pago"><label>contado</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>

<head>

<title>Document</title>

</head>

<body>

<h1>TABLA DE PRECIOS</h1>

<tr>

<th>nacional</th>

<th>internacional</th>

<th>carta</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</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>

<head>

<title>Document</title>

</head>

<body>

<button onclick="mostrarSaludo()">presioname</button>

</body>

</html>

function mostrarSaludo(){

document.getElementById("textoSaludo").innerText="¡Hola bienvenido";

}

EJEMPLO 2:

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>calculadora simple</h1>

<label for="num1">numero 1:</label>

<label for="num2">numero 2</label>

<button type="button" onclick="calcular()">calcular</button>

</form>

<h3>resultado <span id=resultado>0</span></h3>

</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;

}

viernes, 2 de octubre de 2026

ARRAYS Y FUNCIONES EN JAVASCRIPT

Css1

Css2

No hay comentarios.:

Publicar un comentario

Entradas populares