Arquivo de outubro, 2014

JSP – JavaBean Components – Java

Publicado: 31 de outubro de 2014 em Java

Um JavaBean também conhecido como Bean é uma especificação que define um conjunto de convenções de programação para classes Java que são usadas como componentes conectáveis​​. Os Beans geralmente representam classes como Produtos, Fornecedores, Pessoas entre outras e podem ser utilizados em paginas JSP puras ou juntamente com os Servlets. É importante não confundir os JavaBeans com os Enterprise JavaBeans, ambos são amplamente utilizados em aplicações web escritas em Java, e veremos muito mais sobre eles nos próximos posts da categoria Java.

Um JavaBean pode encapsular todas as informações sobre o item que ele representa em um pacote simples. Suponha que você tenha um Bean contendo informações sobre um funcionário, como o nome do funcionário, data de admissão, e-mail, endereço e etc. Você pode passar este Bean para outros componentes, fornecendo todas as informações sobre o funcionário de uma única vez. Você também pode adicionar mais informações sobre o funcionário, basta criar mais propriedades no JavaBean. Um outro benefício da utilização de um Bean é poder encapsular todas as regras sobre suas propriedades.

JavaBean

JavaBean

Para usar um Javabean em uma página, você deve informar ao contêiner JSP o tipo de Bean e associá-lo com um nome e uma classe, em outras palavras, você deve declarar o Bean. Você pode fazer isto utilizando as tags JSP:

<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" />

Após ter declarado o JavaBean você pode utilizar suas propriedades para retornar ou adicionar o valor correspondente a uma propriedade, para retornar um valor você pode utilizar a instrução getProperty, adicionando aos atributos o identificador do seu Bean e a propriedade que deseja retornar:

<jsp:getProperty name="meubean" property="arquivos" />

Exemplo:

Neste exemplo utilizamos o JavaBean criando uma classe Java bem comum que serve para inicializar uma lista de imagens em uma pagina JSP.

Obs: O projeto criado no Eclipse na imagem acima utiliza o tipo Apache Maven com um arquétipo webapp e o Apache Tomcat, apesar de você poder utilizar um projeto web dinâmico padrão do Java EE, o ideal é manter esta configuração pois é a configuração utilizada em projetos profissionais, você encontra informações de como instalar, configurar e utilizar o Apache Maven e o Tomcat ou qualquer outra ferramenta utilizada neste site na categoria Java.

Java

package org.desenvolvimento.aberto;

import java.util.*;

public class MeuBean {

	// declara propriedades
	private static int indice = -1;
	private List<String> arquivos;

	// Construtor da classe
	// Por convenção um Java Bean não possui
	// parâmentros no construtor
	public MeuBean() {
		listaInicial();
	}

	// Método Getter
	public String getArquivos() {

		indice++;

		if (indice > arquivos.size() - 1)
		{
			indice = 0;
		}

		return (String) arquivos.get(indice);
	}

	// Metodo inicializado no construtor da classe
	private void listaInicial()
	{
		arquivos = new ArrayList<String>();
		arquivos.add("imagem-verde.jpg");
	}
}

JSP

<html>
<head>
<title>Desenvolvimento Aberto</title>
</head>
<body>
	<h1>JavaBean e Páginas JSP</h1>

	<jsp:useBean id="meubean" class="org.desenvolvimento.aberto.MeuBean" />

	<img src="<jsp:getProperty name="meubean" property="arquivos" />">		

</body>
</html>

 

O Brackets é um projeto de código aberto, inicialmente criado pela Adobe, agora mantido por uma comunidade de desenvolvedores ativa e crescente. O Brackets se encontra sob a licença MIT, e é atualmente mantido no GitHub, seu download está disponível para as plataformas para Mac, Windows e Linux.

O Brackets é um novo editor de código para HTML, CSS e JavaScript construídos com HTML, CSS e JavaScript. O Brackets possui vários recursos inovadores entre eles ​​atualizações HTML e CSS em tempo real (sem recarregar o navegador) e também possui realce de elementos selecionados em arquivos HTML e CSS que são destacados dentro do navegador, mas para estes recursos o Brackets requer trabalho em conjunto com Google Chrome. O Brackets também completa automaticamente código JQuery.

Projeto Brackets: http://brackets.io/

Outros Projetos Adobe OpenSource: http://html.adobe.com/opensource/

Instalando o Google Chrome no Ubuntu

Para instalar o Google Chrome no Ubuntu precisamos instalar alguns pacotes adicionais que podem ser encontrados no site de pacotes do Ubuntu.

1 – Primeiro baixe o Google Chrome: http://www.google.com.br/chrome/browser/

Google Chrome Downloads

Google Chrome Downloads

2 – Escolha a versão adequada a seu computador e aceite a licença:

Licença

Licença

3 – Baixe o pacote LibIndicator7: http://packages.ubunu.com/trusty/libs/libindicator7

libindicator7

libindicator7

4 – Baixe o pacote Libappindicator1: http://packages.ubuntu.com/trusty/libappindicator1

Libindicatator1

Libindicatator1

5 – Instale os três pacotes com a extensão Debian e instale o Brackets utilizando um PPA para o Ubuntu:

sudo dpkg -i libindicator7_12.10.2+14.04.20140402-0ubuntu1_amd64.deb
sudo dpkg -i libappindicator1_12.10.1+13.10.20130920-0ubuntu2_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb

sudo add-apt-repository ppa:webupd8team/brackets
sudo apt-get update
sudo apt-get install brackets
Terminal

Terminal

6 – Você pode abrir o Google Chrome caso deseje testar a instalação:

Google Chrome

Google Chrome

7 – Abra o Brackets e utilize o código abaixo:

Brackets Editor

Brackets Editor

8 – Clique no ícone do raio localizado no canto superior direito do editor, chamado Live Preview para verificar o resultado do código:

Live Preview

Live Preview

Exemplo:

Verifique que o Brackets possui um ótimo editor cheio de recursos para desenvolvimento web, note que entre os recursos o Brackets auto completa seu código JQuery. Para saber como utilizar o Brackets clique no link a seguir:

Usando o Brackets: https://github.com/adobe/brackets/wiki/How-to-Use-Brackets

JQuery

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8" />
        <title>Desenvolvimento Aberto</title>

        <!-- Está é uma instalação do JQuery, você apenas precisa apontar
             para o respectivo script da versão que você deseja utilizar -->

       <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

       <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
            Todo o script roda no evento equivalent ao OnLoad da pagina html-->    

       <script>
       $( document ).ready(function() {

        // Seletores - seleciona todos os elementos
        // $(*).css("color", "blue");  

       // Seleciona por elemento
           $("body").css("background-color", "#FFFFFF");

        // Seleciona por ID
           $("#header").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("padding", "5px")
                       .css("text-align","center");                  

           $("#section").css("width", "740px")
                        .css("float","left")
                        .css("padding","15px");

           $("#footer").css("background-color", "#36648B")
                       .css("color", "white")
                       .css("clear", "both")
                       .css("text-align", "center")
                       .css("padding","5px");

           // Seleciona por Classe
           $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                      .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                      .css("box-shadow", "5px 5px 5px 5px #777777")
                      .css("padding", "20px");

           $(".imagem").css("padding", "5px")
                       .css("border", "10px");

           $("a").css("color", "#000000");

           $("p").slideUp(100).slideDown(3000);      

        $( "a" ).click(function( event ) {
            alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
        });
        });       

       </script>
    </head>

    <body>
    <div id="header">
    <h1>Desenvolvimento Aberto</h1>
    </div>

    <div id="section">

      <p class="caixa">

        <img src="Imagem/imagem01.jpg" width="350" height="300" alt="minha imagem" align="left" class="imagem"/>

        Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
        desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
        com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />  <br />
        Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
        pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
        sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
        e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
        requisitadas pelas empresas no mercado atual.       

        </p>
        <a href="#">Clique aqui!!!</a>
            </div>

    <div id="footer">
    Desenvolvimento Aberto © desevolvimento.aberto@live.com
    </div>

    </body>
    </html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de formulários no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/form-selectors/

Seletores de Formulários

Seletores de Formulários

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "350px")
                    .css("float","left")
                    .css("padding","15px");

       $("#legenda").css("width", "500px")
                    .css("float","right")
                    .css("padding","5px");       

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "10px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")

   	 $("a").css("color", "#000000");

       // ******************************
       // ** Seletores de Formulários **
       // ******************************	 

       $(":text").css("background-color","yellow");
       $(":password").css("background-color","limegreen");
       $(":radio").parent().css("background-color","aqua");
       $(":submit").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <fieldset class="caixa">
        <legend>Desenvolvimento Aberto - JQuery</legend>
        <p>
          Nome: <br>
          <input type="text" name="nome">
        </p>
        <p>
          E-mail: <br>
          <input type="text" name="email" size="35">
        </p>

        <p>
          senha: <br>
          <input type="password" name="pwd">
        </p>
        <p>
          <input type="radio" name="usuario" value="registrado">Registrado <br>
          <input type="radio" name="usuario" value="naoregistrado">Não Registrado
        </p>
        <p>
          <hr>
          <input type="submit" name="enviar" size="35">
        </p>
    </fieldset>

	</div>

	<div id="legenda">
   <p>
        <span style="background-color:yellow;font-weight:bold">Formulário</span> seleciona elemento de texto.
   </p>
   <p>
        <span style="background-color:limegreen;font-weight:bold">Formulário</span> seleciona elemento de senha.
   </p>
   <p>
        <span style="background-color:aqua;font-weight:bold">Formulário</span> seleciona elemento de radio.
   </p>
   <p>
        <span style="background-color:fuchsia;font-weight:bold">Formulário</span> seleciona elemento de botão.
   </p>
   </div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mais sobre os seletores de atributos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/attribute-selectors/

JQuery - Seletores de Atributos

JQuery – Seletores de Atributos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "400px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear","both")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ***********************************
       // ** Seletores de Filtro Atributos **
       // ***********************************	 

       // Atributo nome
       $("td[colspan]").css("background-color", "yellow");

       // Atributo valor
       $("td[colspan=3]").css("background-color", "limegreen");

       // Atributo por partes do conteudo
       $("td[title*=Achar]").css("background-color", "aqua");

       // Atributo por partes finais do conteudo
       $("td[title$=final]").css("background-color", "fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td title="Achar um valor no conteudo do atributo">C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td title="Procure minha palavra final">JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Atributo</span> busca um atributo da tag.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Atributo</span> busca um atributo da tag por valor.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Atributo</span> busca um atributo da tag por partes do valor.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Atributo</span> busca um atributo da tag pelo valor final.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores de filtro de conteúdo são divididos em quatro tipos, eles são:

  • $(elemento:contains) – Seleciona todos os elementos que contem um texto especifico.
  • $(elemento:empty) – Seleciona todos os elementos vazios.
  • $(elemento:has()) – Seleciona todos elementos que coincidem com os elementos especificados.
  • $(elemento:parent) – Seleciona todos os elementos que possuem pelo menos um parente.
JQuery - Filtro de Conteúdo

JQuery – Filtro de Conteúdo

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem tags que são os elementos especificados para se utilizar a seleção por filtro de conteúdo.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>
	
	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->
	     
   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>
           
   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     
           
   <script>    
   $( document ).ready(function() {
                                  
    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 
   	 
       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");
       
       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");
   	             
       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");
       
       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                
         	 
   	 $("a").css("color", "#000000");
   	 
   	 // *********************************
       // ** Seletores de Filtro Conteúdo **
       // *********************************	 
       
       // Filtro contem
       $("td:contains(Abap)").css("background-color", "yellow");
       
       // Filtro vazio
       $("td:empty").css("background-color", "limegreen");
       
        // Filtro contem um elemento
       $("td:has(span)").css("background-color", "aqua");
       
       // Filtro elemento parente
       $( "th:parent" ).css("background-color", "fuchsia")
                       .fadeTo( 2500, 0.3 );
       
	});       

   </script>
</head>
 
<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>
 
<div id="section">
    
    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td></td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td></td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>
		  
   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> busca um conteúdo. 
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> conteúdos vazios. 
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> contem a tag (span). 
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> contem pelo menos um parente.
   </p>	
   
<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body> 
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Você pode saber mias sobre os seletores de filtros básicos no seguinte link:

Basic Filter: http://api.jquery.com/category/selectors/basic-filter-selectors/ 

JQuery - Filtros Básicos

JQuery – Filtros Básicos

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "900px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // *********************************
       // ** Seletores de Filtro Básicos **
       // *********************************	 

       // Filtro: primeiro e ultimo
       $("table span:first").css("background-color","yellow");
       $("table span:last").css("background-color","yellow");

       // Filtro: valores impares= odd / pares= even
       $("table td:odd").css("background-color","limegreen");

       // Filtro valores exato
       $("table td:eq(6)").css("background-color","aqua");

       // Filtro comparação
       $("table td:gt(9)").css("background-color","fuchsia");
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th>19:00</th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2"><span>Java</span></td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" >Abap</td>
				<td><span>NetWeaver</span></td>
			</tr>
		</table>
		  </div>

   <p>
     <span style="background-color:yellow;font-weight:bold">Filtro</span> primeiro e ultimo (tag: span).
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Filtro</span> valores impares.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> valores exatos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> valores maior que.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores hierárquicos são divididos em quatro tipos, eles são:

  • $(parente>filho) – Seleciona todos os filhos do parente especificado.
  • $(antecessor descendente) – Seleciona todos os antecessores de um determinado descendente.
  • $(prévio + próximo) – Seleciona todos os próximos elementos adjacentes.
  • $(prévio ~ irmãos) – Seleciona todos os elementos irmãos do elemento prévio.
JQuery - Seletor de Hierárquia

JQuery – Seletor de Hierárquia

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Preste atenção ao código HTML que contem elementos com identificadores que são os elementos prévios para se utilizar a seleção por hierarquia.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seleciona por ID
   	 $("#header").css("background-color", "#000000")
   	             .css("color", "white")
   	             .css("padding", "5px")
   	             .css("text-align","center");               	 

       $("#section").css("width", "850px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("text-align", "center")
   	             .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       // Seleciona por elementos
       $("td, th").css("border","none")
                  .css("background-color","#dddddd")
                  .css("padding","5px")
                  .css("width","100px")                

   	 $("a").css("color", "#000000");

   	 // ****************************
       // ** Seletores hierarquicos **
       // ****************************	 

       // Seleciona por elemento descendente
       $("table span").css("background-color","yellow");

       // Seleciona filhos
       $("tr > th").css("background-color","limegreen");

       // Seleciona irmãos (siblings)
       $("#irmao ~ td").css("background-color","aqua");

       // Seleciona adjacente
       $("#adjacente + td").css("background-color","fuchsia");

	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

    <table class="caixa">
			<tr>
				<th></th>
				<th>10:00</th>
				<th>14:00</th>
				<th>16:00</th>
				<th><span> 19:00</span></th>
			</tr>
			<tr>
				<th>Segunda</th>
				<td colspan="2" id="irmao">Java</td>
				<td>C++</td>
				<td>C#</td>
			</tr>
			<tr>
				<th>Terça</th>
				<td colspan="3">Ruby</td>
				<td>Rails</td>
			</tr>
			<tr>
				<th>Quarta</th>
				<td colspan="2">Javascript</td>
				<td>CSS</td>
				<td>JQuery</td>
			</tr>
			<tr>
				<th>Quinta</th>
				<td colspan="3">Python</td>
				<td>Linux</td>
			</tr>
			<tr>
				<th>Sexta</th>
				<td colspan="3" id="adjacente">Abap</td>
				<td>NetWeaver</td>
			</tr>
		</table>
               </div>
   <p>
     <span style="background-color:yellow;font-weight:bold">Seletor</span> de descendente.
   </p>
   <p>
     <span style="background-color:limegreen;font-weight:bold">Seletor</span> de filhos.
   </p>
   <p>
     <span style="background-color:aqua;font-weight:bold">Seletor</span> de irmãos.
   </p>
   <p>
     <span style="background-color:fuchsia;font-weight:bold">Seletor</span> de adjacente.
   </p>	

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O JQuery emprestou do CSS o conceito de seletores para tornar fácil manipular qualquer elemento em uma pagina da web. Os seletores permitem acesso direto aos elementos de uma pagina utilizando varias técnicas diferentes, como seleção por atributos, seletores básicos, por filhos, utilizando filtros, forms, hierarquia, visibilidade e outros.

Os seletores básicos são divididos em quatro tipos, eles são:

  • $(*) – Seleciona todos os elementos.
  • $(.class) – Seleciona uma classe.
  • $(elemento) – Seleciona o elemento especificado.
  • $(#Id) – Seleciona o elemento pelo seu ID.
JQuery - Selectors

JQuery – Selectors

Exemplo:

Neste exemplo utilizamos tipos de seletores para selecionar e modificar os elementos CSS da pagina web. Para testar o exemplo utilize uma imagem qualquer com o tamanho de 350×300.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

    // Seletores - seleciona todos os elementos
    // $(*).css("color", "blue");  

   // Seleciona por elemento
       $("body").css("background-color", "#FFFFFF");

    // Seleciona por ID
       $("#header").css("background-color", "#000000")
                   .css("color", "white")
                   .css("padding", "5px")
                   .css("text-align","center");               	 

       $("#section").css("width", "850px")
                    .css("float","left")
                    .css("padding","15px");

       $("#footer").css("background-color", "#000000")
                   .css("color", "white")
                   .css("clear", "both")
                   .css("text-align", "center")
                   .css("padding","5px");

       // Seleciona por Classe
       $(".caixa").css("-moz-box-shadow", "5px 5px 5px 5px #777777")
                  .css("-webkit-box-shadow", "5px 5px 5px 5px #777777")
                  .css("box-shadow", "5px 5px 5px 5px #777777")
                  .css("padding", "8px");

       $("a").css("color", "#000000");

       $("p").slideUp(100).slideDown(3000);   	 

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="section">

  <p class="caixa">

    <img src="Imagem/imagen01.jpg" width="350" height="300" alt="minha imagem" align="left" />

   	Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.		 

	</p>
	<a href="#">Clique aqui!!!</a>
		</div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

Websites – Chaining – JQuery – Linux

Publicado: 23 de outubro de 2014 em JavaScript, JQuery

Chaining é um conceito do JQuery que significa encadeamento e nos permite executar vários métodos jQuery continuadamente. Se você chamar um método em uma seleção e o método retornar um objeto jQuery, você pode continuar a chamar métodos jQuery no objeto sem parar até que você finalize o método o encerrando com um caractere ponto e vírgula.

Ao contrario do exemplo anterior que utilizamos o mesmo método e o chamamos varias vezes utilizando inúmeras linhas de instruções JQuery para o mesmo elemento, agora chamamos o objeto uma única vez e o repetimos até que nossa condição seja satisfeita utilizamos uma única linha para cada elemento.

JQuery - Chaning - Animado

JQuery – Chaning – Animado

Exemplo:

Neste exemplo utilizamos o conceito de encadeamento para repetir instruções JQuery para criar o CSS e uma animação para a pagina do website.

JQuery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     o para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalent ao OnLoad da pagina html-->     

   <script>
   $( document ).ready(function() {

       $("body").css("background-color", "#FFFFFF");

       $("#header").css("background-color", "#000000").css("color", "white")
   	          .css("padding", "5px").css("text-align","center");

       $("#nav").css("background-color", "#9C9C9C").css("color", "#696969").css("height", "370px")
   	       .css("width", "100px").css("float","left").css("padding","5px");   	             

       $("#section").css("width", "550px").css("float","left").css("padding","15px");

       $("#footer").css("background-color", "#000000").css("color", "white").css("clear", "both")
   	          .css("text-align", "center").css("padding","5px");

       $("a").css("color", "#6C7B8B");

       $("p").slideUp(100).slideDown(3000);   	 

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
<div id="header">
<h1>Desenvolvimento Aberto</h1>
</div>

<div id="nav">
HTML<br>
CSS<br>
Javascript<br>
JQuery<br>

</div>

<div id="section">
	<p>Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.
	</p>
	<a href="#">Clique aqui!!!</a> 

	</div>

<div id="footer">
Desenvolvimento Aberto © desevolvimento.aberto@live.com
</div>

</body>
</html>

O jQuery é uma biblioteca livre de código aberto e que possui uma licença dual, fazendo uso da Licença MIT ou da GNU. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plug-ins. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade.

JQuery: http://jquery.com/

Sendo uma biblioteca JavaScript rápida, pequena e rica em recursos. O JQuery mudou a maneira que milhões de pessoas passaram a escrever JavaScript. Grandes empresas como a IBM, Mozilla, Adobe entre outras se tornaram-se parceiras do JQuery e prestam suporte tornando possível a Fundação JQuery. Fundada com parcerias da IBM e WordPress, está parceria visa melhorar a web aberta, tornando-a acessível a todos, através do desenvolvimento e suporte de software de fonte aberto, e colaboração com a comunidade de desenvolvimento.

JQuery Fundation: https://jquery.org/

Instalando o JQuery

O JQuery é um arquivo de tamanho muito pequeno e simples de instalar, você pode utiliza-lo localmente baixando o arquivo no seu computador e fazendo referencia ao script jquery.js ou pode utiliza-lo diretamente da web.

Hello World - JQuery

Hello World – JQuery

Sintaxe JQuery

A sintaxe do JQuery possui basicamente a proposta de selecionar elementos e executar ações sobre eles. O sinal $ (dólar) define o acesso ao JQuery e suas funções e assim manipular os elementos através de eventos.

Ready

O Ready é um evento do JQuery que ao contrario do JavaScript que utiliza o evento LOAD quando a página é processada e o LOAD não é acionado até que todos os ativos, como as imagens tenham sido completamente carregadas. O READY pode ser executado logo que a hierarquia de DOM possa ser totalmente construída, de modo que este geralmente é o melhor lugar para anexar todos os outros manipuladores de eventos e executar outro código jQuery

Exemplo:

Neste exemplo básico acessamos o JQuery através da web e o utilizamos para manipular um evento de clique sobre um link e o CSS da pagina HTML.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta charset="utf-8" />
	<title>Desenvolvimento Aberto</title>

	<!-- Está é uma instalação do JQuery, você apenas precisa apontar
	     o para o respectivo script da versão que você deseja utilizar -->

   <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"> </script>

   <!-- Este é um script JQuery básico que manipula o CSS e um evento de clique.
        Todo o script roda no evento equivalente ao Load da pagina html-->     

   <script>
   $( document ).ready(function() {

          $("body").css("background-color", "#363636");
          $("body").css("color", "#ffffff");
          $("h1").css("background-color", "#483D8B");
          $("h1").css("padding", "20px");
          $("h2").css("background-color", "#4682B4");
          $("h2").css("padding", "20px");
          $("p").css("background-color", "#ffffff");
          $("p").css("color", "#64645A");
          $("p").css("padding", "20px");
          $("a").css("color", "#E066FF");

    $( "a" ).click(function( event ) {
        alert( "Desenvolvimento Aberto.\nObrigado por visitar!" );
    });
	});       

   </script>
</head>

<body>
	<h1> Desenvolvimento Aberto</h1>
	<h2>Aprenda JQuery --> Hello World!</h2>
	<p>Desenvolvimento Aberto é uma organização voltada para o aprendizado e discussão de técnicas de
	   desenvolvimento focado em algumas linguagens de programação sendo parcialmente/totalmente abertas ou
	   com licenças gratuitas para desenvolvedores de cada uma de suas respectivas marcas registradas.<br />	<br />
		Desenvolvimento Aberto foi escrito e desenvolve utilizando ferramentas gratuitas disponibilizadas
		pelas melhores empresas de software da atualidade, incluindo a própria hospedagem e design deste site,
		sendo assim, também proporciona conteúdo gratuito, isso quer dizer que você não paga nada para aprender
		e utilizar as tecnologias de ponta que podem ser manuseadas através das linguagens de programação mais
		 requisitadas pelas empresas no mercado atual.
	</p>
	<a href="#">Clique aqui!!!</a>
</body>
</html>