From 1f5e64f1b1b19ad2b269b669a6554e3ac200e473 Mon Sep 17 00:00:00 2001 From: "Jackson F. de A. Mafra" Date: Sat, 2 Feb 2019 05:38:49 -0200 Subject: [PATCH] Update Data (#1) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Adicionado texto parcial para meta tags. * Adicionado mais conteúdo. * Adicionado mais conteúdo. * Adiciona uma primeira versao de texto para a propriedade CSS display * Adiciona uma primera versao para o texto sobre seletores coplexos * Adiciona uma primeira versao de texto para jQuery * Adiciona complemento nos textos de seletores complexos e jQuery * Corrige boxes de exemplo do capitulo sobre jQuery * Fix typo orietação -> orientação * Alterei html de alguns c cedilhas e outros para testes. Parabéns pela iniciativa * Corrigindo abertura das tags figcaption * Aplicando estilização para Tag h5 * O que são Tags, Elementos e Atributos * Fix erro tag * Fix erro tag * Como funciona o metodo push em array no javascript * Removendo/recortando elementos de um array em javascript * Quantidade de elementos do array em javascript * Update arrays.html Adicionando var em novoGaveteiro para manter o padrão. * Update arrays.html Melhorando o contexto no metodo push * Melhorando a descrição dos exemplos * Introducao, explicando o que sao funcoes * Exemplo de funcao com parametros e retorno * Texto inicial para Estruturas de Controle e Laços * Ajustes no texto * 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 * Corrigindo tag apontamento do Jquery (#122) * Teste (#120) (#127) * 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 * add: update gem version and solve deprecation warnings (#128) * add: update gem version and solve deprecation warnings * refactor: use base tag instead of change hrefs * remove: base tag * Adicionando alguns parágrafos na parte de frameworks --- Gemfile | 2 +- Gemfile.lock | 244 ++++++++++++++---- _config.yml | 17 +- _includes/submenu-js.html | 1 + assets/img/arvore-dom.gif | Bin 0 -> 3051 bytes assets/javascripts/scripts.js | 8 + assets/stylesheets/style.css | 1 + index.html | 14 +- manual/css/box-model.html | 2 +- manual/css/display.html | 28 +- manual/css/float-clear.html | 8 +- manual/css/font.html | 20 ++ manual/css/seletores-complexos.html | 61 ++++- manual/html/estruturabasica.html | 4 +- manual/html/index.html | 2 +- manual/html/oquemetatags.html | 14 + manual/html/oquetags.html | 86 ++++-- manual/js/arrays.html | 46 ++++ ...les-de-fluxo-e-controles-de-repeticao.html | 149 +++++++++++ manual/js/funcoes.html | 82 +++++- manual/js/index.html | 2 +- manual/js/o-que-framework.html | 11 +- manual/js/o-que-jquery.html | 34 +++ manual/js/operadores.html | 119 ++++++++- manual/obasico/oquedom.html | 14 + 25 files changed, 864 insertions(+), 105 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 b/Gemfile index 97355ea..f1b369d 100644 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,3 @@ source 'https://rubygems.org' -gem 'github-pages' +gem 'github-pages', group: :jekyll_plugins diff --git a/Gemfile.lock b/Gemfile.lock index e907ef8..b0c33b6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,62 +1,204 @@ GEM remote: https://rubygems.org/ specs: - RedCloth (4.2.9) - blankslate (2.1.2.4) - classifier (1.3.4) - fast-stemmer (>= 1.0.0) - colorator (0.1) - commander (4.1.6) - highline (~> 1.6.11) - fast-stemmer (1.0.2) - ffi (1.9.3-x64-mingw32) - github-pages (15) - RedCloth (= 4.2.9) - jekyll (= 1.4.3) - kramdown (= 1.3.1) - liquid (= 2.5.5) - maruku (= 0.7.0) - rdiscount (= 2.1.7) - redcarpet (= 2.3.0) - highline (1.6.21) - jekyll (1.4.3) - classifier (~> 1.3) - colorator (~> 0.1) - commander (~> 4.1.3) - liquid (~> 2.5.5) - listen (~> 1.3) - maruku (~> 0.7.0) - pygments.rb (~> 0.5.0) - redcarpet (~> 2.3.0) - safe_yaml (~> 0.9.7) - toml (~> 0.1.0) - kramdown (1.3.1) - liquid (2.5.5) - listen (1.3.1) + activesupport (4.2.7) + i18n (~> 0.7) + json (~> 1.7, >= 1.7.7) + minitest (~> 5.1) + thread_safe (~> 0.3, >= 0.3.4) + tzinfo (~> 1.1) + addressable (2.5.0) + public_suffix (~> 2.0, >= 2.0.2) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.12.2) + colorator (1.1.0) + ethon (0.10.1) + ffi (>= 1.3.0) + execjs (2.7.0) + faraday (0.11.0) + multipart-post (>= 1.2, < 3) + ffi (1.9.18) + ffi (1.9.18-x64-mingw32) + forwardable-extended (2.6.0) + gemoji (2.1.0) + github-pages (113) + activesupport (= 4.2.7) + github-pages-health-check (= 1.3.0) + jekyll (= 3.3.1) + jekyll-avatar (= 0.4.2) + jekyll-coffeescript (= 1.0.1) + jekyll-default-layout (= 0.1.4) + jekyll-feed (= 0.8.0) + jekyll-gist (= 1.4.0) + jekyll-github-metadata (= 2.3.0) + jekyll-mentions (= 1.2.0) + jekyll-optional-front-matter (= 0.1.2) + jekyll-paginate (= 1.1.0) + jekyll-readme-index (= 0.0.3) + jekyll-redirect-from (= 0.11.0) + jekyll-relative-links (= 0.2.1) + jekyll-sass-converter (= 1.3.0) + jekyll-seo-tag (= 2.1.0) + jekyll-sitemap (= 0.12.0) + jekyll-swiss (= 0.4.0) + jekyll-theme-architect (= 0.0.3) + jekyll-theme-cayman (= 0.0.3) + jekyll-theme-dinky (= 0.0.3) + jekyll-theme-hacker (= 0.0.3) + jekyll-theme-leap-day (= 0.0.3) + jekyll-theme-merlot (= 0.0.3) + jekyll-theme-midnight (= 0.0.3) + jekyll-theme-minimal (= 0.0.3) + jekyll-theme-modernist (= 0.0.3) + jekyll-theme-primer (= 0.1.5) + jekyll-theme-slate (= 0.0.3) + jekyll-theme-tactile (= 0.0.3) + jekyll-theme-time-machine (= 0.0.3) + jekyll-titles-from-headings (= 0.1.3) + jemoji (= 0.7.0) + kramdown (= 1.11.1) + liquid (= 3.0.6) + listen (= 3.0.6) + mercenary (~> 0.3) + minima (= 2.0.0) + rouge (= 1.11.1) + terminal-table (~> 1.4) + github-pages-health-check (1.3.0) + addressable (~> 2.3) + net-dns (~> 0.8) + octokit (~> 4.0) + public_suffix (~> 2.0) + typhoeus (~> 0.7) + html-pipeline (2.5.0) + activesupport (>= 2) + nokogiri (>= 1.4) + i18n (0.8.1) + jekyll (3.3.1) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 3.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-avatar (0.4.2) + jekyll (~> 3.0) + jekyll-coffeescript (1.0.1) + coffee-script (~> 2.2) + jekyll-default-layout (0.1.4) + jekyll (~> 3.0) + jekyll-feed (0.8.0) + jekyll (~> 3.3) + jekyll-gist (1.4.0) + octokit (~> 4.2) + jekyll-github-metadata (2.3.0) + jekyll (~> 3.1) + octokit (~> 4.0, != 4.4.0) + jekyll-mentions (1.2.0) + activesupport (~> 4.0) + html-pipeline (~> 2.3) + jekyll (~> 3.0) + jekyll-optional-front-matter (0.1.2) + jekyll (~> 3.0) + jekyll-paginate (1.1.0) + jekyll-readme-index (0.0.3) + jekyll (~> 3.0) + jekyll-redirect-from (0.11.0) + jekyll (>= 2.0) + jekyll-relative-links (0.2.1) + jekyll (~> 3.3) + jekyll-sass-converter (1.3.0) + sass (~> 3.2) + jekyll-seo-tag (2.1.0) + jekyll (~> 3.3) + jekyll-sitemap (0.12.0) + jekyll (~> 3.3) + jekyll-swiss (0.4.0) + jekyll-theme-architect (0.0.3) + jekyll (~> 3.3) + jekyll-theme-cayman (0.0.3) + jekyll (~> 3.3) + jekyll-theme-dinky (0.0.3) + jekyll (~> 3.3) + jekyll-theme-hacker (0.0.3) + jekyll (~> 3.3) + jekyll-theme-leap-day (0.0.3) + jekyll (~> 3.3) + jekyll-theme-merlot (0.0.3) + jekyll (~> 3.3) + jekyll-theme-midnight (0.0.3) + jekyll (~> 3.3) + jekyll-theme-minimal (0.0.3) + jekyll (~> 3.3) + jekyll-theme-modernist (0.0.3) + jekyll (~> 3.3) + jekyll-theme-primer (0.1.5) + jekyll (~> 3.3) + jekyll-theme-slate (0.0.3) + jekyll (~> 3.3) + jekyll-theme-tactile (0.0.3) + jekyll (~> 3.3) + jekyll-theme-time-machine (0.0.3) + jekyll (~> 3.3) + jekyll-titles-from-headings (0.1.3) + jekyll (~> 3.3) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + jemoji (0.7.0) + activesupport (~> 4.0) + gemoji (~> 2.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0) + json (1.8.6) + kramdown (1.11.1) + liquid (3.0.6) + listen (3.0.6) rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - rb-kqueue (>= 0.2) - maruku (0.7.0) - parslet (1.5.0) - blankslate (~> 2.0) - posix-spawn (0.3.8) - pygments.rb (0.5.4) - posix-spawn (~> 0.3.6) - yajl-ruby (~> 1.1.0) - rb-fsevent (0.9.4) - rb-inotify (0.9.3) + rb-inotify (>= 0.9.7) + mercenary (0.3.6) + mini_portile (0.6.2) + minima (2.0.0) + minitest (5.10.1) + multipart-post (2.0.0) + net-dns (0.8.0) + nokogiri (1.6.6.4) + mini_portile (~> 0.6.0) + nokogiri (1.6.6.4-x64-mingw32) + mini_portile (~> 0.6.0) + octokit (4.6.2) + sawyer (~> 0.8.0, >= 0.5.3) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.5) + rb-fsevent (0.9.8) + rb-inotify (0.9.8) ffi (>= 0.5.0) - rb-kqueue (0.2.2) - ffi (>= 0.5.0) - rdiscount (2.1.7) - redcarpet (2.3.0) - safe_yaml (0.9.7) - toml (0.1.1) - parslet (~> 1.5.0) - yajl-ruby (1.1.0) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.4.23) + sawyer (0.8.1) + addressable (>= 2.3.5, < 2.6) + faraday (~> 0.8, < 1.0) + terminal-table (1.7.3) + unicode-display_width (~> 1.1.1) + thread_safe (0.3.6) + typhoeus (0.8.0) + ethon (>= 0.8.0) + tzinfo (1.2.2) + thread_safe (~> 0.1) + unicode-display_width (1.1.3) PLATFORMS + ruby x64-mingw32 DEPENDENCIES github-pages + +BUNDLED WITH + 1.16.6 diff --git a/_config.yml b/_config.yml index ef7c62d..4b8aa24 100644 --- a/_config.yml +++ b/_config.yml @@ -1,7 +1,7 @@ source: . destination: ./_site -plugins: ./_plugins -layouts: ./_layouts +plugins_dir: ./_plugins +layouts_dir: ./_layouts include: ['.htaccess'] exclude: [] keep_files: ['.git','.svn'] @@ -10,14 +10,12 @@ timezone: nil future: true show_drafts: nil limit_posts: 0 -pygments: true - -relative_permalinks: true +highlighter: pygments permalink: date paginate_path: 'page:num' -markdown: maruku +markdown: kramdown markdown_ext: markdown,mkd,mkdn,md textile_ext: textile @@ -31,9 +29,8 @@ port: 4000 baseurl: /iniciantes url: http://localhost:4000 lsi: false -pygments: true -maruku: +kramdown: use_tex: false use_divs: false png_engine: blahtex @@ -52,7 +49,7 @@ kramdown: entity_output: as_char toc_levels: 1..6 smart_quotes: lsquo,rsquo,ldquo,rdquo - use_coderay: false + enable_coderay: false coderay: coderay_wrap: div @@ -63,4 +60,4 @@ kramdown: coderay_css: style redcloth: - hard_breaks: true \ No newline at end of file + hard_breaks: true 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 zcmV?+_5kIU!uy8VvN>-X)xe+aM^_(xcnGnj^GxX9?D zc=p&RIXMzpW=WZ;iGexRxd|HD@EJxbdMaxArHa~0$=U_$I%_CO@3~kO>TVa{ay%OjGjL4 zevUt=K8~-^4iE5(JbwH5vAdTJS3iBa0y5bILF=Z)b&75tsHq9c!mL;{JREd+zzbQL&`V7)DO3Y=FLnrbN);gwCH%FOZV|?I<*ees#`O4 z4OL>F$(q95`_uH z2qAMQUe%yXBvuq*kCw>zVTJYG2vv?Po)n~zN|NN^g`*G|m67bcL}er${s-htFd0M* zhENvy-j_w4*aDei#uDb4KAE`!n`&lJRy%9C`KCZB{5T|ib>=}I(os?(ITLjhePAi5P9#O3Nv`T> zQj8yIEw zE;w+C^nMpv!R{%%*ue-x#xQshujFtH6N7QFbplsx@x~lWy*>57-Sq~5bLj@IQ{x_zaVs?S&W&%P&`Yw#8k>NW2h77vm0 z9Z{Z$^ahhYvsT%+M*DfzlhM6-(f2*|wiCV{pVv}z6JA> z&nrV!Y7IbQ#V>a zHm~=9#i8+=CL0_Ktog;9$uFHfvzgysh)E!tD2!Ts(mYA&%6BGkflnmoGvUcjd4_Xy zA3P%x^XZRUnSwnjyXOjh7|MqtbpM9RG^j-F*|_BiC>sYn8;qED(1BL&qd+Uv39s=x zkD?7y7oBBD0|e8u@h2oJ1!+q$n$di?kfV^=64z{+Q(RK?cCaD{>>$cFf7VAv3&ETP z6^c})N^Pi5#hp5iD!O%cGp9_ns!>6=6Nc&&q<14?jRZPT{RwW0W)0mH9h%Uzm9?v& zd#gLg8lu-#wXPu*YU@mQImf|scvMZRR`KT6CNo93>|4e?`ns z9*FhCEEErn>!#v7nK!or9&wLjoZL!k7|3p&0f4{A)NbyW$1W}~i2J%NM?5(_CXER$ zVhX|*&zC+v{pd^^`eR_3&5R>Mu@X_bD<_sS%zh)TVzbQTEicNcY{jRX=ZsS;61mB3 zuEwciwPrq38MbT%wEsm}i^*W|FrI?$^L6!n=pYYmh|a~x`-Ti<#Yxk|k7YBpVi!3( zyOhS3j&gj>H)Twh(VXo|^(-k}XG?2&)PYuXK^cALVZho&Wp?#634LoaM>^P1#4Tds z{Api@*Vf*(Yom=vTx5&-y0(gT71J_fUH=EZSQd6f5gkz3ad+C_)(uPr2r@JGPm3>N zqp}rw;|{BP74fFGs(t)yEF2jP``&P_@%`@!&-=v#cQSLX3C({Z9F+=RI3FACa6B3z znX{lcr%xlyS02+>7C*K4kZDYf7jxs1=r}4&-f@$k0_7xE70X2q@|H6~<*5jHE=LaY zNzgnqHrIK^Z~qQ-j`zIeKlgdgeL3`C;yma?U%Jtm?((G1yy#7bI;dW5^-E#>=|Yz| zP$GWHfPg*hR35v;?=5gvy0P3D4tU!gvvx_RJ>O+#EUkNOtvPR++F+);TaM=GZ&!5I zcNenSNsV?~7hds;M||Vs*IqGtys@;vHUhI0YQnQ!o{`V|urIE*yH$G6(pt0V2QT>G zQtkA_PPX3I+mulq3j*+b|A(c^sdi6ssX?1*~6X2z|S%6ACI%*x1RB;PrmnV z-}llJ|M|QpE%N)>An21D_0A`e?2g|H%S+cu(Z7DOSzrCjZXVTJOde2~U-??w*CzU9 zf8a+KdH?$NDe>|?yf^u8Z}+!g&k|w2M{okzUydvq-Ne0T*fyJyQ6^I@Pd%WX(ecV zd>0`%s0t=1A1s(^=G9a3C4(&HY|_^`B7s4^rzxURZ%AlHI5>HHhJxJJfi8%INp@wD z*KKij3{dDlZZjfPhC83Pd@ePHxk6K8G-i_bWoQb{zYn57@b$=$9Sw^I3 zcEXp0VfbmG*fdOZX;UUZ268%>b#8#;d7o%Ms7OP(qj~XHizBg#W_5|I2sf^Hi?2vs zX}Eq>C}%Q=hsKzK;n#b?S0V)wh?rPW%Gim#Sd0Y+ghf_r-1dggsD#dDjmuRjf>@2g zCMo~ZMct-8@8*CsuyfS-Try^k@^}L+2!A*bkM78T=TwjHXcYXILwgv3JeYy6W_EWZ tb_uDFb;pn^GfELDkrPRg6={(diIEwpksHa89qExD36dcxl1xwl06S*t=Vkx^ 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/assets/stylesheets/style.css b/assets/stylesheets/style.css index 38a6e5e..0ab99d3 100644 --- a/assets/stylesheets/style.css +++ b/assets/stylesheets/style.css @@ -265,6 +265,7 @@ article h1, article h2, article h3, article h4, +article h5, article li { padding-left: 20px; padding-right: 20px; diff --git a/index.html b/index.html index 2d38470..f77c055 100644 --- a/index.html +++ b/index.html @@ -5,27 +5,27 @@

    Comece aqui

    -

    Informações básicas e importantíssimas para você não se perder no caminho.

    - Continue lendo +

    Informações básicas e importantíssimas para você não se perder no caminho.

    + Continue lendo
    -

    O que é HTML?

    +

    O que é HTML?

    Saiba como funciona o HTML e quais as suas principais tags.

    - Continue lendo + Continue lendo

    O que é CSS?

    Entenda como funciona a linguagem visual que formata o layout de sites.

    - Continue lendo + Continue lendo

    O que é JavaScript?

    Como funciona o JavaScript, linguagem usada para controlar elementos e muito mais.

    - Continue lendo + Continue lendo

    Sobre este guia

    -

    Este guia foi criado pela comunidade brasileira de desenvolvimento web para ajudar iniciantes da área que queiram encontrar conteúdo básico de qualidade e assim ingressar na área com mais confiança e conhecimento. Aproveite e divulgue o máximo possível!

    +

    Este guia foi criado pela comunidade brasileira de desenvolvimento web para ajudar iniciantes da área que queiram encontrar conteúdo básico de qualidade e assim ingressar na área com mais confiança e conhecimento. Aproveite e divulgue o máximo possível!

    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/display.html b/manual/css/display.html index 8c15b60..3f4b35e 100644 --- a/manual/css/display.html +++ b/manual/css/display.html @@ -7,5 +7,29 @@

    Propriedade Display

    Entendendo e manipulando o fluxo dos elementos

    -

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

    -
    + +

    Entender a propriedade display é fundamental para que possamos compreender o fluxo e estruturação de uma página web. Todos os elementos por padrão já possuem um valor para a propriedade e, geralmente estas são block ou inline.

    + +

    Essa propriedade CSS especifica o tipo de renderização do elemento na página. Uma definição que pode auxiliar no entendimento da propriedade é a do Chris Coyier, bastante reconhecido no mundo do CSS, que é a seguinte:

    + +

    Todo elemento em uma página web é renderizado como uma caixa retangular. A propriedade display de CSS vai determinar como essa caixa vai ser comportar

    + +

    Os possíveis tipos

    + +

    Block

    +

    O elemento se comporta como um bloco. Ocupando praticamente toda a largura disponível na página. Elementos de parágrafo (p) e título(h1, h2, ...) possuem esse comportamento por padrão.

    + +

    Inline

    +

    O elemento se comporta como um elemento em linha. Exemplos de elemento que se comportam assim são por exemplo as tags span e a.

    + +

    None

    +

    Ao contrários dos valores atuais, o valor none permite, informalmente dizendo, que você desative a propriedade do elemento. Quando você utiliza essa propriedade, o elemento e todos seus elementos filhos não são renderizados na página.

    + +

    Uma coisa importante a ressaltar que a propriedade display: none não é a mesma coisa da propriedade visibility: hidden. Nessa última o elemento não aparece na tela mas é renderizado na página, ou seja, vemos um espaço vazio no lugar do elemento; já a propriedade display: none não renderiza o elemento e, o espaço que era ocupado por ele, é ocupado pelo elemento seguinte no fluxo do documento.

    + +

    Table

    +

    O elemento se comporta como uma tabela.

    + +

    Inline-block

    +

    Semelhante ao inline, no entanto, ao definirmos inline-block em um elemento, conseguimos definir as propriedades de largura e altura para ele. Coisa que não conseguimos em um elemento com display: inline.

    + \ No newline at end of file diff --git a/manual/css/float-clear.html b/manual/css/float-clear.html index 48a4c65..308fbf2 100644 --- a/manual/css/float-clear.html +++ b/manual/css/float-clear.html @@ -15,7 +15,7 @@

    Estruturando e flutuando elementos

    <div> <figure> <img src="img/imagem.jpg" alt="Imagem Xis"> - <Legenda da imagem"</figcaption> + <figcaption>Legenda da imagem"</figcaption> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p> @@ -40,7 +40,7 @@

    Estruturando e flutuando elementos

    margin: 0 0 10px 10px; } -

    Aqui mudamos a direção que a tag figude vai flutuar e alteramos a margem do lado direito para o lado esquerdo. E teríamos um resultado assim:

    +

    Aqui mudamos a direção que a tag figure vai flutuar e alteramos a margem do lado direito para o lado esquerdo. E teríamos um resultado assim:

    Representação simulando um layout clássico de revistas e jornais com uma foto do lado direito e texto ao redor dela

    A propriedade clear

    Continuando com o nosso exemplo anterior, imagine que agora precisássemos inserir um novo título com mais parágrafos abaixo da imagem. Algo parecido com isso: (para fins de exemplo, diminui o conteúdo textual ao redor da imagem)

    @@ -50,7 +50,7 @@

    A propriedade clear

    <div> <figure> <img src="img/imagem.jpg" alt="Imagem Xis"> - <Legenda da imagem"</figcaption> + <figcaption>Legenda da imagem"</figcaption> </figure> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, fugit, ipsam reprehenderit porro aperiam esse quibusdam ratione excepturi amet est.</p> @@ -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/css/seletores-complexos.html b/manual/css/seletores-complexos.html index 54481ba..d915727 100644 --- a/manual/css/seletores-complexos.html +++ b/manual/css/seletores-complexos.html @@ -7,5 +7,62 @@

      Seletores complexos

      Formatando elementos fora do fluxo normal do DOM

      -

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

      -
      + +

      Selecionando diferentes elementos de um formulário

      + +

      Tipos de Inputs

      +
      +input[type="text"] { ... }
+input[type="email"] { ... }
+
      +

      No exemplo acima, selecionamos respectivamente elementos input do tipo text e email.

      + +

      Input checkbox

      +
      input[type="checkbox"]:checked { ... }
      +

      A própria declaração é bem intuitiva. Seleciona elementos do tipo checkobx que estiverem selecionado (ou ticados).

      + +

      Input inativo

      +
      input:disabled { ... }
      +

      Acima, selecionamos um input que esteja com o atributo disabled, estando assim inativo.

      + +

      Selecionamento elementos pela extensão do arquivo

      + +
      :lang(en) .flag { ... }
      + +

      No exemplo, selecionamos o elemento com a classe .flag que é filho de uma página que possui o valor en.

      + +
      +a[href$=".jpg"] { ... }
+a[href$=".pdf"] { ... }
+
      +

      Imagine uma lista de arquivos e que você precisa adicionar um ícone ou aplicar um estilo diferente de acordo com o tipo de arquivo em cada link. Com os seletores acima você consegue sem a necessidade de adicionar uma classe para cada um.

      + +

      Selecionando elementos pelo target

      +
      #element-id:target { ... }
      +

      Elementos com âncora linkam o usuário a outras partes da página. Então o elemento acima seria selecionado quando seu id aparecesse na URL do usuário. Geralmente depois de um clique.

      + +

      Selecionando elementos pelo atributo

      +

      Existem seis maneiras diferentes de selecionarmos elementos por seus atributos:

      +
      [att=valor]
      +

      O atributo tem exatamente o mesmo valor especificado.

      + +
      [att~=valor]
      +

      O valor do atributo precisar ser uma lista de valores com espaço. Por exemplo class="box box-color box-sidebar", e um dos valores precisa ser exatamente igual ao valor que foi especificado.

      + +
      [att|=valor]
      +

      O atributo possui exatamente o mesmo valor que foi especificado ou é imediatamente seguindo de um traço. Dessa maneira, uma classe válida seria valor-X.

      + +
      [att^=valor]
      +

      O valor do atributo começa com o valor que foi especificado na regra.

      + +
      [att$=valor]
      +

      O valor do atributo termina com o valor que foi especificado na regra.

      + +
      [att*=valor]
      +

      O valor do atributo contém o valor do atributo especificado na regra.

      + +

      Selecionando elementos pela negação

      +
      div:not(.estilo) { ... }
      +

      Acima, selecionamos todas as divs do documento, exceto as que possuem a classe .estilo.

      + + \ No newline at end of file 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 c2a8690..3840ec6 --- a/manual/html/oquemetatags.html +++ b/manual/html/oquemetatags.html @@ -7,5 +7,19 @@

    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

    +
    +
    Author
    +

    O nome do autor da página.

    +
    Copyright
    +

    Direito autoral da página.

    +
    Description
    +

    Descrição da página.

    +
    Expires
    +

    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/html/oquetags.html b/manual/html/oquetags.html index c17282f..7cc0687 100644 --- a/manual/html/oquetags.html +++ b/manual/html/oquetags.html @@ -5,27 +5,53 @@ {% include submenu-html.html %}
    -

    O que são Tags, atributos e elementos?

    -

    Conhecendo as tags principais e quais seus atributos

    - -

    O que são tags?

    -

    Cada elemento é representado por uma tag. Cada tag tem seus atributos, e cada atributo tem sua especificação para valores.

    -

    Existem dois tipos de tags, as tags que necessitam de fechamento e as tags que não necessitam de fechamento.

    -

    Para as tags que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ), seguido de barra ( / ), nome do elemento e o sinal de maior ( > ).

    -
    -<!-- Exemplo de elemento que necessita de fechamento -->
-<p>A tag do elemento de parágrafo necessita de fechamento.</p>
-
    +

    O que são Tags, Elementos e Atributos?

    +

    Conhecendo as principais Tags, Elementos e seus Atributos

    + +

    O que são Tags?

    +

    Tags são o conjunto de caracteres que formam um elemento, ou seja, quando nos referenciamos à Tag "p" estamos falando disso: <p>

    +

    Existem dois tipos de Tags, as que necessitam de fechamento e as que não necessitam de fechamento.

    +

    Para as que necessitam de fechamento, utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ) para abertura. Para fechamento, utilizamos o sinal de menor ( < ), seguido de barra ( / ), nome do elemento e o sinal de maior ( > ).

    + + 
    +    <!-- Exemplo de elemento que necessita de fechamento -->
+    <p>A tag do elemento de parágrafo necessita de fechamento.</p>
+
    +

    Os elementos que não necessitam de fechamento, também conhecidos como elementos vazios, somente utilizamos o sinal de menor ( < ), seguido do nome do elemento e o sinal de maior ( > ).

    -
    -<!-- Exemplo de elemento vazio -->
-Texto utilizando<br>
-quebra de linha
-
    + 
    +    <!-- Exemplo de elemento vazio -->
+    Texto utilizando<br>
+    quebra de linha
+
    + +

    O que são Elementos?

    +

    Elementos são formados a partir de Tags e entre as Tags é que está o conteúdo do Elemento.

    +

    Se quisermos exibir um parágrafo em um site utilizamos a Tag <p> que semanticamente quer dizer que o conteúdo que se espera nesse Elemento é um parágrafo.

    + +

    Alguns exemplos:

    + + 
    +    <!-- A Tag <label> define que o conteúdo do Elemento é uma label (rótulo)  -->
+    <label>Informe o seu nome</label>
+
    + + 
    +    <!-- A Tag <address> define que o conteúdo do Elemento é um endereço (endereços físicos à virtuais)  -->
+    <address>
+      Este guia é uma iniciativa da comunidade e do Tableless <a href="http://tableless.com.br/contato">www.tableless.com.br</a>
+    </address>
+
    + +

    Não confunda Tags com Elementos

    +

    As Tags servem para marcar onde começam e terminam os Elementos. Já os Elementos são uma parte conceitual/semântica que têm um começo e fim determinados.

    +

    Parece uma diferença boba, mas mantenha ela sempre em mente e isso vai fazer toda a diferença no seu entendimento de HTML.

    + +

    O que são Atributos?

    +

    Atributos são informações que passamos na Tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as Tags) e específicos (que são direcionados para cada Tag, através de especificação).

    +

    Os Atributos possuem nome e um valor, existem Atributos que você vai usar praticamente sempre e existem outros que serão mais raros.

    -

    E atributos?

    -

    Atributos são informações que passamos na tag para que ela se comporte da maneira esperada. Existem atributos globais (que funcionam em todas as tags) e específicos (que são direcionados para cada tag, através de especificação).

    Atributos globais

    Seguem alguns atributos globais importantes e suas descrições simplificadas:

    @@ -56,5 +82,27 @@

    Atributos globais

    title

    Representa um auxílio ao elemento. Semelhante a dica do elemento.

    -

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

    +

    Como você pôde ver, a sintaxe de Atributos é muito simples, porém, por mais simples que seja é sempre bom ter em mente boas práticas para que se tenha qualidade e fácil manutenção em seu HTML.

    +

    Existem Atributos em que os valores não precisam ser passados entre aspas, mas manter um padrão ajuda você e ajuda quem quer que seja que no futuro tenha que trabalhar com o seu HTML. Portanto, não é uma regra mas uma boa prática você envolver os valores dos Atributos entre aspas.

    + + 
    +    <!-- Isso funciona, mas não é recomendável -->
+    <a href="http://tableless.com.br" target=_blank>www.tableless.com.br</a>
+
+    <!-- Isso funciona e é recomendável -->
+    <a href="http://tableless.com.br" target="_blank">www.tableless.com.br</a>
+
    + +

    Na prática

    +

    Agora que você entendeu separadamente o papel das Tags, Elementos e Atributos, vamos ver um exemplo prático:

    + + 
    +    <!-- A Tag <img> define que o conteúdo do Elemento é uma imagem e os atributos que utilizamos são src e alt -->
+    <img src="logo.png" alt="HTML 5 Logo" />
+
    + +
    Analisando o exemplo:
    +

    No exemplo acima definimos o caminho onde está a imagem com o Atributo src e utilizamos o Atributo alt para descrever que imagem é essa (a utilização do atributo alt é altamente recomendado, pois, mesmo que a imagem não seja carregada por qualquer motivo, o usuário conseguirá identificar que ali era para ser carregado o logo do HTML5).

    + +

    Fácil, não? Para saber quais Tags existem e como podem ser utilizadas, acesse a documentação do Mozilla clicando aqui

    diff --git a/manual/js/arrays.html b/manual/js/arrays.html index 5184fa9..bb9203e 100644 --- a/manual/js/arrays.html +++ b/manual/js/arrays.html @@ -31,4 +31,50 @@

    Valores agrupados

    console.log(gaveteiro[2]);

    Assim dizemos que gaveteiro na posição 2 recebeu o valor 99.

    + +

    Adicionando elementos no array

    +

    Caso precise adicionar uma nova gaveta, podemos usar o método push:

    +
    +var  gaveteiro = [10,20,30];
+gaveteiro.push(100);
+console.log(gaveteiro[3]); //100
+
    +

    O método push recebe 100 como parametro e adiciona na ultima posição do array.

    + +

    Removendo elementos no array

    +

    Caso precise remover/recortar uma gaveta, podemos usar os seguintes métodos:

    +

    - Para remover a ultima gaveta, utilizamos o pop: +

    +var  gaveteiro = [10,20,30];
+console.log(gaveteiro[2]); //30
+gaveteiro.pop();
+console.log(gaveteiro[2]); //undefined
+
    +

    - Para remover a primeira gaveta, utilizamos o shift: +

    +var  gaveteiro = [10,20,30];
+console.log(gaveteiro[0]); //10
+gaveteiro.shift();
+console.log(gaveteiro[0]); //20
+
    +

    - Para retornar apenas algumas gavetas (recortar), utilizamos o slice: +

    +var  gaveteiro = [10,20,30];
+var novaGaveta = gaveteiro.slice(1,3);
+console.log(novoGaveteiro); //[20, 30]
+
    + +

    Quantidade de elementos do array

    +

    Depois de ter adicionado várias gavetas, pode surgir a necessidade de saber quantas já existem, para isso vamos acessar a propridade length:

    +
    +var  gaveteiro = [1,2,3,10,20,30];
+console.log(gaveteiro.length); //6
+gaveteiro.push(100);
+gaveteiro.push(200);
+gaveteiro.push(300);
+gaveteiro.push(400);
+console.log(gaveteiro.length); //10
+gaveteiro.push(200);
+console.log(gaveteiro.length); //9
+
    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/funcoes.html b/manual/js/funcoes.html index a92b521..30b03f2 100644 --- a/manual/js/funcoes.html +++ b/manual/js/funcoes.html @@ -7,5 +7,85 @@

    Funções

    Criando e usando funções personalizadas

    -

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

    + +

    Inicialmente, pense em funções como caixinhas mágicas: você joga coisas dentro, algo acontece e você recebe de volta uma transformação do que foi colocado. Por exemplo: imagine uma caixinha em que você coloca dois números: 3 e 5 e a caixa te devolve 8.

    + +

    Os números 3 e 5 que colocamos dentro da caixa iremos chamar de argumentos e o 8 que recebemos, iremos chamar de retorno.

    + +

    Nem sempre uma função terá argumentos e nem sempre terá um retorno, mas certamente ela irá realizar alguma coisa de nosso interesse, seja mudar a cor de algum elemento, abrir uma janela popup, ou qualquer uma das outras coisas que a linguagem JavaScript pode fazer.

    + +

    As linguagens de programação já possuem algumas funções pré-definidas para nos ajudar. Da linguagem JavaScript podemos citar: open()(usada para abrir janelas popup), parseInt() (usada para converter um número ou string em inteiro), encodeURI() (codifica uma cadeia de caracteres em um URI válido)...

    + +

    Resolvendo problemas

    + +

    Sempre que estivermos programando em qualquer linguagem, temos que ter em mente uma coisa muito importante: "o melhor jeito de resolver um problema grande é dividi-lo em problemas menores", cada um desses "problemas menores" serão resolvidos por funções pequenas, assim juntando as várias pequenas funções, teremos resolvido "o todo".

    + +

    Apesar de ser possível escrever todo o código que resolve o problema grande numa única função gigante, não fazemos isso. Pois isso tornaria muito complexo nosso código, dificultaria uma futura manutenção e impossibilitaria o reaproveitamento de pequenas rotinas. Por isso preferimos dividir e depois criar uma função grande que utilize nossas outras funções pequenas, do que escrever tudo num só lugar.

    + +

    Declarando

    + +

    A declaração de uma função é quando construimos a caixa mágica.

    + +
    +function foo() {
+  //corpo
+}
+
    + +

    foo é o nome da função e o código entre as chaves {}, é o corpo da nossa função. A palavra function é a forma da linguagem JavaScript indicar que estamos declarando uma função (criando a caixa mágica).

    + +

    Invocando

    + +

    Após construirmos a caixa, ela por si só não faz absolutamente nada até a chamarmos. A invocação consiste em colocar o nome da função seguido pelos parênteses. Isso faz com que o código dentro do corpo da nossa função seja executado.

    +
    +foo();
+
    + +

    Experimente salvar um arquivo .html e abrir com o seu navegador, contendo o seguinte código:

    +
    +<script>
+function bar() {
+  alert('Hello World');
+}
+</script>
+
    +

    Após abrir o arquivo com qualquer navegador, você irá notar que não irá acontecer absolutamente nada. Sim, nada. Pois ainda não invocamos a função. Apenas a declaramos. Para invocar, o arquivo ficaria com o seguinte conteúdo:

    + +
    +<script>
+// declarando
+function bar() {
+  alert('Hello World');
+}
+
+// invocando
+bar();
+</script>
+
    + +

    Exemplo de função com argumentos e retorno

    + +

    Lembram que eu iniciei o texto falando de uma caixa mágica que recebia 2 números e devolvia a soma deles ? Essa função ficaria assim:

    +
    +function somar(x, y) {
+  return x + y;
+}
+
    +

    E para invocar essa função somar() podemos passar quaisquer dois números:

    +
    +somar(3, 5);
+somar(1, 2);
+somar(10, 32);
+
    +

    Só que não vermos nada, pois não direcionamos o return para lugar nenhum.

    + +
    +<p id="resultado"></p>
+<p id="resultado2"></p>
+<script>
+alert(somar(3, 5));
+document.getElementById('resultado').innerHTML = somar(1, 2);
+document.getElementById('resultado2').innerHTML = somar(10, 32);
+</script>
+
    diff --git a/manual/js/index.html b/manual/js/index.html index 4a162c6..0e857ea 100644 --- a/manual/js/index.html +++ b/manual/js/index.html @@ -23,7 +23,7 @@

    Camada de comportamento

    O JavaScript é a terceira camada de desenvolvimento por que ele manipula as duas primeiras camadas, isto é: HTML e CSS. Imagine que você precise de um Slider de imagens. Toda a movimentação, ações de cliques nas setinhas e etc, é o JavaScript que vai cuidar. É isso que chamamos de comportamento.

    Orientado a Objeto

    -

    Talvez seja cedo demais para falar sobre orietação a objetos em linguagens de programação, mas você precisa saber, pelo menos, que o JavaScript é uma linguagem com Orientação a Objetos. Não vamos entrar em detalhes agora, não queremos que você confunda as bolas. Mas saiba que um objeto na programação é um conjunto de informações. Objeto é um grupo de dados. Mas por hora, fique apenas com essas informações. Vamos nos aprofundar em momento oportuno.

    +

    Talvez seja cedo demais para falar sobre orientação a objetos em linguagens de programação, mas você precisa saber, pelo menos, que o JavaScript é uma linguagem com Orientação a Objetos. Não vamos entrar em detalhes agora, não queremos que você confunda as bolas. Mas saiba que um objeto na programação é um conjunto de informações. Objeto é um grupo de dados. Mas por hora, fique apenas com essas informações. Vamos nos aprofundar em momento oportuno.

    Hello World!

    Vamos fazer seu primeiro Hello World com JavaScript?

    diff --git a/manual/js/o-que-framework.html b/manual/js/o-que-framework.html index 2cfe2fa..d0da70a 100644 --- a/manual/js/o-que-framework.html +++ b/manual/js/o-que-framework.html @@ -14,7 +14,14 @@

    Entendendo o conceito

    Assim um Framework tem como principal objetivo resolver problemas recorrentes com uma abordagem genérica, permitindo ao desenvolvedor focar seus esforços na resolução do problema em si, e não ficar reescrevendo software. Você pode se perguntar, então Framework é uma biblioteca? Bem quase isso, pode-se dizer que é um conjunto de bibliotecas ou componentes que são usados para criar uma base onde sua aplicação será construída.

    - Esta página está em construção. Volte em breve ou ajude a completá-la! + As frameworks ajudam no desenvolvimento rápido e seguro de aplicações mas é recomendável, estudar antes a tecnologia em que a mesma é desenvolvida. Logo é importante estudar os aspectos básicos do javascript antes de se aventurar em uma framework da Linguagem. Possuindo o conhecimento das tecnologias da Framework é possível fazer suas própias modificações para que a framework possa atender todas as necessidades do desenvolvedor. +

    +

    Frameworks em Destaque no Desenvolvimento Web

    +

    + Existe diversas frameworks para desenvolvimento de aplicações, mas o nosso foco será em ferramentas para criação de sites. Abaixo são listados alguns que podem ajudar na sua carreira. +

    +

    Boostrap

    +

    + É utilizado para desenvolvimento de componentes de interface de sites, utilizado html, css e javascript e foi desenvolvido levando em consideração técnicas de design, para melhorar a experiência visual do usuário.

    - diff --git a/manual/js/o-que-jquery.html b/manual/js/o-que-jquery.html index 63054af..2fe1f7e 100644 --- a/manual/js/o-que-jquery.html +++ b/manual/js/o-que-jquery.html @@ -7,5 +7,39 @@

    O que é jQuery?

    É um framework JavaScript

    +

    Lançada em 2006, por John Resig, jQuery, segundo definição consta em seu site, trata-se de uma rápida, pequena e rica em features biblioteca JavaScript.

    +

    Como o lema "Write less, do more." (escreva menos, faça mais), jQuery revolucionou o desenvolvimento web, sendo presente em inúmeros projetos atualmente.

    +

    Mas, por que é tão utilizado?

    +

    Exatamente pelo seu lema. Com jQuery é possível fazer diversos efeitos com poucas linhas e, que custariam dezenas de linhas em JavaScript puro.

    +

    Alguns recursos oferecidos facilmente pelo jQuery:

    +
      +
    • Seleção e manipulação de elementos HTML
      • +
    • Manipulação de CSS
      • +
    • Efeitos e animações
      • +
    • Navegação pelo DOM
      • +
    • Ajax
      • +
    • Eventos
      • +
    +

    Como uso?

    +

    Igualmente qualquer arquivo JavaScript você precisa inseri-lo na página com as tags script. Você pode fazer o link para uma CDN como a do Google ou fazer o download do framework no seu projeto e linkar direto (vale lembrar que se optar por essa opção, faça o link para a versão minificada).

    +
    +<script src="js/jquery.min.js"></script>
+
    +

    A sintaxe

    +

    A sintaxe básica é a seguinte:

    +
    $('seletorHTML').acao();
    +

    Alguns exemplos práticos

    +

    Manipulação HTML

    + 
    $( "#botao" ).html( "Sucesso!" )
    +

    No exemplo acima, selecionamos o elemento com ID botão e inserimos a string "Sucesso!".

    +

    Eventos

    +
    +var box = $( "#box" );
+$( "#botao" ).on( "click", function( event ) {
+  box.show();
+});
+
    +

    No snippet acima, guardarmos em uma variável o elemento com ID box. Em seguida, adicionao ao elemento com ID 'botao' o evento do clique. Ao ser disparado, esse evento mostra o elemento, que guardarmos na variável box anteriormente, através do método show().

    +

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

    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!