Classificação
0 %
Popularidade
Opine
Descrição:
Você sabe mudar o cor de fundo de um site, dinamicamente, usando JavaScript? Sabe como inserir uma imagem usando …
Se alguém quiser mais uma referência para o exemplo do voto, está aqui meu código:
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
body{
background-color: black;
color: white;
font-size: 20px;
text-align: center;
font-family: sans-serif;
}
main{
background-color: rgba(255, 255, 255, 0.048);
width: 580px;
height: 220px;
margin: auto;
border-radius: 50px;
}
input{
background-color: rgba(255, 255, 255, 0.097);
color: white;
border-radius: 10px;
}
h1{
padding-top: 50px;
margin-bottom: 15px;
}
.descrição{
margin-top: 0px;
margin-bottom: 13px;
color: rgba(245, 245, 245, 0.734);
}
.resposta{
color: rgb(218, 62, 62);
}
</style>
</head>
<body>
<main>
<h1>Qual sua obrigação eletiva?</h1>
<p class="descrição">Insira sua idade e descubra</p>
<input type="number" name="txtn1" id="txtn1">
<input type="button" value="Submeter" onclick="avaliar()">
<p class="resposta"></p>
<script>
function avaliar() {
var idade=document.querySelector('input#txtn1')
var idadeT=Number(idade.value)
if (idadeT<16) {
window.document.querySelector('p.resposta').innerHTML='Não pode votar.'
} else if (idadeT<18 || idadeT>67){
window.document.querySelector('p.resposta').innerHTML='Voto opcional.'
} else{
window.document.querySelector('p.resposta').innerHTML='Voto Obrigatório.'
}
}
</script>
</main>
</body>
</html>
<!–
<16 Não vota
<18 ou >67 Voto opcional
<67 Voto obrigatório
–>
Juntei a aula 11 com a aula 12
<!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=], initial-scale=1.0">
<title>Eleição</title>
</head>
<body>
<h1>Checagem de obrigatoriedade de votação</h1>
Sua idade: <input type="number" name="voto" id="voto" >
<input type="button" value="Enviar" onclick="cedula()">
<div id="res"></div>
<script>
function cedula(){
var idade = document.querySelector('input#voto')
var res = document.querySelector('div#res')
var nu = Number(idade.value)
res.innerHTML = `A sua idade é de ${nu}`
if ( nu < 16) {
res.innerHTML = `A sua idade é de ${nu} anos. Você não vota`
} else if ( nu < 18 || nu > 65) {
res.innerHTML = `A sua idade é de ${nu} anos. Seu voto é opcional`
} else {
res.innerHTML = `A sua idade é de ${nu} anos. Seu voto é obrigatório`
}
}
</script>
</body>
</html>
O comando switch do JS afinal, é o EscolhaCaso do Portugol?
Mano
Eu sei que é aula de programação mas domingo é o dia 1 da semana e sábado é o dia 7
14:26 programando o show de Truman! 😂
Valeu Gustavo ta me ajudando bastante. Comecei com seu curso de Phyton e já abriu e muito a mente pro javascript. Programo pelo celular as duas linguagens, o que é um pouco chato as vezes porque o programa da erro por uma simples indentação. Mas tô gostando muito de programar e ver que estou tendo realmente um aprendizado com seu curso que tem muita qualidade. Deus te abençoe irmão
Incrivel como esse curso da de 10 a 0 em cursos pagos, adquiri o da onebit… e sinceramente, mil vezes esse.
exercicio da Madrugada ficou assim
var hora = 00
console.log(`Agora são exatamento ${hora} horas.`)
if(hora >=6 && hora < 12){
console.log('bom dia negao')
} else if (hora >= 12 && hora <=18){
console.log('Boa tarde negao!')
} else if(hora > 18 && hora != 00){
console.log('boa noite negao')
} else if( hora >= 1 || hora == 00){
console.log('boa madrugada negao')
}
Muito boa aula. Como sempre nota 10!! Seguindo em frente! Obrigado
Durante tentativas de desenvolver um menor e mais limpo código, consegui chegar a conclusão abaixo, se é das melhores não sei mais funciona.
OBS: Não coloquei boa madrugada por não ser normal de ser saudado… hehe😅
CÓDIGO JavaScript:
var data = new Date()
var hora = data.getHours()
var min = data.getMinutes()
console.log(`Agora são ${hora}:${min}.`)
if (hora >= 7 && hora <= 12) {
console.log (`Bom dia!`)
} else if (hora > 12 && hora <= 18) {
console.log (`Boa tarde!`)
} else {
console.log (`Boa noite!`)
}
Retorno:
Agora são 11:58.
Bom dia!
Se alguém tiver sugestões de um código melhor, compartilha ai nos comentários.
Nossa gente, tô feliz em saber que conseguir entender a mexer com javascript através de aulas e ensinamentos incríveis. Obrigado mesmo, dando continuidade aos estudos. Meus parabéns professor e muito obrigado. ^^
Nem em tela cheia c/ 1080Ls. ñ da pra ver o que vc digita Guanabara, bastasse só 2px pra tirar 10 em todos tópicos. Parabéns assim mesmo. OBS:. Meu Monitor é de 14 Polegadas.
alguém sabe como eu passo para linha de baixo no nodejs sem aparecer undefined ? Sempre que aperto enter para pular para próxima linha aparece undefined
No final ficou assim:
Bom dia!
Agora são exatamente 7 horas
Hoje é…
Quarta-feira
Dia de estudar JS com o professor Guanabara!!…
Obrigada pelas aulas, rico conteúdo com muita sabedoria muito prática, fico muito feliz em ter encontrado esse conteúdo, gratidão eterna pelo conhecimento compartilhado!
eu falava "identação" 😅. Sem comentários. Que curso excelente. Didática, visual, tudo. Você e seu canal realmente são diferenciados. Parabens e obrigado por compartilhar. Isso vale (e valerá por muitos anos) ouro
Conseguir incluir o ''Boa madrugada" depois de assistir a aula mais uma vez:
var Hora = new Date()
var h = Hora.getHours()
console.log(`Agora são exatamente ${h} horas`)
if (h < 7) {
console.log('Boa madrugada!')
} else if (h < 12) {
console.log('Bom dia!')
} else if (h <= 18) {
console.log('Boa tarde!')
} else
console.log('Boa noite!')
👏👏👏👏👏👏👏👏👏
Esse seria o código correto do primeiro exercício do vídeo…
var idade= 65
console.log(`Você tem ${idade} anos.`)
if (idade <= 15) {
console.log('Não vota!')
} else if (idade < 18 || idade >= 65) {
console.log('Voto opicional!')
} else {
console.log('Voto obrigatório!')
}
Obs: Menor e igual a 15 porque no ano que se faz 16 anos, o voto já é opcional, ou seja, ainda terá 15 anos.
NOVIDADES:
Estrutura Condicional Aninhada: IF/ELSE IF/ELSE (se/senão se/senão)
Se (if) condição1 for VERDADEIRA, execute o Bloco A.
Senão (else), se (if) condição2 for VERDADEIRA, execute o Bloco B.
Senão (else), execute o Bloco C.
Ilustração:
if (condição1) {
Bloco A
} else if (condição2) {
Bloco B
} else {
Bloco C
}
____________________________
Estrutura Condicional Múltipla: SWITCH (expressão)
*tradução: switch = escolha; case = caso
ESCOLHA a EXPRESSÃO1 (switch (expressão1)) como REFERÊNCIA.
EXECUTE o BLOCO do CASO que CORRESPONDA à EXPRESSÃO1.
No exemplo da aula, escolheu-se a variável DiaSem como REFERÊNCIA. Esta variável representa o DIA da SEMANA em forma de NÚMERO, onde 0 = domingo; 6 = sábado.
Depois criou-se um CASO para cada DIA, onde cada um têm seu próprio VALOR, este CAPAZ de ser CORRELACIONADO com algum DIA, e BLOCO de CÓDIGOS.
Quando a estrutura SWITCH é LIDA, CORRELACIONA-SE o VALOR da EXPRESSÃO (DiaSem) com o VALOR de cada CASO. Aquele CASO que COINCIDIR, terá o seu BLOCO EXECUTADO.
Ilustração:
switch(diaSem) {
case 0:
console.log ('Domingo')
break
case 1:
console.log ('Segunda-feira')
break
case 2:
console.log ('Terça-feira')
break
case 3:
console.log ('Quarta-feira')
break
case 4:
console.log ('Quinta-feira')
break
case 5:
console.log ('Sexta-feira')
break
case 6:
console.log ('Sábado')
default:
console.log ('[ERRO] – DIA INVÁLIDO')
}
*O break serve para QUEBRAR, PARAR a EXECUÇÃO dentro do BLOCO. Caso não utilize-o, os PRÓXIMOS CASOS serão EXECUTADOS, mesmo que não haja a correlação do VALOR da EXPRESSÃO com o VALOR do CASO. Isto irá ocorrer até que se encontre um break . Não é NECESSÁRIO utilizar o break no ÚLTIMO CASO dado que, por ser o último, este já irá PARAR a EXECUÇÃO de qualquer forma (mas se quiser usar, pode usar, só não irá fazer diferença).
*O default: serve para, se NENHUM dos CASOS SERVIR, executa-se o default: . Caso o default: esteja por ÚLTIMO, também não é necessário pôr o break . Entretanto, caso esteja, por exemplo, em 1°, é NECESSÁRIO pôr o break pois, senão, ele irá executar os PRÓXIMOS CASOS até encontrar um break .
*A estrutura switch() é um pouco limitada pois, no VALOR de cada CASO, só é possível utilizar NÚMEROS INTEIROS e STRINGS.
____________________________
O Construtor new Date() retorna um OBJETO de DATA com: DIA da SEMANA, DATA, HORA ATUAL e FUSO HORÁRIO. Ex:
Fri Nov 04 2022 08:30:47 GMT-0300 (Horário Padrão de Brasília)
Por ser um Construtor, new Date() permite-nos criar OBJETOS de DATA ESPECÍFICOS A PARTIR DELE. Para fazer isto, primeiramente, para facilitar, guarda-se o new Date() dentro de uma variável, desta forma:
data = new Date()
E depois você pode usar algum destes MÉTODOS:
data.getFullYear() Retorna o ANO atual (yyyy)
data.getMonth() Retorna o MÊS atual (0-11)
data.getDate() Retorna o DIA atual (1-31)
data.getDay() Retorna o DIA da SEMANA atual como um NÚMERO (0-6)
*0 = domingo; 6 = sábado.
data.getHours() Retorna a HORA atual (0-23)
data.getMinutes() Retorna os MINUTOS atuais (0-59)
data.getSeconds() Retorna os SEGUNDOS atuais (0-59)
data.getMilliseconds() Retorna os MILISSEGUNDOS atuais (0-999)
data.getTime() Retorna os MILISSEGUNDOS desde o dia 1 de Janeiro de 1970 (WTF? xD)
Alguém com problema na extensão Node Exec? Instalei o Node.js e a extensão Exec, porém quando aperto f8 não aparece o terminal embaixo como nos vídeos. Se alguém souber como resolver, agradeço demais.
Alguém sabe como fazer esse símbolo ( || ) no Abnt2, só consegui fazer no celular
Fiz uma versão até mais interessante do exercicio das horas:
<!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 id="title">Data e Hora</title>
<style>
body {
text-align: center;
font: normal 16pt arial;
background-color: rgb(12, 12, 12);
color: rgb(218, 218, 218);
}
</style>
</head>
<body>
<div class="container">
<div class="background-hora">
<h1 id="hora"></h1>
</div>
</h1>
<div id="data">Data aqui</div>
<div id="msg"></div>
<script>
const sleep = (milliseconds) => {
return new Promise(resolve => setTimeout(resolve, milliseconds))
}
const atualizando = async() => {
while (true) {
const day = new Date().getDate()
const month = new Date().getMonth()
const year = new Date().getFullYear()
const hora_atual = new Date().getHours()
const hour = new Date().toLocaleTimeString()
var titulo = window.document.getElementById('title')
var hora = window.document.getElementById('hora')
var data = window.document.getElementById('data')
hora.innerHTML = hour
titulo.innerHTML = hour + ' – Hora exata'
data.innerHTML = `${day}/${month + 1}/${year}`
await sleep(1000)
if (hora_atual > 17 ) {
var msg = window.document.getElementById('msg')
msg.innerHTML = 'Tenha uma boa noite!'
}
else if (hora_atual < 17 && hora_atual > 12) {
var msg = window.document.getElementById('msg')
msg.innerHTML = 'Tenha uma boa tarde!'
}
if (hora_atual < 12 ) {
msg.innerHTML = 'Tenha uma bom dia!'
}
}
}
atualizando()
</script>
</div>
</body>
</html>
Pega a hora do sistema e vai atualizando a cada um segundo para que o tempo do relógio passe.
Mostra a data e mostra a mensagem pedida na atividade.
Turma preciso de ajuda, alguém me explica como pode dar erro de sintaxe e ser certo na logica?
Ex:
SINTAXE
var vel = 59
console.log('A velocidade de seu carro é ${vel}km/h')
if (vel > 60) {
console.log('Você ultrapassou a velocidade de segurança, foi multado!')
}
console.log('Dirija sempre usando cinto de segurança!')
F8
Info: Start process (14:58:58)
A velocidade de seu carro é ${vel}km/h
Dirija sempre usando cinto de segurança!
Info: End process (14:58:58)
obs: A CONCATENAÇÃO NAO FUNCIONA!
Sou meio leigo ainda, tentei passar o exercicio de nacionalidade pra HTML, e me da esse erro, alguem pode me explicar por favor?
Você é do [object HTMLInputElement]
<h1><strong>Nacionalidade</strong></h1>
<p>Onde você nasceu? <input type="text" name="n1" id="n1">
<input type="button" value="Verificar" onclick="verificar()">
</body>
<div id="res">
</div>
<script>
function verificar() {
var n = window.document.querySelector('input#n1')
var res = window.document.querySelector('div#res')
var nac = n
res.innerHTML = `Você é do ${nac}`
if (nac == Brasil) {res.innerHTML += 'Portanto você é Brasileiro!'}
else {res.innerHTML += 'Portanto você é estrangeiro!'}
}
</script>
</html>
Obrigado desde ja!
Segunda atividade do video, só que mais completa:
<!DOCTYPE html>
<html lang="en">
<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">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15pt;
background-color: rgb(189, 224, 255);
color: rgb(92, 66, 66);
}
input#dia {
background-color: rgb(55, 55, 55);
color: aliceblue;
padding: 15px;
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
border-radius: 20px;
transition: all 0.7s;
}
input#dia:hover {
background-color: rgb(107, 107, 107);
color: antiquewhite;
box-shadow: inset 5px 2px black;
}
p {
font-size: 20px;
color: rgb(60, 50, 88);
}
</style>
<title>Document</title>
</head>
<body>
<h1>Qual dia é hoje?</h1>
<input type="button" value="Calcular" id="dia" onclick="dia()">
<div id="area"></div>
<script>
var area = document.getElementById('area')
var date = new Date()
var data = date.getDay()
var hora = date.getHours()
var minutos = date.getMinutes()
var segundos = date.getSeconds()
var mes = date.getMonth()
var diames = date.getDate()
var ano = date.getFullYear()
function dia()
{
switch (data) {
case 0:
area.innerHTML = `<p>Hoje é Domingo!</p>`
break
case 1:
area.innerHTML = `<p>Hoje é Segunda-feira!</p>`
break
case 2:
area.innerHTML = `<p>Hoje é Terça-feira!</p>`
break
case 3:
area.innerHTML = `<p>Hoje é Quarta-feira!</p>`
break
case 4:
area.innerHTML = `<p>Hoje é Quinta-feira!</p>`
break
case 5:
area.innerHTML = `<p>Hoje é Sexta-feira!</p>`
break
default:
area.innerHTML = `<p>Hoje é Sábado!</p>`
break
}
area.innerHTML += `<p>Horas: ${hora}:${minutos}:${segundos}</p>`
area.innerHTML += `<p>DATA: ${diames}/${mes}/${ano}</p>`
}
</script>
</body>
</html>
Ele falando "vc pode ta estudando até de madrugada", eu rachando aqui que já virei uns 3 dias estudando o curso dele KKKKKK
uma forma um pouco grandinha de fazer a primeira atividade do video:
var idade = 65
var titulo = true
if (idade < 16 || idade < 18 && titulo == false){console.log('Não vota.')}
else if(idade >= 18 && idade < 65 && titulo == true|| idade < 18 && titulo == true){console.log('Voto obrigatório.')}
else if (idade >= 65 && titulo == true){console.log('Voto opcional.')}
else if (idade >= 18 && idade < 65 && titulo == false){console.log('Você será preso em instantes.')}