diff --git a/Gemfile.lock b/Gemfile.lock index e907ef8..0ff93da 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -9,6 +9,7 @@ GEM commander (4.1.6) highline (~> 1.6.11) fast-stemmer (1.0.2) + ffi (1.9.3) ffi (1.9.3-x64-mingw32) github-pages (15) RedCloth (= 4.2.9) @@ -56,7 +57,11 @@ GEM yajl-ruby (1.1.0) PLATFORMS + ruby x64-mingw32 DEPENDENCIES github-pages + +BUNDLED WITH + 1.10.6 diff --git a/_includes/submenu-js.html b/_includes/submenu-js.html index b129b15..c044a7b 100644 --- a/_includes/submenu-js.html +++ b/_includes/submenu-js.html @@ -6,6 +6,7 @@

JavaScript

  • Variáveis
  • Operadores
  • Funções
    • +
  • Controles de Fluxo e Controles de Repetição
  • Arrays
  • Objetos
  • O que é um framework?
    • diff --git a/assets/img/arvore-dom.gif b/assets/img/arvore-dom.gif new file mode 100644 index 0000000..d8882cf Binary files /dev/null and b/assets/img/arvore-dom.gif differ diff --git a/assets/javascripts/scripts.js b/assets/javascripts/scripts.js index c92a1b4..b5979cd 100644 --- a/assets/javascripts/scripts.js +++ b/assets/javascripts/scripts.js @@ -1,3 +1,11 @@ $(document).ready(function(){ prettyPrint(); + + // Altera links externos para abrirem em uma nova aba + var domain = document.location.protocol+'//'+document.location.host, + links = $('.content a').each(function(index,element) { + if(element.href.substr(0,domain.length) !== domain) { + element.target = '_blank'; + } + }); }); diff --git a/manual/css/box-model.html b/manual/css/box-model.html index 4e77cff..67a9469 100644 --- a/manual/css/box-model.html +++ b/manual/css/box-model.html @@ -40,7 +40,7 @@

    Entendendo como funciona elementos no HTML

    Altura
    -

    50 (largura definida) +
    10 (padding top) +
    10 (padding bottom) +
    1 (border top) +
    1 (border bottom) => 72 pixels de altura

    +

    50 (altura definida) +
    10 (padding top) +
    10 (padding bottom) +
    1 (border top) +
    1 (border bottom) => 72 pixels de altura

    Um exemplo prático pra vermos a dor de cabeça que você pode ter no seu dia a dia. Imagine que você precise ter um elemento que ocupe 100% da largura disponível. Mas também precisa que esse elemento tenha 10 pixels de padding e uma borda de 1 pixel.

    diff --git a/manual/css/float-clear.html b/manual/css/float-clear.html index 5e5b9a6..308fbf2 100644 --- a/manual/css/float-clear.html +++ b/manual/css/float-clear.html @@ -62,7 +62,7 @@

    A propriedade clear

    No entanto, chegaríamos num resultado assim:

    Representação de um layout com imagem localizada no topo esquerdo com conteúdo textual ao redor dela

    Por que isso? Como definimos que a tag figure flutuaria à esquerda, saindo assim do fluxo vertical da página, todo conteúdo que vem após ela começa a preencher o espaço ao redor da imagem. O que acontece é que os parágrafos que vem logo após a tag figure são menores que a altura da imagem, fazendo com que o título (tag h3) ao invés de ser renderizada abaixo da imagem, apareça ao lado dela e seguindo o fluxo do documento.

    -

    É aí que entra a propriedade clear. Ela tem a função de controlar o comportamento de elementos que apareçam no fluxo do documento após determinado elemento que possue a propriedade float. Em outras palavras, ela especifica se um elemento deve ser posicionado ao de elementos com float ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores:

    +

    É aí que entra a propriedade clear. Ela tem a função de controlar o comportamento de elementos que apareçam no fluxo do documento após determinado elemento que possue a propriedade float. Em outras palavras, ela especifica se um elemento deve ser posicionado ao lado de elementos com float ou se devem ser colocados abaixo deles. A propriedade aceita 4 valores:

    Doctype - Definindo o documento

    Uma coisa importante: SEMPRE deve existir o doctype, que é este código <!DOCTYPE html>.

    -

    O doctype indica para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.

    +

    O doctype não é uma tag HTML, mas uma instrução para o navegador e outros programas que podem ler seu site, que o código encontrado ali é um código HTML. Assim eles sabem o que fazer para mostrar seu site da melhor forma possível. Lembre-se: o doctype é OBRIGATÓRIO e deve ser sempre a PRIMEIRA LINHA do seu documento.

    HEAD

    -

    Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento dag head.

    +

    Contém informações que não são transpostas visivelmente para o usuário/leitor do documento. São dados implícitos, de uso e controle do documento: vinculação com outros arquivos, aplicação de lógica de programação de scripts e metadados. Na prática, todo o conteúdo do cabeçalho fica delimitado entre a abertura e fechamento tag head.

    BODY

    Trata-se do documento em si, ou seja, a informação legível para o usuário/leitor do documento. É todo e qualquer texto que se deseja apresentar, assim como toda e qualquer forma de mídia de saída (imagens, sons, miniaplicativos embutidos, conteúdo multimídia, etc). Além disso, toda a apresentação de entrada de dados (formulários) também se aplica neste seção do documento. Na prática, o corpo do documento é delimitado pelo par de tags <body> e </body>.

    diff --git a/manual/html/index.html b/manual/html/index.html index 99138bb..f8ea35c 100644 --- a/manual/html/index.html +++ b/manual/html/index.html @@ -19,7 +19,7 @@

    Camadas de desenvolvimento

    O nome HTML

    - O acrônico HTML significa em inglês: HyperText Marckup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?
    + O acrônico HTML significa em inglês: HyperText Markup Language. Para gente aqui fica: Linguagem de Marcação de Hipertexto. Bonito, né?
    Por trás das palavras Hipertexto e Marcação tem muita história e guardam a real essência da função do HTML. Você vai saber mais na próxima página, onde falamos sobre Semântica, que nada mais é do que a organização da informação usando HTML.

    Se você tiver que guardar alguma coisa sobre o que é HTML, guarde isso: HTML serve para dar significado e organizar a informação dos websites. diff --git a/manual/html/oquemetatags.html b/manual/html/oquemetatags.html old mode 100644 new mode 100755 index a47816e..3840ec6 --- a/manual/html/oquemetatags.html +++ b/manual/html/oquemetatags.html @@ -7,8 +7,9 @@

    O que são metatags?

    Informação sobre seu site

    -

    A Meta Tag, representada pela tag <meta> é uma tag diferenciada das demais por não ter nenhum efeito aparente na página em si, mas sim por ser responsável por ações externas à página, como por exemplo informar à buscadores como Google ou Bing algumas informações a respeito da página, como título e uma breve descrição.

    -

    Tipos de Meta Tags

    +

    A Meta Tag, representada pela tag <meta> é uma tag diferenciada das demais por não ter nenhum efeito aparente na página em si, mas sim por ser responsável por ações externas à página, como por exemplo informar à buscadores como Google ou Bing algumas informações a respeito da página, como título e uma breve descrição.

    +

    Tipos de Meta Tags

    +
    Author

    O nome do autor da página.

    Copyright
    @@ -19,6 +20,6 @@

    Tipos de Meta Tags

    Data em que o documento deve ser considerado expirado.

    Keywords

    Aqui é um dos locais onde os motores de busca procuram informações a respeito da página.

    - +

    Esta página está em construção. Volte em breve ou ajude a completá-la!

    diff --git a/manual/js/controles-de-fluxo-e-controles-de-repeticao.html b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html new file mode 100644 index 0000000..d36264e --- /dev/null +++ b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html @@ -0,0 +1,149 @@ +--- +layout: interna +title: Controles de Fluxo e Controles de Repetição +--- +{% include submenu-js.html %} + +
    +

    Declarações (Statements)

    +

    Entendendo Controles de Fluxo e Controles de Repetição

    + +

    Controles de Fluxo

    +

    São comandos da linguagem que permitem desviar o fluxo do programa, dependendo de um teste.

    + +

    IF

    +

    A sintaxe do if é a seguinte:

    +
    +if (<teste>) {
+  <código a ser executado caso o teste seja verdadeiro>
+}
+
    + +

    Podemos, por exemplo, executar um trecho do código unicamente se uma variavel nossa for maior do que dez.

    +
    +var x = 11;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+
    + +

    Note, que o console.log não apareceria caso o valor de x fosse 10, 9, 8...

    +
    +var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+}
+console.log('Serei executado independente do if ser true ou false');
+
    + +

    ELSE

    +

    o else não existe sem o if, pois ele não testa nada. Só é executado caso o teste do if retorne falso.

    +
    +var x = 9;
+if (x > 10) {
+  console.log('x é maior do que dez, corram para as colinas!');
+} else {
+  console.log('Está tudo bem, podemos ficar tranquilos.');
+}
+
    + +

    SWITCH

    +

    O switch é uma estrutura para testes simples, muito usado quando temos que testar uma mesma condição diversas vezes, pois é mais legível do que uma cadeia de else if.

    +
    +var tinta = 'azul';
+switch (tinta) {
+  case 'azul':
+    console.log('Irei pintar o carro de azul');
+    break;
+  case 'amarela':
+    console.log('Vou pintar a casa de amarelo');
+    break;
+  case 'verde':
+    console.log('Vou pintar o chão da garagem de verde');
+    break;
+  default:
+    console.log('Não vou pintar nada');
+    break;
+}
+
    + +

    Note que para cada uma das cores, eu farei uma coisa completamente diferente da outra. Caso a tinta seja verde, eu vou pintar o chão da garagem, mas se a tinha for amarela, irei pintar a casa.

    + +

    Se fossemos reescrever esses testes com elseif, ficaria assim:

    +
    +var tinta = 'azul';
+
+if (tinta === 'azul') {
+  console.log('Irei pintar o carro de azul');
+} else if(tinta === 'amarela') {
+  console.log('Vou pintar a casa de amarelo');
+} else if (tinta === 'verde') {
+  console.log('Vou pintar o chão da garagem de verde');
+} else {
+  console.log('Não vou pintar nada');
+}
+
    +

    Fica melhor com o switch, ne?!

    + +

    Laços de repetição (loops)

    +

    Se existe uma coisa que os computadores são muito bons é em executar algo várias vezes. Desde que saibamos o que queremos que o computador faça. Felizmente, para não precisamos repetir inúmeras vezes a invocação de uma função ou certo código, existe os loops (laços de repetição).

    + +

    FOR

    +

    Formado por três partes: inicialização, condição e incremento. A sintaxe é:

    +
    +for (var i = 0; i <= 10; i++) {
+  //código a ser executado até a condição se tornar falsa
+}
+
    + +

    FOR IN

    +

    É utilizado quando não sabemos quantas vezes temos que interar sobre um array ou objeto.

    +
    +var arr = [1,2,3];
+for(var n in arr) {
+  console.log(n);
+}
+
    + +

    FOREACH

    +

    Utilizamos o foreach quando queremos percorrer as propriedades de um objeto ou os itens de um array, sem precisamos nos preocupar em contar quantos são.

    +
    +var arr = [1,2,3];
+arr.forEach(function(each){
+  console.log(each);
+});
+
    + +

    WHILE

    +

    Funciona basicamente igual ao for, e é possível sempre trocar o for() por um while(). Escolhemos um ou outro pela clareza do que estamos fazendo. Geralmente preferimos utilizar o loop for() para interar com contadores e loops while() até que alguma condição mude (de true para false, por exemplo).

    +
    +var x = true;
+while(x) {
+  console.log('Jane Doe');
+  x = false;
+}
+
    + +

    Nesse caso acima, o console.log será executado uma única vez, pois eu altero para false a variavel x, logo na primeira interação do laço. Mas eu poderia ter feito algo assim:

    +
    +var i = 1,
+    x = 2;
+
+while(x < 20) {
+  x = x + (x * i);
+
+  console.log('O valor atual de x é: ' + x);
+  i++;
+}
+
    + +

    DO WHILE

    +

    Segue o mesmo princípio do while, mas o corpo é sempre executado pelo menos uma vez, independente da condição, pois primeiro ele faz do e depois testa a condição.

    +
    +do {
+  console.log('Jane Doe');
+} while(false);
+
    +

    Apesar da condição já começar como falsa, veremos a string "Jane Doe" uma vez no console do browser.

    + +
    diff --git a/manual/js/operadores.html b/manual/js/operadores.html index de9ed3f..b0b330f 100644 --- a/manual/js/operadores.html +++ b/manual/js/operadores.html @@ -6,6 +6,123 @@

    Operadores

    -

    Lógicos, aritméticos, de comparação...

    +

    Os operadores vão nos permitir fazer operações(mesmo!? Não me diga...) matemáticas, de comparação e lógicas

    + +

    Aritiméticos

    +

    Para as operações matemáticas básicas são utilizados os seguintes, adição(+), subtração(-), multiplicação(*) e divisão(/). + 

    +//Adição
+2+2 //4
+2.3+4 //6.3
+1.5+1.5 //3
+
+//Subtração
+2-2 //0
+8-5 //-8
+3.2-1 //2.2
+
+//Multiplicação
+2*3 //6
+1.5*2 //3
+
+//Divisão
+1/2 //0.5
+1.5/2 //0.75
+2/0 //Infinity
+
    +

    +

    Você notou que podemos ter resultados com casas decimais e que é retornada a constante Infinity em qualquer número divido por zero.

    +

    Além dos desses operadores básicos temos outros operadores bem úteis:

    +
    +
    Resto (%)
    +
    Retorna o resto inteiro da divisão. + 
    +5%4 //1
+4%5 //4
+
    +
    +
    Incremento (++)
    +
    Adiciona um a variável. Se utilizado antes(++x) adiciona um e retorna o valor, caso o operador seja utilizado depois da variável(x++) retorna o valor e adiciona um. + 
    +var x = 1;
+++x //2
+x++ //2
+
    +
    +
    Decremento (--)
    +
    O comportamento desse operador é parecido com o de incremento(acho que você já entendeu).Ele subtrai um da variável. Se utilizado antes(--x) subtrai um e retorna o valor, caso o operador seja utilizado depois da variável(x--) retorna o valor e subtrai um. + 
    +var x = 2;
+--x //1
+x-- //1
+
    +
    +
    +

    De comparaçao

    +
    +
    Igual (==)
    +
    Retorna verdadeiro se os valores comparados forem iguais. + 
    +1=='1' //true
+
    +
    +
    Não igual (!=)
    +
    Retorna verdadeiro se os valores comparados não forem iguais. Esse operador também pode ser chamado de diferente de. + 
    +4!=1 //true
+
    +
    +
    Igual estrito (===)
    +
    Esse operador é mais severo, só retorna verdadeiro se o valor e o tipo comparados forem iguais. + 
    +3==='3' //false
+3===3 //true
+
    +
    +
    Não igual estrito (!==)
    +
    Não se engane, esse operador vai retornar verdadeiro se os valores e ou os tipos forem diferentes + 
    +3!=='3' //true
+3!==3 //false
+3!==4 //true
+
    +
    +
    Maior que (>)
    +
    Compara se o operador da esquerda é maior que o da direita. Caso seja retorna verdadeiro + 
    +1>2 //false
+5>3 //true
+4>'1' //true
+
    +
    Maior ou igual que (>=)
    +
    Compara se o operador da esquerda é maior ou igual ao da direita. Caso seja retorna verdadeiro + 
    +1>=2 //false
+5>=3 //true
+4>='1' //true
+2>=2 // true
+
    +
    +
    Menor que (<)
    +
    Compara se o operador da esquerda é menor que o da direita. Caso seja retorna verdadeiro + 
    +1<2 //true
+5<3 //false
+4<'1' //false
+
    +
    +
    Menor ou igual que (<=)
    +
    Compara se o operador da esquerda é menor ou igual ao da direita. Caso seja retorna verdadeiro + 
    +1<=2 //true
+5<=3 //false
+4<='1' //false
+2<=2 // true
+
    +
    +
    +

    Lógicos

    +

    Operadores lógicos são utilizados normalmente com expressões que retornam verdadeiro ou falso, entretanto caso seja utilizado com valores não booleanos o retorno será não booleano

    +

    Esta página está em construção. Volte em breve ou ajude a completá-la!

    diff --git a/manual/obasico/oquedom.html b/manual/obasico/oquedom.html index edbc33f..f5370da 100644 --- a/manual/obasico/oquedom.html +++ b/manual/obasico/oquedom.html @@ -7,5 +7,19 @@

    O que é DOM?

    A árvore de elementos do HTML.

    +

    Sigla para Document Object Model, o DOM é a interface entre a linguagem Javascript e os objetos do HTML.

    +

    O DOM foi criado pela W3C com o objetivo de desenvolver um padrão para linguagens de script para os navegadores já que antigamente cada navegador tinha seu próprio modo de manipular os objetos, o que gerava muita incompatibilidade e obrigava os desenvolvedores a escrever uma versão de script para cada navegador.

    +

    Quando uma página web é carregada o navegador cria o DOM, a árvore de elementos do HTML.

    +

    Imagem demonstrando a árvore de elementos criada

    +

    Entendendo a árvore

    +

    Document

    +

    Quando um documento HTML é carregado no navegador da Web, torna-se um objeto de documento. O objeto de documento é o nó raiz do documento HTML e o "dono" de todos os outros nós.

    +

    Element

    +

    O objeto de elemento representa todas as tags que estão em arquivos HTML ou XML. Os objetos de elemento pode ter nós filhos de nós de texto, além de atributos.

    +

    Text

    +

    Texto que vai entre os elementos, o conteúdo das tags (<p>este é um texto</p>).

    +

    Attribute

    +

    O objeto atributo representa um atributo que pertence sempre a um elemento HTML.

    +

    Através da estrutura criada, é possível, adicionar, alterar e remover elementos e atributos da árvore DOM utilizando JavaScript.

    Esta página está em construção. Volte em breve ou ajude a completá-la!