Advertisement

Aula 04 - Adicionando movimento (lógica) com JavaScript




1- Introdução



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.  O javascript é uma linguagem de programação que pode ser inserido a páginas web para manipular seu conteúdo e adicionar ações a botões dentre outras coisas. 
Atualmente o javascript avançou muitas fronteiras e 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 em javascritpt, mas tornar você um programador ciente de como ele funciona e do seu poder.



2- 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 javascript 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

No javascript 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



Nenhum comentário

Conta pra mim sua opinião!

Fale comigo