Traducción en curso

Después de leer los dos últimos artículos, ahora debe saber qué es JavaScript, qué puede hacer por usted, cómo lo usa junto con otras tecnologías web y cuáles son sus características principales desde un alto nivel. En este artículo vamos a centrarnos en lo básico, y veremos cómo trabajar con la mayoría de los componentes más básicos de JavaScript: Variables.

Prerrequisitos: Conocimientos básicos de informática, comprensión básica de HTML y CSS, comprensión de lo que es JavaScript.
Objectivo: Familiarizarse con los conceptos básicos de las variables de JavaScript.

Herramientas que necesitas

A lo largo de este artículo, se le pedirá que escriba las líneas de código para probar su comprensión del contenido. Si está utilizando un navegador de escritorio, el mejor lugar para escribir su código de muestra es la consola de JavaScript de su navegador (consulte Qué son las herramientas de desarrollo del navegador para obtener más información sobre cómo acceder a esta herramienta).

Sin embargo, también proporcionamos una consola JavaScript simple incrustada en la página siguiente para que ingrese este código, en caso de que no esté utilizando un navegador con una consola JavaScript fácilmente disponible, o encuentre una consola en la página más cómoda.

¿Qué es una variable?

Una variable es un contenedor para un valor, como un número que podríamos usar en una suma, o una cadena que podríamos usar como parte de una oración. Pero una cosa especial acerca de las variables es que sus valores contenidos pueden cambiar. Veamos un ejemplo simple:

<button>Press me</button>
var button = document.querySelector('button');

button.onclick = function() {
  var name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

En este ejemplo, presionar el botón ejecuta un par de líneas de código. La primera línea muestra un cuadro en la pantalla que le pide al lector que ingrese su nombre, y luego almacena el valor en una variable. La segunda línea muestra un mensaje de bienvenida que incluye su nombre, tomado del valor de la variable.

Para entender por qué esto es tan útil, pensemos en cómo escribiríamos este ejemplo sin usar una variable. Terminaría luciendo algo como esto:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

Puede que no comprendas del todo la sitaxis que estamos utilizando (todavía), pero serás capaz de entender la idea — si no tuviesemos las variable disponibles, tendríamos que implementar a giant code block that checked what the entered name was, and then display the appropriate message for that name. Obviamente eso es ineficiente (el código es muy grande, incluso para solo cuatro opciones), y seguiría sin funcionar — posiblemente no pudiese almacenar todas esas opciones.

Las variables tienen sentido, a medida que vayas aprendiendo más sobre JavaScript, te irán resultando más naturales.

Otra cosa especial de las variables es que pueden tener de todo — no solo strings y números. Las variables también pueden contener datos complejos e incluso funciones enteras con las que hacer cosas asombrosas. Aprenderás más sobre esto más adelante.

Recuerda que hemos dicho que las variables contienen valores. Es una importante diferencia a tener en cuenta. Las variables no son valores por sí mismas; son contenedores de valores. Puedes pensar en ellas con una caja de cartón donde dentro puedes guardar cosas.

Declarando una variable

Para usar una variable, primero tienes que crearla — más especificamente, a esto se le llama declarar una variable. Para hacer esto, escribimos la palabra clave var o let seguido del nombre que le quieres poner a la variable:

var myName;
var myAge;

Ahora estamos creando dos variable llamadas myNamemyAge. Ahora prueba a escribir estas líneas en la consola de tu navegador, o en la consola de debajo (Puedes open this console en una pestaña o en una ventana diferente, si así lo prefieres). Después de eso, prueba creando una variable (o dos) con los nombres que tú elijas.

Note: In JavaScript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. Try to get into the habit of including it.

You can test whether these values now exist in the execution environment by typing just the variable's name, e.g.

myName;
myAge;

They currently have no value; they are empty containers. When you enter the variable names, you should either get a value of undefined returned. If they don't exist, you'll get an error message — try typing in

scoobyDoo;

Note: Don't confuse a variable that exists but has no value defined with a variable that doesn't exist at all — they are very different things.

Inicializar una variable

Una vez que has declarado la variable, puedes inicializarla con un valor. Haz esto escribiendo el nombre de la variable, seguido del signo de igual (=), continuado por el valor que le quieres dar. Por ejemplo:

myName = 'Chris';
myAge = 37;

Intenta volver a la consola y escribe estas líneas. You should see the value you've assigned to the variable returned in the console to confirm it, in each case. Again, you can return your variable values by simply typing their name into the console — try these again:

myName;
myAge;

Puedes declarar e inciar una variable al mismo tiempo de la siguiente forma:

var myName = 'Chris';

Probablemente esto sea lo que hagas la mayoría del tiempo, es más rápido que hacer las dos acciones en líneas de código diferentes.

Note: If you write a multiline JavaScript program that declares and initializes a variable, you can actually declare it after you initialize it and it will still work. This is because variable declarations are generally done first before the rest of the code is executed. This is called hoisting — read var hoisting for more detail on the subject.

Actualizando una variable

Una vez que has inicializado la variable con un valor, puedes cambiar (o actualizar) ese valor simplemente dándole un valor diferente. Intenta introducir las siguientes líneas en tu consola:

myName = 'Bob';
myAge = 40;

An aside on variable naming rules

You can call a variable pretty much anything you like, pero hay limitaciones. Generally you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.

  • You shouldn't use other characters because they may cause errors or be hard to understand by an international audience.
  • Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.
  • Don't use numbers at the start of variables. This isn't allowed and will cause an error.
  • A safe convention to stick to is so-called "lower camel case", where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.
  • Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.
  • Variables are case sensitive — so myage is a different variable to myAge.
  • One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like var, function, let, and for as variable names. Browsers will recognize them as different code items, and so you'll get errors.

Note: You can find a fairly complete list of reserved keywords to avoid at Lexical grammar — keywords.

Good name examples:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

Bad name examples:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

Error-prone name examples:

var
Document

Prueba a crear unas cuantas variables más, con la siguiente guía en mente.

Tipos de variables

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles you'll learn about them in more detail.

So far we've looked at the first two, but there are others.

Números

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

var myAge = 17;

Strings

Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise JavaScript will try to intepret it as another variable name.

var dolphinGoodbye = 'So long and thanks for all the fish';

Booleanos

Booleans are true/false values — they can have two values, true or false. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:

var iAmAlive = true;

Whereas in reality it would be used more like this:

var test = 6 < 3;

This is using the "less than" operator (<) to test whether 6 is less than 3. As you might expect, it will return false, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.

Arrays

An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:

var myNameArray = ['Chris', 'Bob', 'Jim'];
var myNumberArray = [10,15,40];

Once these arrays are defined, you can access each value by their location within the array. Try these lines:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.

You'll learn a lot more about arrays in a future article.

Objetos

In programming, an object is a structure of code that models a real life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

Try entering the following line into your console:

var dog = { name : 'Spot', breed : 'Dalmatian' };

To retrieve the information stored in the object, you can use the following syntax:

dog.name

We won't be looking at objects any more for now — you can learn more about those in a future module.

Loose typing

JavaScript is a "loosely typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (e.g. numbers, strings, arrays, etc).

For example, if you declare a variable and give it a value encapsulated in quotes, the browser will treat the variable as a string:

var myString = 'Hello';

It will still be a string, even if it contains numbers, so be careful:

var myNumber = '500'; // oops, this is still a string
typeof(myNumber);
myNumber = 500; // much better — now this is a number
typeof(myNumber);

Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special function called typeof() — this returns the data type of the variable you pass into it. The first time it is called, it should return string, as at that point the myNumber variable contains a string, '500'. Have a look and see what it returns the second time you call it.

Summary

By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.

 

 

 

Etiquetas y colaboradores del documento

Colaboradores en esta página: JaviMartain, Dhelarius
Última actualización por: JaviMartain,