Edição atual tal como às 16h20min 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 o evento alert().

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:

SINTAXE

confirm(texto_variaveis);

Exemplos

confirm("Tem Certeza??");

Vai exibir a janela popup:

Já esta instrução confirm() faz várias coisas:

if (window.confirm("Você realmente quer sair?")) {
 window.open("sair.html", "Obrigado pela visita!");
}

Vai exibir a janela popup:

e caso seja pressionado o botão Ok, imprime "Obrigado pela visita!" na página atual e abre outra página web, gravada na mesma pasta, com o nome "sair.html".

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

Função Number()

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.

Number: var aNumber = Number(window.prompt("Digite um número", ""));

Função parseInt()

O JavaScript possui funções de conversão de string para number: var textoInteiro = "10"; var inteiro = parseInt(textoInteiro); var textoFloat = "10.22"; var float = parseFloat(textoFloat);

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.

<<= Página do curso

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

Edição atual tal como às 16h20min de 26 de abril de 2022

Índice

Função console.log()

SINTAXE

Função console.log() na página web

função console.log() no Node.js

Função document.write()

SINTAXE

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Evento alert()

SINTAXE

Exemplo:

Evento confirm()

SINTAXE

Exemplos

Evento window.prompt()

SINTAXE

Exemplos

Função Number()

SINTAXE

Função parseInt()

SINTAXE

Menu de navegação

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

Edição atual tal como às 16h20min de 26 de abril de 2022

Função console.log()

SINTAXE

Função console.log() na página web

função console.log() no Node.js

Função document.write()

SINTAXE

Exemplo 1

Exemplo 2

Exemplo 3

Exemplo 4

Evento alert()

SINTAXE

Exemplo:

Evento confirm()

SINTAXE

Exemplos

Evento window.prompt()

SINTAXE

Exemplos

Função Number()

SINTAXE

Função parseInt()

SINTAXE

Menu de navegação

Pesquisa