Programação para Web I

O JavaScript é uma linguagem de programação dinâmica que foi criada por BrendanEich, também co-fundador do projeto Mozilla.

A flexibilidade do JavaScript permitiu que ele fosse utilizado em diversos ambientes,que vão muito além da interação dinâmica com páginas HTML, pro qual foi criado.

Atualmente, o JavaScript pode ser utilizado para construir aplicações para diversosdispositivos (deskop, mobile, web...) e diversos ecosistemas.

O JavaScript é padronizado pela ECMA International, uma organização parapadronização de sistemas de comunicação. Essa padronização é publicada através deespecificações, que por sua vez são utilizadas por empresas e projetos para projetarsuas próprias implementações do javascript.

Para quem já programa em outras linguagens, é muito importante lembrar que o javascript possui muitas semelhanças e diferenças entre outras linguagens, por exemplo:

• O javascript é uma linguagem interpretada e estruturada;
• É multiparadigma (podemos aplicar orientação à objeto ou procedural); [mais]
• Não exige o uso de ponto-e-virgula (;). Seu uso é necessário apenas quando desejamos separar instruções em uma mesma linha
• É dinamicamente e fracamente tipada;
• Foi criada para trabalhar com operações no navegador;
• É atualmente utilizada nos mais diversos ambientes (do frontend ao backend);
• O javascript é case-sensitive, portanto diferencia maiúsculas e minúsculas;

O Javascript ocupa atualmente a 7ª posição (relatório de agosto de 2021 da TIOBE Index) no ranking de linguagens mais populares, posição que tem se mantido estável desde o início do século XXI. No entanto, quando tratamos apenas linguagens para a Web, a linguagem javascript ganha um destaque único por ser, até o momento, a única linguagem largamente disponível nos navegadores. Essa condição faz do javascript uma linguagem essencial para quem trabalha com desenvolvimento de interfaces web (front-end), fato que pode ser comprovado através da primeira posição alcançada pela linguagem em serviços como StackOverflow e Github.

Em 2021, a linguagem (e vagas de emprego) deve continuar sendo impulsionada pela imensa quantidade de bibliotecas e frameworks desenvolvidos na linguagem, como os populares frameworks React.js, Vue.js e Angular.

Veja mais nesse Artigo

Apesar de compartilharem nomes parecidos, as linguagens javascript e java possuem características bastante diferentes. A lista abaixo descreve algumas das diferenças mais latentes entre as duas linguagens:

• Apesar da similaridade entre os nomes, ambas as linguagens são totalmente independentes e não possuem qualquer tipo de relação histórica ou tecnológica;
• A linguagem javascript foi criada para rodar nos navegadores, enquanto a linguagem java foi concebida para funcionar em máquinas virtuais Java;
• Para rodar fora dos navegadores e em ambiente de servidores, é necessário implementações de interpretadores javascript como o Node.js;
• A linguagem java pode ser utilizada para criar serviços web, mas não possui suporte para ser executada diretamente em navegadores;
• O código fonte java precisa ser transformado em bytecode, enquanto no javascript isto é opcional;
• Java é uma linguagem estritamente orientada à objeto e fortemente tipada, enquanto javascript é mais flexível quanto ao paradigma (apesar de ser fortemente funcional);

É importante lembrar que essa comparação não se trata de uma batalha entre ambas as linguagens, já que, exatamente pelas suas diferenças, temos utilizações por vezes bastante diferentes.

A sintaxe do javascript é geralmente mais simples e mais flexível que grande parte das linguagens de programação populares. Abaixo um exemplo de um pequeno programa escrito em javascript:

const cities = require('cities')
const cidadesLista = [587, 589, 600]
        
function validaCidade(cityId) {
    const city = cities.getById(cityId)
    if(city.length == 0){ 
        return false
    }
    return true
}

var sucesso = false
for(let cidadeId of cidadesLista){
    sucesso = validadeCidade(cidadeId)

    if(!sucesso){
        break
    }
}

console.log(sucesso)

Algumas características de sintaxe da linguagem:

• Todos tipos números são representados pelo tipo number e são escritos com ponto como separador decimal (ex.: 10.50, 5, -20)
• Variáveis podem ser declaradas com a palavra var (para variáveis acessíveis em todo o escopo) e let (acessíveis apenas dentro do mesmo escopo)
• Um escopo no javascript é geralmente o espaço entre limitação das aspas
• O uso de ponto e virgula (;) é totalmente opcional
• O javascript é caseSensitive

Há duas formas de declarar variáveis no javascript. A primeira é usando a palavra var, que é de escopo da função.

var minhaVariavel; // declara variável
minhaVariavel = 10; // atribui valor à variável
minhaVariavel = "teste"; // atribui um novo à variável
var nome = "chapolin"; // declara e atribui valor à variável

A palavra reservada let declara variáveis acessíveis apenas no escopo mais próximo onde foram declaradas.

function relatorio(){
    if(true){
        let nome = 'kratos'
        var poder = 40

        console.log(nome) // imprime normalmente
        console.log(poder) // imprime normalmente
    }

    console.log(nome) // erro de referencia
    console.log(poder) // imprime normalmente
}

relatorio()

console.log(nome) // erro de referencia
console.log(poder) // erro de referencia

A declaração usando a palavra let é geralmente recomendada pois evita desentendimento e reatrbuição de variáveis com escopo de função (var).

Apesar de ser uma linguagem de tipagem dinâmica (os tipos de dados são automaticamente determinados), o JavaScript possui sete tipos de dados padrão:

• Boolean
• Null
• Undefined
• Number
• String
• Array
• Object
• Function*

Exemplos:

var chovendo = false //bool
var inimigo = null //null
var casa =  //undefined
var pi = 3.14 //number
var nome = "ramon" //string
var lista = ["ramon", 0, null] //array
var data = {
    serie: 1,
    curso: "computacao"
} //object
var soma = function(a, b){
    return a + b
} //function

Veja mais em Mozilla - Javascript Data Structures

Apesar de não ser considerado oficialmente um tipo de variável, uma das características do javascript é a possibilidade de atribuir funções inteiras à variáveis e constantes.

Operadores Matemáticos:

5 + 3 //soma
10 - 5 //subtração
8 * 2 //multiplicação
27 / 9 // divisão
12 % 2 // módulo

Operadores Lógicos:

= //atribuição
== //igualdade
=== //igualdade estrita
! // negacação

Enquanto o operador de igualdade não leva em consideração o tipo de dado comparado, o operador de igualdade estrita retorna verdadeiro apenas se o conteúdo e tipode ambos os dados são idênticos. A negação de igualdade e negação estrita é realiza respectivamente com!= e !==

IF/ELSE:

if(condicao){
    // caso verdadeiro
} else {
    // caso falso
}

A estrutura clássica utilizada pela maioria das linguagens, que tem como objetivo rotear o fluxo de execução da aplicação.

FOR:

for(var index = 0; index < 50; index++){
    // iteração
}

O for clássico utilizado pela maioria das linguagens para definir um contador e um incrementador, que tem como objetivo controlar o fluxo de repetição.

FOR-Of:

for(var item of vetor){
    // iteração
}

Esse for é um caso especial muito útil para iterar sobre dados do tipo Enumerable (do qual os arrays, strings, objects e outros fazem parte). Dessa forma, podemos iterar sobre todas as posições de um vetor, por exemplo, sem saber seu tamanho. A cada iteração a variável chave receberá o valor de uma nova posição do vetor.

Veja mais em Mozilla - for ... of

FOR-In:

for(var chave in objeto){
    // iteração
}

Assim como o for-in, o for-of também permite iterar sobre determinados tipos de dados. Todos os dados do tipo Iterable (do qual objects e arrays fazem parte) podem ser iterados por essa estrutura. A grande diferença é que quando utilizado com o tipo de dado objects (que não pode ser iterado com for-of), o valor recebido será a chave de cada propriedade, e não seu conteúdo.

Veja mais em Mozilla - for ... in

WHILE:

while(condicao){
    // iteração
}

Outra estrutura clássica utilizada para repetição. Seu fluxo de execução depende apenas da condição definida como parâmetro.

Funções callback no javascript são funções passadas como argumento para outra função, de forma que seja invocada a partir desta.

var callbackChuva = function callbackChuva(){
    console.log('Está chovendo')
}

var callbackSol = function callbackSol(){
    console.log('Está fazendo sol')
}

function previsao(callback){
    callback()
}

previsao(callbackSol)

Este é um exemplo de callback executado de forma síncrona, ou seja, a sequência das funções é executada exatamente na ordem em que são chamadas. No entanto, a utilização de callbacks é largamente utilizada na criação de operações assíncronas, que acontecem de maneira paralela à execução do sistema.

A função setTimeout permite adicionar, como parâmetro, uma função a ser executada após período de tempo também determinado em parâmetro. Essa função será chamada após o tempo determinado e apenas uma vez. A assinatura da função é: setTimeout(funcaoCallback, tempoEmMilisegundos)

var resultado = function resultado(){
    console.log('Finalizado')
}

console.log(1)
setTimeout(resultado, 1000) // A função resultado será executada após 1000 milisegundos
console.log(2)
console.log(3)

Neste exemplo, a função resultado será chamada apenas após 1 segundo. Enquanto isso, a execução das próximas linhas não é interrompida.

A função setInterval permite adicionar, como parâmetro, uma função a ser executada em um período de tempo também determinado em parâmetro. A assinatura da função é: setInterval(funcaoCallback, tempoEmMilisegundos)

var loop = function gameLoop(){
    console.log('Loop de um jogo completado com sucesso')
}

setInterval(loop, 5000) //A função gameLoop será executada em intervalos de 5 em 5 segundos

Neste exemplo, criamos uma função que imprime no console, a cada 5 segundos, a string: Loop de um jogo completado com sucesso

Para começar a escrever código JavaScript em uma página HTML, podemos de forma simples utilizar o elemento script para criar um novo script no mesmo documento ou apontar para um documento JavaScript externo.

Para referênciar um documento javacript pré-existente, podemos usar a sintaxe abaxo:

<script src="olamundo.js"></script>

Para escrever um script integrado no próprio documento HTML, usamos a seguinte sintaxe:

<script>
    // Seu código aqui
</script>

Por boa prática, é comum encontrar estes elementos em dois locais específicos: dentro dohead ou logo abaixo do fim do body. Também podemos utilizar o atributo booleano async dentro do elemento script para indicar que o respectivo script será executado juntamente com o carregamento da página (dessa forma, ao encontrar um script, o navegador não para a leitura do HTML).

Geralmente utilizamos a segunda opção para importações ou operações simples em um documento HTML, enquanto realizamos a referência apresentada no primeiro exemplo para estruturas mais complexas. É importante lembrar que a ordem com que os elementos são utilizados pode ter efeitos no funcionamento dos scripts. Uma variável instanciada em um script no topo da página, por exemplo, estará automaticamente disponível para os scripts declarados logo abaixo.

O inspector é uma das principais ferramentas aliadas do programador quando desenvolve interfaces para o navegador. É através dele que temos acesso a tudo que o navegador é capaz de interpretar sobre a página, seus erros e suas requisições. Além disso, o Inspector permite executar código javascript e alterar a estrutura e estilização da página em tempo de execução (enquanto a página está aberta), tornando-se uma ferramenta perfeita para o aprendizado.

Atalhos em cada navegador

Para abrir o inspector através de atalhos:

• No Firefox, Chromium, Google Chrome e Opera, use F12

Uma das principais formas de analisar um script javascript é utilizando da ferramenta Console, presente na maioria dos principais navegadores web. Essa ferramenta permite que o desenvolvedor (ou mesmo o usuário) acesse várias informações sobre a página aberta atualmente. Na aba Console podemos visualizar todo tipo de saída da página, como logs e erros.

É possível ainda realizar comandos e escrever scripts inteiros através desta aba. Alguns comandos interessantes que podem ser visualizados no console podem ser vistos abaixo:

parseInt(texto) // analisa string e retorna um inteiro
parseFloat(texto) // analisa string e retorna flutuante
umNumero.toString() // converte o valor de umNumero para texto
flutuante.toFixed(2) // converte um numero para um ponto flutuante de 2 casas
Math.random() // gera um número aleatório de 0 a 1
console.log(texto) //imprime no console
console.error(texto) //imprime um erro no console
prompt(texto) // Aguarda entrada de dados no console
alert(texto) // exibe um alerta no navegador com o texto no parametro
setTimeout(callback, tempo) // define um tempo de espera (milisegundos) para executar a função callback
setInterval(callback, tempo) // executa a função callback a cada intervalo de tempo (milisegundos)

Acessar a estrutura de uma página é possível pelo javascript de varias maneiras, uma delas é através do uso do método querySelector(seletor). Ao ser chamado, passando como parâmetro um seletor, é possível recuperar o primeiro elemento encontrado dentro do documento.

var elementoHTML = document.querySelector(".arena")

No exemplo acima, utilizamos o seletor .arena para recuperar o primeiro elemento de um documento HTML que possua a class arena (class="arena")

Outro método que pode ser utilizado é o querySelectorAll(selector), que retorna TODOS os elementos encontrados, dentro de um NodeList, estrutura iterável parecida com um vetor

Outros métodos mais primitivos como getElementById ou getElementByTagName também podem ser utilizados com a mesma finalidade. Mesmo sendo mais genéricos, o método querySelector possui um desempenho muito próximo destes métodos anteriores, sendo a diferença de performance geralmente ignorada.

Quando acessamos um elemento HTML em qualquer página através do javascript, o dado retornado é geralmente apresentado na forma de Element ou HTMLElement. Ainda que não represente um tipo de dado, esse objeto é uma representação formalizada de um elemento contendo todos seus atributos e funções especificas que podem ser chamadas a partir desse método. Dessa forma, podemos acessar atributos como por exemplo class e id de qualquer elemento HTML.

var elementoHTML = document.querySelector(".arena")
elementoHTML.id // Ex.: arena01
elementoHTML.classList // Ex.: DOMTokenList["arena"]

Outros atributos especificos de cada elemento também podem ser facilmente acessados diretamente a partir dele:

var inputUsuario = document.querySelector("#inputUser")
inputUsuario.value // Ex.: "Jackie Chan"
inputUsuario.type // Ex.: "text"

Mais informações sobre o element

No navegador, eventos de elementos podem ser escutados e repassados aos scripts.

Uma das formas de programar uma função para ser executada em um evento é identificando-a diretamente no HTML do evento

<body>
    <button type="button" onClick="imprimir()">Enviar</button>
</body>

function imprimir(){
    console.log("Botão apertado!")
}

No entanto, em alguns casos podemos optar (ou necessitar) por definir a escuta de um evento diretamente no javascript. Para isso, precisaremos resgatar o elemento HTML e definir uma função a ser executada, que pode ser feita da seguinte forma:

function bgChange(evento) {
  evento.preventDefault()
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  evento.target.style.backgroundColor = rndCol;
  console.log(evento);
}

btn.addEventListener('click', bgChange);

A função preventDefault(), que é chamada a partir do objeto evento serve para garantir que o navegador não irá executar nenhum processo padrão relacionado ao evento, o que acontece por exemplo ao submeter um formulário (uma requisição é automaticamente realizada pelo navegador)

Mais informações sobre o eventos

Crie um script que receba uma idade através do comando prompt no seguinte formato: 25 anos. Em seguida, divida o número por 2 (e mostre o valor no console) e imprima na página Maior de idade ou Menor de idade caso o resultado seja maior ou menor que 18.

Crie um script capaz de receber do usuário o nome de uma série e a quantidade de episódios já assistidos. O script deve ser capaz de verificar a série e calcular a quantidade total de minutos que o usuário deve gastar para terminar de assistí-la. O script deve ter pelo menos 5 séries diferentes cadastradas, contendo Nome, Número de Episódios e Duração dos Episódios (em minutos), como no exemplo abaixo:

var listaSeries = [
    ['Inuyasha', 167, 20],
    ['Naruto', 220, 20],
    ['Sword Art', 25, 25],
    ['Game of Thrones', 73, 50],
    ['The Mandalorian', 16, 45],
]

Repare que a ordem da lista é, respectivamente: Nome, Número de Episódios e Duração dos Episódios (em minutos)

No entanto, você pode criar sua própria estrutura de dados para receber a lista de Séries. O modelo para a resposta no console deve ser:

Você precisa de 120 horas para terminar de assistir essa série

Crie um formulário em HTML que receba nome e email e um botão de enviar. Ao clicar no botão enviar, todo o conteúdo da página deve ser substituído pelo modelo:

Nome do Usuário: Hans Solo
Email: hans@solo.com

Você foi descadastrado da lista de spam com sucesso!

O conteúdo de Nome do Usuário e Email devem ser substituídos, respectivamente, pelos valores inseridos pelo usuário no formulário.

Crie um script javascript que seja capaz alterar o valor de uma lista ol de uma página HTML contendo 5 items (li), como no exemplo abaixo:

<ol>    
    <li id="primeiro"><li>
    <li id="segundo"><li>
    <li id="terceiro"><li>
    <li id="quarto"><li>
    <li id="quinto"><li>
<ol>

A lista deve ser alterada usando uma estrutura de repetição que seja capaz de iterar sobre o seguinte vetor:

var minhaLista = [
    'Max Verstappen',
    'Charles Leclerc',
    'Lewis Hamilton',
    'Valteri Bottas',
    'Daniel Riccardo'
]

O script deve ser inserido na página HTML de forma a alterar seu conteúdo no momento do carregamento. Tanto o acesso aos itens da lista (li) quanto a alteração do seu conteúdo deve ser feita usando estruturas de repetição.

Nos respectivos scripts abaixo, encontre o erro ou complemente o código criando um novo script com a correção, comentando a solução, de modo que ela retorne o resultado esperado. Você não deve retirar nenhuma informação dos códigos abaixo, apenas adicionar:

pikachu - lvl 30
caterpie - desclassificado
pidgey - lvl 12
charmander - lvl 20

Log 1 = Troll (Força: 5.0) - Vida 100
Log 2 = Troll (Força: 25.5) - Vida 100
Log 3 = Troll (Força: 48.2) - Vida 100
...
Log n = Troll (Força: 50) - Vida 100