FATEC Carapicuba ASTI DJD Tutorial de JavaScript

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

Ferramentas Bsicas de Desenvolvimento para Internet Tutorial de JavaScript

FATEC Carapicuba, Maro de 2011 2

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

FATEC Carapicuba, Maro de 2011

Turma: 1 Ciclo de Anlise de Sistemas e Tecnologia da Informao, perodo Noturno Disciplina: Feramentas Bsicas de Desenvolvimento para Internet Professora Responsvel: Ana Carolina Nicolosi da Rocha Gracioso Trabalho: Tutorial de JavaScript

Integrantes do Grupo:

Adauto Ferreira Adriano Nawa Guido Pereira Guilherme Costa Raphael Silva Sidnei de Jesus Pereira Wesley Freire William Pereira Jeferson Gonalves Monique Passos Ribeiro Rodrigo Abrantes Lucas Fernando das Neves

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

Sumrio
1 Introduo.........................................................................................................................................5 1.1 O que ?....................................................................................................................................5 1.2 Onde usado?...........................................................................................................................5 1.3 Histria do JavaScript...............................................................................................................5 2 Bsico da linguagem.........................................................................................................................6 2.1 Tipos de dados..........................................................................................................................6 2.2 Variveis....................................................................................................................................8 2.3 Palavras reservadas.................................................................................................................10 2.4 Estruturas peculiares da linguagem........................................................................................11 3 Elementos frequentemente utilizados.............................................................................................12 3.1 Operadores..............................................................................................................................12 3.2 Condies e Laos..................................................................................................................14 3.3 Funes...................................................................................................................................19 3.4 Tratamento de excees..........................................................................................................22 4 Boas prticas no JavaScript............................................................................................................28 4.1 Indentao...............................................................................................................................28 4.2 Dez boas prticas....................................................................................................................29 5 A linguagem na prtica...................................................................................................................31 5.1 Utilizando o JavaScript junto de outros recursos da Internet.................................................31 5.2 Exerccos prticos...................................................................................................................33 6 Referncias bibliogrficas..............................................................................................................35

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

1 Introduo
Uma breve introduo sobre o JavaScript. Abordando um pouco sobre o que , histria, e aplicao do JavaScript.

1.1 O que ?
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). As pginas HTML podem ser escritas utilizando editores de texto, como o NotePad, Write, etc. Porm, existem editores prprios para gerar HTML, tais como HotDog e Microsoft FrontPage. Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na sequncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorre. Javascript uma linguagem com muitas possibilidades. Ele permite a programao de pequenos scripts, mas tambm de programas maiores, orientados a objetos, com funes, estruturas de dados complexas, etc.

1.2 Onde usado?

Com ele podemos criar efeitos especiais nas pginas e definir interatividades com o usurio. O navegador do cliente o encarregado de interpretar as instrues Javascript e execut-las para realizar estes efeitos e interatividades, de modo que o maior recurso, e talvez o nico, com que conta esta linguagem o prprio navegador. Entre as aes tpicas que se podem realizar em Javascript temos duas vertentes: Os efeitos especiais sobre pginas web, para criar contedos dinmicos e elementos da pgina que tenham movimento, mudem de cor ou qualquer outro dinamismo. Por outro lado, Javascript nos permite executar instrues como resposta s aes do usurio, com o qual podemos criar pginas interativas com programas como calculadoras, agendas, ou tabelas de clculo.

1.3 Histria do JavaScript

JavaScript foi desenvolvido originalmente por Brendan Eich (da Netscape) sob o nome Mocha. Pretendia ser semelhante ao C/C++ para facilitar a aprendizagem dos programadores da poca. Depois de alguns anos, j com o nome mudado para ScriptEase, passou a atrair o interesse da Netscape, para criar programas para o seu navegador de mesmo nome, que 5

FATEC Carapicuba ASTI DJD Tutorial de JavaScript pudessem rodar no computador do usurio antes de enviar informaes para o servidor, o que foi um marco da tecnologia por ser a primeira linguagem a funcionar no modo cliente (na mquina local, em vez do servidor web). Seria solucionado ento um grave problema de trfego na internet: a validao de formulrios sem a necessidade do envio dos dados para o servidor web. No lanamento do Netscape Navegator 2, em 1995, a Netscape, em parceria com a Sun Microsystems, finalizou o novo projeto, agora com o nome LiveScript ou LiveWire, com a inteno de permitir que a linguagem rode tanto no cliente como no servidor. O nome da linguagem muda novamente em seguida para JavaScript, pegando uma carona na popularidade do Java(criado pela Sun Microsystems), em ascenso na poca, e criando uma confuso de nomes. O nome tem causado confuso, dando a impresso de que a linguagem derivada de Java, e isso tem sido caracterizado por muitos como um truque de marketing da Netscape para dar ao JavaScript o selo de que era a linguagem de programao web do momento.

2 Bsico da linguagem
Tipos de dados , como criar e usar variveis, e outros elementos bsicos necessrios para programar em JavaScript.

2.1 Tipos de dados

Nos scripts precisamos manejar variveis de diversas classes de informao, como textos ou nmeros. Cada uma destas classes de informao um tipo de dado. Javascript tem trs tipos de dados bsicos, ento qualquer tipo de informao que se pode salvar em variveis ser de algum destes tipos de dados. Vejamos detalhadamente quais so estes trs tipos de dados.

Dados Numricos Nesta linguagem s existe um tipo de dado numrico, ao contrrio do que ocorre na maioria das linguagens mais conhecidas em outras linguagens existem tipos de dados numricos como inteiros, de ponto flutuante, etc. Portanto, todos os nmeros so do tipo numrico, independentemente da preciso que tenham ou se so nmeros reais, ou inteiros ou sem sinal(modulo). Os nmeros inteiros so nmeros que no tm vrgula, como 3 ou 339. Os nmeros reais so nmeros fracionrios, como 2.69 ou 0.25, que tambm podem ser escritos em notao cientfica(2.482e12, ou seja, 2,482 vezes 10 elevado a 12). Com Javascript tambm podemos escrever nmeros em outras bases, como a hexadecimal. Existem trs bases com as que podemos trabalhar em JavaScript:

FATEC Carapicuba ASTI DJD Tutorial de JavaScript Base 10 o sistema que utilizamos habitualmente, o sistema decimal. Qualquer nmero, por padro, interpretado como escrito em base 10, ou seja, ao escrever o nmero 125, ele j ser reconhecido como um nmero decimal. Base 8 O sistema octal utiliza dgitos do 0 ao 7 para formar um nmero. Para um nmero ser indentificado como octal em JavaScript, ele deve ser antecedido por um nmero 0(zero), por exemplo 023. Base 16 O sistema hexadecimal utiliza 16 dgitos para formar um nmero, esse dgitos so os j conhecidos de 0 a 9 mais as letras que vo de A a F. Para escrever um nmero em hexadecimal devemos escrev-lo precedido de um 0(zero) e uma letra x, por exemplo 0x86.

Lgicos(Boleans) Atribuem valores lgicos: verdadeiro ou falso. Utiliza-se para realizar operaes lgicas, geralmente servindo de "interruptores"(liga/desliga). A representao desses valores booleans so o true e o false, respectivamente verdadeiro ou falso.

Cadeia de caracteres (Strings) Esse tipo de dados represnta textos. Javascript s tem um tipo de dados para salvar texto e nele possvel introduzir quantos caracteres quiser. Um texto pode ser conter nmeros, letras e qualquer outro tipo de caracteres e smbolos. Esse tipo precisa ser escrito entre aspas, duplas ou simples. Exemplos: "Ol mundo!" 'Voc sabia que 1 + 2 = 3 ?' Tudo o que colocado entre aspas, como nos exemplos anteriores, tratado como uma cadeia de caracteres, independentemente do que for colocado dentro. Por exemplo, em uma varivel que vai receber um texto podemos salvar nmeros, e nesse caso temos que levar em conta que as variveis do tipo texto e as numricas no so a mesma coisa, 7

FATEC Carapicuba ASTI DJD Tutorial de JavaScript e que enquanto as de numricas nos servem para fazer clculos matemticos, as de texto no servem. Caracteres de escape em cadeias de texto. Existem caracteres especiais que servem para expressar, em uma cadeia de texto, determinados controles como uma quebra de linha ou um tabulador. Estes so chamados caracteres de escape e devem ser inciados com uma barra invertida (\) e logo em seguida o cdigo do caractere de escape. Um caractere muito comum a quebra de linha, que representada por \n. Outro caractere muito habitual o das aspas, pois se colocamos umas aspas sem seu caractere especial, ns fechariamos as aspas que colocamos para iniciar a cadeia de caracteres. Temos ento que introduzir as aspas com \" ou \' (aspas duplas ou simples). Agora vem a pergunta: "Se usamos a barra invertida para introduzir caracteres de escape na string, como colocamos uma barra invertida na string?". Basta escrever duas vezes ela, assim: "\\". Existem outros caracteres de escape que veremos na tabela abaixo: Tabela com todos os caracteres de escape Quebra de linha Aspas simples(apstrofo) Aspas dupla Tabulao Retorno Avande da pgina Retroceder espao Barra invertida \XXX \n \' \" \t \r \f \b \\ Caractere representado pela codificao Latin-1. Exemplo \251 representa o caractere de copyright .

2.2 Variveis
As variveis tm a finalidade de armazenar temporariamente os tipos de dados que vimos. O contedo de uma varivel pode ser simplesmente atribudo ou vir de um resultado de uma ao dada de uma expresso ou funo. Veja alguns exemplos.

FATEC Carapicuba ASTI DJD Tutorial de JavaScript escola="FATEC Carapicuiba" taxa=7/100 lampada=true Nome das variveis O nome de uma varivel poder iniciar-se com uma letra ou com o caracter _ (underline) seguido de letras ou nmeros. Outra semelhana do JavaScript com outras linguagens que ele case sensitive - diferencia caixa alta de caixa baixa. Exemplo: _Nome diferente de _nome. Na linguagem JavaScript existem dois tipos de variveis que so: GLOBAIS - usadas em qualquer parte de uma aplicao. LOCAIS - usadas somente na rotina que foi desenvolvida. Para criar variveis locais, necessrio que o usurio utilize a palavra-chave var. Exemplo: var nome=Rodrigo var desconto=1000*15/100 As variveis definidas fora de uma funo sempre esto disponveis para todas as funes dentro do script que esto na mesma pgina. Estas variveis so referenciadas como variveis globais. As variveis que so definidas dentro de uma funo, tambm so globais, desde que no seja utilizado a instruo var em sua declarao. Caso o usurio declare uma varivel dentro de uma funo atravs da instruo var, esta varivel passa a ser apenas local, ou seja, so utilizadas apenas para aquela funo onde foi declarada. bom saber que, as variveis globais ficam na memria mesmo aps a execuo do script. Estas variveis somente so liberadas da memria quando o documento descarregado. As variveis podem ser declaradas tambm separadas por vrgula, da seguinte maneira: var nome, endereco, telefone; ou 9

FATEC Carapicuba ASTI DJD Tutorial de JavaScript var nome; var endereco; var telefone; Outro exemplo prtico de atribuio, atribuir um mesmo valor a mais de uma varivel, da seguinte maneira: var campo1 = campo2 = campo3 = 5 No exemplo anterior, foi atribudo o nmero 5 nas variveis campo1, campo2 e campo3.

2.3 Palavras reservadas

O JavaScript, possui uma srie de palavras que so usadas internamente pela linguagem do interpretador. Devemos ter muito cuidado para no usar estes nomes na hora de criar as suas variveis ou funes. A lista seguinte tenta mostrar todas as palavras reservadas. Verses mais atuais do JavaScript podero ter outras mais. muito importante manter sua lista sempre atualizada.

abstract boolean break byte case catch char class const continue debugger default delete do double

Palavras Reservadas em JavaScript else instanceof enum int export interface extends long false native final new finally null float package for private function protected goto public if return implements short import static in super

switch synchronized this throw throws transient true try typeof var void volatile while with

Alm das palavras listadas acima, recomendvel evitar escolher nomes semelhantes aos da tabela abaixo para suas variveis ou funes. Tais nomes so de objetos, mtodos ou propriedades dos navegadores Internet Explorer, Netscape, Firefox, 10

FATEC Carapicuba ASTI DJD Tutorial de JavaScript etc. Evite usar as palavras abaixo event link fileUpload location focus Math form mimeTypes forms name frame navigate frames navigator frameRate netscape function Number getClass Object hidden offscreenBuffering history onblur image onerror images onfocus isNaN onload java onunload JavaArray open JavaClass opener JavaObject option JavaPackage outerHeight innerHeight outerWidth innerWidth packages layer pageXOffset layers pageYOffset length parent

alert all anchor anchors area array assign blur button checkbox clearTimeout clientInformation close closed confirm crypto date defaultStatus document element elements embed embeds escape eval

parseFloat parseInt password pkcs11 plugin prompt prototype radio reset screenX screenY scroll secure select self setTimeout status String submit sun taint text textarea top toString unescape untaint valueOf window

2.4 Estruturas peculiares da linguagem

Eventos O navegador interpreta o JavaScript esperando que eventos aconteam. Eles so inseridos dentro de nossas tags e podem vir quando a pgina termina de ser lida, ou quando o usurio move o mouse sobre um link, ou clica em um boto, etc. A maioria dos eventos precedido da palavra on, como por exemplo onMouseOver. Mas os eventos do JavaScript no funcionam com todas as tags do HTML, por exemplo, voc no pode colocar um evento OnClick em uma tag img do HTML.Para conhecer quais eventos podem ser usados e em quais tags HTML, acesse o site da W3C, 11

FATEC Carapicuba ASTI DJD Tutorial de JavaScript consrcio responsvel pela padronizao do HTML. http://www.w3schools.com/

3 Elementos frequentemente utilizados

Aqui sero demonstrados os operadores, estrutura de controle e repetio e algunas funes, tcnicas frequentemente usadas e outros elementos importantes quando est a programar em JavaScript.

3.1 Operadores
Os operadores so usados para fazer operaes matmaticas, lgicas e de teste com os dados do programa. Operadores relacionais Agora uma tabela com alguns operadores relacionais, eles servem para comparar valores. Operador == != > >= < <= Descrio Igual. Verifica se duas informes so iguais Diferente. Verifica se duas informaes so diferentes Maior que. Verifica se o primeiro nmero maior que o segundo Maior ou igual a.Verifica se o primeiro nmero maior ou igual ao segundo Menor que. Verifica se o primeiro nmero menor que o segundo Menor ou igual a.Verifica se o primeiro nmero menor ou igual ao segundo

Operadores lgicos No necessrio us-los em conjunto com operadores relacionais, embora sejam comumente usados. Operador && Descrio e lgico/condicional

12

FATEC Carapicuba ASTI DJD Tutorial de JavaScript || ! ou lgico/condicional Negao. Inverte valores booleans

Operadores matemticos Veremos a seguir operadores aritmticos e suas funes Operador + -| * / % Descrio Soma Subtrao Multiplicao Diviso Resto da Diviso

Operadores de atribuio Veremos a seguir operadores aritmticos e suas funes = += -|= *= Faz com que a varivel assuma um valor Soma um valor ao valor atual da varivel e atualiza o valor da varivel com o resultado Subtrai um valor ao valor atual da varivel e atualiza o valor da varivel com o resultado Multiplica o valor atual da varivel por um outro e atualiza o valor da varivel com o resultado Divide o valor atual da varivel por um outro e atualiza o valor da varivel com o resultado Divide o valor atual da varivel por um outro e atualiza o valor da varivel com o resto da diviso Inremento. Soma 1 ao valor atual da varivel e atualiza o valor da varivel com o resultado Decremento. Subtrai 1 ao valor atual da varivel e atualiza o valor da varivel com o resultado

/=

%=

++

--

13

FATEC Carapicuba ASTI DJD Tutorial de JavaScript OBS: atente ao fato que para todos esses operadores de atribuio, exceto o operador =, precisam que a varivel j tenha um valor guardado.

3.2 Condies e Laos

Comeando primeiro pelas condies, assim facilitamos o entendimento dos laos. Condies servem para controlar se tal tarefa deve ser feita. Basicamente uma expresso ou simples valor so testados pela condio, e caso for considerada verdadeira pela condio, uma srie de tarefas so executadas, caso contrrio no sero, ou melhor, caso contrrio ainda possvel definir outras tarefas a serem executadas, o que uma prtica comum. Estrutura condicional if O if a mais bsica das expresses condicionais no JavaScript. Com ele, voc pode decidir se quer executar uma ao ou no. Exemplo: bananas = 6 if (bananas == 6) { alert(" verdade. Temos meia dzia de bananas") } A uma varivel local chamada bananas foi atribudo o nmero 6, e em seguida surge a condio if. Entre os parnteses que vm logo aps o if deve estar a expresso, varivel ou literal que a codio vai verificar se true ou false. Ou seja, se bananas == 6 tiver como resultado true ento a condio satisfeita e um bloco de cdigo executado. Esse bloco de cdigo toda programao que est entre o conjunto de chaves { }. Se o resultado for false, esse bloco de cdigo ignorado. No nosso exemplo, est claro que a condio ser satisfeita e o bloco ser executado. Estrutura condicional if else A novidade aqui o else. Usando ele, podemos definir um bloco de cdigo a ser executado quando a condio if no for satisfeita, ou seja, o caso contrrio que foi citado na explicao da condio if. Exemplo: bananas = 22 if (bananas == 6)

14

FATEC Carapicuba ASTI DJD Tutorial de JavaScript { alert(" verdade. Temos meia dzia de bananas") } else { alert("No verdade. Temos outra quantidade de bananas") } Estruturas condicionais if else encadeadas uma forma de estabalecer vrias condies e blocos de cdigo distintos, sendo que apenas um desse blocos das estrutura ser executado, o bloco de cdigo correspondente a primeira condio que for satisfeita. Simplificando, uma sequncia de condies ifs, cada uma com seu prprio bloco de cdigo, que sero lidas em sequncia, sendo que o programa s para verificar a prxima condio caso a anterior no seja satisfeita, e ao encontrar uma condio considera verdadeira o bloco de cdigo dela executado e as condies seguintes sero ignoradas. Exemplo: bananas = 22 if (bananas == 6) { alert("Temos seis de bananas") } else if (bananas == 10) { alert("Temos dez bananas") } else { 15

FATEC Carapicuba ASTI DJD Tutorial de JavaScript alert("Temos outra quantidade de bananas") } Ou seja, o raciocnio seguido : "Se for true faa, seno faa (Se for true faa, seno faa(...)). Estrutura seletora switch A estrutura switch tambm um tipo de condio. Com ela, possvel definir o que vai acontecer caso a expresso avaliada - que pode ser um literal, varivel(mais comum), expresso tenha determinado valor. Voc pode definir o que vai acontecer para quantos valores quiser, por exemplo, se a expresso avaliada for uma varivel contendo um nmero, ser possvel definir um bloco de cdigo para quando ela valer 1, ou 2, ou 3, ou 4, ou ..., basta usar um case para cada uma delas. Exemplo: farol = "amarelo" switch (farol) { case "vermelho": alert("Pare") break case "amarelo": alert("Atencao") break case "verde": alert("Prossiga") break default: alert("Cor ilegal") } No exemplo existe um comando break no final de cada case. Se eles no fosse colocado, o que vem depois dele seguiria sendo executado, ou seja, o cdigo a ser 16

FATEC Carapicuba ASTI DJD Tutorial de JavaScript executado em um case que fique abaixo tambm seria executao. O break no deixa isso acontecer, fazendo com que o switch "acabe" ao chegar nele, e o programa continua aps o fechamento das chaves. O default equivalente ao else do if, ou seja, caso nem um case seja executado, ento o default executado. Estruturas de repetio Servem para repetir um bloco de cdigo vrias vezes. O nmero de vezes a ser repetido ou a condio para o loop pode ser definida pelo programador e varia de uma estrutura para outra. Estrutura de repetio for Usa-se o for quando um trecho de cdigo precisa ser repetido n vezes. A estrutura dispoem de 3 campos separados por ponto-e-vrgula ( ;) para fazer o controle do loop, ou seja, definir quando ele deve acabar. So eles: inicializao, condio, atualizao. Normalmente, na inicializao definimos uma varivel que ser verificda na condio e que ser modificada na atualizao. Assim como no if, a condio satisfeita quando a expresso avaliada valer true. A modificao que feita na atualizao que ocorre aps a ultima linha do bloco de cdigo que ser repetido - geralmente o incremento ou decremento da varivel inicializada, isso vai depender da condio. A palavra normalmente foi reforada h pouco porque o usurio pode deixar qualquer um dos campos em "branco"(o que em alguns casos algo normal) ou ainda us-los de um forma no convencional, o que no nem um pouco comum. Sintaxe: for (inicializao;condio;atualizao) { } Exemplo: a=2 for (i = 0; i < 2; i++) { a=i } 17

FATEC Carapicuba ASTI DJD Tutorial de JavaScript alert(a) Assim que a condiono for satisfeita o loop quebrado.

Estrutura de repetio while O while uma estrutura mais simples do que o for, mas no significa que mais limitado. O while s tem o campo da condio, ento caso o programador no queira que o loop seja infinito ele precisa se preocupar em garantir, dentro do bloco de cdigo que ser repetido, que a condio do while deixe de ser satisfeita, ou seja, que a expresso da condio deixe de valer true. Exemplo: numero = 0 while (numero < 10) { numero++ } alert(numero)

Estrutura de repetio do-while Funciona da mesma forma que o while comum, porm o bloco de cdigo executado antes de verificar a condio, ou seja, o bloco ser executado pelo menos uma vez mesmo que a condio no seja satisfeita.Exemplo: numero = 10 do { numero++ } 18

FATEC Carapicuba ASTI DJD Tutorial de JavaScript while (numero < 10) alert(numero)

3.3 Funes
O que so e como usar Funes so blocos de cdigo reaproveitveis que aceitam parmetros de entrada e podem devolver um resultado, chamado retorno, para ser usado. A sintaxe para criar uma funo: function functionname(var1,var2,...,varX) { some code } A palavra return, serve para a funo retornar seu resultado para ser usado. Para usar o mtodo criado pasta seguir a sintaxer: functionname(var1,var2,...,varX); Manipulando strings substring: esta uma funo de manipulao de strings, e serve para que voc possa obter um trecho de uma string, basta informar o intervalo que deseja obter. Para definir o intervalo usamos nmeros inteiros, sendo que o nmero 0(zero) representa o primeiro caractere e os demais so representados pelo nmeros seguinters. Exemplo: var frase = Oi mundo!; var parte = frase.substring(0,2); A Varivel parte conter a string "Oi" substr: idntico funo substring length: retorna o nmero de caracteres que um string tem. Exemplo: aString = Izaias;

19

FATEC Carapicuba ASTI DJD Tutorial de JavaScript stringSize = aString.length; //stringSize = 6 charAt: retorna o caracter da posio especificada. Exemplo: aString = "Lisboa"; aChar = aString.charAt(4); //aChar = "o"

indexOf: retorna a posio do primeiro caracter encontrado na string. Exemplo: aString = Izaias; zIndex = aString.indexOf(z); //zIndex = 1 zIndex = aString.indexOf(x); //zIndex = -1 pois x no existe no nome Izaias zIndex = aString.indexOf(a); //zIndex = 2 lastIndexOf: quase igual ao indexOf, porm com o objetivo de trazer a posio do ltimo caracter encontrado, toUpperCase: muda a string para maisculo. Exemplo: minhaString= Izaias; minhaString=minhaString.toUpperCase(); //minhaString = "IZAIAS" toLowerCase: muda a string para minsculo. escape: retorna o valor ASCII da string. Pode ser usado como uma funo de codificao de URL (URLEncode). Exemplo: escape("Iza i & as"); //Retornar Iza%20i%20%26%20as unescape: retorna um caracter partir de seu cdigo ASCII. Manipulando nmeros abs: o mtodo abs reenvia o valor absoluto de um nmero. Isto , este mtodo elemina o smbolo negativo de um nmero. Exemplo: y=-4

20

FATEC Carapicuba ASTI DJD Tutorial de JavaScript x=Math.abs(y); //x = 4 ceil: o mtodo ceil reenvia o inteiro superior ou igual ao um nmero. Exemplo: y=4.01; x=Math.ceil(y); //x=5

floor: o mtodo floor reenvia o inteiro inferior ou igual ao um nmero. y=4.99; x=Math.floor(y); //x = 4 round: o mtodo round arredonda o nmero ao inteiro mais prximo. y=20.355; x=Math.round(y); //x=20 max: o mtodo max reenvia o maior entre 2 nmeros. x=Math.max(10,20); //x=20 min: o mtodo min reenvia o menor entre 2 nmeros. x=Math.min(10,20); //x=10 pow: o mtodo pow calcula o valor de um nmero elevado a outro. x=Math.pow(2,3); //2 elevado a 3, x = 8 sqrt: o mtodo sqrt calcula a raiz quadrada de um nmero. x=Math.sqrt(25); //x = 5 funes trigonomtricas As diferentes funes trigonomtricas: x=Math.PI; x=Math.sin(y); 21

FATEC Carapicuba ASTI DJD Tutorial de JavaScript x=Math.asin(y); x=Math.cos(y); x=Math.acos(y); x=Math.tan(y); x=Math.atan(y); funes logartmicas As diferentes funes logartmicas: x=Math.exp(y); x=Math.log(y); x=Math.LN2; x=Math.LN10; x=Math.E; x=Math.LOG2E; x=Math.LOG10E;

3.4 Tratamento de excees

Exceses, um outro nome utilizado para definir erros, ento as estruturas Throw, Try/Catch/Finally so utilizadas, para identificar e tratar erros em um script JavaScript. Eventualmente, podemos construir um script como o da imagem abaixo, que mesmo com poucas linhas, nos apresenta um erro, logo na primeira linha do cdigo.

22

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

img 3.1

Ser que voc consegue pensar decifrar o erro? Enquanto pensamos nisto, vamos conhecer o objeto ERROR da linguagem JavaScript. O objeto ERROR da linguagem JavaScript, trs informaes sobre um erro que acabou de ocorrer, e dentro deste objeto temos duas propriedades e um mtodo. Veja a imagem abaixo.

img 3.2

A propriedade message trs os detalhes do erro, ento, por exemplo se ns estamos utilizando uma referncia a uma varivel indefinida, ele pode trazer uma mensagem como: X ainda no esta definido. A propriedade name, trs o tipo do erro, e o mtodo toString(), nos apresenta o tipo de erro mais a mensagem do erro, separada pelo sinal de : (dois-pontos). Ento, quais os tipos de erros que podemos encontrar dentro da propriedade name? 23

FATEC Carapicuba ASTI DJD Tutorial de JavaScript Fcil, so estes aqui: EvalError: Indica um erro utilizando um mtodo eval (), este mtodo eval (), permite que possamos executar uma linha JavaScript, no formato de String; RangeError: Indica que um nmero extrapola os limites numricos permitidos pela linguagem. Este no um erro muito frequente, mas deve ser conhecido; ReferenceError: Indica exatamente a utilizao de um valor (varivel) que no foi definida; SintaxeError: Indica quando escrevemos instrues de maneira errada; TypeError: Indica a utilizao de um operando diferente do operando esperado; URIError: Indica o uso inadequado de funes que trabalham com URI.

Agora que conhecemos o objeto ERROR, vamos voltar ao nosso exemplo da imagem img 3.1. Enquanto, estamos conhecendo o ERROR, talvez voc j tenha identificado onde esta o erro, se no indentificou vamos indentifica-lo, agora, tentando executar o script em nossa pgina. Repare que quando o executamos, nenhum mensagem de alerta exibida, porque em algum momento durante a leitura do script, um erro aconteceu e o script parou de ser executado. Ento no Firefox, dentro do FireBug, ns temos a possibilidade de ver o erro acontecendo. Em console, vamos habilitar as opes de avisos javascript, e quando executamos novamente, ele vai mostrar para ns o erro.

img 3.3

24

FATEC Carapicuba ASTI DJD Tutorial de JavaScript Nesta linha: var x = a; Um erro esta sendo apresentado, sendo identificado que esta varivel x no foi definida, esta apresentao justamente aquela propriedade message, que cohecemos no objeto ERROR. Sendo assim, vamos comear a estudar estas estruturas de tratamento e correo de excees JavaScript. Ento, vamos comear entendendo as estruturas de tratamento try ... catch. A instruo try ... catch permitem que voc teste um bloco de cdigo de erros. JavaScript - Erros Catching. Ao consultar pginas da Web na internet, todos ns temos visto uma caixa de alerta JavaScript, nos dizendo que h um erro de execuo e perguntando "Deseja depurar?". Mensagem de erro como este podem ser teis para os desenvolvedores, mas no para os usurios. Quando os usurios vem os erros, eles muitas vezes deixam a pgina da Web. A instruo try ... catch permite que voc teste um bloco de cdigo de erros. O bloco try contm o cdigo a ser executado, eo bloco catch contm o cdigo a ser executado se ocorrer um erro.

Sintaxe
try { //Run some code here } catch(err) { //Handle errors here } Note que o try ... catch escrito em letras minsculas. Utilizar letras maisculas ir gerar um erro de JavaScript!

Exemplos O exemplo abaixo suposto alerta "Bem-vindo convidado!" quando o boto clicado. No entanto, h um erro de digitao na mensagem ( ) funo, alert ( ) est incorreto como adddlert ( ), um erro de JavaScript ocorre. O bloco catch captura o erro e executa um cdigo personalizado para lidar com isso. O cdigo exibe uma mensagem de erro personalizada, informando ao usurio o que aconteceu: Exemplo <html> 25

FATEC Carapicuba ASTI DJD Tutorial de JavaScript <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Bem-vindo convidado!"); } catch(err) { txt="Houve um erro nesta pgina.\n\n"; txt+="Descrio do erro: " + err.description + "\n\n"; txt+="Click em OK para continuar.\n\n"; alert(txt); } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

O exemplo a seguir usa uma caixa para confirmar a exibir uma mensagem personalizada, informando os usurios que podem clicar em OK para continuar exibindo a pgina, ou clique em Cancelar para ir para a pgina inicial. Se confirmar o mtodo retorna false, o usurio clicou em Cancelar e, o cdigo redireciona o usurio. Se confirmar o mtodo retorna true, o cdigo no faz nada: Exemplo <html> <head> <script type="text/javascript"> var txt=""; function message() { try { adddlert("Bem-vindo convidado!"); } catch(err) { txt="Houve um erro nesta pgina.\n\n"; txt+="Click em OK para continuar visualizando esta pgina,\n"; 26

FATEC Carapicuba ASTI DJD Tutorial de JavaScript txt+="ou Cancelar para voltar a pgina inicial.\n\n"; if(!confirm(txt)) { document.location.href="http://www.w3schools.com/"; } } } </script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>

Agora que conhecemos as isntrues try ... catch, hora de conhecer a estrutura Throw. A instruo throw permite que voc crie uma exceo. Se voc usar essa declarao, juntamente com a instruo try ... catch, voc pode controlar o fluxo do programa e gerar mensagens de erro exata.

Syntax
throw exception

A exceo pode ser uma string, integer, Boolean ou um objeto. Note-se que throw est escrito em letras minsculas. Utilizar letras maisculas ir gerar um erro de JavaScript! Exemplo O exemplo a seguir, determina o valor de uma varivel chamada x. Se o valor de x for maior que 10, menor do que 0, ou no um nmero, vamos lanar um erro. O erro ento capturado pelo argumento captura e a mensagem de erro apropriada exibida: Exemplo <html> <body> <script type="text/javascript"> var x=prompt("Digite um nmero entre 0 e 10:",""); try { if(x>10) 27

FATEC Carapicuba ASTI DJD Tutorial de JavaScript { throw "Err1"; } else if(x<0) { throw "Err2"; } else if(isNaN(x)) { throw "Err3"; } } catch(er) { if(er=="Err1") { alert("Erro! O valor muito alto "); } if(er=="Err2") { alert("Erro! O valor muito baixo "); } if(er=="Err3") { alert("Erro! O valor no um nmero "); } } </script> </body> </html>

4 Boas prticas no JavaScript

Um breve manual, com 10 boas prticas para implementao do comportamento de interfaces web.

4.1 Indentao
Identao um neologismo para a palavra indentation, o que no ingls significa espacejar ou recuo. Ajuda na compreenso da linguagem, pois, no caso do javaScript, no usado como no Python, devido aos delimitadores de bloco, marcadores de "abre" e "fecha" ( { e } ). Serve como uma ajuda para melhorar a viisualizao do cdigo, porm, se utilizado de maneira incorreta, acaba dificultando a leitura.

28

FATEC Carapicuba ASTI DJD Tutorial de JavaScript Como dica, quando for fazer uma programao com vrias pessoas, seria bom definir uma padronizao para identao do cdigo, pois assim, ficar organizado e no ser possvel identificar em qual trecho houve a escrita do programador A ou B, isso acontece normalmente usando espaamento de 3 ou 4 vezes, em vez de tabs.

Exemplo correto:
<html> <head> <title>Programa Ol Mundo</title> </head> <body> <script type="text/javascript"> window.alert("Ol, Mundo!"); </script> </body> </html>

Exemplo incorreto:
<html> <head> <title>Programa Ol Mundo</title> </head> <body> <script type="text/javascript"> window.alert("Ol, Mundo!"); </script> </body> </html>

4.2 Dez boas prticas

29

FATEC Carapicuba ASTI DJD Tutorial de JavaScript 1. Separar JavaScript de cdigo HTML: Existe uma biblioteca JavaScript com o objetivo de facilitar a gerao de comportamento dinmico em pginas HTML, o nome desta biblioteca jQuery. Um dos grandes poderes da biblioteca so os seletores. Com eles, voc pode facilmente se referir a algum elemento HTML da sua pgina simplesmente por meio de seu id, sua classe ou alguma outra propriedade. Com essa possibilidade, fica muito mais fcil extrair o comportamento dinmico da sua pgina, e isso bom, pois embora no seja uma prtica obrigatria, torna o cdigo da pgina mais legvel. 2. Nunca depender de JavaScript ativado: Um erro grave assumir que o visitante do seu site vai acess-lo com suporte a JavaScript. A partir disso, voc comea a colocar um monte de coisas na sua pgina que s funcionam com JavaScript ativado. E se o visitante no tiver JavaScript ativado? Podemos adicionar comportamentos em nossos sites com JavaScript, mas nunca deixar os contedos visveis apenas para quem tiver JavaScript ativado. 3. Seguir notao java para nomes de classes, objetos, variveis, mtodos e funes :

Classe: No h espao entre as palavras, e cada palavra do nome comea com letra mascula. P.ex.: MinhaClasse Objeto: A mesma regra da classe da qual foi instanciada, mas comeando com letra minscula. P.ex.: minhaClasse Variveis, mtodos e funes: No h espao entre as palavras, e cada palavra do nome comea com letra mascula, exceto a primeira. P.ex. meuMetodoQueCalcula

4. Sempre que tentar acessar um atributo de um objeto, verificar se ele existe: if(document.getElementById(meuElemento)) document.getElementById(meuElemento).value = a; 5. No mesmo sentido, ao acessar um item de um array diretamente pelo index do mesmo, verificar se ele existe. 6. Terminar cada linha de comando com ;: As distintas instrues que contm nossos scripts devem ser separadas convenientemente para que o navegador no indique os correspondentes erros de sintaxe. Javascript tem duas maneiras de separar instrues. A primeira atravs do caractere ponto e vrgula ( ; )e a segunda atravs de uma quebra de linha. Por esta razo, as sentenas Javascript no necessitam acabar em ponto e vrgula a no ser que coloquemos duas instrues na mesma linha. 30

FATEC Carapicuba ASTI DJD Tutorial de JavaScript De qualquer forma, no uma idia ruim se acostumar a utilizar o ponto e vrgula depois de cada instruo, pois outras linguagens como Java ou C obrigam a utiliz-las e estaremos nos acostumando a realizar uma sintaxe mais parecida habitual em torno de programaes avanadas.

7. Criar listeners de javascript para eventos dos elementos do html, ao invs de colocar os mesmos no html: Exemplo //no javascript document.getElementById(myLink).onclick = ckickMe;

8. Confirmao do usurio: Sempre que o usurio disparar um evento sem volta no sistema caso clssico o de apagar dados confirmar se ele deseja realmente efetuar a operao (p.ex.: usar o comando confirm()). 9. Validaes de formulrios: Validar os formulrios uma boa prtica- mesmo que a validao no server-side seja feita (e deve ser sempre feita). Evita com que sejam enviados dados inconsistentes para o servidor e que seja feito um request desnecessrio. Um exemplo disto so as datas em formato invlido digitadas pelos usurios.

10. Cdigo HTML no JavaScript: Evitar escrever cdigo html no javascript. Usar sempre manipulao da DOM, criando elementos, removendo-os, etc atravs dos mtodos nativos do javascript.

5 A linguagem na prtica
Neste captulo iremos ver exemplos prticos, exerccios para testar o que foi aprendido neste tutorial e como usamos estes scripts junto de outros recursos na web.

5.1 Utilizando o JavaScript junto de outros recursos da Internet

Desenvolvimento de scripts As instrues da linguagem JavaScript podem ser escritas em qualquer editor ASCII, como por exemplo, o Bloco de Notas do Windows e at mesmo o Edit do MS-DOS, sendo que seu arquivo dever ser salvo com a extenso HTML ou .JS. Para visualizar a 31

FATEC Carapicuba ASTI DJD Tutorial de JavaScript execuo deste script, basta acess-lo atravs do browser. Quando se desenvolve scripts em uma pgina HTML, necessrio que o usurio os delimite atravs do Tag <SCRIPT> ou utilize-os como manipuladores de eventos atravs de alguns Tags HTML. Outra maneira criar um arquivo externo para ser chamado partir de uma pgina HTML. Este arquivo separado dever possuir a extenso .JS. Desenvolvendo scripts com o tag <script> Com o Tag <SCRIPT> possvel ao usurio incorporar seus scripts dentro de uma pgina HTML. Veja a sintaxe de utilizao deste Tag: <SCRIPT> instrues do JavaScript... </SCRIPT> Em alguns casos possvel observar o tag SCRIPT com o seguinte atributo: <SCRIPT LANGUAGE=JAVASCRIPT> instrues do JavaScript... </SCRIPT> O atributo LANGUAGE de uso opcional, este atributo ir especificar a verso da linguagem JavaScript utilizado. A sua omisso assume qualquer instruo do JavaScript independente da sua verso. Se for especificada verso conforme exemplo abaixo, apenas os browsers que sejam compatveis com a verso especfica podero executar este script: <SCRIPT LANGUAGE=JAVASCRIPT1.3> instrues do JavaScript... </SCRIPT> Desenvolvendo scripts atravs de um arquivo externo As instrues da linguagem JavaScript podem ser executadas de um arquivo externo. Com isto, o usurio no precisar repetir instrues vrias vezes, isto, facilita a manuteno do cdigo desenvolvido e a reutilizao dele.

32

FATEC Carapicuba ASTI DJD Tutorial de JavaScript Para isto, o usurio dever criar o cdigo em qualquer editor ASCII da mesma forma que se cria uma pgina HTML, e ao salv-lo, o usurio dever atribuir ao seu nome a extenso .JS. Neste arquivo o usurio no precisar utilizar o Tag HTML para delimitar suas instrues. Para que uma pgina HTML possa processar as instrues desenvolvidas no arquivo externo, basta utilizar o seguinte parmetro na pgina HTML: <SCRIPT LANGUAGE=JAVASCRIPT SRC=NomeArquivo.js></SCRIPT> Conforme dito anteriomente, a linguagem JavaScript interpretada pelo browser e que seu cdigo embutido dentro do cdigo HTML entre os tags <SCRIPT> e </SCRIPT> ou atravs de um arquivo externo que possua a extenso .JS.

5.2 Exerccos prticos

Alguns exercios para testar o JavaScript e explorar outros recursos dele no abordados. 1. Faa um pequeno programa em JavaScript, que apresente em uma janela de aviso, o seguinte formato de data: Dia/Ms/Ano Horas:Minutos:Segundos 2. Crie um link que abre uma janela POPUP e crie outro que a feche. Exerccios Resolvidos em JavaScript. Exerccio 1.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> 3 <html xmls="http://ww.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 4 <head> 5 <title>Exibe em alert a data e hora atuais do S.O</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=isso-8859-1" /> 7 <script type="text/javaScript"> 8 //Cria a funo data_atual 9 function data_atual() 10 { 11 //Cria a varivel DTS e atribui os valores da funo pre definida Date() 12 var DTS = new Date(); 13 //pega de DTS o dia 14 var Dia = DTS.getDate(); 15 //pega de DTS o ms 16 var Mes = DTS.getMonth();

33

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

17 //pega de DTS o ano com 4 dgitos 18 var Ano = DTS.getFullYear(); 19 //pega de DTS a hora 20 var Hora = DTS.getHours(); 21 //pega de DTS os minutos 22 var Minutos = DTS.getMinutes(); 23 //pega de DTS os segundos 24 var Segundos = DTS.getSeconds(); 25 /*Atribui todos a varivel Data, junto com caracteres de / para data e 26 caracteres de : para as horas, tornando-o mais apresentvel*/ 27 var Data = Dia + "/" + Mes + "/" + Ano+" - "+Hora+":"+Minutos+":"+Segundos; 28 //Imprime numa janela o resultado 29 alert(Data); 30 } 31 </script> 32 </head> 33 <!--Ao carregar o documento, chame a funo data_atual--> 34 <body onload="data_atual()"> 35 </body>

36 </html>

Exerccio 2.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"> 3 <html xmls="http://ww.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 4 <head> 5 <title>Trabalhando com JavaScript</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=isso-8859-1" /> 7 <script type="text/javaScript"> 8 //Cria uma varivel global de nome janela 9 var janela; 10 //Criao de uma funo de nome abrir, sem argumentos 11 function abrir() 12 { 13 /*Abre uma janela de link popup.html, com nome Janela_Popup, que s 14 foi especificado sua largura e altura subtendendo que os demais no sero 15 mostrados, j que os mesmos no foram especificados. 16 Ainda o resultado atribuido a varivel janela*/ 17 janela=window.open('ex19.html','Janela_Popup', 'width=485,height=580'); 18 } 19 20 //Criao de uma funo de nome fechar, sem argumentos 21 function fechar() 22 { 23 //Pega a varivel janela, que a prpria janela que foi aberta e a fecha 24 janela.close(); 25 } 26 </script> 27 </head> 28 <body> 29 <a href="#" onclick="abrir();">Abrir Popup</a><br /> 30 <a href="#" onclick="fechar();">Fechar Popup</a> 31 </body>

34

FATEC Carapicuba ASTI DJD Tutorial de JavaScript

32 </html>

6 Referncias bibliogrficas
Palavras reservadas: http://www.arquivodecodigos.net/arquivo/tutoriais/javascript/curso_completo/parte_2/p alavras_reservadas.php Boas prticas Jquery: http://vidageek.net/2008/09/17/boas-praticas-de-javascript-na-internet/

Jquery Dicas: http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/ Boas prticas Chrisb: http://www.chrisb.com.br/blog/boas-praticas-no-javascript/ Estruturas para tratamento de exceses: http://www.help4web.net/videos//video/o_bRRMcOLOM&feature=youtube_gdata_play er Indentao: http://trialforce.nostaljia.eng.br/ http://www.metropoledigital.ufrn.br/aulas_avancado/web/disciplinas/desen v_web/index.html Outros tutoriais de JavaScripr usados: http://www.criarweb.com/javascript/ http://www.truquesedicas.com/tutoriais/javascript/00008a.htm http://www.codefactory.com.br http://www.nce.ufrj.br/ginape/js/conteudo/introducao/caracteristicas.htm http://www.javascript-tutorial.com.br/content-2.html http://www.criarweb.com/artigos/197.php http://forum.pcproject.com.br/javascript-tipos-de-dados-em-javascript/2726 http://instrui.com/tutorial/index.php?id=20 http://www.gico.com.br/site/pdf/JavaScript.pdf

Estrturas throw, try ... catch: http://www.w3schools.com/js/default.asp

35