Math en JavaScript

Clase 3 de 30 • Taller Práctico de JavaScript: Matemáticas y Estadística Básica

Jorge Arias Argüelles

student•

Notes...

// Circle
console.group('Circle');
const circleRadio = 5;
const circleDiameter = circleRadio * 2;

const circlePerimeter = circleDiameter * Math.PI;
const circleArea = (circleRadio * circleRadio) * Math.PI;
// const circleArea2 = (circleRadio ** 2) * Math.PI;
// const circleArea3 = Math.pow(radio,2) * Math.PI;

console.log({circleRadio, circleDiameter, circlePerimeter, circleArea});

function circleCalcs(radio){
    return{
        diameter: radio * 2,
        perimeter: ((radio * 2) * Math.PI).toFixed(3),
        area: (Math.pow(radio,2) * Math.PI).toFixed(3)
    }
}
console.groupEnd('Circle');

Carlos Rodríguez

student•

Que buen aporte.

Lina María Méndez González

student•

Pero no dijiste el atajo para sacar varios cursores a la vez -_-

Juan Castro

teacher•

command + alt + click

Lina María Méndez González

student•

gracias

Andres Felipe Rivillas Paez

student•

Quise agragarle al reto un poco de DOM con JS para hacerlo mas practico

class Rectángulo {
    constructor(lado, base){
        this.lado = lado;
        this.base = base;
    }
    areaCuadrado(){
        return this.lado * this.base;
    }
    perimetroCuadrado(){
        return (this.lado * 2) + (this.base * 2);
    }
}
class Circulo{
    constructor(radio){
        this.pi = 3.1416
        this.radio = radio;
    }
    areaCirculo(){
        return this.pi * (this.radio ** 2);
    }
    perimetroCirculo(){
        return 2 * (this.pi * this.radio);
    }
    diametro(){
        return 2 * this.radio;
    }
}
class Triangulo{
    constructor(a,b,c){
        this.a = a;
        this.b = b;
        this.c = c;
    }
    semiperimetro(){
        return (this.a + this.b + this.c) / 2;
    }
    areaSinAltura(){
        let area = (this.semiperimetro() * (this.semiperimetro() - this.a) * (this.semiperimetro() - this.b) * (this.semiperimetro() - this.c)); 
        return Math.pow(area, 1/2).toFixed(2);
    }
    areaTrianguloRectangulo(){
        return (this.a * this.b) / 2;
    }
}

function ejecutarRectangulo(options){
    const lado = document.getElementById('ladoBase');
    const base = document.getElementById('lado');
    const resultadoRectangulo = document.getElementById('resultadoRectangulo');
    const rectangulo = new Rectangulo(Number(base.value), Number(lado.value));
    switch (options){
        case 1:
            resultadoRectangulo.innerHTML = rectangulo.areaCuadrado() + ' CM2 ';
            break;
        case 2:
            resultadoRectangulo.innerHTML = rectangulo.perimetroCuadrado() +' CM2 ';
            
            break;
        default:
            resultadoRectangulo.innerHTML = 'datos incorrectos';
            break;
    }
}

function ejecutarCirculo(options){
    const radio = document.getElementById('radio');
    const resultadoCirculo = document.getElementById('resultadoCirculo');
    const circulo = new Circulo(Number(radio.value));
    switch (options){
        case 1:
            resultadoCirculo.innerHTML = circulo.areaCirculo() + ' CM2 '; 
            break;
        case 2:
            resultadoCirculo.innerHTML = circulo.perimetroCirculo() + ' CM2 ';
            break;
        case 3:
            resultadoCirculo.innerHTML = circulo.diametro() + ' CM2 ';
            break;
        default:
            resultadoCirculo.innerHTML = 'datos incorrectos';
            break;
    }
}

function ejecutarTriangulo(options){
    const ladoA = document.getElementById('ladoA');
    const ladoB = document.getElementById('ladoB');
    const ladoC = document.getElementById('ladoC');
    const resultadoTriangulo = document.getElementById('resultadoTriangulo');
    const triangulo = new Triangulo(Number(ladoA.value), Number(ladoB.value), Number(ladoC.value));
    switch (options) {
        case 1:
            resultadoTriangulo.innerHTML = triangulo.semiperimetro() + ' CM2 ';
            break;
        case 2:
            resultadoTriangulo.innerHTML = triangulo.areaSinAltura() + ' CM2 ';
            break;
        case 3:
            resultadoTriangulo.innerHTML = triangulo.areaTrianguloRectangulo() + ' CM2 ';
            break;
        default:
            resultadoTriangulo.innerHTML = 'datos incorrectos';
            break;
    }
}

<!DOCTYPE html>
<html lang="es">
<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">
    <title>Taller practico de matematicas con JS</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="./geometria/geometria.html">Geometria</a></li>
                <li><a href="./finanzas/finanzas.html">Finanzas</a></li>
                <li><a href="#">Estadistica</a></li>
                <li><a href="#">Analisis de salarios</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section></section>
    </main>
    <footer>
        <section></section>
    </footer>
    <script src="./main.js"></script>
</body>
</html>

Carlos Rodríguez

student•

Que gran trabajo.

Sergio Javier Lopez Olivera

student•

Usando el método .exp y .random el usuario puede generar un número elevado a la base de Euler y a la vez multiplicarlo por un número aleatorio generado entre 0 y 1. Esto es de utilidad si queremos una app de cálculos financieros. .


function calculateEuler(number) {
    return {
        Exponentiation: Math.exp(number).toFixed(2),
        RandomEuler: (Math.random() * Math.exp(number)).toFixed(3),
    }
}

. Refs:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed (toFixed, el método que empleó el profesor para limitar a una cantidad de decimales el resultado, sin embargo transforma a este último a un string)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/exp (Math.exp, el número de Euler para elevarlo al número que le asignemos)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random (Math.random, genera un número aleatorio entre 0 y 1)

Carlos Rodríguez

student•

Buenísimo.

Axel Enrique Galeed Gutierrez

student•

Les comparto mis apuntes. :D

Math

Math.pow()

Sintaxis

const variableName = Math.pow(base, index);

Nos permite realizar la operación matemática de potencia.

Otra forma de efectuar la operación matemática de potencia

const variableName = base ** index

Math.PI

Nos permite obtener el número π, en donde obtenemos los quince primeros decimales 3.141592653589793.

Redondeo con decimales

toFixed()

Para redondear con los decimales que deseemos podemos el método toFixed(). Este nos devolverá un string, así que si queremos mantener nuestro tipo de dato original, número, tendremos que aplicar el método parseFloat().

Sintaxis

irrationalNumber.toFixed(decimals) // Return string
parseFloat(irrationalNumber.toFixed(decimals)) // Return number

Carlos Rodríguez

student•

Muy bien.

Ricardo Alfonso Chavez Vilcapoma

student•

Primer curso que veo que tiene pocos aportes...no le tengan miedo a las matemáticas...es algo con el cual se tiene que convivir para siempre 😅

Fernando Yutiz

student•

Símbolo de multiplicación * , se llama asterisco.

Eliezer Peña

student•

Por aca comparto mi version de lo visto en la clase

const calculateCircleDiameter = radius => radius * 2
const calculateCirclePerimeter = diameter => diameter * Math.PI
const calculateCircleArea = radius => Math.pow(radius, 2) * Math.PI

const calculateCircle = (radius) => {
  const diameter = calculateCircleDiameter(radius)
  const perimeter = calculateCirclePerimeter(diameter)
  const area = calculateCircleArea(radius)

  return {
    radius,
    diameter,
    perimeter,
    area
  }  
}

Josue Cerron Tuesta

student•

Yo lo practiqué con clases.

class Square {
    constructor(_side) {
        this.side = _side;
    }
    perimeter() { return this.side * 4; }
    area() { return Math.pow(this.side, 2); }
}

class Triangle {
    constructor({ side1, side2, base }) {
        this.side1 = side1;
        this.side2 = side2;
        this.base = base;
    }
    perimeter() { return this.side1 + this.side2 + this.base; }
    area(heigth) {
        //Si el usuario no ingresa una altura.
        let semiP = this.perimeter() / 2;
        let op = semiP * (semiP - this.side1) * (semiP - this.side2) * (semiP - this.base);
        return !heigth ? Math.sqrt(op) : (heigth * this.base) / 2;
    }
}

class Circle {
    constructor(_radio) {
        this.radio = _radio;
    }
    perimeter() { return this.radio * 2 * Math.PI; }
    area() { return Math.pow(this.radio, 2) * Math.PI; }
}

Juan Castro

teacher•

Muy bien. Antes del análisis de salarios vamos a hacer algo parecido pero con métodos estáticos. :D

Carlos Rodríguez

student•

Good.

Yerson Felipe Ramirez Garnica

student•

Como hizo el profe para copiar varias variables al mismo tiempo así como en el minuto 5:06

Alberto Fleitas

student•

Manteniendo ALT y doble click.

Remix Zapata

student•

Usando clases

class Circle {
    constructor({
        radio,
    }) {
        this.radio = radio;
        this.diameter = this.radio * 2;
    }

    getCircumference() {
        const circumference = this.diameter * Math.PI;
        return circumference;
    }

    getArea() {
        const area = Math.pow(this.radio, 2) * Math.PI;
        return area;
    }
}

const myCircle = new Circle({
    radio: 3,
})

console.group("Circle");
console.log({
    myCircle,
    Circumference: myCircle.getCircumference().toFixed(4),
    Area: myCircle.getArea().toFixed(4),
});
console.groupEnd();

Milton Eduardo Hernandez Carias

student•

console.group("circulo");

//radio del circulo const radioCirculo = 3;

//diamtetro del Circulo const diamtetroCirculo = radioCirculo * 2;

//Pi const PI = 3.1415;

// circunferencia del circulo const circunferencia = diamtetroCirculo * PI;

// area del circulo const areaCirculo = (radioCirculo ** 2) * PI;

function calcularperimetroCirculo(radio,PI){ const diamtetro = radio * 2; const radioCirculo = Math.pow(radio, 2); return{ circunferencia:diamtetro * PI, area:radioCirculo * PI,

    //mi forma mas larga pero funciona

// diamtetro: radio * 2, // circunferencia: (radio * 2) * PI, // area: (radio ** 2) * PI, };

}

console.log({ radioCirculo, diamtetroCirculo, PI, circunferencia, areaCirculo })

console.groupEnd("circulo");

Uriel Solis Salinas

student•

Mis notas de VS por si le sirven a alguien:

console.group("Circulo");

const radioCirculo = 3;
const diametroCirculo = radioCirculo*2;
const PI =3.1416;

const perimetroCirculo = diametroCirculo * PI;
const areaCirculo = PI * (radioCirculo**2); // Con dos asteriscos "**", podemos decir que algo esta a la potencia.

console.log({
    radioCirculo,
    diametroCirculo,
    PI,
    perimetroCirculo,
    areaCirculo
})

function calcularCirculo (radio) {
    const diametro = radio * 2;
    const radioAlCuadrado = Math.pow(radio, 2); //Math es un objeto con el que podemos hacer distintos cálculos matemáticos, en este caso .pow es para potencias.

    return {
        perimetro: diametro * Math.PI, // Math.PI nos da el valor de PI, sin necesidad de que nosotros lo declaremos.
        area: radioAlCuadrado * Math.PI.toFixed(4) // toFixed nos da a elegir la cantidad de decimales que queramos.
    }
}

Matías Wasiak

student•

Notas de la clase ✍🏻

// Código del círculo
console.group("Círculos");

// Radio
const radioCirculo = 4;

// Diámetro
const diametroCirculo = radioCirculo * 2;

// PI
const PI = Math.PI;

// Circunferencia
const perimetroCirculo = diametroCirculo * PI;

// Área
const areaCirculo = radioCirculo ** 2 * PI;

function calcularCirculo(radio) {
  const radius = radio;
  const diametro = radio * 2;
  const PI = Math.PI;
  const circunferencia = diametro * PI;
  const area = radio ** 2 * PI;
  return { radius, diametro, PI, circunferencia, area };
}

console.log({
  radioCirculo,
  diametroCirculo,
  PI,
  perimetroCirculo,
  areaCirculo,
});

console.groupEnd("Círculos");

Ricardo Alfonso Chavez Vilcapoma

student•

++Diferencia de Math.ceil y Math.round++

Math.round permite obtener el número entero resultado del redondeo de un número. Si el número es menor a .5, redondeará el número entero anterior y si es mayor, al número entero posterior.

Math.ceil permite obtener el número entero mayor de un número.

Leonardo Diaz

student•

<function circuloPerimetro(){
  //const pi = 3.1416;
  const radio = prompt("Digita un radio: ");
  const diametro = radio * 2;

  const perimetro = Math.PI * diametro;
  console.log("El perimetro es: " + perimetro);
}

circuloPerimetro();

function circuloArea(){
  const radio =  prompt("Digita un radio: ");
  const area = Math.PI * Math.pow(radio, 2);
  console.log("El area es: " + area);
}

circuloArea();>

Elkin David Jaramillo Flórez

student•

//Ciculo
function calcularCirculo(radioCirculo) {
  return {
    diametroCirculo: radioCirculo * 2,
    circunferencia: diametroCirculo * Math.PI,
    areaCirculo: Math.pow(radioCirculo, 2) * Math.PI,
  };
}
console.log(calcularCirculo(3));

Huilén Solís

student•

Como hizo el profe para ir a un paso atras en el minuto 10:18, cuando borro math sin querer y la revirtio con un atajo de teclado?

Ricardo Alfonso Chavez Vilcapoma

student•

Ctrl + z

Rafael Tobias Sanchez Rojas

student•

console.group('Circulo')

let radioCirculo = 3;

function calcularDiametroCirculo(radio) {
    return radio * 2;
}

function calcularPerimetroCirculo(radio) {
    const diametro = calcularDiametroCirculo(radio);
    return Math.PI * diametro;
}

function calcularAreaCirculo(radio) {
    return Math.PI * (radio * radio);
}


const diametro = calcularDiametroCirculo(radioCirculo);
const perimetro = calcularPerimetroCirculo(radioCirculo);
const area = calcularAreaCirculo(radioCirculo);

console.log (
    {
        radioCirculo,
         area,
         diametro,
         perimetro

    }
)
console.groupEnd('Circulo')
```*console*.group('Circulo')
let radioCirculo = 3;
function calcularDiametroCirculo(radio) {    return radio \* 2;}
function calcularPerimetroCirculo(radio) {    const diametro = calcularDiametroCirculo(radio);    return *Math*.PI \* diametro;}
function calcularAreaCirculo(radio) {    return *Math*.PI \* (radio \* radio);}

const diametro = calcularDiametroCirculo(radioCirculo);const perimetro = calcularPerimetroCirculo(radioCirculo);const area = calcularAreaCirculo(radioCirculo);
*console*.log (    {        radioCirculo,         area,         diametro,         perimetro
    })*console*.groupEnd('Circulo')

Rafael Tobias Sanchez Rojas

student•

console.group('Circulo') let radioCirculo = 3; function calcularDiametroCirculo(radio) { return radio * 2;} function calcularPerimetroCirculo(radio) { const diametro = calcularDiametroCirculo(radio); return Math.PI * diametro;} function calcularAreaCirculo(radio) { return Math.PI * (radio * radio);}

const diametro = calcularDiametroCirculo(radioCirculo);const perimetro = calcularPerimetroCirculo(radioCirculo);const area = calcularAreaCirculo(radioCirculo); console.log ( { radioCirculo, area, diametro, perimetro })console.groupEnd('Circulo')```js

Math en JavaScript

Introducción

¿Ya tomaste el Curso Práctico de JavaScript?

Matemáticas en JavaScript

Fórmulas matemáticas en JavaScript

Math en JavaScript

Reto: altura de un triángulo

Playground: Calcula la Altura de un Triángulo Escaleno

Porcentajes

Cómo calcular porcentajes

Calculando descuentos con JavaScript

Ejercicio de crear cupones de descuento

Método find vs. método filter

Playground: Encuentra el ID

Estadística básica

Qué es promedio, moda y mediana

Calculando el promedio

Método reduce

Calculando la mediana en una lista impar

Calculando la mediana en una lista par

Método sort

Calculando la moda: objetos a partir de arrays

Calculando la moda: arrays a partir de objetos

Playground: Transforma Objetos en Arrays

Promedio Ponderado en JavaScript: Fórmulas y Casos de Uso

PlatziMath: clases y métodos estáticos

Análisis de salarios

Cómo estructurar información en proyectos de software

Análisis salarial con JavaScript

Proyección salarial personal

Reestructurando información sobre la marcha

Salarios empresariales

Proyección de salarios por empresas

Top 10% de salarios

Análisis de la Mediana Salarial con HTML, CSS y JavaScript

Próximos pasos

Toma el Taller Práctico de JavaScript: Videojuegos