Programação para Web II

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.

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

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.

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

Em determinado momento, surge a necessidade de adicionar um novo elemento à uma página em tempo de execução. Por exemplo, ao clicar em um botão, você deseja adicionar um novo títuloh1 à página.

Apesar de ser possível inserir um novo elemento no DOM apenas alterando o conteúdo de texto, devemos criá-lo usando a interface DOM disponibilizada pelo navegador. Para isso, usaremos a seguinte sintaxe:

var novoTitulo = document.createElement("h1")

Isso faz com que o DOM crie um novo elemento e armazene-o na variável novoTitulo. No entanto, ele não sera renderizado na tela. A razão é que ele foi criado apenas na memória e ainda não foi anexado à árvore do DOM. Faremos isso usando essa operação para acessar obody e adicionar o elemento:

var novoTitulo = document.createElement("h1")
document.body.appendChild(novoTitulo)

Repare que passamos como parâmetro da função appendChild nosso novo títuloh1 recem criado. O novo título será anexado na árvore exatamente dentro do nó do qual a função appendChild foi chamada, ou seja, o nó body. No entanto, ainda não damos nenhum conteúdo de texto para nosso título, vamos fazer isso usando:

var novoTitulo = document.createElement("h1")
document.body.appendChild(novoTitulo)
novoTitulo.textContent = "Meu novo título"

Substituímos o conteúdo da variável novoTitulo, mas como está é apenas um "apontador" para o elemento que foi anexado na árvore, ele será atualizado instantaneamente na página. É possível alterar qualquer atributo de um elemento HTML. Vamos alterar, por exemplo, o iddesse elemento:

novoTitulo.id = "titulo-novo"

Para alterar a classe de um elemento, também podemos usar as funções abaixo:

document.body.classList.add("umaClasse") // adiciona a classe umaClasse ao elemento
document.body.classList.remove("umaClasse") // adiciona a classe umaClasse ao elemento

Para remover um elemento pré-existente na árvore do DOM, podemos utilizar a funçãoremoveChild. Observe este exemplo:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

var pai = document.querySelector("ul")
var filho = pai.querySelector("li")
pai.removeChild(filho)

O código acima remove o primeiro elemento da lista ul. Repare que é necessário recuperar, além do elemento que queremos deletar, o seu pai, pois é ele quem renderiza os elementos filhos (assim como precisamos dele para adicionar um novo nó). No entanto, podemos usar a seguinte sintaxe para encontrar o elemento pai de um nó filho:

var filho = document.querySelector("li")
var pai = filho.parentNode

Dessa forma, o atributo parentNode sempre retorna o elemento pai.

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

Há algum tempo, o javascript dispõe de uma API implementada nos navegadores chamada de fetch. Essa API fornece ao javascript uma interface para criar e manipular requisições pelo protocolo HTTP, fornecendo uma alternativa confiável para gerar requisições locais ou remotas usando este protocolo.

const url = 'http://meusite.com/api/'
var requisicao = fetch(url)
var dado = requisicao.then(function(resposta){
    return resposta.json()
})

dado.then(function(dado){
    console.log(dado)
})

A sintaxe acima realiza uma requisição no endpoint http://meusite.com/api. Enquanto aguardamos a resposta, o servidor da url indicada recebe a requisição, processa e envia de volta para o nosso script os dados solicitados. Neste caso, utilizamos a função json()para tratar os dados que esperamos receber com a codificação JSON.

Repare que ao realizar uma requisição do tipo GET, não há necessidade de enviar mais nenhum dado além da url, pois a finalidade desse método é apenas obter os dados de um serviço.

Utilizando a API FIPE, implemente um script usando javascript que seja capaz de listar todos os modelos de carro correspondentes a uma marca selecionada pelo usuário.

Para selecionar uma marca, o usuário deverá digitar seu nome em um input de texto ou selecioná-la em um droplist. Em ambos os casos deverão ser pré-preenchidos de maneira dinâmica (por script) usando o componente datalist ou o próprio option do elemento select.

Os modelos referentes à marca deversão ser apresentados em uma lista. Para marcas desconhecidas ou que não possuem modelos, deve-se apresentar uma mensagem ao usuário relatando o problema.

Crie um função que gera de números de um sorteio de mega-sena. Como referência, o gerador deve apresentar um conjunto de 6 números de 1 a 60, sendo que cada número é único na sequência e não há possibilidade de repetir estes números em uma mesma jogada (amodal).

Em seguida, crie um formulário onde seja possível ao usuário "comprar tickets", definindo uma sequência amodal e registrando o ticket comprado na tela.

Por fim, a interface deve conter um botão de sorteio, que chama a função de sorteio e identifica se houve algum ticket ganhador

Ex.: O botão de sorteio pode ser implementado com algum tipo de timeout para exibir o ganhador

Crie um formulário com dois campos e um botão capaz de inserir itens e seus respectivos preços em uma lista de compras. Deve-se mostrar o valor total da compra e, caso ultrapasse 50 reais, a cor da fonte do valor total deve ser estilizado em vermelho.

Crie uma função que seja capaz de contar todos os objetos de uma classe no DOM. A função deve retornar um erro caso o número de elementos daquele tipo seja maior do que um valor limite passado como parâmetro.

function contaElementos(elemento, limite){
    // caso o numero de elementos seja maior do que o LIMITE, retornar um erro
}

Crie uma página que permita ao usuário gerenciar uma lista com filmes/jogos. O formulário de inserção deve conter nome, estilo/gênero e URL de imagem (local ou remota).

Cada filme/jogo adicionado deve estar dentro de uma div, e deve apresentar os dados de entrada de forma estilizada (Ex.: a foto deve ser exibida com a tag img).

Crie um formulário que permita ao usuário digitar um texto longo (elementotextarea), e que retorne em uma div a quantidade de ocorrências para cada um dos seguintes itens:espada,arco e escudo

Crie uma pokédex contendo uma objeto com pelo menos 10 pokémons. O objeto deve conter número, nome, tipo e descrição e uma URL (local ou remota) com a imagem do pokémon. O usuário pode excluir, modificar ou inserir novos pokémons(com todas as suas informações). Ao final, deve-se apresentar um botão 'Showcase' que exibe imagem e nome dos pokémons a cada 3 segundos. Utilize CSS para estilizar o projeto à sua maneira =)

As informações podem ser retiradas diretamente desta API: https://pokeapi.co/