�Qu� es JavaScript realmente?

Secci�n
JavaScript es un robusto lenguaje de programaci�n que puede ser aplicado a un
documento HTML y usado para crear interactividad din�mica en los sitios web. Fue
inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y
la Corporaci�n Mozilla .

Puedes hacer casi cualquier cosa con JavaScript. Puedes empezar con peque�as cosas
como carruseles, galer�as de im�genes, dise�os fluctuantes, y respuestas a las
pulsaciones de botones. Con m�s experiencia, ser�s capaz de crear juegos,
animaciones 2D y gr�ficos 3D, aplicaciones integradas basadas en bases de datos, �y
mucho m�s!.

JavaScript por si solo es bastante compacto aunque muy flexible, y los

desarrolladores han escrito gran cantidad de herramientas encima del n�cleo del
lenguaje JavaScript, desbloqueando una gran cantidad de funcionalidad adicional con
un m�nimo esfuerzo. Esto incluye:

Interfaces de Programaci�n de Aplicaciones del Navegador (APIs) � APIs construidas

dentro de los navegadores que ofrecen funcionalidades como crear din�micamente
contenido HTML y establecer estilos CSS, hasta capturar y manipular un v�deo desde
la c�mara web del usuario, o generar gr�ficos 3D y muestras de sonido.
APIs de Terceros, que permiten a los desarrolladores incorporar funcionalidades en
sus sitios de otros proveedores de contenidos como Twitter o Facebook.
Marcos de trabajo y librer�as de terceros que puedes aplicar a tu HTML para que
puedas construir y publicar r�pidamente sitios y aplicaciones.
Ya que se supone que este art�culo es s�lo una introducci�n ligera a JavaScript, no
vamos a confundirte en esta etapa hablando en detalle sobre cu�l es la diferencia
entre el n�cleo del lenguaje JavaScript y las diferentes herramientas listadas
arriba. Puedes aprender todo eso en detalle m�s tarde, en nuestra �rea de
Aprendizaje en MDN, y en el resto del MDN.

Debajo te presentaremos algunos aspectos del n�cleo del lenguaje, y tambi�n jugar�s
con unas pocas caracter�sticas del API del navegador.

Ejemplo "Hola Mundo"Secci�n

La secci�n de arriba suena realmente emocionante, y deber�a serlo � JavaScript es
una de las tecnolog�as web m�s emocionantes, y cuando comiences a ser bueno en su
uso, tus sitios web entrar�n en una nueva dimensi�n de energ�a y creatividad.

Sin embargo, sentirse c�modo con JavaScript es un poco m�s dif�cil que sentirse
c�modo con HTML y CSS . Deber�s comenzar poco a poco y continuar trabajando en
pasos peque�os y consistentes. Para comenzar, mostraremos c�mo a�adir JavaScript
b�sico a tu p�gina, creando un "�Hola Mundo!" de ejemplo (el est�ndar en los
ejemplos b�sicos de programaci�n.)

Importante: Si no ha estado siguiendo el resto de nuestro curso, descarga este

c�digo de ejemplo y �salo como punto de partida.

Primero, ve a tu sitio de pruebas y crea una carpeta llamada 'scripts' (sin las
comillas). Luego, dentro de la nueva carpeta de scripts que acabas de crear, crea
un nuevo archivo llamado main.js. Gu�rdalo en tu carpeta scripts.
A continuaci�n, abre tu archivo index.html e introduce el siguiente elemento en una
nueva l�nea, justo antes de la etiqueta de cierre </body>:
<script src="scripts/main.js"></script>
Esto hace b�sicamente el mismo trabajo que el elemento <link> para CSS � aplica el
c�digo JavaScript a la p�gina, para que pueda actuar sobre el HTML (y CSS, o
cualquier cosa en la p�gina).
Ahora a�ade el siguiente c�digo al archivo main.js:
var miTitulo = document.querySelector('h1');
miTitulo.innerHTML = 'Hello world!';
Finalmente, aseg�rate de que has guardado los archivos HTML y JavaScript, y abre
index.html en el navegador. Deber�as ver algo as�:
Nota: La raz�n por la que hemos puesto el elemento <script> casi al final del
documento HTML es porque el navegador carga el HTML en el orden en que aparece en
el archivo. Si se cargara primero JavaScript y se supone que debe afectar al HTML
que tiene debajo, podr�a no funcionar, ya que ha sido cargado antes que el HTML
sobre el que se supone debe trabajar. Por lo tanto, colocar el JavaScript cerca del
final de la p�gina es normalmente la mejor estrategia.

�Qu� ha ocurrido?Secci�n
El texto del t�tulo ha sido cambiado por "Hello world!" usando JavaScript. Hicimos
esto primero usando la funci�n querySelector() para obtener una referencia al
t�tulo y almacenarla en una variable llamada miTitulo. Esto es muy similar a lo que
hicimos con CSS usando selectores � queremos hacer algo con un elemento, as� que
tenemos que seleccionarlo primero.

Despu�s de eso, establecimos el valor de la propiedad innerHTML de la variable

miTitulo (que representa el contenido del t�tulo) como "Hello world!".

Curso intensivo de fundamentos del lenguajeSecci�n

Vamos a explicar algunas de las funciones b�sicas del lenguaje JavaScript para que
puedas comprender mejor c�mo funciona todo. Mejor a�n, estas caracter�sticas son
comunes para todos los lenguajes de programaci�n. Si puedes entender esos
fundamentos, deber�as ser capaz de comenzar a programar en casi cualquier cosa.

Importante: En este art�culo, trata de introducir las lineas de c�digo de ejemplo

en la consola de tu navegador para ver lo que sucede. Para m�s detalles sobre
consolas JavaScript, mira Descubrir herramientas para el desarrollador del
navegador (en ingl�s).

VariablesSecci�n
Las variables son contenedores en los que puedes almacenar valores. Primero debes
declarar la variable con la palabra clave var, seguida del nombre que le quieras
dar:

var nombreDeLaVariable;
Nota: Todas las lineas en JS deben acabar en punto y coma para indicar que es ah�
donde termina la l�nea. Si no los incluyes puedes obtener resultados inesperados.

Nota: Puedes llamar a una variable con casi cualquier nombre, pero hay algunas
restricciones (ver este art�culo sobre las reglas existentes).

Nota: JavaScript distingue entre may�sculas y min�sculas � miVariable es una

variable distinta a mivariable. Si est�s teniendo problemas en tu c�digo, revisa
las may�sculas y min�sculas.

Tras declarar una variable, puedes asignarle un valor:

nombreDeLaVariable = 'Bob';
Puedes hacer las dos cosas en la misma l�nea si lo necesitas:

var nombreDeLaVariable = 'Bob';

Puedes obtener el valor de la variable llam�ndola por su nombre:

nombreDeLaVariable;
Despu�s de haberle dado un valor a la variable, puedes volver a cambiarlo:

var nombreDeLaVariable = 'Bob';

nombreDeLaVariable = 'Steve';
N�tese que las variables tienen distintos tipos de datos:

Variable Explicaci�n Ejemplo

String Una cadena de texto. Para indicar que la variable es una cadena, debes
escribirlo entre comillas. var miVariable = 'Bob';
Number
Un n�mero. Los n�meros no tienen comillas.

var miVariable = 10;

Boolean Tienen valor verdadero/falso. true/false son palabras especiales en JS,
y no necesitan comillas. var miVariable = true;
Array Una estructura que te permite almacenar varios valores en una sola
referencia. var miVariable = [1,'Bob','Steve',10];
Llama a cada miembro del array as�: miVariable[0], miVariable[1], etc.
Object
B�sicamente cualquier cosa. Todo en JavaScript es un objeto y puede ser almacenado
en una variable. Mant�n esto en mente mientras aprendes.

var miVariable = document.querySelector('h1');

Todos los ejemplos anteriores tambi�n.
Entonces, �para qu� necesitamos las variables? Las variables son necesarias para
hacer cualquier cosa interesante en programaci�n. Si los valores no pudieran
cambiar, entonces no podr�as hacer nada din�mico, como personalizar un mensaje de
bienvenida de un usuario que visita tu p�gina, cambiar la imagen que se muestra en
una galer�a de im�genes, etc.

ComentariosSecci�n
Puedes escribir comentarios entre el c�digo JavaScript, igual que puedes en CSS. En
JavaScript, los comentarios de una sola l�nea se escriben as�:

// Esto es un comentario
Pero tambi�n puedes escribir comentarios en m�s de una l�nea, igual que en CSS:

/*
Esto es un comentario
de varias l�neas.
*/
OperadoresSecci�n
Un operador es b�sicamente un s�mbolo matem�tico que puede actuar sobre dos valores
(o variables) y producir un resultado. En la tabla de abajo aparecen los operadores
m�s simples, con algunos ejemplos para probarlos en la consola del navegador.

Operador Explicaci�n S�mbolo(s) Ejemplo

Suma/concatenaci�n Se usa para sumar dos n�meros, o juntar dos cadenas en una.
+ 6 + 9;
"Hola " + "mundo!";
Resta, multiplicaci�n, divisi�n �stos hacen lo que esperar�as que hicieran en
las matem�ticas b�sicas. -, *, / 9 - 3;
8 * 2; // La multiplicaci�n en JS es un asterisco
9 / 3;
Operador de asignaci�n Los has visto anteriormente: asigna un valor a una
variable. = var miVariable = 'Bob';
identidad/igualdad Comprueba si dos valores son iguales entre s�, y devuelve
un valor de true/false (booleano). === var miVariable = 3;
miVariable === 4;
Negaci�n, distinto (no igual)
En ocasiones utilizado con el operador de identidad, la negaci�n es en JS el
equivalente al operador l�gico NOT � cambia true por false y viceversa. !, !==
La expresi�n b�sica es true, pero la comparaci�n devuelve false porque lo hemos
negado:

var miVariable = 3;
!miVariable === 3;

Aqu� estamos comprobando "es miVariable NO igual a 3". Esto devuelve false, porque
ES igual a 3.

var miVariable = 3;
miVariable !== 3;

Hay muchos operadores por explorar, pero con esto ser� suficiente por ahora. Mira
Expresiones y operadores para ver la lista completa.

Nota: Mezclar tipos de datos puede dar lugar a resultados extra�os cuando se hacen
c�lculos, as� que aseg�rate de que relacionas tus variables correctamente y de que
recibes los resultados que esperabas. Por ejemplo, teclea: "35" + "25" en tu
consola. �Por qu� no obtienes lo que esperabas? - Porque las comillas convierten
los n�meros en "strings" (el t�rmino ingl�s para denominar cadenas de caracteres) �
y has acabado con los "strings" concatenados entre s�, y no con los n�meros
sumados. Si tecleas: 35 + 25, obtendr�s el resultado correcto.

CondicionalesSecci�n
Las Condicionales son estructuras de c�digo que permiten comprobar si una expresi�n
devuelve true o no, y despu�s ejecuta un c�digo diferente dependiendo del
resultado. La forma de condicional m�s com�n es la llamada if ... else. Entonces,
por ejemplo:

var helado = 'chocolate';

if (helado === 'chocolate') {
alert('�Si, amo el helado de chocolate!');
} else {
alert('Awwww, pero mi favorito es el de chocolate...');
}
La expresi�n dentro de if ( ... ) es el criterio � este usa al operador de
identidad (descrito arriba) para comparar la variable helado con la cadena
chocolate para ver si las dos son iguales. Si esta comparaci�n devuelve true, el
primer bloque de c�digo se ejecuta. Si no, ese c�digo se omite y se ejecuta el
segundo bloque de c�digo despu�s de la declaraci�n else.

FuncionesSecci�n
Las funciones son una manera de encapsular una funcionalidad que quieres
reutilizar, de manera que puedes llamar esa funci�n con un solo nombre, y no
tendr�s que escribir el c�digo entero cada vez que la utilices. Ya has visto
algunas funciones m�s arriba, por ejemplo:

var nombreDeLaVariable = document.querySelector('h1');

alert('Hola!');
Estas funciones est�n integradas en el navegador para poder utilizarlas en
cualquier momento.

Si ves algo que parece un nombre de variable, pero tiene par�ntesis � () � al

final, probablemente es una funci�n. Las funciones con frecuencia toman arguments �
pedazos de datos que necesitan para hacer su trabajo. Estos se colocan dentro de
los par�ntesis, y se separan con comas si hay m�s de uno.

Por ejemplo, la funci�n alert() hace aparecer una ventana pop-up dentro de la
ventana del navegador, pero nosotros necesitamos asignarle una cadena como un
argumento para decirle qu� mensaje se debe escribir en la ventana pop-up.

Las buenas noticias son que podemos definir nuestras propias funciones � en el
siguiente ejemplo escribimos una funci�n simple que toma dos n�meros como
argumentos y los multiplica entre si:

function multiplica(num1,num2) {
var resultado = num1 * num2;
return resultado;
}
Trata de ejecutar la funci�n anterior en la consola. Despu�s trata de usar la nueva
funci�n algunas veces, p.ej:

multiplica(4,7);
multiplica(20,20);
multiplica(0.5,3);
Nota: La sentencia return le dice al navegador que devuelva la variable resultado
fuera de la funci�n, para que est� disponible para su uso. Esto es necesario porque
las variables definidas dentro de funciones, s�lo est�n disponibles dentro de esas
funciones. Esto se conoce como "alcance de la Variable". scoping (lee m�s sobre
variable scoping aqu� (En ingl�s).)

EventosSecci�n
Para crear una interacci�n real en tu sitio WEB, debes usar eventos � Estos son
unas estructuras de c�digo que captan lo que sucede en el navegador, y permite que
en respuesta a las acciones que suceden se ejecute un c�digo. El ejemplo m�s obvio
es un click (click event), que se activa al hacer click sobre algo. Para demostrar
esto, prueba ingresando lo siguiente en tu consola, luego haz click sobre la pagina
actual:

document.querySelector('html').onclick = function() {
alert('Ouch! Deja de pincharme!');
}
Hay muchas maneras de enlazar un evento a un elemento; aqu� hemos seleccionado el
elemento HTML y le asignamos a su propiedad onclick una funci�n an�nima (funci�n
sin nombre) que contiene el c�digo que se ejecutar� cuando el evento suceda.

Nota que

document.querySelector('html').onclick = function(){};
es equivalente a

var miHTML = document.querySelector('html');

miHTML.onclick = function(){};
es solo un modo mas corto de escribirlo.

Sobrealimentando nuestro websiteSecci�n

Ahora vamos a repasar un poco lo b�sico de JavaScript. A�adiremos un par de
funcionalidades a nuestro sitio para demostrar lo que podemos hacer.

A�adiendo un cambiador de imagenSecci�n

En esta secci�n a�adiremos otra imagen a nuestro sitio usando la DOM API y
agregaremos un poco de c�digo para cambiar entre im�genes al hacer click.

Primero que todo, busca una imagen que le guste para su sitio. Aseg�rate que sea
del mismo tama�o que la primera, o lo m�s cerca posible.
Guarda tu imagen en tu carpeta images.
Renombra esta imagen 'firefox2.png' (sin las comillas).
Ve a tu archivo main.js, y agrega el siguiente JavaScript (si tu JavaScript de
"Hola Mundo" est� a�n all�, b�rralo).
var miImage = document.querySelector('img');

miImage.onclick = function () {
var miSrc = miImage.getAttribute('src');
if (miSrc === 'images/firefox-icon.png') {
miImage.setAttribute('src','images/firefox2.png');
} else {
miImage.setAttribute('src', 'images/firefox-icon.png');
}
}
Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas
click en la imagen, �esta debe cambiar por otra!
Se almacena una referencia a tu elemento <img> en la variable miImage. Luego,
hacemos que esta propiedad del manejador de evento onclick de la variable sea igual
a una funci�n sin nombre (una funci�n "an�nima"). Ahora, cada vez que se haga click
en la imagen :

Recuperas el valor del atributo src de la imagen.

Usas una condicional para comprobar si el valor src es igual a la ruta de la imagen
original:
Si es as�, cambias el valor de src a la ruta de la segunda imagen, forzando a que
se cargue la otra imagen en el elemento <img>.
Si no es as� (significa que ya fue modificada), cambiaremos el valor de src
nuevamente a la ruta de la imagen original , regresando a como era en un principio.
A�adiendo un mensaje de bienvenida personalizadoSecci�n
Luego a�adiremos un poco mas de c�digo, para cambiar el t�tulo de la p�gina o
incluir un mensaje personalizado de bienvenida para cuando el usuario ingrese por
primera vez. Este mensaje de bienvenida permanecer� luego de que el usuario
abandone la p�gina y estar� disponible para cuando el regrese - lo guardaremos
usando Web Storage API. Tambi�n se incluir� una opci�n para cambiar el usuario y
por lo tanto tambi�n el mensaje de bienvenida en cualquier momento que se requiera.

En index.html, agrega el siguiente c�digo antes del elemento <script>:

<button>Cambiar de usuario</button>
En main.js, agrega el siguiente c�digo al final del archivo, exactamente como est�
escrito� Esto toma referencia a el nuevo bot�n que agregamos y al titulo, y los
almacena en variables:
var miBoton = document.querySelector('button');
var miTitulo = document.querySelector( 'h1');
Ahora agregaremos la siguiente funci�n para poner el saludo personalizado � esto no
har� nada a�n, pero arreglaremos esto en un momento:
function estableceNombreUsuario() {
var miNombre = prompt('Por favor, ingresa tu nombre.');
localStorage.setItem('nombre', miNombre);
miTitulo.textContent = 'Mozilla es fresco,' + miNombre;
}
Esta funci�n contiene una funci�n prompt(), que crea un cuadro de di�logo como lo
hace alert(); la diferencia es que prompt() pide al usuario un dato, y almacena
este dato en una variable cuando el bot�n OK del cuadro de di�logo es presionado.
En este caso, pediremos al usuario que ingrese su nombre. Luego, llamaremos la API
localStorage, que nos permite almacenar datos en el navegador y recuperarlos luego.
Usaremos la funci�n setItem() de localStorage, que crea y almacena un dato en el
elemento llamado 'nombre', y coloca este valor en la variable miNombre que contiene
el nombre que el usuario ingres�. Finalmente, establecemos el textContent del
t�tulo a una cadena, m�s el nombre de usuario recientemente almacenado.
Luego, agregamos este bloque if ... else � podr�amos llamar a esto el c�digo de
inicializaci�n, como se ha establecido para cuando carga la app por primera vez:
if (!localStorage.getItem('nombre')) {
estableceNombreUsuario();
}
else {
var nombreAlmacenado = localStorage.getItem('nombre');
miTitulo.textContent = 'Mozilla es fresco,' + nombreAlmacenado;
}
Este primer bloque usa el operador negaci�n (logical NOT) para comprobar si el
elemento 'nombre' existe � si no existe, la funci�n estableceNombreUsuario() se
iniciar� para crearlo. Si ya existe (como por ejemplo cuando el usuario ya ingres�
al sitio), recuperamos el dato del nombre usando getItem() y lo fijamos mediante
textContent del titulo a la cadena, m�s el nombre del usuario, como hicimos dentro
de estableceNombreUsuario().
Finalmente, agregamos abajo el evento onclick que manipular� el bot�n, de modo que
cuando sea pulsado se inicie la funci�n estableceNombreUsuario(). Esto permitir�
al usuario establecer un nuevo nombre cada vez que lo desee al pulsar el bot�n:
miBoton.onclick = function() {
estableceNombreUsuario();
}
Ahora cuando visite su sitio por primera vez, este le pedir� su nombre y le dar� un
mensaje personalizado de bienvenida. Puede cambiar cuantas veces quiera el nombre
al presionar el bot�n. Y como un bonus a�adido, ya que el nombre se almacena en el
localStorage, este permanecer� despu�s de que cierre el sitio, �manteniendo ah� el
mensaje personalizado cuando abra el sitio la pr�xima vez!

Conclusi�nSecci�n
Si has seguido las instrucciones en este art�culo, tendr�s una p�gina que luzca
como esta (tambi�n puede ver nuestra versi�n aqu�):

Si tuviste problemas, siempre puedes comparar su trabajo con nuestro c�digo

terminado del ejemplo en Github.

Aqu� s�lo hemos rozado la superficie de JavaScript. Si has disfrutado aprendiendo y

deseas avanzar m�s, visita nuestra Guia JavaScript.

Anterior Overview: Getting started with the webSiguiente

Etiquetas y colaboradores del documento

Etiquetas: Aprender JavaScript Principiante Web
Colaboradores en esta p�gina: mdnwebdocs-bot, yavemu, pablopennisi,
Sergio_Gonzalez_Collado, hamfree, Bluterg, jpmontoya182, sillo01, lfrasae,
bartolocarrasco, nhuamani, ricardormeza, fcojgodoy, soulminato, chech, juanqui,
RaulHernandez, joelomar, welm, derplak, sin_nombre365, germanfr, cgsramirez,
nekludov
�ltima actualizaci�n por: mdnwebdocs-bot, 23 mar. 2019 19:04:17