Conteúdo
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.
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
