summaryrefslogtreecommitdiffhomepage
path: root/pt-br/javascript-pt.html.markdown
diff options
context:
space:
mode:
Diffstat (limited to 'pt-br/javascript-pt.html.markdown')
-rw-r--r--pt-br/javascript-pt.html.markdown546
1 files changed, 546 insertions, 0 deletions
diff --git a/pt-br/javascript-pt.html.markdown b/pt-br/javascript-pt.html.markdown
new file mode 100644
index 00000000..59c6890e
--- /dev/null
+++ b/pt-br/javascript-pt.html.markdown
@@ -0,0 +1,546 @@
+---
+language: javascript
+contributors:
+ - ["Adam Brenecki", "http://adam.brenecki.id.au"]
+ - ["Ariel Krakowski", "http://www.learneroo.com"]
+translators:
+ - ["Willian Justen", "http://willianjusten.com.br"]
+lang: pt-br
+---
+
+JavaScript foi criada por Brendan Eich, funcionário da Netscape na época, em 1995. Ela
+foi originalmente criada para ser uma linguagem de script para websites,
+complementando o uso de Java para aplicações web mais complexas, mas a sua
+integração com páginas web e seu suporte nativo nos browsers fez com que
+ela se tornasse mais comum que Java no frontend web.
+
+Javascript não é somente limitada a browsers web, existindo o Node.js,
+que é um projeto que fornece um interpretador baseado no motor V8 do Google
+Chrome e está se tornando cada vez mais famoso.
+
+Feedback são muito apreciados! Você me encontrar em
+[@adambrenecki](https://twitter.com/adambrenecki), ou
+[adam@brenecki.id.au](mailto:adam@brenecki.id.au).
+
+```js
+// Comentários são como em C. Comentários de uma linha começam com duas barras,
+/* e comentários de múltplas linhas começam com barra-asterisco
+ e fecham com asterisco-barra */
+
+// comandos podem ser terminados com ;
+facaAlgo();
+
+// ... mas eles não precisam ser, o ponto-e-vírgula é automaticamente
+// inserido quando há uma nova linha, exceto alguns casos.
+facaAlgo()
+
+// Como esses casos podem causar resultados inesperados, vamos continuar
+// a usar ponto-e-vírgula neste guia.
+
+///////////////////////////////////
+// 1. Números, Strings e Operadores
+
+// Javascript tem um tipo de número (que é o 64-bit IEEE 754 double).
+// Doubles tem uma mantissa 52-bit, que é suficiente para guardar inteiros
+// acima de 9✕10¹⁵ precisamente.
+3; // = 3
+1.5; // = 1.5
+
+// A aritmética básica funciona como seria de se esperar.
+1 + 1; // = 2
+0.1 + 0.2; // = 0.30000000000000004
+8 - 1; // = 7
+10 * 2; // = 20
+35 / 5; // = 7
+
+// Inclusive divisão desigual.
+5 / 2; // = 2.5
+
+// Operadores Bitwise também funcionam; quando você faz uma operação bitwise
+// seu float é convertido para um int de até 32 bits.
+1 << 2; // = 4
+
+// A precedência é aplicada com parênteses.
+(1 + 3) * 2; // = 8
+
+// Existem três especiais valores não-é-número-real:
+Infinity; // resultado de 1/0
+-Infinity; // resultado de -1/0
+NaN; // resultado de 0/0
+
+// Existe também o tipo booleano.
+true;
+false;
+
+// Strings são criados com ' ou ".
+'abc';
+"Olá, mundo";
+
+// Negação usa o símbolo !
+!true; // = false
+!false; // = true
+
+// Igualdade é o sinal de ===
+1 === 1; // = true
+2 === 1; // = false
+
+// Desigualdade é o sinal de !==
+1 !== 1; // = false
+2 !== 1; // = true
+
+// Mais comparações
+1 < 10; // = true
+1 > 10; // = false
+2 <= 2; // = true
+2 >= 2; // = true
+
+// Strings são concatenadas com +
+"Olá " + "mundo!"; // = "Olá mundo!"
+
+// e comparadas com < e >
+"a" < "b"; // = true
+
+// A comparação de tipos não é feita com o uso de ==...
+"5" == 5; // = true
+null == undefined; // = true
+
+// ...a menos que use ===
+"5" === 5; // = false
+null === undefined; // = false
+
+// ...isso pode resultar em comportamentos estranhos...
+13 + !0; // 14
+"13" + !0; // '13true'
+
+// Você pode acessar caracteres de uma String usando o `charAt`
+"Isto é uma String".charAt(0); // = 'I'
+
+// ...ou usar `substring` para pegar pedaços maiores.
+"Olá mundo".substring(0, 3); // = "Olá"
+
+// `length` é uma propriedade, portanto não use ().
+"Olá".length; // = 3
+
+// Existe também o `null` e o `undefined`.
+null; // usado para indicar um valor não considerado
+undefined; // usado para indicar um valor que não é a atualmente definido
+ // (entretando `undefined` é considerado de fato um valor
+
+// false, null, undefined, NaN, 0 and "" são valores falsos;
+// qualquer outro valor é verdadeiro
+// Note que 0 é falso e "0" é verdadeiro, até mesmo 0 == "0".
+
+///////////////////////////////////
+// 2. Variáveis, Arrays e Objetos
+
+// Variáveis são declaradas com a palavra-chave `var`. O Javascript é
+// dinâmicamente tipado, portanto você não precisa especificar o tipo.
+// Atribuições usam um simples caracter de `=`.
+var someVar = 5;
+
+// se você deixar de colocar a palavra-chave var, você não irá receber um erro...
+someOtherVar = 10;
+
+// ...mas sua variável será criada no escopo global, não no escopo em que você
+// definiu ela.
+
+// Variáveis declaradas sem receberem um valor são definidas como `undefined`.
+var someThirdVar; // = undefined
+
+// Existe um shorthand para operações matemáticas em variáveis:
+someVar += 5; // equivalente a someVar = someVar + 5; someVar é 10 agora
+someVar *= 10; // agora someVar é 100
+
+// e um para adição e subtração de 1
+someVar++; // agora someVar é 101
+someVar--; // volta para 100
+
+// Arrays são listas ordenadas de valores, de qualquer tipo.
+var myArray = ["Olá", 45, true];
+
+// Seus membros podem ser acessados usando a sintaxe de colchetes.
+// O indíce de um Array começa pelo 0.
+myArray[1]; // = 45
+
+// Arrays são mutáveis e de tamanho variável.
+myArray.push("World");
+myArray.length; // = 4
+
+// Adicionar/modificar em um índice específico
+myArray[3] = "Hello";
+
+// Objetos de Javascript são equivalentes aos dicionários ou maps de outras
+// linguagens: uma coleção não ordenada de pares chave-valor.
+var myObj = {chave1: "Olá", chave2: "Mundo"};
+
+// Chaves são strings, mas as aspas não são necessárias se elas são
+// identificadores válidos no Javascript. Valores podem ser de qualquer tipo.
+var myObj = {myKey: "myValue", "my other key": 4};
+
+// Atributos de objetos também podem ser acessados com a sintaxe de colchetes.
+myObj["my other key"]; // = 4
+
+// ... ou usando a sintaxe de ponto, passando a chave que é um identificador
+// válido.
+myObj.myKey; // = "myValue"
+
+// Objetos são mutáveis, valores podem ser modificados e novas chaves
+// adicionadas.
+myObj.myThirdKey = true;
+
+// Se você tentar acessar um valor que não foi determinado ainda, você irá
+// receber `undefined`.
+myObj.myFourthKey; // = undefined
+
+///////////////////////////////////
+// 3. Lógica e Estruturas de Controle
+
+// A sintaxe para essa seção é quase idêntica a maioria das linguagens.
+
+// The `if` structure works as you'd expect.
+// A estrutura `if` funciona como deveria ser.
+var count = 1
+if (count == 3){
+ // executa se count é 3
+} else if (count == 4){
+ // executa se count é 4
+} else {
+ // executa se count não é 3 nem 4
+}
+
+// Como se faz um `while`.
+while (true){
+ // Um loop infinito!
+}
+
+// Os loops do-while são como os loops de while, exceto quando eles sempre
+// executam pelo menos uma vez.
+do {
+ input = getInput();
+} while (!isValid(input))
+
+// The `for` loop is the same as C and Java:
+// initialisation; continue condition; iteration.
+
+// O loop `for` é o mesmo de C e Java:
+// inicialização, condição para continuar; iteração
+for (var i = 0; i < 5; i++){
+ // vai rodar cinco vezes
+}
+
+// && é o `e` lógico , || é o `ou` lógico
+if (house.size == "big" && house.colour == "blue"){
+ house.contains = "bear";
+}
+if (cor == "red" || cor == "blue"){
+ // cor é vermelha OU azul
+}
+
+// && e || "pequeno circuito", é útil para determinar valores padrões.
+var name = otherName || "padrão";
+
+// O `switch` checa pela igualdade com `===`.
+// Use `break` após cada `case`
+grade = 'B';
+switch (grade) {
+ case 'A':
+ console.log("Great job");
+ break;
+ case 'B':
+ console.log("OK job");
+ break;
+ case 'C':
+ console.log("You can do better");
+ break;
+ default:
+ console.log("Oy vey");
+ break;
+}
+
+
+///////////////////////////////////
+// 4. Funções, Escopos e Closures
+
+// Funções Javascript são declaradas com a palavra-chave `function`.
+function myFunction(thing){
+ return thing.toUpperCase();
+}
+myFunction("foo"); // = "FOO"
+
+// Repare que o valor a ser retornado deve começar na mesma linha que
+// a palavra-chave `return`, senão você sempre irá retornar `undefined`
+// visto que o ponto-e-vírgula é inserido automáticamente nas quebras de
+// linha. Preste atenção quando usar o estilo Allman.
+function myFunction()
+{
+ return // <- ponto-e-vírgula adicionado automaticamente aqui
+ {
+ thisIsAn: 'object literal'
+ }
+}
+myFunction(); // = undefined
+
+// Funções Javascript são objetos de primeira classe, portanto elas podem
+// ser atribuídas a nomes de variáveis e serem passadas para outras funções
+// como argumentos - por exemplo, quando criamos um manipulador de eventos:
+function myFunction(){
+ // este código será chamado em 5 segundos
+}
+setTimeout(myFunction, 5000);
+// Nota: `setTimeout` não é parte da linguagem Javascript, mas é provido pelos
+// browsers e o Node.js.
+
+// Objetos de funções não precisam nem serem declarados com nome - você pode
+// escrever a definição de uma função anônima diretamente nos argumentos de
+// outra função.
+setTimeout(function(){
+ // este código será chamado em 5 segundos
+}, 5000);
+
+// O Javascript tem escopo de função; as funções tem seu próprio escopo,
+// mas outros blocos não.
+if (true){
+ var i = 5;
+}
+i; // = 5 - não `undefined` como você esperaria numa linguagem de blogo-escopo
+
+// Isso levou a padrão comum chamado de IIFE (Imediately Invoked Function
+// Expression) ou (Expressão de Função Invocada Imediatamente), que previne
+// que variáveis temporárias vazem para o escopo global.
+(function(){
+ var temporary = 5;
+ // Nós podemos acessar o escopo global definindo o "objeto global", que
+ // no browser vai ser sempre `window`. O objeto global pode ter um nome
+ // diferente para ambiente não-browser como o Node.js.
+ window.permanent = 10;
+})();
+temporary; // levanta um erro de referência inexiste
+permanent; // = 10
+
+// Uma das principais características do Javascript é a closure. Que é
+// uma função definida dentro de outra função, a função interna pode acessar
+// todas as variáveis da função externa, mesmo depois da função de fora
+// finalizar sua execução.
+function sayHelloInFiveSeconds(name){
+ var prompt = "Hello, " + name + "!";
+
+ // Funções internas são colocadas no escopo local por padrão, assim como
+ // se fossem declaradas com `var`.
+ function inner(){
+ alert(prompt);
+ }
+ setTimeout(inner, 5000);
+ // `setTimeout` é assíncrono, portanto a função `sayHelloInFiveSeconds`
+ // vai sair imediatamente, e o `setTimeout` irá chamar a interna depois.
+ // Entretanto. como a interna é fechada dentro de "sayHelloInFiveSeconds",
+ // a interna permanece podendo acessar a variável `prompt` quando depois
+ // de chamada.
+}
+sayHelloInFiveSeconds("Adam"); // Vai abrir um popup com "Hello, Adam!" em 5s
+
+///////////////////////////////////
+// 5. Mais sobre Objetos; Construtores e Prototypes
+
+// Objetos podem conter funções.
+var myObj = {
+ myFunc: function(){
+ return "Olá mundo!";
+ }
+};
+myObj.myFunc(); // = "Olá mundo!"
+
+// Quando uma função ligada a um objeto é chamada, ela pode acessar o objeto
+// da qual foi ligada usando a palavra-chave `this`.
+myObj = {
+ myString: "Olá mundo!",
+ myFunc: function(){
+ return this.myString;
+ }
+};
+myObj.myFunc(); // = "Olá mundo!"
+
+// O `this` só funciona para dentro do escopo do objeto, portanto, se chamarmos
+// um método do objeto fora de seu escopo, este não irá funcionar.
+var myFunc = myObj.myFunc;
+myFunc(); // = undefined
+
+// Inversamente, uma função pode ser atribuída a um objeto e ganhar a acesso
+// através do `this`, até mesmo se ela não for chamada quando foi definida.
+var myOtherFunc = function(){
+ return this.myString.toUpperCase();
+}
+myObj.myOtherFunc = myOtherFunc;
+myObj.myOtherFunc(); // = "OLÁ MUNDO!"
+
+// Nós podemos também especificar um contexto onde a função irá executar,
+// usando o `call` ou `apply`.
+
+var anotherFunc = function(s){
+ return this.myString + s;
+}
+anotherFunc.call(myObj, " E Olá Lua!"); // = "Olá mundo! E Olá Lua!"
+
+// A função `apply` é praticamente a mesma coisa, mas ela pega um array
+// como lista de argumentos.
+
+anotherFunc.apply(myObj, [" E Olá Sol!"]); // = "Olá mundo! E Olá Sol!"
+
+// Isto é util quando trabalhamos com uma função que aceita uma sequência de
+// argumentos e você quer passar um array.
+
+Math.min(42, 6, 27); // = 6
+Math.min([42, 6, 27]); // = NaN (uh-oh!)
+Math.min.apply(Math, [42, 6, 27]); // = 6
+
+// Mas, o `call` e `apply` são somente temporários. Quando você quiser que
+// permaneça sempre no escopo, use `bind`.
+
+var boundFunc = anotherFunc.bind(myObj);
+boundFunc(" E Olá Saturno!"); // = "Olá mundo! E Olá Saturno!"
+
+// `bind` também pode ser usado para parcialmente aplicar (curry) uma função.
+
+var product = function(a, b){ return a * b; }
+var doubler = product.bind(this, 2);
+doubler(8); // = 16
+
+// Quando você invoca uma função com a palavra-chave `new`, um novo objeto
+// é criado, e fica disponível para a função pela palavra-chave `this`.
+// Funções são desenhadas para serem invocadas como se invocam os construtores.
+
+var MyConstructor = function(){
+ this.myNumber = 5;
+}
+myNewObj = new MyConstructor(); // = {myNumber: 5}
+myNewObj.myNumber; // = 5
+
+// Todo objeto JavaScript possui um `prototype`. Quando você tenta acessar
+// uma propriedade de um objeto que não existe no objeto atual, o interpretador
+// vai olhar imediatamente para o seu prototype.
+
+// Algumas implementações em JS deixam você acessar o objeto prototype com a
+// propriedade mágica `__proto__`. Enquanto isso é util para explicar
+// prototypes, não é parte de um padrão; nós vamos falar de algumas formas de
+// usar prototypes depois.
+
+var myObj = {
+ myString: "Olá Mundo!"
+};
+var myPrototype = {
+ meaningOfLife: 42,
+ myFunc: function(){
+ return this.myString.toLowerCase()
+ }
+};
+
+myObj.__proto__ = myPrototype;
+myObj.meaningOfLife; // = 42
+
+// Isto funciona para funções, também.
+myObj.myFunc(); // = "olá mundo!"
+
+// É claro, se sua propriedade não está em seu prototype,
+// o prototype do prototype será procurado e por aí vai.
+myPrototype.__proto__ = {
+ myBoolean: true
+};
+myObj.myBoolean; // = true
+
+// Não há cópia envolvida aqui; cada objeto guarda uma referência do
+// prototype. Isso significa que podemos alterar o prototype e nossas mudanças
+// serão refletidas em qualquer lugar.
+myPrototype.meaningOfLife = 43;
+myObj.meaningOfLife; // = 43
+
+
+// Nós mencionamos que o `__proto__` não é uma forma padrão, e não há uma
+// forma padrão de mudar o prototype de um objeto já existente. Entretanto,
+// existem duas formas de se criar um objeto com um dado prototype.
+
+// A primeira forma é `Object.create`, que é uma adição recente do JS,
+// e ainda não está disponível em todas as implementações.
+var myObj = Object.create(myPrototype);
+myObj.meaningOfLife; // = 43
+
+// A segunda forma, que funciona em qualquer lugar, é feita com construtores.
+// Construtores tem uma propriedade chamada prototype. Este *não* é o prototype
+// do construtor em si; ao invés disso, ele é o prototype dos novos objetos
+// criados pelo construtor.
+MyConstructor.prototype = {
+ myNumber: 5,
+ getMyNumber: function(){
+ return this.myNumber;
+ }
+};
+var myNewObj2 = new MyConstructor();
+myNewObj2.getMyNumber(); // = 5
+myNewObj2.myNumber = 6
+myNewObj2.getMyNumber(); // = 6
+
+// Tipos originais da linguagem como strings e números também possuem
+// construtores equivalentes.
+var myNumber = 12;
+var myNumberObj = new Number(12);
+myNumber == myNumberObj; // = true
+
+// Exceto, que eles não são totalmente equivalentes.
+typeof myNumber; // = 'number'
+typeof myNumberObj; // = 'object'
+myNumber === myNumberObj; // = false
+if (0){
+ // O código não vai executar, porque 0 é um valor falso.
+}
+
+// Entretanto, esses objetos encapsulados e as funções originais compartilham
+// um mesmo prototype, portanto você pode adicionar funcionalidades a uma string,
+// por exemplo.
+String.prototype.firstCharacter = function(){
+ return this.charAt(0);
+}
+"abc".firstCharacter(); // = "a"
+
+// Esse fato é usado para criar os chamados `polyfills`, que implementam
+// uma nova característica do Javascript em uma versão mais velha, para que
+// assim funcionem em ambientes mais velhos como browsers ultrapassados.
+
+// Havíamos mencionado que `Object.create` não estava ainda disponível em
+// todos as implementações, mas nós podemos usá-lo com esse polyfill:
+if (Object.create === undefined){ // Não o sobrescreve se já existir
+ Object.create = function(proto){
+ // faz um construtor temporário com o prototype certo
+ var Constructor = function(){};
+ Constructor.prototype = proto;
+ // então utiliza o new para criar um objeto prototype apropriado
+ return new Constructor();
+ }
+}
+```
+
+## Leitura Adicional
+
+O [Mozilla Developer
+Network](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript) dispõe de uma
+excelente documentação sobre Javascript e seu uso nos browsers. E mais,
+é uma wiki, portanto conforme você vai aprendendo, mais você pode ir ajudando
+os outros compartilhando do seu conhecimento.
+
+[Uma re-introdução do JavaScript pela MDN]
+(https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+cobre muito dos conceitos abordados aqui em mais detalhes. Este guia fala
+somente sobre a linguagem JavaScript em si; se você quiser aprender mais
+sobre e como usar o JavaScript em páginas na web, comece aprendendo sobre
+[Document Object
+Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)
+
+[Aprenda Javascript por Exemplos e com Desafios](http://www.learneroo.com/modules/64/nodes/350) é uma
+variação desse guia com desafios.
+
+[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) é um guia
+profundo de todas as partes do JavaScript.
+
+[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) é o guia clássico
+/ livro de referência.
+
+Parte desse artigo foi adaptado do tutorial de Python do Louie Dinh que está
+nesse site e do [Tutorial de JS](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
+da Mozilla Developer Network.