1 / 29

Aplicativos para Internet Aula 07

Aplicativos para Internet Aula 07. JavaScript Prof. Danielle Martin, Wolley e Erika Universidade de Mogi das Cruzes. JavaScript. Originalmente desenvolvido por Brendan Eich da Netscape sob o nome de Mocha, posteriormente teve seu nome mudado para LiveScript e por fim JavaScript .

brone
Download Presentation

Aplicativos para Internet Aula 07

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Aplicativos para InternetAula 07 JavaScript Prof. Danielle Martin, Wolley e Erika Universidade de Mogi das Cruzes

  2. JavaScript • Originalmente desenvolvido por Brendan Eich da Netscape sob o nome de Mocha, posteriormente teve seu nome mudado para LiveScript e por fim JavaScript. • LiveScript foi o nome oficial da linguagem quando foi lançada pela primeira vez na versão beta do navegador Netscape 2.0 em setembro de 1995, mas teve seu nome mudado em um anúncio conjunto com a Sun Microsystems em dezembro de 1995 quando foi implementado no navegador Netscape versão 2.0B3. • Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para Ecma internacional como candidato a padrão industrial e o trabalho subsequente resultou na versão padronizada chamada ECMAScript. Brendan Eich

  3. JavaScript • Linguagem integrada no navegador • Linguagem interpretada • Modelo de execução controlado por eventos • Baseada em Objetos (Window, Date(), Array(), Math()) • Tipagem dinâmica: tipos são associados com valores e não com variáveis

  4. O podemos fazer com JavaScript • Manipular Elementos do Documento HTML • Acessar seus valores • Alterar estilos • Criar novos elementos na página • Criar animações • Manipular Comportamento do navegador • Redirecionar páginas • Obter/alterar dimensões da janela • Percorrer o histórico de navegação • Obter/alterar coordenadas do cursor • Manipular Arquivos XML e JSON

  5. Objetos do JavaScript • JavaScript DOM (DocumentObjectModel) • Document • Element • Attributes • Event • EventListener • Outros objetos do JavaScript • Array • Date • Math • Number • RegExp • Etc. • JavaScript BOM (Browser ObjectModel) • Window • Navigator • Screen • History • Location

  6. Como inserir e executar JavaScript • Podemos inserir nossos códigos JavaScript das seguintes formas: – Dentro do corpo da página <body>....</body> – Dentro do cabeçalho <head>....</head> – Dentro de uma taghtml, associado a um evento – Em um arquivo separado do html, este arquivo deve ter a extensão .js

  7. Como inserir e executar JavaScript • Dentro do <body>

  8. Como inserir e executar JavaScript • Dentro do <head>

  9. Como inserir e executar JavaScript • Dentro de uma tag input associado a um evento

  10. Como inserir e executar JavaScript • Dentro de um arquivo .js

  11. Conceitos básicos • JavaScript é case-sensitive • Tipagem dinâmica • var nome=“Leonardo”; • var numInt= 10; • var numFloat= 5.5; • Comentários • /* comentado */ • //comentado

  12. Conceitos básicos • Operadores Aritméticos

  13. Conceitos básicos • Operadores de Atribuição

  14. Conceitos básicos • Operadores de comparação

  15. Conceitos básicos • Diferença entre == e === true

  16. Conceitos básicos • Diferença entre == e === false

  17. Caixas de diálogo • Alerta • Caixa de dialogo para exibir mensagens, possui apenas o botão OK. • alert(“Mensagem”); • Caixa de Confirmação • Caixa de dialogo para tomada de decisão, possui o botão OK e Cancelar, retornando true e false respectivamente. • var x = confirm(“Mensagem”); • Caixa de Entrada de dados • Caixa de diálogo para entrada de dados, o valor deve ser armazenado em uma variável. • var x = prompt(“Mensagem”, “valor inicial opcional”);

  18. Caixas de diálogo • confirm e alert

  19. Caixas de diálogo • prompt

  20. Conversão de tipos • Funções para conversão • parseInt( ); • Converte uma string em inteiro var x = “10kg”; var y = parseInt(x); // y é igual a 10 • parseFloat( ); • Converte uma string em número real var x = “5.5m”; var y = parseInt(x); // y é igual a 5.5 • toString(); • Converte uma variável numérica em string var x = 10; var y = x.toString(); // y é igual a “10”

  21. Conversão de tipos • Convertendo valores da entrada (prompt)

  22. Funções • Trechos de código que podem ser acionados através de uma chamada ou de um evento; • Uma função pode ou não retornar uma resposta para o ponte em que foi chamada, caso necessite de um retorno, utilizamos a comando return.

  23. Funções • Função que soma dois números e retorna o resultado.

  24. Funções • Disparando função com um evento

  25. Eventos • Os eventos são ações que o usuário faz em uma página e que são associados geralmente às funções do JavaScript ou às funções que nós criamos em nossos códigos JavaScript.

  26. Eventos • Principais eventos

  27. Eventos • Onload() e onchange(), em um arquivo externo eventos.js

  28. Eventos • Oninput, novo evento do HTML5 (acionado assim que um novo caracter for inserido no campo)

  29. Exercício • Crie uma calculadora HTML e funções JavaScript para simular o comportamento de uma calculadora real. • Dicas: • Os botões com números concatenam seu valor no valor do campo, como strings; • Use a seguinte estrutura de funções, a serem acionadas pelos botões.

More Related