読者です 読者をやめる 読者になる 読者になる

2日でできる!JavaScriptトレーニング!やってみた前編(1~4)

日記

alpha.mixi.co.jp

やってみました。上記サイトのgithubのリンクからたどれます。

解法のネタバレありです。

序章:

lint 入らないので諦める

stage1:

cssわかんねぇええと思いながらぐぐりながらやった。

やってるうちに割と分かってくるので楽しい。

12 番の紫色の要素を、属性セレクタと :nth-child(N) セレクタを使わずに1つ取得できる 

に苦戦、ul:last-child 使えねぇとなっていたところ属性セレクタ使ったら何故か通る。

正解法は

'.js-training + .js-training > :last-child'

らしい。 + で結合 > でまとめてる?っぽい

stage2:

css の position relative の仕様が謎だった

よくみたらtopを使ってとか書いてあるしヒントたくさんあった。

あとはひたすらcss調べる。

stage3:

特に苦労するところなし。だいたい参考に載ってるリファレンス通り。

最後のprepend()だけはちょっと調べた。

JQuery版書きやすいなぁ

stage4:

4 番の要素を入力された角度に回転できる

がエスパー問題。

入力された角度が反映されるタイミングが 'blur'なのか'input'なのか'change'なのか謎。

はじめ'input'でできて明らかにできてるじゃねーか!!となってどうしようもなかったので答えみました。

正解は'change'でした。

最後の問題はちょっと感動。

HTMLも上から読み込んでいくから、まだ記述されていない場所は読み込めないの window.onload を使ってその中の function に処理を書く。

 

感想

ここまでしかやってないけどJavascriptわかってきたぞ〜

今まで謎すぎて手を付けたくなったJSを使ってみたくなりました。

割とCSSぐぐりゲー。