Semana 4 Javascript funciones y Metodos

1. FUNCIONES
Y METODOS
Mg. Richard E. Mendoza G.

4. 4
• var definimos una variable con local
scope, también nos permite utilizar un
comportamiento llamado hoisting, sin
generar ningún error.
• let definimos variable con block scope,
las variables declaradas de esta manera
nos genera un error de referencia cuando
intentamos utilizar hoisting.
• const definimos variables de sólo lectura
(no confundir con inmutables), esto
quiere decir que, cuando asignamos una
variable, el nombre de esta va estar
asignada a un puntero en memoria, el
cual no puede ser sobreescrito o
reasignado.
var, let y const
// ES5
var nombre5 = 'Karol Portilla';
var edad5 = 28;
nombre5 = 'Karol Mendoza';
// ES6
const nombre6 = 'Karol Portilla'; // const, su valor no
puede mutar o ser cambiado.
let edad6 = 28; // let puede mutar o ser cambiado
nombre6 = 'Karol Mendoza'// No se puede cambiar
nombre6 si es const, obtenemos un error.

5. 5
• Las funciones son uno de los bloques de
construcción fundamentales en
JavaScript. Una función en JavaScript es
similar a un procedimiento — un conjunto
de instrucciones que realiza una tarea o
calcula un valor, pero para que un
procedimiento califique como función,
debe tomar alguna entrada y devolver
una salida donde hay alguna relación
obvia entre la entrada y la salida. Para
usar una función, debes definirla en algún
lugar del ámbito desde el que deseas
llamarla.
FUNCIONES JS
console.group("Cuadrados");
function perimetroCuadrado(lado) {
return lado * 4;}
function areaCuadrado(lado) {
return lado * lado;}
console.groupEnd();
console.group("Triángulos");
function perimetroTriangulo(lado1, lado2, base) {
return lado1 + lado2 + base;}
function areaTriangulo(base, altura) {return (base *
altura) / 2;}
console.log("El área del triángulo es: " + areaTriangulo
+ "cmˆ2");
console.groupEnd();

6. 6
• Hay varias formas de crear funciones en
Javascript: por declaración (la más usada
por principiantes), por expresión (la más
habitual en programadores con
experiencia) o mediante constructor de
objeto (no recomendada):
CREACION DE FUNCIONES JS
Constructor Descripción
function nombre(p1, p2...) { }
Crea una función
mediante declaración.
var nombre = function(p1,
p2...) { }
Crea una función
mediante expresión.
new Function(p1, p2..., code);
Crea una función mediante un
constructor de objeto.
function saludar() {
return "Hola";
}
saludar(); // 'Hola'
typeof saludar; // 'function'
// El segundo "saludar" (nombre de la fun
ción) se suele omitir: es redundante
const saludo = function saludar() {
return "Hola";
};
saludo(); // 'Hola'
const saludar = new Function("return 'Hol
a';");
saludar(); // 'Hola'

7. console.group("Cuadrados")
const ladoCuadrado = 5;
console.log("Los lados del cuadrado miden: " + ladoCuadrado + " cms");
const perimetroCuadrado = ladoCuadrado * 4;
console.log("El perimetro del cuadrado mide: " + perimetroCuadrado + " cms");
//Area del cuadrado
const areaCuadrado = ladoCuadrado * ladoCuadrado;
console.log("El área del cuadrado mide: " + areaCuadrado + " cms^2");
console.groupEnd();
console.group("Triangulo");
const ladoTriangulo1 = 6;
const ladoTriangulo2 = 6;
const baseTriangulo = 4;
const alturaTriangulo =5;
console.log("Los lados del triángulo miden: " + ladoTriangulo1 + " cms, " +
ladoTriangulo2 + " cms, " + baseTriangulo + "cms.");
console.log("La altura del triangulo mide: " + alturaTriangulo + " cms");
const perimetroTriangulo = ladoTriangulo1 + ladoTriangulo2 + baseTriangulo;
console.log("El perimetro del triangulo mide: " + perimetroTriangulo + " cms");
const areaTriangulo = (baseTriangulo * alturaTriangulo)/2;
console.log("El área del triangulo mide: " + areaTriangulo + " cms^2");
console.groupEnd();
//Código del Circulos
console.group("Circulos");
//Radio
const radioCirculo = 4;
console.log("El radio del circulo es " + radioCirculo + " cms.");
//Diametro
const diametroCirculo = radioCirculo * 2;
console.log("El diametro del circulo es " + diametroCirculo + " cms.");
// PI
const PI = Math.PI;
console.log("PI es " + PI + ".");
// Perimetro
const perimetroCirculo = diametroCirculo * PI;
console.log("El perimetro del circulo es " + perimetroCirculo + " cms.");
//Area
const areaCirculo = PI * (radioCirculo**2);
console.log("El area del circulo es " + areaCirculo + " cms.");
console.groupEnd();

8. <!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">
<title>Figuras geométricas | Curso Práctico de JavaScript en Platzi</title>
</head>
<body>
<header>
<h1>Figuras geométricas</h1>
<p>Este es el primer taller del curso práctico de JavaScript</p></header>
<section>
<h2>Calcula el área y perímetro de un cuadrado</h2>
<form><label for="InputCuadrado">
Escribe cuánto mide cada lado de tu cuadrado:</label>
<input id="InputCuadrado" type="number" />
<button type="button" onclick="calcularPerimetroCuadrado()">
Calcular el perímetro</button>
<button type="button" onclick="calcularAreaCuadrado()">
Calcular el área</button></form></section>
<script src="./figuras.js"></script></body></html>
console.group("Cuadrados");
function perimetroCuadrado(lado) {
return lado * 4;}
function areaCuadrado(lado) {
return lado * lado;}
console.groupEnd();
console.group("Triángulos");
function perimetroTriangulo(lado1, lado2, base) {
return lado1 + lado2 + base;}
function areaTriangulo(base, altura) {
return (base * altura) / 2;}
console.log("El área del triángulo es: " + areaTriangulo + "cmˆ2");
console.groupEnd();
console.group("Círculos");
function diametroCirculo(radio) {
return radio * 2;}
const PI = Math.PI;
console.log("PI es: " + PI);
function perimetroCirculo(radio) {
const diametro = diametroCirculo(radio);
return diametro * PI;}
function areaCirculo(radio) {
return (radio * radio) * PI;}
console.groupEnd();
function calcularPerimetroCuadrado() {
const input = document.getElementById("InputCuadrado");
const value = input.value;
const perimetro = perimetroCuadrado(value);
alert(perimetro);}
function calcularAreaCuadrado() {
const input = document.getElementById("InputCuadrado");
const value = input.value;
const area = areaCuadrado(value);
alert(area);}

9. 9
• En cuanto a métodos numéricos te
Number(), parseInt() y parseFloat().
• Number() puede ser usado para convertir
las variables JavaScript a los números:
• parseInt() transforma un string en
número entero. En caso de ser un texto
como por ejemplo 5Kg nos devolvería el
número 5.
• parseFloat() hace lo mismo que parseInt
pero en este caso con un número
decimal.
METODOS NUMERICOS
x = true;
Number(x); // returns 1
x = false;
Number(x); // returns 0
x = new Date();
Number(x); // returns 1404568027739
x = "10"
Number(x); // returns 10
x = "10 20"
Number(x); // returns NaN
parseInt("10"); // returns 10
parseInt("10.33"); // returns 10
parseInt("10 20 30"); // returns 10
parseInt("10 years"); // returns 10
parseInt("years 10"); // returns NaN
parseFloat("10"); // returns 10
parseFloat("10.33"); // returns 10.33
parseFloat("10 20 30"); // returns 10
parseFloat("10 years"); // returns 10
parseFloat("years 10"); // returns NaN

10. 10
• indexOf() devuelve el primer elemento
de un string que sea igual al valor
indicado dentro del paréntesis. En caso
de no encontrarlo devuelve -1.
• lastIndexOf() hace lo mismo que
indexOf() pero empezando por el final de
un string
• split() crea una lista de elementos a partir
de un string separando los elementos por
el carácter indicado dentro del
paréntesis.
• Slice(x, y) devuelve los y caracteres a
partir de la posición x. Tener en cuenta
que se empieza a contar que el primer
carácter siempre ocupa la posición 0
METODOS STRINGS
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
var txt = "Hello"; // String
txt.split(""); // Split in characters
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13);

11. 11
• length es el más importante de todos.
Devuelve el número de elementos de una
lista.
• join() junta todos los elementos de una
lista separados por el carácter que
indiquemos dentro del paréntesis
• pop() elimina el último elemento de una
lista y hace que la lista quede disminuida
en una posición su longitud.
• sort() ordena alfabéticamente o
numéricamente los elementos de una
lista.
• slice() tiene el mismo funcionamiento que
el slice() de los strings pero aplicado a
listas.
METODOS ARRAY
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";
var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML =
fruits.join(" * ");
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();

12. <!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">
<title>Porcentajes y descuentos | Curso Práctico de JavaScript en Platzi</title></head>
<body>
<header><h1>Porcentajes y descuentos </h1>
<p>Este es el segundo taller del Curso Práctico de JavaScript.</p></header>
<section>
<h2>Calcula el precio a pagar de tus productoss con descuento</h2>
<form>
<label for="InputPrice">Escribe el precio de tu producto:</label>
<input id="InputPrice" type="number" />
<label for="InputDiscount">Escribe el descuento de tu producto:</label>
<input id="InputDiscount" type="number" />
<button type="button" onclick="onClickButtonPriceDiscount()">
Calcular el precio con descuento</button>
<p id="ResultP"></p></form></section>
<script src="./descuentos.js"></script></body></html>
// const precioOriginal = 120;
// const descuento = 18;
function calcularPrecioConDescuento(precio, descuento) {
const porcentajePrecioConDescuento = 100 - descuento;
const precioConDescuento = (precio * porcentajePrecioConDescuento) / 100;
return precioConDescuento;
}
function onClickButtonPriceDiscount() {
const inputPrice = document.getElementById("InputPrice");
const priceValue = inputPrice.value;
const inputDiscount = document.getElementById("InputDiscount");
const discountValue = inputDiscount.value;
const precioConDescuento = calcularPrecioConDescuento(priceValue, discountValue);
const resultP = document.getElementById("ResultP");
resultP.innerText = "El precio con descuento son: $" + precioConDescuento;
}
// console.log({
// precioOriginal,
// descuento,
// porcentajePrecioConDescuento,
// precioConDescuento,
// });

13. https://www.w3bai.com/es/js/default.html

14. https://jsconsole.com