Programação Cliente-servidor TODAS AS AULAS

Prévia do material em texto

Disciplina: Programação Cliente-servidor
Aula 1: HTTP e HTML 5
Apresentação
É impossível imaginar o mundo atual sem a existência da Internet. Redes sociais, aplicativos bancários, sites informativos, e
os mais diversos serviços, são disponibilizados via protocolo HTTP para todo o mundo, derrubando fronteiras e promovendo
um acesso muito democrático à informação.
Nós, como desenvolvedores, devemos conhecer este protocolo e as tecnologias para criação de páginas, como HTML e CSS,
que durante muito tempo apresentaram diversas inconsistências entre navegadores distintos, mas que, atualmente, sob a
normatização da W3C e uso do DOM, converge para um ambiente com baixíssimo índice de incompatibilidade.
Objetivos
Identi�car as características gerais do HTTP;
Explicar a sintaxe básica do HTML 5 e CSS;
Descrever as características do Document Object Model (DOM).
Protocolos
Em uma rede de computadores, podemos observar diferentes tipos de informação transitando a todo o tempo, como arquivos,
vídeos, páginas e e-mails. Para que estas transferências sejam possíveis, é necessário uniformizar a comunicação entre as partes
envolvidas. É neste ponto que aparecem os protocolos.
Um protocolo é, basicamente, um conjunto de regras para a forma de como se dará a
comunicação entre dois dispositivos.
Vale lembrar que o contexto atual envolve não só computadores, mas também celulares, componentes IoT, Smart TVs, entre
diversos outros.
Clique nos botões para ver as informações.
Os primeiros protocolos que devemos ter em mente são o TCP (Transmission Control Protocol) e o IP (Internet Protocol),
pois toda a grande rede da Internet se baseia na combinação destes dois, ou seja, no TCP/IP, responsáveis pela emissão e
recepção de dados entre máquinas da rede.
Logo acima do TCP/IP, outros protocolos serão necessários para especi�car serviços, determinando o formato dos dados a
serem transmitidos.
TCP/IP 
Exemplo
Entre os diversos protocolos existentes, podemos destacar alguns:
FTP – transmissão de arquivos;
SMTP e POP – envio e recepção de e-mails;
SSL – comunicação criptografada;
HTTP – protocolo de hipertexto, ou hipermídia.
Em nossos estudos, o protocolo HTTP é de particular interesse, pois será utilizado como base para a implementação de um
sistema para a World Wide Web, também denominada simplesmente Web ou WWW, que trata de todo o grande conjunto de
documentos de hipermídia disponíveis e interligados existentes na Internet.
Protocolo HTTP 
As máquinas da Internet são identi�cadas por conjuntos de números que vão de 0 a 255, sendo 4 números no caso do IPV4,
e seria muito difícil para o ser humano gravar endereços como 127.54.12.208 e 234.57.125.201.
Logo, foi criado um sistema de identi�cação baseado em nomes, com servidores especí�cos para a tradução destes nomes
para endereços numéricos, os quais são chamados de servidores DNS (Domain Name System).
Com isso, quando digitamos um endereço, como www.estacio.br, este nome é traduzido para o IP da máquina, permitindo
encontrar o site.
Devemos considerar, portanto, um domínio como a relação entre o nome utilizado para navegação e o IP da máquina
servidora que detém os recursos desejados, tais como páginas e arquivos. Todo site está hospedado em algum domínio, de
forma a viabilizar seu acesso através da Internet.
DNS 
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Servidores HTTP
Para que determinado protocolo de serviço seja suportado, é necessário que exista um programa capaz de “escutar” a rede e
prover este serviço.
Estes programas executam em diferentes servidores da rede para que os usuários possam acessar seus serviços através de
programas denominados “clientes”, o que permite de�nir a comunicação como cliente-servidor.
Como poderíamos identi�car de forma imediata o tipo de informação solicitada?
A resposta é simples: através do uso de portas diferentes.
Um programa servidor deve escutar uma ou mais portas de comunicação, que de�nirão o protocolo que será utilizado e,
consequentemente, o tipo de dado que deverá ser transmitido, como as páginas HTML através do HTTP (porta 80), ou o
fornecimento de arquivos via FTP (porta 21).
Existem vários programas servidores (ou simplesmente servidores) que fornecem suporte ao HTTP, como Apache e IIS.
Contudo, para o ambiente de programação Java, é utilizado o Tomcat como Web Server, podendo ser executado de forma
direta, ou incorporado a outros servidores, como GlassFish, WebSphere, BEA Weblogic e JBoss, estes últimos denominados
Application Servers.
Web Server
primeiro fornece nativamente apenas o
suporte a tecnologias Web, como HTML, JSP
e Servlet 
Application Server
acrescenta suporte a tecnologias
corporativas baseadas em objetos
distribuídos, a exemplo dos EJBs (Enterprise
Java Beans).
Clientes HTPP
Um cliente HTTP é tipicamente denominado “navegador”,
sendo comum o seu uso no nosso dia a dia, a exemplo do
Google Chrome, Opera, FireFox, Microsoft Edge, além de
navegadores especí�cos dos diversos dispositivos móveis.
A linguagem HTML foi adotada como padrão para a criação de
páginas na Internet, e um navegador deve ser capaz de
interpretar estas páginas, exibindo o conteúdo com as
formatações corretas e permitindo a navegação entre as
mesmas através de hiperlinks.
É importante notarmos que diferentes dispositivos apresentam
dimensões e recursos variados, o que pode trazer problemas
quanto à exibição da informação. Fato este que acabou
trazendo à tona um termo que se tornou comum no design de
páginas: a responsividade.
Responsividade é a capacidade de exibir a mesma informação em diferentes dispositivos,
adequando o formato da exibição aos mesmos, ou seja, uma interface responsiva pode ser
acessada por diferentes plataformas sem deformações que inviabilizem sua utilização.
Linguagem HTML 5
1991
Foi formalizada a linguagem HTML, do inglês
Hypertext Markup Language, baseada nas
propostas de Tim Berners-Lee, físico britânico
que visava obter um meio de divulgação de suas
pesquisas entre seus colegas.
1996
Inicialmente controlada pela IETF (Internet
Engineering Task Force), passou a ter suas
especi�cações mantidas pela W3C (World Wide
Web Consortium) a partir de 1996, sendo a
recomendação HTML 4.01 publicada em 1999.
2000
A W3C passa a recomendar a sua nova
especi�cação XHTML, a qual traz uma sintaxe
mais rígida para o HTML, baseando-se nas
regras do XML (Extended Markup Language).
2008
Finalmente, a partir da primeira publicação pela
W3C, surge a especi�cação do HTML 5,
o�cializada em 2014, e tendo como
característica principal um novo mecanismo de
extensibilidade que permite combinar
diferentes sintaxes baseadas em XML dentro
de uma mesma página.
Como nas versões iniciais, o HTML 5 é uma linguagem de marcação baseada em
etiquetas (tags) que devem controlar diversos aspectos do texto.
Nas versões iniciais do HTML ocorria o controle tipográ�co e estrutural, mas no HTML 5 a preocupação é apenas estrutural,
sendo delegado para o CSS (Cascade Style Sheet) o controle de características tipográ�cas.
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <title>Primeira Página</title>
 meta charset="UTF-8"/>
 </head>
 <body> <!-- PARTE VISUAL -->
 <h1>Título da Página</h1>
 <p>
 Pequena Lista:
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 </p>
 </body>
</html>
Na primeira linha, podemos observar o comando <!DOCTYPE html>, que não faz parte da sintaxe HTML, mas do XML, de�nindo
um domínio de utilização para tags. No caso, esta linha indica que teremos, em seguida, um documento HTML.
Todo documento é iniciado com a tag <html>, que serve para delimitar o início e �nal do documento, englobando as tags ,
responsável por informações gerais de pré-carga, e , correspondente ao conteúdo visual da página.
Diversas tags aceitam a de�nição de atributos especí�cos, como <meta charset="UTF-8"/>, e estes atributos devem ter seusvalores colocados entre aspas ou apóstrofes.
Também devemos observar a possibilidade de adicionar comentários, os quais são iniciados com <!- - e �nalizados com - ->.
Conjunto de tags
A seção <head> aceita um pequeno conjunto de tags, sendo as principais apresentadas a seguir:
Tag Utilização
<title> Define o título da página, normalmente apresentado no topo da janela
<meta> Permite a inclusão de informações e controle de características do documento, como o uso de UTF-8 para
acentuação da língua portuguesa
<link> Efetua a ligação da página com um recurso externo, como folha de estilo CSS ou biblioteca JavaScript
Quanto à seção <body>, por cuidar da parte estrutural da visualização, pode conter um grande conjunto de tags, algumas delas
voltadas para o formato de títulos, áreas de escrita e listas, outras para a inclusão de imagens e elementos diversos, além de
comandos de navegação e formulários, entre diversas outras.
Podemos observar algumas destas tags a seguir:
Tag Utilização
<h1> <h2> <h3> <h4> <h5>
<h6> <h7>
Definem elementos de texto utilizados como títulos em diferentes tamanhos de fonte,
sendo <h1> para o maior e <h7> para o menor.
<b> <i> <u> <em> <strong> Negrito, itálico e outros efeitos de texto. São consideradas obsoletas, sendo recomendado o
uso de folhas de estilo CSS.
<p> <div> Definem trechos de texto, sendo que <p> ressalta o parágrafo e <div> é muito utilizado para
a criação de camadas.
<ul> <ol> Iniciam a criação de listas de elementos, sendo numeradas com <ol>.
<li> Define um item de lista.
<hr/> Linha divisória na horizontal.
<br/> Quebra de linha.
“index.html” – a página inicial
Quando construímos um site, estamos criando um conjunto de páginas, em que pode ocorrer a navegação entre as mesmas.
Todo site tem uma página inicial, que, nos casos mais comuns, recebe o nome “index.html”.
A partir da página inicial, podemos navegar para outras páginas do mesmo domínio, ou até para outros sites, acessar recursos
especí�cos, como vídeo e áudio, entre outras diversas formas de ligação com elementos externos.
<a href=“URL DE DESTINO”>TEXTO DO LINK</a>
Os hiperlinks serão nosso ferramental básico de navegação entre páginas, sendo criados com a tag <a>, ou âncora (do inglês
anchor), sempre apontando para alguma URL (Universal Resource Locator), que pode ser de�nida como uma identi�cação de algo
localizado na rede, como um site, uma página, um trecho da página, ou qualquer outro elemento identi�cado de forma unívoca.
Exemplo
Podemos observar a criação de uma tabela simples no código a seguir:
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <title>Alguns Links</title>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <h1>Alguns exemplos de links</h1>
 <p>
 <ul>
 <li><a href="//www.estacio.br">Site da Estacio</a></li>
 <li><a href="//portal.estacio.br/graduacao.aspx">Cursos de Graduação</a></li>
 </ul>
 </p>
 </body>
</html>
Tabela
Outro elemento interessante do HTML padrão é a tabela.
Uma tabela exibe dados organizados em termos de linhas e colunas a partir de três tags:
Tag Utilização
<table> Define uma tabela e suas características gerais, como espessura de borda e espaçamento entre colunas.
<tr> Inicia uma linha da tabela.
<td> Define uma célula na linha criada anteriormente.
Exemplo
Podemos observar a criação de uma tabela simples no código a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Tabela</title>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <table border="1" width="100%">
 <tr><td>Código</td><td>Produto</td><td>Quantidade</td></tr>
<tr><td>100478965</td><td>Mouse PanX</td><td>210</td></tr>
 <tr><td>100476541</td><td>Tecladoo XPTO</td><td>148</td></tr>
<tr><td>100278543</td><td>TV SmartY 40lt;/td>&<td>34</td></tr>
 </table>
 </body>
</html>
Atenção
Hoje em dia ouvimos falar bastante do padrão Tableless, erroneamente interpretado como “sem tabelas”.
Na verdade, este padrão estipula que as tabelas não devem ser utilizadas para organizar visualmente o conteúdo da página, o que
passou a ser feito com camadas, mas permite que elas sejam utilizadas livremente para a exposição de dados “tabulares”, como
planilhas.
Dica
Editores de Código HTML
Embora não seja imprescindível, com certeza vamos preferir utilizar um editor de texto que ressalte os comandos HTML quando
estivermos criando nossas páginas.
Uma sugestão gratuita e de fácil utilização é o NotePad++ <https://notepad-plus-plus.org/download/> .
 
CSS – Cascade Style Sheet
TEAgora que nossos textos já podem ser estruturados com o uso de HTML, devemos nos preocupar com a formatação de fontes
e demais elementos, o que era feito antigamente através de tags, mas que atualmente é viabilizado pelo uso das folhas de estilo
(CSS).
https://notepad-plus-plus.org/download/
Exemplo
Para criarmos classes devemos utilizar um ponto antes do nome, e aplicar às tags de interesse através do atributo class, como
podemos observar a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <title>Primeira Página</title>
 <meta charset="UTF-8"/>
 <style>
 h1 {color: orange}
 body {background-color: #000032; color:yellow}</style>
 </head>
 <body>
 <h1>Título da Página</h1>
 <p>
 Pequena Lista:
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 37</li>
 </ul>
 </p>
 </body>
</html>
É fácil entender como o CSS possibilita modi�car completamente o aspecto original de uma página. Elementos como fontes e
cores, alinhamentos, �guras de fundo, entre vários outros, podem ser con�gurados, sempre seguindo a sintaxe propriedade:
valor.
Outro elemento a se considerar é o elemento ao qual será aplicado o estilo, também chamado de seletor, podendo ser,
inicialmente, uma tag, uma classe ou um Id (identi�cador).
No exemplo anterior, a tag <h1> foi formatada com a fonte de cor laranja, enquanto <body> recebe fundo de tonalidade azul
(RGB=#000032) e fonte amarela.
Exemplo
Nós podemos observar a criação de duas camadas no exemplo:
C1, a 10 pixels do topo e 10 pixels da lateral esquerda, com altura de 200 pixels e largura de 300 pixels, adotando azul claro
como cor de fundo; e
C2, a 50 pixels do topo e 50 pixels da lateral esquerda, com altura de 120 pixels e largura de 220 pixels, utilizando azul como
cor de fundo e amarelo como cor de fonte.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Tabela</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color: #000032; color:yellow}
 .enfoque {color:orange}
 </style>
 </head>
 <body>
 <table border="1" width="100%">
 <tr><td>Código</td><td>Produto</td><td>Quantidade</td></tr>
 <tr><td class="enfoque">100478965</td><td>Mouse PanX</td>
 <td>210</td></tr>
 <tr><td class="enfoque">100476541</td><td>Tecladoo XPTO</td>
 <td<148</td></tr>
 <tr><td class="enfoque">100278543</td><td>TV SmartY 40</td>
 <td>34</td></tr>
 </table>
 </body>
</html>
Devemos fazer algo similar para o uso de identi�cadores (Ids), porém utilizaremos o símbolo de hash (#), e aplicaremos a
elementos que devem ser unicamente identi�cados na página. Isso quer dizer que não devo ter duas tags com o mesmo Id.
O uso de Ids é muito comum na construção de camadas, as quais servem como padrão para organização dos elementos de uma
página, segundo o atual padrão vigente do Tableless.
 
<!DOCTYPE html>
<html>
 <head>
 <title<Exemplo de Camadas>/title>
 <meta charset="UTF-8"/>
 <style>
 #C1{position:absolute; top:10px; left:10px; width:300px;
 height:200px; background-color:lightblue}
 #C2{position:absolute;top:50px; left:50px; width:220px;
 height:120px; background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <div id="C1"<Camada 1</div>
 <div id="C2">Camada 2</div>
 </body>
</html>
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Formulários
Quando efetuamos o cadastro em algum site de compras pela Web, o que estamos fazendo é o preenchimento de um formulário
HTML.
Estas informações são enviadas para o servidor de duas formas, denominadas “métodos”:
 
Exemplo

GET
Os dados são enviados através da própria URL, �cando
expostos na chamada.

POST
Os dados são enviados em background, o que evita a
exposição, mas não determina segurança, já que os pacotes
podem ser capturados por ferramentas do tipo Sniffer.
Para que possamos transmitir os dados com maior segurança devemos utilizar SSL (Secure Socket Layer) com um certi�cado
digital de qualidade, o que fará com que os dados transitem de forma criptografada.
Quando fazemos uma chamada https estamos utilizando um ambiente deste tipo.
Todo formulário é iniciado com a tag <form>, que terá como principais atributos o método de envio (method) e o destino para a
informação (action).
Dentro do formulário, podemos incluir os componentes de entrada de dados, como:
Caixas de texto;
Botões de rádio;
Caixas de marcação.
A grande maioria de�nida através da tag <input>, cujos atributos principais são:
type, referente ao tipo de componente;
name, utilizado para identi�cação do dado na chegada ao lado servidor;
value, para determinar o valor de envio ou o valor de preenchimento inicial.
Tipos utilizados pela tag <input>
Os tipos que a tag <input> pode utilizar são explicados no quadro abaixo:
Tipo Utilização
text Cria uma caixa de texto, podendo ter um valor inicial definido através de value.
hidden Quando queremos guardar um valor para envio, mas sem ficar visível.
radio Opções mutuamente exclusivas. Quando marcamos um, todos com o mesmo atributo 
name serão desmarcados. O que ficar marcado, ao final, enviará seu atributo value
como dado para o servidor.
checkbox Quando queremos a possibilidade de marcar várias opções. Todos que forem marcados
enviarão seus atributos value como dados para o servidor
submit Cria um botão de envio para o formulário
reset Cria um botão que reinicia (limpa) o formulário
Podemos observar, a seguir, um formulário simples, com o uso das tags <form> e <input>.
Exemplo
Podemos observar, a seguir, um exemplo de utilização de SVG em uma página HTML5.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de Formulário</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <form action="//servidor/app.asmx" method="get">
 Nome:<input name="N1" type="text"/><br/>
 Contribuinte:
 <input type="radio" name="CONTR" value="S"/>Sim
 <input type="radio" name="CONTR" value="N"/>Não
 <br/>
 <input type="submit" value="Cadastrar"/>
 </form>
 </body>
</html>
Neste exemplo, se escrevermos o nome XPTO e selecionarmos a opção “Sim”, ao clicarmos em Cadastrar, veri�caremos a
seguinte URL na barra de navegação:
//servidor/app.asmx?N1=XPTO&CONTR=S
Atenção
O trecho ressaltado após a interrogação corresponde ao que chamamos de Query String, onde estarão os dados, no formato
nome=valor, separados pelo sinal &.
Caso modi�cássemos o método para “post”, a informação enviada não �caria visível para o usuário, mas vale ressaltar que
estaria transitando em um pacote sem criptogra�a na rede para o caso do HTTP comum.
Sintaxes Diversas no HTML 5
Uma grande evolução do HTML 5 em relação às versões anteriores é a possibilidade de utilizar outras linguagens, como SVG e
VRML, em meio ao código HTML, o que permite expandir a funcionalidade do ambiente básico.
 
<!DOCTYPE html>
<html>
 <head>
 <title>Exemplo de SVG</title>
 <meta charset="UTF-8"/>
 <style>
 body {background-color:blue; color:yellow}
 </style>
 </head>
 <body>
 <h1>Exemplo com SVG</h1>
 <svg>
 <rect width="100" height="50" x="10" y="10" fill="lightblue" stroke="orange" stroke-width="3"/>
 </svg>
 </body>
</html>
DOM
O Document Object Model, ou DOM, é uma API que nos permite acessar os elementos de um documento HTML ou XML,
proporcionando uma visualização hierárquica do mesmo no formato de árvore, baseado na forma como as tags são aninhadas.
Com o uso de DOM �cou muito mais fácil criarmos páginas compatíveis com
navegadores diversos, principalmente no que se refere à integração da página HTML
com o código JavaScript.
Após acessar o componente da página, os valores de seus atributos podem ser consultados e modi�cados com grande facilidade
e de forma padronizada para os diversos ambientes.
O processo mais comum para acessar este componente é através de seu Id, com o uso do comando a seguir, que será estudado
quando tratarmos da linguagem JavaScript:
document.getElementById( Id )
Como as tags são organizadas hierarquicamente, a partir de um nó raiz, devemos considerar a existência de diferentes tipos de
nós ao longo desta árvore, como elementos, ou tags, atributos e textos.
Os principais tipos de nós são apresentados na tabela:
Tipo de Nó Propriedade nodeName Propriedade nodeValue
Element Nome do Elemento (ou tag) null
Attr Nome do atributo Valor do atributo
Text #text Conteúdo do nó
CDATASection #cdata-section Conteúdo do nó
Comment #comment Texto do comentário
Através da de�nição estrutural do DOM e manuseio das informações fornecidas pelos nós da árvore constituída, podemos
acessar, modi�car e até acrescentar elementos à página HTML, o que permite grande dinamismo e possibilidade de modi�cações
parciais em um documento durante a visualização do mesmo, viabilizando um dos pilares do AJAX, tecnologia que será tratada
posteriormente nesta disciplina.
Atenção! Aqui existe uma videoaula, acesso pelo conteúdo online
Atividade
1 - Os Web Servers são programas servidores que respondem ao HTTP, sendo que alguns deles oferecem suporte a tecnologias
de objetos distribuídos e são normalmente classi�cados como Application Servers.
Dentre os servidores apresentados a seguir, qual deles NÃO pode ser considerado nativamente como um Application Server?
a) BEA Weblogic
b) Tomcat
c) WebSphere
d) GlassFish
e) JBoss
2 - Hoje em dia a formatação tipográ�ca das páginas não é mais feita no código HTML, que assumiu um papel estruturante com
relação ao conteúdo da página, e as folhas de estilo CSS passaram a ser a tecnologia adotada para esta formatação.
Qual seria o comando CSS para formatar o fundo de uma camada com id “centro” na cor amarela?
a) .centro { background-color: yellow }
b) #centro { color: yellow }
c) *centro { background: yellow }
d) #centro { background-color: yellow }
e) .centro{ color:yellow }
3 - A utilização de DOM viabiliza a interpretação do conteúdo XML ou HTML no formato de árvore (hierárquico), onde cada nó da
árvore apresenta diversas informações, as quais podem ser expressas em termos das propriedades nodeName e nodeValue.
Para um nó do tipo Element, qual a informação fornecida por nodeValue?
a) Nome do Atributo
b) Conteúdo do Nó
c) Valor Nulo
d) Texto de Comentário
e) Valor do Atributo
NotasReferências
CASSATI, J. P. Programação cliente em sistemas web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. Rio de Janeiro: Estácio, 2017.
Próxima aula
Características do JavaScript;
Sintaxe básica do JavaScript;
Criação de funções e bibliotecas com uso de JavaScript.
Explore mais
RFC do protocolo HTTP <https://tools.ietf.org/html/rfc2616>
Introdução aoHTML 5 <https://www.w3schools.com/html/html5_intro.asp>
Tutorial de CSS <https://www.w3schools.com/css/>
https://tools.ietf.org/html/rfc2616
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/
Disciplina: Programação Cliente-servidor
Aula 2: JavaScript – Parte 1
Apresentação
As páginas HTML foram se tornando cada vez mais complexas. Ao invés das páginas simplesmente informativas do início
da Web, hoje temos páginas extremamente interativas e conceitos como RIA (Rich Internet Application). Neste sentido,
acaba se tornando necessário um ferramental que traga maior �exibilidade às páginas em termos funcionais, e não apenas
visuais.
Veremos nesta aula que o uso da linguagem JavaScript irá nos permitir ampliar as funcionalidades básicas de nossas
páginas Web, já que é uma linguagem tão bem aceita que passou a ser utilizada em outras áreas além do controle do
browser, como na programação de dispositivos móveis e servidores Web.
Objetivos
Identi�car as características gerais e histórico do JavaScript;
Explicar a sintaxe básica do JavaScript;
Usar o JavaScript para a criação de funções e bibliotecas.
Origens e características
A linguagem JavaScript nem sempre teve este nome. Desenvolvida originalmente pela Netscape, ela se chamava Mocha, tendo o
nome modi�cado posteriormente para LiveScript, quando ocorreu o lançamento da mesma junto ao navegador Netscape 2.0
versão beta, em setembro de 1995.
Em dezembro de 1995, em um anúncio conjunto com a Sun Microsystems, é lançado o Netscape 2.0B3, com suporte à
tecnologia de Applets, sendo o nome da linguagem modi�cado para JavaScript, o que causa muita confusão até hoje no que
tange à sua relação com a linguagem Java.
Atenção
É importante que tenhamos em mente que JavaScript não é Java, e a similaridade entre as duas linguagens ocorre apenas pelo
fato de ambas utilizarem sintaxes baseadas na linguagem C.
Utilizamos o JavaScript para controle de elementos da página HTML e viabilização da interatividade da mesma,
caracterizando-se originalmente como uma tecnologia cliente, podendo ser embebida na própria página, ou organizada no
formato de biblioteca, como arquivo externo.
Recentemente, o JavaScript passou a ser
utilizado também do lado servidor, através de
tecnologias como o node.js. 
Outro ambiente que recebeu a possibilidade
de desenvolvimento com JavaScript foi o dos
dispositivos móveis, com uso de ferramentas
como Ionic.
Sintaxe
Inicialmente devemos compreender a declaração de variáveis e operações aritméticas da linguagem.
Uma variável pode ser declarada com o uso de var, ou simplesmente com a inicialização da mesma. Como o JavaScript não é
fortemente tipado, a variável assume o tipo do valor associado a ela.
Os tipos com os quais a linguagem trabalha são:
Inteiro;
Ponto �utuante;
Booleano;
Texto;
Objeto; e
Vetor (como objeto da classe Array).
Exemplo
Operadores aritméticos utilizados no JavaScript
Operador Operação
+ Soma (concatenação para texto)
- Subtração
* Multiplicação
/ Divisão
% Resto da divisão inteira
++ Incremento de 1
-- Decremento de 1
No exemplo a seguir, são declaradas e inicializadas as variáveis a e b, sendo impressas na página algumas operações sobre as
mesmas através do comando document.writeln.
É interessante observar que este comando escreve sobre a página HTML, permitindo a inclusão de tags, como o uso de <br/>
para quebra de linha.
 
<html>
 <body>
 <script>
 var a = 10, b = 5;
 // Algumas operações básicas...
 document.writeln(
"Soma: "+(a+b));
 document.writeln(
"Subtração: "+(a-b));
 document.writeln(
"Multiplicação: "+(a*b));
 document.writeln
("Divisão: "+(a/b));
 document.writeln(
"Teste de igualdade: "+(a==b));
 <</script>
 <</body>
</html>
Soma: 15
Subtração: 5
multiplicação: 50
Divisão: 2
Teste de igualdade: false
Dica
Lembre-se sempre de comentar seu código para que você e outros programadores possam revisá-lo com maior facilidade em
adaptações posteriores.
O JavaScript aceita dois tipos de comentários:
Comentário de linha, com uso de //;
Comentário longo, iniciado com /* e �nalizado com */.
Os operadores relacionais permitem a comparação entre valores, tendo como resultado um valor verdadeiro (true) ou falso (false),
o que pode ser armazenado em uma variável booleana.
Podemos observá-los no quadro:
Operador Operação
== Compara a igualdade entre os termos
!= Compara a diferença entre os termos
> Compara se o primeiro é maior que o segundo
< Compara se o primeiro é menor que o segundo
>= Compara se o valor é maior ou igual
<= Compara se o valor é maior ou igual
Nós também podemos combinar valores booleanos com o uso de operadores lógicos expressos pela tabela-verdade a seguir:
A (Booleano 1) B (Booleano 2) A && B - AND A || B - OR !A - NOT
false false false false true
false false true true true
true false true true false
true true true true false
Estruturas de decisão
Estando de�nidas as variáveis e métodos de saída, o nosso próximo passo será a compreensão das estruturas de decisão
existentes na sintaxe do JavaScript.
O �uxo de execução sequencial indica que as diversas instruções serão executadas na ordem em que são apresentadas no
código, mas existem formas de redirecionar o �uxo de execução para partes especí�cas.
É comum encontrarmos situações onde efetuamos determinadas ações apenas perante determinadas condições. Para isso, em
termos de algoritmos, contamos com as estruturas de decisão.
Exemplo
Exemplo
Podemos ver, no exemplo abaixo, a aplicação da estrutura if..else.
Aqui, a variável x recebe o valor digitado pelo usuário com o uso da função prompt, mas com o valor, que era originalmente texto,
convertido para número com o uso de eval.
Um exemplo simples pode ser observado a seguir:
SE �zer sol ENTÃO irei à praia SENÃO irei ao cinema.
Note que a condição de “fazer sol ou não” pode ser interpretada como um valor booleano, sendo a decisão tomada a partir desta
condição.
Outro tipo de decisão é a que tomamos perante um conjunto de opções, algo como:
SELECIONE o dia da semana:
CASO SEJA segunda-feira FAÇA: passar no escritório;
CASO SEJA terça-feira OU quarta-feira FAÇA: visitar os clientes;
CASO SEJA quinta-feira FAÇA: fechar relatórios;
SENÃO: �car em casa.
Neste exemplo, as opções de segunda-feira até quinta-feira apresentam ações especí�cas, enquanto os demais dias, que não
foram explicitados, executam a ação padrão a partir do comando SENÃO.
Em ambos os casos, é fácil de observar os desvios no �uxo de execução, pois diversos trechos serão executados apenas sob
condições especí�cas.
Estrutura if..else
Na sintaxe do JavaScript, a instrução SE..ENTÃO é expressa como if( <<condição>>), podendo se referir a um único comando, ou
um bloco de comandos delimitado pelo uso de chaves.
O uso da instrução SENÃO (else) é opcional, e também pode ser aplicado a um ou mais comandos, segundo as mesmas regras
de escrita do if.
 
<!DOCTYPE html>
<html>
 <body>
 <script>
 var x = eval(prompt("Entre com o valor:",""));
 if(x > 5)
 document.writeln("<h1>Valor maior que 5</h1>");
 else
 document.writeln("<h1>Valor menor ou igual a 5</h1>");
 </script>
 </body>
</html>

Exemplo
O exemplo a seguir ilustra a utilização da estrutura switch..case.
Aqui, a página solicitará um valor entre 1 e 3, e, de acordo com o valor utilizado, será de�nida uma cor de fundo diferente para a
palavra “XPTO”, sendo assumido fundo preto para opções que não forem previstas.
Estrutura switch..case
Para o comando SELECIONE devemos utilizar switch( <<variável>> ) no JavaScript.
Este comando irá desviar o �uxo de execução para os comandos case, de acordo com o valor da variável, sendo que o comando
default será executado caso o valor não esteja entre aqueles que foram previstos.
Devemos observar que cada seção case deve ser terminada com o comando break.
 
<!DOCTYPE html>
<html>
 <head><meta charset="UTF-8"/>
 </head>
 <body>
 <script>
 var x1 = eval(prompt("Digite um valor entre 1 e 3",""));
 var cor;
 switch(x1){
 case 1:
 cor = "yellow";
 break;
 case 2:
 cor = "lightblue";
 break;
 case 3:
 cor = "lightgreen";
 break;
 default:
 cor = "black";
 }
 document.writeln("<span style='background-color:"+cor+"'>XPTO<span>");
 </script>
 </body>
</html>

Estruturas de repetição
Outra forma e redirecionar o �uxo de execução é através do uso de estruturas de repetição.
Elas servem para repetir a execução de um comando ou bloco de comandos enquanto
determinada condição for verdadeira.
A primeira estrutura de repetição que iremos analisar é denominada PARA..FAÇA. Ela permite repetir um determinado bloco de
comandos para cada valor assumido por uma determinada variável dentro de uma faixa pré-especi�cada.
Podemos observar um exemplo simples, a seguir:
PARA X DE 1 A 10 FAÇA:
INÍCIO
ESCREVA ( X )
FIM
Neste exemplo, a variável x assumirá os valores de 1 até 10, sendo impresso
o valor da mesma a cada rodada através do comando escreva. Em termos
práticos serão impressos os valores de 1 a 10.
O bloco de execução é especi�cado pelas palavras “INÍCIO” e “FIM”, e a presença das mesmas não seria necessária, neste caso,
por envolver apenas uma instrução.
Outra estrutura de repetição de grande utilização é denominada ENQUANTO..FAÇA, e ela permite repetir um bloco de comandos
enquanto determinada condição for verdadeira, como no exemplo a seguir.
X = 1
ENQUANTO X < 11 FAÇA
INÍCIO
ESCREVA ( X )
X = X + 1
FIM
Teremos aqui o mesmo efeito do exemplo de PARA..FAÇA, ou seja, serão
impressos os números de 1 a 10, no entanto, a forma de construir é diferente.
A variável X é inicializada com o valor 1, e a estrutura ENQUANTO..FAÇA
repetirá a execução do bloco enquanto esta variável tiver valor menor do que
11.
Note a necessidade de incrementar o valor de X no bloco de execução, caso contrário o loop nunca acabaria.
Caso o valor de X tivesse sido inicializado com qualquer valor maior do que 10, não ocorreria a execução do bloco nenhuma vez, o
que diferencia a estrutura ENQUANTO..FAÇA, onde o teste é feito na entrada, da estrutura FAÇA..ENQUANTO, onde o teste é feito
na saída.
Reescrevendo o exemplo anterior teríamos:
X = 1
FAÇA
INÍCIO
ESCREVA ( X )
X = X + 1
FIM
ENQUANTO X < 11
Com este novo formato, se X fosse inicializado com o valor 12, por exemplo,
este valor seria impresso, pois o teste é feito apenas na saída da estrutura de
controle.
Estruturas de controle do tipo FAÇA..ENQUANTO são interessantes quando queremos obrigar a execução do bloco pelo menos
uma vez, sendo bastante utilizadas na criação de menus para interatividade, como:
FAÇA
   INÍCIO
      ESCREVA ( “DESEJA CADASTRAR NOVO CLIENTE OU
SAIR?” )
      LEIA ( OPCAO )
      SE OPCAO != “SAIR” ENTÃO
         INÍCIO
         // COMANDOS DIVERSOS
      FIM
   FIM
ENQUANTO OPCAO != “SAIR”
Estrutura for
A implementação de estruturas do tipo PARA..FAÇA utiliza a seguinte sintaxe:
Por exemplo, um loop de 1 a 5 seria escrito como for( i=1 ; i<=5 ; i++ ).
No código seguinte podemos observar um loop para imprimir os números de 1 a 10, classi�cando-os como pares ou ímpares.
 
<!DOCTYPE html>
<html>
 <body>
 <ul>
 <script>
 for(i=1 ; i<=10 ; i++){
 tipo = ( i%2==0 ) ? "par" : "impar";
 document.writeln("<li>O numero "+i+" e "+tipo+"</li>");
 }
 </script>
 </ul>
 </body>
</html>

Neste código podemos observar, também, a utilização de um operador de decisão para escolher entre “par” ou “ímpar”.
Um operador de decisão segue a sintaxe abaixo:
variável = ( << condição >> ) ? valor para true : valor para false
Baseado nisto, podemos dizer que, se a condição ( i%2==0 ) for verdadeira, tipo recebe “par”, senão recebe “impar”.
Isso equivale à seguinte estrutura de decisão:
if ( i%2==0 )
 tipo = "par";
else
 tipo = "impar";
Podemos utilizar o operador de decisão para a simpli�cação da escrita nas situações em
que uma determinada variável recebe dois valores alternativos perante uma determinada
condição.
Estruturas while e do..while
Exemplo
ENQUANTO..FAÇA
A implementação de estruturas do tipo
ENQUANTO..FAÇA utiliza a seguinte sintaxe:
while( <<condição>> ) {
      // Bloco de Comandos
}
Condição – Expressão booleana que
determina a execução do comando ou bloco
de comandos.

FAÇA..ENQUANTO
Com relação às estruturas do tipo
FAÇA..ENQUANTO, a sintaxe utilizada seria:
do {
      // Bloco de Comandos
} while( <<condição>> );
Condição – Expressão booleana que
determina a continuidade da execução do
bloco de comandos.
Exemplo
Clique em Exemplo <galeria/aula2/anexo/exemplo.pdf> e observe a utilização do comando while.
Funções e bibliotecas
Em muitas situações, precisamos efetuar uma determinada sequência de comandos repetidas vezes em diferentes contextos.
Toda vez que replicamos código estamos aumentando o tamanho do mesmo e di�cultando a manutenção.
Por exemplo, se um erro é detectado nesta sequência de comandos, ocorrerá a necessidade de procurar todas as diversas
ocorrências da mesma e alterar cada uma delas.
Uma solução para isso é o uso de uma função, que é a denominação de um processo englobando uma sequência de comandos,
e que recebe um nome e a possibilidade de parâmetros de entrada e retorno de valor.
Já utilizamos algumas funções nativas do JavaScript em outros exemplos, como prompt e eval, e agora utilizaremos mais uma.
A função con�rm tem por objetivo efetuar uma pergunta, retornando true para o caso do clique em OK e false para Cancela.
 
<script>
 function meuProcesso(){
 a = eval(prompt("Entre com o valor:",""));
 b = a * 5;
 document.writeln("<br/>"+a+" * 5 = "+b);
 }
 meuProcesso();
 z = 3;
 while(z>0) {
 meuProcesso();
 z--;
 }
 if(confirm("Mais uma vez?")) {
 meuProcesso();
 }
</script>
Neste exemplo, um mesmo procedimento é repetido diversas vezes, apenas alterando a nomenclatura das variáveis.
Se a multiplicação fosse alterada de 5 para 4, ocorreria um problema de manutenção bastante relevante, mesmo para um código
pequeno como esse.
A solução é transformar o processo repetitivo em uma função, como no código abaixo:
http://estacio.webaula.com.br/cursos/gon964/galeria/aula2/anexo/exemplo.pdf
 
<script>
 function meuProcesso(){
 a = eval(prompt("Entre com o valor:",""));
 b = a * 5;
 document.writeln("<br/>"+a+" * 5 = "+b);
 }
 meuProcesso();
 z = 3;
 while(z>0) {
 meuProcesso();
 z--;
 }
 if(confirm("Mais uma vez?")) {
 meuProcesso();
 }
</script>
Note como o código �cou mais legível com a de�nição da
função. Além disso, as tarefas de manutenção são muito
facilitadas, pois a alteração do corpo da função irá impactar de
forma automática em todas as suas utilizações no decorrer do
código.
O formato geral de uma função, no JavaScript, seria:
function NOME (PARÂMETRO1, PARÂMETRO2 ... PARÂMETRON) {
 [COMANDOS]
 return VALOR;
}
Tanto os parâmetros quanto o valor de retorno são opcionais na de�nição de uma função.
Poderíamos exempli�car uma função para o cálculo da hipotenusa de um triângulo retângulo a partir do fornecimento dos valores
de seus catetos, baseada no Teorema de Pitágoras.
Neste exemplo, são utilizados Math.sqrt para cálculo da raiz quadrada e Math.pow para elevar um valor a uma potência, no caso
ao quadrado.
Como as funções visam a reutilização, é muito comum organizá-las em grupos denominados bibliotecas, normalmente
guardadas em arquivos texto com a extensão “js”.
Diversas bibliotecas JavaScript encontram-se disponíveis e podemos também criar as nossas.
Para o próximo exemplo, utilizaremos dois arquivos, sendo um denominado “cores.js”e outro “testeCores.html”.
Incialmente, vamos observar o código de “cores.js”:
 
 function pitagoras(cateto1, cateto2){
 return Math.sqrt(Math.pow(cateto1,2) + Math.pow(cateto2,2));
 }
 
var letras = new Array("0","1","2","3","4","5","6","7","8","9",
"A","B","C","D","E","F");
function getHexa(inteiro){
 resto = inteiro % 16;
 quociente = (inteiro - resto) / 16;
 return letras[quociente] + letras[resto];
}
function getCor(r,g,b){
 return "#" + getHexa(r) + getHexa(g) + getHexa(b);
}
Esta biblioteca visa efetuar a conversão dos números inteiros entre 0 e 255 para
hexadecimal, e a formação de códigos de cores no padrão RGB a partir de 3 inteiros na faixa
citada.
Incialmente, com o uso de Array, é de�nido um vetor de elementos texto, onde cada posição representa um número de 0 a 15 no
formato hexadecimal, como cores[11] equivalendo a “B”.
Em seguida, de�nimos a função getHexa, que recebe um valor inteiro como parâmetro, e efetua a conversão para hexadecimal.
Esta conversão é efetuada com a divisão inteira por 16, sendo o quociente utilizado para alta ordem do hexadecimal e o resto para
baixa ordem.
Por exemplo, se dividirmos 222 por 16, teremos quociente 13 e resto 14, o que retornará o valor “DE” em hexadecimal.
A última função se chama getCor, e recebe três parâmetros denominados r, g e b, os quais correspondem aos componentes
vermelho, verde e azul da composição da cor.
No corpo desta função podemos observar a concatenação do símbolo “#” com as chamadas de getHexa para os três parâmetros
sucessivamente.
Se efetuarmos uma chamada getCor(222,220,224) teremos como retorno o valor “#DEDCE0”.
Agora que construímos nossa biblioteca para tratamento de cores, podemos utilizá-la em uma página HTML, a qual recebeu o
nome de “testeCores.html”, cujo código e saída podem ser observados a seguir:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <script src="cores.js"></script>
 </head>
 <body>
 <script>
 for(i=1;i<=100;i++){
 red = Math.trunc(Math.random()*255);
 green = Math.trunc(Math.random()*255);
 blue = Math.trunc(Math.random()*255);
 document.writeln("<span style='color:"+getCor(red,green,blue)+"'<");
 document.writeln(i + "</span>");
}
 </script>
 </body>
</html>

No código da página, podemos observar um loop de 1 a 100, com uso de for, e internamente o uso de Math.trunc, que faz a
aproximação inteira, e Math.random, para obter um número aleatório entre 0 e 1, segundo uma distribuição uniforme.
Ao multiplicar o resultado de Math.random por 255, obtemos um número aleatório entre 0 e 255, porém no formato de ponto
�utuante, o que é resolvido com a transformação em inteiro com Math.trunc, viabilizando a chamada de getCor.
A cada rodada do loop, é escrita uma tag <span>, tendo como conteúdo o valor de i corrente, e sendo formatada a cor da fonte
com uso do atributo style.
Como os números para red, green e blue são randômicos, a cada vez que atualizamos a página, os números serão expostos com
cores diferentes.
Para as operações matemáticas fazemos grande uso de Math.
Método ou Atributo Descrição
sqrt(x) Cálculo da raiz quadrada de x
trunc(x) Trunca o valor x, retornando apenas a parte inteira
pow(x,y) Retorna o resultado de x elevado a y
random( ) Retorna um valor aleatório entre 0 e 1
PI Constante com o valor de PI
max(x1,x2,...,xn) Retorna o maior valor da sequência
min(x1,x2,...,xn) Retorna o menor valor da sequência
sin(x) Calcula o seno de um ângulo x em radianos
cos(x) Calcula o cosseno de um ângulo x em radianos
abs(x) Retorna o valor absoluto de x
Saiba mais
Os outros métodos e atributos de Math podem ser observados em w3schools.com
<https://www.w3schools.com/js/js_math.asp> .
Recursividade
Quando falamos sobre recursividade, estamos nos referindo a funções que chamam a si mesmas, repetidamente, para a solução
de determinado problema.
Talvez o exemplo mais simples de recursividade seja o cálculo do fatorial de um número.
Por exemplo, 4! = 4 * 3 * 2 * 1, 3! = 3 * 2 * 1, 2! = 2 * 1 e 1! = 1.
Podemos observar que 4! = 4 * 3! ou que 3! = 3 * 2! e, a partir disso, de�nir uma regra de recursividade.
Toda função recursiva chama a si mesma, e tem uma regra de parada para que não
ocorra uma execução inde�nida. Neste caso, a regra seria “quando chegar a 1 retorne
1”.
A seguir, podemos observar um exemplo de implementação da função fatorial de forma recursiva.
https://www.w3schools.com/js/js_math.asp
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 <script src="cores.js"></script>
 </head>
 <body>
 <script>
 function fatorial(n){
 if(n>1)
 return n * fatorial(n-1);
 else
 return 1;
 }
 x = eval(prompt("Digite um numero",""));
 document.writeln("Fatorial de "+x+" = "+fatorial(x));
 </script>
 </body>
</html>

Atividade
1 - Marque Verdadeiro ou Falso para as opções sobre as características gerais da linguagem JavaScript:
a) A sintaxe JavaScript diferencia maiúsculas e minúsculas.
b) JavaScript é fortemente tipado.
c) Foi desenvolvida originalmente pela NetScape com o nome de Mocha.
d) Hoje é possível desenvolver para dispositivos móveis com JavaScript.
e) JavaScript foi criado como uma versão script da linguagem Java.
2 - Você começou a desenvolver a página de um novo cliente e ele solicitou que uma das páginas con�rmasse uma sequência de
caracteres digitados pelo usuário de acordo com uma imagem da tela antes de apresentar o conteúdo, técnica conhecida como
CAPTCHA. Considerando que o usuário terá que digitar ao menos uma vez, e repetir até acertar, qual estrutura de controle de �uxo
deverá ser utilizada?
a) if..else
b) while
c) do..while
d) switch..case
e) for
3 - Implemente uma função em JavaScript para efetuar o cálculo do Imposto sobre a Renda em um determinado país,
considerando o desconto por faixa, de acordo com a tabela seguinte.
Faixa Alíquota
R$0,00 a R$1.500,00 Isento
R$1.500,01 a R$2.500,00 10%
R$2.501,00 a R$4.000,00 20%
R$4.000,01 ou acima 30%
Gabarito comentado
NotasReferências
CASSATI, J. P. Programação Cliente em Sistemas Web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
 PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. 1. ed. Rio de Janeiro: Estácio, 2017.
Próxima aula
Elementos de interatividade com a página;
JavaScript para a validação de formulários;
A sintaxe JavaScript para Orientação a Objetos.
Explore mais
Visite as páginas sugeridas a seguir e saiba mais sobre o conteúdo estudado nesta aula:
Básico de JavaScript <https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript>
Uso de JavaScript com DOM <https://www.w3schools.com/js/js_htmldom.asp>
Tutorial de JavaScript <https://www.w3schools.com/js/>
Document Object Model <https://en.wikipedia.org/wiki/Document_Object_Model>
https://developer.mozilla.org/pt-BR/docs/Aprender/JavaScript
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/js/
https://en.wikipedia.org/wiki/Document_Object_Model
Disciplina: Programação Cliente-servidor
Aula 3: JavaScript – Parte 2
Apresentação
A partir do momento em que conseguimos construir nossas páginas, estruturando com o HTML e formatando com CSS,
devemos cuidar da interatividade da mesma. A linguagem JavaScript será o ferramental necessário para prover esta
interatividade, atuando por meio do DOM e dos eventos da página.
Com o domínio dessas técnicas, podemos também efetuar a validação de nossos formulários, viabilizando diversas críticas
acerca do formato e exigência dos dados envolvidos nos cadastros.
Por �m, assim como em outras plataformas, o uso da orientação a objetos irá trazer maior robustez ao código
implementado.
Objetivos
Explicar oselementos de interatividade com a página;
Aplicar o JavaScript para a validação de formulários;
Analisar a sintaxe JavaScript para orientação a objetos.
Exemplo
O exemplo a seguir ilustra a utilização da estrutura switch..case.
Aqui, a página solicitará um valor entre 1 e 3, e, de acordo com o valor utilizado, será de�nida uma cor de fundo diferente para a
palavra “XPTO”, sendo assumido fundo preto para opções que não forem previstas.
Interação com a página HTML
Precisamos ter em mente que o principal objetivo do JavaScript é expandir as funcionalidades básicas de uma página HTML. Para
isso, deve ser capaz de interagir com seus componentes e com o utilizador da página.
 Fonte: (Markus Spiske / Unsplash)
Neste contexto, temos dois caminhos que funcionam em sentidos inversos:
O uso de DOM permitirá ao JavaScript acessar os
componentes da página;
Através de eventos, a página poderá acionar rotinas em
JavaScript.
Antigamente, a forma de acesso aos componentes HTML variava muito de um navegador para outro, mas a W3C padronizou o
acesso aos componentes através do uso de document e identi�cadores do DOM.
1
W3C1
Modal: W3C – World Wide Web Consortium é uma comunidade internacional onde diversas organizações-membro, uma equipe
em tempo integral e o público trabalham juntos para de�nir padrões para a Web.
Fonte: https://www.w3.org/Consortium/ <https://www.w3.org/Consortium/>
Métodos de acesso DOM
Através de document, acessamos os elementos DOM de diferentes formas, sendo a mais tradicional através do atributo Id do
elemento desejado, como podemos observar no exemplo:
http://estacio.webaula.com.br/cursos/gon964/aula3.html
https://www.w3.org/Consortium/
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <div id=="Camada1">PEQUENO TESTE</div>
 <script>
 var obj = document.getElementById("Camada1");
 obj.style.backgroundColor = "yellow";
 alert(obj.firstChild.nodeValue);
 </script>
 </body>
</html>

Inicialmente, devemos considerar as formas de acesso ao DOM proporcionadas através de document. Neste exemplo, a variável
obj recebe uma referência ao componente div da página cujo Id é “Camada1”, observando as letras maiúsculas e minúsculas
utilizadas, já que é case-sensitive.
Alguns dos métodos de document para acesso aos componentes da página podem ser observados no quadro:
Método Retorno
getElementById Retorna um objeto como referência a um componente unicamente identificado através de seu
atributo id
getElementsByClassName Retorna uma coleção de objetos referenciando todos os componentes que apresentem o
atributo class desejado
getElementsByTagName Retorna uma coleção de objetos referenciando todos os componentes do tipo desejado, como
button, div ou h1
querySelector Retorna um objeto com o primeiro elemento que utilize o seletor CSS
querySelectorAll Retorna uma coleção de objetos com todos os elementos que utilizem o seletor CSS
Assim como foi utilizado document.getElementById("Camada1"), poderíamos utilizar o comando
document.querySelector(“#Camada1”) no lugar, e iríamos obter o mesmo resultado �nal.
O objeto receptor assume as características do componente HTML referenciado, podendo ser acessados seus diversos atributos,
como style, ou no caso de uma tag <input> atributos como value e maxLength.
Ao mesmo tempo em que podemos utilizar os atributos HTML para o tipo de tag associado ao objeto, podemos observar este
objeto como um nó de árvore da estrutura DOM, o que permite a navegação entre os nós e tipi�cação.
Isto pode ser observado ao �nal do exemplo, onde é utilizado obj.�rstChild.nodeValue, correspondendo ao conteúdo do primeiro
nó �lho de obj.
Sempre devemos lembrar de que, em termos de DOM, obj corresponde a um nó do tipo Element, referenciando uma tag <div>, e o
conteúdo HTML interno desta tag é um outro nó da árvore, do tipo Text, obtido com �rstChild.
Como este outro nó é do tipo texto, o atributo nodeValue retornará o texto contido na tag original.
Navegação DOM
Incialmente, devemos lembrar que o DOM permite a manipulação de diferentes tipos de nós, como elementos, comentários e
textos.
Para descobrir qual o tipo de nó, podemos utilizar a propriedade nodeType, que é numérica, enquanto o nome do elemento
associado pode ser obtido com nodeName, e o conteúdo do mesmo com nodeValue.
A tabela a seguir mostra a relação entre estas três propriedades:
nodeType Tipo de Nó nodeName nodeValue
1 Element Nome do Elemento (tag) Null
2 Attr Nome do atributo Valor do atributo
3 Text #text Conteúdo do nó
4 CDATASection #cdata-section Conteúdo do nó
5 EntityReference Referência de Entidade Null
6 Entity Nome da Entidade Null
7 ProcessingInstruction Alvo da ação Conteúdo do nó
8 Comment #comment Comentário na forma de texto
9 Document #document Null
10 DocumentType Nome do DocType Null
11 DocumentFragment #document-fragment Null
12 Notation Nome da notação Null
Fonte: Adaptado de W3schools <https://www.w3schools.com/jsref/prop_node_nodetype.asp>
https://www.w3schools.com/jsref/prop_node_nodetype.asp
Exemplo
Por exemplo, para uma tag do tipo <div>, teríamos nodeType com valor 1 (Element), nodeName com valor “_div_” e nodeValue
nulo, e o conteúdo desta tag estaria em outros nós da árvore DOM, �lhos da mesma.
Para um conteúdo texto simples, ainda com o exemplo da tag <div>, este poderia ser obtido com o uso de �rstChild.nodeValue,
como foi feito no exemplo apresentado anteriormente.
Atenção
Neste ponto devemos observar os métodos de navegação. Por se tratar de uma árvore, devemos ter a possibilidade de acessar
um nó especí�co, assim como os descendentes do mesmo.
Para o acesso ao nó especí�co, normalmente a partir do id do mesmo, podem ser utilizadas as instruções getElementById ou
querySelector, conforme discutido anteriormente, e a partir do nó localizado, podemos acessar os descendentes do mesmo.
Exemplo
Vamos observar o exemplo:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <ul id="lista">
 <li>Banana</li>
 <li>Laranja</li>
 <li>Manga</li>
 </ul>
 <script>
 var obj = document.querySelector("lista")
 var filhos = obj.children;
 var cores = ["orange","yellow","lightgreen"];
 for (i = 0; i < filhos.length; i++) {
 filhos[i].style.backgroundColor = cores[i];
 }
 </script>
 </body>
</html>
Neste exemplo, nós localizamos o início da lista com uso de querySelector("#lista"), e a partir deste elemento obtivemos os
elementos <li> internos através do atributo children do nó.
Como esses elementos são obtidos no formato ObjectHtmlCollection, é possível navegar nos mesmos como um vetor, aplicando
as cores disponíveis no segundo vetor ao fundo de cada elemento através de style.
Alguns dos atributos que podem ser utilizados pelo nó para a navegação na árvore podem ser observados no quadro:
Atributo Conteúdo
firstChild Retorna o primeiro filho do nó corrente
childNodes Retorna uma coleção de nós contendo os filhos do nó corrente
parentNode Retorna o nó que ascende ao nó corrente (pai)
firstElementChild Retorna o primeiro filho do tipo Element para o nó corrente
lastElementChild Retorna o último filho do tipo Element para o nó corrente
children Retorna todos os filhos do tipo Element para o nó corrente
De acordo com o tipo de nó existente na árvore, os atributos podem ser diferentes, mas a W3C traz uma documentação muito
completa acerca de cada tipo de nó, como para o tipo Element, que representa as tags do HTML ou XML.
Saiba mais
A referência pode ser obtida no endereço https://www.w3schools.com/jsref/dom_obj_all.asp
<https://www.w3schools.com/jsref/dom_obj_all.asp> .
Eventos
Podemos de�nir evento como uma ação pré-determinada que, ao ocorrer, permite que seja iniciada uma ação personalizada, o
que certamente será feito através de programação.
Por exemplo, ao clicar sobreo botão, inicie a função somar, o que poderia ser escrito da seguinte forma no HTML:
Caso o evento não seja associado ao nível do HTML, ele pode ser atrelado ao objeto através de JavaScript e DOM, como no
código a seguir:
 
<button id="btn1" onClick="somar()">SOMAR</button>
 
document.getElementById("btn1").addEventListener("click",
 function(event) {
 somar();
 });
O método addEventListener recebe, como parâmetros, o nome do evento a ser
utilizado e uma função callback para resposta ao evento.
https://www.w3schools.com/jsref/dom_obj_all.asp
Exemplo
Observe um pequeno exemplo de utilização de evento sobre o clique do botão:
Neste exemplo, a página contém apenas um botão, e, ao clicar sobre ele, aparecerá a mensagem “OLA MUNDO” em um alert.
Podemos observar a associação do evento de clique com a função de tratamento na seguinte linha:
Outra forma de associar seria diretamente no HTML:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<button id="Teste1">Clique Aqui</button>
<script>
 function mostraMensagem(){
 alert("OLA MUNDO");
 }
 var obj = document.querySelector("#Teste1");
 obj.addEventListener("click",mostraMensagem);
</script>
</body>
</html>
 
obj.addEventListener("click",mostraMensagem);
 
<button id="Teste1" onclick="mostraMensagem()"> Clique Aqui </button>
Modi�cações dinâmicas
Com o uso de DOM, podemos acessar, alterar ou criar elementos em uma página HTML de forma dinâmica, durante a sua
visualização no navegador.
É um processo razoavelmente simples, e que traz grande �exibilidade para a interface visual.
Incialmente, devem ser utilizados alguns métodos de document para a criação dos nós de acordo com o tipo correto, e depois os
métodos existentes para os nós DOM permitem o acréscimo, substituição ou remoção de outros nós.
A tabela seguinte mostra alguns métodos existentes em document para a criação de nós DOM.
Método 
createElement Cria um nó do tipo Elemento (tag)
createTextNode Cria um nó de texto
createAttribute Cria um atributo. O nó pode utilizar com setAttributeNode
createComment Cria um comentário
Os nós e atributos criados a partir de document podem ser utilizados e anexados a nós de elementos já existentes na estrutura da
página, e o nó inicial da página pode ser obtido com o elemento body de document.
 
var x = document.createComment("Apenas um comentário");
document.body.appendChild( x );
Exemplo
O exemplo seguinte demonstra a utilização desta metodologia de inserção de nós:
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 Nome:<input type="text" id="nome">
 <button onclick="adicionar()">Adicionar</button>
 <ul id="lista">
 </ul>
 <script>
 var lista = document.querySelector("#lista");
 var texto = document.querySelector("#nome");
 function adicionar(){
 var node = document.createElement("LI");
 var textnode =
 document.createTextNode(texto.value);
 node.appendChild(textnode);
 lista.appendChild(node);
 texto.value = "";
 texto.focus();
 }
 </script>
 </body>
</html>
Neste exemplo, criamos uma função adicionar onde, em
sua implementação, é criado um nó de elemento do tipo
<li> e um nó de texto contendo o valor da caixa identi�cada
por “nome”.
 
var node = document.createElement("LI");
var textnode = document.createTextNode(texto.value);

Nas linhas seguintes, podemos observar o nó de texto
sendo anexado ao nó de elemento, e o elemento <li> sendo
adicionado à lista da página.
 
node.appendChild(textnode);
lista.appendChild(node);
As duas últimas linhas tratam apenas de um re�no de interface onde, logo após a inserção, é limpo o texto existente na caixa e
colocado o foco na mesma.
Outra forma muito comum de modi�cação de conteúdo é com o uso do atributo innerHTML dos nós DOM. Com ele, podemos
colocar qualquer conteúdo HTML dentro da tag representada pelo nó de elemento.
Finalmente, podemos remover nós da árvore, a partir de um nó de elemento DOM, com o uso de removeChild, ou substituí-los
com o uso de replaceChild.
 
document.getElementById(“minhaDiv”).innerHTML = "<h1>TESTE</h1>";
Validação de formulários
Entre diversas outras ações, devemos nos preocupar com a necessidade de:
Podemos utilizar os recursos do HTML5 para efetuar parte dessas críticas, e o JavaScript para de�nir aquelas que não sejam
cobertas por estes recursos.
Um formulário é uma entrada de dados simples, que considera apenas texto e seleções,
mas sem grandes críticas acerca de formato e validade destes dados.
 De�nir campos obrigatórios;
 Utilizar tipos de dados especí�cos;
 Controlar a visibilidade de campos alternativos.
No entanto, devemos ter em mente que as críticas efetuadas do lado cliente são
apenas relacionadas ao formato dos dados, e não à integridade da base. Críticas como
violações de chave primária ou inexistência de registro na base só podem ser feitas no
lado servidor.
Também precisamos lembrar que o JavaScript pode ser desativado pelo usuário, o que tornaria o conjunto de validações inócuo,
exigindo uma nova validação do lado servidor, e que realmente deve ser feita.
Por que validar no cliente se temos que validar no servidor novamente?
A resposta tem a ver com usabilidade e �uxo de rede, pois a resposta da validação de formato no cliente é mais rápida, além de
diminuir o �uxo de rede com chamadas desnecessárias ao servidor, já que os dados serão criticados antes do envio.
Assim como em todos os demais elementos de interatividade da página com as rotinas JavaScript, também na validação contamos
com os eventos para de�nir o momento de acionamento da crítica ou formatação.
Exemplo
Podemos efetuar uma validação global a partir do evento onsubmit, como no exemplo seguinte.
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <form method="get" action="//lugarnenhum" onsubmit="return validar();">
 Nome:<input type="text" name="nome" id="nome"/><br/>
 Contribuinte:<input type="radio" name="contrib" id="contrib1" value="S">Sim
 <input type="radio" name="contrib" id="contrib2" value="N">Não
 <br/>
 <input type="submit" value="Cadastrar"/>
 </form>
 <script>
 function validar(){
 var nome = document.getElementById("nome"),
 contrib1 = document.getElementById("contrib1"),
 contrib2 = document.getElementById("contrib2");
 if(nome.value==""){
 alert("Nome e obrigatório");
 nome.focus();
 return false;
 }
 if(!contrib1.checked && !contrib2.checked){
 alert("Escolha uma opção de contribuinte");
 return false;
 }
 return true;
 }
 </script>
 </body>
</html>
Devemos observar o formato da função de validação, que deverá retornar true ou false para o evento osSubmit, de forma a
permitir ou não o envio da informação para o servidor.
Por este motivo a chamada deste evento é um pouco diferente dos outros.
Outro elemento interessante neste código é o uso de focus( ). Caso o nome não seja preenchido, a mensagem “Nome é
obrigatório” é apresentada e o foco é direcionado para a caixa de texto referente a este dado.
Para o teste dos componentes do tipo rádio, devemos veri�car se nenhum deles foi marcado. Para isso, utilizamos suas
propriedades checked.
 
<form method="get" action="//lugarnenhum"
onsubmit="return validar();">
Lembrando que, pelo fato de a propriedade ser booleana, a negação será equivalente à
comparação com false.
 
if(!contrib1.checked && !contrib2.checked)
Outras validações e formatações podem ser efetuadas no momento da perda do foco pela caixa de texto, ou quando
selecionamos o elemento de uma lista de valores, entre diversas outras opções.
Observe, no quadro seguinte, alguns eventos do HTML e suas respectivas aplicaçõesno processo de validação.
Evento Aplicação
onsubmit Efetua a validação do formulário imediatamente antes do envio para o servidor. Necessita o retorno booleano,
indicando se os valores podem ser enviados ou não
onclick Normalmente uma chamada explicita de validação. Muito utilizado em botões de rádio e caixas de marcação
onchange Ocorre quando o valor (value) sofre uma alteração
onfocus Ocorre quando o componente ganha o foco. Pode ser utilizado, por exemplo, para apagar o valor do campo
onblur Ocorre na perda do foco pelo componente. É comum a aplicação de máscaras em valores numéricos como
CEP e CPF
onsearch Este evento é iniciado quando um usuário digita algo em um campo de pesquisa (type=”search”)
onselect Utilizado quando algum texto é selecionado no campo
Orientação a objetos
Com a criação de sistemas cada vez maiores e com grande apelo visual, as técnicas tradicionais de modelagem e programação
estruturada começaram a entrar em colapso.
Complexos trechos de código inter-relacionados, junto com a documentação escassa e diversas replicações de processos já
existentes, acabam tornando a manutenção dos sistemas extremamente difícil, aumentando o custo e diminuindo as
possibilidades evolutivas destes sistemas.
A orientação a objetos surge neste contexto, trazendo uma forma mais organizada de trabalho, onde a modelagem e a
implementação mostram uma proximidade muito maior do que nas técnicas ditas tradicionais.
 Fonte: Vadim Sherbakov / Unsplash
Saiba mais
O termo Programação Orientada a Objetos (POO) foi criado por Alan Kay, autor da linguagem de programação Smalltalk. Mas,
mesmo antes da criação do Smalltalk, algumas das ideias da POO já eram aplicadas, sendo que a primeira linguagem a realmente
utilizar estas ideias foi a linguagem Simula 67, criada por Ole-Johan Dahl e Kristen Nygaard em 1967. Entretanto só veio a ser
aceito realmente nas grandes empresas de desenvolvimento de Software por volta dos anos 1990.
Fonte: Programação Orientada a Objetos/Introdução
<https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria>
Para podermos adotar esta nova �loso�a, devemos deixar de pensar em termos de processos e funções, pois isto é a
metodologia estruturada, focada em funcionalidades pontuais e a organização das mesmas.
Agora precisamos pensar de uma forma diferente, em termos de personagens, quais deverão apresentar características físicas e
ações ou verbos.
Por exemplo, na programação estruturada, diríamos que o projétil partiu no ângulo de 55 graus, sofrendo a ação da gravidade, e
atingindo o prédio na altura do quarto andar, pois estamos de�nindo um processo.
Em termos de orientação a objetos, consideraríamos que temos um personagem chamado tanque de guerra, e que ele é capaz
de atirar um projétil.
A mudança de foco é muito grande e tem como objetivo:
Aumento do reuso de código; Facilidade de manutenção;
Documentação automatizada.
https://pt.wikibooks.org/wiki/Programa%C3%A7%C3%A3o_Orientada_a_Objetos/Introdu%C3%A7%C3%A3o#Hist%C3%B3ria
Começamos a utilizar de forma mais ampla a programação orientada a objetos (POO) com o advento das interfaces grá�cas, pois
�cou muito evidente que a programação estruturada não era a melhor opção para construir ambientes constituídos de janelas.
Antigamente tínhamos que utilizar as APIs do sistema operacional para a construção de cada janela, de forma independente, mas,
com a POO, podemos de�nir um personagem denominado “Janela”, que:
Terá atributos como “posição”, “largura” e “altura”; e
Será capaz de efetuar ações como “abrir”, “minimizar” e “maximizar”.
A partir daí, podemos colocar a quantidade necessária de personagens deste tipo para implementar as interfaces de nossos
sistemas.
Abstração
Um dos pilares da POO é o conceito de abstração, que se refere à de�nição de um modelo
simpli�cado de algo maior.
Quando abstraímos algo, estamos preocupados apenas com os detalhes que sejam relevantes para o problema de interesse, e
estas abstrações serão representadas como classes na POO, que trazem a de�nição dos atributos e métodos suportados pelos
personagens.
Os atributos de�nem características físicas, como cor, idade, endereço etc., enquanto métodos são as ações, ou verbos, que
podem ser praticadas, tais como comer, andar ou dormir.
Uma classe funciona como um molde (tipo ou domínio), de forma a de�nir como serão os objetos criados a partir da mesma,
como no exemplo seguinte, em JavaScript.
 
function Pessoa(nome, idade){
 this.nome = nome;
 this.idade = idade;
}
Atenção
Neste exemplo, estamos de�nindo uma classe Pessoa, com o uso de function, segundo a sintaxe utilizada pelo JavaScript.
Note que esta é uma abstração que de�ne o modelo Pessoa apenas a partir do nome e da idade.
Qual é este nome e esta idade?
Aqui entram os objetos, pois as classes de�nem o modelo que será seguido por suas instâncias (ou objetos), e estas instâncias
assumem valores para os atributos de�nidos.
EXEMPLO
Observe o exemplo completo a seguir:
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
 <script>
 function Pessoa(nome, idade){
 this.nome = nome;
 this.idade = idade;
 this.exibir = function( ) {
 alert(this.nome+" tem "+this.idade+" ano(s)");
 }
 }
 var p1 = new Pessoa("Ana",25);
 var p2 = new Pessoa("Marcos",36);
 </script>
 <button onclick="p1.exibir()"/>P1</button>
 <button onclick="p2.exibir()"/>P2</button>
</body>
</html>
Inicialmente, temos a classe Pessoa, criada através de function e com o uso do ponteiro this para a de�nição dos atributos nome
e idade, além do método exibir, sem parâmetros.
Podemos ler o ponteiro de autoreferência this como “deste”, ou seja, o atributo idade desta Pessoa (this.idade), ou o método
exibir desta Pessoa (this.exibir).
Atenção
Uma observação a ser feita é que, assim como as classes são de�nidas com o uso de function, os métodos da mesma também
são. Basta observar a de�nição do método exibir.
Com a de�nição da classe Pessoa, podemos criar os objetos p1 e p2, cada um com seus próprios valores para os atributos nome
e idade.
Para instanciar os objetos, utilizamos o operador new, responsável por alocar a memória necessária para o novo objeto.
Finalmente, podemos observar a chamada ao método exibir de p1 ou p2 a partir dos eventos presentes nos dois botões da página
HTML.
Ao clicar no botão com texto “P1” será acionado o método exibir do objeto p1, enquanto o botão com texto “P2” acionará o
método exibir de p2.
 
this.exibir = function() {
 alert(this.nome+" tem "+this.idade+" ano(s)");
}
 
var p1 = new Pessoa("Ana",25);
var p2 = new Pessoa("Marcos",36);
 
<button onclick="p1.exibir()"/>P1</button>
<button onclick="p2.exibir()"/>P2</button>
Protótipo
O uso de protótipo é uma peculiaridade do JavaScript e não uma característica própria da orientação a objetos.
Na verdade, o JavaScript não apresenta um mecanismo especí�co para herança, que seria outro dos pilares da orientação a
objetos, mas permite a utilização de prototype para expandir a funcionalidade de classes já existentes.
Vamos considerar uma classe Pessoa constituída apenas de nome e sobrenome:
Com o uso de prototype, podemos adicionar a nacionalidade para esta classe já existente. Claro, que exigirá uma inicialização
prévia, já que o construtor não tem como prever o novo atributo.
Da mesma forma que podemos adicionar um atributo, podemos adicionar um método a esta classe com o uso de prototype.
 
function Pessoa(nome, sobrenome){
 this.nome = nome;
 this.telefone = sobrenome;
}
 
Pessoa.prototype.nacionalidade = "Brasileiro(a)";
 
Pessoa.prototype.nomeCompleto = function( ) {
 return this.nome + " "+this.sobrenome;
};
Atividade
1. O uso de DOM permite a modi�cação dinâmica de partes da página, com o acréscimo, remoção ou alteração de elementos,
tratando de um elemento essencial na interação entre o JavaScript e a página.
Observando o trecho de HTML abaixo, qual seria a instrução JavaScriptpara obter acesso ao elemento DIV e colocar nele a frase
“EXERCICIO DOM”?
<div id="XPTO">ALVO</div>
a) document.getElementById("XPTO").value = "EXERCICIO DOM";
b) document.querySelector("#XPTO").value = "EXERCICIO DOM";
c) document.getElementById("XPTO").innerHTML = "EXERCICIO DOM";
d) document.querySelector(".XPTO").innerHTML = "EXERCICIO DOM";
e) document.querySelector("DIV").value = "EXERCICIO DOM";
2. Você está criando um formulário para cadastro de leitores de um jornal na Web, onde devem constar os dados residenciais do
leitor. A empresa pediu que dados como rua, bairro, cidade e estado sejam preenchidos automaticamente após o leitor digitar o
CEP e sair da caixa de texto. Qual evento deve ser utilizado para efetuar este preenchimento?
a) onblur
b) onclick
c) onexit
d) onenter
e) onchange
3. As linguagens da atualidade buscam metodologias mais organizadas para a programação, e a orientação a objetos acaba
sendo amplamente adotada com este objetivo. O JavaScript também permite o uso desta metodologia, e, para de�nir atributos de
uma classe, é utilizada uma palavra reservada especí�ca. Qual a palavra utilizada?
a) function
b) new
c) inherited
d) this
e) super
Notas
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Título modal 1
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma
simulação de texto da indústria tipográ�ca e de impressos. Lorem Ipsum é simplesmente uma simulação de texto da indústria
tipográ�ca e de impressos.
Referências
CASSATI, J. P. Programação Cliente em Sistemas Web. Rio de Janeiro: Estácio, 2016.
DEITEL, P; DEITEL, H. Ajax, Rich Internet Applications e Desenvolvimento Web para Programadores. São Paulo: Pearson
Education, 2009.
PLOTZE, R. Tecnologias Web. Rio de Janeiro: Estácio, 2016.
SANTOS, F. Tecnologias para Internet II. 1. ed. Rio de Janeiro: Estácio, 2017.
Próxima aula
Sintaxe JSON (JavaScript Object Notation);
Bibliotecas JQuery;
Biblioteca JQuery UI para construção de páginas.
Explore mais
Para entender melhor os assuntos tratados nesta aula, acesse estes materiais:
Uso de JavaScript com DOM” <https://www.w3schools.com/js/js_htmldom.asp>
“Eventos” <https://www.w3schools.com/tags/ref_eventattributes.asp>
“Orientação a objetos em JavaScript” <https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-
Oriented_JavaScript>
https://www.w3schools.com/js/js_htmldom.asp
https://www.w3schools.com/tags/ref_eventattributes.asp
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Disciplina: Programação Cliente-servidor
Aula 4: JSON e JQuery
Apresentação
Hoje em dia é cada vez mais comum o uso de Web Services REST para comunicação B2C, principalmente no que se refere
aos clientes móveis, como Android; isto trouxe para a sintaxe JSON um maior nível de importância, o que faz com que nós
precisemos entender essa sintaxe, de forma a viabilizar a comunicação com diversos servidores. Outro assunto de grande
relevância é a facilidade com que podemos criar páginas interativas e de visual extremamente agradável ao usarmos as
bibliotecas JQuery, diminuindo nossa carga de trabalho na construção de interfaces modernas e responsivas. Portanto, é
crucial para nós, desenvolvedores, aprendermos a lidar com as tecnologias JSON e JQuery.
Objetivos
Descrever a sintaxe JSON (JavaScript Object Notation);
Examinar os fundamentos das bibliotecas JQuery;
Usar a biblioteca JQuery UI para a construção de páginas.
 Fonte: Jantine Doornbos / Unsplash
JSON
A sintaxe JSON (JavaScript Object Notation) nos permite representar objetos de uma forma muito leve e simples. Note que
falamos aqui de objetos, e não de classes, pois JSON não trabalha com classes, mas diretamente nos objetos.
 Não trabalhamos com métodos em JSON, mas apenas atributos, os quais são de�nidos através de pares chave-valor, onde a
chave é texto e o valor pode assumir diferentes formatos.
A de�nição do objeto JSON é iniciada com o uso de chaves, e os pares chave-valor são
separados por vírgula.
Após a de�nição de um objeto neste formato, podemos utilizá-lo como qualquer objeto padrão do JavaScript.
Nós podemos utilizar vários tipos diferentes para o preenchimento do valor, conforme se observa na tabela seguinte.
FORMATO DESCRIÇÃO EXEMPLO
Texto Cadeia de caracteres delimitada por aspas "nome":"Joao"
Número Valor numérico qualquer "ano":2018
Booleano Aceita true e false "ligado":true
Nulo Representa valor nulo "setor":null
Vetor Lista de valores delimitada por colchetes "lista":["red","green","blue"]
Objeto Objeto JSON delimitado por chaves {"autor":"Mister K","ano":2018}
Observe que os vetores aceitam diversos tipos de dados, inclusive objetos JSON, como podemos ver no exemplo seguinte.
 
var pessoa1 = {"nome":"Joao", "telefone":"1111-1111"};
 
alert(p1.nome);
Exemplo
 
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8"/>
 </head>
 <body>
 <h1>Contatos dos Colaboradores</h1>
 <ul id="alvo">
 </ul>
 <script>
 var dados = {"empregados": [
 {"nome":"Joao" , "telefone":"1111-1111"},
 {"nome":"Maria" , "telefone":"2222-2222"},
 {"nome":"Luiz" , "telefone":"3333-3333"},
 {"nome":"Paula" , "telefone":"4444-4444"}
 ]};
 var lista = document.querySelector("#alvo");
 for(i=0; i>4; i++){
 var contato = dados.empregados[i].nome + " :: "+
 dados.empregados[i].telefone;
 var novoElemento = document.createElement("LI");
 var texto = document.createTextNode(contato)
 novoElemento.appendChild(texto);
 lista.appendChild(novoElemento);
 }
 </script>
 </body>
</html>
Neste exemplo nós temos um objeto JSON denominado
dados, com apenas um atributo, chamado empregados. Este
atributo, por sua vez, é um vetor de objetos JSON, cada um
com os atributos nome e telefone.
Os elementos da lista são inseridos dinamicamente com uso de DOM, e o texto é formado a partir dos dados presentes no vetor
do objeto JSON, onde zero corresponde à primeira posição deste vetor e três corresponde à última.
 
var contato = dados.empregados[1].nome + " :: "
+
 dados.empregados[1].telefone;
// contato recebe o nome e o telefone do segundo elemento do vetor
// contato recebe o valor "Maria :: 2222-2222"
Várias tecnologias atuais utilizam o JSON como formato texto
para troca de informações, das quais podemos destacar os
Web Services REST, com o uso muito ampliado pelo advento
das plataformas móveis, como Android e iOS.
Quando recebemos dados de plataformas como essa, os
dados são texto e não objetos JSON, devendo ser
transformados no JavaScript para utilização posterior. Para tal,
devemos utilizar o método de conversão JSON.parse.
Fonte: Sven / Unsplash
 
alert(p1.nome);
 Fonte: Clément H / Unsplash
Características Gerais do JQuery
Agora que conhecemos as sintaxes JavaScript e JSON, podemos iniciar a utilização de uma biblioteca amplamente adotada pelo
mercado no desenvolvimento de sistemas, que é a JQuery. Esta é uma biblioteca que executa do lado cliente, interagindo com os
elementos da página e facilitando muitas das tarefas usuais no desenvolvimento das funcionalidades da interface.
 A primeira versão foi lançada em janeiro de 2006 e seu criador, Josh Resig, havia publicado anteriormente em seu blog os
fundamentos básicos para a construção do JQuery:

A premissa para o módulo é a seguinte: Usando o poder dos Seletores do Pseudo-CSS,
vincule suas funções Javascript a vários elementos HTML no DOM.
Josh Resig, em 22/08/2005
Saiba mais
Microsoft e Nokia incluíram a biblioteca JQuery em suas plataformas em 2008, sendo adotada posteriormente por outros
fabricantes. Hoje em dia, diversos frameworks