Your SlideShare is downloading. ×
0
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
JavaScript - (01) Introdução ao JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JavaScript - (01) Introdução ao JavaScript

3,506

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,506
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
190
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript Introdução ao JavaScript 11/8/2013 Fagner S. de Lima - JavaScript 1
  • 2. Objetivos  Introdução  Sintaxe Básica  Arquivo (script) externo  Script no HEAD da página  Script no BODY da página  A tag <NOSCRIPT>  Comentários  Alguns detalhes da linguagem 11/8/2013 Fagner S. de Lima - JavaScript 2
  • 3. Introdução  O JavaScript é uma linguagem que tem a função de tornar as páginas HTML interativas.  O código JavaScript é incluído diretamente no HTML, interagindo com os seus elementos.  Qualquer pessoa pode utilizar a linguagem livremente, sem a necessidade de licença.  Por serem somente texto, os códigos JavaScript podem ser modificados com qualquer editor de texto, até mesmo com o Notepad do Windows. Há também programas especializados para esta finalidade. 11/8/2013 Fagner S. de Lima - JavaScript 3
  • 4. Sintaxe Básica Um código JavaScript é inserido em um documento HTML através da tag <script> e do atributo type com o valor "text/javascript". 11/8/2013 Fagner S. de Lima - JavaScript 4 Ao iniciarmos a tag <script>, dizemos o tipo de script utilizado e assim o browser entenderá que no conteúdo dessa tag há comandos JavaScript para serem executados e os reconhecerão. Para finalizar a execução dos códigos usa-se o final da tag como </script>.
  • 5. Sintaxe Básica Há três formas de inserirmos o JavaScript em uma página HTML. • Criando um arquivo externo -.js; • Inserindo o código no head da página; • Inserindo o código no body da página. Também pode-se utilizar as três formas ao mesmo tempo. 11/8/2013 Fagner S. de Lima - JavaScript 5
  • 6. Arquivo (script) externo O arquivo externo é chamado desta forma: 11/8/2013 Fagner S. de Lima - JavaScript 6 Ou seja, através do atributo src da tag <script>, indicamos a localização do arquivo externo, para que assim o browser possa localizá-lo e executá-lo. Em arquivos externos não utilizamos a tag <script>, somente os códigos.
  • 7. Arquivo (script) externo Algumas das vantagens de se trabalhar dessa forma: • Facilidade na manutenção: Uma vez que o script está localizado em apenas um arquivo, facilita a edição ou correção dos códigos. • Carregamento mais rápido da página: O arquivo externo é armazenado no cache do navegador. Assim, evita-se carregá-lo toda vez que a página for chamada. • Semântico: O arquivo externo separa a camada de comportamento (JavaScript) da camada de conteúdo (HTML). 11/8/2013 Fagner S. de Lima - JavaScript 7
  • 8. Script no HEAD da página O script é inserido desta forma: 11/8/2013 Fagner S. de Lima - JavaScript 8 Os códigos JavaScript localizado no head da página são 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 alguém utilizá-lo, ou seja, antes do carregamento do conteúdo do body.
  • 9. Script no BODY da página O script é inserido desta forma: 11/8/2013 Fagner S. de Lima - JavaScript 9 Os códigos inseridos no body da página são inicialmente executados enquanto a página é carregada mas também podem ser chamados quando algum evento for provocado.
  • 10. A tag <NOSCRIPT > A tag <noscript> nos permite disponibilizar um conteúdo alternativo ao disposto via script. Isso significa dizer que, se o usuário não tiver suporte ao JavaScript em seu browser, ele verá o conteúdo inserido dentro dela e, caso tenha suporte, o seu conteúdo é omitido. 11/8/2013 Fagner S. de Lima - JavaScript 10
  • 11. A tag <NOSCRIPT> A tag <NOSCRIPT> é muito importante quando se trata de acessibilidade, pois oferece um conteúdo alternativo para os usuários sem suporte à linguagem em questão. 11/8/2013 Fagner S. de Lima - JavaScript 11
  • 12. Comentários Os comentários na linguagem JavaScript tem função 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 comentários é ignorado pelo interpretador do JavaScript. Há dois tipos de comentários: // e /* */. O primeiro é o comentário de uma linha somente, enquanto o segundo suporta várias. 11/8/2013 Fagner S. de Lima - JavaScript 12
  • 13. Comentários 11/8/2013 Fagner S. de Lima - JavaScript 13
  • 14. Comentários Um detalhe importante que não podemos esquecer, é a utilização do comentário em HTML ao utilizar códigos JavaScript in-line (disposto no head ou body). Antes de lhe explicar a sua função, veja o exemplo: 11/8/2013 Fagner S. de Lima - JavaScript 14
  • 15. Comentários Agora vamos compreender isso melhor. Os browsers que não suportam o JavaScript irão exibi-lo como se fosse parte do conteúdo da página. Para prevenir essa prática, utilizamos o comentário em HTML. Porém, você pode se perguntar: Para que serve as duas barras (//) antes do fechamento do comentário? Bom, elas previnem que o interpretador do JavaScript as interpretem. 11/8/2013 Fagner S. de Lima - JavaScript 15
  • 16. JavaScript Alguns detalhes da linguagem 11/8/2013 Fagner S. de Lima - JavaScript 16
  • 17. Case sensitive JavaScript é "case sensitive", o que significa dizer que o interpretador diferencia minúsculas de maiúsculas. Veja um exemplo: 11/8/2013 Fagner S. de Lima - JavaScript 17
  • 18. Case sensitive No exemplo anterior, gostaríamos de exibir através do alert() a mensagem armazenada na variável txtMsg (não se preocupe, você aprenderá sobre variáveis ainda), mas como chamamos a variável por txtmsg, o JavaScript não a encontrou no código, causando um erro (-txtmsg is not defined). 11/8/2013 Fagner S. de Lima - JavaScript 18
  • 19. Ponto e vírgula (;) no final das declarações Em JavaScript a utilização do ; (ponto e vírgula) é quase que opcional. Quase, porque se você dispor de duas declarações de código na mesma linha, precisará do ; (ponto e vírgula). Vejamos o exemplo abaixo: 11/8/2013 Fagner S. de Lima - JavaScript 19
  • 20. Ponto e vírgula (;) no final das declarações Utilizar o ; (ponto e vírgula) na codificação é considerada uma boa prática no desenvolvimento de scripts. Outro detalhe: se você utilizar algum compressor de JavaScript - para reduzir o tamanho do arquivo - e os seus códigos não tiverem o ; (ponto e virgula), aparecerão erros, pois os compressores distribuem os códigos em uma única linha. 11/8/2013 Fagner S. de Lima - JavaScript 20
  • 21. JavaScript Conclusão 11/8/2013 Fagner S. de Lima - JavaScript 21
  • 22. Referências  Fundação Bradesco  iMasters http://imasters.com.br/  Criarweb.com http://www.criarweb.com 11/8/2013 Fagner S. de Lima - JavaScript 22

×