lunes, 23 de septiembre de 2013

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!");


No hay comentarios:

Publicar un comentario