1 javascript. 2 javascript introdução fatos sobre javascript embutindo javascript no html ...

27
1 JavaScript

Upload: internet

Post on 21-Apr-2015

181 views

Category:

Documents


3 download

TRANSCRIPT

Page 1: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

1

JavaScript

Page 2: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

2

JavaScriptJavaScript

Introdução Introdução Fatos Sobre JavaScriptFatos Sobre JavaScript Embutindo JavaScript no HTMLEmbutindo JavaScript no HTML Características da Linguagem:Características da Linguagem:

sintaxesintaxeobjetosobjetoseventoseventos

Aplicações no Lado do ClienteAplicações no Lado do Cliente Conectividade com JavaScriptConectividade com JavaScript SegurançaSegurança Conclusão e Exemplos AdicionaisConclusão e Exemplos Adicionais

Page 3: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

3

IntroduçãoIntrodução

Tecnologia desenvolvida pela Netscape Tecnologia desenvolvida pela Netscape em 1995em 1995

Da “vida” às páginas HTML estáticasDa “vida” às páginas HTML estáticas Move algum processamento lógico para o Move algum processamento lógico para o

lado do clientelado do cliente Linguagem de script de alto nível, Linguagem de script de alto nível,

baseada em objetobaseada em objeto Usada por aplicações tanto no lado do Usada por aplicações tanto no lado do

cliente quanto no lado do servidorcliente quanto no lado do servidor

Page 4: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

4

Para que serve JavaScript?Para que serve JavaScript?Realçar páginas HTML estáticasRealçar páginas HTML estáticasDar Interatividade a formuláriosDar Interatividade a formuláriosValidar dados no clienteValidar dados no clienteConectividade com Banco de Conectividade com Banco de

Dados sem CGIDados sem CGI Interligação entre objetos HTML, Interligação entre objetos HTML,

Applets Java, ActiveX, e plug-ins no Applets Java, ActiveX, e plug-ins no lado do clientelado do cliente

Aplicações no lado do ServidorAplicações no lado do Servidor

Page 5: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

5

Fatos Sobre JavaScriptFatos Sobre JavaScriptCódigo embutido na página HTMLCódigo embutido na página HTML

Não gera programa executável do tipo Não gera programa executável do tipo arquivo exearquivo exe

Código interpretado pelo navegadorCódigo interpretado pelo navegadorDependente do navegadorDependente do navegador

Baseado em objetoBaseado em objetoNão aceita herançaNão aceita herança

Page 6: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

6

Fatos Sobre JavaScriptFatos Sobre JavaScript

Guiada por eventoGuiada por eventoRespostas a eventos gerados pelos Respostas a eventos gerados pelos

objetos HTML tais como botões e objetos HTML tais como botões e

caixas de textocaixas de texto

JavaScript NÃO É Java!JavaScript NÃO É Java!Sintaxe semelhante, mas conceitos Sintaxe semelhante, mas conceitos

diferentesdiferentes

Page 7: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

7

Embutindo JavaScript no Embutindo JavaScript no HTMLHTML

O código JavaScript pode também ficar O código JavaScript pode também ficar em um arquivo de texto separado da em um arquivo de texto separado da página HTMLpágina HTML

<SCRIPT SRC=“MyScript.js”></SCRIPT> O código JavaScript pode ser escrito em O código JavaScript pode ser escrito em

qualquer lugar do documento HTML mas qualquer lugar do documento HTML mas é boa prática coloca-lo no cabeçalho do é boa prática coloca-lo no cabeçalho do documento (<Head> ... </Head>)documento (<Head> ... </Head>)

Page 8: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

8

Linguagem JavaScriptLinguagem JavaScript Tipos de dadosTipos de dados

number, Boolean, string ,function, objectnumber, Boolean, string ,function, object linguagem fracamente tipadalinguagem fracamente tipada

VariáveisVariáveis global x localglobal x local To var or Not to varTo var or Not to var?!!?!!

OperadoresOperadores similares aos das linguagens C++ e Java similares aos das linguagens C++ e Java (ex. x (ex. x

+= y é equivalente a x = x + y)+= y é equivalente a x = x + y) Operadores no nível de bits (Bitwise Operators)Operadores no nível de bits (Bitwise Operators) Operadores relacionais (comparações)Operadores relacionais (comparações)

Page 9: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

9

Linguagem JavaScriptLinguagem JavaScript

Controle de fluxo e repetiçãoControle de fluxo e repetição if ... else, while, do ... while, for, with, switch if ... else, while, do ... while, for, with, switch

e case e case break, continue e rotulada.break, continue e rotulada.for ... infor ... in

FunçõesFunçõesretornam valor, retornam expressãoretornam valor, retornam expressãomanipulam argumentos extrasmanipulam argumentos extraspassagem de parâmetro por valor ou por passagem de parâmetro por valor ou por

referênciareferência

Page 10: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

10

Modelo de Objetos Modelo de Objetos JavaScriptJavaScript

JavaScript organiza hierarquicamente os JavaScript organiza hierarquicamente os objetos em uma páginaobjetos em uma página

Objetos JavaScriptObjetos JavaScriptObjetos de navegação:Objetos de navegação:

window, frame, document, form, button, window, frame, document, form, button, checkbox, hidden, fileUpload, password, radio, checkbox, hidden, fileUpload, password, radio, reset, select, submit, text, textarea, link, reset, select, submit, text, textarea, link, anchor, applet, image, plugin, area, history, anchor, applet, image, plugin, area, history, location, navigator.. location, navigator..

Objetos JavaScript x tags HTML. Objetos JavaScript x tags HTML. Objetos predefinidos da linguagemObjetos predefinidos da linguagem

nunca são visíveis na páginanunca são visíveis na página por exemplo: String e Arraypor exemplo: String e Array

Page 11: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

11

Modelo de Objeto Modelo de Objeto JavaScriptJavaScript

Criando um novo objeto:Criando um novo objeto:function Livro(titulo, ...) {function Livro(titulo, ...) {

this.titulo = titulo } this.titulo = titulo } java = new Livro(java, ...)java = new Livro(java, ...)

Objetos de navegaçãoObjetos de navegaçãocriando uma janelacriando uma janela

window.open(URL, Nome, window.open(URL, Nome, "height=400,width=600")"height=400,width=600")

exibindo uma caixa de mensagemexibindo uma caixa de mensagem alert(mensagem)alert(mensagem)

location e historylocation e history

Page 12: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

12

Modelo de Objetos Modelo de Objetos JavaScriptJavaScript

Objeto DocumentObjeto Document<BODY> ... </BODY><BODY> ... </BODY>propriedadespropriedadesmétodosmétodos

Objeto FormObjeto Formreflete um formulário HTML em JavaScriptreflete um formulário HTML em JavaScript<form> ... </form><form> ... </form>BotãoBotãoMultiseleçãoMultiseleção

Page 13: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

13

Modelo de Objetos Modelo de Objetos JavaScriptJavaScript

Objetos predefinidosObjetos predefinidosStringString

ex. length, substring, fontsize, link(URL), ex. length, substring, fontsize, link(URL), toUpperCase toUpperCase

ArrayArray new Arraynew Array

DateDate new Date , getMonth, getCalendarMonthnew Date , getMonth, getCalendarMonth

MathMath random, sin, sqrt random, sin, sqrt

NumberNumber new Number(MAX_VALUE)new Number(MAX_VALUE)

Page 14: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

14

Modelo de Objetos Modelo de Objetos JavaScriptJavaScript

Manipulando EventosManipulando EventosonClick x onSubmitonClick x onSubmit

<form action=“process.cgi”, method=“POST”<form action=“process.cgi”, method=“POST”onSubmit=“return confirmOrder()”>onSubmit=“return confirmOrder()”>

onReset, onChange, onFocus e onBlur, onReset, onChange, onFocus e onBlur, onMouseOver e onMouseOut, onLoad e onMouseOver e onMouseOut, onLoad e onUnload, onError, onAbortonUnload, onError, onAbort

Page 15: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

15

Aplicações no ServidorAplicações no Servidor No lado do servidor, substitui scripts CGI na No lado do servidor, substitui scripts CGI na

execução de tarefas específicas do servidor execução de tarefas específicas do servidor tais como:tais como:Criação dinâmica de páginas HTMLCriação dinâmica de páginas HTMLAcesso a arquivosAcesso a arquivosConectividade com base de dadosConectividade com base de dados

LiveWire: conjunto de extensões para LiveWire: conjunto de extensões para JavaScript no servidor (Netscape Enterprise JavaScript no servidor (Netscape Enterprise Server)Server)

Tags <server> e</server> são usadas no Tags <server> e</server> são usadas no servidor para embutir código JavaScript em servidor para embutir código JavaScript em páginas HTMLpáginas HTML

Os arquivos HTML são compilados no servidor Os arquivos HTML são compilados no servidor gerando arquivos .webgerando arquivos .web

Page 16: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

16

Aplicações no ServidorAplicações no Servidor LiveWire inclui um objeto file que permite LiveWire inclui um objeto file que permite

acesso ao sistema de arquivos do servidoracesso ao sistema de arquivos do servidor contém métodos tais como: open(), close(), read(), contém métodos tais como: open(), close(), read(),

write(), eof().write(), eof(). O objeto database encapsula toda O objeto database encapsula toda

funcionalidade para interação com bancos de funcionalidade para interação com bancos de dados relacionais dados relacionais contém métodos tais como:contém métodos tais como:

connect(), disconnect()connect(), disconnect() execute (“SQL statement”)execute (“SQL statement”) SQLTable(“SQL Select statement”)SQLTable(“SQL Select statement”) gera uma gera uma

tabela HTML para mostrar o resultado de uma tabela HTML para mostrar o resultado de uma consulta SELECTconsulta SELECT

Page 17: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

17

ConectividadeConectividade

Um código JavaScript pode acessar métodos e Um código JavaScript pode acessar métodos e campos públicos de uma applet Javacampos públicos de uma applet Java

A comunicação inicia com uma referência a A comunicação inicia com uma referência a uma applet:uma applet:document.applet[0]document.applet[0] (referência à 1ª applet na (referência à 1ª applet na

página)página)

document.applet[“AppletName”]document.applet[“AppletName”] (referência por nome)(referência por nome)

Estabelecida a referência, o código JavaScript Estabelecida a referência, o código JavaScript pode chamar os métodos da appletpode chamar os métodos da applet

Page 18: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

18

JavaScript e JavaJavaScript e Java

Se o objeto myApplet implementa um método Se o objeto myApplet implementa um método público hello [ public method público hello [ public method hello() ] hello() ] esse esse método pode ser invocado pelo seguinte método pode ser invocado pelo seguinte código:código:

<f<form>orm>

<input type=“radio” checked=“true” <input type=“radio” checked=“true”

name= “Ola”name= “Ola”

onclick=“document.myApplet.hello()”>onclick=“document.myApplet.hello()”>

</form></form>

Page 19: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

19

JavaScript e JavaJavaScript e Java

A passagem de argumentos deve ser feita com A passagem de argumentos deve ser feita com atenção pois os tipos de argumentos são atenção pois os tipos de argumentos são diferentes nessas linguagensdiferentes nessas linguagens

Os três tipos básicos string, number e Boolean Os três tipos básicos string, number e Boolean

em JavaScript são diretamente compatíveis com em JavaScript são diretamente compatíveis com

os tipos objeto string, Boolean, e Double em os tipos objeto string, Boolean, e Double em

JavaJava Objetos complexos em JavaScript, como arrays, Objetos complexos em JavaScript, como arrays,

são refletidos em Java como objetos do tipo são refletidos em Java como objetos do tipo

JSObjectJSObject

Page 20: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

20

JavaScript e JavaJavaScript e Java

JavaScript também pode acessar métodos e JavaScript também pode acessar métodos e campos estáticos das bibliotecas Java (core campos estáticos das bibliotecas Java (core packages)packages)vavar pi = Packages.java.lang.Math.PI;r pi = Packages.java.lang.Math.PI;

Também é possível construir novos objetos Também é possível construir novos objetos

Java dinamicamente, usando o operador Java dinamicamente, usando o operador newnewvar theDate = new java.util.Date()var theDate = new java.util.Date()

Page 21: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

21

JavaScript e ActiveXJavaScript e ActiveX A tecnologia ActiveX da Microsoft fornece A tecnologia ActiveX da Microsoft fornece

meios de embutir controles Microsoft OLE em meios de embutir controles Microsoft OLE em documentos HTMLdocumentos HTML

Alguns controles ActiveX:Alguns controles ActiveX: Botão animadoBotão animado GráficoGráfico GradienteGradiente RótuloRótulo Menu suspensoMenu suspenso TemporizadorTemporizador

Page 22: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

22

JavaScript e ActiveXJavaScript e ActiveX Exemplo de um controle ActiveXExemplo de um controle ActiveX

<OBJECT ID=“MyButton” WIDTH=83 HEIGHT=27<OBJECT ID=“MyButton” WIDTH=83 HEIGHT=27

CLASSID=“CLSID:3472D900-5A27-11CF-8B11-CLASSID=“CLSID:3472D900-5A27-11CF-8B11-00AA00C00903”00AA00C00903”

<PARAM NAME=“Caption” VALUE=“my_button”><PARAM NAME=“Caption” VALUE=“my_button”>

<PARAM NAME=“Size” VALUE=“296;678”><PARAM NAME=“Size” VALUE=“296;678”>

<PARAM NAME=“FontWeight” VALUE=“0”><PARAM NAME=“FontWeight” VALUE=“0”>

</OBJECT></OBJECT> Uma vez que o controle ActiveX esteja embutido no Uma vez que o controle ActiveX esteja embutido no

documento o código JavaScript pode ser adicionado documento o código JavaScript pode ser adicionado e trabalhar com ele como qualquer outro objeto e trabalhar com ele como qualquer outro objeto (conjunto de propriedades, resposta a eventos ou (conjunto de propriedades, resposta a eventos ou chamada de métodos do controle ActiveX)chamada de métodos do controle ActiveX)

Page 23: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

23

JavaScript e Plug-ins JavaScript e Plug-ins NetscapeNetscape

Plug-ins são aplicações que habilitam o navegador Plug-ins são aplicações que habilitam o navegador Web a executar arquivos não nativos na sua Web a executar arquivos não nativos na sua janelajanela

Alguns benefícios do uso de plug-ins:Alguns benefícios do uso de plug-ins: Ampliar as capacidades do navegador (pode ler mais Ampliar as capacidades do navegador (pode ler mais

arquivos)arquivos) Autores podem usar conteúdos disponíveis de vários Autores podem usar conteúdos disponíveis de vários

formatos de arquivosformatos de arquivos Torna o conteúdo mais dinâmico e excitante (multimídia)Torna o conteúdo mais dinâmico e excitante (multimídia) Reduz a demanda do servidor Web (uma vez que a Reduz a demanda do servidor Web (uma vez que a

página é carregada muitas das tarefas podem ser página é carregada muitas das tarefas podem ser realizadas pelos plug-ins na máquina do cliente)realizadas pelos plug-ins na máquina do cliente)

Page 24: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

24

JavaScript e Plug-ins JavaScript e Plug-ins NetscapeNetscape

JavaScript pode ser usada para determinar JavaScript pode ser usada para determinar quais plug-ins e tipos MIME são suportados pelo quais plug-ins e tipos MIME são suportados pelo clientecliente

Isto dá ao desenvolvedor Web o controle sobre Isto dá ao desenvolvedor Web o controle sobre o conteúdo a ser passado para o usuárioo conteúdo a ser passado para o usuário

O objeto plugins é umO objeto plugins é um array de todos os plug-array de todos os plug-ins atualmente instalados no cliente e tem as ins atualmente instalados no cliente e tem as seguintes propriedades sobre plug-ins:seguintes propriedades sobre plug-ins: name: O nome do plug-in name (ex. “Shockwave”)name: O nome do plug-in name (ex. “Shockwave”) filename. O nome do arquivo plug-infilename. O nome do arquivo plug-in description: Fornecida pelo distribuidor do plug-indescription: Fornecida pelo distribuidor do plug-in length:O número de elementos no arraylength:O número de elementos no array

Page 25: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

25

JavaScript e SegurançaJavaScript e Segurança ““O risco de segurança mais freqüente para máquinas O risco de segurança mais freqüente para máquinas

locais acessando a Internet está relacionado à execução locais acessando a Internet está relacionado à execução de código JavaScript no cliente”de código JavaScript no cliente”

Não há um modo de determinar ou parar a execução de Não há um modo de determinar ou parar a execução de código JavaScript embutido em páginas HTML (se código JavaScript embutido em páginas HTML (se estiver habilitado pelo navegador)estiver habilitado pelo navegador)

JavaScript não deveria ser usado para criar aplicações JavaScript não deveria ser usado para criar aplicações responsáveis pelo controle de acesso porque o código é responsáveis pelo controle de acesso porque o código é acessível através da janela de fonte e o algoritmo de acessível através da janela de fonte e o algoritmo de segurança pode ser facilmente deduzidosegurança pode ser facilmente deduzido

Service Attacks, tais como laços infinitos, diálogos Service Attacks, tais como laços infinitos, diálogos modais infinitos e uso total da memória podem bloquear modais infinitos e uso total da memória podem bloquear a interface do usuário e requerer que o usuário feche o a interface do usuário e requerer que o usuário feche o navegadornavegador

Page 26: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

26

JavaScript e SegurançaJavaScript e Segurança JavaScript implementa as seguintes JavaScript implementa as seguintes

características de segurança:características de segurança:Não é capaz de ler ou escrever arquivosNão é capaz de ler ou escrever arquivosNão há acesso a informações do sistema de Não há acesso a informações do sistema de

arquivosarquivos JavaScript não pode executar programas JavaScript não pode executar programas

nem comandos do sistemanem comandos do sistema JavaScript não pode fazer conexões de rede JavaScript não pode fazer conexões de rede

com outros computadores, exceto com a com outros computadores, exceto com a máquina de onde a applet foi carregadamáquina de onde a applet foi carregada

Assinatura eletrônica de objetoAssinatura eletrônica de objeto

Page 27: 1 JavaScript. 2 JavaScript  Introdução  Fatos Sobre JavaScript  Embutindo JavaScript no HTML  Características da Linguagem:  sintaxe  objetos

27

Mais Exemplos de Mais Exemplos de JavaScriptJavaScript

Esmaecimento de cor (Color Esmaecimento de cor (Color Fading - Java não pode fazer !!)Fading - Java não pode fazer !!)

Letreiros deslizantes (Scrolling Letreiros deslizantes (Scrolling Marquees)Marquees)

BillboardsBillboardshttp://www.jsworld.com/http://www.jsworld.com/