HOJE A AULA É TEÓRICA, INTRODUÇÃO AO CONTEÚDO NOVO:

JAVASCRIPT - PROCESSAMENTO SCRIPT LADO CLIENTE

HOJE FAÇA O ESTUDO DAS POSTAGENS DO MATERIAL DE APOIO, ANOTANDO AS
INFORMAÇÕES QUE COMPROVEM SEU ESTUDO.

JAVASCRIPT - é uma linguagem de programação que permite a você

implementar itens complexos em páginas web — toda vez que uma página da web
faz mais do que simplesmente mostrar a você informação estática — mostrando
conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos
2D/3D animados, etc. — você pode apostar que o JavaScript provavelmente está
envolvido.
É a terceira camada do bolo das tecnologias padrões da web, duas das quais
(HTML e CSS)

• HTML é a linguagem de marcação que nós usamos para estruturar e dar

significado para o nosso conteúdo web, por exemplo, definindo parágrafos,
cabeçalhos, tabelas de conteúdo, ou inserindo imagens e vídeos na página.
 • CSS é uma linguagem de regras de estilo que nós usamos para aplicar estilo
ao nosso conteúdo HTML, por exemplo, definindo cores de fundo e fontes, e
posicionando nosso conteúdo em múltiplas colunas.
• JavaScript é uma linguagem de programação que permite a você criar
conteúdo que se atualiza dinamicamente, controlar multimídias, imagens
animadas, e tudo o mais que há de interessante.

As três camadas ficam muito bem uma em cima da outra. Vamos exemplificar com
um simples bloco de texto. Nós podemos marcá-lo usando HTML para dar estrutura
e propósito:

Nós podemos adicionar um pouco de CSS na mistura, para deixar nosso parágrafo
um pouco mais atraente:
E finalmente, nós podemos adicionar JavaScript para implementar um
comportamento dinâmico:

Ao clicar no botão olha abaixo o que acontece

ENTÃO O QUE ELE PODE REALMENTE FAZER?

O núcleo da linguagem JavaScript consiste em alguns benefícios comuns da

programação que permite a você fazer coisas como:

• Armazenar conteúdo útil em variáveis. No exemplo acima, a propósito, nós

pedimos que um novo nome seja inserido e armazenamos o nome em
uma variável chamada nome.
• Operações com pedaços de texto (conhecidos como "strings" em
programação). No exemplo acima, nós pegamos a string "Jogador 1: " e
 concatenamos (juntamos) com a variável nome para criar o texto completo
"Jogador 1: Chris".
• Executar o código em resposta a determinados eventos que ocorrem em uma
página da Web. Nós usamos o click no nosso exemplo acima para que quando
clicassem no botão, rodasse o código que atualiza o texto.
• E muito mais!

O que é ainda mais empolgante é a funcionalidade construída no topo do núcleo

da linguagem JavaScript. As APIs (Application Programming Interfaces - Interface de
Programação de Aplicativos) provêem a você superpoderes extras para usar no seu
código JavaScript.

APIs são conjuntos prontos de blocos de construção de código que permitem que
um desenvolvedor implemente programas que seriam difíceis ou impossíveis de
implementar. Eles fazem o mesmo para a programação que os kits de móveis
prontos para a construção de casas - é muito mais fácil pegar os painéis prontos e
parafusá-los para formar uma estante de livros do que para elaborar o design, sair
e encontrar a madeira, cortar todos os painéis no tamanho e formato certos,
encontrar os parafusos de tamanho correto e depois montá-los para formar uma
estante de livros.

ELAS GERALMENTE SE DIVIDEM EM DUAS CATEGORIAS.

APIs de navegadores já vem implementadas no navegador, e são capazes de expor

dados do ambiente do computador, ou fazer coisas complexas e úteis.
APIs de terceiros não estão implementados no navegador automaticamente, e você
geralmente tem que pegar seu código e informações em algum lugar da Web.

JAVASCRIPT é uma linguagem interpretada — o código é executado de cima para

baixo e o resultado da execução do código é imediatamente retornado. Você não
tem que transformar o código em algo diferente antes do navegador executa-lo.

Linguagens compiladas, por outro lado, são transformadas (compiladas) em algo

diferente antes que sejam executadas pelo computador. Por exemplo, C/C++ são
compiladas em linguagem Assembly, e depois são executadas pelo computador.

JavaScript é uma linguagem de programação leve e interpretada. O navegador

recebe o código JavaScript em sua forma de texto original e executa o script a partir
dele

Códigos do lado do cliente são executados no computador do usuário — quando

uma página web é visualizada, o código do lado do cliente é baixado, executado e
exibido pelo navegador.

Uma página web sem atualizações dinâmicas é chamada de estática — ela só

mostra o mesmo conteúdo o tempo todo.

A palavra dinâmico se refere a habilidade de atualizar a exibição de uma página

web/app para mostrar coisas diferentes em circunstâncias diferentes, gerando novo
conteúdo como solicitado

JAVASCRIPT INTERNO
JAVASCRIPT EXTERNO

VANTAGENS DE USAR JAVASCRIPT

Saber como programar em JavaScript e usar a linguagem de programação em um

site traz uma série de vantagens ao desenvolvedor e ao usuário que acessa uma
página dinâmica. As são:

• Alta compatibilidade com plataformas, sistemas e navegadores web.

• É mais leve e rápida que outras linguagens de programação.
• Faz com que as páginas na internet sejam mais dinâmicas e interativas,
características essenciais do UX

• Os navegadores interpretam a linguagem por conta própria, tirando a

necessidade de usar um compilador.
• Erros de programação são mais fáceis de encontrar e de corrigir.
• Entre as mais populares, é a linguagem de programação mais fácil de
aprender.
• Executa comportamentos específicos em uma página, como cliques e efeitos
personalizados.

DESVANTAGENS DO JAVASCRIPT

Ainda que seja uma das linguagens de programação mais usadas, o JavaScript
também tem alguns pontos fracos. Os mais significativos são:

• É vulnerável brechas de segurança nos sistemas, navegadores e páginas

envolvidas.
• Pode ser usada para executar programas maliciosos sem que o usuário saiba.
• Pode ser renderizada de maneiras diferentes pelos dispositivos compatíveis,
causando problemas de desempenho.
 • Nem sempre compatível com todos os navegadores e sistemas existentes.

MENSAGENS SECRETAS NO CONSOLE

É comum querermos dar uma olhada no valor de alguma varíavel ou resultado de

alguma operação durante a execução do código. Nesses casos, poderíamos usar
um alert. o console do navegador pode ser utilizado no lugar do alert para imprimir
essa mensagem:

var mensagem = "Olá mundo";

console.log(mensagem);

Para permitir alterações na página, ao carregar o HTML da página, os navegadores

carregam em memória uma estrutura de dados que representa cada uma das nossas
tags no JavaScript. Essa estrutura é chamada de DOM (Document Object Model).

Ao criarmos uma função, simplesmente guardamos o que estiver dentro da função,

e esse código guardado só será executado quando chamarmos a função, como no
seguinte exemplo:

function mostraAlerta() {
alert("Funciona!");
}

// fazendo uma chamada para a função mostraAlerta, que será executada nesse
momento
mostraAlerta()

Para chamar a função mostraAlerta só precisamos utilizar o nome da função e logo

depois abrir e fechar parênteses.

QUAIS EVENTOS EXISTEM?

Existem diversos eventos que podem ser utilizados em diversos elementos para que
a interação do usuário dispare alguma função:

• oninput: quando um elemento input tem seu valor modificado

• onclick: quando ocorre um click com o mouse
• ondblclick: quando ocorre dois clicks com o mouse
• onmousemove: quando mexe o mouse
• onmousedown: quando aperta o botão do mouse
• onmouseup: quando solta o botão do mouse (útil com os dois acima para
gerenciar drag'n'drop)
• onkeypress: quando pressionar e soltar uma tecla
• onkeydown: quando pressionar uma tecla
• onkeyup: quando soltar uma tecla
• onblur: quando um elemento perde foco
• onfocus: quando um elemento ganha foco
• onchange: quando um input, select ou textarea tem seu valor alterado
• onload: quando a página é carregada
• onunload: quando a página é fechada
• onsubmit: disparado antes de submeter o formulário (útil para realizar
validações)

EXEMPLOS PRÁTICOS

Segue abaixo alguns links com exemplos práticos da aplicação de JavaScript.

CLIQUE EM CADA LINK E VEJA OS EXEMPLOS

• Exemplo de Boas Vindas!

Exemplo de Botão que Roda texto!

Exemplo de Calculadora que Calcula o Tempo de Vida!

Exemplo de Identificador de Navegador!

Exemplo de Jogo de Batalha Naval!

Exemplo de Jogo da Velha!

Exemplo de Menu com Abas!

Exemplo de Página Matrix!

Exemplo de Tempo de Acesso!

JAVASCRIPT É A MESMA COISA QUE JAVA?

Não, JavaScript é mais simples que Java. Aprender JavaScript é o melhor começo
se você quer aprender Java, C, C++, PHP, pois a sintaxe (forma de escrever a
linguagem) é semelhante.

ONDE COLOCO O CÓDIGO JAVASCRIPT?

Há mais três diferentes maneiras de colocar o código JavaScript na página

Uma delas se digita o código JavaScript dentro de uma página HTML.

O Código JavaScript fica

Entre o <script> e o </script>.

Ficaremos com a seguinte estrutura:

• Exibe uma janela com a frase Minha primeira mensagem! com apenas um
botão de OK.
• Exemplo básico, manipulação de variável

Entendendo o código:

a = 2 Faz com que a variável a receba o número 2.

b = 9 Faz com que a variável b receba o número 9.
c = a + b Faz com que a variável c receba o resultado de a + b.
alert(c) Faz com que uma janela exiba o conteúdo da variável c.