1. ferramentas
1.1. google chrome - dev tools
1.2. brackets
2. parte funcional da programacao
2.1. acesso a memoria (variáveis)
2.2. operacoes
2.3. if else
2.4. funções
2.4.1. parâmetros
2.4.2. retorno
2.5. eventos
2.6. estruturas de repeticao (while e for)
2.7. Vetores (Arrays)
2.7.1. criacao
2.7.1.1. x = [];
2.7.2. alteração de conteúdo
2.7.2.1. x[0] =12;
2.7.2.2. x[1] = 20;
2.7.3. uso de conteúdo
2.7.3.1. a = x[1] + 10;
2.8. acesso a propriedades de objetos - ponto (.)
3. comandos Javascript
3.1. Interação básica com usuário
3.1.1. alert
3.1.2. prompt
3.1.3. confirm
3.1.4. parseInt
3.2. eventos
3.2.1. onclick
3.2.2. onload (body)
3.3. setInterval
3.4. document.getElementById('...')
3.4.1. para acessar objetos HTML com id
3.5. alteração de propriedades dos objetos HTML
3.5.1. propriedades de estilo: style.***
3.5.2. propriedades diretas: type, src, checked, value...
3.5.3. innerHTML
3.6. document.write(...)
3.7. vetor.length
3.7.1. cria vetor: a = [4, 8, 2];
3.7.2. a.length --> corresponde a 3, no exemplo
4. memoria (estrutura de dados)
4.1. variaveis
4.2. Vetores (Arrays)
4.3. tipos de dados
4.3.1. numero
4.3.2. texto
4.3.3. booleanos ou logicos
4.3.3.1. true
4.3.3.2. false
4.4. intro a objetos e propriedades
4.4.1. Exs.:
4.4.1.1. elm.checked
4.4.1.2. elm.type
4.4.1.3. elm.src
5. HTML
5.1. Estrutura básica de página
5.1.1. tag de declaração <!doctype html>
5.1.2. elemento base - <html>
5.1.2.1. <head> e seus elementos
5.1.2.1.1. <title></title>
5.1.2.1.2. <meta charset='UTF-8'>
5.1.2.1.3. <script></script>
5.1.2.1.4. <style></style>
5.1.2.2. <body> - onde se deve colocar o conteúdo
5.2. Elementos representados por TAGs
5.2.1. Tag de abertura - <nome ...>
5.2.1.1. onde ... => propriedade="valor" (quantas vezes for necessário)
5.2.2. Tag de fechamento - </nome>
5.3. Elementos que não recebem conteúdo
5.3.1. <img>
5.3.2. <input>
5.3.2.1. type='text'
5.3.2.2. type='checkbox'
5.3.2.3. type='text'
5.3.2.4. type='button'
5.4. Elementos que recebem conteúdo
5.4.1. <div></div>
5.4.2. elementos com semântica (funcionam como div, mas tem nomes diferentes)
5.4.2.1. <header></header>
5.4.2.2. <nav></nav>
5.4.2.3. <article></article>
5.4.2.4. <section></section>
5.4.2.5. <footer></footer>
5.4.3. <textarea></textarea>
5.5. propriedades que servem para todos
5.5.1. id
5.5.2. class
6. CSS
6.1. Folha de Estilo - Cascading Style Sheet
6.2. Uma Folha pode ter várias Regras
6.3. Regra CSS
6.3.1. seletor:
6.3.1.1. #id_do_elemento
6.3.1.2. .class_dos_elementos
6.3.1.3. nome_direto_do_tipo_de_elemento
6.3.1.3.1. img
6.3.1.3.2. div
6.3.1.3.3. body
6.3.1.3.4. ... etc ...
6.3.2. bloco de instrucao: { }
6.3.2.1. uma lista de instruções no formato:
6.3.2.2. propriedade: valor;
6.4. propriedades e seus valores
6.4.1. Cor
6.4.1.1. background-color
6.4.1.1.1. nome de cor, ex: blue, red, green, lightblue, darkred, etc...
6.4.1.1.2. codigo de cor, ex: #AAFF00, #123456
6.4.1.2. color (cor do texto)
6.4.1.3. border-color
6.4.2. Font
6.4.2.1. font-family
6.4.2.1.1. lista de nomes de fontes, separados por vírgula
6.4.2.2. font-size
6.4.2.2.1. tamanho, normalmente em px
6.4.2.3. font-style
6.4.2.3.1. italic
6.4.2.3.2. normal
6.4.2.4. font-weight
6.4.2.4.1. bold
6.4.2.4.2. normal
6.4.3. Text
6.4.3.1. text-align
6.4.3.1.1. center
6.4.3.1.2. right
6.4.3.1.3. left
6.4.3.2. text-decoration
6.4.3.2.1. none
6.4.3.2.2. underline (sublinhado)
6.4.4. Tamanhos
6.4.4.1. width - largura
6.4.4.2. height - altura
6.4.4.3. margin
6.4.4.4. padding - espaçamento interno
6.4.4.5. border-width - espessura da borda
6.4.5. Borda
6.4.5.1. border-width - espessura
6.4.5.2. border-color - cor
6.4.5.3. border-style
6.4.5.3.1. solid
6.4.5.3.2. dashed - tracejado
6.4.5.3.3. dotted - pontilhado
6.4.5.3.4. double - duplo
6.4.5.4. abreviação das três:
6.4.5.4.1. border: <largura> <cor> <estilo>
6.4.6. Lados específicos
6.4.6.1. Propriedades:
6.4.6.1.1. border
6.4.6.1.2. margin
6.4.6.1.3. padding
6.4.6.2. 1. acrescenta-se o nome do lado à propriedade. Ex.: margin-top
6.4.6.2.1. top
6.4.6.2.2. right
6.4.6.2.3. bottom
6.4.6.2.4. left
6.4.6.3. 2. (apenas para margin e padding) Especificam-se os 4 lados separados por espaço. A ordem é a listada no item 1
6.4.6.3.1. margin: 10px 20px 12px 5px
6.4.6.3.2. padding: 10px 20px 12px 5px
6.4.7. Layout e posicionamento
6.4.7.1. Layout
6.4.7.1.1. float
6.4.7.2. Posicionamento
6.4.7.2.1. position
6.4.7.2.2. top - distância do topo
6.4.7.2.3. right - distância da direita
6.4.7.2.4. bottom - distância da borda debaixo
6.4.7.2.5. left - distância da esquerda