Javascript - O que é e dicas

arkOrange">1 - Histórico
Com sua primeira versão lançada em 1995, o Javascript é uma das linguagens mais utilizadas que se tem. Praticamente qualquer site faz uso de Javascript. É uma linguagem imperativa, orientada a objetos que é interpretada pelo lado cliente (o seu browser) dentro da arquitetura cliente-servidor. Há projetos de javascript interpretado também do lado servidor, como através da NodeJS, mas isto é de uso mais restrito, não será abordado aqui.

arkOrange">2 - Estrutura Básica
No Javascript, a programação é trivial para quem já programou em alguma linguagem como C ou Java. Uma expressão é composta de uma lista de comandos, operadores, podendo a linha acabar com uma nova linha ou ponto e vírgula.

Temos os comandos tradicionalmente encontrados em outras linguagens como C: if, while, for entre outros.

Os operadores tradicionais da maioria das linguagens tradicionais de programação fazem parte do javascript. Temos operadores lógicos (como &&, ||), de comparação (==, ===, !=, !==), incremento (o ++ por exemplo).

Para uma lista completa, com exemplos, recomendo o link a seguir do W3Schools.
Operadores aritméticos e de atribuição: http://www.w3schools.com/js/js_operators.asp
Operadores lógicos e de comparação: http://www.w3schools.com/js/js_comparisons.asp

arkOrange">2.1 - Variáveis:
Javascript é uma linguagem fracamente tipada, não se declara tipo para as variáveis. Para forçar um tipo, somente com o uso de casts ou funções específicas, como parteInt, parseFloat ou toString. Internamente, os tipos básicos que temos são números inteiros, números em ponto flutuante e caracter.
Para declarar uma variável, basta ter um var na frente. O tipo da mesma pode ser verificado através do operador typeof. Exemplo:

var numInt = 999; //variável do tipo Number (número inteiro)

var numDecimal = 999.999; //variável do tipo Number (número em ponto flutuante)

var str = 'a'; //variável do tipo String, que pode ser declarado com aspas simples ou duplas.

alert(typeof numInt  + "\n"+typeof numDecimal +"\n"+typeof str);

Além destes, temos dois tipos especiais, que na verdade não são tipos propriamente ditos: o null e o undefined. Uma variável declarada que não tem valor é do tipo null por padrão.

try{

var str_msg = "variável "+null_teste+", do tipo "+typeof(null_teste)+"\n";

alert(str_msg); // irá exibir um alerta com a mensagem 'variável null, do tipo object'.

} catch(ex) {

alert(ex.message);

}

Qualquer variável não definida, se tentar ser chamada, gerará erro, que será pego nas exceções.
Usando tratamento de exceções:

var null_teste=null;

try{

var str_msg = "variável "+inexistente;

alert(str_msg);

} catch(ex) {

alert(ex.message); //aqui será exibido alerta com a mensagem 'inexistente is not defined'.

}

Porém, posições de Arrays e parâmetros de funções podem ser comparados com undefined.

function teste(param1,param2) {

  try{

  if(param2==undefined)

  return param1;

  else return param1+"\n"+param2;

  } catch(ex) {

  return ex.message;

  }

}



alert(teste("Parâmetro 1 passado.&quot); //não será gerado erro ou exceção.

arkOrange">2.2 - Funções:
Há 2 maneiras de se declarar uma função no javascript:
Vamos primeiro a maneira tradicional:

function func1() {

  return "https://www.hardware.com.br/comunidade";

}

func1(); //chamada da função

Igualmente, podemos associar um nome à função:

func1 = function() {

  return "https://www.hardware.com.br/comunidade";

}

func1(); //chamada da função

O que na verdade significa que, como a tipagem é fraca, não há distinção entre o que é uma variável ou função, a não ser o seu tipo.

var func1 = "https://www.hardware.com.br/comunidade";

E como testar se uma função já foi declarada?

if(typeof(existoounaoexisto_func) !== typeof(Function)) {} //aqui testamos se a função existoounaoexisto_func existe

Se conseguimos testar sua existência, conseguimos redeclará-la então?

existoounaoexisto_func = function() {

  return 'Função original';

}



if(typeof(existoounaoexisto_func) === typeof(Function)) {

  existoounaoexisto_func = function() { //se já existir uma função com o nome existoounaoexisto_func, é redeclarada a mesma

  return 'Função alterada';

  }

}

alert(existoounaoexisto_func());

Podemos também passar uma função por parâmetro a outra função. À esta função declarada como parâmetro chama-se função anônima:

var var1=1;

var var2=4;

var var3=0;



function func1(param) {

  var3=param;

  return param;

}



func1(function() {

  return var1+var2;

  }()

); //Aqui tem-se a chamada a função func1, com a função anônima criada e executada como parâmetro da função func1



alert(var3);

arkOrange">2.3 - Objetos:

Algumas das principais classes que temos na linguagem, quanto a sua construção, são:
arkOrange">- Classe Array: são os vetores. Se pode usar sem problemas mais de um tipo de dados em cada posição. Exemplo:

var coisasAleatorias = new Array(); //foi declarado um vetor dinâmico (insere-se elementos e remove-se sem limites quanto a sua capacidade).

coisasAleatorias[0] = "Therion";

coisasAleatorias[1] = 5;

alert(coisasAleatorias .toString());

arkOrange">- Classe String:

var nomeBanda = "Aeternitas";

alert(nomeBanda);

arkOrange">- Classe Number:

var num = 10;

alert(num.toString(num)); //transformando o número em String

arkOrange">- Classe Date:

var d1 = new Date();

alert(d1.getTime()); //exibe timestamp em milisegundos

Uma observação importante: qualquer função do objeto Date é sobre o momento em que foi instanciado. Se daqui a 10 segundos precisar pegar novamente o timestamp, terá que declarar um novo Date, senão será exibido o mesmo timestamp que da primeira vez.

arkOrange">- Classe RegExp:

var site="Site:guiadohardware";

var patt = new RegExp("guiado", "g"

var res = str.replace(patt,"" //irá retirar a string "guiado" da variável

Alternativamente, pode-se trabalhar desta forma com expressões regulares (que é como geralmente costumo usar, sem declarar o objeto RegExp):

var site="Site:guiadohardware";

var patt=/:[a-z]*/ig; //padrão que busca a partir dos dois pontos qualquer ocorrência de letras desconsiderando caixa alta e baixa e de forma global

var teste = patt.test(site); //testa se encontra padrão

var newSite=site.replace(patt,":hardware"

alert("Teste:"+teste+"\n"+newSite); //irá exibir: Teste:true Site:hardware

arkOrange">- Classe Math:

var limite = 100;

alert(Math.floor((Math.random()*limite)+1)); //vai gerar números inteiros pseudo-aleatórios de 1 a 100.

arkOrange">- Classe Boolean:

var verdadeiro = true;

var falso = false;

alert(verdadeiro+"\n"+falso);

Temos ainda os objetos associados ao DOM, para manipulação de elementos do HTML, como os Objetos Window e Location, que não entrarei em maiores detalhes. Recomendo então o W3Schools para leitura.

arkOrange">2.2.1 - Criando seus objetos:
A criação de um objeto pode ser feita de 2 formas: usando o operador new ou a sintaxe JSon (Javascript Object Notation).

arkOrange">- Utilizando operador new:

var banda = new Object();

banda.nome = "Therion";

banda.anoCriacao = 1986;

banda.estilo = ['Death Metal','Metal Sinfônico','Metal Gótico'];



alert(banda.nome+" ("+banda.anoCriacao+&quot\n"+banda.estilo.toString());

arkOrange">- Utilizando JSon:

var banda = {nome:"Therion",anoCriacao:1986,estilo:['Death Metal','Metal Sinfônico','Metal Gótico']};

alert(banda.nome+" ("+banda.anoCriacao+&quot\n"+banda.estilo.toString());

Índice
[LIST=1]
> Overview do Javascript
Dicas
[/LIST]