Nota: estou fazendo o Curso de JavaScript do Gustavo Guanabara, Eu resolvi transcrever o Curso para Revisa e melhorar nos estudos de javaScript.
Caso queira fazer o Curso pelo Curso em Video e ganhar o Certificado, recomendo muito.
na primeira aula apredemos que os scripts JS devem ser incluídos no final do corpo do documento __HTML__,
posicionando a tag `<script></script>` logo acima da tag de fechamento ``
Nosso Primiero comando é.
window.alert('Olá, Mundo!')
A palavra window (opctional) é um objeto que indica uma referência á janela atual do navegaor. A palavra alert() é um método capaz de de disparar uma mine-janela de alerta para avisar algo ao usuário.
Dentro dos parêntes do método alert(), temos uma string entre aspas (que podem ser ´aspas simples´, "aspas dupla" ou crases para delimitar as palavras que efetivamente aparecerão na janela de alerta.
conversão de String para number e para isso exites várias maneiras.
Aprimeira delas é utilizar o
Number.parseint()
ou simplimente parseint()
Nisso ele vai fazer uma conversão de um número para um Número inteiro.
Se Você quise um Número real, Um Número com Vírgula nós utilizamos o Number.parseFloat() converte a string recebida como argumento e a retorna como um número de ponto flutuante. Este método se comporta de maneira idêntica a da função global parseFloat e é parte da especificação ECMAScript 6 (seu propósito é a modularização dos objetos globais).
ele se chama Float porque aquele pontinho, por exemplo, (5.5) esse ponto a gente chama de ponto flutuante ou floating point Float
Number() ele utilizar tanto o parseFloat() quanto o parseint() è claro que essa síntese, só não elimina as de cima, porque ás vezes só precisa efetivamente trata como real. Então, vou utilizar o parseint() e quando for somente utilizar o Número real usamos o parseFloat() JavaScript decide de acordo com o valor que ele recebeu, se é inteiro ou se é real
Convensão de Número para String
existe duas maneiras
Eu posso utilizar o String() Assim como eu utilizei "Number", número, eu posso utilizar o String ou o valor que eu quiser.
(Exemplo)
alert('a soma dos Números é, ' + String(soma))
Todo objeto possui um método .toString() que é chamado automaticamente quando o objeto precisa ser representado como um valor em texto ou quando o objeto é referenciado de uma maneira que requeira uma string. Por padrão, o método toString() é herdado de todo objeto descendente de Object. Se e o método não é sobrescrito em um objeto personalizado, toString() retorna "[object type]", onde type é o tipo do objeto. O código a seguir ilustra isso:
var o = new Object();
o.toString(); // retorna [object Object]
(Template strings)
Dentro de uma Template strings podemos usar placeholders no seu interior. um placeholder é representado pelos símbolos ${} e podem ser usados para facilitar a exibição de conteúdos de variáveis ou expressões.
(com Template strings)
alert(`A soma enter é, ${}`)
(sem)
alert('a soma dos Números é, ' +(soma))
(Formatando Números)
toFixed()
exemplo sem toFixed()
var n1 = 1545.5
n1
1545.5
exemplo com toFixed() nesse segundo exemplo vemos que foi adicionado a segunda casa decimal ao (50)
var n1 = 1545.5,
n1.toFixed(2)
'1545.50'
como troca
caracteres determinado como exemplo o ponto por virgula com replace()
n1.toFixed(2).replace('.', ',')
'1545,50'
O método replace() retorna uma nova string com ou como correspondência de um ou todas as alterações padrão por um caractere determinado (). O padrão pode ser uma string ou uma RegExp, a substituição pode ser uma string ou uma função a ser chamada para cada correspondência. Se o padrão for, apenas a primeira vez será alterado.
A string original não é modificada.
O método toLocaleString() retorna uma string com uma representação sensível a linguagem deste número.
(exemplos)
n1.toLocaleString()
'1.545,5'
n1.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
'R$ 1.545,50'
pt-BR segnificar eu quero localizar para o Brasil,
o Style currency Segnificar dinheiro/Moeda e o
segundo currency Segnificar se vai ser REAl do Brasil
(como converter em Dolares)
n1.toLocaleString('pt-BR', {style: 'currency', currency: 'USD'})
'US$ 1.545,50'
No node ele não faz a inversão da vígula e o ponto mas no Navegador ele faz corretamente
Opedadores logicos
Aritméticos
Esses são todos os operadores aritméticos da linguagem JavaScript
(+)
(-)
(*)
(/)
(%)
(**)
para exemplificar, esses são os operandos que são aquele que vão fazer os operadores funcionarem. todos esses oparadores aqui são operadores que a gente chama de binários, são operadores que precisam de 2 operandos.
5 ( + ) 2
5 ( - ) 2
5 ( * ) 2
5 ( / ) 2
5 ( % ) 2
5 ( ** ) 2
Resultado
5 (+) 2 = 7
5 (-) 2 = 3
5 (*) 2 = 10
5 (/) 2 = 2.5
5 (%) 2 = 1
5 (**) 2 = 25
A multiplicação é feita por um asterisco, e não pelo sinal de (x) ou pelo sinal de ponto como a matemática coloca.
Sempre que você quiser multiplicar um valor pelo outro, usa o (*)
A divisão, é o proximo é bem fácil também identificar, é a (/)
Então o 5/2 para o JavaScript, é divisão real isso é aquela divisão que leva números reais, que leva a vírgula
existe também a divisão inteira. inclusive o próximo operador precisa que você saiba fazer divisão inteira. divisão inteira é aquela em que você não usa vírgula quando você for precisar colocar vírgula, você para de dividir.
basicamente é assim, 5 % 2, que é o próximo operador, ele não é usado para calcular porcentagem, ele é o operador de resto da divisão inteira.
E o último operador, ele surgiu no javaScript nas últimas versões, Ele é a potência. Esse 5 (**) 2 significa 5 ao quadrado, e 5 ao quadrado é 25
(Precedência de Operadores)
Resumo
cuidado,
A precedência de operadores determina a ordem em que os operadores são processados. Operadores com maior precedência são processados primeiro.
exemplo simple
5 + 3 / 2
ser por acaso sua Resposta for 4, eu sinto te informar você errou a conta.
explicação, quando uma mesma expressão tem soma e divisão, primeira a gente faz a divisão.
então na verdade
5 + 3 / 2 não dá 4, ele vai dar 6.5
em vez de fazer
5 + 3 = 8
8 / 2 = 4
ele na verdade faz primeiro o
3 / 2 = 1.5,
5 + 1.5 = 6.5
que é o resultado
se você quise fazer
5 + 3 / 2,
e eu quero fazer 5 + 3 primeiro e depois dividir por dois, Nesse caso é só você colocar parêntenses extamente como a matemática faz
(5 + 3) / 2
Se você utilizar os parênteses Você muda a ordem de procedência, isso é, você vai fazer primeiro
(5 + 3) = 8
8/2 = 4
(Precedência)
( )
(**)
(*) ( / ) ( % )
(+) (-)
em qualquel linguagem de programação, tudo, em primeiro lugar, é analisado todos os parêntes, depois dos parênteses vai fazer as potências, em seguida das potências, nòs termos a multiplicaçâo a divisâo e o resto da divisão
Você perceber que os três aqui estâo na mesma linha? É por que eles tem a mesma ordem de precedência, não necessariamente a multiplicação vem antes, qualquer um desses três vem antes e se por acaso mais de um deles tiver a mesma expressâo, você vai fazer da esquerda para direita quem aparecer primeiro.
E por fim a gente vai fazer as somas e as subtraçôes
(Atribuição simples)
var a = 5 + 3
R=8
var b = a % 5
(8/5 = 1,6) (5*1 = 5 prá 8 resta 3) R=3
var c = 5 * b ** 2
(3 * 3 = 9) (5 * 9 = 45) R=45
var d = 10 - a / 2
(8/2 = 4) (10-4 =6) R=6
var e = 6 * 2 / d
(6 * 2 = 12) (12/6 = 2 ) R=2
var f = b % e + 4 /e
(3 * 2 = 1,5 ) (4/2 = 3) (1 + 2 = 3) R=3
(Auto-atribuiçôes)
São atribuicôes á própria variável, por exemplo, Criei uma atruibuição simples,
var n = 3
se na próxima linha eu fiz
n = n + 4
agora vou somar o que está depois do recebe, vou soma
n + 4
e o resultado vou jogar dentro de n.
agora n + 4 passar a vale 7
Lembre-se, A variavel e como se fosse a vaga de um carro, para colocar um segundo carro eu tenho que tirar o primeiro, foi exatamente isso que aconteceu.
eu tinha 3, deixou de valer 3 e passou a valer 7. isso é a auto-atribuiçâo
eu posso fazer coisas do tipo
n = n - 5 que está valendo 7 agora, -5 dá 2
então o n deixar de valer 7 e passa a valer 2.
E eu posso fazer qualquer tipo de atribuição
n = n * 4
eu estou multiplicando esse 2 por 4, então vai virar 8. Deixa de valer 2 e passa a valer 8.
Outra coisa que posso fazer n = n / 2 Eu vou dividir o 8 por 2 vai dar 4, ele vai deixar de valer 8 e passar a valer 4 na variável n.
n = n ** 2
Também posso fazer uma exponenciação, posso pegar esse n elevar ao quadradro e está valendo 4, 4 ao quadradro dá 16. Ele deixar de valer 4 e passar a valer 16.
n = n % 5
por fim, posso fazer o resto da divisão. Se eu pego esse 16 e divido por 5 vai dar 3 vezes 5 dá 15, para 16 resta 1.
Tudo isso que aconteceu aqui fez a Variável n partir de 3, assumir vários valores, e terminar com 1 isso são Auto-atribuiçôes E eu posso simplificar
(Simplifiçôes)
Simplifiçôes todas essas auto-atribuições
var n = 3
essa
primeira não é auto-atribuição, é atribuição simplies.
Se eu pego uma variável, por exemplo
n = n + 4
Eu posso reescrever isso de uma maneira encurtada
que é o
n += 4. Esse += ´so serve, preste antenção, se a mesma váriável receber ela + 4
Exemplo n = n
se for n = x + 4, não funcionar
mas se n = n recerber ele mesmo + 4 eu posso usar o += Sem problema.
(Formas resulmindas)
n = n + 4 / n+=4
n = n - 5 / n-=5
n = n * 4 / n*=4
n = n / 2 / n/=2
exponenciação
n = n ** 4 / n**=5
n = n % 5 / n%=5
Resto da divisão
(Operadores de incremento)
var x = 5
Então, o 5 vai para a variável x. Eu posso fazer operaçôes simples, como por exemplo
x = x + 1
1 é sinal de que o x vai deixar de valer 5 e vai passar a valer 6
x = x - 1
ele vai tira uma unidade. Então, se ele está valendo 6 nesse exato momento ele vai passar a valer 5
(Simplificação)
x = x + 1 / x +=1
x = x - 1 / x -=1
Essa parte você entedeu, só que nas linguagens de programação quando a gente vai avançando, você vai ver que a gente vai fazer muti x = x + 1 A variável recebe a variável + 1
então, exite um simplicador ainda maior que é o operador de incremento e eu posso simplificar x +=1, que já estava simplificado, para x++, o mesmo acontece com o -=1 e eu posso simplificar para x--
(Simplificação ainda maior)
x = x + 1 / x++
x = x - 1 / x--
no javaScript exite Operadores
aritméticos
atribuição
Relacionais
lógicos
ternário
na aula 7 (parte 1) a gente abrangeu os dois operadores, o aritmético e o de atribuição
E nessa aula vamos aprender
Relacionais
lógicos
ternário
Relacionais
Os operadores relacionais do JavaScript são da grande maioria da linguagem de programação. são os operadores de maior, menor, maior ou igual, menor ou igual
(>) maior
(<) menor
(>=) maior ou igual
(<=) menor ou igual
(==) igual
(!=) diferente
vou colocar valores qualquer, vou usar só valores inteiros, mas tambèm serve em valores reais, que são aquele valores que tenha vírgula
5 (>) 2
7 (<) 4
8 (>=) 8
9 (<=) 7
5 (==) 5
4 (!=) 4
de todas essas expressões que a gente acabou de gerar. È importante dizer o seguinte: para toda a expressão que tenha um operador relacional ligado á ela, o resultado dessa expressão vai ser sempre um valor booleano, vai ser um valor do tipo vardedeiro ou falso.
vamos analisa o primeiro, 5 > 2
o valor 5 é maior do que o valor 2? Sim. Então, se o valor 5 é maior do que valor 2, o Resultado dessa expressão é true, que é o valor verdadeiro
5 > 2 (true)
No segundo 7 < 4
O 7 é menor do que 4? não. o 7 não é menor do que 4. Então, o resultado é false,
No proximo
8 >= 8
8 é maior ou igual a 8? Note que eu falo Maior ou igual. Eu não falo maior e igual
Uma coisa não pode ser maior e igual á outra. Ou é maior ou igual. 8 não é maior do que 8, mas ele é igual. Então, isso é verdadeiro
No proximo
9 <= 7 O 9 é menor ou igual a 7? nâo. O 9 è maior. Ele nem é menor, e nem é igual. Então é false.
aqui embaixo tem o sinal de igual e percebe o seguinte:
a igualdade no JavaScript não é 1 sinal de igual. nos já vimos várias vezes durante a aulas que um símbolo de igual no JavaScript é a mesma coisa que muitas outras lingugens de programação, a gente lê como recebe. Ele é um operador de atribuição. Ele não é um operador de igualdade. o operador de igualdade do JavaScript é esse aqui. 5 == 5 sendo assim 5 è igual a 5? sim. Então é true
E por último, 4 != 4,
4 Esse != quer dizer "não igual". E uma coisa que não é igual, è diferente Então, 4 é difente de 4 ? não. 4 é igual a qutro. Então é false
Resultados:
5 > 2 -> true
7 < 4 -> false
8 >= 8 -> true
9 <= 7 -> false
5 == 5 -> true
4 != 4 -> false
posso reunir algumas expressôes.
var a = 8, var b = 15
a <= b - 10 R= false
a, que é 8, è menor ou igual a b-10? você percebe que quando eu tenho operadores relacionais e operadores aritméticos na mesma linha, ou mesma expressâo, primeiro eu faço os aritmèticos e depois eu vou fazer os relacionais. Entâo, b-10 vai dar 5. E, 8 è menor ou igual a 5? nâo, * não é menor ou igual, è menor
(exemplos mais claros)
A primeira que está aqui embaixo è, o preço è maior ou igual a 200,50?
preço >=200.50
O que estou testando è:
o preço è maior ou igual a 200 reais e 50 centeavos, por exemplo ?
idade < 18
a idade é menor que 18 ? o que ele está perguntado è:
A pessoa é menor de 18 anos? 18 anos não entra nessa comparação. tem que ser 17 para trás.
curso== 'JavaScript'
O curso é igual a JavaScript?
Entâo, eu posso testar tambèm variáveis string. A string curso è igual a string JavaScript?
n1 != n2
O Primeiro número è diferente do segundo?
(identidade)
operadores relacionais que a gente chama de operadores de identidade.
por exemplo
5 == 5
5 é igual a 5? sim. Então é true
agora, se eu tiver 5 =='5'? è a mesma frase, foi exatamente igual
Esse 5 é igual ao outro '5'?
para o JavaScript, 5 é, sim igual a '5'. isso porque o sinal de igualdade não testa o tipo. Eu tenho valor 5 inteiro lá no início, E eu tenho valor '5' em string
O que o javaScript faz é analisar se esse cinco tem o mesmo valor que o valor que o outro, e são valores de tipo difenrentes. Mas, eles têm a mesma Grandeza.
para isso exite um outro operador, que é o operador de identidade, tambem conhecido como operador de igualdade restrita, que no lugar de dois sinais de igual, são três sinais de igual.
5 === '5'. Nesse caso, eu estou testando se os dois cinco são idênticos, e idêntico é ser do mesmo valor e do mesmo tipo.
Nesse caso eles têm o mesmo valor. Mas eles nâo têm o mesmo tipo. Entâo ele è false
e uma dúvidade pode surgir:
5 === 5 R= true
Eles são indênticos.
Resultados:
5 == 5 R= true
5 =='5' R= true
5 === '5' R= false
5 === 5 R= true
(operadores lógicos) Que no javaScript são três: a exclamação, os dois "&" comerciais e os dois pipes, que são dois traços em pé.
! Negaçâo
&& conjunçâo
|| disjunção
! sempre que aparecer ! quer dizer negação, quer dizer não
&& comerciais, isso é uma conjunção. ou a gente chama de "e" é nosso e logico.
|| E o ùltimo, que são dois pipes, são disjunção ou entâo é o nosso ou logico
vamos começa pelo operador de negação ! , o "não", Ele é tratado como operador unário, isto é, ele só tem um operando. Ou seja, depois da exclamaçâo ou eu coloco "true" ou "false.
segundo operador de conjunção são os dois && comerciais. Esse operadores, assim como o de disjunção também, ele é um operador binário. isto é eu tenho dois valores lógicos, um de cada lado
E por fim, a disjunção que são os dois pipes || também um operador binário que tem dois valores lógicos, um de cada lado. Dependendo da posição deles e do resultado lógico, eu tenho tambèm o valor lógico de resultado. E na disjunção basta que um deles seja verdadeiro para o resultado ser verdadeiro.
exemplo
var a = 5
var b = 8
a > b && b % 2 == 0
vamos entender o seguinte, quando eu tenho operadores aritméticos, relacionais e lógicos na mesma expressão, olha a ordem que é feita. primeira vou fazer todos os operadores aritméticos depois vou fazer os operadores relacionais e depois os operadores lógicos.
E por acaso numa mesma expressão eu tiver um "e", um "ou" e um "não", a ordem de execução é sempre essa,
primeiro o "não" !,
depois o "e" &&,
e por ultimo "ou" ||.
Operadores (Ternário)
?
:
operadores ternário é composto por dois símbolos que aparecem na mesma expressão, a interrogação ? e os dois pontos :. ele se chama ternário porque tem três partes. Dá uma olhada nos blocos que aparecem aqui embaixo.
teste ? true : false
esses três blocos são os blocos de teste, o bloco verdaeiro e o bloco false. È por isso, que esse operador se chama ternário, porque juna três operandos.
Dom é um acrônimo para Document Object Model que é modelo de objetos para documentos, basicamente é um conjunto de objetos dentro do seu navegador que vai dar acesso aos componentes internos do seu website. O Dom ele não funciona dentro do node js por exemplo, O Dom está presente quando estou rodando JavaScript dentro do meu navegador.
é uma coisa importante que você deve conhecer e deve saber fazer é a sua ávore Dom do seu site, basicamente a ávore Dom começa da raiz e essa raiz dentro do navedaor é chamada de windows, então tudo dentro do javaScript está dentro de um objeto chamado window que quer dizer janela então aquela janela do seu navegador é um objeto Dom e ele se chama window,
dentro do window eu tenho vários outros objetos como
window
location
document
history
exemplos: eu tenho o location que diza localização do seu site, qual é a url, qual é a página atua, foi a página anterior
temos o document que é o documento atual
e o history que vai guardando de onde você veio para onde você vai, isso facilita a navegação dentro do seu site, exitem muitos outros objetos
dentro do document no nosso caso exite outros objeto muito importante é o bjeto HTML, que é exatamente a parte HTML do meu site, dentro de HTML eu tenho basicamnte dois objetos ou filhos que a gente chama, o child que é o head e o body que é a cabaçalho e a parte de corpo.
(Selecionar elementos no Dom)
dentro da ávore Dom exitem vários métos para isso, alguns exemplo deles
por Marca
em primeiro lugar vamos como selecionar por Marca ou tag name
getElementsByTagName()
por ID
getElementById()
por Nome
se eu tenho uma propriedade name então vou utilizar o getElementsByName, pecebe aqui que ele tem o s no plura, então eu preciso usar o colchete [ ], quando eu tenho mais de um objeto da mesma classe ou Nome eu vou usar muito por marca e tabem por
getElementsByName
por Classe
getElementsByClassName
por Seletor
querySelector()
evento é tudos aquilo que possa acontecer com qualquer elemento, mas no nosso exemplo essa div e se você começar a analisar, o que pode acontecer com essa div um monte de coisas, o mais comum: eventos de mouse, então eu posso por exemplo chegar com curso do mouse e mover o mouse até encostar, até chegar dentro da div, quando chega o mouse dentro da div vai disparar um evento o mouseenter que o mouse entrou na div,
outra coisa que eu posso fazer é continuar movendo o mouse por dentro da div. Nesse momento ver ser disparado várias vezes o método mousemove, que enquanto tiver movendo dentro da div ele vai disparar o evento mousemove.
se eu pegar o mouse e clicar e segurar, eu tenho o disparo do mousedown, no momento em que eu soltar o botão do mouse eu disparo outro evento o mouseup,
eu também tem o movimento do click inteiro, apertar e solta rapidamente eu tenho o evento click e da mesma maneira que com o mouseenter, quando eu mover o mouse para fora dessa div ele vai disparar evento mouseout. Então olha só a gente viu seis métodos, seis eventos que podem ser disparados só com o movimento do mouse, existem outros esses não são os únicos e se por acaso você dá uma pesquisa nos eventos que podem acontecer dentro de elementos em javascript
Só como curiosidade, agora com o eventos dos celulares, você tem os "Touch events" que sâo diferentes dos Mouse events
porem para disparar um evento, para tratar um evento, eu preciso te explicar antes o que é uma função ou uma funcionalidade.
- Função
Uma função é um procedimento de JavaScript - um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.
Então por exemplo: eu vou programa dez linhas, essas dez linhas a gente chama de bloco, então imagina que esse bloco tivesse 10 linhas, essas 10 linhas não vão ser executados auomaticamente, o primeiro passa é colocar lá dentro de um bloco, um bloco em JavaScript ele é delimitado entre os sinais de chavas { }, esse bloco você tem que nomear ele como uma function que quer dizer função antes do bloco assim
function {
bloco de códico aqui
}
no JavaScript exite isso aqui: função anônima, é uma função que simplesmente não tem nome, só que para o método possa funcionar, eu tenho que dar um nome para essa função e geralmente os nomes das funções são ações que nós podemos fazer,
function ação() {
bloco de códico aqui
}
geralmente funçôes de evento, eles são nomes de açâo, você vai colocar o nome da ação que vai acontecer e fecha parênteses.
e opcionalmente voê pode também colocar dentro desses parênteses alguns parâmetros, pode ser um, ou pode ser vários parâmetros
function ação(parâmetros) {
bloco de códico aqui
}
Antes de falar das nossas condiçôes, precisamos fala de sequências, porque todos os código feito até o momento foram código sequenciais. Entâo, veja o exemplo, o meu primeiro comando que aparecer aqui
var n = 3
com esse comando, acabamos de declarar uma variável e colocar um valor dentro dela
No próximo comando, eu faço, por exemplo
n += 2
essa segunda linha vai pegar o valor de n, que é 3, e vai somar mais 2 e jogar o resultado, que é 5, dentro do próprio n é por fim, o último comando
window.alert(n)
Esse último comando vai mostrar uma janela de alerta no navegador
Sendo assim, eu te pergunto: o primeiro comando, o segundo comando e o terceiro nesse caso aqui, tem como executar o primeiro, depois o terceiro e por fim o segundo? Não.
Eu tenho que executar o primeiro, segundo e o terceiro, não posso mudar a ordem. Outra coisa, eu posso por exemplo, executar o priemiro, terceiro e não executar o do meio em alguma situação? também não porque é só olhar o fluxo. O fluxo que está representado aqui tem que ser, já que ele é uma sequência, têm que se executar
var n = 3
n+= 2
window.alert(n)
Codiçôes
Veja começa na primeira bolinha e termina na última bolinha.
Então, basicamente eu tenho dois comandos e eu tenho um comando aqui embaxio. No meio está vazio porque, dependendo de alguma coisa, eu quero executar um determinado comando. E se não der certo eu executo outro comando. por exemplo, como eu represento isso aqui do lado?
seria por exemplo, um losango. vou representar como losango. Ele vai fazer um filtro
tipo uma placa de tânsito. Sabe aquele placa que você está andando de carro, mas chega uma hora que você só pode virar á esquerda ou virar á direita, extamanete. imagina essa placa,
O meu programa está sendo executado de cima para baixo, esatamente como está aqui
Chegou aqui embaixo, eu vou ter duas possibilidades. Existe uma bifucarçâo, exatamente como está sendo representado aqui na imagem embaixo, Essa bifucarçâo, vai me levar para dois caminhos possíveis
para um lado, se acontecer alguma coisa.
E pro outro lado, se essa coisa não acontecer. Meu programa, agora não será executado de cima para baixo, do início ao fim. Exite uma bifurcação no meio do caminho. Depois que eu executo um dos lados dessa bifurcação
ele vão se encontra de novo e então fluxo do meu programa vai terminar vai seguir normalmente até o fim dele, até esse último ponto. Então, basicamente eu não sigo mais uma linha vertical. eu tenho desvios, E a gente chama esse primeiro desvio de condicional.
Esse desvio condicional é muito importante. Ele faz parte dos fundamentos da programaçâo. Toda a linguagem de programação que a genete conhece dita imperativa
aquelas lingugens mais populares, elas têm vários tipos de condições e o JavaScript é uma linguagem popular. Então, ela tembèm tem esse tipo de estrutura.
vamos isolar apenas a condição, vamos começar pelo losango (essa marcação em amarelo).
Pro losango em JavaScript, a gente vai ultizar a estrutura if, Então vou colocar if e vou botar uma condição qualquel. E nessa condição, eu tenho duas possibilidade: a possibilidade da esquerda e a
a possibilidade da direita
Vamos começa com a possibilidade da esquerda, Essa parte será representada como? Eu vou criar um bloco. você sabe que um bloco é um par de chaves, abertura e fechamento de chaves { }, e aqui dentro vou colocar o bloco. Logo falaremos agora sobre esse bloco,
Agora vamos passar para a outra parte, O lado direito, Nesse caso, esse que está marcado aqui embaixo. para eu fazer o lado direito, eu tenho que utilizar uma palavra tambèm, que é a palavra else que quer dizer senão.
if quer dizer "se".
Else é o oposto de "se"
Então, eu tenho um bloco para fazer, Eu vou fazer também um bloco, isto é, eu abro e fecho chaves. Entâo, essa é a estrutrura. Ela tem dois blocos.
Um bloco é pra quando o if der positivo, isto é, são os comandos com os executados caso essa condição aqui seja verdadeira.
e esse bloco não precisa ter apenas um comando não, pode ter varios comandos, sem problema nenhum. Esse bloco de verdadeiro é como se fosse esse bloco aqui de cima. Está vendo? Do lado esquerdo
Já o bloco aqui de baixo, o último vai ser executado caso essa condição que está aqui em cima ja falsa. E mais uma vez, esse bloco que está escrito false aqui embaixo, podem ser vários comandos. não precisa ser apenas um só e ele está localizado no bloco da direita.
Essa é uma maneira mais completa de representar as condições. O conceito é esse Condições é uma estrutura de controle muito imprtante para programação.
exemplo de forma visual em 8:16
Existe dois tipos de condição e eu vou te explicar a diferença entre eles. Na verdade, exitem mais tipos. Nessa aula, a gente vai ver dois tipos de condição, Aqui embaixo a gente vai ter uma condição bem Simple, que ela só tem um tipo de bloco.
Então eu tenho apenas o bloco do verdadeiro. o bloco do falso não existe.Eu já vou dar um Exemplo típico do uso desse tipo de estrutura, E essa estrutura, por ser simples, é considerada, é chamada tecnicamente de condição simples.
já a da direita tem o if e o else e os dois blocos relacionados.
se na primeira condição simples. a condição for falsa, nada vai acontecer em especial. o fluxo do programa continua funcionado sem problemas.
caso a da segunda seja verdadeira que tem o if e o else vai acontecer uma coisa e caso seja falsa tem outra coisa para fazer.
Condições Aninhadas
vou colocar uma condição composta, como a gente viu na aula anterior, ela só nos dá duas opções: sim ou não.
Só que exite uma possibilidade de criar o que eu escrevi aqui em baixo: condições Aninhadas O que seria isso? Bem simples, eu vou pegar uma condição composta e vou colocar outras condições dentro dela.
por exemplo na minha condição que acabei de representar, dê uma analisada aqui. Lembrando o que a gente viu no vídeo anterior, Nessa condição, se for verdade faz aquele bloco que está sendo representado ali do lado, senão, eu faço outro bloco.
Eu coloco outra condição e isso amplia muito as minhas possibilidades. Essa minha condição vai ter duas possibilidades. Eu posso executar um bloco e fazer outra condição dentro, e ir Aninhado, vem de ninho, um dentro do outro. Nesse meu caso aqui, eu não vou ficar colocando um dentro do outro não, vou colocar só dois níveis. Mas lembrando que pode fazer vários níveis. Aqui, se for verdade eu faço uma e se for mentira eu faço outra. Então agora eu tenho três possibilidades, é só você olhar a quantidade de blocos que têm aqui em cima.
Sendo assim, quando eu tenho uma condição Aninhada, eu tenho exatamente isso que está aqui em cima, uma condição dentro da outra. Na verdade o que você está vendo ali, está puxando a condição de cima, está puxando para os dois lados. Eu poderia puxar para os lados e criar duas condições, uma dentro de cada. Não exite uma regra de Aninhamento.
Mas é muito mais comum você fazer desse jeito aqui. tão comum que o JavaScript tem uma estrutura, um comando bem especial que é o else if. A gente vai ver como ele funcionar, Mas a gente vai se deter aqui, a representar essa estrutura que está aqui em cima. Onde a gente tem um if dentro do outro.
vamos fazer a sua relação ecrita em JavaScript. Então eu tenho aqui, a minha condição principal, a minha condição 1, eu tenho um if aqui, vou fazer a linha de indentação.
Lembrando que não é identação, é indetação que vem de indente que é recuo em ingles. Então eu escrevo uma coisa dentro da outra, escrevo uma coisa aninhada á outra, exatamente como está aparecendo aqui em cima.
Se por acaso a condição 1 for verdadeira, ele faz um bloco 1.
Agora se não, que é a parte de baixo, ele não vai fazer o bloco 2, que seria uma condição composta. Ele vai fazer outra condição.
E vai fazer um outro if. Então vou colocar lá, se a condição 2 for satifeita, eu faço o bloco 2.
È importante que você perceba o seguinte: para execurta o bloco 2, a condição 1 tem que ser falsa porque se ela for verdadeira já executa o bloco 1
È uma questão de raciocínio lógico. Se a condição 1 for falsa e a condção 2 for verdadeira ele faz o bloco 2.
Agora se a condição 1 for falsa e a condição 2 for falsa, ele faz o bloco 3. E nada me impede de no lugar do bloco 3 colocar outra condição. Eu estaria aumentando um nível no meu Aninhamento.
a gente não vai adicionar muitos níveis. Mas sim, eles são possíveis dentro da programação.
Então claramente aqui em cima, eu tenho uma condição dentro da outra. Eu acabei de tracejar em volta da condição exatamente como tinha feito lá na gráfico anterior. E como eu já disse várias vezes a essa estrutura a gente dá o nome de Condição Aninhada.
Condição múltipla que serve para valores fixos. È muito útil no mundo da programação principalmente quando eu quero trabalhar com valores fixos, como acabei de falar. Ela não serve muito para intervalo de valores como tinhamos visto,
Essa condição múltipla, ela tem a possibilidade não só do sim e não, ela tem a possibilidade de outros valores, de valores fixos. Então por exemplo
se for um determinado valor faz um bloco, se for outro valor faz outro. Então eu consigo representar esse tipo de estrutura aqui, dessa maneira. Então eu tenho uma condição, na verdade uma expressão. E dessa expressão eu testo vários valores e depois eu volto para o fluxo normal do meu programa.
Esse tipo de estrutura condicional aqui é minha condição múltipla. Ela não é aplicável para todos tipo de situação. O if com else if que a gente acabou de ver é aplicar para todo tipo de situação, mas essa aqui é muito útil em situações pontuais, específicas.
Para representar essa estrutura que está aqui, A gente representa da seguinte maneira tem um comando dentro do JavaScript que é o comando switch.
Então vou colocar switch, nota que não é uma condição, é uma expressão e esse switch tem um bloco relacionado. Lembrando, a gente viu nas aulas anteriores, um bloco é todo { } de chaves dentro da linguagem JavaScript. cada linguagem tem suas regras.
Então vou colocar switch que está aqui em baixo e vou colocar os valores dentro dela.
Então eu tenho várias possibilidades de valor. Para cada 1 eu vou colocar um case. isto é, se essa expressão for o valor 1 faz aquele primeiro,
se for valor 2 faz o segundo,
se for o valor 3 faz o outro. tem uma cláusula aqui embaixo que é o default que é como se fosse o else do switch. Se nenhum dos valores aqui de cima forem satisfeito, ele vai fazer o daqui de baixo.
E para cada um dos cases eu tenho um bloco. Então basicamente a estrutura é dessa maneira. Eu vou colocar um case para cada valor e por fim, opcionalmente, eu posso colocar um default que é o padrão. Assim se nenhum dos de cima forem satisfeitos.
Só que eu tenho uma informação importante para te dar antes de prosseguir. Dentro da estrutura switch isso veio lá da linguagem C. Existe um detalhezinho que precisa ser seguido. Dentro da cada bloco.
Eu preciso colocar um comando break. Então pra cada um eu tenho um break. Na última é opcional mas vamos colocar sempre. Esse break é obrigatório.
E como é que funciona o negócio? Ele vai testar essa expressão que está aqui em cima. Vamos supor que esse expressão resulte no valor 2 que está aqui. Então ele vai desviar
vai executar os comandos que tiverem nesse bloco, na verdade pode se um ou vários comandos e no final ele vai bater no break.
Quando ele bate no break, olha o que vai acontecer com o fluxo ele vai ser desviado lá pra baixo. Se por acaso esse break não existir, vai dar problema porque vai continuar executando todos os comandos até achar um break.
Essa é a primeira parte do assunto e nós vamos começar a aprender essas estruturas que a gente também pode chamar de Laços ou interações.
Na nossa vida existem vários momentos em que a gente faz repetições e um dos exemplos que eu coloco aqui é por exemplo comer uma pizza, comer uma pizza é uma atividade que requer repetições, vamos supor que você é guloso ou gulosa e vai querer comer essa pizza inteira, pensando nisso eu já criei aqui embaixo a minha function comerPizza(), a minha function é uma função que eu faço constantemente
Então vou criar uma function comerPizza() pra mim, essa função ela vai ter um bloco então eu abro e fecho chaves { }, está vendo? Está amarelinho aqui embaixo e eu vou começar minha atividade de comer essa pizza inteira e pra começar,
eu tenho que fazer alguns passos: primeiro passo que eu vou fazer aqui é comer a primeira fatia, quando eu como a primeira fatia, já não está mais lá,
o próximo passo da minha atividade é comer outra fatia, então ele já comeu a segunda fatia ali,
vamos fazer mais um comando que é comer mais uma fatia
e assim sucessivamente até a pizza acabar. Eu vou fazer a minha função de comer a pizza é exatamente essa daqui de baixo, você percebe que a minha pizza tinha oito pedaços, então aqui embaixo eu tenho oito comandos, comer Fatia. Então assim minha atividade é partir do primeiro comando até o último comando para cumprir a minha missão que foi comer essa pizza inteira.
e com a programação também é assim, a gente parte de um ponto A e vai até um ponto B, a sua tarefa na hora de programar é conseguir escrever os programas pra que você saia do ponto A e chegue ao ponto B que é o seu objetivo e para conseguir atingir os nossos objetivos
existem várias formas que a gente chama de Estrururas de Controle.
A primeira estrutura de controle, a mais simples de todas é a sequência onde eu vou desde o ponto A até o ponto B executando tarefas sequencialmente até chegar ao objetivo que foi exatamente o que aconteceu na hora de comer pizza eu coloquei um passo depois do outro várias vezes até o momento em que eu comia a pizza inteira, só que nem tudo é uma maravilha como isso daqui, ás vezes existem desvios
existem possibilidades e então a gente viu lá durante a aula 12 do Módulo D e todos os exercícios as condições onde eu tenho um teste lógico que e representado por esse losango aqui e esse teste ele tem
duas possibilidades: verdade ou falso. E de acordo com esse valor vão ser executadas tarefas específicas, você vê aqui do lado por exemplo: imagina que eu tenho uma pizza de oito pedaços, mas existe um pedaço de pizza de Margherita e eu não gosto de Margherita, então se a pizza não for de Margherita eu como
se não eu não como, e eu consigo também chegar de um ponto a outro, nem tudo na programação é feita de uma sequência como a gente viu anteriormente, ás vezes é necessário isso daqui, mas o nosso assunto não é as condições, caso tenha dificuldade volte para O Módulo D, porque nessa a gente vai ver um novo tipo de estrutura de controle
que são as Repetiçôes ou como eu chamei anteriormente os laços. Um laço ele começa exatamente como uma condiçâo ele vai testar uma expressão e assim como acontecia nas expressões de condição eu tenho duas possibilidades: ou esse teste é verdadeiro ou ele é falso, só que o comportamento aqui é um pouquinho diferente.
se esse condição, se esse teste lógico for verdade ele vai executar um bloco só que ele não vai seguir desse bloco para o ponto final que está embaixo, ele vai volta ele vai fazer um looping,
ele vai fazer um laço, uma repetiçao. Voltando para o losango ele vai testar de novo essa condição, se essa condição for verdadeira de novo,
ele vai executar tarefa e fazer outro laço como acabou de acontecer e vai testar mais uma vez,
testando e sendo verdadeiro, ele vai executar esse bloquinho de novo e mais uma vez vai voltar e ele vai fazer isso enquanto essa condição for verdadeira,
percebe na minha frase: "enquanto essa condição (que é esse losango) for verdade,
a partir do momento em que esse losango" não for verdade, for mentira o laço é quebrado e eu sigo o meu fluxo natural,
então essa estrutura daqui de cima é a nossa estrutura de laço principal, ela é a primeira que a gente sempre vê quando vai estudar programação, existem outras? Existem, mas essa é a mais comum de todas.
Se você já tem conhecimento em outra linguagens de programação principalmente liguagem C ou liguagem Java é exatamente da mesma maneira
Lembra que quando eu li essa estrutura eu coloquei: "enquanto alguma coisa for verdade", essa palavra "enquanto" em inglês ela se escreve while, ela se diz While.
Então eu vou colocar While e uma condição que é exatamente a condição que eu testari aqui dentro desse losango,
quando eu escrevo um while eu tenho que colocar um bloco, lembrando em JavaScript, bloco são sinais de chaves {}, tudo que estiver entre chaves é um bloco,
então esse bloco que está relacionado a esse enquanto, vai acontecer enquanto esse condição for verdadeira, sendo ela verdadeira, todo o comando que foi escrito aqui dentro vai ser executado,
depois que esse bloco foi executado, chegando na chave aqui de baixo ele vai voltar pro while, e vai testar de novo a condição, se ela for veradeira, mais uma vez ele vai executar esse bloco e voltar. É assim que funciona,
E a partir do momento em que essa condição deixar de ser verdadeira e passa a ser falsa, o fluxo e desviado pelo lado de fora.
Compara essa parte daqui de baixo com a parte de cima é exatamente o mesmo diagrama, é exatamente a mesma estrutura de laço
mas vamos voltar a nossa história de comer pizza, comer pizza é uma repetição e vamos montar a nossa estrutura da função mais uma vez, lembra que antigamente era comer fatia 8 vezes
e se eu dividir essa pizza em 16 ou 20 vezes?
Aquele meu algoritmo anterior, aquele meu programa onde tinha comer fatia 8 vezes já não serve mais e isso sem falar que tem uma repetição de comandos desnecessária, na verdade desnecessária não, chata de fazer, mas agora que você conhece a estrutura while tudo vai ficar mais fácil.
Sempre que você encontrar a palavra
while, leia como enquanto, então dá uma olhada aqui:
enquanto tem fatia, fiz um teste, dá uma olhada em cima tem fatia? sim, tem fatia
então eu vou criar um bloco e dentro desse bloco eu vou colocar o comando comer fatia, então olhando aqui em cima tem fatia? Tem
então ele come uma fatia e chegando no final do bloco
ele vai fazer o nosso looping, ele vai fazer a repetição como a gente representou aqui agora, o teste vai ser feito de novo, ainda tem fatia em cima? Tem, então ele come a fatia e volta de novo, então esse mesmo processo de repetição está acontecendo, enquanto tem fatia ele está comendo as fatis
até chegar o momento em que só tem uma fatia. Vamos fazer o teste de novo enquanto tem fatia, tem fatia? Tem uma fatia.
ele vai comer a fatia e voltar de novo, pergunta mais uma vez, tem fatia? agora não tem fatia, ficou falso então ele vai sair e terminou a minha função de comer pizza.
Então a primeira coisa que a gente vai fazer é esse programa é muito mais eficiente que o anterior, eu vou colocar o anterior na tela só para você comparar
dá uma olhada na parte de cima e dá uma olhada na parte de baixo
e mais importante: o de baixo só serve para eu comer oito fatias, o de cima serve para qualquer tamanho de pizza. esse programa de cima é mais eficiente.
E se nesse momento você está pensando: "ah Guanabara é só pegar o debaixo dar um (CTRL + C) e (CRTL + V) se for 20 fatias" e se for por exemplo 50 fatias,
você vai ter que pegar o comer fatias e copiar 50 vezes, aqui em cima funciona sem alterações, para 1, 2, 50, 500 fatias, Deu para entender a ultilidae de uma estrutura de pepetição como essa que a gente tá acabando de ver?
Forma de fazer no JavaScript
let c = 1
while (c <= 6) {
console.log(`passos ${c}`)
c++
}
// resultado
passos 1
passos 2
passos 3
passos 4
passos 5
passos 6
Sendo assim essa estrutura daqui de cima que é o while, ela é classificada como estrutura de repetição com teste lógico no início, isso porque ele faz o teste sendo verdadeiro ele faz o bloco, só que existe uma outra possibilidade, existe também a possibiidade em vez de fazer o teste lógico no início que é testa, executa e faz looping
eu posso fazer também a estrutura ao contrario, primeiro eu executo bloco e depois eu faço teste, exatamente como acabou de aparecer aqui, e a linha de raciocínio igual,
se o teste lógico for verdadeiro, ele faz o looping e executa o bloco de novo e ele vai ficar nesse looping enquanto esse teste for verdade.
a partir do momento em que esse teste não é mais verdade é mentira o fluxo sai da estrutura de repetição.
Compare esse diagrama de cima com o debaixo, eles são essencialmente estruturas de repetição mas eles têm comportamentos diferentes: o bloco de cima ele primeiro testa e depois executa o bloco,
aqui embaixo ele primeiro executa o bloco e depois ele testa
e para fazer essa estrutura aqui debaixo é muito simples em vez de while alguma coisa, você vai fazer do, "do" quer dizer "faça" então escrever do, abre e fecha bloco {} faça. esse bloco que acabei de desenhar aqui enquanto a codição,
enquanto essa condição for verdadeira ele vai fazendo o bloco exatamente como acabou de representar aqui em cima, vai ficar repetindo
e partir do momento em que aquela condição passar a ser falsa, ele sai do bloco e segue sua vida normal na execução do programa.
Dessa maneira essas duas estruturas que estão representadas aqui em cima são as minhas duas primeiras estruturas de repetição dentro do JavaScript,
a de cima que é a while, a gente chama de estrutura de repetição com teste lógico no início a de baixo que é do while a gente chama de estrutura de repetição com teste lógico no final.
let c = 1
do{
console.log(`passos ${c}`)
c ++
} while (c <= 6)
// resultado
passos 1
passos 2
passos 3
passos 4
passos 5
passos 6
A partir de agora. A estrutura de repetição com variável de controle, que é representada polo hexágono irregular.
basicamente, nesta hexágono, são feitas três coisas: inicialização, um teste lógico e o incremento. Na primeira passagem, exatamente como está aqui, ele faz a inicialização e o teste lógico. Sendo esse teste lógico verdadeiro.
ele vai executar o bloco, exatamente como acabou de acontecer, e nesse bloco pode ter um ou vários comandos, como a gente já viu. E feito o bloco, ele vai automaticamente
voltar. Exatamente como a gente tinha feito nas estruturas while e do..while, só que dessa vez, no momento do looping, ele também vai fazer o incremento, uma das três partes que estão aqui em cima nesse hexágono irregular. O teste lógico, então é feito mais uma vez, E sendo verdadeiro.
mais uma vez esse bloco vai ser executado e o looping acontecerá novamente. Essa estrutura vai ficar acontecendo. Cada vez que voltar, eu incremento e faço o teste lógico. Quando esse teste lógico ficar falso.
ele vai seguir esse caminho, que é o caminho de encerramento.
Então essa estrutura está aqui em cima é o que a gente chama de estrutura de repetição com variável de controle. E se essa explicação ficou meio confusa, é porque a gente não viu na prática.
O comando que a gente vai utilizar, é o comando for, a estrutura for, exatamante como está representada aqui abaixo.
como eu disse anteriormente, a estrutura for tem três partes: o início (a inicialização), um teste lógico e um incremento. E, tem um bloco, que você viu, abre chave e fecha a chave.
Então, explicando mais uma vez:
na primeira passagem pelo
for, ele vai fazer a inicialização e o teste.
Sendo esse teste verdadeiro, ele vai executar um bloco com quantidade de comandos que ele tiver.
inclusive eu posso colocar dentro de
for, umwhile, umdo..while, umifou umswitcheu posso colocar qualquer estrutura que a gente viu das aulas anteriores até aqui. Não existe limitação nenhuma para programação.
Uma vez executado esse bloco, ele vai voltar para cima, exatamente, como você acabou de ver. Só que enquanto ele está voltando, ele vai fazer aquele incremento que está ali no final, e de novo vai fazer o teste lógico. Sendo esse teste lógico verdadeiro, ele executa o bloco de novo e volta. Nessa volta, ele faz um incremento de novo e faz o teste lógico mais uma vez.
isso vai acontecer enquanto esse teste lógico for verdadeiro.
Se por acaso esse teste lógico for falso, ele vai sair da estrutura e segue se o fluxo natural de execução do nosso script.
e se caso ainda não tenha ficando tão claro para você o funcionamento desse incremento, dessa teste lógico e inicialização, com certeza vou conseguir te provar agora. Eu vou escrever um código que é muito familiar á você, se você viu a aula anterior pricipalmente, que é um código que utiliza a estrutura
while, que é enqunto.
Comecei com variável c, que recebe 1. Exatamente como está escrito aqui em cima, Vou colocar um while que é "enquanto", uma estrutura enquanto, e vou colocar o teste lógico, c <= 10. isto é, o "c" começa com 1. Enqunato "c" for menor ou igual a 10, ele vai fazer uma determinada coisa, vai fazer um bloco. e eu vou colocar c++.
Lembrando que
c++significarc + 1. O "c" que estava valando 1, vai passar a valer 2. Vai voltar. voltando ele teste,c <= 10? Sim. Ele vai fazer, vai virar 3 e vai voltar. Ele vai fazer isso até passar de 10, quando ele passar de 10, ele sai.
agora vamos ver como reescreve esse mesmo código só que utilizando a estrutura for.
Lembrando que for, como está em cima, tem três áreas pricipais. A primeira área é a inicialização.
E a inicialização do código de cima está ali. Acabei de mascar pra você. var c = 1. Sendo assim, a minha inicialização sendo essa, eu escrevo na linha do for, na primeira parte: o primeiro elemento é a inicialização.
Então eu inicializei o "c" com valor 1.
A segunda parte: do bloco é o teste lógico. Exatamente esse teste lógico. aqui em cima. c <= 10. Vou pegar esse mesmo elemento. vou escrever aqui embaixo. Então, c <= 10 para a segunda parte.
A terceira parte: é o incremento. No nosso caso do código de cima do meu incremento é o c++. Então vou pegar exatamente esse c++ e vou escrever aqui em baixo, no for como sendo a terceira parte.
O que estou tentando explicar é que o código de cima e o código de baixo tem exatamente a mesm funcionalidade. Elas vão começar no 1, e vão terminar no 10. Então, tanto faz escrever da maneira de cima, quanto da maneira de baixo.
- saiba mais sobre: (for) em developer mozilla
Vamos entender a diferença entre variáveis simples e variáveis compostas.
como a gente já viu durante as aulas anteriores, toda aula a gente usou variáveis
variáveis simples só consegue armazenar um valor por vez, então quando você cria uma variável com var ou let, você criou uma variável N e essa variável N recebe 5 por exemplo, sua variável está valendo 5, se por acaso você tentar atribuir 8 a ela, ela perder o 5 isso porque é uma variável simples e variáveis simples só guarda um valor por vez e você não precisa nem pensar muito para a conclusão que uma variável composta
uma variável composta deve ser capaz de armazenar vários valores em uma mesma estrutura, isso é você colocou 5 ela guarda, colocou 8 ela guarda também, e colocou um 12 ela guarda também, isso é, ela não vai perder os valores anteriores para poder guardar os proximos valores, esse é um conceito fundamental de variáveis compostas.
mas para te explicar direito daquele jeito que a gente sempre faz, e para dar uma relembrada num conceito ou num exemplo prático que eu te dei lá anteriormente na aula de variáveis.
você deve se lembrar muito bem do exemplo que a gente viu anteriormente naquele lance do terreno para fazer um estacionamento, agente tinha um terreno exatamente como está aqui e a gente colocava várias vagas de automóveis, agente delimita para poder caber dentro de uma vaga apenas um automóvel
nós fizemos isso durante as aulas de variáveis e para facilitar para eu saber onde que eu guardei o carro, eu coloco um identificador, um nome para cada uma dessas vagas, eu coloquei aqui do lado do a0 até o a5, só que isso consumia muito código na hora que a gente programava, quando a gente precisa de muitas varáveis em um programa, ela consome muito código, a gente tem que escrever muito então por exemplo para declara essas vagas que estão aqui em baixo
eu tenho que colocar vaga várias vezes que seria o nosso var ou let e eu tenho que colocar o nome de cada um dos indecadores de a0 até a5, agora você imagina que sejam 200 vagas, imagina o tamanho do código que iria aparecer aqui do meu lado
a partir do momento em que eu declarei essas variáveis, que declarei essas vagas de estacionamento, eu consigo colocar automóveis ali dentro sem problema nenhum e a gente viu durante as aulas de de váráveis, A gente naquele momento utilizou o código maior e eu nem me lembro se durante a aula eu prometi reduzir esse código mas a gente vai reduzir a partir de agora,
naquela aula também eu coloquei um carro na vaga a2, se por acaso eu quiser colocar outro carro na vaga a2 eu sou obrigado a tirar esse daqui, isso porque elas são variáveis simples e se eu quiser colocar em outra vaga que esteja livre por exemplo a1, tem uma vaga ali eu posso colocar sem problema porque a vaga está livre, mas qualquer vaga se eu quiser colocar outro carro eu tenho que tirar um carro que por ventura esteja lá.
o que eu vou fazer agora é propor uma outra forma em que você vai escrever menos e vai ser muito mais fácil para você gerenciar os automóveis que estão nessas vagas. Eu não vou dar mais um identificador pra cada vaga, eu vou chamar elas toda pelo mesmo nome, então eu vou traçar uma linha aqui, dá uma olhada nessa linha azul que eu tracei, todas essas vagas vão se chamar a, que são vaga para automóveis, por isso que coloquei o a.
Nunca se esqueça pequeno Gafanhoto, coloque nomes claros para suas variáveis, não adianta ficar sendo programador alfabeto (a, b, c, d, e, f) para todas as variáveis e nem o programador contador (n1, n2, n3, n4)
aqui eu utilizei a porque é uma vaga de automóveis poderia ser "auto" por exemplo também, você escolhe o nome contanto que ele seja claro pra você.
Sendo assim eu estou com vagas a e você vai falar: "mas não tem a identificação de cada vaga", tem sim porque essa variável grandona é a minha variável a e eu vou colocar um identificador de índice,
uma chave que vai indentificar cada uma delas e para declarar essas vagas eu só vou usar uma linha, vaga a
e para cada vaga eu coloco uma chave, um índice, exatamente o que acabou de acontecer aqui
e aí você pode estar pensando: "ah mas deu no mesmo", não é exatamente no mesmo, eu simplesmente escrevi muito menos
agora eu continuo tendo do a0 até o a5, só que vou escrever de uma forma um pouco difente, utilizando colchetes, já você vai ver, o que eu quero é que você entenda que antes eu utilizei um monte de linha para declarar, agora eu só utilizei uma e para que eu faça essa variável funcionar como uma variável composta que é exatamente isso que acabei de explicar, essa é uma variável única chamada a que guarda vários valores identificados por uma chave que é a identificação de cada vaga
pra eu declarar isso em JavaScript é muito simples! É só colocar isso aqui: vaga a =[ ], e é claro que não é só colocar assim, porque se você olhar aqui eu tenho carros nas vagas como é que eu declaro uma variável desse tipo e já coloca os carros na vaga
simples dá uma olhada aqui, vou colocar: vaga a = [ , , ] e vou colocar 3 áreas ali, se você identificar dentro dos colchetes eu tenho 3 espaços para colocar carros
é só eu colocar os carros ali, automaticamente quando eu faço isso ele já vai arrumando os carros nas vagas.
Basicamente o que vai acontecer é eu vou declarar uma variável a, olha lá embaixo como é que tá acontecendo, só que essa variável a é um pouco mais espaçosa, isso porque ela vai ter que ser divida em 3 partes, no caso pela declaração ali em cima, não precisa ser sempre 3 partes, pode ser quantas partes você precisar,
quando eu faço aquela inha que está ali em cima, vaga a abre colchete e coloca os 3 carros, automaticamente
os 3 carros vão para essas vagas, vão para esses espaços e cada espaço desse recebe uma identificação, recebe um número que a gente chama de chave ou índice então coloquei ali embaixo de vermelho
os números, então eu tenho a0 que está com o primeiro carro, a1 que está com o segundo carro e a2 que está com o terceiro carro, aquele menorzinho.
E uma observação muito important, geralmene as pessoa que estão começando se enrolam um pouco porque as variáveis compostas na maioria das linguagens de programação começam com índece 0, geralmente a gente pensa assim: a primeira vaga é a vaga 1, so que na programação, já acostume-se com isso, tem várias liguagens de programação que funcionam assim, a primeira vaga não é a vaga 1, é a vaga 0, então uma variável composta de 10 posições não vai de 1 a 10, vai de 0 a 9 acostume-se com isso.
vamos começar a dar nome ás coisa, essa variável composta que a gente declarou, essa variável a ela é uma variável do tipo composta ou array ou em português vetor
então sempre que você pensar assim: "ah, o vetor tal", vetor é uma variável com vários espaços, exatamente como está representada aqui embaixo,
o vetor ele é composto de elementos, um elemento de um vetor, ele é um par que agrupa o espaço de memória, o valor colocado dentro dele e o índice.
E por fala em índice, índice é esse número que está aqui embaixo também pode ser chamado de chave ou em inglês key
e por último aqui nosso componente está o conteúdo de cada elemento
então analisando esse gráfico que tem na sua tela fica muito simples,
um array ou um vetor ou uma variável composta é uma variável que tem vários elementos, cada elemento é composto por seu valor e por uma chave de identificação.
E como é que eu faço isso aqui que aconteceu com carros, acontecer em JavaScript?
então vou colocar: let num = [] é uma variável composta então ela não vai guardar um número, ela vai guardar vários números
sendo assim essa linha que apareceu vai declarar uma variável num, que é um poquinho mais larguinha, um pouco mais gordinha, dentro dos colchetes [ ], que estão aqui embaixo, vou utiliza vírgulas para separar os elementos, nesse caso mais uma vez eu separei 3 espaços
quando eu separo 3 espaços automaticamente ele vai dividir variável em 3 partes e já vai dar os índices exatamente como aconteceu ali
Lembrando o primeiro índice não é 1, é 0, vou colocar o primeiro valor ali, vou escrever 5 o que vai acontecer? O 5 vai para o primeiro espaço
vou colocar o segundo valor 8 e 8 foi para o espaço 1.
vou colocar mais um valor 4 e o 4 vai pro espaço 2.
sendo assim acabei de representar aqui, um vetor de 3 elementos, elementos 0, 1 e 2 que tem os valores 5, 8 e 4.
Como acrescentar um valor, sem perder os valores que estão lá?
Então estamos aqui exatamente onde a gente parou, o vetor aqui está com 5, 8 e 4 e você percebe que os índices são 0, 1 e 2,
se eu quiser acrescentar a vaga 3, é muito simples, é só fazem assim: num[3] = 6
quando eu coloco num e entre colchetes eu coloco 3, estou dizendo assim para o JavaScript: Coloque o valor 6 na posição 3, só que a posição 3 se você olhar o gráfico, não existe. o JavaScript percebe isso e cria pra você.
Então essa linha que apareceu num[3] = 6, vou ler 3 só que você não vai escrever num 3 sem o colchete, não pode esquecer o colchete, quando eu digito essa linha ele vai criar mais um elemento, vai colocar o índice 3 e vai colocar o valor que está ali, o valor 6, vai colocar dentro do elemento.
Essa é uma maneira automatizada do JavaScript
mas se você quiser colocar explicitamente olha eu quero coloque na última posição, não quero saber qual é a posição, não quero ficar preocupado com isso, é só você usar um comando muito fácil que é: num.push(7) que é um método interno que vai acrescentar valores a um array
então estou tentando acrescentar o valor 7 é só olhar aquele comando que está escrito ali, com isso o JavaScript já vai criar mais um elemento já vai automaticamente decidir que o índice, que a chave é 4
e vai colocar lá dentro o valor 7 exatamente como acabou de aparecer
Outra coisa que a gente pode fazer também com arrays, que a gente pode utilizar os comandos aqui é saber comprimento dele
como que vou saber o comprimento? Simples, num.length
cuidado, como se escreve a palavra length muita gente se confude e coloca "lenght", confude bastante principalmente pra gente que o inglês não é a primeira língua e outra confusão muito grande é que do lado de length não tem parênteses para o JavaScript, em outras linguagens têm, length não é um método, length é um atributo e pra que ele serve?
Simple, é só você olhar o desenho que está aqui embaixo, quantas casas, quantos elemento exitem no array num se você respondeu que tem 5 elementos, você é bem observador e é exatamente esse valor 5 que é o num.length que é o comprimento do meu vetor
vou te ensinar mais um comando, um método interno também de todo vetor que é muito útil que é o método sort(), então quando eu coloco num.sort(), ele vai simplemente pegar todos esse valores, olha nesse momento como está meu vetor, os elementos são 5, 8, 4 e 6 e 7 posições 0, 1, 2, 3, 4
quando eu uso o num.sort(), olha o que ele vai fazer, ele vai pegar todos os elementos e colocar em ordem crescente sendo assim e tenho agora 4, 5, 6, 7 e 8 ordenados
Outra coisa que é muito comum da gente fazer com o vetor é mostrar ele na tela sem a formatação padrão, porque geralmente ele mostra aquela formatação padrão com colchetes é bem bagunçado,
se você quiser mostrar da maneira que você preferir, vou te mostrar como fazer isso
aqui na tela está o vetor que a gente criou anteriormente, ele tem 5 elementos, de 0 a 4 e ele está la com 4, 5, 6, 7 e 8 já está ordenado porque a gente deu sort() nele,
para eu escrever esse vetor como a gente acabou de ver, a gente pode fazer isso por exemplo eu coloco: console.log(num[0]), quando eu colocar num[0], ele vai mostrar o valor 4 que é o primeiro elemento,
se eu quise mostrar o segundo é só colocar: console.log(num[1]) e eu posso fazer a mesma coisa pra todos os elementos eu dou um console.log() para cada um deles e dentro de cada um dos parentes eu colo num[2] num[3] num[4] e assim sucessivamente.
Da só uma olhada no tamanho do código que eu gerei só pra mostrar um vetor de 5 posições, imagina agora se ele tivesse por exemplo 200 posições, seria um grande trabalho de código e não é assim que a gente trabalha, mas a solução para isso é muito simple e a resposta está nas aulas anteriores, por isso que eu perguntei no início, você praticou o suficiente o uso while, do...while e do for, pricipalmente o do for? pois esse conhecimento vai ser extremamente útil para você agora,
dá uma analisada nessas linhas que estão aqui console.log(num[0]) e etc, o que tem de diferente dentro de cada uma dessas linhas? A unica diferença entre elas é isso aqui que eu acabei de marcar, são os índeces, então eu tenho 0 na primeira, 1 na segunda, na terceira e assim sucessivamente.
Pois esses números que estão marcados aqui são exatamente as minhas chaves, ela indicam a posição dentro de cada vetor, agora você imagina que eu possa utilizar, criar variável chamada "pos" e essa variável pos começar valendo 0 e for valendo até 4, que é exatamente o limite do meu vetor, se eu fizer uma repetição para isso eu escrevo essas linha de consolo.log() apenas uma vez e coloco dentro de uma estrutura de repetição
e se por acaso você tem problemas em estrutura de repetição, volte e assistar aulas 12, 13 e 14 porque a grande dificuldade dos vetores não é o vetor, é a estrutura de repetição.
Sendo assim eu vou substituir esse código todo que está aqui em cima, por apenas duas linha, vou criar uma estrutura chamada for que a gente já viu nas anteriores, vou fazer um for aqui, você viu durante a aula que o for tem 3 elementos, o primeiro elemento é a inicialização, o segundo teste lógico e o terceiro incremento.
vou colocar aqui dentro do for o console.log e vou escrever alguma coisa ali dentro e vamos comerçar, e vamos preencher aqui o nosso for em primeiro luar a inicialização, como eu disse há alguns segundos atrás, eu vou criar uma variável let pos = 0
ela vai se inicializar, variável pos vai se inicializa com 0, o meu teste lógico é fazer o pos chegar até 4, só que chegar até 4 pra um vetor de 4 posições e se o vetor tiver 200? ou se tiver 50? Tem como eu saber quantas as posições têm? Tem, eu acabei de ensinar!
È só fazer isso aqui: pos < num.length isso é enquanto ele não chega no final do meu vetor, que é o comprimento dele
vou fazer: pos++ pra ele adicionar um cada vez que ele fizer um looping.
então acabamos de montar o for aqui do lado, sendo assim eu tenho uma variável pos que vai começar 0 e vai até o tamanho do vetor.
Então eu vou ter 0, 1, 2, 3, 4 e 5 até chegar no final do vetor, para escrever na tela é só substituir aquele pedaço do console.log() por num[pos] em vez de num[0], num[1], e num[2] eu coloco num no índece pos
Essa não é a unica de maneira de fazer, tem uma um poquinho mais simples e é que a gente gosta mais de utilizar!
Esse código que está em cima é o código tradicinal do percurso em vetores isso é o que a gente chama de percuso para exibição no vetor e o JavaScript a partir das versões mais recentes do ECMAScript tem um jeito mais fácil, mais simplificado para fazer.
Vou criar uma estrutura que a gente chama de for só que utilizando o in dentro, Então vou utilizar o for..in e ele não tem 3 elementos como está aqui no primeiro for, ele é um for um pouco mais simplificado e ele é otimizado para variável compostas e objetos, isso porque vetores e objetos são muito importantes para a linguagem JavaScript.
vou colocar aqui dentro o mesmo consolo.log() exatamente como está aqui em cima e olha como vai ficar pequeno: a primeira coisa que vou botar aqui dentro do for é o meu índice, é a variável que eu criei aqui em cima let pos = 0, só vouc colocar let pos ou var pos
e do lado in basta colocar o nome da variável composta, olha que simples, no nosso caso aqui, a minha variável composta se chama num, então eu vou colocar: para cada podição dentro de num
è assim que a gente vai ler, o for a gente lê para, o in a gente lê dentro ou "em" em português.
Então vamos ler essa frase em português: para cada posição em num, para cada posição na variável composta, eu vou mostar o num pos, simples, olhar que simplicidade
Lembrando que essa sintaxe do
forela só funciona para arrarys e objetos, que na verdade são a "mesma coisa" porque todo array em JavaScript é um object.
como buscar valores dentro de um vetor, dá pra fazer isso com comandos bem simples dá uma olhadinha. coloquei aqui mais uma vez o mesmo vetor que a gente estava trabalhando aqui como exemplo, nosso vetor num, e vou fazer o seguinte: eu quero buscar o valor lá dentro
vou utilizar o método indexOf(), lembrando, que o O de Of com letra maiúscula senão não vai funcionar.
o que é indexOf(7)? Ele vai procurar lá no vetor embaixo onde está o valor 7, se você é observador(a), você percebeu que o 7 está ali, essa função então vai me retornar a chave onde esse valor se encontra
então por exemplo mandei aqui com esse comando num.indeOf(7), pesquisar "JavaScript tem o valor 7 dentro do vetor?" Ele vai me responder "tem e está na posição 3", então é exatamente dessa maneira que o indexOf() funciona e você pode estar pergutando: "tá Guanabara e se eu der um num.indeOf(3)?"
dá uma procurada ali existe 3? E se você está dizendo que existe presta atenção, não é o número vermelho lá debaixo é o valor, não é a chave, não existe o valor 3, ele vai procurar e vai falar: "3 não tem",
ele deu uma olhada no vetor e não tem, sendo assim ele retorna o valor (-1),
(- 1) significar para o JavaScript que Ele pesquisou dentro do vetor e não encontrou nenhuma ocorrência
e agora a gente vai dar continuidade a um conceito que a gente já começou anteriormente, lá na aula 10 que é o uso de funções em JavaScript, a gente aprendeu a fazer funcionalidades simples, mas a gente não falou sobre passagem de parâmentros, sobre retorno de reultados e isso a gente deixou aqui para o finalzinho da parte básica do seu curso de JavaScript.
E como eu acabei de falar JavaScript é uma linguagem que funciona sob o paradigma funcional, ela é uma linguagem que funciona como uma linguagem funcional, então função é algo muito importante.
È claro que a gente vai ver as funcionalidades simples, bem básicas, mas esse básico é extremamente importante para todo tipo de linguagem.
Então companha essa aula até o final, assiste esse vídeo até o finalzinho, prática porque logo depois dessa aula vem uma sequência de exercícios, na verdade um grande exercício para que a gente possa resolver isso juntado os conceitos de Array, de função, todo junto em um exemplo só envolvendo HTML, você não perde por esperar!
mas você prencisa de conhecimentos que você vai adquirir aqui nessa aula e antes de começar a aula
Vamos imaginar a seguinte situção do dia a dia, normal coisa que poderia acontecer na sua vida, você tem funções na sua vida, a sua mãe te dá varias funções na sua vida, todo filho tem um conjunto de tarefas que ele tem que fazer, seja ele varrer o quintal, arrumar o quarto isso tudo são tarefas, são rotinas e as linguagens de programação também chamam isso de funções ou funcionalidades.
Vamos imaginar a seguinte situação: olha só a sua mãe chega pra você constantemente, toda semana chega pra você pega um dinheiro e entrega e fala assim: olha só pega esse dinheiro e vai na mercearia para comprar "lete",
qual é a sua função?
Você pega esse dinheiro, vai até a mercearia, vai chegar lá da maneira que for, vai andando, vai pegar um trem, vai pegar um ônibus, enfim você vai chegar até a mercearia, vai fazer os procedimentos lá dentro, vai fazer o passo-a-passo pegar o leite, ir lá no caixa e entregar o dinheiro,
vai pegar a sua garrafa de leite e vai entregar pra sua mãe, a sua mão vai receber essa garrafa de leite, talvez um troquinho, e uma vez que a sua funcionalidade terminou, ela se encerrou e entende o seguinte para sua mãe não importa o que você fez, como você chegou, quanto estava o leite, o que importa a ela é o seguinte: ela tem que te entregar o dinheiro, te passar a ordem, "quero o leite", você vai ter que trazer leite, como você vai fazer, o que você precisa fazer para chegar lá, qual mercearia você vai, não importa, o que importa é que ela quer esse resultado, ela quer esse retorno.
Vamos nessa cena dar alguns nomes as coisas que aparecem nessa cena: em primeiro lugar nós vamos dizer o seguinte, quando a sua mãe te chama e te passa a ordem a gente chama isso de (um nome óbvio) chamada, então toda função precisa ter uma chamada ás vezes a sua mãe te chamando pra comprar leite e ás vezes você pode ter uma funcionalidade que acontece toda quarta feira de manhã, você não precisa de um disparo da sua mãe, o disparo é o seu relógio, toda a quarta feira 8 horas da manhã você tem que ir na mercearia, pegar o dinheiro na estante e comprar leite.
A chamada nem sempre ela é vocal, nem sempre ela é verbalizada, ela pode ser automatizada outra coisa que você precisa: você não pode ir á mercearia pra comprar leite sem o dinheiro, sem alguma coisa de entrada que a gente chama de parâmetro e nessa história que contei existem dois parâmetros o dinheiro que você precisa para poder comprar e o que a sua mãe queria, qual foi o produto que ela quer também é um parâmetro de entrada, isso faz parte da chamada também. quando você pega o dinheiro e de posse da informação de que sua mãe quer leite, ir á mercearia chega da maneira que for,
o processo todo que acontece lá dentro, o que você tem que fazer para conseguir leite a gente chama de ação, então toda a função também tem uma ação envolvida
e no final quando você volta pra casa e entrega o leite para sua mãe, você tem o que a gente chama de retorno,
então preste atenção, toda função pode ter os seguintes fatores: uma chamada, um conjunto de parâmetros, uma ação e um retorno. Nem toda função usa parâmetros, nem toda função tem retornos mas essas que a gente vai ver agora elas têm isso sim e elas são muito importantes para dar mais funcionalidades as nossas tarefas.
Agora a gente vai para definição técnica coloca na sua cabeça essa cena, lembra sempre sua mãe faz uma chamada, passou parâmetro pra você, você foi lá e executou uma ação e de um retorno, isso é função, função na vida real,
função pra programação tem essas definições aqui presta atenção: Funções são ações executadas assim que são chamadas ou em decorrência de um evento. Foi aquilo que eu falei você executar alguma coisa quando a sua mãe te chamar ou quando acontecer algum evento, quarta feira 8 horas da manhã, todo dia que chover você tem que tirar a roupa do varal, você não precisa que sua mãe te peça, começou a chover, tira a roupa do varal. isso são funções que são executados automaticamente, outras precisam de uma chamada,
outra coisa sobre funções: Uma função pode receber parâmetros (no nosso caso é o dinheiro lá na nossa cena) e pode retornar um resultado (que no caso é a garrada de leite), então para a programação esses dois conceitos que estão embaixo, eles servem e eles se encaixam perfeitamente naquela história que a gente acabou de contar aqui para você
na verdade, na prática a gente já executou funções, você deve se lembrar quando a gente fez o estudo do DOM no modelo de objetos por documento, a gente criou um botão e esse botão você podia fazer coisas com ele inclusive clicar sobre ele
e quando você clicava ele disparava um evento, que é o onclick do HTML, o onclick você vai dizer qual é o método que vai ser utilizado, qual é a função que vai ser disparada quando você clicar no botão
então você colocava lá no HTML o onclick e colocava na época, na aula 10 (se não me engano) uma chamada para uma função, essa função tem um nome, que geralmente é o nome da ação e a gente tinha colocado lá naquela época abre parênteses, e fecha parêntesses, a gente não tinha passado os parâmentro ali no meio daqueles parentes é onde a gente vai passar os parâmetros, eu vou executar uma ação que é esse retângulozinho que apareceu e ele não tinha retorno, na época quando eu usava o DOM e eu não tinha retorno.
A partir de agora a gente vai dar um upgrade nesse conceito de função que a gente está vendo aqui
O que vou fazer agora é isso daqui olha eu vou dentro dos parentes, eu sou capaz de adicionar parâmetros, e esses parâmetros vão ser processados pela ação e podem ter um resultado, essa ação ela não executa por padrão,
eu tenho que ter uma chamada, lembra disso? Essa chamada eu vou colocar aqui na linha debaixo, eu vou colocar ali "ação(5)", o que significa ação(5)? Eu estou chamando a ação, que é o nome da minha função, é só você olhar aqui em cima, então estou fazendo nessa linha a chamada, então na hora que eu executar esse código está aqui debaixo, ele vai pular parte da função e vai executar só esse comando aqui de debaixo, a ação e vou executar esse ação passando um valor,
passando 5, esse valor 5 dessa linha aqui vai pra cima, vai para o parâmetro. Então o parâmetro vai valer 5 neste caso aqui nesse exemplo, vou fazer as contas,
vou fazer o processamento neste retângulo que está aparecendo aqui e no final eu posso dar um retorno de um resultado,
esse retorno de resultado vai ser voltado lá de novo para a chamada, quem fez a chamada, na verdade a sua mãe no exemplo, então eu tinha identificado 4 componentes básicos lá da minha função: a chamada, os parâmetros, a ação e o retorno.
Vamos fazer a mesma coisa aqui com esse código que está aparecendo aqui em baixo, a minha chamada, ela não está em cima, a minha chamada aqui embaixo é ela que vai disparar a execução dessa função aqui de cima, no caso do DOM que a gente usou anteriormente a chamada era o onclick do botão, só que a gente pode chamar ele pulado de fora e a gente já vai ver como funciona isso.
Eu tenho também os parâmetros, parâmetro está aqui em cima, na verdade esse 5 aqui debaixo também é um parâmetro que a gente chama de parâmetro real ação(parâmetro real), aqui em cima a gente chama de parâmetro formal function ação(parâmetro formal), mas isso como o próprio nome sugere é só uma formalidade,
quando você for aprender isso em tecnologia de programação, você vai se aprofundar um pouco mais sobre isso a gente aqui está com curso básico.
A ação é essa daqui, é esse retângulo todo, tudo que pode ser feito durante a execução da sua função
E por fim você tem esse comando return que é usado no JavaScript que é o retorno de um resultado,
Vamos fazer um exemplo aqui, que esse está meio genérico, vou fazer um exemplo de uma funcionalidade bem simples que é verificar se o número é par ou ímpar, dá uma olhada aqui, eu criei uma function, o nome dessa function é parimp (par e ímpar) e ela recebe um parâmetro que é um número "n" ali representado nessa primeira linha, eu abro e fecho chaves e dentro dele eu vou verificar se esse n que ele recebeu como parâmetro é par ou ímpar, para verificar se o número é par ou ímpar é só eu verificar se ele é divisível por dois, a gente viu lá nas aulas de operadores,
Então o que eu vou fazer é o seguinte: dentro da function vou criar um if, se (n % 2 == 0),
se o n dividido por 2 for resto 0 é sinal que o n é par, então vai retornar 'par',
se não, isso é se não for divisível por 2 eu retorno 'ímpar', eu posso ter mais de um return dentro de function sem problemas nehum, o que eu preciso é que apenas um deles seja executado, como aqui está dentro de um if sem problema nenhum,
se eu deixar meu código assim ele não vai ser executado, eu posso executar o programa que ele não vai funcionar isso porque eu não tive uma coisa simples: a chamada
para fazer a chamada eu tenho que faze aqui, eu criei uma variável chamada res e chamei parimp(11)
isso é 11 é o meu parâmetro, vou pegar esse 11 e vou jogar lá pra cima no n
então o n está valendo 11, na próxima linha do if se (n % 2 == 0),
11 divido por 2 dá resultado 5 e resta 1
então o meu resto (que é a porcentagem) não é 0, é 1, então ele não vai fazer o return 'par',
ele vai vir pra baixo e vai fazer o return 'ímpar',
quando eu pegar esse
return 'ímpar', essa palavra ímpar vai vir pra dentro de res, se eu mandar mostrar o res na tela, ele vai mostrar a palavra ímpar,
dá um olhada nesse código aqui, dá uma analisada nele, vou tirar as linhas, análise eles e você vai ver como a coisa funciona.
Se por acaso ainda não entrou na sua cabeça, não tem problema, a gente já vai abrir o Visual Studio Code e colocar esse código para rodar
mas nesse código aqui a gente também consegue identificar os elementos que a gente fez lá na história da sua mãe querendo que você trouxesse leite, olha só a gente tem a chamada
que é essa chamada daqui que é a linha que vai fazer o disparo da ação
eu tenho o parâmetro que nesse caso aqui é o n,
eu tenho a minha ação que é esse if completo, esse código todo dentro da função
é a minha ação e eu tenho um retorno, só tive dois retornos, eu tenho duas linhas que têm o return, só que nesse caso somente uma delas que foi o ímpar que vai ser meu retorno, uma função em JavaScript
Chegamos aqui na última aula do seu curso de JavaScript com uma Pergunta:
"Quais são os meus próximos passos? Agora que eu aprendi isso eu já sei tudo de JavaScript? Eu preciso estudar mais alguma coisa? Qual é o meu próximo passo Guanabara?"
Mas antes de responder quais são os nossos Próximos passos deixa a gente tentar analisar o que já vimos até o momento. Nesse módulo básico de JavaScript a gente viu os seguintes assuntos: os fundamentos da linguagem, o que é o JavaScript, como ele surgiu, a evolução dele, o seu paradigma de linguagem client e server, depois a envolução dele com Node.js para conseguir alcançar outros níveis, conquistar os servidores, então hoje você consegue rodar JavaScript no cliente e também no servidor.
Nós usamos Node.js para rodar de forma bem simples nosso cliente, mas o Node.js tem muito mais potencial.
A gente trabalhou os conceitos fundamentais de todas as linguagens de programação como Variáveis, tipos de dados, como colocar esse dados dentro de uma variável, como JavaScript e trata os tipos primitivos.
A gente viu, além de valores e variáveis, como tratar esses valores com operações. Vimos os operadores aritméticos, operadores lógicos, operadores relacionais, nós fizemos bastante exercício com isso, exercícios práticos e propostos.
A gente tratou as condições, nós vimos o if simple, o if composto e if alinhado, vimos também switch.
A gente tratou as repetições, vimos while, do...while, for, fizemos bastante exercício também com isso.
E no último módulo a gente tratou os arrays, que são as variáveis compostas, mostrei pra você que não é nehum bicho de sete cabeças.
E a gente finalizou agora, nas últimas aulas, com as funções. falei que as funções são muito importante pro JavaScript, muito importantes mesmo, JavaScript é uma linguagem multiparadigma e ela funciona também com paradigma funcional, então funçõe são muito importantes pro JavaScript.
E tudos isso que vimos aqui do lado, a gente viu no modo tradicional, utilizando o Node.js rodando da nossa própria máquina, vimos também utilizando rodando diretamente no navegador utilizando a engine V8 do Google e também fizemos isso rodando no nosso cliente utilizando o Document Object Model, que é o DOM, e quando pegamos os dados do formulário, os componetes Visuais da tela, alterou, manipulou e fez o JavaScript falar com HTML e CSS.
Olha a qunatidade de informações que a gente passou pra você, e para quem é iniciante e olha essa quantidade de coisa pode estar pensado:"Mas isso é tudo de JavaScript, não preciso continuar a estudar." e Eu tenho uma péssima notícia para quem pensa assim, JavaScript é uma linguagem gigante, tem muitas funcionalidades, tem muitas tecnologias envolvidas e você não vai para de estudar por aqui, o seu curso básico se encerra neste vídeos, mas os seus estudos em JavaScript não podem se encerrar.
E é por isso que eu vim aqui, no início desse vídeo, te responder uma pergunta que pode surgir na sua cabeça: "Quais são os meus próximos passos? Me dá um norte Guanabara. Depois que eu estudei isso tudo, que eu fiz esse curso, pratiquei tudo"
Aquelas 4 pergutas que eu fiz no início do video, depois que você terminar isso você precisa fazer o dever de casa e continuar estudando.
Primeira dica que eu te dou, antes de escrever qualquer coisa aqui de JavaScript, faça o curos de HTML 5 e CSS, ele é um estudo de caso grande, ele faz um site, é bem simples, é mais tranquilo até que JavaScript, inclusive, lá dentro tem algumas aulas de JavaScript também,
Em seguida você vai ver aqui, estude mais sobre funções, os seus estudos de funções não acabaram aqui nesse curso, a gente viu o básico de função, você tem outros conceitos a estudar, você pode aprender coisas do tipo,
Estudar um pouco mais sobre JavaScript funcional, Conhecer esses fundamentos é muito importante, mas eles não são fundamentos básicos, eles já são fundamentos um pouco mais avançados e não caberiam neese curso.
Outra coisa muito importante de você estudar objetos, o JavaScript além de ser uma linguagem funcional, ela é também uma linguagem orientado a objeto, você consegue declarar objetos, utilizar objetos, e esse conceito também é muito importante para você
a gente tem aqui no Curso em vídeo, também, um curso de orientação a objeto, ele só não e em JavaScript, ele é linguagem java, que você sabe que não é a mesma coisa que JavaScript. Então, esse curso de orientação a objeto, aqui do Curos em Vídeo, ele é em linguagem java e liguagem PHP, mas ele é bom pra você ver os fundamentos da liguagem também, JavaScript também é uma linguagem orientada a o bjetos.
Agora que você já aprendeu também funções e vai continuar estudando funções, dá uma estudada também sobre modularização, para você modularizar o seu código, deixar código separado em arquivos separados, reutilizar códigos utilizando JavaScript, isso é um conceito muito importante também e deve estar na sua lista de próximos passos de JavaScript.
Outra coisa muito importante, é uma dica pessoal, estude expressões regulares, o JavaScript também tem compatibilidade com expressões regulares, dá uma estudada nisso, para validação de dados também é uma maravilha, economiza muito tempo e código.
Você também pode dar uma estudada em JSON, JSON é meio que estrutura de objeto que você consegue transmitir dados, salvar dados localmente, dá uma estudada também em JSON.
Como eu citei lá no início do curso, quando a gente falou do Google imagens, que você vai roalando e ele vai carregando os conteúdos para frente, não tem mais o avançar, passar página, você vai rolando quando ele chega no final da página carrega mais coisa, Facebook, O Google imagens é assim, e o Youtube, isso tudo é graça a um tecnologia, que usa JavaScript que é o AJAX
E outra coisa para se aprender é além de você manter essas funcionalidades do lado do cliente, que a gente aprendeu nesse curso inteiro, você dá uma aprendida em Node.js, para você conseguir fazer os seus scripts rodarem no servidor, isso dá um potencial muito grande para linguagem e isso sem fala em um monte de biblioteca de framework, que a gente falou lá no início do curso, aprender
Enfim, tem um monte de coisa para você aprender, então seus estudos em JavaScript não param por aqui,
a gente pegou sua mão lá no início do iniciante mesmo e te trouxe até aqui e agora eu estou te deixando com essa lista de dever de casa para você conseguir aprender
e para incentivar o seu estudo eu não vou para por aqui vou te dar uma lambuja, vou tirar desses itens aqui, vou te dar a introdução de um muito importante, funções a gente já falou o básico, vamos pegar o segundo dessa lista, vou te mostrar o básico, os fundamentos do que é um objetos e do que ele serve para o nosso dia dia, em que ele é últi.
para dar uma relembrada no que a gente acabou de ver algumas aulas atrás, a declaração de arrays, vou dar uma revisada rápida para você entedender o objetivo de objetos numa linguagem de programação, um dos objetivos na minha opinião o principal deles.
Quando a gente declara um array no JavaScript é só você colocar qualquer valor entre colchetes e atribuir á uma variável, que essa variável vira um vetor, nós vimos isso durante aula, só dando uma recordada, quando eu faço essa declaração ele cria uma variável num, só que não é uma variável pequena, é uma variável com mais espaço, divido essa variável em três pedaços e eu faço a divisão da variável na memória em três pedaços, cada pedaço recebe um índice ou chave e isso é fixo, o primeiro elemento é índice 0 e assim sucessivamente até o último.
quando eu coloco valores 5, 8, 4, por exemplo, esses valores vão pra dentro do vetor e ponto. Uma coisa que eu não citei na aula de arrays é que eu não preciso colocar todos os números como eu coloquei aqui embaixo, se o primeiro item tem número o outro tem que ter um numero também, muitas linguagens de programação são assim, JavaScript não, se você quiser colocar o nome na primeira casa, o endereço na segunda casa, a idade do cara na terceira, não tem problema, o array no JavaScript, ele é heterogêneo, ele aceita valores de tipos diferentes, você pode colocar uma string no primeiro, um número na segunda, um valor lógico na terceira e assim sucessivamente.
O grande problema do array, das variáveis compostas, é que o índice fica fixo, s eeu colocar o nome na primeira casa eu não consigo chamar aquela parte de baixo de nome, a primeira casa é sempre 0, a segunda é sempre 1, então quando você usa array, ele facilita muito a sua vida, porque reduz o seu código, mas acaba que com o tempo você acaba ficando limitado na primeira casa, na segunda casa e terceira casa e índices numéricos acabam atrapalhando quando você quer fazer uma coisa mais avançada. Pra coisa simples o array serve muito bem, para coisas mais avançadas o array começa a ficar um pouco limitado e é por isso que eu coloquei isso aqui como o próximo passo, e aí vem passo da gente começar a enteder o que é um objeto. Para declarar um objeto em JavaScript, a delcaração é muito simples, array, como você vê aqui em cima declara como colchetes,
se você quiser declarar um objeto é só você utilizar chaves, por exemplo, acabei de criar uma variável chamada amigo e eu atribui ele uma chave como se fosse um bloco de código, mas não é um bloco de código.
quando eu faço essa declaração ele vai criar uma variável grande exatamente como ela fez com o num , eu posso da mesma maneira que fiz com array divide em partes, por exemplo, vou dividir em quatro pedaços, quando eu divido em quatro pedaços ele pega variável amigo, que está lá embaixo da tela, e divide em quatro partes, exatamente como acabou de acontecer aqui, e a grande vatagem desse tipo de estrutura, a coisa bem básica do objeto, que diferencia ele dos arrays, é que eu consigo fazer isso aqui, dá uma olhada.
Eu coloquei nome:'José', o que será que vai acontecer quando eu faço essa declaração? È simples, a primeira casa se chama nome, ela não vai se chamar 0, ela não vai ter uma chave 0 exatamente como está no arry, ela vai ter um nome mesmo, ela vai ter um identificador literal, ficar mais fácil de visualizar.
Dentro do objeto, dentro da primeira casa do objeto, eu vou ter José,
em seguida eu vou colocar sexo é Masculino, o que eu vai acontecer? Eu vou criar um campo, na verdade chama isso de atributo do objeto, um atributo sexo com valor masculino.
Outra coisa que eu posso colocar, o peso de josé, o peso é 85.4 ele vai criar um atributo peso e vai colocar o valor lá dentro. Então, até o momento, o objeto que está lá embaixo já é mais evoluído, é mais detalhado, tem mais possibilidades do que o array que está aqui em cima.
E em momento nenhum eu estou desmerecendo o array, por favor, array é uma coisa muito importante, o que estou te mostrando aqui é um próximo passo, quando você precisar fazer alguma coisa um pouco mais evoluída, você vai ter que partir para o objeto porque ele é melhor, inclusive tem uma funcionalidade muito melhor que o array não tem.
Uma coisa que eu posso fazer, eu deixei reservado para o último espaço, eu posso colocar assim: engordar com parãmetro p, abro e fecho chaves, na verdade, o que estou fazendo aqui no último elemento é criar um item engordar que tem uma função dentro.
Então os objetos são variáveis, variável guarda valores, só que além de guarda valores, que são os atributos, objetod podem guardar funcionalidades, que é o que a gente chama de métodos.
Deu para ver a diferença aqui, o que eu tenho aqui em primeiro é um array, é um vetor o que eu tenho aqui embaixo da tela é o objeto e o JavaScript tem total compatibilidade com objetos.