[JavaScript] Manual FV

Alex · Noviembre 26, 2012, 07:58:56 PM

11.- Variable Auxiliar

En el programa Prog034 ya utilizábamos una variable auxiliar, vamos a hacer otro programa
que la utilize.

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG036.HTM
/* Programa que lee la longitud de los 3 lados de un
triángulo y analiza qué tipo de triángulo es: no es triángulo,
equilátero, isósceles, escaleno, rectángulo */
var lado1,lado2,lado3,auxiliar;
var solucion="";
lado1=prompt("Primer lado: ","");
lado1=parseFloat(lado1);
lado2=prompt("Segundo lado: ","");
lado2=parseFloat(lado2);
lado3=prompt("Tercer lado: ","");
lado3=parseFloat(lado3);
// Toma nota del uso de la variable auxiliar
if (lado1>lado2)
{
auxiliar=lado1;
lado1=lado2;
lado2=auxiliar;
}
if (lado3<lado1)
{
auxiliar=lado3;
lado3=lado2;
lado2=lado1;
lado1=auxiliar;
}
if (lado3<lado2)
{
auxiliar=lado2;
lado2=lado3;
lado3=auxiliar;
}
/* Vamos a ver si la ordenación es la correcta */
solucion=solucion+lado1+"\t"+lado2+"\t"+lado3+"\n";
/* Clasificación del triángulo */
if (lado3>=lado1+lado2)
{
solucion=solucion+"Esto no es un triángulo";
}
else
{
if ((lado1==lado2)&&(lado2==lado3))
{
solucion=solucion+"Triángulo Equilátero";
}
else
{
if ((lado1==lado2)||(lado1==lado3)||(lado2==lado3))
{
solucion=solucion+"Triángulo Isósceles";
}
else
{
solucion=solucion+"Triángulo Escaleno";
}
if
((lado3<lado1+lado2)&&(lado3*lado3==lado1*lado1+lado2*lado2))
{
solucion=solucion+" además Rectángulo";
}
}
}
alert(solucion);
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog036.htm en TuCarpeta, y ejecútalo varias veces.

Alex · Noviembre 26, 2012, 08:00:20 PM

Autoevaluación II

1) El siguiente programa tiene errores. Escríbelo y corrígelo para que funcione (grábalo con el
nombre Eval2A.htm en TuCarpeta):

Código: javascript

<SCRIPT>
<HTML LANGUAGE="JavaScript"
// EVAL2A.HTM
var farenheit,celsius,
var s="";
for(i=-2;i<=12:i++)
{
celsius=10*i;
farenheit=32+(celsius*9)/5;
s=s+"C= "+celsius+" F= "+farenheit+"\n";
if (celsius==0) s=s+"Punto congelación del Agua\n";
if (celsius==100) s=s+"Punto de ebullición del Agua\n";
}
alert(s;
<//SCRIPT>
<HTML>

2) Haz un programa que funcione de la siguiente forma:
- El programa nos pide que escribamos dos números positivos menores de 57
- El programa nos da como resultado el producto de los dos números
- Si los números no son positivos o son mayores de 57, el programa nos lo dice.
- El programa nos pregunta al final si queremos volver a empezar.
Graba el programa con el nombre Eval2B.htm en TuCarpeta

3) Escribe un programa que nos vaya pidiendo números. Si escribimos el número 9999 se
acaba; por último el programa nos da como resultado el número de números introducidos,
exceptuando el 9999.

Graba el programa con el nombre Eval2C.htm en TuCarpeta.

4) Haz un programa que haga lo mismo que el anterior, pero además nos dé la suma de todos
los números introducidos, exceptuando el 9999
Graba el programa con el nombre Eval2D.htm en TuCarpeta.

5) Haz un programa que haga lo mismo que el anterior, pero además nos dé el producto de
los números introducidos, exceptuando el 9999.
Graba el programa con el nombre Eval2E.htm en TuCarpeta.

6) Haz un programa que escriba todos los múltiplos de 23 inferiores a 1000 y por último nos
dé la suma de todos ellos.
Graba el programa con el nombre Eval2F.htm en TuCarpeta.

7) Haz un programa que sirva para hacer una tabla de valores de la función y=sen(7x-5)
- El programa nos pide los dos valores de "x" (valores máximo y mínimo).
- El programa nos pide el incremento (variación) de la "x".
Graba el programa con el nombre Eval2G.htm en TuCarpeta.

Haz un programa que sirva para calcular un cateto de un triángulo rectángulo a partir del
otro cateto y la hipotenusa, de la siguiente forma:
- El programa nos pide el valor de la hipotenusa.
- El programa nos pide el valor de un cateto.
- Si el cateto es mayor que la hipotenusa, el programa nos da un mensaje de error y se
acaba.
- El programa nos da como resultado el valor del otro cateto y nos pregunta si queremos
volver a empezar.

Graba el programa con el nombre Eval2H.htm en TuCarpeta.

9) Haz un programa que sirva para resolver ecuaciones de 2º grado del tipo ax2 + bx = 0.
Graba el programa con el nombre Eval2I.htm en TuCarpeta.
(Modifica el Prog027.htm, que resolvia el caso general)

Alex · Noviembre 26, 2012, 08:02:48 PM

III.- Funciones y Arrays

1.- Funciones sin retorno de parámetro

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG039.HTM
alert("Programa que ahora llamará a una función");
mediageo();
alert("Se acabó lo que se daba");
/* ¡Atención!: a continuación tenemos la función */
function mediageo()
{
var a,b;
a=prompt("Escribe un número","");
a=parseFloat(a);
b=prompt("Escribe otro número","");
b=parseFloat(b);
alert("La media geométrica de "+ a +" y "+ b +" es "+Math.sqrt(a*b));
}
</SCRIPT>
</HTML>

- Graba el programa anterior con el nombre Prog039.htm en TuCarpeta y ejecútalo varias
veces.

- Estudio del Prog039.htm

Estructura de una función:

Código: javascript

function nombreFunción()
{
sentencia1;
sentencia2;
...;
...;
}

Se dice que la función es sin retorno de parámetros, porque no devuelve nada; para que la
función devuelva un valor, debería haber la instrucción return.
Si una función no retorna nada se le denomina también con el nombre de MÉTODO.
Nuestra función mediageo(), calcula la media geometrica de dos números. Como no retorna
nada, lo que hace en realidad la función es "agrupar" en un lugar determinado del fichero
HTML, una serie de sentencias que por ellas mismas ya forman un programa, se dice también
que es un subprograma.

Código: javascript

<HTML>
<SCRIPT LAN....
// Programa Principal
sentencia1;
mediageo(); // llama a la función y se ejecuta en este lugar
sentencia2();
// Fin del programa Principal
function mediageo()
{
sentencia3;
...;
....;
}
</SCRIPT>
</HTML>

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG040.HTM
var opc="0";
while (opc != "T")
{
opc=prompt("Escribe la letra de la opción deseada: (S) Sumar - (R) Raíz Cuadrada
- (L) Logaritmo Neperiano - (A) Ayuda - (T) Terminar","");
if (opc=="S") suma();
if (opc=="R") raiz();
if (opc=="L") logaritmo();
if (opc=="A") ayuda();
}
function suma()
{
var a,b;
a=prompt("Escribe el primer sumando","");
a=parseFloat(a);
b=prompt("Escribe el segundo sumando","");
b=parseFloat(b);
alert("La suma de "+ a +" y "+ b +" es "+(a+b));
}
function raiz()
{
var a;
a=prompt("Escribe el radicando ","");
a=parseFloat(a);
alert("La raíz cuadrada de "+ a +" es "+Math.sqrt(a));
}
function logaritmo()
{
var x;
x=prompt("Escribe un número positivo","");
x=parseFloat(x);
alert("El logaritmo neperiano de "+ x +" es "+Math.log(x));
}
function ayuda()
{
alert("Es bastante tonto que me pidas ayuda\npero aquí la tienes:\n\tPulsa S si
quieres sumar\n\tPulsa R para la raíz cuadrada\n\tPulsa L para el logaritmo
neperiano\n\tPulsa A para acceder a la ayuda\n\tPulsa T para acabar");
}
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog040.htm en TuCarpeta y ejecútalo unas cuantas
veces.

Alex · Noviembre 26, 2012, 08:07:41 PM

2.- Funciones que retornan parámetros

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG041.HTM
/* Programa Principal */
var x,y,result;
x=prompt("Escribe el primer sumando","");
x=parseFloat(x);
y=prompt("Escribe el segundo sumando","");
y=parseFloat(y);
/* A continuación llamo a la función para calcular
el cuadrado de la suma de x e y */
result=SumaCuadrado(x,y);
alert("El cuadrado de la suma de "+ x +" y "+ y +" es "+result);
// Fin del programa principal
/* A continuación tengo la definición de la función */
function SumaCuadrado(a,b)
{
return (a*a+b*b+2*a*b);
}
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog041.htm y ejecútalo varias veces.
- Estudio del Prog041.htm

Código: javascript

function SumaCuadrado(a,b)
{
return (a*a+b*b+2*a*b);
}

Es una función con dos argumentos (a y b) que retorna un valor (parámetro), que en nuestro
caso es el cuadrado de la suma de "a" y "b".
Una función que retorna parámetros, se caracteriza en que en su interior aparece la sentencia
return, que permite devolver valores.

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG042.HTM
var salida="";
salida=salida+"Enero tiene "+ diasmes(1) +" días\n";
salida=salida+"Febrero tiene "+ diasmes(2) +" días\n";
salida=salida+"Marzo tiene "+ diasmes(3) +" días\n";
salida=salida+"Abril tiene "+ diasmes(4) +" días\n";
salida=salida+"Mayo tiene "+ diasmes(5) +" días\n";
salida=salida+"Junio tiene "+ diasmes(6) +" días\n";
salida=salida+"Julio tiene "+ diasmes(7) +" días\n";
salida=salida+"Agosto tiene "+ diasmes(8) +" días\n";
salida=salida+"Septiembre tiene "+ diasmes(9) +" días\n";
salida=salida+"Octubre tiene "+ diasmes(10) +" días\n";
salida=salida+"Noviembre tiene "+ diasmes(11) +" días\n";
salida=salida+"Diciembre tiene "+ diasmes(12) +" días\n";
alert(salida);
/* Función "diasmes" */
function diasmes(mes)
{
var dias;
switch(mes)
{
case 2:
dias=28;
break;
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
dias=31;
break;
case 4:
case 6:
case 9:
case 11:
dias=30;
break;
}
return dias;
}
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog042.htm en TuCarpeta y ejecútalo.
- Observa:

• El programa principal, con la sentencia "diames(1)" llama a la función "diames" y
ésta devuelve el número 31.

• Observa la estructura "switch": si el "case" 1, 3, 5, 7, 8, 10 no contienen nada, se
ejecuta el siguiente "case" que sí contiene algo: en nuestro caso el "case 12", que
da a la variable "días" el valor 31.

Programa que determina si un número es primo

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG043.HTM
var num,resto;
num=prompt("Escribe un número entero","");
num=parseInt(num,10);
for (i=2;i<num-1;i++)
{
resto=num % i;
if ((resto==0) && (num != 2))
{
alert(num+" no es primo");
break;
}
}
alert("Si no ha aparecido un mensaje de que no es primo, entonces el número
"+num+" es primo");
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog043.htm en TuCarpeta y ejecútalo varias veces.

- El operador %:
num %i, nos da el resto de la división entre num y i.
Programa que determina si un número es primo, pero utilizando una función

- Escribe:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG044.HTM
var num;
num=prompt("Escribe un número entero","");
{
alert(num+" es primo");
}
else
{
alert(num+"no es primo");
}
function primo(x)
{
var resto;
for (i=2;i<x-1;i++)
{
resto=x % i;
if ((resto==0) && (x != 2))
{
return "N";
}
}
return "S";
}
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog044.htm en TuCarpeta y ejecútalo.

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG045.HTM
var num,base;
num=prompt("Escribe un número positivo","");
num=parseFloat(num);
base=prompt("Escribe la base del logaritmo","");
base=parseFloat(base);
alert("El logaritmo de "+num+" en base "+base+" es "+logBase(num,base));
/* Función que calcula el logaritmo en cualquier base */
function logBase(x,a)
{
return Math.log(x)/Math.log(a);
}
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog045.htm y ejecútalo varias veces.

Programa que calcula potencias y raices utilizando dos funciones

- Escribe:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG049e.HTM
function pot()
{
var b,e;
var resul;
b=parseFloat(prompt("Escribe la base de la potencia",""));
e=parseFloat(prompt("Escribe el exponente",""));
resul=b+" elevado a "+e+" es "+Math.pow(b,e);
alert(resul);
}
function raiz()
{
var b,e;
var resul;
b=parseFloat(prompt("Escribe el radicando de la raíz",""));
e=parseFloat(prompt("Escribe el índice de la raíz",""));
resul="La raíz "+e+"-ésima de "+b+" es "+Math.pow(b,1/e);
alert(resul);
}
var opc="s"
while(opc != "S")
{
opc=prompt("Escribe la opción que desees:\n(P)Calcular una potencia
(R)Calcular una raíz (S)Salir del programa","S");
switch(opc)
{
case "P":
case "p":
pot();
break;
case "R":
case "r":
raiz();
break;
}
}
</SCRIPT>
</HTML>

- Grábalo con el nombre Prog049e.htm y ejecútalo varias veces.

Alex · Noviembre 26, 2012, 08:09:59 PM

3.- Matrices y Arrays

Una matriz es un conjunto de elementos colocados de forma adyacente en la memoria de
manera que nos podemos referir a ellos con un solo nombre común.

- Las matrices se pueden clasificar según su tamaño en:

• Matrices Estáticas: tienen un tamaño fijo e inmutable.
• Matrices Dinámicas: tienen un tamaño variable. En JavaSript las matrices siempre
son dinámicas.
- Las matrices se pueden clasificar según sus dimensiones:
• Arrays: son matrices de una dimensión.
• Matrices: son matrices multidimensionales.

En JavaScript, las matrices son siempre "Arrays", pero veremos que podemos "simular"
matrices multidimensionales.

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG050.HTM
var x=new Array();
var salida="";
for(i=0;i<=10;i++)
{
x[i]=2*i;
salida=salida+"x["+i+"]="+x[i]+"\t";
}
alert(salida);
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog050.htm en TuCarpeta y ejecútalo.
- Estudio del Prog050.htm

• var x=new Array();
Definimos la variable "x" como un "array" de un número indeterminado de elementos.

• Los elementos de un "array" se indican: NombreArray[índice]= valor
El índice= 0, 1, 2, 3, 4, ...
En nuestro caso:
X[0] será el primer valor del array
X[1] será el segundo.
Etc.

• x = 2*i
Asignamos a cada elemento del array el doble de su índice, es decir: x[0]= 0; x[1]= 2;
x[2]= 4; etc.

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
//PROG051.HTM
var n;
var salida="";
n=prompt("Escribe el número de elementos del Array","");
n=parseInt(n);
var Vector=new Array(n);
for(i=0;i<n;i++)
{
Vector[i]=prompt("Introduce Valor","");
salida=salida+Vector[i]+"\n";
}
alert("Los valores de la matriz son:\n"+salida);
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog051.htm en TuCarpeta.
- Observa de qué forma, podemos definir un array con un número variable de valores.

Programa que calcula la media aritmética de una serie indeterminada de valores
- Escribe:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
//PROG051a.HTM
var x=new Array();
var med;
var y=0;
var i=0;
var sum=0;
while(y != 9999)
{
y=parseFloat(prompt("Introduce un valor\npara acabar escribe
9999","9999"));
x[i]=y;
i++;
}
x[i]=0;
for(j=0;j<i-1;j++)
{
sum=sum+x[j];
}
med=sum/j;
alert("La media es "+med);
</SCRIPT>
</HTML>

- Grábalo con el nombre Prog051a.htm y ejecútalo varias veces para comprobar que
funciona.

Programa que calcula la media aritmética de un número determinado de valores
utilizando una función

- Escribe:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
//PROG051b.HTM
function media(n)
{
var x=new Array(n);
var sum=0;
for(i=0;i<n;i++)
{
num=parseFloat(prompt("Escribe un valor de la serie
("+(i+1)+"º):",""));
x[i]=num;
sum=sum+x[i];
}
return sum/n;
}
var valores;

valores=parseInt(prompt("Escribe el número de elementos de la serie",""));
alert("La media de todos los valores es: "+media(valores));
</SCRIPT>
</HTML>

- Grábalo con el nombre Prog051b.htm y ejecútalo varias veces para comprobar que
funciona.

- Mejora la "salida" del programa anterior de la siguiente forma:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
//PROG051c.HTM
function media(n)
{
var x=new Array(n);
var sum=0;
var salida="";
for(i=0;i<n;i++)
{
num=parseFloat(prompt("Escribe un valor de la serie ("+(i+1)+"º):",""));
x[i]=num;
salida=salida+x[i]+" - ";
sum=sum+x[i];
}
salida=salida+"\nLa Media Aritmética de estos "+n+" números es "+(sum/n);
return salida;
}
var valores;
valores=parseInt(prompt("Escribe el número de elementos de la serie",""));
alert(media(valores));
</SCRIPT>
</HTML>

- Grábalo con el nombre Prog051c.htm y pruébalo.

Alex · Noviembre 26, 2012, 08:11:17 PM

Programa que calcula, dada una serie de 20 números, la media aritmética, las

desviaciones respecto a la media, la desviación media, la varianza y la desviación típica.

Recuerda:

Dada la serie estadística: x1, x2, x3, ... , xn
Media aritmética: x = (x1+x2+x3+ ......)/n

Desviaciones respecto a la media: d1=|x1-x|, d2=|x2-x|, ....
Desviación media: es la media aritmética de las desviaciones

Varianza: es la media aritmética de las desviaciones al cuadrado.

Desviación típica: es la raíz cuadrada de la varianza.

- Escribe:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
//PROG051d.HTM
var x=new Array(20);
var sum=0;
var med;
var des=new Array(20);
var sum1=0;
var sum2=0;
var desmed,vari,dt;
var salida="VALORES:\n";
var salida1="DESVIACIONES RESPECTO A LA MEDIA:\n";
for(i=0;i<20;i++)
{
num=parseFloat(prompt("Escribe un valor de la serie ("+(i+1)+"º):",""));
x[i]=num;
salida=salida+x[i]+" - ";
sum=sum+x[i];
}
med=sum/20;
for(i=0;i<20;i++)
{
des[i]=Math.abs(x[i]-med);
salida1=salida1+des[i]+" - ";
sum1=sum1+des[i];
sum2=sum2+(des[i]*des[i]);
}
desmed=sum1/20;
vari=sum2/20;
dt=Math.sqrt(vari);
alert(salida+"\n"+"MEDIA ARITMÉTICA =
"+med+"\n"+salida1+"\n"+"DESVIACIÓN MEDIA ="+desmed+"\nVARIANZA
="+vari+"\nDESVIACIÓN TÍPICA = "+dt);
</SCRIPT>
</HTML>

- Grábalo con el nombre Prog051d.htm y ejecútalo varias veces para comprobar que
funciona.

Alex · Noviembre 26, 2012, 08:12:08 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG052.HTM
alert(GeneraLetras());
function GeneraLetras()
{
var n;
n=parseInt(prompt("Cuántas letras quieres (1 a 26)",""));
if (isNaN(n)==true) return;
if (n<1) n=1;
if (n>28) n=26;
var Letras=new Array(n);
for (i=0;i<=Letras.length-1;i++)
{
Letras[i]=String.fromCharCode(65+i);
}
return Letras;
}
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog052.htm y ejecútalo varias veces.
- Estudio del Prog052.htm

• length, es una propiedad de las matrices que nos indica el tamaño de éstas.
En nuestro caso: Letras.length = número de elementos del array "Letras".
• Si en una función escribimos la sentencia return, sin ningún parámetro,
simplemente "salimos" de la función y se acaba el programa.
• String.fromCharCode
Lo estudiaremos próximamente, en detalle. Baste decir de momento que escribe un
determinado carácter.

Alex · Noviembre 26, 2012, 08:12:39 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG053.HTM
var salida="";
var Datos=new Array("Pepito","Paquito","Felipe");
var Edad=new Array(57,15,26);
alert("La matriz Datos tiene "+Datos.length+" elementos");
alert("La matriz Edad tiene "+Edad.length+" elementos");
for (i=0;i<=2;i++)
{
salida=salida+Datos[i]+" - "+Edad[i]+"\n";
}
alert(salida);
</SCRIPT>
</HTML>

- Graba el programa con el nombre Prog053.htm en TuCarpeta y ejecútalo.
- Observa que podemos inicializar un array igual que hacíamos con cualquier variable.

Alex · Noviembre 26, 2012, 08:13:29 PM

Matrices con varias dimensiones

JavaScript no soporta directamente matrices con varias dimensiones.

En "Java" o en "C++" definimos matriz[5][5] como una matriz de dos dimensiones: 5x5 = 25
elementos en total.

En JavaScript podemos "simular" esta matriz de la siguiente forma:

Código: javascript

var Matriz2D=new Array(5);

for(i=0;i<=4;i++)
{
Matriz2D[i]=new Array(5);
}

Con este código lo que conseguimos es crear una matriz con 5 elementos cada uno de los
cuales es, a su vez, una matriz. El resultado es el deseado: una matriz con dos dimensiones.
Una vez definida una matriz multidimensional, podemos acceder a sus elementos de la
siguiente forma:

Matriz2D[0][0] = primer elemento de la matriz.

Alex · Noviembre 26, 2012, 08:13:56 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG054.HTM
var Matriz2D= new Array(5);
for (i=0;i<5;i++)
{
var Aux=new Array(5);
for (j=0;j<5;j++)
{
Aux[j]="E"+i+j;
}
Aux[4] += "\n";
Matriz2D[i]=Aux;
}
alert(Matriz2D);
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog054.htm y ejecútalo.

Alex · Noviembre 26, 2012, 08:14:50 PM

4.- Código ASCII/Unicode

De lo único que entiende un ordenador es de 0 y 1. Cuando se asigna una cadena de texto a
una variable, ésta internamente, se guarda como una serie de números que identifican a los
diferentes caracteres constituyentes de la misma. Esta codificación se llama ASCII.

El código ASCII asigna a cada carácter un número de 0 a 255, es decir 256 caracteres en total.

1 carácter = 8 bits = 1 byte = 8 ceros y unos.

0 y 1 en grupos de ocho: 28 = 256

El código ASCII se ha quedado pequeño: 256 caracteres es insuficiente para representar los
símbolos propios de muchos países.

La ISO (organización internacional para la normalización), propuso el código UNICODE:
1 carácter = 2 bytes = 16 ceros y unos
0 y 1 en grupos de 16: 216 = 65.536 caracteres distintos.

La mayor parte de los sistemas operativos modernos (por ejemplo el Windows), guardan
internamente la representación de sus caracteres como valores Unicode no Ascii

Función fromCharCode: accedemos a los caracteres Unicode
var x = String.fromCharCode(75, 81,52);
alert x;

Aparecen los caracteres correspondientes a la codificación "unicode" de los números 75, 81 y
52.

Función charCodeAt, es la función inversa de la anterior, es decir a partir de una cadena
devuelve el código correspondiente a la letra que se encuentre en la posición especificada:

var x = "JavaScript"
alert(x.charCodeAt(5));

Devolverá un 99, que corresponde a la "c".

Las cadenas igual que las matrices comienzan a numerarse en el cero.

Alex · Noviembre 26, 2012, 08:15:20 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG055.HTM
var x="PACO-paco";
var letras=new Array(9);
var salida="";
salida=salida+x+"\n";
for(i=0;i<9;i++)
{
salida=salida+x.charCodeAt(i)+"\t";
letras[i]=x.charCodeAt(i);
}
alert(salida);
alert(letras);
</SCRIPT>
</HTML>

- Grábalo en TuCarpeta con el nombre Prog055.htm y ejecútalo.

Alex · Noviembre 26, 2012, 08:16:09 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG056.HTM
var x;
x=prompt("Escribe una palabra o frase","");
var letras=new Array();
var numeros=new Array();
for(i=0;i<x.length;i++)
{
numeros[i]=x.charCodeAt(i);
letras[i]=String.fromCharCode(numeros[i]);
}
alert(letras+"\n"+numeros);
</SCRIPT>
</HTML>

- Grábalo en TuCarpeta con el nombre Prog056.htm y ejecútalo.

Alex · Noviembre 26, 2012, 08:17:12 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG057.HTM
var x;
var salida="";
var letras=new Array();
var numeros=new Array();
x=prompt("Escribe una palabra o frase","");
for(i=0;i<=x.length;i++)
{
numeros[i]=x.charCodeAt(i);
letras[i]=String.fromCharCode(numeros[i]);
salida=salida+letras[i]+" = "+numeros[i]+"\n";
}
alert(salida);
alert(SumaASCII(x));
function SumaASCII(frase)
{
var aux=0;
for(i=0;i<frase.length;i++)
{
aux += frase.charCodeAt(i);
}
return aux;
}
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog057.htm y ejecútalo.
- Investiga si es verdad lo que dicen las "malas lenguas": "En el nombre del fundador y
presidente de Microsoft hay el número de la bestia".

Alex · Noviembre 26, 2012, 08:19:11 PM

5.- Búsqueda de un carácter determinado.

El método charAt de String devuelve una cadena conteniendo el carácter situado en la
posición especificada:

Código: javascript

"cadena".charAt(4) = letra situada en el lugar 5

Ejemplo: función que determina la existencia del carácter @:

Código: javascript

Function Busca(texto)
{
for(i=0;i<texto.length;i++)
{
if(texto.charAt(i)=="@") return true;
}
return false
}

Si utilizamos la función anterior para determinar una dirección e-mail, no sería correcto ya que
el símbolo @ al principio o final de la cadena, no correspondería a una dirección de correo
electrónico; para este caso deberíamos modificar la función:

Código: javascript

Function BuscaEmail(texto)
{
for(i=0;i<texto.length;i++)
{
if(texto.charAt(i)=="@" && i ¡= (texto.length-1) && (i ¡= 0))
return true;
}
return false
}
alert(BuscaEmail("[email protected]"));

Alex · Noviembre 26, 2012, 08:20:18 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG058.HTM
/* Programa que determina el número de "a" o "A" que
aparece en un texto */
var texto;
texto=prompt("Escribe el texto que quieras:","");
alert("Número de a y de A = "+BuscaLetra(texto));
function BuscaLetra(x)
{
var numero=0;
for(i=0;i<x.length;i++)
{
if(x.charAt(i)=="a" || x.charAt(i)=="A") numero++;
}
return numero;
}
</SCRIPT>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog058.htm y ejecútalo varias veces.

Alex · Noviembre 26, 2012, 08:22:06 PM

6.- Temporizadores

Los temporizadores son objetos sin representación física que se encargan de ejecutar una
tarea al cabo de cierto tiempo que se le debe indicar.

Código: javascript

NombreTemp= setTimeout("nombrefunción()", tiempo);

Para detener el temporizador: clearTimeout(NombreTemp);

- Escribe el siguiente programa:

Código: javascript

<HTML>
<SCRIPT LANGUAGE="JavaScript">
// PROG059.HTM
/* Texto animado */
var velocidad=200;
var letras;
function animar()
{
letras=new Array();
var texto="Uso de cadenas con JavaScript para efectos dinámicos";
for(i=0;i<texto.length;i++)
{
letras[i]=texto.charAt(i);
}
mueveLetras();
}
var TextoAct="";
var n=-1;
function mueveLetras()
{
n++;
TextoAct += letras[n];
document.forms[0].TextoDinamico.value=TextoAct;
if(n==letras.length-1)
{
n=-1;
TextoAct="";
}
setTimeout("mueveLetras()",velocidad);
}
</SCRIPT>
<BODY onload=animar();>
<FORM>
<INPUT TYPE="text" NAME="TextoDinamico" VALUE="" SIZE="120">
</FORM>
</BODY>
</HTML>

- Graba el programa en TuCarpeta con el nombre Prog059.htm y ejecútalo.

- Estudio del Prog059.htm
• La frase "Uso de cadenas con JavaScript para efectos dinámicos", se colocará una
letra cada 0,2 segundos.
• La línea <BODY onLoad= animar();>, llamará a la rutina "animar()", cuando la
página termine de cargarse.
• <FORM>
<INPUT TYPE="text" NAME="TextoDinamico" VALUE= "" SIZE="120">
</FORM>
Definimos un formulario (FORM), que contiene un cuadro de texto (INPUT
TYPE="text") de nombre TextoDinamico que no contiene nada (VALUE="") y
tamaño (SIZE="120")
En el próximo capítulo lo estudiaremos con detalle.
• document.forms[0].TextoDinamico.value= variable;
En el cuadro de texto de nombre "TextoDinamico", se coloca el valor de la variable.
En el próximo capítulo lo estudiaremos con detalle.

Alex · Noviembre 26, 2012, 08:23:32 PM

Autoevaluación III

9) Haz un programa de nombre Eval3I.htm, tal que:
- El programa nos pregunta cuántas multiplicaciones queremos hacer.
- El programa nos las pregunta aleatoriamente.
- Al final el programa nos da la nota cualitativa (función del Prog049f.htm).
Repasa el segundo capítulo.

10) Haz un programa de nombre Eval3J.htm que lea un sistema de tres ecuaciones con tres
incógnitas y nos escriba la matriz ampliada. Suponiendo que todos los coeficientes son
positivos y constan de un único dígito. Deberás utilizar la función texto.charAt(num)

4) Haz un programa de nombre Eval3D.htm, que sirva para calcular el módulo de un vector
en el espacio, utilizando una función.

15) Haz un programa de nombre Eval3O.htm, que escriba un número en base 2 o 3 en base
10.
Repasa el primer capítulo

16) Haz un programa de nombre Eval3P.htm, que calcule los 50 primeros términos de la
sucesión de termino general: (3n + 1) / ( 2n – 1)

17) Haz un programa de nombre Eval3Q.htm, que calcule la raíz cuarta de un número,
utilizando una función.

18) Haz un programa de nombre Eval3R.htm, que cuente el número de vocales que contiene
un texto cualquiera.

19) Haz un programa de nombre Eval3S.htm, que haga lo mismo que el anterior, pero al final
el programa nos da el número de "a", número de "e", número de "i", y lo mismo con las "o" y
"u".

Alex · Noviembre 26, 2012, 08:25:56 PM

IV.- Programación Visual

En este capítulo se trata de continuar programando en JavaScript, pero utilizando las
posibilidades gráficas y visuales del navegador: botones, cuadros de texto, etc.
Para ello necesitamos conocer un poco más de los tags propios del HTML,

Texto

Permite escribir comentarios en una página web (no en un programa JavaScript).
<BR>
Es equivalente a un [Return]. No existe el correspondiente tag de cierre.
<H1> </H1>
<H2> </H2>
<H3> </H3>
Nos sirven para escribir "títulos".
<P> </P>
Párrafo normal (justificación izquierda).
<P ALIGN="CENTER"> </P>
Párrafo centrado.
Colores
<BODY BGCOLOR="CódigoColor"> </BODY>
La página quedará coloreada con el color de fondo correspondiente a CódigoColor
La sintaxis de CódigoColor es #XXYYZZ
XX es un número en hexadecimal de 00 a FF correspondiente al rojo
YY es un número en hexadecimal de 00 a FF correspondiente al verde
ZZ es un número en hexadecimal de 00 a FF correspondiente al azul
Ejemplos:
#FF0000 rojo #0000FF azul
#9900DD violeta #00FF00 verde
#FF00FF magenta
<FONT COLOR="CódigoColor"> </FONT>

La letra aparecerá en el color correspondiente a CódigoColor.

Otros
<HR>
Dibuja una línea horizontal.
<B> </B>
Letra en negrita.

Alex · Noviembre 26, 2012, 08:26:26 PM

- Escribe el siguiente programa:

Código: javascript

<HTML>
<HEAD><TITLE>Esto está en el navegador</TITLE></HEAD>
<!-- PROG061.HTM //-->
<BODY BGCOLOR="#000000">
<FONT COLOR="#FFFFFF">
<H1>Color de Fondo #000000=Negro</H1>
<BR>
<P ALIGN="CENTER">
El color del texto #FFFFFF=Blanco</P>
<BR>
<HR>
Esto está entre dos rayas horizontales
<HR>
<P ALIGN="CENTER">
<B>Esto es Negrita</B></P>
<BR>
Esto es letra normal
</FONT>
</BODY>
</HTML>

- Grábalo en TuCarpeta con el nombre Prog061.htm y ejecútalo.

[JavaScript] Manual FV

Noviembre 26, 2012, 07:58:56 PM #20 Ultima modificación: Mayo 06, 2014, 04:51:43 PM por Gn0m3

Noviembre 26, 2012, 08:00:20 PM #21 Ultima modificación: Mayo 06, 2014, 04:52:31 PM por Gn0m3

Noviembre 26, 2012, 08:02:48 PM #22 Ultima modificación: Mayo 06, 2014, 04:53:11 PM por Gn0m3

Noviembre 26, 2012, 08:07:41 PM #23 Ultima modificación: Mayo 06, 2014, 04:54:25 PM por Gn0m3

Noviembre 26, 2012, 08:09:59 PM #24 Ultima modificación: Mayo 06, 2014, 04:55:08 PM por Gn0m3

Noviembre 26, 2012, 08:11:17 PM #25 Ultima modificación: Mayo 06, 2014, 04:55:33 PM por Gn0m3

Noviembre 26, 2012, 08:12:08 PM #26 Ultima modificación: Mayo 06, 2014, 04:55:47 PM por Gn0m3

Noviembre 26, 2012, 08:12:39 PM #27 Ultima modificación: Mayo 06, 2014, 04:55:55 PM por Gn0m3

Noviembre 26, 2012, 08:13:29 PM #28 Ultima modificación: Mayo 06, 2014, 04:56:06 PM por Gn0m3

Noviembre 26, 2012, 08:13:56 PM #29 Ultima modificación: Mayo 06, 2014, 04:56:16 PM por Gn0m3

Noviembre 26, 2012, 08:14:50 PM #30

Noviembre 26, 2012, 08:15:20 PM #31 Ultima modificación: Mayo 06, 2014, 04:56:28 PM por Gn0m3

Noviembre 26, 2012, 08:16:09 PM #32 Ultima modificación: Mayo 06, 2014, 04:56:39 PM por Gn0m3

Noviembre 26, 2012, 08:17:12 PM #33 Ultima modificación: Mayo 06, 2014, 04:56:49 PM por Gn0m3

Noviembre 26, 2012, 08:19:11 PM #34 Ultima modificación: Mayo 06, 2014, 04:57:09 PM por Gn0m3

Noviembre 26, 2012, 08:20:18 PM #35 Ultima modificación: Mayo 06, 2014, 04:57:22 PM por Gn0m3

Noviembre 26, 2012, 08:22:06 PM #36 Ultima modificación: Mayo 06, 2014, 04:57:38 PM por Gn0m3

Noviembre 26, 2012, 08:23:32 PM #37

Noviembre 26, 2012, 08:25:56 PM #38

Noviembre 26, 2012, 08:26:26 PM #39 Ultima modificación: Mayo 06, 2014, 04:57:53 PM por Gn0m3