Unidade XVII

Programa¸c˜

ao para Web I

Unidade XVII

JavaScript

Sum´

ario

1 Relembrando Relembrando Geral 2 JavaScript Introdu¸c˜ao Conceitos B´asicos Escrevendo no HTML Operadores Vari´aveis Estruturas Condicionais Coment´arios Objeto Window Strings Convers˜ao de Valores Objeto Data Listas - Arrays Objeto Math Objetos Pessoais Fun¸c˜oes

3 Valida¸c˜ao de Formul´arios

Exemplos

Relembrando

Relembrando

Layout; I

Tabless;

I

<DIV>;

I

Tags do HTML5;

Colunas;

Relembrando Geral

At´e agora n´os j´a vimos:

I

_{Unidade I a IX: HTML;}

I

Unidade X: CSS - Introdu¸

c˜

ao;

I

Unidade XI: CSS - Cores, Background e Imagens;

I

Unidade XII: CSS - Cabe¸

calhos e Blocos;

I

Unidade XIII: CSS - Listas e Links;

I

Unidade XIV: CSS - Estilizando Formul´

arios;

I

Unidade XV: CSS - Tabelas;

Introdu¸c˜

ao ao JavaScript

Linguagem para incrementar o HTML; N˜AO ´E JAVA;

Cria¸c˜ao de efeitos e dinamicidade; ´

E mais como uma extens˜ao do HTML do que uma linguagem de programa¸c˜ao; F´acil de usar;

Conceitos B´

asicos

Utilizado em forma de fun¸c˜oes;

Pode estar localizado em qualquer parte do documento; CaSe SenSItiVe;

´

E escrita dentro do c´odigo fonte entre tags <SCRIPT> <SCRIPT language="javascript">

comandos JS; </SCRIPT>

Ou escrita em arquivos externos

Escrevendo no HTML

JS permite realizar escrita dentro do HTML;

O Objeto document permite realizar manipula¸c˜ao e obten¸c˜ao de conte´udo do documento HTML;

M´etodos:

I

write: escrita dentro do documento HTML:

document.write(‘‘Ol´

a JS World...’’);

I

getElementById: obtem o valor de um elemento no HTML pelo seu

ID:

document.getElementById(‘‘ ’’);

I

getElementsByName: obtem o valor de um elemento no HTML pelo

seu NOME:

Escrevendo no HTML

Como vimos, o Objeto document ´e respons´avel por trabalhar com as propriedades do HTML;

Algumas de suas propriedades:

Operadores Matem´

aticos

Operadores utilizados para: I

c´

alculos;

I

referˆ

encias;

I

indexadores;

I

Strings;

Operadores:

I

+: adi¸

c˜

ao e concatena¸

c˜

ao de Strings; Ex.: 1 + 2; Tadeu+Classe;

I

-: subtra¸

c˜

ao; Ex.: 1 - 2;

I

*: multiplica¸

c˜

ao; Ex.: 10 * 4;

I

/: divis˜

ao real; Ex.: 10 / 4 = 2.5;

I

%: divis˜

ao absoluta (m´

odulo ou resto); Ex.: 10 % 3 = 1;

I

_{++: incremento; Ex.: 10++ = 11;}

I

--: decremento; Ex.: 10-- = 9;

I

OBS: podemos fazer c´

alculos assim: X += Y isso ´

e o mesmo que X

= X + Y;

Operadores L´

ogicos

S˜ao utilizados para verificar condi¸c˜oes;

Retorna resultados booleanos, como true ou false; Operadores:

I

_{==: igualdade; Ex.: 10 == 10;}

I

_{!=: desigualdade; Ex.: 10 != 11;}

I

_{>: maior; Ex.: 10 > 4;}

I

_{<: menor; Ex.: 10 < 11;}

I

_{>=: maior igual; Ex.: 10 >= 10;}

I

_{<=: menor igual; Ex.: 10 <= 10;}

I

_{&&: E (and); Ex.: (Y == 3) && (X == 5);}

I

‖: Ou (or); Ex.: (Y == 3)‖(X == 5);

I

!: Nega¸

c˜

ao (not); Ex.: !(Y == 3);

Utilizando Vari´

aveis

S˜ao espa¸cos na mem´oria; Como o nome diz, s˜ao vari´aveis;

No JS n˜ao ´e preciso associar a um tipo primitivo;

Tipos primitivos:

I

_{String (sequ^}

_{encia de caracteres), boolean (l´}

_{ogicos com}

valores true ou false), int (n´

umeros naturais (IN))

positivos e negativos), double (n´

umeros reais (IR)) ;

N˜ao se usa espa¸cos para vari´aveis;

Tente sempre iniciar nomes de vari´aveis com letras min´usculas; Dˆe nome sugestivos para elas, facilita no entendimento; Valores s˜ao atribu´ıdos `as vari´aveis usando o s´ımbolo =; Declara¸c˜ao: VAR <Nome da vari´avel>;

Exemplos

var nome; var idade;

var cpf = ”000.000.000-00”; var salario = 1600.00;

Condi¸c˜

oes

S˜ao linhas de comandos que condicionam a execu¸c˜ao no sistema; S´o executo os comandos se sua condicional for satisfeita;

Caso um bloco de c´odigo esteja dentro de uma condicional e esta n˜ao for satisfeita, os comandos n˜ao s˜ao executados;

Estruturas:

if(){} .. else{}

Condicionam a execu¸c˜ao de parte do c´odigo, desde que a condicional seja satisfeita; Estruturas:

Condi¸c˜

oes

switch

S˜ao op¸c˜oes de condi¸c˜oes que um valor pode assumir;

2 cl´ausulas b´asicas: case (valores poss´ıveis) e default (valor padr˜ao caso nenhum valor de case seja verdadeiro);

OBS: cada cl´ausula case ou default devem ter como comando final a linha break que ´e o comando que faz parar a execu¸c˜ao da condicional;

Repeti¸c˜

oes

S˜ao linhas de comandos que condicionam a execu¸c˜ao no sistema; S´o executo os comandos se sua condicional for satisfeita;

Caso um bloco de c´odigo esteja dentro de uma condicional e esta n˜ao for satisfeita, os comandos n˜ao s˜ao executados;

Por´em, estas estruturas permitem que sejam executadas X vezes de forma autom´atica, at´e que a condi¸c˜ao seja satisfeita;

CUIDADO:um BUG muito comum em sistema s˜ao os chamados LOOPS INFINITOS, ocorrem quanto uma estrutura de repeti¸c˜ao tem sua cl´ausula de condi¸c˜ao NUNCA satisfeita, o que faz com que a estrutura fique rodando eternamente ou at´e que os recursos da m´aquina acabem. Erros deste tipo s˜ao comuns de acontecer e MUITO DIF´ICEIS de serem encontrados;

Repeti¸c˜

oes

for(inicializa¸

c˜

ao; condi¸

c˜

ao; incremento){...}

Geralmente usado para repeti¸c˜oes nas quais sabe-se (ou tem ideia) do tamanho; Executa seu bloco de instru¸c˜ao interno at´e que a condi¸c˜ao seja atingida;

Possui 3 partes importantes:

1

_Inicializa¸

_c˜

_{ao: vari´}

_{avel que iniciar´}

_{a a contagem de repeti¸}

_c˜

_oes;

2

_Condi¸

_c˜

_{ao: condi¸c˜}

_{ao a ser obedecida para entrada ou t´}

_{ermino das}

repeti¸

c˜

oes;

3

_{Incremento: incremento da vari´}

_{avel de controle de repeti¸}

_c˜

_oes;

Repeti¸c˜

oes

while(condi¸

c˜

ao){...}

Geralmente usado para repeti¸c˜oes em que N˜AO se sabe (ou tem ideia) do tamanho; Executa os blocos de comandos enquanto a condi¸c˜ao for satisfeita;

Estruturas:

Repeti¸c˜

oes

do{...}while(condi¸

c˜

ao);

Geralmente usado para repeti¸c˜oes em que N˜AO se sabe (ou tem ideia) do tamanho; Executa os blocos de comandos enquanto a condi¸c˜ao for satisfeita;

Pouco utilizada. Somente em raros casos; Estruturas:

OBS: Executa 1 vez a estrutura de repeti¸c˜ao para s´o depois verificar se a condi¸c˜ao ´e satisfeita;

Comandos que podem ser usados dentro de estruturas de repeti¸c˜oes:

I

break: para a execu¸c˜

ao do loop e vai para a linha de comando ap´

os;

I

continue: passa para a pr´

oxima execu¸

c˜

ao do loop sem sair de dentro

dele;

I

return: para a execu¸c˜

ao da fun¸

c˜

ao, saindo de dentro de loop ou

qualquer estrutura;

Coment´

arios

Comentar o c´odigo ´e importante para manuten¸c˜ao do sistema e entendimento. No JS coment´arios funcionam assim:

Janelas

Usadas para informa¸c˜oes importantes; Comunica¸c˜ao com o usu´ario; A¸c˜oes, Avisos, Perguntas; Tipos de Janelas:

alert(“”)

Usada na exibi¸c˜ao de mensagens; Como o nome diz, exibi¸c˜ao de alertas;

Janelas

confirm(“”)

Usada na exibi¸c˜ao de questionamentos; Geralmente usada com a estrutura IF;

prompt(“T´ıtulo”, “MSG”)

Outras propriedades interessantes de Windows

close()

Fecha a janela;

print()

Imprime o conte´udo da p´agina;

blur()

Seta o foco na p´agina;

open(“URL”)

Strings

Strings s˜ao usadas para sequˆencias de caracteres; Ela N˜AO ´e um tipo de vari´avel primitiva comum; As strings possuem fun¸c˜oes ´uteis:

.concat(str1)

Realiza a concatena¸c˜ao de 2 strings; ´

E poss´ıvel realizar a concatena¸c˜ao de mais strings usando: .concat(str1, str2, str3, str4...);

Outra maneira de usar concatena¸c˜ao de strings ´e s´o utilizar o operador +; Exemplos:

Strings

.lenght

Quantidade de caracteres da String;

.charAt(int)

caractere da posi¸c˜ao espec´ıfica;

.indexOf(str)

posi¸c˜ao espec´ıfica de uma String;

.lastIndexOf(str)

´

ultima posi¸c˜ao espec´ıfica de uma String;

.substring(pos1, pos2) e .substr(str1, str2)

Strings

.replace(str1, str2)

troca o conte´udo de uma string por outro conte´udo qualquer;

.split()

separa a string para um array;

deve ser passado um crit´erio para separa¸c˜ao, ou seja, uma outras string;

.toUpperCase()

passa a string para caixa alta;

Conclus˜

ao

Muitas vezes ´e preciso que sejam convertidos valores entre os tipos de dados;

.parseInt()

Converte uma vari´avel para Inteiro;

.parseFloat()

Objeto Data

Datas e tempos s˜ao coisas fundamentais no mundo;

No JS temos um objeto pr´oprio para realizar manipula¸c˜oes de datas; Modo de criar um objeto do tipo data:

var data = new Date();

Assim como a String, o objeto Date possui fun¸c˜oes ´uteis prontas para o uso;

.getDate()

retorna o dia do mˆes;

.getDay()

retorna o dia da semana;

.getMonth()

retorna o mˆes;

.getFullYear()

Objeto Data

.getDateString()

retorna a data completa;

.getHours()

retorna as horas;

.getMinutes()

retorna os minutos

.getSeconds()

retorna os segundos;

Arrays

´

E comum a necessidade de se trabalhar com muitas vari´aveis;

Muitas vezes n˜ao se sabe a quantidade exata de registros que ser˜ao inseridos no sistema; Ent˜ao, para solucionar este tipo de problema, pode ser utilizadas listas (arrays); Arrays s˜ao listas de objetos, vari´aveis, strings e etc;

Declara¸c˜ao:

var lista = new Array()

Arrays podem sere criadas de 3 maneiras: regular, condensada e literal;

Para acessar um elemento de um array, basta passar o indice: lista[0], lista[1]... lista[n];

Arrays

O array tamb´em apresenta fun¸c˜oes para sua manipula¸c˜ao:

.toString()

Transforma o array em String;

.concat()

Junta uma ou mais listas;

.sort()

Arrays

.reverse()

Ordena a lista ao contr´ario;

.indexOf()

Retorna o ´ındice de algum elemento do array, caso ele exista;

.length

Matem´

atica

O Objeto Math serve para manipula¸c˜ao de matem´atica no JS; Ele j´a vem com diversas fun¸c˜oes prontas, dentre algumas:

.sqrt(x)

Retorna a raiz quadrada de um n´umero;

√ x

.pow(x, y)

Faz a potˆencia:

xy

.log(x)

Faz o logaritmo natural de x;

Matem´

atica

.floor(x)

Retorna a parte inteira de um n´umero;

.round(x)

Realiza o arredondamento de um n´umero decimal;

.random()

Retorno um n´umero aleat´orio entre 0 e 1;

.min(1, 2 ... n)

Objetos Pessoais

Muitas s˜ao precisas estruturas de dados a quais os dados primitivos n˜ao nos atendem; Para isso, ´e poss´ıvel criar NOSSAS pr´oprias estruturas de dados;

Geralmente, essas estruturas de dados representam coisas reais do mundo real; Por Exemplo:

I

Um usu´

ario precisa criar um carro, e para isso precisa que o sistema

abstraia as caracter´ısticas do mesmo;

Fun¸c˜

oes

S˜ao grupos e passos para a realiza¸c˜ao de uma tarefa; Modulariza¸c˜ao do sistema;

Uma parte importante para o entendimento de fun¸c˜oes e sua execu¸c˜ao s˜ao os chamados EVENTOS;

Uma fun¸c˜ao pode ser acionada por um evento, que pode ser o mover de um mouse, o clique de um bot˜ao e etc;

Criando a sua primeira fun¸c˜

ao

Algumas fun¸c˜oes podem ter o comando return o que indica que existe um valor de retorno para ela;

Parˆ

ametros

Algumas fun¸c˜oes precisam de parˆametros;

S˜ao conte´udos de entrada que podem ser manipulados dentro da fun¸c˜ao; Por exemplo:

mostrarNome("Tadeu");

function mostrarNome(nome){ document.write(nome); }

Vari´

avel Local e Global

Quando trabalhamos com fun¸c˜oes podem ser destacadas 2 tipos de vari´aveis; LOCAIS e GLOBAIS;

I

Locais:

s˜

ao vari´

aveis que dizem a respeito somente `

aquela fun¸

c˜

ao.

Seus valores s˜

ao perdidos da mem´

oria assim que a fun¸

c˜

ao para de

executar. Sendo assim, elas s˜

ao locais, ou seja, s´

o ´

e poss´ıvel sua

utiliza¸

c˜

ao dentro da fun¸c˜

ao;

I

Globais:

s˜

ao vari´

aveis que dizem a respeito ao sistema. Elas podem

ser usadas em quaisquer fun¸c˜

ao e dentro de qualquer bloco de c´

odigo.

Seu conte´

udo n˜

ao ´

e perdido quando uma fun¸

c˜

ao ´

e terminada. Tais

vari´

aveis s´

o perdem o conte´

udo quando o programa finaliza a sua

execu¸

c˜

ao;

Tratamento de erros

Erros podem acontecer dentro de fun¸c˜oes;

S´o saberemos que aconteceu erro quando o resultado esperado N ˜AO acontecer; Para corrigir isso, existem blocos de tratamentos de erros;

Assim que o erro acontece, a fun¸c˜ao para a execu¸c˜ao e pode ser mostrada uma mensagem com o motivo;

Valida¸c˜

ao de Formul´

arios

Como vimos, formul´arios nos permitem a melhor comunica¸c˜ao com usu´ario; Com eles conseguimos realizar entradas de informa¸c˜oes;

Utilizando formul´arios em conjunto com o JS, temos uma excelente ferramenta de valida¸c˜ao de campos do formul´ario;

Com isso conseguimos travar campos necess´arios, validar senhas e c´odigos, e muito mais; Para valida¸c˜ao de campos e formul´arios ´e preciso que seja utilizados eventos, onde cada um faz um comportamento necess´ario;

Valida¸c˜

ao de Telefone

Serve para validar a quantidade de algarismos de um telefone; Tamb´em ´e poss´ıvel verificar se o campo foi preenchido corretamente;

Neste exemplo, o evento que vamos utilizar ´e o onBlur do input telefone. O que faz com que a fun¸c˜ao seja chamada quando o campo perder o foco.

Valida¸c˜

ao de Formul´

ario

Serve para validar campos no fomul´ario;

Neste exemplo, o evento que vamos utilizar ´e o onSubmit do formul´ario. O qual e disparado com o click do bot˜ao submit;

Troca de cores do fundo

Altera¸c˜ao da cor de fundo da p´agina;

Neste exemplo, o evento que vamos utilizar ´e o onClick do input. O qual e disparado com o click do bot˜ao;

Neste exemplo, o evento que vamos utilizar ´e o onChange do input. O qual e disparado com o a troca de propriedades do input;

Armazenamento em Arrays e Exibi¸c˜

ao

O JS permite que sejam criados pequenos sistemas;

Neste exemplo, o evento que vamos utilizar ´e o onClick do input. O qual e disparado com o click do bot˜ao;

Conclus˜

ao

Aprendemos aqui uma “linguagem auxiliar” ao HTML; Vimos:

I

Conceitos;

I

Objeto document;

I

Operadores matem´

aticos e l´

ogicos;

I

Vari´

aveis;

I

Estruturas condicionais e de repeti¸

c˜

oes;

I

Objeto window;

I

Strings;

I

Convers˜

ao de valores;

I

Objeto Data;

I

Listas;

I

Objeto Math;

I

Fun¸

c˜

oes;

D´uvidas?

Fale agora ou silencie-se eternamente...

D´uvidas?

Fale agora ou silencie-se eternamente... Podemos prosseguir?

Programa¸c˜

ao para Web I

Unidade XVII JavaScript

Sistemas para Internet Faculdades Integradas Vianna J´unior

Prof. Tadeu Classe