Pular para o conteúdo principal

Postagens

Mostrando postagens de outubro, 2019

JS - Arguments

O objeto "arguments" é uma variável local disponível em todas as funções, ele representa todos os parâmetros de uma função, e funciona como se fosse um "array", permitindo acessar os parâmetros por meio de índice, ele não pode ser considerado um "array" pois não possui todas as funcionalidades que um "array" convencional possui. Exemplo function testando(arg01, arg02) {   return arguments; } testando('valor 01'); testando('valor 01', 'valor 02'); testando('valor 01', 'valor 02')[0]; No exemplo acima temos uma função que retorna "arguments", onde podemos ver todos os valores dos parâmetros informados, inclusive podemos acessar esses valores por meio de índices.

JS - O objeto this

Em Javascript o objeto "this" pode assumir valores distintos de acordo com o local onde é invocado, e agora veremos alguns exemplos. Métodos de objetos O "this" aparece em métodos de objetos como uma referencia ao objeto principal, ou seja, ele representa o próprio objeto que possui o método: var pessoa = {   nome: 'Teresa',   recuperarNome: function() { return this.nome; } }; No exemplo acima "this" representa o objeto "pessoa", logo possui acesso a propriedade "nome". Em funções Em funções o objeto "this" pode ter dois valores, quando em uma função que não pertence a um objeto "this" retorna o objeto global, que no caso no browser é o "window", já o outro valor é a referencia ao objeto instanciado: Função que não pertence a um objeto function funcaoTeste() {   return this; } No exemplo acima temos como resultado da função o objeto global do br

JS - Javascript no browser

A partir de agora vamos ver exemplos de como usar nosso código Javascript em páginas web, hoje veremos as possibilidades para isso e também aproveitaremos o momento para exemplificar a questão do escopo de variáveis. Estrutura minima do html Sabemos que a estrutura base para uma página web são as tags "html", dentro dela "head" e "body", nosso código Javascript deve estar na tag "script". A tag "script" pode ser incluída tanto dentro da tag "head" quanto dentro da tag "body", a diferença é que, quando nosso código estiver na "head" ele será carregado antes do conteúdo da página e quando nosso código estiver no "body" primeiro serão carregados os elementos "html" para em seguida nosso Javascript ser carregado. Como podemos imaginar o forma mais indicada atualmente é a inclusão no "body", pois caso nossos scripts sejam "pesados" eles não impactarão no car

JS - Métodos de arrays - reduce e reduceRight

Os métodos que serão vistos hoje possuem como finalidade reduzir os valores do "array" para um único valor, onde todos os elementos são percorridos para podermos realizar algum processamento. reduce Reduzir um "array" para um único valor acumulado, esse método não altera o valor original do "array", a função desse método pode ter quatro parâmetros, sendo eles o valor acumulado, o item atual, o índice e o próprio "array". Além da função é possível passar outro parâmetro para o método, que representa o valor inicial para a redução, no exemplo abaixo faremos a redução de um "array" de números e outro de texto: Exemplo com números var numeros = [1,2,3,4,5]; var reduceNum = numeros.reduce(function(acumulado, item, index, array) {   return acumulado + item; }, 0); O resultado será 15, pois ocorre uma soma conforme o quadro abaixo: Iteração Acumulado Item Resultado (novo acumulado) 1 0 1 1 2 1 2

JS - Métodos de arrays - map e filter

Dando continuidade aos métodos de "array" veremos hoje como iterar para processar itens e filtrá-los: map Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade retornar um novo "array" com base nos itens do "array" original, sem alterá-lo, isso nos garante a possibilidade de processar os valores tratando os mesmos de alguma forma: var numeros = [1,2,3,4,5,6]; var map = numeros.map(function(item, index, array) {   return item + 10; }); filter Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array

JS - Métodos de arrays - forEach, every e some

Nesse post veremos alguns métodos que nos permitem realizar iterações em nossos "arrays", esses métodos devem ser utilizados para percorrer os itens, diferente do que temos feito até agora com os laços. forEach Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber três parâmetros, sendo eles o item atual, o índice atual e o próprio "array", onde para cada item do "array" essa função será executada uma vez, tem como finalidade substituir os laços comuns vistos até aqui, já que o "forEach" além de mais elegante é mais performático: var numeros = [1,2,3,4,5,6,7,8]; numeros.forEach(function(item, index, array) {   console.log(item); }); every Realiza iterações nos itens de um "array", esse método recebe uma função por parâmetro e essa função pode receber um parâmetro, sendo ele o item atual, sua finalidade é retornar um valor booleano baseado

JS - Métodos de arrays - slice e splice

Hoje veremos dois métodos muito poderosos dos "arrays" que poderão facilitar muito nossa vida no futuro, esses dois métodos são responsáveis por retornar partes especificas de um "array" e remover ou incluir itens de posições especificas de um "array".  slice Retorna um "array" "recortado" com base nos índices informados, é possível informar ao método o índice de inicio e o de término da manipulação, também é possível passar valores negativos para que o "recorte" ocorra no final, é importante salientar que esse método não altera o "array" original: var numeros = [1, 2, 3, 4, 5, 6, 7]; numeros.slice(1);  retorna o array [2, 3, 4, 5, 6, 7] numeros.slice(1, 3); retorna o array [2, 3]  numeros.slice(-2); retorna o array [6, 7]  splice Altera um "array" de forma definitiva, onde o primeiro parâmetro desse método é o índice de inicio, o segundo é a quantidade a ser eliminada, opciona

JS - Métodos de arrays - toString, concat, unshift e shift

Dando continuidade a nossa exploração aos recursos que os "arrays" nos proporcionam, hoje veremos mais quatro métodos interessantes, onde seremos capazes de converter o conteúdo para texto, concatenar itens e outros "arrays", incluir e remover itens do inicio do "array". toString A exemplo do "join" o "toString" converte os valores de um "array" em texto, separando cada um por virgula, a grande diferença aqui é que o "toString" não permite informar um novo separador: var numeros = [1, 2, 3]; numeros.toString(); concat Inclui um novo valor ao "array" e retorna o resultado final desse processo, também é possível concatenar outros "arrays", isso sem alterar o valor original do "array": numeros.concat(4); numeros.concat([10, 100, 1000]); unshift Adiciona um item no inicio do "array" e retorna o total de itens do mesmo, anteriormente vimos o "pu

JS - Métodos de arrays - push, pop, join, reverse e sort

Hoje veremos alguns métodos básicos para se trabalhar com "arrays", capazes de incluir e remover itens do final do "array", transformar os itens de um "array" em uma "string", inverter a ordem dos itens de um "array" e ordenar de forma alfabética um "array". push Adiciona um item ao final do array, esse método retorna o total de itens do "array" atualizado: var frutas = ['uva', 'manga', 'laranja']; frutas.push('maracujá'); pop Remove um item do final do "array", esse método retorna o item removido: frutas.pop(); join Juntar itens de um "array" retornando uma "string", é possível indicar qual o separador desejado, se nada for informado é assumido a virgula: frutas.join(); frutas.join(' - '); reverse Inverte os itens de um array, atenção pois esse método realmente altera a posição dos itens dentro do array.

JS - Métodos de objeto

Nesse post veremos alguns métodos interessantes de objetos do Javascript, que nos permitem manipular propriedades, verificar a herança, transformar um objeto em texto e converter um texto em objeto. Object.keys Cria um "array" com os nomes das propriedades de um objeto: var animal = { nome: 'Totó', idade: 12}; var propsAnimal = Object.keys(animal); Object.isPrototypeOf Indica se um objeto é um protótipo de outro, ou seja, se um objeto (parâmetro do método) herda características de outro (usando o método): var cachorro = Object.create(animal); cachorro.buscaGraveto = true; cachorro.isPrototypeOf(animal); animal.isPrototypeOf(cachorro); JSON.stringify Transforma um objeto em texto: var animalTxt = JSON.stringify(animal); JSON.parse  Transforma uma string (JSON) em um objeto: var outroAnimal = JSON.parse(animalTxt); JSON JSON (JavaScript Object Notation - Notação de Objetos JavaScript) é uma formatação leve de troca

JS - Criação de objetos

A algum tempo já estamos usando objetos, porém nesse post veremos mais alguns detalhes sobre objetos e formas de cria-los. Mutáveis  Objetos no Javascript são mutáveis, ou seja, é possível alterar valores de suas propriedades, remover propriedades existentes, ou mesmo adicionar outras propriedades: var pessoa = { nome: 'Eduardo', idade: 17 }; pessoa.idade = 27; delete pessoa.idade; pessoa.idade = 37; Manipulados por referencia Se criarmos um objeto por meio da atribuição de um objeto existente teremos uma referencia, isso significa que ao mudar propriedades ou valores em um dos objetos teremos como resultado a alteração em ambos: var copiaPessoa = pessoa; pessoa.idade = 47; copiaPessoa.idade = 57; delete pessoa.idade; copiaPessoa.idade = 37; Criando objetos Agora as formas de se criar um objeto: De forma Literal Forma utilizada até agora, onde já atribuímos o objeto e suas propriedades a uma variável: var carro = {mod

JS - Saltos

Saltos são formas de interromper um fluxo de instruções, onde somos capazes de parar, pular ou mesmo ignorar uma certa linha de execução. Dois deles já foram vistos, um é o "return" que podemos interromper o fluxo de execução de uma função, evitando a continuidade de um trabalho, o outro é o "break" utilizado para o encerramento de verificação dentro da condicional "switch". Temos ainda o "continue" que apenas descarta o fluxo atual de execução, direcionando para a próxima instrução válida. return No exemplo abaixo criaremos uma função que recebe um número, se o número for par daremos um salto interrompendo a execução dos comandos restantes: function saltoReturn(a) {   if (a % 2 === 0)     return 'Par';   return 'Impar'; }  break No próximo exemplo usaremos o "break" em um "loop", onde iremos percorrer de um a cinco e encerrar as repetições assim que o número tres for encontrado:

JS - Estruturas de repetição - for in

Até aqui vimos estruturas de repetição que, dado uma lógica, executa "n" vezes um bloco de código, o "for in" por sua vez é um pouco diferente, ele é usado para percorrer propriedades de um objeto, nos permitindo acesso ao nome de cada propriedade. Isso é bastante útil se pensarmos que podemos acessar e alterar valor de propriedades utilizando seu nome. Sintaxe for ( var  "< item atual >" in "< objeto >") {   "< instrucoes >" } Exemplo No exemplo abaixo iremos declarar um objeto com três propriedades, em seguida iremos percorre-las para mostrar os valores atuais e alterar os mesmos:

JS - Estruturas de repetição - do / while

Diferente das outras estruturas de repetição, o "do / while" sempre executa ao menos uma iteração da repetição, isso porque o teste para definir a continuidade do "loop" fica no final do comando. Outra peculiaridade desse comando é a necessidade de um ";" para indicar o fim da instrução. Sintaxe do {   "< instrucao >" } while ( "< condicao >" ); Exemplo Agora iremos repetir a impressão de uma variável enquanto seu valor for menor que dez, como ela inicia em zero e a cada iteração é incrementado um, serão impressos os números de zero a nove: Exemplo de uma iteração No exemplo abaixo continuaremos com a mesma validação, onde a variável deve ser menor que dez, só que dessa vez o valor dessa variável será dez, ou seja, já iniciará inválida, como essa verificação só ocorre ao final do comando teremos uma iteração:

JS - typeof

Operador unário que consegue nos dizer qual é o tipo de dados de uma variável, logo, ao testar com o "typeof" cada tipo de dados temos como resultado: Valores primitivos typeof undefined => undefined typeof true => boolean typeof 99 => number typeof NaN => number typeof 'Teste' => string Objetos diferentes de funções typeof {} => object typeof [] => object typeof null => object (aqui temos um conhecido erro de implementação do Javascript) Funções typeof functio() {} => function Exemplos Como vimos o "typeof" não é indicado para testar valores do tipo "object", "array" e "null", já que todos eles nos retornam "object", por isso é mais comum utiliza-lo com os tipos primitivos referentes a número, texto e booleano: (typeof 1234); (typeof 1234 ? 'Número' : '?'); (typeof 'Xisto'); (typeof 'Xisto' ? 'Texto' : &#

JS - Wrapper objects

Anteriormente, realizamos uma reflexão simples para definir o que era objeto e o que não era, basicamente listamos todos os tipos primitivos ("string", "number", "boolean", etc.) e falamos que, tudo aquilo que não era tipo primitivo era um objeto. Pois bem, uma outra característica marcante é que objetos podem possuir propriedades e métodos, enquanto tipos primitivos não, mas se pararmos para observar percebemos algo diferente, por exemplo, se criarmos uma variável do tipo "string" conseguimos acessar algumas propriedades/métodos além do valor, e é ai que entra o conceito de "wrapper objects". Podemos pensar em "wrapper" como envolver ou empacotar, logo, assim que tentamos acessar um propriedade (ou método) de um tipo primitivo como o "string" (isso também ocorre para "number" e "boolean") o Javascript cria um objeto em memória, realiza a ação solicitada (seja o retorno do valor de uma pr