[Resolvido] JavaScript para desenvolvedores PHP

[RSS iMasters 5]

Esperoque você tenha sido um bom nerd em 2010 e tenha aprendido JavaScript. Agora, vamos rebater com uma taça de vinho ao lado dalareira e revisar o que você aprendeu.

 

 

Objetos

Quasetudo em JavaScript é um objeto, mas não existem classes. Uma maneira dedefinir um objeto é simplesmente listar as propriedades que você quer queo objeto tenha, separá-las por vírgulas e envolvê-las em colchetes ondulados:

var calendar = { 
 name: "PHP Advent", 
 year: 2010 
};

Esse simples objeto não tem nenhum método e se parece mais com uma matriz associativado PHP. Na verdade, o JavaScript não tem matrizes associativas e usa objetos emseu lugar. Para criar um objeto semelhante no PHP, você pode converter umamatriz em um objeto:

$calendar = (object) array( 
 name => 'PHP Advent', 
 year => 2010 
);

Simples,não? Nenhuma classe à vista. Objetos não são nada mais do que matrizeselaboradas. Elaboradas porque alguns elementos da matriz são invocáveis, e nósos chamaremos de métodos.

 

Uma outra abordagem para criar objetos é começar com um objeto "vazio".

var calendar = {};

Isso é exatamente como $calendar = new stdClass(); em PHP. Em JS, você pode tambémfazer var calendar = new Object(); mas isso é apenas um exercício de digitação.

 

Você pode adicionar outras coisas (propriedades e métodos) pelo caminho:

calendar.name = "PHP Advent"; 
calendar.year = 2010; 
calendar.say = function () { 
 return this.name + ' ' + this.year; 
};

Como você pode ver, o JavaScript usa . em vez de -> para acessarpropriedades e métodos.

calendar.say(); // returns "PHP Advent 2010"

Posso ter classes?

Não existem classes no JavaScript, mas se você realmente sente falta delas,existem as constructor functions.

function Calendar(year) { 
 this.name = "PHP Advent"; 
 this.year = year; 
 this.say = function () { 
   return this.name + ' ' + this.year; 
 }; 
}

Constructorfunctions são funções normais, mas quando chamadas com new, elas retornam comoobjetos.

var thisyear = new Calendar(2010), 
   lastyear = new Calendar(2009); 
thisyear.say(); // "PHP Advent 2010"

O equivalente em PHP seria algo como:

class Calendar { 
 public $name = 'PHP Advent'; 
 public $year; 

 function __construct($year) { 
   $this->year = $year; 
 } 

 function say() { 
   return $this->name . ' ' . $this->year; 
 } 
} 

$thisyear = new Calendar(2010); 
$lastyear = new Calendar(2009); 

echo $thisyear->say(); // "PHP Advent 2010"

Constructor functions versus funções normais

A maneira como você define uma constructor function no JavaScript é a mesma quevocê usa para uma função normal. A diferença é a invocação. Quando chamadacom new, uma função sempre retorna como objeto. Se você não fizer nada deespecial, o objeto referido por ela será retornado.

alert(typeof new Calendar()); // "object"

Quando chamadas sem new, as funções retornam para onde quer que a declaração deretorno esteja no corpo da função. Se não existe um retorno explícito, a funçãovai retornar o value undefined especial.

alert(typeof Calendar()); // "undefined"

Com o objetivo de distinguir a intenção de uma função ao ler um código, existe uma convenção generalizada de nomear as constructor functions com a primeira letraem caixa alta.

 

function MyConstructor() {} 
function myFunction() {}

Funções são objetos

No JavaScript, em que a maioria das coisas são objetos, funções são objetos também.Eles podem (e têm) propriedades e métodos. Você provavelmente vai ver funçõesdefinidas com var, desta maneira:

var sum = function (a, B) { 
   return a + b; 
};

Agora,olhe isto aqui:

alert(sum.length); // 2O 

 

que é isso? Nós acessamos a propriedade length do sum do objeto. Objetos de funçãotêm uma propriedade length que contém o número de parâmetros que eles aguardam(mas não os imponha, já que todos os parâmetros têm um valor padrãoindefinido), nesse caso, dois: a e b.

 

 

Prototype

Funçõessão objetos, e eles automaticamente geram uma propriedade chamada prototype.Essa propriedade é usada quando um objeto é criado utilizando uma constructorfunction. O prototype também é um objeto (surpresa, surpresa).

function Calendar(year) { 
 this.year = year; 
} 

Calendar.prototype.name = "PHP Advent"; 

Calendar.prototype.say = function () { 
 return this.name + ' ' + this.year; 
}; 

var thisyear = new Calendar(2010); 
thisyear.say(); // "PHP Advent 2010"

Aqui, nóstemos um comportamento que é muito parecido com o antigo constructor Calendarque criamos. O Objeto thisyear tem acesso a say() como se fosse seu própriométodo, mas ele aparece transparentemente via prototype.

 

Como aspropriedades adicionadas ao PROTOTYPE são compartilhadas e reutilizadas entretodos os objetos calendar, este é o lugar para colocar todas as peças defuncionalidade reusáveis. É uma prática comum colocar todos os métodos aqui.

 

Prototypestambém disponibilizam maneiras de implementar o código reuse (inheritance).

 

Você provavelmenteirá notar que eu disse objetos "vazios" no início deste artigo.Eu os adicionei porque não existe algo como um objeto em branco. Todos osobjetos vêm com alguns métodos e propriedades pré-existentes, herdadas da prototypechain.

 

 

Funçõesanônimas

Muitasvezes, você precisa de uma função one-off que não precisa de nome, ou funçõesque você pretende passar para outras funções como callbacks. Você pode usarfunções anônimas nesses casos.

 

NoJavaScript, existe apenas uma função scope - qualquer variável definida que nãoseja a fonte é um global. Isso não é, obviamente, desejado, porque mais globalssignificam um maior risco de colisões de nomes.

 

Um padrãocomum para reduzir o número de variáveis temporárias dispersas poraí é envolver peças de código independentes em uma immediate function,o que significa uma função anônima que é executada imediatamente.

// Alerts 3 and leaves no leftover variables. 
(function () { 

 var a = 1, 
     b = 2; 

 alert(a + B); 

}());

No PHP,funções anônimas têm estado disponíveis desde o lançamento da versão 5.3, evocê pode invocá-las com call_user_func(), então o equivalente seria:

call_user_func(function() { 
 $a = 1; 
 $b = 2; 
 echo $a + $b; 
}); 

Ou no PHP, antes do 5.3:

call_user_func(create_function('', 
 '$a = 1; 
  $b = 2; 
  echo $a + $b;' 
));

Arrays

Arrayssão simplesmente listas de valor delimitadas por vírgulas envolvidas porcolchetes.

var dudes = ['Ilia', 'Andrei', 'Derick']; 
alert(dudes[2]); // "Derick" 

// Ou, se você quiser digitar mais:
var dudes = new Array('Ilia', 'Andrei', 'Derick'); No PHP,isso é igual:

$dudes = array('Ilia', 'Andrei', 'Derick'); 
echo $dudes[2]; // "Derick"

Mas eisque Arrays são objetos também, então, em vez de passar o Array para uma funçãopara conseguir o seu tamanho, você pode acessar sua propriedade length.

// JS 
alert(dudes.length); // 3 

// PHP 
echo count($dudes); // 3

 

Pushes,pops e diversos flip-flops também compartilham um comportamento similar no PHPe no JavaScript.

// JS 
dudes.pop(); // returns "Derick" 
dudes.toString(); // "Ilia,Andrei" 
dudes.push('Rasmus'); // returns 3, the new size 
dudes.toString(); // "Ilia,Andrei,Rasmus" 

// PHP 
array_pop($dudes);  
echo implode(',', $dudes); 
array_push($dudes, 'Rasmus'); 
echo implode(',', $dudes); 

A sintaxepreguiçosa e conveniente do PHP para anexar a um Array ($dudes[] = 'Ben';) nãoestá disponível em JavaScript. Você precisa saber o tamanho ou conhecer o Array (para sabero índice do último elemento), para que você possa usar

dudes[dudes.length] = 'Ben'; 

// dudes.push('Ben') é grosseiramente equivalente ao append operator do PHP. Omplode() e o explode() do PHP se transformam em join() e split() no JavaScript.

// PHP 
$a = explode(',', '1,2,3'); 
echo implode(', then ', $a); // "1, then 2, then 3" 

// JS 
var a = "1,2,3".split(','); 
alert(a.join(', then ')); // "1, then 2, then 3"

 

Strings

Nãoexiste nada muito excitante sobre strings, a não ser - você adivinhou -que strings são objetos também. Bem, tecnicamente, existe uma diferença entre umstring object e uma primitive string, mas estas últimas sãoconvertidas para objetos quando necessário, então não há necessidade de sepreocupar com os detalhes.

// string object 
var so = new String('Crocodile'); 
alert(typeof s); // "object" 

// primitive string 
var sp = 'Alligator'; 
alert(typeof s); // "string" 

// But, primitives do behave like objects. 
alert("dude".length); // 4Assimcomo com Arrays, todas as suas funções de manipulações favoritas de string setornam uma variedade de métodos. 

// JS 
var s = "PHP Advent"; 
alert(s.substring(6)); // "vent" 
alert(s.replace(' ', 'eeee')); // "PHPeeeeAdvent" 
alert(s.replace(' ', 'eeee').substring(0, 7)); // "PHPeeee" 

// PHP 
$s = 'PHP Advent'; 
print(substr($s, 6)); // "vent" 
print(str_replace(' ', 'eeee', $s)); // "PHPeeeeAdvent" 
print(substr(str_replace(' ', 'eeee', $s), 0, 7)); // "PHPeeee"

 

Callbacks

O últimotópico antes de encerrarmos, callback functions. Elas ilustram dois dosconceitos que já falamos aqui, funções e Arrays.

 

Umamaneira legal de criar funções e métodos reutilizáveis é fazer com queeles aceitem outras funções como parâmetros, que são conhecidas como callbackfunctions.

 

Um bomexemplo para isso está no método sort() de objetos de Arrays noJavaScript. Esse método aceita um callback assim como o usort() no PHP.

 

NoJavaScript, se você quiser uma classificação numérica, precisadisponibilizar um callback; não existe nenhuma flag como sort() no PHP.

// JS 
var a = [2, 1, 30, 15]; 
a.sort(); // "1, 15, 2, 30", not what you expect 

// PHP 
$a = array(2, 1, 30, 15); 
sort($a); // "1, 2, 15, 30", a.k.a., the right thing 

// PHP like JS 
$a = array(2, 1, 30, 15); 
sort($a, SORT_STRING); // "1, 15, 2, 30"Quer umaclassificação numérica? Passe uma callback function:

// anonymous callback 
var a = [2, 1, 30, 15]; 
a.sort(function (a, B) { 
   return (a > B) ? 1 : -1; 
}); 
// "1, 2, 15, 30" 

//Ou forneça uma função existente como callback. 
var a = [2, 1, 30, 15]; 

function numsort(a, B) { 
 return (a > B) ? 1 : -1; 
} 

a.sort(numsort); // "1, 2, 15, 30"Sevocê fosse fazer o mesmo tipo de callback no PHP (não quevocê precise fazer para classificação numérica, mas é uma ilustração),você pode fornecer também um callback anônimo ou uma função existente:

// anonymous callback (PHP 5.3) 
$a = array(2, 1, 30, 15); 
usort($a, function ($a, $B) { 
 return ($a > $B) ? 1 : -1; 
}); 

// existing function as a callback (PHP 4+) 
$a = array(2, 1, 30, 15); 

function numsort ($a, $B) { 
 return ($a > $B) ? 1 : -1; 
}; 

usort($a, 'numsort');

Finalizando

JavaScripte PHP são bastante similares; eles compartilham a sintaxe C-likex, comcolchetes ondulados, funções, ifs, for loops, &c. Mesmo assim, o JavaScripttem algumas especificidades, como:

 

• sem classes
• a maioria das coisas são objetos,incluindo arrays e strings
• funções são objetos
• funções fornecem um scopingvariável
• constructor functions
• prototypes

Namaioria das vezes, quando as pessoas dizem que odeiam JavaScript, elas queremdizer que elas odeiam os DOM APIs bugados e inconsistentes fornecidos pelosbrowsers. Despido, o JavaScript (ou ECMAScript) é uma linguagenzinha linda,como diriam alguns, que vale a pena aprender. Elanão tem o excelente manual que tem o PHP, com todas as imensuráveis notas dosusuários (e quem tem?), mas existe uma referência do Mozilla para seu prazeroso bookmarking.

 

Estaé para as horas felizes "JavaScriptando" em 2011!

 

Texto original disponível em http://phpadvent.org/2010/javascript-for-php-developers-by-stoyan-stefanov

 

 

 

http://imasters.com.br/artigo/20535/php/javascript--para-desenvolvedores-php