Skip to content

Latest commit

 

History

History
233 lines (128 loc) · 22.7 KB

001-como-aprender-js-corretamente.md

File metadata and controls

233 lines (128 loc) · 22.7 KB

Como aprender Javascript Corretamente! – JavaScript.is (Sexy)

Dois roteiros separados para aprender javascript corretamente para leitores com diferentes bases de programação:

Aprenda Javascript Corretamente (para NÃO programadores Javascript e programadores de primeira viagem)

Duração: 6 a 8 semanas Pré-Requisito: Pelo menos ensino médio completo (experiência em programação não necessária) Continuar curso abaixo

Tópicos nesse post

  • Como NÃO aprender javascript
  • Recursos para este curso
  • Semanas 1 e 2: Introdução, Tipos de dados, expressões e operadores
  • Semanas 3 e 4: Objetos, Arrays, funçoes, DOM, jQuery
  • Obtenha “The ultimate javascript editor”: WebStorm
  • Seu primeiro projeto: Um Questionário Dinâmico
  • Semanas 5 e 6: Expressões Regulares, Eventos do Objeto Window, jQuery
  • Semanas 7 e 8 (se necessária): Classes, Herança, mais HTML5
  • Continue melhorando
  • Palavras de encorajamento

Este esboço de curso lhe dá um estruturado e instrutivo roteiro de como aprender Javascript corretamente e completamente, de absoluto iniciante até um bom nível de conhecimento!

Você, realmente, quer aprender Javascript; é por isso que você está aqui, e você teve uma sábia decisão, se você quer desenvolver websites modernos e aplicações web (incluindo uma Startup da internet), você precisa saber Javascript. E existindo mais recursos para o aprendizado de Javascript que o necessário, encontrar o mais eficiente e benéfico método de aprender “a linguagem da web” não é fácil e pode ser frustante.

É interessante notar que ao contrário de alguns anos atrás, quando você precisava saber uma verdadeira linguagem no lado do servidor (tal como PHP, Rails, Java, Python, ou Perl) para desenvolver uma escalável e dinâmica aplicação com banco de dados na web, hoje você pode fazer o mesmo ou mais somente com Javascript.

Como NÃO aprender javascript

  • Não tente aprender Javascript pela primeira vez através de partes não relacionadas ou relacionadas a tutoriais online de javascript – esta é a maneira errada de aprender uma linguagem de programação. Isto poderia adiantar para alguns após incontáveis tutoriais, mas isso é um processo ineficiente que carece da estrutura hierárquica adequada necessária para aprender um assunto completamente. Isso pode levá-lo a situações em que você irá “travar” , quando você começar a criar websites e aplicações web com a linguagem. Em suma, você não terá o “know-how” (conhecimento) necessário para usar essa linguagem como uma ferramenta – como sua ferramenta.

  • Além disso, alguns vão recomendar a você aprender Javascript com “Javascript: Thee Good Parts” (O melhor do Javascript), do respeitado padrinho do Javascript Douglas Crockford, o qual é imensamente experiente em Javascript, sendo visto como o Einstein do mundo Javascript. Seu livro, O melhor do Javascript, não é um bom livro de Javascript para iniciantes. Ele não explica conceitos básicos de Javascript de forma completa, clara e de fácil digestão. Eu recomendo a você seguir os vídeos avançados de Crockford, contudo, na parte do roteiro Avançado.

  • E não tente aprender a linguagem usando apenas o Codeacademy, porque enquanto você souber programar partes muito pequenas de tarefas javascript, você absolutamente NÃO irá ter conhecimento suficiente para construir aplicações web. Eu recomendo Codeacademy abaixo como um recurso suplementar de aprendizado.

Recursos para este curso

ATUALIZAÇÃO: Um grupo de estudo foi criado (em 8 de abril) para este roteiro no Reddit pelo Usuário d0gsbody. Ele e os membros do grupo são muito prestativos e motivados. Eu recomendo a você juntar-se ao grupo; Eles vão fazer com que você mantenha-se motivado e ajudarão você no seu trajeto para aprender javascript. É difícil aprender javascript do zero por conta própria. Aqui está o link para Aprendendendo JS Corretamente – Grupo de estudo: Semana 1.

Nós vamos usar um dos 2 livros de Javascript, um é ideal para programadores de primeira viagem e o outro é melhor se você tiver uma pequena experiência em programação.

  • Você pode usar qualquer um dos 2 seguintes livros:

Este primeiro livro é minha preferência pessoal porque o autor explica os tópicos muito bem e abrange até tópicos avançados de javascript. Entretanto, é melhor aproveitado se você tiver um mínimo conhecimento básico de desenvolvimento web. Portanto, se você tiver um pequeno conhecimento de programação ou alguma experiência em desenvolvimento web (não necessariamente em Javascript), compre este livro:

Versão impressa: Professional Javascript for Web Developers Versão Kindle: Professional Javascript for Web Developers

Ou:

Compre este livro se você não tiver nenhuma experiência em programação:

Versão Impressa: Javascript: The Definitive Guide Versão Kindle: Javascript: The Definitive Guide

  • Inscreva-se com uma conta no Stack Overflow (um serviço grátis). Este é um fórum para perguntar e responder questões sobre programação. Este website vai ser consideravelmente mais útil que o Codecademy para responder suas dúvidas em programação, mesmo muito básicas ou aparentemente questões estúpidas (lembre-se, nunca existe uma pergunta estúpida).

  • Inscreva-se com uma conta em Codeacademy. Esta é uma plataforma online para aprender a programar: você escreve um código neste website, diretamente do seu browser. (Também é um serviço grátis).

  • Publicações no Blog JavaScriptIsSexy: Objects, Closures, Variable Scope and Hoisting, Functions, e outros.

O Roteiro para Obtenção de Conhecimento Javascript

Você irá aprender sobre toda a linguagem Javascript (e jQuery e um pouco de HTML5) em 6 ou 8 semanas, se você completar este esboço de curso inteiro. Se você não tiver tempo suficiente para se submeter a fazer todas as seções em 6 semanas (se for relativamente um itinerário agressivo), tente fazer isto em não mais que 8 semanas. Quanto mais você demorar, mais difícil será para você compreender e relembrar tudo que aprendeu.

Semana 1 e 2 (Introdução, Tipos de dados, Expressões e Operadores)

  1. Se você ainda não sabe HTML e CSS muito bem, complete a trilha “Fundamentos Web” no site Codecademy.

  2. Leia o Prefácio e os capítulos 1 e 2 de Javascript: The Definitie Guide.

    Ou leia a Introdução e os capítulos 1 e 2 de Professional Javascript for Web Developers.

  3. Muito Importante: Cada exemplo de código que você encontrar no livro, escreva-o, teste e experimente o código nos browsers Firefox e Chrome. Ou use o JSFiddle. Não use o Safari. Eu recomendo o Firefox – adicione o Firebug add on para Firefox e use isso para testar e debugar seu código. O console do browser é a área do browser onde você poderá escrever e rodar o código JavaScript.

    E o JSFiddle é uma aplicação web que permite a você escrever e testar seu código online, como no seu browser. Você pode testar todo tipo de código, incluindo uma combinação de HTML, CSS e Javascript (e jQuery).

  4. Trabalhe através da seção Introdução ao Javascript na trilha JavaScript do Codecademy.

  5. Leia os capítulos 3 e 4 de JavaScript: The Definitive Guide.

    Ou leia o Prefácio e os capítulos 3 e 4 de Professional JavaScript for Web Developers. Você pode pular a seção “Bitwise Operators”; dificilmente você irá usar isso na sua carreira JavaScript.

    E novamente, assegure-se de parar e escrever os códigos exemplos no seu browser (ou JSFiddle) e experimentar – mude algumas variáveis e saboreie um pouco do código.

  6. Leia o capítulo 5 de JavaScript: The Definitive Guide. Sem leituras adicionais para Professional JavaScript for Web Developers, você já leu o material no último capítulo.

  7. Trabalhe nas seções de 2 a 5 da trilha JavaScript no Codecademy.

Semanas 3 e 4 (Objetos, Arrays, Funções, DOM, jQuery)

  1. Leia meu post Objetos Javascript em detalhe

    Ou leia o capítulo 6 de Javascript: The Definitive Guide.

    Ou leia o capítulo 6 de Professional Javascript for Web Developers. NOTA: Somente leia a seção “Entendendo Objetos”.

    Qualquer um dos 3 são bons, embora os 2 textos dos livros entram em maiores detalhes: os detalhes extra você pode pular com confiança, se você ler e compreender corretamente meu post.

  2. Leia os capítulos 7 e 8 de Javascript: The Definitive Guide.

    Ou leia os capítulos 5 e 7 de Professional Javascript for Web Developers.

  3. Neste momento, você deve gastar bastante tempo escrevendo código no console do seu browser e testando as declarações if-else, loops for, arrays, funções, objetos e mais. É extremamente importante que você saiba (e continue praticando) como programar independentemente (sem ajuda do Codecademy) em seu browser. Quando você voltar para o Codecademy, você não precisará de nenhuma ajuda ou dica. Cada tarefa já será fácil para você.

    Se você ainda está tendo dificuldades com Codecademy, volte ao seu browser e continue tentando. É ai que você vai aprender mais. Isto é o análogo ao Lebron James aprimorando suas habilidades nas ruas (nas quadras de basquete do seu bairro), ou ao Bill Gates trabalhando em seu porão.

    Há um enorme valor em você mexer e aprender pouco a pouco por conta própria. Você tem que perceber o valor dessa estratégia, e também abraçar e acreditar que isso vai dar certo!

    Há uma falsa sensação de sucesso quando se usa o Codecademy. O maior problema com o Codecademy é que as dicas e o pequeno fragmento de código o ajuda tanto que você tem a falsa sensação de sucesso quando você avança nos exercícios facilmente. Você não sabia disso ainda, mas muito do que você está fazendo não é por sí próprio.

    Agora, Codecademy continua sendo de grande ajuda para se aprender como programar, particularmente na maneira em que o orienta através do processo de desenvolvimento de pequenos projetos e pequenas aplicações de construções de código básicas como if, for, funções e variáveis.

  4. Volte ao Codecademy e complete a trilha Javascript trabalhando nas seções 6, 7 e 8 (Estrutura de Dados até Objetos 2).

  5. Enquanto você estiver no Codecademy, faça os 5 pequenos projetos básicos na seção Projects. Depois disso, você estará livre do Codecademy. E isso é bom pois quanto mais você trabalhar por sua conta, mais rápido irá ser seu aprendizado e melhor você estará preparado para começar a programar sozinho.

  6. Leia os capítulos 13, 15, 16 e 19 de Javascript: The Definitive Guide.

    Ou leia os capítulos 8, 9, 10, 11 e 14 de Professional Javascript for Web Developers. Este livro não trata sobre jQuery, e o que o Codecademy trata sobre jQuery é insuficiente. Siga esse curso de jQuery – é grátis: http://try.jquery.com/

    E você pode ler o capítulo 19 de Javascript: The Definite Guide, se você tiver o livro, para mais sobre jQuery.

  7. Trabalhe através de todo o curso em http://try.jquery.com/

Pegue “The Ultimate Javascript editor: WebStorm”

  • Antes de você construir seu primeiro projeto, se você pretende ser um desenvolvedor Javascript ou usar Javascript muitas vezes, você deve fazer uma pausa agora e baixar uma cópia trial do WebStorm. Aprenda como começar com WebStorm aqui (escrito especialmente para este curso).

WebStorm é insquestionavelmente o melhor editor (IDE) para programar Javascript. Ele custa $49,00. Você tem 30 dias para testar o programa até expirar, mas provavelmente é o melhor investimento que você poderá fazer como um desenvolvedor Javascript, além de comprar o livro que você está usando neste curso aprendendo Javascript.

  • Tenha certeza que você configurou o WebStorm para usar JSHint. JSHint é uma “ferramenta de detecção de erros e potenciais problemas no código Javascript e também para cumprimento das convenções do código feitos por sua equipe”. O legal de usar o WebStorm é que o JSHint automaticamente adiciona uma linha vermelha embaixo dos erros em seu código, como um verificador de palavras faz em uma aplicação de processamento de palavras. Então JSHint irá mostrar todos os erros em seu código (incluindo erros no HTML) e fará de você um melhor programador Javascript, mesmo quando você estiver aprendendo. Isso é extremamente importante. Você irá me agradecer depois que você perceber o quanto WebStorm e JSHint lhe ajudaram a se tornar um melhor programador.

  • Além disso, WebStorm é uma IDE de nível profissional para codificação Javascript para aplicações web, então você irá usar muito isso. E ele é integrado com Node.js, Git, e outros frameworks Javascript, por isso mesmo depois que você se tornar uma estrela do desenvolvimento Javascript, você vai usar ele ainda, a menos que saia uma IDE mais atraente que esta nos próximos meses.

É justo também mencionar o Sublime Text 2, que é o próximo melhor editor Javascript. Mas não é tão rico em recursos e completo (mesmo com os vários add-on) como o WebStorm. Eu uso o Sublime Text 2 para fazer pequenas edições nos arquivos de diferentes linguagens, incluindo arquivos Javascript. Mas não o uso para programar aplicações web em Javascript inteiras.

Seu Primeiro Projeto – Um Questinário Dinâmico

Nesse momento, você já aprendeu o suficiente para construir uma sólida aplicação. Não prossiga nada além disso até você conseguir construir com sucesso essa aplicação que descrevi abaixo. Se você estiver com dificuldades, faça perguntas no Stack Overflow e releia as seções do livro para entender corretamente os conceitos.

Você irá construir uma aplicação de questionário Javascript (você vai usar HTML e CSS também) que funcionará da seguinte forma:

  • Este é um simples questionário com botões de escolha do tipo radio, que vai mostrar ao usuário sua pontuação na competição.

  • O questionário poderá ter quaisquer quantidades de questões e escolhas.

  • Compute a pontuação do usuário e mostre a pontuação final na última página. Na última página deverá aparecer somente a pontuação, então remova a última pergunta.

  • Use um array para armazenar todas as questões. Cada pergunta, juntamente com suas alternativas e respostas corretas, deverão ser armazenadas em um objeto. O array de questões deverá ser parecido com isso:

//Somente uma pergunta está nesse array, mas você vai adicionar todas as perguntas.
var todasPerguntas = [{pergunta: "Quem é o primeiro ministro do Reino Unido?", escolhas: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], respostaCorreta:0}];

  • Dinamicamente (com document.getElementById ou jQuery) adicione a próxima pergunta e remova a atual da tela, quando o usuário clicar no botão “Próximo”. O botão “próximo” vai ser somente o botão para navegar neste questionário.

  • Você pode comentar abaixo ou preferencialmente no Stack Overflow. Provavelmente você terá uma resposta rápida e precisa no Stack Overflow.

Semanas 5 e 6 (Expressões Regulares, Objeto Window, Eventos, jQuery)

  1. Leia os capítulos 10, 14, 17 e 20 de Javascript: The Definitive Guide.

    Ou leia os capítulos 13, 20, e 23 de Professional Javascript for Web Developers.

  2. Lembre-se de manter-se escrevendo todos os exemplos de códigos no console do Firefox e ajustar cada pedaço de código para experimentá-lo e assim realmente entender como ele funciona e porque funciona.

  3. Neste ponto, você deve estar muito confortável com o Javascript, provavelmente se sentindo como um Jedi. Você ainda não é Jedi, e deve continuar usando seus novos conhecimentos e habilidades sempre que possível para continuar aprendendo e melhorando.

  4. Melhore sua aplicação de questionário anterior:

    • Adicione uma validação client-side (no lado do cliente): tenha certeza que o usuário respondeu cada pergunta antes de continuar para a próxima.
    • Adicione um botão “Voltar” para permitir que o usuário volte e mude sua resposta. O usuário pode voltar até a primeira questão. Para as questões que o usuário já tiver respondido, certifique-se de mostrar o botão “radio” selecionado, então o usuário não será forçado a responder a questão novamente, pois ela já foi concluída.
    • Use jQuery para adicionar uma animação (“fade out” para a pergunta atual e “fade in” para a próxima pergunta).
    • Teste o questionário no IE8 e 9 (Internet Explorer 8 e 9), e conserte todos os erros. Isso irá lhe dar um bom trabalho ;)
    • Armazene as perguntas do questionário em um arquivo JSON externo.
    • Adicione uma autenticação de usuário: permita o login de usuários, e salve suas informações de login no “local storage” (armazenador do navegador em HTML5).
    • Use “cookies” para lembrar o usuário, e mostre uma mensagem “Bem vindo, Primeiro Nome” quando o usuário retornar ao questionário.

Semana 7 e se necessária 8 (Classes, Herança, mais HTML5)

  1. Leia os capítulos 9, 18, 21 e 22 de Javascript the Definitive Guide.

    Ou leia meu post no blog, POO em Javascript: O que você PRECISA de saber (em inglês).

    Ou leia os capítulos 6 (somente as seções “Criação de Objeto” e “Herança” desta vez), 16, 22 e 24 de Professional Javascript for Web Developers.

    NOTA: A leitura nesta seção do livro é a mais técnica que você vai encontrar neste roteiro inteiro. Cabe a você escolher se vai ler tudo isso. Você deve pelo menos aprender Padrões “Prototype”, “Factory” e Herança de Protótipos. Você não tem que saber todos os outros padrões.

  2. Melhore seu questionário ainda mais:

    • Use o Twitter Bootstrap para todo o layout da página, incluindo os elementos de questionário para fazê-lo aparentar mais profissional. E como um bônus adicional, use os componentes da interface de abas do Twitter Bootstrap e apresente 4 questionários diferentes, um em cada aba.

    • Aprenda Handlebars.js (em inglês) e adicione o modelo de Handlebars.js ao questionário. Você não deve ter nada de HTML no seu código javascript. Seu questionário está ficando mais avançado pouco a pouco.

    • Pegue a pontuação de todos os usuários que responderam o questionário e mostre a pontuação de cada um no rank geral com todas as pontuações.

  3. Mais tarde (após você aprender Backbone.js e Node.js), você irá usar essas duas tecnologias para refazer seu questionário e tornar este mesmo questionário em um sofisticado, “single-page”, aplicativo web moderno, feito com os últimos frameworks JavaScript. E você irá guardar as credenciais de autenticação do usuário e sua pontuação em um banco de dados MongoDB.

  4. Próximo: Decida um projeto pessoal para construir, e começe a trabalhar no projeto imediatamente (enquanto tudo está fresco na sua mente). Use Javascript Definitive Guide (ou Professional Javascript for Web Developers), como referência se você estiver “emperrado”. E claro, seja um membro ativo do Stack Overflow: pergunte e responda questões para os outros programadores.

Continue Melhorando

  1. Aprenda Backbone.js corretamente (em inglês)

  2. Aprenda Javascript Intermediário e Avançado (em inglês)

  3. Aprenda Node.js corretamente e com confiança (em inglês)

  4. Leia meu futuro post sobre Começando com Meteor.js

  5. Leia meus futuros posts sobre Os três melhores frameworks javascript front-end

Palavras de Encorajamento

Tudo de bom para seus estudos. Nunca desista! Quando você estiver lutando e se sentindo um idiota (você pode, de vez em quando), sempre lembre-se que alguns (talvez a maioria) dos outros novos e experientes programadores em torno do mundo, provavelmente estarão sentindo a mesma coisa.

É difícil no começo quando você está aprendendo a “codar” (programar) pela primeira vez, especialmente se você já passou da adolescência. Adolescentes não tem medo e nada a perder, e muito tempo para jogar fora usar em qualquer coisa que estiverem apaixonados. Então os desafios podem parecer somente pequenos obstáculos para eles.

Mas depois da sua adolescência, você quer resultados rápidos pois não tem mais tempo para perder com assuntos aparentemente triviais. Mas é ai que você tem que ir fundo e não ficar frustado. Apenas continue na tarefa até que você descubra o erro, por uma recompensa que vale a pena esperar até que você triunfe no fim – programação é divertido e lucrativo.

A alegria e o intenso prazer que se tem ao construir uma aplicação é um sentimento incrível que deve ser experimentado para ser entendido. Mais satisfatório, entretanto, é o amadurecimento que você sente ao ter atingido as habilidades e conhecimentos para construir aplicações do zero.

Chegará o momento em que você perceberá que toda dificuldade que enfrentou valeu a pena, porque você se tornou um programador e você sabe que seu futuro é brilhante como desenvolvedor javascript. Assim como os milhares e milhares antes de você: Você sobreviveu aos bugs, você não desistiu, e você triunfou em encontrar várias desculpas para desistir.

Sinta-se a vontade para compartilhar seus links conosco quando você criar algo, mesmo que seja algo pequeno.