 |
|
||||
 Código-Fonte Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
|||||
JavaScript ::: DOM (Document Object Model) ::: document Object |
Como usar o método getElementById() do objeto document para localizar um elemento HTML baseado em seu id usando JavaScriptQuantidade de visualizações: 13362 vezes |
O método getElementById() do objeto document é usado quando queremos localizar e retornar um elemento HTML baseado no valor de sua propriedade id. Veja um exemplo:
<html>
<head>
<title>Estudos JavaScript</title>
<script type="text/javascript">
function localizarElemento(){
// vamos localizar o elemento com o id "aviso"
var elem = document.getElementById("aviso");
// o elemento foi localizado
if(elem != null){
// vamos definir o conteúdo do elemento encontrado
elem.innerHTML = "Vejam este texto.";
}
else{
window.alert("O elemento HTML pesquisado não foi encontrado.");
}
}
</script>
</head>
<body>
<button onclick="localizarElemento()">Localizar DIV</button>
<div id="aviso"></div>
</body>
</html>
Execute o exemplo e clique no botão. Você verá que o texto do elemento div com o id "aviso" é definido para "Vejam este texto.". Note que, se o elemento não for encontrado, o retorno do método getElementById() é null na maioria dos browsers. Há algumas observações interessantes em relação ao método getElementById() do objeto document: a) Se o valor da propriedade id pertencer a uma coleção, ou seja, se houver mais de um elemento HTML com o mesmo id, o método retornará o primeiro elemento na coleção. b) No Firefox, Opera, Google Chrome, Safari e Internet Explorer (IE) a partir da versão 8, o método getElementById() é case-sensitive (sensível a maiúsculas e minúsculas) em relação ao valor da propriedade id. Nas versões anteriores do IE isso não acontecia. |
CSS ::: Projetos HTML/CSS Completos - Códigos Fonte HTML/CSS/JavaScript ::: Formulários HTML/CSS/JavaScript |
Como criar uma tela de login usando HTML, CSS e JavaScript - Responsivo e com opção de exibir/ocultar senhaQuantidade de visualizações: 7727 vezes |
Nesta dica mostrarei uma combinação muito interessante de HTML5, CSS e JavaScript para a criação de um formulário de login contendo dois campos de texto, um para a inserção do nome de usuário e outro para a inserção da senha: Veja: No final da dica deixei o link para download do arquivo index.html e as imagens usadas no exemplo. Neste código você aprenderá técnicas valiosas de CSS para a criação de formulários HTML, tais como a definição de cores de fundo, espaçamento interno e margens. Além disso, verá como exibir uma imagem ao lado (na verdade dentro) de um campo de senha, de forma que, ao clicar na imagem, a senha digitada pelo usuário seja exibida ou ocultada. Para isso foi usado código JavaScript puro, sem a necessidade de nenhum framework ou biblioteca. Outro detalhe interessante é a responsividade. Ao abrir o exemplo em uma tela reduzida, tal como a tela de um celular, o formulário é ajustado. Para isso você aprenderá a usar as media queries do CSS. Tudo bem simples e comentado. Aqui está a parte do CSS que formata a DIV de recuperação da senha, remove o sublinhado do link e define a sua cor, e a media query que ajusta a largura da DIV principal em telas reduzidas:
/* DIV para recuperar a senha */
.div_recuperar_senha{
margin-top: 12px;
padding: 10px;
background-color: #f1f1f1;
text-align: center;
}
/* retira o sublinhado do link */
.div_recuperar_senha a{
text-decoration: none;
color: black;
}
/* define as regras de responsividade para as
telas menores */
@media screen and (max-width: 600px) {
.div_principal{
width: 100%;
}
}
E aqui está o código JavaScript que permite exibir ou ocultar a senha do usuário:
<script type="text/javascript">
function exibir_ocultar_senha(){
// obtém uma referência ao campo senha
const txt_senha = document.getElementById("senha");
// obtém uma referência à imagem indicativa
const imagem = document.getElementById("
imagem_exibir_ocultar");
// mudamos o type do campo senha
const type = senha.getAttribute('type');
if(type === 'password'){
senha.setAttribute('type', 'text');
imagem.src = "imagens/olho_exibir.png";
}
else{
senha.setAttribute('type', 'password');
imagem.src = "imagens/olho_ocultar.png";
}
}
</script>
Gostou? Agora é só baixar o código completo e adicionar estes recursos às páginas web. Código fonte formulário de login em HTML, CSS e JavaScriptResponsivo 1) FLHCJEOS1 - Código fonte formulário de login em HTML, CSS e JavaScript Responsivo - Faça o download do Código fonte formulário de login em HTML, CSS e JavaScript Responsivo. Não se esqueça: Uma boa forma de estudar o código é fazendo pequenas alterações e rodando para ver os resultados. Outra opção é começar um projeto HTML do zero e ir adicionando trechos do código fonte para melhor entendimento de suas partes. |
C++ ::: Dicas & Truques ::: Strings e Caracteres |
Como comparar strings em C++ usando o método compare() da classe StringQuantidade de visualizações: 23193 vezes |
|
Nesta dica mostrarei como podemos usar a função compare() da classe String da linguagem C++ para comparar duas palavras, frases ou textos. Se as duas strings forem iguais, o valor 0 é retornado. Um valor diferente de 0 indica que as duas strings não são iguais. Lembre-se de que esta função distingue entre maiúsculas e minúsculas. Veja como esta função pode ser usada: int compare(const string& str) const; int compare(const char* s) const; Podemos chamar esta função de duas formas: a) Fornecendo uma variável como parâmetro; b) Fornecendo uma string entre aspas. Veja agora um exemplo C++ completo demonstrando o seu uso:
#include <string>
#include <iostream>
using namespace std;
int main(int argc, char *argv[]){
string str1("Java");
string str2("JAVA");
if(str1.compare(str2) == 0){
cout << str1 << " é igual a " << str2 << "\n";
}
else{
cout << str1 << " é diferente de " << str2 << "\n";
}
system("PAUSE"); // pausa o programa
return EXIT_SUCCESS;
}
Ao executar este código C++ nós teremos o seguinte resultado: Java é diferente de JAVA |
C# ::: Windows Forms ::: CheckBox |
Como marcar ou desmarcar todas as CheckBox de um formulário C# Windows Forms de uma só vez via códigoQuantidade de visualizações: 17675 vezes |
|
Em algumas situações temos formulários com muitos controles CheckBox C# Windows Forms e gostaríamos de marcá-los ou desmarcá-los de uma só vez. Esta dica mostra como isso pode ser feito. Para simular este exemplo, coloque vários controles CheckBox no formulário e coloque o código abaixo no evento Click de um botão:
private void button1_Click(object sender, EventArgs e){
// vamos percorrer todos os controles do formulário
for(int i = 0; i < this.Controls.Count; i++){
// vamos testar se o controle é do tipo CheckBox
if(this.Controls[i] is System.Windows.Forms.CheckBox){
// é do tipo CheckBox. Vamos marcar
(this.Controls[i] as CheckBox).Checked = true;
}
}
}
Se quiser desmarcar todas as CheckBoxes, troque a linha: (this.Controls[i] as CheckBox).Checked = true; por (this.Controls[i] as CheckBox).Checked = false; |
Você também poderá gostar das dicas e truques de programação abaixo |
|
JavaScript - Como usar objetos Set em seus códigos JavaScript C++ Builder - Como habilitar ou desabilitar um TEdit usando a função EnableWindow() da API do Windows usando C++ Builder |
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 |
