MOD 5 - Javascript

50
JAVASCRIPT 1

description

javascript

Transcript of MOD 5 - Javascript

HTML: frames

JAVASCRIPT1O que Javascript?O JavaScript uma linguagem de scripting, orientada a objectos e independente de plataformasCriada pela NetScape Cdigo embebido em paginas HTMLUtilizada para:Interactividade nas pginas HTMLValidar formulrios Interpretada pelos Browsers2Javascript e JavaJavascript versus JavaA mesma coisa ou coisas diferentes?

PesquisaDiferena entre Javascript e Java

3Javascript JavaJava uma linguagem diferenteSo duas tcnicas diferentes de programao na Internet: Java uma linguagem de programao. JavaScript uma linguagem de scripting (tal como diz o nome). Embedida numa pgina web.4O que faz o Javascript?Cria um interface com o utilizador activo;Pode validar dados introduzidos em formulrios (form);Permite personalizar uma pgina HTML, com base: nos dados introduzidos, cookies, no dia de semana, na semana, da localizao, entre outras;Pode controlar os browsers (utilizador pode permitir ou no);

5Os acontecimentos tero por base os inputs do utilizador, participa no resultado da pgina. Pode introduzir dados e obter uma resposta.J experimentaram certamente de encomendar algo na internet.submeteram os dados e obtiveram um resposta do servidor que o seu nome tem caracteres no permitidos ou no pode ter espaos, etc.. Com o javascript isso no acontece, os dados no precisam de ir para o servidor. O que acontece que o cliente realiza parte desse trabalho;5Onde colocar o Javascript?Dentro do ficheiro HTMLComo evento de um elementoComo elemento SCRIPT dentro de BODYComo funo, dentro de HEAD

Num ficheiro externoPrefervel, pelas mesmas razes das CSS

6

Usando JavaScriptO uso de JavaScript deve ser definido da seguinte forma:

/* script */

JanelasExistem 3 tipos de janelas que podem ser usadas e que permitem a interao com o utilizador:alert (algumtexto) - Janela de alerta confirm (algumtexto) - Janela de confirmaoprompt (algumtexto,valorinicial) - Janela recolha dados

8 var num=prompt(Escreva um numero);Alert(Escreveu o nmero+num); Confirm(Est certo); Javascript: exemploO script abaixo l o nome do utlizador e d boas-vindas.

/* Script de Boas-Vindas */var NOME; NOME = window.prompt ("Entre com seu nome: " , "Digite-o aqui: "); document.write ("Oi " + NOME + " esteja a vontade" );

9Javascript: exemplo

var nomenome = window.prompt("Digite o seu nome:");document.write("Bom dia, " + nome + "!
");document.write("tchau!!");

10Javascript: exemplo

Javascript

Em HTMLdocument.write(Agora em JavaScript");

11Exerccio prtico Cria uma pgina web que d como Output:

12Este a minha primeira pgina Web.Com Javascript, claro!JavaScriptVariveisdefiniox=3.14 var x=3.14

variveis definidas com var e sem valor atribudo tem valor undefined

As variveis so globais se definidas fora de uma funo, caso contrrio so variveis locais.

13JavaScriptTipos de dados Tipos de dados dinmicos var x=3.14var str=hello world var nomeTipos de dados primitivos nmeros (inteiros e reais)string (cadeia de caracteres)lgicos (true ou false)nullundefined

14OperadoresO JavaScript tem os seguintes operadores:

AritmticosStrings AfectaoComparaoLgicos (booleanos)OperadoresOperadores de afectaoEx: a+= 3 a = a+ 3 retorna 7 se a valer 4OperadorEquivalnciax += yx = x + yx -= yx = x - yx *= yx = x * yx /= yx = x / yx %= yx = x % yx ^= yx = x ^ yvariveis globais.

}

}

Ultima actualizao: 18-10-2011

FunesAs funes em JavaScript tm um nome e, em geral, tm argumentos e geram um valor.

function nome_de_funo (parametro1, parametro2, ... ) { declaraes de variaveis e instrues...}

As variveis declaradas dentro de uma funo s podem ser acedidas dentro da funo onde so declaradas.

A definio de uma funo consiste na palavra-chave function, seguida pelo seu nome, uma lista de argumentos - dentro de parntesis e separados por vrgulas - e as respectivas instrues, dentro de chavetas.Estruturas de DecisoDeciso Simples:If (condio){/*Instrues para condio verdadeira*/}

Deciso Composta:If (condio){/*Instrues para condio verdadeira*/}Else{/*Instrues para condio falsa*/}

Estruturas de Deciso - Operadores LgicosAtravs dos operadores lgicos podemos criar condies compostas. Exemplo:if (sexo==F && idade>= 18){ document.write (Mulher Maior de Idade);}

SmboloSignificado||Ou (OR)&&E (AND)!No (NOT)Estruturas de DecisoSeleo Sequencial

Para facilitar a interpretao do cdigo e evitar sequencias muito grandes de encadeamento de deciso, utilizamos o Switch... Case.

Exemplo:switch (mes){case 1: document.write(Janeiro); break;case 2:document.write(Fevereiro); break;......}Estruturas de Repetiowhile (condio) {cdigo a ser executado enquanto a condio for verdadeira; }

Var i=1; While (i 2004) alert ("erro")38JavaScript Dom (Document Object Model)

39JavaScriptJavaScript DOM window contm a informao sobre as janelas e framesdocumentcontm informao sobre o documento HTML e permite aceder aos elementos HTML dentro do documento navigatorContm informao sobre o browser do utilizadoreventContm informao sobre os eventos que ocorrem na pgina40JavaScriptJavaScript Windows e Frameswindow.alert(text) apresenta uma janela com o texto especificado como parmetroresult = window.confirm(text) apresenta uma janela de dilogo. result um valor booleano com valor true se foi premido o boto OK e false para o boto Cancelwindow.open("URL", "name" [, "windowfeatures"]) mtodo para criar uma nova janela. Devolve um objecto do tipo window. O name permite identificar a janela para ser utilizado no target. windowfeatures define propriedades da janela como altura, largura, toolbar

var winobj=window.open("btest2.html", "bwin", "toolbar,status");41JavaScripturl = window.location window.location = urlpropriedade para definir novo url da pgina ou saber url corrente

window.parentdevolve uma referncia para a janela (frame) pai da janela( frame) corrente.window.topdevolve uma referncia para a janela principal (ou frameset) numa hierarquia de janelasmsg = window.statuswindow.status = msg propriedade que permite alterar o texto na statusbar do browser.function getNews() { window.location= "http://www.cnn.com"; } no html: News 42JavaScriptwindows.history

devolve uma referncia para o objecto history que contm uma lista dos URL visitados. O mtodo go, back e forward deste objecto permite redireccionar o browser.h = window.history;if ( h.length ) { // if there is a history h.back(); // equivalent to clicking back button}windows.setTimeOut

window.setTimeout("tick();", 100);

Funo tick ser chamada ao fim de 100 ms

43JavaScriptJavaScript e Forms Cada form HTML num documento cria um objecto form Existe um array forms com as vrias forms de um documento.Acesso a um form em javascriptPor indice document.forms[0]

Por id/name document.myform //no html