Introducción al Javascript (3)

Los comportamientos que hemos visto ocurren en el punto donde se hace uso del script durante la carga. Lo que nos interesa es, por una parte, controlar que esas acciones ocurran bajo demanda y una vez cargada la página. Por otra parte, poder reutilizar las opciones. Para eso vamos a utilizar funciones.

Una función es un trozo de código reutilizable al que podemos llamar cuando queramos. Por ejemplo

<script>

function saluda()
{
alert("Hola");
}

saluda();

</script>

Con esto hemos definido la función saluda que no recibe ningún parámetro y que cada vez que la llamamos muestra una ventana de dialogo que dice "Hola". La llamada la hacemos con saluda();

Esto es poco útil. Si queremos que se muestre un mensaje concreto cada vez, podemos utilizar un parámetro...

<script>

function di(algo)
{
alert(algo);
}

di('Hola');

</script>

De esta forma , cuando usemos di('Hola') aparecerá una ventana de dialogo en la que pondrá Hola. Si usamos di('En un lugar de la mancha...') aparecerá una ventana de dialogo en la que pondrá En un lugar de la mancha...

También podemos utilizar varios parámetros. De esta forma:

<script>

function di(unaCosa, otraCosa)
{
alert(unaCosa+" "+otraCosa);
}

di('Hola', 'Mundo');
di('Mundo', 'Hola');


</script>

NOTA: Date cuenta de que entre las cadenas he metido otra cadena con un espacio en blanco... si no saldrían las dos cadenas pegadas. Pruébalo.

Tendrá como resultado dos ventanas, la primera dirá "Hola Mundo" y la segunda "Mundo Hola".

Ahora bien. Esto, puede ser útil para muchas cosas, pero parece más interesante si somos capaces de utilizarlo bajo demanda. Es decir, cuando se produzca un evento.

Por ejemplo, podemos utilizar el parámetro onClick en una etiqueta HTML para que se llame a una función cuando se haga click sobre el elemento.

<script>

function di(unaCosa, otraCosa)
{
alert(unaCosa+" "+otraCosa);
}


</script>

<div onClick="di('Hola','Caracola');">Dime cosas...</div>

En este ejemplo tenemos que cuando hacemos click en el DIV que contiene la frase Dime cosas... aparecerá el dialogo con la frase Hola Caracola

NOTA: Es importante tener en cuenta que cuando llamamos a una función, esta debe estar definida previamente. Eso es de vital importancia cuando tenemos que llamar a una función durante la carga. No podemos llamar a una función que no ha sido generada... PERO lo que estamos haciendo es llamar a la función cuando se hace click, esto es, después de la carga. Por lo que cualquier función del código ya habrá sido definida. En resumen, si utilizamos eventos como onClick, estos se ejecutan cuando el usuario hace click, por lo que la página ya ha sido cargada y la función ha sido definida en el código, tanto si estaba antes como si estaba después que la vinculación de la llamada al evento click.

Combinando esto con lo visto con anterioridad, podemos hacer un ejemplo en el que un bloque cambie su color de fondo cuando hacemos click sobre otros bloques...

<script>
function pintaDe(color)
{
var elemento;
elemento = document.getElementById("pizarra");
elemento.style.backgroundColor=color;
}
</script>

<div id="pizarra" style="width: 100px; height: 100px; border: 1px solid black"></div>


<span onClick="pintaDe('red')">R</span>
<span onClick="pintaDe('green')">G</span> 
<span onClick="pintaDe('blue')">B</span> 

Que si funciona aqui... tendremos:


R G B

Que vendría a ser lo mismo para el cambio de cualquier otra de las propiedades CSS. Pero que para que funcione tenemos que tener en cuenta de qué forma hay que pasar el parámetro. Es decir...

elemento.style.width espera un valor del tipo 100px
elemento.style.backgroundImage espera un valor del tipo url('imagen.jpg')
...



Comments

Introducción al HTML 5 (1)


NOTA: Esto es introducción al HTML 5, no introducción al diseño de páginas web ni al HTML en general. Es decir, asumo un mínimo de conocimiento sobre el tema.

La estructura básica de una página web en HTML 5 se ha simplificado bastante. Ahora es algo tal que así:


<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Documento sin título</title>
  </head>

  <body>
  </body>
</html>

Grandes diferencias respecto al estructura básica de XHTML...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Documento sin título</title>
  </head>

  <body>
  </body>
</html>

Que parece un tanto más complejo ¿no?

Seguimos teniendo las dos partes claves diferenciadas HEAD, que contiene todas aquellas cosas previas a la carga de la página y que son necesarias para la correcta interpretación de la misma y BODY, que es el lienzo en el que creamos nuestra página web.


Comments

Introducción al JavaScript (2)

Cuando vamos a trabajar con un lenguaje de programación, es normalmente imprescindible el uso de variables. Las variables son como etiquetas que hacen referencia a un contenido y que se pueden utilizar de manera indistinta en lugar del mismo.

Es una idea parecida a las incógnitas de matemáticas. Pongamos el siguiente ejemplo (tranqui, que verás como lo entiendes...)

X + 1 = 3
X = 2

Creo que eso lo pueden entender ¿no?. Pues solo hace falta darle la vuelta.

X = 2
X + 1 = 3

Lo que hacemos es asignar a X el valor de 2 y cuando operamos X + 1 es como si dijeramos 2+1 que equivaldrá a decir 3. Si seguimos por ese camino

X = 2
X + 1 = 3
X = 3
X + 1 = 4

Si no lo entiendes, juega con este script...

var x = 1;
document.write(x+1);

NOTA: No es necesario poner ; al final de cada línea, pero no es una mala práctica. Así mismo, si quieres cambiar el valor de x, verás que cambia el valor del resultado.

De momento, vamos a considerar los siguientes tipos de variables:

Tipo 1 - Variables a las que damos un valor forzado y legible por seres humanos

var nombre = "Pedro";
var nombreCompleto = "Pedro Jimenez";
var edad = 33;
var saldoEnElBanco = -10.56;

NOTA: Escribir las cosa de forma que "una frase con palabras" lo pongamos como "unaFraseConPalabras" es una técnica conocida como camel writting.

Estamos considerando cadenas de texto (entre comillas dobles), números enteros (positivos y negativos) y números de coma flotante (con decimales, positivos y negativos).

document.write(nombreCompleto+" tiene "+edad+" años.");

NOTA: Podemos concatenar (representar una cadena como la suma de otras cadenas) indistintamente variables de distintos tipos. Acuérdate de poner espacios donde toque...

Tipo 2 - Variables a las que el usuario da un valor a partir de una ventana (dialogo) del navegador

var nombre = prompt("Dime como te llamas", "Escribe aquí tu nombre");

NOTA: Lo que estamos usando es una función. Esta función toma dos valores (dos cadenas de texto). El primero es el texto que nos muestra en la ventana. El segundo es el valor con el que rellena el campo  de texto que aparece y que podemos editar. Las funciones, hacen cosas a partir de unos parámetros y devuelven un resultado. Esto significa que si ponemos una variable y le asignamos el valor de la función, lo que el usuario escriba se pondrá como valor de la función.

Tipo 3 - Variables más complejas que representan elementos HTML

<body>
  <div id="bloque">Esto es un bloque</div>
  <script>
    var elBloque = document.getElementById("bloque");
  </script>
</body>

No podemos actuar sobre un elemento HTML que no existe. Es por eso que antes de definir el valor de la variable elBloque hemos creado un DIV que tiene el id correspondiente.

Ahora podríamos mostrar su contenido...

alert(elBloque.innerHTML);

...escribir su contenido...

elBloque.innerHTML = "Este es el nuevo contenido";

...manipular su CSS...

elBloque.style.backgroundColor = "red";

NOTA: Para manipular el CSS necesitamos dos cosas fundamentales. La primera es SABER cómo se establecen los valores de CSS porque pasar un valor erróneo tendrá como resultado un comportamiento erróneo. La segunda es utilizar un software que autocomplete. De esta forma, cuando escribamos elBloque.style. recibiremos un listado de opciones con los nombres de los parámetros CSS que podemos modificar.

Bonus track...

En relación a la última nota. Un software que pinta bien (aunque está en desarrollo) es Brackets. Se trata de un editor opensource y gratuito que fue creado y es mantenido por Adobe.


Comments

Introducción al JavaScript (1)

El JavaScript es un lenguaje de programación interpretado (frente a los lenguajes compilados) que se utiliza para conseguir comportamientos dinámicos en las páginas web. A pesar de que puede ser utilizado desde le lado del servidor, de momento nos vamos a centrar en el lado del cliente.

El javascript será leido por el navegador de la misma manera que este va leyendo e interpretando el HTML de la página web. Esto implicará una serie de cosas que, de momento, nos dan igual. Es decir, como estamos introduciendo conceptos nos tomaremos la licencia de ir paso a paso aunque esto implique asumir cosas que más adelante no serán ciertas.

Lo primero que tenemos que entender es dónde escribimos el código de JavaScript. Para ello, y dado que es un lenguaje complementario del HTML de las páginas web (Quien dice HTML dice XHTML...). Por lo que es necesario tener conocimientos de HTML (y CSS, ya que estamos) para poder aprovechar todo esto en su justa medida.

Dicho esto, la estructura fundamental de una página web se forma a partir de una etiqueta HTML que contienen dos etiquetas llamadas HEAD y BODY, cada una de estas contendrá otras, etc.

NOTA: Por convenio (o como se diga), se utilizan minúsculas para escribir las TAGS.

<html>
  <head>
    <title>Título de la web</title>
  </head>
  <body>
  </body>
</html>

De momento, todo el JavaScript que vamos a utilizar se introducirá en BODY (eso significa que escribiremos el JavaScript entre <body> y </body>).

...
<body>
Aquí es donde escribiremos el JavaScript
</body>
...

Además, hemos de tener en cuenta que el navegador necesita saber que estamos escribiendo en JavaScript para interpretarlo correctamente. Para esto tendremos que hacer uso de la etiqueta SCRIPT. En HTML 5, el lenguaje por defecto para un script (trozo de código a interpretar) por defecto es JavaScript. Por eso, no será necesario indicarlo. Pero XHTML si que lo tendremos que poner.

NOTA: Asumimos que los seres humanos escribimos páginas web en XHTML 1.1 o en HTML 5

<body>
  <script type="text/javascript">
    // Aquí va el código
  </script>
</body>

NOTA: Cuando ponemos "//" al comienzo de una línea, eso es un comentario y no se interpretará como código. Se ignorará.

Lo primero que vamos a aprender es a "sacar" datos por pantalla. Para esto tenemos dos opciones. La primera es que el navegador nos muestre una ventana flotante con la información que queremos mostrar. La segunda es que esa información sea mostrada como parte de la página web (de ahí que lo hagamos todo dentro de BODY)

Opción 1

alert("Hola Mundo!");

Opción 2

document.write("Hola Mundo!");


Comments