📚 Tópicos sobre javascript

Javascript é uma linguagens mais utilizadas da atualidade. Veja o resultado da  pesquisa feita pelo site stackoverflow:

Inserindo códigos javascript

Para inserir códigos javascript em um documento HTML deixe-o  entre as tags <script type="text/javascript"> e </script>.

<script type="text/javascript"> 

alert("olá mundo!");

</script>

Javascript é case-sensitive (diferencia letras maiúsculas de minúsculas), ou seja, o comando alert é diferente de Alert.

Variáveis

Variáveis são utilizadas para armazenar valores. Estes valores podem ser de vários tipos, dos mais simples como números e letras aos mais complexos, como arquivos e objetos.

Uma variável é uma espécie de memória temporária onde uma informação é armazenada. Pode se usar como exemplo a memória da calculadora, onde é possível armazenar um número e depois realizar operações com ele.

No javascript, variáveis são definidas utilizando o operador let ou var, sendo mais comum a utilização do primeiro. Atribuições de valores são feitas usando o sinal de =. Assim como o Python, o javascript utiliza tipagem dinâmica, sendo assim você não precisa declarar o tipo do valor armazenado na variável.

Variáveis do tipo texto são denominadas "Strings" e seu valor é delimitado por aspas simples ', aspas duplas " ou acento grave `.

Exemplos

//Cria uma variável chamada `nome` e lhe atribui o valor `João'.

let nome = 'João';

//ou

var nome = `João`;

//números

let valor = 30;

//ou

var valor = 30;

Constantes

Constantes são similares à variáveis, a única diferença é que seu valor não pode ser alterado. São definidas usando o operador const.

Exemplo

const nome = 'Maria';

const valor = 30;

Comentários

Comentários podem ser introduzidos ao redor do seu código javascript. Eles são úteis para descrever o que determinada seção do código faz. Pode-se inserir comentários utilizando // para comentários de única linha, ou /* e */ para comentários de múltiplas linhas.

Exemplo

//isto é um comentário 

/* isto

também é 

um comentário */

Operações com números

Valores numéricos podem sofrer uma série de operações, como soma, multiplicação, potenciação, etc.

Exemplo

let valor = 2;

let produto = 3 * valor; //produto armazenará `6`

Operadores aritméticos:

+ soma

- subtração

* multiplimultiplicação 

/ divisão

** exponenciação

% resto da divisão

Typecast (definição de tipos)

Como dito anteriormente, o javascript não necessita que você especifique o valor armazenado em uma variável. No entanto, em determinada momento do código, pode ser necessário alterar o "tipo" de um valor. Por exemplo, suponha que você quer realizar uma operação aritmética com um valor, mas este valor está armazenado no formato de uma string. Strings não podem realizar tal operação, primeiro é necessário convertê-la.

Exemplo

let valor = "30";

let produto = valor + 3;

A variável soma armazenará a string 303, pois a variável valor não é um número e sim uma string (apesar de conter um número).

let valor = "30";

let soma = parseInt(valor) + 3;

Agora sim, a variável valor é convertida para um valor numérico do tipo inteiro e depois somada ao valor 3. soma é uma variável do tipo inteiro e armazena o valor 33.

Como o javascript possui tipagem dinâmica, certas operações não necessitam do especificador de tipo:

let valor = "30";

let produto = parseInt(valor) * 3;

produto armazenará o valor numérico, do tipo inteiro, 90.

Funções

Funções são utilizadas para delimitar um trecho de código que realiza uma tarefa específica. É utilizado o operador function seguido do nome da função. O código da função deve ficar entre colchetes {}.

Exemplo

function soma(){

  let valor = 30;

  let soma = valor + 3;

}

Para se executar uma função, basta chamar seu nome.

soma();

Retornando valores de uma função

Para se retornar um valor de uma função, utilizando-se o operador return seguido do valor.

function soma(){

  let valor = 30;

  let soma = valor + 3;

  return soma;

}

var resultado = soma();

resultado armazenará o valor 33;

Passando valores à uma função

Pode-se passar valores a uma função no momento em que ela é chamada, tornando-a mais dinâmica.

function soma(valor){

  let soma = valor + 3;

  return soma;

}

var resultado = soma(20);

resultado armazenará o valor 23

Veja como a função soma ficou mais útil, ao invés da variável valor ser um número fixado, ela pode ser especificada livremente.

Acessando elementos HTML

Existem inúmeras maneiras de se referenciar elementos html dentro do código javascript:

document.getElementById("valor") - retorna o elemento com a id valor.  

document.querySelector("valor") - retorna um único elemento. valor pode ser a id do elemento ou seu tipo (neste caso, é retormada a primeira ocorrência de valor). Par selecionar um elemento pelo seu ID, tal como na função acima, utilize:

 document.querySelector("#ID")

document.querySelectorAll("valor") - retorna um array com todos os elementos do tipo valor encontrados.

document.getElementsByTagName("valor") - retorna um array com todos os elementos com a tag valor encontrados.

Orientação à objetos

Assim como o Java, a linguagem javascript conta com suporte à orientação à objetos.

Classes

Classes podem ser definidas utilizando-se a palavra class, seguida do nome da classe.

Exemplo

class carrinho{}; //isto é uma classe

Dentro de uma classe, variáveis e constantes são definidas sem a utilização de var, let ou const. Para se atribuir valores à variáveis após sua definição, deve-se utilizar this seguido do nome da variável.

Exemplo

class carrinho{

valor = 10; //declaração e definição do valor inicial da variável

this.valor = 20; //atribuição de um novo valor à variável

}

Funções podem ser declaradas dentro de uma classe da mesma maneira que em qualquer outra parte do código javascript, com excessão das funções constructor e init. A única diferença é que não é preciso preceder o nome da função com function.

constructor - função que é chamada automaticamente na criação de um objeto definido pela classe.

init - função que é chamada automaticamente na inicialização de um objeto definido pela classe.

Exemplo

class carrinho{

  valor;

  constructor {

    this.valor = 0;

  }; // note o ; ao final da função

  init{

    this.valor = 0.10;

  };

  adicionaProduto (valor){

    this.valor += valor; //adiciona o valor passado à função à variável valor da classe

  };

};

Criando objetos

Uma vez definida a classe, basta usar o comando new para criar um novo objeto (instância) da classe:

let meuCarrinho = new carrinho(); //cria um novo objeto da classe "carrinho"

meuCarrinho.adicionaProduto(9.90); //realiza operações com o objeto

Funções de String

Strings são sequências de texto. Possuem uma biblioteca específicespecífica que facilita a realização de operações comuns:

length : retorna o número de caracteres.

replace(antes, depois) : substitui a primeira ocorrência de antes por  depois

replaceAll(antes, depois) : substitui todas as ocorrências de antes por depois

substr(início, comprimento) : retorna uma string contida na string inicial, com o comprimento informado contando a partir da posição início.

substring(início, fim) : retorna uma string contida na string inicial, contida entre as posições início e fim.

Funções Matemáticas

PI : constante pi da trigonometria (aproximadamente 3,1415...).

sin : seno de um ângulo

cos : cosseno de um ângulo

tan : tangente de um ângulo

sqrt : raiz quadrada

pow(a, b) : retorna a elevado ao valor b (por exemplo, Math.pow(3,2) = 3² = 9).

log : logarítmo natural (base e).

Estruturas condicionais

Além do if...else tradicionais, o javascript conta com uma versão reduzida do comando:

condição ? acao se verdadeiro : acao se falso

Obs: ao contrário de algumas lunguagens, o javascript não possui o comando elif, sendo necessário se utilizar else if.