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

De IFSC
Ir para navegação Ir para pesquisar
imported>Fargoud
imported>Fargoud
 
(11 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 7: Linha 7:
A sintaxe da função é:
A sintaxe da função é:


  ''console.log("texto a ser mostrado");
''<pre style="color: red"> console.log("texto a ser mostrado"); </pre>''


ou
ou


  ''console.log(variavel);''
''<pre style="color: red"> console.log(variavel);</pre>''
 
 
    
    
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).
Linha 57: 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 148: Linha 153:


------------
------------
=Evento ''''' alert()'''''=
=Evento ''''' alert()'''''=


Para exibirmos um texto qualquer em uma janela ''popup'', antes da abertura da página, utilizamos a instrução:
Para exibirmos um texto qualquer em uma janela ''popup'', antes da abertura da página, utilizamos o evento '''''alert()'''''.


==SINTAXE==
==SINTAXE==
Linha 167: Linha 173:


   [[image: exemplostr4.png|center]]
   [[image: exemplostr4.png|center]]


=Evento ''''' confirm()'''''=
=Evento ''''' confirm()'''''=
Linha 174: Linha 179:
exibe uma caixa de diálogo e os botões de OK e CANCELAR.  
exibe uma caixa de diálogo e os botões de OK e CANCELAR.  


Caso seja
Caso seja pressionado o botão OK, o método retornará o valor booleano TRUE e
pressionado o botão OK, o método retornará o valor booleano TRUE e
pressionado o botão CANCELAR, é retornado o valor FALSE.
pressionado o botão CANCELAR, é retornado o valor FALSE.


Linha 182: Linha 186:


Assim como o método alert(), o método confirm é pertencente ao
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
objeto window, sendo seu uso opcional, observe sua sintaxe abaixo:
exemplo da caixa de diálogo presente na figura a seguir:
 
==SINTAXE==
 
''<pre style="color: red"> confirm(texto_variaveis);</pre>''


==Exemplo==
==Exemplos==


  confirm("Tem Certeza??");
  confirm("Tem Certeza??");
Linha 192: Linha 199:


   [[image: Exconfirm.png|center]]
   [[image: Exconfirm.png|center]]
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'':
  [[image: Exconfirm2.png|center]]
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()''''' =
=Evento ''''' window.prompt()''''' =
Linha 198: Linha 218:
   
   


==Sintaxe==
==SINTAXE==


  ''<pre style="color: red">resultado = window.prompt(texto, valor);</pre>''
  ''<pre style="color: red">resultado = window.prompt(texto, valor);</pre>''
Linha 206: Linha 226:
* <code>valor</code> é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional.
* <code>valor</code> é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional.


==Exemplo==
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 <code>texto</code> é retornado.
 
Se o usuário pressionar OK sem ter digitado qualquer texto, e se o campo <code>valor</code> 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 <code>resultado</code> é 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==
 
 
[[image: ExemplArrays3.png|center]]
 
[[image: ExemplArrays1.png|center]]
 
[[image: ExemplArrays2.png|center]]
 
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?");
  var mes = prompt("Qual é o mês do seu nascimento?");
Linha 219: Linha 265:
  var sign = 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 com sorte'); // abrir uma janela com o texto "Você está se sentindo com sorte"
  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 com sorte', 'certamente'); // abrir uma janela com o texto "Você está se sentindo com sorte" e com o valor padrão "certamente"
  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
Copy to Clipboard


Quando o usuário pressiona o botão OK, o texto digitado no campo de texto é retornado. Se o usuário pressionar OK sem ter digitado qualquer texto, uma cadeia de caracteres vazia é retornada. Se o usuário pressionar o botão Cancelar, esta função retornará null.


FIXME: external image! O prompt acima aparece da seguinte forma (no Chrome do Windows 7):




=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==
''<pre style="color: red">resultado = window.prompt(texto, valor);</pre>''
* <code>resultado</code> é uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.
* <code>texto</code> é 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.
* <code>valor</code> é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional.


Notas
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.
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 (possivelmente vazio) texto que o usuário digitou naquela caixa de texto.


The following text is shared between this article, DOM:window.confirm and DOM:window.alertAs 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).
Quando o usuário pressiona o botão OK, o texto digitado no campo <code>texto</code> é retornado.  


Por favor, note que o resultado é uma cadeia de caracteres. 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 Number: var aNumber = Number(window.prompt("Digite um número", ""));  
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==
 
''<pre style="color: red">resultado = window.prompt(texto, valor);</pre>''
 
* <code>resultado</code> é uma cadeia de caracteres contendo o texto digitado pelo usuário, ou um valor nulo.
* <code>texto</code> é 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.
* <code>valor</code> é uma cadeia de caracteres contendo o valor padrão exibido na caixa de entrada de texto. É um parâmetro opcional.


Os códigos do Mozilla Chrome (e.g. Firefox extensions) ao invés disso, devem usar os métodos da interface nsIPromptService.
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.


No Safari, se o usuário clicar em Cancelar, a função retornará uma cadeia de caracteres vazia. Portanto, ele não diferenciará o cancelamento do usuário de uma cadeia de caracteres vazia na caixa de texto.
Quando o usuário pressiona o botão OK, o texto digitado no campo <code>texto</code> é retornado.  


Esta função não tem efeito na versão Modern UI/Metro do Internet Explorer para Windows 8. Ele não exibe o prompt para o usuário, e sempre retornará undefined. Não está claro se é um erro ou um comportamento intencional. Versões desktop do IE implementam esta função.


Especificação


----------------
----------------


[[JS_-_A_Linguagem_de_programação_JavaScript | <<= Página do curso ]]
[[JS_-_A_Linguagem_de_programação_JavaScript | <<= Página do curso ]]

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:

PMCconsole.png


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

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

PMCconsole2.png

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á:

PMCexweb2.png


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.

PMCexweb3.png

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).

PMCexweb4.png

,

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:

PMCexweb5-2.png

Vai resultar na página:

PMCexweb5.png

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:

Exemplostr4.png

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:

Exconfirm.png

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:

Exconfirm2.png
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

ExemplArrays3.png
ExemplArrays1.png
ExemplArrays2.png

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

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