Categorias
Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript

Introdução ao JavaScript

Capítulo 10

Este conteúdo faz parte do livro “Introdução à programação Web para a Bioinformática: HTML, CSS, PHP & JavaScript“. Você pode adquirir a versão impressa desse livro aqui ou a versão para Kindle aqui. Para nos citar, consulte este link.

JavaScript é uma linguagem de programação executada em client-side. Foi criada com o objetivo de permitir que scripts pudessem ser executados diretamente no computador do usuário sem a necessidade de enviar novas requisições ao servidor. JavaScript é uma linguagem de programação interpretada, baseada em scripts, com tipagem fraca e dinâmica e suporte a orientação a objetos.

JavaScript é considerada a principal linguagem de desenvolvimento client-side. Além disso, seu uso em ambiente server-side tem se intensificado nos últimos anos por meio de plataformas, como Node.js. Segundo uma pesquisa realizada pelo site StackOverflow, dos anos de 2014 a 2016, JavaScript foi  considerada a linguagem de programação mais utilizada por desenvolvedores.

Página oficial: https://www.javascript.com
Criador: Brendan Eich
Surgiu em: 1995
JavaScript

Preferência de desenvolvedores por linguagens de programação (baseado em 49.397 respostas). Fonte: StackOverflow (https://insights.stackoverflow.com/survey/2016).

História

JavaScript foi criado por Brendan Eich, em 1995, quando ele trabalhava na Netscape. Inicialmente a linguagem foi chamada de LiveScript. Mais tarde foi renomeada para JavaScript. Não a confunda com a linguagem Java. JavaScript é uma linguagem de scripts client-side, enquanto Java é uma linguagem de programação que requer uma máquina virtual.

Declarando um script com JavaScript

Introdução ao JavaScript

Um script JavaScript pode ser declarado numa página HTML através da tag <script>. Scripts podem ser inseridos diretamente no código HTML:

<script type="text/javascript">
/* script */
</script>

c10_s1.html | https://goo.gl/BlvSAv

Ou podem ser declarados em arquivos externos. Neste caso, o atributo src deve ser utilizado para indicar a localização do script:

<script type="text/javascript" src="meu_script.js"></script>

c10_s2.html | https://goo.gl/pWksqq

Olá mundo, JavaScript!

Agora vamos apresentar um simples uso do JavaScript. Dentro de uma página HTML devidamente estruturada, insira uma tag <script> com o comando alert(‘Olá mundo, JavaScript!’). Sua página deverá ter a seguinte estrutura:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Hello world, JavaScript!</title>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript">
    alert('Olá mundo, JavaScript!');
    </script>
</body>
</html>

c10_s3.html | https://goo.gl/1XVcls

Agora execute-a em seu navegador.

O comando alert exibe uma caixa de diálogo com uma mensagem. Entretanto, essa caixa de diálogo inibe quaisquer outras ações que possam ser feitas na página até que o usuário clique em OK. Ao clicar, a caixa de diálogo desaparece.

Em JavaScript, declarações de linhas devem ser terminadas em ponto e vírgula. Entretanto, o código pode funcionar se for capaz de reconhecer algum outro caractere de fim de linha, como uma quebra de linha. Apesar dessas peculiaridades, convém encerrar declarações usando ponto e vírgula e manter boas práticas de programação.

Pegando data e hora com Javascript

Um outro exemplo simples é usar JavaScript para coletar informações sobre o sistema, como data e hora. No exemplo a seguir, utilizaremos um evento para interagir com um botão e gravar informações de dada e hora na página. Observe a seguir:

<!DOCTYPE html>
<html>
<head>
    <title>Pegando data e hora com javascript</title>
</head>
<body>
    <h2>Pegando a data e hora com JavaScript</h2>
    <button type="button"
    onclick="document.getElementById('aqui').innerHTML = Date()">
    Clique aqui para ver que horas são :D</button>
    <p id="aqui"></p>
</body>
</html>

c10_s4.html | https://goo.gl/sdYGF2

Não é feitiçaria! Você usou JavaScript para pegar a hora atual do sistema. Ao clicar novamente no botão, o valor será atualizado. Nos próximos capítulos aprenderemos mais sobre JavaScript e como funcionam os eventos apresentados.

Quer aprender mais? Conheça nossos cursos profissionalizantes à partir de R$19,99:

Livro Introdução à Programação para Web para Bioinformática: HTML, CSS, PHP & JavaScript

Capítulo 1
Introdução ao HTML

Capítulo 2
Fundamentos do HTML

Capítulo 3
Estrutura de páginas

Capítulo 4
Folhas de Estilo em Cascata (CSS)

Capítulo 5
Bootstrap

Capítulo 6
Iniciando a construção de um Website

Capítulo 7
Introdução ao PHP

Capítulo 8
Fundamentos do PHP

Capítulo 9
Transformando um Website em dinâmico

Capítulo 10
Introdução ao JavaScript

Capítulo 11
Fundamentos do JavaScript

Capítulo 12
jQuery

Capítulo 13
Bootstrap JavaScript

Capítulo 14
D3.js

Capítulo 15
3Dmol

Capítulo 16
Projeto Final

Epílogo
Referências Bibliográficas

Cite:

MARIANO, DIEGO; de MELO-MINARDI, R. C. . Introdução à Programação Web para Bioinformática: HTML, CSS, PHP & JavaScript. 1. ed. North Charleston, SC (EUA): CreateSpace Independent Publishing Platform, 2017. v. 3. ISBN: 978-1520895154; 403p .

Por Diego Mariano

Doutor em Bioinformática pela Universidade Federal de Minas Gerais com atuação na área de ciência de dados e aprendizado de máquina aplicados ao aperfeiçoamento de enzimas usadas na produção de biocombustíveis. Mestre em Bioinformática, também pela UFMG, atuando na área de desenvolvimento de sistemas Web para montagem de genomas. Atualmente realiza estágio pós-doutoral no Departamento de Ciência da Computação da UFMG com foco em desenvolvimento de sistemas Web para Bioinformática, análise exploratória e visualização de dados. Tem conhecimentos nas linguagens: PHP, JavaScript, Python, R, Perl, HTML, CSS e SQL.