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 etiqueteas <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 usamos 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 gratuíto Code Embed
- Uso de JavaScript mediante su forma lógica, mejor y más profesional: insertando una llamada al archivo de scripts dentro del area encerrada entre etiquetas ‘head’ de las paginas.
Hacer esto en WordPress requiere modificar la plantilla header.php, insertando la linea, 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? ¿Cual me conviene más? Respuesta rápida: 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ísmos costes y hace de WordPress la plataforma más rentable.
Cuantas más funcionalidades del tema o del CMS usemos, mas 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 cudalquier 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 a nivel 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, guión bajo(_) o símbolo de dollar($)
Puede contener caracteres: alfabéticos, numéricos o guiones bajos.
const iva = 21;
La constante no puede cambiar de valor.
Tipos de datos
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’.
Operadores
Operadores aritméticos
| Operador | Descripción |
| + | Suma los operandos a ambos lados del operador |
| – | Resta los operandos a ambos lados del operador |
| * | Multiplica los operandos a ambos lados del operador |
| / | Divide los operandos a ambos lados del operador |
| % | Módulo: devuelve el resto/residuo de la división de 2 operandos |
| ++ | Incrementa en uno un operando |
| — | Decrementa en uno un operando |
Operadores de asignación
| Operador | Descripción | Ejemplos de uso |
| = | Asigna | var x = y // asigna a x el valor de y |
| += | Suma y asigna | var x += y // asigna a x la suma x + y |
| -= | Resta y asigna | var x -= y // asigna a x la resta de x menos y |
| *= | Multiplica y asigna | var x *=y // asigna a x la multiplicación entre x e y |
| /= | Divide y asigna | var x /=y // asigna a x la división entre x e y |
| %= | Resto de división (residuo) y asigna | var x %= y // asigna a x el resto de la división entre x e y |
Operadores de comparación
| Operador | Descripción | Ejemplos de uso |
| == | Igual a | if(x == y) {…} // Si el resultado es True, se ejecuta el código entre las laves |
| === | Iguales en valor y tipo | x === y // x es idéntico a y |
| != | No igual | x != y // x no es igual que y |
| !== | No igual, el tipo o el valor | x !== y // x no es idéntico a y |
| > | Mas grande que | x > y // x es mas grande que y |
| < | Mas pequeño que | |
| >= | Mas grande o igual que | |
| <= | Más pequeño o igual que | |
| ? | Operador ternario |
Operadores de cadenas
Operadores lógicos
| Operador | Descripción | Ejemplos de uso |
| && | ‘y’ lógico (AND) | |
| || | ‘o’ lógico (OR) | |
| ! | Negación (NOT) | !x // |
Operadores de tipo
| Operador | Descripción | Ejemplos de uso |
| typeof | Devuelve el tipo de una variable | |
| instanceof | Devuelve true si un objeto es una instancia de una clase |
Operadores bit a bit
| Operador | Nombre | Ejemplo | Equivale a | Resultado |
| & | AND | 5&1 | 0101 & 0001 | 0001 = 1 decimal |
| | | OR | 5 | 1 | 0101 | 0001 | 0101 = 5 decimal |
| ~ | NOT | ~5 | ~00000000000000000000000000000101 | 11111111111111111111111111111010 = -6 decimal |
| ^ | XOR | 5^1 | 0101^0001 | 0100 = 4 decimal |
Salida / visualizar en pantalla
- innerHTML
- document.write().
- window.alert().
- console.log().
Usar innerHTML
document.getElementById(“prueba”).innerHTML = 3 + 5; /* Salida: 8 */
Usar document.write()
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().