Curso de JavaScript completo, online e grátis

Simplesmente siga a ordem abaixo.

Não precisa ser conhecimento prévio algum de programação ou computação, basta saber ligar seu computador, abrir um navegador de internet e o bloco de notas.

Bons estudos!

Introdução ao JavaScript

1. JavaScript: O que é? Para que serve?
2. Como começar a programar em JavaScript – O necessário para iniciar
3. Como programar em JavaScript – Criando o script “Olá mundo”
4. Onde colocar o JavaScript em um site
5. Erros em JavaScript – Como usar o Console
6. Variável: O que é, Para que serve e Onde é usada
7. Como declarar uma variável – A palavra reservada var
8. Tipos de dados
9. Atribuindo e Acessando valores de Variáveis
10. Método prompt() - Como Receber Dados e Valores do usuário
11. Converter número em String e vice-versa: parseInt() e parseFloat()
12. Operações Matemáticas em JavaScript: somar, subtrair, multiplicar e dividir
13. Exercícios de Introdução ao JS

Testes Condicionais: IF e ELSE

1. Recebendo valores do usuário com formulário input
2. Operadores de comparação: == , != , > , >=, < e <=
3. Teste condicional IF
4. IF e ELSE em JavaScript
5. IF e ELSE dentro de IF e ELSE - Aninhando Testes Condicionais
   Exercício: Positivo ou Negativo ?
   Exercício: Qual número é maior ?
6. Operadores Lógicos em JS: AND ( && ), OR ( || ) e NOT ( ! )
7. O comando switch e as instruções case, break e default

Exercícios de IF e ELSE

Laços e Loops em JavaScript

1. Laço WHILE: O que é, para que serve e como usar
2. Operadores de atribuição
3. Laço FOR
4. Criando qualquer tabuada com o laço FOR
5. PA: Progressão Aritmética em JS
6. Fatorial com laços FOR e WHILE
7. Sequência de Fibonacci com FOR e WHILE
8. Números Primos
9. Laço DO WHILE

Exercícios de Laços e Loops

Obter meu certificado!

Função

1. Função: O que é? Para que serve? Qual a vantagem ?
2. Parâmetro, Argumento e Return em JS
3. Como gerar números aleatórios
   Simulando lançamento de dados
4. Função invocando de função: Como criar uma calculadora usando funções
5. Variável Global - Como fazer um jogo em JavaScript
6. Recursividade: Função de Fatorial e Fibonacci de Recursão
7. Exercícios

Arrays

1. Array (ou vetor): O que é? Para que serve?
2. Declarar, Inicializar e Acessar elementos de um Array
3. Laço FOR em Arrays
4. Laço FOR ... IN em Arrays
   Exercício com arrays, laço FOR e FOR IN
5. Trabalhando com Radiobuttons em JavaScript
6. Arrays em Funções: Passagem por Valor e por Referência
7. Ordenando arrays: O método sort
8. Fazendo buscas em arrays: Métodos indexOf e lastIndexOf
9. Matriz: O que é? Para que serve? Array de arrays
10. Matriz: Como criar, declarar, inicializar, exibir e alterar elementos
11. Exercícios de arrays e matrizes

Jogo da Velha em JavaScript (código completo)
Código comentado do Jogo da Velha em JavaScript

Objetos

1. Introdução: Classe, Objeto, Propriedade e Método
2. Como criar, declarar e acessar Objetos, Propriedades e Métodos
3. Objeto Math: Como usar Matemática em JavaScript
4. Objeto String: Trabalhando com caracteres e textos
5. Objeto Date: Datas, horários e tempo
6. Objetos Boolean e Number
7. Objeto document: DOM (Modelo de Objetos de Documento)

Eventos

1. Eventos - O que são? Para que servem?
2. O evento onload - Eventos de carregamento
3. Evento onchange - Evento de mudança de elemento
4. Eventos de Mouse - onmousedown, onmouseup, onclick, onMouseOver e onMouseOut
5. Tratando eventos (event handler) e o método addEventListener()
6. Eventos de Teclado - onkeydown, onkeyup e onkeypress
7. Eventos de formulário - onfocus e onblur (focus e blur)

Tutorial de Canvas

1. Introdução ao Canvas: Desenhando retângulos
2. Como desenhar Linhas
3. Como desenhar Arcos e Círculos
4. Desenhando textos - Como escrever em Canvas
5. Efeito de sombra: shadow

Tratando Eventos (Event Handler) e o método addEventListener

Neste tutorial de nossa apostila de JavaScript, vamos aprender como trabalhar com os tratadores de eventos (event handlers) através do método addEventListener(), do JS.

• Estudar pela Apostila (Download do PDF)

Tratadores de Eventos - Event Handlers

Até o momento, durante nossos estudos de Eventos em JavaScript, estávamos lidando com os eventos a partir de atributos no código HTML.

Veja o exemplo do tutorial anterior, sobre Eventos envolvendo o Mouse, em um código de botão em HTML:

<button onmousedown="aperta()" 

        onmouseup="solta()" 

        onclick="clica()">

        Clique neu!</button>

Só aí temos três atributos lidando com eventos: onmousedown, onmouseup e onclick.

Mas além de ser desagradável para muitos programadores ficar misturando código JS dentro de HTML, isso tem uma limitação: você só pode associar uma função para um evento, apenas.

Porém, muitas vezes se faz necessário vários eventos, num mesmo elemento.

Por exemplo, ao passar o mouse pelo botão talvez você queira que ele mude de cor ou passo que exiba um alert: "Tem certeza que deseja apertar esse botão? Mwahahaha"

Para isso, precisamos trabalhar com 'tratadores de eventos', do inglês event handlers, que nada mais são que funções que vão tratar eventos, mas agora direto no código JavaScript.

O Método addEventListener

Para trabalharmos com event handler, precisamos associar uma função a determinado elemento. O nome disso é registrar o tratador de eventos e isso é feito com o método addEventListener, que tem a seguinte sintaxe:

elemento.addEventListener(evento, nome_da_função, false ou true)

Por exemplo, vamos criar um botão simples, cujo código HTML é:

<button id="meuBotao">Clique!</button>

Assim, seu nome (id), é "meuBotao".

Agora vamos no JavaScript e vamos 'pegar esse botão':

document.getElementById("meuBotao")

Neste elemento, vamos usar o método addEventListener, para toda vez que o evento "click" ocorrer, ele chame a função clique, veja o código completo:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 <script>
  document.getElementById("meuBotao").addEventListener("click", clique);

  function clique() {
    alert("Clicou!");
  }
</script>
 </body>
</html>

Rode e faça o teste.

Tratamento de eventos em arquivo externos

No exemplo anterior, fizemos com o script dentro do documento HTML direto.

Se tentar colocar o código JS num arquivo externo, como script.js, vai ver que não funciona.

Isso ocorre por o script não foi 'carregado' (load).

Para carregarmos, basta fazermos: windows.load = function (){ código JS}

Vamos ver o código do exemplo anterior, com o código JavaScript num arquivo externo.

HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
 <button id="meuBotao">Clique aqui</button>
 </body>
</html>

script.js:

window.onload = function(){
 function minhaFuncao(){
     alert("Clicou!");
 }
 
 document.getElementById("meuBotao").addEventListener('click', minhaFuncao, false);
}

O que ocorre aqui é que, ao terminar de carregar a janela (windows.load), ele vai automaticamente carregar o arquivo externo, sem ele, nosso tratador de eventos não funciona, pois ninguém carregou o script.js antes.

Lista de eventos para usar na addEventListener():

https://developer.mozilla.org/pt-BR/docs/Web/Events

Evento onchange - Evento de mudança de um elemento

Neste tutorial de nossa apostila de JavaScript, vamos aprender a usar evento onchange.

• Estudar eventos pela Apostila JavaScript Progressivo em PDF

O Evento onchange

O evento onchange é utilizado nos chamados elementos de opção.
Ou seja, o evento dispara uma ação quando uma mudança ocorre em algum elemento.

As sintaxes de uso, são:
Inline:

<elemento onchange="minhaFunaco()">

No código JavaScript

meuObjeto.onchange = function(){
 //codigo da
 //funcao
};

Através do método addEventListener:

meuObjeto.addEventListener("change", minhaFuncao);

Exemplo de uso do evento onchange

Vamos usar uma input para exemplificar o evento onchange.
Iremos digitar algo na caixa de input e depois clicamos fora dela. Quando fizermos isso, tudo o que digitamos vai virar maiúsculo!


Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body>
  Digite algo: <input type="text" id="meuInput" onchange="minhaFuncao()">
 </body>
</html>

script.js

function minhaFuncao()
{
   var minhaInput=document.getElementById("meuInput");
   minhaInput.value=(minhaInput.value).toUpperCase();
}

O que ocorre é que quando digitamos algo, estamos fazendo uma alteração, uma mudança (change, em inglês).

Quando clicamos fora da input, ela detecta que algo mudou nela e o evento onchange dispara, fazendo o que? Invocando a função minhaFuncao().

Essa função, do JS, vai pegar a input e ligar ela a variável minhaInput.
Agora pegamos o que tem escrito no input: minhainput.value
E fazemos receber essa mesma string, porém transformada em caracteres maiúsculos, através do método toUpperCase(), do objeto String, que já estudamos.


Teste o resultado, digite algo e depois clique fora:

---

Digite algo:

---

Ou seja, você deve usar o evento onchange quando desejar detectar alguma mudança, em seus elementos de opção.

Esses elementos, são:

1. <input> - com type="checkbox", "color", "date", "datetime", "email", "file", "checkbox", "color", "password", "radio", "range", "search", "tel", "text", "time", "url", ou "week"
2. <select>
3. <textarea>

Exercício de JavaScript

No script anterior, ao invés de colocar todas as letras para maiúscula, faça com que apareça uma janela de alert, com a string digitada pelo usuário no formulário de input.

Evento em JavaScript - O que é ? Para que serve?

Neste tutorial de nossa apostila de JavaScript, vamos dar uma introdução bem simples sobre o que são os events em JS, para que servem, onde são usados e, inclusive, onde já usamos em nossa apostila online.

• Estudar eventos pela Apostila JavaScript Progressivo

Eventos - O que são? Para que servem ?

Na sua vida, no seu dia-a-dia, o que é um evento?

É um acontecimento, uma ação, algo que ocorre.

Eventos, não só em JavaScript mas como em outras linguagens, são ações que um programa ou script toma em resposta a alguma coisa que o usuário fez.

Você já deve ter entrado em sites que não deixam você clicar com o botão direito em cima, pra copiar o conteúdo. Ou seja, acontece uma ação (uma mensagem de erro aparece), em resposta a sua ação (clicar com o mouse). Se não clicar, nada ocorre.

Outros sites não deixam você dar control + C pra copiar um conteúdo, bloqueiam, ou mandam uma mensagem junto com o texto copiado. Ou seja, dependendo da ação que você toma (dar ctrl+C), o JavaScript vai desencadear um evento (mensagem de erro, por exemplo).

O exemplo mais conhecido seria o ato de pressionar um botão. O carregamento de uma página também pode desencadear um evento, a introdução de alguma informação em algum campo de input, passar o mouse por uma determinada região da página etc.

Eventos - Como fazer ?

Existem basicamente duas maneiras de se trabalhar com eventos, a primeira delas é inline, direto no código HTML.

O protótipo de um evento 'na linha' é:

<elemento evento="ação">

Ou seja, a ação vai ocorrer no elemento quando o usuário desencadear um evento.

Vamos relembrar um evento inline que usamos bastante durante nossa apostila:

<button onclick="funcao()">Função</button><br />

Lembram? Usamos para criar botões.

Funciona assim: o evento é o onclick, ou seja 'no clique'.

Quer dizer que quando o usuário clicar no elemento (no caso, um botão <button>), ele vai chamar uma ação. No caso, que ação é essa? Invocar a funcao().

Testem o seguinte exemplo de código HTML:

<p onclick="this.innerHTML='Tcharam!!!'">Clique aqui</p>

O resultado é o seguinte:

Clique aqui

Veja...o elemento é apenas um parágrafo, um simplório <p> </p>
Quando clicamos, desencadeia um evento do tipo onclick, que através do atributo innerHTML do próprio documento (this), e a ação é simplesmente substituir o texto "Clique aqui" por "Tcharam!!!".

Bem simples, não?

Já a outra maneira de fazer eventos é a através de um evento externo, usando um manipulador de eventos (event handler), que vamos estudar em tutorial futuro.

Objetos Boolean e Number - Números e Booleanos

Neste tutorial, falaremos de dois objetos simples: o Boolean e o Number.

• Baixar apostila em PDF

O Objeto Boolean: Booleanos em JavaScript

Para criamos um objeto de nome bool do tipo Boolean, fazemos:

var bool = new Boolean( valor );

Onde valor pode assumir apenas uma opção:

1. True (Verdadeiro)
2. False (Falso)

O valor false pode ser representado das seguintes maneiras:

• false  - Valor booleano
• 0 - Número 0
• null - Nulo
• Number.NaN - Not a Number
• "" - String vazia

Todo o restante é visto como true. Note que false é um valor booleano, já "false" é uma string, e seria true.

Métodos do objeto Boolean:

1. toString() - Retorna uma string, "true" caso o objeto seja true ou "false" caso seja false.
2. valueOf() - Retorna o valor booleano do objeto em questão que invocou o método

Objeto Number - Métodos e Propriedades

Podemos usar variáveis do tipo Number, ao invés de números puros, através do objeto Number:

var numero = new Number( valor );

Métodos:

• toString( base ) - Transforma o número armazenado no objeto em uma string na base base. Nossa base é a decimal (10 - valor padrão). Se fizermos:
  var numero = new Number(2);

E depois:

numero.toString(2), ele retorna a string "10", pois o número inteiro decimal 2 é representado como 10 no sistema binário (base 2).

Alguns métodos e propreidades do Objeto Number:

• valueOf() - Retorna o valor numérico no objeto
• Number.MAX_VALUE - Maior valor que um número pode armazenar no JS
• Number.MIN_VALUE - Menor valor que o JS pode armazenar de um número
• Number.NaN - Not a Number, representação de algo que não é representável por números (como infinito ou algo dividido por 0)
• Number.NEGATIVE_INFINITY - Representação de um valor menor que -Number.MAX_VALUE .
• Number.POSITIVE_INFINITY - Representação de um valor maior que Number.MAX_VALUE

Mais informações:

1. https://www.w3schools.com/js/js_booleans.asp
2. https://www.w3schools.com/js/js_number_methods.asp

Jogo da Velha em JavaScript - Código comentado

Neste tutorial, vamos comentar todo o código do Jogo da Velha em JavaScript, linha por linha e função por função.

Veja:
Código HTML e JS do Jogo da Velha

• Estudar pela apostila em PDF

O Jogo da Velha em JavaScript

Esse exercício serve, principalmente, para treinarmos duas importantes seções de nossa apostila de JavaScript:

1. Funções
2. Arrays

Vai funcionar assim: o primeiro jogador fornece uma linha e uma coluna, marcamos X pra ele no local, então checamos se alguém ganhou.

Se não, é a vez do jogador 2 fornecer uma linha e uma coluna, então marcamos O no tabuleiro.

Checamos novamente.

E assim vai...fornece a posição, marcamos no tabuleiro e checamos se alguém ganhou.

Bem simples.

Código HTML do Jogo da Velha

Primeiro, vamos comentar o HTML.

Ele é bem simples.

Assim que inicia a <body> (corpo da página), ele já chama a função inicia() de nosso script.

Depois, temos uma div, a board.

É nessa DIV que iremos printar na página o tabuleiro do jogo da velha.

Depois, temos dois formulários de input, onde o usuário vai fornecer a linha e a coluna que ele deseja marcar. Você deve escolher números de 1 até 3, pois o tabuleiro de um jogo da velha é 3x3.

Quando o jogador escolher linha e coluna, então ele clica no botão Marca, que chama a função jogar().

Embaixo, tem a div aviso, é lá que exibiremos os avisos: vez do jogador tal, campo já marcado, fulano ganhou, linha tal foi preenchida etc.

Agora vamos deixar o bom e velho HTML de lado, ver onde o bicho pega: na programação JavaScript.

Código JavaScript do Jogo da Velha

Primeiro, vamos declarar todas as variáveis que vamos usar, fora do escopo de qualquer função, para que estas variáveis fiquem 'visíveis' e acessíveis a qualquer função.

A variável tabuleiro, que vai armazenar a matriz 3x3, inicializada com todos elementos iguais a 0.

Quando o primeiro jogador marca uma posição, mudamos de 0 pra 1.

Quando o segundo jogador marca uma posição, mudamos de 0 pra -1.

Já já você vai entender o motivo disso.

A variável board é que vai se ligar com a div board, e a variável aviso vai se ligar com a div aviso.

A variável jogador vai ser incrementada a cada jogada. Vamos usar o resto da divisão dela por 2 pra sabermos de quem é a vez de jogar (o resto da divisão de qualquer número por 2 vai sempre dar 0 ou 1, basta somar 1 que teremos sempre os valores 1 e 2 se alternando).

Por fim, as variáveis lin e col, que vão pegar as posições de linha e coluna que o usuário digitou.

Quando o HTML roda, a tag <body> 'chama' a função inicia().

Essa função só roda uma vez, quando carregamos a página.

Ela vai criar a o array de arrays, e depois inicializar todos os elementos com o número 0, na variável tabuleiro.

Linkamos as variáveis board e aviso com o HTML, e inicializamos o jogador como 1 (resto da divisão por 2 vai dar 1, logo o jogador 1 é o primeiro a jogar).

Agora a função exibe().

Ela vai pegar o tabuleiro tabuleiro e em vez de exibir 0, 1 e -1, vai exibir:

campo vazio: ___

os X

os O

Toda vida que se depara com o número 0, ela escreve no HTML: _

Quando encontra o número 1 no tabuleiro, ela escreve no HTML: X

Quando encontra o número -1, ela escreve: O

Colocamos todo o desenho no tabuleiro na variável HTML e mandamos pra nossa página, via board.innerHTML

Toda vez que você digita a linha, a coluna e clica no botão Marca, a função jogar() é acionada.

Primeira ela mostra o aviso de qual jogador é a vez.

Depois, pega as strings com os números de linha e coluna que o usuário digitou, e transforma em inteiros.

Lembrando que o usuário digita: 1, 2, ou 3
Mas nosso tabuleiro tem posições: 0, 1 e 2 para linhas e colunas, por isso é necessário subtrair 1 do valor digitado pelo usuário.

Agora vamos marcar X ou O no tabuleiro.

Primeiro verificamos se ele está vazio: tabuleiro[lin][col]==0

Se tiver 0 lá, tá vazio.

Se for o primeiro jogador, colocamos o número 1 nessa posição.

Se for a vez do segundo jogador, colocamos o número -1 nessa posição.

Se não tiver 0 no local, cai no ELSE e avisa que o campo já foi marcado (e subtraímos 1 da variável jogador).

Quando terminar esse tratamento de IF e ELSE, incrementamos a variável jogador, para ser a vez do próximo.

Depois, exibimos novamente o tabuleiro (agora atualizado com a mudança).

E também chamamos a função checa().

A função checa() vai chegar se alguém ganhou o jogo.

Pra isso, ela primeiro percorre todas as linhas (primeiro FOR), e olha se a soma de alguma linha dá 3 ou -3.

Depois faz o mesmo para as colunas (segundo FOR).

Depois testamos se as diagonais tem soma 3 ou -3.

Se sim, exibimos qual linha, coluna ou diagonal está preenchida e venceu, bem como o vencedor.

Prontinho, temos nosso jogo da Velha em JavaScript.

Como declarar Objetos, Criar Propriedades e Métodos em JavaScript

Agora que já aprendemos o que são objetos, chegou a hora de aprendermos como criar um, como inserir propriedades e métodos, bem como acessá-los, em objetos na linguagem JavaScript.

• Estudar offline pela apostila em PDF

Como declarar e Criar um Objeto em JavaScript

A maneira mais simples, rápida e fácil de criar um objeto, é fazer simplesmente:
var myObj = {};

Prontinho.
Colocamos as propriedades e métodos de um objeto entre chaves. Nesse caso, temos um objeto de nome myObj, que é vazio.

Uma outra maneira de criar um objeto vazio, é instanciando da classe Object, com o comando new:
var myObj = new Object();

Se usarmos o operador typeof, que diz que tipo de dado é aquele objeto:

function obj()
{
 var myObj = new Object();
 alert(typeof myObj);
}

Ele vai retornar:

Como Adicionar e Acessar propriedades em um Objeto

Ok, vimos como criar ou instanciar nosso objeto, porém não é muito útil um objeto assim vazio, sem informação nenhuma.

Vamos agora criar o objeto meuCarro.
Depois, vamos adicionar a propriedade modelo com uma string. Fazemos isso simplesmente escrevendo um ponto após o nome do objeto seguido do nome da propriedade, então fazemos tudo isso receber um valor, no caso, uma string:

function obj()
{
 var meuCarro = new Object();
 meuCarro.marca="Corolla";

 alert("Marca do carro: "+meuCarro.marca);
}

Para acessar, basta usar: meuCarro.modelo
Tem uma string dentro dessa propriedade, ou seja, é uma variável interna do objeto, que armazena uma string, que exibimos em um alert:

Como criar um método num Objeto

Por fim, vamos aprender como criar um método dentro de um objeto.
Lembrando que um método nada mais é que uma função.

Vamos chamar de ligar() o nome do nosso método.
Basta fazer:
var nomeDoMetodo = function(){
   [código do método]
}



Por exemplo, o método ligar exibe um alert:

function obj()
{
 var meuCarro = new Object();
 meuCarro.marca="Corolla";
 meuCarro.ligar = function(){
  alert("Ligando o carro...Vruuuum!");
 }

 meuCarro.ligar();
}

Para acessar um método, basta escrever o nome do objeto, um ponto, nome do método e o par de parêntesis, como se fosse uma função (método são funções!).

Quando rodamos nosso script:

Criando Objetos com chave:valor

Uma maneira bem mais comum e fácil de se trabalhar com objetos, é declarando eles, suas propriedades e métodos com pares chave/valor (key/value).

Funciona mais ou menos assim:
var meuObjeto = {
  chave1 : valor1,
  chave2 : valor2,
  chave3 : valor3
}

Por exemplo, vamos criar o objeto meuCarro com nome do modelo, ano de fabricação e um método que exibe as propriedades anteriores num alert:

function obj()
{
 var meuCarro = {
  modelo : "Corolla",
  ano    :  2018,
  exibeInfo : function(){
   alert("Meu carro é modelo " + this.modelo + " e ano " + this.ano);
  }
 }
 meuCarro.exibeInfo();
}

O resultado ao invocar meuCarro.exibeInfo():

Note que, para usarmos propriedades internas de um objeto, usamos o comando this. antes do nome da propriedade, isso serve para sinalizar que estamos querendo acessar a variável interna do objeto!

Se já estudou outra linguagem de programação, objetos nesta forma são semelhantes aos:

• Arrays associativos PHP
• Dicionários em Python
• Hash table em C
• Hash maps em Java
• Hashes em Ruby e no Perl

Como Deletar Propriedades

Ok, já vimos como é simples criar objetos com propriedades ou ir criando propriedades depois.
Mas, como dissemos, os objetos são mutáveis, podem mudar, seja pra crescer seja pra diminuir.

O comando delete serve para excluir uma propriedade. Para deletar a propriedade modelo, basta fazer:
delete meuCarro.modelo

E prontinho, já era a informação de modelo do seu carro.

Mais fonte de estudo:
https://www.dofactory.com/tutorial/javascript-objects
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Trabalhando_com_Objetos

Matriz - Como Criar, Inicializar, Exibir e Alterar

Neste tutorial de nossa apostila de JavaScript, vamos aprender a usar matrizes. Vamos ver como declarar, inicializar, exibir e alterar os itens de um array de arrays, ou seja, de uma matriz.

• Estudar Matriz pela Apostila JavaScript Progressivo

Como Declarar uma Matriz

Vamos declarar e inicializar a matriz do tutorial anterior, sobre o que são matrizes (aquela 3x3 que vai de 1 até 9).

Basta fazer:

var matriz = [ [1,2,3],

                      [4,5,6],

                      [7,8,9] ];

Ou seja, inserimos três arrays (um por linha), no array matriz.

Uma outra maneira seria primeiro inicializar a variável como um array de 3 elementos:

var matriz = new Array(3);

Agora vamos em cada elemento e inicializamos com vetores:

matriz[0] = [1,2,3];

matriz[1] = [4,5,6];

matriz[2] = [7,8,9];

Lembrando que podemos também criar e declarar uma matriz com elementos nulos e de qualquer tamanho de linhas ou colunas:

var matriz = new Array(2);

matriz[0] = new Array(3);

matriz[1] = new Array(3);

No código acima, declaramos uma matriz de duas linhas e três colunas, conseguiu captar a ideia?

Como acessar elementos de uma Matriz

Vamos supor uma matriz 3x4. Ou seja, três linhas e 4 colunas.
Seus itens são acessados assim:

               Coluna 0      Coluna 1    Coluna 2   Coluna 3
Linha 0   a[ 0 ][ 0 ]    a[ 0 ][ 1 ]    a[ 0 ][ 2 ]    a[ 0 ][ 3 ]
Linha 1   a[ 1 ][ 0 ]    a[ 1 ][ 1 ]    a[ 1 ][ 2 ]    a[ 1 ][ 3 ]
Linha 2   a[ 2 ][ 0 ]    a[ 2 ][ 1 ]    a[ 2 ][ 2 ]    a[ 2 ][ 3 ]



Cada um desses elementos é uma variável, como outra qualquer.
Então, se quiser que o elemento da linha 2 e coluna 3 receba o valor 10, só fazer:
matriz[1][2] = 10;

Como exibir uma Matriz

A maneira mais fácil e recomendada de exibir uma matriz, é usando dois laços for, aninhados.
No primeiro laço, uma variável percorre as linhas.
No segundo laço, o interno, outra variável percorre o número correspondente de cada coluna.

No script abaixo inicializamos o vetor 3x3 que demos de exemplo, em seguida exibimos:

function exibe()
{
 var matriz = [ [1,2,3],
                       [4,5,6],
                       [7,8,9] ];

    for(let lin=0 ; lin<3 ; lin++){
     for(let col=0; col<3 ; col++)
      document.write(matriz[lin][col] + "  ");
     

     document.write("<br />");
    }

}

Vamos lá, devagar.

O primeiro for vai ficar responsável pelo índice das linhas, através da variável lin.
Ela assume primeiro o valor 0. Então, entra no FOR aninhado.

Esse for de dentro é o responsável pelo índice de cada coluna. Começa em 0, depois 1 e por fim tem valor 2.

Dentro dele, printamos na tela cada elemento: matriz[lin][col]

Quando acaba esse FOR aninhado, é porque uma linha já foi impressa. Então, damos uma quebra de linha <br />

Agora de volta no laço FOR de cima. Agora a variável lin recebe o valor 1, então vai printar a segunda linha...de novo o FOR aninhado, que vai de coluna em coluna e exibe o respectivo elemento.

Como Ordenar um Array - O método sort

Neste tutorial de nossa Apostila de JavaScript, vamos aprender o que é, para que serve e como usar o método sort para ordenar elementos de um array.

• Estudar array pela Apostila JavaScript Progressivo

Por que ordenar ?

Uma das coisas mais importantes no mundo da computação, é o sorting, ou seja, a ordenação, a classificação de elementos segundo alguma propriedade.

Por exemplo, ordenar números em ordem crescente ou decrescente.

Certamente você já acessou algum site de loja online e ficou pesquisando o preço de produtos.
Lá, existiam as opções:

• Ordenar por menor preço
• Ordenar por maior preço
• Ordenar por mais vendidos
• Ordenar por mais bem avaliados

Isso nada mais é que ordenação de arrays.
Você tem um vetor, onde cada elemento é um produto e você pode ordenar do mais barato pro mais caro, do mais caro pro mais barato, os mais acessados, os mais comprados etc etc.

O JavaScript provém, de maneira nativa, métodos (funções) que já fazem isso por você,  e é o que vamos estudar agora.

Ordenar um Array - Método sort

Todo objeto do tipo array, ou seja, todo e qualquer vetor, tem uma função embutida, um método, chamado sort().

Para invocarmos o método sort() do array de nome vetor, basta fazermos:
vetor.sort()

Mas aí tem um porém, sem passar nenhum argumento, ele vai fazer uma ordenação de STRINGS, ou seja, alfabética, de texto.

Já se fizermos:
sorte(a,b)

Ele retorna:
Número negativo : se o primeiro argumento for menor que o segundo
0 : se os argumento são iguais
Número positivo: se o primeiro argumento for maior que o segundo

Como Ordenar Números com o Método sort

Existe um parâmetro no método sort: funcaoOrdena
É uma função de comparação, que podemos usar como argumento para fazer a ordenação dos elementos de um array.

Vamos criar uma função de ordenação chamada funcaoOrdena que simplesmente subtrai o primeiro número do segundo:

function funcaoOrdena( x, y )
{
 return parseInt( x ) - parseInt( y );
}

Agora basta passarmos essa função como argumento para o método sort.

Código HTML:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

Código script.js:

function main()
{
 var vetor = [10, 2, 5, 4, 3, 1];

 document.write("Vetor: " + vetor + "<br />");
 document.write("Chamando a função ordena()..."+ "<br />");
 ordena(vetor);
 document.write("Vetor: " + vetor + "<br />");
}

function ordena (vetor)
{
 vetor.sort( funcaoOrdena );
}

function funcaoOrdena( x, y )
{
 return parseInt( x ) - parseInt( y );
}

Resultado:
Vetor: 10,2,5,4,3,1
Chamando a função ordena()...
Vetor: 1,2,3,4,5,10


O que ocorreu por trás dos panos é que o método sort mandou de dois em dois números do array, para a função funcaoOrdena e baseado no retorno dela, foi ordenando os elementos.

Se a função de comparação é:
funcao(x,y)
{
  return x-y;
}

A sort ordena os números na ordem crescente.
Se for:
funcao(x,y)
{
  return y-x;
}

Ela retorna na ordem decrescente.
Note que usamos parseInt apenas para nos certificarmos que estamos lidando com números inteiros. Se você estiver usando números no array, como float, e não usar parseInt vai dar tudo certo também, sem problemas.

Arrays e Funções - Passagem por Valor e Referência

Neste tutorial de nosso Curso de JavaScript, vamos aprender como trabalhar com arrays em funções, e para isso vamos estudar primeiro o que é passagem por valor e por referência.

• Estudar pela apostila em PDF

Passagem por Valor e Passagem por Referência em JavaScript

Quando estudamos variável global, na seção de Função em JS, vimos que uma variável declarada dentro de uma função, só existe dentro dela.

E o mas interessante: quando passamos uma variável para uma função e alteramos essa variável dentro da função, a variável original lá de fora da função não era alterada.

O nome disse é passagem por valor, pois quando passamos uma variável para uma função, é passado na verdade uma cópia dela, vai só o valor, e não a variável original. Por isso que quando alteramos dentro do escopo da função não estamos alterando a variável original, e sim sua cópia dentro da função.

Existe um outro tipo de passagem, que é por referência. Quando fazemos a passagem desse tipo, uma referência, ou seja, um endereço de memória é que é passado para a função.

Nesse endereço, está a variável original. Assim, se a variável for alterada dentro de uma função, ela é alterada originalmente, pois estamos lidando com a variável mesmo, e não uma cópia de seu valor.

A passagem por arrays é sempre por referência. Pois dependendo do tamanho do array, seria muito oneroso fazer uma cópia de todo o vetor para se usar a passagem por valor.

Passando um Array para uma Função em JS

Para passar um array como argumento para uma função, basta passa o nome do array, sem colchetes, apenas o nome, como se fosse uma outra variável qualquer.

No exemplo abaixo, passamos um array:
vetor = [1, 2, 3, 4, 5]

E a função dobra() vai duplicar o valor de cada elemento do array.

O resultado, após a função é:
vator = [2, 4, 6, 8, 10]

Nosso HTML simplesmente chama a main() ao iniciar a tag body:

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
 <head>
    <title>Apostila JavaScript Progressivo</title>
    <script type="text/javascript" src="script.js"></script>
 </head>
 <body onload="main()">
 </body>
</html>

Código: script.js

function main()
{
 var vetor = [1, 2, 3, 4, 5];

 document.write("Vetor: " + vetor + "<br />");
 document.write("Chamando a função dobra()..."+ "<br />");
 dobra(vetor);
 document.write("Vetor: " + vetor + "<br />");
}

function dobra (vetor)
{
 for(let i in vetor)
  vetor[i] *= 2;
}

Resultado:
Vetor: 1,2,3,4,5
Chamando a função dobra()...
Vetor: 2,4,6,8,10

Veja que dobramos o valor de cada elemento do array dentro da função dobra.
Como resultado, todo o vetor vai ter valores dobrados.

Note que não precisamos dar um return, pois a variável já é alterada dentro da função.