Sintaxis javascript#

Logo JavaScript

Sintáxis básica de JavaScript

Elementos básicos del lenguaje#

Instalación#

  • Instalación: No se requiere, con un navegador compatible como Chrome o Firefox es suficiente.

  • Extensión de archivos: .js

Comentarios#

  • Comentarios de una sola línea:

1// comentario de una sola linea

  • Comentarios multilínea:

1/* Comentario
2multilinea
3en Javascript */

Entrada y salida estandar#

Datos de entrada y salida a través de la consola y/o el navegador.

1// Ejecutar ventana emergente:
2alert('Soy un mensaje emergente');
3
4// retorno en consola:
5console.log("Mensaje desde consola");
6
7// Entrada desde ventana emergente:

Estructura en javascript#

  • Código javascript puro:

1// Ejemplo de carga Javascript cuando todo el DOM está listo:
2document.addEventListener('DOMContentLoaded', () => {
3        alert("Soy una alerta JavaScript");
4    });

  • código javascript junto a HTML:

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>Document</title>
 8</head>
 9<body>
10    <p>Soy un párrafo</p>
11    <script type="text/javascript">
12        document.addEventListener('DOMContentLoaded', () => {
13            alert("Soy una alerta JavaScript");
14        });
15    </script>
16</body>
17</html>

  • Cargar JavaScript en HTML:

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7    <title>Document</title>
 8</head>
 9<body>
10    <p>Soy un párrafo</p>
11    <script src="script.js"></script>
12</body>
13</html>

Concatenación#

Concatenación de variables y cadenas se realiza con +

1var nombre = "Guillermo";
2
3// Concatenación básica:
4console.log("Te llamas " + nombre);
5
6// uso de templates:
7console.log(`te llamas ${nombre}`);

Variables y tipos de datos#

  • Declaración, asignación y tipo:

 1// declaración y asignación variable global:
 2var consola = "PlayStation";
 3
 4// variable local de alcance limitado:
 5let consola = "PlayStation";
 6
 7// tipos:
 8var cadena = "Cadena de texto";
 9var entero = 150;
10var decimal = 10.25;
11var booleano = true;

Atención

var se utiliza comunmente para declarar variables que se van a usar en cualquier parte del codigo, esto implica que pueden suceder posibles errores y conflitos si se agranda el código. Por ello se recomienda el uso de let especialmente en funciones y otros ámbitos para limitar su uso en otras partes.

  • Constantes:

1const nacimiento = 1987;

Operadores#

Operadores aritméticos#

  • Operaciones aritméticas:

1var suma = 10 + 20;
2var resta = 10 - 10;
3var multiplicar = 10 * 2;
4var division = 6 / 2;
5var resto = 10 % 3;

  • Incremento y decremento:

1// Incremento
2var dato = 10;
3dato++
4// decremento:
5dato--

  • Asignar operación:

1suma += 10 ;
2resta -= 10;
3multiplicar *= 10;
4division /= 6;
5resto %= 10;

Operadores relacionales#

Validación entre dos números.

  • Mayor que: >.

  • Menor que: <.

  • Mayor o igual que: >=.

  • Menor o igual que: <=.

  • Igual que: ==.

Operadores lógicos#

Expresiones de operaciones lógicas.

  • and: &&.

  • or: ||.

  • not: !.

Estructuras de control#

Condicional if#

  • if sencillo:

1// variables:
2var numA = 11;
3var numB = 15;
4
5// comprobar cual es mayor:
6if(numA > numB){
7    console.log("Número A es mayor que número B");
8}

  • if / else:

 1// variables:
 2var numA = 11;
 3var numB = 15;
 4
 5// comprobar cual es mayor:
 6if(numA > numB){
 7    console.log("Número A es mayor que número B");
 8}else{
 9    console.log("Número B es mayor que número A");
10}

  • else-if:

 1// variables:
 2var numA = 15;
 3var numB = "15";
 4
 5// comprobar cual es mayor:
 6if(numA > numB){
 7    console.log("Número A es mayor que número B");
 8}else if(numA === numB){
 9    console.log("Son idénticos");
10}else if(numA == numB){
11    console.log("Son parecidos pero uno es String");
12}else{
13    console.log("Número B es mayor que número A");
14}

Atención

En este ejemplo se observa una === ya que en JavaScript al comparar dos números con == si uno es cadena devuelve true la condición, en este caso si quitamos las comillas de numB se cumplirá la condición === que está antes.

  • Operador ternario:

1// variables:
2var numA = 11;
3var numB = 15;
4
5// comprobar cual es mayor:
6var total = numA > numB ? "Número A es mayor que número B" : "Número B es mayor que número A";
7
8console.log(total);

Condicional Switch#

Estructura de un switch:

 1var nota = 6;
 2
 3// asignamos la variable a evaluar dentro del switch:
 4switch(nota){
 5    // Vamos asignando casos a evaluar:
 6    case 0:
 7        console.log("Suspenso");
 8        break;
 9    case 1:
10        console.log("Suspenso");
11        break;
12    case 2:
13        console.log("Suspenso");
14        break;
15    case 3:
16        console.log("Suspenso");
17        break;
18    case 4:
19        console.log("Suspenso");
20        break;
21    case 5:
22        console.log("Suficiente");
23        break;
24    case 6:
25        console.log("Aprovado");
26        break;
27    case 7:
28        console.log("Bien");
29        break;
30    case 8:
31        console.log("Notable");
32        break;
33    case 9:
34        console.log("Notable Alto");
35        break;
36    case 10:
37        console.log("Sobresaliente");
38        break;
39    default:
40        console.log("No reconozco la nota");
41}

Bucle for#

  • for básico:

1// introducir un valor:
2var tabla = prompt("Introduce una tabla");
3
4// recorrer valor e incrementar la tabla
5for(let i = 1; i <= 10; i++){
6    console.log(`${tabla} x ${i} = ${tabla * i}`);
7}

  • foreach:

1// Array de valores:
2var consolas = ["PlayStation", "MegaDrive", "GameBoy", "Super Nintendo"];
3
4// recorrer valor e incrementar la tabla
5for(let i in consolas){
6    console.log("Consola: " + consolas[i]);
7}

Bucle while#

  • While sencillo:

1var productos = 5;
2
3while(productos >= 0){
4    console.log("Productos en stock: º " + productos);
5    productos--;
6}

  • do-while:

1var productos = 0;
2
3do{
4    console.log("Quedan: " + productos + " artículos");
5    productos --;
6}while(productos >= 0);

Detener secuenda de script#

 1for(let i = 0; i < 10; i++){
 2
 3    console.log("Valor es igual a: " + i);
 4
 5    if(i > 5){
 6        console.log("Una pausita");
 7        // Rompemos la instrucción.
 8        break;
 9    }
10}
11console.log("Fuera del ciclo");

Tipos de datos avanzados#

Arrays#

  • Declaración tradicional:

1var consolas = ["PlayStation", "MegaDrive", "Saturn"];
2
3console.log(consolas[2]);

  • Array multidimensional:

 1var domesticas = ["PlayStation", "MegaDrive", "Saturn"];
 2var portatiles = ["GameBoy", "PSP", "PS Vita"];
 3
 4var consolas = [domesticas, portatiles];
 5
 6console.log(consolas[1][2]);
 7
 8// nueva portatil:
 9consolas[1].push("3DS");
10console.log(consolas[1][3]);

  • Desestructuración de Arrays:

1// array:
2var consolas = ["PlayStation", "MegaDrive", "Saturn"];
3
4// desestructuración:
5var [consola1, consola2, consola3] = consolas;
6
7console.log(`${consola1}, ${consola2}, ${consola3}`);

Objetos literales#

  • Declaración tradicional:

1var objeto = {
2    "nombre":"Pepe",
3    "apellidos": "García Gámez",
4    "edad": 27,
5    "casado": false,
6    "aficiones": ["golf", "esquiar", "pescar"]
7    };
8
9console.log(`${objeto.nombre} ${objeto.apellidos} tiene ${objeto.edad} años.`);

  • Recorrer valores en array de objetos:

 1// lista de consolas:
 2var consolas = [
 3    {"nombre": "PlayStation", "lanzamiento": 1994},
 4    {"nombre": "PlayStation 2", "lanzamiento": 2001},
 5    {"nombre": "PSP", "lanzamiento": 2005}
 6];
 7
 8for(let objeto in consolas){
 9    console.log(`La videoconsola ${consolas[objeto].nombre} fue lanzada en ${consolas[objeto].lanzamiento}`);
10}

  • Desestructuración de objetos:

1// objeto:
2var persona = {"nombre": "Alfredo", "apellidos": "Lopez Gavilán"};
3
4
5// desestructuración:
6var {nombre, apellidos} = persona;
7
8console.log(`${nombre} ${apellidos}`);

Control de errores#

1try{
2    var boton = document.getElementById("boton");
3    // Cremos un error a proposito:
4    boton.addEventListener("DOMContentLoaded", ()=>{
5        console.log("Has pulsado");
6    });
7}catch(e){
8    console.log("Error al activar listener: " + e);
9}

Programación modular#

Funciones#

  • Procedimienos:

1function saludar(){
2    var saludo = "Hola mundo";
3    console.log(saludo);
4}

  • funciones:

1function saludar(){
2    var saludo = "Hola mundo";
3    return saludo;
4}

  • uso de parámetros:

1function saludar(nombre, edad){
2    var resultado = "Hola " + nombre + ", tienes " + edad + " años.";
3    return resultado;
4}
5
6var mensaje = saludar("Guillermo", 31);
7
8console.log(mensaje);

  • Parametros REST:

1// REST envia un número indefinido de parámetros separados por coma:
2function consolasFavoritas(...consolas){
3    console.log("Mis consolas favoritas: " + consolas);
4}
5
6consolasFavoritas("PlayStation", "MegaDrive", "GameBoy", "GameCube");

  • Operador SPREAD:

1// podemos asignarle el parámetro rest para recibir los valores SPREAD:
2function cocinar(ingrediente1, ingrediente2, ingrediente3, ...otros){
3    console.log("Necesitamos: " + ingrediente1 + ", " + ingrediente2 + ", " + ingrediente3 + ", " + otros);
4}
5// Especias:
6var especias = ['Ajo', ' Mezcla cajún'];
7
8// Y pasarle parámetros SPREAD:
9cocinar("Pollo", "Pan rallado", "huevos", ...especias);

  • Funciones anónimas:

 1// Función anónima asignada a una variable:
 2var saludar = function(nombre){
 3    var mensaje = "Hola de nuevo " + nombre;
 4    return mensaje;
 5}
 6
 7var persona = prompt("¿Quíen eres?");
 8
 9// invocamos la función a través de su variable:
10console.log(saludar(persona));

  • Arrow Functions:

1// Creamos una variable y le psamos una función lambda:
2var saludar = (nombre)=>{
3    console.log("Hola " + nombre);
4}
5
6// Inicializamos la variable como una función:
7saludar("Guillermo");

  • Callbacks:

 1// Creamos una función normal a la que le pasamos un callback llamado sumarCB:
 2function calcular(datoA, datoB, sumarCB){
 3    var suma = datoA + datoB;
 4    // Ejecutamos la función callback pasándole la variable suma:
 5    sumarCB(suma);
 6}
 7
 8// Ejecutamos la función calcular y creamos la función callback que recibirá arriba:
 9calcular(2, 3, (resultado) => {
10    // La función callback imprimirá el valor que recibe de la función anterior:
11    console.log(resultado);
12});

Programación orientada a objetos#

Los elementos de una clase se definen con ámbito public, private y protected. Adicionalmente se puede agregar el modificador static para poder acceder a los atributos y métodos sin crear un objeto.

Clases y objetos#

  • Estructura clase:

 1// clase:
 2class Consola{
 3    // Los atributos se inicializan en el constructor:
 4    constructor(marca, modelo, lanzamiento){
 5        // atributos:
 6        this.marca = marca;
 7        this.modelo = modelo;
 8        this.lanzamiento = lanzamiento;
 9    }
10
11    // metodos:
12    saberConsola(){
13        console.log(`Es una ${this.marca} ${this.modelo} que apareció en el año ${this.lanzamiento}`);
14    }
15}

  • Get y Set:

 1class Consola{
 2    constructor(marca, modelo, lanzamiento){
 3        this.marca = marca;
 4        this.modelo = modelo;
 5        this.lanzamiento = lanzamiento;
 6    }
 7
 8    saberConsola(){
 9        console.log(`Es una ${this.marca} ${this.modelo} que apareció en el año ${this.lanzamiento}`);
10    }
11
12    // get y set:
13    get marca(){
14        return this.marca;
15    }
16
17    set marca(value){
18        this.marca = value;
19    }
20}

  • Creación de objeto:

 1    // crear objeto:
 2    var consola = new Consola("Sony", "PlayStation", 1994);
 3    // utilizar un método:
 4    consola.saberConsola();
 5    // asignar nuevo valor:
 6    consola.modelo = "Play Station";
 7    // asignar con set atributo:
 8    consola.marca = "Nintendo";
 9    // devolver un valor con get:
10    console.log(consola.marca);
11
12    consola.saberConsola();

  • Herencia:

 1class Consola{
 2    constructor(marca, modelo, lanzamiento){
 3        this.marca = marca;
 4        this.modelo = modelo;
 5        this.lanzamiento = lanzamiento;
 6    }
 7
 8    saberConsola(){
 9        console.log(`Es una ${this.marca} ${this.modelo} que apareció en el año ${this.lanzamiento}`);
10    }
11}
12
13// clase hija:
14class PlayStation extends Consola{
15    constructor(...juegosFamosos){
16        // pasar atributos al constructor padre usando el superconstructor:
17        super("Sony", "PlayStation", 1994);
18
19        this.juegosFamosos = juegosFamosos;
20    }
21
22    saberJuegos(){
23        console.log(`Los juegos más famosos de ${this.modelo} son ${this.juegosFamosos}`);
24    }
25}
26
27var playstation = new PlayStation("Metal Gear Solid", "Tekken", "Final Fantasy");
28// cargar metodo de la clase hija:
29playstation.saberJuegos();
30// cargar metodo de la clase padre:
31playstation.saberConsola();

Importar y exportar#

  • En el archivo HTML cargar el script principal como un módulo:

1<script src="main.js" type="module"></script>

  • Exportar función:

1function saludar(nombre){
2    console.log("Hola " + nombre);
3}
4
5export default saludar;

  • Importar función:

1import saludar from './saludar.js';
2
3saludar("Guillermo");