Programación básica Javascript. Parte 1

Hola chic@s, después de haberos explicado en profundidad qué es Javascript, hoy hablaremos sobre los elementos básicos con los que vamos a construir las aplicaciones. Te recuerdo que si ya sabes programar en algún lenguaje de programación, este artículo te ayudará a conocer la sintaxis específica de Javascript. Pero si por el contrario nunca has programado, voy a comenzar desde cero enseñándote los conocimientos básicos necesarios que debes conocer para entender más adelante la programación avanzada que vamos a utilizar para la creación de aplicaciones reales.

Y sin enrollarme más, pongámonos manos a la obra. Lo primero de lo que vamos a empezar a hablar es de las variables.

¿Qué son las variables? Una variable es un elemento que empleamos para almacenar y hacer referencia a otro valor. Gracias a las variables es posible crear programas que siempre funcionen igualmente independientemente de los valores que utilicemos. Si en programación no existieran las variables, no podríamos a hacer los programas.

Pero para que entiendas las variables, la mejor forma es con un ejemplo muy sencillo.

Si no existieran las variables, un programa que suma dos número podríamos escribirlo como:

resultado = 3+1

Esta información es tan poco útil, que solo serviría si el primer número de la suma sea 3 y el segundo número sea 1. Pero el programa obtiene un resultado incorrecto. Aunque, como nosotros ya hemos entendido qué son las variables, podremos rehacer el programa de la siguiente manera:

numero_1 =3

numero_2 =1

resultado = numero_1 + numero_2

Los elementos numero_1 y numero_2 son variables que almacena los valores que utiliza el programa. El resultado se va a calcular siempre en función del valor almacenado por las variables, por lo que este programa nos va a funcionar correctamente para cualquier par de números que hemos indicado. Y si modificamos el valor de las variables numero_1 y numero_2, el programa nos va a funcionar a la perfección.

Crearemos las variables en Javascript mediante la palabra reservada var. De esta forma, el ejemplo anterior se vería como:

var numero_1 = 3;

var numero_2 = 1;

var resultado = numero_1 + numero_2;

 

La palabra reservada var solamente se debe indicar al definir por primera vez la variable, lo que denominamos como declarar una variable. En el ejemplo que os he puesto anteriormente, sería un error indicarlo de la siguiente forma:

var numero_1 = 3;

var numero_2 = 1;

var resultado = var numero_1 + var numero_2;

Si cuando declaramos una variable se le asigna también un valor, se dice que la variable ha sido inicializada. En Javascript tenemos que tener en cuenta que no es obligatorio inicializar las variables, ya que podemos declararlas por una parte y posteriormente asignarles un valor. Por tanto, basándonos en el ejemplo anterior, podemos rehacerlo de la siguiente manera:

var numero_1;

var numero_2;

numero_1 = 3;

numero_2 = 1;

var resultado = numero_1 + numero_2;

Además, podemos utilizar variables que no se han definido anteriormente mediante la palabra reservada var. Siguiendo con el ejemplo anterior, otra forma correcta sería:

var numero_1 = 3;

var numero_2 = 1;

resultado = numero_1 + numero_2;

En cualquier caso, diré que es recomendable declarar todas las variables que vayamos a utilizar. El nombre de una variable también se conoce como identificador y debe de cumplir las siguientes normas:

  • Solo puede estar formado por letras, números y los símbolos dólar ($) y guión bajo (_)
  • El primer carácter nunca puede ser un número

Ahora un ejemplo de variables con nombres correctos:

var $numero1;

var_$letra;

var $$$otroNumero;

var $_a_$4;

Y ahora a la inversa, ejemplos de variables que tienen identificadores incorrectos:

var 1numero; //empieza por un número

var numero; 1_123; //contiene un carácter “;” que no está bien

Cuéntame, ¿cómo vas? Todo entendido, algo agobiad@ con esto de las variables. De verdad que te lo estoy intentando explicar de la manera más sencilla posible. Pero si tienes alguna pregunta, recuerda dejármelo en los comentarios o enviándome un email a hola@natamartiny.es 🙂

Respira hondo y coge fuerzas, porque ahora vamos a hablar de tipos de variables. Empezamos 🙂

  • Numéricas: Las utilizamos para almacenar valores numéricos enteros (en inglés integer) o decimales (en inglés float). El valor lo asignamos indicando directamente el número entero o decimal. A tener en cuenta que, los números decimales utilizan el carácter punto (.) en vez de, coma (,) para separar la parte entera de la decimal. Con un ejemplo se te quedará todo mucho mejor aclarado.

var iva = 21; // variable de tipo entero

var total = 175.37; // variable de tipo decimal

  • Cadenas de texto: Las utilizamos para almacenar caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, encerramos el valor entre comillas dobles o simples, para delimitar su comienzo y su final. Un ejemplo sencillo para entenderlo.

var mensaje = “Te doy la bienvenida a la web Natamartiny”;

var nombreproducto = ‘Producto FGH’;

var letraSeleccionada = ‘n’;

A veces, el texto que se almacena en la variable no es tan simple. Si por ejemplo, nos encontramos con el caso de que el propio texto contiene comillas simples o dobles, lo que haremos es encerrar el texto con las comillas (simples o dobles) que no utilice el texto. Suena a chino mandarín, lo sé. Pero con un ejemplo lo vas a entender a la perfección.

/*El contenido que tenemos en el texto primero tiene comillas simples, por lo que se encierra con comillas dobles */

var textoprimero = “Una frase con ‘comillas simples’ dentro”;

/*El contenido que tenemos en el texto segundo tiene comillas dobles, por lo que se encierra con comillas simples */

var textosegundo = ‘Una frase con “comillas dobles” dentro’;

Aunque a veces las cadenas de texto contienen tanto comillas simples como dobles. Además, tenemos que tener en cuenta otros caracteres que son muy difíciles de incluir en una variable de texto. Por lo que Javascript define un mecanismo sencillo para que podamos incluir caracteres problemáticos. Pero, ¿cómo hacemos para incluir los caracteres problemáticos en una cadena de texto? Muy sencillo, este mecanismo consiste en sustituir el carácter problemático por una combinación simple de caracteres.

Incluir una nueva línea: \n

Incluir tabulador: \t

Incluir una comilla simple: \’

Incluir una nueva comilla doble: \”

Incluir una barra inclinada: \\

Con lo cual, el ejemplo anterior que os he puesto de las comillas simples y dobles dentro del texto, también sería correcto de la siguiente manera:

var textoprimero = ‘Una frase con \’comillas simples \’ dentro’;

var textosegundo = “Una frase con \”comillas simples \” dentro”;

A este mecanismo en Javascript se le denomina como “mecanismo de escape” de los caracteres problemáticos, y es habitual referirse a que los caracteres han sido “escapados”.

Creo que por hoy, ya habéis tenido más que suficiente con estos conceptos básicos en Javascript. En el próximo artículo que voy a hacer, lo llamaré programación básica javascript parte 2, y hablaremos de otros muchos conceptos como los arrays, booleanos, operadores ( de asignación, incremento y decremento, lógicos, matemáticos y relacionales). Así que ponte a cargar tus pilas para convertirte en un auténtico experto en Javascript.

Mi querido lector, si has leído hasta el final, te doy las gracias. Y nos vemos muy prontito con más conceptos básicos en Javascript parte 2 🙂

Programación básica Javascript. Parte 1

5 (100%) 1 vote

Me harías un enorme favor compartiendo :)

Una respuesta en “Programación básica Javascript. Parte 1”

[…] chicos?, aquí estoy de nuevo para daros caña. Después de haber aprendido qué es Javascript, la programación básica parte 1 y la programación básica parte 2, hoy hablaremos de las estructuras de control de flujo en […]

Quiero conocer tu opinión

error: Este contenido esta protegido