06 – Javascript – Operador ternário

More videos
Views
   

Javascript – Operador ternário

Operador ternário

Operador ternário

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

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.

Curta 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. 😉

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>