Estrutura de Dados com JavaScript

Prof.º Barreto
 Estrutura de Dados

• Estrutura de dados é uma maneira

específica de organizar, gerenciar e
armazenar dados para que possam ser
acessados e modificados de forma
eficiente.

• A escolha da estrutura de dados pode

afetar significativamente a performance
dos algoritmos utilizados em uma
aplicação.
2
 Tipos de Estrutura de Dados

 Array (Vetor): Uma coleção de elementos identificados por

índices. Todos os elementos têm o mesmo tipo de dados e são
armazenados em locais de memória contíguos.

 Linked List (Lista Encadeada): Uma coleção de elementos

chamados nós, onde cada nó contém um valor e uma
referência (ou link) para o próximo nó na sequência.

 Stack (Pilha): Uma coleção de elementos que segue o princípio

LIFO (Last In, First Out). Os elementos são adicionados e
removidos do topo da pilha.

 Queue (Fila): Uma coleção de elementos que segue o princípio

FIFO (First In, First Out). Os elementos são adicionados na
parte traseira da fila e removidos da frente.

3
 Tipos de Estrutura de Dados
 Tree (Árvore): Uma estrutura hierárquica onde cada elemento
(nó) tem um valor e referências para zero ou mais nós filhos. Um
tipo especial de árvore é a árvore binária, onde cada nó tem no
máximo dois filhos.

 Graph (Grafo): Uma coleção de nós (ou vértices) e arestas que

conectam pares de nós. Pode ser usado para representar relações
entre diferentes objetos.

 Hash Table (Tabela Hash): Uma estrutura que mapeia chaves para
valores. Utiliza uma função hash para calcular um índice em um
array de buckets ou slots, de onde o valor desejado pode ser
encontrado.

 Heap: Uma árvore binária especializada que satisfaz a

propriedade de heap. No caso de um max-heap, para cada nó 𝑖𝑖, o
valor de 𝑖𝑖 é maior ou igual aos valores dos filhos de 𝑖𝑖.
4
 Estrutura de Dados

• Cada estrutura de dados possui suas

próprias vantagens e desvantagens em
termos de complexidade de tempo e
espaço para diferentes operações
(inserção, deleção, pesquisa, etc.).

• A escolha da estrutura de dados adequada

depende do problema específico que se
está tentando resolver.

5
JavaScript

6
 Camadas HTM, CSS e
JavaScript

O HTML
fornece a
parte
estrutural da
pagina web O JavaScript
fornece a
interação e
comportamento
O CSS da
da pagina web
o estilo a
pagina
web

7
 Introdução

 O JavaScript foi criado pela Netspace em 1995 e

era chamado inicialmente de LiveScript, foi criada
para dar vida ao HTML - Linguagem de Marcação
de Hipertexto - trazendo para a tela os movimentos
(interações) , funções de validação de formulários,
além de outras facilidades como envio de e-mail
automatizado, mensagens no rodapé,e pequenas
aplicações relacionadas a layouts da pagina.

8
 Introdução

 A linguagem JavaScript foi criada para absorver

algumas idéias do Java, como a clareza, a sintaxe,
no entanto não confunda a linguagem Java
desenvolvida pela SUN que em 2008 foi adquirido
pela empresa Oracle Corporation. Java e
JavaScript, são 2 linguagens distintas sendo uma
compilada e a outra interpretada .

9
 Introdução

 O JavaScript promove interatividade e

dinamicidade em páginas HTML, sendo possível,
com ele, manipular a estrutura da página de modo a
obter recursos interativos.

10
 Introdução

JavaScript é uma linguagem Cliente-Servidor

11
Estrutura da Linguagem

12
 Java Script

 Java Script é uma linguagem leve, segue o padrão

ECMA-262, não precisa ser compilada, é somente
interpretada e serve para fins como:
 Inserir um texto dinâmico em uma página;

 Reagir a eventos, como carregar uma pagina;

 Pode ler e escrever elementos HTML;

 Pode ser usado para validar dados de um formulário;

 Pode detectar eventos do mouse;

 Pode ser usado para criar cookies.

13
 Função e Aplicação
Função
 Os programas feitos em JavaScript permite que
manipulemos quase tudo no browser, desde a validação de
formulário, apresentação de novas janelas, criação de
camadas até pequenos jogos.
Aplicação
 A primeira coisa a saber é que o JavaScript é uma
linguagem “Case Sensitive”, ou seja maiúsculas são
reconhecidas diferentemente de minúsculas, por exemplo:
“ALERT” e “alert” são diferentes.
14
 Inserindo o Código

 Os códigos de JavaScript podem ser colocados

em qualquer lugar do código, mas para que
fiquem mais organizados e para melhor
manutenção colocamos a maior parte do código
dentro da tag <head>.

 Para criar o JavaScript utiliza-se a tag <script>

desta forma, colocando a cada fim de linha um
(ponto e vírgula): 15
 Sintaxe Basica

 <html>
<head>
<script>
// aqui vai o código
</script>
</head>
<body>
</body>
</html>
16
 Inserção do Script
 Existem três maneiras de se inserir um código, na linguagem
JavaScript, em um documento HTML.

Inserindo apartir da tag - <script>

Inserindo apartir de um arquivo externo

Ex: <SCRIPT LANGUAGE=JAVASCRIPT SRC="BIBLIO.JS" > </SCRIPT>

Inclusão de scripts In-line (Na linha diretamente

em uma tag Ex: <H1>) (Não Faça Isso)

17
Inserção do Script

18
 Inserção do Script

https://bit.ly/EstruturaADS

19
 Iniciando

https://code.visualstudio.com/download

20
Iniciando

21
 Iniciando

Vamos Praticar
Programando em
JavaScript

23
 O que necessitamos saber ?

 Antes de aprender JavaScript, já devemos saber criar

páginas Web com HTML (Código HTML).

 É preciso conhecer a estrutura do código que está por

trás de sua aparência e saber criar parágrafos, listas,
tabelas, formulários, frames, incluir links e imagens em
uma página utilizando o código HTML.

 Ter noção de incrementos em páginas utilizando Folhas

de Estilo.
24
 JavaScript

JavaScript é uma linguagem de programação baseada em

objetos. Trata suas estruturas básicas, propriedades do
browser e os elementos de uma página HTML como objetos
(entidades com propriedades e comportamentos) e
permite que sejam manipulados através de eventos do
usuário programáveis, operadores e expressões.

JavaScript oferece recursos interativos que faltam no

HTML e permite a criação de páginas interativas e
dinâmicas, que são interpretadas localmente pelo browser,
sem precisar recorrer a execução remota de programas no
servidor. 25
 JavaScript

Lado Cliente Lado Servidor

JavaScript do lado do cliente

combina a capacidade de criação  Ainda há um caminho a
de scripts de um interpretador
JavaScript com o modelo de
percorrer;
objeto de documento (DOM)
definido por um navegador Web.
 A bibliotecas node.JS;
JavaScript do lado do cliente
permite que o conteúdo
executável seja distribuído na  Rhino on Rails e V8;
WEB, além de estar no centro de
uma nova geração de documento
em HTML dinâmico (DHTML).

26
 O Document Object Model (DOM)

O Document Object Model é uma API para documentos

(X,D)HTML e XML. Isto proporciona uma representação estrutural
de um documento, deixando disponível para modificar seu conteúdo
e apresentação visual. Essencialmente, isto conecta páginas web à
scripts ou linguagens de programação.

A idéia por trás de DOM é poder modificar o HTML de uma página

web de forma dinâmica mediante uso da biblioteca JavaScript.
Desde seus primeiros passos a meados dos anos 90 com o
surgimento de JavaScript, veio crescendo em popularidade à
medida que foram acontecendo suas diferentes versões e a
evolução dos browser’s.
27
DOM

28
Variáveis em JavaScript

29
 Variáveis

 Uma variável é um nome associado a um valor, dizemos que a

variável armazena ou contém o valor. As varáveis permitem
armazenar e manipular dados nos programa.

 Ex: A linha a baixo atribui o valor 2 à uma variável chamada i:

i = 2;
 Em seguida adicionamos um 3 para somar-se a uma nova variavel
(tt)

var tt = i + 3

30
 Regras para definição de
nomes de variáveis
 Os caracteres do nome deverão ser observados pelo fato de
serem Case Sensitive, ou seja, fazem diferença entre
maiúsculo e minúsculo, por exemplo, 'nomeAluno' é diferente
de 'NomeAluno'.

 O nome deve iniciar com um caractere alfabético ou um

sublinhado ( _ ), e não pode conter caracteres especiais (como $,
#, %, " " );

 As variáveis não podem ser nomeadas com nomes próprios do

JavaScript, como return, if, switch, function.

31
Palavras reservadas do
JavaScript

32
 Variáveis

 Uma variável é definida de duas formas. Na primeira, utilizamos a palavra

reservada "var" e, em seguida, especificamos o nome da variável. Você
pode definir um valor para ela da mesma forma que faria na álgebra,
utilizando o sinal de igual ( = ). Essa operação é chamada de atribuição.
 Veja o exemplo à seguir:
Palavra Nome da
Reservada variável

 var minhaVariavel; // variável 'minhaVariavel‘

 minhaVariavel = 10; // leia-se variável minhaVariavel recebe o valor 10'

Valor da
variável

33
 Variáveis
 Na segunda maneira, também aceita, atribuímos um valor ao nome da
variável que gostaríamos de utilizar, sem o uso da palavra "var". Veja o
exemplo à seguir:
Uma variável Global:
<SCRIPT>
 minhaOutraVariavel = 27; var variávelGlobal
< /SCRIPT>
 O que é importante lembrar é que a variável representa, no código, um
determinado valor utilizado em operações lógicas e matemáticas, etc,
que pode ser alterado.

 Veja o exemplo à seguir:

34
 Exemplo
 var x = 10; // x vale 10
Uma variável Local :
 var y = 20; // y vale 20 <SCRIPT>
function minhaFuncao () {
var variavelLocal
 var z = x + y; // z vale 10 + 20, que é 30 }
< /SCRIPT>
 x = 12; // x passa a valer 12, mas isso não influencia no valor
das outras variáveis

 y = y - 17; // y passa a valer 20 (que é o valor do próprio y)

menos 17, que resulta em 3

 z = z * 2; // z passa a valer 30 vezes 2, que é 60

35
 Operadores Matemáticos

 São operadores a serem utilizados em cálculos,

referências de indexadores e manuseio de strings.

36
 Exemplos
 var num1 = 5; // num1 agora vale 5
 var num2 = 10; // num2 agora vale 10 Incremento e
Decremento
Ex:
 var num3; // num3 ainda é Undefined var num1 = 10
Num1++ = ?
 var num4; // num4 ainda é Undefined

 num3 = num1 - num2; // num3 agora vale 5 - 10, que é -5

 num4 = -num3; // num4 agora vale - ( -5), que é 5

 num1 = num1 * num4; // num1 agora vale 5 * 5, que é 25

 num3 = num1 / num2; // num3 passa a valer 25 / 10, que é 2.5

37
 Operadores Comparação e
Lógicos
 São operadores a serem utilizados em comandos
condicionais, tais como: IF, FOR e WHILE.

38
 Exemplos
 var a = 10; var b = "10“; var c = 4;

 var d = 10 > a; // "d" passa a valer false, pois 10 não é maior que 10
 d = 10 >= a; // "d" passa a valer true

 d = a == b; // "d" recebe o valor true, pois se desprezarmos os tipos, 10

e 10 são iguais
 d = a <= c; // "d" recebe false

 d = c < a; // "d" recebe true

 d = 10 != b; // "d" recebe true
 d = c == b; // "d" recebe false
39
 Operadores Comparação e
Lógicos
 Os operadores lógicos, funcionam exclusivamente em
termos booleanos, ou seja, determinam se as
expressões são avaliadas para um literal TRUE ou
FALSE.

 O Operador E (And) exige que as expressões de cada

lado do símbolo && sejam verdadeiras antes de serem
avaliadas como true.

 Ex: (expressao_a) && (expressao_b)

(11 <= 9 ) && ( 16 > 15 )
40
 Operadores Comparação e
Lógicos
 O Operador OU (Or) usa a mesma instrução
básica, mas exige apenas que uma das
expressões seja avaliada como true. É
denotada pelo símbolo “ || “ .

 Ex: (expressao_a) || (expressao_b)

(10 <= 19 ) || ( 10 > 10 )

41
TIPOS DE DADOS

42
TIPOS DE DADOS

43
 TIPOS DE DADOS

JavaScript possui seis tipos de dados fundamentais.

 Cinco são considerados tipos primitivos e representam valores.

 São string, number, boolean, undefined e null.

 O primeiro representa caracteres e cadeiras de caracteres.

 O tipo de dados number representa números.

 Os booleanos true e false representantes do tipo de dados

boolean.

 Os tipos undefined e null possuem apenas um valor cada:

undefined e null, respectivamente. O primeiro é o valor de variáveis
não definidas. O segundo representa um valor definido nulo.
44
 Tipos de Dados

 O tipo de dados é alocado no momento da

inicialização, ou seja, se na definição de uma
variável ela receber uma string, JavaScript a tratará
como string até que ela receba um novo tipo através
de outra atribuição.

 s = "texto"; // s é string
 y = 123; // y é number
 s = true; // s agora é boolean

45
 Tipos de Dados
 JavaScript suporta números inteiros e de ponto flutuante mas todos os
números são representados internamente como ponto-flutuante de
dupla-precisão.
 Podem ser usados através de representações decimais, hexadecimais
ou octais. Números iniciados em “0” são considerados octais e os
iniciados em “0x” são hexadecimais. Todos os outros são considerados
decimais, que é o formato default.

 h = 0xffac; // hexadecimal: 0123456789abcdef

 flut = 1.78e-45; // decimal ponto-flutuante: .0123456789eoct
 oct = 0677; // octal: 01234567

46
 Tipos de Dados

 A concatenação de strings é realizada através do operador “+”.

 O operador “+=” (atribuição composta com concatenação) acrescenta texto

a um string existente.

 Qualquer número ou valor booleano que fizer parte de uma operação de

concatenação será automaticamente transformado em string.

 str1 = "Eu sou uma string";

 str2 = str1 + ' também!';
 str3 = str2 + 1 + 2 + 3; // str3 contém "Eu sou uma string também!123"

47
 Tipos de Dados

 O sexto tipo de dados é object, que representa uma coleção de

propriedades.

 Os tipos primitivos definidos e não-nulos são também representados em

JavaScript como objetos.

 Cada propriedade de um objeto pode assumir qualquer um dos cinco

valores primitivos.

 Pode também conter um outro objeto que tenha suas próprias

propriedades ou pode conter um objeto do tipo function, que define um

método 48
 Tipos de Dados

 Método é uma função especial que atua

sobre o objeto do qual é membro.
Objeto Método
Os métodos são
 Ex: windows.alert() funções pré-
definidas pela
linguagem
JavaScript que irão
executar uma
operação.

49
 Caracteres de Escape

 Estes caracteres são inseridos em strings para

executar alguma funcionalidade extra.
 Todos eles começam com uma barra invertida “\”

50
 Exemplos
 Um exemplo de utilização:
var nome = "João";
nome += "\n Nascimento";
nome += "\n dos Santos";
se mandar imprimir na tela, aparecerá: João
Nacimento
dos Santos

 Outro exemplo:
var cidade = "São Paulo";
cidade += " \" Capital \" ";
aparecerá na tela: São Paulo "Capital"
51
Estruturas de controle de fluxo

52
 Estrutura de repetição
IF... Else
 A estrutura if... else é utilizada para realizar controle de fluxo
baseado em expressões condicionais.
 Sintaxe
if (condição) {
// instruções caso condição == true
} else if (condição 2) {
// instruções caso condição 2 == true
} else {
// instruções caso ambas as condições sejam false
}

53
 Exemplo 01
<html>
<head> <title>Exemplo - if ... else</title>
<script>
num1 = prompt("Digite um numero:", "");
num2 = prompt("Digite outro numero:", "");
if(num1 > num2){
alert("O primeiro numero e maior que o segundo.");
}
else {
alert("O primeiro numero nao e maior que o segundo.");
}
alert("FIM");
</script>
</head>
<body></body>
54
</html>
Exemplo 02

55
Exemplo 03

56
 EXERCÍCIO

 ESCREVA UM PROGRAMA JAVASCRIPT QUE FAÇA UMA

CHECAGEM DE UM NUMERO DIGITADO COMO SE ELE FOSSE
UM “MENU” E QUANDO VERDADEIRO DEMONTRE O QUE
CONTEM ESSE “MENU” E FAÇA UMA CHECAGEM SE ESTA
EM UM INTERVALO VÁLIDO .
var escolha = prompt("Para comida, Digite 1.\nPara bebidas,Digite 2.
\nPara doces,Digite 3");
if (escolha == 1)
alert("Aguarde. O cozinheiro esta no WC.");
else if (escolha == 2)
alert("Muito cedo para beber TCHE !!!.");
else if (escolha == 3)
alert("Voce acredito que tinha doce.");
Else alert(" O Cavalo é para digitar 1, 2 ou 3");
57
 Estrutura de repetição
FOR
 A estruturas de repetição for é usada para repetições baseada em
condições. O bloco for contém de três parâmetros opcionais: uma
inicialização, uma condição e um incremento.
 A sintaxe é a seguinte:

For (inicialização; condição; incremento) {

// instruções a serem realizadas enquanto condição for true
}
Por exemplo:
for (i = 0; i < 10; i = i + 1) {
document.write("<p>Linha " + i);
} 58
 Estrutura de repetição
FOR

Inicializo variável

Condição

Incremento

59
Exemplos 01

60
Exemplos 02

61
Exemplos 03

ATRELANDO
AO HTML !!!

62
 EXERCÍCIO

 ESCREVA UM PROGRAMA JAVASCRIPT QUE RECEBA UMA

TEMPERATURA EM CELSIUS E FAÇA A CONVERSÃO PARA
FAHRENHEIT E DEMONSTRE OS VALORES ANTERIOR
TAMBEM. F = x * 9 / 5 + 32

var at = prompt("Entre com a temp. em Cº")

for (var i = 1; i <= at; i++){
document.write(i + " = ");
document.write(i * 9 / 5 + 32);
document.write("F");
document.write("<br>");
}
63
 Estrutura de repetição
WHILE
 O comando while é semelhante ao comando for, porém
na maioria das vezes o while é aplicado quando não
podemos determinar a quantidade de voltas que nosso
laço vai ter que percorrer.

 A função da estrutura while é repetir um determinado

trecho de código (especificado pelas chaves de abertura
e fechamento de bloco, "{" e "}") enquanto uma
determinada condição for verdadeira.

64
 Estrutura de repetição
WHILE
 while (codição) {
// aqui vai o código que deve ser repetido
}
 Exemplo:
i=0
while (i < 10) {
document.write("<p>Linha " + i);
i++; Incremento

}
65
Exemplos 01

66
 Exemplos 02

Enquanto X
diferente de
25,
permanece
no laço

67
 EXERCÍCIO

 ESCREVA UM PROGRAMA JAVASCRIPT INCORPORADO AO

HTML QUE ELEVE TODO O NUMERO AO QUADRADO (²)
COMEÇANDO A CONTAR EM 2 E QUE VÁ EM ATÉ 2048.

var i = 2;

while (i <= 2048) {

document.write (i + "<br>");
i *= 2;

68
 Estrutura de repetição
DO.. WHILE
 A característica mais importante do “while”, visto
anteriormente, é que o teste da condição é feito logo
que o laço é encontrado, antes do início do bloco de
comandos.

 Isso significa que se a condição falhar logo de

primeira, o bloco não será executado.

 Mas em alguns casos é interessante garantir uma

primeira execução, pois o teste pode se basear nos
resultados de alguma operação realizada dentro do
bloco da repetição
69
 Estrutura de repetição
DO.. WHILE

A tradução de “do while” é "faça ... enquanto".

70
 Estrutura de repetição
DO.. WHILE
A Sintaxe básica do comando é :

do {
// código
// variáveis
// mais códigos

}
while (condição)

71
Exemplos 01

72
Exemplos 02

73
 Estrutura switch

 A estrutura SWITCH tem a função de controlar apenas duas

opções, se verdadeiro ou falso.

 A fim de simplificar as situações, em que há um grande número de

opções.

 Em algumas linguagens de programação o switch é utilizado para

números, mas em JavaScript ele pode ser utilizado para variáveis
tanto do tipo numérico, quanto do tipo string.

74
Exemplo 01

75
 Funções parseInt e
parseFloat
 Função parseInt
 Serve para converter um valor real ou uma string que
contenha caracteres numéricos (como "2345cftr") para inteiro,
para isso utilizamos a função "parseInt()".

 Sintaxe
document.write (parseInt("16XXbU"))
Devolve o número 16

76
 Funções parseInt e
parseFloat
Outro exemplos Funções muito
usada para pegar
a parte inteira de
 document.write (parseInt("3.38")) ; um decimal

//Devolve o número 3
 var c = "123asd4";
//Devolve 123 que a parte numérica da _string_ que
existe antes de algum caractere alfabético.
Base Octal,
 valor=parseInt("0xff",16); Binaria..etc
//Conversão hexadecimal p/ decimal,retorna 255

77
 Funções parseInt e
parseFloat
 Função parseFloat
 Esta função é utilizada para converter valores para ponto
flutuante.
 Exemplo:
 var a = 12; var b = "3.14159“; var c = "23.55qrui";
 var d;
 d = parseFloat(a); // d passa a valer 12.0
 d = parseFloat(b); // d passa a valer 3.14159
 d = parseFloat(c); // d passa a valer 23.55

78
 Funções
 Uma vez criada uma função, ela pode ser usada globalmente (dentro da página
onde foi definida), da mesma maneira que as funções globais do JavaScript.

 O identificador da função deve vir seguido de um par de parênteses e, entre eles,

opcionalmente, uma lista de parâmetros, separados por vírgulas.

 A implementação (seqüênciade instruções) da função deve vir dentro de um bloco

entre chaves “{“ e “}”.
 Exemplo:
function soma () {
a = 2; b = 3;
return a + b;
}
Para retornar um valor, é preciso usar uma instrução return: 79
 Funções

Sintaxe :
<script>
function minhaFuncao() {
INSTRUÇÕES DA FUNÇÃO
return valor;
}

function minhaFuncao(sParametro1, sParametro2) {

INSTRUÇÕES DA FUNÇÃO
}
</script>
 Funções
<head>
<title>Título do Documento WEB</title>
</head>
<script>
function validarNome() {
}
</script>
Propriedades
<body>
<form name =“frmInclusao” >

<Input type=“Text” name=“txtNome” id=“txtNome” value=“”

onBlur=“validarNome();”>
...... Função JavaScript
Evento
 Aplicando um Exemplo

Suponha uma função que tenha como objetivo

informar se uma pessoa é maior ou menor de
idade, recebendo como parâmetro a sua idade.

function Idade (Anos) {

if (Anos > 17)
{ alert ("Maior de Idade") }
else
{ alert (“Menor de Idade") }
}
82
 Aplicando um Exemplo
Para acionar esta função, suponha uma caixa de
texto, em um formulário, na qual seja informada a
idade e, a cada informação, a função seja
acionada.
Ex:
<form>
<input type=text size=2 maxlength=2 name="Tempo"
onchange="Idade(Tempo.value)">
</form> 83
Aplicando um Exemplo

84
 EVENTOS

 São fatos que ocorrem durante a

execução do sistema, a partir dos quais o
programador pode definir ações a serem
realizadas pelo programa.

85
 Eventos

 Um evento é gerado como resultado de uma ação:

 Um clique,
 Um movimento do mouse,
 Uma seleção de texto,
 O abandono da página
 Etc.

 O tratamento de eventos é feito por partes de

código associadas a eventos específicos.
86
 Tipos de Eventos

 onload - Ocorre na carga do documento. Ou seja, só

ocorre no BODY do documento.

 onunload - Ocorre na descarga (saída) do

documento. Também só ocorre no BODY.

 onchange - Ocorre quando o objeto perde o focus e

houve mudança de conteúdo.

Válido para os objetos  Text, Select e Textarea.

87
 Tipos de Eventos
 onblur - Ocorre quando o objeto perde o focus,
independente de ter havido mudança.

Válido para os objetos  Text, Select e Textarea.

 onfocus - Ocorre quando o objeto recebe o focus.

Válido para os objetos  Text, Select e Textarea.

 onclick - Ocorre quando o objeto recebe um Click do

Mouse.
Válido para os objetos  Buton, Checkbox, Radio, Link,
Reset e Submit.
88
 Tipos de Eventos
 onmouseover - Ocorre quando o ponteiro do mouse
passa por sobre o objeto.

Válido apenas para  Link.

 onselect - Ocorre quando o objeto é selecionado.

Válido para os objetos  Text e Textarea.

 onsubmit - Ocorre quando um botão tipo Submit recebe

um click do mouse.

Válido apenas para o  Form.

89
 Eventos dos objetos HTML
Objetos com representação visual
Todos exceto: <br>, <head>, <html>, <script>, <style>, <title>

onclick Clique no botão mouse

ondblclick Duplo clique no mouse
onkeydown Tecla pressionada
onkeypress Tecla pressionada e liberada
onkeyup Tecla liberada
onmousedown Botão do mouse pressionado
onmouseup Botão do mouse libertado
onmouseover Mouse sobre o objeto
onmousemove Mouse movido do objeto
onmouseout Mouse saiu do objeto 90
 Eventos dos objetos HTML
<a>,<input>,<select>,<textarea>
onfocus Ganha o foco
onblur Perde o foco

<body> -
onload Na carga do documento
onunload Na descarga do documento (saída)

<input>, <select>, <textarea>

onchange O conteúdo foi alterado

onselect Texto foi selecionado

91
 Eventos

 A associação é realizada em HTML nos

elementos que suportam eventos do tipo
Event através dos atributos: onEvent

 Exemplo:
<input type = "button"
onclick = 'alert("Ola");' />
92
 Associando código JavaScript
ao clique no botão

Quando for dado um clique no

botão é executado o código (em
JavaScript), neste caso:
alert("Ola");

93
 Eventos do Mouse

 O mouse é um periférico que permite uma

grande interação do usuário com o
computador, e o JavaScript permite tratar
diversos eventos relativos ao mouse.
Esses eventos abrangem todas as ações
executáveis pelo usuário.

94
 Eventos

 Principais eventos de iteração com o

mouse.

95
 Exemplos de Eventos
OnClick
 Executa um código JavaScript quando um objeto é clicado. Usado para Button,
document, Checkbox, Link, Radio, Reset, Submit, na forma
onClick="algumaCoisa", onde "algumaCoisa" é uma função ou código de
JavaScript.
 Exemplo 1:
 <A HREF="http://www.fais.com.br/" onClick="return confirm('Abre
Fais?')">Faculdade de Sorriso</A>
 Se o usuário clica no link, abre a caixa de confirmação. Se, nessa caixa, o botão
Cancelar é clicado, o link não é aberto.
 Exemplo 2:
 <INPUT TYPE="button" VALUE="Resultado" onClick="calcular(this.form)">

 Ao clicar no botão, é chamada a função "calcular(a)" (a ser desenvolvida).

96
 Exemplos de Eventos
OnClick
 Exemplo 1:

97
 Exemplos de Eventos
onDblClick
 Executa um código JavaScript quando um duplo clique é
dado no objeto. Usado para document, Link, na forma
onDblClick="algumaCoisa", onde "algumaCoisa" é uma
função ou código de JavaScript.

 Exemplo:

<form>
<INPUT Type="button" Value="Teste" onDblClick="alert('Foi dado um duplo
clique')">
</form>

98
 Exemplos de Eventos
onMouseMove
 Executa um código JavaScript quando o usuário move o
cursor com o mouse.
 Usado na forma onMouseMove="algumaCoisa", onde
"algumaCoisa" é uma função ou código de JavaScript.
 Exemplo
 <img src="C:\Projetos\javascript.png" alt="Teste"
onmousemove="alert('Obrigado por nos Visitar!')" />

99
Exemplos de Eventos
OnMouseOut

100
Exemplos de Eventos
OnMouseUp

101
 Eventos de Teclado

 Os eventos do teclado são gerados quando

ocorre nele alguma mudança de estado, como o
pressionar das teclas.
 Seus principais eventos são :

102
 Eventos de Teclado
onKeyDown
Serve para informar qual será o
 Usado para document, Image, Link, Text, Textarea, na forma
tipo de AÇÃO e MÉTODO que
deve ser utilizado no tratamento
de seu FORM
onKeyPress="algumaCoisa", onde “algumaCoisa” é uma
função ou código de JavaScript.

103
Eventos de Teclado
onKeyPress
Objeto Event é associado a todos os eventos,
possui varias propriedades que fornecem
informações sobre cada evento, como tipo,
localização, se a tecla CTRL esta ativa ou não.

A propriedade .srcElement, representa

o objeto que recebe o evento.

104
Eventos de Teclado
onKeyUp

105
 EXERCÍCIOS

1. ESCREVA UM PROGRAMA JAVASCRIPT QUE FAÇA A CHECAGEM

DE IDADE, SE ELA FOR MAIOR DE 18 ELA PODE BEBER E VOTAR SE
FOR MENOS DE 18 E MAIOR DE 16 SOMENTE VOTAR E SE FOR
MENOR QUE 16 SÓ JOGAR VIDEOGAME.

2. FAÇA UM PROGRAMA QUE ESCREVA A SEQUENCIA DE FIBONACCI.

3. MONTE UM PROGRAMA QUE DESENHE NA TELA UMA “DIV”, A DIV

DEVE CONTER UMA COR INICIAL AO CLICAR DEVE MUDAR DE COR
E QUANDO SOLTAR O MOUSE TROQUE PARA UMA TERCEIRA COR.

106
107
108
109
 Objetos
 Javascript contem uma boa quantidade de funções em suas
bibliotecas.
 Como se trata de uma linguagem que trabalha com objetos (O.O.), muitas
das bibliotecas se implementam através de objetos.

 Por exemplo, as funções matemáticas ou as de manejo de strings se

implementam mediante os objetos Math e String.

 Entretanto, existem algumas funções que não estão associadas a nenhum

objeto como parseInt(), parseFloat(), isNaN(número) - Devolve
um booleano dependendo do que recebe por parâmetro. Se não é um
número devolve um true, se é um número devolve false .
110
 Objetos: o que são?
 Olhando o mundo real pode-se ver vários objetos:
mesa, cadeiras, alunos, professores etc.

 Esses objetos no mundo real possuem duas características

básicas:todos possuem estados/propriedades e
comportamentos/funcionalidades apropriados.

 Exemplo: um cachorro
 estados: nome, raça.
 Comportamento: balançar rabo, enterrar osso.
 Objetos

 Um objeto é alguma coisa.

 Um gato um carro, uma bicicleta são todos objetos no

mundo físico.

 Para o JavaScript, existem objetos com que ele lida em

navegadores da Web, como janelas, formulários e os
elementos do formulário, como botões e caixas de
seleção.

112
Objetos

113
 Propriedades dos objetos

 Em Javascript podemos acessar às propriedades e aos

métodos de objetos de forma similar a como se faz em outras
linguagens de programação, com o operador ponto (".").

 As propriedades se acessam colocando o nome do objeto

seguido de um ponto e o nome da propriedade que se deseja
acessar.
Desta maneira:
meuObjeto.minhaPropriedade

114
 Objetos predefinidos

Existem três tipos de objetos:

• Intrínsecos da linguagem (ex: String, Math)
• Fornecidos pelo browser (ex: window, navigator)
• Criados pelo código em JavaScript.
O objeto window é usado quando nenhum objeto for
explicitamente indicado.
Exemplo:
• alert é um método de window
alert("ola") é equivalente a
window.alert("ola")
• document é uma propriedade de window
document.title é equivalente a
window.document.title 115
 Propriedades e Métodos
 Exemplo.

Objeto Objeto

116
 Métodos

 Métodos são ações a serem executadas em um objeto. No exemplo

anterior, WRITE é o método utilizado.

 As propriedades são uma subseção existente de um objeto.

 No exemplo anterior, o objeto que está sendo utilizado é o document e,

em cada document tem um atributo de cor de fundo que pode ser
atribuído um valor.
 A propriedade JavaScript usado para recuperar esse valor é bgColor.

 Uma boa maneira de dizer a diferença entre um método e uma

propriedade é que os métodos são normalmente verbos, enquanto as
propriedades são geralmente substantivos.
117
 Manipulando Strings

 variavel.length  retorna o tamanho da string

 variavel.charAt(posição)  retorna o caracter da

posição especificada (inicia em 0)

 variavel.indexOf(“conteudo”)  retorna a posição

onde começa a primeira string

 variavel.lastindexOf(“conteudo”)  retorna a
posição onde começa a ultima string
 Manipulando Strings
 variavel.substring(index1, index2) retorna o
conteúdo da string no intervalo especificado.
Iniciando no valor de index1 e terminando uma
posição anterior ao index2

 variavel.substr(index, tamanho)  retorna o

conteúdo da string com o tamanho especificado.
Iniciando no valor de index e terminando com o
tamanho informado
 Manipulando Strings

 variavel.toUpperCase()  transforma o conteúdo

da string para maiúsculo.

 variavel.toLowerCase()  transforma o conteúdo

da string para minúsculo.

 escape(“string”)  retorna o valor ASCII da string.

 unscape(“string”)  retorna o caractere a partir de

um valor ASCII .
 Manipulando Datas

 Função Date()
 Manipulando Datas

 Obtendo valores:
 getDate()  Obtém o dia do mês (1 a 31)
 getDay()  Obtém o dia da semana (0 a 6)
 getMonth()  Obtém o mês (0 a 11)
 getYear()  Obtém o ano
 getHours()  Obtém a hora (0 a 23)
 getMinutes()  Obtém os minutos (0 a 59)
 getSeconds()  Obtém os segundos (0 a 59)
 Manipulando Datas

 Informando valores:
 setDate()
 setDay()
 setMonth()
 setYear()
 setHours()
 setMinutes()
 setSeconds()
 Arrays (Vetores) e Matrizes
 Array é uma variável que compõe um vetor, ou seja, é uma
variável que pode conter vários valores diferentes.
Ex: carros = new Array( "GOL", "CORSA", "PALIO" );
Ao se instanciar um array lembrem-se de que a
primeira letra do palavra array deve estar maiúscula.

 Trabalhar com vetores é muito mais simples do que

trabalhar com várias variáveis diferentes ao mesmo tempo,
pois o vetor deixa estes valores agrupados na memória.

 Todo vetor tem um índice que começa em 0, portanto, o

primeiro ítem de um vetor sempre será 0.
124
Matrizes e Arrays (Vetores)

125
Matrizes e Arrays (Vetores)

126
 Matrizes e Arrays (Vetores)

 Matrizes em JavaScript são, na verdade, uma forma de se

utilizar múltiplos arrays, cada um se originando do outro.

 Torna-se meramente uma questão algorítmica e mecânica

do seu uso.

 Uma matriz é um vetor de vetores, ou seja, declara-se um

vetor, cujos elementos são vetores.

127
 Matrizes e Arrays (Vetores)

 Também são conhecidas como Vetores

multidimensionais.

128
 Matrizes e Arrays (Vetores)
 Exemplo

129
130
 SEQUÊNCIA DE FIBONACCI

 A sucessão de Fibonacci ou sequência de Fibonacci é uma sequência

de números naturais, na qual os primeiros dois termos são 0 e 1, e cada
termo subsequente corresponde à soma dos dois precedentes.
 A sequência tem o nome do matemático do século XIII Leonardo de
Pisa, conhecido como Leonardo Fibonacci, e os termos da sequência
são chamados números de Fibonacci.

 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, …

131
132