Olá, caríssimo aluno! Tudo bem? Chegamos ao fim de nossa disciplina. Foi um longo percurso até aqui, de muitas aprendizagens e, nessa última aula, não poderia ser diferente. No decorrer das videoaulas, conversaremos sobre três assuntos diferentes, simples, mas que são extremamente importantes para a sua produtividade enquanto programador. Para facilitar o entendimento, fiz a seguinte divisão:

1. Na primeira videoaula, vou explicar como funciona o tratamento de erros em JavaScript. Aqui, apresentarei uma ferramenta que existe não só em JavaScript, mas em várias outras linguagens. Essa ferramenta permite que você, ao identificar um erro, o "lance" para que ele seja tratado em outra parte do código.
2. Na segunda videoaula, vou tratar sobre estilo de código, ou seja, como você deve estruturar o seu código para que ele seja visualmente mais fácil de ser lido e entendido. São regras simples, mas que têm um impacto significativo na produção de um time de programadores.
3. Por fim, serão apresentadas algumas regras básicas de programação que irão impactar na sua produção. É o que chamamos de "boas práticas de programação". Vamos lá?!

No decorrer dessa disciplina, vimos diversas vezes que erros irão acontecer. Você mesmo, ao fazer os exercícios, já deve ter se deparado com vários tipos de erro, não é mesmo? Por exemplo, um erro de referência acontece ao tentar usar uma variável que não foi definida, como na tentativa de usar a variável y, no slide (Figura 1). Alguns erros também podem ser gerados por entradas inválidas. No exemplo da sequência Fibonacci visto em aulas anteriores, foi necessário retornar o texto "ERRO" caso o valor inserido pelo usuário fosse negativo. Mas, e se você desejar retornar um erro? O que pode ser feito?

Ao longo da nossa disciplina, foram aplicados alguns tipos de tratamento desses erros. Por exemplo, diversas vezes controlávamos o valor de entrada para que ele satisfizesse algum critério estabelecido previamente. Um exemplo disso foi quando construímos o loop que vemos no slide (Figura 1), que solicitava um número ao usuário até que ele, de fato, inserisse um número.

No entanto, esse tipo de controle não era possível para erros como os de referência e de tipo, por exemplo. Você deve lembrar que diversas vezes, ao tentar testar os seus programas, a página ficava em branco. Apenas quando você abria a ferramenta de depuração era possível descobrir o erro que causou a não execução do código. Claramente, isso não é o ideal!

Felizmente, JavaScript nos oferece uma ferramenta que permite tratar todos esses tipos de erro. E, nesta videoaula, você vai conhecer os tipos de erro e como podem ser tratados.

No slide (Figura 2), vemos a estrutura geral do tratamento de erros do JavaScript. Nele, vemos três blocos de código sendo guardados pelas palavras-chave try ("tentar" em inglês), catch ("pegar" em inglês) e finally ("finalmente" em inglês).

E agora, quer saber como se comporta esse código?

Primeiramente, o código (1) é, de fato, executado. Durante essa execução, pode ocorrer o lançamento de erros. Vários desses erros são lançados sem o conhecimento do programador como, por exemplo, os erros de referência e de tipo, que descrevi anteriormente. No entanto, erros customizados também podem ser lançados intencionalmente pelo programador.

Para isso, ele pode usar a palavra-chave throw ("lançar" em inglês) seguido pelo erro. Ao longo desta videoaula, serão apresentados alguns exemplos de como fazer isso.

Caso algum erro seja lançado na execução do código (1), essa execução será interrompida e o erro será pego pelo catch. Isso dará início à execução do código (2), ou seja, o código de tratamento do erro.

Finalmente, após a conclusão da execução do código (1) e, caso essa execução tenha lançado algum erro, após a execução do código (2), temos a execução do código (3), ou seja, o código a ser executado após o try/catch. Portanto, note que o bloco finally será sempre executado, independentemente de termos algum erro no bloco try ou não.

Vamos ver como ficaria o tratamento dos erros de sintaxe e de tipo que vimos anteriormente?

Código 1 - 15_1 Exemplos Simples.html e 15_1 Exemplos Simples.js

Nesse exemplo, que é muito simples, queremos só ilustrar a questão desses erros que foram mencionados. Veja no JavaScript que na linha 3 temos uma atribuição a uma variável x que recebe o resultado da expressão y + 1, porém note que y não foi declarado em momento algum nesse script. Mas essa atribuição está dentro desse bloco try/catch, Tá certo?

Então nesse bloco try/catch foi executado essa atribuição. E se tivermos o catch do erro, o que estou fazendo na linha 9 é alterar o campo "resultado" do HTML. Eu não mostrei o HTML, mas ele é muito simples, ele tem apenas um campo "resultado", que está na linha 11. Veja no JavaScript entre as linhas 8 e 10 que ele pegará erro, dirá o erro.toString, e exibirá a mensagem de erro.

Se formos para página HTML, veja só o que acontece, ele exibirá "ReferenceError: y is not defined", então ele, de fato pegou esse erro e essa será a mensagem exibida, ok?

Outro tipo de erro a ser ilustrado neste exemplo é o erro de tipo. Declaramos a variável x, atribuímos 0 a ela, e chamaremos a função toUpperCase à x. Bom, não podemos aplicar essa função a esse x. Que tipo de erro esse bloco try/catch irá pegar? O erro vai ser levantado, vai ser pego, e iremos colocá-lo na página, e é "TypeError: x.toUpperCase is not a function". Então ele está dizendo que tem um erro de tipo porque estou aplicando uma função a uma variável que tem um tipo ao qual essa função não pode ser aplicada. Veja a Figura 4.

No exemplo que você acabou de ver, o erro foi "automaticamente" gerado pelo interpretador JavaScript. No entanto, os erros também podem ser lançados pelo programador. Para isso, basta usar a palavra-chave throw seguida por um parâmetro. Podemos lançar strings, números, valores booleanos ou objetos de erro. No slide (Figura 5), podemos ver exemplos de lançamento de cada um desses tipos.

Existem diversos tipos de objetos de erro. São eles:

• Error é um objeto de erro lançado em tempo de execução pelo interpretador, mas que também pode ser usado como base para erros definidos pelo usuário, como o que vimos anteriormente. Por exemplo, no slide (Figura 6) vemos um trecho de código que lança um erro contendo uma mensagem dentro dele. Esse erro é capturado pelo bloco catch e é usado para alterar a página HTML.
  
  
• RangeError é um objeto de erro que indica que um valor não está no intervalo de valores permitidos. No slide (Figura 7), vemos um exemplo de um trecho de código que lançará um RangeError, pois não podemos definir o número de dígitos significativos de um número como 101, porque ele só pode ser entre 1 e 100.
  
  
• ReferenceError é um objeto de erro que indica uma referência a uma variável que não existe. No slide (Figura 8), por exemplo, estamos referenciando uma variável x que não foi declarada. Por isso, esse erro é lançado na atribuição do bloco try é capturado e tratado no bloco catch.
  
  
• TypeError é um objeto de erro que o interpretador lança quando um operador ou argumento passado para uma função é incompatível com o tipo esperado por esse operador ou função. No slide (Figura 9), estamos tentando aplicar a função toUpperCase() a um número, o que não é permitido.
  
  

O próximo tipo de erro está relacionado à função global de JavaScript eval. Essa função avalia ou executa a string passada como argumento. A avaliação é feita se a string passada for uma expressão. No entanto, se o argumento passado for uma ou mais instruções do JavaScript, essa função executará esses comandos. O objeto SyntaxError é um objeto de erro que o interpretador lança quando tenta fazer essa interpretação de um código sintaticamente inválido. No exemplo que temos no slide (Figura 10), o erro de sintaxe é lançado porque a expressão nem é um número, nem é uma variável válida de JavaScript. Temos, então, um típico erro de sintaxe.

Para concluir os tipos de erro, temos EvalError e URIError. O EvalError é um objeto que indica erro na chamada da função global eval(). Ele não é mais lançado pelo JavaScript, mas permanece lá. Por fim, o URIError é um objeto de erro que indica que uma função global de manipulação de URI foi usada de maneira incorreta.

Independentemente de como o erro foi criado, todo erro tem duas propriedades: o nome e a mensagem. Veja no slide (Figura 12) como podemos acessar esses valores. O nome do erro corresponde exatamente aos tipos que vimos anteriormente e a mensagem é a string que o erro carrega com a sua descrição. No slide (Figura 12), podemos ver como acessar os valores erro.name (marcado em amarelo) e erro.message (marcado em vermelho) para exibir separadamente o nome e a mensagem do erro.

Fique à vontade para abrir o arquivo 15_2 Tipos de Erro.html e verificar o comportamento dos erros apresentados.

Código 2 - 15_2 Tipos de Erro.html

Note que essas propriedades, por não fazerem parte do padrão, não funcionarão em todos os navegadores. Portanto, não use-as em sites públicos.

O foco desta aula é o lançamento de strings, mas você pode ler o QR code que está no slide (Figura 13) para aprender mais sobre os outros tipos de lançamento de erro, incluindo aqueles que são customizados pelo programador.

Agora que você sabe como lançar erros e como acessar suas propriedades, podemos revisitar um exemplo que vimos em aulas anteriores, o qual retornava o resultado da função de Fibonacci. Desta vez, porém, vamos fazer uso do lançamento e tratamento de erros.

Código 3 - 15_3 Fibonacci.js

O HTML é idêntico ao que já vimos, só pra lembrar, temos o campo de entrada no "numero" e o botão que tem escrito Fibonacci (linha 12). Ao clicar no botão, chamaremos a função exibir e escreveremos no campo do parágrafo "resultado", o resultado de fato, tá certo? Então, no JavaScript temos a função exibir, que agora tem um bloco try/catch. E, dentro do try, temos o que já fazíamos. Nós pegamos o valor do número que foi inserido e exibimos no parágrafo essa string resultado, na linha 7, que é "fibonacci( " + numero + ") =" + fibonacci(numero).

Temos duas possibilidades de erros. Primeiro, é um erro que eu não mencionei ao longo da disciplina, mas que pode acontecer, que ocorre quando na linha 4 formos pegar o numero e fizermos document.getElementById pegar o elemento usando o id dele passar o id errado. Então, se eu passar um id errado, ele não vai encontrar esse elemento. A outra possibilidade de erro é que esse número passado seja negativo, que é exatamente por isso que quisemos voltar para fazer o tratamento desse número negativo. Então, faremos o catch se um desses dois erros acontecem e nós pegamos esse erro no bloco catch. E vou aproveitar esse exemplo também para mostrar como tratar erros diferentes de maneiras distintas.

Então, temos o if-else (linhas 12 - 16). Bom, se o erro for uma instância do TypeError, que é o tipo de erro que acontece se passarmos o id errado, na linha 4 eu vou escrever a mensagem "Erro de tipo". Caso contrário, ou seja, se eu passar um n negativo, esse fibonacci da linha 7 vai me trazer um erro e eu vou simplesmente exibi-lo. Veremos primeiro como é que o fibonacci com n negativo lança um erro.

Vamos à função fibonacci, ela é muito parecida com a que nós já conhecemos. Esse trecho (linhas 26 - 32) é exatamente igual. Adicionei simplesmente essa parte entre as linhas 24 e 26. Se o n for menor que 0, eu vou lançar throw, que é um erro com esse texto "O número de entrada não pode ser negativo!!!". Tá certo? E esse erro vai ser pego e será usado como mensagem. Vamos ver como é que se comporta na página HTML? Se nós passarmos um número positivo, ele funciona normalmente. Se passarmos um número negativo, veja que será exibida a mensagem de erro.

Então, qualquer número negativo que eu passar irá gerar esse erro. Vamos gerar outro tipo de erro que eu mencionei no começo, no campo da linha 4 iremos colocar um x, e esse campo não existe no HTML, o "numerox". E se eu recarregar essa página e apertar o botão Fibonacci, será exibido "Erro de tipo" como exposto na Figura 15. Porque ele foi tentar pegar o valor desse campo, só que esse campo não existe com aquele identificador, porque eu errei o identificador ao colocar o "numerox" ao invés de "numero". Se usarmos "numero", como já visto, o Fibonacci funcionará normalmente.