Precisa de um freelancer, códigos-fonte e exemplos completos?
Bem-vindo(a) ao meu site. Além de realizar alguns serviços como freelancer eu tenho alguns códigos-fonte e exemplos completos de Java, Delphi, PHP, Python, C/C++, Hibernate, JPA, Spring, JSP, Servlets, Ruby, Ruby On Rails e muitas outras linguagens e frameworks. Veja como falar comigo clicando aqui.
 
Arquivo de Códigos - Página Inicial
Códigos-fonte
» Códigos-fonte e exemplos completos
Linguagens
» ActionScript
» Adobe AIR
» Adobe Flex
» AJAX
» C
» C#
» C++
» CSS
» Delphi
» DHTML - Dynamic HTML
» HTML/XHTML
» Java
» JavaFX
» JavaScript
» Java Servlets
» JSP - Java Server Pages
» Perl
» PHP
» PHP-GTK
» Python
» Ruby
» Tcl/Tk
» VB.NET
Bancos de Dados
» IBM DB2
» MySQL
Frameworks
» CodeIgniter
» jQuery
» JSF - Java Server Faces
» Qt
» Ruby On Rails
» Struts
» Struts 2
» wxWidgets
» Zend Framework
Container/Servidor
» Apache Tomcat
» Apache Web Server
Ferramentas
» Apache Ant
» iTextSharp (iText#)
Referências
» CSS1 e CSS2
» JavaScript
Serviços On-Line
» Qual é meu IP?
» Tabela Cores HTML I
» Tabela Cores HTML II
» Lista de Mime Types
» Códigos Teclas Virtuais
Usuários On-Line
Visitantes: 125
PHP
O que há de novo no PHP 5?
40 dicas e truques sobre como trabalhar com datas e horas em PHP
60 dicas e truques sobre como trabalhar com strings e caracteres em PHP
PHP e a Orientação a Objetos - POO (Curso Completo)

DHTML
Curso completo de DHTML para iniciantes

CSS
Como definir uma imagem de fundo fixa na página
Definindo uma imagem de fundo para botões HTML
Você está aqui: Inicio -> JavaScript -> Curso Completo -> Construindo o programa Estados & Capitais
Parte 6 - Construindo o programa Estados & Capitais
Início do Curso - Construindo o programa Estados & Capitais

Se você me seguiu até este ponto e entendeu bem os conceitos que eu propus até o momento, está preparado para criar um programa em Javascript. Já posso ver os seus olhos brilhando. Um programa? É isso mesmo. Você pode usar as suas páginas web como se elas fossem uma plataforma de programação. Vamos ao nosso código:


O nosso programa deixa o usuário escolher um estado e assim poder visualizar em uma caixa de texto a capital correspondente. Como o nosso programa é apenas ilustrativo, eu não colocarei todos os estados e as capitais. Esta tarefa fica para você. Observe que usaremos a instrução switch neste código. Para ter uma idéia do que vamos fazer, dê uma olhada na figura seguinte:


Aqui está o código:

<html>
<head>
<title>Estados e Capitais</title>
</head>
<body>

<form name="form1">
  Por favor escolha um estado:<br>
  <select name="estados" onchange="ver_estado()">
    <option value="-1">Selecione um estado</option>
    <option value="Goiás">Goiás</option>
    <option value="Mato Grosso">Mato Grosso</option>
    <option value="Paraná">Paraná</option>
    <option value="São Paulo">São Paulo</option>
    <option value="Rio de Janeiro">Rio de Janeiro</option>
    <option value="Tocantins">Tocantins</option>
  </select><br>
  Esta é a capital deste estado:<br>
  <input type="text" name="capital">
</form>

<script type="text/javascript">
<!--
function ver_estado(){
  var estado = document.form1.estados.value;

  switch(estado){
    case 'Goiás':{
      document.form1.capital.value = 'Goiânia';
      break;
    }
    case 'Mato Grosso':{
      document.form1.capital.value = 'Cuiabá';
      break;
    }
    case 'Paraná':{
      document.form1.capital.value = 'Curitiba';
      break;
    }
    case 'São Paulo':{
      document.form1.capital.value = 'São Paulo';
      break;
    }
    case 'Rio de Janeiro':{
      document.form1.capital.value = 'Rio de Janeiro';
      break;
    }
    case 'Tocantins':{
      document.form1.capital.value = 'Palmas';
      break;
    }
    default:{
      document.form1.capital.value = '';
    }
  }
}
//-->
</script>

</body>
</html>


Execute o código e veja o resultado você mesmo. Aqui nós podemos ver perfeitamente como é fácil transformar as nossas páginas web em verdadeiros programas. Tudo que você tem a fazer é estudar e estudar.

Vamos ver alguns conceitos usados neste código:

Primeiro nós criamos um formulário com uma caixa de combinação (combo) e uma caixa de texto. Quando o usuário seleciona um estado na caixa de combinação, nós usamos o evento onchange desse componente para chamar a função e exibir na caixa de texto a capital correspondente. Eventos são muito importantes na programação em Javascript e serão vistos mais adiante. Se você já tem um conhecimento bom de HTML, conseguirá construir este programa sem ter que usar todo este código. O motivo pelo qual eu resolvi aplicar este método é que este tipo de programa é ótimo para exemplificar o uso da instrução switch.

Próxima -> Entendendo loops (laços) e a instrução for
 
 
Arquivo de Códigos - Página Inicial
Veja dicas, truques e anotações de Apache Maven
Veja dicas, truques e anotações de outras linguagens
Java - Criando e exibindo os valores de um array de duas dimensões
Java - Uso do método append para adicionar mais conteúdo ao final de um StringBuffer
JavaScript - Verificar a existência de um cookie
JSP (Java Server Pages) - Como listar todo o conteúdo de um diretório usando JSP
PHP - Como obter um array contendo todas as linhas de um arquivo
JSP (Java Server Pages) - Entendendo o atributo autoFlush da diretiva de página
PHP - Verificando se a extensão GD está disponível na sua instalação do PHP
C - Alocando memória dinâmica usando a função calloc()
PHP - Calcular a porcentagem de igualdade entre duas strings usando similar_text
PHP - Criando uma classe PHP e usando new para criar novas instâncias da mesma

       

http://www.arquivodecodigos.net
:: Arquivo de Códigos - Softwares e Consultoria em Programação ::
Todo o conteúdo deste site, quando não devidamente observado, pertence a seus idealizadores e não
poderá ser usado para outras finalidades senão estudo e aprimoramento de técnicas de programação.
Certifique-se de ler as notas legais antes de proceder com o acesso e leitura do
conteúdo disponibilizado nestas páginas.

Fale Conosco: (62) 3261-7018 / (62) 8185-0734

Desenvolvedor Responsável: Osmar J. Silva

Página Inicial Contatos Pesquisar Mapa do Site