



















































Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Programação, algoritmos, matemática, códigos, web
Tipologia: Manuais, Projetos, Pesquisas
1 / 59
Esta página não é visível na pré-visualização
Não perca as partes importantes!




















































Bem vindo à série You Don't Know JS (YDKJS). Iniciando é uma introdução à diversos conceitos básicos de programação -- claro que inclinado ao uso do JavaScript (muitas vezes abreviado como JS) especificamente -- e como abordar e entender o resto dos títulos nessa série. Especialmente se você está começando em programação ou JavaScript, esse livro irá, de forma breve, explorar tudo que você precisa saber para iniciar. Esse livro começa explicando os princípios básicos de programação em uma camada mais alta. É mais indicado se você está começando YDKJS com pouca ou nenhuma experiência anterior com programação, e está procurando nesses livros uma ajuda para começar na longa jornada de entender como programar através da visão do JavaScript. O Capítulo 1 deve ser abordado como uma visão geral de coisas que você irá querer aprender e praticar mais para iniciar na programação. Existem também outros recursos para entender melhor essa introdução à programação e eu encorajo você a aprender através deles em adição à este capítulo. Uma vez que você se sentir confortável com os conceitos básicos da programação, o Capítulo 2 irá te familiarizar com o modo de programar com JavaScript. O Capítulo 2 faz uma introdução sobre do que o JavaScript é capaz, mas novamente, ele não é um guia compreensivo -- esse é a finalidade do resto da série YDKJS! Se você já se sente confortável com JavaScript, dê uma olhada no Capítulo 3 como uma breve visão do que esperar com YDKJS, e caia de cabeça!
Vamos começar do começo. Um programa, também conhecido como código fonte ou apenas código, é um conjunto de instruções especializadas para dizer ao computador quais tarefas ele deve realizar. Geralmente, códigos são salvos em arquivos de texto, apesar de que, em JavaScript, você também pode escrever códigos direto no developer console do navegador, o qual iremos cobrir em breve.
As regras para formatos e combinações de instruções é chamado linguagem de computação, e algumas vezes é referenciado como sintaxe, bem parecido como a lingua Portuguesa diz à você a forma de pronunciar palavras e de como criar sentenças válidas usando palavras e pontuações.
Em linguagens de computação, um grupo de palavras, números e operadores que realizam tarefas específicas são uma instrução. Em JavaScript, uma instrução pode ser parecida com o seguinte: a = b * 2 ; Os caracteres a e b são chamados variáveis (veja "Variáveis"), que são recipientes em que você pode armazenar qualquer coisa dentro. Em programas, variáveis detém valores (como o número 42 ) que serão utilizados pelo programa. Pense neles como nomes simbólicos para chamarmos os valores. Em contrapartida, o 2 é apenas um valor, chamado valor literal, por que é apresentado sozinho, sem estar armazenado em uma variável. Os caracteres = e * são operadores (veja "Operadores") -- eles realizam ações com os valores e variáveis como realizar uma atribuição qualquer ou uma multiplicação matemática. A maioria das instruções em JavaScript termina com um ponto e vírgula (;) no final. A instrução a = b * 2; diz ao computador, grosseiramente falando, para pegar o valor atual dentro da variável b, multiplicar esse valor por 2 , depois armazenar o resultado dentro de outra variável, chamada a. Programas são apenas coleções de muitas instruções, que juntas descrevem todas as etapas que são necessárias para cumprir a finalidade do programa.
Instruções são feitas de uma ou mais expressões. Uma expressão é qualquer referência à uma variável ou valor, ou um conjunto de variáveis e valores combinados com operadores. Por exemplo: a = b * 2 ; Essa instrução tem quatro expressões dentro dela:
Tente você mesmo Esse capítulo irá introduzir você em cada conceito de programação com snippets simples de código, todos escritos em JavaScript (claro!). Nunca é demais enfatizar: enquanto você lê este capítulo -- e você poderá precisar vir aqui diversas vezes -- você deve praticar cada um desses conceitos escrevendo o código você mesmo. A forma mais fácil de fazer isso é abrir o console do developer tools do seu navegador favorito (Firefox, Chrome, IE, etc.). Dica: Geralmente, você pode abrir o console com um atalho do teclado ou um item do menu. Para informações mais detalhadas sobre abrir e utilizar o console do seu navegador favorito, veja "Mastering The Developer Tools Console" (http://blog.teamtreehouse.com/mastering-developer-tools-console). Para digitar mais de uma linha no console, use
Vá em frente, tente também! A melhor forma de aprender programação é produzindo códigos!
No exemplo anterior, usamos o console.log(..). Vamos, superficialmente, entender o que essa linha de código faz. Você deve ter suspeitado: essa é exatamente a forma como imprimimos texto (também conhecido como output) no console do desenvolvedor. Primeiro, a parte do log( b ) é usada como uma função de chamada (veja "Funções"). O que está acontecendo é que estamos usando a variável b na função para pegar seu valor e imprimir no console. Depois, a parte do console. é uma referência ao objeto onde a função log(..)está localizada. Iremos cobrir objetos e suas propriedades com mais detalhes no Capítulo 2. Outra forma de criar um output que você possa visualizar é rodar a instrução alert(..). Por exemplo: alert( b ); Se você rodar esse comando, irá perceber que ao invés de imprimir o resultado no console, um popup com o conteúdo da variável b e um botão de "OK" irão aparecer. Entretanto, usar console.log(..) em geral vai facilitar seu aprendizado e a forma de rodar seus programas, mais do que se estivesse usando o alert(..), porque com o console.log(..) você pode expressar mais valores de uma vez sem interromper a interface do navegador. Para esse livro, iremos usar sempre o console.log(..) para os nossos outputs.
Enquanto estávamos discutindo sobre o output, você deve ter se perguntado sobre o input (em outras palavras, receber informações do usuário). A forma mais comum de isso acontecer é através de um formulário em uma página HTML (como caixas de texto) para o usuário inserir suas informações e depois usar JS para ler esses valores nas variáveis do seu programa. Mas existe uma maneira ainda mais fácil de conseguir um input com a finalidade de demonstração e aprendizado como as que você irá fazer ao longo desse livro. Usando a função prompt(..): age = prompt( "Please tell me your age:" ); console.log( age ); Como você deve ter suspeitado, a mensagem a ser passada para o prompt(..) -- nesse caso, "Please tell me your age:" -- é impresso no popup. O resultado deve ser parecido com a imagem abaixo:
O operador de igualdade = é usado para atribuir -- primeiro calculamos o valor do lado da mão direita (valor original) do = e então o colocamos em uma variável que especificamos no lado da mão esquerda (variável de destino). Atenção: Essa pode parecer uma ordem reversa estranha de especificar uma atribuição. Ao invés de a = 42, algumas pessoas preferem inverter a ordem do valor original na esquerda e a variável de destino na direita, algo como 42 -> a (isso não é JavaScript valido!). Infelizmente, a forma ordenada a = 42 e variações similares, prevalece em linguagens de programação modernas. Caso pareça uma forma não-natural, tome algum tempo assimilando essa forma na sua cabeça até se sentir acostumado. Considere: a = 2 ; b = a + 1 ; Aqui, atribuimos o valor 2 à variável a. Assim, pegamos o valor da variável a (ainda 2 ), adicionamos 1 a ele, resultando no valor 3 , então armazenamos esse valor na variável b. Apesar de não ser tecnicamente um operador, você irá precisar da palavra- chave var em cada programa, por ser o primeiro modo de declarar (conhecido como criar) variáveis (veja "Variáveis"). Você sempre deve declarar a variável por nome antes de usá-la. Mas você precisa declarar a variável apenas uma vez para cada escopo (veja "Escopo"); ela pode ser usada depois quantas vezes forem necessárias. Por exemplo: var a = 20 ; a = a + 1 ; a = a * 2 ; console.log( a ); // 42 Aqui encontram-se os operadores mais comuns em JavaScript:
podem, alternativamente, serem chamados por obj["a"]. Veja mais no capítulo 2.
Quando comparada a string "99.99" com o número 99.99, muitos concordam que elas sejam equivalentes. Mas ele não são exatamente iguais, são? É o mesmo valor em duas representações diferentes, dois tipos diferentes. Você poderia dizer que eles são "igualdade nao-estrita", não poderia? Para te ajudar nessas situações, o JavaScript irá, em alguns casos, implicitamente converter os valores para os tipos certos. Sendo assim, se você usar o operador de igualdade não-estrita == para fazer uma comparação entre "99.99" == 99.99, o JavaScript vai converter o lado da mão esquerda "99.99" para seu número(number) equivalente 99.99. A comparação então se torna 99.99 == 99.99, que é claro, é verdadeira (true). Apesar de ter sido feito para te ajudar, coerções implícitas geram confusão se você não teve tempo de aprender as regras que regem seu comportamento. A maioria dos desenvolvedores de JS nunca tiveram, então o sentimento geral é que coerções implícitas são confusas e deixam os programas com bugs inesperados, e os mesmos devem ser evitados. Em alguns casos até o design da linguagem é considerado falho. Entretanto, coerções implícitas é um mecanismo que pode ser aprendido, e mais ainda deve ser aprendido por qualquer um que queira levar a programação em JavaScript a sério. Não apenas as coerções não são confusas, uma vez que aprendidas as regras, como pode fazer os seus programas melhores! Os esforços para aprender valerão a pena. Nota: Para mais informações sobre coerções, veja o Capítulo 2 desse título (Iniciando) e o Capítulo 4 de Tipos & Gramática da série. Comentários do Código A vendedora da loja de celulares pode escrever algumas notas sobre funcionalidades de um recém-lançado aparelho ou sobre os novos planos que a empresa oferece. Essas notas são apenas para ela ler -- elas não são feitas para os consumidores lerem. De qualquer forma, essas notas ajudam a vendedora a fazer seu trabalho por documentar os "como's" e "porquê's" do que deve-se falar aos consumidores. Uma das lições mais importantes que você pode aprender sobre códigos é que eles não são apenas para computadores. O código é feito tanto, senão mais, para o desenvolvedor do que para o compilador. Seu computador se importa apenas com código de máquina, uma série de binários, 0s e 1s, que vem da compilação. Existe uma infinidade de programas que você pode escrever que produzem as mesmas séries de 0s e 1s. As escolhas que você faz sobre como programar importam -- não apenas para
você, mas para toda a equipe que você está trabalhando e até para você mesmo no futuro. Você deve se empenhar não apenas em escrever programas que funcionam corretamente, mas programas que fazem sentido ao serem examinados. Você pode percorrer uma boa parte desse caminho começando por escolher bons nomes para variáveis (veja "Variáveis") e funções (veja "Funções"). Uma parte importante do nosso código são os comentários. Eles são blocos de texto no seu programa que são inseridos com o propósito único de explicar coisas a um humano. O interpretador/compilador sempre irá ignorar esses comentários. Existem diversas opiniões sobre o que faz um código ser bem documentado; não podemos definir regras universais. Entretanto, algumas observações e orientações são bastante úteis:
var amount = 99.99; amount = amount * 2 ; console.log( amount ); // 199. // converte o amount` para uma string, e // adiciona "$" no começo amount = "$" + String( amount ); console.log( amount ); // "$199.98" A variável amount começa armazenando o número 99.99, e depois armazena o resultado númerico(number) de amount * 2, que é 199.98. O primeiro comando e console.log(..) precisa implicitamente converter o valor de number para string para poder imprimí-lo. A instrução amount = "$" + String(amount) explicitamente converte o valor 199.98 para uma string e adiciona um caractere "$" para o começo. Nesse ponto, amount agora armazena o valor em string de "$199.98", então o segundo comando console.log(..) não precisa fazer nenhuma coerção para imprimir seu valor. Os desenvolvedores JavaScript irão notar a flexibilidade de usar a variável amount para cada um dos valores 99.99, 199.98 e "$199.98". Entusiastas da tipagem estática irão preferir separar valores como amountStr para armazenar a representação do valor "$199.98", por ser de um tipo diferente. De qualquer forma, você irá notar que amount armazena um valor corrente que é alterado conforme o decorrer do programa, ilustrando assim o primeiro propósito das variáveis: gerenciar o estado do programa. Em outras palavras, estado é o acompanhamento das mudanças dos valores conforme seu programa está rodando. Outro exemplo comum de como usar uma variável é quando você deseja definir as opções de valores. Isso é geralmente chamado de constante, quando você declara uma variável com um valor e deseja que o valor não mude ao longo do programa. Você declara essas constantes geralmente no início do programa, de forma a se tornar um lugar conveniente de se visitar caso deseje alterar algum valor. Por convenção, variáveis definidas como constantes em JavaSscript são geralmente capitalizadas e separadas por um sublinhado. Abaixo um exemplo simples: var TAX_RATE = 0.08; // 8% de taxas var amount = 99.99;
amount = amount * 2 ; amount = amount + (amount * TAX_RATE); console.log( amount ); // 215. console.log( amount.toFixed( 2 ) ); // "215.98" Nota: Assim como console.log(..) tem a função log(..) acessada como uma propriedade do valor do objeto de console, toFixed(..)é uma função que pode ser acessada para valores number. O number em JavaScript não é automaticamente formatado para ser o valor de uma moeda -- o sistema não sabe o que se pretende fazer e não existe um tipo específico para moedas. toFixed(..) nos deixa especificar quantos valores decimais gostaríamos que o number fosse arredondado, e ele produz a string como necessário. A variável TAX_RATE só é uma constante por convenção -- não existe nada especial nesse programa que não permita que ela seja alterada. Mas se a cidade aumentar o valor das taxas para 9%, nós ainda poderemos atualizar o valor de TAX_RATE para 0.09 no mesmo lugar, ao invés de procurar diversas ocorrências do valor 0.08 ao longo do programa e ter que atualizá-los um por um. A nova versão do JavaScript no momento que escrevo isso (comumente chamada de "ES6") inclui uma nova forma de declarar constantes, usando const ao invés de var: // como em ES6: const TAX_RATE = 0.08; var amount = 99.99; // .. Constantes são tão úteis quanto variáveis de valores imutáveis, exceto que constantes também previnem que valores sejam alterados acidentalmente após sua configuração inicial. Se você tentar designar diferentes valores para TAX_RATE após sua primeira declaração, seu programa vai rejeitar a mudança (e em modo estrito, irá gerar um erro -- veja "Modo Estrito" no Capítulo 2). Falando nisso, o tipo de "proteção" contra acidentes é similar ao de linguagens com tipagem estática, assim você vê como a tipagem estática em outras linguagens pode ser bem atrativa! Nota: Para mais informações sobre os diferentes valores em variáveis que podem ser usados em seus programas, veja o título Tipos & Gramática dessa série.
A forma mais comum é a condicional if. Essencialmente, você está dizendo, "se essa condição for verdadeira, faça isso...". var bank_balance = 302.13; var amount = 99.99; if (amount < bank_balance) { console.log( "Quero comprar esse celular!" ); } A condicional if requer uma expressão entre parênteses ( ) que pode ser definida como verdadeira (true) ou falsa (false). Nesse programa, declaramos a expressão amount < bank_balance, que irá determinar se o valor é true ou false, dependendo da quantidade dentro da variável bank_balance. Você pode até mesmo definir uma alternativa para se a condição não for verdadeira, uma cláusula chamada else. Considere: const ACCESSORY_PRICE = 9.99; var bank_balance = 302.13; var amount = 99.99; amount = amount * 2 ; // podemos fazer uma compra extra? if ( amount < bank_balance ) { console.log( "Vou levar este acessório!" ); amount = amount + ACCESSORY_PRICE; } // se não pudermos: else { console.log( "Não, obrigado." ); } Aqui, se amount < bank_balance for true, iremos imprimir "Vou levar este acessório!" e adicionar 9.99 para a nossa variável amount. Ou senão pudermos, a cláusula else diz que podemos responder, polidamente, "Não, obrigado." e deixar o amount inalterado. Como discutimos em "Valores & Tipos" anteriormente, valores que não são de algum tipo anteriormente definido, geralmente é coergido para o novo tipo. Se a condicional if esperar um tipo boolean, mas o argumento que você passou for de algum tipo que não seja boolean, uma coerção irá acontecer. O JavaScript define uma lista de valores específicos que são considerados "falsinhos" porque quando coergido para boolean, eles se tornam false -- esses valores incluem 0 e "". Qualquer outro valor não incluído na lista de "falsinhos" será automaticamente definido como "verdadeirinho" -- quando coergidos para boolean se tornam true. Valores verdadeirinhos incluem coisas
como 99.99 e "free". Veja "Verdadeirinhos & Falsinhos" no Capítulo 2 para mais informaçoes. Condicionais existem em outras formas além do if. Por exemplo, a instrução switch pode ser usada como um atalho para uma série de instruções if..else (veja o Capítulo 2). Os Loops (veja "Loops") usam uma condicional para determinar se um loop deve prosseguir rodando ou parar. Nota: Para conhecer mais a fundo sobre coerções que podem ocorrer implicitamente ao testar expressões em condicionais, veja o Capítulo 4 do título desta série Tipos & Gramática. Loops Durante dias movimentados, existe uma lista de espera de consumidores que precisam falar com a vendedora da loja de celulares. Enquanto houverem pessoas na lista, ela precisa continuar atendendo o próximo consumidor. Repetir uma série de ações até que certa condição falhe -- em outras palavras, repetir apenas enquanto a condição for respeitada -- é o trabalho dos loops na programação ( NT : traduzido também como laços); os loops podem ter diversas formas, mas todos eles têm esse mesmo comportamento. Um loop inclui a condição teste, assim como o bloco (tipicamente um { .. }). A cada vez que o bloco de loop é executado, damos o nome de iteração. Por exemplo, o loop while e o loop do..while ilustram o conceito de repetir um bloco de instruções até uma condição deixar de ser verdadeira (true): while (numOfCustomers > 0 ) { console.log( "Como posso ajudar?" ); // Ajude o consumidor... numOfCustomers = numOfCustomers - 1 ; } // versus: do { console.log( "Como posso ajudar?" ); // Ajude o consumidor... numOfCustomers = numOfCustomers - 1 ; } while (numOfCustomers > 0 );
Como você pôde ver, nos dois casos a condicional i <= 9 foi verdadeira(true) para as 10 primeiras iterações (i para os valores de 0 até 9 ) em ambas as formas do loop, mas se torna falsa(false) uma vez que o valor de i chega a 10. O loop for tem três instruções: uma atribuição inicial (var i = 0), um teste condicional (i <= 9), e uma atualização (i = i + 1). Sendo assim, se o que você pretende fazer com a iteração é uma contagem, for é a forma mais compacta e em geral mais fácil de entender e escrever. Existem outros loops especializados que são designados a iterar sobre valores específicos, como propriedades de um objeto (veja o Capítulo 2) onde a aplicação do teste condicional é saber se todas as propriedades foram processadas. O conceito de "iterar até determinada condição falhar" permanece independentemente do formato do loop. Funções A vendedora da loja de celulares provavelmente não anda com uma calculadora para saber a quantidade de taxas e o valor final do produto. Essa é uma tarefa que ela precisa definir uma vez e reusar diversas vezes. As chances são que a empresa que ela trabalha tenha um aparelho (computador, tablet, etc) que tenha, de fábrica, esse tipo de funcionalidade. De maneira similar, o programa quase certamente irá dividir o código em partes reusáveis, ao invés de ficar se repetindo. A forma que fazemos isso é definindo uma função (function). Uma função geralmente é um bloco de código nomeado, de forma que ele possa ser "chamado" pelo nome, fazendo o código dentro dele ser acionado sempre que preciso. Considere: function printAmount() { console.log( amount.toFixed( 2 ) ); } var amount = 99.99; printAmount(); // "99.99" amount = amount * 2 ; printAmount(); // "199.98" Funções podem, opcionalmente, carregar argumentos (conhecidos também como parâmetros) -- valores que você designa a ela. E eles podem, também opcionalmente, retornar um outro valor. function printAmount(amt) {
console.log( amt.toFixed( 2 ) ); } function formatAmount() { return "$" + amount.toFixed( 2 ); } var amount = 99.99; printAmount( amount * 2 ); // "199.98" amount = formatAmount(); console.log( amount ); // "$99.99" A função printAmount(..) utiliza um parâmetro que chamamos amt. A função formatAmount() retorna um valor. Claro, você também pode combinar essas duas técnicas na mesma função. Funções são geralmente usadas para códigos que você planeja chamar diversas vezes, mas eles podem ser úteis também para organizar códigos relacionados em coleções que você possa nomear, mesmo que você só planeja chamá-los apenas uma vez. Considere: const TAX_RATE = 0.08; function calculateFinalPurchaseAmount(amt) { // calcula o novo amount adicionando a tax amt = amt + (amt * TAX_RATE); // retorne o novo amount return amt; } var amount = 99.99; amount = calculateFinalPurchaseAmount( amount ); console.log( amount.toFixed( 2 ) ); // "107.99" Apesar de calculateFinalPurchaseAmount(..) ser chamado apenas uma vez, organizar seu comportamento em uma função separadamente faz o código que usa sua lógica (a instrução amount = calculateFinal...) mais limpa. Se a função tiver mais instruções nela, os benefícios podem ser ainda maiores.