Ciencias Computacionales: Guía de Comandos y Etiquetas Comunes en HTML, CSS y JavaScript

🟨 JavaScript - Comandos Comunes

Sintaxis (Comando)	Función / Explicación	Ejemplo
let	Declara una variable cuyo valor puede cambiar.	let nombre = 'Ana';
const	Declara una constante cuyo valor no cambia.	const PI = 3.1416;
console.log()	Muestra mensajes en la consola.	console.log('Hola Mundo');
alert()	Muestra un mensaje emergente.	alert('Bienvenido');
prompt()	Pide al usuario que escriba algo.	let nombre = prompt('¿Cómo te llamas?');
if...else	Ejecuta código según una condición.	if (edad>=18){alert('Mayor');} else {alert('Menor');}
for	Repite un bloque de código varias veces.	for(let i=0;i<5;i++){console.log(i);}
while	Repite código mientras se cumpla una condición.	while(x<3){x++;}
function	Declara una función reutilizable.	function saludar(){alert('Hola');}
return	Devuelve un valor desde una función.	return nombre;
== / ===	Compara valores (igualdad y estricta).	if(x===5)
+	Suma números o concatena texto.	'Hola ' + 'Mundo'
&& / \|\|	Operadores lógicos AND / OR.	if(x>0 && y>0)
Array	Crea una lista de elementos.	let frutas = ['pera','uva'];
push()	Agrega un elemento al final de un array.	frutas.push('naranja');

Sintaxis / Propiedad	Función / Explicación	Mini ejemplo
color	Cambia el color del texto.	color: blue;
background-color	Cambia el color de fondo.	background-color: yellow;
font-size	Define el tamaño de letra.	font-size: 20px;
font-family	Cambia el tipo de fuente.	font-family: Arial;
text-align	Alinea el texto.	text-align: center;
margin	Espacio exterior del elemento.	margin: 10px;
padding	Espacio interno del elemento.	padding: 15px;
border	Agrega un borde alrededor del elemento.	border: 2px solid black;
border-radius	Redondea las esquinas.	border-radius: 10px;
width / height	Define el tamaño del elemento.	width: 200px; height:100px;
hover	Aplica estilos al pasar el mouse.	button:hover {background-color:red;}
opacity	Define la transparencia.	opacity: 0.5;

Etiqueta / Sintaxis	Función / Explicación	Mini ejemplo
<html>	Contenedor principal del documento.	<html>...</html>
<head>	Contiene metadatos y enlaces.	<head><title>Mi página</title></head>
<body>	Contiene el contenido visible.	<body>...</body>
<h1> - <h6>	Títulos de distintos tamaños.	<h1>Título</h1>
<p>	Párrafo de texto.	<p>Texto</p>
<a>	Enlace o hipervínculo.	<a href='https://www.google.com'>Google</a>
<img>	Muestra una imagen.	<img src='foto.jpg' alt='Foto'>
<ul> / <ol>	Listas no ordenadas / ordenadas.	<ul><li>Item</li></ul>
<div>	Contenedor de bloques.	<div>Contenido</div>
<span>	Contenedor en línea.	<span>Texto</span>
<button>	Crea un botón.	<button>Click</button>
<input>	Campo de entrada.	<input type='text'>
<form>	Formulario para enviar datos.	<form>...</form>
<table>	Crea una tabla.	<table><tr><td>Dato</td></tr></table>
<script>	Inserta código JavaScript.	<script src='script.js'></script>