Livro ling prog iii 462.pg

462
Universidade do Sul de Santa Catarina Palhoça UnisulVirtual 2011 Linguagens de Programação III Disciplina na modalidade a distância

Transcript of Livro ling prog iii 462.pg

. Lembre-se que o HTML no case-sensitive, ou seja, ele no distingue , , , . Todas as tags devem ser sempre fechadas, pois desta forma mantm o padro e no h problemas com outras linguagens que podemos vir a usar. As tags de fechamento possuem uma barra /. Alm dos fechamentos, devemos sempre manter a hierarquia do bloco, isto , as tags sejam sempre fechadas do ltimo para o primeiro, deste modo: documento 1 .22 19. Linguagens de Programao IIIVejamos um exemplo de HTML: Primeiro teste Esse um teste Figura 1.5 - Exemplo de pgina html.Fonte: Elaborada pelo autor (2010).As principais tags utilizadas no desenvolvimento Web so as quecompem o formulrio HTML (form). Eventualmente, paracontemplarmos uma soluo mais completa, podemos utilizar deoutras tags para nos auxiliar. Unidade 123 20. Universidade do Sul de Santa Catarina Seo 2 Desenvolvimento de aplicaes Web Um dos principais pontos a se destacar quando falamos em desenvolver aplicao para Web que ela possui algumas vantagens que superam desenvolvimento de aplicao desktop. Vamos apresentar alguns conceitos envolvidos no desenvolvimento de aplicaes Web. O desenvolvimento de software para a Web mantm um princpio bsico: mantenha-o simples; mantenha-o pequeno. Na Conferncia de Tecnologia Emergente do ano de 2006 houve vrios temas em discusso. Rael Dornfest, ex-chefe executivo da OReilly, explanou: grandes negcios sero criados oferecendo menos a voc. Perceba como essa afirmao se torna importante quando pensamos na economia da ateno. Isso quer dizer que no podemos ter mais informaes que o tempo que podemos ler. Uma das vantagens no trabalho do desenvolvedor Web diz respeito s operaes de manuteno: ele trabalha com uma aplicao centralizada. Ou seja, a aplicao permanece em um nico equipamento onde so acessadas pelos clientes. Desta forma, as operaes de manuteno da aplicao decorrem de forma muito dinmica, onde qualquer alterao na aplicao se reflete instantaneamente a todos os usurios conectados. Alm disso, as operaes de backup e integrao com outras aplicaes so mais bem gerenciadas. A centralizao permite que as estaes desktops utilizem menos recursos. Essa diminuio favorece na diminuio de custos de um projeto de implementao. Porm, o desenvolvimento Web requer uma metodologia de desenvolvimento mais organizada. Quando se fala de centralizao, no significa que seja uma obrigatoriedade que exista apenas um servidor. As tecnologias atuais permitem conter equipamentos em diversas camadas. Por exemplo, podemos ter um equipamento com apenas o servidor Web; um segundo equipamento com uma linguagem de interpretao como o ASP; e, por ltimo, um equipamento apenas com o banco de dados. A forma de organizar a infraestrutura depende da estratgia adotada no projeto de desenvolvimento. Muitas variveis devem24 21. Linguagens de Programao IIIser levadas em consideraes, como: nmero de acessos, cargade processamento, volume de consultas, entre outras. Apesar deesta anlise no ser o foco de estudo desta disciplina, torna-seimportante voc ter conscincia do processo como um todo.Quanto aos recursos necessrios no desktop para que umaaplicao Web seja executada, so bem resumidos, uma vez quebasta ter acesso a um servidor Web por meio de um browser paraque a aplicao mais bsica passe a funcionar. As aplicaes maisrobustas em grandes empresas tambm no perdem muito essacaracterstica. O servidor Web dever ser mais bem equipado,porm, para algum passar a utilizar a aplicao, basta umbrowser e uma conexo com o servidor para iniciar o seu trabalho.Os recursos adicionais que por ventura possam ser necessrios,normalmente se tratam de complementos para o browser executaruma animao, um vdeo ou outra forma de mdia. Esses tipos decomplementos so nomeados como plug-ins.As aplicaes Web necessitam de uma conexo com um servidorWeb. Esse servidor pode estar instalado no prprio desktop dousurio ou em outro equipamento em qualquer distncia. Essaconexo com o servidor pode ocorrer de duas formas: pelaintranet ou pela extranet. A intranet se caracteriza pela redeLAN (rede local) onde o ambiente muito bem conhecido econtrolado. A extranet a internet propriamente dita, assim aLAN (Local Area Network):aplicao est aberta a qualquer navegador que tenha acesso a ela.sigla para representaruma rede local, a rede decomputadores qual suamquina est conectada. Lembre-se que, com uma aplicao centralizada, o processamento e o volume de dados trafegam em um nico equipamento. Essa preocupao deve estar presente no incio do projeto de desenvolvimento do software.Uma grande facilidade para o uso das aplicaes Web que aplataforma j se encontra pronta. Isto , a Web utiliza de todos osequipamentos de redes j existentes, uma vez que tudo tratadopelo protocolo TCP/IP.Protocolos TCP/IP umAssim, os servios de requisies utilizam o seguinte conjunto de protocolosprocedimento: de comunicao entrecomputadores em rede. Unidade 1 25 22. Universidade do Sul de Santa Catarina Browser Servidor Web(Usurio) Servidor WebBrowser(Usurio) Figura 1.6 - Diagrama de interao browser x servidor. Fonte: Elaborada pelo autor (2010). Esse diagrama representa de forma bsica como a h a interao entre browser e servidor. Utilizam a rede (internet ou intranet) como plataforma de comunicao. Uma outra forma de exemplificar a dinmica das aplicaes Web utilizar um diagrama com o ASP sendo uma linguagem de interpretao de cdigo. Assim como foi utilizado o ASP, poderia ser qualquer outra linguagem, como PHP, JSP, entre outras. Figura 1.7 - Diagrama em que o ASP uma linguagem de interpretao de cdigo. Fonte: . Acesso em 06 jan. 2011.26 23. Linguagens de Programao IIIPerceba que, mesmo utilizando uma linguagem para interpretaruma programao existente, a dinmica da aplicao Web no foialterada.Logicamente esse desenvolvimento no nasceu do dia para a noite.As linguagens vm evoluindo para que os desenvolvedores possamter um esforo menor durante seus desenvolvimentos. O esquema aseguir representa a evoluo das principais linguagens Web.Figura 1.8 - Diagrama de evoluo de linguagens de programao.Fonte: . Acesso em 06 jan. 2011.A possibilidade de uso das linguagens interpretadas no servidorWeb tornou-se possvel criar pginas em que o resultado dependede um tipo de requisio. Ou seja, uma consulta a um banco dedados ou outra forma de armazenamento de dados pode retornarinformaes diferentes dependendo dos parmentros para umamesma pgina. Assim, as pginas que outrora eram estticaspassam a ser dinmicas e um universo novo se abre para osdesenvolvedores. Unidade 127 24. Universidade do Sul de Santa Catarina A definio da Aplicao Web est entrelaado com a definio de pginas dinmicas. Assim, o principal fluxo de informao que trafega nas aplicaes Web o envio (insero ou manipulao de dados) e o resgate (consulta) de informaes de um servidor. Vale ressaltar que o browser possui um tempo interno para aguardar uma resposta da requisio realizada. Em outras palavras: o browser envia alguns dados para o servidor. Este, por sua vez, realiza uma consulta sobre esses dados. Caso essa consulta seja demasiadamente lenta, o browser entender que a conexo com o servidor no existe mais e retornar uma mensagem de erro. Portanto, qualquer requisio nas aplicaes Web deve conter um retorno rpido, de forma a evitar esse problema. Alm do retorno das consultas que deve ser levado em considerao, o envio das informaes tambm importante. Imagine voc enviar um arquivo enorme para o servidor. Se um arquivo muito grande (400 Mb, por exemplo) for enviado para o servidor e se a aplicao no estiver preparada para suportar esse trfego, muito provavelmente toda a aplicao ir parar enquanto processa a sua requisio. Essas consideraes dependem do link com o servidor. O link, neste caso, refere-se velocidade de uma conexo com o servidor. Quanto maior a velocidade, maior o volume de dados possveis de trafegar na rede. Outro aspecto que importante ser levado em considerao no projeto de uma aplicao Web o cuidado com a usabilidade. Lembre-se sempre que o custo para diversos browsers interpretarem as pginas Web de forma semelhante a simplicidade do cdigo HTML. Esses elementos grficos no possuem qualidades semelhantes aos elementos de uma aplicao desktop. O crescente uso da Web como plataforma de sistemas acaba por forar a utilizao de mecanismos que melhorem o visual. Tornando-os mais atrativos para os usurios.28 25. Linguagens de Programao IIIAtualmente existem recursos para minimizar esse problema,como CSS, JavaScript, entre outros. Mas aqui est sereferenciando aos elementos bsicos do HTML como oselementos de formulrio. O uso das folhas de estilos (CSS)criam um visual mais amigvel e harmnico. O JavaScript, almde poder realizar algumas tarefas do CSS, auxilia a interatividadecom o usurio como mscaras e validaes de campos.Assim como qualquer aplicao desktop, o desenvolvimento deaplicaes para Web requer um projeto conciso em que possaabordar as diferentes tecnologias que sero utilizadas. Diferentedo desktop, onde uma linguagem adotada para o projeto, aaplicao para Web requer, hoje, o uso de vrias linguagens etecnologias para atingir um melhor resultado. Por isso, o usode frameworks auxilia e muito o desenvolvimento em equipes,uma vez que essas ferramentas procuram manter um padro dedesenvolvimento uniforme. Ateno! Todo o projeto de software, seja de pequeno ou grande porte, requer uma fase de anlise rigorosa. Nesta etapa comea-se a identificar possveis problemas e riscos ao desenvolvimento. Ainda nesta fase, possvel direcionar e identificar as tecnologias utilizadas no desenvolvimento. Execute sempre aps o planejamento baseado na anlise do projeto. Aprenda o problema, a soluo j existe!Apesar de se tratar de um desenvolvimento de software, asaplicaes Web possuem algumas caractersticas que a diferencia. a) ubiquidade; b)infraestrutura tecnolgica imprevisvel; c) alta volatilidade dos requisitos de negcio; d)equipes multidisciplinares. Unidade 129 26. Universidade do Sul de Santa Catarina a) Ubiquidade A ubiquidade nada mais que a caracterstica de acessar a aplicao de diversos locais para diversos dispositivos. Portanto, para ter essa caracterstica comprovada, a aplicao Web necessita estar disponvel rede. Entenda que, quando mencionado o acesso rede, trata-se de rede domstica, corporativa ou mundial. Hoje, com uso de dispositivos menores para acessar a rede, possvel criar vises especficas para um determinado tipo de dispositivo sem trocar a aplicao. b) Infraestrutura tecnolgica imprevisvel O que voc como desenvolvedor deve sempre manter em mente que qualquer pessoa conectada rede pode ter acesso a sua aplicao. No estamos tratando aqui os fatores de segurana, mas sim o nmero de acesso que sua aplicao pode ter. Assim, um usurio que deseja acessar sua aplicao pode conter uma infinidade de configuraes diferentes em seu equipamento. Podendo assim variar o sistema operacional, a memria, a velocidade de conexo, o tamanho de tela, a resoluo, entre outros. Todas essas variveis podem afetar diretamente a forma que o usurio poder visualizar a sua aplicao. Os browsers ainda permitem que os usurios alterem suas configuraes livremente desabilitando funcionalidades importantes que sua aplicao pode estar utilizando. As melhores aplicaes Web so aquelas que preveem o maior nmero de variaes de equipamentos possveis que os usurios possam ter. Um exemplo tpico que os usurios podem desabilitar o uso da linguagem JavaScript. Essa linguagem, como veremos, largamente utilizada em validaes de formulrios. Caso sua aplicao apenas valide o formulrio via o JavaScript, pode sofrer por usurios mal intencionados que esteja acessando sua aplicao. Outro exemplo seria a dimenso que voc pode estar utilizando. Ao dimensionar sua pgina Web de tal forma que alguns30 27. Linguagens de Programao IIIusurios tenham de mover a barra de rolagem em diversasdirees, leva a uma insatisfao por parte dos usurios. Semfalar que podem perder informaes importantes que no estejamsendo mostradas adequadamente.c) Alta volatilidade dos requisitos de negcioLembre-se que em aplicaes Web a regra de negcio fica noservidor Web. Essa caracterstica permite que uma alteraose replique para todos os clientes instantaneamente. Essa aofaz com que seja comum nessas aplicaes um ndice maior naalterao das regras de negcio se comparadas com aplicaesdesktops.Aplicaes para Web no possuem em sua maioria um controlede releases. Contudo, existem algumas aplicaes em que essecontrole feito e normalmente so aplicaes Web para usogenrico. Nesses casos, voc adquire uma cpia, instala e passa ausar. Com a evoluo tecnolgica ou com a ocorrncia de relatosde bugs, uma nova release lanada.d) Equipes multidisciplinaresOs projetos Web so concebidos, normalmente, por profissionaiscom conhecimentos abrangentes. Um projeto pequenodesenvolvido por um nico profissional acaba por forar estea aprimorar seus conhecimentos em design, banco de dados,linguagem server-side e em linguagem client-side. Voc ver adianteAssim, as aplicaes para Web formam profissionais com visesmais detalhes sobre aabrangentes sobre a soluo em que est se pretendendo alcanar. linguagem server-side e client-side.Ateno!Essa ltima caracterstica pode se tornar um pontofraco, pois muitos profissionais acabam por mantero foco em uma generalizao tamanha que lhesacaba faltando, algumas vezes, conhecimentos maisaprimorados sobre uma tecnologia. Unidade 1 31 28. Universidade do Sul de Santa Catarina J vimos at o momento diversas informaes que mostram como o desenvolvimento para a Web benfico, mas necessita de alguns cuidados. Chegou a hora de desmitificar uma aplicao Web e um website. A aplicao Web formada por websites que possibilitam aos usurios interagirem com a aplicao. Toda a aplicao para Web composta por websites que propiciam o servio aos usurios. A nfase tambm diferente: os websites tm em seu ponto forte os aspectos plsticos do sistema (apresentao, movimento, navegao, informao). As aplicaes para Web, por sua vez, preocupam-se com os aspectos funcionais da soluo (velocidade de resposta, funcionalidade, interatividade, aplicabilidade). Todo esse conjunto facilitado pelo ambiente que a aplicao est sendo desenvolvida, a internet. O ambiente da internet possui diversas aplicabilidades e finalidades que podem ser atendidas por uma aplicao. Por causa disso, existem diversas tecnologias que auxiliam a alcanar os objetivos. Muitas dessas tecnologias so definidas por diversas caractersticas como: aparncia, interatividade, disponibilidade no servidor Web, experincia do desenvolvedor ou por uma escolha pessoal do desenvolvedor por uma linguagem especfica. Ateno! Cuidado com a escolha de uma linguagem, pois a escolha errada pode causar fracasso no projeto. Procure nunca utilizar o lado pessoal durante esse processo. Lembre-se que o objetivo de um desenvolvimento oferecer a melhor soluo para um problema. Existem inmeras linguagens que podem ser trabalhadas no desenvolvimento Web e possvel interpretar linguagens tipicamente desktops em servidores Web. Lembre-se que, para32 29. Linguagens de Programao IIIuma linguagem ser interpretada, basta que o servidor Webentenda os comandos provenientes desta.Vejamos mais detalhadamente duas linguagens amplamentedisseminadas: (a) Client-Sides e (b) Server-Sides.a) Linguagens Client-SidesClient-sides caracterizam as linguagens que so interpretadaspelo browser. Normalmente no fazem parte da regra de negciocomposta pelo projeto e possuem uma aplicabilidade de interaoimediata.Linguagens client-sides so mais teis no realce doaspecto visual da aplicao ou quando precisamosde processos simples e rpidos sendo executados nainterface, como a validao dos dados digitados pelousurio.Hoje, esse tipo de linguagem tem ganhado fora com ausabilidade. As aplicaes atuais possuem um nvel muito grandede personalizao e interao. Por esse motivo, as linguagenscomo CSS, JavaScript e DHTML so cada vez mais trabalhadase novos profissionais especialistas surgem no mercado.As linguagens client-sides mais comuns so: CSS HTML XHTML Javascript AJAX Flash Action Script Microsoft Silverlight Unidade 1 33 30. Universidade do Sul de Santa Catarina b) Linguagens Server-Sides Este tipo de linguagem mantm em seu escopo as regras de negcio da aplicao. Pelo fato de as linguagens Server-sides serem executadas no servidor, todo o processamento da aplicao recai sobre ela. Nessa camada se fazem as chamadas a banco de dados e a arquivos de comunicao. As linguagens server-sides j proveem mecanismos para a implementao da parte lgica da aplicao, como os algoritmos que executam os processos da camada de negcio ou recursos auxiliares, como acesso a banco de dados. As linguagens mais usadas atualmente so: PHP ASP .NET CGI, Perl Java, J2EE, WebObjects SSJS, Aptana Jaxer, Mozilla Rhino Python, Django Ruby, Ruby on Rails Smalltalk Seaside ColdFusion Lotus Domino Websphere As linguagens server-sides dependem diretamente do servidor Web. Esse servidor necessita estar configurado para interpretar as linguagens. Em outras palavras, para que uma linguagem34 31. Linguagens de Programao IIIse adque a um desenvolvimento Web e se torne Server-side,basta que o servidor Web interprete o seu cdigo. Mesmolinguagens tipicamente desktop como o C++ pode ser utilizada nodesenvolvimento Web. Apenas o servidor tem de identificar seucdigo e encaminhar para o compilado C.Software de aplicao (Software as a Service SaaS) so aplicaesexecutas em um servidor Web ao invs de serem instaladas emum equipamento cliente. Esse tipo de aplicao possui vriostipos de benefcios, como reduzir a demanda dos departamentosinternos de TI. O SaaS ainda pode aumentar a acessibilidadepara o uso fora dos escritrios facilitando a sua manuteno.O usurio acessa o software como um servio, desta formasempre est atualizado. Quaisquer atualizaes efetuadas noservidor causam diretamente impacto a todos os equipamentosdos usurios. Esse tipo de aplicao vem sendo utilizada pelasempresas para facilitar a atualizao dos seus softwares, alm deadotar uma padronizao.A Google utiliza esse conceito em vrios de seus softwares. Umdos mais usados o Google Docs, que se baseia em um conjuntode aplicativos para escritrios, como um editor de textos e umaplanilha eletrnica.Figura 1.9 - Planilha eletrnica do Google Docs.Fonte: .A colaborao de projetos torna-se simplificada. Uma vez que oarquivo se encontra no servidor, no necessrio enviar paraum colega. Simplesmente o usurio necessita compartilhar oarquivo com os colegas que deseja. Unidade 1 35 32. Universidade do Sul de Santa Catarina Outra forma de aplicativo que vem ganhando muito espao e ateno so os Webtop. Um Webtop um desktop Web, isto , um ambiente de sistema operacional disponvel pelo browser. Esse tipo de aplicao possui um potencial impressionante, j que o usurio poder trocar de equipamento sem perder as suas configuraes e os seus arquivos. Figura 1.10 - Webtop, uma forma de trabalhar de forma virtual. Fonte: http://icloud.com/pt. Acesso em 06 jan. 2011 Como voc pde notar, o desenvolvimento Web possui inmeras aplicabilidades e est longe de encontrar o seu limite. Porm, somente desenvolver no tudo. Conhecer o usurio e procurar tcnicas para melhorar o uso das aplicaes so fatores fundamentais. Essa tentativa de facilitar o uso das aplicaes e potencializar o seu uso chama-se de usabilidade. Seo 3 Usabilidade J foi mencionado aqui sobre usabilidade, como ela vem ganhando espao e cada vez mais utilizada em aplicaes Web. Mas, afinal, o que a usabilidade? Usabilidade uma caracterstica daquilo que utilizvel, funcional. tornar bvio o bvio, tendo em conta as necessidades do utilizador e o contexto em que este est inserido. Podemos relacionar usabilidade com os seguintes verbos: simplificar, rentabilizar, otimizar, facilitar, melhorar, acelerar. Mais usabilidade sinnimo de maior flexibilidade e de maior interao com os usurios.36 33. Linguagens de Programao IIIA usabilidade est em todo o lugar, praticamente em todos osprodutos que o ser humano desenvolveu possvel alterar paramelhor. Porm, nem sempre mudar significa que ir melhorar.Qualquer pessoa que j tenha operado uma tev poder utilizarqualquer outra. Essa afirmao verdadeira, porm nem semprepoder utilizar no mximo de seus recursos. No so todos osdetalhes que o usurio ter conhecimento, como uma funosleep, mute, canal anterior, menu.Agora, se alterarmos o produto como celular, forno, forno micro-ondas, lavadoras de loua, computadores, videogame. Percebemosque todos caem cabem nesse exemplo.Desta forma, a forma que se usa um determinado produtodeve ser adequado para que se torne intuitivo. Assim, quandoo produto no o faz, o problema do projeto do design, dausabilidade.Vejamos um caso de sucesso: a Apple se esfora paraque seus produtos se tornem completamente intuitivoe que todo o ritual de utilizar um produto da Appletorne-se nico e de uma facilidade sem precedentes.Botes e informaes nos devidos locais com sua hierarquiade importncia; cores e diagramao intuitivas e adequadas;comportamento adequado ao pblico. Isso usabilidade emao. Quando um produto usvel, nem se pensa no conceito deusabilidade. O problema est quando o produto no se adqua aoutilizador. A usabilidade um caminhar progressivo em direoao utilizador, e no o contrrio.Na internet a usabilidade no basta, mas correspondea uma boa parte do caminho. Se considerarmos oexemplo de uma loja online, veremos que algosimples: se um usurio no encontra um produto, noo compra. Fazer com que o utilizador encontre o queprocura usabilidade em ao.Um site tem, em uma perspectiva otimista, entre 10 e 15segundos para convencer, por isso todos os elementos da pgina Unidade 1 37 34. Universidade do Sul de Santa Catarina precisam ser avaliados, pesados, medidos em termos de impacto. Um dos fatores mais apontados para pginas Web a velocidade de carregamento. Um usurio que espera dez segundos para uma pgina carregar, tende a desistir da visita. Todos os elementos grficos necessitam ser altamente otimizados (tamanho, qualidade, interesse). Sempre de boa prtica, verificar se todas as imagens so necessrias. Questionar se todos os elementos grficos so fundamentais. Tratando de aplicaes corporativas, esse questionamento deve ser realizado com muito mais seriedade. Aplicaes corporativas no necessitam vender um produto, mas maximizar a funcionalidade. Um layout deve ser consistente e implementado com o foco da aplicao. O layout deve mostrar a filosofia, a ideia central em que a aplicao desempenha dentro da empresa. Cada empresa tem uma linguagem, uma imagem que o layout do site necessita sublinhar. O layout dever ser concebido a partir do ponto onde se pretende que o usurio inicie a movimentao visual. A distribuio dos elementos e as cores escolhidas so importantssimas, normalmente os olhos movimentam-se da esquerda para a direita e de cima para baixo. Figura 1.11 - Simulao do movimento dos olhos ao ler uma pgina Web. Fonte: Elaborada pelo autor (2010). Esse formato indica que o layout ideal aquele que leva o usurio sempre a observar primeiro os elementos superiores38 35. Linguagens de Programao IIIesquerdos, normalmente utilizados em muitos sites e softwarescomo uma rea reservada para logotipo, aps este ponto descendoem diagonal. Os olhos procuram normalmente primeiro oselementos maiores e s depois os menores. A cor influencia, atendncia primeiramente observamos os elementos mais escurose s depois os mais claros.Quando falamos de layout, sempre devemos levar emconsiderao a coerncia e o equilbrio do visual apresentado.No devemos imprimir um layout onde os elementos grficossejam maiores que as informaes textuais. No caso deformulrios, devemos evitar cadastros longos. Normalmente osformulrios devem estar totalmente visveis na janela do browser.Existe uma tcnica de avaliar o equilbrio da tela, devemos traaruma linha imaginria vertical ou horizontalmente em metadeda tela. As medidas devem conter aproximadamente a mesmaquantidade de texto.Seo 4 HTMLHTML a linguagem padro de todos os browsers. Portanto, fundamental que voc conhea e entenda muito bem estalinguagem.Os comandos HTML so representados no texto por meio de tags.O browser interpreta como tags todos os elementos HTML vlidosque estejam entre os sinais menor que (). Suasintaxe bsica :DescrioAlgumas tags podem ter um ou mais atributos, que definemalguma caracterstica especial. As tags permitem que voc crieatributos novos. O browser ir ignorar os atributos conhecidos.Esse artifcio permite que voc adicione caractersticas nicasUnidade 1 39 36. Universidade do Sul de Santa Catarina para cada elemento do HTML. As tags com atributos so formatadas da seguinte forma:

teste

Clula Veja que, no exemplo, o pargrafo est sendo centralizado. J a tabela possui uma borda aparente. Todo o documento HTML possui uma estrutura de hierarquia. Essa estrutura inicia com a identificao do documento por meio da tag . Dentro do documento, a estrutura separa em cabealho e corpo.Teste

teste

Clula A tag delimita a parte do documento sendo o cabealho. O cabealho onde se encontram as informaes do documento. Nenhuma informao contida dentro desse bloco deve conter informaes a serem escritas no browser. Alm de informaes de configurao da pgina, a tag informa o ttulo do documento, que ser apresentado na barra superior do browser. Essa tag deve sempre estar dentro do cabealho. A tag contm o corpo do documento. Essa tag contm em seu interior toda a informao que ser mostrada em sua pgina. Os textos, as imagens, os formulrios, tudo que ser40 37. Linguagens de Programao IIIapresentado pelo browser. Os atributos dessa tag definemcores para os textos, links, imagem de fundo, entre outrascaractersticas.O HTML ainda oferece uma srie de tag que so utilizadaspara formatar as informaes nele contidas. Podemos formatartextos de ttulos utilizando as tags at . A numeraorepresenta os nveis dos ttulos. Teste de ttulosTtulo 1 Ttulo 2 Ttulo 3 Ttulo 4 Ttulo 5 Ttulo 6 O browser interpretar da seguinte forma:Figura 1.12 - Tags de formatao.Fonte: Elaborada pelo autor (2010).Unidade 1 41 38. Universidade do Sul de Santa Catarina Alm das tags de ttulos, as quebras de linhas e pargrafos so muito utilizadas em textos e formatao de formulrios. O HTML usa comandos especiais para definir a quebra de um pargrafo ou de uma linha. A tag

indica a quebra de pargrafos, ela insere automaticamente uma linha em branco. O uso da tag de pargrafo pode ser feito em uma nica linha ou em bloco, esse uso opcional. O comando

permite alinhar o pargrafo dentro do documento.

Teste de pargrafos

Alinhado esquerda

Alinhado ao centro

Alinhado direita

Justificado - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste - teste - teste - teste - teste - teste - teste - teste -teste - teste - teste - teste - teste - teste - teste - teste - teste - teste - teste- teste - teste - teste -

Como fica no browser:42 39. Linguagens de Programao IIIFigura 1.13 - Tags de pargrafo e alinhamento de texto.Fonte: Elaborada pelo autor (2010).Em vez de inserirmos uma quebra de pargrafo, pode sernecessria uma quebra de linha somente. Neste caso, devemosutilizar a tag
, pois ela finaliza a linha atual e passa para aprxima. Esse elemento no utilizado em bloco. Portanto, obrowser quando a encontra entende que o texto posterior a ela colocado em uma nova linha. Teste de quebra de linha Quebra de linha
Nova linha O browser interpreta da seguinte forma:Unidade 1 43 40. Universidade do Sul de Santa Catarina Figura 1.14 - Tag de nova linha. Fonte: Elaborada pelo autor (2010). A tag informa ao browser que deve interpretar o texto conforme foi digitado.Teste de pr-formataoTexto pr-formatado.O browser interpretar exatamente desta forma que est sendo digitado.Inclusive com espaos em branco O browser interpreta desta forma:44 41. Linguagens de Programao IIIFigura 1.15 - Tag de pr-formatao.Fonte: Elaborada pelo autor (2010).Por ser uma linguagem de formatao, o HTML tambmpermite alterar o estilo do texto. Como aplicar negrito, itlico,sublinhado, subscrito, entre outros. Teste de formatao de textoTexto em negrito
Texto em itlico
Texto sublinhado
Texto sobrescrito
Texto subscrito
Almenta a fonte
Reduz a fonte Unidade 145 42. Universidade do Sul de Santa Catarina No browser fica assim: Figura 1.16 - Tags de alterao de estilo. Fonte: Elaborada pelo autor (2010). O HTML ainda possibilita a configurao da fonte de texto. O elemento utilizado a tag . Alm do elemento, ainda possvel manipular algumas informaes por meio dos atributos, como tamanho e cor da fonte.Teste de fonte de texto Teste fonte Verdana
Testefonte arial
Teste fonte Times New Roman
Teste fonte Tahoma
Teste fonte Lucida
Teste fonte Courier
46 43. Linguagens de Programao IIIO browser interpreta da seguinte forma:Figura 1.17 - Tags manipuladores de fontes.Fonte: Elaborada pelo autor (2010).Uma das tags extremamente utilizadas em uma tentativa detornar os layouts mais amigveis e atrativos para os usurios.Esta tag a

, ela tratada tambm como camada visualem DHTML. J no HTML bsico utilizado como bloco dealinhamento horizontal. Teste de Div
Usando a TAG DIV:

Usando a TAG DIV voc pode alinhar seu texto sem problemas.

Pode utilizar o alinhamento direita, que alinha seu texto na margem direita da tela. Como um texto criado em editor de textos para ser impresso em uma pgina.

Com a TAG DIV voc pode aproveitar o mesmo alinhamento para vrios pargrafos.

Unidade 147 44. Universidade do Sul de Santa Catarina O browser interpreta da seguinte forma: Figura 1.18 - Tag de camadas. Fonte: Elaborada pelo autor (2010). Uma forma de organizar as informaes dispostas no browser a utilizao de listas. As listas podem servir como resumos ou ndices de todo o site, contendo links para outras pginas. Podemos dividir as listas em trs tipos: listas no ordenadas; listas ordenadas ou numeradas; listas descritivas. As listas no ordenadas representam a formatao simples de informaes por meio de indicadores. A tag do comando a
  • e seus tpicos so a
  • . Podemos ainda alterar o tipo do marcador pelo atributo type da tag
    • .48 45. Linguagens de Programao IIITeste de Lista no Ordenada
      • Tpico 2
      • Tpico 3
      • Tpico 4
      • Tpico 2
      • Tpico 3
      • Tpico 4
      • Tpico 2
      • Tpico 3
      • Tpico 4
      O browser interpretar da seguinte forma:Teste de Lista Ordenada
    1. Tpico 2
    2. Tpico 3
    3. Tpico 4
    1. Tpico 2
    2. Tpico 3
    3. Tpico 4
    Unidade 1 49 46. Universidade do Sul de Santa Catarina
    1. Tpico 2
    2. Tpico 3
    3. Tpico 4
    1. Tpico 2
    2. Tpico 3
    3. Tpico 4
    1. Tpico 2
    2. Tpico 3
    3. Tpico 4
    Figura 1.19 - Tags de listas no ordenadas. Fonte: Elaborada pelo autor (2010). As listas ordenadas no possibilitam enumerar os tpicos por meio de nmeros ou em ordem alfabtica. A tag utilizada a
    1. , alm do atributo type que define o tipo de numerador, a tag possui um segundo atributo, o start. Esse atributo informa ao browser em qual nmero a lista deve iniciar.50 47. Linguagens de Programao IIIA apresentao no browser ser:Figura 1.20 - Tags lista ordenada.Fonte: Elaborada pelo autor (2010).As listas descritivas so diferentes das outras listas. Essa listainicia pela tag . Cada item de uma lista descritiva possui doiscomponentes: um tpico e uma descrio do tpico . Teste de Lista DescritivasTpico 1Descrio do tpico 1Tpico 2Descrio do tpico 2Tpico 3Descrio do tpico 3O browser deve apresentar da seguinte forma: Unidade 1 51 48. Universidade do Sul de Santa Catarina Figura 1.21 - Tags de lista descritivas. Fonte: Elaborada pelo autor (2010). Outra funcionalidade que amplamente usada em praticamente todas as pginas da internet o link ou hipertexto. Essa funcionalidade representa a ligao primitiva entre as pginas formando a teia da internet. Os links proporcionam a ligao entre pginas e textos da prpria pgina. Essa ligao interna utilizada principalmente em textos longos com tpicos especficos. Os links para outras pginas podem ser classificados como locais e externos. Os links locais representam uma ligao com uma pgina que est salva no mesmo local da pgina principal. Isso significa que a pgina que est sendo acessada far uma referncia direta a outro arquivo, sem a necessidade de utilizar o protocolo HTTP. O cdigo para esse tipo de link se torna extremamente simples:Acessar a segunda pgina J quando tratamos de links externos, o link necessita realizar a chamada pelo protocolo HTTP.Acessar o GoogleAcessar pgina trs em outrosdiretrio52 49. Linguagens de Programao IIIPorm, quando o acesso se tornar de ncora para uma parte dotexto da prpria pgina, a sintaxe do HTML se altera um pouco:Link de Texto (Ancora)Tabela
      AtalhosTabelasRecursoCriando tabelas com um tecladoVantagemVoc pode capturar informaes tabulares de forma rpida e fcilSituaesReunies, apresentaes, debates pessoaisTente agora 1. Coloque o cursor ao final da palavra Produto abaixo: Produto 2. Pressione TAB e digite Quantidade. 3. Pressione TAB novamente e digite preo. 4. Pressione ENTER. 5. Pressione TAB para passar de uma clula a outra e digite algumainformao nas clulas. 6. Pressione ENTER ao final da linha. 7. Tente pressionar TAB abaixo, aps Joo e aps Maria: Pessoa Dinheiro que lhes devo Joo MariaUnidade 1 53 50. Universidade do Sul de Santa CatarinaAtalhos teis: ALT + ENTER insere outra linha dentro de uma clula (quandoENTER no funciona na ltima clula de uma tabela). CTRL + ENTER insere uma linha abaixo. CTRL + ALT + E, R insere uma coluna esquerda ou direita.Alm disso, tente fazer experincias com DEL, BACKSPACE, HOME, ENDe ENTER em vrios pontos da tabela. Verifique os Atalhos do Teclado noOffice Online para descobrir outras funes de tabela que podem serexecutadas em um teclado. Alm dos hipertextos, as tabelas so elementos amplamente utilizados na internet. Ela no faz nenhuma ligao com outras pginas, mas organiza de uma forma matricial qualquer dado da pgina, tanto textos como outros elementos. No caso das aplicaes, as tabelas so utilizadas para organizar o formulrio na pgina. Quando voc domina o uso das tabelas, acaba tendo uma enorme facilidade em criar layouts organizados. As informaes so dispostas de forma mais clara para o usurio. Quando usada com as folhas de estilos CSS, tornam-se ainda mais amigveis. Porm, o prprio CSS responsvel pelo declnio no uso das tabelas para melhoramento dos layouts de pginas. Uma tabela pode ser criada de forma simples, apenas para organizar algum elemento ou mesmo o texto que voc queira utilizar. O padro das tabelas no conter bordas. As tabelas so dispostas por linhas e clulas, apesar de no browser dar a falsa impresso que possui colunas.54 51. Linguagens de Programao IIIExemplo de TabelaLinha 1 Clula 1Linha 1 Clula 2Linha 1 Clula 3Linha 1 Clula 4Linha 2 Clula 1Linha 2 Clula 2Linha 2 Clula 3Linha 2 Clula 4Linha 3 Clula 1Linha 3 Clula 2Linha 3 Clula 3Linha 3 Clula 4O browser interpreta desta forma: Unidade 1 55 52. Universidade do Sul de Santa Catarina Figura 1.22 - Tag de tabelas. Fonte: Elaborada pelo autor (2010). Os atributos das tabelas podem alterar a aparncia, como a disposio do contedo. As bordas, o alinhamento do contedo, o espaamento entre as clulas, os espaos entre os dados e a prxima clula, entre outros, podem ser alterados. Alguns dos mais usados so: width - atributo que manipula a largura da tabela em relao ao browser, pode ser tratado com pixels ou percentual relativo. height - atributo responsvel pela altura da tabela em relao ao browser, pode ser tratado com pix.els ou percentual relativo. border - atributo que trata da espessura da borda em pixels. cellspacing - atributo responsvel pelo espao entre uma clula e outra tratado em pixel. celladding - atributo responsvel pelo espao entre os dados e a borda da tabela tratado em pixels.56 53. Linguagens de Programao III Procure pesquisar sobre os atributos das tabelas. Eles so de grande auxlio no desenvolvimento e na apresentao.Atributos de clulasLinha 1 Clula 1Linha 1 Clula 2Linha 1 Clula 3Linha 1 Clula 4Linha 2 Clula 1Linha 2 Clula 2Linha 2 Clula 3Linha 2 Clula 4Linha 3 Clula 1Linha 3 Clula 2Linha 3 Clula 3Linha 3 Clula 4Unidade 1 57 54. Universidade do Sul de Santa CatarinaTabela com atributosLinha 1 Clula 1Linha 1 Clula 2Linha 1 Clula 3Linha 1 Clula 4Linha 2 Clula 1Linha 2 Clula 2Linha 2 Clula 3Linha 2 Clula 4Linha 3 Clula 1Linha 3 Clula 2Linha 3 Clula 3Linha 3 Clula 4 J no browser fica:58 55. Linguagens de Programao IIIFigura 1.23 - Propriedade de tabela.Fonte: Elaborada pelo autor (2010).As clulas, por sua vez, possuem atributos que so igualmentefundamentais para uma boa utilizao das tabelas. Voc podemanipular o alinhamento vertical e horizontal, a cor da clula,se o texto poder ou no ter quebra automtica de linha, entreoutras.O browser interpreta da seguinte forma:Figura 1.24 - Propriedades de clulas.Fonte: Elaborada pelo autor (2010).Como voc pode notar, a estrutura da tabela sempre tender aum ajuste automtico. Ou seja, todas as clulas da mesma ordemso foradas a assumir a caracterstica que define o tamanho deuma clula. Unidade 159 56. Universidade do Sul de Santa Catarina As linhas no fogem regra, voc pode utilizar alguns atributos como cor, alinhamento, entre outros. Lembre-se sempre que os atributos da linha modificaro todas as clulas contidas nela. Os atributos das clulas e das linhas podem auxili-lo de forma surpreendente, procure pesquisar mais sobre quais so e como utiliz-los. As clulas e as linhas ainda podem ser mescladas. Esse artifcio muito utilizado para facilitar a organizao das informaes. Para mesclar as clulas de uma mesma linha, utilize o atributo colspan e o nmero de clulas que voc est mesclando. J para mesclar clulas de linhas diferentes, utilize o atributo rowspan e o nmero de clula que voc est mesclando.Tabela Mesclando ClulasLinha 1 Clula 1Linha 1 Clula Mesclada 2 - 3 - 4Clula 1- Linhas 2 e 3 mescladasLinha 2 Clula 2Linha 2 Clula 3Linha 2 Clula 4Linha 3 Clula 2Linha 3 Clula 3Linha 3 Clula 460 57. Linguagens de Programao IIIA apresentao no browser fica:Figura 1.25 Mesclando clulas.Fonte: Elaborada pelo autor (2010).Os formulrios so utilizados em todas as aplicaes Webcom base em HTML. O formulrio possibilita ao usurioentrar com informaes destinadas ao servidor. Estes, por suavez, processam e devolvem uma resposta. Os formulrios noprocessam as informaes. Essa responsabilidade efetuada porum interpretador no servidor, como o caso do ASP ou PHP. Ointerpretador ASP l os dados imputados do formulrio e realizaras instrues contidas no programa. Aps o trmino, remete parao usurio o carregamento completo.Uma linguagem Server-side, como o ASP, podem ser utilizadasde diversas formas. Podemos relacionar algumas: processar as requisies e os dados enviados pelo usuriopor meio de formulrios; tornar-se uma interface entre HTML e banco de dadosSQL, fazendo a converso da transao HTML paraSQL e vice-versa; converter dados do sistema em HTML gerandorespostas para o cliente.Unidade 1 61 58. Universidade do Sul de Santa Catarina Os scripts ou programas so escritos em linguagens compatveis com a plataforma sob a qual o servidor est rodando e devem produzir arquivos executveis. Os elementos de um formulrio so definidos separadamente. Na definio do formulrio, voc informa o local do programa (CGI, ASP, PHP) que controlar o formulrio e a forma ou o mtodo como os dados sero enviados para o servidor. A tag utilizada para o formulrio o form. Essa tag possui atributos que definem o destino do formulrio, o mtodo de envio, o nome, entre outros. Sobre esses atributos, podemos relacionar: method: define o mtodo utilizado pelo servidor para receber os dados do formulrio. Este atributo pode receber dois valores: post: mtodo que transmite toda a informao doformulrio incorporada no documento do HTML; get: anexa o contedo do formulrio ao endereo daURL, possui limitao de tamanho das informaes; action: especifica o programa ou a pgina do servidor que processar os dados do formulrio; name: define o nome do formulrio. Os elementos de formulrio so campos destinados a receber dados do usurio. Os mais utilizados so: input, select, textarea. a) Elemento input O elemento input de longe o mais utilizado. Sua configurao grfica varia conforme os valores do atributo type. Visualmente pode variar de uma caixa de texto para um boto. Os principais atributos deste elemento so:62 59. Linguagens de Programao III type - define o tipo de entrada que o elemento ser: text - campo simples de entrada de texto, utiliza comoprincipais atributos associados: type, name, value, size,maxlength. password - texto protegido, no possvel visualizar oscaracteres digitados, utiliza como principais atributosassociados: type, name, value, size, maxlength. hidden - utiliza como principais atributos associados:type, name, value. radio - elemento com um boto de seleo nica, utilizacomo principais atributos associados: type, name, value,checked. checkbox - caixa de seleo onde pode ser checadodiversos elementos, utiliza como principais atributosassociados: type, name, value, checked. reset - boto responsvel em limpar os dados doformulrio, utiliza como principais atributosassociados: type, name, value. submit - boto responsvel em enviar o formulrio parao servidor, utiliza como principais atributos associados:type, name, value. image - mesma funo no atributo submit, pormo boto associado a uma imagem, utiliza comoprincipais atributos associados: type, name, value, src. button - cria um boto sem ao predefinida, utilizacomo principais atributos associados: type, name, value. file - abre uma janela para selecionar arquivo, utilizacomo principais atributos associados: type, name, value. name - nome do campo ou da varivel. src - local no servidor onde a imagem deva ser carregada. value - valor default do campo. Unidade 163 60. Universidade do Sul de Santa Catarina checked - indica que o campo deve estar marcado ou no como padro. Quando no possuir valor atribudo assume true. size - define o tamanho do campo, ou seja, a quantidade de caracteres que ser exibida em campos do tipo text e password. maxlength - define a quantidade de caracteres que o campo pode receber em campos do tipo text e password.Teste formulrioCaixa de texto comum:Texto protegido por senha:Botes de Radio: Qual o seu time?FlamengoVascoCheckboxes: Que softwares voc cohece? Word Excel64 61. Linguagens de Programao IIIFirefoxBoto de Envio:Boto de Limpeza:Tipo File:O browser fica:Figura 1.26 - Formulrios, entrada de dados dos usurios.Fonte: Elaborada pelo autor (2010).b) Elemento selectO elemento select trata-se de uma lista de itens que podem serselecionados pelo usurio. Esta seleo pode se dar de forma nicaou mltipla, dependendo dos atributos que o elemento possa ter.Unidade 1 65 62. Universidade do Sul de Santa Catarina name - atributo nome do elemento. size - atributo representa a quantidade de linhas que a lista mostrar. multiple - define o tipo de seleo da lista. Caso este atributo esteja presente, a lista ter seleo mltipla. option - esta tag representa a lista propriamente dita. Define cada opo da lista, as opes devem ser definidas entre as tags selected - indica que a opo estar selecionada como default. Este atributo usado na tag option.Teste formulrio selectQuais as linguagens voc j viu?CSSHTMLXHTMLJavascriptFlash Action ScriptMicrosoft SilverlightPHPASP.NETCGI, PerlJava, J2EE, WebObjectsPython, DjangoRuby, Ruby on RailsSmalltalk SeasideColdFusion66 63. Linguagens de Programao IIIQual seu estado civilCasadoSolteiroDivorciadoVivoO browser aparecer da seguinte forma:Figura 1.27 Elemento select (combobox).Fonte: Elaborada pelo autor (2010).Unidade 1 67 64. Universidade do Sul de Santa Catarinaa) Elemento textarea Trata-se de uma caixa de texto para serem digitadas vrias linhas de dados. Este tipo de elemento utilizado quando o usurio necessita digitar um grande volume de informao. Normalmente com vrias linhas de texto. Os principais atributos so: name - atributo nome do elemento. rows - nmero de linhas da caixa de texto. cols - nmero de colunas da caixa de texto. texto - define o texto que aparecer como default.Formulrio TextAreaDigite seu comentrioPode digitaraqui! O browser interpretar da seguinte forma:68 65. Linguagens de Programao IIIFigura 1.28 - Elemento de rea de texto.Fonte: Elaborada pelo autor (2010).Voc pode relembrar alguns dos elementos do HTML. Esteselementos so fundamentais para um bom entendimento decomo o desenvolvimento da aplicao realizada e como pode sercontrolada.O HTML exposto nesta seo descreveu diversoselementos nos quais voc utilizar durante o curso.Pesquise e aprofunde seus conhecimentos buscandomais elementos e atributos que possam auxili-lo nodesenvolvimento.Unidade 1 69 66. Universidade do Sul de Santa Catarina Seo 4 Integrao de linguagens As aplicaes Web possuem um alto nvel de integrao entre as linguagens, uma vez que a plataforma em que desenvolvida no proporciona todas as facilidades e ferramentas para que possamos construir uma soluo amigvel. Quando falamos de integrao, entenda que nos referimos troca de informaes entre uma linguagem e outra por meio de tecnologias disponveis. Vamos tentar entender desta forma. Via de regra, linguagens no conversam entre si. Para superar esse obstculo, possvel utilizar alguns artifcios para que possamos alcanar os objetivos. Como j vimos, o HTML a linguagem utilizada para que o browser interprete os dados de uma forma padronizada e formatada. Vimos ainda que as linguagens server-side so responsveis por processar as informaes provenientes do HTML. Ento, como podemos resgatar as informaes de um servidor e escrever de forma dinmica? Basicamente existem duas formas de enviar informaes para o servidor via HTML. So os mtodos GET e POST. a) Mtodo GET O mtodo GET usado quando, no endereo da pgina Web, informaes so encapsuladas para serem lidas pelo servidor. Este encapsulamento pode ser feito de duas formas: escrita da url e por formulrios. Quando voc utiliza o mtodo GET no formulrio HTML, toda a informao contida no bloco form enviada pela url. Para utilizar, basta colocar na tag form o atributo method=GET e automaticamente ser processado desta forma. Usando de uma forma prtica, teramos o seguinte formulrio HTML:70 67. Linguagens de Programao IIIMtodo GetMarca : Modelo: Combustvel : Cor : Ano : Unidade 171 68. Universidade do Sul de Santa Catarina Repare que est sendo enviado para um arquivo de processamento ASP chamado Dadosget.asp. Neste arquivo onde se trabalha a diferena de requisio do formulrio. Portanto, teramos o seguinte cdigo:Processamento dados GET Dados do Automvel:




      O comando Response.Write apenas escreve na pgina. J o comando Request.querystring recupera a informao contida nos campos do formulrio. Desta forma, temos um Request. querystring para cada campo do formulrio que ser recuperado. Ainda para ilustrar, voc pode perceber que a url montada com os valores dos campos contidos no formulrio. Figura 1.29 - Recuperao de dados por meio do mtodo GET. Fonte: Elaborada pelo autor (2010).72 69. Linguagens de Programao IIIOutra forma de utilizar este mtodo escrever manualmentena url quais so os parmetros que deseja. Este mtodonormalmente utilizado nos links das pginas.Quando voc digita o endereo , entrar no site da EaD da Universia.Porm, se voc quer acessar uma notcia especfica,deve acessar: Processamento dados Post Dados do Automvel:




      Veja que agora se altera o comando para recuperao da informao, mas a estrutura a mesma. Perceba que agora a url no possui parmetros algum. Toda a informao est contida no corpo do HTML. Conter dois comandos distintos para recuperar as informaes do formulrio um padro entre as linguagens. Agora que enviamos os dados para o servidor podemos processar o retorno da informao. Normalmente esse retorno est associado a uma busca no banco de dados e a aplicao das regras de negcio sobre essa informao. Quando se envia o resultado, podemos utilizar a forma mais bsica para interagir as linguagens Server-side com as Client-side: as linguagens Server-side escrevem as linguagens Client-side. Como as linguagens Server-side so executadas no servidor, elas so processadas antes que a informao chegue ao browser. Assim, tm-se as respostas prontas para serem formatas conforme a necessidade e possibilitando a adequao das linguagens Client- side como o HTML e Javascript.74 71. Linguagens de Programao III Ateno! Todo o browser possui um tempo de espera da resposta do servidor. Quando um processamento no servidor for muito demorado, o browser interpretar que a conexo com o servidor no existe mais e no receber resposta. Assim sua aplicao ir gerar um erro pelo simples fato de estar com um processamento muito elevado.A tecnologia est sempre em constantes alteraes e inovaes.Procure pesquisar e manter-se atualizado sobre as novastendncias que esto surgindo.SnteseDurante esta unidade voc viu como possvel identificaruma aplicao Web e como ela trabalha conceitualmente.Voc estudou sobre a importncia do HTML e como utilizarformulrios e seus atributos.Percebeu que, apesar de o HTML ser uma linguagem simples,possui diversas opes que apresentam variaes significativas.Para finalizar, voc viu ainda que existem diversas linguagensdisponveis para o seu aprendizado, mas todas compartilham dosmesmos conceitos aqui vistos. Unidade 1 75 72. Universidade do Sul de Santa Catarina Atividades de autoavaliao Ao final de cada unidade, voc ser provocado a realizar atividades de autoavaliao. O gabarito est disponvel no final do livro-didtico. Mas se esforce para resolver as atividades sem ajuda do gabarito, pois assim voc estar estimulando a sua aprendizagem.1) Voc viu diversas utilidades para as aplicaes Web. Cite e comenteduas vantagens e duas desvantagens de uma aplicao Webtop.2) As aplicaes Web possuem diversas linguagens que podem ser classificadas como Server-side e client-side. Com base nesta afirmao, enumere a segunda coluna de acordo com a primeira. 1 Linguagem Server-side ( )PostgreSQL 2 Linguagem Client-side ( )HTML ( )Oracle ( )SQLite ( )Javascript ( )Microsoft Silverlight ( )PHP ( )MySQL ( )ASP ( )DB2 ( ).NET ( )CGI ( )Perl ( )Java76 73. Linguagem de Programao III ( )CSS ( )Python ( )Microsoft SQL Server ( )Ruby ( )Firebird ( )ColdFusion ( )Websphere ( )Flash3) Voc viu a importncia do HTML e como ele necessrio para o desenvolvimento Web. Viu tambm como existem diversos atributos que manipulam aparncia e em alguns casos os dados que existem neles. Qual o limite de atributos que podemos utilizar em cada tag?Saiba maisSe voc desejar, aprofunde os contedos estudados nesta unidadeao consultar as seguintes referncias:W3Schools. W3Schools Online Web Tutorials, 2010.Disponvel em: . Acesso em: 01 mar.2010.W3C. World Wide Web Consortium, 2010. Disponvel em:. Acesso em: 2 mar. 2010.77 74. 2unidade 2JavaScriptObjetivos de aprendizagemAo final do estudo desta unidade, importante que voc: Identifique os elementos do Javascript. Compreenda a sintaxe da linguagem. Conhea os principais comandos do Javascript.Sees de estudoSeo 1JavaScript aplicadoSeo 2Tipos de dadosSeo 3Elementos de linguagemSeo 4Scripts JS 75. Universidade do Sul de Santa Catarina Para incio de estudo A linguagem JavaScript possui a caracterstica de ser client- side, ou seja, o browser se encarrega de interpretar seu cdigo. Por causa disso, existem ligeiras diferenas nesta interpretao. A linguagem a mesma para qualquer browser, porm as aes dos browsers divergem um pouco uma das outras. Essas divergncias proporcionam chamadas de eventos distintas, alm de interpretaes de aes diferenciadas como a captura das aes de teclas. O JavaScript uma linguagem simples, porm extremamente poderosa. Foi concebida inicialmente pela Netscape e teve forte colaborao da Sun Microsystems, empresa responsvel pela linguagem Java. Existe uma discusso sobre o JavaScript ser ou no orientada a objetos. A prtica mostra que ele possui acesso e comportamento de uma linguagem orientada a objetos. Mas esses recursos so limitados e sua programao feita de forma estruturada acessando, quando necessrios, os recursos de orientao a objetos. Essa linguagem amplamente conhecida e divulgada como JavaScript, j a verso produzida pela Microsoft foi concebido o nome de JScript. Porm, tratam-se de implementaes que sendo fiis norma ECMAScript lhe acrescentaram novas funcionalidades teis, mas respeitando sempre as especificaes oficiais. Vale lembrar que JavaScript no Java e que a grande semelhana consiste apenas nome. Seo 1 JavaScript aplicado O JavaScript trabalha com os elementos do HTML de forma a conceitu-los como objetos a serem acessados. Assim todos os elementos existentes em uma pgina Web so transformados80 76. Linguagens de Programao IIIem objetos pelo JavaScript. Internamente so criados objetosque permitem aos usurios criarem novos objetos dependo danecessidade. Durante o carregamento da pgina, o JavaScript criaos objetos em uso com suas respectivas propriedades e valores queso ajustados pelo contedo da prpria pgina.Qualquer objeto JavaScript possui uma hierarquia que deve serrespeitada. Cada propriedade pode ser acessada descrevendo todaa hierarquia que se segue.Figura 2.1 - Hierarquia dos objetos do Javascript.Fonte: JavaScript aplicaes interativas para a Web (2006).A figura 1 representa a hierarquia de objetos do JavaScript.Veja que vrios objetos so filhos de outros, e para acessar o filhotemos de escrever todo o caminho a ser percorrido at ele. Assim,se desejamos acessar a propriedade form, devemos primeiramenteacessar o objeto document separando-os por ponto: document.formEsta forma hierrquica de chamadas dos objetos HTML sosempre utilizadas no JavaScript. Assim como as chamadas dosmtodos de cada objeto.O JavaScript permite omitir o objeto window, uma vezque considera todos os objetos da pgina esto abaixodesse objeto. Assim, o exemplo anterior pode serescrito como: document.form. Unidade 281 77. Universidade do Sul de Santa Catarina Todo o objeto do JavaScript possui caractersticas que podem ser manipuladas. A essas caractersticas damos o nome de propriedades. Podemos dizer ento que o objeto form uma propriedade do objeto document. Assim como esse mesmo objeto document possui outras propriedades que no so objetos como a propriedade title. Alm das propriedades, existe mais um conjunto de atribuies que so denominados de mtodos. Cada mtodo est associado a um objeto existente no documento fazendo parte do seu escopo de atuao. Mtodos so funes predefinidas pela linguagem para executar uma operao especfica. Caso necessitamos que algo seja escrito em um documento, podemos utilizar um mtodo para exibir um texto qualquer. Ateno! Nunca utilize mtodos em objetos que no o contenham, caso contrrio causar erro no script. Os mtodos so usados comumente para alterar o valor de uma propriedade ou executar tarefas distintas. A sintaxe representada da seguinte forma:nomeObjeto.metodo(argumento) Vale ressaltar que o argumento pode ser opcional ou obrigatrio, dependendo do mtodo associado ao objeto. Com essas informaes, voc sabe como formada a linguagem, como o JavaScript foi construdo. Assim, podemos sempre ter em mente que qualquer algoritmo desenvolvido sobre essa linguagem dever sempre respeitar esses padres. O JavaScript pode ser escrito de duas formas: embutida no cdigo HTML ou em um arquivo externo com a extenso js.82 78. Linguagens de Programao IIIAmbas as formas no alteram a sintaxe da linguagem. Porm,a forma que feita a referncia necessita de cuidado especial.Quando est embutida no cdigo, devemos utilizar as tags scriptda seguinte forma:Teste(...)Os atributos language e type no necessitam estar discriminadosna tag script, porm a especificao tcnica que foi construda pelaECMAScript recomenda o seu uso.Este padro o oficialQuando queremos utilizar um arquivo externo, a tag scritptreconhecido pelasrecebe um novo atributo. Esse atributo onde indicamos o local indstrias.e o nome do arquivo JS. Quanto ao arquivo, basta escrever oJavaScript normalmente. Veja a seguir:Teste...Perceba que, quando chamamos um arquivo externo, a tagno pode conter um script. Caso seja necessrio, basta abriruma segunda tag script e escrever o cdigo. A tag script podeser escrita em qualquer parte do cdigo, porm aconselhvelUnidade 2 83 79. Universidade do Sul de Santa Catarina utilizar antes do corpo da pgina, j que existem formas de realizar as chamadas JavaScript antes do carregamento total da pgina. Desta forma ocorrer um erro caso a chamada venha antes da escrita da funo. Uma prtica que os desenvolvedores utilizam para auxiliar na documentao do cdigo em qualquer software o uso dos comentrios de cdigo. Esse tipo de declarao normalmente feita por meio de comandos especiais em que a linguagem permite que o desenvolvedor adicione qualquer tipo de informao indicado ao interpretador do programa que deve ignorar qualquer tipo de instruo contida. Assim, o JavaScript, como as demais linguagens, permite que seja comentado todo o cdigo que produzimos, tornando-o mais legvel e mais fcil de mant-lo. Um comentrio adequado do cdigo que voc produz torna mais fcil realizar alteraes e melhorias mais tarde. O compartilhamento de cdigos (muito comum no desenvolvimento Web) com outras pessoas torna os comentrios ainda mais importantes para que os outros entendam aquilo que voc escreveu. Em JavaScript podemos usar comentrios de linha e comentrios de bloco. Os comentrios de linha comeam com os caracteres //. Isso d ao interpretador de JavaScript a indicao de que o resto da linha um comentrio. Deste modo, este ignora o resto da linha, continuando a interpretar o cdigo na linha seguinte. Um comentrio de bloco inicia com a abertura do bloco por meio do comando /* e continua at ser encontrada a sequncia de caracteres */, que marcam o fim do comentrio. Ao encontrar a sequncia /*, o interpretador de JavaScript procura imediatamente a sequncia de finalizao */, continuando a a interpretao do cdigo e ignorando o que est no meio. A seguir esto alguns exemplos de comentrios em JavaScript.84 80. Linguagens de Programao III// Comentrio de linha/* Comentrio de bloco, mas apenas utilizando uma linha *//*Comentrio de bloco utilizando vrias linhas. Qualquer comando escritodentro do bloco ignorado pelo interpretador. Inclusive o comando deabertura de bloco /* ou ainda o comentrio de linha //Todas as informaes so ignoradas.*/Os blocos no so exclusividade dos comentrios. Eles soencontrados em diversos comandos do JavaScrpt. Os blocosso encontrados nos laos de deciso e repetio. Ainda soencontrados nas funes para delimitar seu contedo. Isso seconsegue colocando-as entre chaves ({ }).-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo de bloco Digite um valor inteiro e positivo Unidade 2 85 81. Universidade do Sul de Santa Catarina Fatorial Veja que nesse exemplo as funes esto delimitadas por blocos e seu contedo interno fica restrito ao bloco. Seo 2 Tipos de dados Assim como outras linguagens, o JavaScript possui uma padronizao quanto aos tipos de objetos. Podemos relacionar os tipos: numrico, lgico, caractere. O tipo caractere pode ser chamado tambm como string. Representa uma sequncia de caracteres, podendo esta ser qualquer caractere (pontuao, smbolo, nmeros, letras etc.). O seu limite de contedo depender do navegador que est interpretando. Os seus valores so delimitados por aspas simples ou duplas. Exemplo: texto ou texto. Toda a atribuio realizada a uma varivel contendo uma String contm internamente na linguagem a herana do objeto String. Isso significa que essa varivel tem um comportamento da uma instncia do objeto String, esto aptas a utilizar as propriedades e os seus mtodos.86 82. Linguagens de Programao III -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo de StringVeja que no exemplo anterior est sendo utilizada uma funochamada write. Essa funo escreve no HTML algumainformao. A varivel str est sendo atribuda com um valorde caractere. Com isso, ela herda os mtodos da classe String epodemos utilizar o mtodo substr, que recupera um pedao deuma string. O resultado no browser :Figura 2.2 - Exemplo de string.Fonte: Elaborada pelo autor (2010).Essa caracterstica se assemelha e muito com o mtodo deorientao a objetos. Porm, no se pode considerar umaUnidade 2 87 83. Universidade do Sul de Santa Catarina linguagem orientanda a objetos, j que no obrigatria sua construo nessa metodologia. Outro tipo de dados de suma importncia so os numricos. Esse tipo de dado armazena valores, tanto inteiros como ponto flutuante (decimal). 23 1 2e10 3.98733 8990.09889 0.0999898 Os valores numricos so utilizados normalmente em operaes aritmticas (adio, subtrao, multiplicao e diviso). Podendo estarem sendo utilizados em laos de deciso e repetio. O JavaScript possui uma boa quantidade de funes para manipulao de valores numricos, como funes trigonomtricas, funes de arredondamento e exponencial, funes de transformao de tipos, entre outras. Existem alguns valores numricos especiais, so eles: NaN o valor NaN, nos tipos de dados numricos, a abreviao de Not a Number (No um Nmero). O JavaScript apura esse valor normalmente quando ocorre alguma operao invlida com o tipo de dados numricos. Um exemplo clssico o resultado da operao (0/0), resultar no NaN. Infinity: representa um valor infinito, podendo ser tanto positivo quanto negativo. Todas as operaes com valores infinitos resultaro em um valor infinito, exceto diviso e subtrao que resultar no NaN.88 84. Linguagens de Programao IIIO JavaScript ainda possui outros tipos de dados, como: Lgicos,Null e Undefined. Lgicos: os valores lgicos podem assumir dois valores, true (verdadeiro) e false (falso). So utilizados normalmente como controle de deciso. Null: este tipo de dado um valor especial, representa um objeto nulo, no deve ser confundido com uma varivel no inicializada, pois o valor null existe. Portanto, uma varivel com o contedo null existe em memria, referenciando este objeto especial. Undefined: o valor undefined significa que a varivel no foi instanciada, ou seja, no foi atribuda um valor. Inicialmente todas as variveis se encontram neste estado.Seo 3 Elementos de linguagemEmbora JavaScript tenha algumas semelhanas com outraslinguagens, ele uma linguagem diferenciada em algunsaspectos. O JS possui variveis, operadores l gicos, operadoresaritmticos, laos de repetio, laos de deciso, entre outros.Nesta seo, abordaremos com mais detalhes alguns dessesaspectos.a) VariveisAs variveis no JavaSscript podem ser de dois tipos: variveisglobais e variveis locais. Ambas podem suportar quaisquertipos de valores. Porm, o que diferencia o escopo e a forma dedeclarao da varivel.A varivel local para ser declarada deve ser antec edida pelapalavra reservada var. Essa declarao pode ser feita a qualquer Unidade 2 89 85. Universidade do Sul de Santa Catarina momento dentro de uma funo e poder ser acessada somente dentro dela:var nome;var ano=2009; Ao tentar acessar uma varivel local fora da funo em que ela foi declarada, ser gerado um erro porque a varivel s existe no universo da funo que foi declarada. Essa varivel no faz parte do mundo exterior a essa funo e como tal no pode ser utilizada. A varivel global deve ser antecedida pela palavra reservada var ou receber uma atribuio de valor. O seu escopo acessvel em toda a pgina, sendo que no transmitida de uma pgina para outra. As variveis podem ser declaradas da seguinte forma:valor = 19;var numero = 3;fruta = Morango;var fruta2 = Banana;pi = 3.14159; Nesses exemplos podemos considerar que todas as variveis declaradas sero variveis globais. Como j vimos, para declarar variveis cuja existncia se limita a uma pequena seo do cdigo (varivel local) teremos de usar a declarao var, assim: var numero = 3. Caso usemos essa declarao fora de qualquer funo, isto , a varivel declarada na base da estrutura de cdigo, ela ser global. Temos assim que a declarao var serve para limitar o contexto em que a varivel existe e que: as variveis declaradas sem a declarao var so variveis globais; as variveis declaradas usando a declarao var existem apenas no contexto em que foram definidas.90 86. Linguagens de Programao IIIAntes de comear a escrever cdigo em JavaScript, importanteplanejar o modo como este ser organizado. Deve-se comear aidentificar os dados que sero utilizados. A seguir escolhem-se osnomes das variveis que guardaro esses dados e s depois quese comea a escrever o cdigo propriamente dito.Alm do seu escopo, algumas regras quanto ao nome devem serrespeitadas para que o interpretador possa trabalhar livremente: todos os nomes tm de comear com uma letra ou com o caractere; os restantes caracteres que compem o nome podem igualmente conter nmeros. Nunca se esquea que para o JavaScript letra maiscula e letra minscula so coisas diferentes e que, por exemplo, as variveis variavel1, Variavel1 e vaRiavel1 so trs objetos distintos.Muitas vezes nos deparamos com a necessidade de escreveralgum caractere dentro de uma String, mas seu uso reservadocomo o caso das aspas. Para isso, utiliza-se a contrabarra dentroda string. Isso indica para o browser que a sua utilizao faz parteda string, e no um smbolo de comando. -//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo de StringVoc pode notar que somente obrigatrio o uso da contrabarraquando o interpretador pode confundir o trmino de uma string. Unidade 2 91 87. Universidade do Sul de Santa Catarina Veja que a string est delimitada por aspas duplas e quando utilizada aspas simples dentro da string o uso da contrabarra opcional. Desta forma, o browser interpretar o comando. Fig ura 2.3 - Exemplo de contrabarra. Fonte: Elaborada pelo autor (2010). Assim como outras linguagens, o Javascript necessita de alguns caracteres especiais para poder armazenar ou imprimir alguma informao que tenha conflito com sua linguagem. Veja o quadro a seguir: Tabela 2 Referente a caracteres especiais. CaractereDescrio n Insere uma quebra de linha. t Insere uma tabulao. r Insere um retorno. f Insere um caractere de barra. t Tabulao. Apstrofo. Aspas.Barra invertida. Caractere representado pela codificao Latin-1. ExemploXXX 251 representa o caractere de copyright . Fonte: Javascript aplicaes interativas para a Web (2006). Representado os cdigos dentro de um script teramos:92 88. Linguagens de Programao III-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo de contra-barraO browser interpretar da seguinte forma:Unidade 2 93 89. Universidade do Sul de Santa Catarina Figura 2.4 Exemplo do uso de caracteres especiais. Fonte: Elaborada pelo autor (2010) Perceba que a interpretao dos comandos depende no somente do JavaScript mas do meio que ir ler. Um exemplo seria a quebra de linha: para o JavaScript, a quebra de linha o caractere n, porm para o browser isso s pode ocorrer por meio do HTML por meio da tag
      . Assim como o comando r, o JavaScript no possui quebra de pargrafo, e no faz sua interpretao. Porm, um comando padro para diversos editores de texto conseguirem identificar essa quebra. Ao se trabalhar com variveis, acaba sendo inevitvel demandar uma ateno especial converso de valores para que determinado valor tenha um comportamento mais adequado ao seu cdigo, apesar de o JavaScript exigir pouco trabalho ao desenvolvedor para definir o tipo de dados que uma varivel deve guardar. Acaba sendo o prprio interpretador de JavaScript que decide o tipo de dados que a varivel ser. Assim, se escrever:var nota = 9; O interpretador decidir guardar internamente a varivel nota como um nmero inteiro, mas se escrevermos:var nota = 9;94 90. Linguagens de Programao IIInota = O JavaScript necessita de ateno.;Quando o interpretador l a segunda linha de cdigo mudaro tipo de dado da varivel e a varivel nota deixar deser armazenada como um nmero inteiro. Ela passa a serarmazenada como uma String.Essa converso no tipo da varivel acontece de forma automtica e o desenvolvedor no precisa fazer nada para que ela acontea.Essa liberdade serve apenas para simplificar a escrita do cdigo.Quando mal utilizada, ela pode dar origem a cdigo difcilde ler e a erros. As regras de boa programao dizem que aodefinir uma varivel o desenvolvedor deve decidir qual o tipode dados que esta conter e no dever escrever cdigo queprovoque uma converso no tipo de dados que a varivel guarda.Sempre que uma converso for necessria dever ser definida umanova varivel para guardar o resultado da converso, mantendoinalterados os tipos das variveis antigas.As variveis podem receber diversos tipos de dados. Na prticaesses dados so convertidos em objetos pelo interpretador doJavaScript. Portanto, quando voc define uma varivel do tipostring, o interpretador considerar que essa varivel contm umobjeto string. Essa converso proporciona o acesso a diversosmtodos especficos para cada tipo de dados a ser atribudo.Um objeto muito comum na orientao a objetos o this. Oobjeto this pode ser considerado como coringa. Ele representa oobjeto atual de trabalho. Normalmente utilizado no JavaScriptpara referenciar os argumentos dentro das funes. Ele representao prprio objeto em que usado. Esse objeto pode ser umafuno, uma ligao de hipertexto, uma imagem etc.Unidade 295 91. Universidade do Sul de Santa Catarina-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo Objeto ThisAo sair do campo ir emitir um alerta informando alguns atributosde cada campoCdigo:
      Nome:
      Endereo:
      Complemento:
      Observe que o cdigo de chamada da funo no se altera. O objeto this assume por referncia o objeto padro de chamada. No caso do exemplo, a cada chamada ele assume a tag input como sendo o elemento base ao qual est se trabalhando. Quando se altera o objeto, altera o valor representativo do this.96 92. Linguagens de Programao IIIFigura 2.5 - Exemplo do objeto this.Fonte: Elaborada pelo autor (2010)O objeto string possui mtodos que podem ser utilizados emdiversas situaes e auxiliam o desenvolvimento das aplicaes. MtodoDescrio Devolve o caractere que ocupa a posio charAt(ndice) ndice na string. Devolve o cdigo (conjunto Unicode) do charCodeAt(ndice)caractere que ocupa a posio ndice na string. Devolve a posio em que se encontra a primeira ocorrncia de string_busca indexOf(string_ ou -1 se essa ocorrncia no existir. Se busca, ndice_no fornecermos um ndice_opcional, a opcional) busca inicia-se na posio zero, mas se o fornecermos nesse ponto que se inicia a busca. Devolve a posio em que se encontra a ltima ocorrncia de string_busca ou -1 se essa ocorrncia no existir. A busca faz-se a lastIndexOf(string_ partir do fim e caminha progressivamente busca, ndice_ para o incio. Se no fornecermos um ndice_ opcional) opcional, a busca inicia-se no fim, mas se o fornecermos nesse ponto que se inicia a busca. Unidade 2 97 93. Universidade do Sul de Santa CatarinaMtodoDescrioDivide uma string em partes usando asocorrncias de string_separador como pontosde diviso. Devolve um array com todasas divises (substrings) encontradas. Cadasplit(string_separador, elemento do array uma substring da stringlimite_opcional)original. O limite_opcional indica o nmeromximo de partes a incluir no array que devolvido. A string_separador excluda dasdivises e o objeto String sobre o qual foiinvocado este mtodo no sofre alteraes.Devolve uma sesso da string composta pelossubstring(incio, fim)caracteres que ocupam as posies comndices entre incio (includa) e fim (excluda).Devolve uma verso da string com todos ostoLowerCase()caracteres convertidos para letra pequena.Devolve uma verso da string com todos ostoUpperCase()caracteres convertidos para letra grande. Fonte: JavaScript e HTML Dinmico (2007). Toda a varivel do tipo string possui acesso aos mtodos descritos e a alguns outros.-//W3C//DTD XHTML 1.0 Transitional//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo Mtodos do objeto StringPropriedade lengthMtodo IndexOfEste exemplo verifica se uma string (varivel de texto)contm uma determinada palavra. Se a palavra forencontrada ser indicada a posio em que foi localizado o seuprimeiro caractere.
    Nota: A posio do primeiro caractere da string 0, no 1. Mtodo MatchEste exemplo verifica se uma palavra (que nestecaso gelada) est contida na string. Se estiverela ser devolvida. Mtodo substringUnidade 2 99 95. Universidade do Sul de Santa Catarina Converte para Maiuscula e Minscula Fonte: JavaScript e HTML Dinmico (2007).Figura 2.6 - Propriedades e mtodos de strings.Fonte: Elaborada pelo autor (2010).100 96. Linguagens de Programao IIIAlm do objeto string, o JavaScript oferece o objeto date. Esseobjeto possui a caracterstica de manipular datas e horas. Adefinio de valores possvel utilizando valores numricos edatas por extenso. Os mtodos atrelados a esse objeto so: Mtodo DescrioDevolve o dia do ms (de 1 a 31) que est guardado no getDate()objeto Date.Devolve o dia da semana (de 0 = domingo at 6 = getDay()sbado) guardado no objeto Date.Devolve o ms (de 0 = janeiro at 11 = dezembro) getMonth()guardado no objeto Date.Devolve o valor completo do ano (quatro dgitos) getFullYear()guardado no objeto Date.Devolve o valor incompleto do ano (apenas dois dgitos) getYear()guardado no objeto Date. No use este mtodo, usegetFullYear em seu lugar.Devolve o valor da hora (de 0 a 23) guardada no objeto getHours()Date.Devolve o valor dos minutos (de 0 a 59) guardados no getMinutes()objeto Date.Devolve o valor dos segundos (de 0 a 59) guardados no getSeconds()objeto Date.Devolve o valor dos milissegundos (de 0 a 999) getMilliseconds()guardados no objeto Date.Devolve a quantidade de milissegundos decorridos getTime()desde zero hora do dia 1 de janeiro de 1970 at a dataque est guardada no objeto Date.Devolve a diferena de tempo entre o fuso horrio do getTimezoneOffset()computador que est a ser usado e o Tempo Mdio deGreenwich (Greenwich Mean Time, ou GMT).Devolve o dia do ms (de 1 a 31) guardado no objeto getUTCDate()Date medido no padro de tempo universal (UTC).Devolve o dia da semana (de 0 a 6) guardado no objeto getUTCDay()Date medido no padro de tempo universal (UTC).Devolve o valor do ms (de 0 a 11) guardado no objeto getUTCMonth()Date medido no padro de tempo universal (UTC).Devolve o valor completo do ano (com quatro dgitos) getUTCFullYear() guardado no objeto Date medido no padro de tempouniversal (UTC). Unidade 2101 97. Universidade do Sul de Santa Catarina Mtodo DescrioDevolve a hora (de 0 a 23) guardada no objeto Date getUTCHours()medida no padro de tempo universal (UTC).Devolve o valor dos minutos (de 0 a 59) guardados no getUTCMinutes()objeto Date medidos no padro de tempo universal(UTC).Devolve o valor dos segundos (de 0 a 59) guardados getUTCSeconds()no objeto Date medidos no padro de tempo universal(UTC).Devolve o valor dos milissegundos (de 0 a 999) getUTCMilliseconds() guardados no objeto Date medidos no padro detempo universal (UTC).Acerta o valor do dia (de 1 a 31) do ms guardado no setDate(dia_ms)objeto Date.Acerta o valor do ano (com quatro dgitos) guardado no setFullYear(ano)objeto Date. setHours(horas)Acerta o valor da hora (de 0 a 23) guardada no objeto Date.Acerta o valor dos milissegundos (de 0 a 999) guardados setMilliseconds(milisegundos)no objeto Date.Acerta o valor dos minutos (de 0 a 59) guardados no setMinutes(minutos)objeto Date.Acerta o valor do ms (de 0 = janeiro a 11 = dezembro) setMonth(ms)guardado no objeto Date.Acerta o valor dos segundos (de 0 a 59) guardados no setSeconds(segundos)objeto Date.Acerta a data e a hora guardadas no objeto Date para ovalor correspondente a zero hora do dia 1 de janeiro de setTime(data_numrica)1970 mais o nmero de milissegundos que fornecidocomo argumento do mtodo.Acerta o valor do ano guardado no objeto Date. No use setYear(ano)este mtodo, use antes o mtodo setFullYear.Acerta o valor do dia (de 1 a 31) do ms guardado no setUTCDate(dia_ms)objeto Date usando o padro de tempo universal (UTC).Acerta o valor do dia da semana (de 0 = domingo a 6 = setUTCDay(dia_semana)sbado) guardado no objeto Date usando o padro detempo universal (UTC).Acerta o valor do ms (de 0 = janeiro a 11 = dezembro) setUTCMonth(ms) guardado no objeto Date usando o padro de tempouniversal (UTC).102 98. Linguagens de Programao III Mtodo DescrioAcerta o valor do ano (com quatro dgitos) guardado no setUTCFullYear(ano)objeto Date.Acerta o valor da hora (de 0 a 23) guardada no objeto setUTCHour(horas)Date usando o padro de tempo universal (UTC).Acerta o valor dos minutos (de 0 a 59) guardados no setUTCMinutes(minutos)objeto Date usando o padro de tempo universal (UTC).Acerta o valor dos segundos (de 0 a 59) guardados no setUTCSeconds(segundos)objeto Date usando o padro de tempo universal (UTC).Acerta o valor dos milissegundos (de 0 a 999) guardados setUTCMilliseconds(miliseguno objeto Date usando o padro de tempo universal ndos)(UTC).Devolve uma representao textual (a data e a hora toGMTString()escritas por extenso) usando como referncia o fusohorrio do Tempo Mdio de Greenwich (GMT).Devolve uma representao textual (a data e a hora toLocaleString()escritas por extenso) no fuso horrio do computador local.Fornece uma representao textual (a data e a hora toUTCString()escritas por extenso) da data contida no objeto Datemedida no padro UTC.Fonte: JavaScript e HTML Dinmico (2007).A utilizao do objeto date, assim como seus mtodos, feita deforma simplificada. Unidade 2 103 99. Universidade do Sul de Santa Catarina -//W3C//DTD XHTML 1.0 Transitional//EN http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplos objeto DateMostrar o dia da semana Obter a hora marcada pelo relgio do seu computador Criar uma data com um valor predefinido Estabelecer o ano para uma data Escrever a data completa com os nomes do dia e do ms Fonte: JavaScript e HTML Dinmico (2007).Unidade 2105 101. Universidade do Sul de Santa CatarinaFigura 2.7 - Mtodos e atributos de data.Fonte: Elaborada pelo autor (2010).Um tipo especial de varivel o tipo de vetor ou cadeia devariveis. Um vetor um objeto capaz de guardar muitos valores,tantos quanto a memria disponvel na mquina permitir. Umvetor caracterizado como lacunas indexadas na memria quearmazenam um conjunto finito de valores. Cada uma dessaslacunas que compem o vetor possui um ndice.106 102. Linguagens de Programao III -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo de Array
    Ao ser declarada a varivel numeros_primos, declaramos oArray (vetor) e atribumos os valores em uma nica operao. Jno segundo caso, declaramos primeiro o Array e somente depoisdefinimos os valores que ele deve conter. O browser interpretarda seguinte forma:Unidade 2 107 103. Universidade do Sul de Santa CatarinaFigura 2.8 - Exemplo de arrayFonte: Elaborada pelo autor (2010).J vimos que o JavaScript converte o tipo de dados conforme aatribuio que realizamos, por isso um array pode conter valoresde tipos diferentes em cada lacuna. Podemos alterar sempre quenecessrio, como mostra a seguir:108 104. Linguagens de Programao III -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo converso de dados no ArrayQuando atribuirmos um valor a um elemento do vetor com umndice mais alto do que o seu comprimento, o interpretador doJavaScript aumenta o tamanho do vetor at chegar ao ndicepretendido. isso que acontece no exemplo anterior quando sechega linha que tem:produto[6] = Bolacha;O browser interpretar da seguinte forma:Unidade 2109 105. Universidade do Sul de Santa CatarinaFigura2.9 -Manipulao de arrays.Fonte: Elaborada pelo autor (2010).Os vetores so objetos e algumas propriedades entre as quais alength utilizada para contar o nmero de elementos dentro deum vetor. Assim, se ao exemplo anterior juntarmos uma linhacom o seguinte cdigo: var numeroDeElementos = produto.length;A varivel numeroDeElementos ficar com o valor 7. Entendaque a propriedade length no l os ndices, mas conta o nmerode elementos no vetor. Lembre-se sempre que ndice e tamanhoso diferentes.110 106. Linguagens de Programao IIIO array um objeto e como tal possui propriedades que auxiliamno desenvolvimento de aplicaes. Propriedade Descrio Fornece o nmero de elementos que esto no Array. O valor desta lengthpropriedade estabelecido quando o Array criado, mas pode crescer se formos juntando mais elementos ao Array. MtodoDescrio Devolve uma String (varivel de texto) que representa o contedo join() do Array. Devolve um novo Array em que a ordem dos elementos est reverse() invertida (em particular temos que o elemento que tinha o ndice zero passa a ter o ndice mais alto e vice-versa). Devolve um novo Array em que os elementos esto ordenados sort() (geralmente por ordem crescente).Fonte: JavaScript e HTML Dinmico (2007). Utilizando o mtodo de ordenao sobre um objeto array teramos: -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo ordenao arrayUnidade 2111 107. Universidade do Sul de Santa Catarina Ordenar Strings Ordenar Nmero Ordem normal Ordem alfabtica Ordem normal Ordem alfabtica Fonte: JavaScript e HTML Dinmico (2007).Figura 2.10 - Propriedade e mtodos do array.Fonte: Elaborada pelo autor (2010).Unidade 2 113 109. Universidade do Sul de Santa Catarinab. OperadoresOs operadores so instrues utilizadas em expresses paravalid-las ou calcul-las. H dois tipos de operadores: lgicose aritmticos. Os operadores lgicos so aqueles destinadosa realizar comparaes entre expresses. Normalmente essascomparaes esto associadas aos laos de condicionais e os derepetio. Os operadores mais usados so:Tabela 3 Operadores lgicos. OperadorDescrio && ou AND E || ou OROU ! ou NOTNO > Maior que < Menor que >=Maior ou igual Exemplo de lao de deciso Est chovendo?

    Sim

    O exemplo trata de uma interao com o usurio sobre o tempo.A resposta do usurio resultar em um teste lgico que mostraruma mensagem de retorno. O browser interpreta da seguinteforma:Unidade 2117 113. Universidade do Sul de Santa CatarinaFigura 2.11 - Exemplo do controlador IF.Fonte: Elaborada pelo autor (2010).Uma instruo if no precisa ser associada a uma instruo else.Quando isso acontece, caso a condio no seja verdade, no serexecutado qualquer cdigo alternativo. O interpretador apontarimediatamente a instruo aps o trmino do comando if.Outro lao de repetio suportado pelo JavaScript o switch. Esselao no faz parte do padro ECMAScript, porm suportadopela maioria dos browsers.O switch possui a caracterstica de comparar uma varivel comdiversos valores, executando blocos independentes para cada valorverdadeiro. Em casos como esse, o switch torna-se mais eficienteque a instruo if por possuir uma construo mais simplificada eorganizada.118 114. Linguagens de Programao III-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>Exemplo de Switch Unidade 2 119 115. Universidade do Sul de Santa Catarina Escolha uma cor: PretoAzulVermelhorVerdeAmarelo Perceba que o switch abre um bloco e dentro dele so inseridasas constantes a serem testadas. Cada constante precedida dainstruo case e deve abrir um novo bloco de comando interno.Neste caso, usa-se o caractere dois pontos (:). O bloco deinstruo de cada case deve ser encerrado com a instruo break,que indica uma interrupo da execuo de blocos. O browserinterpreta da seguinte forma:120 116. Linguagens de Programao IIIFigura 2.12 Exemplo do controlador switch.Fonte: Elaborada pelo autor ( 2010).d. Laos de repetioOs laos de repetio caracterizam-se por repetir um blocode instruo um nmero finito de vezes. O bloco utiliza odelimitador de funo {} para definir o escopo do trabalho.Caso este seja omitido, a primeira linha seguinte instruo sera nica dentro do lao.Um dos laos mais utilizados o lao for. Esse lao caracteriza-se por utilizar um contador numrico para limitar o nmero deiteraes. Ainda possui um conjunto de trs expresses contidasentre parntesis, separadas pelo caractere ponto e vrgula e pelocdigo a executar em cada um dos laos.A primeira das expresses do lao for declara a varivel parautilizar como ndice inicializando-a. A segunda expresso declarauma condio que deve ser testada sempre que se inicia uma novaiterao. Se essa condio resultar em false, o lao ir parar e o cdigodefinido abaixo no voltar a ser executado. A terceira expressoserve para atualizar o valor do ndice no final de cada ciclo. Unidade 2121 117. Universidade do Sul de Santa Catarina -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo lao forO resultado no browser :122 118. Linguagens de Programao IIIFigura 2.13 - Exemplo do lao FOR.Fonte: Elaborada pelo autor (2010).Esse exemplo mostra o lao de repetio for, como ele percorre ocontador e a condio nele atribuda. Um outro exemplo seria: -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo de lao de repetio Digite um nmero inteiro
    Escolha o nmero de repeties voc desejaUMDOIS124 120. Linguagens de Programao IIITRS
    Resultado da operao acumulada de (Repetio * Inteiro)
    No browser fica desta forma:Figura 2.14 - Lao FOR sem bloco.Fonte: Elaborada pelo autor ( 2010).Nesse exemplo simples, possvel verificar todos os laos ealgumas funes. A funo isNaN testa um valor a fim deverificar se ele um nmero. A funo parseInt transforma umaexpresso em um nmero possvel. Por fim, a funo this umapalavra reservada para referenciar o objeto corrente, neste caso, ocampo do formulrio que est chamando a funo. Unidade 2 125 121. Universidade do Sul de Santa CatarinaOutras funes, como o parseInt, esto disponveispara o Javascript. Ainda possui a funo indexOfsendo muito til em condies. Pesquise sobre seufuncionamento e teste-a.Outro lao de repetio importante o while. Esse lao muitoparecido com o lao for. Na realidade, tudo o que um faz podeser feito com o outro, embora por questes de legibilidade cadaum deles possa ter reas de aplicao que para as quais maisindicado do que o outro.O lao while avalia uma condio e, se ela resultar em true,executa o bloco de cdigo que vem imediatamente a seguir.Caso resulte em false, o interpretador posiciona na instruoimediatamente aps o lao e continua a execuo. -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo lao while126 122. Linguagens de Programao IIIFigura 2.15 Lao WHILE.Fonte: Elaborada pelo autor (2010).O resultado nesse caso idntico ao lao for. Porm, ntido quea complexidade envolvida nesse cdigo superior ao do lao for.Mesmo assim, quando voc tem a necessidade de utilizar um laode deciso em que no seja necessrio um contador, o lao while a melhor soluo.Um terceiro lao que o JavaScript comporta o do..while. Esselao irmo do lao while, possui uma sutil, mas importante,diferena. Para o lao while ser executado uma primeira vez, necessrio que a condio seja atendida ao menos uma vez.O lao do..while executa sempre uma vez antes de testar acondio. Isso possvel porque a condio verificada aps obloco de comando. Diferente de seu irmo while, que testadoantes do bloco iniciar.Unidade 2 127 123. Universidade do Sul de Santa Catarina -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> Exemplo do..whileNesse exemplo, a situao foi forada para voc perceber adiferena. Via de regra, voc pode adotar que o while deve serusado sempre que um bloco do lao de repetio necessite de umacondio verdadeira para executar ao menos uma vez.O do..while deve ser construdo quando um bloco do lao necessiteser executado ao menos uma vez mesmo que uma condio noseja atendida. No browser, o resultado do exemplo fica:Figura 2.16 - Comparao de estruturas while e do while.Fonte: Elaborada pelo autor (2010).Unidade 2 129 125. Universidade do Sul de Santa Catarinae. FunesUma funo um bloco de cdigo que necessita ser chamadopara executar uma determinada operao. Em JavaScript, esseartifcio amplamente utilizado, j que a maior utilizao dessalinguagem a interao com o usurio.As funes possuem uma declarao de nome e uma delimitaode bloco por meio do caractere {}. O bloco pode conter umainfinidade de instrues para execuo de seu cdigo. O retornode informaes opcional e deve ser feito pela instruo return. -/