ジャバスクリプト講座その８
信用なくなっちゃうよ。干上がっちゃうよ。
すごく眠かったんです。。。ごめんなさい。
さて、昨日の続きです。
今回はひとつずつプログラムを見ていきましょう。
var gazo=new Array(5) ;
これは配列と行って変数のパワーアップ版のようなものです。
上記のような記述をすることによって
変数[数字]
という表示ができるようになります。
varはたぶんvariableの略で、これは変数ですよ
と宣言しているのだと思います。varは書いても書かなくても
だいたい動くのでプロを目指さない限りはあんまり気にしなくて
いいかもしれません。
new Array(5) は新しく変数を配列として使用しますよ。
という宣言です。宣言というのはあらかじめこれはこういう使い方を
しますとコンピューターに教えてあげることです。教えてあげないと
コンピューターは無視してしまうので、教えてあげなくてはなりません。
そして（）の中の数字はその配列を何個使うかを宣言しています。
したがってvar gazo=new Array(5) ;
は、gazoという変数を配列として使用して、その配列を５個位使います
ということをコンピューターへ伝える記述です。
ちなみにgazoという変数はこの宣言のあとは配列としてしか使えないので
gazo="aaa";
という記述をするとエラーが出ます。
※この配列という処理のメリットについては今回の説明である程度
わかると思いますのでこのまま読み進めて下さい。
gazo[1]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/c2/d8/j/o0481036010588423849.jpg";
gazo[2]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/33/c0/j/o0481036010588423790.jpg";
gazo[3]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/ca/fa/j/o0360048110588423788.jpg";
次にこの部分です。
配列の宣言で配列に変換した変数は
gazo[0]
gazo[1]
gazo[2]
gazo[3]
gazo[4]
というような書き方をします。
配列の始めは[1]ではなく[0]
なので忘れないように気をつけてください。
ですが、今回はあえ[0]を無視しました。
あんまり深く考えなくても大丈夫です。
それ以外は変数の書き方と一緒です。
ここで疑問が出る人もいるかも知れません
わざわざ面倒な配列を使わなくても
gazo1
gazo2
・
・
・
gazo4
と書けばいいのでは？
そうですね確かに変数に値を入れるだけならそれでも良いのですが
この後の処理によって変数を操作するときに非常に厄介な事になるのです。
そのことについてはこの後の項目で説明します。
random=Math.floor(Math.random()*3+1);
document.write(random);
さて、ちょっとややこしい記述が出てきました。
英語も数学も苦手な人は敬遠したくなるかも
しれませんが、もうちょっと頑張りましょう。
まずここで何をしようとしているかというと
randomという変数に1～３までの数字をランダムに
入れる。という処理をしています。
そして最後にそのランダムで選ばれた数字を画面に表示しています。
～これ以降、数学が苦手な人は飛ばしていただいて結構です。～
Math.foor()は小数点以下の数字を削除するという命令です。
()の中に入っているMath.random()という命令はランダムな数字を
取り出してくれる命令なのですが、0.******というような小数点以下の
数字しか取り出してくれません。
なので、まずMath.random()で取り出した0.*****を３倍して
１を足します。すると１.*****か２.*****か３.*****がそれぞれ３分の１の
確率で取得できます。
なんで取得できるのか、うまく説明できませんが、１～９までの数字に
２をかけたり３をかけたりと電卓で計算してもらえればそのようになる
ことが確認できると思います。
そして取得した1.*****2.*****3.*****から.*****の部分を
Math.floor()で削除すれば、変数randomの中身は1か2か3の
数値がそれぞれ３分の１の確率で取得されます。
～数学的なお話ここまで～
まとめると、
random=Math.floor(Math.random()*終の数字+始めの数字);
で、始めの数字から終の数字までの中からランダムに１つだけ数値を取得できます。
hyoji=gazo[random];
一見単純に見えますが、ちょっとだけややこしいです。
hyojiという変数の中にgazo[1]、gazo[2]、gazo[3]をそれぞれ3分の1の確率で
いれなさいという命令です。
gazo[]の[]の中に変数randomを入れることによって
gazo[1]、gazo[2]、gazo[3]をそれぞれ3分の1の確率でhyojiに入れることができます。
このとき上方で書きましたが、gazo1、gazo2、gazo3という変数で書いてしまうと、
困ってしまうことがわかると思います。
gazorandom???という記述では全く別の変数になりますね。
document.write("<img src='" + hyoji + "' />");
そして最終的にhyojiに入ったhttp://～を参照して上記記述により読出しています。
ブラウザを更新する度に3つの画像がそれぞれ切り替わると思います。
今回は非常に多くのテクニックを使用しています。非常に内容の濃い回
だったと思います。不明な点はコメントなどでお答えしますので遠慮なくどうぞ
次回はループ処理の説明をします（今晩の更新予定）よろしくお願いします
↓ジャニースジャンルが人気？
携帯用掲示板サイト-トピッキング-
すごく眠かったんです。。。ごめんなさい。
さて、昨日の続きです。
今回はひとつずつプログラムを見ていきましょう。
var gazo=new Array(5) ;
これは配列と行って変数のパワーアップ版のようなものです。
上記のような記述をすることによって
変数[数字]
という表示ができるようになります。
varはたぶんvariableの略で、これは変数ですよ
と宣言しているのだと思います。varは書いても書かなくても
だいたい動くのでプロを目指さない限りはあんまり気にしなくて
いいかもしれません。
new Array(5) は新しく変数を配列として使用しますよ。
という宣言です。宣言というのはあらかじめこれはこういう使い方を
しますとコンピューターに教えてあげることです。教えてあげないと
コンピューターは無視してしまうので、教えてあげなくてはなりません。
そして（）の中の数字はその配列を何個使うかを宣言しています。
したがってvar gazo=new Array(5) ;
は、gazoという変数を配列として使用して、その配列を５個位使います
ということをコンピューターへ伝える記述です。
ちなみにgazoという変数はこの宣言のあとは配列としてしか使えないので
gazo="aaa";
という記述をするとエラーが出ます。
※この配列という処理のメリットについては今回の説明である程度
わかると思いますのでこのまま読み進めて下さい。
gazo[1]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/c2/d8/j/o0481036010588423849.jpg";
gazo[2]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/33/c0/j/o0481036010588423790.jpg";
gazo[3]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/ca/fa/j/o0360048110588423788.jpg";
次にこの部分です。
配列の宣言で配列に変換した変数は
gazo[0]
gazo[1]
gazo[2]
gazo[3]
gazo[4]
というような書き方をします。
配列の始めは[1]ではなく[0]
なので忘れないように気をつけてください。
ですが、今回はあえ[0]を無視しました。
あんまり深く考えなくても大丈夫です。
それ以外は変数の書き方と一緒です。
ここで疑問が出る人もいるかも知れません
わざわざ面倒な配列を使わなくても
gazo1
gazo2
・
・
・
gazo4
と書けばいいのでは？
そうですね確かに変数に値を入れるだけならそれでも良いのですが
この後の処理によって変数を操作するときに非常に厄介な事になるのです。
そのことについてはこの後の項目で説明します。
random=Math.floor(Math.random()*3+1);
document.write(random);
さて、ちょっとややこしい記述が出てきました。
英語も数学も苦手な人は敬遠したくなるかも
しれませんが、もうちょっと頑張りましょう。
まずここで何をしようとしているかというと
randomという変数に1～３までの数字をランダムに
入れる。という処理をしています。
そして最後にそのランダムで選ばれた数字を画面に表示しています。
～これ以降、数学が苦手な人は飛ばしていただいて結構です。～
Math.foor()は小数点以下の数字を削除するという命令です。
()の中に入っているMath.random()という命令はランダムな数字を
取り出してくれる命令なのですが、0.******というような小数点以下の
数字しか取り出してくれません。
なので、まずMath.random()で取り出した0.*****を３倍して
１を足します。すると１.*****か２.*****か３.*****がそれぞれ３分の１の
確率で取得できます。
なんで取得できるのか、うまく説明できませんが、１～９までの数字に
２をかけたり３をかけたりと電卓で計算してもらえればそのようになる
ことが確認できると思います。
そして取得した1.*****2.*****3.*****から.*****の部分を
Math.floor()で削除すれば、変数randomの中身は1か2か3の
数値がそれぞれ３分の１の確率で取得されます。
～数学的なお話ここまで～
まとめると、
random=Math.floor(Math.random()*終の数字+始めの数字);
で、始めの数字から終の数字までの中からランダムに１つだけ数値を取得できます。
hyoji=gazo[random];
一見単純に見えますが、ちょっとだけややこしいです。
hyojiという変数の中にgazo[1]、gazo[2]、gazo[3]をそれぞれ3分の1の確率で
いれなさいという命令です。
gazo[]の[]の中に変数randomを入れることによって
gazo[1]、gazo[2]、gazo[3]をそれぞれ3分の1の確率でhyojiに入れることができます。
このとき上方で書きましたが、gazo1、gazo2、gazo3という変数で書いてしまうと、
困ってしまうことがわかると思います。
gazorandom???という記述では全く別の変数になりますね。
document.write("<img src='" + hyoji + "' />");
そして最終的にhyojiに入ったhttp://～を参照して上記記述により読出しています。
ブラウザを更新する度に3つの画像がそれぞれ切り替わると思います。
今回は非常に多くのテクニックを使用しています。非常に内容の濃い回
だったと思います。不明な点はコメントなどでお答えしますので遠慮なくどうぞ
次回はループ処理の説明をします（今晩の更新予定）よろしくお願いします
↓ジャニースジャンルが人気？
携帯用掲示板サイト-トピッキング-
ジャバスクリプト講座その７
昨晩は更新し忘れて寝てしましました。
読んでくれている方申し訳ありません(;^_^A
気を取り直して、本日はHTMLとジャバスクリプトを使った
視覚的なプログラムをつくってみようと思います。
具体的には更新する度にランダムで画像が表示されるような
プログラムを作ります。
早速ソース（プログラムの記述のこと）を公開します。
<script type="text/javascript">
<!--
var gazo=new Array(5) ;
gazo[1]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/c2/d8/j/o0481036010588423849.jpg";
gazo[2]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/33/c0/j/o0481036010588423790.jpg";
gazo[3]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/ca/fa/j/o0360048110588423788.jpg";
random=Math.floor(Math.random()*3+1);
document.write(random);
hyoji=gazo[random];
document.write("<img src='" + hyoji + "' />");
// -->
</script>
さあ、かなり難易度が上がってきましたね。
見た目的にもごちゃごちゃしてわかりにくいかとは思いますが
ひとつずつ見ていけば必ず理解できますので
諦めずについてきてくださいね。
とはいっても説明は今晩の更新からしていこうと思います。
焦らずゆっくりやっていきましょう。それまで
上記ソースをコピーして自身のPCで確認していただけると幸いです。
例によって質問等はコメントなどを利用して遠慮なくしていただければ幸いです(^∇^)
すこしずつアクセスも増え始めました↓
http://topiking.com
読んでくれている方申し訳ありません(;^_^A
気を取り直して、本日はHTMLとジャバスクリプトを使った
視覚的なプログラムをつくってみようと思います。
具体的には更新する度にランダムで画像が表示されるような
プログラムを作ります。
早速ソース（プログラムの記述のこと）を公開します。
<script type="text/javascript">
<!--
var gazo=new Array(5) ;
gazo[1]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/c2/d8/j/o0481036010588423849.jpg";
gazo[2]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/33/c0/j/o0481036010588423790.jpg";
gazo[3]
="http://stat.ameba.jp/user_images/20100613/06/onesscripter/ca/fa/j/o0360048110588423788.jpg";
random=Math.floor(Math.random()*3+1);
document.write(random);
hyoji=gazo[random];
document.write("<img src='" + hyoji + "' />");
// -->
</script>
さあ、かなり難易度が上がってきましたね。
見た目的にもごちゃごちゃしてわかりにくいかとは思いますが
ひとつずつ見ていけば必ず理解できますので
諦めずについてきてくださいね。
とはいっても説明は今晩の更新からしていこうと思います。
焦らずゆっくりやっていきましょう。それまで
上記ソースをコピーして自身のPCで確認していただけると幸いです。
例によって質問等はコメントなどを利用して遠慮なくしていただければ幸いです(^∇^)
すこしずつアクセスも増え始めました↓
http://topiking.com
ジャバスクリプト講座その６＜htmlについて２＞
今回もジャバスクリプトとは少し離れて、htmlについて
語ります。
前回説明した通りインターネット上のサイトはほぼすべてhtmlタグを
使用して作成されています。
したがってhtmlを理解すれば誰もがホームページを作成できます。
非常に便利なものなので、簡単なものだけでも知っているとプログラマー
を目指す方にとってはとても有利になると思います。この機会に是非
少しでも覚えておきましょう。
まずは<a>タグといわれるものです。<a>タグはリンクを張るための
タグで非常に便利でよく使われるものです。
例えば、
<a href="http://ameblo.jp">http://ameblo.jp</a>
と書くと、ブラウザ上では
http://ameblo.jp
と表示されます。
色が変わるのでわかりやすいと思います。文字をクリックしてみると
アメブロのトップページへ移動すると思います。
どうでしょうか？うまくリンクしましたか？
この場合href=""の""に囲まれた部分に移動させたいサイトのURL（http://で始まるアルファベットの羅列）
を記述します。<a>ここはなにを書いても結構です</a>
ここはなにを書いても結構です
そんなに難しいものではないと思います。
是非試してみて下さい。
次は<img>タグについてです。
イメージタグは画像を表示するためのタグです。
<img src="http://stat.ameba.jp/user_images/20100604/00/onesscripter/e1/8f/p/t01110111_0111011110573594805.png" />
少し長くなりましたが、このように記述するだけで、src=""の""に囲まれた部分に指定した画像を表示することができます。
今回はアメブロの私のフォルダに有る画像を指定していますが、別のメンバー方のブログでも表示することができましたか？
上記の様に表示されれば成功です。
今回はここまでですお疲れ様でした。
明日は・・・何から説明しようかなぁ・・・
語ります。
前回説明した通りインターネット上のサイトはほぼすべてhtmlタグを
使用して作成されています。
したがってhtmlを理解すれば誰もがホームページを作成できます。
非常に便利なものなので、簡単なものだけでも知っているとプログラマー
を目指す方にとってはとても有利になると思います。この機会に是非
少しでも覚えておきましょう。
まずは<a>タグといわれるものです。<a>タグはリンクを張るための
タグで非常に便利でよく使われるものです。
例えば、
<a href="http://ameblo.jp">http://ameblo.jp</a>
と書くと、ブラウザ上では
http://ameblo.jp
と表示されます。
色が変わるのでわかりやすいと思います。文字をクリックしてみると
アメブロのトップページへ移動すると思います。
どうでしょうか？うまくリンクしましたか？
この場合href=""の""に囲まれた部分に移動させたいサイトのURL（http://で始まるアルファベットの羅列）
を記述します。<a>ここはなにを書いても結構です</a>
ここはなにを書いても結構です
そんなに難しいものではないと思います。
是非試してみて下さい。
次は<img>タグについてです。
イメージタグは画像を表示するためのタグです。
<img src="http://stat.ameba.jp/user_images/20100604/00/onesscripter/e1/8f/p/t01110111_0111011110573594805.png" />
少し長くなりましたが、このように記述するだけで、src=""の""に囲まれた部分に指定した画像を表示することができます。
今回はアメブロの私のフォルダに有る画像を指定していますが、別のメンバー方のブログでも表示することができましたか？
上記の様に表示されれば成功です。
今回はここまでですお疲れ様でした。
明日は・・・何から説明しようかなぁ・・・
ジャバスクリプト講座その５
さて、前回までで変数の概要が理解できたと思います。
プログラミングは
・変数
・ループ（for文、while文）
・条件分岐（if文、case文）
の三項目が理解できれば、あとはやりたい事を
本など参考にしながらやっていけば良いだけです。
とにかく上記の３つ項目をしっかり覚えていきましょう。
と、ここまで書いておきながら、腰を折る様で申し訳ないのですが
for文やif文の使い方だけを説明してもわかりにくいと思うので
視覚的に理解できるようにするために、今回は簡単なhtmlタグの
説明と、便利なプログラミング命令文を紹介しようと思います。
まず、インターネットをやっていると、htmlやタグという言葉を
よく耳にすると思います。htmlとはこのアメーバブログなど、
インターネット上のサイトを作るための言語でタグと言う
<>で囲まれた記号を使い、様々な効果や演出
をすることができます。
このタグを使うことによって絵を表示させたり、文字の色を変えたり
と簡単な操作ができます。例えば<u>アンダーライン</u>
と記述するとインターネットエクスプローラー
などのブラウザ上ではアンダーライン←このように表示されます。
このタグに付いては、簡易なものなら、このアメブロでも使用できますので
是非試してみて下さい。
<font color="red" size="5">こんにちは</font>
とブログに書いてみて下さい。どのように表示されましたか？
他にも文字の装飾用のタグには以下のようなものがあります。
<em>強調</em>
5<sup>2</sup>
<del>削除</del>
文字の装飾だけでなく他にも画像を読み込んだり、リンクを張ったりもできます。
明日はその画像の読み込みとリンクについて説明しようと思います。
本日もここまで読んでいただきありがとうございました。
こちらも楽しいですよ。↓
トピッキング
プログラミングは
・変数
・ループ（for文、while文）
・条件分岐（if文、case文）
の三項目が理解できれば、あとはやりたい事を
本など参考にしながらやっていけば良いだけです。
とにかく上記の３つ項目をしっかり覚えていきましょう。
と、ここまで書いておきながら、腰を折る様で申し訳ないのですが
for文やif文の使い方だけを説明してもわかりにくいと思うので
視覚的に理解できるようにするために、今回は簡単なhtmlタグの
説明と、便利なプログラミング命令文を紹介しようと思います。
まず、インターネットをやっていると、htmlやタグという言葉を
よく耳にすると思います。htmlとはこのアメーバブログなど、
インターネット上のサイトを作るための言語でタグと言う
<>で囲まれた記号を使い、様々な効果や演出
をすることができます。
このタグを使うことによって絵を表示させたり、文字の色を変えたり
と簡単な操作ができます。例えば<u>アンダーライン</u>
と記述するとインターネットエクスプローラー
などのブラウザ上ではアンダーライン←このように表示されます。
このタグに付いては、簡易なものなら、このアメブロでも使用できますので
是非試してみて下さい。
<font color="red" size="5">こんにちは</font>
とブログに書いてみて下さい。どのように表示されましたか？
他にも文字の装飾用のタグには以下のようなものがあります。
<em>強調</em>
5<sup>2</sup>
<del>削除</del>
文字の装飾だけでなく他にも画像を読み込んだり、リンクを張ったりもできます。
明日はその画像の読み込みとリンクについて説明しようと思います。
本日もここまで読んでいただきありがとうございました。
こちらも楽しいですよ。↓
トピッキング