JavaScript - Sintaxis

La sintaxis de JS es muy parecida a la de Java, pero tiene sus particularidades que describiremos a continuación. Esta entrada no pretende ser extensiva y sólo se mencionarán las diferencias o métodos más básicos (y antiguos).

Generalidades

• No se tiene en cuenta los espacios en blanco y nuevas líneas (como en HTML)
• Es Case sensitive (distingue mayúsculas y minúsculas: miVariable ≠ mivariable)
• Terminar las sentencias con ';' (buena práctica)
• Comentarios empiezan con '//' o un bloque entre '/* ... */' (como Java y CSS). Es importante resaltar que esto sólo sirve en bloques JS (como el código encerrado entre etiquetas <script> o nuestro fichero .js), no en el resto del documento HTML en el que pudiéramos tener código incrustado.

Variables

No se define el tipo de variables (mejor se usa palabra clave 'var')
Se puede usar letras, números, '$' y '_', pero no puede empezar un por número

var miVariable = 0;
var mivariable = "1";
miVariable == mivariable; //false

Tipos predefinidos

Numérico (enteros y reales)

• Enteros: en formatos decimal (n10), hexadecimal (0xn16) y octal (0n8) => NO escribir números con un cero al principio o pueden ser interpretados como en octal
• Reales: parte entera y parte decimal: 25.478, 2.3e-45, -3e3

Texto (literal)

• Entre comillas simples o dobles. Si pueden cerrar dentro con comillas distintas a las que las rodean.
• Uso de carácter de escape '\' + carácter, código ASCII en octal o hexadecimal

Booleano

• Sólo dos valores: true / false

Objetos

JS tiene en la actualidad una serie de tipos de objetos genéricos y un gran número de métodos que han ido creciendo según se van desarrollando nuevas funcionalidades. Lo mejor es hacerse con una guía de referencia rápida (cheatsheet) en papel para su consulta hasta que estemos familiarizados con todas ellas. Puedes descargarte la referencia de @Manz en github. Tiene más sobre HTML y CSS. Si te son útiles piensa en colaborar con un donativo para que se sienta estimulado a seguir ayudando. Si prefieres una referencia en línea, es muy práctica la referencia de w3schools que podría tomarse como nuestra Biblia en este asunto.

Arrays
Se definen como una enumeración de elementos de cualquier tipo y valor, separados por comas y encerrados entre corchetes:

var miArray = [ "Uno", 2, true ]; //Texto, número y booleano

Se puede acceder a una posición usando su índice (en base cero): miArray[0]
Se puede conocer su número de elementos con su propiedad length.

Tienen varios métodos para trabajar con ellos:

1. slice(): devuelve una copia del array
2. concat(): devuelve la unión dos arrays
3. join(separador)
1. función "contraria" a split()
2. une los elementos de un array para formar una cadena de texto separados por el carácter pasado como argumento
4. pop(): elimina el último elemento del array y lo devuelve
5. push(valor): añade un elemento al final del array
6. shift() / unshift(valor): lo mismo que los dos anteriores pero con el principio del array
7. reverse(): coloca los elementos en orden inverso

Cadena
Es cualquier texto entre comillas.

Aunque se pueda usar como un objeto de tipo String es mejor evitarlo. Ejemplo, no usar: var cadena = new String('Hola Mundo');

Para comparar cadenas hay que tener en cuenta que:

• Operador == evalúa mismo valor (como equals en Java)
• Operador === evalúa mismo objeto (como operador == en Java)

Tiene los típicos métodos para separar, unir, recortar, pasar a mayúsculas/minúsculas, comparar el comienzo, el fin, etc... se puede ver fácilmente en la referencia.

Operadores

Son los típicos que podemos encontrar en Java, C++, etc...:

• Asignación: var miVariable = 0;
• Aritméticos: +, -, *, / y % (resto de la división). Se puede combinar con el de asignación:
  

  miVariable += 3;
  // es igual que
  miVariable = miVariable + 3;
  

• Lógicos: && (AND), || (OR) y ! (negación)
• Comparación: <, >, <=, >=, ==, !=. También existe === que comparar valor y tipo de objetos.

Estructuras de Control

De igual forma tenemos las estructuras habituales de Java:

Sentencia condicional if:

if (condicion){...}
else {...}

Bucle for y for...in(lo usamos cuando sabemos el número de elementos a recorrer):

for (inicializacion; condicion; actualizacion) {...}
// O también
for (indice in coleccion) {...}

Ojo, ver documento "for in" de MDN al respecto (itera sobre las propiedades del objeto) para recorrer los objetos de un iterable se usa for...of:

for (elemento of coleccion) {...} //Experimental

Bucle while (cuando no sabemos el número, sólo la condición):

while (condicion) {
  ...
}

Bucle do...while (igual que antes pero al menos tenemos que hacerlo una vez):

do {
  ...
} while (condicion);

Sentencia switch:

switch (valor) {

  case valor1:
    ...
    break;
    ...
  default:
    ...
    break;
}

Interrupción de bucles:

• continue: interrumpe la ejecución y continua con el siguiente elemento.
• break: aborta la ejecución del bucle y lo abandona.

Funciones

• Las funciones encapsulan código JS que realiza una tarea (procedimiento), pueden reutilizarse y pueden devolver un valor.
  

  function nombreFuncion (parametro1, parametro2, ...) {
    ...
    return resultado;
  }
  

• Crean un ámbito (scope) propio. Las variables locales se destruyen al abandonar la función.
• La función se ejecuta cuando se llama con () y los parámetros necesarios en su caso, si no, devuelve la definición de la función (no su resultado)
  

  var resultado = nombreFuncion;
  // no ejecuta la función, asigna la función ala variable resultado
  resultado = nombreFuncion();
  // ahora sí asignará el resultado porque se ha invocado
  

• Los parámetros son opcionales, no necesitan encajar perfectamente con una firma como en Java.

Funciones predefinidas

• eval(expresión): sirve para evaluar una expresión matemática que está en formato texto.
• isNaN(valor): devuelve 'true' si valor NO es un número válido (Not a Number). Cualquier operación aritmética con NaN resulta en NaN.
• parseInt(numero, base): transforma el argumento en la base pasada.
• parseFloat(numeroReal): transforma el argumento en un número en coma flotante.
• toString(numero): devuelve el número en formato cadena.
• toFixed(decimales): devuelve el número con el redondeo necesario para las posiciones decimales solicitadas.
• escape(cadena) / unscape(dirección URL): sirve para transformar caracteres no válidos en formato URL a sus equivalentes y viceversa. Están obsoletas (deprecated)

Realiza estos ejercicios para practicar:

Práctica js-sin-1

Práctica js-sin-2

Práctica js-sin-3

Práctica js-sin-4

Referencias:
Mozilla Developer Network (MDN): Sintaxis
w3schools: Sintaxis
Recomendado: Usa los tutoriales de Mozilla.