Desenvolvimento Web

JavaScript (JS)

Porfº Msc. Henderson Matsuura Sanches

A Historia do JavaScript
●
No início da Internet as páginas eram pouco ou
nada interativas, eram documentos que apresentavam
seu conteúdo exatamente como foram criados para
serem exibidos no navegador. Existiam algumas
tecnologias para a geração de páginas no lado do
servidor, mas havia limitações no que diz respeito a
como o usuário consumia aquele conteúdo. Navegar
através de links e enviar informações através de
formulários era basicamente tudo o que se podia fazer.
A Historia do JavaScript
●
Visando o potencial da Internet para o público geral e a
necessidade de haver uma interação maior do usuário
com as páginas, a Netscape (atual Firefox), criadora do
navegador mais popular do início dos anos 90, de
mesmo nome, criou o Livescript, uma linguagem
simples que permitia a execução de scripts contidos nas
páginas dentro do próprio navegador.
A Historia do JavaScript
●
Aproveitando o iminente sucesso do Java, que vinha
conquistando cada vez mais espaço no mercado de
desenvolvimento de aplicações corporativas, a Netscape logo
rebatizou o Livescript como JavaScript num acordo com a Sun
para alavancar o uso das duas. A então vice-líder dos
navegadores, Microsoft, adicionou ao Internet Explorer o suporte
a scripts escritos em VBScript e criou sua própria versão de
JavaScript, o Jscript.
●
JavaScript é a linguagem de programação mais popular no
desenvolvimento Web. Suportada por todos os navegadores,
a linguagem é responsável por praticamente qualquer tipo
de dinamismo que queiramos em nossas páginas.
Caracteristica da Linguagem
●
O JavaScript, como o próprio nome sugere, é uma linguagem
de scripting. Uma linguagem de scripting é comumente definida
como uma linguagem de programação que permite ao
programador controlar uma ou mais aplicações de terceiros. No
caso do JavaScript, podemos controlar alguns comportamentos
dos navegadores através de trechos de código que são enviados na
página HTML.
●
Outra característica comum nas linguagens de scripting é que
normalmente elas são linguagens interpretadas, ou seja, não
dependem de compilação para serem executadas. Essa
característica é presente no JavaScript: o código é interpretado e
executado conforme é lido pelo navegador, linha a linha, assim
como o HTML.
Característica da Linguagem
●
O JavaScript também possui grande tolerância a erros,
uma vez que conversões automáticas são realizadas
durante operações. Como será visto no decorrer das
explicações, nem sempre essas conversões resultam em
algo esperado, o que pode ser fonte de muitos bugs,
caso não conheçamos bem esse mecanismo.
●
O script do programador é enviado com o HTML para o
navegador, mas como o navegador saberá diferenciar o
script de um código html? Para que essa diferenciação seja
possível, é necessário envolver o script dentro da tag
<script> .
Console do Navegador
• Existem várias formas de executar códigos JavaScript
em um página. Uma delas é executar códigos no que
chamamos de Console. A maioria dos navegadores
desktop já vem com essa ferramenta instalada. No
Chrome, é possível chegar ao Console apertando F12 e
em seguida acessar a aba "Console"ou por meio do
atalho de teclado Control + Shift + C; no Firefox, pelo
atalho Control + Shift + K.
Sintaxe Básica
• Operadores

➔ Podemos somar, subtrair, multiplicar e dividir como em qualquer linguagem:Teste algumas contas digitando diretamente no
console:

> 12 + 13

25

> 14 * 3

42

> 10 - 4

> 25 / 5

> 23 % 2

1
Sintaxe Básica
• Variáveis
➔ Para armazenarmos um valor para uso posterior, podemos criar uma variável:
> var resultado = 102 / 17;
undefined
• No exemplo acima, guardamos o resultado de 102 / 17 na variável resultado . O resultado de criar
uma variável é sempre undefined. Para obter o valor que guardamos nela ou mudar o seu
valor,podemos fazer o seguinte:
> resultado
6
> resultado = resultado + 10
16
> resultado
16
Sintaxe Básica
• Também podemos alterar o valor de uma variável
usando as operações básicas com uma sintaxe bem
compacta:
> var idade = 10; // undefined
> idade += 10; // idade vale 20
> idade -= 5; // idade vale 15
> idade /= 3; // idade vale 5
> idade *= 10; // idade vale 50
Tipos de Dados
●
Não são apenas números que podemos salvar numa
variável. O JavaScript tem vários tipos de dados.
➢
Number
●
Com esse tipo de dados é possível executar todas as
operações que vimos anteriormente:
var pi = 3.14159;
var raio = 20;
var perimetro = 2 * pi * raio
Tipos de Dados
➢
String
●
Uma string em JavaScript é utilizada para armazenar trechos de texto:
var empresa = "Caelum";
●
Para exibirmos o valor da variável empresa fora do console, podemos executar o seguinte
comando: alert(empresa);
●
O comando alert serve para criação de popups com algum conteúdo de texto que
colocarmos dentro dos parênteses. O que acontece com o seguinte código?
var numero = 30;
alert(numero)
●
O número 30 é exibido sem problemas dentro do popup. O que acontece é que qualquer
variável pode ser usada no alert . O JavaScript não irá diferenciar o tipo de dados que está
armazenado numa variável, e se necessário, tentará converter o dado para o tipo desejado.
Tipos de Dados
➢
Automatic Semicolon Insertion (ASI)
●
É possível omitir o ponto e vírgula no final de cada
declaração. A omissão de ponto e vírgula funciona
no JavaScript devido ao mecanismo chamado ASI.
A Tag Script
●
O console nos permite testar códigos diretamente no
navegador. Porém, não podemos pedir aos usuários do
site que sempre abram o console, copiem um código e
colem para ele ser executado.
●
Para inserirmos um código JavaScript em uma página, é
necessário utilizar a tag <script>:
<script>
alert("Olá, Mundo!");
</script>
A Tag Script
●
A tag <script> pode ser declarada dentro da tag <head> assim como na tag <body> , mas devemos ficar atentos, porque o código é lido imediatamente dentro do navegador. Veja a consequência disso nos dois
exemplos abaixo:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Aula de JS</title>

<script>

alert("Olá, Mundo!");

</script>

</head>

<body>

<h1>JavaScript</h1>

<h2>Linguagem de programação</h2>

</body>

</html>
A Tag Script
●
Repare que, ao ser executado, o script trava o
processamento da página. Imagine um script que
demore um pouco mais para ser executado ou que
exija alguma interação do usuário como uma
confirmação. Não seria interessante carregar a
página toda primeiro antes de sua execução por
uma questão de performance e experiência para o
usuário?
●
Para fazer isso, basta removermos o script do <head> ,
colocando-o no final do <body> :
A Tag Script
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Aula de JS</title>
<script>
alert("Olá, Mundo!");
●
</script>
●

</head>
<body>
<h1>JavaScript</h1>
<h2>Linguagem de programação</h2>

</body>
</html>
●
Devemos sempre colocar o script antes de fecharmos a tag </body> ? Na maioria esmagadora das vezes sim.
JavaScript em Arquivo Externo
●
Se o mesmo script for utilizado em outra página, como fazemos?
Imagine ter que reescrever o script toda vez que ele for necessário.
Para não acontecer isso, é possível importar scripts dentro da
página utilizando também a tag <script> :
●
No arquivo HTML
<script type="text/javascript" src="js/hello.js"></script>
●
Arquivo externo js/hello.js
alert("Olá, Mundo!");
●
Com a separação do script em arquivo externo é possível
reaproveitar alguma funcionalidade em mais de uma página.
Mensagens Secretas no
Console
●
É comum querermos dar uma olhada no valor de alguma
variável ou resultado de alguma operação durante a
execução do código. Nesses casos, poderíamos usar
um alert. Porém, se esse conteúdo deveria somente ser
mostrado para o desenvolvedor, o console do navegador
pode ser utilizado no lugar do alert para imprimir essa
mensagem:
var mensagem = "Olá mundo";
console.log(mensagem);
Document Object Model (DOM)
●
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. Essa estrutura pode ser acessada
através da variável global document.
●
O termo "documento" é frequentemente utilizado em
referências à nossa página. No mundo front-end,
documento e página são sinônimos.
querySelector
●
Antes de sair alterando nossa página, precisamos em primeiro lugar
acessar no JavaScript o elemento que queremos alterar. Como
exemplo, vamos alterar o conteúdo de um título da página. Para
acessar ele:
document.querySelector("h1")
●
Esse comando usa os seletores CSS para encontrar os elementos
na página. Usamos um seletor de nome de tag mas poderíamos ter
usado outros:
document.querySelector(".class")
document.querySelector("#id")
Elemento da Página como
Variável
●
Se você vai utilizar várias vezes um mesmo elemento da
página, é possível salvar o resultado de qualquer querySelector
numa variável:
var titulo = document.querySelector("h1")
●
Executando no console, você vai perceber que o elemento
correspondente é selecionado. Podemos então manipular seu
conteúdo. Você pode ver o conteúdo textual dele com:
titulo.textContent
●
Essa propriedade, inclusive, pode receber valores e ser alterada:
titulo.textContent = "Novo título"
querySelectorAll
• As vezes você precisa selecionar vários elementos na
página. Várias tags com a classe .cartao por exemplo. Se
o retorno esperado é mais de um elemento, usamos
querySelectorAll que devolve uma lista de elementos
(array).
document.querySelectorAll(".cartao")
• Podemos então acessar elementos nessa lista através da
posição dele (começando em zero) e usando o colchetes:
// primeiro cartão
document.querySelectorAll(".cartao")[0]