Javascriptで動くページを作ろう第一回:アニメーションとJavascriptについて

どうも、JP3BGYです。
今回からはなんと同好会の公式サイトを作るのでそれに関連してWeb開発の初歩的なところを書いていきたいと思います。
実は我々が作ったチームYYTはraorを除いてみんなWeb制作は得意としてないんです。
なので今回のページ制作を期に読者とともにスキルアップしようという寸法です。
それでは早速やってみましょう。

なお、今回からやるものはHTML・CSSをある程度理解している前提で話をしていきますのでわかりにくいところがあったら自分で調べてみてください。

まずアニメーションについてですがWeb開発においてアニメーションと普段皆さんが思うアニメーションは少し違うところがあります。
アニメーションと言ってほとんどの人が想像するのはTVでやっているOne PieceとかNARUTOとかそっちの方を思い浮かべるでしょう。
しかし、Web開発においてはオブジェクト(文字とか写真の総称です)に見た目の変化を与えることを指します。
例えば、大きさを変えたり座標を変えたり。
最近では少しずつ値を変えていくことによってあたかも動いているように見せるのが主流みたいです。

さて、それを文字で表すにはどうすればいいでしょうか、方法は以下の3通りあります。
1,CSS3の新しい要素を使う
2,JavascriptでCSSの値を操作する
3,1番と2番を組み合わせる
実はCSSでやる方法は最近になって出てきた方法です。
Javascriptで書くことの利点として自由に何でもできるというものがあるのですがプログラムが結構ややこしくてしかもあまりこったものがやりにくいなどかなり面倒でした。
ところが、最近開発されているCSS3ではある程度CSSだけでこったアニメーションができるようになっています。
ちょっと前まではそんなことなかったんですがね。
まあ細かいことは今後説明しながら書きます。
でもCSSだけだと自由がきかないところがあるのでやっぱりCSS3の新機能とJavascriptを両方使うことが一番ベストだと思います。

では今回は最後にJavascriptについて軽く書いて終わりにしたいと思います。
Javascriptはクライアント側(サーバー側ではなく自分たちのパソコン上で動くということです)で動くスクリプト言語というものです。
サーバー側で動くPHPやPerlは自分のパソコンでは動かないため一度HTMLデータを生成したらあとは改変することはありません。
なのでアクセスする人によって違うページを生成することはできますがアニメーションを作ることはできません。
それと比べてクライアントで動くJavascriptは今その人が見ているHTMLデータを直接変更できるのでそのようなアニメーションやあとは数式の計算結果の算出等に向いてます。
スクリプト言語の説明は以下のページを見るといいでしょう。
http://e-words.jp/w/E382B9E382AFE383AAE38397E38388E8A880E8AA9E.html
で、まあこの言語はC言語みたいに関数と変数とちょっとした命令があってそれでHTMLトCSSを操作する言語なのですが、Cと大きく違うのがCのmain関数に当たる関数がない（ただし最初に読み込まれる場所は存在する）こと、関数を作るときは関数用の宣言がいること、変数の型がないことです。
main関数がない代わりに関数の外に書かれた文章はファイルが読み込まれた時に勝手に実行されることとイベントが細かくあってそのイベントが発生するごとに自分で決めた関数を動かすことによってHTMLとCSSの制御をします。

何言っているかわからない人は今後少しずつ実例を上げていくのでゆっくりやっていきましょう。
今回はここまで、ほな、さいなら