¿Qué es el Javascript y para qué sirve?

Cuando desarrollas y diseñas una web, eres más consciente que nunca que cada detalle, por muy pequeño que sea, cuenta. Actualmente, se están creando proyectos web en los que el modo responsive cobra un protagonismo bastante notorio. Sin embargo, conocer los mecanismos para que el diseño gráfico de tu web sea realmente rompedor es complicado. ¿Cómo lograrlo?

En el post de hoy nos ponemos en el papel de desarrolladores web y te explicaremos en qué consiste Javascript. ¿Tienes tu teclado listo? Empezamos.

Principales funciones de Javascript en una web

Antes de detallar las funciones de Javascript, ha llegado el momento de saber qué es exactamente. Nos encontramos ante un lenguaje de programación o de secuencias de comandos que nos permite implementar funciones complejas y visibles dentro de una página web. ¿Cómo se representa?

• A través de actualizaciones de contenido.
• Mapas interactivos.
• Animación de gráficos 2D/3D.
• Desplazamiento de máquinas reproductoras de vídeo.

En todos los casos mostrados, JavaScript está involucrado y es uno de los «actores principales». Le acompañan dos lenguajes de programación para el desarrollo web estándar muy conocidos por algunos/as como es HTML y CSS. Si no sabes en qué consisten y cuál es su rol en una página web, no desesperes. Te lo explicamos a continuación de forma breve.

• HTML. Es el lenguaje de programación marcado que utilizamos actualmente para estructurar y dar un significado y forma a todo nuestro contenido web. Algunos de los casos más reseñables definiendo sus párrafos, los encabezados y tablas de datos. A su vez, sirve para insertar imágenes y videos en la página.
• CSS. Es un lenguaje que aglutina el conjunto de reglas de estilo que usamos para aplicar estilo a todo nuestro contenido HTML. PAra ser más claros, nos sirve para establecer colores de fondo y tipos de letra. A su vez, nos ayuda a distribuir nuestro contenido en múltiples columnas.

Ahora que hemos ahondado un poco en el concepto de Javascript, pasamos a detallarte algunas de las funciones que necesitas conocer. Toma nota:

Funciones por declaración

Es la función más extendida de las que vamos a conocer en este post. Esta forma permite declarar una función que estará disponible a lo largo de todo el código en cuestión. Podríamos ejecutar la función saludar() incluso antes de haberla creado, funcionando correctamente en todo momento.  Javascript busca en primer lugar las declaraciones de funciones. Finalmente, procesa el resto del código.

Ejemplo

function saludar() {
return «Hola»;
}

saludar(); // ‘Hola’
typeof saludar; // ‘function’

Funciones por expresión

Nos encontramos ante un enfoque distinto, en la que el código es guardado por los programadores (guardar funciones) para, seguidamente, ejecutar dichas variables.

Ejemplo

const saludo = function saludar() {
return «Hola»;
};

saludo(); // ‘Hola, qué tal’

Como has podido comprobar, estamos creando una función en el interior de una variable. Esto nos permitirá ejecutar a posteriori la variable (como si fuera una función). Observa que el nombre de la función (en este caso: saludar) no va a ser de gran utilizad, mientras que si intentamos ejecutar saludo() funciona a la perfección.

Funciones como objetos

Este punto de vista no suele ser utilizado en el ala de producción. Sin embargo, es justo que sepas que se pueden declarar opciones como si actuaran como objetos.

Ejemplo

const saludar = new Function(«return ‘Hola’;»);

saludar(); // ‘Hola’

¿Cómo se añade Javascript a una página?

JavaScript se aplica a tu página HTML de forma muy similar a CSS. ¿La principal diferencia entre CSS y Javascript? Por un lado, CSS usa elementos <link> para aplicar elementos y hojas de estilo externas <style> para ejecutar hojas de estilo internas a HTML. Por el otro, JavaScript solo necesita un aliado en el mundo de HTML: el elemento {htmlelement(«script»)}}. Debemos distinguir entre:

JavaScript interno

En primer lugar, debes hacer una copia local del siguiente archivo con el que contamos de ejemplo apply-javascript.html. Guárdalo en el lugar más accesible de tu directorio a disposición en algún lugar accesible.

Abre el archivo en tu navegador web favorito y en un editor de texto. Finalmente, comprobarás que el HTML crea una página web simple que contiene un botón en el que hacer clic.

A continuación, ve a tu editor de texto y agrega lo siguiente en tu head, justo antes de tu etiqueta de cierre </head>:
<script>

// JavaScript va aquí

</script>

Seguidamente, agregaremos algo de JavaScript dentro de nuestro elemento <script> para que la página haga algo más interesante. Deberás agregar el siguiente código justo debajo de la línea «// El código JavaScript va aquí»:

document.addEventListener(«DOMContentLoaded», function() {
function createParagraph() {
let para = document.createElement(‘p’);
para.textContent = ‘You clicked the button!’;
document.body.appendChild(para);
}

const buttons = document.querySelectorAll(‘button’);

for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener(‘click’, createParagraph);
}
});

Por último, guarda tu archivo y actualiza el navegador. Si todo está correcto, deberías ver que cuando haces clic en el botón, se genera un nuevo párrafo y se coloca justamente debajo.

JavaScript externo

El primer paso que deberás realizar, será crear un nuevo archivo en el mismo directorio que tu archivo HTML del ejemplo. Como nombre ponle script.js; es importante asegurarse de que el nombre tenga la extensión .js, ya que de esta forma el archivo será reconocido como JavaScript.

Sustituye tu elemento <script> actual con lo siguiente:
<script src=»script.js» defer></script>

Dentro de script.js, agrega el siguiente script:
function createParagraph() {
let para = document.createElement(‘p’);
para.textContent = ‘You clicked the button!’;
document.body.appendChild(para);
}

const buttons = document.querySelectorAll(‘button’);

for(let i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener(‘click’, createParagraph);
}

Guarda y actualiza tu navegador. Verificarás que funciona igual, pero ahora tenemos nuestro JavaScript en un archivo externo. Por lo general, esto es bueno en términos de organización de tu código. A su vez, lo hace más reutilizable en varios archivos HTML. Por último, destacar que el HTML es más fácil de leer sin grandes trozos de script en él.

Como has podido comprobar, este proceso no es tan complejo como sería en un principio. No obstante, nunca es tarde para solicitar ayuda a una empresa especializada en el desarrollo y diseño web para que tu página luzca mejor que nunca, potenciando sus funcionalidades. En Dobuss estamos especializados en el desarrollo de proyectos de estas características. No lo dudes y ponte en contacto con nuestro equipo.