できないものは物量作戦で(JavaScript)
こんばんはmallowです。もうちょっとで光属性古戦場だそうで。
JavaScriptが本当にできなすぎて、
(文法が覚えられない、タイプミスで詰まる、など)
この2週間暇を見つけては色々写経してました。
5秒当てゲーム
まずはドットインストールで作れる一番簡単なものから。
実は随分前に詰まってそれから放置していました。
こういうゲーム画面を作るのって難しいイメージがずっとあったんですが、html見たら本当にシンプルでまずそこに驚きました。
で、5秒近くでstopボタンを押して数字を止めれた時にこんな感じで文字が赤くなるようにする操作がなぜかずっと反応しなくてですね。
やっとうまくいった図。
プログラムが動かない時って、自分で打ったコードに全角スペース混ざってないかとかメソッド全部小文字で打ってないかとか、タイプミスはないかとか、見ないといけないわけです。
コード打ってる時は楽しいんですけどねー、正直言ってつらいです。自分のポンコツ度と嫌でも向き合う作業になる。
こういう時は一晩寝かせておいて翌日に見るとすんなり間違いがわかったりするものです。
・単語のスペルが間違っていないか
・大文字／小文字が間違っていないか
・スペースの有無が正しいか
・カンマやドットは抜けていないか、全角になっていないか
・ダブルクォーテーションやシングルクォーテーションは正しいか
気をつけよう！ほんと！
WEBサイトを作ろう
こちらもドットインストールから。
ATOMで使える便利なプラグインことDotinstall Pane。
レッスンではこのDotinstall Paneの紹介サイトを作っていきます。
動画を見ながら写経するのみ。
ただ、講座に使う素材はプレミアム会員のみDL可能なようだったので、
適当な手持ちの画像ファイル(サイズはCSSで指定するのでなんでもいい)と、
あとはフリーアイコンサイトから適当なものをDLしました。
DLしたアイコンが正方形だったので、アイコンのwidthを180pxから100pxに変更したのと、
背景素材の都合でタイトルが白文字だと読みづらいのでそこも変更。
HTML/CSSを打つのはだいぶ慣れてきたのでタイプミスはほぼなくなりました！よし成長してる。
動画見ながら打ちながら、また動画止めながら打ちながら修正しながら、とやっていたので、うーん5時間くらい？かかりました。
あとはサンプルコードの載ってる本で
手持ちの本(「つくって覚えるHTML5入門」&「つくって覚えるJavascript+HTML5入門」)を写経しています。総ざらいするとなると結構かかりそうです。
これも買って挫折して放置してましたよ…。でもやったら段々できてくる。
商品ページ貼るのもなんなので、読書メーター貼りますね。
