JavaScript é a linguagem de script do lado do cliente mais popular e amplamente usada. Os scripts do lado do cliente são scripts executados em seu navegador da web. O JavaScript foi projetado para adicionar interatividade e dinâmica às páginas da Web, manipulando o conteúdo retornado de um servidor da Web.
O JavaScript foi originalmente desenvolvido como LiveScript pela Netscape em meados da década de 1990. Mais tarde, foi renomeado JavaScript em 1995 e tornou-se um padrão ECMA em 1997. JavaScript é agora a linguagem de script do lado do cliente padrão para aplicativos baseados em JavaScript. É suportado por quase todos os navegadores da Web disponíveis, como Google Chrome, Mozilla Firefox, Apple Safari, etc.
JavaScript é uma linguagem orientada a objetos que também compartilha algumas semelhanças com a linguagem de programação Java em sua sintaxe. No entanto, JavaScript não tem nada a ver com Java.
JavaScript é oficialmente mantido como ECMAScript pela ECMA (European Computer Manufacturers Association). ECMAScript 6 (ou ES6) é a versão principal mais recente do padrão ECMAScript.
O que você pode fazer com javascript
Você pode fazer muito mais com JavaScript.
- Você pode modificar o conteúdo de uma página da Web adicionando ou removendo elementos.
- Você pode alterar o estilo e a posição dos elementos em uma página da web.
- Você pode monitorar eventos como cliques do mouse, focos, etc. e reagir a eles.
- Você pode executar e controlar transições e animações.
- Você pode criar pop-ups de alerta para exibir mensagens informativas ou de aviso aos usuários.
- Você pode executar ações com base na entrada do usuário e exibir os resultados.
- Você pode validar a entrada do usuário antes de enviá-la ao servidor.
Adicione JavaScript às suas páginas da web
Geralmente, existem três maneiras de adicionar JavaScript a uma página da web:
- Incorpore o código JavaScript entre um par de tags <script> e </script>.
- Crie um arquivo JavaScript externo com uma extensão .js e carregue-o na página por meio do atributo src da tag <script>.
- Coloque o código JavaScript diretamente nas tags HTML usando atributos de tag especiais, como onclick, onmouseover, onkeypress, onload, etc.
As seções a seguir descrevem cada um desses processos em detalhes.
🚨DICA: Entre no nosso Canal do WhatsApp e receba contéudo técnico e atualizações das nossas postagens. Se você não pode fazer um investimento agora na sua carreira, comece por esse Curso Gratuito Gratuito de HTML, CSS e JavaScript! 🚀
Incorporar código JavaScript
Você pode informar ao navegador que as instruções contidas devem ser interpretadas como script executável em vez de HTML, incluindo código JavaScript nas tags <script> e </script>. Aqui está um exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Incorporando JavaScript</title>
</head>
<body>
<script>
var greet = "Olá mundo";
document.write(greet); // Impressões: Olá Mundo!
</script>
</body>
</html>Chamando arquivos JavaScript externos
Você também pode colocar o código JavaScript em um arquivo separado com uma extensão .js e chamar esse arquivo no documento por meio do atributo src na tag <script>:
<script src =" js/hello.js "> </script>Isso é útil se você quiser que o mesmo script seja usado para vários documentos. Isso evita que você tenha que repetir as mesmas tarefas repetidamente e torna seu site mais fácil de manter.
Certo, vamos criar um arquivo JavaScript chamado “hello.js” e colocar o seguinte código nele:
// Uma função para exibir uma mensagem
function sayHello() {
alert("Olá mundo!");
}
// Chama a função ao clicar no botão
document.getElementById("myBtn").onclick = sayHello;Agora, você pode chamar esse arquivo JavaScript externo em uma página da Web usando a tag , assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Incluindo arquivo JavaScript externo</title>
</head>
<body>
<button type="button" id="myBtn">Clique aqui</button>
<script src="js/hello.js"></script>
</body>
</html>Nota: Normalmente, quando um arquivo JavaScript externo é baixado pela primeira vez, ele é armazenado no cache do navegador (assim como as imagens e folhas de estilo), então, não precisará ser baixado várias vezes do servidor da web que cria as páginas da web carregar mais rapidamente.
Introdução javascript: Colocando código JavaScript embutido
Você também pode inline código JavaScript inserindo-o diretamente em tags HTML usando atributos de tag especiais, como onclick, onmouseover, onkeypress, onload, etc.
No entanto, você deve evitar o inline de grandes quantidades de código JavaScript, pois isso sobrecarrega seu HTML com JavaScript e dificulta a manutenção do código JavaScript. Aqui está um exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>JavaScript embutido</title>
</head>
<body>
<button onclick="alert('Olá mundo!')">Clique aqui</button>
</body>
</html>O exemplo acima exibirá uma mensagem de aviso quando o elemento do botão for clicado.
Dica: Você deve sempre separar o conteúdo e a estrutura da sua página da web (ou seja, HTML) da apresentação (CSS) e do comportamento (JavaScript).
Posicionamento do Script dentro do Documento HTML
O elemento <script> pode ser colocado na seção <head> ou <body> de um documento HTML. Mas o ideal é que o script seja colocado no final da seção do corpo, logo antes da tag de fechamento </body>, isso fará com que sua página carregue mais rápido, pois evita bloquear a renderização inicial da página.
Cada tag <script> bloqueia o processo de renderização da página até que o código JavaScript seja totalmente baixado e executado, portanto, colocá-los na parte principal do documento (ou seja, <head>, elementos) sem qualquer motivo válido afetará significativamente o desempenho do seu site .
Dica: Você pode ter qualquer número de elementos <script> em um documento. No entanto, eles são processados de cima para baixo na ordem em que aparecem no documento.
Diferença entre script do lado do cliente e script do lado do servidor
As linguagens de script do lado do cliente, como JavaScript, VBScript, etc., são interpretadas e executadas por navegadores da Web, enquanto as linguagens de script do lado do servidor, como PHP, ASP, Java, Python, Ruby, etc. Execute no servidor web e envie a saída de volta para o navegador web em formato HTML.
O script do lado do cliente tem muitas vantagens sobre os métodos tradicionais de script do lado do servidor. Por exemplo, você pode usar JavaScript para verificar se o usuário inseriu dados inválidos em um campo de formulário e exibir uma notificação de erro de entrada em tempo real antes de enviar o formulário ao servidor web para validação final de dados e processamento adicional para evitar o uso desnecessário da rede largura de banda e utilização dos recursos do sistema do servidor.
Além disso, o script do lado do servidor é mais lento para responder do que o script do lado do cliente porque o script do lado do servidor é processado no computador remoto, não no computador local do usuário.
Leia também: CSS: introdução e primeiros passos
