Tecnologias para Web Design

Tamanho: px

Começar a partir da página:

Download "Tecnologias para Web Design"

Ângela de Lacerda Sousa
10 Há anos
Visualizações:

1 Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo a parte O programa é executado na máquina cliente através do browser

estar incluído no próprio documento embutido ou acompanha-lo num

2 Usos de scripts Possibilitam extensões à documento HTML Podem modificar o conteúdo de um documento dinamicamente Processam entradas de um formulário HTML Podem ser ativados por eventos que afetam um documento Podem ser relacionados a controles para produzir elementos de interfaces gráficas Linguagens Script Existem diversas linguagens script que pode ser interpretadas por browsers Javascript (Netscape) e JScript (Microsoft) ECMAScript (recomendada pelo W3C) VBScript TCL O browser deve ser capaz de interpretar uma determinada linguagem para que o programa script possa ser executado

gráficas Linguagens Script Existem diversas linguagens script que pode ser interpretadas por browsers Javascript (Netscape) e JScript (Microsoft)

3 O elemento script O elemento HTML script permite inserir um script num documento HTML O script deve estar delimitado pelas tags <SCRIPT>... </SCRIPT> Podem estar tanto no cabeçalho quanto no corpo de um documento. Podem existir diversas declarações num mesmo documento Inserindo scripts em HTML Pode esconder um script com comentários fazendo com que o browser ignore o programa script <SCRIPT type="text/javascript">  </SCRIPT> Pode também utilizar o elemento noscript

Podem existir diversas declarações num mesmo documento Inserindo scripts em HTML Pode esconder um script com comentários

4 O elemento NOSCRIPT 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=" sem scritps </A> </NOSCRIPT> Anexando scripts externos Um script descrito em um arquivo externo pode ser associado a um documento através do atributo src na tag <SCRIPT> <SCRIPT src = URI >

5 Exemplo de declaração <HTML> <HEAD> <TITLE>... </TITLE> <META http-equiv= Content-Script-type content= text/javascript > <SCRIPT type= text/tcl src= </SCRIPT> </HEAD> <BODY> <SCRIPT type= text/javascript >... Aqui vem o código JavaScript... </SCRIPT> </BODY> </HTML> Especificando a linguagem script HTML não especifica nenhuma linguagem script preferencial 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 > Onde type pode ser text/javascript, text/vbscript, text/tcl, etc.

tcl> </SCRIPT> </HEAD> <BODY> <SCRIPT type= text/javascript >... Aqui vem o código JavaScript.

6 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> 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>

$type="text/tcl"> proc edit1_changed {} { if {[edit value] == abc} { button1 enable 1 } else { button1 enable 0$

7 Tecnologias para A linguagem Javascript JavaScript JavaScript é uma linguagem script orientada a objetos Proposta pela Netscape e executada primeiramente no Navigator Está sendo adotada com padrão pelo ECMA A versão mais atual é a 1.3 e corresponde a ECMAScript-262

executada primeiramente no Navigator Está sendo adotada com padrão

8 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; } } } String e Arrays Strings var nomestring = Jair ; nomestringcompleto = nomestring + Leite ; Strings são objetos var nomestring = new String( Jair ); Arrays var planeta = new Array(9); planeta[0] = Mercurio ; planeta[1] = Venus ; planeta[8] = Plutao ; Ou var planeta = new Array( Mercurio, Venus, Plutao );

7; } } } String e Arrays Strings var nomestring = Jair ; nomestringcompleto = nomestring + Leite ; Strings são objetos var nomestring = new String( Jair

9 Objetos Javascript é uma linguagem baseada em objetos. Objetos consistem de: Uma coleção de propriedades Métodos que realizam operações nos dados das propriedades Existem classes pré-definidas (built-in) String, array, math, date, Classe Array Propriedade Lenght Métodos concat(), join(), reverse(), push(), pop(), sort(), Instâncias de classes As instâncias de classes são definidas com new var nomevar = new ClassName; var data = new Date(); Objetos possuem métodos pré-definidos nomeobjeto.nomemétodo(parâmetros) planeta.reverse(); nomestring.bold(); nomestring.fontsize(10); r = Math.random();

String, array, math, date, Classe Array Propriedade Lenght Métodos concat(), join(), reverse(), push(), pop(), sort(), Instâncias de classes As

10 Tecnologias para O Modelo de Objetos do Documento Modelo de objetos do documento (DOM) Os elementos de um documento HTML podem ser modificados dinamicamente pelos programas scripts Um documento HTML segue um modelo de objetos específico (DOM) O modelo define uma hierarquia de objetos Cada objeto possui métodos e propriedades associadas.

programas scripts Um documento HTML segue um modelo de objetos específico (DOM) O

11 Os objetos de um browser 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 Os objetos de document (Netscape) Link Image Area Anchor Object Plugin Form Div ou Layer Button Radio Checkbox Select Text Textarea Password Hidden Submit Reset File

atual History contem as URI previamente acessadas Os objetos de document (Netscape) Link Image Area

12 Referenciando HTML em DOM 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 Objetos do browser em DOM Navigator navigator.appname navigator.appversion Window window.location.href = window.open(

form1.endereco Document.form1.endereco = Rua da Silva A = Document.form1.endereco Objetos do browser em DOM Navigator navigator.

13 Tecnologias para DHTML HTML Dinâmico HTML Dinâmico consiste da junção de três tecnologias HTML CSS DOM Scripts 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.

um documento HTML e dos estilos CSS por um programa script de acordo com o DOM

14 Eventos intrínsecos 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 Uma ação do usuário corresponde a um evento Um evento pode ser associado a uma função script. Um evento intrínseco pode ser associado a um elemento HTML Quando o evento ocorre a função associada pode ser executada Exemplos de eventos intrínsecos onload, onunload onclick, ondbclick onmousedowb, onmouseup, onmouseover, onmousemove, onmouseout onfocus, onblur onkeypress, onkeydown, onkeyup onsubmit, onreset onselect, onchange

Um evento intrínseco pode ser associado a um elemento HTML Quando o evento ocorre a função associada pode ser executada Exemplos de eventos

15 Associando scripts a elementos de formulário Os seguintes controles respondem a eventos intrínsecos: INPUT, SELECT, BUTTON, TEXTAREA, LABEL 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) > Modificando documentos com scripts Os objetos são referenciados no script da seguinte forma Document.myform.text1.value Document.form2.button2.value 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

value) > Modificando documentos com scripts Os objetos são referenciados no script da seguinte forma Document.myform.text1.value Document.form2.button2.

16 Gerando o código HTML a partir do JavaScript Usando 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> Que é equivalente a <TITLE>Test Document</TITLE> <P><B>Hello World!<\B>

$<\/b>") </SCRIPT> Que é equivalente a <TITLE>Test Document</TITLE>$

Documentos relacionados

JavaScript: Validação de Formulários. Prof. Ivanilton Polato [email protected] [email protected]

JavaScript: Validação de Formulários Prof. Ivanilton Polato [email protected] [email protected] Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir