Materiais de apoio
Como integramos as linguagens HTML, CSS, e JavaScript?
Estamos a entrar no mundo tecnológico, mas se já a palavra JavaScript nos assusta, que significa HTML e CCS?, como os uso?. Pois antes de tudo, vamos distinguir as suas características:
No início dos anos noventa, a linguagem HTML era o único idioma disponível na web. Tem mudado muito desde então. Em seguida vamos distinguir os três tipos de linguagens que descrevemos neste trabalho, a profundando o JavaScript:
1. A linguagem HTML (HyperText Markup Language) aporta-nos a estrutura básica dos sites, melhorada e modificada por outras tecnologias como CSS e JavaScript que vemos a seguir. É a linguagem famosa pelas suas etiquetas conhecido por todos os que mergulharam no desenvolvimento de páginas web.
2. Por outro lado, CSS ou Folhas de Estilo em Cascata (Cascading Style Sheets) utiliza-se para controlar a apresentação, o formato, e o design da nossa aplicação. Graças a ela podemos dar forma ao estilo que queremos mostrar.
3. JavaScript utiliza-se para controlar o comportamento dos diferentes elementos, isto é, aporta funcionalidade, dinâmica, aos nossos elementos.
Vantagens de JavaScript
JavaScript primeiro foi conhecido como LiveScript. Mas como Java era uma linguagem muito popular, Netscape decidiu mudar o nome a JavaScript. A sua primeira aparição foi em 1995 dentro de Netscape 2.0. Estas são algumas das principais vantagens de usar JavaScript.
Interação mínima com o servidor
É algo bem conhecido que se quiseres otimizar o rendimento de um website, a melhor maneira é reduzir a comunicação com o servidor. JavaScript ajuda neste sentido a validar a informação que ingressa o utilizador no lado do cliente. Só solicitas o servidor depois de executar as comprovações de validação iniciais. Como resultado, é uso de recursos e a quantidade de solicitações ao servidor reduz-se significativamente.
Interfaces mais completas e fáceis de usar
Ao usar JavaScript, podes criar interfaces interativas do lado do cliente. Por exemplo, adicionar controlos, apresentações de diapositivos, efeitos ao pôr o cursor sobre objetos, funções de arrastar e soltar, etc.
Respostas imediatas para o utilizador
Ao usar JavaScript, podes assegurar-te que os utilizadores obtenham uma resposta imediata. Por exemplo, imaginemos que um utilizador preencheu um formulário e deixou um campo vazio. Sem a validação de JavaScript, terão de esperar que a página volte a carregar só para aperceber-se que deixaram um campo vazio. Por outro lado, com JavaScript, serão alertados no momento.
Expressa-te
Na linguagem JavaScript (e na maioria da linguagem de programação), podemos usar operadores matemáticos para calcular números e criar expressões.
Já viste alguns exemplos de somas em JS, ao usar o operador +. Também podes usar - para subtrações, * para multiplicaciones, / para divisões e % para sacar o resto. Aqui estão exemplos disso em ação:
var x = 10;
var a = x + 5; // soma 5, o resultado é 15
var b = x - 5; // subtrai 5, o resultado é 5
var c = x * 2; // multiplica por 2, o resultado é 20
var d = x / 2; // divide por 2, o resultado é 5
var e = x % 4; // divide por 4 e volta o resto, o resultado é 2
Quando usas vários operadores matemáticos numa só expressão, o computador segue uma "ordem de operações" para assegurar-se que calcule o resultado da mesma maneira sempre. É a mesmo ordem de operações que provavelmente aprendeste nas tuas aulas de matemáticas.
Por exemplo, no seguinte código, primeiro avaliam-se as duas expressões entre parêntesis, logo multiplicaria esses resultados e, por último, sumaria 100 a esse resultado.
var x = 10;
var a = (x + 10) * (x / 2) + 100;
Tal como nas expressões matemáticas, apenas necessitas parêntesis se queres que a tua expressão seja avaliada de maneira diferente, como se faria de acordo a ordem das operações. De outra maneira, podes omiti-los.
Formas de inserir JavaScript em ficheiros HTML
Há duas maneiras de incluir JavaScript em HTML e fazer que funcionem juntos. Agora que falamos sobre JavaScript e vimos quais podem ser algumas das suas vantagem, olhemos algumas das formas com as quais podemos conetar JavaScript com HTML.
Adicionar JavaScript diretamente a um ficheiro HTML
A primeira forma de inserir JavaScript em HTML é direta. Podes fazê-lo utilizando a etiqueta <script> </script> que deve envolver todo o código JS que escrevas. Pode-se agregar o código JS:
entre as etiquetas <head>
entre as etiquetas <body>
Dependendo de onde adiciones o código JavaScript no teu ficheiro HTML, o carregamento será diferente. No geral recomenda-se que o adiciones na etiqueta <head> para permanecer separado do conteúdo do teu ficheiro HTML. Mas colocá-lo dentro do <body> pode ajudar a melhorar a velocidade de carregamento, já que o conteúdo do website carregará mais rápido, e só depois disso processar-se-á o JavaScript. Para este exemplo, demos uma vista de olhos ao seguinte ficheiro HTML que deve mostrar a hora atual:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>JAVASCRIPT IS USUALLY PLACED HERE</script>
<title>Time right now is: </title>
</head>
<body>
<script>JAVASCRIPT CAN ALSO GO HERE</script>
</body>
</html>
Neste momento, o código anterior não contem JavaScript,logo, não pode mostrar a hora. Podemos adicionar o seguinte código para ter a certeza que mostre a hora correta:
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
Envolveremos este código com as etiquetas <script> e </script> e iremos colocar no head do código HTML para garantir que cada vez que carregue-mos a página, seja gerada uma alerta que mostre a hora atual ao utilizador. É assim como veremos o ficheiro HTML depois de adicionar o código:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
<script>
var time = new Date();
console.log(time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
</script>
</head>
<body>
</body>
</html>
Se quiseres mostrar a hora dentro do corpo (body) da página, deverás incluir a script dentro das etiquetas <body> da página HTML. Assim é como verás o código quando o fizeres:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now is: </title>
</head>
<body>
<script>
let d = new Date();
document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()
"</h1>"
</script>
</body>
</html>
Resultado final:
Adicionar código JavaScript num ficheiro separado
Às vezes, inserir JavaScript em HTML diretamente não parece ser a melhor opção. Sobretudo porque alguns scripts de JS devem utilizar-se em varias páginas, por tanto, é melhor manter o código JavaScript em ficheiros separados. É por isso que a forma mais aceitável de incluir JavaScript em HTML é importando ficheiros externos. Pode-se fazer referencia a estes ficheiros dentro dos documentos HTML, igual que fazemos referencia aos documentos CSS. Alguns dos benefícios de adicionar código JS em ficheiros separados são:
Quando os códigos HTML e JavaScript estão separados, cumpre-se o princípio de design de separação e faz que tudo seja muito mais sustentável e reutilizável.
A legibilidade e a manutenção do código é muito mais fácil.
Os ficheiros JavaScript em cache melhoram o rendimento geral do website por diminuir o tempo que demoram as páginas em carregar.
Podemos fazer referencia ao ficheiro JavaScript desde HTML assim:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Time right now:</title>
</head>
<body>
</body>
<script src="js/myscript.js"></script>
</html>
O conteúdo do ficheiro myscript.js será:
let d = new Date();
document.body.innerHTML = "<h1>Time right now is: " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds()</h1>"
Nota: Aquí assume-se que o ficheiro myscript.js encontra-se na mesma pasta que o ficheiro HTML.
Felicidades! Aprendeste a inserir JavaScript em HTML com alguns exemplos básicos.
Palavras finais
Quando o entenderes ainda melhor, as possibilidades de fazer grandes coisas com ambos são infinitas. JavaScript pode-se usar em combinação com HTML para dar forma a aplicações web modernas que sejam intuitivas, interativas e fáceis de usar. Ao usar a validação simples do lado do cliente, reduz-se o tráfico do servidor e melhora a eficiência geral do website.