PORTFOLIO JAVASCRIPT

Prévia do material em texto

Volta Redonda 
2023 
 
 
 
 
FRÂNEY FERNANDES DA SILVA LACERDA 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUPERIOR TECNOLOGIA EM SISTEMAS PARA INTERNET 
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA 
 
 
Volta Redonda 
2023 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA 
Produção textual individual, apresentado à UNOPAR – 
Universidade Norte do Paraná, como requisito parcial à 
aprovação no segundo semestre do curso de Superior 
Tecnologia em Sistemas Para Internet. 
 
 
 
FRÂNEY FERNANDES DA SILVA LACERDA 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
SUMÁRIO 
 
 
 
1 INTRODUÇÃO ..................................................................................................... 3 
2 LINGUAGEM DE PROGRAMAÇÃO JAVASCRIPT ............................................. 4 
2.1 UMA BREVE HISTÓRIA ...................................................................................... 4 
2.2 O QUE FAZ UM DESENVOLVERDOR JAVASCRIPT? ....................................... 4 
3 EDITOR DE CÓDIGOS ON LINE PLAYCODE.IO ............................................... 6 
4 DESENVOLVIMENTO ......................................................................................... 7 
4.1 COMEÇANDO ..................................................................................................... 7 
4.2 O PROGRAMA .................................................................................................... 7 
4.3 ENTENDENDO O PROGRAMA .......................................................................... 9 
5 CONSIDERAÇÕES FINAIS ............................................................................... 10 
6 REFERÊNCIAS .................................................................................................. 11 
 
 3 
1 INTRODUÇÃO 
 
O trabalho em questão, tem como objetivo apresentar a produção textual do 
segundo semestre do curso Superior Tecnologia em Sistemas Para Internet, 
realizando a criação de um código simples em HTML e JavaScript, contendo um 
formulário, que realizará a validação do preenchimento correto ou orientando a 
inserção correta no campo de e-mail. 
No primeiro tópico veremos um pouco da história e sua presença no mercado 
da linguagem de programação JavaScript, já no segundo tópico, será apresentado a 
ferramenta de edição de códigos Place.io, sua característica básica. E por fim será 
elaborado um pequeno formulário em HTML e código de programação em JavaScript, 
afim de realizar a validação do campo e-mail com o preenchimento correto, caso 
negativo o código supracitado deverá mostrar uma mensagem orientando a 
composição correta do e-mail. 
 
 
 4 
2 LINGUAGEM DE PROGRAMAÇÃO JAVASCRIPT 
 
 
2.1 UMA BREVE HISTÓRIA 
 
A linguagem JavaScript foi proposta por Brendan Eich em meados dos anos 
1990, visando a torná-la uma linguagem de scripts para ser executada no 
navegador Netscape. A priori, a linguagem foi chamada de LiveScript, mas depois foi 
renomeada para JavaScript, uma vez que a empresa Netscape trabalhava em 
colaboração com a Sun Microsystems (empresa que mantinha a linguagem Java). A 
escolha do nome foi apenas uma jogada de marketing para se aproveitar um pouco 
da popularidade do Java. 
É atualmente a principal linguagem para programação client-side em 
navegadores web. É também bastante utilizada do lado do servidor através de 
ambientes como o node.js. 
O JavaScript suporta estilos de programação orientados a eventos, funcionais 
e imperativos (incluindo orientado a objetos e prototype-based), apresentando 
recursos como fechamentos (closures) e funções de alta ordem comumente 
indisponíveis em linguagens populares como Java e C++. Possui APIs para trabalhar 
com texto, matrizes, datas, expressões regulares e o DOM, mas a linguagem em si 
não inclui nenhuma E/S, como instalações de rede, armazenamento ou gráficos, 
contando com isso no ambiente host em que está embutido. 
 
2.2 O QUE FAZ UM DESENVOLVERDOR JAVASCRIPT? 
 
A Então, o que faz um desenvolvedor JavaScript? De modo geral, este 
profissional é responsável pelo desenvolvimento, teste e implementação de 
aplicações Web e móveis. 
 5 
Suas responsabilidades podem incluir o desenvolvimento de páginas da Web 
interativas, a otimização da experiência do usuário e a implementação de elementos 
de design responsivo. 
Embora este profissional normalmente se dedique ao front-end, a linguagem 
de programação não se limita apenas a este uso. Graças ao Node.js, seu uso também 
tem se popularizado no desenvolvimento back-end. 
Mas como é a rotina de um desenvolvedor JavaScript? Quais são suas 
responsabilidades? 
• Desenvolvimento de aplicações 
• Otimização de aplicações para maior escalabilidade e velocidade 
• Criação de código com base nos requisitos do projeto 
• Supervisão da viabilidade técnica de designs de UI/UX 
• Teste, debug e lançamento de aplicações 
• Manutenção de software e sistemas existentes 
• Análise do feedback do usuário para a implementação de melhorias 
• Criação de bibliotecas de código para uso futuro 
 6 
3 EDITOR DE CÓDIGOS ON LINE PLAYCODE.IO 
 
Playcode.io é um editor JavaScript. Você pode acessara aplicação e começar a 
codificar e criar seu aplicativo. Ele tem modelos prontos para bibliotecas frontend, 
frameworks e linguagens web. 
O site é uma plataforma incrível para praticar e aperfeiçoar suas habilidades em 
JavaScript. Depois de escolher um modelo, você pode começar a codificar 
imediatamente. Você pode acompanhar como seu código é executado no console e 
exibir seu aplicativo na janela de exibição da Web. nele, você pode salvar seu 
trabalho e retornar a acessá-lo mais tarde. 
 7 
4 DESENVOLVIMENTO 
4.1 COMEÇANDO 
No navegador de preferência primeiramente acessamos a plataforma de códigos 
Playcod.io, logo será necessário criar um registro afim de salvar os projetos na 
plataforma. 
Dentro da ferramenta, ele perguntará as principais linguagens a serão utilizadas no 
projeto e ao clicar no sinal de mais no lado direito do menu para aparecerá a opção 
de criar um arquivo. 
 
Tela principal da plataforma: https://playcode.io/ 
4.2 O PROGRAMA 
Abaixo veremos uma imagem do código em HTML, CSS e JavaScript completo e em 
seguida cada parte do processo. 
 
 8 
 
 Aba Index.html, fonte: Próprio Autor 
 
 
 Aba style.css, fonte: Próprio Autor 
 
 
 Aba Script.js, fonte: Próprio Autor 
 9 
4.3 ENTENDENDO O PROGRAMA 
Na Aba index.html, foi utilizado A Linguagem de Marcação de Hipertexto (HTML), 
onde foi criado um formulário com o id chamado “formulário”. 
Na linha 11 até a linha 13, foi inserido um input de e-mail com o nome e o id chamado 
de “email”. Na linha 14 se encerra o formulário e logo na linha 15 utiliza-se o atributo 
src (Source) para incorporar o arquivo onde se localiza os códigos JavaScript. 
Na aba style.css onde contém os códigos em CSS (Folha de Estilo em Cascata), foi 
configurado a aparência do front-end (visuais da interface), contendo o background 
(cor de fundo) em white, color (cor da font) em black, justify-content (alinhamento) em 
Center. 
Na aba script.js onde está registrado os códigos em JavaScript, foi utilizado na linha 
1 a função getElementById() onde se localiza o formulário pelo seu id, e utilizamos a 
função addEventListener() para obter o a espera do registro “submit”, por fim 
utilizamos a função event.preventDefault() a fim de impedir o envio do formulário sem 
os parâmetros de validação. 
Na linha 12 ainda no arquivo stscript.js, foi criado uma constante contendo expressões 
regulares para que o JavaScript valide o email informado pelo usuário, na linha 13 
será realizado uma validação, sendo aprovado na linha 14 foi criado um alerta (alert) 
em popup informando “E-mail aprovado”, caso seja reprovado a validação na linha 16 
foi criado um alerta com o seguinte texto: “E-mail inválido. O endereço de e-mail é 
composto por duas partes. Asduas partes são separadas pelo símbolo @. a 1ª parte, 
é o nome do utilizador, e a 2ª parte, é o domínio onde se encontra esse endereço de 
e-mail.”, instruindo o registro correto dele. 
 
 
 
 
 10 
5 CONSIDERAÇÕES FINAIS 
 
Com o uso do JavaScript pode criar validações poderosas com praticidade e com 
ótimo desempenho, existindo inúmeras maneiras de elaborar códigos simples ou 
complexos e aumentar a segurança não somente do formulário, mas em todo o 
projeto. 
JavaScript, juntamente com HTML e CSS, é a melhor linguagem de programação 
para aprender desenvolvimento web front-end. 97,8% de todos os sites no mundo 
utilizam JavaScript para seu desenvolvimento client-side (a interface que é visível 
para os visitantes). 
Isso faz com que essa seja a linguagem de programação mais popular para esses 
casos. 
De modo geral, o JavaScript é uma daquelas linguagens de programação 
relativamente fáceis de aprender, tornando a escolha perfeita para quem está 
planejando se tornar um desenvolvedor web. Desenvolvedores JavaScript também 
podem se inserir no mercado de trabalho como designers UI/UX, desenvolvedores 
full-stack e engenheiros de software. 
 
 
 
 
 
 
 
 
 11 
6 REFERÊNCIAS 
 
 
A ENCICLOPÉDIA LIVRE, Wikipédia. JavaScript, Disponível em: 
https://pt.wikipedia.org/wiki/JavaScript. 
Acesso em: 16 ago. 2023 
 
DEVELOPER, Mozilla. Event.preventDefault(). Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Web/API/Event/preventDefault. 
Acesso em: 03 ago. 2023 
 
DEVELOPER, Mozilla. Element.addEventListener(). Disponível em: 
https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener. 
Acesso em: 03 ago. 2023. 
 
Hostinger. As 10 Linguagens de Programação Mais Usadas em 2023: Aprimore 
suas Habilidades em Desenvolvimento Web. Disponível em: 
https://www.hostinger.com.br/tutoriais/linguagens-de-programacao-mais-usadas 
Acesso em: 04 ago. 2023. 
 
Medium.com. Código Limpo, versão JavaScript!. Disponível em: 
https://medium.com/trainingcenter/c%C3%B3digo-limpo-vers%C3%A3o-javascript-
80adecafdbec. 
Acesso em: 25 ago. 2017.