Aplicações

Índice da página:
Aplicativos

Pode colocar todo o seu código e scripts java script numa file com extensão .js e depois chamar a função desejada em qualquer altura na sua página html. Assim poderá usar várias funções em páginas diferentes sem repetir o código javascript.
O método para chamar a file é o seguinte:

<script language="javascript" type="text/javascript" src="teste.js"></script>

A tag deve ser colocada na tag <head></head> da sua página. Neste caso usamos a file teste.js com o nosso código.
Para construção de nossa file, ponha a função abaixo no notepad do windows, e salve no seu directório com o nome de teste.js depois pode copiar o exemplo e correr no seu directório a página htm.
A função aplicativa é:
function date() {
    message="<style='text-align:center;";
    var today = new Date();
    dayStr = today.toLocaleString();
    document.write(message + dayStr + "</div>");}
Exemplo:

<html>
<head>
<title>Teste Aplicativo</title>
<script language="javascript" type="text/javascript" src="teste.js"></script>
</head> 
<body topmargin="0" leftmargin="0">
<div>A data de hoje é:</div><br>
   <script>
      date(); //Chamar Função
   </script><br>
</body>
</html>
Ver Índice
Abrir Janelas

Neste capítulo mostraremos como podem ser abertas novas janelas sobre uma janela contendo um documento ou código que qisermos mostrar. Isto é feito através de comandos JavaScript, que permitem: Abrir uma janela, abrir um documento dentro desta janela, escrever o conteúdo da janela, fechar a janela e fechar o documento.
A sintaxe geral deste método é a seguinte:

Variável = window.open ("Url", "Nome da janela", "Opções").

Onde:
•Variável - Nome que será atribuido como propriedade da janela, evento ou função.
•Url - Endereço do documento a mostrar.
•Nome da Janela - É o nome que aparecerá no topo da janela (Título).
•Opções - São as opções que definem as características da janela, as quais são:

•top - Posição topo em pixels
•left - Posição esquerda em pixels
•toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc.
•location - Abre a barra de location do browse.
•directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc.
•status - Abre uma barra de status no rodapé da janela.
•scrollbars - Abre barras de rolamento vertical e horizontal.
•menubar - Cria uma barra de menu tipo "File", "Edit", etc.
•resizable - Permite ao usuário redimencionar a janela.
•width - Especifica a largura da janela, em pixels.
•height - Especifica a altura da janela, em pixels.

Todas as opções (exceto width, height) são boleanas e podem ser ajustadas de duas formas: toolbar ou toolbar=1) são a mesma coisa. Se nada for especificado, entende-se que todas as opções estão ligadas; caso seja especificada qualquer opção, será entendido que estão ligadas apenas as opções informadas. As opções devem ser separadas por vírgula, sem espaço entre elas.

Exemplo:

<html>
<head>
<title>Abrir Janela</title>
<script language="JavaScript" type="text/javascript">
function abrir(){
window.open("abrirjan.htm","","toolbar=no,top=100,left=100,directories=no,status=no,menubar=no,
scrollbars=0,resizable=no,copyhistory=no,width=340,height=140")}
</script>
</head>
<body topmargin="0" leftmargin="0">
<div><br>Exemplo abrir Janela:
<input type="button" value="Abrir Janela" onclick="abrir()">
</div><br>
</body>
</html>
Ver Índice
Texto Rolante

No exemplo abaixo apresentamos o código necessário para criar textos rolantes. Os textos serão apresentados na área de status (rodapé) da página bem como numa caixa de texto de um formulário. Inicialmente definimos as variáveis a serem utilizadas pela função e preenchemos com "brancos" a variável que conterá o texto a ser exibido, para que o texto comece a ser exibido a partir do canto direito da caixa.
No momento em que o documento é carregado, utilizamos o evento onload para activar a função que fará a apresentação dos textos.

Exemplo:

<html> 
<head>
<title>Texto Rolante</title>
<script> 
var Texto = "JoaTex.com - Curso de JavaScript - Aplicativos..." 
var Tamanho = Texto.length 
var Trab = Texto.length 
var Trab1=0 
var Temp = "" 
var Mensagem="" 
var CtrTime="" 
for (x=0 ; x <= 50 ; x++) { 
      Mensagem += " " } 

function Mostra() { 
      if (Trab <= Tamanho && Trab> 0) { 
             Temp = Mensagem.substring(1, Mensagem.length) 
             Mensagem = Temp + Texto.substring(Trab1,Trab1+1) 
             Trab-- 
             Trab1++ } 
      else { 
             Trab = Texto.length 
            Trab1 = 0 } 
      window.status = Mensagem 
      document.Form1.Letreiro.value = Mensagem.substring(1, Mensagem.length) 
     CtrTime = setTimeout("Mostra()", 150) 
} 
</script>
<head>
<body onload="CtrTime=setTimeout('Mostra()',150)"> 
<form name=Form1> 
<p><font color="#008000"><font size=4> 
Apresentação de caixa de texto rolante</font></font> </p> 
<p><input type=text size=30 maxlength=50 name="Letreiro"> </p> 
</form> 
</body> 
</html>
Ver Índice
Auto Focus

Apresentamos um script que é muito usado em html no preenchimento de formulários, com o auxílio do controlo script.No exemplo seguinte iremos pedir um código de 9 alfanuméricos. O focus inicial é efectuado no onload da página, e os seguintes em grupos de três.

Exemplo:

<html> 
<head>
<title>Auto Focus</title>
<script language="JavaScript" type="text/javascript">
var Msg=""
function ver1(texto){
	if (texto.length == 3){
		document.Form1.t2.focus()}}

function ver2(texto){
	if (texto.length == 3){
		document.Form1.t3.focus()}}

function ver3(texto){
	if (texto.length == 3){
		Msg=document.Form1.t1.value+"-"+document.Form1.t2.value+"-"+texto
		document.Form1.t4.focus()
		document.Form1.t4.value=Msg}}
</script>
<head>
<body topmargin="0" leftmargin="0" onload="document.Form1.t1.focus()"> 
<div class="t2" align="center">Auto Focus</div><br>
<form name="Form1"><center> 
<input type="text" size="3" maxlength="3" name="t1" class="tx4a" onkeyup="ver1(t1.value)"> 
<input type="text" size="3" maxlength="3" name="t2" class="tx4a" onkeyup="ver2(t2.value)"> 
<input type="text" size="3" maxlength="3" name="t3" class="tx4a" onkeyup="ver3(t3.value)">
<br><br>Seu Código:
<input type="text" name="t4" style="background-color:#FFFFFF;border:none" readonly size="14">
</center></form>
</body> 
</html>
Ver Índice
Imprimir Textarea

Apresentamos um script que é muito útil para impressão de objectos. Impressão de páginas pode ser feito pelo seu browser directamente, mas não consegue imprimir objectos. O exemplo que apresentamos é muito usado para poder colocar os seus objectos numa nova janela e mandar imprimir.
No caso presente servimo-nos de um Textarea com um texto, e un script que detecta o enter(return), para nova linha e colocamos numa janela de amostragem com fecho automático, ao perder o focus.

Exemplo:

<html>
<head>
<title>Imprimir Textarea</title>
<script language="JavaScript" type="text/javascript">
var mt=""
var text=""
function Imprimir(texto) {
    text=""
    for(n=0; n < texto.length; ++n){
        mt=texto.substring(n,n + 1);
        text += mt;
        esc = escape(mt);
        if (esc == "%0D") { text += "<br>"}}
    winid = window.open('','newwin','toolbar=no,status=no,width=400,height=200');
    with (winid.document) {
    write('<body onblur="self.close()" onLoad="window.focus();window.print()">');
    write('<font face="arial" size="2">'+text+'<font><\/body>');
    close();}}
</script>
</head>
<body>
<textarea name="Texto"  rows="5" cols="40">
Teste de Escrita
Isto é apenas um Teste
Escreva o Seu próprio Texto.</textarea>
<input type="button" value="Imprimir" onclick="Imprimir(Texto.value)">
</body>
</html>
Ver Índice

Nota do WebMaster: Existe uma quantidade enorme de scripts aplicativos para JavaScript, mas o nosso intuito foi focar os principais temas para se familiarizar nesta linguagem, esperando que lhe tenha sido útil este estudo, quaisquer dúvidas, não deixe de nos contactar ou faça uso do forum de JavaScript.
O WebMaster João Teixeira.