JavaScript Do ZERO A Programaca - Fernando Feltrin
JavaScript Do ZERO A Programaca - Fernando Feltrin
JavaScript do ZERO à Programação
Orientada a Objetos
Fernando Feltrin
SOBRE O AUTOR
Disponível em Amazon.com
CURSO
Curso Python do ZERO à Programação Orientada a Objetos
https://www.facebook.com/fernandofeltrinpython
https://github.com/fernandofeltrin
ÍNDICE
Sumário
CAPA
SOBRE O AUTOR
AVISOS
LIVROS
CURSO
REDES SOCIAIS
ÍNDICE
JAVASCRIPT
Por quê programar? E por quê em JavaScript?
Metodologia
PREPARAÇÃO DO AMBIENTE
ESTRUTURA BÁSICA DE UM PROGRAMA
Sintaxe Básica
Leitura Léxica
Palavras reservadas
Indentação
TIPOS DE DADOS
Comentários
OBJETOS / VARIÁVEIS / CONSTANTES
Declarando Variáveis
Tipos de Variáveis
Tipo String
Tipo Number
Tipo Boolean
Tipo Array
Tipo Object
Tipo Function
FUNÇÕES BÁSICAS
Funções Embutidas
Funções Personalizadas
OPERADORES
Operadores básicos
Operador + para Soma ou Concatenação
Operador – para subtração
Operador / para divisão simples
Operador * para multiplicação
Operadores especiais
Atribuição aditiva
Atribuição subtrativa
Atribuição multiplicativa
Atribuição divisiva
Módulo (resto de uma divisão)
Exponenciação
Operações com dois ou mais operandos
Operadores lógicos
Operador and
Operador or
Operadores relacionais
Operadores de incremento e de decremento
Operador estritamente igual
Operador ternário
ESTRUTURAS CONDICIONAIS
if, else if, else
switch, case
ESTRUTURAS DE REPETIÇÃO
while
for
FUNÇÕES
Sintaxe básica de uma função
Função com parâmetros indefinidos
Função com parâmetro padrão
Função arrow
Função anônima (método convencional)
Funções aninhadas
MÉTODOS APLICADOS
Métodos aplicados a strings
replace( )
slice( )
toLowerCase( )
concat( )
trim( )
split( )
Métodos aplicados a números
toFixed( )
parseInt( ) e parseFloat( )
Métodos aplicados a arrays
Manipulando elementos via índice
pop( ) / shift( )
push( )
splice( )
slice( )
sort( )
map( )
filter( )
reduce( )
includes( )
PROGRAMAÇÃO ORIENTADA À OBJETOS
Classes
Métodos de classe
Herança
Classes como Funções
TÓPICOS COMPLEMENTARES
Closures
Função Factory
Operador de desestruturação
MODULARIZAÇÃO
PRÓXIMOS PASSOS
CONSIDERAÇÕES FINAIS
JAVASCRIPT
Por quê programar? E por quê em JavaScript?
Dos inúmeros nichos da chamada Tecnologia da Informação,
especificamente falando de toda parte de lógica computacional,
certamente uma das áreas mais importantes é a que se dedica a
criar meios e métodos para programação de computadores.
Se tratando deste nicho específico, dentro do mesmo existe todo um
universo de possibilidades no que diz respeito a forma como
escrevemos programas para que por meio destes tenhamos
ferramentas para os mais diversos problemas computacionais que
podem serem resolvidos de forma lógica.
O perfil de profissional de TI moderno, que o mercado de trabalho
busca para atender suas necessidades, é justamente o profissional
com uma bagagem de conhecimento híbrida, no sentido de que o
mesmo tenha conhecimento de aspectos físicos (hardware) e
lógicos (software) de modo que saber programação para assim criar
suas próprias ferramentas é um enorme diferencial para este tipo de
profissional.
Programar em si, por mais abstrato que o conceito possa parecer,
nos dias atuais é indispensável, haja visto que o crescimento
exponencial de todas as áreas de tecnologia demanda profissionais
que de alguma forma, em algum nível, tenha conhecimento de como
criar soluções por meio de aplicações, tudo isto a nível de
programação.
Nessa linha de raciocínio, somada a formação base do profissional
de TI, a programação de computadores se faz um diferencial muito
positivo para sua carreira. No âmbito acadêmico inclusive, podemos
notar que ao longo das décadas muitos dos cursos foram se
adaptando as necessidades do mercado incluindo em suas grades
curriculares uma carga horária dedicada a ensinar ao menos as
bases de alguma linguagem de programação.
Se tratando de programação em si, vivemos um momento muito
privilegiado no que diz respeito ao vasto número de linguagens de
programação assim como no que se refere as ferramentas que
temos em mãos para escrever nossos programas.
Diferentemente de outras épocas onde era preciso passar
instruções para um interpretador quase a nível de linguagem de
máquina, hoje temos linguagens de alto nível onde por meio das
mesmas, uma vez entendida sua sintaxe e regras básicas, podemos
criar aplicações bastante robustas de forma fácil e intuitiva, voltando
nosso foco em si totalmente à programação e não a forma de se
programar.
Com uma rápida pesquisa em algumas fontes certamente você irá
se deparar com nomes de linguagens de programação como C,
Java, Python e JavaScript (entre tantas outras) como principais
linguagens em uso pela comunidade de desenvolvedores em geral.
O fato é que muitas das linguagens já consolidadas evoluíram muito
com o passar das décadas assim como novas linguagens foram
surgindo, aumentando ainda mais o leque de possibilidades para os
desenvolvedores.
Quando estamos falando de linguagens de programação, cada uma
terá um propósito, seja este geral ou específico, mas o importante a
salientar é que na prática não existe de fato uma linguagem melhor
que outra, mas sim a que melhor se adapta dentro dos critérios do
desenvolvedor e ao tipo de problema computacional a ser resolvido.
JavaScript é uma dessas linguagens de programação em destaque,
pois é uma linguagem moderna, de fácil curva de aprendizado e que
oferece ferramentas para programação em todas as áreas
possíveis, desde um simples programa com funções internas e
interface com o usuário até aplicações web ou em computação
distribuída, aplicativos mobile, internet das coisas via sistemas
embarcados a até mesmo modelos de visão computacional e redes
neurais artificiais por meio bibliotecas que implementam tais
funcionalidades ao núcleo da linguagem, fazendo desta uma das
melhores linguagens para se programar em todas as camadas de
desenvolvimento de uma determinada aplicação.
O ponto é que JavaScript pode ser sua linguagem de programação
definitiva, que vá atender a todos seus requisitos, de modo que a
mesma dificilmente oferecerá alguma limitação ou restrição, muito
menos se tornará defasada ao longo dos anos graças a comunidade
que a usa e a mentem. Logo, independentemente se você já é
programador de outra linguagem ou está entrando neste mundo do
absoluto zero, tenha em mente que a linguagem de programação
que você aprenderá a partir dos capítulos subsequentes deste livro
é uma excelente ferramenta de programação, que possibilitará uma
abordagem em todos os possíveis mecanismos de uma aplicação.
Por fim, espero que o conteúdo deste pequeno livro seja de grande
valia para seu aprendizado dentro desta área incrível.
Metodologia
Este pequeno material foi elaborado com uma metodologia
autodidata, totalmente prática, de modo que cada tópico e cada
conceito será explicado de forma progressiva, sucinta e
exemplificada.
Cada tópico terá seu referencial teórico seguido de um exemplo
onde cada linha de código será explicada em detalhes. Quando
necessário será feita uma “engenharia reversa” do código
explicando os porquês de cada argumento e elemento dentro do
código.
Desde já tenha em mente que aprender a programar requer atenção
e muita prática, sendo assim, fortemente recomendo que sempre
que possível pratique replicando os códigos dos exemplos assim
como na medida do possível tente criar seus próprios códigos a
partir da base entendida no exemplo em questão.
O conteúdo deste livro é um compendio introdutório sobre
programação de computadores fazendo uso da linguagem
JavaScript, todo conteúdo incluso no mesmo visa criar bases sólidas
para que você consiga posteriormente trabalhar com ferramentas
baseadas em JavaScript, logo, todos os códigos apresentados
serão exemplos rodando em back-end, explorando as
funcionalidades da linguagem que podem ser aplicadas a qualquer
contexto e aplicação.
Finalizadas as considerações iniciais, vamos para a prática!!!
PREPARAÇÃO DO AMBIENTE
O primeiro passo a ser dado no que diz respeito à configuração de
nosso ambiente de desenvolvimento é realizar as devidas
instalações das ferramentas as quais faremos uso.
Se tratando de JavaScript é importante salientar que suas
ferramentas de desenvolvimento não vêm nativamente instaladas
em nosso sistema operacional, logo, para que possamos de fato dar
início a nosso aprendizado, o qual faremos de forma totalmente
prática, temos de realizar algumas simples instalações e
configurações em nosso sistema.
O processo de instalação do núcleo JavaScript pode ser feito de
diversas formas, eu recomendo fortemente que tal instalação seja
feita através da ferramenta Node.js, que veremos em detalhes em
capítulos subsequentes, pois por meio desta ferramenta o processo
de instalação de todas as dependências será totalmente
automatizado.
Acessando o site oficial da ferramenta Node.js, é possível baixar,
independentemente de seu sistema operacional, tanto a última
versão estável da ferramenta quanto versões experimentais. Apenas
para fins de exemplo, todos os códigos apresentados neste livro
estarão rodando sobre a versão LTS 14.17.6 do Node.js. Talvez
versões diferentes possam apresentar alguma incompatibilidade,
alteração ou descontinuidade ao tentar replicar os códigos
apresentados neste livro.
O processo de instalação se dá como o de qualquer outro programa,
através de uma interface de instalação a qual apenas avançamos
algumas etapas aceitando a licença de uso, caminho de instalação,
dentre outras configurações básicas.
Não havendo nenhum erro na primeira etapa de instalação, será
exibida uma tela de prompt de comando pedindo permissão para
que se instale todas as dependências necessárias para pleno uso
da linguagem JavaScript.
Concedidas as devidas permissões, é iniciado um script para
instalação de todas as ferramentas adicionais.
Uma vez terminadas as devidas instalações das dependências,
precisamos instalar uma IDE, outro tipo de ferramenta, dedicada ao
processo de oferecer uma plataforma onde podemos não somente
escrever nossos códigos como executar os mesmos.
Existe uma vasta gama de IDEs disponíveis no mercado, cada uma
com suas particularidades. Em nossos exemplos estaremos usando
do Visual Studio Code, um editor de texto com recursos de IDE, de
licença opensource, que nos fornecerá todas as ferramentas
necessárias para nosso processo de codificação.
Para baixar a última versão estável do Visual Studio Code basta
acessar seu site oficial e realizar o download do pacote de
instalação. Assim como para o Node.js, o processo de instalação do
Visual Studio Code é realizado por meio de um instalador próprio,
semelhante ao de qualquer programa em ambiente Windows.
Mesmo que:
Uma forma
muito usada de se abstrair uma expressão lógica é ler a mesma em
forma de pergunta. Em nosso exemplo, o valor da variável num1 (8)
é maior que 5? O retorno será True.
Por fim, por hora encerrando este capítulo introdutório ao laço for,
outra possibilidade a ser demonstrada é que o mesmo tem plena
capacidade de percorrer um object, extraindo dados / valores do
mesmo, desde que se respeite sua sintaxe de elementos dispostos
em campos de chave: valor.
Como exemplo, é criada uma constante de nome funcionario1, que
por sua vez recebe como atributo um object composto de três
conjuntos de chave:valor. Como mencionado anteriormente, para
este tipo de dado em JavaScript, o convencional é fazer referência a
uma determinada chave, para assim acessar seu valor.
Porém, usando do laço for podemos percorrer todos elementos
deste object, extraindo os dados que bem quisermos do mesmo.
Por exemplo, criando um laço for que, a cada ciclo de execução
retornará um dado para a variável temporária func (lembrando que o
nome da variável temporária pode ser qualquer nome, exceto
palavras reservadas ao sistema), sendo este dado o valor atribuído
a sua chave.
Exibindo em tela via console.log( ) o conteúdo de func, assim como
de funcionario1 na posição func, o retorno será:
Nome – Milena
Sobrenome – Silva
Função – Enfermeira
*No exemplo foi usado dentro de console.log( ) uma interpolação,
usando de máscaras de substituição que inserem dados de
variáveis diretamente sobre os campos delimitados com chaves,
algo que veremos em detalhes em capítulos subsequentes.
FUNÇÕES
Ao longo dos capítulos anteriores, para praticamente todos os
exemplos apresentados acabamos por usar da função console.log(
), uma função básica de retorno, que exibe em tela (via terminal)
algum retorno referente a execução de nosso código.
Agora que já temos uma certa bagagem de conhecimento
acumulada, podemos nos aprofundar no que diz respeito a funções
na linguagem JavaScript, entendendo suas particularidades e
criando nossas próprias funções.
Uma função, independentemente da linguagem de programação,
nada mais é do que um bloco de código que pode ser executado e
reutilizado livremente, quantas vezes for necessário, de modo a
realizar ações personalizadas de nosso programa. Em JavaScript,
uma particularidade a destacar é que por parte de leitura léxica, o
interpretador ao carregar um código realiza uma leitura e pré-
carregamento de todas funções presentes no código, aplicando a
leitura léxica sequencial apenas para os demais objetos.
Como mencionado em outros momentos, tudo em JavaScript é
função, de modo que uma função é um tipo de dado que terá suas
particularidades sintáticas e de comportamento. Na prática o que
isso reflete é que em JavaScript usar de funções é algo bastante
dinâmico, indo muito além de ser um script / algoritmo sendo
executado para gerar um retorno, podendo oferecer inúmeras
possibilidades à medida que entendemos suas estruturas internas
com seus respectivos comportamentos.
Lembrando que JavaScript é uma linguagem multiparadigma, ou
seja, por meio da mesma é possível implementar soluções de modo
funcional, orientado a objetos, procedural, distribuído, etc... e tudo
isso internamente é perfeitamente funcional graças ao modelo
adotado onde tudo é função.
Sintaxe básica de uma função
Direto ao
ponto, preste muita atenção à sintaxe. Inicialmente é declarada uma
variável de nome variavel1, que recebe como atributo uma função
anônima, que por sua vez recebe como parâmetro um número
qualquer e multiplica o mesmo por 2.
Repare que logo após o nome da variável com seu respectivo
operador de atribuição “ = “ é criado um campo delimitado por
parênteses com um objeto num dentro do mesmo, este campo é o
campo de inserção de parâmetros para a função, que nesse caso,
nem nome possui.
Na sequência é inserido o operador “ => “ arrow function, nesse
caso, apontando para o campo onde delimitado por chaves está o
corpo da função, que nesse caso simplesmente retorna o valor
repassado para num multiplicado por 2.
Uma vez criada nossa função anônima, podemos usar da mesma
diretamente como parâmetro para a função console.log( ). De
acordo com nosso exemplo, parametrizando console.log( ) com
variavel1(8) estamos chamando a função anônima através da
variável variavel1, repassando como parâmetro para a mesma o
valor 8.
Nesse caso, executando esse código o resultado será 16.
Função anônima (método convencional)
Declarada uma variável de nome valor, note que como atributo para
a mesma está o valor 19.90 representado como string.
Atualizando o valor da variável valor, aplicando sobre a mesma o
método Number( ), a partir deste ponto a mesma variável com seu
respectivo valor passarão a ser identificados pelo interpretador
como objeto de tipo numérico.
Exibindo em tela o tipo da variável valor através de nossa função
console.log( ), parametrizada com typeof( ), o retorno será number.
parseInt( ) e parseFloat( )
De forma um pouco diferente do exemplo anterior, realizar a
conversão de um tipo de dado qualquer usando dos métodos
parseInt( ) e parseFloat( ) realiza as devidas conversões apenas
sobre elementos compatíveis, ou seja, já numéricos em outro tipo de
dado.
Raciocine, por exemplo, uma string ‘Ano 2001’ atribuída a uma
variável. Convertendo a mesma via parseInt( ), nos será retornado
apenas o valor 2001, desconsiderando todos os demais caracteres
não numéricos.
O mesmo se aplica para casos onde temos números de casas
decimais, uma vez que estamos convertendo um determinado valor
para numérico de tipo inteiro, as casas decimais serão
desconsideradas.
Além disso, a nível de closure, uma vez que temos uma constante
variavel1 (ou qualquer outra) dentro do corpo de uma função, a
mesma só será visível pelos demais elementos internos a função.
Se tentarmos realizar qualquer iteração do escopo global do código
com uma variável / constante de dentro de uma função, um erro
será gerado.
Apenas para fins de exemplo, simulando o erro, ao executar o
código acima é exibido via terminal uma mensagem dizendo que
variavel1 não existe. O ponto é que ela existe, porém só para a
função login( ), sendo invisível para qualquer outra estrutura de
dados.
Função Factory
Quando estamos falando de funções em JavaScript, temos
literalmente uma centena de possibilidades no que diz respeito tanto
a forma de declaração / definição de uma função quanto ao
comportamento esperado pela mesma.
O ponto é que quanto mais conhecemos tais possibilidades, mais
otimizados tornamos nossos códigos fazendo uso de funções cada
vez mais especializadas.
Nesse contexto, uma abordagem de funções não abordada no
capítulo de funções, mas que guarda suas particularidades úteis
para certas aplicações, é a criação das chamadas factory functions,
funções simples, reduzidas e especializadas em criar novos objetos
a partir de sua estrutura base.
Para situações onde temos de criar múltiplos abjetos, todos com
algumas características em comum, podemos usar de uma função
factory para criar o molde a ser replicado para todos os objetos. Na
prática, o que difere esta estrutura base de função das demais é que
a mesma diretamente retorna novos objetos com seus respectivos
dados / valores para uma variável.
Como exemplo, é criada de início uma função de nome cadastro( )
que por sua vez receberá obrigatoriamente e em justaposição dois
parâmetros nome e data_nasc.
Dentro do corpo da mesma, sem nenhuma estrutura de código
dedicada a alguma funcionalidade, é diretamente inserido um
marcador para retorno, seguido da notação de chaves para que
assim se retorne um object.
Como visto no capítulo dedicado aos tipos de dados, um object é
um contêiner de dados onde é possível armazenar múltiplas
variáveis de todo e qualquer tipo com seus respectivos atributos.
De volta ao escopo global do código, é criada uma variável de nome
cliente1 que chama a função cadastro( ) parametrizando a mesma
com ‘Fernando’ e ‘08/11/1987’.
Exibindo em tela via console.log( ) o conteúdo de cliente1.nome,
será retornado Fernando, assim como qualquer outro objeto gerado
pela função, desde que se use da notação de iteração para object,
onde referenciamos uma determinada chave para obter seu
respectivo valor.
Operador de desestruturação
Um operador mais avançado (e em função disso o mesmo não estar
nos tópicos introdutórios sobre operadores) é o chamado
destructuring.
Até mesmo por parte de sintaxe esse “operador” é escrito mais
como um campo para parâmetros serão extraídos de um objeto do
que um símbolo específico a ser identificado pelo interpretador.
O ponto é que, funcionalmente, um operador de desestruturação é
um mecanismo do qual podemos extrair múltiplos elementos de um
object sem que para isso seja necessário criar uma extensa
estrutura de variáveis, operadores, condicionais e funções.
Como mencionado diversas vezes ao longo deste pequeno livro,
uma vez que tudo em JavaScript é função, podemos tirar proveito
dessa característica para produzir dados a partir de dados
existentes, e esse processo pode ser reduzido fazendo o uso
correto de desestruturações.
Em nosso exemplo, declaramos uma constante de nome
funcionario1, que por sua vez recebe uma série de dados em
formato de object. Lembrando que um object em JavaScript,
equivalente a um dicionário em Python e outras linguagens, é
composto por dados dispostos em chaves:valores, sendo que os
valores atribuídos as chaves podem ser qualquer tipo de dados
(inclusive outro object). Sendo assim, compondo funcionario1 temos
uma série de dados organizados como características de um
funcionário fictício.
Na sequência, referente a linha 14 de nosso código temos o
mecanismo de desestruturação, onde declaramos uma constante,
diretamente seguido de um object, onde dentro do mesmo são
criadas as instâncias de duas chaves nome e funcao que receberão
dados dessas chaves homônimas, atribuindo seus respectivos
dados / valores para as variáveis nome01 e funcao01,
respectivamente. Finalizando a desestruturação temos o operador
de atribuição seguido de funcionario1, que será a origem dos dados.
Em outras palavras, observe que o que está ocorrendo é que temos
um object que receberá dados de funcionario1, dentro desse object
instanciamos as chaves de funcionario1 as quais queremos extrair
os dados, repassando os mesmos como atributos para variáveis que
estão sendo criadas dentro do próprio object. Dessa forma temos,
embora um tanto quanto abstrato, um mecanismo reduzido de
extração de dados e geração de variáveis a partir de um object já
existente em nosso código.
A partir do momento que o mecanismo de desestruturação é
processado e concluído, as variáveis geradas são perfeitamente
usáveis para outros fins. Nesse caso, exibindo em tela o conteúdo
de nome01 via console.log( ) o retorno será Fernando, da mesma
forma exibindo em tela o conteúdo de funcao01 o retorno será Eng.
da Computação.
Como você deve ter reparado, como valor da chave dados de nosso
object temos um nojo object com alguns campos organizados em
chave:valor como a regra manda.
Através do mecanismo de desestruturação, para acessarmos essa
camada de dados dentro do object original, basta que usemos da
notação de object para ter acesso a tais dados.
Repare que, na linha 14 de nosso código, além da extração de
dados realizada de nome e atribuída para nome01 como feito no
exemplo anterior, agora estamos a entrar dentro do object associado
a chave dados, mais especificamente extraindo dados da chave
admissão, atribuindo tais dados a uma nova variável de nome
data_admissao01.
Exibindo em tela via console.log( ) o conteúdo de nome01 será
retornado Fernando, assim como exibindo em tela o conteúdo de
data_admissao01 nos será retornado 06/2019.
MODULARIZAÇÃO
Quando estamos desenvolvendo nossas aplicações, é natural que
certas estruturas de código acabem sendo alocadas para arquivos
independentes, pois dessa forma tais estruturas de código podem
ser acessadas, utilizadas e reutilizadas por diversos outros arquivos
quando necessário, assim como tal prática facilita muito a
manutenção destes blocos de código, uma vez que podemos
realizar alterações nos mesmos sem que para isso tenhamos de
alterar nossa estrutura de código principal.
Dentro dessa mesma linha de raciocínio uma prática muito comum é
importar módulos de terceiros, que implementam funcionalidades
que o JavaScript não possui ou não carrega por padrão quando
iniciado.
Por parte sintática é necessário incluir alguns marcadores / palavras
reservadas ao sistema para que ocorra a correta comunicação entre
nosso arquivo de código principal e os arquivos referentes a
módulos, permitindo o uso de blocos de código carregados a partir
dos mesmos.
Contextualizando, imagine uma classe ou função criada de modo a
ser utilizada por certas estruturas quando necessário. Supondo que
tal estrutura de dados estivesse declarada ao longo do corpo de
nosso código geral e não fosse utilizada em nenhum momento,
ainda assim por parte de leitura léxica teríamos tais estruturas
carregadas e pré-alocadas, afetando a performance de execução de
nosso programa. Já se tais estruturas estivessem modularizadas em
um arquivo independente, apenas quando se fizesse necessário tal
arquivo seria importado, carregando e disponibilizando seu
conteúdo.
Para fins de exemplo, criamos um arquivo de nome pessoa.js que
será nosso módulo, dentro desse arquivo criamos uma classe de
nome Pessoa que possui um método construtor, criando os objetos /
atributos de classe nome e sobrenome, respectivamente.
Na sequência é criada a sentença module.exports = Pessoa,
estrutura que fará com que a classe Pessoa não somente seja
visível mas instanciável por outro arquivo que a importe. *Caso em
nosso módulo houvessem outras estruturas a serem
compartilhadas, como funções por exemplo, para cada uma dessas
estruturas de código deverá ser criado o marcador module.exports.
Espero que de fato a sua leitura tenha sido tão prazerosa quanto foi
para mim escrever este humilde livro. Mais importante que isso,
espero que tenha de fato contribuído com seus estudos e que tenha
aprendido coisas novas a partir deste material.
Jamais pare de estudar, seja um eterno estudante de programação,
especialize-se, e certamente estará à frente dos demais que por
seus motivos ficam no entorno do básico.
Nos vemos em algum outro livro, curso ou treinamento, até lá... Um
forte abraço!
Fernando Feltrin