Manual de JavaScript

Sintaxis básica: JavaScript embebido en HTML

Para embeber un script JavaScript en una página HTML se utiliza la etiqueta <script>, que habitualmente va en el HEAD, especificando el atributo type=text/javascript. Por ejemplo, este código captura el evento onclick y ejecuta una función Javascript:

<html>
  <head>
    <script type="text/javascript">
      <!--
      function mensaje() {
        alert("Esto es un mensaje de JavaScript")
      }
      // -->
    </script>
  </head>
  <body>
    <form name="formulario">
      <input type="button" name="but" value=1 onclick="mensaje()">
    </form>
  </body>
</html>

También es muy habitual ubicar el código JavaScript en un archivo externo (extensión .js) que se cargará con la página HTML. Para ello incluiremos en el HEAD la URL del archivo mediante la etiqueta <script> con el atributo type=text/javascript:

<html>
  <head>
    <script type="text/javascript" src="script.js">
    </script>
  </head>
  <body>
    <form name="formulario1"></p>
      <input type="button" name="but" value=1 onclick="mensaje()">
    </form>
  </body>
</html>

Siendo el contenido del fichero script.js:

function mensaje() {
  alert("Esto es un mensaje de JavaScript")
}

Comentarios

Comentario de una línea:

// comentario de una linea

Comentario de varias líneas:

/* comentario de varias
   lineas */

Si utilizamos la etiqueta <script> para embeber JavaScript tenemos que "comentar" el código situándolo entre etiquetas de comentarios HTML ya que de no hacerlo así los navegadores antiguos mostrarán el código en pantalla. Además, la etiqueta de cierre del comentario (–>) debe ir precedida por una etiqueta de comentario JavaScript (//) para que el script no tome la etiqueta de cierre HTML por una instrucción y devuelva un error:

<script type="text/javascript">
  <!--
  document.write("Hola<br />")
  // -->
</script>

Separar instrucciones

En JavaScript una instrucción termina cuando se llega al retorno de línea.
Podemos escribir varias instrucciones en una línea separándolas con punto y coma (";").

Bloques de instrucciones

Los bloques de código que integran una unidad van entre llaves y pueden anidarse:

function mensaje() {
  alert("Esto es un mensaje de JavaScript")
}

Mayúsculas y minúsculas

JavaScript es case sensitive, es decir, es sensible a mayúsculas y minúsculas, las funciones MiFuncion() y mifuncion() son distintas.

Variables

Los datos se almacenan en variables, que deben considerarse como contenedores de información: las variables son espacios de memoria que contienen un dato al que se accede mediante el nombre de la variable.

Los nombres de las variables tienen que comenzar siempre por una letra o por guión bajo ("_").
Para los nombres de las variables no pueden utilizarse palabras reservadas como return, if, var…
Cuando una variable es definida con var en un bloque acotado por llaves { } es una variable de ámbito local y solamente estará disponible en ese bloque. Una variable local podemos declararla y posteriormente asignarle un valor:
var year_inicio // variable local year_inicio = 2004
o bien podemos declararla y asignarle un valor a la vez:
var year_inicio = 2004 // variable local
Si una variable es definida sin var es una variable de ámbito global, no importando dónde ha sido declarada, y estará disponible en cualquier lugar de la página (a partir de donde ha sido declarada, no antes). Para declarar una variable global simplemente le asignamos un valor:
mes_inicio = 2004 // variable global
Si se declaran dos variables con el mismo nombre, una global y la otra local, la global será accesible desde toda la página, excepto en el área donde reina la local, que impondrá allí su valor. En general, no es buena idea declarar variables duplicadas.
Las variables pueden contener cualquier tipo de dato (números, cadenas, booleanos, objetos) y no es necesario indicar de qué tipo es una variable ya que el tipo del dato queda definido en el momento en que se le asigna un valor. Se puede cambiar el tipo de dato que contiene una variable en cualquier momento sin necesidad de redefinirla.
Para saber el tipo de dato contenido en un variable o en el resultado de una expresión disponemos del operador typeof que devuelve el tipo de dato contenido en una variable y puede devolver seis valores diferentes: number, string, object, function, boolean o undefined. Por ejemplo:
<script language="javascript">  </script>
Si tecleamos hola devuelve:
Has tecleado: hola Tipo de dato: string

Caracteres especiales

Para asignar una cadena a una variable una cadena utilizaremos comillas simples (‘) o dobles ("):
mi_variable = "Hola" otra_variable = 'Hola'

Dentro de una cadena acotada por comillas simples o dobles se puede incluir otra subcadena acotada por las otras comillas:

mi_variable = "Comillas dobles con 'simples' en el interior"
otra_variable = 'Comillas simples con "dobles" en el interior'

Si queremos incluir dentro de una cadena las mismas comillas utilizaremos el carácter de escape () para que se consideren un carácter normal:
mi_variable = "Prueba de " + ""concatenado" " + ''doble''
También escaparemos la propia barra inclinada (\), por ejemplo para incluirla en una URL:
document.write("http:\\temp")

Con los caracteres especiales, el carácter de escape () funciona al revés que en las comillas o la barra inclinada, les aporta un significado especial para que no sean considerados caracteres normales:

Caracteres especiales
Carácter	Significado
`n`	Nueva línea
`t`	Tabulador
`r`	Retorno de carro
`f`	Alimentación de formulario
`b`	Retroceso de un espacio

Operadores aritméticos

Admiten dos sintaxis, la clásica y la alternativa, combinados con el signo "=".

Operadores aritméticos
Operador	Descripción	Sintaxis alternativa
`x = z`	Asigna a `x` el valor de `z`
`+`	Suma dos números	`A += B` equivale a: `A = A + B`
`+, &`	Concatenación de cadenas: `"A" & "B" = "AB"` Devuelve una cadena aunque alguna de las variables no sea una cadena: `"AB" + 123 = "AB123"`	`A &= B` equivale a: `A = A & B`
`-`	Resta dos números	`A -= B` equivale a: `A = A – B`
`*`	Multiplica dos números	`A = B` equivale a: `A = A B`
`/`	Divide dos números y devuelve un número de coma flotante: `5 / 2 = 2.5` El separador decimal es un punto	`A /= B` equivale a: `A = A / B`
ˆ	Potencia: `xˆ2 = x²`	`A ˆ= B` equivale a: `A = A ˆ B`
`%`	Devuelve el resto de la división: `5 % 2 = 1`	`A %= B` equivale a: `A = A % B`
`x++`	Incrementa `x` en una unidad	`x++` es equivalente a `x = x + 1`
`x–`	Decrementa `x` en una unidad	`x–` es equivalente a `x = x – 1`
`z = ++x`	Incrementa `x` en una unidad y asigna `x` a `z`
`z = –x`	Decrementa `x` en una unidad y asigna `x` a `z`
`z = x++`	Asigna `x` a `z` y luego incrementa `x` en una unidad
`z = x–`	Asigna `x` a `z` y luego decrementa `x` en una unidad
`-x`	Devuelve `x` negado

Operadores lógicos

Hay tres posibles estados lógicos: verdadero (TRUE, 1), falso (FALSE, 0) y nulo (Null, undefined).

Operadores lógicos
Operador	Descripción
`&&`	`Y`, `AND`: sólo devuelve TRUE si todos los operandos son TRUE Si cualquiera de las expresiones es FALSE devuelve FALSE En el resto de casos devuelve NULL
`\|\|`	`O`, `OR`: sólo devuelve FALSE si todos los operandos son FALSE Si cualquiera de las expresiones es TRUE devuelve TRUE En el resto de casos devuelve NULL
`!`	`NO`, `NOT`: devuelve TRUE si el operando es FALSE y FALSE si es TRUE Si el operando es NULL devuelve NULL
`ˆ`	`XOR`: si una y sólo una de las expresiones es TRUE devuelve TRUE Si cualquiera de las expresiones es NULL devuelve NULL

Operadores de comparación

Devuelven verdadero (TRUE) o falso (FALSE) y se utilizan habitualmente en condicionales.

Operadores de comparación
Operador	Descripción
`==`	Devuelve TRUE si los dos operandos son iguales, sin tener en cuenta el tipo de dato `2 == "2"` devuelve TRUE
`===`	Devuelve TRUE si los dos operandos son iguales y coincide el tipo de dato `2 === "2"` devuelve FALSE
`!=`	Devuelve TRUE si los operadores son distintos
`!==`	Devuelve TRUE si los operadores son distintos en valor o en tipo de datos
`>`	Devuelve TRUE si el primer operando es mayor que el segundo
`<`	Devuelve TRUE si el primer operando es menor que el segundo
`>=`	Devuelve TRUE si el primer operando es mayor o igual que el segundo
`<=`	Devuelve TRUE si el primer operando es menor o igual que el segundo

Lo más básico