Esta serie de artículos sobre JavaScript está orientado a personas que ya saben programar en algún lenguaje o ya tienen conocimentos de Javascript. Está enfocado como un recordatorio de los principales comandos y características. Explicar todo sobre JavaScript sería un trabajo muy extenso, fuera de mi alcance y además ya existen libros muy buenos. No debemos nunca dejar de consultar la propia documentación oficial de Javascript, https://developer.mozilla.org/es/docs/Web/JavaScript, bastante clara y completa.
Se puede insertar HTML de las siguientes maneras:
Con un enlace al archivo .js, ubicado generalmente en la cabecera <HEAD> dentro del código HTML.
<script src="codigojavascript.js"> </script>
Entre medio del código HTML en el cuerpo <BODY>
<script>
let x=5;
alert ('Valor de X: ' + x);
</script>
Se pueden comentar líneas sueltas con// o bloques con /* */.
<script>
/* Bla bla bla
bla bla bla */
let x=5;
alert ('Valor de X: ' + x);
// Esto es una línea comentada
</script>
En JavaScript las variables se declaran con let o var. La diferencia principal entre declarar
una variable de una forma o otra es que el "alcance" o "ámbito" es diferente. En los inicios de Javascript
solo existía la declaración var. Mas tarde, apareció let que, como veremos pronto, nos ayuda a
evitar posibles errores difíciles de detectar. Recomendación: mejor usar let.
En JavaScript declarar variables no es obligatorio. Podemos forzar la declaración de variables poniendo
"use strict";en la primera línea de código. En el modo "estricto" no declarar una variable dará un error. Consejo:
Mejor declarar las variables para tener buenas costumbres.
//Ejemplo de mala práctica
"use strict";
x=5;
Esto dará el error Uncaught ReferenceError: x is not defined. Si eliminamos "use strict";funcionará
sin errores pero estamos escribiendo código de manera obsoleta. El siguiente código sería lo correcto:
"use strict";
let x=5;
De una manera simplificada podemos decir que el alcance de una variable es el bloque donde fue declarada y los bloques anidados si los hubiera.
Una variable declarada letoconstfuera del bloque será global y reconocida en todos
los bloques del archivo. Por el contrario una variable declarada dentro de bloque será local y de alcance de su
bloque y sus anidados.
let counter = 100;
console.log(counter); // -> 100
{
let counter = 200;
console.log(counter); // -> 200
}
console.log(counter); // -> 100
Una variable declarada const no puede cambiar de valor una vez declarada:
const x;
x=1;
x=3;
->Error
Se declaran con la formafunction nombreFuncion() {...}
function testFunction() {
console.log("Hola Mundo");
}
Para invocarla:
testFunction();
Las funciones deben declarse al principio del archivo para que el interprete JavaScript las lea y así reconozca antes de ser invocadas. Una llamada a una función por debajo de la invocación dará error.
Es el dato almacenado en una variable. En x=10el literal es 10. Los literales pueden ser cualquier tipo:
numeros, string, array, objetos, boolenos,...
Por defecto todas las variables numéricas son tratadas en base 10 o sistema decimal. Podemos trabajar en otros sistemas
añadiendo un prefijo al número. Para binario se usa 0b, para octal0oy para hexadecimal0x
let a = 10; // decimal - default.
let b = 0x10; // hexadecimal b = 16 en hexadecimal
let c = 0o10; // octal c = 8 en octal
let d = 0b10; // binary d = 2 en binario
El caracter \, barra invertida o backslash, "escapamos" caracteres.
console.log ('hola \'mundo\' '); // -> hola 'mundo'
Si se trata de 2 variables numéricas realiza la operación matemática como era de esperar
La suma de 2 variables string o de dos cadenas alfanuméricas realiza la concatenación de las dos cadenas de texto.
Con variables no numéricas todo lo que no sea sumar (que concatena realmente) dará error NaN"Not a Number"
console.log ("A"+"B"); // -> AB console.log ("A"-"B"); // -> NaN console.log (2+2); // -> 4
Los literales entre comillas o comilla simple son tratados como texto aunque contengan números.
console.log('3' + '3'); // -> 33
La suma de un número y texto se autoconvierte todo como si fuera texto con lo que el resultado será una concatenación.
console.log(4+'4'); // -> 44
console.log('4'+4); // -> 44
En cambio la resta convertirá todo a tipos numéricos
console.log(4 - '4'); // -> 0
console.log('4' - 4); // -> 0
En JavaScript, un primitive (valor primitivo, tipo de dato primitivo) son datos que no son un objeto y además son inmutables. Hay 6 tipos de datos primitivos: string, number, bigint, boolean , undefined, null y symbol.
Los primitivos se pueden transformar temporalmente en objetos con unos métodos para operar con ellos pero sin alterar el valor del primitivo. Solo obtenemos datos, el primitivo original sigue inmutable. Vamos a verlo con ejemplos:
let txt="hola";
//
console.log(txt.toUpperCase()); // -> HOLA
console.log(txt); // -> hola
//
let character = texto.charAt(2);
console.log(character); // -> l
Como ves, la variable no se modifica pero si obtenemos valores transformados.
Además de con literales se pueden crear variables usando funciones de primitivas.
const str = String("qqq");
const num = Number(123);
const bool = Boolean(true);
console.log(str); // -> qqq
console.log(num); // -> 123
console.log(bool); // -> true
Devuelve el tipo de dato contenido en una variable. Puede ser:
let x = 2
let y = "abc"
let z = true;
console.log(typeof x); // -> number
console.log(typeof y); // -> string
console.log(typeof y); // -> boolean
// Con funciones de primitivos el resultado es igual
let str = String("xyz");
const num = Number(123);
console.log(typeof(str)); // -> string
console.log(typeof(num)); // -> number
La suma de un número y texto se autoconvierte todo como si fuera texto. En cambio la resta se autoconvierte a número.
const str1 = 34 + "1";
console.log(str1); // -> 341
console.log(typeof str1); // -> string
const str2 = 10 - "1";
console.log(str2); // -> 9
console.log(typeof str2); // -> number
Los objetos y los arrays se consideran datos complejos.
Un objeto es una estrucutura para guardar una colección de datos con nombre y valor ( key y value). Para usar las propiedades se usa
nombreobjeto.nombrepropiedad.
Esto sería un tipo de objeto muy simple para tener una primera toma de contacto. En Programación Orientada a Objetos los objetos además de propiedades, tienen constructores, métodos, interfaces,... Por el momento, nos quedamos con este sencillo objeto.
let miObjeto = {
num: 123,
str: "ABC"
};
console.log (miObjeto.num); -> 123
console.log (miObjeto.str); -> 123
console.log (typeof miObjeto); // -> object
Se pueden añadir propiedades a posteriori de la declaración.
miObjeto.booleano = true;
console.log (miObjeto.booleano); // -> true
Parecida al objeto pero solo tiene valores. Puede contener datos de cualquier tipo, incluso objetos.
let colores = ["rojo", "amarillo", "azul", "verde"];
console.log(colores[0]); // -> rojo
console.log(colores[2]); // -> azul
colores[0] = "negro";
console.log(colores[0]); // -> negro
// declaración de array vacío
let emptyArray = [];
console.log(emptyArray[0]); // -> undefined
//array de objetos
let x = [
{
num: 123,
str: "ABC"
},
{
num: 456,
str: "DEF"
}
];
console.log (x[0].num); //-> ABC
console.log (x[1].str); //-> DEF
En Javascript está permitido que el array guarde diferentes tipos de datos. En los lenguajes tipados como Typescript o Java eso no es posible.
let values = ["Coche, false, 1000];
Se pueden hacer arrays multidimensionales. Un array de 2 dimensiones tendrá un índice para filas y otro para columnas. Uno de 3 dimensiones tendrá además un índice para profundidad. Puedes crear de 4 o mas dimensiones pero no se me ocurre ninguna utilidad práctica. Eso es ya un terreno para expertos matemáticos.
let miArray2D = [["rojo","verde","azul"], ["10","20","30"]];
console.log (miArray2D[0]); //-> ["rojo","verde","azul"]
console.log (miArray2D[1][2]); //-> 30
Un array puede crecer en tiempo de ejecución aunque ya esté declarado con un número de elementos.
miArray2D[2] = ["coche","moto","camion"];-> Ahora el multiarray pasa de contener 2 a 3 arrays.
Recuerda que el índice de elementos empieza por 0. En informática el 0 casi siempre está presente para representar el primer elemento de algo mientras que en otros entornos empezamos a contar por 1.
Algunos ejemplos de métodos que se usan con arrays:
lenght
let colores = ["rojo", "verde", "azul", "negro"];
console.log ("lenght ", colores.length); -> 4 ( el array tiene 4 elememntos)
indexOf
Devuelve el índice del elemento siendo 0 el primer elemento. Si no existe devuelve -1.
console.log(names.indexOf("rojo")); // -> 0
console.log(names.indexOf("negro")); // -> 3
push
Añade un elemento al final del array.
colores.push("naranja"); -> naranja ocupa posición 4
unshift
Añade un elemento al comienzo del array.
colores.unshift("rosa"); -> rosa ocupa posición 0 y desplaza el resto de elememntos.
pop()
Borra el último elemento. Importante poner paréntesis. Otros métodos como lenght van sin paréntesis.
colores.pop();
shift()
Borra el primer elemento, índice 0. Importante poner paréntesis. Otros métodos como lenght van sin paréntesis.
colores.shift();
reverse()
Invierte el orden de la lista.
colores.reverse(); -> Si antes era rojo, verde, ... Pasa a ..., verde, rojo
slice()
El método slice() devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.
Si tiene un parámetro positivo cogerá todos los elementos a partir de ese índice.Con 0 desde el inicio hasta el final
let colores = ["rojo", "amarillo", "azul", "verde"]; let col1 = colores.slice (2); console.log (col1); -> azul, verde
Si tiene 2 parámetros el primero es el inicio y el segundo el final menos 1.
let colores = ["rojo", "amarillo", "azul", "verde"];
let col2 = colores.slice (1,3);
console.log (col2); // amarillo, azul
Si el segundo es negativo quitará ese número de elementos del final. Este es más confuso. En este ejemplo el primer argumento 0 hace que coja todos pero por otro lado el argumento -2 le quita los dos últimos elementos.
let col3 = colores.slice (0,-2);
console.log (col3); -> azul, verde
concat
Concatena dos arrays
let num1 = [ 0,1,3,4,5,6 ];
let num2 = [ 7,8,9 ];
let total = num1.concat(num2);
console.log (total); // -> 0, 1, 2, 3, 4, 5, 6, 7, 8, 9