From af5d0219c22840ddd189ed18985695c734223648 Mon Sep 17 00:00:00 2001 From: scard69 Date: Thu, 23 Mar 2017 23:54:15 -0300 Subject: [PATCH] Teste (#120) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Texto inicial para Estruturas de Controle e Laços * Ajustes no texto * Palavra corrigida Trocando de "largura" para "altura" no cálculo da altura. * Correção no texto * Typo Correction * Update index.html * Update index.html * Começando a escrever * Início da escrita de operadores aritiméticos * Mais exemplos operações básicas e inicio dos outros operadores aritiméticos * Final operadores aritiméticos * Finalização operadores aritiméticos * Abrir link externo em outra página * Metatags - Correção de html. Existem dt's e dd's, mas não existe uma dl envelopando tudo. Coloquei a dl * Remoção ultimo parágrafo e precedência de nome/operador alterada para operador/nome * Correção do Igual Estrito (===) De acordo com a [Issue](https://github.com/tableless/iniciantes/issues/74#issuecomment-157571608) aberta por [olinad0](https://github.com/olinad0) * Update font.html Adicionado font family * doctype e ortografia * Adiciona o texto inicial sobre o que é DOM --- Gemfile.lock | 5 + _includes/submenu-js.html | 1 + assets/img/arvore-dom.gif | Bin 0 -> 3051 bytes assets/javascripts/scripts.js | 8 + manual/css/box-model.html | 2 +- manual/css/float-clear.html | 2 +- manual/css/font.html | 20 +++ manual/html/estruturabasica.html | 4 +- manual/html/index.html | 2 +- manual/html/oquemetatags.html | 7 +- ...les-de-fluxo-e-controles-de-repeticao.html | 149 ++++++++++++++++++ manual/js/operadores.html | 119 +++++++++++++- manual/obasico/oquedom.html | 14 ++ 13 files changed, 324 insertions(+), 9 deletions(-) create mode 100644 assets/img/arvore-dom.gif mode change 100644 => 100755 manual/html/oquemetatags.html create mode 100644 manual/js/controles-de-fluxo-e-controles-de-repeticao.html 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 0000000000000000000000000000000000000000..d8882cf817ff477e18602349d44b47a2afcd5c46 GIT binary patch literal 3051 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 literal 0 HcmV?d00001 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:

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

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

    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!