Introdução ao Javascript - Geral

O que é Javascript?

JavaScript é uma linguagem de programação criada para os navegadores. Ela é responsável por permitir a interação entre os usuários e a uma página web. O HTML define a estrutura da página, o CSS a estilização e o Javascript é quem permite desenvolver funcionalidades na página, tornando-a dinâmica.

Hoje, é uma das linguagens mais utilizadas do mundo e é a mais importante para o desenvolvimento web.

Por que Javascript e não C, Java ou Python?

Porque não é possível criar um script em C, Java ou Python diretamente executável pelo browser. Javascript é a linguagem nativa dos navegadores. A prática não é incomum na computação: Java/Kotlin são as linguagens nativas do Android e Swift/Objective-C do IOS.

É possível transpilar (Transformar um código de uma linguagem para outra) C, Java ou python em Javascript. Mas, no fim das contas, o script final é em javascript e as funcionalidades da linguagem original serão limitadas pelo que Javascript é capaz de executar. O que define se uma linguagem pode ou não ser executada diretamente no navegador é o desejo e esforço dos próprios navegadores em torná-la compatível com o produto. Cada navegador é diferente e, em teoria, seria possível construir um que implemente outra linguagem. Mas, na prática, Javascript se tornou a principal, e, até recentemente, a única.

Há iniciativas que buscam implementar outras linguagens no Browser. A principal delas é o Web-Assembly, criado em 2017. O projeto é desenvolvido pela W3C (Principal organização de padronização da Web), Mozilla, Microsoft, Google e Apple. Seu objetivo é definir um padrão de formato binário executável pelo navegador, o wasm. Seria possível por exemplo compilar C++ em wasm e executá-lo da mesma maneira que se executa Javascript. Além do Javascript, Web-assembly é a única outra maneira nativa certificada pela W3C para rodar código em navegadores. O projeto está em fase inicial, mas é extremamente promissor. Já é possivel executar wasm no Mozilla e Chrome, por exemplo.

É importante salientar que o Web-Assembly não tem por objetivo substituir o Javascript, e sim complementá-lo para casos de uso específicos que requerem operações computacionalmente custosas. Por exemplo, um editor de imagens online. A imensa maioria das páginas pode ser implementada apenas com Javascript, e não faz sentido aprender wasm antes de se dominar o js.

Por fim, outra grande vantagem do Javascript é sua recente ascenção como linguagem para servidores por meio do Node. Ao se aprender uma única linguagem, já é possível criar uma base sólida para desenvolvimento front-end (cliente) e back-end (servidor).

Criando Código em JS

São necessários apenas um navegador e editor de texto para executar javascript.

Crie dois arquivos, um index.html e um main.js. Ao fim do <body> deindex.html criar uma referência para main.js:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

O código acima escreve `Hello World!` no console do navegador.

Console

Uma ferramenta de desenvolvimento embutida no navegador. Permite ver a saída de scripts linkados ao html ou mesmo escrever código.

  • No Google Chrome e Firefox, é acessível via Ctrl Shift I

  • Também pode ser acessado com Right Click -> Inspect

A vantagem do console é sua praticidade: É possível testar código ou mesmo performar sobre páginas e acessar suas variáveis sem lidar com arquivos. Entretanto, é importante notar que a única maneira de escrever código persistente (Acessível após execução) é utilizando arquivos .js. Códigos feitos a partir do console do navegador não são salvos em lugar algum, sendo portanto perdidos quando se encerra o browser.

console.log

Imprime o resultado de uma expressão em javascript no console.

console.log(3+4)            // Imprime 7
console.log("Hello World") //  Imprime Hello World

Declaração de variáveis: var vs let vs const

Variáveis são essenciais para armazenamento de dados cujo uso poderá ser feito em diversas etapas do programa.

Os comandos var, let e const permitem declarar variáveis. var é depreciado (Seu uso é contra-indicado). Prefira let para variáveis comuns e const para constantes (Variáveis que não se modificam). Para uma explicação mais detalhada, confira o capítulo "Introdução ao Javascript - Aprofundado".

let a = 3
let b = 4
let c = a+b

console.log(c) // Imprime 7.

A diferença deste exemplo exemplo para o anterior é que c agora está alocada na memória do programa, e seu conteúdo 7 poderá ser acessado e transformado em qualquer etapa posterior. Simplesmente imprimir console.log(3+4) não gera referência nenhuma que permita manipular 7.

Tipagem

Javascript possui tipagem Dinâmica:

  • Não é possível declarar o tipo da variável, que é atribuído automaticamente.

  • É possível modificar o tipo de uma variável.

  • O comando typeof() permite descobrir o tipo atual.

Na prática, em javascript, tipos são associados aos valores e não às variáveis.

Number

Armazena números, sejam eles inteiros ou floats.

let inteiro = 3
let float = 3.5

console.log(typeof(inteiro), typeof(float)) //number number

Strings

Armazenam qualquer text entre aspas simples ou duplas.

let my_string = 'olá mundo'
console.log(typeof(my_string)) //string

Confira a aula 2 (Strings) para maiores informações sobre o tema.

Boolean

Armazena veracidade de expressões, que pode ser:

  • true, equivalente a 1

  • false, equivalente a 0

let verdadeiro = true
console.log(verdadeiro, typeof(verdadeiro)) //true "boolean"

São normalmente utilizadas em conjunto a outros operadores lógicos:

  • ! representa NOT

  • && representa AND

  • || representa OR

let verdadeiro = true
let falso = false

console.log('!v', !verdadeiro)
console.log('!f', !falso)

console.log('v&&v: ', verdadeiro && verdadeiro)
console.log('v&&f: ',verdadeiro && falso)
console.log('f&&f: ', falso && falso)

console.log('v||v: ', verdadeiro || verdadeiro)
console.log('v||f: ',verdadeiro || falso)
console.log('f||f: ', falso || falso)

imprime

!v false
!f true

v&&v:  true
v&&f:  false
f&&f:  false

v||v:  true
v||f:  true
f||f:  false

Verificação de igualdade

  • == Verifica se operandos tem o mesmo valor, independente do tipo.

  • === Verifica se operandos tem o mesmo valor e tipo.

console.log(1 == '1')      //true
console.log(1 === '1')     //false
console.log(1 === 1)       //true

console.log(true == 1)     //true
console.log(true === 1)    //false
console.log(true === true) //true

undefined vs null

undefined Representa o acesso a uma variável existente mas não inicializada.

let nao_inicializada
console.log(nao_inicializada, typeof(nao_inicializada)) // undefined undefined

null é o estado de um objeto que propositalmente não tem conteúdo.

a = null
console.log(a, typeof(a))//null object

Para mais detalhes sobre typeof(null), leia artigo da Mozilla Tudo em JS que não é um dos tipos primitivos acima listados é objeto. Isto será estudado mais a frente.

PreviousJavascriptNextIntrodução ao Javascript - Aprofundado

Last updated