Sei sulla pagina 1di 34

1

JavaScript

Programao WEB
Prof. Carlos Souza

Agenda

Conceito

HTML5 - Next Generation HTML Caractersticas Publicao Elementos Estruturais Estrutura da Pgina

Cabealho Corpo

Agenda

JavaScript

Introduo

Fatos Sobre JavaScript

Embutindo JavaScript no HTML Caractersticas da Linguagem: sintaxe


objetos

eventos Aplicaes no Lado do Cliente Conectividade com JavaScript Segurana Concluso e Exemplos Adicionais

Introduo

Tecnologia desenvolvida pela Netscape em 1995 Da vida s pginas HTML estticas Move algum processamento lgico para o lado do cliente Linguagem de script de alto nvel, baseada em objetos

Fatos Sobre JavaScript

Cdigo embutido na pgina HTML

No gera programa executvel do tipo arquivo exe

Cdigo interpretado pelo navegador

Dependente do navegador

Baseado em objeto

No aceita herana

Fatos Sobre JavaScript

Guiada por evento

Respostas a eventos gerados pelos objetos HTML tais como botes e caixas de texto

JavaScript NO Java!

Sintaxe semelhante, mas conceitos diferentes

Embutindo JavaScript no HTML

O cdigo JavaScript pode tambm ficar em um arquivo de texto separado da pgina HTML
<SCRIPT SRC=MyScript.js></SCRIPT>

O cdigo JavaScript pode ser escrito em qualquer lugar do documento HTML mas boa prtica coloca-lo no cabealho do documento (<Head> ... </Head>)

Linguagem JavaScript

Tipos de dados

number, Boolean, string ,function, object Linguagem fracamente tipada global x local To var or Not to var?!! similares aos das linguagens C++ e Java (ex. x += y equivalente a x = x + y) Operadores no nvel de bits (Bitwise Operators) Operadores relacionais (comparaes)

Variveis

Operadores

Linguagem JavaScript

Controle de fluxo e repetio


if ... else, while, do ... while, for, with, switch e case break, continue e rotulada. for ... In

Funes

retornam valor, retornam expresso manipulam argumentos extras passagem de parmetro por valor ou por referncia

Linguagem JavaScript

JavaScript organiza hierarquicamente os objetos em uma pgina

Objetos JavaScript

Objetos de navegao:

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

Objetos predefinidos da linguagem

nunca so visveis na pgina por exemplo: String e Array

Linguagem JavaScript

Criando um novo objeto:

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

Objetos de navegao

criando uma janela

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

exibindo uma caixa de mensagem

Modelo de Objetos JavaScript

Objeto Document <BODY> ... </BODY> propriedades Mtodos Objeto Form reflete um formulrio HTML em JavaScript <form> ... </form> Boto Multiseleo

Modelo de Objetos JavaScript

Objetos predefinidos Array

new Array new Date , getMonth, getCalendarMonth

Date

Math

random, sin, sqrt new Number(MAX_VALUE)

Number

Modelo de Objetos JavaScript

Objetos predefinidos String


ex. length, substring, fontsize, link(URL), toUpperCase Valores strings so valores delimitados por apstrofo(') ou por aspas("), ex: "texto" ou 'texto' uma barra inversa permite a insero de caracteres especiais, ex:

"\b" - Representa o backspace (caracter ascii 8) "\t" - Tabulao (caracter ascii 9) "\r" - Retorno de carro (caracter ascii 13) "\n" - Nova linha (caracter ascii 10) "\v" - Tabulao vertical (caracter ascii 11) "\uNNNN" - Caracter unicode (NNNN representa um valor hexadecimal de 0000 a FFFF) "\xNN" - Caracter ascii (NN representa um valor hexadecimal de 00 a FF) "\'" - Apstrofo "\"" - Aspas "\\" - Barra inversa

Modelo de Objetos JavaScript

Objetos predefinidos

String

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

Null

O null um valor especial, representa um objeto nulo, no deve ser confundido com uma varivel no inicializada, pois o valor null existe. Portanto uma varivel com o contedo null existe em memria, referenciando este objeto especial.

Undefined

O valor undefined significa que a varivel no foi instanciada, inicialmente todas as variveis se encontram neste estado.

Document Object Model

Document Object Model


<html> <head> <title>titulo</title> <script id='h'> function alerta(a) alert(a); </script> </head> <body onload='alerta(document.getElementById('h').innerHTML);'> <div> texto </div> </body> </html>

Document Object Model

Document Object Model

Document Object Model


Atributo
hasChildNodes firstChild lastChild

Descrio
retorna true se o elemento possui filhos retorna uma referncia ao primeiro elemento filho retorna uma referncia ao ltimo elemento filho elementos n)

nodeName nodeValue
nodeType parentNode

retorna o nome da TAG do elemento(apenas para elementos n) retorna o valor do elemento(apenas para elementos TEXTO)
retorna o tipo do elemento retorna uma referncia ao elemento pai

Document Object Model

Exemplos

Document.body.innerHTML = <div>inner html</div>; Document.form1.input2.value = valor; Document.nomeform.nomeinput.css.border = 1px; Document.getElementById(id).parentNode.firstChild.name

Document Object Model

Manipulando Eventos

onClick x onSubmit

<form action=process.cgi, method=post onSubmit=return confirmOrder()>

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

Document Object Model

Manipulando Eventos
<div id=excluir> <p>Este um pargrafo</p> <p>Este um outro pargrafo</p> </div> <p> O texto ser alterado <div id=trocar>aqui</div></i> </p> <a href=# onclick=excluir(); />Excluir</a><br/> <a href=javascript:trocar(); />Trocar</a>

Document Object Model

Manipulando Eventos
function excluir() { var excluir = document.getElementById(excluir); if (excluir.hasChildNodes()) { excluir.removeChild(excluir.lastChild); } } function trocar() { var trocar = document.getElementById(trocar); if (trocar) { var novoNo = document.createElement(strong); var novoTexto = document.createTextNode(foi trocado); novoNo.appendChild(novoTexto); trocar.parentNode.replaceChild(novoNo, trocar); } }

Document Object Model

Manipulando Janelas
<script language=javascript> function abreJanela(URL){ window.open(URL,"janela1","width=99,height=99") } </script>
<a href="javascript:abreJanela('http://www.ftc.br')"> link</a>

Sintaxe: http://www.w3schools.com/jsref/met_win_open.asp

Conectividade

Um cdigo JavaScript pode acessar mtodos e campos pblicos de uma applet Java

A comunicao inicia com uma referncia a uma applet:


document.applet[0] (referncia 1 applet na pgina) document.applet[AppletName] (referncia por nome)

Estabelecida a referncia, o cdigo JavaScript pode chamar os mtodos da applet

JavaScript e Java

Se o objeto myApplet implementa um mtodo pblico hello [ public method hello() ] esse mtodo pode ser invocado pelo seguinte cdigo:
<form> <input type=radio checked=true name= Ola onclick=document.myApplet.hello()> </form>

JavaScript e Java

A passagem de argumentos deve ser feita com ateno pois os tipos de argumentos so diferentes nessas linguagens

Os trs tipos bsicos string, number e Boolean em JavaScript so diretamente compatveis com os tipos objeto string, Double e Boolean em Java Objetos complexos em JavaScript, como arrays, so refletidos em Java como objetos do tipo JSObject

JavaScript e ActiveX

A tecnologia ActiveX da Microsoft fornece meios de embutir controles Microsoft OLE em documentos HTML

Alguns controles ActiveX: Boto animado Grfico Gradiente Rtulo Menu suspenso Temporizador

JavaScript e ActiveX

Exemplo de um controle ActiveX


<OBJECT ID=MyButton WIDTH=83 HEIGHT=27 CLASSID=CLSID:3472D900-5A27-11CF-8B11-00AA00C00903 <PARAM NAME=Caption VALUE=my_button> <PARAM NAME=Size VALUE=296;678> <PARAM NAME=FontWeight VALUE=0> </OBJECT>

Uma vez que o controle ActiveX esteja embutido no documento o cdigo JavaScript pode ser adicionado e trabalhar com ele como qualquer outro objeto (conjunto de propriedades, resposta a eventos ou chamada de mtodos do controle ActiveX)

JavaScript e Plug-ins

Plug-ins so aplicaes que habilitam o navegador Web a executar arquivos no nativos na sua janela
Alguns benefcios do uso de plug-ins: Ampliar as capacidades do navegador (pode ler mais arquivos) Autores podem usar contedos disponveis de vrios formatos de arquivos Torna o contedo mais dinmico e excitante (multimdia) Reduz a demanda do servidor Web (uma vez que a pgina carregada muitas das tarefas podem ser realizadas pelos plug-ins na mquina do cliente)

JavaScript e Plug-ins

JavaScript pode ser usada para determinar quais plug-ins e tipos MIME so suportados pelo cliente Isto d ao desenvolvedor Web o controle sobre o contedo a ser passado para o usurio O objeto plugins um array de todos os plug-ins atualmente instalados no cliente e tem as seguintes propriedades sobre plug-ins:

name: O nome do plug-in name (ex. Shockwave) filename. O nome do arquivo plug-in description: Fornecida pelo distribuidor do plug-in length:O nmero de elementos no array

JavaScript e Segurana

O risco de segurana mais freqente para mquinas locais acessando a Internet est relacionado execuo de cdigo JavaScript no cliente No h um modo de determinar ou parar a execuo de cdigo JavaScript embutido em pginas HTML (se estiver habilitado pelo navegador)

JavaScript e Segurana

Service Attacks, tais como laos infinitos, dilogos modais infinitos e uso total da memria podem bloquear a interface do usurio e requerer que o usurio feche o navegador

JavaScript implementa as seguintes caractersticas de segurana:


No capaz de ler ou escrever arquivos No h acesso a informaes do sistema de arquivos JavaScript no pode executar programas nem comandos do sistema

Potrebbero piacerti anche