Mesmo utilizando o html para demarcação da estrutura das páginas e também o CSS para estilizar o FRONT-END não é completo sem a utilização do javascript. Essa linguagem de programação pode ser usada em páginas web para manipular seu conteúdo e adicionar ações a botões dentre outras coisas. Essa linguagem passou por diversas atualizações e houveram muitos avanços, assim, o que antes era apenas uma linguagem de script de dentro do navegador hoje é uma linguagem poderosíssima. Existem muitos frameworks produzidos usando javascript (node.js, react.js, vue.js, angular.js). O objetivo dessa aula não é tornar você um expert, mas gostaríamos de te ajudar a se tornar um programador ciente do poder desse recurso.
Se você gosta de desenvolver aplicações para web, não deixe de conferir nossos conteúdos gratuitos sobre isso.
Sintaxe básica do javascript
Antes de tudo gostaria de salientar que a internet está abarrotada de conteúdo sobre javascript. Meu objetivo aqui é fazer um breve resumo e indicar algumas boas referências para leitura.
Declarando variáveis
Variáveis são caixas nas quais você armazena valores. Você começa declarando uma variável com a palavra-chave var, seguida por qualquer nome que você queira chamá-la:
var a = 15;
var b = 7;
var result = a + b;
console.log(a + " + " + b + " = " + result); Condicionais
Como qualquer linguagem de programação, o JS também conta com uma estrutura condicional (famoso ifelse). A sintaxe é muito semelhante ao C, C++:
var a = 7;
var b = 11;
if(a > b){
console.log(a + " é maior do que " + b);
} else {
console.log(a + " não é maior do que " + b);
}Loops
Em JS também contamos com laços de repetição, o for e while podem ser usados sem problemas:
var a = "Olá mundo!"
for(i = 0; i < 10; i++){
console.log(a);
}
var cont = 0;
while(cont < 10){
cont++;
console.log(a);
}Listas
Os famosos vetores que encontramos em muitas linguagens no Javascript aparecem como listas. Eles são capazes de armazenar agrupamentos de variáveis.
var a = new Array(4);
a[0] = "Primeira posição do Array!";
a[1] = "Segunda posição do Array!";
a[2] = "Terceira posição do Array!";
a[3] = "Quarta posição do Array!";
for(i = 0; i <= 3; i++){
console.log(a[i]);
}Matrizes
O javascript dá suporte a matrizes igual ao C ou C++, ele permite a criação de listas de listas porém com uma sintaxe um pouco diferente:
var a = new Array(3);
a[0] = new Array("1", "2", "3");
a[1] = new Array("4", "5", "6");
a[2] = new Array("7", "8", "9");
for(i = 0; i <= 2; i++){
for(j = 0; j <= 2; j++){
console.log(a[i][j]);
}
}Funções
As funções, que são utilizadas para reaproveitamento de código e isolamento de funcionalidades são passiveis também de serem declaradas no javascript:
var a = 1;
function print(){
if(a > 1){
console.log("Executei a função " + a + " vezes");
} else {
console.log("Executei a função " + a + " vez");
}
a++;
}3- Manipulando a página HTML via javascript
Considerando que o objetivo principal desta aula é dar “movimento” a uma página html utilizando o javascript, iremos agora entender como é possível codificar esse comportamento. As páginas html e seus elementos são dotadas de “eventos”, estes eventos podem ser manipulados via Javascript. A linguagem é capaz de alterar qualquer parte da página html dando a página a possibilidade de interação com o usuário mesmo sem a presença de uma linguagem de programação Back-end. Veja um exemplo de como utilizar o evento onClick de um botão para alterar o conteúdo da página:
<!DOCTYPE html>
<html lang=pt-BR>
<head>
<title>JS DOM Manipulation</title>
<meta charset="utf-8" />
</head>
<script type="text/javascript">
function send(){
var a = document.getElementById('text');
a.innerHTML = document.getElementById('sendText').value;
}
</script>
<style>
body{
background-color: aquamarine;
}
#section1 {
width: 100%;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
}
#section2 {
width: 100%;
height: 40vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<body>
<section id="section1">
<input id="sendText" type="text"/>
<button onclick="send()">Enviar</button>
</section>
<section id="section2">
<h1 id="text">Oi</h1>
</section>
</body>
</html>4- Artigos interessantes
JavaScript básico – Developer mozilla
5- Acesse o código no GitHub
