logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

Onde rodar o código Javascript?

O código Javascript deve ser escrito dentro de script tags, que podem ser colocadas tanto no head quanto no body do documento html. É mais recomendável, porém, colocá-las ao final do body, pois isso melhora o desempenho da página.

                   
    <body>


        <!-- conteúdo da página  -->


        <script>

            // código javascript

        </script>

    </body>
                    
                

Outra maneira, que na verdade é a mais usada, é deixar o código Javascript em arquivos externos (a extensão dos arquivos Javascript é '.js'). Desta forma organizamos melhor o código, separando o que é html e o que é Javascript. Neste caso, a script tag funcionará como um link por meio da propriedade 'src'.

                    
    <body>


        <!-- html da página  -->


        <script src='js/scripts.js'></script>
        

    </body>
                    
                

Os primeiros comandos Javascript

Vamos então começar a escrever Javascript aqui nesta página? Abra este arquivo (01-primeiros-passos.html) no editor de texto. Ponha uma script tag com um link para o arquivo js/scripts.js no final do elemento body, exatamente como no exemplo acima. Agora crie o arquivo scripts.js na pasta js e dentro dele vamos escrever os nossos primeiros comandos Javascript, o alert e o console.log. Quando terminar não esqueça de salvar os arquivos no editor de texto (Ctrl + S).

                    
    alert('Mensagem enviada pelo comando alert');

    console.log('Mensagem enviada pelo console');
                    
                

Agora recarregue esta página e veja o que acontece. A mensagem enviada pelo comando alert aparece em uma caixa de diálogo que abre automaticamente ao carregar a página. Para ver a mensagem enviada pelo console.log, clique com o botão direito aqui na página, e vá em "inspecionar" ou "inspect", isso fará abrir as ferramentas do desenvolvedor. Entre as opções nas abas superiores, procure o Console. Nesta área estará a mensagem que enviamos. O console é uma excelente ferramenta de teste e identificação de erros no nosso código, vamos usá-lo em quase todas as aulas daqui para frente.

Agora que sabemos que tudo está funcionando e conseguimos rodar nossos primeiros comandos, podemos seguir para a próxima aula.

Índice de Aulas