Sintaxis básica de JavaScript

Tabla de contenidos

1 Insertar JavaScript en la página web
2 Insertar comentarios en JavaScript
3 Declaraciones
4 Variables
- 4.1 Ámbito de las variables
5 Constantes
6 Tipos de datos
- 6.1 Cadenas (strings)
- 6.2 Conversión de tipos
7 Salida / visualizar en pantalla

Insertar JavaScript en la página web

Código JavaScript dentro del propio documento HTML

El código JS se inserta entre las etiquetas:

<script></script>

Que pueden estar ubicada dentro de las secciones <body></body> y/o <head></head> de un documento HTML, y tantas (tantos scripts) como se quieran.

Es una práctica común poner las funciones en la sección <head>, o al final de la página.

Archivo JavaScript externo enlazado

Enlazarse un archivo JavaScript externo en lugar de incrustar código, es un enfoque mejor y más adecuado para una programación escalable:

Script escrito en un solo archivo, en lugar scripts reescritos en muchas páginas, con el ahorro que conlleva en inserción y actualización del código.
El archivo JavaScript en caché puede acelerar la carga de las páginas.

El archivo externo solo incluye el código JavaScript y finaliza con la extensión .js

Para ello incluimos en la página HTML la línea:

<script src="ruta-al-fichero-js/nombre-fichero.js"></script>

donde «ruta-al-fichero-js/nombre-fichero.js» debe cambiarse por la ruta en cada caso.

Los ficheros externos no pueden contener etiquetas <script>

Uso de JavaScript dentro de un CMS

El uso de JS dentro de un CMS, como por ejemplo WordPress, no es tan sencillo como debería. Por lo extenso de la temática, en esta obra no se va
a explicar el uso de JS todos los CMS, sino solo algunas posibles alternativas a su uso dentro de WordPress.org, en sitios web autoalojados. (en los blogs
gratuítos de WordPress.com ni siquiera es posible el uso de JS).

Uso de JavaScript mediante las funcionalidades que ofrece el theme que estemos usando. A menudo la plantilla que empleamos nos ofrece campos de texto para escribir scripts, ya sea individualmente en cada página, como ya hacen las plantillas de Genesis de Studiopress, o bien en un lugar genérico desde donde los scripts estarán disponibles para todo el sitio web, como en los themes de ElegantThemes.
Uso de JavaScript mediante un plugin como, por ejemplo, el gratuito Code Embed.
Uso de JavaScript mediante su forma lógica, mejor y más profesional: insertando una llamada al archivo de scripts dentro del área encerrada entre etiquetas ‘head’ de las páginas.
Hacer esto en WordPress requiere modificar la plantilla header.php, insertando la línea, igual que haríamos en cualquier otra página web, entre las meta-etiquetas y el enlace a la hoja de estilos:
<script type=»text/javascript» src=»/js/scripts.js»></script>donde ‘/js/scripts.js’ debe ser sustituido por la ruta al fichero JS que corresponda en cada caso.

Descripción de uso de JS en la documentación WordPress.

¿Qué método usar? ¿Cuál me conviene más? La respuesta rápida es depende.

Los CMS ofrecen muchas funcionalidades que nos facilitan muchísimas tareas y nos evitan tener que entrar en detalles técnicos y de código. Esto ahorra muchísimos costes y a menudo hace de WordPress la plataforma más rentable.

Cuantas más funcionalidades del tema o del CMS empleemos, más dependientes seremos de ese tema y de ese CMS, y más complicada será una hipotética migración a otro tema, o incluso a otra plataforma, como por ej. Django/Python.

Podría decirse, en otras palabras, que lo que al inicio de la construcción de un sitio son facilidades, a la larga, cuando queremos aumentar la complejidad y personalización del sitio, se convierte en problemas.

Cuanto más tecnologías estandarizadas utilicemos, (HTML5, CSS, JavaScript, …) más independiente será nuestro sitio de cualquier plataforma, y más eficiente.

No obstante, esto no es un problema para una persona que no va a necesitar nunca migrar de su CMS, ni requiere necesidades demasiado complejas.

Por otra parte, si todas las funcionalidades que implementamos son a base de plugins WordPress, sobrecargamos el sitio, haciéndolo más ineficiente en tiempo de carga y menos seguro.

Insertar comentarios en JavaScript

Comentario de una sola línea: // [Comentario]

Comentario multilínea: /* [Comentario] */

Declaraciones

var	Declara una variable. Opcionalmente se inicializa con un valor.	var x = 40;
let	Declara una variable de alcance local. Opcionalmente se inicializa con un valor.	let y = -4;
const	Declara una constante. Esta ya no puede cambiar de valor una vez declarada.	const z = 0;

Variables

Una variable no inicializada contiene el valor ‘undefined’. El valor undefined se comporta como ‘falso’ cuando se utiliza en un contexto booleano. Este hecho pude usarse para determinar si una variable contiene o no un valor, sin obtener una excepción (error):

var QE2;
  if(QE2 === undefined){
  acciones a realizar
}

Ámbito de las variables

Una variable declarada fuera de una función es una ‘variable global’. Está disponible en cualquier parte del código.

Las variables globales son propiedades del objeto global. En las página web el objeto global es window. Puede accederse a las variables globales usando la sintaxis window.variable.

Una variable declarada dentro de una función está disponible para su uso solo dentro de dicha función. Es una ‘variable local’.

Para crear una variable local en el ámbito de bloque, es necesario declararla con ‘let’.

if(true) {
let x = 5; /* Variable disponible solo dentro del bloque if */
}

Constantes

Misma sintaxis que para las variables:
Debe de empezar con: letra, guion bajo(_) o símbolo de dólar ($)
Puede contener caracteres: alfabéticos, numéricos o guiones bajos.

const iva = 21;

La constante no puede cambiar de valor.

Tipos de datos

Existen 6 tipos de datos primitivos:

Boolean
null
undefined
Number.
String. Cadenas de caracteres.
Symbol

y el tipo de dato Object.

Cadenas (strings)

Las cadenas son valores formados por texto. Pueden contener letras, números, símbolos, puntuación,…

Las cadenas están delimitadas, bien por comillas simples ‘ ‘ o bien por comillas dobles » «.

Una cadena puede contener en su interior comillas. En ese caso es necesario usar uno de estos métodos:

Usar las comillas contrarias a las usadas para encerrar la cadena.
Usar el carácter de escape \

‘Este es un ejemplo del uso de comillas en el interior de una cadena «string». Con comillas diferentes o escapando las comillas con la barra invertida \’backslash\’.’

Propiedades y métodos de las cadenas

Las cadenas tienen sus propias variables y funciones, también conocidas como propiedades y métodos. Se presentan algunas de las comunes:

propiedad

Descripción

Ejemplos

length

Devuelve la longitud en caracteres de la cadena

cadena1.length;

«cadenaLiteral».length

Método	Descripción	Ejemplos de código
toLowerCase()	Devuelve una copia de la cadena con sus letras convertidas en minúsculas.	«CADENALITERAL».toLowerCase();
toUpperCase()	Devuelve una copia de la cadena con sus letras convertidas en mayúsculas.	«CADENALITERAL».toUpperCase();
trim()	Devuelve una copia de la cadena con los posibles espacios en blanco a inicio y final de cadena eliminados, pero mantiene los espacios entre palabras.	» ejemploCadena «.trim();

Conversión de tipos

Debido a que JavaScript es un lenguaje dinámico, la conversión de un tipo de dato a otro es automática:

var iva = 21; /* Tipo numérico /
iva = «21%» / Tipo cadena */

En declaraciones donde números y cadenas de texto se unen con el operador ‘+’, JS convierte los números a string (cadenas):

var iva = 21;
var mensaje = «El IVA aplicado es del » + iva + «%»;

No ocurre lo mismo con el resto de operadores:

«40» – 5 /* Salida ’35’. Se produce una resta aritmética /
«40» + 5 / Salida ‘405’, ya que JS realiza una concatenación /
+»40″ + +»5″ / Salida ’45’. El + como operador unario permite la conversión de cadenas en números */

Convertir cadenas a números

Para convertir una cadena en un número, puede también recurrirse a los métodos:

parseInt()
parseFloat()

parseInt() solo devuelve numeros enteros. Es una buena práctica usar parseInt() con el parámetro ‘radix’.

Salida / visualizar en pantalla

innerHTML
document.write().
window.alert().
console.log().

Usar innerHTML

Además de para cambiar el contenido de un elemento, innerHTML permite visualizar por pantalla
document.getElementById(«prueba»).innerHTML = 3 + 5; /* Salida: 8 */

Usar document.write()

Más adecuado para hacer pruebas, es document.write(). El ejemplo no va entre etiquetas <script>:

<button onclick=»document.write(«Todo ha sido eliminado)»>Borrar</button>

/* Salida: Todo ha sido eliminado */

El uso de document.write() después de que todo el documento HTML esté cargado lo eliminará todo.

Usar window.alert()

window.alert(parámetro) genera una ventana emergente, también llamada popup, que mostrará ‘parámetro’, siendo este el párametro passado a la función. Debe pulsarse ‘Aceptar’ en la ventana para poder seguir navegando.

Usar console.log()

Útilo para propósitos de depuración. Abrir la consola de Mozilla Firefox, con el botón de menú > Desarrollador > Consola web. Entonces ejecutar/cargar la página. Obtenemos en la consola lo que hemos pasado como parámetro a la función console.log().

❮ Anterior Siguiente ❯