Desenvolvimento de Sistemas Web com JavaScript

Prévia do material em texto

- -1
DESENVOLVIMENTO DE SISTEMAS WEB
SINTAXE JAVASCRIPT; ORIENTAÇÃO A 
OBJETOS COM JAVASCRIPT
- -2
Olá!
Ao final desta aula, você será capaz de:
1. ter noções da tecnologia do lado do cliente: JavaScript; 2. compreender os fundamentos da linguagem; 3. criar
rotinas básicas; 4. ter noções de orientação a objetos com JavaScript.
Nesta aula, abordaremos a linguagem JavaScript® (uma das tecnologias do lado do cliente), explicando suas
características, princípios básicos da lógica e da sintaxe. Estudaremos, também, os fundamentos de orientação a
objetos aplicados na linguagem JavaScript.
1 Introdução ao JavaScript
HTML é uma linguagem declarativa (e não de programação) criada para estruturar páginas de hipertexto através
de marcadores que descrevem a função de blocos de texto. HTML é uma linguagem voltada para definir a
estrutura de documentos.
Não se trata, também, de uma linguagem de formatação, pois a aparência dos documentos não pode ser
completamente controlada. Sendo necessária, assim, a utilização de linguagem complementar, como, por
exemplo, Folhas de Estilo.
As vieram para atender a duas demandas em especial: processamento no lado cliente; elinguagens Script1
controle do navegador. JavaScript é uma linguagem de programação interpretada (linguagem script) com1 
características de orientação a objetos. Desenvolvida pela a fim deNetscape Communications Corporation®
estender as capacidades de por ela desenvolvido. Permite que conteúdo executável seja incluído embrowser
páginas web. É sintaticamente semelhante a C e C++. Trata-se de uma linguagem que diferencia letras
maiúsculas de minúsculas. Palavras-chave e identificadores (por exemplo, nomes de funções e de variáveis)
devem ser escritos obedecendo a esta regra. Por exemplo, a palavra-chave function deve ser escrita exatamente
dessa forma e não como Function ou FUNCTION.
Sendo assim, hoje os documentos transferidos para as máquinas dos usuários podem possuir além das
instruções HTML, programas inscritos em linguagem script. Estes scripts inseridos nas páginas HTML são, na
maioria das vezes, utilizados para: validação de campos de formulários; execução de animações ou realização de
efeitos visuais.
- -3
2 JavaScript: Tipos de dados
Tipos Numéricos
Todos os valores numéricos são "declarados" pela simples atribuição dos valores a uma variável.
Exemplos:
Inteiros:
var x = 27; //atribuição na forma comum var y = 0543; //notação octal que equivale a 357
Booleano
Uma variável do tipo booleano pode assumir apenas 2 (dois) valores: true e false. Os valores deste tipo são,
geralmente, utilizados como resultado de comparações e podem ser usados pelo usuário para valores de teste ou
para atributos que possuam apenas 2 (dois) estados. Equivale ao uso de um inteiro com valores 0 ou 1 na
linguagem C. O JavaScript converte automaticamente true para 1 e false para 0 quando isso for necessário.
Exemplos:
Indefinido
Na programação JavaScript, há 2 (dois) tipos de variáveis indefinidas:
• O primeiro tipo de variável indefinida é um tipo que nunca foi declarado. Ao tentarmos ler um valor dessa
variável não declarada, haverá um erro em tempo de execução.
• O segundo tipo é aquela que foi declarada, entretanto nunca teve um valor atribuído a ela. Ao ler o valor de
uma variável deste tipo, teremos seu valor default, padrão: undefined; Exemplo:
- -4
null
Ausência de valor. Quando atribuímos null a um objeto ou variável significa que essa variável ou objeto não
possui valor válido. Exemplo:
String
Sequência de caracteres. Em JavaScript; a string pode ser tanto um tipo primitivo de dado como um objeto.
Exemplo:
Arrays
: Arrays pares do tipo inteiro-valor para se mapear valores a partir de um índice numérico. Os são objetosArrays
com métodos próprios.
Exemplo: A coleção de nomes ('Ana Cristina', 'Ana Lúcia', 'André Luiz', 'Andresa', 'Cilmara') pode ser criada da
seguinte forma:
- -5
Exemplo: podem ser facilmente estendidos em JavaScript. Veja abaixo:Arrays
3 JavaScript: Operadores
As tabelas a seguir mostram os principais operadores:
Aritméticos:
- -6
Comparação:
BIT a BIT:
- -7
Atribuição:
Lógicos:
- -8
4 JavaScript: Estruturas de controle
Existem algumas estruturas de controle que permitem a modificação do fluxo de execução de um programa. Elas
permitem a execução do código baseado em condições lógicas ou um número determinado de vezes.
If-Else
If-Else – Exemplo:
No código, se a expressão for avaliada como verdadeira, o primeiro bloco de comandos é executado. Caso seja
avaliada como falsa, o bloco de comandos após o else será executado.
Dica: Os comandos If-Else e Switch são instruções que permitem a tomada de decisão se uma determinada
condição for satisfeita.
Switch... case
Switch... case – Exemplo:
- -9
Esta instrução é bem semelhante a uma estrutura IF, porém é mais eficiente em razão de ser mais simples sua
utilização e seu entendimento.
While
While:
Esta instrução realiza uma ação enquanto determinada condição for satisfeita. Sua sintaxe básica é:
while (expressão) {
comandos
}
Exemplo: No trecho de código abaixo, o laço while é repetido por 10 (dez) vezes:
num=0;
while(num<10){
document.write("Número: "+num+"<br>");
num++;
}
For
For:
Esta instrução realiza uma ação até que determinada condição seja satisfeita. Sua sintaxe básica é:
for (início;condição;incremento) {
comandos
}
Exemplo: Segue, abaixo, um exemplo prático de utilização do laço for que conta valores de 1 até 10,
acrescentando um valor de cada vez:
- -10
<script>
for (i=1 ; i<=10 ; i++){
document.write("número: "+ i +"<br>");
}
</script>
5 JavaScript: Funções
As funções podem ser definidas como um conjunto de instruções, agrupadas para executar uma determinada
tarefa. Dentro de uma função pode existir uma chamada a outra função.
As funções podem ou não retornar alguma informação, o que é feito com o comando Return.
A definição de uma função é feita da seguinte forma:
Function NomeDaFunção([parâmetro1, parâmetro2, .... , parâmetroN])
{
...
[Return(ValorDeRetorno)]
}
6 JavaScript: Caixas de Diálogo
Mostra uma caixa de alerta (com o botão OK ) com a string "mensagem". Útil para depurar o script. Exemplo:
alert("Mensagem enviada!");
- -11
Mostra uma caixa de diálogo com os botões "OK" e "Cancelar" e com a string "mensagem". Retorna true se
selecionado "OK" ou false se selecionado "Cancelar". Exemplo:
if(confirm("Apaga todos os dados?")){
document.write("Apagando...");
} else {
document.write("Cancelado!");
}
Mostra uma caixa de diálogo, um campo de texto, e os botões "OK" e "Cancelar". Retorna a string digitada no
campo de texto ou NULL se cancelado. Exemplo:
nome=prompt("Digite seu nome, por favor:","Aluno");
if(!nome){
alert("Bem-vindo, anônimo!");
} else {
alert("Bem-vindo, caro(a) "+nome);
}
- -12
7 JavaScript: Orientação a Objetos
Ao contrário de uma variável, um objeto pode conter diversos valores e de tipos diferentes nele armazenados
(atributos). E, também, pode possuir funções que operem sobre esses valores (métodos). Tanto os atributos,
quanto os métodos, são chamados de do objeto.propriedades
Para criar um objeto, basta invocar seu construtor através do operador new.
Para acessar uma propriedade de um objeto, basta usar e no caso de métodos adicionar oobjeto.propriedade
operador ().
Podemos definir um construtor para um objeto, assim como, também, podemos inicializar atributos ao
instanciar o objeto. Para que um construtor inicialize um atributo, ele precisa ser referenciado através da
palavra-chave this.
- -13
Métodos
Prototypes
Quando declaramos ou atribuímos um método no construtor de um objeto, ele ficará disponível para todas as
instâncias criadas a partir desse construtor. Podemos fazer a mesma coisa com o uso da propriedade prototype.
Tudo o que for definido no prototype de um objeto poderá ser referenciado por todas as instâncias desse objeto.
- -14
 AssociativosArrays
array com objetosindexados por valores não numéricos:
- -15
O que vem na próxima aula
Na próxima aula, você vai estudar:
• Validação e Controle de Formulários.
CONCLUSÃO
Nesta aula, você:
• a Linguagem JavaScript: suas características, rotinas básicas; e
• os conceitos básicos da Orientação a Objetos e sua utilização no JavaScript.
Referências
ALBUQUERQUE, F .. A Linguagem JavaScript. Disponível na INTERNET via : //www.url www.cic.unb.br
 Arquivo consultado em: 30/12/2012/~fernando/matdidatico/textosintro/texto09.pdf
FLANAGAN, D. JavaScript – O Guia Definitivo. Porto Alegre: Bookman, 2002.
GRILLO, F.D.N.; FORTES, R.P.M. Aprendendo JavaScript. Disponível na INTERNET via : //www.url www2.icmc.
 Arquivo consultado em: 30/12/2012usp.br/~biblio/BIBLIOTECA/not_did/ND_072.pdf
LIMA, A.G. Apostila JavaScript: Aplicações Interativas para a Web, Minas Gerais: Belo Horizonte, 2006. Disponível
na INTERNET via : // Arquivowww.url www.kingartdesign.com/upload/downloads/08042010122047.pdf
consultado em: 30/12/2012
SENNE, E.L.F. A Linguagem JavaScript. Disponível na INTERNET via : //www.url www.feg.unesp.br/~saad/php
 Arquivo consulta-do em: 01/01/2013./Aula04.pdf
SIQUEIRA, M.J.; DE ALMEIDA, C. Java Script. Disponível na INTERNET via : //lab.ifto.edu.br/~marinaldowww.url
/PROGWEB/aulas/aula_JavaScript_otima.pdf Arquivo consultado em: 01/01/2013
•
•
•
www.url
www.cic.unb.br/~fernando/matdidatico/textosintro/texto09.pdf
www.cic.unb.br/~fernando/matdidatico/textosintro/texto09.pdf
www.url
www2.icmc.usp.br/~biblio/BIBLIOTECA/not_did/ND_072.pdf
www2.icmc.usp.br/~biblio/BIBLIOTECA/not_did/ND_072.pdf
www.url
www.kingartdesign.com/upload/downloads/08042010122047.pdf
www.url
www.feg.unesp.br/~saad/php/Aula04.pdf
www.feg.unesp.br/~saad/php/Aula04.pdf
www.url
	Olá!
	1 Introdução ao JavaScript
	2 JavaScript: Tipos de dados
	3 JavaScript: Operadores
	4 JavaScript: Estruturas de controle
	5 JavaScript: Funções
	6 JavaScript: Caixas de Diálogo
	7 JavaScript: Orientação a Objetos
	O que vem na próxima aula
	CONCLUSÃO
	Referências