Javascript

Javascript
Verso 1.0.0
Sumrio
I Sobre essa Apostila 2 4 9 18
19 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 20 20 20 20 21 21 21 22 22 23
II Informaes Bsicas III GNU Free Documentation License IV Javascript
1 Sobre Javascript 2 Plano de ensino 2.1 Objetivo . . . . . . . . . 2.2 Pblico Alvo . . . . . . . 2.3 Pr-requisitos . . . . . . 2.4 Descrio . . . . . . . . 2.5 Metodologia . . . . . . . 2.6 Cronograma . . . . . . 2.7 Programa . . . . . . . . 2.8 Avaliao . . . . . . . . 2.9 Bibliograa . . . . . . . 2.10 Pginas Recomendadas
3 Incio do Javascript 24 3.1 O que Javascript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 3.2 Diferenas Bsicas entre Java e Javascript . . . . . . . . . . . . . . . . . . . . . . . 25 4 Sintaxe e Variveis 4.1 Necessrio para programar em Javascript . . . . . . . . . . . . . . . . . . . . . . . . 4.2 Sintaxe Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.3 Variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Strings e Mensagens 5.1 As Strings . . . . . . . . . . . . . . . . . . . . 5.2 Mensagens . . . . . . . . . . . . . . . . . . . 5.3 Mensagens que rolam na barra de status . . 5.4 Armazenando dados do usurio em variveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 26 27 27 30 30 32 33 34
CDTC
Centro de Difuso de Tecnologia e Conhecimento
Brasil/DF 36 36 36 37 39 41 41 42 42 43 45 45 45 47 47 48 50 54 54 55 56 60 60 62 63 63 65
6 Objetos e Arrays 6.1 Objetos . . . . . . . . . . . 6.1.1 Manipulando Arrays 6.2 Mais sobre vetores . . . . . 6.3 Arrays multidimensionais .
. . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
7 Operadores 7.1 Lgicos . . . . . . . . . . . . 7.2 Operadores Especiais . . . . 7.3 Precedncia de Operadores . 7.4 Comandos . . . . . . . . . . 7.5 Comando FOR . . . . . . . . 7.6 Comando WHILE . . . . . . . 7.7 Comando DO...WHILE . . . .
8 Eventos e Outros Comandos 8.1 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.2 Outros Comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8.3 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Classes: Math, Number e Boolean 9.1 Classe Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.2 Classe Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9.3 Classe Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 Date e Checkbox 10.1 Trabalhando com os objetos de datas. 10.2 CheckBox . . . . . . . . . . . . . . . . 10.2.1 Propriedades . . . . . . . . . . 10.2.2 Mtodos: . . . . . . . . . . . . 11 Hierarquia dos Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
12 Ocultando scripts 68 12.1 Ocultando scripts de navegadores antigos . . . . . . . . . . . . . . . . . . . . . . . . 68 13 Exemplos 70 13.1 Navegador Dinmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 13.2 Relgio Digital . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Parte I
Sobre essa Apostila
CDTC
Brasil/DF
Contedo
O contedo dessa apostila fruto da compilao de diversos materiais livres publicados na internet, disponveis em diversos sites ou originalmente produzido no CDTC (http://www.cdtc.org.br.) O formato original deste material bem como sua atualizao est disponvel dentro da licena GNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seo de mesmo nome, tendo inclusive uma verso traduzida (no ocial). A reviso e alterao vem sendo realizada pelo CDTC (suporte@cdtc.org.br) desde outubro de 2006. Crticas e sugestes construtivas sero bem-vindas a qualquer hora.
Autores
A autoria deste de responsabilidade de Jlio Cesar Jnior (julio@cdtc.org.br) . O texto original faz parte do projeto Centro de Difuso de Tecnologia e Conhecimento que vm sendo realizado pelo ITI (Instituto Nacional de Tecnologia da Informao) em conjunto com outros parceiros institucionais, e com as universidades federais brasileiras que tem produzido e utilizado Software Livre apoiando inclusive a comunidade Free Software junto a outras entidades no pas. Informaes adicionais podem ser obtidas atravs do email ouvidoria@cdtc.org.br, ou da home page da entidade, atravs da URL http://www.cdtc.org.br.
Garantias
O material contido nesta apostila isento de garantias e o seu uso de inteira responsabilidade do usurio/leitor. Os autores, bem como o ITI e seus parceiros, no se responsabilizam direta ou indiretamente por qualquer prejuzo oriundo da utilizao do material aqui contido.
Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br) . Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOSTILA. A copy of the license is included in the section entitled GNU Free Documentation License.
Parte II
Informaes Bsicas
CDTC
Brasil/DF
Sobre o CDTC
Objetivo Geral O Projeto CDTC visa a promoo e o desenvolvimento de aes que incentivem a disseminao de solues que utilizem padres abertos e no proprietrios de tecnologia, em proveito do desenvolvimento social, cultural, poltico, tecnolgico e econmico da sociedade brasileira. Objetivo Especco Auxiliar o Governo Federal na implantao do plano nacional de software no-proprietrio e de cdigo fonte aberto, identicando e mobilizando grupos de formadores de opinio dentre os servidores pblicos e agentes polticos da Unio Federal, estimulando e incentivando o mercado nacional a adotar novos modelos de negcio da tecnologia da informao e de novos negcios de comunicao com base em software no-proprietrio e de cdigo fonte aberto, oferecendo treinamento especco para tcnicos, prossionais de suporte e funcionrios pblicos usurios, criando grupos de funcionrios pblicos que iro treinar outros funcionrios pblicos e atuar como incentivadores e defensores dos produtos de software no proprietrios e cdigo fonte aberto, oferecendo contedo tcnico on-line para servios de suporte, ferramentas para desenvolvimento de produtos de software no proprietrios e do seu cdigo fonte livre, articulando redes de terceiros (dentro e fora do governo) fornecedoras de educao, pesquisa, desenvolvimento e teste de produtos de software livre.
Guia do aluno
Neste guia, voc ter reunidas uma srie de informaes importantes para que voc comece seu curso. So elas: Licenas para cpia de material disponvel; Os 10 mandamentos do aluno de Educao a Distncia; Como participar dos foruns e da wikipdia; Primeiros passos. muito importante que voc entre em contato com TODAS estas informaes, seguindo o roteiro acima.
Licena
Copyright 2006, Instituto Nacional de Tecnologia da Informao (cdtc@iti.gov.br). 6
CDTC
Brasil/DF
dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior pblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSA APOSTILA. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU".
Os 10 mandamentos do aluno de educao online
1. Acesso Internet: ter endereo eletrnico, um provedor e um equipamento adequado pr-requisito para a participao nos cursos a distncia; 2. Habilidade e disposio para operar programas: ter conhecimentos bsicos de Informtica necessrio para poder executar as tarefas; 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distncia conta muitos pontos, pois ir colaborar para o processo ensino-aprendizagem pessoal, dos colegas e dos professores; 4. Comportamentos compatveis com a etiqueta: mostrar-se interessado em conhecer seus colegas de turma respeitando-os e se fazendo ser respeitado pelos mesmos; 5. Organizao pessoal: planejar e organizar tudo fundamental para facilitar a sua reviso e a sua recuperao de materiais; 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigaes e realiz-las em tempo real; 7. Curiosidade e abertura para inovaes: aceitar novas idias e inovar sempre; 8. Flexibilidade e adaptao: requisitos necessrio mudana tecnolgica, aprendizagens e descobertas; 9. Objetividade em sua comunicao: comunicar-se de forma clara, breve e transparente ponto - chave na comunicao pela Internet; 10. Responsabilidade: ser responsvel por seu prprio aprendizado. O ambiente virtual no controla a sua dedicao, mas reete os resultados do seu esforo e da sua colaborao.
Como participar dos fruns e Wikipdia

Voc tem um problema e precisa de ajuda? Podemos te ajudar de 2 formas: A primeira o uso dos fruns de notcias e de dvidas gerais que se distinguem pelo uso: . O frum de notcias tem por objetivo disponibilizar um meio de acesso rpido a informaes que sejam pertinentes ao curso (avisos, notcias). As mensagens postadas nele so enviadas a 7
CDTC
Brasil/DF
todos participantes. Assim, se o monitor ou algum outro participante tiver uma informao que interesse ao grupo, favor post-la aqui. Porm, se o que voc deseja resolver alguma dvida ou discutir algum tpico especco do curso. recomendado que voc faa uso do Frum de dvidas gerais que lhe d recursos mais efetivos para esta prtica. . O frum de dvidas gerais tem por objetivo disponibilizar um meio fcil, rpido e interativo para solucionar suas dvidas e trocar experincias. As mensagens postadas nele so enviadas a todos participantes do curso. Assim, ca muito mais fcil obter respostas, j que todos podem ajudar. Se voc receber uma mensagem com algum tpico que saiba responder, no se preocupe com a formalizao ou a gramtica. Responda! E no se esquea de que antes de abrir um novo tpico recomendvel ver se a sua pergunta j foi feita por outro participante. A segunda forma se d pelas Wikis: . Uma wiki uma pgina web que pode ser editada colaborativamente, ou seja, qualquer participante pode inserir, editar, apagar textos. As verses antigas vo sendo arquivadas e podem ser recuperadas a qualquer momento que um dos participantes o desejar. Assim, ela oferece um timo suporte a processos de aprendizagem colaborativa. A maior wiki na web o site "Wikipdia", uma experincia grandiosa de construo de uma enciclopdia de forma colaborativa, por pessoas de todas as partes do mundo. Acesse-a em portugus pelos links: Pgina principal da Wiki - http://pt.wikipedia.org/wiki/ Agradecemos antecipadamente a sua colaborao com a aprendizagem do grupo!
Primeiros Passos
Para uma melhor aprendizagem recomendvel que voc siga os seguintes passos: Ler o Plano de Ensino e entender a que seu curso se dispe a ensinar; Ler a Ambientao do Moodle para aprender a navegar neste ambiente e se utilizar das ferramentas bsicas do mesmo; Entrar nas lies seguindo a seqncia descrita no Plano de Ensino; Qualquer dvida, reporte ao Frum de Dvidas Gerais.
Perl do Tutor
Segue-se uma descrio do tutor ideal, baseada no feedback de alunos e de tutores. O tutor ideal um modelo de excelncia: consistente, justo e prossional nos respectivos valores e atitudes, incentiva mas honesto, imparcial, amvel, positivo, respeitador, aceita as idias dos estudantes, paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar. 8
CDTC
Brasil/DF
A classicao por um tutor desta natureza proporciona o melhor feedback possvel, crucial, e, para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem. Este tutor ou instrutor: fornece explicaes claras acerca do que ele espera e do estilo de classicao que ir utilizar; gosta que lhe faam perguntas adicionais; identica as nossas falhas, mas corrige-as amavelmente, diz um estudante, e explica porque motivo a classicao foi ou no foi atribuda; tece comentrios completos e construtivos, mas de forma agradvel (em contraste com um reparo de um estudante: os comentrios deixam-nos com uma sensao de crtica, de ameaa e de nervossismo) d uma ajuda complementar para encorajar um estudante em diculdade; esclarece pontos que no foram entendidos, ou corretamente aprendidos anteriormente; ajuda o estudante a alcanar os seus objetivos; exvel quando necessrio; mostra um interesse genuno em motivar os alunos (mesmo os principiantes e, por isso, talvez numa fase menos interessante para o tutor); escreve todas as correes de forma legvel e com um nvel de pormenorizao adequado; acima de tudo, devolve os trabalhos rapidamente;
Parte III
GNU Free Documentation License
10
CDTC
Brasil/DF
(Traduzido pelo Joo S. O. Bueno atravs do CIPSGA em 2001) Esta uma traduo no ocial da Licena de Documentao Livre GNU em Portugus Brasileiro. Ela no publicada pela Free Software Foundation, e no se aplica legalmente a distribuio de textos que usem a GFDL - apenas o texto original em Ingls da GNU FDL faz isso. Entretanto, ns esperamos que esta traduo ajude falantes de portugus a entenderem melhor a GFDL. This is an unofcial translation of the GNU General Documentation License into Brazilian Portuguese. It was not published by the Free Software Foundation, and does not legally state the distribution terms for software that uses the GFDLonly the original English text of the GFDL does that. However, we hope that this translation will help Portuguese speakers understand the GFDL better. Licena de Documentao Livre GNU Verso 1.1, Maro de 2000 Copyright (C) 2000 Free Software Foundation, Inc. 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA permitido a qualquer um copiar e distribuir cpias exatas deste documento de licena, mas no permitido alter-lo.
INTRODUO
O propsito desta Licena deixar um manual, livro-texto ou outro documento escrito "livre"no sentido de liberdade: assegurar a qualquer um a efetiva liberdade de copi-lo ou redistribui-lo, com ou sem modicaes, comercialmente ou no. Secundariamente, esta Licena mantm para o autor e editor uma forma de ter crdito por seu trabalho, sem ser considerado responsvel pelas modicaes feitas por terceiros. Esta Licena um tipo de "copyleft"("direitos revertidos"), o que signica que derivaes do documento precisam ser livres no mesmo sentido. Ela complementa a GNU Licena Pblica Geral (GNU GPL), que um copyleft para software livre. Ns zemos esta Licena para que seja usada em manuais de software livre, por que software livre precisa de documentao livre: um programa livre deve ser acompanhado de manuais que provenham as mesmas liberdades que o software possui. Mas esta Licena no est restrita a manuais de software; ela pode ser usada para qualquer trabalho em texto, independentemente do assunto ou se ele publicado como um livro impresso. Ns recomendamos esta Licena principalmente para trabalhos cujo propsito seja de introduo ou referncia.
APLICABILIDADE E DEFINIES
Esta Licena se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelo detentor dos direitos autorais dizendo que ele pode ser distribudo sob os termos desta Licena. O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do pblico um
11
CDTC
Brasil/DF
licenciado e referida como "voc". Uma "Verso Modicada"do Documento se refere a qualquer trabalho contendo o documento ou uma parte dele, quer copiada exatamente, quer com modicaes e/ou traduzida em outra lngua. Uma "Seo Secundria" um apndice ou uma seo inicial do Documento que trata exclusivamente da relao dos editores ou dos autores do Documento com o assunto geral do Documento (ou assuntos relacionados) e no contm nada que poderia ser includo diretamente nesse assunto geral (Por exemplo, se o Documento em parte um livro texto de matemtica, a Seo Secundria pode no explicar nada de matemtica). Essa relao poderia ser uma questo de ligao histrica com o assunto, ou matrias relacionadas, ou de posies legais, comerciais, loscas, ticas ou polticas relacionadas ao mesmo. As "Sees Invariantes"so certas Sees Secundrias cujos ttulos so designados, como sendo de Sees Invariantes, na nota que diz que o Documento publicado sob esta Licena. Os "Textos de Capa"so certos trechos curtos de texto que so listados, como Textos de Capa Frontal ou Textos da Quarta Capa, na nota que diz que o texto publicado sob esta Licena. Uma cpia "Transparente"do Documento signica uma cpia que pode ser lida automaticamente, representada num formato cuja especicao esteja disponvel ao pblico geral, cujos contedos possam ser vistos e editados diretamente e sem mecanismos especiais com editores de texto genricos ou (para imagens compostas de pixels) programas de pintura genricos ou (para desenhos) por algum editor de desenhos grandemente difundido, e que seja passvel de servir como entrada a formatadores de texto ou para traduo automtica para uma variedade de formatos que sirvam de entrada para formatadores de texto. Uma cpia feita em um formato de arquivo outrossim Transparente cuja constituio tenha sido projetada para atrapalhar ou desencorajar modicaes subsequentes pelos leitores no Transparente. Uma cpia que no "Transparente" chamada de "Opaca". Exemplos de formatos que podem ser usados para cpias Transparentes incluem ASCII simples sem marcaes, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XML usando uma DTD disponibilizada publicamente, e HTML simples, compatvel com os padres, e projetado para ser modicado por pessoas. Formatos opacos incluem PostScript, PDF, formatos proprietrios que podem ser lidos e editados apenas com processadores de texto proprietrios, SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edio no estejam disponveis para o pblico, e HTML gerado automaticamente por alguns editores de texto com nalidade apenas de sada. A "Pgina do Ttulo"signica, para um livro impresso, a pgina do ttulo propriamente dita, mais quaisquer pginas subsequentes quantas forem necessrias para conter, de forma legvel, o material que esta Licena requer que aparea na pgina do ttulo. Para trabalhos que no tenham uma pgina do ttulo, "Pgina do Ttulo"signica o texto prximo da apario mais proeminente do ttulo do trabalho, precedendo o incio do corpo do texto.
12
CDTC
Brasil/DF
FAZENDO CPIAS EXATAS

Voc pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou no comercial, desde que esta Licena, as notas de copyright, e a nota de licena dizendo que esta Licena se aplica ao documento estejam reproduzidas em todas as cpias, e que voc no acrescente nenhuma outra condio, quaisquer que sejam, s desta Licena. Voc no pode usar medidas tcnicas para obstruir ou controlar a leitura ou confeco de cpias subsequentes das cpias que voc zer ou distribuir. Entretanto, voc pode aceitar compensao em troca de cpias. Se voc distribuir uma quantidade grande o suciente de cpias, voc tambm precisa respeitar as condies da seo 3. Voc tambm pode emprestar cpias, sob as mesmas condies colocadas acima, e tambm pode exibir cpias publicamente.
FAZENDO CPIAS EM QUANTIDADE

Se voc publicar cpias do Documento em nmero maior que 100, e a nota de licena do Documento obrigar Textos de Capa, voc precisar incluir as cpias em capas que tragam, clara e legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, e Textos da Quarta Capa na capa de trs. Ambas as capas tambm precisam identicar clara e legivelmente voc como o editor dessas cpias. A capa da frente precisa apresentar o ttulo completo com todas as palavras do ttulo igualmente proeminentes e visveis. Voc pode adicionar outros materiais s capas. Fazer cpias com modicaes limitadas s capas, tanto quanto estas preservem o ttulo do documento e satisfaam a essas condies, pode ser tratado como cpia exata em outros aspectos. Se os textos requeridos em qualquer das capas for muito volumoso para caber de forma legvel, voc deve colocar os primeiros (tantos quantos couberem de forma razovel) na capa verdadeira, e continuar os outros nas pginas adjacentes. Se voc publicar ou distribuir cpias Opacas do Documento em nmero maior que 100, voc precisa ou incluir uma cpia Transparente que possa ser lida automaticamente com cada cpia Opaca, ou informar, em ou com, cada cpia Opaca a localizao de uma cpia Transparente completa do Documento acessvel publicamente em uma rede de computadores, qual o pblico usurio de redes tenha acesso a download gratuito e annimo utilizando padres pblicos de protocolos de rede. Se voc utilizar o segundo mtodo, voc precisar tomar cuidados razoavelmente prudentes, quando iniciar a distribuio de cpias Opacas em quantidade, para assegurar que esta cpia Transparente vai permanecer acessvel desta forma na localizao especicada por pelo menos um ano depois da ltima vez em que voc distribuir uma cpia Opaca (diretamente ou atravs de seus agentes ou distribuidores) daquela edio para o pblico. pedido, mas no obrigatrio, que voc contate os autores do Documento bem antes de redistribuir qualquer grande nmero de cpias, para lhes dar uma oportunidade de prover voc com uma verso atualizada do Documento.
13
CDTC
Brasil/DF
MODIFICAES
Voc pode copiar e distribuir uma Verso Modicada do Documento sob as condies das sees 2 e 3 acima, desde que voc publique a Verso Modicada estritamente sob esta Licena, com a Verso Modicada tomando o papel do Documento, de forma a licenciar a distribuio e modicao da Verso Modicada para quem quer que possua uma cpia da mesma. Alm disso, voc precisa fazer o seguinte na verso modicada: A. Usar na Pgina de Ttulo (e nas capas, se houver alguma) um ttulo distinto daquele do Documento, e daqueles de verses anteriores (que deveriam, se houvesse algum, estarem listados na seo "Histrico do Documento"). Voc pode usar o mesmo ttulo de uma verso anterior se o editor original daquela verso lhe der permisso; B. Listar na Pgina de Ttulo, como autores, uma ou mais das pessoas ou entidades responsveis pela autoria das modicaes na Verso Modicada, conjuntamente com pelo menos cinco dos autores principais do Documento (todos os seus autores principais, se ele tiver menos que cinco); C. Colocar na Pgina de Ttulo o nome do editor da Verso Modicada, como o editor; D. Preservar todas as notas de copyright do Documento; E. Adicionar uma nota de copyright apropriada para suas prprias modicaes adjacente s outras notas de copyright; F. Incluir, imediatamente depois das notas de copyright, uma nota de licena dando ao pblico o direito de usar a Verso Modicada sob os termos desta Licena, na forma mostrada no tpico abaixo; G. Preservar nessa nota de licena as listas completas das Sees Invariantes e os Textos de Capa requeridos dados na nota de licena do Documento; H. Incluir uma cpia inalterada desta Licena; I. Preservar a seo entitulada "Histrico", e seu ttulo, e adicionar mesma um item dizendo pelo menos o ttulo, ano, novos autores e editor da Verso Modicada como dados na Pgina de Ttulo. Se no houver uma sesso denominada "Histrico"no Documento, criar uma dizendo o ttulo, ano, autores, e editor do Documento como dados em sua Pgina de Ttulo, ento adicionar um item descrevendo a Verso Modicada, tal como descrito na sentena anterior; J. Preservar o endereo de rede, se algum, dado no Documento para acesso pblico a uma cpia Transparente do Documento, e da mesma forma, as localizaes de rede dadas no Documento para as verses anteriores em que ele foi baseado. Elas podem ser colocadas na seo "Histrico". Voc pode omitir uma localizao na rede para um trabalho que tenha sido publicado pelo menos quatro anos antes do Documento, ou se o editor original da verso a que ela se rera der sua permisso; K. Em qualquer seo entitulada "Agradecimentos"ou "Dedicatrias", preservar o ttulo da 14
CDTC
Brasil/DF
seo e preservar a seo em toda substncia e m de cada um dos agradecimentos de contribuidores e/ou dedicatrias dados; L. Preservar todas as Sees Invariantes do Documento, inalteradas em seus textos ou em seus ttulos. Nmeros de seo ou equivalentes no so considerados parte dos ttulos da seo; M. Apagar qualquer seo entitulada "Endossos". Tal sesso no pode ser includa na Verso Modicada; N. No reentitular qualquer seo existente com o ttulo "Endossos"ou com qualquer outro ttulo dado a uma Seo Invariante. Se a Verso Modicada incluir novas sees iniciais ou apndices que se qualiquem como Sees Secundrias e no contenham nenhum material copiado do Documento, voc pode optar por designar alguma ou todas aquelas sees como invariantes. Para fazer isso, adicione seus ttulos lista de Sees Invariantes na nota de licena da Verso Modicada. Esses ttulos precisam ser diferentes de qualquer outro ttulo de seo. Voc pode adicionar uma seo entitulada "Endossos", desde que ela no contenha qualquer coisa alm de endossos da sua Verso Modicada por vrias pessoas ou entidades - por exemplo, declaraes de revisores ou de que o texto foi aprovado por uma organizao como a denio ocial de um padro. Voc pode adicionar uma passagem de at cinco palavras como um Texto de Capa da Frente , e uma passagem de at 25 palavras como um Texto de Quarta Capa, ao nal da lista de Textos de Capa na Verso Modicada. Somente uma passagem de Texto da Capa da Frente e uma de Texto da Quarta Capa podem ser adicionados por (ou por acordos feitos por) qualquer entidade. Se o Documento j incluir um texto de capa para a mesma capa, adicionado previamente por voc ou por acordo feito com alguma entidade para a qual voc esteja agindo, voc no pode adicionar um outro; mas voc pode trocar o antigo, com permisso explcita do editor anterior que adicionou a passagem antiga. O(s) autor(es) e editor(es) do Documento no do permisso por esta Licena para que seus nomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquer Verso Modicada.
COMBINANDO DOCUMENTOS
Voc pode combinar o Documento com outros documentos publicados sob esta Licena, sob os termos denidos na seo 4 acima para verses modicadas, desde que voc inclua na combinao todas as Sees Invariantes de todos os documentos originais, sem modicaes, e liste todas elas como Sees Invariantes de seu trabalho combinado em sua nota de licena. O trabalho combinado precisa conter apenas uma cpia desta Licena, e Sees Invariantes Idnticas com multiplas ocorrncias podem ser substitudas por apenas uma cpia. Se houver mltiplas Sees Invariantes com o mesmo nome mas com contedos distintos, faa o ttulo de 15
CDTC
Brasil/DF
cada seo nico adicionando ao nal do mesmo, em parnteses, o nome do autor ou editor origianl daquela seo, se for conhecido, ou um nmero que seja nico. Faa o mesmo ajuste nos ttulos de seo na lista de Sees Invariantes nota de licena do trabalho combinado. Na combinao, voc precisa combinar quaisquer sees entituladas "Histrico"dos diversos documentos originais, formando uma seo entitulada "Histrico"; da mesma forma combine quaisquer sees entituladas "Agradecimentos", ou "Dedicatrias". Voc precisa apagar todas as sees entituladas como "Endosso".
COLETNEAS DE DOCUMENTOS
Voc pode fazer uma coletnea consitindo do Documento e outros documentos publicados sob esta Licena, e substituir as cpias individuais desta Licena nos vrios documentos com uma nica cpia incluida na coletnea, desde que voc siga as regras desta Licena para cpia exata de cada um dos Documentos em todos os outros aspectos. Voc pode extrair um nico documento de tal coletnea, e distribu-lo individualmente sob esta Licena, desde que voc insira uma cpia desta Licena no documento extrado, e siga esta Licena em todos os outros aspectos relacionados cpia exata daquele documento.
AGREGAO COM TRABALHOS INDEPENDENTES

Uma compilao do Documento ou derivados dele com outros trabalhos ou documentos separados e independentes, em um volume ou mdia de distribuio, no conta como uma Verso Modicada do Documento, desde que nenhum copyright de compilao seja reclamado pela compilao. Tal compilao chamada um "agregado", e esta Licena no se aplica aos outros trabalhos auto-contidos compilados junto com o Documento, s por conta de terem sido assim compilados, e eles no so trabalhos derivados do Documento. Se o requerido para o Texto de Capa na seo 3 for aplicvel a essas cpias do Documento, ento, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capa do Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado. Seno eles precisaro aparecer nas capas de todo o agregado.
TRADUO
Traduo considerada como um tipo de modicao, ento voc pode distribuir tradues do Documento sob os termos da seo 4. A substituio de Sees Invariantes por tradues requer uma permisso especial dos detentores do copyright das mesmas, mas voc pode incluir tradues de algumas ou de todas as Sees Invariantes em adio s verses orignais dessas Sees Invariantes. Voc pode incluir uma traduo desta Licena desde que voc tambm inclua a verso original em Ingls desta Licena. No caso de discordncia entre a traduo e a
16
CDTC
Brasil/DF
verso original em Ingls desta Licena, a verso original em Ingls prevalecer.
TRMINO
Voc no pode copiar, modicar, sublicenciar, ou distribuir o Documento exceto como expressamente especicado sob esta Licena. Qualquer outra tentativa de copiar, modicar, sublicenciar, ou distribuir o Documento nula, e resultar automaticamente no trmino de seus direitos sob esta Licena. Entretanto, terceiros que tenham recebido cpias, ou direitos de voc sob esta Licena no tero suas licenas terminadas, tanto quanto esses terceiros permaneam em total acordo com esta Licena.
REVISES FUTURAS DESTA LICENA

A Free Software Foundation pode publicar novas verses revisadas da Licena de Documentao Livre GNU de tempos em tempos. Tais novas verses sero similares em espirito verso presente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupaes. Veja http://www.gnu.org/copyleft/. A cada verso da Licena dado um nmero de verso distinto. Se o Documento especicar que uma verso particular desta Licena "ou qualquer verso posterior"se aplica ao mesmo, voc tem a opo de seguir os termos e condies daquela verso especca, ou de qualquer verso posterior que tenha sido publicada (no como rascunho) pela Free Software Foundation. Se o Documento no especicar um nmero de Verso desta Licena, voc pode escolher qualquer verso j publicada (no como rascunho) pela Free Software Foundation. ADENDO: Como usar esta Licena para seus documentos Para usar esta Licena num documento que voc escreveu, inclua uma cpia desta Licena no documento e ponha as seguintes notas de copyright e licenas logo aps a pgina de ttulo: Copyright (c) ANO SEU NOME. dada permisso para copiar, distribuir e/ou modicar este documento sob os termos da Licena de Documentao Livre GNU, Verso 1.1 ou qualquer verso posterior publicada pela Free Software Foundation; com as Sees Invariantes sendo LISTE SEUS TTULOS, com os Textos da Capa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cpia da licena est inclusa na seo entitulada "Licena de Documentao Livre GNU". Se voc no tiver nenhuma Seo Invariante, escreva "sem Sees Invariantes"ao invs de dizer quais so invariantes. Se voc no tiver Textos de Capa da Frente, escreva "sem Textos de Capa da Frente"ao invs de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para os Textos da Quarta Capa. Se o seu documento contiver exemplos no triviais de cdigo de programas, ns recomendamos a publicao desses exemplos em paralelo sob a sua escolha de licena de software livre,
17
CDTC
Brasil/DF
tal como a GNU General Public License, para permitir o seu uso em software livre.
18
Parte IV
Javascript
19
Captulo 1
Sobre Javascript
Javascript uma linguagem que roda no lado cliente (j que quem suporta sua carga de processamento o navegador) utilizada para criar pequenos programas que realizam aes em pginas web. Como compatvel com quase todos os navegadores modernos, a linguagem do lado cliente mais utilizada. Com Javascript podemos criar pginas mais "inteligentes", inserindo efeitos especiais e recursos como: botes que mudam ao passar o mouse em cima, vericar se o preenchimento de um formulrio est correto, dentre outras interatividades com o usurio.
20
Captulo 2
Plano de ensino
2.1 Objetivo
Capacitar o usurio para o uso autnomo das funcionalidades do Javascript na programao web.
2.2 Pblico Alvo

Programadores que desejam desenvolver websites que possuam pequenos programas que realizam aes em suas pginas web.
2.3 Pr-requisitos
Os usurios devero ter conhecimentos bsicos em HTML.
2.4 Descrio
O curso ser realizado na modalidade Educao a Distncia e utilizar a Plataforma Moodle como ferramenta de aprendizagem. Ele ser dividido em tpicos e cada um deles composto por um conjunto de atividades (lies, fruns, glossrios, questionrios e outros) que devero ser executadas de acordo com as instrues fornecidas. O material didtico est disponvel on-line de acordo com as datas pr-estabelecidas em cada tpico. Todo o material est no formato de lies, e estar disponvel ao longo do curso. As lies podero ser acessadas quantas vezes forem necessrias. Aconselhamos a leitura de "Ambientao do Moodle", para que voc conhea o produto de Ensino a Distncia, evitando diculdades advindas do "desconhecimento"sobre o mesmo. Ao nal de cada semana do curso ser disponibilizada a prova referente ao mdulo estudado anteriormente que tambm conter perguntas sobre os textos indicados. Utilize o material de cada semana e os exemplos disponibilizados para se preparar para prova. Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida deve ser disponibilizada no frum ou enviada por e-mail. Diariamente os monitores daro respostas e esclarecimentos.
21
CDTC
Brasil/DF
2.5 Metodologia
O curso est dividido da seguinte maneira:
2.6 Cronograma
Lio 1 - Introduo e Histria; Lio 2 - Sintaxe e Variveis; Lio 3 - Strings e Mensagens; Lio 4 - Objetos e Arrays; Lio 5 - Operadores e Comandos; Lio 6 - Eventos e Outros Comandos; Lio 7 - Controle de Tipos e Funes Lio 8 - Classes: Math, Number e Boolean; Lio 9 - Date e Checkbox; Lio 10 - Ocultando Scripts; Lio 11 - Exemplos; Avaliao de aprendizagem Avaliao do curso As lies contm o contudo principal. Elas podero ser acessadas quantas vezes forem necessrias, desde que esteja dentro da semana programada. Ao nal de uma lio, voc receber uma nota de acordo com o seu desempenho. Responda com ateno s perguntas de cada lio, pois elas sero consideradas na sua nota nal. Caso sua nota numa determinada lio for menor do que 6.0, sugerimos que voc faa novamente esta lio. Ao nal do curso ser disponibilizada a avaliao referente ao curso. Tanto as notas das lies quanto a da avaliao sero consideradas para a nota nal. Todos os mdulos caro visveis para que possam ser consultados durante a avaliao nal. Aconselhamos a leitura da "Ambientao do Moodle"para que voc conhea a plataforma de Ensino a Distncia, evitando diculdades advindas do "desconhecimento"sobre a mesma. Os instrutores estaro a sua disposio ao longo de todo curso. Qualquer dvida dever ser enviada no frum. Diariamente os monitores daro respostas e esclarecimentos.
2.7 Programa
O curso de Javascript oferecer o seguinte contedo: Introduo e Histria; Sintaxe e Variveis; 22
CDTC
Brasil/DF
Strings e Mensagens; Objetos e Arrays; Operadores e Comandos; Eventos e Outros Comandos; Controle de Tipos e Funes Classes: Math, Number e Boolean; Date e Checkbox; Ocultando Scripts; Exemplos;
2.8 Avaliao
Toda a avaliao ser feita on-line. Aspectos a serem considerados na avaliao: Iniciativa e autonomia no processo de aprendizagem e de produo de conhecimento; Capacidade de pesquisa e abordagem criativa na soluo dos problemas apresentados. Instrumentos de avaliao: Participao ativa nas atividades programadas. Avaliao ao nal do curso. O participante far vrias avaliaes referente ao contedo do curso. Para a aprovao e obteno do certicado o participante dever obter nota nal maior ou igual a 6.0 de acordo com a frmula abaixo: Nota Final = ((ML x 7) + (AF x 3)) / 10 = Mdia aritmtica das lies AF = Avaliaes
2.9 Bibliograa

23
CDTC
Brasil/DF
2.10 Pginas Recomendadas

Para maiores informaes sobre o Audacity e software livre, d uma olhada nestes sites:
http://www.javascript-tutorial.com.br/content-2.html http://www.criarweb.com/artigos/184.php http://www.criarweb.com/manual/javascript/ http://www.criarweb.com/javascript2/ http://www.geocities.com/SiliconValley/Way/3105/ http://www.artifice.web.pt/tutoriais/cntd/tut_js1.html?rf=http%3A/ /www.google.com.br/search%3Fhl%3Dpt-BR%26client%3Dfirefox-a%26rls% 3Dorg.debian%253Aen-US%253Aunofficial%26hs%3Dbnn%26q%3Djavascript+ tutorial%26btnG%3DPesquisar%26meta%3Dlr%253Dlang_pt http://www.linhadecodigo.com.br/desenvolvimento/javascript.asp http://www.linkgratis.com.br/link/JavaScript
24
Captulo 3
Incio do Javascript
No comeo da Internet foram criados vrios servios para realizar muitos tipos de comunicaes, como correio eletrnico, chats, buscas, etc. Mas era demandada uma linguagem que permitisse apresentar informaes junto formatao de estilos que funcionasse como um sistema de pgina com links. curto prazo, o HTML foi a linguagem que atendeu essa necessidade. Porm, logo percebeu-se que ele havia se tornado obsoleto para denir as novas funcionalidades, no era suciente para fazer tudo o que era possvel nas pginas web. Entre as primeiras tecnologias que surgiram a partir da podemos destacar o Java. Surgiu, basicamente, atravs do uso de Applets, que so pequenos programas que se incorporam s pginas web e que realizam as aes relacionadas aos programas de ns gerais. Aps compatibilizar seus navegadores com a mais nova criao, os applets, a Netscape passou a desenvolver uma linguagem que fosse mais simples de utilizar que o Java. Passou a desenvolver ento o o "primeiro Javascript"que levou o nome de LiveScript. Porm, foi um nome que no perdurou por muito tempo j que, antes do lanamento de sua primeira verso, uma parceria com a Sun Microsystems permitiu o desenvolvimento conjunto dessa tecnologia que passou a ser conhecida como "Javascript".
3.1 O que Javascript?

Javascript uma linguagem que roda no lado cliente (j que quem suporta sua carga de processamento o navegador) utilizada para criar pequenos programas que realizam aes em pginas web. Como compatvel com quase todos os navegadores modernos, a linguagem do lado cliente mais utilizada. Com Javascript podemos criar pginas mais "inteligentes", inserindo efeitos especiais e recursos como: botes que mudam ao passar o mouse em cima, vericar se o preenchimento de um formulrio est correto, dentre outras interatividades com o usurio. Como j foi dito, o responsvel por interpretar e conseqentemente executar essas instrues Javascript o browser, que , portanto, o maior (para no dizer o nico) com que esta linguagem conta. Algumas linguagens de programao para web so muito complexas, mas as linguagens de script so geralmente simples por possuirem sintaxes fceis de entender, alm de permitirem a combinao de script com HTML para deixar as pginas Web interativas. Outra facilidade do Javascript que ela uma linguagem interpretada e no compilada. O que acontece que 25
CDTC
Brasil/DF
navegador executa cada linha de script como as recebe. Por este motivo importante saber que a sintaxe Javascript case sensitive(1), sendo necessria ateno na escrita dos comandos. Caso contrrio o Javascript interpretar, por exemplo, o que seria um comando como sendo o nome de uma varivel. Coisas como essas so o que diferem Javascript de outras linguagens de programao em que os cdigos devem ser compilados ou traduzidos em cdigo de mquina antes de serem executados. (1) sensvel ao tipo de letra
3.2 Diferenas Bsicas entre Java e Javascript

Uma das maiores confuses que acontecem quando se fala em Javascript a inevitvel comparao com a linguagem de programao "Java". importante frisar, contudo, que Javascript NO TEM NADA A VER COM JAVA. Estas so duas tcnicas diferentes de programao e portanto no guardam entre si mais relao que a sintaxe e poucas coisas mais. Java uma linguagem de programao. Javascript basicamente uma linguagem de hiper-texto. til pois muitas vezes precisa-se, por exemplo, utilizar algum recurso que torne a pgina mais dinmica e mais bonita, sem ter de se incomodar com a programao. til tambm pois bastante simples e foi projetada fazer as coisas com rapidez. Listo aqui algumas diferenas entre Javascript e Java: 1) A programao Java requer um kit de desenvolvimento e um compilador. Entretanto, Javascript no uma linguagem que necessite que seus programas se compilem. Estes so interpretados pelo browser quando ele l a pgina. 2) Java uma linguagem de programao fortemente tipada, ou seja, ao declarar uma varivel necessria a indicao seu tipo e, ento, no permitida a mudana de seu tipo automaticamente. Por sua vez, Javascript no tem esta caracterstica, e pode-se alocar em uma varivel a informao que se deseja, independentemente de seu tipo. Ademais, pode-se mudar o tipo de informao de uma varivel quando for necessrio. 3) Java muito mais potente que Javascript. Isto acontece pois Java uma linguagem de propsito geral, com a qual pode-se fazer aplicaes para variadas funes. Javascript, entretanto, permite somente a escrita de programas qe sejam posteriormente executados em pginas web. 4) Miniaplicativos Java so compilados em arquivos de classe para serem utilizados em uma pgina da web. JavaScript, porm, utiliza comandos simples de texto, que podem ser includos no prprio documento de HTML. 5) Miniaplicativos Java geralmente so exibidos em uma caixa dentro do documento de Web. J scripts de JavaScript podem afetar qualquer parte do prprio documento da Web. Apesar de diferentes e teis para diferentes coisas, as duas linguagens podem at serem utilizadas em conjunto para combinar suas vantagens. OBS.: Como j citado anteriormente, Javascript escrito e includo em um documento HTML. Por essa razo, este curso presume conhecimentos ao menos bsicos na linguagem de formatao HTML. 26
Captulo 4
Sintaxe e Variveis
4.1 Necessrio para programar em Javascript
Para programar em Javascript necessitamos basicamente o mesmo que para programar pginas web com HTML. Um editor de textos e um navegador compatvel com Javascript. Porm, apesar de um editor de texto simples ser suciente para comear, talvez seja muito til contar com outros programas que nos oferecem melhores prestaes na hora de escrever as linhas de cdigo. Estes editores avanados tm algumas vantagens, como colorir os cdigos de nossos scripts, nos permitem trabalhar com vrios documentos simultaneamente, tm ajudas, etc. Fica a critrio de cada um a utilizao de seu editor. Iniciando Em primeiro lugar devemos ter em mente que o cdigo Javascript deve ser inserido dentro do cdigo HTML. Isto, na prtica, faz que se misturem na pgina as duas linguagens de programao. Para isso, necessrio o uso de delimitadores do cdigo de script, que no caso :
<script> cdigo javascript </script>

Em uma mesma pgina podemos introduzir vrios scripts, cada um que poderia se introduzir dentro das etiquetas <script> distintas. Podemos tambm escrever Javascript dentro de determinados atributos da pgina, como o atributo onclick. Estes atributos esto relacionados com as aes do usurio e so chamados de manejadores de eventos. Vamos ver mais detalhadamente essas duas maneiras de escrever scripts: -Execuo direta de scritps Neste caso se incluem as instrues dentro da etiqueta <script>, tal como comentamos anteriormente. Nele, o browser vai interpretando as linhas de cdigo e vai executando uma aps a outra. -Resposta a um evento Eventos so aes que o usurio realiza. O Javascript preparado para apahar eventos do usurio e gerar aes de resposta. Desta maneira so realizados programas interativos, j que controlamos os movimentos do usurio e respondemos a ele. Veremos mais adiante no curso este tipo de execuo em profundidade e os tipos de eventos que existem.
27
CDTC
Brasil/DF
4.2 Sintaxe Javascript

Javascript tem uma sintaxe muito parecida a de Java por estar baseado nele. Tambm muito parecida da linguagem C, de modo que se voc conhece alguma destas duas linguagens poder manejar com facilidade com o cdigo. Case Sensitive Como j foi dito, Javascript uma linguagem case sensitive, ou seja, deve-se respeitar as maisculas e as minsculas. Se nos equivocamos ao utiliz-las o navegador responder com uma mensagem de erro de sintaxe. Por conveno os nomes se escrevem em minsculas, salvo que se utilize um nome com mais de uma palavra, pois nesse caso se escrevero com maisculas as iniciais das palavras seguintes primeira. OBS.: Podemos utilizar maisculas nas iniciais das primeiras palavras em alguns casos como os nomes das classes, apesar de que j veremos mais adiante quais so estes casos. Separao de Instrues As duas maneiras que existem de separar instrues em Javascript so a separao por ponto-e-vrgula, no caso em que as duas instrues se encontram na mesma linha, e a separao por quebra-de-linha, onde no precisamos usar o ponto-e-vrgula se separarmos as instrues em mais de uma linha. Contudo interessante que nos acostumemos a utilizar sempre o ponto-e-vrgula para separar as sentenas j que a maioria das linguagens hoje em dia tm essa regra como obrigatria. Dessa maneira estaremos habituados a realizar uma sintaxe parecida da maioria da das programaes avanadas.
4.3 Variveis
Uma varivel um espao em memria onde se armazena um dado, um espao onde podemos salvar qualquer tipo de informao que necessitemos para realizar as aes de nossos programas. Em JavaScript, variveis dinmicas podem ser criadas e inicializadas sem declaraes formais. Existem dois tipos de abrangncia para as variveis: Global - Declaradas/criadas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa. Exemplo:
<script> varivelGlobal </script>

Local - Declaradas/criadas dentro de uma funo. S podem ser utilizadas dentro da funo onde foram criadas e precisam ser denidas com a instruo Var. Exemplo: 28
CDTC
Brasil/DF
<script> function minhaFuncao(){ var variavelLocal } </script>

OBS: Podem existir variveis globais com o mesmo nome de variveis locais, porm, esta prtica no aconselhvel. Com relao nomenclatura, as variveis devem comear por uma letra ou pelo caracter sublinhado _, o restante da denio do nome pode conter qualquer letra ou nmero. Deve-se ter em mente tambm que na atribuio de valores a variveis deve ser usado um sinal de igual nico. Exemplos de declaraes:
Nome1="Jos" Valor=2 _1contador=0

OBS.: devemos evitar tambm utilizar nomes reservados como variveis. Por exemplo: no poderemos nomear nossa varivel com nomes como return ou for, j que so utilizadas para estruturas da prpria linguagem. Existem 3 tipos de variveis. So elas: 1) Numricas: logicamente armazenam nmeros. Ao contrrio do que ocorre na maioria das linguagens mais conhecidas, em Javascript s existe um tipo de dado numrico. Todos os nmeros so, portanto, do tipo numrico, independentemente da preciso que tenham ou se so nmeros reais ou inteiros. Com Javascript tambm podemos escrever nmeros em outras bases. As bases so sistemas de numerao que utilizam mais ou menos dgitos para escrever os nmeros. Existem trs bases com as que podemos trabalhar: Base 10, o sistema que utilizamos habitualmente, o sistema decimal. Entende-se que qualquer nmero, por padro, est escrito em sistema decimal. Base 8, tambm chamado sistema octal, que utiliza dgitos do 0 ao 7. Para escrever um nmero em octal, simplesmente escreve-se este nmero precedido de um 0, por exemplo 036. Base 16 ou sistema hexadecimal, o sistema de numerao que utiliza 16 dgitos, os compreendidos entre o 0 e o 9 e as letras da A F, para os dgitos que faltam. Para escrever um nmero em hexadecimal devemos escrev-lo precedido de um zero e um xis, por exemplo, 0x4EA. 2) Booleanas: armazenam valores lgicos (TRUE ou FALSE) 3) Strings: armazenam seqencia de caracteres.
29
CDTC
Brasil/DF
As strings podem ser delimitadas por aspas simples ou duplas, a nica restrio que se a delimitao comear com as aspas simples, deve terminar com aspas simples, da mesma forma para as aspas duplas. Caso seja necessrio a utilizao destes caracteres como parte da string, utilize precedendo "ou . Como por exemplo : alert ("Cuidado com o uso de u m uma string").
30
Captulo 5
Strings e Mensagens
5.1 As Strings
Podemos incluir dentro de uma string alguns caracteres especiais, a saber: CONTROLES ESPECIAIS \b \f \n \r \t // /*....*/ Exemplo de uso: SIGNIFICADO retroceder espao avance pgina passa prxima linha Enter posiciona o texto na prxima tabulao Linha de comentrio Delimitadores para inserir um texto com mais de uma linha como comentrio.
document.write("isto uma\n frase");

que retorna:
isto uma frase

Concatenao: para concatenar duas strings em javascript simplesmente usamos o operador (+). Exemplo:
Frase1= "Isso um teste!"; Frase2= " um teste mesmo"; Valor= Frase1+Frase2; document.write(Valor);
31
CDTC
Brasil/DF
o que retorna:
Isso um teste! um teste mesmo

Mtodos de String Todos os exemplos abaixo baseiam-se na varivel texto = "Aldeia Numaboa". Mtodo charAt(x) indexOf(substring) lastIndexOf(substring) substring(incio,m) toLowerCase() toUpperCase() charCodeAt(nro) length Funo Retorna o caracter da posio x: texto.charAt(2) retorna d (lembre-se de que a numerao dos caracteres comea com zero). Retorna a posio da primeira substring dentro da string: texto.indexOf("boa") retorna 11. Retorna a posio da ltima substring dentro da string: texto.lastIndexOf("a") retorna 13. Retorna a substring entre a posio incio e m: texto.substring(2,6) retorna deia. Retorna a string em minsculas: texto.toLowerCase() retorna aldeia numaboa. Retorna a string em maisculas: texto.toUpperCase() retorna ALDEIA NUMABOA. Retorna o cdigo ASCII do caractere na posio nro: texto.charCodeAt(0) retorna 65, o valor ASCII do caracter A. Retorna o nmero de caractere da string: texto.length retorna 14.
.outros mtodos de string equivalentes: Mtodo anchor big blink bold xed fontcolor fontsize italics link small strike sub sup Funo Cria uma ncora na pgina HTML, que se refere a stringObject. Equivale tag <a name="nome da ancorastringObject</a>. Mostra stringObject com tamanho grande. Equivale tag <big></big>. Mostra stringObject piscando na tela. Equivale tag <blink></blink>. Mostra stringObject em negrito. Equivale tag <b></b>. Mostra stringObject com fonte de tamanho xo. Equivale a tag <tt></tt>. Determina a cor que stringObject ser mostrada. Equivale tag <font color=#RGB></font>. Mostra stringObject no tamanho denido por "x". Equivale tag <font size="tamanho</font>. Mostra stringObject no formato itlico. Equivale tag <i></i>. Cria um link, onde stringObject o texto que aparece em destaque. Mostra stringObject em fonte pequena. Equivale tag <small></small>. Mostra stringObject com um trao no meio. Equivale tag <strike></strike>. Mostra stringObject no formato subscript. Equivale tag <sub></sub>. Mostra stringObject no formato sobrescrito. Equivale tag <sup> </sup>.
Alguns exemplos de uso dos mtodos:
32
CDTC
Brasil/DF
<script> frase="Ol. Isto uma Frase" document.write(frase.substring(11,14)); //retorna 'uma' document.write(frase.toLowerCase()); //retorna 'ol. isto uma frase' document.write(frase.toUpperCase()); // retorna 'OL. ISTO UMA FRASE' document.write(frase.length); //retorna 21 document.write(frase.charAt(5)); //retorna 'I' </script>
O JavaScript reconhece ainda um outro tipo de contedo em variveis, que o NULL. N prtica isso utilizado para a manipulao de variveis no inicializadas sem que ocorra um erro no seu programa. Quando uma varivel possui o valor NULL, signica dizer que ela possui um valor desconhecido ou nulo, o null no igual a nada, nem mesmo ao prprio null. A representao literal para NULL a string null sem os delimitadores. Quando referenciado por uma funo ou comando de tela, ser assim que NULL ser representado. OBS.: percebe-se ento que NULL uma palavra reservada. Converso entre os tipos de dados. Em algumas situaes, podemos terminar com uma string contendo um nmero e precisar convert-la em uma varivel numrica regular. O JavaScript possui funes especcas para isso: parseInt(): converte uma string em um numero inteiro. parseFloat() : converte uma string em um numero de ponto utuante. Exemplo:
varstring= "30 bebidas" numvar= parseInt(varstring);

No caso do exemplo anterior o valor armazenado em varnum ser 30, pois a parte nonumrica desconsiderada na passagem para numrico. Se um nmero vlido no for localizado, a expresso retorna a string NaN (Not A Number).
5.2 Mensagens
Existem trs maneiras de comunicao com o usurio no Javascript. Eis aqui cada uma e sua explicao: alert: usado para imprimir informao ao usurio por meio de uma caixa de alerta no browser. Exemplo:
<script> alert("Certifique-se de que as informaes esto corretas")
33
CDTC
Brasil/DF
conrm: mensagem que retorna caixa de dilogo com conrmao de OK ou Cancelar. Retorna um booleano. No caso, verdadeiro se o usurio clicar em OK. Exemplo:
<Script> if (confirm("Deseja Continuar?")) { alert("Continuando") } else { alert("Parando") } </Script >

prompt: recebe informao do usurio via caixa de texto Input. Ser explicada melhor a seguir.
5.3 Mensagens que rolam na barra de status

Com o conhecimento adquirido em strings, podemos agora mostrar como fazer mensagens rolarem na barra de status do browser. Inicialize, no script, a varivel string a ser rolada na tela:
frase="Ol, sejam bem vindos!"

A seguir, dena uma segunda string chamada esp. Essa string ser exibida entre as cpias da mensagem para tornar claro onde uma termina e a outra comea. Por exemplo :
esp="... ...";
Sero necessrias outras variveis alm das anteriores: .uma varivel numrica para armazenar a posio atual da string. Chame-a de ps e inicializea com 0:
pos=0;
A rolagem do texto ser feita por uma funo que chamaremos de rolamensagem:
1: 2: 3: 4: 5: 6: 7:
function rolamensagem(){ window.status=frase.subtring(pos,frase.legth)+esp+frase.substring(0,pos); pos++; if(pos>frase.length) pos =0; windows.setTimeout("rolamensagem()", 500); }
34
CDTC
Brasil/DF
Na linha 2, temos uma instruo que exibe uma string na linha de status (pelo uso de window.status). A string composta da parte de frase de pos at o m, seguida pelo espao. seguido, ento, pela parte de frase desde o incio de pos. Incrementamos ento a varivel pos. Aps isto temos uma instruo que verica se pos maior que o comprimento de frase. Se for, redene-o para 0. Temos por ltimo uma instruo que utiliza o mtodo window.setTimeout, que permite congurar uma instruo a ser executada depois de um perodo de tempo. Nesse caso, execute a funo rolamensagem depois do 0,5 segundo. Vemos abaixo como caria isto no cdigo completo:
<html> <head> <title> Mensagem rolando na tela</title> <script> frase="Ol, sejam bem vindos!"; esp="... ..."; pos=0; function rolamensagem(){ window.status=frase.subtring(pos,frase.legth)+esp+frase.substring(0,pos); pos++; if(pos>frase.length) pos =0; windows.setTimeout("rolamensagem()", 500); } rolamensagem(); </script> </head> <body> <h1> Mensagem rolando na tela</h1> Preste ateno linha de status rolando na pgina! </body> </html>
5.4 Armazenando dados do usurio em variveis

E certas ocasies necessrio o armazenamento dos dados inseridos pelo usurio para uso na prpria pgina. Para isso, utilizaremos a funo prompt. Ela semelhante funo alert mas usada para dados de entrada do usurio. Por exemplo:
titulo=prompt("digite o ttulo da pagina"); nome=prompt("digite seu nome:");

a partir disso podemos utilizar o contedo das variveis para personalizar o documento HTML.
document.write("<H1>"+ titulo+"</H1>"); document.write("<H2> Criada por"+nome+"</H2>");
35
CDTC
Brasil/DF
Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. O exemplo abaixo mostra o documento nal de HTML. Aps isso, s carregar o documento em um browser e ver o resultado.
<html> <head> <title> construcao de pagina </title> </head> <body> <script> nome=prompt("digite seu nome:"); titulo=prompt("digite o ttulo da pagina"); document.write("<h1>"+ titulo+"</h1>"); document.write("<H2> Criada por"+nome+"</H2>"); </script> <p> Pgina em construo.</p> </body> </html>
36
Captulo 6
Objetos e Arrays
6.1 Objetos
6.1.1 Manipulando Arrays
Na maioria das linguagens, existem estruturas que permitem salvar informaes de uma maneira mais complexa que simples variveis. Uma estrutura tpica so os vetores (arrays). Um array nada mais uma estrutura que permite o armazenamento de vrios valores ao invs de somente um como acontece com as variveis comuns. O acesso a cada um desses valores feito de maneira independente, atravs de um ndice. Em Javascript, trabalhar com arrays nada mais que trabalhar com o uso de objetos. Para trabalharmos com arrays primeiramente devemos cri-lo, utilizando um objeto Javascript. Existem vrias maneiras diferentes que podemos utilizar para criar arrays. No caso seguinte, o primeiro comando cria um array sem nenhum contedo. J o segundo comando cria um array com um tamanho pr-denido de 6 campos:
var vetor = new Array(); var vetor2 = new Array(6);

OBS: na declarao de um array necessrio que a palavra Array tenha a inicial maiscula. Pode-se introduzir qualquer dado, tanto se indicamos ou no o nmero de campos do array. A criao de campos dinmica e se produz ao mesmo tempo, que os scripts se executam. A seguir mostramos como intoduzir dados num vetor.
vetor[0]=150 vetor[1]=80 vetor[2]=10

Para ver na tela os dados armazenados em casa posio do array podemos usar um loop for desta maneira:
for (i=0;i<3;i++){ document.write("Posio " + i + " do vetor: " + vetor[i]) document.write("<br>") }

37
CDTC
Brasil/DF
Dividindo uma string O Javascript inclui um mtodo de string chamado split, que divide uma string em suas partes componentes. Para utilizar esse mtodo, especique a string a dividir e um caractere para dividir as partes :
Frase="isto um vetor" Vetor=Frase.split(" ");

Neste caso, a string Frase mantm o isto um vetor. O mtodo split na Segunda instruo divide a string nome em cada espao, resultado em quatro strings. Estas so armazenadas em um array de strings chamado Vetor. Depois que as instrues de exemplo executam, os elementos de partes contm o seguinte :
vetor[0]="isto"; vetor[1]=""; vetor[2]="um"; vetor[3]="vetor";

O Javascript tambm inclui um mtodo de array, join, que desempenha a funo oposta. Esta instruo remonta o array Vetor em uma string:
JuntaVetor=Vetor.join(" ");
O valor nos parenteses especica um caractere para separar as partes do array. Nesse caso, um espao utilizado, resultando na string nal isto um vetor. Se voc no especicar um caractere de separao, as vrgulas so utilizadas por padro.
6.2 Mais sobre vetores

No caso do Javascript podemos colocar num vetor tipos de dados diferentes para cada posio:
vetor[0]="ola"; vetor[1]=15; vetor[2]=false; vetor[3]=0.547;

Para outros propsitos, podemos trabalhar com vetores de uma maneira diferente. Podemos primeiramente criar uma funo com vrios parmetros desta maneira:
Function Registro(nome,endereco,telefone){ this.nome=nome; this.endereco=endereco; this.telefone=telefone; }

OBS: o This especica o objeto atual como sendo fonte dos valores passados funo. Alm disso, para acessar a uma propriedade de um objeto h que utilizar o operador ponto. A partir da somente criamos o objeto: 38
CDTC
Brasil/DF
Ana = new Registro('Ana Luiza','Rua tal','3333-3333');

e o referenciamos assim:
Ana.nome - retorna 'Ana Luiza' Ana.endereco - retorna 'Rua tal' Ana.telefone - retorna '3333-3333'
ou assim:
Ana[0], Ana[1], Ana[2];

Outra maneira, portanto, de trabalhar com os vetores cri-los e referenciar suas posies usando o atributo length, que retorna o nmero de campos do array:
Function Vetor(x){ this.length=x for (var i=0 ; i<x ; i++){ this[i]=""; } }

H que observar que o loop for se executa sempre que i tiver um valor menor que a longitude do array, extrada de sua propriedade length. Chamaramos a funo assim:
MesDoAno=Vetor(12);
E incluiramos os dados assim:
MesDoAno[0]='Janeiro' MesDoAno[1]='Fevereiro' MesDoAno[2]='Maro' ...

Ordenando um array O Javascript tambm inclui o mtodo sort para arrays, que retorna uma verso classicada do array (alfabeticamente ou numericamente). Por exemplo, as seguintes instrues inicializam um array de quatro nomes e o classica :
alunos[0]="Fernanda Gomes da Silveira"; alunos[1]="Leticia Vieira Santos"; alunos[2]="Felipe Silva"; alunos[3]="Marcos Cardoso"; ordenados=alunos.sort();
A ltima instruo atribui o array ordenados verso classicada de alunos utilizando o mtodo join.
39
CDTC
Brasil/DF
6.3 Arrays multidimensionais

Os arrays multidimensionais so estruturas de dados que armazenam os valores em mais de uma dimenso. At aqui vimos arrays simples nos quais seus valores so armazenados em uma dimenso, o que requeria a utilizao de apenas um ndice para acessar suas posies. Em Javascript no existe um objeto array-multidimensinal particularmente denido. Para utiliz-los poderemos, porm, denir arrays onde, em cada uma de suas posies haver outro array. No exemplo seguinte criamos um array multidimensional simplesmente juntando os dois mtodos anteriores: Exemplo:
Alunos = new Vetor(4); Alunos[0]=new Registro("Jos","Rua tal1","3333-3333"); Alunos[1]=new Registro("Ana","Rua tal2","2222-2222"); Alunos[2]=new Registro("Joo","Rua tal3"); Alunos[3]=new Registro("Carlos","Rua tal4","1111-1111");
,o que geraria:
Alunos[0].nome="Jos"; Alunos[0].endereco="Rua tal1"; Alunos[0].telefone="3333-3333"; Alunos[1].nome="Ana"; Alunos[1].endereco="Rua tal2"; Alunos[1].telefone="2222-2222"; Alunos[2].nome="Joo"; Alunos[2].endereco="Rua tal3"; Alunos[2].telefone=null;
...etc. .Outro exemplo de criao de arrays de mais de uma dimenso :
var PopulacaoCidade0 = new Array(3); PopulacaoCidade0[0] = 1200; PopulacaoCidade0[1] = 1000; PopulacaoCidade0[2] = 1100; var PopulacaoCidade1 = new Array(3); PopulacaoCidade1[0] = 5000; PopulacaoCidade1[1] = 3000; PopulacaoCidade1[2] = 2000;
em seguida:
40
CDTC
Brasil/DF
var temperaturas_cidades = new Array(3); PopulacaoPais[0] = PopulacaoCidade0; PopulacaoPais[1] = PopulacaoCidade1; PopulacaoPais[2] = PopulacaoCidade2;
Tambm interessante ver como se faz o percurso por um array multidimensional:
for (i=0;i<PopulacaoPais.length;i++){ document.write("Pas " + i); for (j=0;j<PopulacaoPais[i].length;j++){ document.write(PopulacaoPais[i][j]); } }

Neste caso, com o primeiro loop, percorremos a primeira dimenso do array e utilizamos a varivel i para levar a conta a posio atual. Para cada iterao, imprimimos o pas da vez e o programa entra em outro loop. Neste, imprimimos, para cada pas, o nmero relativo a cada novo ndice j.
41
Captulo 7
Operadores
7.1 Lgicos
Os principais operadores lgicos a serem utilizados em comandos condicionais so: Operadores Lgicos == != > >= < <= && || Matemticos Signicado Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E OU
Os operadores Matemticos a serem utilizados em clculos, referncias de indexadores e manuseio de strings so : Operadores de Atribuio = += -= *= /= %= Signicado Atribuio adio de valores e concatenao de strings. x+=5 // o mesmo que: x=x+5 subtrao de valores. x-=5 // o mesmo que: x=x-5 multiplicao de valores. x*=5 // o mesmo que: x=x*5 diviso de valores. x/=5 // o mesmo que: x=x/5 obtm o resto de uma diviso. x%=5 // o mesmo que: x=x%5
42
CDTC
Brasil/DF
Operadores a nvel de bit Estes so muito pouco usados e possvel que voc nunca chegue a utiliz-los. Seu uso se limita a efetuar operaes com zeros e uns. Tudo com o que trabalha um computador so zeros e uns, apesar de utilizarmos nmeros e letras para nossas variveis. Na verdade o que acontece que estes valores esto escritos internamente em forma de zeros e uns. Em alguns casos, pode ser necessrio realizar operaes tratando as variveis como zeros e uns e, para isso, utilizaremos estes operandos. Aqui voc poder ver estes operadores por acaso algum dia lhe zerrem falta. Operador & | Operao desloca os bits para a direita desloca os bits para a esquerda dene uma condio AND numa mscara de bits dene uma condio OR numa mscara de bits dene uma condio XOR numa mscara de bits operao NOT bit a bit (troca todos os 1 e 0)
7.2 Operadores Especiais

Operador typeof Operao Retorna o tipo de varivel. Os valores de retorno so boolean, string, number, function, object e undened. Por exemplo a = 5; alert( typeof a ) retorna number. O operador void utilizado para realizar uma operao mas no se deseja um valor de retorno. Por exemplo, void( nro = nro + 2 ) realiza a operao, mas nro resulta em undened. Operador para deletar objetos ou propriedades de objetos. O operador no se aplica aos objetos (e suas propriedades) pre-denidos.
void
delete
7.3 Precedncia de Operadores

A avaliao da precedndia dos operadores uma tarefa simples mas que pode se tornar complicada medida que o nmero deles grande. Por isso necessrio que mostremos a regra de precedncia dos operadores em Javascript. A principio os operadores so avaliados da esquerda para a direita. Mas existem regras adicionais pelas quais determinados operadores se avaliam antes que os outros. A grande maioria so comuns a outra linguagens de programao.
() [] . ! - ++ -* / % +<< >> >>> < <= > >= == != & ^ | && ||
Parnteses, colchetes e o operador ponto que serve para os objetos negao, negativo e incrementos Multiplicao, diviso e mdulo Soma e diferena Mudanas a nvel de bit Operadores condicionais Operadores condicionais de igualdade e desigualdade Lgicos a nvel de bit Lgicos boleanos
43
CDTC
Brasil/DF
= += -= *= /= %= <<= >>= >>>= &= ^= != Atribuio

Exemplo de avaliao dos operadores numa sentena:
4 * 2 + 1 - 18 / 3 % 5
Portanto, esta avaliao se daria da seguinte maneira:
(4*2) + 1 - [(18/3) % 5]
,que resultaria em: 8 + 1 - 1 = 8.
7.4 Comandos
Existem algumas estruturas de controle que lhe permitem modicar o uxo de execuo de um programa. Isto , contm comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma determinada condio, ou enquanto determinada condio for verdadeira. So elas: Comandos IF... ELSE Um bloco if formado primeiramente com o prprio if e seguido por um teste booleano e uma instruo ou um bloco de instrues que precisam ser executadas caso o teste booleano seja verdadeiro. O else pode ser usado caso o programador queira que o programa execute o bloco de instrues que o segue caso o teste booleano do if no seja verdadeiro. Ex:
if (condio) { ao para condio satisfeita } else { ao para condio no satisfeita }

Exemplo :
if (Idade < 18) {Categoria = "Menor" } else {Categoria = "Maior"}

Move condicional Existe um operador que ainda no vimos e uma forma mais esquemtica de realizar alguns IF simples. um claro exemplo de economia de linhas e caracteres ao escrever os scripts. Ele no s realiza uma comparao de valores, como tambm atribui um valor a uma varivel. O que faz avaliar a condio (colocada entre parnteses) e se positiva atribui o valor1 varivel e no caso contrrio lhe atribui o valor 2. Sua forma bsica , portanto: 44
CDTC
Brasil/DF
varivel = ( (condio) ? valor1 : valor2)

Exemplos:
NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino") momento = (hora_atual < 12) ? "Antes de meio-dia" : "Depois de meio-dia"
Switch uma expresso que se utiliza quando temos mltiplas possibilidades como resultado da avaliao de uma sentena. Sua sintaxe a seguinte:
switch (expresso) { case valor1: Sentenas a executar break case valor2: Sentenas a executar break case valor3: Sentenas a executar break default: Sentenas a executar }
se a expresso tem como valor a valor1 se a expresso tem como valor a valor2 se a expresso tem como valor a valor3 se o valor no nenhum dos anteriores
OBS.: A palavra break opcional, mas se no a colocamos a partir de que se encontre coincidncia com um valor se executaro todas as sentenas relacionadas com este e todas as seguintes. Isto , se no houvesse expresso que fosse igual a valor1, se executariam sentenas relacionadas com valor1 e tambm as relacionadas com valor2, valor3 e default. OBS2.: sempre bom incluir um default, j que se todas as condies anteriores forem falsas, o switch entrar no default. Isso mostra a sua importncia. Exemplo:
farol = "verde" switch (farol) { case "vermelho": alert("Pare") break case "amarelo": alert("Atencao") break case "verde": alert("Prossiga") break
45
CDTC
Brasil/DF
default: alert("Cor no existente") }
7.5 Comando FOR

um comando que repete uma instruo determinado nmero de vezes at que alguma condio seja satisfeita. Sua forma bsica :
for ( [inicializao];[condio];[incremento]) { ao }
Exemplo.
for (x = 0 ; x <= 10 ; x++){ alert ("X igual a " + x) }
7.6 Comando WHILE

um comando que repete uma instruo at que alguma condio seja verdadeira. Primeiro testa a condio e depois entra no loop. Sua forma bsica :
while (condio){ ao }
Exemplo.
Var Contador=1; While ( Contador < 11 ) { document.write(Contador++) ;}
7.7 Comando DO...WHILE

um comando utilizado geralmente quando no sabemos quantas vezes haver de se executar o loop, assim como o loop WHILE, com a diferena de que sabemos ao certo que o loop pelo menos se executar uma vez. Sua forma :
do { sentenas do loop } while (condio)

Exemplo:
46
CDTC
Brasil/DF
var x = 5; do { alert("o valor de x : " + x); x++; } while (x < 9);
47
Captulo 8
Eventos e Outros Comandos

8.1 Eventos
Eventos so aes que ocorrem durante a execuo a partir das quais podemos denir instrues a serem realizadas pelo sistema. So eventos possveis em Javascript: EVENTOS OCORRNCIAS Operador onload onunload onchange onblur onfocus onclick onmouseover onselect onsubmit Operao Ocorre quando o documento carregado. Ou seja, s ocorre no BODY(corpo) do documento. Ocorre quando o documento descarregado. Tambm s ocorre no BODY(corpo). Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea. Ocorre quando o objeto perde o focus, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea. Ocorre quando o objeto recebe o focus. vlido para os objetos Text, Select e Textarea. Ocorre quando o objeto recebe um Click do Mouse. vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. Ocorre quando o ponteiro do mouse passa por sobre o objeto. vlido apenas para Link. Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea. Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas para o Form.
Como j foi dito, nem todos os scripts necessitam estar delimitados pelas tags <script>. Podese tambm usar os scripts como handlers (manipuladores) de eventos. Manipular um evento , basicamente, dizer ao navegador o que ele deve fazer em resposta um evento, que em sua maior parte so causados por aes dos usurios
48
CDTC
Brasil/DF
Os handlers de evento esto associados como objetos particulares do browser. Assim, especicamos o handler de evento na tag que dene o objeto. Por exemplo: O evento onMouseOver acontece quando o ponteiro do mouse move-se sobre o objeto, no caso, texto ou imagem. Temos abaixo, portanto, uma tag tpica de imagem de HTML com um handler de evento. Note que preciso especicar o handler de evento como um atributo da tag HTML e incluir a instruo Javascript para tratar o evento dentro das aspas:
<im src=fig.jpgonMouseOver=highlight()>
8.2 Outros Comandos

Var No Javascript nem sempre preciso fazer a declarao de uma varivel antes de us-la, o que acontece com variveis globais. Porm nas denies de variveis locais o uso da palavra Var antes da varivel obrigatrio. De qualquer maneira importante ressaltar que a utilizao do var, a nvel de documentao muito bem-vinda em qualquer caso. OBS.: No obrigatria , no entanto, a utilizao de uma instruo var para cada varivel declarada.Pode-se declarar vrias variveis em uma s instruo var. A forma geral :
Var NomeDaVarivel [ = <valor> ];

Exemplo de uso:
Var contador=1; Var nome; Var end="",valor=0,linha="bla";

OBS.: no caso anterior a varivel nome tem o valor NULL; With A instruo with elimina a necessidade de repetir todas as vezes a digitao do nome do objeto quando h necessidade de manipular vrias propriedades de um mesmo objeto. A forma geral :
with (<objeto>) {... Instrues}

Exemplo de uso:
49
CDTC
Brasil/DF
with (Math){ a=PI; b=Abs(x); c=E; }

Break O comando Break tem por objetivo o cancelamento da execuo do loop sem que haja vericao na condio de sada do loop, passando a execuo a linha imediatamente posterior ao trmino do loop. executado somente dentro de loops For... ou While e em Switch no caso do Javascript. Exemplo: Neste exemplo, quando a varivel x atinge o valor 5 o loop cancelado, e impresso o nmero 5 na tela.
For (var x=1 ; x < 8 ; x++){ if (x = = 7){ Break } } document.write(x);

OBS.:no exemplo anterior o resultado impresso o valor 7. Continue O comando Continue tem por objetivo o cancelamento da execuo do bloco de comandos passando para o incio do loop. Tambm s pode ser executado em loops For... ou While no caso do Javascript. Exemplo: Neste exemplo, sero impressos os nmeros de 1 a 10, com exceo do nmero 5, ou seja, quando a varivel x atinge o valor 5 a execuo do bloco de comandos interrompida e o controle retorna ao incio do loop, onde a varivel x ser incrementada.
For (var x=1 ; x < 10 ; x++){ If (x = = 5){ continue; } document.write(x); }

Controle de tipos
50
CDTC
Brasil/DF
Vemos que em certos casos - como por exemplo o do + concatenador de strings em contraste ao + somador numrico - o tipo dos dados que estamos utilizando importa bastante e temos de estar cientes deste detalhe se quisermos que nossas operaes se realizem tal como se espera. Para comprovar se um tipo de dado pode utilizar outro operador que est disponvel usa-se o operador typeof, que devolve uma cadeia de texto que descreve o tipo do operador que se est comprovando. Exemplo de uso deste operador:
var ok = true; document.write("<br>O tipo de 'ok' : " + typeof ok); var num = 22; document.write("<br>O tipo de 'num' : " + typeof num); var num_flutuante = 13.56; document.write("<br>O tipo de num_flutuante : " + typeof num_flutuante); var texto = "texto de teste"; document.write("<br>O tipo de texto : " + typeof texto); var data = new Date(); document.write("<br>O tipo de data : " + typeof data);
Este script imprime o seguinte:
O tipo de 'ok' : boolean O tipo de 'num' : number O tipo de num_flutuante : number O tipo de texto : string O tipo de data : object
8.3 Funes
Como j sabemos o browser interpreta as instrues Javascript a partir da tag <script> e segue uma por uma at alcancar a tag de fechamento </script> ou, logicamente, at encontrar um erro. Apesar de parecer e realmente ser simples, esse formato acaba tornando confusa a leitura de scripts muito grandes. As funes so teis, ento, para torna-los mais fceis e organizveis. Uma funo , basicamente, um bloco de instruo criado para executar uma determinada tarefa especca. Dentro de uma funo pode existir uma chamada a outra funo. Podemos passar informaes s funes que sero usadas e/ou atualizadas dentro delas.
51
CDTC
Brasil/DF
Podem retornar algum valor ou informao com o uso do comando Return. -forma bsica de funo com valor de retorno:
Function NomeDaFuno(parametro1, parametro2,..., parametroN){ ...comandos... Return(Valor_De_Retorno); }

Parmetros Os parmetros se usam para mandar valores funo, com os quais ela trabalhar para realizar as aes. So os valores de entrada que recebem uma funo. Os parmetros podem escrever qualquer tipo de dados, numrico, textual, boleano ou um objeto. OBS.: em Javascript os parmetros se passam somente por valor, ou seja, mesmo que modiquemos um parmetro em uma funo a varivel original que havamos passado como parmetro no ter seu valor inicial alterado ao nal, mesmo que tenha sido alterada para uso dentro da funo. Exemplo:
<html> <head> <script language="Javascript"> function varValor(param){ param = 10 document.write("mudana do valor da varivel para 10") } </script> </head> <body> <script> var x = 5; varValor(x); document.write ("o valor da variavel : " + x) ; </script> </body> </html>
.Neste caso o valor de x continuaria 5 ao nal da execuo. A chamada de funes feita assim:
NomeDaFuno(parametro1, parametro2,...,parametro N)
As funes so declaradas dentro das tags <head></head> da pgina HTML o que parece razovel, j que so usualmente chamadas por eventos acionados pelo usurio. 52
CDTC
Brasil/DF
Para utilizar uma funo necessrio cham-la (em qualquer parte da pgina). Para chamar uma funo, utiliza o nome da funo como uma instruo em um script. Para isso, inclumos os parnteses e os valores para os parmetros da funo. Exemplo:
<html> <head> <script language="Javascript"> Function ola(){ alert("Al mundo!!!"); } </script> </head> <body> ... <script>ola();</script> ... </body> </html>
OBS.: O Javascript no permite o uso da recursividade. Uma funo, portanto, no pode chamar ela mesma. Outro exemplo do uso de funes: Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idade, recebendo como parmetro a sua idade.
function Idade (Anos) { if (Anos > 17) { alert("Maior de Idade") } else { alert("Menor de Idade") } }
Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada a idade e, a cada informao, a funo seja acionada.
<form> <input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"> </form>

Observe-se que o parmetro passado para a funo quando ocorre o evento "onchange"foi o contedo da caixa de texto "Tempo"da propriedade "value"e que, na funo, chamamos de "Anos". Ou seja, no existe co-relao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo passado.
53
CDTC
Brasil/DF
A linguagem Javascript possui ainda certas funes especcas internas da linguagem que no esto ligadas a nenhum objeto(mas que no impede que recebam parmetros). interessante cit-las para posterior consulta dos alunos, se necessrio: escape - Obtm o cdigo ASCII de um caracter que no seja alfanumrico. Ex: document.write(escape("@")) eval - Avalia uma expresso numrica, retornando um resultado tambm numrico. Ex: document.write(eval(10*9*8*7*6*5*4*3*2)) // que retorna 3628800 parseFloat - Converte uma string que representa um nmero, para um nmero com ponto utuante. Caso a string no possa ser avaliada, a funo retorna 0. Ex: document.write(parseFloat(-32.465e12") parseInt - Converte uma string, que representa um nmero em uma base predenida para base 10. Caso a string possua um caracter que no possa ser convertido a operao pra, retornando o valor antes do erro. Ex: paseInt("string",base); parseInt("FF",15) // retorna 256 parseInt("3A",10) // retorna 3 parseInt("10",2) // retorna 2
54
Captulo 9
Classes: Math, Number e Boolean

9.1 Classe Math
OBS.: * = Math *.abs(nmero) - retorna o valor absoluto do nmero (ponto utuante) *.ceil(nmero) - retorna o prximo valor inteiro maior que o nmero *.oor(nmero) - retorna o prximo valor inteiro menor que o nmero *.round(nmero) - retorna o valor inteiro, arredondado, do nmero OBS.: O exemplo abaixo mostra uma funo que arredonda nmeros para duas casas decimais. No somente uma.
function round2(numero) { return Math.round(numero*100)/100; }

Essa funo multiplica o valor por 100 para mover o decimal e ento arredonda o numero para o inteiro mais prximo. Por m, o valor dividido por 100 para restaurar o decimal. *.pow(base, expoente) - retorna o clculo do exponencial *.max(nmero1, nmero2) - retorna o maior nmero dos dois fornecidos *.min(nmero1, nmero2) - retorna o menor nmero dos dois fornecidos *.sqrt(nmero) - retorna a raiz quadrada do nmero *.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414) *.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707) *.sin(nmero) - retorna o seno de um nmero (anglo em radianos) *.asin(nmero) - retorna o arco seno de um nmero (em radianos) *.cos(nmero) - retorna o cosseno de um nmero (anglo em radianos) *.acos(nmero) - retorna o arco cosseno de um nmero (em radianos) *.tan(nmero) - retorna a tangente de um nmero (anglo em radianos) *.atan(nmero) - retorna o arco tangente de um nmero (em radianos) *.pi retorna o valor de PI (aproximadamente 3.14159) *.log(nmero) - retorna o logartmo de um nmero *.E - retorna a base dos logartmos naturais (aproximadamente 2.718) *.LN2 - retorna o valor do logartmo de 2 (aproximadamente 0.693) 55
CDTC
Brasil/DF
*.LOG2E - retorna a base do logartmo de 2 (aproximadamente 1.442) *.LN10 retorna o valor do logartmo de 10 (aproximadamente 2.302) *.LOG10E - retorna a base do logartmo de 10 (aproximadamente 0.434) Exemplos:
Math.abs(-7) // retorna o valor 7;\\ Math.sqrt(81) // retorna o valor 9;\\ Math.sin((Math.pi)/2) // retorna o valor 0.0274...\\
9.2 Classe Number

Modela o tipo de dados numricos. muito provvel que voc no chegue a utilizar em nenhuma ocasio. Mas necessria, contudo, a explicao dela. O valor do objeto Number que se cria depende do que receba o construtor da classe Number. Com estas regras: Se o construtor recebe um nmero, ento inicia o objeto com o nmero que recebe. Se receber um nmero entre aspas, o converte a valor numrico, devolvendo tambm tal nmero. No caso de no receber nada, devolve 0 . No caso de que receba um valor no numrico devolve NaN, que em ingls signica "Not a Number"(No um nmero) Se receber false se inicia com 0 Se receber true se inicia com 1. Exemplos:
var n1 = new Number() document.write(n1 + "<br>") //mostra um 0 var n2 = new Number("oi") document.write(n2 + "<br>") //mostra NaN var n3 = new Number("123") document.write(n3 + "<br>") //mostra 123 var n4 = new Number("123MJGNOANGFJnvbjiahuemn") document.write(n4 + "<br>") //mostra NaN var n5 = new Number(123456) document.write(n5 + "<br>") //mostra 123456
56
CDTC
Brasil/DF
var n6 = new Number(false) document.write(n6 + "<br>") //mostra 0 var n7 = new Number(true) document.write(n7 + "<br>") //mostra 1
Propriedades As seguintes propriedades, como so de classe, o acesso feito pelo nome da classe: NaN - Not a Number Exemplo:
document.write("NaN: " + Number.NaN)

MAX_VALUE e MIN_VALUE - Salvam o valor do mximo e do mnimo valor que se pode representar em Javascript Exemplos:
document.write("MAX_VALUE: " + Number.MAX_VALUE) document.write("MIN_VALUE: " + Number.MIN_VALUE)

NEGATIVE_INFINITY e POSITIVE_INFINITY - Representam os valores, negativos e positivos respectivamente, a partir dos quais h transbordamento. Exemplos:
document.write("NEGATIVE_INFINITY: " + Number.NEGATIVE_INFINITY) document.write("POSITIVE_INFINITY: " + Number.POSITIVE_INFINITY)
9.3 Classe Boolean

Cria valores booleanos. Basicamente ela consegue os dados booleanos a partir de dados de qualquer outro tipo. Dependendo do que receba seu construtor, o valor do objeto que se cria ser verdadeiro ou falso, da seguinte maneira: Inicia-se a false quando voc no passa nenhum valor ao construtor, ou se passa uma cadeia de caracteres vazia, ou o nmero 0 ou obviamente a palavra false sem aspas. Inicia-se a true quando recebe qualquer valor ou cadeia entre aspas ou qualquer nmero distinto de 0. Exemplos:
57
CDTC
Brasil/DF
var x1 = new Boolean() document.write(x1 + "<br>") //retorna false var x2 = new Boolean("") document.write(x2 + "<br>") //retorna false var x3 = new Boolean(false) document.write(x3 + "<br>") //retorna false var x4 = new Boolean(0) document.write(x4 + "<br>") //retorna false var x5 = new Boolean("0") document.write(x5 + "<br>") //retorna true var x6 = new Boolean(7) document.write(x6 + "<br>") //retorna true var x7 = new Boolean("exemplo") document.write(x7 + "<br>") //retorna true
Podemos agora avanar mais um pouco e criar nossas prprias classes para uso na pgina em Javascript. Para criar a classe devemos escrever uma funo especial, que ser a responsvel por construir o objeto na memria e inici-lo. usualmente chamada de construtor. O Construtor tem a forma seguinte:
function ClasseExemplo (valor_iniciacao){ -----//Inicia-se aqui as propriedades e mtodos da nossa classe. this.PropriedadeExemplo = valor_inicial this.MetodoExemplo = nome_de_funcao_definida }
Por exemplo:
function AlunoUniversitario(nome, idade){ this.nome = nome this.idade = idade this.numMatricula = null }

OBS: atribumos null matricula neste caso pois o nmero de matrcula o aluno no recebe at que esteja matriculado. Uma funo que se constri com a inteno de que seja um mtodo para uma classe pode utilizar a varivel this, que faz referncia ao objeto sobre o que invocamos o mtodo.
function matricular(num_matricula){ this.numMatricula = num_matricula }

58
CDTC
Brasil/DF
A funo matricular recebe um nmero de matrcula por parmetro e o atribui propriedade numMatricula do objeto que recebe este mtodo. Assim, preenchemos o da propriedade que nos faltava. Para imprimir os dados do aluno podemos construir a seguinte funo
function imprimir(){ document.write("Nome: " + this.nome) document.write("<br>Idade: " + this.idade) document.write("<br>Nmero de matrcula: " + this.numMatricula) }
Para colocar um mtodo em uma classe devemos atribuir a funo que queremos que seja o mtodo ao objeto que est sendo criado. Com o mtodo matricular e o imprimir o construtor caria da seguinte forma:
function AlunoUniversitario(nome, idade){ this.nome = nome this.idade = idade this.numMatricula = null this.matricular = matricular this.imprimir = imprimir }
Finalmente, instanciamos os objetos da classe AlunoUniversitario utilizando o new:
Aluno = new AlunoUniversitario("Antnio Pereira",20)

Vejamos os passos juntos:
/* * Primeiramente definimos o mtodo 'matriculese' para a classe * AlunoUniversitario. Aps isto, definimos o mtodo imprimir esta * classe. Definimos, entao, o construtor e criamos um aluno. pedido, * ent?o, que se imprima o aluno, que se matricule e novamente pedido * que se imprima (desta vez com o nmero de matrcula preenchido). */ function matriculese(num_matricula){ this.numMatricula = num_matricula } function imprimir(){ document.write("<br>Nome: " + this.nome) document.write("<br>Idade: " + this.idade) document.write("<br>Nmero de matrcula: " + this.numMatricula) }
59
CDTC
Brasil/DF
function AlunoUniversitario(nome, idade){ this.nome = nome this.idade = idade this.numMatricula = null this.matriculese = matriculese this.imprimir = imprimir } meuAluno = new AlunoUniversitario("Antnio Pereira",20) meuAluno.imprimir() meuAluno.matriculese(440321) meuAluno.imprimir()
60
Captulo 10
Date e Checkbox
O Javascript organiza os elementos de uma pgina dentro de uma hierarquia. Cada elemento visto como um objeto. Os objetos podem ter propriedades, mtodos e responder a certos eventos. Da a importncia de entender a hierarquia dos objetos HTML. Poderamos citar diversos objetos existentes em Javascript, mas isso demandaria muitas pginas de explicao. Decidi citar todos e explicar apenas 2 deles para que que claro o funcionamento bsico. O primeiro desses dois o objeto Date.
10.1 Trabalhando com os objetos de datas.

Podemos criar objetos de datas das seguintes maneiras, dependendo de quais valores queremos congurar: Forma Geral:
NovoObjeto = NEW date()

Exemplos:
dia=new dia=new dia=new dia=new
Date(); //neste caso a data atual armazenada Date("Julho 20, 2007, 11:00:00"); Date("07, 20, 2007"); Date("07,20, 2007,11,0,0");
Mtodos existentes no objeto Date: getMonth - Obtm o nmero do ms. Retornando um valor entre 0 e 11. (janeiro=0) Ex: Mes=NovoObjeto.getMonth() setMonth - Estabelece um novo valor para o ms. O valor deve estar entre 0 e 11 Ex: NovoObjeto.setMonth(NumeroDoMes) getDate - Obtm o nmero do dia, considerando-se o ms. Retornando um valor numrico entre 1 e 31. Ex: dia = NovoObjeto.getDate() setDate - Estabelece um novo valor para o dia do ms. Este valor deve estar entre 1 e 31 Ex: NovoObjeto.setDate(NumeroDoDia) 61
CDTC
Brasil/DF
getDay - Obtm o nmero do dia, considerando-se a semana. Retornando um valor numrico entre 0 e 6. Lembre-se de que a semana comea no domingo, logo 0, corresponde ao domingo. Ex: DiaDaSemana = NovoObjeto.getDay() getHours - Obtm um nmero correspondente a hora. Retornando um valor numrico entre 0 e 23. Ex: Hora = NovoObjeto.getHours() setHours - Estabelece um novo valor para a hora. O valor deve estar entre 0 e 23. Ex: NovoObjeto.setHours(NovaHora) getMinutes - Obtm um nmero correspondente aos minutos. Retornando um valor numrico entre 0 e 59. Ex: Minutos = NovoObjeto.getMinutes() setMinutes - Estabelece um novo valor para os minutos. O valor deve estar entre 0..59 Ex: NovoObjeto.setMinutes(Minutos) getSeconds - Obtm um nmero correspondente aos segundos. Retornando um valor numrico entre 0..59 Ex: Segundos = NovoObjeto.getSeconds() setSeconds - Estabelece um novo valor para os segundos. O valor deve estar entre 0 e 59 Ex: NovoObjeto.setSeconds(Segundos) getTime - Obtm o tempo decorrido desde 01/01/70 at o presente momento. O nico incoveniente que esta data dada em milissegundos. Ex: TempoDecorrido=NovoObjeto.getTime() setTime - congura a hora e a data especicando o nmero de milissegundos, desde 1 de Janeiro. Ex: DataDeNascimento=New Date("August 2, 1970") Uma outra forma para denir a data seria:
OutraForma = New Date() OutraForma.setTime(DataDeNascimento.getTime())

getTimeZoneOffset - Obtm a diferena entre o horrio local e o horrio do meridiano central (Greenwich). Este tempo dado em minutos, logo, para saber o fuso-horrio, deve-se dividir o resultado obtido por esta funo por 60. Ex: FusoHorrio=NovoObjeto.getTimezoneOffset() / 60 getYear - Obtm um valor numrico correspondente ao ano. Retorna o ano, ao que se restou 1900. Por exemplo, para o 1995 retorna 95, para o 2005 retorna 105. Este mtodo est obsoleto em Netscape a partir da verso 1.3 de Javascript e agora se utiliza getFullYear(). Ex: Ano=NovoObjeto.getYear() getFullYear() - Retorna o ano com todos os dgitos. Usar este mtodo para datas posteriores ao ano 2000. Ex: Ano=NovoObjeto.getFullYear() 62
CDTC
Brasil/DF
setYear - Estabelece um novo valor ao ano. O valor deve ser maior ou igual a 1900. Ex: NovoObjeto.setYear(1997) setFullYear() - Muda o ano da data ao nmero que recebe por parmetro. O nmero se indica completo ex: 2005 ou 1995. Utilizar este mtodo para datas posteriores a 2000. Ex: NovoObjeto.setFullYear(2005) toGMTstring - Converte um objeto data para uma string seguindo o padro Internet GMT. Ex: NovoObjeto.toGMTstring() toLocalString - Converte uma data para uma string seguindo o padro local. Ex: NovoObjeto.toLocalString() Convertendo entre formatos de data. Dois mtodos especiais do objeto Date permitem converter entre formatos de data. Em vez de utilizar esses mtodos com um objeto Date que voc criou, voc os utiliza com o prprio objeto Date embutido. Esses mtodos so os seguintes:
Date.parse(): Converte uma string de data e objeto Date. Date.UTC(): Faz o contrrio. Converte um valor de objeto Date em uma hora UTC (GMT).
10.2 CheckBox
O segundo objeto tratado ser o objeto CheckBox. Este um objeto que exibe uma caixa de checagem [V] ou []. O funcionamento o seguinte: a condio de selecionada ou no, alternada quando clicamos o mouse sobre o objeto. Isto , se clicarmos sobre um objeto checkbox j marcado ele ser automaticamente desmarcado, ao passo que se clicarmos em um objeto checkbox desmarcado ele ser automaticamente marcado. Tem Forma:
<form> <input type="checkbox" name="NomeDoObjeto" [checked] value="Label" onClick="Ao"> </form>

Type - Nome do objeto Name - Nome dado pelo programador, para futuras referenciaes ao objeto. CHECKED - Se especicado a CheckBox j vai aparecer selecionada Value - Dene um rtulo para a CheckBox. onClick - o evento associado ao chechbox. Dene o que fazer quando d-se um clique na CheckBox, fazendo com que o objeto CheckBox funcione como um objeto Button.
63
CDTC
Brasil/DF
10.2.1 Propriedades
name - Nome do objeto CheckBox em forma de string, da mesma forma como denido no campo Name utilizado na criao da CheckBox. Ex: NomeDoObjeto.name // equivale a string "NomeDoObjeto" value - Armazena o contedo do campo VALUE, denido na TAG. Ex: NomeDoObjeto.value; checked - Retorna um valor lgico que depende do estado do objeto CheckBox. Ex: NomeDoObjeto.checked // equivale a True se o objeto estiver selecionado e False caso contrrio defaultChecked - Informa/Altera o estado default de um objeto CheckBox. Com relao a alterao, somente os objeto CheckBox ainda no exibidos podem ter seu estado default alterado. Ex: NomeDoObjeto.defaultChecked // sempre equivaler a True, se a clusula CHECKED estiver presente e a False caso contrrio.
10.2.2 Mtodos:
click: Este mtodo simula um clique do mouse no objeto CheckBox, ou seja, executa um procedimento associado a uma CheckBox como se estivessemos clicado na CheckBox mas sem que o usurio tenha realmente clicado. Ex: Select01.click() // executaria a funo ConrmaInformacoes
onclick: Como j mostrado, o evento associado ao chechbox. Dene o que fazer quando d-se um clique na CheckBox, fazendo com que o objeto CheckBox funcione como um objeto Button. Vamos a um exemplo:
<html> <head> <title>Exemplo CheckBox</title> <script> function exemplo(p1,p2,p3,p4){ alert('Veja os contedos das propriedades: \nName='+p1+ '\nValue='+p2+ '\nChecked='+p3+ '\ndefaultChecked='+p4); } </script> </head> <body>
64
CDTC
Brasil/DF
<center> <h3>Exemplo do objeto CheckBox</h3> <hr> <form> <input type="checkbox" name="chb" value="Algo.." checked onClick="exemplo (chb.name,chb.value,chb.checked,chb.defaultChecked)")> Tecle aqui... </form> <br> <hr> <br> Tecle no CheckBox para observar o funcionamento!!! Para retornar clique o mouse <a href="history.go(-1)"> AQUI </a> </center> </body> </html>
65
Captulo 11
Hierarquia dos Objetos

Aprenderemos a partir daqui a controlar o navegador e os distintos elementos da pgina. A partir daqui o curso ganha um carter bastante prtico, na medida em que at esta parte no trabalhavamos explicitamente com o navegador e com as pginas. Primeiramente, mostrarei a hierarquia de objetos do browser como um todo e como acess-los.
66
CDTC
Brasil/DF
Percebe-se que os objetos pertecem a um objeto maior chamado window, de modo que para acessar qualquer outro objeto desta hierarquia, devemos iniciar pelo objeto window: Ex:
67
CDTC
Brasil/DF
window.document.bgColor = "red" window.document.write("O texto a escrever")

Percebemos que muitos das propriedades de Window so na verdade outros objetos. Destacamos o objeto Document, que contem propriedades e mtodos necessrios para o controle de diversos aspectos da pgina. Quando carregamos uma pgina, o browser constri a hierarquia na memria. Ainda constri um array (vetor) dos objetos.Isto signica que por exemplo, no caso das imagens, ele vai criando o array colocando na posio 0 (usualmente a inicial) a primeira imagem, na posio 1 a segunda imagem e assim por diante. Vejamos um exemplo dessa construo que percorre as imagens e imprime suas propriedades src, que contm a url onde se situa a imagem.
for (i=0;i<document.images.length;i++){ document.write(document.images[i].src) document.write("<br>") }

Podemos tambm acessar um pouco mais adentro a hierarquia. Vamos em seguida acessar um formulrio da pgina, ao que poderemos acessar pelo array de formulrios, e dentro dele acessar a propriedade elements, que outro array de objetos. Para cada elemento do formulrio vamos escrever sua propriedade value, que corresponde com a propriedade value que colocamos em HTML. Percebemos que um loop muito parecido com o anterior, com a diferena que agora percorremos o vetor elements, ao que acessamos pela hierarquia de objetos passando pelo array de formulrios em sua posio 0, que corresponde como primeiro formulrio da pgina. Vejamos:
for (i=0;i<document.forms[0].elements.length;i++){ document.write(document. forms[0].elements[i].value) document.write("<br>") }
68
Captulo 12
Ocultando scripts
12.1 Ocultando scripts de navegadores antigos
Alguns usurios ainda utilizam navegadores que no suportam JavaScript. Alm disso, algumas pessoas tem suporte para JavaScript porm este est desativado em seus navegadores, seja por preocupao com segurana ou para evitar mensagem rolando na tela. O que acontece que, por causa disso, o browser passa a ignorar a TAG <script> e, logicamente, todo o cdigo que estiver limitado por ela, mostrando todo o cdigo na tela como se fosse um simples texto HTML. Para evitar isso, possvel incluir o script dentro de tags de comentrio de HTML, o que, na prtica, diz ao navegador para ignorar o script case no o entenda. J os navegadores atuais "entendem"que o script no realmente um comentrio. As duas barras (//) na ltima linha so um comentrio JavaScript, que evita que o comentrio HTML seja detectado como um erro de JavaScript. Formato:
<script> < ! - document.write(''Seu browser suporta JavaScript.``) // - - > </script>

Exemplo de uso:
<html> <head> <script language="Javascript"> <!-Function ola(){ alert("Al mundo!!!"); } //--> </script> </head>
69
CDTC
Brasil/DF
<body> <script> ola(); </script> </body> </html>

A tag <noscript> para browsers No-Javascript Uma outra opo o uso das tags <noscript> e </noscript>, que diz aos browsers compatveis com o JavaScript para ignorar tudo entre as elas. Com isso, pode-se incluir contedo HTML para o navegador no-JavaScript dentro das tags. OBS: Navegadores mais antigos que no suportam JavaScript tambm no suportam a tag <noscript>.Entretando, essa tcnica ainda funciona porque, de acordo com o padro de HTML, os navegadores devem ignorar tags desconhecidas. Browsers modernos suportam a tag <noscript> quando suporte para JavaScript est desativado.
70
Captulo 13
Exemplos
Nesta parte nal do curso, veremos alguns exemplos de uso de Javascript. Mostrarei apenas alguns, cando a cargo do aluno testar outros exemplos (bastante difundidos na internet) e criar seus prprios com o conhecimento j adquirido. Rollover Rollover um efeito Javascript que faz que a imagem mude ao passarmos o mouse em cima, como se estivesse nos convidando a clicar na imagem. O procedimento para uso o seguinte: Primeiramente nomeamos a primeira imagem e a inserimos na pgina
<img src="imagem1.gif" name="img1">

Aps isso, atribumos imagem um link, no qual queremos navegar se ela for clicada pelo usurio.
<a href="linkaserclicado.html">
Adicionamos, ento, dois atributos a esse link, que vai nos servir para realizar o efeito desejado: OnMouseOver: com ele indicaremos a ao a ser realizada quando passarmos o mouse em cima da imagem. OnMouseOut: com ele denimos o evento de retirar o mouse de cima da imagem.
<a href="linkaserclicado.html" onmouseover="Cdigo_Javascript" onmouseout="Cdigo_Javascript">

Aps isso, declaramos duas variveis usando Javascript para salvar as imagens 1 e 2. Podemos inserir o script em qualquer lugar entre as etiquetas <script>, mas seria mais adequado colocar antes da imagem. Obs: Os nmeros (84,34) correspondem respectivamente largura e altura da imagem.
<script language=javascript> primeira = new Image(84,34) primeira.src = "imagem1.gif"

71
CDTC
Brasil/DF
segunda = new Image(84,34) segunda.src = "imagem2.gif" </script>

Utilizando, agora a hierarquia Javascript, faremos:
window.document['nome_da_imagem'].src = variavel_imagem_javascript.src
Teoricamente, os atributos HTML dos eventos onmouseover e onmouseout caro assim:
onmouseover="window.document['imagem1'].src= primeira.src onmouseout="window.document['imagem1'].src = segunda.src

E m. Vamos ver agora o script completo:
<script language=javascript> primeira = new Image(84,34) primeira.src = "imagem1.gif" segunda = new Image(84,34) segunda.src = "imagem2.gif" </script> <a href="linkaserclicado.html" onmouseover="window.document['img1'].src = primeira.src" onmouseout="window.document['img1'].src = segunda.src"> <img src="imagem1.gif" border=0 name="img1" width=84 height=34> </a>
13.1 Navegador Dinmico

Diretamente ligado ao exemplo anterior este exemplo seguinte. Podemos adaptar o rollover para criar uma barra de navegao para uma pgina que mude ao passar o mouse por cima de cada item. E exatamente isso o que faremos agora. Evidentemente, existem muitas outras maneiras de fazer uma barra de navegao, mas esta uma boa forma. Primeiramente devemos construir duas verses da barra, desta maneira:
72
CDTC
Brasil/DF
Com uma tabela de HTML faremos, ento, a barra de navegao para a pgina, ainda sem movimento, detalhando assim: inserimos as imagens apagadas; cada imagem linka para uma pgina correspondente; nomeamos diferentemente cada imagem usando o atributo name; usaremos cellpadding e cellspacing 0 para que no exista separao entre as imagens. por esta ltima razo, tambm no devemos deixar espao em branco no cdigo HTML entre os TDs e as imagens. O cdigo ca assim:
<table cellspacing="0" cellpadding="0" border="0"> <tr> <td><a href="principal.html"><img src="javascript_principal1.jpeg" width=110 height=16 alt="Principal" border="0" name="imagem1"></a></td> </tr> <tr> <td><a href="aba1.html"><img src="javascript_aba11.jpeg" width=110 height=16 alt="Aba1" border="0" name="imagem2"></a></td> </tr> <tr> <td><a href="aba2.html"><img src="javascript_aba21.jpeg" width=110 height=16 alt="Aba2" border="0" name="imagem3"></a></td> </tr> <tr> <td><a href="aba3.html"><img src="javascript_aba31.jpeg" width=110 height=16 alt="Aba3" border="0" name="imagem4"></a></td> </tr> </table>
73
CDTC
Brasil/DF
Para ter as imagens j em nosso browser antes de que sejam utilizadas, devemos pr-carreglas usando Javascript. Com isso, conseguiremos que o efeito de rollover seja rpido, e as imagens mudem velozmente segundo o passar do mouse: Para isto, utilizaremos o cdigo seguinte, que dever ser inserido no cabealho do documento HTML:
<script> iluminada1 = new Image(110,16) iluminada1.src = "javascript_principal2.jpeg" apagada1 = new Image(110,16) apagada1.src = "javascript_principal1.jpeg"
iluminada2 = new Image(110,16) iluminada2.src = "javascript_aba12.jpeg" apagada2 = new Image(110,16) apagada2.src = "javascript_aba11.jpeg"
iluminada3 = new Image(110,16) iluminada3.src = "javascript_aba22.jpeg" apagada3 = new Image(110,16) apagada3.src = "javascript_aba21.jpeg"
iluminada4 = new Image(110,16) iluminada4.src = "javascript_aba32.jpeg" apagada4 = new Image(110,16) apagada4.src = "javascript_aba31.jpeg" </script>
74
CDTC
Brasil/DF
Aqui usaremos o rollover, denindo os eventos onmouseover e onmouseout para cada um dos links, indicando a mudana da imagem iluminada e apagada respectivamente.
onmouseover="window.document['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].src = apagada1.src" onmouseover="window.document['imagem2'].src =iluminada2.src" onmouseout="window.document['imagem2'].src = apagada2.src" onmouseover="window.document['imagem3'].src =iluminada3.src" onmouseout="window.document['imagem3'].src = apagada3.src" onmouseover="window.document['imagem4'].src =iluminada4.src" onmouseout="window.document['imagem4'].src = apagada4.src"
O cdigo completo caria assim e o resultado nal podemos testar em um browser qualquer.
<html> <head> <title>Navegador</title> <script> iluminada1 = new Image(110,16) iluminada1.src = "principal2.jpeg" apagada1 = new Image(110,16) apagada1.src = "principal1.jpeg" iluminada2 = new Image(110,16) iluminada2.src = "aba12.jpeg" apagada2 = new Image(110,16) apagada2.src = "aba11.jpeg" iluminada3 = new Image(110,16) iluminada3.src = "aba22.jpeg" apagada3 = new Image(110,16) apagada3.src = "aba21.jpeg"
75
CDTC
Brasil/DF
iluminada4 = new Image(110,16) iluminada4.src = "aba32.jpeg" apagada4 = new Image(110,16) apagada4.src = "aba31.jpeg" </script> </head> <body bgcolor="#6e6d52"> <table cellspacing="0" cellpadding="0" border="0"> <tr> <td> <a href="principal.html" onmouseover="window.document['imagem1'].src =iluminada1.src" onmouseout="window.document['imagem1'].src = apagada1.src"> <img src="principal1.jpeg" width=110 height=16 alt="Principal" border="0" name="imagem1"></a> </td> </tr> <tr> <td><a href="aba1.html" onmouseover="window.document['imagem2'].src =iluminada2.src" onmouseout="window.document['imagem2'].src = apagada2.src"> <img src="aba11.jpeg" width=110 height=16 alt="Aba1" border="0" name="imagem2"></a></td> </tr> <tr> <td><a href="aba2.html" onmouseover="window.document['imagem3'].src =iluminada3.src" onmouseout="window.document['imagem3'].src = apagada3.src"> <img src="aba21.jpeg" width=110 height=16 alt="Aba2" border="0" name="imagem3"></a></td> </tr> <tr> <td><a href="aba3.html" onmouseover="window.document['imagem4'].src =iluminada4.src" onmouseout="window.document['imagem4'].src = apagada4.src"> <img src="aba31.jpeg" width=110 height=16 alt="Aba3" border="0" name="imagem4"></a></td> </tr> </table> </body> </html>
Se desejar checar o cdigo e ver o resultado: 1)Salve as guras do inicio da pgina uma por uma em alguma pasta 76
CDTC
Brasil/DF
2)Salve o cdigo anterior em um editor de texto comum com a extenso sendo .html. 3)Salve este ltimo arquivo mesma pasta que contm as guras e abra o arquivo .html em um browser qualquer.
13.2 Relgio Digital

Mostrarei um ltimo exemplo, onde crio um relgio digital usando Javascript. Este script simples e na prtica podemos apenas copi-lo e col-lo. Para ns didticos, explicarei como os outros, passo-a-passo. Primeiramente inserimos o campo que dar o formato do relgio. Neste caso, ele ser considerado como um pequeno formulrio somente com o campo texto. Temos que atribuir um nome ao formulrio e ao campo texto para posteriormente acess-los usando o Javascript.
<form name="relogioformulario"> <input type="text" name="camporelogio" size="10"> </form>

Agora devemos ter uma funo que busque o relgio do sistema e mostre no campo anterior. J sabemos fazer isso usando o Date(). Se criarmos uma instncia do objeto Date sem lhe passar parmetros, inicia-se data e hora atuais.
hraAtual = new Date()

Usando os mtodos de Date, pegamos as horas, minutos e segundos:
hour = hraAtual.getHours() minutes = hraAtual.getMinutes() second = hra.Atual.getSeconds()

Por m,
finalhora = hour +" : "+ minutes +" : "+ seconds

Agora apenas colocamos a hora no campo texto do formulrio:
document.relogioformulario.camporelogio.value = finalhora
Chamaremos a funo assim:
function Relogio(){ hraAtual = new Date() hour = hraAtual.getHours() minutes = hraAtual.getMinutes() second = hra.Atual.getSeconds() horaImprimivel = hora + " : " + minuto + " : " + segundo document.relogioformulario.camporelogio.value = finalhora }
77
CDTC
Brasil/DF
At aqui obtivemos hora e a atualizamos em seu campo de texto. necessrio agora que a funo chame a si mesma freqentemente, a cada segundo, para assim voltar a fazer todo o processo de obteno e atualizao da hora. Processo este que se repetir at sairmos da pgina. A linha de cdigo para chamar a si mesma, que colocaremos na ltima linha da funo a seguinte:
setTimeout("Relogio()",1000)
A funo anterior, como j visto, serve para fazer o adiantamento antes de executar a sentena. A sentena uma simples chamada funo e o adiantamento de 1000 milsimos de segundos (um segundo). Necessitamos, agora, colocar o relgio em funcionamento. Isto pode ser feito uma vez terminado o carregamento da pgina com o administrador de eventos onload, que coloca-se no <body>.
<body onload="Relogio()">
Isto quer dizer que quando termine de carregar a pgina se chamar funo moveRelogio(), que se encarregar de mover o relgio e chamar a si mesmo para fazer o processo de maneira contnua. Podemos ainda, fazer que nao seja possivel modicar o texto do relogio manualmente. O administrador de eventos onfocus e ativado quando o campo de texto adquire o foco da aplicacao. Tiraremos esse foco com o onblur. Ficariamos com o seguinte:
<input type="text" name="camporelogio" size="10" onfocus="window.document.relogioformulario.camporelogio.blur()">

Finalmente, se quisermos que os digitos sejam mostrados sempre com 2 casas decimais, ou seja, no formato hh : mm : ss, devemos manipular os valores como se fossem strings. Construiremos, entao uma string a partir do valor (hra, min, sec) que desejamos formatar. Para obter a string a partir do numero de horas, por exemplo, fazemos:
str_hora = new String (hora)

Os minutos e segundos sao feitos de maneira similar. A seguir vericamos com um if o numero de caracteres na string. Se houver apenas um, devemos concatenar um 0 ao inicio:
if (str_hora.length == 1) hora = "0" + hora

Cdigo completo:
<html> <head> <title>Relogio com Javascript</title> <script language="JavaScript"> function Relogio(){

78
CDTC
Brasil/DF
hraAtual = new Date() hours = hraAtual.getHours() minutes = hraAtual.getMinutes() seconds = hraAtual.getSeconds() str_hora = new String (hours) if (str_hora.length == 1) hours = "0" + hours str_minuto = new String (minutes) if (str_minuto.length == 1) minutes = "0" + minutes str_segundo = new String (seconds) if (str_segundo.length == 1) seconds = "0" + seconds finalhora = hours + " : " + minutes + " : " + seconds document.relogioformulario.camporelogio.value = finalhora setTimeout("Relogio()",1000) } </script> </head> <body onload="Relogio()"> Vemos aqui o relgio funcionando... <form name="relogioformulario"> <input type="text" name="camporelogio" size="10" onfocus="window.document.relogioformulario.camporelogio.blur()"> </form> </body> </html>
79

Javascript

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Javascript

Загружено:

Авторское право:

Доступные форматы

Javascript

II Informaes Bsicas III GNU Free Documentation License IV Javascript

Centro de Difuso de Tecnologia e Conhecimento

Sobre essa Apostila

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Os 10 mandamentos do aluno de educao online

Como participar dos fruns e Wikipdia

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

GNU Free Documentation License

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

FAZENDO CPIAS EXATAS

FAZENDO CPIAS EM QUANTIDADE

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

AGREGAO COM TRABALHOS INDEPENDENTES

Centro de Difuso de Tecnologia e Conhecimento

verso original em Ingls desta Licena, a verso original em Ingls prevalecer.

REVISES FUTURAS DESTA LICENA

Centro de Difuso de Tecnologia e Conhecimento

2.2 Pblico Alvo

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

Centro de Difuso de Tecnologia e Conhecimento

2.10 Pginas Recomendadas

3.1 O que Javascript?

Centro de Difuso de Tecnologia e Conhecimento

3.2 Diferenas Bsicas entre Java e Javascript

<script> cdigo javascript </script>

Centro de Difuso de Tecnologia e Conhecimento

4.2 Sintaxe Javascript

<script> varivelGlobal </script>

Centro de Difuso de Tecnologia e Conhecimento

<script> function minhaFuncao(){ var variavelLocal } </script>

Nome1="Jos" Valor=2 _1contador=0

Centro de Difuso de Tecnologia e Conhecimento

document.write("isto uma\n frase");

isto uma frase

Centro de Difuso de Tecnologia e Conhecimento

Isso um teste! um teste mesmo

Alguns exemplos de uso dos mtodos:

Centro de Difuso de Tecnologia e Conhecimento

varstring= "30 bebidas" numvar= parseInt(varstring);

<script> alert("Certifique-se de que as informaes esto corretas")

Centro de Difuso de Tecnologia e Conhecimento

<Script> if (confirm("Deseja Continuar?")) { alert("Continuando") } else { alert("Parando") } </Script >

5.3 Mensagens que rolam na barra de status

frase="Ol, sejam bem vindos!"

function rolamensagem(){ window.status=frase.subtring(pos,frase.legth)+esp+frase.substring(0,pos); pos++; if(pos>frase.length) pos =0; windows.setTimeout("rolamensagem()", 500); }

Centro de Difuso de Tecnologia e Conhecimento

5.4 Armazenando dados do usurio em variveis

titulo=prompt("digite o ttulo da pagina"); nome=prompt("digite seu nome:");

document.write("<H1>"+ titulo+"</H1>"); document.write("<H2> Criada por"+nome+"</H2>");

Centro de Difuso de Tecnologia e Conhecimento

var vetor = new Array(); var vetor2 = new Array(6);

vetor[0]=150 vetor[1]=80 vetor[2]=10

for (i=0;i<3;i++){ document.write("Posio " + i + " do vetor: " + vetor[i]) document.write("<br>") }

Centro de Difuso de Tecnologia e Conhecimento

Frase="isto um vetor" Vetor=Frase.split(" ");