Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
JavaScript
Programao WEB
Prof. Carlos Souza
Agenda
Conceito
HTML5 - Next Generation HTML Caractersticas Publicao Elementos Estruturais Estrutura da Pgina
Cabealho Corpo
Agenda
JavaScript
Introduo
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
Dependente do navegador
Baseado em objeto
No aceita herana
Respostas a eventos gerados pelos objetos HTML tais como botes e caixas de texto
JavaScript NO Java!
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
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
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.
Linguagem JavaScript
Objetos de navegao
Objeto Document <BODY> ... </BODY> propriedades Mtodos Objeto Form reflete um formulrio HTML em JavaScript <form> ... </form> Boto Multiseleo
Date
Math
Number
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
Objetos predefinidos
String
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.
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
Exemplos
Manipulando Eventos
onClick x onSubmit
onReset, onChange, onFocus e onBlur; onMouseOver e onMouseOut; onLoad e onUnload, onError, onAbort.
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>
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); } }
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
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
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
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