Introdução

Nessa aula veremos o básico da lógica de programação, como armazenar e

usar valores.

Lógica de programação

Quando falamos sobre Lógica de Programação, não podemos esquecer que

somos seres lógicos, por natureza temos o costume de pensar
estruturadamente.

Por exemplo, quando seguimos uma receita de bolo, estamos construindo e

executando um algoritmo, uma sequencia de passos e validações para chegar
em um resultado final.

As instruções são um conjunto de regras definidas para realizar algo.

Pensando em instrução dentro de tecnologia, é a instrução que indica a um

computador uma ação a ser executada. Para criar programas precisar fazer um
conjunto de instruções em ordem lógica para que o computador execute passo
a passo.

Pra fazer nosso bolo precisamos executar uma serie de instruções, como:

1. Separar ingredientes

2. Pré aquecer o forno

3. Seguir passo a passo da receita... etc

Sabemos que essa receita precisa ser executada exatamente em uma ordem
para que no final tenhamos um bolo pronto, imagina se fizermos as coisas
separadas e esquecermos de juntar no final, não dará certo, logo temos que
pensar lógicamente todas as intruções que precisamos seguir para finalizar o
bolo.

Trazendo isso para a programação não é diferente, se pensar em um conjunto

de instruções, um algoritmo, que irá somar dois números e mostrar seu
resultado.

Primeiro precisamos escrever o número um, depois escrevemos o número

dois, em seguida somamos ambos e escrevemos o resultado. Exemplo:
Aviso!

Nota: Nesse exemplo utilizamos o console.log para exibir o valor de

totalDaSoma no console.

Quando falamos de computador, estamos falando de dados, novos dados,

excluir dados, mudar dados. Todos esses dados são armazenados em
sequências de bits.

Para criar um valor, você precisar chamar por ele. Mas todo valor precisa ser
armazenado em algum lugar, nos bits. Pra utilizar um valor você dará um
apelido a ele e o chamará por esse apelido. Exemplo:

Assim sempre que eu for precisar armazenar alguma informações nesse valor
irei chama-lo por ser apelido.

O que aprendemos?

Nessa aula entramos com o pé direito na lógica de programação, vimos que

devemos dar instruções em uma ordem para que seu programa execute estas
ações e também vimos que precisamos dar apelidos para os valores para
poder manipular ou exclui-los.

Para começar a experimentar com o JavaScript, iremos usar o console do

JavaScript que vem incorporado ao navegador. Todos os navegadores
populares têm um console, e, apesar de não serem idênticos, são todos muito
parecidos. Vou usar o Google Chrome neste vídeo.

O console é um exemplo de algo chamado REPL, que significa Ler-Calular-

Imprimir-Repetir (do inglês Read-Evaluate-Print-Loop), mas tudo o que você
precisa saber de fato é que ele é um ambiente interativo onde podemos digitar
um comando JavaScript por vez e ver imediatamente o resultado de cada
comando. Curtiu? Vamos testar.
Você pode abrir o console JavaScript a partir de qualquer página web, incluindo
essa que você está assistindo este vídeo, então vamos tentar. Uma maneira de
abrir um console que funciona em praticamente todos os navegadores, é clicar
com o botão direito em qualquer lugar de uma página e escolher a opção
Inspecionar. Isso abre as ferramentas do desenvolvedor do navegador, e lá
você pode alternar para a aba no topo que diz Console. O console é uma de
muitas ferramentas de desenvolvedor, e algumas são muito, mas muito úteis
na hora de depurar HTML e CSS, mas no momento estamos interessados no
console JavaScript. Então essa é uma forma de abri-lo.

Você também pode usar atalhos do teclado e eu sei os atalhos do Google

Chrome. Os outros navegadores também possuem atalhos, mas eu vou falar
sobre os do Chrome. No Mac é Option + Command + J. No Windows
é Shift + Ctrl + J. Novamente, Option + Command + J no Mac,
e Shift + Ctrl + J no Windows. Faça uma tentativa.

Seu console pode ter aberto na parte de baixo em vez de à direita dessa forma.
Sem problemas. Você pode movê-lo usando este menu aqui com os três
pontos.

Console do Google Chrome

Então talvez ele tenha aberto na parte de baixo. Se este for o caso e você
quiser que ele fique à direita como o meu, é só clicar aqui e depois neste botão,
"Dock to right". Mas a posição dele não importa. Funciona da mesma forma.

É possível que já haja alguma mensagem de erro ou outras mensagens no

console quando você abri-lo. Se tiver, não se preocupe. Isso pode ter várias
origens relacionadas à página onde você está, ou até mesmo a extensões
instaladas no seu navegador. Se houver erros ou outras mensagens no
console neste momento, sinta-se a vontade de ignorá-las, ou você pode limpá-
las ao clicar no botão "Clear console" 🚫, ou usando o atalho +L ou ⌘K.
Vale observar também que nenhuma das mudanças que você fizer usando o
console é permanente. Elas afetam apenas este carregamento da página no
navegador. A página volta ao normal assim que você atualizá-la. E ninguém
que visitar a página consegue ver suas alterações. Certo?

Aliás, o console permanecerá aberto nesta aba até que você o feche, mesmo
se você visitar outra página. Se quiser fechá-lo, você precisa fazer isso
ativamente.

O que são as variáveis?

Variáveis são espaços na memória em que colocamos valores para podermos

trabalhar com eles no nosso código. Ao declarar uma variável, podemos gravar
e ler esses valores diretamente dela a partir do nome que definimos para a
variável.

Definindo variáveis

Para definir uma variável no JavaScript, utilizamos a palavra let. Por exemplo:

Quando atribuímos uma variável, o que estiver aparecendo à direita do sinal de

igualdade é calculado e armazenado em uma variável com o nome que
aparece à esquerda do sinal de igualdade. Em qualquer lugar que pudermos
usar a frase 'Semana da programação web', podemos usar a
variável minhaVariavel.

Tipos de variáveis

No JavaScript, temos diversos tipos de variáveis. Como vimos anteriormente a

definição das nossas variáveis é de forma dinâmica, ou seja, não necessitamos
dizer qual tipo ela irá receber, mas mesmo assim os tipos de variáveis existem
e são atribuídos de forma dinâmica.

 String - Uma string é um texto.

 Number - São números, podem ser integers, float, etc.

  Boolean - São operadores booleanos, ou seja, apenas verdadeiro ou
falso (true ou false)

 Array - É uma estrutura de dados que consegue armazenar qualquer

valor de forma ordenada.

 Object - Um objeto é uma coleção de dados que é baseada em chave:

valor.

String

Number

Boolean
Array

Podemos acessar os valores dos arrays utilizando colchetes. Exemplo:

Note que o valor nos colchetes, é zero. É porque todos os arrays iniciam a sua
contagem de índices a partir do 0.

Object
Nós conseguimos acessar os dados de um objeto dessa forma:
Gostaríamos de manter todo o JavaScript em um arquivo separado, e
simplesmente usar uma tag <script> para fazer o link até ele. Às vezes, é isso
que você fará, pois as coisas podem ficar um pouco bagunçadas ao misturar
HTML com JavaScript em um único arquivo. Vamos testar!

Eu tenho um projeto com um arquivo de texto padrão HTML simples. Abri o

arquivo no VS Code e no navegador. Agora quero adicionar um arquivo
JavaScript. Basta adicionar um novo arquivo ao projeto com uma extensão .js.
Que tal index.js? Agora usamos uma tag <script> para fazer o link até ele.
Assim como antes, colocaremos o elemento <script> antes da tag de
fechamento </body> e ele ainda terá uma tag de abertura e uma de
fechamento, apesar de não estarmos colocando nada entre os dois. Em vez
disso, estamos adicionando um atributo src que aponta para o nosso
arquivo .js. É igual o atributo href de um link. Na verdade, eu gostaria muito que
eles o tivessem chamado de href em vez de src, mas eles não o fizeram.

Agora vamos colocar um pequeno código em nosso arquivo .js para que
possamos realmente ver isso funcionando. Um simples console.log() resolve.

console.log("Funcionou!")

Certifique-se de que o console esteja aberto no seu navegador e atualize a

página. Vê o "Funcionou!"? Se sim, tudo certo. Se não, o que pode ter
acontecido? Deixe-me mudar minha tag <script> para apontar para o local
errado, assim eu posso ver como as coisas se parecem.

Caso você atualize a página e apareça um erro no console: GET

file:///path/to/wrong.js net::ERR_FILE_NOT_FOUND. Então se você estiver
vendo isso, provavelmente há um problema com o valor do seu atributo src. Ou
você digitou o nome do arquivo errado, ou o arquivo está em uma pasta
diferente, ou algo do tipo

Olá! Nessa aula iremos aprender como podemos fazer operações matemáticas
no JavaScript.

No JavaScript, conseguimos fazer operações matemáticas de forma fácil e

rápida. Com um editor aberto, podemos já testar da seguinte maneira:
Com isso, fizemos as 4 operações básicas de forma rápida. Como vimos na
aula anterior, podemos utilizar variáveis para auxiliar no desenvolvimento.

Então vamos declarar as nossas variáveis.

Com nossas variáveis declaradas, podemos realizar operações matemáticas

com elas também.
Mas se quiséssemos atribuir uma operação matemática para uma variável?
Também podemos:

Existem situações também que vamos precisar reatribuir o valor da nossa

variável. Por exemplo:

No exemplo anterior, pegamos o valor atual do notaTotal e somamos mais

1000. Podemos simplificar dessa forma:
Booleanos e comparações

Olá! Hoje vamos aprender a como comparar valores e manipular o nosso

código baseado em condicionais. Com isso, trabalharemos com o Boolean
(true ou false).

E para que utilizamos o Boolean? Às vezes os programas fazem apenas uma

coisa depois da outra, mas na maioria das vezes, há algumas ramificações,
coisas tipo se isso, então faça aquilo, onde certas partes do código são
executadas apenas se um certo tipo de condição for atingido. Essas condições
devem ser true ou false. (Ou nós devemos ser pelo menos capazes de
convertê-las para true ou false.)

Para obtermos booleanos, podemos utilizar operadores de comparação, como

o maior que > e menor que <

Podemos atribuir também as comparações às variáveis.

Também podemos conferir se eles são iguais. Já usamos o sinal de igualdade
antes, certo.

x=y

x = y não retorna true ou false; ele retorna 4! Nós acabamos de atribuir o valor
de y à variável x. Portanto x é 4 agora. Opa!

Aprendemos que um único sinal de igualdade é usado para atribuir o valor de

uma variável. Chamamos isso de operador de atribuição. Portanto, se
quisermos comparar dois valores para ver se eles são iguais um ao outro,
podemos usar três sinais de igualdade.

x === y // true

Neste momento, isso é verdade, pois ambos são 4. Se retornarmos

o x para 3...

x=3

...então ele não será mais igual a y.

x === y // false

Mas por que três sinais de igualdade? Se um é usado para atribuição e três
são usados para verificar a igualdade, o que dois sinais fazem? Bem, o
JavaScript é um pouco estranho. Dois sinais de igualdade também são usados
para verificar igualdade, mas eles funcionam de um modo um pouco diferente.
A verdade é que quase nunca há um bom motivo para usar dois, então vamos
nos acostumar a usar três. Combinado?

Naturalmente, ao fazer comparações como esta, os valores que você estiver

usando não precisam ser armazenados em variáveis. Um ou mais desses
valores podem ser literais também.

x < 5 // true

x > 2 // true

x < 0 // false
3 < 6 // true

7 === 7.0 // true

Realizando condições (if/else)

https://player.vimeo.com/video/440422175

A maioria dos programas que escrevemos não irão simplesmente rodar uma
série de instruções estritamente sempre na mesma ordem. Quase sempre há
alguma ramificação ocorrendo. Algo tipo se isso, faça aquilo.

Como fazemos isso? Usando as declarações condicionais.

Usamos declarações condicionais para dizer ao JavaScript. Execute o
seguinte trecho de código apenas quando uma certa condição for verdadeira. É
mais ou menos assim:

A palavra-chave if seguida de alguma condição em parênteses. Então que tipo

de coisa pode ser uma condição? O que pode ir dentro dos parênteses? Bem,
qualquer expressão pode ir ali dentro. De preferência, algo que seja reduzido a
um valor Booleano (true ou false), mas outros valores também têm
equivalentes Booleanos que também funcionam; falaremos sobre ele mais
tarde. Mas na maioria das vezes será um valor Booleano ou uma expressão
Booleana, como uma comparação.
Depois dos parênteses temos que usar uma chave de abertura. É uma tecla
provavelmente pouco usada no seu teclado, mas será praticada agora que
você começou a escrever códigos! Essas chaves iniciam um bloco de código
que será executado quando a condição for verdadeira. Você pode colocar
qualquer número de linhas JavaScript lá dentro, e todas serão executadas se a
condição for verdadeira. Caso contrário, ela será pulada completamente.
Marcando o final do bloco está uma chave de fechamento.

Vamos ver um exemplo real.

Portanto se x < 4, essas duas linhas serão registradas no console. Caso

contrário, não! As linhas entre as chaves são executadas apenas se a condição
for verdadeira.

Também podemos adicionar a palavra-chave else seguido de outro bloco.

Qualquer coisa neste segundo bloco será executada apenas se a condição for
falsa.
JAVASCRIPT: Introdução às Condições (if/else)
A maioria dos programas que escrevemos não irão simplesmente rodar uma
série de instruções estritamente sempre na mesma ordem. Quase sempre há
alguma ramificação ocorrendo. Algo tipo se isso, faça aquilo.

Como fazemos isso? Usando as declarações condicionais.

Usamos declarações condicionais para dizer ao JavaScript "Execute o
seguinte trecho de código apenas quando uma certa condição for verdadeira. É
mais ou menos assim:

A palavra-chave if seguida de alguma condição em parênteses. Então que tipo

de coisa pode ser uma condição? O que pode ir dentro dos parênteses? Bem,
qualquer expressão pode ir ali dentro. De preferência, algo que seja reduzido a
um valor Booleano (true ou false), mas outros valores também têm
equivalentes Booleanos que também funcionam; falaremos sobre ele mais
tarde. Mas na maioria das vezes será um valor Booleano ou uma expressão
Booleana, como uma comparação.
Depois dos parênteses temos que usar uma chave de abertura. É uma tecla
provavelmente pouco usada no seu teclado, mas será praticada agora que
você começou a escrever códigos! Essas chaves iniciam um bloco de código
que será executado quando a condição for verdadeira. Você pode colocar
qualquer número de linhas JavaScript lá dentro, e todas serão executadas se a
condição for verdadeira. Caso contrário, ela será pulada completamente.
Marcando o final do bloco está uma chave de fechamento.

Vamos ver um exemplo real.

Portanto se x < 4, essas duas linhas serão registradas no console. Caso

contrário, não! As duas linhas entre as chaves são executadas apenas se a
condição for verdadeira.

Também podemos adicionar a palavra-chave else seguido de outro bloco.

Qualquer coisa neste segundo bloco será executada apenas se a condição for
falsa.

Portanto, se for verdadeira, executamos o bloco if , e se for falsa, executamos o

bloco else.

Nos aprofundaremos nisso com mais detalhes mais para frente, mas por
enquanto, basta saber que isso existe.
JAVASCRIPT: Arrays
Olá! Hoje vamos aprender mais sobre os arrays que comentamos em algumas
aulas passadas.

Um array pode conter qualquer número de itens, e cada item pode ser de
qualquer tipo de dado, incluindo outro array. É possível misturar diferentes tipos
de dados dentro de um único array. Vamos ver como isso funciona.

Você pode criar um array literal usando colchetes para demarcar o início e o
fim de um array, da mesma forma que você faz com as aspas nas strings.
Então [] é um array vazio, um array sem itens.

Para colocar coisas no array quando você o criar, basta colocar esses dados
entre colchetes, com uma vírgula separando-os.

Portanto, isso é um array de números. Que tal um array de strings?

Claro, por que não! Que tal um array que contém alguns números e strings?
Por que? Só para mostrar que podemos fazer isso! E como você deve estar
imaginando, podemos usar variáveis dentro dos colchetes, ou até mesmo
expressões.

Não preciso usar let novamente, pois já defini essa variável. Estou apenas
atribuindo um novo valor a ela.

Vamos tentar um array um pouco mais direto agora.

Certo. Agora tenho uma lista de frutas. O que posso fazer com isso? Bem,
posso obter um item do array. Cada item de um array tem um índice numérico,
que diz quantos itens há do começo do array até que esse item apareça. Então
isso significa que o primeiro item, na verdade, tem índice 0, e não 1, pois há
zero itens entre o começo do item e o primeiro item. Ele está bem no começo!

Portanto neste array, 'apple' tem índice 0, 'banana' tem índice 1, e 'pear' tem
índice 2. Lembre-se, ele sempre começa em zero, e o último índice sempre
será igual à quantidade de itens no array menos um. Aqui temos três itens,
portanto o índice final é 2. Sacou?

Aliás, você sempre pode descobrir quantos itens há em um array

usando Array.length.

Agora que você sabe sobre os índices, podemos obter um item do array ao
colocar o índice do array que queremos obter dentro do par de colchetes
depois do array.

Então o que é fruit[1]? É 'banana', certo? Não é 'apple'. 'apple' seria fruit[0],
certo? Então o que acontece se eu tentar obter um índice que não existe lá?

Você não obtém um erro. Você obtém um undefined.

Certo, então é assim que você obtém um item de um array. Como você
pode modificar um item de um array?? Bem, você pode fazer isso da mesma
forma. Basta colocá-lo em uma atribuição.
Verifique o array e você verá que 'pear' foi substituída por 'orange'. E se eu
fizer isso com um índice que ainda não existe?

Isso adiciona o item novo ao índice apropriado, deixando espaços vazios onde
necessário. Interessante! Então qual é o fruit.length agora?

É seis! Podemos ver que os espaços vazios são contados.

Certo, e se você quisesse adicionar alguma coisa no final de um array e não

soubesse quantos itens tem nele? Vamos começar de novo com um novo
array.
Eu quero adicionar um novo, mas não sei quantos já tenho. Bem, eu poderia
usar dinos.length como índice para o novo item. O comprimento neste ponto
é 2, e dinos[2] seria um novo item no final, certo?

Sim isso funciona. Mas há um método especial para adicionar um novo item ao
final de um array: Array.push().

Isso faz a mesma coisa. E também há um método para remover o último item
do array: Array.pop(). Ele também retorna o item que está sendo removido,
então você consegue armazená-lo em uma variável ou algo assim se você
quiser.
O removedItem é 'utahraptor', e se olharmos para o array novamente, podemos
ver que ele foi removido do final da lista.

Há muitos outros métodos de array que você aprenderá com o tempo, mas
esse já é um bom começo.

JAVASCRIPT: Estruturas de repetição

Primeiro, vou criar uma variável de loop para manter o registro da nossa
posição dentro do array. Por convenção, chamaremos esta variável de i,
de índice. E já que os arrays começam em zero, vamos inicializar nossa
variável de loop em 0.

Agora nosso loop. Nossa condição deve envolver essa variável de loop.
Que tal i < fruit.length?
Qual o último índice do array? É 2, certo? Isso é um a menos do que o
length do array, portanto desde que i seja menor que o length, vamos
continuar. Porém, quando ele chegar no final, terminamos. Muito bem.

Agora, vamos fazer alguma coisa de verdade dentro do loop. Que tal se
imprimirmos "The" e depois quisermos puxar o item atual do array. O array
é fruit, e para o item atual, vamos usar colchetes para puxar o item de um
determinado índice. E qual índice queremos? Não vamos colocar 0, 1,
ou 2 ali. Vamos usar i, para puxar o item atual, seja qual for este item.
Depois vou concatenar " was delicious."

Certo. Muito bem. Vamos testar.

Opa! Ele imprimiu "The apple was delicious." 511 vezes. Temos um loop
infinito aqui. Eu avisei sobre eles. E agora, como arrumar isso? No Chrome,
você pode clicar nesse menu aqui [os três pontos no canto superior direito],
ir em "Mais Ferramentas", "Gerenciador de Tarefas", e encontrar a aba com
o loop infinito, que seria um loop while, bem aqui, e depois clicar em
"Finalizar Processo". Ufa! Certo. Loop infinito salvo.
Qual é o problema aqui? Ele imprimiu "The apple was delicious." 7.772
vezes. Por que? Por que ele não avançou para a "banana"? Bem, nós
esquecemos do incrementador. As três partes de um loop que falamos
antes são a variável de loop, a condição, e o incrementador. Se você não
incrementar, ele nunca chegará na condição falsa, não é? Portanto o loop
nunca irá parar de rodar. Então precisamos dizer i++.

Vamos tentar de novo. Recarregando. E desta vez temos, "The apple was
delicious," "The banana was delicious," "The orange was delicious." Certo,
muito melhor.

Que tal se fizermos o loop de dois arrays ao mesmo tempo? Uau, isso é
muito chique! Vamos fazer o loop uma vez. Teremos um segundo array aqui,
de frases. O que você acha?

Ótimo. E agora que tal isso? Vamos dizer 'The ' + fruit[i] +, e depois, em vez
de digitar a frase aqui, vamos simplesmente usar phrases[i]. Que tal?
Então eu reutilizei o mesmo índice, i, com o segundo array, pois o segundo
array tem o mesmo número de itens que o primeiro. Então funciona certinho.
Vou atualizar e:

The apple was delicious. The banana was old and gross. The orange was
not yet ripe.

Entendendo o loop for

A sintaxe funciona da seguinte maneira: a palavra for seguida dos

parênteses e depois um bloco de código. Mas desta vez, colocamos mais do
que a condição nos parênteses. Podemos colocar três expressões
separadas por ponto e vírgulas.

A primeira expressão, a expressão inicial, será executada uma vez apenas,

antes de o bloco ser executado pela primeira vez.

Depois vem a condição, que será calculada toda vez antes de rodar o bloco.
Se ela for falsa, o bloco não é executado e a execução passa direto por ele.
Depois há a expressão final, que roda toda vez depois da execução do
bloco, mas antes de a condição ser verificada novamente. Na verdade,
todas às três expressões são opcionais, mas se você deixá-las de fora, eu
não entenderia porquê você decidiu usar o loop for.

Então temos uma expressão que roda antes de o loop ser rodado, uma
condição, e uma expressão que roda entre cada execução do bloco. Isso
parece uma oportunidade perfeita para tipos de loop que estamos fazendo.

Na expressão inicial, podemos inicializar um contador, pois isso é algo que

acontece apenas no começo. Depois temos uma condição que envolve esse
contador. Por fim temos um incrementador, pois isso deve acontecer depois
de cada execução do loop antes de verificarmos a condição novamente.
Perfeito! Às três partes da declaração de controle ajudam a não esquecer
nenhuma delas.

Você pode usar essas expressões para fazer algo diferente, mas novamente
precisa ter certeza que eventualmente sua condição se torna falsa, ou você
terá um loop infinito em mãos.

Vamos testar?

Aqui temos um array de estados. Agora vamos usar uma declaração for para
fazer o loop deles.

Na expressão inicial, vamos inicializar uma variável de loop, i, e definir seu

valor como 0. Nossa condição verificará se i é menor que o length do array,
porque queremos fazer alguma coisa com cada item do array exatamente
uma vez. Por fim, incrementaremos o i depois de cada execução.

Dentro do bloco, vou apenas imprimir alguma coisa no console.

Agora vamos fazer o tracing da execução.

Primeiro, a expressão inicial roda e o i é definido como 0. Esta é a única

vez que executaremos a expressão inicial: antes do loop rodar pela primeira
vez. Depois, verificamos a condição. O valor de i é menor que o length
dos estados? Sim, é, então agora a execução não passa para a expressão
no final da declaração de controle, mas sim para o bloco. Imprimimos "Now
entering Alabama" no console, e apenas depois disso executamos a
expressão final e incrementamos o i. O i agora é 1.

Neste ponto, já passamos por todo o loop uma vez. Agora, na segunda vez,
não executamos a expressão inicial novamente. Fazemos isso apenas na
primeira vez. Desta vez, vamos diretamente para a condição. Mais uma vez,
a condição é verdadeira, então nós executamos o bloco novamente, desta
vez imprimindo "Now entering Alaska." Depois do bloco, rodamos a
expressão final e incrementamos o i. O i agora é 2. Foram duas vezes no
loop.

Depois, verificamos a condição novamente. Ela ainda é verdadeira, então

executamos o bloco, imprimindo "Now entering Arizona." Isso nos traz a
declaração final, onde incrementamos o i novamente. O i agora é 3.

Verificamos a condição novamente, e agora o i não é menor

que states.length, certo? Portanto, a execução passa pelo bloco e saímos do
loop.

Salve e execute, e ele funciona como previmos.

Então esse é a declaração for. Talvez, na prática, você acabe usando-o

muito mais do que o while, por ele ser muito melhor para fazer loops em
arrays.

Objetos em Javascript

Introdução

Arrays são estruturas de dados simples, que podem receber diferentes valores
de diferentes formatos em cada um deu seus índices, uma ferramenta muito útil
para lidar com grupos de dados. Porém, por usar índices numéricas não
alteráveis, o controle desses dados podem se tornar dificultosos. Para isso
usamos Objetos, uma estrutura de dados um pouco mais complexa, mas muito
mais organizada.

O que é um Objeto?

Objetos são estruturas de dados com a habilidade de organizar informações

em chaves nomeadas, diferentemente de Arrays. Veremos o seu
funcionamento com exemplos.

Como exemplo, vamos imaginar que nos foi pedido para criar uma estrutura de
dados com informações de um livro em específico.

Usando um Array para armazenar o registro desse livro. Os dados pareceriam

complexos e de diferentes tipos, além de tornar necessário o controle das
índices numéricas da estrutura. Teriamos algo assim:

Por que Harry Potter aparece duas vezes? O que são esses números? O
exemplo acima vai totalmente contra todas as boas práticas de
desenvolvimento.

Usando um Objeto para armazenar esse mesmo registro, teriamos algo assim:

Conseguimos entender muito melhor o que cada chave(índice) representa e

qual o valor dela no momento em que a variável foi instanciada.

Dito isso, Arrays são estruturas de dados comumente usadas para armazenar
vários dados de mesmo tipo e para facilitar a iteração pelos seus itens. Por
outro lado, objetos são estruturas para modelagem de dados comumente
usadas para facilitar a organização de dados relacionados. Um Objeto NÃO é
iteravel.
Acessar, criar ou alterar um atributo de um Objeto.

Dentro de um objeto, seus atributos funcionam como uma variável que pode
ser acessada apenas por ele. Sendo assim, usando um "." temos acesso a
todos os atributos de um Objeto:

Para alterar os dados desse atributo, também precisamos acessar o objeto

usando o ".". Lembrando que assim como uma variável, esse valor pode
assumir qualquer tipo e valor:

Para criar um novo atributo, novamente acessamos o nosso objeto, mas dessa
vez, depois do "." colocaremos o nome do novo atributo:

Leitura adicional

Olá, pessoal. Sejam bem-vindos à Kenzie Academy.

Vamos ver outra maneira de exibir resultados a usuários. O alert() resolve o

problema, mas se torna irritante rapidamente. Por que não podemos
simplesmente usar JavaScript para escrever o conteúdo na página em si?
Bem, nós podemos!

A maneira mais simples de fazer isso é com document.write(). Assim como

no console.log() or alert(), basta colocar uma string dentro de parênteses.
Então ele escreve esse conteúdo no corpo do documento. Mas cuidado:
dependendo de onde você colocar sua tag <script>, ele apaga o conteúdo que
já está lá. Então document.write() nos permite adicionar conteúdo à página. E a
melhor parte? Você pode incluir HTML nessa string! Em vez de escrever
apenas…
...que tal envolver "latté" em um elemento e talvez a coisa toda dentro de um
parágrafo!?

Você pode fazer isso!

Então vamos ver isso em ação.

Mais uma vez, eu tenho meu detector de latté. Eu posso rapidamente mudar
isso para usar document.write().

Mas também posso tirar vantagem do fato de que document.write() aceita

HTML, então vou mudar minhas duas possíveis mensagens.
Legal. Vamos conferir. Neste momento, eu não tenho um latté, pois tem
chocolate nele. Podemos mudar isso…

...e tentar novamente. Legal.

E talvez eu queira que minha mensagem sempre apareça em um parágrafo.

Que tal uma boa e velha concatenação para realizar o trabalho?

Por que não?

Então esse é o document.write(). Consideravelmente menos irritante

que alert().

Até a próxima, meu nome é Davey Strus. Booooas codificações!

Os eventos são ações ou ocorrências que acontecem quando o usuário (ex:

clique em botão) ou o navegador (ex: página carregada) manipula uma página.
Os eventos são essenciais, pois com essas ações é possível responder da
forma adequada. Um exemplo prático: um usuário clica em um botão em uma
página web com o intuito de “ver mais”, o evento identificará está ação e irá
disparar uma função que mostra uma caixa de informações.

Tipos comuns de eventos:

 O usuário clicando com o mouse sobre um certo elemento ou passando

o cursor do mouse sobre um certo elemento;

 O usuário pressionando uma tecla do teclado;

 O usuário redimensionando ou fechando a janela do navegador;

 Uma pagina da web terminando de carregar;

 Um formulário sendo enviado;

 Um video sendo reproduzido, interrompido, ou terminando sua

reprodução;

 Um erro ocorrendo.

Aqui está uma lista de eventos (não completa) que são mais utilizados:

Event handler e listeners:

Cada evento possui um event handler (manipulador de eventos/ouvinte de

eventos), que consiste em um bloco de códigos que será executado quando o
evento for disparado. Em alguns casos, os manipuladores de eventos são
chamados de event listeners (ouvinte de eventos), eles são intercambiáveis,
porém, eles trabalham juntos. Os ouvintes escutam o evento acontecendo e o
manipulador é o código que roda em resposta a esse acontecimento.
Antes de abordar o addEventListener é necessário abordar o conceito de
callback. Callback é basicamente uma função executada após outra. Para que
essa função seja executada, geralmente a informamos como parâmetro de
uma função inicial. Resumidamente, você irá chamar uma função, que irá
acionar a callback, no qual seu resultado, será o parâmetro da função inicial;

AddEventListener

De forma geral, o addEventListener, serve para adicionar um evento a uma

lista de eventos dentro de um elemento. Sua estrutura tem como rotina chamar
uma a callback ao elemento associado, que será ativada após um
evento(event) ocorrer.

Obs: ele possui um terceiro parâmetro opcional (options).

 Explicando o código:

1. Seleciona o primeiro elemento do documento que corresponde ao

seletor;

2. É atrelado a img ao evento do tipo click;

3. Quando a img for clicada, acionará a callback – que nesse caso

apresentará no console a string “clicou”.

Exemplos de aplicação de eventos:

O código já conhecido da calculadora de IMC, abordado na live, foi utilizado

dois tipos de eventos, o input e o click.

 Evento Input
 Explicando o código:

1. Seleciona o elemento do id correspondente;

2. Elemento é associado ao evento input;

3. Quando input receber uma ação, irá chamar a callback que atualizar o
valor de range

 Evento Click

 Explicando o código:

1. Seleciona o elemento do id correspondente;

2. Elemento é associado ao evento click;

3. Quando clicado, botão chama a callback que retorna o valor do IMC.

Funções

Olá! Hoje iremos aprender o que são funções no JavaScript e como

conseguimos utilizar para nos ajudar.

O que é uma função?

Em programação de computadores, uma função (às vezes conhecida como

procedimento ou sub-rotina) é uma sequência de instruções que realizam uma
tarefa específica, empacotada como uma unidade. Essa unidade pode então
ser usada em programas sempre que esta tarefa específica precisar ser
realizada. Hoje você aprenderá a usar funções para organizar seus programas
em blocos de código.

Declarando uma função

No JavaScript, temos diversas maneiras de declarar nossas funções. Hoje

estaremos vendo a forma mais simples e intuitiva de ser declarada. Por
exemplo, uma função que faz uma soma:

Note que a "anatomia" de uma função funciona da seguinte maneira: temos a

palavra function antes do nome, abrimos os parênteses e temos dois
parâmetros. Esses dois parâmetros, são variáveis que são utilizadas na
instrução da função, a qual é somar esses dois números e por fim, chamamos
a função logo abaixo, passando dois números para a mesma realizar a soma.
Não necessariamente uma função precisa ter parâmetros. Veja outro exemplo:
Também podemos passar diversas instruções para as funções.