ほんきでJavaScriptがはじまりました。

みなさんこんにちは。学校事業部の古谷です。

クスールで人気の高い『ほんきでJavaScript』が、2月11日からはじまりました。
この『ほんきでJavaScript』は、HTMLを習得されたで、JavaScriptにチャレンジしたい方におすすめの講座です。

今回は、なんとプログラミング初心者の古谷も授業に参加させていただくことになりました!
(早速Blog更新が1ヶ月経過してしまいましたが。。。汗)
ついていけるように、復習必須!と心にきざんで頑張ります!

その他の参加いただいてる方は、デザイナー、コーダーの方などさまざま。
みなさんプラグインを使用する際にjQueryを使って、疑問点が出たりし、もっとちゃんと理解して書きたいと思い、この講座を受講された方が多いようでした。


1回目 JavaScript基礎

1回目は自己紹介もほどほどに、早速JavaScriptの内容に入っていきました。
最初は基礎の基礎、JavaScriptとはなんなのか、どういう働きをするのか、他の言語とどう違うかなど、簡単に説明していきました。
そして実際にコードを書いて行き、Webサイトのconsoleに文字を表示させることができる書き方『console.log』の書き方からを学び、変数に数字や文字を代入する方法を学びました。

  • JavaScripとは。
  • console.logの出し方
  • 変数の書き方 variables

そのあとは、if文、関数(function)、引数を学びました。
変数をif文と組み合わせた、消費税計算を使った演習を何度も行っていきました。(全てconsoleに表示させます。)

  • if文
  • 関数 function
  • 引数 argument

2日目 for文 配列

2回目の最初は、前回の復習、ifと変数を使用した、割引計算と消費税計算がミックスされた演習課題をやりました!!
しかし、まだJavaScriptに全然慣れることができず、なかなかパッとJavaScriptが浮かばないし書けない。。。ので、もちろん前回のファイルを見ながら、なんとか出来ました^^
前回のファイルを写しながら書いてくことを、何度も繰り返して、JavaScriptに慣れて行くことが大切!と先生が言ってました。JS復習法は写経ですね。

  • for文
  • 配列

そして演習が終わったらfor文の書き方を学び、1から100までの数字をfor文でconsoleに出力しました。
そしてif文を使用して、3の倍数の時『3の倍数です!』と表示させる書き方を学び、5の倍数でやってみたり、3と5の倍数がぶつかった場合、どちらも表示させる書き方にチャレンジしました。
その後は配列を学び、配列&for文&if文を合わした、消費税計算の演習を行っていきました。

3回目 jQuery

この日も最初は前回の復習からはじまりました。
もちろん消費税計算。。。消費税が嫌いになりそうですが、やりきりました!
その後は、最終回までに制作する企画発表を行いました。今回のお題は『メモ帳』です!
一人一人どんなメモ帳にするか説明してもらいました。

お気に入り機能や、APIを取り入れたものなど。
発表内容について講師が、どのような手順で作っていくか、本当に実現可能なのか、など教えてもうらいました!

ちなみに私はメモ帳というよりタスクメモに近い、シンプルなメモ帳にチャレンジします^^できるかな。できないかも。心配ですが頑張ります!

  • 企画発表
  • jQuery

発表のあとはjQueryの内容に入っていきました。
HTMLの中に<div>を作り、そこにclassをつけ、その<div>に文字を出力する書き方から、ボタンの動かし方を学習しました。
そして応用編といして、テキストボックスとボタンを制作し、計算ができる書き方を学びました。
最初に習ったピュアなJavaScripと、またちょっと違った書き方のjQueryに最初は戸惑いましたが、なんとか向き合い頑張りました!汗

4回目 jQuery 課題制作

この日も復習から。jQueryでつくる計算機能をやっていきました。
そしてreadyの概念、thisの書き方を学び、それを用いて実際にメモ帳機能をjQueryで作っていきました。

  • ready
  • this
  • global変数
  • 動的要素 append
  • 課題制作

最後の1時間ほどは、課題制作の時間にあて、先生へ相談タイムです。
私はある程度できたメモ帳のデザインを、先生に見てもらい、この日習ったことをどう使っていくなど、具体的にどうするか教えてもらいました。
まだデザインだけなので、次回までにHTMLコーディングをしないといけません。
頑張ります!

『ほんきでJavaScript』の前半戦は、こんな感じでございました。
また後半戦も、頑張ります!!
後半戦はこちら。