Introdução ao JavaScript

JavaScript(JS) é uma linguagem de programação para web(internet). Programar é dar ordens ao computador. Damos ordems ao computador falando de forma que ele consiga entender, ou seja, usamos uma linguagem: linguagem de programação. JS é uma linguagem de alto nível e interpretada.

Alto nível por ter uma sintaxe mais próxima da linguagem comum (falada, escrita) do que da linguagem de máquina (bits 0's e 1's). Interpretada pois o computador "lê" e "transforma" o conteúdo em zeros e uns para que o computador possa fazer o que foi ordenado.

Na linguagem JS cada linha representa uma instrução, ou ordem. Cada linha é lida, transformada para 0's ou 1's e então executada pelo computador.

Variáveis

Variáveis são como caixas capazes de guardar algo dentro:

Em JS podemos criar variáveis de duas maneiras, usando as palavras let e const, como em:

let idade = 18 // inteiro 
const PI = 3.14 // decimal

A diferença entre as duas é que const é usando para algo "constante", que não muda e let para algo que pode mudar durante a execução. Curiosidade: let vem da expressão "let it change"(Deixe isso mudar).

Tipos de dados

Texto (String)

Existem, basicamente, três maneiras de criar textos em JS:

• Utilizando aspas simples (') como em 'Olá, mundo!';
• Utilizando aspas duplas (") como em "Olá, mundo!";
• Utilizando o acento grave(`) como em `Boa tarde, ${nome}`;

Inteiro (Integer)

São números que não tem partes quebradas, como por exemplo quantidade de pessoas que cabem em um local, temperaturas. Podem ser positivos ou negativos. Por exemplo, 206(pessoas),-4(°C)

Decimais (Float)

São números que podem ter valores após a virgula, como preços, pesos, distâncias: (R$)9.99, 62.5(KG), 13.3(KM).

Boleano (Boolean)

É o tipo que indica uma valor lógico: verdadeiro ou falso;

Undefined

Algo não definido ainda, normalmente indica um erro no uso da variável.

Null

Variável não instânciada, ou vazia.

Vetor/Matriz (Array)

Permite guardar conjuntos de valores, como um conjunto de valores. Ex.: Temperaturas dos últimos dias.

Antes de continuarmos: Fluxogramas - vendo os caminhos do script

Os fluxogramas ajudam a descrever as etapas de um processo em ordem sequencial usando apenas formas, linhas e setas.

O que é um fluxograma?

Um fluxograma é um tipo de diagrama que explica visualmente um processo ou fluxo de trabalho (workflow), por isso também é chamado de diagrama de fluxo. Usando símbolos e definições padronizados, os fluxogramas descrevem visualmente as diferentes etapas e decisões de um processo. Esses diagramas são populares em diversas áreas há muitos anos - desde engenharia e educação até programação de softwares e gerenciamento de projetos.

Os fluxogramas são úteis para a comunicação desde os processos mais simples até mesmo os mais complexos, por isso são incrivelmente dinâmicos e versáteis. Ao olhar para um fluxograma, um espectador deve ser capaz de obter uma visão geral de um processo facilmente.

Normalmente, um fluxograma é desenhado usando vários símbolos, cada um representando uma etapa diferente dentro de uma sequência ou processo. Geralmente usamos uma variedade de elementos e formas para montar um fluxograma como: ações, materiais, serviços, entradas e saídas. Se você tem uma decisão que precisa ser tomada e não tem certeza do processo, usar um fluxograma pode simplificar muito a sua tomada de decisão.

Símbolos de fluxogramas

Existem notações e elementos padrões que são usados na maior parte dos fluxogramas. Cada símbolo representa uma ação ou etapa diferente dentro de uma sequência ou processo. Abaixo destacamos os símbolos mais comuns usados em fluxogramas.

• Oval: Um elemento oval em um diagrama de fluxo representa o terminal ou terminador. Ou seja, indica o início e a parada dentro de uma sequência.
• Paralelogramas: O paralelograma indica uma entrada ou saída ("input" ou "output").
• Retângulo: Os retângulos indicam ações ou o processo em si.
• Diamantes: Diamantes indicam as decisões que precisam ser tomadas. Estes geralmente resultam em dois caminhos alternativos com base na decisão tomada.
• Linhas de fluxo ou conectoras: As linhas de fluxo e flechas representam as direções tomadas na sequência.

Acompanhe a imagem e os elementos citados a pouco:

Código:

<script> 
alert("Bem vindo, isso foi escrito a partir de JS")
<script>

Explicando:

o comando(tag) script cria o espaço que pode receber os códigos JS. alert é um comando(função) que abre uma caixa com o conteúdo dentro dos parênteses.

outra maneira é a seguinte:

Código:

<script> 
document.write("Bem vindo, isso foi escrito a partir de JS")
<script>

Explicando:

o comando(tag) script cria o espaço que pode receber os códigos JS. write é um comando(função) que escreve diretamente na página o conteúdo dentro dos parênteses, onde document representa a página da internet carregada. Nesse caso, o comando write é algo que existe "dentro" de document, por isso que escrevemos document.write para conseguir escrever na página.

Ou seja, alert é uma função da linguagem(JS). E document.write é uma função ligado a página carregada, isso é uma das coisas interessantes no JS.