Click here to load reader

Javascript aula 01 - visao geral

  • View
    1.869

  • Download
    3

Embed Size (px)

Text of Javascript aula 01 - visao geral

  • 1. JavaScript - Introduo Cristiano Pires Martins 1

2. Referncia Silva, Maurcio Samy (Maujor), JavaScript: Guia do Programador. So Paulo: Novatec Editora, 2010. 2 3. Viso Geral HTML usado para estruturar uma pgina web; Apresentao visual trabalho para o CSS; As linguagens de programao so responsveis pela interatividade avanada da pgina. 3 4. Viso Geral JavaScript foi criada pela Netscape em parceria com a Sun Microsystems; Primeira verso foi lanada em 1995; Dentre as linguagens de programao para processar dados na web: PHP,ASP, Java, Ruby, Phyton e ColdFusion. 4 5. Viso Geral Essas linguagens foram feitas para rodar no lado do servidor (exceto o java); JavaScript uma linguagem desenvolvida para rodar no lado do cliente; No navegador (browser) existe um interpretador JavaScript; Exemplo: o PHP precisa de um servidor. 5 6. Funcionalidades Manipular contedo e apresentao Insero de data/hora no documento; Insero de mensagem de boas vindas; Contedos diferenciados dependendo do navegador. Podendo at mesmo gerar o contedo completo de uma pgina web. 6 7. Funcionalidades Manipular o Navegador Criar pou-up; Mensagens ao usurio; Alertar as dimenses do navegador; Interferir na barra de status; Retirar menus; Fechar e abrir janelas. 7 8. Funcionalidades Manipular o Navegador Comportamentos inesperados e no solicitados pelo usurio contriburam para a m fama da linguagem; Adote como regra geral no manipular a janela do navegador (Maujor, 2010). 8 9. Funcionalidades Interagir com Formulrios capaz de acessar formulrios HTML; Validar os dados; Realizar clculos; Fornecer dicas de preenchimento dos campos. 9 10. Funcionalidades Interagir com outras linguagens dinmicas Pode ser usada em conjunto com outras linguagens. 10 11. JavaScript e os Padres Web Com o surgimento dos padres Web, surgiram 2 princpios bsicos: JavaScript no obstrutivo; Melhoria progressiva. 11 12. JavaScript e os Padres Web Escrever JavaScript no obstrutivo implica: Contedo da pgina estar presente e funcional, mesmo sem suporte; Usar linguagem para incrementar a usabilidade da pgina; Escrever scripts em arquivos externos. Uso de camadas: HTML, CSS, SCRIPT. 12 13. Camadas de Desenvolvimento Camadas de Desenvolvimento Estruturao de Contedo: HTML; Apresentao: CSS; Comportamento: Scripts. 13 14. Camadas de Desenvolvimento Principais vantagens das camadas: Elimina a repetio de cdigos em diferentes pginas; Reaproveita trechos de cdigos em outros projetos; Busca e correo de bugs; Facilita manuteno e entendimento dos cdigos. 14 15. Camadas de Desenvolvimento Conceito da Melhoria Progressiva: Primeira etapa: estruturar os contedos usando HTML; Segunda etapa: incrementar a apresentao da pgina usando CSS; Terceira etapa: introduzir JavaScript acrescentando interatividade pgina. 15 16. Introduo Linguagem Foi inventada por Brendam Eich, a primeira verso foi JavaScript 1.0, implementada para o Netscape 2.0, em 1996. Concorreu com a JScript 1.0 do Internet Explorer 3.0. Atualmente, o nome ocial: ECMAScript e a verso ECMA-262 v5. 16 17. Base para Estudos Orientao a objetos A linguagem suporta POO; capaz de simular muitos dos fundamentos de POO; Os objetos da linguagem podem ser agrupados em: Objetos internos da linguagem (strings, arrays e datas); Objetos do ambiente de hospedagem (navegador, como window e document); Objetos personalizados criados pelo desenvolvedor. 17 18. Inserir JavaScript na HTML Para escrever cdigo no precisa instalar software especial; Escreve em um editor de texto simples; Visualiza o resultado no browser; Os arquivos so gravados com extenso .js; Arquivos so executados dentro de um arquivo HTML. 18 19. Inserir JavaScript na HTML Inline: na seo body (prtica no recomendada). Exemplo: 19 20. Inserir JavaScript na HTML Incorporado: na seo head; ... ... ... ... ... 20 21. Inserir JavaScript na HTML Externo: em um arquivo externo e inserir com um link na seo head. ... ... ... 21 22. Sistema Lxico da JavaScript Tamanho da caixa: case sensitive; Analisar: Sem problema: HMTL Com problema: XHTML No JavaScript 22 23. Sistema Lxico da JavaScript Comentrios: Em linha nica: //