Técnico Informática
JavaScript
Autor: Jefferson da Silva Mira
Contato: Jefferson.s.mira@gmail.com.br
Indice
• Fundamentos
• Variáveis
• Constantes
• Operadores
• Funções em JavaScrip
• Efeitos em JavaScript
• Estruturas de controle
• Object Orientation (OO)
• Apêndice
Fundamentos
JavaScript
• Linguagem de programação interpretada;
•Não tem nada a ver com Java!
•Interpretada totalmente pelo browser;
• Linguagem Script:
• Fracamente tipada;
• Recursos de OO (Orientação a Objetos);
• Possui funções de primeira classe;
•Códigos inseridos nas páginas HTML;
•Criada pela Netscap, para tornar a página mais dinâmica.
•Atualmente mantido pelas empresas Ecma.
E a onde o JavaScript entra no
desenvolvimento?
• HTML: Criada para definir a estrutuda do meu
documento WEB;
• CSS: Define os estilos da minha página WEB;
• JavaScript: Insere ações na minha página WEB;
Como definir o código JavaScript?
• O código JavaScript é definido com as tags: <script
type="text/javascript"></script>
• Script pode ser definido em qualquer parte do corpo
do documento HTML;
• Definido normalmente dentro da tag <head></head>;
• Pode ser definido em páginas externas, com o código:
– <script src="myScript.js"></script>
Exemplo
<html>
<head>
<title>Exemplo basico de JavaScript</title>
<script type="text/javascript"> Toda vez que a página
for aberta, será
alert("Hello World!");
mostrada uma caixa de
</script> texto com o texto
definido
</head>
<body>
</body>
</html>
Escrevendo valores na tela
• É possível escrever um texto qualquer na tela usando o comando
document.write("Texto para ser impresso");
<html>
<body>
<p>JavaScript can write directly into the HTML output stream: </p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
</body>
</html>
Variáveis
Variáveis em JavaScript
• São fracamente tipadas (Não necessitam ter seu
‘tipo’ definido na criação.
<HTML>
<BODY>
<SCRIPT LANGUAGE="Javascript">
var texto = "Meu número preferido é o " ;
var variavel = 7 ;
document.write(texto + variavel);
</SCRIPT>
</BODY>
</HTML>
Quais são os tipos de variáveis em
JavaScript
Tipo de dados Valores
Números Todo número inteiro ou com virgula tal que 22 ou
3.1416
Cadeias de caracteres Toda cadeia de caracteres inseridas entre aspas tal
que "cadeia de caracteres"
Booleanos as palavras true para verdadeiro e false para falso
Palavra nulo Palavra especial que representa sem valor
Expressões de controle
Para que seja possível Expressão O que é
utilizar certos caracteres \n Nova Linha
\t Tab
em variáveis “String”,
\b Retrocesso
existem comandos \” Aspas
expecias. \\ Barra
Os mais importântes \f Salta Formulário
estam listados ao lado; \0 nulo
Valores especiais para variáveis
•Undefined: Variável declarada, mas sem nenhum
valor definido ou atribuida à ela.
•Null: Quando é atribuido um valor ‘null’
•NaN (Not a Number): Quando uma variável que
não é um número é utilizado como se fosse.
•Infinity: Valores numéricos muito altos.
Constantes
Variáveis em JavaScript
• Repositórios de dados que não tem
seu valor alterado;
• Definidos pela palavra Const.
Exemplo: const HORAS_DO_DIA = 24;
Operadores
Autor: Jefferson da Silva Mira
Contato: Jefferson.s.mira@gmail.com.br
Operadores Aritméticos
Operador Função Exemplo
+ Adição 2 + 3, x+y
- Subtração 7 – 5, a – 10
* Multiplicação 3 * 5, I * J
/ Divisão 10/2, total/ quant
% Módulo: O resto de uma 4%2 = 0
divisão 5%2 = 1
Operadores de Atribuição
Operador Função Exemplo
= Atribuição X = 3;
*= Multiplicação e X *= 5;
atribuição É igual: X = X*5;
/= Divisão e atribuição X /= 5;
É igual: X = X/5;
-= Subtração e atribuição X -= 5;
É igual: X = X-5;
+= Soma e atribuição X += 5;
É igual: X = X+5;
Operadores Relacionais
Operador Função Exemplo
== Igual a 3 == 3, x == y
=== Igual a (valor e tipo) 3 === “3”
> Maior que 5 > 1, x > y
>= Maior ou igual a 6 >= 6, x >= 6
< Menor que 3 < 7, x < 7
<= Menor ou igual a 7 <= 7, x <= y
!= Diferente de 5 != 10, X != 10
Operadores Lógicos
Operador Função Exemplo
&& Conjunção (e) X = y && 3 < 10
Para o resultado final ser verdadeiro, as duas
variáveis tem que ser verdadeiras.
|| Disjunção (ou) X <> Y || 5 >= y
Para o resultado final ser verdadeiro, apenas
uma das duas variáveis pode ser verdadeira.
! Negação (não). !(x > Y)
Muda o valor das variáveis lógicas.
Operadores de Incremento
Operador Função Exemplo
x++ incrementação y = x++
(x++ é o mesmo que x=x+1)
x-- decrementação y= x--
(x-- é o mesmo que x=x-1)
Ordem dos Operadores
• Operadores Mais Internos (Entre
Parênteses)
• Operadores Aritméticos
• Operadores Relacionais
• Operadores Lógicos
Exercícios usando variáveis e
Contantes
1. Crie um algoritmo monte uma tabela com a
tabuada de um número. Os valores devem
ser gerados atravéz de operações
matemáticas;
Arrays
Definição
• É um conjunto de valores agrupado.
• O índice sempre começa em 0 (zero).
• Pode conter qualquer tipo de valores, e os
tipos de valores podem váriar.
• Não é necessário definir o tamanho do array
ao criar.
Definição de um Array
1. A primeira forma de criar um array, é a seguinte:
var pessoas = [] //Cria um array vazio.
pessoas[0+=“Pessoa1"; //Adiciona valor na primeira posição.
pessoas[1+=“Pessoa2";
pessoas[2+=“Pessoa3";
2. É possível criar o array e já definir os valores que ele vai
ter, com a siguinte sintaxe:
var pessoas = ["Jefferson","Valdecir","Cezar","Pedro”+;
3. É possível criar um objeto do tipo array:
var myCars=new Array();
Propriedade length (tamanho)
•É o tamanho de um array, e pode ser usado da
seguinte maneira:
var x=myCars.length; //O tamanho do array (um inteiro) é
retornado e guardado em uma variável (var x).
•O tamanho do array (valor armazenado no atributo
length) é sempre o índice + 1. No exemplo abaixo, o
índice é 3 e o length é 4:
var pessoas = *"Jefferson","Valdecir","Cezar","Pedro”+;
Iteração em um array
É possível passar por todas as posições de um
array usando a estrutura ‘for’ (para), tendo
como comando de parada o length:
for(var i=0; i < pessoas.length;i++){
document.write(pessoas[i]);
}
Arrays multidimensionais
• São arrays que tem arrays internos.
• São conhecidos também como matrizes.
• Podem ser definidos pela sintaxe:
var pessoas = new Array();
pessoas[0] = new Array("jefferson","Cezar","Hilosi","Cicero");
pessoas[1] = new Array("Jeferson","Josiane","Raul","Pedro","Paulo");
Ou
var pessoas = [["jefferson","Cezar","Hilosi","Cicero"] , ["Jeferson","Josiane","Raul","Pedro","Paulo"]];
Para acessar uma posição deste array multidimesional, é possível
utilizar a seguinte sintaxe:
document.write(pessoas[1][3]);
Funções que estão disponíveis na
maioria dos Browsers.
Função O que faz
concat faz cópia simples do Array e adiciona os argumentos
join cria um string do Array. Adiciona o argumento como cola entre cada membro do Array.
shift remove e retorna o primeiro elemento
pop remove e retorna o ultimo elemento
unshift anexa os argumentos na frente do Array
push anexa os argumentos no final do Array
Reverse inverte o Array sem copiá-lo
slice faz cópia simples da porção do Array delimitada por argumentos do índice
splice remove elementos especificados do Array, e os substitui com argumentos adicionais
opcionais
sort classifica o Array sem copiá-lo, opcionalmente usando um argumento comparador
toString chama join sem passar um argumento
Funções que estão disponíveis em todos os
Browsers (menos IE <= 8)
Função O que faz
indexOf retorna o primeiro elemento igual ao valor especificado, ou -1 se nenhum for encontrado
lastIndexOf retorna o último elemento igual ao valor especificado, ou -1 se nenhum for encontrado
every retorna verdadeiro se a função fornecida retorna verdadeiro quando aplicada a todos
elementos
some retorna verdadeiro se a função fornecida retorna verdadeiro quando aplicada a pelo
menos um elemento
forEach aplica a função fornecida para todos elementos do Array
map cria um novo Array contendo os resultados da aplicação da função a todos elementos do
Array
filter cria um novo Array contendo todos os elementos para os quais a função fornecida
retorna verdadeiro
reduce aplica uma função simultaneamente para dois valores do Array (da esquerda para a
direita) de forma a reduzi-los a um valor único (nota: reduce tinha um significado
diferente em versões mais antigas do Prototype.js)
reduceRight aplica uma função simultaneamente para dois valores do Array (dadireita para a
esquerda) de forma a reduzi-los a um valor único.
Caixas de Diálogo
O que é isso?
• Ferramenta utilizada para criar uma interface entre o
usuário e a máquina;
• No javaScript existem três caixas:
– Alert:
• Mensagem que é apenas mostrada na tela.
• Alert(“Mostra um texto”);
– Prompt:
• Tem um campo, um botão ‘ok’ e um botão cancelar.
• Sempre retorna um valor, caso o botão ‘cancelar’ seja digitado, retorna ‘null’;
• prompt(“Mostra um texto”);
– Confirm:
• Tem o botão ‘ok’ e o ‘cancelar’. Retorna ‘verdadeiro’ ou ‘falso’.
Funções em JavaScrip
Definição
São códigos criados com um propósito específico;
Existem dois tipos:
1. Criadas pelo JavaScript (Como o Alert());
2. Criadas pelo desenvolvedor;
São definidas pela sintaxe:
function nome_da_função(argumentos) {
... código de instruções ...
}
Parâmetros de entrada e saída
• Uma função pode receber diversos parâmetros;
• Estes parâmetros devem ser declarados;
• Ao invocar a função, os parâmetros desejados devem ser passados;
Exemplo de declaração de função:
function Exemplo(Texto) {
alert(texto);
}
Exemplo e chamada de função:
Exemplo("Bom dia a todos");
Parâmetros de entrada e saída
• Uma função pode ou não retornar um valor;
• Este retorno é definido pela palavra chave return.
Exemplo de retorno em uma função:
function cubo(numero) {
var cubo = numero*numero*numero
return cubo;
}
Estruturas de controle
Autor: Jefferson da Silva Mira
Contato: Jefferson.s.mira@gmail.com.br
Estruturas de controle
Uma estrutura de controle serve para que o algoritmo possa
executar um determinado bloco de ações, quando
determinadas condições, representadas por expressões
lógicas ou relacionais, são satisfeitas. Existem dois tipos de
estruturas de controle de seleção:
• Seleção simples:
– If(condição){... }
– If(condição){... }else{}
– If(condição){...}else if(condição){... }
– Operação ternária: condição?expressão1:expressão2
• Seleção composta
– Switch(variável)... case... Default;
Estrutura de seleção simples
if (condição){
comando;
}else{
comando;
}
Ou
if (condição){
comando;
}else if (condição){
comando;
}
Estrutura de seleção composta
switch(variável)
{
case constante1:
seqüência de comandos
break;
case constante2:
seqüência de comandos
break;
...
default:
seqüência de comandos
}
Exercícios
1. Crie uma calculadora, utilizando switch-case;
2. Crie um algoritmo que defina se uma variável
representa: uma linguagem de programação
(java, html, javaScript, html) ou um tipo de
dados (inteiro, real, logico, caracter).
Estruturas de Repetição
Autor: Jefferson da Silva Mira
Contato: Jefferson.s.mira@gmail.com.br
Como repetir?
• Existem, principalmente, dois tipos de
repetição:
– for
• Repetição baseada num número de vezes pré-definido;
– While
• Repetição até que uma determinada condição seja
verdadeira;
For (velho amigo ‘Para’)
Coisas para se falar a respeito da
variável controladora
• Pode ter qualquer nome (“cont” é apenas um
exemplo);
• O incremento da variável controladora pode
ser realizado com base em qualquer valor
inteiro (positivo ou negativo);
• Não é recomendável alterar o valor dentro do
bloco de instruções;
E como funciona afinal?
While (‘enquanto’, para os intimos)
Do .. While (ou repita, se preferir)
E por último: for ... in ...
• Estrutura de repetição especialmente feita
para quando você quiser aplicar o mesmo
algoritmo em todos os elementos de um
vetor. Ex:
for( /*uma variável aqui*/ in /*um vetor aqui */){
/*seu código aqui*/
}
Exemplo de como utilizar:
var k = new Array(10,4,3,6,4,2);
for (var i in k){
k[i]*=2;
}
Efeitos em JavaScript
Autor: Jefferson da Silva Mira
Contato: Jefferson.s.mira@gmail.com.br
Inserindo efeitos em eventos
• É possível utilizar a função onclick=“” para definir uma ação que
será executada:
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript pode ser executado em eventos. Click no botão:</p>
<button type="button" onclick="alert('Bem Vindo!')">Clique aqui!</button>
</body>
</html>
Lista de eventos possíveis
• 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.
• 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/OnBblClick - Ocorre quando o objeto recebe um Click do Mouse. Válido
para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
• Onmouseover/onmounseout - 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.
• Onmousemove: Quanto o mouse passa por cima do objeto
DOM
O que hells é isso?
• Document Object Model (DOM);
• É a representação de todo o documento
HTML em forma de atributos e ‘nodes’;
• É possível acessar cada um destes atribus,
mudar ou deletar eles;
• É possível criar novos atributos ou adicionar
formatações.
• Tudo isso dinâmicamente!!!
Representação gráfica disso tudo
Mais um exemplo
Só mais um
Mas o que são estes objetos?
DOM
• Window object: Objeto que está no topo da arvore.
• Document object: A página HTML.
• Form object: É a definição das tags <form>...</form>. Utilizando
isto, é possível acessar as opções do form.
• Elementos do Form: Definição de todos os elementos do form.
• É possível acessar um atributo da minha página com o comando
document.getElementById(“ID do elemento”);
• É possível acessar o conteúdo de uma tag utilizando o comando
document.getElementById(“ID do elemento").innerHTML=“valor";
E para que saber disso?
• Para conseguir recuperar os atributos da
página, usando dois métodos principais:
– Document.getElementById(ID);
• Retorna o elemento que tem o ID passado;
– Document.getElementsByTagName(name);
• Retorna um array com todos os elementos com aquela
tag.
Document.getElementsByTagName(name)?
• O resultado desse método é um array que
pode ser acessado usando um contador de
array;
• Também é possível saber quantos elementos
desse tipo tem no documento olhando o
atributo .length;
E não é só isso!!
• Recuperando um atributo, possível acessar as
seguintes propriedades:
– nextSibling: Recupera o próximo atributo, do
mesmo level;
– previousSibling: Recupera o elemento anterior, do
mesmo level;
– parentNode: Recupera o ‘pai’ do atributo em
questão;
Atributos de elementos ‘pai’
• ChildNodes: Recupera uma lista de todos os
elementos que são ‘nodes’, mas não seus filhos;
• É possível acessar o elemento de um array
usando o contador ou item();
• hasChildNodes(): Verifica se o elemento tem
algum filho, retornando verdadeiro ou falso;
• E algumas propriedades rápidas:
– seuElemento.firstChild;
– SeuElemento.lastChild;
– seuElemento.childNodes[0];
Quer Exemplos disso?
1. JS - Exemplo Mudar Imagem de Fundo
2. JS - Mudar cor de fundo do texto ao clicar
Object Orientation (OO)
Objetos
• Um objeto é uma abstração de coisas da vida real;
• São definidos por propriedades e por métodos que alteram
as propriedades.
• Exemplo
– Objeto: Pessoa;
– Atributos:Altura, peso, profissao;
– Métodos: andar(),dormir(), trabalhar();
• Acessando um atributo: pessoa.peso;
• Acessando um método: pessoa.dormir();
Objetos
• Como criar o objeto:
var objeto_vazio = {};
var curso = { sigla : " K11 ", nome : " Orientação a Objetos em Java "};
Como recuperar os valores de objetos?
var curso = {
sigla:" K11 ",
nome:" Orientação a Objetos em Java “
};
//Recuperando o valor usando ‘.’ (ponto)
document.write( curso.sigla );
//Recuperando o valor da mesma maneira que um array.
document.write( curso["sigla"]);
var sigla = "sigla";
document.write( curso[sigla]);
Alterando o valor de uma propríedade
var curso={sigla:"PRW",nome:"Programação WEB"};
//Alterando o valor dos atributos
curso.sigla="Prog WEB";
curso.nome="Programação WEB no Senai";
//Mostrando os valores na tela
document.write(curso.sigla);
document.write(curso.nome);
Removendo propriedades do Objeto
• Para se remover uma propriedade é possível utilizar a função
‘delete’:
var curso = { sigla:"Inf", nome:"informatica - WEB"};
// imprime Inf
document.write(curso.sigla);
document.write("<br>");
delete curso.sigla ;
// imprime undefined
document.write(curso.sigla);
E para saber se uma propriedade
existe?
• É possível verificar se uma propriedade existe em um
objeto usando o comando ‘in’.
var curso = { sigla : " Inf ", nome:"Informatica programação
WEB"};
// imprime true
document.write("sigla" in curso);
// imprime false
document.write("carga_horaria" in curso);
Métodos
• Quando uma função é declarada dentro de um objeto, ela é
chamada de método.
//Definindo o objeto com a função
var conta = {
saldo : 0,
deposita : function ( valor ) {
this . saldo += valor ;
}
}
//Invocando o método
conta.deposita(100) ;
document.write(conta.saldo);
Objetos em JavaScript
• Objetos Internos(String, date, etc);
• Objetos de Browser (window, document);
• Objetos Personalizados;
Objetos e Tipos primitivos
• Tipos Primitivos
– Boolean, Number, String
• Objetos JavaScript
– Object
– Bollean
– Number
– String
– Array
– Date
– Math
– RegExp
Objeto Math
O que é isso?
• Objeto criado apenas para facilitar a utilização de números.
• Contém diversas funções:
– X= Math.abs(valor); - Retorna o valor absoluto do número passado
como parâmetro;
– X = Math.ceil(valor); - Retorna o valor inteiro superior ao valor passado
como parâmetro;
– X = Math.floor(valor); - Retorna o inteiro inferior ao número passado
como parâmetro;
– X = Math.round(valor); - Arredonda o número ao inteiro mais próximo;
– X = Math.max(valor1,valor2); - Retorna o maior valor dos dois números
passados;
– X = Math.min(valor1,valor2); - Retorna o menor valor dos dois númeos
passados;
Objeto Date
O que é
• Objeto que contém todas as informações do
computador que está sendo utilizado;
• O seguinte código imprimirá a data e a hora
atual do sistema:
var data = new Date();
document.write(data.getHour());
Métodos úteis
• getYear(): Retorna dois últimos digitos do ano;
• getMonth(): Retorna número do mês (0 – 11);
• getDate(): Retorna o dia do mês (1 - 31);
• getDay(): Retorna do dia da semana (0 - 6);
• getHours(): Retorna a hora do objeto (0 - 23);
• getMinutes(): Retorna os minutos do objeto (0-
59);
• getSeconds(): Retorna os segndos (0 – 59);
Objeto String
O que é
• Objeto utilizado para a manipulação de
caracteres e lista de caracteres.
O que eu posso fazer com isso?
length: É um inteiro que representa o comprimento da cadeia
de caracteres;
charAt(): método que retorna um caractere que está na
posição especificada;
indexOf(): Retorna a posição de uma cadeia parcial de
caracteres;
lastIndexOf(): retorna a posição de uma cadeia parcial a partir
de uma posição determinada;
substring(x,y): Retorna uma String parcial situada entre as
posições x e y-1;
toLowerCase(): Transforma todas as letras em minúsculas;
toUpperCase(): Transforma todas as letras em maiúsculas.
Apêndice
Palavras Reservadas
A abstract
B boolean, break, byte
C case, catch, char, class, const, continue
D default, do, double
E else, extends
F false, final, finally, float, for, function
G goto
I if, implements, import, in, instanceof, int, interface
L long
N
native, new, null
P package, private, protected, public
R return
S short, static, super, switch, synchronized
T this, throw, throws, transient, true, try
V var, void
W while, with
Links
• http://pt.wikipedia.org/wiki/JavaScript
• http://wbruno.com.br/javascript-puro/afinal-como-e-orientacao-a-
objetos-em-javascript-exemplos/
• http://www.learn-javascript-tutorial.com/JavaScriptBasics.cfm
• http://www.javascript-tutorial.com.br/content-15.html
• http://www.truquesedicas.com/tutoriais/javascript/
• http://imasters.com.br/artigo/21197/javascript/entendendo-arrays-
no-javascript/
• http://www.slideshare.net/csantos/a09-labmm3-javascript-
estruturas-de-repetio
• http://www.phpied.com/3-ways-to-define-a-javascript-class/
