1 Curso de Javascript - Parte 1 Esquentando os motores Seg 24 Dez 2012, 17:06
Halt
Administrador
O que é JavaScript?
JavaScript é a linguagem de programação usada por 99% dos webmasters e desenvolvedores de páginas web em geral. Como toda linguagem de programação, o JavaScript obedece uma série de convenções. Você deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maiúsculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem próxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas características e resultados.
Por que aprender JavaScript?
Seja você um webmaster profissional ou apenas um estudante que quer fazer a sua própria página na Internet, deve conhecer no mínimo os primeiros passos da linguagem, ou seja, colocar um script já pronto em suas páginas. Todas aquelas coisas que você vê diariamente em páginas web, tais como: envio de formulários, a data, as mensagens na barra de status e muitos outros efeitos são conseguidos por meio de JavaScript. Para completar, pensa nas imensas possibilidades de expandir os seus conhecimentos de web design e ainda acrescentar mais um ponto positivo ao seu currículo profissional.
JavaScript é o mesmo que Java?
Não. Antes de discutirmos as diferenças entre as duas linguagens, é bom que saibamos a diferença entre linguagem compilada e linguagem interpretada. Linguagens compiladas são aquelas como Delphi, Visual Basic, C++, entre outras. O Java pertence a este grupo de linguagens, as quais geralmente produzem um executável, ou seja, um arquivo com a extensão .exe.
O JavaScript é uma linguagem interpretada. O que isso quer dizer? Quando o browser (usaremos sempre este nome para nos referirmos ao navegador de Internet) reconhece um JavaScript, automaticamente o interpretador contido no browser executa esse script. Isso faz com que os arquivos JavaScript sejam apenas linhas de texto, que, quando inseridos em uma página web, apropriadamente, produzirão os resultados que queremos.
Os códigos fontes (as linhas que escrevemos para produzir os efeitos ou cálculos em nossos scripts) são impossíveis de ser visualizados em linguagens do tipo compilada, já que eles fazem parte do arquivo executável final. Os códigos fonte de nossos códigos JavaScript, contudo, não poderão ser escondidos, uma vez que serão interpretados no browser, possibilitando assim, que o usuário veja-os facilmente por meio do comando "Visualizar código fonte" dos browsers.
O que preciso para aprender JavaScript?
Hoje em dia, a maioria dos webmasters está usando editores HTML visuais, mas você pode escolher entre esses editores ou sisplesmente escrever os seus scripts usando o Bloco de Notas do Windows ou qualquer outro editor de texto. Qualquer que seja a sua escolha, é importante que desabilite a quebra de linha, já que algumas instruções dos códigos em JavaScript deverão estar em apenas uma linha. O editor de texto escolhido deverá permitir que você escreva uma linha de texto com a extensão de um quilômetro, se assim for preciso.
Durante este curso estaremos fazendo referências aos elementos HTML; portanto, recomendo que você tente aprender um pouquinho de HTML antes de iniciar a sua viagem rumo ao domínio do JavaScript. Se você usa um editor HTML visual, pode praticar escrevendo as suas páginas e então visualizando o código fonte da página para ir aos poucos dominando os elementos que compõem uma página web.
Colocando um JavaScript em uma página web
Podemos colocar códigos JavaScript em nossas páginas web usando as tags <script></script>. As tags script podem ser colocadas na parte <body></body> ou <head></head> da página. Durante o curso vamos usar tags nestes dois lugares. Por agora, saiba que usamos tags na parte <body> quando queremos que o resultado do script seja exibido no momento que a página for acessada. Os scripts colocados na parte <head> geralmente são funções que serão chamadas a partir dos diversos elementos HTML em seu devido tempo.
Vamos começar colocando o nosso primeiro script em uma página web. Acompanhe os passos em seguida:
Inicie o seu editor HTML preferido e faça o projeto de uma página. Crie algo parecido com o que está logo abaixo:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
</body>
</html>
Caso o seu editor coloque mais alguma coisa junto com estas tags, não se importe. Estas tags são as partes principais de sua página. Agora, entre as tags <body></body> vamos digitar o seguinte código:
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
Este script escreverá "Este é o meu primeiro JavaScript" quando você executar a página.
Entendendo o script
Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Você verá futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc.
Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir".
A parte do código:
document.write('Este é o meu primeiro JavaScript');
transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções, como veremos nas próximas partes do curso. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script".
E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não?
Vamos rever o código completo? Aqui está:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
</body>
</html>
Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o código:
<script language="javascript">
<!--
document.write('<b>Este é o meu primeiro JavaScript. Em
negrito agora.</b>');
//-->
</script>
Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado.
Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics).
JavaScript é a linguagem de programação usada por 99% dos webmasters e desenvolvedores de páginas web em geral. Como toda linguagem de programação, o JavaScript obedece uma série de convenções. Você deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maiúsculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem próxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas características e resultados.
Por que aprender JavaScript?
Seja você um webmaster profissional ou apenas um estudante que quer fazer a sua própria página na Internet, deve conhecer no mínimo os primeiros passos da linguagem, ou seja, colocar um script já pronto em suas páginas. Todas aquelas coisas que você vê diariamente em páginas web, tais como: envio de formulários, a data, as mensagens na barra de status e muitos outros efeitos são conseguidos por meio de JavaScript. Para completar, pensa nas imensas possibilidades de expandir os seus conhecimentos de web design e ainda acrescentar mais um ponto positivo ao seu currículo profissional.
JavaScript é o mesmo que Java?
Não. Antes de discutirmos as diferenças entre as duas linguagens, é bom que saibamos a diferença entre linguagem compilada e linguagem interpretada. Linguagens compiladas são aquelas como Delphi, Visual Basic, C++, entre outras. O Java pertence a este grupo de linguagens, as quais geralmente produzem um executável, ou seja, um arquivo com a extensão .exe.
O JavaScript é uma linguagem interpretada. O que isso quer dizer? Quando o browser (usaremos sempre este nome para nos referirmos ao navegador de Internet) reconhece um JavaScript, automaticamente o interpretador contido no browser executa esse script. Isso faz com que os arquivos JavaScript sejam apenas linhas de texto, que, quando inseridos em uma página web, apropriadamente, produzirão os resultados que queremos.
Os códigos fontes (as linhas que escrevemos para produzir os efeitos ou cálculos em nossos scripts) são impossíveis de ser visualizados em linguagens do tipo compilada, já que eles fazem parte do arquivo executável final. Os códigos fonte de nossos códigos JavaScript, contudo, não poderão ser escondidos, uma vez que serão interpretados no browser, possibilitando assim, que o usuário veja-os facilmente por meio do comando "Visualizar código fonte" dos browsers.
O que preciso para aprender JavaScript?
Hoje em dia, a maioria dos webmasters está usando editores HTML visuais, mas você pode escolher entre esses editores ou sisplesmente escrever os seus scripts usando o Bloco de Notas do Windows ou qualquer outro editor de texto. Qualquer que seja a sua escolha, é importante que desabilite a quebra de linha, já que algumas instruções dos códigos em JavaScript deverão estar em apenas uma linha. O editor de texto escolhido deverá permitir que você escreva uma linha de texto com a extensão de um quilômetro, se assim for preciso.
Durante este curso estaremos fazendo referências aos elementos HTML; portanto, recomendo que você tente aprender um pouquinho de HTML antes de iniciar a sua viagem rumo ao domínio do JavaScript. Se você usa um editor HTML visual, pode praticar escrevendo as suas páginas e então visualizando o código fonte da página para ir aos poucos dominando os elementos que compõem uma página web.
Colocando um JavaScript em uma página web
Podemos colocar códigos JavaScript em nossas páginas web usando as tags <script></script>. As tags script podem ser colocadas na parte <body></body> ou <head></head> da página. Durante o curso vamos usar tags nestes dois lugares. Por agora, saiba que usamos tags na parte <body> quando queremos que o resultado do script seja exibido no momento que a página for acessada. Os scripts colocados na parte <head> geralmente são funções que serão chamadas a partir dos diversos elementos HTML em seu devido tempo.
Vamos começar colocando o nosso primeiro script em uma página web. Acompanhe os passos em seguida:
Inicie o seu editor HTML preferido e faça o projeto de uma página. Crie algo parecido com o que está logo abaixo:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
</body>
</html>
Caso o seu editor coloque mais alguma coisa junto com estas tags, não se importe. Estas tags são as partes principais de sua página. Agora, entre as tags <body></body> vamos digitar o seguinte código:
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
Este script escreverá "Este é o meu primeiro JavaScript" quando você executar a página.
Entendendo o script
Na parte <script language="javascript">, nós estamos dizendo ao browser que tipo de código ele está prestes a executar. Você verá futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc.
Na parte <!-- nós estamos dizendo ao browser o seguinte: "Se você for um dos browsers mais antigos ou não suporta JavaScript, faça o favor de pular algumas das linhas de código que vem a seguir".
A parte do código:
document.write('Este é o meu primeiro JavaScript');
transmitiu ao browser a seguinte mensagem: "Acesse o documento (a página atual) e escreva (write) o texto que está entre aspas simples". Observe que usamos ponto-e-vírgula depois da instrução para separar as instruções, como veremos nas próximas partes do curso. Em seguida nós temos //--> que quer dizer "aqui está o final do código a ser executado por este script".
E finalmente temos a tag de fechamento </script> que quer dizer "Já que o código a ser executado acabou, eu vou fechar aqui para que o browser não faça nenhuma besteira". Simples, não?
Vamos rever o código completo? Aqui está:
<html>
<head>
<title>Meu primeiro JavaScript</title>
</head>
<body>
<script language="javascript">
<!--
document.write('Este é o meu primeiro JavaScript');
//-->
</script>
</body>
</html>
Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o código:
<script language="javascript">
<!--
document.write('<b>Este é o meu primeiro JavaScript. Em
negrito agora.</b>');
//-->
</script>
Cuidado com a quebra de linha. A instrução document.write('Texto aqui'') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado.
Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itálico (italics).