Category Archives: Javascript

JavaScriptに挑戦:その③

こんにちは。クリエイターズアカデミーの事務員です。
前回は引き続きJavaScriptのご説明をしました。うまく説明出来ている気がしませんが、しかし私も調べていて思いますがJavaScriptの解説サイトはとにかくよく分からない!JavaScriptがプログラミング言語の一種なのでプログラミングを齧ったことがある人を対象に説明しているサイトがほとんど…用語や言い回しが難しくてhtmlのついでに学びたい私なんかには敷居が高くて困ります。
しかし今回も頑張ってご説明していきたいと思います。

JavaScriptの引数って?

昨日良い使用例が思い浮かばずに保留にしてしまいました引数。正直今も使用例が浮かんできませんがこのままにするのも気持ちが悪いので教科書的ですが説明していきたいとおもいます。

引数(ひきすう)は処理される前のモノを指します。これだと意味が分からないのでたとえて説明しますが、料理で説明するなら食材が引数、調理が処理、出来上がった料理が戻り値というものです。
これをJavaScriptで実際に記述して実行すると以下のような感じになります。
sample34

functionの中で特に使って欲しい値がある場合に引数を定義します。
引数の定義はfunctionの外で行いましょう。「function 関数名(){}」の「{}」までがfunctionの内容です。「{}」の中に引数の定義を入れると正しく機能しません。

ちなみに引数の定義の内容は数字に限りません。文字でも出来ます。
sample35

こんな感じで引数は機能します。
やはりここまで来てもこれ以上の具体例が思い浮かばないので引数の説明はここまでです…きっと色々なところで使ってあるのだと思いますが、実際のお仕事としてどんなところに使うのかまでは私にはイメージが及ばず…
良い具体例が思い浮かんだ時にまたご説明します。

ifとelseで条件付けしよう

私はJavaScriptがプログラミング言語と聞いて真っ先にイメージしたのが「○○の時は△△、××の時は◇◇なんて設定を考えていくんだろうな」というところでした。皆さんはJavaScriptにどんなイメージがありますか?
if文はまさに「○○の時は△△、××の時は◇◇」という設定を作っていくものです。「○○の時は△△」の部分はif文、「(○○ではない)××の時は◇◇」という部分はelseで指定します。ですからifとelseはセットで覚えて頂ければと思います。

if文の基本形は、

if ( 条件 ){ 処理内容 }

です。実際に設定した内容を見るとこんな形になります。

sample36

この場合は全ての条件に対して返してほしい答えがあるのでifのみの文になっていますが、elseが入る場合もあります。
※二つ目以降のifはelse ifと書いても機能します。「前のif(条件)には当てはまらない場合」(=else)の中から、新たなif(条件)に当てはまるもの、という意味です。これはいくつでもつなげられます。

sample37

ifとelseについてなんとなくお分かりいただけたでしょうか?今回は簡単な時間を条件にしましたが、この条件にも色々な指定が出来ますので、他の解説サイトも見ながら色々と試してみてください。
条件式の内容についてはこちらのページが分かりやすいのではないでしょうか?
http://www.rsch.tuis.ac.jp/~mizutani/online/javascript/multi-condition.html
if文を考える時にはどんな条件でどんな答えが返ってきてほしいのかを明確にすることが重要です。曖昧なままだと条件がうまく設定出来なかったり、そもそもどんな条件にすればいいのか分からなくなったりしますので、しっかり条件と結果を考える練習をすると良いと思います。(要するに色々試して失敗するうちに覚えますという事です!)

さて今回も分かりやすそうなJavascriptの解説サイトをご紹介します。
JavaScript初心者入門講座: http://java-script.seesaa.net/
こちらは比較的簡単な言葉で内容を説明してくれますし、作業段階のキャプチャー画像やサンプルソースもあるので学習しやすいです。また、実践編としてステップ形式の課題もあるのでよりJavaScriptでどんなことが出来るのかイメージ出来るかもしれません。課題の方は私も途中までしか見れていませんが…
とにかく初歩の説明部分は分かりやすかったのでオススメです。

JavaScript超初心者によるJavaScript入門講座: http://piyo-js.com/
こちらも超初心者というだけあって読みやすいです。このブログではさらっと流してしまった大文字小文字の区別やオブジェクト、メソッド、プロパティの名称が示す部分についても記述がありますので一度読んでおいて損はないかなと思います。

それでは駆け足でしたがJavaScriptについてさわりだけでも理解していただけたでしょうか?まだまだJavaScriptのごくごく一部だけしかご説明していませんので参考書籍や解説サイトも見ながら勉強してもらえればと思います。何も知らずにJavaScriptの勉強を始めるよりは、今回のつたない記事を取っ掛かりにしてもらえればと思います。

jQuerryについてはJavaScriptが分かることが大前提になるので、もう少し私のJavaScriptの理解度が進んでから解説に挑戦したいと思います。
次回からはhtml関連からちょっと抜けだし、画像制作の方の解説もしていけたらなと思いますのでどうぞよろしくお願いします!

JavaScriptに挑戦:その②

こんにちは。クリエイターズアカデミーの事務員です。
前回はJavaScriptの簡単なご説明をしました。私自身使いこなせていないので分かりやすく説明できているか不安なところですが、本日も引き続きJavaScriptについてご説明していきたいと思います!

・JavaScriptについて知っておきたいこと:補足

昨日の説明だとよくわからないところがたくさんありますのでちょっと補足していきたいと思います。
まずJavaScriptファイルを作る意味ですが、これは昨日例に挙げたヘッダー部分のhtmlをJavaScriptに書かせるような複数のページで同一のJavaScriptを使う時に、毎回同じJavaScriptを書かなくていいように一つのJavaScriptファイル化してしまおうというものです。JavaScriptファイルにしてしまえばhtml内に同じJavaScriptを毎回書かなくてもJavaScriptファイルを呼び出す魔法の言葉だけで済んでしまうので簡単楽ちんという事です。

また、JavaScriptで厄介なのはJavaScriptを書く位置によっては正しく動かないことがあるという点です。CSSファイルでは装飾の定義をどんな順番で書いてもセレクタ部分が正しければきちんと表示に反映されます。しかしJavaScriptは上から順に命令をこなしていきますので記述する順番を間違えると内容は正しくても機能してくれません。
昨日例に挙げたJavaScriptを見てみましょう。
sample33
この①~⑦の順でJavaScriptの命令が実行されています。なんとなく⑤~⑥と⑦を入れ替えても問題なさそうですが、実際入れ替えると機能しなくなってしまいます。
慣れないうちはこの順番に悩まされることもあるかもしれませんが、このように噛み砕いて考えていきましょう。
ちなみに「function」の後に設定した「関数名(この場合のwriteHeader)」は<body></body>内にJavaScriptを挿入したいときに

<script type=”text/javascript”>

writeHeader();

</script>

といった形で関数名を指定するときに使います。
この場合はJavaScriptファイルを読み込む魔法の言葉(<script type=”text/javascript” src=”○○○.ja”></script>)は<head></head>に入れておきましょう。<head></head>でJavaScriptファイルを読み込んでおき、<body></body>では読み込んだJavaScriptファイルの中で対応する関数名を指定して動作させるというわけです。

どうでしょう?昨日よりはさらにJavaScriptがどういうものなのかご理解いただけたのではないでしょうか?

・改めて「function」と「var」とは?

さて、ここで昨日から引き続いて曖昧なまま残っている「function」と「var」についてお話していきます。ズバリ「function」とは関数の事です。関数ってなに?と思われる方もいるかもしれません。数学の数直線や曲線を思い出してしまう方もいるかもしれませんが、JavaScriptにおける関数とは複数の命令(処理とよばれます)をまとめて名前をつけたものを言います。関数の処理の定義は下記のように記述しますので覚えておきましょう。

function 関数名(引数,引数…){処理}

ここでまた引数なんて知らない単語が出てきましたが、これについては分かりやすい使用例がなかなか思い浮かばないので後日ご説明しますね。簡単に言ってしまえば処理の中に値を代入する時に使うものです。例で挙げたもののように、引数がなくても機能するものもあります。

「function 関数名」で<body></body>等で呼び出すときに目印となる関数名を定義します。そのあとの「(引数){処理}」で実際に実行してほしい処理、命令を定義します。「{}」の中で複数の処理を定義する事も可能です。

では「var」とは何でしょうか?こちらは変数と呼ばれます。その名の通りやってほしい処理によって内容が変わるので変数とよびます。変数は「function 関数名」と同様に「var 変数名=値」という形があります。この「var 変数名」の部分が実際に行われる処理(先程の例でいえばfunctionの最後に定義されている「document.write(html);」)で使われる内容(「(html)」の部分)となります。

さて、ここまで理解できるようになるとJavaScriptは色々な事が出来るようになります。とにかく色々出来てしまうのでここで全てを説明するのは不可能です…なのでこんなことが出来ますよという解説サイトをいくつかご紹介します。

Web制作支援サイト イーウェブ
http://javascript.eweb-design.com/
こちらは目的別に詳しくソースと、どこを変えればいいのかも色つきで分かりやすく解説されています。慣れないうちは最初はコピーしてから中身をいじるなどしてJavaScriptの特性を覚えていってほしいと思います。

JSすぐに使えるサンプル集
http://www.shurey.com/js/samples/index.html
先程と同じような素材&解説サイトですが、先程のサイトでは扱っていない内容があったりもしますのでこんなこともできるのかと見て回るだけでも楽しいと思います。
こちらもしっかりとどこを変えればいいのかが示されていますので自分なりのアレンジもしやすいのではないでしょうか?

JavaScriptもhtmlやCSSと同様、とにかく試してみる事が重要です。なかなか読んだだけでは理解できないものですので、気になった機能から試していきましょう。そうすることで自然と構造の理解も進みますよ。

 
あとはJavaScriptにはif文や似たような内容としてjQuerryがあるのですがこれらもなかなか簡単に説明できるものではないので分けて解説出来ればなと思います。

JavaScriptに挑戦!

こんにちは。クリエイターズアカデミーの事務員です。
前回はWEBページデザインで良く見られるヘッダー、コンテンツ、フッターの3つのブロックについてご説明しました。今回はちょっとお話を戻してJavaScriptのご説明に挑戦したいと思います!
私もJavaScriptはまだまだ駆け出しですが、それでも分かりやすくお伝えできるように頑張りますのでお付き合いください。

JavaScriptとは

お決まりの導入ですが、JavaScriptについてもそもそもなんのこと?という疑問についてお答えしていきたいと思います。
JavaScriptとはWebブラウザ上で動かすことができるプログラム言語です。これだけではなんだかよくわからないと思いますが、WEBページは基本的に動きません。この「動く」という表現は、文字や画像が動かないという意味もありますが(もちろんGIFアニメーションやFlashによって動く事はありますが、これはWEBページでなくてももともと動いているものなので考慮しません)もうひとつ、WEBページが自ら考えて答えを返すというような動きをすることはありませんという意味でもあります。

WEBページが考えて動くってどういうこと!?と思われるかもしれませんが、例えば「パスワードを入力してそのパスワードが正しければログイン、間違っていれば警告する」という動作はまさにWEBページが考え、動いているという分かりやすい例です。
このWEBページが自ら考えて動作をする時の考え方や答え方を定義するのがJavaScriptです。ですからhtmlやCSSのみで造られたWEBサイトよりもより複雑かつ、ユーザーに合わせた動作を行うことも可能となるのです。

JavaScriptの書き方は?

以前htmlやCSSの時にもお話しましたがJavaScriptを書くのに専用ソフト等は必要ありません。JavaScriptもメモ帳で作ることが出来てしまいます。しかしhtmlやCSSとは違い、お手軽で合ってもプログラミング言語なので書き方には特徴があります。今回はその書き方について説明していきたいと思います。

①JavaScriptをhtmlで動かす為に
初めにおさらいですが、JavaScriptもCSS同様にhtml内に一緒に書いてしまうととても長くて分かりづらいものになってしまいます。なのでJavaScriptも別ファイルに分けて制作しましょう。制作したファイルがhtmlで使用できるようにする魔法の言葉はコチラ。

<script type=”text/javascript” src=”○○○.ja”></script>

「○○○」はファイル名、「.js」は制作したメモ帳がJavaScriptファイルであることを示しています。メモ帳でJavaScriptを作成したら、保存するときは「○○○.js」という名前にして保存しましょう。

②JavaScriptを書いてみよう
ではJavaScriptを実際に書いてみたいと思います。CSSの時はhtmlファイルと分けて作った場合、htmlを書いてしまえばあとはCSSファイルをいじるだけでしたがJavaScriptはhtmlファイルにも書き足していきますので両方用意しながら確認してください。

まず、JavaScriptはWEBページに「考えなさい」と命令するものです。それが良く分かるものをご紹介します。
メモ帳に下記の文章を入力して「○○○.js」で保存してください。
sample28
この内容は「document.write」が「文章を書きなさい」という命令を指し、「(“JavaScriptが文章を書かせます”)」は命令の具体的な内容を示しています。つまり今回の命令は「JavaScriptが文章を書かせます、という文章を書きなさい」というものです。

次にhtmlファイルの<body></body>の中にJavaScriptに文章を表示させたい場所に下記の文字を挿入します。
<script type=”text/javascript” src=”./script.js”></script>
sample29

するとどうでしょうか。htmlファイルを開くとしっかりJavaScriptの命令が実行されて文章が表示されています。
sample30
こんな形でJavascriptは活躍してくれます。

ちなみに上記程度の命令文であれば直接htmlに書いても大した文字量にならないのでわざわざ分けなくてもいいかもしれません。htmlにそのまま書くとこんな感じになります。
sample31

③目に見えて動かなくても実は活躍するJavascript
今回のこの「文章を書きなさい」なんていう命令文がどこで必要になるのか疑問に思う方もいるかもしれません。このくらいならhtmlに直接書いてしまった方が早いでしょう。しかし、実はこれにも便利な使い方があるのです。
例えばWEBサイトの中にどのページを開いても必ず表示するヘッダーやフッター、注意書きがあった場合、今回のJavascriptを応用すればhtmlに記述する内容を大幅に減らすことが出来ます。
他の紹介サイトの内容ですが、引用して紹介いたします。
sample32
(引用:http://blog.ks-product.com/javascript-common-parts-external/)
「function」や「var」など、今回説明していない部分もありますが、htmlを齧った皆さんならなんとなく言いたいことがお分かりいただけるのではないでしょうか?つまりいつもならhtmlファイルに直接書いているヘッダーの内容をJavascriptに定義しているんです。これが出来るとWEBページの作成時、ヘッダーをhtmlで入力するにはたった3行で済みますし、定型で入っているヘッダーをわざわざ1ページづつ直さなくてもJavascriptファイルの一つを直せば済んでしまうことになります。
こういった形でJavascriptを使うとhtmlを書く手間を削減する事も可能になるのです。

いかがでしょうか。Javascriptについて分かりやすく解説したつもりですが、興味を持っていただけたでしょうか?
次回は今回ご説明しなかった「function」や「var」について解説出来ればなと考えています。