 |
|
||||
|
|||||
Você está aqui: Cards de Engenharia Civil - Fundações |
||
|
||
 Link para compartilhar na Internet ou com seus amigos: |
||
Python ::: Fundamentos da Linguagem ::: Passos Iniciais |
Python para iniciantes - Como importar módulos e identificadores Python usando a instrução import...asQuantidade de visualizações: 8121 vezes |
Quando importamos módulos para nossos programas, a linguagem Python permite que alteremos os nomes dos módulos. Isso pode ser feito com a instrução import...as. Veja:
# importa o módulo math com outro nome
import math as matematica
def main():
# usa o método ceil do namespace matematica
print("Valor arredondado: ", matematica.ceil(8.12))
if __name__== "__main__":
main()
Ao executar este código nós teremos o seguinte resultado: Valor arredondado: 9 É possível importar com outros nomes os métodos e identificadores de um módulo. Veja:
# importa o ceil com outro nome
from math import ceil as arredondar
def main():
# usa o método arredondar
print("Valor arredondado: ", arredondar(8.12))
if __name__== "__main__":
main()
|
React ::: Elementos de Formulários HTML ::: input type text Element/Object |
Como obter o texto digitado em uma caixa de texto em React usando useState()Quantidade de visualizações: 910 vezes |
|
Nesta dica mostrarei como podemos retornar o texto digitado em um elemento HTML <input type="text"> ao clicarmos em um botão. Para isso nós faremos uso do gerencimento de estado proporcionado pelo objeto useState do React. Note que teremos dois estados: nome e nomeAtualizado, que estarão conectados às funções setNome() e setNomeAtualizado(). No momento que o texto é digitado na caixa de texto, automaticamente o estado nome é atualizado para corresponder ao contéudo exato do elemento HTML <input type="text">. Somente quando o botão é clicado é que transferimos o valor do estado nome para o estado nomeAtualizado, por meio de uma chamada à função setNomeAtualizado. Veja o código completo para o App.js:
// vamos importar o useState
import {useState} from 'react';
// função App() que será exportada
export default function App() {
// vamos criar dois states e suas funções
// correspondentes
const [nome, setNome] = useState('');
const [nomeAtualizado, setNomeAtualizado] = useState(nome);
// aqui nós gerenciamos o evento onChange da caixa
// de texto
const tratarEventoChange = (event) => {
// e chamamos a função que atualiza o estado nome
setNome(event.target.value);
};
// aqui nós gerenciamos o evento onClick do botão
const tratarEventoClick = () => {
// aqui nós transferimos o valor do estado
// nome para o estado nomeAtualizado
setNomeAtualizado(nome);
};
// e retornamos para renderização
return (
<div>
<input type="text"
id="nome" name="nome"
onChange={tratarEventoChange}
value={nome}/>
<h2>Nome Informado: {nome}</h2>
<h2>Nome Atualizado: {nomeAtualizado}</h2>
<button onClick={tratarEventoClick}>
Atualizar Estado</button>
</div>
);
}
E aqui está o código para o index.js:
// vamos fazer os imports necessários
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
// definimos a raiz da aplicação React
const root = ReactDOM.createRoot(
document.getElementById('root'));
// e renderizamos a aplicação no navegador
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Execute o exemplo e você verá uma caixa de texto <input type="text">, um botão <button> e dois elementos <h2>. Quando digitamos na caixa de texto, automaticamente o estado nome é atualizado. Ao clicarmos no botão, o estado nome é transferido para o estado nomeAtualizado, tudo isso é refletido de imediato na página. |
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: 7673 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. |
Python ::: Dicas & Truques ::: Lista (List) |
Curso completo de Python - Como obter a quantidade de itens em uma lista PythonQuantidade de visualizações: 9018 vezes |
|
Nesta dica mostrarei como podemos usar a função len() da linguagem Python para obtermos a quantidade de itens em um objeto List. Não deixe de ver outros exemplos de List nesta mesma seção. Veja o código Python completo para o exemplo:
def main():
# cria uma lista de nomes
nomes = ['Carlos', 'Ricardo', 'Osmar']
# obtém a quantidade de elementos na lista
print("A lista contém %d itens" % len(nomes))
if __name__== "__main__":
main()
Ao executar este código Python nós teremos o seguinte resultado: A lista contém 3 itens |
Python ::: Estruturas de Dados ::: Lista Ligada Simples |
Como excluir um nó no final de uma lista encadeada simples em PythonQuantidade de visualizações: 1487 vezes |
|
Nesta dica mostrarei como podemos escrever um método remover_final() que remove e retorna o nó no final de uma lista encadeada simples em Python, ou seja, excluí o último nó da lista. É importante observar que o método exclui o último nó e o retorna completo, inclui o valor que está incluído nele. Se a lista estiver vazia o método retorna o valor None para indicar lista vazia. Vamos começar então com o código para a classe No da lista singularmente ligada (que salvei em um arquivo no_lista_singularmente_ligada.py):
# classe No para uma lista singularmente encadeada ou
# ligada - Singly Linked List
class No:
# construtor da classe No
def __init__(self, info, proximo):
self.info = info
self.proximo = proximo
# método que permite definir o conteúdo do nó
def set_info(self, info):
self.info = info
# método que permite obter a informação de um nó
def get_info(self):
return self.info
# método que permite definir o campo próximo deste nó
def set_proximo(self, proximo):
self.proximo = proximo
# método que permite obter o campo próximo deste nó
def get_proximo(self):
return self.proximo
# retorna True se este nó apontar para outro nó
def possui_proximo(self):
return self.proximo != None
Veja que o código para a classe Nó não possui muitas firulas. Temos apenas um campo info, que guardará o valor do nó, e um campo próximo, que aponta para o próximo nó da lista, ou null, se este for o único nó ou o último nó da lista ligada. Veja agora o código para a classe ListaLigadaSimples (lista_ligada_simples.py), com os métodos inserir_inicio(), remover_final() e exibir():
# importa a classe No
from no_lista_singularmente_ligada import No
# classe ListaLigadaSimples
class ListaLigadaSimples:
# construtor da classe
def __init__(self):
self.inicio = None # nó inicial da lista
# método que deleta um nó no final de uma lista ligada
# este método retorna o nó excluído
def remover_final(self):
# a lista está vazia?
if self.inicio == None:
return None
else:
# vamos excluir e retornar o primeiro nó da lista
removido = self.inicio
# a lista possui apenas um nó?
if self.inicio.get_proximo() == None:
# a lista agora ficará vazia
self.inicio = None
else:
# começamos apontando para o início da lista
no_atual = self.inicio
no_anterior = self.inicio
# enquanto o próximo do nó atual for diferente de nulo
while no_atual.get_proximo() != None:
# avançamos o nó anterior
no_anterior = no_atual
# saltamos para o próximo nó
no_atual = no_atual.get_proximo()
# na estamos na posição de exclusão
removido = no_atual
no_anterior.set_proximo(None)
# retorna o nó removido
return removido
# método que permite inserir um novo nó no início da lista
def inserir_inicio(self, info):
# cria um novo nó contendo a informação e que
# não aponta para nenhum outro nó
novo_no = No(info, None)
# a lista ainda está vazia?
if self.inicio == None:
# o novo nó será o início da lista
self.inicio = novo_no
else:
# o novo nó aponta para o início da lista
novo_no.set_proximo(self.inicio)
# o novo nó passa a ser o início da lista
self.inicio = novo_no
# método que permite exibir todos os nós da lista
# ligada simples (lista singularmente encadeada)
def exibir(self):
# aponta para o início da lista
no_atual = self.inicio
# enquanto o nó não for nulo
while no_atual != None:
# exibe o conteúdo do nó atual
print(no_atual.get_info())
# pula para o próximo nó
no_atual = no_atual.get_proximo()
E agora o código main() que insere alguns valores no início da nossa lista singularmente encadeada e testa o método remover_final():
# importa a classe ListaLigadaSimples
from lista_singularmente_ligada import ListaLigadaSimples
# método principal
def main():
# cria uma nova lista encadeada simples
lista = ListaLigadaSimples()
print("Insere o valor 12 no início da lista")
lista.inserir_inicio(12)
print("Conteúdo da lista: ")
lista.exibir()
print("Insere o valor 30 no início da lista")
lista.inserir_inicio(30)
print("Conteúdo da lista: ")
lista.exibir()
print("Insere o valor 27 no início da lista")
lista.inserir_inicio(27)
print("Conteúdo da lista: ")
lista.exibir()
print("Remove um nó no final da lista")
removido = lista.remover_final()
if removido == None:
print("Não foi possível remover. Lista vazia")
else:
print("Nó removido:", removido.get_info())
print("Conteúdo da lista: ")
lista.exibir()
if __name__== "__main__":
main()
Ao executar este código Python nós teremos o seguinte resultado: c:\estudos_python>python estudos.py Insere o valor 12 no início da lista Conteúdo da lista: 12 Insere o valor 30 no início da lista Conteúdo da lista: 30 12 Insere o valor 27 no início da lista Conteúdo da lista: 27 30 12 Remove um nó no final da lista Nó removido: 12 Conteúdo da lista: 27 30 |
Desafios, Exercícios e Algoritmos Resolvidos de Python |
Veja mais Dicas e truques de Python |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
