Conceptos Clave y Ejemplos Prácticos de HTML, CSS y JavaScript

Enviado por Programa Chuletas y clasificado en Informática y Telecomunicaciones

Escrito el en español con un tamaño de 14,23 KB

Conceptos Fundamentales de HTML, CSS y JavaScript

Selectores y Propiedades CSS

  • El selector input[type=web]#personal busca un elemento con el atributo type="web" y el ID personal.
  • padding: 0px;: No afecta a la separación externa.
  • margin: 30px;: Establece una separación vertical de 30px entre los párrafos.
  • Media screen AND (min-height:620px): Aplica estilos solo si la pantalla tiene una altura mínima de 620px.
  • Para crear una lista ordenada con ítems en línea: display: inline;.
  • El ancho de un div ocupa el 100% del ancho disponible.
  • Cuanto más específico sea un selector CSS, mayor preferencia tendrá. Ejemplo: font-size:40px; color: blue; tiene más preferencia que solo font-size:40px;.
  • vh, em y pc son valores de longitud (width) válidos en CSS. sz NO es un valor válido.
  • Para ocultar un elemento específico dentro de un grupo: .objeto:nth-of-type(2) { display:none; }.
  • Para cambiar el color de varios elementos del mismo tipo: nombre.first-of-type { color: green; }.
  • Para elegir entre dos opciones (ejemplo de lista desplegable):
    <input type="text" list="options">
<datalist id="options">
  <option value="Opción 1">
  <option value="Opción 2">
</datalist>
  • flex-direction: row; alinea los elementos en fila, no en columna. Para alinear en columna, se debe usar flex-direction: column;.
  • Para justificar un párrafo: text-align: justify;.
  • foto .casa - video: Este selector selecciona todos los elementos video que son hermanos posteriores de un elemento con la clase casa, donde .casa es un descendiente de un elemento con la clase foto.
  • Para establecer una imagen de fondo: background-image: url("fondo.png");.
  • <article> puede contener elementos hijos de tipo <section>.
  • MPEG no es un formato estándar para elementos <audio> o <video> sin extensiones adicionales (como códecs específicos).
  • El selector div.importante > p + img selecciona todas las imágenes que siguen inmediatamente a un párrafo (p) que es hijo directo de un div con la clase importante.
  • <hr> inserta una barra horizontal en la página web.
  • document.querySelector("p:first-of-type").style.display = "none"; oculta el primer párrafo de la página.
  • El envío de datos desde un formulario en un iframe no será posible si el iframe tiene el atributo sandbox.
  • img[alt="flores"].exotic selecciona las imágenes que tienen el atributo alt igual a "flores" y pertenecen a la clase exotic.
  • min-width:700px; establece que un elemento no puede reducirse por debajo de los 700px de ancho.
  • #uno {margin:10px;} #dos {margin:20px;}: Si dos elementos con estos IDs están uno encima del otro, la separación *vertical* será de 20px (el margen mayor prevalece).
  • Etiquetas semánticas para código: <var>, <code>, <samp> y <kbd>.
  • <form>: Crea un elemento de bloque. <span>: Crea una agrupación en línea. <fieldset>: Agrupa elementos relacionados en un formulario.
  • size no es un atributo válido para especificar tamaños en CSS. & (probablemente refiriéndose a entidades HTML), RGB o valores hexadecimales (#) sí son válidos para colores.
  • Para crear un círculo negro, se puede usar un elemento con width: 0; height: 0; border-radius: 50%; background-color: black;. Solo con width: 0; height: 0; no se mostraría nada.
  • li#item a.clase:hover { ... }: Aplica estilos a un enlace (<a>) con la clase clase dentro de un elemento de lista (<li>) con el ID item, solo cuando el cursor está sobre el enlace.
  • Dentro de la cabecera (<head>) de un documento HTML pueden estar: <title>, <meta> y <script>.
  • Un elemento <section> puede tener elementos hijos de tipo <article> y viceversa.
  • Dos elementos <span> pueden ubicarse uno al lado del otro (son elementos en línea).
  • Etiquetas de marcado semántico: <figure>, <article>, <header>. NO son semánticas: <script>, <foot> (debería ser <footer>), <span>.
  • <wbr> no es una etiqueta semántica. Indica un punto de ruptura de palabra opcional.
  • <th> crea celdas de encabezado en una tabla.
  • <link> es una etiqueta que no tiene etiqueta de cierre.
  • <head> define la parte de metadatos en un HTML.
  • <input type="text"> se usa para una entrada de texto (nombre y apellidos, por ejemplo).
  • <section>, <div> y <article> permiten agrupar elementos HTML.
  • <span style="color: blue">palabra</span> cambia el color de "palabra" a azul.
  • file, tel, reset son tipos de <input>. No se usan dentro de <textarea>.
  • Centrar una imagen: Se puede usar text-align: center; en el elemento padre, o margin: 0 auto; display: block; en la propia imagen.
  • Modificar tamaño de texto: font-size.
  • Cambiar color de fondo: background-color.
  • Cambiar color de bordes: border-color.
  • Cambiar tipo de letra: font-family.
  • El código JavaScript en una página web se ejecuta en la máquina del usuario (en el navegador).
  • Vincular hoja de estilos externa: <link rel="stylesheet" type="text/css" href="fichero.css">.
  • <title> no se muestra en el contenido de la página web, pero sí en la pestaña del navegador.
  • Atributos del elemento <body> (algunos obsoletos): Se puede especificar una imagen de fondo (background - obsoleto), color de texto (text - obsoleto) y color de fondo (bgcolor - obsoleto). Es mejor usar CSS para esto.
  • Seleccionar elementos div de clase contenedor-lateral: div.contenedor-lateral.
  • <input type="submit">: Crea un botón para enviar la información de un formulario a un servidor.
  • W3C (World Wide Web Consortium) crea estándares para la web.
  • #parrafo permite seleccionar el elemento cuyo id es "parrafo".
  • img[alt*="salvaje"]: Selecciona elementos <img> cuyo atributo alt *contiene* la palabra "salvaje".
  • <!DOCTYPE html>: Indica el tipo de documento (HTML) y la versión (HTML5 en este caso).
  • No es obligatorio especificar el tamaño de una imagen (width y height), pero es recomendable para optimizar la carga de la página.
  • margin: 2px; border: 3px solid black;: Establece un margen de 2 píxeles y un borde negro sólido de 3 píxeles.
  • style: flex no es una propiedad CSS válida por sí sola. Se usan propiedades como display: flex;, flex-direction, justify-content, etc.

Ejemplos de JavaScript

Agregar elementos al DOM


// Agregar varios párrafos
for (x of posiciones) {
  let p = document.createElement("p"); // Crea un nuevo elemento <p>
  p.innerHTML = x; // Inserta contenido en el elemento <p>
  document.body.appendChild(p); // Agrega el elemento <p> al body
}

// Agregar elementos a una lista
var lista = document.createElement("ol"); // Crea una lista ordenada
for (var i = 0; i < editados.length; i++) {
  let libro = document.createElement("li"); // Crea un elemento de lista
  libro.innerHTML = editados[i].titulo;
  lista.appendChild(libro); // Agrega el elemento de lista a la lista ordenada
}
document.body.appendChild(lista); // Agrega la lista al body


// Crear una lista en una sola cadena
let resultado = ""; // Crea una cadena vacía
resultado = "<ol>"; // Añade a la variable resultados el inicio de una lista

for (let i = 0; i < 31; i++) {
  resultado = resultado + "<li>" + i + "</li>"; // Abre y cierra la etiqueta que es una lista
}
resultado = resultado + "</ol>"; // Cierra la lista
console.log(resultado);


// Cambiar extensiones de archivo a .png
function transformaPng(nombre) {
  var res = nombre + ".png";
  console.log(res);
  return res;
}
paisajes.forEach(transformaPng); // Itera sobre un array (asumiendo que 'paisajes' existe)

// Agregar una advertencia
function advertir() {
  var advertencia = document.createElement("p");
  advertencia.innerHTML = "<b>Cuidado</b>"; // <b> </b> -> Negrita
  document.body.appendChild(advertencia);
}

Métodos de selección de elementos del DOM

  • document.getElementsByTagName(): Busca todos los elementos de un tipo específico (por ejemplo, p, div, etc.).
  • document.getElementById(): Busca un elemento por su ID.
  • document.querySelector(): Devuelve el *primer* elemento que coincide con un selector CSS.
  • document.querySelectorAll(): Devuelve *todos* los elementos que coinciden con un selector CSS.

Manipulación de Arrays en JavaScript

  • posiciones.push("");: Añade un elemento al final de un array.
  • ("").pop();: Elimina el último elemento de un array.
  • ("").unshift();: Añade un elemento al principio de un array.
  • ("").shift();: Elimina el primer elemento de un array.
  • ("").firstChild;: Devuelve el primer nodo hijo de un nodo. Si no hay hijos, devuelve null.
  • ("").childNodes[0];: Accede al primer nodo hijo de un nodo (equivalente a firstChild).

Ejemplo de appendChild


// Añadir un solo elemento
let casas = document.createElement("p");
casas.innerHTML = "¡Hola, soy un nuevo párrafo!";
document.body.appendChild(casas);

// Añadir varios elementos
let vehiculos = document.createElement("div");
vehiculos.innerHTML = "Este es el grupo de vehiculos";

let bici = document.createElement("p");
bici.innerHTML = "Toyota"; //  (Debería ser un tipo de vehículo, ej: "Bicicleta")

vehiculos.appendChild(bici);
document.body.appendChild(vehiculos);

Otros Conceptos de JavaScript

  • El número 0 es considerado "falsy" (falso) en JavaScript.
  • isNaN(): Verifica si un valor *no* es un número válido (Not-a-Number).
  • typeof(null) devuelve "object".
  • Cadenas o variables vacías, al convertirlas a número, se evalúan como 0.

Ejecutar código después de cargar la página


document.addEventListener("DOMContentLoaded", function () {
  // Código a ejecutar cuando el DOM esté completamente cargado
  actualizar(p1, p2); //  (Asumiendo que 'actualizar', 'p1' y 'p2' están definidos)
});

Ejemplo de creación de elemento con createElement

document.createElement("div"); crea un nodo elemento de tipo <div>, pero no lo añade al documento. Para hacerlo visible, se debe usar appendChild() o un método similar.

Ejemplos Adicionales de JavaScript


// Ejemplo de array y función
let b = { idiomas: ["castellano", "valenciano", "inglés"] };

function CambioNombre(nombre) {
  var res = nombre + "-GTDM";
  console.log(res);
  return res;
}

d.forEach(CambioNombre); //  (Asumiendo que 'd' es un array)


// Calcular el valor total de libros (asumiendo un array 'editados')
function calcularValorTotal() {
  var total = 0;
  for (var i = 0; i < editados.length; i++) {
    total += editados[i].precio * 100; // Multiplica por 100 (¿para centavos?)
  }
  return total;
}

var valorTotal = calcularValorTotal();
console.log("El valor total de los libros en stock es: " + valorTotal + " euros.");


// Concatenar propiedades de un objeto
var obj = { num1: "10", num2: "2", num3: "55" };

function Concatenar() {
  if (typeof obj.num1 === 'string' && typeof obj.num2 === 'string' && typeof obj.num3 === 'string') {
    var res = obj.num1.concat(obj.num2).concat(obj.num3);
    return res;
  } else {
    return "Nada";
  }
}
console.log(Concatenar());

//Obtener el numero de propiedades de un objeto
Object.keys(obj).length

Ejemplo de creación de lista con manejador de eventos


<li data-opcion="none" onclick="gestionar(this)">Eliminar anuncio</li>
<li data-opcion="red" onclick="gestionar(this)">Anuncio con texto rojo</li>

Ejemplo de inicialización de array


let m = [];
m[0] = 5;
m[1] = 10;
m[2] = 15;

Ejemplo de función simple


function sumarDos(a, b) {
  return a + b; // Devuelve la suma de a y b
}
console.log(sumarDos(2, 4)); // Imprime 6

Ejemplo de modificación del DOM


document.getElementById("demo").innerHTML = 'Epa';
// O
document.querySelector("#demo").innerHTML = 'Epa';

Este código reemplaza el contenido de un elemento con el ID "demo" con el texto 'Epa'.

Karma: 16%
Visitas: 0

Entradas relacionadas:

Etiquetas:
JavaScript Etiquetas HTML Formularios HTML Manipulación del DOM JavaScript Array DOM Estilos CSS Selectores CSS HTML CSS Propiedades CSS Eventos JavaScript