06 - Javascript - Operador ternário
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Meus links de afiliados:
Crie a pasta:
javascript_codes/exemplo06/ e dentro crie o arquivo
index06.html com conteúdo abaixo:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula 6: Fundamentos da Linguagem JavaScript - código fluente</title>
</head>
<body>
<h1>Aula 6: Fundamentos da Linguagem JavaScript - código fluente - Operadores ternários</h1>
<br>
<br>
<h1 id="texto" align="center"></h1>
</body>
<script src="script06.js"></script>
</html>
Crie o
script06.js na pasta
javascript_codes/exemplo06/ com o conteúdo abaixo.
/********************************
* Operador ternário
*/
var firstName = "Paulo";
var age = 18;
age >= 18 ? document.getElementById("texto").innerHTML = firstName + " é maior de idade" :
document.getElementById("texto").innerHTML = firstName + " é menor de idade";
Já utilizamos para as saídas o
window.alert() e o
console.log(), nessa aula iremos utilizar o
document.getElementById(id) e o
document.write().
O
document.getElementById(id) e o
document.write() imprimem a saída no HTML mesmo.
Usar
document.write() após o carregamento de um documento HTML, todos os elementos HTML existentes serão excluídos, vamos ver isso com um exemplo.
Explicação do código
No script acima(
script06.js), primeiro são definidas duas variáveis locais,
firstName e
age, aí então entra em ação o operador ternário.
O operador ternário funciona como uma pergunta, é como se tivéssemos perguntando:
Idade é maior ou igual a 18 anos?
Se for, coloque no elemento
texto no
HTML Paulo é maior de idade senão coloque
Paulo é menor de idade.
Ou seja, se o resultado do teste for true, executa o que tá logo após a interrogação, senão, executa o que tá depois dos dois pontos.
Agora vamos usar um outro exemplo para mostrar o document.write()
Crie outro html com o conteúdo abaixo, eu vou chamar de
script_doc_write.html.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Aula 6: Fundamentos da Linguagem JavaScript - código fluente</title>
</head>
<body>
<h1>Aula 6: Fundamentos da Linguagem JavaScript - código fluente - Utilizando o document.write()</h1>
<br>
<br>
<button type="button" onclick="document.write(5 + 6)"><h1>Clique aqui</h1></button>
</body>
</html>
Abra no browser esse html e clique no botão.
Veja que todos os elementos já carregados no html, no caso o <h1> com esse texto:
Aula 6: Fundamentos da Linguagem JavaScript - código fluente - Utilizando o document.write()
E os <br> também, todos esses elementos html sumiram.
Então, saiba que usar
document.write() após o carregamento de todos os elementos HTML existentes, farão esses elementos sumirem na hora que rodar o
document.write().
Na próxima aula veremos switch case.
Vou deixar meu link de referidos na digitalocean pra vocês.
Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:
Esse outro link é da one.com:
Obrigado, até a próxima e bons estudos. ;)
