Estructura báscica JavaScript
Para hacer estos ejercicios
sencillos, podríamos simplemente crear nuestros scripts deJavaScript, dentro
del mismo archivo html del ejercicio, sin embargo esto es SIEMPRE una mala práctica.
Debemos acostumbrarnos a hacer las cosas bien aunque , como en este caso se
trate de un sencillo ejercicio.
Vamos a crear una estructura básica
de proyecto, para ello en nuestro editor de código preferido (en mi caso VScode)
crearemos un carpeta con el nombre del ejercicio, en este caso como ya es el
ejercicio 4 de nuestro pequeño curso yo la llamaré 04_MANEJO DE ERRORES.
Esta será la carpeta raíz de nuestro
proyecto, y dentro de ella vamos a crear dos carpetas más, que llamaremos css y
js, como sus nombres indican css guardará nuestros archivos css y en js
guardaremos nuestros archivos JavaScript.
 |
| figura 1. estructura de proyecto básico |
Crearemos ahora los archivos que
necesitamos, dentro de la carpeta js crearemos el archivo errores.js que será
nuestro archivo javascript donde crearemos nuestros scripts, luego dentro de la
carpeta css vamos a crear un archivo que llamaremos style.css y este será
nuestra hoja de estilos, en caso de queramos dar algún estilo. Por último en la
propia carpeta raíz, vamos a crear nuestro archivo index.html que será el
archivo principal de nuestro pequeño ejercicio y contendrá todo el html que
necesitemos.
Escturctura
básica html5.
Abriremos nusestro index.html y crearemos
una estructura básica html5, si usas VScode versa que solo con escribir html aparece
un snippet que te crea directamente una estructura html o html5:
 |
| figura 2. Estructura báscica HTML5 |
Al hacer enter en html5, se nos crea una
estructura básica html5 de forma automatic:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Enlazando
nuestros archivos CSS y JavaScript
Una vez que tenenmos creada nuestra
estructura de proyecto, debemos enlazar
nuestors archivos css y javascript desde nuestro index html para que todo pueda funcionar:
Enlazando
una hoja de estilos externa (archive CSS)
Para ello nuestro VScode también nos prove de un snippet, la zon para escribir el enlace a nuestra hoja de estilos es justo encima del título de nuestro document html , dentro de la sección head, si nos situamos alli y escribimos la plabara link podemos ver como se nos dan varias opciones:
 |
| Figura 3. enlazando una hoja de estilo externa al index.html |
Al escoger link:css se nos inserta el
siguiente enlace:
<link rel="stylesheet" href="style.css">
En el que deberemos modificar la ruta y
pasarle la ruta donde tenemos nuestr archive style.css que hemos creado antes,
como lo hemos guardado en una carpeta de nombre css nuestra ruta sera:
<link rel="stylesheet" href="css/style.css">
Esta es la manera correcta de vincular un archive
externo CSS, si ahora escribimos algún estilo en nuestro archivo y abrimos
nuestro index.html veremos como los cambios de estilo se muestran ya en el. Por
ejemplo vamos a crear en nuestro index un h1 que diga Curso JavaScript:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>CURSO COMPLETO DE PROGRAMACIÓN EN JAVASCRIPT</title>
</head>
<body>
<h1>Curso JavaScript</h1>
</body>
</html>
Si hacemos clic derecho y abrimos el index
en el navegador tendremos:
 |
| Figura 4. Navegador sin aplicar estilos CSS |
Como ahora
tenemos una hoja de estilos vinculada a nuestro index, podemos dar estilos css
a éste, por ejemplo, cambiemos el color del h1 a blanco y hagamos que el fondo
del document sea de un color oscuro, abriremos nuestro archive css y
escribiremos:
h1 {
Si salvamos, veremos
el siguiente resultado en nuestro navegador:
 |
| Figura 5. Navegador con estilos CSS |
Algo similar
debemos hacer para vincular nuestro archive js externo y que nuestros scripts
tengan efecto en el index. La forma correcta de vincular un archive JavaScript
externo es llamarlo al final del document junto enciam de la etiqueta de cierre
del body, mediante una etiqueta script a la que le daremos la ruta donde hemos
guardado nuestro documento js en la carpeta del proyecto en nuestro caso es js/errors.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>CURSO COMPLETO DE
PROGRAMACIÓN EN JAVASCRIPT</title>
</head>
<body>
<h1>Curso JavaScript</h1>
<script src="js/errores.js"></script>
</body>
</html>
Con esto tenemos
todo lo necesario para hacer nuestros ejercicios esta sera la plantilla báscica
de nuestros proyectos de ahora en adelante.
Depués de esta
pequeña explicación de cómo crear un proyecto básico vanilla js vamos al tema
que nos ocupa que es el de manejo de errores.
MANEJO DE ERRORES [ Bloque try…catch…finally ]
Una declaración
try…catch señala un bloque de instrucciones a intenetar (try), y especifíca una
respuesta si se produce una excepción (catch).
La sentencia try consiste
en un bloque try que contiene una o más sentencias. Las llaves {} se
deben utilizar siempre, incluso para una bloques de una sola sentencia. Al
menos un bloque catch o un bloque finally debe estar
presente. Esto nos da tres formas posibles para la sentencia try:
- try...catch
- try...finally
- try...catch...finally
Un bloque catch contiene
sentencias que especifican que hacer si una excepción es lanzada en el
bloque try. Si cualquier sentencia dentro del bloque try (o en
una funcion llamada desde dentro del bloque try) lanza una excepción, el
control cambia inmediatamente al bloque catch . Si no se lanza
ninguna excepcion en el bloque try, el bloque catch se omite.
La bloque finally se
ejecuta despues del bloque try y el/los bloque(s) catch hayan
finalizado su ejecución. Éste bloque siempre se ejecuta, independientemente de
si una excepción fue lanzada o capturada.
Puede anidar una o más
sentencias try. Si una sentencia try interna no tiene una
bloque catch, se ejecuta el bloque catch de la sentencia try que
la encierra.
Usted también puede usar la
declaración try para manejar excepciones de JavaScript. Consulte
la Guía de JavaScript para obtener mayor
información sobre excepciones de JavaScript.
Vamos a ver esto a través de
algunos sencillos ejemplos:
Nos situamos en
nuestro archive errores.js y como comentario dejo este ejemplo de estructura de
bloque try…catch…finally:
- En el bloque try lanzamos un
sencillo console.log, se ejecutará y como no hay ningún error en la consola
veremos el mensaje del try
- En la catch, capturamos
cualquier eventual error, y es donde podríamos hacer algo en caso de que
hubiera un error.
- En el finally , este bloque
siempre se ejecuta después de un bloque catch exista o no error, por lo tanto
con elsiguiente código deberíamos ver los mensajes del try y del finally, pero
no el del catch:
try{
}catch(error){
}finally{
}
Si abrimos nuestro index.html y vaos a la consola podremos ver que es lo que está ocurriendo:
 |
| Figura 6 salida por consola del bloque try...catch...finally |
Vamos a generar
y a lanzar un error, para ver el funcionamiento del bloque catch. Para ello
vamos a hacer referencia dentro del try a una variable que no ha sido declarada,
que podemos llamar por ejemplo noexiste.
Y en el bloque
catch lanzaremos el error por consola con un console.log(error):
//vamos a lanzar un
error para ver su funcionamiento
try{
noexiste;
}catch(error){
console.log(error); //<--imprimo
el error me tira: "ReferenceError: noexiste is not defined at
errores.js:18"
}finally{
}
Ahora veremos
nuestro error por consola, si este error no estubiera dentro de un bloque try
catch la ejecución del script se detendría y en consola veríamos el típico
mensaje en rojo, pero al estar dentro de un try catch, el flujo no se detiene
sino que salta al catch:
 |
| Figura 7. Salida por consola de un error bloque catch |
Personalizando
nuestros propios mensajes de error
Para terminar el
ejemplo, vamosa a crear un error personalizado con la function de JavaScript
throw new Error
try{
let numero = "a" //como
no es un número me lanza mi error personalizado
if(isNaN(numero)){
throw new Error("El caracter
introducido no es un número NaN");
}
console.log(numero * numero);
}catch(error){
}
Como puedes ver
en el try validamos que la variable número sea un numero mediante la funciín
isNaN (is not a number) si lo que tenemos en la variable número no es un número
se lanzará nuestro mensaje personalizado, en caso de que sí sea un número se
efectuará la multiplicación por él mismo:
Como hemos asígnado
una letra a la variable número, en este caso se produce el error y en consola
veremos:
 |
| Figura 8. Salida por consola de un error personalizado |
