Introduo a Lgica

Noes de Lgica
Lgica algo muito comum na nossa
vida, a prova disso o que fazemos
durante o dia, pois mesmo sem
perceber usamos a lgica a todo
momento, por exemplo:

Noes de Lgica
Ao acordamos:
Tomamos um banho.
Escovamos os dentes.
Tomamos o caf da manh.
Para irmos ao trabalho:
Colocamos uma roupa apropriada.
Pegamos um nibus.
Chegamos no trabalho.

O que lgica.
Lgica vem do grego clssico logos (),
que significa palavra, pensamento, ideia,
argumento, relato, razo lgica ou princpio
lgico. uma parte da filosofia que estuda o
fundamento, a estrutura e as expresses
humanas do conhecimento. A lgica foi
criada por Aristteles no sculo IV a.C. Para
estudar o pensamento humano e distinguir
interferncias e argumentos certos e
errados.

Lgica de programao.
Lgica de programao a tcnica de
encadear pensamentos para atingir
determinado objetivo.
Vrios idiomas;
Vrias Linguagens.

O que um algoritmo.
Algoritmo um sequncia finita de
passos que levam a execuo de uma
tarefa. Podemos pensar em algoritmo
como uma receita de bolo, uma
sequncia de instrues que busca
uma meta especfica. Estas tarefas no
podem
ser
redundantes
nem
subjetivas na sua definio, logo,
devem ser claras e precisas.

O que um algoritmo.
Ao contrrio de uma linguagem de
programao,
no
existe
um
formalismo rgido de como deve ser
escrito o algoritmo. O algoritmo deve
ser fcil de se interpretar e fcil de
codificar, ou seja, ele deve ser o
intermedirio entre a linguagem falada
e a linguagem de programao a qual
for definir.

Exemplos de algoritmos no
cotidiano.
Trocar uma lmpada.

Pegar uma escada

Pegar uma lmpada nova.
Subir na escada.
Retirar a lmpada velha.
Colocar a lmpada nova.
Descer da escada.
Guardar a escada.
Colocar a lmpada velha no lixo.
Ligar o interruptor para testar.

Exemplos de algoritmos no
cotidiano.
Somar dois nmeros quaisquer.
Escreva o primeiro nmero no retngulo A.
Escreva o segundo nmero no retngulo B.
Some o nmero do retngulo A com
nmero do retngulo B e coloque o
resultado no retngulo C.

Importncia de construir um
algoritmo.
Um
algoritmo
tem
um
papel
importante, pois ele determina de que
formas
podemos
resolver
um
determinado problema, um programa
de computador por exemplo,
desenvolvido com muita lgica e
principalmente
um
conjunto
de
algoritmos.

As maneiras de representarmos um
algoritmo.
Descrio Narrativa;
Fluxograma Convencional;
Pseudocdigo (tambm conhecido
como Portugus Estruturado ou
Portugol).

Descrio Narrativa.

Fluxograma Convencional
uma representao grfica de algoritmos
onde formas geomtricas diferentes implicam
aes (instrues, comandos) distintos. Tal
propriedade facilita o entendimento das ideias
contidas nos algoritmos e justifica sua
popularidade. Nota-se que os fluxogramas
convencionais preocupam-se com detalhes de
nvel fsico da implementao do algoritmo. Por
exemplo, figuras geomtricas diferentes so
adotadas para representar operaes de sada
de dados realizadas em dispositivos distintos.

Fluxograma Convencional

Exemplo de fluxograma
convencional.

Introduo JavaScript.
JavaScript uma linguagem para auxlio na
criao de Home-Pages, as funes escritas em
JavaScript podem ser embutidas dentro de seu
documento HTML, possibilitando o incremento
das funcionalidades do seu documento HTML
com elementos interessantes. Sendo possvel:
responder facilmente a eventos iniciados pelo
usurio, incluir efeitos que tornem sua pgina
dinmica. Logo, podemos criar sofisticadas
pginas com a ajuda desta linguagem.

Introduo JavaScript.
Criado pela Netscape;
Chamava-se LiveScript;
LiveScript
reestruturado
Microsystems criadora do Java;

pela

Hoje o JavaScript um padro aberto e

empresas de todo o mundo a suportam.

Java diferente de
Javascript.
Java uma linguagem de
programao;
JavaScript uma linguagem de
hipertexto;
JavaScript no cria applets ou
aplicativos independentes.

Principais diferenas.
Java uma linguagem de programao OOP, ao
passo que Java Script uma linguagem de scripts
OOP.
Java cria aplicativos executados em uma
mquina virtual ou navegador, ao passo que o
cdigo JavaScript executado apenas em um
navegador.
O cdigo Java precisa ser compilado, ao passo
que os cdigos JavaScript esto totalmente em
texto, apenas interpretado.
Eles requerem plugins diferentes.

Entendo o JavaScript.
O javascript rpido pois no
compilado, e sim interpretado pelo
navegador do usurio.

Usando JavaScript.
Um cdigo JavaScript pode ser inserido
em um documento HTML de duas
formas:
colocando o cdigo JavaScript como filho
de um elemento com a tag script;
utilizando o atributo src de um elemento
com a tag script no qual devemos
passar o caminho relativo ou absoluto
para um arquivo que contenha o cdigo
JavaScript.

Usando JavaScript.

Variveis.
Vamos entender varivel, como uma
caixa, na qual voc pode dar o nome
que lhe achar conveniente, e guardar
o contedo que desejar. Ou seja, toda
varivel tem um nome, valor e tipo.

Tipos de Variveis.
O tipo uma classificao que damos a
varivel, essa classificao informa qual
forma de dado se encontra ali armazenado.
As variveis, podem ser classificadas com os
tipos:
Inteiro:(negativo,
nulo
ou
positivo).
Exemplos: {...-4,-3,-2,-1,0,1,2,3,4...};
Real:(negativo,
nulo
ou
positivo).
Exemplos: {15.34; 123.08; 0.005 ;-12.0;
510.20};

Tipos de Variveis.
Numrico: abrange nmeros binrios,
octal e hexadecimal;
Caracteres: Exemplo: {'a', 'd', 'A', 'h'};
Dados
literais:
Conjunto
de
caracteres ou String (nmeros, letras e
caracteres
especiais).
Exemplos:
{Aluno Aprovado, 10% de multa,
Confirma
a
excluso
??,
S,
9930002, email,123nm,fd54fd}.

Tipos de Variveis.
Lgico: A todo e qualquer dado que
s pode assumir duas situaes
biestveis, algo como por exemplo
{0/ 1, verdadeiro/falso, sim/no,
true/false}.

Nomes das Variveis.

(Identificadores).
Os identificadores so case sensitive;
Nomes de variveis podem ser de
qualquer comprimento, em algumas
linguagens existe limite no nmero
de caracteres que compe o
identificador, por essa e pela questo
de legibilidade tente no ultrapassar
15 caracteres;

Nomes das Variveis.

(Identificadores).
Crie identificadores que informe
explicitamente para que aquela
varivel ir servir na composio do
seu programa, ou seja se uma
varivel vai armazenar um valor
inteiro que ir aumentar de um em
um at chegar 100, coloque o nome
dessa varivel de contador;

Nomes das Variveis.

(Identificadores).
O primeiro caractere deve ser uma letra
ASCII (em maiscula ou minscula) ou
um caractere de sublinhado (_).
Observe que um nmero no pode ser
usado como o primeiro caractere;
Os caracteres subsequentes devem ser
letras, nmeros ou sublinhados (_);
O nome da varivel no deve ser uma
palavra reservada.

Declarando ou criando uma

varivel.
Declarar uma varivel tecnicamente pedir ao
sistema operacional um espao exclusivo na
memria RAM do seu computador para
armazenar uma informao.
String nome = new String(Jonas)
int idade = 25;
char opcao = S;
Inteiro quantidade = 100;
contador = 1;
modeloCarro = Celta;

Linguagens de Programao
Fracamente e Fortemente Tipadas.
Linguagem fortemente tipadas(LST):
Inteiro contador = 1;
Caracter sexo = F;
String nome = Jonas;
Linguagem de Programao Fracamente
Tipada(LWT) ou de tipagem dinmica:
idade = 18 (tipo String);
idade = 18 (agora a varvel idade
do tipo inteiro);

Variveis em JavaScript: Declarando

ou criando uma varivel JavaScript.
Diferente da maioria das linguagens o
JavaScript define as variveis
dinamicamente. Existem dois tipos de
sintaxe de declarao de varivel em
JavaScript que so:
var nome-da-varivel = valor-davarivel; ou nome-da-varivel = valorda-varivel;

Palavras-chave em
JavaScript.

Palavras-chave que so reservadas,

mas no so usadas pelo JavaScript.

Tipos de variveis em JavaScript:

string e nmeros.
<script>
var valor1= 10; //valor do tipo inteiro
var valor2= 3.14; //agora valor2 do tipo
float
//imprimir na tela
document.write(valor1 + um valor
inteiro, j + valor2 + um ponto
flutuante!);

</script>

Tipos de variveis em JavaScript:

string e nmeros.
<script>
var nome = Andr;
var cidade = Rio claro;
document.write(Meu nome +
nome + e sou de+ cidade);
</script>

Outros tipos de dados

JavaScript
Booleanos:
<script>
var nome = false;
if (nome == false) {
document.write (A varivel booleana est
<b> FALSA </b>. )
} else {document.write (A varivel booleana
est <b> VERDADEIRA </b>.
}
</script>

Outros tipos de dados

JavaScript
Constante:
<script>
const valor = 10;
document.write(O valor constante
+ valor);
</script>

Outros tipos de dados

Undefined: JavaScript

Null:
<script>
var pessoa; //varivel com valor no
definido
var carro = Volvo;
document.write( pessoa + <br>);
document.write( carro+ <br>);
var carro = null;//varivel definida como
vazia ou nula
document.write( carro+ <br>);
</script>

Outros tipos de dados

JavaScript
Array:

<script>
/*Exemplo de um vetor
unidimensional*/
var meu_vetor = new Array (Nao
Livre , 10, 3.18, 18);
document.write (vetor[0]); //Exibe
Nao Livre
</script>

Outros tipos de dados

JavaScript
Object:
<script>
/*Trs formas de se criar o mesmo
objeto no JavaScript*/
var objeto = {};//forma01
var objeto = new objeto(); //forma02
var objeto = Obejct.create
(null);//forma03
</script>

Variveis Globais e Locais.

Varivel Global: Criada ou declarada fora
de uma funo, portanto podem ser
utilizadas a qualquer momento no seu
script;
Varivel Local: Criada ou declarada dentro
de uma funo, portanto s podem ser
utilizadas dentro da funo criada.
Funes: so bloco de cdigos que so
executados todas as vezes que invocados
por um identificador.

Variveis Globais e Locais.

<script>
var nome = Joo;
document.write ( Nome + nome + );
Function exemplo1 () {
var nome = Andr;
document.write ( Nome + nome + );
}
</script>
<body>
<script>
exemplo1 ();
document.write (nome);
</script>
</body>

Operadores em JavaScript:
operadores de strings.
Concatenao (+);
Atribuio de Concatenao (+=).
<script>
var a = Bem vindo;
var b = ao site;
var c = de pesquisa;
document.write(a+b+c) // imprime: Bem vindo ao site de
pesquisa
var d = a+b+c;
d += tecnologia;
document.write (d); //imprime: Bem vindo ao site de pesquisa
tecnologica
a += aluno;
document.write (a); // imprime: Bem vindo aluno
</script>

Operadores matemticos:
Aritmticos.

Operadores Aritmticos.
<script>
var a = 3;
var b = 4;
document.write (a*b+5-2*3) //
12+5-6=11
document.write (a*(b+5)-2*3) // 3*96=21
</script>

Operadores de Atribuio.
Os operadores de atribuio so
usados para economizar linhas de
cdigo, deixando assim o cdigo mais
funcional e otimizado.

Operadores de Atribuio. 2

Atribuio para array e

string.

Atribuio.

Operadores de decremento e
incremento.
So operadores usados para atribuir
em 1 ou -1 a varivel, isso pode ser
feito antes ou depois da execuo de
determinada varivel.

Operadores de decremento e
incremento. 1

Operadores relacionais.
Os
operadores
relacionais
ou
conhecidos tambm como operadores
de comparao, so utilizados para
fazer determinadas comparaes entre
valores ou expresses, resultando
sempre um valor booleano verdadeiro
ou falso(TRUE ou FALSE).

Operadores relacionais. 1

Operadores lgicos ou
booleanos.
So utilizados para avaliar expresses
lgicas. Estes operadores servem para
avaliar expresses que resultam em
valores lgico sendo verdadeiro ou falso:

Operao de Negao: 1

Operao de conjuno:

Operao de disjuno no
exclusiva:

Operao disjuno:

Operadores lgicos ou booleanos. 1

Precedncia de Operadores.
Quem mais importante, qual
operador avaliado primeiro e qual
avaliado em seguida.

Caixa de Dilogo: Alert(). 1

As caixas de dilogo de alerta so simples
e informativas. Elas, geralmente, so
utilizadas em validao de formulrios ou
bloqueio de aes. Sua funo mostrar
apenas uma mensagem com um boto de
confirmao para que esta seja fechada.
Para chamar esta caixa de dilogo usamos
a funo alert(). Esta funo recebe como
parmetro uma string que ser a
mensagem a ser exibida.

Caixa de Dilogo: Prompt().

1
A caixa de dilogo de prompt() nos
possibilita requerer uma entrada ao
usurio. A caixa de dilogo de
prompt() possui trs elementos: um
campo input para texto, um boto OK
e outro CANCELAR.

Caixa de Dilogo: confirm()

1
A caixa de dilogo de confirmao
chamada pela funo confirm() e tem
apenas dois botes: um OK e outro
CANCELAR. Assim como a funo
prompt(), a funo confirm() tambm
retorna um valor que pode ser true
(verdadeiro) ou false (falso).

Estruturas de controle e repetio:

Blocos de controle
Um bloco consiste de vrios comandos
agrupados com o objetivo de relacionlos com determinado comando ou funo.
Blocos em JavaScript so delimitados
pelos caracteres { e }.
Usar as estruturas de controle sem blocos
delimitadores faz com que somente o
prximo comando venha ter ligao com
a estrutura.

Estrutura Condicional: If .
Essa estrutura condicional est entre as mais
usadas na programao. Sua finalidade
induzir um desvio condicional, ou seja, um
desvio na execuo natural do programa. Caso
a condio dada pela expresso seja satisfeita,
ento sero executadas a instrues do bloco
de comando. Caso a condio no seja
satisfeita,
o
bloco
de
comando
ser
simplesmente
ignorado.
Em
lgica
de
programao o que usamos como SE
(expresso) ENTO {comando:}.

Estrutura Condicional: If e if.

1

Estrutura Condicional: If e
else.
Caso a condio no seja satisfatria
(FALSE), podemos atribuir outro
comando pertencente ao IF chamado
ELSE, como se fosse a estrutura
SENO em lgica de programao.

Estrutura Condicional: If e
else. 1

Estrutura Condicional: else e if. (ifs

encadeados) 1
Sintaxe:
if (expresso1) { comando1;
} else if (expresso2){ comando2;
} else if (expresso3){ comando3;
} else { comando4}

Atribuio condicional
(ternrio) 1
Como j vimos exemplos de atribuio
condicionais (ternrios), podemos defini-los
usando a sintaxe:
(expresso booleana) ? (executa caso
verdadeiro) : (executa caso falso);
Isso se aplica quando queremos uma
estrutura resumida, onde podemos ter um
resultado mais direto, como por exemplo,
atribuir um valor a uma varivel dependendo
de uma expresso.

SWITCH. (Substituto dos ifs

encadeados)
O comando SWITCH uma estrutura
que simula uma bateria de teste sobre
uma varivel. Frequentemente
necessrio comparar a mesma varivel
com valores diferentes e executar uma
ao especifica em cada um desses
valores.

SWITCH. (Substituto dos ifs

encadeados)

SWITCH com BREAK e

default 1
Break uma instruo (comando) passada
quando queremos parar o fluxo da
execuo de um programa. Em JavaScript,
ele tem a mesma funo que abortar o
bloco de cdigo correspondente.
Temos um comando onde determinamos
uma opo padro caso nenhuma das
outras venha ter resultado que satisfaa a
expresso passada para o switch chamada
default (padro).

WHILE.
O WHILE uma estrutura de controle
similar ao IF, onde possui uma condio
para executar um bloco de comandos. A
diferena primordial que o WHILE
estabelece um lao de repetio, ou seja, o
bloco de comandos ser executado
repetitivamente enquanto a condio
passada for verdadeira. Esse comando
pode ser interpretado como ENQUANTO
(expresso) FAA { comandos...}.

WHILE. 1
Sintaxe:
While (expresso) {
Comandos;
}

Propriedade length 1
A propriedade length chamada logo
aps uma varivel de texto e retorna a
quantidade de caracteres incluindo
tambm os espaos em branco.

DO...WHILE.
O lao do...while funciona de maneira
bastante semelhante ao while, com a
simples diferena que a expresso
testada ao final do bloco de comandos.

DO...WHILE. 1

FOR.
O for semelhante ao while, onde tem a
finalidade de estabelecer um lao de repetio
em um contador. Sua estrutura controlada
por um bloco de trs comandos que
estabelecem uma contagem, ou seja, o bloco
de comandos ser executado determinado
nmero de vezes. A estrutura while e do
while normalmente usado quando o
programador no sabe quantos loops o
sistema ir realizar, j o for informamos
explicitamente qual ser o ponto de partida, o
seu limite, e valor de incremento ou
decremento.

FOR.

FOR. 1 2
Parmet Descrio
ros
Inicializa
o

Parte do for que executado

somente uma vez, usado para
inicializar uma varivel.
Condio
Parte do for onde declarada
uma expresso booleana.
Incremento Parte do for que executada a
cada interao do lao.

FOREACH 1
O foreach um lao de repetio para
interao em array's ou matrizes, o
qual estudaremos com mais detalhes
no prximo captulo. Trata-se de um for
mais simplificado que compe um
vetor ou matriz em cada um de seus
elementos por meio de sua clusula
IN.

FOREACH 1
Sintaxe:
vetor = [];
for (indice in vetor){ comando...
}

FOREACH
Veremos adiante que um array uma
varivel composta por vrios elementos. No
caso do exemplo , esses elementos so
nomes de cursos. A finalidade do foreach
justamente a cada lao, pegar cada ndice
desses valores e atribuir a uma varivel
indice at que tenha percorrido todo array
e assim, finalizar o lao. Podemos saber em
qual posio o elemento se encontra no
array, para isso basta imprimir o ndice.

Break. 1
Outro comando importante o break,
usado para abortar (parar) qualquer
execuo de comandos como SWITCH,
WHILE, FOR, FOREACH, ou qualquer
outra estrutura de controle. Ao
encontrar um break dentro de um
desses
laos,
o
interpretador
JavaScript interrompe imediatamente a
execuo
do
lao,
seguindo
normalmente o fluxo do script.

CONTINUE. 1
A instruo continue, quando executada
em um bloco de comandos for/while,
ignora as instrues restantes at o
fechamento em }. Dessa forma, o
programa
segue
para
a
prxima
verificao da condio de entrada do lao
de repetio, funciona de maneira
semelhante ao break, com a diferena que
o fluxo ao invs de sair do lao volta para o
incio dele.

Objetos em javascript.
Quase Tudo em JavaScript um
objeto: uma String, um nmero, uma
matriz, uma data, um boto ...
Em JavaScript, um objeto so
variveis que guardam atributos e
mtodos:
Atributos so caractersticas de um
objeto.
Mtodos so aes que um objeto pode
realizar;

Objetos em javascript.

Objeto String, Acessando atributos e

mtodos.
Em JavaScript como j mencionado quase
tudo objeto. Quando declaramos uma
varivel dessa forma:
var txt = hello;

O que realmente estamos fazendo criando

um objeto String JavaScript. O objeto String
tem vrios mtodos e alguns atributos j
prontos para facilitar o seu trabalho quando
for preciso manipular Strings, os quais so
chamados built-in, ou seja, mtodos que so
nativos do JavaScript.

Acessando Atributos.
Para acessarmos um atributo ou
mtodos de um objeto usamos o
operador ponto ( . ), logo aps o nome
do objeto.

Se
executarmos
a
instruo
document.write(tamanhoDaString);
ser mostrado o valor 5 na pgina.

Acessando Mtodos.
Para acessarmos os mtodos de um
objeto tambm utilizamos o operador
ponto ( . ), logo aps o nome do
objeto, a diferena que aps o nome
do
mtodo
que
ser
chamado
digitamos parnteses ( ), nos quais
podemos colocar ou no argumentos
dentro.

Acessando Mtodos.
Exemplo:

Este mtodo responsvel por

converter todos os caracteres de uma
String para maisculo. A sada desse
trecho de cdigo JavaScript essa:

Mtodos e atributos que um objeto 1

String JavaScript possui:
Atributos:
length; // retorna nmero de caracteres.
prototype; //retorna classe do objeto.
constructor.
Mtodos:
charArt(), charCodeArt(), concat(), fromCharCode(),
indexOf(), lastIndexOf(), match(), replace (),
search(), slice(), split(), substr(), substring(),
toLowercase(), toUpperCase(), valueOf().

Objeto Number.
JavaScript tem apenas um tipo de nmero,
os quais podem ter ou no casas
decimais. JavaScript no uma linguagem
tipada, ao contrrio de muitas outras
linguagens de programao, ela no
define diferentes tipos de nmeros, como
nmeros int, short, long, float... Todos os
nmeros em JavaScript so armazenados
como float de 64 bits(8 bytes).

Objeto Number: Atributos e

Mtodos.
Atributos:
MAX_VALUE,
MIN_VALUE,
NEGATIVE_INFINITIVE,
POSITIVE_INFINITIVE, NaN, prototype,
constructor.
Mtodos:
toExponential(),
toFixed(),
toPrecision(), toString(), valueOf().

Objeto Number: atributos

Number.MAX_VALUE O nmero mais alto que
pode ser utilizado em Javascript.
Number.MIN_VALUE O menor nmero que
podemos utilizar em Javascript.
Number.NEGATIVE_INFINITY Quando um nmero
ultrapassa o menor nmero possvel em
Javascript.
Number.POSITIVE_INFINITY Quando um nmero
ultrapassa o maior nmero possvel em Javascript.
Number.NaN Representa um valor "Not-aNumber" (No um nmero) em Javascript.

Atributos objeto Number

CONSTANTES
Para utilizar esses atributos, que so
constantes, no precisamos criar ou
instanciar um objeto do tipo Number
como fizemos no Objeto String.
Colocamos apenas a palavra-chave
Number seguido de um ponto( . ) e j
conseguimos
acessar
os
valores
contidos nessa constante.Ex:

Atributos objeto Number

CONSTANTES
Number.MAX_VALUE retorna o maior
nmero que pode ser representado em
javascript:
1.7976931348623157e+308
Number.MIN_VALUE retorna o nmero
mais
de
zero
que
pode
serrepresentado em javascript:
5.00E-324

Objeto Number: mtodos 1

toExponential( valor numrico )
Retorna uma string representando uma
notao exponencial;
toFixed( valor numrico ) Retorna
uma string representando um nmero
usando notao de ponto fixo;
toPrecision( valor numrico ) Retorna
uma string representando uma nmero
usando uma preciso determinada.

Representao de um numero em
Hexadecimal, Octal e notao cientfica.

Hexadecimal: Podemos representar

um nmero em hexadecimal em
JavaScript colocando o valor : 0x na
frente do nmero a ser representado:

Representao de um numero em
Hexadecimal, Octal e notao cientfica.

Octal: 0 na frente do nmero a ser

representado.

Notao cientfica:

Objeto Math.
Em JavaScript, podemos fazer uso de
um objeto prprio para clculos
matemticos chamado Math que
possui constantes, mtodos para
calcular
potncias,
razes,
arredondamentos,
funes
trigonomtricas,
maneiras
de
encontrar o menor e o maior valor,
alm de um gerador de nmeros
randmicos.

Constantes.
E: constante do nmero de Euler.
(2,718281828459045)
LN2: constante com o resultado do logaritmo
natural na base 2. (0,6931471805599453);
LN10: constante com o resultado do
logaritmo natural na base 10.
(2,302585092994046);
LOG2E: constante com o resultado do
logaritmo na base 2 do nmero de Euler.
(1,4426950408889634);

Constantes. 1
LOG10E: constante com o resultado do
logaritmo na base 10 do nmero de
Euler. (0,4342944819032518);
PI: constante do pi ( ).
(3,141592653589793);
SQRT1_2: constante com o resultado da
raz quadrada de meio. (
0,7071067811865476);
SQRT2: constante com o resultado da
raz quadrada de 2 (2
1,4142135623730951);

Objeto Math e seus

mtodos.
Razes e Potncias:
O mtodo sqrt() extrai a raz
quadrada do nmero passado como
argumento.
O mtodo pow() retorna o valor da
potncia
indicada
em
seus
parmetros,
sendo
o
primeiro
parmetro o nmero base e o
segundo o expoente.

Objeto Math e seus

mtodos. 1
possvel tambm fazer o clculo
utilizando a constante de Euler. Para
isso, usamos um mtodo prprio
chamado exp(), que recebe apenas
um argumento que o expoente da
potncia.

Arredondamentos.
O mtodo round() arredonda um
nmero para o inteiro mais prximo,
tanto para baixo quanto para cima.
Por
exemplo,
o
nmero
3.3
arredondado ser 3, mas o nmero
3.8 arredondado ser 4.
O mtodo floor() arredonda um
nmero para o inteiro mais baixo.
Tambm considerado como piso.

Arredondamentos.
O mtodo ceil() arredonda um
nmero para o inteiro mais alto.
Tambm considerado como teto.
O mtodo abs() remove apenas a
parte fracionada. Ou seja, retorna o
valor absoluto.

Trigonometria

sin(): retorna o valor de seno;

cos(): retorna o valor de cosseno;
tan(): retorna o valor da tangente;
asin(): retorna o valor do arco seno;
acos(): retorna o valor do arco
cosseno;
atan(): retorna o valor do arco
tangente;

Maior e Menor. 1
Existem dois mtodos do objeto Math
que servem como comparativos.
min(valor1, valor2): retorna o menor
valor entre os parmetros passados.
max(valor1, valor2): retorna o maior
valor entre os parmetros passados.

Nmero Randmico. 1
O objeto Math tambm possui um mtodo para
gerar automaticamente nmeros randmicos. O
mtodo random() retorna um nmero entre 0 e
1, ou seja, pode ser 0, 1, 0.5, 0.2, 0.8,
0.4567412, e assim por diante. Se, por exemplo,
quisermos fazer o limite entre 0 e 10, basta que
multipliquemos por 10 o valor retornado por
random(). Dessa forma conseguiremos um
nmero entre randmico maior. O problem a de
se usar isso que os nmeros retornados
sempre sero muito fracionados, portanto, o
ideal utilizar junto uma das funes de
arredondamento vistas nos tpicos anteriores.

Objeto Boolean
Os
objetos
boolean
servem
para
representar
os
valores
booleanos
(true/false). Uma de suas possveis
caractersticas a de conseguir valores
booleanos a partir de dados de qualquer
outro tipo. Dependendo do que receba o
construtor da classe Boolean o valor do
objeto booleano que se cria ser
verdadeiro ou falso, da seguinte maneira:

Objeto Boolean. 1
Inicia-se false: quando voc no passa
nenhum valor ao construtor, ou se
passa uma cadeia vazia, o nmero 0
ou a palavra false sem aspas. Inicia-se
true: quando recebe qualquer valor
entre aspas ou qualquer nmero
distinto de 0. Pode-se compreender o
funcionamento deste objeto facilmente
se examinarmos alguns exemplos.

Objeto Date.
O objeto Date usado para trabalhar
com datas e tempo. Para trabalhar
com datas necessitamos instanciar um
objeto da classe Date e com ele j
podemos realizar as operaes que
necessitamos.

Criando um objeto Date.

Para criar um objeto com o dia e hora
atuais, colocamos os parnteses
vazios ao chamar ao construtor da
classe Date.

Definindo uma data

especfica. 1
Para criar um objeto data com um dia e hora
diferentes dos atuais temos que indicar entre
parnteses o momento para iniciar o objeto.
Um detalhe, o ms comea por 0(zero), ou
seja, janeiro o ms 0. Se no indicamos a
hora, o objeto data se cria com hora 00:00:00.
Assim possvel criar um objeto Date com o
valor de qualquer data. Lembre-se de que o
valor do ms parece sempre diminudo de 1,
porque janeiro=0, fevereiro=1, maro=2, ...,
dezembro=11!! At o argumento "dia"
obrigatrio, os outros so opcionais.

Mtodos do Objeto Date

O
objeto
Date
no
possui
atributos/propriedades, por outro lado,
possui muitos mtodos. A seguir sero
apresentados
alguns
dos
seus
principais mtodos:

Mtodos do Objeto Date

1. getDate(): devolve o dia do ms,
um inteiro entre 1 e 31.
2. getDay(): devolve o dia da semana,
inteiro entre 0 e 6 (0 para Domingo).
3. getHours(): retorna a hora, inteiro
entre 0 e 23.
4. getMinutes(): devolve os minutos,
inteiro entre 0 e 59.

Mtodos do Objeto Date

5. getSeconds(): devolve os segundos,
inteiro entre 0 e 59.
6. getMonth(): devolve o ms, um
inteiro entre 0 e 11 (0 para Janeiro).
7. getTime(): devolve os segundos
transcorridos entre o dia 1 de janeiro
de 1970 e a data correspondente ao
objeto ao que se passa a mensagem.

Mtodos do Objeto Date

8. getYear(): retorna o ano, os ltimos
dois nmeros do ano. Por exemplo, para
o 2006 retorna 06. Este mtodo est
obsoleto agora se utiliza getFullYear().
9. getFullYear(): retorna o ano com
todos os dgitos com datas posteriores
desde 2000.
10. setDate(d): atualiza o dia do ms.

Mtodos do Objeto Date

11. setHours(h): atualiza a hora.
12. setMinutes(m): muda os minutos.
13. setMonth(m): muda o ms
(ateno ao ms que comea por 0).
14. setSeconds(s): muda os segundos.
15. setTime(t): atualiza a data
completa. Recebe um nmero de
segundos desde 1 de janeiro de 1970.

Mtodos do Objeto Date

16. setYear(y): muda o ano, recebe um
nmero, ao que lhe soma 1900 antes de
coloc-lo como ano data. Por exemplo, se
receber 95 colocar o ano 1995. Este mtodo
est obsoleto agora se utiliza setFullYear(),
indicando o ano com todos os dgitos.
17. setFullYear(): muda o ano da data ao
nmero que recebe por parmetro. O
nmerose indica completo ex: 2005 ou 1995.
Utilizar este mtodo para estar certo de que
tudo funciona para datas posteriores a 2000.

Mtodos do Objeto Date

18. getimezoneOffset(): Devolva a
diferena entre a hora local e a hora
GMT (Greenwich, UK Mean Time) sob a
forma de um inteiro representando o
nmero de minutos (e no em horas).
19. toGMTString(): devolva o valor do
atual em hora GMT (Greenwich Mean
Time)

Array.
Um array no JavaScript atualmente
um conjunto de valores ordenado por
ndices. Podemos relacionar cada valor
com uma ndice/chave, para indicar
em qual posio um determinado valor
est armazenado dentro do array.

Criando um Array.
Construo simples sem dimensionamento:
Quando
criamos
um
array,
mas
no
especificamos quantas posies ele ir possuir;
Construo simples com dimensionamento:
Quando criamos um array e especificamos
quantas posies ele ir possuir. Estas posies
so vazias.
Construo inserindo valores: Quando criamos
um array e especificamos exatamente quais
valores ele ir possuir. Cada valor deve ser
separado por vrgula e qualquer tipo de dado
pode ser utilizado para popular nosso vetor .

Criando um Array.

Criando um Array. 1
Detalhe importante que todo array no
associativo comea pela chave ou ndice
de nmero 0.

Arrays Associativos.
Os arrays associativos associa-se um
determinado valor ou nome a um dos
valores do array. O array associativo
usa strings como ndice, onde cada
string pode representas uma chave.
Var vetor =
{chave1:valor1,chave2:valor2,
chaveN:
valorN}

Arrays Associados.
Umas das vantagem do array associativo
quando fazemos o acesso ao array, onde
temos de forma clara e compreensvel o
valor que aquela chave pode conter. Como
por exemplo nome, onde s vai existir o
nome de pessoas. Dessa forma podemos
acessar o array. Basta determinar o nome
do array e qual a chave, onde cada chave
tem um valor j determinado. Resultar em
um erro o uso de uma chave errada.

Arrays Associativos. 1

Interaes. 1
Quando falamos de interaes em um
array estamos dizendo o mesmo que
percorrer
esse
array
usando
mecanismos da prpria linguagem. No
JavaScript podem ser iterados pelo
operador FOR( chave IN array ) que j
vimos anteriormente.

Acessando um Array. 1
Quando criamos um array temos que
ter em mente que estamos criando
uma varivel que possui vrios valores
e que os mesmo podem ser acessados
a qualquer momento. Cada valor est
guardado em uma posio que pode
ser acessada atravs de uma chave. A
sintaxe para acesso simplificado de um
array a seguinte:

Alterando um Array. 1 2
Podemos alterar qualquer valor de um
array. muito semelhante ao acesso,
onde, a diferena est na chamada do
array.

nesse
momento
que
atribumos um novo valor.

Arrays multidimensionais.
Os arrays multidimensionais so estruturas
de dados que armazenam os valores em
mais de uma dimenso. Os arrays que vimos
at agora armazenam valores em uma
dimenso, por isso para acessar s posies
utilizamos somente um ndice ou chave. Os
arrays de 2 dimenses salvam seus valores
de alguma forma como em filas e colunas e
por isso, necessitaremos de dois ndices
para acessar a cada uma de suas posies.

Arrays multidimensionais.

Iniciando Arrays multidimensionais.

Var matriz = [
[0.0, 0.1, 0.2, 0.3] ,
[1.0, 1.1, 1.2,
1.3] ,
[2.0, 2.1, 2.2,
2.3] ,
[3.0, 3.1, 3.2,
3.3] ,];

Iniciando Arrays multidimensionais.

var matriz = [4,4];
matriz[0] = [0.0,
0.3];
matriz[1] = [1.0,
1.3];
matriz[2] = [2.0,
2.3];
matriz[3] = [3.0,
3.3];

0.1, 0.2,
1.1, 1.2,
2.1, 2.2,
3.1, 3.2,

Array multidimensionais.
Observe que temos uma chave para
representar a linha e outra para
representar
a
coluna,
assim,
determinando
uma
matriz
4x4.
Podemos
ver
tambm
que
inicializamos um array dentro do outro.
Cada sub-array uma linha, e cada
elemento do array maior representa as
colunas.

Acessando Array multidimensional. 1

2
Para acessarmos o valor de um array
multidimensional, basta colocar as
duas ou mais chaves da posio que
queremos acessar. muito semelhante
ao array de uma nica dimenso.

Funes com Arrays. 1

O objeto Array possui uma propriedade
chamada length. Esta propriedade
mostra quantos elementos o vetor
possui.

Juno e concatenao de Arrays

(Vetores)
H momentos que queremos unir um
ou mais vetores. JavaScript nos
possibilita fazer isso resultando duas
formas diferentes.

Mtodo join(). 1 2
O vetor construdo com o objeto Array
de JavaScript pode ter a juno de
seus elementos. A juno consiste em
criar
uma
string
nica
usando
separadores. O mtodo join()nos
possibilita a juno de forma simples,
precisa e correta em uma string.

Mtodo concat(). 1
O mtodo concat()consiste em unir um
ou mais arrays (vetores). Este mtodo
usa como argumento um objeto do
tipo array. Se desejarmos unir mais de
um vetor, cada objeto array do
argumento deve vir separado por
vrgula (,).

Mtodo push(). 1
Alm da forma algortmica de inserir um
elemento no final de um array, o prprio
objeto Array possui um mtodo que faz isso
por ns. O mtodo push() insere um ou mais
elementos no final de um array.
A sintaxe : push (elemento1, elemento2,
elemento3, ...)
Dessa forma, no precisamos nos preocupar
com o tamanho e nem com o ltimo ndice
do array.

Mtodo unshift(). 1
Outra forma de inserir elementos
utilizar o mtodo unshift(). O mtodo
unshift() insere um ou mais elementos
no incio de um array.
A sintaxe : unshift (elemento1,
elemento2, elemento3, ...)

Mtodo pop(). 1
O mtodo pop() remove um elemento
do final de um array e retorna o
contedo do ndice removido.

Mtodo shift(). 1
Outra forma de remover elementos
utilizar o mtodo shift(). O mtodo
shift()remove um elemento do incio
de um array e retorna o contedo do
ndice removido.

Remover Elementos no Meio do

Array Algoritmicamente. 1
Exemplo

Mtodo reverse(). 1
O mtodo reverse do objeto array
serve para inverter a ordem dos
elementos de um array. Dessa forma
podemos usar apenas uma forma de
organizao e depois inverter o array
para conseguir a ordem desejada.

Mtodo Sort() 1
O mtodo sort() o que realmente faz
a organizao do array. Porm, sort()
apenas organiza o array de forma
alfabtica, se quisermos organizar o
array de forma numrica devemos
criar uma funo para isso.

Manipulao de funes.
Quando queremos um cdigo funcional para
determinado fim, como por exemplo fazer um
clculo ou alguma interao dentro do
JavaScript, usamos o que chamamos de funo.
As funes so um pedao de cdigo com o
objetivo especfico, encapsulado sob uma
estrutura nica que recebe um conjunto de
parmetros e retorna ou no um determinado
dado. Uma funo declarada uma nica vez,
mas pode ser utilizada diversas vezes. uma
das estruturas mais bsicas para prover
reusabilidade ou reaproveitamento de cdigo,
deixando as funcionalidades mais legveis.

Declarando uma funo. 1

function nome_da_funo(argumento1,
argumento 2, ...)
{
comandos;
return $valor
}

Escopo de variveis em
funes. 1
Variveis locais - so aquelas declaradas
dentro de uma funo e no tem
visibilidade fora dela.
Variveis
Globais

So
variveis
declaradas fora do escopo de uma funo,
porm tem visibilidade (pode ser acessada)
ao contexto de uma funo sem pass-la
como parmetro. Para isso declaramos a
varivel no escopo fora da funo e
fazemos a sua chamada dentro da funo.

Valor de retorno. 1
Toda funo pode opcionalmente retornar
um valor, ou simplesmente executar os
comandos e no retornar valor algum.
No possvel que uma funo retorne
mais de um valor, mas permitido fazer
com que uma funo retorne um valor
composto, como listas ou array's. As
operaes aritmticas podem ser feita de
forma direta no retorno.

Recurso. 1
Funo recursiva uma definio
usada tanto na programao quanto
na matemtica, onde, significa que
uma funo faz a chamada de si
mesma na sua execuo.

Eventos JavaScript.
Quando um usurio visita uma pgina web
e interage com ela se produzem os
eventos e com Javascript podemos definir
o que queremos que ocorra quando se
produzam, por exemplo quando um
usurio clica sobre um boto, edita um
campo de texto ou abandona a pgina um
evento lanado e podemos definir que
alguma funo seja executa quando isso
acontecer.

Relao de eventos.
onabort - Este evento se produz quando um
usurio cancela o carregamento de uma
imagem, seja porque para o carregamento da
pgina ou porque realiza uma ao que a
detm, como por exemplo, sair da pgina.
onblur- Desata-se um evento onblur quando um
elemento perde o foco da aplicao. O foco da
aplicao o lugar onde est situado o cursor,
por exemplo, pode estar situado sobre um
campo de texto, uma pgina, um boto ou
qualquer outro elemento.

Relao de eventos.
onchange Desata-se este evento
quando muda o estado de um
elemento de formulrio, s vezes no
se produz at que o usurio retire o
foco da aplicao do elemento.
onclick Produz-se quando se clica o
boto do mouse sobre um elemento da
pgina, geralmente um boto ou um
link.

Relao de eventos.
ondragdrop Produz-se quando um usurio
solta algo que havia arrastado sobre a
pgina web.
onerror Produz-se quando no se pode
carregar um documento ou uma imagem e
esta fica quebrada.
onfocus - O evento onfocus o contrrio de
onblur. Produz-se quando um elemento da
pgina ou a janela ganham o foco da
aplicao.

Relao de eventos.
onkeydown - Este evento produzido no
instante que um usurio pressiona uma
tecla, independentemente que a solte ou
no. produzido no momento do clique.
onkeypress - Ocorre um evento onkeypress
quando o usurio deixa uma tecla clicada
por um tempo determinado. Antes deste
evento se produz um onkeydown no
momento que se clica a tecla.

Relao de eventos.
onkeyup Produz-se quando o usurio deixa de
apertar uma tecla. produzido no momento
que se libera a tecla.
onload - Este evento se desata quando a
pgina, ou em Javascript 1.1 as imagens,
terminaram de se carregar.
onmousedown

Produz-se
o
evento
onmousedown quando o usurio clica sobre um
elemento da pgina. onmousedown se produz
no momento de clicar o boto, soltando ou no.

Relao de eventos.
onmousemove Produz-se quando o
mouse se move pela pgina.
onmouseout Desata-se um evento
onmuoseout quando a seta do mouse
sai da rea ocupada por um elemento
da pgina.
onmouseover - Este evento desata-se
quando a seta do mouse entra na rea
ocupada por um elemento da pgina.

Relao de eventos.
onmouseup - Este evento se produz no
momento que o usurio solta o boto do
mouse, que previamente havia clicado.
onmove - Evento que se executa quando se
move a janela do navegador, ou um frame.
onresize - Evento que se produz quando se
redimensiona a janela do navegador, ou o
frame, no caso de que a pgina os tenha.

Relao de eventos.
onreset - Este evento est associado aos
formulrios e se desata no momento que
um usurio clica no boto de reset de um
formulrio.
onselect Executa-se quando um usurio
realiza uma seleo de um elemento de
um formulrio.
onsubmit - Ocorre quando o visitante
aperta sobre o boto de enviar o
formulrio. Executa-se antes do envio
propriamente dito.

Relao de eventos.
onunload - Ao abandonar uma pgina,
seja porque se clique em um link que
nos leva a outra pgina ou porque se
fecha a janela do navegador, se
executa o evento onunload.

Evento onclick. 1 2
O evento onclick lanado/disparado
quando clicamos em um elemento da
pgina, geralmente um boto ou um
link. Esse evento valido para os
objetos ou componentes de pgina
HTML: Button, Checkbox, Radio, Link, e
Submit. Sintaxe:
<elemento
onclick=AlgumCodigoJavaScript>

Evento onsubmit. 1
O evento onsubmit suportado
apenas por formulrios e disparado
quando o usurio clica no boto Enviar
de seus formulrios. neste evento
que voc far a validao do
formulrio, assim como enviar o
usurio para uma pgina, informando
do sucesso/falha do envio de dados, ou
outra ao que voc queira definir no
momento. Sintaxe:

Evento onmouseover e
onmouseout. 1
O evento onmouseover ocorre quando o
ponteiro do mouse se posiciona sobre um
elemento da pgina HTML, j o evento
onmouseout acontece o oposto, o evento
disparado quando retiramos o ponteiro do
mouse de sobre um determinado elemento.
Sintaxe:
<elemento onmouseover=AlgumCodigo>
<elemento onmouseout=AlgumCodigo>

Eventos: onfocus e onblur. 1

O evento onfocus ocorre quando um
elemento/objeto recebe o foco. Ex: quando
voc clica em um campo de texto para
digitar algo, aquele elemento ganhou foco
e nessa ao gerado um evento do tipo
onfoucs, j o onblur o oposto o evento
gerado quando o elemento perde o foco.
Sintaxe:
<elemento
onfocus="AlgumCodigoJavaScript">

Evento: onchange. 1
O evento onchange disparado sempre
que o texto de um elemento foi alterado.
Ns podemos us-lo para fazer uma
verificao em um valor digitado pelo
usurio e inform-lo ou instru-lo a digitar
novamente. Este evento est disponvel
para os campos texto, reas de texto e
listas de seleo. Sintaxe:
<elemento
onchange="AlgumCodigoJavaScript">

Eventos: onload e onunload.

O onload um dos eventos mais importantes
em JavaScript. Ele disparado sempre que a
pgina estiver carregada por completo. Todas
as vezes que voc escrever um script que s
possa ser executado usando outros elementos
da pgina, sempre uma boa idia usar este
evento para dar incio execuo do cdigo.
Por s ocorrer quando a pgina estiver
carregada por completo, este evento evita que
o seu cdigo tente acessar algum elemento que
no esteja baixado para a pgina ainda.

Eventos: onload e onunload.

1
J o evento onunload disparado assim
que usurio encerra a execuo da pgina
atual para exibir uma nova pgina. Ele
pode ser usado para dar alguma
informao, agradecer ao usurio a sua
visita ou exibir uma nova pgina. Este
evento tambm ocorre se voc usar o
boto Voltar do browser. Sintaxe:
<body onload="AlgumCodigoJavaScript">
<body
onunload="AlgumCodigoJavaScript">

Document Object Model

DOM.
Para ter um domnio completo de
JavaScript, preciso que voc passe
pelo estudo do DOM (Document Object
Model), que o modelo dos objetos
que formam a hierarquia de toda a
estrutura de uma pgina web. Essa
estrutura comea a partir da janela do
navegador e vai at o ltimo elemento
da pgina.

Document Object Model

DOM.
Para entendermos melhor o que uma
hierarquia de objetos, considere o
seguinte exemplo. Suponhamos que
voc esteja abrindo a porta de seu
carro. No momento que abre a porta,
se pudssemos demonstrar em cdigo
o que voc acaba de fazer, teramos
algo como o mostrado em seguida:
carro.porta.fechadura.aberta = true;

Document Object Model

DOM.

DOM em ao. 1 2 3

DOM HTML Modificando HTML

usando JavaScript.
O DOM HTML permite que o JavaScript
altere o contedo HTML, ou seja,
podemos modificar o texto de um
pargrafo ou uma imagem, por
exemplo, ao executar um script
JavaScript.

Escrevendo dentro de uma pgina

HTML utilizando JavaScript. 1
Usando o write, um dos mtodos do
objeto document, podemos escrever
dentro do documento HTML.

Alterando contedo HTML utilizando

JavaScript.
A maneira mais fcil de modificar o
contedo de um elemento HTML usando
o atributo ou propriedade innerHTML.
Para alterar o contedo de um elemento
HTML, use esta sintaxe:
document.getElementById(id).innerHTML=
novo HTML

Alterando contedo HTML utilizando

JavaScript. 1
id valor do id do elemento HTML,
sempre lembrar de colocar esse valor
entre aspas.
novo valor o novo valor do atributo,
se no for uma varivel colocar o novo
valor entre aspas.
getElementById() um mtodo que
captura um objeto ou elemento de uma
pgina HTML pelo id do mesmo.

Alterando um atributo HTML

utilizando JavaScript. 1
document.getElementById(id).atributo= novo valor
Legenda:
id valor do id do elemento HTML, sempre
lembrar de colocar esse valor entre aspas.
atributo especifique qual atributo da tag HTML
ser alterado.
novo valor o novo valor do atributo, se no for
uma varivel colocar o novo valor entre aspas.
getElementById() um mtodo que captura
um objeto ou elemento de uma pgina HTML pelo
id do mesmo.

DOM CSS Modificando CSS usando

JavaScript.
Podemos alterar/criar propriedades
CSS de um objeto ou elemento contido
em uma pgina HTML utilizando o
JavaScript, ou seja, se uma div dentro
de sua pgina HTML tem o atributo
color=blue; definido no seu CSS,
podemos modificar dinamicamente
esse valor utilizando o DOM.

DOM CSS Modificando CSS usando

JavaScript. 1
document.getElementById(id).style.propriedade=
novo valor Legenda:
id valor do id do elemento HTML, sempre
lembrar de colocar esse valor entre aspas, se no
for uma varivel javascript.
propriedade especifica qual a propriedade
CSS ser alterado/criado.
novo valor o novo valor do atributo, se no for
uma varivel, deve ser colocado entre aspas.
getElementById() um mtodo que captura
um objeto ou elemento de uma pgina HTML pelo
id do mesmo.

Introduo a Jquery.
O FrameWork Jquery nada mais que
uma um conjunto de bibliotecas
escritas em JavaScript, contendo
funes que tratam de efeitos
interativos em processos Web. O
Jquery veio para facilitar os efeitos do
JavaScript, realizando em poucas
linhas uma vasta possibilidades de
efeitos.

Um exemplo de sua
funcionalide:
Enquanto em Java Script escrevamos:
document.getElementById(elemento
)
No Jquery s precisamos : $
(#elemento)

Instalao e configurao
Para realizar a instalao e configurao,
primeiramente devemos acessar o site oficial da
Jquery: http://code.jquery.com/ E acessar o link
de download. Voc dever copiar o contedo de
texto e salvar no seu computador como
jquery.js. Como iremos trabalhar na verso :
1.10.0, o link direto que contm o a jquery :
http://code.jquery.com/jquery1.11.0.min.js
Assim que o arquivo tiver salvo, adicione-o dentro
do seu projeto, de preferencia em uma pasta para
separ-la dos demais elementos do seu site .

Importar o Jquery.
Dentro da tag <head>:
<script lang=javascript
type=text/javascript
src=js/jquery.js></script>

Exemplos 1 2 3 4

Seletores
Seletores:
Seletor

Descrio

$( this )

Seleciona o elemento referendado por ela

mesma.

$( * )

Seleciona todos os elementos do documento

HTML

$(div )

Seleciona todos os elementos <DIV> poder ser

usado para outros. Ex: img a .

$(.curso )

Seleciona todos os elementos cuja a classe seja

curso.

$( #camada ) Seleciona um nico elemento de id = camada.

$(#camada
img)

Seleciona todas as imagens que estiver dentro

da camada (exemplo).

Seletores.
Pseudo-Seletores:
Seletor

Descrio

Exemplo

:first

Seleciona por um primeiro item

$(ul li:first)

:last

Seleciona por um ultimo item

$(ul li:last)

:not

Ignora um item selecionado

$(ul
li:not(:last))

:contains Seleciona um item que contenha

texto indicado.

$
(p:contains(fab)
)

:empty

Seleciona itens vazio

$(p:empty)

:visible

Seleciona itens visiveis

$(div:visible)

Pseudo-Seletores de formulrios:
Seletor

Descrio

Exemplo

:text

Seleciona campos do time text

$(:text)

:hidden

Seleciona campos invisveis

$(:hidden)

:file

Seleciona arquivos de um formulrios

$(:file)

:button

Seleciona botes do tipo button em um

formulrio

$(:button)

:
checkbo
x

Seleciona um checkbox de formulrio

$
(:checkbox
)

:image

Seleciona campo/Inagem de um
formulrio

$(:image)

:
passwor
d

Seleciona um campo de texto do tipo

Senha de um formulrio

$
(:password
)

:radio

Seleciona uma caixa de texto do tipo

Radio

$(:radio)

:submit

Seleciona um boto do tipo submit de um

formulrio.

$(:submit)

Seletores de Formulrios:
Seletor

Descrio

$(input [name =
bot ])

Todos os elementos de formulrio

com o nome bot.

$(input [name !=
curso ])

Todos os elementos de formulrio

com um valor diferente de
curso.

Biblioteca Jquery- Funes de Estilo 1

Funo .css():Com esse comando

podemos adicionar um estilo CSS
mesmo que o elemento html no
tenha estilo pronto para ela:
$(elemento).css(Atributo
valor)

CSS,

Funo .add(). 1
Com este comando podemos adicionar
estilo a vrios elementos distintos com
um
mesmo
comando,
podemos
tambm
definir
os
estilo
mais
genricos, e especficos entre os
elementos
envolvidos
no
relacionamento.

Funo .addClasse() e
removeClass(). 1
Estas funes so responsveis por alterar um
estilo estruturado de CSS de um determinado
elemento html substituindo um estilo por outro.
Veja sua Sintaxe:.

$(elemento).addClass(.classNova);
E para remover o estilo da classe adicionada
temos:

$(elemento).removeClass(.classNova);

Funo toggleClass(). 1
Podemos modificar um estilo de um
elemento e quando esse elemento for
ativado novamente, a funo ir voltar
para o seu estado original.
$
(elemento).toggleClass(.classNova
);

Funes de visibilidade: Funes

show() e hide()
Podemos mostrar um determinado
elemento HTML atravs do comando
show() ou esconde-los usando o
comando hide() de acordo com as
nossas necessidades.

$(elemento).hide()
$(elemento).show()

Funes de visibilidade: Funes

show() e hide()
As 2 funes podem receber como
parmetro uma String com 2 tipos de
valores.
Fast
Slow.
$(elemento).show(fast) / $
(elemento).show(slow)
$(elemento).hide(fast) / $
(elemento).hide(slow)

Funes show() e hide() 1

$(elemento).show(2000);
$(elemento).hide(2000);

Funo Toggle() 1
Esta funo, realiza o mesmo resultado
das funes, show() e hide() estudados
no tpico anterior. Porm ele tem uma
pequena implementao de algoritmo
que permite analisar se o elemento
est
visvel
ou
no,
alterando
dinamicamente o seu estado de
visibilidade.

Funo delay() 1
Essa funo poder ser combinada com
outras funes Jquery, ela ira programar
cada evento com um tempo de espera
estimado
em
milissegundos
como
parmetro.
$
(elemento).delay(tempo).outrasFun
es();

Funes FadeIn() e
Fadeout() 1
A funo fadeIn() faz tornar visvel um
elemento HTML, enquanto fadeOut()
torna invisvel.
Veja sua sintexe abaixo:
Para tornar visvel :

$(elemento).fadeIn();
Para tornar invisvel ;

$(elemento).fadeOut();

FadeTo(). 1
Esta funo responsvel por controlar o nvel de
opacidade de uma elemento HTML, onde :
$(elemento).fadeTo(velocidade, opacidade);
Velocidade = Velocidade do efeito de transio
da opacidade antiga com a novo valor de
opacidade poder ser numrico em milisegundos
ou uma String slow e fast.
Opacidade = nvel de opacidade do elemento,
poder variar de 0(zero) at 1(100%) onde os
valores intermediarios seriam o nvel da
opacidade. Exemplo: 0.5 = (50% de opacidade).

FadeToggle(). 1
Essa funo responsvel por alterar o
modo de visibilidade de um elemento HTML
voltando ao seu estado inicial quando
ativado novamente, ele segue o mesmo
raciocnio das funes que contm Toggle
nos tpicos anteriores, alterando apenas a
maneira como feita a animao.
$(elemento).fadeToggle(velocidade);

Biblioteca Jqueryui
A jQuery UI proporciona abstraes de
baixo nvel de interao, animao e
avanados efeitos especiais de alto
nvel, construda em cima do jQuery
JavaScript Library, que pode ser
utilizada para construir aplicaes web
altamente interativas.

Funo Datepicker. 1
Essa funo responsvel por mostrar
um calendrio para o usurio, as
informaes do dia selecionado pelo
usurio, poder diretamente ser alterado
em uma caixa de texto, oferecendo estilo
e poupando o usurio de ter que digitar
uma data manualmente.
Sua Sintaxe:

$(elemento).datepicker();

Funo Accordion. 1
Essa funo responsvel por
segmentar contedos de forma mais
elegante,
podemos
mostrar
um
contedo selecionado ocultando os
outros contedos que tiverem dentro
dessa camada. Sua Sintaxe e descrita
da seguinte forma:

$(elemento).accordion();

Funo Tabs 1
Essa funo uma outra forma
elegante de organizar o contedo de
uma pgina WEB atravs de abas por
link para visualizao de contedo de
forma dinmicas.
$(elemento).tabs();

Funo Menu 1
Esta funo responsvel por montar
um Menu DropDown de forma mais
simples e elegante usando apenas
listas e links como referencia.
$(elemento).menu();

Funo Tooltip 1
Essa funo responsvel por indicar
ao
usurios
alguma
informao
relevante para o preenchimento de
algum dado do formulrio. Esse
mtodo j existe usando apenas o
HTML, porm o Jquery pode tornar
esse recurso mais elegante.
$(elemento).tooltip();