JQUERY Movimento e Animação Simples

Caros...
... nesta aula veremos como algumas funções podem colaborar com os movimentos e animações baseadas nas estruturas do CSS. Primeiramente veremos uma estrutura simples com HTML e CSS para a inclusão do JQUERY em uma imagem e um texto no corpo da página.

Primeiramente crie uma pasta e dentro dela, insira o código HTML feito no Editor de sua preferência, e a Imagem tbm de sua preferência. Algo como o exposto abaixo...




Agora vamos observar o documento HTML.
Veja o código...


agora vamos entender o código utilizado...

<html>
- aqui temos a tag que indica a criação do documento HTML

<head>
- aqui temos a tag que indica que o cabeçalho do documento inicia

<meta charset="utf-8">
- aqui temos a tag meta para indicar a formatação dos caracteres

<title>
- aqui temos a tag que indica o título do documento

<style>
- aqui temos a definição do objeto "#etec" dentro da estrutura CSS onde temos a definição da borda e da cor ( border: 2px solid black; ) e a largura (width: 400px;)

<body>
- aqui temos a tag que indica o inicio do corpo da página ( documento ).

<img>
- aqui temos a tag que indica o inserir de uma imagem, onde, devemos indicar o endereço onde a imagem está (src="etecsm_wallpaper.jpg") e sua identificação (id="etec" ).

<h1>
- aqui temos a tag que indica um título na página do documento com a identificação "texto". (<h1 id="texto">ETEC Sao Mateus</h1>)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
- aqui temos a tag para indicar o inserir da biblioteca de Javascript - jquery diretamente do site da google. Assim não precisamos baixar a biblioteca para utilizá-la.

<script>
 - aqui temos a tag com o cádigo javascript - jquery para dar movimento aos objetos do documento, veja as linhas abaixo para entender cada uma delas;  

$("#etec").hide();
- aqui inserimos o código para esconder o objeto etec ( que é a nossa imagem);
        
$("#texto").hide();
- aqui temos o código para esconder o objeto texto ( que estava no h1 no corpo da página do documento.
        
$("#etec").slideDown(1000, function() {   
$("#texto").fadeIn(3000);
  });
- aqui temos o código para fazer o objeto etec aparecer em slideDown com o tempo em aprox. 1000 milisegundos e também temos uma função que fará aparecer lentamente o objeto texto.

Simples né! Agora salve o código com extensão html e abra no navegador.

Um complemento que temos em Jquery é a "animate", que possibilita animações simples e sofisticadas. animate possui vários atributos e podem ser utilizados vários deles em um documento com javascript e CSS. Veja abaixo uma animação simples.


OK. salve o documento como html e abra no navegador.
O que o código faz e alterar propriedades CSS da página do documento. Neste caso altera a margem da figura em relação a página do documento e muda tambpem o tamanho da imagem.

O trabalho acabado fica parecido com isso:

ok.

Vamos entender que ANIMATE possui 4 parâmetros. Veja

Parâmetros do método animate()

Para invocar o método animate() temos que indicar uma série de parâmetros, embora só um deles será obrigatório. A listagem é a seguinte:

.animate( Propriedades, [ Duração], [ Função de animação ], [ Callback ] )


Propriedades: Este é o único parâmetro que deve ser indicado obrigatoriamente e é para indicar que atributos CSS queremos atualizar, com seus novos valores. Deve ser indicado em notação de objeto, de maneira similar a o método css() de jQuery e só permite a mudança de propriedades CSS que tenham valores numéricos. Por exemplo, poderíamos mudar a largura de uma borda, mas não o tipo de borda (se queremos que seja sólido, com linha de pontos, etc.) porque não tem valores numéricos. Geralmente, se não especificamos outra coisa os valores se entendem em pixels. Os novos valores podem ser indicados de maneira absoluta, ou inclusive de maneira relativa, com um string do tipo "+=50", que indica que esse atributo deve ser aumentado em 50. 

Duração: Serve para indicar a duração da animação, em um valor numérico em milissegundos, ou em um valor de cadeia de caracteres como "fast" ou "slow".

Função de animação: Esta função serve para indicar como se realizará a animação, se mais suave no principio e rápida no final, ou igual de rápida todo o tempo. Ou seja, a velocidade com a que se realizará a mudança de valores em diferentes pontos de dentro da animação. Em princípio, os dois possíveis valores são "swing" (por padrão) e "linear".

Callback: Oferece a possibilidade de indicar uma função a ser executada quando o efeito terminou totalmente de se produzir. Ou seja, uma função que é invocada quando se chegou ao valor final dos atributos CSS que se solicitaram mudar.


Lembrando que apenas uma é obrigatória - a propriedade que utilizamos de CSS. as demais são complementos para colaborar na animação.

é isso!
Pronto! Pronto!

CSharp - Looping While

Nesta oportunidade veremos como o CSharp trabalha Loopings. Para isso vamos lembrar como a sintaxe dos principais loopings. Veja o primeiro na imagem abaixo;


Vemos na imagem acima o looping While (Enquanto) que é um looping Infinito baseado em estrutura condicional (decisão). E isso quer dizer que ele apenas repete a instrução se a condição for satisfeita. Observe o exemplo com o Looping While.

Exemplo Loop. Criar um programa que leia um termo e realize a sequencia de Fibonacci até o termo indicado pelo usuário.

Primeiramente devemos definir o formulário. e para isso observe os objetos necessários abaixo;


Na imagem, note que temos:

LABEL - 2
TEXTBOX - 1
LISTBOX - 1
BUTTON- 1

Sendo um label para pedir o valor dos termos, um label para informar a saída, um botão para causar a ação do formulário, um textbox para entrada do valor digitado pelo usuário e um listbox para apresentar os termos até o desejado.
Veja o código do botão:

Observe que apenas variáveis locais foram utilizadas nesse exemplo, note ainda que o objeto ListBox1 recebe o recurso de limpar os dados com o comando Clear ( ); logo no inicio, podendo assim fazer com que o programa seja executado mais de uma vez e os valores não encavalem na lista. 

Para o comando while, veja a variável "contador" sendo inicializada quando criada e do tipo inteiro   ( o contador sempre deve ser inteiro ) e sofre incremento (  soma ) até alcançar o valor do termo digitado pelo usuário (esta é a condição para que o trecho seja repetido ou não, se o usuário digitar um valor como 5, o contador é iniciado em 1, desta forma o contador será 2, depois 3, depois 4, depois 5 e depois 6, somente neste ponto (contador = 6) o programa não repete mais o trecho, já que a condição era contador menor ou igual a termo (que era 5)).
Veja o resultado do programa:



Note que o termo é 8 e que oito termos foram impressos na lista...

Agora vejamos outro tipo de vetor, o finito FOR.
... que será exibido juntamente com a próxima aula a aula de VETORES.

JQUERY Introdução

O que sabemos ?

Primeiramente, precisamos entender o básico de HTML e CSS para iniciar a aventura em JQUERY. para o básico atente às aulas do Professor J. Roberto Lima e aos conteúdos aqui:



O que é jQuery?
O jQuery é uma biblioteca JavaScript disponibilizada como Software Livre, o que quer dizer que todas as funções encontradas podem ser utilizadas de acordo com a vontade do desenvolvedor. Com o jQuery, é possível implementar animações, efeitos, manipulação de eventos JavaScript, percorrer documentos HTML, adicionar CSS, Texto, validar formulários, interagir com Ajax, enfim, é possível fazer tudo isso e muito mais sem ter que atualizar a página. Isso faz com que seu website fique totalmente dinâmico, moderno, leve e elegante.
"Escreva Menos... Faça Mais!"
Foi desenvolvido, inicialmente, por John Resig que é um profundo conhecedor da linguagem JavaScript e queria fazer com que o modo de escrever códigos para adicionar pequenos efeitos em páginas fosse mais simples para o desenvolvedor de web.

Adquirindo o jQuery

Podemos utilizar o JQuery chamando as funções na própria página do desenvolvedor (CDN) ou instalar a biblioteca no seu próprio servidor. 
Segue o endereço para a chamada da biblioteca no servidor do desenvolvedor ( Google ):
  • https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
Segue o link para download da biblioteca para o SEU servidor:
Na página do desenvolvedor, dê um download na última versão.
Tudo o que for descrito aqui neste blog poderá ser acompanhado por você utilizando o bloco de notas do seu Windows, ou notepad++ ou outro de seu interessese.
OBS.:: Quando for salvar seus arquivos, utilize a seguinte sintaxe: Nome Do seu Arquivo + .html, ex: teste_1.html.
Qualquer arquivo .html, poderá ser aberto em um navegador de internet para que você faça a visualização do código no modo em que ele irá aparecer na sua página da internet.
Para fazer edição nesse arquivo, é necessário clicar com o botão direito do mouse sobre ele, selecionar a opção “Abrir com” e escolher o bloco de notas (ou qualquer outro editor de textos voltado para programação instalado em seu computador).
Para que você entenda melhor, criei uma pequena página HTML, segue o código:
Acima vemos a estrutura mais simples de HTML.
Como o documento acima é o mais básico, ele ainda não reconhece caracteres como “ç” e acentuação, pois ainda não configuramos o charset. É imprescindível a utilização de uma META descrevendo o que este documento contém (charset), então coloque essa meta logo abaixo da tag <head>, como mostra o código abaixo:
Para a instalação correta do jQuery, é necessário que você saiba o local onde ele foi salvo.
Em nosso exemplo, vamos salvar o arquivo dentro de uma pasta chamada js na pasta raiz do nosso site.
Na linguagem de programação Web, e várias outras linguagens de programação, raiz é o mesmo que a pasta inicial do seu programa.
Por exemplo, se o arquivo está dentro da raiz do site, não é necessário escrever /nome_do_arquivo.extensao, basta escrever o nome do arquivo e a extensão sem a barra.
Como nosso arquivo do jQuery (nomeado de jquery.js) está na pasta js dentro da raiz do site, o caminho dele será js/jquery.js, o que quer dizer que ele está na pasta js, que está na raiz do site.
Nota: Crie uma pasta e jogue todos os arquivos dentro dela, essa será a raiz do nosso site.
Sabendo onde está nosso arquivo jquery.js, iniciamos a “instalação” dele do mesmo modo que linkamos qualquer arquivo .js em nosso website, iniciamos e terminamos com 

<script src=”js/jquery.js”> </script>.

Lendo este pequeno código e sabendo do que já foi dito, você já pode entender mais ou menos o que ele quer dizer: Abrimos a tag com <script em seguida terminamos indicando o caminho do arquivo jquery.js com src=”aulajs/jquery.js”. Toda e qualquer tag que se abre em HTML ou qualquer outra linguagem de programação, deve ser fechada; então fechamos o nosso script com </script>.
Nosso script de instalação do jQuery, deverá estar entre as tags <head> e </head>, veja o exemplo em nosso arquivo HTML:
Arquivo HTML com jQuery instalado:
<html>
<head>
<meta charset=UTF-8">
<script src="js/jquery.js"></script>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>

Estrutura do jQuery

Agora vamos ver as estruturas mais usadas para o jQuery (use a que achar melhor).
  • A forma mais completa (com a palavra jQuery)
  • que é menos utilizada, porém previne contra incompatibilidade com outras bibliotecas JavaScript;

  • A forma com o cifrão ($);
  • E a mais forma compacta (a que eu sempre utilizo).
Tudo se passa dentro de um ambiente JavaScript, portanto, todo e qualquer código jQuery deverá estar dentro das tags <script> e </script>, veja o exemplo:

A forma completa:
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script>
// INICIO DO JQUERY
   jQuery(document).ready(function(){
// AQUI VEM O CODIGO
}); // FIM DO JQUERY
</script>
<title>Aula 1 - Instalando jQuery</title>
</head>
<body>
</body>
</html>

Como você pode notar, escrevi onde começa a estrutura do jQuery, e onde ela termina. Esses scripts poderão ser colocados entre as tags <head> e </head> ou entre as tags <body> e </body>.
Por enquanto só vamos utilizar os códigos na head do documento, como mostra o exemplo anterior, portanto, não vamos mais mostrar todo o código html completo, tudo se passará no local onde foi adicionado o código mostrado no último exemplo.

Forma com apenas o cifrão

Também é possível escrever jQuery com o seguinte formato:
<script language="javascript" type="text/javascript">   $(document).ready(function(){   // AQUI VEM O CODIGO
 });</script>



Forma mais compacta

E por fim, a forma mais compacta para escrever trechos de código jQuery:

<script language="javascript" type="text/javascript">
 $(function(){ 
  // AQUI VEM O CODIGO
 });
</script>
A partir daqui, você já sabe que estamos falando de JavaScript e jQuery, portanto, agora mostraremos apenas o código jQuery em si, sem o <script> e </script>, mas você já sabe que deve colocar isso em documentos HTML, certo? Caso contrário não vai funcionar.

Escrevendo um texto no documento ( BODY ) com a função TEXT com jQuery

Para isso veja o script que está dentro da HEAD dentro do documento HTML:

$(document).ready(function(){$("body").text("Este é meu primeiro texto com jQuery");});

  • Primeiramente, escrevemos a estrutura do nosso jQuery;
  • Logo em seguida, escrevemos o código $(“body”).text(“Este é meu primeiro texto com jQuery”);. Isso quer dizer que: 1) $(“body”) –  estamos selecionando a tag body do nosso HTML; 2) .text(“Este é meu primeiro texto com jQuery”); – estamos pedindo ao jQuery que escreva “Este é meu primeiro texto com jQuery” dentro da tag selecionada (nesse caso a tag body).
Isso gera um pequeno problema para nós. Todo texto dentro da tag body (o documento inteiro) será substituído pelo texto que escrevemos agora, e nós não queremos um site de uma frase só, certo?
Bom, para isso é simples, basta selecionarmos um elemento apenas, e não todo o “body”. (mas calma que você ainda vai aprender isso, por enquanto vamos trabalhar na tag body como um todo).
ENTENDA que o documento desenvolvido ficaria assim:

<html lang="pt-BR">

<head>
<meta charset="UTF-8">


<script type="text/javascript" src="jq/jquery.js"></script> // chamada da biblioteca jquery

<script type="text/javascript">  // criação do script tipo javascript
    $(document).ready(function(){  // criação da função jquery dentro do documento HTML
    $("body").text("Este é meu primeiro texto com jQuery"); //  inserindo texto no body do HTML
    alert("E está tudo funcionando !"); }); 
//  inserindo alert no body do HTML
</script> // finalizando o script jquery
<title>Aula 1 :: jQuery</title>
</head>
<body>
<center> ERRO!!! // se você ver isso escrito no body é porque deu algo errado...
</body>
</html>

Observe que existe um script para a chamada da biblioteca jquery dentro do javascript e uma script para a inclusão de instruções e deve ser dessa forma sempre que quisermos inserir scripts no documento.
OK. O inicio de Jquery dentro do Javascritp está feito! agora vamos observar algumas funções que a biblioteca jquery possui, eu disse apenas algumas! veja.

FADE - função utilizada para remover ou exibir um objeto do documento com FADEIN para inserir e FADEOUT para remover.

DELAY - função de espera, utilizada para executar funções com um determinado tempo ou esperar um determinado tempo para que elas sejam executadas.

HIDE - função utilizada para esconder um objeto do documento

SHOW - função utilizada para mostrar um objeto do documento

Vamos observar uma página com as funções;



<html>
<head>
<meta charset="UTF-8">

<script type="text/javascript" src="jq/jquery.js"></script>

<script type="text/javascript">
   $(document).ready(function(){
   $("h1")
      .css("color","#ff7f50")
      .text("Javascript")
      .hide()
      .delay("1000")
      .fadeIn("slow")
      .click(function(){
// função click de mouse para jquery
            $("h1")
            .hide()
            .text("Funções Básicas Jquery")
            .css("color","#00008b")
            .delay("1000")
            .fadeIn("slow")
            });

      });
</script>

<title>jQuery :: Funções</title>

</head>

<body >
<center>
<h1> </h1>
</body>
</html>


Note que o JQuery nos permitiu trabalhar com a H1 do Body diretamente controlando até o click do mouse. Bom né?!?
É isso! 
Pronto! Pronto!