Dicas para Javascript (parte1) <style TYPE="text/css"><!--a.menu {color:000000;}a.menu:hover {color:cc0000;}-- ></style>



Documentos relacionados
Utilizando Janelas e Frames

Aula de JavaScript 05/03/10

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

Dicas para Javascript (parte2) 21 - IMPEDIR DIGITAÇÃO DE CARACTERES NÃOO NUMÉRICOS

1) Como acessar a aplicação

Manual do Publicador. Wordpress FATEA Sistema de Gerenciamento de Conteúdo Web

Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos

Passa a passo para construir uma página pessoal - Parte 1

Exercícios Práticos de HTML e JavaScript. <FORM ACTION="mailto:teste@gmail.com" METHOD="POST" ENCTYPE="text/plain" NAME="cadastro">

JavaScript (Funções, Eventos e Manipulação de Formulários)

1 UNIT Universidade do Trabalhador Dr. Abel dos Santos Nunes

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br Escola CDI de Videira

Criando um script simples

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

Programação para Internet I

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

Bem vindo ao ajuda do software QUICKFISH para criação de sites.

Como Gerar documento em PDF com várias Imagens

SMS Corporativo Manual do Usuário

Tutorial Plone 4. Manutenção de Sites. Universidade Federal de São Carlos Departamento de Sistemas Web Todos os direitos reservados

Manual do Painel Administrativo

O que é o JavaScript?

ASSOCIAÇÃO CRISTÃ DE MOÇOS DO RIO GRANDE DO SUL DEPARTAMENTO DE TECNOLOGIA DA INFORMAÇÃO

Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção

Coleção - Análises de marketing em clientes de

Tutorial Gerar arquivo PDF. Gerando um documento pdf com várias imagens 1- Inserir imagem no Word

Crie um novo documento de mais ou menos 300x300Selecione a ferramenta Elipse tool (elipse U)

Programação para Internet

Personalizações do mysuite

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

Apostila de criação de website

CURSO DE INFORMÁTICA BÁSICA AULA 2 O AMBIENTE WINDOWS

Google Drive: Acesse e organize seus arquivos

AJAX no GASweb. Mas e afinal, para que usamos o AJAX?

INTRODUÇÃO AO WINDOWS

Posicionamento e Layout com CSS

Conteúdo. DHTML tópicos Hamilton Lima

Banner Flutuante. Dreamweaver

CONSTRUÇÃO DE BLOG COM O BLOGGER

Facebook Instruções de integração com PayPal

App - Paint Pot (Lata de tinta)

Mais sobre uso de formulários Site sem Ajax

UNIVERSIDADE ESTADUAL DE CAMPINAS. Instruções para Uso do Software VISIO

Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.

SIMULADOS & TUTORIAIS

Iniciando o MySQL Query Brower

índice I. Introdução Procedimentos básicos V. Prontuário Configurações VII. Medicamentos VIII. Tags

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

Terceiro Milênio Informática

Ajax Asynchronous JavaScript and Xml

Manual da Administração do site Abrasel 2.0

Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!

Coleção - Análises de marketing em clientes de

E&L Protocolo, Documentos Eletrônicos e Processos Perguntas Frequentes

OPENOFFICE PLANILHA SEMANA 4

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

Sumário: Fluxo Operacional... 3 Contatos Agenda Online Reservas de Salas Tarefas... 42

MANUAL DO INSTAR-MAIL 1.0. Pagina de login e senha do Instar-Mail

Como incluir artigos:

Introdução aos critérios de consulta. Um critério é semelhante a uma fórmula é uma cadeia de caracteres que pode consistir em

Manual Sindicatos. Gerenciador de conteúdo

Manual de utilização do Portal Entrelace.org.br. William Oyama

Tutorial de aprendizado para adicionar conteúdo no site

Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas

Coleção - Análises de marketing em clientes de

TUTORIAL DE COMPRAS ERP JAD

Portal da Prefeitura de São Paulo SECOM. MANUAL DO WARAM v. 1.5 Secretarias

Gerenciamento de Contatos

Guia Site Empresarial

FERRAMENTAS DE COLABORAÇÃO CORPORATIVA

Universidade Federal de Santa Maria UFSM Centro de Tecnologia CT. Power Point. Básico

4. A Linguagem JavaScript

COMO USAR DOIS MONITORES NO WINDOWS 8

Como criar pastas personalizadas e novas peças no Toolbox

Lição 1 - Criação de campos calculados em consultas

7. Cascading Style Sheets (CSS)

Permissão de Usuários

Tutorial USERADM Como inserir conteúdo no Portal Transparência

Manual do Atendente. Treinamento OTRS Help Desk

JSP - ORIENTADO A OBJETOS

Tutorial USERADM. Inserindo conteúdos no site

APÊNDICES. Curso de Word Avançado Adicione um apêndice ao seu documento

Manual WebAdmin News

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

OBS: Se aparecer o aviso HIC SUNT DRACONES, clique em Serei cuidadoso, prometo!.

COLÉGIO ESTADUAL PAULO LEMINSKI APOSTILA SOBRE O BROFFICE IMPRESS

Imagens: <img src="..."> src <img src="tecnologia.jpg"> único atributo que não pode ser omitido neste TAG Nota: img

CRIANDO BANCOS DE DADOS NO SQL SERVER 2008 R2 COM O SQL SERVER MANAGEMENT STUDIO

REITORA Ulrika Arns. VICE-REITOR Almir Barros da Silva Santos Neto. DIRETOR DO NTIC Leonardo Bidese de Pinho

Web Design. Prof. Felippe

3. No painel da direita, dê um clique com o botão direito do mouse em qualquer espaço livre (área em branco).

BEM-VINDO AO dhl PROVIEW

Poder Judiciário Tribunal Regional Federal da Terceira Região

Sumário. Tutorial: Editor de Exercícios Online para o professor

Sistema de Gerenciamento Remoto

Transcrição:

Dicas para Javascript (parte1) 1 - DETECTANDO A RESOLUÇÃO DO USUÁRIO <html> <head> <style TYPE="text/css"><!--a.menu {color:000000;a.menu:hover {color:cc0000;-- ></style> <title>daniel Raffide - Javascripts</title> </head> <body TEXT="white" BGCOLOR="#000000" LINK="lightblue" VLINK="lightblue" ALINK="lightblue"> <p align="center"><br> <script language="javascript1.2"> <!-- document.writeln("<font face='arial' color=lightblue size=-1>sua resolução está configurada para: </font> " + screen.width + "x" + screen.height +""); document.writeln("" + screen.pixeldepth + " <font face='arial' color=lightblue size=-1>bit cores</font>"); //--> </script> </p> </body> </html>

2 - MENU DE LINKS <html> <head><!-- CSS - A linha abaixo não faz parte do Script --> <link rel="stylesheet" href="link.css" TYPE="text/css"> <!-- CSS - A linha acima não faz parte do Script --> <script>window.defaultstatus = "Exemplo JavaScript" </script> <title>daniel Raffide - Javascripts</title> </head> <body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#c0c0c0" alink="#f7c735"> <p align="center"><strong><font face="times New Roman">Você usa</font></strong><small><font face="arial"> </font></small> <!------------------------------- Script Começa Aqui --------------------------------> <script LANGUAGE="JavaScript"><!-- document.write("<b>"+navigator.appname+"</b><p>"); // --></script> <!------------------------------- Script Termina Aqui -------------------------------- > </p> </body> </html> 3 - DESCRIÇÃO EM LINKS (TOOLTIPTEXT) <html>

<head><!-- CSS - A linha abaixo não faz parte do Script --> <link rel="stylesheet" href="link.css" TYPE="text/css"> <!-- CSS - A linha acima não faz parte do Script --> <script>window.defaultstatus = "Exemplo JavaScript" </script> <title>daniel Raffide - Javascripts</title> </head> <body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#c0c0c0" alink="#f7c735"> <p align="center"><strong><font face="times New Roman">Você usa</font></strong><small><font face="arial"> </font></small> <!------------------------------- Script Começa Aqui --------------------------------> <script LANGUAGE="JavaScript"><!-- document.write("<b>"+navigator.appname+"</b><p>"); // --></script> <!------------------------------- Script Termina Aqui -------------------------------- > </p> </body> </html> 4 - JANELA SEM BOTÕES NEM MENU <html> <head><!-- CSS - A linha abaixo não faz parte do Script -->

<link rel="stylesheet" href="link.css" TYPE="text/css"> <!-- CSS - A linha acima não faz parte do Script --> <script>window.defaultstatus = "Exemplo JavaScript" </script> <title>daniel Raffide - Javascripts</title> </head> <body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#c0c0c0" alink="#f7c735"> <p align="center"><strong><font face="times New Roman">Você usa</font></strong><small><font face="arial"> </font></small> <!------------------------------- Script Começa Aqui --------------------------------> <script LANGUAGE="JavaScript"><!-- document.write("<b>"+navigator.appname+"</b><p>"); // --></script> <!------------------------------- Script Termina Aqui -------------------------------- > </p> </body> </html> 5 - FIGURA SENSÍVEL AO MOUSE <html> <head><!-- CSS - A linha abaixo não faz parte do Script --> <link rel="stylesheet" href="link.css" TYPE="text/css"> <!-- CSS - A linha acima não faz parte do Script -->

<script>window.defaultstatus = "Exemplo JavaScript" </script> <title>daniel Raffide - Javascripts</title> </head> <body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#c0c0c0" alink="#f7c735"> <p align="center"><strong><font face="times New Roman">Você usa</font></strong><small><font face="arial"> </font></small> <!------------------------------- Script Começa Aqui --------------------------------> <script LANGUAGE="JavaScript"><!-- document.write("<b>"+navigator.appname+"</b><p>"); // --></script> <!------------------------------- Script Termina Aqui -------------------------------- > </p> </body> </html> 6 - BOM DIA, BOA TARDE, BOA NOITE <html> <head><!-- CSS - A linha abaixo não faz parte do Script --> <link rel="stylesheet" href="link.css" TYPE="text/css"> <!-- CSS - A linha acima não faz parte do Script --> <script>window.defaultstatus = "Exemplo JavaScript" </script> <title>daniel Raffide - Javascripts</title>

</head> <body bgcolor="#ffffff" text="#000000" link="#000080" vlink="#c0c0c0" alink="#f7c735"> <p align="center"><strong><font face="times New Roman">Você usa</font></strong><small><font face="arial"> </font></small> <!------------------------------- Script Começa Aqui --------------------------------> <script LANGUAGE="JavaScript"><!-- document.write("<b>"+navigator.appname+"</b><p>"); // --></script> <!------------------------------- Script Termina Aqui -------------------------------- > </p> </body> </html> 7 - VOLTAR À PÁGINA ANTERIOR... onclick = "history.go(-1)"> <a href="javascript:history.go(-1)">voltar</a> OU history.back() 8 - PASSANDO VARIÁVEIS DO PHP PARA O JAVASCRIPT Se você estiver usando post, pode criar um hidden field e fazer algo do tipo:

document.forms[0].nomedohiddenfield.value = "valorquequerpassarparaphp"; document.forms[0].submit(); Se usar get, pode fazer algo do tipo: document.write('<a href="programadephp.php?nomedavariavel=' + valordavariavelparaphp + '">O programa</a>'); Espero que isto ajude. Boa sorte, Josué 9 - ABRIR PÁGINA PHP DENTRO DE JAVASCRIPT window.location.href='pagina.php' 10 - MISTURANDO JAVASCRIPT COM PHP //O script PHP é aberto naturalmente <script language="javascript"> function SelectEst() { if(document.cadastro.cidade.value.length==0){ alert("selecione uma cidade, caso não tenha, adicione uma nova!"); document.cadastro.cidade.focus(); return false;

<? $sql="select estado FROM cidades WHERE tabcid=$cidade"; $res=myexec($con,$sql); document.cadastro.estado.value=mysql_result($res,0,"estado");?> return true; </script> Giovanny Gonçalves Petrolina-PE Outro: <? function crono($minutos){?> <script language="javascript"> //Iniciar Cronometro var minut1 = <?echo ($minutos);?>, seg1 = 00;... </script> Já para abrir o Javascript dentro do PHP:

- Fechamos o PHP - Abrimos o JavaScript - Abrimos novamente o PHP 11 - SUBSTRINGS Trabalhando com Substrings Trabalhamos até aqui, utilizando apenas as strings inteiras, mas na maioria das vezes também nos é necessário saber o conteúdo de partes separadas de uma string, para isso o JavaScript nos permite manusear partes de uma string através do método substring(). O método substring() retorna uma string consistindo em uma parte da string original entre dois valores de índice, que devemos especificar entre parênteses. Por exemplo, a seguinte instrução exibe o quarto, o quinto e o sexto caracteres da string Teste: document.write(teste.substring(3,6); A esse ponto, você provavelmente está se perguntando de onde vêm o 3 e o 6. Há três coisas que você precisa entender sobre os parâmetros de índice: - A indexação inicia com 0 para o primeiro caractere da string, então o quarto caractere é realmente o 3. - O segundo índice é não inclusivo. Um segundo índice de 6 inclui até o índice 5 (o sexto caractere). - Podemos especificar os índices em qualquer forma, mas o JavaScript assumirá sempre que o índice menor é o primeiro índice. Como outro exemplo, suponhamos que temos uma string chamada Alfabeto: Alfabeto = "ABCDEFGHIJKLMNOPQRTUVWXYZ";

Os seguintes são exemplos do método substring() utilizando essa string: Alfabeto.substring(0,4) retorna ABCD; Alfabeto.substring(10,12) retorna KL; Alfabeto.substring(12,10) também retorna KL. Porque é menor 10, é utilizado como o primeiro índice; Alfabeto.substring(6,7) retorna G; Alfabeto.substring(24,26) retorna YZ; Alfabeto.substring(0,26) retorna o alfabeto inteiro; Alfabeto.substring(6,6) retorna o valor nulo, uma string vazia. Isso é verdadeiro sempre que os dois valores de índice são os mesmos. 12 - RETORNAR UM CARACTERE ESPECÍFICO DE UMA POSIÇÃO Outro método interessante é o charat, que é uma maneira fácil de se pegar um único caractere de uma string. Devemos apenas especificar o índice do caractere entre parênteses, lembrando que o primeiro caractere corresponde ao índice 0: Alfabeto.charAt(0) retorna A; Alfabeto.charAt(12) retorna M; Alfabeto.charAt(25) retorna Z; Alfabeto.charAt(27) retorna uma string vazia porque não há nenhum Alfabeto nessa posição. 13 - LOCALIZAR SUBSTRING DENTRO DE STRING Quanto à localização de substrings dentro de uma string, o objeto String ainda possui os seguintes métodos: IndexOf - utilizado para localizar uma string dentro de outra string:

Resultado = Alfabeto.indexOf("JKL"); O valor retornado na variável Resultado é um índice na string, semelhante ao primeiro índice no método substring. O primeiro caractere da string tem índice 0. Podemos ainda especificar um índice opcional, a fim de indicarmos um ponto de partida dentro da string para que seja iniciada a busca. Por exemplo, a instrução abaixo procura a palavra "VACA" na string Alfabeto, iniciando com o 11o. caractere: Resultado = Alfabeto.indexOf("VACA", 10); 14 - RETORNAR A ÚLTIMA OCORRÊNCIA DE UMA STRING< Um outro método, o lastindexof(), trabalha da mesma maneira, só que ele retorna a última ocorrência da string. Ele pesquisa a string para trás, iniciando com o último caractere: Resultado = alfabeto.lastindexof("vaca", 10); 15 - POSIÇÃO DE UMA JANELA * Como padrão, ao criar uma janela, mesmo que você não mencione o 3º parâmetro, as barras de ferramentas, de status são exibidas. * Fazem parte deste 3º parâmetro as opções: directories, width, height, menubar, resizable, scrollbars, status, toolbar, left. * Você poderia definir a nova janela assim: <form> <input type="button" name="bword" value="word 97" Onclick="window.open('word.html','Word','directories=1,location=1,menubar=1,left=10,to p=10,width=480,height=310,toolbar=1, scrollbars=1,status=1')"> </form>

* O 3º parâmetro é uma string e, portanto deve vir entre aspas. As opções são separadas por vírgulas, sem espaços entre elas. * Toda a codificação deve ser colocada numa linha apenas. Eu quebrei a linha acima para você visualizar melhor e não precisar utilizar a barra de rolagem horizontal. * Os valores das opções podem ser 1/0 ou yes/no. * Left e Top definem a margem esquerda e superior do browser. Width é a largura e Height a altura. * Clique no botão Word para visualizar o resultado da codificação acima. outro Quero mudar a posição da janela. * Altere Left ( margem esquerda ) para 200 e Top ( margem superior ) para 230. <form> <input type="button" name="bword" value="word 97" Onclick="window.open('word.html','Word','left=200,top=230,width=400,height=200')"> </form> * Clique em Word 97. 16 - CENTRALIZANDO JANELAS posx e posy, não é o parâmetro das features para posicionamento da janela, geralmente posx e posy são nomes dados as variáveis dentro de uma função quando esta é solicitada externamente, como poderia ser qualquer outra coisa, por exemplo: posicaoxdajanela e posicaoydajanela, usando o seu exemplo uma função seria escrita assim:

function abrejanela(arquivo, janela, larg, alt, posx, posy) { //sua função vai aqui comumente isto é usado quando não se consegue através de uma única linha determinar a posição da janela, como por exemplo quando se quer centralizar a janela independente da resolução de vídeo do usuário, assim: function centrar(arquivo,janela,largura,altura) { posx = (screen.width/2)-(largura/2) posy = (screen.height/2)-(altura/2) features="width=" + largura + " height=" + altura + " top=" + posy + " left=" + posx newin = window.open(arquivo,janela,features) para chamar esta função usaríamos: javascript:centrar('nomedoarquivo.html','nomedajanela',550,400) 17 - ABRIR LINK EM NOVA JANELA COM TAMANHO E POSIÇÃO DETERMINADOS <html> <head> <title>nova Janela</title>

<script> function link(end){ window.open(end,"nova","height=300,width=500,left=20,top=20"); </script> </head> <body> <center><h3> <!--<a href="javascript:link('http://www.europanet.com.br')">clique aqui</a>--> <a href="javascript:link('teste.html')">clique aqui</a> <br>para abrir o link em <br>uma nova janela! </h3></center> </body> </html> 18 - ABRIR JANELA COM EFEITO DE ANIMAÇÃO <html> <head> <script> if (window.navigator.appname.indexof("netscape")==0){ window.location="http://www.europanet.com.br/"; else{

var horizontal=window.screen.availwidth; var vertical=window.screen.availheight; var janela=window.open("","","left=0,top=0,width=1,height=1,scrollbars=yes"); for (lgnav=1;lgnav<horizontal;lgnav+=6){ janela.resizeto(lgnav,"1"); for (atnav=1;atnav<vertical;atnav+=6){ janela.resizeto(lgnav,atnav); janela.location="http://www.europanet.com.br/"; </script> <body> <p>clique <a href="http://www.europanet.com.br/">aqui</a> se a página não carregar</p> </body></html> 19 - EXIBIR BANNER EM TEMPO DETERMINADO <html><head> <script> function banner(){ pagina="banner.gif";

opcoes="height=60,width=468," +"status=no,location=no," +"scrollbars=no,menubar=no," +"toolbar=no,resizable=no"; window.open(pagina,"janela",opcoes); </script> <body onunload="banner()" onload="settimeout('banner()',5000);"> <center> <h1>dentro de 5 segundos<br> o banner será exibido!<br><br><br><br> <i>feche-o e acesse<br> outro endereço em<br> seu navegador!</h1> </center></body></html> 20 - EXIBIR DESCRIÇÃO DE LINKS NA BARRA DE STATTUS <html><head> <title>barra de Status</title> </head> <body> <center><h2>mova o mouse sobre<br>

os links e observe a barra de status</h2> <br></center> <a href="http://www.europanet.com.br/" onmouseover="status='portal da Editora Europa'; return true;" onmouseout="status=''">editora Europa</a><br> <a href="http://www.europanet.com.br/revistas/www/portal/" onmouseover="status='fórum, Reportagens, Notícias, etc.'; return true;" onmouseout="status=''">revista www.com.br</a> </body></html>