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

De IFSC
Ir para navegação Ir para pesquisar
imported>Fargoud
imported>Fargoud
 
(28 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
=função ''console.log()''=
=Função '''''console.log()'''''=


Esta função gera uma SAÍDA para o [https://developer.mozilla.org/pt-BR/docs/Tools/Browser_Console console], que é um tipo de interface de comunicação entre JS e o programador.]
Esta função gera uma SAÍDA para o [https://developer.mozilla.org/pt-BR/docs/Tools/Browser_Console console], que é um tipo de interface de comunicação entre JS e o programador.]
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).


==função ''console.log()'' na página web==
==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 48: Linha 50:
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".
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()'''''=




Linha 56: 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 107: Linha 113:
==Exemplo 3 ==
==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.
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>
   <!doctype html>
Linha 115: Linha 121:
       <meta charset=“UTF-8”>
       <meta charset=“UTF-8”>
           <script>
           <script>
      '''<nowiki>  document.write("<p style='color:#0000FF'>Profa Fernanda</p>");</nowiki>'''
        '''<nowiki>  document.write("<p style='color:#0000FF'>Profa Fernanda</p>");</nowiki>'''
           </script>
           </script>
   </head>
   </head>
Linha 123: Linha 129:
   </html>
   </html>


O comando anterior o método write insere o texto em formatação de parágrafo <p> na cor vermelho, veja a ilustração a seguir.
Aqui o método write insere o texto em formatação de parágrafo <nowiki><p></nowiki> na cor AZUL.
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);
As cores, em HTML, seguem o [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 de cores RGB], que estabelece a quantidade de vermelho (Red), Verde (Green) e Azul (Blue) que vai ter a cor.  
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.
Assim, a cor azul pura, ou "0000ff", é composta de R=00, G=00, B=xFF (que é igual a 255, em números decimais).
Portanto a forma correta para este cálculo é o código a seguir.
 
document.write(50-5);
[[image: PMCexweb4.png|center]],
Neste caso o I.E. realiza o cálculo como mostrado a
 
==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:
 
[[image: PMCexweb5-2.png|center]]
 
Vai resultar na página:
 
[[image: PMCexweb5.png|center]]
 
------------
 
=Evento ''''' alert()'''''=
 
Para exibirmos um texto qualquer em uma janela ''popup'', antes da abertura da página, utilizamos o evento '''''alert()'''''.
 
==SINTAXE==
 
''<pre style="color: red"> alert(texto_variaveis);</pre>''
 
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:
 
  [[image: exemplostr4.png|center]]
 
=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==
 
''<pre style="color: red"> confirm(texto_variaveis);</pre>''
 
==Exemplos==
 
confirm("Tem Certeza??");
 
Vai exibir a janela ''popup'':
 
  [[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()''''' =
 
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.
 
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?");
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==
 
''<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.
 
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.
 
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.
 
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.
 
 
 
----------------
 
[[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”