Aula 3 - HTML e JavaScript - Linguagem Web

Prévia do material em texto

*
*
Programação para WEB I
Luiz Artur Botelho da Silva
luiz.silva@fafica-pe.edu.br
*
*
Conteúdo Programático
Unidade I
Utilizando CSS nas páginas ;
Utilizando Javascript nas páginas (exemplos diversos contextos de uso);
*
*
JavaScript
*
*
INTRODUÇÂO JavaScript
JavaScript foi criada pela Netscape em parceria com Sun Microsystems;
Seu principal proposito é adicionar interatividade a uma página Web;
JavaScript é uma linguagem desenvolvida para rodar no lado cliente;
Seu funcionamento depende das funcionalidades hospedadas no navegador do usuário;
*
*
INTRODUÇÂO JavaScript
Linguagem de programação interpretada (scripting), baseada em objetos e sem declaração de tipos.
Permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language).
As páginas HTML podem ser escritas utilizando-se editores de texto, como:
NotePad; Write, etc. 
Porém, existem editores próprios para gerar HTML
*
*
O que é JavaScript?
É uma linguagem de programação usada para manipular, personalizar e automatizar as funcionalidades de um sistema existente.
Essas funcionalidade já se encontram disponíveis por meio de uma interface de usuário e a linguagem de script provê um mecanismo para acessá-las.
*
*
Os browsers mais divulgados (Internet Explorer, Netscape, etc.) são interpretadores de código JavaScript
Usar JavaScript em conformidade com os Padrões Web implica, entre outras práticas, que, na ausência de um interpretador JavaScript, não se comprometa o acesso ao conteúdo.
JavaScript
*
*
JavaScript
É uma linguagem capaz de simular muitos dos fundamentos de OOP (Programação orientado a objetos);
OOP é um paradigma (estilo) de programação que usa analogia com objetos do mundo real e suas características para definir estruturas de dados agrupados em atributos e métodos;
*
*
Manipular o navegador
Com JavaScript, podemos controlar o comportamento do navegador em diversos aspectos:
Criar janelas pop-up;
Apresentar mensagens ao usuário;
Alterar as dimensões do navegador;
Interferir na barra de status;
Retirar menus;
Fechar e abrir janelas; 
Dentre outros.
*
*
Interagir com formulários
JavaScript é capaz de acessar os campos e valores digitados em um formulário HTML;
Pode-se também:
Validar os dados para checar inconsistências;
Realizar cálculos;
Fornecer dicas de preenchimento dos campos.
*
*
Interagir com outras linguagens dinâmicas
JavaScript pode ser usada em conjunto com outras linguagens para cumprir tarefas complementares relacionadas ao fluxo da programação;
Ex.:
		JavaScript com JSP
*
*
JavaScript em conformidade com os Padrões Web
Possui 2 princípios básicos que norteiam o seu uso:
JavaScript não obstrutivo;
Principio da melhoria progressiva.
Não há uma divisão clara entre eles, na verdade ele se completam;
*
*
JavaScript não obstrutivo
Implica que o conteudo da página deve estar presente e funcional, ainda que se perca em usabilidade, caso o usuário esteja visualizando o documento em um dispositivo (por exemplo, navegador) sem suporte para JavaScript;
*
*
Principio da melhoria progressiva
Usar a linguagem com o propósito único de incrementar a usabilidade da página;
Segundo esse princípio uma pagina Web deve ser feita em 3 etapas:
Estruturar os conteúdos usando a linguagem HTML. Ao final dessa etapa, todos os conteúdos devem estar disponíveis para qualquer visitante que esteja utilizando qualquer dispositivo de usuário.
*
*
Principio da melhoria progressiva
Incrementar a apresentação da página com o uso das CSS. Essa etapa visa a melhorar a experiência dos usuários aptos a visualizar folhas de estilo;
Introduzir JavaScript com a finalidade de acrescentar interatividade à página, melhorando ainda mais a experiência do usuário;
*
*
Camadas de desenvolvimento
Preconiza a separação dos códigos de desenvolvimento em 3 camadas separadas:
Camada de estruturação de conteúdos constituída pela marcação HTML;
Camada de apresentação constituída pelas folhas de estilos;
Camada de comportamento constituída pelos scripts que determinam comportamentos como scripts desenvolvidos com JavaScript.
*
*
Camadas de desenvolvimento
Desenvolver segundo o princípio da separação das camadas de desenvolvimento implica escrever os códigos específicos de cada camada em arquivos separados e estabelecer a conexão entre eles com o uso de Links.
*
*
Camadas de desenvolvimento
As principais vantagens de adotar a prática de separação das camadas são:
Elimina a necessidade de repetição de código em diferentes páginas;
Facilita o reaproveitamento de trechos de código em outros projetos (reuso);
Facilita a busca e correção de eventuais bugs nos códigos;
Facilita a manutenção e o entendimento dos códigos;
*
*
Os parágrafos de lógica do javaScript podem estar "soltos" ou atrelados a ocorrência de eventos. 
Os parágrafos soltos são executados na seqüência em que aparecem na página (documento) e os atrelados a eventos são executados apenas quando o evento ocorrer. 
JavaScript
*
*
Para inserir parágrafos de programação dentro do HTML é necessário identificar o início e o fim do set de JavaScript, da seguinte forma: 
<SCRIPT> 
Set de instruções 
</SCRIPT> 
	Procedimento a ser adotado em qualquer local da página.
JavaScript no HTML
*
*
JavaScript no HTML
Arquivos escritos com o uso dessa linguagem devem ser gravados com a extensão .JS e são criados para serem executados dentro de um arquivo HTML.
Existem 3 maneiras de se inserir JavaScript em um documento HTML
Inline: inserir o script diretamente na seção body do documento;
Incorporado: Inserir o script na seção head do documento;
Externo: Escrever o script em um arquivo externo e inserir com um link na seção head do documento.
*
*
JavaScript Inline
*
*
JavaScript Incorporado
*
*
JavaScript Externo
*
*
Para melhor visualização e facilidade de manutenção, recomenda-se que toda a lógica seja escrita no início do documento.
Funções devem ser invocadas quando se fizer necessário (normalmente atreladas a eventos). 
JavaScript
*
*
Se a lógica é escrita a partir de um determinado evento, não é necessário o uso dos comandos <SCRIPT> e </SCRIPT>. 
Os comandos JavaScript são sensíveis ao tipo de letra (maiúsculas e minúsculas) em sua sintaxe – sensitive case. 
JavaScript
*
*
Observação importante:
	Se houver erro de sintaxe no comando, o JavaScript interpretará, o comando, como sendo o nome de uma variável. 
JavaScript
*
*
Caixas de diálogo
Caixa de diálogo é uma janela do tipo pop-up que se destina a fornecer informações ou coletar dados do usuário.
A linguagem JavaScript possui 3 métodos (ou funções), para o objeto Window, destinadas a criar 3 tipos de caixa de diálogo:
Caixa de alerta;
Caixa de confirmação;
Caixa de diálogo para entrada de string; 
*
*
Caixa de alerta
Destina-se a colocar na interface do usuário uma caixa de diálogo contendo uma mensagem;
*
*
Caixa de confirmação
Destina-se a colocar na interface do usuário uma caixa de diálogo contendo 2 botões, normalmente denominado OK e Cancelar, e ao clicar um deles, ele confirma ou cancelar uma determinada ação.
*
*
Caixa de diálogo para entrada de String
Destina-se a colocar na interface do usuário uma caixa de diálogo contendo um campo para que ele digite um texto.
*
*
Escrever HTML com JavaScript
O método write() do objeto document destina-se a escrever marcação HTML com uso de JavaScript.
*
*
Comentários
São pequenos textos que o desenvolvedor insere ao longo do script com a finalidade de facilitar o entendimento e a manutenção do código;
JavaScript admite 3 tipos de marcadores para comentários:
Comentário em linha única;
Comentário em linha única (variante 2);
Comentário em múltiplas linhas;
*
*
Comentários
Comentário em linha única;Comentário em linha única (variante 2);
Comentário em múltiplas linhas;
*
*
Variáveis, Tipos de Dados, e Operadores
Use var para declarar variáveis
JavaScript tem três tipos simples:
String, Number, and Boolean
Variáveis pordem assumer valores undefined ou null
JavaScript suporta muitos operadores
Aritmético, atribuição, comparação, booleano, condicional e de texto (string)
var answer = 3;
var actuallyAsString = "42";
var noValue; // noValue tem o valor undefined
var nullValue = null; // null é diferente de undefined
*
*
Funções
Functions são blocos nomeados de código reusável
Argumentos são acessíveis somente dentro das funções
Uma function pode retornar um valor
Uma function pode declarar variáveis locais
Variáveis Globais definidas for a de uma função ficam disponíveis para todas as funções em scripts referenciados pela página
function aName( argument1, argument2, …, argumentN ) {
 statement1;
 statement2;
 …
 statementN;
}
*
*
Estruturas condicionais
JavaScript prover duas construções condicionais:
if:
if (TotalAmountPaid > AdvancePaid) {
 GenerateNewInvoice();
} else {
 WishGuestAPleasantJourney();
}
*
*
COMANDOS CONDICIONAIS
Operadores ternários 
	receptor = ( (condição) ? verdadeiro : falso) 
Ex. 
	NomeSexo = ((VarSexo == "M") ? "Masculino" : "Feminino") 
*
*
Estruturas condicionais
switch:
var RoomRate;
switch (typeOfRoom) {
 case "Suite":
 RoomRate = 500;
 break; 
 case "King":
 RoomRate = 400;
 break;
 default:
 RoomRate = 300;
}
*
*
Loops
JavaScript prover três construções de loops
while:
do while:
for:
while (GuestIsStillCheckedIn())
{
 numberOfNightsStay += 1;
}
do {
 eatARoundOfToast();
} while (StillHungry())
for (var i=0; i<10; i++) {
 plumpUpAPillow();
}
*
*
IMPORTANTE SABER
Em FOR e WHILE:
	pode-se usar a diretiva "break" para interromper a condição principal e sair do loop;
	e a diretiva "continue“ para interromper uma ação (se determinada condição ocorrer) e voltar para o loop. 
	Diretivas/condições entre [ ] são opcionais.
*
*
OPERADORES LÓGICOS
São operadores a serem utilizados em comandos condicionais (IF , FOR e WHILE), 
São eles: 
				
= = Igual 
!= Diferente 
>= Maior ou Igual 
< Menor 
<= Menor ou Igual 	
&& E 
|| Ou 
*
*
OPERADORES MATEMÁTICOS
São eles: 
+ adição de valor e concatenação de strings 
- subtração de valores 
* multiplicação de valores 
/ divisão de valores 
% obtém o resto de uma divisão: 
Ex: 	150 % 13 retornará 7 
		7 % 3 retornará 1 
*
*
OPERADORES MATEMÁTICOS
+= concatena/adiciona à string/valor já existente. 
Ex:	x += y é o mesmo que x = x + y 
		da mesma forma podem ser utilizados: 
		-= , *= , /= ou %=. 
Um contador pode ser simplificado utilizando-se : 
	X++ ou X– o que equivale as expressões: 
	
	X = X + 1 ou X = X - 1 respectivamente. 
Para inverter sinal: X = -X ( -  + ou +  -). 
*
*
CONTROLES ESPECIAIS
\b - backspace 
\f 	- form feed 
\n	- new line caracters 
\r 	- carriage return 
\t 	- tab characters 
// 	- Linha de comentário 
/*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentário. 
Os delimitadores naturais para uma string são: " ou ' . 
Para utilizar estes caracteres como parte da string, utilize: 	\ precedendo " ou '. 
Ex. alert (“Experimente o uso de \" ou \' em uma string")
*
*
Usando Objetos
JavaScript tem uma série de tipos de objetos nativos:
String, Date, Array, RegExp
JavaScript prover tipos singleton utilitários:
Math
var re = new RegExp("[dh]og"); 
if (re.test("dog")) {...}
var seasonsArray = ["Spring", "Summer", "Autumn", "Winter"];
…
var autumnLocation = seasonsArray.indexOf("Autumn");
*
*
Definindo Arrays de Objetos usando JSON
JSON é um formato para serializar objetos:
JavaScript prover APIs para serializar e converter dados JSON
var attendees = [
 {
 "name": “Eric Gruber",
 "currentTrack": "1"
 },
 {
 "name": “Martin Weber",
 "currentTrack": “2"
 }
]
*
*
O Document Object Model
O DOM fornece uma API programática para controlar um navegador e acessar o conteúdo de uma página web:
Encontrar e definir os valores dos elementos em uma página
Manipulação de eventos para controles em uma página
Modificar os estilos associados com elementos
Serialização e desserialização de uma página como um documento XML
Validar e atualizar páginas da Web
*
*
Encontrando Elementos no DOM
*
*
EVENTOS 
São fatos que ocorrem durante a execução do sistema, a partir dos quais o programador pode definir ações a serem realizadas pelo programa. 
	
	Segue exemplo...
*
*
Associando código JavaScript ao clique no botão
<html> <head> <title>Clicar no botão</title>
</head> <body>
 <input type="button"
 value="Clique aqui"
 onclick='alert("Ola");'
 /> </body> </html>
Quando for dado um clique no botão é executado o código (em JavaScript), neste caso:
alert("Ola");
<html> <head> <title>Clicar no botão</title>
</head> <body>
 <input type="button"
 value="Clique aqui"
 onclick='alert("Ola");'
 /> </body> </html>
Quando for dado um clique no botão é executado o código (em JavaScript), neste caso:
<html> <head> <title>Clicar no botão</title>
</head> <body>
 <input type="button"
 value="Clique aqui"
 onclick='alert("Ola");'
 /> </body> </html>
Quando for dado um clique no botão é executado o código (em JavaScript), neste caso:
<html> <head> <title>Clicar no botão</title>
</head> <body>
 <input type="button"
 value="Clique aqui"
 onclick='alert("Ola");'
 /> </body> </html>
*
*
Eventos
Um evento é gerado como resultado de uma ação:
Um clique,
Um movimento do mouse,
Uma seleção de texto,
O abandono da página
etc.
O tratamento de eventos é feito por partes de código associadas a eventos específicos
*
*
Exemplo
<html> <head> <title>Clicar no botão</title>
</head> <body onload = 'load()' >
 <input type="button"
 value="Clique aqui"
 onclick= 'touch()'
 /> </body> </html>
Quando o documento for carregado (a página estiver visível) é chamada a função load()
*
*
Tipos de Eventos
onload - Ocorre na carga do documento. Ou seja, só ocorre no BODY do documento.
onunload - Ocorre na descarga (saída) do 	 documento. Também só ocorre no BODY. 
onchange - Ocorre quando o objeto perde o focus e houve mudança de conteúdo. 
Válido para os objetos Text, Select e Textarea.
*
*
Tipos de Eventos
onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudança. 
	Válido para os objetos Text, Select e Textarea. 
onfocus - Ocorre quando o objeto recebe o focus. 
	Válido para os objetos Text, Select e Textarea. 
onclick - Ocorre quando o objeto recebe um Click do Mouse. 
Válido para os objetos Buton, Checkbox, Radio,
Link, Reset e Submit. 
*
*
Tipos de Eventos
onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. 
	Válido apenas para Link. 
onselect - Ocorre quando o objeto é selecionado. 
	Válido para os objetos Text e Textarea. 
onsubmit- Ocorre quando um botão tipo Submit recebe um click do mouse. 
	Válido apenas para o Form.
*
*
Eventos dos objetos HTML
Objetos com representação visual
Todos exceto: <br>, <head>, <html>, <script>, <style>, <title>	
onclick	Clique no botão mouse
ondblclick	Duplo clique no mouse
onkeydown	Tecla pressionada
onkeypress	Tecla pressionada e liberada
onkeyup	Tecla liberada
onmousedown	Botão do mouse pressionado
onmouseup	Botão do mouse libertado
onmouseover	Mouse sobre o objeto
onmousemove	Mouse movido do objeto
onmouseout	Mouse saiu do objeto*
*
Variáveis
*
*
Criando Variáveis
*
*
Criando Variáveis
*
*
Palavras Reservadas
*
*
Objetos em JavaScript
*
*
Acessando o objeto Document
*
*
Objetos predefinidos
*
*
Escrevendo no Documento
*
*
Funções
*
*
Funções
*
*
Exemplo de Função
*
*
Exemplo de Função
*
*
Exemplo de Função
*
*
Exemplo de Função
*
*
Funções Intrínsecas
*
*
Funções Matemáticas
*
*
Funções Matemáticas
*
*
Criando novas instâncias
*
*
Exemplo criando instâncias
*
*
Criando novas instâncias
*
*
Manipulando String’s
*
*
Manipulando String’s
*
*
Manipulando String’s
*
*
Manipulando Datas
*
*
Manipulando Datas
*
*
Manipulando Datas
*
*
Interagindo com o usuário
*
*
Interagindo com o usuário
*
*
Interagindo com o usuário
*
*
Objeto Input Text
*
*
Objeto Input Text
*
*
Objeto Input Password
*
*
Objeto Input Password
*
*
Objeto Input Password
*
*
Objeto Input Hidden
*
*
Objeto Input Hidden
*
*
Objeto Input CheckBox 
*
*
Objeto Input CheckBox 
*
*
Exemplo Input CheckBox 
*
*
Exemplo Input CheckBox 
*
*
Objeto Input Radio
*
*
Objeto Input Radio
*
*
Objeto Input Radio
*
*
Objeto Input BUTTON 
*
*
Ex.: 
*
*
Objeto Input RESET
*
*
Ex.: 
*
*
Objeto Input SUBMIT
*
*
Objeto Input SUBMIT
*
*
Ex.:
*
*
Ex.:
*
*
Objeto TEXTAREA
*
*
Ex.: 
*
*
Objeto SELECT
*
*
Objeto SELECT
*
*
 
	Neste exemplo é importante observar os seguintes aspectos: 
a) A lista permite apenas uma seleção 
b) A quarta opção aparecerá inicialmente selecionada (propriedade "selected") 
c) Não foi utilizado a propriedade "value". 
	Logo, a propriedade "text" e a propriedade "value" teram o mesmo valor igual ao valor externo que aparece na tela. 
Ex: 
*
*
	<script> 
	function Verselect(Campo) { 
	Icombo = Campo.selectedIndex 
	alert ("Voce escolheu " + Campo.options[Icombo].text) } 
	</script> 
Ex: 
*
*
	
 <p> 
	Objeto Select <select name="Combo1" size=1 onchange="Verselect(Combo1)"> 
	<option>Opcao 1 
	<option>Opcao 2 
	<option>Opcao 3 
	<option selected>Opcao 4 (recomendada) 
	<option>Opcao 5 
	<option>Opcao 6 
	</select> 
	</p> 
Ex: 
*
*
Neste exemplo é importante observar os seguintes aspectos: 
a) A lista permite múltiplas seleções 
b) Utilizou-se a propriedade "value". 
	Assim as propriedades "text" e "value" têm valores 	diferentes: 
	text retornará Escolha1 a Escolha4 e 
	value 	retornará List1 a List4. 
c) O parâmetro passado, quando da ocorrência do evento 	onblur, foi this. 
	Esta diretiva significa que estamos passando este 	objeto. 
Ex2.: 
*
*
	<script> 
	function Vermult(Lista) { 
	var opcoes = "" 
	for (i = 0 ; i < Lista.length ; i++) { 
	if (Lista.options[i].selected) { 
	opcoes += (Lista.options[i].value + ", ") } 
	} 
	alert ("As opcoes escolhidas foram : " + opcoes) } 
	</script> 
Ex2.: 
*
*
	<p> 
	Objeto Select2 <select name="Combo2" size=4 multiple onblur="Vermult(this)"> 
	<option value="List1">Escolha1 </option> 
	<option value="List2">Escolha2 </option> 
	<option value="List3">Escolha3 </option> 
	<option value="List4">Escolha4 </option> 
	</select> 
	</p> 
Ex2.:
Emphasize that variables in JavaScript are essentially typeless; you do not specify the type when you declare a variable. Use the typeof operator to determine the type of value a variable currently holds.
Mention to C# developers that the scoping rules of variables in JavaScript are different from those of C# (scoping is covered in more detail in Module 7).
You may want to allow some time to explain the ++ and -- operators when they prefix or suffix a variable. For example, x= ++y will lead to different values of x and y from x= y++ and the same for x= --y and x=y--.
It is also worth noting that JavaScript code is executed immediately, in the order it is found on the page, unless it is located in a function or it is defining an object. For example, a document.write statement would execute as soon as it is found in a script element on a page.
*
20480B
3: Introduction to JavaScript
In this topic, only discuss the pass-by-value mechanism for arguments. Do not go into the details of reference variables, which are covered in a later module.
If time allows, mention the arguments array, which enables a developer to create a function that takes a variable number of parameters. Also, highlight to C++, C#, and Visual Basic developers that JavaScript does not implement function overloading. If you define a function that takes two arguments, and then define another function with the same name that takes three arguments, the new function definition replaces the old one.
*
20480B
3: Introduction to JavaScript
Highlight the block-structured nature of these statements, and draw attention to the break statement in a switch block. Plenty of bugs have occurred as a result of this statement being accidentally omitted, and C# programmers may be surprised to discover that break is actually optional (although C and C++ developers will not be surprised).
Also, mention the syntax of conditions; they must be enclosed in round brackets.
*
20480B
3: Introduction to JavaScript
Highlight the block-structured nature of these statements, and draw attention to the break statement in a switch block. Plenty of bugs have occurred as a result of this statement being accidentally omitted, and C# programmers may be surprised to discover that break is actually optional (although C and C++ developers will not be surprised).
Also, mention the syntax of conditions; they must be enclosed in round brackets.
*
20480B
3: Introduction to JavaScript
Highlight the importance of keeping code clear and concise, especially if loops contain nested loops and other programming constructs.
*
20480B
3: Introduction to JavaScript
Although the slide cannot cover all the object types in detail, be prepared to give a few examples on the whiteboard. You may also need to explain the use of the new operator (briefly), although a more detailed discussion is provided in module 7.
Also, draw the distinction between the object types that are used to declare variables and the singleton types that act as repositories for functionality.
Make sure that students understand how to use arrays, and find items in an array by using the indexOf function as this is required by the lab.
*
20480B
3: Introduction to JavaScript
Highlight how JSON uses object literal notation to define an array of objects. Also mention the JSON.parse() and JSON.stringify() functions.
*
20480B
3: Introduction to JavaScript
This module concentrates on the DOM Core API and the DOM Event Model. Refer students to the W3C website for details of the other DOM APIs.
*
20480B
3: Introduction to JavaScript
Mention that the getElementById and getElementsByName methods are the most commonly used ways of obtaining a reference to an element.
*
20480B
3: Introduction to JavaScript