Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Curso de JavaScript - Aula 2
Exemplo em JavaScript
Exemplos em Javascript são fáceis de codificar. O JavaScript fornece três locais para colocar o código JavaScript: na tag body, na tag
head e em um arquivo JavaScript externo.
Vejamos a seguir a estrutura de um exemplo simples em JavaScript:
Onde:
A tag 'script' especifica que estamos usando JavaScript.
A string 'text/javascript' é o tipo de conteúdo que fornece informações ao navegador sobre os dados.
A função 'document.write()' é usada para exibir conteúdo dinâmico por meio de JavaScript. Aprenderemos sobre o objeto do documento
em detalhes posteriormente.
Existe três lugares para você colocar o código JavaScript:
1. Na tag body de HTML.
2. Na tag head do HTML.
3. No arquivo .js (javaScript externo).
Primeiro Caso: Código na tag body
No exemplo acima, exibimos o conteúdo dinâmico usando JavaScript. Agora vamos ver um exemplo simples de JavaScript que exibe uma caixa de
diálogo de alerta.
O resultado desse código é o seguinte:
Segundo Caso: Código na tag head
Vamos ver o mesmo exemplo de exibição da caixa de diálogo de alerta de JavaScript contida na tag head.
Neste exemplo, vamos criar uma função msg(). Para criar uma função em JavaScript, você precisa escrever
uma função com o nome_da_função, conforme indicado abaixo. Para chamar a função, você precisa chamar no evento.
Aqui estamos usando o evento onclick para chamar a função msg().
O resultado desse código é o seguinte:
Terceiro Caso: Arquivo externo
Podemos criar um arquivo JavaScript externo e incorporá-lo em muitas páginas HTML. Ele fornece reutilização de código porque um
único arquivo JavaScript pode ser usado em várias páginas HTML. Um arquivo JavaScript externo deve ser salvo com a extensão
.js. É recomendável incorporar todos os arquivos JavaScript em um único arquivo. Aumenta a velocidade
da página da Web.
Vamos criar um arquivo JavaScript externo que imprima a mensagem "Olá, pessoal." em uma caixa de diálogo de alerta (AlertDialog):
mensagem.js
Vamos incluir o arquivo JavaScript na página html. A função JavaScript é chamada ao clicar no botão.
Digite o código a seguir e salve com o nome de: index.html
Vantagens do JavaScript externo:
Veja a seguir algumas vantagens do uso de um arquivo JavaScript externo:
Ajuda na reutilização do código em mais de um arquivo HTML.
Permite fácil legibilidade do código.
É eficiente em termos de tempo, pois os navegadores da Web armazenam em cache os arquivos js externos, o que reduz ainda mais o tempo de carregamento da página.
Ele permite que designers da Web e codificadores trabalhem com arquivos html e .js paralelamente e separadamente, ou seja, sem enfrentar conflitos de código.
O comprimento do código reduz, pois precisamos especificar a localização do arquivo .js.
Desvantagens do JavaScript externo:
Veja a seguir algumas desvantagens do uso de um arquivo JavaScript externo:
Qualquer um pode fazer o download do código do codificador usando o URL do arquivo .js.
Se dois arquivos .js dependem um do outro, uma falha em um arquivo pode afetar a execução do outro arquivo dependente.
O navegador da Web precisa fazer uma solicitação http adicional para obter o código .js.
Uma pequena ou grande alteração no código .js pode causar resultados inesperados em todos os seus arquivos dependentes.
Precisamos verificar cada arquivo que depende do arquivo JavaScript externo comumente criado.
Se houver poucas linhas de código, é melhor implementar o código JavaScript internamente.