Pular para o conteúdo principal

Postagens

Mostrando postagens de setembro, 2019

JS - IIFE - immediatley-invoked function expression

Função auto-executável, composta por duas partes, sendo elas a função anônima, encapsulada entre parenteses e a execução, que como visto anteriormente corresponde a abre/fecha parenteses.  Como grande vantagem essa abordagem previne o acesso externo as suas variáveis assim como ela evita poluir o escopo global: (function() {    var n1 = 10;    var n2 = 20;           console.log(n1 + n2);    })();

JS - Hoisting

Comportamento do Javascript que eleva ao topo do escopo variáveis e funções literais, ou seja, mesmo que uma variável seja declarada no meio do programa a mesma será colocada no inicio, o ponto de atenção aqui é quanto a atribuição de valores, pois essa permanece no local original.  Esse comportamento pode gerar problemas pois podemos ser levados a acreditar que as coisas deveriam estar corretas quando na verdade não, uma dica é manter as variáveis no topo dos escopos juntamente com suas atribuições. Agora alguns exemplos usando o escopo de uma função para exemplificar: Variáveis Já sabemos que as variáveis "a" e "b" só podem ser acessadas dentro do escopo da função "TesteHoisting", mas o que deve ocorrer com a implementação abaixo? Bom de acordo com o que vimos, o "hoisting" irá elevar as variáveis "a" e "b" ao topo do escopo, e, apesar das variáveis existirem ambas estarão com o valor "undefined", quando

JS - Introdução a programação funcional

Em resumo, programação funcional é o paradigma de programação baseado em funções e suas características que evita estados ou dados mutáveis. Para trabalhar nesse paradigma a linguagem deve possuir algumas características: Funções são objetos de primeira classe As funções são tratadas como objetos, ou seja, tudo que é possível fazer com objetos também pode ser feito com funções. Um objeto literal var pessoa = { nome: 'Eduardo', sexo: 'Masculino'} Uma função literal function soma(a, b) { return a + b; } Atribuição de um objeto var carro = {}; Atribuição de uma função var func = function func() {}; Uma função pode retornar um objeto Permite que e as propriedades desse objeto possam ser acessadas a partir da execução da função: function recuperarCarro() {   return { marca: 'Fiat', modelo: 'Palio'   } } recuperarCarro().marca; Uma função pode retornar outra função Permite a execução de uma função

JS - Estruturas de repetição - for

A exemplo do que já foi visto com o "while", o "for" nos permite repetir a execução de instruções dado uma lógica, a diferença é que com o "for" podemos definir todo lógica dessa repetição já dentro do comando, onde devemos informar o contador inicial, sua condição de saída e uma instrução que nos diga como o contador trabalha-rá, seja incrementando ou decrementando. Sintaxe for ( "inicio", "condicao de término", "expressao final" ) Exemplos Vamos construir um "loop" que repete dez vezes: for (var x = 0; x < 10; x++) {     console.log(x); } Podemos também ter mais de uma variável na estrutura, elaborando um pouco mais nosso controle: for (var x = 0, y = 1; x < 10 && x < y; x++, y++) {     console.log('x:' + x + ' y:' + y); }

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