Javascript para gatos

javascript para gatos

uma introdução para novos programadores

tão simples que mesmo o seu amigo humano também pode fazer isso!

JavaScript é uma linguagem de programação ou, em outras palavras, um meio pelo qual o computador é instruído a fazer as coisas. Assim como qualquer um de nós controla humanos com assobios e miau, pode-se controlar computadores com declarações escritas em uma linguagem de programação. Todos os navegadores da Web entendem o JavaScript e você pode aproveitar isso para fazer páginas da Web fazer coisas malucas!

JavaScript começou como uma maneira de fazer páginas da Web mais interativas. Hoje em dia, JavaScript não é apenas nos navegadores – também é executado em servidores da Web, telefones e até robôs! Esta página mostrará uma base javascript para que você possa iniciar instantaneamente *.

* Tutorial real: mais do que instantâneo. Provavelmente uma ou duas horas. Além disso, como você é um gato, você deve gostar mais de ser jogado ao sol do que correr.

tabela de conteúdo

a base
strings
valores e variáveis
usando funções
funções de idioma
código de terceiros
criação Novas funções
ciclos
matrizes
objetos
Callbacks
leitura recomendada

Não seja um gato medroso

Você sempre vai cair em pé – até mesmo programação! Ao contrário de chutar um copo de água no seu laptop, não há nada nesses tutoriais que danifiquem seu computador de qualquer forma, mesmo que você escreva mal um comando ou clique em um botão errado. Como gatos, os programadores cometem erros o tempo todo: escrevendo erros, esquecendo aspas ou chaves, e sendo esquecida sobre como algumas funções básicas funcionam. Os programadores se preocupam mais em fazer as coisas funcionam eventualmente, em vez de tentar trabalhar a primeira vez que estão escritos. A melhor maneira de aprender é comprometendo erros!

É por isso que você não precisa ser um gato medroso! A pior coisa que pode acontecer é que você tenha que atualizar esta página em seu navegador se estiver preso. Nem você se preocupa, isso acontece muito raramente.

# a base

há javascript em execução nesta página neste momento. Vamos brincar um pouco com isso. Para simplificar, vou assumir que você está usando o Google Chrome para ler esta página (se não for mais fácil para ambos se seguir o tutorial usando Chrome).

primeiro, clique em Qualquer parte da tela e selecione Inspecionar Item (ou inspecione o elemento em inglês) e clique na guia que diz o console. Você deve ver uma coisa que se parece com esta:

Este é um console, também chamado de “linha de comando” ou “terminal” . Basicamente, é uma maneira de escrever uma coisa de cada vez no computador e imediatamente obter a resposta. Existem ferramentas de aprendizado superficas (ainda uso o console quase todos os dias que escrevo código).

O console faz algumas coisas realmente grandes. Comecei a escrever algo e o console está ajudando a me dar uma lista de todas as coisas possíveis que eu posso continuar a escrever! Outra coisa que você pode fazer é escrever no console e, em seguida, pressione Enter e veja o que acontece.

Usando O console é uma parte importante ao aprender JavaScript. Se você não sabe como algo funciona ou esse comando serve para o que, você pode ir ao console e descobrir! O seguinte é um exemplo:

# strings

Como eu sou um gato, quero substituir cada instância da palavra perro no Internet com esos malditos perros. Primeiro eu vou para o console e escrevo algumas frases que contêm a palavra perro pelo menos uma vez. Em Javascript, um conjunto de letras, números, palavras ou qualquer outra coisa é conhecida como uma string (ou string de caracteres). As cordas devem começar e terminar com uma cotação. Não importa como usar cotação única ' ou duplo ", desde que você use o mesmo símbolo no início e no final.

Você vê a mensagem de erro horrível? Não se preocupe – você não quebrou nenhuma lei. Syntax Error ILLEGAL é como ele soa quando um robô significa que o seu programa tem um problema. As duas primeiras frases coincidem com o tipo de comod usado no início e no final da frase, mas quando a misturamos o computador on-line, é como misturar melancia com vinho.

OK, para corrigir uma dessas instruções (substituindo perro para a nossa versão melhorada) Temos que salvar primeiro a declaração original para poder chamá-lo novamente quando Nós fazemos nosso substituto mágico. Você vê como a string é repetida em vermelho quando escrevo no console? Isso porque não dissemos que a frase é salva em qualquer lugar e é por isso que não os devolvê (ou nos dá um erro quando cometemos um erro).

# Valores e variáveis

Os valores são os componentes mais simples em JavaScript. é um valor, true (representando um valor lógico) é um valor, "hola" é um valor, function() {} é um valor, a lista continua! Existem muitos tipos de valores em JavaScript, mas não precisamos conhecê-los todos agora – você aprenderá naturalmente enquanto mais escribas de código!

Para salvar os valores que usamos as chamadas variáveis das coisas. A palavra ‘variável’ significa “alteração” e é usada porque as variáveis podem salvar diferentes tipos de valores e alterar seu valor muitas vezes. As variáveis são bastante semelhantes a uma caixa de correio. Colocamos algo em uma variável, como uma frase, e então damos a variável um endereço que você pode usar para encontrar essa frase mais tarde. Nas caixas de correio da vida real precisam de números de código postal, mas em javascript eles são geralmente substituídos por letras minúsculas ou números sem espaços.

var é uma abreviação de variável e o símbolo = Em resposta, o que isso significa Não é nada a retornar.

Se você simplesmente escrever o nome de uma variável no console, o valor salvo nessa variável será impresso. Uma nota sobre as variáveis é que, por padrão, eles são perdidos quando você muda para uma página diferente. Se fosse para atualizar a página no Chrome, por exemplo, minha variável sentenciaPerro desapareceria para sempre, como se nunca tivesse sido existido. Mas não se preocupe com isso demais – você pode apertar as flechas para cima e para baixo no teclado quando estiver no console e obter as declarações que você estava escrevendo ultimamente.

# Usando funções

Agora que temos nossa sentença salva em uma variável, vamos mudar a palavra salva nela! Podemos fazer isso criando uma função. As funções são um tipo de valor que faz apenas uma função específica (também conhecida como finalidade ou ação) por nós. Chamando-lhes que as “ações” soam estranhas e eu acho que é por isso que eles escolheram “função” em vez disso.

javascript tem uma função chamada replace (substituir em inglês) exatamente o que nós queremos! As funções recebem valores em seus parênteses (zero, um ou mais) e retornos ou qualquer coisa (undefined) ou a string modificada. A função replace está disponível para uso em qualquer string e leva 2 valores: os caracteres que queremos tirar e os caracteres que os substituírem. Torna-se um pouco confuso descrever essas coisas, então aqui temos um exemplo visual:

nota como o valor de sentenciaPerro é o mesmo mesmo depois de executar replace Sobre isso? Isso ocorre porque a função replace (e a maioria das funções de JavaScript para esses fins) Tome o valor que damos e retornamos um novo valor, sem modificar o valor que passamos. Como não queremos salvar o resultado (não há = no lado esquerdo da operação de substituição), o valor retornado é impresso no console.

# Funções do idioma

Você deve estar perguntando que outras funções estão disponíveis em JavaScript. A resposta: muito. Existem muitas bibliotecas padrão integradas das quais você pode aprender no MDN (um site de Mozilla que tem muito e muito boas informações sobre tecnologias da Web). Por exemplo, aqui é a página MDN nas funções relacionadas à JavaScript Mathematics.

# Código de terceiros

também há muito o código JavaScript disponível que não faz parte do padrão biblioteca. Geralmente é referido por JavaScript escrito em terceiro como “biblioteca” ou “plugin”. Um dos meus favoritos é chamado de Underscore.js. Vamos encontrá-lo e enviá-lo em nossa página!Primeiro vá para o site sublinhado, http://underscorejs.org/ Clique no link de download (em geral, eu uso a versão de desenvolvimento porque elas são fáceis de ler, mas qualquer um dos 2 vai lhe dar A mesma funcionalidade) e copie todo o código na sua área de transferência (você pode usar Select Tudo clicando em Direto). Então eu coloco no seu console e pressione ENTER. Agora seu navegador tem uma nova variável: _. Sublinhado dá-lhe muitas funções úteis para jogar. Vamos aprender como usá-los mais tarde.

# criando novas funções

você não está limitado a Usando funções dos outros – você também pode escrevê-los. É muito simples! Vamos fazer uma função chamada ponerleOnda Isso adiciona alguns pontos de exclamação no final de uma string.

function ponerleOnda(string) { return string + '!!!!'}

no meu Cabeça eu li em voz alta como: “Há uma função chamada” colocada “que leva uma string e retorna uma nova cópia da string que tem alguns pontos de exclamação no final”. É assim que escrevo isso no console manualmente sem escrever a função:

a expressão string + !!!! Retorna uma nova string e nossa variável chamada string permanece como antes (já que nunca a atualizamos usando =).

Vamos usar nossa função em vez de fazê-lo manualmente. Primeiro, cole a função no console e ligue para a função passando uma string:

Você também pode chamar de função Passando uma variável que aponta para uma string (no exemplo acima, escrevemos a cadeia direta como um valor em vez de salvá-lo como uma primeira variável):

A linha ponerleOnda(sentencia) é equivalente a dizer sentencia + '!!!!'. O que acontece se quisermos modificar no local (conhecido como atualizando) o valor da declaração? Basta salvar o valor de retorno da função na variável sentencia

var sentencia = "hora de la siesta"sentencia = ponerleOnda(sentencia)

agora sentencia terá os sinais de exclamação no final! Perceba que você usou apenas var Quando inicializou a variável – a primeira vez que você usou. Então você não deve usar var a menos que você deseja reiniciar (redefinir / limpar / vazio) a variável.

O que acontece se tomarmos o return

Por que sentencia Está vazio? Porque as funções retornam undefined Por padrão! Você pode optar por retornar qualquer valor usando return. As funções devem ter um valor e, se eles alterarem o valor ou criar um novo que for usado mais tarde, devuelven Um valor (curiosidade: um termo legal para este estilo é programação funcional). Aqui temos outra função que não retorna nenhum valor, mas usa um método diferente para nos mostrar o resultado:

function gritalo(string) { string = string.toUpperCase() string = ponerleOnda(string) console.log(string)}

Esta função, gritalo, use nossa função ponerleOnda e o método nativo de string touppercase. Os métodos são apenas um nome para uma função quando pertence a algo – nesse caso toUpperCase é uma função que pertence a String Diga então Que nós é um método ou função. ponerleOnda não pertence a ninguém, então seria tecnicamente incorreto se referir a ele como um método (é confuso, SE).

A última linha de a função é outra função nativa que simplesmente leva valores que você dê e imprimi-los no console.

Então existe Algo errado com esta função gritalo? Depende! Existem 2 tipos principais de funções:

funções que modificam ou criam valores e retornam
funções que tomam valores e façam coisas com elas que não podem ser devolvido

console.log é um exemplo do segundo grupo: imprime as coisas no seu console – uma ação que você pode ver com seus próprios olhos, mas não pode ser representado como um valor javascript. Minha regra de polegar é tentar manter os dois tipos de funções separadas, para que possamos reescrever a função gritalo Assim:

function gritalo(string) { string = string.toUpperCase() return ponerleOnda(string)}console.log(gritalo("no le temo a los humanos"))

desta maneira gritalo se torna mais genérico, ou seja, ele faz uma ou duas coisas simples e não sabe nada sobre a impressão do console – essa parte pode ser sempre programada Depois, fora da definição da função.

# ciclos

Agora que temos habilidades básicas em nosso cinto (Autor: Talvez os gatos usem cintos?) Podemos começar a ser vagos . O que?! Sim, isto é: a programação é sobre ser vaga.Larry Wall, inventor da linguagem de programação Perl, chamada Vagancy a maior virtude de um bom programador. Se os computadores não existirem, você teria que fazer todos os tipos de tarefas tediosas à mão, mas se você aprender a programar, você pode se jogar no sol durante todo o dia, enquanto um computador em algum lugar executa os programas para você. É um estilo de vida glorioso cheio de relaxamento!

Os ciclos são uma das maneiras mais importantes de apertar o poder do computador. Lembre-se há um tempo atrás? Certifique-se de ter carregado na página (lembre-se: você sempre pode usar a seta para cima um par de vezes e aperte Enter para carregá-lo novamente se você precisar) e tentar copiar e cole isto no console:

function imprimirNumero(unNumero) { console.log(unNumero)}_.times(10, imprimirNumero)

Este código usa o método Timescore Times que leva um número e uma função, iniciar 0 e para 10 a poucos passos, chamando a função com o número em cada etapa.

Se tivéssemos que fazer manualmente o que ele faz times seria assim:

imprimirNumero(0)imprimirNumero(1)imprimirNumero(2)imprimirNumero(3)imprimirNumero(4)imprimirNumero(5)imprimirNumero(6)imprimirNumero(7)imprimirNumero(8)imprimirNumero(9)

Mas os gatos se recusam a fazer trabalho manual desnecessário assim, então devemos sempre nos perguntar” Estamos fazendo isso é a maneira mais vaga possível? “

Então por que isso é ciclado? Pense desta forma: Se tivéssemos que escrever uma lista de 10 números (de 0 a 9) usamos uma matriz de JavaScript ficaria assim:

var ceroADiez =

lo que times realmente faz visita cada número e repita a tarefa: no exemplo acima, a tarefa foi chamar a função imprimirNumero com o número atual. Repita as tarefas dessa forma, é chamada de ciclo na matriz.

# matrizes

Eu os mencionei algumas vezes, mas passamos um minuto aprendendo sobre eles. Imagine que você precisa acompanhar seus amigos. Bem, uma matriz vai fazer bem. Pense em uma matriz como uma lista ordenada onde você pode manter muitas coisas dentro.

É assim que você faz um:

var misAmigosGatos =

Ótimo! Agora você tem uma lista de seus amigos de gato.

Os elementos (é assim que você chama um item de uma matriz) são salvos em matrizes começando com 0 e contando. Então misAmigosGatos retorna felix e misAmigosGatos retorna sessa … etc etc.

Para obter um amigo da sua nova matriz Você pode simplesmente acessá-lo diretamente assim:

console.log(misAmigosGatos)

Se você fez um novo amigo no elegante Gatuno Club na outra noite e você deseja adicioná-lo à sua lista é super simples:

Para verificar se o novo gato está dentro da sua matriz, você pode usar

notou que retornou o tamanho? Bom! Também toma nota de que as matrizes sempre preservam a ordem que significa que eles vão lembrar a ordem em que você adicionou ou definiu coisas. Nem tudo em JavaScript preserva a ordem, então lembre-se desta propriedade especial das matrizes!

# Objetos

As matrizes são boas para mentir, mas para outras tarefas, pode ser difícil trabalhar com eles. Considere nossa matriz de amigos felinos. O que acontece se você quiser economizar mais do que nomes?

var misAmigosGatos = var apellidos = var direcciones =

às vezes é bom ter todos os endereços ou nomes em uma variável. Mas às vezes você tem um gato em mente, diga Felix, e você quer procurar seu endereço. Com arrays leva um trabalho inteiro porque você não pode dizer a ele ‘Che Array, me dê o endereço de felix’ porque ‘felix’ está em uma matriz e seu endereço em outro totalmente diferente.

Isso pode ser frágil porque nossas matrizes alteram e adicionam um novo gato no começo, também podemos atualizar a variável posicionDeFelix Apontando Para o novo local da informação de Felix nos arranjos! Aqui mostramos uma maneira mais fácil de manter as informações salvas usando objetos:

var primerGato = { nombre: "felix", apellido: "el gato", dirección: "La calle" }var segundoGato = { nombre: "sessa", lastName: "gato", direccion: "Liniers" }var tercerGato = { nombre: "garfield", apellido: "gato", direccion: "Casa de John Bonachón" }

Por que faríamos dessa maneira? Porque agora temos uma variável para cada gato que podemos usar quando se trata de obter valores de gato de uma maneira mais conveniente e legível.

Você pode pensar em objetos como chaves de um chaveiro. Cada um é para uma porta específica e se você tiver rótulos agradáveis em suas chaves, você pode abrir as portas muito rapidamente. De fato, as coisas no lado esquerdo do : são chamadas principais (elas também são conhecidas como propriedades) e as coisas no lado direito são chamadas de valores.

// un objeto con una sola clave llamada 'nombre' y un solo valor 'felix'{ nombre: 'felix' }

Por que use matrizes se pudermos colocar todas as nossas informações sobre objetos? Porque os objetos não se lembram da ordem das chaves que você faz.Você pode inserir um objeto desta forma:

{ fecha: "20/10/2012", diario: "hoy dormí un poco", nombre: "Carlos" }

Mas o computador pode devolvê-lo da seguinte forma:

{ diario: "hoy dormí un poco", nombre: "Carlos", fecha: "20/10/2012" }

ou mais!

{ nombre: "Carlos", diario: "hoy dormí un poco", fecha: "20/10/2012" }

Portanto, você não pode confiar na ordem das teclas de objetos. Se você quiser fazer algo muito grande, você pode fazer uma matriz cheia de objetos ou um objeto arrays!

var archivoDeAnimo = // ordenados de menos a más por favoritismovar favoritos = { golosinas: , lugaresSiesta: }

Quando você combina coisas diferentes como esta estão fazendo Estruturas de dados, como legos!

# Callbacks

Callbacks não são realmente um recurso JavaScript, como o Objetos ou Arrays, mas uma maneira de usar funções. Para entender por que eles são úteis, primeiro temos que aprender sobre programação assíncrona (também chamada assíncrono). O código assíncrono é por definição por escrito de uma forma que não seja síncrona. O código síncrono é fácil de entender e escrever. Este exemplo ilustra:

var foto = descargar('http://foo-chan.com/images/sp.jpg')subirTweetConFoto(foto, '@maxogden')

Este código pseudo-síncrono download de uma foto adorável de um gato, carregue a foto para o Twitter e gera um tweet com a foto para @maxogden. Muito simples!

(Autor: Me, @maxogden, alegremente eu aceito fotos de gatos pelo Twitter.)

Este código é síncrono porque para carregar a foto para o Tweet, download de A foto tem que ser concluída. Isso significa que na linha 2 não pode ser executado até que a tarefa da linha 1 esteja totalmente concluída. Se fôssemos implementar este pseudo-código, queremos ter certeza de que descargar block ‘execução até que o download seja concluído, impedindo que qualquer outro javascript seja executado até que tenha terminado, bem Como quando o download estiver concluído, a execução do JavaScript é desbloqueada e a linha 2 é executada.

O código síncrono é bom para coisas rápidas, mas é horrível para coisas que exigem salvamento, upload ou baixar. O que acontece se o servidor que você está abaixando a foto é lento, ou a conexão com a Internet que você usa é lenta, ou o computador onde você executa o código tem muitas guias com vídeos de gatos no YouTube que é lento? Isso significa que isso pode levar minutos esperando até que a linha 2 seja executada. Enquanto isso, como todo o javascript na página está sendo bloqueado pelo download, a página vai congelar totalmente, correndo sem resposta até que o download termina.

A execução de bloqueio deve ser evitada a todo custo, especialmente quando Você faz seu programa congelar ou se tornar inutilizável. Nós assumimos que a foto acima leva 1 segundo para download. Para ilustrar o quanto é um segundo para um computador moderno, aqui está um programa que tessa quantas tarefas de JavaScript nós podemos processar em um segundo.

function medirVelocidadCiclo() { var contador = 0 function sumaUno() { contador = contador + 1 } // Date.now() Retorna un número grande que representa la cantidad de // milisegundos que pasaron desde el 1 de Enero de 1970 var ahora = Date.now() // Cicla hasta que Date.now() es 1000 milisegundos (1 segundo) o más // en el futuro respecto del comienzo del ciclado. En cada ciclo, llama a sumaUno while (Date.now() - ahora < 1000) sumaUno() // Finalmente pasaron >= 1000ms, entonces vamos a imprimir el total console.log(contador)}medirVelocidadCiclo()

cópia e Cole o código acima no seu console JavaScript e depois de um segundo você deve imprimir um número. No meu computador, vejo 8527360, aproximadamente 8,5 milhões. Em um segundo JavaScript, você pode ligar sumaUno 8,5 milhões de vezes! Então, se você tiver um código síncrono baixando uma foto, e a foto demora um segundo, significa que você está potencialmente impedindo a execução de 8,5 milhões de operações enquanto JavaScript é bloqueado.

Alguns idiomas têm um Função chamada sleep Bloqueando a execução por um número de segundos. Por exemplo, há um código de bash executando no Mac OS usa . Quando você executa o comando sleep 3 && echo 'me desperté' bloco por 3 segundos antes de imprimir me desperté.

javascript não tem uma função . Como você é um gato, provavelmente está perguntando: “Por que estou aprendendo uma linguagem de programação que não vê dormir?” Mas não saia. Em vez de depender de Para esperar que as coisas acontecessem, o design do JavaScript incentiva o uso de funções. Se você tiver que esperar que a tarefa antes de iniciar a tarefa B, você coloca todo o código de tarefa B em uma função e chamas somente quando concluído.

Por exemplo, este está bloqueando o código:

a()b()

e isto é não-bloqueio:

a(b)

na versão não bloqueadora, b é um retorno de chamada de . Na versão bloqueadora e b são 2 chamados / invocados (os dois têm () Que executa as funções imediatamente). Na versão não bloqueada, você notará que apenas é invocado e b é simplesmente último em como um argumento.

Na versão de bloqueio Não há relacionamento explícito entre e b. Na versão não bloqueada, o trabalho de é fazer o que você precisa e, em seguida, chamar b quando termina. Usar funções neste modo é chamado de callbacks porque sua função de retorno de chamada, neste caso b, é chamado quando acaba fazendo o que você precisa .

Aqui há um pseudocódigo com a implementação de como você deve ver :

function a(fin) { descargar('https://pbs.twimg.com/media/B4DDWBrCEAA8u4O.jpg:large', function finDescarga(error, png) { // manejá el error si hay alguno if (error) console.log('ups!', error) // llamá a fin cuando termines fin() })}

Volte para o nosso exemplo de não blocagem, a(b), onde chamamos e vamos passar, b como o primeiro argumento. Na definição da função acima, o argumento fin é a nossa função b O que aconteceu com ele. Esse comportamento é difícil de entender no começo. Quando você chama uma função, os argumentos que você gasta não terão necessariamente os mesmos nomes variáveis que quando estão em uma função. Neste caso, o que chamamos b é fin dentro da função. Mas b e fin são apenas nomes variáveis que apontam para a mesma função subjacente. Normalmente as funções de chamada são marcadas com nomes como fin ou callback Para deixar claro que essas funções devem ser chamadas quando a função atual terminar trabalho.

Então, enquanto Faça o seu trabalho e ligue para o seu trabalho e ligue para b Quando terminado, ambos e b são chamados em suas versões bloqueadas e não bloqueadas. A diferença é que na versão não bloqueadora não bloqueamos a execução do JavaScript. Em geral, o estilo não blocando é onde você escreve qualquer função para retornar o mais rápido possível, sem travar a qualquer momento.

Para ir um pouco mais profundo: se a Tome um segundo para concluir, e você usa a versão bloqueada, significa que você pode fazer uma coisa. Se você usar a versão não-bloqueadora (usando callbacks), você pode literalmente, você pode ter milhões de outras coisas no mesmo segundo, o que significa que você pode terminar seus trabalhos milhões de vezes mais rápido e dormir o resto do dia.

Lembre-se: agenda é sobre ser vago e você deve ser aquele que dorme, e não o seu computador.

com sorte você pode ver agora como os retornos de chamada são apenas funções que chamam outras funções após um assíncrono tarefa. Alguns exemplos clássicos de tarefas assíncronas estão lendo uma foto, baixando uma música, upload de uma foto, falando com o banco de dados, aguarde um usuário pressionar uma tecla ou clicar em um link, etc. Qualquer coisa leva tempo. JavaScript é uma ótima manipulação tarefas assíncronas como aquelas, desde que você aproveite o tempo para aprender como usar os rendimentos e manter seu javascript longe de ser bloqueado.

final!

este é apenas o Início do seu relacionamento com JavaScript! Você não pode aprender tudo, mas você pode procurar que funcione para você e tente aprender todos os conceitos aqui.

Eu recomendo que você volte amanhã e faça tudo novamente desde o começo! Você pode levar alguns passes até que você entenda tudo (o cronograma é difícil). Basta tentar evitar ler esta página em trimestres que contêm objetos brilhantes … podem ser incrivelmente distrativos.

Você tem algum outro tópico que você deseja que ele seja coberto? Abre um problema para ele no github.

# Leitura recomendada

javascript para gatos salte muitos detalhes que não são importantes para começar (os gatos não são famosos por sua atenção), mas Se você acha que precisa aprender em profundidade, veja este:

Tradutor’s Nota: As informações dos seguintes links estão em inglês. Infelizmente, a bibliografia é escassa em espanhol. Aceite-o como uma boa desculpa para aprender uma nova língua (além de JavaScript)

nodeschool.io é um software educacional de código aberto tratado pela comunidade que ensina diferentes áreas de desenvolvimento web em um interativo formato e auto-guiado. Eu ajudei a fazer odeschool! Infelizmente este site tem menos gatos.
elocant javascript é um livro gratuito que ensina Javascript! É muito bom! Especialmente o capítulo chamado Valores, Variáveis e Fluxo de Controle
JavaScript Mozilla Guide também tem um excelente capítulo chamado valores, variáveis e literais
JS Standard Style Guide É um "zero configuration" linter para o estilo JavaScript que eu uso.