JavaScript

logo-de-javascript JavaScript

JavaScript  es un lenguaje de programación que completa  a las páginas web a realizar determinadas como mostrar la hora, activar imágenes cuando ocurra algo, etc.  la mayor parte de las páginas utilizan javascript y en este manual veremos algunas de ellas de baja o media dificultad. Empecemos con una tarea sencilla

Pd. Tenemos que entender que este manual se aplica a alumnos de Bachillerato y el objetivo es que tomen conciencia de la funcionalidad que este lenguaje puede aportar al diseño web. No se trata de hacer expertos. Hay muy buenos manuales en Internet para ampliar conocimientos.

Mensaje de Bienvenida en javascript

Empezamos con un simple mensaje que se muestra en una pequeña ventana una vez que se pulsa un botón:

        <html> <body> <h1>Mi primer Javascript</h1> <p> JavaScript puede hacer que una ventana contenga
        un mensaje. Para ello hay que hacer click en este boton:</p>
        <button type="button" onclick="alert('Hola, que aseess')">Haz Click aquí !</button>
        </body>
        </html>

Tenemos que la función que tratamos es onclick=”alert(‘Hola, que aseess’).

Por un lado tenemos onclick, o sea, si se hace click  y por otro lado alert, que nos provoca la apertura de una ventana con el texto que aparece entre paréntesis.

 Actividad 1:Copia el código de arriba y ábrelo con un navegador. Comprueba que funciona. Después, cambia el texto del mensaje.

Mostrar la hora con Javascript

Para mostrar la hora copiemos este código en una página html.

    <html> <body> <h1>Mi primera página con Código java</h1> <p>Pinchar aquí para mostrar la hora</p>
    <p id="demos"></p> <button type="button" onclick="mifuncion()">Prueba aquí</button> <script>
    function mifuncion() { document.getElementById("demos").innerHTML = Date();
    }</script>
    </body>
    </html>

Pasamos a explicar. Las etiquetas html ya se vieron el la sección de html. En la 4º línea tenemos un párrafo que tiene el identificador demos. Al no tener nada mas, en primera instancia no va a salir nada en esa parte de la página.

La 5º muestra un botón  que muestra la frase  Prueba aquí y que tiene un atributo  de javascript onclick ( onclick == ” al hacer click ” ) o sea que cuando se “pinche en el “boton” se ejecuta la función java mifuncion().

6º linea aparece la función java. Lo único que hace es mostrar un texto mediante la función

    document.getElementById("demos").innerHTML = Date();

En esta linea tenemos a la derecha Date(). Esta será la fecha del ordenador. A la izquierda se dice que el elemento con id “demos”· va a  mostrar  un código html igual a la fecha , por tanto en la línea anterior que estaba vacía se va a mostrar la fecha actual.

 Actividad 2:En la misma página de antes, añadir el código javascript para que muestre la hora cuando se presiona otro botón.

 Cambiar el color de texto con javascript

En esta ocasión, vamos a crear una función de forma que al hacer click en un botón, cambie el color de un texto. La función que tenemos que añadir  y el código html es:

    <p id="demos">
    Con este JavaScript podemos cambiar el color de un texto </p> <script> function cambiocolor()
    { x=document.getElementById("demos") // con esto buscamos el elemento
    x.style.color="#00ff00"; // Cambiamos el color
    }
    </script>
    <button type="button" onclick="cambiocolor()">Click aquí!</button>
    

Los comentarios, como en otros lenguajes, se añaden como notas aclaratorias del código y vienen precedidas por //  o bien , si es muy largo por /* Comentarios */.

 Actividad 3:Haz una página html con sus etiquetas . dentro de la etiqueta  body  añade el código para el cambio de color del texto. Comprueba que funciona. Añade otro  botón para cambiar otra frase.

VARIABLES EN JAVASCRIPT

Podemos declarar variables de la forma var  mivariable= “valor”; ( recordar terminar con el ; ). Algunos ejemplos son:

var edad = 20;  var edad2 = 25;

var nombre = “Juan Carlos”;

Podemos construir una función de la forma

    <script> var edad = 20; var edad2 = 25; var nombre="Juan Carlos"; document.write("Me llamo " + nombre + " y tengo
    mas de " + (edad+edad2) +"años"+"<br>"); </script>

Donde algunas  cosas añadidas son:

  1. Las palabras deben ponerse entre comillas. Los números no.
  2. document.write() permite escribir un texto. para encadenar la frase añadimos+ y si queremos sumar dos números debemos ponerlos entre ().
  3. <br> es una etiqueta html de salto de línea.

Si el número es muy grande se puede expresar como var y=123e5, que nos dará 12300000.

Tratamiento de datos por Array

Otra manera de manejar los datos, numéricos o de string, es con el uso de un array. Un array se define como una zona de almacenamiento, que almacena  una serie de variables, o dicho de otro modo, un array es una variable que a su vez contiene mas variables.  Para ello , lo primero es definirla

var coches=new Array();
coches[0]=”Seat”;
coches[1]=”Honda”;
coches[2]=”Renault”;
De esta manera, al índice 0 guardamos la variable Seat, al 1 Honda, etc. Tambien se puede hacer del tirón de forma var coches=new Array(“Seat”,”Honda”,”Renault”);, o sin especificar Array de la forma var coches=[“Seat”,”Honda”,”Renault”];
Para mostrar en pantalla, como siempre se usa document.write()  pero en este caso, como queremos mostrar una variable sólo, por ejemplo la 1, seria document.write(cars[1] );

Secuencias for de javascript

For significa para. Si tenemos una sentencia del tipo for ( i=0; i<20; i++) estamos diciendo que se ejecute unas tareas siempre que i sea menor que 20. De los valores que tenemos en el parétesis, el primero (i) define una variable interna , el segundo es la condicion ( que i sea menor que 20 ) y si se ejecuta, se incrementa la i en una unidad (i++)

Un ejemplo sería

        for (i=0;i<3;i++) { document.write(cars[i] + "<br>"); }
En este caso, como i es cero, se ejecuta el document.write y se escribe el índice cero del array de coches. Se aumenta una unidad la variable i y se vuelve a comprobar hasta que no se cumpla la condición, momento en el cual, se deja de escribir.
Un ejemplo completo es el siguiente
            <script> var i; var coches = new Array(); coches[0] = "Saab"; coches[1] = "Volvo"; coches[2] = "BMW"; for (i=0;i<coches.length;i++)
            // Se ejecuta hasta que i es menor que la longitud del array { document.write(coches[i] + "<br>"); } </script>
 Actividad 4:Crea un array que contenga al menos 7 variables diferentes. Ajusta el script de antes para que se muestre en pantalla .

 Case en Javascript

Case es igual a caso, o sea que en el caso que ocurra una coincidencia, se ejecuta una tarea, ejemplo: (case 0 x= “hoy es lunes” )

    <p>Presiona el botón para conocer en el día que vives, que estás mas
    perdido que la decencia del político, pecador de la pradera </p>
    <button onclick="funciondia()">Y el día es</button>
    <p id="midia"></p>
    <script>
    function funciondia() {var x;
    var d=new Date().getDay();
    switch (d)
    
    { case 0:
     x="Hoy es Lunes, uff que fastidio";
     break;
    
    case 1: x="Hoy es martes, ya queda menos";
     break;
    
    case 2: x="Anda, si ya es miércoles"; break; case 3: x="Ya tenemos que ir pensando que hacer el fin de. Estamos a Jueves";
    break; case 4: x="Guau, qué bonitos son los viernes"; break; case 5: x="Sábado. el cielo es mas azul "; break; case 6: x="Domingo.
    Que semana mas completa"; break; } document.getElementById("midia").innerHTML=x; } </script>

Explicamos un pocos este script

  1. Primero tomamos el valor numérico  del día con var d=new Date().getDay();
  2. Una vez que tenemos d, se pasa a la función switch (d) que “salta” a alguno de los casos indicado mas abajo, o sea si d=2, salta a la tercera linea y se muestra el Martes
  3. La última linea es para mostrar el valor de x, que es tomada a su vez en la función case. 

Advertencia. Al ejecutar este script tenemos que sale un día adelantado. Eso ocurre porque el sistema del calendario el domingo es 0, Lunes  1…

 Actividad 5:Añadir un botón mas para saber en el día que vivimos. Podéis usar el script de arriba pero modificar el case  para que salga correcto.

 Trabajando con Números en JavaScript

Con java, también podemos hacer tareas matemáticas como suma(+), resta (-), multiplicación (*), incrementar (++), etc.  La manera de tratar los números es por medio de un 64 bits de punto flotante, esto es:

  • Desde el  bit 0 al 51 se utiliza para definir el número
  • Del 52 al 62 para el exponente
  • El bit 63 se emplea para el signo ( por ejemplo 0 si es positivo y 1 para negativo)

Además maneja números en otros sistemas de numeración como el octal y el hexadecimal ( 0, 1, …9, A, B, C, D y E ). Para ello, tenemos  que preceder al número con = para octal y 0x para hexadecimal. Si tenemos dos variables como var x = 0377;  var y = 0xFF; la respuesta de ambos sería 255.

Terminamos esta sección con un sistema para validar números con la función isNaN ( estas siglas vienen de Is not a Number = Si no es un numero ). El código para añadir es:

    <p>Por favor, entre un número.</p>
    <input id="elnumero" type="text"> <script> function siesnumero() {var x=document.getElementById("elnumero").value;
    
        if(x==""||isNaN(x))
        
        { alert("No corresponde a un número válido"); }
        }</script>
        <button type="button" onclick="siesnumero()">Click aquí!</button>

Fijaros en la línea if(x==””||isNaN(x)). En este caso se comprueba si x ( valor tomado del campo del formulario ) está vacio (null ) o ( se emplea el signo || para añadir una segunda condición) no es numérico

 Actividad 6:Completar la página añadiendo un formulario para saber si el número que entramos es válido.

Entradas recientes