Calcular la distancia entre dos puntos - Objetos en JavaScript

Clase 9 de 51 • Fundamentos de JavaScript 2017

Resumen

Vamos a calcular la distancia entre dos puntos, para esto debemos aplicar la operación matemática para hacer esto.

Podemos definir los puntos como objetos, para esto los escribimos como

const p1 = {
  x:0,
  y:4
}

const p2 = {
  x:3,
  y:4
}

Luego podemos crear una función que reciba dos objetos, calcule la distancia y retorne la diferencia

function distancia(p1,p2) {
  const x = p1.x - p2.x
  const y = p1.y - p2.y

  return Math.sqrt(x * x + y * y)
}

distancia(p1, p2)

David Santiago González Ramos

student•

Estructura de objetos en JavaScript:

const nombreObjeto = { // inicia la construcción del objeto
	// Los objetos tienen atributos que apuntan a un valor
	atributoA: 10,	// Para denotar un atributo, se escribe el nombre del atributo, dos puntos ":" y el valor 
	atributoB: 20,  // Para escribir varios atributos, se separan por coma ","
	atributoC: 30   // El último atributo no lleva coma ni punto y coma

} // cierra la construcción de un objeto

Edmen Alexander Quispe Mamani

student•

gracias, un buen aporte.

Mauricio Hernan Cabrera

student•

En pocas palabras relacionandolo con lo que seria el lenguaje c, seria como crear una estructura

Sebastian Jesús Rios Cabala

student•

Aquí mi recopilación sobre los objetos literales.

// esto es un objeto literal (literal significa que se le asigna un valor desde el principio o directamente)
/*
	EL cuerpo del objeto va entre llaves y se le asigna sus propiedades/valor, las cuales también pueden ser metodos
*/
const MiObjetoLiteral = {

	entero: 10,
	flotante: 20.5,
	cadena: "hola mundo",

	metodo: function () { // esto es una función anonima, pero que se llamará mediante la propieda del objeto, de nombre "metodo"
		alert("usastes el metodo de tú objeto literal")
	},

	metodo2: platzi // creamos un "metodo", pero realmente esto aún no existe
}

// a las propiedades del objeto literal, se accede mediante: NombreDelObjeto.propiedad (notese el ".")

console.log(MiObjetoLiteral.entero) // 10
console.log(MiObjetoLiteral.cadena) // "hola mundo"

console.log(MiObjetoLiteral.flotante) // 20.5
MiObjetoLiteral.flotante = 15.12 // se le asigna un nuevo valor a la propiedad del objeto, llamado flotante
console.log(MiObjetoLiteral.flotante) // 15.12

MiObjetoLiteral.boleano = true // se pueden crear nuevas propiedades desde afuera
console.log(MiObjetoLiteral.boleano) // imprime la nueva propiedad creada en la linea anterior (true)

MiObjetoLiteral.metodo(); // aqui llamamos el metodo del objeto e imprime su alert.
MiObjetoLiteral.metodo(); // aqui llamamos el metodo del objeto e imprime su alert.

// creamos nuestra función "platzi", que estaba siendo utilizada por nuestro objeto, pero que hasta ahora no habia sido creada
function platzi() {
	console.log("siuuuuuuuuuhh")
}

MiObjetoLiteral.metodo2() // se puede acceder a la función de esta manera....
platzi() // ....o de esta manera ```

Rolin Azmitia

student•

Ésto es tan bien explicado, te pareces a Freddy del curso de Programación básica jaja.
Buen trabajo y gracias compañero.

Alfonso Jiménez Ruz

student•

Gracias!!!

Jesús Rosas Ramírez

student•

Fórmula para sacar la distancia entre dos puntos :
D = √(x2 - x1) ^ 2 + (y2 - y1) ^2

Luis Felipe Silgado Cortázar

student•

Math.sqrt(Math.pow(p1.x-p2.x,2)+Math.pow(p1.y-p2.y,2))

Leandro Ortiz

student•

Exelente, gracias por tu aporte.
Le falto ingresar la formula completa, por eso no entendía por que estaba restando

Alberto Domingo Basabe Acurero

student•

aqui les dejo mi codigo de batman vs superman con el uso de objetos. 😄

let superman ={
  nombre:"superman",
  vida:300,
  powerMax:60,
  powerMin:20

}
let batman ={
  nombre:"batman",
  vida:240,
  powerMax:80,
  powerMin:30
}
const Siguenconvida = (pj1, pj2) => superman.vida > 0 && batman.vida > 0
const golpe = (pj) => Math.round(Math.random()* (pj.powerMax-pj.powerMin)+pj.powerMin)


for (let i=0;Siguenconvida(superman,batman);i++) {

 console.log(`Round: ${i+1}`)
 let golpeSuperman =golpe(superman)
 batman.vida -= golpeSuperman
 let golpeBatman = golpe(batman)
 superman.vida -= golpeBatman
 console.log(`superman golpea a batman con una fuerza de ${golpeSuperman} batman queda con una vida de: ${batman.vida}`)
 console.log(`batman golpea a superman con una fuerza de ${golpeBatman} batman queda con una vida de: ${superman.vida}`)
}
if(superman.vida < 0 && batman.vida <0 ){
  console.log(`La pelea ha quedado empate, su vida es menor a 0`)
}
else if(superman.vida > 0){
  console.log(`Superman ha derrotando a ${batman.nombre}. Su total de vida es: ${superman.vida}`)
}
else {
console.log(`batman ha derrotando a ${superman.nombre}. Su total de vida es: ${batman.vida}`)
}

Francisco Javier Rodriguez Gomez

student•

Bien entrenado ese Batman, y Superman lleva criptonita encima JAAAA

Edison Sanchez

student•

een la definicion de Siguenconvida, no deberia ser pj1.vida y pj2.vida?

Luis Montero

student•

Les comparto un artículo sobre las maneras que hay para** crear objetos en JS**

Por medio de objetos literales
Por medio de una función constructora
Utilizando new Object()
Utilizando clases (ES6)
https://medium.com/@luismbcr/javascript-creación-de-objetos-fc728091eb32

Oscar Barajas Tavares

Team Platzi•

Muy claro y facíl de entender, muchas gracias por tu aporte.

Juan Diego Silva Garcia

student•

Muy precisos y bien explicados tus Post!

Franklin Lugo

student•

importante entender la diferencia entre un objeto literal y un json, son similares pero no son lo mismo https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation

Ivan Santiago

student•

Tambien puedes hacer arrays de objetos:

const array = [
	{nombre: 'objeto1', numero: 2},
	{nombre: 'objeto2', numero: 8},
	{nombre: 'objeto3', numero: 5}
]

Alexis Antonio Moraga Gallardo

student•

Hola, les comparto mi repositorio en GitHub con el avance del curso

Repositorio

Acá están los ejercicios realizados en clases, y mis notas personales

/*Objetos en javascript
En este ejemplo usaremos objetos para calcular la distancia entre dos puntos, estos puntos seran representados por objetos

*/

const p1 = {//creamos el objeto, para esto usamos las llaves
  x:0,//añadimos las propiedades del objeto y usamos : para añadir un valora esta propiedad
  y:4//separamos las propiedades de nuestro objeto usando una ,
}

const p2 = {
  x:3,
  y:0
}

//creamos una funcion para calcular la distancia entre los puntos
function distancia(p1,p2){
// para calcular la distancia entre dos puntos usamos una formula matematica (distancia = raiz cuadrada de x2 + y2)
  const x = p1.x - p2.x
  const y = p1.y - p2.y

  return Math.sqrt(x * x + y * y)
}


console.log(distancia(p1,p2))

/*Objetos
un objeto es una coleccion de propiedades con un nombre y valor, estas propiedades pueden ser tan simples como variables, o funciones,
Cuando un objeto tiene funciones como propiedades estas son conocidas como metodos del objeto.
 un ejemplo de objeto que hemos visto bastante es el objeto Math y hemos visto algunos de sus metodos como round(), floor(), random() etc..


Funciones usadas

sqrt() -> nos retorna la raiz cuadrada del numero que le pasamos como parametro
 */

Noe Mikhael Huaccharaque Ruiz

student•

🤓Aplicando Ley de Cosenos:

const p1 = {
	x: 0,
	y: 4
}
const p2 = {
	x: 3,
	y: 0   
}
function distancia (p1, p2){
    const x = p1.x - p2.x
	const y = p1.y - p2.y
    const cos = Math.abs(parseInt(Math.cos(90)))
    return  Math.sqrt(x*x+y*y-2*x*y*(cos))
}
console.log(distancia(p1, p2))

Carlos Madrigal Ramos

student•

Usando arrow function. Notese utilizo nombres distintos para los objetos y los parametros que recibe la función para diferenciarlos. para mi es mas claro así así…

const p1 = {
	x: 0,
	y: 4
}

const p2 = {
	x: 3,
	y: 0
}

const distancia = (punto1, punto2) => {
	const x = punto1.x - punto2.x
	const y = punto1.y - punto2.y

	//sqrt raiz cuadrada del objeto Math
	return Math.sqrt(x * x + y * y)
}

console.log(distancia(p1,p2))```

José Mauricio Chavarría González

student•

Esta es mi propuesta para calcular la distancia, este código te permite ingresar las coordenadas de los dos puntos para luego calcular la distancia entre ellos.

alert(`Calcula la distancia entre dos puntos`)
let p1 = {
  x : 0,
  y : 0
}
let p2 = {
  x : 0,
  y : 0
}

alert(`Digita las coordenadas del punto 1: `)
p1.x = prompt("Coordenada en el eje x:")
p1.y = prompt("Coordenada en el eje y:")
alert(`Digita las coordenadas del punto 2: `)
p2.x = prompt("Coordenada en el eje x:")
p2.y = prompt("Coordenada en el eje y:")

const distancia = (punto1, punto2) => {
  const x = p1.x - p2.x
  const y = p1.y - p2.y
  const d = Math.sqrt(Math.pow(x, 2)+Math.pow(y, 2)).toFixed(2)
  alert(`La distancia es de ${d} unidades.`)
}
distancia(p1, p2)

Vsqz Gabriel

student•

Practicando las clases :D

class Punto {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}
}

const p1 = new Punto(0, 4);
const p2 = new Punto(3, 0);

function distacia(p1, p2) {
	const distancia = Math.pow(p1.y, 2) + Math.pow(p2.x, 2);
	const resultado = Math.sqrt(distancia);
	return resultado;
}

console.log(distacia(p1, p2));```

Lilia Juliana Perez Lerma

student•

Porque se pone “:” (dos puntos), en lugar del =(igual)? cual es la diferencia?

Diego Forero

Team Platzi•

Cuando son diccionarios de datos o un array de llave valor si conoces PHP, la asignación interna de esas llaves valor se hacen con :

const p1 = {x:0, y:4}
console.log(p1['x']) // 0
console.log(p1['y']) // 4

Lilia Juliana Perez Lerma

student•

Muchas gracias ya quedo mas claro 😄

Daniel Sepulveda

student•

Para realizar exponentes de cualquier tipo Se puede usar la funcion Math.pow(variable, exponente)

const p1= {
	x: 0,
	y: 4
}

const p2 = {
	x: 3,
	y: 4
}

function distancia(p1, p2) {
	const x = p1.x - p2.x
	const y = p1.y - p2.y
	return Math.sqrt(Math.pow(x,2) + Math.pow(y,2))
}

console.log(distancia(p1,p2))
console.log(distancia(p1,{ x: 20, y: -7}))

Karina Gabriela Cerda Melchor

student•

Mi solución con algunos cambios 😃

const p1 = {
	x: 0,
	y: 4
}

const p2 = {
	x: 3,
	y: 0
}

function distancia(p1,p2){
	const x = p1.x - p2.x
	const y = p1.y - p2.y

	return Math.sqrt(Math.pow(x,2)+Math.pow(y,2))
	//return Math.sqrt(x*x+y*y)
}


console.log(distancia({x:8, y:15},{ x:20,y:-7}).toFixed(2))

Jose Ángel Garrido C.

student•

Me gustó tu código. Gracias

Yadurani Lopez Rivera

student•

Otra manera de hallar la potencia de un numero es con Math.pow(numero, potencia), aquí esta el c;odigo

const p1 = {
  x:0,
  y:4
}
const p2 = {
  x:3,
  y:0
}

function distancia(p1, p2) {
  const x = p1.x - p2.x
  const y = p1.y - p2.y

  return Math.sqrt(Math.pow(x,2)+Math.pow(y,2))
}

console.log(distancia(p1, p2))

Juan Jose Rojas Rojas

student•

Según Mozilla.org, un objeto es una colección de propiedades, y una propiedad es una asociación entre un nombre y un valor. Un valor de propiedad puede ser una función, la cual es conocida entonces como un método del objeto. Además de los objetos que están predefinidos en el navegador, tu puedes definir tus propios objetos.

Estructura de un objeto en Javascript:

var objeto = {
  propiedad_1  : valor_1,   // propiedad_# puede ser un identificador...
  2:             valor_2,   // o un numero...
  // ...,
  "propiedad n": valor_n }; // o una cadena

Los objetos en el mundo real: Un objecto es un entidad independiente con propiedades y tipos. Compárelo con una taza por ejemplo. Una taza es un objeto, con propiedades. Una copa tiene un color, un diseño, peso, un material del que fue hecho, etc. De la misma manera, los objetos de JavaScript pueden tener propiedades, que definen sus características.

Islas Juan Pablo Juan Pablo

student•

Documentación de Math:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
https://www.w3schools.com/js/js_math.asp

Enrique Rojas Reyes

student•

un poco de matematica con JavaScript jajajajaj que chido

Omar Crespo

student•

Resumen de la clase

const arrow_Distancia = (p1, p2) => Math.sqrt(((p1.x - p2.x) ** 2) + ((p1.y - p2.y) ** 2))

😄

Omar Crespo

student•

PD: Hacer esto es bueno con fines didacticos. Yo no recomendaria tener un codigo asi, es mejor un code bonito y claro en 6 lineas que un resumen engorroso en una.

Francisco Javier Rodriguez Gomez

student•

Es cuestión de gustos y estilo también. Para mí esa expresión es muy clara, quizá más que 6 lineas que digan lo mismo. Pero es porque a mí y otros desarrolladores nos agrada menos verbosidad.

Mucha del azúcar sintactica tiene que ver con abreviar las expresiones. Citando a la Wikipedia:

“In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language “sweeter” for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.”

Ejm: La ventaja o mejora de Kotlin con respecto a Java es precisamente que es más sintactico que Java.

Creo que ambos estilos son respetables.

Calcular la distancia entre dos puntos - Objetos en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial