JavaScript – O guia básico

Muito bem-vindo, que bom que você se interessou pelo JavaScript.

Aqui será um guia básico com os “primeiros socorros” para você que está começando ou esquece dos comandos

Inclusão do JavaScript “on page”

Para a inclusão de alguma função rápida, fazemos com o script “on page”, que é colocar ele diretamente no meio do HTML, mais precisamente aonde for utilizar

<script type="text/javascript"> 
  ...
</script>

Inclusão de um arquivo de JavaScript externo

Dessa forma utilizamos normalmente para incluir uma biblioteca, framework ou mesmo algum arquivo maior.

<script src="caminho/nome_do_arquivo.js"></script>

Comentários

Sempre que quiser comentar código para colocar uma explicação ou um lembrete, pode usar o /* */ ou o //

O // é para comentar a linha e somente ela

O /* começa um comentário e o */ termina. Veja os exemplos abaixo:

// Comentário de linha única
/* Este é um exemplo de um
comentário maior que pode 
passar várias linhas */

Funções

Podemos criar funções para muitas coisas, aqui colocarei um exemplo de uma função de soma de números:

function somaNumeros (num1, num2) {
   return (num1 + num2);
}

Tipos de dados

Os tipos de dados mais comuns em JavaScript

var nome = "Marcos"; // String
var numero = 20; // Number
var objeto = {primeiro_nome: 'Marcos", segundo_nome: 'Carvalho'}; // Objeto
var existe = true; // Boolean
var arr_nome = ['Marcos', 'Carlos', 'Bia']; // Array
var x; // Typeof
var a= null; // null

Logs / Prompts / Impressão

O log é mostrado no “inspecionar elemento” do browser. Muito útil para procurar erros no código.

write é usado para imprimir um resultado qualquer

// Escreve no log do Browser a mensagem 
console.log ('Imprime no Log'); 

// Escreve na tela do Browser
document.write ('Escreve na tela'); 

/* Aparece um prompt com a pergunta e armazena 
a resposta (true ou false) na variável x */
var x = confirm('Deseja sair ?'); 

// Imprime a variável x
alert(x);

// Aparece um prompt com um a mensagem e atribui ao valor y
var y = prompt ("Digite sua idade", "0");


// Imprime y
alert(y);

Os prompts são usados para mostrar alguma informação ou solicitar algo do usuário (preenchimento)

Condicionais

Condicionais são a base de qualquer linguagem de programação. Com elas você decide qual caminho seguir:

if ((idade >= 10) && (idade < 18)) {
   document.write ('Idade entre 10 e 17 anos');
}
else {
   document.write ('Idade não está na faixa de 10 e 17 anos');
}

Estruturas de Loop

As duas estruturas famosas de loop.

For = incremental, normalmente quando sabemos de onde saímos e para onde vamos. Ex: Quando precisamos repetir 10 vezes a mesma coisa, vai de 0 a 9

for (var i=0; i<10; i++) {
   document.write (i);
}
// Resultado 0123456789

While = É muito parecido ao for, porém não é especificado um contador, mas sim uma condição. Ex: Podemos solicitar uma condição até a pessoa digitar zero.

var num = "1";
while (num != '0') {
   num = prompt ('Digite um número (ou zero para sair)');
}

Do While = É praticamente o mesmo do while, com a diferença que a condição é executada após a primeira execução, no nosso exemplo nem precisaríamos criar a variável antes, e seria a utilização correta.

do {
   num = prompt ('Digite um número (ou zero para sair)');
} while (num != '0');

Strings

As principais funções de manipulação de Strings do JavaScript

var texto = "este é um texto de teste";
var nova_linha = "Esta é uma \nNova linha";   // o \n começa uma nova linha
var tamanho_texto = texto.length;  // Mostra o tamanho da string
texto.indexOf("es");  // Procura a string dentro da string texto
texto.lastIndexOf("es");  // Procura a última ocorrência em texto
texto.slice(7,11);  // Retorna a string começando no 7 e até o 10 (não inclui o 11) "um t"
texto.replace ("este", "aquele");  // Troca a primeira ocorrência - "aquele é um texto de teste"
texto.toUpperCase();  // Troca tudo para maiúscula
texto.toLowerCase();  // Troca tudo para minúscula
texto.concat(" ", texto2);  // Concatena ou "soma" as strings texto + " " + texto2
texto.charAt(3);  // Retorna o índice na posição - "e"
texto.charCodeAt(3);  // Retorna o código do caractere na posição - 101
texto.split(" ");  // Coloca virgula em todos os espaços em branco - "este,é,um,texto,de,teste"
texto.split("e");  // Coloca virgula em todos os "espaços em branco"e"s - ",st, é um t,xto d, t,st,"

Matemática

As principais funções matemáticas do JavaScript

Math.round (3.4);  // Arredonda 3.4 para 3
Math.pow(2,4);  // 2 elevado a 4 = 16
Math.sqrt(64);  // Raiz quadrada = 8
Math.abs(-88);  // Valor absoluto = 88
Math.ceil(4.14);  // Arredondamento para cima = 5
Math.floor(4.99);  // Arredondamento para baixo = 4
Math.sin(0);  // Seno de 0 = 0, também existe o cos, tan, atan, asin e acos
Math.min(0,2,1,7,9);  // Mínimo = 0
Math.max(0,2,1,7,9);  // Máximo = 9
Math.log(1);  // Logaritmo = 0
Math.random();   // Número randômico entre 0 e 1 - Ex: 0.7058213383730487
Math.floor(Math.random() * 6) + 1;   // Número inteiro randômico entre 1 e 6 - Ex: 2

Números em geral

As principais funções que tratam números do JavaScript

var n = 8.91923;
n.toFixed(0);  // Converte para inteiro e arredonda = 9
n.toFixed(2);  // Fixa em 2 casas decimais e arredonda = 8.92
n.toPrecision(4);  // Converte para um número com 2 dígitos (contando inteiros e decimais) = 1.838
n.valueOf();  // Valor do n
Number(true);  // Converte para 1
Number (new Date());  // Converte para milisegundos  desde 1970
parseInt("2 semanas");  // Converte o que consegue para int = 2
parseFloat("5.9 anos");  // Converte o que consegue para float = 5.9

Não esqueçam de guardar essa página para consulta posterior. Um abraço