javascriptの説明

まずは実際にjavascripとはどのようなものかを見て下さい

java


ホームページの作り方手順

ホームページの作り方の手順【javascript編】です
まずはじめに自分のパソコンのデスクトップ上のフォルダを作ります。

デスクトップ上とは、パソコンを立ち上げた時に出てくる画面のことです。

デスクトップ上の何もない所(アイコンなどの上にカソールを合わせない所)でマウスを右クリックします。

新規作成から、フォルダを作ります。
作成しましたら、そのフォルダを分かりやすいように名前をつけます。
名前は好きな名前で良いです。
ここでは「ホームページ作り」としておきます。
そのフォルダを開いて今度は「ホームページ作り」の中で右クリックして新規作成から
テキストドキュメントを作成します。
新しいドキュメントができましら、そのテキストドキュメントにも好きな名前をつけます。
ここでは「トップページ」としておきます。
これでホームページ作りのフォルダの中に「トップページ.txt」が出来上がった事になります。
(ウインドウズではテキストドキュメントは.txtは自然についてきます。トップページとだけ入力します)
そのテキストドキュメントを開いて
次のようなタグを入力します。


<html>
<head>
<title></title>
</head>
<body>
</body>
</html>

入力しましたら今度はホームページのタイトルになる部分を入れておきます
<title>~</title>
部分に好きなタイトルを入れます。
ここではホームページ作りに挑戦と入れておきます。


<html>
<head>
<title>ホームページ作りに挑戦</title>
</head>
<body>
</body>
</html>

同じく今度はホームページの内容となる部分に

javascriptのプログラムを
<body>~</body>の間に入れます


<html>
<head>
<title>ホームページ作りに挑戦</title>
</head>
<body>
<script type=”text/javascript”>
<!–
alert(‘はじめまして’);
// –>
</script>
</body>
</html>

として保存をします。
保存する場合は
拡張子は.txtではなく.html形式で保存をします

ちなみにここではindex.htmlとしておきます
indexの部分は好きな名前でかまいません

こうしてできな
index.htmlのファイルを開くと
ダイアログボックス(アラート)が表示されます

javascriptの解説

●javascript(ジャバスクリプト)
javascriptとは
ホームページを作る際に日付や時計などを入れたり写真を自動で入れ替えたりさせます。

javascriptはスクリプト言語の一種です。と言っても解りずらいですね

スクリプトとは色々あるプログラム言語の中の一種です。

HTML内にプログラムを埋め込んでいきます。

こんな感じです


見本

このようにメモ帳で書いたものをhtml形式で保存をして
ブラウザで表示させると、
記述した通りに動きます

javascriptは画像などを入れ替えたり計算をするのに使われます。
javaと言う物がありますがjavascriptは同じものと勘違いされますが全く別物です。


●javascriptの記載注意点
javascriptは大文字と小文字を区別します
≪例≫penとPENは違う物です


●javascriptの記述する場所
記述する場所はHTML内のhead間かbody内に記述します
基本的にはhead間に記載します


●さっそくjavascriptを書いてみます

ここからは自己責任のもとでお願いします。

HTML内の<head>~</head>部分に記載します

ブラウザが立ち上がると同時にダイアログ(アラート)が出るプログラムです


アラート

≪例≫

<html>
<title>ジャバスクリプトの書き方</title>
<head>

<script type=”text/javascript”>
<!–
alert(“ダイアログボックスnアラート”);
//–>
</script>

</head>
<body>
ブラウザ部分
</body>
</html>

【書き方の意味】

<script type=”text/javascript”>  //はジャバスクリプトを使いますよと言う宣言です
<!–                  //コメントタグ開始を意味します(コメントタグはのちに紹介します)
alert(“ダイアログボックスnアラート”);       //アラートに書き出す文字です(アラートとは警告の小さい窓です) 
//–>               //コメントタグ終了を意味をします
</script>            //スクリプトがここで終わる事を表します

<script type=”text/javascript”> ~ </script>
はジャバスクリプトを使いますよと言う宣言です

<!– ~ //–>
はコメントタグです ブラウザによってはjavascriptが表示できないので
スクリプトをそのまま出力してしまい、ソースだけが表示されてしまう状態をふせぐためコメントタグを入れます

実際のダイアログボックス


●javascriptの書き方
スクリプトは基本的にはhead間に記述しますがdocument.writeを書く場合はbody間に記入します
のちに説明しますがdocumentとはオブジェクトでwriteはメソッドになります
ドキュメントに書き出すという命令をメソッドからオブジェクトに渡します。
よってブラウザ(今見ているインターネット画面がブラウザの画面です)に指示した物が表示されます

≪例≫

<html>
<title>ジャバスクリプトの書き方</title>
<head>
</head>
<body>


<script type=”text/javascript”>
<!–
document.write(“おはようございます”);
//–>
</script>

</body>
</html>

結果
ブラウザに「おはようございます」と指表示されます


●オブジェクトメソッドプロパティパラメーター

document.write()
はそれを表示してと言う命令ですdocumentはhtmlを書きだすオブジェクトでwriteはデーターを書きだすメソッドです

メソッドの多くは何かパラメーターを渡さないと結果を返しませんメソッドの後には()括弧がつきます

ですのでalertはメソッドになります。

document.write()で囲んだ部分を表示すると言う事です
スクリプトの終わりにはセミコロン;をいれます。ここで終わりを意味します

プロパティとは(値)オブジェクトが持っている情報
対象となるオブジェクトの後に.ドットを付けて、その後に続けて書きます

≪例≫
documnet.bgColor=値

プロパティはメソッドと違い()括弧をつけません。

あらかじめ用意されているオブジェクがあります
オブジェクトにはそれぞれ得意とする使い方があります

オブジェクト指向とは?


●オブジェクトの一部例です
Array配列
Date日時
document文書
Eventイベント
Formフォーム
Historiヒストリー
Image画像
Math計算
使い方は後々紹介します


●javascriptのプログラムの流れ
プログラムの読み込みは上から下へ左から右へ読み込まれます
≪例≫

<script type=”text/javascript”>
<!–
alert(“おはようございます。アラート一回目”);
alert(“こんにちは、アラート二回目”);
//–>
</script>

ダイアログボックス(アラート)を2回出します
一回目に出るのがおはようございます。で
二回目に出るのがこんにちは、です


●コメントも書けます
≪例≫

<script type=”text/javascript”>//コメントが書けます
<!–
document.write/*プログラムの中にも書けます*/(“おはようございます”);
//–>
</script>

// コメントとして扱われます(一行をコメントとして扱います)
/* ~ */ コメントとして扱われます(プログラムの中に書く事もできます)


●タグも入れることができます


<script type=”text/javascript”>
<!–
document.write(“<font color=’#ff0000′>おはようございます。赤色で表示します</font>”);
//–>
</script>

結果

————————————–

ダブルクオーテンション ” ”の中にダブルクオーテンションを書く場合は
ダブルクオーテンションではなくシングルクオーテンションを使います
逆にシングルクオーテンションの中にシングルクオーテンションを書く場合は
ダブルクオーテンションを使います。解りやすく言うと、
コンピューターがどこからどこまでか解らなくなるので解りやすくするためにします


●文字列をつなげることもできます


<script type=”text/javascript”>
<!–
document.write(“今日は” + “いい天気ですね”);
document.write(“今日は” , “いい天気ですね”);
//–>
</script>

結果

 + の代わりに , も使えます
(“文字列” + “文字列” )と(“文字列” , “文字列”)は同じ役割です


変数
変数はよく箱に例えられます

≪例≫

<script type=”text/javascript”>
<!–
var mybox = 3;
document.write(“箱の中身は”+ mybox +”個です”);
//–>
</script>

結果

変数とは簡単に言えば代入する箱と考えます

mybox = 3

の場合は、myboxと言う変数に3が入っていますよと言う事です

箱の中身は3個ですとブラウザに書きこまれます

本来は
var mybox = 3と書くのですが
varは予約語で変数宣言です
varは省略可能です。

var 左 = 右の値
右の値を左の変数に代入するという意味です
この時の=は数学のイコールとは別で代入すると覚えます
≪例≫
i=2
i=i+3

iに5を代入する

変数は大変便利で色々な物を入れることができます。数字、文字、オブジェクトも入れられます


●使える変数名
英数字または、アンダーバーなどが使えます
逆に使えないものは数字で始まる物や予約語などは使えません

≪使用可能例≫
dx 頭文字が半角英で始まる物
_dx アンダーバー
svar 予約語が中に含まれている物は使用できます

≪使用不可例≫
変数a 日本語などの文字
1abc 数字から始まるもの
var 予約語などは使用できません


●演算子
4則演算
+は+
-は-
×は*
÷は/を表します

————————————–
演算子は優先順位があります

優先順位(プライオリティ)は下に行くほど優先順位が低いです

優先順位 演算子 意味
高い () 括弧
++ –  増減 
* / %  掛け算、割り算、剰余
+ - 足し算や引き算 
< <= >= > 比較
== !=  比較
&&  なおかつ
|| または
~? ~: ~( 条件演算子
= += -= 代入
低い , カンマ


●文字列オブジェクト

文字列はダブルクオーテンションかシングルクオーテンションで囲まなければなりません
変数mojiに文字列”BOOK”を入れます。これで変数moji は文字列オブジェクトになります。

≪例≫
BOOKの大文字を小文字に変えます


<script type=”text/javascript”>
<!–
var moji = “BOOK”;
var roji = moji.toLowerCase();
document.write(roji);
//–<
</script>

【メッソドの一部例です】
big 文字を大きくする
bold文字を太くする
strike文字に打ち消し線をつける
small文字を小さくする

fontcolorフォントカラーを変える
fontsizeフォントサイズを変える

toLowerCase大文字を小文字にする
toUpperCase小文字を大文字にする

など


●配列

new Arrayのオブジェクトはあらかじめ用意された物です。配列も変数になります。


<script type=”text/javascript”>
<!–
box = new Array(3);
box[0] = “田中”;
box[1] = “斉藤”;
box[2] = “佐藤”;
document.write(box[0]);
//–>
</script>

結果

————————————–

()は引数です。呼び方はひきすうです。
引数内は書かなくても良いです
呼び出されます

仮引数と実引数があります

[]は添字です。呼び方はそえじです。
添字は空の状態でも良いです
lengthは数

プログラムはいろいろな書き方があります
書き方などは人によって違います


<script type=”text/javascript”>
<!–
box = new Array(“田中”,”斉藤”,”佐藤”);
document.write(box[1]);
//–>
</script>

順番(“0″,”1″,”2”)

結果

————————————–


<script type=”text/javascript”>
<!–
box= [“田中”,”斉藤”,”佐藤”];
document.write(box[0]);
//–>
</script>

順番[“0″,”1″,”2”]

結果

————————————–

どれも作りは同じです


●乱数(ランダム)


<script type=”text/javascript”>
<!–
a = new Array();
a[0] = “おはようございます” ;
a[1] = “こんにちは”;
a[2] = “こんばんは”;
i=Math.floor(a.length * Math.random());
document.write(a[i]);
//–>
</script>

結果は

(おはようございます)か(こんにちは)か(こんばんは)のどれかがでます

————————————–

lengthはその数の分だけ処理をします。
乱数はMathオブジェクトのrandomメソッドを使います。
メソッドを変えることによって処理を変えます。
Math.floor()小数点以下を切り捨て3.5なら3
Math.ceil()小数点以下を切り上げ3.5なら4
Math.round()四捨五入


●プログラム
プログラムは極力使える物は使い効率を上げるために再利用します
その方が間違いやバグ(プログラム中の誤りでおかしな動作をする)が起こりにくいです


●関数

関数はfor文などと違い呼び込まれるまで何もしません

例としましては
ページが読み込まれたら処理の場合onLord
クリックされたら処理の場合onClick
マウスが乗ったら処理の場合onMousuover
これをイベントハンドラといいます

関数はどこに書いても構いません
後ろに書いても前に書いても

≪例≫


<script type=”text/javascript”>
<!–
function moji()
{
document.write(“テスト”);
document.write(“<br>”);
}
moji();
moji();
//–>
</script>

結果このように表示されます

———————————–

function moji()
の部分が関数名になります自分の好きな文字を入れる事が出来ます

{ }は関数を起動したときに{ }で囲まれた部分を実行すると言う意味です
( )は引数です

同じページ内であれば離れた所からでも関数を呼び出せます


<script type=”text/javascript”>
<!–
moji();
//–>
</script>

こんな感じに表示されます

———————————–

【イベントハンドラの一部例】
onBlur  フォーム上のマウスポインターがフォームを外れた時
onClick クリックされた時
onChange  変化させた時
onFocus   フォームに重なったとき
onLoad   ページが読み込まれたとき
onMouseOver マウスがアンカー(リンク文字)に乗ったとき
onSelect テキストを選択された時
onSubmit フォームの内容が送信されたら
onUnLooad ページを移動したとき

関数の()の中の引数と戻り値returnは省略して書かなくても良いです。
又は、どちらかだけでも良いです。returnを書いて引数を書かない場合や
引数を書いてreturnを書かなくても良いです。


●returnリターン戻り値
returnは文字列や数字やオブジェクトなどを返します。
だけど、返す値は一つだけで、複数返すことはできません


●for文
for文は繰り返し文に使います


<script type=”text/javascript”>
<!–
for(i=0;i<=6;i++){
document.write( i +”<br>”);
}
//–>
</script>

結果はこのようになります

————————————–

段落を変えながら0から6に等しくなるまで、つまり6になるまで数字を表示させます。
i<=6で判定しています。条件を満たしていなければもう一回ループします(回る)
i++はiを一個づつ追加する意味です
++は一ずつ増やす意味です
–は一ずつ減らす意味です

関係演算子の見方
左<右 左はみぎより小さい
左>右 左はみぎより大きい
左<=右 左はみぎより小さいか等しい
左>=右 左は右より大きいか等しい
左==右 左と右は等しい
左!=右 左と右は等しくない


●タグを利用して文字のサイズの大きさを変更することもできます

こんな感じで繰り返しに使います
五段階に文字を大きくします
五回繰り返すと言う命令文です


<script type=”text/javascript”>
<!–
for(i=1;i<=5;i++){
document.write(“<font size=”+i+”>”);
document.write(“こんにちは”);
document.write(“</font>”);
}
//–>
</script>

結果はこのようになります

———————————————–

i<=5で判定しています。条件を満たしていなければもう一回ループします(回る)

i++はiを一個づつ追加する意味です
i–だった場合はiを一個づつ減らす意味です


●for文から抜ける処理breke

(4)で抜ける処理です。


<script type=”text/javascript”>
<!–
for(i=0;i<=6;i++){
if( i==4 ){
break;
}
document.write( i +”<br>”);
}
//–>
</script>

結果はこのようになります


●for文の中でスキップをしますcontinue

(2)を抜く処理です


<script type=”text/javascript”>
<!–
for(i=0;i<=6;i++){
if( i==2 ){
continue;
}
document.write( i +”<br>”);
}
//–>
</script>

結果はこのようになります


●日付を取得
Dateオブジェクト


<script type=”text/javascript”>
<!–
hi=new Date();
hi=hi.getDate();
document.write(hi);
//–>
</script>

現在の日にち

——————————-


<script type=”text/javascript”>
<!–
toki=new Date();
jikan=toki.getHours();
document.write(jikan);
//–>
</script>

現在の時台

——————————-

くっつけると

——————————-

.getHours() 時の取得
.getMinutes() 分の取得
.getSeconds() 秒の取得
.getYear() 年の取得
.getMonth() 月の取得
.getDate() 日の取得
.getDay() 曜日の取得
.getYear() 西暦の取得

————————–

.setHours() 時の設定
.setMinutes() 分の設定
.setSeconds() 秒の設定
.setYear() 年の設定
.setMonth() 月の設定
.setDate() 日の設定
.setDay() 曜日の設定
.setFullYear() 西暦の設定


●if文(分岐)
簡単に言うと2本の道があるとします。
もしそうであれば(if)真・・・左の道へいった場合
そうでなければ(else)偽・・・右の道へいった場合


<script type=”text/javascript”>
<!–
ten = 72;
if((ten >= 70) && (ten < 100)) {
alert(“平均点を超えました”);
}
//–>
</script>

結果
範囲以内なので、アラートで平均点を超えましたと表示されます。
もし範囲内でなければ処理はなにもされません。

——————————————-

書き方は同じです。


<script type=”text/javascript”>
<!–
ten = 45;
ban = (ten<= 70) ? “70以下” : “70以上”;
alert(ban);
//–>
</script>

結果
アラートで70以下と表示されます。45を70以上にすると70以上と表示されます。

——————————————-

変数 = (条件) ? “左の処理” : “右の処理”;
(条件が真であるならば左の処理:そうでなけれ右の処理)


●比較演算子
左 == 右 【左と右が同じなら処理をする】
左 > 右【 左が右より大きいなら処理をする】
左 < 右 【左が右より小さいなら処理をする】
左 >= 右 【左が右より大きいか同じなら処理をする】
左 <= 右 【左が右より小さいか同じなら処理をする】
左 != 右 【左と右が違うなら処理をする】

≪例≫
if ( a == b ){条件を処理}
もしaとbが等しければ{}内の条件を処理する

≪例≫


<script type=”text/javascript”>
<!–
hidari = 6;
migi = 2;
if ( hidari > migi ) {
document.write(“左の勝ち”);
}else{
document.write(“右の勝ち”);
}
//–>
</script>

結果

——————————————-

hidari変数に6が入っていてmigi変数には2が入っています
もしhidari変数の6がmigi変数の2より大きければ左の勝ちとドキュメントに書きます
そうでなく小さければ右の勝ちと書きます
この場合はhidari 6 > 2 migiでhidariが大きいので左の勝ちと記載されます
たとえばhidariの値を1に変えると右の勝ちと変わります


●else if


<script type=”text/javascript”>
<!–
var ten = 29;
if (ten >= 80){
document.write(“よく頑張りました”);
}else if ((ten >= 60) && (ten < 70)) {
document.write(“もう少し頑張りましょう”);
} else {
document.write(“努力が足りません”);
}
//–>
</script>

結果

——————————————-

if (条件式1) {
条件式1が真の場合
} else if (条件式2) {
条件式1が偽の場合
条件式2が真の場合
} else if (条件式3) {
条件式1と2が偽の場合
条件式3が真の場合
} else {
全ての条件式が偽の場合
}
の処理を行います

≪例≫
変数 ten にテストの点数を入れます
それに応じて処理をします


●論理演算子
&& なおかつ
|| または
!  否定


●for in 文


<script type=”text/javascript”>
<!–
box = {“本” : 500 ,”ジュース” : 120 };
for (var naka in box) {
document.write(naka + ” ” + box[naka]);
}
//–>
</script>

文字列をキーと言います。
そのキー値を取り出して繰り返しています

結果


●switch


<script type=”text/javascript”>
<!–
kagi = 2;
switch (kagi) {
case 1:
document.write(“鍵1”);
break;
case 2:
document.write(“鍵2”);
break;
default:
document.write(“ニセ鍵”);
break;
}
//–>
</script>

この例では1,2以外だったらニセ鍵でした。


●連想配列(ハッシュ)


<script type=”text/javascript”>
<!–
i = new Array();
i[“太陽”] = “赤い”;
i[“空”] = “青い”;
document.write(i[“太陽”]);
document.write(i[“空”]);
//–>
</script>

結果

————————————–

new Array()で用意した値を代入して使うことで連想ハッシュになります


●無名関数
関数名がないもの
使い捨て関数

<input type=”button” value=”ON” id=”targ”>
<script type=”text/javascript”>
<!–
var my = document.getElementById(‘targ’);
my.onclick = function() {
alert(“Hello!”);
}
//–>
</script>

結果


●ソート
順番に並び変える


<script type=”text/javascript”>
<!–
box = [5,8,4,3,1,7,2,6];
box.sort();
document.write(box);
//–>
</script>

結果
1,2,3,4,5,6,7,8

——————————————-

順番を逆に並び変える


<script type=”text/javascript”>
<!–
box = [5,8,4,3,1,7,2,6];
box.reverse();
document.write(box);
//–>
</script>

結果
8,7,6,5,4,3,2,1

——————————————-


●javascriptでスタイルシートを操作する
javascriptで画像を扱うにはname属性を使って名前をつけてあげ
≪例≫
<img src=”画像名” name=”my” style=position:absolute;left:100px; top200px;>
画像名をmyとしてみました

document.my.style.left= x座標
document.my.style.top= y座標

他の書き方
document.imgages[“my”].style.left= x座標
document.imgages[“my”].style.top= y座標


座標

スタイルでをjavascriptで扱う場合

background-color
backgroundColor

ハイホンを取って続く頭文字を大文字にする


●getElementByid
テキストの位置を決める場合
id属性を使います
divタグを使って
id属性名をmykeyとしました

<div id=”mykey”>文字</div>

document.getElementByid(“mykey”).style.left= x座標
document.getElementByid(“mykey”).style.top= y座標

getElementByidはその名の通りidの要素を取り出す事が出来ます


●innerHTMLを使ってhtml内の文字を書き換えます


<div id=”mykey”>書き換える文字>/div>
<script type=”text/javascript”>
<!–
moji = document.getElementById(“mykey”);
moji.innerHTML = “文字を書き換えました”;
//–>
</script>

結果

書き換える文字


ブラウザ側には書き換える文字と表示されるはずですが
そこに文字を書き換えましたにすり替えています


●typof演算子

型を返します


<script type=”text/javascript”>
<!–
day=new Date();
moji=”文字”;
suji=50;
document.write(typeof day,”/”,typeof moji,”/”,typeof suji);
//–>
</script>

結果

型が返されます。


●タイム
setTimeout(“abc()”,1000);
といった場合

1000は一秒と表します。4000なら四秒です。


●スコープ
グローバル変数とは関数外で宣言した変数を使用することができます

ローカル変数とは関数の内部で宣言した変数は、その関数の中でしか使うことができません


●while文

繰り返し処理を行います。
for文と違って
何回繰り返すか数がわかっていなときに役立ちます


●do while文

使い方はwhile文と同じですが

こちらの場合には

繰り返しを一度行ってから条件式を評価させます

つまりは必ず一回は判定を行います

逆にwhile文では、一回も判定を行はないことがあります

注意;無限ループにならないように注意します。ありえない条件です


●confirm
選択させる 例 リンクさせる


●lenght
lenghtは文字列に対し、その長さを返すプロパティです
簡単に言えば自動に数を計算してくれます


●スコープ
スコープとは変数の宣言が有効な部分


●定数
null
undefined
true falseの事

定まった数で変えることのできない特殊な変数です


●フラグ判定 true false
フラグ判定用にフラグとして変数を作ります。
特にゲームなどに役立ちます

イメージとしては旗をイメージしてください

旗が上がっていたら真を(true)返す逆に旗が上がっていなければ

偽の(false)を返す。

もちろん設定はどちらでも構わないことになります

逆にしても同じことです。
旗が上がっていたら偽の(false)を返す


●new演算子
配列などのnewはオブジェクトを生成する演算子です


●メインルーチン
主のプログラムで
副プログラムをサブルーチンと呼びます


●多重ループ
ループの中にループを入れることです

javascript

このエントリーをはてなブックマークに追加
  


スポンサード リンク

 

↑このページの先頭へ