２日でできる！JavaScriptトレーニング！やってみた前編(1~4)
やってみました。上記サイトの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ぐぐりゲー。
