Aula 08 SINTAXE JAVASCRIPT; ORIENTAÇÃO A OBJETOS COM JAVASCRIPT

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

DESENVOLVIMENTO DE SISTEMAS WEB
Prof. Jorge Ferreira
Aula 8
Conteúdo Programático
Rotinas básicas em JavaScript
Orientação a Objetos com JavaScript
2
Rotinas Básicas com JavaScript
A forma de programar em que simplesmente se ordena coisas para serem executadas em sequência.
3
Rotinas Básicas com JavaScript
JavaScript é uma linguagem de programação utilizada para criar pequenos programas encarregados de realizar ações dentro do âmbito de uma página web.
Com JavaScript podemos criar efeitos especiais nas páginas e definir interatividades com o usuário.
O navegador é o encarregado de interpretar as instruções JavaScript.
4
Rotinas Básicas com JavaScript
O mais importante e básico que podemos destacar neste momento é que a programação de JavaScript se realiza dentro do próprio documento HTML.
Isto quer dizer que na página se misturam as duas linguagens.
Usamos delimitadores <script> e </script>
5
Vamos Praticar
6
Rotinas Básicas com JavaScript
<script>
<!- -
 código javascript
//- - >
</script>
7
Nem todos os navegadores da web compreendem o código JavaScript. Nos casos em que não interpretam os scripts, os navegadores assumem que o código destes é o texto da própria página web e como consequência, apresentam os scripts na página web como se tratasse de um texto normal.
Para evitar que o texto dos scripts se escreva na página, temos que ocultá-los com comentários HTML.
Existem três maneiras de executar
Execução direta de scripts;
Execução como resposta a uma ação;
Através de arquivos externos.
8
Comentários
Um comentário é uma parte de código que não é interpretada pelo navegador e cuja utilidade radica em facilitar a leitura ao programador.
O programador, a medida que desenvolve o script, vai deixando frases palavras soltas, chamadas comentários que ajudam a ele ou a qualquer outro a ler mais facilmente o script na horta de modificá-lo ou depurá-lo.
9
Rotinas básicas com JavaScript
10
<script>
// Este é um comentário de uma linha
/* Este comentário pode se expandir por vários linhas. */
</script>
11
<script type="text/javascript"> 
<!-
 
var num1;var num2; 
num1= prompt("Entre Valor 1", 'Aqui'); 
num2= prompt("Entre Valor 2", 'Aqui'); 
if(num1>num2) 
document.write("O primeiro é maior "); 
else 
document.write("O segundo é maior "); 
//--> 
</script>
12
<script type="text/javascript"> 
<!-
var dia = “Segunda-feira”;
if (dia == "Segunda-feira") 
   document.write ("Que tenha um ótimo 
começo de semana")
 
//--> 
</script>
Orientação a objetos com JavaScript
Um objeto é uma coisa que agrupa variáveis (aqui chamadas de atributos) e funções (aqui chamadas de métodos).
A grande vantagem ao usar objeto é que, além de agruparmos coisas que têm a ver entre si, elas passam a ser mais integradas.
Um atributo é acessado com um ponto depois de nome do objeto, seguido do próprio atributo.
13
14
JavaScript implementa, até certo ponto, as vantagens da programação Orientada a
Objetos, permitindo seu uso.
15
Estrutura with
Se você pretende tratar um só objeto, pode
utilizar o comando
with, utilizado assim:
with (exemplo) {
cor = "white"
andar()
}
Orientação a objetos com JavaScript
Isso colabora para que você poupe tempo e caracteres, 
o que pode ser muito importante em 
JavaScript, já que tudo vai ser
transferido pela rede antes de ser interpretado.
16
17
Um método também é acessado dessa forma, mas com parênteses depois. 
Enfim, é tudo quase igual. Assim, os 
comandos a seguir são válidos.
exemplo.cor = "white“
exemplo.andar()
mensagem = (exemplo.arCondicionado) ? "Tem ar condicionado" : "Não tem ar condicionado".” 
18
A Criação de Classes
Em JavaScript Orientado a Objeto, uma classe é apenas uma função.
A única coisa que difere é que nesta função você utilizará o this para agregar atributos e métodos. 
O this referencia não somente a própria classe, mas o objeto específico durante sua execução. 
Para adicionar um atributo, basta escrever this.nomeDoAtributo. 
19
Se for um objeto, você deve instanciá-lo:
this.lista = new Array(). 
Para adicionar um método, você deve utilizar a forma de definição de função: 
this.escreve = function() { document.write( this.texto ) } 
define um método escreve que escreverá o conteúdo do atributo texto deste objeto.
20
Composição
É muito simples o conceito. Tão simples que não há muito o
que falar. 
Um objeto é uma variável. 
Uma classe pode definir atributos, que são variáveis. 
Por consequencia, um atributo pode também ser um objeto e esse o ponto chave. 
É só colocar this.atributo = new Classe(params) e pronto..
21
Herança
A herança, é quando queremos dizer que uma classe A é, de certa forma, uma especialização da classe B.
Um dos exemplos mais clássicos disso é o de Pessoa. 
Vamos supor uma classe Pessoa.
Ela teria como atributos nome, endereço, telefone, e-mail...
22
Agora queremos uma Pessoa Física. 
Basta acrescentarmos o CPF e outras coisas mais. 
Uma Pessoa Jurídica teria o CNPJ. 
No final, a classe Pessoa deveria ter o que há em comum entre Pessoas Físicas e Jurídicas. 
Usando herança, nós não precisaremos re-escrever tudo, basta dizermos que PessoaFisica, apesar de ter CPF e outras coisas, é uma Pessoa. 
23
O mesmo com Pessoa Jurídica.
JavaScript possui um jeito particular de se definir isso:
com o protótipo da função (é o construtor da classe, mas para o JavaScript ainda é uma função). 
O acesso é na forma:
constructorDaClasse.prototype = new construtorDaClasseMae.
Apenas isso. Sem parênteses. Lembre que em 
JavaScript o construtor da classe é o próprio nome da classe.
24
Vamos supor que já existe uma classe Pessoa, inclusive com um 
método escrever() que escreve na tela todos os seus dados na forma
Campo: Valor
25
function PessoaFisica() {
this.cpf
this.setCPF(n) {
this.cpf = n
}
this.escrever() {
parent.escrever()
document.write("CPF: " +
this.cpf + "\<BR\>")
}
}
26
Para dizer que uma pessoa física é também uma pessoa, devemos escrever (depois de escrita toda a classe) a linha:
PessoaFisica.prototype = new Pessoa
Com isso temos que uma pessoa física é também uma pessoa.
Outra coisa interessante que ainda não foi dita é o parent. 
É a forma de acessar métodos da classe-mãe. 
A chamada que está na classe PessoaFisica significa:
Classe-mãe.escrever()
Vamos Praticar
27
Resumindo
28
Rotinas básicas com JavaScript;
 Orientação a Objetos com JavaScript. .