O que é Javascript? Como usar na sua página?

O que é Javascript? Como usar na sua página?

O Javascript foi criado em em 1995 por um integrante da Netscape, que futuramente virou a Mozila Firefox.

Dentro do Javascript, temos objetos, arrays, variáveis, funções, eventos, animações, manipulação de html/css e entre outras muitas coisas possíveis de serem feitas, só usando essa linguagem.

Para falarmos de Javascript é necessário entender o que é uma Linguagem de programação, então de forma resumida, é uma tecnologia que permite criar programas, mecanismos com funcionalidades diferentes.

Client Side e Server Side

No caso do Javascript, ele se dividi em lado do cliente (client-side) e lado do servidor (server-side), mas o importante para nós é entender a linguagem do lado do cliente. Então, javascript é uma linguagem web que permite dar dinamismo para sua página, funcionando em conformidade com o HTML e o CSS, permitindo a manipulação dos mesmos, ou criando outras funcionalidades próprias a partir da própria linguagem.

Dinamismo

Mas, o que quer dizer dar dinamismo para uma página? Bem, se pensarmos na aplicação HTML e CSS, vamos perceber que a página não tem muita “ação”, claro você consegue criar animações com CSS, mas ainda sim são poucas coisas. Por esse motivo existe o javascript, ele permite que ações ocorram na nossa página, e quando digo ações, não falo somente de “animações”, itens que se mexem, desaparecem e etc, falo principalmente de “Eventos”.

Eventos

E oque são esses eventos? Basicamente, é a relação cliente e página, vamos a um exemplo: Digamos que existe um botão na tela

esse botão foi criado usando HTML e CSS, não vou entrar em detalhes da sua criação pois parto do principio que você entende como fazer isso, mas quando você clica no botão nada acontece, porque? Porque não foi definido uma ação para isso ocorrer, para definirmos isso precisamos usar o javascript, e essa ação de clicar no botão é o que consideramos um “evento”.

Podemos ter eventos variados como passar o mouse sobre um elemento, clicar no elemento, deixar o mouse sobre o elemento, retirar o mouse de cima do elemento, clicar uma tecla do teclado, digitar algo, entre outras muitas possibilidades, é possível analisar toda ação do cliente dentro de uma página até mesmo coisas como, abrir e fechar uma página, mudar de aba e etc.

Manipulação HTML CSS no Javascript

Com isso em mente, precisamos voltar a ideia de manipular o HTML e o CSS com o Javascript, lembrando que o navegador é um “robozinho” que não entende nossa língua, e tudo que passamos para ele são comandos que precisamos explicar, que já foram definidos mas que não funcionam sozinhos, nós damos a ele o contexto para funcionar. Dessa forma, precisamos que o javascript vá até o html/css pegue o elemento que ele precisa para manipular.

Esse tipo de manipulação é chamado de Manipulação DOM, ou, Document Object Model. Que basicamente é o documento em si que estamos trabalhando, que é lido pelo navegador e transcrito para a página que desenvolvemos.

Comandos Javascript

Certo, por padrão, o javascript tem comandos próprios que permitem essa manipulação. No caso do CSS, ele tem a funcionalidade “Style()”, que quando aplicamos permite manipular as propriedades do css, fazendo alterações dos seus valores, dando novos estilos. Já para o HTML, é preciso chamar o elemento, isso é feito usando como base as tags, classes, id’s e etc, normalmente chamando o “Document” e colocando funcionalidade reservada para isso que pode ser para chamar id, classe, tag ou para chamar qualquer um deles, que é o caso do “querySelector” ou “querySelectorAll”, a única diferença aqui é que você utilizará os mesmos símbolos do css: ponto para classe, hashtags para id.

Mas o que fazer depois de chamar esse elemento do HTML? É a hora que entra os eventos, para chamar um evento usamos a palavra reservada “addEventListener”, que nada mais é que um “escutador de eventos na página HTML”, ele fica ouvindo, até que o evento ocorra e ative algo, por exemplo: Vamos pensar no botão que aviamos criado anteriormente:

digamos que dei a classe “botao” para ele:

e agora quero chamar no javascript para manipulá-lo, para fazer isso eu usaria o “document.querySelector(“.botao”)”: 

e depois iria adicionar um escutador a ele, usando o “botao.addEventListener(“evento”, função())”: 

a palavra evento seria a ação que precisa ocorrer para que ele seja ativado, no nosso caso sera o “click”, e função é a saída que vai ocorrer após o clique, então posso por exemplo, colocar uma manipulação de CSS aqui, atribuindo a função criada para o evento o comando “style.backgroundColor=”red”:

e assim teríamos o fundo do botão alterado para a cor vermelha após seu clique. 

Resumo

Resumindo, javascript é incrível de verdade, permite fazer muitas coisas, é como montar peças de lego afim de montar qualquer coisa, mas demanda estudo e muito tempo de prática. Se você entende o básico que é: AddEventListener, QuerySelector, DOM, Eventos e entre outras coisinhas, que pretendo trazer aos poucos para o blog, você está no caminho certo.

Enfim, esse é o básico da funcionalidade dessa linguagem, existe muito mais coisas e liberdade para criarmos do que parece, mas acho que não cabe agora falarmos disso, vou trazer outros posts explicando melhor tudo isso, então, por enquanto é isso nos vemos em breve!