Nenhum produto encontrado nessa seleção.
O Javascript é extremamente popular em qualquer parte do desenvolvimento web hoje em dia, e uma das características que o fazem ser tão utilizado é a facilidade com que conseguimos implementar seus códigos em nossas páginas.
Para se ter uma ideia dessa facilidade, vamos começar diretamente introduzindo códigos Javascript em uma página HTML e você poderá ver em tempo real tudo que essa linguagem é capaz de fazer sem ter que instalar nada além de um navegador de Internet em seu computador.
Se você não tem experiência com HTML e CSS, é altamente recomendável que inicie o aprendizado de ambos antes de continuar a ler os artigos dessa série.
Para adquirir tal conhecimento, você pode seguir nosso curso de HTML grátis, onde detalhamos tanto CSS quanto HTML. Tal curso pode ser acessado nos links logo abaixo.
- Aula 1: Introdução ao HTML
- Aula 2: Tags HTML
- Aula 3: Introdução ao CSS
- Aula 4: Propriedades CSS
- Aula 5: Criando seu próprio site
A tag script
Existem algumas maneiras diferentes para incluir Javascript em seus arquivos HTML com a utilização da tag <script>.
<script> /* Se código em javascript */ </script>
Tradicionalmente, utilizamos a tag script dentro do elemento head do nosso arquivo HTML, mas, nada impede que você utilize quantas tags de script forem necessárias para o seu desenvolvimento, no local onde bem entender, como dentro do elemento body, por exemplo.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Olá mundo!</title> <script> /* Seu código javascript */ </script> </head> <body> <script> /* Seu outro código javascript */ </script> </body> </html>
No entanto, não é recomendável que você utilize várias tags script em vários locais diferentes do seu desenvolvimento, pois, dependendo do tamanho do seu projeto, pode se tornar algo praticamente impossível manter todos esses códigos separadamente.
O arquivo javascript
A tag <script> suporta um atributo chamado de src (source), onde você indica que, ao invés de ler o que está dentro da tag, o navegador deve buscar seus códigos javascript em um arquivo indicado nesse atributo:
<script src="meu_arquivo_javascript.js"></script>
Com isso, tudo o que for escrito no arquivo meu_arquivo_javascript.js será interpretado como se fosse códigos escritos dentro da tag <script>.
Como criar um arquivo javascript
Assim como fizemos em nosso curso de HTML gratuito, vou indicar o Notepad++ para você criar todos os seus arquivos (Javascript, CSS, HTML, PHP e demais), portanto, se você ainda não tem este editor de textos, recomendo que baixe e instale-o em seu computador, ele é gratuito.
Depois de baixar e instalar o editor de textos Notepad++, abra-o e escreva o seguinte:
alert('Olá mundo!'); 
- Crie uma pasta específica para este curso em seu computador;
- No Notepad++, pressione "CTRL" + "S" do seu teclado para salvar o arquivo;
- Digite o nome "meu_arquivo_javascript.js" e salve este arquivo dentro da pasta;
- No seu arquivo HTML, inclua a tag <script> com o atributo src apontando para meu_arquivo_javascript.js, como mostro no trecho HTML abaixo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Olá mundo!</title>
<script src="meu_arquivo_javascript.js"></script>
</head>
<body>
<p>Olá mundo!</p>
</body>
</html>Para testar, abra seu arquivo HTML no seu navegador e deverá ver um alerta escrito "Olá mundo!".
Se tudo deu certo, você acabou de escrever seu primeiro script em Javascript, parabéns!
A partir de agora, todos os nossos scripts serão escritos dentro desse arquivo Javascript (meu_arquivo_javascript.js), pois, essa é a prática recomendada pela Mozilla (e por mim) para utilização de códigos Javascript em páginas HTML.
Javascript e o desempenho da página
Quando você adiciona uma tag script dentro do cabeçalho do seu documento HTML (<head>), você está indicando ao navegador para modificar o modo de leitura para "scripting", isso quer dizer que, ao invés de ler e mostrar o conteúdo na página, o navegador irá ler e executar a ação que você está pedindo em Javascript.
Um dos problemas encontrados com este método é que o navegador só irá continuar lendo e processando a página quando terminar de ler o seu script completamente. Com isso, dependendo do tamanho do seu código Javascript (e do que ele vai fazer na página), pode se tornar inviável utilizar a tag script no cabeçalho do documento. Neste caso a página poderia levar um tempo muito elevado para ser carregada (leia-se: ficar lenta).
Vejamos algumas soluções para este problema:
O atributo defer
Se você estiver escrevendo seus códigos diretamente dentro da tag script (o que já falamos que não é o ideal), este atributo não vai mudar em nada o método de leitura dos seus códigos Javascript, porém, quando combinamos este atributo com outro atributo "src" (onde indicamos o arquivo que contém nossos códigos Javascript), o navegador só irá executar o código do arquivo após finalizar o carregamento da página. Ou seja, mesmo que a página fique lenta, o usuário ainda vai visualizar seu conteúdo e ter a impressão que ela foi completamente carregada, isso o dará a sensação de que a página carregou rapidamente.
<script src="meu_arquivo_javascript.js" defer></script>
Tag script no final da página
Além do atributo defer, que pode ser inviável dependendo do que seu script vai fazer, você também pode incluir sua tag script antes do fechamento da tag <body>.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Olá mundo!</title> </head> <body> <p>Olá mundo!</p> <script src="meu_arquivo_javascript.js"></script> </body> </html>
Com isso, seu script só será executado após o carregamento completo da página. Isso também dará sensação de que a página carregou mais rápido ao seu usuário final.
Mas lembre-se, a maioria dos scripts serão incluídos dentro da tag <head> do seu arquivo HTML, só altere isso se seus códigos javascript estiverem atrapalhando o desempenho do carregamento da sua página HTML. Além disso, verifique se o seu script está escrito corretamente, pois, particularmente, nunca precisei modificar o local de meus scripts, do <head> para o fechamento do <body> até o presente momento.
Com isso em mente, todos os scripts que iremos utilizar neste curso estarão dentro da tag <head> do seu arquivo HTML. Para ser mais específico, seu arquivo meu_arquivo_javascript.js precisa estar dentro da mesma pasta que seu arquivo HTML, e seu arquivo HTML precisa ter a tag abaixo dentro do <head>.
<script src="meu_arquivo_javascript.js"></script>
Entendendo os códigos Javascript
Os códigos Javascript, assim como a maioria (se não todos) os códigos de linguagens para a Web, são escritos da esquerda para a direita, do topo para a parte inferior. Da mesma maneira que escrevemos em Português.
Cada linha de código representa um novo comando para o motor Javascript embutido no navegador, por exemplo:
alert('Oi');
alert('Me chamo Luiz');O trecho acima gera dois alertas na página, um após o outro, com a mensagem "Oi" no primeiro e "Me chamo Luiz" no segundo.
O ponto e vírgula
Como você pôde perceber, sempre que terminados uma linha de código, incluímos um ponto e vírgula (;). Isso indica ao motor Javascript que o código realmente terminou.
Tal ponto e vírgula não é requisitado quando você pula as linhas a cada vez que termina um código, no entanto, é altamente recomendável que você o utilize, pois, caso tenha que comprimir seu arquivo Javascript por questões de desempenho da sua página, todas as linhas sem o ponto e vírgula irão gerar erros no seu código.
Por exemplo
Um trecho sem erros:
alert('Oi')
alert('Me chamo Luiz')O mesmo trecho comprimido:
alert('Oi') alert('Me chamo Luiz')O código acima sem os pontos e vírgulas gera o seguinte erro:
Erro de sintaxe: falta ; antes da declaração alert('Me chamo Luiz')
O correto seria:
alert('Oi'); alert('Me chamo Luiz');Portanto, sempre utilize o ponto e vírgula assim que terminar qualquer linha de código e Javascript.
As aspas
Qualquer coisa que você tenha que escrever no seu código Javascript que não seja um comando ou um número, deve vir entre aspas simples ou aspas duplas, por exemplo:
var msg = "Ei, eu sou uma variável em JS, meu valor está entre aspas duplas.";
alert("Eu posso escrever o que eu quiser aqui, estou entre aspas duplas.");
alert('E aqui também, estou entre aspas simples');
Isso caracteriza um tipo de dado primário chamado "string" (qualquer valor). Os outros dois tipos de dados primários em Javascript são "boolean" (true ou false, verdadeiro e falso respectivamente) e "número". Para os dois últimos, não precisamos de aspas.
/* Uma variável com valor booleano */
var amor = true;
/* Uma variável com valor numérico */
var nota = 10;
/* Verificação condicional */
if ( amor === true ) {
alert('Ela me ama! Sou nota: ' + nota );
}
// O código acima deverá mostrar:
// Ela me ama! Sou nota: 10
// Na tela do navegador do usuário.
Comentários em Javascript
Você deve ter percebido algumas linhas no meio dos códigos com /* isso */ ou iniciando com barras duplas (//). Isso indica que estamos "comentando" o que vamos fazer no código a seguir e não é lido pelo motor Javascript do navegador.
Os comentários com barras duplas (//) só server para uma linha, ou para comentários em linha:
// Este comentário vale apenas para essa linha // Quando quebro a linha, preciso de mais duas barras (//) var oi = 'Oi'; // Este comentário é um comentário em linha // A única parte desse código que será linha é "var oi = 'Oi';"
Veja o exemplo acima, com milhares de comentários que não serão lidos pelo motor Javascript.
Você também pode utilizar /* … */ para escrever blocos de comentários, por exemplo:
/* Este comentário vale para várias linhas, você deve fechá-lo com o seguinte caractere */ var oi = 'Oi'; /* Este também é um comentário em linha */ /* Também posso utilizá-lo em uma única linha */
Concluindo
Nessa aula você aprendeu a criar seu arquivo Javascript e viu milhares de padrões e regras que devemos seguir quando escrevemos códigos em Javascript. Na próxima iremos mais fundo no código e aprenderemos a maioria das coisas que precisamos saber sobre as variáveis e tipos de dados. Abaixo o link da próxima aula:
- Próxima aula: Variáveis em Javascript
