Você sabe usar o comando if no JavaScript? Sabe diferenciar condições simples e condições compostas? Sabe como criar uma condição usando JavaScript? Sabe como instalar e configurar a extensão Node Exec no Visual Studio Code?
Pois, para responder a essas e muitas outras perguntas, assista essa aula do Curso de JavaScript para Iniciantes até o final. E não se esqueça sempre de praticar todas as atividades que fizermos durante o vídeo no seu próprio computador.
Aula do Curso de JavaScript e ECMAScript para Iniciantes, criado pelo professor Gustavo Guanabara para o canal CursoemVideo.
Curso em Vídeo
Seja um apoiador: http://cursoemvideo.com/apoie
Site: http://www.cursoemvideo.com
YouTube: http://www.youtube.com/cursoemvideo
Facebook: http://www.facebook.com/cursosemvideo
Twitter: http://twitter.com/cursosemvideo
Twitter: http://twitter.com/guanabara
Instagram: https://www.instagram.com/cursoemvideo/
Instagram: https://www.instagram.com/gustavoguanabara/
Patrocínio
Google: http://www.google.com.br
#CursoemVideo #JavaScript #EcmaScript #MóduloD #Aula11
Original source
23 responses to “Condições (Parte 1) – Curso JavaScript #11”
codigo para quem esta tendo dificuldades:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aprendendo na pratica 2/Nacionalidade</title>
</head>
<body>
Identificador de nacionalidade:
<p>
País de Origem: <input type="text" name="txtOrigem" id="txtOrigem">
<input type="button" value="procurar" onclick="procurar()">
</p>
<div id ='res'>
</div>
<script>
function procurar() {
var txtorigem = window.document.querySelector('input#txtOrigem')
var res = window.document.querySelector('div#res')
var nacionalidade = (txtOrigem.value)
res.innerHTML = `<p> Seu país de Origem é <strong>${nacionalidade}</strong>`
if (nacionalidade == 'Brasil'){
res.innerHTML += ('<p> Sua nacionalidade é Brasileira </p>')
} else {
res.innerHTML += ('<p> Sua nacionalidade é Estrangeira')
}
}
</script>
</body>
</html>
Demorei refiz 3 vezes mas consegui kkk
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificação</title>
</head>
<body>
<h1>Você é ?</h1>
Digite em qual país você vive, e em seguida clique em 'OK': <input type="text" name="país" id="país">
<input type="button" value="OK" onclick="OK()">
<div id="res">
</div>
<script>
function OK() {
var txt = document.querySelector('input#país')
var res = document.querySelector('div#res')
var ps = (país.value)
res.innerHTML = `<p>Vivendo em <strong>${ps}</strong></p>`
if (ps == 'Brasil') {
res.innerHTML += '<p>Você é <strong>Brasileiro</strong></p>'
} else {
res.innerHTML += '<p>Você é <strong>Estrangeiro</strong></p>'
}
}
</script>
</body>
</html>
O MEU FICOU ASSIM!!
===============================================
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verificador</title>
<style>
body{
font: normal 25pt Arial;
background: rgba(3, 247, 64, 0.432);
text-align: center;
}
div#res{
font: normal 25pt Arial;
text-align: center;
}
h1{
font: bold 40pt Arial;
color:red;
}
</style>
</head>
<body>
<h1>Sistema de verificação de nacionalidade</h1>
<h2>Seja bem-vindo / Welcome</h2>
Por favor, digite seu país de nascimento/Your country: <input type="text" name="pais" id="pais">
<input type="button" value="Verificar/Check" onclick="Verificador()">
<div id="res">
</div>
<script>
function Verificador(){
var p = window.document.querySelector('input#pais')
var res = window.document.querySelector('div#res')
var f = String(p.value)
res.innerHTML = `<p>Você nasceu em / You was born in <strong>${f}</strong></p>`
if(f == 'Brasil'||f =='brasil'){
res.innerHTML += `<p>Você é <strong>BRASILEIRO!</strong></p>`
}
else{
res.innerHTML += `<p>You are <strong>foreign!</strong></p>`
}
res.innerHTML += `<p>Obrigado por utilizar nosso serviço / Thank you for using our service!</p>`
}
</script>
</body>
</html>
Professor Guanabara tu é demais, obrigada!!❤
o codigo do meu ex010 deu erro, alguem pode me ajudar
Consegui ! Fiz uns acréscimos no style.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nacionalidade</title>
<style>
body {background-color: rgb(5, 5, 10);
color:rgb(221, 221, 215);
font: 15pt Arial;}
input {
width: 200px;
height: 60;
text-align: center;
font: 20pt Arial;}
input{background-color: rgb(121, 78, 78);}
h1 {background-color: rgb(121, 120, 120);}
h1 {border: 5px solid rgb(121, 120, 120);}
</style>
</head>
<body>
<center>
<h1>DIGITE ONDE VOCÊ VIVE</h1>
<input type="text" name="" id="txtPaís">
<input type="button" value="Verificar" id="buttonVerificar">
<br><br> <!—->
<div id="res">
</div>
</center>
<script>
document.querySelector('input#buttonVerificar').addEventListener('click',verificar);
function verificar(){
let país = document.querySelector('input#txtPaís').value;
let res = document.querySelector('div#res');
if(país != 'Brasil'){
res.innerHTML = 'VOCÊ É ESTRANGEIRO'
} else
{
res.innerHTML = 'VOCÊ É BRASILEIRO'
}
}
</script>
Eu não consegui pelo F8. Então no VS usei:
Terminal – New Terminal – DEBUGCONSOLE – Ctrl+shift+D – Run and De bug Node.js (pelo debug console)
Ou : Fn e F8 – ao mesmo tempo – ( pelo output )
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sistema Alfandega</title>
</head>
<body>
<h1>Verificar a origem</h1>
País de Origem: <input type="text" name="txtori" id="txtori">
<input type="button" value = "Verificar" onclick="verificar()" >
<div id = "res"> </div>
<script>
function verificar(){
var txto = window.document.querySelector("input#txtori")
var res = window.document.querySelector('div#res')
var pais = txto.value
res.innerHTML = `Pais de origem: <strong> ${pais} </strong>, portanto: `
if (pais == 'Brasil') {
res.innerHTML += `<p>Voce é <strong> brasileiro </strong>!</p>`
} else {
res.innerHTML += `<p>Voce é <strong> estrangeiro </strong>!</p>`
res.innerHTML += `<p>Bem vindo ao Brasil, aproveite sua estadia….</p>`
}
}
</script>
</body>
</html>
13:34 na vdd tem sim kkkk. Se for abaixo da velocidade mínima da estrada. Que é a metade da máxima.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>País</title>
</head>
<body>
<h1>Identificador de estrangeiro</h1>
<input type="text" name="nacio" id="nacio">
<input type="button" value="Verificar" onclick="ver()">
<div id="res"></div>
<script>
function ver(){
var res = document.getElementById('res')
var pais = (nacio.value).toLowerCase()
res.innerHTML = `<p>Você vem do ${pais}</p>`
if (pais == 'brasil') {
res.innerHTML += 'Vocé é brasileiro'
} else {
res.innerHTML += 'Você é estrangeiro'
}
}
</script>
</body>
</html>
demorou um pouco mas acho que é assim:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>é brasileiro?</title>
</head>
<body>
<h1>informe seu país</h1>
<input type="text" name="pais" id="pais">
<input type="button" value="enviar" onclick="anali()">
<div id="result">
result
</div>
<script>
function anali(){
var pais1 = document.getElementById('pais')
var pais = String(pais1.value)
var result = document.getElementById('result')
result.innerHTML =`você mora no ${pais},`
if(pais == 'brasil'){
result.innerHTML +=' você é brasileiro(a)'
}
else{
result.innerHTML +=' você é gringo/estrangeiro(a)'
}
}
</script>
</body>
</html>
Dica: para quem quiser brincar com CSS, ao invés de colocar <input type=button>, coloque apenas <button>, desta forma, você poderá alterar as propriedades do elemento no CSS, com o comando button {}, caso precise de identificá-lo, basta colocar <button id='xxx'>
Estou estudando java script mais eu precisei fazer convesao de tipo ni exercício
O meu deu certo assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nacionalidade</title>
</head>
<body>
<h1>Sistema de verificação de Nacionalidade</h1>
País de origem: <input type="text" name="txtpaís" id="txtpaís">
<input type="button" value="Verificar" onclick="nac()">
<div id="res">
</div>
<script>
function nac() {
var txtp = window.document.querySelector('input#txtpaís')
var res = window.document.querySelector('div#res')
var país = String(txtpaís.value)
res.innerHTML = `Seu país de origem é <strong>${país}</strong>.`
if (país == 'Brasil') {
res.innerHTML += ` Por isso você é brasileiro.`
} else {
res.innerHTML += ` Por isso você é estrangeiro.`
}
if (país != 'Brasil') {
res.innerHTML += ` Seja bem vindo ao <strong>BRASIL</strong>!`
}
}
</script>
</body>
</html>
Falou q n precisava converter para string,… no caso precisa sim XD
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Cidadania</h1>
<p>Você nasceu em que país? </p><input type="text" name="tx" id="tx">
<input type="button" value="verificar" onclick="nacionalidade()">
<div id = 'res'>
</div>
<script>
function nacionalidade (){
var nasc = window.document.getElementById('tx')
var res = window.document.getElementById('res')
var cid = String(nasc.value)
if (cid == 'Brasil'){
res.innerHTML = `<p> Você é brasileiro </p> `
}else {
res.innerHTML = `<p>Você é estrangeiro</p> `
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seu país</title>
<style>
body {
background-color: rgb(40, 40, 40);
color: whitesmoke;
font: normal 16pt Quicksand;
}
input {
background-color: rgb(30, 30, 30);
border: none;
color: whitesmoke;
width: 150pt;
font: 16pt Quicksand;
}
</style>
</head>
<body>
<h1>Verificar seu país</h1>
Escreva o seu país aqui: <input type="text" name="verificarpaís" id="verification">
<input type="button" value="Verificar" id="verificarbotao" onclick="verify()">
<div id="res"></div>
<div id="result">
</div>
<script>
function verify() {
var $país = document.getElementById("verification") // Busca o elemento pelo id "verification"
var div = document.getElementById("result") // Busca o elemento pelo id "result"
var $div = document.getElementById("res") // Busca o elemento pelo id "res"
var país = ($país.value) // pega o valor de $país
if (país != "Brasil") { // Se país não for igual a Brasil
$div.innerHTML = `Você está em ${país}` // Mostra o seu país
div.innerHTML = "Resultado: Você é estrangeiro!" // Você é estrangeiro
} else {
$div.innerHTML = `Você está em ${país}` // Mostra o seu país
div.innerHTML = "Resultado: Você é brasileiro!" // Você é brasileiro
}
}
</script>
</body>
</html>
Decidi ir mais além, coloquei umas imagens para ficar mais legal: Da uma conferida galera.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercicio Nacionalidade</title>
<style>
body{
font: normal 15pt Arial;
}
h1 {
text-align: center;
}
img#EUA {
position: relative;
left: 400px;
}
img#Br {
position: relative;
left: 350px;
}
input#bBR {
position: relative;
left: 170px;
top: 13px;
font:normal 20pt Arial;
}
input#bUSA {
position: relative;
left: 250px;
top: 13px;
font: normal 20pt Arial;
}
</style>
</head>
<body>
<div style="border-left: 3px solid green;
border-top: 3px solid red;
border-right: 3px solid yellow;
border-bottom: 3px solid blue;">
<h1>Em qual pais você mora?</h1>
<img src="../img/bBrasil.jpg" alt="Brasil" height="250" width="250" id="Br">
<input type = "button" value = "BRASIL" onclick = "br()" id = "bBR">
<img src="../img/bEUA.jpg" alt="EUA" width="250" height="250" id="EUA">
<input type = "button" value = "USA" onclick = "usa()" id = "bUSA">
<br/><br/><br/><br/>
<div id= "div1">
</div>
<script>
function br(){
var n = window.document.querySelector('div#div1')
n.innerHTML = 'Você é Brasileiro'
}
function usa(){
var n = window.document.querySelector('div#div1')
n.innerHTML = 'Você é gringo'
}
</script>
</div>
</body>
</html>
é engraçado ver esse vídeo, e no fundo, atrás do guanabara, o pessoal editando as outras aulas kkkkkkk
A minha sintax ${vel} não funciona , o que fazer ^^ ?
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Finding Nationality</title>
<style>
body {
background-image:url(https://blog.genialinvestimentos.com.br/wp-content/uploads/2018/02/bandeira-brasil-morro-dois-irmaos.jpg); background-size: cover;
}
h1{
font: Garamond; color: white;
}
div{
font: Garamond; color: white; height: 20pt;
}
var{
font: 10pt Garamond; color: white; height: 20pt
}
</style>
</head>
<body>
<h1>DESCOBRINDO NACIONALIDADE</h1>
<div>Digite o nome do país:</div>
<input type="text" name="nacionalidade1" id="nacionalidade1">
<input type="button" value="Descobrir" onclick="descobrir()">
<div id="nacionalidade"></div>
<script>
function descobrir() {
var nac1 = window.document.querySelector("Input#nacionalidade1")
var res = window.document.querySelector("div#nacionalidade")
var país = nac1.value
res.innerHTML = `<p>País atual: Vivendo em <strong>${país}</strong>.</p>`
"<p>Nacionalidade: </p>"
if (país.toUpperCase() == "BRASIL") {
res.innerHTML += `Você é <strong>brasileiro!</strong>`
} else {
res.innerHTML += `Você é <strong>estrangeiro!</strong>`
}
}
</script>
</body>
</html>
gosto de dar uma zuada nos meus códigos, aí vai:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Nacionalinator</title>
<style>
body{
font: normal 16px arial;
color: white;
background: rgb(39, 39, 39)
}
</style>
</head>
<body>
Em que país você mora?<br>
<input type="text" name="txtpais" id="txtpais">
<input type="button" value="Verificar" onclick="veri()">
<div id='res'></div>
<script>
function veri() {
var textpais = document.getElementById('txtpais').value.toUpperCase()
if (textpais == 'BRASIL') {
res.innerHTML='⚽⚽AEEE BRASILSILSILSILSIL!!!!!!!!!!11111111111111⚽⚽'
res.style.color = 'green'
res.style.background = 'yellow'
res.style.font = 'bold 20px arial'
} else {
res.innerHTML='SUMA<br>SUMA DAQUI AGORA<br>GRINGO SAFADO!!!!!!!!!111<br>😡😡😡'
res.style.color = 'red'
res.style.font = 'bold 20px arial'
}
}
</script>
</body>
</html>
Alguém pode me ajudar, eu fiz os códigos certinho como o professor ensinou, mas no navegador, o botão que eu criei não faz nada. Eu estabeleci a função para o onclick, mas quando eu vou no navegador e aperto ele não faz nada, nem mesmo testando com alguma coisa mais simples.