Funções mais usadas: mudanças entre as edições
imported>Fargoud |
imported>Fargoud |
||
| Linha 123: | Linha 123: | ||
</html> | </html> | ||
Aqui o método write insere o texto em formatação de parágrafo <nowiki><p></nowiki> na cor AZUL (isto é, [https://dicasdeprogramacao.com.br/entenda-como-funcionam-os-codigos-de-cores-rgb/#:~:text=Um%20c%C3%B3digo%20RGB%20%C3%A9%20uma,juntas%2C%20s%C3%B3%20que%20em%20Hexadecimal.&text=Podemos%20perceber%20que%20os%20c%C3%B3digos,2%20d%C3%ADgitos%20para%20cada%20cor. código RGB] = "0000ff", isto é, R=00, G=00, B=xff). | |||
[[image: PMCexweb4.png|center]] | |||
Outra observação importante é a diferenciação de textos e numerais. | Outra observação importante é a diferenciação de textos e numerais. | ||
Edição das 16h39min de 5 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.]
SINTAXE
A sintaxe da função é:
console.log("texto a ser mostrado");
ou
console.log(variavel);
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()
Em uma linguagem de programação é fundamental ter um comando para saída de texto. Em Javascript, temos o método “write”, que escreve um texto na página web.
SINTAXE
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.
Exemplo 1
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
document.write("Profa Fernanda Argoud");
</script>
</head>
<body>
</body>
</html>
Salve as alterações e abra o arquivo em seu browser. O resultado será:
Exemplo 2
Agora, para diferenciar, vamos adicionar um parágrafo HTML, como o código destacado abaixo:
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de JS - Meninas Cientistas</title>
<meta charset=“UTF-8”>
<script>
document.write("Profa Fernanda Argoud");
</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 “Profa Fernanda Argoud” é inserido via JS, e o texto “Este texto é escrito em HTML”, em parágrafo padrão HTML.
Exemplo 3
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 a seguir.
<!doctype html>
<html lang=“pt-br”>
<head>
<title>Curso de Javascript</title>
<meta charset=“UTF-8”>
<script>
document.write("<p style='color:#0000FF'>Profa Fernanda</p>");
</script>
</head>
<body>
<p>Este texto é escrito em HTML</p>
</body>
</html>
Aqui o método write insere o texto em formatação de parágrafo <p> na cor AZUL (isto é, código RGB = "0000ff", isto é, R=00, G=00, B=xff).
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