Funções mais usadas: mudanças entre as edições
imported>Fargoud |
imported>Fargoud |
||
| Linha 4: | Linha 4: | ||
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). | 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). | ||
==função ''console.log()'' na página web== | |||
Para usar a função ''console.log()'' e ver seu funcionamento, considere o código abaixo: | Para usar a função ''console.log()'' e ver seu funcionamento, considere o código abaixo: | ||
| Linha 26: | Linha 28: | ||
[[image: PMCconsole.png|center]] | [[image: PMCconsole.png|center]] | ||
==função ''console.log()'' no Node.js== | |||
No Replit, o funcionamento da função ''console.log()'' é direto: | No Replit, o funcionamento da função ''console.log()'' é direto: | ||
[[image: PMCconsole2.png|center]] | [[image: PMCconsole2.png|center]] | ||
Você escreve o código na tela da esquerda, e já verifica a saída na tela da direita, após clicar o botão "Run". | |||
=função ''document.write()''= | =função ''document.write()''= | ||
Edição das 18h09min 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).
função console.log() na página web
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:
função console.log() no Node.js
No Replit, o funcionamento da função console.log() é direto:
Você escreve o código na tela da esquerda, e já verifica a saída na tela da direita, após clicar o botão "Run".
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