Baixe o app para aproveitar ainda mais
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
Compartilhar