06 – Javascript – Operador ternário

toticavalcanti

06 – Javascript – Operador ternário

Operador ternário

Voltar para página principal do blog

Todas as aulas desse curso

Aula 05

Aula 07

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:

Hostinger

Digital Ocean

One.com

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().

Se gostarem do conteúdo, curtam a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

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:

Digital Ocean

Esse outro link é da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

Category: Algoritmo - Linguagem de Programação, Fundamentos do javascript, Javascript