Las bases de JavaScript

NOTA:

  • Este artículo contiene las bases de JavaScript. No se intenta profundizar demasiado en las áreas que se tratan aquí, pero se da una respuesta clara y concisa sobre ellas.

RECOMENDACIONES:

  • No leas todo el artículo entero en poco tiempo.
  • Si en serio quieres aprender, tómate cierto tiempo para analizar lo que has leído.
  • Queda en tus manos profundizar en cada área que veas; no todo lo que verás aquí será determinante.
  • Sé que te puede parecer aburrido leer todo el artículo completo, pero si te tomas el tiempo para estudiarlo y comprender cada una de sus áreas de seguro tendrás los cimientos sólidos para convertirte en un mejor programador en JS.
  • Nunca pares de aprender…

JavaScript es uno de los lenguajes que más se eligen para comenzar a programar. Para entender su sintaxis  y dejar de ser “beginner developer” debes de tener conocimiento de:

  • Tipos de datos
  • Objetos
  • Variables
  • Operadores
  • Condicionales
  • Bucles
  • Funciones

Todo esto puede parecer difícil de entender, pero es más fácil de lo que crees… Es por eso que aquí te enseñaré a entender la sintaxis de JS de forma sencilla.


Tipos de datos

Los tipos de datos son las diferentes formas en las que podrás definir y escribir datos. Estos datos son:

  • String. Un dato string es una cadena de caracteres, de ahí su nombre… Es utilizado para escribir datos en forma de caracteres, o simplemente de texto.  Para escribir datos de tipo string debes encerrar la cadena de caracteres que escribas entre comillas (simples o dobles, no importa en realidad… ). P. ej.string

Recuerda siempre escribir texto entre comillas (quotes). El no hacerlo es una mala práctica.

  • Numbers. Un dato number es simplemente un número. Los números que ingreses pueden ser enteros, decimales, decimales positivos o decimales negativos. En JS los decimales no llevan coma ( 3,4 ), llevan punto ( 3.4 ). P. ej.numbers

NO escribas nunca un número en JS separando con ” ” o ” . ” como te enseñaron en la escuela. La sintaxis de JS no reconocerá el número que tu deseas mostrar (mirar la imagen).

  • Boolean. Los datos boolean son datos que solo pueden tener dos estados, true or false (verdadero or falso). En JS los datos boolean sirven para definir el estado de un objeto. Para escribir el estado boolean de un objeto solamente debemos de escribir true or false, según lo deseemos. P. ej.boolean

Cuando un dato boolean es true, sucede algo. Pero cuando es false no sucede nada, o sucede lo contrario a cuando es true.

  • Array. Los datos arrays funcionan como listas de objetos… En realidad, son matrices unidimensionales. Pero en general, los arrays se encargan de almacenar todo tipo de datos (strings, números, booleans, y hasta datos combinados… ) para luego ser recorridos, transformados o modificados según se crea necesario. P. ej.array

Como se ve en la imagen, los datos son separados por comas para agilizar su lectura y listar de una mejor manera los datos ingresados. Los datos en arrays tienen una posición específica indicada por un número.

P. ej. en el string array tenemos tres datos ( [“joe”, “ryan”, “martha”] ), esos tres datos están listados con las posiciones 0, 1, 2, respectivamente ( [0, 1, 2] ). En arrays, los datos son listados desde la posición 0, no desde la posición 1. Ten en cuenta esto.


Objetos

Los objetos son un conglomerado de propiedades o atributos que definen a estos objetos. La sintaxis de los objetos en JS es la siguiente:

… {

“nombre”: valor,

}

Esto quiere decir que los objetos en programación son los mismos que podemos ver en la vida real. Ya sea un carro, una bicicleta, un futbolista, una casa… ¡Todo son objetos!

Como ejemplo hagamos el objeto gamer (jugador). Primero definamos aquel objeto en JS. Para definir un objeto en JS utilizamos llaves { }. Dentro de estas llaves colocaremos las propiedades o atributos de nuestro objeto gamer, como nickname, score, horas de juego, nivel… ¡Todas las propiedades que se deseen!object

El nombre de las propiedades son cadenas string. Asegúrate de encerrar el nombre de las propiedades entre comillas. Asignaremos el valor de la propiedad mediante dos puntos ( : ), y siguiente a ellos definiremos el valor.

¿Y por qué después del valor hay una coma? Esto es porque un objeto se escribe en línea según su sintaxis, y las comas separan cada propiedad del objeto. Tiene cierta similaridad con los arrays. Puedes ver un objeto con las propiedades en linea a continuación:

objectinline

Como ves, un objeto escrito en linea puede llegar a dificultar la lectura de sus propiedades. Es por eso que se recomienda escribir en bloque cada una de sus propiedades, como se muestra en la anterior imagen.


Variables

Podemos declarar variables de dos formas:

  1. Utilizando la palabra reservada var
  2. Utilizando la palabra reservada let

Una palabra reservada es un método perteneciente a la sintaxis del lenguaje que se reserva para una función predeterminada en el lenguaje. Ejemplo de ello es la palabra var o let, que se utilizan únicamente para declarar variables.

  • Var. Nos servirá para crear variables globales. Una variable global puede ser modificada, transformada o utilizada tantas veces como sea necesario en nuestro código.
  • Let. Se utiliza para crear variables locales. Una variable local funciona con un rango límite. Aquél rango puede ser un bloque de código, el cual contendrá toda la transformación de la variable let únicamente dentro de él.

varlet

Hay una tercera forma de declarar variables, pero en este caso las variables pasan a ser constantes. Con la palabra reservada const declaramos una variable constante en JavaScript. Un ejemplo de constante puede ser el valor de PI. Este no va a cambiar de valor en caso de que hagamos uso de operaciones matemáticas en nuestro código.

const.png

Recomendaciones al declarar nombres de variables (var, let, const)

  1. Los nombres de las variables pueden comenzar por una letra, el guión bajo (_) y el símbolo de dolar ($); el resto de los caracteres puede ser cualquier combinación de los anteriores, además de cifras.
  2. Los nombres de variables no pueden coincidir con palabras clave pertenecientes a la propia sintaxis de JavaScript, ni con las palabras reservadas, una lista de palabras que se considera que en el futuro tendrán un significado propio.
  3. Hay una serie de convenciones para nombrar variables:
  • Notación camelCase: Se escribe la primera palabra del nombre en minúscula, y si el nombre consiste en varias, las siguientes se empiezan por mayúsculas: listaCamposFormulario.
  • Notación Pascal: Cada palabra que forme el nombre de la variable se empieza en mayúscula: ListaCamposFormulario.
  • Notación «tipo húngaro»: Cada palabra que forme el nombre de la variable se empieza en mayúscula, como en la anterior, pero inicialmente se escribe una minúscula que indica el tipo de variable de la que se trata:  aListaCamposFormulario ; la a indicaría que la variable es una matriz, en inglés array.

Más información: Variables


Operadores

Los operadores en JavaScript son de diferentes tipos. Aquí vamos a hablar de operadores aritméticos, operadores de asignación y operadores de comparación.

Operadores aritméticos

Son los operadores utilizados para hacer operaciones aritméticas. Entre los operadores aritméticos estándar se encuentran: la suma ( + ), resta ( – ), multiplicación ( * ), división ( / ).

aritmethic-operators.png

Sin embargo, JavaScript ofrece otros operadores aritméticos con funciones especiales que puedes consultar aquí.

Operadores de asignación

El operador de asignación es aquél que se encarga de asignar un valor a un operando del lado izquierdo mediante el operador básico de asignación igual ( = ). Un ejemplo simple de asignación es:

var x = 2;

A la variable x se le asigna el valor de 2.

Hay otros operadores de asignación que se fundamentan en los operadores aritméticos. Estos son:

  • Asignación de adición ( += ) . Ej. Para x = x + 1 usa este operador ( x += 1 ).

x = x + 1 es igual a x += 1

  • Asignación de sustracción ( -= ) . Ej. Para x = x – 1 usa este operador ( x -= 1 ).

x = x – 1 es igual a x -= 1

  • Asignación de multiplicación ( *= ) . Ej. Para x = x * 1 usa este operador ( x *= 1 ).

x = x * 1 es igual a x *= 1

  • Asignación de división ( /= ) . Ej. Para x = x / 1 usa este operador ( x /= 1 ).

x = x / 1 es igual a x /= 1

Hay otros operadores de asignación que puedes consultar aquí.

Operadores de comparación

Se encargan de devolver un tipo de dato booleano (true o false) según la comparación de sus operandos. Entre los operadores de comparación encontramos los siguientes:

  • Igualdad (==). Compara entre dos operandos para indicar si son iguales. Ej.

1 == “1” // devuelve true

  • Desigualdad (!=). Compara entre dos operandos para indicar si son desiguales. Ej.

1 != 1 // devuelve false

  • Estrictamente iguales(===). Compara entre dos operandos de forma estricta para indicar si son iguales y son del mismo tipo de dato. Ej.

1 === 1 // devuelve true

  • Estrictamente desiguales (!==). Compara entre dos operandos de forma estricta para indicar si son desiguales y de diferentes tipos de datos. Ej.

1 !== 1 // devuelve false

  • Mayor que (>). Compara entre dos operandos para indicar si el operando de la izquierda es mayor que el de la derecha. Ej.

100 > 50 // devuelve true

  • Mayor o igual que (>=). Compara entre dos operandos para indicar si el operando de la izquierda es mayor o igual que el de la derecha. Ej.

49 >= 50 // devuelve false

50 >= 50 // devuelve true

  • Menor que (<). Compara entre dos operandos para indicar si el operando de la izquierda es menor que el de la derecha. Ej.

55 < 50 // devuelve false

  • Menor o igual que (<=). Compara entre dos operandos para indicar si el operando de la izquierda es menor o igual que el de la derecha. Ej.

50 <= 50 // devuelve true

23 <= 50 // devuelve true

Para más información de los operadores de comparación consulta aquí.


Condicionales

Una condición es una expresión que puede ser evaluada como verdadera o falsa, y según su dato boolean ( true o false ) se podrá ejecutar una o varias sentencias. Podemos desarrollar condiciones de dos formas: con if… else o switch.

If… else

If… else indica que según una expresión se ejecuta una sentencia si la expresión es true. Si la expresión es evaluada como false, otra sentencia es ejecutada, así hasta que alguna de las expresiones sea verdadera.  La sintaxis de if… else es:

if(condition){
    --sentence--
} else if (condition2){
    --sentence2--
} else {
    --sentence3--
}
  • if indica el inicio de una condicion if… else.
  • else if indica otra condicion en el mismo bloque del if principal.
  • else indica una sentencia sin tener en cuenta una condición en específico.
  • condition ( , …2 )  es la expresión a ser evaluada como true o false.
  • sentence ( …1, …2, …3 ) es la sentencia que ocurrirá si condition es true.

Un ejemplo de if… else es la verificación de una contraseña. No es así como funciona en realidad, pero nos sirve como ejemplo…

ifelse.png

Tenemos dos variables: password e input_. Ahora, en la variable confirm se comparan estas dos variables para que en nuestro bloque if… else podamos asignar una sentencia en el caso de que las dos variables sean o no iguales.

Si confirm es igual a true ( es decir que las dos variables son iguales ), se escribirá por consola “login correcto”. Sino, si confirm es igual a false ( que las dos variables no son iguales ), se escribirá por consola “contraseña incorrecta”.

Switch

Switch evalúa una expresión mediante casos que se incluyen dentro de su bloque. Si un caso es igual a la expresión especificada, una sentencia será ejecutada. Si ningun caso se cumple, podemos ( opcionalmente ) agregar un caso default ( por defecto ). La sintaxis de switch es la siguiente:

switch(expression){
    case value:
    --sentence--
    break;
    case value2:
    --sentence2--
    break;
    default:
    --default sentence--
}
  • switch indica el inicio de una condicional tipo switch.
  • expression es la expresión a ser evaluada mediante los casos (case).
  • case es la palabra reservada para declarar los casos dentro de switch.
  • value ( …2 ) es el caso especificado. En él se declaran los posibles casos que pueda tener la expression.
  • sentence (…2, default sentence) es la sentencia a ser ejecutada si alguno de los casos se cumple.
  • break indica el fin de un caso y su sentencia.
  • default permite declarar un caso por defecto si ninguno de los casos se cumple.

Un ejemplo de switch podría ser la verificación del tipo de una tarjeta (card).

switch.png

Creamos una variable card, que contendrá el tipo de tarjeta que tenemos (debit card). En switch pasamos como expresión esta variable card para que sea evaluada. Además, en switch tenemos tres casos (case):

  1. El caso en que nuestra tarjeta es una tarjeta débito, se escribirá por consola “this is a debit card”.
  2. El caso en que nuestra tarjeta sea una tarjeta crédito, se escribirá por consola “this is a credit card”.
  3. El caso en que nuestra tarjeta no esté especificada, se escribirá por consola un error que diga “error: no specified card ‘card’ “ .

En nuestro caso, nuestra tarjeta es de tipo débito. Así que se escribirá por consola “this is a debit card”.


Bucles

Un bucle es una situación que se repite mientras que una expresión sea verdadera. Nos sirve para automatizar una tarea que pueda repetirse dentro de nuestro código. En JavaScript podemos usar tres tipos de bucles: while, do while y for.

Bucle while

Evalúa una condición, y mientras esa condición sea verdadera, lo que haya dentro de su bloque (una sentencia) se iterará. Si la condición pasa a ser falsa, la sentencia deja de iterarse. Su sintaxis es:

while(condition){
    sentence
}

Un ejemplo del ciclo while puede ser una cuenta regresiva:

while.png

Tenemos dos variables: i = 50 y limit = 0. La condición de while es que mientras i sea mayor a limit… Y la sentencia es que se escribirá por consola “Hello world” y el valor de i las veces que la condición lo permita (50 veces). Además, i va a disminuir -1 en su valor (i–).

Bucle do… while

Es otra forma de escribir un ciclo while. Sin embargo, difieren en que en este caso la sentencia se ejecuta antes de la condición. De ahí su nombre ( do… while <<hacer… mientras>> ). La palabra do pasa a ser el bloque de código de la sentencia, y while es quien tiene la condición que determina si la iteración sigue ejecutándose o no. Su sintaxis es:

do{
    sentence
}while(condition);

Sigamos con el ejemplo de cuenta regresiva para demostrar el uso del bucle do… while.

dowhile.png

Tenemos las mismas dos variables: i = 50 y limit = 0. La sentencia es que primero escriba por consola “Hello world” y el valor de i las veces que la condición lo permita (50 veces). Luego, se le va a restar -1 al valor de i (i–). La condición es mientras que i sea mayor a limit.

Bucle for

El bucle for tiene el mismo fin que los dos ya mencionados anteriormente. Pero a diferencia de los dos bucles anteriores, toma 3 parámetros dentro de sus paréntesis:

  1. Expresión inicial
  2. Condición
  3. Expresión de incremento

La expresión inicial es el valor inicial del bucle.

La condición es la expresión que se evaluará para iterar la sentencia.

La expresión de incremento es la encargada de incrementar el valor de la expresión inicial.

La sintaxis del bucle for es:

for(initial-expression; condition; increase-expression){
   sentence
}

Un ejemplo del ciclo for puede ser saludar a un grupo de personas por su nombre.

for.png

Tenemos una variable names, la cual es un array de strings. En él se indican cuatro nombres de personas ( [“ryan”, “john”, “asimov”, “fred”] ). En el ciclo for, la expresión inicial es una variable i, que equivale a 0.

La condición es que mientras i sea menor que names.length (la propiedad .length indica el largo, o número de datos, del objeto al que le adicionemos dicha propiedad)… La expresión de incremento es que al valor de i se le va a sumar +1 (i++).

La sentencia es que se va a escribir por consola “hi,”, names[i] + “!” (hi, ‘nombre’!); names indica cada uno de los nombres que se hayan en dicha variable. El [i] indica el indice que se mostrará. Como i va incrementando desde 0, se nos mostrarán todos los nombres que hayan en el array names mientras que la condición se cumpla.


Funciones

Es código almacenado dentro de un bloque. Este código puede ser llamado o reutilizado, externa o internamente, mediante su nombre. Las funciones se componen de una serie de valores que componen el bloque de código de la función.

Mediante el nombre de la función podemos pasar valores dentro de ella para que la función devuelva otro valor, correspondiendo a una respuesta.

Hay varias formas de definir funciones, pero la estándar es la siguiente:

function functionName(parameter) {
    codeBlock
{

nameFunction();
  • functionName es el nombre de la función declarada
  • parameter es un parámetro que debemos ingresar para que el codeBlock o las instrucciones de la función funcionen de manera correcta. Podemos declarar uno o más parámetros según sea necesario.
  • codeBlock pasa a ser las instrucciones o el código que almacenamos dentro de nuestra función. Suele ser código que puede reutilizarse varias veces.

Vamos a ver un ejemplo…

functions.png

Hemos declarado una función add, la cual contiene dos parámetros: n1 (número 1) y n2 (número 2). La instrucción de la función add es que escriba por consola el resultado que se da al sumar n1 y n2.

Ahora, si llamamos externamente a la función add e ingresamos dos números (separados por una coma), tendremos como resultado la escritura por consola del resultado al sumar los dos números ingresados, como se muestra en la imagen.

Más información: Funciones.


Si llegaste hasta aquí… ¡Te felicito! Ya tienes las bases de JavaScript. Ahora tu paso a seguir es:

  • Profundizar sobre lo que has visto.
  • Buscar proyectos simples por hacer para reforzar tus conocimientos.
  • Investigar sobre el DOM y su manipulación dentro de JavaScript.
  • Crear un proyecto (aunque sea tonto) sobre lo que has aprendido hasta ahora de este lenguaje.
  • Estudiar sobre las propiedades y métodos en JavaScript.
  • Y nunca dejes de parar de aprender.

Si te has enganchado con este lenguaje por cualquiera que sea la causa, escríbeme en twitter sobre tu experiencia al aprender JavaScript. @dsantiagocss


Fuentes:

Mis redes:

Contacto:

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s