Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

martes, 10 de junio de 2014

Eventos en JavaScript

En programación, se considera evento a toda interacción del usuario con el sistema: pulsar una tecla, maximizar una ventana, mover el ratón, pasar el ratón por encima de un componente, etc. Cada elemento tiene sus propios eventos.

En este post trabajaremos tres de los eventos más utilizados: onclick,  ondblclick, onmouseover; que se corresponden con los eventos clic, doble clic y pasar el ratón por encima de ...

Para ilustrar el funcionamiento de estos eventos en JavaScript crearemos una sencilla página web con tres imágenes, cada una de ellas respondiendo a uno de estos eventos.

Primeramente creamos la página con las imágenes:
<html>

    <head>
        <title></title>
        <script type="text/javascript">
        </script>
    </head>

    <body>
        <img src="http://.../libro.jpg">
        <img src="http://.../cuaderno.jpg">
        <img src="http://.../sacapuntas.jpg">
    </body>

</html>

Para que una imagen responda a un evento, debe incluir dentro de su etiqueta el nombre del evento y el código que ha de ejecutar cuando aquel se dispare. Así, en nuestro ejemplo, haremos que la primera imagen del libro responda el evento onclick mostrando el mensaje: "Has hecho clic sobre un libro" con el siguiente código:

<img src="http://.../libro.jpg" onclick="alert('Has hecho clic sobre un libro')">


La segunda imagen responderá al evento doble clic (ondblclick):

<img src="http://.../cuaderno.jpg" ondblclick="alert('Has hecho doble clic sobre un cuaderno')">



Y la última imagen responderá al evento de sobrevolar el ratón (onmousevoer):

<img src="http://.../sacapuntas.jpg" onmouseoverclick="alert('Has pasado el ratón por encima de un sacapuntas')">


domingo, 8 de junio de 2014

Entrada de datos en JavaScript

El método prompt()


En un post anterior vimos cómo mostrar datos por pantalla. Pero cuando necesitemos que el usuario introduzca información usaremos el método prompt().

La sintaxis del método prompt() es la que se muestra.

  prompt("algún texto","texto por defecto");

El primer texto dentro del paréntesis es el que servirá para pedir al usuario la información que se le requiere. El segundo texto es opcional, y en caso de rellenar este campo será el texto que por defecto le salga al usuario dentro del área de texto que se le ofrece para rellenar.

En el siguiente ejemplo se le pregunta al usuario por su nombre:

  prompt("Introduzca su nombre");



En este otro ejemplo se le pregunta al usuario por su país de origen y se ofrece como texto por defecto "España". El texto por defecto se utiliza cuando se prevé que la mayoría de los usuarios van a escribir ese texto, de este modo, al aparecer el texto ya escrito el usuario sólo tiene que validarlo pulsando Aceptar, aunque siempre lo puede cambiar:

  prompt("Introduzca su país de origen","España");



sábado, 7 de junio de 2014

Variables en JavaScript

¿Qué es una variable?


En cualquier lenguaje de programación una variable es un espacio en la memoria de nuestro ordenador para guardar datos. Podríamos verla como una cajita que utilizaremos para guardar cosas.

Como a lo largo del diseño de un programa es habitual crear varias variables; cada una de ellas debe tener un nombre único que la identifique. El nombre de la variable lo elige el programador libremente. Aunque es recomendable que dicho nombre indique para qué se usa esa variable. Así, deberíamos huir de nombres como abc, etc., y usar aquellos del tipo: edadnombrefecha_nacimiento, que nos indica el significado del dato que van a guardar dentro.

Es muy importante también tener en cuenta que JavaScript hace distinción entre mayúsculas y minúsculas, por tanto no es lo mismo un variable llamada edad que otra llamada Edad.

¿Cómo se crea una variable?


Al proceso de creación de una variable se le conoce como declaración. La declaración de variables en JavaScript se hace anteponiendo la palabra reservada var al nombre de la variable elegido por nosotros. Así, por ejemplo, el siguiente código declara las variables nombre y edad:

  var nombre;
  var edad;

Las dos instrucciones anteriores pueden reescribirse también en una sola:

  var nombre, edad;

El uso del punto y coma al final de la instrucción es opcional en JavaScript si cada instrucción la escribimos en una línea diferente. Si queremos escribir varias instrucciones en una misma línea, éstas tendrán que ir separadas necesariamente por punto y coma.

No obstante, en este blog se usará siempre el punto y coma al finalizar cada instrucción, con ello nos estaremos acostumbrando a lo que en otros lenguajes de programación como Java o C es una práctica obligada.

¿Cómo se asigna un valor a una variable?


Al proceso por el cual introducimos un dato en una variable previamente declarada se le conoce como asignación de un valor a una variable. En JavaScript, como en la mayoría de los lenguajes de programación, se utiliza el signo "=" como operador de asignación.

En los ejemplos que siguen se asignan diferentes valores a diferentes variables previamente declaradas.

  nombre = "David";
  edad = 23;

Como vemos la palabra David se ha encerrado entre comillas. Todas las expresiones formadas por caracteres que hayan de interpretarse como texto deben ir siempre entre comillas.

La declaración y asignación de valores pueden hacerse a la misma vez en una misma línea mediante:

  var nombre = "David";
  var edad = 23;

sábado, 31 de mayo de 2014

Hola mundo en JavaScript

Una vez que conocemos cómo insertar nuestro código en una página web (post anterior), veamos cómo mostrar en pantalla el tradicional "Hola mundo".

En JavaScript tenemos dos formas de mostrar información por pantalla, una es el método document.write() que escribe en la pantalla principal de la página web:

<script type="text/javascript">

  document.write("Hola mundo"); 

</script>



La otra es mediante el método alert() que muestra el texto en una ventana emergente con un botón de Aceptar.

<script type="text/javascript">

  alert("Hola mundo"); 

</script>



martes, 6 de mayo de 2014

Insertar JavaScript en páginas HTML

Como comentamos en el post anterior, los programas JavaScript van insertados o embebidos en en código HTML de las páginas web. Por ello, antes de mostrar como se hace esta inserción hemos de conocer como mínimo la estructura básica de una página web.

Toda página web debe tener al menos la siguiente estructura:

<html>

    <head>

        <title></title>
    </head>

    <body>


    </body>


</html>

Como vemos está compuesta por una serie de etiquetas. Cada etiqueta de apertura <...>, tiene su correspondiente etiqueta de cierre </...>, marcando de este modo inicio y fin del elemento correspondiente.

Dentro de un documento html podemos diferenciar una cabecera, definida por las etiquetas <head> y </head>, y un cuerpo o body definido entre <body> y </body>.

En el body suele colocarse el contenido de la página web, mientras que en la cabecera se inserta información relativa a la página que no es propiamente contenido.

Nuestros scripts deberán colocarse en la cabecera y deberán ir encerrados entre las etiquetas script que se muestran a continuación:

<html>

    <head>
        <title></title>
        <script type="text/javascript">

        </script>

    </head>

    <body>

    </body>


</html>

La propiedad type de la etiqueta script deberá inicializarse con la cadena "text/javascript".

Ahora sí estamos listos para empezar a escribir código, así que adelante con el siguiente post.

domingo, 4 de mayo de 2014

¿Qué es JavaScript?


JavaScript (abreviadamente "JS") es un lenguaje de programación que se caracteriza por:

Es un lenguaje de script, o también llamado orientado a documento.

Los lenguajes de script han sido pensados para que sus programas vayan insertados en otros documentos. En el caso de JavaScript, sus programas deben ser insertados o embebidos dentro de páginas web las cuales están escritas en HTML. No es posible desarrollar un programa con JavaScript que se ejecute fuera de una página web.

De este modo, JavaScript extiende las limitadas capacidades del HTML y hace las páginas web más dinámicas e interactivas.

Otros ejemplos de lenguajes de script son:
  • JScript: versión de Microsoft del estándar de JavaScript.
  • ActionScript: Lenguaje de Macromedia para la aplicaciones Flash.

Es un lenguaje de programación interpretado no compilado.

Los lenguajes compilados, una vez redactado su código, deben ser traducidos (compilados) al llamado código máquina para que puedan ser ejecutados. Por el contrario, los lenguajes interpretados como JavaScript no precisan de esta compilación previa puesto que el navegador va ejecutando el código línea por línea.

Breve historia

El lenguaje JavaScript surge por la necesidad que en los años 90 existía de dar velocidad a determinadas páginas web que empezaban a incluir formularios complejos. Hasta ese momento las comprobaciones las hacía el servidor y eso ralentizaba mucho el proceso.

Brendan Eich, que trabajaba en Netscape, pensó que estos problemas podían solucionarse incorporando al navegador pequeños programas para que fueran ejecutados por éste. Eich llamó a su lenguaje LiveScript.

Sin embargo, la empresa de Eich se alió con Sun Microsystems para el desarrollo de un nuevo lenguaje de programación: Java. Aprovechando que Java era la palabra de moda en aquella época renombró su lenguaje como JavaScript para aprovechar el tirón mediático que el otro lenguaje tenía.

Todavía hoy existe cierta confusión respecto a estos dos lenguajes, pues mucha gente piensa que JavaScript es la versión de Java para páginas web.

Similitudes y diferencias con otros lenguajes

JavaScript tiene muchas similitudes sintácticas con Java, sin embargo funciona de un modo totalmente diferente.

JavaScript es un lenguaje mucho más pequeño que Java, más fácil de aprender y también menos potente.

JavaScript es un lenguaje basado en objetos, mientras que Java es un lenguaje orientado a objetos.

Para programar en JavaScript nos vale un simple editor de texto, mientras que para escribir código Java es necesario un entorno integrado de desarrollo y un compilador específico.

martes, 12 de noviembre de 2013

La importancia de saber programar

Por fin se empieza a oír hablar de la importancia de saber programar y de la conveniencia de enseñar a hacerlo desde la escuela. En efecto, mientras aquí en España seguimos sumidos en el eterno debate: religión vs educación para la ciudadanía, un numero creciente de países se suma a la inclusión de la enseñanza de la programación en sus currículos educativos. Han comprendido los beneficios que implica para los jóvenes aprender a programar desde temprana edad. Resulta penoso, que con tantos cambios normativos en materia de educación en España, ninguno haya servido para introducir apuestas innovadoras en este sentido. Al contrario, a ojos de nuestros legisladores la apuesta es reducir carga horaria en las áreas de Tecnología, tanto en la enseñanza secundaria como en el Bachillerato.

¿Qué beneficios nos aporta saber programar?

El beneficio más evidente es el de que los jóvenes formados en esta práctica tendrán más fácil convivir en su futuro con multitud de dispositivos programables y serán autónomos a la hora de desarrollar sus propias aplicaciones. España es aún un país consumidor de contenidos digitales, sean éstos juegos o de otro tipo; pero, en ciertos países ya están apostando por crear productores de contenidos digitales, con todos los beneficios que esto conlleva, no sólo para el creador de la aplicación en sí, sino en general, para todo el tejido empresarial que es capaz de comercializar sus productos en un mercado potencial de millones de clientes en un mundo como el de Internet en el que no existen las fronteras políticas.

Pero el mayor de los beneficios es el cambio que produce en nuestra forma de pensar. Programar consiste básicamente en desmenuzar una tarea dada en microtareas que irán siendo ejecutadas una a una hasta la resolución del problema en sí. Con ello, el joven programador desarrolla la facultad de sistematizar los problemas que se les plantea, sean éstos de índole informático o no, y aprende a abordarlos haciendo uso de la lógica y del orden, teniendo así una mayor posibilidad de éxito.

Los que tuvimos la suerte de hacernos con alguno de los primeros ordenadores que aparecieron, Spectrum, Commodore 64, etc. (el mío no era tan conocido: Spectravideo), nos enfrentarnos a una tarea dura pero gratificante. Puesto que no existían aplicaciones para consumirlas, tuvimos que crearlas. Recuerdo haber hecho pequeños programas en Basic que resolvían determinantes, ecuaciones de 2º grado, traductores morse, juegos de coches que esquivaban obstáculos, etc.

Spectravideo 328

Recuerdo haberme encontrado también infinidad de problemas que me paraban en el desarrollo de los programas, y que abordaba una y otra vez de diferente forma, hasta conseguir hacer lo que quería. Programar era para mí el mejor de los pasatiempos, porque sólo exigía lógica pura, al programar nada se da por hecho, hay que dejar prevista una acción para cada posible suceso. La máquina no se equivoca nunca, se limita a obedecer (ejecutar) fielmente las órdenes (instrucciones) que recibe de tí. Eres tú el que tienes que revisar una y otra vez tu planteamiento. Sin duda, aquella experiencia ha dejado huella en mi forma de abordar los problemas en la vida.


¿Qué pasos se están dando en otros países?

En Estados Unidos, cuna de grandes personajes en el mundo de la programación, una de cada diez escuelas enseñan a escribir código a sus alumnos. Esta cifra no es suficiente para la fundación Code.org, por ello han pedido a personajes de la talla de Bill Gates o Mark Zuckerberg, fundador de Facebook, que les apoyen en un vídeo contando sus propias experiencias:


¿Qué lenguajes de programación son los más adecuados para enseñar en los centros educativos?

A tempranas edades está muy de moda Scratch, una aplicación destinada a la creación de juegos para la web mediante una sencilla interfaz gráfica ideada por el Massachusetts Institute of Technology (MIT).



En en educación secundaria, yo apostaría por JavaScript por tres razones fundamentales: en primer lugar no requiere de un entorno de desarrollo complejo, puede escribirse código en cualquier editor de textos, en segundo lugar porque los programas desarrollados son ejecutables sobre cualquier sistema operativo y en tercer lugar porque la sintaxis de este lenguaje es muy similar a la de Java, con lo que aquellos que quieran continuar programando en el futuro se encontrarán el camino allanado en el estudio de este lenguaje, uno de los más populares en este momento. Además Android, utilizado para la creación de aplicaciones móviles, también está basado en Java por lo que tienen abierto el camino al desarrollo de aplicaciones móviles. En este blog se muestran algunos ejemplos de programación en JavaScript.


Otro lenguaje de programación muy interesante es GAMBAS. Gambas es un lenguaje de programación libre derivado de BASIC e inspirado en Java. De ahí que el término Gambas signifique Gambas Almost Means BASic. Como se ve es un acrónimo recursivo ya que en la propia definición del acrónimo se hace referencia al mismo. En este blog puedes encontrar algunos posts en los que se muestran algunos ejemplos de programación con este lenguaje.


Por último, para el mundo de las aplicaciones móviles, y si se dispone de la infraestructura necesaria para la instalación de las plataformas de trabajo, está App-inventor, lenguaje basado en piezas encajables similar a Scratch desarrollado también por el MIT.