Lic.

Alejandro Licon Programación WEB

JavaScript Elemental

Objetivos
Competencias:

1. Comenzar con este lenguaje extraordinario

2. Tener una idea de qué es posible hacer con el lenguaje
3. Conocer los elementos basicos

Introducción Teórica

JavaScript es el lenguaje de programación que debes usar para añadir características

interactivas a tu Sitio Web, (por ejemplo, juegos, eventos que ocurren cuando los botones son
presionados o los datos son introducidos en los formularios, efectos de estilo dinámicos,
animación, y mucho más).

¿Qué es JavaScript realmente?

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

1
Lic. Alejandro Licon Programación WEB

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.

Presentaremos algunos aspectos del núcleo del lenguaje, y también jugarás con unas pocas
características del API del navegador.

Fundamentos del lenguaje

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: Se trata de introducir las líneas de código de ejemplo en la consola de tu navegador

para ver lo que sucede.

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:

var nombreDeLaVariable;

Nota: Todas las líneas 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.

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';

2
Lic. Alejandro Licon Programación WEB

nombreDeLaVariable = 'Steve';

Nótese que las variables tienen distintos tipos de datos:

Variable Explicación Ejemplo

Una cadena de texto. Para indicar que la
String variable es una cadena, debes escribirlo var miVariable = 'Bob';
entre comillas.

Un número. Los números no tienen

Number comillas. var miVariable = 10;

Tienen valor verdadero /

Boolean falso. true/false son palabras especiales var miVariable = true;
en JS, y no necesitan comillas.

var miVariable = [1,'Bob','Steve',10];

Una estructura que te permite almacenar
Array varios valores en una sola referencia.
Llama a cada miembro del array
así: miVariable[0], miVariable[1], etc.
Básicamente cualquier cosa. Todo en
JavaScript es un objeto y puede ser
almacenado en una variable. Mantén esto var miVariable = document.querySelector('h1');
Object
en mente mientras aprendes. 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.

Comentarios

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.
*/

Operadores

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

Se usa para sumar dos números, o 6 + 9;

Suma/concatenación +
juntar dos cadenas en una. "Hola " + "mundo!";

3
Lic. Alejandro Licon Programación WEB

Operador Explicación Símbolo(s) Ejemplo

Resta, 9 - 3;
Éstos hacen lo que esperarías que
8 * 2; // La multiplicación
multiplicación, hicieran en las matemáticas -, *, /
en JS es un asterisco
división básicas. 9 / 3;

Operador de Los has visto anteriormente: asigna

= var miVariable = 'Bob';
asignación un valor a una variable.

Comprueba si dos valores son

var miVariable = 3;
identidad/igualdad iguales entre sí, y devuelve un valor ===
miVariable === 4;
de true/false (booleano).

La expresión básica
es true, pero la
comparación
devuelve false porque lo
hemos negado:
En ocasiones utilizado con el var miVariable = 3;
Negación, distinto operador de identidad, la negación !miVariable === 3;
!, !==
(no igual) es en JS el equivalente al operador Aquí estamos
lógico NOT — comprobando
cambia true por false y viceversa. "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.

Condicionales

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.,

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.

4
Lic. Alejandro Licon Programación WEB

Funciones

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:

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

2. 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

Eventos

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 página actual:

5
Lic. Alejandro Licon Programación WEB

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 más corto de escribirlo.