 |
|
||||
Você está aqui: JavaScript ::: Fundamentos da Linguagem ::: Comentários |
Tutorial JavaScript para iniciantes - Como inserir comentários em seus códigos JavaScriptQuantidade de visualizações: 1144 vezes |
|
Comentários em nossos códigos são sempre uma boa idéia. Primeiro porque, no momento que estamos escrevendo, a lógica está fresca em nossa cabeça. Porém, alguns dias depois podemos não entender muito bem a estratégia usada na resolução de um determinado problema. Além disso, os compiladores e interpretadores ignoram por completo os comentários inseridos em nossos códigos. A outra razão para o uso de comentários é facilitar o trabalho da pessoa que dará manutenção em nossos códigos, ou talvez permitir um melhor entendimento por parte do cliente que nos contratou para desenvolver uma determinada rotina. Comentários em JavaScript podem ser usados de duas formas diferentes. Para comentários de múltiplas linhas, devemos usar a sintáxe da linguagem C/C++ e Java (aproveito para lembrar que JavaScript não é Java). Veja: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
/*
Este é um exemplo de comentário de múltiplas
linhas. Você pode usar quantas linhas quiser neste
tipo de comentário. Este tipo de comentário é o mesmo
usado nas linguagens C/C++ e Java.
*/
var valor = 15;
document.writeln("O valor informado é: " + valor);
</script>
</body>
</html>
Podemos usar comentários de uma linha apenas, usando a sintáxe das linguagens C++ e Java. Veja: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
var valor = 30; // Define o valor da variável
document.writeln("O valor informado é: " + valor);
</script>
</body>
</html>
Lembre-se! Na dúvida, comente o seu código. Se não conseguir comentar cada função, comente no mínimo as partes mais importantes e talvez, as mais difíceis de entender decorrido um tempo. Palavra de programador. |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como converter uma string em um valor de ponto-flutuante em JavaScript usando a função parseFloat()Quantidade de visualizações: 7821 vezes |
|
Em algumas situações nós precisamos receber uma string informada pelo usuário e convertê-la para um valor real válido. Um valor em JavaScript é o mesmo que um valor com casas decimais, ou seja, um valor de ponto-flutuante. Esta tarefa pode ser realizada com o auxílio da função parseFloat(). Veja uma página HTML completa demonstrando o seu uso: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Strings em JavaScript</title> </head> <body> <script type="text/javascript"> var valor1 = "87.32"; var valor2 = "Arquivo"; var valor3 = "65,54"; // vamos exibir os resultados document.write(parseFloat(valor1) + "<br>"); document.write(parseFloat(valor2) + "<br>"); document.write(parseFloat(valor3)); </script> </body> </html> Ao executarmos este código JavaScript nós teremos o seguinte resultado: 87.32 NaN 65 Note que apenas a primeira string pôde ser convertida para um valor fracionário com sucesso. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como retornar o índice da primeira ocorrência de um elemento em um array do JavaScript usando a função indexOf()Quantidade de visualizações: 2401 vezes |
|
Em algumas ocasiões nós precisamos obter e retornar o índice da primeira ocorrência de um determinado elemento em um array JavaScript. Para isso podemos usar a funções indexOf(). Se o elemento não puder ser encontrado, o valor -1 é retornado. Veja um exemplo de seu uso: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
var valores = new Array(1, 2, 3, 2, 2, 4, 5);
// vamos obter o índice da primeira ocorrência
// do elemento com o valor 2
var indice = valores.indexOf(2);
window.alert("Elemento encontrado no índice: "
+ indice);
</script>
Execute o código e veja que o elemento foi encontrado no índice 1, ou seja, na segunda posição do array, já que os índices de vetor e matriz em JavaScript começam a partir de 0. Experimente pesquisar o valor 50 e verá que o valor retornado é -1, indicando que o elemento não foi encontrado. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Adicionando três elementos ao final de um vetor em JavaScript usando o método push() do objeto Array - Como adicionar elementos ao final de um vetor usando JavaScript - RevisadoQuantidade de visualizações: 7184 vezes |
Neste dica mostrarei como usar o método push() do objeto Array da linguagem JavaScript para adicionar três elementos ao final de um vetor. Veja o código completo, incluindo a página HTML que permite executar o exemplo:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<meta charset="utf-8">
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos declarar e instanciar um vetor com 5 elementos
var valores = new Array(1, 2, 3, 4, 5);
document.write("Valores no vetor: " + valores + "<br>");
// agora vamos adicionar mais três elementos
valores.push(6, 7, 8);
document.write("Valores no vetor: " + valores);
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado: Valores no vetor: 1,2,3,4,5 Valores no vetor: 1,2,3,4,5,6,7,8 |
JavaScript ::: Elementos de Formulários HTML ::: input type file Element/Object |
Como obter a quantidade de arquivos que o usuário selecionou em um input type fileQuantidade de visualizações: 4118 vezes |
Em algumas situações nós precisamos saber quantos arquivos o usuário selecionou em um elemento input type file. Para isso podemos usar a propriedade length do FileList que representa a lista de arquivos no input file. Veja o exemplo a seguir:----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Estudos JavaScript</title>
</head>
<body>
<form>
<input id="arquivo" onChange="contarArquivos()" name="arquivo" multiple type="file">
</form>
<script type="text/javascript">
function contarArquivos(){
// vamos obter uma referência ao elemento file
var arquivo = document.getElementById("arquivo");
// agora vamos obter a quantidade de arquivos que o usuário selecionou
var quantArquivos = arquivo.files.length;
// mostramos o resultado
window.alert("Você selecionou " + quantArquivos + " arquivos.");
}
</script>
</body>
</html>
Note que tiramos proveito do evento onChange() do input file para obter a informação desejada no exato momento que o usuário escolhe o(s) arquivos(s). Neste exemplo eu criei um input file multiple, ou seja, o usuário pode escolher mais de um arquivo por vez (em geral pressionando a tecla Ctrl para múltiplas seleções). |
JavaScript ::: DOM (Document Object Model) ::: window Object (Objeto window) |
Como usar o objeto window em suas aplicações HTML + JavaScriptQuantidade de visualizações: 8791 vezes |
|
O objeto window representa a janela do browser, uma janela em um frame ou janela de diálogo contendo um documento HTML. Este objeto fornece várias informações a respeito da janela (name, navigator, location, history, etc.), permite acesso ao documento contido na janela e suporta vários métodos úteis (alert(), confirm(), addEventListener(), attachEvent(), etc). Veja uma página HTML na qual temos um código JavaScript que acessa a janela atual e usa seu método alert() para exibir uma mensagem ao usuário: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos exibir uma mensagem ao usuário
window.alert("JavaScript é muito bacana!");
</script>
</body>
</html>
O objeto window pode também representar uma janela contida em um frame ou em um elemento iframe, ou ainda em uma janela secundária (criada com os métodos open(), showModalDialog() ou showModelessDialog()). Eis algumas observações que devem ser bem memorizadas: a) Se a janela estiver contida em um frame ou elemento iframe, ela é uma janela filha da janela que contém o elemento frame. Para obter a janela mãe só precisamos usar a propriedade parent da janela filha. Veja: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> // vamos obter a janela mãe var janela_mae = window.parent; </script> b) Se a janela for aberta por meio dos métodos open(), showModalDialog() ou showModelessDialog(), então a janela que a criou pode ser acessada por meio da propriedade opener. Os membros da janela atual podem ser acessados diretamente, sem a necessidade de passarmos pelo objeto window, ou seja, podemos usar alert() em vez de window.alert(), ainda que a última forma é a preferida. O objeto window está disponível para acesso a partir de qualquer ponto de nossos códigos JavaScript. Assim, devemos nos esforçar ao máximo para não termos variáveis com o mesmo nome das propriedades e métodos deste objeto. Dica escrita e testada no Internet Explorer (IE 8) e no Firefox 3.6. |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como resolver uma equação do segundo grau em JavaScript - Como calcular Bhaskara em JavaScriptQuantidade de visualizações: 870 vezes |
|
Como resolver uma equação do 2º grau usando JavaScript Nesta dica mostrarei como encontrar as raízes de uma equação quadrática, ou seja, uma equação do 2º usando a linguagem JavaScript. Definimos como equação do 2º grau ou equações quadráticas qualquer equação do tipo ax² + bx + c = 0 em que a, b e c são números reais e a ≠ 0. Ela recebe esse nome porque, no primeiro membro da igualdade, há um polinômio de grau dois com uma única incógnita. Note que, dos coeficientes a, b e c, somente o a é diferente de zero, pois, caso ele fosse igual a zero, o termo ax² seria igual a zero, logo a equação se tornaria uma equação do primeiro grau: bx + c = 0. Independentemente da ordem da equação, o coeficiente a sempre acompanha o termo x², o coeficiente b sempre acompanha o termo x, e o coeficiente c é sempre o termo independente. Como resolver uma equação do 2º grau Conhecemos como soluções ou raízes da equação ax² + bx + c = 0 os valores de x que fazem com que essa equação seja verdadeira. Uma equação do 2º grau pode ter no máximo dois números reais que sejam raízes dela. Para resolver equações do 2º grau completas, existem dois métodos mais comuns: a) Fórmula de Bhaskara; b) Soma e produto. O primeiro método é bastante mecânico, o que faz com que muitos o prefiram. Já para utilizar o segundo, é necessário o conhecimento de múltiplos e divisores. Além disso, quando as soluções da equação são números quebrados, soma e produto não é uma alternativa boa. Como resolver uma equação do 2º grau usando Bhaskara Como nosso código JavaScript vai resolver a equação quadrática usando a Fórmula de Bhaskara, o primeiro passo é encontrar o determinante. Veja: \[\Delta =b^2-4ac\] Nem sempre a equação possui solução real. O valor do determinante é que nos indica isso, existindo três possibilidades: a) Se determinante > 0, então a equação possui duas soluções reais. b) Se determinante = 0, então a equação possui uma única solução real. c) Se determinante < 0, então a equação não possui solução real. Encontrado o determinante, só precisamos substituir os valores, incluindo o determinante, na Fórmula de Bhaskara: \[x = \dfrac{- b\pm\sqrt{b^2- 4ac}}{2a}\] Vamos agora ao código JavaScript. Nossa aplicação vai pedir para o usuário informar os valores dos três coeficientes a, b e c e, em seguida, vai apresentar as raizes da equação: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Aprenda Matemática Usando JavaScript</title>
</head>
<body>
<script type="text/javascript">
// os coeficientes
var a, b, c;
// as duas raizes, a imaginaria e o discriminante
var raiz1, raiz2, imaginaria, discriminante;
// vamos pedir para o usuário informar os valores dos coeficientes
a = parseFloat(window.prompt("Valor do coeficiente a: "));
b = parseFloat(window.prompt("Valor do coeficiente b: "));
c = parseFloat(window.prompt("Valor do coeficiente c: "));
// vamos calcular o discriminante
discriminante = (b * b) - (4 * a * c);
// a equação possui duas soluções reais?
if(discriminante > 0){
raiz1 = (-b + Math.sqrt(discriminante)) / (2 * a);
raiz2 = (-b - Math.sqrt(discriminante)) / (2 * a);
document.write("Existem duas raizes: x1 = " + raiz1
+ " e x2 = " + raiz2);
}
// a equação possui uma única solução real?
else if(discriminante == 0){
raiz1 = raiz2 = -b / (2 * a);
document.write("Existem duas raizes iguais: x1 = "
+ raiz1 + " e x2 = " + raiz2);
}
// a equação não possui solução real?
else if(discriminante < 0){
raiz1 = raiz2 = -b / (2 * a);
imaginaria = Math.sqrt(-discriminante) / (2 * a);
document.write("Existem duas raízes complexas: x1 = " +
raiz1 + " + " + imaginaria + " e x2 = " + raiz2
+ " - " + imaginaria);
}
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Valor do coeficiente a: 1 Valor do coeficiente b: 2 Valor do coeficiente c: -3 Existem duas raizes: x1 = 1 e x2 = -3 |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como filtrar os elementos de um array em JavaScript usando a função filter() - Vetores e matrizes em JavaScriptQuantidade de visualizações: 2477 vezes |
|
O método filter(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) nos permite criar um novo vetor contendo apenas os elementos que passarem em um determinado teste, que pode ser uma função de usuário personalizada. Esta função é uma função de callback que será chamada uma vez para cada um dos elementos do vetor. Para melhor entendimento, comece analisando o trecho de código abaixo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
function maiorQue10(valor){
return valor > 10;
}
// vamos criar um vetor de inteiros
var valores = [2, 6, 32, 9, 3, 21];
// vamos filtrar o vetor para obter apenas os
// valores maiores que 10
var maiores10 = valores.filter(maiorQue10);
// vamos mostrar o resultado
window.alert(maiores10);
</script>
Neste código usamos o método filter() para gerar um novo vetor contendo apenas os elementos com valores maiores que 10. Veja que fornecemos uma função como argumento para o método filter() e, dentro dessa função, nós retornamos true ou false para que a filtragem inclua ou não o valor sendo analisado no momento. Uma função passada para o método filter() pode conter os seguintes argumentos (nessa mesma ordem): a) O valor do item; b) O índice do item (opcional); c) O vetor a partir do qual o método filter() está sendo chamado (opcional). Veja mais um trecho de código no qual retornamos os elementos de um array maiores que 10 e precedidos de um número par: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<script type="text/javascript">
function maiorQue10PrecPar(valor, indice, vetor){
// o primeiro elemento não é precedido por
// outro. Vamos descartá-lo
if(indice == 0){
return false;
}
// é precedido por um número par?
if(vetor[indice - 1] % 2 == 0){
// é maior que 10?
return valor > 10;
}
// nenhuma das condições acima?
return false;
}
// vamos criar um vetor de inteiros
var valores = [2, 6, 32, 9, 3, 21];
// vamos filtrar o vetor para obter apenas os
// valores maiores que 10 e precedidos por um
// número par
var maiores10 = valores.filter(maiorQue10PrecPar);
// vamos mostrar o resultado
window.alert(maiores10);
</script>
Execute este código e verá que apenas o valor 32 será retornado, pois ele é o único maior que 10 e precedido por um número par. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como remover os espaços no final de uma string em JavaScript usando uma função trim_final() personalizadaQuantidade de visualizações: 101 vezes |
|
Há muitos anos eu precisava remover espaços no final de uma string em JavaScript e percebi que o objeto String, na época, não oferecia a função trim(). Não me restou opção a não ser sentar e escrever o código na mão mesmo. Hoje em dia não precisamos mais dele, mas fica aí para que você entenda a lógica empregada na resolução do problema. Veja a página HTML completa com o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda para ajustar o código abaixo de acordo com as
suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar)
Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar
a manter o site livre de anúncios. Ficaremos eternamente gratos ;-)
Nosso PIX é: osmar@arquivodecodigos.com.br
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Strings em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função personalizada que remove os espaços
// no final de uma string
function trim_final(string){
// primeiro definimos o código do espaço
var espaco = String.fromCharCode(32);
// obtemos o tamanho da string
var tamanho = string.length;
// e criamos uma string temporária
var temp = "";
// a string está vazia?
if(tamanho < 0){
return "";
}
// uma variável temporária para percorrermos
// a string de trás para frente
var temp2 = tamanho - 1;
while(temp2 > -1){
if(string.charAt(temp2) == espaco){
// não faz nada
}
else{
temp = string.substring(0, temp2 + 1);
break;
}
// decrementamos a variável temp2
temp2--;
}
return temp;
}
// vamos testar a função trim_final()
var frase = "Gosto muito de JavaScript ";
document.write("Com espaços no final: " +
frase + "#" + "<br>");
// vamos remover os espaços no final da string
frase = trim_final(frase);
document.write("Sem espaços no final: " +
frase + "#" + "<br>");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Com espaços no final: Gosto muito de JavaScript # Sem espaços no final: Gosto muito de JavaScript# |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
