sábado, 10 de mayo de 2014

JavaScript: Primer contacto

Después de tener un concepto sobre HTML + CSS y un mínimo de noción y uso, es el momento de comenzar con JavaScript, ya que es un lenguaje esencial para el desarrollo de páginas Web. Un "Script" es un poco de código que hace algo en una página web, o sea, hace una página Web dinámica. Este código está hecho con un lenguaje llamado JavaScript inventado por Netscape. Las cosas que pueden hacerse con JavaScript van mucho más allá de lo que permite el lenguaje HTML, pero también es mucho más difícil su aprendizaje. No obstante lo que aprenderemos en este blog será bastante simple. En esta entrada vamos a desarrollar un programa partiendo del siguiente enunciado:


Como podemos observar, necesitamos pedirle al usuario 4 datos, uno de ello será un nombre y los otros tres serán las notas, dichos datos tendremos que procesarlos y la salida por pantalla dependerá del resultado. La forma de procesarlos será mediante funciones "if", si cumple la función mostrará un resultado, sino, mostrará otro. Para hacerlo un poco más interesante, lo voy a realizar con funciones propias, o sea, una función para calcular la media, otra función para calcular la nota máxima y otra función para calcular la calificación de la nota media, todo ello concatenando variables y cadenas de textos. El resultado del script seria algo parecido al siguiente:



Por último voy a explicar un poco el código de abajo, los scripts deben de comenzar mínimamente con "<script>" y terminar con "</script>". La sintaxis de cada función está indicada por las llaves de apertura y cierre {}, todas las variables de su interior son privadas, o sea que sólo son usadas dentro de la función. A dichas funciones se les pasa unos valores iniciales dentro de los (), normalmente se usa funciones para calculos matemáticos, como en el ejemplo de abajo. JavaScript está lleno de funciones, además de las que podemos desarrollar nosotros, trae incorporadas muchas más como writeln(). Para llamar a una función lo único que tenemos que hacer es escribir el nombre de la función y los valores que necesite. Para concatenar variables se utiliza el símbolo "+" que es el mismo que se utiliza para sumar dos variables, al recibirlas con la función prompt() los trata como "strings" así que debemos de utilizar la función parseInt() para convertirlas en números enteros. Para terminar se usa document.writeln() para imprimir por pantalla, "document" sería el objeto, nuestra propia página y sobre ella realizamos la función writeln(), o sea, escribir el valor que le indiquemos, ya sea una variable o una cadena entre comillas.

<script type="text/javascript">

   function media2(x, y) {
     var media;
     media  = (x + y) / 2;
     return media;
   }

   function maximo2(x, y) {
     if(x > y) {
        return x;
     } else {
        return y;
       }
   }

   function nota(n) {
     var calificacion;
        if(n < 5) {
           calificacion = 'suspenso';
     return calificacion;
        } else {
           if (n <= 8) {
              calificacion = 'notable';
              return calificacion;
        } else {
              calificacion = 'sobresaliente';
              return calificacion;
        }
        }

   }
 var nombre = prompt('ingrese su nombre:', 'Pepe');
 var nota1 = parseInt(prompt('ingrese su nombre:', '6'));
 var nota2 = parseInt(prompt('ingrese su nombre:', '7'));
 var nota3 = parseInt(prompt('ingrese su nombre:', '2'));

 document.writeln ('Hola ' + nombre + '<br>');
 var media = media2(nota1, media2(nota2, nota3));

 if ( media > 5 ) {
    document.writeln ('Felicidades <br> Has aprobado con un ' + media.toFixed() + ' de media.<br>');
 } else {
    document.writeln ('Lo siento <br> Has suspendido con un ' + media.toFixed() + ' de media.<br>');
 }

 var maximo = maximo2(nota1, maximo2(nota2, nota3));

 document.writeln ('La nota m&aacute;s alta es un ' + maximo + '<br>');

 var nombrenota;
 nombrenota = nota(media);
 document.writeln ('Tu nota ser&iacute;a de ' + nombrenota);

</script>