Variables y funciones

Clase 10 de 50 • Curso de Programación Básica 2014

Contenido del curso

Bienvenido

Introducción básica a HTML y Javascript para programar

Variables, Matrices y Objetos en Javascript

Ciclos y Dibujos con Canvas

Programando juegos con canvas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Cómo crear un algoritmo para el juego del ahorcado

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

34
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1
32:25 min
35
Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2
56:14 min

Conceptos básicos de programación: Frontend-Backend

Crea tu primer servidor web con Node.JS

Aprende a volar un dron con Javascript

Complementos del curso

50
Publica tu sitio web usando GitHub Pages
01:41 min

Tomar examen

Comentarios

Jesus Mondragon

student•

Si desean que su peso en Marte se muestre sin decimales agreguen:

pesoEnMarte = Math.round((peso / 9.81) * 3.711);

Sebastian Lujan

student•

Si desean 2 decimales después de la coma, pueden usar round multiplicando y dividiendo entre 100. y mas elegante con el toFixed(nro de decimales)

pesoEnMarte = Math.round((peso / 9.81) * 3.711 *100)/100;  
pesoEnMarte2 = ((peso / 9.81) * 3.711)).toFixed(2);

Schmulg Gonzalez

student•

un practico ejemplo del uso de prompt y parseInt

Manuel Ferriz

student•

var peso;  
var altura;  
var imc;  
  
peso = prompt("Proporcionar tu peso", "70");  
altura = prompt("Proporciona tu altura", "1.50");  
peso = Number(peso);  
altura = Number(altura);  
  
altura = altura * altura;  
  
imc = peso / altura;  
  
alert("tu IMC es: " + imc);

Imagina una pagina donde te ayuden a calcular tu Indice de Masa Muscular, para ello ocuparias tu peso, tu altura y la formula es peso / altura al cuadrado

Roel Magdaleno

student•

Hola, son totalmente diferentes ya que la función "alert()" te manda una alerta al navegador y hasta ahí; sin embargo, la función "confirm()" te lanza una alerta pero con dos opciones "Aceptar o Cancelar". Tu podrías ejecutar una acción en específica cuando des clic en Aceptar y otra acción a parte al dar clic en Cancelar. Un ejemplo:

if(confirm("¿Deseas salir del sistema?)){  
     console.log("Has salido correctamente");  
} else {  
     console.log("Has dado clic en   
}

Cristian

student•

Hay un punto interesante. Observo que para en el ejercicio de conversión de peso, no es necesario definir las variables. No sé si no definirlas sea buena practica de programación. También aporto como redondear el valor que da con todos los decimales a sólo 2 decimales:

alert("Quieres saber tu peso en marte: ");
peso = prompt("Digita tu peso en Kg: ", "80");
peso = parseInt(peso);

pesoEnMarte = (peso / 9.81) * 3.711;
Redondeo = (pesoEnMarte).toFixed(2);

alert("Peso en Marte: " + Redondeo + "Kg.");

Santiago Avellaneda

student•

Si es buena práctica aunque pensaría depende del objetivo del proyecto a desarrollar, igual es un curso básico, sin embargo está muy bueno el aporte

Rabi Leonel Leon Chan

student•

Muy interesante redondear el resultado! . Buen Punto !

Brian

student•

Aqui esta en html :P

<html>  
<head>  
<meta charset="utf-8">  
<title> Conoce tus calificaciones en menos de 2 minutos </title>  
<script type="text/javascript">  
var mate;  
var geo;  
var ingles;  
var promedio;  
  
  
  
  
  
alert("¿Quieres saber tu promedio de calificaciones?")  
mate = prompt("¿Que calificacion sacaste en Matematicas?")  
mate = parseInt(mate)  
geo = prompt("¿Que calificacion sacaste en Geografia?")  
geo = parseInt(geo)  
ingles= prompt("¿Que calificacion sacaste en Ingles?")  
ingles= parseInt(ingles)  
promedio=(mate+geo+ingles)/3  
alert("Tu promedio es de"+" "+promedio)  
</script>  
</head>  
<body>   
<h1>¡Esfuerzate mas!</h1>  
  
</body>  
  
  
 </html>

Axel de la Torre

student•

Miren, puede servir para México :)

var precio;  
var iva;  
var preciopMasIVA;  
  
alert ("Calcula el IVA de un producto o servicio");  
precio = prompt("Ingresa precio", "60");  
precio = parseInt(precio);  
  
iva = (precio*.16);  
  
preciopMasIVA = (precio + iva) ;  
  
alert( "El IVA a pagar de " + precio + " es " + iva );  
alert( "El precio con IVA incluido es de: " + preciopMasIVA);

José Bautista Rodríguez

student•

Yo me divertí haciendo lo siguiente:

edad = prompt("¿Cuál es tu edad?\n:)");  
alert("Recuerda ser honesto");  
edadverdadera = prompt( "¿Realmente tienes esa edad?\nEscribe la verdadera" );  
edadverdadera = parseInt(edadverdadera);  
alert("No me engañas, se que tienes " + [edadverdadera + 5] +" años.");

Joe

student•

¡Muy buena esa!

Luis León

student•

Menos un punto

Elizabeth

student•

Sintaxis...
var significa variable
cada vez que una línea lo necesite le ponemos al final ;
Ejemplo:

var nombre = "Eli";
ya tenemos la instrucción, que es la variable (var)
y tenemos el nombre de la variable (nombre)
y tenemos el valor de la variable (Eli)

* No olvidemos siempre ir guardando a cada paso que demos con nuestro código

El espacio entre comillas "es un contenido" , " " y es un byte
Ejemplo: alert(nombre + " " + apellido); sale freddy vega con separación
Ejemplo: alert(nombre + " " + apellido + " " + edad + "años.");
nos saldrá de esto... Fredy Vega 28años.

Para el salto de línea en JS es necesario poner la diagonal \n
Ejemplo: alert(nombre + " " + apellido + "\n" + edad + "años.");
nos saldrá ... Freddy Vega
28años.

porque hicimos un salto de línea entre el nombre y la edad

para dar un salto de línea en html le pondremos <br>

* html es un código de documentos
* Js es un código de programación

El navegador siempre sin excepción le dará prioridad o preferencia a las cadenas de texto sobre los números

en.Js

alert(5 + 8 + "2"); nos da 132 porque 5 + 8 =13 y 2 (secuencia)
alert("2" + 5 + 8); nos da 258 porque nos da un string
alert("2" + 5 * 8); nos da 240

Promp es lo que el usuario pone en la cajita
y siempre va a insertar un dato de tipo texto

ponemos , (coma) ydamos enter para que nos ponga en el siguiente renglón
Ejemplo:
peso = prompt("¿Cuál es tu peso en Kg?",
"100");

hay funciones con más de un parámetro

* parseInt... convierte cualquier número que tenga un texto por dentro en un número total

*Concatenar es unir dos textos

*CamelCase inicia con minúsculasy la siguiente en mayúsculas
Ejemplo: pesoEnMarte

Giancarlo Vera

student•

Hola a todos! les dejo otro ejemplo sencillo realizado con lo que se aprendió en esta clase, espero les sirva. Nótese que el parseInt y el prompt lo usé en la misma línea de código, ya que en proyectos grandes cada línea de código que puedas 'ahorrar' se traduce en menos peso de tu js, y eso es valioso para la performance de tu website.

var nombre = prompt('¿Cuál es tu nombre?');  
  
alert('Ok ' + nombre + ', hagamos unos sencillos ejercicios')  
  
var nro1 = parseInt(prompt('Ingresa un número mayor que 10'));  
var nro2 = parseInt(prompt('Ahora ingresa un número menor que 10'));  
  
var suma = nro1 + nro2;  
var resta = nro1 - nro2;  
var multiplica = nro1 * nro2;  
var divide = nro1 / nro2;  
  
alert('la suma de ' + nro1 + ' y ' + nro2 + ' es: ' + suma + '\n'   
    + 'la resta de ' + nro1 + ' y ' + nro2 + ' es: ' + resta + '\n'   
    + 'la multiplicación de ' + nro1 + ' y ' + nro2 + ' es: ' + multiplica + '\n'   
    + 'la división de ' + nro1 + ' y ' + nro2 + ' es: ' + divide);  
  
alert('Gracias por participar ' + nombre);

Brian

student•

Hice una especie de calculadora para sacar calificaciones :D

var mate;  
var geo;  
var ingles;  
var promedio;  
  
  
  
  
  
alert("¿Quieres saber tu promedio de calificaciones?")  
mate = prompt("¿Que calificacion sacaste en Matematicas?")  
mate = parseInt(mate)  
geo = prompt("¿Que calificacion sacaste en Geografia?")  
geo = parseInt(geo)  
ingles= prompt("¿Que calificacion sacaste en Ingles?")  
ingles= parseInt(ingles)  
promedio=(mate+geo+ingles)/3  
alert("Tu promedio es de"+" "+promedio)

Beatriz

student•

Hello world
Soy Licenciada en Enfermería (carrera de 5 años) que espera algún día lograr ser programadora y una excelente product designer! Acabo de iniciar este curso y duermo hasta las 5am practicando y repasando todo lo que se ve en los mismos.
_________________________________

alert  ("solo quería presentarme");

Iván Bello Sanchéz

student•

Que maravilla en el sector salud se necesita muchisimo de estas nuevas tecnologias para mejorar la atencion y la calidad de vida de los usuarios en toda america latina, de mi parte te felicito, y te deseo llegues lo más lejos que puedas.

Daniel Romero

student•

Si quieren limitar decimales en javascript solo añadanle a la variable pesoEnMarte esto:

alert("Tu peso en Marte es: " + parseInt(pesoEnMarte.toFixed(Número de decimales que quieres visualizar)) + " Kg");

Ignacio

student•

De esta forma, un peso de 25.3453245246456 Kg, me quedaria en 25 kg. (al menos eso es el resultado que me dio a mi). Como logro que el resultado sea 25.34 Kg. ?

Lo intente con un valor de 2 en (numero de decimales que quiero visualizar) y con 4. Ambos me dieron 25Kg.

Alguna idea?

Gracias por tu aporte.

Andres Salazar

student•

Pos me dio curiosidad lo de Nan, y "tirando código" encontré esto: alert ("Mi peso es" + (peso - 10)) y resultó en que al "parentesear la ecuación, funcionó. ¿alguien me puede decir algo o sabe pórque?

CRISTIAN BARBERO PÉREZ

student•

Hola, es porque al poner el paréntesis primero se calcula la resta entre dos valores numéricos y después se concatena el resultado con el texto anterior.

Es decir, si peso = 80 hace primero: 80 - 10 = 70 y después "Mi peso es " + 70 = "Mi peso es 70".

Sin los paréntesis hace primero "Mi peso es " + 80 = "Mi peso es 80" y después "Mi peso es 80" - 10 = NaN

En JS el símbolo + sirve para sumar números pero también para concatenar texto. Y es posible concatenar un texto con un número gracias a que JS interpreta que el número como un texto. Sin embargo el - solo sirve como operación matemática entre números, por lo que al restar un texto y un número te dará NaN

Andres Salazar

student•

Mjchas gracias por tu explicación! :D

Camilo Ruiz

student•

Porque al alert no me muestra el signo "¿" ni las tildes?

peso = prompt("¿Cuál es tu peso en Kg?", "70");

Juan Camilogomezrave Gomez Rave

student•

quizas no pusiste al inicio de codigo el formato utf-8

Alex Xavier Yépez Chávez

student•

Se trata de caracteres especiales, como el salto de línea, es importante que el archivo este guardado con la codificación utf-8, me refiero al archivo js

Gian Marco Garis

student•

Hola, ahi cree una variable mas que guarda el resultado del peso ideal. Esto lo hice para que pueda salir la frase "Tu peso ideal"
var peso;
var pesoideal;

peso = prompt("Cual es tu peso en Kg?", "70");
peso = parseInt(peso);

pesoideal = peso - 10;

alert("Tu peso ideal: " + pesoideal);

Carlos Alvarez

student•

En mi sublime text 3 no se resaltan las funciones como alert y prompt en color azul. De hecho veo que varias personas que han pegado código en los comentarios le pasa lo mismo y al profesor Freddie si se le resalta. Alguien podría decirme si hay que activar alguna configuración? Me parece una opción muy útil para identificar facilmente las partes del código

Juan José Horta de la Cruz Horta

student•

A mi me pasa cuando no tengo el archivo guardado con la extension .js

Juan José Horta de la Cruz Horta

student•

A mi me pasa cuando no tengo guardado el archivo con la extension apropiada (.js)

Joel Eliseo Fernández Segura

student•

Alguien me ayuda porque rayos me sale "Undefined" investigue pero no le veo la falla, sera que olvide algo?
HTML

<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Mi primer proyecto con platzi</title>  
    <script type="text/javascript" src="codigo.js"></script>  
</head>  
<body>  
<p>Ingresa la cantidad de pasos que das en 1 minuto:</p>  
<form>  
<input type="number" id="pasos">  
<input type="button" id="enviar" name="Resolver" value="Resolver" onclick="resolver()">  
</form>  
</body>  
</html>

JAVASCRIPT

var pasos;  
var distanciapasosunmin;  
var meta = 2000;  
var tiempollegada;  
  
pasos = document.getElementById("pasos").value ;  
pasos = parseInt(pasos);  
distanciapasosunmin = pasos * 0.95;  
  
function resolver(){  
tiempollegada = meta/distanciapasosunmin;  
  
alert("El tiempo que necesitas para llegar a la meta es: "+ distanciapasosunmin+" minutos.");  
}

Jhon Carlos Colorado Angulo

student•

Buenas compañero.

El error esta a simple vista. en el onclick="resolver()" llamas a la function resolver de javascript por lo tanto lo único que se ejecuta es lo que está dentro de dicha función.

Para que logre hacer lo que tu quieres debe de quedar todo dentro de esta función de la siguiente manera:

function resolver(){

var pasos;
var distanciapasosunmin;
var meta = 2000;
var tiempollegada;

pasos = document.getElementById("pasos").value ;
pasos = parseInt(pasos);
distanciapasosunmin = pasos * 0.95;

tiempollegada = meta/distanciapasosunmin;

alert("El tiempo que necesitas para llegar a la meta es: "+ tiempollegada+" minutos.");
}

Y Listo. Espero que se te sirva.

Yrvin Escorihuela

student•

Interesante es por ejemplo, el asunto del PEMDAS, ¿En qué consiste?:

P = Parenthesis
E = Exponent
M = Multiplication
D = Division
A = Addition
S = Substraction

Y es la precedencia de operaciones matemáticas en la programación, por lo general muchos compiladores e interpretes siguen este principio. Así que no se lo pierdan!

Alessandro Degiusti

student•

Muy buen aporte!

Francisco MONSALVE URIBE

student•

/*  
comentario  
comentario  
*/

Otra forma de cometariar en js

Arturo Téllez Ramírez

student•

Esta forma sirve para comentar en bloque y la "//" sirve para comentar solo una línea.

Joaquín Jairo Ochoa Canela

student•

// = JavaScript.
/* */ = Java.

Ricardo Arratia Joglar

student•

faltó mostrar que comentarios se múltiples línedas en javascript es /* */ ejemplo:

/* este es un
comentarios de
múltiples líneas*/

Laura Rios

student•

Hola tengo el codigo bien y estoy utilizando Sublime pero no me aparece el alert despues de que abri el documento js

Fabian Eduardo Guzman Linares

student•

no se debe dejar pegado el alert a la linea de codigo, dale unos cuantos espacios y funcionara

var nombre = "afdsadf";  
var apellido = "gdsghg";  
var edad = 87364;  
         
      alert(nombre + " " + apellido + " \n" + edad + "años.");

var peso;  
var altura;  
var imc;  
  
peso = prompt("Proporcionar tu peso", "70");  
altura = prompt("Proporciona tu altura", "1.50");  
peso = Number(peso);  
altura = Number(altura);  
  
altura = altura * altura;  
  
imc = peso / altura;  
  
alert("tu IMC es: " + imc);

<html>  
<head>  
<meta charset="utf-8">  
<title> Conoce tus calificaciones en menos de 2 minutos </title>  
<script type="text/javascript">  
var mate;  
var geo;  
var ingles;  
var promedio;  
  
  
  
  
  
alert("¿Quieres saber tu promedio de calificaciones?")  
mate = prompt("¿Que calificacion sacaste en Matematicas?")  
mate = parseInt(mate)  
geo = prompt("¿Que calificacion sacaste en Geografia?")  
geo = parseInt(geo)  
ingles= prompt("¿Que calificacion sacaste en Ingles?")  
ingles= parseInt(ingles)  
promedio=(mate+geo+ingles)/3  
alert("Tu promedio es de"+" "+promedio)  
</script>  
</head>  
<body>   
<h1>¡Esfuerzate mas!</h1>  
  
</body>  
  
  
 </html>

var precio;  
var iva;  
var preciopMasIVA;  
  
alert ("Calcula el IVA de un producto o servicio");  
precio = prompt("Ingresa precio", "60");  
precio = parseInt(precio);  
  
iva = (precio*.16);  
  
preciopMasIVA = (precio + iva) ;  
  
alert( "El IVA a pagar de " + precio + " es " + iva );  
alert( "El precio con IVA incluido es de: " + preciopMasIVA);

edad = prompt("¿Cuál es tu edad?\n:)");  
alert("Recuerda ser honesto");  
edadverdadera = prompt( "¿Realmente tienes esa edad?\nEscribe la verdadera" );  
edadverdadera = parseInt(edadverdadera);  
alert("No me engañas, se que tienes " + [edadverdadera + 5] +" años.");

var nombre = prompt('¿Cuál es tu nombre?');  
  
alert('Ok ' + nombre + ', hagamos unos sencillos ejercicios')  
  
var nro1 = parseInt(prompt('Ingresa un número mayor que 10'));  
var nro2 = parseInt(prompt('Ahora ingresa un número menor que 10'));  
  
var suma = nro1 + nro2;  
var resta = nro1 - nro2;  
var multiplica = nro1 * nro2;  
var divide = nro1 / nro2;  
  
alert('la suma de ' + nro1 + ' y ' + nro2 + ' es: ' + suma + '\n'   
    + 'la resta de ' + nro1 + ' y ' + nro2 + ' es: ' + resta + '\n'   
    + 'la multiplicación de ' + nro1 + ' y ' + nro2 + ' es: ' + multiplica + '\n'   
    + 'la división de ' + nro1 + ' y ' + nro2 + ' es: ' + divide);  
  
alert('Gracias por participar ' + nombre);

var mate;  
var geo;  
var ingles;  
var promedio;  
  
  
  
  
  
alert("¿Quieres saber tu promedio de calificaciones?")  
mate = prompt("¿Que calificacion sacaste en Matematicas?")  
mate = parseInt(mate)  
geo = prompt("¿Que calificacion sacaste en Geografia?")  
geo = parseInt(geo)  
ingles= prompt("¿Que calificacion sacaste en Ingles?")  
ingles= parseInt(ingles)  
promedio=(mate+geo+ingles)/3  
alert("Tu promedio es de"+" "+promedio)

<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Mi primer proyecto con platzi</title>  
    <script type="text/javascript" src="codigo.js"></script>  
</head>  
<body>  
<p>Ingresa la cantidad de pasos que das en 1 minuto:</p>  
<form>  
<input type="number" id="pasos">  
<input type="button" id="enviar" name="Resolver" value="Resolver" onclick="resolver()">  
</form>  
</body>  
</html>

var pasos;  
var distanciapasosunmin;  
var meta = 2000;  
var tiempollegada;  
  
pasos = document.getElementById("pasos").value ;  
pasos = parseInt(pasos);  
distanciapasosunmin = pasos * 0.95;  
  
function resolver(){  
tiempollegada = meta/distanciapasosunmin;  
  
alert("El tiempo que necesitas para llegar a la meta es: "+ distanciapasosunmin+" minutos.");  
}

Variables y funciones

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript