HTML y JavaScript Factorial
Objetivo Crear un proyecto con html y javascript el cual permita realizar el calculo de factorial de manera recursiva y no recursiva
Estructura Final:
1.- Crear en netbeans proyecto HTML5/Javascript.
2.- Seleccionamos alguna plantilla si queremos.
3.- Creamos el diseño de la página principal index.html.
<!DOCTYPE html>
<html>
<head>
<title>
Fibonacci Ejemplo
</title>
<meta charset="UTF-8">
<script src="source/function.js"></script>
<link rel="stylesheet" href="source/style.css">
</head>
<body>
<h1>Fibonacci Ejemplo</h1>
<div>
<label>Proporciona un número y da enter: </label>
<br>
<input type="text" onchange="ejecutar(this);"/>
<button onclick="recursivo();">Recursivo</button>
<button onclick="noRecursivo();">No Recursivo</button>
<div id="resultadotitle" class="resultado">
</div>
<div id="resultado" class="resultado">
</div>
</div>
</body>
</html>
4.- Agregamos la referencia del archivo de funciones js
/*
* 5! = 1*2*3*4*5;
* 0! = 1
* 1! = 1
*/
var numero = 0;
var salida;
var salidatitle;
function ejecutar(elemento){
numero = elemento.value;
salida = document.getElementById("resultado");
salidatitle = document.getElementById("resultadotitle");
salida.innerHTML = "";
/*Limitamos el rango para no saturar la memoria*/
if(numero >= 0 && numero <=100){
//var r = factorial(numero);
salidatitle.innerHTML = "Se calculará factorial de "+numero+"<br>";
}else{
salidatitle.innerHTML="Ha ocurrido un error debe seleccionar un valor entre 0 y 100<br>";
}
}
function recursiveFunction(n){
/* Llegamos al final retornamos 1*/
if(n == 0 || n == 1){
return 1;
/*Hacemos la llamada recursiva*/
}else{
return n * recursiveFunction( n - 1);
}
}
function noRecursivo(){
var r = 1;
if(numero >= 0 && numero <=100){
if(numero == 0 || numero == 1){
salida.innerHTML = "El resultado usando No recursividad es: 1";
}else{
for (var i = 1; i <= numero; i++) {
r = r * i;
}
salida.innerHTML = "El resultado usando No recursividad es: "+r;
}
}
}
function recursivo(){
if(numero >= 0 && numero <=100){
var r = recursiveFunction(numero);
salida.innerHTML = "El resultado usando recursividad es: "+r;
}
}
5.- Agregamos el archivo de estilos .css
h1{
text-align: center;
}
div {
border: gray 1px solid;
margin: 20px;
align-items: center;
}
.resultado {
margin: 20px;
align-items: center;
border: none;
color: blue;
}
6.- Finalmente ejecutamos el proyecto
codigo fuente
Hemos agregado un proyecto usando un archivo de javascript, archivo de estilos y definicion de los mismos en el index.html
script definicion
link definicion
<script src="source/function.js"></script>
<link rel="stylesheet" href="source/style.css">
Estructura Final:
1.- Crear en netbeans proyecto HTML5/Javascript.
2.- Seleccionamos alguna plantilla si queremos.
3.- Creamos el diseño de la página principal index.html.
<!DOCTYPE html>
<html>
<head>
<title>
Fibonacci Ejemplo
</title>
<meta charset="UTF-8">
<script src="source/function.js"></script>
<link rel="stylesheet" href="source/style.css">
</head>
<body>
<h1>Fibonacci Ejemplo</h1>
<div>
<label>Proporciona un número y da enter: </label>
<br>
<input type="text" onchange="ejecutar(this);"/>
<button onclick="recursivo();">Recursivo</button>
<button onclick="noRecursivo();">No Recursivo</button>
<div id="resultadotitle" class="resultado">
</div>
<div id="resultado" class="resultado">
</div>
</div>
</body>
</html>
4.- Agregamos la referencia del archivo de funciones js
/*
* 5! = 1*2*3*4*5;
* 0! = 1
* 1! = 1
*/
var numero = 0;
var salida;
var salidatitle;
function ejecutar(elemento){
numero = elemento.value;
salida = document.getElementById("resultado");
salidatitle = document.getElementById("resultadotitle");
salida.innerHTML = "";
/*Limitamos el rango para no saturar la memoria*/
if(numero >= 0 && numero <=100){
//var r = factorial(numero);
salidatitle.innerHTML = "Se calculará factorial de "+numero+"<br>";
}else{
salidatitle.innerHTML="Ha ocurrido un error debe seleccionar un valor entre 0 y 100<br>";
}
}
function recursiveFunction(n){
/* Llegamos al final retornamos 1*/
if(n == 0 || n == 1){
return 1;
/*Hacemos la llamada recursiva*/
}else{
return n * recursiveFunction( n - 1);
}
}
function noRecursivo(){
var r = 1;
if(numero >= 0 && numero <=100){
if(numero == 0 || numero == 1){
salida.innerHTML = "El resultado usando No recursividad es: 1";
}else{
for (var i = 1; i <= numero; i++) {
r = r * i;
}
salida.innerHTML = "El resultado usando No recursividad es: "+r;
}
}
}
function recursivo(){
if(numero >= 0 && numero <=100){
var r = recursiveFunction(numero);
salida.innerHTML = "El resultado usando recursividad es: "+r;
}
}
5.- Agregamos el archivo de estilos .css
h1{
text-align: center;
}
div {
border: gray 1px solid;
margin: 20px;
align-items: center;
}
.resultado {
margin: 20px;
align-items: center;
border: none;
color: blue;
}
6.- Finalmente ejecutamos el proyecto
codigo fuente
Hemos agregado un proyecto usando un archivo de javascript, archivo de estilos y definicion de los mismos en el index.html
script definicion
link definicion
<script src="source/function.js"></script>
<link rel="stylesheet" href="source/style.css">
Entradas
No hay comentarios.