Buscar

E3_IDFE

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 3, do total de 32 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 6, do total de 32 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes
Você viu 9, do total de 32 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você também pode ser Premium ajudando estudantes

Prévia do material em texto

Caique Pereira
INTERFACES 
DIGITAIS: 
FRONT-END
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 Vue�js, Backbone�js, Angular�js, React, 
Node�js, 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: https://www.meteor.com�
NodeJS� Disponível em: https://nodejs.org/en�
React� Disponível em: https://pt-br.reactjs.org�
AngularJS� Disponível em: https://angularjs.org�
VueJS� Disponível em: https://vuejs.org�
 Backbone� Disponível em: https://backbonejs.org�
 jQuery� Disponível em: https://jquery.com�
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
https://www.meteor.com
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=”MeuScript�js”></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 organizadae 
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:
document�write(“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: document�getElementById(“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-
cument�getElementById”� Além disso, faremos uma 
operação de soma desses elementos e escreveremos 
o resultado através do comando “document�write”� 
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 “location.reload()”, 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 “array.push(“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 “now�getDay()” 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
https://famonline.instructure.com/files/917495/download?download_frd=1
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 (jquery.js), uma versão menor, 
conhecida como jQuery minificada (jquery.min.js); 
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
https://famonline.instructure.com/files/917496/download?download_frd=1
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
FERRAMENTAS PARA FRONT- END
INTERFACES DIGITAIS: 
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]
	_GoBack
	Introdução
	A linguagem Web
	JavaScript
	Variáveis
	Array
	jQuery
	Considerações finais
	Síntese

Outros materiais