From af6df2d79fe1c8600bee77836ab0c1771a126f6a Mon Sep 17 00:00:00 2001 From: William Bruno Date: Mon, 2 Feb 2015 23:40:58 -0200 Subject: [PATCH 01/19] =?UTF-8?q?Texto=20inicial=20para=20Estruturas=20de?= =?UTF-8?q?=20Controle=20e=20La=C3=A7os?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _includes/submenu-js.html | 1 + manual/js/estruturas-de-controle-e-lacos.html | 149 ++++++++++++++++++ 2 files changed, 150 insertions(+) create mode 100644 manual/js/estruturas-de-controle-e-lacos.html diff --git a/_includes/submenu-js.html b/_includes/submenu-js.html index b129b15..ac334ec 100644 --- a/_includes/submenu-js.html +++ b/_includes/submenu-js.html @@ -6,6 +6,7 @@

JavaScript

  • Variáveis
  • Operadores
  • Funções
    • +
  • Estruturas de controle e Laços
  • Arrays
  • Objetos
  • O que é um framework?
    • diff --git a/manual/js/estruturas-de-controle-e-lacos.html b/manual/js/estruturas-de-controle-e-lacos.html new file mode 100644 index 0000000..ee35d77 --- /dev/null +++ b/manual/js/estruturas-de-controle-e-lacos.html @@ -0,0 +1,149 @@ +--- +layout: interna +title: Estruturas de Controle e Laços +--- +{% include submenu-js.html %} + +
    +

    Declarações (Statements)

    +

    Entendendo declarações condicionais e laços de repetição

    + +

    Controle 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 é a contraparte do if. 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 uma coisa 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.

    + +
    From 48d49ef4c6f4a9950ecc9353cd370442a8f552ad Mon Sep 17 00:00:00 2001 From: William Bruno Date: Tue, 3 Feb 2015 10:12:17 -0200 Subject: [PATCH 02/19] Ajustes no texto --- _includes/submenu-js.html | 2 +- ...ntroles-de-fluxo-e-controles-de-repeticao.html} | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) rename manual/js/{estruturas-de-controle-e-lacos.html => controles-de-fluxo-e-controles-de-repeticao.html} (84%) diff --git a/_includes/submenu-js.html b/_includes/submenu-js.html index ac334ec..c044a7b 100644 --- a/_includes/submenu-js.html +++ b/_includes/submenu-js.html @@ -6,7 +6,7 @@

    JavaScript

  • Variáveis
  • Operadores
  • Funções
    • -
  • Estruturas de controle e Laços
    • +
  • Controles de Fluxo e Controles de Repetição
  • Arrays
  • Objetos
  • O que é um framework?
    • diff --git a/manual/js/estruturas-de-controle-e-lacos.html b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html similarity index 84% rename from manual/js/estruturas-de-controle-e-lacos.html rename to manual/js/controles-de-fluxo-e-controles-de-repeticao.html index ee35d77..d36264e 100644 --- a/manual/js/estruturas-de-controle-e-lacos.html +++ b/manual/js/controles-de-fluxo-e-controles-de-repeticao.html @@ -1,14 +1,14 @@ --- layout: interna -title: Estruturas de Controle e Laços +title: Controles de Fluxo e Controles de Repetição --- {% include submenu-js.html %}

    Declarações (Statements)

    -

    Entendendo declarações condicionais e laços de repetição

    +

    Entendendo Controles de Fluxo e Controles de Repetição

    -

    Controle de Fluxo

    +

    Controles de Fluxo

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

    IF

    @@ -19,7 +19,7 @@

    IF

    } -

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

    +

    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) {
@@ -37,7 +37,7 @@ 
    IF

    ELSE

    -

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

    +

    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) {
@@ -67,7 +67,7 @@ 
    SWITCH
    
 }
    -

    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.

    +

    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:

    @@ -86,7 +86,7 @@ 
    SWITCH
    
   
    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 uma coisa 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).
    
+  
    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 é:
    

From 09b10a81e0f75571d19b4d5c8144e91f2f69c06f Mon Sep 17 00:00:00 2001
From: Rafael Telles 
Date: Tue, 10 Feb 2015 11:23:46 -0200
Subject: [PATCH 03/19] Palavra corrigida
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Trocando de "largura" para "altura" no cálculo da altura.
---
 manual/css/box-model.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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.
    

From 237d8fea46b12811ab6bb2f780fb76169561dd46 Mon Sep 17 00:00:00 2001
From: Neylson O G 
Date: Sun, 8 Mar 2015 15:26:27 -0400
Subject: [PATCH 04/19] =?UTF-8?q?Corre=C3=A7=C3=A3o=20no=20texto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manual/css/float-clear.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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: 
    
 
      
   
    • left: Elemento é empurrado para baixo de elementos com float left;
      • 
   
    • right: Elemento é empurrado para baixo de elementos com float right;
      • 

From 946ad51f5f7638db6ff87b15d460258ddde03cb2 Mon Sep 17 00:00:00 2001
From: Evandro Cavalcante Santos 
Date: Tue, 11 Aug 2015 18:24:47 -0300
Subject: [PATCH 05/19] Typo Correction

---
 manual/html/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/manual/html/index.html b/manual/html/index.html
index 99138bb..2e38fbf 100644
--- a/manual/html/index.html
+++ b/manual/html/index.html
@@ -1,7 +1,9 @@
 ---
 layout: interna
 title: O HTML
+published: true
 ---
+
 {% include submenu-html.html %}
 
 
      
@@ -19,7 +21,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.

From 8c6bfaf24178ecefc7d44a165b45ec4b2280e710 Mon Sep 17 00:00:00 2001
From: Evandro Cavalcante Santos 
Date: Tue, 11 Aug 2015 18:34:43 -0300
Subject: [PATCH 06/19] Update index.html

---
 manual/html/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/manual/html/index.html b/manual/html/index.html
index 2e38fbf..52ad3e4 100644
--- a/manual/html/index.html
+++ b/manual/html/index.html
@@ -1,7 +1,6 @@
 ---
 layout: interna
 title: O HTML
-published: true
 ---
 
 {% include submenu-html.html %}

From d2cda8624469ef844db34a079c5d2f9c93008a80 Mon Sep 17 00:00:00 2001
From: Evandro Cavalcante Santos 
Date: Tue, 11 Aug 2015 18:35:00 -0300
Subject: [PATCH 07/19] Update index.html

---
 manual/html/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/manual/html/index.html b/manual/html/index.html
index 52ad3e4..f8ea35c 100644
--- a/manual/html/index.html
+++ b/manual/html/index.html
@@ -2,7 +2,6 @@
 layout: interna
 title: O HTML
 ---
-
 {% include submenu-html.html %}
 
 
      

From 0ea368a235840ced1ddf6d3eb84acc9cb95b634c Mon Sep 17 00:00:00 2001
From: diego 
Date: Tue, 18 Aug 2015 01:27:58 -0300
Subject: [PATCH 08/19] =?UTF-8?q?Come=C3=A7ando=20a=20escrever?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manual/js/operadores.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/manual/js/operadores.html b/manual/js/operadores.html
index de9ed3f..19ebacf 100644
--- a/manual/js/operadores.html
+++ b/manual/js/operadores.html
@@ -6,6 +6,8 @@
 
 
      
   
      Operadores
      
-  
      Lógicos, aritméticos, de comparação...
      
+  
      Como o nome diz operadores vão nos permitir fazer operações(mesmo!? Não me diga...)
      
+  
      Aritiméticos
      
+  
      Lógicos
      
   
      Esta página está em construção. Volte em breve ou ajude a completá-la!
      
 
      

From 8899611d69cbd1018ff545cdb839e6f19e4edf6b Mon Sep 17 00:00:00 2001
From: diego 
Date: Wed, 19 Aug 2015 00:52:02 -0300
Subject: [PATCH 09/19] =?UTF-8?q?In=C3=ADcio=20da=20escrita=20de=20operado?=
 =?UTF-8?q?res=20aritim=C3=A9ticos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manual/js/operadores.html | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/manual/js/operadores.html b/manual/js/operadores.html
index 19ebacf..174b116 100644
--- a/manual/js/operadores.html
+++ b/manual/js/operadores.html
@@ -6,8 +6,24 @@
 
 
      
   
      Operadores
      
-  
      Como o nome diz operadores vão nos permitir fazer operações(mesmo!? Não me diga...)
      
+  
      Os operadores vão nos permitir fazer operações(mesmo!? Não me diga...)
      
+
   
      Aritiméticos
      
+  
      Para as operações básicas são utilizados o seguinte, soma(+), subtração(-), multiplicação(*) e divisão(/).
+	
      +2+2 //4
+2-2 //0
+2*3 //6
+1/2 //0.5
+	
      
+  
      
+  
      
+  	
      Resto (%)
      
+  	
      Retorna o resto inteiro da divisão
      
+  
      
+
+  
      De comparaçao
      
   
      Lógicos
      
+
   
      Esta página está em construção. Volte em breve ou ajude a completá-la!
      
 
      

From 557fd5b13270958d4b40669efdb0fc07b24fbc01 Mon Sep 17 00:00:00 2001
From: diego 
Date: Wed, 19 Aug 2015 23:54:55 -0300
Subject: [PATCH 10/19] =?UTF-8?q?Mais=20exemplos=20opera=C3=A7=C3=B5es=20b?=
 =?UTF-8?q?=C3=A1sicas=20e=20inicio=20dos=20outros=20operadores=20aritim?=
 =?UTF-8?q?=C3=A9ticos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manual/js/operadores.html | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/manual/js/operadores.html b/manual/js/operadores.html
index 174b116..3f9b48d 100644
--- a/manual/js/operadores.html
+++ b/manual/js/operadores.html
@@ -6,20 +6,48 @@
 
 
      
   
      Operadores
      
-  
      Os operadores vão nos permitir fazer operações(mesmo!? Não me diga...)
      
+  
      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 básicas são utilizados o seguinte, soma(+), subtração(-), multiplicação(*) e divisão(/).
+  
      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
      
+  	
      Retorna o resto inteiro da divisão.
+		
      +5%4 //1
+4%5 //4
+		
      
+  	
      
+  	
      Incremento (++)
      
+  	
      Retorna o resto inteiro da divisão.
+		
      +5%4 //1
+4%5 //4
+		
      
+  	
      
   
      
 
   
      De comparaçao
      

From a8643c8dfd4cbf526c17be89e780b1f5a61677e8 Mon Sep 17 00:00:00 2001
From: diego 
Date: Thu, 20 Aug 2015 23:16:51 -0300
Subject: [PATCH 11/19] =?UTF-8?q?Final=20operadores=20aritim=C3=A9ticos?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 manual/js/operadores.html | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/manual/js/operadores.html b/manual/js/operadores.html
index 3f9b48d..de36444 100644
--- a/manual/js/operadores.html
+++ b/manual/js/operadores.html
@@ -42,14 +42,22 @@ 
      Aritiméticos
    Incremento (++)
    -
    Retorna o resto inteiro da divisão. +
    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. 
    -5%4 //1
-4%5 //4
+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

    Lógicos

    From dc4e80dcc0e52e5b3f1b205957a009d761de2bc4 Mon Sep 17 00:00:00 2001 From: diego Date: Sun, 23 Aug 2015 17:25:37 -0300 Subject: [PATCH 12/19] =?UTF-8?q?Finaliza=C3=A7=C3=A3o=20operadores=20arit?= =?UTF-8?q?im=C3=A9ticos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/js/operadores.html | 63 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/manual/js/operadores.html b/manual/js/operadores.html index de36444..2093f0e 100644 --- a/manual/js/operadores.html +++ b/manual/js/operadores.html @@ -59,6 +59,69 @@

    Aritiméticos

    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

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

    From e818509ae77fa1c968a5617cea748b3ebcef4480 Mon Sep 17 00:00:00 2001 From: thiago_almeida Date: Tue, 25 Aug 2015 18:29:15 -0300 Subject: [PATCH 13/19] =?UTF-8?q?Abrir=20link=20externo=20em=20outra=20p?= =?UTF-8?q?=C3=A1gina?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Gemfile.lock | 5 +++++ assets/javascripts/scripts.js | 8 ++++++++ 2 files changed, 13 insertions(+) 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/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'; + } + }); }); From 04433dc8914d21e0d2d8b6588898094545b1fdec Mon Sep 17 00:00:00 2001 From: Andrea Zambrana Date: Fri, 28 Aug 2015 17:52:47 +0000 Subject: [PATCH 14/19] =?UTF-8?q?Metatags=20-=20Corre=C3=A7=C3=A3o=20de=20?= =?UTF-8?q?html.=20Existem=20dt's=20e=20dd's,=20mas=20n=C3=A3o=20existe=20?= =?UTF-8?q?uma=20dl=20envelopando=20tudo.=20Coloquei=20a=20dl?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/html/oquemetatags.html | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) mode change 100644 => 100755 manual/html/oquemetatags.html 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!

    From 9a7cef74307bf60eabd225ab8946338e23fddcca Mon Sep 17 00:00:00 2001 From: diego Date: Fri, 18 Sep 2015 00:07:15 -0300 Subject: [PATCH 15/19] =?UTF-8?q?Remo=C3=A7=C3=A3o=20ultimo=20par=C3=A1gra?= =?UTF-8?q?fo=20e=20preced=C3=AAncia=20de=20nome/operador=20alterada=20par?= =?UTF-8?q?a=20operador/nome?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manual/js/operadores.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/manual/js/operadores.html b/manual/js/operadores.html index 2093f0e..2a4b432 100644 --- a/manual/js/operadores.html +++ b/manual/js/operadores.html @@ -121,8 +121,8 @@

    De comparaçao

    -

    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!

    From 05bdc766180e42161b9fdcb854a846b5d0780065 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafael=20Fran=C3=A7a?= Date: Wed, 18 Nov 2015 08:05:24 -0200 Subject: [PATCH 16/19] =?UTF-8?q?Corre=C3=A7=C3=A3o=20do=20Igual=20Estrito?= =?UTF-8?q?=20(=3D=3D=3D)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit De acordo com a [Issue](https://github.com/tableless/iniciantes/issues/74#issuecomment-157571608) aberta por [olinad0](https://github.com/olinad0) --- manual/js/operadores.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manual/js/operadores.html b/manual/js/operadores.html index 2a4b432..b0b330f 100644 --- a/manual/js/operadores.html +++ b/manual/js/operadores.html @@ -75,8 +75,8 @@

    De comparaçao

    Igual estrito (===)
    Esse operador é mais severo, só retorna verdadeiro se o valor e o tipo comparados forem iguais. 
    -3=='3' //false
-3==3 //true
+3==='3' //false
+3===3 //true
    Não igual estrito (!==)
    From 106424c35f9ed25e766803734313f9ad5f0bd02a Mon Sep 17 00:00:00 2001 From: warlockzeo Date: Wed, 23 Dec 2015 10:32:49 -0300 Subject: [PATCH 17/19] Update font.html Adicionado font family --- manual/css/font.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/manual/css/font.html b/manual/css/font.html index 67e1b23..cadd5ae 100644 --- a/manual/css/font.html +++ b/manual/css/font.html @@ -7,5 +7,25 @@

    Propriedade Font

    Formatando fonts de texto

    +

    A font trata das caracteristicas de todos os textos do site. Ela pode ser aplicada diretamente ao elemento body e por consequência todos os elementos filhos herdarão esta propriedade.

    +

    As propriedades da font são:

    +
    +
    family
    +
    +

    Determina a familia da font a ser usada. Existem dois tipos básicos: as famílias e as famílias genéricas

    +

    As famílias genéricas podem ser três:

    +
      +
    • serif: Font com serifa.
      • +
    • sans-serif: Font sem serifa.
      • +
    • monoespace: Font com a mesma largura em todos os caracteres.
      • +
    +

    Serifa nada mais é do que aquelas pontinhas que tem em algumas fontes tipo Times, ou seja, Times é uma font com serifa e Arial é uma font sem serifa.

    + 
    +      div {
+        font-family: "Times New Roman", Times, serif;;
+      }
+
    +

    Entre aspas vai o nome da font, seguido da familia (Times) e depois da família genérica (serif).

    +

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

    From 8893d28dca2382dbe96aeb09d70a3c0aad13353b Mon Sep 17 00:00:00 2001 From: Thiago Alvernaz Date: Sun, 24 Jan 2016 18:38:31 -0200 Subject: [PATCH 18/19] doctype e ortografia --- manual/html/estruturabasica.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manual/html/estruturabasica.html b/manual/html/estruturabasica.html index 78de46e..0ddf10e 100644 --- a/manual/html/estruturabasica.html +++ b/manual/html/estruturabasica.html @@ -30,10 +30,10 @@

    Iniciando o código básico de HTML

    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>.

    From 161180e0872e1daa6a2c744c471fa0b2262fea0f Mon Sep 17 00:00:00 2001 From: amanda Date: Tue, 9 Feb 2016 12:42:14 -0200 Subject: [PATCH 19/19] =?UTF-8?q?Adiciona=20o=20texto=20inicial=20sobre=20?= =?UTF-8?q?o=20que=20=C3=A9=20DOM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/img/arvore-dom.gif | Bin 0 -> 3051 bytes manual/obasico/oquedom.html | 14 ++++++++++++++ 2 files changed, 14 insertions(+) create mode 100644 assets/img/arvore-dom.gif diff --git a/assets/img/arvore-dom.gif b/assets/img/arvore-dom.gif new file mode 100644 index 0000000000000000000000000000000000000000..d8882cf817ff477e18602349d44b47a2afcd5c46 GIT binary patch literal 3051 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 literal 0 HcmV?d00001 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!