Ordenando
This commit is contained in:
@@ -0,0 +1,81 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Condicionales Javascript</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
/*// IF
|
||||
var n1 =prompt("Introduce tu nota","5");
|
||||
if (n1>=5) {
|
||||
document.write("Estas aprobado");
|
||||
} else {
|
||||
document.write("Estas suspenso");
|
||||
}*/
|
||||
|
||||
/*//IF anidado
|
||||
if (condicion1) {
|
||||
// código a ejecutar si condicion1 es verdadera
|
||||
} else if (condicion2) {
|
||||
// código a ejecutar (no cumple la condicion1 pero cumple la condicion2)
|
||||
} else {
|
||||
// código a ejecutar (no cumple ninguna)
|
||||
}*/
|
||||
|
||||
|
||||
/*// SWITCH
|
||||
switch (variable) {
|
||||
case valor1:
|
||||
// código a ejecutar si la variable es igual a valor1
|
||||
break;
|
||||
case valor2:
|
||||
// código a ejecutar si la variable es igual a valor2
|
||||
break;
|
||||
default:
|
||||
// código a ejecutar si ninguna de las condiciones anteriores es verdadera
|
||||
}*/
|
||||
|
||||
/*Ejemplo Switch
|
||||
let valoracionUsuario = 2; // De 1 a 5 estrellas
|
||||
|
||||
switch (valoracionUsuario) {
|
||||
case 1:
|
||||
console.log("Pesima");
|
||||
break;
|
||||
case 2:
|
||||
console.log("Mala");
|
||||
break;
|
||||
case 3:
|
||||
console.log("Regular");
|
||||
break;
|
||||
case 4:
|
||||
console.log("Buena");
|
||||
break;
|
||||
case 5:
|
||||
console.log("Excelente");
|
||||
break;
|
||||
default:
|
||||
console.log("No has valorado nuestro servicio.");
|
||||
}*/
|
||||
|
||||
|
||||
/*//Operador ternario
|
||||
|
||||
condicion ? expresion_si_verdadero : expresion_si_falso;
|
||||
|
||||
Ejemplo:
|
||||
|
||||
let edad = 20;
|
||||
let mensaje = (edad >= 18) ? "Eres mayor de edad" : "Eres menor de edad";
|
||||
|
||||
console.log(mensaje);
|
||||
|
||||
|
||||
*/
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,82 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Bucles Javascript</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// BUCLES
|
||||
// Prueb WHILE (No sabes cuantas veces va a iterar)
|
||||
/*j=4; // Inicialización
|
||||
while (j<100) { // Condición
|
||||
document.write("El valor de j es:" + j + "<br>"); // Instrucción
|
||||
j=j+2; // Incremento
|
||||
}*/
|
||||
|
||||
/* While con pares e impares
|
||||
i=2;
|
||||
document.write("Imprimiendo los pares"+"<br>");
|
||||
while (i<10) {
|
||||
document.write( i + "<br>");
|
||||
i +=2;
|
||||
}
|
||||
|
||||
i=1;
|
||||
document.write("Imprimiendo los impares"+"<br>");
|
||||
while (i<10) {
|
||||
document.write( i + "<br>");
|
||||
i=i+2;
|
||||
}*/
|
||||
|
||||
// Do-while: (garantiza que el bloque de código se ejecute al menos una vez antes de verificar la condición)
|
||||
/*
|
||||
let i = 0;
|
||||
do {
|
||||
// Código a repetir
|
||||
document.write(i + "<br>");
|
||||
i++;
|
||||
} while (i < 5);
|
||||
*/
|
||||
|
||||
|
||||
/* Prueba FOR (Sabes cuantas veces va a iterar)
|
||||
// FOR (inicialización; condición; incremento)
|
||||
for (i=0;i<100;i++) {
|
||||
document.write(i + "<br>");
|
||||
}*///Puede ser por ejemplo con 2 contadores, 2 condiciones y 2 incrementos.
|
||||
|
||||
/*// Prueba FOR con array
|
||||
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
|
||||
|
||||
for(var i=0; i<7; i++) {
|
||||
document.write(dias[i] + "<br>");
|
||||
}*/
|
||||
|
||||
|
||||
// for...of: ECMAScript 6, itera sobre los valores de un iterable (por ejemplo, un array o un string).
|
||||
/*
|
||||
const miArray = [1, 2, 3];
|
||||
for (const valor of miArray) {
|
||||
// Código a repetir
|
||||
console.log(valor);
|
||||
}
|
||||
*/
|
||||
|
||||
// for...in: Itera sobre las propiedades enumerables de un objeto. Se utiliza principalmente para objetos.
|
||||
/*
|
||||
const miObjeto = { a: 1, b: 2, c: 3 };
|
||||
for (let key in miObjeto) {
|
||||
// Código a repetir
|
||||
console.log(key, miObjeto[key]);
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,122 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>EVENTOS DOM</title>
|
||||
<style>
|
||||
#miElemento {
|
||||
color:green;
|
||||
font-size:2em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="miElemento"><p>Hola tengo aplicado un evento</p></div>
|
||||
<script>
|
||||
/*
|
||||
Manejo del DOM (Document Object Model) en JavaScript.
|
||||
Usos habituales incluyen:
|
||||
|
||||
Manipulación de Contenido: Cambiar, agregar o eliminar elementos HTML en respuesta a eventos o acciones del usuario.
|
||||
|
||||
Actualización de Estilos: Modificar propiedades de estilo CSS para cambiar la apariencia de elementos en la página.
|
||||
|
||||
Manejo de Eventos: Asociar funciones JavaScript a eventos como clics, cambios, y teclas presionadas.
|
||||
|
||||
Validación de Formularios: Verificar y validar datos de entrada en formularios antes de enviarlos al servidor.
|
||||
|
||||
Animaciones y Transiciones: Crear efectos visuales mediante cambios graduales en propiedades CSS usando JavaScript.
|
||||
|
||||
Creación de Elementos Dinámicamente: Generar y agregar nuevos elementos HTML al DOM según sea necesario.
|
||||
|
||||
*/
|
||||
/*
|
||||
Manejo de eventos:
|
||||
|
||||
Identificación del Elemento: Selecciona el elemento HTML al que deseas asociar un evento. Puedes hacer esto usando métodos como document.getElementById, document.querySelector, etc.
|
||||
|
||||
Asociación del Evento: Utiliza un método de asociación de eventos, como addEventListener, para vincular una función de JavaScript al evento específico del elemento.
|
||||
*/
|
||||
|
||||
//Selección del Elemento:
|
||||
const miElemento = document.getElementById('miElemento');
|
||||
//Uso de addEventListener:
|
||||
miElemento.addEventListener('click', miFuncion);
|
||||
|
||||
//Definición de la Función:
|
||||
function miFuncion() {
|
||||
// Código a ejecutar cuando se produce el evento
|
||||
|
||||
if (miElemento.style.color === "green") {
|
||||
miElemento.style.color="blue";
|
||||
} else {
|
||||
miElemento.style.color="green";
|
||||
}
|
||||
}
|
||||
|
||||
//Cuando ocurre el evento (por ejemplo, un clic del mouse en el elemento), la función asociada se ejecuta automáticamente.
|
||||
|
||||
/*
|
||||
Eventos de Ratón:
|
||||
click: Se activa cuando se hace clic en un elemento.
|
||||
dblclick: Se activa cuando se hace doble clic en un elemento.
|
||||
mousedown: Se activa cuando se presiona el botón del ratón.
|
||||
mouseup: Se activa cuando se suelta el botón del ratón.
|
||||
mousemove: Se activa cuando se mueve el ratón sobre un elemento.
|
||||
|
||||
Eventos de Teclado:
|
||||
keydown: Se activa cuando se presiona una tecla.
|
||||
keyup: Se activa cuando se suelta una tecla.
|
||||
keypress: Se activa cuando se mantiene presionada una tecla.
|
||||
|
||||
Eventos de Formulario:
|
||||
submit: Se activa cuando se envía un formulario.
|
||||
change: Se activa cuando el valor de un elemento de formulario cambia.
|
||||
input: Se activa cuando se introduce texto en un campo de entrada.
|
||||
|
||||
Eventos de Documento:
|
||||
DOMContentLoaded: cuando el documento HTML ha sido completamente cargado y analizado(sin imágenes y estilos).
|
||||
|
||||
Eventos de Ventana:
|
||||
resize: Se activa cuando la ventana del navegador se redimensiona.
|
||||
scroll: Se activa cuando se desplaza la barra de desplazamiento de la ventana.
|
||||
|
||||
Eventos de foco:
|
||||
focus: Se activa cuando un elemento recibe el foco.
|
||||
blur: Se activa cuando un elemento pierde el foco.
|
||||
|
||||
Eventos de Arrastre:
|
||||
dragstart: Se activa cuando se inicia el proceso de arrastre de un elemento.
|
||||
dragend: Se activa cuando se completa el proceso de arrastre de un elemento.
|
||||
|
||||
Eventos de Tiempo:
|
||||
setTimeout: Permite ejecutar una función después de un cierto tiempo de espera.
|
||||
setInterval: Permite ejecutar una función repetidamente cada cierto intervalo de tiempo.
|
||||
|
||||
Eventos de Historial de Navegación:
|
||||
popstate: Se activa cuando el historial de navegación cambia.
|
||||
|
||||
Eventos de Animación:
|
||||
animationstart: Se activa cuando una animación CSS comienza.
|
||||
animationend: Se activa cuando una animación CSS termina.
|
||||
|
||||
Eventos de Red:
|
||||
online: Se activa cuando el dispositivo se conecta a internet.
|
||||
offline: Se activa cuando el dispositivo pierde la conexión a internet.
|
||||
|
||||
Eventos de Geolocalización:
|
||||
geolocation: la posición geográfica del dispositivo cambia.
|
||||
|
||||
Eventos de Escritura táctil:
|
||||
touchstart: Se activa cuando se toca la pantalla.
|
||||
touchend: Se activa cuando se levanta el dedo de la pantalla.
|
||||
|
||||
Eventos de Clipboard:
|
||||
cut: Se activa cuando se corta contenido en el portapapeles.
|
||||
copy: Se activa cuando se copia contenido en el portapapeles.
|
||||
paste: Se activa cuando se pega contenido desde el portapapeles.
|
||||
*/
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,155 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OBJETOS JAVASCRIPT</title>
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
// Definir objetos
|
||||
//Metodo1
|
||||
var miCoche = {
|
||||
marca: "Ford",
|
||||
modelo: "Mustang",
|
||||
ano: 1969
|
||||
};
|
||||
|
||||
//Metodo2
|
||||
var miCoche2 = new Object();
|
||||
miCoche2.marca = "Seat";
|
||||
miCoche2.modelo = "2CV";
|
||||
miCoche2.ano = 1969;
|
||||
|
||||
// Objeto vacio
|
||||
var miCoche3={};
|
||||
|
||||
//Acceso a Propiedades
|
||||
console.log(miCoche2.marca); // Imprime "Seat"
|
||||
console.log(miCoche2['modelo']); // Imprime "2CV"
|
||||
|
||||
|
||||
// Agregar propiedades
|
||||
miCoche.color="white";
|
||||
miCoche.peso="2000kg";
|
||||
|
||||
// Eliminar propiedades
|
||||
delete miCoche.color;
|
||||
|
||||
|
||||
// Definir una clase mediante función constructora
|
||||
function Usuario(nombre, contraseña, email, alta) {
|
||||
this.nombre=nombre;
|
||||
this.contraseña =contraseña;
|
||||
this.email =email;
|
||||
this.alta=alta;
|
||||
// Métodos del objeto
|
||||
this.mostrarUsuario=function() {
|
||||
var datos= "Nombre de usuario: "+this.nombre+"\n"+"E-mail: "+this.email +"\n"+ "Fecha alta: "+this.alta;
|
||||
return datos;
|
||||
};
|
||||
}
|
||||
|
||||
// Otra manera de definir una clase, ECMAScript 6 y posterior
|
||||
|
||||
var Individuo=class {
|
||||
constructor(nombre,contraseña,email,alta) {
|
||||
this.nombre=nombre;
|
||||
this.contraseña =contraseña;
|
||||
this.email =email;
|
||||
this.alta=alta;
|
||||
this.metodo=function() { return "Hola"; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Creamos un objet(Instancia de una clase)
|
||||
usuario1 =new Usuario( "manolo15", "1357ade", "manologarcia@gmail.com","2019");
|
||||
usuario2 =new Usuario( "paco15", "1345", "pacogarcia@gmail.com","2018");
|
||||
|
||||
|
||||
// Añadir una nueva propiedad al prototipo de la clase
|
||||
Usuario.prototype.telefono = null;
|
||||
|
||||
// Creamos una instancia
|
||||
usuario3 =new Usuario( "Lucas", "laquesea", "lucaslaq@gmail.com","2028");
|
||||
// Asignar un valor a la nueva propiedad en una instancia
|
||||
usuario1.telefono = "555-1234";
|
||||
|
||||
|
||||
// Función para el ejemplo del html
|
||||
function alerta(usuario){
|
||||
alert(usuario.mostrarUsuario());
|
||||
}
|
||||
|
||||
|
||||
|
||||
///Ejemplo
|
||||
// Definir una clase Producto
|
||||
var Producto = class {
|
||||
constructor(precio, tipo, stock) {
|
||||
this.precio = precio;
|
||||
this.tipo = tipo;
|
||||
this.stock = stock;
|
||||
}
|
||||
|
||||
// Método incluido en la creación de la clase
|
||||
mostrarProducto() {
|
||||
let datos = "Precio: " + this.precio + "\nTipo: " + this.tipo + "\nStock: " + this.stock;
|
||||
return datos;
|
||||
console.log(datos);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Crear 2 instancias de la clase Producto
|
||||
var Producto1 = new Producto(10, "suministro", true);
|
||||
var Producto2 = new Producto(20, "repuesto", false);
|
||||
var Producto3 = new Producto(undefined, "repuesto", false);
|
||||
var Producto4 = new Producto(5, "repuesto", undefined);
|
||||
|
||||
// Llamar al método mostrarProducto para cada instancia
|
||||
//Producto1.mostrarProducto();
|
||||
//Producto2.mostrarProducto();
|
||||
//Producto3.mostrarProducto();
|
||||
console.log(Producto4.mostrarProducto());
|
||||
|
||||
// Función para el ejemplo del html
|
||||
function alertaProducto(Producto){
|
||||
alert(Producto.mostrarProducto());
|
||||
}
|
||||
|
||||
// Añadimos una nueva propiedad a Producto1
|
||||
Producto1.oferta=true;
|
||||
|
||||
//Producto1.oferta=false;
|
||||
// Iterar sobre las propiedades de Producto1 con for ... in
|
||||
console.log("Propiedades de Producto1:");
|
||||
for (var clave in Producto1) {
|
||||
console.log(clave + ': ' + Producto1[clave]);
|
||||
}
|
||||
|
||||
// Object.keys(obj) itera sobre el objeto y devuelve sus propiedades o keys.
|
||||
console.log("Keys de Producto1:", Object.keys(Producto1));
|
||||
|
||||
// Object.values(obj) itera sobre el objeto y devuelve los valores de sus propiedades.
|
||||
console.log("Values de Producto2:", Object.values(Producto2));
|
||||
|
||||
// Object.entries(obj) itera sobre el objeto y devuelve los pares [key, valor].
|
||||
console.log("Entries de Producto1:", Object.entries(Producto1));
|
||||
|
||||
// Object.fromEntries(array) construye un objeto a partir de un array de pares [key, valor].
|
||||
var objetoDesdeArray = Object.fromEntries(Object.entries(Producto2));
|
||||
console.log("Objeto construido desde array:", objetoDesdeArray);
|
||||
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<span onclick= "alerta(usuario1);">Pulsa aquí para ver a usuario1</span><br>
|
||||
<br>
|
||||
<span onclick= "alerta(usuario2);">Pulsa aquí para ver a usuario2</span><br>
|
||||
<br>
|
||||
<span onclick= "alertaProducto(Producto1);">Pulsa aquí para ver a producto1</span><br>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
101
Practicas/Practicas JS/1 - Introduccion/11_DATE_Javascript.html
Normal file
101
Practicas/Practicas JS/1 - Introduccion/11_DATE_Javascript.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OBJETO DATE JAVASCRIPT</title>
|
||||
<script type="text/javascript">
|
||||
|
||||
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
||||
|
||||
var dias = ["Domingo","Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
|
||||
|
||||
|
||||
// Bibliotecas de objetos javascript
|
||||
|
||||
// Clase Date valores del tipo fecha
|
||||
// Fecha de hoy
|
||||
//new Date() Tue Jan 23 2024 19:13:13 GMT+0100
|
||||
//Date.now() hora actual en milisegundos desde el 1 de Enero de 1970, 00:00:00 UTC
|
||||
|
||||
|
||||
/*
|
||||
getDate() Devuelve el día del mes.
|
||||
getDay() Devuelve el día de la semana.(lunes 1, martes 2, ...)
|
||||
getHours() Retorna las horas. En 24H.
|
||||
getMinutes() Devuelve los minutos.
|
||||
getMonth() Devuelve el mes (atención al mes que empieza por 0 Enero).
|
||||
getSeconds() Devuelve los segundos.
|
||||
getTime() Devuelve los milisegundos desde 1970
|
||||
getFullYear() Retorna el año con 4 dígitos.
|
||||
-----
|
||||
setDate() Actualiza el día del mes.
|
||||
setHours() Actualiza la hora.
|
||||
setMinutes() Cambia los minutos.
|
||||
setMonth() Cambia el mes.
|
||||
setSeconds() Cambia los segundos.
|
||||
setTime() Actualiza la fecha completa en milisegundos
|
||||
setFullYear() Cambia el año 4 dígitos
|
||||
*/
|
||||
|
||||
var fechahoy=new Date();
|
||||
var fechaM=Date.now();
|
||||
document.write( "hoy es "+fechahoy);
|
||||
document.write("<br>");
|
||||
document.write( "hoy es "+fechaM);
|
||||
document.write("<br>");
|
||||
document.write(Date.now());
|
||||
document.write("<br>");
|
||||
// Fijar una fecha
|
||||
//miFecha = new Date(año,mes,dia,hora,minutos,segundos,milisegundos)
|
||||
//miFecha = new Date(año,mes,dia)
|
||||
var fecha =new Date(2020,5,1); //En UTC sin tener en cuenta la diferencia horaria
|
||||
var fecha2 = new Date("2020-06-01");
|
||||
var fecha3 = new Date("2020-06-01T00:00:00Z");
|
||||
//console.log(fecha,fecha2);
|
||||
//console.log(fecha.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
//console.log(fecha2.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
//console.log(fecha3.toISOString()); // "2020-06-01T00:00:00.000Z"
|
||||
|
||||
// Pasar a milisegundos
|
||||
var milFe=fecha.getTime();
|
||||
document.write("<br>fecha " +fecha);
|
||||
document.write("<br>");
|
||||
document.write("<br>fecha " +milFe);
|
||||
document.write("<br>");
|
||||
document.write(" <br>este mes es "+meses[fecha.getMonth()]) ;
|
||||
document.write("<br>");
|
||||
document.write("<br> Hoy es "+dias[fechahoy.getDay()]);
|
||||
document.write("<br>");
|
||||
var date = new Date(872817240000);
|
||||
document.write("<br>"+date);
|
||||
document.write("<br>");
|
||||
|
||||
// valueAsNumber sacar fecha de input "date" en milisegundos
|
||||
//salida=document.getElementById("fecha").valueAsNumber;
|
||||
|
||||
// .toDateString() Devuelve formato sólo de fecha: Fri Aug 24 2018
|
||||
// .toLocaleDateString() Idem al anterior, pero en el formato regional actual: 24/8/2018
|
||||
|
||||
// Clase Math: permite representar y realizar cálculos matemáticos
|
||||
// max y min para valor máximo y minimo
|
||||
document.write("valor máximo "+Math.max(7,3,9)) ;
|
||||
document.write("<br>");
|
||||
// round redondeo
|
||||
document.write("<br>valor redondeado con ROUND "+ Math.round(7.43));
|
||||
document.write("<br>");
|
||||
// Redondeo al alza
|
||||
document.write("<br>valor redondeado con CEIL "+ Math.ceil(7.33));
|
||||
document.write("<br>");
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<input type="date" id="fecha" value="2024-02-24"/>
|
||||
<script>
|
||||
let fechaInput=document.getElementById("fecha").valueAsNumber;
|
||||
console.log(fechaInput);
|
||||
var fechaActual = new Date(); // Fecha y hora actuales
|
||||
console.log(fechaActual);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
152
Practicas/Practicas JS/1 - Introduccion/ARRAYS_JAVASCRIPT.html
Normal file
152
Practicas/Practicas JS/1 - Introduccion/ARRAYS_JAVASCRIPT.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>ARRAYS JAVASCRIPT</title>
|
||||
<script type="text/javascript">
|
||||
|
||||
// Array - Arreglo - Vector - Matriz (Conjunto de datos, con un orden conocido, pueden ser de distintos tipos)
|
||||
|
||||
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
|
||||
|
||||
var edades=[25,20,46,82,45];
|
||||
|
||||
var persona=["Rafa",20,true]
|
||||
|
||||
// Acceder a un dato del array
|
||||
/*document.write(dias[3]);
|
||||
document.write("<br>");*/
|
||||
|
||||
// Modificar un valor del array
|
||||
dias[3]="Juernes";
|
||||
document.write(dias[3]);
|
||||
document.write("<br>");
|
||||
document.write(dias);
|
||||
document.write("<br>");
|
||||
// Añadir un elemento al array
|
||||
dias[7]="Neptuno";
|
||||
document.write(dias);
|
||||
document.write("<br>");
|
||||
// Propiedad length número de elementos
|
||||
// document.write(dias.length);
|
||||
document.write("Los días de la semana son:" + dias.length);
|
||||
document.write("<br>");
|
||||
// Añadir cuando no sabemos cuantos hay
|
||||
dias[dias.length]="Raticulin";
|
||||
document.write("Los días de la semana son:" + dias.length);
|
||||
document.write("<br>");
|
||||
document.write(dias);
|
||||
document.write("<br>");
|
||||
// Añadir con push (final)
|
||||
dias.push("Alderaan","Melmac");
|
||||
document.write(dias);
|
||||
document.write("<br>");
|
||||
// Añadir con unshift (al principio)
|
||||
|
||||
// Eliminar con pop el ultimo y con shift el primero
|
||||
dias.pop();
|
||||
document.write(dias);
|
||||
document.write("<br>");
|
||||
// Unir arrays
|
||||
var union=dias.concat(edades);
|
||||
document.write(union);
|
||||
document.write("<br>");
|
||||
// Separar con join
|
||||
document.write(union.join(" - "));
|
||||
document.write("<br>");
|
||||
// Ordenar alfabeticamente sort() y reverse()
|
||||
var diasordenados=dias.sort();
|
||||
document.write(diasordenados);
|
||||
document.write("<br>");
|
||||
document.write(diasordenados.reverse());
|
||||
document.write("<br>");
|
||||
|
||||
// Recuperar array original
|
||||
var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
|
||||
document.write(meses);
|
||||
document.write("<br>");
|
||||
|
||||
// indexOf(valor) devuelve la primera posición en el array, si no lo encuentra devuelve -1
|
||||
document.write(meses.indexOf("Febrero"));
|
||||
document.write("<br>");
|
||||
|
||||
// lastIndexOf(valor) la última o la primera encontrada desde el final
|
||||
document.write(meses.lastIndexOf("Febrero"));
|
||||
document.write("<br>");
|
||||
|
||||
|
||||
|
||||
|
||||
// Método splice(posición,numerolEmentosExtraidos,elementoAñadido1,elementoAñadido2, ...) se extraen y pueden pasar a otro array, si no se indica numeroElementos se extraen todos desde la posición.
|
||||
// Emplame (((((Destructivo)))))
|
||||
|
||||
var meses = ["enero", "febrero", "lunes", "martes"];
|
||||
var dias = meses.splice(2, 1);
|
||||
|
||||
document.write(dias); // ["lunes"]
|
||||
document.write("<br>");
|
||||
document.write(meses); // ["enero", "febrero", "martes"]
|
||||
document.write("<br>");
|
||||
|
||||
// Si el numeroElementos es 0 no se extraen, el array resultante está vacio
|
||||
var meses = ["enero", "febrero", "lunes", "martes"];
|
||||
var dias = meses.splice(3, 0);
|
||||
document.write(dias); // [""]
|
||||
document.write("<br>");
|
||||
document.write(meses); // ["enero", "febrero", "lunes", "martes"]
|
||||
document.write("<br>");
|
||||
|
||||
meses.splice(3, 0,"marzo","abril");
|
||||
document.write(meses); // ["enero", "febrero", "lunes", "martes","marzo","abril"]
|
||||
|
||||
var extraidos=meses.splice(3,2);
|
||||
document.write(meses); // ["enero", "febrero", "lunes","abril"]
|
||||
document.write(extraidos); // ["martes","marzo"]
|
||||
|
||||
// slice devuelve un array con los elementos extraidos, slice(priemro,último), el primero se incluye el último no. El array original no cambia.
|
||||
// Porción ((((((No destructivo))))))
|
||||
var meses = ["enero", "febrero", "lunes", "martes"];
|
||||
var extraido=meses.slice(1,3);
|
||||
document.write(extraido); //
|
||||
document.write("<br>");
|
||||
document.write(meses); //
|
||||
document.write("<br>");
|
||||
|
||||
// Un solo número, si es positivo desde ese al final, si es negativo desde el final hacia atras.
|
||||
var meses = ["enero", "febrero", "lunes", "martes", "miercoles"];
|
||||
var extraido=meses.slice(2);
|
||||
document.write(extraido); //
|
||||
document.write("<br>");
|
||||
document.write(meses); //
|
||||
document.write("<br>");
|
||||
|
||||
// slice devuelve un array con los elementos extraidos, slice(priemro,último), el primero se incluye el último no. El array original no cambia.
|
||||
// Porción ((((((No destructivo))))))
|
||||
var meses = ["enero", "febrero", "lunes", "martes"];
|
||||
var extraido=meses.slice(1,3);
|
||||
document.write(extraido); // ["febrero", "lunes", "martes"]
|
||||
document.write("<br>");
|
||||
document.write(meses); // ["enero", "febrero", "lunes", "martes"]
|
||||
document.write("<br>");
|
||||
|
||||
// Un solo número, si es positivo desde ese al final, si es negativo desde el final hacia atras.
|
||||
var meses = ["enero", "febrero", "lunes", "martes", "miercoles"];
|
||||
var extraido=meses.slice(2);
|
||||
document.write(extraido); // ["lunes", "martes", "miercoles"]
|
||||
document.write("<br>");
|
||||
document.write(meses); // ["enero", "febrero", "lunes", "martes", "miercoles"]
|
||||
document.write("<br>");//
|
||||
|
||||
// Si es negativo
|
||||
var extraido=meses.slice(-2);
|
||||
document.write(extraido); // ["martes", "miercoles"]
|
||||
document.write("<br>");
|
||||
document.write(meses); // ["enero", "febrero", "lunes", "martes", "miercoles"]
|
||||
document.write("<br>");//
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
// **En JavaScript, alert es una función que muestra un cuadro de diálogo con un mensaje y un botón de "Aceptar". Se utiliza principalmente para mostrar mensajes simples o alertas al usuario. Aquí tienes un ejemplo básico:
|
||||
|
||||
// Muestra un mensaje de alerta al cargar la página
|
||||
alert('¡Hola, este es un ejemplo de alerta en JavaScript!');
|
||||
|
||||
|
||||
// **La función prompt en JavaScript se utiliza para mostrar un cuadro de diálogo que solicita al usuario que ingrese información. A continuación, te proporciono un ejemplo simple:
|
||||
|
||||
// Solicita al usuario que ingrese su nombre
|
||||
var nombreUsuario = prompt('Por favor, ingresa tu nombre:');
|
||||
|
||||
|
||||
// **La función confirm en JavaScript se utiliza para mostrar un cuadro de diálogo de confirmación con botones "Aceptar" y "Cancelar". Este cuadro de diálogo permite al usuario confirmar o cancelar una acción. Aquí tienes un ejemplo:
|
||||
|
||||
// Muestra un cuadro de diálogo de confirmación
|
||||
var respuesta = confirm('¿Estás seguro de que quieres continuar?');
|
||||
|
||||
// **La función document.write en JavaScript se utiliza para escribir contenido directamente en el documento HTML mientras se carga la página.
|
||||
|
||||
// Utiliza document.write para escribir contenido en el documento HTML
|
||||
document.write('<h1>Hola, esto es un ejemplo de document.write</h1>');
|
||||
document.write('<p>¡Bienvenido!</p>');
|
||||
|
||||
|
||||
//Muestra mensajes por consola
|
||||
console.log('');
|
||||
@@ -0,0 +1,128 @@
|
||||
<!Doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>VARIABLES JAVASCRIPT</title>
|
||||
<script type="text/javascript">
|
||||
/*VARIABLES
|
||||
En JavaScript, las variables son contenedores que almacenan valores. Estos valores pueden cambiar durante la ejecución del programa.
|
||||
|
||||
Declaración de Variables:
|
||||
|
||||
var: Forma tradicional - Ámbito de función - Fuera de una función variable global.
|
||||
|
||||
var x = 5;
|
||||
|
||||
let y const: ECMAScript 6 (ES6)2015 - Ámbito de bloque - let permite reasignación(nuevo valor) - const crea variables de solo lectura.
|
||||
|
||||
let y = 10;
|
||||
const PI = 3.1416;
|
||||
|
||||
Ámbito de Variables:
|
||||
|
||||
Ámbito Global:declaradas fuera de cualquier función o bloque tienen un ámbito global y pueden ser accedidas desde cualquier parte del código.
|
||||
Ámbito Local: dentro de una función o bloque tienen un ámbito local y solo son visibles dentro de ese ámbito.
|
||||
|
||||
|
||||
Reasignación:
|
||||
var y let pueden ser reasignadas - const no pueden reasignarse.
|
||||
|
||||
Convenciones de Nombres:
|
||||
camelCase para variables (miVariable) y UPPER_CASE para constantes (MI_CONSTANTE)
|
||||
|
||||
*/
|
||||
|
||||
// scope reasignable redeclarable mutable
|
||||
// var function sí sí sí
|
||||
// let block sí no sí
|
||||
// const block no no sí
|
||||
|
||||
|
||||
// Ámbito o scope en javascript
|
||||
|
||||
var a=3; // Variable Global
|
||||
|
||||
function funcion() {
|
||||
var b=5; // Variable Local
|
||||
c=8; // Variable Global (en modo estricto no funcionaría)
|
||||
|
||||
console.log("<br>");
|
||||
console.log(b); // Accedo a variable Local
|
||||
|
||||
}
|
||||
funcion(); // Se invoca la función
|
||||
|
||||
console.log("<br>");
|
||||
console.log(c); // Accedo a variable Global dentro de una función
|
||||
|
||||
|
||||
//***¨Scope o ámbito de una variable ***/
|
||||
function ejemplo() { // comienzo scope de function y de block (A)
|
||||
var a = 1; let b = 2; const c = 3;
|
||||
if (true) { // comienzo nuevo scope de block (B)
|
||||
var a = 10; // scope: function, redeclara a
|
||||
let b = 20; // scope: block, no redeclara pq scope es bloque (llaves)
|
||||
const c = 30; // scope: block, no redeclara pq scope es bloque (llaves)
|
||||
console.log(a, b, c);// 10 20 30
|
||||
} // fin scope de block (B)
|
||||
console.log(a); // 10 - scope: function. Valor en condición if
|
||||
console.log(b); // 2 - scope: block. Valor 1ª línea function.
|
||||
console.log(c); // 3 - scope: block. Valor 1ª línea function.
|
||||
}// fin scope de function y de block (A)
|
||||
|
||||
|
||||
|
||||
//***** Tipos de Variables (no hay que declarar el tipado de las variables)*****//
|
||||
|
||||
// Numérica - float
|
||||
var edad=25;
|
||||
var altura=1.65;
|
||||
var area=2*4;
|
||||
|
||||
// String - cadena de texto
|
||||
var nombre="Rafa";
|
||||
var letra="E";
|
||||
var numero="15";
|
||||
var frase="Las comillas en un 'texto' pueden ser necesarias";
|
||||
var frase="Las comillas en un \"texto\" pueden ser necesarias";
|
||||
|
||||
// Array - Arreglo - Vector - Matriz (Conjunto de datos, con un orden conocido, pueden ser de distintos tipos)
|
||||
|
||||
var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"];
|
||||
|
||||
var edades=[25,20,46,82,45];
|
||||
|
||||
var persona=["Rafa",20,true]
|
||||
|
||||
// Acceder a un dato del array (posicion entre corchetes)
|
||||
document.write(dias[2] + "<br>"); // Miércoles
|
||||
|
||||
// Object - Objeto
|
||||
|
||||
var chaqueta = {
|
||||
color: "azul",
|
||||
size: 50
|
||||
};
|
||||
|
||||
// Boolean - boleana
|
||||
|
||||
var usuarioRegistrado = false;
|
||||
var ivaIncluido = true;
|
||||
|
||||
// Undefined
|
||||
var laquesea;
|
||||
document.write(laquesea);
|
||||
|
||||
// Null
|
||||
var lado1=12;
|
||||
var lado1=null;
|
||||
|
||||
// NaN (Resultado de operaciones imposibles)(Not a number)
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
46
Practicas/Practicas JS/1 - Introduccion/estilos.css
Normal file
46
Practicas/Practicas JS/1 - Introduccion/estilos.css
Normal file
@@ -0,0 +1,46 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
background: #eaeaea;
|
||||
color: #000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 80px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 40px;
|
||||
font-weight: normal;
|
||||
margin-bottom: 40px;
|
||||
color: #848484;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: #2553df;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
padding: 14px 28px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #1942be;
|
||||
}
|
||||
39
Practicas/Practicas JS/1 - Introduccion/holaMundo.html
Normal file
39
Practicas/Practicas JS/1 - Introduccion/holaMundo.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="./estilos.css" />
|
||||
<title>Mi primera página web con Javascript</title>
|
||||
<!-- Forma #2 - Etiqueta Script en Head -->
|
||||
<script defer>
|
||||
alert('Se ejecuta desde el head');
|
||||
//defer es carga diferida para que se cargue primero la página y despues el javascript
|
||||
</script>
|
||||
<!-- Forma #3 - Archivo externo -->
|
||||
<script defer src="holaMundo.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hola Mundo!</h1>
|
||||
<!-- Forma #1 - Etiqueta Script -->
|
||||
<script>
|
||||
// Notas importantes:
|
||||
// - Javascript es sensible a mayusculas y minisculas.
|
||||
// - Respetar la sintaxis de tipo camel case. getElementById
|
||||
// - Punto y coma al final de cada sentencia.
|
||||
|
||||
// Comentarios de tipo linea
|
||||
/*
|
||||
Comentarios de varias lineas
|
||||
(tipo bloque)
|
||||
*/
|
||||
// El codigo comentado no se ejecuta
|
||||
// alert('Este codigo no se ejecuta');
|
||||
|
||||
document.write('<h2>Hola Mundo!</h2>');
|
||||
alert('Hola soy una alerta!');
|
||||
console.log('Hola desde la consola');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1
Practicas/Practicas JS/1 - Introduccion/holaMundo.js
Normal file
1
Practicas/Practicas JS/1 - Introduccion/holaMundo.js
Normal file
@@ -0,0 +1 @@
|
||||
alert('Hola mundo, desde archivo externo');
|
||||
Reference in New Issue
Block a user