Aplicativos em PHP/Referências/JavaScript

JavaScript na Wikipedia

http://pt.wikipedia.org/wiki/Javascript

JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:

- Validação de formulários no lado cliente (programa navegador); - Interação com a página. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante a do Java, mas é totalmente diferente no conceito e no uso.

1. Oferece tipagem dinâmica - tipos de variáveis não são definidos; 2. É interpretada, ao invés de compilada; 3. Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral); 4. Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).

Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.

Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida a Adobe).

Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.

Introdução

O JavaScript é uma ferramenta muito util para a construção de Web Sites, especialmente se utilizada em conjunto com HTML, CSS, PHP, entre outras ferramentas.

Também pode criar diversas ferramentas para sites:

   * Jogos
   * Relógios
   * Animações com mouse
   * Menus com select
   * Mensagens de alerta
   * Janelas Popup
   * Validação de Formulários HTML

Sintaxe

Como escrever código JavaScript?

  * Usar a tag <script para dizer ao browse que você está usando Javascript.
  * Escrever ou fazer download de Javascript
  * Testar scripts

Primeiro script JavaScript

HTML e JS

<html>
<body>
<script type="text/javascript">
<!--
document.write("Olá Mundo do JavaScript!")
//-->
</script>
</body>
</html>

Location - onde usar JS?

  # Dentro da tag head
  # Na tag body
  # Em um arquivo externo

Exemplo no head

<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Olá Mundo do JavaScript (function)")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Executar">
</body>
</html>

Externo - Importando um arquivo JS externo

O arquivo deve estar em JS e somente com sintaxe JS e usar extensão .js

Importante: os arquivos a serem incluídos não devem conter as tags

<html>
<head>
<script src="meujs.js">
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Clique Me!">
</body>
</html>

Operadores

Aritméticos

Operator Descrição     Example
+              Addition          2 + 4
-                Subtraction     6 - 2
*               Multiplication  5 * 3
/                Division           15 / 3
%              Modulus          43 % 10

Exemplo de Operadores Javascript com Variáveis

<body>
<script type="text/javascript">
<!--
var two = 2
var ten = 10
var linebreak = "<br />"

document.write("two plus ten = ")
result = two + ten
document.write(result)
document.write(linebreak)


document.write("ten * ten = ")
result = ten * ten
document.write(result)
document.write(linebreak)

document.write("ten / two = ")
result = ten / two
document.write(result)
//-->
</script>
</body>

Operadores de Comparação

Operator    Descrição         Example     Result
==             Equal To         $x == $y     false
!=             Not Equal To     $x != $y     true
<             Less Than         $x < $y     true
>             Greater Than     $x > $y     false
<=             Menor ou igual     $x <= $y     true
>=             Maior ou igual     $x >= $y     false

Variáveis

Podemos imaginar uma variável como uma cesta de frutas e os dados das variáveis como as frutas da cesta.

Quando usar uma variável pela primeira vez é uma boa prática de programação usar a palavra reservada var antes do nome da variável.

<body>
<script type="text/javascript">
<!--
var linebreak = "<br />"
var my_var = "Hello World!"

document.write(my_var)
document.write(linebreak)

my_var = "I am learning javascript!"
document.write(my_var)
document.write(linebreak)

my_var = "Script is Finishing up..."
document.write(my_var)
//-->
</script>
</body>

Nomes de variáveis

- evitar palavras reservadas do JavaScript

- escolher nomes descritivos

- nomes de variáveis não podem iniciar com algarismos

- uma boa prática é iniciar com minúsculas

Funções

Funções em JavaScript são similares a funções em outras linguagens como PHP, C, C++, Java.

Uma função é um pedaço de código que fica dormindo até que seja chamado para "funcionar".

Ao invés de digitar todo o código sempre que precisar, podemos simplesmente chamar novamente a função. Isto é conhecido como reutilização de código.

<html>
<head>
<script type="text/javascript">
<!--
function popup() {
    alert("Olá Mundo do JS!")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="popup()" value="Executar">
</body>
</html>

Eventos

Este é o grande recurso do JavaScript, que possibilita interagir com o usuário no site, como:

- clique do mouse

- página sendo carregada

- mouse movendo sobre algum componente da página

- Seleção de item de Select

- Toque de tecla

- etc

<html>
<head>
<script type="text/javascript">
<!--
function popup() {
alert("Hello World")}
//-->
</script>
</head>
<body>
<input type="button" value="Click Me!" onclick="popup()"><br />
<a href="#" onmouseover="" onMouseout="popup()">Hover Me!</a>
</body>
</html>

Todo código em JavaScript é formado por instruções (statements).

Uma instrução é uma variável igual a um valor.

Como também é algo como uma chamada de função, por exemplo document.write(). As instruções definem o que o script deve fazer e como fazer.

Em algumas linguagens como o PHP, o final das instruções obrigatoriamente deve terminar com ponto e vírgula. Mas em JavaScript o ; ao final das instruções é opcional. Obrigatoriamente as instruções terminam com uma quebra de linha.

Tipos de Instruções (Estruturas de Controle)

- Condicionais

- Loops

- Manipulação de Objetos

- Comentários

- Manipulação de exceções

if

<script type="text/javascript">
<!--
var myNum = 7;

if(myNum == 7){
    document.write("Lucky 7!");
}
//-->
</script>

else

<script type="text/javascript">
<!--
var myNum = 10;

if(myNum == 7){
    document.write("Lucky 7!");
}else{    
    document.write("You're not very lucky today...");    
}
//-->
</script>

else if

<script type="text/javascript">
<!--
var visitor = "principal";

if(visitor == "teacher"){
    document.write("My dog ate my homework...");
}else if(visitor == "principal"){
    document.write("What stink bombs?");
} else {
    document.write("How do you do?");
}
//-->
</script>

while

<script type="text/javascript">
<!--
var myCounter = 0;
var linebreak = "<br />";
document.write("While loop is beginning");
document.write(linebreak);

while(myCounter < 10){
    document.write("myCounter = " + myCounter);
    document.write(linebreak);
    myCounter++;
}

document.write("While loop is finished!");
</script>

for

<script type="text/javascript">
<!--
var linebreak = "<br />";
document.write("For loop code is beginning");
document.write(linebreak);

for(i = 0; i < 5; i++){
    document.write("Counter i = " + i);
    document.write(linebreak);
}

document.write("For loop code is finished!");
</script>

Comentários

<script type="text/javascript">
<!--
// This is a single line Javascript comment

document.write("I have comments in my Javascript code!");
//document.write("You can't see this!");
//-->
</script>

Array

São tipos especiais de variáveis.

Valores são armazenados em arrays passando o nome do array e a localização no array entre colchetes.

myArray[2] = "Hello World";

Valores em arrays são acessados com o nome do array e a localização do valor:

myArray[2]

JavaScript traz algumas funções para trabalhar com arrays.

<script type="text/javascript">
<!--
var myArray = new Array();

myArray[0] = "Baseball";
myArray[1] = "Cricket";
myArray[2] = "Football";

document.write(myArray[0] + myArray[1] + myArray[2]);
//-->
</script>

Ordenação de arrays

<script type="text/javascript">
<!--
var myArray = new Array();

myArray[0] = "Baseball";
myArray[1] = "Cricket";
myArray[2] = "Football";

myArray.sort();

document.write(myArray[0] + myArray[1] + myArray[2]);
//-->
</script>

Alert

Alert emite uma caixa de mensagem (janela popup) com mensagem texto.

<form>
<input type="button" onclick= "alert('Realmente excluir o registro atual?')"  value="Corfirmar Exclusão">
</form>

Confirm

Solicita confirmação com uma mensagem e exibindo dois botões para confirmar ou desistir.

<html>
<head>
<script type="text/javascript">
<!--
function confirmation() {
    var answer = confirm("Deixar o curso_php.org?")
    if (answer){
        alert("Até outro dia!")
        window.location = "http://www.google.com/";
    }
    else{
        alert("Grato por permanecer!")
    }
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onclick="confirmation()" value="Deixar o curso_php.org">
</form>
</body>
</html>

Prompt

Abra uma janela com uma mensagem e uma caixa de texto para receber resposta do usuário.

<head>
<script type="text/javascript">
<!--
function prompter() {
var reply = prompt("Olá amigo visitante! Qual seu nome?", "")
alert ('Seu nome é ' + reply)
}
//-->
</script>
</head>
<body>
<input type="button" onclick="prompter()" value="Dizer meu nome!">
</body>

Print

Abre o diálogo de impressão do browser para imprimir a janela atual

<form>
<input type="button" value="Print This Page" onClick="window.print()" />
</form>

Redirect

<script type="text/javascript">
<!--
window.location = "http://www.google.com/"
//-->
</script>

Time Delay

<html>
<head>
<script type="text/javascript">
<!--
function delayer(){
    window.location = "../javascriptredirect.php"
}
//-->
</script>
</head>
<body onLoad="setTimeout('delayer()', 5000)">

Preparar para redirecionar

This page is a time delay redirect, please update your bookmarks to our new location!

</body> </html>

PopUp

<head>
<script type="text/javascript">
<!--
function myPopup() {
window.open( "http://www.google.com/" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup()" value="POP!">
</form>
<p onClick="myPopup()">CLICK ME TOO!</p>
</body>

   *  dependent - Subwindow closes if parent(the window that opened it) window closes
   * fullscreen - Display browser in full screen mode
   * height - The height of the new window, in pixels
   * width - The width of the new window, in pixels
   * left - Pixel offset from the left side of the screen
   * top - Pixel offset from the top of the screen
   * resizable - Allow the user to resize the window or prevent resizing
   * status - Display the status bar or not

<head>
<script type="text/javascript">
<!--
function myPopup2() {
window.open( "http://www.google.com/", "myWindow",
"status = 1, height = 300, width = 300, resizable = 0" )
}
//-->
</script>
</head>
<body>
<form>
<input type="button" onClick="myPopup2()" value="POP2!">
</form>
<p onClick="myPopup2()">CLICK ME TOO!</p>
</body>

Outro Exemplo (http://www.plus2net.com/javascript_tutorial/javascript_popup.php)

<html>
<head>
<title>Javascript Popup</title>
<SCRIPT TYPE='text/javascript'>
<!--
function popup(width,height){
	if(window.innerWidth){
	LeftPosition =(window.innerWidth-width)/2;
	TopPosition =((window.innerHeight-height)/4)-50;
			}
	else{
	LeftPosition =(parseInt(window.screen.width)-	width)/2;
	TopPosition=((parseInt(window.screen.height)-height)/2)-50;
			}
	attr = 'resizable=no,scrollbars=yes,width=' + width + ',height=' +
	height + ',screenX=300,screenY=200,left=' + LeftPosition + ',top=' +
	TopPosition + '';
	popWin=open('', 'new_window', attr);
	popWin.document.write('<head><title>Test Popup</title></head>');
	popWin.document.write('<body><div align=center>');
	popWin.document.write('<b>This is a test popup window</b><br><br>');
  	popWin.document.write('Content goes here<br>');
	popWin.document.write('Content goes here<br>');
	popWin.document.write('Content goes here<br>');
  	popWin.document.write('</div></body></html>');
	}
//-->
</SCRIPT>
</head>
<body>
<a href="javascript:popup(400,200);">Generate popup</a>
</body>
</html>

Date

Isto é agora

<script type="text/javascript">
<!--
var currentTime = new Date()
//-->
</script>

   * getTime() - Number of milliseconds since 1/1/1970 @ 12:00 AM
   * getSeconds() - Number of seconds (0-59)
   * getMinutes() - Number of minutes (0-59)
   * getHours() - Number of hours (0-23)
   * getDay() - Day of the week(0-6). 0 = Sunday, ... , 6 = Saturday
   * getDate() - Day of the month (0-31)
   * getMonth() - Number of month (0-11)
   * getFullYear() - The four digit year (1970-9999)

Agora podemos imprimir as informações. Usaremos os métodos getDate, getMonth, e getFullYear neste exemplo.

Agora

<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write(month + "/" + day + "/" + year)
//-->
</script>

Current Time Clock

Agora

<script type="text/javascript">
<!--
var currentTime = new Date()
var hours = currentTime.getHours()
var minutes = currentTime.getMinutes()
if (minutes < 10)
minutes = "0" + minutes
document.write(hours + ":" + minutes + " ")
if(hours > 11){
document.write("PM")
} else {
document.write("AM")
}
//-->
</script>

Form

Checando por não vazio

function notEmpty(elem){ var str = elem.value; if(str.length == 0){

   alert("You must fill in all required fields (*)");
   return false;} else {
   return true;}

}

Validação de Formulários

function formValidation(form){

   if(notEmpty(form.req1)){
       if(notEmpty(form.req2)){
           return true;
       }
   } else {
       return false;
   }

}

Form

Required 1:<input type="text" name="req1" />
Required 2:<input type="text" name="req2" />

</form> </body>

Void 0

<a href="javascript: alert('News Flash!')">News Flash</a>

<a href="javascript: void(0)">I am a useless link</a>

<a href="javascript: void(myNum=10);alert('myNum = '+myNum)"> Set myNum Please</a>

Compatibilidade do JavaScript dos vários Navegadores

Função para validar caracteres ao digitar compatível com IE e no FF

<script>
function onKeyPressNaoAlgarismos(e)
{
	var key = window.event ? e.keyCode : e.which;
	var keychar = String.fromCharCode(key);
	reg = /\d/;
	return !reg.test(keychar);
}

function onKeyPressSoAlgarismos(e)
{
	var key = window.event ? e.keyCode : e.which;
	var keychar = String.fromCharCode(key);
	reg = /\d/;
	return reg.test(keychar);
}
</script>

Testar:

<form>
Permite só de 0 - 9: <input name="algarismos" type="text" onkeypress="return onKeyPressNaoAlgarismos(event);" /><br>
Impede de 0 - 9: <input name="nao_alg" type="text" onkeypress="return onKeyPressSoAlgarismos(event);" /><br>
</form>

Adaptado de Tutorials - KeyPress validation http://www.mredkj.com/tutorials/validate.html

Outra função para validar caracteres ao digitar (do mesmo site acima)

function blockNonNumbers(obj, e, allowDecimal, allowNegative) { var key; var isCtrl = false; var keychar; var reg;

if(window.event) { key = e.keyCode; isCtrl = window.event.ctrlKey } else if(e.which) { key = e.which; isCtrl = e.ctrlKey; }

if (isNaN(key)) return true;

keychar = String.fromCharCode(key);

// check for backspace or delete, or if Ctrl was pressed if (key == 8 || isCtrl) { return true; }

reg = /\d/; var isFirstN = allowNegative ? keychar == '-' && obj.value.indexOf('-') == -1 : false; var isFirstD = allowDecimal ? keychar == '.' && obj.value.indexOf('.') == -1 : false;

return isFirstN || isFirstD || reg.test(keychar); }

Comparando JavaScript com seu primo ActionScript (script do Flash)

http://www.webreference.com/programming/javascript/j_s/column2/

JavaScript sem mistérios para Mozilla/Netscape e Microsoft Internet Explorer

http://www.vivaolinux.com.br/dicas/impressora.php?codigo=8872

Identificar Navegador

Identificar Idioma automaticamente

<script>
if(navigator.browserLanguage) {  
      var language = navigator.browserLanguage;    
   }
   else if(navigator.language) {
      var language = navigator.language;
   }
   
   switch (language.substring(0,2))  {
      case "pt" : location.href="pagina_em_portugues.php";
         break;
      case "en" : location.href="pagina_em_ingles.php";
         break;
      case "es" : location.href="pagina_em_espanhol.php";
         break;
      default : location.href="pagina_em_portugues.php"; 
}
</script>