Há muitos anos que o JavaScript não ganhava modificações e funcionalidades novas tão relevantes, mas isso finalmente mudou quando o ECMAScript 2015 (ES6) chegou. Desde então, o TC39 – comitê da ECMA Internacional, responsável por manter a especificação – está lançando uma nova versão a cada ano. A ideia é que, com atualizações mais constantes, a evolução também é constante; evitando assim, grandes anos sem mudanças, como aconteceu na transição do ES5 para o ES6. Por ser uma especificação mais enxuta, o ES7 trouxe basicamente duas funcionalidades interessantes para a linguagem: O método includes() para o objeto Array, e o operador exponencial. Neste artigo, vamos focar no funcionamento deste novo operador. Caso você tenha interesse em aprender de forma mais completa sobre o ES7 e o ES8, te convido a olhar meu recém-lançado curso sobre o tema na Udemy, disponível neste link. Se você ainda não domina o ES6, há meu outro curso bem bacana sobre o tema também. Conhecendo o operador de exponenciaçãoPara entender como esse operador trabalha, precisamos rever quais os fatores envolvidos no funcionamento de uma operação com potência: Visto isso, antes do ES7 entrar em cena, para realizarmos uma operação exponencial, utilizávamos a famosa função pow do objeto Math. Como neste exemplo: vamos elevar cinco ao cubo, como representado na figura: const resultado = Math.pow(5,3); console.log(resultado); // 125Bem simples, certo? No primeiro parâmetro da função colocamos a base, e no segundo o expoente. Se trocarmos a ordem dos elementos do exemplo anterior, teremos três elevado a cinco, onde o resultado é duzentos e quarenta e três. const resultado = Math.pow(3,5); console.log(resultado); // 243 = 3 * 3 * 3 * 3 * 3Por outro lado, também precisamos lembrar que operações deste tipo podem conter expoentes negativos como, por exemplo, dois elevado a menos três: const resultado = Math.pow(2,-3); console.log(resultado); // 0.125 = 1/(2*2*2)Até aí acredito que não há nenhuma novidade. Como o ES7, ou ECMAScript 2016, nós ganhamos o operador de exponenciação, que é representado por dois asteriscos seguidos (**). Seu funcionamento é praticamente igual aos exemplos anteriores, com a diferença que não há nenhuma função envolvida. Por exemplo, vamos calcular novamente cinco ao cubo. Utilizando esse novo operador, ficaria assim: Bem simples, certo? Conseguimos até mesmo quebrar o cálculo exponencial em duas partes, desta maneira: let numero = 5; numero **= 3; console.log(resultado); // 125Reparem que, ao utilizar a notação **=, ele pega o valor armazenado na variável número como base e coloca o valor depois da igualdade como exponente. Ao final, temos exatamente o mesmo resultado. Por fim, também conseguimos realizar operações com o expoente negativo, da mesma maneira que fizemos antes: const resultado = 2 ** -3; console.log(resultado); // 0.125ConclusãoEsta é uma das funcionalidades trazidas para a linguagem, além do método includes() para Array. Seu funcionamento é bem simples, e de acordo com o site “Can I Use“, todos os navegadores modernos já dão suporte a ela (no caso do Node, somente a partir da versão 8.10). Caso você tenha interesse em ver mais detalhes sobre essa funcionalidade, neste link há os detalhes da funcionalidade na especificação. ReferênciasDe 0 a 10, o quanto você recomendaria este artigo para um amigo?
A função square() é uma função embutida em p5.js que é usada para desenhar o quadrado na tela. Um quadrado contém quatro lados iguais e quatro ângulos de 90 graus cada. É o caso especial de um retângulo onde a largura e a altura são iguais. Sintaxe: square( x, y, s, tl, tr, br, bl )Parâmetros: esta função aceita muitos parâmetros mencionados acima e descritos abaixo:
Exemplo 1: function setup() { // Create Canvas of given size createCanvas(300, 300); } function draw() { background(220); // Use color() function let c = color('green'); // Use fill() function to fill color fill(c); // Draw a square square(50, 50, 200); }Saída: Exemplo 2: function setup() { // Create Canvas of given size createCanvas(300, 300); } function draw() { background(220); // Use color() function let c = color('green'); // Use fill() function to fill color fill(c); // Draw a square square(50, 50, 200, 20); }Saída: Exemplo 3: function setup() { // Create Canvas of given size createCanvas(300, 300); } function draw() { background(220); // Use color() function let c = color('green'); // Use fill() function to fill color fill(c); // Draw a square square(50, 50, 200, 10, 20, 30, 40); }Saída: Editor online: https://editor.p5js.org/ Referência: https://p5js.org/reference/#/p5/square
Fechada. Essa pergunta é fora de escopo e não está atualmente aceitando respostas.
Quer melhorar essa pergunta? Update the question so it's on-topic for Stack Overflow em Português. Fechada no ano passado. Bom dia, Preciso criar um botão, onde toda vez que ele é pressionado, um quadrado vermelho é criado na tela. Tentei fazer isso com o código abaixo, mas dessa forma o botão é gerado somente uma vez. Alguém poderia me ajudar? Criar Quadrado Vermelho <script> var btnElement = document.querySelector('button.botao'); btnElement.onclick = function() { btnElement.style.width = '100px'; btnElement.style.height = '100px'; btnElement.style.backgroundColor = '#f00'; } </script>
Até agora, em cada exemplo dessa página foi usada apenas um tipo de função de caminho (path) para cada forma (shape). No entanto, não há nenhuma limitação para o número ou tipos de caminhos que você pode usar para criar um shape. Então, neste exemplo final, vamos combinar todas as funções de caminho para fazer um conjunto de personagens de jogo muito conhecido. function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); roundedRect(ctx,12,12,150,150,15); roundedRect(ctx,19,19,150,150,9); roundedRect(ctx,53,53,49,33,10); roundedRect(ctx,53,119,49,16,6); roundedRect(ctx,135,53,49,33,10); roundedRect(ctx,135,119,25,49,10); ctx.beginPath(); ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false); ctx.lineTo(31,37); ctx.fill(); for(var i=0;i<8;i++){ ctx.fillRect(51+i*16,35,4,4); } for(i=0;i<6;i++){ ctx.fillRect(115,51+i*16,4,4); } for(i=0;i<8;i++){ ctx.fillRect(51+i*16,99,4,4); } ctx.beginPath(); ctx.moveTo(83,116); ctx.lineTo(83,102); ctx.bezierCurveTo(83,94,89,88,97,88); ctx.bezierCurveTo(105,88,111,94,111,102); ctx.lineTo(111,116); ctx.lineTo(106.333,111.333); ctx.lineTo(101.666,116); ctx.lineTo(97,111.333); ctx.lineTo(92.333,116); ctx.lineTo(87.666,111.333); ctx.lineTo(83,116); ctx.fill(); ctx.fillStyle = "white"; ctx.beginPath(); ctx.moveTo(91,96); ctx.bezierCurveTo(88,96,87,99,87,101); ctx.bezierCurveTo(87,103,88,106,91,106); ctx.bezierCurveTo(94,106,95,103,95,101); ctx.bezierCurveTo(95,99,94,96,91,96); ctx.moveTo(103,96); ctx.bezierCurveTo(100,96,99,99,99,101); ctx.bezierCurveTo(99,103,100,106,103,106); ctx.bezierCurveTo(106,106,107,103,107,101); ctx.bezierCurveTo(107,99,106,96,103,96); ctx.fill(); ctx.fillStyle = "black"; ctx.beginPath(); ctx.arc(101,102,2,0,Math.PI*2,true); ctx.fill(); ctx.beginPath(); ctx.arc(89,102,2,0,Math.PI*2,true); ctx.fill(); } } function roundedRect(ctx,x,y,width,height,radius){ ctx.beginPath(); ctx.moveTo(x,y+radius); ctx.lineTo(x,y+height-radius); ctx.quadraticCurveTo(x,y+height,x+radius,y+height); ctx.lineTo(x+width-radius,y+height); ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius); ctx.lineTo(x+width,y+radius); ctx.quadraticCurveTo(x+width,y,x+width-radius,y); ctx.lineTo(x+radius,y); ctx.quadraticCurveTo(x,y,x,y+radius); ctx.stroke(); } Não vamos discutir isso em detalhes, uma vez que é realmente muito simples. As coisas mais importantes a serem observadas são o uso da propriedade fillStyle no contexto de desenho e o uso de uma função auxiliar (neste caso roundedRect()). Usando funções auxiliares para construir um desenho frequentemente pode ser muito útil, além de reduzir a quantidade de código que você precisa, bem como a sua complexidade. Vamos dar uma nova olhada em fillStyle, em mais detalhes, mais adiante neste tutorial. Aqui, tudo o que estamos fazendo é apenas usando-o para alterar sucessivamente a cor de preenchimento dos caminhos (paths) de cor preta (padrão) para branca. |