JavaScript

Introduo ao JavaScript

05/04/2013

Fagner Silva de Lima

Objetivos
Introduo Sintaxe Bsica Arquivo (script) externo Script no HEAD da pgina Script no BODY da pgina A tag <NOSCRIPT> Comentrios Alguns detalhes da linguagem

05/04/2013

Introduo ao JavaScript

Introduo
O JavaScript uma linguagem que tem a funo de tornar as pginas HTML interativas. O cdigo JavaScript includo diretamente no HTML, interagindo com os seus elementos. Qualquer pessoa pode utilizar a linguagem livremente, sem a necessidade de licena. Por serem somente texto, os cdigos JavaScript podem ser modificados com qualquer editor de texto, at mesmo com o Notepad do Windows. H tambm programas especializados para esta finalidade.

05/04/2013

Introduo ao JavaScript

Sintaxe Bsica
Um cdigo JavaScript inserido em um documento HTML atravs da tag <script> e do atributo type com o valor "text/javascript".

Ao iniciarmos a tag <script>, dizemos o tipo de script utilizado e assim o browser entender que no contedo dessa tag h comandos JavaScript para serem executados e os reconhecero. Para finalizar a execuo dos cdigos usa-se o final da tag como </script>.

05/04/2013

Introduo ao JavaScript

Sintaxe Bsica
H trs formas de inserirmos o JavaScript em uma pgina HTML.
Criando um arquivo externo -.js; Inserindo o cdigo no head da pgina; Inserindo o cdigo no body da pgina.

Tambm pode-se utilizar as trs formas ao mesmo tempo.

05/04/2013

Introduo ao JavaScript

Arquivo (script) externo

O arquivo externo chamado desta forma:

Ou seja, atravs do atributo src da tag <script>, indicamos a localizao do arquivo externo, para que assim o browser possa localiz-lo e execut-lo. Em arquivos externos no utilizamos a tag <script>, somente os cdigos.

05/04/2013

Introduo ao JavaScript

Arquivo (script) externo

Algumas das vantagens de se trabalhar dessa forma:
Facilidade na manuteno: Uma vez que o script est localizado em apenas um arquivo, facilita a edio ou correo dos cdigos. Carregamento mais rpido da pgina: O arquivo externo armazenado no cache do navegador. Assim, evita-se carreg-lo toda vez que a pgina for chamada. Semntico: O arquivo externo separa a camada de comportamento (JavaScript) da camada de contedo (HTML).

05/04/2013

Introduo ao JavaScript

Script no HEAD da pgina

O script inserido desta forma:

Os cdigos JavaScript localizado no head da pgina so executados ao serem chamados, ou seja, quando algum evento for provocado, como o evento onclick, onmouseover, onload, dentre outros. Nessa forma o script carregando antes de algum utiliz-lo, ou seja, antes do carregamento do contedo do body.

05/04/2013

Introduo ao JavaScript

Script no BODY da pgina

O script inserido desta forma:

Os cdigos inseridos no body da pgina so inicialmente executados enquanto a pgina carregada mas tambm podem ser chamados quando algum evento for provocado.

05/04/2013

Introduo ao JavaScript

A tag <NOSCRIPT >

A tag <noscript> nos permite disponibilizar um contedo alternativo ao disposto via script. Isso significa dizer que, se o usurio no tiver suporte ao JavaScript em seu browser, ele ver o contedo inserido dentro dela e, caso tenha suporte, o seu contedo omitido.

05/04/2013

Introduo ao JavaScript

10

A tag <NOSCRIPT>
A tag <NOSCRIPT> muito importante quando se trata de acessibilidade, pois oferece um contedo alternativo para os usurios sem suporte linguagem em questo.

05/04/2013

Introduo ao JavaScript

11

Comentrios
Os comentrios na linguagem JavaScript tem funo similar s demais linguagens, ou seja, de explicar o que determinado comando faz, nota de algum autor, lembretes, dentre outras. Tudo que estiver englobado pelos comentrios ignorado pelo interpretador do JavaScript. H dois tipos de comentrios: // e /* */. O primeiro o comentrio de uma linha somente, enquanto o segundo suporta vrias.

05/04/2013

Introduo ao JavaScript

12

Comentrios

05/04/2013

Introduo ao JavaScript

13

Comentrios
Um detalhe importante que no podemos esquecer, a utilizao do comentrio em HTML ao utilizar cdigos JavaScript in-line (disposto no head ou body). Antes de lhe explicar a sua funo, veja o exemplo:

05/04/2013

Introduo ao JavaScript

14

Comentrios
Agora vamos compreender isso melhor. Os browsers que no suportam o JavaScript iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir essa prtica, utilizamos o comentrio em HTML. Porm, voc pode se perguntar: Para que serve as duas barras (//) antes do fechamento do comentrio? Bom, elas previnem que o interpretador do JavaScript as interpretem.

05/04/2013

Introduo ao JavaScript

15

JavaScript
Alguns detalhes da linguagem

05/04/2013

Fagner Silva de Lima

16

Case sensitive
JavaScript "case sensitive", o que significa dizer que o interpretador diferencia minsculas de maisculas. Veja um exemplo:

05/04/2013

Introduo ao JavaScript

17

Case sensitive
No exemplo anterior, gostaramos de exibir atravs do alert() a mensagem armazenada na varivel txtMsg (no se preocupe, voc aprender sobre variveis ainda), mas como chamamos a varivel por txtmsg, o JavaScript no a encontrou no cdigo, causando um erro (-txtmsg is not defined).

05/04/2013

Introduo ao JavaScript

18

Ponto e vrgula (;) no final das declaraes

Em JavaScript a utilizao do ; (ponto e vrgula) quase que opcional. Quase, porque se voc dispor de duas declaraes de cdigo na mesma linha, precisar do ; (ponto e vrgula). Vejamos o exemplo abaixo:

05/04/2013

Introduo ao JavaScript

19

Ponto e vrgula (;) no final das declaraes

Utilizar o ; (ponto e vrgula) na codificao considerada uma boa prtica no desenvolvimento de scripts. Outro detalhe: se voc utilizar algum compressor de JavaScript - para reduzir o tamanho do arquivo - e os seus cdigos no tiverem o ; (ponto e virgula), aparecero erros, pois os compressores distribuem os cdigos em uma nica linha.

05/04/2013

Introduo ao JavaScript

20

JavaScript
Concluso

05/04/2013

Fagner Silva de Lima

21

Referncias
Fundao Bradesco iMasters
http://imasters.com.br/

Criarweb.com
http://www.criarweb.com

05/04/2013

Introduo ao JavaScript

22