Java Script : Introducao. 1) Sobre este tutorial...
|
|
- Victoria Almada Farinha
- 8 Há anos
- Visualizações:
Transcrição
1 Java Script : Introducao. 1) Sobre este tutorial... Este tutorial visa ensinar os fundamentos da linguagem JavaScript, a partir de exemplos de scripts e de exercícios sugeridos. Não se trata de um curso avançado, e sim de uma introdução dos principais mecanismos e recursos utilizados por esta linguagem assim como de suas principais aplicações. Por ser uma linguagem totalmente vinculada à Internet, é imprescindível um conhecimento mínimo de HTML para o aproveitamento dos exemplos apresentados aqui. 2 ) Pequeno histórico O protocolo http e a linguagem HTML mudaram radicalmente a rede mundial de computadores, dando a esta um aspecto gráfico muito importante para o seu crescimento e sua popularização. Porém, estas tecnologias logo mostraram suas limitações, por serem estáticas, De fato, a HTML, por não ser uma linguagem de programção e sim uma linguagem de diagramação, não permite nenhum tipo de interação entre o usuário e o site. O primeiro passo para diminuir esta restrição foi a utilização de scripts CGI (Common Gateway Interface), que recebem os dados enviados de alguma forma pelo usuário, processam dentro do servidor (server side) e retornam uma resposta ao usuário, sob a forma de uma nova página. Este tipo de processo, ainda muito utilizado hoje em dia, e muito útil em acesso a bancos de dados pela internet, por exemplo, exige acesso a áreas específicas do servidor, como o diretório CGI-BIN (onde os scripts são armazenados), o que nem sempre é possível. Surgiu então a necessidade da criação de linguagens que fossem carregadas junto com a página HTML e executadas pelo próprio navegador do usuário. Desta necessidade, nasceu a linguagem de script JavaScript, criada em conjunto pela Sun e pela Netscape. 3) JavaScript não é Java JavaScript é uma linguagem de programação cujo código é carregado junto com o documento HTML pelo navegador, e interpretado por este (assim como linguagens do tipo de Basic). Ela permite interagir com elementos da página, modificando sua aparencia, assim como criar animações, complementar CGI's... Sua sintaxe é muito semelhante a linguagens como C, C++ e Java, da qual foi derivada. Porém, apesar do nome, não se trata de Java : as semelhanças entre estas duas linguagens são apenas na sintaxe e no fato de ambas serem projetadas para funcionar na Internet. Java é uma verdadeira linguagem de programação, orientada a objeto, que permite a criação de programas independentes. JavaScript, por ser carregado e interpretado pelo navegador tem sua execução totalmente dependente deste. Por outro lado, ela permite a interação do usuário com elementos da página, porém não possue uma estrutura sólida para a criação de objetos, ou seja, ela é uma linguagem orientada por objetos. 4) Sintaxe Básica Os elemnentos básicos da síntaxe do JavaScript são os seguintes : Comandos de repetição : for (<expressao inicial>; <condição>; <expressão de atualização>){ <instruções>;
2 while (<condição>) { <instruções>; do { <instruções>; while (<condição>) Comando de decisão : if (<condição>) { <instruções>; else{ <instruções>; switch (<expressão>){ case <valor> : <intruções>; break;... default : <intruções>; break; Comandos break e continue : Assim como em C e Pascal, estes comandos podem ser utilizados dentro de comandos de repetição ou switch. Continue pula e execução de todo o código até chegar na expressão de avaliação da repetição. O comando break força a saída da iteração. Operadores de comparação : ==!= < > <= >= igual a diferente de menor que maior que menor ou igual a maior ou igual a Operações aritméticas : * multiplicação
3 % resto da divisão / divisão ++ incremento + adição -- decremento - subtração ~ complemento bit a bit Java Script : Inserindo scripts em uma página HTML 1 )"Hello World" em JavaScript Para se inserir um script em uma página HTML, deve se utilizar a seguinte tag : <SCRIPT language="javascript"> Codigo do Script </SCRIPT> Este tag pode ser inserida ou dentro do cabeçalho (HEAD) do documento, ou então dentro do corpo (BODY) do documento. A diferença é que dentro do HEAD, o script será carregado antes do resto do arquivo, enquanto que no corpo, ele será carregado a medida que o documento é carregado. Na prática, é útil se colocar um script dentro do head quando se utiliza funções, que serão vistas mais a frente. Como o primeiro passo para a aprendizagem de uma liguagem é escrever "Hello World" na tela, vamos mostrar como se faz isso em JavaScript. Copie o código abaixo em um arquivo e execute-o dentro de um navegador : <HTML> <HEAD> <TITLE>Hello world em JavaScript</TITLE> </HEAD> <BODY> <SCRIPT language="javascript"> document.writeln ("Hello World<BR>Vc acabou de escrever o seu primeiro cødigo em JavaScript"); </SCRIPT> </BODY> </HTML> A principal linha deste script é document.writeln ("Hello World<BR>Vc acabou de escrever o seu primeiro cødigo em JavaScript"). O comando document.writeln, quando interpretado pelo navegador, simplesmente escreve uma linha no arquivo, assim como o writeln do pascal ou printf do C. Note que é possível escrever código HTML dentro do writeln que é interpretado pelo navegador como sendo realmente cødigo de HTML. É possível também colocar scripts em arquivos externos, que devem ser salvos com a
4 extensão js. Para isso, deve se colocar o parâmetro src dentroda tag <script> e colocar o endereço do arquivo. Por exemplo : <HTML> <HEAD> <TITLE>Hello world em JavaScript</TITLE> </HEAD> <BODY> <SCRIPT src="helloworld.js"> </SCRIPT> </BODY> </HTML> Arquivo helloworld.js : document.writeln ("Hello World<BR>Vc acabou de escrever o seu primeiro cødigo em JavaScript"); Sugestão de exercício : escreva um pequeno documento HTML e insira a tag <SCRIPT> em diferentes lugares do arquivo. 2) Utilizando variáveis : "Hello World" versão 2. O pequeno código mostrado acima pode ser interessante para uma demonstração inicial do JavaScript, porém é bastante limitado, uma vez que não possui variáveis, e portanto é tão estático quanto um código em HTML. Como todas as linguagens de programação, JavaScript pode (e deve...) usar variáveis. A declaração destas é muito mais flexível do que em outras linguagens estruturadas, já que não é necessário a atribuição de um tipo, ou seja, não e preciso dizer ao interpretador se uma variável é uma String, um caractere ou um inteiro : basta atribuir um valor inicial. Por exemplo, para declarar a variável letra, basta escrever o seguinte código : var letra = "a"; Neste caso, a variável letra é inicializada com o valor a. Note qua a palavra-chave var é opcional, assim como a declaração de uma variável no início do script : de fato, esta pode aparecer pela primeira vez no meio de um arquivo sem ter sido declarada previamente. Para ilustrar o uso de uma variável, segue uma versão mais "interessante" do Hello World : <HTML> <HEAD><TITLE>Hello world em JavaScript</TITLE> </HEAD> <BODY> <SCRIPT language="javascript"> var variavel = "Hello World"; document.writeln (variavel + "<BR>Vc acabou de escrever o seu primeiro cødigo em JavaScript"); </SCRIPT> </BODY> </HTML> As variáveis declaradas dentro de uma função tem escopo local, isto é, somente podem ser acessadas dentro destas funções. Para que uma variável possa ser acessada por qualquer seja global ela deve ser declarada fora de qualquer função.
5 Sugestão de exercício 1 : escreva um código em javascript que gere a seguinte tabela, com letras alternadamente em negrito e italico, utilizando os comandos for e if. 1*2= 2 2*2 = 4 3*2 = 6 4*2 = 8 5*2 = 10 6*2 = 12 7*2 = 14 8*2 = 16 9*2 = 18 10*2 =10 Codigo da tabela : <TABLE WIDTH="87" BORDER="2" CELLSPACING="2" CELLPADDING="0"> <TR> <TD WIDTH="100%"></TD> </TR> </TABLE> 3) Criando funções Função é um elemento de programação que permite a criação de código estruturado, muito mais limpo e fácil de ser analisado. Em JavaScript, as funções são flexíveis, assim como as variáveis : uma função pode retornar ou não valores, sem modificar sua declaração. A sintaxe básica é a seguinte : function <nome da funcao> (<lista de parametros>) { <lista de comandos> Uma chamada a essa função se faz exatamente da mesma forma feita em linguagens como Pascal, ou seja, <nome da funcao>(<parametros>). Por exemplo, pode se implementar uma função que receba como parâmetro dois inteiro i e j e retorne o maior valor. O código a seguir implementa esta função : <HTML> <HEAD><TITLE>Exemplo de funcao</title> </HEAD> <BODY> <SCRIPT language="javascript"> function Maior_Valor (i, j){ if (i>j) return i; else return j; var i = 1; var j = 2; document.writeln ("O maior valor entre "+i+" e "+j+" e "+Maior_Valor(i,j));
6 </SCRIPT> </BODY> </HTML> Note que este codigo poderia ter sido implementado separando a função do resto do script, da seguinte forma : <HTML> <HEAD><TITLE>Exemplo de funcao</title> <SCRIPT language="javascript"> function Maior_Valor (i, j){ if (i>j) return i; else return j; </SCRIPT> </HEAD> <BODY> <SCRIPT language="javascript"> var i = 1; var j = 2; document.writeln ("O maior valor entre "+i+" e "+j+" e "+Maior_Valor(i,j)); </SCRIPT> </BODY> </HTML> Sugestão de exercício 2 : Escreva um script que gere a tabela a seguir, utilizando uma função que receba como parâmetro um inteiro i e imprima na tela a tabuada deste inteiro, sem retornar valores. 1*1=1 1*2=2 1*3=3 1*4=4 1*5=5 1*6=6 1*7=7 1*8=8 1*9=9 1*10=10 2*1=2 2*2=4 2*3=6 2*4=8 2*5=10 2*6=12 2*7=14 2*8=16 2*9=18 2*10=20 3*1=3 3*2=6 3*3=9
7 3*4=12 3*5=15 3*6=18 3*7=21 3*8=24 3*9=27 3*10=30 Codigo da tabela : <TABLE BORDER="2" > <TR> <TD ></TD> <TD ></TD> <TD ></TD> </TR> </TABLE> Java Script : Entendendo e estudando alguns objetos... 1) O que são objetos Um objeto é um elemento que possue um conjunto de características e e métodos próprios, com os quais se pode interagir. Um botão por exemplo é um objeto, que tem uma forma, e sobre o qual se pode executar certas ações pré-definidas pelo criador do deste. JavaScript não possue realmente uma estrutura para criar novos objetos, porém, como foi dito no início deste tutorial, tem a capacidade de interagir com os objetos do navegador. A hierarquia destes objetos é a seguinte : window parent top self frames Location History Document Link Forms Anchor Text Reset Submit CheckBox Password Button Select Radio Por convenção, para se acessar um objeto, deveria-se indicar todo o "caminho" percorrido nesta hierarquia. Por exemplo, para se acessar um formulario chamado form1, deveria-se indicar window.document.form1. Porém, na prática, utliza-se somente document.form1, já que se supõe que estamos dentro do window corrente. Utilizar o caminho completo só é necessário quando se constroe scripts que tratam com várias janelas ao mesmo tempo. Nesta parte do tutorial, serão estudados dois objetos de grande importancia : windows e document. Mais a frente serão abordados outros. 2) O objeto window.
8 O objeto window representa a janela do navegador, e portanto permite uma interação entre o script e o ambiente no qual ele está funcionando, São sinônimos window e self quando se trata da janela corrente, e parent indica a janela mais alta em um frameset. Pode-se também enfatizar a janela atual utilizando a palavra chave this.. Nesta parte, serão abordadas algumas das propriedades deste objeto. window.document : documento HTML exibido atualmente pela janela: permite alterar as propriedades do documento, que serão vistas mais a frente. window.name : atribui um nome à janela atual. Por exemplo, o código window.name="win" atribui à janela corrente o nome win. window.location : URL do documento atual. Para se muda-lo, basta escrever window.location="url". (Pode se utilizar também a função location.replace("url")). Teste o código a seguir para verificar o funcionamento desta propriedade : <title>teste</title> <script language=javascript> function troca () { document.location = "URL desejado"; </script> <a href="javascript:void(0)" onclick = "troca( )">Clique aqui</a> window.frames : matriz de todos os frames da janela. Esta propriedade é muito útil quando se deseja que um script carregado em um frame altere documentos de outros frames. Considera se que a janela que contém o frameset é a janela parent. Cada frame de um frameset pode ser referenciado por seu indice na matriz, que depende de sua posicao no frameset(parent.frames[0], por exemplo, indica o primeiro frame definido em um frameset) ou por seu nome (parent.main indica o frame chamada de main no frameset). Supondo o frameset abaixo, por exemplo : <title> Testando document</title> <frameset rows = "50%, *"> <frame name="main" src="main.html"> <frame name="sub" src="sub.html"> </frameset> Neste caso, pode se acessar o frame main utilizando parent.frames[0] ou parent.main. Para ilustrar o a utilidade deste comando, crie um arquivo chamado de teste.html, copie o codigo acima, e crie dois arquivos, main.html, sub.html e sub1.html e copie os codigos abaixo. main.html : <title>teste</title>
9 <script language=javascript> function troca () { parent.sub.document.location = "sub1.html"; </script> <a href="javascript:void(0)" onclick = "troca( )">Clique aqui</a> sub.html : <title>teste</title> Voce esta no sub. sub1.html : <title>teste</title> Agora, voce esta no sub 1. No exemplo acima, o script localizado no frame main altera o arquivo do frame sub. É muito útil esta propriedade, pois como foi dito, um script é executado somente enquanto o seu documento esta carregado no navegador : é possível então criar um frame contendo um script que irá comandar o comportamento dos outros frames, permitindo assim a criação de scripts mais complexos e interessantes. window.status : coloca ou retorna uma mensagem na barra de status do navegador. O código a seguir ilustra sua utilização : <title>window.status</title> <a href="javascript:void(0) onmouseover="window.status = 'Esta e uma mensagem na barra de status'; return true;">coloque o mouse sobre esta frase e olhe a barra de status.</a>
10 window.open (URL, nome, caracteristicas) : Abre uma nova janela, que recebe o nome passado peo segundo argumento, carrega o documento especificado em URL e possue as características descritas. Estas podem ser toolbar (barra de ferramentas) =yes/no location(localização)=yes/no directories (diretórios)=yes/no status (barra de status)=yes/no menubar (barra de menu =yes/no scrollbars (barra de rolagem)=yes/no resizable (redimensionabilidade)=yes/no width (largura) = n (pixels) height (altura) =m (pixels) Caso alguma destas características não seja explicitada, o navegador utilizará um valor padrnao. O nome da janela pode ser utilizado com o comando TARGET, caso se crie um link em uma janela desejando que o arquivo seja carregado em outra janela. O código a seguir cria uma janela chamada de win1, carrega o documento doc.html e não possue nenhuma barra, não pode ser redimensionada e possue 300 pixels por 200. <title>window.open</title> <script language="javascript"> window.open( "doc.html","win1","toolbar=no,location=no,directories=no, status=no,menubar=no,scrollbars=no,resizable=no,width=300,height=200") ; </script> window.close () : fecha a janela atual, se tiver sido aberta pelo JavaScript. Utilizando o código descrito acima, crie o arquivo doc.html com o seguinte código : <title>window.close</title> <form> <input type="button" value="fechar" onclick="window.close()"> </for> window.alert (String) : Mostra a string em uma caixa de alerta. <title>window.alert</title> <script language="javascript">
11 alert ("Esta e uma caixa de alerta"); </script> window.confirm (String) : Identico ao anterior, exibindo também os botões Ok e Cancel : Ok retorna true e Cancel retorna false. Utilize mais uma vez o arquivo descrito em window.open () e crie um arquivo doc.html com as seguintes linhas : <title>window.close</title> <script language="javascript"> function fechar (){ confirma = window.confirm ("Deseja mesmo fechar a janela"); if (confirma) window.close(); </script> <form> <input type="button" value="fechar" onclick="fechar()"> </for> window.prompt (String, Valor): Exibe uma caixa de diálogo, com uma frase representada por String, um campo de texto com um valor padrão representado por Valor. A caixa retorna o valor digitado no campo de texto caso o usuário clique em Ok, retorna null caso contrário. Exemplo : <title>window.prompt</title> <script language="javascript"> idade = prompt ("Quantos anos vc tem?", " "); if (idade!=null && idade!= " ") alert ("Vc tem "+idade+" anos"); </script> Sugestão de exercício 3: Crie um conjunto de documentos HTML e scripts que executem as seguintes funções : ao abrir a página principal, aparece uma nova tela, sem nenhum atributo de uma janela, com 300 pixels por 350 pixels, contendo um menu e um botão para fechar. Quando se clica em algum item deste menu, o documento é carregado na janela principal. Quando se fecha o menu, aparece uma caixa confirmando se realmente se deseja fechar a janela. 3) O objeto document. O objeto document representa o documento HMTL carregado no navegador. É sem dúvida o objeto mais importante do JavaScript, pois é através dele que o script tem acesso aos elementos da página. Assim como visto no objeto window, todos os elementos de uma página podem ser
12 referenciados a través de uma matriz determinada. Entre eles, os mais importantes são : document.applets : Matriz de todos os applets (programinha em javascript) de um documento. document.forms : Matriz de todos os forms de um documento. document.images : Matriz de todas as imagens contidas em um documento. document.links : Matriz de todos os anchors contidos em um documento. Assim como no objeto window, a posição de um elemento em sua respectiva matriz depende de sua posição no documento.cada elemento pode também ser acessado por seu nome, designado pelo parâmetro NAME. Por exemplo : <title>document</title> <img src="img1.gif" name="imagem1"> <FORM NAME="formulario"> <input type="buttom" value="send"> </form> <img src="img2.gif"> A primeira imagem pode ser referenciada como document.images[0] ou document.imagem1, assim como o formulário, que pode ser referenciado por document.forms[0] ou document.formulario. Porém, a segunda imagem apenas pode ser refernciada por document.images[1], uma vez que a esta não foi designado um nome. Através de document, é possível também se ter acesso às propriedades de uma página : document.bgcolor : retorna e permite modificar a cor de fundo do documento atual. document.linkcolor : retorna a cor definida para links. document.vlinkcolor : retorna a cor definida para links que já foram vistos. document.title : retorna o título do documento atual. document.url : endereço completo do documento atual. ND : por razões desconhecidas, o somente o comando document.bgcolor funciona dinamicamente no Netscape. No Explorer aparentemente todos funcionam. Para verificar se o seu navegador aceita todos os comandos, crie um arquivo novo e copie o segunte código : <title>testando as propriedades do document</title> <script language="javascript">
13 function muda_tudo (){ document.bgcolor = "#00FFAA"; document.title = "Mudou tudo"; document.linkcolor = "#000000" </script> <a href="javascript:void(0)" onclick="muda_tudo()"> Clique aqui </a> Teóricamente, ao se clicar no link, todos os parametros da página deveriam mudar. Isso não acontece no Netscape..pelo menos não na minha versão. document.clear ( ): função que apaga um documento de uma janela. Só funciona quando o script executa este comando em um documento no qual ele não está contido (outro frame ou janela, ou arquivo externo). Crie 3 arquivos e copie os códigos a seguir : main.html : <title>teste</title> <script language=javascript> function limpa () { parent.sub.document.clear(); </script> <a href="javascript:void(0)" onclick = "limpa( )">Clique aqui</a> sub.html : <title>teste</title> Voce esta no sub. frame.html: <title> Testando document</title> <frameset rows = "50%, *"> <frame name="main" src="main.html"> <frame name="sub" src="sub.html">
14 </frameset> document.open( ) : função que abre o stream do documento, ou seja, "abre" o documento para escrita. O processo é análogo ao processo de carregamento de um documento html na internet : o navegador se conecta ao servidor, e este abre uma stream, escreve os dados contidos no documento requisitado e fecha a stream. Deve ser utilizado com write e close. document.close ( ) : função que fecha a stream aberta pela função open ( ). document.write (String) : escreve a String dentro de um novo documento, cuja stream foi previamente aberta. document.writeln (String) : identico ao anterior, inserindo uma quebra de linha no final. Para explicar melhor o funcionamento destes comandos, utilize os documentos frame.html e sub.html utilizados anteriormente, e copie o seguinte código : main.html : <title>teste</title> <script language=javascript> function escreve () { parent.sub.document.open ( ) ; parent.sub.document.write ("Modificamos o texto"); parent.sub.document.close (); </script> <a href ="javascript:void(0)" onclick = "escreve( )" > Clique aqui</a> Veja que o conteúdo contido em sub.html é substituído pelo texto passado por write. Porém esta substituição é feita apenas dentro do navegador : o arquivo físico sub.html não é modificado pelo comando. Sugestão de exercício 4: Crie um script em arquivo externo que, utilizando o comando window.prompt, pergunte sucessivamente o nome, sobrenome, idade e ra, e que escreva na tela do navegador estes dados. Sugestão de exercício 5 : Dentre os vários objetos definidos em JavaScript, existe o objeto Math, que tem trabalha com funções matemáticas. A funcão Math.random( ) gera um número pseudo-aleatório entre 0 e 1, e a função Math.round( n) arredonda o número n. Utilizando estas funções e a função String.toString(16), que converte a String passada em um número em base hexadecimal crie um script que gere um fundo aleatório para uma página HTML. Lembre-se que uma cor em HTML é definida por uma string formada por # e por 3 números entre 0 e 255 escritos na base hexadecimal. (Nota : cada número deve conter 2 caracteres. Para verificar o tamanho do número gerado, use a função String.length) Java Script : Manipulando eventos.
15 1) Entendendo os eventos. Eventos, em programação, são ações que ocorrem durante a execução de um programa e que podem ser captadas e tratadas por este: cliques ou movimentos de mouse, abertura ou fechamento de uma janela ou modificação de um texto. Linguagens mais antigas como Basic ou C ANSI não implementam estes manipuladores, uma vez que na época onde foram criados, os computadores funcionavam em modo texto exclusivamente e não havia necessidade de se tratar eventos.atualmente, como grande parte dos programas são feitos para ambientes de janelas (como MacOS, Windows ou XWindows), as linguagens mais modernas orientadas a objeto como Visual Basic, Delphi ou Java, possuem métodos intrísecos para tratar estes eventos. JavaScript, que essencialmente cria pequenas aplicações gráficas ligadas à um documento HTML, implementou manipuladores de eventos específicos para o ambiente da Internet. Nos exercícios mostrados anteriormente foram utilizados alguns manipuladores, como o onclick, que trata de cliques de mouse. A seguir serão tratados os principais manipuladores. 2) Inserindo manipuladores em uma página Os manipuladores de eventos devem ser inseridos dentro das tags, uma vez que eles tratam ações ocorridas sobre objetos, tais como imagens, formularios, links, etc. A sintaxa básica é a seguinte : <TAG MANIPULADOR="ação"> onde ação pode ser instruções em JavaScript chamadas a funções. Cada objeto tem um conjunto de eventos que ele pode tratar. Nesta parte, estes serão abordados por tipo de ação. 3) Eventos ligados ao navegador e ao documento. onload : Deve ser inserido dentro das tags <BODY> e <FRAMESET> e é acionado quando a página é carregada. Copie o código abaixo e execute no navegador : <HTML> <HEAD> <TITLE>Teste</TITLE> <SCRIPT language="javascript"> function pergunta() { nome = prompt ("Qual e seu nome?", " "); document.writeln ("Bom dia "+nome+"<br>"); </SCRIPT> </HEAD> <BODY onload="pergunta ()"> </BODY> </HMTL> onunload : Identico ao anterior, porém executado quando o documento sai do navegador (caso a página seja mudada ou a janela fechada). <HTML> <HEAD> <TITLE>Teste</TITLE> <SCRIPT language="javascript"> function despedida() { alert ("Espero que tenha gostado do site. Ate breve!!!!");
16 </SCRIPT> </HEAD> <BODY onunload="despedida ()"> BLABLABLA<BR> </BODY> </HMTL> 4) Manipulando eventos do mouse Todos os manipuladores abaixo podem ser tratados por uma imagem ou por um link, e portanto devem ser colocados dentro das respectivas tags. onmouseover : Manipulador (utilizado em exemplos anteriores) acionado quando o ponteiro do mouse passa sobre um link ou sobre uma imagem. Passe o mouse sobre o link abaixo e veja o resultado no status do navegador : Passe o mouse aqui O exemplo acima foi gerado pelo código que segue : <A HREF="anywhere" onmouseover="window.status='vc pos o mouse sobre o link'; return true;"> Passe o mouse aqui</a> onmouseout : Manipulador acionado quando quando o ponteiro do mouse sai de cima de um link ou de uma imagem. Repetindo o exemplo anterior, passe o mouse sobre o link abaixo e depois tire (pelos meus testes, aparentemente não funciona com links no Netscape...vai entender!). Passe o mouse aqui O código que gerou o exemplo segue abaixo : <A HREF="anywhere" onmouseover="window.status='vc pos o mouse sobre o link'; return true;" onmouseout="window.status='vc tirou o mouse do link'; return true;">passe o mouse aqui</a> onclick : Como seu nome indica, este manipulador é executado por cliques de mouse, e pode ser usado com botões, caixas de seleção, botões de rádio, caixas e campos de texto, etc. É muito útil para se criar pseudo-links, que substituem ou melhoram a tag <a href>. Por exemplo, o código abaixo gera um falso link que acina uma caixa de alerta : <A HREF="javascript:void(0)" onclick="window.alert('este link e falso!!!!')">clique Aqui</A> O resultado é o seguinte : Clique Aqui Note que como parâmetro do href, é colocado o valor javascript:void(0). Este comando deve ser utilizado quando se deseja que um clique não carregue uma nova página no navegador. Exercício Sugerido 5: Crie um script contendo 3 funções, carrega_imagem(), troca_imagem() e muda_pagina() que crie uma imagem que mude de cor quando o mouse fica sobre ela, volta a imagem inicial quando o mouse sai, e carrega uma nova pagina quando se clica o mouse.par se criar este efeito, deve se criar primeiramente duas imagens, com as mesmas dimensões. As duas devem
17 ser carregadas previamente no cache do navegador, para deixar a animação rápida. Para isso, deve se utilizar o objeto Image, definidas em JavaScript, utilizando o código abaixo : function carrega_imagem() { <!-Declarando as imagens--> imagem1 = new Image () ; imagem2 = new Image () ; <!-Carregando as imagens no cache-> imagem1.src = "imagem1.gif"; imagem2.src = "imagem2.gif"; Uma vez as declaradas e carregadas, utiliza-se a tag img para se carregar a imagem1.gif, que será a imagem padrão, atribuindo o nome de sua escolha. Para que a imagem padrão mude, use o comando <minhaimagem>.src = <imagemnova>.src., onde <minhaimagem> é a imagem a ser atualizada e <imagemnova> é a imagem a ser colocada. Utilize as imagens abaixo para executar o script 5) Manipulando elementos de um formulário Como os formulários são uma parte importante do HTML, foram criados vários manipuladores que permitem tratar ações específicas sobre seus elementos. onblur : acionado sempre que um objeto perde o foco, ou seja, quando se seleciona um outro objeto. Na prática, deve ser usado com campos de texto. Clique no primeiro campo abaixo e em seguida no segundo e veja o resultado : O código que gerou o exemplo segue abaixo: <INPUT NAME="campo1" TYPE="text" SIZE="30" onblur="alert('vc tirou o foco do primeiro campo!')"><input NAME="campo2" TYPE="text" SIZE="30"> onfocus : Executado quando um objeto é selecionado : <INPUT NAME="campo1" TYPE="text" SIZE="30" onfocus="alert('vc acabou de me selecionar'); return true;"> onchange : parecido com onblur. É executado quando o objeto perde o foco e seu valor foi alterado. Pode ser utilizado com caixas e campos de texto. <INPUT NAME="campo1" TYPE="text" SIZE="30" onchange="alert('vc mudou o meu texto'); return true;"> onselect : Manipulador acionado quando uma caixa de texto ou campo de texto é selecionado. O efeito é muito parecido com o onfocus. onreset : Manipulador de eventos acionado sempre que o botão reset de um formulário é clicado.
18 Deve ser inserido dentro da tag <FORM>. onsubmit : Identico ao anterior, porém acionado quando o botão Submit é clicado. Copie o código abaixo e veja o resultado final. <HTML> <HEAD> <TITLE>Teste de formulario</title> <SCRIPT language="javascript"> function Confirma () { var conf = confirm ("Vc deseja mesmo apagar os dados?"); if (conf) return true; else return false; </SCRIPT> </HEAD> <BODY> <FORM NAME="formulario" onreset="return (Confirma())" onsubmit="alert('os seus dados foram enviados')"> Nome <INPUT NAME="nome" TYPE="text" SIZE="30"><BR> Sobrenome <INPUT NAME="sobrenome" TYPE="text" SIZE="30"><BR> Sexo<BR> <INPUT TYPE="radio" VALUE="M" NAME="sexo" CHECKED="1">M <INPUT TYPE="radio" VALUE="F" NAME="Sexo" >F<BR> <BR> <INPUT NAME="name" TYPE="reset" VALUE="Reset"> <INPUT NAME="name" TYPE="submit" VALUE="Submit"> </FORM> </BODY> </HTML> Java Script : Criação de um script completo O objetivo desta parte é a implementação de um script completo, utilizando os comandos vistos na partes anteriores, e aprendendo alguns não vistos ainda. Serão propostos dois pequenos projetos : um quiz e um formulário. 1) Miscelanea de funções úteis Nas partes anteriores, foram abordados os temas fundamentais de javascript. Nesta parte, serão tratados alguns métodos úteis para a construção de scripts. Para mais detalhes sobre estes métodos, é aconselhável pegar a referência oficial da linguagem no site da Netscape. Acessando elementos de um formulário : como foi visto no início deste tutorial, todos os elementos de uma página podem ser referenciados por uma matriz. Os elementos de um formulário são todos colocados dentro de uma matriz, chamada form.elements, onde a posição dentro da matriz depende da ordem que aparecem no documento HTML e form deve ser substituído pelo nome do formulário. Estes elementos também podem ser referenciados por seus nomes, atribuidos pelo parâmetro name, pelo comando form.nomedoelemento. Tratando elementos de um formulário : Para cada elemento de um formulário, existe uma série de métodos pré definidos, dos quais alguns serão vistos aqui.
19 Campo de texto e password : pode se acessar o valor atual de um campo de text através do paramatro nomedocampo.value, que retorna a string contida nele. É possível tambem fazer com que uma caixa de texto seja selecionada (destacada) automaticamente utilizando o comando nomecampo.select (). O comando nomecampo.focus () põe o foco no campo desejado. Botões de rádio e caixas de seleção: Podem ser acessados por nomeform.nomebotao[n], onde n representa o enésimo botão de rádio ou caixa de seleção ligado à uma mesma variável. É possível também acessar o seu valor, definido pelo parâmetro value, utilizando form.nomedobotao[n].value, que retorna uma string, assim como saber se este está ou não selecionada, utilizando checked (para botões de rádio) ou selected (para caixas de seleção), que retornam true ou false. Objeto string : O objeto String possue métodos para trabalhar com frases. Serão vistos aqui alguns deles. nomestring.lenght : Retorna o tamanho da string nomestring nomestring.charat (n) : retorna o n-ésimo caractere da string nomestring nomestring.indexof (c) : retorna a posição do caractere c na string nomestring, retornando -1 caso não seja encontrado nenhuma ocorrência nomestring.lastindexof(c) : retorna a última ocorrência do caractere c na string nomestring, retornando -1 caso não seja encontrado. nomestring.substring (n, m) : retorna um substring de nomestring, começando no caractere n e acabando no caractere m de nomestring Objeto Date : O objeto Date permite ao script acessar a data local da máquina do usuário, alem de manipular datas e horas com facilidade. Para poder utilizar este objeto, é necessário declara-lo da seguinte forma : var minhadata = new Date (). Automaticamente é criado um objeto data com a data atual. Se desejado, pode-se passar como argumento uma data específica, como por exemplo var minhadata = new Date ("December 25, 1999") ou então var minhadata = new Date (99, 25, 12), que criam um objeto Date com a data do natal de Internamente, a data é armazenada como o número de milésimos de segundos passados desde 1 /01/ portanto não se pode declarar uma data anterior a esta. Os métodos existentes são : minhadata.getdate () : retorna o dia do mês, de 1 a 31 minhadata.getday () : retorna o dia da semana, de 0 a 6 minhadata.gethours () : retorna a hora atual, de 0 a 23 minhadata.getminute () : retorna os minutos, de 0 a 59 minhadata.getmonth () : retorna o número do mês corrente, de 0 a 11 minhadata.getseconds () : retorna os segundos correntes, de 0 a 59 minhadata.gettime () : retorna o número de milésimos de segundos transcorridos desde 1/01/1970 as 00:00 hs. Curiosidade : Para se criar um contador de quantos dias faltam para o verdadeiro século 21, por exemplo, basta criar 2 objetos data, um com a data corrente e outro com a data de 01/01/2001. Utilizando o método gettime, obtem-se o número de milésimos de segundos transcorridos para as duas datas, calcula-se a diferença, e divide-se este resultado por (1000*60*60*24). Objeto Math : Fornece métodos matemáticos Math.E : retorna a constante de Euler e ( ) Math.PI : retorna a constante pi ( ) Math.abs (n) : retorna o valor absoluto de n Math.ceil (n) : retorna o teto de n Math.floor (n) : retorna o piso de n
20 Math.round : arredonda o valor de n Math.random : gera um número pseudo-aleatório entre 0 e 1 Math.sqrt (n) : retorna a raiz quadrada de n Math.log (n) : retorna o logaritmo natural de n Math.pow (n, m) : retorna n elevado a m Math.cos (n) : retorna o cosseno de n (em radianos) Math.sin (n) : retorna o seno de n (em radianos) Math.tan (n) : retorna a tangente de n (em radianos) Math.acos (n) : retorna o arcocosseno de n Math.asin (n) : retorna o arcoseno de n Math.atan (n) : retorna o arcotangente de n 2) Construção de um formulário. Como ja foi dito, os scripts foram criados para complementar ou substituir scripts CGI server side. O objetivo desta parte é a implementação de um script que verifique os dados de um formulário, antes que este seja enviado ao servidor, ou simplesmente enviado por . Especificações : Utilize o formulário abaixo para facilitar o trabalho. Quando o usuário apertar o botão enviar, o script deve verificar se os campos obrigatórios estão completados (nome, sobrenome e ): caso estejam, uma nova página aparece agradecendo a visita, colocando os dados e pedindo para confirma-los; caso contrário, uma caixa de alerta deve aparecer indicando qual o campo que não está correto. Quando apertar o botão reset, deverá mostrar uma caixa confirmando a escolha. Após o usuário ter completado o , uma função deverá verificar se este parece correto : caso não esteja, uma caixa de alerta deverá aparecer e este campo será apagado. <FORM NAME="formulario"> Nome <INPUT NAME="name" TYPE="text" SIZE="30"><BR> Sobrenome<INPUT NAME="nome" TYPE="text" SIZE="30"><BR> <INPUT NAME="sobrenome" TYPE="text" SIZE="30"><BR> Telefone <INPUT NAME="tel" TYPE="text" SIZE="10"><BR> Sexo <INPUT TYPE="radio" VALUE="M" NAME="sexo">M <INPUT TYPE="radio" VALUE="F" NAME="sexo"> F<BR> <BR> Onde ficou sabendo do site? <INPUT TYPE="radio" VALUE="Internet" NAME="onde">Internet <INPUT TYPE="radio" VALUE="Revista" NAME="onde">Revista <INPUT TYPE="radio" VALUE="Televisao" NAME="onde">Televisão <BR><BR> Algum comentário sobre o site? <TEXTAREA NAME="name" ROWS="7" COLS="27"></TEXTAREA> </FORM> 3) Construção de um quiz Quiz é um jogo de perguntas onde o jogador deve responder corretamente `a uma série de perguntas de múltipla escolha. O objetivo deste projeto é implementar este jogo em JavaScript, através de um conjunto de funções agrupadas em um arquivo externo. Especificações : o script deverá abrir uma janela, sem barra de status, diretórios, navegação. Inicialmente o jogador deverá digitar seu nome e escolher o nível de dificuldade das perguntas. Uma vez iniciado o jogo, aparecerá na tela uma pergunta e 4 opções de resposta diferentes. Para escolher a resposta, o jogador clicará sobre esta e uma nova tela aparecerá indicando se a resposta
21 está certa ou não. Ao final da bateria de perguntas, deverá aparecer a pontuação final do jogador e a opção de recomeçar a bateria ou sair do jogo. Sugestão 1: para armazenar as perguntas e respostas, crie matrizes. (Pode se criar matrizes bidimensionais, utilizando a sintaxe nomematrix[n][m]. Sugestão 2: para que a sequencia de perguntas não sempre seja a mesma, crie uma maneira de variar a ordem ou a sequencia de perguntas, dependendo de numeros gerados aleatoriamente ou do dia, hora, etc...
Utilizando Janelas e Frames
Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já
Leia maisLista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
Leia mais4. A Linguagem JavaScript
4. A Linguagem JavaScript! A linguagem XHTML, por não ser uma linguagem de programação e sim uma linguagem de marcação, não permite interação entre o usuário e a página, além de clicar em um link, fazendo
Leia maisCriando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa
Leia maisTecnologias para Web Design
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
Leia maisJavaScript (Funções, Eventos e Manipulação de Formulários)
Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos
Leia maisO código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.
1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente
Leia maisExercícios Práticos de HTML e JavaScript. <FORM ACTION="mailto:teste@gmail.com" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">
Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript
Leia maisJavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com
JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir
Leia maisO que é o Javascript?
O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades
Leia maisTecnologias para apresentação de dados - Java Script. Aécio Costa
Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem
Leia maisProf Evandro Manara Miletto. parte 2
Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite
Leia maisConteúdo. DHTML tópicos Hamilton Lima - 2002-2004
DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis
Leia maisINTRODUÇÃO AO DESENVOLVIMENTO WEB
INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que
Leia maisO que é o JavaScript?
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
Leia maisProgramando em PHP. Conceitos Básicos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web
Leia mais1-03/11/03 INTRODUÇÃO
1-03/11/03 INTRODUÇÃO JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,
Leia maisPROGRAMAÇÃO WEB DO LADO DO CLIENTE
PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,
Leia maisProgramação para Internet I
Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode
Leia maisindica o nome do campo pelo qual podemos acessar.
Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,
Leia maisJava Script Pág: 1. Índice
Java Script Pág: 1 Índice Índice... 1 Introdução ao JavaScript Básico... 2 Configurações... 2 Usando o Java Script.... 2 Comandos: script language - alert - /script... 3 Variáveis... 4 Regras para criar
Leia maisScriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
Leia maisIncorporando JavaScript em HTML
Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir
Leia maisJavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Leia maisHTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Leia maismkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Leia maisMANUAL DO ANIMAIL 1.0.0.1142 Terti Software
O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,
Leia maisMais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
Leia maisMicrosoft Office PowerPoint 2007
INTRODUÇÃO AO MICROSOFT POWERPOINT 2007 O Microsoft Office PowerPoint 2007 é um programa destinado à criação de apresentação através de Slides. A apresentação é um conjunto de Sides que são exibidos em
Leia maisManual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania
Manual de Publicaça o no Blog da Aça o TRIBOS nas Trilhas da Cidadania Sumário Objetivos do Blog... 2 Log-in... 3 Esqueci minha senha... 4 Utilizando o Blog... 5 Encontrando seu Blog... 5 Conhecendo o
Leia maisUNIVERSIDADE FEDERAL DO AMAPÁ NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO. Manual de Avaliação de Desempenho Cadastro
UNIVERSIDADE FEDERAL DO AMAPÁ NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO Manual de Avaliação de Desempenho Cadastro UNIFAP MACAPÁ-AP 2013 S U M Á R I O 1 Tela de Login...2 2 Acessando ao submenu cadastro de avaliação
Leia maisMANUAL DO PVP SUMÁRIO
Manual PVP - Professores SUMÁRIO 1 INTRODUÇÃO... 6 2 ACESSANDO O PVP... 8 3 TELA PRINCIPAL... 10 3.1 USUÁRIO... 10 3.2 INICIAL/PARAR... 10 3.3 RELATÓRIO... 10 3.4 INSTITUIÇÕES... 11 3.5 CONFIGURAR... 11
Leia maisWEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para
Leia mais02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Leia maisInformática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1
Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
Leia maisAula de JavaScript 05/03/10
Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive
Leia maisW o r d p r e s s 1- TELA DE LOGIN
S U M Á R I O 1Tela de Login...2 2 Painel......3 3 Post...4 4 Ferramentas de Post...10 5 Páginas...14 6 Ferramentas de páginas...21 7 Mídias...25 8 Links......30 1 1- TELA DE LOGIN Para ter acesso ao wordpress
Leia maisConteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web
Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de
Leia maisMANUAL DE UTILIZAÇÃO SISTEMA DE CADASTRO INTRANET
MANUAL DE UTILIZAÇÃO SISTEMA DE CADASTRO INTRANET I Sumário 1. Objetivo do Documento... 1 2. Início... 1 3. Cadastro de Pessoa Física... 3 3.1. Preenchimentos Obrigatórios.... 4 3.2. Acesso aos Campos
Leia mais0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.
IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários
Leia maisManual SAGe Versão 1.2 (a partir da versão 12.08.01)
Manual SAGe Versão 1.2 (a partir da versão 12.08.01) Submissão de Relatórios Científicos Sumário Introdução... 2 Elaboração do Relatório Científico... 3 Submissão do Relatório Científico... 14 Operação
Leia maisOs componentes de um formulário são: Form, Input, Select e AreaText
HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados
Leia maisResumo da Matéria de Linguagem de Programação. Linguagem C
Resumo da Matéria de Linguagem de Programação Linguagem C Vitor H. Migoto de Gouvêa 2011 Sumário Como instalar um programa para executar o C...3 Sintaxe inicial da Linguagem de Programação C...4 Variáveis
Leia maisPrimeiro contato com JavaScript
Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos
Leia maisTema UFPel 2.0 WP Institucional Guia de Opções de Personalização
Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de
Leia maisOs objetivos indicados aplicam-se a duas linguagens de programação: C e PHP
AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de
Leia maisConstrutor de sites SoftPixel GUIA RÁPIDO - 1 -
GUIA RÁPIDO - 1 - Sumário Introdução...3 Por que utilizar o Construtor de Sites?...3 Vantagens do Construtor de Sites...3 Conceitos básicos...3 Configuração básica do site...5 Definindo o layout/template
Leia maisFormulário (Send & Recieve) Prof. Celso H. Masotti
Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)
Leia maisTutorial do administrador do HelpCenterLive (Sistema de Ajuda)
Tutorial do administrador do HelpCenterLive (Sistema de Ajuda) Sumário Introdução...3 Entrar (Login)...3 Página Inicial (Home Page)...4 Ajuda...5 Conversação (Chat)...6 Mensagens Registradas...7 Registros...8
Leia maisFerramentas para Multimídia e Internet - 1486
1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato
Leia maisManual da Administração do site Abrasel 2.0
Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias
Leia maisIntrodução ao Javascript
Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação
Leia maisProgramação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua
Leia maisIniciação à Informática
Meu computador e Windows Explorer Justificativa Toda informação ou dado trabalhado no computador, quando armazenado em uma unidade de disco, transforma-se em um arquivo. Saber manipular os arquivos através
Leia maisJavaScript (ou JScript)
1. Introdução JavaScript (ou JScript) Uma linguagem como o JavaScript permite criar interfaces interativas na web (permite a interação do usuário). Para desenvolver web sites interativos precisamos de
Leia maisIntrodução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário
Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços
Leia maisDOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
Leia maisProjeto ECA na Escola - Plataforma de Educação à Distância
Página1 Apresentação Projeto ECA na Escola - Plataforma de Educação à Distância Olá Participante do Projeto ECA na Escola, Este tutorial pretende auxiliá-lo na navegação na Plataforma de Educação à Distância
Leia maisCOMO FUNCIONA UM FORMULÁRIO
FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,
Leia maisSumário. Tutorial: Editor de Exercícios Online para o professor
1 Sumário Inserir Exercícios... 4 Minhas Avaliações... 5 Cadastrar perguntas... 7 Inserindo imagens... 10 Inserindo arquivos... 13 Inserindo vídeos... 15 Gerenciador de fórmulas e equações matemáticas...
Leia maisTutorial Gerar arquivo PDF. Gerando um documento pdf com várias imagens 1- Inserir imagem no Word
Tutorial Gerar arquivo PDF. Com o objetivo de simplificar e diminuir o tamanho de arquivos anexos nos projetos, elaboramos um pequeno tutorial mostrando como gerar um único arquivo no formato pdf contendo
Leia maisFORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)
FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário
Leia maisProgramação Web Prof. Wladimir
Programação Web Prof. Wladimir Linguagem de Script e PHP @wre2008 1 Sumário Introdução; PHP: Introdução. Enviando dados para o servidor HTTP; PHP: Instalação; Formato básico de um programa PHP; Manipulação
Leia maisBem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
Leia maisStatus. Barra de Título. Barra de Menu. Barra de. Ferramentas Padrão. Caixa de nomes. Barra de. Ferramentas de Formatação. Indicadores de Coluna
O que é uma planilha eletrônica? É um aplicativo que oferece recursos para manipular dados organizados em tabelas. A partir deles pode-se gerar gráficos facilitando a análise e interpretação dos dados
Leia maisANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007
ANDRÉ APARECIDO DA SILVA APOSTILA BÁSICA SOBRE O POWERPOINT 2007 CURITIBA 2015 2 SUMÁRIO INTRODUÇÃO AO MICROSOFT POWERPOINT 2007... 3 JANELA PRINCIPAL... 3 1 - BOTÃO OFFICE... 4 2 - FERRAMENTAS DE ACESSO
Leia maisUniversidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:
Leia maisManual de Gerenciamento de Conteúdo
Manual de Gerenciamento de Conteúdo 1 Sumário 1) O que é um Gerenciador de Conteúdo...3 2) Como o Site está Estruturado...3 3) Como Gerenciar o Conteúdo do Site...5 3.1) Adicionar Itens no Menu de Navegação...6
Leia maisManual das funcionalidades Webmail AASP
Manual das funcionalidades Webmail AASP 1. Configurações iniciais 2. Regras 3. Histórico da conta 4. Autorresposta 5. Dados de acesso (alterando senha de acesso) 6. Identidade (assinatura) 7. Redirecionamento
Leia maisPassa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
Leia maisOrientação a Objetos
1. Domínio e Aplicação Orientação a Objetos Um domínio é composto pelas entidades, informações e processos relacionados a um determinado contexto. Uma aplicação pode ser desenvolvida para automatizar ou
Leia maisComo funciona? SUMÁRIO
SUMÁRIO 1. Introdução... 2 2. Benefícios e Vantagens... 2 3. Como utilizar?... 2 3.1. Criar Chave / Senha de Usuário... 2 3.2. Recursos da Barra Superior... 2 3.2.1. Opções... 3 3.2.1.1. Mover Para...
Leia maisComo Gerar documento em PDF com várias Imagens
Como Gerar documento em PDF com várias Imagens Para Gerar documento em PDF com várias Imagens, temos que seguir dois passos: 1. Inserir Imagens no Word 2. Gerar PDF a partir de documento do Word 1- Inserir
Leia maisIntrodução. História. Como funciona
Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado
Leia maisFCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos Manual do Usuário Presidente Prudente, outubro de 2010 Índice 1. Introdução e Instruções
Leia maisAtalhos da Web. Krishna Tateneni Yves Arrouye Tradução: Lisiane Sztoltz
Krishna Tateneni Yves Arrouye Tradução: Lisiane Sztoltz 2 Conteúdo 1 Atalhos da Web 4 1.1 Introdução.......................................... 4 1.2 Atalhos da Web.......................................
Leia mais1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela?
Exercícios sobre Linguagem PHP: 1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela? 2) Considere a linguagem de programação PHP e seus operadores. A execução da sentença:
Leia maisPÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL
PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,
Leia maisFERRAMENTAS DE COLABORAÇÃO CORPORATIVA
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...
Leia maisManual de configuração do sistema
Manual de configuração do sistema (v.1.5.x Beta) Rua México, 119 Sala 2004 Centro Rio de Janeiro, RJ www.doctors-solution.com.br www.simdoctor.com.br contato@simdoctor.com.br Sumário 1. Fazendo seu primeiro
Leia maisAlgoritmos em Javascript
Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays
Leia maisSumário. 1 Tutorial: Blogs no Clickideia
1 Tutorial: Blogs no Clickideia Sumário Introdução... 2 Objetivos... 2 Instruções para utilização do Tutorial... 2 Acesso ao Portal e a Home Blog... 3 Página Inicial da área do Blog... 4 Apresentação da
Leia maisProgramação Web Prof. Wladimir
Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento
Leia maisDesenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes
Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,
Leia maisBanco de Dados Microsoft Access: Criar tabelas. Vitor Valerio de Souza Campos
Banco de Dados Microsoft Access: Criar tabelas Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma tabela no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na tabela.
Leia maisMANUAL PORTAL CLIENTE AVANÇO
MANUAL PORTAL CLIENTE AVANÇO [Digite seu endereço] [Digite seu telefone] [Digite seu endereço de email] MANUAL MANUAL AVANÇO INFORMÁTICA AVANÇO INFORMÁTICA Material Desenvolvido para Suporte Avanço Autor:
Leia maisA lógica de programação ajuda a facilitar o desenvolvimento dos futuros programas que você desenvolverá.
INTRODUÇÃO A lógica de programação é extremamente necessária para as pessoas que queiram trabalhar na área de programação, seja em qualquer linguagem de programação, como por exemplo: Pascal, Visual Basic,
Leia maisAs janelas do browser
Capítulo 5 As janelas do browser 5 As janelas do browser A JANELA DO BROWSER é manipulável de várias formas através da linguagem JavaScript. Pode-se alterar dinamicamente várias de suas características
Leia maisAdapti - Technology Solutions www.adapti.net Leonor cardoso nº 331 Fone : (041) 8844-7805 81240-380 Curitiba - PR MANUAL DO USUÁRIO
MANUAL DO USUÁRIO 1 Índice Administração de Documentos...2 Lista de documentos criados...3 Criando um novo documento...3 Barra de ferramentas do editor...4 Editando um documento...7 Administrando suas
Leia maisTrecho retirando do Manual do esocial Versão 1.1
Trecho retirando do Manual do esocial Versão 1.1 A rotina de acesso direto ao XML do S-1000, o usuário pode encontrar na opção de cadastro de Empresas do SIP. Sempre que o usuário localizar a figura ao
Leia maisRespondendo a eventos
Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a
Leia maisCurso Online A Escola no Combate ao Trabalho Infantil Plataforma de Educação à Distância
Página1 Apresentação Curso Online A Escola no Combate ao Trabalho Infantil Plataforma de Educação à Distância Olá Participante do Curso A Escola no Combate ao Trabalho Infantil (ECTI), Este tutorial pretende
Leia maisNoções de. Microsoft SQL Server. Microsoft SQL Server
Noções de 1 Considerações Iniciais Basicamente existem dois tipos de usuários do SQL Server: Implementadores Administradores 2 1 Implementadores Utilizam o SQL Server para criar e alterar base de dados
Leia maisManual Captura S_Line
Sumário 1. Introdução... 2 2. Configuração Inicial... 2 2.1. Requisitos... 2 2.2. Downloads... 2 2.3. Instalação/Abrir... 3 3. Sistema... 4 3.1. Abrir Usuário... 4 3.2. Nova Senha... 4 3.3. Propriedades
Leia maisManual do Google agenda. criação e compartilhamento de agendas
Manual do Google agenda criação e compartilhamento de agendas 1 O que é o Google Agenda? Google Agenda é um serviço de agenda on line gratuito do Google, onde você pode anotar compromissos e tarefas, organizando
Leia maisManual do Painel Administrativo
Manual do Painel Administrativo versão 1.0 Autores César A Miggiolaro Marcos J Lazarin Índice Índice... 2 Figuras... 3 Inicio... 5 Funcionalidades... 7 Analytics... 9 Cidades... 9 Conteúdo... 10 Referência...
Leia maisConReDIs: Construção de Redes sociais para Idosos. Tutorial do Facebook
ConReDIs: Construção de Redes sociais para Idosos Tutorial do Facebook Autora: Edimara Heis 1 Sumário 1. O que é o Facebook?... 3 2. Como faço para cadastrar-me no Facebook?... 3 2.1 Etapa 1... 5 2.2 Etapa
Leia maisBanco de Dados Microsoft Access: Criar tabelas
Banco de Dados Microsoft Access: Criar s Vitor Valerio de Souza Campos Objetivos do curso 1. Criar uma no modo de exibição Folha de Dados. 2. Definir tipos de dados para os campos na. 3. Criar uma no modo
Leia mais3. No painel da direita, dê um clique com o botão direito do mouse em qualquer espaço livre (área em branco).
Permissões de compartilhamento e NTFS - Parte 2 Criando e compartilhando uma pasta - Prática Autor: Júlio Battisti - Site: www.juliobattisti.com.br Neste tópico vamos criar e compartilhar uma pasta chamada
Leia mais