martes, abril 03, 2012

Tutorial de desarrollo web, Parte XXVI: "Hola mundo" en JavaScript


Previously, on The CubeBlog...
Tutorial de desarrollo web, Parte XXIV: Muestra de HTML5. Editores de páginas
Tutorial de desarrollo web, Parte XXV: Introducción al JavaScript


¡Hola otra vez más! Aquí estamos otra semana más, listos para empezar a aprender a programar. ¿No os emociona empezar a realizar aplicaciones? A mí me parece de lo más apasionante (mucho más de lo que hemos hecho hasta ahora... ¡soy programador, no diseñador!), así que vamos a por ello.
¿Recordáis que en la segunda entrega del tutorial mencioné que la página que desarrollamos aquel día era un ejercicio típico en los cursos de programación? Pues bueno, ya que ahora sí que estamos haciendo un curso de programación, vamos a realizar hoy ese ejercicio. Para comenzar este curso tal vez queráis crear una nueva carpeta llamada "JavaScript" dentro de "Mis páginas webs" en pos de trabajar dentro de esa carpeta. Dentro de ella crearemos un nuevo documento HTML de nombre "hello-world.html" y le introduciremos la estructura básica de un documento HTML (ya sabéis: Doctype, Html, Head y Body). Ahora surge la primera duda: ¿dónde vamos a introducir el código JavaScript?
Al igual que ocurría con el CSS, el JavaScript se puede encontrar en distintos lugares de nuestro documento. Sin embargo, explicar de golpe todos estos métodos es mucho más complejo que con el CSS, así que iremos desvelándolos poco a poco. En primer lugar vamos a usar una nueva etiqueta de HTML (sí, aún no conocemos todas las etiquetas HTML) llamada <script>. Esta etiqueta sirve para introducir códigos de lenguajes de programación admitidos por los navegadores web y puede ir insertada indistintamente tanto en el "body" como en el "head" de nuestro documento. En esta ocasión vamos a hacerlo en el "body", de hecho, en el "body" introduciremos este código:

<script type="text/javascript">
document.write('Hola mundo');
</script>

Una vez hecho esto, guardamos y abrimos nuestra página y nos encontramos con...

¡El mismo resultado del primer ejercicio! "¿Para esto tanto rollo?" tal vez os preguntéis. Sí, realmente en estas condiciones, el JavaScript no parece nada especial, pero tampoco lo parecía el HTML al principio, ¿no?
Bien, aunque quiero creer que sois lo bastante inteligentes para deducir qué significa el código anteriormente escrito por vuestra cuenta, sería un muy mal profesor si no lo explicara, así que vamos a por ello:
  • En primer lugar hemos abierto la etiqueta "script" para indicarle que vamos a introducirle un código de programación. En su atributo "type" le hemos especificado que el lenguaje que vamos a usar es JavaScript (necesitando añadir ese "text" antes). Por supuesto, en la tercera línea lo cerramos.
  • La línea document.write('Hola mundo'); ahora mismo es la primera muestra de JavaScript que hemos tenido en este curso. En esta línea estamos dando una instrucción de JavaScript que indica al navegador (el intérprete, si recordáis lo explicado en la última entrega) que debe imprimir el texto "Hola mundo". Sin embargo, vamos a explicar varias cosas de esta línea:
    • write() es lo que en programación conocemos como un procedimiento (o función o método dependiendo del lenguaje y de su situación).
    • En JavaScript los métodos suelen ir precedidos del objeto sobre el que hay que ejecutar el método (en este caso "document", por lo tanto, el documento) con un punto que los separa.
    • Los métodos pueden necesitar que se les introduzca un dato para poder ejecutarse, en este caso lo que le hemos introducido es la frase "Hola mundo".
    • "Hola mundo" es lo que en programación conocemos como una cadena o ristra de caracteres, o string en inglés, y las strings siempre deben ir entrecomilladas. Se podría usar también comillas dobles indistintamente pero para evitar problemas con las comillas de los atributos de HTML se suelen usar comillas simples.
    • Finalmente, toda instrucción de JavaScript debe terminar en un punto y coma (;).
Respecto a la instrucción de JavaScript, no os preocupéis demasiado de entenderlo o memorizarlo todo. Funciones, ristras u objetos son conceptos que iremos viendo a lo largo del curso.
De momento todo parece muy simple pero vamos a probar algo, sintámonos juguetones: cortemos el código del "body" y peguémoslo en el "head" y veamos lo que ocurre...
¡Exactamente lo mismo! Pero, ¿cómo es posible? Bueno, todo esto tiene una explicación completamente racional aunque mejor la dejamos para cuando entendáis mejor el funcionamiento de JavaScript. Lo que quiero que hagamos ahora es introducir esta línea dentro del "body":

<p>Esto no es código JavaScript.</p>

Guardamos y actualizamos y...
Comprobamos que "Hola mundo", que a pesar de estar en el "head" se está plasmando en el "body", se sitúa por encima de la frase que hemos introducido en el "body". Lo mismo ocurrirá si la instrucción JavaScript la devolvemos a su lugar inicial y hacemos que la línea que recién añadimos se desplace hacia abajo en nuestro "body".
¿El código JavaScript siempre va a aparecer al comienzo de nuestra página, entonces? Por supuesto que no, el código JavaScript aparecerá allí donde le indiquemos, lo que hasta ahora siempre le hemos dicho a nuestro navegador que ejecute el código JavaScript antes de que haya podido leer el "p" posterior. Si le damos la vuelta a los códigos anteriormente vistos, teniendo como contenido del "body" lo siguiente:

<p>Esto no es código JavaScript.</p>
<script type="text/javascript">
document.write('Hola mundo');
</script>

Podemos comprobar como el "Hola mundo" aparece ahora después del párrafo escrito con HTML.
Finalmente, y para terminar con esta primera lección, vamos a intentar entender lo que hace realmente la función "write()" de JavaScript. Tenemos que entender que, a efectos de la página que tenemos más arriba, las dos frases son exactamente lo mismo, porque el "write" sólo escribe una frase que se transforma en HTML. Por eso, podemos sustituir nuestra función así:

document.write('<a href="http://the-cubeblog.blogspot.com">Hola mundo</a>');

Si actualizamos nuestra página, ¿aparecerá la etiqueta "a" escrita?

¡No! Y, de hecho, ¡se ha convertido en un enlace! ¿Cómo puede ser? Simple: la función del "write()" de JavaScript es escribir en nuestro documento mientras todavía es código fuente. Es decir, cuando el navegador se encuentra un procedimiento "write()" lo primero que hace es escribir la string que ha recibido y luego la interpreta como lenguaje HTML. De este modo, si la cadena contiene en su interior código HTML, éste será ejecutado por la página como tal.
Como curiosidad, fijaos en cómo se combinan las comillas simples (') del JavaScript con las comillas dobles (") del HTML. Como decía antes, en JavaScript se usan las comillas simples precisamente para que en casos como este no dé problemas (si hubiéramos usado comillas dobles, el programa creería al encontrarse con las comillas dobles de HTML que ahí se había acabado la ristra, con lo cual su ejecución fallaría). Existen formas para evitar esto, y las veremos para poder usar comillas simples también dentro de ristras, pero siempre será más recomendado usar comillas simples para envolver las ristras.

Y, con esto termina la primera entrega de JavaScript. Por supuesto, aún sabemos poco, pero lo mismo ocurrió con HTML y a día de hoy tenéis una lista tremenda de etiquetas e instrucciones CSS en la cabeza. Ahora pasemos a los ejercicios (los echabais de menos, ¿verdad?).

EJERCICIOS

Ya que esta semana el artículo ha sido hacer el "Hola mundo" igual que el del primer capítulo, también os reto a recrear los archivos del quijote y de la tabla del 3 sólo con JavaScript. Por supuesto, en las ristras de JavaScript podréis introducir HTML, pero la única etiqueta HTML que podrán estar dentro del "body" será  la etiqueta "script". No es muy difícil, lo reconozco, pero no sabemos mucho más de JavaScript.

Y nada, por ahora eso es todo. La semana que viene resolveremos esto y empezaremos a ver algo más interesante. Y, aunque no viene mucho al caso, si sólo estáis siguiendo el tutorial, les recomiendo leer el post que publicaré el próximo sábado, ya que es algo que afectará al blog al completo.

No hay comentarios: