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:
- slice(): devuelve una copia del array
- concat(): devuelve la unión dos arrays
- join(separador)
- función "contraria" a split()
- une los elementos de un array para formar una cadena de texto separados por el carácter pasado como argumento
- pop(): elimina el último elemento del array y lo devuelve
- push(valor): añade un elemento al final del array
- shift() / unshift(valor): lo mismo que los dos anteriores pero con el principio del array
- reverse(): coloca los elementos en orden inverso
Cadena
Es
cualquier texto entre comillas.
Para comparar cadenas hay que tener en cuenta que:
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...:
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
Mozilla Developer Network (MDN):
Sintaxis
w3schools:
Sintaxis
Recomendado: Usa los
tutoriales de Mozilla.
