Las bases de la programación con JavaScript
aprender a programar Javascript
A día de hoy JavaScript es uno de los lenguajes de programación más utilizados e interpretados.
Utilizado junto a HTML5 y CSS3, nos permite realizar aplicaciones web (sitios web simples, portales… etc). Antes de explicar y profundizar el lenguaje js, tenemos que pararnos en HTML5 y CSS3.
HTML5 es un lenguaje de markup (HyperText Markup Language), que tiene como objetivo formatear y maquetar documentos de hipertexto disponibles en la web. En pocas palabras, es la estructura de nuestra página web.
Esta última está formada por marcadores que cogen el nombre de tag HTML.
La importancia de los tag HTML
El tag HTML está encerrado entre paréntesis angulares. La mayor parte de estos se caracterizan por el tag de apertura y de cierre.
En el ejemplo anterior, puedes notar el código HTML5 de nuestra página web. Después de haber definido la estructura, podemos modificar y embellecer nuestra página a través de CSS3. Este último es un lenguaje de programación front-end, que nos permite realizar el diseño de la página.
Podemos por ejemplo aplicar un color de fondo, posicionar los elementos a nuestro gusto, atribuir un carácter específico al texto, aplicar determinadas dimensiones a los elementos… etc.
Después de esta pequeña introducción, podemos profundizar en Js. Javascript. Es un lenguaje de programación que tiene la finalidad de convertir una página web dinámica, a través de la interacción del usuario con el buscador (lado client).
Por ejemplo, permite al usuario: añadir datos a través de la compilación de un form HTML; realizar una determinada acción siguiendo el clic de un botón; cambiar los datos en curso, que se muestran en la página; administrar archivos multimedia… etc.
Para seguir el código js en un documento HTML5, primero tenemos que añadir en el interior de nuestra página web el archivo: index.js (puedes elegir un nombre cualquiera, siempre que termine con la extensión .js) a través del tag script. Este último actúa en el buscador y, en consecuencia, conoce tu contexto.
Para verificar el correcto funcionamiento del script, abrimos nuestro archivo index.html en el buscador.
Sucesivamente, clicamos en el interior de la ventana con el botón derecho y seleccionamos “inspecciona”.
Nos movemos a Console, donde podemos ver el mensaje (“it works”) insertado en el interior del archivo index.js.
El método console.log(), en el ejemplo de arriba, tiene la función de imprimir un mensaje en la consola. Este último puede ser una simple cadena de texto, como en este caso, o uno o más objetos Javascript.
En el momento en el que se aborda un nuevo lenguaje de programación uno de los primeros temas que se enfrentan es el de las variables.
¿Qué son las variables? Son contenedores de datos, que pueden contener un valor numérico, un texto (string) o un valor booleano (true or false).
En Javascript las variables pueden ser declaradas a través let o const. La diferencia sustancial entre estas dos maneras de declarar las variables es que “let”
nos permite asignarles un nuevo valor, operación que no se concede con “const”,
que significa constante y se refiere a un valor que no se puede modificar.
En el ejemplo de arriba, podemos notar en la primera línea el nombre de la variable: mensaje, que contiene en su interior una string: “ciao”.
NB: Js es un lenguaje débilmente tipificado, por lo tanto, no es necesario declarar el tipo de variable. En el ejemplo anterior, podemos asignar a la variable número un valor numérico.
Además de las simples variables, en Js es típico utilizar los array. La peculiaridad de un array es la de poder contener más datos, y de poder acceder a los mismos a través de un índice numérico. Imagina que un array es un tren compuesto por vagones, donde cada vagón acoge datos.
Para crear un array puedes utilizar dos modos:
En el primer método utilizamos los paréntesis cuadrados y en el segundo el constructor.
Rellenamos el array a través del índice numérico (i), el cual indica la posición del elemento en el interior del mismo.
NB: El indice empieza siempre desde 0.
Puedes rellenar un array incluso insertando simplemente en el interior de los paréntesis cuadrados los múltiples valores, sin tener que explicitar en el índice (este último se sobreentiende). Al índice 0 corresponde el valor: valorEnPrimeraPosición, y ya está.
Podemos también modificar el valor de uno o más elementos de un array en una determinada posición, siempre a través del uso de nuestro amado índice.
De esta manera: valoreInTerzaPosizione se reemplaza por valoreNuovoInTerzaPosizione.
En Javascript hay muchos métodos que permiten manipular el array y obtener información. Entre estos encontramos:
- Length => devuelve la longitud de un array. Ejemplo de uso: nombreArray.length;
- Push => añadir un elemento al final de un array. Ejemplo de uso: nombreArray.push (elementoPorAñadir)
- Reverse() => invierte el orden de los elementos de un array.
- Slice(inicio, final) => devuelve un nuevo array más pequeño, en base a los valores correspondientes a los índices pasados como parámetros.
- Array.map() => clica sobre cualquier elemento de array y ejecuta un callback para cada uno (función pasada como parámetro de otra función), dedicado a modificar un elemento.
Te aconsejo profundizar el argumento en cuestión sobre la documentación oficial de Javascript:
Los array en Javascript pueden ser incluso multidimensionales (matrices). Estos últimos son los array utilizados como elementos de otros array.
En el ejemplo puedes notar un array (matriz) 3X3 de enteros. Para acceder a un específico elemento es necesario especificar las coordenadas a través de los indicios. El primero corresponde a la posición de array (0,1,2) y el segundo a la del elemento interno (0,1,2).
Anteriormente, hemos tratado con el método: console.log().
Js tiene muchos métodos, entre los más utilizados, encontramos: alert() y prompt().
El método alert() muestra una ventana de mensajes (pop-up). Podemos especificar el mensaje en el interior del paréntesis redondo y de las comillas.
El objetivo principal de este método es el de poder mandar mensajes con el usuario.
El método prompt() muestra una ventana de mensajes (pop-up). Al revés del método alert(), el usuario tiene la oportunidad de responder a un mensaje específico a través de un campo de entrada.
En Javascript las declaraciones juegan un papel fundamental y, entre estas, encontramos los ciclos for.
Esta declaración ejecuta un bloque de código, un número específico de veces.
Utilizamos la keyword for y abrimos los paréntesis redondos. Inicializamos una variable, comúnmente llamada índice. Insertamos el punto y la coma y la expresión que devolverá “verdadero” o “falso”. Finalmente incrementamos la variable
En el ejemplo de arriba notamos que la declaración, contenida en el interior de los paréntesis gráficos, se ejecutará hasta que la variable i sea menor que diez. Cuando la variable sea igual a diez, el bloque de instrucciones no se ejecutará y, en consecuencia, se saldrá del ciclo.
Js nos a porta dos variantes del for: for-in e for-of. Estas últimas permiten trabajar más cómodamente con los array.
Usando el for-in, podemos ver inmediatamente las ventajas de escribir el ciclo. De forma predeterminada, Js reconoce que la variable array en realidad contiene una matriz. Accede a cada elemento de este último, asignando el valor del índice actual (array [index]) a cada iteración a la variable índice.
Usando el for-of, no necesitamos acceder al elemento actual de la matriz a través de su índice, pero en cada iteración en la variable value se asignará directamente al valor del elemento.
Otra instrucción fundamental para conocer y utilizar es: if.
Este último, simplemente, ejecuta una instrucción si la condición especificada es verdadera.
En el primer if se imprime “Ok”, ya que el valor contenido en la variable número es igual a doce.
En el segundo, sin embargo, no se imprime, ya que la condición es falsa.
En este último ejemplo introducimos la keyword else, o "de lo contrario".
Si la primera condición es falsa, se ejecuta la instrucción contenida en el interior de else.
En este caso se imprimirá la cadena: "El número es diferente".
Después de tratar con la declaración if, podemos centrar la atención en los operadores lógicos.
Los operadores lógicos están destinados a combinar expresiones booleanas, es decir, expresiones que devuelven "verdadero" o "falso".
Estos últimos son: &&; || e ! Sustituyen true…
- A&B solo si A y B son true
- A l l B si A o B (o ambos) son true
- !A si A no es true
En este artículo, te he ilustrado los principales conceptos clave que conciernen al lenguaje Js.
Te aconsejo profundizar cada argumento sobre la documentación oficial:
Conviértete en Desarrollador weben 6 meses
Descubre el bootcamp de programación Hackademy
Programa Completo© 2022 Aulab. Todos los derechos reservados • P.IVA: IT07647440721 • Política de privacidad