Aprendendo a ser um Desenvolvedor

É uma linguagem case sensitivy ( Maisculas e minusculas importam na hora de escrever o código.

Como fazer um comentário dentro de um arquiro de Java Script ?Temos 2 modos de fazer isso colocando duas barras (//----- ) os traçõs são para simbolizar os comentários.colocando /*----- */ os traçõs são para simbolizar os comentários.//------ serve para colocar um comentário em uma unica linha. /*----- */ - serve para colocar um comentário em bloco.DEPURAÇÃO = É VER COMO MEU PROGRAMA ESTÁ FUNCIONANDO.para abrir o terminal dentro do vscode podemos usar o atalho de teclado CONTROL + SHIFT + (') CRASE.dentro do terminal com o NODE aberto no terminal para sair do NODE E VOLTAR para o terminal usamos o comando .exite para sair de dentro do terminal usar o comando exit

Aula 7 – Operadores (Parte1)Segue o Link do Video:https://youtu.be/hZG9ODUdxHoFamilia de OperadoresaritméticosatribuiçãorelacionaislógicosternárioNessa Aula parte 1 vamos focar nos operadores aritméticos e operadores de atribuição.

São todos os operadores aritméticos:Todos esses são operadres Binários significa que precisa de 02 operando+ -*/%**Todos os operadores precisão de operando que são aqueles que vão fazer os operadores Funcionarem.(Operando) são os numeros antes dos operadores)Exemplo 5 + 2 = 75 - 2 = 35 * 2 = 105 / 2 = 55 % 2 = 1 // resto da divisão.5 ** 2 = 25 // potência. Quando uma expresão tiver uma soma ( + ) e uma divisão( / ) na mesma expresão o calculo que é feito primeiro é o calculo da divisão ( / )Exemplo: fazer a conta de divisãoFazer a conta de soma 5 + 3 / 2 = 6.5executando no node.js> 5 +27> 9 % 21> 9 / 24.5> 5 + 3 / 26.5>Para fazer o calculo executando a soma primeiro tem que colocar os valores de soma em parentesesExemplo:Exemplo: Fazer a conta de soma fazer a conta de divisão (5 + 3) / 2 = 4

Ordem de Precedência dos Operadores. ( ) é calculado os paretenses ** é calculado as potências (*)multiplicação (/) divisão (%) resto da divisão ( + ) somas ( - ) subtrações.obs: se tiver os 3 no mesmo calculo é feito na sequência da Esquerda para a Direita. a ser calculado Exemplos : var a = 5 + 3 Resultado -- 8var b = a % 5 Resultado -- 3var c = 5 * b ** 2 Resultado -- 45var d = 10 - a / 2 Resultado -- 6var e = 6 * 2 / d Resultado -- 2var f = b % e + 4 / e Resultado -- 3 a var f foi calculado primeiro o calculo da esquerda depois o calculo da direita.Exemplo em Nodejs> var a = 5 + 3 undefined > a 8 > var b = a % 5 undefined > b 3 > var c = 5 * b ** 2 undefined > c 45 > var d = 10 - a / 2 undefined > d 6 > var e = 6 * 2 / d undefined > e 2 > var f = b % e + 4 / e undefined > f 3

Auto atribuição é atribuir um valor novo a uma variavél atraves de uma atribuição Exemplo: var n = 3 > 3 n = n + 4 > 7 n = n - 5 > 2 n = n * 4 > 8 n = n / 2 > 4 n = n ** 2 > 16 n = n % 5 > 1 Um exemplo de simplicação desse soma é Exemplo n = n + 4 pode ser mudada para n += 4 só pode ser feito desse jeito de o n receber o valor dele mesmo. Segue exemplo de simplificaçãon += 4 n-= 5 n *= 4 n /= 2 n **= 2 n %= 5 Vamos fazer um exemplo no Nodejs > var num = 8 undefined > num 8 > num += 2 10 > num 10 > num %= 2 0 > num = 3 3 > num **= 2 9 >

Operadores de Incremento: vamos rever algumas operações antes disso var x = 5 > 5 x = x + 1 > 6 x = x - 1 > 5 Simplificando x += 1 x -=1 Incremento: x =+ 1 se transforma em : x ++ x = x - 1 se Trasnforma em : x-- Exemplos em Nodejs> var n = 10 undefined > n++ 10 > n 11 > n-- 11 > n 10 > n 10 Pré - Enquemento ( significa que mudamos a ordem colocando os atributos ++ ou - - antes da variável > ++n 11 > --n 10 >

Aula 8 – Operadores (Parte 2)Você já conhece os operadores relacionais e os operadores lógicos em JavaScript? Sabe a diferença entre usar = ou == ou === em JavaScript? Conhece a ordem de precedência dos operadores do JavaScript? Sabe como usar o operador ternário para atribuições em JavaScript?Segue o Link do video:https://youtu.be/BP63NhITvao

Os Operadores relacionas do JavaScript são os operadores relacionais na grande maioria da programaçãosão ele : > (maior que)< (menor que)>= ( maior igual)<= ( menor igual) == ( igual)!= ( diferente)5 > 2 Resultado Verdadeiro (true)7 < 4 Resultado Falso (false) 8 >= 8 Resultado Verdadeiro (true)9 <= 7 Resultado Falso (false)5 == 5 Resultado Verdadeiro (true)4 != 4 Resultado Falso (false)Segue Exemplos feitos no NodeJs.> 5 > 2 true > 8 < 4 false > var a = 8 undefined > var b = 15 undefined > a > b false > a <= b - 10 false > a == b false > a != b true > Exemplos de Reais  preço >= 200,50 // o preço é maior oi igual a 200.50 ? idade < 18 // a idade é menor do que 18curso == 'JavaScript' // o curso é JavaScript ?n1 != n2 // o primeiro numero é diferente do segundo

Exemplo :vamos as seguintes expresões: 5 == 5 resultado true 5 == '5` resultado true ( o sinal de igualdade (==) ele não testa o tipo sendo que o valor do inicio é um valor inteiro e o valor apos == é um valor de string. O que o javaScript faz é analisar se o 1° (numero 5) tem o mesmo valor que o 2° (numero 5 ). são valores diferentes porem eles tem a mesma grandeza. valor de Indentidade também é conhecido como operador de igualdade restrita. Exemplo: 5 === '5` resultado (false)=== ( é chamado como identico)Nesse caso o JavaScript está testando se os dois valores sã valores identicos ( é o mesmo valor e do mesmo tipo)5 === 5 resultado (true)Fazendo alguns exemplos no NodeJs > 5 == '5' true > > var x = 5 undefined > x 5 > var y = '5' undefined > y '5' > typeof x 'number' > typeof y 'string' > x == y true > x === y false > x != y false Essa ultima expresão (!==) é chamada de desigualrestrito (ela verifica se são de tipos diferentes. > x !== y true >

Operadores Lógicos ! quer dizer (negação)&& quer dizer (conjunção) chamamos de (e) || quer dizer (disjunção) chamamos de (ou)Uma Curiosidade. (||) é chamado de pipe ! (o não) ele é tratado como um operador unário isso significa que ele so tem um operando. ! pode ter (true) ou (false) vamos agora para o operador de conjunção && ele é um operador binário signifca que pode ter 02 valores logicos um de cada lado true && true resultado truetrue && false resultado falsefalse && true resultado falsefalse && false resultado falsenessa condição so é verdadeiro se as 02 forem verdadeiras || ele também é um operador binário signifca que pode ter 02 valores logicos um de cada lado true || true resultado truetrue || false resultado truefalse || true resultado truefalse || false resultado falseBasta que apenas um deles seja verdadeiro que que eles sejam considerados como verdadeiro Vamos fazer alguns exercicios no NodeJs> var a = 5 undefined > var b = 8 undefined > true && false false > true && true true > false || false false > true || false true Quando tivermos :Operadores aritmeticosOperadores relacionais Operadores logicos Na mesma questãoele ira seguir a seguinte seguencia ira fazer o calculo de todos os operadores aritméticosira fazer o calculo de todos os operadores relacionas ira fazer os operadores lógicos > a > b && b % 2 == 0 false > Outro exemplo Nesse exemplo temos operadorres Aritméticos, relacionais e logicos na mesma expressão. é feito nessa ordem todos os opeeradores aritméticos b % 2 == 0 (seria a variaverl b que é o numero 8 o resto da sua divisão que seria o resultado 0 ai ele pergunta 0 ==0 (true)agora fazemos o relacional a > b (seria a variável a que é 5 e avariavel b que é 8 o resultado é (false)agora faremos o calculo logico que é (true) && (false) = false> a <= b || b / 2 == 2 true > Vamos fazer os operadores aritémticosb / 2 ( 8/2 == 2 ) falsea <=b (5 <=8) = true false || (ou) veradeiro Resultado = true e se na mesma expresão eu tiver um && (e) um não (!) e um ou (||)a seguência de calculos é : ! quer dizer (negação)&& quer dizer (conjunção) chamamos de (e) || quer dizer (disjunção) chamamos de (ou)

Operadores Aritméticos ( ) ** / ...Operadores Relacionais > < >= ... Não tendo oredem de precedência sendo feito o que aparecer primeiro sendo da esquerda para a direita.Operradores Lógicos que tem uma ordem de precedência !&&||

Operadores ternários são operadores com o simbolo ? :Ele se chamo ternário por ter 03 partes ele junta 03 operanos teste ? true : false Vamos ver um exemplo prático :média >=7 ? "aprovado" : "reprovado"Vamos fazer um teste no node.jsPS C:\Users\olive> nodeWelcome to Node.js v18.12.1.Type ".help" for more information.> var média = 5.5undefined> média > 7false> média > 7 ?' APROVADO' : 'REPROVADO''REPROVADO'> média +=38.5> média > 7 ? 'APROVADO' : 'REPROVADO''APROVADO'>Outro Exemplo:> var x = 8undefined> var res = x % 2 == 0 ? 5: 9Aqui nessa expresão estamos perguntado se ? a variavel res vai receber ou 5 ou 9 (vai depender se x % 2 for igual a 0 )vamos fazer os operadores aritméticos ( x % 2 = 8 resto de divisão por 2) = 0 0 == 0 (true) se for veradade é atribuido a variavel res o numero 5se o Resultado fosse false seria atribuito a var res o numero 9undefined> res5>> var idade = 19undefined> var r = idade >= 18 ? 'MAIOR' : 'MENOR'undefined> r'MAIOR'>Nesse outro exemplo defenimos o valor da variável r = 19E fizemos a seguinte expresão :> var r = idade >= 18 ? 'MAIOR' : 'MENOR'Significa que se a idade for maior ou igual que 18 irá aparecer MAIOR e se a idade fosse menor que 18 iria aparecer MENOR

Modulo DOMSignificado = Document Object Model - É a vertente web do JavaScript no qual a linguagem foi criada é uma poderosa ferramente que está dentro do seu navegador, um conjunto de objetos do JavaScript no tratamento de Componentes Visuais. (Para criarmos aplicações mais bonitas)Além de aprender o modulo DOM iremos aprender a fazer uma Arvore Dom so nossso Site.além de aprender a criar iremos aprender a manipular a estrutura de qualquer site da web.

Seguencias :Aqui foi reforçado que os códigos tem que ser escritos na seguencia para que eles possam ser executados.Condições:São executados comandos até chegamos em alguma condição, isso significa que agora vai depender da condição, é ela que vai determinar o que irá acontecer com o código. Esse desvio é chamado de desvio condicional, ele faz parte dos fundamentos da programação.Estrutura if (condição) if (condição - quer dizer si) {----------------------------------------} esle (quer dizer se não) {-------------------------}if = quer dizer si ( Exemplo: Si a condição for verdadeira (true) execute uma açãoelse = quer dizer se não ( Se essa condição for falsa (false) execute outra condição.

Condição Simples = é a condição que só tem um tipo de Bloco {-----}. E só temos o bloco do (true) verdadeiro.Condição Simplesif (condição) {true}Nesse condição se ela for falsa (false) nada vai acontecer.

console.log = codigo usado para escrever na tela em node.jsDentro do Visual studio code vamos criar um arquivo do tipo(.js) e iremos executar ele com a ajuda do plugin Node.js.Exec. Para escrever na tela no Node.js temos que usar esse comando o ( console.log ) o document.write que estavamos usando no JavaScript ele não é reconhecido. Exemplo:console.log('O console funcionou corretamente !');Apos digitar apertamos a tecla F8 do nosso teclado para verificar se o comando é executado.E exibo abaixo em outra aba como se fosse a aba de terminal.Info: Start process (22:07:00)O console funcionou corretamente !Info: End process (22:07:00)

Vamos criar uma variável - velnNesse exercício vamos verificar a velocidade de um veiculo e se caso ele passar acima da velocidade Estabelecida ele será avisado que foi multado.var vel = 78;console.log(`A Velocidade do seu carro é ${vel} Km/h`);if (vel > 60) { // Condição Simples  console.log("Vocé ultrapasou a velocidade permitida. MULTADO !");}console.log("Dirija sempre usando o cinto de segurança!");

Condição Composta = é aonde existe os dois tipos de condição (true) verdadeiro e (false) - falso. if (condição) {true} else {false}if = si a condição.true = for verdadeira false = se ela for falsa nesse tipo de estrutura :se for verdadeiro (true) acontece uma função.se for falsa (false) acontece outro tipo de função.

Criamos dentro da pasta 11 o exerccicío 009.js para fazer uma exemplo de um exercício de condição Composta.Fizemos esse exercicío dentro do visual code usando o plugins node.jsSegue exercicício:Nesse caso é verificado o Pais que a pessoa mora e exibido na tela uma mensagem informando:se ela for do Brasil = Vocé é Brasileirose não:se ela for de outro Pais = Vocé é Estrangeiro.var pais = "EUA"console.log(`Vivendo em pais ${pais}`)if (pais == 'Brasil' ) {  console.log('Vocé é Brasileiro')}else {  console.log('Vocé é Estrangeiro')

Nesse Exercício estamos agora criando um exercicício de numero ex010.html (vamos criar um exercicío agora em forma de site).O intuito desse exercicío é igual ao exercicío de numero ex008.js que foi feito direto em JavaScript, porém agora estamos escrevendo ele em HTML para melhor visualização em uma página de site.Segue Exercício: HTML <title>DETRAN</title></head><body>  <h1>Sistemas de Multas</h1>  Velocidade do carro : <input type="number" name="txtvel" id="txtvel"> Km/h   <input type="button" value="Verificar" onclick="calcular()">  <div id="res">Resultado  </div>JavaScript <script>function calcular(){// (foi criado a função calcular para criar vinculo com o onclick do input Type)  var txtv = window.document.querySelector('input#txtvel')// (foi criado a variável txtv para a conexão com a caixa de texto input Number que foi dado o id de ( 'input#txtvel' )  var res = window.document.querySelector('div#res')// (foi criado a variável res para pegar o valor da Div que sera o resultadovar vel = Number(txtv.value)// (foi criado a variável vel para para pegar o valor que foi digitado na caixa de Texto e transforma-lo em numero.res.innerHTML = `Sua Velocidade atual é de <strong>${vel} Km/h</strong>  `// Esse comando serve para escrever dentro da div res o valor informado na caixa de texto de velocidade.innerHTML = ESCREVE NA TELA if (vel > 60) { // Aqui estvamos colocando a condição de se a velocidade for maior que 60 ( vel > 60)  res.innerHTML += '<p> Vocé esta <strong>Multado</strong> por excesso de Velocidade</p>'  // foi colocado o vaor de += para que ele não apague o paragráfo anterior// Estamos escrevendo na tela que se a velocidade for maior que 60 0 ( vel > 60) foi Multado por excesso de velocidade.}res.innerHTML += `<p>Diriga sempre com cinto de segurança!</p>`}// Estamos escrevendo na tela para Sempre usar o cinto de segurança.   </script></body></html>

Aula 12 Condições ( Parte 2 ) - Condições AninhadasCondições Aninhadas = Seria uma condição composta e colocar outras condições dentro delas. (seria uma condição dentro da outra) Não existe uma regra de aninhamento.IMPORTANTE " PARA QUE O CODIGO POSSA PROSSEGUIR A CONDIÇÃO 1 (condic1) TEM QUE SER FALSA PARA PROSSEGUIR.SE A CONDIÇÃO 1 FOR FALSA E A CONDIÇÃO 2 FOR FALSA ELE FAZ O BLOCO 3if ( condic1) {---------------------------}else {if (condc2) {--------}else{----------}

Condições Aninhadas = Seria uma condição composta e colocar outras condições dentro delas. (seria uma condição dentro da outra) Não existe uma regra de aninhamento.IMPORTANTE " PARA QUE O CODIGO POSSA PROSSEGUIR A CONDIÇÃO 1 (condic1) TEM QUE SER FALSA PARA PROSSEGUIR.SE A CONDIÇÃO 1 FOR FALSA E A CONDIÇÃO 2 FOR FALSA ELE FAZ O BLOCO 3if ( condic1) {---------------------------}else {if (condc2) {--------}else{----------}

Vamos criar o ex011.js é fazer um exercício dentro do visual code utilizando o plugins do node.js.Com esse Exercicío vamos fazer a Verificação da idade de uma pessoa e informar-lo o que diz respeito a Votação: Não Vota.Voto Opcional.Voto obrigatório. Sendo que as condições são : < 16 = Não Vota.< 18 e com idade maior que 65 anos = Voto Opcional> 18 até 64 anos de idade = Voto obrigatório.var idade = 15 // Estamos criando uma variável idade e dando a ela um valor = console.log(`Vocé tem ${idade} anos.`) // Estamos escrevendo na tela a idade dessa pessoa.if (idade < 16) // Estamos perguntando a variável idade sé o valor é menor que 16 anos {console.log('Não Vota')// Se o valor for falso (true) menor que 16 anos o programa ja informa que Não vota } else if (idade < 18 || idade > 65) // Se o valor for menor que 18 e maior que 65 anos {console.log ('Voto Opicional')  // Escreve na tela 'Voto Opicional' } else// Se for maior de 18 até a idade de 65{ console.log('Voto obrigatório')// Escreve na tela 'Voto Obrigatório'    } 

O objertivo desse exercício é criar uma variável hora aonde digitamos a hora e o progrma nos informa se é :Bom dia Boa TardeBoa Noite Foi criao a variável hora para ser digitado um valor de hora ( Nesse caso apenas os 02 digitos são aceitos exemplo (12).Criamos uma estrutura de condição aonde o valor é digitado e o programa nos informa de acordo com o valor de hora digitado (Bom dia, Boa Tarde, Boa Noite).Segue Exercício abaixo:var hora = 12 // Acima foi criado a variável para ser digitado o valor da horaconsole.log(`Agora são exatamente ${hora} horas`)// Acima é escrito na tela o valor digitado da hora if ( hora < 12 ) {  // Aqui acima foi criado uma condição aonde se a hora for um valor menor que 12 horas  console.log('Bom dia!')   // Aqui é escrito na tela se a condição acima menor que 12 horas for digitada. É escrito "Bom dia!" } else if (hora <=18) {  // Aqui foi criada uma condição para definir se hora for igual ou menor que 18 horas.      console.log('Boa Tarde') }      // Aqui é escrito na tela se a condição de hora for menor ou igual a 18 "Boa Tarde!"        else {          console.log('Boa Noite!')        // Aqui é para Escrever na Tela se hora for maior que 18 horas "Boa Noite!"        }     

Condições MultiplasServe para valores Fixos, ele é muito util no mundo da programação quando queremos trabalhar valores fixos. Ele tem a possibilidade de valores fixos. Vamos representar essa extrutua da seguinte maneira. comando switch (expressão) {----------}dentro do Bloco vamos colocar os valores dentro dele. Exemplo IMPORTANTE" ELE SÓ FUNCIONA COM NUEROS INTEIROS E COM CARACTÉRES"{ case valor 1:case valor 2: case valor 3: defaut; = (Se nenhum dos Valores acima forém digitados é executado o que for digitado dentro do defaut {------------}}"IMPORTANTE - DENTRO DE CADA BLOCO DA ESTRUTURA SWITCH É PRECISO COLOCAR UM COMANDO (break)" Esse comando break é obritório ter dentro de cada bloco da estrutura switch

Vamos solicitar nesse exercício que seja informado o dia da semana de acordo com o dia que está no nosso Computador.Vamos utilizar a forma que estamos aprendendo o switchOs case que são os valores que serão testados dentro do switch eles só podem ser :Numeros Inteiros.Caractéres com strings Exemplo '0'Segue Exemplo: var agora = new Date();// Nessa linha acima estamos criando a variável agora e solicitando a data atula que nesta  em nosso Computador.var diaSem = agora.getDay();// Acima estamos criando outra variavel que será pego no nosso computador o dia da Semana./* no JavaScript os dias da Semana são: 0 == Domingo1 == Segunda2 == Terça3 == Quarta4 == Quinta5 == Sexta6 == Sábado*///console.log(diaSem);switch (diaSem) {  case 0:    console.log("Domingo");    break;  case 1:    console.log("Segunda");    break;  case 2:    console.log("Terça");    break;  case 3:    console.log("Quarta");    break;  case 4:    console.log("Quinta");    break;  case 5:    console.log("Sexta");    break;  case 6:    console.log("Sábado");    break;    default:     console.log('[ERRO] - Dia Inválido!')    break}

Aula 12 (Exercicio Parte 1)Nessa Aula criamos uma pasta ex012 para podermos criar a nossa base dos nossos proximos exercícios.Dentro dessa pasta foi criado:Index.htmlestilo.cssscript.jsAqui criamos o nosso arquivo base para as nossas proximas Aulas.Segue a base em Html:<!DOCTYPE html><html lang="pt-br"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Modelo de exercício</title>  <link rel="stylesheet" href="estilo/estilo.css"></head><body>  <header>  <h1>Titulo</h1>  </header>  <section>    <p>testando</p><div></div><div></div>  </section>  <footer><p>Replicado por <strong><a href="https://www.linkedin.com/in/oliveira-marcos-emmanuel" target="_blank">Emmanuel Marcos de Oliveira</a></strong></p><p>&copy; <a href="https://estudonauta.com" target="_blank">Estudonauta</a></p>  </footer><script src="script.js"></script></body></html>Segue a base de CSS:body {background-color: rgba(57, 57, 245, 0.733);font-family: Arial, Helvetica, sans-serif;font-size: 1rem;} header {  color: #ffff;text-align: center;}section {  background-color: #f7f7f7;  border-radius: 10px;  padding: 15px;  width: 500px;  margin: auto;  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.300);  }footer {    color: #ffff; text-align: center; font-style: italic;}footer a {  text-decoration: none;  color: #fff } footer a:hover{  text-decoration: underline;   }Base de Script encontra-se em branco por enquanto!

Aula 12  (Exercicio Parte 2)Nesse Aula foi criado a pasta ex014 dentro da pasta da aula 12.Nesse excercício fizemos um site aonde ele se mostra de acordo com a hora do dia um fotoum backgroundPara isso foi criado uma função que carrega esses itesn de acordo com a hora de dia que esta no nosso computador.Segue base html<!DOCTYPE html><html lang="pt-br"><head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Modelo de exercício</title>  <link rel="stylesheet" href="estilo.css"></head><body onload="carregar()">  <header>    <h1>Hora do dia</h1>  </header>  <section>    <p></p>    <div id="msg">Aqui vai aparecer a mensagem...    </div>    <div id="foto">      <img id="imagem" src="fotobom-dia.png" alt="Foto na Floresta com o por do Sol">    </div>  </section>  <footer>    <p>Replicado por <strong><a href="https://www.linkedin.com/in/oliveira-marcos-emmanuel" target="_blank">Emmanuel Marcos de Oliveira</a></strong></p>    <p>&copy; <a href="https://estudonauta.com" target="_blank">Estudonauta</a></p>  </footer>  <script src="script.js"></script></body></html>Segue Base CSSbody {background-color: rgba(57, 57, 245, 0.733);font-family: Arial, Helvetica, sans-serif;font-size: 1rem;} header {  color: #ffff;text-align: center;}section {  background-color: #ebe8e88a;  font-size: x-large;  border-radius: 10px;  padding: 15px;  width: 500px;  margin: auto;  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.300);  }div#msg {  margin-bottom: 20px;}footer {    color: #ffff; text-align: center; font-style: italic;}footer a {  text-decoration: none;  color: #fff } footer a:hover{  text-decoration: underline;   }   div {    text-align: center;   } Segue Base JavaScriptfunction carregar() {  var msg = window.document.getElementById('msg');  var img = window.document.getElementById("imagem");  var data = new Date();  var hora = data.getHours()    msg.innerHTML = `Agora são exatamente ${hora} horas`;  if (hora >= 0 && hora < 12){    //Bom dia !    img.src = 'fotobom-dia.png'    document.body.style.background = '#d4ab77'    foto.innerHTML += '<p>Bom Dia!</p>'      } else if (hora >= 12 && hora <= 18) {    //Boa tarde!    img.src = 'fotoboa-tarde.png'    document.body.style.background = '#205974'    foto.innerHTML += '<p>Boa tarde!</p>'         } else {        img.src = 'fotoboa-noite.png'        document.body.style.background = '#16303d'    // Boa Noite!    foto.innerHTML += '<p>Boa Noite!</p>'      }

Nesse modulo veremos todas as repetições da estrutura em javaScript.Estrutura de repetição com teste lógico no inicio (while)Estruturas de Repetição com teste no Final (dowile)Estruturas de Repetição com controle que é o (for)

ESTRUTURA while ( ENQUANTO) Exemplo de uma expressão sem while:function comerpizza( ){comerfatia( )comerfatia( )comerfatia( )comerfatia( )comerfatia( )comerfatia( )comerfatia( )comerfatia( )}A tarefá e partir de um ponto A e ir até um ponto BA Estrutura de controle mais simple de todas é a sequências.Quano existir desvios ou possibilidade é chamdo de condiçõesQuando testamos uma expressão se ele for verdadeiro ou falso se a condição for verdadeira ele não ira para a proxima estapa ela fará um loop e voltar isso é chamado de laço (enquanto a condição for verdadeira ele,continue fazendo o loop e voltando para o inicio).A partir do momento em que a condição for falsa o laço é quebrando e é seguido o fluxo natural. Como escrevemos isso em JavaScript ?"Enquanto uma coisa for verdade"em inglês essa palavra se chama while (condição)Exemplo de uma estrutura com while:(Estrutura de repetição com teste lógico no inicio). function comerpizza() { while (temfatia()){ comerFatia() } } Vamos ver agora o outro tipo de estrutura de repetição ( aonde primeiro nos executamos o bloco e depois fazemos o teste).Isso é uma Estrutura de repetição com teste lógico no finaldo = "faça" do { } while (condição)

Iremos ver nessa Aula Estrutura de Repetição com variável de controle.Basicamente nessa Estrutura são feitas 03 coisas:InicializaçãoTeste logicoEncremento Na primeira passagem ele faz a inicalização e o teste logico.Sendo o teste logico = verdadeiro (true)ele ira executar o bloco, sendo que esse bloco poderá ter vários comandos.agora ele ira fazer o loop (como nas estruturas while e do while) e também ele irá fazer o encremento.o teste lógico será feito mais uma vez e a cada vez ele ira fazer um encremento.Quando o teste logico ficar falso (false) ele seguira o caminho de enceramento.Essa estrutura em Javascript ficara:for (inicio; teste; incr) { } Iremos ver um exemplo com um código usando a estrutura while.var c=1 while (c <= 10 ){ c++ } Iremos ver um exemplo desse código usando a estrutura forfor (var c=1; c <=10; c++) { Iremos agora fazer um teste prático.

Aqui nesse Aula foi criando 02 pastas dentro da Aula 14 pasta de numero ex016 e ex017 para a prática dos exercicios de contar numeros e da tábuada confome apresentado no video;

"IMPORTANTE" - Para cirar uma variável podemos usar os comandos:varletExemplos:let ini = document.getElementById('txti');let fim = document.getElementById('txtf');let passo = document.getElementById('txtp');Obs: Dentro dos parenteses podem ser usados aspas duplas ou simples.REFORÇO: A expressão eslse significa = SE NÃO" IMPORTANTE " - NUNCA FAZER TODO O JAVASCRIPT DE UMA VEZ, IR FAZENDO AOS POUCOS E FAZER TESTE PARA VER SE ELE ESTÁ FUNCIOANDO!

Exercício parter 3 Iremos nesse exercício fazer o teste da tabuada.Foi criado a mesma estrutura que foi feita no exercício anteriror.Fizemos algumas modificações para que o arquivo se adeque a tabuada.foi escrito o código javascript.

Nesse modulo iremos ver :Array

Variáveis CompostasVamos entender as Diferenças em variáveicRAIMOS s simples e variáveis compostas.variáveis simples ( só consegue armazenar um valor por vez; qunado criamos uma variável com var ou let)variáveis compostas ( devem ser capazes de (armazenar vários valores em uma mesma estrutura). IMPORTANTE"- 'coloque nomes claros para a suas variáveis ou arrayCada variável composta tem um indíce que é a indicação de cada valor salvo dentro dela.Exemplo: vaga a = [ 0 , 1 , 2 ]cada espaço que está dentro dos [ ] rece um número que chamamos de chave ou indíce.a variável composta a é chamada de array (traduzindo para o português = vetor)o array é composto de elementos são um par que agrupa espaço da memoria valor colocado dentro dele indíce = 0, 1, 2 (pode ser chamado de chave ou key)e por ultimo o conteúdo de cada elemento.para acrescentar um valor dentro de array já criado em um determido indíce escrevemos o seguitne :num = [3] = 6 para acrescentar outro valor dentro de qualquer parte do array escrevemos o seguinte código:num.push (7)para saber o comprimento de um array escrevemos o seguinte código:num.lengthpara colocar os elemntos que já estão dentro de um array em ordem crescente escrevemos o código: num.sort()para mostrarmos na tela usando node.js o valor do array sem os [ ] digitamos o código:let valores =  [8,1,7,4,2,9]console.log(valores)console.log(valores[0])console.log(valores[1])console.log(valores[2])console.log(valores[3])console.log(valores[4])console.log(valores[5])iremos agora escrever esse código de forma mais inteligente e simplificada.utilizando o for infor( ) in ( ) {console.log( )}Exemplo:for = quer dizer para in = dentro (em portugues = em)for(let pos=0; pos<num.length; pos++){console.log (num[pos])}for(let pos in num)para buscar valores dentro do vetor escrevemos o código:num.indexOf(7)(ele pesquisa dentro do array se tem o valor 7)quando colocarmos um valor para ele pesquisar e la dentro desse array o valor não existir ele ira retornar o valor de -1 (para o javascript significa que o valor requerido da pesquisa não existe)

Configruação avançada do Vscode (.js) {   "files.autoSave": "afterDelay"   "workbench.colorTheme": "Atom One Dark",   "workbench.iconTheme": "vscode-icons",   "editor.fontSize": 14,   "editor.lineHeight": 1.75,   "editor.tabSize": 2,   "workbench.startupEditor": "newUntitledFile",   "editor.wordWrap": "on",   "editor.minimap.renderCharacters": false,   "telemetry.telemetryLevel": "off",   "security.workspace.trust.untrustedFiles": "open",   "breadcrumbs.filePath": "off",   "outline.icons": false,   "liveServer.settings.donotShowInfoMsg": true,   "liveServer.settings.donotVerifyTags": true,   "editor.formatOnSave": true,   "html.format.wrapAttributes": "auto",   "html.format.wrapLineLength": 0,   "html.autoClosingTags": false,   "editor.defaultFormatter": "esbenp.prettier-vscode",   "[html]": {     "editor.defaultFormatter": "vscode.html-language-features"   },   "editor.bracketPairColorization.enabled": false   }

2.1 - Introdução ao ModuloConhecendo os comandos aprender como criar um repositório. como dar um push, como clonar um repositório, como atualizar esse repositório.

2.2 - O que é um Repositório ?Rip - abreviação de Repositório.É aonde os arquivos do seu projeto ficam armazenados, podemos aqui trabalhar off-line.

2.3 - Criando um RepositórioPara criar um repositótio precisamos usar o comando git init ( com isso você está tornando aquele pasta ou diretório uma repositório e todos os arquivos dentro dessa pasta iram ser reconhecidos pelo gitcriamos uma pasta dentro de nosso computador chamado curso gitcriamos mais uma pasta dentro dessa nova pasta que criamos chmamado de projeto-1Dentro dessa pasta vamos clicar com o botão direito do mouse ir em mostrar mais opções e depois clicar em Git Bash Here.Dentro do bash vamos tornar essa pasta um repositório.

git init para tornar esta pasta um repositório vamos dar um comando que pose ser usado no terminal do windowsno git bashno terminal dentro do vscode;git init olive@DESKTOP-JPT3VG7 MINGW64 ~/OneDrive/cursogit/projeto-1$ git initInitialized empty Git repository in C:/Users/olive/OneDrive/cursogit/projeto-1/.git/olive@DESKTOP-JPT3VG7 MINGW64 ~/OneDrive/cursogit/projeto-1 (master)$Indentificamos que a nossa pasta agora é um repositório.

9 - Verificando AlteraçõesFoi aberto o projeto anterior Curso git / projeto 1foi dado o comando Git status para verificar a situação do projeto.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterNo commits yetUntracked files: (use "git add <file>..." to include in what will be committed)    nomes.txtnothing added to commit but untracked files present (use "git add" to track)PS C:\Users\olive\OneDrive\cursogit\projeto-1>Vamos criar um novo arquivo de nome empresa.txt eincluir nesse arquivo um texto do tipo (Sujeito Progamador) e dar o comando git status novamente.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterNo commits yetUntracked files: (use "git add <file>..." to include in what will be committed)    empresa.txt    nomes.txtnothing added to commit but untracked files present (use "git add" to track)PS C:\Users\olive\OneDrive\cursogit\projeto-1>Foi identidicado agora que temos 02 arquivos e os 02 arquivos ainda não foram adicionados e nem comitados  

Esse comando git add "---" "---" = a nome do arquivo a ser adicionado para começar a ser monitorado.Vamos adicionar o arquivo nomes.txt atravé do comando git add nomes.txt" IMPOPRTANTE "NÃO É APRESENTADO INFORMAÇÃO ALGUMA NA TELA Vamos dar o comando git satus novamente para a verificação do Status PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterNo commits yetChanges to be committed: (use "git rm --cached <file>..." to unstage)    new file:  nomes.txtUntracked files: (use "git add <file>..." to include in what will be committed)    empresa.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Foi informado pelo git que temos um arquivo que foi adicionadoe não agora em modo unstagee também temos outro arquivo de nome empresa.txt que ainda não foi adicionado e esta no modo Untracked.fizemos uma modificação no arquivo nomes.txt incluimos 02 nomes e damos um git status novamente para ver a situaçãoPS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterNo commits yetChanges to be committed: (use "git rm --cached <file>..." to unstage)    new file:  nomes.txtChanges not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory)    modified:  nomes.txtUntracked files: (use "git add <file>..." to include in what will be committed)    empresa.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Agora temos outra situação:temos a informação que o arquivo foi modificadoe que podemos adiciona-lo novamente ou podemos restaura-lo."IMPORTANTE"TODA VEZ QUE MODIFICARMOS QUALQUER ARQUIVO PRECISAMOS ADICIONA-LO NOVAMENTE!!!

Esse comando serve para adiconar varios arquivos para ser monitorado. Dessa forma enviamos todos os arquivos que estão na pasta para serem monitorados.git add . PS C:\Users\olive\OneDrive\cursogit\projeto-1> git add . PS C:\Users\olive\OneDrive\cursogit\projeto-1> IMPORTANTE NÃO APARECEU NENHJMA MENSAGEM. VAMOS VER A SITUAÇÃO ATRAVÉS DO GIT STATUS.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterNo commits yetChanges to be committed: (use "git rm --cached <file>..." to unstage)    new file:  empresa.txt    new file:  nomes.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Nosso status mudou a informação os 02 arquivos agora estão no modo e não foi feito nenhum commit ainda.

10 - Salvando Arquivos O que é um commit ?R: é basicamente a gente salvar as alterações no nosso repositório.c

git comit "----" "----" - nome do arqivo a ser comitado exemplo: git commit empresa.txt -m "-----"git commit = salvar o arquivoempresa.txt = nome do arquivo que estamos salvando.-m = é uma forma de colocar a mensagem do porque está comitando. (descrever as alterações ou a indlusão de alguma coisa."-------" = Descrição do commit Exemplo: " Estou criando o arquivo com os nomes da empresa"S C:\Users\olive\OneDrive\cursogit\projeto-1> git commit empresa.txt -m "Estou criando o arquivo com os nomes da Empresa"[master (root-commit) 942321a] Estou criando o arquivo com os nomes da Empresa 1 file changed, 1 insertion(+) create mode 100644 empresa.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Temos a seguinte informação de status.temos ainformação de uma inserção de um arquivo commitado. vamos dar um git status para ver a situação.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masterChanges to be committed: (use "git restore --staged <file>..." to unstage)    new file:  nomes.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Podemos ver que foi feito o commit e que falta apenas um arquivo para ser comitado o nomes.txtvamos fazer o commit desse arquivo o nomes.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> git commit nomes.txt -m "Criando os nomes do curso"[master 9784080] Criando os nomes do curso 1 file changed, 3 insertions(+) create mode 100644 nomes.txtPS C:\Users\olive\OneDrive\cursogit\projeto-1> Foi feito o commit Vamos dar um git status para ver a situação do projeto.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masternothing to commit, working tree cleanPS C:\Users\olive\OneDrive\cursogit\projeto-1> Situação não temos nada para ser comitado e nada para ser salvo.Vamos criar um arquivo novo de nome index.html e modificar o arquivo nomes.txt incluindo um nome nele. depois de fazer isso vamo ver o statusPS C:\Users\olive\OneDrive\cursogit\projeto-1> git status On branch masterChanges not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory)    modified:  nomes.txtUntracked files: (use "git add <file>..." to include in what will be committed)    index.htmlno changes added to commit (use "git add" and/or "git commit -a")PS C:\Users\olive\OneDrive\cursogit\projeto-1> SITUAÇÃO : Tesmos agora um arquivo que foi modificado   modified:  nomes.txt e temos um arquivo que foi adicionado  index.html.Vamos agora adicionar esses 02 arquivos de uma vez...git add .PS C:\Users\olive\OneDrive\cursogit\projeto-1> git add . PS C:\Users\olive\OneDrive\cursogit\projeto-1> vamos comitar todos os arquivos de uma só vez.proximo tópico

git comit -m "-----"Esse comando faz o commit de todos os arquivos de uma so vez .PS C:\Users\olive\OneDrive\cursogit\projeto-1> git commit -m "Criando nossa página home do Projeto"[master 62de6a8] Criando nossa página home do Projeto 2 files changed, 3 insertions(+), 1 deletion(-) create mode 100644 index.htmlPS C:\Users\olive\OneDrive\cursogit\projeto-1> SITUAÇÃO: 02 arquivos foram modificados Vamos dar um git status para ver a situação agora.PS C:\Users\olive\OneDrive\cursogit\projeto-1> git statusOn branch masternothing to commit, working tree cleanPS C:\Users\olive\OneDrive\cursogit\projeto-1> SITUAÇÃO: todos os arquivsos foram inseridos e comiitados e não há mais alteração a ser feita.