Funções mais usadas: mudanças entre as edições
imported>Fargoud |
imported>Fargoud |
||
| Linha 59: | Linha 59: | ||
==SINTAXE== | ==SINTAXE== | ||
''document.write(“Texto a ser mostrado”);'' | A sintaxe da função é: | ||
''<pre style="color: red">document.write(“Texto a ser mostrado”);</pre>'' | |||
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''. | 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''. | ||
| Linha 150: | Linha 153: | ||
------------ | ------------ | ||
=Evento ''''' alert()'''''= | =Evento ''''' alert()'''''= | ||
Edição das 10h31min de 26 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
A sintaxe da função é:
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 método 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.
As cores, em HTML, seguem o código de cores RGB, que estabelece a quantidade de vermelho (Red), Verde (Green) e Azul (Blue) que vai ter a cor.
Assim, a cor azul pura, ou "0000ff", é composta de R=00, G=00, B=xFF (que é igual a 255, em números decimais).
,
Exemplo 4
O método write() também pode imprimir valores. Para isto, basta NÃO utilizar as aspas.
O browser, ou navegador, vai interpretar o código como valor/número, executar o cálculo, se necessário e imprimir o valor final:
Por exemplo, o código:
Vai resultar na página:
Evento alert()
Para exibirmos um texto qualquer em uma janela popup, antes da abertura da página, utilizamos a instrução:
SINTAXE
alert(texto_variaveis);
O evento alert() também exibe um botão de Ok o qual, apenas depois de pressionado, vai fechar a janela e abrir a página.
Exemplo:
let Curso = "JavaScript";
let dia = 18 , mes= "maio", ano = 2022;
alert("CURSO DE " + Curso +" Data de início: "+ dia + "/" + mes + "/" + ano);
Vai exibir a seguinte janela popup, antes da abertura da página:
Evento confirm()
Uma outra alternativa, além do método alert(), está no método confirm() que exibe uma caixa de diálogo e os botões de OK e CANCELAR.
Caso seja pressionado o botão OK, o método retornará o valor booleano TRUE e pressionado o botão CANCELAR, é retornado o valor FALSE.
Com isto, o usuário poderá determinar uma tomada de decisão dentro de seu script.
Assim como o método alert(), o método confirm é pertencente ao objeto window, sendo seu uso opcional, observe sua sintaxe abaixo e veja o exemplo da caixa de diálogo presente na figura a seguir:
Exemplos
confirm("Tem Certeza??");
Vai exibir a janela popup:
if (window.confirm("Você realmente quer sair?")) {
window.open("sair.html", "Obrigado pela visita!");
}
Vai exibir a janela popup:
Evento window.prompt()
O window.prompt() exibe uma caixa de diálogo com uma mensagem opcional solicitando ao usuário a entrada de algum texto.
Sintaxe
resultado = window.prompt(texto, valor);
resultadoé uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.textoé uma cadeia de caracteres para exibir ao usuário. Este parâmetro é opcional e pode ser omitido se não há nada para mostrar na janela de prompt.valoré uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional.
Uma caixa de diálogo prompt contém uma caixa de texto de linha única, um botão Cancelar, e um botão OK, e retorna o texto que o usuário digitou naquela caixa de texto.
Quando o usuário pressiona o botão OK, o texto digitado no campo texto é retornado.
Se o usuário pressionar OK sem ter digitado qualquer texto, e se o campo valor não foi adicionado, uma cadeia de caracteres vazia é retornada.
Se o usuário pressionar o botão Cancelar, esta função retornará null.
OBSERVAÇÃO!
Note que resultado é sempre uma cadeia de caracteres, uma string. Isso significa que você deve, algumas vezes, converter o valor dado pelo usuário. Por exemplo, se a resposta deve ser um número, você deve converter o valor para número, por exemplo, utilizando a função Number(), ou a função parserInt(), parserFloat(), etc.
OBSERVAÇÃO 2! As caixas de diálogo são janelas modais; eles impedem o usuário de acessar o resto da interface do programa até que a caixa de diálogo seja fechada. Por esta razão, você não deve abusar de qualquer função que crie uma caixa de diálogo (ou janela modal).
Exemplos
Ao executar o código acima, serão exibidas duas janelas no comando “window.prompt” e o que for digitado será inserido na variável correspondente. A opção “Impedir que esta página crie caixas de diálogo adicionais” foi adicionada pelo próprio navegador.
var mes = prompt("Qual é o mês do seu nascimento?");
if (mes.toLowerCase() == "julho") {
alert("Legal! Eu sou de julho também!");
}
Há muitas formas de se usar o recurso prompt
var sign = window.prompt(); // abrir uma janela de promtpt em branco
var sign = prompt(); // abrir uma janela de promtpt em branco
var sign = window.prompt('Você está se sentindo abençoado?'); // abrir uma janela com o texto "Você está se sentindo com sorte"
var sign = window.prompt('Você está se sentindo abençoado?', 'certamente'); // abrir uma janela com o texto "Você está se sentindo com sorte" e com o valor padrão "certamente"
Copy to Clipboard
Number: var aNumber = Number(window.prompt("Digite um número", ""));