cdtc - javascript

80
Javascript Versão 1.0.0

Upload: almir-oliveira

Post on 01-Dec-2015

77 views

Category:

Documents


8 download

TRANSCRIPT

Page 1: CDTC - Javascript

JavascriptVersão 1.0.0

Page 2: CDTC - Javascript

Sumário

I Sobre essa Apostila 2

II Informações Básicas 4

III GNU Free Documentation License 9

IV Javascript 18

1 Sobre Javascript 19

2 Plano de ensino 202.1 Objetivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.2 Público Alvo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.3 Pré-requisitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.4 Descrição . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202.5 Metodologia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.6 Cronograma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.7 Programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212.8 Avaliação . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.9 Bibliografia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222.10 Páginas Recomendadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

3 Início do Javascript 243.1 O que é Javascript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243.2 Diferenças Básicas entre Java e Javascript . . . . . . . . . . . . . . . . . . . . . . . 25

4 Sintaxe e Variáveis 264.1 Necessário para programar em Javascript . . . . . . . . . . . . . . . . . . . . . . . . 264.2 Sintaxe Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274.3 Variáveis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

5 Strings e Mensagens 305.1 As Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305.2 Mensagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325.3 Mensagens que rolam na barra de status . . . . . . . . . . . . . . . . . . . . . . . . 335.4 Armazenando dados do usuário em variáveis . . . . . . . . . . . . . . . . . . . . . . 34

1

Page 3: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

6 Objetos e Arrays 366.1 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

6.1.1 Manipulando Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366.2 Mais sobre vetores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376.3 Arrays multidimensionais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

7 Operadores 417.1 Lógicos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417.2 Operadores Especiais . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427.3 Precedência de Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427.4 Comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 437.5 Comando FOR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457.6 Comando WHILE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 457.7 Comando DO...WHILE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

8 Eventos e Outros Comandos 478.1 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478.2 Outros Comandos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 488.3 Funções . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50

9 Classes: Math, Number e Boolean 549.1 Classe Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 549.2 Classe Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559.3 Classe Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56

10 Date e Checkbox 6010.1 Trabalhando com os objetos de datas. . . . . . . . . . . . . . . . . . . . . . . . . . . 6010.2 CheckBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

10.2.1 Propriedades . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6310.2.2 Métodos: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63

11 Hierarquia dos Objetos 65

12 Ocultando scripts 6812.1 Ocultando scripts de navegadores antigos . . . . . . . . . . . . . . . . . . . . . . . . 68

13 Exemplos 7013.1 Navegador Dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7113.2 Relógio Digital . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

2

Page 4: CDTC - Javascript

Parte I

Sobre essa Apostila

3

Page 5: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Conteúdo

O conteúdo dessa apostila é fruto da compilação de diversos materiais livres publicados na in-ternet, disponíveis em diversos sites ou originalmente produzido no CDTC (http://www.cdtc.org.br.)

O formato original deste material bem como sua atualização está disponível dentro da licençaGNU Free Documentation License, cujo teor integral encontra-se aqui reproduzido na seção demesmo nome, tendo inclusive uma versão traduzida (não oficial).

A revisão e alteração vem sendo realizada pelo CDTC ([email protected]) desde outubrode 2006. Críticas e sugestões construtivas serão bem-vindas a qualquer hora.

Autores

A autoria deste é de responsabilidade de Júlio Cesar Júnior ([email protected]) .

O texto original faz parte do projeto Centro de Difusão de Tecnologia e Conhecimento quevêm sendo realizado pelo ITI (Instituto Nacional de Tecnologia da Informação) em conjunto comoutros parceiros institucionais, e com as universidades federais brasileiras que tem produzido eutilizado Software Livre apoiando inclusive a comunidade Free Software junto a outras entidadesno país.

Informações adicionais podem ser obtidas através do email [email protected], ou dahome page da entidade, através da URL http://www.cdtc.org.br.

Garantias

O material contido nesta apostila é isento de garantias e o seu uso é de inteira responsabi-lidade do usuário/leitor. Os autores, bem como o ITI e seus parceiros, não se responsabilizamdireta ou indiretamente por qualquer prejuízo oriundo da utilização do material aqui contido.

Licença

Copyright ©2006, Instituto Nacional de Tecnologia da Informação ([email protected]) .

Permission is granted to copy, distribute and/or modify this document under the termsof the GNU Free Documentation License, Version 1.1 or any later version published bythe Free Software Foundation; with the Invariant Chapter being SOBRE ESSA APOS-TILA. A copy of the license is included in the section entitled GNU Free DocumentationLicense.

4

Page 6: CDTC - Javascript

Parte II

Informações Básicas

5

Page 7: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Sobre o CDTC

Objetivo Geral

O Projeto CDTC visa a promoção e o desenvolvimento de ações que incentivem a dissemina-ção de soluções que utilizem padrões abertos e não proprietários de tecnologia, em proveito dodesenvolvimento social, cultural, político, tecnológico e econômico da sociedade brasileira.

Objetivo Específico

Auxiliar o Governo Federal na implantação do plano nacional de software não-proprietário ede código fonte aberto, identificando e mobilizando grupos de formadores de opinião dentre osservidores públicos e agentes políticos da União Federal, estimulando e incentivando o mercadonacional a adotar novos modelos de negócio da tecnologia da informação e de novos negóciosde comunicação com base em software não-proprietário e de código fonte aberto, oferecendotreinamento específico para técnicos, profissionais de suporte e funcionários públicos usuários,criando grupos de funcionários públicos que irão treinar outros funcionários públicos e atuar comoincentivadores e defensores dos produtos de software não proprietários e código fonte aberto, ofe-recendo conteúdo técnico on-line para serviços de suporte, ferramentas para desenvolvimento deprodutos de software não proprietários e do seu código fonte livre, articulando redes de terceiros(dentro e fora do governo) fornecedoras de educação, pesquisa, desenvolvimento e teste de pro-dutos de software livre.

Guia do aluno

Neste guia, você terá reunidas uma série de informações importantes para que você comeceseu curso. São elas:

• Licenças para cópia de material disponível;

• Os 10 mandamentos do aluno de Educação a Distância;

• Como participar dos foruns e da wikipédia;

• Primeiros passos.

É muito importante que você entre em contato com TODAS estas informações, seguindo oroteiro acima.

Licença

Copyright ©2006, Instituto Nacional de Tecnologia da Informação ([email protected]).

6

Page 8: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

É dada permissão para copiar, distribuir e/ou modificar este documento sob os termosda Licença de Documentação Livre GNU, Versão 1.1 ou qualquer versão posteriorpúblicada pela Free Software Foundation; com o Capitulo Invariante SOBRE ESSAAPOSTILA. Uma cópia da licença está inclusa na seção entitulada "Licença de Docu-mentação Livre GNU".

Os 10 mandamentos do aluno de educação online

• 1. Acesso à Internet: ter endereço eletrônico, um provedor e um equipamento adequado épré-requisito para a participação nos cursos a distância;

• 2. Habilidade e disposição para operar programas: ter conhecimentos básicos de Informá-tica é necessário para poder executar as tarefas;

• 3. Vontade para aprender colaborativamente: interagir, ser participativo no ensino a distân-cia conta muitos pontos, pois irá colaborar para o processo ensino-aprendizagem pessoal,dos colegas e dos professores;

• 4. Comportamentos compatíveis com a etiqueta: mostrar-se interessado em conhecer seuscolegas de turma respeitando-os e se fazendo ser respeitado pelos mesmos;

• 5. Organização pessoal: planejar e organizar tudo é fundamental para facilitar a sua revisãoe a sua recuperação de materiais;

• 6. Vontade para realizar as atividades no tempo correto: anotar todas as suas obrigações erealizá-las em tempo real;

• 7. Curiosidade e abertura para inovações: aceitar novas idéias e inovar sempre;

• 8. Flexibilidade e adaptação: requisitos necessário à mudança tecnológica, aprendizagense descobertas;

• 9. Objetividade em sua comunicação: comunicar-se de forma clara, breve e transparente éponto - chave na comunicação pela Internet;

• 10. Responsabilidade: ser responsável por seu próprio aprendizado. O ambiente virtual nãocontrola a sua dedicação, mas reflete os resultados do seu esforço e da sua colaboração.

Como participar dos fóruns e Wikipédia

Você tem um problema e precisa de ajuda?

Podemos te ajudar de 2 formas:

A primeira é o uso dos fóruns de notícias e de dúvidas gerais que se distinguem pelo uso:

. O fórum de notícias tem por objetivo disponibilizar um meio de acesso rápido a informaçõesque sejam pertinentes ao curso (avisos, notícias). As mensagens postadas nele são enviadas a

7

Page 9: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

todos participantes. Assim, se o monitor ou algum outro participante tiver uma informação queinteresse ao grupo, favor postá-la aqui.Porém, se o que você deseja é resolver alguma dúvida ou discutir algum tópico específico docurso. É recomendado que você faça uso do Fórum de dúvidas gerais que lhe dá recursos maisefetivos para esta prática.

. O fórum de dúvidas gerais tem por objetivo disponibilizar um meio fácil, rápido e interativopara solucionar suas dúvidas e trocar experiências. As mensagens postadas nele são enviadasa todos participantes do curso. Assim, fica muito mais fácil obter respostas, já que todos podemajudar.Se você receber uma mensagem com algum tópico que saiba responder, não se preocupe com aformalização ou a gramática. Responda! E não se esqueça de que antes de abrir um novo tópicoé recomendável ver se a sua pergunta já foi feita por outro participante.

A segunda forma se dá pelas Wikis:

. Uma wiki é uma página web que pode ser editada colaborativamente, ou seja, qualquer par-ticipante pode inserir, editar, apagar textos. As versões antigas vão sendo arquivadas e podemser 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 "Wikipé-dia", uma experiência grandiosa de construção de uma enciclopédia de forma colaborativa, porpessoas de todas as partes do mundo. Acesse-a em português pelos links:

• Página principal da Wiki - http://pt.wikipedia.org/wiki/

Agradecemos antecipadamente a sua colaboração com a aprendizagem do grupo!

Primeiros Passos

Para uma melhor aprendizagem é recomendável que você siga os seguintes passos:

• Ler o Plano de Ensino e entender a que seu curso se dispõe a ensinar;

• Ler a Ambientação do Moodle para aprender a navegar neste ambiente e se utilizar dasferramentas básicas do mesmo;

• Entrar nas lições seguindo a seqüência descrita no Plano de Ensino;

• Qualquer dúvida, reporte ao Fórum de Dúvidas Gerais.

Perfil do Tutor

Segue-se uma descrição do tutor ideal, baseada no feedback de alunos e de tutores.

O tutor ideal é um modelo de excelência: é consistente, justo e profissional nos respectivosvalores e atitudes, incentiva mas é honesto, imparcial, amável, positivo, respeitador, aceita asidéias dos estudantes, é paciente, pessoal, tolerante, apreciativo, compreensivo e pronto a ajudar.

8

Page 10: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

A classificação por um tutor desta natureza proporciona o melhor feedback possível, é crucial, e,para a maior parte dos alunos, constitui o ponto central do processo de aprendizagem.’ Este tutorou instrutor:

• fornece explicações claras acerca do que ele espera e do estilo de classificação que iráutilizar;

• gosta que lhe façam perguntas adicionais;

• identifica as nossas falhas, mas corrige-as amavelmente’, diz um estudante, ’e explica por-que motivo a classificação foi ou não foi atribuída’;

• tece comentários completos e construtivos, mas de forma agradável (em contraste com umreparo de um estudante: ’os comentários deixam-nos com uma sensação de crítica, deameaça e de nervossismo’)

• dá uma ajuda complementar para encorajar um estudante em dificuldade;

• esclarece pontos que não foram entendidos, ou corretamente aprendidos anteriormente;

• ajuda o estudante a alcançar os seus objetivos;

• é flexível quando necessário;

• mostra um interesse genuíno em motivar os alunos (mesmo os principiantes e, por isso,talvez numa fase menos interessante para o tutor);

• escreve todas as correções de forma legível e com um nível de pormenorização adequado;

• acima de tudo, devolve os trabalhos rapidamente;

9

Page 11: CDTC - Javascript

Parte III

GNU Free Documentation License

10

Page 12: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

(Traduzido pelo João S. O. Bueno através do CIPSGA em 2001)Esta é uma tradução não oficial da Licença de Documentação Livre GNU em Português Brasi-

leiro. Ela não é publicada pela Free Software Foundation, e não se aplica legalmente a distribuiçãode textos que usem a GFDL - apenas o texto original em Inglês da GNU FDL faz isso. Entretanto,nós esperamos que esta tradução ajude falantes de português a entenderem melhor a GFDL.

This is an unofficial translation of the GNU General Documentation License into Brazilian Por-tuguese. It was not published by the Free Software Foundation, and does not legally state thedistribution terms for software that uses the GFDL–only the original English text of the GFDL doesthat. However, we hope that this translation will help Portuguese speakers understand the GFDLbetter.

Licença de Documentação Livre GNU Versão 1.1, Março 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 cópias exatas deste documento de licença, masnão é permitido alterá-lo.

INTRODUÇÃO

O propósito desta Licença é deixar um manual, livro-texto ou outro documento escrito "livre"nosentido de liberdade: assegurar a qualquer um a efetiva liberdade de copiá-lo ou redistribui-lo,com ou sem modificações, comercialmente ou não. Secundariamente, esta Licença mantémpara o autor e editor uma forma de ter crédito por seu trabalho, sem ser considerado responsávelpelas modificações feitas por terceiros.

Esta Licença é um tipo de "copyleft"("direitos revertidos"), o que significa que derivações dodocumento precisam ser livres no mesmo sentido. Ela complementa a GNU Licença Pública Ge-ral (GNU GPL), que é um copyleft para software livre.

Nós fizemos esta Licença para que seja usada em manuais de software livre, por que softwarelivre precisa de documentação livre: um programa livre deve ser acompanhado de manuais queprovenham as mesmas liberdades que o software possui. Mas esta Licença não está restrita amanuais de software; ela pode ser usada para qualquer trabalho em texto, independentementedo assunto ou se ele é publicado como um livro impresso. Nós recomendamos esta Licença prin-cipalmente para trabalhos cujo propósito seja de introdução ou referência.

APLICABILIDADE E DEFINIÇÕES

Esta Licença se aplica a qualquer manual ou outro texto que contenha uma nota colocada pelodetentor dos direitos autorais dizendo que ele pode ser distribuído sob os termos desta Licença.O "Documento"abaixo se refere a qualquer manual ou texto. Qualquer pessoa do público é um

11

Page 13: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

licenciado e é referida como "você".

Uma "Versão Modificada"do Documento se refere a qualquer trabalho contendo o documentoou uma parte dele, quer copiada exatamente, quer com modificações e/ou traduzida em outralíngua.

Uma "Seção Secundária"é um apêndice ou uma seção inicial do Documento que trata ex-clusivamente da relação dos editores ou dos autores do Documento com o assunto geral doDocumento (ou assuntos relacionados) e não contém nada que poderia ser incluído diretamentenesse assunto geral (Por exemplo, se o Documento é em parte um livro texto de matemática, aSeção Secundária pode não explicar nada de matemática).

Essa relação poderia ser uma questão de ligação histórica com o assunto, ou matérias relaci-onadas, ou de posições legais, comerciais, filosóficas, éticas ou políticas relacionadas ao mesmo.

As "Seções Invariantes"são certas Seções Secundárias cujos títulos são designados, comosendo de Seções Invariantes, na nota que diz que o Documento é publicado sob esta Licença.

Os "Textos de Capa"são certos trechos curtos de texto que são listados, como Textos de CapaFrontal ou Textos da Quarta Capa, na nota que diz que o texto é publicado sob esta Licença.

Uma cópia "Transparente"do Documento significa uma cópia que pode ser lida automatica-mente, representada num formato cuja especificação esteja disponível ao público geral, cujosconteúdos possam ser vistos e editados diretamente e sem mecanismos especiais com editoresde texto genéricos ou (para imagens compostas de pixels) programas de pintura genéricos ou(para desenhos) por algum editor de desenhos grandemente difundido, e que seja passível deservir como entrada a formatadores de texto ou para tradução automática para uma variedadede formatos que sirvam de entrada para formatadores de texto. Uma cópia feita em um formatode arquivo outrossim Transparente cuja constituição tenha sido projetada para atrapalhar ou de-sencorajar modificações subsequentes pelos leitores não é Transparente. Uma cópia que não é"Transparente"é chamada de "Opaca".

Exemplos de formatos que podem ser usados para cópias Transparentes incluem ASCII sim-ples sem marcações, formato de entrada do Texinfo, formato de entrada do LaTex, SGML ou XMLusando uma DTD disponibilizada publicamente, e HTML simples, compatível com os padrões, eprojetado para ser modificado por pessoas. Formatos opacos incluem PostScript, PDF, formatosproprietários que podem ser lidos e editados apenas com processadores de texto proprietários,SGML ou XML para os quais a DTD e/ou ferramentas de processamento e edição não estejamdisponíveis para o público, e HTML gerado automaticamente por alguns editores de texto comfinalidade apenas de saída.

A "Página do Título"significa, para um livro impresso, a página do título propriamente dita,mais quaisquer páginas subsequentes quantas forem necessárias para conter, de forma legível,o material que esta Licença requer que apareça na página do título. Para trabalhos que nãotenham uma página do título, "Página do Título"significa o texto próximo da aparição mais proe-minente do título do trabalho, precedendo o início do corpo do texto.

12

Page 14: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

FAZENDO CÓPIAS EXATAS

Você pode copiar e distribuir o Documento em qualquer meio, de forma comercial ou nãocomercial, desde que esta Licença, as notas de copyright, e a nota de licença dizendo que estaLicença se aplica ao documento estejam reproduzidas em todas as cópias, e que você não acres-cente nenhuma outra condição, quaisquer que sejam, às desta Licença.

Você não pode usar medidas técnicas para obstruir ou controlar a leitura ou confecção decópias subsequentes das cópias que você fizer ou distribuir. Entretanto, você pode aceitar com-pensação em troca de cópias. Se você distribuir uma quantidade grande o suficiente de cópias,você também precisa respeitar as condições da seção 3.

Você também pode emprestar cópias, sob as mesmas condições colocadas acima, e tambémpode exibir cópias publicamente.

FAZENDO CÓPIAS EM QUANTIDADE

Se você publicar cópias do Documento em número maior que 100, e a nota de licença doDocumento obrigar Textos de Capa, você precisará incluir as cópias em capas que tragam, clarae legivelmente, todos esses Textos de Capa: Textos de Capa da Frente na capa da frente, eTextos da Quarta Capa na capa de trás. Ambas as capas também precisam identificar clara elegivelmente você como o editor dessas cópias. A capa da frente precisa apresentar o título com-pleto com todas as palavras do título igualmente proeminentes e visíveis. Você pode adicionaroutros materiais às capas. Fazer cópias com modificações limitadas às capas, tanto quanto estaspreservem o título do documento e satisfaçam a essas condições, pode ser tratado como cópiaexata em outros aspectos.

Se os textos requeridos em qualquer das capas for muito volumoso para caber de formalegível, você deve colocar os primeiros (tantos quantos couberem de forma razoável) na capaverdadeira, e continuar os outros nas páginas adjacentes.

Se você publicar ou distribuir cópias Opacas do Documento em número maior que 100, vocêprecisa ou incluir uma cópia Transparente que possa ser lida automaticamente com cada cópiaOpaca, ou informar, em ou com, cada cópia Opaca a localização de uma cópia Transparentecompleta do Documento acessível publicamente em uma rede de computadores, à qual o públicousuário de redes tenha acesso a download gratuito e anônimo utilizando padrões públicos deprotocolos de rede. Se você utilizar o segundo método, você precisará tomar cuidados razoavel-mente prudentes, quando iniciar a distribuição de cópias Opacas em quantidade, para assegurarque esta cópia Transparente vai permanecer acessível desta forma na localização especificadapor pelo menos um ano depois da última vez em que você distribuir uma cópia Opaca (direta-mente ou através de seus agentes ou distribuidores) daquela edição para o público.

É pedido, mas não é obrigatório, que você contate os autores do Documento bem antes deredistribuir qualquer grande número de cópias, para lhes dar uma oportunidade de prover vocêcom uma versão atualizada do Documento.

13

Page 15: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

MODIFICAÇÕES

Você pode copiar e distribuir uma Versão Modificada do Documento sob as condições das se-ções 2 e 3 acima, desde que você publique a Versão Modificada estritamente sob esta Licença,com a Versão Modificada tomando o papel do Documento, de forma a licenciar a distribuiçãoe modificação da Versão Modificada para quem quer que possua uma cópia da mesma. Alémdisso, você precisa fazer o seguinte na versão modificada:

A. Usar na Página de Título (e nas capas, se houver alguma) um título distinto daquele do Do-cumento, e daqueles de versões anteriores (que deveriam, se houvesse algum, estarem listadosna seção "Histórico do Documento"). Você pode usar o mesmo título de uma versão anterior seo editor original daquela versão lhe der permissão;

B. Listar na Página de Título, como autores, uma ou mais das pessoas ou entidades responsá-veis pela autoria das modificações na Versão Modificada, conjuntamente com pelo menos cincodos autores principais do Documento (todos os seus autores principais, se ele tiver menos quecinco);

C. Colocar na Página de Título o nome do editor da Versão Modificada, como o editor;

D. Preservar todas as notas de copyright do Documento;

E. Adicionar uma nota de copyright apropriada para suas próprias modificações adjacente àsoutras notas de copyright;

F. Incluir, imediatamente depois das notas de copyright, uma nota de licença dando ao públicoo direito de usar a Versão Modificada sob os termos desta Licença, na forma mostrada no tópicoabaixo;

G. Preservar nessa nota de licença as listas completas das Seções Invariantes e os Textos deCapa requeridos dados na nota de licença do Documento;

H. Incluir uma cópia inalterada desta Licença;

I. Preservar a seção entitulada "Histórico", e seu título, e adicionar à mesma um item dizendopelo menos o título, ano, novos autores e editor da Versão Modificada como dados na Página deTítulo. Se não houver uma sessão denominada "Histórico"no Documento, criar uma dizendo otítulo, ano, autores, e editor do Documento como dados em sua Página de Título, então adicionarum item descrevendo a Versão Modificada, tal como descrito na sentença anterior;

J. Preservar o endereço de rede, se algum, dado no Documento para acesso público a umacópia Transparente do Documento, e da mesma forma, as localizações de rede dadas no Docu-mento para as versões anteriores em que ele foi baseado. Elas podem ser colocadas na seção"Histórico". Você pode omitir uma localização na rede para um trabalho que tenha sido publicadopelo menos quatro anos antes do Documento, ou se o editor original da versão a que ela se refirader sua permissão;

K. Em qualquer seção entitulada "Agradecimentos"ou "Dedicatórias", preservar o título da

14

Page 16: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

seção e preservar a seção em toda substância e fim de cada um dos agradecimentos de contri-buidores e/ou dedicatórias dados;

L. Preservar todas as Seções Invariantes do Documento, inalteradas em seus textos ou emseus títulos. Números de seção ou equivalentes não são considerados parte dos títulos da seção;

M. Apagar qualquer seção entitulada "Endossos". Tal sessão não pode ser incluída na VersãoModificada;

N. Não reentitular qualquer seção existente com o título "Endossos"ou com qualquer outrotítulo dado a uma Seção Invariante.

Se a Versão Modificada incluir novas seções iniciais ou apêndices que se qualifiquem comoSeções Secundárias e não contenham nenhum material copiado do Documento, você pode optarpor designar alguma ou todas aquelas seções como invariantes. Para fazer isso, adicione seustítulos à lista de Seções Invariantes na nota de licença da Versão Modificada. Esses títulos preci-sam ser diferentes de qualquer outro título de seção.

Você pode adicionar uma seção entitulada "Endossos", desde que ela não contenha qual-quer coisa além de endossos da sua Versão Modificada por várias pessoas ou entidades - porexemplo, declarações de revisores ou de que o texto foi aprovado por uma organização como adefinição oficial de um padrão.

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 final da lista de Textosde Capa na Versão Modificada. Somente uma passagem de Texto da Capa da Frente e uma deTexto 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 porvocê ou por acordo feito com alguma entidade para a qual você esteja agindo, você não podeadicionar um outro; mas você pode trocar o antigo, com permissão explícita do editor anterior queadicionou a passagem antiga.

O(s) autor(es) e editor(es) do Documento não dão permissão por esta Licença para que seusnomes sejam usados para publicidade ou para assegurar ou implicar endossamento de qualquerVersão Modificada.

COMBINANDO DOCUMENTOS

Você pode combinar o Documento com outros documentos publicados sob esta Licença, sobos termos definidos na seção 4 acima para versões modificadas, desde que você inclua na com-binação todas as Seções Invariantes de todos os documentos originais, sem modificações, e listetodas elas como Seções Invariantes de seu trabalho combinado em sua nota de licença.

O trabalho combinado precisa conter apenas uma cópia desta Licença, e Seções InvariantesIdênticas com multiplas ocorrências podem ser substituídas por apenas uma cópia. Se houvermúltiplas Seções Invariantes com o mesmo nome mas com conteúdos distintos, faça o título de

15

Page 17: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

cada seção único adicionando ao final do mesmo, em parênteses, o nome do autor ou editororigianl daquela seção, se for conhecido, ou um número que seja único. Faça o mesmo ajustenos títulos de seção na lista de Seções Invariantes nota de licença do trabalho combinado.

Na combinação, você precisa combinar quaisquer seções entituladas "Histórico"dos diver-sos documentos originais, formando uma seção entitulada "Histórico"; da mesma forma combinequaisquer seções entituladas "Agradecimentos", ou "Dedicatórias". Você precisa apagar todas asseções entituladas como "Endosso".

COLETÂNEAS DE DOCUMENTOS

Você pode fazer uma coletânea consitindo do Documento e outros documentos publicadossob esta Licença, e substituir as cópias individuais desta Licença nos vários documentos comuma única cópia incluida na coletânea, desde que você siga as regras desta Licença para cópiaexata de cada um dos Documentos em todos os outros aspectos.

Você pode extrair um único documento de tal coletânea, e distribuí-lo individualmente sobesta Licença, desde que você insira uma cópia desta Licença no documento extraído, e siga estaLicença em todos os outros aspectos relacionados à cópia exata daquele documento.

AGREGAÇÃO COM TRABALHOS INDEPENDENTES

Uma compilação do Documento ou derivados dele com outros trabalhos ou documentos se-parados e independentes, em um volume ou mídia de distribuição, não conta como uma Ver-são Modificada do Documento, desde que nenhum copyright de compilação seja reclamado pelacompilação. Tal compilação é chamada um "agregado", e esta Licença não se aplica aos outrostrabalhos auto-contidos compilados junto com o Documento, só por conta de terem sido assimcompilados, e eles não são trabalhos derivados do Documento.

Se o requerido para o Texto de Capa na seção 3 for aplicável a essas cópias do Documento,então, se o Documento constituir menos de um quarto de todo o agregado, os Textos de Capado Documento podem ser colocados em capas adjacentes ao Documento dentro do agregado.Senão eles precisarão aparecer nas capas de todo o agregado.

TRADUÇÃO

Tradução é considerada como um tipo de modificação, então você pode distribuir traduçõesdo Documento sob os termos da seção 4. A substituição de Seções Invariantes por traduçõesrequer uma permissão especial dos detentores do copyright das mesmas, mas você pode incluirtraduções de algumas ou de todas as Seções Invariantes em adição às versões orignais dessasSeções Invariantes. Você pode incluir uma tradução desta Licença desde que você também in-clua a versão original em Inglês desta Licença. No caso de discordância entre a tradução e a

16

Page 18: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

versão original em Inglês desta Licença, a versão original em Inglês prevalecerá.

TÉRMINO

Você não pode copiar, modificar, sublicenciar, ou distribuir o Documento exceto como expres-samente especificado sob esta Licença. Qualquer outra tentativa de copiar, modificar, sublicen-ciar, ou distribuir o Documento é nula, e resultará automaticamente no término de seus direitossob esta Licença. Entretanto, terceiros que tenham recebido cópias, ou direitos de você sob estaLicença não terão suas licenças terminadas, tanto quanto esses terceiros permaneçam em totalacordo com esta Licença.

REVISÕES FUTURAS DESTA LICENÇA

A Free Software Foundation pode publicar novas versões revisadas da Licença de Documen-tação Livre GNU de tempos em tempos. Tais novas versões serão similares em espirito à versãopresente, mas podem diferir em detalhes ao abordarem novos porblemas e preocupações. Vejahttp://www.gnu.org/copyleft/.

A cada versão da Licença é dado um número de versão distinto. Se o Documento especificarque uma versão particular desta Licença "ou qualquer versão posterior"se aplica ao mesmo, vocêtem a opção de seguir os termos e condições daquela versão específica, ou de qualquer versãoposterior que tenha sido publicada (não como rascunho) pela Free Software Foundation. Se oDocumento não especificar um número de Versão desta Licença, você pode escolher qualquerversão já publicada (não como rascunho) pela Free Software Foundation.

ADENDO: Como usar esta Licença para seus documentos

Para usar esta Licença num documento que você escreveu, inclua uma cópia desta Licençano documento e ponha as seguintes notas de copyright e licenças logo após a página de título:

Copyright (c) ANO SEU NOME.É dada permissão para copiar, distribuir e/ou modificar este documento sob os termos da Licençade Documentação Livre GNU, Versão 1.1 ou qualquer versão posterior publicada pela Free Soft-ware Foundation; com as Seções Invariantes sendo LISTE SEUS TÍTULOS, com os Textos daCapa da Frente sendo LISTE, e com os Textos da Quarta-Capa sendo LISTE. Uma cópia da li-cença está inclusa na seção entitulada "Licença de Documentação Livre GNU".

Se você não tiver nenhuma Seção Invariante, escreva "sem Seções Invariantes"ao invés dedizer quais são invariantes. Se você não tiver Textos de Capa da Frente, escreva "sem Textos deCapa da Frente"ao invés de "com os Textos de Capa da Frente sendo LISTE"; o mesmo para osTextos da Quarta Capa.

Se o seu documento contiver exemplos não triviais de código de programas, nós recomenda-mos a publicação desses exemplos em paralelo sob a sua escolha de licença de software livre,

17

Page 19: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

tal como a GNU General Public License, para permitir o seu uso em software livre.

18

Page 20: CDTC - Javascript

Parte IV

Javascript

19

Page 21: CDTC - Javascript

Capítulo 1

Sobre Javascript

Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga deprocessamento é o navegador) utilizada para criar pequenos programas que realizam ações empáginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem dolado cliente mais utilizada.

Com Javascript podemos criar páginas mais "inteligentes", inserindo efeitos especiais e recur-sos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de umformulário está correto, dentre outras interatividades com o usuário.

20

Page 22: CDTC - Javascript

Capítulo 2

Plano de ensino

2.1 Objetivo

Capacitar o usuário para o uso autônomo das funcionalidades do Javascript na programaçãoweb.

2.2 Público Alvo

Programadores que desejam desenvolver websites que possuam pequenos programas querealizam ações em suas páginas web.

2.3 Pré-requisitos

Os usuários deverão ter conhecimentos básicos em HTML.

2.4 Descrição

O curso será realizado na modalidade Educação a Distância e utilizará a Plataforma Moodlecomo ferramenta de aprendizagem. Ele será dividido em tópicos e cada um deles é compostopor um conjunto de atividades (lições, fóruns, glossários, questionários e outros) que deverão serexecutadas de acordo com as instruções fornecidas. O material didático está disponível on-linede acordo com as datas pré-estabelecidas em cada tópico.

Todo o material está no formato de lições, e estará disponível ao longo do curso. As liçõespoderão ser acessadas quantas vezes forem necessárias. Aconselhamos a leitura de "Ambien-tação do Moodle", para que você conheça o produto de Ensino a Distância, evitando dificuldadesadvindas do "desconhecimento"sobre o mesmo.

Ao final de cada semana do curso será disponibilizada a prova referente ao módulo estudadoanteriormente que também conterá perguntas sobre os textos indicados. Utilize o material decada semana e os exemplos disponibilizados para se preparar para prova.

Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deve serdisponibilizada no fórum ou enviada por e-mail. Diariamente os monitores darão respostas eesclarecimentos.

21

Page 23: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

2.5 Metodologia

O curso está dividido da seguinte maneira:

2.6 Cronograma

• Lição 1 - Introdução e História;

• Lição 2 - Sintaxe e Variáveis;

• Lição 3 - Strings e Mensagens;

• Lição 4 - Objetos e Arrays;

• Lição 5 - Operadores e Comandos;

• Lição 6 - Eventos e Outros Comandos;

• Lição 7 - Controle de Tipos e Funções

• Lição 8 - Classes: Math, Number e Boolean;

• Lição 9 - Date e Checkbox;

• Lição 10 - Ocultando Scripts;

• Lição 11 - Exemplos;

• Avaliação de aprendizagem

• Avaliação do curso

As lições contém o contéudo principal. Elas poderão ser acessadas quantas vezes forem neces-sárias, desde que esteja dentro da semana programada. Ao final de uma lição, você receberáuma nota de acordo com o seu desempenho. Responda com atenção às perguntas de cada lição,pois elas serão consideradas na sua nota final. Caso sua nota numa determinada lição for menordo que 6.0, sugerimos que você faça novamente esta lição.Ao final do curso será disponibilizada a avaliação referente ao curso. Tanto as notas das liçõesquanto a da avaliação serão consideradas para a nota final. Todos os módulos ficarão visíveispara que possam ser consultados durante a avaliação final.Aconselhamos a leitura da "Ambientação do Moodle"para que você conheça a plataforma de En-sino a Distância, evitando dificuldades advindas do "desconhecimento"sobre a mesma.Os instrutores estarão a sua disposição ao longo de todo curso. Qualquer dúvida deverá serenviada no fórum. Diariamente os monitores darão respostas e esclarecimentos.

2.7 Programa

O curso de Javascript oferecerá o seguinte conteúdo:

• Introdução e História;

• Sintaxe e Variáveis;

22

Page 24: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

• Strings e Mensagens;

• Objetos e Arrays;

• Operadores e Comandos;

• Eventos e Outros Comandos;

• Controle de Tipos e Funções

• Classes: Math, Number e Boolean;

• Date e Checkbox;

• Ocultando Scripts;

• Exemplos;

2.8 Avaliação

Toda a avaliação será feita on-line.Aspectos a serem considerados na avaliação:

• Iniciativa e autonomia no processo de aprendizagem e de produção de conhecimento;

• Capacidade de pesquisa e abordagem criativa na solução dos problemas apresentados.

Instrumentos de avaliação:

• Participação ativa nas atividades programadas.

• Avaliação ao final do curso.

• O participante fará várias avaliações referente ao conteúdo do curso. Para a aprovação eobtenção do certificado o participante deverá obter nota final maior ou igual a 6.0 de acordocom a fórmula abaixo:

• Nota Final = ((ML x 7) + (AF x 3)) / 10 = Média aritmética das lições

• AF = Avaliações

2.9 Bibliografia

23

Page 25: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

2.10 Páginas Recomendadas

Para maiores informações 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

Page 26: CDTC - Javascript

Capítulo 3

Início do Javascript

No começo da Internet foram criados vários serviços para realizar muitos tipos de comunica-ções, como correio eletrônico, chats, buscas, etc. Mas era demandada uma linguagem que per-mitisse apresentar informações junto à formatação de estilos que funcionasse como um sistemade página com links. À curto prazo, o HTML foi a linguagem que atendeu à essa necessidade.Porém, logo percebeu-se que ele havia se tornado obsoleto para definir as novas funcionalidades,não era suficiente para fazer tudo o que era possível nas páginas web.

Entre as primeiras tecnologias que surgiram a partir daí podemos destacar o Java. Surgiu,basicamente, através do uso de Applets, que são pequenos programas que se incorporam àspáginas web e que realizam as ações relacionadas aos programas de fins gerais. Após compati-bilizar seus navegadores com a mais nova criação, os applets, a Netscape passou a desenvolveruma linguagem que fosse mais simples de utilizar que o Java. Passou a desenvolver então oo "primeiro Javascript"que levou o nome de LiveScript. Porém, foi um nome que não perduroupor muito tempo já que, antes do lançamento de sua primeira versão, uma parceria com a SunMicrosystems permitiu o desenvolvimento conjunto dessa tecnologia que passou a ser conhecidacomo "Javascript".

3.1 O que é Javascript?

Javascript é uma linguagem que roda no lado cliente (já que quem suporta sua carga deprocessamento é o navegador) utilizada para criar pequenos programas que realizam ações empáginas web. Como é compatível com quase todos os navegadores modernos, é a linguagem dolado cliente mais utilizada.

Com Javascript podemos criar páginas mais "inteligentes", inserindo efeitos especiais e recur-sos como: botões que mudam ao passar o mouse em cima, verificar se o preenchimento de umformulário está correto, dentre outras interatividades com o usuário. Como já foi dito, o responsá-vel por interpretar e conseqüentemente executar essas instruções Javascript é o browser, que é,portanto, o maior (para não dizer o único) com que esta linguagem conta.

Algumas linguagens de programação para web são muito complexas, mas as linguagens descript são geralmente simples por possuirem sintaxes fáceis de entender, além de permitirem acombinação de script com HTML para deixar as páginas Web interativas. Outra facilidade doJavascript é que ela é uma linguagem interpretada e não compilada. O que acontece é que

25

Page 27: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

navegador executa cada linha de script como as recebe. Por este motivo é importante saberque a sintaxe Javascript é case sensitive(1), sendo necessária atenção na escrita dos comandos.Caso contrário o Javascript interpretará, por exemplo, o que seria um comando como sendo onome de uma variável. Coisas como essas são o que diferem Javascript de outras linguagensde programação em que os códigos devem ser compilados ou traduzidos em código de máquinaantes de serem executados.

(1) sensível ao tipo de letra

3.2 Diferenças Básicas entre Java e Javascript

Uma das maiores confusões que acontecem quando se fala em Javascript é a inevitável com-paração com a linguagem de programação "Java". É importante frisar, contudo, que JavascriptNÃO TEM NADA A VER COM JAVA. Estas são duas técnicas diferentes de programação e por-tanto não guardam entre si mais relação que a sintaxe e poucas coisas mais. Java é uma lingua-gem de programação. Javascript é basicamente uma linguagem de hiper-texto. É útil pois muitasvezes precisa-se, por exemplo, utilizar algum recurso que torne a página mais dinâmica e maisbonita, sem ter de se incomodar com a programação. É útil também pois é bastante simples e foiprojetada fazer as coisas com rapidez.

Listo aqui algumas diferenças entre Javascript e Java:

• 1) A programação Java requer um kit de desenvolvimento e um compilador. Entretanto,Javascript não é uma linguagem que necessite que seus programas se compilem. Estessão interpretados pelo browser quando ele lê a página.

• 2) Java é uma linguagem de programação fortemente tipada, ou seja, ao declarar umavariável é necessária a indicação seu tipo e, então, não é permitida a mudança de seu tipoautomaticamente. Por sua vez, Javascript não tem esta característica, e pode-se alocarem uma variável a informação que se deseja, independentemente de seu tipo. Ademais,pode-se mudar o tipo de informação de uma variável quando for necessário.

• 3) Java é muito mais potente que Javascript. Isto acontece pois Java é uma linguagem depropósito geral, com a qual pode-se fazer aplicações para variadas funções. Javascript,entretanto, permite somente a escrita de programas qe sejam posteriormente executadosem páginas web.

• 4) Miniaplicativos Java são compilados em arquivos de classe para serem utilizados emuma página da web. JavaScript, porém, utiliza comandos simples de texto, que podem serincluídos no próprio documento de HTML.

• 5) Miniaplicativos Java geralmente são exibidos em uma caixa dentro do documento deWeb. Já scripts de JavaScript podem afetar qualquer parte do próprio documento da Web.

Apesar de diferentes e úteis para diferentes coisas, as duas linguagens podem até seremutilizadas em conjunto para combinar suas vantagens.

OBS.: Como já citado anteriormente, Javascript é escrito e incluído em um documento HTML.Por essa razão, este curso presume conhecimentos ao menos básicos na linguagem de formata-ção HTML.

26

Page 28: CDTC - Javascript

Capítulo 4

Sintaxe e Variáveis

4.1 Necessário para programar em Javascript

Para programar em Javascript necessitamos basicamente o mesmo que para programar pá-ginas web com HTML. Um editor de textos e um navegador compatível com Javascript. Porém,apesar de um editor de texto simples ser suficiente para começar, talvez seja muito útil contarcom outros programas que nos oferecem melhores prestações na hora de escrever as linhas decódigo. Estes editores avançados têm algumas vantagens, como colorir os códigos de nossosscripts, nos permitem trabalhar com vários documentos simultaneamente, têm ajudas, etc. Ficaa critério de cada um a utilização de seu editor. Iniciando

Em primeiro lugar devemos ter em mente que o código Javascript deve ser inserido dentro docódigo HTML. Isto, na prática, faz que se misturem na página as duas linguagens de programa-ção. Para isso, é necessário o uso de delimitadores do código de script, que no caso é:

<script> código javascript </script>

Em uma mesma página podemos introduzir vários scripts, cada um que poderia se introduzirdentro das etiquetas <script> distintas. Podemos também escrever Javascript dentro de determi-nados atributos da página, como o atributo onclick. Estes atributos estão relacionados com asações do usuário e são chamados de manejadores de eventos. Vamos ver mais detalhadamenteessas duas maneiras de escrever scripts:

• -Execução direta de scritps

Neste caso se incluem as instruções dentro da etiqueta <script>, tal como comentamosanteriormente. Nele, o browser vai interpretando as linhas de código e vai executando umaapós a outra.

• -Resposta a um evento

Eventos são ações que o usuário realiza. O Javascript é preparado para apahar eventos dousuário e gerar ações de resposta. Desta maneira são realizados programas interativos, jáque controlamos os movimentos do usuário e respondemos a ele. Veremos mais adianteno curso este tipo de execução em profundidade e os tipos de eventos que existem.

27

Page 29: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

4.2 Sintaxe Javascript

Javascript tem uma sintaxe muito parecida a de Java por estar baseado nele. Também émuito parecida à da linguagem C, de modo que se você conhece alguma destas duas linguagenspoderá manejar com facilidade com o código.

Case Sensitive

Como já foi dito, Javascript é uma linguagem case sensitive, ou seja, deve-se respeitar asmaiúsculas e as minúsculas. Se nos equivocamos ao utilizá-las o navegador responderá comuma mensagem de erro de sintaxe. Por convenção os nomes se escrevem em minúsculas, salvoque se utilize um nome com mais de uma palavra, pois nesse caso se escreverão com maiúsculasas iniciais das palavras seguintes à primeira.

OBS.: Podemos utilizar maiúsculas nas iniciais das primeiras palavras em alguns casos comoos nomes das classes, apesar de que já veremos mais adiante quais são estes casos.

Separação de Instruções

As duas maneiras que existem de separar instruções em Javascript são a separação porponto-e-vírgula, no caso em que as duas instruções se encontram na mesma linha, e a separaçãopor quebra-de-linha, onde não precisamos usar o ponto-e-vírgula se separarmos as instruçõesem mais de uma linha.

Contudo é interessante que nos acostumemos a utilizar sempre o ponto-e-vírgula para sepa-rar as sentenças já que a maioria das linguagens hoje em dia têm essa regra como obrigatória.Dessa maneira estaremos habituados a realizar uma sintaxe parecida à da maioria da das pro-gramações avançadas.

4.3 Variáveis

Uma variável é um espaço em memória onde se armazena um dado, um espaço onde po-demos salvar qualquer tipo de informação que necessitemos para realizar as ações de nossosprogramas. Em JavaScript, variáveis dinâmicas podem ser criadas e inicializadas sem declara-ções formais. Existem dois tipos de abrangência para as variáveis:

Global - Declaradas/criadas fora de uma função. As variáveis globais podem ser acessadasem qualquer parte do programa.

Exemplo:

<script>variávelGlobal</script>

Local - Declaradas/criadas dentro de uma função. Só podem ser utilizadas dentro da funçãoonde foram criadas e precisam ser definidas com a instrução Var.

Exemplo:

28

Page 30: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

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

OBS: Podem existir variáveis globais com o mesmo nome de variáveis locais, porém, estaprática não é aconselhável.

Com relação à nomenclatura, as variáveis devem começar por uma letra ou pelo caractersublinhado ’_’, o restante da definição do nome pode conter qualquer letra ou número. Deve-seter em mente também que na atribuição de valores a variáveis deve ser usado um sinal de igualúnico.

Exemplos de declarações:

Nome1="José"

Valor=2

_1contador=0

OBS.: devemos evitar também utilizar nomes reservados como variáveis. Por exemplo: nãopoderemos nomear nossa variável com nomes como return ou for, já que são utilizadas paraestruturas da própria linguagem.

Existem 3 tipos de variáveis. São elas:

1) Numéricas: logicamente armazenam números.Ao contrário do que ocorre na maioria das linguagens mais conhecidas, em Javascript só

existe um tipo de dado numérico. Todos os números são, portanto, do tipo numérico, independen-temente da precisão que tenham ou se são números reais ou inteiros. Com Javascript tambémpodemos escrever números em outras bases. As bases são sistemas de numeração que utili-zam mais ou menos dígitos para escrever os números. Existem três bases com as que podemostrabalhar:

• Base 10, é o sistema que utilizamos habitualmente, o sistema decimal. Entende-se quequalquer número, por padrão, está escrito em sistema decimal.

• Base 8, também chamado sistema octal, que utiliza dígitos do 0 ao 7. Para escrever umnúmero em octal, simplesmente escreve-se este número precedido de um 0, por exemplo036.

• Base 16 ou sistema hexadecimal, é o sistema de numeração que utiliza 16 dígitos, os com-preendidos entre o 0 e o 9 e as letras da A à F, para os dígitos que faltam. Para escrever umnúmero em hexadecimal devemos escrevê-lo precedido de um zero e um xis, por exemplo,0x4EA.

2) Booleanas: armazenam valores lógicos (TRUE ou FALSE)

3) Strings: armazenam seqüencia de caracteres.

29

Page 31: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

As strings podem ser delimitadas por aspas simples ou duplas, a única restrição é que se adelimitação começar com as aspas simples, deve terminar com aspas simples, da mesma formapara as aspas duplas. Caso seja necessário a utilização destes caracteres como parte da string,utilize precedendo "ou ’. Como por exemplo : alert ("Cuidado com o uso de öu ém uma string").

30

Page 32: CDTC - Javascript

Capítulo 5

Strings e Mensagens

5.1 As Strings

Podemos incluir dentro de uma string alguns caracteres especiais, a saber:

CONTROLES ESPECIAIS SIGNIFICADO\b retroceder espaço\f avance página\n passa à próxima linha\r Enter\t posiciona o texto na próxima tabulação// Linha de comentário/*....*/ Delimitadores para inserir um texto com mais

de uma linha como comentário.

Exemplo de uso:

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

que retorna:

isto é umafrase

Concatenação: 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

Page 33: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

o que retorna:

Isso é um teste!É um teste mesmo

Métodos de String

Todos os exemplos abaixo baseiam-se na variável texto = "Aldeia Numaboa".

Método FunçãocharAt(x) Retorna o caracter da posição x: texto.charAt(2) retorna d

(lembre-se de que a numeração dos caracteres começa com zero).indexOf(substring) Retorna a posição da primeira substring dentro da

string: texto.indexOf("boa") retorna 11.lastIndexOf(substring) Retorna a posição da última substring dentro da

string: texto.lastIndexOf("a") retorna 13.substring(início,fim) Retorna a substring entre a posição início e fim:

texto.substring(2,6) retorna deia.toLowerCase() Retorna a string em minúsculas:

texto.toLowerCase() retorna aldeia numaboa.toUpperCase() Retorna a string em maiúsculas:

texto.toUpperCase() retorna ALDEIA NUMABOA.charCodeAt(nro) Retorna o código ASCII do caractere na posição nro:

texto.charCodeAt(0) retorna 65, o valor ASCII do caracter A.length Retorna o número de caractere da string: texto.length retorna 14.

.outros métodos de string equivalentes:

Método Funçãoanchor Cria uma âncora na página HTML, que se refere a stringObject.

Equivale à tag <a name="nome da ancora»stringObject</a>.big Mostra stringObject com tamanho grande. Equivale à tag <big></big>.blink Mostra stringObject piscando na tela. Equivale à tag <blink></blink>.bold Mostra stringObject em negrito. Equivale à tag <b></b>.fixed Mostra stringObject com fonte de tamanho fixo. Equivale a tag <tt></tt>.fontcolor Determina a cor que stringObject será mostrada. Equivale à

tag <font color=#RGB></font>.fontsize Mostra stringObject no tamanho definido por "x". Equivale à

tag <font size="tamanho»</font>.italics Mostra stringObject no formato itálico. Equivale à tag <i></i>.link Cria um link, onde stringObject é o texto que aparece em destaque.small Mostra stringObject em fonte pequena. Equivale à tag <small></small>.strike Mostra stringObject com um traço no meio. Equivale à tag <strike></strike>.sub Mostra stringObject no formato subscript. Equivale à tag <sub></sub>.sup Mostra stringObject no formato sobrescrito. Equivale à tag <sup> </sup>.

Alguns exemplos de uso dos métodos:

32

Page 34: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 21document.write(frase.charAt(5)); //retorna 'I'

</script>

O JavaScript reconhece ainda um outro tipo de conteúdo em variáveis, que é o NULL. Ná prá-tica isso é utilizado para a manipulação de variáveis não inicializadas sem que ocorra um erro noseu programa. Quando uma variável possui o valor NULL, significa dizer que ela possui um valordesconhecido ou nulo, o null não é igual a nada, nem mesmo ao próprio null. A representaçãoliteral para NULL é a string ’null’ sem os delimitadores. Quando referenciado por uma função oucomando de tela, será assim que NULL será representado.

OBS.: percebe-se então que NULL é uma palavra reservada.

Conversão entre os tipos de dados.

Em algumas situações, podemos terminar com uma string contendo um número e precisarconvertê-la em uma variável numérica regular. O JavaScript possui funções específicas paraisso:

• parseInt(): converte uma string em um numero inteiro.

• parseFloat() : converte uma string em um numero de ponto flutuante.

Exemplo:

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

No caso do exemplo anterior o valor armazenado em varnum será 30, pois a parte não-numérica é desconsiderada na passagem para numérico. Se um número válido não for localizado,a expressão retorna a string NaN (Not A Number).

5.2 Mensagens

Existem três maneiras de comunicação com o usuário no Javascript. Eis aqui cada uma e suaexplicação:

• alert: é usado para imprimir informação ao usuário por meio de uma caixa de alerta nobrowser.

Exemplo:

<script> alert("Certifique-se de que as informações estão corretas") </Script>

33

Page 35: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

• confirm: mensagem que retorna caixa de diálogo com confirmação de OK ou Cancelar.Retorna um booleano. No caso, é verdadeiro se o usuário clicar em OK.

Exemplo:

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

• prompt: recebe informação do usuário via caixa de texto Input. Será explicada melhor aseguir.

5.3 Mensagens que rolam na barra de status

Com o conhecimento adquirido em strings, podemos agora mostrar como fazer mensagensrolarem na barra de status do browser.

Inicialize, no script, a variável string a ser rolada na tela:

frase="Olá, sejam bem vindos!"

A seguir, defina uma segunda string chamada esp. Essa string será exibida entre as cópiasda mensagem para tornar claro onde uma termina e a outra começa. Por exemplo :

esp="... ...";

Serão necessárias outras variáveis além das anteriores:

.uma variável numérica para armazenar a posição atual da string. Chame-a de pós e inicialize-a com 0:

pos=0;

A rolagem do texto será feita por uma função que chamaremos de rolamensagem:

1: function rolamensagem(){2: window.status=frase.subtring(pos,frase.legth)+esp+frase.substring(0,pos);3: pos++;4: if(pos>frase.length)5: pos =0;6: windows.setTimeout("rolamensagem()", 500);7: }

34

Page 36: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Na linha 2, temos uma instrução que exibe uma string na linha de status (pelo uso de win-dow.status). A string é composta da parte de ’frase’ de ’pos’ até o fim, seguida pelo espaço. Éseguido, então, pela parte de ’frase’ desde o início de ’pos’. Incrementamos então a variável ’pos’.Após isto temos uma instrução que verifica se ’pos’ é maior que o comprimento de ’frase’. Se for,redefine-o para 0. Temos por último uma instrução que utiliza o método ’window.setTimeout’, quepermite configurar uma instrução a ser executada depois de um período de tempo. Nesse caso,execute a função rolamensagem depois do 0,5 segundo.

Vemos abaixo como ficaria isto no código 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 atenção à linha de status rolando na página!</body></html>

5.4 Armazenando dados do usuário em variáveis

E certas ocasiões é necessário o armazenamento dos dados inseridos pelo usuário para usona própria página. Para isso, utilizaremos a função ’prompt’. Ela é semelhante à função ’alert’mas é usada para dados de entrada do usuário. Por exemplo:

titulo=prompt("digite o título da pagina");nome=prompt("digite seu nome:");

a partir disso podemos utilizar o conteúdo das variáveis para personalizar o documento HTML.

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

35

Page 37: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Para completar esse script, adicione as tags < SCRIPT> normais e uma estrutura HTML. Oexemplo abaixo mostra o documento final de HTML. Após isso, só carregar o documento em umbrowser e ver o resultado.

<html><head><title> construcao de pagina </title></head><body><script>nome=prompt("digite seu nome:");titulo=prompt("digite o título da pagina");document.write("<h1>"+ titulo+"</h1>");document.write("<H2> Criada por"+nome+"</H2>");</script><p> Página em construção.</p></body></html>

36

Page 38: CDTC - Javascript

Capítulo 6

Objetos e Arrays

6.1 Objetos

6.1.1 Manipulando Arrays

Na maioria das linguagens, existem estruturas que permitem salvar informações de uma ma-neira mais complexa que simples variáveis. Uma estrutura típica são os vetores (arrays). Umarray nada mais é uma estrutura que permite o armazenamento de vários valores ao invés desomente um como acontece com as variáveis comuns. O acesso a cada um desses valores éfeito de maneira independente, através de um índice. Em Javascript, trabalhar com arrays nadamais é que trabalhar com o uso de objetos.

Para trabalharmos com arrays primeiramente devemos criá-lo, utilizando um objeto Javascript.Existem várias maneiras diferentes que podemos utilizar para criar arrays. No caso seguinte, oprimeiro comando cria um array sem nenhum conteúdo. Já o segundo comando cria um arraycom um tamanho pré-definido de 6 campos:

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

OBS: na declaração de um array é necessário que a palavra Array tenha a inicial maiúscula.

Pode-se introduzir qualquer dado, tanto se indicamos ou não o número de campos do array.A criação de campos é dinâmica e se produz ao mesmo tempo, que os scripts se executam. Aseguir mostramos como intoduzir dados num vetor.

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

Para ver na tela os dados armazenados em casa posição do array podemos usar um loop fordesta maneira:

for (i=0;i<3;i++){document.write("Posição " + i + " do vetor: " + vetor[i])document.write("<br>")

}

37

Page 39: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Dividindo uma string

O Javascript inclui um método de string chamado split, que divide uma string em suas partescomponentes. Para utilizar esse método, especifique a string a dividir e um caractere para dividiras partes :

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

Neste caso, a string Frase mantém o ’isto é um vetor’. O método split na Segunda instruçãodivide a string nome em cada espaço, resultado em quatro strings. Estas são armazenadasem um array de strings chamado Vetor. Depois que as instruções de exemplo executam, oselementos de partes contêm o seguinte :

vetor[0]="isto";vetor[1]="é";vetor[2]="um";vetor[3]="vetor";

O Javascript também inclui um método de array, join, que desempenha a função oposta. Estainstrução remonta o array Vetor em uma string:

JuntaVetor=Vetor.join(" ");

O valor nos parenteses especifica um caractere para separar as partes do array. Nesse caso,um espaço é utilizado, resultando na string final ’isto é um vetor’. Se você não especificar umcaractere de separação, as vírgulas são utilizadas por padrão.

6.2 Mais sobre vetores

No caso do Javascript podemos colocar num vetor tipos de dados diferentes para cada posi-ção:

vetor[0]="ola";vetor[1]=15;vetor[2]=false;vetor[3]=0.547;

Para outros propósitos, podemos trabalhar com vetores de uma maneira diferente. Podemosprimeiramente criar uma função com vários parâmetros desta maneira:

Function Registro(nome,endereco,telefone){this.nome=nome;this.endereco=endereco;this.telefone=telefone;}

OBS: o This especifica o objeto atual como sendo fonte dos valores passados à função. Alémdisso, para acessar a uma propriedade de um objeto há que utilizar o operador ponto.

A partir daí somente criamos o objeto:

38

Page 40: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 posiçõesusando o atributo length, que retorna o número de campos do array:

Function Vetor(x){this.length=xfor (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 longitudedo array, extraída de sua propriedade length. Chamaríamos a função assim:

MesDoAno=Vetor(12);

E incluiríamos os dados assim:

MesDoAno[0]='Janeiro'MesDoAno[1]='Fevereiro'MesDoAno[2]='Março'...

Ordenando um array

O Javascript também inclui o método sort para arrays, que retorna uma versão classificada doarray (alfabeticamente ou numericamente). Por exemplo, as seguintes instruções inicializam umarray de quatro nomes e o classifica :

alunos[0]="Fernanda Gomes da Silveira";alunos[1]="Leticia Vieira Santos";alunos[2]="Felipe Silva";alunos[3]="Marcos Cardoso";

ordenados=alunos.sort();

A última instrução atribui o array ’ordenados’ à versão classificada de alunos utilizando ométodo join.

39

Page 41: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

6.3 Arrays multidimensionais

Os arrays multidimensionais são estruturas de dados que armazenam os valores em mais deuma dimensão. Até aqui vimos arrays simples nos quais seus valores são armazenados em umadimensão, o que requeria a utilização de apenas um índice para acessar suas posições.

Em Javascript não existe um objeto array-multidimensinal particularmente definido. Parautilizá-los poderemos, porém, definir arrays onde, em cada uma de suas posições haverá ou-tro array. No exemplo seguinte criamos um array multidimensional simplesmente juntando os doismétodos 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("João","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="João";Alunos[2].endereco="Rua tal3";Alunos[2].telefone=null;

...etc.

.Outro exemplo de criação de arrays de mais de uma dimensão é:

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

Page 42: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

var temperaturas_cidades = new Array(3);PopulacaoPais[0] = PopulacaoCidade0;PopulacaoPais[1] = PopulacaoCidade1;PopulacaoPais[2] = PopulacaoCidade2;

Também é interessante ver como se faz o percurso por um array multidimensional:

for (i=0;i<PopulacaoPais.length;i++){document.write("País " + i);for (j=0;j<PopulacaoPais[i].length;j++){document.write(PopulacaoPais[i][j]);}}

Neste caso, com o primeiro loop, percorremos a primeira dimensão do array e utilizamos avariável i para levar a conta a posição atual. Para cada iteração, imprimimos o país da vez e oprograma entra em outro loop. Neste, imprimimos, para cada país, o número relativo a cada novoíndice j.

41

Page 43: CDTC - Javascript

Capítulo 7

Operadores

7.1 Lógicos

Os principais operadores lógicos a serem utilizados em comandos condicionais são:

Operadores Lógicos Significado== Igual!= Diferente> Maior>= Maior ou Igual< Menor<= Menor ou Igual&& E|| OU

Matemáticos

Os operadores Matemáticos a serem utilizados em cálculos, referências de indexadores emanuseio de strings são :

Operadores de Atribuição Significado= Atribuição+= adição de valores e concatenação de strings.

x+=5 // é o mesmo que: x=x+5-= subtração de valores.

x-=5 // é o mesmo que: x=x-5*= multiplicação de valores.

x*=5 // é o mesmo que: x=x*5/= divisão de valores.

x/=5 // é o mesmo que: x=x/5%= obtém o resto de uma divisão.

x%=5 // é o mesmo que: x=x%5

42

Page 44: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Operadores a nível de bit

Estes são muito pouco usados e é possível que você nunca chegue a utilizá-los. Seu usose limita a efetuar operações com zeros e uns. Tudo com o que trabalha um computador sãozeros e uns, apesar de utilizarmos números e letras para nossas variáveis. Na verdade o queacontece é que estes valores estão escritos internamente em forma de zeros e uns. Em algunscasos, pode ser necessário realizar operações tratando as variáveis como zeros e uns e, paraisso, utilizaremos estes operandos. Aqui você poderá ver estes operadores por acaso algum dialhe fizerrem falta.

Operador Operação» desloca os bits para a direita« desloca os bits para a esquerda& define uma condição AND numa máscara de bits| define uma condição OR numa máscara de bitsˆ define uma condição XOR numa máscara de bits˜ operação NOT bit a bit (troca todos os 1 e 0)

7.2 Operadores Especiais

Operador Operaçãotypeof Retorna o tipo de variável. Os valores de retorno são boolean,

string, number, function, object e undefined. Por exemplo a = 5;alert( typeof a ) retorna number.

void O operador void é utilizado para realizar uma operação mas não sedeseja um valor de retorno. Por exemplo, void( nro = nro + 2 )realiza a operação, mas nro resulta em undefined.

delete Operador para deletar objetos ou propriedades de objetos.O operador não se aplica aos objetos (e suas propriedades) pre-definidos.

7.3 Precedência de Operadores

A avaliação da precedêndia dos operadores é uma tarefa simples mas que pode se tornarcomplicada à medida que o número deles é grande. Por isso é necessário que mostremos aregra de precedência dos operadores em Javascript. A principio os operadores são avaliados daesquerda para a direita. Mas existem regras adicionais pelas quais determinados operadores seavaliam antes que os outros. A grande maioria são comuns a outra linguagens de programação.

() [] . Parênteses, colchetes e o operador ponto que serve para os objetos! - ++ -- negação, negativo e incrementos* / % Multiplicação, divisão e módulo+- Soma e diferença<< >> >>> Mudanças a nível de bit< <= > >= Operadores condicionais== != Operadores condicionais de igualdade e desigualdade& ^ | Lógicos a nível de bit&& || Lógicos boleanos

43

Page 45: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

= += -= *= /= %= <<= >>= >>>= &= ^= != Atribuição

Exemplo de avaliação dos operadores numa sentença:

4 * 2 + 1 - 18 / 3 % 5

Portanto, esta avaliação 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 modificar o fluxo de execução deum programa. Isto é, contém comandos que condicionam a execução de uma certa tarefa à vera-cidade ou não de uma determinada condição, ou enquanto determinada condição for verdadeira.

São elas:

Comandos IF... ELSE

Um bloco if é formado primeiramente com o próprio ’if’ e seguido por um teste booleano euma instrução ou um bloco de instruções que precisam ser executadas caso o teste booleanoseja verdadeiro. O ’else’ pode ser usado caso o programador queira que o programa execute obloco de instruções que o segue caso o teste booleano do ’if’ não seja verdadeiro.

Ex:

if (condição){ ação para condição satisfeita }else{ ação para condição não satisfeita }

Exemplo :

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

Move condicional

Existe um operador que ainda não vimos e é uma forma mais esquemática de realizar algunsIF simples. É um claro exemplo de economia de linhas e caracteres ao escrever os scripts. Elenão só realiza uma comparação de valores, como também atribui um valor a uma variável. O quefaz é avaliar a condição (colocada entre parênteses) e se é positiva atribui o valor1 à variável eno caso contrário lhe atribui o valor 2. Sua forma básica é, portanto:

44

Page 46: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

variável = ( (condição) ? valor1 : valor2)

Exemplos:

NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino")

momento = (hora_atual < 12) ? "Antes de meio-dia" : "Depois de meio-dia"

Switch

É uma expressão que se utiliza quando temos múltiplas possibilidades como resultado daavaliação de uma sentença. Sua sintaxe é a seguinte:

switch (expressão) {case valor1:

Sentenças a executar se a expressão tem como valor a valor1break

case valor2:Sentenças a executar se a expressão tem como valor a valor2break

case valor3:Sentenças a executar se a expressão tem como valor a valor3break

default:Sentenças a executar se o valor não é nenhum dos anteriores

}

OBS.: A palavra break é opcional, mas se não a colocamos a partir de que se encontrecoincidência com um valor se executarão todas as sentenças relacionadas com este e todas asseguintes. Isto é, se não houvesse expressão que fosse igual a valor1, se executariam sentençasrelacionadas com valor1 e também as relacionadas com valor2, valor3 e default.

OBS2.: sempre é bom incluir um default, já que se todas as condições anteriores forem falsas,o switch entrará no default. Isso mostra a sua importância.

Exemplo:

farol = "verde"switch (farol) {case "vermelho":

alert("Pare")break

case "amarelo":alert("Atencao")break

case "verde":alert("Prossiga")break

45

Page 47: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

default:alert("Cor não existente")

}

7.5 Comando FOR

É um comando que repete uma instrução determinado número de vezes até que algumacondição seja satisfeita. Sua forma básica é:

for ( [inicialização];[condição];[incremento]){ ação }

Exemplo.

for (x = 0 ; x <= 10 ; x++){alert ("X igual a " + x)}

7.6 Comando WHILE

É um comando que repete uma instrução até que alguma condição seja verdadeira. Primeirotesta a condição e depois entra no loop. Sua forma básica é:

while (condição){ação}

Exemplo.

Var Contador=1;While ( Contador < 11 ){ document.write(Contador++) ;}

7.7 Comando DO...WHILE

É um comando utilizado geralmente quando não sabemos quantas vezes haverá de se exe-cutar o loop, assim como o loop WHILE, com a diferença de que sabemos ao certo que o looppelo menos se executará uma vez. Sua forma é:

do {sentenças do loop} while (condição)

Exemplo:

46

Page 48: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

var x = 5;do {alert("o valor de x é: " + x);x++;}while (x < 9);

47

Page 49: CDTC - Javascript

Capítulo 8

Eventos e Outros Comandos

8.1 Eventos

Eventos são ações que ocorrem durante a execução a partir das quais podemos definir ins-truções a serem realizadas pelo sistema.

São eventos possíveis em Javascript:

EVENTOS OCORRÊNCIAS

Operador Operaçãoonload Ocorre quando o documento é carregado. Ou seja, só ocorre

no BODY(corpo) do documento.onunload Ocorre quando o documento é descarregado. Também só

ocorre no BODY(corpo).onchange Ocorre quando o objeto perde o focus e houve mudança de

conteúdo. Válido para os objetos Text, Select e Textarea.onblur Ocorre quando o objeto perde o focus, independente de ter

havido mudança. Válido para os objetos Text, Select e Textarea.onfocus Ocorre quando o objeto recebe o focus. válido para os

objetos Text, Select e Textarea.onclick Ocorre quando o objeto recebe um Click do Mouse. válido para

os objetos Buton, Checkbox, Radio, Link, Reset e Submit.onmouseover Ocorre quando o ponteiro do mouse passa por sobre o objeto.

válido apenas para Link.onselect Ocorre quando o objeto é selecionado. Válido para os

objetos Text e Textarea.onsubmit Ocorre quando um botão tipo Submit recebe um click do mouse.

Válido apenas para o Form.

Como já foi dito, nem todos os scripts necessitam estar delimitados pelas tags <script>. Pode-se também 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 suamaior parte são causados por ações dos usuários

48

Page 50: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Os handlers de evento estão associados como objetos particulares do browser. Assim, espe-cificamos o handler de evento na tag que define o objeto.

Por exemplo:

O evento onMouseOver acontece quando o ponteiro do mouse move-se sobre o objeto, nocaso, texto ou imagem. Temos abaixo, portanto, uma tag típica de imagem de HTML com umhandler de evento. Note que é preciso especificar o handler de evento como um atributo da tagHTML e incluir a instrução Javascript para tratar o evento dentro das aspas:

<im src=�fig.jpg�onMouseOver=highlight()�>

8.2 Outros Comandos

Var

No Javascript nem sempre é preciso fazer a declaração de uma variável antes de usá-la, oque acontece com variáveis globais. Porém nas definições de variáveis locais o uso da palavraVar antes da variável é obrigatório. De qualquer maneira é importante ressaltar que a utilizaçãodo var, a nível de documentação é muito bem-vinda em qualquer caso.

OBS.: Não é obrigatória , no entanto, a utilização de uma instrução var para cada variáveldeclarada.Pode-se declarar várias variáveis em uma só instrução var.

A forma geral é:

Var NomeDaVariável [ = <valor> ];

Exemplo de uso:

Var contador=1;Var nome;Var end="",valor=0,linha="bla";

OBS.: no caso anterior a variável nome tem o valor NULL;

With

A instrução with elimina a necessidade de repetir todas as vezes a digitação do nome doobjeto quando há necessidade de manipular várias propriedades de um mesmo objeto.

A forma geral é:

with (<objeto>){... Instruções}

Exemplo de uso:

49

Page 51: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

with (Math){a=PI;b=Abs(x);c=E;}

Break

O comando Break tem por objetivo o cancelamento da execução do loop sem que haja veri-ficação na condição de saída do loop, passando a execução a linha imediatamente posterior aotérmino do loop. É executado somente dentro de loops For... ou While e em Switch no caso doJavascript.

Exemplo:

Neste exemplo, quando a variável x atinge o valor 5 o loop é cancelado, e é impresso o número5 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 execução do bloco de comandospassando para o início do loop. Também só pode ser executado em loops For... ou While no casodo Javascript.

Exemplo:

Neste exemplo, serão impressos os números de 1 a 10, com exceção do número 5, ou seja,quando a variável x atinge o valor 5 a execução do bloco de comandos é interrompida e o controleretorna ao início do loop, onde a variável x será incrementada.

For (var x=1 ; x < 10 ; x++){If (x = = 5){continue;}document.write(x);}

Controle de tipos

50

Page 52: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Vemos que em certos casos - como por exemplo o do ’+’ concatenador de strings em contrasteao ’+’ somador numérico - o tipo dos dados que estamos utilizando importa bastante e temos deestar cientes deste detalhe se quisermos que nossas operações se realizem tal como se espera.

Para comprovar se um tipo de dado pode utilizar outro operador que está disponível usa-se ooperador 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 Funções

Como já sabemos o browser interpreta as instruções Javascript a partir da tag <script> esegue uma por uma até alcancar a tag de fechamento </script> ou, logicamente, até encontrar umerro. Apesar de parecer e realmente ser simples, esse formato acaba tornando confusa a leiturade scripts muito grandes. As funções são úteis, então, para torna-los mais fáceis e organizáveis.

Uma função é, basicamente, um bloco de instrução criado para executar uma determinadatarefa específica. Dentro de uma função pode existir uma chamada a outra função. Podemospassar informações às funções que serão usadas e/ou atualizadas dentro delas.

51

Page 53: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Podem retornar algum valor ou informação com o uso do comando Return.

-forma básica de função com valor de retorno:

Function NomeDaFunção(parametro1, parametro2,..., parametroN){...comandos...Return(Valor_De_Retorno);}

Parâmetros

Os parâmetros se usam para mandar valores à função, com os quais ela trabalhará pararealizar as ações. São os valores de entrada que recebem uma função. Os parâmetros podemescrever qualquer tipo de dados, numérico, textual, boleano ou um objeto.

OBS.: em Javascript os parâmetros se passam somente por valor, ou seja, mesmo que mo-difiquemos um parâmetro em uma função a variável original que havíamos passado como parâ-metro não terá seu valor inicial alterado ao final, mesmo que tenha sido alterada para uso dentroda função.

Exemplo:

<html><head><script language="Javascript">function varValor(param){param = 10document.write("mudança do valor da variável 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 final da execução.

A chamada de funções é feita assim:

NomeDaFunção(parametro1, parametro2,...,parametro N)

As funções são declaradas dentro das tags <head></head> da página HTML o que parecerazoável, já que são usualmente chamadas por eventos acionados pelo usuário.

52

Page 54: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Para utilizar uma função é necessário chamá-la (em qualquer parte da página). Para chamaruma função, utiliza o nome da função como uma instrução em um script. Para isso, incluímos osparênteses e os valores para os parâmetros da função.

Exemplo:

<html><head><script language="Javascript">Function ola(){alert("Alô mundo!!!");}</script></head><body>...<script>ola();</script>...</body></html>

OBS.: O Javascript não permite o uso da recursividade. Uma função, portanto, não podechamar ela mesma.

Outro exemplo do uso de funções:

Suponha uma função que tenha como objetivo informar se uma pessoa é maior ou menor deidade, recebendo como parâmetro a sua idade.

function Idade (Anos) {if (Anos > 17){ alert("Maior de Idade") }else{ alert("Menor de Idade") }}

Para acionar esta função, suponha uma caixa de texto, em um formulário, na qual seja infor-mada a idade e, a cada informação, a função seja acionada.

<form><input type=text size=2 maxlength=2 name="Tempo" onchange="Idade(Tempo.value)"></form>

Observe-se que o parâmetro passado para a função quando ocorre o evento "onchange"foio conteúdo da caixa de texto "Tempo"da propriedade "value"e que, na função, chamamos de"Anos". Ou seja, não existe co-relação entre o nome da variável passada e a variável de recepçãona função. Apenas o conteúdo é passado.

53

Page 55: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

A linguagem Javascript possui ainda certas funções específicas internas da linguagem quenão estão ligadas a nenhum objeto(mas que não impede que recebam parâmetros).

É interessante citá-las para posterior consulta dos alunos, se necessário:

• escape - Obtém o código ASCII de um caracter que não seja alfanumérico. Ex: docu-ment.write(escape("@"))

• eval - Avalia uma expressão numérica, retornando um resultado também numérico. Ex:document.write(eval(10*9*8*7*6*5*4*3*2)) // que retorna 3628800

• parseFloat - Converte uma string que representa um número, para um número com pontoflutuante. Caso a string não possa ser avaliada, a função retorna 0.Ex: document.write(parseFloat(-32.465e12")

• parseInt - Converte uma string, que representa um número em uma base predefinida parabase 10. Caso a string possua um caracter que não possa ser convertido a operação pára,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

Page 56: CDTC - Javascript

Capítulo 9

Classes: Math, Number e Boolean

9.1 Classe Math

OBS.: * = Math

*.abs(número) - retorna o valor absoluto do número (ponto flutuante)*.ceil(número) - retorna o próximo valor inteiro maior que o número*.floor(número) - retorna o próximo valor inteiro menor que o número*.round(número) - retorna o valor inteiro, arredondado, do número

OBS.: O exemplo abaixo mostra uma função que arredonda números para duas casas deci-mais. Não somente uma.

function round2(numero) {return Math.round(numero*100)/100;

}

Essa função multiplica o valor por 100 para mover o decimal e então arredonda o numero parao inteiro mais próximo. Por fim, o valor é dividido por 100 para restaurar o decimal.

*.pow(base, expoente) - retorna o cálculo do exponencial*.max(número1, número2) - retorna o maior número dos dois fornecidos*.min(número1, número2) - retorna o menor número dos dois fornecidos*.sqrt(número) - retorna a raiz quadrada do número*.SQRT2 - retorna a raiz quadrada de 2 (aproximadamente 1.414)*.SQRT_2 - retorna a raiz quadrada de 1/2 (aproximadamente 0.707)*.sin(número) - retorna o seno de um número (anglo em radianos)*.asin(número) - retorna o arco seno de um número (em radianos)*.cos(número) - retorna o cosseno de um número (anglo em radianos)*.acos(número) - retorna o arco cosseno de um número (em radianos)*.tan(número) - retorna a tangente de um número (anglo em radianos)*.atan(número) - retorna o arco tangente de um número (em radianos)*.pi retorna o valor de PI (aproximadamente 3.14159)*.log(número) - retorna o logarítmo de um número*.E - retorna a base dos logarítmos naturais (aproximadamente 2.718)*.LN2 - retorna o valor do logarítmo de 2 (aproximadamente 0.693)

55

Page 57: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

*.LOG2E - retorna a base do logarítmo de 2 (aproximadamente 1.442)*.LN10 retorna o valor do logarítmo de 10 (aproximadamente 2.302)*.LOG10E - retorna a base do logarítmo 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 numéricos. É muito provável que você não chegue a utilizar emnenhuma ocasião. Mas é necessária, contudo, a explicação 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 número, então inicia o objeto com o número que recebe.

• Se receber um número entre aspas, o converte a valor numérico, devolvendo também talnúmero.

• No caso de não receber nada, devolve 0 .

• No caso de que receba um valor não numérico devolve NaN, que em inglês significa "Not aNumber"(Não é um número)

• 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

Page 58: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 são 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 máximo e do mínimo valor que se poderepresentar 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 positivosrespectivamente, 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 dequalquer 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ê não passa nenhum valor ao construtor, ou se passa umacadeia de caracteres vazia, ou o número 0 ou obviamente a palavra false sem aspas.

• Inicia-se a ’true’ quando recebe qualquer valor ou cadeia entre aspas ou qualquer númerodistinto de 0.

Exemplos:

57

Page 59: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 avançar mais um pouco e criar nossas próprias classes para uso na páginaem Javascript. Para criar a classe devemos escrever uma função especial, que será a responsávelpor construir o objeto na memória e iniciá-lo. É usualmente chamada de ’construtor’.

O Construtor tem a forma seguinte:

function ClasseExemplo (valor_iniciacao){-----//Inicia-se aqui as propriedades e métodos da nossa classe.

this.PropriedadeExemplo = valor_inicialthis.MetodoExemplo = nome_de_funcao_definida}

Por exemplo:

function AlunoUniversitario(nome, idade){this.nome = nomethis.idade = idadethis.numMatricula = null}

OBS: atribuímos null à matricula neste caso pois o número de matrícula o aluno não recebeaté que esteja matriculado.

Uma função que se constrói com a intenção de que seja um método para uma classe podeutilizar a variável this, que faz referência ao objeto sobre o que invocamos o método.

function matricular(num_matricula){this.numMatricula = num_matricula}

58

Page 60: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

A função matricular recebe um número de matrícula por parâmetro e o atribui à propriedadenumMatricula do objeto que recebe este método. Assim, preenchemos o da propriedade que nosfaltava.

Para imprimir os dados do aluno podemos construir a seguinte função

function imprimir(){document.write("Nome: " + this.nome)document.write("<br>Idade: " + this.idade)document.write("<br>Número de matrícula: " + this.numMatricula)}

Para colocar um método em uma classe devemos atribuir a função que queremos que sejao método ao objeto que está sendo criado. Com o método matricular e o imprimir o construtorficaria da seguinte forma:

function AlunoUniversitario(nome, idade){this.nome = nomethis.idade = idadethis.numMatricula = nullthis.matricular = matricularthis.imprimir = imprimir}

Finalmente, instanciamos os objetos da classe AlunoUniversitario utilizando o new:

Aluno = new AlunoUniversitario("Antônio Pereira",20)

Vejamos os passos juntos:

/** Primeiramente definimos o método 'matriculese' para a classe* AlunoUniversitario. Após isto, definimos o método 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 número de matrícula 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>Número de matrícula: " + this.numMatricula)

}

59

Page 61: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

function AlunoUniversitario(nome, idade){this.nome = nomethis.idade = idadethis.numMatricula = nullthis.matriculese = matriculesethis.imprimir = imprimir

}

meuAluno = new AlunoUniversitario("Antônio Pereira",20)meuAluno.imprimir()meuAluno.matriculese(440321)meuAluno.imprimir()

60

Page 62: CDTC - Javascript

Capítulo 10

Date e Checkbox

O Javascript organiza os elementos de uma página dentro de uma hierarquia. Cada elementoé visto como um objeto. Os objetos podem ter propriedades, métodos e responder a certoseventos. Daí a importância de entender a hierarquia dos objetos HTML.

Poderíamos citar diversos objetos existentes em Javascript, mas isso demandaria muitas pá-ginas de explicação. Decidi citar todos e explicar apenas 2 deles para que fique claro o funciona-mento básico. 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 que-remos configurar:

Forma Geral:

NovoObjeto = NEW date()

Exemplos:

dia=new Date(); //neste caso a data atual é armazenadadia=new Date("Julho 20, 2007, 11:00:00");dia=new Date("07, 20, 2007");dia=new Date("07,20, 2007,11,0,0");

Métodos existentes no objeto Date:

• getMonth - Obtém o ’número’ do mês. Retornando um valor entre 0 e 11. (janeiro=0)Ex: Mes=NovoObjeto.getMonth()

• setMonth - Estabelece um novo valor para o mês. O valor deve estar entre 0 e 11Ex: NovoObjeto.setMonth(NumeroDoMes)

• getDate - Obtém o número do dia, considerando-se o mês. Retornando um valor numéricoentre 1 e 31.Ex: dia = NovoObjeto.getDate()

• setDate - Estabelece um novo valor para o dia do mês. Este valor deve estar entre 1 e 31Ex: NovoObjeto.setDate(NumeroDoDia)

61

Page 63: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

• getDay - Obtém o número do dia, considerando-se a semana. Retornando um valor numé-rico entre 0 e 6.Lembre-se de que a semana começa no domingo, logo 0, corresponde ao domingo.Ex: DiaDaSemana = NovoObjeto.getDay()

• getHours - Obtém um número correspondente a hora. Retornando um valor numérico entre0 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 - Obtém um número correspondente aos minutos. Retornando um valor numé-rico entre 0 e 59.Ex: Minutos = NovoObjeto.getMinutes()

• setMinutes - Estabelece um novo valor para os minutos. O valor deve estar entre 0..59Ex: NovoObjeto.setMinutes(Minutos)

• getSeconds - Obtém um número correspondente aos segundos. Retornando um valor nu-mérico entre 0..59Ex: Segundos = NovoObjeto.getSeconds()

• setSeconds - Estabelece um novo valor para os segundos. O valor deve estar entre 0 e 59Ex: NovoObjeto.setSeconds(Segundos)

• getTime - Obtém o tempo decorrido desde 01/01/70 até o presente momento. O únicoincoveniente é que esta data é dada em milissegundos.Ex: TempoDecorrido=NovoObjeto.getTime()

• setTime - configura a hora e a data especificando o número de milissegundos, desde 1º deJaneiro.Ex: DataDeNascimento=New Date("August 2, 1970")

Uma outra forma para definir a data seria:

OutraForma = New Date()OutraForma.setTime(DataDeNascimento.getTime())

• getTimeZoneOffset - Obtém a diferença entre o horário local e o horário do meridiano central(Greenwich). Este tempo é dado em minutos, logo, para saber o fuso-horário, deve-se dividiro resultado obtido por esta função por 60.

Ex: FusoHorário=NovoObjeto.getTimezoneOffset() / 60

• getYear - Obtém um valor numérico correspondente ao ano. Retorna o ano, ao que se restou1900. Por exemplo, para o 1995 retorna 95, para o 2005 retorna 105. Este método estáobsoleto em Netscape a partir da versão 1.3 de Javascript e agora se utiliza getFullYear().

Ex: Ano=NovoObjeto.getYear()

• getFullYear() - Retorna o ano com todos os dígitos. Usar este método para datas posterioresao ano 2000. Ex: Ano=NovoObjeto.getFullYear()

62

Page 64: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 número que recebe por parâmetro. O número seindica completo ex: 2005 ou 1995. Utilizar este método para datas posteriores a 2000. Ex:NovoObjeto.setFullYear(2005)

• toGMTstring - Converte um objeto data para uma string seguindo o padrão Internet GMT.Ex: NovoObjeto.toGMTstring()

• toLocalString - Converte uma data para uma string seguindo o padrão local. Ex: NovoOb-jeto.toLocalString()

Convertendo entre formatos de data.

Dois métodos especiais do objeto Date permitem converter entre formatos de data. Em vezde utilizar esses métodos com um objeto Date que você criou, você os utiliza com o próprio objetoDate embutido. Esses métodos são os seguintes:

Date.parse(): Converte uma string de data e objeto Date.Date.UTC(): Faz o contrário. 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 caixade checagem [V] ou []. O funcionamento é o seguinte: a condição de selecionada ou não, éalternada quando clicamos o mouse sobre o objeto. Isto é, se clicarmos sobre um objeto checkboxjá marcado ele será automaticamente desmarcado, ao passo que se clicarmos em um objetocheckbox desmarcado ele será automaticamente marcado.

Tem Forma:

<form><input type="checkbox" name="NomeDoObjeto" [checked] value="Label"

onClick="Ação"></form>

Type - Nome do objeto

Name - Nome dado pelo programador, para futuras referenciações ao objeto.

CHECKED - Se especificado a CheckBox já vai aparecer selecionada

Value - Define um rótulo para a CheckBox.

onClick - É o evento associado ao chechbox. Define o que fazer quando dá-se um clique naCheckBox, fazendo com que o objeto CheckBox funcione como um objeto Button.

63

Page 65: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

10.2.1 Propriedades

name - Nome do objeto CheckBox em forma de string, da mesma forma como definido nocampo Name utilizado na criação da CheckBox.Ex: NomeDoObjeto.name // equivale a string "NomeDoObjeto"

value - Armazena o conteúdo do campo VALUE, definido na TAG.Ex: NomeDoObjeto.value;

checked - Retorna um valor lógico que depende do estado do objeto CheckBox.Ex: NomeDoObjeto.checked // equivale a True se o objeto estiver selecionado e False caso con-trário

defaultChecked - Informa/Altera o estado default de um objeto CheckBox. Com relação aalteração, somente os objeto CheckBox ainda não exibidos podem ter seu estado default alterado.Ex: NomeDoObjeto.defaultChecked // sempre equivalerá a True, se a cláusula CHECKED estiverpresente e a False caso contrário.

10.2.2 Métodos:

click: Este método simula um clique do mouse no objeto CheckBox, ou seja, executa umprocedimento associado a uma CheckBox como se estivessemos clicado na CheckBox mas semque o usuário tenha realmente clicado.Ex: Select01.click() // executaria a função ConfirmaInformacoes

onclick: Como já mostrado, é o evento associado ao chechbox. Define o que fazer quandodá-se um clique na CheckBox, fazendo com que o objeto CheckBox funcione como um objetoButton.

Vamos a um exemplo:

<html><head><title>Exemplo CheckBox</title><script>

function exemplo(p1,p2,p3,p4){alert('Veja os conteúdos das propriedades:\nName='+p1+'\nValue='+p2+'\nChecked='+p3+'\ndefaultChecked='+p4);

}</script></head>

<body>

64

Page 66: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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

Page 67: CDTC - Javascript

Capítulo 11

Hierarquia dos Objetos

Aprenderemos a partir daqui a controlar o navegador e os distintos elementos da página. Apartir daqui o curso ganha um caráter bastante prático, na medida em que até esta parte nãotrabalhavamos explicitamente com o navegador e com as páginas. Primeiramente, mostrarei ahierarquia de objetos do browser como um todo e como acessá-los.

66

Page 68: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Percebe-se que os objetos pertecem a um objeto maior chamado window, de modo que paraacessar qualquer outro objeto desta hierarquia, devemos iniciar pelo objeto window:Ex:

67

Page 69: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

window.document.bgColor = "red"window.document.write("O texto a escrever")

Percebemos que muitos das propriedades de Window são na verdade outros objetos. Desta-camos o objeto Document, que contem propriedades e métodos necessários para o controle dediversos aspectos da página.

Quando carregamos uma página, o browser constrói a hierarquia na memória. Ainda constróium array (vetor) dos objetos.Isto significa que„ por exemplo, no caso das imagens, ele vai criandoo array colocando na posição 0 (usualmente a inicial) a primeira imagem, na posição 1 a segundaimagem e assim por diante. Vejamos um exemplo dessa construção que percorre as imagens eimprime suas propriedades src, que contém 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 também acessar um pouco mais adentro a hierarquia. Vamos em seguida acessarum formulário da página, ao que poderemos acessar pelo array de formulários, e dentro deleacessar a propriedade elements, que é outro array de objetos. Para cada elemento do formuláriovamos escrever sua propriedade value, que corresponde com a propriedade value que colocamosem HTML. Percebemos que é um loop muito parecido com o anterior, com a diferença que agorapercorremos o vetor elements, ao que acessamos pela hierarquia de objetos passando pelo arrayde formulários em sua posição 0, que corresponde como primeiro formulário da página. Vejamos:

for (i=0;i<document.forms[0].elements.length;i++){document.write(document. forms[0].elements[i].value)document.write("<br>")

}

68

Page 70: CDTC - Javascript

Capítulo 12

Ocultando scripts

12.1 Ocultando scripts de navegadores antigos

Alguns usuários ainda utilizam navegadores que não suportam JavaScript. Além disso, al-gumas pessoas tem suporte para JavaScript porém este está desativado em seus navegadores,seja por preocupação com segurança ou para evitar mensagem rolando na tela.

O que acontece é que, por causa disso, o browser passa a ignorar a TAG <script> e, logica-mente, todo o código que estiver limitado por ela, mostrando todo o código na tela como se fosseum simples texto HTML. Para evitar isso, é possível incluir o script dentro de tags de comentáriode HTML, o que, na prática, diz ao navegador para ignorar o script case não o entenda.

Já os navegadores atuais "entendem"que o script não é realmente um comentário. As duasbarras (//) na última linha são um comentário JavaScript, que evita que o comentário HTML sejadetectado 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

Page 71: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

<body><script> ola();</script></body></html>

A tag <noscript> para browsers Não-Javascript

Uma outra opção é o uso das tags <noscript> e </noscript>, que diz aos browsers compatíveiscom o JavaScript para ignorar tudo entre as elas. Com isso, pode-se incluir conteúdo HTML parao navegador não-JavaScript dentro das tags.

OBS: Navegadores mais antigos que não suportam JavaScript também não suportam a tag<noscript>.Entretando, essa técnica ainda funciona porque, de acordo com o padrão de HTML, osnavegadores devem ignorar tags desconhecidas. Browsers modernos suportam a tag <noscript>quando suporte para JavaScript está desativado.

70

Page 72: CDTC - Javascript

Capítulo 13

Exemplos

Nesta parte final do curso, veremos alguns exemplos de uso de Javascript. Mostrarei apenasalguns, ficando a cargo do aluno testar outros exemplos (bastante difundidos na internet) e criarseus próprios 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 página

<img src="imagem1.gif" name="img1">

Após isso, atribuímos à imagem um link, no qual queremos navegar se ela for clicada pelousuário.

<a href="linkaserclicado.html">

Adicionamos, então, dois atributos a esse link, que vai nos servir para realizar o efeito dese-jado:

• OnMouseOver: com ele indicaremos a ação a ser realizada quando passarmos o mouseem cima da imagem.

• OnMouseOut: com ele definimos o evento de retirar o mouse de cima da imagem.

<a href="linkaserclicado.html" onmouseover="Código_Javascript"onmouseout="Código_Javascript">

Após isso, declaramos duas variáveis usando Javascript para salvar as imagens 1 e 2. Po-demos inserir o script em qualquer lugar entre as etiquetas <script>, mas seria mais adequadocolocar antes da imagem.

Obs: Os números (84,34) correspondem respectivamente à largura e à altura da imagem.

<script language=javascript>primeira = new Image(84,34)primeira.src = "imagem1.gif"

71

Page 73: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 ficarão assim:

onmouseover="window.document['imagem1'].src= primeira.srconmouseout="window.document['imagem1'].src = segunda.src

E fim. 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 Dinâmico

Diretamente ligado ao exemplo anterior é este exemplo seguinte. Podemos adaptar o rolloverpara criar uma barra de navegação para uma página que mude ao passar o mouse por cima decada item. E é exatamente isso o que faremos agora. Evidentemente, existem muitas outrasmaneiras de fazer uma barra de navegação, mas esta é uma boa forma.

Primeiramente devemos construir duas versões da barra, desta maneira:

72

Page 74: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Com uma tabela de HTML faremos, então, a barra de navegação para a página, ainda semmovimento, detalhando assim:

• inserimos as imagens apagadas;

• cada imagem linka para uma página correspondente;

• nomeamos diferentemente cada imagem usando o atributo name;

• usaremos cellpadding e cellspacing 0 para que não exista separação entre as imagens.

• por esta última razão, também não devemos deixar espaço em branco no código HTMLentre os TD’s e as imagens.

O código fica 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=110height=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=110height=16 alt="Aba3" border="0" name="imagem4"></a></td>

</tr></table>

73

Page 75: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Para ter as imagens já em nosso browser antes de que sejam utilizadas, devemos pré-carregá-las usando Javascript. Com isso, conseguiremos que o efeito de rollover seja rápido, e as imagensmudem velozmente segundo o passar do mouse:

Para isto, utilizaremos o código seguinte, que deverá ser inserido no cabeçalho do documentoHTML:

<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

Page 76: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Aqui usaremos o rollover, definindo os eventos onmouseover e onmouseout para cada um doslinks, indicando a mudança 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 código completo ficaria assim e o resultado final 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

Page 77: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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=16alt="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 código e ver o resultado:

• 1)Salve as figuras do inicio da página uma por uma em alguma pasta

76

Page 78: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

• 2)Salve o código anterior em um editor de texto comum com a extensão sendo ’.html’.

• 3)Salve este último arquivo mesma pasta que contém as figuras e abra o arquivo .html emum browser qualquer.

13.2 Relógio Digital

Mostrarei um último exemplo, onde crio um relógio digital usando Javascript. Este script ésimples e na prática podemos apenas copiá-lo e colá-lo. Para fins didáticos, explicarei como osoutros, passo-a-passo.

Primeiramente inserimos o campo que dará o formato do relógio. Neste caso, ele será consi-derado como um pequeno formulário somente com o campo texto. Temos que atribuir um nomeao formulário 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 função que busque o relógio do sistema e mostre no campo anterior.Já sabemos fazer isso usando o Date(). Se criarmos uma instância do objeto Date sem lhe passarparâmetros, inicia-se à data e hora atuais.

hraAtual = new Date()

Usando os métodos de Date, pegamos as horas, minutos e segundos:

hour = hraAtual.getHours()minutes = hraAtual.getMinutes()second = hra.Atual.getSeconds()

Por fim,

finalhora = hour +" : "+ minutes +" : "+ seconds

Agora apenas colocamos a hora no campo texto do formulário:

document.relogioformulario.camporelogio.value = finalhora

Chamaremos a função assim:

function Relogio(){hraAtual = new Date()hour = hraAtual.getHours()minutes = hraAtual.getMinutes()second = hra.Atual.getSeconds()horaImprimivel = hora + " : " + minuto + " : " + segundodocument.relogioformulario.camporelogio.value = finalhora

}

77

Page 79: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento Brasil/DF

Até aqui obtivemos hora e a atualizamos em seu campo de texto. É necessário agora quea função chame a si mesma freqüentemente, a cada segundo, para assim voltar a fazer todoo processo de obtenção e atualização da hora. Processo este que se repetirá até sairmos dapágina.

A linha de código para chamar a si mesma, que colocaremos na última linha da função é aseguinte:

setTimeout("Relogio()",1000)

A função anterior, como já visto, serve para fazer o adiantamento antes de executar a sen-tença. A sentença é uma simples chamada à função e o adiantamento é de 1000 milésimos desegundos (um segundo). Necessitamos, agora, colocar o relógio em funcionamento. Isto podeser feito uma vez terminado o carregamento da página com o administrador de eventos onload,que coloca-se no <body>.

<body onload="Relogio()">

Isto quer dizer que quando termine de carregar a página se chamará à função moveRelogio(),que se encarregará de mover o relógio e chamar a si mesmo para fazer o processo de maneiracontínua.

Podemos ainda, fazer que nao seja possivel modificar o texto do relogio manualmente. O ad-ministrador 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, ouseja, no formato hh : mm : ss, devemos manipular os valores como se fossem strings. Construi-remos, entao uma string a partir do valor (hra, min, sec) que desejamos formatar. Para obter astring 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 verificamos com um if o numerode caracteres na string. Se houver apenas um, devemos concatenar um ’0’ ao inicio:

if (str_hora.length == 1)hora = "0" + hora

Código completo:

<html><head><title>Relogio com Javascript</title><script language="JavaScript">

function Relogio(){

78

Page 80: CDTC - Javascript

CDTC Centro de Difusão de Tecnologia e Conhecimento 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 relógio funcionando...

<form name="relogioformulario"><input type="text" name="camporelogio" size="10"onfocus="window.document.relogioformulario.camporelogio.blur()"></form></body></html>

79