スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサード リンク
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)

ジャバスクリプトって何ですか?

 2006-06-12
初心者ジャバ太郎 先生、ジャバスクリプトって一体なんですか?><
スクリプト先生 ジャバスクリプトとは、ページに動きを与える魔法のようなものじゃ。

例えば、日替わりのメッセージを、HPを更新しないでも自動で表示する機能や、お気に入りに登録するボタン、さらには自作でゲームも作れたりできる、スーパーミラクルなすごい言語なんじゃ。
初心者ジャバ太郎 でも、僕みたいな初心者でも作れるんですか?
スクリプト先生 もちろん作れる。ただし、ジャバを扱う最低限の知識は必要じゃ。
このサイトは「最低限の知識」を学ぶ、初心者のためのサイトじゃから安心してくれ。
初心者ジャバ太郎 はい、これから頑張ります!
スポンサード リンク
スポンサーサイト
カテゴリ :ジャバって何じゃ? トラックバック(-) コメント(-)

ジャバを動かす宣言

 2006-06-13
初心者ジャバ太郎 ところで、ジャバを動かすにはどうすればいいんですか?
スクリプト先生 まずは、ジャバを動かしたい場所に、「ジャバを動かすぞ!」という宣言を書く必要がある。

<script type="text/javascript">
スクリプトを記述する
</script>

宣言は必ず、 <script> というタグでサンドイッチしなければならないから気をつけてくれ。
初心者ジャバ太郎 なるほど。僕も試しに宣言してみます。
<script type="text/JAVASCRIPT">
~
</script>

できました。いやあ、初めてだと緊張しますねw
スクリプト先生 ちょっと待って、"text/javascript"が、"text/JAVASCRIPT"になっているぞ。
初心者ジャバ太郎 えっ、ちゃんと大文字で「JAVASCRIPT」って書いたんだけど…
スクリプト先生 宣言は「text/javascript」と小文字で書かなければいけない。もしかしたら、エラーが起きるかもしれないからじゃ。だから宣言はしっかりと小文字で書くのじゃ。
初心者ジャバ太郎 そうだったんですか。これから気をつけます(´・ω・`)
今日のまとめ
・ジャバを動かすには宣言が必要だ
・大文字や小文字には特に注意しよう
スポンサード リンク
カテゴリ :ジャバって何じゃ? トラックバック(-) コメント(-)

コメントアウトを忘れずに

 2006-06-13
スクリプト先生 ブラウザの中には、ジャバに対応してない特殊なブラウザもある。対応していないブラウザでJavaScriptを使うと、スクリプトの中身が丸見えになって、デザインが見づらくなってしまう。
初心者ジャバ太郎 そういう時はどうすればいいの?
スクリプト先生 "コメントアウト"という機能を使えばスクリプトの中身を見えなくする事ができる。
初心者ジャバ太郎 そのコメントアウトって、どうやって使えばいいの?
スクリプト先生 <!-- と //--> で挟んだものをコメントアウトすることができる。さっそく、コメントアウトをジャバに追加してみるぞ。
<script type="text/javascript">
<!--
~~
// -->
</script>

これでジャバ未対応のブラウザにも優しいホームページを作ることができるぞ。
スポンサード リンク
カテゴリ :ジャバって何じゃ? トラックバック(-) コメント(-)

ジャバを書いてみよう!

 2006-06-13
初心者ジャバ太郎 「書いてみよう!」って、まだ書き方教わってないんですけど(泣)
スクリプト先生 まあ、ごくごく簡単なスクリプトだから大丈夫じゃ。習うより慣れろっていうじゃろう。
それでは、実行すると「こんにちは」と表示するスクリプトを作ってみよう。

おなじみのジャバの宣言に
"こんにちは"を表示する記述「document.write("こんにちは");」を付け足して、
<script type="text/javascript">
<!--
document.write("こんにちは");
// -->
</script>

これで「こんにちは」と表示される。
「document.write」とは、「文章を書き出せ」という命令です。
スポンサード リンク
カテゴリ :ジャバって何じゃ? トラックバック(-) コメント(-)

扱える値

 2006-06-15
スクリプト先生 ジャバでは、以下の4つの値を扱うことができる。

数(かず)の値

・10進数 … 5, 21, 12 など
・8進数 … 056, 01 , 047 など // 注意※ 8進数は先頭に [ 0 ] をつけます!
・16進数 … 0x9A, 0x2D , 0xC9 など // 注意※ 16進数は先頭に [ 0x ]をつけます!
・小数 … 1.23, 2.34, 5.22 など

文字の値

文字の値は、必ず「ダブルクォーテーション」もしくは「シングルクォーテーション」で囲ってね!
・ひらがな … "こんにちは" など
・ローマ字 … "FOOOOO" など
・数字 … "123321" など

論理の値

論理の値は、「真」と「偽」を表すものです。「true」と「false」という2つのキーワードのどちらかを用います。

null値

null値とは、「何も無い」ことを表す特別な値です。
スポンサード リンク
カテゴリ :扱える値 トラックバック(-) コメント(-)

演算子って何ですか?

 2006-06-16
初心者ジャバ太郎 クリリンの・・・クリリンの事か~~~~~!!!!!!!
スクリプト先生 いきなり発狂してどうしたんじゃ、ジャバ太郎?
初心者ジャバ太郎 キエンザンの勉強をするなら、まずは悟空の気持ちになって考え…
スクリプト先生 ばかもん!「演 算 子」を勉強するのじゃ。断じてキエンザンではないぞ!!!
初心者ジャバ太郎 ちぇっ、つまんねーの。
スクリプト先生 ジャバ太郎はほっといて説明するとしよう。

要するに、数を足したり引いたりするときの記号、これを演算子と呼んでいる。
「 + 」(プラス)や「 - 」(マイナス)、「=」(イコール)など・・

記号の種類はもう少しあるが、とりあえず「プラスとかマイナスの記号を演算子と呼んでいるんだな。」と覚えて欲しい。
スポンサード リンク
カテゴリ :「演算子」 トラックバック(-) コメント(-)

算術演算子

 2006-06-17
スクリプト先生 前回のプラスとかマイナスのアレじゃ。

 演算子  演 算  使用例  意 味 
+足し算a+baにbを足す
-引き算a-baからbを引く
*かけ算a*baとbをかける
/割り算a/baをbで割る
%剰余算a%baをbで割った余り

※意味)
剰余算 …じょうよざん。割り算のあまり。割りきれないで残った数。
10と3を剰余算した場合、10 ÷ 3 = 3 余りが 1 。
余りの数は 1 なので、正解は 「 1 」 となる。
スポンサード リンク
カテゴリ :「演算子」 トラックバック(-) コメント(-)

比較演算子

 2006-06-18
スクリプト先生 名前のとおり、値の大きさを比較する演算子じゃ
これは使うことが多い演算子じゃから、しっかりと覚えるように

 演算子   使用例   意 味 
> a>b aはbより大きい
>= a>=b aはb以上
< a<b aはbより小さい
<= a<=b aはb以下
== a==b aとbは等しい
!= a!=b aとbは等しくない

初心者ジャバ太郎 「 == 」がイコールで、「 != 」がNOTイコールかぁ
「 >= 」と「 <= 」はそれぞれ、
≧(だいなり)≦(しょうなり)の記号として考えたほうが理解しやすいかもしれません
スポンサード リンク
カテゴリ :「演算子」 トラックバック(-) コメント(-)

文字列演算子

 2006-06-19
スクリプト先生 これは、文字と文字をくっつける際に使う演算子じゃ。
記号は「+」になるぞ。

// 変数pyaに"こん"を代入する
var pya = "こん" ;

// 変数pyuに"ちゃ!"を代入する
var pyu = "ちゃ!" ;

// 変数Mojiにpyaとpyuを足した値を代入する
var Moji = pya + pyu ;

変数Mojiの値は、pyaとpyuを足した値、「"こんちゃ!"」が代入される。
スポンサード リンク
カテゴリ :「演算子」 トラックバック(-) コメント(-)

条件分岐って何ですか?

 2006-06-19
スクリプト先生 条件分岐とは、
「もし×××ならば、△△△する」
といった処理のことじゃ

例えば、
もしサッカーで日本がブラジルに……

選択1.勝ったら
< スク水着て湘南のビーチで歌う >

選択2.それ以外
< 2ちゃんねるのサッカー板を荒らす >

といった具合に、条件を設定することができる、とても便利なものじゃ。
初心者ジャバ太郎 先生・・・とても・・・恥ずかしいです><
スポンサード リンク
カテゴリ :「条件分岐」 トラックバック(-) コメント(-)

繰り返しって何ですか?

 2006-06-19
スクリプト先生 繰り返しとは、
"ある条件が満たされるまで処理を繰り返す"ことじゃ
一般的には「ループ」とも呼ばれるぞ

例えば、1~10までの数字を順番に表示させたいとする
もっとも単純な方法は、1~10まで表示させる命令を10個書けばよい
だがそれでは、無駄が多すぎるんじゃ
1~10までなら問題はないが、100や1000と数字が増えていった場合は、
とても手に負えないじゃろう

そこで、繰り返しという命令が登場するわけじゃ
繰り返しを使えば、上記の方法よりも、とても簡単な記述で済むのじゃ!
初心者ジャバ太郎 普通に書くよりも、とても便利な命令なんですねw
スクリプト先生 そういうことじゃ。
しかし、絶対にありえない終了条件を指定してしまうと、
コンピュータがフリーズしてしまう可能性もあるので、
注意して記述してほしい
初心者ジャバ太郎 無限ループさせるのは危険ってことですね
ちょっと怖いけど、気をつけて作業します(((( ;゚Д゚)))
スポンサード リンク
カテゴリ :「繰り返し」 トラックバック(-) コメント(-)

for文 / 実行回数がわかる時

 2006-06-20
スクリプト先生 for文とは、回数を指定して実行する繰り返しじゃ。

文法

for ( 初期状態 ; 終了の条件 ; 変化する量 )
{ 実行命令; }

説明

初期状態とは、最初の変数の値を記述するところです。
終了の条件とは、繰り返しをストップさせる条件を記述します。
変化する量とは、繰り返しの処理が1回終了したごとに、どれくらい値が変化するかを記述します。

サンプル

それでは、1~10までの数字を順番に表示する文を作ってみましょう。

for (a=1 ; a<11 ; a++) {
	document.write(a);
}

「a=1」とは、aの値は1からループを始めるという命令です。
「a<11」とは、aが11未満になったらループを終了するという命令です。
「a++」とは、aがループするごとに、値を1ずつ増えていくという命令です。
スポンサード リンク
カテゴリ :「繰り返し」 トラックバック(-) コメント(-)

while文 / 実行回数がわからない時

 2006-06-20
スクリプト先生

while文とは、実行回数(ループの回数)がわからない時につかう命令じゃ。例えば、


「1×2×3×…と順番に数字をかけていって、合計が1000を超えるには何回かければいいか?」


1~10までの数字を順番に表示させる時とは違い、何回ループさせればいいかわからんじゃろ。while は、こういう時のための命令なんじゃ
文法は以下のとおりになる


while ( 条件 )
{ 命令; }

具体的な命令はチトむずかしいから省略するぞ!
スポンサード リンク
カテゴリ :「繰り返し」 トラックバック(-) コメント(-)

ダイアログボックスってなんじゃ?

 2006-06-20
ダイアログボックス クリックするとポップアップで操作を要求したり、エラーメッセージが表示されるアレです。

なお、Hなサイトでよくみかける広告は、「ポップアップウィンドウ」と呼ばれ、決してダイアログボックスではありません。
スポンサード リンク
カテゴリ :「ダイアログ」 トラックバック(-) コメント(-)

文字を表示する / alert();

 2006-06-21
スクリプト先生 ダイアログボックスに文字を入れて表示したい場合は、
alert(); をつかうんじゃ。
例えば、「貴様、見ているな?」をダイアログで表示するには、
()の中に文字を入れて……

■文法
alert("貴様、見ているな?");

と、すればいい。
スポンサード リンク
カテゴリ :「ダイアログ」 トラックバック(-) コメント(-)

関数って何ですか?

 2006-06-21

何回も出てくるプログラムを、関数として独立させて保存しておき、命令を使いたいときは、その関数名を書くだけで、呼び出すことができる機能です。


関数をつかえば、何回も同じプログラムを書く必要がなくなるので、ソースが短くなります。それにもし、プログラムを変更したくなった時に、何回も同じプログラムを書いていると、修正するのがとても面倒ですよね。関数をつかっていれば一箇所だけ修正すれば、関数で呼び出している全てのプログラムを修正してくれるので、とても楽チンなんですよ。

スポンサード リンク
カテゴリ :「関数」 / function トラックバック(-) コメント(-)

イベントって何ですか?

 2006-06-21
スクリプト先生

イベントとは、何らかのアクションを"きっかけ"にして、実行される動作のことを指すぞ。


例えば、
・「マウスポインタでクリックした時」
・「〃リンクにふれた時」
・「〃リンクから離れた時」
・「HPにアクセスした時」

…など、このようなアクションを起こした時に実行される動作を、"イベント"と呼んでいるんじゃ。
スポンサード リンク
カテゴリ :「イベント」 トラックバック(-) コメント(-)

onClick

 2006-06-21
スクリプト先生 マウスポインタでクリックした時に、実行させるイベントじゃ。

サンプル

それでは、クリックするとメッセージが表示されるように設定してみよう。


文法

<form>
<input type="button" value="クリック!" 
onClick="alert('こんにちは');">
</form>

説明文

formとは、クリックできるボタンやテキストボックスを表すときに使う記号です。
type="button"とは、ボタン型のフォームを作成しろという命令です。
value="クリック!"とは、ボタン型のフォームのタイトルに表示する名前を入力する所です。"クリック!"の文字を自由に変更することができます。
onClick=""とは、クリックで実行する命令のことです。
"alert('こんにちは');"とは、ダイアログのメッセージを表示しなさいという命令です。'こんにちは'の部分を自由に変更できます。
スポンサード リンク
カテゴリ :「イベント」 トラックバック(-) コメント(-)

onMouseOver

 2006-06-21
スクリプト先生 マウスポインタでリンクに触れた時に実行されるイベントじゃ。

サンプル

それでは、リンクに触れると"こんにちは"とメッセージが表示されるように設定してみよう。

リンクに触れてみて!

文法

<a href="#" onMouseOver="alert('こんにちは');">
リンクに触れてみて!</a>

説明文

a href=""とは、指定したページに移動させる命令です。今回のサンプルでは不要な命令なので、シャープを使って移動させないように設定しています。
onMouseOverとは、リンクが触れた瞬間に実行されるイベントです。
alert('こんにちは')とは、メッセージを表示させる命令です。'こんにちは'の部分は自由に変更できます。
スポンサード リンク
カテゴリ :「イベント」 トラックバック(-) コメント(-)

onMouseOut

 2006-06-21
スクリプト先生 マウスポインタがリンクから離れた時に、実行されるイベントじゃ。

サンプル

それでは、マウスポインタがリンクから離れた時に"こんにちは"とメッセージが表示されるように設定してみよう。

リンクに触れてから離してみて!

文法

<a href="#" onMouseOut="alert('こんにちは');">
リンクに触れてから離してみて!</a>

説明文

a href=""とは、指定したページに移動させる命令です。今回のサンプルでは不要な命令なので、シャープを使って移動させないように設定しています。
onMouseOutとは、リンクが離れた瞬間に実行されるイベントです。
alert('こんにちは')とは、メッセージを表示させる命令です。'こんにちは'の部分は自由に変更できます。
スポンサード リンク
カテゴリ :「イベント」 トラックバック(-) コメント(-)

onChange

 2006-06-21
スクリプト先生 フォームの内容が変化したら、何らかの処理を行いたい際に使うイベントじゃ。

サンプル

それでは、メニューを選択すると別のページに移動するボタンを作ってみよう。


文法

<script type="text/javascript"><!--
function myGo(){
  mySelect = document.myForm.myMenu.selectedIndex;
  location.href = 
document.myForm.myMenu.options[mySelect].value;
}
// --></script>

<form name="myForm">
<select name="myMenu" onChange="myGo()">
<option value="blog-entry-28.html">鳴かぬなら
<option value="blog-entry-27.html">寝巻きにするぞ
<option value="blog-entry-26.html">ホトトギス
<option value="blog-entry-25.html">by かんりにん
</select>
</form>

説明文

function myGo()とは、myGoという名前の関数を宣言しています。
location.hrefとは、a hrefと同じ機能で、指定したページに移動できる命令です。
form name=""とは、フォームに名前をつけることができる機能です。
selectとは、複数のリストボックスを作る時に使う記号です。
onChangeとは、フォームが変化したら命令を実行するイベントです。
option value=""の中にURLを記述すると、リストを選択した時にそのURL に移動します。
スポンサード リンク
カテゴリ :「イベント」 トラックバック(-) コメント(-)

フォームって何ですか?

 2006-06-21
インターネットで懸賞などに応募したことありませんか?白い箱に必要事項を入れて最後に「送信ボタン」を押して「応募を受け付けました」と言われるあれです。あれの名は「メールフォーム」といいます。テキストを入力するフォームや、ボタン型のフォームなど、フォームの種類は色々あり、フォームの作り方をマスターすれば、自作でメールフォームが作れたりします。
さて、次の項からは実際に、簡単なフォームの作り方を学んでいきましょう。
スポンサード リンク
カテゴリ :「フォーム」 / ボタンとか トラックバック(-) コメント(-)

フォームを設置する

 2006-06-21
スクリプト先生 クリックできるボタンや文字入力のテキストボックスなど、フォーム要素は複数存在する。それらを使用するには、まずフォームを設置する必要がある。
フォームを設置するには、<form>~</form>タグを使う。

■文法
<form>
<input type="button" value="フォーム">
</form>

■サンプル

と、こんな感じになる。
スポンサード リンク
カテゴリ :「フォーム」 / ボタンとか トラックバック(-) コメント(-)

リセットボタン

 2006-06-21
スクリプト先生 リセットボタンは、<form>~</form>の中の部品に入力した情報をリセット(初期値)に戻す事ができる。
リセットボタンを設置するには、inputタグのtypeの値を"reset"にする。

サンプル


文法

<form>
<input type="text" size="20">
<input type="reset" value="リセット">
</form>

説明

type="text"とは、テキストボックスのフォームを作成する命令です。
size="20"とは、テキストボックスの横幅を20px(ピクセル)にする命令です。
type="reset"とは、クリックするとテキストボックスの値をリセットする命令です。
スポンサード リンク
カテゴリ :「フォーム」 / ボタンとか トラックバック(-) コメント(-)

クリックでメッセージを表示させる

 2006-06-22
スクリプト先生 クリックでメッセージを表示させるスクリプトじゃ


サンプル

クリックしてください

文法(コピペで使えます)

<a href="#" onClick="alert('いやっほおおう');return false;">クリック</a>してください

説明

クリックがきっかけで実行されるイベント「onClick」の中に、メッセージを表示させる命令「alert」を書く。
また「return false」を記述しないと、「href」で指定したURLにジャンプしてしまうので注意してくれ。


ちなみにメッセージの中で改行させるには、「¥n」を使う。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)

ボタンをクリックしてメッセージを表示させる

 2006-06-22
スクリプト先生 ボタンをクリックしてメッセージを表示させるスクリプトじゃ


サンプル


文法(コピペで使えます)

<form>
<input type="button" onClick="alert('いやっほおおう');" value="クリック!">
</form>

説明

フォームの、ボタンを表示する「button」要素の中に、クリックがきっかけで実行されるイベント「onClick」と、メッセージを表示させる命令「alert」を書く。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)

クリックしてもURL先にジャンプさせない

 2006-06-22
スクリプト先生 リンクをクリックしてもURL先にジャンプさせない設定にするスクリプトじゃ


サンプル

クリックしてください

文法(コピペで使えます)

<a href="#" onClick="return false;">クリック</a>してください

説明

「onClick」の中に「return false」を書くことで、ページにジャンプする機能「href」を無効にする。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)

ボタンをクリックでページを移動させる

 2006-06-22
スクリプト先生 ボタンが押されたときにページを移動させてみよう


サンプル

クリックでYahooに移動します

文法(コピペで使えます)

<form>
<input type="button" onClick="location.href='http://www.yahoo.co.jp/'" value="クリック!">
</form>

説明

「location.href」という命令の中に移動させたいページのURLを書くことで、「href」を使わなくても、移動することができる。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)

前のページに戻るリンクを作る

 2006-06-22
スクリプト先生 前にページに戻るリンクを作る。ブラウザにある「戻る」と同じ機能じゃな


サンプル

クリックしてください

文法(コピペで使えます)

<a href="JavaScript:history.go(-1);">クリック</a>してください

説明

アンカーのクリックにJavaScriptの起動を設定する場合は、「onClick」の代わりに「a href="JavaScript:~~"」を使っても設定できる。「history.go(-1)」とは、1つ前のページに戻る命令じゃ。
「-1」の部分を「2」にすると、2つ先のページに進むという命令になる。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)

関数でスクリプトを呼び出す

 2006-06-22
スクリプト先生 <script>内に関数を定義しておいて、それを呼び出すぞ


サンプル



文法(コピペで使えます)

<script type="text/javascript">
<!--
function kansu(){
alert("いやっほおおう");
}
// -->
</script>

<input type="button" onClick="kansu();" value="クリック!">

説明

関数は「function」の中に好きな英文字と「()」を入れて設定する。このサンプルでは、「kansu()」が呼び出す関数じゃ。この「kansu()」をonClickの中に記述して、関数を呼び出したんじゃ。
スポンサード リンク
カテゴリ :JavaScriptの小技 トラックバック(-) コメント(-)
≪ トップページへこのページの先頭へ  ≫ 次ページへ ≫
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。