. 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
O browser interpretar da seguinte forma:Teste de Lista
Ordenada
- Tpico 2
- Tpico 3
- Tpico 4
- Tpico 2
- Tpico 3
- Tpico 4
Unidade 1 49 46. Universidade do Sul de Santa Catarina
- Tpico 2
- Tpico 3
- Tpico 4
- Tpico 2
- Tpico 3
- Tpico 4
- Tpico 2
- Tpico 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
- , 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. -/