FundamentosdeJavaScript

EN ESTE ARTCULO
1.

Que es JavaScript realmente?

2.
1.

Ejemplo "Hola Mundo"

Qu ha ocurrido?

3.
1.

Language basics crash course

Variables

2.
3.

Comentarios
Operadores

4.
5.

Conditionals
Functions

6.
4.
1.
2.
5.

Events
Supercharging our example website
Adding an image changer
Adding a personalized welcome message
Conclusion
Este articulo necesita una revisin editorial.
This translation is incomplete. Please help translate this article from English.
AnteriorSiguiente
JavaScript es el lenguaje de programacin que debes usar para adicionar
caractersticas interactivas a tu Sitio Web, por ejemplo juegos, eventos que ocurren
cuando los botones son presionados o los datos son ingresados en los formularios,
efectos de estilo dinmicos, animacin, y mucho mas. Fundamentos de JavaScript
te dar una idea de lo que es posible hacer con este extraordinario lenguaje, y como
empezar.

Que es JavaScript realmente?

JavaScript es un robusto lenguaje de programacionque puede ser aplicado a un
documento HTML y usado para crear interactividad dinmica en los sitios web. Fue
inventado por Brendan Eich, co-fundador del proyecto Mozilla, Mozilla Foundation y la
Corporacin Mozilla .
Puedes hacer casi cualquier cosa con Javascript. Puedes empezar con pequeas
caractersticas como el ajuste de diseos, haciendo que algunas cosas pasen cuando un
botn es presionado, carrusel, y galerias de imgenes pero eventualmente como vas
adquiriendo experiencia con el lenguaje estars en capacidad de crear juegos, grficos 2D
y 3D animados, aplicaciones con bases de datos, y mas.

JavaScript por si solo es bastante compacto, pero es muy flexible, y los desarrolladores
han escrito gran cantidad de herramientas basados en el ncleo del lenguaje JavaScript
para proveer acceso a diversas funcionalidades mas fcilmente. Esto Incluye:

Interfaces de Programacin de Aplicaciones (APIs) construidas dentro de los web

browsers que permiten hacer cualquier cosa, desde crear contenido HTML y establecer
estilos CSS , hasta capturar y manipular un video desde la webcam , o generar graficos 3D

y sonidos de ejemplo.
APIs de Tercera Generacin, para permitir incluir en sus sitios, funcionalidades de
otros propietarios como Twitter o Facebook.

Frameworks de tercera generacion y libreriasque puedes aplicar a tu HTML para

que puedas construir y publicar rapidamente sitios y aplicaciones.

Ejemplo "Hola Mundo"

La siguiente seccion suena realmente emocionante, y deberia serlo JavaScript es una
de las tecnologias web mas emocionantes, y cuando comiences a ver lo bueno de ello en
tus sitios web entraras en una nueva dimension de energia y creatividad.
SIN EMBARGO, JavaScript es un poco mas complejo de usar con HTML y CSS, y deberas
comenzar poco a poco, y continuar trabajando en pequeos pasos. Para comenzar,
mostraremos como aadir Javascript Basico a su pagina, pra crear el ejemplo de "Hola
Mundo" (El estandar en los ejemplos basicos de programacin.)
Importante: Si no has estado a lo largo del resto del curso, descarga este codigo de
ejemplo y usalo como punto de partida.
1.

Primero, ve a tu sitio de pruebas y crea un nuevo archivo llamado main.js.

Guardalo en tu carpeta scripts.

2.
A continuacin, abre tu archivo index.html e introduce lo siguiente en una nueva
linea justo antes de la etiqueta de cierre </body>:
<script src="scripts/main.js"></script>
3.

Esto hace bsicamente el mismo trabajo que el elemento <link> para CSS
aplica el ccdigo Javascript a la pgina, para que pueda actuar sobre el HTML (y CSS, o

4.
5.

cualquier cosa en la pgina).

Ahora aade el siguiente cdigo al archivo main.js:
var myHeading = document.querySelector('h1');
myHeading.innerHTML = 'Hello world!';

6.

Ahora asegrate de que has guardado los archivos HTML y JavaScript, y

abre index.html en el navegador. Deberas ver algo as:

Nota: La razn 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,
podra no funcionar, ya que ha sido cargado antes que el HTML sobre el que se supone
debe trabajar. Por lo tanto, cerca del final de la pgina es a veces la mejor estrategia.

Qu ha ocurrido?
El texto de tu cabecera ha sido cambiado por "Hello world!" usando Javascript. Hicimos
esto primero usando la funcin querySelector() para obtener una referencia al nuestra
cabecera, y almacenarla en una variable llamada myHeading. Esto es muy similar a lo
que hicimos con CSS usando selectores queremos hacer algo con un elemento, as que
tenemos que seleccionarlo primero..
Despus de eso, , establecimos el valor de la propiedad innerHTML de la
variable myHeading (que representa el contenido de la cabecera) como "Hello world!".

Conceptos bsicos del idioma del curso accidente

Vamos a explicar algunas de las caractersticas bsicas del lenguaje JavaScript, para darle
un poco ms de entender cmo funciona todo.
Importante : En este artculo, intente introducir los ejemplos de lneas de cdigo en su
consola de navegador para ver qu pasa. Para ms detalles sobre las consolas del
explorador, consulte Descubrir las herramientas de desarrollo del navegador .
Nota : Estas caractersticas son comunes a todos los lenguajes de programacin. Si usted
puede entender estos fundamentos, usted debera ser capaz de hacer un nuevo comienzo
en la programacin de casi cualquier cosa.

Variables
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:
fue myVariable ;

Nota: Todas las lineas en JS deben acabar en punto y coma, para indicar que es ah
donde termina la lnea. Si no los incluyes puedes obtener resultados inesperados.
Nota: Puedes llamar a una variable con casi cualquier nombre, pero hay algunas
restricciones (ver este artculo sobre las reglas existentes.)
Nota: JavaScript distingue entre maysculas y minsculas myVariable es una variable
distinta a myvariable. Si ests teniendo problemas en tu cdigo, revisa las maysculas y
minsculas.
Tras declarar una variable, puedes asignarle un valor:
myVariable = 'Bob' ;

Puedes hacer las dos cosas en la misma lnea s lo necesitas:

var myVariable = 'Bob' ;

Puedes obtener el valor de la variable llamndola por su nombre:

myVariable ;

Despus de haberle dado un valor a la variable, puedes volver a cambiarlo:

var myVariable = 'Bob';
myVariable = 'Steve';

Ntese que las variables tienen distintos tipos de datos:

Variable

Explicacin

Ejemplo

Una cadena de texto. Para indicar

Cuerda

que la variable es un string, debes

escribirlo entre comillas.

Nmero

var myVariable = 'Bob';

fue myVariable = 10;

Un nmero. Los nmeros no tienen

Variable

Explicacin

Ejemplo

comillas.

Boolean

Tienen valor
verdadero/falso. true/false son
palabras especiales en JS, y no
necesitan comillas.

var myVariable = true;

var myVariable =

Formaci
n

Una estructura que te permite

[1,'Bob','Steve',10];

almacenar varios valores en una

sola referencia.

Llama a cada miembro del array

as:myVariable[0], myVariable[1],
etc.

Objeto

Bsicamente, cualquier cosa. Todo

var myVariable =

en Javascript es un objeto, y puede

ser almacenado en una variable.

document.querySelector('h1');

Mantn esto en mente mientras

aprendes.

Todos los ejemplos anteriores

tambin.

Entonces, para qu necesitamos las variables? Las variables son necesarias para hacer
cualquier cosa interesante en programacin. Si los valores no pudieran cambiar, entonces
no podras hacer nada dinmico, como personalizar un mensaje de bienvenida de un
usuario que visita tu pgina, cambiar la imagen que se muestra en una galera de
imgenes, etc.

Comentarios
puedes escribir comentarios entre el cdigo JavaScript, igual que puedes en CSS. En
JavaScript, los comentarios de una sola lnea se escrben as:
// Esto es un comentario

Pero tambin puedes escribir comentarios en ms de una lnea, igual que en CSS:
/*
Esto es un comentario
de varias lneas.
*/

Operadores
Un operador es bsicamente un smbolo matemtico que puede actuar sobre dos valores
(o variables) y producir un resultado. En la tabla de abajo aparecen los operadores ms
simples, con algunos ejemplos para probarlos en la consola del navegador.
Operador

Explicacin

Suma/concatenaci
n

Se usa para sumar dos

Resta,

stos hacen lo que

multiplicacin,
divisin

Operador de
asignacin

identidad/igualdad

Negacin, distinto
(no igual)

nmeros, o juntar dos

strings en uno.

esperarras que hicieran

en las matmticas

Smbolo(s
)

s, y devuelve un valor
detrue/false (booleano).

"Hola" "mundo!" +;

8 * 2; // La
-,*,/

multiplicacin en JS
es un asterisco
9 / 3;

Los has visto

Comprueba si dos
valores son iguales entre

6 + 9;

9 - 3;

bsicas.

anteriormente: asigna un
valor a una variable.

Ejemplo

===

var myVariable =
'Bob';

fue myVariable = 3;
=== myVariable 4;

! , ! ==

En ocasiones utilizado
con el operador de
identidad, la negacin es
en JS el equivalente al
operador lgico NOT
cambia true por false y
viceversa.

La expresin bsica
es true, pero la
comparacin
devuelve false porque
lo hemos negado:
fue myVariable = 3;
! === myVariable 3;

Aqu estamos
comprobando
"esmyVariable NO
igual a 3". Esto
devuelvefalse, porque

Operador

Explicacin

Smbolo(s
)

Ejemplo

ES igual a 3.
fue myVariable = 3;
! myVariable == 3;

Hay mucho 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 extraos cuando se hacen
clculos, as que asegrate de que relacionas tus variabables correctamente y de que
recibes los resultados que esperabas. Por ejemplo, intoduce "35" + "25" en tu consola.
Por qu no obtienes lo que esperabas? Porque las comillas convierten los nmeros en
strings has acabado con los strings concatenados entre s, y no con los nmeros
sumados. Si introduces 35 + 25, obtendrs el resultado correcto.

Condicionales
Los condicionales son estructuras de cdigo que permiten poner a prueba si una expresin
devuelve verdadero o no y, a continuacin, ejecutar cdigo diferente en funcin del
resultado. La forma ms comn de la condicin se llama if ... else . As, por ejemplo:
var helado = "chocolate" ;
si ( helado === "chocolate" ) {
alerta ( "Yay, me encanta el helado de chocolate!" ) ;
} otra cosa {
alerta ( "Awwww, pero el chocolate es mi favorito ... ' ) ;
}

La expresin en el caso (...) es la prueba - esto utiliza el operador de identidad (como se

describi anteriormente) para comparar la variable de heladocon la cadena de
chocolate para ver si los dos son iguales. Si esta comparacin devuelve verdadero ,

ejecute el primer bloque de cdigo. Si no, vaya ese cdigo y ejecutar el segundo bloque de
cdigo despus de la otra declaracin.

Funciones
Funciones son una forma de encapsular la funcionalidad que desea volver a utilizar, por lo
que puede llamar a esa funcin con un nico nombre de la funcin, y no tener que escribir
todo el cdigo una y otra vez cada vez que lo utilice. Usted ya ha visto algunas de las
funciones anteriores, por ejemplo:

1.
2.

var myVariable = documento . querySelector ( 'h1' ) ;

alerta ( 'hola!' ) ;

Estas funciones estn integradas en el navegador para su uso en cualquier momento.

Si usted ve algo que se parece a un nombre de variable, pero tiene soportes - () - despus
de l, es probable que sea una funcin. Funciones a menudo toman argumentos - bits de
datos que necesitan para hacer su trabajo. Estos se colocan dentro de los corchetes, y
separados por comas si hay ms de uno.
Por ejemplo, el de alerta () funcin hace un cuadro emergente aparece dentro de la
ventana del navegador, pero tenemos que darle una cadena como argumento para decirle
cul es el mensaje que se supone que escriba en el cuadro emergente.
La buena noticia es que usted puede definir sus propias funciones - en el siguiente ejemplo
se escribe una funcin simple que toma dos nmeros como argumentos y mltiplos ellos
juntos:
funcin de multiplicar ( num1 , num2 ) {
var resultado = num1 * num2 ;
retorno resultado ;
}

Intente ejecutar la funcin anterior en la consola, y luego tratar de utilizar su nueva funcin
de un par de veces, por ejemplo:
multiplicar ( 4 , 7 ) ;
multiplican ( 20 , 20 ) ;
multiplican ( 0,5 , 3 ) ;

Nota : El retorno comunicado indica al navegador para devolver el resultado variable de

salida de la funcin para que est disponible para su uso. Esto es necesario porque las
variables definidas dentro de funciones slo estn disponibles dentro de esas
funciones. Esto se llama la variable de alcance (leer ms en mbito de las variables aqu .)

Eventos
Para crear interactividad real en un sitio web, usted tiene que utilizar eventos - estas son
las estructuras de cdigo que escucha por las cosas que suceden en el navegador, y luego
le permiten ejecutar cdigo en respuesta a esas cosas que suceden. El ejemplo ms obvio
es el evento click , que se dispar por el navegador cuando el ratn hace clic en algo. Para
demostrar esto, pruebe a introducir lo siguiente en la consola, a continuacin, hacer clic en
la pgina Web actual:
documento . querySelector ( 'html' ) . onclick = funcin ( ) {
alerta ( "Ouch Deja de meter!" ) ;

Hay muchas formas de adjuntar un evento a un elemento; aqu estamos seleccionando el

elemento HTML y haciendo su onclick propiedad manejador igual a una funcin annima
(una funcin sin nombre) que contiene el cdigo que queremos que se ejecute cuando se
produce el evento click.
Tenga en cuenta que
documento . querySelector ( 'html' ) . onclick = funcin ( ) { } ;

es equivalente a
var myHTML = documento . querySelector ( 'html' ) ;
myHTML . onclick = funcin ( ) { } ;

Es slo un camino ms corto para escribirlo.

Sobrealimentacin nuestro ejemplo el sitio web

Ahora que hemos revisado algunos conceptos bsicos de JavaScript, vamos a aadir un
par de caractersticas bsicas fresco a nuestro sitio ejemplo para darle algunos primeros
pasos en lo que es posible.

Adicin de un cambiador de imagen

En esta seccin vamos a aadir otra imagen a nuestro sitio, y aadimos algunos simples
JavaScript para cambiar entre los dos cuando la imagen se hace clic en.
1.

En primer lugar, busca otra imagen que desea ofrecer en su sitio. Asegrese de
que es el mismo tamao que la primera imagen, o lo ms cerca posible.

2.

Guarda la imagen en tu imgenes carpeta.

3.

Vaya a su main.js archivo, e introduzca la siguiente JavaScript (si tu mundo hola

JavaScript est todava all, eliminarlo):

4.
var myImage = documento . querySelector ( 'img' ) ;
5.
6.
myImage . onclick = function ( ) {
7.
var mySrc = myImage . getAttribute ( 'src' ) ;
8.
if ( mySrc === 'images/firefox-icon.png' ) {
9.
myImage . setAttribute ( 'src' , 'images/firefox2.png' ) ;
10.
} else {
11.
myImage . setAttribute ( 'src' , 'images/firefox-icon.png' ) ;
12.
}
}
13.

Guarde todos los archivos y carga index.html en el navegador. Ahora al hacer clic
en la imagen, se debe cambiar a la otra!

As que aqu, estamos almacenando una referencia a nuestro elemento de imagen en

la myImage variable. A continuacin, hacemos de esta variable onclickpropiedad
controlador de eventos igual a una funcin annima. Ahora, cada vez que este elemento
se hace clic en la imagen:
1.
2.

Recuperamos el valor de de la imagen src atributo.

Utilizamos un condicional para comprobar si el src valor es igual a la ruta a la

imagen original:
1.
Si lo es, cambiamos el src valor a la ruta de la segunda imagen, obligando
a la otra imagen para ser cargado dentro de la <imagen> elemento.
2.

Si no lo est (lo que significa que ya debe haber cambiado), cambiamos

el src valor de nuevo a la ruta de la imagen original, para darle la vuelta de nuevo a lo que
era originalmente.
Adicin de un mensaje de bienvenida personalizado
A continuacin vamos a aadir otro poco de cdigo, para cambiar el ttulo de la pgina
para incluir un mensaje de bienvenida personalizado cuando el usuario navega por primera
vez al sitio. Este mensaje de bienvenida se mantendr cuando el usuario abandona el sitio
y luego regresa. Tambin vamos a incluir una opcin para cambiar el usuario y por lo tanto
el mensaje de bienvenida en cualquier momento que se requiera.

1.

En index.html , aada la siguiente lnea justo antes de la <script> elemento:

< tecla > Cambiar usuario </ botn >

2.

En main.js , agregue el siguiente cdigo en la parte inferior del archivo,

exactamente como est escrito - esto toma referencias al nuevo botn hemos aadido y el
ttulo, y los almacena en las variables:
3.
var myButton = documento . querySelector ( 'botn' ) ;
var myHeading = documento . querySelector ( 'h1' ) ;
4.

Ahora agregue la siguiente funcin para establecer el saludo personalizado - esto

no va a hacer nada, pero vamos a utilizar ms adelante:

5.
6.
7.
8.

funcin setUserName ( ) {
var myName = prompt ( "Introduzca su nombre. ' ) ;
localStorage . setItem ( 'nombre' , myName ) ;
myHeading . .innerHTML = "Mozilla es fresco, ' + myName ;
}

Esta funcin contiene un smbolo () funcin, que muestra un cuadro de dilogo un poco
como de alerta () hace; la diferencia es que prompt ()pide al usuario que introduzca
algunos datos, y almacena los datos en una variable cuando el cuadro de
dilogo Aceptar se pulsa el botn. En este caso, estamos pidiendo al usuario que
introduzca su nombre. A continuacin, hacemos un llamado a una API
llamada localStorage , lo que nos permite almacenar datos en el navegador, y recuperarlo
ms adelante. Utilizamos de localStorage setItem () funcin para crear y almacenar un
elemento de datos llamado "nombre" y establezca su valor a la myName variable que
contiene el nombre de usuario introducido. Por ltimo, nos fijamos el innerHTML de la
rbrica en una cadena, adems del nombre del usuario.

9.

A continuacin, agregue esta persona si ... bloquear - que podramos llamar el

cdigo de la inicializacin, como lo establece la aplicacin cuando se carga por primera
vez:

10.
11.
12.
13.
14.

if ( ! localStorage . getItem ( 'name' ) ) {

setUserName ( ) ;
} else {
var storedName = localStorage . getItem ( 'name' ) ;
myHeading . innerHTML = 'Mozilla es fresco, ' + storedName ;
}

Este bloque utiliza primero el operador de negacin (NOT lgico) para comprobar si
el nombre existe elemento de datos - si no existe, el setUserName () la funcin se
ejecuta para crearlo. Si ya existe (es decir, el usuario establece que cuando previamente
visitaron el sitio), recuperamos el nombre almacenado utilizando getItem () y establezca
el innerHTML de la rbrica en una cadena, adems del nombre del usuario, el mismo que
hicimos en el interior setUserName () .
15.

Por ltimo, poner el siguiente onclick controlador de eventos en el botn, por lo

que al hacer clic el setUserName () se ejecuta la funcin. Esto permite al usuario

16.
17.

establecer un nuevo nombre cuando lo deseen pulsando el botn:

myButton . onclick = funcin ( ) {
setUserName ( ) ;
}
Ahora la primera vez que visita el sitio, te pedir tu nombre de usuario y luego darle un
mensaje personalizado. A continuacin, puede cambiar el nombre de cualquier momento
que desee oprimiendo el botn. Como bono adicional, porque el nombre se almacena
dentro localStorage, persiste despus de que el sitio est cerrado, por lo que el mensaje
personalizado todava estar all cuando se abre el sitio de nuevo!

Conclusin
Si usted ha seguido todas las instrucciones de este artculo, usted debe terminar con una
pgina que se ve algo como esto (tambin puede ver nuestra versin aqu ):