[JavaScript] Manual FV

Iniciado por alexander1712, Noviembre 26, 2012, 07:17:50 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas 1 2 3 4
Acciones del Usuario
Noviembre 26, 2012, 08:26:46 PM #40 Ultima modificación: Mayo 06, 2014, 04:58:18 PM por Gn0m3
- Escribe el siguiente programa:

Código: javascript
<HTML>
<!-- PROG062.HTM //-->
<BODY BGCOLOR="#FF0000">
<FONT COLOR="#0000FF">
<B>
<BR>
<HR>
<P ALIGN="CENTER">
Pepito Valdemoro Ruiz
<BR>
Avda. Las Babosas 21-25, 2, 4
<BR>
08915 - BADALONA
</P>
<HR>
</B>
</FONT>
</BODY>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog062.htm y ejecútalo.
Noviembre 26, 2012, 08:27:35 PM #41 Ultima modificación: Mayo 06, 2014, 04:58:31 PM por Gn0m3
Casi todos los programas que hemos hecho hasta ahora se han caracterizado en que su
"salida" ha sido siempre utilizando la ventana "alert" de JavaScript. Vamos a ver en el siguiente
programa que podemos "enviar la salida" a la misma pantalla del navegador.

- Escribe el siguiente programa:

Código: javascript
<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG063.HTM
var nom;
nom=prompt("Escribe tu nombre","");
var salida="";
for(i=2;i<=14;i=i+2)
{
salida=salida+"<BR>"+"i= "+i+" Hola "+nom;
}
document.write("<H1><P align='CENTER'>Uso de DOCUMENT.WRITE</H1>");
document.write("<BR><BR>");
document.write(salida);
</SCRIPT>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog063.htm y ejecútalo.
Noviembre 26, 2012, 08:28:32 PM #42 Ultima modificación: Mayo 06, 2014, 04:58:44 PM por Gn0m3
- En un programa JavaScript, la sentencia document.write("cadena") escribe en la pantalla
del navegador, el valor de "cadena".

Observa que en "cadena" no podemos incluir los códigos de escape "\n" y "\t", pero sí todos
los tags HTML que queramos. De esta forma, en lugar de "\n", deberemos escribir <BR>,
que es la orden equivalente en HTML.

Utilizando los tags propios del HTML, podemos mejorar la salida de cualquier programa
JavaScript, en efecto:

- Escribe el siguiente programa:

Código: javascript
<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG063.HTM
var nom;
nom=prompt("Escribe tu nombre","");
var salida="";
for(i=2;i<=14;i=i+2)
{
salida=salida+"<BR>"+"i= "+i+" - Hola "+nom;
}
document.write("<BODY BGCOLOR='#00FF00'><FONT COLOR='#FF0000'>");
document.write("<H1><P align='CENTER'>Uso de DOCUMENT.WRITE</H1>");
document.write("<BR><BR>");
document.write("<B>"+salida+"</B>");
</SCRIPT>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog064.htm y ejecútalo.
Noviembre 26, 2012, 08:29:20 PM #43 Ultima modificación: Mayo 06, 2014, 04:59:58 PM por Gn0m3
Uso de los tags <FORM> </FORM>

Los llamados tags "formulario": <FORM> </FORM> nos permiten incluir en una página web,
otros elementos visuales como "cuadros de texto" y "botones", de gran importancia en la
programación en JavaScript.

Cuadros de Texto:

Código: javascript
<FORM>
<INPUT TYPE="text" SIZE="10" NAME="pepe">
</FORM>
Crea un cuadro de texto de nombre "pepe" y tamaño 10 caracteres.
<FORM>
<INPUT TYPE="text" onBlur="programa JavaScript">
</FORM>


Crea otro cuadro de texto tal que, al salir de él se ejecuta el programa JavaScript.

- Escribe el siguiente programa:

Código: HTML5
<HTML>
<!-- PROG065.HTM //-->
<BODY>
<FORM>
ESCRIBE LO QUE QUIERAS:
<INPUT TYPE="text" SIZE="50" NAME="uno">
<BR><BR>
PULSA TAB para pasar al siguiente cuadro de texto:
<BR><BR>
VUELVE A ESCRIBIR LO QUE TE VENGA EN GANA:
<INPUT TYPE="text" onBlur="alert('vale');">
<BR>
<INPUT TYPE="text" VALUE="PUES ESO">
</FORM>
</BODY>
</HTML>


- Grábalo en TuCarpeta con el nombre Prog065.htm y ejecútalo varias veces, observando
detenidamente lo que sucede.
Noviembre 26, 2012, 08:29:58 PM #44
- Estudio del Prog065.htm

En principio el fichero anterior es una página web, que no tiene nada que ver con
JavaScript (no aparecen los tags <SCRIPT Lan...> </SCRIPT>)

Pero en el segundo cuadro de texto:

<INPUT TYPE="text" onBlur="alert('vale');">

tenemos un pequeño programa JavaScript (una única sentencia), que se ejecutará al
abandonar el foco (onBlur) el cuadro de texto.

• Si observamos los tres cuadros de texto, vemos que los parámetros SIZE, NAME,
VALUE, onBlur son opcionales. De hecho un cuadro de texto es el tag: <INPUT
TYPE="text">.
• El primer cuadro de texto tiene el tamaño de 50 caracteres (SIZE="50"). Si no
especificamos el tamaño (SIZE) en un cuadro de texto, por defecto es de 20
caracteres..
• El parámetro NAME de un cuadro de texto, sólo tiene sentido en el caso de un
programa JavaScript, para poder referirnos a él (como veremos en los siguientes
ejercicios).
El parámetro VALUE nos permite referirnos al "valor" o contenido de un determinado
cuadro de texto.
Noviembre 26, 2012, 08:30:52 PM #45
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: php
<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:
Noviembre 26, 2012, 08:31:32 PM #46
- Escribe el siguiente programa:

Código: php
<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.
Noviembre 26, 2012, 08:32:44 PM #47
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: php
<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.
Noviembre 26, 2012, 08:33:20 PM #48
- 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: php
<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.
Noviembre 26, 2012, 08:34:07 PM #49
El "saludo" anterior podría ser más sofisticado, en efecto:

- Escribe el siguiente programa:

Código: php
<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>
Noviembre 26, 2012, 08:34:45 PM #50
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: php
<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.
Noviembre 26, 2012, 08:35:44 PM #51
Bien, vamos a seguir el proceso para transformar el programa anterior en "visual":

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

Código: php
<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: php
<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>
Noviembre 26, 2012, 08:36:29 PM #52
Vamos a ver antes de continuar si funciona lo fundamental:

- Escribe el siguiente programa:

Código: php
<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.
Noviembre 26, 2012, 08:37:19 PM #53
3º) Por último se trata de hacerlo "bonito":

- Escribe:

Código: php
<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
Noviembre 26, 2012, 08:38:43 PM #54
Ejemplo2: Cálculo del factorial de un número

El programa correspondiente era el Prog021.htm:

Código: php
<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.
Noviembre 26, 2012, 08:39:46 PM #55
Vamos allá:

1º) Programa en forma de función:

Código: php
<SCRIPT LANGUAGE="JavaScript">
function factorial(num)
{
var fact=1;
num=parseInt(num);
for(i=1;i<=num;i++) fact=fact*i;
return fact;
}
</SCRIPT>
Noviembre 26, 2012, 08:41:50 PM #56
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: php
<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.
Noviembre 26, 2012, 08:42:24 PM #57
- Vamos a hacer una mejora: "la posibilidad de volver a empezar"

Escribe:

Código: php
<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.
Noviembre 26, 2012, 08:42:55 PM #58
3º) Por último vamos a hacerlo bonito:

- Escribe:

Código: php
<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.
Noviembre 26, 2012, 08:44:17 PM #59
Ejemplo3: Simplificar una fracción

- Escribe:

Código: php
<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.
Imprimir
Ir Arriba Páginas 1 2 3 4
Acciones del Usuario