 |
|
||||
 Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica. |
|||||
jQuery ::: Dicas & Truques ::: CSS (Cascading Style Sheet) |
Apostila jQuery - Como definir propriedades style CSS de elementos HTML usando a função css() do jQueryQuantidade de visualizações: 8683 vezes |
Para definir as propriedade style de um determinado elemento HTML só precisamos usar a função css() da biblioteca jQuery. Veja como isso pode ser feito no trecho de código abaixo:
<script type="text/javascript">
<!--
function definirCSS(){
// define a cor verde para a propriedade CSS color da
// DIV com id "div_2"
$('#div_2').css('color', 'green');
}
//-->
</script>
Neste código a cor "green" é atribuída à propriedade CSS "color" do elemento DIV com o id "div_2". |
C++ ::: Dicas & Truques ::: Strings e Caracteres |
Apostila C++ - Como retornar o tamanho de uma string em C++ usando a função length() da classe StringQuantidade de visualizações: 24937 vezes |
Nesta dica eu mostro como podemos usar a função length() da classe String da linguagem C++ para obter a quantidade de caracteres em uma palavra, frase ou texto. Esta função é definida na classe string da seguinte forma:size_t length() const;
#include <string>
#include <iostream>
using namespace std;
int main(int argc, char *argv[])
{
string str = "C++";
size_t tamanho = str.length();
cout << "Esta string contém " << tamanho
<< " caracteres.\n\n";
system("PAUSE"); // pausa o programa
return 0;
}
Ao executar este código C++ nós teremos o seguinte resultado: Esta string contém 3 caracteres. |
Delphi ::: VCL - Visual Component Library ::: TEdit |
Como obter o conteúdo de um TEdit do Delphi em tempo de execução usando a função SendMessage() da API do Windows e a mensagem WM_GETTEXTQuantidade de visualizações: 11994 vezes |
|
Embora o Delphi já nos forneça as ferramentas necessárias para obter o conteúdo de um TEdit em tempo de execução, é importante saber como realizar esta tarefa usando a API do Windows. Para isso, podemos usar a função SendMessage() em combinação com a mensagem WM_GETTEXT. A função SendMessage() da API do Windows possui a seguinte assinatura em C/C++: LRESULT SendMessage( HWND hWnd, UINT Msg, WPARAM wParam, LPARAM lParam ); No arquivo Windows.pas podemos encontrar o protótipo e corpo desta função convertidos para Object Pascal:
// Protótipo
{$EXTERNALSYM SendMessage}
function SendMessage(hWnd: HWND; Msg: UINT; wParam: WPARAM;
lParam: LPARAM): LRESULT; stdcall;
// Implementação
function SendMessage; external user32 name 'SendMessageW';
Note que precisamos de um HWND (parâmetro hWnd) para a caixa de texto. Temos que fornecer também a quantidade de caracteres que serão lidos (parâmetro wParam) e um buffer no qual os caracteres lidos a partir da caixa de texto serão colocados (parâmetro lParam). Veja:
procedure TForm1.Button1Click(Sender: TObject);
var
buffer: String;
tamanho: Integer;
begin
// vamos obter a quantidade de caracteres na caixa de texto
tamanho := SendMessage(Edit1.Handle, WM_GETTEXTLENGTH, 0, 0);
// vamos ajustar o tamanho do buffer
SetLength(buffer, tamanho);
// vamos usar a mensagem WM_GETTEXT para obter o conteúdo
// da caixa de texto
SendMessage(Edit1.Handle, WM_GETTEXT, tamanho + 1, lParam(@buffer[1]));
// vamos exibir o resultado
ShowMessage('O conteúdo do edit é: ' + buffer);
end;
Veja que usei também a mensagem WM_GETTEXTLENGTH para obter a quantidade de caracteres na caixa de texto. Isso foi necessário para redimensionarmos o buffer de caracteres para um tamanho capaz de acomododar todo o conteúdo do edit. |
HTML5 ::: Aplicativos Completos ::: Programas de desenho, edição e visualização de imagens e fotos |
Como criar um programa de desenho simples usando o objeto Canvas do HTML5Quantidade de visualizações: 5983 vezes |
|
Revisando alguns códigos que desenvolvi para clientes ao longo desses anos, encontrei um exemplo de um programa de desenho bem simples demonstrando as possibilidades gráficas do elemento Canvas do HTML. Este código foi escrito há uns dois anos e resolvi compartilhar com todos, para que vocês possam aprimorá-lo e acrescentar novas idéias, afinal, o HTML5 está mais atual do que nunca. Veja o resultado no navegador:  Eu o escrevi de forma bem simples, sem usar jQuery ou qualquer outro framework, apenas JavaScript raiz mesmo, de forma que até os estudantes mais iniciantes não terão dificuldade de entender. Veja a listagem completa e com comentários:
<html>
<head>
<title>Desenhando no canvas do HTML5</title>
</head>
<body style="padding: 15px">
<b>Clique e arraste para desenhar</b><br><br>
<canvas id="quadro" style="border: 1px solid #666"
width="600" height="350"></canvas>
<br><br><button onClick="limpar()">Limpar</button>
<script type="text/javascript">
// obtém uma referência ao canvas
var quadro = document.getElementById('quadro');
// vamos obter o contexto de desenho
var areaDesenho = quadro.getContext("2d");
// podemos desenhar?
var podeDesenhar = false; // ainda não
// vetores para guardar as posições x, y, e se o mouse está sendo
// movimentado pressionado
var vetorX = new Array();
var vetorY = new Array();
var vetorArrastar = new Array();
// agora vamos adicionar na área de desenho um "ouvidor" de
// eventos mousedown, ou seja, vamos detectar quando o usuário
// pressionar o botão do mouse (sem soltar)
quadro.addEventListener('mousedown', function(e){
// podemos iniciar o desenho
podeDesenhar = true;
registrarClique(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
desenhar(); // faça o desenho, moço
});
// o "ouvidor" de evento que detecta se o mouse está sendo arrastado
// pressionado
quadro.addEventListener('mousemove', function(e){
if(podeDesenhar){
registrarClique(e.pageX - this.offsetLeft, e.pageY -
this.offsetTop, true);
desenhar(); // faça o desenho, moço
}
});
// o "ouvidor" de evento que detecta se o mouse foi liberado
// e interrompe o desenho
quadro.addEventListener('mouseup', function(e){
podeDesenhar = false;
});
// o mouse saiu da área de desenho?
quadro.addEventListener('mouseleave', function(e){
podeDesenhar = false;
});
function registrarClique(x, y, arrastar){
// aqui nós guardamos em vetores as posições x, y do clique ou
// o movimento do mouse pressionado.
vetorX.push(x);
vetorY.push(y);
vetorArrastar.push(arrastar);
}
// é aqui que a mágica ocorre
function desenhar(){
// primeiro vamos limpar o quadro de desenho
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
areaDesenho.strokeStyle = "#5c5cd6"; // cor
areaDesenho.lineJoin = "round"; // formato da junção de linha
areaDesenho.lineWidth = 5; // largura da linha
// percorremos os vetores, usando como base o vetor de coordenadas x
for(var i = 0; i < vetorX.length; i++){
areaDesenho.beginPath(); // inicia o caminho
// o mouse foi arrastado neste evento?
if((vetorArrastar[i] == true && i > 0)){
areaDesenho.moveTo(vetorX[i - 1], vetorY[i - 1]);
}
else{
// é o início do desenho
areaDesenho.moveTo(vetorX[i] - 1, vetorY[i]);
}
// desenha a linha do ponto X ao ponto Y
areaDesenho.lineTo(vetorX[i], vetorY[i]);
// fecha o caminho
areaDesenho.closePath();
// conclui de fato o desenho
areaDesenho.stroke();
}
}
// e aqui nós limpamos a área de desenho e esvaziamos os vetores
function limpar(){
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
vetorX = [];
vetorY = [];
vetorArrastar = [];
}
</script>
</body>
</html>
Salve o código como "desenho.html" (cuidado para não salvar como "desenho.html.txt") e abra-o no seu navegador, remoto ou localmente. Você pode começar suas modificações alterando a cor do desenho, a largura da linha, etc. Você pode também deixar figuras pré-configuradas e até permitir que o usuário inclua fotos no Canvas. Para os estudantes que já sabem Node.js, saiba que é possível enviar os três vetores via sockets em um ambiente real time para que outros usuários na rede vejam o seu desenho em tempo real. Bons estudos. |
HTML5 ::: Dicas & Truques ::: Meta Tags |
HTML5 para iniciantes - Como usar a meta tag viewport para controlar o layout de suas páginas HTMLQuantidade de visualizações: 6216 vezes |
|
Quando estamos aprendendo HTML5 e queremos desenvolver páginas web responsivas, ou design responsivo, uma das primeiras tags que temos que entender e dominar bem, é a tag viewport, incluinda com a especificação do HTML5. Mas o que é a tag viewport? Esta meta tag foi originalmente apresentada no navegador Safari Mobile, e é usada para definir a largura e escala de apresentação do conteúdo da página HTML. Dessa forma, viewport é a área da página web na qual o conteúdo é exibido para o usuário. Como sabemos, uma página web pode ser acessada por dispositivos variados. A tela do laptop é muito maior se comparada à tela de um smartphone ou tablet. A meta tag viewport é adicionada na seção <head> da página HTML e pode conter os seguintes elementos: width: É a largura do viewport virtual no dispositivo. height: É a altura do viewport virtual do dispositivo. initial-scale: É o nível de zoom quando a página é acessada. maximum-scale: É o limite máximo de zoom que pode ser aplicado à página. user-scalable: Uma flag que indica se o usuário pode ou não aplicar zoom à página. Os valores permitidos são yes ou no. Veja, por exemplo, como definir um viewport de 980px e escala inicial de zoom de 1: <meta name="viewport" content="width=980, initial-scale=1"> No entanto, se nossa intenção é desenvolver um design responsivo, devemos passar o valor device-width para o atributo width do viewport. Isso faz com que a largura do viewport seja igual à largura do dispositivo que está acessando a página. Veja uma página HTML completa usando esta abordagem: <html> <head> <title>Estudando HTML5</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <h1>Java Avançado - Como obter a largura e altura da tela do seu computador em pixels usando o método getScreenSize() da classe Toolkit do Java</h1> <p>A classe Toolkit da linguagem Java nos fornece o método getScreenSize(), que retorna um objeto da classe Dimension contendo a largura e a altura da tela do nosso computador, em pixels. Veja o código Java completo para o exemplo:</p> </body> </html> Note que o elementos dentro do atributo content são separados por vírgulas, juntamente com seus valores individuais. |
Java ::: Dicas & Truques ::: Threads |
Threads em Java - Como definir as prioridades das threads JavaQuantidade de visualizações: 12717 vezes |
|
Quando estamos trabalhando com threads em Java, precisamos estar cientes de que cada thread possui uma prioridade de execução. É por meio da prioridade de cada uma que o gerenciador de threads decidirá qual thread deverá ser executada primeiro. Por padrão, todas as threads possuem prioridade NORM_PRIORITY. Esta é uma constante que possui o valor 5 e está declarada na classe Thread. Além disso, cada thread herda automaticamente a prioridade da thread que a criou. As constantes MAX_PRIORITY (prioridade máxima), MIN_PRIORITY (prioridade mínima) e NORM_PRIORITY (prioridade normal) são usadas para definir as prioridades das threads Java. Veja um exemplo no qual temos duas threads. A primeira possui a prioridade máxima enquanto a segunda possui a prioridade mínima:
// criamos uma classe que servirá como thread
class MinhaThread extends Thread{
private String nome;
public MinhaThread(String nome){
this.nome = nome;
}
public void run(){
for(int i = 1; i <= 20; i++){
System.out.println(nome + ": " + i);
}
}
}
public class Estudos{
public static void main(String[] args){
// vamos criar duas threads
MinhaThread t1 = new MinhaThread("Thread 1");
t1.setPriority(Thread.MAX_PRIORITY); // prioridade máxima
t1.start();
MinhaThread t2 = new MinhaThread("Thread 2");
t2.setPriority(Thread.MIN_PRIORITY); // prioridade mínima
t2.start();
}
}
Execute este exemplo e veja como a segunda thread só é executada quando a primeira finaliza. Remova as linhas que definem a prioridade e note como o tempo de cada thread é novamente fracionado. É importante ter em mente que aqui estamos falando de um ambiente de processador único. Em ambientes de múltiplos processadores o comportamento pode ser diferente do abordado na dica. Não devemos confiar em prioridades de threads quando o objetivo é aguardar a finalização de uma thread e só então permitir o processamento das instruções contidas no método run() de outra thread. Para estes casos o recomendável é usar alguma forma para sinalizar as demais threads de que a thread atual concluiu sua tarefa. |
Java ::: Dicas & Truques ::: Formatação de datas, strings e números |
Como usar o método format() da classe NumberFormat do Java para formatar um valor float ou double de acordo com as configurações regionais - RevisadoQuantidade de visualizações: 11349 vezes |
|
Nesta dica mostrarei como usar o método format() da classe NumberFormat da linguagem Java. Esta classe está no pacote java.text e é usada para a formatação e análise de valores numéricos. Note como usei o método getInstance() sem argumentos. Isso nos permite retornar uma instância de NumberFormat de acordo com as configurações regionais da máquina na qual o código está sendo executado. Veja o código completo:
package arquivodecodigos;
import java.text.NumberFormat;
public class Estudos{
public static void main(String[] args){
// vamos double a ser formatado
double valor = 1234567.89;
// vamos obter uma instância de acordo com as configurações
// regionais
NumberFormat nf = NumberFormat.getInstance();
// e agora usamos o método format() para formatar
String numFormatado = nf.format(valor);
// exibimos o valor original
System.out.println("Sem formatação: " + valor);
// com formatação
System.out.println("Com formatação: " + numFormatado);
}
}
Ao executar este código nós teremos o seguinte resultado: Sem formatação: 1234567.89 Com formatação: 1.234.567,89 Esta dica foi revisada e testada no Java 8. |
C++ ::: Dicas & Truques ::: Recursão (Recursividade) |
Como calcular potência em C++ usando uma função recursivaQuantidade de visualizações: 19528 vezes |
|
Nesta dica mostrarei como podemos efetuar cálculo de potência em C++ usando recursividade, ou seja, uma função que chama a si mesma repetidamente, até que o caso base (condição de parada) seja alcançado. Veja que informaremos a base e o expoente e a função nos retornará a potência da base informada. Veja o código C++ completo para o exemplo:
#include <iostream>
using namespace std;
// função recursiva que calcula a potência de
// um inteiro
int potencia(int base, int expoente){
// caso base
if(expoente == 0){
return 1;
}
// efetua mais uma chamada recursiva
else{
return base * potencia(base, expoente - 1);
}
}
// função principal do programa
int main(int argc, char *argv[]){
int base = 3;
int expoente = 4;
cout << base << " elevado a " << expoente << " = " <<
potencia(base, expoente) << endl;
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
Ao executar este código C++ nós teremos o seguinte resultado: 3 elevado a 4 = 81 |
HTML5 ::: Canvas Element ::: Linhas |
Computação gráfica usando HTML 5 - Como usar o método lineTo() do objeto Canvas do HTML5 para desenhar retasQuantidade de visualizações: 3006 vezes |
|
O método lineTo() do objeto Canvas do HTML5 nos permite desenhar linhas retas entre um ponto x e um ponto y. Para isso, usamos o método moveTo() para mover a caneta (ou pena) de desenho para um coordenada x, y e a partir deste ponto nós especificamos as coordenadas x, y para a outra extremidade da linha. O trecho de código a seguir desenha uma linha saindo das coordenadas x = 20, y = 20 e chegando até x = 300, y = 150. Veja: contexto.moveTo(20, 20); // move a caneta para x, y contexto.lineTo(300, 150); // coordenadas x, y E aqui estão os códigos HTML e JavaScript para o exemplo completo:
<!doctype html>
<html>
<head>
<title>O objeto Canvas do HTML5</title>
</head>
<body>
<Canvas id="canvas1" width="500" height="350"></Canvas>
<script type="text/javascript">
// obtemos uma referência ao elemento Canvas
var canvas = document.getElementById("canvas1");
// obtemos o contexto de desenho
var contexto = canvas.getContext("2d");
contexto.beginPath(); // inicia ou reseta o caminho anterior
contexto.moveTo(20, 20); // move a caneta para x, y
contexto.lineTo(300, 150); // coordenadas x, y
contexto.stroke(); // finaliza o desenho
</script>
</body>
</html>
Ao abrir esta página HTML nós teremos o seguinte resultado:  |
Java ::: Dicas & Truques ::: Ordenação e Pesquisa (Busca) |
Como usar a pesquisa ou busca linear ou sequencial nos elementos de um vetor em JavaQuantidade de visualizações: 4873 vezes |
|
A busca linear ou sequencial, muitas vezes chamada de pesquisa linear ou sequencial, é geralmente implementada por meio de um algorítmo que varre os elementos de um coleção sequencial, começando do primeiro elemento e indo até o último. Esta busca não é tão usada quando a pesquisa binária ou hashing, por ser considerada muito lenta quando aplicado a um conjunto de dados muito grande. A busca linear ou sequencial em um vetor Java pode ser descrito pelos seguintes passos: 1) Efetua a varredura dos elementos do vetor. 2) Compara o valor do elemento atual do vetor com o valor sendo pesquisado. 3) Se o valor for encontrado, efetue o procedimento desejado com o elemento do vetor. 4) Se a varredura alcançar o último elemento do vetor e o valor pesquisado não for encontrado, exiba uma mensagem de erro ou algum outro procedimento para alertar o usuário do programa. Veja um exemplo no qual declaramos e preenchemos um vetor de int com 5 elementos e em seguida usamos um método pesquisaLinear para verificar se um determinado valor existe no vetor:
package arquivodecodigos;
public class Estudos{
public static void main(String a[]){
// vamos criar um vetor de 5 elementos int
int[] valores = {32, 7, 21, 4, 90};
// vamos pesquisar o valor 21
int valor = 21;
// vamos verifiar se o valor está no vetor
int indice = pesquisaLinear(valores, valor);
if(indice > -1){
System.out.println("O valor foi encontrado no índice: "
+ indice);
}
else{
System.out.println("O valor não foi encontrado.");
}
}
// método que permite efetuar a busca linear em um vetor
public static int pesquisaLinear(int[] vetor, int valor){
// percorre os elementos do vetor
for(int i = 0; i < vetor.length; i++){
// o valor foi encontrado?
if(vetor[i] == valor){
return i;
}
}
// não foi encontrado? vamos retornar -1
return -1;
}
}
Ao executarmos este código nós teremos o seguinte resultado: O valor foi encontrado no índice: 2 Veja o mesmo código sem usar um método adicional, ou seja, a busca linear é feito dentro do método main() da classe Java:
package arquivodecodigos;
public class Estudos{
public static void main(String a[]){
// vamos criar um vetor de 5 elementos int
int[] valores = {32, 7, 21, 4, 90};
// vamos pesquisar o valor 21
int valor = 21;
// vamos verifiar se o valor está no vetor
int indice = -1; // não foi encontrado
// percorre os elementos do vetor
for(int i = 0; i < valores.length; i++){
// o valor foi encontrado?
if(valores[i] == valor){
indice = i;
break;
}
}
if(indice > -1){
System.out.println("O valor foi encontrado no índice: "
+ indice);
}
else{
System.out.println("O valor não foi encontrado.");
}
}
}
|
Nossas 20 dicas & truques de programação mais populares |
|
PHP - Datas e horas em PHP - Como subtrair horas de uma data usando a função mktime() da linguagem PHP MySQL - Como usar joins no MySQL |
Você também poderá gostar das dicas e truques de programação abaixo |
|
JavaScript - JavaScript Avançado - Como usar o operador de bits & (E/AND sobre bits) da linguagem JavaScript |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
