Funções mais usadas: mudanças entre as edições

De IFSC
Ir para navegação Ir para pesquisar
imported>Fargoud
imported>Fargoud
Linha 32: Linha 32:


=função ''document.write()''=
=função ''document.write()''=
Como nosso curso será voltado para web, precisamos de uma página HTML para trabalhar com Javascript, inicialmente iremos trabalhar com código incorporado na própria página.
Vamos usar o “Notepad++” como editor padrão, por possuir algumas facilidades, mas o bloco de notas pode ser usado sem problema nenhum.
Crie um arquivo com o código básico HTML mostrado a seguir.
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
//Conteúdo Javascript
</script>
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
Uma linguagem de programação é fundamental ter um comando para saída de texto, no caso de Javascript temos o método “write”, vamos entender esse comando.
Veja a sintaxe básica do comando.
document.write(“Texto a ser mostrado”);
Dentro dos parênteses inserimos o conteúdo que será impresso no browser, quando o conteúdo não for um cálculo ou o valor de uma variável, quando for um texto simples, deve vir entre aspas, basicamente é o que chamamos de string.
Adicione o código destacado em vermelho no código a seguir.
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
document.write("Canal Fessor Bruno");
</script>
</head>
<body>
<!-- Conteúdo da página -->
</body>
</html>
8
Salve as alterações e abra o arquivo em seu browser. O resultado será o texto “Canal Fessor Bruno” sem aspas escrito em seu browser.
Vamos adicionar um parágrafo como o código destacado em vermelho a seguir.
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
document.write("Canal Fessor Bruno");
</script>
</head>
<body>
<p>Este texto é escrito em HTML</p>
</body>
</html>
Ao salvar as alterações e atualizar a página teremos o resultado conforme a ilustração a seguir.
A diferença é que o texto “Canal Fessor Bruno” é inserido via Javascript e o texto “Este texto é escrito em HTML” em parágrafo padrão HTML.
O comando write também pode inserir código HTML interpretável pelo browser, basta inserir normalmente as tags entre as aspas, veja o código em vermelho a seguir.
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
document.write("<p style='color:#F00'>Canal Fessor Bruno</p>");
</script>
</head>
<body>
<p>Este texto é escrito em HTML</p>
</body>
</html>
9
O comando anterior o método write insere o texto em formatação de parágrafo <p> na cor vermelho, veja a ilustração a seguir.
Outra observação importante é a diferenciação de textos e numerais, por exemplo, 50 e “50” são diferentes, quando usamos aspas, como já foi dito o conteúdo é tratado como texto/string, quando está sem aspas é um numeral e pode ser calculado. Veja o código a seguir
document.write("50"-5);
De uma forma geral este código está errado e o browser não consegue realizar este cálculo, porém, o Google Chrome, por exemplo, “pula” o erro, na verdade ele verifica que mesmo sendo uma string o conteúdo é um numeral e realiza o cálculo sem gerar erro, já o Internet Explorer não realiza o cálculo e não executa o comando, lembre-se que esse é o comportamento padrão.
Veja as ilustrações a seguir do Google Chrome à esquerda e Internet Explorer à direita, note que o Chrome mostra o cálculo e o I.E. não mostra.
Portanto a forma correta para este cálculo é o código a seguir.
document.write(50-5);
Neste caso o I.E. realiza o cálculo como mostrado a

Edição das 18h07min de 4 de abril de 2022

função console.log()

Esta função gera uma SAÍDA para o console, que é um tipo de interface de comunicação entre JS e o programador.

Podemos ativar o modo console para testar variáveis e outros dados em nosso código, por exemplo, se quisermos saber o valor de uma variável, sem ter que imprimi-la na tela (página web que está sendo construída).

Para usar a função console.log() e ver seu funcionamento, considere o código abaixo: 

<!doctype html>
<html lang=“pt-br”>
   <head>
     <title>Curso de Javascript</title>
     <meta charset=“UTF-8”>
     <script>
        num=20+30
        console.log(num);
     </script>
   </head>
<body>
</body>
</html>

Copie-o para um arquivo de texto simples, salve este arquivo com a extensão *.html" e abra-o em um navegador.

Na tela não é impresso nada, mas se ativarmos o modo console, pressionando a tecla “F12” ou clicando com o botão direito do mouse na tela e depois no menu "Inspecionar", o valor 50 será mostrado na janela de console:

PMCconsole.png

No Replit, o funcionamento da função console.log() é direto:

PMCconsole2.png

função document.write()

Como nosso curso será voltado para web, precisamos de uma página HTML para trabalhar com Javascript, inicialmente iremos trabalhar com código incorporado na própria página. Vamos usar o “Notepad++” como editor padrão, por possuir algumas facilidades, mas o bloco de notas pode ser usado sem problema nenhum. Crie um arquivo com o código básico HTML mostrado a seguir. <!doctype html> <html lang=“pt-br”> <head> <title>Curso de Javascript</title> <meta charset=“UTF-8”> <script> //Conteúdo Javascript </script> </head> <body> </body> </html> Uma linguagem de programação é fundamental ter um comando para saída de texto, no caso de Javascript temos o método “write”, vamos entender esse comando. Veja a sintaxe básica do comando. document.write(“Texto a ser mostrado”); Dentro dos parênteses inserimos o conteúdo que será impresso no browser, quando o conteúdo não for um cálculo ou o valor de uma variável, quando for um texto simples, deve vir entre aspas, basicamente é o que chamamos de string. Adicione o código destacado em vermelho no código a seguir. <!doctype html> <html lang=“pt-br”> <head> <title>Curso de Javascript</title> <meta charset=“UTF-8”> <script> document.write("Canal Fessor Bruno"); </script> </head> <body> </body> </html> 8 Salve as alterações e abra o arquivo em seu browser. O resultado será o texto “Canal Fessor Bruno” sem aspas escrito em seu browser. Vamos adicionar um parágrafo como o código destacado em vermelho a seguir. <!doctype html> <html lang=“pt-br”> <head> <title>Curso de Javascript</title> <meta charset=“UTF-8”> <script> document.write("Canal Fessor Bruno"); </script> </head> <body>

Este texto é escrito em HTML

</body> </html> Ao salvar as alterações e atualizar a página teremos o resultado conforme a ilustração a seguir. A diferença é que o texto “Canal Fessor Bruno” é inserido via Javascript e o texto “Este texto é escrito em HTML” em parágrafo padrão HTML. O comando write também pode inserir código HTML interpretável pelo browser, basta inserir normalmente as tags entre as aspas, veja o código em vermelho a seguir. <!doctype html> <html lang=“pt-br”> <head> <title>Curso de Javascript</title> <meta charset=“UTF-8”> <script>

document.write("

Canal Fessor Bruno

");

</script> </head> <body>

Este texto é escrito em HTML

</body> </html> 9

O comando anterior o método write insere o texto em formatação de parágrafo

na cor vermelho, veja a ilustração a seguir. Outra observação importante é a diferenciação de textos e numerais, por exemplo, 50 e “50” são diferentes, quando usamos aspas, como já foi dito o conteúdo é tratado como texto/string, quando está sem aspas é um numeral e pode ser calculado. Veja o código a seguir document.write("50"-5); De uma forma geral este código está errado e o browser não consegue realizar este cálculo, porém, o Google Chrome, por exemplo, “pula” o erro, na verdade ele verifica que mesmo sendo uma string o conteúdo é um numeral e realiza o cálculo sem gerar erro, já o Internet Explorer não realiza o cálculo e não executa o comando, lembre-se que esse é o comportamento padrão. Veja as ilustrações a seguir do Google Chrome à esquerda e Internet Explorer à direita, note que o Chrome mostra o cálculo e o I.E. não mostra. Portanto a forma correta para este cálculo é o código a seguir. document.write(50-5); Neste caso o I.E. realiza o cálculo como mostrado a

Disponível em “https://wiki.ifsc.edu.br/index.php?title=Funções_mais_usadas&oldid=20799”