Sie sind auf Seite 1von 16

Tecnologias para Web Design

Javascript e DOM

Introdução à Scripts

z Um script do lado cliente é um programa que


acompanha um documento HTML
z Pode estar incluído no próprio documento
embutido ou acompanha-lo num arquivo a parte
z O programa é executado na máquina cliente
através do browser

Web Design © 2003 Jair C Leite


Usos de scripts

z Possibilitam extensões à documento HTML


z Podem modificar o conteúdo de um documento
dinamicamente
z Processam entradas de um formulário HTML
z Podem ser ativados por eventos que afetam um
documento
z Podem ser relacionados a controles para produzir
elementos de interfaces gráficas

Web Design © 2003 Jair C Leite

Linguagens Script

z Existem diversas linguagens script que pode ser


interpretadas por browsers
– Javascript (Netscape) e JScript (Microsoft)
– ECMAScript (recomendada pelo W3C)
– VBScript
– TCL
z O browser deve ser capaz de interpretar uma
determinada linguagem para que o programa
script possa ser executado

Web Design © 2003 Jair C Leite


O elemento script

z O elemento HTML script permite inserir um script


num documento HTML
z O script deve estar delimitado pelas tags
<SCRIPT> ... </SCRIPT>
z Podem estar tanto no cabeçalho quanto no corpo
de um documento.
z Podem existir diversas declarações num mesmo
documento

Web Design © 2003 Jair C Leite

Inserindo scripts em HTML

z Pode esconder um script com comentários


fazendo com que o browser ignore o programa
script
<SCRIPT type="text/JavaScript">
<!-- programa JavaScript...
-->
</SCRIPT>
z Pode também utilizar o elemento noscript

Web Design © 2003 Jair C Leite


O elemento NOSCRIPT

z O elemento noscript indica ao browser uma


alternativa quando ele não entende uma
linguagem script
<SCRIPT type="text/JavaScript">
...programa JavaScript...
</SCRIPT>
<NOSCRIPT>
<P>Seu browser não entende scripts. Acesse <A
href="http://someplace.com/data">versão sem
scritps </A>
</NOSCRIPT>

Web Design © 2003 Jair C Leite

Anexando scripts externos

z Um script descrito em um arquivo externo pode


ser associado a um documento através do atributo
src na tag <SCRIPT>
<SCRIPT src = “URI”>

Web Design © 2003 Jair C Leite


Exemplo de declaração

<HTML>
<HEAD>
<TITLE> ... </TITLE>
<META http-equiv=“Content-Script-type” content=“text/javascript”>
<SCRIPT type=“text/tcl” src=http://www.site.com/arq.tcl>
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT type=“text/javascript”>
... Aqui vem o código JavaScript ...
</SCRIPT>
</BODY>
</HTML>

Web Design © 2003 Jair C Leite

Especificando a linguagem script

z HTML não especifica nenhuma linguagem script


preferencial
z O autor de um documento deve especificar qual a
linguagem script default de um documento usando
o elemento meta
<META http-equiv=“Content-Script-type” content=“type”>
z Onde type pode ser
– “text/javascript”, “text/vbscript”, “text/tcl”, etc.

Web Design © 2003 Jair C Leite


Exemplo de script usando VBScript

<INPUT name="edit1" size="50">


<SCRIPT type="text/vbscript">
Sub edit1_changed()
If edit1.value = "abc" Then
button1.enabled = True
Else
button1.enabled = False
End If
End Sub
</SCRIPT>
Web Design © 2003 Jair C Leite

Exemplo de script usando TCL

<INPUT name="edit1" size="50">


<SCRIPT type="text/tcl">
proc edit1_changed {} {
if {[edit value] == abc} {
button1 enable 1
} else {
button1 enable 0
}
}
edit1 onChange edit1_changed
</SCRIPT>
Web Design © 2003 Jair C Leite
Tecnologias para Web Design

A linguagem
Javascript

JavaScript

z JavaScript é uma linguagem script orientada a


objetos
z Proposta pela Netscape e executada
primeiramente no Navigator
z Está sendo adotada com padrão pelo ECMA
z A versão mais atual é a 1.3 e corresponde a
ECMAScript-262

Web Design © 2003 Jair C Leite


Forma geral de um programa Javascript
function nomeFuncao(argumento1, argumento 2) {
var nomeVar1, _variavel;
var nomeVar2 = 0;
var nomeVar3 = “jair”;
var nomeVar4 = true;

comando 1;
while (expressao) {
comando 3;
if (expressao) {
comando 4;
comando 5;
}
else {
for (I =0; i>< 10; I++) {
comando 6; comando 7;
}
}
}
}
Web Design © 2003 Jair C Leite

String e Arrays

z Strings
– var nomeString = “Jair”;
– nomeStringCompleto = nomeString + “Leite”;
z Strings são objetos
– var nomeString = new String(“Jair”);
z Arrays
– var planeta = new Array(9);
– planeta[0] = “Mercurio”;
– planeta[1] = “Venus”;
– …
– planeta[8] = “Plutao”;
– Ou
– var planeta = new Array(“Mercurio”, “Venus”, … “Plutao”);

Web Design © 2003 Jair C Leite


Objetos

z Javascript é uma linguagem baseada em objetos.


z Objetos consistem de:
– Uma coleção de propriedades
– Métodos que realizam operações nos dados das
propriedades
z Existem classes pré-definidas (built-in)
– String, array, math, date, …
z Classe Array
– Propriedade
z Lenght
– Métodos
z concat(), join(), reverse(), push(), pop(), sort(), …

Web Design © 2003 Jair C Leite

Instâncias de classes

z As instâncias de classes são definidas com new


– var nomeVar = new ClassName;
– var data = new Date();
z Objetos possuem métodos pré-definidos
– nomeObjeto.nomeMétodo(parâmetros)
– planeta.reverse();
– nomeString.bold();
– nomeString.fontsize(10);
– r = Math.random();

Web Design © 2003 Jair C Leite


Tecnologias para Web Design

O Modelo de
Objetos do
Documento

Modelo de objetos do documento (DOM)

z Os elementos de um documento HTML podem ser


modificados dinamicamente pelos programas
scripts
z Um documento HTML segue um modelo de
objetos específico (DOM)
z O modelo define uma hierarquia de objetos
z Cada objeto possui métodos e propriedades
associadas.

Web Design © 2003 Jair C Leite


Os objetos de um browser

z Toda página possui os seguintes objetos


– Window – objeto de mais alto nível
– Document – contém propriedades e objetos do
documento corrente
– Location – propriedades baseadas na URI atual
– History – contem as URI previamente acessadas

Web Design © 2003 Jair C Leite

Os objetos de document (Netscape)

z Link z Button
z Image z Radio
z Area z Checkbox
z Anchor z Select
z Object z Text
z Plugin z Textarea
z Form z Password
z Div ou Layer z Hidden
z Submit
z Reset
z File

Web Design © 2003 Jair C Leite


Referenciando HTML em DOM

z A seguintes expressões HTML e DOM são


equivalentes
– <IMG name=“figura1” src=“fig.jpg”>
– Document.figura1.src=“fig.jpg”
– <P name=“pinicial” style=“color:black”>
– Document.pinicial.color=black
– <FORM name=“form1”>
<INPUT type=“text” name=“endereco”>
– Document.form1.endereco
– Document.form1.endereco = “Rua da Silva”
– A = Document.form1.endereco

Web Design © 2003 Jair C Leite

Objetos do browser em DOM

z Navigator
– navigator.appName
– navigator.appVersion
z Window
– window.location.href = http://www.dimap.ufrn.br
– window.open(http://www.dimap.ufrn.br)

Web Design © 2003 Jair C Leite


Tecnologias para Web Design

DHTML

HTML Dinâmico

z HTML Dinâmico consiste da junção de três


tecnologias
– HTML
– CSS
– DOM
– Scripts
z Em outras palavras…
– É a manipulação de elementos de um documento HTML
e dos estilos CSS por um programa script de acordo
com o DOM (modelo de objetos do documento).
– Scripts são ativados por eventos e modificam objetos
HTML e CSS.
Web Design © 2003 Jair C Leite
Eventos intrínsecos

z Eventos intrínsecos são eventos que ocorrem:


– Quando o usuário interage com o browser
– Por ações do sistema operacional ou do browser
z Uma ação do usuário corresponde a um evento
z Um evento pode ser associado a uma função
script.
z Um evento intrínseco pode ser associado a um
elemento HTML
z Quando o evento ocorre a função associada pode
ser executada

Web Design © 2003 Jair C Leite

Exemplos de eventos intrínsecos

z onload, onunload
z onclick, ondbclick
z onmousedowb, onmouseup, onmouseover,
onmousemove, onmouseout
z onfocus, onblur
z onkeypress, onkeydown, onkeyup
z onsubmit, onreset
z onselect, onchange

Web Design © 2003 Jair C Leite


Associando scripts a elementos de formulário

z Os seguintes controles respondem a eventos


intrínsecos:
– INPUT, SELECT, BUTTON, TEXTAREA, LABEL
z Pode-se associar um script à ocorrência de um
determinado evento em um controle
<TAG ... evento=“script”>
<INPUT type=“text” name=“nome”
onblur=“validenome(this.value)”>

Web Design © 2003 Jair C Leite

Modificando documentos com scripts

z Os objetos são referenciados no script da seguinte


forma
Document.myform.text1.value
Document.form2.button2.value
z Métodos ou propriedades associados a um objeto
podem ser referenciado da mesma forma
Document.write(“texto a ser escrito”)
Document.title=“Um documento simples”

Web Design © 2003 Jair C Leite


Gerando o código HTML a partir do JavaScript

zUsando o script pode gerar dinamicamente


o código HTML
<TITLE>Test Document</TITLE>
<SCRIPT type="text/javascript">
document.write("<p><b>Hello World!<\/b>")
</SCRIPT>
zQue é equivalente a
<TITLE>Test Document</TITLE>
<P><B>Hello World!<\B>

Web Design © 2003 Jair C Leite

Das könnte Ihnen auch gefallen