Menú

Mostrar Mensajes

Esta sección te permite ver todos los mensajes escritos por este usuario. Ten en cuenta que sólo puedes ver los mensajes escritos en zonas a las que tienes acceso en este momento.

Mostrar Mensajes Menú

Mensajes - Alex

#861
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:47:50 PM
5º) Repite el "Eval1H.htm" (cálculo de un determinante de 2º orden), pero "visualmente".
Grábalo con el nombre Eval4E.htm
#862
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:47:16 PM
4º) Repite el "Eval1F.htm" (área y longitud de una circunferencia), pero "visualmente" de la
siguiente forma:

- Un cuadro de texto para "recoger" el radio.
- Dos botones para calcular la longitud y el área
- Dos cuadros de texto para escribir la longitud y el área
- Un b´tón para "volver a empezar".
- El programa debe incluir títulos, colores, etc.
Grábalo con el nombre Eval4D.htm
#863
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:46:53 PM
3º) En el "Prog028.htm" habíamos hecho un programa que construía una tabla de senos.

Haz un programa de nombre Eval4C.htm, que construya la tabla de senos anterior, pero su
salida en lugar de ser por un "alert", que sea por la pantalla del navegador. Mejora dicha salida,
por ejemplo: letra en negrita, color rojo (fondo negro) y centrado.
#864
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:46:30 PM
2º) En el programa "Eval1C.htm" teníamos un programa que nos preguntaba el nombre y la
edad y que nos daba por resultado los días vividos hasta el momento.

Repite el programa pero "visualmente" (grábalo con el nombre Eval4B.htm) de la siguiente
forma:

- Dos cuadros de texto para introducir el nombre y la edad en años.
- Al pulsar [Tab] en el 2º cuadro de texto aparece en un tercer cuadro de texto el nombre
introducido en el primer cuadro y los días vividos hasta el momento.
- El programa debe incluir títulos, colores, etc.
#865
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:46:05 PM
Autoevaluación IV

1º) En el programa "Eval1A.htm" habíamos hecho un programa que restaba dos números.
Has de hacer un programa "visual" de nombre Eval4A.htm, que haga lo mismo, de la
siguiente forma:
- Dos cuadros de texto para introducir los dos números
- Un botón para ejecutar el programa
- Un cuadro de texto para el resultado
- El programa debe quedar bonito, es decir: títulos, colores, etc.
#866
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:44:17 PM
Ejemplo3: Simplificar una fracción

- Escribe:

Código: text
<HTML>
<!-- PROG075.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function MCD(a,b)
{
var resto,aux;
if(a<b)
{
aux=a;
a=b;
b=aux;
}
if ((a%b)==0) resto=b;
while((a%b) !=0)
{
resto=a%b;
a=b;
b=resto;
}
return resto;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="YELLOW"><FONT COLOR="RED">
<H1><P ALIGN="CENTER">SIMPLIFICACIÓN DE FRACCIONES</H1>
<FORM><B>
<p align="center">Numerador : <input type="text" size="9"
name="num1"> <br>
Denominador: <input type="text" size="9" name="den1"
onblur="document.forms[0].num2.value=document.forms[0].num1.value/MCD(document.
forms[0].num1.value,this.value);document.forms[0].den2.value=this.value/MCD(documen
t.forms[0].num1.value,this.value);">
<br>
</p>
<hr>
<p align="center"><br>
<input type="text" size="7" name="num2"> <br>
<input type="text" size="7" name="den2"> <br><br>
<INPUT TYPE="button" VALUE="Otra Fracción"
onClick="document.forms[0].num1.value='';document.forms[0].den1.value='';document.f
orms[0].num2.value='';document.forms[0].den2.value='';">
</p>
</form>
</body>
</html>


- Grábalo con el nombre Prog075.htm y ejecútalo.

Observa entre otras cosas que los tags HTML, pueden escribirse en minúscula.
#867
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:42:55 PM
3º) Por último vamos a hacerlo bonito:

- Escribe:

Código: text
<HTML>
<!-- PROG074.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#000000"><FONT COLOR="WHITE">
<H1><P ALIGN="CENTER">CÁLCULO DEL FACTORIAL DE UN NÚMERO</H1>
<BR>
<H3>El factorial de un número es el producto del número por los sucesivos
enteros anteriores, hasta llegar a la unidad.
Es decir, el factorial de 5 será 5*4*3*2*1 por lo tanto 120.</H3>
<HR>
<FORM>
<H2><P ALIGN="CENTER"><FONT COLOR="RED">
Escribe el número:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document.forms[0].x.value);">
<INPUT TYPE="button" VALUE="Otra vez"
onClick="document.forms[0].x.value='';document.forms[0].f.value='';">
<BR><BR>
<INPUT TYPE="text" NAME="f">
<BR><BR>
</FORM>
</BODY>
</BODY>
</HTML>


- Grábalo con el nombre Prog074.htm y ejecútalo.
#868
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:42:24 PM
- Vamos a hacer una mejora: "la posibilidad de volver a empezar"

Escribe:

Código: text
<HTML>
<!-- PROG073.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Escribe el número:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document.forms[0].x.value);">
<BR><BR>
<INPUT TYPE="text" NAME="f">
<BR><BR>
<INPUT TYPE="button" VALUE="OTRO"
onClick="document.forms[0].x.value='';document.forms[0].f.value='';">
</FORM>
</BODY>
</BODY>
</HTML>


- Grábalo con el nombre Prog073.htm y ejecútalo.
#869
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:41:50 PM
2º) Elementos visuales:

Un cuadro de texto para introducir un número.
Un cuadro de texto para recoger el resultado (el factorial)
Un botón para ejecutar el programa

- Escribe:

Código: text
<HTML>
<!-- PROG072.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Escribe el número:<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Calcular el Factorial"
onClick="document.forms[0].f.value=factorial(document.forms[0].x.value);">
<BR><BR>
<INPUT TYPE="text" NAME="f">
</FORM>
</BODY>
</BODY>
</HTML>


- Grábalo con el nombre Prog072.htm y ejecútalo.
#870
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:39:46 PM
Vamos allá:

1º) Programa en forma de función:

Código: text
<SCRIPT LANGUAGE="JavaScript">
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
#871
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:38:43 PM
Ejemplo2: Cálculo del factorial de un número

El programa correspondiente era el Prog021.htm:

Código: text
<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG021.HTM
var salida="";
var fact=1;
var num;
num=prompt("Cálculo del factorial del numero ","");
num=parseInt(num,10);
for(i=1;i<=num;i++) fact=fact*i;
alert("El factorial de "+num+" es "+fact);
</SCRIPT>
</HTML>


Ejecuta varias veces el Prog021.htm, para tener claro su funcionamiento.
#872
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:37:19 PM
3º) Por último se trata de hacerlo "bonito":

- Escribe:

Código: text
<HTML>
<!-- PROG071.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write("<P ALIGN='CENTER'><FONT
COLOR='red'><B>"+salida);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="GREEN"><FONT COLOR="YELLOW"><H1><P ALIGN="CENTER">
Tabla de Valores de la función: Y=X*X-5*X+10</H1>
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR><P ALIGN="CENTER">
<INPUT TYPE="button" VALUE="Tabla de Valores"
onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.
forms[0].incr.value);">
<HR>
<BR>
</FORM>
</BODY>
</HTML>


- Grábalo con el nombre Prog071.htm y ejecútalo.

- Es interesante probarlo con valores relativamente grandes, por ejemplo: x1=1, x2=200,
paso=1
#873
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:36:29 PM
Vamos a ver antes de continuar si funciona lo fundamental:

- Escribe el siguiente programa:

Código: text
<HTML>
<!-- PROG070.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
x2=parseFloat(x2);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write(salida);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR>
<INPUT TYPE="button" VALUE="Tabla de Valores"
onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.
forms[0].incr.value);">
<HR>
<BR>
</FORM>
</BODY>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog070.htm y ejecútalo.
#874
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:35:44 PM
Bien, vamos a seguir el proceso para transformar el programa anterior en "visual":

1º) Programa JavaScript en forma de función:

Código: text
<SCRIPT LANGUAGE="JavaScript">
function valores(x1,x2,paso)
{
var y;
var salida="";
x1=parseFloat(x1);
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+"x= "+i+" y="+y+"<BR>";
}
document.write(salida);
}
</SCRIPT>


2º) Elementos visuales:

Tres cuadros de texto para introducir x1, x2 y paso
Un botón para ejecutar el programa

Es decir:

Código: text
<FORM>
Primer o mínimo valor de X:<INPUT TYPE="text" NAME="min">
<BR>
Último o máximo valor de X:<INPUT TYPE="text" NAME="max">
<BR>
Incremento o Variación entre los valores de X: <INPUT TYPE="text" NAME="incr">
<BR>
<HR>
<INPUT TYPE="button" VALUE="Tabla de Valores"
onClick="valores(document.forms[0].min.value,document.forms[0].max.value,document.forms[0
].incr.value);">
<HR>
<BR>
</FORM>
#875
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:34:45 PM
EJEMPLOS "visuales"

Para acabar este tema se trata de repetir una serie de programas ya hechos en capítulos
anteriores, pero utilizando las posibilidades "visuales" que acabamos de ver.

Ejemplo1: Tabla de valores de la función y=x2-5x+10

El programa correspondiente era el Prog023.htm que ya tienes en TuCarpeta:

Código: text
<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG023.HTM
var x1,x2,paso;
var salida="";
var y;
x1=prompt("Escribe el menor valor de x","");
x1=parseFloat(x1);
x2=prompt("Escribe el mayor valor de x","");
x2=parseFloat(x2);
paso=prompt("Escribe el incremento de x:","");
paso=parseFloat(paso);
for(i=x1;i<=x2;i=i+paso)
{
y=i*i-5*i+10;
salida=salida+i+" "+y+"\n";
}
alert(salida);
</SCRIPT>
</HTML>


Es conveniente ejecutar el Prog023.htm, para tener claro su funcionamiento.
#876
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:34:07 PM
El "saludo" anterior podría ser más sofisticado, en efecto:

- Escribe el siguiente programa:

Código: text
<HTML>
<!-- PROG069.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Saludo(nom)
{
alert("Hola "+nom);
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
Escribe tu nombre:
<INPUT TYPE="text" NAME="x">
<BR><BR>
<INPUT TYPE="button" VALUE="Hazme Clic" onClick="Saludo
(document.forms[0].x.value);">
</FORM>
</P>
</BODY>
</HTML>
#877
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:33:20 PM
- Observa que en lugar de utilizar un código de color, también podemos utilizar el nombre del
color en inglés.

Botones

Otro elemento interesante en la programación visual es el uso de botones:

Código: text
<FORM>
<INPUT TYPE="button" VALUE="Pepito" onClick="programaJS;">
</FORM>
El tag <INPUT TYPE...> anterior crea un botón de comando, donde aparece escrito el texto
"Pepito" y al hacer clic en dicho botón (onClick), se ejecuta el "programaJS".
Vamos a ver como funciona...
- Escribe el siguiente programa:
<HTML>
<!-- PROG068.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function Saludo()
{
alert("Hola Mundo!");
}
</SCRIPT>
</HEAD>
<BODY>
<P ALIGN="CENTER">
<FORM>
<INPUT TYPE="button" VALUE="Hazme Clic" onClick="Saludo();">
</FORM>
</P>
</BODY>
</HTML>


- Grábalo con el nombre Prog068.htm y ejecútalo.
#878
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:32:44 PM
4º) Para acabar, es conveniente mejorar el diseño visual del programa: títulos, colores, etc.

- A partir del programa anterior consigue el siguiente fichero:

Código: text
<HTML>
<!-- PROG067.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#0000FF">
<FONT COLOR="#FF0000">
<H1><P ALIGN="CENTER">Calculo del Área de un Triángulo</H1>
<HR>
</FONT>
<FONT COLOR="#FFFFFF"><P>
Escribe el los siguientes cuadros la base y la altura del triángulo.
Para pasar de un cuadro al siguiente pulsa la tecla de tabulación
[Tab]. Al situarte en el último cuadro, automáticamente aparecerá
el valor del área.
Para escribir un dato en decimales, debes utilizar el "punto decimal",
no la coma.
<BR>
<HR>
<FONT COLOR="YELLOW">
<FORM>
<P ALIGN="CENTER">
Base del triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.value);">
<BR>
<BR><HR><P ALIGN="CENTER"><B>
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">
<HR>
</FORM>
</FONT></B>
</BODY>
</HTML>


- Grábalo con el nombre Prog067.htm y ejecútalo varias veces.
#879
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:31:32 PM
- Escribe el siguiente programa:

Código: text
<HTML>
<!-- PROG066.HTM //-->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<BR>
Base: <INPUT TYPE="text" SIZE="5" NAME="bas">
<BR>
Altura: <INPUT TYPE="text" SIZE="5" NAME="alt"
onBlur="document.forms[0].result.value=a(document.forms[0].bas.value,this.value);">
<BR>
<BR>
Área: <INPUT TYPE="text" SIZE="10" NAME="result">
</FORM>
</BODY>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog066.htm y ejecútalo varias veces.
#880
Zona Webmaster / Re:JavaScript (Manual FV)
Noviembre 26, 2012, 08:30:52 PM
Creación de un programa JavaScript "visual"

Vamos a hacer nuestro primer programa "visual"...
El proceso a seguir es:

1º) Incluir en la cabecera (HEAD) de la página HTML, el programa JavaScript en forma de
función.

Por ejemplo: Programa que calcula el área de un triángulo

Código: text
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function a(x,y)
{
return (parseFloat(x)*parseFloat(y)/2);
}
</SCRIPT>
</HEAD>


2º) "Programar" en la página web, los elementos visuales que necesitamos para nuestro
programa:
- Un cuadro de texto, para "recoger" la base del triángulo:
Base del triángulo: <INPUT TYPE="text" SIZE="5" NAME="bas">
- Un cuadro de texto, para "recoger" la altura del triángulo:
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt" >
- Un cuadro de texto, donde aparecerá el resultado del programa, es decir el área del
triángulo:
Área del triángulo: <INPUT TYPE="text" SIZE="10" NAME="result">

3º) "Programar" el enlace entre JavaScript y HTML, es decir, la ejecución del programa.
De momento sólo sabemos hacerlo utilizando el evento onBlur de un cuadro de texto. Es decir
hemos de modificar el segundo cuadro de texto de forma que nos quede:
Altura del triángulo: <INPUT TYPE="text" SIZE="5" NAME="alt" onBlur=
"document.forms[0].result.value =a(document.forms[0].bas.value,this.value);">
Observa:

- Para referirnos al contenido (valor) del cuadro de texto de nombre "bas", utilizamos la
sintaxis: document.forms[0].bas.value
- Para referirnos al contenido del cuadro activo, utilizamos la sintaxis: this.value
Vamos a ver si funciona: