Apuntes de la asignatura DAT

Test diario

Test diario Miguel

~morduno/test

Comandos para formatear el markdown y ayuda

Pagina para mirar como usar markdown Guia markdown

Pagina para validar los html Validor HTML

pandoc es pasar de un tipo de fichero a otro con variedades

pandoc -s ejemplo.md -o ejemplo.html //formato

formatear el texto para dejarlo bien

pandoc -s $1 -o ${tmp_name}

Clase 4 de febrero

Pregunta de clase

En HTML

Respuesta correcta a

Clase de 10 de febrero

Pregunta de clase

¿Cuál de estas respuestas es FALSA?

a. Los documentos HTML 5 normalmente emplean codificación UTF-8. Pero también pueden emplear codificaciones más antiguas, con tal de que está correctamente indicado con el atributo charset del elemento meta.

b. El elemento link sirve para hacer hiperenlaces HTML, que son la base del web al permitir al usuario navegar de página a página con un solo clic.

c. El W3C es el organismo internacional que se encarga de normalizar los protocolos del web.

d. El código HTML normalmente se escribe en minúsculas. Pero HTML es insensible a mayúsculas, así que puede escribirse en mayúsculas, no hay diferencia.

Respuesta correcta b

Clase 11 de febrero

Pregunta de clase

¿Cuál es la respuesta correcta?

a. En un atributo ‘input’ normalmente hay un elemento ‘id’ y un elemento ‘name’. Es preferible que su valor sea el mismo, pero no tiene por qué serlo. El primero lo usa el cliente, el segundo, el servidor.

b. En un atributo ‘input’ normalmente hay un elemento ‘id’ y un elemento ‘name’. Es preferible que su valor sea el mismo, pero no tiene por qué serlo. El primero lo usa el servidor, el segundo, el cliente.

c. En un elemento ‘input’ normalmente hay un atributo ‘id’ y un atributo ‘name’. Es preferible que su valor sea el mismo, pero no tiene por qué serlo. El primero lo usa el servidor, el segundo, el cliente.

d. En un elemento ‘input’ normalmente hay un atributo ‘id’ y un atributo ‘name’. Es preferible que su valor sea el mismo, pero no tiene por qué serlo. El primero lo usa el cliente, el segundo, el servidor. Elige una opción (a,b,c,d)

La respuesta correcta es la d el input es un elemento y el id lo manejar el server

Clase 17 de feberero

Supuestamente es la clase más dificil del año

En caso de colision de estilos (no debería pasar si esta bien diseñado) prevalece la que sea más compleja/larga/específica.

Pregunta de clase

a. Las reglas CSS se pueden escribir como contenido de un elemento ‘link’.

b. Las reglas CSS se pueden escribir como contenido de un elemento ‘style’.

c. La misma regla CSS se puede aplicar a varios elementos. Un mismo elemento puede recibir el efecto de varias reglas.

d. En una regla CSS el selector indica a qué elementos se aplica la regla, esto es, ‘para estos elementos, este atributo tiene tal valor’.

Elige una opción (a,b,c,d)

La respuesta correcta es la a link tiene un atributo que indica donde esta el css

Clase 18 de Febrero

No tienen que ser paginas muy bonitas, no somos diseñadores

No confundir los colores css con con los colores panthone ni con RAL

Conviene decidir usar una paleta

Margin con los bloques entre dos, no los suma, toma el mayor

Display None resposiciona Display hidden solo lo oculta

Pregunta de clase

¿Cuál es la respuesta correcta?

a. El número de colores que podemos usar en CSS es 140.

b. En CSS podemos usar unos 16 millones de colores, aproximadamente.

c. El número de colores que podemos usar en CSS es el establecido por el estandar Pantone. Son dos mil y pico, y van aumentado poco a poco con los años.

d. El número de colores que podemos usar en CSS es el establecido por el estandar Pantone: unos 16 millones de colores, aproximadamente. Elige una opción (a,b,c,d)

Repuesta correcta la b

Clase 24 de Febrero

Bootstrap es un framewokk libre para web, desarrolado por ingenieros de Twitter. Incluye plantillas HTML y CSS y más cosas. Es mobile first, osea centrado que se vea bien en el movil. Orientado a programadores noa diseñadores Alternativas como Foundation

Todo el contenido debe estar en un conteiner

El viewport es la parte que estoy viendo yo de un navegador Barra de desplazamiento horizontal es caca, la vertical guay

Diposicion Normal -> Cuando las cajas se ven una misma fila Diposicion Apilada -> Unas encima de otras porque no entran en la misma fila

Cada caja sera un div que tiene una clase. Ejemplo

<div class="col-md-4"> Bla, bla </div>
<div class="col-md-8"> Bla, bla, blá </div>
</div> ```

Pagina para ver pruebas

El div con la class container es obligatorio, esta prohibidio meter un container dentro de otro. El validaor online no lo va a detectar pero esta mal

Hay dos tipos, el normal y el fluido, el normal usa espacios en blanco y el fluido usa todo el espacio y se maximiza

Ejemplos:

Container normal

Container fluido

Pregunta de clase

¿Qué respuest es FALSA?

El viewport virtual es

a. Una técnica de segunda generación para mostrar páginas web en dispositivos móviles.

b. Una técnica obsoleta. Aunque sigue funcionando.

c. Una pantalla imaginaria donde se compone una página web. Luego, en la pantalla de un dispositivo móvil, se muestra esta pantalla virtual, reducida.

d. Una pantalla imaginaria donde se compone una página web. Luego, en la pantalla de un dispositivo móvil, se muestra una zona de esta pantalla virtual. Elige una opción (a,b,c,d)

Respuesta correcta C

Clase 25 de Febrero

FreeFileSync es una aplicacion para sincronizar ficheros pero yo prefiero usar gitlab

En bootsrap la gama concreta de colores se decidira en CSS, y normalmente ya lo decidio alguieb, yo solo le indico que tipo de asignacion le quiero dar

Se pueden hacer botones con button, un inputo con button y un a con button, se puede desabilitar un boton con el atributo disable

ejemplos botones

Se pueden modicar las imagenes con diferente clases, como rounded, runded-circle etc.. Vienen en la diapositivas las que son, tambien alinear etc

ejemplos imagenes

Las tablas tienen clases para dejarlas bonitas, mejor mirar los ejemplos

ejemplos tablas

Una tarjeta (card) es una caja redondeada dividida en cabecera, cuerpo y pie.

Pregunta de clase

¿Cuál es la respuesta correcta?

a. Una tabla en Bootstrap es una tabla HTML a la que le añadimos la clase ‘table’.

b. Una tabla en Bootstrap es una tabla HTML a la que le añadimos la clase ‘table’ y la clase ‘table-striped’.

c. Una tabla en Bootstrap es un elemento HTML ‘bootstrap-table’.

d. Cualquier tabla dentro de un ‘container’ de Bootstrap tendrá el formato indicado por Bootstrap.

Respuesta correcta A

Clase 3 de Marzo

En Bootsrap los formularios estan obligados al uso de <label> y se le añadira la clase class="form-label

Los carrusueles son fotos que van cambiado con el tiempo Recordar que las fotos que usemos tienen que ser “legacy” osea que te lo permitan los derechos de autor

Bootrsap se va a encagar del tamaño de la foto. Nosotros tenemos que garantizar que la proporcion sea la misma

Usar meor el ejemplo de clase

La clase previa vista disable no desabilidar realmente, lo que lo hace el es atributo

<input type="text" name="lname" disabled><br>
button type="button" class="btn btn-lg" disabled>Botón</button>

Si vamos a usar Bootsrap no toquemos CSS a no ser que estemos muy seguro.

Plantillas para Bootsrap Hay que tener cuidado porque suelen ser mas avanzadas y pueden estar desfasadas, ir mal etc etc

Pregunta de clase

a. Podemos poner fotos de cualquier tamaño, que Bootstrap se encargará de adaptarlas para que se vean bien.

b. Todas las fotos deberían tener mismo tamaño y relación de aspecto, de lo contrario el resultado será bastante pobre.

c. Todas las fotos tienen que tener mismo tamaño y relación de aspecto, de lo contrario Bootstrap mostrará un error.

d. Todas las fotos tienen que tener la misma relación de aspecto, eso Bootstrap no lo puede corregir. Pero si los tamaños cambian, Bootstrap los puede homogeneizar.

Respuesta correcta D

Apartir de aqui empezamos JavaScript

Clase 3 de Marzo

El profe dice que es un lenguaje regulero, hecho de prisa en 10 dias y demas, algo ha mejorado con el tiempo pero sigue siendo bastante MEH.

Vamos a usar node en la terminal para programar.

JavaScript6 hace cambios muy relevantes, corrigiendo barbaridades.

Clase 4 de Marzo

Los numeros en javascrip son una basura, a veces falla y a veces acierta comparando los numeros. Hay que usar epsilon para comparar los numeros porque el comportamiento es aleatorio y a veces falla y aveces acierta si no

Es un lenguaje que esta pensando para gente que no es programadora profesional, por eso hay muchos programas de mierda

El lenguaje no especifica si es interpretado o compilado, depende de la interpretación.

Igual que con el resto de cosas, la mejor idea es meter todos los js en un subdirectorio igual que las fotos, que es lo que vamos a hacer en clase. No usar los path absolutos logicamente.

El hola mundo en js no aparece en el html, si no en la consola de debug

En teoria pone solo el ‘;’ per es mejor ponerlo para evitar errores a futuro, aunque en principio se puede omitir

Todo el codigo que se haga hay que usar el modo strict

use strict

Normas de este modo son:

Hay dos tipos de valores

Existe el concepto del numero infinity.

Paradojas extrañas, NaN se supone que no es un numero, y si haces type NaN devuelve que es un numero

null es un objeto que no tiene valor, se podria decir que es un objeto vacio, aunque eso realmente es {}

Otra tonteria, es que si estoy en estricto tengo que declarar las variables, pero si la uso y despues la declaro, funciona Y dice que es undefined

En las funciones si no metes el parametro, tampoco se queja

Si has creado un objeto vacio, asignamos cosas, y luego llamamos a algo que no exite, tambien devuelve el undefined

Una posible solucion, en vez de usar var, es usar let, y asi lo haremos en la asignatura, asi por lo menos da error

Number() -> Pasa una cadena a un numero

String() -> Pasa un numero a un string

NaN === NaN devuelve False. Mejor sin comentarios

Para detectar si es un NaN hay que usar isNaN, pero cuidado porque tambien devuelve True con otras cosas, es absurdo

La cosa es tener cudidado con el NaN, no van a ser preguntas del test porque si no, nos destruye la vida.

Redondeo -> Math.round() Truncado -> Math.trunc()

Da igual que escribamos las cosas en español, no es necesario hacerlo en ingles. Aunque deje usar tildes y Ñs, mejor evitarlo

Usamos el tripe === porque el doble == funciona raro.

Pregunta de clase

¿JavaScript es un lenguaje compilado?

a. Sí.

b. No.

c. Antes no, ahora sí.

d. Depende.

Respuesta Correcta D Es una frontera difusa, en este caso es la D, porque en la actualidad todos hacen cosas de compliacion y interpretacion

Clase 10 de marzo

JavaScript es un lenfuaje de primera clase, ademas de los tipos visto, tambien puede ser otra función

Funciones anonimas, una funcion que no tiene nombre. A miguel no le gustan nada,

Se pueden crear usando =>. Una funcion flecha es una forma mas abreviada de escribir una función anónima. Tambien se le puede quitar function. La idea es ahorrar tiempo al teclear.

Se le pueden pasar funciones a funciones y es lo ideal

Existen las funciones normales como todas

Se pueden usar antes de declarar (jaja mejor no hacerlo nunca)

No existe paso por referencia en JavaScript, hay una chapuza para “hacerlo”, es meter el valor dentro de un array.

Las funciones siempre devuelven un valor, un undefined

Cuidado con el numero de parametros como vimos el otro día porque javascript se lo come y devovlera cosas distintas en vez de dar errores. Por ejemplo

'use strict'
function f(x,y){
return x+y;
};
console.log(f(1)); // NaN
console.log(f(2,2)); // 4
console.log(f(1,1,1)); // 2

En arguments.length vienen la cantidad de argumentos, y tendremos que comprobar nosotros a mano si estan los argumentos que queremos y ejecutar errores en cuyo caso

Parametros por omision habra que meterlos a mano tambien

'use strict'
function f(x){
if (x===undefined) {
x=0};
return x + 1 ;
};
console.log(f()); //1

En javascript6, hasta hace mucho no se podia usar, aunque en teoria Usaremos esta

'use strict'
function f(x=10){
return x;
}
console.log(f(5)); // 5
console.log(f()); // 10
console.log(f(false)); // false

En javacript incrustado en HTML, todos los scripts incluidos en HTML comparten la variable global (porque HTML comparte la varibale window)

USAR SIEMPRE let. No usar var porque puede dar problemas. Se pueden declarar variables “ultra-locales” metienola dentro de un {} que este dentro de un propio bloque.

'use strict'
function f() {
  var x = 1;
  if (true) {
  var x = 2; // La misma variable. Destruimos valor previo
  console.log(x); // 2
}
console.log(x); // 2
}
function g() {
  let x = 1;
  if (true) {
  let x = 2; // Variable diferente, local del bloque
  console.log(x); // 2
}
console.log(x); // 1. Mantiene el valor previo
}
f();
g();

Pregunta de clase

¿Cuál de estas afirmaciones es FALSA?

a. Las funciones flecha y las funciones anónimas de JavaScript solo se pueden usar cuando una función es un argumento de otra función.

b. Las funciones flecha y las funciones anónimas se pueden usar siempre, pero solo tienen alguna ventaja cuando una función es un argumento de otra función.

c. Las funciones flecha también son funciones anónimas, pero con una sintaxis especial, más compacta.

d. Las funciones flecha y las funciones anónimas se usan mucho en JavaScript, aunque sus ventajas son discutibles.

Respuesta Correcta B Esque solo puedo usarlas en ese caso. Habria que explicarlo un poco mejor

Clase 11 de marzo

Usar const para no poder modificar una varible

A Miguel no le gustan las funciones muy largas, ni ifs dentro de otros muy anidados

El switch salta al siguiente si no hay break, hay gente que lo usa para un fall throught. Si lo hacemos comentar que no se olvido break

El while igual que el de C

Los bucles son iguales que los de C, se pueden recorrer los strings como un array de chars. Curiosamente tambien se puede reccorer como en python de esta forma

'use strict'
let x="Lorem Ipsum";
for (let c of x){
console.log(c);
};

En javascript length es una propiedad longtud_cadena = x.length

Cuidado porque si se hace por ejemplo un 0<undefined es falso y continua con el bucle porque patata en vez de dar un error

Manipulacion de cadenas

Diferenciar entre constructivo o destructivo, algunas borran la original y la modifican y otros no

Listas (Arrays), son dinámicas, no hay que fijar su tamaño y los elementos no tienen porque ser del mismo tipo

'use strict'
let a,b,c,d;
a=[ ]; // array vacío
b=[7, 8, 9]; // array con números
c=['rojo', 3, 0]; // array con elementos heterogéneos
d=[ [0, 1], [1, 1]]; // array con arrays anidados

Tamien hay propiedades para los arrays, igual mas o menos que los de los strings, mejor mirar en las diapositivas, pero son como en python mas o menos

Para recorrer arrays mejor usar forEach o for-of. aunque tambien se puede hacer como toda la vida de dios.

'use strict'
let l=["a",,"c"]
l.forEach(function(x){
  console.log(x);
});
// a c

Lo mejor segun Miguel usar esta.

'use strict'
let l=["a",,"c"]
for(let x of l){
console.log(x);
}
// a undefined c

Hay una cosa que es for-in pero es rarisimo, mejor no usar nunca

Pregunta de clase

a) len(s) sería una función.

b) s.len() sería un método. Es como se hace en JavaScript.

c) s.lengh() sería un método. Es como se hace en JavaScript.

d) s.lengh sería una propiedad. Es como se hace en JavaScript.

Elige una opción (a,b,c,d)

Opcion correcta la A Pregunta cabrona porque la D le falta la t, la correcta es la a.

Clase 17 de Marzo

Los diccionarios de otros lenguajes en js es un “plain object” Como todo diccionario tiene una clave y un valor.

use strict'
let x={
unidades:2,
color:'verde',
tamaño:'grande',
};
console.log(x); // { unidades: 2, color: 'verde', 'tamaño': 'grande' }
console.log(x.unidades); // 2
console.log(x.precio); //undefined

Object.keys(MiObjeto) devuelve todas las claves de un diccionario

Array.isArray(MiArray) devuelve si es un array -> Esto viene porque js no sabe distinguir si es un array o un Objeto (ES NECESARIO E IMPORTANTE PARA MIGUEL)

Como en js solo se puede devolver una cosa por return, podemos devolvelro con un plain objtect

Excepciones, importante, esto no es realista para el ejemplo, pero sirve para ver la sintaxis.

'use strict'
// Atención, ejemplo no realista
try {
throw 'xxx27';
} catch (e) {
console.log('capturada excepción ' + e);
// capturada excepción xxx27
}

'use strict'
// Atención, ejemplo no realista
try{
console.log( no_definido);
} catch (e) {
console.log("capturada excepción ",e.name,e.message);
}
//capturada excepción ReferenceError no_definido is not defined

La idea es detectar el tipo de error que puede suceder para controlarlo

Hay 7 nombres de error

Una excecion deberia ser para un error especial, no un error del usuario

Pregunta de clase

¿Cuál de estas declaraciones es errónea?

a) let a = { “uno”:1, “dos”:2 }

b) let b = { “uno”:1, “dos”:2 };

c) let c = { “uno”:“1”; “dos”:“2” };

d) let d = { “uno”:[“1”], “dos”:[“2”] };

Opcion correcta la C

Clase 18 de Marzo

Todos los modulos en el navegador tiene que usar .js En node todos los modulos tiejn que usar .mjs

Para solucionrlo usamamos

n -s modulo.mjs modulo.js
ln -s programa.mjs programa.js

Si queremos exportar una funcion usamos export

export function nombre(){ return }

Para importar

'use strict'
import * as modulo from './modulo';
console.log(modulo.f());
console.log(modulo.g());

Uso en el navegador, en el elemento script añadimos el atributo type=module

!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="utf-8">
<title>Probando modulos</title>
</head>
<body>
<script type="module" src="programa.js"> </script>
</body>
</html>

Cuando tiene modulos en HTML no se puede leer desde el disco por motivos de seguridad -> Me suena que lo di en bachillearto

Hay que lanzarlo en servidor -> El que queramos, si no nginx, o incluso en vscode o incluso tambien en python con python3 server.html

TypeScript es un lenguaje alternativo a javascript de alto nivel, es de alto nivel, diseñado por Microsoft para hacer aplicaciones Web e el cliete y en el servidor

Lo que se hace es generar javascript apartit de typescript y asi nos aseguramos que funciona en todas partes, es lo que se usa en el mundo real para hacer cosas en condiciones

Pregunta de clase

¿Qué afirmación es FALSA?

a) TypeScript es un lenguaje diferente de JavaScript

b) Todo programa en JavaScript es compatible con TypeScript

c) Todo programa en TypeScript es compatible con JavaScript

d) Todo programa en TypeScript se puede convertir en JavaScript Elige una opción (a,b,c,d)

Respuesta correcta C Es porque TypeScrip es JavaScript con cosas, entonces si intento “compilar” de TypeScript hacia JavaScript hay cosas que alomejor no se pueden hacer.

Clase 24 de Marzo

Numeros aleatorios

/ Math.random() devuelve un número real
// aleatorio entre 0 (inc) y 1 (excl)
console.log(Math.random());
let k = 10;
let x;
//Número entero aleatorio entre 0(inc) y k (excl)
x = Math.trunc(k * Math.random()); //Cota superior K no incluido
console.log(x);

Fechas Internarmente ZULU pero realmente local, un poco extraño

'use strict'
// Si construimos un objeto Date sin pasar argumentos,
// obtenemos la fecha actual
let d1 = new Date();
console.log(d1); // 2026-03-17T16:01:09.858Z
// Hacemos un cálculo matemático cualquiera, complejo,
// para tardar cierto tiempo (en js no hay nada equivalente
// a sleep)
for (let i = 0; i<100000000; ++i){
let x = Math.random();
x**2.50;
}
let d2 = new Date();
console.log(d2); // 2026-03-17T16:01:10.687Z
// Tiempo transcurrido
console.log(d2-d1); // 829 (milisegundos)

Para que sea UTC

let intervalo3 = Date.UTC(2018, 8, 3, 9, 0, 0); 

let d3 = new Date(intervalo3)

Resta de dos Dates es un numero (intervarlo), peor no puedo sumarle a un date un intervalo porque se jode.

Pregunta de clase

¿Qué afirmación es FALSA?

a) Un objeto Date siempre contiene la hora local.

b) Un objeto Date siempre contiene la hora UTC.

c) Un objeto Date siempre contiene la hora Zulu.

d) El constructor del objeto Date siempre entiende la hora como local.

Respuesta correcta A Tener en cuenta que puedes tener muchos usuarios y no tienen porque tener la misma hora todos. Ejemplo España y Canarias

Clase 25 de Marzo

DOM -> Document object Model, es una API que permite procesar una página HTML usando JavaScript.

Cuando el navegador carga un HTML la procesa para convertirla en DM y de ahi se representa

El navegador cuando se lo entrega al usuario deja de utilizar el HTML

Antes se usaba jQuery pero se dejo de usar porque JavaScript vanilla se mejoro.

Eventos

En el contexto del desarrollo de software, un evento es una acción que sucede y que ha de ser tratada por el programa, por ejemplo eventos de raton, pantalla tactil etc… A la respuestas se les llama manejadores. Tenemos que escribir las funciones manejador

En el DOM ahay dos objtos globales muy importante “Window” “document”, estan predefininidos y estan presentes en cualquier documento

Hay muchos eventos en JavaScript, trabajaremos principalmente con el click. Necesitamos saber el nombre del evento, donde pasa (event target), como responder (event handler) y más detalles (event object)

En JavaScript contemporaneo -> document.querySelector() su argumento sera un selector CSS que especifique el elemento

Invocamos al método addEventListener de este objeto pasando como parametros:

Esto así mismo puede disparar varios elementos y basta solo con llamar a addEventListener

MUY IMPORTANTE, vamos a trabajar bajo esto apartir de ahora, saberselo bien

Esto es un ejemplo de Miguel de Hola mundo

En javascript antiguo existian elementos como metodos, no hay que usarlas. Tenemos que usar document.querySelector() y document.querySelectorAll()

Pregunta de clase

El esquema básico de una aplicación en el DOM es

a) Escribimos una función manejador, seleccionamos un evento (preferentemente por el ID del evento) e invocamos al manejador, pasándole el evento.

b) Escribimos una función manejador, seleccionamos un elemento y le asignamos el manejador, indicando siempre el nombre del evento que disparará ese manejador.

c) Preparamos un evento, selecciomos un atributo del evento y vinculamos ese atributo con un atributo concreto de un elemento concreto del HTML.

d) Escribimos una función manejador, y le pasamos como argumentos el id del objeto al que irá asociado y el nombre del evento.

Respuesta correcta B La A esta mal porque los eventos tienen nombre no ID y nunca invocamos al manejador

Clase 7 de abril

El manejador no puede recibir parámetros, lo más comodo es usar una variable global

Los eventos se propagan hacía atras a los elementos antecesores.

En código, recetas y libros antiguos podremos encontrar selección de ele- mentos con métodos como document.getElementById document.getElementsByName document.getElementsByTagName document.getElementsByClassName document.images document.forms document.links … etc

Incluso ChatGPT, Deepseek, Gemini y Claude (en 2025) usan estas fun- ciones anticuadas. Debemos evitarlas, en favor de document.querySelector() y document.querySelectorAll()

Trabajar siempre con trazas y consola de depuracion para detectar errores

.textContent representa el contenido de texto de un nodo y sus dencendientes.

Pregunta de clase

Para escribir texto dentro de un elemento HTML mediante el DOM

a. Empleamos el método textContent, al que pasamos un selector (para especificar dónde escribimos) y la cadena de texto a escribir.

b. Empleamos el método textContext, al que pasamos un selector (para especificar dónde escribimos) y la cadena de texto a escribir.

c. Primero seleccionamos el elemento con getElement(), luego, modificamos la propiedad textContent del elemento.

d. Primero seleccionamos el elemento con querySelector(), luego, modificamos la propiedad textContent del elemento.

Elige una opción (a,b,c,d)

Respuesta correcta D basicamente es porque eso es lo que hacemos.

Clase 8 de abril

Crear un elemento dinamico en el dom hay que usar document.createElement(). Recibe como argumento una cadena con el nombre de elemento HTML (etiqueta). Devuelve un elemento de ese tipo

Con el método append de un elemento añadimos otros elemento en su interior

Ejemplo crear p

Una vez seleccionado un elemento o elementos mediante un selector, in- sertarlo en diferentes posiciones

También cambiarlo o eliminarlo

Si se inspecciona el emento, cambia el DOM nunca el HTML original.

Pregunta de clase

Crear un elemento dinámicamente mediante el DOM significa

a. Que el elemento lo creamos de la manera más rápida posible.

b. Que el elemento no está originalmente en el documento HTML, lo creamos en JavaScript y lo insertamos en el HTML.

c. Que el elemento no está originalmente en el documento HTML, lo creamos en JavaScript y lo insertamos en el DOM (aunque esto no modifica el HTML).

d. Que el elemento lo creamos editando el código HTML en el servidor.

Respuesta correcta C

Clase 14 de abril

Vamos a ver con un manejador como manejar varios elementos

Como podemos por ejemplo modificar el css, podemos hacer cosas como ocultar imagenes, por ejemplo modificando su clase y ponerle que sea oculta

<div id="marco_foto" class="oculto">
<img src="images/plaza_espana.jpg" alt="Plaza de España, Madrid">
</div>

Y modificamos el DOM asi para que sea visible

<div id="marco_foto">
<img src="images/plaza_espana.jpg" alt="Plaza de España, Madrid">
</div>

Basicamente lo que heos hecho ha sido quitarle la clase oculto. Ejemplo

For no se puede usar ni tampoco class porque se confunde. Por eso por ejemplo para usar class hay que usar className

parrafo1.className = "noticia oculto deportes"

Pero es mas comodo usar Class.List.add o Class.List.remove

marco.classList.add("oculto");

marco.classList.remove("oculto");

Pregunta del dia

a. Un selector css que devuelve el elemento con ese identificador.

b. Una propiedad del objeto con los detalles de un evento, que permite conocer el identificador del elemento que ha recibido el evento.

c. Una propiedad del manejador de un evento, que permite conocer el identificador del elemento que ha recibido el evento.

d. Un método que devuelve el identificador del elemento actual.

Respuesta correcta B La c no es porque los manejadores no tienen propiedades (son como las funciones, tienen parametros)

Clase 15 de abril

Eventos de raton

mouseleave -> Se recibe cuando el ratón abandona el elemento seleccionado

Esto es un ejemplo Miguel no le gusta porque no estan las cosas separadas y esta todo en la interfez de usuario. Esto puede dar muchos problemas a futuro porque estas atado a esta interfaz.

Usar para editar las clases.

Otro esquema que se usa mucho es

Como se puede ver en este ejemplo, selecionamos el DIV general y luego interactuamnos con nada uno individualmente

Pregunta del dia

Una de las siguientes afirmaciones falsa ¿cuál?

a. Cuando un elemento recibe un evento, todos sus descendientes (hijos, nietos…) lo reciben tambien.

b. Cuando un elemento recibe un evento, todos sus ascendentes (padre, abuelo…) lo reciben tambien.

c. Cuando el ratón llega a un elemento, este recibe el evento mouseOver.

d. Cuando el ratón abandona un elemento, o cualquiera de sus descendentes (hijos, nietos), este elemento recibe el evento mouseOut.

Elige una opción (a,b,c,d)

Opcion correcta A Tengo que buscar para desarrollarla

Clase 21 de abril

Vamos a ver como manejar formularios -> Leer los valores

Añadimos un manejador para el evento change

Leemos el atributo value del objeto element correspondiente

La gracia esta en que cuando el usuario cambia el foco (click en otro sitio o lo que sea) se manda la informaicon del formulario en este ejemplo

Ejemplo

Para consultar el estado de un radiobutton o un checkbox, usamos un selector como input[name=figura]:checked

El selector :checked captura todos los input activados

Ejemplo

Validar un formulario

Validar un formulario consiste en comprobar que el usuario ha rellenado los campos con valores adecuados. Podemos usar HTML con sus cosas, pero si queremos control absoluto es mejor procesarlo por javascript

Ejemplo

Ejemplo En este ejemplo a mi el que más me convence para una pass es keyup

Cambio de tema POO basada en herencias vs POO basada en protipos

POO -> PROGRAMACIÓN ORIENTAZA A OBJETOS

La gran mayoría de lenguajes y herramientas diversas que emplean POO (programación orientada a objetos) aplican POO basada en herencia

Para solucionar una serie de problemas bien conocidos en la POO tra- dicional. No prfiere la composición frente a la herencia, sino que omite por completo la herencia y se basa solo en composición

Problemas de la herencia tradicional

Si cuesta mucho modificar/cambiar algo es Fuertemente acoplado

———– POO basado en prototipo ———–