Scribd
Carregar
3K visualizações

Java Script

1) O documento apresenta os fundamentos da linguagem JavaScript, incluindo variáveis, constantes, operadores, arrays, caixas de diálogo e funções. 2) É fornecido um contato de email para o autor Jefferson da Silva Mira. 3) O resumo abrange os principais tópicos da linguagem JavaScript discutidos no documento.

Enviado por

Leonardo Zanin
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
3K visualizações

Java Script

1) O documento apresenta os fundamentos da linguagem JavaScript, incluindo variáveis, constantes, operadores, arrays, caixas de diálogo e funções. 2) É fornecido um contato de email para o autor Jefferson da Silva Mira. 3) O resumo abrange os principais tópicos da linguagem JavaScript discutidos no documento.

Enviado por

Leonardo Zanin
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 87

Tcnico Informtica

JavaScript
Autor: Jefferson da Silva Mira
Contato: [email protected]

Indice
Fundamentos
Variveis
Constantes
Operadores
Funes em JavaScrip
Efeitos em JavaScript
Estruturas de controle
Object Orientation (OO)
Apndice




Fundamentos
JavaScript


Linguagem de programao interpretada;
No tem nada a ver com Java!
Interpretada totalmente pelo browser;
Linguagem Script:
Fracamente tipada;
Recursos de OO (Orientao a Objetos);
Possui funes de primeira classe;
Cdigos inseridos nas pginas HTML;
Criada pela Netscap, para tornar a pgina mais dinmica.
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 pgina WEB;

JavaScript: Insere aes na minha pgina WEB;
Como definir o cdigo JavaScript?
O cdigo 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 pginas externas, com o cdigo:
<script src="myScript.js"></script>

Exemplo
<html>
<head>
<title>Exemplo basico de JavaScript</title>

<script type="text/javascript">
alert("Hello World!");
</script>

</head>
<body>

</body>
</html>
Toda vez que a pgina
for aberta, ser
mostrada uma caixa de
texto com o texto
definido
Escrevendo valores na tela
possvel 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>
Variveis
Variveis em JavaScript
So fracamente tipadas (No necessitam ter seu
tipo definido na criao.

<HTML>
<BODY>
<SCRIPT LANGUAGE="Javascript">
var texto = "Meu nmero preferido o " ;
var variavel = 7 ;
document.write(texto + variavel);
</SCRIPT>
</BODY>
</HTML>

Quais so os tipos de variveis em
JavaScript
Tipo de dados Valores
Nmeros Todo nmero 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
Expresses de controle
Expresso O que
\n Nova Linha
\t Tab
\b Retrocesso
\ Aspas
\\ Barra
\f Salta Formulrio
\0 nulo
Para que seja possvel
utilizar certos caracteres
em variveis String,
existem comandos
expecias.
Os mais importntes
estam listados ao lado;
Valores especiais para variveis
Undefined: Varivel declarada, mas sem nenhum
valor definido ou atribuida ela.

Null: Quando atribuido um valor null

NaN (Not a Number): Quando uma varivel que
no um nmero utilizado como se fosse.

Infinity: Valores numricos muito altos.
Constantes
Variveis em JavaScript
Repositrios de dados que no tem
seu valor alterado;
Definidos pela palavra Const.

Exemplo: const HORAS_DO_DIA = 24;

Operadores
Autor: Jefferson da Silva Mira
Contato: [email protected]

Operadores Aritmticos
Operador Funo Exemplo
+ Adio 2 + 3, x+y
- Subtrao 7 5, a 10
* Multiplicao 3 * 5, I * J
/ Diviso 10/2, total/ quant
% Mdulo: O resto de uma
diviso
4%2 = 0
5%2 = 1
Operadores de Atribuio
Operador Funo Exemplo
= Atribuio X = 3;
*= Multiplicao e
atribuio
X *= 5;
igual: X = X*5;
/= Diviso e atribuio X /= 5;
igual: X = X/5;
-= Subtrao e atribuio X -= 5;
igual: X = X-5;
+= Soma e atribuio X += 5;
igual: X = X+5;
Operadores Relacionais
Operador Funo 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 Lgicos
Operador Funo Exemplo
&& Conjuno (e)
Para o resultado final ser verdadeiro, as duas
variveis tem que ser verdadeiras.
X = y && 3 < 10
|| Disjuno (ou)
Para o resultado final ser verdadeiro, apenas
uma das duas variveis pode ser verdadeira.
X <> Y || 5 >= y
! Negao (no).
Muda o valor das variveis lgicas.
!(x > Y)
Operadores de Incremento
Operador Funo Exemplo
x++ incrementao
(x++ o mesmo que x=x+1)
y = x++
x-- decrementao
(x-- o mesmo que x=x-1)
y= x--
Ordem dos Operadores
Operadores Mais Internos (Entre
Parnteses)
Operadores Aritmticos
Operadores Relacionais
Operadores Lgicos
Exerccios usando variveis e
Contantes
1. Crie um algoritmo monte uma tabela com a
tabuada de um nmero. Os valores devem
ser gerados atravz de operaes
matemticas;
Arrays
Definio
um conjunto de valores agrupado.
O ndice sempre comea em 0 (zero).
Pode conter qualquer tipo de valores, e os
tipos de valores podem vriar.
No necessrio definir o tamanho do array
ao criar.
Definio 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 posio.
pessoas[1+=Pessoa2";
pessoas[2+=Pessoa3";

2. possvel criar o array e j definir os valores que ele vai
ter, com a siguinte sintaxe:
var pessoas = ["Jefferson","Valdecir","Cezar","Pedro+;

3. possvel 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 varivel (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+;



Iterao em um array
possvel passar por todas as posies 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
So arrays que tem arrays internos.
So conhecidos tambm 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 posio deste array multidimesional, possvel
utilizar a seguinte sintaxe:

document.write(pessoas[1][3]);

Funes que esto disponveis na
maioria dos Browsers.
Funo O que faz
concat faz cpia 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 cpia simples da poro 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
Funes que esto disponveis em todos os
Browsers (menos IE <= 8)
Funo 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 funo fornecida retorna verdadeiro quando aplicada a todos
elementos
some retorna verdadeiro se a funo fornecida retorna verdadeiro quando aplicada a pelo
menos um elemento
forEach aplica a funo fornecida para todos elementos do Array
map cria um novo Array contendo os resultados da aplicao da funo a todos elementos do
Array
filter cria um novo Array contendo todos os elementos para os quais a funo fornecida
retorna verdadeiro
reduce aplica uma funo 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 verses mais antigas do Prototype.js)
reduceRight aplica uma funo simultaneamente para dois valores do Array (dadireita para a
esquerda) de forma a reduzi-los a um valor nico.
Caixas de Dilogo
O que isso?
Ferramenta utilizada para criar uma interface entre o
usurio e a mquina;
No javaScript existem trs caixas:
Alert:
Mensagem que apenas mostrada na tela.
Alert(Mostra um texto);
Prompt:
Tem um campo, um boto ok e um boto cancelar.
Sempre retorna um valor, caso o boto cancelar seja digitado, retorna null;
prompt(Mostra um texto);
Confirm:
Tem o boto ok e o cancelar. Retorna verdadeiro ou falso.


Funes em JavaScrip
Definio
So cdigos criados com um propsito especfico;
Existem dois tipos:
1. Criadas pelo JavaScript (Como o Alert());
2. Criadas pelo desenvolvedor;

So definidas pela sintaxe:

function nome_da_funo(argumentos) {
... cdigo de instrues ...
}

Parmetros de entrada e sada
Uma funo pode receber diversos parmetros;
Estes parmetros devem ser declarados;
Ao invocar a funo, os parmetros desejados devem ser passados;

Exemplo de declarao de funo:
function Exemplo(Texto) {
alert(texto);
}


Exemplo e chamada de funo:
Exemplo("Bom dia a todos");


Parmetros de entrada e sada
Uma funo pode ou no retornar um valor;
Este retorno definido pela palavra chave return.

Exemplo de retorno em uma funo:
function cubo(numero) {
var cubo = numero*numero*numero
return cubo;
}



Estruturas de controle
Autor: Jefferson da Silva Mira
Contato: [email protected]

Estruturas de controle
Uma estrutura de controle serve para que o algoritmo possa
executar um determinado bloco de aes, quando
determinadas condies, representadas por expresses
lgicas ou relacionais, so satisfeitas. Existem dois tipos de
estruturas de controle de seleo:
Seleo simples:
If(condio){... }
If(condio){... }else{}
If(condio){...}else if(condio){... }
Operao ternria: condio?expresso1:expresso2
Seleo composta
Switch(varivel)... case... Default;
Estrutura de seleo simples
if (condio){
comando;
}else{
comando;
}
Ou

if (condio){
comando;
}else if (condio){
comando;
}
Estrutura de seleo composta
switch(varivel)
{
case constante1:
seqncia de comandos
break;
case constante2:
seqncia de comandos
break;
...

default:
seqncia de comandos
}
Exerccios
1. Crie uma calculadora, utilizando switch-case;
2. Crie um algoritmo que defina se uma varivel
representa: uma linguagem de programao
(java, html, javaScript, html) ou um tipo de
dados (inteiro, real, logico, caracter).

Estruturas de Repetio
Autor: Jefferson da Silva Mira
Contato: [email protected]

Como repetir?
Existem, principalmente, dois tipos de
repetio:
for
Repetio baseada num nmero de vezes pr-definido;
While
Repetio at que uma determinada condio seja
verdadeira;
For (velho amigo Para)
Coisas para se falar a respeito da
varivel controladora
Pode ter qualquer nome (cont apenas um
exemplo);
O incremento da varivel controladora pode
ser realizado com base em qualquer valor
inteiro (positivo ou negativo);
No recomendvel alterar o valor dentro do
bloco de instrues;
E como funciona afinal?
While (enquanto, para os intimos)
Do .. While (ou repita, se preferir)
E por ltimo: for ... in ...
Estrutura de repetio especialmente feita
para quando voc quiser aplicar o mesmo
algoritmo em todos os elementos de um
vetor. Ex:

for( /*uma varivel aqui*/ in /*um vetor aqui */){
/*seu cdigo 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: [email protected]

Inserindo efeitos em eventos
possvel utilizar a funo onclick= para definir uma ao que
ser executada:

<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript pode ser executado em eventos. Click no boto:</p>

<button type="button" onclick="alert('Bem Vindo!')">Clique aqui!</button>
</body>
</html>
Lista de eventos possveis
onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do
documento.
onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY.
onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo.
Vlido para os objetos Text, Select e Textarea.
onblur - Ocorre quando o objeto perde o focus, independente de ter havido
mudana. Vlido para os objetos Text, Select e Textarea.
onfocus - Ocorre quando o objeto recebe o focus. Vlido para os objetos Text,
Select e Textarea.
Onclick/OnBblClick - Ocorre quando o objeto recebe um Click do Mouse. Vlido
para os objetos Buton, Checkbox, Radio, Link, Reset e Submit.
Onmouseover/onmounseout - Ocorre quando o ponteiro do mouse passa por
sobre o objeto.Vlido apenas para Link.
onselect - Ocorre quando o objeto selecionado. Vlido para os objetos Text e
Textarea.
onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse.
Vlido apenas para o Form.
Onmousemove: Quanto o mouse passa por cima do objeto

DOM
O que hells isso?
Document Object Model (DOM);
a representao de todo o documento
HTML em forma de atributos e nodes;
possvel acessar cada um destes atribus,
mudar ou deletar eles;
possvel criar novos atributos ou adicionar
formataes.
Tudo isso dinmicamente!!!

Representao grfica disso tudo
Mais um exemplo
S mais um
Mas o que so estes objetos?
DOM
Window object: Objeto que est no topo da arvore.
Document object: A pgina HTML.
Form object: a definio das tags <form>...</form>. Utilizando
isto, possvel acessar as opes do form.
Elementos do Form: Definio de todos os elementos do form.


possvel acessar um atributo da minha pgina com o comando
document.getElementById(ID do elemento);
possvel acessar o contedo de uma tag utilizando o comando
document.getElementById(ID do elemento").innerHTML=valor";


E para que saber disso?
Para conseguir recuperar os atributos da
pgina, usando dois mtodos 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 mtodo um array que
pode ser acessado usando um contador de
array;
Tambm possvel saber quantos elementos
desse tipo tem no documento olhando o
atributo .length;
E no s isso!!
Recuperando um atributo, possvel acessar as
seguintes propriedades:
nextSibling: Recupera o prximo atributo, do
mesmo level;
previousSibling: Recupera o elemento anterior, do
mesmo level;
parentNode: Recupera o pai do atributo em
questo;

Atributos de elementos pai
ChildNodes: Recupera uma lista de todos os
elementos que so nodes, mas no seus filhos;
possvel 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 rpidas:
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 abstrao de coisas da vida real;
So definidos por propriedades e por mtodos que alteram
as propriedades.

Exemplo
Objeto: Pessoa;
Atributos:Altura, peso, profissao;
Mtodos: andar(),dormir(), trabalhar();

Acessando um atributo: pessoa.peso;
Acessando um mtodo: pessoa.dormir();

Objetos
Como criar o objeto:
var objeto_vazio = {};
var curso = { sigla : " K11 ", nome : " Orientao a Objetos em Java "};
Como recuperar os valores de objetos?
var curso = {
sigla:" K11 ",
nome:" Orientao 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 propredade
var curso={sigla:"PRW",nome:"Programao WEB"};

//Alterando o valor dos atributos
curso.sigla="Prog WEB";
curso.nome="Programao 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 possvel utilizar a funo
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?
possvel verificar se uma propriedade existe em um
objeto usando o comando in.

var curso = { sigla : " Inf ", nome:"Informatica programao
WEB"};

// imprime true
document.write("sigla" in curso);

// imprime false
document.write("carga_horaria" in curso);
Mtodos
Quando uma funo declarada dentro de um objeto, ela
chamada de mtodo.

//Definindo o objeto com a funo
var conta = {
saldo : 0,
deposita : function ( valor ) {
this . saldo += valor ;
}
}

//Invocando o mtodo
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 utilizao de nmeros.

Contm diversas funes:
X= Math.abs(valor); - Retorna o valor absoluto do nmero passado
como parmetro;
X = Math.ceil(valor); - Retorna o valor inteiro superior ao valor passado
como parmetro;
X = Math.floor(valor); - Retorna o inteiro inferior ao nmero passado
como parmetro;
X = Math.round(valor); - Arredonda o nmero ao inteiro mais prximo;
X = Math.max(valor1,valor2); - Retorna o maior valor dos dois nmeros
passados;
X = Math.min(valor1,valor2); - Retorna o menor valor dos dois nmeos
passados;
Objeto Date
O que
Objeto que contm todas as informaes do
computador que est sendo utilizado;

O seguinte cdigo imprimir a data e a hora
atual do sistema:
var data = new Date();
document.write(data.getHour());
Mtodos teis
getYear(): Retorna dois ltimos digitos do ano;
getMonth(): Retorna nmero do ms (0 11);
getDate(): Retorna o dia do ms (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 manipulao 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(): mtodo que retorna um caractere que est na
posio especificada;
indexOf(): Retorna a posio de uma cadeia parcial de
caracteres;
lastIndexOf(): retorna a posio de uma cadeia parcial a partir
de uma posio determinada;
substring(x,y): Retorna uma String parcial situada entre as
posies x e y-1;
toLowerCase(): Transforma todas as letras em minsculas;
toUpperCase(): Transforma todas as letras em maisculas.

Apndice
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/

Você também pode gostar