Javascript é extremamente importante pra quem trabalha com desenvolvimento WEB. Além de tornar a navegação um pouco mais agradável ao usuário, a maioria das validações de formulários hoje em dia é feita no lado do cliente, não apenas no lado do servidor. Pode-se dizer que, toda página HTML é estática, ou seja, é apenas visualizada e renderizada pelo navegador. Hoje em dia, já existem alguns elementos em HTML que fazem algum processamento (Validação, animação, etc). Porém, em tese, todo o processamento do lado do cliente é feito via JAVASCRIPT. Deslocamento de divs, gerenciamento de eventos; tudo isso é controlado via javascript. Sem JS, voçê não poderia controlar o comportamento da página, apenas o desenho da mesma.
Afinal, o que é javascript? Em poucas palavras, é uma linguagem de script empregada nos navegadores, afim de alterar o comportamento ou tornar mais funcional determinada página em HTML. Mas, antes de aprender um pouco mais sobre este assunto, é bom entender alguns conceitos.
Primeiro, o DOM. DOM é uma sigla equivalente á Document Object Model. O DOM representa a árvore hierárquica de elementos, conforme observado na fígura abaixo:
Como voçê vê, o desenho acima pode representar a seguinte marcação em HTML
<!DOCTYPE html> <html lang=”en-US”> <head>BRINCANDO COM JAVASCRIPT </head> <body>OI
ALGUM TEXTO AQUI
OUTRO TEXTO AQUI
</body> </html>
Então, o DOM é uma interface única provida pelo navegador de acesso á estes elementos em HTML, que permite tanto ao CSS quanto ao JAVASCRIPT acessarem elementos específicos do documento. Por exemplo:
Caso queira saber um pouco mais, acesse: http://tableless.com.br/tenha-o-dom/
Outro conceito importante é o de evento. Eventos são, digamos, gatilhos disparados por uma ação. Por exemplo: Quando o usuário clica em um botão, ocorre o evento CLick no botão clicado. Quando a página acaba de ser carregada, é executado o evento load do documento. Voçê pode associar uma função ou qualquer instrução á um evento em específico, conforme demonstrado abaixo:
/*OU */
Observe que, todo evento tem o prefixo on. Por exemplo: onClick, onBlur, etc.
Caso queire ter acesso á uma lista completa de eventos, acesse: http://www.marciobrasil.net.br/javascript-2/lista-completa-de-eventos-javascript.html
Voçê também pode criar funções, e associá-las á algum evento em específico, conforme demonstrado abaixo:
/* OU */
Seguem alguns exemplos abaixo, que voçê pode baixar clicando aqui, e que serão explicados um á um. Isto é só pra voçê ter uma idéia do quanto javascript é importante e do que este pode fazer.
1) Mudar valor de um campo de texto
<body>
</body>
2) validar formulário, pra não deixar passar formulário em branco
<body>
</body>
3) enviar requisição ajax
Caso queira saber um pouco mais, acesse esta postagem: http://nunes-developer.blogspot.com.br/2014/04/o-que-sao-requisicoes-ajax.html
<body>
</body>
4) Adicionar elementos á um container
<body>
</body>
5) Mudar propriedades CSS de um elemento (Cor de fundo, largura, altura)
<body>
</body>
Observe que, quando altera o campo altura, a altura da div muda. Isto porque o evento change do campo altura é associado á função mudaAltura. O mesmo acontece com os campos de mudança de largura e cor.
Como voçês viram, dá um pouco de trabalho programar em javascript puro, para realizar coisas relativamente simples. Por isso, já existem alguns frameworks javascript que podem agilizar seu processo. Porém, antes de aprender qualquer framework, é recomendável aprender a linguagem, independente de qual seja.
Seguem abaixo alguns frameworks mais utilizados no mercado:
Segue abaixo o código-fonte do exemplo: CÓDIGO-FONTE DO EXEMPLO
