Tradução adaptada do artigo "Full-Stack Javascript em seis semanas: um guia curricular"

O desenvolvimento da Web é uma das instruções mais fáceis e mais populares entre os programadores iniciantes. Para trabalhar alguém editor de texto e navegador, não é necessário estudar algoritmos em um nível avançado, o resultado de cada etapa de escrita do programa é visualmente - em geral, muitos benefícios. As principais habilidades no contexto do desenvolvimento da Web são consideradas Javascript de conhecimento.

Agora JavaScript se desenvolve muito rapidamente e, portanto, ao aprender a linguagem é fácil de ficar confuso. Oferecemos-lhe um currículo com uma estrutura conveniente que abrange todos os aspectos necessários de JavaScript e tecnologias relacionadas.

Por que JavaScript?

Vale a pena notar a abertura das empresas - empresas, geralmente competindo entre si, cooperam para desenvolver JavaScript. A linguagem é muito flexível e atenderá aos apoiadores de uma abordagem orientada a objetos e funcional. Um grande número de bibliotecas e frameworks permite que você resolva facilmente qualquer tipo de tarefas, e a plataforma do servidor Node.js possibilita usar um idioma não apenas no navegador, mas também no console. Você pode até escrever desktops e aplicações Móveis: Primeiro - com a estrutura de elétrons, e a segunda é no native native ou reagir.

Fundamentos

A princípio, é necessário estudar os conceitos básicos de JavaScript, desenvolvimento da web e programação como um todo:

• jS - designers e fábricas orientados a objetos, herança;
• jS funcional - funções de ordem superior, fechamentos, recursão;
• especificação de teste de jasmim;
• noções básicas de HTML, CSS e jQuery.

Git.

Git é a ferramenta que você precisa para os desenvolvedores, por isso precisa o mais cedo possível. Aqui estão as habilidades básicas que você deve possuir:

• criando e movendo arquivos em diretórios;
• inicialização e confirmações no git;
• definindo os repositórios no github.

Algoritmos e estruturas de dados

Então vale a pena examinar os algoritmos (em particular, o conceito da complexidade dos algoritmos), bem como as estruturas básicas de dados: listas conectadas, filas, pilhas, árvores de pesquisa binária e mesa de hash. Isso irá ajudá-lo.

Processo interno

Node.js.

10 anos atrás, JavaScript só poderia ser usado para o desenvolvimento de frontend. Agora, graças ao Node.js, o caso não está limitado a uma "frente". O nó é apenas um ambiente para executar o código JS no lado do servidor, portanto, você não terá que estudar a nova sintaxe, mas precisará importar e exportar arquivos, dividir o código nos módulos e usar o Gerenciador de Pacotes NPM.

Servidores, http, express.js

Depois de estudar o nó, é necessário continuar a se familiarizar com o desenvolvimento de backend e classificar servidores e roteamento. Você pode começar de portas e protocolos com ênfase no HTTP e, em seguida, tomar uma biblioteca de nó Express para lidar com solicitações.

Javascript assíncrono.

Bancos de dados, esquemas, modelos e orm

Os bancos de dados são um dos elementos mais importantes do desenvolvimento da Web. Se o seu aplicativo precisar baixar ou armazenar quaisquer dados que não forem perdidos ao atualizar a página terá que usar o banco de dados. É necessário aprender a distinguir entre bancos de dados relacionais e não relacionais e entender os tipos de conexões. Então para se familiarizar com diferente. A capacidade de trabalhar com o ORM também não será supérflua.

A parte dianteira

HTML e CSS.

HTML e CSS é a base das fundações para qualquer desenvolvedor da Web. Você não precisa conhecê-los perfeitamente, mas você deve entendê-los. Você também pode explorar qualquer biblioteca popular (por exemplo, bootstrap) e o pré-processador CSS como o Sass - ele ajudará a tornar o CSS semelhante ao código habitual. Para simplificar o trabalho com HTML, você pode escolher um dos modelos populares, por exemplo, Pug.

jquery e manipulação dom

Tendo criado a aparência da página em ajuda HTML. E CSS, você usará a Biblioteca JQuery para controlar o DOM. Muitos acreditam que o jQuery é inútil e logo será substituído por angular e reagir, mas é insanamente popular e, portanto, vale a pena saber. Além disso, um dia você vai cair em uma situação em que será desconfortável para marcar o microscópio reagir e, depois, o jQuery fácil chegará ao resgate.

Ferramentas de desenvolvedor do Chrome.

Seria imperdoável dividir a atenção das ferramentas cromadas que dão uma enorme quantidade de oportunidades. Com eles, você pode estudar elementos DOM, depurar através do console, rastrear as rotas e muito mais. A seguir estão os recursos convenientes do console do Chrome, o que simplificará a execução de tarefas de rotina.

Ajax.

Se você quiser que o aplicativo não recarregue as páginas após cada operação do banco de dados, você definitivamente precisará de AJAX - envia solicitações HTTP assíncronas de fundo, as respostas para as quais apenas parte da exibição são atualizadas. Você pode trabalhar com ajax através do jQuery usando o método.Ajax.

A programação não é apenas uma maneira de ganhar dinheiro grande e nem mesmo trabalho mental completamente. Esta é uma oportunidade para entender o que o mundo ao seu redor consiste, decompondo-se em pequenas partículas e, em seguida, re-montar, guiado por sua própria lógica e conhecimento.

As linguagens de programação são apenas uma ferramenta com a qual uma pessoa constrói regras nos sistemas criados.

A Internet é muitas oportunidades para as quais as mentes brilhantes e empreendedoras são apreendidas. Claro, o desenvolvimento da Web também tem suas próprias ferramentas para implementar ideias para a vida. Um deles - linguagem programação Javascript. que será discutido neste artigo:

informações gerais

Muitas pessoas, até mesmo não ter relação com a esfera de TI, ouviu a palavra Java. Linguagem independente revolucionária na língua em que os aplicativos estão escrevendo ativamente para sistemas Móveis.. Foi desenvolvido pela promissora da Sun empresa, que então atravessou a oráculo "sob a asa". Mas nem um nem outra empresa não têm nada a ver com JavaScript:

Do sol, levou apenas permissão para usar parte do nome. Surpreendentemente, JavaScript não possui nenhuma empresa.

Ao escrever aplicativos da Web, a programação do JavaScript é usada com mais frequência. Se brevemente list características principais Esta linguagem deve ser selecionada da seguinte forma:

• Orientado a Objeto. Execução do programa é a interação de objetos;
• Trazer os tipos de dados é realizado automaticamente;
• Funções são os objetos da classe base. Esse recurso faz javascript semelhante a muitas linguagens de programação funcional, como Lisp e Haskell;
• Limpeza automática de memória. A chamada coleta de lixo faz javascript semelhante a C # ou Java.

Se falarmos sobre a essência do uso do JavaScript, esta linguagem permite que você "revive" páginas fixas de sites usando um código que pode ser iniciado ( chamados scripts). Ou seja, você pode fazer uma analogia com desenhos animados, onde HTML e CSS são os heróis pro-entregáveis, e o JavaScript é o que os faz se mover.

Se falarmos sobre a sintaxe do JavaScript, os seguintes recursos serão inerentes:

• O registro é importante. Funções com nomes func () e func () - completamente diferentes;
• Depois dos operadores, é necessário colocar um ponto com uma vírgula;
• Objetos e operações internos;
• Espaços não são levados em conta. Você pode usar quantos recuos, assim como traduções de string para organizar seu código.

O código mais simples do JavaScript parece com isso:

Âmbito de aplicação

A fim de entender por que JavaScript é necessário, e quanto é necessário estudar, algumas áreas em que é aplicada essa lingua Programação.

• Desenvolvimento de aplicativos da Web. Quer instalar um contador simples, organize a transmissão de dados entre formulários ou colocar no jogo do seu site? Então JavaScript fará um assistente fiel nesse assunto;
• "Participação ativa" em Ajax. Esta tecnologia tem aplicativos significativamente acelerados, exercendo troca de dados com o servidor no modo "Background":

• OS. Talvez alguém não soubesse, mas o Windows, o Linux e o Mac têm seus concorrentes do navegador, a participação do leão do código é escrita em JavaScript;
• Aplicações Móveis;
• Escopo de treinamento. Qualquer especialidade de programador na universidade inclui o estudo de Javascript de uma forma ou de outra. Isto é devido ao fato de que a linguagem foi originalmente desenvolvida para programadores não muito fortes. As aulas de JavaScript são logicamente tecidas para o curso HTML base, para que o desenvolvimento passe simplesmente.

Vantagens e desvantagens

Não pense que JavaScript é algum tipo de panacéia de todos os problemas, e todo programador com um sorriso no rosto gosta dessa linguagem. Tudo no mundo tem seus próprios lados positivos e negativos. Para começar, notamos as deficiências.

• A necessidade de fornecer navegador transversal. Como o JavaScript atua como uma tecnologia da Internet, então você tem que colocar as regras que estabelecem a World Wide Web. O código deve ser executado corretamente em todos, ou pelo menos os navegadores mais populares;
• O sistema de herança na linguagem causa dificuldades em entender o que está acontecendo. Javascript implementou herança baseada em protótipos. As pessoas que estudaram outras linguagens de programação orientadas a objetos estão acostumadas ao habitual " classe descendente herda a classe dos pais" Mas em Javascript, essas coisas estão envolvidas nos objetos diretamente, e isso não se encaixa na cabeça;
• Ausente biblioteca padrão. JavaScript não fornece oportunidades para trabalhar com arquivos, fluxos de E / S e outras coisas úteis;
• A sintaxe como um todo torna difícil entender. A beleza do código claramente não é um javascript, mas a regra principal dos programadores é observada: " Trabalho? Não tente!».

Agora vale a pena notar algumas vantagens

• JavaScript fornece um grande número de oportunidades para resolver uma ampla variedade de tarefas. A flexibilidade da linguagem permite que você use vários modelos de programação em relação a condições específicas. A mente inventiva receberá o prazer presente;
• A popularidade do JavaScript abre uma quantidade considerável de bibliotecas prontas antes do programador, o que permite simplificar significativamente a escrita de código e nivelar a imperfeição da sintaxe;
• Aplicação em muitas áreas. Recursos amplos de JavaScript Dar programadores a chance de se esforçar como desenvolvedor de uma ampla variedade de aplicações, e isso é definitivamente o interesse em atividades profissionais.

Não preste atenção ao fato de que os Miscuses acabaram mais do que as vantagens. Javascript firmemente fixado em seu nicho e nenhuma crítica a partir daí este momento Não escolhe.

Para aqueles que querem estudar

Um caminho difícil e longo terá para aqueles que decidiram aprender completamente o Javascript. Para iniciantes, há recomendações básicas, seguindo o que, é possível simplificar significativamente seu treinamento.

• Primeiro de tudo, HTML. É impossível começar a fazer algo para a Internet sem o básico do básico. Folhas de estilo em cascata (CSS) também serão muito úteis;
• Use nova literatura. A programação não é física, cujas leis são indispensáveis \u200b\u200be novos livros didáticos são cortados. As tecnologias de TI estão desenvolvendo constantemente e não devem ser negligenciadas com atualizações úteis;
• Para tentar escrever todas as seções do programa. Se algo não é nada acabar - você pode emprestar o código de outra pessoa, mas apenas pré-compreensão para mim toda a linha;
• Depuração é o seu amigo fiel. Encontrar rapidamente erros - um dos os pontos mais importantes na programação;
• Não ignore as normas de formatação. Naturalmente, o código não será melhor ou pior de um número diferente de recuos e espaços, mas a facilidade de ler e compreender o programador também é um momento importante. O código abaixo? muito difícil percebido, especialmente se você não é dele

• Nomes de variáveis \u200b\u200bdevem ter um valor lexical. No processo de escrita programas simples Parece não é importante, mas quando o número de linhas de código rola mais de mil - todos os demônios quebram as pernas;

O JavaScript é uma linguagem em constante desenvolvimento, especialmente agora, quando uma programação anual de atualização de especificações ecmascript foi estabelecida. A este respeito, a importância do conhecimento Javascript fora do jQuery aumenta.

Claro, neste artigo, não seremos capazes de cobrir toda a necessidade de conhecimento. Certamente, haverá momentos que perdi, talvez fosse enganado ou nossas opiniões com você sobre o conjunto necessário de conhecimento serão diferentes.

Dado esses aspectos, vamos começar ...

O que é teste de fizzizbiz

Fizzizz - Como regra, um pequeno teste visava lascar os desenvolvedores inexperientes. Eu acho que você ficará surpreso com quantos desenvolvedores de JavaScript não sabem como escrever esses testes.

Como regra geral, esses testes não carregam uma grande carga de sentido. É dirigido exclusivamente para verificar as habilidades de possíveis candidatos.

Lembre-se, a probabilidade de você será solicitada a realizar um teste semelhante na entrevista é muito grande.

Exemplo de teste clássico de Fizzizbizz:

Opções para esses testes são ilimitadas. Uma vez, na entrevista, corri para esse teste, após o qual eu tive que resolver mais duas opções.

Para (var eu \u003d 1; eu<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

A diferença entre \u003d\u003d e \u003d\u003d\u003d

Você provavelmente está familiarizado com os dois operadores de comparação. No entanto, você sabe o que exatamente esses operadores diferem? Seu lixo JavaScript exige que você aplique um operador \u003d\u003d\u003d, perguntou por quê?

Não compara os tipos de operandos, em vez disso, leva a um tipo. Tal operação tem uma reputação negativa.

Console.log (24 \u003d\u003d "24"); // Verdadeiro.

Como você vê, foi dado um valor de string de 24 (em citações simples) a um tipo inteiro. Claro, há situações em que você exatamente e se deseja, mas na maioria das vezes quer dirigir os tipos de dados manipulados do operador de comparação. Comparando os dados usando o operador \u003d\u003d não é recomendado, a maioria dos sistemas para verificar o código do estilo JavaScript indicará sobre esse erro.

\u003d\u003d\u003d (comparação estrita) compara tipos de dados, sem convertê-los para um tipo, ou seja, os dados serão comparados como é. Além disso, desde que o tipo de tipos não está envolvido nesta operação, funciona mais rápido. Para que este operador se estenda corretamente, os operadores do mesmo tipo serão necessários.

O mesmo exemplo, mas com o operador \u003d\u003d\u003d

Console.log (24 \u003d\u003d\u003d "24"); // false.

Em resposta, obtemos falsos, já que os operandos de diferentes tipos, um deles tipo inteiro e a segunda string.

Como escolher elementos DOM sem bibliotecas adicionais

Certamente você está familiarizado com como fazer uma amostra de elementos usando jquery, mas você pode fazer a mesma coisa, mas sem a ajuda desta biblioteca?

Quero dizer, não apenas escolha um item com um ID específico ou um conjunto de classes, estou falando de expressões para procurar itens usando jQuery.

Existem vários métodos nativos para procurar elementos em DOM, que não são inferiores ao jQuery. Também podemos usar seletores de tipo de primeira criança, último filho, etc.

Conheça-se com alguns desses métodos

• document.GetElementByID é um método clássico para encontrar itens por sua ID.
• document.GetElementsByClassName - Selecionando elementos no valor do campo ClasseName
• document.Queryselector é um excelente método que praticamente substitui completamente o seletor $ () do jQuery, mas já está incluído no JavaScript. A única diferença é que ele retorna apenas o primeiro elemento encontrado.
• document.queryselectorall - analógico do método anterior, mas retorna uma matriz de itens encontrados.
• document.GetElementsByTagname - Este método ajudará você a escolher elementos por tag. Se você precisar encontrar todos os itens div, então precisa desse método.

Eu também quero observar que os métodos de Queryselector e QuerySelectorAll podem ser usados \u200b\u200bnão apenas em todo o documento, mas também em itens individuais, ou seja, você pode fazer a amostra dentro de um elemento pai.

Na documentação de Mozilla, você encontrará uma descrição completa desses métodos.

Aumentar anúncios de variáveis \u200b\u200be funções

O JavaScript está interessado em como ele processa as variáveis \u200b\u200be funções declaradas, todas elas aumentam automaticamente o escopo. Assim, você pode se referir a eles antes de seus anúncios no escopo da visibilidade (por exemplo, funções em JavaScript tem seu próprio escopo).

Portanto, para a conveniência de ler o código, tome a regra para sempre declarar variáveis \u200b\u200bno início do escopo. Se você especificar 'usar rigoroso' na parte superior do script ou função, ao acessar uma variável desnecessária, receberá um erro.

A maioria das ferramentas para verificar o estilo de código, como o jshint, indicará você em um erro se você não usou 'use strict', com base nisso, se você tentar escrever um bom código, você não usará variáveis \u200b\u200bem qualquer caso Sapo. Como sempre, se houver perguntas, entre em contato com a documentação da Mozilla, você sempre encontrará uma descrição completa e abrangente do seu problema.

Usando ferramentas de desenvolvedor no navegador

Na maioria das vezes, essas ferramentas são usadas para depurar scripts JavaScript, mas sua funcionalidade não é limitada. Por exemplo, você pode usar o ponto de parada, execute seu script passo a passo, inserindo cada função ao mesmo tempo.

Essas ferramentas fornecem ajuda indispensável, como você pode acompanhar totalmente a operação do seu aplicativo e encontrar áreas em dificuldades.

Tendo aprendido a aplicar as ferramentas de desenvolvedores em tais navegadores como Chrome, Firefox e nas versões mais recentes do Internet Explorer, você pode depurar seu script, medir sua velocidade e encontrar lugares onde vale a pena melhorar o algoritmo de trabalho.

Nunca tente debunhar o código cegamente, você primeiro sempre analisá-lo usando as ferramentas do desenvolvedor. A solução de problemas não existentes é um tempo de passar inútil.

Equipes de console.

Vamos nos voltar para o próximo item no estudo das ferramentas de desenvolvedores. Como regra geral, todos eles oferecem um console no qual você pode inibir o código Javascript.

Certamente, você já está familiarizado com tais equipes como console.log e console.Error, mas isso não se limita à funcionalidade do console.

Eu quero notar imediatamente que nem todos os comandos listados funcionarão em todos os navegadores. Vou tentar mencionar apenas aqueles que trabalham em navegadores modernos. No entanto, como conselho, direi que antes de aplicá-los, tente testar o seu desempenho, de modo que em vão não martam o código.

• console.log - usado para manter o log de eventos. Suporta formatação.
• console.Error - para registrar erros no código. Eu uso este comando quando os erros ocorrem em consultas AJAX e em outras seções potencialmente perigosas do código. O método é semelhante ao anterior, mas exibe uma lista de chamadas de pilha.
• console.dir (objeto) - Exibe o conteúdo formatado do objeto. Como usado, esse método é muito útil ao depurar o código.
• console.Group (título) - Permite criar um grupo de mensagens no registro chamado Título. Desta forma, você pode agrupar mensagens, por exemplo, pelo segmento do código onde eles são gerados.
• console.GroupCollPased é um análogo do comando anterior em uma exceção. Ou seja, exibe mensagens na forma dobrada.
• console.Groupend - Termina o grupo criado anteriormente.
• console.Time (Etiqueta) - Permite rastrear a velocidade do site em milissegundos. O método é útil ao tomar seções de código potencialmente complexas.
• console.Timeend (Label) é um análogo do método de grupo, mas funciona com respeito ao console.time ().
• copiar (String) - No Console Chrome e Firefox, há um método que permite copiar o conteúdo da string para a área de transferência. Método muito útil, tente aplicá-lo.

O que exatamente está contido neste

Primeiro de tudo, esta é uma grande fonte de problemas para aqueles que não entendem completamente o que contém exatamente essa palavra-chave. E ficar confundido nisso muito simples, já que seu conteúdo é inteiramente dependente da estrutura do código.

Nas linguagens de programação tradicionais, isso contém uma referência ao objeto de classe atual. Mas desde que o JavaScript está longe da tradição, então, nele, essa variável refere-se ao objeto pai do objeto.

A maneira mais fácil de entender isso é levá-lo para o proprietário ou pai do método. Isso sempre se refere ao pai (pai), com exceção dos casos quando você usa a chamada, aplicar ou vincular métodos.

No exemplo a seguir, isso é referenciado pela janela:

Função myfunction () (console.log (esta \u003d\u003d\u003d janela); // verdadeiro) myfunction ();

Certamente, você tem uma pergunta, como pode ser igual à janela se apelarmos dentro do método? Se você conhece a resposta para esta pergunta, então, de outra forma, leia e tentarei explicar.

Ao declarar a função dessa maneira, ele é anexado ao objeto global da janela. Lembre-se, dissemos que isso se refere ao método do método?

Alterando o valor disso em um objeto totalmente novo (não janela):

Função myfunction () (console.log (esta \u003d\u003d\u003d janela); // false) novo myfunction ();

Apoiadores da limpeza do código com certeza de choque de tal exemplo. Nós apenas vamos ao topo do iceberg com esses exemplos. Como você pode ver, esse valor não é mais igual à janela.

Por que aconteceu?

A explicação mais simples - no segundo exemplo, usamos a palavra-chave nova, essas mais criamos um novo escopo e um novo objeto.

No exemplo a seguir, criaremos uma API fictícia para descarregar dados da biblioteca do servidor. Vamos criar um objeto API com alguns métodos.

Ao usar a palavra NOVO, o contexto de script move-se do contexto da janela para a API.

Var api \u003d (getData: function () (console.log (esta \u003d\u003d\u003d janela); // falso console.log (esta \u003d\u003d\u003d API); // true)); Api.getdata ();

Como você vê, o valor disso é totalmente definido no método de chamar o método. Como a função é chamada dentro do objeto API, seu pai, então o valor disso é referenciado pelo objeto API.

Lembre-se, esse valor muda. Varia dependendo do método de chamada, mas se você usar o método de ligação, o valor disso permanece inalterado.

Em mais detalhes com a palavra-chave no JavaScript, você pode se familiarizar no artigo Quirksmode e a documentação da Mozilla.

'Use rigoroso';

Como já especificamos anteriormente, o usuário rigoroso é usado para aplicar uma versão mais rigorosa da linguagem JavaScript. Esta directiva é seguida para aplicar em todos os scripts.

Por padrão, o JavaScript é bem livre em sua sintaxe. Ele simplesmente perderá a seção errônea do código e tentará executar as seguintes linhas, sem dizer nada para você.

Na documentação da Mozilla, há um artigo inteiro sobre este tópico, recomendo fortemente que você a conheça.

Diferentes tipos de ciclos

Você ficará surpreso, mas conheci um grande número de desenvolvedores que não sabiam como usar o ciclo para ciclo corretamente e absolutamente não ouvia sobre outros tipos de ciclos. E ser capaz de usar um ciclo em uma matriz ou objeto - uma habilidade muito importante para o desenvolvedor. Não há instrução clara quando e o que aplicar o tipo de ciclo, mas você deve navegar neste assunto. Certamente você está familiarizado com e enquanto, mas e os outros?

Lista de ciclos em JavaScript:

• para ...
• para..f (adicionado ao ES6)
• para cada.
• enquanto
• fazer enquanto

Ciclo para

Ciclo absolutamente obrigatório que precisa saber e entender. Ele executa seu corpo ao realizar a condição 2.

Para (condição 1; condição 2; condição 3) (// seu código)

Condição 1 - Executado uma vez antes do início da série de ciclos. Na maioria dos casos, você irá inicializar o balcão do ciclo aqui. Este item pode ser perdido se você inicializar anteriormente.

Condição 2 - Esta condição é usada para determinar para continuar o ciclo ou não. Você provavelmente comparará seu contador com o tamanho da matriz aqui. Se o valor da verdadeira comparação, o ciclo continua. Se você estiver interrompendo o ciclo dentro de quebra, esta condição pode ser ignorada.

Condição 3 - Este site é executado após cada iteração, como regra, é aqui que você aumenta seu contador.

Ciclo para ... em

O seguinte é o tipo de ciclo. Com ele, você pode passar por todos os campos da aula.

Deixe-nos dar um exemplo.

Var pessoa \u003d (FirstName: "Dwayne", Lastname: "Charrington", Idade: 27, Starsign: "Aquário"); // o loop abaixo vai produzir: // "Dwayne" // "Charrington" // 27 // "aquarius" para (se (pessoa.HasownProperty (P)) (console.log (pessoa [P]);)

Ciclo para ... de

Muito novo tipo de ciclo, foi adicionado ao ES6. Em virtude de sua novidade, não suportado por todos os navegadores. Mas ao usar certas tecnologias, ele já pode ser usado hoje.

Este ciclo é o completo oposto para ... em, passa pelos valores de campo e funciona apenas com tipos de dados que suportam as iterações a quais objeto não se aplica.

Var frutas \u003d ["laranja", "maçã", "squash", "pêra"]; Para (var fruta de frutas) (console.log (fruta);)

A grande vantagem desse tipo de ciclo é que não precisamos mais criar um ponteiro e seguir o comprimento da matriz para passar totalmente por seus elementos.

Foreach cycle

Outro tipo de ciclo, que em suas profundidades não é diferente dos tipos anteriormente listados de ciclos.

Funciona apenas com matrizes, não objetos. É benéfico para o fato de você não ter que criar variáveis \u200b\u200badicionais que eventualmente poluem seu código. \\

Certamente é o tipo mais limitado de tipo de ciclo, mas tem suas próprias aplicações sobre o que será conhecido por saber:

Var frutas \u003d ["Apple", "banana", "laranja", "uvas", "pêra", "maracujá"]; // Os três valores na função de retorno de chamada são: // Element - o elemento sendo Traverse // Index - O índice atual do item no array começando em 0// Array - a matriz sendo percorrida (provavelmente irrelevante) Frutas. Furach (função (elemento, índice, matriz) (console.log (índice, elemento);););

Às vezes você só precisa passar por todos os elementos da matriz e, talvez, faça algumas mudanças neles. Seu comportamento é semelhante ao jquery.each.

Uma falta desse tipo de ciclos - não pode ser interrompida. Se você precisar criar um ciclo de acordo com as regras do ES5, use o método Array.Every, para se familiarizar com o qual você pode na documentação de Mozilla.

Enquanto o ciclo

O ciclo enquanto é semelhante ao, mas só aceita um parâmetro - a própria condição pela qual o ciclo determina para continuar as iterações ou pará-las.

Embora esse tipo de ciclo seja considerado o mais rápido, acho que esse momento é bastante controverso. Acho que você não vai argumentar que esse tipo de ciclo não parece cuidadoso do que os outros, e sua velocidade só pode ser explicada pela simplicidade da lógica interna.

De acordo com a experiência, vou dizer que a versão mais rápida do ciclo enquanto é um ciclo com uma diminuição no medidor, você reduz a por unidade até chegar a zero (que também é reivindicado).

Var I \u003d 20; Enquanto (i--) (console.log (i);)

Ciclo do ... enquanto

Tal ciclo é bastante raro, mas ainda vale a pena introduzi-lo para entender seu trabalho.

O ciclo enquanto não pode executar qualquer iteração. Ou seja, se você passar um valor falso como condição de ciclo, nenhuma iteração será executada. Faça ... enquanto o ciclo é garantido para cumprir pelo menos uma operação.

Essa diferença não termina. No entanto, o ciclo processa a condição antes de executar a iteração e fazer ... enquanto depois.

Como sempre, na documentação da Mozilla, você encontrará uma descrição detalhada desse tipo de ciclos.

Métodos e Tarefas Básicos

JavaScript existe métodos básicos que devem ser conhecidos. No que diz respeito ao trabalho com matrizes e linhas, o JavaScript oferece um grande conjunto de métodos embutidos. Vamos tocar apenas matrizes e linhas, deixando objetos mais tarde.

Se você estiver interessado em trabalhar com outros tipos de dados, em contato com a documentação da Mozilla. Claro, você não deve saber todos esses métodos de coração, descreverei apenas aqueles que parecem necessários.

Trabalhe com cordas

Em JavaScript, você costuma trabalhar com dados de string, com exceção, provavelmente matrizes e objetos. Mesmo se você não trabalha com linhas, ou acha que você não funciona, então ainda vale a pena se familiarizar com esses métodos.

• String.replace (regexp | O que substituir o que substituir, callback) - Permite substituir parte da linha, é permitido usar expressões regulares.
• String.concat (Storok 1, linha 2 ...) - Conexão de várias linhas em uma.
• String.indexof (valor) - o método permite que você encontre o número de sequência do símbolo da parte desejada da linha, -1 - se a string não for encontrada
• String.slice (StartIndex, EndIndex) - Retorna uma área de string da StartIndex para EndIndex
• String.split (separador, limite) - Quebra a string para uma matriz pelo símbolo separador, o comprimento máximo do limite.
• String.subscrt (StartIndex, Comprimento) - Retorna parte da string começando com o Comprimento Longo StartIndex.
• String.tolowercase - traduz todos os caracteres de string na minúscula
• String.touppercase - Transfira todos os caracteres de string no cadastro máximo
• String.trim - remove espaços desde o início e final da linha

Trabalhando com arrays.

Você muitas vezes terá que se encontrar com matrizes. Eles se provaram como uma maneira de armazenar dados. Esses métodos valem exatamente a pena saber qualquer desenvolvedor JavaScript, você não deve pesquisá-los no Google.

• Array.pop é dirigido pelo último elemento e remove-o da matriz.
• Array.shift - Retorna o primeiro elemento e remove-o da matriz.
• Array.push (Val1, Val2) - Adiciona um ou mais valores ao final da matriz. Retorna um novo comprimento da matriz.
• Array.reverse - espelhamento muda a ordem dos elementos da matriz.
• Array.Sort - Permite classificar uma matriz usando sua própria função.
• Array.join (separador) - Retorna uma string que consiste em um elementos de matriz separados pelo símbolo separador (padrão - vírgula).
• Array.IndexOf (valor) - Retorna o índice do elemento na matriz, -1 se o item não for encontrado.

Esta não é uma lista completa de métodos para trabalhar com matrizes. Com os outros, você pode ler a documentação da Mozilla. Começando com ES6, métodos muito interessantes foram adicionados.

A diferença entre chamada e aplica

Esses dois métodos são confusos com bastante frequência. Muitas vezes você pode fazer sem eles, mas eles ajudam a chamar métodos e alterar o valor disso durante a execução.

A diferença entre eles é bastante pequena, mas existe. Ao usar o método de chamada, você pode definir um número infinito de argumentos, dividindo-os com uma vírgula.

Usando o método Aplicar, você pode transferir argumentos como uma matriz e alterar o valor desse valor.

Se você precisar, simplesmente transferir a matriz como um método de argumento, iniciando com o operador ES6 Advanced (Spread). Não permite que você mude isso. Você pode se familiarizar com ele, como sempre na documentação oficial da Mozilla.

Exemplo de chamadas:

Função myfunc () (console.log (argumentos);) myfunc.call (isto, 1, 2, 3, 4, 5);

Aplicar Exemplo:

Função myfunc () (console.log (argumentos);) myfunc.call (,);

Conhecimento com bibliotecas e estruturas

Hoje, os representantes mais notáveis \u200b\u200bdos quadros de JavaScript são AngularJs, reagir.js e brasa. Claro que ainda há um número de outros.

Como os aplicativos da Web estão se tornando cada vez mais, essas biblioteca simplificam o trabalho com elas. Vale a pena entender que agora sabendo que um jQuery não é claramente suficiente. A maioria das vagas é definida como conhecimento de bibliotecas adicionais de JavaScript como a principal exigência.

Node.js.

Sem dúvida, o Node.js ocupa uma posição sólida. Praticamente qualquer ferramenta front-end é construída em Node.js e usa o NPM (Nó Package Manager), se não estiver familiarizado, eu aconselho fortemente a corrigir essa omissão. Como o Node.js usa JavaScript, então aprender isso não representa nenhuma dificuldade específica para aqueles que já estão familiarizados com essa linguagem. Você terá mais tempo para configurar pacotes de nó do que escrever o próprio código.

Pessoalmente, acho que com o nó deve ser um sinal todo desenvolvedor em 2015. Eu não estou falando de profundo conhecimento, é suficiente para aplicá-lo para desenvolvimento de servidores, prototipagem, teste, etc.

Há um Fork Node.js chamado io.js, hoje eles são praticamente análogos, e no final você acabou de escrever para JavaScript, exceto pequenas diferenças.

Teste

Assim que não testamos o código JavaScript, porque eles não consideraram necessário. Mas os scripts estão se tornando cada vez mais graças a AngularJs e no Node.js.

O JavaScript desenvolve-se, e o volume de scripts aumenta e o teste se torna vital. Se você não testar seu código, então você entra errado. Meu testador favorito é karma. Há outros, mas este particular se provou melhor do que todos ao trabalhar com AngularJs. E se é adequado para AngularJs, então é adequado para mim.

Instrumentos.

Ser um desenvolvedor JavaScript em 2015 significa não apenas conhecimento excelente da linguagem, mas também um grande número de ferramentas para trabalhar com ele.

Às vezes, as ferramentas incluem o próprio navegador que usamos. E às vezes você tem que se referir a ferramentas de terceiros para obter uma análise mais profunda da situação.

Aqui está um conjunto de ferramentas que você deve se lembrar: Gulp, Webpack e Babeljs. Há muito mais ferramentas, mas ferramentas como Gulp e Grunt ajudam você a desenvolver e gerenciar aplicativos JavaScript.

Passou esses dias em que você acabou de baixar o arquivo JavaScript e adicionou-o à sua página. Agora usamos gerenciadores de pacotes de npm ou bower.

Combinamos e minimizamos os scripts, os testamos, o que ajuda a organizar a estrutura do projeto.

As ferramentas de JavaScript andam de mãos dadas ao desenvolver JavaScript isomorphic (código usado tanto no lado do cliente quanto no servidor). Ecmascript 6, ele é ES6, ele é esnext

Os navegadores ainda precisam ser implementados a maior parte do funcionário ECMAScript 6. Mas hoje você pode usar novos itens do ES6 usando compiladores JavaScript. Encontre-se com novas APIs e métodos: linhas, matrizes e outros métodos como fraquezas, símbolos e classes. Você deve estar sempre ciente das próximas mudanças.

Conclusão

Eu posso te dizer muito. A julgar pelo tamanho deste artigo, você pode imaginar o quanto você precisa saber o desenvolvedor JavaScript. Acabamos de tocar os topos do iceberg. Não pense que este artigo deve ser percebido como um guia para o desenvolvedor. Esta é apenas minha visão pessoal do problema.