Blog · Dicas & Tutoriais · Javascript · Web

Obtendo as teclas que estão sendo pressionadas ao mesmo tempo com Javascript e jQuery

Quem trabalha com desenvolvimento Web pode ter se deparado com a situação de precisar implementar algum comando via teclado, em estilo teclas de atalho, seja para recurso de acessibilidade ou para uma simples aplicação Web. Isso é possível, é fácil e basta algumas linhas de código Javascript.

Experimentando pela primeira vez o CodePen, resolvi escrever um tutorial simples a fim de explicar como implementar essa funcionalidade, com algumas poucas linhas de código. No exemplo uso a bilbioteca jQuery, além do JavaScript.

Dicas & Tutoriais · Padrões Web

Usando jQuery para manipular arquivos SVG

Em uma postagem anterior falei da biblioteca Raphaël para criação de gráficos vetoriais SVG usando Javascript. Agora nesta postagem, demonstrarei como usar a popular biblioteca jQuery para manipular arquivos SVG, usando um plugin.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

[javascript]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG – o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
// Ao ser carregado, chamará a função draw…
$(‘#svgbasics’).svg({onLoad: draw});
});

function draw (svg) {
// Desenhando um círculo…
svg.circle(75, 75, 50, {fill: ‘none’, stroke: ‘red’, ‘stroke-width’: 3});

// Criando um grupo com duas linhas…
var g = svg.group({stroke: ‘black’, ‘stroke-width’: 2});
svg.line(g, 15, 75, 135, 75);
svg.line(g, 75, 15, 75, 135);

// Desenhando um retângulo que, quando clicado, chama o método alert
svg.rect(g, 150, 100, 200, 100, 10, 10,
{fill: ‘yellow’, stroke: ‘navy’, strokeWidth: 5, onclick:"alert(‘Você clicou!’)"});
}

</script>
</head>
<body>
<h1>jQuery SVG – O Básico</h1>
<p>Página de exemplo</p>
<div id="svgbasics"></div>
</body>
</html>
[/javascript]