Anatomía de un documento HTML
Hasta ahora has visto lo básico de elementos HTML individuales, pero estos no son
muy útiles por sí solos. Ahora verás cómo los elementos individuales son combinados
para formar una página HTML entera. Vuelve a visitar el código de tu ejemplo
en index.html (que viste por primera vez en el artículo Manejo de archivos):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Mi pagina de prueba</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
</body>
</html>
Tienes:
<!DOCTYPE html> — el tipo de documento. Es un preámbulo requerido.
Anteriormente, cuando HTML era joven (cerca de 1991/2), los tipos de
documento actuaban como vínculos a un conjunto de reglas que el código HTML
de la página debía seguir para ser considerado bueno, lo que podía significar la
verificación automática de errores y algunas otras cosas de utilidad. Sin embargo,
hoy día es simplemente un artefacto antiguo que a nadie le importa, pero que
debe ser incluido para que todo funcione correctamente. Por ahora, eso es todo lo
que necesitas saber.
<html></html> — el elemento <html>. Este elemento encierra todo el contenido
de la página entera y, a veces, se le conoce como el elemento raíz (root element).
<head></head> — el elemento <head>. Este elemento actúa como un contenedor
de todo aquello que quieres incluir en la página HTML que no es contenido
visible por los visitantes de la página. Incluye cosas como palabras clave
(keywords), una descripción de la página que quieres que aparezca en resultados
de búsquedas, código CSS para dar estilo al contenido, declaraciones del juego de
caracteres, etc.
<meta charset="utf-8"> — <meta>. Este elemento establece el juego de
caracteres que tu documento usará en utf-8, que incluye casi todos los caracteres
de todos los idiomas humanos. Básicamente, puede manejar cualquier contenido
de texto que puedas incluir. No hay razón para no establecerlo, y puede evitar
problemas en el futuro.
<title></title> — el elemento <title> establece el título de tu página, que es el
título que aparece en la pestaña o en la barra de título del navegador cuando la
página es cargada, y se usa para describir la página cuando es añadida a los
marcadores o como favorita.
<body></body> — el elemento <body>. Encierra todo el contenido que deseas
mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos,
juegos, pistas de audio reproducibles, y demás.
Imágenes
Presta atención nuevamente al elemento imagen <img>:
<img src="images/firefox-icon.png" alt="Mi imagen de prueba">
Como ya se dijo antes, incrusta una imagen en la página, en la posición en que
aparece. Lo logra a través del atributo src (source), el cual contiene el path (ruta o
ubicación) de tu archivo de imagen.
También se incluye un atributo alt (alternative) el cual contiene un texto que debería
describir la imagen, y que podría ser accedido por usuarios que no pueden ver la
imagen, quizás porque:
1. Son ciegos o tienen deficiencias visuales. Los usuarios con impedimentos
visuales usualmente utilizan herramientas llamadas Lectores de pantalla
(Screen Readers), los cuales les leen el texto contenido en el atributo alt.
2. Se produjo algún error en el código que impide que la imagen sea cargada.
Como ejemplo, modifica deliberadamente la ubicación dentro del
atributo src para que este sea incorrecto. Si guardas y recargas la página,
deberías ver algo así en lugar de la imagen:
Marcado de texto
Encabezados
Los elementos de encabezado permiten especificar que ciertas partes del contenido
son encabezados, o subencabezados del contenido. De la misma forma que un libro
tiene un título principal, y que a su vez puede tener títulos por cada capítulo
individual, y subtítulos dentro de ellos, un documento HTML puede tenerlos también.
HTML posee seis niveles de encabezados, <h1> (en-US)–<h6> (en-US), aunque
probablemente solo llegues a usar 3-4 como mucho:
<h1>Mi título principal</h1>
<h2>Mi título de nivel superior</h2>
<h3>Mi subtítulo</h3>
<h4>Mi sub-subtítulo</h4>
Nota: verás que el encabezamiento de nivel 1 tiene un estilo implícito. No utilices
elementos de encabezado para hacer el texto más grande o más oscuro, porque este
elemento se utiliza por accesibilidad y otras razones como el posicionamiento en
buscadores (Search Engine Optimization, SEO). Intenta crear una secuencia
significativa de encabezados en tus páginas, sin saltarte niveles.
Párrafos
Como se explicó más arriba, los elementos <p> se utilizan para encerrar párrafos de
texto; los usarás frecuentemente para el marcado de contenido de texto regular:
<p>Este es un simple parrafo</p>
Agrega uno o algunos párrafos a tu texto de ejemplo (deberías tenerlo de cuando
estudiaste ¿Cuál será la apariencia de tu sitio web?), colocados directamente debajo
del elemento <img>.
Listas
Mucho del contenido web está dado por listas, así que HTML tiene elementos
especiales para ellas. El marcado de listas se realiza siempre en al menos dos
elementos. Los dos tipos de listas más comunes son las listas ordenadas y las
desordenadas:
1. Las listas desordenadas son aquellas en las que el orden de los items no es
relevante, como en una lista de compras. Estas son encerradas en un
elemento <ul> (unordered list).
2. Las listas ordenadas son aquellas en las que el orden sí es relevante, como en
una receta. Estas son encerradas en un elemento <ol> (ordered list).
Cada elemento de la lista se coloca dentro de un elemento <li> (list item).
Por ejemplo, si quieres transformar parte del siguiente párrafo en una lista:
<p>En Mozilla, somos una comunidad de tecnólogos, pensadores, y constructores que trabajan
juntos... </p>
Podrías hacer lo siguiente:
<p>En Mozilla, somos una comunidad de</p>
<ul>
<li>tecnólogos</li>
<li>pensadores</li>
<li>constructores</li></ul>
<p>trabajando juntos... </p>
Vínculos
Los vínculos o enlaces son muy importantes —son los que hacen de la web, la web—.
Para implementar un vínculo, necesitas usar un vínculo simple — <a> — la a es la
abreviatura de la palabra inglesa «anchor» («ancla»). Para convertir algún texto dentro
de un párrafo en un vínculo, sigue estos pasos:
1. Elige algún texto. Nosotros elegimos «Manifesto Mozilla».Encierra el texto en
un elemento <a>, así:
<a>Manifesto Mozilla</a>
Proporciónale al elemento <a> un atributo href, así:
<a href="">Manifesto Mozilla</a>
Completa el valor de este atributo con la dirección web con la que quieras
conectar al vínculo:
<ahref="https://www.mozilla.org/esAR/about/manifesto/">Manifesto
Mozilla</a>
Podrías obtener resultados inesperados si al comienzo de la dirección web omites la
parte https:// o http:// llamada protocolo. Así que luego del marcado del vínculo, haz
clic en él para asegurarte que te dirige a la dirección deseada.
Nota: href podría parecer, en principio, una opción un tanto oscura para un nombre
de atributo. Si tienes problemas para recordarla, recuerda que se refiere
a hypertext reference (referencia de hipertexto).
CSS básico
Entonces ¿qué es CSS, realmente?
Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español,
no es realmente un lenguaje de programación, tampoco es un lenguaje de marcado. Es
un lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a
elementos en documentos HTML. Por ejemplo, para seleccionar todos los elementos
de párrafo en una página HTML y volver el texto dentro de ellos de color rojo, has de
escribir este CSS:
p{
color: red;
}
Anatomía de una regla CSS
Observa el código CSS de arriba, un poco más a detalle:
La estructura completa es llamada regla predeterminada (pero a menudo «regla»
para abreviar). Nota también los nombres de las partes individuales:
Selector
El elemento HTML en el que comienza la regla. Esta selecciona el(los) elemento(s) a
dar estilo (en este caso, los elementos <p> ). Para dar estilo a un elemento diferente,
solo cambia el selector.
Declaración
Una sola regla como color: red; especifica a cuál de las propiedades del
elemento quieres dar estilo.
Propiedades
Maneras en las cuales puedes dar estilo a un elemento HTML. (En este
caso, color es una propiedad del elemento <p> ). En CSS, seleccionas qué propiedad
quieres afectar en tu regla.
Valor de la propiedad
A la derecha de la propiedad, después de los dos puntos (:), tienes el valor de
la propiedad, para elegir una de las muchas posibles apariencias para una propiedad
determinada (hay muchos valores para color además de red).
Nota las otras partes importantes de la sintaxis:
Cada una de las reglas (aparte del selector) deben estar encapsuladas entre
llaves ({}).
Dentro de cada declaración, debes usar los dos puntos (:) para separar la
propiedad de su valor.
Dentro de cada regla, debes usar el punto y coma (;) para separar una
declaración de la siguiente.
De este modo para modificar varios valores de propiedad a la vez, solo necesitas
escribirlos separados por punto y coma (;), así:
p{
color: red;
width: 500px;
border: 1px solid black;
}
Seleccionar varios elementos
También puedes seleccionar varios elementos y aplicar una sola regla a todos ellos.
Incluye varios selectores separados por comas (,). Por ejemplo:
p,li,h1 {
color: red;
}
Diferentes tipos de selectores
Existen muchos tipos diferentes de selectores. Antes, solo viste los selectores de
elementos, los cuales seleccionan todos los elementos de un tipo dado en los
documentos HTML. Sin embargo puedes hacer selecciones más específicas que esas.
En seguida están algunos de los tipos de selectores más comunes:
Nombre del selector Qué selecciona Ejemplo
Selector de elemento
Todos los elementos
(llamado algunas veces p
HTML del tipo
selector de etiqueta o Selecciona <p>
especificado.
tipo)
El elemento en la página
con el ID especificado (en #mi-id
Selector de
una página HTML dada, Selecciona <p id="mi-id"> y <a
identificación (ID)
solo se permite un único id="mi-id">
elemento por ID).
Los elementos en la página
con la clase especificada .mi-clase
Selector de clase (una clase puede aparecer Selecciona <p class="mi-
varias veces en una clase"> y <a class="mi-clase">
página).
img[src]
Los elementos en una
Selecciona <img
Selector de atributo página con el atributo
src="mimagen.png"> pero
especificado.
no <img>
Los elementos
especificados, pero solo
a:hover
cuando esté en el estado
Selector de pseudoclase Selecciona <a>, pero solo cuando
especificado, por ejemplo
el puntero esté sobre el enlace.
cuando el puntero esté
sobre él.
Tipos de selectores
Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te
ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos
vamos a ver los diferentes grupos de selectores con más detalle.
Selectores de tipo, de clase y de ID
Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo
un <h1>.
h1 { }
También incluye selectores que delimitan una clase:
.box { }
o un ID: #unique { }
Selectores de atributo
Este grupo de selectores te proporciona diferentes formas de seleccionar elementos
según la presencia de un atributo determinado en un elemento:
a[title] { }
O incluso hacer una selección basada en la presencia de un atributo que tiene un valor
particular asignado:
a[href="https://example.com"] { }
Las pseudoclases y los pseudoelementos
Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de
un elemento. La pseudoclase :hover, por ejemplo, selecciona un elemento solo cuando
se le pasa el ratón por encima.
a: hover {}
También incluye pseudoelementos, que seleccionan una parte determinada de un
elemento en vez del elemento en sí. Por ejemplo, ::first-line siempre selecciona la
primera línea del texto que se encuentra dentro de un elemento ( <p>, en el ejemplo
siguiente), y actúa como si un elemento <span> hubiera delimitado la primera línea,
seleccionado y aplicado estilo.
p::first-line { }
Combinadores
El último grupo de selectores combina otros selectores con el fin de delimitar
elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que
son hijos directos del elemento <article> utilizando el operador de combinación hijo
(>):
article > p { }
Tabla de referencia de selectores
La tabla que te mostramos a continuación proporciona una descripción general de los
selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te
mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la
página MDN de cada selector para poder comprobar la información sobre los
navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando
necesites buscar los selectores a medida que avanzas con la materia o mientras
experimentas con CSS por tu cuenta.
Selector Ejemplo Tutorial de aprendizaje de CSS
Selector de tipo h1 { } Los tipos de selectores
Selector universal *{} El selector universal
Selector de clase .box { } Los selectores de clase
Selector de ID #unique { } Los selectores de ID
Selector de atributo a[title] { } Los selectores de atributo
Pseudoclase p:first-child { } Las pseudoclases
Pseudoelemento p::first-line { } Los pseudoelementos
Operadores de combinación
Operadores de combinación descendentes article p
descendentes
Operadores de combinación de
Operador de combinación de elementos hijo article > p
elementos hijo
Operador de combinación de elementos
h1 + p Hermanos adyacentes
hermanos adyacentes
Operador de combinación general de
h1 ~ p Hermanos generales
elementos hermanos
Fuentes y texto
1.- Antes que nada, regresa y busca las fuentes de Google Fonts que guardaste en un
lugar seguro. Agrega el elemento <link>... en algún lugar del head de tu
archivo index.html (de nuevo, en cualquier lugar entre las
etiquetas <head> y </head>). Debe verse algo así:
<link href="https://fonts.googleapis.com/css2?family=Open+Sans"
rel="stylesheet" type="text/css">
2.-Luego, borra la regla existente en tu archivo style.css. Fue una buena prueba, pero
el texto en rojo en realidad no se ve muy bien.
Añade las siguientes líneas (que se muestran a continuación), sustituyendo la
asignación de font-family por tu selección de font-family que obtuviste en ¿Cuál será
la apariencia de tu sitio Web? La propiedad font-family se refiere a la(s) fuente(s) que
deseas usar en tu texto.
Esta regla define una fuente base global y un tamaño de fuente para usar en toda la
página. Dado que <html> es el elemento primario (o padre) de toda la página, todos
los elementos contenidos dentro de él heredan las propiedades font-size y font-
family):
html {
font-size: 10px; /* px quiere decir 'píxeles': el tamaño de la fuente base es
ahora de 10 píxeles de altura */
font-family: "Open Sans", sans-serif; /* Este debe ser el resto del resultado
que obtuviste de Google fonts */
}
Ahora escoge el tamaño de fuente para los elementos que contienen texto dentro del
cuerpo del HTML (<h1> (en-US), <li>, y <p>). También centra el texto del título,
escoge un ancho de línea y espaciado entre letras en el contenido del texto para
hacerlo un poco más legible:
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}
Cajas, cajas, todo se trata de cajas
Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —
ajustando su tamaño, color, posición, etc—. Puedes pensar en la mayoría de los
elementos HTML de tu página como cajas apiladas una sobre la otra.
No es de extrañar que el diseño de CSS esté basado principalmente en el modelo de
caja. Cada una de las cajas que ocupa espacio en tu página tiene propiedades como
estas:
padding (relleno), el espacio alrededor del contenido. En el ejemplo
siguiente, es el espacio alrededor del texto del párrafo.
border (marco), la línea que se encuentra fuera del relleno.
margin (margen), el espacio fuera del elemento que lo separa de los
demás.
En esta sección también se utiliza:
width (ancho del elemento)
background-color, el color de fondo del contenido y del relleno
color, el color del contenido del elemento (generalmente texto)
text-shadow: coloca una sombra difuminada en el texto dentro del elemento
display: selecciona el modo de visualización para el elemento (no te
preocupes de esto por ahora)
Cambiar el color de la página
html {
background-color: #00539F;
}
Esta regla asigna un color de fondo a la página entera. Puedes cambiar el código de
color por cualquiera como el que elegiste usar en tu proyecto.
Dar estilo al cuerpo del documento
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}
Ahora tienes varias declaraciones en el elemento body. Revisa una por una:
width: 600px; — esto hará que el cuerpo siempre tenga 600 píxeles de ancho.
margin: 0 auto; — cuando seleccionas dos valores dentro de propiedades
como margin o padding, el primer valor afectará los lados superior
(top) e inferior (bottom) (en este caso haciéndolo en 0), y el segundo valor los
lados izquierdo (left) y derecho (right) (aquí, auto es un valor especial que
divide el espacio disponible entre derecha e izquierda). Puedes usar esta
propiedad con uno, dos, tres o cuatro valores como se explica en la sintaxis de
padding.
background-color: #FF9500; — como antes, este selecciona el color de
fondo de un elemento. Se ha usado un naranja rojizo para el elemento body en
contraste con el azul oscuro del elemento <html>. Sigue y experimenta.
Siéntete libre de usar white o cualquiera que sea de tu agrado.
padding: 0 20px 20px 20px; — tienes 4 valores puestos en el relleno, para dar
un poco de espacio alrededor del contenido. Esta vez no pondrás relleno en la
parte de arriba de body, 20 píxeles a la izquierda, abajo y derecha. Los valores
se ponen: arriba, derecha, abajo e izquierda, en ese orden. Como
con margin usar esta propiedad con uno, dos, tres o cuatro valores como se
explica en la sintaxis de padding.
border: 5px solid black; — este simplemente pone un borde de 5 píxeles de
ancho, continuo y de color negro alrededor del elemento body.
Posicionar y dar estilo al título principal de la página
h1 {
margin: 0;
padding: 20px 0;
color: #00539F;
text-shadow: 3px 3px 1px black;
}
Puedes haber notado que hay un hueco horrible en la parte superior de body. Esto
sucede porque los navegadores vienen con estilos por defecto, ¡incluso cuando aún no
se ha aplicado ningún archivo CSS! Esto podría parecer una mala idea, pero se quiere
que aun una página sin estilizar sea legible. Para deshacerte de este espacio elimina el
estilo por defecto, agregando margin: 0;.
Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo
que el color del texto sea el mismo que el color de fondo de html.
Una propiedad muy interesante que se ha usado aquí es text-shadow, que aplica una
sombra al texto del elemento. Sus cuatro valores son como sigue:
El primer valor en píxeles asigna el desplazamiento horizontal de la sombra
desde el texto —qué tan lejos la mueve a la derecha—. Un valor negativo la
moverá a la izquierda.
El segundo valor en píxeles asigna el desplazamiento vertical de la sombra
desde el texto —qué tan lejos la mueve hacia abajo—. En este ejemplo, un
valor negativo la desplazaría hacia arriba.
El tercer valor en píxeles asigna radio de desenfoque de la sombra —un valor
grande es igual a una sombra borrosa—.
El cuarto valor asigna el color base de la sombra.
Una vez más, trata de experimentar con diferentes valores para ver cómo resulta.
Centrar la imagen
img {
display: block;
margin: 0 auto;
}
Finalmente, centra la imagen para hacer que luzca mejor. Puedes usar nuevamente el
truco de margin: 0 auto que usaste antes para body, pero existen diferencias que
requieren que hagas algo más para que el código CSS funcione.
El elemento <body> es un elemento en nivel de bloque (block-level), lo que significa
que tomará espacio en la página y que puede tener otros valores de espacio aplicables
como margen. Las imágenes, por otra parte, son elementos inline, lo que quiere decir
que no puedes aplicarles márgenes, debes dar a la imagen un comportamiento
de block-level usando display: block;.
Fundamentos de JavaScript
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). Este artículo te ayudará a comenzar con
este lenguaje extraordinario y te dará una idea de qué es posible hacer con él.
¿Qué es JavaScript realmente?
JavaScript es un robusto lenguaje de programación que se puede aplicar a un
documento HTML y usarse para crear interactividad dinámica en los sitios web. Fue
inventado por Brendan Eich, cofundador 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 sí 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 solo una introducción ligera a JavaScript, la
intención no es 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 el Área de
Aprendizaje en MDN, y en el resto de MDN.
Debajo se presentan algunos aspectos del núcleo del lenguaje y también jugarás con
unas pocas características de la API del navegador. ¡Diviértete!
Ejemplo «¡Hola Mundo!»
Primero, ve a tu sitio de pruebas y crea una carpeta llamada scripts. Luego, dentro de
la nueva carpeta de scripts, crea un nuevo archivo llamado main.js y guárdalo.
A continuación, abre tu archivo index.html e introduce el siguiente código 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:
const miTitulo = document.querySelector('h1');
miTitulo.textContent = '¡Hola mundo!';
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 has puesto el elemento <script> (en-US) 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. Para aprender más sobre enfoques
alternativos, mira Estrategias de carga de scripts.
¿Qué ha ocurrido?
El texto del título ha sido cambiado por ¡Hola mundo! usando JavaScript. Hiciste 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 hiciste
con CSS usando selectores —quieres hacer algo con un elemento, así que tienes que
seleccionarlo primero—.
Después de eso, estableciste el valor de la propiedad textContent de la
variable miTitulo (que representa el contenido del título) como ¡Hola mundo!
Curso intensivo de fundamentos del lenguaje
Ahora se explicarán 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.
Variables
Las Variables son contenedores en los que puedes almacenar valores. Primero debes
declarar la variable con la palabra clave var (menos recomendado) o let, seguida del
nombre que le quieras dar. Se recomienda más el uso de let que de var (más adelante
se profundiza un poco sobre esto):
let nombreDeLaVariable;
Nota: todas las líneas en JS deben acabar en punto y coma (;) para indicar que es ahí
donde termina la declaración. Si no los incluyes puedes obtener resultados
inesperados. Sin embargo, algunas personas creen que es una buena práctica tener
punto y coma al final de cada declaración. Hay otras reglas para cuando se debe y
no se debe usar punto y coma. Para más detalles, vea Guía del punto y coma en
JavaScript (en inglés).
Nota: puedes llamar a una variable con casi cualquier nombre, pero hay algunas
restricciones (ver este artículo sobre las reglas existentes). Si no estás seguro,
puedes comprobar el nombre de la variable para ver si es válido.
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.
Nota: para más detalles sobre la diferencia entre var y let, vea Diferencia entre var y
let.
Tras declarar una variable, puedes asignarle un valor:
nombreDeLaVariable = 'Bob';
Puedes hacer las dos cosas en la misma línea si lo necesitas:
let 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:
let nombreDeLaVariable = 'Bob';
nombreDeLaVariable = 'Steve';
Variable Explicación Ejemplo
Esto es una secuencia de texto
conocida como cadena. Para
String indicar que la variable es una let miVariable = 'Bob';
cadena, debes escribirlo entre
comillas.
Esto es un número. Los números
Number let miVariable = 10;
no tienen comillas.
Tienen valor
verdadero/falso. true/false son
Boolean let miVariable = true;
palabras especiales en JS, y no
necesitan comillas.
let miVariable = [1,'Bob','Steve',10];
Una estructura que te permite
Llama a cada miembro del array
Array almacenar varios valores en una
así: miVariable[0], miVariable[1],
sola referencia.
etc.
Básicamente cualquier cosa.
let miVariable =
Todo en JavaScript es un objeto
document.querySelector('h1');
Object y puede ser almacenado en una
Todos los ejemplos anteriores
variable. Mantén esto en mente
también.
mientras aprendes.
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.
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.
Símbolo(s
Operador Explicación Ejemplo
)
Se usa para sumar dos
6 + 9;
Suma/concatena números, o juntar dos +
"Hola " + "mundo!";
cadenas en una.
9 - 3;
Resta, Estos hacen lo que 8 * 2; // La
multiplicación, esperarías que hicieran en -, *, / multiplicación en JS
división las matemáticas básicas. es un asterisco
9 / 3;
Los has visto anteriormente:
Operador de
asigna un valor a una = let miVariable = 'Bob';
asignación
variable.
Comprueba si dos valores
son iguales entre sí, y let miVariable = 3;
identidad/igualdad ===
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 let miVariable = 3;
el operador de identidad, la !miVariable === 3;
Negación, distinto negación es en JS el
!, !== Aquí estamos
(no igual) equivalente al operador
lógico NOT — comprobando
cambia true por false y "miVariable NO es igual
viceversa. a 3". Esto
devuelve false,
porque miVariable ES
igual a 3.
let miVariable = 3;
Símbolo(s
Operador Explicación Ejemplo
)
miVariable !== 3;
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. Entonces, por ejemplo:
let helado = 'chocolate';if (helado === 'chocolate') {
alert('¡Sí, 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.
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:
let nombreDeLaVariable = document.querySelector('h1');
alert('¡Hola!');
Estas funciones document.querySelector y alert 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 argumentos —
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 emergente dentro de la
ventana del navegador, pero necesitas asignarle una cadena como argumento para
decirle qué mensaje se debe escribir en la ventana emergente.
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 sí—:
function multiplica(num1,num2) {
let resultado = num1 * num2;
return resultado;
}
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
clic (click event), que se activa al hacer clic sobre algo. Para demostrar esto, prueba
ingresando lo siguiente en tu consola, luego da clic sobre la página 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
let miHTML = document.querySelector('html');
miHTML.onclick = function(){};
es solo un modo más corto de escribirlo.
Sobrecargar tu sitio web de ejemplo
Ahora vas a repasar un poco lo básico de JavaScript. Añadirás un par de
funcionalidades a tu sitio para demostrar lo que puedes hacer.
Añadir un cambiador de imagen
En esta sección añadirás otra imagen a tu sitio usando la DOM API y agregarás un
poco de código para cambiar entre imágenes al hacer clic.
1. Primero que todo, busca una imagen que te guste para tu sitio. Asegúrate que sea del mismo
tamaño que la primera, o lo más cerca posible.
2. Guarda tu imagen en tu carpeta images.
3. 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).
let miImage = document.querySelector('img');
miImage.onclick = function () {
let miSrc = miImage.getAttribute('src');
if (miSrc === 'images/firefox-icon.png') {
miImage.setAttribute('src','images/firefox2.png');
} else {
miImage.setAttribute('src','images/firefox-icon.png');
}
}
4. Guarda todos los archivos y carga index.html en tu navegador. Ahora cuando hagas clic en la
imagen, ¡esta debe cambiar por otra!
Esto fue lo que sucedió: se almacena una referencia a tu elemento <img> en la
variable miImage. Luego, haces 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 clic en la imagen:
1. El código recupera el valor del atributo src de la imagen.
2. El código usa una condicional para comprobar si el valor src es igual a la ruta de la imagen
original:
i. Si es así, el código cambia el valor de src a la ruta de la segunda imagen, forzando a que se
cargue la otra imagen en el elemento <img>.
ii. Si no es así (significa que ya fue modificada), se cambiará el valor de src nuevamente a la ruta
de la imagen original, regresando a como era en un principio.
Añadir un mensaje de bienvenida personalizado
Ahora añadirás un poco más 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 regrese. Lo guardarás 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> (en-US):
<button>Cambiar de usuario</button>
En main.js, agrega el siguiente código al final del archivo, exactamente como está
escrito. Esto toma referencia al nuevo botón que se agregó y al título y los almacena
en variables:
let miBoton = document.querySelector('button');let miTitulo =
document.querySelector( 'h1');
Ahora agrega la siguiente función para poner el saludo personalizado, lo que no
causará nada aún, pero arreglarás esto en un momento:
function estableceNombreUsuario() {
let miNombre = prompt('Por favor, ingresa tu nombre.');
localStorage.setItem('nombre', miNombre);
miTitulo.textContent = 'Mozilla es genial,' + miNombre;}
La función estableceNombreUsuario() 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 Aceptar del cuadro de
diálogo es presionado. En este caso, pedirás al usuario que ingrese su nombre. Luego,
llamarás la API localStorage, que nos permite almacenar datos en el navegador y
recuperarlos luego. Usarás 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,
establecerás el textContent del título a una cadena, más el nombre de usuario
recientemente almacenado.
Luego, agregarás este bloque if ... else. Se podría 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 {
let nombreAlmacenado = localStorage.getItem('nombre');
miTitulo.textContent = 'Mozilla es genial,' + nombreAlmacenado;}
La primera línea de este bloque usa el operador de negación (NO lógico representado
por !) 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), se recupera el dato del nombre
usando getItem() y se fija mediante textContent del título a la cadena, más el nombre
del usuario, como hiciste dentro de estableceNombreUsuario().
Finalmente, agrega 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 visites tu sitio por primera vez, este te pedirá tu nombre y te dará un
mensaje personalizado de bienvenida. Puedes cambiar cuantas veces quieras 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 abras el sitio la próxima vez!
