Categoria: Blog

Publicado em

O que são React Components & Props

Componentes são como funções que retornam elementos HTML.

Os componentes são partes independentes e reutilizáveis de código. Eles possuem o mesmo propósito que as funções JavaScript, mas trabalham de forma isolada e retornam elementos HTML por uma função render.

Eles possuem dois tipos, chamados Componentes de Classes e Componentes de Funções.

Function Components

Um Function Component nada mais é do que uma função JavaScript que retorna um elemento JSX (leia este artigo se você não conhece JSX).

Por exemplo:

import React from 'react';

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default ThisComponent;

Se você quer renderizar um React Component dentro de uma Function Component, você pode definir outro componente e renderizá-lo com HTML utilizando JSX:

import React from 'react';

function App(){
    return <ThisComponent />;
}

function ThisComponent(){
    const component = 'Olá Mundo! Eu sou um Componente!';
    return <h1>{component}</h1>;
}

export default App;

Deste modo, você tem um Componente Filho. Você consegue decidir como e onde renderizar um componente.

Class Component

Quando criamos um componente React, o nome do componente deve iniciar com uma letra maiúscula. Ao criar um Class Component, precisamos incluir o extends React.Component, pois este componente cria uma herança para o React.Component, criando um acesso às funções do React Component.

Criando um Class Component, precisamos do método render() para retornar HTML. Por exemplo:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa!</h1>;
    }
}

Agora você tem um componente chamado Pessoa que retorna um elemento H1. Para usar este componente na aplicação, é só utilizar a sintaxe:

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E esse componente será renderizado na sua página, no elemento root!

Component Constructor:

Se existe uma função construtora (constructor()) no seu componente, a função será chamada quando o componente for iniciado. O construtor será onde você irá iniciar as propriedades dos seus componentes.

No React, utilizamos um objeto chamado state para criar nossas propriedades de componentes. Utilize também o super() para utilizar os métodos herdados pela função construtora pai e também para obter acesso à todas as funções do método React.Component. Por exemplo, criaremos um componente Pessoa, com um estado de humor:

class Pessoa extends React.Component {
    constructor(){
        super();
        this.state = {humor: 'Bem humorada!'};
    }
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.state.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa />, document.getElementById('root'));

E temos a saída:

Olá, eu sou uma Pessoa Bem humorada!

Props:

Podemos também utilizar props para adicionar propriedades de componentes.

As props são como argumentos de funções, e você pode enviá-las para os componentes como atributos:

class Pessoa extends React.Component {
    render(){
        return <h1>Olá, eu sou uma Pessoa {this.props.humor}</h1>;
    }
}

ReactDOM.render(<Pessoa humor="Bem humorada!"/>, document.getElementById('root'));

E com isso, obtemos o nosso resultado:

Olá, eu sou uma Pessoa Bem humorada!

Gostou deste artigo? Comente abaixo!

Referências:

Publicado em

Tornando o código mais rápido usando Sets JavaScript

Muitos desenvolvedores limitam-se a utilização de objetos globais básicos, como strings, objetos, números, arrays e booleanos. Na maioria das vezes, isso realmente é tudo que você precisa mas, para tornar o código mais eficiente, nem sempre isso é todo o necessário.

Para isso, existem os Sets JavaScript, que tornam o seu código mais rápido a medida que ele é escalonado. O uso de sets traz resultados que seriam impossíveis de obter somente com arrays.

E como os sets são diferentes?

Bom, os arrays são coleções de dados indexados, ou seja, cada valor dos dados em um array é ordenado por um índice. Por exemplo:

let mainArray = [a, b, c, d];
console.log(mainArray.indexOf(a));
// 0
console.log(mainArray.indexOf(c));
// 2

Já os Sets são coleções codificadas. Não usam índices, mas ordenam os seus dados utilizando chaves. Seus elementos são iteráveis na ordem de inserção e não podem conter dados duplicados, ou seja, cada conjunto de dados deve ser único.

E quais são os benefícios?

  • Utilizar métodos como indexOf() ou includes() para verificar a existência de um elemento em um array é muito lento;
  • Nos Sets, você pode excluir o elemento pelo seu valor. Em um array, você pode utilizar o splice com base no índice do elemento, tornando-o lento pela dependência de índices;
  • É mais rápido adicionar elementos aos Sets do que adicionar elementos em um array utilizando metodos como push() ou unshift();
  • Um Set pode armazenar NaN;
  • Sets armazenam apenas valores únicos. Se você não pode trabalhar com duplicatas, esta é uma vantagem.

O quão mais rápido são os Sets?

Os métodos que o array utiliza possuem uma complexidade de tempo linear de O (N), ou seja, o tempo de execução necessário aumenta conforme aumenta o tamanho dos dados. Mas métodos que utilizam Sets para manipulações como inserção, exclusão e pesquisa possuem uma complexidade de tempo  O (1), e isso significa que o tempo de execução não varia, pois o tamanho dos dados não influencia no tempo de execução dos métodos.

Teste:

Realizando um teste, vamos criar um array e um set com um milhão de entradas cada:

let newArray = [], newSet = new Set(), n = 1000000;

for (let i = 0; i < n; i++){
    newArray.push(i);
    newSet.add(i);
}

Agora, pesquisaremos o número 425123 no array e no set:

let result; 
console.time('Array');
result = newArray.indexOf(425123) !== -1;
console.timeEnd('Array');

console.time('Set');
result = newSet.has(425123);
console.timeEnd('Set');

E a saída foi:

// Array: 1.201ms
// Set: 0.029ms

Gostaram deste artigo? Comente abaixo!

Referência: https://medium.com/@bretcameron/how-to-make-your-code-faster-using-javascript-sets-b432457a4a77

Publicado em

O que é JSX?

Olá pessoal, neste artigo, aprenderemos o que é o JSX e quais são as suas aplicações. O JSX significa JavaScript XML e nos permite escrever HTML no React, tornando fácil a sua adição. Com o JSX, podemos escrever os elementos HTML dentro do JavaScript e adicioná-los ao DOM sem utilizar métodos como createElement() ou appendChild(). o JSX é uma alternativa para escrevermos nosso código que mescla a estrutura do DOM com a lógica da aplicação.

São necessários transpiladores (pré-processadores) como o Babel. Basicamente, com o JSX você escreve estruturas HTML/XML do mesmo modo que escreve o código JavaScript, então, o transpilador transformará essas expressões em código JavaScript. Ou seja, ao invés de colocar o JavaScript no HTML, colocamos o HTML no JavaScript.

O JSX fornece uma sintaxe concisa e familiar para definir uma estrutura de árvore com atributos que não requerem o aprendizado de uma linguagem de templates ou abandonar o JavaScript e o JSX é fácil de ler e escrever. Vejamos um exemplo:

const element = <h1>Olá Mundo!</h1>

ReactDOM.render{
    element, 
    document.getElementById('root')
};

Neste exemplo, declaramos a variável element e a usamos dentro do JSX, renderizando-a com ReactDOM.render().

Se fosse escrever o mesmo exemplo anterior sem o JSX, seria algo como:

const element = React.createElement('h1, {}, 'Olá Mundo!');
ReactDOM.render(element, document.getElementById('root'));

Veja, se não utilizamos JSX, precisamos do método createElement para criarmos o nosso elemento <h1> utiliando o React. Com o JSX, eliminamos a necessidade de utilizar este método, simplificando a sintaxe do nosso código.

O JSX também é uma expressão!

Podemos utilizar expressões em JSX, transformando-se em chamadas normais de funções que retornam objetos JavaScript. Por exemplo:

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Nome',
    lastName: 'Sobrenome'
};

function greeting(user){
    if (user) {
        return <h1>Olá, {formatName(user)}!</h1>;
    }
    return <h1>Olá, anônimo!</h1>;
}

Ou seja, você pode utilizar o JSX dentro de estruturas condicionais e laços de repetição, atribuí-los a variáveis, aceitá-los como argumentos e retorná-los de funções!

Gostou deste artigo? Comente abaixo!

Referências:

 

Publicado em

Bootstrap 5 – Mudanças

Olá pessoal, neste artigo mostraremos as novidades do Bootstrap 5. A versão alfa já está disponível e há muitas diferenças entre as versões 4 e 5. Mas quais serão as mudanças?

jQuery

O Bootstrap 5 não depende mais do jQuery. Isso mesmo! O jQuery não é mais uma dependência no Bootstrap 5. Ele mudou para a utilização do próprio JavaScript (Vanilla) e isso é mérito do próprio jQuery. Ele foi uma peça fundamental no desenvolvimento Front-End, impulsionando mudanças nas tecnologias de desenvolvimento de interfaces web na última década. Os projetos construídos em Bootstrap 5 serão significativamente mais leves em tamanho e no carregamento de páginas.

Uma das alterações possíveis foi trocar a abordagem do plugin de botão em HTML e CSS para alternar estados. Você pode visualizar a lista de alterações relacionadas ao JavaScript na versão alfa do Bootstrap 5 aqui.

Novos visuais e sensações

O site e documentação agora não possuem mais largura total da página, melhorando a visibilidade e legibilidade, tornando o site mais semelhante à página de conteúdo, e não a um aplicativo. A barra lateral de seções expansíveis foi atualizada para uma navegação mais rápida. O Bootstrap também possui um novo logotipo que foi inspirado no CSS.

Fim do suporte ao Internet Explorer

O suporte para o Internet Explorer foi abandonado na versão 5. O foco da atualização é a construção de ferramentas mais amigáveis para o futuro.

Propriedades personalizadas no CSS

Graças ao fim do suporte ao Internet Explorer, foi possível começar a utilizar propriedades personalizadas ao CSS. A equipe de atualização do Bootstrap está trabalhando para utilizar os poderes das propriedades personalizadas Sass e CSS para um sistema mais flexível.

Personalização da documentação

A documentação foi aprimorada em diversos lugares, aumentando as explicações, removendo ambiguidades e fornecendo mais suporte para entender o Bootstrap. A documentação personalizada expande a página Theming da v4 com mais conteúdo e fragmentos de código para construir sobre arquivos Sass de origem Bootstrap. A paleta de cores também foi expandida na v5. Você pode personalizar a aparência da sua aplicação sem sair da base de código. Isso ajudará a tornar os sites baseados em Bootstrap mais acessíveis para todos.

Formulários

A documentação e componentes dos formulários foi revisada e foram consolidados todos os estilos de formulários na nova seção Formulários. Cada caixa de seleção, rádio, arquivo, entre outros, inclui uma aparência personalizada para unificar o estilo e comportamento dos controles de formulário no S.O. e navegador.

Você pode verificar mais atualizações no seguinte link: https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/

Gostou deste artigo? Comente abaixo!

Referências:

Publicado em

Criando Single Page Website com NodeJS

Olá galera! Neste artigo, criaremos um Website Single Page utilizando NodeJS.

Para criar este projeto, precisaremos de:

  • NodeJS + NPM;
  • Um editor de código de sua preferência. Recomendo utilizar o Visual Studio Code.

Vamos começar!

De início, precisamos criar nossa pasta que conterá todos os arquivos do projeto. Utilizando um terminal, crie a pasta chamada node_website com o comando:

mkdir node_website

cd node_website

Dentro da nossa pasta, criaremos dois arquivos:

  • package.json (conterá nossas dependências);
  • server.js (conterá nossos scripts para criação do servidor).

Crie também uma pasta chamada node-example-website e, dentro desta pasta, crie outra pasta chamada express. Essa pasta express conterá nosso arquivo index.html.

Ao código!

No nosso arquivo package.json, precisamos adicionar o nome do nosso projeto, versão, os scripts e as dependências. O seu arquivo deverá ficar assim:

{
    "name": "node-website",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "start": "node server.js"
    },
    "dependencies": {
        "express": "^4.17.1"
    }
}

Assim, já criamos nosso arquivo de dependências.

Agora, precisamos criar nosso servidor. No nosso arquivo server.js, iremos:

  • Fazer a requisição dos pacotes que utilizaremos;
  • Criaremos o servidor na porta que escolhermos utilizar.
const http = require('http');
const express = require('express');
const path = require('path');

const app = express();
app.use(express.json());
app.use(express.static('express'));

// URL padrão do site
app.use('/', (req, res) => {
    res.sendFile(path.join(__dirname+'/node-example-website/express/index.html'));
});

const server = http.createServer(app);
const port = 3000;
server.listen(port);

console.debug('Server inicializado na porta ' + port);

Neste projeto, estamos utilizando a porta 3000.

Agora, precisamos instalar as outras dependências e módulos do node no nosso projeto. Dentro da pasta node-example-website, rode o seguinte comando:

npm install

Esse comando vai instalar as dependências definidas no nosso package.json.

No nosso arquivo index.html, utilizaremos um exemplo do W3CSS, chamado Cafe Template. Você pode utilizar o template de sua preferência ou criar o seu próprio!

<!DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<style>
body, html {
  height: 100%;
  font-family: "Inconsolata", sans-serif;
}

.bgimg {
  background-position: center;
  background-size: cover;
  background-image: url("https://www.w3schools.com/w3images/coffeehouse.jpg");
  min-height: 75%;
}

.menu {
  display: none;
}
</style>
<body>

<!-- Links (sit on top) -->
<div class="w3-top">
  <div class="w3-row w3-padding w3-black">
    <div class="w3-col s3">
      <a href="#" class="w3-button w3-block w3-black">HOME</a>
    </div>
    <div class="w3-col s3">
      <a href="#about" class="w3-button w3-block w3-black">ABOUT</a>
    </div>
    <div class="w3-col s3">
      <a href="#menu" class="w3-button w3-block w3-black">MENU</a>
    </div>
    <div class="w3-col s3">
      <a href="#where" class="w3-button w3-block w3-black">WHERE</a>
    </div>
  </div>
</div>

<!-- Header with image -->
<header class="bgimg w3-display-container w3-grayscale-min" id="home">
  <div class="w3-display-bottomleft w3-center w3-padding-large w3-hide-small">
    <span class="w3-tag">Open from 6am to 5pm</span>
  </div>
  <div class="w3-display-middle w3-center">
    <span class="w3-text-white" style="font-size:90px">the<br>Cafe</span>
  </div>
  <div class="w3-display-bottomright w3-center w3-padding-large">
    <span class="w3-text-white">15 Adr street, 5015</span>
  </div>
</header>

<!-- Add a background color and large text to the whole page -->
<div class="w3-sand w3-grayscale w3-large">

<!-- About Container -->
<div class="w3-container" id="about">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-64"><span class="w3-tag w3-wide">ABOUT THE CAFE</span></h5>
    <p>The Cafe was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>In addition to our full espresso and brew bar menu, we serve fresh made-to-order breakfast and lunch sandwiches, as well as a selection of sides and salads and other good stuff.</p>
    <div class="w3-panel w3-leftbar w3-light-grey">
      <p><i>"Use products from nature for what it's worth - but never too early, nor too late." Fresh is the new sweet.</i></p>
      <p>Chef, Coffeeist and Owner: Liam Brown</p>
    </div>
    <img src="https://www.w3schools.com/w3images/coffeeshop.jpg" style="width:100%;max-width:1000px" class="w3-margin-top">
    <p><strong>Opening hours:</strong> everyday from 6am to 5pm.</p>
    <p><strong>Address:</strong> 15 Adr street, 5015, NY</p>
  </div>
</div>

<!-- Menu Container -->
<div class="w3-container" id="menu">
  <div class="w3-content" style="max-width:700px">
 
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">THE MENU</span></h5>
  
    <div class="w3-row w3-center w3-card w3-padding">
      <a href="javascript:void(0)" onclick="openMenu(event, 'Eat');" id="myLink">
        <div class="w3-col s6 tablink">Eat</div>
      </a>
      <a href="javascript:void(0)" onclick="openMenu(event, 'Drinks');">
        <div class="w3-col s6 tablink">Drink</div>
      </a>
    </div>

    <div id="Eat" class="w3-container menu w3-padding-48 w3-card">
      <h5>Bread Basket</h5>
      <p class="w3-text-grey">Assortment of fresh baked fruit breads and muffins 5.50</p><br>
    
      <h5>Honey Almond Granola with Fruits</h5>
      <p class="w3-text-grey">Natural cereal of honey toasted oats, raisins, almonds and dates 7.00</p><br>
    
      <h5>Belgian Waffle</h5>
      <p class="w3-text-grey">Vanilla flavored batter with malted flour 7.50</p><br>
    
      <h5>Scrambled eggs</h5>
      <p class="w3-text-grey">Scrambled eggs, roasted red pepper and garlic, with green onions 7.50</p><br>
    
      <h5>Blueberry Pancakes</h5>
      <p class="w3-text-grey">With syrup, butter and lots of berries 8.50</p>
    </div>

    <div id="Drinks" class="w3-container menu w3-padding-48 w3-card">
      <h5>Coffee</h5>
      <p class="w3-text-grey">Regular coffee 2.50</p><br>
    
      <h5>Chocolato</h5>
      <p class="w3-text-grey">Chocolate espresso with milk 4.50</p><br>
    
      <h5>Corretto</h5>
      <p class="w3-text-grey">Whiskey and coffee 5.00</p><br>
    
      <h5>Iced tea</h5>
      <p class="w3-text-grey">Hot tea, except not hot 3.00</p><br>
    
      <h5>Soda</h5>
      <p class="w3-text-grey">Coke, Sprite, Fanta, etc. 2.50</p>
    </div>  
    <img src="https://www.w3schools.com/w3images/coffeehouse2.jpg" style="width:100%;max-width:1000px;margin-top:32px;">
  </div>
</div>

<!-- Contact/Area Container -->
<div class="w3-container" id="where" style="padding-bottom:32px;">
  <div class="w3-content" style="max-width:700px">
    <h5 class="w3-center w3-padding-48"><span class="w3-tag w3-wide">WHERE TO FIND US</span></h5>
    <p>Find us at some address at some place.</p>
    <img src="https://www.w3schools.com/w3images/map.jpg" class="w3-image" style="width:100%">
    <p><span class="w3-tag">FYI!</span> We offer full-service catering for any event, large or small. We understand your needs and we will cater the food to satisfy the biggerst criteria of them all, both look and taste.</p>
    <p><strong>Reserve</strong> a table, ask for today's special or just send us a message:</p>
    <form action="/action_page.php" target="_blank">
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Name" required name="Name"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="number" placeholder="How many people" required name="People"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="datetime-local" placeholder="Date and time" required name="date" value="2017-11-16T20:00"></p>
      <p><input class="w3-input w3-padding-16 w3-border" type="text" placeholder="Message \ Special requirements" required name="Message"></p>
      <p><button class="w3-button w3-black" type="submit">SEND MESSAGE</button></p>
    </form>
  </div>
</div>

<!-- End page content -->
</div>

<!-- Footer -->
<footer class="w3-center w3-light-grey w3-padding-48 w3-large">
  <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
</footer>

<script>
// Tabbed Menu
function openMenu(evt, menuName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("menu");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < x.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" w3-dark-grey", "");
  }
  document.getElementById(menuName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-dark-grey";
}
document.getElementById("myLink").click();
</script>

</body>
</html>

Você também pode adicionar o css e js em arquivos separados!

Para inicializar o servidor, utilizamos o comando:

npm start

Para testar, abra o seu browser e digite:

localhost:3000

E veja o seu site rodando!

Gostou deste artigo? Comente abaixo com seus amigos!

Referências:

Publicado em

Promoção Pacote Profissional JavaScript + jQuery

Com pressa?
Acesse direto o curso clicando aqui

Olá pessoal!

Durante o mês de Setembro estamos com uma promoção para o curso Pacote Profissional JavaScript, ES2020 e jQuery (+ jQuery UI).

Neste curso, abordamos o desenvolvimento web com JavaScript e jQuery.

Você vai utilizar as tecnologias:

  • JavaScript;

  • jQuery e jQuery UI;

  • ES2019;

  • ES2020;

  • Conceitos modernos de desenvolvimento web.

E você vai aprender:

  • Fundamentos do JavaScript;

  • Estruturas básicas de programação;

  • Aprofundamento das estruturas ensinadas;

  • Atualizações que o JavaScript vem recebendo;

  • Conceitos essenciais de JQuery.

Tudo isso resolvendo projetos que lhe auxiliarão no desenvolvimento dos seus sites e aplicações web!

Mostramos no curso as novas atualizações do ECMAScript 2020, que auxiliam o desenvolvedor a otimizar os seus códigos.

O curso está com desconto de 75% pelos próximos 31 dias e pode ser adquirido diretamente por este link:

Use nosso cupom : 1E2D3E957FADED9578A2  ou acesse direto pelo link abaixo

Acessar curso

Compartilhe com seus amigos!

 

Publicado em

O método Call

Neste artigo falaremos mais sobre o método call() que nos permite reaproveitar métodos em contextos (this) diferentes. No artigo tentarei explicar as coisas com a menor complexidade possível e resumirei alguns itens, então para aquele que sabem bem JavaScript por favor calma ai… rsrsrsr

Primeiro vamos entender mais sobre a chamada em si. É importante saber que ela:

  • É nativa, não precisa chamar biblioteca, framework, etc…
  • É um método das funções. Sim, se você ainda não sabia as funções são um tipo de dado que possui métodos/funções próprias;
    • Se ficou confuso, aguarde o exemplo.
  • Recebe um parâmetro que informa o seu contexto onde estarão os dados a executar;
    • Nesse caso contexto é uma função, objeto ou até o window se você estiver procurando pelo em ovo.
  • Pode receber mais parâmetros depois do this. Estes parâmetros se referem qualquer outro valor que você queira enviar para a função;

Note que eu estou usando as palavras função e método de forma alternada. Isso é porque eles são a mesma e tem mais diferença entre function e arrow function do que eles. 🙂

Exemplo básico

// Se chamar essa função do jeito que está aqui, vai exibir undefined pois this.umLocal não tem um valor atribuido a ele.
function ola(){
    console.log(`Olá ${this.umLocal}`);
}

// Agora vamos criar um objeto mais simples possível com a variavel umLocal
const teste = {
    umLocal : "MundoJS"
}

//Lembra quando eu disse que o call é um método das funções? Olhá só…
ola.call(teste);

Se você executar o código acima verá que ele exibirá Olá MundoJS no console. Vejamos o que aconteceu então:

  1. Criamos uma função chamada ola().
  2. Essa função exibe algo no console e chama o this.umLocal
  3. Sem fazer a chamada call() a função olha dentro de seu contexto (o this dela), não acha nada e exibe a mesma coisa
  4. Criamos um objeto com uma variável.
    1. Note que não precisamos dizer que é no contexto do objeto, mas está lá
  5. Invocamos o método call() da função ola passando o “teste” como novo contexto.
  6. Ao tentar executar a função, desta vez ela olha no teste e encontra a variável para usá-la no console.log()

Vejamos então mais alguns exemplos

1 – Passando os parâmetros da função:

// Desta vez ola recebe um parâmetro chamado saudacao
function ola(saudacao){
// aviso: se colocar this.saudacao ele não vai achar no call()…
// a explicação do porque sai bastante do artigo, mas se você entender bem de “this” e functions já deve ter se ligado. Caso queira saber mais, prende um comentário pedindo um tutorial sobre this
    console.log(`${saudacao} ${this.umLocal}`);
}

const teste = {
    umLocal : "Universo"
}
// O primeirpo parâmetro do call sempre é o “this”, depois disso você pode chamar todos os parâmetros da própria função.
ola.call(teste, "Olá");

2 – Usando métodos de Arrays em objetos que são listas mas não vetores.

Com o ES6 vieram diversos métodos muito uteis como o filter, forEach,reduce, etc… dai você tenta usar ele em uma lista que não é um vetor/array [] e não da certo pois eles não possuem isso.

// Erro pois é um HTMLCollection
document.getElementsByTagName("p").forEach(x => console.log(x));

// Vamos criar um objeto parecido com um vetor
let arrayLike = {
  0: "Olá",
  1: "MundoJS",
  length: 2
};

// e uma função para ser chamada no reduce()
function juntar(acc, cur){
    acc = `${acc} ${cur}`;
}

// Erro
// Motivo: O seu objeto parece um array (possui indices e length) mas não é um vetor e por isso não tem o método reduce nele
arrayLike.reduce(juntar);

// Agora se chamarmos o reduce e passarmos forçarmos ele a aceitar nosso objeto como o contextosArray.prototype.reduce.call(arrayLike, juntar);

Isso ai então pessoal, espero que o artigo ajude a matar algumas duvidas sobre o call e qualquer coisa perguntem aqui nos cometários. Até mais.

Publicado em

A diferença entre funções regulares e arrow functions:

A Arrow function é um recurso que foi introduzido no ES6. É uma maneira mais concisa de escrever expressões de função e funciona de maneira semelhante às funções regulares, mas com certas diferenças.

let somar = function(n1, n2){
    return n1 + n2;
}

// Utilizando arrow functions =>

let somar = (n1, n2) => { return n1 + n2 };

O arrow function permite ao desenvolvedor alcançar o mesmo resultado simplificando o seu código. Os colchetes se tornam desnecessários se apenas uma expressão seja realizada:

let somar = (n1, n2) => n1 + n2;

Se houver apenas um argumento na função, os parênteses tornam-se desnecessários:

let multiplicaQuadrado = x =:> x * x;

E, caso não existam argumentos:

let dizerOla = _ => console.log("Olá");

As arrow functions têm acesso ao objeto de argumentos da função pai regular mais próxima. Os parâmetros nomeados e restantes são muito utilizados para capturar argumentos passados para arrow functions:

// Em uma função regular
let minhaFuncao = {
    mostrarArgumentos(){
        console.log(argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Utilizando arrow functions:
let minhaFuncao = {
    mostrarArgumentos: () => {
        console.log(...argumentos);
    }
};
minhaFuncao.mostrarArgumentos(1, 2, 3, 4);

// Argumento is not defined

As funções de seta não tem as suas próprias THIS, sendo o contrário de uma expressão regular. O valor de this dentro de um arrow está sempre ligado ao valor de this na função pai regular que seja mais próxima.

let pessoa = {
    nome: "Fulano Ciclano",
    thisArrow: () => {
        console.log("O nome é: " + this.nome); // Não há binding para this aqui
    },
    thisRegular(){
        console.log("O nome é: " + this.nome); // O bind vai funcionar aqui
    }
};

pessoa.thisArrow();
pessoa.thisRegular();

/* Saída */
//Meu nome é
//Meu nome é Fulano Ciclano

As funções regulares criadas utilizando declarações ou expressões de função são construtivas. Como elas são funções construtoras, elas podem ser invocadas utilizando a palavra-chave new.

As arrow functions  não são construtivas, então, não podem ser chamadas utilizando a palavra-chave new:

let soma = (n1, n2) => console.log(n1 + n2);

new soma(2, 3);

/* Saída */
// soma is not a constructor

As funções de seta também não podem ter parâmetros nomeados duplicados, seja no modo estrito ou não. Isso significa que:

// Isso aqui é válido
function somar(x, x){
    //...Seu código aqui
}

Mas ao utilizar o modo estrito, não é válido:

'use strict'
function somar(x, x) {} 
// SyntaxError: duplicate formal argument x

Com as arrow functions, os argumentos duplicados serão sempre inválidos, independente de estar ou não em modo estrito:

(x, x) => {}
// SyntaxError: duplicate argument names not allowed in this context

Referência: https://medium.com/better-programming/difference-between-regular-functions-and-arrow-functions-f65639aba256

Gostou deste artigo? Comente abaixo e mostre para seus amigos!

Publicado em

Dicas de segurança para código JavaScript

Com a alta dos crimes cibernéticos, é extremamente importante utilizar os recursos de segurança ao nosso favor. Como desenvolvedores de software e aplicações, precisamos seguir, no mínimo, algumas das melhores práticas para poder mitigar os ataques e possivelmente evitá-los. Então, aí vão algumas dicas de como tornar o seu código mais seguro:

Confiança

Cuidado ao confiar dados à terceiros. Ao escrever código para Web, não confie em ninguém. Você pode ter uma arquitetura de validação em vigor a seu favor. Com dados provenientes do seus servidores, ou dos usuários, é muito importante sempre validar os dados antes dos mesmos entrarem no seu aplicativo. Com formulários na web, corremos o risco de termos brechas para SQL Injections, Cross-Site Scripting (XSS) e outros problemas relacionados. Por isso, é importante a existência de validação de dados.

Minimize o seu código

Existem coisas muito utilizadas por pessoas más-intencionadas: as ferramentas do navegador. Lá, eles podem ter acesso ao código JavaScript, podendo entendê-lo e utilizar as brechas de segurança para prejudicar sua aplicação.

Sempre tente minimizar e ofuscar o seu código, removendo caracteres desnecessários e modificando seu código para dificultar e legibilidade de terceiros. Você pode utilizar ferramentas para redução do seu código e também, para ofuscá-lo.

Linting:

O JavaScript é dinâmico e flexível. Isso torna-o muito suscetível a introdução de erros. O Linting é um processo de análise de código, que retorna para você alguns “erros” que pareçam suspeitos.

Utilize o strict

Se você não utilizar o modo estrito(strict), as ferramentas de linting logo o alertarão. O modo use strict adiciona algumas exceções ao seu código, não permitindo realizar algumas ações denominadas inseguras, como acessar objetos globais declarados. O modo estrito garante que o seu código seja bem pensado e consequentemente, mais seguro.

Simplicidade

Se esforce para manter sua aplicação simples. Seu design, a arquitetura do seu software, seu código. Quanto mais complexo, maior a possibilidade de vulnerabilidades e mais fácil ele pode vir a ser alvo de invasores. Sempre utilize os guias de estilo e melhores práticas de codificação.

Concluindo

Estes são alguns passos eficazes e simples de como você pode tornar o seu aplicativo menos vulnerável à ataques de invasores. Utilize as dicas e implemente-as na sua aplicação.

Referências:https://ngninja.com/posts/secure-coding-javascript

Gostou deste artigo? Comente abaixo:

Publicado em

Como se sair bem nas entrevistas de emprego?

Os profissionais da área de TI sofrem bastante dificuldades na hora das entrevistas de emprego. Se você está buscando sua primeira ou décima colocação no mercado de trabalho, você passará por entrevistas que as vezes o deixarão um pouco inseguro. Pensando nisso, coloquei abaixo um pequeno resumo que espero que te coloque no caminho ao sucesso.

O que o recrutador procura?

Antes de mais nada, precisamos compreender que embora as vagas no mercado de trabalho sejam as mais variadas possíveis, a grande maioria das entrevistas de emprego respondem a duas perguntas básicas:

  • O candidato tem as qualificações técnicas para a função?
  • O candidato tem o perfil que esperamos para a função?

Sabendo disso, precisamos nos preparar para responder a estas perguntas de uma maneira que sejamos claros e objetivos, passando credibilidade e confiança para os recrutadores. Conseguimos isso através de análise e treino. Pense o que responderia para as questões mais comuns nas entrevistas, buscando por uma resposta que traga à tona o melhor que tens a entregar do seu profissional e perfil pessoal.

Quais perguntas são mais comuns em uma entrevista?

Abaixo algumas das perguntas mais utilizadas em entrevistas (nosso ebook contém uma lista com mais de 30 exemplos):

  • Quais são os seus pontos fortes?
  • Quais são os seus pontos fracos?
  • Onde você se vê em 5 anos? (ou em 10 anos)
  • O que só você pode nos oferecer?
  • Qual a realização profissional que você mais se orgulha?
  • Quem são nossos concorrentes?
  • O que te motiva?
  • Quais eram os pontos fortes e fracos do seu último chefe?

O que todas estas perguntas têm em comum? Todas elas possuem um questionamento oculto que se bem respondido te darão uma vantagem bastante considerável frente aos seus concorrentes.

Apesar destas perguntas não terem cunho técnico ela são o padrão adotado pelo recrutador. Ele poderá também lhe perguntar sobre as tecnologias que você trabalha ou será o responsável por lhe encaminhar (ou não) para o entrevistador técnico. Então é muito importante que você esteja preparado!

Aprenda no Ebook Guia do Emprego Novo, como se preparar para os processos seletivos conhecendo o que se passa pela cabeça dos recrutadores. Adquira agora com pelo link: Guia do Emprego Novo e use o cupom MUNDOJS para ter 40% de desconto.