Giters

impJS / impAprendaJS

Grupo de estudos para pessoas que querem aprender JavaScript.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Semana 4

HenriqueSilverio opened this issue · comments

commented

Inicio: 09/03/2014 ~ Fim: 15/03/2014

Instruções: https://github.com/impJS/impAprendaJS/wiki/Semana-4

Observação: dúvidas recorrentes para esta semana deverão ser publicadas neste link.

commented
Tarefa Status
Try jQuery 0%
Leitura Capítulos 13, 15, 16 e 19 13✔ 15✔ 16✖ 19✖
Questionário Dinâmico ✖
commented
Tarefa Status
Leitura Capítulos 13, 15, 16 e 19 13 ✖ 15 ✖ 16 ✖ 19 ✖
Try jQuery 0%
Quiz Dinâmico ✖
commented
Tarefa Status
Leitura: Capítulos 13, 15, 16, 19 ✔
Try Jquery ✔
Questinário Dinâmico codigo ✔

@expalmer, valeu por te curtido, fiz a vanilla style, pq sempre usei o jquery ou alguma biblioteca, e tinha e fissura de querer fazer puro, ah sim os errinhos que vc citou, e tinha visto pelos warnings do jsbin e ate mudei ontem mesmo, mas parece que ele não salvo, corrigi de novo.

Cara do seu código eu só mudaria q algumas coisas que não são muito meu estilo tipo:
no each vc usa function, anonima para cria as alternativa, ali eu passaria um function de parâmetro mesmo como fiz no meu, vc usa o if( current !== undefined) e declara todo display da pergunta dentro dele, e usa o else para dar um return false, eu faria um: if( current === undefined) e ai retornaria o false, assim vc pode declara todo aquele bloco de código abaixo sem precisa aninhar, mas isso são coisas de estilo de cada um.

Outra coisa que quando comecei a fazer o meu, eu não queria simplesmente fazer um Quiz, tinha intenção de fazer um plugin de Quiz, por isso mesmo crio os elementos dentro da função init, mas acabei me perdendo e fiz usando id, agora consertei e estou usando classes.

Essas são as únicas coisa que mudaria no seu script.

commented
Tarefa Status
Leitura dos Capítulos: 13, 15, 16, 19 ✔
Curso Try jQuery ✔
Quiz Dinâmico 80%

Conclusões dessa semana

Essa foi a semana mais corrida do roteiro até o momento.

Eu já tinha feito o curso Try jQuery antes de iniciar o roteiro, mas queria fazer de novo para ver como me sairia, se conseguiria encaixar os estudos em apenas uma semana. Dá pra conseguir? Sim é possível. Mas por motivos pessoais, minha programação de estudos dessa semana acabou sendo prejudicada e não consegui refazer o Try jQuery e desenvolver o Quiz no prazo.

Fiquei até tarde ontem a noite (15/03), e estou correndo aqui hoje (16/03) para "matar" essas pendências. Gostei muito de ver os amigos que conseguiram concluir as tarefas e compartilharam seus projetos desenvolvidos. Parabéns pessoal! Continuem assim, se dedicando bastante e praticando sem desanimar.

Work in progress do meu Quiz

Dicas e Pontos Interessantes

Checar carregamento do DOM: Frequentemente será útil executar determinadas funções apenas após ter certeza de que o DOM foi carregado. (Note: isso não quer dizer que todas as imagens e requisições à outros assets foram concluídas, mas sim que a estrutura hierárquica do DOM já está pronta para ser manipulada). Podemos fazer isso basicamente de duas formas:

API nativa: Podemos vincular uma função à um listener do evento DOMContentLoaded do objeto document:

var myAwesomeFunction = function() {
    console.log( 'DOM ready!' );
};

document.addEventListener( 'DOMContentLoaded', myAwesomeFunction );

API jQuery: jQuery possui uma alternativa de mesmo efeito. Geralmente encontramos código que passa o objeto documentpara a construtura $() e chamando o método .ready() em seguida, dessa forma:

$( document ).ready( function() { 
    console.log( 'DOM ready!' );
} );

Porém, podemos fazer a mesma coisa, de forma muito mais simples, menos prolixa. Basta passar uma função para a construtura $(), dessa forma:

$( function() {
    console.log( 'DOM ready!' );
} );

Referências adicionais sobre esse assunto:

Pérolas da tradução: No capítulo 13, página 318, o autor cita uma lista de sites que nos ajudam a conhecer as incompatibilidades entre os diversos navegadores. Na página 319, logo após essa lista de sites, temos uma frase que foi traduzida da seguinte maneira:

"Note que os três últimos sites listados são mantidos por pessoas".

Hum, sério? Só os três últimos são mantidos por pessoas? E os demais? São mantidos por... E.T.'s? Ahaha'. Sim, deu pra entender, mas eu tive que postar isso. xD

commented
Tarefa Status
Leitura dos Capítulos: 13, 15, 16, 19 100%
Curso Try jQuery 100%
Quiz Dinâmico código no CodePen 100%

Seu progresso no Try jQuery: Entra Aqui na sua Account
e no console executa ai:

$('a[href$="/courses/try-jquery/goto"]').find('.progress').data('width');

Essa Semana

De longe foi a semana mais puxada, mas aprendi bastante e o livro é de fato bem completo. Não pude absorver tudo do livro, mas aos poucos vou degustando e testando cada código.

Aprendi a usar uns truques no jQuery, mas o interessante foi ver no livro, como se faz para acessar o DOM e que temos que fazer bastante coisa pra isso kkk, por isso o jQuery é famoso, porque faz o trabalho pesado para nós. Mas nada como entender como as coisas funcionam.

Estou muito feliz com o andamento do curso, e espero que nossos Jedis possam comentar e nos ensinar mais.

Curti teu código @osmarcs por ser em vanilla JS, só tem umas coisinhas que uso padrões diferentes e também tem umas var que você declarou duas vezes e é bacana deixar sempre as var no topo da função por causo do hosting e organização. Cara olha meu código e me diz o que eu poderia melhorar ou alguma sugestão e tal. Assim a gente aprende junto. Isso vale pra toda galera. Valeu

commented
Tarefa Status
Leitura dos Capítulos: 13, 15, 16, 19 75%
Curso Try jQuery 100%
Questionário Dinâmico %0
commented
Tarefa Status
Leitura: Capítulos 13 ✔, 15 ✔, 16 ✔e 19 ✔ 100%
Curso Try jQuery 100%
Questionário Dinâmico 100%

Quiz: Link

Achei bem bacana essa palestra do @jeancarloemer sobre Eventos!

Eventos: do simples ao objeto - RSJS

http://www.youtube.com/watch?v=rGlF5OgD_c0

commented
Tarefa Status
Leitura dos Capítulos:13, 15, 16, 19 100%
Curso Try jQuery 100%
Questionário Dinâmico 0%
commented

@osmarcs Cara muito obrigado pelo retorno, concordo com teus comentários, agora vou
melhorando o código. Abraços...e vamos nessa!

Palmer Oliveira

Em 16 de março de 2014 17:21, osmarcs notifications@github.com escreveu:

Tarefa Status Leitura: Capítulos 13, 15, 16, 19 ✔ Try Jquery ✔ Questinário
Dinâmico codigo http://jsbin.com/kopas/1/ ✔

@expalmer https://github.com/expalmer, valeu por te curtido, fiz a
vanilla style, pq sempre usei o jquery ou alguma biblioteca, e tinha e
fissura de querer fazer puro, ah sim os errinhos que vc citou, e tinha
visto pelos warnings do jsbin e ate mudei ontem mesmo, mas parece que ele
não salvo, corrigi de novo.

Cara do seu código eu só mudaria q algumas coisas que não são muito meu
estilo tipo:
no each vc usa function, anonima para cria as alternativa, ali eu
passaria um function de parâmetro mesmo como fiz no meu, vc usa o if(
current !== undefined) e declara todo display da pergunta dentro dele, e
usa o else para dar um return false, eu faria um: if( current ===
undefined) e ai retornaria o false, assim vc pode declara todo aquele
bloco de código abaixo sem precisa aninhar, mas isso são coisas de estilo
de cada um.

Outra coisa que quando comecei a fazer o meu, eu não queria simplesmente
fazer um Quiz, tinha intenção de fazer um plugin de Quiz, por isso mesmo
crio os elementos dentro da função init, mas acabei me perdendo e fiz
usando id, agora consertei e estou usando classes.

Essas são as únicas coisa que mudaria no seu script.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/38#issuecomment-37127620
.