INTERFACES

DIGITAIS:
FRONT-END
Caique Pereira

E-book 3
Neste E-Book:
INTRODUÇÃO���������������������������������������������� 3
A LINGUAGEM WEB���������������������������������� 4
JavaScript�����������������������������������������������������������������4
Variáveis���������������������������������������������������������������� 13
Array����������������������������������������������������������������������� 19
jQuery��������������������������������������������������������������������� 21

CONSIDERAÇÕES FINAIS����������������������28
SÍNTESE�������������������������������������������������������29

2
INTRODUÇÃO
Neste e-book, continuando nossos estudos sobre
interfaces digitais: front-end, vamos falar sobre lin-
guagens utilizadas para desenvolvimento web. Você
conhece alguma? Nosso foco será na linguagem
JavaScript, assim como seu framework jQuery.

Vamos entender conceitos essenciais para a progra-

mação, como variáveis e arrays. Agora, arregacemos
as mangas e vamos lá! Aos estudos!

3
A LINGUAGEM WEB
Para o desenvolvimento de páginas web há várias
linguagens disponíveis. Conforme estudamos an-
teriormente, o HTML e o CSS são essenciais para
o desenvolvimento de interfaces; porém, somente
os dois não são suficientes para que possamos tor-
nar nossas páginas mais dinâmicas, trazendo mais
efeitos. Através do JavaScript podemos “dar mais
vida” para nossas páginas web. Ele nos auxilia muito
nesse processo, assim como seu framework, jQuery.

JavaScript
A linguagem de programação JavaScript destina-se
à utilização em arquivos HTML. Sua finalidade é a
manipulação, animação ou interação de uma página
web. ​Muitos dos elementos que, de fato, “dão vida”
a uma página web são criados com o JavaScript e
sua função não é apenas visual. Essa linguagem
nos permite realizar acesso e manipulação de dados
externos, compondo e enriquecendo as nossas pá-
ginas HTML.​Com o JavaScript também é possível
criar funções para agilizar ou dinamizar a experiên-
cia de usabilidade dos usuários em páginas web.
Resumindo, o JavaScript é um dos mais importantes
assuntos, quando falamos de desenvolvimento web.

O JavaScript foi inventado em 1995, por Brendan

Eich – que é cofundador do projeto Mozilla –, quando

4
ele ainda trabalhava na Netscape.​O nome original da
linguagem era Mocha, alterado depois para LiveScript
e, por último, para JavaScript, como conhecemos.​A
primeira versão da linguagem foi utilizada ainda no
Netscape 2.0, em uma época que ficou conhecida
como a “guerra dos browsers”.​

A alteração do nome se deu à época do lançamen-

to e a adição da tecnologia Java no navegador
Netscape. Java é uma linguagem de programação
robusta e orientada a objetos, desenvolvida pela
Sun Microsystems, que foi adquirida pela Oracle, em
2009. Essa estratégia de marketing causa, até hoje,
certa confusão aos leigos, pois alguns acreditam que
o JavaScript é “parente” ou “descendente” do Java.

FIQUE ATENTO
Apesar da semelhança nos nomes das lingua-
gens, o JavaScript não é e não está relacionado à
linguagem JAVA, que é uma linguagem orientada
a objetos e server-side.

Por suas características de manipulação da inter-

face HTML, o JavaScript ganhou reconhecimento
com uma linguagem de script client-side, ou seja,
que opera no cliente – nesse caso, no navegador.
Diante dessa popularidade, uma forte concorrência
surgiu com a Microsoft, que não dominava, na épo-
ca, a liderança entre os navegadores, lançando uma
versão do JavaScript chamada JScript. Este foi adi-
cionado ao Internet Explorer 3.0, com a finalidade de

5
prover as funcionalidades do JavaScript, bem como
melhorar alguns aspectos, a fim de se diferenciar da
concorrência.

Com o propósito de se proteger e garantir a padroni-

zação do desenvolvimento da linguagem, a Netscape
submeteu o JavaScript à ECMA (European Computer
Manufacturers Association), a fim de se tornar um
padrão na área. Após a aceitação, a versão padroni-
zada do JavaScript passou a se chamar ECMAScript
ou ECMA-262, aceita inicialmente em 1997. Essa
ação de padronização trabalhou em aspectos como
sintaxe, características da linguagem, performance
e portabilidades.

O ECMAScript é o padrão e a base aos navegadores

para implementação do JavaScript.​Em um primeiro
momento, o JavaScript estava associado a pequenas
animações e validações em formulários na web.​No
entanto, tecnologias como o AJAX e JSON impul-
sionaram o uso e o desenvolvimento da linguagem.
Soma-se a isso a criação de novas bibliotecas e fra-
meworks, como o jQuery. Atualmente, há diversos
frameworks – com os mais diversos propósitos –,
tais como o [Link], [Link], [Link], React,
[Link], Meteor. A linguagem cresceu e evoluiu, e
está muito além de ser apenas um script. Podemos
afirmar que é uma linguagem completa e atual.

6
 SAIBA MAIS
Pesquise e se informe mais sobre os frameworks
em JavaScript:

Meteor. Disponível em: [Link]

NodeJS. Disponível em: [Link]

React. Disponível em: [Link]

AngularJS. Disponível em: [Link]

VueJS. Disponível em: [Link]

​Backbone. Disponível em: [Link]

​jQuery. Disponível em: [Link]

Uma grande vantagem em se utilizar o JavaScript é

que ele está disponível em quase todos os computa-
dores, pelo fato de sua execução se dar em navega-
dores, e não necessitar de servidores (ao menos para
as funções básicas); portanto, a sua disponibilidade
é enorme.

Nesse sentido, as ferramentas de edição e programa-

ção acompanham essa tendência e já dão suporte
à edição do JavaScript. Até mesmo os navegadores
aderiram debuggers a JavaScript.

REFLITA
O JavaScript executa no cliente, ou seja, no nave-
gador. É considerada uma linguagem client-side,
portanto, seu código pode ser visto pelo usuá-

7
 rio e é interpretado diretamente pelo navegador.
Você conhece outras linguagens que funcionam
dessa maneira?

O JavaScript é delimitado pelas tags “<script>” e

“</script>” acompanhadas do parâmetro “type”.
Geralmente, essa seção fica dentro do cabeçalho
dos arquivos (head), mas podem ser colocados em
outros locais da página.

Na Figura 1 podemos observar como utilizar o

JavaScript delimitado pelas tags “<script>” e “</
script>”:

Figura 1: Declarando o JavaScript Fonte: Elaboração própria.

Na Figura 1 foi informado, por meio do parâmetro

“type”, que estamos trabalhando com JavaScript.
Entre as tags “<script>” e “</script>” utilizamos a
função “alert”, que exibe uma mensagem de alerta
ao usuário, exibindo a mensagem que está entre pa-
rênteses e aspas duplas, em nosso caso, “Olá mun-
do!”. Observe como ficou nosso código completo
na Figura 2.

8
Figura 2: Primeiro exemplo com JavaScript. Fonte: Elaboração própria.

Em nossa saída, podemos verificar a caixa de alerta

sendo exibida com a mensagem “Olá mundo!”, na
Figura 3.

Figura 3: Saída do primeiro exemplo com JavaScript. Fonte:

Elaboração própria.

Há algumas maneiras diferentes de delimitarmos os

códigos em JavaScript, em nossas páginas HTML. Os
conceitos são bem parecidos com as formas de cha-
mada do CSS, estudadas anteriormente. Lembrando
que todos os códigos devem ser delimitados pelas
tags “<script>” e “</script>”, podemos fazer sua in-
clusão dentro do “<head>” ou dentro do “<body>” de
nosso documento HTML. Além disso, podemos criar

9
um arquivo externo com a extensão “.js”, que pode
estar em uma pasta ou até mesmo em um caminho
na nuvem. Em ambos os casos devemos seguir a
seguinte sintaxe:

<script src=”[Link]”></script>

No atributo “src” informamos o caminho local ou o

endereço web de nosso script em JavaScript.

Há vários fatores para que possamos decidir a ma-

neira de delimitar nossos códigos em JavaScript;
dentre eles, a quantidade de códigos utilizados, a
reutilização do código, a origem dos códigos, o pa-
drão e a organização do projeto. Nesses casos, um
arquivo externo deixa a página mais organizada e
com um código mais limpo. Porém, tudo depende
do estilo de programação da empresa e também do
programador.

Agora, vamos analisar exemplos das diversas cha-

madas do JavaScript, em uma página na qual vamos
manipular um elemento. Por meio do JavaScript po-
demos modificar o conteúdo de um elemento HTML
através do seu atributo “id”. Vamos criar uma função
que será acionada por um botão e deverá alterar o
texto de uma frase. Na primeira versão do exemplo,
vamos observar a chamada do JavaScript entre as
tags “<head>” e “</head>” (Figura 4).

10
Figura 4: JavaScript no <head> Fonte: Elaboração própria.

Já na Figura 5 podemos observar a delimitação do

JavaScript entre as tags “<body>” e “</body>”.

Figura 5: JavaScript no <body> Fonte: Elaboração própria.

Na Figura 6 observamos a utilização do JavaScript

através de um arquivo ou pasta externa. Para que
esse método funcione, todo o script deve ser salvo
em um arquivo com extensão “.js”.

11
Figura 6: JavaScript externo Fonte: Elaboração própria.

Na Figura 7 temos um exemplo de chamada por meio

de uma URL externa, ou seja, muito comum nos tem-
pos de armazenamento em nuvem.

Figura 7: JavaScript em uma URL Fonte: Elaboração própria.

Existem várias maneiras para exibir saídas nos nave-

gadores através do JavaScript, dentre as mais utiliza-
das, temos a saída diretamente no HTML, conforme
a sintaxe a seguir:

[Link](“Olá Mundo”);

12
Temos também a saída através de caixas de alerta,
com a seguinte sintaxe:

alert(“Olá Mundo”);

E, por último, por meio da manipulação de elementos,

em que pegamos um elemento via id e trocamos
seu conteúdo. Nesse exemplo de sintaxe, temos
um parágrafo com o id “demo”; esse parágrafo vai
ser manipulado e ter o seu texto alterado para “OLÁ
MUNDO!”.

JavaScript: [Link](“demo”).
innerHTML = “OLÁ MUNDO! “;

HTML: <p id=”demo”> </p>

Variáveis
Variáveis são pequenos espaços na memória, re-
servados para armazenar temporariamente dados
importantes na execução de aplicações. Explicando
de outra maneira: se pegarmos um líquido – por
exemplo, vinho –, precisamos de um copo para poder
armazená-lo; se o líquido ficar fora do copo, ele será
perdido. O mesmo conceito é aplicado às variáveis:
caso nosso dado não seja armazenado em uma va-
riável, ele será perdido.

Em linguagens de programação, as variáveis podem

ser fortemente tipadas ou não. Ou seja, há linguagens
que exigem que cada espaço reservado tenha um

13
tipo. Portanto, se você for armazenar números, a va-
riável deve ser declarada com o tipo correspondente;
se for armazenar caracteres alfanuméricos (texto),
a variável deve ser declarada com o tipo correspon-
dente. Na linguagem JavaScript, as variáveis não são
fortemente tipadas, ou seja, criamos uma variável
genérica, que pode se adaptar ao tipo de dado que
queremos armazenar.

Para exemplificar, vamos ao exemplo de uma variável

em JavaScript para armazenar um texto com o nome
da disciplina:

var disciplina = “Interfaces Front-end”;

Em que “var” faz parte da sintaxe que denomi-

na a criação de uma variável. O termo “disciplina”
é o nome que escolhemos para nossa variável. E
a frase “Interfaces Front-end”, o nosso conteúdo
armazenado.

Para os nomes de variáveis, temos algumas regras:

eles não podem iniciar com números ou caracteres
especiais, nem conter espaços no meio de seu nome.
Agora que já sabemos os conceitos que identificam
uma variável, vamos analisar um exemplo. A Figura
8 mostra sua utilização.

14
Figura 8: Variáveis em JavaScript. Fonte: Elaboração própria.

No código da Figura 8 podemos observar a utiliza-

ção das variáveis em JavaScript para armazenar os
diversos tipos de dados, como: números inteiros,
números reais, texto e booleano.

Podemos observar, na Figura 9, a utilização de variá-

veis com operadores aritméticos utilizados para que
possamos efetuar operações matemáticas dentro de
nossos scripts. Além disso, nesse exemplo, podemos
verificar informações concatenadas, ou seja, unimos
dados com saídas de variáveis através do sinal “+”.

15
Figura 9: Variáveis e operadores em JavaScript. Fonte: Elaboração
própria.

Podemos verificar o resultado do código interpretado

na figura abaixo:

Figura 10: Saída de variáveis e operadores em JavaScript. Fonte:

Elaboração própria.

16
Agora vamos desenvolver um exemplo em que o usu-
ário nos passa dois valores através de um formulário
HTML ( <form> ) e esses valores serão armazenados
em variáveis do JavaScript por meio da função “do-
[Link]”. Além disso, faremos uma
operação de soma desses elementos e escreveremos
o resultado através do comando “[Link]”.
Para que tudo isso funcione da maneira correta, pre-
cisamos utilizar a função “parseInt” para converter
os números vindos do formulário para números in-
teiros; senão, eles serão reconhecidos como texto
e, dessa forma, não será possível aplicar a operação
de soma. Todas essas instruções estão dentro de
uma função chamada “soma”. Podemos observar o
código na Figura 11.

Figura 11: Recebendo valores em JavaScript. Fonte: Elaboração pró-

pria.

Podemos observar, na Figura 12, a saída do código

interpretado via navegador: assim que clicarmos

17
no botão “S”, a soma dos valores nos campos será
executada.

Figura 12: Recebendo valores em JavaScript. Fonte: Elaboração pró-

pria.

Após a execução da função “soma”, temos a exibição

do resultado junto com um novo botão, que traz o
evento “[Link]()”, que faz com que a página
seja recarregada, voltando assim à tela inicial. Na
Figura 13 podemos observar essa execução.

Figura 13: Recebendo valores em JavaScript saída. Fonte: Elaboração

própria.

18
Array
Um array é uma variável que “armazena” diversas
variáveis; estas são separadas por posições dentro
do array, ou vetor, como também é conhecido.

Arrays são basicamente listas de elementos dentro

de um código. Quando utilizamos arrays, ao invés de
precisarmos de 50 variáveis para guardar 50 nomes
de alunos, podemos ter um array com 50 posições.

Exemplo:

Variável

Aluno1 = João; Aluno2 = Maria; ... Aluno50 = José;​

Array:

Alunos[50] = {João , Maria ... José}

Na Figura 14 podemos verificar uma representação e

um comparativo de como funciona o armazenamento
em variáveis e em arrays: cada retângulo representa
um espaço de armazenamento.

Figura 14: Variável X Array. Fonte: Elaboração própria.

19
Conforme observamos, as variáveis são individu-
ais, já os arrays são um espaço maior separado por
posições. Imagine um gaveteiro com apenas uma
gaveta, isso representa uma variável. Agora imagine
um guarda-roupas com diversas gavetas, isso repre-
senta um array.

Trabalhar com arrays, além de muito mais produti-

vo, torna mais dinâmico o código. Usamos muito o
array quando trabalhamos com banco de dados, por
exemplo: consultas à base, conexão com o banco,
entre outros.

Na Figura 3.14 podemos observar várias formas de

declaração de sintaxe de array, adicionando por po-
sição através do “array[2] = JavaScript”, adicionar na
sequência através do “[Link](“Java”)”, ou adi-
cionar como lista, como em “arrayB = [“Java”, “Php”,
“JavaScript”, “C”, “Jquery”]”.

Figura 15: Declarando array em JavaScript. Fonte: Elaboração própria.

Na Figura 15 temos um exemplo de código em que

jogamos em um array a lista de dias da semana e, de-

20
pois, os resgatamos no corpo do documento HTML.
Além disso, utilizamos a função “[Link]()” para
resgatar o dia atual e utilizá-lo em nossa chamada
de array.

Figura 16: Exemplo de array em JavaScript. Fonte: Elaboração própria.

jQuery
Um framework Web fornece elementos ou compo-
nentes baseados em tecnologias conjuntas, como
o JavaScript e o jQuery, para trabalhar com os obje-
tos HTML e CSS e, dessa forma, acelerar a criação
de páginas por meio da utilização de componentes
prontos.

Podcast 1

O jQuery é uma biblioteca de funções JavaScript

que trabalha diretamente com o HTML, manipulan-
do componentes na página, a fim de proporcionar
mais dinamismo. Ela é composta por funções que
facilitam o desenvolvimento e a aplicação de recur-
sos, sem a necessidade de muita programação para

21
realizar as tarefas. Seu principal objetivo é otimizar,
de maneira fácil, a interpretação dos scripts utiliza-
dos em uma página.

Dentre suas principais funcionalidades, podemos

destacar:

Abstrai a incompatibilidade de recursos entre nave-

gadores, ou seja, possui mecanismos internos que
aplicam os efeitos ou processamento desejado de
forma transparente, independente do navegador.

Elimina a redundância de código, minimizando a

escrita.

Através de plug-ins, reaproveita o código de maneira

inteligente. Existem centenas desses recursos dis-
poníveis para utilização.

Trabalha com as tecnologias DOM e AJAX

perfeitamente.

Utiliza os recursos do CSS 1, 2 e 3 de forma segura

e compatível.

Há diversas versões da biblioteca jQuery, entretanto é

aconselhável que seja utilizada sempre a versão mais
recente, atualmente, a 3.4.1. O jQuery tem, além da
sua versão completa ([Link]), uma versão menor,
conhecida como jQuery minificada ([Link]);
entretanto, a sua funcionalidade é a mesma, variando
apenas o tamanho do arquivo, pois a versão comple-
ta é inteligível para humanos, enquanto a outra não.

Para utilizar a biblioteca, há duas formas: uma é re-

alizando o download dos arquivos que a compõem

22
e fazendo sua a inclusão no arquivo HTML por meio
da tag script. Dessa forma, todos os arquivos ficam
junto com suas páginas ou site; entretanto, há uma
desvantagem, pois, quando houver alguma atualiza-
ção, não refletirá imediatamente na sua aplicação,
fazendo com que os novos recursos e correções
de erros não estejam presentes para você. Como
podemos observar na Figura 17.

Figura 17: Inclusão da biblioteca jQuery. Fonte: Elaboração própria.

A outra forma é fazendo a inclusão diretamente do

site do Google, que mantém sempre a versão atua-
lizada. Você pode fazer a inclusão no arquivo HTML
da seguinte forma, representada na Figura 18:

Figura 18: Inclusão da biblioteca jQuery. Fonte: Elaboração própria.

Apesar de manter atualizada a biblioteca, há uma

desvantagem em utilizar essa maneira, pois, se o site
do Google ficar fora do ar ou houver algum atraso no
carregamento, seja por lentidão ou outro problema,
os recursos não estarão disponíveis.

Agora vamos ao nosso primeiro exemplo com jQuery.

Você pode perceber no código da 18 que foi utiliza-
do o atributo “document”. A linha 12 tem a seguinte
tradução: Ao carregar o documento HTML, leia-o e
execute o que está dentro da “function()”.

23
Figura 19: Exemplo 1 Jquery. Fonte: Elaboração própria.

Na Figura 20 podemos verificar a execução do

código.

Figura 20: Saída do exemplo 1 jQuery. Fonte: Elaboração própria.

O jQuery traz um recurso sintático bastante fácil de

compreender e é tratado como uma função descrita
pelo símbolo $(). Isso é um atalho para a função
jQuery() e, quando utilizada, informa ao interpreta-
dor do JavaScript que deverá ser acessado algum
recurso da biblioteca jQuery. Todas as funções são
executas de acordo com os parâmetros que forem
informados, ou seja, quando identificamos um objeto
utilizando o identificador “id”, qualquer elemento que
possuir o identificador será utilizado pela função

24
jQuery(). Sempre lembrando que cada elemento deve
possuir um “id” único – conforme a Figura 21.

Figura 21: Exemplo 2 jQquery. Fonte: Elaboração própria.

Na Figura 21 podemos verificar a execução do

código.

Figura 22: Saída do exemplo 2 jQuery. Fonte: Elaboração própria.

O jQuery identifica os elementos ou objetos mani-

puláveis pelo JavaScript em uma página utilizando
sua função “$()”. Os objetos, quando não identifica-
dos com um “id” usando o símbolo “#”, ou por uma
“class”, podem ser identificados por meio do sím-
bolo “.”, serão sempre identificados pelo seu nome.
Exemplo (“p”), como no código Figura 23.

25
Figura 23: Exemplo 3 jQuery. Fonte: Elaboração própria.

Você percebe que foram colocados quatro parágra-

fos vazios, mas o jQuery identificou o elemento “p”
(linha 14) e atribuiu valor a todos eles, conforme po-
demos observar na saída do código, na Figura 24.

Figura 24: Saída do exemplo 3 jQuery. Fonte: Elaboração própria.

No próximo exemplo utilizamos uma expansão dos

objetos, ou seja, é possível identificar mais de um
objeto ao mesmo tempo, que receberá o mesmo
valor. Para isso, basta colocar, entre vírgulas, quais
objetos se deseja selecionar. Exemplo: (“p, h1, h2”).

26
Figura 25: Exemplo 4 jQuery. Fonte: Elaboração própria.

Na Figura 26 podemos verificar a execução do

código.

Figura 26: Saída do exemplo 4 jQuery. Fonte: Elaboração própria.

Podcast 2

27
CONSIDERAÇÕES FINAIS
A linguagem JavaScript é um poderoso e importante
recurso, quando falamos no desenvolvimento de in-
terfaces front-end. O framework jQuery ajuda muito
com o controle de eventos dentro de nossas pági-
nas. Unindo essas duas tecnologias, podemos fazer
páginas cada vez mais dinâmicas.

Você está pronto para praticar com essas

tecnologias?

28
 SÍNTESE
INTERFACES DIGITAIS:
FRONT-END
FERRAMENTAS PARA FRONT- END

• Quando falamos de desenvolvimento de interfaces front-end,

estamos falando de toda parte visual de nossos sistemas� A
linguagens JavaScript nos dá um grande leque de opções para
dinamizar nossas páginas�

• O framework jQuery nos dá uma vasta gama de opções para

que possamos manipular elementos dentro de um documento
HTML, assim como trabalharmos com eventos�
Referências Bibliográficas
& Consultadas
ALVES, W. P. Java para Web: desenvolvimento
de aplicações. São Paulo: Érica, 2015. [Minha
Biblioteca]

DEITEL, P. J.; DEITEL, H. M. Ajax, Rich Internet

Applications e desenvolvimento web para progra-
madores. São Paulo: Pearson Prentice Hall, 2008.
[Minha Biblioteca]

FLANAGAN, D. JavaScript: o guia definitivo. 6. ed.

Porto Alegre: Bookman, 2013. [Minha Biblioteca]

LEE, V.; SHNEIDER, H., SCHELL, R. Aplicações

móveis: arquitetura, projetos e desenvolvimento.
São Paulo: Pearson Education do Brasil, 2006.
[Biblioteca Virtual]

LEMAY, L. Aprenda a criar páginas web com

HTML e XHTML em 21 dias. São Paulo: Pearson
Education do Brasil, 2002. [Biblioteca Virtual]

MILETTO, E.; BERTAGNOLLI, S. Desenvolvimento

de software II: introdução ao desenvolvimen-
to HTML, CSS, JavaScript e PHP. Porto Alegre:
Bookman, 2014. [Minha Biblioteca]
SHARMA, V.; SHARMA, R. Desenvolvendo sites de
e-commerce: como criar um eficaz e lucrativo site
de e-commerce, passo a passo. São Paulo: Makron
Books, 2001. [Biblioteca Virtual]

SEGURADO V. S. Projeto de interface com o usuá-

rio. São Paulo: Pearson, 2015. [Minha Biblioteca]