marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Dia 27

Browse Source
This commit is contained in:
Marcos Lopez 2024-01-15 13:54:34 +01:00
parent bfe4688877
commit da3afe49b3
17 changed files with 557 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
Practicas/Practicas JS/Introduccion/VARIABLES_JAVASCRIPT.html Normal file
View File

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

133
Practicas/Practicas JS/Practica 1/Ejercicio_01.html Normal file
View File

@ -0,0 +1,133 @@
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ejercicio 01 Javascript</title>
</head>
<body>
<button id="suma" onclick="suma();">Suma números</button>
<script type="text/javascript">
// 1- Hacer un programa que pida dos numeros(prompt) y nos muestre(document.write) la frase: "La suma de "4" más "5" es 9".
function suma() {
// Pide al usuario UN NÚMERO
let primerNumero ;
while (true) {
primerNumero= parseFloat(prompt("Ingresa UN NÚMERO"));
// Control de dato(precio)
if(!isNaN(primerNumero)) {
break; // Sale del bucle si el precio es válido}
}
alert("Introduce un numero válido");
}//Mientras el número no se a correcto
// Pide al usuario Otro NÚMERO
let segundoNumero ;
while (true) {
segundoNumero= parseFloat(prompt("Ingresa Otro NÚMERO"))
// Control de dato(precio)
if(!isNaN(segundoNumero)) {
break; // Sale del bucle si el precio es válido}
}
alert("Introduce un segundo numero válido");
}//Mientras el número no se a correcto
// Suma los números
let suma =primerNumero+segundoNumero;
document.write("La suma de " + primerNumero + " más " + segundoNumero +" es "+suma);
};
//Ahora(Hay que empaquetar todas las instrucciones en funciones).
/*
function suma(){
let a=parseFloat(prompt("Escribe un número"));
while (isNaN(a)) {
alert("Por favor, ingrese un número válido.");
a=parseFloat(prompt("Escribe un número"));
}
let b=parseFloat(prompt("Escribe otro número"));
while (isNaN(b)) {
alert("Por favor, ingrese un número válido.");
b=parseFloat(prompt("Escribe un número"));
}
let suma =a+b;
document.write("La suma de " + a + " más " + b +" es "+suma);
return [ a, b ];
}
suma();
*/
/*
function obtenerNumeroDesdeUsuario() {
// Solicitar al usuario un número mediante prompt
let input = prompt("Ingrese un número");
// Convertir la entrada a un número y verificar si es un número válido
let numero = parseFloat(input);
while (isNaN(numero)) {
alert("Por favor, ingrese un número válido.");
input = prompt("Ingrese un número");
numero = parseFloat(input);
}
return numero;
}
function mostrarSuma(num1, num2) {
// Calcular la suma de los dos números
let suma = num1 + num2;
// Mostrar la frase con el resultado
alert(`La suma de "${num1}" más "${num2}" es ${suma}`);
}
// Pedir al usuario dos números
let primerNumero = obtenerNumeroDesdeUsuario();
let segundoNumero = obtenerNumeroDesdeUsuario();
// Mostrar la suma de los dos números
mostrarSuma(primerNumero, segundoNumero);
*/
</script>
</body>
</html>

6
Practicas/Practicas JS/Practica 1/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <script src="./main.js"></script>
<script src="./main.js" defer></script> <title>Ejercicio 1</title>
</head> </head>
<body> <body>
<input type="button" name="sumar" onclick="suma();" value="Suma">
</body> </body>
</html> </html>

45
Practicas/Practicas JS/Practica 1/main.js
View File

@ -1,30 +1,17 @@
var nombre = prompt("Cual es tu nombre"); function suma() {
var apellidos = prompt("Cuales son tua apellidos"); let num1 = solicitaNumero("primer");
var ciudad = prompt("En que ciudad vives"); let num2 = solicitaNumero("segundo");
const msg = `Hola ${nombre} ${apellidos} ciudadano de ${ciudad}`; const suma = num1 + num2;
alert(msg); document.write(`<p>La suma de ${num1} y ${num2} es: ${suma}<p>`);
console.log(msg); }
document.write(`<p> ${msg} </p>`);
function solicitaNumero(posicion) {
// if (confirm("¿Te ha gustado la pagina?")) { let numero;
// alert("Gracias por su visita"); do {
// } else { numero = parseFloat(prompt(`Introduzca el ${posicion} número`));
// alert("·$%·%$$%·$%·$%"); if (isNaN(numero) || numero <= 0) {
// } alert("El numero introducido es incorrecto");
}
// if (prompt("Te ha gustado la pagina (Si/No)").toLowerCase() === "si") { } while (isNaN(numero) || numero <= 0);
// alert("Gracias por su visita"); return numero;
// } else {
// alert("·$%·%$$%·$%·$%");
// }
var resp = prompt("Te ha gustado la pagina (Si/No)");
if (resp != null) {
if (resp.toLowerCase() === "si") {
alert("Gracias por su visita");
} else if (resp.toLowerCase() === "no") {
alert("·$%·%$$%·$%·$%");
} else {
alert("Respuesta erronea");
}
} }

BIN
Practicas/Practicas JS/Practica 2/imagenes/cilindro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
Practicas/Practicas JS/Practica 2/imagenes/circunferencia.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.1 KiB

BIN
Practicas/Practicas JS/Practica 2/imagenes/rectangulo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
Practicas/Practicas JS/Practica 2/imagenes/triangulo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

10
Practicas/Practicas JS/Practica 2/index.html
View File

@ -3,10 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js" defer></script> <script type="text/javascript" src="./js/main.js"></script>
<title>Document</title> <title>Ejercicio 2</title>
</head> </head>
<body> <body>
<img style="height: 100px; cursor: pointer;" src="./imagenes/rectangulo.jpg" alt="Rectangulo" onclick=" res = calculosRect();">
<script>document.write(res)</script>
<img style="height: 100px; cursor: pointer;" src="./imagenes/cilindro.png" alt="Cilindro" onclick="calculosCilindro();">
<img style="height: 100px; cursor: pointer;" src="./imagenes/circunferencia.jpg" alt="Circunferencia" onclick="calculosCirculo();">
<img style="height: 100px; cursor: pointer;" src="./imagenes/triangulo.png" alt="Triangulo" onclick="calculosTriangulo();">
</body> </body>
</html> </html>

80
Practicas/Practicas JS/Practica 2/js/main.js Normal file
View File

@ -0,0 +1,80 @@
function calculosRect() {
let alto = solicitaNumero(`Introduzca el alto del rectangulo`);
let ancho = solicitaNumero(`Introduzca el ancho del rectangulo`);
let area = areaRect(alto, ancho).toFixed(2);
let perimetro = perimetroRect(alto, ancho).toFixed(2);
let resultado= `El area del rectangulo es: ${area} \n y su perimetro es: ${perimetro}`
// muestraResultado(resultado);
return resultado;
}
function calculosCirculo() {
let radio = solicitaNumero(`Introduzca el radio del circulo`);
let area = areaCirculo(radio).toFixed(2);
let resultado= `El area del circulo es: ${area}`;
muestraResultado(resultado);
}
function calculosCilindro() {
let altura = solicitaNumero(`Introduzca la altura del cilindro`);
let radio = solicitaNumero(`Introduzca el radio del cilindro`);
let area = areaCilindro(radio, altura).toFixed(2);
let volumen = volumenCilindro(radio, altura).toFixed(2);
let resultado = `El area del cilindro es: ${area} \n su volumen es: ${volumen}`;
muestraResultado(resultado);
}
function calculosTriangulo() {
let base = solicitaNumero(`Introduzca la base del triangulo`);
let altura = solicitaNumero(`Introduzca la altura del triangulo`);
let area = areaTriangulo(base, altura).toFixed(2);
let resultado = `El area del triangulo es: ${area}`;
muestraResultado(resultado);
}
/* Funciones Area y Perimetro de un rectangulo */
function areaRect(alto, ancho) {
let area = alto * ancho;
return area;
}
function perimetroRect(alto, ancho) {
let perimetro = 2 * (alto + ancho);
return perimetro;
}
/* Funcion Area del triangulo */
function areaTriangulo(base, altura) {
let area = (base * altura) / 2;
return area;
}
/* Funcion Area del circulo */
function areaCirculo(radio) {
let area = 2 * Math.PI * radio;
return area;
}
/* Funcion area, volumen del cilindro */
function areaCilindro(radio, altura) {
let area = 2 * Math.PI * Math.pow(radio, 2) + 2 * Math.PI * radio * altura;
return area;
}
function volumenCilindro(radio, altura) {
let volumen = Math.PI * Math.pow(radio, 2) * altura;
return volumen;
}
/* Generica para recoger un numero y validarlo*/
function solicitaNumero(txtPregunta) {
let numero;
do {
numero = parseFloat(prompt(txtPregunta));
if (isNaN(numero) || numero <= 0) {
alert("El numero introducido es incorrecto");
}
} while (isNaN(numero) || numero <= 0);
return numero;
}
function muestraResultado(texto){
let documento= document
document.write(texto)
}

0
Practicas/Practicas JS/Practica 1/Ejercicio_prompt_confirm_alert_console_corregido.html → Practicas/Practicas JS/Practica Introduccion 1/Ejercicio_prompt_confirm_alert_console_corregido.html
View File

12
Practicas/Practicas JS/Practica Introduccion 1/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./main.js" defer></script>
</head>
<body>
</body>
</html>

30
Practicas/Practicas JS/Practica Introduccion 1/main.js Normal file
View File

@ -0,0 +1,30 @@
var nombre = prompt("Cual es tu nombre");
var apellidos = prompt("Cuales son tua apellidos");
var ciudad = prompt("En que ciudad vives");
const msg = `Hola ${nombre} ${apellidos} ciudadano de ${ciudad}`;
alert(msg);
console.log(msg);
document.write(`<p> ${msg} </p>`);
// if (confirm("¿Te ha gustado la pagina?")) {
// alert("Gracias por su visita");
// } else {
// alert("·$%·%$$%·$%·$%");
// }
// if (prompt("Te ha gustado la pagina (Si/No)").toLowerCase() === "si") {
// alert("Gracias por su visita");
// } else {
// alert("·$%·%$$%·$%·$%");
// }
var resp = prompt("Te ha gustado la pagina (Si/No)");
if (resp != null) {
if (resp.toLowerCase() === "si") {
alert("Gracias por su visita");
} else if (resp.toLowerCase() === "no") {
alert("·$%·%$$%·$%·$%");
} else {
alert("Respuesta erronea");
}
}

64
Practicas/Practicas JS/Practica Introduccion 2/Ejercicio_sencillo_compra.html Normal file
View File

@ -0,0 +1,64 @@
<!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>Lista de la compra!</title>
</head>
<body>
<h1>Lista de la compra!</h1>
<!-- Forma #1 - Etiqueta Script -->
<script>
// Pide al usuario el precio del producto
var precioProducto = parseFloat(prompt("Ingresa el precio del producto:"));
// Control de dato(precio)
if(isNaN(precioProducto) || precioProducto<=0) {
alert("Introduce una precio válido");
} else {
// Cuantas unidades quieres
var cantidadUnidades = parseInt(prompt("Cuantas unidades quieres?"));
if(isNaN(cantidadUnidades) || cantidadUnidades<=0) {
alert("Introduce una cantidad válida");
} else {
// Calcula el precio neto del pedido
var precioNeto = precioProducto * cantidadUnidades;
// Calcula el precio total con IVA (por ejemplo, un 21%)
var ivaPorcentaje = 21;
var precioTotalConIVA = precioNeto * (1 + ivaPorcentaje / 100);
// Ofrece un descuento del 15%
var aceptaDescuento = confirm('¿Desea aplicar un descuento del 15%?');
if (aceptaDescuento) {
var descuentoPorcentaje = 15;
var precioConDescuento = precioTotalConIVA * (1 - descuentoPorcentaje / 100);
alert('Gracias por tu compra. El importe a pagar con descuento es: ' + precioConDescuento.toFixed(2));//numero.toFixed(digitos)REDONDEO
} else {
// Ofrece un descuento del 20%
var descuentoReoferta = confirm('¡Oferta especial! ¿Desea aplicar un descuento del 20%?');
if (descuentoReoferta) {
var descuentoReofertaPorcentaje = 20;
var precioConDescuentoReoferta = precioTotalConIVA * (1 - descuentoReofertaPorcentaje / 100);
alert('¡Gracias por ser un buen comprador! El importe a pagar con descuento es: ' + precioConDescuentoReoferta.toFixed(2));
} else {
//alert('Gracias por tu compra. El importe a pagar es: ' + precioTotalConIVA.toFixed(2));
alert("A ti lo que te pasa es: Que eres mu tonto !");
}
}
}//Cantidad correcta
}//Precio correcto
</script>
</body>
</html>

72
Practicas/Practicas JS/Practica Introduccion 2/Ejercicio_sencillo_compra_WHILE.html Normal file
View File

@ -0,0 +1,72 @@
<!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>Lista de la compra!</title>
</head>
<body>
<h1>Lista de la compra!</h1>
<!-- Forma #1 - Etiqueta Script -->
<script>
while (true) {
// Pide al usuario el precio del producto
var precioProducto = parseFloat(prompt("Ingresa el precio del producto:"));
// Control de dato(precio)
if(!isNaN(precioProducto) && precioProducto>0) {
break; // Sale del bucle si el precio es válido}
}
alert("Introduce una precio válido");
}//Mientras el precio no sea válido
while (true) {
// Cuantas unidades quieres
var cantidadUnidades = parseInt(prompt("Cuantas unidades quieres?"));
if(!isNaN(cantidadUnidades) && cantidadUnidades>0) {
break; // Sale del bucle si el precio es válido}
}
alert("Introduce una cantidad válida");
}//Mientras la cantidad no sea válida
// Calcula el precio neto del pedido
var precioNeto = precioProducto * cantidadUnidades;
// Calcula el precio total con IVA (por ejemplo, un 21%)
var ivaPorcentaje = 21;
var precioTotalConIVA = precioNeto * (1 + ivaPorcentaje / 100);
// Ofrece un descuento del 15%
var aceptaDescuento = confirm('¿Desea aplicar un descuento del 15%?');
if (aceptaDescuento) {
var descuentoPorcentaje = 15;
var precioConDescuento = precioTotalConIVA * (1 - descuentoPorcentaje / 100);
alert('Gracias por tu compra. El importe a pagar con descuento es: ' + precioConDescuento.toFixed(2));//numero.toFixed(digitos)REDONDEO
} else {
// Ofrece un descuento del 20%
var descuentoReoferta = confirm('¡Oferta especial! ¿Desea aplicar un descuento del 20%?');
if (descuentoReoferta) {
var descuentoReofertaPorcentaje = 20;
var precioConDescuentoReoferta = precioTotalConIVA * (1 - descuentoReofertaPorcentaje / 100);
alert('¡Gracias por ser un buen comprador! El importe a pagar con descuento es: ' + precioConDescuentoReoferta.toFixed(2));
} else {
//alert('Gracias por tu compra. El importe a pagar es: ' + precioTotalConIVA.toFixed(2));
alert("A ti lo que te pasa es: Que eres mu tonto !");
}
}
</script>
</body>
</html>

12
Practicas/Practicas JS/Practica Introduccion 2/index.html Normal file
View File

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./main.js" defer></script>
<title>Document</title>
</head>
<body>
</body>
</html>

0
Practicas/Practicas JS/Practica 2/main.js → Practicas/Practicas JS/Practica Introduccion 2/main.js
View File