JavaScript é uma linguagem de programação dinâmica que é usada no desenvolvimento web, em aplicações web, no desenvolvimento de jogos e muito mais. Ela permite implementar recursos dinâmicas em páginas web que não podem ser feitas apenas com HTML e CSS.
Muitos navegadores usam como uma linguagem de script para fazer coisas dinâmicas na web. Sempre que você vê um menu suspenso, conteúdo extra adicionado a uma página e mudanças dinâmicas nas cores dos elementos em uma página, apenas para citar alguns exemplos, você está vendo os efeitos dessa linguagem.
O que veremos neste artigo:
Como seria a Web sem o JavaScript?
Como o JavaScript torna as coisas mais dinâmicas
Como usar o JavaScript no HTML
Como seria a Web sem o JavaScript?
Sem o JavaScript, tudo o que você teria na web seria HTML e CSS. Só estes limitam você a algumas implementações de páginas web. 90% (se não mais) de suas páginas web seriam estáticas, e você teria apenas as mudanças dinâmicas como as animações que o CSS fornece.
Como o JavaScript torna as coisas dinâmicas
O HTML define a estrutura de seu documento web e o conteúdo do mesmo. O CSS declara vários estilos para os conteúdos fornecidos no documento web.
HTML e CSS são frequentemente chamadas de linguagens de marcação em vez de linguagens de programação, porque elas, em sua essência, fornecem marcações para documentos com muito pouco dinamismo.
O JavaScript, por outro lado, é uma linguagem de programação dinâmica que suporta cálculos matemáticos, permite adicionar dinamicamente conteúdo HTML ao DOM, cria declarações dinâmicas de estilo, busca conteúdo de outro website e muito mais.
Antes de entrarmos em como o JavaScript faz todas essas coisas, vejamos um exemplo rápido.
Confira no Codepen: https://codepen.io/Dillion/full/XWjvdMG
No Codepen, você verá que ao digitar no campo de entrada, o texto aparece na tela. Isso é possível graças ao JavaScript. Você não pode obter isto com HTML, CSS.
O JavaScript pode fazer muito mais do que o que eu posso citar neste artigo. Mas para você começar com o JS, vamos dar uma olhada:
- Como usar o JavaScript em HTML
- Tipos de dados
- Variáveis
- Comentários
- Funções
Como usar o JS no HTML
Assim como no CSS, o JavaScript pode ser usado em HTML de várias maneiras, como por exemplo:
JS embutido
Aqui, você tem o código JavaScript em tags no HTML em alguns atributos especiais baseados em JS.
Por exemplo, as tags HTML têm atributos que permitem executar algum código quando um evento é acionado. Eis o que eu quero dizer:
|
1 |
<button onclick="alert('Você acabou de clicar em um botão')">Click</button> |
Este é um exemplo de JavaScript em linha. O valor do ‘onclick’ pode ser algum cálculo de correspondência, uma adição dinâmica ao DOM – qualquer código JavaScript válido para a sintaxe.
JS interno, com a tag do script
Assim como a tag para declarações de estilo dentro de uma página HTML, a tag de script existe para JavaScript. Veja como ela é usada:
|
1 2 3 4 5 |
<script> function(){ alert("Eu estou inserido no script ") } </script> |
JavaScript externo
Você pode querer ter seu código JavaScript em um arquivo separado. O JavaScript externo permite isso. Para tais casos de uso, aqui está como é feito:
|
1 2 3 4 |
<!-- index.html --> <script src="./script.js"></script> // script.js alert("Eu estou inserido em um arquivo externo"); |
O atributo src da tag do script permite que você aplique uma fonte para o código JavaScript. Essa referência é importante porque notifica o navegador para buscar também o conteúdo do script.js.
script.js pode estar no mesmo diretório com index.html, ou pode ser obtido em outro website. Para este último, você precisará informar a URL completa (https://…/script.js).
Notou a extensão .js? Essa é a extensão para arquivos JavaScript, assim como o HTML tem .html.
Agora que já analisamos formas de aplicar o JavaScript ao nosso HTML, vamos ver algumas das características do JavaScript.
Tipos de dados em JavaScript
Em JavaScript, os dados têm que ser de um ou outro tipo. O JavaScript precisa saber isto para que saiba como utilizá-lo com outros dados ou como operar com tais dados.
Aqui estão os tipos de dados básicos que o JavaScript suporta:
- Número: (por exemplo, 6, 7, 8.9): no qual você pode aplicar operações aritméticas (como adição) e muitas outras
- String: (como “javascript“, “uma frase longa“, um parágrafo curto): qualquer coisa encontrada entre aspas simples (‘…’), aspas duplas (“…”) e acento grave ou crase(
...). Não há diferença entre aspas simples e duplas, mas as crases têm mais características, como por exemplo:- Interpolação de variáveis em strings, assim: Meu nome é ${name}. name aqui é uma variável, injetada na string.
- Sequências de várias strings. Com aspas normais, você precisaria adicionar caracteres de escape como \n para uma nova linha, mas os acentos graves permitem que você continue sua string em outra linha, assim:
|
1 |
let str = `Eu sou uma string múltlipa`; |
- Booleano: (só pode ser de dois valores: verdadeiro ou falso): mais como sim (verdadeiro) ou não (falso)
- Array: (por exemplo, [1, 2, “olá”, false]): um grupo de dados (que pode ser de qualquer tipo, inclusive arrays) separado por uma vírgula. A indexação começa a partir de 0. O acesso ao conteúdo de tal grupo pode ser assim: array[0], que para este exemplo retornará 1, já que é o primeiro item.
- Objeto: (por exemplo {nome: ‘javascript’, idade: 5}): também um grupo de dados, mas na forma de um par key:value. A ‘chave’ tem que ser uma string, e o valor pode ser de qualquer tipo, incluindo outro objeto. O acesso ao conteúdo do grupo é feito com a chave, por exemplo obj.idade ou obj[“idade”] retornará 5.
- Indefinido: (os únicos dados que este tipo suporta são indefinidos): Estes dados podem ser atribuídos a uma variável explicitamente, ou implicitamente (por JavaScript) se uma variável tiver sido declarada mas não tiver sido atribuída a um valor. Mais tarde, neste artigo, veremos a declaração de variável e a atribuição de valor.
- Null: (os únicos dados que este tipo suporta são nulos): Null significa que não há nenhum valor. Ele possui um valor, mas não um valor real – ao contrário, nulo.
- Função: (por exemplo, function(){ console.log(“função”) }): Uma função é um tipo de dado que invoca um bloco de código quando chamado. Mais sobre funções, mais adiante neste artigo.
Os tipos de dados JavaScript podem ser um pouco complicados de entender. Você já deve ter ouvido dizer que as matrizes e funções também são objetos, e isso é verdade.
Entender isso envolve compreender a natureza dos protótipos de JavaScript. Mas, no nível básico, estes são os tipos de dados que você precisa conhecer primeiro em JavaScript.
Variáveis em JavaScript
As variáveis são containers para valores de qualquer tipo de dados. Elas contêm valores tais que, quando as variáveis são usadas, o JavaScript usa o valor que elas representam para aquela operação.
As variáveis podem ser declaradas e podem receber um valor. Quando você declara uma variável, você está fazendo isto:
|
1 |
let nome; |
Para o acima exposto, o nome foi declarado, mas ainda não tem um valor.
Como seria de esperar da seção de tipos de dados, o JavaScript atribui automaticamente um valor de indefinido ao nome. Portanto, se você tentar usar o nome em qualquer lugar, será usado indefinido para essa operação.
Aqui está o que significa atribuir um valor a uma variável:
|
1 2 |
let nome; nome = "JavaScript"; |
Agora, se você usar o nome, ele representará o JavaScript.
Declarações e atribuições podem ser feitas em uma linha como esta:
|
1 |
let nome = "JavaScript"; |
Por que let? você pode ter se perguntado, e aqui está o porquê: O JavaScript suporta três métodos de declarações variáveis, que são:
- o operador var: isto tem sido com JavaScript desde seu início. Você pode declarar variáveis e atribuir valores a elas que podem ser alterados posteriormente no código. Eis o que eu quero dizer:
|
1 2 |
var nome = "JavaScript"; nome = "Language"; |
- o operador let: também é muito semelhante a var – declara e atribui valores a variáveis que podem ser alteradas posteriormente no código. A principal diferença entre esses operadores é que var eleva tais variáveis, enquanto let não. O conceito de elevação pode ser explicado brevemente com o seguinte código:
|
1 2 3 4 5 6 7 8 |
function print() { console.log(nome); console.log(idade); var name = "JavaScript"; let age = 5; } print(); |
Ao chamar a função print (print()), o primeiro console.log imprime undefined enquanto o segundo console.log lança um erro de que ele “Não pode acessar a idade antes da inicialização”.
Isto ocorre porque a declaração da variável nome é elevada para o topo da função e a atribuição para a variável permanece na mesma linha enquanto a declaração de idade e a atribuição permanecem na mesma linha.
Veja como o código acima é compilado:
|
1 2 3 4 5 6 7 8 9 |
function print() { var nome; console.log(nome); console.log(idade); name = "JavaScript"; let idade = 5; } print(); |
Problemas de elevação podem acontecer inesperadamente, e é por isso que você deve usar let ao invés de var.
– o operador const: também não eleva variáveis, mas faz mais uma coisa: assegura que uma variável não possa receber outro valor além do que lhe foi atribuído durante a inicialização.
Por exemplo:
|
1 2 3 4 5 |
let nome = "JavaScript" nome = "Language" // no errors const idade = 5 idade = 6 // error, cannot reassign variable |
Comentários em JavaScript
Assim como o HTML, às vezes podemos querer colocar uma nota ao lado de nosso código que não precisa ser executada.
Podemos fazer isso com JavaScript de duas maneiras:
- – com comentários de uma única linha, como este:
|
1 |
// um comentário de uma única linha |
- ou com comentários de várias linhas, como este:
|
1 2 3 4 |
/* Um comentário de múltiplas linas */ |
Funções em JavaScript
Com funções, você pode armazenar um bloco de código que pode ser usado em outros lugares em seu código. Digamos que você queria imprimir “JavaScript” e “Language” em diferentes lugares em seu código. Ao invés de fazer isso:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
console.log("JavaScript") console.log("Language") // algo aqui console.log("JavaScript") console.log("Language") // algo aqui console.log("JavaScript") console.log("Language") |
Você pode fazer isto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function print() { console.log("JavaScript") console.log("Language") } print() // algo aqui print() // mais algo print() |
Desta forma, armazenamos o bloco de código repetido em uma função que pode ser usada onde quisermos. Mas isso não é tudo. Digamos que queríamos encontrar a média de três números. O código para isso seria:
|
1 2 3 4 |
let num1 = 5 let num2 = 6 let num3 = 8 let average = (num1 + num2 + num3) / 3 |
Fazer isso fora de uma função pode não doer, mas se tivéssemos que fazer isso em muitos lugares? Então, teríamos uma função como essa:
|
1 2 3 4 5 6 7 8 9 |
function findAverage(n1, n2, n3) { let aver = (n1 + n2 + n3) / 3 return aver } let num1 = 5 let num2 = 6 let num3 = 8 let average = findAverage(num1, num2, num3) |
Como você notará na declaração findAverage, temos n1, n2, n3 entre parênteses. Estes são parâmetros, que servem como placeholders para valores que seriam fornecidos quando a função fosse chamada.
O bloco de código usa esses espaços reservados para encontrar a média e a palavra-chave return retorna a média da função.
Os espaços reservados tornam suas funções reutilizáveis, de modo que valores diferentes em momentos diferentes podem ser passados para as funções para usar a mesma lógica.
O que aprendemos com este artigo?
O que é JavaScript?
JavaScript é uma linguagem de programação dinâmica que é usada no desenvolvimento web, em aplicações web, no desenvolvimento de jogos e muito mais. Ela permite implementar recursos dinâmicas em páginas web que não podem ser feitas apenas com HTML e CSS.
Como usar o JavaScipt no HTML?
Você pode usar de forma embutida no HTML, internamente com a tag de script ou externamente.
Quais os principais tipos de dados em JS?
Número, string, booleano, array, objeto, indefinido, null e função.
O que são variáveis no JavaScript?
As variáveis são containers para valores de qualquer tipo de dados. Elas contêm valores tais que, quando as variáveis são usadas, o JavaScript usa o valor que elas representam para aquela operação.
O que são funções no JS?
Com funções, você pode armazenar um bloco de código que pode ser usado em outros lugares em seu código.
Artigo inspirado e adaptado de: https://www.freecodecamp.org/news/what-is-javascript-definition-of-js/
Deixe um comentário