Pular para o conteúdo principal

Postagens

Mostrando postagens com o rótulo javascript

JS - Um pouco mais sobre Arrays

No Javascript um "array" é na verdade um objeto, que possui suas propriedades e métodos, independente de seu conteúdo, e hoje falaremos de uma propriedade para recuperar o total de itens e de um método para incluir novos elementos. Propriedade length É a propriedade de um "array" que nos indica a quantidade de itens que existem atualmente nesse "array", com essa informação poderíamos, por exemplo, percorrer todos os elementos de um "array" por meio de um "loop": var arr = [ 10, 20, 30, 40, 50, 'Teste', true]; var pos = 0; while (pos < arr.length) {    console.log(arr[pos]);    pos++; } Método push Método usado para incluir elementos no final de um "array", sendo esses elementos números, textos, objetos, outros arrays ou até mesmo funções: arr.push(999); arr.push('Novo teste'); arr.push( { pessoa: 'Teresa'} ); arr.push( function primo(x) { return x % 2 === 0; }

JS - Operador módulo

Retorna o resto da divisão entre dois inteiros (matemática básica), enquanto o operador de divisão "/" nos retorna o resultado da divisão o operador de módulo "%" nos retorna o resto da divisão. 2 / 2; (resultado um) 2 % 2; (resto zero) 3 / 2; (resultado um e meio) 3 % 2; (resto um) Identificando números pares e impares O operador módulo "%" é muito usado para identificar se um número é impar ou par, pois, números pares quando divididos por dois não possuem resto, no exemplo abaixo iremos mostrar todos os números pares que estão entre zero e dez: var num = 0; while (num <= 10) {     (num % 2 === 0) ? console.log(num) : console.log('');      num++; }

JS - Estruturas de repetição - while

Estruturas de repetição (loop) repetem a execução de determinadas instruções enquanto a condição de parada não for atendida. É muito importante ter isso em mente, pois, uma estrutura de repetição com uma lógica errada pode levar o browser ao travamento, caso a condição de saída nunca seja atendida. Sintaxe Aqui temos a palavra reservada "while" seguida da condição de parada: while( "condição parada" ) {      "instruções a serem executadas enquanto condição de parada não for atendida"  } Exemplo Vamos exemplificar com a seguinte lógica, será criada uma variável e enquanto essa variável for menor que o valor dez deverão ser executadas o "print" do valor dessa varável e ela deve ser incrementada: var count = 0; while( count < 10 ) {     console.log(count);     count++; } Exemplo usando o conceito "truthy/falsy" Sabemos que o valor zero (0) é "falsy", logo caso seja necessário criar

JS - Operador vírgula

Esse operador une várias expressões em uma, comumente utilizado na declaração de variáveis em uma única linha, também pode ser usado no retorno de funções, onde a última expressão é retornada após a execução das anteriores. Na declaração de variáveis var x, y = 99, z; (aqui temos a declaração de três variáveis, sendo "x" e "z" do tipo "undefined" e a "y" numérica com o valor 99) No retorno de funções function teste(x) { return ( x += 1, x ); } (nessa função o valor passado por parâmetro é incrementado e em seguida retornado)

JS - Instruções condicionais - switch

O switch, a exemplo do "if", tem como finalidade a realização de um teste para determinar qual instrução deverá ser interpretada, ele é composto por um valor a ser testado e de um conjunto de possíveis hipóteses, também é possível determinar um fluxo padrão caso nenhuma das hipóteses seja verdadeira. Sintaxe Basicamente temos o "switch" para determinar o que será testado, o "case" para definir os possíveis resultados, o "break" para encerrar os testes caso uma das hipóteses seja verdadeira e o "default" para o caso de nenhuma das hipóteses ser verdadeira. É importante ressaltar do "break", se ele não for incluído as próximas hipóteses continuarão a ser testadas. switch( "valor" ){ case "hipótese 1": "instrução 1" break; case "hipótese 2": "instrução 2" break; default: "instrução default" break; } Exemplo Vamos criar um

JS - Funções - retornos e parâmetros com arrays e objetos

Vimos no post sobre funções que uma função pode possuir parâmetros e retornar valores, e na ocasião trabalhamos apenas com tipos primitivos da linguagem, e hoje veremos como receber e retornar arrays e objetos. Retorno Uma função que retorna um tipo mais complexo como um array ou um objeto pode nos ajudar, dentre outras coisas, a evitar a declaração de variáveis globais, também pode diminuir a complexidade de uma operação, vejamos alguns exemplos: function nomes() { return ['maria', 'teresa', 'flávia']; }; (essa rotina nos retorna uma lista de nomes); nomes()[1]; (como o retorno é um array conseguimos acessar um elemento conhecido por meio de seu indice); function recuperarPessoa() { var pessoa = { nome: 'Filisteu', idade: 89, sobre: function(){ return pessoa.nome + ', ' +  pessoa.idade + ' anos'} }; return pessoa; }; (essa rotina retorna um objeto, sendo que esse objeto possui propriedades e métodos); recuperarPessoa().n

JS - Escopo de variáveis e funções

Escopo de variáveis diz respeito aos locais onde uma variável pode ser acessada, é muito importante ter isso em mente pois uma abordagem errada na definição pode resultar em variáveis permanentes na memória, consumindo recurso computacional, valores sendo substituídos de maneira não controlada seja com limpezas ou mesmo substituições. Tipos Basicamente temos como tipos de escopo: Global - quando temos uma variável fora de função, onde o que for criado dessa forma pode ser acessado em qualquer lugar; var testeGlobal = 1; (variável global com o valor 1) function alterarValorGlobal() { testeGlobal = 2; }; (função que altera um valor que não pertence a seu escopo) Local - quando temos uma variável em uma função, o que é criado dessa forma só pode ser usado dentro da função. Essa é a forma recomendada, uma vez que as variáveis são mantidas em memória apenas enquanto a função estiver em execução, eliminando os riscos de substituição de valores ou permanência apos o u

JS - Condicional ternário

Utilizado para a simplificação de uma condição "if" para casos simples, onde desejamos apenas testar uma condição para determinar um valor. Em sua sintaxe temos a condição de comparação, seguido de "?" que define o valor a ser utilizado caso a condição seja verdadeira, em seguida temos ":" que define o valor a ser utilizado caso a condição seja falsa: "condição" ? "resultado caso condição verdadeira" : "resultado caso condição falsa"; Agora alguns exemplos (considerando var pessoa;): pessoa = pessoa ? true : false; (pessoa receberá false, pois a variável pessoa é undefined e como vimos esse tipo é falsy); pessoa = pessoa ? { nome: 'Já existo!' } : { nome: null }; (como pessoa tem o valor é false ela receberá um objeto com a propriedade nome com o valor null); pessoa = pessoa ? { nome: 'Já existo!' } : { nome: null }; (agora pessoa tem como valor um objeto, logo ela receberá outro objeto cuj

JS - Truthy e falsy

Anteriormente vimos como condicionar o fluxo execução com a estrutura condicional "if", comparando valores, hoje veremos como o Javascript entende o que são valores verdadeiros e falsos, através do "truthy" e "falsy", Falsy Quando um valor convertido em booleano representa o valor false, sendo eles (considerando var teste;): undefined (if (undefined) teste = true; else teste = false;) null (if (null) teste = true; else teste = false;) NaN (if (NaN) teste = true; else teste = false;)  0 (if (0) teste = true; else teste = false;) -0 (if (-0) teste = true; else teste = false;) '' (if ('') teste = true; else teste = false;) "" (if ("") teste = true; else teste = false;) false (if (false) teste = true; else teste = false;) Todos os exemplos acima retornam falso, mantendo a variável "teste" com o valor "false". Truthy Quando um valor convertido em booleano representa true, sen

JS - Tipos de dados e objetos

Iniciaremos nesse post a ver o que são e como são construídos os objetos no Javascript, devemos ter em mente que os objetos em geral refletem um objeto da vida real, possuindo propriedades e comportamentos que o descreve. Tipos primitivos Os tipos primitivos são os já vistos até aqui, fornecidos pela própria linguagem: number, números inteiros ou decimais; string, texto contido entre '' ou ""; boolean, true ou false; null, sem valor atribuído; undefined, desconhecimento de valor; Tipo objeto Tudo o que não for um um tipo primitivo é um objeto, vamos a alguns exemplos: { prop1: 1, prop2: 'Teste' } (objeto anonimo contendo duas propriedades); meuObjeto = { cod: 100, nom: 'abcd', tip: true} (objeto chamado "meuObjeto" tres propriedades); meuObjeto.cod (acessando diretamente o valor da propriedade "cod" do objeto "meuObjeto"); var obj = function() {return 'Funcao anonima'}; (objeto "obj&quo

JS - Instruções condicionais (if)

Quando precisamos condicionar a execução em nossa aplicação precisamos utilizar uma das instruções condicionais, a mais simples é condição "if" que realiza um teste, ou vários testes acompanhados de operadores lógicos, e avalia o resultado, se todos os testes forem verdadeiros a sua instrução é executada, caso contrário não. Com o "if" também podemos incluir testes adicionais caso o primeiro teste falhe por meio do "else if". Caso nenhuma das condições sejam verdadeiras podemos definir um fluxo final com o "else". Exemplo: if ("condicao 1") { "instrucao 1" } else if ("condicao 2") { "instrucao 2" } else { "instrucao 3" } if Define o fluxo do programa, quando a validação de um "if" é verdadeira a instrução "dentro" dele será executado: var x = 10; var y = 20; if (x === 10) { y = 21; } "verdadeiro, pois x é igual a 10, logo y receberá o nov

JS - Estrutura léxica

Conjunto de regras da linguagem que nos direciona para a forma correta de se programar na mesma, desde a nomeação de variáveis, funções, tipos de caractere permitidos, criação de comentários, como separar instruções, etc. Case sensitive No Javascript ocorre a diferenciação de letras minusculas e maiúsculas, ou seja, uma variável declarada como "pessoa" é diferente de uma variável declarada como "Pessoa": var pessoa = 'Adamastor'; var Pessoa = 'Hermenegildo'; Comentários Para documentar nosso código, deixando a interpretação do mesmo mais simples para futuras consultas podemos incluir comentários, podemos criar comentário de linha usando "//" e o de bloco "/* */", lembrando que comentários são ignorados pelo interpretados do Javascript: // Rotina supimpa /* Rotina muito supimpa */ Literais Valores que aparecem diretamente no programa, que por não estarem relacionados a uma variável nunca mudam

JS - Operadores unários

Podemos considerar como operadores unários aqueles que atuam sozinhos, anteriormente vimos alguns operadores para a realização de incremento/decremento de valores e agora veremos mais alguns casos: "+" com esse operador somos capazes de converter um valor para numero, caso seja usado com um valor que não é número temos como resultado "NaN" (not a number), ele também é capaz de concatenar strings, em relação a concatenação vale ressaltar que sempre que uma string estiver envolvida o resultado será uma string concatenada, e quando os valores envolvidos forem todos números temos como resultado uma soma; "-" com esse operador, alem de podermos converter um valor para número nós também o negativamos, vale ressaltar que se ele estiver a esquerda de uma variável o valor da mesma não é alterado;

JS - Operadores lógicos

Esses operadores são responsáveis por combinar dois ou mais valores de modo a testa-los e verificar se a combinação gerada é verdadeira ou não: && (AND) - testa dois (ou mais) valores e retorna true se todos forem verdadeiros; "a === 5 && b === 10" (verdadeiro, pois ambas as condições são verdadeiras); "a === 5 && b === 11" (falso, pois apenas a primeira condição é verdadeira); || (OR) - testa dois (ou mais) valores e retorna true se ao menos um for verdadeiro; "a === 5 || b === 11" (verdadeiro, pois a primeira condição é verdadeira); "a === 6 || b === 11" (falso, pois ambas condições são falsas); ! (NOT) - inverte o valor, nega um valor booleano, quando usado em um valor nega sua situação atual; "!a === 5" (falso, pois o operador "!" esta negando o resultado que é verdadeiro); "a !== 5 && b !== 10" (falso, pois ambas as variáveis possuem os valores sendo negad

JS - Funções

Quando precisamos armazenar uma rotina de modo que um mesmo trecho de código possa ser executado diversas vezes sem a necessidade de repetição da codificação lançamos mão desse artificio, também muito comum entre as mais diversas linguagens de programação. No Javascript sua criação e utilização são muito comuns, podemos dizer que não existem aplicações reais sem funções, logo nesse primeiro contato destacaremos algumas de suas principais características: Definição Por definição, uma função é um bloco de código nomeado que pode ser executado a partir do operador "()". Estrutura Possui como estrutura minima a palavra reservada "function" o "nome" utilizado para sua identificação, seguido do operador "()" e um bloco de conteúdo, determinado por "{}". function soma() {} É importante destacar aqui que, para utilizar uma função devemos obrigatoriamente saber seu nome e utilizar o operador de execução, ou seja, para ex

JS - Operadores

No Javascript, a exemplo do que temos em diversas linguagens de programação, possuímos formas de calcular e avaliar expressões, realizando operações aritméticas ou comparações logicas, o que nos permite realizar cálculos ou verificar o resultado de certas comparações. Operadores aritméticos Utilizados para realizarmos cálculos, sendo eles (considerando var resultado = 0): "+" soma dois valores resultado = 1 + 2 (resultado igual a 3) "-" subtrai valores resultado = 10 - 2 (resultado igual a 8) "*" multiplica valores resultado = 3 * 2 (resultado igual a 6) "/" divide valores resultado = 10 / 5 (resultado igual a 2) Operadores aritméticos abreviados Também são utilizados para a realização de cálculos, porem de uma forma simplificada, utilizando como base o valor já existente na variável (considerando var resultado = 0): "++" incrementa mais um (a esquerda (pré) ou a direita (pós)) resultado++ (r

JS - Variáveis e tipos de dados

Antes de mais nada precisamos ter em mente que uma variável é uma área em memoria capaz de armazenar por tempo determinado um valor, sendo que esse valor pode ser de diferentes tipos, de acordo com a necessidade da aplicação. As variáveis são identificadas por um nome, sendo por meio desse nome que os valores são manipulados. Agora que temos uma ideia do que vem a ser uma variável vamos começar a testar, como dito anteriormente, nossas variáveis podem ter tipos específicos e no Javascript realizamos essa declaração a partir da atribuição do valor, ou seja, ao colocar um valor em uma variável estamos dizendo que essa variável é do mesmo tipo do valor sendo atribuído, logo, quando atribuímos um numero para uma variável essa passa a ser do tipo numérico. Agora aos exemplos (na duvida de como testar, veja aqui uma opção simples), primeiro iremos declarar uma variável: Se analisarmos a imagem anterior vemos a palavra reservada "var", que é quem indica a criação d

Como testar meu código Javascript?

Bom, essa é uma pergunta importante, uma vez que precisamos de uma forma de testar nossos códigos Javascript.  Existem uma infinidade de ferramentas de edição, temos também um runtime bem famoso que nos permite, entre outras coisas, usar o terminal local do SO para testar Javascript, mas por enquanto vamos optar por uma solução mais simples, uma vez que o Javascript é interpretado pelo browser, porque não usa-lo para testar nosso código? Pois bem, usaremos o "console" do browser para experimentar nosso código. Todos os browsers possuem uma área para essa finalidade, onde podemos digitar nosso código e receber "feedback" na hora. No Chrome, para acessar o console basta acessar as "Ferramentas do desenvolvedor": Feito isso uma nova área no browser é aberta e com isso temos acesso a diversos recursos, entre eles o console: Após esses passos seremos capazes de testar nosso código e seguir com nossos exemplos!

Desabilitar POST do ENTER ASP .NET

Caso não seja necessário uma atualização de página a cada vez que o usuário pressionar a tecla “ ENTER ” podemos codificar uma pequena função em javascript anulando esse comportamento, segue o código: < script language ="javascript"> function desabilitaPostDoEnter(e) {      var key;      if (window.event)           key = window.event.keyCode;  //IE      else           key = e.which;                      //firefox      if (key == 13)           return false ;      else           return true ; } </ script > Agora nos objetos que se deseja cancelar o “ POST ” basta apenas chamar a função, segue o exemplo de um “ TextBox ”: < asp : TextBox ID ="TextBox1" runat ="server" onKeyPress ="return disableEnterKey(event)"></ asp : TextBox >