HomeDesenvolvimentoInício rápido: HTML, CSS & JS Pt.2

Início rápido: HTML, CSS & JS Pt.2

Desenvolvimento

Papa Neto | 04/out/2017


JavaSript e Jquery

Bom dia, caros!

Recarreguem suas xícaras de café, troquem as pilhas do teclado e liguem o segundo monitor HDMI.

Sejam bem-vindos ao Início rápido: HTML, CSS & JS parte 2!

Aqui estão os arquivos do artigo anterior que usarei nesta aula:
index.html (CTRL + U para visualizar o código. Copie, crie o arquivo, cole e salve. )
style.css

Sobre o JavaScript

“JavaScript® (às vezes abreviado para JS) é uma linguagem leve, interpretada e baseada em objetos com funções de primeira classe, mais conhecida como a linguagem de script para páginas Web. Porém, também usada em vários outros ambientes sem browser como node.js ou  Apache CouchDB. É uma linguagem de script multi-paradigma,  baseada em protótipo que é dinâmica, e suporta estilos de programação orientados a objetos, imperativo e funcional. Saiba mais sobre JavaScript.”
– andregarzia

Não entendeu nada? Tudo bem! O que você precisa saber é que usaremos o JavaScript para deixar nossa página inteligente, ou seja, os usuários terão a possibilidade de interagir de uma forma mais elaborada. Assim como o CSS, temos mais de uma forma de inserir scripts em nossa página.
Comece abrindo uma tag <script> </script>, logo após o </body> no seu arquivo .htmle, em seguida, vamos fazer um teste.

Abra seu arquivo html no browser e deverá aparecer uma caixa de dialogo com o texto “tá funcionando”. alert() é apenas uma das milhares de  funções JavaScript.

Também poderíamos usar uma variável em vez inserir diretamente o texto. Usaremos uma função um pouco mais discreta para exemplificar, apague o alert e coloque dessa forma:

Atualize a página e ela deverá carregar normalmente dessa vez. Para visualizar a mensagem abra o console (aperte F12 ou clique com o botão direito do mouse e vá em inspecionar elemento,  em seguida clique na aba console). A mensagem deverá estar lá. Acostume-se com essa rotina, pois aqui é onde executamos nossos testes e podemos ver erros do script.

AQUI você pode estar treinando seu JavaScript e se aprofundando ainda mais. Como falei antes, iremos usar o JQuery ao invés do JS puro, pois facilita bastante e economizamos escrita.

Iniciando com JQuery

Para usarmos o JQuery devemos importá-lo em nosso arquivo. Como? Insira a seguinte linha antes da abertura da tag <script>:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

Seu arquivo .html deverá estar assim:

Estamos importando diretamente das bibliotecas do próprio Google. Está disponível neste link: www.developers.google.com/speed/libraries/

Para começar, vamos fazer o seguinte: ao clicar no button verde, aparecerá uma mensagem qualquer no console. Apague o exemplo que tem dentro da tag <script> e prossiga desse jeito:

Perceba que para selecionar o elemento utilizamos uma sintaxe parecida com o CSS (.classe-do-elemento) dentro de $(” “). Para selecionar através do ID não muda muita coisa $(“#id-do-elemento”).

Não pense que após importar o Jquery você não poderá mais utilizar comandos JS puro. Temos liberdade para mesclar as duas linguagens.

Salve as alterações, atualize a página no browser, abra o console e clique no botão verde. Deverá aparecer a mensagem que escolhemos. Se você clicar várias vezes, o console indica a quantidade de cliques dentro de um círculo do lado da mensagem.

exemplo jquery

Console mostrando quantas vezes a mensagem foi exibida

Manipulando CSS com JQuery

Chega de enrolação! Vamos fazer algo que realmente altere o visual da página.

Salve, atualize, teste. O botão deverá aumentar a cada clique. Se você clicar sobre o botão com o lado direito do mouse e inspecioná-lo, perceberá que o CSS está sendo inserido INLINE no button.

exemplo jquery 2

Na esquerda temos uma visualização do HTML atual e do lado direito todos os atributos CSS que se referem a ele (inline ou através de classes…)

Fique à vontade para alterar o html diretamente nessa tela, porém as modificações não serão salvas e desaparecerão quando a página for atualizada.

Inserindo HTML via JQuery

Além de alterarmos o CSS, também podemos inserir códigos HTML dentro do arquivo, ou seja, há a possibilidade e criarmos estruturas inteiras somente utilizando JS. Vamos ver como isso funciona? Vou criar uma <ul>, que representa uma lista, e adicionar uma <li>, que representa uma linha, toda vez que o mouse passar por cima de um dos botões.

Seu arquivo .html deve estar assim:

Ao passar o mouse por cima de qualquer um dos botões, uma linha será adicionada na lista que está inicialmente vazia. Confira no browser.

Exemplo Jquery 3

Organizando seu projeto

Como toque final, iremos organizar nossos documentos em arquivos diferentes. Crie um arquivo no mesmo diretório, com a extensão .js. Copie todo o conteúdo da tag <script> e cole nesse arquivo .js. Agora só falta importar o novo arquivo no nosso HTML, faremos isso do mesmo modo que importamos o JQuery, porém no lugar do link do Jquery do Google, navegaremos até o arquivo com o script recém-criado. Ao fim de tudo, seus arquivos deverão estar assim:

script.js

index.html

Não para por aí! As possibilidades são infinitas quando se trata de JavaScript. Aqui você aprendeu o básico e está apto para aprofundar-se nessas linguagens. Há também muitas ferramentas que ajudam no desenvolvimento de páginas WEB, como o Bootstrap , Sass, AngularJS e muitos outros que abordarei em posts futuros.

Papa Neto
Atuo na área de programação web (back-end & front-end), além disso me interesso em qualquer área da programação que envolva tecnologias inovadoras e contribuintes para o progresso da humanidade em tornar a vida cada vez mais acessível.